Usando Ajax con PHP MySQL. En este artículo explicaremos el uso de Ajax con PHP/MySQL. Por lo tanto, se podrá agregar y/o eliminar registros de nuestra tabla mediante el uso de JavaScript.
¿Cómo funciona el script?
- Para que funcione correctamente tenemos que darle clic al botón agregar. Sin embargo, para registrar tenemos que completar los datos en el formulario.
- Una vez presionado en botón agregar. La información será almacenada en la base de datos MySQL y ese registro será mostrado debajo del formulario.
- Si deseamos borrar algún registro de la lista de alumnos tenemos que presionar el botón «
eliminar«. Todo muy interactivo y didáctico para no saturar nuestro servidor.
Usando Ajax con PHP MySQL
1. Estructura de carpetas
a) CSS: Contiene todos los archivos de estilos incluyendo el Bootstrap
b) JS: Carpeta que contiene ficheros JavaScript
c) images: Todas las imágenes que necesita el sistema
2. Usando Ajax con PHP MySQL: Creación de la base de datos
Cree una nueva base de datos denominada «lista_alumnos» e importe la consulta SQL en la carpeta principal del sistema para que funciones nuestro sistema:
CREATE TABLE IF NOT EXISTS `alumnos` ( `id` int(11) NOT NULL auto_increment, `nombres` varchar(100) collate utf8_unicode_ci NOT NULL, `apellidos` varchar(160) collate utf8_unicode_ci NOT NULL, `email` varchar(129) collate utf8_unicode_ci NOT NULL, `telefono` int(11) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1 ;
3. Los archivos
index.php
El index es un archivo importante que se mostrará en la primera impresión del usuario.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Usando Ajax con PHP MySQL: Ejemplos</title>
<script type="text/javascript" src="js/script.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1 class="main_title">Usando Ajax con PHP MySQL: Ejemplos</h1>
<div class="content">
<div class="panel panel-default">
<div class="panel-body">
<h3> Agregar Alumnos</h3>
<form>
<div class="form-group">
<div class="col-sm-2">
<input type="text" id="nombres" class="form-control" placeholder="Nombres">
</div>
<div class="col-sm-2">
<input type="text" id="apellidos" class="form-control" placeholder="Apellidos">
</div>
<div class="col-sm-2">
<input type="text" id="email" class="form-control" placeholder="Email">
</div>
<div class="col-sm-2">
<input type="text" id="telefono" class="form-control" placeholder="Telefono">
</div>
<div class="col-sm-1">
<input type="button" class="btn btn-primary" value="Agregar" onclick="add_member()">
</div>
<div class="col-sm-1">
<input type="reset" class="btn btn-default" value="Limpiar">
</div>
</div>
</form>
<div style="clear:both"></div>
</div>
</div>
<hr>
<div class="panel panel-default">
<div class="panel-body">
<h3> Lista de alumnos</h3>
<div id="list_container">
<?php
// inlcuimos la conexion con el servidor
include('conexion.php');
$pdo = connect();
// Incluir para ver la totalidad de alumnos
include('lista_alumnos.php');
?>
</div>
<!-- lista_contenedor -->
</div>
<!-- content -->
<div class="footer"> Creado por <a href="https://baulphp.com">baulphp.com</a> </div>
<!-- footer -->
</div>
</div>
<!-- panel 2 -->
</div>
<!-- container -->
</body>
</html>conexion.php
<?php
// PDO conexion data base
function connect() {
$hostname = 'localhost';
$name = 'lista_alumnos';
$user = 'root';
$password = 'root';
return new PDO('mysql:host='.$hostname.';dbname='.$name, $user, $password, array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION, PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8"));
}
?>Lista_alumnos.php
Lista de alumnos muestra todos los alumnos registrados y se actualizara cada vez que interactuamos con el formulario o borrando registros de la base de datos.
<table class="table table-bordered" cellspacing="0" cellpadding="0">
<tr>
<th>Nombres</th>
<th>Apellidos</th>
<th>Email</th>
<th>telefono</th>
<th style="width:160px;">Borrar Alumno</th>
</tr>
<?php
// Mostrar labla de alumnosWW
$sql = "SELECT * FROM alumnos ORDER BY id ASC";
$query = $pdo->prepare($sql);
$query->execute();
$list = $query->fetchAll();
foreach ($list as $rs) {
?>
<tr>
<td><?php echo $rs['nombres']; ?></td>
<td><?php echo $rs['apellidos']; ?></td>
<td><?php echo $rs['email']; ?></td>
<td><?php echo $rs['telefono']; ?></td>
<td><a href="#" onclick="delete_member(<?php echo $rs['id']; ?>)"> Borrar</a></td>
</tr>
<?php
}
?>
</table>agregar_alumnos.php
Este archivo PHP se encarga de guardar los datos enviados mediante el formulario.
<?php
include('conexion.php');
$pdo = connect();
// agregar alumnos
try {
$sql = "INSERT INTO alumnos (nombres, apellidos, email, telefono) VALUES (:nombres,:apellidos, :email,:telefono)";
$query = $pdo->prepare($sql);
$query->bindParam(':nombres', $_POST['nombres'], PDO::PARAM_STR);
$query->bindParam(':apellidos', $_POST['apellidos'], PDO::PARAM_STR);
$query->bindParam(':email', $_POST['email'], PDO::PARAM_STR);
$query->bindParam(':telefono', $_POST['telefono'], PDO::PARAM_STR);
$query->execute();
} catch (PDOException $e) {
echo 'PDOException : '. $e->getMessage();
}
// Lista de alumnos a ver
include('lista_alumnos.php');
?>borrar_alumnos.php
Este archivo se encarga de borrar registros mediante el AJAX. A través del ID del registro. Con lo cual, puede eliminar el registro.
<?php
include('conexion.php');
$pdo = connect();
// Borrar alumno con PDO
try {
$sql = "DELETE FROM alumnos WHERE id = :id";
$query = $pdo->prepare($sql);
$query->bindParam(':id', $_POST['id'], PDO::PARAM_INT);
$query->execute();
} catch (PDOException $e) {
echo 'PDOException : '. $e->getMessage();
}
// Mostrar lista de alumnos
include('lista_alumnos.php');
?>
CONCLUSIÓN DEL SISTEMA
Recordemos que JavaScript en un lenguaje de programación que trabaja al lado del navegador y por ende trabaja en el ordenador. Sin embargo, esto sería una gran ventaja para realizar validaciones y manejo de la información sin saturar el servidor.
Sin embargo, hoy en día existen variantes del JavaScript como ser jQuery y Ajax que son tecnologías variantes de este gran lenguaje de programación.
Aquí les muestro un sistema para agregar registros haciendo uso de Ajax para registrar los datos de alumnos en MySQL sin tener que refrescar la página web y por ende obtener un buen rendimiento de nuestra páginas web y/o sistema web.
Espero que esta explicación les sirva bastante en sus proyectos web, saludos desde la virtualidad.
