🧱 Building Your First Django App: A Practical Guide to MVT Architecture

April 25, 2020 by dumira

When building modern web applications, keeping your database structure, business logic, and user interface tangled together is a recipe for maintenance disaster. To prevent this code spaghetti, frameworks rely on architectural patterns.

While many developers are familiar with the classic MVC (Model-View-Controller) pattern, Django implements its own flavor known as the MVT (Model-View-Template) architecture.

🏗️ Understanding MVT Architecture

Instead of relying on a dedicated third-party controller script to manage communications, Django handles the controller operations internally. This leaves developers to focus on three modular layers:

  • The Model (Data Layer): The single source of truth about your data. It defines the logical structure of your database tables using native Python classes and handles communication with the database via Django’s built-in Object-Relational Mapper (ORM).
  • The View (Logic Layer): The brain of your application. It receives incoming HTTP requests, fetches the appropriate records from the database using the Model layer, executes business logic, and passes that data forward to be rendered.
  • The Template (Presentation Layer): Controls what the user actually sees in their browser. It consists of standard HTML files mixed with the Django Template Language (DTL) to dynamically inject data passed down from the View.

Here is how a request travels through these components in a real-world cycle:

🛠️ Step-by-Step Implementation Guide

Let’s convert this theory into a working local application. Follow these 6 steps to configure a project, run migrations, and bring the MVT pattern to life.

Step 1: Install Django & Initialize the Project

First, open your terminal to set up your project structure and spin up a new application module.

Bash

# Install Django
pip install django

# Create a new project named 'todo_project'
django-admin startproject todo_project
cd todo_project

# Create a modular app named 'tasks' inside the project
python manage.py startapp tasks

Next, open todo_project/settings.py and register your new tasks app inside the INSTALLED_APPS list so Django recognizes it:

Python

# todo_project/settings.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'tasks',  # Registering your custom app
]

Step 2: Define the Data Model (M)

Open tasks/models.py. We will design our Task table here. Django will automatically convert this Python class into a database table.

Python

# tasks/models.py
from django.db import models

class Task(models.Model):
    title = models.CharField(max_length=200)
    completed = models.BooleanField(default=False)

    def __str__(self):
        return self.title

Step 3: Run Database Migrations

Whenever you create or modify a model, you must inform the database. Django generates SQL script templates (migrations) and applies them automatically. Run these commands in your terminal:

Bash

# 1. Inspect models and generate the migration files
python manage.py makemigrations

# 2. Execute the migrations against the database (SQLite by default)
python manage.py migrate

Step 4: Write the View Logic (V)

Now, let’s create the functional controller logic. Open tasks/views.py and write a view that queries our task database using the Django ORM and passes the collection downward.

Python

# tasks/views.py
from django.shortcuts import render
from .models import Task

def task_list(request):
    # Fetch all records out of the database using the ORM
    all_tasks = Task.objects.all()
    
    # Store the dataset inside a context dictionary
    context = {'tasks': all_tasks}
    
    # Render the HTML template, injecting the context data
    return render(request, 'tasks/task_list.html', context)

Step 5: Wire Up the URL Routes

Before the view can process traffic, we must map an internet address route to it. This configuration requires modifying two separate urls.py files for maximum modularity.

First, create a new routing file directly inside your app folder:

Python

# tasks/urls.py
from django.urls import path
from . import views

urlpatterns = [
    path('', views.task_list, name='task_list'),  # Routes the root path of this app to our view
]

Next, link this app-specific routing file to the primary project router:

Python

# todo_project/urls.py
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('tasks/', include('tasks.urls')),  # Includes the app urls under the /tasks/ prefix
]

Step 6: Build the HTML Template (T)

Django looks for templates within a specifically structured folder tree inside your application module. Create the following directory hierarchy inside your tasks app folder: templates/tasks/.

Inside that nested path, create a file named task_list.html:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Django Tasks</title>
</head>
<body>
    <h1>Task Dashboard</h1>
    <ul>
        {% for task in tasks %}
            <li>
                <strong>{{ task.title }}</strong> - 
                {% if task.completed %}
                    <span>✅ Done</span>
                {% else %}
                    <span>⏳ Pending</span>
                {% endif %}
            </li>
        {% empty %}
            <li>No tasks assigned yet!</li>
        {% endfor %}
    </ul>
</body>
</html>

🚀 Test Run Your Application

Everything is completely wired up. Launch the native development web server from your terminal:

Bash

python manage.py runserver

Open your browser and navigate to http://127.0.0.1:8000/tasks/. You will see your dynamic Task Dashboard live, running successfully on top of Django’s clean MVT separation.