Configuración de Listado de Lecciones en Visual Studio

Clase 15 de 21 • Curso de Introducción a Laravel 8

Resumen

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

Eduardo Rahn

student•

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.

Engell Eduardo Lopez Mairena

student•

Totalmente

Franklin Peñafiel

student•

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

Jimmy Buriticá Londoño

student•

Es increíble todo lo que ayuda Laravel, casi no usamos PHP. Lo que mas se usa es HTML y CSS.

Julian David Alzate Cuervo

student•

Si depronto no les funcionan algunos estilos de esta clase, no olviden ejecutar:

npm update && npm install && npm run dev

Gilberto Pérez Garrido

student•

Gracias

Jimmy Buriticá Londoño

student•

Comparto el código course.blade.php

@extends('layouts.web')

@section('content')
<div class="grid grid-cols-3 gap-4">
  <div class="p-8 bg-gray-200 col-span-1">
    <ul class="flex flex-col">
      <li class="font-medium text-sm text-gray-400 uppercase mb-4">Contenido</li>
      @foreach ($course->posts as $post)
        <li class="flex items-center text-gray-600 mt-2">
          {{ $post->name }}
          @if ($post->free)
            <span class="text-xs text-gray-500 font-semibold bg-gray-300 px-2 rounded-full ml-auto">Gratis</span>
          @endif
        </li>
      @endforeach
    </ul>
  </div>
  <div class="text-gray-700 col-span-2">
    <img src="{{ $course->image }}" alt="">
    <h2 class="text-4xl">{{ $course->name }}</h3>
    <p>{{ $course->description }}</p>
    <div class="flex mt-3">
      <img src="{{ $course->user->avatar }}" class="h-10 w-10 rounded-full mr-2" alt="">
      <div>
        <p class="text-gray-500 text-sm">{{ $course->user->name }}</p>
        <p class="text-gray-300 text-xs">{{ $course->created_at->diffForHumans() }}</p>
      </div>
    </div>
  </div>
</div>
<div class="text-center mt-4">
  <h1 class="text-3xl text-gray-700 mb-2 uppercase">Ultimos Cursos</h2>
  <h2 class="text-xl text-gray-600">Fórmate online como profesional en tecnología</h3>
</div>

<livewire:course-list>
@endsection

David Salvador Martínez Santoyo

student•

Para modificar las clases de los componentes con mas detalles pueden entrar al siguiente enlace

https://tailwindcss.com/docs/list-style-type

Gilberto Pérez Garrido

student•

Se debería llamar Curso de tailwind en Laravel

Emilio Vega

student•

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

Francisco Javier Saavedra Alcala

student•

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

Emilio Vega

student•

gracias por tu explicaión.

Diego Dorado

student•

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

Cristian Torres

student•

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

student•

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');

Gerardo Sebastian Ramos Reyes

student•

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:

Joseph Dakkak

student•

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.

Juan José del Aguila López

student•

course.blade.php

@extends('layouts.web')

@section('content')
    <div class="grid grid-cols-3 gap-4">
        <div class="p-8 bg-gray-200 col-span-1">
            <ul class="flex flex-col">
                <li class="font-medium text-sm text-gray-400 uppercase mb-4">
                    Contenido
                </li>
                @foreach($course->posts as $post)
                    <li class="flex items-center text-gray-600 mt-2">
                        {{ $post->name }}
                        @if($post->free)
                            <span class="text-xs text-gray-500 font-semibold bg-gray-200 px-2 rounded-full ml-auto">Gratis</span>
                        @endif
                    </li>
                @endforeach
            </ul>

        </div>
        <div class="text-gray-700 col-span-2">
            <img src="{{ $course->image }}">
            <h2 class="text-4xl">{{ $course->name }}</h3>
            <p>{{ $course->description }}</p>
            <div class="flex mt-3">
                <img src="{{ $course->user->avatar }}" alt="" 
                class="h-10 w-10 rounded-full mr-2">

                <div>
                    <p class="text-gray-500 text-sm">{{ $course->user->name }}</p>
                    <p class="text-gray-300 text-xs">{{ $course->created_at->diffForHumans() }}</p>
                </div>
            </div>

        </div>

    </div>


    <div class="text-center mt-4">
        <h1 class="text-3xl text-gray-700 mb-2 uppercase">Últimos Cursos</h2>
        <h2 class="text-xl text-gray-600">Fórmate online como profesional en Tecnología</h3>

    </div>

    <livewire:course-list>
@endsection

Eduardo Bueno Lopez

student•

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.

LEONARD CUENCA

student•

Me gusta cada vez mas laravel

Emilio Vega

student•

Alguno me podría decir porque sale así, gracias...

Francisco Javier Saavedra Alcala

student•

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