###### tags: `Lesson Notes` `Django` `Python` `ACC`

# Intro to Django

## What is Django?
I am so glad you asked. Django is what is called a Web Framework. Now what does that mean? It is a foundation that someone created that helps us create all sorts of applications and services. It helps automate some of the things that every website will use so we can get up and running faster. (You know cost the employer less money because we utilize less man hours)

Django isn't a new language like JS or HTML it is just a web framwork. Now there are a few new things you might see in terms of writing the code but it's still just going to be JS, CSS, HTML, and Python. You can even use jQuery and LESS if you want.

## Creating a Website/Application using Django

Ok 1st lets go over your folder structure. Remember this?
* python_stack
* myEnvironments
* _python
* fundamentals
* forLoopBasicI ^
* functionsBasicI ^
* pythonOOP
* django

Remember that anything with a ^ is a project or repo. Now lets add to it.
* python_stack
* myEnvironments
* _python
* fundamentals
* forLoopBasicI ^
* functionsBasicI ^
* pythonOOP
* django
* firstProject^

So now we have a project inside our django folder and it is a repo on it's own. We will keep refering back to this just so you remember where to put things. Go ahead and make a repo and clone it into the django folder now. Yes it will be empty and that is ok.

### Step 1: Create new environment

Lets create our environment:
*In terminal:* cd into your myEnviroments folder
*In terminal:* python3 -m venv firstProjectPy3Env
*In terminal:* source firstProjectPy3Env/Scripts/activate (source firstProjectPy3Env/bin/activate)
*In terminal:* pip install Django==2.2
*In terminal:* cd ../django/firstProject

* python_stack
* myEnvironments
* fisrtProjectPy3Env
* _python
* fundamentals
* forLoopBasicI ^
* functionsBasicI ^
* pythonOOP
* django
* firstProject^

Notice the new folder in our myEnvironments folder? We just created that. Our new environment should also be showing that it is active in our terminal and if you followed all the commands (as long as you have the same structure as listed) you should also now be inside your firstProject repo folder.

### Step 2: Create 1st project

Ok so now lets get started before we get to the commands 1st we need to know the difference between projects and apps.

A project is the entire website, where apps are peices of it. The parts that uses databases or user functionality, basically it does something. Each project can have multiple apps to it.

*In terminal:* Django-admin startproject firstProject

Ok now our folders should look like this
* python_stack
* myEnvironments
* fisrtProjectPy3Env
* _python
* fundamentals
* forLoopBasicI ^
* functionsBasicI ^
* pythonOOP
* django
* firstProject^
* firstProject
* settings.py
* urls.py
* wsgi.py
* manage.py

Once that is done we should test it to make sure it installed correctly

*In terminal:* cd firstProject (so we are now in firstProject/firstProject)
*In terminal:* python3 manage.py runserver

You should see some stuff happening in your terminal and the last line should have say something about CTRL + BREAK if so proceed

You might also see some red or wording about migrations being unapplied. Just ignore this for now. We don't want them applied yet.

*In browser:* localhost:8000

Do you see the rocket ship? Yes? Perfect...your first project is installed and up and running...it's empty but hey its just the beginning

*In terminal:* CTRL + c (Command + c) This should shut that server down and you should now see your folder path again.

### Step 3: Create 1st app

So right now you should still be in the same folder we were in to start the server...if so lets get that first app created.

*In terminal:* python3 manage.py startapp firstApp

:::warning
Make sure that your apps are all named something different from each other and from the project. Best practice is to use the word app at the end of the apps and before that put what it does so if there are multiple apps you will know what folder to go into to work on it.
:::

Ok so now our folders should look like this:
* python_stack
* myEnvironments
* fisrtProjectPy3Env
* _python
* fundamentals
* forLoopBasicI ^
* functionsBasicI ^
* pythonOOP
* django
* firstProject^
* firstProject
* settings.py
* urls.py
* wsgi.py
* manage.py
* firstApp
* migrations
* admin.py
* apps.py
* models.py
* tests.py
* views.py

It doesn't hurt to go ahead and spin up the server again here just to make sure nothing is messed up.. (python3 manage.py runserver (in case you need to remember))

### Step 4: Lets add some views or pages
Open up the firstProject/firstApp/views.py file and lets add the following to it.

from django.shortcuts import render, HttpResponse

def index(request):
    return HttpResponse("Welcome to your new home page")

Ok cool. But we aren't done yet. We need to create a new file called urls.py but inside our firstApp folder. So your new folder layout should now look like this.

* python_stack
* myEnvironments
* fisrtProjectPy3Env
* _python
* fundamentals
* forLoopBasicI ^
* functionsBasicI ^
* pythonOOP
* django
* firstProject^
* firstProject
* settings.py
* urls.py
* wsgi.py
* manage.py
* firstApp
* migrations
* admin.py
* apps.py
* models.py
* tests.py
* urls.py
* views.py

In that new firstProject/firstApp/urls.py file lets add the following code:

from django.urls import path

from . import views

urlpatterns = [
    path('', views.index),
]

Notice the , at the end of the last line in the [] this is important. Always have this.

Ok good. Now what we have done is in the views.py file we have created a function that when called will display Welcome to your new home page in the browser, then we added that urls.py file so that we have a way to connect all pages like the index one we have created into 1 function....

Now lets connected it all to our project.
Open the following file first firstProject/firstProject/settings.py
Your going to have to scroll down a bit till you see INSTALLED_APPS = [ ]

Ok now lets add our app to the list...

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'firstApp',
]

Again notice the ,'s Very important!

That's it for this file for right now.

Lets open up the following file. firstProject/firstProject/urls.py

You should already see some code there which is good. I am just going copy the actual code part not the comments. But you are going to add the following to that part of code

from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path('', include('firstApp.urls')),
    path('admin/', admin.site.urls),
]

So so we did a few things here. 1 we added the word include on the second line. That just helps make things work. Then we added the first item in teh urlpatterns list. This is where we are saying ok so in the firstApp.urls file (or firstApp/urls.py) please include all of the paths that are in that file. So we just connected everything together.

Now before we spin back up our server it is good to know what that second item in that list is. This is one of the really cool features of Django. It comes with a preinstalled admin panel. We can't log into it yet but it is there..... so lets spin her up.

*In terminal:* python3 manage.py runserver
*In browser:* Either go to localhost:8000 or refresh if you still have that open

You should now see our welcome message. Pretty cool huh? Lets take a look at that other url pattern listed.
*In browser:* go to localhost:8000/admin/

You should now see a log in screen.

So thats it. We are up and running with our first project.