Django Job Application Tutorial – Day 1: From Setup to Your First Web App

Introduction to Django and Python Web Development

What is Django?

Django is a high-level Python web framework that enables rapid development of secure and maintainable websites. Built by experienced developers, Django takes care of much of the hassle of web development, so you can focus on writing your app without needing to reinvent the wheel.

Understanding Web Framework Architecture: MVC vs MVT

Before diving into Django development, it’s essential to understand the architectural patterns that modern web frameworks use.

MVC (Model-View-Controller) Pattern

The MVC pattern is a traditional software design pattern used in web development:

  • Model: Manages data and business logic
  • View: Handles the presentation layer (what users see)
  • Controller: Acts as an intermediary between Model and View, handling user requests

Popular frameworks like Ruby on Rails and ASP.NET MVC use this pattern.

MVT (Model-View-Template) Pattern

Django uses the MVT pattern, which is similar to MVC but with a twist:

  • Model: Defines your database structure (just like MVC)
  • View: Contains business logic and handles user requests (like Controller in MVC)
  • Template: Manages the presentation layer (like View in MVC)

The key difference?

Django’s framework itself acts as the controller, managing the flow between components automatically.

Controller → Template + URL routing layer.

Which is used in Modern Tech?

Both are used but MVT style + component based UI is more modern now because:

TechPattern
DjangoMVT
Flask + JinjaMVT style
Next.js / ReactComponent based (beyond MVC)
Node ExpressMVC
Laravel PHPMVC
Spring JavaMVC

Final simple answer:

  • Django uses MVT
  • Modern tech stack uses MVT + Component based UI (React/Next) more commonly than pure MVC nowadays

Why Choose Django in 2025?

Django remains one of the most popular Python web frameworks for several compelling reasons:

  1. Batteries-Included Philosophy: Built-in admin panel, ORM, authentication, and more
  2. Security First: Protection against SQL injection, XSS, CSRF, and clickjacking out of the box
  3. Scalability: Powers Instagram, Pinterest, and Mozilla
  4. Active Community: Extensive documentation and third-party packages
  5. Django REST Framework: Seamless API development for modern applications
  6. Async Support: Native asynchronous views since Django 3.1
  7. Current Trends: AI/ML integration, headless CMS, and microservices architecture

Python Web Framework Landscape 2025

While Django dominates enterprise development, here’s how it compares to other Python frameworks:

  • Django: Full-stack, opinionated, best for complex applications
  • Flask: Lightweight, flexible, ideal for microservices
  • FastAPI: Modern, fast, perfect for APIs and async operations
  • Pyramid: Flexible, scalable, suitable for both small and large apps

Day 1: Setting Up Your Django Project and Building the Foundation

Today, we’ll set up our development environment, create a Django project, build our database model, and create our first web pages. By the end of Day 1, you’ll have a functional job application form with database integration.

Step 1: Environment Setup and Django Installation

Prerequisites:

  • Python 3.8 or higher installed
  • PyCharm IDE (or any code editor)
  • Basic Python knowledge

Installation Steps:

  1. Create a new project in PyCharm and open the terminal
  2. Install Django using pip: pip install django
  3. Verify installation: django-admin --version

Step 2: Create Your Django Project

The Django project serves as the container for your entire web application.

django-admin startproject mysite .

Note the dot (.) at the end – this creates the project in your current directory instead of creating a nested folder.

Project Structure Created:

mysite/
├── mysite/
│   ├── __init__.py
│   ├── settings.py      # Project configuration
│   ├── urls.py          # URL routing
│   ├── asgi.py          # ASGI server config
│   └── wsgi.py          # WSGI server config
└── manage.py            # Command-line utility

Step 3: Create Your First Django App

Django projects contain apps – reusable components that handle specific functionality.

python manage.py startapp job_application

Register your app in mysite/settings.py:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'job_application',  # Add your app here
]

Test your installation:

python manage.py runserver

Visit http://127.0.0.1:8000/ – you should see Django’s welcome page!

To stop the server: Press Ctrl + C

Step 4: Understanding the Bottom-Up Approach

Django follows a bottom-up development approach:

Database → Python (Backend Logic) → Frontend (Templates)

This means we build our data structure first, then create the logic to handle it, and finally design the user interface.

