CRUD usando Modal Bootstrap | PHP y MySQL

Introducción al proyecto

Resumen de la sección: En esta introducción, Marco Robles explica que el objetivo del proyecto es crear un CRUD en PHP y MySQL utilizando ventanas modales. Estas ventanas emergentes permitirán agregar, editar y eliminar registros sin tener que redirigirse a otra página. También menciona que se trabajará con una tabla de películas y se explorarán temas como la relación entre tablas, la carga y visualización de imágenes, y la implementación de bibliotecas adicionales para mejorar el diseño.

Creación del proyecto

• Se utilizará PHP 8 para mayor compatibilidad con versiones anteriores.

• Se trabajará con Apache Server como servidor web.

• Se utilizará MySQL como base de datos.

• Se empleará Bootstrap para mostrar las ventanas modales y dar estilo a los formularios.

• Se recomienda usar Visual Studio Code como editor de código.

Estructura del proyecto

• Crear una carpeta llamada "Cruz_modal" en la raíz del servidor web.

• Dentro de "Cruz_modal", crear las siguientes carpetas:

• "app": Para archivos relacionados con la lógica de la aplicación.

• "assets": Para archivos estáticos como CSS y JS.

• "css": Para hojas de estilo.

• "js": Para archivos JavaScript.

• "config": Para archivos relacionados con la configuración de la base de datos.

• Otras carpetas según los módulos deseados (por ejemplo, una carpeta llamada "películas").

Configuración inicial

• Descargar e incluir Bootstrap en el proyecto:

• Descargar los archivos CSS y JS desde el sitio oficial de Bootstrap.

• Copiar el archivo "bootstrap.min.css" en la carpeta "css".

• Copiar el archivo "bootstrap.bundle.min.js" en la carpeta "js".

• Descargar e incluir una biblioteca de iconos (por ejemplo, Font Awesome):

• Descargar los archivos CSS y web fonts desde el sitio oficial.

• Copiar el archivo "all.min.css" en la carpeta "css".

• Extraer la carpeta "webfonts" al mismo nivel que las carpetas "css" y "js".

Configuración de la base de datos

• Crear una base de datos llamada "Cinema" con codificación UTF-8.

• Crear una tabla llamada "género" con las columnas:

• ID (autoincremental, clave primaria)

• Nombre (varchar(50))

• Crear una tabla llamada "películas".

Agregar género a la base de datos

Resumen de la sección: En esta sección, se explica cómo agregar el campo "género" a la base de datos. Se utiliza el identificador "id_género" y se crea una relación entre las tablas "película" y "género". También se menciona que se puede utilizar un script para insertar los géneros en la tabla.

• Se agrega el campo "id_género" a la tabla "película".

• Se crea una relación entre las tablas "película" y "género".

• Se utiliza el comando CASCADE o RESTRICT para definir cómo se comportará la relación.

• Se insertan los géneros en la tabla utilizando un script predefinido.

• Es posible agregar más géneros según sea necesario.

Configurar conexión a la base de datos

Resumen de la sección: En esta sección, se explica cómo configurar la conexión a la base de datos en el archivo Data.php dentro de la carpeta config. Se proporcionan los parámetros necesarios como el nombre del host, usuario, contraseña y nombre de la base de datos.

• Crear un archivo llamado Data.php dentro de la carpeta config.

• Configurar los parámetros necesarios para establecer una conexión con la base de datos (nombre del host, usuario, contraseña y nombre de la base de datos).

• Verificar si hay errores en caso de que no se pueda establecer una conexión.

• Mostrar mensaje de error en caso de que haya algún problema con la conexión.

Crear vista de películas

Resumen de la sección: En esta sección, se explica cómo crear la vista de películas en el archivo Index.php dentro de la carpeta películas. Se utiliza HTML y Bootstrap para diseñar la interfaz.

• Crear un archivo llamado Index.php dentro de la carpeta películas.

• Diseñar la interfaz utilizando HTML y Bootstrap.

• Agregar un título "Películas" centrado en la página.

• Agregar un botón "Nuevo registro" con estilo Bootstrap.

• Centrar el botón en la página.

• Agregar iconos utilizando Font Awesome.

Agregar funcionalidad al botón "Nuevo registro"

