En este post vamos a ver como crear un sistema de usuarios usando PHP y MySQL además vamos a ver como realizar la validación del formulario con javaScript para que el usuario pueda ir viendo si va rellenando algún campo del formulario de forma incorrecta y que no tenga que esperar a enviar el formulario para ver que ha introducido algún dato de forma incorrecta.
Además de hacer una primera validación en javaScript también la vamos a hacer en PHP porque siempre debemos validar los datos en el servidor porque el usuario puede tener desactivado javaScript en su navegador o simplemente puede modificar el código en su navegador para saltarse las validaciones de forma muy simple, por lo que la validación con javaScript esta bien como una pre validación pero siempre tiene que estar acompañada de una validación en el lado del servidor que es la que realmente aporta seguridad.
Comencemos…
Formulario de registro
Vamos a empezar por donde dicta la lógica que no es otro lugar que por crear el formulario de registro. Y para poder entender mejor el código en primer lugar vamos a ver que es lo queremos, después veremos el código necesario para hacerlo y finalmente las explicaciones necesarias.
Como en cualquier formulario de registro la función principal es permitir a los usuarios registrarse introduciendo sus datos, para que el formulario sea lo más agradable para el usuario vamos a comprobar con javaScript si lo que el usuario introduce es valido (el nombre no tiene números, la edad es un numero, formato de email valido, etc.) y se lo indicamos resaltando el campo en cuestión con color verde si es correcto o rojo si no lo es.
Con esta primera validación le mostramos al usuario si ha rellenado el formulario de forma correcta o no, pero en cualquier caso le permitimos que pueda pulsar en el botón de registrase y aunque se podría desactivar este botón si hay algún campo erróneo en este caso no lo vamos a hacer para que se vea más claro que esta validación tiene como fin simplemente mejorar la interacción con el usuario.
En el caso de que el usuario intente registrarse sin rellenar el formulario de forma correcta o elija un nombre de usuario que ya este en uso le devolvemos de nuevo al formulario de registro para que introduzca los datos correctamente y para facilitarle la tarea le mantenemos los datos que ya había introducido para no hacerle volver a repetirlos.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/estilo-login.css" media="screen"/>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/validarFormularios.js" type="text/javascript"></script>
<title>Registro</title>
</head>
<body>
<?php
require_once 'controlador/config.php';
require 'modelo/usuario.php';
require 'controlador/GestorUsuarios.php';
// Inicializamos las varibles que se usaran para los campos de texto del formulario.
$usuario="";
$email="";
$nombre="";
$apellidos="";
$edad="";
$telefono="";
$password="";
$password2="";
if(isset($_POST['registrar'])){
$conexion = new mysqli($servidor, $usuarioBD, $passwordBD, $baseDatos);
$nuevoUsuario = new Usuario($_POST['usuario'],$_POST['nombre'],$_POST['apellidos'],$_POST['email'],$_POST['edad'],$_POST['telefono'],$_POST['password'],$_POST['password2']);
$gestor = new GestorUsuarios($conexion);
// Si todos los campos del usuario son correctos y se realiza la insercion del usuario con exito
// se redireciona a la pagina correspondiente.
if (($gestor->validarUsuario($nuevoUsuario)) && ($gestor->insertarUsuario($nuevoUsuario))) {
$conexion->close();
header("Location:formulario_login.php");
} else {
// Si algo falla se recuperan los datos introducidos por el usuario
// para que no tenga que reescribir los que estuviesen correctos.
$usuario=$_POST['usuario'];
$email=$_POST['email'];
$nombre=$_POST['nombre'];
$apellidos=$_POST['apellidos'];
$edad=$_POST['edad'];
$telefono=$_POST['telefono'];
$password=$_POST['password'];
$password2=$_POST['password2'];
}
}
?>
<section>
<div id="formulario_registro">
<h2>Formulario registro</h2>
<form action="#" method=POST>
<div class="campoFormulario">
<label for="usuario">Usuario: <span class="obligatorio">*</span></label>
<input type='text' id="usuario" name="usuario" maxlength="15" value="<?php echo $usuario ?>" onblur="return validarNombreUsuario(this.value)" autocomplete="off"/>
</div>
<div class="campoFormulario">
<label for="password">Contraseña: <span class="obligatorio">*</span></label>
<input type='password' id="password" name="password" maxlength="20" value="<?php echo $password ?>" onblur="return validarPassword(this.value)" autocomplete="off"/>
</div>
<div class="campoFormulario">
<label for="password2">Repita la Contraseña: <span class="obligatorio">*</span></label>
<input type='password' id="password2" name="password2" maxlength="20" value="<?php echo $password2 ?>" onblur="return validarPasswordIguales(password.value,this.value)"/>
</div>
<div class="campoFormulario">
<label for="email">Email: <span class="obligatorio">*</span></label>
<input type='text' id="email" name="email" maxlength="30" value="<?php echo $email ?>" onblur="return validarEmail(this.value)"/>
</div>
<div class="campoFormulario">
<label for="nombre">Nombre:</label>
<input type='text' id="nombre" name="nombre" maxlength="20" value="<?php echo $nombre ?>" onblur="return validarNombre(this.value)"/>
</div>
<div class="campoFormulario">
<label for="apellidos">Apellidos:</label>
<input type='text' id="apellidos" name="apellidos" maxlength="30" value="<?php echo $apellidos ?>" onblur="return validarApellidos(this.value)"/>
</div>
<div class="campoFormulario">
<label for="edad">Edad:</label>
<input type='text' id="edad" name="edad" maxlength="30" value="<?php echo $edad ?>" onblur="return validarEdad(this.value)"/>
</div>
<div class="campoFormulario">
<label for="telefono">Telefono: <span class="obligatorio">*</span></label>
<input type='text' id="telefono" name="telefono" maxlength="9" value="<?php echo $telefono ?>" onblur="return validarTelefono(this.value)"/>
</div>
<div class="botonFormulario">
<input type="submit" id="registrar" name="registrar" value="Registrarse">
</div>
</form>
</div>
</section>
</body>
</html>
En primer lugar cargamos los archivos PHP que tienen las clases y funciones que necesitaremos e inicializamos las variables que van a contener los valores del formulario para los casos en los que el usuario ha rellenado el formulario con algún campo de forma incorrecta evitando que tenga que volver a introducir todo de nuevo.
Después hacemos la comprobación de si se ha hecho click en el botón registrar, en caso afirmativo $_POST[‘registrar’] existirá (aunque no tenga ningún valor pues esta es la variable del botón) y entonces se creara un usuario con los datos introducidos y se comprobara si los datos son validos y si se guarda correctamente en la base de datos. Si esto sucede se envia al usuario a la pagina de login para que pueda entrar y en el caso de que algo falle se le vuelve a mostrar al usuario el formulario de registro pero con los datos introducidos previamente ya rellenados. Si es la primera vez que se entra en el formulario de registro $_POST[‘registrar’] no existirá por lo que simplemente se mostrara el formulario vacío.
En cuanto al formulario propiamente dicho como hemos dicho el valor de los input lo vamos a rellenar con las variables PHP que estarán vacías o no dependiendo de lo que haya hecho el usuario previamente.
Y la validación con javascript la vamos a hacer en el evento onblur, es decir, cuando se retira el foco del input (cuando se hace click en otro sitio, se pulsa tab, etc.) aunque perfectamente se podría ante otro evento si así se quiere.
Funciones JavaScript para validar los formularios
Estas funciones validaran el formato de cada campo mediante expresiones regulares y modificaran el estilo del formulario cambiando el color del borde del input dependiendo de si el formato es correcto o no.
Todas las funciones tienen la misma estructura que es muy sencilla, primero se define la expresión regular para comprobar el formato, después se sustituye el carácter + por su representación porque al probar el funcionamiento del formulario he visto que si introducía un + las funciones JavaScript dejaban de funcionar, con lo que así solucionamos ese problema aunque quizás no sea la mejor manera de hacerlo. Finalmente todas las funciones llaman a la función mostrarValidacion() que se encarga de aplicar un estilo CSS u otro al input en función de si la validación fue satisfactoria o no con la ayuda de jQuery
Al llamar a la función mostrarValidacion le pasamos como primer parámetro el identificador del elemento del que queremos modificar su estilo y como segundo parámetro le pasamos el resultado de realizar la validación con las expresiones regulares y el resto de comprobaciones que se hagan de forma directa.
Vamos a explicar brevemente cual es la estructura de una expresión regular mediante el ejemplo de la usada para validar el email que es la más compleja. La expresión es esta /^[a-zA-Z]+([\.]?[a-zA-Z0-9_-]+)*@[a-z0-9]+([\.-]+[a-z0-9]+)*\.[a-z]{2,4}$/:
- Las expresiones regulares van delimitadas por /.
- [a-z] Quiere decir que puede haber cualquier símbolo que se encuentre en el rango indicado ([a-z] letras minúsculas, [A-Z] letras mayúsculas, [0-9] números, [a-g] letras entre la a y la g, etc.])
- Se pueden combinar los caracteres que se quiera poniéndolos seguidos dentro de los corchetes y del mismo modo se pueden añadir caracteres individuales (ejemplo: [a-zA-Z- ] puede contener letras minúsculas, mayúsculas el guion o espacios en blanco).
- El símbolo + se usa para indicar que tiene que aparecer al menos una vez uno de los caracteres indicados previamente ([a-zA-Z]+[a-zA-Z0-9] La cadena tiene que empezar por una letra y luego puede tener tanto letras como números).
- El símbolo ? quiere decir que el carácter o caracteres anteriores puede aparecer o no hacerlo.
- El símbolo * indica que el carácter siguiente tiene que aparecer obligatoriamente (un email tiene que tener el símbolo @).
- El símbolo ^ indica que la cadena debe comenzar con el carácter o caracteres que le sigue.
- El símbolo $ indica que la cadena debe finalizar con el carácter o caracteres que le preceden.
- {2,4} indica la longitud del grupo de caracteres que le precede (en este caso el 2 seria el tamaño mínimo y el 4 el máximo).
Visto esto podemos leer la expresión regular anterior de la siguiente forma. Un email tiene que empezar por una letra y puede contener puntos antes de @ siempre que tengan alguna letra, número o guion (ej. abC.Y-op) después obligatoriamente tiene que tener la @ y detrás puede tener una cadena de numero y/o letras con puntos y guiones en su interior (ej. gm4il) finalmente un email valido tiene que terminar con un punto (obligatorio) y una cadena de caracteres de entre 2 y 4 letras.
El código JavaScript de estas funciones de validación es el siguiente:
function validarEmail(email){
var formato = /^[a-zA-Z]+([\.]?[a-zA-Z0-9_-]+)*@[a-z0-9]+([\.-]+[a-z0-9]+)*\.[a-z]{2,4}$/;
email = email.replace(/\+/g, '\+');
mostrarValidacion('#email',formato.test(email));
}
function validarNombreUsuario(nombreUsuario){
var formato = /^[a-zA-Z0-9_-]{4,15}$/;
nombreUsuario = nombreUsuario.replace(/\+/g, '\+');
mostrarValidacion('#usuario',formato.test(nombreUsuario));
}
function validarNombre(nombre){
var formato = /^[a-zA-Z áéíóúüÁÉÍÓÜÚ]{3,15}$/;
nombre = nombre.replace(/\+/g, '\+');
mostrarValidacion('#nombre',formato.test(nombre)|| nombre=='');
}
function validarApellidos(apellidos){
var formato = /^[a-zA-Z áéíóúüÁÉÍÓÜÚ]{4,15}$/;
apellidos = apellidos.replace(/\+/g, '\+');
mostrarValidacion('#apellidos',formato.test(apellidos) || apellidos=='');
}
function validarEdad(edad){
var formato = /^[0-9]{1,3}$/;
edad = edad.replace(/\+/g, '\+');
mostrarValidacion('#edad',formato.test(edad)&& edad<=150 && edad>=5);
}
function validarTelefono(telefono){
var formato = /^[0-9]{9}$/;
telefono = telefono.replace(/\+/g, '\+');
mostrarValidacion('#telefono',formato.test(telefono));
}
function validarPassword(pass){
pass = pass.replace(/\+/g, '\+');
mostrarValidacion('#password',pass.length>=4);
}
function validarPasswordIguales(password,passwordRepetida){
password = password.replace(/\+/g, '\+');
passwordRepetida = passwordRepetida.replace(/\+/g, '\+');
mostrarValidacion('#password2',password.length>=4 && password==passwordRepetida);
}
/**
* Cambia el estilo del input para indicar si es valido o no
*
* @param nombreCampo Nombre del campo
* @param valido boolean
*/
function mostrarValidacion(nombreCampo,valido){
if (valido){
$(document).ready(function(){
$(nombreCampo).css('border','1px solid #7ca22c');
$(nombreCampo).css('box-shadow','0 0 2px 1px #7ca22c');
});
} else {
$(document).ready(function(){
$(nombreCampo).css('border','1px solid red');
$(nombreCampo).css('box-shadow','0 0 2px 1px red');
});
}
}
Formulario de login
Una vez que ya tenemos «todo» lo necesario para registrarnos vamos a ver la parte necesaria para poder logearnos.
El código SQL para generar la tabla anterior es:
En primer lugar crearemos el formulario de login que contendrá los dos campos de toda la vida, usuario y contraseña.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Login</title>
<link rel="stylesheet" type="text/css" href="css/estilo-login.css"/>
</head>
<body>
<?php
session_start();
// Se comprueba si ya se habia iniciado la sesion y en ese caso le redirigimos a la pagina de inicio
if(isset($_SESSION['id'])){
header("Location:pagina1.php");
}
?>
<section>
<div id="formulario_login">
<h2>Login</h2>
<form action="controlador/login.php" method="POST">
<div class="campoFormulario">
<label for="usuario">Usuario:</label>
<input type='text' name="usuario" maxlength="15"/>
</div>
<div class="campoFormulario">
<label for="password">Contraseña:</label>
<input type='password' name="password" maxlength="20"/>
</div>
<div class="botonFormulario">
<input type="submit" id="login" name="login" value="Entrar">
</div>
<div id="enlace_registro">
<a href="formulario_registro.php"> Registrarse </a>
</div>
</form>
<?php
if(!empty($_GET['error'])) {
?>
<p class="errorUsuario">Usuario o pasword incorrectos</p>
<?php } ?>
</div>
</section>
</body>
</html>
Lo primero que hacemos en el formulario de login es comprobar si el usuario ya esta logeado y en ese caso le redirigimos directamente a la página que nosotros queramos, y si no esta logeado entonces le mostramos un formulario para que pueda introducir sus datos que validaremos en el archivo login.php que veremos a continuación. Si los datos introducidos por el usuario no coinciden con ningún usuario registrado desde login.php volveremos a ser redirigidos al formulario de login con el parámetro error en la url (formulario_login.php?error=error) y entonces se mostrara en el formulario que los datos que hemos introducido no son correctos y de este modo poder ver que esta ocurriendo y porque seguimos en la página de login.
Antes de meternos en otras cosas vamos a ver como sería el archivo login.php para no perdernos e ir entendiendo lo que estamos haciendo.
<?php
include 'config.php';
require_once 'GestorUsuarios.php';
$conexion = new mysqli($servidor, $usuarioBD, $passwordBD, $baseDatos);
$gestor = new GestorUsuarios($conexion);
if ($gestor->comprobarUsuario($_POST['usuario'],$_POST['password'])) {
$conexion->close();
// Iniciamos la sesion.
session_start();
$_SESSION['id'] = $_POST['usuario'];
$_SESSION['password'] = $_POST['password'];
header("Location:../pagina1.php");
} else {
$conexion->close();
header("Location:../formulario_login.php?error=error");
}
?>
Lo que hacemos es simplemente comprobar si los datos del usuario son correctos y dependiendo del resultado de esta comprobación creamos una sesión y le añadimos los datos del usuario, en este ejemplo se añade el usuario y la password a la sesión para ver que se pueden añadir varios atributos, pero la password no sería necesario añadirla y lo mejor sería no hacerlo. Si los datos no son validos volvemos a la pagina del formulario de login como decíamos antes.
Lógica del sistema de usuarios
Hasta el momento simplemente hemos visto las páginas de registro y login y las funciones javaScript para hacer la validación del formulario.
Ahora vamos a ver que es lo que hay por detrás de estos formularios que es lo que nos permite tener un sistema de autentificación para poder tener un control sobre los usuarios que pueden acceder o no a nuestras páginas.
Base de datos
Vamos a usar una base de datos MySql ya que es gratuita y muy raro será el sitio en el que no dispongamos de MySQL y además es muy sencillo de instalar en un entorno local. Para este ejemplo simplemente necesitamos una tabla para almacenar los usuarios como la siguiente:
CREATE TABLE `usuarios` (
`id` varchar(15) NOT NULL,
`nombre` varchar(20),
`apellidos` varchar(30),
`email` varchar(30) NOT NULL,
`edad` tinyint(3) NOT NULL,
`telefono` mediumint(9),
`password` varchar(32) NOT NULL,
PRIMARY KEY `id` (`id`)
);
Para poder cambiar la base de datos de forma rápida vamos a usar el archivo config.php donde vamos a establecer los datos de acceso a la base de datos y de esta forma para cambiar de base de datos solo tendremos que modificar los valores de este archivo siempre y cuando mantengamos la estructura de la base de datos.
<?php
// Datos de la base de datos.
$servidor="localhost";
$usuarioBD="root";
$passwordBD="";
$baseDatos="prueba";
?>
Modelo de datos
Para algo tan simple como un sistema de usuarios el modelo de datos se reduce a un par de clases usuarios, roles, etc. en este caso nos vamos a quedar en lo más sencillo por lo que simplemente tendremos una clase para los usuarios.
<?php
/**
* Description of Usuarios
*
* @author Ivan
*/
class Usuario {
private $id;
private $nombre;
private $apellidos;
private $email;
private $edad;
private $telefono;
private $password;
private $password2='';
public function __construct($usuario,$nombre,$apellidos,$email,$edad,$telefono,$password='',$password2='') {
$this->id=$usuario;
$this->nombre=$nombre;
$this->apellidos=$apellidos;
$this->email=$email;
$this->edad=$edad;
$this->telefono=$telefono;
$this->password=$password;
$this->password2=$password2;
}
public function getId(){
return $this->id;
}
public function getEmail(){
return $this->email;
}
public function getNombre(){
return $this->nombre;
}
public function getApellidos(){
return $this->apellidos;
}
public function getEdad(){
return $this->edad;
}
public function getTelefono(){
return $this->telefono;
}
public function getPassword(){
return $this->password;
}
public function getPassword2(){
return $this->password2;
}
}
?>
Sistema de validación
El nucleó de un sistema de validación son las funciones que permiten registrar los usuarios y validar que las credenciales introducidas son correctas, además de estas dos funciones esenciales tenemos otras dos funciones para validar que los datos del formulario de registro son correctos y que el nombre de usuario elegido no esta siendo usado ya.
<?php
include_once './modelo/Usuario.php';
include_once 'validadorFormularios.php';
/**
* Clase para gestionar las operaciones con los usuarios en la base de datos.
*
* @author Ivan
*/
class GestorUsuarios {
private $mysqli;
public function __construct($conexion){
$this->mysqli = $conexion;
}
/**
* Comprueba si todos los datos del usuario son validos.
*
* @param type $usuario Usuario que se quiere validar.
* @return boolean
*/
public function validarUsuario($usuario){
$validador = new validadorFormularios();
return (
$validador->validarNombreUsuario($usuario->getId()) &
$validador->validarNombre($usuario->getNombre()) &
$validador->validarApellidos($usuario->getApellidos()) &
$validador->validarEmail($usuario->getEmail()) &
$validador->validarEdad($usuario->getEdad()) &
$validador->validarTelefono($usuario->getTelefono()) &
$validador->validarPassword($usuario->getPassword()) &
$validador->validarPasswordIguales($usuario->getPassword(), $usuario->getPassword2()) &
!$this->existeUsuario($usuario->getId())
);
}
/**
* Añade el usuario a la base de datos.
*
* @param type $usuario El usuario que se quiere añadir a la base de datos.
* @return boolean
*/
public function insertarUsuario($usuario){
// mysqli_real_escape_string -> Escapa caracteres especiales en la cadena dada.
$consulta = sprintf("INSERT INTO usuarios (id, nombre, apellidos, email, edad, telefono, password) VALUES ('%s','%s','%s','%s','%d','%d','%s')",
$this->mysqli->real_escape_string($usuario->getId()),
$this->mysqli->real_escape_string($usuario->getNombre()),
$this->mysqli->real_escape_string($usuario->getApellidos()),
$this->mysqli->real_escape_string($usuario->getEmail()),
$this->mysqli->real_escape_string($usuario->getEdad()),
$this->mysqli->real_escape_string($usuario->getTelefono()),
// Encripta la password usando primero sha1 y al resultado concatenado con el usuario le aplica md5.
$this->mysqli->real_escape_string(md5(sha1($usuario->getPassword()).$usuario->getId()))
);
// Se ejecuta la consulta.
$this->mysqli->query($consulta);
// Se comprueba que si se ha insertado.
if(!$this->mysqli->affected_rows){
die("<h3>Error: No se ha podido insertar el usuario en la base de datos.</h3>");
return false;
}
else{
return true;
}
}
/**
* Comprueba si existe algun usuario con el id pasado por parametro.
*
* @param type $id Identidicador del usuario.
*
* @return boolean
*/
public function existeUsuario($id){
$consulta = sprintf("SELECT id FROM usuarios WHERE id='%s'",
$this->mysqli->real_escape_string($id)
);
$result = $this->mysqli->query($consulta);
if ($this->mysqli->affected_rows){
// Si el usuario existe, forzamos la validacion del nombre de usuario para que falle,
// y se indique de igual forma que si asi hubiese sido.
$validador = new validadorFormularios();
$validador->validarNombreUsuario('-');
$result->free();
return true;
}
else{
$result->free();
return false;
}
}
/**
* Comprueba si existe algun usuario con los datos pasados como parametros.
*
* @param type $id Id del usuario.
* @param type $pass Pass del usuario.
* @return boolean
*/
public function comprobarUsuario($id,$pass){
$consulta = sprintf("SELECT id, password FROM usuarios WHERE id='%s' AND password='%s'",
$this->mysqli->real_escape_string($id),
$this->mysqli->real_escape_string(md5(sha1($pass).$id))
);
$result = $this->mysqli->query($consulta);
$row = $result->fetch_array();
if ($this->mysqli->affected_rows){
$result->free();
return true;
} else {
$result->free();
return false;
}
}
}
?>
Estas funciones son bastante sencillas por lo que no debería haber mayor problema para entender como funcionan pero por si acaso vamos a ver los detalles que merece la pena comentar para que quede claro que es lo que estamos haciendo.
La función validarUsuario($usuario) simplemente hace uso de las funciones de la clase validadorFormularios que veremos posteriormente para tener en un único lugar todas las validaciones juntas y que se puedan hacer todas las validaciones llamando a una sola función. (Esta función se usa en formulario_registro.php)
En la función insertarUsuario($usuario) se hace así de sprintf() para generar cadenas con formato y de este modo nos aseguramos de que en cada campo estamos metiendo el tipo de dato que realmente necesitamos (%d => numero, %s => cadena texto) y también se usa la función real_escape_string que escapa caracteres especiales en la cadena dada para evitar problemas aunque al validar los campos el único que supuesta mente podría darlos es la contraseña por que el resto tienen controlados los caracteres que se pueden insertar, pero mejor pasarse que quedarse cortos. Finalmente vamos a ver la forma en la que se encripta la contraseña:
- Contatenamos la contraseña y nombre de los usuarios para que la cadena ha desencriptar ea más larga y más compleja.
- Ciframos la contraseña mediante sha1.
- Volvemos a cifrarlo usando md5, para hacerlo un poco más dificil.
La función para comprobar si existe un usuario no tiene nada de especial porque solo
Y finalmente referente a la función comprobarUsuario($id,$pass) recordar que las contraseñas nunca se desencriptan, sino que cuando se quiere comprobar si una contraseña es correcta lo que se hace es volver a cifrarla y comparar que el resultado cifrado es el mismo.
Por ultimo vamos a ver las funciones de validación en PHP que son prácticamente iguales que las vistas para javascript y de hecho dentro de estas funciones se ejecutan esas funciones javaScript para que la se muestre la parte visual de estas validaciones.
<?php
/**
* Clase para validar los distintos campos de los formularios de registro.
*
* @author Ivan
*/
class validadorFormularios {
function validarNombreUsuario ($usuario){
echo '<script> validarNombreUsuario("'.$usuario.'") </script>';
return (preg_match('/^[a-zA-Z0-9_-]{4,15}$/', $usuario));
}
function validarEmail ($email){
echo '<script> validarEmail("'.$email.'") </script>';
return (preg_match('/^[a-zA-Z]+([\.]?[a-zA-Z0-9_-]+)*@[a-z0-9]+([\.-]+[a-z0-9]+)*\.[a-z]{2,4}$/', $email));
}
function validarNombre ($nombre){
echo '<script> validarNombre("'.$nombre.'") </script>';
return (($nombre=="")||(preg_match('/^[a-zA-Z áéíóúüÁÉÍÓÜÚ]{4,15}$/', $nombre)));
}
function validarApellidos ($apellidos){
echo '<script> validarApellidos("'.$apellidos.'") </script>';
return (($apellidos=="")||(preg_match('/^[a-zA-Z áéíóúüÁÉÍÓÜÚ]{4,15}$/', $apellidos)));
}
function validarEdad ($edad){
echo '<script> validarEdad("'.$edad.'") </script>';
return ((preg_match('/^[0-9]{1,3}$/', $edad))&&($edad<150)&&($edad>5));
}
function validarTelefono ($telefono){
echo '<script> validarTelefono("'.$telefono.'") </script>';
return (isset($telefono)||(preg_match('/^[a-zA-Z ]{4,15}$/', $telefono)));
}
function validarPassword ($password){
echo '<script> validarPassword("'.$password.'") </script>';
return (strlen($password)>=4);
}
function validarPasswordIguales ($password, $password2){
echo '<script> validarPasswordIguales("'.$password.'","'.$password2.'") </script>';
return ($password == $password2);
}
}
?>
Ya tenemos todo lo necesario para poder registrar usuarios y para permitir que se autentifiquen pero nos falta lo más importante que no es otra cosa que restringir el acceso a las páginas que queramos que solo puedan acceder los usuarios autentificados y es tan sencillo como comprobar que existe la variable id en $_SESSION cosa que solo sucede cuando el usuario esta previamente logeado, se guarda en login.php cuando los datos introducidos en el formulario de login son correctos.
La siguiente página nos sirve como ejemplo de que el usuario esta logeado y recuperamos los datos del usuario que habíamos guardado en la sesión (el usuario y la contraseña) y si no esta logeado le redirigimos al formulario de login.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<?php
session_start();
// Se comprueba si ya se habia iniciado la sesion.
if (isset($_SESSION['id'])) {
echo 'Sesion iniciada correctamente.<br />';
echo 'Usuario: '.$_SESSION['id'].'<br />';
echo 'Password: '.$_SESSION['password'].'<br />';
} else {
header("Location:formulario_login.php");
}
?>
</body>
</html>
Aunque esta forma de actuar esta bien es más sencillo invertir el if y de este modo no tenemos que incluir el contenido de la pagina dentro del if.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<?php
session_start();
// Se comprueba si ya se habia iniciado la sesion.
if(!isset($_SESSION['id'])){
header("Location:formulario_login.php");
}
?>
<article>
<h1>Titulo</h1>
<p>Este texto solo lo pueden leer si eres un usuario autentificado</p>
</article>
</body>
</html>
Para terminar como siempre puedes descargarte el código completo de este ejemplo desde este enlace.
Increible… sos un genio, la verdad hace 5 horas estaba tratando de hacerlo con otros tutoriales y no conseguia lo que quería… Muchisimas gracias, el mundo es mejor con gente como vos.
de donde sacas la base de datos para la conexion?
Para hacer una conexion con la base de datos se hace con esto:
$conexion = new mysqli($servidor, $usuarioBD, $passwordBD, $baseDatos);
Y como hago la conexion en varios archivos distintos pues opte por meter el servidor, el usuario, la contraseña y el nombre de la base de datos en unas variables en un archivo a parte (config.php) para poder usarlo en cualquier lugar.
Pero si quieres puedes crear la conexion asi:
$conexion = new mysqli(«localhost», «yomismo», «123asd», «mibasededatos»);
pero creo que es mas sencillo y mas rapido cambiar los datos en el archivo config.php
pero la base de datos osea no en la conexion si no en el mysql! de donde la sacaste?
Pues la base de datos la creas con algun programa tipo MySQL Workbench que esta bastante bien, o con phpMyAdmin o con lo que tu quieras, por ejemplo si estas en local y estas usando xamp o wampserver en http://localhost/phpmyadmin/ en la pestaña bases de datos tienes la opcion Crear nueva base de datos para crear una bd.
Espero que sea eso y que te sirva.
mmmm si algo si no maso pensaba en el archivo staba la base de datos! pero grax sta xvreee!!! 🙂
Logout?
Me sale este error al registrar.
Warning: require(modelo/usuario.php): failed to open stream:
Ese error es porque no tienes el directorio modelo con el archivo usuario.php en la misma ruta que la pagina que te lanza el error
el problema en ese error es que en el código lo pide usuarios.php y el archivo real es Usuarios.php en el código solo cambia la u por mayúscula y queda para cerrar sesion tengo problemas
Hola, he creado una base de datos reg con una tabla usuarios. PEro al intentar insertar un nuevo usuario me sale esto (imagen) y no funciona donde puede estar el error.
CREATE TABLE IF NOT EXISTS `usuarios` (
`id` varchar(15) NOT NULL,
`nombre` varchar(20) DEFAULT NULL,
`apellidos` varchar(30) DEFAULT NULL,
`email` varchar(30) NOT NULL,
`edad` tinyint(3) NOT NULL,
`telefono` mediumint(9) DEFAULT NULL,
`password` varchar(32) NOT NULL,
`usuario` varchar(40) NOT NULL,
`password2` varchar(40) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Pero me pongo en luevo usuario (registrarse)
bgnumis no has creado la base de datos
No encontré el insert al momento de registrar el usuario y al hacerlo no muestra ningun error, pero no lo inserta tampoco
Hola, Gran tutorial!!!
Tengo una duda: ¿Sería posible que el
sistema de usuarios aceptara en el login tanto el usuario como el
e-mail? Y en caso de ser así: ¿Me podrías orientar sobre los cambios que
tendría que hacer?
Gracias!!!
Si, no hay problema simplemente cambia la consulta para comprobar el usuario
de la funcion comprobarUsuario($id,$pass) para que compare tambien con el email (SELECT id, password FROM usuarios WHERE (id=’%s’ OR email=’%s’) AND password=’%s'») y pasas el mismo valor para usuario y email y listo.
Tambien tienenes que eliminar el id al hacer el cifrado de la password al insertar y al comprobar porque ya no sera fijo y si no funcionara y creo que nada mas.
Muchisimas gracias!!
He hecho lo que me comentabas y funciona perfecto!
De verdad que has hecho un gran trabajo con este tutorial y… con el soporte técnico que me has dado!!
Ya soy fan tuyo
Mi estimado y fino amigo Iván. Antes que nada un excelente tutorial y muy completo además. Sólo tengo un pequeño error. Ya todo el código lo tengo super comprobado y me registra los datos muy bien en la base de datos de mi localhost solo que no me está dejando logear y cada vez que me registro con los mismos datos se registran y me permite hacer esto con los mismos datos pero no me pasa del login me sale usuario o password incorrectos. ¿Puedes ayudarme por favor? …
Si al registrarse se guardan los datos bien no deberia de haber ningun problema al hacer login el problema puede ser que no se este guardando bien la contraseña.
Comprueba los valores que se pasan en la funcion comprobarUsuario y los que hay guardados en bd por si son distintos y que la longitud del campo de la contraseña sea de 32 porque si no te va a cortar la contraseña.
Estimado Iván ya comprobé la base de datos y si me registra correctamente la información. Mi problema es que termino la sesión y no se borran los datos del registro y por otro lado en el formulario login ingreso el usuario y password y me sale error. ¿Podrías enviarme el código completo a gsc_180360@hotmail.com? Te lo agradecería infinitamente y por cierto muchas gracias por tus finas atenciones y tu seriedad al respecto.
Al final del post hay un enlace para descargar el codigo completo, dale a saltar la publicidad y ya lo puedes descargar
gracias muy amable busque algo asi por todos lados, aprendere de todo esto
no logro ingresar ya he hecho mi base de datos lo puse la contra igual y me bota error