Learn Django

Create the Project Base Template

The first step in creating templates for the project is to create the base template. Think of the base template as the frame for all pages in the application. It sets the top navigation bar, the site footer, and provides a body canvas for any page to customize. By using the base template we can ensure a standard look and feel without having to duplicate HTML code.

Step 1: Create the Base.html File

First, create the base.html file in the templates directory.

  1. Navigate to /.../crmeasy/crmapp/templates
  2. Create a file in this directory called base.html and open it in your IDE for editing

Step 2: Code the Base.html file

The base.html file is one of the largest (i.e. most lines of code) files in the project. Therefore I'm going to show you how to write it in chunks.

Add the HTML Declaration and Head Element

Type the below code segment into the base.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
30
31
32
33
34
{# HTML5 declaration #}
<!DOCTYPE html>
<html>
    {# Make modifiable head elements #}
    <head>
        <title>{% block title %}Home {% endblock title %} | CRM Easy</title>
        {% block head_favicon %}
            <link rel="icon" type="image/png"
                  href="{{ STATIC_URL }}images/favicon.ico">
        {% endblock head_favicon %}
        {% block head_meta %}
            {% block head_meta_charset %}
                <meta http-equiv="Content-Type"
                      content="text/html; charset=utf-8" />
            {% endblock head_meta_charset %}
            {% block head_meta_contentlanguage %}
                <meta http-equiv="Content-Language" value="en-US" />
            {% endblock head_meta_contentlanguage %}
            {% block head_meta_viewport %}
                <meta name="viewport"
                      content="width=device-width, initial-scale=1.0">
            {% endblock head_meta_viewport %}
        {% endblock head_meta %}
        {% block head_css %}
            {% block head_css_site %}
                <link href="{{ STATIC_URL }}css/bootstrap.min.css"
                      rel="stylesheet" media="screen">
                <link href="{{ STATIC_URL }}css/app.css"
                      rel="stylesheet" media="screen">
            {% endblock head_css_site %}
            {% block head_css_section %}{% endblock head_css_section %}
            {% block head_css_page %}{% endblock head_css_page %}
        {% endblock head_css %}
    </head>

Code Review

Line 1: Django template comments are created using the {# add comment #} syntax.

Line 6: The [% block %] tag is used on almost every line in the above code. Blocks are a key part of the template language. They give you the ability to specify parts of the base.html file that can be changed by pages that extend it. For example, line 8 in the above code sets the HTML title element. While it provides a default value, any page that extends the base.html could easily change the title by simply writing {% block title %}Some new Title {% endblock title %}

Line 9: Variables can be displayed using the {{ STATIC_URL }} syntax. In the above code STATIC_URL is a variable that comes from the settings.py file and is used to provide the correct path to static files. It's possible to pass values from views to templates and display them using the {{ variable }} syntax.

Add the Page Body

There are three main sections in the base.html body: the navigation elements, the main content area, and the footer. Type this in the base.html file immediately after the above 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
36
37
38
39
40
41
42
43
44
<body>
    {# Navigation Menu #}
    <header>
        <div class="navbar navbar-default navbar-static-top 
        {% block nav-style %}{% endblock %}">
            <div class="container p-none">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle"
                            data-toggle="collapse"
                            data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="/">CRM Easy</a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        {% if user.is_authenticated %}
                            <li><a href="">Logout</a></li>
                            <li><a href=""
                                   class="p-r-none">Accounts</a></li>
                        {% else %}
                            <li><a href="">Login</a></li>
                            <li><a href="" class="p-r-none">Sign Up</a></li>
                        {% endif %}
                    </ul>
                </div>
            </div>
        </div>
    </header>
    {# The Document Body #}
    <div id="site-wrapper">
        {% block content %}
            if you see this, something is wrong!
        {% endblock content %}
    </div>
    {# The Footer #}
    <div class="footer">
        <div class="container">
            <p>Copyright CRM Easy</p>
        </div>
    </div>
</body>

Code Review

Line 19: There's one new concept used in the above code - an if statement. The Django template system comes with a useful if... then... else... functionality that can be used like this:

1
2
3
4
5
{% if something == true %}
    ...do something
{% else %}
    ...do something else
{% endif %}

In the base.html template the if statement is used to detect whether the user is authenticated or not, and changes the menu options based on that fact.

Add JavaScript Blocks

As previously discussed, JavaScript (JS) is an important part of most modern web apps. In the last section of the base.html file we are creating some blocks that can be used to reference JS files or even straight JS code. Using these blocks, it's possible to override the values set by the main base.html file if needed.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
    {# Set of blocks that can be used to display JavaScript files #}
    {% block footer_javascript %}
        {% block footer_javascript_site %}
            <script src="{{ STATIC_URL }}js/jquery.min.js"></script>
            <script src="{{ STATIC_URL }}js/bootstrap.min.js"></script>
            <script src="{{ STATIC_URL }}js/app.js"></script>
        {% endblock footer_javascript_site %}
        {% block footer_javascript_section %}{% endblock footer_javascript_section %}
        {% block footer_javascript_page %}{% endblock footer_javascript_page %}
    {% endblock footer_javascript %}
</html>

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 base template"

Track your progress with a free account