Sistema de Login

En este tutorial desarrollaremos y explicaremos un sistema de autentificación de usuarios, este

tipo de sistemas se utilizan para limitar el acceso a ciertas páginas de nuestro sitio Web.

1. tabla en MySQL
Vamos a comenzar preparando una tabla en nuestra base de datos, la cual almacenara la
información de los usuarios, para crear la tabla simplemente copia y ejecuta la siguiente consulta
SQL:

1 CREATE TABLE `usuarios` (

2 `idusuario` INT(11) NOT NULL AUTO_INCREMENT,
3 `usuario` VARCHAR(20) NOT NULL,
4 `password` VARCHAR(10) NOT NULL,
5 PRIMARY KEY (`idusuario`)
)
6

2. Conectando a MySQL en PHP

Ya una vez que tengamos la estructura de nuestra tabla, creamos un archivo
llamado conexion.php.

1 <?php
2 // datos para la coneccion a mysql
3 define('DB_SERVER','localhost');
4 define('DB_NAME','TU_BASE_DE_DATOS');
5 define('DB_USER','TU_USUARIO');
define('DB_PASS','TU_CLAVE');
6
La funcion define como su nombre lo dice, se usa para definir una constante nominada, que nos
permite almacenar valores escalares(string, integer, float, boolean y nulos).

1 $con = mysql_connect(DB_SERVER,DB_USER,DB_PASS);
2 mysql_select_db(DB_NAME,$con);
3 ?>

La función de mysql_connect nos servira para abrir una conexión al servidor de MySQL usando
los 3 parámetros que declaramos anteriormente. Luego mysql_select_db selecciona la base de
datos usando 2 parámetros, el nombre de la base de datos y la conexión a usar.

Código completo
1 <?php
2 // datos para la conexion a mysql
3 define('DB_SERVER','localhost');
define('DB_NAME','TU_BASE_DE_DATOS');
4 define('DB_USER','TU_USUARIO');
5 define('DB_PASS','TU_CLAVE');
6 $con = mysql_connect(DB_SERVER,DB_USER,DB_PASS);
7 mysql_select_db(DB_NAME,$con);
8 ?>

1
9

3. logout.php
Creamos un archivo que se llame logout.php para que realice el cierre de sesión.

1 <?php
2 session_start();
3 session_destroy();
4
5 header('location: index.php');
?>
6
La funcion de session_destroy() destruye toda la información registrada de una variable de sesión,
luego el header(‘location: index.php’) redireccionara al usuario al index.php

4. index.php
Ahora pasamos el archivo index.php, el cual contendrá el formulario de login y al mismo tiempo el
mensaje de bienvenida o de error.

1 <?php
2 session_start();
3 include_once "conexion.php";

session_start() crea una sesión para ser usada mediante una petición GET o POST, o pasado por
una cookie y la sentencia include_once es la usaremos para incluir el archivo de conexión a la
base de datos que creamos anteriormente.

Función verificar_login()
Vamos a crear una función llamada verificar_login, esta se encargara de hacer una consulta a la
base de datos para saber si el usuario ingresado es correcto o no.

1
2
function verificar_login($user,$password,&$result)
3 {
4 $sql = "SELECT * FROM usuarios WHERE usuario='$user' and password='$password'";
5 $rec = mysql_query($sql);
6 $count = 0;
7 while($row = mysql_fetch_object($rec))
{
8 $count++;
9 $result = $row;
10 }
11 if($count == 1)
{
12 return 1;
13 }
14 else
15 {
16 return 0;
}
17 }
18
19

2
Luego haremos una serie de condicionales que identificaran el momento en el boton de login es
presionado y cuando este sea presionado llamaremos a la función verificar_login() pasandole los
parámetros ingresados:

