Código Metrópoli » PHP http://www.codigometropoli.com Programación para Super Héroes Tue, 08 Jun 2010 00:30:52 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Introducción a AMFPHP http://www.codigometropoli.com/introduccion-a-amfphp/ http://www.codigometropoli.com/introduccion-a-amfphp/#comments Wed, 24 Sep 2008 00:56:21 +0000 Carla Macías http://www.codigometropoli.com/?p=411 FlashAMFPHP es una implementación en PHP, gratuita y de código abierto del AMF (Action Message Format), el cual es un formato binario basado en SOAP. AMF permite la serialización binaria de objetos y tipos nativos de ActionScript 2 y ActionScript 3 para ser enviados a servicios del lado del servidor. AMFPHP permite que aplicaciones realizadas en Flash, Flex y AIR puedan comunicarse directamente con objetos de clases de PHP.

Prácticamente, la forma en la que funciona se resume en que podemos crear clases en PHP, acceder a los métodos de esas clases por medio de Flash, Flex o AIR y obtener los datos retornados por esos métodos. Por ejemplo, podemos crear una clase para conectarnos a una base de datos en MySQL. Esta clase podría contener un método para insertar datos a la base, otro método para generar consultas y obtener en nuestra aplicación de Flash, Flex o AIR los registros regresados por la consulta.

En esta entrada veremos cómo está formado el AMFPHP y cómo acceder a él desde Flash CS3. Para una mejor explicación de cómo acceder a AMFPHP haremos una sencilla clase en PHP la cual no accederá a ninguna base de datos (eso lo dejaremos para nuestro próximo tutorial).

Tutorial

1. Baja el archivo amfphp-1.9.beta.20080120.zip de aquí. El amfphp-1.9 lo podemos usar con ActionScript 3 (Flash CS3, Flex y AIR), mientras que la versión anterior puede ser usada con ActionScript 2.

2. Descomprímelo y ponlo en algún directorio de tu servidor Web, en tu directorio htdocs o www en tu localhost. Si lo deseas, puedes renombrar la carpeta y ponerle AMFPHP1.9.

La estructura del directorio quedaría de la siguiente manera (en mi caso, la carpeta AMFPHP1.9 la puse en la carpeta raíz de mi servidor):

--> root ó carpeta raíz
-->AMFPHP1.9 (D)
--> browser (D)
--> core (D)
--> services (D)
--> gateway.php
--> globals.php
--> json.php
--> phpinfo
--> xmlrpc

Donde (D) indica que se trata de un directorio. Observa la carpeta browser, si accediéramos a él desde el navegador observaremos una aplicación creada en Flex donde nos muestra la lista de servicios que tenemos en AMFPHP, como se muestra en la siguiente liga. Si es la primera vez que accedes al browser, aparecerá la siguiente ventana de configuración:

Imagen 1: Ventana de Configuración de AMFPHP

En esta ventana de configuración deberás asegurarte que la dirección del Gateway es correcta. Después de hacer click en el botón Save te aparecerá la lista de servicios. Por default y cuando todavía no hemos creado ningún servicio nuevo, solamente aparecerá el servicio DiscoveryService. Importante: Cuando tenemos servicios que deben acceder a una base de datos o tratan información importante o crítica, lo mejor será no poner el directorio browser en el servidor. Continuando con nuestra estructura de directorios, como podrás imaginar, todos nuestros servicios (clases en PHP) deberán ir en el directorio services.

3. Vamos a crear una sencilla clase de PHP, la cual simulará las operaciones básicas de una calculadora. Sus métodos serán sumar, restar, multiplicar y dividir. Cada método recibirá como parámetro los dos números sobre los cuales hay que hacer la operación. Nota: Este tutorial es solamente para explicar cómo funciona AMFPHP y cómo podemos acceder a él desde Flash. Es por eso que nuestra clase de ejemplo es muy sencilla y muchos de ustedes dirán que no se requiere de PHP para sumar, restar, multiplicar y dividir dos números =0).
En PHP, al igual que en Flash, el nombre del archivo de una clase deberá tener el mismo nombre de la clase; por lo tanto, crea un nuevo archivo PHP, nómbralo Calculadora.php y guárdalo dentro del directorio services de nuestra carpeta AMFPHP19. Coloca el siguiente código dentro de Calculadora.php:

Texto Plano
PHP:
  1. <?php
  2.  
  3. class Calculadora
  4. {
  5.     /**
  6.      * Suma dos números pasados por parámetro
  7.      * @returns Regresa un valor numérico
  8.      */ 
  9.     function sumar($numeroA, $numeroB)
  10.     {
  11.         return ($numeroA + $numeroB);   
  12.     }   
  13.    
  14.     /**
  15.      * Resta dos números pasados por parámetro
  16.      * @returns Regresa un valor numérico
  17.      */
  18.     function restar($numeroA, $numeroB)
  19.     {
  20.         return ($numeroA - $numeroB);
  21.     }
  22.    
  23.     /**
  24.      * Multiplica dos números pasados por parámetro
  25.      * @returns Regresa un valor numérico
  26.      */
  27.     function multiplicar($numeroA, $numeroB)
  28.     {
  29.         return ($numeroA * $numeroB);
  30.     }
  31.    
  32.     /**
  33.      * Divide dos números pasados por parámetro
  34.      * @returns Regresa un valor numérico
  35.      */
  36.     function dividir($numeroA, $numeroB)
  37.     {
  38.         return ($numeroA / $numeroB);
  39.     }
  40. }
  41.  
  42. ?>

