Quick Start Guide for Django

Introduction

Django: A popular Python-based framework for web development.
Objective: Simplify Django setup and connect all pieces together (HTML, CSS, JavaScript).
Presenter: Maria from Python Simplify.

Setting Up Django Development Environment

Creating a Virtual Environment

Use Anaconda (or another method) to create a new environment:

conda create -n django_qs python=3.9

conda activate django_qs

conda install -c anaconda django  # or pip install django

Creating Django Project

Create a new directory for the project:
```
mkdir django_qs
cd django_qs
```
Start a new Django project:
```
django-admin startproject myproject
```
Navigate to the project directory and run the development server:
```
cd myproject
python manage.py runserver
```
Access the server at: localhost:8000 (default) or specify a port python manage.py runserver 8080.

Creating a Django App

To terminate server: Ctrl + C
Start a new app inside the project:
```
python manage.py startapp myapp
```

Create a templates directory in the app and add an HTML file (index.html):

mkdir myapp/templates
echo "<p>Can you read this?</p>" > myapp/templates/index.html

Linking Templates Directory

Update settings.py to include template directory path:

import os

TEMPLATES = [
    {
        ...
        'DIRS': [os.path.join(BASE_DIR, 'myapp/templates')],
        ...
    },
]

Views and URL Routing

Define a view function in views.py to render the template:

from django.shortcuts import render

def myview(request):
    return render(request, 'index.html')

Create urls.py in the app and map the view function:

from django.urls import path
from . import views

urlpatterns = [
    path('myview/', views.myview, name='myview'),
]

Link app URL configurations in myproject/urls.py:

from django.urls import path, include

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

Adding Static Files (CSS and JavaScript)

CSS

Create a static directory in the app, and then a css directory within it with a style sheet:

mkdir myapp/static
mkdir myapp/static/css
echo "*{background-color: slategray; text-align: center; color: white;}" > myapp/static/css/style.css

Update settings.py to include the static directory path:

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'myapp/static')
]

Add a link to the CSS file in the HTML template:

<!DOCTYPE html>
<html>
<head>
    <title>First Django App</title>
    {% load static %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
</head>
<body>
    <p>Can you read this?</p>
</body>
</html>

JavaScript

Create a js directory within the static directory and a script file:

mkdir myapp/static/js
echo "console.log('yoyoyo');" > myapp/static/js/script.js

Add a script tag to link the JS file in the HTML template:

<script type="text/javascript" src="{% static 'js/script.js' %}"></script>

Running the Server

Navigate to the project directory and run the server:
```
python manage.py runserver
```
Access the server at: localhost:8000/myapp/myview
To remove 'myview' from URL, update myapp/urls.py path to empty string and rerun the server.

Conclusion

Django setup complete with HTML rendering, styled with CSS, and added JavaScript functionality.
Encourage viewers to share, like, comment, and subscribe.