Cómo funciona la arquitectura MVT de Django: Un análisis profundo de Modelos, Vistas y Plantillas

Django es un marco de alto nivel de Python. Es popular por su simplicidad y eficiencia en la construcción de aplicaciones web robustas.

En el corazón de la arquitectura de Django se encuentra el patrón Modelo-Vista-Plantilla (MVT). Tener un buen entendimiento de cómo interactúan los Modelos, Vistas y Plantillas es crucial si buscas aprovechar al máximo el poder de Django.

Ya sea que seas completamente nuevo en Django o un principiante, este artículo servirá como una guía exhaustiva que te mostrará cómo funcionan y se relacionan estos componentes para crear aplicaciones web dinámicas.

Para hacerlo aún más comprensible, construiremos una aplicación simple para ayudarte a entender mejor la interconectividad de estos componentes.

Si ya estás emocionado, ¡vamos directo al grano!

Esto es lo que cubriremos:

• Requisitos previos

• ¿Qué es la Arquitectura MVT?

• El Componente Modelo

• El Componente Vista

• El Componente Plantilla

• Diagrama que Muestra el Flujo de Trabajo MVT

• Analogía del Mundo Real de MVT

• Poniéndolo Todo Junto en un Proyecto

• Conclusión

Prerrequisitos

Para seguir, necesitas:

• Comprensión básica de cómo funcionan las aplicaciones web, incluida la arquitectura cliente-servidor.

• Conocimientos básicos de Python.

¿Qué es la arquitectura MVT?

El patrón MVT es el enfoque de Django para organizar la base de código y el flujo de trabajo de una aplicación web. Los componentes que conforman esta arquitectura son el Modelo, Vista y Plantilla. Cada componente realiza funciones específicas y luego pasa el proceso a los otros componentes para que hagan las suyas.

Veamos rápidamente los componentes con las funciones específicas que realizan:

• Modelo: También conocido como la capa de datos, gestiona los datos e interactúa con la base de datos.

• Vista: También conocida como la capa de lógica, actúa como intermediaria, maneja la lógica y gestiona el flujo de datos.

• Plantilla: También conocida como la capa de presentación, renderiza contenido HTML en la interfaz de usuario.

Ahora que tienes una idea sobre los componentes y sus roles en una aplicación Django, examinaremos extensamente cada componente y cómo interactúan en la arquitectura.

El componente Modelo

Los modelos gestionan la estructura y la interacción de los datos dentro de una aplicación Django, lo que los convierte en la base de las aplicaciones Django debido al papel crítico que desempeñan los datos.

Los modelos de Django utilizan una característica poderosa llamada Mapeo Objeto-Relacional (ORM), que cierra la brecha entre una base de datos relacional y el código Python. Convierte los objetos de Python (clases) en tablas de base de datos, sus atributos en columnas y las instancias en filas dentro de esas tablas.

Una gran ventaja del ORM es que te permite interactuar con la base de datos utilizando objetos de Python en lugar de escribir consultas SQL. Piensa en ello como un traductor que convierte un idioma en otro para que una audiencia lo entienda. En este caso, el ORM traduce el código Python en comandos SQL que la base de datos puede ejecutar, y viceversa.

Los modelos de Django encapsulan toda la lógica relacionada con la base de datos y definen la estructura de tu base de datos, actuando como un plano para los datos que deseas almacenar.

Formato general de un modelo de Django

En Django, cada modelo sigue una forma particular de declaración. Aquí está la estructura básica de una declaración de modelo:

class <model_name>(models.Model):
    <field_name> = models.<field_type>(<optional_field_characteristics>)

Desglosemoslo:

• class: la palabra clave utilizada para definir un modelo en Django.

• model_name: el nombre del modelo.

• models.Model: la clase base de la cual hereda la clase del modelo.

• field_name: el nombre de la columna de la base de datos.

• field_type: se refiere al tipo de datos que contiene el campo como charField, BooleanField y así sucesivamente.

• optional_field_characteristics: se utiliza para definir aún más el comportamiento del campo, como max_length, default, y así sucesivamente.

Ejemplo de Modelo

Habiendo conocido todo acerca de los modelos hasta este punto, construiremos uno para una lista de tareas. Típicamente contiene el título de la tarea, la descripción y un indicador de si las tareas se completaron o no.

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

En este modelo:

• Tarea es el nombre del modelo.

• El modelo Task tiene tres campos:

  • title: Un CharField que almacena texto, con una longitud máxima de 100 caracteres.

  • description: Un TextField para texto más largo.

  • completed: Un BooleanField que almacena un valor True o False, con un valor predeterminado de False.

El Componente de Vista

Las vistas de Django son responsables de procesar las solicitudes de los usuarios y devolver respuestas. Actúan como el puente entre el Modelo y la Plantilla al recopilar datos de los objetos del Modelo, realizar operaciones lógicas sobre ellos (como consultas basadas en ciertos criterios) y luego pasar los datos a la plantilla para su visualización.

