Genesis Vargas J

Insertar y Consultar (mostrar registros) con AJAX (JQUERY), PHP y MySQL

Comparte:

Hola amigos, esta vez les traigo un tutorial/ejemplo de como insertar y consultar (mostrar) datos con PHP y AJAX (jquery) de forma que no recarguemos la página y tengamos una mejor experiencia de uso.

Este ejemplo puede utilizarse para cualquier sistema, yo he simulado hacer un registro de empleados y en la misma página muestro los empleados que estan en la base de datos registrados. El ejemplo consta de 3 archivos php, 1 archivo js y 1 archivo css; La apariencia de la página quedaría así:

INDEX.PHP

<!DOCTYPE html>
<html lang="es">
<head>
<title>Registro de empleados</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="ajax.js"></script>
</head>
<body>
<header>
    <nav>
        <h2>Insertar/Mostrar Datos con AJAX y PHP</h2>
    </nav>
<header>
<div id="contenedor">
    <div id="inscribir">
    <section class="widget">
<h4 class="widgettitulo">Inscribir Nuevo Empleado</h4>
 <form name="empleado" onsubmit="return false" action="return false">
            <input type="text" id="cedula" name="cedula" placeholder="Nº CEDULA" autocomplete="off" tabindex="1" required>
            <input type="text" id="nombre" name="nombre" placeholder="NOMBRE" autocomplete="off" tabindex="2" required>
            <input type="text" id="fecha" name="fecha_nacimiento" placeholder="FECHA DE NACIMIENTO" tabindex="4" required>
            <input type="text" id="cargo" name="cargo" placeholder="CARGO EN LA EMPRESA" tabindex="4" required>
            <button onclick="Registrar();" tabindex="7">Guardar
            <br style="clear:both;">
        </form>
        <div id="respuesta"></div>
    </section>
    </div>
    <div id="consultar">
    <section class="widget">
        <h4 class="widgettitulo">Listado de Empleados</h4>
        <div class="datagrid" id="datagrid">

        </div>  
    </section>
    </div>
</div>     
</body>
</html>             

Esta es nuestra página donde de un lado vamos a mostrar los empleados que estan registrados en la base de datos y del otro lado tenemos un formulario que vamos a utilizar para registrar los empleados a la base de datos para luego mostrarlos en la tabla del lado izquierdo, en esta página incluimos el archivo ajax.js, el archivo style.css y jquery.

CONSULTA.PHP

<?php
require("conexion.php");
$consulta = mysqli_query($con, "SELECT * FROM empleados");
if (mysqli_num_rows($consulta) > 0)
{
    echo "
<p>"; while($row = mysqli_fetch_array($consulta, MYSQL_ASSOC)) { echo "<tr>"; echo "<<td>".$row['cedula']."</td>"; echo "<td>".$row['nombre']."</td>"; echo "<td>".$row['fecha_nacimiento']."</td>"; echo "<td>".$row['cargo']."</td>"; echo "</tr>"; } echo " <table> <thead> <tr> <th>Nº de Cédula</th> <th>Nombre</th> <th>Fecha Nacimiento</th> <th>Cargo</th> </tr> </thead> </table> 
} else { 
echo " <p>Aún no hay registros en la base de datos</p> 
}
?>

Aquí imprimos una tabla que es la que va a contener los registros de los empleados registrados en la base de datos, para esto requerimos el archivo de conexión y hacemos una simple consulta MYSQL para obtener todos los datos de todos los registros en la tabla empleados, hacemos un while wue recorra todas las filas de la consulta y que imprima una fila (<tr>) con los respectivos datos que nos devuelva la consulta.

REGISTRO.PHP

<?php
require("conexion.php");
        
//evitar inserccion de cualquier caracter que no sea letra o numero
function HayHack($string)
{  
    if (ereg("[^A-Za-z0-9]+",$string))
    {
        $hack = true;
    }
    else
    {
        $hack = false;
    }
    return $hack;
}  

if(HayHack($_POST['cedula']) || HayHack($_POST['nombre']) ||HayHack($_POST['fecha']) ||HayHack($_POST['cargo']))
{
    echo "Hay algo que pasó y no lo hicé yo, serás tu?.";
}
else
{
    //variables POST
    $cedu = $_POST['cedula'];
    $nom = $_POST['nombre'];
    $fech = $_POST['fecha'];
    $cargo = $_POST['cargo'];
    //consulta mysql para insertar los datos del empleados
    $consulta = "INSERT INTO empleados VALUES ('" .$cedu. "','" .$nom. "','" .$fech. "','" .$cargo. "')";
    mysqli_query($con, $consulta);
    if($consulta)
    {            
        echo "Empleado Guardado Correctamente";
    }
    else
    {
        echo "No se pudieron guardar los datos";
    }
}
?>

Aquí recibimos los datos que nos envía mediante ajax la funcion Registrar del archivo ajax.js, primero requerimos el archivo de conexión a la base de datos, luego esos datos los parseamos con una funcion para verificar que en el formulario escribieron números o letras; después estos datos los insertamos en la tabla empleados de nuestra base de datos y finalmente mandamos la respuesta: si se inserto mostramos el mensaje correspondiente y sino igual.

