├── README.md ├── acciones ├── acciones.php ├── delete.php ├── detallesEmpleado.php ├── exportar.php ├── fotos_empleados │ ├── 01cd6f93cc.png │ ├── 12db7e8ac4.png │ ├── 2c65bbfdcd.jpg │ ├── 3a849e81dc.png │ ├── 3ce60dc158.jpg │ ├── 478739b6a7.jpg │ ├── 51a9548ca7.jpg │ ├── 5b50200767.jpg │ ├── 5c0d32baf6.jpg │ ├── 62bbfd50ae.jpg │ ├── 63b69f9f46.png │ ├── 6a712f30fc.png │ ├── 77b58d34f9.jpg │ ├── 85fe34a0f6.png │ ├── 9a4882416d.jpg │ ├── 9f0eff5412.png │ ├── a26b9df685.png │ ├── a33538faf8.png │ ├── aa898ee329.jpg │ ├── ab25e2e59b.png │ ├── adec6d977f.png │ ├── afa8cc5deb.png │ ├── b70032d832.png │ ├── c20b5808b4.jpeg │ ├── c697e85d12.png │ ├── d6d2498deb.png │ ├── dab2e004e9.jpg │ ├── daea327347.jpg │ ├── dd12c93c0a.png │ ├── e913ce14ec.jpg │ ├── ead551230f.jpg │ ├── ef131b1547.jpg │ ├── f49ea9892c.png │ ├── f752ce2c9b.png │ └── fae4ddb19b.jpg ├── getEmpleado.php ├── getUltimoEmpleado.php └── updateEmpleado.php ├── assets ├── css │ └── home.css ├── imgs │ └── sin-foto.jpg └── js │ ├── addEmpleado.js │ ├── alertas.js │ ├── detallesEmpleado.js │ ├── editarEmpleado.js │ ├── eliminarEmpleado.js │ ├── refreshTableAdd.js │ └── refreshTableEdit.js ├── bd └── bd.sql ├── config └── config.php ├── empleados.php ├── index.php └── modales ├── modalAdd.php ├── modalDelete.php ├── modalDetalles.php └── modalEditar.php /README.md: -------------------------------------------------------------------------------- 1 | # CRUD completo con PHP, MySQL y Bootstrap 5 usando Ventanas Modales para todo. 2 | 3 | CRUD con PHP, MySQL y Bootstrap 5 mediante ventanas modales, sistema completo de gestión de datos, abarcando operaciones de (Create, Read, Update y Delete). Utiliza PHP, MySQL y Bootstrap 5 para la interfaz, ofreciendo una experiencia interactiva a través de modales. 4 | 5 | ![](https://raw.githubusercontent.com/urian121/imagenes-proyectos-github/master/crud-php-mysql-modales.png) 6 | 7 | ### Expresiones de Gratitud 🎁 8 | 9 | Comenta a otros sobre este proyecto 📢 10 | Invita una cerveza 🍺 o un café ☕ 11 | Paypal iamdeveloper86@gmail.com 12 | Da las gracias públicamente 🤓. 13 | 14 | ## No olvides SUSCRIBIRTE 👍 15 | -------------------------------------------------------------------------------- /acciones/acciones.php: -------------------------------------------------------------------------------- 1 | query($sql) === TRUE) { 39 | header("location:../"); 40 | } else { 41 | echo "Error al crear el registro: " . $conexion->error; 42 | } 43 | } else { 44 | echo json_encode(array('error' => 'Error al mover el archivo')); 45 | } 46 | } else { 47 | echo json_encode(array('error' => 'No se ha enviado ningún archivo o ha ocurrido un error al cargar el archivo')); 48 | } 49 | } 50 | 51 | /** 52 | * Función para obtener todos los empleados 53 | */ 54 | 55 | function obtenerEmpleados($conexion) 56 | { 57 | $sql = "SELECT * FROM tbl_empleados ORDER BY id ASC"; 58 | $resultado = $conexion->query($sql); 59 | if (!$resultado) { 60 | return false; 61 | } 62 | return $resultado; 63 | } 64 | -------------------------------------------------------------------------------- /acciones/delete.php: -------------------------------------------------------------------------------- 1 | query($sql) === TRUE) { 18 | // Eliminar el archivo de imagen si existe 19 | $dirLocal = "fotos_empleados"; 20 | $filePath = $dirLocal . '/' . $avatarName; 21 | if (file_exists($filePath)) { 22 | unlink($filePath); // Eliminar el archivo de imagen 23 | } 24 | echo json_encode(array("success" => true, "message" => "Empleado eliminado correctamente")); 25 | } else { 26 | echo json_encode(array("success" => false, "message" => "El parámetro 'id' no se proporcionó")); 27 | } 28 | } else { 29 | // Si no se proporcionó el parámetro 'action', devolver un mensaje de error 30 | echo json_encode(array("success" => false, "message" => "La acción no se proporcionó")); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /acciones/detallesEmpleado.php: -------------------------------------------------------------------------------- 1 | query($sql); 8 | $empleado = $query->fetch_assoc(); 9 | 10 | // Devolver los detalles del empleado como un objeto JSON 11 | header('Content-type: application/json; charset=utf-8'); 12 | echo json_encode($empleado); 13 | exit; 14 | -------------------------------------------------------------------------------- /acciones/exportar.php: -------------------------------------------------------------------------------- 1 | query($sql); 14 | 15 | // Verificar si hay datos obtenidos de la consulta 16 | if ($result->num_rows > 0) { 17 | // Abrir el archivo CSV para escritura 18 | $fp = fopen('php://output', 'w'); 19 | 20 | // Agregar los encabezados al archivo CSV 21 | fputcsv($fp, $fields); 22 | 23 | // Iterar sobre los resultados y agregar cada fila al archivo CSV 24 | while ($row = $result->fetch_assoc()) { 25 | fputcsv($fp, $row); 26 | } 27 | 28 | // Cerrar el archivo CSV 29 | fclose($fp); 30 | 31 | // Establecer las cabeceras para descargar el archivo CSV 32 | header('Content-Type: text/csv'); 33 | header('Content-Disposition: attachment; filename="' . $filename . '"'); 34 | 35 | // Detener la ejecución del script para que solo se descargue el archivo CSV 36 | exit(); 37 | } else { 38 | // Si no hay datos de empleados, redireccionar o mostrar un mensaje de error 39 | echo "No hay empleados para generar el reporte."; 40 | } 41 | 42 | // Cerrar la conexión a la base de datos 43 | $conexion->close(); 44 | -------------------------------------------------------------------------------- /acciones/fotos_empleados/01cd6f93cc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/urian121/crud-con-php-mysql-bootstrap5-usando-ventanas-modales/93c6efcc010fef028ef2c9b7bf4b86cd54a39132/acciones/fotos_empleados/01cd6f93cc.png -------------------------------------------------------------------------------- /acciones/fotos_empleados/12db7e8ac4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/urian121/crud-con-php-mysql-bootstrap5-usando-ventanas-modales/93c6efcc010fef028ef2c9b7bf4b86cd54a39132/acciones/fotos_empleados/12db7e8ac4.png -------------------------------------------------------------------------------- /acciones/fotos_empleados/2c65bbfdcd.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/urian121/crud-con-php-mysql-bootstrap5-usando-ventanas-modales/93c6efcc010fef028ef2c9b7bf4b86cd54a39132/acciones/fotos_empleados/2c65bbfdcd.jpg -------------------------------------------------------------------------------- /acciones/fotos_empleados/3a849e81dc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/urian121/crud-con-php-mysql-bootstrap5-usando-ventanas-modales/93c6efcc010fef028ef2c9b7bf4b86cd54a39132/acciones/fotos_empleados/3a849e81dc.png -------------------------------------------------------------------------------- /acciones/fotos_empleados/3ce60dc158.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/urian121/crud-con-php-mysql-bootstrap5-usando-ventanas-modales/93c6efcc010fef028ef2c9b7bf4b86cd54a39132/acciones/fotos_empleados/3ce60dc158.jpg -------------------------------------------------------------------------------- /acciones/fotos_empleados/478739b6a7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/urian121/crud-con-php-mysql-bootstrap5-usando-ventanas-modales/93c6efcc010fef028ef2c9b7bf4b86cd54a39132/acciones/fotos_empleados/478739b6a7.jpg -------------------------------------------------------------------------------- /acciones/fotos_empleados/51a9548ca7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/urian121/crud-con-php-mysql-bootstrap5-usando-ventanas-modales/93c6efcc010fef028ef2c9b7bf4b86cd54a39132/acciones/fotos_empleados/51a9548ca7.jpg -------------------------------------------------------------------------------- /acciones/fotos_empleados/5b50200767.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/urian121/crud-con-php-mysql-bootstrap5-usando-ventanas-modales/93c6efcc010fef028ef2c9b7bf4b86cd54a39132/acciones/fotos_empleados/5b50200767.jpg -------------------------------------------------------------------------------- /acciones/fotos_empleados/5c0d32baf6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/urian121/crud-con-php-mysql-bootstrap5-usando-ventanas-modales/93c6efcc010fef028ef2c9b7bf4b86cd54a39132/acciones/fotos_empleados/5c0d32baf6.jpg -------------------------------------------------------------------------------- /acciones/fotos_empleados/62bbfd50ae.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/urian121/crud-con-php-mysql-bootstrap5-usando-ventanas-modales/93c6efcc010fef028ef2c9b7bf4b86cd54a39132/acciones/fotos_empleados/62bbfd50ae.jpg -------------------------------------------------------------------------------- /acciones/fotos_empleados/63b69f9f46.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/urian121/crud-con-php-mysql-bootstrap5-usando-ventanas-modales/93c6efcc010fef028ef2c9b7bf4b86cd54a39132/acciones/fotos_empleados/63b69f9f46.png -------------------------------------------------------------------------------- /acciones/fotos_empleados/6a712f30fc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/urian121/crud-con-php-mysql-bootstrap5-usando-ventanas-modales/93c6efcc010fef028ef2c9b7bf4b86cd54a39132/acciones/fotos_empleados/6a712f30fc.png -------------------------------------------------------------------------------- /acciones/fotos_empleados/77b58d34f9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/urian121/crud-con-php-mysql-bootstrap5-usando-ventanas-modales/93c6efcc010fef028ef2c9b7bf4b86cd54a39132/acciones/fotos_empleados/77b58d34f9.jpg -------------------------------------------------------------------------------- /acciones/fotos_empleados/85fe34a0f6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/urian121/crud-con-php-mysql-bootstrap5-usando-ventanas-modales/93c6efcc010fef028ef2c9b7bf4b86cd54a39132/acciones/fotos_empleados/85fe34a0f6.png -------------------------------------------------------------------------------- /acciones/fotos_empleados/9a4882416d.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/urian121/crud-con-php-mysql-bootstrap5-usando-ventanas-modales/93c6efcc010fef028ef2c9b7bf4b86cd54a39132/acciones/fotos_empleados/9a4882416d.jpg -------------------------------------------------------------------------------- /acciones/fotos_empleados/9f0eff5412.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/urian121/crud-con-php-mysql-bootstrap5-usando-ventanas-modales/93c6efcc010fef028ef2c9b7bf4b86cd54a39132/acciones/fotos_empleados/9f0eff5412.png -------------------------------------------------------------------------------- /acciones/fotos_empleados/a26b9df685.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/urian121/crud-con-php-mysql-bootstrap5-usando-ventanas-modales/93c6efcc010fef028ef2c9b7bf4b86cd54a39132/acciones/fotos_empleados/a26b9df685.png -------------------------------------------------------------------------------- /acciones/fotos_empleados/a33538faf8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/urian121/crud-con-php-mysql-bootstrap5-usando-ventanas-modales/93c6efcc010fef028ef2c9b7bf4b86cd54a39132/acciones/fotos_empleados/a33538faf8.png -------------------------------------------------------------------------------- /acciones/fotos_empleados/aa898ee329.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/urian121/crud-con-php-mysql-bootstrap5-usando-ventanas-modales/93c6efcc010fef028ef2c9b7bf4b86cd54a39132/acciones/fotos_empleados/aa898ee329.jpg -------------------------------------------------------------------------------- /acciones/fotos_empleados/ab25e2e59b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/urian121/crud-con-php-mysql-bootstrap5-usando-ventanas-modales/93c6efcc010fef028ef2c9b7bf4b86cd54a39132/acciones/fotos_empleados/ab25e2e59b.png -------------------------------------------------------------------------------- /acciones/fotos_empleados/adec6d977f.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/urian121/crud-con-php-mysql-bootstrap5-usando-ventanas-modales/93c6efcc010fef028ef2c9b7bf4b86cd54a39132/acciones/fotos_empleados/adec6d977f.png -------------------------------------------------------------------------------- /acciones/fotos_empleados/afa8cc5deb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/urian121/crud-con-php-mysql-bootstrap5-usando-ventanas-modales/93c6efcc010fef028ef2c9b7bf4b86cd54a39132/acciones/fotos_empleados/afa8cc5deb.png -------------------------------------------------------------------------------- /acciones/fotos_empleados/b70032d832.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/urian121/crud-con-php-mysql-bootstrap5-usando-ventanas-modales/93c6efcc010fef028ef2c9b7bf4b86cd54a39132/acciones/fotos_empleados/b70032d832.png -------------------------------------------------------------------------------- /acciones/fotos_empleados/c20b5808b4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/urian121/crud-con-php-mysql-bootstrap5-usando-ventanas-modales/93c6efcc010fef028ef2c9b7bf4b86cd54a39132/acciones/fotos_empleados/c20b5808b4.jpeg -------------------------------------------------------------------------------- /acciones/fotos_empleados/c697e85d12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/urian121/crud-con-php-mysql-bootstrap5-usando-ventanas-modales/93c6efcc010fef028ef2c9b7bf4b86cd54a39132/acciones/fotos_empleados/c697e85d12.png -------------------------------------------------------------------------------- /acciones/fotos_empleados/d6d2498deb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/urian121/crud-con-php-mysql-bootstrap5-usando-ventanas-modales/93c6efcc010fef028ef2c9b7bf4b86cd54a39132/acciones/fotos_empleados/d6d2498deb.png -------------------------------------------------------------------------------- /acciones/fotos_empleados/dab2e004e9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/urian121/crud-con-php-mysql-bootstrap5-usando-ventanas-modales/93c6efcc010fef028ef2c9b7bf4b86cd54a39132/acciones/fotos_empleados/dab2e004e9.jpg -------------------------------------------------------------------------------- /acciones/fotos_empleados/daea327347.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/urian121/crud-con-php-mysql-bootstrap5-usando-ventanas-modales/93c6efcc010fef028ef2c9b7bf4b86cd54a39132/acciones/fotos_empleados/daea327347.jpg -------------------------------------------------------------------------------- /acciones/fotos_empleados/dd12c93c0a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/urian121/crud-con-php-mysql-bootstrap5-usando-ventanas-modales/93c6efcc010fef028ef2c9b7bf4b86cd54a39132/acciones/fotos_empleados/dd12c93c0a.png -------------------------------------------------------------------------------- /acciones/fotos_empleados/e913ce14ec.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/urian121/crud-con-php-mysql-bootstrap5-usando-ventanas-modales/93c6efcc010fef028ef2c9b7bf4b86cd54a39132/acciones/fotos_empleados/e913ce14ec.jpg -------------------------------------------------------------------------------- /acciones/fotos_empleados/ead551230f.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/urian121/crud-con-php-mysql-bootstrap5-usando-ventanas-modales/93c6efcc010fef028ef2c9b7bf4b86cd54a39132/acciones/fotos_empleados/ead551230f.jpg -------------------------------------------------------------------------------- /acciones/fotos_empleados/ef131b1547.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/urian121/crud-con-php-mysql-bootstrap5-usando-ventanas-modales/93c6efcc010fef028ef2c9b7bf4b86cd54a39132/acciones/fotos_empleados/ef131b1547.jpg -------------------------------------------------------------------------------- /acciones/fotos_empleados/f49ea9892c.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/urian121/crud-con-php-mysql-bootstrap5-usando-ventanas-modales/93c6efcc010fef028ef2c9b7bf4b86cd54a39132/acciones/fotos_empleados/f49ea9892c.png -------------------------------------------------------------------------------- /acciones/fotos_empleados/f752ce2c9b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/urian121/crud-con-php-mysql-bootstrap5-usando-ventanas-modales/93c6efcc010fef028ef2c9b7bf4b86cd54a39132/acciones/fotos_empleados/f752ce2c9b.png -------------------------------------------------------------------------------- /acciones/fotos_empleados/fae4ddb19b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/urian121/crud-con-php-mysql-bootstrap5-usando-ventanas-modales/93c6efcc010fef028ef2c9b7bf4b86cd54a39132/acciones/fotos_empleados/fae4ddb19b.jpg -------------------------------------------------------------------------------- /acciones/getEmpleado.php: -------------------------------------------------------------------------------- 1 | query($sql); 11 | 12 | // Verificar si la consulta se ejecutó correctamente 13 | if (!$resultado) { 14 | // Manejar el error aquí si la consulta no se ejecuta correctamente 15 | echo json_encode(["error" => "Error al obtener los detalles del empleado: " . $conexion->error]); 16 | exit(); 17 | } 18 | 19 | // Obtener los detalles del empleado como un array asociativo 20 | $empleado = $resultado->fetch_assoc(); 21 | 22 | // Devolver los detalles del empleado como un objeto JSON 23 | header('Content-type: application/json; charset=utf-8'); 24 | echo json_encode($empleado); 25 | exit; 26 | } 27 | -------------------------------------------------------------------------------- /acciones/getUltimoEmpleado.php: -------------------------------------------------------------------------------- 1 | query($sql); 8 | 9 | // Verificar si la consulta se ejecutó correctamente 10 | if (!$resultado) { 11 | echo json_encode(["error" => "Error al obtener los detalles del empleado: " . $conexion->error]); 12 | exit(); 13 | } 14 | 15 | // Obtener los detalles del ultimo empleado registrado, como un array asociativo 16 | $empleado = $resultado->fetch_assoc(); 17 | 18 | // Devolver los detalles del empleado como un objeto JSON 19 | header('Content-type: application/json; charset=utf-8'); 20 | echo json_encode($empleado); 21 | exit; 22 | } 23 | -------------------------------------------------------------------------------- /acciones/updateEmpleado.php: -------------------------------------------------------------------------------- 1 | 0) { 17 | $archivoTemporal = $_FILES['avatar']['tmp_name']; 18 | $nombreArchivo = $_FILES['avatar']['name']; 19 | 20 | $extension = strtolower(pathinfo($nombreArchivo, PATHINFO_EXTENSION)); 21 | 22 | // Genera un nombre único y seguro para el archivo 23 | $dirLocal = "fotos_empleados"; 24 | $nombreArchivo = substr(md5(uniqid(rand())), 0, 10) . "." . $extension; 25 | $rutaDestino = $dirLocal . '/' . $nombreArchivo; 26 | 27 | if (move_uploaded_file($archivoTemporal, $rutaDestino)) { 28 | $avatar = $nombreArchivo; 29 | } 30 | } 31 | 32 | // Actualiza los datos en la base de datos 33 | $sql = "UPDATE tbl_empleados 34 | SET nombre='$nombre', edad='$edad', cedula='$cedula', sexo='$sexo', telefono='$telefono', cargo='$cargo'"; 35 | 36 | // Si hay un nuevo avatar, actualiza su valor 37 | if ($avatar !== null) { 38 | $sql .= ", avatar='$avatar'"; 39 | } 40 | 41 | $sql .= " WHERE id='$id'"; 42 | 43 | if ($conexion->query($sql) === TRUE) { 44 | header("location:../"); 45 | } else { 46 | echo "Error al actualizar el registro: " . $conexion->error; 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /assets/css/home.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #f0f0f0 !important; 3 | } 4 | .container { 5 | background-color: #fff !important; 6 | padding: 20px; 7 | border-radius: 10px; 8 | } 9 | label { 10 | display: flex; 11 | justify-content: flex-start; 12 | } 13 | .btn_add { 14 | width: 100%; 15 | border: 1px solid #333 !important; 16 | background-color: #333 !important; 17 | } 18 | .btn_add:hover { 19 | opacity: 0.8; 20 | } 21 | .btn-success { 22 | border: 1px solid #06c046 !important; 23 | background-color: #06c046 !important; 24 | } 25 | hr { 26 | height: 0.1px !important; 27 | color: #06c046 !important; 28 | width: 100% !important; 29 | background-color: red; 30 | } 31 | .bi-arrow-right-circle { 32 | font-size: 30px; 33 | } 34 | .titulo_modal { 35 | width: 100%; 36 | display: flex; 37 | justify-content: center; 38 | color: #444; 39 | font-weight: bold; 40 | font-size: 20px; 41 | text-align: center; 42 | } 43 | thead tr th { 44 | text-align: start !important; 45 | } 46 | tr td { 47 | text-align: start !important; 48 | } 49 | -------------------------------------------------------------------------------- /assets/imgs/sin-foto.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/urian121/crud-con-php-mysql-bootstrap5-usando-ventanas-modales/93c6efcc010fef028ef2c9b7bf4b86cd54a39132/assets/imgs/sin-foto.jpg -------------------------------------------------------------------------------- /assets/js/addEmpleado.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Modal para agregar un nuevo empleado 3 | */ 4 | async function modalRegistrarEmpleado() { 5 | try { 6 | // Ocultar la modal si está abierta 7 | const existingModal = document.getElementById("detalleEmpleadoModal"); 8 | if (existingModal) { 9 | const modal = bootstrap.Modal.getInstance(existingModal); 10 | if (modal) { 11 | modal.hide(); 12 | } 13 | existingModal.remove(); // Eliminar la modal existente 14 | } 15 | 16 | const response = await fetch("modales/modalAdd.php"); 17 | 18 | if (!response.ok) { 19 | throw new Error("Error al cargar la modal"); 20 | } 21 | 22 | // response.text() es un método en programación que se utiliza para obtener el contenido de texto de una respuesta HTTP 23 | const data = await response.text(); 24 | 25 | // Crear un elemento div para almacenar el contenido de la modal 26 | const modalContainer = document.createElement("div"); 27 | modalContainer.innerHTML = data; 28 | 29 | // Agregar la modal al documento actual 30 | document.body.appendChild(modalContainer); 31 | 32 | // Mostrar la modal 33 | const myModal = new bootstrap.Modal( 34 | modalContainer.querySelector("#agregarEmpleadoModal") 35 | ); 36 | myModal.show(); 37 | } catch (error) { 38 | console.error(error); 39 | } 40 | } 41 | 42 | /** 43 | * Función para enviar el formulario al backend 44 | */ 45 | async function registrarEmpleado(event) { 46 | try { 47 | event.preventDefault(); // Evitar que la página se recargue al enviar el formulario 48 | 49 | const formulario = document.querySelector("#formularioEmpleado"); 50 | // Crear un objeto FormData para enviar los datos del formulario 51 | const formData = new FormData(formulario); 52 | 53 | // Enviar los datos del formulario al backend usando Axios 54 | const response = await axios.post("acciones/acciones.php", formData); 55 | 56 | // Verificar la respuesta del backend 57 | if (response.status === 200) { 58 | // Llamar a la función insertEmpleadoTable para insertar el nuevo registro en la tabla 59 | window.insertEmpleadoTable(); 60 | 61 | setTimeout(() => { 62 | $("#agregarEmpleadoModal").css("opacity", ""); 63 | $("#agregarEmpleadoModal").modal("hide"); 64 | 65 | //Llamar a la función para mostrar un mensaje de éxito 66 | toastr.options = window.toastrOptions; 67 | toastr.success("¡El empleado se actualizo correctamente!."); 68 | }, 600); 69 | } else { 70 | console.error("Error al registrar el empleado"); 71 | } 72 | } catch (error) { 73 | console.error("Error al enviar el formulario", error); 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /assets/js/alertas.js: -------------------------------------------------------------------------------- 1 | window.toastrOptions = { 2 | closeButton: true, 3 | debug: false, 4 | newestOnTop: false, 5 | progressBar: true, 6 | positionClass: "toast-top-right", 7 | preventDuplicates: false, 8 | onclick: null, 9 | showDuration: "300", 10 | hideDuration: "1000", 11 | timeOut: "7000", 12 | extendedTimeOut: "1000", 13 | showEasing: "swing", 14 | hideEasing: "linear", 15 | showMethod: "fadeIn", 16 | hideMethod: "fadeOut", 17 | }; 18 | -------------------------------------------------------------------------------- /assets/js/detallesEmpleado.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Función para mostrar la modal de detalles del empleado 3 | */ 4 | async function verDetallesEmpleado(idEmpleado) { 5 | try { 6 | // Ocultar la modal si está abierta 7 | const existingModal = document.getElementById("detalleEmpleadoModal"); 8 | if (existingModal) { 9 | const modal = bootstrap.Modal.getInstance(existingModal); 10 | if (modal) { 11 | modal.hide(); 12 | } 13 | existingModal.remove(); // Eliminar la modal existente 14 | } 15 | 16 | // Buscar la Modal de Detalles 17 | const response = await fetch("modales/modalDetalles.php"); 18 | if (!response.ok) { 19 | throw new Error("Error al cargar la modal de detalles del empleado"); 20 | } 21 | // response.text() es un método en programación que se utiliza para obtener el contenido de texto de una respuesta HTTP 22 | const modalHTML = await response.text(); 23 | 24 | // Crear un elemento div para almacenar el contenido de la modal 25 | const modalContainer = document.createElement("div"); 26 | modalContainer.innerHTML = modalHTML; 27 | 28 | // Agregar la modal al documento actual 29 | document.body.appendChild(modalContainer); 30 | 31 | // Mostrar la modal 32 | const myModal = new bootstrap.Modal( 33 | modalContainer.querySelector("#detalleEmpleadoModal") 34 | ); 35 | myModal.show(); 36 | 37 | await cargarDetalleEmpleado(idEmpleado); 38 | } catch (error) { 39 | console.error(error); 40 | } 41 | } 42 | 43 | /** 44 | * Función para cargar y mostrar los detalles del empleado en la modal 45 | */ 46 | async function cargarDetalleEmpleado(idEmpleado) { 47 | try { 48 | const response = await axios.get( 49 | `acciones/detallesEmpleado.php?id=${idEmpleado}` 50 | ); 51 | if (response.status === 200) { 52 | console.log(response.data); 53 | const { nombre, edad, cedula, sexo, telefono, cargo, avatar } = 54 | response.data; 55 | const avatarURL = avatar ? `acciones/fotos_empleados/${avatar}` : null; 56 | const avatarExistente = avatarURL 57 | ? await verificarExistenciaImagen(avatarURL) 58 | : false; 59 | const avatarHTML = avatarExistente 60 | ? `Avatar` 61 | : "No disponible"; 62 | 63 | // Limpiar el contenido existente de la lista ul 64 | 65 | const ulDetalleEmpleado = document.querySelector( 66 | "#detalleEmpleadoContenido ul" 67 | ); 68 | 69 | ulDetalleEmpleado.innerHTML = ` 70 |
  • Nombre: 71 | ${nombre ? nombre : "No disponible"} 72 |
    • 73 |
  • Edad: 74 | ${edad ? edad : "No disponible"} 75 |
    • 76 |
  • Cédula: 77 | ${cedula ? cedula : "No disponible"} 78 |
    • 79 |
  • Sexo: 80 | ${sexo ? sexo : "No disponible"} 81 |
    • 82 |
  • Teléfono: ${ 83 | telefono ? telefono : "No disponible" 84 | }
    • 85 |
  • Cargo: 86 | ${cargo ? cargo : "No disponible"} 87 |
    • 88 |
  • Avatar: ${avatarHTML}
    • 89 | `; 90 | } else { 91 | alert(`Error al cargar los detalles del empleado con ID ${idEmpleado}`); 92 | } 93 | } catch (error) { 94 | console.error(error); 95 | alert("Hubo un problema al cargar los detalles del empleado"); 96 | } 97 | } 98 | 99 | // Función para verificar la existencia de una imagen 100 | async function verificarExistenciaImagen(url) { 101 | try { 102 | const response = await fetch(url, { method: "HEAD" }); 103 | return response.ok; 104 | } catch (error) { 105 | console.error("Error al verificar la existencia de la imagen:", error); 106 | return false; 107 | } 108 | } 109 | -------------------------------------------------------------------------------- /assets/js/editarEmpleado.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Función para mostrar la modal de editar el empleado 3 | */ 4 | async function editarEmpleado(idEmpleado) { 5 | try { 6 | // Ocultar la modal si está abierta 7 | const existingModal = document.getElementById("editarEmpleadoModal"); 8 | if (existingModal) { 9 | const modal = bootstrap.Modal.getInstance(existingModal); 10 | if (modal) { 11 | modal.hide(); 12 | } 13 | existingModal.remove(); // Eliminar la modal existente 14 | } 15 | 16 | const response = await fetch("modales/modalEditar.php"); 17 | if (!response.ok) { 18 | throw new Error("Error al cargar la modal de editar el empleado"); 19 | } 20 | const modalHTML = await response.text(); 21 | 22 | // Crear un elemento div para almacenar el contenido de la modal 23 | const modalContainer = document.createElement("div"); 24 | modalContainer.innerHTML = modalHTML; 25 | 26 | // Agregar la modal al documento actual 27 | document.body.appendChild(modalContainer); 28 | 29 | // Mostrar la modal 30 | const myModal = new bootstrap.Modal( 31 | modalContainer.querySelector("#editarEmpleadoModal") 32 | ); 33 | myModal.show(); 34 | 35 | await cargarDatosEmpleadoEditar(idEmpleado); 36 | } catch (error) { 37 | console.error(error); 38 | } 39 | } 40 | 41 | /** 42 | * Función buscar información del empleado seleccionado y cargarla en la modal 43 | */ 44 | async function cargarDatosEmpleadoEditar(idEmpleado) { 45 | try { 46 | const response = await axios.get( 47 | `acciones/detallesEmpleado.php?id=${idEmpleado}` 48 | ); 49 | if (response.status === 200) { 50 | const { id, nombre, edad, cedula, sexo, telefono, cargo, avatar } = 51 | response.data; 52 | 53 | console.log(id, nombre, edad, cedula, sexo, telefono, cargo, avatar); 54 | document.querySelector("#idempleado").value = id; 55 | document.querySelector("#nombre").value = nombre; 56 | document.querySelector("#edad").value = edad; 57 | document.querySelector("#cedula").value = cedula; 58 | document.querySelector("#telefono").value = telefono; 59 | 60 | // Seleccionar el sexo correspondiente 61 | seleccionarSexo(sexo); 62 | 63 | // Obtener el elemento 13 | 14 |
    15 | 16 | 17 |
    18 |
    19 |
    20 | 21 | 28 |
    29 | 30 |
    31 | 32 |
    33 | 34 | 37 |
    38 |
    39 | 40 | 43 |
    44 |
    45 |
    46 | 47 |
    48 | 49 | 50 |
    51 | 52 |
    53 | 54 | 70 |
    71 | 72 |
    73 | 74 | 75 |
    76 | 77 |
    78 | 81 |
    82 | 83 | 84 | 85 | 86 | -------------------------------------------------------------------------------- /modales/modalDelete.php: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /modales/modalDetalles.php: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /modales/modalEditar.php: -------------------------------------------------------------------------------- 1 | 94 | --------------------------------------------------------------------------------