Bienvenid@s taringueros de America y del Mundo a este post!!!
En esta ocasión veremos como realizar un sistema de registro y login para nuestro sitio web.
Para ello nos valdremos de un lenguaje ejecutado en el servidor, PHP.
PHP a diferencia de HTML que se ejecuta del lado del cliente (browser) es ejecutado en el server donde se encuentra alojado nuestro sitio,permitiendo a nuestros visitantes acceder a un contenido mas dinamico, accediendo o subiendo archivos y/o a datos de una bases de datos.
Para comenzar a codificar e ir probando nuestra página es necesario contar con un localhost, en mi caso uso WampServer pueden descargarlo desde aquí .
Detalles de instalación en phpya.com.ar
Para la correcta instalación de WampServer se debe contar con la librería Microsoft Visual C++ 2010 SP1 la cual puedes descargar aquí .
Para realizar el código basta con un simple editor de texto, incluso un block de notas de windos, pero para hacer mas sencillo el trabajo podemos valernos de un editor de código como dreamweaver o algo así, yo en lo personal uso notepad++:
Notepad++ v6.5.3 download
Ademas de trabajar con scripts PHP vamos a necesitar una base de datos, en este caso WampServer incluye todo lo necesario para nuestra tarea, servidor apache soporte para PHP y manejador MySql.
WampServer crea por defecto un directorio en nuestro sistema:
C:/wamp/www
Y en la carpeta www es donde crearemos nuestros archivos a ejecutar de manera local.
Una vez instalado el WampServer e iniciado, procedemos a crear una base de datos en nuestro sistema, para ingresar al administrador debemos clickear en el icono que se instala en la barra de tareas:
y acceder a la opción php my admin:
Y se abrirá en nuestro navegador el manejador de base de datos MySql:
Allí lo que hacemos es crear una nueva base de datos con el nombre que mas nos guste:
Bien, a esta altura la base de datos está creada pero necesita tener una estructura, y para eso solo crearemos tres campos en este caso, uno será un numero de id, otro el usuario (que puede ser la direccion de mail y un password para la seguridad del usuario).
Para esto ingresamos en la parte de lenguaje sql:
Este es el script sql:
"
CREATE TABLE `usuarios` (
`id` INT( 11 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`mail` VARCHAR( 60 ) NOT NULL ,
`password` VARCHAR( 60 ) NOT NULL
)
Y nuestra base de datos está pronta:
Bien, por ahora el trabajo con la base de datos está pronto, vamos a codificar el documento .php, yo lo que hice fué crear un directorio llamado "taringaprueba" ubicado en la carpeta www:
Yo usualmente uso Notepad++, donde creo un nuevo documento y selecciono como lenguaje php para resaltar la sintáxis:
Y allí podemos comenzar creando la estructura básica de un documento HTML (aunq sea un php) y le llamo index y lo guardo en la carpeta que creé antes:
Para probar el servidor podemos hacer un clásico hola mundo:
Nótese que el script php está "inyectado" o "embebido" dentro de una estructura html y que la forma de identificar un script o un documento php es de esta manera (aunq para embeber hay otras):
"
"<?php
?>
Para ejecutar el archivo php deben cambiar la ruta absoluta por "localhost":
Lo primero que haremos será crear una página index tipo "home" de prueba.
En el caso de que ustedes quieran editar luego su página para agregar el sistema deberían copiar todo el código html de su página y pegarlo en un nuevo documento php y luego referenciar a este último.
Para probar hice primero una index de prueba y aparte un directorio css y dentro un estilo para estética que agrego en el php (como cualquier css externo), un encabezado con un texto y un par de imágenes:
"
<!DOCTYPE html>
<html>
<head>
<title>php_prueba</title>
<link rel="stylesheet" style=text/css href="css/estilo.css">
</head>
<body>
<header>
<h1 class="headtype">@diazespina<h1>
<img class="logoimage"src ="http://sia1.subirimagenes.net/img/2014/01/24/14012407263823065.png" width="120" height="100">
<img class="logoimage"src ="http://userlogos.org/files/logos/jumpordie/taringa-iphone_01.png" width="130" height="100">
</header>
</body>
</html>
el css:
"
header{
position:absolute;
width:100%;
height:170px;
background:#08088A;
vertical-align: middle;
line-height: 0px;
text-align:center;
opacity:0.8;
left:0;
top:0;
}
.headtype{
font-size:400%;
font-family:"Verdana", Geneva, sans-serif;
text-shadow:2px 2px #47477E;
}
body{
background:#CED8F6;
}
img{
margin-top:-15px;
}
creamos dos links,uno para registrarnos y otro para loguearnos en el caso de que ya estemos registrados, pero lo haremos dentro de un script php para luego dependiendo de si el visitante está logueado o no mostrarle distintas opciones:
"
<!DOCTYPE html>
<html>
<head>
<title>php_prueba</title>
<link rel="stylesheet" style=text/css href="css/estilo.css">
</head>
<body>
<header>
<h1 class="headtype">@diazespina<h1>
<img class="logoimage"src ="http://sia1.subirimagenes.net/img/2014/01/24/14012407263823065.png" width="120" height="100">
<img class="logoimage"src ="http://userlogos.org/files/logos/jumpordie/taringa-iphone_01.png" width="130" height="100">
</header>
<nav id ="enlaces">
"<?php
echo"
<ul>
<li>
<a href='#'>Registrate</a>
</li>
<li>
<a href='#'>Ingresa</a>
</li>
</ul>
"
?>
</nav>
</body>
</html>
css:
"
#enlaces{
position:absolute;
top:200px;
font-size:200%;
}
#enlaces a{
color:gray;
text-decoration:none;
}
#enlaces a:visited{
color:gray;
text-decoration:none;
}
#enlaces a:hover{
color:black;
}
#enlaces ul{
list-style-type:none;
}
Ahora debemos crear dos formularios, uno de registro y uno de ingreso, vamos al de registro, que será un nuevo documento tipo HTML que tendrá por nombre "reg-form.html"
"
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" style=text/css href="css/estilo.css">
</head>
<body>
<header>
<h1 class="headtype">@diazespina<h1>
<img class="logoimage"src ="http://sia1.subirimagenes.net/img/2014/01/24/14012407263823065.png" width="120" height="100">
<img class="logoimage"src ="http://userlogos.org/files/logos/jumpordie/taringa-iphone_01.png" width="130" height="100">
</header>
<div id="formulario_registro">
<form method="post" class="signin" action="registro.php">
<fieldset class="textbox">
<label class="username">
<span>Email</span>
<input id="username" name="email" value="" type="text" autocomplete="on" placeholder="Usuario" required>
</label>
<label class="password">
<span>Contraseña</span>
<input id="password" name="password" value="" type="password" placeholder="Contraseña" required>
</label>
<input type="submit" id="go" value="Enviar">
<input type="button" id="cancel"value="Cancel" onClick="window.location.href='index.php'">
</fieldset>
</form>
</div>
</body>
</html>
el css:
"
#formulario_registro{
position:absolute;
top:200px;
width:200px;
height:140px;
margin: 0 auto;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
background:gray;
}
#go{
color:green;
}
#cancel{
color:orange;
}
Vista:
Y cambiamos la referencia en la lista de la index:
"
"<?php
echo"
<ul>
<li>
<a href='reg_form.html'>Registrate</a>
</li>
<li>
<a href='#'>Ingresa</a>
</li>
</ul>
";
"?>
El formulario referencia como método
"action=""
a un archivo php que hará la conexión a la base de datos y guardará el nuevo dato en ella:
"
action="registro.php"
Lo que hace es enviar los datos a ese archivo, vamos a ver el código de registro.php:
"
"<?php
session_start();
//Variables de conexion a la base de datos
"$host="localhost";" // Nombre del host
"$username="root";" // usuarioMysql
"$password="";" // password Mysql
"$db_name="mibase";" // Nombre de la BD
"$tbl_name="usuarios";" // Nombre d ela tabla
"mysql_connect(""$host"," ""$username"," ""$password")//Conexión
"or die("cannot connect");" //En caso de error
"mysql_select_db(""$db_name")//seleccion de base de datos
"or die("cannot select DB");//en caso de error
//Variables que toman valor de lo enviado desde el form
"$email="$_POST['email'];
"$password="$_POST['password'];
"if ("filter_var("$email," FILTER_VALIDATE_EMAIL))" {//Filtro de validación de mail
" $sql="select mail from usuarios where mail ='"$email'";//SEleccionamos la lista completa del campo usuarios
"$result="mysql_query("$sql);
"$count="mysql_num_rows("$result);
if("$count>"0){//Si ya existe un usuario con ese mail
echo("<center>
<h1><font color='red'>El usuario<br><font color='blue'> "$email<br><font color='red'>ya existe!<br><a href='index.php'>Inicio</a>");
}else{//Si el usuario no existe
"$sql="INSERT INTO "$tbl_name (mail, password)VALUES( '"$email', '"$password')";
"$result="mysql_query("$sql);
if("$result){
" header("location:index.php");//Si todo es correcto redireccionamos a la index
}"else {
"echo "ERROR MySql";
}
// cerramos la conexión
"mysql_close();
}
}else{
echo"<center>
<h1><font color='red'>Error el mail ingresado no es válido<br><a href='index.php'>Inicio</a>";
}
"?>
Bien, a esta altura si el usuario se registra esos datos se irán almacenando en la Base de datos, y como el campo ID es autoincrementable nunca habrán dos usuarios con el mismo ID.
Ahora debemos hacer el formulario de login:
Para ello necesitaremos un HTML con el formulario en si mismo y un php que contendrá el código para la busqueda.
El formulario le he puesto por nombre: log_form
"
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" style=text/css href="css/estilo.css">
</head>
<body>
<header>
<h1 class="headtype">@diazespina<h1>
<img class="logoimage"src ="http://sia1.subirimagenes.net/img/2014/01/24/14012407263823065.png" width="120" height="100">
<img class="logoimage"src ="http://userlogos.org/files/logos/jumpordie/taringa-iphone_01.png" width="130" height="100">
</header>
<div id="formulario_registro">
<form method="post" class="signin" action="check_login.php">
<fieldset class="textbox">
<label class="username">
<span>Email</span>
<input id="username" name="email" value="" type="text" autocomplete="on" placeholder="Usuario" required>
</label>
<label class="password">
<span>Contraseña</span>
<input id="password" name="password" value="" type="password" placeholder="Contraseña" required>
</label>
<input class="boton" type="submit" id="go" value="Ingresar">
<input class="boton" type="button" id="cancel"value="Cancel" onClick="window.location.href='index.php'">
</fieldset>
</form>
</div>
</body>
</html>
Y el php que hará el login check_login.php:
"
"<?php
//Variables de conexion a la base de datos
"$host="localhost";" // Nombre del host
"$username="root";" // usuarioMysql
"$password="";" // password Mysql
"$db_name="mibase";" // Nombre de la BD
"$tbl_name="usuarios";" // Nombre de la tabla
// Conexion a la base de datos en si misma
"mysql_connect(""$host"," ""$username"," ""$password")"or die("no se puede conectar a la BD");"
mysql_select_db(""$db_name")"or die("no se pudo seleccionar la BD");
// username and password sent from form
"$myusername="$_POST['email'];"
$mypassword="$_POST['password'];"
$myusername =" stripslashes("$myusername);
"$mypassword =" stripslashes("$mypassword);
"$myusername =" mysql_real_escape_string("$myusername);
"$mypassword =" mysql_real_escape_string("$mypassword);
"$sql="SELECT * FROM "$tbl_name WHERE mail='"$myusername' and password='"$mypassword'";
"$result="mysql_query("$sql);
"$count="mysql_num_rows("$result);
if("$count=="1){
"session_register("myusername");
"session_register("mypassword");"
header("location:index.php");
}"else {
echo"<center>
<h1><font color='red'>Error, usuario o contraseña incorrectos<br>
<a href='index.php'>Inicio</a>";
}
"?>
Hasta aquí todo en orden, si nos logueamos, en la index modifiqué para que nos muestre que estamos logueados:
"
"<?php
session_Start();
"?>
<!DOCTYPE html>
<html>
<head>
<title>php_prueba</title>
<link rel="stylesheet" style=text/css href="css/estilo.css">
</head>
<body>
<header>
<h1 class="headtype">@diazespina</h1>
<img class="logoimage"src ="http://sia1.subirimagenes.net/img/2014/01/24/14012407263823065.png" width="120" height="100">
<img class="logoimage"src ="http://userlogos.org/files/logos/jumpordie/taringa-iphone_01.png" width="130" height="100">
</header>
<nav id ="enlaces">
"<?php
if(" !empty("$_SESSION['myusername'])" ){
" $usuario =" $_SESSION['myusername'];
" echo "<font color=gray>Logueado como:</font> <font color = blue>"$usuario</font><br>
<a href='#' ><font color = red>Logout</a></font>";
" }else{
echo"
<ul>
<li>
<a href='reg_form.html'>Registrate</a>
</li>
<li>
<a href='log_form.html'>Ingresa</a>
</li>
</ul>
";
" }
"
?>
</nav>
</body>
</html>
Capturas del proceso completo:
Para desloguear al usuario necesitamos un php llamado salida.php:
"
"<?php
session_start();
"session_unset();
"session_destroy();
"header("location:index.php");
exit();
"?>
Entonces el script de la index queda así:
<?php
session_Start(); //inicio de sesión
?>
<!DOCTYPE html>
<html>
<head>
<title>php_prueba</title>
<link rel="stylesheet" style="text/css" href="css/estilo.css">
</head>
<body>
<header>
<h1 class="headtype">@diazespina</h1>
<img class="logoimage"src ="http://sia1.subirimagenes.net/img/2014/01/24/14012407263823065.png" width="120" height="100">
<img class="logoimage"src ="http://userlogos.org/files/logos/jumpordie/taringa-iphone_01.png" width="130" height="100">
</header>
<nav id ="enlaces">
<?php
if( !empty($_SESSION['myusername']) ){//verificación de login
$usuario = $_SESSION['myusername'];
echo "<font color=gray>Logueado como:</font> <font color = blue>$usuario</font><br>
<a href='salir.php' ><font color = red>Logout</a></font>";
}else{
echo"
<ul>
<li>
<a href='reg_form.html'>Registrate</a>
</li>
<li>
<a href='log_form.html'>Ingresa</a>
</li>
</ul>
";
}
?>
</nav>
</body>
</html>
Y esta pronto!
Ejemplo completo y funcional:
http://diazespina.comli.com/php_taringa_prueba/php_example_index.php
Algunas salvedades:
1- Conforme releí el post lo edité un poco corrigiendo algunos errores y agregando comentarios.
2- En el caso de que quieran hacerlo con una base de datos en un server posta, obviamente los datos de conexión a la base de datos los cambian por los correspondientes (host, nombre de base nombre de tabla, usuario y password de la base).
3-Este es un post meramente didactico, y decidí hacerlo (como casi siempre me sucede) desde que yo necesité esta información y encontré mucha por ahí, incluso en taringa, pero la verdad ninguna me resultó sencilla de aplicar, así que este post es el resultado de una exhaustiva investigación personal que con gusto comparto con Uds.
4-Cuestiones a nivel de seguridad informática, no vienen al caso en este post, he visto comentarios que se refieren a ello, y mientras sean constructivos todos los comentarios son bienvenidos, pero insisto, esto es solo a nivel didáctico y no pretende ser un sistema para una base de datos del pentágono ni del area 51.
Insisto los comentarios que aportan, mas allá
de lo anterior, son mas que bienvenidos
5- Lamentablemente me vi obligado a subir el nivel de quien puede comentar, me dio pena porque yo quería que cualquiera pudiera comentar, pero me decepcioné con el nivel de pelotudez de flammers y trolls, asi que comentarios que no aporten nada y sean demasiado pelotudos, se van...
Como siempre dudas, comentarios, criticas y/o puntos bienvenidos, gracias por pasar!!!