Observa los comentarios antes de cada función; estos comentarios nos dan una descripción de qué es lo que hace cada método y además le estamos indicando qué es lo que nos regresa cada método (@returns). Si bien estos comentarios no son obligatorios, nos ayudarán a recordar en el momento en que queramos modificar el archivo. Además, dentro de la lista de servicios en el browser, cuando seleccionamos alguno de estos métodos se nos mostrará esta descripción (Como prueba, ingresa al navegador, de la lista de la izquierda selecciona la clase Calculadora y posteriormente selecciona de la ventana de la derecha el método dividir. Observarás que antes de los campos de texto para ingresar los números aparece la descripción del método). Ahora ingresa un número dentro del campo de texto $numeroA e ingresa otro número dentro del campo $numeroB, haz click en el botón Call y observa cómo en el área de resultados (Results) se muestra el resultado regresado por el método dividir de nuestra clase Calculadora en PHP.

4. Dentro de nuestra clase podemos utilizar métodos privados, los cuales no podrán ser utilizados desde el navegador de servicios (browser) ni desde nuestras aplicaciones en Flash, Flex o AIR. Esto es útil cuando dichos métodos realizan operaciones importantes o críticas y que requieran de mayor seguridad. Para establecer que un método es privado, bastará con agregarle un guión bajo (_) antes del nombre. Para hacer la prueba, agrega el siguiente código a la clase Calculadora.php (Insértalo antes de la última llave (}) y del tag de cierre de PHP (?>):

Texto Plano
PHP:
  1. /**
  2.      * Este método es privado y no aparecerá en el browser de servicios
  3.      * @returns Regresa la fecha y tiempo del servidor
  4.      */
  5.     function _esteMetodoEsPrivado() {
  6.         $fecha_hoy = date("d/m/Y") . ' ' . date("H:i:s");
  7.         return $fecha_hoy;
  8.     }

Observa cómo en el código anterior el nombre de la función empieza con guión bajo _, eso quiere decir que se trata de un método privado. El código de este método privado lo que hace es regresarnos la fecha y el tiempo del servidor (por medio del método date).

Desde nuestra clase de PHP podemos acceder a ese método privado por medio de otro método. Para acceder a este método es necesario utilizar la palabra clave $this. A continuación te muestro cómo:

Texto Plano
PHP:
  1. /**
  2.      * Este método es público y está accediendo a nuestro método privado
  3.      * @returns Regresa la fecha y tiempo del servidor
  4.      */
  5.     function obtenFechaServidor() {
  6.         $fecha_hoy = $this->_esteMetodoEsPrivado();
  7.         return $fecha_hoy;
  8.     }

El método obtenFechaServidor hace un llamado a la función esteMetodoEsPrivado y almacena en la variable $fecha_hoy el valor regresado por el método privado. Este valor es regresado por el método obtenFechaServidor.

Ingresa a nuestro navegador de servicios, selecciona la clase Calculadora y observa cómo el método esteMetodoEsPrivado no aparece dentro de los métodos de esta clase. Ahora haz click en el botón obtenFechaServidor y posteriormente en el botón Call. En el área de resultados (Results) se mostrará la fecha y hora del servidor.

Antes de pasar a la interfaz y al código ActionScript, te dejo el código completo del archivo Calculadora.php

Texto Plano
PHP:
  1. <?php
  2.  
  3. class Calculadora
  4. {
  5.     /**
  6.      * Suma dos números pasados por parámetro
  7.      * @returns Regresa un valor numérico
  8.      */ 
  9.     function sumar($numeroA, $numeroB)
  10.     {
  11.         return ($numeroA + $numeroB);   
  12.     }   
  13.    
  14.     /**
  15.      * Resta dos números pasados por parámetro
  16.      * @returns Regresa un valor numérico
  17.      */
  18.     function restar($numeroA, $numeroB)
  19.     {
  20.         return ($numeroA - $numeroB);
  21.     }
  22.    
  23.     /**
  24.      * Multiplica dos números pasados por parámetro
  25.      * @returns Regresa un valor numérico
  26.      */
  27.     function multiplicar($numeroA, $numeroB)
  28.     {
  29.         return ($numeroA * $numeroB);
  30.     }
  31.    
  32.     /**
  33.      * Divide dos números pasados por parámetro
  34.      * @returns Regresa un valor numérico
  35.      */
  36.     function dividir($numeroA, $numeroB)
  37.     {
  38.         return ($numeroA / $numeroB);
  39.     }
  40.    
  41.     /**
  42.      * Este método es privado y no aparecerá en el browser de servicios
  43.      * @returns Regresa la fecha y tiempo del servidor
  44.      */
  45.     function _esteMetodoEsPrivado() {
  46.         $fecha_hoy = date("d/m/Y") . ' ' . date("H:i:s");
  47.         return $fecha_hoy;
  48.     }
  49.    
  50.     /**
  51.      * Este método es público y está accediendo a nuestro método privado
  52.      * @returns Regresa la fecha y tiempo del servidor
  53.      */
  54.     function obtenFechaServidor() {
  55.         $fecha_hoy = $this->_esteMetodoEsPrivado();
  56.         return $fecha_hoy;
  57.     }
  58. }
  59.  
  60. ?>

