Abrir XAMPP
Ejecutar APACHE y MYSQL (el apache es para que pueda cargar PHPMYADMIN)
Una vez que estén ambos en verde, le damos clic al botón ADMIN del servicio MYSQL. Deberá abrirse la siguiente
ventana:
También podemos ejecutar el query
CREATE TABLE `dbpruebaB2`.`cliente` (
`idcliente` INT NOT NULL AUTO_INCREMENT,
`nombres` VARCHAR(45) NULL,
`paterno` VARCHAR(45) NULL,
`materno` VARCHAR(45) NULL,
`dni` CHAR(8) NULL,
PRIMARY KEY (`idcliente`));
Probar conexión a BD
<?php
$servidor="localhost";
$db="dbpruebab2";
$user="root";
$pass="";
try {
$conexion=new PDO("mysql:host=$servidor;dbname=$db",$user,$pass);
echo "conexion exitosa";
} catch(Exception $e)
{
echo $e->getMessage();
}
?>
Listar registros
Primero registramos directamente en la bd un cliente
INSERT INTO `dbpruebab2`.`cliente` (`nombres`, `paterno`, `materno`, `dni`) VALUES ('Sara', 'Ramirez', 'Soto',
'76584323');
Comentamos el mensaje de conexión exitosa del archivo conexión.php
Utilizamos una plantilla que usa Bootstrap en nuestro archivo index.php de la carpeta CRUDB2
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
></script>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container class.</p>
<p>The .container class provides a responsive fixed width container.</p>
</div>
</body>
</html>
Al abrir la página debe verse así:
Ahora separamos esta plantilla en header.php y footer.php, donde la parte que llega hasta el <body> irá como
header y desde el </body> al final en el footer.
Quedando de la siguiente manera:
* se debe incluir <?php $url_base="http://localhost/crudB2" ?> al principio del header.php
Y el archivo index.php quedará así
Si volvemos a probar la página tendremos el mismo resultado que al principio
Ahora preparamos el index para el CRUD del cliente, este index consistirá en listar todos los registros que se
encuentran en la tabla cliente
En el contenido del index.php de cliente, vamos a colocar una tabla con diseño de Bootstrap
Debe verse así:
Luego incluimos el siguiente código al principio el cual servirá para traer los registros de la base de datos
include("../conexion.php");
$stm = $conexion->prepare("SELECT * FROM cliente");
$stm->execute();
$clientes=$stm->fetchAll(PDO::FETCH_ASSOC);
?>
Y entre las etiquetas <tbody> y </tbody> incluimos el siguiente código
<?php foreach($clientes as $cliente) { ?>
<tr>
<td><?php echo $cliente['idcliente']; ?></td>
<td><?php echo $cliente['nombres']; ?></td>
<td><?php echo $cliente['paterno']; ?></td>
<td><?php echo $cliente['materno']; ?></td>
<td><?php echo $cliente['dni']; ?></td>
</tr>
<?php } ?>
Si insertaste registros en la tabla previamente, deberás tener un resultado como este:
INSERTAR CLIENTE
En el registrasr.php del CRUD cliente pegamos el siguiente código
<!-- Modal -->
<div class="modal fade" id="registrarCliente" tabindex="-1" aria-
labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Registrar Cliente</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-
label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-
dismiss="modal">Cerrar</button>
<button type="button" class="btn btn-primary">Guardar</button>
</div>
</div>
</div>
</div>
Luego ponemos el siguiente código sobre la tabla del index.php del CRUD cliente
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-
target="#registrarCliente">
Nuevo cliente
</button>
Y casi al final del documento agregamos la línea <?php include("registrar.php"); ?>
Al ejecutarlo deberás tener este resultado:
Ahora vamos a incluir los campos necesarios para que funcione nuestro formulario de registro. Nos ubicamos en el
archivo registrar.php del CRUD cliente
Y en los … vamos a incluir el siguiente código:
<label for="">Nombres</label>
<input type="text" class="form-control" name="nombres" value ""
placeholder="ingrese su nombre">
<label for="">Apellido Paterno</label>
<input type="text" class="form-control" name="nombres" value ""
placeholder="ingrese su apellido paterno">
<label for="">Apellido Materno</label>
<input type="text" class="form-control" name="nombres" value ""
placeholder="ingrese su apellido materno">
<label for="">DNI</label>
<input type="text" class="form-control" name="nombres" value ""
placeholder="ingrese su número de dni">
Todo el div modal-body debe estar dentro de una etiqueta form
Y también debemos cambiar el tipo de botón Guardar de button a submit
En la parte superior debemos incluir el siguiente código
<?php
if($_POST) {
$nombres=(isset($_POST['nombres'])?$_POST['nombres']:"");
$paterno=(isset($_POST['paterno'])?$_POST['paterno']:"");
$materno=(isset($_POST['materno'])?$_POST['materno']:"");
$dni=(isset($_POST['dni'])?$_POST['dni']:"");
$stm=$conexion->prepare("INSERT INTO cliente(nombres,paterno,materno,dni)
VALUES(:nombres,:paterno,:materno,:dni)");
$stm->bindParam(":nombres",$nombres);
$stm->bindParam(":paterno",$paterno);
$stm->bindParam(":materno",$materno);
$stm->bindParam(":dni",$dni);
$stm->execute();
header("location:index.php");
}
?>
Al ejecutarlo vemos lo siguiente:
Ahora agregamos a la tabla un botón para editar y otro para eliminar
Eliminar Cliente
En el hipervínculo para el botón eliminar cambiamos por:
<td><a href="index.php?<?php echo $cliente['idcliente']; ?>" class="btn btn-
danger">Eliminar</a>
También añadimos el siguiente código en la parte superior
if(isset($_GET['id']))
{
$txtid = (isset($_GET['id'])?$_GET['id']:"");
$stm=$conexion->prepare("DELETE FROM cliente WHERE idcliente = :txtid");
$stm->bindParam(":id",$txtid);
$stm->execute();
header("location:index.php");
}
Editar Cliente
En el hipervínculo para editar cliente del index.php del CRUD cliente, cambiamos por:
<td><a href="modificar.php?id=<?php echo $cliente['idcliente']; ?>"
class="btn btn-warning">Editar</a>
En el archivo modificar.php copiamos todo el FORM archivo registrar.php
<form action="" method="POST">
<div class="modal-body">
<label for="">Nombres</label>
<form action="" method="POST">
<div class="modal-body">
<label for="">Nombres</label>
<input type="text" class="form-control" name="nombres" value ""
placeholder="ingrese su nombre">
<label for="">Apellido Paterno</label>
<input type="text" class="form-control" name="paterno" value ""
placeholder="ingrese su apellido paterno">
<label for="">Apellido Materno</label>
<input type="text" class="form-control" name="materno" value ""
placeholder="ingrese su apellido materno">
<label for="">DNI</label>
<input type="text" class="form-control" name="dni" value ""
placeholder="00000000">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-
dismiss="modal">Cerrar</button>
<button type="submit" class="btn btn-primary">Guardar</button>
</div>
</div>
</form>
Y cambiamos el botón CERRAR por
<a href="index.php" class="btn btn-danger">Cancelar</a>
Añadimos un campo oculto en el form para guardar el ID
<input type="hidden" class="form-control" name="id" value="<?php echo $id;
?>" placeholder="ingrese su nombre">
También añadimos el header.php y footer.php igual como hicimos en el index.php
Ahora agregamos el siguiente código al principio
<?php
include("../conexion.php");
if(isset($_GET['id'])){
$id = (isset($_GET['id'])?$_GET['id']:"");
$stm = $conexion->prepare("SELECT * FROM cliente WHERE idcliente = :id");
$stm->bindParam(":id",$id);
$stm->execute();
$registro=$stm->fetch(PDO::FETCH_LAZY);
$nombres=$registro['nombres'];
$paterno=$registro['paterno'];
$materno=$registro['materno'];
$dni=$registro['dni'];
}
if($_POST){
$id=(isset($_POST['id'])?$_POST['id']:"");
$nombres=(isset($_POST['nombres'])?$_POST['nombres']:"");
$paterno=(isset($_POST['paterno'])?$_POST['paterno']:"");
$materno=(isset($_POST['materno'])?$_POST['materno']:"");
$dni=(isset($_POST['dni'])?$_POST['dni']:"");
$stm=$conexion->prepare("UPDATE cliente SET
nombres=:nombres,paterno=:paterno,materno=:materno,dni=:dni WHERE id=:id");
$stm->bindParam(":id",$id);
$stm->bindParam(":nombres",$nombres);
$stm->bindParam(":paterno",$paterno);
$stm->bindParam(":materno",$materno);
$stm->bindParam(":dni",$dni);
$stm->execute();
header("location:index.php");
}
?>
Probamos
Abrir WORKBENCH
Hacemos clic en nueva conexión
Colocamos un nombre a la conexión y hacemos clic en Test Connection
Dependiendo la versión del MYSQL puede salir el siguiente mensaje:
Hacemos click en CONTINUE ANYWAY
