¿Cómo configurar el listado de lecciones en un curso?
La organización de los recursos es esencial para ofrecer una mejor experiencia educativa. En esta clase, exploraremos cómo configurar el listado de lecciones que complementan un curso, utilizando la magia de Tailwind CSS y programación en el entorno Visual Studio. Prepárate para un enfoque práctico y detallado que te ayudará a lograr configuraciones visualmente efectivas y funcionales.
¿Cuál es el primer paso para listar lecciones?
Antes de comenzar, asegúrate de tener todos los elementos iniciales listos. En Visual Studio, dirígete a la página de cursos donde previamente has dejado un comentario para trabajar en la configuración del listado. Utiliza la estructura forish para iterar sobre las lecciones asociadas a un curso.
{% for post in course.posts %}
<li> {{ post.name }}
{% if post.is_free %}
<span>Gratis</span> {% endif %}
</li>{% endfor %}
¿Cómo definir la relación entre cursos y lecciones?
Para que el listado funcione correctamente, es crucial establecer la relación de datos entre los cursos y las lecciones (o posts). En el modelo APP, dentro de models, define que un curso tiene muchas lecciones. Aquí se usa has_many para indicar esta relación en plural.
¿Cómo aplicar Tailwind CSS para mejorar el diseño?
Un diseño atractivo y claro es fundamental. Aquí usamos Tailwind CSS para darle vida a la visualización del listado. Comienza haciendo que cada elemento de la lista sea un contenedor flex y alinea los elementos con items-center.
Configuración básica: Usa clase flex para disposición flexible, items-center para alinear verticalmente.
Elementos de Texto: Ajusta el tamaño y color del texto con text-xs y text-gray-500.
Destacar elementos: Añade font-semibold para dar un poco de énfasis y bg-gray-200 para un fondo distintivo.
Ajustes de margen: Utiliza ml-auto para mover elementos automáticamente hacia la derecha y px-2 para un espacio adecuado.
¿Cómo visualizar y perfeccionar el diseño?
Una vez aplicado el diseño, actualiza la página para verificar el resultado. Debes asegurarte de que cada lección se presenta con claridad y el elemento gratuito esté bien destacado visualmente.
Si encuentras que el fondo no contrasta adecuadamente, puedes ajustar la intensidad del color usando un grado más alto, como background-gray-300, para asegurarte de que el texto resalte correctamente.
¿Qué sigue en la mejora del proyecto?
Este método de configuración te permite manejar fácilmente el listado de lecciones. Sin embargo, hay otros aspectos que podemos mejorar y ampliar. Considera implementar componentes como una tarjeta de curso y la sección de cursos similares para proporcionar una experiencia más completa. Mantente motivado y sigue evolucionando en cada paso del desarrollo para ofrecer un producto educativo integral y eficiente. Tu constancia y atención al detalle son claves para el éxito.
Nunca habia usado tailwindcss y me ha dejado gratamente sorprendido. A mi no me gusta nada trabajar con CSS y esto es una gran ayuda.
Totalmente
En mi caso yo he trabajado bastante con css y sass que cuando intenté aprender tailwind me sentí muy limitado en algunas partes del diseño, en especial cuando se usan valores numéricos para medidas y espacios. Tampoco me gusta tener tantos nombres de clases. tailwind es potente pero muy sucio a nivel de código
Es increíble todo lo que ayuda Laravel, casi no usamos PHP. Lo que mas se usa es HTML y CSS.
Si depronto no les funcionan algunos estilos de esta clase, no olviden ejecutar:
Para que me funcionara el llamado a la tabla posts coloque esto en el modelo:
public function posts(){
return $this->hasMany(Post::class, 'couser_id');
}
solo así me funciono, aún no se porque...
Esto sucede cuando en la migración creamos el foreign key y personalizamos el nombre, laravel da por hecho que el nombre es “modelo”+"_id", ejemplo: “course_id”. Si lo cambiamos debemos especificarle cual es el nombre exacto del campo llave.
Veo que un tu caso lo llamaste “couser_id”, laravel espera que se llame “course_id”, si quieres solucionarlo sólo corrige la migración y correla asi ya no deberas pasar ese parametro.
Saludos!..
gracias por tu explicaión.
para actualizar modificaciones en el archivo de configuracion de taildwind o agregar sus prpias clases deben correr el ssiguiente comando que peuden volver un script
npx tailwindcss-cli@latest build ./resources/css/app.css -o ./public/css/app.css
lo que hace es tomar los compontes de node y crear la hoja de estilos que aparece en public
Buenas, hice algunas modificacione a la estructura del curso para ir probando las relaciones de tablas, pero al llegar a este punto me proboca errores.
pero al ejecutar la pgina que estamos construyecyo con el contenido de los post me arroja el siguiente error:
Illuminate\Database\QueryException
SQLSTATE[42S22]: Column not found: 1054 Unknown column 'posts.course_id' in 'where clause' (SQL: select * from posts where posts.course_id = 3 and posts.course_id is not null) (View: /var/www/html/cursoplatzi/resources/views/course.blade.php)
no se donde esta definida la relacion con course_id, si en la migracion defini curso_id.
por favor su ayuda
Gracias.
El problema es que te saliste de la norma, y nombraste la columna del id en espanol.
.
Puedes hacer un override de los ids, en el modelo, cuando defines las relacion:
Para que se actualice automáticamente utilicen este comando en otra terminal: npm run watch
No me llego acostumbrar a tailwind, estuve algo acostumbrado a usar css puro o boostrap que es algo más modeable, se tiene que repasar mucho su documentación y ver ejemplos que por cierto no hay tantos como me gustaría: https://tailwindcss.com/docs
Aquí mi engendro:
Laravel es una herramienta Full-Stack y en este curso se estan abordando todos los niveles de desarrollo. En proyectos mas amplios tenemos mayor cantidad de tiempo dedicados al diseño y analisis del modelo de datos, solo al obtener este esquema podremos crear correctamente las migraciones. Al tener las migraciones, conoceremos entonces como poblar la BD con datos de prueba con un correcto enlace de datos. Adicionalmente sabremos como relacionar nuestros modelos correcamente entre ellos. Usualmente en proyectos mas grandes tendremos que definir ciertas reglas de negocios que seran procesadas antes de que los datos lleguen quizás al Controller... Todos estos pasos son creados por diversos profesionales en la materia, sobre todo cuando se busca mucha eficiencia en las consultas y muy buenas practicas de codigo.
Sin embargo, este curso es muy buen punto de inicio para todo lo descrito anteriormente.
Trabajar realmente con tailwind es muy comodo, y nos da un excelente diseño. Al parecer dejaré de usar bootstrap para incluir tailwind en mis proyectos.
Me gusta cada vez mas laravel
Alguno me podría decir porque sale así, gracias...
Esto es porque en la etiqueta 'ul' sólo le diste la clase 'flex' debes pasarle tambien 'flex-col' para que lo tome como columna.
Ejemplo: <ul class="flex flex-col"></ul>.
Saludos!...
