Make social media applications with Flask #11: Synchronize feeds with the profile and followers and following info

Repository

https://github.com/python

What Will I Learn?

Synchronize feeds with the profile
Link to user profile
Add total followers and the following info

Requirements

Basic Python
Install Python 3
Install Flask

Resources

Python - https://www.python.org/
Flask - http://flask.pocoo.org/
Peewee http://docs.peewee-orm.com/en/latest/
Sqlitebrowser https://sqlitebrowser.org/

Difficulty

Basic

Tutorial Content

Still in the same tutorial, namely social media using Flask. this tutorial I will still discuss the homepage or feeds on the social media application that I created. for those of you who are just following this tutorial, you can see the progress of this tutorial, divided up the curriculum. in the previous tutorial, I discussed the homepage in this application, in this tutorial I will discuss it more fully and in detail, for that we just start the following tutorial.

Displays feeds of all Users

In the previous section, I have created feeds for users that have been followed, now I will create feeds that contain posts from people we follow and include our posts. So that our homepage displays our posts too, we must change the query when retrieving data in the showHomePage() function section. For more details, we can see the code below:

app.py

@app.route('/')
@login_required
def showHomePage():
    user = get_current_user()
    messages = (Message.select()
                .where((Message.user << user.following()) |
                    (Message.user == user.id)
                )
                .order_by(Message.published_at.desc())
        )
    return render_template('index.html', messages = messages)

This function we are helped by the get_current_user()function which gives the user data that is currently logged in.
This is a function of the code that has a previous tutorial, I will add a logical OR ( | ) operator. As we know the logical operator OR is used to run the command two conditions. The first condition is that we will retrieve data from user posts that we have followed Message.user << user.following() and the second condition I will also take posting data from the account that is currently logged in (Message.user == user.id).
If the query we use is successful then we can see the results as shown below:

ezgif.com-video-to-gif.gif

We can see in the picture above now my status appears on my homepage.

Synchronizing the following system with the homepage

Now I will connect the following user system with the homepage for each user, of course, we don't want to see the status of the user we have unfollowed. I will do a demonstration whether when the user I have followed then I unfollow whether the user's status is still on my homepage. let's look at the picture below:

ezgif.com-video-to-gif (1).gif

If we look at the example above, we have succeeded in creating a following and unfollow system that is connected to the user's home page.

Link to user profile

I will make the porch more interesting and more useful. I will create a link between the posts on the homepage and the user profile, the method is quite simple because I already have user data on the messages object return render_template('index.html', messages = messages). I can get the user to link to the profile. For that, I will change the interface at index.html.

index.html

{%extends "layout.html" %}
{% block body %}
<div class="jumbotron">
  <h1 class="display-4">Welcome to homepage, I'm using base layout</h1>
  <p class="lead">Welcome to the social media application that uses flasks</p>
  <hr class="my-4">
  <p>For new users you are required to register to use this application. please click register</p>
  <a class="btn btn-primary btn-lg" href="{{url_for('registerPage')}}" role="button">Register</a>
</div>
<h2 style="text-align: center;">Your feed</h2>
 {%for message in messages%}
        <h4>{{message.content}} - by <a href="{{url_for('userProfile', username=message.user.username)}}">{{message.user.username}}</a></h4>
        <span style="font-size: 10px; font-style: italic;">{{message.published_at}}</span>
  {%endfor %}
{% endblock %}

What we change is in the <a href="{{url_for('userProfile', link username=message.user.username)}}"> {{message.user.username}} </a>, I added the tag <a> to the profile link that was headed, For that I need to use the url_for () function.
We will go to the userProfile() function that we have created in the previous tutorial, this function that handles profiles and this function requires 1 parameter, namely the username that we pass the URL to for like this url_for('userProfile', link username=message.user.username). If there is no error then we can see the results as shown below:

![ezgif.com-video-to-gif (2).gif](https://cdn.steemitinow I will add a menu profile in this application, so I can easily access my profile section. for that, I will change the layout.html section

Menu profile

Now I will add a menu profile in this application, So I can easily access my profile section. for that, I will change the layout.html section.

layout.html

<li class="nav-item">
     <a class="nav-link" href="{{url_for('userProfile', username = session.username)}}">Profile</a>
</li>

I will add a profile menu in the Navbar section. I will go to userProfile () with the username parameters that we get from the session url_for('userProfile', username = session.username).

ezgif.com-video-to-gif (3).gif

Total followers

Now I will make user info so that users can find out the number of followers. I will use the function that we have created in the previous tutorial in this tutorial series. I will use the functions of the User model, namely followers () and following ().

app.py

class User(BaseModel):
    username = CharField(unique=True)
    password = CharField()
    email = CharField(unique=True)
    join_at = DateTimeField(default=datetime.datetime.now())

    def following(self): // Define following
        return (User.select()
                    .join(Relationship, on=Relationship.to_user)
                    .where(Relationship.from_user == self)
                    .order_by(User.username))

    def followers(self): // Define followers
        return (User.select()
                    .join(Relationship, on=Relationship.from_user)
                    .where(Relationship.to_user == self)
                    .order_by(User.username))

following()

Following function is used to find out who are the users we have followed. The way we do join with table relationship
.join(Relationship, on=Relationship.to_user).

followers()

Followers function is used to find out who are the users who have followed us. How do we do a table relationship .join(Relationship, on=Relationship.from_user).

Now we will display the number of followers and following in the frontend section in profile.html.

profile.html

  <button type="button" class="btn btn-primary">
    Follower <span class="badge badge-light">{{user.followers() | length}} </span>
  </button>
  <button type="button" class="btn btn-success">
    Following <span class="badge badge-light">{{user.following() | length}} </span>
  </button>

I will use buttons and badges from bootstrap 4. to display followers and following in the number of numbers we can use length like the following {{user.followers() | length}}.For more details, we can see the demonstration in the picture below:

Demonstration 1 (login as millesaduski1994)

ezgif.com-video-to-gif (4).gif

If we look at the picture above, I log in as millesaduski1994 and we can see I have 0 followers and 1 following. This means we have done a good job.

Demonstration 1 (login as User2)
I will do the second demonstration by logging in as User2. we can see the demonstration below:

ezgif.com-video-to-gif (5).gif

We can see the second demonstration when we go to the user profile user/User2. User2 has 1 follower and 0 following.

If we switch to user profile user/milleaduski1994, then we can see that we haven't followed milleaduski1994 and milleaduski1994 has 0 followers and 1 following.

After we click the follow button we will see the number of followers below user milleduski1994 increase as shown below:

Now we have made the following and follower systems work well and what we will do next is add info about the following system so that the experience of the user can see a lot of important information on this system. thank you for following this tutorial.