1️⃣ Prerequisites (both Linux & Windows)

Make sure Python is installed:

python --version

or

python3 --version

If it prints Python 3.x.x, you’re good.

2️⃣ Create a Project Folder

mkdir django_project
cd django_project

This folder will hold:

• virtual environment

• Django project code

🪟 WINDOWS (CMD / PowerShell)

3️⃣ Create Virtual Environment

python -m venv env

4️⃣ Activate Virtual Environment

▶ CMD

env\Scripts\activate

▶ PowerShell

env\Scripts\Activate.ps1

If PowerShell blocks it, run once as admin:

Set-ExecutionPolicy RemoteSigned

Then activate again.

You’ll see:

(env) C:\django_project>

5️⃣ Upgrade pip

python -m pip install --upgrade pip

6️⃣ Install Django

pip install django

Check:

django-admin --version

7️⃣ Create Django Project

django-admin startproject mysite .

django-admin startproject mysite
cd mysite

8️⃣ Run Server

python manage.py runserver

Open browser 👉
👉 http://127.0.0.1:8000/

9️⃣ Deactivate Virtual Environment

deactivate

🐧 LINUX (Ubuntu, Debian, Arch, etc.)

Create Virtual Environment

python3 -m venv env

This creates a folder called env.

Activate Virtual Environment

source env/bin/activate

You’ll see something like:

(env) user@machine:~/django_project$

👉 This means virtual env is active

Upgrade pip (recommended)

pip install --upgrade pip

Install Django

pip install django

Verify:

django-admin --version

Create Django Project

django-admin startproject mysite
cd mysite

Folder structure:

django_project/
├── venv/
└── mysite/
    ├── manage.py
    └── mysite/

Run Development Server

python manage.py runserver

Open browser 👉
👉 http://127.0.0.1:8000/

🎉 Django welcome page = SUCCESS

Deactivate Virtual Environment

deactivate
🔥 Common Mistakes (Important)

❌ Forgetting to activate venv
❌ Installing Django globally
❌ Running runserver outside project folder
❌ Using python vs python3 incorrectly on Linux

🧠 Pro Tip (Best Practice)

Managing Dependency using pip freeze

pip freeze will output the list of packages with versions installed in the current virtual environment (if activated)

We can then save that list to a file named requirements.txt for future ( so we can reinstall everything in new setup environment)

pip freeze > requirements.txt

This will make a file named requirements.txt and save the output of pip freeze that has packages and its versions

Later you can install everything with:

pip install -r requirements.txt

A function is a reusable block of code that performs a specific task.

Instead of writing the same code again and again, you define once, use many times.

Why functions?

• Reduce code repetition

• Improve readability

• Make code modular & testable

• Easier debugging

🔹 2. Basic Function (No Parameters)

Syntax

def function_name():
    statements

Example

def greet():
    print("Hello, World!")

greet()

📌 Output:

Hello, World!

📝 Task 1

Create a function welcome() that prints:

Welcome to Python Programming

🔹 3. Function with Parameters (Arguments)

Parameters allow us to pass data into a function.

Example

def greet(name):
    print("Hello", name)

greet("Aarav")
greet("Python")

📌 Output:

Hello Aarav
Hello Python

📝 Task 2

Write a function square(n) that prints the square of a number.

🔹 4. Function with Return Value

Instead of printing, functions can return values.

Example

def add(a, b):
    return a + b

result = add(5, 3)
print(result)

📌 Output:

8

👉 return sends data back to the caller.

📝 Task 3

Create a function is_even(n) that returns True if number is even, else False.

🔹 5. Types of Arguments in Python

Python supports multiple ways to pass arguments:

✅ 5.1 Positional Arguments

Order matters.

def student(name, age):
    print(name, age)

student("Ram", 20)

❌ Wrong order:

student(20, "Ram")  # logical error

📝 Task 4

Create a function multiply(a, b, c) and call it using positional arguments.

✅ 5.2 Keyword Arguments

You specify parameter names → order doesn’t matter.

def student(name, age):
    print(name, age)

student(age=21, name="Sita")

📝 Task 5

Call multiply() using keyword arguments.

✅ 5.3 Default Arguments

Provide default values.

def greet(name="User"):
    print("Hello", name)

greet()
greet("Aarav")

📝 Task 6

Create a function power(base, exp=2) that returns base raised to power.

🔹 6. *args (Variable Length Arguments)

Sometimes you don’t know how many arguments will be passed.

👉 *args stores values as a tuple.

Example

def total(*args):
    print(args)
    print(sum(args))

total(1, 2, 3)
total(5, 10, 15, 20)

📌 Output:

(1, 2, 3)
6
(5, 10, 15, 20)
50

Key Points

• args is just a name (convention)

• * is important

• Access like a tuple

📝 Task 7

Write a function average(*numbers) that returns the average.

🔹 7. **kwargs (Keyword Variable Length Arguments)

Used when passing named arguments dynamically.

👉 **kwargs stores data as a dictionary.

Example

def student_details(**kwargs):
    print(kwargs)

student_details(name="Aarav", age=21, course="CS")

📌 Output:

{'name': 'Aarav', 'age': 21, 'course': 'CS'}

Accessing values

def student_details(**kwargs):
    for key, value in kwargs.items():
        print(key, ":", value)

📝 Task 8

Create a function profile(**info) that prints all key-value pairs.

🔹 8. Combining Arguments (Advanced)

Correct Order

1. Positional
2. *args
3. Default
4. **kwargs

Example

def demo(a, b, *args, x=10, **kwargs):
    print(a, b)
    print(args)
    print(x)
    print(kwargs)

demo(1, 2, 3, 4, x=50, name="Ram", age=20)

📝 Task 9

Create a function bill(customer, *items, discount=0, **details)
Print customer, items, discount, and details.

🔹 9. Functions as Objects (Advanced Concept)

Functions can be:

• Stored in variables

• Passed as arguments

• Returned from functions

Example

def add(a, b):
    return a + b

operation = add
print(operation(3, 4))

📝 Task 10

Write a function apply(func, a, b) that applies any function to two numbers.

🔹 10. Lambda Functions (Short Functions)

One-line anonymous functions.

square = lambda x: x * x
print(square(5))

With args

add = lambda *args: sum(args)
print(add(1, 2, 3))

📝 Task 11

Create a lambda to check if a number is divisible by 5.

🔹 11. Real-World Example (Mini Project)

Student Marks Calculator

def calculate_marks(name, *marks, **extra):
    total = sum(marks)
    avg = total / len(marks)

    print("Name:", name)
    print("Total:", total)
    print("Average:", avg)

    if "grade" in extra:
        print("Grade:", extra["grade"])

calculate_marks(
    "Aarav",
    80, 75, 90,
    grade="A",
    remark="Excellent"
)

✅ Final Practice Assignment (Exam-Level)

1. Write a function using default arguments

2. Write a function using *only args

3. Write a function using **only kwargs

4. Combine all argument types in one function

5. Explain difference between print and return

6. Write a real-life example of *args and **kwargs

🚗 ESP8266 WiFi Robot Car (AP Mode + Web UI)

This project allows you to control a robotic car using an ESP8266 via a WiFi Access Point (AP).
It serves a web interface with large directional buttons that send motion commands to the ESP8266.

📘 Overview

