27. Django templating

27.01 Introduction

Django templating is the way in which we can use code to automatically construct html pages that we’re going to send to users.

27.02 HTML refresher

Points worth remembering:

All HTML documents must start with a <!DOCTYPE> declaration.
The declaration is not an HTML tag. It is an “information” to the browser about what document type to expect.
You should always include the lang attribute inside the <html> tag, to declare the language of the Web page. This is meant to assist search engines and browsers.

A sample HTML page for our genedata website:

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="description" content="Toy Gene data website">
 <meta name="keywords" content="HTML,gene,genes,advanced,web,development">
 <meta name="author" content="D. Smith">
 </head>
 <body>
 <div id="header">
 <img src="https://upload.wikimedia.org/wikipedia/commons/e/e0/202002_Laboratory_instrument_dna.svg" alt="dna logo" width="50px" height="50px">
 <h1>Gene Browser</h1>
 </div>
 <div id="navigation">
 <a href="/">Home</a>
 </div>
 <div id="content">
 <p>This is some placeholder content before we develop the application</p>
 </div>
 <div id="footer">
 <hr>
 <p>Author: D. Smith, 2021</p>
 </div>
 </body>
</html>

27.03 Creating a template

We can now start to chop this page up into “static” fragments which won’t change from page to page but can be loaded up into the various new pages we serve. For example we can create the following files:

header.html

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="description" content="Toy Gene data website">
 <meta name="keywords" content="HTML,gene,genes,advanced,web,development">
 <meta name="author" content="D. Smith">
 </head>
 <body>

title.html

 <div id="header">
 <img src="https://upload.wikimedia.org/wikipedia/commons/e/e0/202002_Laboratory_instrument_dna.svg" alt="dna logo" width="50px" height="50px">
 <h1>Gene Browser</h1>
 </div>
 <div id="navigation">
 <a href="/">Home</a>
 </div>

footer.html

 <div id="footer">
 <hr>
 <p>Author: D. Smith, 2021</p>
 </div>
 </body>
</html>

We can now create a base template, called base.html, for the entire application, using the Django templating language to include these new page fragments:

base.html

{% include "./header.html" %}
{% include "./title.html" %}
<div class="content">
 {% block content %}Didn't render content{% endblock %}
</div>
{% include "./footer.html" %}

We’ve used an include tag to include pages, and a block content tag to render the content for the page – this hasn’t been created yet.

We can come back now and revisit the index.html page for the application.

We use this command to tell it where the template is:

{% extends "genedata/base.html" %}

In base.html we called the content block “content”. So around the content we want to use we can put these tags:

{% block content %}
{% endblock %}

The new index.html page would look something like this:

{% extends "genedata/base.html" %}

{% block content %}
    <h1>D.Bucha Genes</h1>
    <table>
    <tr><th>Gene ID</th></tr>
    {% for gene in genes %}
    <tr><td><a href="/gene/{{gene.pk}}" >{{gene}}</a></td></tr>
    {% endfor %}
    </table>
    <h2>Select gene location</h2>
    <a href="/list/Chromosome">Chromosome</a> OR <a href="/list/Plasmid">Plasmid</a>
    <h2>Show Positive Chromosome</h2>
    <a href="/poslist/">Show This List</a>
{% endblock %}

We can now work on our virtual environment to see this in action. Just a reminder that in Windows 10 we need to open a CMD window and type the following:

$ md bioweb
$ cd bioweb
$ python -m venv env
$ env\Scripts\activate
$ cd bioweb
$ python manage.py runserver

Then visit http://127.0.0.1:8000/ to see it working. You should be able to see the index.html page as before, but this time with an image logo and new footer.

27.04 Creating tags

We can also create our own template tags. Let’s create a new folder in the genedata folder called templatetags and then within here some new files:

__init__.py
mytags.py

In footer.html we could replace 2021 with the actual date. So we can do this:

<p>Author: D. Smith, {% todays_date %}</p>

In mytags.py we can type this script, with a function which we’ve called todays_date (matching the tag):

import datetime
from django import template

register = template.Library()

@register.simple_tag
def todays_date():
    return datetime.datetime.now().strftime("%d %b, %Y")

We need to also ensure that footer.html is aware of our template tags, so at the start of the file add:

{% load mytags %}

mytags in the template instruction above needs to match the name of the file.

27.05 Adding templating to other pages

We’ve added templating to our index.html page but we’ve got some other pages in our application that we need to add the templating too.

In gene.html we can delete the html, head and body tags – everything before the h1 line, and type:

{% extends "genedata/base.html" %}

  {% block content %}

and at the end, again removing body and html tags and putting:

  {% endblock %}

This will now render the gene pages with the CSS that we added earlier. We can do the same on our list.html page as well.

Wednesday 10 November 2021, 433 views

Next post: 28. Adding CSS to the template
Previous post: 26. Deleting and updating records

27. Django templating

Wednesday 10 November 2021, 433 views

Leave a Reply Cancel reply

Advanced Web Development index