Create a Web Application Using Django
By: Souvik Paul
Tags: Python3, Jinja, Calculator, Django Template, Django

Photo by Ashraf Ali on Unsplash

In this article we’ll create a calculator web application on Django web framework that will perform addition, subtraction, multiplication and division. The front-end of this application will allow the users to enter two operands and the backend will calculate the result based on the chosen operation and send that to the front-end.

At the end, when our application will become fully operational, it will look like the following.

Let’s understand the meaning of web framework.

Web Framework

A web framework is a software tool that provides a way to build and run dynamic websites and web application.

Web Framework Vs. Library

A web framework does the majority of the work and utilizes our code in it to customize itself according to our needs.

But a library has some pre-written codes that we can utilize to develop our own application from scratch.

For example — Web framework is just like a ready made house in which we have to add some extra furnitures as per our needs. And library is like doors and windows which we will use to fix in a house that we are building from scratch.

Django

Django is free and open-source web framework that can be used to build a web application in python.

Features of Django

Fast — Django is very fast and we don’t need to spend much time in configuring it. It helps developers to build application faster.

— Django is very fast and we don’t need to spend much time in configuring it. It helps developers to build application faster. Scalabile — A web application might need to add some extra features in future. So, Django provides that facility too.

— A web application might need to add some extra features in future. So, Django provides that facility too. Components — For developing a web application, we need a lot of things like login, database connectivity etc. and all these things comes bundled in Django.

— For developing a web application, we need a lot of things like login, database connectivity etc. and all these things comes bundled in Django. Security — Django provides security in sending and receiving the data.

Model View Template (MVT)

Django follows MVT architectural pattern. It is similar to the MVC pattern (Model View Controller). Both of them have the same purpose — “Separation of Concerns”.

In Django applications, the Model deals with the data that is coming from the database. Django creates a models.py file automatically in every application created by the user. The Template deals with the front-end. It has files which is developed using HTML, CSS and JavaScript. Here, the DTL (Django Template Language) is also used to introduce data dynamically into the page. And that data will be coming from the database through models object. To connect the Model and Template, Django uses View. Django also creates views.py file automatically where the main business logic is written.

So, when a user sends a request to Django server, it searches for the URL mappings in the urls.py file. From there, it goes to View section in views.py file, where all the business logic is written. According to the business logic it fetches data from the Model section and send that to the Template section.

Initial Setup

Before starting our project, we need to make sure that we have the latest version of python installed in our system. Now, we’ll install Django.

We’ll install Django in a virtual environment in our system because different Django projects might need different configurations and due to this, an application might not work properly due to the interference of the other application.

So, to create a virtual environment, we will install a virtual environment wrapper using the following command in command prompt.

C:\users\souvik> pip install virtualenvwrapper-win

Now, we have to create the virtual environment. To create it, we’ll make use of the following command —

C:\users\souvik> mkvirtualenv dev

So, the above command will create a virtual environment with the name dev.

Once the environment is created, this can be accessed only using the command prompt window in which we are present currently. If we open another command prompt window, we’ll not be in the virtual environment.

If we want to access the virtual environment from a new command prompt window, then we need to enter the following command -

C:\users\souvik> workon dev

After the above command is executed, the command input section will become like this -

(dev) C:\users\souvik>

The dev in parentheses shows that we are currently in our virtual environment whose name is dev.

So, once we are in our virtual environment, we’ll install Django there. Please note that the Django that we are going to install here will not be available from other virtual environments or from our local system. It can be only used in this virtual environment.

To install it, we’ll use the following command —

(dev) C:\users\souvik> pip install django

To check the version of Django that got installed, we’ll use the following command —

(dev) C:\users\souvik> django-admin --version

Now, we’ll create a directory with name django_Projects where we’ll keep all our Django based projects and then we’ll navigate to that directory.

(dev) C:\users\souvik> mkdir django_Projects (dev) C:\users\souvik> cd django_Projects (dev) C:\users\souvik\django_Projects>

Now in this directory, we’ll create our project with the name FirstProject, using the following command.

(dev) C:\users\souvik\django_Projects> django-admin startproject FirstProject

The above command will create some files and folders in this directory which we’ll use in our project and the directory structure will look like the following.

The outer FirstProject/ root directory is a container for our project. Its name doesn’t matter to Django; we can rename it to anything we like.

root directory is a container for our project. Its name doesn’t matter to Django; we can rename it to anything we like. manage.py : A command-line utility that lets us interact with this Django project in various ways. We can read all the details about manage.py in django-admin and manage.py.

