CRUD completo con ModelForms

# forms: trae las herramientas de Django para construir formularios
from django import forms
# Servicio: el modelo de la Unidad 2, importado desde este mismo directorio
from .models import Servicio

# class ServicioForm: un formulario generado automáticamente a partir del modelo Servicio
class ServicioForm(forms.ModelForm):
    # Meta: clase interna donde le dices a Django de qué modelo y qué campos generar
    class Meta:
        # model: el modelo del que se generan los campos del formulario
        model = Servicio
        # fields: lista de campos del modelo que sí aparecen en el formulario
        # "propietario" queda fuera a propósito: lo asigna la vista, no el usuario
        fields = ['titulo', 'descripcion', 'precio', 'categoria']

{# method="POST": los datos viajan ocultos dentro de la petición, no en la URL #}
<form method="POST">
  {# csrf_token: Django inserta aquí un campo oculto con un token secreto #}
  {% csrf_token %}
  {# resto de los campos del formulario #}
{# cierra el formulario #}
</form>

# LOGIN_URL: a dónde manda @login_required a quien quiere entrar sin haber iniciado sesión
# '/admin/login/': por ahora usamos la pantalla de login del panel /admin; la Semana 6 la cambia por una propia
LOGIN_URL = '/admin/login/'

# render: junta una plantilla con datos · redirect: manda al navegador a otra URL · get_object_or_404: busca un registro o responde 404
from django.shortcuts import render, redirect, get_object_or_404
# connection: datos de la conexión a la base (lo usa la vista "inicio" de la Semana 3)
from django.db import connection
# login_required: decorador que exige sesión iniciada antes de entrar a la vista
from django.contrib.auth.decorators import login_required
# Servicio: el modelo de la Semana 4, importado desde este mismo directorio
from .models import Servicio
# ServicioForm: el ModelForm que creaste en el paso 01
from .forms import ServicioForm


# inicio: la vista de la Semana 3 que muestra a qué base estás conectado (no cambia)
def inicio(request):
    # settings_dict: diccionario con ENGINE, HOST, NAME, etc. de la conexión activa
    info_bd = connection.settings_dict
    # contexto: los datos que la plantilla podrá usar
    contexto = {
        # motor: el tipo de base de datos (debe decir mysql)
        'motor': info_bd['ENGINE'],
        # host: el servidor de la base (en Aiven termina en aivencloud.com)
        'host': info_bd['HOST'],
    # cierre del diccionario contexto
    }
    # render: junta inicio.html con el contexto y devuelve la página
    return render(request, 'core/inicio.html', contexto)


# servicios: la vista del listado de la Semana 4 (no cambia)
def servicios(request):
    # .objects.all(): pide TODOS los servicios a MySQL
    lista_servicios = Servicio.objects.all()
    # entrega la lista a la plantilla con el nombre "servicios"
    return render(request, 'core/servicios.html', {'servicios': lista_servicios})


# @login_required: si nadie inició sesión, Django lo manda a LOGIN_URL (el login de /admin)
@login_required
# crear_servicio: la vista que atiende /servicios/nuevo/
def crear_servicio(request):
    # request.method: distingue si el navegador pide el formulario (GET) o lo está enviando (POST)
    if request.method == 'POST':
        # ServicioForm(request.POST): reconstruye el formulario con los datos que el usuario tecleó
        form = ServicioForm(request.POST)
        # is_valid(): corre todas las validaciones del modelo (tipos, max_length, campos obligatorios)
        if form.is_valid():
            # commit=False: crea el objeto Servicio en memoria SIN guardarlo todavía en MySQL
            nuevo = form.save(commit=False)
            # propietario: se asigna aquí, no en el formulario, para que nadie pueda falsificarlo
            nuevo.propietario = request.user
            # save(): ahora sí guarda el registro completo en MySQL
            nuevo.save()
            # redirect('servicios'): evita reenvíos duplicados si el usuario recarga la página
            return redirect('servicios')
    # si no es POST, es GET: el usuario apenas abrió la página
    else:
        # ServicioForm() sin datos: formulario vacío
        form = ServicioForm()
    # render: dibuja la plantilla, pasándole el formulario (vacío o con errores)
    return render(request, 'core/servicio_form.html', {'form': form, 'titulo_pagina': 'Nuevo servicio'})

{# base.html: el "molde" que comparten todas las páginas; las demás plantillas solo rellenan el bloque "contenido" #}
<!DOCTYPE html>
{# lang="es": el contenido de la página está en español #}
<html lang="es">
{# head: datos de la página que no se ven (título, acentos, estilos) #}
<head>
  {# charset UTF-8: permite acentos y ñ #}
  <meta charset="UTF-8">
  {# viewport: hace que la página se adapte al ancho del celular #}
  <meta name="viewport" content="width=device-width, initial-scale=1">
  {# block titulo: cada página puede cambiar el texto de la pestaña; si no lo cambia, dice "Servicios" #}
  <title>{% block titulo %}Servicios{% endblock %}</title>
  {# Play CDN de Tailwind: el mismo que usaste en la Semana 2 y en servicios.html #}
  <script src="https://cdn.tailwindcss.com"></script>
  {# style: reglas mínimas para que se vean los campos que dibuja form.as_p (Tailwind les quita el borde) #}
  <style>
    /* input, textarea, select: borde gris, esquinas redondeadas, relleno y ancho completo en cada campo */
    input, textarea, select { border: 1px solid #94a3b8; border-radius: .5rem; padding: .4rem .6rem; width: 100%; }
    /* label: cada etiqueta en su propia línea y en negritas */
    label { display: block; font-weight: 600; margin-bottom: .2rem; }
    /* .errorlist: la lista de errores que genera Django; se pinta en rojo */
    .errorlist { color: #dc2626; font-size: .9rem; }
    /* .helptext: los textos de ayuda de Django (ej. reglas de contraseña), en gris y pequeños */
    .helptext { color: #64748b; font-size: .8rem; display: block; }
  {# cierra el bloque de estilos #}
  </style>
{# cierra el head #}
</head>
{# body: lo que se ve; max-w-2xl + mx-auto centran el contenido con un ancho máximo #}
<body class="max-w-2xl mx-auto py-10 px-6 bg-white text-slate-900">
  {# block contenido: aquí cada página (listado, formulario, eliminar) pone lo suyo #}
  {% block contenido %}{% endblock %}
{# cierra el body #}
</body>
{# cierra el documento HTML #}
</html>

{# extends: esta página usa el molde base.html y solo rellena sus bloques (debe ser la primera etiqueta) #}
{% extends 'core/base.html' %}

{# block titulo: el texto de la pestaña ("Nuevo servicio" o "Editar servicio") #}
{% block titulo %}{{ titulo_pagina }}{% endblock %}

{# block contenido: todo lo que va dentro del body de base.html #}
{% block contenido %}
  {# h1: muestra "Nuevo servicio" o "Editar servicio" según lo que mande la vista #}
  <h1 class="text-2xl font-bold mb-4">{{ titulo_pagina }}</h1>
  {# method="POST": este formulario envía datos que van a modificar la base de datos #}
  <form method="POST" class="space-y-4 max-w-md">
    {# csrf_token: obligatorio en todo formulario POST de Django #}
    {% csrf_token %}
    {# form.as_p: dibuja cada campo envuelto en un párrafo, con sus errores si los hay #}
    {{ form.as_p }}
    {# type="submit": botón que dispara el envío del formulario #}
    <button type="submit" class="bg-blue-600 hover:bg-blue-500 text-white font-semibold px-4 py-2 rounded-lg">
      {# texto visible dentro del botón #}
      Guardar
    {# cierra el botón de enviar #}
    </button>
    {# enlace para regresar al listado sin guardar nada #}
    <a href="{% url 'servicios' %}" class="ml-3 text-slate-600 underline">Cancelar</a>
  {# cierra el formulario: todo lo de arriba se envía junto al dar clic #}
  </form>
{# endblock: fin del bloque contenido #}
{% endblock %}

{# extends: el listado también usa el molde base.html (debe ser la primera etiqueta) #}
{% extends 'core/base.html' %}

{# block contenido: lo que va dentro del body de base.html #}
{% block contenido %}
  {# h1: título de la página #}
  <h1 class="text-2xl font-bold mb-6">Servicios</h1>
  {# enlace a la ruta con name="crear_servicio" (la registras en el paso 05) #}
  <a href="{% url 'crear_servicio' %}" class="inline-block mb-4 bg-blue-600 text-white px-4 py-2 rounded-lg">+ Nuevo servicio</a>
  {# table w-full: la tabla ocupa todo el ancho; border dibuja el contorno gris #}
  <table class="w-full border border-slate-200 rounded-lg overflow-hidden">
    {# thead: la fila de encabezados, con fondo gris claro #}
    <thead class="bg-slate-100">
      {# tr: la única fila del encabezado #}
      <tr>
        {# th: encabezado de la columna del nombre #}
        <th class="text-left px-4 py-2">Servicio</th>
        {# th: encabezado de la columna del precio #}
        <th class="text-left px-4 py-2">Precio</th>
        {# th: NUEVO, encabezado de la columna con los enlaces Editar / Eliminar #}
        <th class="text-left px-4 py-2">Acciones</th>
      {# cierra la fila del encabezado #}
      </tr>
    {# cierra el encabezado de la tabla #}
    </thead>
    {# tbody: el cuerpo de la tabla, donde van las filas de datos #}
    <tbody>
      {# for: repite la fila una vez por cada servicio de la lista #}
      {% for servicio in servicios %}
      {# tr: una fila por servicio; border-t dibuja la línea gris de arriba #}
      <tr class="border-t border-slate-200">
        {# td: celda con el título del servicio #}
        <td class="px-4 py-2">{{ servicio.titulo }}</td>
        {# td: celda con el precio; el $ es texto fijo antes del número #}
        <td class="px-4 py-2">${{ servicio.precio }}</td>
        {# td: celda de las acciones #}
        <td class="px-4 py-2">
          {# url 'editar_servicio' servicio.pk: arma la dirección /servicios/<id>/editar/ #}
          <a href="{% url 'editar_servicio' servicio.pk %}" class="text-blue-600 underline">Editar</a>
          {# url 'eliminar_servicio' servicio.pk: arma la dirección /servicios/<id>/eliminar/ #}
          <a href="{% url 'eliminar_servicio' servicio.pk %}" class="text-red-600 underline ml-3">Eliminar</a>
        {# cierra la celda de las acciones #}
        </td>
      {# cierra la fila de este servicio #}
      </tr>
      {# empty: lo que se muestra si la lista no tiene ningún servicio #}
      {% empty %}
      {# fila única con el aviso; colspan="3" la estira a lo ancho de las 3 columnas #}
      <tr><td colspan="3" class="px-4 py-6 text-center text-slate-500">Todavía no hay servicios.</td></tr>
      {# endfor: fin de la repetición #}
      {% endfor %}
    {# cierra el cuerpo de la tabla #}
    </tbody>
  {# cierra la tabla #}
  </table>
{# endblock: fin del bloque contenido #}
{% endblock %}

# @login_required: solo usuarios con sesión iniciada pueden editar
@login_required
# pk: la clave primaria (id) que Django extrae del pedazo <int:pk> de la URL (paso 05)
def editar_servicio(request, pk):
    # busca el Servicio con ese id; si no existe, responde 404 automáticamente
    servicio = get_object_or_404(Servicio, pk=pk)
    # si el usuario envió el formulario con cambios, la petición llega como POST
    if request.method == 'POST':
        # instance=servicio: le dice al formulario "actualiza ESTE registro, no crees uno nuevo"
        form = ServicioForm(request.POST, instance=servicio)
        # is_valid(): revisa tipos de dato y campos obligatorios
        if form.is_valid():
            # save(): al tener instance=, guarda los cambios sobre el mismo registro (UPDATE, no INSERT)
            form.save()
            # redirect: regresa al listado después de guardar
            return redirect('servicios')
    # si no es POST, es GET: se acaba de abrir la pantalla de edición
    else:
        # instance=servicio sin datos de POST: precarga el formulario con los valores actuales
        form = ServicioForm(instance=servicio)
    # render: reutiliza servicio_form.html con el título "Editar servicio"
    return render(request, 'core/servicio_form.html', {'form': form, 'titulo_pagina': 'Editar servicio'})

# @login_required: solo usuarios con sesión iniciada pueden borrar
@login_required
# eliminar_servicio: recibe el pk (id) desde la URL /servicios/<pk>/eliminar/
def eliminar_servicio(request, pk):
    # busca el registro exacto a borrar, igual que en editar_servicio
    servicio = get_object_or_404(Servicio, pk=pk)
    # solo se borra si llega un POST (el botón de confirmar), nunca con un simple GET
    if request.method == 'POST':
        # delete(): borra la fila de MySQL de verdad
        servicio.delete()
        # redirect: regresa al listado, ya sin el registro borrado
        return redirect('servicios')
    # si es GET, solo muestra la pantalla de "¿Seguro?"; todavía no borra nada
    return render(request, 'core/servicio_confirm_delete.html', {'servicio': servicio})

{# extends: la pantalla de confirmación también usa el molde base.html #}
{% extends 'core/base.html' %}

{# block titulo: el texto de la pestaña del navegador #}
{% block titulo %}Eliminar servicio{% endblock %}

{# block contenido: lo que va dentro del body de base.html #}
{% block contenido %}
  {# h1: pregunta de confirmación con el título del servicio a borrar #}
  <h1 class="text-2xl font-bold mb-4">¿Eliminar "{{ servicio.titulo }}"?</h1>
  {# p: aviso de que la acción no se puede deshacer #}
  <p class="mb-4 text-slate-600">Esta acción no se puede deshacer.</p>
  {# este formulario no tiene campos de texto: solo confirma la acción con un POST #}
  <form method="POST">
    {# csrf_token: obligatorio en todo formulario POST de Django #}
    {% csrf_token %}
    {# botón rojo (bg-red-600) que envía el POST y confirma el borrado #}
    <button type="submit" class="bg-red-600 hover:bg-red-500 text-white font-semibold px-4 py-2 rounded-lg">
      {# texto visible dentro del botón rojo #}
      Sí, eliminar
    {# cierra el botón de confirmar #}
    </button>
    {# enlace de vuelta a la lista, para cancelar sin borrar nada #}
    <a href="{% url 'servicios' %}" class="ml-3 text-slate-600 underline">Cancelar</a>
  {# cierra el formulario de confirmación #}
  </form>
{# endblock: fin del bloque contenido #}
{% endblock %}

# path: función para declarar una ruta URL y a qué vista apunta
from django.urls import path
# views: el módulo con todas las funciones-vista de esta app
from . import views

# urlpatterns: la lista de rutas que Django revisa, en orden, para cada URL
urlpatterns = [
    # '': la página de inicio de la Semana 3 ("Hola desde MySQL"); no la borres
    path('', views.inicio, name='inicio'),
    # /servicios/: la vista de listado que ya existía desde la Semana 3
    path('servicios/', views.servicios, name='servicios'),
    # /servicios/nuevo/: formulario en blanco para crear un registro
    path('servicios/nuevo/', views.crear_servicio, name='crear_servicio'),
    # /servicios/<int:pk>/editar/: <int:pk> captura el id de la URL y lo pasa como argumento a la vista
    path('servicios/<int:pk>/editar/', views.editar_servicio, name='editar_servicio'),
    # /servicios/<int:pk>/eliminar/: mismo patrón, para la pantalla de confirmación de borrado
    path('servicios/<int:pk>/eliminar/', views.eliminar_servicio, name='eliminar_servicio'),
# cierra la lista urlpatterns
]

# Revisa que no haya errores de escritura en settings, urls, vistas ni modelos
python manage.py check
# Arranca el servidor en http://127.0.0.1:8000 (ocupa la terminal; se detiene con Ctrl + C)
python manage.py runserver

# Compara tus modelos con las migraciones guardadas; si responde "No changes detected", no hay nada que hacer
python manage.py makemigrations
# Solo si el comando anterior creó un archivo (ej. core/migrations/0002_...py): aplícalo en tu base de Aiven
python manage.py migrate
# Lista las migraciones de core: todas deben salir con [X] (aplicadas)
python manage.py showmigrations core

# Muestra a qué repo apunta hoy tu proyecto (debe salir el u2s4-… de la Semana 4)
git remote -v
# Cambia "origin" al repo nuevo de esta práctica; pega TU URL (set-url porque origin ya existe)
git remote set-url origin https://github.com/TU_USUARIO/u3s5-hernandez-nunez-maria-jose.git
# Confirma que ahora apunta al u3s5-… (sale dos veces: fetch y push)
git remote -v
# Lista lo que cambió: NO deben aparecer .env, venv/ ni staticfiles/
git status
# Agrega todos los archivos nuevos y modificados (incluye core/migrations/ si hubo migración)
git add .
# Crea el commit con un mensaje que describe el cambio
git commit -m "U3S5: CRUD completo de Servicio con ModelForms"
# Sube la rama main al repo nuevo; -u la deja vinculada para que después baste con "git push"
git push -u origin main

# 1) instala requirements.txt  2) junta los estáticos para whitenoise  3) aplica migraciones en Aiven; "&&" = "si el anterior salió bien, sigue"
pip install -r requirements.txt && python manage.py collectstatic --noinput && python manage.py migrate

# arranca gunicorn con miproyecto/wsgi.py; cambia "miproyecto" por la carpeta que tiene settings.py
gunicorn miproyecto.wsgi

# Imprime una clave aleatoria de ~67 caracteres; cópiala completa y pégala como valor de SECRET_KEY en Render
python -c "import secrets; print(secrets.token_urlsafe(50))"

# nombre de la base de Aiven (cópialo de tu .env local)
DB_NAME=defaultdb
# usuario de Aiven (cópialo de tu .env local)
DB_USER=avnadmin
# contraseña real de Aiven (cópiala de tu .env local)
DB_PASSWORD=tu-password-real-de-aiven
# host real de Aiven, sin https:// (cópialo de tu .env local)
DB_HOST=tu-host-real.aivencloud.com
# puerto real de Aiven (cópialo de tu .env local)
DB_PORT=12345
# clave NUEVA generada con el comando de arriba, solo para Render
SECRET_KEY=pega-aqui-la-clave-nueva
# en producción SIEMPRE False
DEBUG=False
# tu dominio de esta práctica: SIN https:// y SIN / al final
ALLOWED_HOSTS=u3s5-hernandez-nunez-maria-jose.onrender.com
# tu dirección completa: CON https:// y SIN / al final
CSRF_TRUSTED_ORIGINS=https://u3s5-hernandez-nunez-maria-jose.onrender.com

# 1. Render descarga tu repo u3s5-… de GitHub
==> Cloning from https://github.com/tu-usuario/u3s5-hernandez-nunez-maria-jose
# 2. empieza tu Build Command
==> Running build command 'pip install -r requirements.txt && ...'
# 3. pip instaló Django, PyMySQL, gunicorn, whitenoise, python-decouple...
Successfully installed Django-5.1.4 PyMySQL-1.1.1 gunicorn-23.0.0 ...
# 4. collectstatic juntó tus CSS/JS e imágenes
127 static files copied to '/opt/render/project/src/staticfiles', 381 post-processed.
# 5. migrate se conectó a Aiven; si no cambiaste modelos, no hay nada pendiente (correcto)
No migrations to apply.
# 6. el build terminó bien
==> Build successful 🎉
# 7. arranca tu Start Command
==> Running 'gunicorn miproyecto.wsgi'
# 8. el estado cambia a "Live" en verde: tu sitio ya responde
==> Your service is live 🎉

# forms: trae las herramientas de Django para construir formularios
from django import forms
# ValidationError: la excepción que Django usa para reportar un error de validación
from django.core.exceptions import ValidationError
# Servicio: el modelo de la Unidad 2, importado desde este mismo directorio
from .models import Servicio


# ServicioForm: el mismo ModelForm del paso 01, ahora con una regla extra
class ServicioForm(forms.ModelForm):
    # Meta: configuración del formulario (de qué modelo sale y qué campos muestra)
    class Meta:
        # model: el formulario se genera a partir del modelo Servicio
        model = Servicio
        # fields: los campos que aparecen en el formulario, en este orden
        fields = ['titulo', 'descripcion', 'precio', 'categoria']

    # clean_precio: Django lo llama automáticamente al validar el campo "precio"
    def clean_precio(self):
        # self.cleaned_data: diccionario con los valores ya convertidos a su tipo de Python
        precio = self.cleaned_data['precio']
        # regla propia: rechazar precios en cero o negativos, algo que DecimalField no revisa solo
        if precio <= 0:
            # ValidationError: si se dispara, el formulario se considera inválido y muestra este mensaje
            raise ValidationError('El precio debe ser mayor a 0.')
        # si no se disparó el error, hay que devolver el valor limpio para que el formulario lo use
        return precio

# agrega el forms.py modificado al área de preparación de Git
git add core/forms.py
# crea el commit con un mensaje que explica el cambio
git commit -m "Agregar validacion personalizada: precio debe ser mayor a 0"
# sube el commit a GitHub; Render detecta el push y redespliega solo
git push

<!-- # : título principal del README (lo primero que se ve en GitHub) -->
# Proyecto Django — [Tus Nombres y Apellidos]

<!-- ## : subtítulo de la sección con el enlace a producción -->
## Demo en vivo (producción)
<!-- la URL pública de tu Web Service u3s5-… en Render -->
https://u3s5-hernandez-nunez-maria-jose.onrender.com

<!-- ## : subtítulo con lo que se hizo esta semana -->
## Semana 5 — CRUD completo con ModelForms
<!-- primera línea de la descripción de la práctica -->
Crear, editar y eliminar un Servicio desde pantallas propias
<!-- segunda línea de la descripción de la práctica -->
(sin usar /admin), con validacion personalizada en el precio.

# agrega solo el README modificado al área de preparación de Git
git add README.md
# crea el commit con un mensaje que explica el cambio
git commit -m "Actualizar README con avance de semana 5"
# sube el commit al repo u3s5-…; Render detecta el push y redespliega solo
git push