How to Render Plain HTML Page as an Output in Django Application

By Posted on

Introduction

Another modification from several previous articles which is the base for the content of this article. Those in the previous articles are in How to Display or Print Text as an Output in Django Application where it only print a simple text in the page. Another one is How to Display or Print HTML Text as an Output in Django Application where the main is not only printing a plain text but also modify it with the help of HTML tags. But apparently, since it is using a package with the name of HttpResponse, it will not be effective to pass an entire HTML page consisting of various HTML tags.

In that case, this article will switch the focus to use another method to display or print an output to a page. Rather than using HttpResponse package library, it will use the render package library to do that. Furthermore, it does not accept string parameter as HttpResponse package library, it is accepting a different parameter. So, this article will show a slight modification from those previous articles. The aim will be just rendering the HTML page which is actually one of the parameter of the render package library.

Since it is rendering the HTML page from a running Django application, it need the following preparations :

  1. Having a python tool or utility exist in the device.  Just see How to Install Python in Microsoft Windows and also How to Install Python in Microsoft Windows 11 for further reference.

  2. Also having a pip tool utility in the device. Also just see  How to Install pip in Microsoft Windows and  How to Install pip in Microsoft Windows 11 as a references.

  3. After successfully having python and pip in the device, use it to create a python virtual environment. It is optional and for further references, it exist 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. Just activate it once it is already exist.

  4. Moreover, using the pip tool, install the Django library. It is an important library for creating Django project and also Django application.

  5. In the end of the preparation, create the Django project and also the Django application. That step exist in How to Create Django Project in Microsoft Windows using Command Line. Another one also exist in How to Create a Django Application inside a Django Project in Microsoft Windows.

Actually, the above preparation will attempt to produce the following structure of the Django project : 

(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>

Moreover, it will also have a Django application inside of that Django project with the structure below : 

(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 Plain HTML Page as an Output in Django Application

So, using the above Django project and also Django application as a baseline, below are the steps for achieving the purpose. In other words, steps below will simulate how to render a HTML page in a Django application. Just follow those steps below  :

  1. Starting with defining the URL for processing the request to render the HTML page. Normally, just define it in the ‘urls.py’ file inside the ‘myapp’ folder. If the file does not exist, just create it. Afterwards, add the following line : 

    path('index-render-plain-html/', views.index_render_plain_html, name="index-render-plain-html"),

    Not just adding it into a random place, but insert it to the urlpatterns variable as it exist below : 

    from django.contrib import admin
from django.urls import path
from . import views
urlpatterns = [
    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"), 
]

    After adding it into the existing ‘urls.py’ file, the content will be in the following appearance : 

    from django.contrib import admin
from django.urls import path
from . import views
urlpatterns = [
    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"),
]

  2. In the next step, it will focus to define the corresponding function which is in the URL definition. In this context, it is the index_render_plain_html. In that way, just define the function with the name of ‘index_print_text_with_html_tags’ in the views. That function will act as a representation to define the process for rendering HTML page. Open  ‘views.py’ file inside the ‘myapp’ Django application folder. Fill the file with the following function  : 

    from django.http import HttpResponse
def index_render_plain_html(request):
    template_name = 'myapp/index-render-plain-html.html'
    return render(request, template_name)

    In the above function, it need a variable which has the value of the HTML template file location as one of the parameter of the render function syntax.

  3. As it exist in the above output, it need an HTML file. In order for a Django application to use a HTML file, it will need a new folder to put that HTML file. That folder will be a folder where Django application will consider it as a file specifically as HTML template file for further render process. Just place a new folder inside the ‘myapp’ folder with the name of ‘templates’. Afterwards, create another folder inside of the ‘templates’ folder with the name of the Django application which in this context it is ‘myapp’. Actually, the structure is already appear in the previous part above. So, create the file with the name of ‘index-render-html-plain.html’ with the content as follow : 

    <!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 is rendering HTML text inside HTML Template File in Django Application</h1>
</body>
</html>

  4. In order to test it, just run the internal Django server using any command line interface. It will be available normally in ‘http://localhost:8000’.  Below is the execution of the appropriate command   : 

    (env) C:\django\myproject>python manage.py runserver
Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).
December 11, 2022 - 13:37:26
Django version 4.1.2, using settings 'myproject.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK

  5. At the end, just access the URL address to show the page. For showing the page in this context, it is using  ‘localhost:8000/index-render-plain-html. So, the page will appear as follow :

    How to Render Plain HTML Page as an Output in Django Application
    How to Render Plain HTML Page as an Output in Django Application

Leave a Reply