Creating HTML Template And Views | Django CMS Building By shriekdj
Tags: python, django, shriekdj, programming
Published: 2022-08-25 14:30:12

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

```python
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

```html
<!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.

```python
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.

```python
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

```python
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6vohhjpjowpq8p24x5gn.png)

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.

```python
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.

```python
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

```python
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.

```python
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.

{% github shriekdj/shriekdj_cms %}