Resumen de la sección: En esta sección, se explica cómo agregar funcionalidad al botón "Nuevo registro" en el archivo Index.php. Se muestra cómo redirigir a una página de registro o formulario para agregar una nueva película.

• Agregar un enlace al botón "Nuevo registro".

• Establecer una ruta o referencia a una página de registro o formulario.

• Diseñar el botón con estilo Bootstrap.

Cómo agregar un icono a un botón en HTML

Resumen de la sección: En esta sección, se explica cómo agregar un icono a un botón en HTML utilizando Bootstrap. Se muestra el código necesario y se proporcionan instrucciones paso a paso.

Agregar un icono al botón

• Para agregar un icono a un botón, se utiliza la etiqueta <i> con una clase específica de Bootstrap.

• Se muestra el código necesario para agregar el icono y se explica cómo utilizarlo.

• Después de copiar el código del icono, se puede pegar en el lugar deseado dentro del botón.

• Se recomienda utilizar clases adicionales para personalizar el tamaño y estilo del icono.

Creación de una tabla con encabezados y contenido en HTML

Resumen de la sección: En esta sección, se explica cómo crear una tabla con encabezados y contenido utilizando HTML. Se muestra el código necesario y se proporcionan instrucciones paso a paso.

Crear la estructura básica de la tabla

• Se utiliza la etiqueta <table> para crear la tabla.

• Se agrega la clase "Table" para aplicar estilos predefinidos de Bootstrap.

• Se crea una fila de encabezados utilizando las etiquetas <tr> y <th>.

• Los encabezados pueden ser personalizados según los datos que se deseen mostrar.

Agregar contenido a la tabla

• Después de los encabezados, se crea una nueva fila utilizando las etiquetas <tr> y <td>.

• Dentro de cada celda (<td>), se coloca el contenido correspondiente.

• Se pueden agregar tantas filas como sea necesario para mostrar el contenido deseado.

Personalización de la tabla y separación del botón

Resumen de la sección: En esta sección, se explica cómo personalizar una tabla en HTML utilizando clases de Bootstrap. También se muestra cómo separar un botón de la tabla.

Personalizar la apariencia de la tabla

• Para cambiar el fondo del encabezado de la tabla, se agrega la clase "Table-dark" a la etiqueta <table>.

• Se puede utilizar otras clases para personalizar aún más el estilo de la tabla según las necesidades.

Separar el botón de la tabla

• Para separar el botón de la tabla, se agrega margen superior (mt) a la etiqueta <table>.

• Se puede ajustar el valor del margen según sea necesario.

• Si se desea colocar el botón en medio o a la derecha, se puede envolver toda la estructura dentro de otra etiqueta <div> y aplicar las clases correspondientes.

Creación de una ventana modal para nuevo registro

Resumen de la sección: En esta sección, se explica cómo crear una ventana modal en HTML para un nuevo registro utilizando Bootstrap. Se muestra el código necesario y se proporcionan instrucciones paso a paso.

Crear un archivo adicional para mostrar el modal

• Se crea un archivo adicional con extensión ".php" que contendrá únicamente el código necesario para mostrar el modal.

• El archivo debe tener un nombre descriptivo, como "nuevo_modal.php".

Utilizar ejemplos predefinidos y realizar modificaciones

• Se utiliza un ejemplo predefinido de Bootstrap que muestra un botón para abrir el modal.

• Se copia el código del ejemplo y se realizan modificaciones según sea necesario.

• Se cambia el ID del modal para identificarlo como "nuevo_modal".

• Se ajusta la clase del modal para que sea más grande, utilizando la clase "modal-lg".

Estructura del modal

• El modal consta de un encabezado, contenido y pie de página.

• En el encabezado, se puede personalizar el título según las necesidades.

• En el contenido, se puede agregar un formulario utilizando las etiquetas <form> y <input>.

• Es importante especificar el método del formulario como "post" y agregar la opción "multipart/form-data" si se desea cargar archivos.

Agregar campos al formulario de nuevo registro

Resumen de la sección: En esta sección, se explica cómo agregar campos al formulario de nuevo registro dentro de una ventana modal en HTML. Se muestra el código necesario y se proporcionan instrucciones paso a paso.

