DEV Community

Cover image for Python Django Web Framework
FRANCIS ODERO
FRANCIS ODERO

Posted on • Updated on

Python Django Web Framework

What is Django?

Django is a high-level Python web framework that encourages rapid development and clean, pragmatic design.Django was designed to help developers take applications from concept to completion as quickly as possible, takes security seriously and helps developers avoid many common security mistakes and exceedingly scalable.
Some well known sites that use Django include PBS, Instagram, Disqus, Washington Times, Bitbucket, YouTube, Gmail and Mozilla.

Getting Started with Django

Django use Model View Template which follows the Model View Controller pattern. The Model helps to handle database.The Template is a presentation layer which handles User Interface part completely. The View is used to execute the business logic and interact with a model to carry data and renders a template.

Image description

Requirements for this Tutorial

Let's create a directory for a clean and well structured arrangement.

$ mkdir webapp
Enter fullscreen mode Exit fullscreen mode

Then cd into the project with: cd webapp

Set Up Your Virtual Environment

Next thing we need to do, is set up our virtual environment, a virtual environment helps you run several versions of python/django right on your machine.AS you could have two different python/django projects running on different django versions without clashing.

To set up our virtual environment, we’ll be using python’s package manager pip to do the installation.

$ pip install virtualenv
Enter fullscreen mode Exit fullscreen mode

After installation,it’s time to create a virtual environment that would enable us use a preferred django version of our choice.

$ virtualenv env
Enter fullscreen mode Exit fullscreen mode

Let's now open our VS code by:

code .

Activating Virtual Environment in VS code click on terminal at the top navigation section then select new terminal

Image description

Install Django version 3.2 in the terminal:

$ pip install django==3.2
Enter fullscreen mode Exit fullscreen mode

Image description

Starting a project

At the moment we have django in our virtual environment, it's time to start up our first project.In our terminal type in:

django-admin.py startproject web .

this creates a folder web and manage.py in our webapp directory .

Image description

Django gives us files that makes our work easily.

  1. The __init__.py file - makes Python treat directories containing it as modules.
  2. The asgi.py file - ASGI (Asynchronous Server Gateway Interface) provides an interface between async Python web servers and applications while it supports all the features provided by WSGI
  3. The settings.py file - is a core file in Django projects. It holds all the configuration values that your web app needs to work; database settings and a bunch other stuff.
  4. The urls.py - this file returns an element for inclusion in urlpatterns.
  5. The wsgi.py- this file is Django's primary deployment platform platform.
  6. The manage.py - thii file is a command-line utility that works similar to the django-admin command.

Make migrations to our database

Migrations helps us make changes to our database schema without losing any data, each time we create a new model or make changes to a current one and run migrations, it helps update our database tables with the schemas without having to go through all the stress of dragging and recreating the database ourselves.

To make migrations to database type in:

python manage.py migrate
Enter fullscreen mode Exit fullscreen mode

This outputs the following:

Image description

This is a proof that our migrations have been made to our database.

Running our server

Fire up our server using the manage.py file in our project.

python manage.py runserver
Enter fullscreen mode Exit fullscreen mode

This shows

Image description

Now we have our server running on http://127.0.0.1:8000/, on webpage this is what we get to show our first project is running.

Image description

Create our first App in our project.

We will now create a app named app .To create the app, run the following command:

$ python manage.py startapp app
Enter fullscreen mode Exit fullscreen mode

This will create another directory called app with files.

http://127.0.0.1:8000/
Image description

  • __init__.py tells Python to treat the directory as a Python package.
  • admin.py contains settings for the Django admin pages.
  • apps.py contains settings for the application configuration.
  • models.py contains a series of classes that Django’s ORM converts to database tables.
  • tests.py contains test classes.
  • views.py contains functions and classes that handle what data is displayed in the HTML templates.

Once the app is created, install it in our project in webapp/web/settings.py add this line in 'app', INSTALLED_APPS:

Image description

This identifies the project that the app created exist.

*Add super user *

To add superuser in our django project run the following code in the terminal.

python manage.py createsuperuser
Enter fullscreen mode Exit fullscreen mode

Fill the username, email, and password

Image description

Login to the our django admin with http://127.0.0.1:8000/admin and make sure your server is running.

Image description

Admin page:

Image description

Create our first template

Create a directory named templates in the app directory.
webapp/app/templates

Image description

Create a View

Navigate to the views.py inwebapp/app/views.py and create a view function.

Image description

We have added a file home.html which we haven't created. To do so add a create a home.html file named in our template directory.

touch app/home.html
Enter fullscreen mode Exit fullscreen mode

Image description

You’ve now created a function to handle your views and templates html file to display to the user.

Create Urls.py file in app directory to hook up our URLs to be able to navigate to the web page we just created.In web/urls.py include a URL configuration for the app. Inside the web/urls.py include the following lines:

from django.urls import path, **include**

path('', include('app.urls')),

Image description

This checks for the module urls.py in app. The module doesn't exist yet, so we need to create if :

touch app/urls.py
Enter fullscreen mode Exit fullscreen mode

In this module created we need to import the path object and our app/views.py module

Image description

Let's add some lines of code in our app/templates/home.html file.

Image description

Now, when you restart the server and visit http://127.0.0.1:8000, you should be able to see the HTML template you created.

Image description

Add a link to admin page in the html page:

Image description

Webpage visualization

Image description

Add Bootstrap to our App

We will use bootstrap for styling to our project rather than going the CSS styling .To install bootstrap in your app , use the Bootstrap CDN. This is an easier way to install Bootstrap that involves just adding a few lines of to our home.html.

Image description

Now, when you visithttp://127.0.0.1:8000, you should see that the page has been formatted with slightly different styling.

Image description

In this section we have created our first django App and able to see our web page. Check out the source code

Thank you

Top comments (4)

Collapse
 
franciskinyuru profile image
Francis kinyuru

Good one for a start. thanks for sharing this.

Collapse
 
oderofrancis profile image
FRANCIS ODERO

Thanks for your feedback

Collapse
 
nixoncode profile image
Nixon Kosgei

Are you going to finish writing this?

Collapse
 
oderofrancis profile image
FRANCIS ODERO

yes
Infact today