FRANCIS ODERO

Posted on Feb 12, 2022 • Edited on Oct 11, 2022

Python Django Web Framework

#django #python #webdev

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.

Requirements for this Tutorial

Have Python installed: Install Python
Have a code editor installed: I use Visual Studio Code

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

$ mkdir webapp

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

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

$ virtualenv env

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

Install Django version 3.2 in the terminal:

$ pip install django==3.2

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 .

Django gives us files that makes our work easily.

The __init__.py file - makes Python treat directories containing it as modules.
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
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.
The urls.py - this file returns an element for inclusion in urlpatterns.
The wsgi.py- this file is Django's primary deployment platform platform.
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

This outputs the following:

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

This shows

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.

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

This will create another directory called app with files.

http://127.0.0.1:8000/

__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:

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

Fill the username, email, and password

Admin page:

Create our first template

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

Create a View

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

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

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')),

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

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

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

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.

Add a link to admin page in the html page:

Webpage visualization

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.