Chapter 1: Introduction to Django Templates

In my previous article, I focused on refining database access code and enhancing the error page with better error handling messages.

Typically, I lean towards using the Django Rest Framework for building RESTful APIs, especially for enterprise applications. This allows me to utilize frameworks like Vue or React for enhanced user interactivity on the frontend. However, this approach often results in increased development time and costs for clients who might prefer a straightforward solution. Therefore, I’ve opted to use Django Templates for this particular project. Future articles in this series will delve into creating projects with distinct frontend and backend architectures.

DTL Configuration

Template files are generally housed in a folder named templates, which can be located either in the project directory or within individual app directories. For this project, I will create the templates folder in the root directory of the project.

To configure the settings.py file, locate the TEMPLATES section and add the following line: DIRS = [os.path.join(BASE_DIR, "templates")].

Sending Data from Views to DTL

In the views.py file, you can import the render module using from django.shortcuts import render and utilize the following syntax to send data: return render(request, template_path, context).

Rendering Data in DTL

To display data within DTL, you use double curly braces {{}}, placing the data from views.py inside. For instance, to iterate through Python iterators, you would employ the built-in tag {% for x in xs %}...{% endfor %}.

For my application, I aim to display a list of employees in a table format. Here’s the code I used in the templates/index.html file:

{% for employee in employees %}

{% endfor %}

<table>

<thead>

<tr>

<th>ID</th>

<th>Name</th>

<th>Gender</th>

<th>Birthday</th>

<th>Mobile</th>

<th>Email</th>

<th>Address</th>

<th>Operations</th>

</tr>

</thead>

<tbody>

<tr>

<td>{{ employee.0 }}</td>

<td>{{ employee.1 }}</td>

<td>{{ employee.2 }}</td>

<td>{{ employee.3 | date:'m-d-Y' }}</td>

<td>{{ employee.4 }}</td>

<td>{{ employee.5 }}</td>

<td>{{ employee.6 }}</td>

<td>

<a href="#">Edit</a>

<a href="#">Del</a>

</td>

</tr>

</tbody>

</table>

Now, when I refresh the browser, the employee data is correctly displayed in a structured table format.

Understanding DTL Variables, Tags, and Filters

Django templates utilize variables {{}} (which are replaced with values defined in views) and tags {%%} (which govern template logic). Here’s a brief overview of some built-in tags:

• {% for %} {% endfor %}: Iterates through lists.
• {% if %} {% elif %} {% else %} {% endif %}: Performs condition checks.
• {% url name args %}: References URL configurations by name.
• {% load %}: Loads Django tags, such as for static files using {% load static %}.
• {% extends base_template %}: Facilitates template inheritance.
• {% block data %} {% endblock %}: Allows custom code to be added to an inherited template.
• {% csrf_token %}: Protects against Cross-Site Request Forgery (CSRF).

Additionally, I used {{employee.3 | date:'m-d-Y'}}, which represents a filter that formats the date display in the template.

Django Template Language offers a rapid and adaptable method for rendering backend data on the frontend webpage. It enables developers to implement basic logic without the necessity of JavaScript. For a comprehensive reference on DTL, you can consult Django's official documentation.

In Plain English 🚀

Thank you for being part of the In Plain English community! Before you leave, make sure to clap and follow the writer! ️👏️️

Follow us on: X | LinkedIn | YouTube | Discord | Newsletter

Explore our other platforms: Stackademic | CoFeed | Venture | Cubed

Find more content at PlainEnglish.io