CONEXION.PHP

<?php
$con = new mysqli("localhost", "root", "", "Ejemplo");
if ($con->connect_errno)
{
    echo "Fallo al conectar a MySQL: (" . $con->connect_errno . ") " . $con->connect_error;
    exit();
}
@mysqli_query($con, "SET NAMES 'utf8'");
?>

Este es el archivo de configuracion donde indicaremos los datos de conexión a mysql.

AJAX.JS

window.onload = function () {
    Cargar();    
}
function Registrar()
{
    var cedu = $("#cedula").val();
    var nom = $("#nombre").val();
    var fech = $("#fecha").val();
    var carg = $("#cargo").val();
    $("#respuesta").html("<img src="loader.gif" /> Por favor espera un momento");
    $.ajax({
        type: "POST",
        dataType: 'html',
        url: "registro.php",
        data: "cedula="+cedu+"&nombre="+nom+"&fecha="+fech+"&cargo="+carg,
        success: function(resp){
            $('#respuesta').html(resp);
            Limpiar();
            Cargar();
        }
    });
}   
function Cargar()
{
    $('#datagrid').load('consulta.php');    
}
function Limpiar()
{
    $("#cedula").val("");
    $("#nombre").val("");
    $("#fecha").val("");
    $("#cargo").val("");
}

Este es el archivo jquery que se encargar de usar ajax para hacer las operaciones de nuestro ejemplo, tenemos una función llamada Cargar que utiliza el metodo load de jquery para cargar un archivo php o html dentro de un div, la función Registrar recoge el valor de las cajas de texto del formulario con el metodo val de jquery a través del id de cada uno y los guarda en una variable, luego utilizamos la funcion .ajax de jquery y le decimos que el metodo a usar es POST, que el tipo de datos que vamos a usar es html, le vamos a indicar la url del archivo php que va a procesar la petición, a continuación le indicamos la data que en este caso serían las variables que recogimos anteriormente pero al mismo tiempo concatenado cada una y finalmente cuando la petición haya sido exitosa vamos a mostrar en el div respuesta lo que nos devolvió el archivo registrar.php limpiamos los input y recargamos el datagrid.