When powered, the ESP8266 creates its own WiFi network (ESP8266_Robot_Car).
A user connects to this WiFi and opens a webpage (usually at http://192.168.4.1).
The page contains four big buttons:

• ↑ Forward

• ↓ Backward

• ← Left

• → Right

When a button is pressed, a command (F, B, L, or R) is sent to the ESP8266.
When the button is released, a stop (S) command is sent.

⚙️ Hardware Requirements

🪛 Wiring Diagram

You can change pin assignments in the code if needed.

💻 Software Setup

1. Install Requirements

• Install Arduino IDE

• Add the ESP8266 board package
  (File → Preferences → Additional Boards Manager URLs)

    https://arduino.esp8266.com/stable/package_esp8266com_index.json
  

• Install required libraries:

  • ESP8266WiFi.h

  • ESP8266WebServer.h

2. Upload Code

• Copy the full sketch provided.

• Select your ESP board from Tools → Board.

• Select the correct COM port.

• Click Upload.

🌐 Connecting to the Car

1. After upload, open the Serial Monitor at 115200 baud.

2. You should see something like:

    🚀 Starting ESP8266 Robot Car in AP Mode...
    📶 Access Point Started. IP: 192.168.4.1
    🌐 HTTP Server Started!
   

3. On your phone or laptop:

   • Go to WiFi settings

   • Connect to ESP8266_Robot_Car
     Password: 12345678

   • Open browser and visit: http://192.168.4.1

4. You’ll see a control interface with four large buttons.

🧭 Web Interface Features

• Responsive Layout – works on mobile and desktop in landscape mode.

• Editable IP field – you can change IP if needed.

• LocalStorage support – remembers the IP address even after reload.

• Touch & Mouse Events – supports both mobile and desktop controls.

⚡ Command Mapping

Each command is sent as an HTTP GET request to:

http://192.168.4.1/control?state=<COMMAND>

Example:

http://192.168.4.1/control?state=F

🪵 Debugging via Serial Monitor

Serial outputs help you see what’s happening:

➡️ Received command: F
🚗 Moving Forward
➡️ Received command: S
⏹ Stopping Car

If you don’t see this, check:

• Power supply to the ESP8266 and motor driver

• Correct pin wiring

• Serial Monitor baud rate (115200)

🧩 Code Overview

Main Components:

• WiFi.softAP() – Starts ESP8266 in Access Point mode

• ESP8266WebServer server(80) – Runs HTTP server on port 80

• server.on("/", handleRoot) – Serves the control webpage

• server.on("/control", handleControl) – Handles motion commands

• Motor Functions:

  • forward(), backward(), left(), right(), stopCar()

Flow:

1. User connects to AP

2. Loads control page

3. Presses button → JavaScript sends HTTP request

4. ESP8266 receives request and activates motor pins

🧠 Troubleshooting

🧩 Future Improvements

• Add Station Mode (STA) support to control from existing WiFi network.

• Add Speed Control (PWM) for smooth movement.

• Add Camera streaming support.

• Use OTA updates for easy firmware upgrades.

🏁 Summary

✅ Standalone WiFi-controlled robot car
✅ Easy-to-use web UI hosted directly on ESP8266
✅ Real-time control using touch or mouse
✅ Fully customizable and expandable

Code

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

// Motor pin definitions (change as per your wiring)
#define IN1 D1
#define IN2 D2
#define IN3 D3
#define IN4 D4

ESP8266WebServer server(80);

// HTML Page (embedded)
const char MAIN_page[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ESP8266 WiFi Robot Car</title>
  <style>
    body {
      margin: 0;
      background: #f4f6fb;
      font-family: Arial, sans-serif;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      height: 100vh;
      overflow: hidden;
    }

    .panel {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 20px;
    }

    .arrow-btn {
      width: 120px;
      height: 120px;
      border: none;
      border-radius: 12px;
      background: #dbeafe;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 48px;
      color: #1e3a8a;
      transition: 0.2s;
    }

    .arrow-btn:active {
      background: #93c5fd;
      transform: scale(0.95);
    }

    .arrow-btn.active{
        background: #93c5fd;
        transform: scale(0.95);
    }

    .center-panel {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 15px;
    }

    .info-bar {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      background: #0ea5e9;
      color: white;
      text-align: center;
      padding: 8px;
      font-size: 18px;
      font-weight: 500;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
    }

    .status {
      font-size: 14px;
      opacity: 0.85;
    }

    #editIp {
      background: none;
      border: none;
      color: white;
      font-size: 16px;
      cursor: pointer;
    }

    #ipInput {
      background: rgba(255, 255, 255, 0.2);
      border: none;
      border-radius: 5px;
      padding: 2px 6px;
      color: white;
      width: 120px;
      text-align: center;
    }

    #saveBtn {
      background: #0284c7;
      border: none;
      color: white;
      border-radius: 5px;
      padding: 2px 8px;
      cursor: pointer;
      margin-left: 4px;
    }
  </style>
</head>
<body>
  <div class="info-bar">
    🤖 ESP8266 WiFi Robot Car
    <span class="status">
      <input id="ipInput" value="192.168.4.1">
    </span>
    <button id="saveBtn">💾</button>
  </div>

  <div class="panel">
    <button class="arrow-btn" id="forward">⬆️</button>
    <button class="arrow-btn" id="backward">⬇️</button>
  </div>

  <div class="center-panel">
    <button class="arrow-btn" id="stop">🅿️</button>
  </div>

  <div class="panel">
    <button class="arrow-btn" id="left">⬅️</button>
    <button class="arrow-btn" id="right">➡️</button>
  </div>

  <script>
    // Load saved IP from localStorage or set default
    let baseIP = localStorage.getItem("robot_ip") || "192.168.4.1";
    const ipInput = document.getElementById("ipInput");
    const saveBtn = document.getElementById("saveBtn");
    ipInput.value = baseIP;

    // Save new IP to localStorage
    saveBtn.addEventListener("click", () => {
      baseIP = ipInput.value.trim();
      if (baseIP) {
        localStorage.setItem("robot_ip", baseIP);
        alert(`✅ IP saved: ${baseIP}`);
      }
    });

    function sendState(state) {
      const url = `http://${baseIP}/control?state=${state}`;
      fetch(url).catch(err => console.log("Request failed:", err));
    }

    function addControlEvents(id, code) {
      const btn = document.getElementById(id);
      const press = () => sendState(code);
      const release = () => sendState("S");

      btn.addEventListener("mousedown", press);
      btn.addEventListener("mouseup", release);
      btn.addEventListener("mouseleave", release);

      // Mobile/touch support
      btn.addEventListener("touchstart", e => { e.preventDefault(); btn.classList.add("active"); press(); });
      btn.addEventListener("touchend", e => { e.preventDefault(); btn.classList.remove("active"); release(); });
    }

    addControlEvents("forward", "F");
    addControlEvents("backward", "B");
    addControlEvents("left", "L");
    addControlEvents("right", "R");

    // Stop button
    document.getElementById("stop").addEventListener("click", () =>{ sendState("S")});
  </script>
