PHP Ejemplos

CRUD PHP usando AJAX jQuery [script completo]

CRUD PHP usando AJAX. En este artículo nos enfocaremos en actualizar, editar, eliminar los datos de MySQL de tablas usando el framework Bootstrap Modal y usando scripts PHP con consultas Ajax sin refrescar la página.

Actualizar un registro o datos mediante AJAX-Jquery es un proceso muy sencillo. Por lo tanto, vamos a necesitar una base de datos desde donde actualizamos un registro sin actualizar una página. Veamos los detalles.

CRUD PHP usando AJAX: Archivos necesarios

Aquí usamos ocho archivos para actualizar, crear y elimina los datos de la base de datos MySql mediante Ajax.

  • index.php .- Página principal
  • dbcon.php .- Fichero de conexión a MySQL
  • accion.php .- Registra información a la tabla
  • actualizar.php .- Actualiza registros seleccionados
  • extraer.php .- Muestra información para ser editado
  • ver.php .- Visualiza la información en una tabla HTML
  • borrar.php .- Elimina registros
  • main.js .- Todas las funciones jQuery AJAX
CRUD PHP usando AJAX jQuery
CRUD PHP usando AJAX jQuery

CRUD PHP usando AJAX: ESTRUCTURA

A continuación, veremos los elementos del proyecto explicado a detalle

1) Fichero index.php

Es el fichero maestro ya que mostrar un formulario HTML y una tabla dinámica mostrada mediante AJAX para poder realizar las operaciones del CRUD.

La verdadera magia con AJAX está sucediendo cuando invocamos al fichero ver.php para que haga la petición y muestre los registros de la tabla clientes.

<form class="form-horizontal" id="clienteForm">
<div class="form-group row">
<label class="control-label col-sm-2" for="nombre">Nombre:</label>
<div class="col-sm-10"> 
<input type="text" name="nombre" class="form-control" id="nombre" placeholder="Ingrese nombre">
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Ingrese email" name="email">
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-2" for="pais">Pais:</label>
<div class="col-sm-10"> 
<input type="text" class="form-control" id="pais" placeholder="Ingrese pais" name="pais">
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-2" for="pais">Password:</label>
<div class="col-sm-10"> 
<input type="text" class="form-control" id="pwd" placeholder="Ingrese password" name="pwd">
</div>
</div>
<div class="form-group row"> 
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" id="registro">Registrar cliente</button>
</div>
</div>
</form>

2) dbcon.php

Este fichero se encargará de realizar la conexión con la base de datos usando MySQLi. Además, se usará variables para identificar las credenciales de acceso.

<?php

// Creamos las variables de conexión
$servername = "localhost";
$username = "root";
$password = "";
$database = "baul_demo";
// Creamos la conexion con MySQL
$con = new mysqli($servername, $username, $password, $database);
// Revisamos la conexión
if ($con->connect_error) {
die("Conexión fallida: " . $con->connect_error);
}

?>

3) accion.php

Este archivo se ejecutará cuando el usuario crea un nuevo registro y el identificador llamado “#registro” que esta declarado en el botón “Registrar cliente” desencadenará el llamado al AJAX en donde registrará los valores del formulario en la tabla clientes.
Por lo tanto, este fichero posee la conexión a MySQL y ejecutara la consulta “INSERT INTO” para almacenar la información en un nuevo registro.

<?php
// incluimos la conexión a MySQL

include_once('dbcon.php');

// variables para insertar datos a mysqli
$nombre = strip_tags(trim($_POST["nombre"]));
$nombre = str_replace(array("\r","\n"),array(" "," "), $nombre);
$email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
$pais = filter_var(trim($_POST["pais"]), FILTER_SANITIZE_STRING);
$password = trim(md5($_POST['password']));

$query = "INSERT INTO clientes (nombre, email, pais, password) 
VALUES('$nombre', '$email', '$pais', '$password')";

if ($con->query($query)) { 
return true;
}else{
return false;
}

?>

4) actualizar.php

Se ejecutará cuando el usuario presiona el botón “Editar” que se encuentra en el CRUD. Sin embargo, se ejecutará porque este botón tiene una clase llamado “editar-btn“.

A través de esa clase ejecutara la función jQuery AJAX que solicitara a este archivo para que realice la consulta de actualización de la base de datos.

<?php
// incluimos la conexión
include "dbcon.php";

// Variables para editar la tabla por id
$id = $_POST['editar_id'];
$nombre = $_POST['nombre'];
$email = $_POST['email'];
$pais = $_POST['pais'];
$password = md5($_POST['password']);


