Paso a Paso Usando PHP, MYSQL, JQUERY-AJAX Y BOOTSTRAP. (CRUD)
En este tutorial vamos a crear una pagina web que permita realizar un CRUD: Create, Read, Update y Delete, o en español Crear, Leer, Actualizar y Eliminar datos en una Base de datos. Para ello utilizaremos las siguientes tecnologías:
- MySQL para la base de datos
- PHP para las operaciones en base de datos
- JQuery utilizando la tecnología AJAX que permite hacer peticiones al servidor sin necesidad de recargar la pagina
- Boostrap para el diseño CSS de la pagina.
Para la programación en general recomiendo Netbeans 8 ya que se puede manejar la base de datos y el código en la misma plataforma. Ademas para la creación de la base de datos recomiendo MySQL Workbench, esta herramienta permite crear una base de datos de forma amigable y exportarla para su creación directa en PHPMyAdmin, ademas posee herramientas para la administración y configuración de la BD. Empecemos:
- Creación de la BD: Vamos a crear una tabla usuarios con un id, nombre, dirección, teléfono, email y contraseña, veamos el SQL:
--
-- Table structure for table `usuarios`
--
CREATE TABLE IF NOT EXISTS `usuarios` (
`id_usuario` int(10) NOT NULL,
`nombre` char(50) NOT NULL,
`direccion` char(50) NOT NULL,
`telefono` char(50) NOT NULL,
`email` char(100) NOT NULL,
`contrasena` char(15) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=10 DEFAULT CHARSET=latin1;
--
-- Dumping data for table `usuarios`
--
INSERT INTO `usuarios` (`id_usuario`, `nombre`, `direccion`, `telefono`, `email`, `contrasena`) VALUES
(1, 'jose luis garcia', 'cll 12 aa sur # 33', '3017925693', 'joselugar8@hotmail.com', 'admin'),
(6, 'alvaro', 'av 21', '123', 'alvaro@ibm.com', '1232'),
(7, 'alvaro', 'av 21', '123', 'alvaro@ibm.com', ''),
(8, 'alvaro', 'av 21', '123', 'alvaro@ibm.com', ''),
(9, 'alvaro', 'av 21', '123', 'alvaro@ibm.com', '');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `usuarios`
--
ALTER TABLE `usuarios`
ADD PRIMARY KEY (`id_usuario`);
- Crear el proyecto en Netbeans: Vamos a crear un proyecto PHP en Netbeans con la configuración de los archivos:
- Incluir la carpeta con la librería boostratp.
- Creamos una carpeta PHP con dos archivos php: Database.php que nos permite conectarnos con la base de datos, Cud_usuario.php que nos permitirá realizar las operaciones de crear, actualizar y eliminar.
- Agregamos una carpeta JS y dentro agregamos el archivo con la libreria de JQuery en su versión preferida, los archivo usuario_js.js y lista_usuario_js.js donde agregaremos el código para realizar los llamados con AJAX.
- Creamos un archivo index.php que mostrara el contenido una lista de los usuarios, un archivo usuarios.php que contendrá el formulario para crear y actualizar usuarios.
- Creamos una carpeta CSS donde agregaremos los estilos para nuestra pagina, en este caso lo llamaremos usuario_css.css
Luego de definir los archivo de trabajo procedemos a crear la conexión a la base de datos, el archivo Database.php nos permitirá realizar esto. Mediante el uso de una clase PDO (Objectos de Datos PHP) que proporciona una capa de abstracción al acceso de los datos, previa instalación de la librería. veamos el código:
Ahora que tenemos la conexión debemos crear un archivo que nos permita realizar el CRUD esto lo haremos en el archivo Cud_usuario.php, en el cual tendremos todas las funciones menos el leer que estará en el index.php. Se le enviara como parámetro el tipo de operación que queremos realizar. Veamos el código:
<?php
class Database
{
private static $dbName = 'nombre_bd' ;
private static $dbHost = 'host' ;
private static $dbUsername = 'usuario';
private static $dbUserPassword = 'contrasena';
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;
}
}
Ahora que tenemos la conexión debemos crear un archivo que nos permita realizar el CRUD esto lo haremos en el archivo Cud_usuario.php, en el cual tendremos todas las funciones menos el leer que estará en el index.php. Se le enviara como parámetro el tipo de operación que queremos realizar. Veamos el código:
<?php
require 'Database.php';
if (!empty($_POST)) {
$msg = '';
$nombre = $_POST['nombre'];
$direccion = $_POST['direccion'];
$telefono = $_POST['telefono'];
$email = $_POST['email'];
$pwd = $_POST['pwd'];
$operacion = $_POST['operacion'];
$pdo = Database::connect();
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
if ($operacion == 'insert') {
$sql = "INSERT INTO usuarios (nombre, direccion, telefono, email, contrasena) "
. "VALUES(?,?,?,?.?)";
$query = $pdo->prepare($sql);
if ($query->execute(array($nombre, $direccion, $telefono, $email, $pwd)) == false) {
$msg = 'Error: ' . $query->errorCode();
} else {
$msg = 'Usuario creado';
}
} elseif ($operacion == 'delete') {
$id_usuario = $_POST['id_usuario'];
$sql = "DELETE FROM usuarios WHERE id_usuario = ?";
$query = $pdo->prepare($sql);
if ($query->execute(array($id_usuario)) == false) {
$msg = 'Error: ' . $query->errorCode();
} else {
$msg = 'Usuario eliminado';
}
} elseif ($operacion == 'update') {
$id_usuario = $_POST['id_usuario'];
$sql = "UPDATE usuarios SET nombre = ?, direccion = ?, telefono = ?, email = ?, contrasena = ? WHERE id_usuario = ?";
$query = $pdo->prepare($sql);
if ($query->execute(array($nombre, $direccion, $telefono, $email, $pwd, intval($id_usuario))) == false) {
$msg = 'Error: ' . $query->errorCode();
} else {
$msg = 'Usuario Actualizado';
}
}
Database::disconnect();
echo $msg;
}
<html>
<head>
<meta charset="UTF-8">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<!-- Latest compiled and minified JavaScript -->
<script src="JS/jquery-2.1.1.js" type="text/javascript"></script>
<script src="JS/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="JS/lista_usuario_js.js" type="text/javascript"></script>
<title></title>
</head>
<body>
<div id="contenido" >
<input id="btn_usuarios" type="button" class="btn btn-primary" value="Nuevo Usuario"/><br/><br/>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Lista de Usuarios</h3>
</div>
<div class="panel-body">
<table class="table table-striped">
<thead>
<th>#</th>
<th>ID Usuario</th>
<th>Nombre</th>
<th>Direccion</th>
<th>Telefono</th>
<th>Email</th>
<th>Editar</th>
<th>Eliminar</th>
</thead>
<tbody>
<?php
require 'PHP/Database.php';
$pdo = Database::connect();
$sql = 'SELECT * FROM usuarios';
$con = 1;
foreach ($pdo->query($sql) as $row) {
echo "<tr>";
echo '<td>' . $con . '</td>';
echo '<td>' . $row['id_usuario'] . '</td>';
echo '<td>' . $row['nombre'] . '</td>';
echo '<td>' . $row['direccion'] . '</td>';
echo '<td>' . $row['telefono'] . '</td>';
echo '<td>' . $row['email'] . '</td>';
echo '<td><button class="btn btn-primary" onclick="editar(' . $row['id_usuario'] . ')">Editar</button></td>';
echo '<td><button class="btn btn-primary" onclick="eliminar(' . $row['id_usuario'] . ', this)">Eliminar</button></td>';
echo '</tr>';
$con++;
}
Database::disconnect();
?>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Debemos obtener algo así:
Puedes utilizar los componente de la librería boostrap para personalizar el diseño de la pagina. Ahora procedemos utilizar el codigo JQuery como muestra el index cargamos el javascript lista_usuario_js.js este es el código que implementamos ahí:
Como muestran el JS se utiliza la función AJAX para hacer el llamado del archivo, se le envían los parámetros y retorna un valor del "echo" en el archivo php. Ahora deberemos crear el formulario para ingresar los datos de un nuevo usuario, el archivo usuarios.php cumplirá esta función, ademas permitirá actualizar el usuario sin necesidad de utilizar otro formulario, para esto verificamos si se envía un ID de usuario, si hay un ID se trata de una operación de actualización, de lo contrario sera de creación, veamos el código:
El evento que ejecuta el submit esta dentro del archivo usuario_js.js, en el cual también realizo algunas validaciones en la entrada de datos. Veamos el código:
El archivo usuario_css.css contiene los siguientes estilos:
Con esto hemos terminado el tutorial, aunque aquí no se utiliza estrictamente una arquitectura MVC, es un ejemplo funcional y que puedes mejorar con tus propios conocimientos. Aquí puedes encontrar el proyecto completo para Netbeans. Saludos!!!
$(document).ready(function () {
$('#btn_usuarios').click(function () {
$.ajax({
url: "usuarios.php"
}).done(function (html) {
$('#contenido').html(html);
}).fail(function () {
alert('Error al cargar modulo');
});
});
});
function editar(id) {
$.ajax({
type: "POST",
url: "usuarios.php",
data: {operacion: 'update', id_usuario: id}
}).done(function (html) {
$('#contenido').html(html);
}).false(function () {
alert('Error al cargar modulo');
});
}
function eliminar(id, este) {
$.ajax({
type: "POST",
url: "PHP/Cud_usuario.php",
data: {id_usuario: id, operacion: "delete"}
}).done(function (msg) {
alert(msg);
$(este).parent().parent().remove();
}).fail(function () {
alert("Error enviando los datos. Intente nuevamente");
});
}
Como muestran el JS se utiliza la función AJAX para hacer el llamado del archivo, se le envían los parámetros y retorna un valor del "echo" en el archivo php. Ahora deberemos crear el formulario para ingresar los datos de un nuevo usuario, el archivo usuarios.php cumplirá esta función, ademas permitirá actualizar el usuario sin necesidad de utilizar otro formulario, para esto verificamos si se envía un ID de usuario, si hay un ID se trata de una operación de actualización, de lo contrario sera de creación, veamos el código:
<?php
$operacion = '';
require 'PHP/Database.php';
$nombre = '';
$direccion = '';
$telefono = '';
$email = '';
$pwd = '';
if (!empty($_POST)) {
$operacion = $_POST['operacion'];
if ($operacion == 'update') {
$pdo = Database::connect();
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$id_usuario = $_POST['id_usuario'];
$sql = "SELECT * FROM usuarios WHERE id_usuario = ?";
$q = $pdo->prepare($sql);
$q->execute(array($id_usuario));
$data = $q->fetch(PDO::FETCH_ASSOC);
$nombre = $data['nombre'];
$direccion = $data['direccion'];
$telefono = $data['telefono'];
$email = $data['email'];
$pwd = $data['contrasena'];
}
//$msg = '';
}
?>
<link href="CSS/usuarios_css.css" rel="stylesheet" type="text/css"/>
<script src="JS/usuario_js.js" type="text/javascript"></script>
<div class="div_usu">
<form id="formulario" class="form-horizontal" role="form" >
<div id="alerta" class="alert alert-danger" role="alert"></div>
<?php if ($operacion == 'update') {
?>
<label for="id_usuario" >ID:</label>
<input id="id_usuario" name="id_usuario" type="text" class="form-control" disabled value="<?php echo $id_usuario; ?>"/>
<?php
}
?>
<label for="nombre" >Nombre:</label>
<input id="nombre" name="nombre" type="text" class="form-control" placeholder="Nombre" required value="<?php echo $nombre; ?>"/>
<label for="direccion" >Direccion:</label>
<input id="direccion" name="direccion" type="text" class="form-control" placeholder="Direccion"/>
<label for="telefono" >Telefono:</label>
<input id="telefono" name="telefono" type="text" class="form-control" placeholder="Telefono" required value="<?php echo $telefono; ?>"/>
<label for="email" >Email:</label>
<input id="email" name="email" type="text" class="form-control" placeholder="Email" required value="<?php echo $email; ?>"/>
<label for="pwd" >Contraseña:</label>
<input id="pwd" name="pwd" type="password" class="form-control" placeholder="Contraseña" required value="<?php echo $pwd; ?>"/>
<label for="ped2" >Repita la contraseña:</label>
<input id="pwd2" type="password" class="form-control" placeholder="Repita la contraseña" required value="<?php echo $pwd; ?>"/>
<br/>
<input type="submit" value="Guardar" class="btn btn-primary"/>
</form>
</div>
$(document).ready(function () {
$('#alerta').hide();
$('#formulario').submit(function (event) {
event.preventDefault();
if ($('#pwd').val() !== $('#pwd2').val()) {
$('#alerta').show();
$('#alerta').text('Las contraseñas no considen');
$('#pwd').focus();
return;
}
var ope = 'insert';
var id_u = '';
if ($('#id_usuario').length > 0) {
if ($('#id_usuario').val() !== '') {
ope = 'update';
id_u = $('#id_usuario').val();
}
}
$.ajax({
type: "POST",
url: "PHP/Cud_usuario.php",
data: {nombre: $('#nombre').val(), direccion: $('#direccion').val(),
telefono: $('#telefono').val(), email: $('#email').val(),
pwd: $('#pwd').val(), nivel:$('#nivel').val(), operacion: ope, id_usuario: id_u}
}).done(function (msg) {
alert(msg);
if (msg == 'Usuario Actualizado') {
$.ajax({
url: "usuarios.php"
}).done(function (html) {
$('#contenido').html(html);
}).fail(function () {
alert('Error al cargar modulo');
});
} else {
$('#alerta').hide();
$('#nombre').val('');
$('#direccion').val('');
$('#telefono').val('');
$('#email').val('');
$('#pwd').val('');
$('#pwd2').val('');
}
}).fail(function () {
alert("Error enviando los datos. Intente nuevamente");
});
});
});
El archivo usuario_css.css contiene los siguientes estilos:
.div_usu{
position: relative;
top: 10px;
left: 10px;
width: 400px;
}
.div_info{
left: 450px;
position: absolute;
top: 380px;
}
Con esto hemos terminado el tutorial, aunque aquí no se utiliza estrictamente una arquitectura MVC, es un ejemplo funcional y que puedes mejorar con tus propios conocimientos. Aquí puedes encontrar el proyecto completo para Netbeans. Saludos!!!
muchas gracias por ese onclick en la tabla tenia un error al recuperar el dato para el editar
ResponderEliminar