Django | Part 5 | Creating A Homepage

The primary focus until now is to build a robust backend for the blog website. However, with an “Article” model now built into the database, it is time to focus on building the model into some views and templates. This article will focus on a website’s most commonly visited page, the homepage. The homepage is critical to the website’s success as it needs to illustrate to the visitor why they should be engaging with the site and serve as a map, guiding your visitor to the rest of the content. When designing the homepage, there are always three key questions that I always ask myself:

1. Why has the visitor come to the website?
2. How will the visitor know the purpose of the website?
3. What do I want them to do on the website?

As this project is centralised around a blog, the most essential thing the homepage can do is inform the visitor of the blog’s purpose and why they should continue reading. Then it needs to allow them to access the content they seek as efficiently as possible, especially if they are looking for a specific topic. Therefore, when designing the homepage for this project, the key points to include are:

• The purpose of the blog
• The types of articles it consists of
• A means for the customer to search or filter a topic
• A way for the visitor to subscribe for more content
• The latest articles that have been published
• A way to navigate to other sections of the website

The rest of this article will specifically focus on bringing in the latest articles. Styling the homepage and the remainder of the components will be covered in the coming articles as we explore more Django features.

Creating the view

The first step in creating any page or page type is to make the view for the page. This is a callable that will take a request for the page and then return a response containing all the necessary information for the page. Views are to be created in the views.py file under its corresponding app. Whilst there are a couple of different approaches to creating a view, this homepage will be made with a “class-based view”. These are often quicker to implement and more customisable than a standard “function-based view”.

To create the homepage view for this blog, open up the views.py file in the “blog” app, then input the following code.

from django.views.generic import ListView
 
# Importing my model classes
from .models import Article
# Create your views here.
class HomeView(ListView):
    model = Article
    template_name = "blog_index.html"
    def get_context_data(self, **kwargs):
        articles = Article.objects.all()
        return {"articles": articles}

This code imports the Django module called “ListView”, which allows you to list all of the model entries for the specified model. Then it imports the “Article” model created in the previous article.

Lastly, it creates a “class-based view” called “HomeView”. This is done by declaring the new class and specifying the correct view type, ListView. Inside the class, the “Article” model then needs to be declared as well as the right HTML template to use. This will be created in a later step and be called “blog_index.html”.

URL mapping

Now that the view has been created, the next step is to show the Django app which URL will be pointing to the “HomeView”. Django does this through URL patterns which connect the dots between the view created in the views.py file and the URL mapping. Each URL pattern should contain three key elements:

1. The pattern: The website URL that the view is to map to.
2. Path to the View: The path to the views.py file and corresponding view to access.
3. The Name: The friendly name of the URL pattern if there is a need to use URL reversing.

If there is not already one, create a urls.py file inside the “blog” app directory, then input the following code.

from django.urls import path
 
# Importing all required views
from .views import HomeView
 
urlpatterns = [
    path('', HomeView.as_view(), name="home"),
]

This code imports the Django “Path” module and the required views from the views.py file. Then it specifies an array called “urlpatterns”. In the array is the newly created HomeView, pointing to an empty path as the homepage does not have a path. All other pages will have a specified path when inputted over the coming articles.

As the last step, the urls.py file needs to be mapped to the main application directory. This is done by opening up the urls.py file in the main project directory (the same containing the settings.py file). Then enter the below code that imports the “include” module and adds a URL pattern for the urls.py file in the blog directory.

from django.contrib import admin
from django.urls import path, include #Add in include
 
urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('blog.urls')), # This was added as the link to the the blog app urls
]

Creating a homepage HTML template

With the URL mapping now complete, the last step is to build the template. For now, this template will list all of the entries to the “Article” model. It will not include any styling, as this will come in the following articles. It is best practice to house all templates under a “templates” folder. Create this folder under the “blog” directory, then create an HTML file called “blog_index.html”. Then input the following code.

<h1>This is the homepage</h1>
{% for article in articles %}
<p>
    {{article.title}}
</p>
{% endfor %}

This straightforward Django HTML file creates a loop for each of the different entries under the “Article” model and lists the titles.

With all of these steps now complete, you will be able to run your server locally and see all of these Django concepts come together to form the homepage for this project. The following article will focus on creating a base template that can be applied across the project. This template will include styling and a navbar, meaning that the homepage will start to look much more like the user-friendly layout expected from a homepage.