Creación de Plantillas con Django y Tailwind CSS

Resumen

Para agregar estilos, se integró Tailwind CSS usando un CDN. Se colocó el código del CDN en base.html y se añadió un ejemplo para verificar su funcionamiento. Se utilizan clases de Tailwind para mejorar la apariencia y organización de los elementos en el HTML.

¿Cómo optimizamos la interfaz con Hyper UI?

Hyper UI facilita el uso de HTML preparado para Tailwind CSS. Se copió y pegó código HTML de Hyper UI en el template de la lista de productos, adaptando nombres y precios de productos, y validando la existencia de imágenes antes de mostrarlas. Se comentó el botón de “agregar al carrito” usando tags de comentarios de Django Templates para futuras funcionalidades.

Adrian Ernesto German Becerra

student•

Si ocupaste ayuda de como mostrar la lista de productos, recuerda que en el archivo view donde creamos el ProductListView al profe le falto enseñar la importación:

from products.models import Product

aunque es fácil de saber que hace falta una importación aquí se las dejo por si lo necesitan 👍

Enrique Alejandro Terrazas Huamaní

student•

Gracias, esa me faltaba para que corra el programa

Michael Aguillón

student•

A mi no me funcionaba con ese, pero si me funcipnó el siguiente:

from .<u>models</u> import <u>Product</u>

Carlos Palacios

student•

list_product.html

<h2>Lista de productos</h2>
<ul>
    {% for product in products %}

        <li>
            {{product.name}}
            <p>{{product.price}}</p>
            {% if product.photo %}
            <img src="{{product.photo.url}}" alt="{{product.name}}" style="max-height: 100px;">
            {% endif %}
        </li>
    {% endfor %}
</ul>
```\<h2>Lista de productos\</h2>\<ul>    {% for product in products %}
&#x20;       \<li>            {{product.name}}            \<p>{{product.price}}\</p>            {% if product.photo %}            \<img src="{{product.photo.url}}" alt="{{product.name}}" style="max-height: 100px;">            {% endif %}        \</li>    {% endfor %}\</ul>

Edward Rodríguez

student•

Rigoberto Maldonado

student•

solo cambia esto: success_url = reverse_lazy('add_products') por success_url = reverse_lazy('list_products') y listo campeón

Bryan Castano

student•

Hola Si, asi esta quedano mi Coffee Shop con los Estilos de TailWindCSS .

home/

Para /products/<slug:slug>/

En el <form> localhost:8000 + products/add/

En m iBase de Datos :

sqlite> .head on

sqlite> select * from products_product ;

1|Espresso|A strong and concentrated coffee brewed by forcing hot water through finely-ground coffee beans.|2.99|100|1|https://www.cafe-mx.com/blog/app/assets/media/2018/08/cafe-expreso.jpg|espresso|Hot Coffee|2026-01-10 16:44:37.141374|2026-01-10 16:44:37.141403

2|Cappuccino|A classic Italian coffee made with equal parts espresso, steamed milk, and milk foam.|3.99|80|1|https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRfPhPty83awEZiMFjBwtr4qai6J1evVnn7Vg\&s|cappuccino|Hot Coffee|2026-01-10 16:44:37.146030|2026-01-10 16:44:37.146044

3|Iced Latte|A refreshing iced coffee made with espresso and chilled milk, served over ice.|4.49|70|1|https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSJN96bzeQbB17K41fuAm\_wmW3Gc3mDywp9RQ\&s|iced-latte|Cold Coffee|2026-01-10 16:44:37.149987|2026-01-10 16:44:37.150000

4|Mocha|A rich and indulgent coffee made with espresso, steamed milk, chocolate syrup, and whipped cream.|4.99|60|1|https://hoxtoncoffee.com/cdn/shop/articles/latte-art-on-mocha\_1200x1200.jpg?v=1660069726|mocha|Hot Coffee|2026-01-10 16:44:37.154054|2026-01-10 16:44:37.154070

\nYo estoy usando urls de la web en lugar de imagenes locales, asi es mucho mas facil, cuando este desplegado en AWS le cambiare eso con un local storage en un bucket de S3 en la nube para almacenar imagnees reales de coffee drinks.

Mis urls.py son estas:

from django.urls import path
from . import views

urlpatterns = [
    path('', views.home.as_view(), name='home'),
    path('products/', views.ProductListView.as_view(), name='product_list'),
    path('products/add/', views.ProductFormView.as_view(), name='product_add'),
    path('products/<slug:slug>/', views.ProductDetailView.as_view(), name='product_detail'),
]

Mi forms.py es este:

from django import forms 
from .models import Product


# Products Forms

class ProductForm( forms.Form ) :
    
    name = forms.CharField(max_length=64, label="Product_Name")
    description = forms.CharField(widget=forms.Textarea, max_length=255, label="Product_Description")
    price = forms.DecimalField(max_digits=8, decimal_places=2, label="Product_Price")
    stock = forms.IntegerField(label="Stock")
    available = forms.BooleanField(required=False, initial=True, label="Available")
    product_image = forms.URLField(max_length=200, required=False, label="Product_Image")
    category = forms.CharField(max_length=32, label="Product_Category")
    
    
    def clean_price(self):
        price = self.cleaned_data.get('price')
        if price is not None and price < 0:
            raise forms.ValidationError("Price cannot be negative.")
        return price    
    
    def save(self):
        
        product = Product.objects.create(
            name=self.cleaned_data['name'],
            description=self.cleaned_data['description'],
            price=self.cleaned_data['price'],
            stock=self.cleaned_data['stock'],
            available=self.cleaned_data['available'],       
            product_image=self.cleaned_data.get('product_image', ''),
            category=self.cleaned_data['category'],
        )
        return product

Carlos Esteban León Pinilla

student•

Hablando de TailwindCss, también les recomiendo buscar componentes desde Flowbite:

Y aqui pueden ver card que puede usar:

Alver Joan perez

student•

Ya lo he usando antes y me gusta mucho, si uno trabaja mucho con tailwind deberia considera la version completa con todos sus componentes.

Luis Martinez

teacher•

El mundo del frontend tiene muchas alternativas, qué bueno que estén pudiendo usar otras junto con Django!

Sergio Andrés Martínez Ramírez

student•

Para añadir al directorio de templates también se puede usar de la siguiente forma, sin necesidad de hacer uso del os.path.join, como también lo explica el comentario que se mostró en el video

'DIRS': [ BASE_DIR / 'templates' ],

Sergio Garcia

student•

Gracias. Más sencillo de esta forma.

Josue Quichca

student•

Se me hizo algo complicado agregar fotos, pero ahi vamos. Hyperui es muuy util

Luis Martinez

teacher•

Las imagenes en django suelen ser complicadas.

Te recomiendo que busques como funciona media y static.

Con eso puedes entender mejor!

Jose Emmanuel Chavez Narvaez

student•

tengo la version 6 de Django y no es necesario usa el os basta con solo poner el nombre del directorio asi , creo que en versiones anteriores a la 4 se usa el OS

David Arias Calderón

student•

Luis Antonio Del Rio Salguero

student•

Es poco pero es trabajo honesto 👌👌

Luis Martinez

teacher•

Muy buen progreso

Juan Granada

student•

Ahora mismo para las versiones más recientes ya no se usa "os.path.join" para la construcción de rutas, esta forma ha sido remplazada por el uso del módulo "pathlib" que es una biblioteca más moderna y orientada a objetos de python.

Con pathlib, la unión de rutas se realiza de forma natural utilizando el operador de barra (/), lo que hace que el código sea más fácil de leer y escribir. Por ejemplo, en lugar de os.path.join(BASE_DIR, 'templates'), ahora se utiliza la expresión más concisa BASE_DIR / 'templates'.

Javier Nicolás Nieto

student•

Andres David Caicedo Marquez

student•

https://github.com/andresmr955/PythonFundametals/tree/076e6e9488df89c4b585d609be04da827245d93c/DJANGOCOURSE

Miguel Angel Reyes Moreno

student•

Ahí vamos :)

Andres Montes

student•

César Ernesto Rivas Martínez

student•

En que caso queda mejor usar TemplateView

from django.views.generic.base import TemplateView

class ProductListView(TemplateView):
  template_name = 'products/list_product.html'
  
  def get_context_data(self):
    products = Product.objects.all()
    context = {
      'products': products
    }

    return context
```y usar ListView

