Build a Social Media Website with Django - Feed App Templates

Build a Social Media Website with Django - Feed App Templates

Learn Django by doing some practical project - Build a Social Media Website with Django. In the fifth part, we will focus on building the templates for the Feed app we defined in the last tutorial.

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.

{% extends "feed/layout.html" %}
{% load static %}
{% load crispy_forms_tags %}
{% block cssfiles %}
{% endblock cssfiles %}
{% block searchform %}
<form class="form-inline my-2 my-lg-0 ml-5" action="{% url 'search_posts' %}" method="get">
  <input name="p" type="text" placeholder="Search posts..">
  <button class="btn btn-success my-2 my-sm-0 ml-4" type="submit">Search</button>
</form>
{% endblock searchform %}
{% block content %}
<br><br>
<div class="container">
    <div class="row">
      <div class="col-sm-9 col-md-7 col-lg-5 mx-auto">
        <div class="card card-signin my-5">
          <div class="card-body">
            <h5 class="card-title text-center"><b>Post</b></h5>
            <form class="form-signin" method = "POST" enctype="multipart/form-data">
            {% csrf_token %}
            <fieldset class="form-group"><br>
                {{ form|crispy }}
            </fieldset>
            <div class="form-group">
                <button class="btn btn-lg btn-primary btn-block text-uppercase" type="submit">Post</button><br>
            </div>
        </form>
    </div>
    </div>
    </div>
    </div>
</div>

{% endblock content %}
{% block jsfiles %}{% endblock jsfiles %}

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.

{% extends "feed/layout.html" %}
{% load static %}
{% block cssfiles %}
{% endblock cssfiles %}
{% block searchform %}
<form class="form-inline my-2 my-lg-0 ml-5" action="{% url 'search_posts' %}" method="get">
  <input name="p" type="text" placeholder="Search posts..">
  <button class="btn btn-success my-2 my-sm-0 ml-4" type="submit">Search</button>
</form>
{% endblock searchform %}
{% block content %}
     <div class="container">
        <div class="row">

          <div class="col-md-8">
            {% for post in posts %}
            <div class="card card-signin my-5">
              <div class="card-body">
                  <a href="{{ post.user_name.profile.get_absolute_url }}"><img src="{{ post.user_name.profile.image.url }}" class="rounded-circle" width="30" height="30" alt=""></a>
                  <a class="text-dark" href="{{ post.user_name.profile.get_absolute_url }}"><b>{{ post.user_name }}</b></a>
                  <br><small class="text-muted">Posted on {{ post.date_posted }}</small>
                  <br><br>
                <p class="card-text text-dark">{{ post.description }}</p>
              </div>
              <a href="{% url 'post-detail' post.id %}"><img class="card-img-top" src="{{ post.pic.url }}" alt=""></a>
              {% if post.tags %}
              <br>
              <p class="text-danger ml-3"><b>Tags: <i>{{ post.tags }}</i></b></p>
              {% endif %}
              <div class="card-footer">
                  <button class="btn btn-white mr-3 like" id="{{ post.id }}">
                    {% if post in liked_post %}
                        <a href="{% url 'post-like' %}" style="color:red;" id="likebtn{{ post.id }}"> Unlike</a> | {{post.likes.count}}
                    {% else %}
                        <a href="{% url 'post-like' %}" style="color:green;" id="likebtn{{ post.id }}"> Like</a> | {{post.likes.count}}
                    {% endif %}
                </button>
                  <a class="btn btn-outline-info" href="{% url 'post-detail' post.id %}">Comments | {{ post.details.count }}</a>
              </div>
            </div>
            {% endfor %}
             </div>
        </div>
    </div>

{% if is_paginated %}

      {% if page_obj.has_previous %}
        <a class="btn btn-outline-info mb-4" href="?page=1">First</a>
        <a class="btn btn-outline-info mb-4" href="?page={{ page_obj.previous_page_number }}">Previous</a>
      {% endif %}

      {% for num in page_obj.paginator.page_range %}
        {% if page_obj.number == num %}
          <a class="btn btn-info mb-4" href="?page={{ num }}">{{ num }}</a>
        {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
          <a class="btn btn-outline-info mb-4" href="?page={{ num }}">{{ num }}</a>
        {% endif %}
      {% endfor %}

      {% if page_obj.has_next %}
        <a class="btn btn-outline-info mb-4" href="?page={{ page_obj.next_page_number }}">Next</a>
        <a class="btn btn-outline-info mb-4" href="?page={{ page_obj.paginator.num_pages }}">Last</a>
      {% endif %}

    {% endif %}

{% endblock content %}

{% block jsfiles %}
<script>
    $(".like").click(function (e) {
    var id = this.id;
    var href = $('.like').find('a').attr('href');
    e.preventDefault();

    $.ajax({
        url: href,
        data: {
          'likeId': id
        },
        success: function(response){
          if(response.liked){
            $('#likebtn' + id).html("Unlike");
            $('#likebtn' + id).css("color", "red")
          }
          else{
            $('#likebtn' + id).html("Like");
            $('#likebtn' + id).css("color", "green")
          }
        }
      })
});
</script>
{% endblock jsfiles %}

django python web-development programming developer

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire Python Developers

Are you looking for experienced, reliable, and qualified Python developers? If yes, you have reached the right place. At **[HourlyDeveloper.io](https://hourlydeveloper.io/ "HourlyDeveloper.io")**, our full-stack Python development services...

Hire Python Developers India

Looking to build robust, scalable, and dynamic responsive websites and applications in Python? At **[HourlyDeveloper.io](https://hourlydeveloper.io/ "HourlyDeveloper.io")**, we constantly endeavor to give you exactly what you need. If you need to...

Python Django Full Course | Django Tutorial | Django Web Framework

Python Django full course | Django Tutorial | Django Web Framework | you will be learning almost everything you need to create web application with Django framework.

Basic Data Types in Python | Python Web Development For Beginners

In the programming world, Data types play an important role. Each Variable is stored in different data types and responsible for various functions. Python had two different objects, and They are mutable and immutable objects.