CRUD PHP SIN JQUERY (CSS y BOOTSTRAP)
PHP se ha convertido en una herramienta bastante útil a la hora de crear paginas web, en este tutorial veremos como hacer un CRUD (Create, Read, Update, Delete), para ello debemos ya tener php y MySQL instalados en nuestra PC, te recomiendo ver el ítem Software necesario para desplegar paginas web del post anterior. PHP lleva varios años en el mundo de la Internet, existen varios frameworks para realizar diversas tareas entre ellas un CRUD, ya muchos de los programadores y empresas han creado sus propias librerías, la introducción de herramientas como AJAX y CSS han convertido la programación de paginas web en algo mucho mas robusto de lo que era en la vieja escuela, por eso en este tutorial utilizaremos la librería bootstrap (http://getbootstrap.com/) principalmente para que nos ayude con la interface gráfica. Comencemos:
Paso 1
Construir nuestra base de datos en MySQL, para este ejemplo solo usaremos una tabla clientes como muestra el siguiente Script SQL :
SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0; SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0; SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='TRADITIONAL,ALLOW_INVALID_DATES'; DROP SCHEMA IF EXISTS `sigminclientes` ; CREATE SCHEMA IF NOT EXISTS `sigminclientes` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci ; USE `sigminclientes` ; -- ----------------------------------------------------- -- Table `sigminclientes`.`clientes` -- ----------------------------------------------------- DROP TABLE IF EXISTS `sigminclientes`.`clientes` ; CREATE TABLE IF NOT EXISTS `sigminclientes`.`clientes` ( `idclientes` INT NOT NULL AUTO_INCREMENT, `nit` VARCHAR(45) NULL, `nombre` VARCHAR(45) NULL, `repreLegal` VARCHAR(45) NULL, `fechaN` DATE NULL, `cedula` VARCHAR(45) NULL, `direccion` VARCHAR(45) NULL, `email` VARCHAR(45) NULL, PRIMARY KEY (`idclientes`)) ENGINE = InnoDB AUTO_INCREMENT = 1 PACK_KEYS = DEFAULT; SET SQL_MODE=@OLD_SQL_MODE; SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS; SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS; -- ----------------------------------------------------- -- Data for table `sigminclientes`.`clientes` -- ----------------------------------------------------- START TRANSACTION; USE `sigminclientes`; INSERT INTO `sigminclientes`.`clientes` (`idclientes`, `nit`, `nombre`, `repreLegal`, `fechaN`, `cedula`, `direccion`, `email`) VALUES (1, '123124', 'sigmin', 'jose', '05-06-2014', '1035421260', 'xxxx', 'joselugar8@hotmail.com'); COMMIT;
Paso 2
Ahora que tenemos nuestra BD procedemos a crear un proyecto PHP en NetBeans 8, debemos copiar la librería bootstrap dentro del proyecto, en total tendremos 4 archivos PHP. Nuestro proyecto básico debería lucir así:
El primer archivo que debemos construir es un conector a base de datos que nos permita realizar las respectivas consultas SQL, para ello creamos una clase Database.php donde estará la configuración para la conexión, ademas utilizaremos el objecto PDO (Objecto de Datos PHP) que define una interfaz ligera para poder acceder a bases de datos en PHP. veamos el código:
<?php
class Database
{
private static $dbName = 'sigminclientes' ;
private static $dbHost = 'localhost' ;
private static $dbUsername = 'root';
private static $dbUserPassword = 'sigmin2014';
private static $cont = null;
public function __construct() {
die('Init function is not allowed');
}
public static function connect()
{
// One connection through whole application
if ( null == self::$cont )
{
try
{
self::$cont = new PDO( "mysql:host=".self::$dbHost.";"."dbname=".self::$dbName, self::$dbUsername, self::$dbUserPassword);
}
catch(PDOException $e)
{
die($e->getMessage());
}
}
return self::$cont;
}
public static function disconnect()
{
self::$cont = null;
}
}
Paso 3
Ya que tenemos el conector PHP es hora de crear la pagina index.php que deberá desplegar un listado con los registros que existen en la BD, desde allí deberá existir la posibilidad de crear, actualizar y borrar registros, para crear la tabla ejecutaremos un for donde recorremos casa registro que exista en la BD, para cada registro extraemos los datos que necesitamos y agregamos dos botones, Actualizar y Eliminar con la URL que apunte a sus PHP respectivos, veamos:
<html> <head> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"></link> <script src="bootstrap/js/bootstrap.min.js"></script> <title></title> </head> <body> <div class="container"> <div class="row"> <h3> Clientes</h3> </div> <div class="row"> <a class="btn btn-success" href="https://www.blogger.com/create.php">Crear</a> <table class="table table-striped table-bordered"> <thead> <tr> <th>NIT</th> <th>Nombre</th> <th>Representante Legal</th> <th>Fecha de Nacimiento</th> <th>Cedula</th> <th>Direccion</th> <th>Email</th> <th>Accion</th> </tr> </thead> <tbody> query($sql) as $row) { echo ' <tr>'; echo '<td>' . $row['nit'] . '</td>'; echo '<td>' . $row['nombre'] . '</td>'; echo '<td>' . $row['repreLegal'] . '</td>'; echo '<td>' . $row['fechaN'] . '</td>'; echo '<td>' . $row['cedula'] . '</td>'; echo '<td>' . $row['direccion'] . '</td>'; echo '<td>' . $row['email'] . '</td>'; echo '<td width="200">'; echo '<a class="btn btn-success" href="https://www.blogger.com/update.php?idclientes=%27%20.%20$row[%27idclientes%27]%20.%20%27">Actualizar</a>'; echo ' '; echo '<a class="btn btn-danger" href="https://www.blogger.com/delete.php?idclientes=%27%20.%20$row[%27idclientes%27]%20.%20%27">Eliminar</a>'; echo '</td>'; echo '</tr> '; } Database::disconnect(); ?> </tbody> </table> </div> </div> </body> </html>
Para crear un cliente creamos el archivo create.php , Este archivo PHP consta de un formulario donde se ingresan los datos para el nuevo cliente, se valida que el usuario ingrese los datos correctamente y si todo esta bien se realiza la inserción:
<?php
require 'Database.php';
$idclientes = null;
if ( !empty($_GET['idclientes'])) {
$idclientes = $_REQUEST['idclientes'];
}
if ( null==$idclientes ) {
header("Location: clientes.php");
}
if ( !empty($_POST)) {
// keep track validation errors
$nameError = null;
$emailError = null;
$dirError = null;
$name = $_POST['name'];
$nit= $_POST['nit'];
$rep = $_POST['rep'];
$fecha = $_POST['fecha'];
$cel = $_POST['cel'];
$dir = $_POST['dir'];
$email = $_POST['email'];
// validate input
$valid = true;
if (empty($name)) {
$nameError = 'Entre un Nombre de Empresa';
$valid = false;
}
if (empty($email)) {
$emailError = 'Valide Email';
$valid = false;
} else if ( !filter_var($email,FILTER_VALIDATE_EMAIL) ) {
$emailError = 'Valide Email';
$valid = false;
}
if (empty($dir)) {
$dirError = 'Ingrese una Direccion';
$valid = false;
}
// update data
if ($valid) {
$pdo = Database::connect();
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$sql = "UPDATE clientes set nit = ?, nombre = ?, repreLegal =?, fechaN =?, cedula =?, direccion =?, email =? WHERE idclientes = ?";
$q = $pdo->prepare($sql);
$q->execute(array($nit,$name,$rep,$fecha,$cel,$dir,$email,$idclientes));
Database::disconnect();
header("Location: clientes.php");
}
} else {
$pdo = Database::connect();
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$sql = "SELECT * FROM clientes where idclientes = ?";
$q = $pdo->prepare($sql);
$q->execute(array($idclientes));
$data = $q->fetch(PDO::FETCH_ASSOC);
$name = $data['name'];
$nit= $data['nit'];
$rep = $data['repreLegal'];
$fecha = $data['fechaN'];
$cel = $data['cedula'];
$dir = $data['direccion'];
$email = $data['email'];
Database::disconnect();
}
?>
<html lang="en">
<head>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"></link>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="span10 offset1">
<div class="row">
<h3>
Actualizar Cliente</h3>
</div>
<form action="update.php?idclientes=<?php echo $idclientes?>" class="form-horizontal" method="post">
<div class="control-group <?php echo!empty($nameError) ? 'error' : ''; ?>">
<label class="control-label">Nombre de Empresa</label>
<div class="controls">
<input name="name" placeholder="Nombre de Empresa" type="text" value="<?php echo!empty($name) ? $name : ''; ?>" />
<span class="help-inline"></span>
</div>
</div>
<div class="control-group <?php echo!empty($nitError) ? 'error' : ''; ?>">
<label class="control-label">NIT</label>
<div class="controls">
<input name="nit" placeholder="NIT" type="text" value="<?php echo!empty($nit) ? $nit : ''; ?>" />
<span class="help-inline"></span>
</div>
</div>
<div class="control-group <?php echo!empty($repError) ? 'error' : ''; ?>">
<label class="control-label">Representate Legal</label>
<div class="controls">
<input name="rep" placeholder="Representate Lega" type="text" value="<?php echo!empty($rep) ? $rep : ''; ?>" />
<span class="help-inline"></span>
</div>
</div>
<div class="control-group <?php echo!empty($fechaError) ? 'error' : ''; ?>">
<label class="control-label">Fecha de Nacimiento</label>
<div class="controls">
<input name="fecha" placeholder="Fecha de Nacimient" type="text" value="<?php echo!empty($fecha) ? $fecha : ''; ?>" />
<span class="help-inline"></span>
</div>
</div>
<div class="control-group <?php echo!empty($celError) ? 'error' : ''; ?>">
<label class="control-label">Cedula</label>
<div class="controls">
<input name="cel" placeholder="Cedula" type="text" value="<?php echo!empty($cel) ? $cel : ''; ?>" />
<span class="help-inline"></span>
</div>
</div>
<div class="control-group <?php echo!empty($dirError) ? 'error' : ''; ?>">
<label class="control-label">Direccion</label>
<div class="controls">
<input name="dir" placeholder="Direccion" type="text" value="<?php echo!empty($dir) ? $dir : ''; ?>" />
<span class="help-inline"></span>
</div>
</div>
<div class="control-group <?php echo!empty($emailError) ? 'error' : ''; ?>">
<label class="control-label">Email</label>
<div class="controls">
<input name="email" placeholder="Email" type="text" value="<?php echo!empty($email) ? $email : ''; ?>" />
<span class="help-inline"></span>
</div>
</div>
<div class="form-actions">
<button class="btn btn-success" type="submit">Actualizar</button>
<a class="btn" href="https://www.blogger.com/clientes.php">Atras</a>
</div>
</form>
</div>
</div>
<!-- /container -->
</body>
</html>Paso 5
Para actualizar un cliente partimos del formulario de creación, la diferencia esta en que debemos enviarle el ID del cliente que se selecciono en la lista y traer los datos de ese registro para que los pueda modificar. entonces básicamente son dos partes traer los datos y actualizamos, veamos el código:
<?php
require 'Database.php';
$idclientes = null;
if ( !empty($_GET['idclientes'])) {
$idclientes = $_REQUEST['idclientes'];
}
if ( null==$idclientes ) {
header("Location: clientes.php");
}
if ( !empty($_POST)) {
// keep track validation errors
$nameError = null;
$emailError = null;
$dirError = null;
$name = $_POST['name'];
$nit= $_POST['nit'];
$rep = $_POST['rep'];
$fecha = $_POST['fecha'];
$cel = $_POST['cel'];
$dir = $_POST['dir'];
$email = $_POST['email'];
// validate input
$valid = true;
if (empty($name)) {
$nameError = 'Entre un Nombre de Empresa';
$valid = false;
}
if (empty($email)) {
$emailError = 'Valide Email';
$valid = false;
} else if ( !filter_var($email,FILTER_VALIDATE_EMAIL) ) {
$emailError = 'Valide Email';
$valid = false;
}
if (empty($dir)) {
$dirError = 'Ingrese una Direccion';
$valid = false;
}
// update data
if ($valid) {
$pdo = Database::connect();
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$sql = "UPDATE clientes set nit = ?, nombre = ?, repreLegal =?, fechaN =?, cedula =?, direccion =?, email =? WHERE idclientes = ?";
$q = $pdo->prepare($sql);
$q->execute(array($nit,$name,$rep,$fecha,$cel,$dir,$email,$idclientes));
Database::disconnect();
header("Location: clientes.php");
}
} else {
$pdo = Database::connect();
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$sql = "SELECT * FROM clientes where idclientes = ?";
$q = $pdo->prepare($sql);
$q->execute(array($idclientes));
$data = $q->fetch(PDO::FETCH_ASSOC);
$name = $data['name'];
$nit= $data['nit'];
$rep = $data['repreLegal'];
$fecha = $data['fechaN'];
$cel = $data['cedula'];
$dir = $data['direccion'];
$email = $data['email'];
Database::disconnect();
}
?>
<html lang="en">
<head>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"></link>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="span10 offset1">
<div class="row">
<h3>
Actualizar Cliente</h3>
</div>
<form action="update.php?idclientes=<?php echo $idclientes?>" class="form-horizontal" method="post">
<div class="control-group <?php echo!empty($nameError) ? 'error' : ''; ?>">
<label class="control-label">Nombre de Empresa</label>
<div class="controls">
<input name="name" placeholder="Nombre de Empresa" type="text" value="<?php echo!empty($name) ? $name : ''; ?>" />
<span class="help-inline"></span>
</div>
</div>
<div class="control-group <?php echo!empty($nitError) ? 'error' : ''; ?>">
<label class="control-label">NIT</label>
<div class="controls">
<input name="nit" placeholder="NIT" type="text" value="<?php echo!empty($nit) ? $nit : ''; ?>" />
<span class="help-inline"></span>
</div>
</div>
<div class="control-group <?php echo!empty($repError) ? 'error' : ''; ?>">
<label class="control-label">Representate Legal</label>
<div class="controls">
<input name="rep" placeholder="Representate Lega" type="text" value="<?php echo!empty($rep) ? $rep : ''; ?>" />
<span class="help-inline"></span>
</div>
</div>
<div class="control-group <?php echo!empty($fechaError) ? 'error' : ''; ?>">
<label class="control-label">Fecha de Nacimiento</label>
<div class="controls">
<input name="fecha" placeholder="Fecha de Nacimient" type="text" value="<?php echo!empty($fecha) ? $fecha : ''; ?>" />
<span class="help-inline"></span>
</div>
</div>
<div class="control-group <?php echo!empty($celError) ? 'error' : ''; ?>">
<label class="control-label">Cedula</label>
<div class="controls">
<input name="cel" placeholder="Cedula" type="text" value="<?php echo!empty($cel) ? $cel : ''; ?>" />
<span class="help-inline"></span>
</div>
</div>
<div class="control-group <?php echo!empty($dirError) ? 'error' : ''; ?>">
<label class="control-label">Direccion</label>
<div class="controls">
<input name="dir" placeholder="Direccion" type="text" value="<?php echo!empty($dir) ? $dir : ''; ?>" />
<span class="help-inline"></span>
</div>
</div>
<div class="control-group <?php echo!empty($emailError) ? 'error' : ''; ?>">
<label class="control-label">Email</label>
<div class="controls">
<input name="email" placeholder="Email" type="text" value="<?php echo!empty($email) ? $email : ''; ?>" />
<span class="help-inline"></span>
</div>
</div>
<div class="form-actions">
<button class="btn btn-success" type="submit">Actualizar</button>
<a class="btn" href="https://www.blogger.com/clientes.php">Atras</a>
</div>
</form>
</div>
</div>
<!-- /container -->
</body>
</html>
Paso 6
El ultimo paso es la eliminación de los registros, para ello mandamos el id del cliente que se desea eliminar y antes de borrar preguntamos si esta seguro de eliminar el registro, veamos el código:
<?php
require 'Database.php';
$idclientes = 0;
if ( !empty($_GET['idclientes'])) {
$idclientes = $_REQUEST['idclientes'];
}
if ( !empty($_POST)) {
// keep track post values
$idclientes = $_POST['idclientes'];
// delete data
$pdo = Database::connect();
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$sql = "DELETE FROM clientes WHERE idclientes = ?";
$q = $pdo->prepare($sql);
$q->execute(array($idclientes));
Database::disconnect();
header("Location: clientes.php");
}
?>
<html lang="en">
<head>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"></link>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="span10 offset1">
<div class="row">
<h3>
Eliminar Cliente</h3>
</div>
<form action="delete.php" class="form-horizontal" method="post">
<input name="idclientes" type="hidden" value="<?php echo $idclientes;?>" />
<div class="alert alert-error">
Estas seguro que deseas eliminar este cliente ?</div>
<div class="form-actions">
<button class="btn btn-danger" type="submit">Si</button>
<a class="btn" href="https://www.blogger.com/clientes.php">No</a>
</div>
</form>
</div>
</div>
<!-- /container -->
</body>
</html>
Comentarios
Publicar un comentario