Temario

• Tema 1: Introducción y requerimientos
• Tema 2: Instalar Appserv o Wamp
• Tema 3: Crear la base de datos
• Tema 4: Creación y validación del formulario de registro
• Tema 5: Registrar Usuarios en PHP
• Tema 6: Envío de correo para activar usuario
• Tema 7: Activación de usuairo y registro en tabla USUARIOS
• Tema 8: Finalización y posibles mejoras

Crear formulario

Mediante un formulario el usuario tendrá que rellenar una serie de campos requeridos para poder darlo de alta en una tabla temporal (USER_TEMP) en primera instancia para luego pasar a formar parte de la tabla final (USUARIOS), no sin antes validar los datos introducidos en el formulario para así tener información correcta en nuestra base de datos.

El formulario contendrá los siguientes campos:

• Nombre (class text)
• Usuario (class text)
• contraseña (class password)
• contraseña2 (class password)
• E-mail (class text)
• Enviar Formulario (class submit)

Una vez el usuario rellene los campos y pulse en el botón «Enviar Formulario«, los datos serán validados mediante PHP (podéis ver otro tipo de validaciones de formulario en esta dirección Validación de formularios con jQuery)

Por lo tanto lo que tenemos que tener claro son los tipos de validaciones que vamos a hacer, que son:

1. Nombre: Validamos que tenga como mínimo una longitud de 4 caracteres
2. Usuario: Validar los caracteres introducidos en el campo y que el Usuario no exista ya en la base de datos (Recuerda que en la base de datos el campo Usuario lo declaramos “único”, por lo tanto no puede haber dos iguales).
3. Contraseñas: Validar que la contraseña 1 y la contraseña 2 son iguales, además que tengan un mínimo de 5 caracteres. Por seguridad una vez se envían los datos a validar, si hay algún error no se recuerdan los campos Password, así que el usuario tendrá que volver a escribirlo.
4. Email: Validar el formato del email y a continuación validar que el e-mail no existe ya en la base de datos. (Recuerda que en la base de datos el campo email lo declaramos “único”).

