Learn Django

Create the Login Template

Django's user auth system offers a fully functional login page out of the box. To use it, all you have to do is create URL configurations (one for login, one for logout) that point to two built-in Django views. These views provide all the functionality needed to display a login form, and authenticate a user after they provide a username and password.

There's one change we want to make. Instead of using Django's built in template, we will create a custom form with our own styling. That's the focus of this lesson.

Step 1: Code the Login Template

Follow these steps to create the template.

  1. Navigate to /.../crmeasy/crmapp/templates
  2. Create a file named login.html
  3. Open that file and type in the following code
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
{% extends 'base.html' %}
{% block title %}Login{% endblock %}

{% block content %}
    <div id="content-container" class="container p-none">
        <div class="lgn-container col-lg-8">
            <form id="login-form" method="post" 
                  action="{% url 'django.contrib.auth.views.login' %}">
                {% csrf_token %}
                <table class="table">
                    <tr>
                        <td><label for="id_username">Username</label></td>
                        <td><input id="id_username" name="username" 
                                   type="text" class="form-control"></td>
                    </tr>
                    <tr>
                        <td><label for="id_password">Password</label></td>
                        <td><input id="id_password" name="password" 
                                   type="password" class="form-control"></td>
                    </tr>
                </table>
                {% if form.errors %}
                    <p class=" label label-danger">
                        Your username and password didn't match. 
                        Please try again.
                    </p>
                {% endif %}

                <input type="submit" value="Login" 
                       class="btn btn-primary pull-right" />
                <input type="hidden" name="next" value="{{ next }}" />
            </form>
        </div>
    </div>
{% endblock content %}

Code Review

Line 7: This defines the login form element. Look at how the action= attribute is populated - by looking up the URL from the built-in login view.

Lines 22-27: This if statement is used to decide whether or not to display errors, such as if the user enters the wrong username and/or password.

Line 24: This is a hidden input element that can be used to instruct the login view to redirect the user to another page on the site if the login is successful. To use it, simply add ?next=/some/page/. This URL parameter is actually added automatically in some cases, for example, if the user accesses a view that is protected with the login_required decorator.

Step 2: Commit Changes

Execute these commands to commit your changes in Git.

1
2
3
4
5
# add files
(venv)$ git add .

# commit files
(venv)$ git commit -m "created the login template"

Track your progress with a free account