Agregar campos al formulario

• Se utilizan las etiquetas <label> y <input> para crear los campos del formulario.

• Cada campo debe tener un nombre único (atributo "name") y un ID correspondiente (atributo "id").

• Se pueden utilizar clases adicionales para aplicar estilos o validaciones específicas a cada campo.

Validación de campos

• Para validar los campos del formulario, es posible utilizar atributos HTML5 como "required" o realizar validaciones adicionales en el backend.

• Es recomendable incluir mensajes de error o indicaciones claras para los usuarios en caso de que no cumplan con los requisitos establecidos.

Agregar campo para cargar imágenes al formulario

Resumen de la sección: En esta sección, se explica cómo agregar un campo para cargar imágenes al formulario de nuevo registro en HTML. Se muestra el código necesario y se proporcionan instrucciones paso a paso.

Agregar campo para cargar imágenes

• Se utiliza la etiqueta <input> con el atributo "type" establecido como "file" para crear el campo de carga de imágenes.

• Es importante especificar un nombre único (atributo "name") y un ID correspondiente (atributo "id") para el campo.

• Se puede agregar una validación adicional en el backend para asegurarse de que solo se acepten archivos de imagen.

Otras consideraciones

• Es posible personalizar aún más el formulario y los campos utilizando clases adicionales o estilos CSS según las necesidades del proyecto.

• Se recomienda revisar la documentación de Bootstrap y HTML5 para obtener más información sobre las opciones disponibles.

Agregar botones a la ventana modal

Resumen de la sección: En esta sección, se muestra cómo agregar botones a una ventana modal. Se explican los pasos para cambiar el texto de los botones y agregar iconos.

• Cambiar el primer botón a "Cerrar".

• Cambiar el segundo botón a "Guardar".

• Buscar un icono adecuado para el botón de guardar.

• Copiar y pegar el código del icono en la ventana modal.

Integrar la ventana modal al formulario

Resumen de la sección: En esta sección, se explica cómo integrar la ventana modal al formulario existente.

• Eliminar la opción del footer en la ventana modal.

• Agregar propiedades data-bs-toggle y data-bs-target al botón o enlace que abrirá la ventana modal.

• El valor de data-bs-toggle debe ser "modal" para indicar que abrirá una ventana modal.

• El valor de data-bs-target debe ser el ID de la ventana modal correspondiente.

Incluir archivo PHP del modal

Resumen de la sección: En esta sección, se muestra cómo incluir un archivo PHP que contiene el código necesario para mostrar y controlar la ventana modal.

• Antes del cierre del script, agregar include 'modal.php';.

• Esto permite trabajar con archivos separados y mantener un código más organizado.

Traer lista de géneros desde base de datos

Resumen de la sección: En esta sección, se explica cómo obtener una lista de géneros de películas desde una base de datos y mostrarla en la ventana modal.

• Incluir el archivo de conexión a la base de datos.

• Realizar una consulta SQL para seleccionar los ID y nombres de los géneros.

• Usar un bucle while para recorrer los resultados de la consulta.

• Imprimir cada opción del select con el nombre del género.

Guardar información en la base de datos

Resumen de la sección: En esta sección, se muestra cómo guardar la información ingresada en la ventana modal en la base de datos.

• Crear un nuevo archivo PHP llamado "guarda.php".

• Obtener los valores del formulario mediante el método POST.

• Limpiar las cadenas para evitar inyecciones SQL utilizando real_escape_string.

• Construir una consulta SQL INSERT INTO con los valores obtenidos.

• Ejecutar la consulta para guardar los datos en la tabla correspondiente.

Variables y consultas SQL

Resumen de la sección: En esta sección, se explica cómo manejar variables en consultas SQL y cómo realizar inserciones en una base de datos MySQL. También se muestra cómo validar que la inserción se haya realizado correctamente.

Variables en consultas SQL

• Se pueden dejar sin comillas los valores que son enteros, como el ID o el género.

• Para la fecha y hora, se utilizan paréntesis para tomar la fecha y hora del servidor MySQL.

Inserción en la base de datos

• Se utiliza la función insert para crear un nuevo registro.

• Se obtiene el ID del nuevo registro mediante la conexión a la base de datos.

• Se redirige al usuario al Index.php después de realizar la inserción.

Prueba de inserción

Resumen de la sección: En esta sección, se realiza una prueba de inserción en la base de datos. Se agrega un nuevo registro con nombre "Matilda" y descripción.

• Se realiza una prueba de inserción con los valores deseados.

• El nuevo registro aparece en la tabla después de actualizarla.

Visualización de registros

Resumen de la sección: En esta sección, se explica cómo listar todos los registros en una ventana. Se muestra cómo realizar una consulta SQL para obtener los registros y luego mostrarlos en forma tabular.

• Se realiza una consulta SQL utilizando un SELECT para obtener todos los registros.

• Se utiliza un INNER JOIN para relacionar las tablas "películas" y "género".

• Los resultados obtenidos son mostrados en forma tabular utilizando bucles while y etiquetas HTML.

Botones de editar y eliminar

Resumen de la sección: En esta sección, se agrega funcionalidad a los botones de editar y eliminar en la tabla de registros. Se muestra cómo agregar iconos a los botones y cómo crear un formulario para editar un registro.

• Se agregan botones con estilos y se les asignan funciones de editar y eliminar.

• Se utilizan iconos para representar visualmente las acciones.

• Se crea un formulario de edición que permite modificar los datos del registro seleccionado.

Formulario de edición

Resumen de la sección: En esta sección, se crea un formulario para editar un registro existente. Se explica cómo utilizar propiedades específicas para realizar el llamado al formulario.

• Se crea una copia del modal utilizado para agregar nuevos registros.

• Se cambian los elementos necesarios, como el título del modal.

• Se utiliza una propiedad específica (data-bs) para realizar el llamado al formulario de edición.

Mostrar datos del registro a editar

Resumen de la sección: En esta sección, se explica cómo mostrar los datos del registro seleccionado en el formulario de edición. Esto es necesario para poder modificar correctamente un registro existente.

• Es necesario mostrar los datos actuales del registro en el formulario antes de realizar modificaciones.

• Se utiliza JavaScript para obtener los datos del registro seleccionado y mostrarlos en el formulario correspondiente.

Ventanas Modales y Eventos

Resumen de la sección: En esta sección se explica cómo trabajar con ventanas modales en JavaScript y cómo acceder a los eventos de visualización y ocultamiento de las mismas.

Detectar la ventana modal

• Se utiliza document.getElementById() para obtener la referencia a la ventana modal.

• Se asigna un evento de visualización utilizando addEventListener('show.bs.modal', ...).

• Se asigna un evento de ocultamiento utilizando addEventListener('hide.bs.modal', ...).

Evento 'show'

• El evento 'show' se dispara cuando se muestra la ventana modal al presionar un botón.

• Permite detectar qué botón o icono fue presionado para mostrar el modal.

Evento 'shown'

• El evento 'shown' se dispara cuando el modal ha terminado de cargar completamente.

• Es útil para realizar acciones una vez que el modal está completamente visible, como acceder a los elementos del formulario dentro del modal.

Accediendo a los elementos del formulario

Resumen de la sección: En esta sección se explica cómo acceder a los elementos del formulario dentro de una ventana modal para poder editar su contenido.

Obtener el botón presionado

• Se utiliza event.relatedTarget para obtener el botón o icono que fue presionado y disparó la apertura del modal.

Obtener el ID del registro

• Se utiliza getAttribute('data-bs-id') para obtener el ID del registro que se desea modificar.

• Este ID puede ser pasado como parámetro en una solicitud AJAX para actualizar los datos correspondientes.

Acceder a los elementos del formulario

• Se utiliza querySelector() para seleccionar los elementos del formulario dentro de la ventana modal.

• Se asignan variables a cada elemento del formulario para poder acceder a ellos y modificar su contenido.

Consulta AJAX para obtener información del registro

Resumen de la sección: En esta sección se explica cómo realizar una consulta AJAX para obtener la información de un registro y mostrarla en el formulario dentro de la ventana modal.

Realizar una consulta AJAX

• Se utiliza fetch() para realizar una solicitud POST a un archivo PHP que retornará los datos del registro solicitado.