: A command-line utility that lets us interact with this Django project in various ways. We can read all the details about in django-admin and manage.py. The inner FirstProject/ directory is the actual Python package for our project. Its name is the Python package name we’ll need to use to import anything inside it (e.g. FirstProject.urls ).

directory is the actual Python package for our project. Its name is the Python package name we’ll need to use to import anything inside it (e.g. ). FirstProject/__init__.py : An empty file that tells Python that this directory should be considered a Python package.

: An empty file that tells Python that this directory should be considered a Python package. FirstProject/settings.py : Settings/configuration for this Django project. Django settings will tell us all about how settings work.

: Settings/configuration for this Django project. Django settings will tell us all about how settings work. FirstProject/urls.py : The URL declarations for this Django project; a “table of contents” of our Django-powered site. We can read more about URLs in URL dispatcher.

: The URL declarations for this Django project; a “table of contents” of our Django-powered site. We can read more about URLs in URL dispatcher. FirstProject/asgi.py : An entry-point for ASGI-compatible web servers to serve our project. See How to deploy with ASGI for more details.

: An entry-point for ASGI-compatible web servers to serve our project. See How to deploy with ASGI for more details. FirstProject/wsgi.py : An entry-point for WSGI-compatible web servers to serve our project. See How to deploy with WSGI for more details.

Now, let’s verify if the created projected is working or not.

For that, we’ll first navigate to outer FirstProject directory and then, we’ll use the following command.

(dev) C:\users\souvik\django_Projects> cd FirstProject

(dev) C:\users\souvik\django_Projects\FirstProject> python manage.py runserver



System check identified no issues (0 silenced).



You have unapplied migrations; your app may not work properly until they are applied.

Run 'python manage.py migrate' to apply them.



November 25, 2020 - 15:50:53

Django version 3.1, using settings 'FirstProject.settings'

Starting development server at

Quit the server with CONTROL-C. Performing system checks...System check identified no issues (0 silenced).You have unapplied migrations; your app may not work properly until they are applied.Run 'python manage.py migrate' to apply them.November 25, 2020 - 15:50:53Django version 3.1, using settings 'FirstProject.settings'Starting development server at http://127.0.0.1:8000/ Quit the server with CONTROL-C.

The above command has started the server on port 8000. We’ll open the browser and enter the following in the address bar.

http://127.0.0.1:8000/

We’ll see the following page in the browser.

Developing the application

Now, we’ll start developing our calculator application. The project directory, i.e. FirstProject (outer directory) represents the complete application and a complete application has a lot of features which are also applications having a dedicated functionality and these can be kept in separate modules or packages. Similarly we will create our calculator application in the root directory by the name calculator using the following command.

(dev) C:\users\souvik\django_Projects\FirstProject> python manage.py startapp calculator

Now our directory structure will become like the following.

Since, our calculator application doesn’t have it’s own URL mapping, so we’ll create a urls.py file in the calculator directory and we’ll write the following code.

Then in the views.py file under calculator directory, we’ll write the following code.

So, now when a request to http://localhost:8000 will enter the server, it will go to urls.py present in the FirstProject directory (inner one) and from there, it will go to other urls.py files present in adjoining applications folders depending on the URL requested. So, we need to modify the urls.py file present in the FirstProject directory (inner one) so that it can internally redirect the request to urls.py file of the calculator directory. And from there, the function index will be called which is present in the views.py file of the calculator directory.

So, the urls.py of FirstProject directory (inner one) will be modified as below.

Now, for our front-end, we’ll create a public folder in the root directory where we’ll keep our Django templates.

When we start our application, it should know where we have kept the templates. So, for that we have to do the following modifications in the settings.py file in FirstProject directory (inner one).

Now, in the public folder, we will create three files with name basic.html, input.html and result.html.

The basic.html will have the following code -

The input.html file will have the following code.

The result.html file will contain the following code.

As we are using Django Template Language and Jinja, the HTML code looks little bit different than what we are used to.

The basic.html file is the basic layout for the other two html files. The files — input.html and result.html are importing the basic layout from the basic.html file.

The statement {% csrf_token %} mitigates the Cross-Site Request Forgery attacks.

In result.html file, the statement <h1> Result = {{result}}</h1> will receive the calculated result from the views.py file in result variable and will display it on the webpage.

Testing the application

So, it’s the time to test our application and check whether it is working or not.

In the command prompt, we’ll navigate to the FirstProject directory (outer one) and will type the following command.

(dev) C:\users\souvik\django_Projects\FirstProject> python manage.py runserver

This will start the server and now we’ll open the browser and type http://localhost:8000 .

We’ll be able to see the input.html page that we’ve created earlier. And now, we can enter values in the input fields and get the results.

The entire code for this project is also available in my GitHub repository.

References