STYLE.CSS

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
body {
    margin:0;
    width:100%;
    font-family: 'Lato', sans-serif;
    font-size:16px;
    background:#fff;
}
a {
    color:#2c5aa0;
}
header {
    background: #3771c8;
    background: -moz-linear-gradient(top, #3771c8 0%, #2c5aa0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3771c8), color-stop(100%, #2c5aa0));
    background: -webkit-linear-gradient(top, #3771c8 0%, #2c5aa0 100%);
    background: -o-linear-gradient(top, #3771c8 0%, #2c5aa0 100%);
    background: -ms-linear-gradient(top, #3771c8 0%, #2c5aa0 100%);
    background: linear-gradient(top, #3771c8 0%, #2c5aa0 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@top-color', endColorstr='@bottom-color', GradientType=0);
    padding: 0px 5px ;
    border-top: 1px solid #889;
    border-bottom: 1px solid #2c5aa0;
    text-align: center;
    color:#fff;
}
#contenedor {
    width:980px;
    margin:0 auto;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
    box-shadow: 0 1px 3px rgba(0,0,0,.4);
    background: #ffffff;  
}
#inscribir {
    background: #fff;  
    padding-top: 15px;
    width: 480px;
    float: right;
}
#consultar {
    background: #fff;  
    padding-top: 15px;
    width: 480px;
    float: left;
}
.widget {
    background-color: #fff;   
    margin: 0 0 15px;
    border: 1px #2c5aa0 solid;
}
.widgettitulo {
    background: #C4C4C4;
    background: -moz-linear-gradient(top, #C4C4C4 0%, #A4A4A4 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #C4C4C4), color-stop(100%, #A4A4A4));
    background: -webkit-linear-gradient(top, #C4C4C4 0%, #A4A4A4 100%);
    background: -o-linear-gradient(top, #C4C4C4 0%, #A4A4A4 100%);
    background: -ms-linear-gradient(top, #C4C4C4 0%, #A4A4A4 100%);
    background: linear-gradient(top, #C4C4C4 0%, #A4A4A4 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@top-color', endColorstr='@bottom-color', GradientType=0);
    text-align: center;
    color:#222;
    margin: 0 0 5px;
    padding: 6px 0;
}
footer {
    background: #3771c8;
    background: -moz-linear-gradient(top, #3771c8 0%, #2c5aa0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3771c8), color-stop(100%, #2c5aa0));
    background: -webkit-linear-gradient(top, #3771c8 0%, #2c5aa0 100%);
    background: -o-linear-gradient(top, #3771c8 0%, #2c5aa0 100%);
    background: -ms-linear-gradient(top, #3771c8 0%, #2c5aa0 100%);
    background: linear-gradient(top, #3771c8 0%, #2c5aa0 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@top-color', endColorstr='@bottom-color', GradientType=0);
    text-align:center;
    color:#fff;
    padding:1px;
    clear: both;
}
footer a {
    color:#f5f5f5;
}
#respuesta {
    text-align:center;
}
/* version computador/portatil */
@media screen and (max-width: 1336px) {

    #contenedor {
        width: 96%;
    }
    #inscribir {
        width: 48%;
    }
    #consultar {
        width: 48%;
    }
    #consultar .widget, #inscribir .widget  {
        padding: 8% 7%;
    }    

}
/* version tablet/smartphone */  
@media screen and (max-width: 800px) {

    #inscribir {
        width: auto;
        float: none;
        margin: 20px 0;
    }
    #consultar {
        width: 100%;
        margin: 0;
        float: none;
    }
    #consultar .widget {
        padding: 3% 4%;
        margin: 0 0 10px;
    }
    .widget {border: none;}
}
/*alertas*/
span { background: #222; color:#fff;font-weight:bold;padding:4px}

/*datagrid*/
.datagrid table { border-collapse: collapse; text-align: left; width: 100%; } .datagrid {font: normal 12px/150% Arial, Helvetica, sans-serif; background: #fff; overflow: hidden; border: 1px solid #006699; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }.datagrid table td, .datagrid table th { padding: 3px 10px; }.datagrid table thead th {background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #00557F) );background:-moz-linear-gradient( center top, #006699 5%, #00557F 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F');background-color:#006699; color:#FFFFFF; font-size: 15px; font-weight: bold; border-left: 1px solid #0070A8; } .datagrid table thead th:first-child { border: none; }.datagrid table tbody td { color: #00557F; border-left: 1px solid #E1EEF4;font-size: 12px;font-weight: normal; }.datagrid table tbody .alt td { background: #E1EEf4; color: #00557F; }.datagrid table tbody td:first-child { border-left: none; }.datagrid table tbody tr:last-child td { border-bottom: none; }.datagrid table tfoot td div { border-top: 1px solid #006699;background: #E1EEf4;} .datagrid table tfoot td { padding: 0; font-size: 12px } .datagrid table tfoot td div{ padding: 2px; }.datagrid table tfoot td ul { margin: 0; padding:0; list-style: none; text-align: right; }.datagrid table tfoot  li { display: inline; }.datagrid table tfoot li a { text-decoration: none; display: inline-block;  padding: 2px 8px; margin: 1px;color: #FFFFFF;border: 1px solid #006699;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #00557F) );background:-moz-linear-gradient( center top, #006699 5%, #00557F 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F');background-color:#006699; }.datagrid table tfoot ul.active, .datagrid table tfoot ul a:hover { text-decoration: none;border-color: #00557F; color: #FFFFFF; background: none; background-color:#006699;}

/*formulario*/
button { cursor:pointer;margin:0 auto;width:50%;height:30px;display: block;background: #3771c8;border:1px solid #3771c8;color:#fff; font-weight: bold; font-size: 1em;}
input { margin:0 auto;width:80%; display: block; border-style: solid; border-width: 1px; border-color: #dedede; margin-bottom: 20px; font-size: 1.2em; color: #777; height:30px; padding-left:15%; font-family: "Raleway", sans-serif; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset; transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;}
input:focus { width:80%; display: block; border-style: solid; border-width: 1px; border-color: #dedede; margin-bottom: 20px; font-size: 1.2em; color: #777; height:30px; padding-left:15%; font-family: "Raleway", sans-serif; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset; transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s; color: #333; border-color: rgba(41, 92, 161, 0.4); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 3px rgba(41, 92, 161, 0.6); outline: 0 none; }
input#nombre { background: #fff url('user.png') 5px 4px no-repeat;}
input#fecha { background: #fff url('calendar.png') 5px 4px no-repeat;}
input#cedula { background: #fff url('cedula.png') 5px 4px no-repeat;}
input#cargo { background: #fff url('cargo.png') 5px 4px no-repeat;}       

Con este archivo le damos toda la elegancia a nuestro ejemplo, es de mi autoria y tiene el plus que es responsive para que no se pierda la apariencia de la página.

Y así se ve cuando registramos un nuevo empleado y la respuesta que nos manda el archivo registro.php con ajax.

Bueno eso es todo espero que les sirva mucho para aprender y practicar. les dejo una carpeta comprimida para que descarguen el ejemplo y también un demo para que lo vean en funcionamiento.

DEMO

Comentarios


genesis vargas

Soy Genesis Vargas Jiménez, autor de éste blog. Me gusta desarrollar software en todas las plataformas (web, móvil y desktop) y compartir conocimiento para ayudar a muchas personas.

Desde el 2015 soy MVP Microsoft en Visual Studio y tecnologías de desarrollo, reconocimiento que me enorgullece mucho.

MVP Genesis Vargas J

A PHP Error was encountered

Severity: Core Warning

Message: Module 'timezonedb' already loaded

Filename: Unknown

Line Number: 0

Backtrace: