Introduction

In this article, we will build a pages app that has a homepage and an about page. We will also learn about Django class-based views and templates which are building blocks for the more complex web applications.

Our Initial Setup

Our initial setup involves the following steps:

• creating a directory for our code.
• installing Django in the new environment using pipenv.
• creating a new Django project.
• creating a new pages app.
• and updating the settings.py file.

On the command line, make sure you are not working in an existing environment. If you are, make sure to type “exit” to leave it. Next, we create a new directory called “pages” for our project. In the command prompt, type the following:

mkdir pages && cd pages

pipenv install django==3.0.1

pipenv shell

django-admin startproject pages_project .

Then we runserver to make sure our app is running using:

python manage.py runserver

When your app is running successfully, you create your pages app by typing the following in the command prompt:

python manage.py startapp pages

Settings.py

Open your pages directory in your text editor, it could be visual studio code or any other one and navigate to the settings.py file under the pages_project folder. Add the pages app at the bottom of your project called INSTALLED_APPS. It should look like this:

pages_project/settings.py

INSTALLED_APPS = [

‘django.contrib.admin’,

‘django.contrib.auth’,

‘django/contrib.contenttypes’,

‘django.contrib.sessions’,

‘django.contrib.messages’,

‘django.contrib.staticfiles’,

‘pages.apps.PagesConfig’,

]

Then runserver in the command prompt to see if your app is running fine by typing:

python manage.py runserver

Templates

Every web framework needs a convenient way to generate HTML files and in Django, the approach is to use templates i.e individual HTML files that can be linked together and also include basic logic. The use of templates will support building websites that can support hundreds, thousands or even millions of webpages with a minimal amount of code. The first consideration is where to place templates within the structure of a Django project. First, quit running the server with the control + C command. Then create a directory called templates using the command prompt by typing:

mkdir templates

and then in your text editor, navigate to this new template directory and manually create a new html file called “home.html” inside. Next, we need to update settings.py to tell Django the location of our new templates directory. This is a one time change to the settings ‘DIRS’ under ‘TEMPLATES’.

pages_project/settings.py

TEMPLATES = [

{

‘DIRS’ : [os.path, join(BASE_DIR, ‘templates’)],

}

]

Then, we can add a simple headline to our home.html file:

templates/home.html

<h1>Homepage<h1>

Our template is now complete. The next steps are to configure our URL and views file.

Class-Based Views

Early versions of Django only worked with function-based views, but developers soon found themselves repeating the same patterns over and over again which was a major issue. Django then introduced class-based views that make views easy to use and also extend views covering some cases. In our views.py, we will use the built-in Template view to display our template. Therefore, update the pages/views.py file by including the following:

pages/views.py

from django.views.generic import TemplateView

class HomePageView(TemplateView):

template_name = ‘home.html’

URL’S

The last step is to update our url’s configurations. We need to make changes in two locations(pages_project/urls.py and pages/urls.py).

pages_project/urls.py

from django.contrib import admin

from django.urls import path, include

urlpatterns = [

path(‘admin/’, admin.site.urls),

path(‘ ‘, include (‘pages.urls’)),

]

We add the include on the second line to point the existing url to the pages app. Next, lets create an app level urls.py. Create a urls.py file in the pages folder. Then add the following code:

pages/urls.py

from django .urls import path

from .views import HomePageView

urlpatterns = [

path( ‘ ‘, HomePageView.as_view(), name = ‘home’),

]

And we are done!

Next go to the command prompt to runserver using:

python manage.py runserver

and then navigate to the ip address there, you can see our new homepage.

Add An About Page

The steps to create an about page is very similar to what we just did. We’ll create a new template file, a new views file and a new url route.

Quit the server with control C and create a new file in template called “about.html”. Then in the about.html file, input the following:

<h1>About Page</h1>

Next, create a new views file for the page:

pages/views.py

from django.views.generic import TemplateView

class HomePageView(TemplateView):

template_name = ‘home.html’

class AboutPageView(TemplateView):

template_name = ‘about.html’

And then connect it to a URL at about/.

pages/urls.py

from django .urls import path

from .views import HomePageView, AboutPageView

urlpatterns = [

path( ‘ ‘, HomePageView.as_view(), name = ‘home’),

path( ‘ about/ ‘, AboutPageView.as_view(), name = ‘about’),

]

Next, start up the webserver with the following:

python manage.py runserver

Navigate to the ip adress/about and you should now see our new “about page”.

Conclusion

Yess!! Now, we know how to build a two paged web application using Django. Remember, therefore, to practice and do more research along the way to get more familiar with the terms and pattern followed in this article. Good Luck!