Building a To Do Application in Python using Django Framework – Part 05

In this 5th part we are going to create an HTML template which will be our template for all other HTML pages.

In the home’s template folder (same folder as index.html) create a file named base.html and add the following code into it:

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Todo App</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="{% static 'home/style.css' %}" type="text/css" />
    
    <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/solid.js" integrity="sha384-+Ga2s7YBbhOD6nie0DzrZpJes+b2K1xkpKxTFFcx59QmVPaSA8c7pycsNaFwUK6l" crossorigin="anonymous"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/fontawesome.js" integrity="sha384-7ox8Q2yzO/uWircfojVuCQOZl+ZZBg2D2J5nkpLqzH1HY0C1dHlTKIbpRz/LG23c" crossorigin="anonymous"></script>
    
</head>
<body>
    
    <div class="container-fluid">
        <header class="row bg-dark pl-5 pr-5">
            <div class="col-md-6 p-2">
                <h1 id="title" class="navbar-text text-light border border-light rounded-circle p-3">ToDo</h1>
            </div>
            <nav class="col-md-6 text-right pt-4">
                <a href="{% url 'home' %}"><i class="fas fa-home text-light"></i></a>
                <a href="{% url 'todo_index' %}" class="pl-2"><i class="fas fa-list-alt text-light"></i></a>
            </nav>
        </header>
        
                {% block content %}{% endblock %}
        
        <footer class="row bg-dark pt-3">
            <div class="col-md-12 text-center text-light">
                <img id="dan-pic" src="http://saigon.ro/img/d3.jpg" class="rounded-circle m-3" ald="Dan Dumitrache - Full stack web developer">
                <p>Dan Dumitrache | Portfolio Project<br>
                Code Institute, Dublin<br>
                Jan 2018</p>
            </div>
        </footer>
    </div>
    
    <!-- =========== Bootstrap JavaScript ========== -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <!-- =========== jQuery ========== -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <!-- =========== Popper ========== -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

</body>
</html>

As you can see, I started with {% load static %}. That’s because I am going to have a static folder with custom CSS. Let’s do the static folder and the CSS file now.

In the home app create a folder and name it static. In it, create another folder and name it home. In the newly created home folder create a file and name it style.css. It is going to contain all our custom CSS.

This is the content of my style.css file so far:

nav {
    font-size: 2rem;
}
footer {
    font-size: 0.7rem;
}
#dan-pic {
    max-width: 50px;
}

The body of our base.html contains two links, the {% block content %} and {% endblock %} tags which will contain the content of other pages, the footer, and links to other resources necessary for Bootstrap.

Notice that I use font awesome for the navigation links.

Before the end of the body tag there are links to three JavaScript files necessary for Bootstrap.

The index.html file contains now only content that is placed in between the {% block content %} and {% endblock %} tags in the base.html file.

Here is my index.html file:

{% extends 'home/base.html' %}

{% block content %}

<div class="row pt-5">
    <div class="col-md-12 text-center">
        <h2>Welcome to my ToDo application</h2>
    </div>
</div>

<div class="row p-5">
    <div class="col-md-12">
        <p>This is a simple ToDo application written in Python. It uses Django as a Framework and Bootstrap for layout. It is part of Dan Dumitrache's portfolio and its code can be found on GitHub at <a href="https://github.com/saigonro/portfolio-todo">https://github.com/saigonro/portfolio-todo</a>.</p>
        <h3>Main features</h3>
        <p>The application's main features are:</p>
        <ul>
            <li>Responsive - It adjusts its layout according to the screen size.</li>
            <li>Clean design.</li>
            <li>Intuitive and easy to use.</li>
            <li>Add, edit, and delete a new item from the web interface.</li>
        </ul>
        <h3>Author - Dan Dumitrache</h3>
        <ul>
            <li>Personal website: <a href="http://saigon.ro"><i class="fas fa-external-link-square-alt"></i></a></li>
            <li><i class="fab fa-github-square"></i> GitHub:  <a href="https://github.com/saigonro"><i class="fas fa-external-link-square-alt"></i></a></li>
        </ul>
    </div>
</div>

{% endblock content %}

So far so good! I have the base template and the home page which contains information about the todo application. Now, I have 5 todo items; the first thing I want to do now is to display them on the page. That’s exactly what I am going to do in part 6.

Leave a Reply