Bases de Datos con Flash y AMFPHP

Por Maikel el 11 de Septiembre de 2005 con 182,735

visitas.
Aplicaciones web y moviles Otros tutoriales por Maikel.

Este tutorial es para de alguna manera quitar el miedo que tienen los
programadores nuevos y de nivel medio de ActionScript y PHP de desarrollar
proyectos con AMFPHP, no abarcar todo sobre esto pero tratar de darle un
buen empuje hacia el aprovechamiento de Flash Remoting, y lo har con un
ejemplo de las tpicas operaciones sobre Base de Datos (insertar, consulta,
modificar y eliminar).

Requerimientos para seguir el tutorial:

Tener instalado los componentes de Flash Remoting, as como

tambin haber instalado AMFPHP en el servidor que vayamos a usar,
sino sabes de lo que estoy hablando, por favor lee estos 2 tutoriales
primero:

Tutorial de instalacin de Flash Remoting y AMFPHP

Tutorial de induccin e instalacin de Flash Remoting y

AMFPHP

Conocimientos medios de programacin en PHP y ActionScript.

Conocimientos bsicos de Base de Datos y de MySQL

Preparacin de la Base de Datos:

Crea una base de datos para el ejemplo (o usa la que tengas si es de
alojamiento gratuito), en mi caso llamar a la base de datos AMFPHP.
Crea una tabla con 3 campos, en mi caso le di el nombre de prueba, los campos
debern tener esta descripcin:
Nombre

Tipo de
Dato

Caractersticas adicionales

id

bigint

not null, auto_increment, clave

primaria

nombre

text

null

comentarios

text

null

Consideraciones:

En el ejemplo se utilizo las funciones escape y unescape de flash para

la codificacin de los datos, as que la forma en que se guarden los
datos en la Base de Datos no ser igual a como se escriben en la
aplicacin, por poner un ejemplo un espacio ser representado en la
Base de Datos con un %, otro caso sera el punto "." que estar

representado por la secuencia %2E, esto se hizo con el fin de

solventar los problemas de los caracteres especiales como letras
acentuadas, tildes, etc. As que si los campos nombre y comentarios
de la tabla son de tipo varchar de 30 caracteres solo se guardarn los
caracteres que alcancen y no precisamente los 30 caracteres que
escribamos en la aplicacin por lo ya explicado.

Si usas PHP5, por favor instala AMFPHP Milestone 2 (o superior), en

este caso, el uso de escape y unescape de la consideracin anterior
es redundante, al igual que el uft8_encode en el script php, ya que
dicha versin de AMFPHP trabaja por defecto con la codificacin UTF8 y a diferencia de la versin 0.9 trabaja con php5.

Preparacin del Escenario:

Nos apoyaremos de las herramientas que nos provee Flash como son los
componentes y unos textos dinmicos para crear la interfaz de nuestra
pequea aplicacin, contaremos con:
Tipo

Cantid
ad

Nombre de Instancia(s)

DataGrid

datagrid

Button

btnConsultar, btnInsertar, btnModificar,

btnEliminar, btnSi, btnNo

TextInput

idtxt, nombretxt y comentariostxt.

Dynamic
Text

estadotxt, cabeceratxt y preguntatxt.

Static
Text

----

Razn de cada uno:

datagrid: repositorio de los registros de la Base de Datos.
btnConsultar: har un consulta a la base de datos.
btnInsertar, btnModificar y btnEliminar: prepararn los TextInputs para la
consulta que se vaya hacer sobre la base de datos.
btnSi, btnNo: servirn para confirmar o cancelar la accin sobre la base de
datos.
idtxt, nombretxt y comentariostxt: contendrn los datos de la celda
seleccionada en el datagrid, en el caso de que sea presionado el boton
btnInsertar estos se formatearn.
estadotxt: avisar si la consulta fue realizada exitosamente o no.
preguntatxt: formular una pregunta correspondiente para la confirmacin de la
accin.

Nuestra interfaz quedar as

En el desarrollo de nuestro ejemplo tendremos que codificar nuestro servicio

