Django Fundamentals

April 15, 2025

Intro #

Django is a Python web framework for building web applications.
MVT (Model, View, Template)

Install Django #

In this example, I will use uv (you should try uv / 100x faster than pip).

Setup project directory and virtual env.

mkdir -p ~/project; cd ~/project
uv init

uv venv
source .venv/bin/activate

Install Django
```
uv add django
django-admin --help
```

Create Django project #

Add project.
```
django-admin startproject main .
```

Check the project tree.

tree

.
├── main
│   ├── asgi.py
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── db.sqlite3
├── main.py
├── manage.py
├── pyproject.toml
├── README.md
└── uv.lock

Run Django.
```
py manage.py runserver
```
Visit http://127.0.0.1:8000/.

Create your first application #

Create app.
```
py manage.py startapp movies
```

Edit file main/settings.py.

INSTALLED_APPS = [
   ...,
   'movies',
]

Edit movies/views.py.

from django.http import HttpResponse

...

def index(request):
   return HttpResponse("Hello Django - movies app")

Create URL file movies/urls.py

from django.urls import include, path

from . import views

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

Edit main URL file main/urls.py.

from django.http import include, path

...

urlpatterns = [
   ....,
   path('movies/', include('movies.urls')),
]

Rerun the django dev.
```
py manage.py runserver
```
Visit http://127.0.0.1:8000/movies/.

Rendering HTML template in Django #

Edit the file movies/views.py.

from django.shortcuts import render

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

Create a new directory and file.

mkdir -p movies/templates/movies/
touch movies/templates/movies/index.html

Edit the movies/templates/movies/index.html.
```
<h1>Hello Django</h1>
```
Re-run the Django development server.
```
py manage.py runserver
```

Passing data to Django template #

Edit the movies/views.py.

...
...
def index(request):
   # my test data
   context = {
      'name' : 'ndlrfz96',
      'address' : 'Magelang',
      'hobbies' : ['Reading', 'Watching Movies', 'Python', 'Linux']
   }

   return render(request, 'index.html', context)

Add to the movies/templates/movies/index.html.

<h1>Hello Django</h1>

<p> My name is {{ name }} and I'm from {{ address }} </p>
<br>
<p> My hobbies is: </p>
<ul>
   {% for hobby in hobbies %}
      <li>{{ hobby|title }}</li>
   {% endfor %}
</ul>

Re-run the Django development server again.

Serving static files in Django #

Create a new directory within your root project directory static/{css,js,img}.
```
cd ~/project/
mkdir -p static/{css,js,img}
```

Edit main/settings.py.

import os
...
...
# default static url => site.com/static/css/style.css
STATIC_URL = 'static'

# static root directory after collects
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

# additional static directories in list, you can add multiple
# for dev
STATICFILES_DIRS = [os.path.joinc(BASE_DIR, 'static')]

Add the CSS file static/css/style.css.

body {
    background-color: lightblue;
    font-family: Inter;
}

Add the JavaScript file static/js/main.js.

// refreshPage() to refresh current tab
function refreshPage() {
  window.location.reload();
}

// openYoutube() in new tab
function openYoutube() {
  window.open("https://www.youtube.com/watch?v=OJEqTnsLCEE", "_blank");
}

Add your image to static/img/cat.png.

Edit the movies/templates/movies/index.html.

{% load static %}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <link href="{% static 'css/style.css' %}" rel="stylesheet">
    </head>
    <body>
    <h1>Hello Django</h1>
    <p>My name is {{ name }}, and I'm from {{ address }}</p>
    <p>My hobbies is:</p>
        <ul>
            {% for hobby in hobbies %}
            <li>{{ hobby|title }}</li>
            {% endfor %}
        </ul>

    <button type="submit" onClick="refreshPage()">Refresh this page</button>
    <button type="submit" onClick="openYoutube()">Open Ant</button>
    <br>
    <br>
    <img src="{% static 'img/cat.png' %}" alt="Cat profile">
    <script src="{% static 'js/main.js' %}"></script>
    </body>
</html>

From the above template:

Load static via {% load static %}.
Add CSS, JS, and image file with the format {% static 'css/style.css' %}.
Created two submit button with the JavaScript function refreshPage() and openYoutube().

Re-run the Django development server.

←

Guide to Amazon RDS (Relational Database Service)

Vim Motions Tips

→