Django Master

Creating the Best TODO app With the Django Master [pt.3]

Creating the Best TODO app With the Django Master [pt.3]

Nischal lamichhane's photo
Nischal lamichhane
·

4 min read

This is the Third Part of multipart Blog, in this Blog, we will be Looking at the T of MVT architecture of Django.

What is T?

T stands for Templates, a Template in Django is a Html File that is used to Generate a GUI for Average stupid user that cant read the console. Templates are written in Templates directory that can be either in Root directory or the App directory and are rendered by views as a response to specific URLs in urls.py.

We will be diving into template Inheritance Directly Like a Sigma

  1. Create a Templates directory in the root directory of the project

  2. Create a 'base.html' file in this directory. we will be inheriting this html file

  3. Create another directory named includes inside of the templates directory. Shit like Sidebar, Header, Footer and more site-wide components are kept in that directory. You will Put header.html in this directory

  4. Create a directory named 'home' inside templates directory and create an 'index.html' and 'createtask.html' files. The 'home' directory will help us organize our templates.

  5. If you did everything right, which I highly doubt. This is what your directory structure should look like

SHIT to Read:

Django Uses JINJA templating Engine for template rendering. Read about it here:
BORING SHIT

How it Works:

In Django the Templates can be inherited, included and more shit like this. Most Rudimentary thing in all of these is Creating Blocks.
we will write base.html and then we will inherit base.html in all other pages and just change the content body and nothing else following DRY concept.

Header.html:

<nav class="navbar navbar-expand-sm navbar-light bg-success">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">To-Do App</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarID"
            aria-controls="navbarID" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarID">
            <div class="navbar-nav">
                <a class="nav-link " aria-current="page" href="{% url "home" %}">Home</a>
            </div>
            <div class="navbar-nav">
                <a class="nav-link " aria-current="page" href="{% url "createtask" %}">Add a Task</a>
            </div>
        </div>
    </div>
</nav>

href="{% url "home" %}" will be converted into href="/"
href="{% url "createtask" %}" will be converted into href="/createtask/"
This all happens dynamically Thanks to Jinja Templating engine

Base.html:

<!doctype html>
<html lang="en">
    <head>
        <title> Todo|{% block title %}Basefile{% endblock title %}</title>
        <!-- Required meta tags -->
        <meta charset="utf-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />

        <!-- Bootstrap CSS v5.2.1 -->
        <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
            crossorigin="anonymous"
        />
    </head>

    <body>
            {% include "includes/header.html" %}
        <main>
            {% block content %}{% endblock content %}
        </main>
        <footer>

        </footer>
        <!-- Bootstrap JavaScript Libraries -->
        <script
            src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
            integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
            crossorigin="anonymous"
        ></script>

        <script
            src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"
            integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+"
            crossorigin="anonymous"
        ></script>
    </body>
</html>

The {% block title %}Basefile{% endblock title %} is called a Block. If we inherit this
file, we can replace the text "Basefile" with a single line of code and no repeating html code.

The {% include "includes/header.html" %} is called a Include. It is similar to inheriting but we can't change any content of the Parent template easily. We are including header for our site in our base.html in this case.

Index.html:

{% extends "base.html" %}

{% block content %}
    <div
        class="container-md"
    >
    <div
        class="table-responsive-md"
    >
        <table
            class="table table-striped-columns table-hover table-borderless table-primary align-middle"
        >
            <thead class="table-light">
                <caption>
                    Task List
                </caption>
                <tr>
                    <th>Task ID</th>
                    <th>Task </th>
                    <th>Expires on</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody class="table-group-divider">
                {% for task in tasks %}
                <tr class="table-primary">
                    <td scope="row">{{task.id}}</td>
                    <td>{{task.title}}</td>
                    <td>{% if task.expired %}
                        Task has expired.
                        {% else %}
                        {{task.expires}}
                        {% endif %}</td>
                    <td>
                        {% if task.is_complete %}
                        Task Completed
                        {% else %}
                        Task Pending
                        {% endif %}
                    </td>
                    <td>
                        {% if task.is_complete %}
                        <a class="btn btn-danger" href = {% url 'togglestatus' task_id=task.id %} > Mark as incomplete</a>
                        {% else %}
                        <a  class ="btn btn-success" href = {% url 'togglestatus' task_id=task.id %} > Mark as Complete</a>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
            <tfoot>

            </tfoot>
        </table>
    </div>

    </div>

{% endblock content %}

The {% extends "base.html" %} is what's inheriting the base.html template. now we can change just what's inside of the {% block content %}{% endblock content %} and {% block title %}{% endblock title %} that we wrote on base.html file.

Createtask.html:

{% extends "base.html" %}

{% block content %}
<div class="container">
<form class=" needs-validation form-control" novalidate method="POST">
    {% csrf_token %}
  {{form.as_p}}
    <button class="btn btn-success" type="submit">Submit form</button>
</form>
</div>
{% endblock content %}

The {% csrf_token %} is required by default on every post request. CSRF stands for Cross Site Request Forgery. only Nerds get deep into it. We will just use the csrf_token tag.

For Stupid People:

None of the shit inside {{ }} ,{% %} will be rendered on the response, website. It simply is used for Logic part for the engine.
{% tag %} is called a tag.
{{ variable }} is called a variable.

How to RUN the Server:

  1. Open console.

  2. Go to the directory that has manage.py file.

  3.    py manage.py makemigrations
   py manage.py migrate

  4.    py manage.py runserver

    GOTO your Microsoft EDGE browser. If you're using any other browser, YOU CANNOT BE A DJANGO MASTER.

This Concludes the Multipart BLOG Creating the Best TODO app With the Django Master [3 pts]

Did you find this article valuable?

Support Nischal lamichhane by becoming a sponsor. Any amount is appreciated!

DjangoDjangoRestFrameworkdjango masterGeneral ProgrammingMultiply and surrender