REGISTRO E INGRESO DE USUARIOS FLASH

REGISTRO E INGRESO DE USUARIOS FLASH www.webnueva.com

.:DISEOS WEB (FLASH):. La mejor opcion para crear su pgina web .:MAQUETA GRATIS!:. Antes de empezar a leer esto bajaros el ejemplo, en el estn incluidos todos los archivos que vamos a utilizar, todos estos estn comentados dentro del mismo cdigo, tambien podeis ver el ejemplo que os he puesto. Ejemplo: / http://www.webnueva.com/crono/tutoriales/htm/registrar.htm / Descargar ejemplo: / http://www.webnueva.com/crono/tutoriales/zip/reging.zip / Lo primero que hay que hacer es crearse una tabla en nuestra base de datos (en este caso utilizare una bd MySQL), y la llamaremos "usuarios". Nuestra tabla tendr 6 campos, donde se guardaran el nombre del usuario, la contrasea, su direccin de e-mail, su nombre, ciudad y edad. Los tres primeros campos sern obligatorios, el resto no. Dicho esto crearamos nuestra tabla. ----------------------------------------------------------------------------------------------CREATE TABLE usuarios ( id bigint(7) NOT NULL auto_increment, nick char(100) NOT NULL, password char(100) NOT NULL, email char(100) NOT NULL, nombre char(255) default NULL, ciudad char(255) default NULL, edad int(3) default NULL, KEY id (id)) ---------------------------------------------------------------------------------------------Dividimos el trabajo en dos partes: Registro e ingreso. 1.- REGISTRO 1.1- registro.fla Lo explicare todo detalladamente para toda esa gente que acaba de iniciarse en flash y esta un poco perdida. Antes de empezar a hacer nada, leer todo el tutorial para haceros un poco a la idea de como es, as podris crearos un fondo segn las necesidades, ya que he aadido cosillas que a lo mejor vosotros no queris insertar (Ej. paso 5). 1) Abre tu macromedia flash y crea un nuevo archivo llamado registrar.fla. Crate un fondo q te guste (Ten en cuenta que vamos a tener 6 campos, as que dibjate 6 rectngulos). A esta primera capa la llamaremos mismamente "fondo" 2) Crear una nueva capa llamada "campos" e insertar encima de los rectngulos que creamos, 6 campos de texto de tipo "Input text" y ponerles los siguientes nombres de instancia. usu (para el nombre de usuario). pass (para la contrasea). mail (para la direc. de e-mail). nombre (nombre). ciudad (ciudad). edad (edad).Todos estos campos estarn definidos como tipo de texto "single line" (lnea nica) salvo el campo pass q se definir como texto tipo "password" (contrasea). Todas estas opciones las tenis en propiedades. 3) A continuacin crear una nueva capa llamada "alertas", en ella insertaremos todos los movie clips (si queris hacerlo mas sencillo, podis insertar un simple mensaje y listo, sin mc) de posibles errores, adems del caso en el que el registro es realizado con xito. Habra 6 posibles errores q sern: a) Campo email vaco (Este error lo manejamos en el keyframe 5) b) Campo contrasea vaco (Este error lo manejamos en el keyframe 10) c) Campo nombre de usuario vaco (Este error lo manejamos en el keyframe 15) d) Nombre de usuario escogido no disponible (Este error lo manejamos en el keyframe 20) e) Direccin de email incorrecta (Este error lo manejamos en el keyframe 25)
file:///C|/Descargas/fla_swf_htm/Portafolio/webnueva/tutoriales/htm/registro/explicareg.htm (1 de 9) [10/10/2004 15:03:38]

REGISTRO E INGRESO DE USUARIOS FLASH

