Alternativas Web - El arte de la programación Web

Acerca del Producto

php MySQL + AJAX es un código que incluye las librerías populares de AJAX prototype y script.aculo.us para crear desde una sóla página las siguientes funciones:

• Insertar nuevos registros a la base de datos
• Editar esos registros
• Eliminar algún registro seleccionado

El proyecto anterior le ayudará a los programadores a hacer su trabajo mucho más fácil y dinámico, lo que entregará plataformas más rápidas, seguras y con Web 2.0.

DEMO

Para una desmostración del producto haz click aquí

Instalación

1. Para empezar comenzaremos por descargar el archivo phpmysqlajax.zip.
2. Descomprimimos nuestro archivo a nuestro servidor. Nos quedará algo como lo siguiente:
3. Posteriormente crearemos una nueva base de datos en phpMyAdmin o culaquier programa que utilices para gestionar tus bases de datos MySQL.
4. Si estás usando phpMyadmin, una vez creada la base de datos nos vamos a la pestaña de SQL, regresamos a nuestro fólder y abrimos el archivo 'instalacion.sql', copiamos el contenido y lo pegamos en la pestaña de SQL de phpMyAdmin
5. Ahora falta únicamente editar los datos de la conexión a la base de datos, para ello, utilizaremos nuestro editor de textos favoritos y abriremos el archivo conectarse.php. y cambiaremos los datos según nuestra base. El archivo por defecto es así:

Funcionamiento

Nos iremos paso a paso para explicar el modo de funcionamiento de la aplicación. Se intuye que los archivos se copiaron a la carpeta ajaxphpmysql y que se accesa a través de http://<nombredeservidor>/ajaxphpmysql

Archivos en /ajaxphpmysql/

acciones.php - Recibe las peticiones ajax y las devuelve con una lista de funciones globales.

conectarse.php - Realiza conexiones a la base de datos siempre que éste sea llamado.

estilo.css - La hoja de estilos del sistema

globales.php - Archivo más importante, envía respuestas a las peticiones AJAX mediante acciones.php. Se encarga de insertar nuevos registros, editarlos y en su caso eliminarlos.

index.php - Éste es el archivo que enlaza todos, la única página que el usuario es capaz de visualizar, la comunicación con el usuario se realiza en esta página.

instalacion.sql - Puede ser borrado cuando ya ha sido utilizado, es un archivo con la estructura de la base de datos MySQL

Archivos en /ajaxphpmysql/js/

ajax.js - Crea un objeto XMLHTTP dependiendo del Browser (o más bien si es Internet Explorer o nó)

builder.js, controls.js, dragdrop.js, effects.js, controls.js, scriptaculous.js, slider.js, sound.js, unittest.js - Archivos que contienen la librería Script.Aculo.Us

prototype.js - Contiene la librería prototype

globales.js - Al igual que globales.php, es el encargado de enviar peticiones al servidor según los eventos que realize el usuario, así como la integración de prototype y Script.Aculo.Us para efectos visuales y facilitar la programación.

Ok, ya vimos que hace cada uno de los archivos, ahora pondremos paso a paso los tres procesos que realiza la aplicación:

Creando un nuevo registro

Todo comienza en el archivo index.php, el cúal contiene un simple formulario. Cabe mencionar que el formulario cuenta con un ID, ya que ésta es la clave para que pueda ser pasado por medio de AJAX. De igual forma notaremos que el botón Ingresar llama una función javascript de la siguiente manera:

<input type="button" onclick="EnviaFormulario('formPersona', 'ContenidoPersona', 'divContenido')" value="Ingresar" />

Lo que está haciendo es llamar a la función EnviarFormulario la cual necesita 3 parámetros:

1) Nombre del formulario que se está enviando - Se realiza por medio de post, sin necesidad de nombrar cada input gracias a prototype.

2) Contenido que va a cargar cuando se envíe el formulario Es decir, cuando acabe de insertar un nuevo registro, va a llamar al 'ContenidoPersona'

3) ID del contenido donde va a vaciar la información - Es decir, la información de ContenidoPersona, la va a vaciar en la division con el id de 'divContenido'

La función EnviaFormulario se encuentra dentro de js/globales.js

function EnviaFormulario(nombreFormulario, nombre, division){
peticion.open("POST", "acciones.php", true); // Definimos que se mandará a acciones.php
peticion.onreadystatechange = function(){ // Cuando acabe la petición, se hará lo siguiente
if(peticion.readyState == 4 ){
if(peticion.status == 200 ){
$("divMsg").innerHTML = peticion.responseText; // cambiarás la división 'divMsg' con la respuesta del servidor (enviado por acciones.php)
ObtenerContenido(nombre, division); // actualizas el contenido de divContenido
$("divMsg").appear(); // Realizas un efecto de aparición con Script.Aculo.us
new Effect.Shake("divMsg", {distance:2}); // Realizas otro Efecto
}
}
}

peticion.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // necesario para mandar con el método POST (únicamente con POST)
var parametros = $(nombreFormulario).serialize(); // definimos var parametros y lo llenamos con el nombre del formulario
peticion.send(parametros); // enviamos la petición
}

Eliminando una entrada

Para la eliminación de una petición, realizamos un método similar, mediante la función EliminaPersona, la cuál nos pide los siguientes parámetros:

1) El id del registro seleccionado - Generado automáticamente por la base de datos

2) El nombre del contenido a cargar

3) El nombre de la división en la que será vaciada el contenido

function EliminaPersona(id, nombre, division){
var url = "acciones.php?eliminar=Persona&id="+id;
peticion.open("GET", url, true); // notemos que ahora hacemos la petición mediante GET
peticion.onreadystatechange = function(){ // cuando acabe
if(peticion.readyState == 4 ){
if(peticion.status == 200 ){
new Effect.Fade('registro'+id, { duration: 1.0 }); // se desvanece el texto con el id enviado
$("divMsg").innerHTML = peticion.responseText;
$("divMsg").appear();
new Effect.Shake("divMsg", {distance:2}); // Y realiza el mismo efecto con el mensaje
}
}
}
peticion.send(null); // nótese que mandamos null, es decir como es GET, las variables enviadas fueron definidas en la variable url
}

Actualizar una entrada

Para actualizar una entrada contamos con 2 fases, la primera quita todos los registros y deja únicamente el registro a editar, la segunda, manda el formulario y actualiza la entrada

Primero llamamos la función ObtenerContenido con un evento onClick

function ObtenerContenido(nombre, division, id){
var url = "acciones.php?obtener="+nombre+"&id="+id;
peticion.open("GET", url, true);
peticion.onreadystatechange = function(){
if(peticion.readyState == 4 ){
if(peticion.status == 200 ){
$(division).innerHTML = peticion.responseText;
}
}
else{
$(division).innerHTML = "Cargando...";
}
}
peticion.send(null);
}

Y básicamente pondremos. Quiero poner lo que arroje la función ObtenerFormularioPersona de accciones.php y reemplazarlo en la división divContenido.

Y finalmente ese formulario envíalo con la función 'EnviaFormulario' que se vió anteriormente.

Estás listo para empezar a hacer plataformas en PHP MySQL y AJAX. Si tienes alguna duda relacionada a este post, no dudes en dejar un comentario.