5. Crea un nuevo documento de Flash en Flash CS3 ActionScript 3.0. Cambia las dimensiones del área de trabajo por 300px de ancho y 190px de alto. Renombra la única capa que existe y ponle de nombre Forma. Agrega 3 textos, 3 TextInput(s) y 4 botones de tal forma que tu forma quede similar a la de la imagen:

Imagen 2: Forma de nuestra aplicación

El nombre de instancia de cada uno de los TextInput(s) es (de arriba a abajo):

  • numeroA_txt
  • numeroB_txt
  • resultado_txt

El nombre de instancia de cada uno de los botones es (de arriba a abajo):

  • mas_btn
  • menos_btn
  • por_btn
  • entre_btn

6. Agrega otra capa y ponle de nombre Acciones. Agrega el siguiente código a dicha capa:

Texto Plano
Actionscript:
  1. /* Las siguientes librerías son necesarias para hacer las llamadas y conexión a AMFPHP */
  2. import flash.net.NetConnection;
  3. import flash.net.Responder;
  4.  
  5. /* Dentro de la variable gateway especificamos la URL completa de donde se encuentra nuestro archivo gateway.php. Si estás trabajando en local, es posible que tu URL sea similar a  http://localhost/AMFPHP1.9/gateway.php */
  6. var gateway:String = "http://localhost/AMFPHP1.9/gateway.php";
  7. /* Creamos una variable de tipo NetConnection para poder establecer la conexión. Este objeto funcionará como enlace entre el cliente y el servidor */
  8. var conexion:NetConnection = new NetConnection;
  9. /* Establecemos una conexión bidireccional entre el Flash Player y el servidor */
  10. conexion.connect(gateway);
  11. /* Este objeto de clase Responder se encargará de administrar los valores que son regresados por el servidor, ya sea si la operación fue todo un éxito o si hubo un error */
  12. var responder:Responder;
  13. /* Deshabilitamos el campo de texto donde se mostrará el resultado para que sea sólo de lectura */
  14. resultado_txt.enabled = false;

Revisa con atención el código anterior y los comentarios que están insertados en él. Hasta ahora solamente hemos importado las librerías que necesitamos, hemos declarado e instanciado las variables que usaremos a lo largo del programa.

Coloca el siguiente código debajo del anterior. Aquí estamos declarando cuatro métodos que serán llamados dependiendo de si el usuario hizo click en el botón de mas, menos, por o entre. Observa bien que el código de cada uno de estos métodos sólo cambia en la llamada de los métodos de la clase (la última línea de cada método, antes de }), es por eso que sólo comentaré la primera función (suma).

Texto Plano
Actionscript:
  1. function suma(evento:MouseEvent) :void {
  2.     /* Obtenemos el valor ingresado en cada uno de los campos de texto  */
  3.     var numeroA:Number = Number(numeroA_txt.text);
  4.     var numeroB:Number = Number(numeroB_txt.text);
  5.    
  6.     /* Le especificamos a la variable responder qué métodos debe llamar en caso de éxito (método respuesta) o en caso de error (método error)  */
  7.     responder = new Responder(respuesta, error);           
  8.    
  9.     /* Invocamos, por medio del método call, al método sumar que se encuentra en la clase Calculadora (Calculadora.sumar). El segundo parámetro del método call es nuestro objeto de la clase Responder (el que se encargará de gestionar los valores obtenidos de dicha llamada. Por último, le pasamos como cuarto y quinto parámetro los dos números que deberá recibir la función sumar. */
  10.     conexion.call("Calculadora.sumar", responder, numeroA, numeroB);
  11. }
  12.  
  13. function resta(evento:MouseEvent) :void {
  14.     var numeroA:Number = Number(numeroA_txt.text);
  15.     var numeroB:Number = Number(numeroB_txt.text);
  16.    
  17.     operacion_mc.gotoAndStop("menos");
  18.     responder = new Responder(respuesta, error);           
  19.    
  20.     conexion.call("Calculadora.restar", responder, numeroA, numeroB);
  21. }
  22.  
  23. function multiplicacion(evento:MouseEvent) :void {
  24.     var numeroA:Number = Number(numeroA_txt.text);
  25.     var numeroB:Number = Number(numeroB_txt.text);
  26.    
  27.     operacion_mc.gotoAndStop("por");
  28.     responder = new Responder(respuesta, error);           
  29.    
  30.     conexion.call("Calculadora.multiplicar", responder, numeroA, numeroB);
  31. }
  32.  
  33. function division(evento:MouseEvent) :void {
  34.     var numeroA:Number = Number(numeroA_txt.text);
  35.     var numeroB:Number = Number(numeroB_txt.text);
  36.    
  37.     operacion_mc.gotoAndStop("entre");
  38.     responder = new Responder(respuesta, error);           
  39.    
  40.     conexion.call("Calculadora.dividir", responder, numeroA, numeroB);
  41. }

Después del código anterior solamente nos faltan los métodos respuesta y error, además de las acciones de cada uno de nuestros botones:

Texto Plano
Actionscript:
  1. /* En caso de éxito tras ejecutar el método call, esta función es llamada pasándole como parámetro un objeto con el resultado regresado. Este resultado lo mostraremos dentro del TextInput resultado_txt. */
  2. function respuesta(resultado:Object):void {
  3.     resultado_txt.text = String(resultado);
  4. }
  5.  
  6. /* En caso de error tras ejecutar el método call, esta función es llamada pasándole como parámetro un objeto con el error generado. Este error lo desplegaremos dentro de un trace. */
  7. function error(error:Object):void {
  8.     trace("Error: " + error.description);
  9. }
  10.  
  11. /* Establecemos las acciones de nuestros botones */
  12. mas_btn.addEventListener(MouseEvent.CLICK, suma);
  13. menos_btn.addEventListener(MouseEvent.CLICK, resta);
  14. por_btn.addEventListener(MouseEvent.CLICK, multiplicacion);
  15. entre_btn.addEventListener(MouseEvent.CLICK, division);

A continuación puedes ver el SWF funcionando. A este archivo le añadí un campo de texto dinámico en el lado inferior derecho en el cual muestro el resultado de hacer una llamada al método obtenFechaServidor de nuestra clase Calculadora. No olvides bajar los archivos de este tutorial que se encuentran al final de esta entrada.


Descargar Archivo
]]> http://www.codigometropoli.com/introduccion-a-amfphp/feed/ 30 Enviar Formulario de Contacto http://www.codigometropoli.com/enviar-formulario-de-contacto/ http://www.codigometropoli.com/enviar-formulario-de-contacto/#comments Wed, 23 Jul 2008 05:39:16 +0000 Carla Macías http://www.codigometropoli.com/?p=21 Flash y PHPPara poder enviar un formulario de contacto en Flash es necesario utilizar un lenguaje del lado del servidor que permita enviar el correo con los datos que el usuario introdujo en Flash. Algunos ejemplos de estos lenguajes del lado de servidor son PHP, JSP y ASP.
En este ejemplo veremos cómo enviar por mail un formulario de contacto usando PHP.

Para fines de este tutorial, se pondrán en el formulario algunos de los componentes que ya vimos en los post pasados. Estos componentes son ComboBox, RadioButton y CheckBox.

Para este tutorial usaremos Flash 8. El ejemplo y los archivos de este tutorial los encuentras al final de esta entrada.

Nota Por razones de seguridad, el ejemplo que se encuentra al final de este post no enviará  ningún correo electrónico (para evitar que se llene el buzón o llegue puro correo basura). En lugar de mandar el correo electrónico mostraré el resultado final de cómo se vería el correo electrónico (tanto en formato HTML como en formato de texto plano). Sin embargo, los archivos de esta entrada y el código aquí pegado, sí tienen la instrucción para enviar el correo electrónico.

Tutorial

I. Haciendo el formulario en Flash

1. Crea un nuevo documento de Flash de 420px por 380px.