Las vistas pueden ser escritas como funciones o basadas en clases, dependiendo de la complejidad y requisitos de tu aplicación.

Formato general de una vista de Django

Aquí está la estructura básica de una vista:

def <view_name>(request):
    # La lógica de la vista va aquí....
    return render(request, <template>, <context>)

Vamos a analizarlo:

• nombre_vista: el nombre de la función de la vista.

• request: la solicitud HTTP enviada por el cliente al servidor de Django, que puede ser activada desde envíos de formularios o al hacer clic en un botón.

• return render: se utiliza para generar la respuesta HTML. Toma:

  • request: el objeto de solicitud, que contiene información sobre la solicitud entrante.

  • plantilla: el archivo de plantilla a renderizar.

  • contexto: contiene variables que estarán disponibles en la plantilla, generalmente se presenta en forma de diccionario.

Ejemplo de Vista

Continuando con nuestra Lista de Tareas, así es como se vería nuestra vista:

def task_list(request):
    # Aquí va la lógica...
    return render(request, <template>, {'tasks': tasks})

El Componente de Plantilla

Las plantillas de Django son responsables de renderizar la salida HTML final en el navegador. Definen cómo se debe presentar los datos, utilizando una combinación de HTML y el lenguaje de plantillas de Django.

El lenguaje de plantillas de Django implica el uso de etiquetas de plantilla {% %} y variables de plantilla {{ }} que te permiten ingresar en modo Django en tu plantilla HTML. En este modo, puedes acceder a variables definidas en tus Vistas y utilizar estructuras de control dentro de tu plantilla.

Las plantillas también pueden ser estilizadas utilizando CSS o cualquiera de tus frameworks de CSS favoritos para hacer que tu interfaz de usuario sea más presentable.

Ejemplo de Plantilla

Nuestra plantilla es un archivo HTML normal con el lenguaje de plantillas de Django. Así es como se vería nuestra plantilla de Lista de Tareas:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task List</title>
</head>
<body>
    <h1>Task List</h1>
    <ul>
        {% for task in tasks %}
            <li>{{ task.title }} - {{ task.completed|yesno:"Done,Not Done" }}</li>
        {% empty %}
            <p>No tasks available.</p>
        {% endfor %}
    </ul>
</body>
</html>

En esta plantilla:

• El bucle for itera a través de cada tarea en la lista de tareas (recuerda que fue pasada como contexto en nuestras vistas).

• Para cada tarea, muestra el título de la tarea y su estado de completado (ya sea “Hecho” o “No hecho”).

• Si la lista de tareas está vacía, el bloque {% empty %} muestra un mensaje de respaldo que dice “No hay tareas disponibles”.

Diagrama que muestra el Flujo de Trabajo MVT

Este diagrama muestra cómo fluye los datos dentro de la arquitectura MVT de Django:

Analogía del Mundo Real de MVT

Imagina que vas a un restaurante y haces un pedido de tu comida favorita. Detrás de escena, el restaurante tiene un libro de recetas que detalla cómo se debe preparar cada plato. El chef utiliza las recetas para preparar tu comida exactamente como la pediste. Una vez esté lista, el camarero te entrega la comida de forma presentable.

Así como un chef sigue la receta para crear el plato, la Vista utiliza el Modelo para recopilar y procesar datos. Finalmente, al igual que el camarero entrega el plato, la Plantilla asegura que la salida final se presente de manera clara y atractiva al usuario.

Uniendo Todo en un Proyecto

Esta sección te guiará, desde el principio hasta el final, sobre cómo configurar la Lista de Tareas que usamos como ejemplo en el artículo. Al final, deberías tener una aplicación funcional con la arquitectura MVT en pleno funcionamiento.

Instalar Python

Primero, asegúrate de tener Python instalado. Puedes visitar Sitio Web Oficial de Python para descargar la última versión de Python.

Configurar el Proyecto y la Aplicación de Django

A continuación, instala Django. Puedes instalarlo usando pip:

pip install django

Crea una carpeta y ábrela en tu editor de código favorito.

Crea un nuevo proyecto y una aplicación de Django ejecutando los siguientes comandos en tu terminal, uno después del otro:

django-admin startproject myproject 
cd myproject
django-admin startapp myapp

Definir el Modelo

En tu myapp/models.py:

from django.db import models

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

Crear un Formulario

Necesitamos un formulario de Django basado en el modelo Task, así que crearemos uno usando Django ModelForm.

En tu myapp, crea un archivo, nómbralo forms.py, e inserta este código:

from django import forms
from .models import Task

class TaskForm(forms.ModelForm):
    class Meta:
        model = Task
        fields = ['title', 'description', 'completed']

En este código:

• Task se importa de .models.

