Lección: 71 Cargar PELÍCULAS por CATEGORIAS en cada SECCIÓN de mi PÁGINA WEB con (LARAVEL y MYSQL) FULLSTACK

71 Cargar PELÍCULAS por CATEGORIAS en cada SECCIÓN de mi PÁGINA WEB con (LARAVEL y MYSQL) FULLSTACK

Duración: 9 min

Módulo: 🎬 Módulo de Vistas Públicas y Funcionalidades Core Lección 7 de 16

Descripción

Lección 71: Carga de Películas por Categorías en la Página Principal

Esta lección avanzada explica cómo usar la lógica condicional de Blade (@if) para filtrar y mostrar solo las películas que pertenecen a una categoría específica (ej. "Acción", "Animación Kids") en cada sección dedicada de la página principal.

1. 🔍 Lógica de Filtrado por Categoría en la Vista [01:41]

Dado que el controlador ya pasa todas las películas a la vista ($peliculas), el filtrado se realiza directamente en la capa de la vista con un control de flujo.

1.1. Pregunta Condicional @if

Dentro del bucle @foreach (que itera sobre todas las $peliculas), se anida una sentencia @if [01:56].
La condición compara el campo categoria_p de la película actual con el nombre de la categoría que debe mostrarse en esa sección de la página (ej. "Acción") [02:31]:
PHP
@if ($pelicula->categoria_p == 'Acción') // ... Imprimir el ítem del Carrusel ... @endif
Resultado: Esta lógica garantiza que solo las películas que cumplan con la condición sean impresas en el espacio del Carrusel dedicado a dicha categoría [03:37].

2. 🗂️ Implementación de Múltiples Carruseles [05:14]

Se duplica el bloque de código del Carrusel (@foreach anidado con @if) para crear secciones separadas para cada categoría.

2.1. Duplicación y Modificación

El bloque completo del primer Carrusel (@foreach y su lógica interna) se copia y pega debajo.
El título de la sección se actualiza (ej. de "Acción" a "Animación Kids") [05:36].
La condición dentro del @if se actualiza para que coincida con el nombre de la nueva categoría (ej. $pelicula->categoria_p == 'Animación Kids') [06:38].

2.2. Aislamiento de Carruseles (ID Únicos) [03:55]

Problema: Si múltiples Carruseles usan el mismo ID (ej. carousel-1), sus botones de navegación interactuarán entre sí.
Solución: Es fundamental cambiar el ID de la estructura de cada Carrusel.
- El primer Carrusel usa id="carousel-1".
- El segundo Carrusel usa id="carousel-2", y así sucesivamente [04:32].
- Los botones de control (next y prev) deben apuntar al ID del Carrusel correcto para asegurar su aislamiento y funcionamiento independiente.

3. 🎯 Próximo Paso: Vínculos a la Vista Detalle [08:07]

Una vez completada la visualización en la página principal, el siguiente paso es dotar de interactividad a los ítems del Carrusel.

El instructor anuncia que el próximo video se centrará en agregar una acción (vínculo) a cada película para que, al hacer clic, el usuario sea redirigido a una nueva vista de detalle que muestre toda la información de la película y permita su reproducción.

Apoya este proyecto

Si te gusta nuestro contenido, ¡apóyanos con una donación!

Donar por Airtm Donar por Binance

¡Gracias por tu apoyo! ❤️

Hilari Web