• Se crea un objeto FormData que contiene los parámetros necesarios para la solicitud, como el ID del registro.

• La respuesta de la consulta se maneja utilizando .then(response => response.json()).

Mostrar los datos en el formulario

• Los datos obtenidos de la consulta AJAX se asignan a cada elemento correspondiente del formulario dentro del modal.

• Esto permite mostrar la información actual del registro y editarla si es necesario.

Ventajas de utilizar consultas AJAX

Resumen de la sección: En esta sección se explican las ventajas de utilizar consultas AJAX en lugar de enviar toda la información directamente al servidor.

Evitar alteraciones o envío excesivo de información

• Al utilizar consultas AJAX, solo se envía al servidor la información necesaria para obtener los datos específicos que se desean modificar.

• Esto evita posibles alteraciones accidentales o maliciosas en otros campos o registros no deseados.

• Además, reduce el tráfico y carga en el servidor al enviar solo lo necesario.

Manejo de errores y formato de respuesta

Resumen de la sección: En esta sección se explica cómo manejar errores en las consultas AJAX y el formato de respuesta esperado.

Manejo de errores

• Se utiliza .catch() para capturar cualquier error que ocurra durante la consulta AJAX.

• Esto permite mostrar un mensaje o realizar alguna acción específica en caso de error.

Formato de respuesta JSON

• Se indica que la respuesta del servidor será en formato JSON utilizando response.headers.set('Content-Type', 'application/json').

• La información obtenida del servidor se almacena en una variable llamada Data para su posterior uso.

Descripción y el género

Resumen de la sección: En esta sección, se discute la descripción y el género de las películas. Se menciona que estos datos aún no están definidos y se explica que es necesario crear un nuevo archivo para realizar la petición.

Definición de los datos

• Los datos de descripción y género aún no están definidos.

• Es necesario crear un nuevo archivo para realizar la petición.

Importar archivo de base de datos

Resumen de la sección: En esta sección, se muestra cómo importar el archivo de base de datos en PHP para su uso posterior.

Importar archivo

• Abrir el archivo PHP.

• Importar el archivo de base de datos.

Consulta SQL para obtener información

Resumen de la sección: En esta sección, se explica cómo realizar una consulta SQL para obtener información sobre una película específica.

Consulta SQL

• Realizar una consulta SELECT con los campos ID, nombre, descripción y género desde la tabla "película".

• Pasar el ID como parámetro en la consulta.

• Utilizar LIMIT 1 para detener la búsqueda después del primer resultado encontrado.

• Verificar si la consulta trae resultados utilizando la función num_rows().

• Si hay resultados, almacenarlos en un arreglo llamado "película" utilizando fetch_array().

Retornar información en formato JSON

Resumen de la sección: En esta sección, se muestra cómo retornar información en formato JSON utilizando el arreglo "película".

Retornar información en formato JSON

• Utilizar json_encode() para convertir el arreglo "película" en formato JSON.

• Si hay acentos en los datos, utilizar json_encode() con la opción JSON_UNESCAPED_UNICODE para procesarlos correctamente.

Actualizar información de una película

Resumen de la sección: En esta sección, se explica cómo actualizar la información de una película utilizando un formulario de edición.

Actualizar información

• Pasar el ID y los datos actualizados al archivo PHP correspondiente.

• Mostrar la información actualizada en el formulario de edición.

Cambiar ID del género

Resumen de la sección: En esta sección, se muestra cómo cambiar el ID del género en el código AJAX correspondiente.

Cambiar ID del género

• Modificar el código AJAX para que utilice el nuevo ID del género.

• Actualizar y revisar los cambios realizados.

Crear archivo para actualizar registro

Resumen de la sección: En esta sección, se explica cómo crear un nuevo archivo PHP para actualizar un registro específico en la base de datos.

Crear archivo para actualizar registro

• Crear un nuevo archivo llamado "actualiza.php" dentro de la carpeta "películas".

• Copiar y pegar el código necesario desde otro archivo existente.

• Modificar el SQL para realizar una consulta UPDATE con los campos nombre, descripción y género.

• Pasar el ID como parámetro en la consulta.

Eliminar registro y mostrar modal de confirmación

Resumen de la sección: En esta sección, se muestra cómo eliminar un registro y mostrar un modal de confirmación.

