A Non-Scary Introduction to Django
Tags: django, python, tutorial, beginners
Published: 2021-10-03 00:00:00

---
title: "A Non-Scary Introduction to Django"
date: "2021-10-03"
tags:
  - "django"
  - "python"
  - "tutorial"
  - "beginners"
---

### The tutorial that would’ve saved me a month of procrastination

![main picture](https://cdn-images-1.medium.com/max/3200/1*qsiFyKkcZhrzN6ZHHh6z8Q.png)

Let me explain: I had never heard of Django before, and it sounded like something big and complicated. Also, I’m busy, so I don’t have time to dive into something huge that isn’t related to my job. I still have scary *related-to-my-job* subjects that I need to catch up on! So I procrastinated. Pressed the snooze button. Is it already the end of April?!
(Well, I wrote this in April, but now it’s October. I told you I have a procrastination problem!)

If you’ve been following me for a while, you probably know that [I volunteer at AliceCode](https://cupofcode.blog/alicecode/) and teach girls programming. This year, my group is doing Harvard’s [CS50’s Web Programming with Python and JavaScript](https://cs50.harvard.edu/web/2020/) and their next project includes working with Django. That means I need to learn about Django, and that means that now you can learn it too!

Today we will learn what Django is, what its [shtick](https://www.google.com/search?q=shtick&rlz=1C1GCEA_enIE926IE926&sxsrf=ALeKk01dGaZkoCmg6QqeN3GLDuu8wvG8cg%3A1619280728027&ei=WEOEYOWVAaGp1fAP4aqm4Ak&oq=shtick&gs_lcp=Cgdnd3Mtd2l6EAMyCQgAEEMQRhD5ATICCAAyAggAMgIIADICCAAyAggAMgQIABAKMgIIADICCAAyAggAOgcIABBHELADOgQIIxAnOgQIABBDOgQILhBDOg4ILhCxAxCDARDHARCjAjoICAAQsQMQgwE6CAguELEDEIMBOg0ILhCxAxCDARBDEJMCUODYG1iG4htgxO4baANwAngAgAGAAYgB7wWSAQMzLjSYAQCgAQGqAQdnd3Mtd2l6yAEIwAEB&sclient=gws-wiz&ved=0ahUKEwjlodfkopfwAhWhVBUIHWGVCZwQ4dUDCBE&uact=5) is, and how to install it. No more time to waste — let’s get started!  
  
## What is Django?
>  Django is a Python-based free and open-source web framework that follows the model-template-views architectural pattern. — [Wikipedia](https://en.wikipedia.org/wiki/Django_(web_framework))

Ok, too many fancy words, so let’s break it down:

![python logo](https://cdn-images-1.medium.com/max/2000/1*GGIvINjK3F7o3LAcR48KzA.png)

### Python

**Python** is a high-level programming language. A **high**-**level programming language** is a programming language that is closer to human languages and further from machine languages.

(hey, don’t hate me, I am trying to cover all stages of knowledge here :D)

### Web Framework

A web framework is a software framework that is designed to support the development of web applications. Web frameworks provide a standard way to build and deploy web applications on the World Wide Web.

Good examples of web frameworks that you might’ve heard of are [Angular](https://angular.io/) and [Vue.js](https://vuejs.org/).

### Model-Template-Views architectural pattern

I don’t know about you, but I was not familiar with the MVT pattern. Apparently, MVT is a design pattern similar to ***MVC***, which I did learn at university.

So first, we’ll refresh our memory of the Model-View-Controller (MVC) pattern, and then we will look at Django’s specificity for the Model-View-Template (MVT) pattern.

**MVC Pattern**

When talking about applications that provide UI (User Interface; web, or desktop), we usually talk about MVC architecture, which is based on three components: Model, View, and Controller.

Let’s look at a super simple example: Let’s say our user is on Facebook and has just clicked the ***share*** button:

 1. The **View** updates the **Controller** with the action, i.e. the click button, and data, which is the post itself.

 2. The **Controller** transfers this information to the **Model**, which saves the post in the DB.

That’s one direction, but it doesn’t end here, does it?

3. The **Model** responds to the **Controller** with the new-post data.

4. The **Controller** sends the **View** an object that has all the data it needs in order to show the user a pop-up message saying *“your post was published successfully”*, and our user see their new post on their page.

|![MVC Facebook post example](https://cdn-images-1.medium.com/max/3200/1*B0X-_n25aenjr_X3uCMUvg.png)|
|--|
|MVC Facebook post example|

**Django’s MVC — MVT Pattern**

The main difference between MVC and MVT is that Django itself takes care of the Controller part, leaving us with the template. The template is an HTML file mixed with ***Django Template Language (DTL)***.

***Django Template Language:*** Being a web framework, Django needs a convenient way to generate HTML dynamically. The Django template language is Django’s own template system.

The developer provides the Model and the View, and the Template then just maps it to a URL and Django does the magic to serve it to the user.

The following diagram illustrates how the components of the MVT pattern interact with each other to serve a user request −

|![[Source: [https://www.dothedev.com/blog/amp/what-is-django-used-for/](https://www.dothedev.com/blog/amp/what-is-django-used-for/)]](https://cdn-images-1.medium.com/max/3052/1*kKmjOaV5i6kzg2RkVF-2lQ.png)|
|--|
|Source: [https://www.dothedev.com/blog/amp/what-is-django-used-for/](https://www.dothedev.com/blog/amp/what-is-django-used-for/)|

Well, I still don’t understand it fully, but I guess there are things that are better understood with experience. This is good enough for now!

***

## Installing Django

For this installation, we will use the CLI, so for those of you who don’t know what that is:

### 0. Command-line Interface (CLI)

The command-line interface is a program on your computer that allows you to create and delete files, run programs, and navigate through folders and files.

On a Mac, it’s called **Terminal**, and on Windows, it’s **Command Prompt**. It is common to call it *a terminal* no matter which operating system you’re working with, and that is what I do as well.

|![Now you know which operating system I worked on while creating this blog post ;)](https://cdn-images-1.medium.com/max/2000/0*IymIwzx4a7mdX7V6.png)|
|--|
|Now you know which operating system I worked on while creating this blog post ;)|

As you will see soon, different operating systems have different commands for the same program or action.

***

According to [the official installation guide](https://docs.djangoproject.com/en/3.2/intro/install/), Here are the steps for installing Django:

### 1. Install Python:

If you already have Python installed, there is a nice table that shows you which Django version matches your Python version.

|![[https://docs.djangoproject.com/en/3.2/faq/install/#what-python-version-can-i-use-with-django](https://docs.djangoproject.com/en/3.2/faq/install/#what-python-version-can-i-use-with-django)](https://cdn-images-1.medium.com/max/2000/1*mI94Cr6kyVLnAJEgT3qE4A.png)|
|--|
|https://docs.djangoproject.com/en/3.2/faq/install/#what-python-version-can-i-use-with-django|

You can check your Python version by opening the Terminal and typing `python` (and Enter). No response means that you don’t have it installed, otherwise, you will see the version number. For some, including myself, typing `python` won’t work, but typing `py` does.

Need to install python? [Here](https://www.ics.uci.edu/~pattis/common/handouts/pythoneclipsejava/python.html) is a nice tutorial.

Have Python installed but still can’t see it in the Terminal? [Here](https://www.educative.io/edpresso/err-python-is-not-recognized-as-an-internal-or-external-command) is how you fix it.

### 2. Set up a database

According to [this](https://www.librador.com/2011/05/23/How-to-run-Django-tests-without-a-database/) article, you don’t have to set up a database — even the official Django documentation says that *“this step is only necessary if you’d like to work with a “large” database engine”*.

I choose to set up a DB only when I see it’s necessary.

### 3. Install Django

There are several ways, this is the recommended one:

First, you need to install ***PIP***. PIP is a package management system used to install and manage software packages written in Python.

According to [the official documentation](https://pip.pypa.io/en/stable/installing/), PIP is already installed if you are using Python 2 >=2.7.9 or Python 3 >=3.4 and you can verify it by typing `py -m pip --version` in the Windows Command Prompt or `python -m pip --version` in the Unix/Mac OS Terminal.

Now that we have PIP, all we need to do is type `py -m pip install django` in Windows or `python -m pip install django` in Unix/Mac OS. Hopefully, you will see it finish with *“Successfully installed Django-3.2 asgiref-3.3.4 pytz-2021.1 sqlparse-0.4.1”*

### 4. Verifying

To verify that Django can be seen by Python, type python or py from your shell. Then at the Python prompt (where the lines start with >>>), try to import Django and print the version:
```
C:\Users\Admin> py
Python 3.9.0 (tags/v3.9.0:9cf6752, Oct  5 2020, 15:34:40) [MSC v.1927 64 bit (AMD64)] on win32
Type "help", "copyright", "credits" or "license" for more information.
>>> import django
>>> print(django.get_version())
3.2
>>>
```

***

Cool, we learned what Django is and have it installed!

### The flow

Now, to gain full comprehension, let me show you the flow of the index page from [the CS50 Django project](https://cs50.harvard.edu/web/2020/projects/1/wiki/), because understanding this is critical, and that was my *“ting!” *moment (Full code can be found [*here*](https://github.com/IfatNeumann/cs50webP1wiki/commit/fae381e9f59d1bad42c8de2ef198f23e61dfb217)).

 1. [encyclopedia/urls.py](https://github.com/IfatNeumann/cs50webP1wiki/commit/fae381e9f59d1bad42c8de2ef198f23e61dfb217#diff-f042b151d573c8e275130759adaedd3c3a068bd27319ff88ed6db1fc2d80b1ccR6): `path("", views.index, name="index")`. 
First of all, path= `""` means it’s the home page.
Now, see `views.index`? It indicates that the next step in our trip is the *views.py* file.

 2. [encyclopedia/views.py](https://github.com/IfatNeumann/cs50webP1wiki/commit/fae381e9f59d1bad42c8de2ef198f23e61dfb217#diff-4d460642685b68442c2131173b14f749a6d92c6ed24abaf109639035d2575d25R6-R9):
```
def index(request):
    return render(request, "encyclopedia/index.html", 
      {
        "entries": util.list_entries()
      }
    )
```
3. There are two things to notice here:
a. The next step is [*index.html*](https://github.com/IfatNeumann/cs50webP1wiki/commit/fae381e9f59d1bad42c8de2ef198f23e61dfb217#diff-c6d6ae246efdbed42e1eb654e65ca68350f475949a1a0c82c916f2fb80d556d7R11) and that it’s going to have variable named *entries*: `{% for entry in entries %}`

b. We use a function called *list_entries()* from the file *utils.py:*

[encyclopedia/util.py](https://github.com/IfatNeumann/cs50webP1wiki/commit/fae381e9f59d1bad42c8de2ef198f23e61dfb217#diff-64b5223f5c649bdbc03b7988cc756f2e70e07c92f2c4fdd015f2b7bdd9163fe0R7-R13):

```
def list_entries():
    """
    Returns a list of all names of encyclopedia entries.
    """
    _, filenames = default_storage.listdir("entries")
    return list(sorted(re.sub(r"\.md$", "", filename)
                for filename in filenames if 
                filename.endswith(".md")))
```

Let’s see it in a chart:

![chart](https://cdn-images-1.medium.com/max/3200/1*tabd7OdDVg91DLnSMlx7Dg.png)

Today we learned about Django and the Model-Template-View pattern. Then we covered everything needed for installation, including Python and PIP, and finished with an example showing how the flow looks like!

I hope things are clearer now. This is a great opportunity to get your hands dirty with [the CS50 Django project](https://cs50.harvard.edu/web/2020/projects/1/wiki/) that my AliceCode group is working on!

### Additional Resources:

[https://www.javatpoint.com/django-mvt](https://www.javatpoint.com/django-mvt)
[https://www.tutorialspoint.com/django/django_overview.htm](https://www.tutorialspoint.com/django/django_overview.htm)
[https://www.djangoproject.com/start/](https://www.djangoproject.com/start/)
[https://cs50.harvard.edu/web/2020/projects/1/wiki/](https://cs50.harvard.edu/web/2020/projects/1/wiki/)

***

![[https://cupofcode.blog/](https://cupofcode.blog/)](https://cdn-images-1.medium.com/max/3170/0*dFpSvsmM6cEoz9T_.png)

If you read this, you’ve reached the end of the blog post, and I would love to hear your thoughts! Here are the ways to contact me:
Facebook: [https://www.facebook.com/cupofcode.blog/](https://www.facebook.com/cupofcode.blog/)
Instagram: [https://www.instagram.com/cupofcode.blog/](https://www.instagram.com/cupofcode.blog/)
Email: cupofcode.blog@gmail.com