Learn Django

New Account - Create Templates

The new account page is split up into two templates. The first template provides an outer container for the page. The second template provides the HTML elements for the actual form. Follow these steps to create the templates.

Now it's time to create the Account Create/Update Template. This is achieved by using two different template files. Follow these steps to create them.

Step 1: Create the Template Files

Follow these steps to create both template files.

  1. Navigate to the /.../crmeasy/crmapp/templates/acccounts/ folder
  2. Create a file there named account_cru.html
  3. Create another file named account_item_form.html
  4. Open both of these files

Step 2: Code the Main Account Update Template

Type this into the account_cru.html file

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
{% extends 'base.html' %}
{% block title %}Account Operation{% endblock title %}

{% block content %}
    <div id="content-container" class="container p-none">
        <div class="side-p">
            {% include 'accounts/account_item_form.html' %}
        </div>
    </div>
{% endblock content %}

Step 3: Create the Item Level Form Template

Type this into the account_item_form.html 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
<form id="gi-form"
      action=""
      method="post">
    {% csrf_token %}
    <div id="gi-h-w">
        <h3 class="gi-mh">{{ form.name }}</h3>
        <span>{{ form.name.errors }}</span>
    </div>
    <div class="row">
        <div class="col-md-9">
            <p>{{ form.desc }}</p>
            <span>{{ form.desc.errors }}</span>
        </div>
        <div class="col-md-3">
            <p class="nm">{{ form.address_one }}</p>
            <span>{{ form.address_one.errors }}</span>
            <p class="nm">{{ form.address_two }}</p>
            <span>{{ form.address_one.errors }}</span>
            <p class="nm">{{ form.city}}</p>
            <span>{{ form.city.errors }}</span>
            <p class="nm">{{ form.state }}</p>
            <span>{{ form.state.errors }}</span>
            <p class="nm">{{ form.phone}}</p>
            <span>{{ form.phone.errors }}</span>
        </div>
    </div>
    <input id="gi-form-submit" class="btn btn-primary" type="submit" value="SAVE">
    <p>{{ form.non_field_errors }}</p>
</form>

Step 4: Update the Account List File

Open the /.../crmeasy/crmapp/templates/accounts/account_list.html file in your IDE. Locate the {# Add Account Link #} comment and add this code beneath it.

1
2
3
4
5
{# Add Account Link #}
<span class="pull-right">
    <a href="{% url 'account_new' %}"
       class="btn btn-link p-r-none">+ Add New Account</a>
</span>

Step 5: 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 new account template"

Track your progress with a free account