#### Repository
https://github.com/python

#### What Will I Learn?
- List user followers and following
- Set Limit of data in feeds

#### 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

I will continue my tutorial series on social media applications using the flask, so far we have made several features including database structure, authentication systems, feeds, notifications, following systems and user profiles. this tutorial I will complete the application that we have made by making a list of followers and following. for those of you who are just following this tutorial, you can see the development of this tutorial in the curriculum section. okay, I just started this tutorial.


### List followers and following

- **List following**

I will add information that is important and often we encounter on social media based applications. In this section, I will create a list of lists of users that we have followed or who follow us. I will start by creating a new routing that is ```@app.route('/user/<username>/following')```. For more details, we can see the following example

**app.py**

```
@app.route('/user/<username>/following')
def showFollowing(username):
	try:
		user = User.get(User.username == username)
	except User.DoesNotExist:
		abort(404)
	return render_template('userList.html', users = user.following())
```

- In this routing, I will pass the username parameters of the user who is logged in ```@app.route('/user/<username>/following')```.

- And then I will add a new template **userList.html**. In the previous [tutorial](https://steemit.com/utopian-io/@duski.harahap/make-social-media-applications-with-flask-8-handle-error-and-make-the-system-follow-a-user-1549792437933), I made a *relation* for the user who followed us. The following is a function that we have made in the previous tutorial.

**User model**

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

- System following that I join between table relationship and user table ```.join(Relationship, on=Relationship.to_user)```. So now we can know who are the users we have *followed*. In this function, I join the user table with the ```Relationship.to_user``` field.

- After we get the results we can return it in the template **userList.html**. We can return it as follows ```return render_template('userList.html', users = user.following())```. I passed the value ```user.following ()``` to key **users**.
<br>

- **List followers**

Not much different from following me I will also make new followers, different functions are those that we use to get user followers. to see the difference we can see the code below:

**app.py**

```
@app.route('/user/<username>/followers')
def showFollowers(username):
	try:
		user = User.get(User.username == username)
	except User.DoesNotExist:
		abort(404)
	return render_template('userList.html', users = user.followers())
```

I will use the same template, userList.html, but I will use a different function that we made in the previous [tutorial](https://steemit.com/utopian-io/@duski.harahap/make-social-media-applications-with-flask-8-handle-error-and-make-the-system-follow-a-user-1549792437933). I will use the ```followers ()``` function in the following user models:

**User model**

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

 In this function I join the **user table** with the ```Relationship.from_user``` field and then the results will be returned on the **userList.html** page, ```return render_template('userList.html', users = user.followers())```.
 <br>

- **Show list in frontend**

Then I will add ```url_for()``` on the button that we made earlier in the frontend section so that it can be clicked on and linked to the user list.

**profile.html**

```
{%extends "layout.html" %}
{% block body %}
<div class="jumbotron">
	{% if user.username != session.username %}
		{% if active_user.is_following(user)%}
			<form method="post" action="{{url_for('userUnfollow', username = user.username)}}">
				<p class="bold">{{user.username}} <button class="btn btn-danger">-Unfollow</button></p>
			</form>
		{% else %}
			<form method="post" action="{{url_for('userFollow', username = user.username)}}">
				<p class="bold">{{user.username}} <button class="btn btn-primary">+Follow</button></p>
			</form>
		{% endif %}
	{% endif %}
  <hr>
    <a href="{{url_for('showFollowers', username = user.username)}}" class="btn btn-primary">
  		Follower <span class="badge badge-light">{{user.followers() | length}} </span>
  	</a>
  	<a href="{{url_for('showFollowing', username = user.username)}}" class="btn btn-success">
  		Following <span class="badge badge-light">{{user.following() | length}} </span>
  	</a>
  <h1 class="display-4">Welcome to homepage {{user.username}}, I'm using base layout</h1>
  <p class="lead">Welcome to the social media application that uses flasks</p>
  <hr class="my-4">
  <h2 style="text-align: center;">Your feed</h2>
  {% for message in messages%}
		<h4>{{message.content}}</h4>
		<span style="font-size: 10px; font-style: italic;">{{message.published_at}}</span>
  {% endfor %}
</div>
{% endblock %}
```

- I will tag ```<a>``` button and link with ```url_for ()``` we can adjust to the functions that we have made in each of the routings. 
For list **followers** we can link to routing:

```url_for('showFollowers', username = user.username)```

For list **following** :

```url_for('showFollowing', username = user.username)```
<br>
- **Display User following and followers**

Then we just have to show the data that we have shifted to the frontend, which is **userList.html**.

**userList.html**


```
{%extends "layout.html" %}
{% block body %}
<div class="jumbotron">
  <h2 style="text-align: center;">User list</h2>
  {% for user in users%}
		<a href="{{url_for('userProfile', username=user.username)}}">{{user.username}}</a>
  {% endfor %}
</div>
{% endblock %}
```

Because the user follows and user followed can be more than one, then I will loop the users object that we have shifted to the backend.

```
{% for user in users%}
		<a href="{{url_for('userProfile', username=user.username)}}">{{user.username}}</a>
  {% endfor %}
```

- When displaying I will also link the user with **userProfile** so that we can go directly to the user profile page that we are headed. we can do this by using the userProfile function and passing the username to the routing like this ```url_for('userProfile', username=user.username)```

- If everything is finished and there is no error then we can see the results as shown below:
I will log in as a user of ***milleaduski1994***.

![ezgif.com-video-to-gif.gif](https://cdn.steemitimages.com/DQmTAnsGq5ciu3YZVJ4yqsygTWn6ueH2yVjsPzM7fRAr8Xd/ezgif.com-video-to-gif.gif)

As we can see in the picture above we have successfully displayed users who follow us and we have followed and also we have linked the profiles of each user list.

![ezgif.com-video-to-gif (1).gif](https://cdn.steemitimages.com/DQmUJqbWLAHZsrC7BnD2ZNfrJ2rpFtK6Mt3x7n9ULRb2wh9/ezgif.com-video-to-gif%20(1).gif)
<br>
- **Limit feeds**

There is one feature that I will make on our application, try to imagine when we have followed many users and their posts appear on our homepage, of course, there will be very many posts on the homepage. for that, I will limit the status that can appear on our homepage. We can create a limit when retrieving data that is in our database, for more details we can see in the code below:

**app.py**

```
def showHomePage():
	user = get_current_user()
	messages = (Message.select()
				.where((Message.user << user.following()) |
					(Message.user == user.id)
				)
				.order_by(Message.published_at.desc()).limit(3)
		)
```

We can use the ```limit ()``` function in the **pewee**, We can pass for numbers as the number we want to display ```.limit(3)```.


![ezgif.com-video-to-gif (2).gif](https://cdn.steemitimages.com/DQmYwpFrusDzWuaYcdiyH3ZhgxVcvcvriXvL2oJXcu9v8XL/ezgif.com-video-to-gif%20(2).gif)

![Screenshot_1.png](https://ipfs.busy.org/ipfs/QmR7oChWx1yAMnVq4eGeUUwk7indaupVx37xAQsoKfaFZh)

We can see in the picture above we have limited the data that will be displayed and we have also created a user list of followers and following, then I end my tutorial this time, in the next tutorial I will use ajax jquery to make the limits more dynamic. I hope this tutorial can be useful for you, thank you.


### Curriculum

[Make social media applications with Flask #1: Design database and initial structure, Following and follower functions](
https://steemit.com/utopian-io/@duski.harahap/make-social-media-applications-with-flask-1-desaign-database-and-initial-structure-following-and-follower-functions-1547568096688)

[Make social media applications with Flask #2: System routing and Templating, Make user register](https://steemit.com/utopian-io/@duski.harahap/make-social-media-applications-with-flask-2-system-routing-and-templating-make-user-register-1547816234338)

[Make social media applications with Flask #3: Register user and Store data in SQLite, Base Layout](https://steemit.com/utopian-io/@duski.harahap/make-social-media-applications-with-flask-3-register-user-and-store-data-in-sqlite-base-layout-1548251533384)

[Make social media applications with Flask #4: Login system and Use session to manage user data](https://steemit.com/utopian-io/@duski.harahap/make-social-media-applications-with-flask-4-login-system-and-use-session-to-manage-user-data-1548429289119)

[Make social media applications with Flask #5:  Authentication during registration and User notification](
https://steemit.com/utopian-io/@duski.harahap/make-social-media-applications-with-flask-5-authentication-during-registration-and-user-notification-1548686390863)

[Make social media applications with Flask #6:  View decorator and Post the first status](https://steemit.com/utopian-io/@duski.harahap/make-social-media-applications-with-flask-6-view-decorator-and-post-the-first-status-1549029740369)

[Make social media applications with Flask #7:  The use of backref and Create profile features](
https://steemit.com/utopian-io/@duski.harahap/make-social-media-applications-with-flask-7-the-use-of-backref-and-create-profile-features-1549339256879)

[Make social media applications with Flask #8: Handle error and Make the system follow a user](
https://steemit.com/utopian-io/@duski.harahap/make-social-media-applications-with-flask-8-handle-error-and-make-the-system-follow-a-user-1549792437933)

#### Proof of work done

https://github.com/milleaduski/python-web-app