Chapter 3: Homepage- Django 3...2...1...Takeoff! Series

#django #python #webdev #tutorial

Let’s create a home page for our site, so that users can navigate from there to other pages and vice versa.

Open the urls.py file from your project

We need to include the URLs from the app that we created in order to be found by the main urls.py file which sits in our project folder. We do this every time that we create a new app.

from django.urls import path

This module helps Django look for the variable urlpatterns which points to different paths in the website.

from django.urls import include

Django uses this module to include URLs from different apps inside the project.

Now we need to create a urls.py file in the directory of your app (listings) that will match the path set in the urls.py of the project.

The screenshot below shows how your app’s directory should look after you create the new urls.py file.

The following steps will repeat every time we want to create a new page with a few exceptions.

Homepage URL Path

Open urls.py from your app’s folder and add the following code. This is the path for the homepage.

from .import views

This module imports the views from your app’s directory. We need this module because Django maps the URLs to the views and calls the functions in views.py.
In this particular case, the empty string (‘’) matches the base URL for the project. This is going to be our homepage. Django will call the index view. That is the reason why we have views.index to specify which view we want to call. On the other hand, name= ‘index’, is just a way to reference the URL pattern without having to write the entire URL, so instead we can just use the name ‘index’ to refer to the entire URL.

app_name

We already have multiple urls.py files; one for our project and one for our app. We will have another one for another app that we will create, so app_name helps Django identify and choose the correct urls.py file from other urls.py files in your project’s directory.

Homepage View

After you create the URL for a specific page, a view for the page also needs to be created.

Open views.py in your app’s directory. Let’s add the following code to create the view for the homepage.

from django.shortcuts import render

This module is used to call different helper functions. We used it here to call render which helps generate a response that we can render in a template.

Homepage Template

After we have rendered the request into a template, we need to create such template, so that users can see the data being displayed. In Django, these templates are HTML files which display data provided by views.

First, let’s create a folder called templates inside your app’s directory and then inside the templates folder create a folder with the name of your app (listings). This helps Django interpret and find the templates for your app without any ambiguity. Inside that last folder created, let’s create a file named index.html. Your app’s main folder should look like the image below.

Open index.html and add the following code.

It might be a good idea to get familiar with HTML in order to understand the templates as we go along. For this one, there’s not much going on; just a header and a paragraph. For now, we’ll keep the templates like this, but later on, we will start styling them using bootstrap.

Let’s try to get the functionality of our website working first, and then we can start making it look pretty. Run python manage.py runserver and go to http://127.0.0.1:8000/ to see the homepage of your site.