</body>
</html>
)rawliteral";

void setup() {
  Serial.begin(115200);
  Serial.println();
  Serial.println("🚀 Starting ESP8266 Robot Car in AP Mode...");

  // Setup motor pins
  pinMode(IN1, OUTPUT);
  pinMode(IN2, OUTPUT);
  pinMode(IN3, OUTPUT);
  pinMode(IN4, OUTPUT);
  stopCar();

  // Start Access Point
  WiFi.softAP("ESP8266_Robot_Car", "12345678");
  Serial.print("📶 Access Point Started. IP: ");
  Serial.println(WiFi.softAPIP());

  // Route handlers
  server.on("/", handleRoot);
  server.on("/control", handleControl);
  server.begin();
  Serial.println("🌐 HTTP Server Started!");
}

void loop() {
  server.handleClient();
}

// Serve the control UI
void handleRoot() {
  Serial.println("📄 Client requested index page");
  server.send(200, "text/html", MAIN_page);
}

// Handle motor control requests
void handleControl() {
  if (!server.hasArg("state")) {
    Serial.println("⚠️ No state argument received!");
    server.send(400, "text/plain", "Missing state parameter");
    return;
  }

  String state = server.arg("state");
  Serial.print("➡️ Received command: ");
  Serial.println(state);

  if (state == "F") forward();
  else if (state == "B") backward();
  else if (state == "L") left();
  else if (state == "R") right();
  else if (state == "S") stopCar();
  else Serial.println("❌ Invalid state command!");

  server.send(200, "text/plain", "OK");
}

// Motor Control Functions
void forward() {
  Serial.println("🚗 Moving Forward");
  digitalWrite(IN1, HIGH);
  digitalWrite(IN2, LOW);
  digitalWrite(IN3, HIGH);
  digitalWrite(IN4, LOW);
}

void backward() {
  Serial.println("🚗 Moving Backward");
  digitalWrite(IN1, LOW);
  digitalWrite(IN2, HIGH);
  digitalWrite(IN3, LOW);
  digitalWrite(IN4, HIGH);
}

void left() {
  Serial.println("↩️ Turning Left");
  digitalWrite(IN1, LOW);
  digitalWrite(IN2, HIGH);
  digitalWrite(IN3, HIGH);
  digitalWrite(IN4, LOW);
}

void right() {
  Serial.println("↪️ Turning Right");
  digitalWrite(IN1, HIGH);
  digitalWrite(IN2, LOW);
  digitalWrite(IN3, LOW);
  digitalWrite(IN4, HIGH);
}

void stopCar() {
  Serial.println("⏹ Stopping Car");
  digitalWrite(IN1, LOW);
  digitalWrite(IN2, LOW);
  digitalWrite(IN3, LOW);
  digitalWrite(IN4, LOW);
}

room_monitor/
├── app.py
├── templates/
│   └── index.html

app.py

from flask import Flask, render_template
import Adafruit_DHT

app = Flask(__name__)

DHT_SENSOR = Adafruit_DHT.DHT11  # or DHT22
DHT_PIN = 4  # GPIO4