f) Problemas con el servidor (Este error lo manejamos en el keyframe 30) g) Por ultimo el mensaje de registro exitoso lo manejaramos en el keyframe 35. Poner el mensaje de error en el keyframe correspondiente y listo. 4) Crearos una capa llamada "botn" e insertar en ella un botn con nombre "enviar_btn" y debajo de este insertar una caja de texto de tipo dynamic text y llamarla "proces" 5) Bueno decir que este paso os lo podis saltar, no es imprescindible, lo he creado para dar un efecto mas chulo. Sirve para que una vez nos hayamos registrado nos salgan los datos con los que nos hemos registrado. Para los que queris insertarlo, crearos una capa llamada "campo_registro" , insertamos un keyframe en el frame 35 y en un hueco reservado insertamos 5 campos de texto de tipo "dynamic text" con los nombres de instancia: usu2, email2, nombre2, ciudad2, edad2. Se supone que datos saldrn en cada caja de texto. La contrasea no la enseamos, a cambio podis insertar un botn vaco que avise al usuario de que a la hora de hacer el ingreso tendr la posibilidad de recuperar su contrasea. 6) Bueno ya tenemos toda la parte fsica, ahora vamos a por el cdigo. Crearos una capa llamada "actions_reg". Pinchar en actions frame y pegar el cdigo: enviar = function () { if (usu.text.length) //comprobamos que el nombre de usuario no este vaco { if (pass.text.length) //Comprobamos que la contrasea no este vaca { if (mail.text.length) //Comprobamos que la direccin de e-mail no este vaca { //Preparamos las variables que enviaremos al php form_lv = new LoadVars(); form_lv.usuL = usu.text; form_lv.passL = pass.text; form_lv.mailL = mail.text; form_lv.nombreL = nombre.text; form_lv.ciudadL = ciudad.text; form_lv.edadL = edad.text; proces.text = "procesando datos..."; //Enviamos las variables a registrar.php form_lv.sendAndLoad("aqui_URL_donde_esta_tu_registrar.php", form_lv, "POST"); //escribe URL real de registrar.php //Recibimos y manejamos las variables que vienen de registrar.php form_lv.onLoad = function() { if (this.estatus == "ocupado") { proces.text = ""; usu.text = ""; gotoAndStop(20); //Alerta: Nick ocupado } if (this.estatus == "nomail") { proces.text = ""; mail.text = ""; gotoAndStop(25); //Alerta: e-mail icorrecto } if (this.estatus == "ok") { proces.text = "Registrado con exito!"; usuvar = usu.text; mailvar = mail.text; nombrevar = nombre.text; ciudadvar = ciudad.text; edadvar = edad.text;

file:///C|/Descargas/fla_swf_htm/Portafolio/webnueva/tutoriales/htm/registro/explicareg.htm (2 de 9) [10/10/2004 15:03:38]

REGISTRO E INGRESO DE USUARIOS FLASH

usu.text = ""; mail.text = ""; nombre.text = ""; ciudad.text = ""; edad.text = ""; gotoAndPlay(35); //Ingreso exitoso } if (this.estatus != "ocupado" && this.estatus!= "nomail" && this.estatus!= "ok") { proces.text = ""; gotoAndStop(30); //Alerta: problemas con el servidor } }; } else //Alertas de campos vacos { gotoAndStop(5); //campo mail vaco } } else { gotoAndStop(10); //campo contrasea vaco } } else { gotoAndStop(15); //campo nombre de usuario vaco } }; enviar_btn.onRelease = enviar; stop(); Atencin! si optis por poner un mensaje sencillo de usuario registrado con xito tenis que sustituir gotoAndPlay(35); por gotoAndStop(35); 7) Nos creamos una nueva capa llamada "actions_data" (Solo para los que han seguido el paso 5) e insertamos en el frame 35 un keyframe y en actions frame insertamos el siguiente cdigo usu2.text = usuvar; mail2.text = mailvar; nombre2.text = nombrevar; ciudad2.text = ciudadvar; edad2.text = edadvar; stop(); Con esto tendramos listo nuestro registro.fla. 1.2- registrar.php Como habris observado en el cdigo de "actions_reg" ( paso 5) las variables se nos envan a un archivo llamado registrar.php donde sern analizadas y dependiendo de los resultados de la consulta, registrar.php enviara unas variables a registrar.swf que las capturara para manejarlas. El cdigo utilizado es el siguiente: <?php include('conexion.php'); //conectamos con la base de datos
file:///C|/Descargas/fla_swf_htm/Portafolio/webnueva/tutoriales/htm/registro/explicareg.htm (3 de 9) [10/10/2004 15:03:38]

REGISTRO E INGRESO DE USUARIOS FLASH

$link = Conectarse(); function quitar($mensaje) //elimina smbolos indeseados { $mensaje = str_replace("<","&lt;",$mensaje); $mensaje = str_replace(">","&gt;",$mensaje); $mensaje = str_replace("\'","&#39;",$mensaje); $mensaje = str_replace('\"',"&quot;",$mensaje); $mensaje = str_replace("\\\\","&#92;",$mensaje); return $mensaje; } //comprobamos con esta funcin que la direccin de email escrita es correcta function comprobar_email($email){ $mail_correcto = 0; //Hacemos una primera comprobacin if ((strlen($email) >= 6) && (substr_count($email,"@") == 1) && (substr($email,0,1) != "@") && (substr($email,strlen($email)-1,1) != "@")){ if ((!strstr($email,"'")) && (!strstr($email,"\"")) && (!strstr($email,"\\")) && (!strstr($email,"\$")) && (!strstr($email," "))) { //miro si tiene caracter . if (substr_count($email,".")>= 1){ //obtengo la terminacion del dominio $term_dom = substr(strrchr ($email, '.'),1); //compruebo que la terminacin del dominio sea correcta if (strlen($term_dom)>1 && strlen($term_dom)<5 && (!strstr($term_dom,"@")) ){ //compruebo que lo de antes del dominio sea correcto $antes_dom = substr($email,0,strlen($email) - strlen($term_dom) - 1); $caracter_ult = substr($antes_dom,strlen($antes_dom)-1,1); if ($caracter_ult != "@" && $caracter_ult != "."){ $mail_correcto = 1; } } } } } if ($mail_correcto) return 1; //mail correcto else return 0; //mail incorrecto } $comp_email = quitar($HTTP_POST_VARS["mailL"]); $i = comprobar_email($comp_email); //llamamos a la funcin if ($i != 0) //si la direccin de email es correcta... { $sql = "SELECT id FROM usuarios WHERE nick='".quitar($HTTP_POST_VARS["usuL"])."'"; $result = mysql_query($sql); if($row = mysql_fetch_array($result)) { echo "&estatus=ocupado&"; //nick ocupado } else { //insertamos los datos en nuestra base de datos $sql = "INSERT INTO usuarios (nick, password, email, nombre, ciudad, edad) VALUES ("; $sql .= "'".quitar($HTTP_POST_VARS["usuL"])."'"; $sql .= ",'".quitar($HTTP_POST_VARS["passL"])."'"; $sql .= ",'".quitar($HTTP_POST_VARS["mailL"])."'"; $sql .= ",'".quitar($HTTP_POST_VARS["nombreL"])."'"; $sql .= ",'".quitar($HTTP_POST_VARS["ciudadL"])."'";

file:///C|/Descargas/fla_swf_htm/Portafolio/webnueva/tutoriales/htm/registro/explicareg.htm (4 de 9) [10/10/2004 15:03:38]

REGISTRO E INGRESO DE USUARIOS FLASH

$sql .= ",'".quitar($HTTP_POST_VARS["edadL"])."'"; $sql .= ")"; mysql_query($sql); echo "&estatus=ok&"; //registro exitoso } mysql_free_result($result); mysql_close(); } else { echo "&estatus=nomail&"; //mail incorrecto } ?>

1.2-conexion.php El cdigo que he utilizado para la conexin con la base de datos es conexion.php. Estar atentos a la configuracin de este archivo que se os explica comentada dentro de su cdigo. <? // Fichero con los datos de conexin a la BBDD function Conectarse() { $db_host="tu_host"; // Host al que conectar, habitualmente es el localhost $db_nombre="nombre_de_la_BD"; // Nombre de la Base de Datos que se desea utilizar $db_user="nombre_de_usuario"; // Nombre del usuario con permisos para acceder $db_pass="tu_contrasea"; // Contrasea de dicho usuario // Ahora estamos realizando una conexin y la llamamos $link $link=mysql_connect($db_host, $db_user, $db_pass) or die ("Error conectando a la base de datos."); // Seleccionamos la base de datos que nos interesa mysql_select_db($db_nombre ,$link) or die("Error seleccionando la base de datos."); // Devolvemos $link porque nos har falta ms adelante, cuando queramos hacer consultas. return $link; } ?> Con esto acabamos la parte del registro. 2.- INGRESO 2.1- ingresa.fla Una vez nos hemos registrado necesitaremos de otro archivo que nos permita realizar el ingreso. Sigue estos pasos: 1) Abre un nuevo archivo y llmalo ingresa.fla.

file:///C|/Descargas/fla_swf_htm/Portafolio/webnueva/tutoriales/htm/registro/explicareg.htm (5 de 9) [10/10/2004 15:03:38]

REGISTRO E INGRESO DE USUARIOS FLASH

2) Crate una capa llamada "fondo" y hazte un fondo que te guste, con dos rectngulos donde irn los campos de texto de nombre de usuario y contrasea. 3) Inserta otra capa y llmala esta vez "campos". En ella insertaremos dos campos de texto de tipo "input text" y de tipo de texto "single line" para el nombre de usuario y "password" para la contrasea. 4) Crate una capa llamada "botn" y en esta inserta un botn con nombre de instancia "enviar_btn2" y debajo del mismo crate un campo de texto de tipo "dynamic text" para controlar los procesos y ponle como nombre "proces" 5) Igual que en registrar.fla tendremos q manejar en una nueva capa las posibles alertas que se den. En este caso las posibles alertas sern 3: a) Contrasea introducida incorrecta (La manejamos en el keyframe 5) b) Nombre de usuario no encontrado en la base de datos (Lo manejamos en el keyframe 10) c) Problemas con el servidor (Lo manejamos en el keyframe 15) La capa la podis llamar por ejemplo "alertas" 7) A continuacin vamos a realizar una aplicacin para permitir al usuario que si no se acuerda de sus datos (usuario y contrasea) pueda recuperarlos introduciendo su direccin de e-mail en un campo de texto. Naturalmente este paso es opcional, si queris algo mas sencillo os lo podis saltar. Para los que los quieran implementar solo tienen que crear una nueva capa que vamos a llamar "aplica_pass" y en esta vamos a insertar un nuevo campo de texto de tipo "input text" y le vamos a poner como nombre de instancia "rec_mail". Crearos ahora un botn y ponerle como nombre de instancia "mailbut". Por ultimo en acciones de esta capa, pegar el siguiente cdigo: enviar = function () { if (rec_mail.text.length) //Comprobamos si el campo rec_mail esta vaco { //creamos variables form_lv = new LoadVars(); form_lv.mail = rec_mail.text; //enviamos variables a pass.php form_lv.sendAndLoad("URL_de_pass.php", form_lv, "POST"); //escribe URL real de pass.php rec_mail.text = "Enviando datos..."; form_lv.onLoad = function() { //comprobamos variable devuelta if (this.estatus == "ok") { rec_mail.text = "Datos enviados correctamente."; } if (this.estatus == "pass") { rec_mail.text = "Email incorrecto."; } if (this.estatus != "pass" && this.estatus != "ok") { rec_mail.text = "Problemas con el servidor."; } }; } else{ rec_mail.text = "Inserta tu email"; } }; mailbut.onRelease = enviar; stop(); 8) Crate una nueva capa llamada "actions_ing" e inserta en acciones el cdigo las siguientes lneas:

file:///C|/Descargas/fla_swf_htm/Portafolio/webnueva/tutoriales/htm/registro/explicareg.htm (6 de 9) [10/10/2004 15:03:38]

REGISTRO E INGRESO DE USUARIOS FLASH

enviar = function () { if (usu.text.length) //comprobamos si el campo de texto usu no esta vacio { if (pass.text.length) //comprobamos si el campo de texto pass no esta vaco { //preparamos variables form_lv = new LoadVars(); form_lv.usu = usu.text; form_lv.pass = pass.text; proces.text = "procesando datos..."; //enviamos variables a ingresar.php form_lv.sendAndLoad("URL_de_ingresar.php", form_lv, "POST"); //inserta la URL real de tu ingresar.php form_lv.onLoad = function() { //analizamos la variable devuelta por ingresar.php if (this.estatus == "pass") { proces.text = ""; gotoAndStop(5); //contrasea incorrecta } if (this.estatus == "nousu") { proces.text = ""; usu.text = ""; pass.text = ""; gotoAndStop(10); // usuario no existente en la bd } if (this.estatus == "ok") { proces.text = "Ingreso exitoso!"; //direccionamos a la zona privada loadMovie("URL_de_privado.swf", 2); //inserta la URL real de tu privado.swf } if (this.estatus != "pass" && this.estatus!= "nousu" && this.estatus!= "ok") { proces.text = ""; gotoAndStop(15); //problemas con el servidor } }; } else { gotoAndStop(5); } } else { usu.text = "Insertar nombre de usuario"; } }; enviar_btn2.onRelease = enviar; stop(); 2.2- ingresar.php Este php nos permitir acceder a la base de datos y comprobar si los datos que nos manda el usuario desde el flash se corresponden con los que tenemos en nuestra base de datos. Si los datos son correctos permitimos que el usuario acceda a la zona privada. Su cdigo es:

file:///C|/Descargas/fla_swf_htm/Portafolio/webnueva/tutoriales/htm/registro/explicareg.htm (7 de 9) [10/10/2004 15:03:38]

REGISTRO E INGRESO DE USUARIOS FLASH

<?php include('conexion.php'); //conectamos con la base de datos $link = Conectarse(); if(isset($_POST["pass"]) && isset($_POST["usu"])) { $nickN = $_POST["usu"];; $passN = $_POST["pass"];; $result = mysql_query("SELECT password FROM usuarios WHERE nick='$nickN'"); //consultamos BD if($row = mysql_fetch_array($result)) { if($row["password"] == $passN) //comprobamos si coinciden las contraseas { echo "&estatus=ok&"; //las contraseas coinciden } else { echo "&estatus=pass&"; //contrasea incorrecta } } else { echo "&estatus=nousu&"; //El usuario no se encuentra en la BD } mysql_free_result($result); } mysql_close(); ?> El archivo conexion.php ya lo explique en paginas anteriores. 2.3- pass.php Este php accede a la base de datos y recupera el nombre de usuario y contrasea que se corresponden con la direccin de e-mail que le enviamos y a continuacin los manda x e-mail a esta misma direccin. Su cdigo es el siguiente: <? include('conexion.php'); //conectamos a la BD $link = Conectarse(); if(isset($_POST["mail"])) { $mail = $_POST["mail"]; //recuperamos el nombre de usuario y la contrasea $result = mysql_query("SELECT nick,password FROM usuarios WHERE email='$mail'"); //consultamos BD if($row = mysql_fetch_array($result)) //si existe el la direccin de email { $nickL = $row["nick"]; //capturamos nick $passL = $row["password"]; //capturamos contrasea $asunto = "Datos privados. www.tuweb.com"; //configura el nombre de tu web $mensaje = "Usuario: ".$nickL." Contrasea: ".$passL.""; //mensaje a enviar mail("$mail","$asunto","$mensaje"); //mandamos el mail echo "&estatus=ok&"; //mensaje enviado correctamente } else {

file:///C|/Descargas/fla_swf_htm/Portafolio/webnueva/tutoriales/htm/registro/explicareg.htm (8 de 9) [10/10/2004 15:03:38]

REGISTRO E INGRESO DE USUARIOS FLASH

//email incorrecto echo "&estatus=pass&"; } } ?> 2.4- privada.fla Una vez comprobados que los datos de ingreso son correctos dejaremos pasar al usuario a la zona privada, privada.swf. Importante: Tanto en ingresa.fla como en registro.fla, tendremos que insertar una linea de codigo para evitar que salga el menu al hacer click derecho, ya que de lo contrario el usuario podra dar a la opcin reproducir y saltarse d esta forma todo el sistema de seguridad. Para evitar esto solo teneis que poner la siguiente linea de codigo:

Stage.showMenu=false;
Con todo esto habramos acabado, si tenis alguna duda podis dejarla en el foro de webnueva o en forosdelweb.

file:///C|/Descargas/fla_swf_htm/Portafolio/webnueva/tutoriales/htm/registro/explicareg.htm (9 de 9) [10/10/2004 15:03:38]