Outputting Python to html Django

In this Python Django tutorial, we will understand the implementation of outputting python to HTML Django. And we’ll also see different examples related to this. These are the following topics that we are going to discuss in this tutorial.

  • Basic Steps for ouput to HTML
  • How to include app in project
  • How to access app url
  • How to access view
  • Template in Django
  • Run Server in Django
  • Outputting python to html Django

Basic Steps for output to HTML

Since we’ve learned how to represent program output in a console or terminal, now it’s time to learn how to display it on an HTML page using Django templates. In this section, we’ll learn some basic steps from outputting Python To HTML using Django.

Step#1 Install Django

Installing Django is the first and most important step. Python pip can be used to quickly install Django. It manages Python packages as a package manager.

We can use pip to install packages that aren’t part of the Python distribution. The following command is executed at the command prompt to download and install Django.

pip install django
basic steps for output to HTML
Install Django

Step#2 Test Django Installation

After installing Django, use the command prompt to test whether the Django is installed successfully or not.

Command:

django-admin --version
steps for output to HTML using django
Django Version

Step#3 Django Project

The creation of a Django project is the next key step. So, first, navigate to the directory where you wish to save your project. In the terminal, execute the following command to create a Django project.

django-admin startproject project_name

You can call this project whatever you like, but make it brief and relevant because you’ll be building big websites.

NOTE:

No, you shouldn’t have to reinstall Django every time you start a new project. Once you’ve installed it with pip, all you have to do now is run the django project creation command.

Here, I create a Django Project with the name PythonGuides.

basic steps for output to html page
Django Project

Step#4 Django App

For every functionality, an app can be built as a completely self-contained module. To create a basic app in your Django project write the following command.

python manage.py startapp app_name
                 #OR
django-admin startapp app_name

Here, I create a Django App with the name home.

django basic steps for output to html
Django App

Step#5 Install App

To include the app in your project, add your app name to the INSTALLED APPS list in settings.py of the project.

basic steps for output to html page using django
Installed App

Read: If statement in Django template

How to include app in project

In the previous section, we learned how to create a project and an app, as well as how to install an app. Now we’ll learn how to include an app into our project in this section.

To use URLs to render the app, we must include them in our main project so that URLs routed to it may be rendered. The following are the steps to use URLs.

  • Open Project Directory.
  • Open the urls.py file under your project directory.
  • Add the headers.
  • You must now specify the app name in the list of URL patterns in order to include your app URLs.
how to include app in project
Project Directory
how to include app in project using django
Project’s urls.py file

Source Code of PythonGuides urls.py file:

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('home.urls'))
]

Read: Get URL parameters in Django

How to access app url

In this section, we’ll learn how to access the app’s URL. The project’s urls.py file will not be able to access the app’s URL file because it is not included in the app directory. The following steps must be completed for your Django Web application to execute properly.

  • Create a urls.py file in the apps directory.
  • Add the code.
how to access app url
App Directory
how to access app url using django
App’s urls.py File

Source Code of home urls.py file:

from django.urls import path, include
from home import views

urlpatterns = [
    path('', views.home, name='home'),
]

Read: Python Django length filter

How to access view

In this section, we’ll learn how to access views in Django. A view function, also known as a “view,” is a Python function that receives a web request and provides a web response. This response could be the HTML content of a Web page, a redirect, a 404 error, an XML document, an image, or something else entirely.

In Django, views must be defined in the app views.py file. We may create views in Django in two ways: Basic views and MVT pattern views.

  • Basic view: To render the HTML page in basic view, we utilize HttpResponse. However, this is not the most efficient means of rendering pages.
  • MVT pattern view: To create the precedent view, Django supports the MVT pattern. As a result, we render a template in this view.
how to access view
App’s view.py File

Source Code of views.py file:

from django.shortcuts import render, HttpResponse

# Create your views here.

def home(request):
    return render(request, 'home.html')

Read: How to get data from get request in Django

Template in Django

In this section, we’ll learn to generate HTML pages using a template system. So firstly, we’ll understand Django Templates.

Django’s template system makes it simple to create dynamic HTML pages. A template is made up of static sections of the HTML output that you want to create. The Django template engine allows us to develop dynamic web pages by separating the design from the python code.

The following are the steps to generate HTML pages using the template.

  • Create Template Directory
  • Template Configuration
  • Create HTML page.

Step#1 Create Template Directory

To begin, open the project app and create a directory template.

template in django
Template Directory

Step#2 Template Configuration

We must provide some items in the settings.py file to configure the template system. The name of our template directory is templates, as we indicated earlier. DjangoTemplates searches each of the INSTALLED APPS subdirectories by default for a templates subdirectory.

django templates
Templates

Step#3

Then, inside the newly formed template folder, create a template HTML page.

template using django
HTML File

Source Code of home.html file:

<!doctype html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">

    <title>PythonGuides!</title>
</head>

<body>

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">PythonGuides</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                </ul>
                <form class="d-flex">
                    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success" type="submit">Search</button>
                </form>
            </div>
        </div>
    </nav>
    <div class="container my-3">
        <h1 style="text-align:center;">Welcome to Python Guides</h1>
    </div>

    <div class="card">
        <div class="card-body">
            <h3 style="text-align:center;">Thanks for landing on this page to know more about PythonGuides.com.</h3>
            <br>
            <h6>I welcome you to the website and hopefully, you got to learn something in Python. I started this website
                to share my finding and learnings in Python with you.</h6>
            <h6>To keep things simple, I am trying to write a lot of articles on Python. Feel free to give your valuable
                comments and also share the articles if you are liking and hoping it will be helpful to someone.</h6>
            <br>
            <h2 style="text-align:center;">Also, Subscribe to Our YouTube Channel for FREE Python Video Tutorials.</h2>
        </div>



        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>


</body>

</html>

Run Server in Django

In this section, we’ll learn to run the server in Django. The Django development server provides a great local development server that developers can use to preview code updates and test Django-powered website features.

Run the following command in the terminal to start the server.

python manage.py runserver
runserver in django
Run Server In Django

Read: Python Django group by

Outputting python to HTML Django

In this section, we’ll see the HTML Django output on the browser.

So, after running the development server, we need to open a browser and open the following URL http://127.0.0.1:8000/.

outputting python to html django
Django Output

Also, take a look at some more Django tutorials.

In this Django tutorial, we have understood the implementation of outputting python to HTML Django. Here is the complete list of topics that we have covered in this tutorial.

  • Basic Steps for ouput to HTML
  • How to include app in project
  • How to access app url
  • How to access view
  • Template in Django
  • Run Server in Django
  • Outputting python to html django