Proyecto Final - Parte 3¶

Introducción¶

En esta Parte III, vamos a crear los formularios utilizando ModelForm para los modelos Contact y Todo, los cuales nos permitirán realizar operaciones CRUD desde las plantillas. Además, crearemos la estructura básica de las plantillas y el archivo base.html, que servirá como layout general para todas las páginas de nuestra aplicación.

También comenzaremos a implementar la carpeta static para los archivos CSS y las plantillas HTML para Contactos y Tareas.

Desarrollo¶

1. Creación de los Formularios¶

Comenzaremos creando los formularios para los modelos Contact y Todo utilizando ModelForm.

1.1 Formulario `ContactForm` en `contact/forms.py`¶

Crea el archivo forms.py dentro de la aplicación contact, si no existe, y agrega el siguiente código para crear el formulario de contacto:

from django import forms
from .models import Contact

class ContactForm(forms.ModelForm):
    class Meta:
        model = Contact
        fields = '__all__'

Explicación:

ContactForm hereda de forms.ModelForm, lo que le permite crear un formulario basado en el modelo Contact.
En la clase Meta, se especifica el modelo (model = Contact) y los campos que se incluirán en el formulario (fields = ['name', 'last_name', 'phone', 'mobile', 'email', 'company', 'notes']).

1.2 Formulario `TodoForm` en `todo/forms.py`¶

Haz lo mismo para la aplicación todo. Crea el archivo forms.py en la aplicación todo y agrega el siguiente código:

from django import forms
from .models import Todo

class TodoForm(forms.ModelForm):
    class Meta:
        model = Todo
        fields = '__all__'

Explicación:

TodoForm también hereda de forms.ModelForm y se basa en el modelo Todo.
La clase Meta define los campos que estarán disponibles en el formulario para las tareas.

2. Creación del Layout Base¶

Ahora, vamos a crear la plantilla base para el proyecto, la cual contendrá la estructura común de las páginas, como el encabezado, el menú de navegación y el pie de página. Este layout será utilizado por todas las demás plantillas de la aplicación.

2.1 Estructura de `base.html`¶

Dentro de la carpeta templates/layout, crea un archivo base.html con el siguiente contenido:

templates/layout/base.html
{% load static %}
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Agenda | {% block title %}{% endblock %}</title>
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
    <header>
        <nav>
            {% include 'layout/partials/menu.html' %}
        </nav>
    </header>

    <main>
        {% block content %}
        {% endblock %}
    </main>

    <footer>
        <p>&copy; 2025 Mi Gestor Personal</p>
    </footer>

    <script src="{% static 'js/scripts.js' %}"></script>
</body>
</html>

Si no los has creado todavía, tienes que crear los archivos estáticos style.css y scripts.js en las carpetas correspondientes. De momento los archivos puedes dejarlos vacios.

Explicación:

La estructura básica de HTML5 está definida en este archivo.
Utiliza el bloque {% block title %} para permitir que cada página individual tenga su propio título.
La hoja de estilos y los scripts son referenciados mediante {% static %}, lo que permite cargar archivos estáticos en Django.
El bloque {% block content %} es donde se insertará el contenido específico de cada página que herede de base.html.

2.2 Creación de `menu.html`¶

Dentro de la carpeta templates/layout/partials, crea un archivo menu.html con el siguiente código:

/templates/layouts/partials/menu.html
<ul>
    <li><a href="{% url 'home' %}">Inicio</a></li>
    <li><a href="{% url 'contact_index' %}">Contactos</a></li>
    {% comment %}<li><a href="{% url 'todo_index' %}">Tareas</a></li>{% endcomment %}
</ul>

El último enlace a tareas lo he comentado porque aún no hemos creado la vista ni la ruta correspondiente, pero en cuanto lo hagamos, solo tienes que descomentar esa línea.

Errores rutas

Recuerda que si utlizas la expresión {% url 'nombre_de_la_ruta' %} en las plantillas, debes asegurarte de que las rutas estén definidas correctamente en los archivos urls.py de las aplicaciones. Si no están definidas, obtendrás un error NoReverseMatch al intentar cargar la página.

