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•

Carlos Esteban León Pinilla

student•

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

https://flowbite.com

Y aqui pueden ver card que puede usar:

https://flowbite.com/docs/components/card/

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.

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'.

Rigoberto Maldonado

student•

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

javier nicolas 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

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>

Andres Ricardo Martinez Diaz

student•

Ajuste los estilos para que se cambiaran según el tema del navegador. 😀

Bernar Serrano Rubiano

student•

Alguien me puede explicar que extensión debo instalar para usar el HTML como le sale al profesor?

Platzi

student•

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.