Creating your first Template in Django

Creating your first Template in Django

Now that we have our app (news) created with our project (ablog) configured, we want to create our first template to confirm the Django app we just created is running perfectly before we dive into building our own blog app.

Django is a web framework, being a web framework, it needs an easy way to generate HTML dynamically. The most common method depends on templates. A template contains the static parts of the desired HTML output as well as some special syntax describing how dynamic content will be inserted. All the pages a user will be able to access is also known as the template.

Basically, the template works hand in hand with the urls.py and views.py. In this article, I'll be walking you through how to create your first template in Django.

Shall we begin?

Before we dive into creating our first template, in my last article I mentioned creating our urls.py in the news app, so we will quickly run through that.

To create urls.py in our news app:

  • Go to the app you created. If you haven't created yours, you can check how to do that here

  • Right-click on the app created(news)

  • Click on create new file

  • Name the file urls.py. Note: It's urls.py because by convention all Django files are in the plural, which means they come with an 's'

You can now save that. Yeah, urls.py file is created.

image.png

Now let's talk about creating our first template.

Step one: create the url path

In the urls.py file we just created in our news folder, type the code in the snippet below

from django.urls import path
from . import views

app name = news

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

Step two: create your views

Let's go to our views.py to create a view.

from django.shortcuts import render

# Create your views here.
def home(request):
    return render(request, news:home.html, {})

Step three: create your template folder

To create a template folder we can follow the same steps we used to create our urls.py file. Just that in this case we'll be creating a folder instead.

Now right click on the templates folder and create another folder and name it what you named your app(news). You have to include the extra folder if you are using the latest django version but if you are using older version that wouldn't be necessary. Then create a new file inside the news folder you just created and name it home.html.

Note: In the urls.py I name the path 'home', in the views.py I also created a function 'home' and ask to return home.html, so now in my templates, I also name the file home.html. This obviously shows that I'm creating home page. Which you can name anything but for convenience name it something simple like 'home', 'HomePage' just something simple.

Step four: create your home template

We want to check if our app is running fine let's just do something simple. In home.html file create you can have this:

<h1>Hello World!<h1>

Step four: Run server

Now our code is looking good, let's run our server again and head to the browser. Reload and boom!

image.png

When you have this, yippie! You just created your first template.

Yippie! we have created our first template successfully. I hope your template is successfully created too and we can enjoy the ride together. Thanks for reading till the end. Please feel free to drop your questions or comments in the comment box below.

Reference

Django blog

Docs.djangoproject

How to create a Blog app using Django