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

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

So, now in the third part, we will focus on all the templates for displaying the logic we wrote in the Users app. As you already know, Users app deals with all the authentication, profile, friends, search users, find new friends and such other things.

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 Users 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/users inside of the users’ 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 12 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. So, let’s begin:

login.html

Let’s start with the login part. This template will let users sign in into our website. This displays the Login Form and we are using the crispy forms to stylize our forms using Bootstrap4. In Django, forms are very easy to render.

We have a submit button and forgot password option, Also, we have a link to the registration page.

We are extending the layout template from our Feeds app. Each template extends the layout which contains the header and footer part. Don’t worry for now about the layout.html file since we would cover it in Part 5 of the tutorial series.

{% extends "feed/layout.html" %} {% load static %} {% load crispy_forms_tags %}
{% block cssfiles %} {% endblock cssfiles %} {% block content %}
<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>Sign In</b></h5>
          <form class="form-signin" method="POST">
            {% 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"
              >
                Login</button
              ><br /><br />
              <a
                class="btn btn-lg btn-warning btn-block text-uppercase"
                href="{% url 'password_reset' %}"
                >Forgot Password?</a
              >
            </div>
            <small
              ><p class="text-center">
                Not registered yet!
                <a href="{% url 'register' %}"><b>Register Now!</b></a>
              </p></small
            >
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock content %}

register.html

Next, we move to the registration page for our website. This page will let users sign up into our website. It also displays the form and then the submit button. We have a link to the login page for the existing users.

{% extends "feed/layout.html" %} {% load crispy_forms_tags %} {% load static %}
{% block content %}
<br />
<div class="container">
  <div class="row">
    <div class="col-sm-9 col-md-9 col-lg-7 mx-auto">
      <div class="card card-signin my-5">
        <div class="card-body">
          <h5 class="card-title text-center"><b>Register</b></h5>
          <form class="form-signin" method="POST">
            {% 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"
              >
                Sign Up</button
              ><br /><br />
            </div>
            <small
              ><p class="text-center">
                Already Registered!
                <a href="{% url 'login' %}"><b>Login Now!</b></a>
              </p></small
            >
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock content %}

#django #python #web-development #programming #developer