CRUD PHP PDO BootStrap

Modal: Ejemplo Completo

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.
Índice
1. CRUD PHP PDO BootStrap Modal: Ejemplo Completo
1. ESTRUCTURA DEL SISTEMA CRUD PDO MYSQL
2. CONCLUSIÓN
3. DESCARGA
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:
 Bootstrap
 Jquery
 Crear nuestra base de datos

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">&times;</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">&times;</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">&times;</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.