Introduction
Another article which is the continuation from the previous article ‘How to Render HTML with Base Template HTML in Django Application‘. After successfully using a base template HTML file in a HTML file, this article will show another feature of the Django framework. It is printing specific content from the HTML file. It is a totally different part and it does not exist in the base template HTML file. But before that, just make sure to prepare the following :
-
Always start with the very basic preparation which is python tool. Start by installing python tool. For further reference, just look ‘How to Install Python in Microsoft Windows‘ or How to Install Python in Microsoft Windows 11‘.
-
After that, check for ‘pip’ tool availability. Make sure it exist. If not, just install it and try to check ‘How to Install pip in Microsoft Windows or How to Install pip in Microsoft Windows 11‘ for reference.
-
Next, it is possible to continue without having a python virtual environment. Just use pip tool with the installed python version to install Django library.
-
Either way, perform a step just as an anticipation to have a clean isolated python environment virtually. Just create it first before installing Django library. Read ‘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‘.
-
After activating python virtual environment or without having it, just continue the next preparation. That is to create a Django project which exist as a an article reference in ‘How to Create Django Project in Microsoft Windows using Command Line‘. Right after that, just use the following article reference ‘How to Create a Django Application inside a Django Project in Microsoft Windows‘ to create a Django application.
After executing the above sequences of actions, the result for running the sequences of action above will produce a Django project and also Django application. Those are exist with the following structures :
(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> 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 and Printing the Content of the HTML file in Django Application
In the previous article, ‘How to Render HTML with Base Template HTML in Django Application‘, it is just render a HTML page using a base template HTML. But in this article, it does not stop right there. It even continue on by printing the content from the HTML file. In this part, just follow the sequences below in order to show how to render HTML file while using an HTML base template. Moreover, it will also print the content which only exist in the HTML file :
-
Just prepare as a first step an URL address definition for displaying the page. An URL for requesting to render the HTML page along with the content of the HTML file inside a block content. Furthermore, this HTML page will use the base template HTML page. In order to add URL address definition, Just add the following line in the ‘urls.py’ exist in the ‘myapp’ folder representing Django application :
path('index-render-html-with-block-content-from-base-template/', views.index_render_html_with_block_content_of_base_template, name="index-render-html-block-content-from-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"), path('index-render-html-with-base-template/', views.index_render_html_with_base_template, name="index-render-html-with-base-template"),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"), path('index-render-html-with-block-content-from-base-template/', views.index_render_html_with_block_content_of_base_template, name="index-render-html-block-content-from-base-template"), -
Next step, just create a new function. Using the one exist in the URL address definition above after defining the new URL address. Place it in the ‘views.py’ file as follows :
def index_render_html_with_block_content_of_base_template(request): template_name = 'myapp/index-html-with-block-content-from-base-template.html' return render(request, template_name)
-
In the above function definition, there is a need to have an HTML file with the name of ‘index-html-with-block-content-from-base-template.html’. In that case, just create it. Do not forget to have a base template since the HTML file is using it. Organize it so that it will exist in the Django application 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>So, before going on further with the HTML file, just make sure that there is a base HTML file with the name of ‘base.html’. As for the content of the ‘base.html’ is exist as follows :
<!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> -
So for the next step is for creating the HTML which is going to use the base HTML. That file is the one with the name of ‘index-html-with-block-content-from-base-template.html’. Just fill it with the content below:
{% extends 'myapp/base.html' %} {% block content %} <h1>This content is from HTML File under Block Content</h1> {% endblock %}The above content is 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. Try to access the URL ‘localhost:8000/myapp/index-html-with-base-template/’. It is for rendering that HTML extending from a base HTML template file template :
How to Render HTML with Base Template HTML and Printing the Content of the HTML file in Django Application In the page above as output, there is a another string which is not exist in the base template HTML file. It is a string which is available in the block content of the HTML file. In that case, the usage of a content block which is only specific for that HTML file is a success.