Lección: 69 Cargar PELÍCULAS en página PRINCIPAL con (LARAVEL y MYSQL) FULLSTACK

69 Cargar PELÍCULAS en página PRINCIPAL con (LARAVEL y MYSQL) FULLSTACK

Duración: 9 min

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

Descripción

🎬 Lección 69: Carga de Películas en la Página Principal

Esta lección avanzada detalla cómo modificar el controlador y las rutas para que la vista raíz (/) consulte la base de datos, recupere la lista de películas y las imprima dinámicamente dentro de la estructura del Carrusel.

1. ⚙️ Habilitación del Controlador y las Rutas [01:09]

Para mostrar el contenido de la base de datos en la ruta principal, se necesita una nueva función en el controlador y una ruta que apunte a ella.

1.1. Creación de la Función cargarPeliculas

Se crea una nueva función llamada cargarPeliculas dentro del PeliculasController [01:43].
Esta función realiza una lectura a la base de datos utilizando el modelo Peliculas (Peliculas::all()).
Retorno: La función retorna la vista principal (index.blade.php), pasando la variable $peliculas (con toda la información de la tabla) a la vista [02:01].

1.2. Definición de la Ruta Principal

En el archivo de rutas (routes/web.php), se define una ruta GET que apunta a la raíz (/) [02:27].
Esta ruta se asocia al PeliculasController y llama específicamente a la función cargarPeliculas [02:35].

2. 🔄 Iteración de Datos en la Vista (index.blade.php) [03:09]

El contenido estático del Carrusel debe ser reemplazado por un bucle que se repita por cada película obtenida de la base de datos.

2.1. Implementación del Bucle @foreach

Se utiliza la directiva de Blade @foreach sobre la variable $peliculas para iterar sobre cada registro y generar el código HTML necesario para un ítem del carrusel [03:31].
Dentro del bucle, se usa la variable $pelicula para acceder a los datos específicos de cada registro, como el ID ($pelicula->id) [04:02].

2.2. Adaptación de la Estructura al Carrusel

Se elimina el código HTML estático de los ítems del carrusel, dejando solo la estructura que será generada dinámicamente dentro del bucle [04:30].

3. 💾 Preparación y Sincronización de Datos [05:05]

Para demostrar la funcionalidad del Carrusel con múltiples elementos, se necesita una base de datos con una cantidad considerable de películas.

3.1. Duplicación Masiva de Registros

Dado que el entorno de desarrollo solo tenía unos pocos registros, se utiliza la herramienta phpMyAdmin para duplicar los registros existentes en la tabla peliculas [05:31].
Este paso es temporal y tiene como objetivo simular una tabla grande (ej. 12 registros) para probar el scroll y el funcionamiento del Carrusel [07:25].

3.2. Sincronización de la Base de Datos

Se exporta la tabla peliculas actualizada (con los registros duplicados) del entorno local.
Se borra la tabla existente en la base de datos de producción (hosting) y se importa el nuevo archivo .sql para actualizar la información en el servidor [07:08].

4. 💡 Lógica Condicional del Ítem Activo [07:38]

Un carrusel de Bootstrap o similar requiere que el primer ítem tenga la clase active para que la transición de elementos funcione correctamente.

4.1. Uso de un Contador

Se inicializa un contador a 0 antes del bucle @foreach [08:34].
Dentro del bucle, el contador se incrementa en cada iteración [08:41].

4.2. Implementación de la Condición

Se utiliza una sentencia condicional (@if) dentro del bucle para preguntar si el contador es igual a 1 (la primera iteración) [08:55].
Si la condición es verdadera, se imprime la clase active en el contenedor del ítem del carrusel, asegurando que solo el primer elemento esté activo al cargar la página.

Hilari Web