Saltar a contenido

Práctica Formularios

1. Introducción

Vamos a crear una práctica para hilar todo lo visto sobre formularios en los temas anteriores. En este tema sí que ya guardaremos la información que se envíe a través del formulario en la base de datos.

Para ello vamos a crear un nuevo proyecto ecommerce y una aplicación stock donde crearemos un modelo Product y un formulario para añadir productos a la base de datos.

2. Crear el proyecto y la aplicación

Vamos a crear primero la carpeta que contendrá el proyecto y el entorno virtual:

mkdir ecommerce
cd ecommerce
python3 -m venv venv
source venv/bin/activate  # En Windows usa `venv\Scripts\activate`

Instalamos Django en el entorno virtual:

pip install django

Ahora sí creamos el proyecto y la aplicación:

django-admin startproject ecommerce .
python manage.py startapp stock

Modificamos settings.py:

  • Añadimos stock a INSTALLED_APPS.
  • configuramos templates para que busque en una carpeta templates en la raíz del proyecto.
  • configramos static para que sirva los archivos estáticos desde una carpeta static en la raíz del proyecto.

Hacemos la migración inicial:

python manage.py migrate

Hacemos un check para asegurarnos de que todo está correcto:

python manage.py check

Por último levantamos el servidor de desarrollo para comprobar que todo funciona:

python manage.py runserver

Debemos ver la página de bienvenida de Django en:

http://localhost:8000/

Página de bienvenida de Django

Página de bienvenida de Django

3. Configuración de la aplicación

Comenzamos por delegar la URL raíz del proyecto a la aplicación stock. Modificamos ecommerce/urls.py:

urls.py
1
2
3
4
5
6
7
from django.contrib import admin
from django.urls import path, include  # Importamos include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('stock.urls')),  # Delegamos las URLs a la aplicación stock
]

Ahora añadimos las rutas a la aplicación, creamos el archivo stock/urls.py:

docs/M6/doc_6.4.md
1
2
3
4
5
6
7
8
# stock/urls.py
from django.contrib import admin
from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='index'),
]

Ahora vamos a modificar views.py para que la vista index renderice una plantilla index.html que crearemos en el siguiente paso:

views.py
1
2
3
4
5
6
# stock/views.py
from django.shortcuts import render

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

Creamos la carpeta templates en la raíz del proyecto y dentro de ella el archivo index.html, dejamos el archivo preparado para añadir el formulario más adelante:

templates/stock/index.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<!-- templates/stock/index.html -->
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Productos</title>
</head>
<body>
    <h1>Añadir Producto</h1>
    <form action="{% url 'index' %}" method="post">
        {% csrf_token %}
    </form>
</body>
</html>

Ahora comprobamos que todo sigue funcionando levantando el servidor de desarrollo:

python manage.py runserver

Debemos ver la página con el título "Añadir Producto":

http://localhost:8000/

Página de bienvenida de Django

Página de bienvenida de Django

4. Crear el modelo

Vamos a crear el modelo Product en stock/models.py:

stock/models.py
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
# stock/models.py
from django.db import models

class Product(models.Model):
    name = models.CharField(max_length=50, blank=False, null=False)
    short_description = models.CharField(max_length=100, blank=False, null=False)
    description = models.TextField(blank=False, null=False)
    stock = models.IntegerField(default=20)

    def __str__(self):
        return self.name

Y ahora sobre este modelo vamos a crear el formulario. Para ello en el fichero stock/forms.py creamos el formulario ProductForm:

stock/forms.py
1
2
3
4
5
6
7
8
# stock/forms.py
from django import forms
from .models import Product

class ProductForm(forms.ModelForm):
    class Meta:
        model = Product
        fields = '__all__'

Modificamos la vista index en stock/views.py para que utilice el formulario y guarde los datos en la base de datos:

stock/views.py
1
2
3
4
5
6
7
8
# stock/views.py
from django.shortcuts import render, redirect
from .forms import ProductForm  

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

Ahora ya podemos mostrar en el template el formulario que hemos creado. Modificamos templates/stock/index.html:

templates/stock/index.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Añadir Producto</h1>
    <form action="{% url 'index' %}" method="post">
        {% csrf_token %}
        {{ form.as_p }}
        <input type="submit" value="Crear Producto">
    </form>
</body>
</html>

Ahora preparamos la vista para cuando reciba una petición POST con los datos del formulario:

stock/views.py
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
# stock/views.py
from django.shortcuts import render, redirect
from .forms import ProductForm

def index(request):
    if request.method == 'POST':
        form = ProductForm(request.POST)
        if form.is_valid():
            form.save()
            context = {'form': form}
            return render(request, 'stock/index.html', context=context)
    else:
        form = ProductForm()
        context = {'form': form}
        return render(request, 'stock/index.html', context=context)
Antes de poder probar que todo funciona, debemos crear las migraciones del modelo y aplicarlas a la base de datos:

python manage.py makemigrations
python manage.py migrate

Ahora sí, levantamos el servidor de desarrollo:

python manage.py runserver
Y accedemos a la URL raíz:

http://localhost:8000/

Probamos a dar de alta un producto y revisamos que efectivamente se ha guardado en la base de datos.

Formulario y alta de producto

Formulario de alta de producto Alta del producto

5. Resumen

En esta práctica hemos visto cómo crear un proyecto y una aplicación en Django, cómo definir un modelo, crear un formulario basado en ese modelo y manejar la lógica para guardar los datos enviados a través del formulario en la base de datos.