Lección: 27 CRUD (READ) de la tabla peliculas en la PLATAFORMA con (LARAVEL y MYSQL) FULLSTACK

27 CRUD (READ) de la tabla peliculas en la PLATAFORMA con (LARAVEL y MYSQL) FULLSTACK

Duración: 10 min

Módulo: 📝 Módulo CRUD: Creación y Formularios Lección 1 de 8

Descripción

👁️ Lección 27: Implementación de la Función CRUD (Read) para la Tabla peliculas

Esta lección avanzada finaliza la implementación de la función de Lectura (Read) del patrón CRUD, mostrando los registros de películas de la base de datos dentro de una tabla interactiva y responsiva en la vista del administrador, utilizando las variables pasadas desde el controlador.

1. 🖼️ Preparación de la Vista para el Listado [01:52]

Se prepara la vista admin/peliculas/Index.blade.php para recibir y desplegar los datos en un formato de tabla.

Título: Se modifica el título de la vista a "Listado de Películas" [02:06].
Contenedor de la Tabla: Se utiliza la estructura de Bootstrap/AdminLTE (Card) para contener la tabla, eliminando el contenido estático anterior [02:00].
Tabla con Estilos: Dentro del Card Body, se define la etiqueta <table> a la que se le aplican varias clases de Bootstrap para mejorar su apariencia y funcionalidad:
- table
- table-bordered
- table-hover
- table-striped [02:29].

2. 📝 Definición de Encabezados de Columna (<thead>) [02:49]

Se configuran las columnas necesarias para mostrar todos los datos relevantes de la tabla peliculas en el administrador:

Columnas Principales:
- Nº (Para numeración de registros) [03:01].
- Título de la película [03:17].
- Descripción [03:28].
- Categoría [03:32].
- Imagen (Portada) [03:41].
- Tráiler (URL) [03:47].
- Duración [03:57].
- Servidor 1 y Servidor 2 (Links de streaming) [04:15].

3. 🔄 Despliegue de Datos con @foreach (Eloquent) [05:06]

Se utiliza el bucle @foreach de Blade para iterar sobre la variable $peliculas (que contiene todos los registros consultados por Eloquent en el controlador) y llenar el cuerpo de la tabla (<tbody>).

Bucle de Iteración: Se define el bucle @foreach ($peliculas as $pelicula) sobre el cuerpo de la tabla (<tbody>) [05:39].
Inserción de Fila: Dentro del bucle, se inserta una nueva fila de tabla (<tr>) en cada ciclo [06:22].
Acceso a Datos: Cada columna de la fila (<td>) accede a un campo específico del objeto $pelicula usando la sintaxis de doble llave y la flecha: {{ $pelicula->campo_de_tabla }}. Ejemplos de datos desplegados:
- {{ $pelicula->id }} [06:06]
- {{ $pelicula->titulo_p }} [06:48]
- {{ $pelicula->descripcion_p }} [06:58]

4. 🖼️ Visualización de Imágenes y Responsividad [08:08]

Se mejora la presentación de la tabla para el administrador.

Responsividad: Para evitar que la tabla se desborde o rompa el diseño en pantallas pequeñas, se envuelve toda la tabla en un <div> con la clase de Bootstrap table-responsive [08:16]. Esto añade un scroll horizontal a la tabla si es necesario [08:26].
Visualización de Portada: Se convierte la ruta del archivo de la imagen (que solo mostraba texto) en una etiqueta <img> y se le asigna un tamaño fijo de 100 píxeles para la vista previa [08:44].

Con esto, la funcionalidad de Lectura (Read) del CRUD queda implementada, mostrando todos los datos de la base de datos de manera organizada.

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