Step 5: Creating Your Database Model

Models define your database structure using Python classes. Django’s ORM (Object-Relational Mapping) translates these classes into database tables.

Open job_application/models.py and create your Form model:

from django.db import models

class Form(models.Model):
    """
    Job Application Form Model
    Stores applicant information
    """
    first_name = models.CharField(max_length=80)
    last_name = models.CharField(max_length=80)
    email = models.EmailField()
    date = models.DateField()
    occupation = models.CharField(max_length=80)
    
    def __str__(self):
        """
        String representation of the model
        Displays in admin panel
        """
        return f"{self.first_name} {self.last_name}"

Understanding Model Fields:

  • CharField: Text field with maximum length
  • EmailField: Validates email format automatically
  • DateField: Stores date values
  • __str__: Returns human-readable representation

Step 6: Database Migrations

Migrations are Django’s way of propagating model changes to your database schema.

# Create migration files
python manage.py makemigrations

# Apply migrations to database
python manage.py migrate

What happens:

  1. makemigrations: Creates migration files based on model changes
  2. migrate: Applies migrations to create/update database tables

Your SQLite database (db.sqlite3) now contains a job_application_form table!

Step 7: Creating Your First View

Views contain the business logic that processes requests and returns responses.

Open job_application/views.py:

from django.shortcuts import render

def index(request):
    """
    Main page view
    Renders the job application form
    """
    return render(request, "index.html")

Step 8: Creating Templates

Templates are HTML files that define how your pages look.

Create template structure:

  1. Create a templates folder inside job_application
  2. Create index.html inside the templates folder

Path: job_application/templates/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Job Application Form</title>
</head>
<body>
    <h1>Welcome to Our Job Application Portal</h1>
    <p>Please fill out the form below to apply.</p>
</body>
</html>

Step 9: URL Configuration (Routing)

URLs map web addresses to views. Django uses two levels of URL configuration.

Create app-level URLs:

Create job_application/urls.py:

from django.urls import path
from . import views

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

Update project-level URLs:

Modify mysite/urls.py:

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

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('job_application.urls')),  # Include app URLs
]

Test your setup:

python manage.py runserver

Visit http://127.0.0.1:8000/ – you should now see your custom page!

Step 10: Creating Django Forms

Django forms handle user input validation and data cleaning.

Create job_application/forms.py:

from django import forms

class ContactForm(forms.Form):
    """
    Form for job application input
    Mirrors the Model structure but for frontend
    """
    first_name = forms.CharField(max_length=80)
    last_name = forms.CharField(max_length=80)
    email = forms.EmailField()
    date = forms.DateField()
    occupation = forms.CharField(max_length=80)

Key Difference:

  • models.py: Database structure
  • forms.py: Frontend form validation

Step 11: Processing Form Data

Update job_application/views.py to handle form submissions:

from django.shortcuts import render
from .forms import ContactForm

def index(request):
    """
    Handle GET and POST requests
    """
    if request.method == 'POST':
        form = ContactForm(request.POST)
        
        if form.is_valid():
            # Extract cleaned data
            first_name = form.cleaned_data['first_name']
            last_name = form.cleaned_data['last_name']
            email = form.cleaned_data['email']
            date = form.cleaned_data['date']
            occupation = form.cleaned_data['occupation']
            
            # Debug print (remove in production)
            print(f"Application from: {first_name} {last_name}")
    
    return render(request, "index.html")

Understanding the Flow:

  1. User submits form via POST request
  2. Django validates data using ContactForm
  3. is_valid() checks if data meets requirements
  4. cleaned_data provides sanitized values

Step 12: Building the HTML Form with Bootstrap

Update index.html with a professional form design:

{% extends 'base.html' %}

{% block content %}
<h1 class="mt-4 mb-4">Job Application Form</h1>