@app.route('/')
def index():
    humidity, temperature = Adafruit_DHT.read_retry(DHT_SENSOR, DHT_PIN)
    if humidity is not None and temperature is not None:
        status = "Success"
    else:
        status = "Sensor error"
        temperature = humidity = None
    return render_template('index.html', temperature=temperature, humidity=humidity, status=status)

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Room Monitor</title>

    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Roboto', sans-serif;
            background-color: #f0f2f5;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .card {
            background: #fff;
            padding: 30px 40px;
            border-radius: 20px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            text-align: center;
            max-width: 350px;
            width: 100%;
        }

        h1 {
            color: #222;
            margin-bottom: 25px;
            font-size: 28px;
        }

        p {
            font-size: 20px;
            margin: 15px 0;
            color: #333;
        }

        .status {
            font-weight: bold;
            margin-top: 20px;
            font-size: 16px;
            color: green;
        }

        button {
            margin-top: 20px;
            padding: 10px 25px;
            font-size: 16px;
            background-color: #007BFF;
            border: none;
            color: white;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div class="card">
        <h1>🌡️ Room Monitor</h1>
        <p><strong>Temperature:</strong> {{ temperature }} &deg;C</p>
        <p><strong>Humidity:</strong> {{ humidity }} %</p>
        <p class="status">{{ status }}</p>
        <button onclick="location.reload()">🔄 Refresh</button>
    </div>
</body>
</html>

To auto-reload the page every 5 seconds using JavaScript, you can add a simple <script> tag before the closing </body> tag. Here's your updated HTML with the auto-reload functionality:

<script>
        setTimeout(function() {
            location.reload();
        }, 5000); // Reload every 5 seconds
</script>

index.html with auto reload

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Room Monitor</title>

    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Roboto', sans-serif;
            background-color: #f0f2f5;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .card {
            background: #fff;
            padding: 30px 40px;
            border-radius: 20px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            text-align: center;
            max-width: 350px;
            width: 100%;
        }

        h1 {
            color: #222;
            margin-bottom: 25px;
            font-size: 28px;
        }

        p {
            font-size: 20px;
            margin: 15px 0;
            color: #333;
        }

        .status {
            font-weight: bold;
            margin-top: 20px;
            font-size: 16px;
            color: green;
        }

        button {
            margin-top: 20px;
            padding: 10px 25px;
            font-size: 16px;
            background-color: #007BFF;
            border: none;
            color: white;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div class="card">
        <h1>🌡️ Room Monitor</h1>
        <p><strong>Temperature:</strong> {{ temperature }} &deg;C</p>
        <p><strong>Humidity:</strong> {{ humidity }} %</p>
        <p class="status">{{ status }}</p>
        <button onclick="location.reload()">🔄 Refresh</button>
    </div>

    <script>
        setTimeout(function() {
            location.reload();
        }, 5000); // Reload every 5 seconds
    </script>
</body>
</html>

Scenario: Handling Media Files in Django

Step 1: Configure Settings

1. Open yoursettings.py file and add the following lines:

    # settings.py
    MEDIA_URL = '/media/' 
    MEDIA_ROOT = BASE_DIR / "media"
   

Step 2: Create Media Directory

1. In your project root, create amedia directory:

    my_project/
    ├── my_app/
    ├── media/ # THIS ONE
    ├── static/
    ├── manage.py
    └── settings.py
   

Step 3: Create a Model to Handle Media Files

1. Define a model that includes aFileField or ImageField in my_app/models.py:

    # my_app/models.py
    from django.db import models
   
    class UserProfile(models.Model):
        username = models.CharField(max_length=100)
        profile_picture = models.ImageField(upload_to='profile_pictures/')
   
        def __str__(self):
            return self.username
   

pip install pillow

Step 4: Configure URLs

1. Add a URL pattern to serve media files during development inmy_project/urls.py:

    # my_project/urls.py
    from django.contrib import admin
    from django.urls import path, include
    from django.conf import settings
    from django.conf.urls.static import static 
   
    urlpatterns = [
        path('admin/', admin.site.urls),
        path('', include('my_app.urls')),
    ]
   
    if settings.DEBUG:
        urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
   

Step 5: Create a Form to Upload Media Files

1. Create a form for uploading media files inmy_app/forms.py:

    # my_app/forms.py
    from django import forms
    from .models import UserProfile
   
    class UserProfileForm(forms.ModelForm):
        class Meta:
            model = UserProfile
            fields = ['username', 'profile_picture']
   

Step 6: Create a View to Handle the Form

1. Create a view to handle file uploads inmy_app/views.py:

    # my_app/views.py
    from django.shortcuts import render, redirect
    from .forms import UserProfileForm
   
    def upload_profile(request):
        if request.method == 'POST':
            form = UserProfileForm(request.POST, request.FILES)
            if form.is_valid():
                form.save()
                return redirect('profile_list')
        else:
            form = UserProfileForm()
        return render(request, 'my_app/upload_profile.html', {'form': form})
   
    def profile_list(request):
        profiles = UserProfile.objects.all()
        return render(request, 'my_app/profile_list.html', {'profiles': profiles})
   

Step 7: Create Templates

1. Create the template for uploading files (my_app/templates/my_app/upload_profile.html):

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Upload Profile</title>
    </head>
    <body>
        <h1>Upload Profile</h1>
        <form method="post" enctype="multipart/form-data">
            {% csrf_token %}
            {{ form.as_p }}
            <button type="submit">Upload</button>
        </form>
    </body>
    </html>
   

2. Create the template for displaying the list of profiles (my_app/templates/my_app/profile_list.html):

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Profile List</title>
    </head>
    <body>
        <h1>Profile List</h1>
        <ul>
            {% for profile in profiles %}
            <li>
                <img src="{{ profile.profile_picture.url }}" alt="{{ profile.username }}" width="100">
                {{ profile.username }}
            </li>
            {% endfor %}
        </ul>
    </body>
    </html>
   

Step 8: Create URLs for the Views

1. Define URLs for the views inmy_app/urls.py:

    # my_app/urls.py
    from django.urls import path
    from .views import upload_profile, profile_list
   
    urlpatterns = [
        path('upload/', upload_profile, name='upload_profile'),
        path('', profile_list, name='profile_list'),
    ]
   

Step 9: Run the Development Server

1. Run the development server:

    python manage.py runserver
   

2. Open a web browser and navigate tohttp://127.0.0.1:8000/upload/ to upload a profile picture.

3. Navigate tohttp://127.0.0.1:8000/ to see the list of profiles with their uploaded pictures.

This setup allows you to handle media files in your Django project, including uploading files, saving them to the file system, and displaying them on your website.

Scenario: Building a Simple Webpage with Static Files

Link to theme(template)

Link to project

Step 1: Create a New Django Project and App

Make a folder

mkdir my_project

Go to that folder

cd my_project

Make virtual environment

python -m venv envname

Activate the environment and install django

IN WINDOWS

.\envname\Scripts\activate

In Unix/Linux Systems

source envname/bin/activate

Install django

pip install django

1. Create a new Django project:

    django-admin startproject my_project .
   

2. Create a new app within the project:

    python manage.py startapp my_app
   

3. Add the new app toINSTALLED_APPS in settings.py:

    # settings.py
    INSTALLED_APPS = [
        ...
        'my_app',
    ]
   

Step 2: Create Static Files Directory and Files

1. Create astatic directory in the project root:

    |-- my_project/
    ├── my_app/
    ├── static/
    │   ├── css/
    │   │   └── style.css
    │   ├── js/
    │   │   └── script.js
    │   └── images/
    │       └── logo.png
    ├── manage.py
    └── db.sqlite3
   

2. Create CSS file (static/css/style.css):

    /* static/css/style.css */
    body {
        background-color: #f0f0f0;
        font-family: Arial, sans-serif;
    }
   
    h1 {
        color: #333;
    }
   

3. Create JavaScript file (static/js/script.js):

    // static/js/script.js
    document.addEventListener('DOMContentLoaded', function() {
        console.log("HELLO DJANGO FORM JS");
    });
   

4. Add an image (static/images/logo.png):

   (Add any logo image you have.)

Step 3: Configure Settings

1. Configuresettings.py for static files:

    # settings.py
    STATIC_URL = '/static/'
    STATICFILES_DIRS = [
        BASE_DIR / "static",
    ]
   

2. Configure settings.py for template folder

    TEMPLATES = [
        {
            'BACKEND': 'django.template.backends.django.DjangoTemplates',
            #update here
            'DIRS': [BASE_DIR/"templates"],
            'APP_DIRS': True,
            'OPTIONS': {
                'context_processors': [
                    'django.template.context_processors.debug',
                    'django.template.context_processors.request',
                    'django.contrib.auth.context_processors.auth',
                    'django.contrib.messages.context_processors.messages',
                ],
            },
        },
    ]
   

Step 4: Create a Template

1. Create a template directory in the app:

    my_project/
    ├── templates/
    │   └── index.html
   

2. Create the HTML template (templates/index.html):

    {% load static %}
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Static Files Example</title>
        <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
    </head>
    <body>
        <h1>Hello, Django!</h1>
        <img src="{% static 'images/logo.png' %}" alt="Logo">
        <script type="text/javascript" src="{% static 'js/script.js' %}"></script>
    </body>
    </html>
   

Step 5: Create a View and URL

1. Create a view inmy_app/views.py:

    from django.shortcuts import render
   
    def index(request):
        return render(request, 'index.html')
   

2. Create a URL pattern inmy_app/urls.py:

    from django.urls import path
    from .views import index
   
    urlpatterns = [
        path('', index, name='index'),
    ]
   

3. Include the app's URLs in the project'surls.py:

    # my_project/urls.py
    from django.contrib import admin
    from django.urls import path, include
   
    urlpatterns = [
        path('admin/', admin.site.urls),
        path('', include('my_app.urls')),
    ]
   

Step 6: Run the Development Server

1. Run the development server:

    python manage.py runserver
   

2. Open a web browser and navigate tohttp://127.0.0.1:8000/.

You should see a styled page with an Console message saying "Hello, Django from JS" and an image displayed. The CSS file is applied for styling, the JavaScript file for the alert, and the image file is displayed from the static directory.

python manage.py startapp app_name

Regularly used Django model fields:

1. CharField: Used for storing short to medium-length strings.

2. TextField: Suitable for storing longer text content.

3. IntegerField: Stores integer values, commonly used for numeric data.

4. FloatField: Similar to IntegerField but for floating-point numbers.

5. BooleanField: Represents a true/false field.

6. DateField: Used for storing dates.

7. TimeField: Stores time information.

8. DateTimeField: Combines date and time in a single field.

9. EmailField: Specifically designed for storing email addresses.

10. ImageField: Used to store image files.

11. FileField: General-purpose file field.

12. ForeignKey: Establishes a many-to-one relationship between two models.

13. ManyToManyField: Represents a many-to-many relationship.

14. DecimalField: Used for storing decimal numbers with fixed precision.

15. URLField: Stores URLs.

These are just some of the commonly used fields in Django models. Each field type is designed for specific data types and use cases in your application.

Person Model Example

# models.py
from django.db import models

class Person(models.Model):
    name = models.CharField(max_length=255)
    address = models.CharField(max_length=255)
    blood_group = models.CharField(max_length=5)
    age = models.IntegerField()
    gender = models.CharField(max_length=10)
    phone = models.CharField(max_length=15)
    email = models.EmailField()

1. Making Migrations:

   Django's makemigrations command analyzes your models and creates migration files that represent the changes you've made. Run the following command in your terminal:

    python manage.py makemigrations
   

   If your app is called myapp, you can specify it as follows:

    python manage.py makemigrations myapp
   

   This command will create migration files based on the changes detected in your models. These migration files are stored in the migrations directory within your app.

2. Reviewing Migration Files:

   After running makemigrations, you can review the generated migration files in the migrations directory. These files contain Python code that Django will use to apply changes to your database schema.

3. Applying Migrations:

   Once you're satisfied with the migration files, you can apply them to your database using the migrate command:

    python manage.py migrate
   

   If your app is called myapp, you can specify it as follows:

    python manage.py migrate myapp
   

   This command executes the migration files and updates your database schema accordingly.

4. Verifying Changes:

   After migrating, you can verify that the changes have been applied by accessing your database management tool (e.g., phpMyAdmin, pgAdmin) or by using Django's admin interface to view the Person model.

   While using SQlite database , we can view the database using SQLiteViewer Extension in VsCode

Registering to Django admin

Registering a model to Django's admin interface allows you to manage that model's data through a web-based UI provided by Django. To register the Person model from your example to the Django admin, you need to follow these steps:

Create a Superuser:

Before accessing the admin interface, make sure you have a superuser account. If you haven't created one yet, run the following command and follow the prompts:

python manage.py createsuperuser

💡

you wont see passwords while typing

1. Register the Model inadmin.py:

   In your app's admin.py file, you need to import the model and then register it with the admin site. If you haven't already created an admin.py file in your app, create one. Then, register your model as follows:

    # admin.py
    from django.contrib import admin
    from .models import Person
   
    admin.site.register(Person)
   

   This code imports the Person model and registers it with the admin site.

2. Accessing the Admin Interface:

   Start your Django development server if it's not already running:

    python manage.py runserver
   

   Then, open your web browser and navigate to http://localhost:8000/admin (replace localhost:8000 with your server address if it's different). Log in using the superuser credentials you created earlier.

3. ManagePersonObjects:

   Once logged in, you should see the Django admin interface. You'll find the Person model listed there. Click on it to access the Person objects. You can add, edit, or delete Person objects through this interface.

That's it! You've now registered the Person model to Django's admin interface, allowing you to manage Person objects conveniently through a web-based UI. You can repeat these steps to register other models as needed.

Some examples of Django models that you can create for practice:

1. Blog Post Model:

    class Post(models.Model):
        title = models.CharField(max_length=100)
        content = models.TextField()
        author = models.ForeignKey(User, on_delete=models.CASCADE)
        created_at = models.DateTimeField(auto_now_add=True)
        updated_at = models.DateTimeField(auto_now=True)
   
        def __str__(self):
            return self.title
   

2. Product Model for an E-commerce Site:

    class Product(models.Model):
        name = models.CharField(max_length=255)
        description = models.TextField()
        price = models.DecimalField(max_digits=10, decimal_places=2)
        quantity = models.IntegerField()
        category = models.ForeignKey('Category', on_delete=models.CASCADE)
   
        def __str__(self):
            return self.name
   

   Here Category is another Model and Product has ManytoOne(ForeignKey) relation to Category

    class Category(models.Model):
        name = models.CharField(max_length=255)
        description = models.TextField()
   
        def __str__(self):
            return self.name
   

3. Customer Model for CRM:

    class Customer(models.Model):
        name = models.CharField(max_length=255)
        email = models.EmailField()
        phone = models.CharField(max_length=15)
        address = models.TextField()
        company = models.CharField(max_length=255)
   
        def __str__(self):
            return self.name
   

4. Todo List Item Model:

    class TodoItem(models.Model):
        title = models.CharField(max_length=255)
        description = models.TextField(blank=True)
        completed = models.BooleanField(default=False)
        due_date = models.DateField(null=True, blank=True)
   
        def __str__(self):
            return self.title
   

5. Event Model for Calendar Application:

    class Event(models.Model):
        title = models.CharField(max_length=255)
        description = models.TextField(blank=True)
        location = models.CharField(max_length=255)
        start_time = models.DateTimeField()
        end_time = models.DateTimeField()
   
        def __str__(self):
            return self.title
   

These are just a few examples to get started. Depending on the requirements of your application, you can create various models to represent different types of data and relationships between them.

ORM Queries

In Django, the ORM (Object-Relational Mapping) allows you to interact with your database using Python code instead of raw SQL queries. Given the model example with a Person class in the Django app, let's explore some common ORM queries.

1. Query all persons:

all_persons = Person.objects.all()

2. Query a specific person by primary key:

person = Person.objects.get(pk=1)

3. Filter persons based on conditions:

# Persons older than 25
persons_over_25 = Person.objects.filter(age__gt=25)

# Persons with a specific blood group
persons_with_blood_group = Person.objects.filter(blood_group='A+')

4. Ordering persons:

# Order persons by age in descending order
ordered_persons = Person.objects.order_by('-age')

5. Counting records:

# Count all persons
total_persons = Person.objects.count()

6. Updating records:

# Update a person's phone number
person = Person.objects.get(pk=1)
person.phone = '1234567890'
person.save()

7. Deleting records:

# Delete a person by primary key
Person.objects.filter(pk=1).delete()

Certainly! Let's explore some additional Django ORM queries and concepts with the Person model:

8. Creating new records:

# Create a new person
new_person = Person.objects.create(
    name='John Doe',
    blood_group='O+',
    age=30,
    gender='Male',
    phone='9876543210',
    email='john.doe@example.com'
)

9. Chaining queries:

# Chain multiple queries
filtered_persons = Person.objects.filter(age__gt=25).exclude(gender='Female')

10. Using OR conditions:

from django.db.models import Q

# Persons older than 25 OR with blood group 'AB+'
persons_with_condition = Person.objects.filter(Q(age__gt=25) | Q(blood_group='AB+'))

11. Aggregation functions:

from django.db.models import Avg, Sum, Max, Min

# Calculate average age
average_age = Person.objects.aggregate(Avg('age'))

# Sum of ages
total_age = Person.objects.aggregate(Sum('age'))

# Maximum age
oldest_person = Person.objects.aggregate(Max('age'))

# Minimum age
youngest_person = Person.objects.aggregate(Min('age'))

12. Related models and queries:

# Assuming you have another model related to Person
class Address(models.Model):
    person = models.OneToOneField(Person, on_delete=models.CASCADE)
    street = models.CharField(max_length=255)
    city = models.CharField(max_length=100)

# Query persons with their associated addresses
persons_with_addresses = Person.objects.select_related('address')

13. Filtering with date fields:

from datetime import date

# Persons born after a specific date
persons_born_after = Person.objects.filter(birthdate__gt=date(1990, 1, 1))

These examples demonstrate the versatility of Django ORM, providing powerful tools for interacting with databases. Always refer to the Django documentation on models and queries for more in-depth information and options.

These are just a few examples of the many queries you can perform using Django ORM. Django's ORM simplifies database interactions by providing a high-level, Pythonic interface for working with databases, making it more readable and maintainable than raw SQL queries.