// SQL para actualizar un registro 
$query = "UPDATE clientes SET nombre='{$nombre}',email='{$email}',pais='{$pais}', password='{$password}' WHERE id='{$id}'";
if ($con->query($query)) {
echo 1;
}else{
echo 0;
}
?>

5) extraer.php

Para poder editar un registro AJAX solicitara información a través de este fichero para poblar el formulario con datos de MySQL y poder reemplazar la información que el usuario final desea. Sin embargo, extraerá la información a través de una ID para identificar un solo registro.

<?php
// incluimos fichero de conexión
require_once('dbcon.php');

if (isset($_POST['editarId'])) {
$editarId = $_POST['editarId'];
}
// extraer tabla clientes..

$sql = "SELECT * FROM clientes WHERE id = {$editarId}";
$query = $con->query($sql);
if ($query->num_rows > 0) {
$output = "";
while ($row = $query->fetch_assoc()) {
$output .= "<form>
<div class='modal-body'>
<input type='hidden' class='form-control' id='editarId' value='{$row['id']}'>
<div class='form-group'>
<label class='control-label' for='nombre'>Nombre:</label>
<input type='text' class='form-control' id='editarNombre' value='{$row['nombre']}'>
</div>
<div class='form-group'>
<label class='control-label' for='email'>Email:</label>
<input type='text' class='form-control' id='editarEmail' value='{$row['email']}'>
</div>
<div class='form-group'>
<label class='control-label' for='pais'>Pais:</label>
<input type='text' class='form-control' id='editarPais' value='{$row['pais']}'>
</div>
<div class='form-group'>
<label class='control-label' for='pwd'>Password:</label>
<input type='text' class='form-control' id='editarPassword' value='{$row['password']}'>
</div>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-secondary' data-dismiss='modal'>Cerrar</button>
<button type='button' class='btn btn-info' id='editarSubmit'>Guardar cambios</button>
</div>
</form>"; 
}
$output .="</table>";
}
echo $output;

?>

6) ver.php

En el fichero index.php debajo del formulario se mostrará esta información que AJAX solicitará para mostrar todos los registros de la tabla de manera dinámica. Por lo tanto, se realizará una consulta SQL.

<?php
// incluimos el fichero de conexión

require_once('dbcon.php');

// extraemos la informacion de la tabla clientes..
$sql = "SELECT * FROM clientes";
$query = $con->query($sql);
if ($query->num_rows > 0) {
$output = "";
$output .= "<table class='table table-hover table-striped'>
<thead>
<tr>
<th>Id</th>
<th>Nombre</th>
<th>Email</th>
<th>Pais</th>
<th>Editar</th>
<th>Borrar</th>
</tr>
</thead>";
while ($row = $query->fetch_assoc()) {
$output .= "<tbody>
<tr>
<td>{$row['id']}</td>
<td>{$row['nombre']}</td>
<td>{$row['email']}</td>
<td>{$row['pais']}</td>
<td><button class='btn btn-success btn-sm editar-btn' data-id='{$row['id']}' data-toggle='modal' data-target='#exampleModal'>Editar</button></td>
<td><button class='btn btn-danger btn-sm borrar-btn' data-id='{$row['id']}'>Borrar</button></td>
</tr>
</tbody>";
}
$output .="</table>";
echo $output;
}else{
echo "<h5>Ningún registro fue encontrado</h5>";
}

?>

7) borrar.php

Al presionar el botón “Borrar” jQuery a través de AJAX llamara a este fichero para validad y eliminar el determinado registro a través de una ID verificara la existencia del registro y luego ejecutar la consulta SQL llamado “DELETE“,

<?php
// declarar la conexión
require_once('dbcon.php');

if (isset($_POST['borrarId'])) {
$borrarId = $_POST['borrarId'];
}

// revisar si existe el registro en la tabla
$sql = "SELECT * FROM clientes WHERE id = {$borrarId}";
$result = $con->query($sql);

if ($result->num_rows > 0) {
// borramos el registro de la tabla
$query = "DELETE FROM clientes WHERE id = {$borrarId}";

if ($con->query($query)) {
echo 1;
exit;
}else{
echo 0;
exit;
}
}

?>

8) main.js

Almacena todas las funciones jQuery para poder controlar las operaciones del CRUD a través de PHP.  las operaciones son las siguientes:

  • Mostrar
  • Editar
  • Actualizar
  • Borrar
