Configuración de Listado de Lecciones en Visual Studio

Contenido del curso

Introducción

Proyecto con Laravel 8

Conclusión

Bonus

21
Consejos para Dominio de Laravel y Desarrollo Profesional
03:00 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:08

Configuración de Listado de Lecciones en Visual Studio

Curso de Introducción a Laravel 8

Clase 15 de 21

Clase 15 / 21

Recursos

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

class Course < ApplicationRecord
  has_many :posts, class_name: "Post"
end

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

<li class="flex items-center text-gray-600 mt-2">
    <span class="text-xs text-gray-500 font-semibold bg-gray-200 rounded-full ml-auto">
        Gratis
    </span>
</li>

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.

Cristian Torres

Hace 5 años

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.

configure la tabla post de la siguiente manera

        $table->id();            
        $table->unsignedBigInteger('curso_id');
        
        $table->string('name');
        $table->boolean('free')->default(0);
        $table->timestamps();

        $table->foreign('curso_id')->references('id')->on('courses');

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.

Kenneth Angulo L

Hace 4 años

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:

return $this->hasMany(Comment::class, 'foreign_key');
 
return $this->hasMany(Comment::class, 'foreign_key', 'local_key');

Comentarios (15)15 comentarios

Eduardo Rahn

Hace 6 años

Engell Eduardo Lopez Mairena

Franklin Peñafiel

Jimmy Buriticá Londoño

Julian David Alzate Cuervo

Gilberto Pérez Garrido

David Salvador Martínez Santoyo

Emilio Vega

Francisco Javier Saavedra Alcala

Diego Dorado

Gerardo Sebastian Ramos Reyes

Joseph Dakkak

Juan José del Aguila López

Eduardo Bueno Lopez

LEONARD CUENCA

Introducción

Curso Renovado de Laravel: Nuevas Herramientas y Conocimientos

Proyectos modernos con Laravel 8 y JetStream

Curso de Laravel 6: Soporte a Largo Plazo y Migración a Nuevas Versiones

Instalación y uso de JetStream en Laravel con Blade y TailwindCSS

Proyecto con Laravel 8

Creación de Proyecto Web con Laravel 8 y Tailwind CSS

Instalación y Configuración de Laravel 8 con Tailwind CSS

Creación de Datos Semilla en Laravel con Faker

Configuración de Rutas y Vistas en Laravel con JetStream

Creación de Plantillas Web con Blade y Tailwind CSS en Laravel

Configuración de Plantillas Blade en Visual Studio Code

Creación de Componentes Dinámicos con Livewire en Laravel

Creación de Campos Virtuales en Componentes con Tailwind CSS

Creación de Controladores y Rutas en Laravel 8

Rutas dinámicas y maquetación de cursos en PHP con Laravel

Configuración de Listado de Lecciones en Visual Studio

Configuración de Cursos Similares en Visual Studio

Creación y Uso de Componentes Blade en Laravel

Personalización de Elementos en JetStream con Visual Studio

Conclusión

Personalización de Vistas en Laravel con JetStream y Livewire

Desarrollo de Aplicaciones con Laravel 8 y JetStream

Bonus

Consejos para Dominio de Laravel y Desarrollo Profesional

Configuración de Listado de Lecciones en Visual Studio

Progreso del curso

Introducción

Proyecto con Laravel 8

Conclusión

Bonus

Recursos

Recursos