Zeyu-Li/django-tutorial

A tutorial for Django projects 🏫

Django Tutorial

This is a Django tutorial that goes through the in and outs of Django, a Python based back-end web framework. Django is very flexible and modular system that offers users a complete and faster way to develop back-end code

Index

1. Getting Started
2. Setting Up
3. Running
4. Project Overview
5. Starting an App
6. Notes Before we Start
7. Viewing a Homepage
8. Frontend
9. Login
10. End Note & Resources
11. Miscellaneous

1. Getting Started

To start, you must have the following requirements

• Python (latest version is recommended, I am using 3.8.3)
• IDE (VS Code is recommended)
• Django module

To see how to setup Django, see the setting up section (below)

* Note, before starting this course, make sure you are comfortable with Python and the command line.

2. Setting Up

Assuming you have Python (+ added to the PATH) and your IDE installed, we will go through installing Django properly.

First we need a shell/terminal open (PowerShell in Windows)

An optional but strongly recommended step is to setup a virtual environment to isolate your Django project code from other Python projects. In addition, if you need to setup this project on a production server, this will help immensely. To install a virtual environment do a pip install exactly like the following:

pip install virtualenv

Afterwards, you need to create a virtual environment with

py -m venv env

Next you want to activate/go into the virtual env so in Windows enter:

.\env\Scripts\activate

Otherwise, if you are on Mac or Linux,

source env/Scripts/activate

Now you have isolated Django from your other Python modules

* Note you can exit the virtual env by using

deactivate

Next install the requirements modules

pip install -r requirements.txt

Right now, this is just Django, so you could have done

pip install Django

After virtual env and Django where installed, we want to start a new Django project so use the startproject command

django-admin startproject #youProjectNameHere

For this tutorial, I will be naming it Django_tutorial

3. Running

Once you are in a virtual environment, you can go into template folder with the following command:

cd .\template\

Next to start the Django project

py .\manage.py runserver

Now you can go to http://127.0.0.1:8000/ and see the Django default homepage

4. Project Overview

Now let us take a look at the Django project once generated.

You will see in the Django project there are 3 things generated

1. db.sqlite3 - the database for all the important info stored by Django (ie passwords, username, etc.). You can change from a SQLite database to another database style of your choice (ie. mySQL).
2. manage.py - the main initializer for your Django project
3. Django project name folder - a folder containing critical info about your Django project

Now let's dive into the Django project files

• asgi.py and wsgi.py - are files that communicate with the web server (probably going to be NGINX)

All of the files above should not be changed unless you absolutely 100% sure you know what you are doing

• urls.py - this is where you specify URL paths so Django knows how to link a URL request to a webpage. You will be working with this script a lot to direct the user to the right web page
• settings.py - defines the settings of the entire project. There are many things inside the settings that are important, so here are some of the most important things
  • This is the place where you can add modules to the project
  • You can specify the path of your static files (ie CSS, JavaScript, Images)
  • Change database engine
  • Changing project into a production build
  • Secret Key - a salt for your hashes; keep this secret by following this tutorial -> https://docs.djangoproject.com/en/3.0/howto/deployment/checklist/#secret-key

5. Starting an App

Now we have Django set up, we need to start an app. In Django, apps are what is used to modularize the code. Each app can have its own functionality. To start the first app, enter

django-admin startapp #appNameHere

For this tutorial, I will name it tutorial (I recommend apps being lowercase while the project is in uppercase for the sake of clarity)

Now we see a new folder called login

Now let us explore app folder. There are 5 files

• admin.py - dealing with the admin site
• apps.py - specifies some info about the app, won't need to touch it much
• tests.py - testing things
• models.py - changing the models relating to the app
• views.py - handles the rendering of the webpage, you will work with this and models.py the most

Know we understand the basics about the app, we can work on linking it up to the project

To so this, we go to the INSTALLED_APPS in the settings and add the name of the app at the last element of the list

6. Notes Before we Start

Before we start the main course, there are some things that you will need to know

Once you make a new model (will explore these later), you will have to use

django-admin makemigrations

If you decide to change the model, you will need to

python manage.py migrate

to migrate changes

7. Viewing a Homepage

Now to make a homepage, go to the urls.py, import the views in the new app with

from tutorial import views

then add a path to views.home (which we will make later).

urlpatterns = [
    ...
    path('', views.home, name='home'), #the name is so we can identify it later
]

Now we can go to the views in the app and direct to the homepage

# views.py
from django.shortcuts import render

def home(request):
    return render(request, 'tutorial/home.html')

Now you need to make a templates folder in the app directory

Within that template folder, you should make another folder of the same name of the app and then the home.html file. If you want to place the template folder in the main project directory, you must add

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')], # directory is in base project dir
        ...

to tell Django where your templates are located.

8. Frontend

Working with Django front end is very similar to working with a React or Angular template. You start off with a regular html page with other static files in its own separate folder in the main project

Like the template above, if you wish to store the static files in the main project folder, you must specify by adding

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

in the settings at the end of the file

Now if you need static images, css, etc., you must specify in the template.

To do that, have

{% load static %} # at the start of the file

if you want to specify something stored in static, you must use the

{% static 'css/index.css' %}

As you may have notices, most Django expressions have the {% #someExpressionHere %} format. In these expressions, you can have if statements, for loops, links to other URLs, and much, much more

* Important Note, if you are updating your front end, but your browser is not showing any changes, it is because the browser is caching the css and js, therefore, you have to hard reset the page (usually the keyboard shortcut is Ctrl+f5)

9. Login

Django comes with an authentication system for all to use, but I recommend using django-allauth because it supports using other services (ie. Google, Facebook + more) as optional logins. This is usually the way most people will sign in and optionally it can be the only way people sign in. This can be useful because you won't have to deal with passwords offload it to that other service.

django-allauth can be installed by following the allauth docs here.

See below for more resources on how to login

10. End Note & Resources

I hope you enjoyed this Django tutorial. I know this may have been short, and I have barely scratched the surface of Django's capabilities, but there are many resources online that can help you on your Django journey. In terms of next steps, I recommend making a Django ecommerce website as that is a fairly complex project that Django was designed for. Now I will list some resources for making a Django ecommerce website and some helpful Django documentation;

• Official Django documentation: https://www.djangoproject.com/start/
• YouTube ecommerce playlist by JustDjango: https://www.youtube.com/watch?v=z4USlooVXG0&list=PLLRM7ROnmA9F2vBXypzzplFjcHUaKWWP5

* BTW, JustDjango has some more amazing tutorials for all things Django, check it out: https://www.youtube.com/channel/UCRM1gWNTDx0SHIqUJygD-kQ

• If you have a library card, most likely, they have access to Lynda.com, where has some Django courses

11. Miscellaneous

Convenience Scripts

If you look in the main repo directory, you will see 4 script files, 2 open and 2 start scripts.

The open scripts are to open the project in the virtual environment and to cd into the Django directory

The start is the same as open but includes running the server as well.

⬆ Back to top

License

This code is under MIT licence.