$(document).ready(function(){
// recuperar datos de la tabla clientes..
function loadTableData(){
$.ajax({
url : "ver.php",
type : "POST",
success:function(data){
$("#tableData").html(data);
}
});
}
loadTableData();
$("#registro").click(function(e){
e.preventDefault();
var nombre = $("#nombre").val();
var email = $("#email").val();
var pais = $("#pais").val();
var pwd = $("#pwd").val();
if(nombre !=="" && email !=="" && pais !=="" && pwd !==""){
$.ajax({
url : "accion.php",
type: "POST",
cache: false,
data : {nombre:nombre,email:email,pais:pais, pwd:pwd},
success:function(data){
alert("Datos insertados correctamente");
$("#clienteForm")[0].reset();
loadTableData();
},
});
}else{
alert("Todos los campos son obligatorios");
}
});

// Eliminar registro a MySql desde PHP usando jQuery AJAX
$(document).on("click",".borrar-btn",function(){
if (confirm("¿Estás seguro de eliminar esto?")) {
var id = $(this).data('id');
var element = this;
$.ajax({
url :"borrar.php",
type:"POST",
cache:false,
data:{borrarId:id},
success:function(data){
if (data == 1) {
$(element).closest("tr").fadeOut();
alert("Registro de usuario eliminado correctamente"); 
}else{
alert("Identificación de usuario inválida");
}
}
});
}
});

// Edite el registro a mysqli desde php usando jquery ajax
$(document).on("click",".editar-btn",function(){
var id = $(this).data('id');
$.ajax({
url :"extraer.php",
type:"POST",
cache:false,
data:{editarId:id},
success:function(data){
$("#editarForm").html(data);
},
});
});

// User record update to mysqli from php using jquery ajax
$(document).on("click","#editarSubmit", function(){
var editar_id = $("#editarId").val();
var nombre = $("#editarNombre").val();
var email = $("#editarEmail").val();
var pais = $("#editarPais").val();
var password = $("#editarPassword").val();

$.ajax({
url:"actualizar.php",
type:"POST",
cache:false,
data:{editar_id:editar_id,nombre:nombre,email:email,pais:pais,password:password},
success:function(data){
if (data ==1) {
alert("Registro de usuario actualizado correctamente");
loadTableData();
}else{
alert("Algo salió mal"); 
}
}
});
});
});

Página principal completo


Ahora crearemos una página de índice simple para mostrar los registros de tabla de usuarios después de insertar en la tabla de usuarios mediante la obtención de valor de la base de datos.

<!DOCTYPE html>
<html lang="en">
<head>
<title>CRUD PHP usando AJAX jQuery</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<br>
<div class="card">
<div class="card-header">
CRUD PHP usando AJAX jQuery
</div>
<div class="card-body">

<form class="form-horizontal" id="clienteForm">
<div class="form-group row">
<label class="control-label col-sm-2" for="nombre">Nombre:</label>
<div class="col-sm-10"> 
<input type="text" name="nombre" class="form-control" id="nombre" placeholder="Ingrese nombre">
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Ingrese email" name="email">
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-2" for="pais">Pais:</label>
<div class="col-sm-10"> 
<input type="text" class="form-control" id="pais" placeholder="Ingrese pais" name="pais">
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-2" for="pais">Password:</label>
<div class="col-sm-10"> 
<input type="text" class="form-control" id="pwd" placeholder="Ingrese password" name="pwd">
</div>
</div>
<div class="form-group row"> 
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" id="registro">Registrar cliente</button>
</div>
</div>
</form>

</div>
</div>


<div id="tableData">

</div>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title" id="exampleModalLabel"><b>Editar cliente</b></h2>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div id="editarForm"> 

</div>
</div>
</div>
</div> 
</div>
<script type="text/javascript" src="assets/js/main.js"></script>
</body>
</html>

CONCLUSIÓN

En este artículo hemos visto los 4 puntos primordiales de un CRUD y lo hemos desarrollado paso a paso haciendo uso de AJAX.
La implementación no es complicada y es bastante cómodo para integrar a nuestros proyectos web.
Además, el uso de estos procesos es muy beneficioso para el rendimiento de nuestro servidor ya que no está solicitando recursos al refrescar la página para cada procedimiento.

Si desea descargar la aplicación CRUD de código completo en PHP Mysqli usando Ajax jQuery, haga clic en el botón de descarga

Descarga 156 Sistemas PHP & MySQL

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

Publicaciones relacionadas

Deja una respuesta

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

Botón volver arriba