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">&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

Nestor Tapia

Bloggero, amante de la programación PHP, innovador y me fascina compartir información. Desde que conocí el entorno informatico y el internet me llamó la atención la programación, Por tal motivo he creado mi blog BAULPHP.COM para compartir mis experiencias con todos ustedes. ¡Gracias por leerme!.

9 comentarios

  1. Buenas,
    Porqué cuando lo intento usar dentro de algun template de Admin Dashboard, ya sea con menú hecho en jquery o boostrap no me funcionan las modales?

    Saludos.

    1. Hola Marcos

      Primero verifica la version de bootstrap y la version de jQuery,. Si usas algun Admin Dashboard, generalmente vienen con ventanas modales integradas, puedes revisar su documentacion.

      Saludos

  2. hola, como se podria hacer para poner listas desplegables con datos de una table diferente, por ejemplo Elija un color y busque en la tabla “color” donde tiene columnas “id”, “nombredelcolor”… como se hace para poder seleccionar en la carga. una lista desplegable donde yo lo elija a la opcion y luego cuando lo guarde o cargue, aparezca los datos. para el sistema que hago si o si, necesito que tenga un ID de codigo.
    en la table los datos son los siguientes TABLA “color” Gracias.
    ID Nombrecolor
    1 rojo
    2 negro
    3 blanco

  3. Hola:

    Andrés, a mí me pasaba lo mismo que a ti. Me acabo de dar cuenta de cuál es el fallo…

    En la Contraseña, deja el campo vacío, así:

    private $password = “”;

    El Usuario debe ser “root” pero el password debe estar vacío.

    Espero que ahora te funcione.

    Saludetes. ;-)

  4. Hola Néstor:

    Estoy probando tu ejemplo de CRUD-PHP-PDO-BOOTSTRAP. Me he bajado el Código y al ejecutarlo me aparece este error:

    Hubo un problema con la conexión: invalid data source name
    Fatal error: Uncaught Error: Call to a member function query() on null in T:\XAMPP\htdocs\MIS-EJERCICIOS\-Crud-php-pdo-bootstrap-modal-ejemplo-completo\index.php:61 Stack trace: #0 {main} thrown in T:\XAMPP\htdocs\MIS-EJERCICIOS\-Crud-php-pdo-bootstrap-modal-ejemplo-completo\index.php on line 61

    En la Clase “Connection”, haces esta definición:

    private $server = “host=localhost;dbname=php_crudbootstrap”;
    private $username = “root”;
    private $password = “root”;

    No entiendo porqué en la variable $server metes también el nombre de la Base de Datos…. ¿No te faltaría definir una variable aparte para la Base de Datos?

    Gracias y saludos.

    José Manuel

  5. buenas noches me parece bueno el pdo pero me da un error en la linea 59 foreach ($db->query($sql) as $row) {
    ?> acá me muestra así
    Hubo un problema con la conexión: invalid data source name
    Fatal error: Uncaught Error: Call to a member function query() on null in C:\xampp\htdocs\crud-php-pdo-bootstrap-modal-ejemplo-completo\index.php:59 Stack trace: #0 {main} thrown in C:\xampp\htdocs\crud-php-pdo-bootstrap-modal-ejemplo-completo\index.php on line 59

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba