Novatillo en Python: 18.- Creación de la aplicación Tienda (menú de pestañas, tarjetas con Bootstrap5 y easy-thumbnails)

viernes, 16 de junio de 2023

18.- Creación de la aplicación Tienda (menú de pestañas, tarjetas con Bootstrap5 y easy-thumbnails)

En este capítulo desarrollaremos parte de la aplicación Tienda. Aquí mostraremos los diferentes productos que pretendemos vender en ella. A través de un menú de pestañas mostraremos los diferentes juegos que tenemos para las diferentes plataformas. Luego mostraremos los juegos de cada plataforma a través de tarjetas ("cards") de bootstrap5, cuatro por cada fila. Quedará algo similar a esto:

La creación de la aplicación es muy similar al resto que hemos visto hasta ahora:

1.- Creamos la nueva aplicación que gestionará la tienda.

$ python manage.py startapp Tienda

2.- Una vez creada la registramos:

PracticaDjango/PracticaDjango/settings.py

...
INSTALLED_APPS = [
    # Nuestras aplicaciones
    'Proyecto_web_app.apps.ProyectoWebAppConfig',
    'Servicios.apps.ServiciosConfig',
    'Blog.apps.BlogConfig',
    'Contacto.apps.ContactoConfig',
    'Tienda.apps.TiendaConfig',
    # Aplicaciones de terceros
    'django_bootstrap5',
    # Mapa del Sitio
    'django.contrib.sites', # add sites to installed_apps
    'django.contrib.sitemaps',  # add Django sitemaps to installed app
    # PostgreSQL
    'django.contrib.postgres',
    # Aplicaciones por defecto
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

MIDDLEWARE = [
...

Ahora lo que necesitamos es que cuando se vaya a la URL /tienda/, Django debe buscar la ruta en el archivo urls.py pero de la aplicación "Tienda", no en la del proyecto. Vamos a hacer las modificaciones necesarias.

Primeramente en el archivo:

PracticaDjango/PracticaDjango/urls.py:

from django.contrib import admin
from django.urls import path, include
# Para registrar los archivos de las imagenes y poder verlas
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('Proyecto_web_app.urls')),
    path('servicios/', include('Servicios.urls')),
    path('blog/', include('Blog.urls')),
    path('contacto/', include('Contacto.urls')),
    path('sitemap.xml', sitemap, {'sitemaps': sitemaps}, name='django.contrib.sitemaps.views.sitemap'),
    path('tienda/', include('Tienda.urls')),
]
urlpatterns+=static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

y luego en archivo que gestiona las urls de la tienda. Entra en el directorio de la aplicación Tienda, crea el archivo urls.py y añade el siguiente código:

PracticaDjango/Tienda/urls.py:

from django.urls import path
# load views of these applications.
from . import views

app_name = 'Tienda'

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

Más tarde crearemos la vista y la plantilla a renderizar. Pero antes vamos a preparar otras cosas.

Creación de modelos para el catálogo de productos.

3.- Como vamos a vender juegos de consola necesitamos definir dos cosas. Una categoría para registrar las diferentes consolas para las que vendemos los juegos y luego otra categoría para los propios juegos en si. Es decir, la categoría de las consolas será (ps4, ps5, xbox y nintendo) y luego las categorías de los juegos tendrán sus propios campos como nombre del juego, categoría, que es la consola a la que pertenecen, una pequeña descripción, precio, si están disponibles en el stock de la tienda y una imagen. Los productos tendrán también un campo en el que se registrará la fecha en la que fue creada y la fecha en la que se actualiza. Para ello creamos el archivo models.py dentro de la aplicación Tienda y codificamos lo anterior de la siguiente forma:

PracticaDjango/Tienda/models.py:

from django.db import models

# Create your models here.

# Creamos dos modelos para la categoría del producto (tipo de consola)
# y para el producto (el juego en si).

class CategoriaProducto(models.Model):
    '''Registrará las diferentes consolas para las que vendemos juegos'''
    nombre = models.CharField(max_length=200)
    slug = models.SlugField(max_length=200, unique=True)

    class Meta:
        ordering = ["nombre"]
        indexes = [
            models.Index(fields=["nombre"]),
        ]
        verbose_name = "categoriaProducto"
        verbose_name_plural = "categoriasProductos"

    def __str__(self):
        return self.nombre
    

class Producto(models.Model):
    """Registra los propios juegos en si."""

    nombre = models.CharField(max_length=200)
    slug = models.SlugField(max_length=200)
    categoria = models.ForeignKey(
        CategoriaProducto, on_delete=models.CASCADE, related_name="categoria_productos"
    )
    descripcion = models.CharField(blank=True)
    precio = models.DecimalField(max_digits=10, decimal_places=2)
    stock = models.BooleanField(default=True)
    # hay que tener instalado la libreria pillow para poder subir imagenes
    imagen = models.ImageField(upload_to="Tienda", blank=True)
    created = models.DateTimeField(auto_now_add=True)
    updated = models.DateTimeField(auto_now=True)

    class Meta:
        ordering = ["nombre"]
        indexes = [
            models.Index(fields=["id", "slug"]),
            models.Index(fields=["nombre"]),
            models.Index(fields=["-created"]),
        ]
        verbose_name = "producto"
        verbose_name_plural = "productos"

    def __str__(self):
        return self.nombre

Importante: Para trabajar con las imágenes de los juegos es absolutamente imprescindible que tengas instalada la librería Pillow.(pip install Pillow)

El catálogo de nuestra tienda consistirá en una serie de juegos que estarán organizados en diferentes categorías que serán los diferentes tipos de consolas. Cada juego tendrá su nombre, una descripción opcional, una imagen opcional, un precio y si existe disponibilidad o stock del mismo.

En el código superior hemos creado los modelos CategoríaProducto y Producto. El modelo de CategoríaProducto consta de un campo de nombre y un campo único de "slug" (único implica la creación de un índice). En la clase Meta del modelo de CategoríaProducto, hemos definido un índice para el campo de nombre.

Los campos del modelo de Producto son los siguientes:

• categoria: Una clave foránea (ForeignKey) al modelo de Categoría. Esta es una relación de uno a muchos: un producto pertenece a una categoría y una categoría contiene múltiples productos.

• nombre: El nombre del producto.

• slug: El "slug" para este producto para construir URLs bonitas.

• imagen: Una imagen opcional del producto.

• descripcion: Una descripción opcional del producto.

• precio: Este campo utiliza el tipo decimal.Decimal de Python para almacenar un número decimal de precisión fija. El número máximo de dígitos (incluyendo los lugares decimales) se establece utilizando el atributo max_digits y los lugares decimales con el atributo decimal_places.

• stock: Un valor booleano que indica si el producto está disponible o no. Se utilizará para habilitar/deshabilitar el producto en el catálogo.

• created: Este campo almacena cuándo se creó el objeto.

• updated: Este campo almacena cuándo se actualizó el objeto.

Para el campo de precio, usamos DecimalField en lugar de FloatField para evitar problemas de redondeo.

En la clase Meta del modelo de Producto, hemos definido un índice de múltiples campos para los campos id y slug. Ambos campos están indexados juntos para mejorar el rendimiento de las consultas que utilizan los dos campos.

Siempre utiliza DecimalField para almacenar cantidades monetarias. FloatField utiliza internamente el tipo float de Python, mientras que DecimalField utiliza el tipo Decimal de Python. Al usar el tipo Decimal, evitarás problemas de redondeo de los números flotantes.

Planeamos consultar productos en principio por su id aunque dejamos abierta la puerta para hacerlo con su "slug". Hemos añadido un índice para el campo de nombre y otro para el campo de creación. Hemos utilizado un guión antes del nombre del campo para definir el índice con un orden descendente.

Registrando los modelos en el panel de administración.

4.- Puesto que tenemos que meter los tipos de consolas y los juegos de las diferentes plataformas, lo vamos a hacer a través del panel de Administración de Django, por lo cual creamos el correspondiente archivo admin.py dentro de la aplicación Tienda. Importamos los modelos que hemos creado y luego añadimos el siguiente código.

