Learn Django

View Contact - Create Template

Two templates are needed to display a contact's details. The first one is the parent template, which can be used to display a contact in a page on its own. The second is the item template, which contains just the HTML required to display a single contact on its own.

The templates are broken apart like this because the item template will eventually be integrated into the Account Detail page.

Step 1: Create the Contact Detail Parent Template

Follow these steps to create the templates.

  1. Navigate to /.../crmeasy/crmapp/templates
  2. Create a folder here named contacts/
  3. Create a file here named contact_detail.html and open it in your IDE
  4. Type in this code
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
{% extends 'base.html' %}
{% block title %}Contact Detail{% endblock title %}

{% block content %}
    <div id="content-container" class="container p-none">
        <div id="cd-body" class="row">
            <h4 class="ad-mh">Contact Details</h4>
            <table id="cd-table" class="table">
                <tbody>
                    {% include 'contacts/contact_item_view.html' %}
                </tbody>
            </table>
        </div>
    </div>

{% endblock content %}

Step 2: Create the Contacts Item Template

Now it's time to create the contact item template. If you look in the previous template, you'll see that it is referenced on line 10. Follow these steps to build it.

  1. Navigate to /.../crmeasy/crmapp/templates/contacts
  2. Create a file there named contact_item_view.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
<tr>
    <td class="ci-td-p-l">{{ contact.full_name }}</td>
    <td>{{ contact.role }}</td>
    <td>{{ contact.email }}</td>
    <td>{{ contact.phone }}</td>
    <td class="con-cntrl">
        {# Contact Edit Link #}
        <a class="pen edit-contact"
           href=""></a>
    </td>
    <td class="ci-td-p-r">
        {# Contact Delete Link #}
        <a class="cancel"
           href=""></a>
    </td>
</tr>

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 contact detail templates"

Track your progress with a free account