• class TaskForm(forms.ModelForm): Esto crea una nueva clase llamada TaskForm, que es una subclase de forms.ModelForm.

• class Meta:: es una clase especial utilizada por ModelForm de Django para proporcionar configuración para el formulario. La clase Meta le dice a Django cómo crear el formulario especificando el modelo asociado y los campos a incluir en el formulario.

• model = Task: especifica el modelo en el que se basa el formulario. En este caso, el formulario se basa en el modelo Task.

• fields = ['title', 'description', 'completed']: especifica qué campos del modelo Task deben incluirse en el formulario. Esto le permite controlar qué campos del modelo aparecen en el formulario, y se puede personalizar para incluir solo ciertos campos, en lugar de todos los campos en el modelo.

Cree la Vista

En su myapp/views.py, inserte este código:

from django.shortcuts import render,redirect
from .models import Task
from .forms import TaskForm

def task_list(request):
    tasks = Task.objects.all()    # Recuperar todas las tareas

    if request.method == 'POST':    # Manejar envíos de formularios
        form = TaskForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('task_list')  # Redirigir para evitar envíos duplicados
    else:
        form = TaskForm()

    # Pasar tareas y el formulario a la plantilla
    return render(request, 'task_list.html', {'tasks': tasks, 'form': form})

En esta vista,

• TaskForm se importa desde forms.

• El código revisa si el método de solicitud es POST, lo que indica que el usuario ha enviado un formulario.

• Si el método es POST, crea una instancia de TaskForm usando los datos enviados (request.POST).

• El formulario luego se valida usando form.is_valid(), y si es válido, se guarda en la base de datos.

• Después de guardar, el usuario es redirigido a la página de lista de tareas para evitar envíos duplicados.

Define la Plantilla

En tu directorio myapp, crea una carpeta templates. Dentro de la carpeta templates, crea un archivo y nómbralo task_list.html. Necesitamos agregar un elemento de formulario que recolecte las entradas del usuario y las muestre en una lista en la interfaz de usuario.

En el archivo HTML task_list, tenemos:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task List</title>
</head>
<body>
    <h1>Task List</h1>
    <ul>
        {% for task in tasks %}
            <li>{{ task.title }} - {{ task.completed|yesno:"Done,Not Done" }}</li>
        {% empty %}
            <p>No tasks available.</p>
        {% endfor %}
    </ul>

    <h2>Add a New Task</h2>
    <form method="post">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit">Add Task</button>
    </form>
</body>
</html>

En el código del formulario añadido:

• Creamos un formulario HTML con el método POST para enviar datos. Incluye un {% csrf_token %} para proteger contra ataques de CSRF.

• Los campos del formulario se renderizan utilizando {{ form.as_p }}, que muestra cada campo dentro de una etiqueta <p>.

• Finalmente, se proporciona un botón de envío etiquetado como “Agregar Tarea”, permitiendo al usuario enviar los datos del formulario.

Estructura de Carpetas

Habiendo llegado a este punto, es importante verificar si estás configurando tu aplicación de la manera correcta. Así es como debería verse la estructura de tu carpeta/archivo:

└── 📁myproject
    └── 📁myapp
        └── 📁__pycache__
        └── 📁migrations
        └── 📁templates
            └── task_list.html
        └── __init__.py
        └── admin.py
        └── apps.py
        └── forms.py
        └── models.py
        └── tests.py
        └── urls.py
        └── views.py
    └── 📁myproject
        └── 📁__pycache__
        └── __init__.py
        └── asgi.py
        └── settings.py
        └── urls.py
        └── wsgi.py
    └── db.sqlite3
    └── manage.py

Configurar la URL del Proyecto

En tu myproject/urls.py, incluye la URL en tu myapp:

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

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

Agregar la Aplicación a la Configuración del Proyecto

Agrega tu myapp a la lista de Aplicaciones instaladas en tu myproject/settings.py:

INSTALLED_APPS = [
    'myapp',      # agregamos nuestra aplicación myapp
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

Ejecutar el Servidor

Aplica la migración y ejecuta el servidor ingresando estos comandos:

python manage.py migrate

python manage.py runserver

Visita http://127.0.0.1:8000/ en tu navegador para probar tu aplicación.

Vista Final

Así es como se ve nuestra aplicación de lista de tareas en el navegador después de agregar algunas tareas usando el formulario. Puedes realizar más mejoras en el estilo de la plantilla según tu deseo.

Conclusión

En este artículo, aprendiste acerca de los componentes en la arquitectura MVT de Django, cómo interactúan entre sí y cómo hacen que las experiencias web sean fluidas. También construimos un proyecto simple para ver cómo funciona en la práctica, y espero que ahora lo entiendas mejor.

Si disfrutaste leyendo este artículo, puedes seguirme en X o conectarte conmigo en LinkedIn para más artículos y publicaciones sobre programación.

¡Nos vemos en el próximo!