```js
from django.views import genericfrom django.views import generic

class ProductViewList(generic.ListView):
  model = Product
  template_name = 'products/list_product.html'
  context_object_name = 'products'
```cual es mas común o mejor practica?

Frandy De La Cruz

student•

Quizas en los casos donde no exista ya una vista o template de vista y tengas que hacerlo desde 0. Existe FormView, ListView... en el momento en que no vayas a usar uno de esos existentes, posiblemente convendria usar un TemplateView.

Ray Trápala

student•

Cuando vayamos a responder peticiones GET y renderizar una plantilla HTML. Es decir, cuando no tengamos que procesar formularios ni lógica especial.

Aunque sí se podría enviar información mediante def get_context_data(self, **kwargs) y enviar, por ejemplo, un mensaje de bienvenida

Enrique Alejandro Terrazas Huamaní

student•

La forma fácil de comentar en html:

<!--
    <form class="mt-4">
    <button
    class="block w-full rounded bg-yellow-400 p-4 text-sm font-medium transition hover:scale-105"
    >
    Add to Cart
    </button>
    </form>
-->

Ray Trápala

student•

solo ojo porque es HTML y estamos con DjangoHTML por lo que, lo mejor, es usar

{% comment %}

{% endcomment %}

GERMAYN BONALDY

student•

Por lo momentos este ha sido el progreso, muy emocionado por el curso

Ivan Castano - Perez

student•

En esta clase el profe indica que en este punto no hemos aplicado lo que aprendimos de los templates de Django, especialmente que "... podemos extender desde un archivo base.html para tener el resto de estructura de html". ¿Alguien me podría dirigir a en qué parte del curso se hace referencia a este archivo?

Yo tengo clara la clase donde habla de los templates, pero no recuerdo que haya hablado sobre el base.html.

Marifer Villarroel

student•

En esta clase: https://platzi.com/home/clases/9574-django/70107-personalizacion-de-interfaz-con-plantillas-en-djan/

Y concretamente habla sobre el archivo base.html a partir del minuto 2:50

<h2>Lista de productos</h2>
<ul>
    {% for product in products %}

        <li>
            {{product.name}}
            <p>{{product.price}}</p>
            {% if product.photo %}
            <img src="{{product.photo.url}}" alt="{{product.name}}" style="max-height: 100px;">
            {% endif %}
        </li>
    {% endfor %}
