Creación de Plantillas con Django y Tailwind CSS
Contenido del curso
Adrian Ernesto German Becerra
Enrique Alejandro Terrazas Huamaní
Michael Aguillón
Carlos Palacios
Bryan Castano
Edward Rodríguez
Rigoberto Maldonado
Carlos Esteban León Pinilla
Alver Joan perez
Luis Martinez
Profesor
Sergio Andrés Martínez Ramírez
Sergio Garcia
Robert Yesid Barrios Acendra
Bernar Serrano Rubiano
Platzi
Bryan Cabrera Orozco
Jose Emmanuel Chavez Narvaez
Josue Quichca
Luis Martinez
Profesor
David Arias Calderón
Luis Antonio Del Rio Salguero
Luis Martinez
Profesor
Juan Granada
Javier Nicolás Nieto
Andres David Caicedo Marquez
Miguel Angel Reyes Moreno
Andres Montes
César Ernesto Rivas Martínez
Frandy De La Cruz
Ray Trápala
Enrique Alejandro Terrazas Huamaní
Ray Trápala
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 👍
Gracias, esa me faltaba para que corra el programa
A mi no me funcionaba con ese, pero si me funcipnó el siguiente:
from .<u>models</u> import <u>Product</u>
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 %}   \<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>
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 ;
id|name|description|price|stock|available|product_image|slug|category|created_at|updated_at
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
solo cambia esto: success_url = reverse_lazy('add_products') por success_url = reverse_lazy('list_products') y listo campeón
Hablando de TailwindCss, también les recomiendo buscar componentes desde Flowbite:
Y aqui pueden ver card que puede usar:
Ya lo he usando antes y me gusta mucho, si uno trabaja mucho con tailwind deberia considera la version completa con todos sus componentes.
El mundo del frontend tiene muchas alternativas, qué bueno que estén pudiendo usar otras junto con Django!
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'
],
Gracias. Más sencillo de esta forma.
Si nadie se preguntó cómo colocar si está disponible o no un producto, lo hacen con esto:
{{ product.avaliable|yesno:"Sí,No" }}
Alguien me puede explicar que extensión debo instalar para usar el HTML como le sale al profesor?
Debes instalar la extensión Tailwind CSS utilizando el método CDN llamado Play CDN como se explicó en la clase. Esto permite agregar estilos reutilizables a través de Tailwind en el archivo base HTML.
Con Emmet
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
Se me hizo algo complicado agregar fotos, pero ahi vamos. Hyperui es muuy util
Las imagenes en django suelen ser complicadas.
Te recomiendo que busques como funciona media y static.
Con eso puedes entender mejor!
Muy buen progreso
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'.
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?
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.
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
La forma fácil de comentar en html:
<!-- codigo -->
<!-- <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> -->
solo ojo porque es HTML y estamos con DjangoHTML por lo que, lo mejor, es usar
{% comment %}
{% endcomment %}