NOTA: Esta forma de validar y sus archivos han sido inspirados en un post creado por Web.ontuts.com (http://web.ontuts.com/tutoriales/como-validar-un-formulario-con-php-y-javascript-jquery/comment-page-1/#comment-3886)

Empecemos por la creación del formulario.

En la mayoría de los casos, los desarrolladores suelen crear formularios con tablas o con labels. Recomiendo utilizar labels en los formularios y controlar su aspecto mediante CSS.

Vamos a ir añadiendo código según vamos avanzando, para así entenderlo más fácil asi que  intentaré explicar el código paso a paso.

A la página del formulario le llamaremos “formulario.php”

[HTML]

[/HTML]

Hasta ahora lo único que hemos hecho es crear un formulario simple en HTML en el que a cada input le otorgamos el parámetro name que será el que después pasaremos por PHP.

Sabiendo esto, por ejemplo, para pasar el valor del campo  «Nombre de usuario» mediante PHP, utilizaremos la variable $username (que hemos declarado en el párametro name)

Como podéis apreciar, he incluido el formulario en dos capas llamadas “wrapper” y “section” y en cada «input» el valor text para los campos en los que se incluye texto y submit para el botón.  Esto nos sirve para que con ayuda de las hojas de estilo (CSS) podamos darle un mejor aspecto.

Para enlazar el archivo «formulario.php» con la hoja de estilo utilizamos el siguiente código:

[HTML] [/HTML]

Con esto estamos diciendo que incluya dentro del archivo «formulario.php» la hoja de estilos que se encuentra en la misma carpeta con el nombre «main.css».

Nota: No voy a entrar en detalle sopbre las hojas de estilo para centrarnos más en lo que es la parte HTML y PHP, asi que el código para darle estilo al formulario lo tenéis disponible en el siguiente enlace.

Por ahora el formulario quedaría de la siguiente manera:

¿Se ve bonito verdad?. Bueno pues ya lo tenemos creado pero de forma estática, ahora lo haremos dinámico incluyendo la validación del formulario con PHP.

Antes de nada quiero explicar que la validación la vamos a hacer en el mismo archivo «formulario.php» para que cuando el usuario haga clic en “enviar formulario” reciba los mensajes de error en la misma página sin que los datos viajen entre archivos. Esto se consigue poniendo en el formulario el parámetro action igual al archivo donde tenemos dicho formulario.

Quedaría de la siguiente manera:

[HTML]

[/HTML]

Como veis he incluido el valor method=”post”, con esto lo que le estamos diciendo es que las variables pasadas por el formulario se podrán recoger con el método $_POST[‘variable’].

NOTA: Si tenéis dudas con la forma de pasar las variables os recomiendo este tutorial donde explican la diferencia entre el método POST y GET en PHP.

Ahora ya tenemos preparado el formulario para enviar variables y poder «trastear» con ellas.

Vamos a hacerlo por partes, empezaremos validando el nombre. Os recuerdo de nuevo como vamos a validar el usuario:

Validación del Nombre: Validamos que tenga como mínimo una longitud de 4 caracteres.

Validar longitud de un campo y carácteres permitidos

Las validaciones las vamos a crear con funciones en PHP. Estas funciones serán declaradas al principio del archivo, antes de definir la etiqueta HTML.

Vamos a explicar este la validación de la longitud de un campo y caracteres permitidos con el campo Nombre, pero nos servirá para cualquier otro en el que queramos hacer ese tipo de validación.

Nos vamos al archivo formulario.php y ponemos este código justo antes de la linea donde aparece DOCTYPE:

[PHP]

//variables valores por defecto
$name = «»;

/*Validamos que el nombre no tenga caracteres extraños
y que su longitud sea mayor que 4*/
function validateName($name){
//NO cumple longitud minima
if(strlen($name) < 4) return false; //Si longitud OK pero NOOK solo caracteres de la A a la z else if(!preg_match(«/^[a-zA-Z]+$/», $name)) return false; // SI longitud OK, y caracteres A-z OK else return true; } //Si se ha enviado la variable mediante POST, validamos los campos if(isset($_POST[‘send’])){ if(!validateName($_POST[‘name’])) $name = «error»; //Validamos si hay error if($name != «error») $status = 1; } ?>

[/PHP]

Lo primero que vemos es que se inicializa la variable name a espacios, así nos aseguramos que no contiene ningun valor extraño (o como se suele decir, basura).

La función validateName, se encarga de recoger el valor de la variable name que hemos pasado mediante el método POST por el formulario. Si os fijais, donde hacemos la llamada a la función, le estamos pasando dicho valor (la variable que esta entre paréntesis):

[PHP]if(!validateName($_POST[‘name’]))[/PHP]

Con el valor recogido en la función, hacemos las comprobaciones necesarias como son la longitud mínima y los caracteres soportados. La función ValidateName devuelve «false» si hay algun error en la validación y por el contrario «true» si todo es correcto, informando el campo name con el texto «error» si el retorno de la función es «false».

A la vuelta de la función hacemos la comprobación de que si la variable name no es igual a «error», entonces la validación del formulario ha sido existosa, informando la variable status con el valor 1.

Esta variable status es la que nos informará de si los campos se han introducido correctamente o no. Por tanto, lo que tenemos que tener claro es que si status es igual a 1, enviamos el formulario, de lo contrario, informaremos el error en cuestión.

¿Cómo logramos esto?. Pues es bastante sencillo una vez veamos el código. Lo que haremos es incluir en nuestro formulario una condición con la variable status. Si status no es 1, mostramos el formulario con los errores, si status es 1 informamos al usuario de que la validación ha sido correcta.

Si lo plasmamos en pseudocódigo para que lo entendáis mejor seria así:

• Si variable status no está vacía
  • Mostramos el formulario con los errores correspondientes en rojo.
• En caso contrario
  • Mostrar al usuario texto informando que el formulario se ha enviado con éxito.

¿Os ha quedado claro?. Creo que es una buena forma de explicarlo para que lo entendáis a primera vista. Para ver el código que tendríamos hasta el momento, acceder al siguiente enlace:

Código Fuente 1

Fijaros que en la etiqueta label del campo Nombre he puesto otra etiqueta span en la que informaremos al usuario de cómo tiene que rellenar el campo:

[html]
Mínimo 4 carácteres (permitidos de la A a la Z)
[/html]

Esto no servirá mas tarde para indicarle al usuario los errores que hay en el formulario.

Es hora de probarlo en el navegador, rellenamos todos los datos correctamente y vemos como nos escribe por pantalla «Formulario enviado con éxito». Ahora probemos a forzar el error, poniendo en el campo Nombre, un nombre con 3 letras solo. Esto nos debería generar un error, es decir, no debería informar por pantalla «Formulario enviado con éxito», sino dejarnos en el mismo formulario.

Como os habéis dado cuenta, lo hace correctamente, pero falta algo ¿verdad?. Pues sí, porque si lo dejamos de esta manera, el usuario no sabe realmente porque no avanza el formulario, ni si quiera sabe si los datos se han enviado, asi que llega la hora de informar los errores.

Para solucionar esto, vamos a poner una condición en PHP en la etiqueta label para que cuando haya habido algún error con el nombre (es decir, la variable name es igual a «error»), escriba las letras en rojo y cuando todo este correcto las escriba en verde. Asi que hay que modificar el código y ponerlo de la siguiente manera:

[html]


Nombre Mínimo 4 carácteres (permitidos de la A a la Z)
[/html]

Como veis en la imagen ya tenemos controlado este campo en cuanto a validación y en cuanto a informar al usuario.

El código hasta ahora quedaría así:

[html]

//variables valores por defecto
$name = «»;

/*Validamos que el nombre no tenga caracteres extraños
y que su longitud sea mayor que 4*/
function validateName($name){
//NO cumple longitud minima
if(strlen($name) < 4) return false; //Si longitud OK pero NOOK solo caracteres de la A a la z else if(!preg_match(«/^[a-zA-Z]+$/», $name)) return false; // SI longitud, SI caracteres A-z else return true; } //Si se ha enviado la variable mediante POST, validamos los campos if(isset($_POST[‘send’])){ if(!validateName($_POST[‘name’])) $name = «error»; //Validamos si hay error if($name != «error») $status = 1; } ?>

[/html]

Una vez sabemos la metodología que estamos siguiendo para validar los datos, es muy sencillo ir añadiendo campos a las validaciones. Lo único que tenemos que tener en cuenta es lo siguiente para cada campo:

Validar campos iguales

Para una mayor seguridad y sobre todo para que el usuario no cometa ningún error informando el password de su cuenta de usuario, una forma muy aconsejable es obligar al visitante (futuro usuario) a repetir la contraseña para no dar pie a equivocación.

Lo primero que tenemos que hacer es inicializar la variable que vayamos a usar para los campos password, al igual que en el campo Nombre, y además crear la función que nos valida:

Asi que, nos vamos de nuevo al «formulario.php» y en la parte superior, lo primero que hacemos es inicializar la variable password1 y password2:

[php]
$password1 = “”;
$password2 = “”;
[/php]

Una vez inicializadas las variables pasamos a crear las funciones que pondremos despues de la función validateName:

[php]
function validatePassword1($password1){
//NO tiene minimo de 5 caracteres o mas de 12 caracteres
if(strlen($password1) < 5 || strlen($password1) > 12)
return false;
// SI longitud, NO VALIDO numeros y letras
else if(!preg_match(«/^[0-9a-zA-Z]+$/», $password1))
return false;
// SI rellenado, SI email valido
else
return true;
}

function validatePassword2($password1, $password2){
//NO coinciden
if($password1 != $password2)
return false;
else
return true;
}
[/php]

Ahora faltaría hacer las llamadas a estas funciones (colocamos debajo de la validación del nombre de la siguiente manera:

[php]
if(isset($_POST[‘send’])){
if(!validateName($_POST[‘name’]))
$name = «error»;
//Aquí incluimos la validación de los passwords
if(!validatePassword1($_POST[‘password1’]))
$password1 = «error»;
if(!validatePassword2($_POST[‘password1’], $_POST[‘password2’]))
$password2 = «error»;
//Validamos si hay error
If($name != «error» && $password1 ¡= “error” && $password2 ¡= “error”)
$status = 1;
}
[/php]

Como véis a parte de hacer las llamadas a las nuevas funciones, hemos añadido en la condición de «validación si hay error» las variables de las nuevas validaciones sobre los passwords ya que status sólo cambiará a 1 cuando la validación de todos los campos sea correcta:

[php]
$password1 != «error» && $password1 != «error»
[/php]

Ya tenemos la parte PHP, pero claro, como antes pasaba con el nombre, falta informar al usuario sobre la validación y esto se logra poniendo una condición en la etiqueta label.

Recordad: Texto en Verde si es correcto, Texto en Rojo si no es correcto.

En el ejemplo de la imagen que se muestra a continuación, hemos ingresado la primera contraseña correctamente (caracteres permitidos y longitud igual o mayor que 5) y la segunda contraseña distinta a la primera.

Tenemos que cambiar el código de la siguiente manera:

[HTML]

Contraseña Mínimo 5 caracteres, máximo 12 caracteres, Sólo letras y números

Repetir Contraseña Debe ser igual a la anterior

[/HTML]

Validar si existe usuario en nuestra base de datos

Como es el caso del nombre de usuario, a parte de validar los caracteres introducidos, tenemos que hacer una consulta a la base de datos para comprobar que no existe, ya que en caso de existir, no se puede dar de alta.

Esto se consigue también utilizando código PHP para acceder a nuestra base de datos (MySQL) y en concreto a la tabla USERS_TEMP, que es donde en primera instancia se darán de alta los usuario como ya explicamos en el tema anterior sobre como Crear la base de datos

Para validar si el usuario existe en la tabla USERS_TEMP de nuestra base de datos tenemos que crear la función correspondiente (validateExistUsername):

Al igual que hemos hecho con el campo name y los campos password1 y 2, inicializamos la variable existUsername:

[php]
$existusername = «»;
[/php]

Una vez inicializada la variable pasamos a crear las función que pondremos después de la función validatePassword2:

[php]
function validateExistUsername($username){
/*Los datos de estas variables dependen de cómo tengas configurado tu servidor web, en mi caso y en local, lo tengo de la siguiente manera, por favor, modificalo con tus datos*/
$servidor = «localhost»;
$usuario = «root»;
$password = «»;
$sdb = «prueba1»;

$ilink=mysql_connect($servidor,$usuario,$password) or die(mysql_error());
//$ilink = mysql_connect(«localhost»,»root»,»») or die(mysql_error());
mysql_select_db($sdb,$ilink);
$consulta= «select usersTemp from users_temp where usersTemp = ‘$username'»;
$resultado=mysql_query($consulta,$ilink) or die (mysql_error());
if (mysql_num_rows($resultado)>0)
return false;
else
return true;
}
[/php]

NOTA: Importante acordarse de cambiar los valores de las variables servidor, usuario, password y sbd a lo que vosotros tengais configurado en vuestro servidor web y de base datos.

Ahora faltaría hacer las llamadas a esta función (colocamos debajo de la validación del password2 de la siguiente manera:

[php]
if(isset($_POST[‘send’])){
if(!validateName($_POST[‘name’]))
$name = «error»;
if(!validatePassword1($_POST[‘password1’]))
$password1 = «error»;
if(!validatePassword2($_POST[‘password1’], $_POST[‘password2’]))
$password2 = «error»;
if(!validateExistUsername($_POST[‘username’]))
$existusername = «error»;

//Validamos si hay error
if($name != «error» && $password1 != «error» && $password1 != «error»){
if($existusername == «error»){
$existeU = 1;
}
/*si no hay ningún error de validación
y además el usuario no existe en la base de datos
el formulario es correcto*/
if (!$existeU && !$existeE){
$status = 1;
}
}
}
[/php]

Como véis a parte de hacer la llamada a la nueva función, hemos añadido en la condición de «validación si hay error» la variable de la nueva validación sobre si existe el usuario en la base de datos (variable existusername distinto de «error»), ya que el status sólo cambiará a 1 cuando la validación de todos los campos sea correcta.

Pruébalo a ver que tal funciona:

Te has dado cuenta que falta algo ¿verdad?. Pues tienes razón, ahora falta la parte en la que informamos al usuario en caso de que haya algún error (como puedes ver en la imagen superior). Por tanto nos faltaría poner en el código, en concreto en la parte label del campo Username, lo siguiente:

[HTML]

Nombre de usuario
if ($existusername == «error»):
echo «El usuario » . $usernameValue . » ya existe«;
endif; ?>

[/HTML]

Hasta ahora hemos aprendido lo siguiente:

El código finalmente completado (a espera de vuestro trabajo) queda de la siguiente manera:

Código Fuente 2

Con esto, y modificando el archivo «formulario.php», podemos hacer las siguientes validaciones que aun nos faltaría por incluir y que os dejo a vuestra merced para que así podáis aprender (que se que a veces somos muy cómodos y acudimos al copia/pega).

Con esto tenéis trabajo, pero estoy seguro que con vuestra capacidad y este tutorial podréis lograrlo. Ahhh y recordad que en los comentarios me podéis dejar cualquier duda o sugerencia e intentaré resolver en la medida de lo posible.

De todas formas, aquellos que estéis interesados en tener el archivo «formulario.php» tan sólo dejarme un comentario en este mismo post y os lo mandaré sin ningún problema.

En el siguiente tutorial veremos el tema como insertar usuarios en MySql desde un formulario PHP.

Temario

• Tema 1: Introducción y requerimientos
• Tema 2: Instalar Appserv o Wamp
• Tema 3: Crear la base de datos
• Tema 4: Creación y validación del formulario de registro
• Tema 5: Registrar Usuarios en PHP
• Tema 6: Envío de correo para activar usuario
• Tema 7: Activación de usuairo y registro en tabla USUARIOS
• Tema 8: Finalización y posibles mejoras