</ul>
```\<h2>Lista de productos\</h2>\<ul>    {% for product in products %}
&#x20;       \<li>            {{product.name}}            \<p>{{product.price}}\</p>            {% if product.photo %}            \<img src="{{product.photo.url}}" alt="{{product.name}}" style="max-height: 100px;">            {% endif %}        \</li>    {% endfor %}\</ul>

from django.urls import path
from . import views

urlpatterns = [
    path('', views.home.as_view(), name='home'),
    path('products/', views.ProductListView.as_view(), name='product_list'),
    path('products/add/', views.ProductFormView.as_view(), name='product_add'),
    path('products/<slug:slug>/', views.ProductDetailView.as_view(), name='product_detail'),
]

from django import forms 
from .models import Product


# Products Forms

class ProductForm( forms.Form ) :
    
    name = forms.CharField(max_length=64, label="Product_Name")
    description = forms.CharField(widget=forms.Textarea, max_length=255, label="Product_Description")
    price = forms.DecimalField(max_digits=8, decimal_places=2, label="Product_Price")
    stock = forms.IntegerField(label="Stock")
    available = forms.BooleanField(required=False, initial=True, label="Available")
    product_image = forms.URLField(max_length=200, required=False, label="Product_Image")
    category = forms.CharField(max_length=32, label="Product_Category")
    
    
    def clean_price(self):
        price = self.cleaned_data.get('price')
        if price is not None and price < 0:
            raise forms.ValidationError("Price cannot be negative.")
        return price    
    
    def save(self):
        
        product = Product.objects.create(
            name=self.cleaned_data['name'],
            description=self.cleaned_data['description'],
            price=self.cleaned_data['price'],
            stock=self.cleaned_data['stock'],
            available=self.cleaned_data['available'],       
            product_image=self.cleaned_data.get('product_image', ''),
            category=self.cleaned_data['category'],
        )
        return product

from django.views.generic.base import TemplateView

class ProductListView(TemplateView):
  template_name = 'products/list_product.html'
  
  def get_context_data(self):
    products = Product.objects.all()
    context = {
      'products': products
    }

    return context
```y usar ListView

```js
from django.views import genericfrom django.views import generic

class ProductViewList(generic.ListView):
  model = Product
  template_name = 'products/list_product.html'
  context_object_name = 'products'
```cual es mas común o mejor practica?

Creación de Plantillas con Django y Tailwind CSS

Fundamentos de Django

Entornos Virtuales y Configuración de Django en Python

Instalación de entornos virtuales y Django en Windows: guía paso a paso”

Instalación y configuración de Django con pip y django-admin

Arquitectura MVT en Frameworks Web: Model, View y Template

Modelo, Vista y Plantilla en Django: Creación y Conexión Básica

La M en el Patrón: Modelo

Modelos y Migraciones en Django ORM

Manejo Avanzado de Modelos y Bases de Datos

Migraciones en Django: Creación de Tablas en la Base de Datos

Creación y Gestión de Campos en Tablas de Django ORM

Modificación y Eliminación de Datos en Base de Datos con Python

Relaciones y Asociaciones entre Modelos

Relaciones de Tablas Uno a Muchos con Django

Relaciones de Muchos a Muchos en Modelos de Base de Datos

Relaciones 1 a 1 en Django: Creación y Gestión de Perfiles de Autor

Uso de Managers en Django para Consultas de Base de Datos

Configuración de URLs y Vistas Avanzadas

URLs Dinámicas en Django: Creación y Gestión Eficiente

Vistas en Django: Funciones vs Clases y su Implementación

La T en el Patrón: Plantillas o Templates

Templates y Tags en Django: Creación de Aplicaciones Web

Desarrollo de Aplicaciones en Django

Configuración de Proyecto Django: Entorno, Extensiones y Repositorio

Creación de Modelos de Producto en Django para Cafeterías

Instalación y uso de Pillow para campos de imagen en Django

Creación y Gestión de Formularios con Django

Creación de Plantillas con Django y Tailwind CSS

Administración de Modelos en Django: Configuración y Uso de Django Admin

Creación de Login y Registro de Usuarios en Django

Creación de una Aplicación de Pedidos en Django

Detalle de Orden y Personalización de Vistas en Django

Corrección de errores en MyOrderView para autenticación de usuario

Crear y configurar vistas para agregar productos a una orden en Django

Django Rest Framework

Creación de APIs con Django REST Framework

Despliegue de aplicaciones Django

Configuración de Bases de Datos con Django y AWS RDS

Uso de Django Environ para Manejar Credenciales Seguras

Testing de Aplicaciones Django con Unit Tests

Despliegue de Proyectos Django en AWS: Configuración y Mejora de Código

Despliegue de Aplicaciones con AWS Elastic Beanstalk y Django

¿Cómo optimizamos la interfaz con Hyper UI?