PracticaDjango/Tienda/admin.py:

from django.contrib import admin

from .models import *

# Register your models here.

class CategoriaProductoAdmin(admin.ModelAdmin):
    list_display = ["nombre", "slug"]
    prepopulated_fields = {"slug": ("nombre",)}


class ProductoAdmin(admin.ModelAdmin):
    list_display = ["nombre", "slug", "precio", "stock", "created", "updated"]
    list_filter = ["stock", "created", "updated"]
    list_editable = ["precio", "stock"]
    prepopulated_fields = {"slug": ("nombre",)}

# Registramos ambas tablas y clases
admin.site.register(CategoriaProducto, CategoriaProductoAdmin)
admin.site.register(Producto, ProductoAdmin)

Recuerda que se utiliza el atributo prepopulated_fields para especificar campos donde el valor se establece automáticamente usando el valor de otros campos. Como has visto anteriormente, esto es conveniente para generar "slugs".

Se usa el atributo list_editable en la clase ProductoAdmin para establecer los campos que se pueden editar desde la página de visualización de la lista del sitio de administración. Esto te permitirá editar múltiples filas a la vez.

Cualquier campo en list_editable también debe estar incluido en el atributo list_display, ya que solo los campos mostrados pueden ser editados.

Construyendo las vistas.

5.- Necesitamos crear el archivo de vistas que renderizará la plantilla y los datos de la tienda. Para ello creamos el archivo views.py:

PracticaDjango/Tienda/views.py:

from django.shortcuts import render

# Como trabajamos con productos vamos a importarlos
from Tienda.models import Producto

# Create your views here.

def tienda(request):
    productos = Producto.objects.filter(stock=True)
    # carga en la variable productos todos los juegos que hayamos introducido a través
    # del panel de administración de Django.
    contexto = {
        "productos": productos
    }
    
    return render(request, "Tienda/tienda.html", contexto)

En el código anterior, hemos realizado la búsqueda con el filtro stock=True para devolver solamente los productos que estén disponibles.

Puesto que anteriormente hemos creado el archivo models.py y realizado modificaciones, antes de seguir adelante tenemos que realizar las migraciones. Para ello ejecuta en el shell de python las siguientes instrucciones:

python manage.py makemigrations

python manage.py migrate

Para luego probar que todo funciona aquí deberías parar un momento y entrar en el panel de administración de Django y poner algunos datos de consolas y juegos. Si quieres usar la plantilla html que voy a explicar luego tienes que crear cuatro tipos de consolas (PS4, PS5, XBOX y NINTENDO) dentro del apartado CategoriaProductos y luego al menos en una de las categorías poner cuatro juegos. (Dentro del campo Productos)

6.- Ahora viene lo más importante que es crear la plantilla tienda.html. No te asustes porque aunque es un poco larga, es muy sencilla de explicar e iremos paso a paso. Lo primero es crear el directorio templates/Tienda dentro de la aplicación Tienda. Luego creamos el archivo tienda.html. Pero antes de teclear código, tenemos que borrar todo lo que creamos al principio en la aplicación Proyecto_web_app y que hacia referencia a la tienda cuando teníamos la web en pruebas. Borraremos en urls.py la línea que hace referencia a el path de la tienda, en views.py la vista de la tienda, y en el template la plantilla tienda.html. Todo esto está dentro de Proyecto_web_app. Ahora introducimos el código html de la página de la tienda, ya en su aplicación correspondiente.

PracticaDjango/Tienda/templates/Tienda/tienda.html

<!--Cargamos la plantilla base-->
{% extends "Proyecto_web_app/base.html" %}

<!-- Establecemos el titulo de la página -->
{% block title %}Tienda{% endblock %}

<!-- Definimos su contenido -->
{% block content %}
<h1 class="text-center">Elige tu Consola.</h1>