1
2
3 if(!isset($_SESSION['userid']))
4 {
5 if(isset($_POST['login']))
{
6
if(verificar_login($_POST['user'],$_POST['password'],$result) == 1)
7 {
8 $_SESSION['userid'] = $result->idusuario;
9 header("location:index.php");
10 }
else
11 {
12 echo '<div class="error">Su usuario es incorrecto, intente nuevamente.</div
13 }
14 }
15 ?>
<form action="" method="post" class="login">
16 <div><label>Username</label><input name="user" type="text" ></div>
17 <div><label>Password</label><input name="password" type="password"></div>
18 <div><input name="login" type="submit" value="login"></div>
19 </form>
<?php
20 } else {
21 echo 'Su usuario ingreso correctamente.';
22 echo '<a href="logout.php">Logout</a>';
23 }
24 ?>
25
26

 Linea 1: La primera condición es para saber si existe o no ya la variable de sesión que se

va a crear cuando el usuario se logee
 Linea 3: Si la primera condición no pasa, haremos otra preguntando si el boton de login fue
presionado
 Linea 5: Si el boton fue presionado llamamos a la función verificar_login() dentro de otra
condición preguntando si resulta verdadero y le pasamos los valores ingresados como
parámetros.
 Linea 7 y 8: Si el login fue correcto, registramos la variable de sesión y al mismo tiempo
refrescamos la pagina index.php.
 Linea 12: Si la función verificar_login() no pasa, que se muestre un mensaje de error.
 Linea 22: Si la variable de sesión ‘userid’ ya existe, que muestre el mensaje de saludo.

Decoración opcional con CSS

Esta parte es opcional ya que no influye en nada en el funcionamiento del sistema, es unicamente
decorativa:
*{
1 font-size: 14px;
2 font-family: sans-serif;
3
3 }
4 form.login {
background: none repeat scroll 0 0 #F1F1F1;
5 border: 1px solid #DDDDDD;
6 margin: 0 auto;
7 padding: 20px;
8 width: 278px;
}
9 form.login div {
10 margin-bottom: 15px;
11 overflow: hidden;
12 }
13 form.login div label {
display: block;
14 float: left;
15 line-height: 25px;
16 }
17 form.login div input[type="text"], form.login div input[type="password"] {
border: 1px solid #DCDCDC;
18 float: right;
19 padding: 4px;
20 }
21 form.login div input[type="submit"] {
22 background: none repeat scroll 0 0 #DEDEDE;
border: 1px solid #C6C6C6;
23 float: right;
24 font-weight: bold;
25 padding: 4px 20px;
26 }
27 .error{
color: red;
28 font-weight: bold;
29 margin: 10px;
30 text-align: center;
31 }
32
33
34
35
36
37
38

Código completo
<?php

session_start();

include_once "conexion.php";

function verificar_login($user,$password,&$result) {

$sql = "SELECT * FROM usuarios WHERE usuario = '$user' and password = '$password'";

$rec = mysql_query($sql);

$count = 0;

4
 while($row = mysql_fetch_object($rec))

$count++;

$result = $row;

if($count == 1)

return 1;

else

return 0;

if(!isset($_SESSION['userid']))

if(isset($_POST['login']))

if(verificar_login($_POST['user'],$_POST['password'],$result) == 1)

$_SESSION['userid'] = $result->idusuario;

header("location:index.php");

else

echo '<div class="error">Su usuario es incorrecto, intente

nuevamente.</div>';

?>

5
<style type="text/css">

*{

font-size: 14px;

form.login {

background: none repeat scroll 0 0 #F1F1F1;

border: 1px solid #DDDDDD;

font-family: sans-serif;

margin: 0 auto;

padding: 20px;

width: 278px;

form.login div {

margin-bottom: 15px;

overflow: hidden;

form.login div label {

display: block;

float: left;

line-height: 25px;

form.login div input[type="text"], form.login div input[type="password"] {

border: 1px solid #DCDCDC;

float: right;

padding: 4px;

form.login div input[type="submit"] {

background: none repeat scroll 0 0 #DEDEDE;

border: 1px solid #C6C6C6;

float: right;

font-weight: bold;

padding: 4px 20px;

6
}

.error{

color: red;

font-weight: bold;

margin: 10px;

text-align: center;

</style>

<form action="" method="post" class="login">

<div><label>Username</label><input name="user" type="text" ></div>

<div><label>Password</label><input name="password" type="password"></div>

<div><input name="login" type="submit" value="login"></div>

</form>

<?php

} else {

echo 'Su usuario ingreso correctamente.';

echo '<a href="logout.php">Logout</a>';

?>