2. Arrastra al escenario los siguientes componentes (recuerda que estos componentes están dentro de la sección User Interface del panel Components (Ctrl. + F7) :

  • 2 Campos de texto (TextInput)
  • 2 Botones de Radio (RadioButton)
  • 1 ComboBox
  • 5 CheckBoxes
  • 1 TextArea
  • 1 Botón (Button)

Además, crea 5 textos dinámicos con el (*) como texto (estos los usaremos para mostrar los campos obligatorios que el usuario debe llenar. Para este ejemplo, haremos que todos los datos sean obligatorios). A estos textos, ponles como nombre de instancia msj1, msj2, msj3, etc.

3. Selecciona cada componente que arrastraste al escenario y ponle los siguientes nombres de instancia (dentro del Panel Propiedades):

  • 1er Campo de texto (TextInput)  -> nombre_txt
  • 2do Campo de texto (TextInput)  -> correo_txt
  • 1er Botón de Radio (RadioButton) -> radio1
  • 2do Botón de Radio (RadioButton) -> radio2
  • ComboBox -> pais_cb
  • 1er CheckBox -> check1, 2do CheckBox -> check2, 3er CheckBox -> check3, 4to CheckBox -> check4, 5to CheckBox -> check5
  • TextArea -> comentarios_txt
  • Botón -> enviar_btn

4. Además, cambia los siguientes parámetros (tercera pestaña del panel Propiedades) a estos componentes:

  • radio1: data = F, groupName = sexoGroup, label = Femenino
  • radio2: data = M, groupName = sexoGroup, label = Masculino
  • check1: label = Flash
  • check2: label = Flex
  • check3: label = AIR
  • check4: label = PHP
  • check5: label = Ajax

5. Acomoda todos los componentes anteriores para que te queden similar a la siguiente imagen:

6. Es momento de escribir el código. A la capa (layer) existente asígnale el nombre de Forma. Crea una nueva capa llamada Acciones. En el panel Actions de esta capa escribe lo siguiente:

Texto Plano
Actionscript:
  1. // Importamos la librería del componente Alert
  2. import mx.controls.Alert;
  3. // Sólo por estética, cambiamos el color del tema (cambiamos el verde que aparece por default)
  4. _global.style.setStyle("themeColor", 0xCCFFFF);
  5. /* Esta línea es importante para que todo lo que el usuario escriba o seleccione tenga acentos, se muestren de forma correcta y no con caracteres raros (Ej. Ã) */
  6. System.useCodepage = true;
  7. /* Creamos un arreglo para guardar los temas seleccionados por el usuario (es decir, las opciones de los checkboxes que el usuario seleccionó) */
  8. var temas:Array = new Array();
  9. /* En el arrelgo paises gaurdaremos los datos que aparecerán en el combobox de países */
  10. var paises:Array = new Array();
  11. /* Creamos dos objetos de la clase LoadVars, uno para enviar los datos introducidos por el usuario y el otro para recibir la respuesta enviada por el archivo de PHP */
  12. var enviar_lv:LoadVars = new LoadVars();
  13. var resultado_lv:LoadVars = new LoadVars();
  14. /* Hacemos la llamada a la función initForm, la cual a su vez llamará a otras funciones para, por ejemplo, llenar el combobox de los paises, cambiarle el estilo a los botones de radio, etc. El código de esta función está en el siguiente bloque de código ActionScript. */
  15. initForm();

El código anterior muestra la declaración variables e importación de clases necesarias (en este caso sólo una clase). Ahora nos enfocaremos en las funciones que escribiremos en nuestro código.

Texto Plano
Actionscript:
  1. /* Esta función llama a los métodos encargados de cambiar los estilos de los botones de radio, checkboxes, etc. */
  2. function initForm() {
  3.     escondeMensajes();
  4.     setEstilosRadioButtons();
  5.     setEstilosCheckBoxes();
  6.     llenaComboPaises();
  7. }
  8. /* Escondemos (no mostramos) los mensajes que le indicarán al usuario qué campos le faltó introducir. Es decir, los campos obligarios marcados por (*). */
  9. function escondeMensajes() {
  10.     for(var i = 1; i <7; i++) {
  11.         this["msj" + i]._visible = false;
  12.     }
  13. }
  14. /* Le cambiamos el formato a los botones de radio. Si no entiendes esta parte, por favor revisa el post sobre el componente RadioButton */
  15. function setEstilosRadioButtons() {
  16.     for(var i = 1; i <3; i++) {
  17.         this["radio" + i].setStyle("color", 0x990000);
  18.         this["radio" + i].setStyle("fontWeight", "bold");
  19.         this["radio" + i].setStyle("marginLeft", 2);
  20.     }
  21. }
  22. /* Le cambiamos el formato a los checkboxes. Si no entiendes esta parte, por favor revisa el post sobre el componente CheckBox */
  23. function setEstilosCheckBoxes() {
  24.     for(var i = 1; i <6; i++) {
  25.         this["check" + i].setStyle("color", 0x990000);
  26.         this["check" + i].setStyle("fontWeight", "bold");
  27.         this["check" + i].setStyle("marginLeft", 2);
  28.     }
  29. }
  30. /* Esta función llena el arreglo países con las opciones que nos interesa mostrar en el combobox de países. Después de llenar el arreglo se lo asignamos como dataProvider al combobox pais_cb y le decimos que ordene las opciones de acuerdo a su etiqueta (label). Si no entiendes esta parte, por favor revisa el post sobre el componente ComboBox */
  31. function llenaComboPaises() {
  32.     paises.push({label:"-- Selecciona --",  data:0});
  33.     paises.push({label:"México",       data:"MEX"});
  34.     paises.push({label:"España",       data:"ESP"});
  35.     paises.push({label:"Colombia",    data:"COL"});
  36.     paises.push({label:"Argentina",         data:"ARG"});
  37.     paises.push({label:"Chile",       data:"CHI"});
  38.     paises.push({label:"Perú",   data:"PER"});
  39.     paises.push({label:"Venezuela",         data:"VEN"});
  40.  
  41.     paises.push({label:"Ecuador",     data:"ECU"});
  42.     paises.push({label:"Costa Rica",       data:"COS"});
  43.     paises.push({label:"Uruguay",     data:"URU"});
  44.     paises.push({label:"Bolivia",       data:"BOL"});
  45.     paises.push({label:"Estados Unidos",    data:"EUA"});
  46.     paises.push({label:"Guatemala",         data:"GUA"});
  47.     paises.push({label:"Brasil",          data:"BRA"});
  48.     paises.push({label:"Cuba",    data:"CUB"});
  49.     paises.push({label:"Panamá",       data:"PAN"});
  50.     paises.push({label:"El Salvador",     data:"SAL"});
  51.     paises.push({label:"Nicaragua",         data:"NIC"});
  52.     paises.push({label:"Otro",      data:"Otr"});
  53.     pais_cb.dataProvider = paises;
  54.     pais_cb.sortItemsBy("label");
  55. }

Las siguientes funciones son vitales para el tratamiento del formulario:

Texto Plano
Actionscript:
  1. /* Asignamos las acciones al botón de Enviar. En este caso, el botón de Enviar hará el llamado a la función validaForma para verificar que el usuario haya llenado los campos obligatorios. Como lo dije anteriormente, para este ejemplo haremos que el usuario tenga que llenar todos los campos. */
  2. enviar_btn.onRelease = function() {
  3.     validaForma();
  4. }
  5. /* Esta función se encarga de validar que todos los campos obligatorios fueron llenados. Primero hacemos llamamos a la función escondeMensajes para no mostrar los campos dinámicos (msj1, msj2, etc.) en caso de que sea la segunda vez que se llama a la función validaForma. */
  6. function validaForma() {
  7.     escondeMensajes();
  8.     if(nombre_txt.text == "") { // Vemos si el campo de texto del nombre está vacío
  9.         msj1._visible = true; // Como el campo del nombre no fue llenado, mostramos el primer mensaje
  10.         nombre_txt.setFocus(); // Colocamos el foco o cursor en el campo del nombre
  11.     } else if(correo_txt.text == "" || !esCorreo(correo_txt.text)) { /* Vemos si el campo del correo está vacío y sí el formato del correo es correcto */
  12.         msj2._visible = true; /* Mostramos el segundo mensaje ya que el campo del correo está vacío o bien el formato es incorrecto */
  13.         correo_txt.setFocus(); // Ponemos el cursos en el campo del correo
  14.     } else if(sexoGroup.selection.data == undefined) { /* Si se cumple esta sentencia quiere decir que el usuario no seleccionó ninguna opción de los botones de radio */
  15.         msj3._visible = true; // Mostramos el tercer mensaje
  16.         radio1.setFocus(); // Ponemos el cursor en el primer botón de radio
  17.     } else if(pais_cb.selectedIndex == 0) { /* Si se cumple este condicional quiere decir que el usuario no seleccionó ninguna opción del combobox de los países. Si el índice seleccionado (selectedIndex) es igual a 0, entonces la opción seleccionada es la que dice "-- Seleccionar --", por lo tanto no nos interesa que el usuario use esa opción */
  18.         msj4._visible = true;
  19.         pais_cb.setFocus();
  20.     } else {
  21.         temas = buscaChecksSeleccionados(); /* Guardamos en el arreglo temas los valores de los checkboxes que el usuario seleccionó. La función buscaChecksSeleccionados nos regresa un arreglo con los valores de los checkboxes seleccionados */
  22.         if(temas.length == 0) { /* Si la longitud del arreglo temas es igual a 0, entonces el usuario no seleccionó ninguna opción; por lo tanto, mostramos el quinto mensaje y ponemos el cursor en el primer checkbox */
  23.             msj5._visible = true;
  24.             check1.setFocus();
  25.         } else if(comentarios_txt.text == "") { /* Si la caja de texto de los comentarios está vacía, mostramos el sexto mensaje y posicionamos el cursor en la caja de texto (TextArea) */
  26.             msj6._visible = true;
  27.             comentarios_txt.setFocus();
  28.         } else { /* Si ninguno de los condicionales anteriores se cumplió, quiere decir que el usuario llenó todos los campos necesarios. Mandamos a llamar la función enviarCorreo */
  29.             enviarCorreo();
  30.         }
  31.     }
  32. }
  33. /* Esta función regresa un arreglo con los valores de los CheckBox(es) seleccionados. Recorremos todos los componentes checkbox por medio de un ciclo for y vemos el valor de la propiedad "selected" de cada uno de ellos. Si no entiendes esta parte, por favor revisa el post sobre el componente CheckBox  */
  34. function buscaChecksSeleccionados():Array {
  35.     var temp = new Array();
  36.     for(var i = 1; i <6; i++) {
  37.         if(this["check" + i].selected) {
  38.             temp.push(this["check" + i].label);
  39.         }
  40.     }
  41.     return temp;
  42. }
  43. /* Esta función nos permite revisar si el formato del correo electrónico es correcto. Es decir, que contenga @, el punto xxx, etc. */
  44. function esCorreo(email:String):Boolean
  45. {
  46.     var res:Boolean = false;
  47.     if(email.indexOf("@")>0 && email.indexOf("@") == email.lastIndexOf("@"))
  48.     {
  49.         if(email.lastIndexOf(".")> email.indexOf("@") && email.lastIndexOf(".")<email.length-1)
  50.         {
  51.             res = true;
  52.         }
  53.     }
  54.     return res;
  55. }

El siguiente código muestra el script de la función enviarCorreo.

Texto Plano
Actionscript:
  1. /* Explicación: Primero desactivamos el botón de enviar para que el usuario no haga click más de una vez. Al objeto enviar_lv de la clase LoadVars le copiamos el valor de cada uno de los campos del formulario y los enviamos al archivo de PHP (enviar_formulario_de_contacto.php). A la función sendAndLoad del objeto enviar_lv, le pasamos como parámetro el path del archivo que recibirá los datos, el objeto de la clase LoadVars que recibirá la respuesta y el método en cómo se enviarán los datos (POST o GET). Este último parámetro es opcional y por default el valor es de POST.  NOTA: Si quieres cargar el resultado del archivo pasado como primer parámetro, deberás usar la función send. En los archivos de este tutorial que encuentras más abajo en un archivo zip, usamos la función sendAndLoad ya que nos interesa mostrar un mensaje de alerta (con el resultado) dentro del mismo Flash y no dentro del PHP. Sin embargo, el ejemplo que se encuentra más abajo utiliza la función send para mostrar dentro del mismo PHP el mensaje del correo electrónico en formato HTML y Texto Plano. */
  2. function enviarCorreo() {
  3.     enviar_btn.enabled = false;
  4.     enviar_lv.nombre = nombre_txt.text;
  5.     enviar_lv.correo = correo_txt.text;
  6.     enviar_lv.sexo = sexoGroup.selection.data;
  7.     enviar_lv.pais = pais_cb.selectedItem.label;
  8.     enviar_lv.temas = temas;
  9.     enviar_lv.comentarios = comentarios_txt.text;
  10.     enviar_lv.sendAndLoad("enviar_formulario_de_contacto.php", resultado_lv, "POST");
  11. }
  12. /* El evento onLoad del objeto resultado_lv es invocado cuando la llamada a los métodos load() o sendAndLoad() ha sido terminada. Asignamos el resultado regresado por el PHP a la variable respuesta. Si la llamada fue exitosa, vemos si la respuesta es igual a 'S', si es así mostramos un mensaje señalando que el mensaje ha sido enviado y llamamos a la función reestablecerForma para borrar los datos ingresados por el usuario. Si la respuesta es distinto a 'S' o bien si la llamada no fue exitosa, mostramos un mensaje señalando que hubo un error en el envío. Por último, volvemos a activar el botón de enviar. */
  13. resultado_lv.onLoad = function(success:Boolean)
  14. {
  15.     var respuesta = this.resultado;
  16.     if(success)
  17.     {
  18.         if(respuesta == "S")
  19.         {
  20.             Alert.show("Su mensaje ha sido enviado.", "Gracias", Alert.OK, null, "alerta", Alert.OK);
  21.             reestablecerForma();
  22.         }
  23.         else
  24.         {
  25.             Alert.show("Hubo un error en el envío del mensaje, por favor intente más tarde.", "Error", Alert.OK, null, "alerta", Alert.OK);
  26.         }
  27.     }
  28.     else
  29.         Alert.show("Hubo un error en el envío del mensaje, por favor intente más tarde.", "Error", Alert.OK, null, "alerta", Alert.OK);
  30.         enviar_btn.enabled = true;
  31. };
  32. /* Esta función borra los datos introducidos por el usuario. */
  33. function reestablecerForma() {
  34.     nombre_txt.text = "";
  35.     correo_txt.text = "";
  36.     desactivarSexo();
  37.     desactivarTemas();
  38.     pais_cb.selectedIndex = 0;
  39.     comentarios_txt.text = "";
  40. }
  41. /* Su función es poner todos los botones de radio como no seleccionados */
  42. function desactivarSexo() {
  43.     for(var i = 1; i <3; i++) {
  44.         this["radio" + i].selected = false;
  45.     }
  46. }
  47. /* Su función es poner todos los CheckBox(es) como no seleccionados */
  48. function desactivarTemas() {
  49.     for(var i = 1; i <6; i++) {
  50.         this["check" + i].selected = false;
  51.     }
  52. }

Ese es todo el código que deberá llevar el documento de Flash.

II. Programando el script en PHP para el envío del correo

A continuación pegaré todo el código del archivo enviar_formulario_de_contacto.php. Dentro del código están los comentarios para que puedas entender qué hace cada línea de código.

Texto Plano
PHP:
  1. <html>
  2. <head>
  3. </head>
  4. <body>
  5. <?php
  6. /**
  7. * @author Carla Macías
  8. * @copyright 2008
  9. * @url http://codigometropoli.com/
  10. */
  11. /* 1. Recibimos las variables que mandamos por Flash.
  12.      Para recibirlas usaremos la matriz asociativa $_POST, la cual contiene los valores del formulario enviados por medio de LoadVars.
  13.       Importante: Los nombres de variables que recibe $_POST deberán ser
  14.       iguales a las variables enviadas por Flash. Con lo anterior, me refiero a la variable que está dentro de los [] de $_POST. */
  15. $nombre = stripslashes($_POST["nombre"]); /* Campo de texto corto (TextField) */
  16. $correo = $_POST["correo"]; /* Campo de texto corto (TextField) */
  17. $sexo   = $_POST["sexo"]; /* Botón de Radio. Esta variable trae la etiqueta del botón de radio seleccionado por el usuario. Debido a que el usuario solamete puede escoger una opción, basta con recibir el valor por medio de $_POST */
  18. $pais   = $_POST["pais"]; /* ComboBox. Igual que en el anterior, estamos recibiendo el valor de la etiqueta de la opción seleccionada por el usuario; basta con recibirla por medio de $_POST */
  19. $temas  = explode(',',$_POST["temas"]); /* CheckBox. Debido a que el usuario pudo haber seleccionado más de una opción, esta variable hay que tratarla de forma distinta. Esta variable trae todos los valores del arreglo (que usamos para guardar los valores de los checkbox seleccionados) separados por comas. Por ejemplo: opcion 1,opcion 2,opcion 3.
  20. En este ejemplo, vamos a mostrar los temas en forma de lista, por lo que haremos uso del método explode en PHP. Para más información sobre el método explode visita http://www.php.net/manual/es/function.explode.php para más información  */
  21. $comentarios = $_POST["comentarios"]; /* TextArea. Es posible que la información en este campo introducida por el usuario sea larga y que lleve saltos de línea. Para mostrarlo de igual forma en el correo usaremos la función nl2br (ver más adelante). */
  22. $formatos = array("text/html", "text/plain"); /* No modificar, solamente estoy declarando un arreglo */
  23. /* 2. Declaramos las variables sobre el correo electrónico. */
  24. $remitente = "no-reply@codigometropoli.com"; /* Cuenta de correo de donde se "manda"" el mail. En este caso no importa que la cuenta de correo exista, ni que sea similar a no-reply@, web@, contacto@, etc ya que este formulario de contacto le estaría llegando al webmaster o los de ventas, relaciones públicas, etc. */
  25. $para = "msj1@codigometropoli.com,msj2@codigometropoli.com"; /* Cuenta de correo a donde se enviarán los mails. Separar por comas en caso de que sean más de uno. */
  26. $asunto = "Mensaje desde Código Metrópoli"; /* Asunto que aparecerá en el correo electrónico */
  27. $formato_correo = 0; /* IMPORTANTE: Aquí pon el valor de 0 si quieres que el formato del correo sea HTML y 1 si quieres que sea texto plano. 0 --> HTML,    1 -> Texto Plano */
  28. <p>/* 3. Establecemos las cabeceras (headers) del mail. "Bcc: " . $cc . */
  29. $header  = "MIME-Version: 1.0\r\n";
  30. $header .= "Content-type: " . $formatos[$formato_correo] . "; charset=iso-8859-1\r\n";
  31. $header .= "From: " . $remitente . "\n";
  32. /* Nota: Si deseas agregar correos de copia o copia oculta, descomenta las siguientes líneas (es decir, borra las // de las siguientes dos líneas) */
  33. //$header .= "Cc: copia1@codigometropoli.com,copia2@codigometropoli.com \n";
  34. //$header .= "Bcc: copiaoculta1@codigometropoli.com,copiaoculta2@codigometropoli.com \n";
  35. if($nombre != "" && $correo != "") { // Siempre es bueno asegurarse que recibimos los datos más importantes para no mandar correos vacíos
  36.     if($formato_correo == 0) { /* HTML */
  37.         $mensaje = '
  38. <style type="text/css">
  39.         <!--
  40.         .Estilo1 {
  41.             font-family: Arial;
  42.             font-size: 14px;
  43.         }
  44.         .Tabla_Contacto td {
  45.             padding:5px 5px 10px 5px;   
  46.         }
  47.         .Estilo2 {
  48.             color: #990000;
  49.             font-weight: bold;
  50.         }
  51.         hr {
  52.             color:#003366;
  53.             background-color:#003366;
  54.             height:5px;
  55.             width:450px;
  56.             margin-left:0px;
  57.         }
  58.         -->
  59.         </style>
  60. <p>  <span class="Estilo1"><span class="Estilo2">' . $asunto . '</span></span></p>
  61. <hr />
  62. <table width="438" border="0" cellspacing="0" cellpadding="0" class="Tabla_Contacto">
  63. <tr>
  64. <td width="111" class="Estilo1"><strong>Nombre:</strong></td>
  65. <td width="327" class="Estilo1">' . $nombre . '</td>
  66. </tr>
  67. <tr>
  68. <td class="Estilo1"><strong>Email:</strong></td>
  69. <td class="Estilo1">' . $correo . '</td>
  70. </tr>
  71. <tr>
  72. <td class="Estilo1"><strong>Sexo:</strong></td>
  73. <td class="Estilo1">' . $sexo . '</td>
  74. </tr>
  75. <tr>
  76. <td class="Estilo1"><strong>Pa&iacute;s:</strong></td>
  77. <td class="Estilo1">' . $pais . '</td>
  78. </tr>
  79. <tr>
  80. <td class="Estilo1"><strong>Temas:</strong></td>
  81. <td class="Estilo1">&nbsp;</td>
  82. </tr>
  83. <tr>
  84. <td class="Estilo1">&nbsp;</td>
  85. <td class="Estilo1">';
  86.                 for($i = 0; $i <count($temas); $i++) {
  87.                     $mensaje .= $temas[$i] . "<br />";
  88.                 } $mensaje .=  '</td>
  89. </tr>
  90. <tr>
  91. <td class="Estilo1"><strong>Comentarios:</strong></td>
  92. <td class="Estilo1">&nbsp;</td>
  93. </tr>
  94. <tr>
  95. <td colspan="2" class="Estilo1">' . nl2br(stripslashes($comentarios)) . '</td>
  96. </tr>
  97. </table>
  98. <hr />
  99. <hr style="height:10px" />';
  100.     }
  101.     else { /* Texto Plano */
  102. $mensaje = "
  103. ----------------------------------------------------------------------------\n
  104. Nombre: " . $nombre . "\n
  105. Email: " . $correo . "\n
  106. Sexo: " . $sexo . "\n
  107. País: " . $pais . "\n
  108. Temas: ";
  109.         for($i = 0; $i <count($temas); $i++) {
  110.             $mensaje .= $temas[$i] . "\n";
  111.         } $mensaje .=  "
  112. Comentarios: " . $comentarios . "\n
  113. ----------------------------------------------------------------------------\n";
  114.     }
  115. }
  116. if($mensaje != "")
  117. {
  118.     if(mail($para, $asunto, $mensaje, $header))
  119.         echo '&resultado=S&;';
  120.     else
  121.         echo '&resultado=N&';
  122. }
  123. else
  124.     echo '&resultado=N&';
  125. ?>
  126. </body>
  127. </html>

Hemos llegado al final de este largo tutorial. No olvides ver el ejemplo y bajar el archivo.

NotaComo lo dije al principio del tutorial, por razones de seguridad, el ejemplo que se encuentra a continuación no enviará ningún correo electrónico (para evitar que se llene el buzón o llegue puro correo basura). En lugar de mandar el correo electrónico mostraré el resultado final de cómo se vería el correo electrónico (tanto en formato HTML como en formato de texto plano). Sin embargo, los archivos de esta entrada y el código pegado anteriormente, sí tienen la instrucción para enviar el correo electrónico.


Descargar Archivo
]]> http://www.codigometropoli.com/enviar-formulario-de-contacto/feed/ 111