<form method="post">
    {% csrf_token %}
    
    <div class="form-group mb-4">
        <label for="first_name">First Name:</label>
        <input class="form-control" type="text" id="first_name" 
               name="first_name" required>
    </div>
    
    <div class="form-group mb-4">
        <label for="last_name">Last Name:</label>
        <input class="form-control" type="text" id="last_name" 
               name="last_name" required>
    </div>
    
    <div class="form-group mb-4">
        <label for="email">Email:</label>
        <input class="form-control" type="email" id="email" 
               name="email" required>
    </div>
    
    <div class="form-group mb-4">
        <label for="date">Available Start Date:</label>
        <input class="form-control" type="date" id="date" 
               name="date" required>
    </div>
    
    <div class="form-group mb-4">
        <label>Current Occupation:</label>
        <br>
        <div class="btn-group-vertical" id="occupation">
            <input class="btn-check" type="radio" id="employed" 
                   name="occupation" value="employed" required>
            <label class="btn btn-outline-secondary" for="employed">
                Employed
            </label>
            
            <input class="btn-check" type="radio" id="unemployed" 
                   name="occupation" value="unemployed" required>
            <label class="btn btn-outline-secondary" for="unemployed">
                Unemployed
            </label>
            
            <input class="btn-check" type="radio" id="self-employed" 
                   name="occupation" value="self-employed" required>
            <label class="btn btn-outline-secondary" for="self-employed">
                Self-Employed
            </label>
            
            <input class="btn-check" type="radio" id="student" 
                   name="occupation" value="student" required>
            <label class="btn btn-outline-secondary" for="student">
                Student
            </label>
        </div>
    </div>
    
    <button class="btn btn-secondary mb-4" type="submit">Submit</button>
    
    {% if messages %}
    <div class="alert alert-success">
        {% for message in messages %}
            {{ message }}
        {% endfor %}
    </div>
    {% endif %}
</form>
{% endblock %}

Step 13: Creating a Base Template

Base templates reduce code duplication using template inheritance.

Create job_application/templates/base.html:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Job Application Portal</title>
    <link rel="stylesheet" 
          href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        {% block content %}
        {% endblock %}
    </div>
    
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
</body>
</html>

Template Inheritance:

  • {% block content %}: Defines replaceable section
  • {% extends 'base.html' %}: Inherits from base template
  • Child templates replace blocks with custom content

Day 1 Summary: What You’ve Accomplished

Today you’ve built a solid foundation for Django web development:

Installed Django and created your first project
Understood MVT architecture and how Django organizes code
Created database models using Django ORM
Built views to handle business logic
Designed templates with Bootstrap styling
Configured URL routing for navigation
Implemented forms for user input validation
Set up template inheritance for cleaner code

Key Concepts Mastered

  • Django Project Structure: apps, models, views, templates, URLs
  • MVT Pattern: How data flows through Django applications
  • ORM Basics: Creating models and running migrations
  • Form Handling: Processing POST requests safely
  • Template System: Inheritance and dynamic content rendering

What’s Coming on Day 2?

Tomorrow, we’ll take your application to the next level:

  • Save form data to database using Django ORM
  • Send email notifications when forms are submitted
  • Build admin interface for managing applications
  • Customize admin panel with search and filters
  • Create additional pages (About page with navigation)
  • Deploy your application (bonus content)

Preparation for Day 2

Before tomorrow’s session:

  1. Ensure your Day 1 code runs without errors
  2. Test form submission and check console output
  3. Review Django’s messages framework documentation
  4. Create a Gmail account for email testing (or use existing)

Troubleshooting Common Issues

Error: “No module named ‘job_application'”

Solution: Make sure you added 'job_application', to INSTALLED_APPS in settings.py

Error: “TemplateDoesNotExist”

Solution: Check that your templates folder is inside the job_application directory

Error: “CSRF verification failed”

Solution: Always include {% csrf_token %} inside your <form> tags

Port Already in Use

Solution: Change the port: python manage.py runserver 8001


Learned Today

  1. Always use virtual environments for Python projects
  2. Run migrations after every model change
  3. Use meaningful names for models, views, and URLs
  4. Include CSRF tokens in all POST forms
  5. Validate user input with Django forms
  6. Follow MVT separation of concerns
  7. Use template inheritance to reduce code duplication

Ready for Day 2? Get your Gmail credentials ready, and we’ll build email notifications, admin panels, and polish your application into a production-ready system!

Topics Covered: Django tutorial, Python web framework, MVT pattern, Django forms, Django ORM, web development 2025, Django for beginners, Django project setup, Django models, Django templates, Django URL routing, Bootstrap Django integration

Leave a Reply

Your email address will not be published. Required fields are marked *