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 involves the following steps:
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
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:
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
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:
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’.
TEMPLATES = [
{
‘DIRS’ : [os.path, join(BASE_DIR, ‘templates’)],
}
]
Then, we can add a simple headline to our home.html file:
<h1>Homepage<h1>
Our template is now complete. The next steps are to configure our URL and views file.
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:
from django.views.generic import TemplateView
class HomePageView(TemplateView):
template_name = ‘home.html’
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).
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:
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.
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:
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/.
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”.
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!
Introduction In the fast paced world of technology, learning a versatile and high-in-demand programming language…
Introduction User Authentication policy is a very crucial process for every application and organization. It…
Introduction In previous articles, we have learnt about Django, how it works and how we…
Introduction In this article, we shall learn how to build and implement a blog app.…
Introduction In this article, we shall use a database for the first time to build…
Introduction When you say you want to use Django, it means you want to build…