<div class="container">
  <div class="bg-dark">
    <ul class="nav nav-tabs">
      <li class="nav-item">
        <a class="nav-link active" id="ps4-tab" data-bs-toggle="tab" href="#ps4" role="tab" aria-controls="ps4"
          aria-selected="true">PS4</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="ps5-tab" data-bs-toggle="tab" href="#ps5" role="tab" aria-controls="ps5"
          aria-selected="false">PS5</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="xbox-tab" data-bs-toggle="tab" href="#xbox" role="tab" aria-controls="xbox"
          aria-selected="false">Xbox</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="xbox-tab" data-bs-toggle="tab" href="#nintendo" role="tab" aria-controls="xbox"
          aria-selected="false">Nintendo</a>
      </li>
    </ul>
  </div>

  <div class="tab-content">
    <div class="tab-pane fade show active" id="ps4" role="tabpanel" aria-labelledby="ps4-tab">
      <h3>Juegos PS4</h3>
      <div class="row g-4">
        {% for producto in productos %}
        {% if producto.categoria_id == 1 %}
        <div class="col-md-3">
          <div class="card h-100" style="width:200px">
            <img class="card-img-top" src="{{producto.imagen.url}}" alt="Card image">
            <div class="card-body">
              <h4 class="card-title">{{producto.nombre}}</h4>
              <p class="card-text">{{producto.precio}} €</p>
              <a href="#" class="btn btn-primary">See Profile</a>
            </div>
          </div>
        </div>
        {% endif %}
        {% endfor %}
      </div>
    </div>

    <div class="tab-pane fade" id="ps5" role="tabpanel" aria-labelledby="ps5-tab">
      <h3>Juegos PS5</h3>
      <!-- Contenido para juegos PS5 -->
      <div class="row g-4">
        {% for producto in productos %}
          {% if producto.categoria_id == 2 %}
            <div class="col-md-3">
              <div class="card h-100" style="width:200px">
                <img class="card-img-top" src="{{producto.imagen.url}}" alt="Card image">
                <div class="card-body">
                  <h4 class="card-title">{{producto.nombre}}</h4>
                  <p class="card-text">{{producto.precio}} €</p>
                  <a href="#" class="btn btn-primary">See Profile</a>
                </div>
              </div>
            </div>
          {% endif %}
        {% endfor %}
      </div>
    </div>
    <div class="tab-pane fade" id="xbox" role="tabpanel" aria-labelledby="xbox-tab">
      <h3>Juegos Xbox</h3>
      <!-- Contenido para juegos Xbox -->
      <div class="row g-4">
        {% for producto in productos %}
        {% if producto.categoria_id == 3 %}
        <div class="col-md-3">
          <div class="card h-100" style="width:200px">
            <img class="card-img-top" src="{{producto.imagen.url}}" alt="Card image">
            <div class="card-body">
              <h4 class="card-title">{{producto.nombre}}</h4>
              <p class="card-text">{{producto.precio}} €</p>
              <a href="#" class="btn btn-primary">See Profile</a>
            </div>
          </div>
        </div>
        {% endif %}
        {% endfor %}
      </div>
    </div>
    <div class="tab-pane fade" id="nintendo" role="tabpanel" aria-labelledby="xbox-tab">
      <h3>Juegos Nintendo</h3>
      <!-- Contenido para juegos Nintendo -->
      <div class="row g-4">
        {% for producto in productos %}
        {% if producto.categoria_id == 4 %}
        <div class="col-md-3">
          <div class="card h-100" style="width:200px">
            <img class="card-img-top" src="{{producto.imagen.url}}" alt="Card image">
            <div class="card-body">
              <h4 class="card-title">{{producto.nombre}}</h4>
              <p class="card-text">{{producto.precio}} €</p>
              <a href="#" class="btn btn-primary">See Profile</a>
            </div>
          </div>
        </div>
        {% endif %}
        {% endfor %}
      </div>
    </div>
  </div>
</div>
{% endblock %}

Esta plantilla de Django es utilizada para renderizar una página web que muestra diferentes juegos de consolas divididos en pestañas. A continuación, explicaré cada parte de la plantilla en detalle:

Carga de la plantilla base: