Learn Django

Create the Subscriber Template

It's time to create the first iteration of the subscriber template. This form will grow more complex in the next two chapters. At this point we just want to collect three items from the user; username, email, and password.

Step 1: Create the Folder and File

It's best practice to create a templates directory for each app. In this step you'll create a sub-directory in the templates directory for the subscriber app. You'll then create the new subscriber template.

  1. Navigate to the /.../crmeasy/crmapp/templates folder
  2. Create a new folder there named 'subscribers'
  3. Create a file in that folder named 'subscriber_new.html'
  4. Open that file in your IDE

Step 2: Add the Code to the File

Now it's time to write the template file. Type the below code into the file.

 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
36
37
38
39
40
41
42
43
44
45
46
{% extends 'base.html' %}
{% block title %}Signup{% endblock title %}

{% block content %}
    <div id="content-container" class="container p-none">
        <div class="side-p">
            <form id="user-reg-form" action="." method="post">
                {% csrf_token %}
                {# Username & Password Section #}
                <h3>Signup for a $15 Monthly Subscription</h3>
                <h5 class="sn-sh">CREATE A USERNAME AND PASSWORD</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>{{ form.username.label }}</th>
                            <th>{{ form.email.label }}</th>
                        </tr>
                        <tr>
                            <td>{{ form.username }}</td>
                            <td>{{ form.email }}</td>
                        </tr>
                        <tr>
                            <td>{{ form.username.errors }}</td>
                            <td>{{ form.email.errors }}</td>
                        </tr>
                        <tr>
                            <th>Password</th>
                            <th>Confirm Password</th>
                        </tr>
                        <tr>
                            <td>{{ form.password1 }}</td>
                            <td>{{ form.password2 }}</td>
                        </tr>
                        <tr>
                            <td>{{ form.password1.errors }}</td>
                            <td>{{ form.password2.errors }}</td>
                        </tr>
                    </tbody>
                </table>
                {# Billing Address Section #}
                <input class="btn btn-primary" type="submit" value="submit">
            </form>
            {# Credit Card Section #}
        </div>
    </div>
{% endblock content %}

Step 3: 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 subscriber template"

Track your progress with a free account