Proyecto Final - Parte 4

Introducción

En esta Parte IV, nos centraremos en crear las rutas y vistas necesarias para gestionar los Contactos y las Tareas. Esto incluirá la implementación de las operaciones CRUD completas, como crear un nuevo contacto o tarea, ver el detalle de un contacto o tarea, editarlo y eliminarlo. Vamos a trabajar con las rutas en urls.py y las vistas en views.py para cada aplicación, asegurándonos de que la lógica esté correctamente implementada y los templates correspondan con la funcionalidad de cada ruta.

Desarrollo

1. Configuración de las Rutas

Lo primero que necesitamos es configurar las rutas para cada una de las operaciones CRUD (Crear, Leer, Actualizar, Eliminar) en las aplicaciones contact y todo.

1.1 Rutas en contact/urls.py

En el archivo contact/urls.py, configuraremos las rutas para los contactos, incluyendo la creación, visualización, edición y eliminación de contactos:

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='contact_index'),  # Ruta para la lista de contactos
    path('create/', views.create, name='contact_create'),  # Ruta para crear un nuevo contacto
    path('<int:id>/', views.detail, name='contact_detail'),  # Ruta para ver el detalle de un contacto
    path('<int:id>/edit/', views.edit, name='contact_edit'),  # Ruta para editar un contacto
    path('<int:id>/delete/', views.delete, name='contact_delete'),  # Ruta para eliminar un contacto
]

Ahora creamos cada uno de los métodos en views.py para manejar estas rutas. De momento suficiente que devuelvan un mensaje simple para verificar que las rutas funcionan correctamente. Pro ejemplo:

from django.http import HttpResponse

def create(request):
    return HttpResponse("Crear un nuevo contacto")

2. Completar la plantilla contact/index.html

Desde esta plantilla (template) tenemos que:

• Ver una lista de contactos
• Enlaces para ver, editar y eliminar cada contacto
• Enlace para crear un nuevo contacto
• Un formulario en la parte superior para buscar contactos por nombre o apellido

La plantilla ya la teníamos creada, pero en el cuerpo tenía mos un mensaje. Vamos a cambiar este mensaje por tlos elementos que hemos descrito anteriormente:

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

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

{% block content %}
    <h1>Contactos</h1>

    <form method="GET" action="">
        <input type="text" name="search" placeholder="Buscar por nombre o apellido">
        <button type="submit">Buscar</button>
    </form>

    <a href="{% url 'contact_create' %}">Crear Nuevo Contacto</a>

    <ul>
        {% for contact in contacts %}
            <li>
                {{ contact.name }} {{ contact.last_name }} - 
                <a href="{% url 'contact_detail' contact.id %}">Ver</a> | 
                <a href="{% url 'contact_edit' contact.id %}">Editar</a> | 
                <a href="{% url 'contact_delete' contact.id %}">Eliminar</a>
            </li>
        {% empty %}
            <li>No hay contactos disponibles.</li>
        {% endfor %}
    </ul>
{% endblock %}

Modificamos la vista index en contact/views.py para que pase los contactos al template:

from django.shortcuts import render
from .models import Contact
def index(request):
    contacts = Contact.objects.all()  # Obtener todos los contactos
    context = {'contacts': contacts}
    return render(request, 'contact/index.html', context)

Vista de la página de Contactos

En caso de tener la tabla de contactos vacía, podemos utilizar la aplicación admin para crear algunos contactos de prueba, si registramos la aplicación contact en el archivo admin.py de la aplicación contact (se hizo en el apartado anterior).

3. Creación de las Vistas en views.py

Ahora que las rutas están configuradas, necesitamos crear las vistas correspondientes en views.py para manejar la lógica de cada una de estas operaciones.

3.1 Vistas en contact/views.py

Comencemos creando las vistas para las operaciones CRUD de los contactos. Abre el archivo contact/views.py y agrega el siguiente código:

from django.shortcuts import render, get_object_or_404, redirect
from .models import Contact
from .forms import ContactForm

# Vista para la lista de contactos
def index(request):
    contacts = Contact.objects.all()  # Obtener todos los contactos
    context = {'contacts': contacts}
    return render(request, 'contact/index.html', context)

# Vista para crear un nuevo contacto
def create(request):
    if request.method == 'POST':
        form = ContactForm(request.POST)
        if form.is_valid():
            form.save()  # Guardar el nuevo contacto en la base de datos
            return redirect('contact_index')  # Redirigir a la lista de contactos
    else:
        form = ContactForm()
    context = {'form': form}
    return render(request, 'contact/create.html', context)

# Vista para ver el detalle de un contacto
def detail(request, id):
    contact = get_object_or_404(Contact, id=id)  # Obtener el contacto por ID
    context = {'contact': contact}
    return render(request, 'contact/detail.html', context)

