Creating HTML Template And Views | Django CMS Building By shriekdj

Shrikant DhayjeShrikant Dhayje
3 min read

Table of contents

In This Post I Will Create Html Pages for the site and as well as show how to use urls.py and views.py.

First Create a folder named templates in blog app in django app and add update the variable in django_project_name/setting.py like given below

import os # add it at the top of settings.py

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')], # at here add templates folder
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

Create an index.html in it like given below

<!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>Hello World</title>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

Now goto file blog/views.py and create a new function like below to load our index.html you can give whatever name you wanted.

from django.shortcuts import render

# Create your views here.
def index(request):
    return render(request, 'index.html')

Here we are rendering our index page with function named index. it's not mandatory to give the same name as file name but it's just helps you remember the locations. at above function we are giving parameter request it is for getting the data from our client browser and we as Server write logic at in this function.

We Also Need 2 More Steps to view this page.

First Create urls.py in blog folder and write below code.

from django.urls import path
from blog import views

urlpatterns = [
    path('', views.index)
]

at here we are loading all the urls in urlpatterns variable and blank path means that it's at homepage of blog app.

And At Last At the django_project/urls.py we need to make some modifications. Watch Clearly Both Are same file name but different Folder. This urls.py is Main url routing file of whole site. change it like given below

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

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

At here we have to Add Global Paths of Site with Special include function. directly adding similar to admin will not work. now load the site with python ./src/manage.py runserver screenshot given below.

Django's Index Page Loading Image

if you see this clearly i did not use relative import it may raises some error in production mode in future and i have to manually update all relative import to absolute import.

But I Will Mostly Use Class Based Views Instead of Function Based so I will Change My index function in `views.py as follows.

from django.shortcuts import render
from django.views import View

# Create your views here.

class IndexView(View):

    def get(self, request, *args, **kwargs):
        return render(request, 'index.html')

Here all the logic of the code get into get method the views class and also change urlpatterns under blog/urls.py as follows below.

from django.urls import path
from blog import views

urlpatterns = [
    path('', views.IndexView.as_view(), name='index_view'),
]

It will not change look of the page at all as of now but in future we can use inheritance like features with it.

In Class View The get method means GET Request and obviously it have other request methods like ['get', 'post', 'put', 'patch', 'delete', 'head', 'options', 'trace']

and as_view() method will return the response as per request method in one class.

Chaging View Again

from django.views.generic.base import TemplateView

# Create your views here.

class IndexView(TemplateView):

    template_name: str = 'index.html'

    # def get(self, request, *args, **kwargs):
    #     return render(request, 'index.html')

you can seet the code it reduced if we are returning the render function.

Actually views function have the specific way of returning pages like given below.

def my_view_function(request):
  context_to_send_html= {"data sent to our template": "some-data" }
  return render(request, 'template_file_name.html', context_to_send_html)

To Make It Easily Writable We Write Class Based View. as of now it look to difficult but it will save too much of our time in future.

As always the given below is GitHub Repository URL.

2
Subscribe to my newsletter

Read articles from Shrikant Dhayje directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Shrikant Dhayje
Shrikant Dhayje

I'm a software developer from India. :india: I live in Shrirampur City, Maharastra :india: I'm currently learning Back-end Web Developing via Python Programming Language.