Eliminar registro y mostrar modal

• Crear un nuevo archivo para el modal de eliminación.

• Modificar los elementos del formulario y los labels correspondientes.

• Quitar todo el contenido innecesario del formulario.

Eliminación de formulario

Resumen de la sección: En esta parte del video, se explica cómo eliminar un formulario. Se muestra cómo trabajar con un DIF que pertenezca al fuder modal guión footer y pegar el formulario en la acción "eliminar". También se menciona que el método debe ser "post" y se agrega un input oculto llamado ID sin ningún valor. Se configuran los botones de cerrar y submit para realizar la eliminación.

Eliminación de formulario

• Se trabaja con un DIF que pertenezca al fuder modal guión footer y se pega el formulario en la acción "eliminar".

• El archivo elimina punto php también es método post.

• Se agrega un input oculto llamado ID sin ningún valor.

• Los botones de cerrar y submit son configurados para realizar la eliminación.

Actualización del Index

Resumen de la sección: En esta parte del video, se explica cómo actualizar el Index para que funcione correctamente con la eliminación. Se menciona que es necesario agregar el ID y todos los demás elementos necesarios.

Actualización del Index

• Se cambia elimina modal guardamos e incluimos abajo de edita modal.

• Se actualiza elimina modal.

• Se abre una línea de php para cada botón o se puede abrir una sola para todos. Se pasa información del registro o del botón seleccionado al modal de eliminar.

• Se relaciona elimina modal al final de todo.

Event Listener para eliminar

Resumen de la sección: En esta parte del video, se explica cómo agregar el event listener para eliminar. Se copia la función que detecta qué botón se presionó y se obtiene el ID. Luego, se busca el input llamado ID en el modal footer y se le pasa el valor de la variable ID.

Event Listener para eliminar

• Se copia la función que detecta qué botón se presionó.

• Se obtiene el ID y se busca el input llamado ID en el modal footer para pasarle su valor.

Creación del archivo elimina punto php

Resumen de la sección: En esta parte del video, se explica cómo crear el archivo elimina punto php. Se menciona que es necesario copiar el archivo actualiza y renombrarlo a elimina punto php. También se incluye la base de datos y se realiza una validación con respecto al ID recibido.

Creación del archivo elimina punto php

• Se crea un nuevo archivo llamado elimina punto php basándose en el archivo actualiza.

• Se incluye la base de datos y se realiza una validación con respecto al ID recibido.

Eliminación de registros

Resumen de la sección: En esta parte del video, se muestra cómo eliminar registros en el Index. Se agrega un botón para eliminar y se realiza la prueba eliminando un registro aleatorio. Luego, se verifica que el botón cerrar o eliminar aparezca correctamente y se visualiza la tabla actualizada sin el registro eliminado.

Eliminación de registros

• Se agrega un botón para eliminar en el Index.

• Se realiza la prueba eliminando un registro aleatorio.

• Se verifica que el botón cerrar o eliminar aparezca correctamente.

• Se visualiza la tabla actualizada sin el registro eliminado.

Guardar imagen y realizar validaciones

Resumen de la sección: En esta parte del video, se explica cómo guardar una imagen y realizar algunas validaciones. Se menciona que es necesario verificar si hay errores en la imagen seleccionada y validar su formato.

Guardar imagen y realizar validaciones

• Se verifica si hay errores en la imagen seleccionada.

• Se valida el formato de la imagen permitido.

• Se busca dentro del arreglo de formatos permitidos para validar el archivo enviado.

• Se verifica que el archivo tenga una extensión permitida.

• Se guarda la imagen en la carpeta "pósters" dentro de la carpeta "películas".

Consideraciones finales

Resumen de la sección: En esta parte del video, se menciona que es posible trabajar con otros formatos de imágenes y se finaliza el tutorial sobre cómo crear un CRUD con ventanas modales.

Consideraciones finales

• Se menciona que es posible trabajar con otros formatos de imágenes.

• Se finaliza el tutorial sobre cómo crear un CRUD con ventanas modales.

Obtención de información del archivo

Resumen de la sección: En esta parte del video, se explica cómo obtener información sobre un archivo, como el nombre, la extensión y la ruta. También se muestra cómo construir dinámicamente el nombre de un archivo utilizando variables.

Obtener información del archivo

• Se utiliza la variable name para obtener el nombre del archivo que se está pasando.

• La función info() devuelve un arreglo con información sobre el archivo.

• Se puede acceder a la extensión del archivo utilizando info().extensión.

• Para construir dinámicamente el nombre de un archivo, se puede utilizar una variable llamada póster y concatenar la ruta y el nombre deseado.

Guardar imagen en disco

Resumen de la sección: Aquí se explica cómo guardar una imagen en disco asociándola con un ID único en lugar de guardarla directamente en la base de datos. También se muestra cómo realizar validaciones adicionales antes de guardar el archivo.

Asociación y guardado en disco

• Se utiliza el ID del registro para asociar la imagen guardada en disco.

• El nombre completo y ubicación del archivo se construye concatenando variables como la ruta, el ID y la extensión.

• Se realiza una validación adicional para asegurarse de que todo esté correcto antes de proceder al guardado.

Validación adicional y creación de carpeta

Resumen de la sección: Aquí se muestra cómo realizar una validación adicional para verificar si existe una carpeta específica antes de guardar un archivo. En caso de que no exista, se crea la carpeta con los permisos necesarios.

Validación y creación de carpeta

• Se utiliza la función mkdir() para crear una carpeta si no existe.

• Se le pasan todos los permisos a la carpeta recién creada.

• Esto permite asegurarse de que la carpeta necesaria esté presente antes de guardar el archivo.

Mover archivo a ubicación deseada

Resumen de la sección: Aquí se muestra cómo mover un archivo desde su ubicación temporal a una ubicación deseada utilizando la función move_uploaded_file(). También se realiza una validación para verificar si el archivo se pudo mover correctamente.

Movimiento del archivo

• Se utiliza move_uploaded_file() para mover el archivo desde su ubicación temporal.

• Se pasa como primer parámetro el nombre temporal del archivo.

• Como segundo parámetro, se especifica el nuevo nombre y ubicación donde se desea guardar.

• La función devuelve verdadero o falso dependiendo de si el movimiento fue exitoso o no.

Manejo de mensajes y errores

Resumen de la sección: Aquí se muestra cómo generar mensajes temporales para informar sobre posibles errores o éxitos en las operaciones realizadas. Se utilizan variables de sesión para almacenar y mostrar estos mensajes.

Generar mensajes temporales

• Se utiliza session_start() al inicio del archivo para poder utilizar variables de sesión.

• Se crea una variable de sesión llamada msg para almacenar los mensajes temporales.

• Se pueden generar diferentes tipos de mensajes, como error al guardar imagen, formato de imagen no permitido, etc.

• Estos mensajes se mostrarán en la ventana principal de la aplicación.

Mostrar mensajes en la interfaz

Resumen de la sección: Aquí se muestra cómo mostrar los mensajes generados anteriormente en la interfaz de usuario utilizando alertas de Bootstrap. Se utiliza una variable de sesión para verificar si existen mensajes y, en caso afirmativo, se muestran las alertas correspondientes.

Mostrar mensajes en la interfaz

• Se utiliza isset() para verificar si existe la variable de sesión msg.

• Si existe, se muestran las alertas correspondientes utilizando el estilo de Bootstrap.

• Se recomienda eliminar las variables de sesión después de mostrar los mensajes para evitar que aparezcan repetidamente.

Pruebas

Se realizan pruebas para verificar el funcionamiento correcto del guardado de imágenes y el envío de mensajes.

Guardar ciencia ficción en la sección de ciencia ficción

Resumen de la sección: En esta sección, aprendemos cómo guardar una descripción y una imagen para la categoría de ciencia ficción en nuestra aplicación. También aprendemos a visualizar la imagen guardada en nuestra tabla.

Guardar descripción y visualizar imagen

• Usamos el método guardar para guardar la descripción de la categoría "ciencia ficción".

• Verificamos si la imagen ha sido cargada correctamente.

• Definimos la ruta del directorio donde se encuentran las imágenes.

• Agregamos un elemento <img> con el atributo src que contiene la dirección de la imagen concatenada con su nombre e extensión.

• Probamos y verificamos que la imagen se muestra correctamente.

Editar y reemplazar imágenes

Resumen de la sección: Aprendemos a editar y reemplazar imágenes en nuestra aplicación.

Editar y visualizar imágenes

• Agregamos un elemento <div> con una clase bm-3 para dar espacio a las imágenes.

• Asignamos un ID llamado img__poster al elemento <img>.

• Obtenemos el valor del ID de la imagen desde los datos de sesión.

• Pasamos esta información al atributo src del elemento <img>.

• Actualizamos y verificamos que los cambios se reflejen correctamente.

Reemplazar imágenes

• Copiamos el código necesario para reemplazar imágenes dentro del bloque actualiza.

• Verificamos si hay una selección válida antes de realizar el reemplazo.

• Mostramos mensajes de éxito o error al reemplazar la imagen.

Evitar caché del navegador

Resumen de la sección: Aprendemos a evitar que las imágenes se queden en la caché del navegador al actualizar o reemplazarlas.

• Agregamos un parámetro dinámico a la URL de la imagen utilizando time() para generar un valor único cada vez que se actualiza.

• Verificamos que los cambios se reflejen correctamente y no haya problemas con la caché del navegador.

Abrir sesión y mostrar mensajes

Resumen de la sección: Aprendemos a abrir una sesión y mostrar mensajes de éxito o error al guardar, editar o eliminar imágenes.

Abrir sesión y mostrar mensajes

• Abrimos una sesión en el archivo actualiza utilizando session_start().

• Mostramos mensajes personalizados según el resultado de las operaciones (guardar, editar, eliminar).

• Podemos cambiar los colores de los mensajes modificando las variables correspondientes.

Eliminar imágenes

Resumen de la sección: Aprendemos a eliminar imágenes en nuestra aplicación.

Confirmación antes de eliminar

• Utilizamos file_exists() para verificar si el archivo existe antes de realizar la eliminación.

• Mostramos un mensaje de confirmación antes de proceder con la eliminación.

Eliminación del archivo

• Utilizamos unlink() para eliminar el archivo.

• Verificamos que el registro haya sido eliminado correctamente.

Eliminación de archivos y mensajes

Resumen de la sección: En esta sección, se explica cómo eliminar archivos y agregar mensajes en la aplicación.

Eliminación de archivos

• Se utiliza un enlace para pasar la ruta y el nombre del archivo a eliminar.

• Al eliminar el archivo, se muestra un mensaje indicando que el registro ha sido eliminado.

• En caso de error al eliminar el registro, se muestra un mensaje de error.

Prueba de eliminación

• Se crea un nuevo registro llamado "Chucky" con una descripción, género y póster.

• Después de guardar el registro, se procede a eliminarlo.

• Se verifica que el archivo haya sido eliminado correctamente.

Limpieza de ventanas modales

• Se realiza una limpieza en las ventanas modales para evitar visualizar información anteriormente agregada.

• Esto evita posibles errores al cargar información incorrecta al editar o agregar nuevos registros.

Limpiar inputs en ventanas modales

• Se utilizan eventos para ocultar las ventanas modales y limpiar los campos input temporalmente.

• Se aplica esta funcionalidad tanto en la ventana modal para agregar nuevos registros como en la ventana modal para editar registros existentes.

Validaciones adicionales

• Se menciona que es posible agregar validaciones adicionales, como verificar que los campos no estén vacíos o tengan una cantidad específica de caracteres.

• Estas validaciones pueden implementarse utilizando cifras (cif) y mostrar mensajes de error correspondientes.

Conclusiones finales y recomendaciones

Resumen de la sección: En esta última parte del video, se concluye el desarrollo de la aplicación y se brindan recomendaciones para continuar trabajando en ella.

• Se menciona que se ha terminado de desarrollar la aplicación, pero se anima a seguir modificándola y agregando nuevos módulos.

• Se recomienda hacer pruebas adicionales y agregar más funcionalidades según las necesidades del proyecto.

• Se destaca la importancia de realizar validaciones y mostrar mensajes de error adecuados para mejorar la experiencia del usuario.

• Se finaliza el video con una invitación a continuar aprendiendo y mejorando las habilidades de programación.