Explicación:

Este menú de navegación contiene enlaces a las páginas principales de Inicio, Contactos y Tareas.
Se utiliza la etiqueta {% url %} para generar las URLs correspondientes a las vistas definidas en Django.

3. Creación de las Plantillas Específicas¶

Ahora que tenemos el base.html como plantilla base, vamos a crear las plantillas específicas para las páginas de Inicio, Contactos y Tareas.

3.1 Página `index.html`¶

En la carpeta templates/, crea un archivo index.html con el siguiente contenido:

templates/index.html
{% extends 'layout/base.html' %}

{% block title %}Inicio{% endblock %}

{% block content %}
    <h1>Bienvenido a tu Gestor Personal</h1>
    <p>Gestiona tus contactos y tareas fácilmente.</p>
{% endblock %}

Esta página será la página de entrada (landing) a la aplicación.

Explicación:

La página index.html hereda de base.html y sobreescribe el bloque title y content para mostrar el contenido de la página de inicio.

3.2 Página `contact/index.html`¶

En la carpeta templates/contact, crea un archivo index.html con el siguiente contenido:

templates\contact\index.html
{% extends 'layout/base.html' %}

{% block title %}Contactos{% endblock %}

{% block content %}
    <h1>Lista de Contactos</h1>
    <ul class="list">
        <li>aquí debe ir el listado de contactos</li>
    </ul>
{% endblock %}

Explicación:

Esta página muestra una lista de contactos, donde cada contacto tiene enlaces para ver, editar y eliminar.
Utilizamos los bloques de base.html para definir el título y el contenido.

4. Configuración de las Rutas¶

Ahora, necesitamos configurar las rutas para estas plantillas. Asegúrate de que las URLs están bien definidas en los archivos urls.py de cada aplicación.

4.1 Rutas en `contact/urls.py`¶

En la aplicación contact, modifica el archivo urls.py de la siguiente manera:

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='contact_index'),
    # quedan pendientes las rutas CRUD
]

Ahora definimos la función index en la vista de contacts para que cargue el template apropiado.

/contact/views.py
from django.shortcuts import render

def index(request):
    context = {}
    return render(request, 'contact/index.html', context)

4.2 Rutas en `todo/urls.py`¶

En la aplicación todo, configura las rutas de manera similar:

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='todo_index'),
    # quedan pendientes las rutas CRUD
]

5. Verificación y Resumen¶

Podemos poner el servidor en marcha y comprobar que la página inicial (index) funciona. En el menú nos aparecerán las opciones inicio y contactos. La opción de tareas la hemos comentado porque aún no hemos creado la vista ni la ruta correspondiente. Compruba que los dos enlaces funcionan correctamente.

En esta Parte III, hemos creado los formularios para Contactos y Tareas, y también la plantilla base (base.html) que será usada en todas las vistas. Luego, configuramos las rutas para las páginas de Inicio, Contactos y Tareas, y comenzamos a estructurar el CSS y los archivos estáticos.

Proyecto Final - Parte 3¶

Introducción¶

Desarrollo¶

1. Creación de los Formularios¶

1.1 Formulario ContactForm en contact/forms.py¶

1.2 Formulario TodoForm en todo/forms.py¶

2. Creación del Layout Base¶

2.1 Estructura de base.html¶

2.2 Creación de menu.html¶

3. Creación de las Plantillas Específicas¶

3.1 Página index.html¶

3.2 Página contact/index.html¶

4. Configuración de las Rutas¶

4.1 Rutas en contact/urls.py¶

4.2 Rutas en todo/urls.py¶

5. Verificación y Resumen¶

1.1 Formulario `ContactForm` en `contact/forms.py`¶

1.2 Formulario `TodoForm` en `todo/forms.py`¶

2.1 Estructura de `base.html`¶

2.2 Creación de `menu.html`¶

3.1 Página `index.html`¶

3.2 Página `contact/index.html`¶

4.1 Rutas en `contact/urls.py`¶

4.2 Rutas en `todo/urls.py`¶