(backend), que no es ms que una clase PHP, y por supuesto la creacin de
nuestro swf con el cdigo de ActionScript para comunicarnos con el servicio y
procesar la informacin que nos mande este. Empezaremos con nuestro
servicio, contendr un mtodo para cada operacin (insertar, modificar,
eliminar y consultar) sobre la Base de Datos, estaramos hablando de 4 solo con
estos, e implementaremos un 5 mtodo dedicado a ejecutar las consultas,
echemosle un vistazo al cdigo del servicio.
Nota: este archivo debe estar guardado en la carpeta services que creamos
al instalar AMFPHP en nuestro servidor.
Cdigo PHP (misquerys.php)

<?php

class misquerys{
function misquerys (){

$this->methodTable = array(
"insertar" => array (
"description" => "inserta un registro",

"access" => "remote",

"arguments" => array("nombre","comentarios")

),
"eliminar" => array (
"description" => "elimina un registro",
"access" => "remote",
"arguments" => array("id")

),
"modificar" => array (
"description" => "modifica un registro",
"access" => "remote",
"arguments" => array("id")

),
"consulta" => array (
"description" => "consulta n campos",
"access" => "remote"

),
"query" => array (
"description" => "ejecuta un query a MYSQL",
"access" => "private",
"arguments" => array ("sql","accion")
)

);
}
function insertar($nombre,$comentarios){
$nombre = utf8_encode($nombre);
$comentarios = utf8_encode($comentarios);
$sql= "INSERT INTO prueba (id,nombre,comentarios) VALUES ('','" .
$nombre."','".$comentarios."')";
return $this->query($sql,1); //retornamos el id de nuestro registro
insertado

}
function eliminar ($id){
$sql= "DELETE FROM prueba WHERE id='".$id."' LIMIT 1";
return $this->query($sql,0);
}
function modificar ($id,$nombre,$comentarios){
$nombre = utf8_encode($nombre);
$comentarios = utf8_encode($comentarios);
//creamos la cadena de nuestra sentencia(query) SQL

$sql = "UPDATE `prueba` SET `nombre` ='".$nombre."',

`comentarios` ='".$comentarios."' WHERE `id` =".$id." LIMIT 1;";
return $this->query($sql,0);
}
function consulta (){
$sql = "SELECT * FROM prueba ORDER BY id ";

return $this->query($sql,0);

}
function query ($sql, $accion){
$conex= mysql_connect("tuhost","user","password") or die("no se
puede conectar porque ".mysql_error());
mysql_select_db("nombredebasededatos");
$result= mysql_query($sql,$conex);
if ($accion && result){
$result= mysql_insert_id();
}
mysql_close($conex);
return $result;
}

}
?>

Explicacin:
class misquerys ( : igual al nombre del archivo, exceptuando la extensin .php
function misquerys () : constructor de la clase, identificador igual al nombre de
la clase.
$this->methodTable = array( : para definir los mtodos que tendr nuestra
clase.
"insertar" => array ( : nombre del mtodo insertar de nuestra clase, al igual
que las lneas similares.
"description" => "inserta un registro", : comentario del mtodo, describimos
que hace dicho mtodo.
"access" => "remote", : tipo de acceso del mtodo, posibles valores: public,
remote y private.
"arguments" => array("nombre","comentarios") : parmetros del mtodo.
Una descripcin detallada de cada mtodo:
Nomb
re

Parmetr
os

inserta
r

$nombre,
$comentar
ios

Explicacin
Inserta los
parmetros a los
respectivos campos
de la tabla,
codificando con
utf8_encode los
parmetros para
entender la
codificacin que hace
flash con el escape
para mandarle los
parmetros y crea la

Valor de Retorno
Retorna el id del
registro insertado en
tal caso de que se
haya hecho
exitosamente.

respectiva sentencia
SQL.
elimina
r

modific
ar

consult
a

$id

Crea la sentencia
SQL DELETE con la
condicin de que id
sea el que recibio.

Retorna 1 si fue
exitosa la operacin o
0 en caso contrario.

$id,
$nombre,
$comentar
ios

Crea la sentencia
SQL UPDATE,
buscando el registro
cuyo campo id
corresponda con $id
y actualiza los
campos nombre y
comentarios con los
respectivos
parmetros.

Retorna 1 si fue
exitosa la operacin o
0 en caso contrario.

ninguno

Crea la sentencia
SQL SELECT para
seleccionar todos los
registros de la tabla.

Retorna un RecordSet
con los registros.

query

$sql,
$accion

$sql ser la sentencia

SQL que ejecutar,
$accion es para
hacer una excepcin
de que si la sentencia
es un INSERT.

Para
consulta:
retorna un
recordSet.
Para eliminar
y modificar:
1 o 0 en
caso de que
haya sido
exitosa la
operacin.
Para
insertar: hay
una
excepcin
donde el
parmetro
$accion
valdr 1 al
invocar la
funcin
query y es
para indicar
que
retornar el
id del ltimo
registro
insertado.

Espero que hayan entendido hasta aqu, no esta dficil, cualquier cosa vuelve a
leerlo, sino continua con el cdigo de ActionScript:

import mx.remoting.NetServices;
import mx.remoting.Connection;
mx.remoting.debug.NetDebug.initialize();
NetServices.setDefaultGatewayUrl("http://localhost/remoting5/gateway.php");
conexion = NetServices.createGatewayConnection();
capturaRespuesta = new Object();
servicio = conexion.getService("misquerys",capturaRespuesta);
capturaRespuesta.onStatus = function (data){
trace("Fuck un error, por:" +data.description);
}

Las 3 primeras lneas importamos las librerias bsicas para trabajar con
remoting y lo inicializamos.
Las siguientes 2 lneas nos conectamos a nuestro gateway dicindole cual es la
URL absoluta y creamos una variable para crear la conexin a nuestro gateway.
Las otras 2 lneas creamos un objeto que nos servir para escuchar al servicio,
esto lo hacemos seleccionando el servicio con la variable conexin que creamos
previamente.
La ltima funcin querrs que nunca sea invocada, pero que ms hay que
implementarla porque ella nos avisar si hay un error al conectar el servicio u
otros errores, data.descriptionnos detallar el error en caso de haber ocurrido.

capturaRespuesta.consulta_Result = function (data){

var proveedor:Array = new Array();
btnInsertar.enabled=true;
if (data){
if (data.getLength()){
for (i=0; i<data.getLength();i++){

proveedor.addItem({id:data.getItemAt(i).id,nombre:unescape(data.getItemAt(i
).nombre),comentarios:unescape(data.getItemAt(i).comentarios)});
}
datagrid.dataProvider= proveedor;
datagrid.getColumnAt(0).width=50;
datagrid.getColumnAt(1).width=192.5;
datagrid.getColumnAt(2).width=192.5;
datagrid.selectedIndex = 0;
idtxt.text = datagrid.selectedItem.id;
nombretxt.text = datagrid.selectedItem.nombre;
comentariostxt.text =
datagrid.selectedItem.comentarios;
btnModificar.enabled=btnEliminar.enabled=true;

estadotxt.text="Consulta completada";
} else {
btnModificar.enabled=btnEliminar.enabled=false;
estadotxt.text="No hay registro que mostrar";
}
} else {
estadotxt.text="Ocurrio un error en la consulta";
}
}
Aqu empezamos a escuchar a nuestro servicio, ntese la secuencia del nombre
de la funcin, primero el nombre del objeto que creamos previamente, seguido
de un punto, luego el nombre del mtodo que invocamos de nuestro servicio,
despues un _ y por ltimo Result, as que en esta funcin escucharamos lo que
nos retorna el mtodo consulta de nuestro servicio, cierto? Pues s, y el
parmetro contendr el valor de lo que nos retorno nuestro mtodo, en este
caso un RecordSet.
Ahora explicar que hago aqu, creo un array y lo lleno con los valores del
RecordSet para poder decodificarlo con unescape, este array se lo asigno al
datagrid en tal caso de que haya por lo menos un registro, en caso contrario
deshabilitaremos los botones eliminar y modificar ya que si no hay registro no
podremos realizar estas acciones .

capturaRespuesta.insertar_Result = function (data){

mostrarComponentes(false);
if (data){
datagrid.addItem({ id: data, nombre: nombretxt.text,
comentarios: comentariostxt.text });
datagrid.getColumnAt(0).width=50;
datagrid.getColumnAt(1).width=192.5;
datagrid.getColumnAt(2).width=192.5;
datagrid.selectedIndex=datagrid.getLength()-1;
idtxt.text = datagrid.selectedItem.id;
nombretxt.text = datagrid.selectedItem.nombre;
comentariostxt.text = datagrid.selectedItem.comentarios;
estadotxt.text = "La insercin se realiz exitosamente";
} else {
estadotxt.text = "La insercin no fue completada, intente de
nuevo";
}
}
Escuchamos al mtodo insertar, si data es diferente de 0, es decir, tenemos un
id, es porque se realiz la operacin exitosamente, entonces insertamos nuestro

registro al datagrid con el nuevo id y los valores que tenemos en los TextInputs
de nombrestxt y comentariostxt porque esto son los que insertamos, por ltimo
dejamos seleccionado el registro(o item) que acabamos de insertar y asignamos
los valores del item seleccionado a los TextInputs correspondiente para que
estos no queden vacios o con valores corruptos.
Nota: digo corrupto porque cuando presionamos el boton de
insertar(btnInsertar) alteramos el textInput idtxt asignandole ## y no
podemos hacer una operacin de modificar o eliminar con ese valor.

capturaRespuesta.modificar_Result = function (data){

mostrarComponentes(false);
if (data){
datagrid.editField(datagrid.selectedIndex,"nombre",unescape(nombretxt.text))
;
datagrid.editField(datagrid.selectedIndex,"comentarios",unescape(comentario
stxt.text));
estadotxt.text = "La modificacn se realiz exitosamente";
} else {
estadotxt.text = "La modificacin no se realizo, intente de
nuevo";
}
}
Aqui data es 1 si la operacin de modificar fue exitosa, por ende alteramos el
item seleccionado del datagrid con los valores del TextInput
s nombretxt y comentariostxt, idtxt no lo utilizamos porque necesitamos saber
la posicin en el datagrid no el nmero de id, si en tal caso data es 0 entonces
emitimos un mensaje de error, por cierto, en las funciones anteriores tambien lo
hacemos.
Nota: valor de id es diferente al ndice del item seleccionado del datagrid .

capturaRespuesta.eliminar_Result = function (data){

mostrarComponentes(false);
if (data){
estadotxt.text = "El registro se elimino correctamente";
aux = datagrid.selectedIndex;
datagrid.removeItemAt(datagrid.selectedIndex);

//una excepcion si el datagrid se queda vacio

//deshabilitamos los botones modificar y eliminar
if (datagrid.getLength()==0){
btnModificar.enabled=btnEliminar.enabled=false;
} else {
(aux!=0)?datagrid.selectedIndex=aux1:datagrid.selectedIndex=0;
idtxt.text=datagrid.selectedItem.id;
nombretxt.text=datagrid.selectedItem.nombre;

comentariostxt.text=datagrid.selectedItem.comentarios;
}
} else{
estadotxt.text = "El registro no se elimino, operacin fall";
}
}
Aqui si data es 1 entonces procedemos a eliminar el item seleccionado del
datagrid, hay una excepcin aqu, puede ser que el datagrid quede vaco en tal
caso de que esto ocurra debemos deshabilitar los botones de
modificar(btnModificar) y eliminar(btnEliminar), ya que no podremos realizar
estas operaciones con el datagrid vaco, si esto no ocurre verificaremos una
cosa ms, que si el item eliminado no es el primer item entonces dejamos
seleccionados el item previo al que se elimino, si por casualidad es el primero
entonces dejamos seleccionado el item que tomo su lugar . Bueno si data es 0
es porque no se elimino el registro y emitimos nuestra advertencia.

datagrid.addEventListener("change",seleccion);
function seleccion (campoSelected){
idtxt.text= campoSelected.target.selectedItem.id;
nombretxt.text=
campoSelected.target.selectedItem.nombre;
comentariostxt.text=
campoSelected.target.selectedItem.comentarios;
}
Aqui aadimos un listener al datagrid, que nos indicar cuando el usuario este
seleccionando un item y as poder asignar los valores del item seleccionado los
TextInput correspondientes.
var alClick:Object = new Object();
var accion:Number;
alClick.click = function (boton){
switch(boton.target){

case btnConsultar:
servicio.consulta();
trace("consultar");
break;
case btnInsertar:
accion = 1;
idtxt.text="##";
preguntatxt.text="Desea insertar este registro?";
nombretxt.text="";
comentariostxt.text="";
nombretxt.editable=true;
comentariostxt.editable=true;
mostrarComponentes(true);
break;
case btnModificar:
accion = 2;
preguntatxt.text="Desea modificar este registro?";
nombretxt.editable=true;
comentariostxt.editable=true;
mostrarComponentes(true);
break;
case btnEliminar:
accion = 3;
preguntatxt.text="Desea eliminar este registro?";
nombretxt.editable=false;
comentariostxt.editable=false;
mostrarComponentes(true);
break;
case btnSi:
switch(accion){
case 1:

servicio.insertar(escape(nombretxt.text),
escape(comentariostxt.text));
trace("confirmo insertar");
break;
case 2: //modificar id, nombre, comentarios

servicio.modificar(idtxt.text,escape(nombretxt.text),escape(comentariostxt.te
xt));
trace ("confirmo modificar");
break;
case 3:

servicio.eliminar(idtxt.text);
break;
}

break;
case btnNo:
mostrarComponentes(false);
idtxt.text = datagrid.selectedItem.id;
nombretxt.text = datagrid.selectedItem.nombre;
comentariostxt.text =
datagrid.selectedItem.comentarios;
modificar.enabled=eliminar.enabled=true;
break;

}
}
btnConsultar.addEventListener("click",alClick);
btnInsertar.addEventListener("click",alClick);
btnModificar.addEventListener("click",alClick);
btnEliminar.addEventListener("click",alClick);
btnSi.addEventListener("click",alClick);
btnNo.addEventListener("click",alClick);
La variable(un objeto) alClick ser para aadirle un listener a todos los botones
y as poder saber que boton se ha pulsado, y la variable accion es para saber
que boton se pulso y que necesite una confirmacin porque se va alterar la
base de datos, por supuesto estos botones seran los de insertar(btnInsertar),
modificar(btnModificar) y eliminar (btnEliminar) .
Una descripcion ms detallada de esta funcin:
Boton(Nombre de
Instancia)
Consultar(btnCon
sultar)

Descripcin

Invoca al mtodo consulta del

servicio.

Le asigna a la variable 1 que ser

como este se identifique en la
confirmacin.
Le asigna a preguntatxt la pregunta
apropiada.
Formatea los TextInput, a idtxt le
asigna ## porque este dato no lo
podr asignar el usuario para evitar
errores al intentar de ingresar un id
ya existente, a los
Textinputs nombretxt ycomentariost
xt los borra y les dice que se pueden
editar asignndole true a la
propiedadeditable.

Insertar(btnInsert
ar)

Modificar(btnModi
ficar)

Le asigna a la variable 2 que ser

como este se identifique en la
confirmacin.
Le asigna a preguntatxt la pregunta

Eliminar(btnElimi
nar)

Le asigna a la variable 3 que ser

como este se identifique en la
confirmacin.
Le asigna a preguntatxt la pregunta
apropiada.
Los TextInputs nombretxt
y comentariostxt no se podrn editar
aqu, por lo tanto la
propiedadeditable le
asignamos false.

Verifica el valor de la variable accin

para saber que accin se va realizar,
dependiendo de este valor
invocaremos al mtodo
correspondiente, por ejemplo, si es
igual a 1 invocaremos al mtodo
insertar de nuestro servicio.

Aqui cancelamos la accin y hay

algo particular que si el boton que
pidi la confirmacin fue insertar
entonces el TextInput idtxt quedo
corrupto, por esto necesitamos
volverle asignar los valores del item
seleccionado en el datagrid y as
evitamos que se ejecute una accin
indebida, por ejemplo, una
modificacin con un id igual ##.

Si (btnSi)

No (btnNo)

apropiada.
La propiedad editable de los
TextInput nombretxty comentariostx
t le asignamos true, al igual como
hacemos en insertar, para que el
usuario lo pueda editar.

Bueno ahora hay una lnea que se vea mucho en los cdigos previos la
demostrarComponentes, pues esta es una funcin que dependiendo del valor
del parmetro pondr visible o no visible los TextInput y los botones de
confirmacion(btnSi y btnNo), de habilitar o deshabilitar el datagrid y los botones
de las consultas, en tal caso de que se est esperando la confirmacin para
evitar enredos entre cambios de opciones y valores corruptos en los Textinputs
para enviar a los servicios, la famosa funcin es esta:
function mostrarComponentes(booleano:Boolean){
datagrid.enabled=!booleano;
btnConsultar.enabled=!booleano;
btnInsertar.enabled=!booleano;
btnEliminar.enabled=!booleano;
btnModificar.enabled=!booleano;
cabeceratxt._visible=booleano;
idtxt._visible = booleano;
nombretxt._visible = booleano;

comentariostxt._visible = booleano;
preguntatxt._visible = booleano;
btnSi._visible=booleano;
btnNo._visible=booleano;
}
Ahora para terminar el ejemplo, invocamos a mostrarComponentes con false
para que no sea vean al inicio de la pequea aplicacin los TextInputs ni los
botones de confirmacin hasta que no se pulse una opcin que lo requiera,
forzaremos a que se haga una consulta para el usuario vea los datos de la base
de datos, claro si los hay, deshabilitamos los botones de las acciones (insertar,
modificar y eliminar) para que el usuario no ejecute ninguna de ellas mientras
hacemos la consulta y algo muy importante al TextInput idtxt lo deshabilitamos
para que no se pueda editar nunca para evitar errores, con estas lneas
logramos todo esto.

mostrarComponentes(false);
estadotxt.autoSize="left";
estadotxt.text="Consultando";
btnInsertar.enabled=false;
btnEliminar.enabled=false;
btnModificar.enabled=false;
idtxt.enabled=false;
servicio.consulta();

Conclusin
Hay una cosa que hay que tener muy en cuenta, el hecho de saber desarrollar
con Flash Remoting no quiere decir que nos debamos de olvidar de la clase
LoadVars de Flash, esta ltima es una muy buena opcin para aplicaciones que
no impliquen un gran cantidad de registros en la Base de Datos, aplicaciones
multiusuarios, entre otras cosas, por ejemplo, sera absurdo utilizar Flash
Remoting solo para hacer un contador de visitas o el script de cuantos usuarios
hay conectados en un site, es decir, debemos analizar muy bien el proyecto
antes de empezar a desarrollarla con una herramienta solo porque una es mejor
que otra, en tiempo de respuesta y manipulacin de datos, etc.
Espero que hayan entendido todo y sino no est dems volver a leer, intente
hacerlo con un lenguaje no tcnico para la comprensin de todos.

actionscript amfphp bases_de_datos flash mysql php remoting

Enva un comentario (0)

Te puede interesar

Sesiones en Flash Remoting, PHP y AMFPHP

Tutorial de instalacin de ClabServer; servidor multiusuario

Sistema de estadsticas con Flash Remoting

Uso de Flash Remoting, PHP y MySQL con clases

ClabServer - Referencia del programador

Como crear tu propio servicio de WHOIS con Flash y AMFPHP

Manejar AMFPHP facil con una clase en Actionscript

Login en Flash con usuario y contrasea

Como crear un chat en Flash

Enviar mail HTML con Flash-PHP, buscador de dominio y plantillas