Ejemplo JSON con JQuery y PHP atacando MySQL

En este código de ejemplo vamos a comunicar JQuery con PHP y MySQL. Vamos a empezar hablando de JQuery, hemos realizado muchos ejemplos de esta librería que sabemos lo mucho que nos facilita la vida, pero buscando más allá, empecé a probar con algo de código que pudiera utilizar en los proyectos personales y profesionales (si es que hay diferencia).

En estas pruebas de JQuery, lo he orientado bastante a la parte gráfica, crear capas, eliminarlas, moverlas, girarlas, etc… y de hecho sigo avanzando por ese sitio (ahora estoy poniendome al día con la trigonometría y física de movimiento) pero para un proyecto de www.reinosdepapel.com en el que estoy metido para crear un gestor de juego para partidas de rol online, necesitaba desarrollar el tablero y para ello comunicar a todos los jugadores. Ahí entraría jQuery y por supuesto PHP con MySQL.

Sin querer extenderme mucho, en resumen lo que voy a poner es un fragmento que realiza la carga de la posición inicial de todos los personajes sobre el tablero, os dejo el código y luego lo explico, echarle un ojo que es muy sencillo 😉

function cargaPersonajes(){
jQuery.post(“funciones.php”, { //llamo al php que contiene la lógica pasándo el parámetro accion
accion: ‘cargaInicialPersonajes’
}, function(data, textStatus){

var cargaPersonaje = JSON.parse(data);
var idPersonaje = “”;

for (x=0; x < cargaPersonaje.length; x++)
{
//Creo una capa en el menú superior
jQuery(‘#menuSuperior’).append(‘<div id = “menuPersonaje’+cargaPersonaje[x][‘idPersonaje’]+'”></div>’);
idPersonaje = “#menuPersonaje”+cargaPersonaje[x][‘idPersonaje’];
$(idPersonaje).css(“float”, “left”);
$(idPersonaje).css(“width”, ’88px’);
$(idPersonaje).css(“height”, ’88px’);
$(idPersonaje).css(“margin”, ‘5px’);
$(idPersonaje).css(“background-image”, ‘url(./imgs/’+cargaPersonaje[x][‘img’]+’)’);

//creo una capa nueva en el tablero con el id del personaje
jQuery(‘#tablero’).append(‘<div id = “idPersonaje’+cargaPersonaje[x][‘idPersonaje’]+'”></div>’);

idPersonaje = “#idPersonaje”+cargaPersonaje[x][‘idPersonaje’];
$(idPersonaje).css(“position”, “absolute”);
$(idPersonaje).css(“width”, ’88px’);
$(idPersonaje).css(“height”, ’88px’);
$(idPersonaje).css(“left”, cargaPersonaje[x][‘posX’] + ‘px’);
$(idPersonaje).css(“top”, cargaPersonaje[x][‘posY’] + ‘px’);
$(idPersonaje).css(“background-image”, ‘url(./imgs/’+cargaPersonaje[x][‘img’]+’)’);
}
});
}

Ahora voy a hablar de este código en jQuery, lo primero que hago es llamar al fichero PHP  funciones.php, pasándole el parámetro accion con el valor “cargaInicialPersonajes” para que desde funciones sepa lo que tiene que hacer, en este caso, con JQuery es el encargado de recibir los datos (data, textStatus), cargo la variable cargaPersonaje con el JSON parseado de data, esto lo que me devuelve es una tabla de dos dimensiones que ya venía preparada de funciones.php

Lo siguiente ya es tratamiento de la información, en mi caso lo que hago es crear un bucle para cargar todos los jugadores que estén en la partida, añado una capa con append, guardo el nombre de la capa en idPersonaje y luego utilizando la función css de jQuery le paso los parámetros. Si os fijáis lo hago por dos veces, bueno, la primera se añade en la capa “menuSuperior” que es para que se vean los jugadores con sus opciones y demás, y la segunda parte carga también los parámetros left y top para situar la capa en el lugar que corresponda del tablero. De todas maneras si esto no lo entendéis no tiene mayor importancia ya que es solo una parte del código sin importancia. Lo importante de la llamada desde JQuery es esta:

jQuery.post(“funciones.php”, { //llamo al php que contiene la lógica pasándo el parámetro accion
accion: ‘cargaInicialPersonajes’
}, function(data, textStatus){

var cargaPersonaje = JSON.parse(data);
//Tratamos los datos de cargaPersonaje que puede ser cualquier otra variable

Para pasarle más valores solo hay que ponerlo seguido de una “,”  nombre de variable:valor. Ahora vamos a poner el php. No voy a poner la conexión que entiendo que si estáis probando esto estáis ya formados, si lo necesitáis lo comentáis y lo completo. El código PHP:

//Devuelvo todos los personajes actuales
$consulta = “SELECT idPersonaje, nombre, img, posX, posY from personaje WHERE idAventura = “. $aventura;
$registro = mysqli_query($conexion, $consulta);

$personajes = array(); //creamos un array

//guardamos en un array multidimensional todos los datos de la consulta
$i=0;

while($row = mysqli_fetch_array($registro))
{
$personajes[$i] = $row;
$i++;
}
echo json_encode($personajes);

Con este pequeño código en PHP nos traemos toda una consulta con sus campos y demás que luego se podrá utilizar atacando el array como ya vimos en JQuery de una forma más que sencilla sin precarga y todo “a tiempo real”.

Si tenéis cualquier duda podéis comentarla y si queréis que siga poniendo más ejemplos de los avances, también podéis compartirlo!!