Portada » Lenguaje PHP » ▷ CRUD PHP PDO BootStrap Modal: Ejemplo Completo

▷ 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.

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">&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>
CRUD PHP PDO BootStrap Modal
CRUD PHP PDO BootStrap Modal

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.

DESCARGA

Descargar Código Fuente

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación 5 / 5. Recuento de votos: 2

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

Scroll al inicio
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos.
Privacidad