Build a Social Media Website with Django - Part 5
By: Kumar Shubham
Tags: HTML, Django, Bycetutorial, Web, Website

Build a Social Media Website with Django — Part 5 (Feed App Templates)

In the fifth part, we will focus on building the templates for the Feed app we defined in the last tutorial.

So, in the fourth part, we defined all the backend part of the Feed App, like we defined all the URLs, views, models, forms and registered our models with the admin panel.

So, now in the fifth part, we will focus on all the templates for displaying the logic we wrote in the Feed app. As you already know, Feed app deals with the posts, the likes, the comments and searching for posts part.

So, in this part, there would be lots of HTML since we are dealing with the part of the templates. It will take in the data passed by the views.py file of Feed app and will help display the data to the user and take user input via forms.

So, we put all our templates in the following location: templates/feed inside of the feed folder. It is the Django’s naming convention to put data there as Django looks for templates in that location.

We will deal with templates one by one. There are six of them. We won’t go into detail much as its mostly HTML and CSS classes and we would talk only about the logic part which we use in templates to define who has access to what and what part does what job. So, let’s begin:

create_post.html

Let’s start with the create_post part. This part deals with the creation of new posts. This template will let users easily create new posts by adding the relevant details such as image (compulsory), details about the image and the tags (optional).

The function of this template is to display the required form which would accept user input. There is a submit button to save and submit the post and to add it to the database.

Also, there is a search bar displayed inside the navigation bar which allows you to search for specific posts by relevant tags.

The template extends the layout template which all other templates of Feed and Users templates were using. We will see layout.html file soon.

home.html

It also extends the layout.html file. It is the home page for our app. Any user who logs in will be redirected to this page. This page is accessible without login too.

It also has the same search bar for searching posts. The main purpose of this homepage is to display the posts in a relevant manner.

It also checks whether a post has been liked by the user or not and displays like or unlike button as applicable.

It also has pagination done to display only 10 posts per page. It has links to next and previous pages also.

It also has the AJAX script for handling likes in real-time without refreshing the page. It changes the like button to unlike button as soon as the user likes it or vice versa. It changes the button colour to represent the same.

layout.html

This is the layout file. It imports all the required CSS and JS files which we use on the website. We use Bootstrap4 and some custom CSS files.

Next, we have a Navbar which displays the relevant links for logged in users and users who are not logged in. It is done to show only the links which are required.

E.g.: We will show logout link to someone who is already logged in and will show login and register link for unauthenticated users.

We also have a small footer which just displays the name and copyright info.

You would notice that we have a {%block content%} {%endblock content%} which holds all the content info we have on other pages.

Similarly, we have a search block also which is for searching post or people part.

post_detail.html

This template deals with the displaying of the post in detail. It shows the complete post details along with like and comment count. It also has a section to post comments (comment form is displayed) and below it is the section where all comments are displayed.

Also, there are links to update and delete posts. It only displays these links when the person is the same as the owner of the post. Otherwise, it won’t show these buttons to any other person.

It also has the same AJAX script to handle like and unlike without refreshing.

search_posts.html

This part displays the posts which match the search terms. It displays all relevant posts (search results).

This is similar to the homepage as we need to display posts but unlike homepage which displays all posts, here we display selective posts only which matches the search term.

All other components are the same as the homepage like AJAX script to handle likes and display style.

user_posts.html

This page displays posts by a particular user. It is almost same as the homepage with pagination, same AJAX script to handle likes and the same display style for posts.

The only difference is it displays only posts by a particular user.

So, that’s all for the Feed App Templates. It was a lot of HTML content. Hope you are not bored.

Hope you enjoyed the tutorial. It was the last part in the five-part series of the Django Social Media tutorial.

I hope you all liked the complete series. I hope you all will be able to make your own social media project with Django and can add more aspects to it like tagging, showing posts only by friend circle, an enhanced recommendation system and much more.

The Github Repo for the complete series is here. Feel free to comment or make any pull requests to this repository which would help enhance it in any way.

A similar Django focused series (Building a Job Search Portal) which will teach you some amazing new concepts is:

The first four parts can be found here:-

A great article on React is:-