Django — Step 5

Reusable Components

6 min readJul 18, 2019

This is a continuation from step 4:

Django — Step 4

Adding A Second App

medium.com

The Jinja templating system used by Django has an include tag that is great for creating small reusable components for the front end UI section of your project. As an example, let’s go ahead and create a navigation bar and a footer section that we can use throughout our project.

In order to have our project responsive, let’s implement Bootstrap and JQuery.

Starting with JQuery, you will need to download a copy of the JQuery javascript file. Go here:

Download jQuery | jQuery

jQuery: The Write Less, Do More, JavaScript Library

jquery.com

and download the latest uncompressed version. At the time of writing this, it is version 3.4.1.

Clicking on the download link your browser will navigate to the actual file, just right-click and save as… The file saved as jquery-3.4.1.min.js for me.

Add this file to the index/static/js directory then link this new file within the base template at the bottom above the main.js link:

<script src="{% static 'js/jquery-3.4.1.min.js' %} "></script>

Now let’s add Bootstrap. just like with JQuery, we need to download the Bootstrap files. Go here:

Download

Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package…

getbootstrap.com

Click on the download button in the Compiled CSS and JS section. It will be a .zip file. At the time of writing this tutorial, the version available is v4.3.1

After it downloads, unpack it. Inside will be a css and a js directory. Inside each of these folders will be all of the Bootstrap files available, but we only need 2 of these for this example.

In the css folder copy the file bootstrap.css and paste it into the index/static/css directory in your project.

Then add the link to it in the base.html file above the link to index.css

<link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">

Then in the bootstrap/js folder copy the file bootstrap.bundle.min.js and paste it into the static/index/js folder. Then link to it at the bottom of the base.html below the jquery-3.4.1.min.js link:

<script src="{% static 'js/jquery-3.4.1.min.js' %} "></script>
<script src="{% static 'js/bootstrap.bundle.min.js' %} "></script>
<script src="{% static 'js/index.js' %} "></script>

Bootstrap and JQuery will take care of most of the styling and functionality of this navigation bar, but let’s create a css file for some extra styling.

In the index/static/css directory make a file named nav.css

In this file add this css code:

.navbar {
  opacity: 0.9;
  text-transform: uppercase;
  background-color: rgba(255, 0, 0, 0.5);
}

Save the nav.css file and link it in the base.html template below the other css links:

<link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
<link rel="stylesheet" href="{% static 'css/index.css' %}">
<link rel="stylesheet" href="{% static 'css/nav.css' %}">
<link rel="stylesheet" href="{% static 'css/display_1_index.css' %}">

Now that we have Bootstrap and JQuery loaded we can build the navigation bar.

In the templates directory, create a directory named components and inside create a navigation.html file.

Inside the navigation.html file lets put some HTML:

{% load static %}<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark sticky-top">
 <div class="container "><a class="navbar-brand" href="{% url 'index' %} ">
        <img src="{% static 'img/logo.png' %} " height="50px" width="70px" class="logo" alt="">
      </a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup">
        <span class="navbar-toggler-icon"></span>
      </button><div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <ul class="navbar-nav">
        <li
          {% if '/' == request.path %}
            class="nav-item active"
          {% else %}
            class="nav-item"
          {% endif %}
        >
          <a class="nav-link" href=" {% url 'index' %} ">Home</a>
        </li><li
          {% if 'display_1' in request.path %}
            class="nav-item active"
          {% else %}
            class="nav-item"
          {% endif %}
        >
         <a class="nav-link" href="{% url 'display_1' %}">Gallery 1</a>
        </li>
     </ul></div>
  </div>
</nav>

Save this navigation.html and open the base.html file.

below the opening body tag and above the block content tags place the Jinja include tag:

<body>
{% include 'components/navigation.html' %}{% block content %} {% endblock %}

The tag references the navigation.html file we just created.

Also, In the navigation.html file is this line of code:

<img src="{% static 'img/logo.png' %} " height="50px" width="70px" class="logo" alt="">

This code will look for an image named logo.png in a directory called img inside the static folder. Create a logo.png and add it to your project.

Save the base.html file and start the Django development server

python manage.py runserver

You will now have a navigation bar you can click between the two app we currently have:

The great thing about using Bootstrap and JQuery is the responsive design built in. When our project is viewed in a smaller sized browser, like on a phone, the navigation bar automatically adapts:

If you have played around a little bit with the navigation bar you might have noticed that the name of the page you are viewing is highlighted. This was done with a cool feature of the Jinja template system.

Let’s look at the code:

<li
          {% if '/' == request.path %}
            class="nav-item active "
          {% else %}
            class="nav-item "
          {% endif %}
  >
          <a class="nav-link" href=" {% url 'index' %} ">Home</a>
        </li>

Inside the opening <li> tag we use the if, else, and endif Jinja tags. The if checks if the index page is being accessed with the code: if ‘/’ == request.path, if it is the class of the <li> tag is set to active. if not the active class is removed.

Now that we have our navigation bar, let’s make a really simple footer component.

In the components folder, create a footer.html file.

put this code in the footer.html:

{% load static %}<!-- Footer -->
<footer class="footy py-4 text-white text-center ">
  Copyright &copy;
  <span class="year"></span> DjDemo
</footer>

Save the footer.html file and open the index/static/nav.css and let’s copy the same styling as the navbar class into a new class called footy:

.footy{
  opacity: 0.9;
  text-transform: uppercase;
  background-color: rgba(255, 0, 0, 0.5);
}

If you notice the classes of the footer:

class="footy py-4 text-white text-center"

The first class, footy, is our custom one. The other 3 classes: py-4, text-white, and text-center are Bootstrap classes.

Save the footer.html file and open the base.html and add the include tag for this new component below the content block tags:

{% block content %} {% endblock %}{% include 'components/footer.html' %}

Save and reload the Django server

python manage.py runserver

You should see the new footer added to your pages

That, of course, looks a little weird, so let’s add some HTML to the main templates/index.html page and the display/index.html page.

Open each file and paste this code 3 times into each html file in between the content blocks:

<section>
  <div class="container text-center">
    <div class=" p-5">
      <div class=" p-5">
        <h1 class="display-4 mb-4">
          Hello World
        </h1>
        <p class="lead">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Recusandae quas, asperiores eveniet vel nostrum magnam voluptatum tempore! Consectetur, id commodi!</p>
      </div>
    </div>
  </div>
</section>

This uses Bootstrap’s built-in classes for styling.

You can also replace ‘Hello World’ with ‘Section 1’. Save the files and reload your server