# Vista para editar un contacto
def edit(request, id):
    contact = get_object_or_404(Contact, id=id)  # Obtener el contacto por ID
    if request.method == 'POST':
        form = ContactForm(request.POST, instance=contact)
        if form.is_valid():
            form.save()  # Actualizar el contacto en la base de datos
            return redirect('contact_index')  # Redirigir a la lista de contactos
    else:
        form = ContactForm(instance=contact)
    context = {'form': form}
    return render(request, 'contact/edit.html', context)

# Vista para eliminar un contacto
def delete(request, id):
    contact = get_object_or_404(Contact, id=id)  # Obtener el contacto por ID
    if request.method == 'POST':
        contact.delete()  # Eliminar el contacto de la base de datos
        return redirect('contact_index')  # Redirigir a la lista de contactos
    context = {'contact': contact}
    return render(request, 'contact/delete.html', context)

Explicación de las vistas de contact:

• index: Obtiene todos los contactos de la base de datos y los pasa al template contact/index.html para mostrarlos.
• create: Si el método es POST, valida el formulario y guarda el nuevo contacto. Si es GET, simplemente muestra un formulario vacío.
• detail: Muestra el detalle de un contacto en la página contact/detail.html.
• edit: Permite editar un contacto. Si el método es POST, actualiza el contacto con los nuevos datos. Si es GET, muestra el formulario con los datos actuales del contacto.
• delete: Elimina un contacto de la base de datos si se confirma la acción mediante un formulario POST.

Creación de plantillas

Hemos definido las rutas (urls.py) y las vistas (views.py) para las operaciones CRUD de Contactos y Tareas. Ahora necesitamos crear las plantillas HTML correspondientes para cada una de estas vistas. Para que los enlaces en las plantillas funcionen correctamente

4.1 Plantillas de Contactos

1. contact/index.html: Ya lo hemos creado anteriormente, pero recordemos que muestra una lista de contactos con enlaces para ver, editar y eliminar.

2. contact/create.html: Este archivo mostrará el formulario para crear un nuevo contacto:

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

{% block title %}Crear Contacto{% endblock %}

{% block content %}
    <h1>Crear Contacto</h1>
    <form method="POST">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit">Guardar</button>
    </form>
{% endblock %}

1. contact/detail.html: Mostrará los detalles de un contacto:

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

{% block title %}Detalle del Contacto{% endblock %}

{% block content %}
    <h1>{{ contact.name }} {{ contact.last_name }}</h1>
    <ul>
        <li><strong>Teléfono:</strong> {{ contact.phone }}</li>
        <li><strong>Correo:</strong> {{ contact.email }}</li>
        <li><strong>Compañía:</strong> {{ contact.company }}</li>
        <li><strong>Notas:</strong> {{ contact.notes }}</li>
        <li><strong>Fecha de creación:</strong> {{ contact.date }}</li>
    </ul>
    <a href="{% url 'contact_index' %}">Volver</a>
{% endblock %}

1. contact/edit.html: Mostrará el formulario para editar un contacto existente:

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

{% block title %}Editar Contacto{% endblock %}

{% block content %}
    <h1>Editar Contacto</h1>
    <form method="POST">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit">Guardar Cambios</button>
    </form>
    <a href="{% url 'contact_index' %}">Volver</a>
{% endblock %}

1. contact/delete.html: Confirmará la eliminación de un contacto:

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

{% block title %}Eliminar Contacto{% endblock %}

{% block content %}
    <h1>Eliminar Contacto</h1>
    <p>¿Estás seguro de que deseas eliminar a {{ contact.name }} {{ contact.last_name }}?</p>
    <form method="POST">
        {% csrf_token %}
        <button type="submit">Sí, eliminar</button>
        <a href="{% url 'contact_index' %}">Cancelar</a>
    </form>
{% endblock %}

Verificación

Con todas las rutas, vistas y plantillas creadas, es hora de verificar que todo funcione correctamente. Inicia el servidor de desarrollo de Django y navega a la página de contactos para probar cada una de las operaciones CRUD:

python manage.py runserver

Ahora ve a la lista de contactos y:

• Crea un nuevo contacto.
• Visualiza el detalle de un contacto.
• Edita un contacto existente.
• Elimina un contacto.

Todas estas operaciones deberían funcionar sin problemas, y los cambios deberían reflejarse en la base de datos.

6. Resumen

En esta Parte IV, hemos creado las rutas y vistas para las operaciones CRUD de Contactos y Tareas. Ahora, los usuarios pueden crear, ver, editar y eliminar contactos y tareas mediante las vistas y formularios que hemos configurado.