How to Display or Print HTML Text as an Output in Django Application

Introduction

Basically, this article has a similar content with the previous article. In the previous article in How to Display or Print Text as an Output in Django Application, the main focus is just to display or to print a simple text. On the other hand, this article will show a slight modification from that article. It will give an additional aspect for the display or the text print. Actually, rather than displaying or printing a plain text, it also print it using an HTML tag.

In other words, in order to manipulate the display or the text’s characteristic when it appear in the HTML page, it will add an additional HTML tag. So, it will modify the display of the text. So, this article will show how to display or to print text along with the HTML tag as its modifier. As in the previous article, the target for displaying or printing the modified text using HTML tag is a Django application. In that case, it need a running Django application. Below are the steps for preparing that suitable environment :

1. As always, just have the python tool or utility in the device by installing it. Look at How to Install Python in Microsoft Windows and also How to Install Python in Microsoft Windows 11 to do that.

2. Another similar step is installing pip tool utility in the device. Check in How to Install pip in Microsoft Windows and also How to Install pip in Microsoft Windows 11 to know how to do it.

3. Next, using python and pip tool altogether, create a python virtual environment. Although it is actually an optional step. As a reference, just look in How to Create a Python Virtual Environment with a specific version of Python in Microsoft Windows and also How to Specify Specific Python Version for Creating a Virtual Python Environment in Microsoft Windows. Do not forget to activate the python virtual environment afterwards.

4. In that active python virtual environment, install the Django library. It is necessary for setting up the Django project and also the Django application.

5. Last step, create a Django project and also 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.

In order to describe the Django application condition, below is the 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>

Furthermore, below is the structure of the Django application :

(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 Display or Print HTML Text as an Output in Django Application

Finally, it is the time to modify the Django application. After preparing the environment in the previous part, just perform the following steps. Those steps are similar with the one exist in the previous article. It exist in the article How to Display or Print Text as an Output in Django Application. Those steps are in the following sequences :

1. As the first step, create a URL for defining on how to access the page. Normally, define it in a file with the name of ‘urls.py’. It is available inside the ‘myapp’ folder. As for the ‘myapp’ folder, it represent the Django application folder. Just create the file if it is not exist. After that fill it by adding the following line :

   path('index-print-text/', views.index_print_text, name="index-print-text-with-html-tags"),

   Into the existing script exist in the ‘urls.py’ as follow :

   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"),
   ]

   So, the change of the content after adding the above line to the existing ‘urls.py’ file’s content will be as follow :

   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"),
   ]

2. Following after, create the necessary function. That function exist with the name as in the above URL definition. It is the index_print_text_with_html_tags. Actually, it represent the process for displaying or to printing text with the HTML tags. In that case, define the function with the name of ‘index_print_text_with_html_tags’ in the views. Precisely, define the function in the file with the name of ‘views.py’. In order to do that, open ‘views.py’ file inside the ‘myapp’ Django applicaton folder with the function as follows :

   from django.http import HttpResponse
   def index_print_text_with_html_tags(request):
       return HttpResponse('<h1>This is printing a text with HTML tags from Django Application using a HTTP Reponse</h1>')

   Basically, the different is only in the additional <h1></h1> HTML tags enclosing the string in the HttpResponse function.

3. After that, run the internal Django server. As usual, it will normally be available in ‘http://localhost:8000’. Use any command line interface to execute it as follows :

   (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
   

4. Finally, access the URL address for processing the page. In case of this article, it is the ‘localhost:8000/index_print_text_with_html_tags. So, the page will appear as follow :