Te damos la bienvenida a la comunidad de T!Estás a un paso de acceder al mejor contenido, creado por personas como vos.

O iniciá sesión con
¿No tenés una cuenta?
Crear un Sistema de Login de usuarios en PHP con MySQL




Hola a todas y todos en este tutorial desarrollaremos y explicaremos un sistema de autentificacion de usuarios, este tipo de sistemas se utilizan para limitar el acceso a ciertas paginas de nuestro sitio Web.



1. Preparando una tabla en MySQL

Esto se puede hacer desde la consola de MySQL, creamos una base de datos(si es que no la tenemos) con el comando create database miBaseDeDatos; luego la selecciónamos con use miBaseDeDatos; , una vez dentro de la base de datos proseguimos.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:


CREATE TABLE `usuarios` (
  `idusuario` INT(11) NOT NULL AUTO_INCREMENT,
  `usuario` VARCHAR(20) NOT NULL,
  `password` VARCHAR(10) NOT NULL,
  PRIMARY KEY  (`idusuario`)
)


2. Conectando a MySQL en PHP

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

<?php
// datos para la coneccion a mysql
define('DB_SERVER','localhost');
define('DB_NAME','TU_BASE_DE_DATOS');
define('DB_USER','TU_USUARIO');
define('DB_PASS','TU_CLAVE');

$con mysql_connect(DB_SERVER,DB_USER,DB_PASS);
mysql_select_db(DB_NAME,$con);
?>

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) y su estructura es: define(CONSTANTE,VALOR);

La función de mysql_connect('ServidorMySQL','Usuario','Pass') 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.


3. logout.php

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

<?php
    session_start
();
    
session_destroy();
 
    
header('location: index.php');
?>


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.


<?php
session_start
(); //session_start() crea una sesión para ser usada mediante una petición GET o POST, o pasado por una cookie 
include_once "conexion.php"//es la sentencia q 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.*/

function verificar_login($user,$password,&$result)
    {
        
$sql “SELECT FROM usuarios WHERE usuario ‘$user’ and ‘$password’ ‘$password’”;
        
$rec mysql_query($sql);
        
$count 0;
        while(
$row mysql_fetch_object($rec))
        {
            
$count++;
            
$result $row;
        }
        if(
$count == 1)
        {
            return 
1;
        }
        else
        {
            return 
0;
        }
    }

/*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:*/

if(!isset($_SESSION['userid'])) //para saber si existe o no ya la variable de sesión que se va a crear cuando el usuario se logee
{
    if(isset(
$_POST['login'])) //Si la primera condición no pasa, haremos otra preguntando si el boton de login fue presionado
    
{
        if(
verificar_login($_POST['user'],$_POST['password'],$result) == 1//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.
        
{
            
/*Si el login fue correcto, registramos la variable de sesión y al mismo tiempo refrescamos la pagina index.php.*/
            
$_SESSION['userid'] = $result->idusuario;
            
header("location:index.php");
        }
        else
        {
            echo 
'<div class="error">Su usuario es incorrecto, intente nuevamente.</div>'//Si la función verificar_login() no pasa, que se muestre un mensaje de error.
        
}
    }
?>
<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 {
    
// Si la variable de sesión ‘userid’ ya existe, que muestre el mensaje de saludo.
    
echo 'Su usuario ingreso correctamente.';
    echo 
'<a href="logout.php">Logout</a>';
}
?>


Decoración opcional con CSS...

Esta parte es opcional ya que no influye en nada en el funcionamiento del sistema, es unicamente decorativa:

*{
    font-size: 14px;
    font-family: sans-serif;
}
form.login {
    background: none repeat scroll 0 0 #F1F1F1;
    border: 1px solid #DDDDDD;
    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;
}
.error{
    color: red;
    font-weight: bold;
    margin: 10px;
    text-align: center;
}


Así quedaría el archivo index.php

<?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;
 
    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>';
        }
    }
?>
 
<style type="text/css">
*{
    font-size: 14px;
}
body{
background:#aaa;
}
form.login {
    background: none repeat scroll 0 0 #F1F1F1;
    border: 1px solid #DDDDDD;
    font-family: sans-serif;
    margin: 0 auto;
    padding: 20px;
    width: 278px;
    box-shadow:0px 0px 20px black;
    border-radius:10px;
}
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;
}
.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>';
}
?>



Sígueme y entérate de todos mis aportes!







Te gusta el diseño web?... Únete! --> Diseño Web Pro