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://www.baulphp.com">www.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.
no tienen uno donde no sea index.php sino index html y que los datos se envien a servidor con php pero enviandolos de html con un js. ? sin jquery.
Buenas, hay una sola pieza del código que no entiendo…
– var container_id = ‘list_container’ ;
¿que hace? Esta en el script.js
Hola Nestor, pasan los años y sigues ayudando gente con este post. Gracias, funciona perfecto y el código es super claro. Un saludos grande.
hola, consulto le consulto, como seria si a este mismo ejemplo yo quisiera, por ejemplo antes de guardar (mandar al mysql), como seria para ir agregando alumnos, en un listado, una vez que tengo todos los que quiera, mande y guarde.-
Y la segundo opción, como seria para poder buscar un alumno guardado ya en la base mysql, por su nombre y me permita con sus datos, armar un formulario ( con un alumno o varios, ) agregando , borrando, y cuando finalize, mandar a guardar este nuevo formulario.
es decir, que de los datos guardados, me deje buscar el alumno por nombre , y de ahi rellenar un formulario por ejemplo de materias aprobadas, y cuando termine con los alumnos que quiero, guardar… gracias.
Buenas noches, he estado utilizando su ejemplo de ajax y me ha servido mucho, pero no consigo recuperar el valor de un input tipo file, estoy intentando recuperar el valor de dicho input de la siguiente manera: $imgname=$_FILES[‘images’][‘name’], pero no lo consigo, ¿tiene alguna idea de como solucionar el problema ?, le agradecere mucho su ayuda 🙂
es lo que pensé no veo ajax a kilometros
No veo por ninguna parte que estas utilizando AJAX
falta el archivo scrip.js ya antes le habian solicitado.
trate de registrarme en su pagino y no logre que me diera una contraseña.
falta un archivo extención .js (javascript)
Saludos Juan
Ya se solucionó el inconveniente, un saludo.
Hola Falta la funcion addmember y delete_member
Saludos Jorge
Gracias por avisar, ya se solucionó el inconveniente y la descarga está disponible, un saludo.