Alternativas Web - El arte de la programación Web

About the Product

php MySQL + AJAX is an openSouce code that includes the AJAX libraries of prototype and script.aculo.us that allows it to do the following on a single page:

• Insert new entries to database
• Edit those entries
• Delete a particular entry

The project will hepl programmers to have and easier and more interactive environment, and make them faster and more secure and of course the integration of Web 2.0.

DEMO

For a product demostration click here

Intalling the product

1. First of all download the product from here phpmysqlajax.zip.
2. Now we decompress the files to our server. We will have something like this:
3. Now we'll create a database using phpMyAdmin or any program that can handle databases.
4. Then we have to run the 'intalacion.sql' code in the phpMyAdmin>SQL Section
5. Finally we have to modify the file conectarse.php which contains the information needed to connect to our database. The file looks like this by default:

How it Works

We will go step by step so we can explain how the project works. I assume that you decompressed the file to the directory ajaxphpmysql and that you can access it via http://<servername>/ajaxphpmysql

Files in /ajaxphpmysql/

acciones.php - Gets the AJAX petitions and returns with code generated by acciones.php

conectarse.php - Connects to database whenever it is included.

estilo.css - System's stylesheet

globales.php - Most important file. Sends responses via acciones.php. It can insert, edit or delete entries.

index.php - This file links every other file, is the only page that the user can see, the communication with the user happens in this page.

instalacion.sql - It can be deleted once it is used. Contains database structure

Archivos en /ajaxphpmysql/js/

ajax.js - Creates an XMLHTTP object depending on the Browser (if its IE or not)

builder.js, controls.js, dragdrop.js, effects.js, controls.js, scriptaculous.js, slider.js, sound.js, unittest.js - Script.Aculo.Us Library

prototype.js - Prototype library.

globales.js - Like globales.php, this script sends petitions to the server and integrates them with Script.Aculo.Us and Prototype for creating visual effects

Ok, we reviewed each file, now it is time to learn how the system works.

Creating a new entry

It all starts with index.php, which has a simple form. This form has an ID, so that it can be sent via AJAX. The form is submitted by clicking the button 'Ingresar'.

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

It is basically calling the function EnviarFormulario which needs 3 parameters:

1) Name of the form sent - POST METHOD

2) Content Loaded when form is proccessed It will call 'Contenido Persona' when the form is done

3) ID where you want your info to show - that means the content of 'Contenido Persona' will be dropped in the division 'divContenido'

The function EnviaFormulario can be found in js/globales.js

function EnviaFormulario(nombreFormulario, nombre, division){
peticion.open("POST", "acciones.php", true); // Define that it will send to acciones.php
peticion.onreadystatechange = function(){ // When petition is over...
if(peticion.readyState == 4 ){
if(peticion.status == 200 ){
$("divMsg").innerHTML = peticion.responseText; // change the division 'divMsg' with server's response(sent by acciones.php)
ObtenerContenido(nombre, division); // Refresh Content
$("divMsg").appear(); // Effect with Script.Aculo.us
new Effect.Shake("divMsg", {distance:2}); // Another Efecto
}
}
}

peticion.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // needed when you make a petition with the POST METHOD(only POST METHOD)
var parametros = $(nombreFormulario).serialize(); // we define var parametros and fill it with the form's info with prototype.js
peticion.send(parametros); // send the petition
}

Deliting an entry

To deleta an entry we will make something similar to the previos explanation. We'll call the function EliminaPersona which needs 3 arguments:

1) The entry ID - Automatically Generated by dataBase

2) Name of the content to load

3) Name of the division where the loaded content will be placed.

function EliminaPersona(id, nombre, division){
var url = "acciones.php?eliminar=Persona&id="+id;
peticion.open("GET", url, true); // now we use the GET METHOD
peticion.onreadystatechange = function(){ // when it's over...
if(peticion.readyState == 4 ){
if(peticion.status == 200 ){
new Effect.Fade('registro'+id, { duration: 1.0 }); // Fade the entry with the ID sent
$("divMsg").innerHTML = peticion.responseText;
$("divMsg").appear();
new Effect.Shake("divMsg", {distance:2}); // And shake the alert baby!
}
}
}
peticion.send(null); // Important: We sent null because the variables are defined in var URL so we can leave it like this
}

Update an entry

We've got 2 stages for updating an entry, the first one hides all entries and leaves a form with only the entry selected, the second one, sends the form and updates the entry

First, we'll call the function ObtenerContenido with the event 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);
}

And we will tell the server: Get the info that the function ObtenerFormularioPersona of accciones.php gives you and replace it in the division divContenido.

And finally send that form with the function 'EnviaFormulario' previously discused.

You're ready to develop interfaces with PHP MySQL and AJAX. If you have any doubt related to this post, leave a commentary and I will reply as soon as posible.