Lenguaje PHP
▷ CRUD PHP PDO BootStrap Modal: Ejemplo Completo
CRUD es el acrónimo de "Crear, Leer, Actualizar y Borrar"
CRUD PHP PDO BootStrap Modal. Primeramente, vamos a definir lo que es un sistema basado de CRUD. Este sistema en base del funcionamiento de todo sistema web. Por lo tanto, su uso es muy recomendado.
Se usa para referirse a las funciones estructurales entre el lenguaje de programación y la base de datos o la capa de persistencia en el sistema.
CRUD PHP PDO BootStrap Modal: Ejemplo Completo
CRUD es el acrónimo de «Crear, Leer, Actualizar y Borrar». del original en inglés:
- Create. Crear registros nuevos
- Read. Leer Los registros de la base de datos
- Update. Actualizar registros de la base de datos
- Delete. Borrar registros.
En este ejemplo utilizaremos librerías como ser el bootstrap y jQuery para mostrar las ventanas modales de bootstrap. Al final del articulo les dejare el paquete de descarga en formato ZIP. Pero si desea descargar de manera independiente, también les dejare vínculos siguientes:
ESTRUCTURA DEL SISTEMA CRUD PDO MYSQL
1. Creación de una base de datos MySQL.
Dentro del paquete de descarga se le dejará un fichero con el nombre «php_crudbootstrap.sql«, que contendrá la tabla y los registros para este ejemplo. solo debemos de importar el archivo al PHPMyADMIN.
CREATE TABLE IF NOT EXISTS `empleados` ( `idEmp` int(11) NOT NULL, `Nombres` varchar(100) DEFAULT NULL, `Apellidos` varchar(100) DEFAULT NULL, `Telefono` text, `Carrera` varchar(100) DEFAULT NULL, `Pais` varchar(100) DEFAULT NULL ) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8 COMMENT='Tabla Empleados'; INSERT INTO `empleados` (`idEmp`, `Nombres`, `Apellidos`, `Telefono`, `Carrera`, `Pais`) VALUES (1, 'Luis', 'Morales', '784521589', 'Modelamiento', 'Mexico'), (2, 'Katrina', 'Cespedes', '215489653', 'Psicologia', 'Panama'), (3, 'Antonio', 'Castelino', '025412569', 'Administracion', 'Adminsitrador '), (4, 'German', 'Molina', '745845214', 'Ing. Sistemas', 'Argentina'), (6, 'Marcial', 'Cancares', '545678903', 'Ing. Produccion', 'Colombia'); ALTER TABLE `empleados` ADD PRIMARY KEY (`idEmp`); ALTER TABLE `empleados` MODIFY `idEmp` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=7;
2. Creación de nuestra conexión
Fichero encargado de realizar la conexión a nuestra base de datos creando un nuevo archivo, lo nombramos como dbconect.php.
<?php
// Creamos la clase Connection
Class Connection{
// Declaramos los accesos al servidor de datos
private $server = "mysql:host=localhost;dbname=php_crudbootstrap";
private $username = "root";
private $password = "";
private $options = array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,);
protected $conn;
public function open(){
try{
$this->conn = new PDO($this->server, $this->username, $this->password, $this->options);
return $this->conn;
}
catch (PDOException $e){
// Muestra un mensaje si falla la conexión
echo "Hubo un problema con la conexión: " . $e->getMessage();
}
}
public function close(){
$this->conn = null;
}
}
?>Como vemos, esta conexión esta en base de PDO PHP haciendo que esta conexión sea muy fuerte, evitándonos las famosas inyecciones SQL.
3. Visualización de nuestros datos
Vamos a mostrar que los datos en nuestra tabla mediante la creación de un nuevo archivo, tendrá un nombre similar a index.php.
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<a href="#addnew" class="btn btn-primary" data-toggle="modal"><span class="glyphicon glyphicon-plus"></span> Nuevo Registro</a>
<?php
session_start();
if(isset($_SESSION['message'])){
?>
<div class="alert alert-info text-center" style="margin-top:20px;">
<?php echo $_SESSION['message']; ?>
</div>
<?php
unset($_SESSION['message']);
}
?>
<table class="table table-bordered table-striped" style="margin-top:20px;">
<thead>
<th>ID</th>
<th>Nombres</th>
<th>Apellidos</th>
<th>Telefono</th>
<th>Carrera</th>
<th>Pais</th>
<th>Acción</th>
</thead>
<tbody>
<?php
//incluimos el fichero de conexion
include_once('dbconect.php');
$database = new Connection();
$db = $database->open();
try{
$sql = 'SELECT * FROM empleados';
foreach ($db->query($sql) as $row) {
?>
<tr>
<td><?php echo $row['idEmp']; ?></td>
<td><?php echo $row['Nombres']; ?></td>
<td><?php echo $row['Apellidos']; ?></td>
<td><?php echo $row['Telefono']; ?></td>
<td><?php echo $row['Carrera']; ?></td>
<td><?php echo $row['Pais']; ?></td>
<td>
<a href="#edit_<?php echo $row['idEmp']; ?>" class="btn btn-success btn-sm" data-toggle="modal"><span class="glyphicon glyphicon-edit"></span> Editar</a>
<a href="#delete_<?php echo $row['idEmp']; ?>" class="btn btn-danger btn-sm" data-toggle="modal"><span class="glyphicon glyphicon-trash"></span> Borrar</a>
</td>
<?php include('BorrarEditarModal.php'); ?>
</tr>
<?php
}
}
catch(PDOException $e){
echo "Hubo un problema en la conexión: " . $e->getMessage();
}
//Cerrar la Conexion
$database->close();
?>
</tbody>
</table>
</div>
</div>
</div>4. Crear nuestro AgregarModal
Cuando presionamos en botón nuevo registro nos mostrará una ventana modal que contendrá un formulario con sus respectivos campos para ser almacenados en la base de datos. Este fichero tendrá como nombre «AgregarModal.php» y dentro tendrá los códigos siguientes.
<!-- Agregar Nuevos Registros -->
<div class="modal fade" id="addnew" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<center><h4 class="modal-title" id="myModalLabel">Agregar Nuevo Registro</h4></center>
</div>
<div class="modal-body">
<div class="container-fluid">
<form method="POST" action="AgregarNuevo.php">
<div class="row form-group">
<div class="col-sm-2">
<label class="control-label" style="position:relative; top:7px;">Nombres:</label>
</div>
<div class="col-sm-10">
<input type="text" class="form-control" name="nombres">
</div>
</div>
<div class="row form-group">
<div class="col-sm-2">
<label class="control-label" style="position:relative; top:7px;">Apellidos:</label>
</div>
<div class="col-sm-10">
<input type="text" class="form-control" name="apellidos">
</div>
</div>
<div class="row form-group">
<div class="col-sm-2">
<label class="control-label" style="position:relative; top:7px;">Telefono:</label>
</div>
<div class="col-sm-10">
<input type="text" class="form-control" name="telefono">
</div>
</div>
<div class="row form-group">
<div class="col-sm-2">
<label class="control-label" style="position:relative; top:7px;">Carrera:</label>
</div>
<div class="col-sm-10">
<input type="text" class="form-control" name="carrera">
</div>
</div>
<div class="row form-group">
<div class="col-sm-2">
<label class="control-label" style="position:relative; top:7px;">Pais:</label>
</div>
<div class="col-sm-10">
<input type="text" class="form-control" name="pais">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancelar</button>
<button type="submit" name="agregar" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk"></span> Guardar Registro</button>
</form>
</div>
</div>
</div>
</div>5. Crear nuestro modal de edición y eliminación
Un fichero muy importando en el cual estar destinada a mostrar ventanas modales con dos criterios, una de editar y la otra de eliminar registros y tendrá como nombre «BorrarEditarModal.php».
<!-- Ventana Editar Registros CRUD -->
<div class="modal fade" id="edit_<?php echo $row['idEmp']; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<center><h4 class="modal-title" id="myModalLabel">Editar Empleado</h4></center>
</div>
<div class="modal-body">
<div class="container-fluid">
<form method="POST" action="EditarRegistro.php?id=<?php echo $row['idEmp']; ?>">
<div class="row form-group">
<div class="col-sm-2">
<label class="control-label" style="position:relative; top:7px;">Apellidos:</label>
</div>
<div class="col-sm-10">
<input type="text" class="form-control" name="nombres" value="<?php echo $row['Nombres']; ?>">
</div>
</div>
<div class="row form-group">
<div class="col-sm-2">
<label class="control-label" style="position:relative; top:7px;">Apellidos:</label>
</div>
<div class="col-sm-10">
<input type="text" class="form-control" name="apellidos" value="<?php echo $row['Apellidos']; ?>">
</div>
</div>
<div class="row form-group">
<div class="col-sm-2">
<label class="control-label" style="position:relative; top:7px;">Telefono:</label>
</div>
<div class="col-sm-10">
<input type="text" class="form-control" name="telefono" value="<?php echo $row['Telefono']; ?>">
</div>
</div>
<div class="row form-group">
<div class="col-sm-2">
<label class="control-label" style="position:relative; top:7px;">Carrera:</label>
</div>
<div class="col-sm-10">
<input type="text" class="form-control" name="carrera" value="<?php echo $row['Carrera']; ?>">
</div>
</div>
<div class="row form-group">
<div class="col-sm-2">
<label class="control-label" style="position:relative; top:7px;">Pais:</label>
</div>
<div class="col-sm-10">
<input type="text" class="form-control" name="pais" value="<?php echo $row['Pais']; ?>">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
<button type="submit" name="editar" class="btn btn-success"><span class="glyphicon glyphicon-check"></span> Actualizar Ahora</a>
</form>
</div>
</div>
</div>
</div>
<!-- Borrar -->
<div class="modal fade" id="delete_<?php echo $row['idEmp']; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<center><h4 class="modal-title" id="myModalLabel">Borrar Empleado</h4></center>
</div>
<div class="modal-body">
<p class="text-center">¿Esta seguro de Borrar el registro?</p>
<h2 class="text-center"><?php echo $row['Nombres'].' '.$row['Apellidos']; ?></h2>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancelar</button>
<a href="BorrarRegistro.php?id=<?php echo $row['idEmp']; ?>" class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span> Si</a>
</div>
</div>
</div>
</div>
CONCLUSIÓN
EL uso de sistemas CRUD es muy requerido en el mundo de los sistemas web y/o sistemas de escritorio. Sin embargo, apoyados de una estructura PDO PHP es muy recomendable su implementación por estar en la vanguardia de la tecnología y evitándonos ataques tipo inyección SQL.
Aquí les traigo un ejemplo completo para que lo descarguen y lo implementen en sus proyectos web.
