CHAPTER 4: Using Static Files in Django, and Template Extending

Simon Ombori March 3, 2021 No Comments

CHAPTER 4: Using Static Files in Django, and Template Extending

Its now time to move ahead to learn how to use CSS and javascript and create more HTML pages; one for clients, one for support staff and another for the director. This will help you learn how to use static files in django. Then we learn and use template extending.

Bonus: how to go to the next page

Now let us create clients page:

this is something you will do again and again so just master this workflow. I prefer to start with URL then views then templates

ticketing/urls.py

path('clients/home', views.clients, name = 'clients_home'),

‘ticket/clients’: This is the link that people will use to access clients home page (what they will use after the domain name) remember the matching?

‘Views.clients’ : This points the function that is supposed to handle this request by the user views is the module and clients is the function name.

Name = ‘clients_page’: This is the name that we will use to rout in HTML URLs/links

views.py

def clients(request): 
    return render(request, 'clients/home.html',{})

As you can see we have a function that has clients as its name. Note this is the client function that the URL is referring to.

This function is rendering the request back to the user’s browser on HTML page called home.html and an empty dictionary.

Templates/

We now need to create a file inside the templates folder and name it home.html

clients/home.html:

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Clients Page</title>
 </head> 
<body>
 <h1>Clients Page</h1>
 </body>
 </html>

Should give your clients page

Fire up your server and head to http://127.0.0.1:8000/clients/home

symons@symons-macbookair:~/STICKETING$ source venv/bin/activate

(venv) symons@symons-macbookair:~/STICKETING$ python manage.py runserver

Follow the same procedure to create a page for the support team and director

Final urls.py should look like this:

from django.urls import path 
from . import views 

urlpatterns = [ 
          path('', views.home, name='home'), 
          path('clients/home', views.client, name = 'clients_home'), 
          path('support/home', views.support, name = 'support_home'), 
          path('director/home', views.director, name = 'director_home') 
        ]

Views.py

from django.shortcuts import render 

def home(request): 
    return render(request, 'home.html',{}) 

def clients(request):
    return render(request, 'clients/home.html',{}) 

def support(request): 
return render(request, 'support/home.html',{})

def director(request): 
return render(request, 'director/home.html',{})

Templates

Have this structure in templates:

and inside each home.html

support/home.html

<!DOCTYPE html>
 <html lang="en">
 <head> 
<meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Support Page</title>
 </head> 
<body>
 <h1>Support Page</h1>
 </body> 
</html>

director/home.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Directors Page</title>
</head>

<body>
    <h1>Directors Page</h1>
</body>

</html>

And I hope we are good to go.

STATIC FILES

Static files are those files that won’t change with requests. I mean they are the same for every user, for example, if a page should have an image or background colour to be black, every user should see this.

Now let us see how we can use CSS and javascript and images on our HTML pages:

- To use static we need to create a static folder on our app( ticketing).
- In settings.py at the end, Django already told us where it will look for static files STATIC_URL = '/static/'

Create folders for CSS, js and images. I created empty files in the respective folders as shown and an image in the images folder

USE

Now open home.html and add the following

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {%load static %}
    <link rel="stylesheet" href="{% static 'css/style.css'%}">
    <title>Document</title>
</head>

<body>
    <h2>WE did it</h2>
    <img src="{% static 'images/logo.png'%}" alt="">
</body>

</html>

Then open CSS folder and create a file called style.css if you haven’t yet.

static/css/style.css

body{
    background-color: rgb(18, 92, 18);
    color: white;
}

now run the server and see what happens:

For me, that’s what I see. If you are stuck remember to ask for help.

Task: Try applying CSS to all the HTML pages(director, support and clients)

I’ll concentrate on Support ream for now. I will also use bootstrap4. I want to create a table that will display all open tickets:

support/home.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <title>Support Page</title>
</head>

<body>
    <br>
    <div class="container">
        <div class="card">
            <div class="card-body">
                <h1>Support Page</h1>
            </div>
        </div>
    </div>
    <br>
    <div class="container">
        <div class="card">
            <div class="card-body">
                <h6>Tickets</h6>
                <div class="container">

                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>Ticket No.</th>
                                <th>Opened By:</th>
                                <th>Date</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>#0001</td>
                                <td>Peter(Health)</td>
                                <td>12/02/2020</td>
                                <td>Take | View</td>
                            </tr>
                            <tr>
                                <td>#0067</td>
                                <td>Abu(Finance)</td>
                                <td>22/02/2019</td>
                                <td>Take | View</td>
                            </tr>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

</body>

</html>

We are loading bootstrap CDN links at the header and creating a table to list our open tickets

As you can see codes are becoming too much for us to handle. for instance, we would do the same things on each page too much repetition. Solution? We put all reusable parts in one file, things like bootstrap, CSS etc

TEMPLATES EXTENDING:

Let us create base.html in the templates folder

Inside it lets add the header for now

base.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <title>Support Page</title>
</head>

<body>
    <br>
    <div class="container">
        <div class="card">
            <div class="card-body">
                <h1>Support Page</h1>
            </div>
        </div>
    </div>
    <br>


    {% block content %}

    {% endblock content %}

</body>

</html>

support/home.html

{% extends 'base.html' %}
{% block content %}
<div class="container">
    <div class="card">
        <div class="card-body">
            <h6>Tickets</h6>
            <div class="container">

                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Ticket No.</th>
                            <th>Opened By:</th>
                            <th>Date</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>#0001</td>
                            <td>Peter(Health)</td>
                            <td>12/02/2020</td>
                            <td>Take | View</td>
                        </tr>
                        <tr>
                            <td>#0067</td>
                            <td>Abu(Finance)</td>
                            <td>22/02/2019</td>
                            <td>Take | View</td>
                        </tr>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock content %}

As you can see we now don’t have to repeat the header in every page instead we just extend base.html using {% extends 'base.html' %} and we have all the things we needed.

What are blocks in base and support/home.html


    {% block content %}

    {% endblock content %}

In base.html these blocks tell Jinja engine that it is expecting some HTML from another file that is extending this page then in support/home.html they tell it that these are the HTML codes you were expecting I hope it makes sense.

This post is getting longer than I expected… let us finish with the bonus

Linking pages together

Normally you would link pages with <a href="next_page.html"></a> but this will not work in Django for Django we do this <a href="{% url 'next_url_name'%}"></a> let us see an example

home.html

{% extends 'base.html' %}

{% block content %}
<div class="container">
    <p><a href="{% url 'support_home' %}">Support Page</a></p>
    <p><a href="{% url 'director_home' %}">Director Page</a></p>
    <p><a href="{% url 'client_home' %}">Client Page</a></p>
</div>

{% endblock content %}

First, notice how much our code is reduced.

What comes after url is the name we used in urls.py

That was all about using static files in django and django template extending

Let us meet in the next chapter, I feel I said a lot give me your feedback.

Get the code from github

You may join my whatsapp group

or Contact me personally info@omborisymons.com