Introduction
This is an article which is actually a continuation from the previous article. In the previous article which is ‘How to Render HTML Page with CSS and Javascript Static Tags as an Output in Django Application‘. In that article, there is already a content which is showing how to render an HTML page. Additionally, there are also using Django static tags for including CSS and Javascript files. In this article, it will show a modification from the previous one.
How about using another HTML file as a base template ?. Off course, it is very useful for creating a web application with a template. Especially in order to have the same format of having a header, sidebar, footer or any other parts of the page. For the only changing part is the content part of the page. Take for an example where the changing content exist in the center for every different page.
In order to do that, below is the preparation for every aspects to set the Django project and also the Django application :
-
Try to manage to have a running python tool in the device. As a source, check How to Install Python in Microsoft Windows. Furthermore check also How to Install Python in Microsoft Windows 11.
-
Next, try to have a running pip tool utility in the device. Also as a source, check How to Install pip in Microsoft Windows and also How to Install pip in Microsoft Windows 11.
-
Continue on to the next step, using all the installed tools in previous steps, create a python virtual environment. For source reference, check in How to Create a Python Virtual Environment with a specific version of Python in Microsoft Windows and How to Specify Specific Python Version for Creating a Virtual Python Environment in Microsoft Windows.
-
Using all of the previous preparation which is actually optional for python virtual environment, install the Django library. It is important for having Django project and also Django application.
-
Using the previous preparation steps, create the Django project. As a source reference, look in How to Create Django Project in Microsoft Windows using Command Line for creating Django project. Another source reference, look in How to Create a Django Application inside a Django Project in Microsoft Windows for creating a Django application.
As for the results of the above preparation. It is look similar with the following appearance :
(env) C:\django\myproject>tree /A Folder PATH listing for volume Windows-SSD Volume serial number is CA30-19A4 C:. +---myapp | +---migrations | | \---__pycache__ | +---templates | | \---myapp | \---__pycache__ \---myproject \---__pycache__ (env) C:\django\myproject>
(env) C:\django\myproject> cd myapp (env) C:\django\myproject\myapp>tree /F Folder PATH listing for volume Windows-SSD Volume serial number is CA30-19A4 C:. │ admin.py │ apps.py │ models.py │ urls.py │ views.py │ __init__.py │ ├───migrations │ │ __init__.py │ │ │ └───__pycache__ │ __init__.cpython-310.pyc │ ├───templates │ └───myapp │ index.html │ └───__pycache__ __init__.cpython-310.pyc (env) C:\django\myproject\myapp>
How to Render HTML with Base Template HTML in Django Application
Finishing all of the preparations in the previous part, continue the following steps. Those steps are for simulating having a base HTML template file for further usage :
-
As the usual first step, just create a new URL address definition. It is an URL for requesting to render the HTML page using the base template HTML page. Add the following line in the ‘urls.py’ exist in the ‘myapp’ folder representing Django application :
path('index-render-html-with-base-template/', views.index_render_html_with_base_template, name="index-render-html-with-base-template"),Just add into the existing ‘urls.py’ file where the original content exist as follows :
from django.contrib import admin from django.urls import path from . import views urlpatterns = [ path('', views.index, name="index"), path('index-print-text/', views.index_print_text, name="index-print-text"), path('index-print-text-with-html-tags/', views.index_print_text_with_html_tags, name="index-print-text-with-html-tags"), path('index-render-plain-html/', views.index_render_plain_html, name="index-render-plain-html"), path('index-render-html-with-static-tags/', views.index_render_html_with_static_tags, name="index-render-html-with-static-tags"),Precisely in the last line, add the new URL address definition into the following content :
from django.contrib import admin from django.urls import path from . import views urlpatterns = [ path('', views.index, name="index"), path('index-print-text/', views.index_print_text, name="index-print-text"), path('index-print-text-with-html-tags/', views.index_print_text_with_html_tags, name="index-print-text-with-html-tags"), path('index-render-plain-html/', views.index_render_plain_html, name="index-render-plain-html"), path('index-render-html-with-static-tags/', views.index_render_html_with_static_tags, name="index-render-html-with-static-tags"), path('index-render-html-with-base-template/', views.index_render_html_with_base_template, name="index-render-html-with-base-template"), -
Soon after defining the new URL address, just create a new function for processing that URL address in the ‘views.py’ file as follows :
def index_render_html_with_base_template(request): template_name = 'myapp/index-html-with-base-template.html' return render(request, template_name)
-
As it exist in the above function definition, since it need an HTML file with the name of ‘index-html-with-base-template.html’, just create it. But before that, since the plan is to use another HTML page as a base template. Place it in the Django application exist in the templates folder as follows :
C:\django\myproject>tree /A . Folder PATH listing for volume Windows-SSD Volume serial number is CA30-19A4 C:\django\myproject +---myapp | +---migrations | | \---__pycache__ | +---static | | \---myapp | | +---css | | \---js | +---templates | | \---myapp | | \--- base.html | \---__pycache__ \---myproject \---__pycache__ C:\django\myproject>Create it in that folder as the the base HTML file with the name of ‘base.html. Below is the content of the ‘base.html’ file :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>This content is from HTML Base Template File</h1> {% block content %} {% endblock %} </body> </html>C:\django\myproject>tree /A . Folder PATH listing for volume Windows-SSD Volume serial number is CA30-19A4 C:\django\myproject +---myapp | +---migrations | | \---__pycache__ | +---static | | \---myapp | | +---css | | \---js | +---templates | | \---myapp | | +--- base.html | | \--- index.html | \---__pycache__ \---myproject \---__pycache__ C:\django\myproject> -
Finally, it is the steps for creating the HTML which is using the base HTML previously created. Below is the file with the name of ‘index-html-with-base-template.html’ using the content below:
{% extends 'myapp/base.html' %} {% block content %} {% endblock %}As it exist in the above content for the ‘index-html-with-base-template.html’, it does not need to create the full HTML document structure anymore. Because that file extends it from the base HTML file with the name of ‘base.html’ available in ‘myapp’ folder.
-
Last but not least, just execute the Django internal server and access the URL ‘localhost:8000/myapp/index-html-with-base-template/’ for rendering that HTML extending from a base HTML template file template :
How to Render HTML with Base Template HTML in Django Application In the page above as output, there is a string which is not exist in the HTML file. But it is exist from the base template HTML file. Therefore, it is indicating that extending the base template HTML file in another HTML file is a successs.