Python Django Web Framework
Tags: django, python, webdev
Published: 2022-02-12 15:41:53

###**What is Django?**

[Django](https://www.djangoproject.com) 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y0b4ltatezj3ww12wvtf.png)

**Requirements for this Tutorial**

- Have Python installed: Install [Python](https://www.python.org)
- Have a code editor installed: [I use Visual Studio Code](https://code.visualstudio.com)

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 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ietxf9m6kom02dgrv19n.png)

Install Django version 3.2 in the terminal:

```
$ pip install django==3.2
```


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s095ithqeep0azk1d8oc.png)


**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zghma1xurktwtuxnkwma.png)

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
```
This outputs the following:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cx9gvr2ebivynqqrr9r4.png)

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 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ptkagceokb0f0jw7m9g4.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jhwj7692f62jpljq24xv.png)

**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/
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jbmu9aaer41kee0h6rgh.png)

- `__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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x30dmzlg3q0pqhbx0mwd.png)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qm6985vm0scal5q32r4l.png)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i722m44z8aw0d3v9j6zc.png)

Admin page:



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/54n5el0lc21hhhag1vhy.png)


**Create our first template**

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kp40hmj76hressykwjlj.png)

**Create a View**

Navigate to the `views.py` in` webapp/app/views.py` and create a view function.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/30gsgz44y1vja73q6itl.png)

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
```


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vukroa88kfdxbxra15pc.png)


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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4tozpv3yldk90s0q7atd.png)

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 



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/21qg53gn3kwfjuada4x9.png)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s5h7tfv7kwcj1z2y36vm.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tak5bhlliqrbmwc4hr33.png)

Add a link to admin page in the html page:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ryvmv434dib1rfuxd2aw.png)

Webpage visualization


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/os7i7qahte57vca5261q.png)

**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](https://getbootstrap.com/docs/4.1/getting-started/introduction/#quick-start). This is an easier way to install Bootstrap that involves just adding a few lines of to our `home.html`.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k2j09hr0qauxzm75mmge.png)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qq7eds2thn6ctb3jzmzu.png)

In this section we have created our first django App and able to see our web page. Check out the [source code 
](https://github.com/oderofrancis/lux_django)



###**Thank you**