logo

Crear un sistema de inicio de sesión genial con PHP, MySQL y jQuery

Introducción

Hoy estamos creando un sistema de inicio de sesión / registro genial y simple. Le dará la posibilidad de crear fácilmente un área exclusiva para miembros en su sitio y brindará un proceso de registro sencillo.

Será impulsado por PHP y almacenará todos los registros en una base de datos MySQL.

Para agregar el estilo necesario, estamos utilizando el increíble panel jQuery deslizante, desarrollado por Web-kreation.

Paso 1:MySQL

Primero tenemos que crear la tabla que contendrá todos los registros. Este código está disponible en table.sql .

tabla.sql

--
-- Table structure for table `tz_members`
--

CREATE TABLE `tz_members` (
  `id` int(11) NOT NULL auto_increment,
  `usr` varchar(32) collate utf8_unicode_ci NOT NULL default '',
  `pass` varchar(32) collate utf8_unicode_ci NOT NULL default '',
  `email` varchar(255) collate utf8_unicode_ci NOT NULL default '',
  `regIP` varchar(15) collate utf8_unicode_ci NOT NULL default '',
  `dt` datetime NOT NULL default '0000-00-00 00:00:00',
  PRIMARY KEY  (`id`),
  UNIQUE KEY `usr` (`usr`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Tenga en cuenta que hemos definido la identificación como un número entero con auto_increment - se asigna automáticamente a cada miembro del sitio. Además, hemos definido usr como una clave única - no se permiten dos usuarios con los mismos nombres de usuario.

Luego usamos esto en el registro para determinar si se ha tomado el nombre de usuario.

Después de crear la tabla, no olvide completar las credenciales de su base de datos en connect.php para que pueda ejecutar la demostración en su propio servidor.

Paso 2 - XHTML

Primero, tenemos que incorporar el formulario de Web-kreation a nuestra página.

demo.php

<!-- Panel -->
<div id="toppanel">

<div id="panel">
<div class="content clearfix">
<div class="left">
<h1>The Sliding jQuery Panel</h1>
<h2>A register/login solution</h2>
<p class="grey">You are free to use this login and registration system in you sites!</p>
<h2>A Big Thanks</h2>
<p class="grey">This tutorial was built on top of <a href="http://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery" title="Go to site">Web-Kreation</a>'s amazing sliding panel.</p>
</div>

<?php
if(!$_SESSION['id']):
// If you are not logged in
?>

<div class="left">
<!-- Login Form -->
<form class="clearfix" action="" method="post">
<h1>Member Login</h1>

<?php
if($_SESSION['msg']['login-err'])
{
    echo '<div class="err">'.$_SESSION['msg']['login-err'].'</div>';
    unset($_SESSION['msg']['login-err']);
    // This will output login errors, if any
}
?>

<label class="grey" for="username">Username:</label>
<input class="field" type="text" name="username" id="username" value="" size="23" />
<label class="grey" for="password">Password:</label>
<input class="field" type="password" name="password" id="password" size="23" />
<label><input name="rememberMe" id="rememberMe" type="checkbox" checked="checked" value="1" /> &nbsp;Remember me</label>
<div class="clear"></div>
<input type="submit" name="submit" value="Login" class="bt_login" />
</form>

</div>

<div class="left right">

<!-- Register Form -->

<form action="" method="post">
<h1>Not a member yet? Sign Up!</h1>

<?php

if($_SESSION['msg']['reg-err'])
{
    echo '<div class="err">'.$_SESSION['msg']['reg-err'].'</div>';
    unset($_SESSION['msg']['reg-err']);
    // This will output the registration errors, if any
}

if($_SESSION['msg']['reg-success'])
{
    echo '<div class="success">'.$_SESSION['msg']['reg-success'].'</div>';
    unset($_SESSION['msg']['reg-success']);
    // This will output the registration success message
}

?>

<label class="grey" for="username">Username:</label>
<input class="field" type="text" name="username" id="username" value="" size="23" />
<label class="grey" for="email">Email:</label>
<input class="field" type="text" name="email" id="email" size="23" />
<label>A password will be e-mailed to you.</label>
<input type="submit" name="submit" value="Register" class="bt_register" />
</form>

</div>

<?php
else:
// If you are logged in
?>

<div class="left">
<h1>Members panel</h1>
<p>You can put member-only data here</p>
<a href="registered.php">View a special member page</a>
<p>- or -</p>
<a href="?logoff">Log off</a>
</div>
<div class="left right">
</div>

<?php
endif;
// Closing the IF-ELSE construct
?>

</div>
</div> <!-- /login -->

<!-- The tab on top -->
<div class="tab">
<ul class="login">
<li class="left">&nbsp;</li>
<li>Hello <?php echo $_SESSION['usr'] ? $_SESSION['usr'] : 'Guest';?>!</li>
<li class="sep">|</li>
<li id="toggle">
<a id="open" class="open" href="#"><?php echo $_SESSION['id']?'Open Panel':'Log In | Register';?></a>
<a id="close" style="display: none;" class="close" href="#">Close Panel</a>
</li>
<li class="right">&nbsp;</li>
</ul>

</div> <!-- / top -->
</div> <!--panel -->

En varios lugares de este código, hay algunos operadores de PHP que comprueban si $_SESSION['usr'] o $_SESSION['id'] están definidos. Esto es cierto solo si el visitante de la página ha iniciado sesión en el sitio, lo que nos permite mostrar contenido específico a los miembros del sitio. Lo cubriremos en detalle en un momento.

Después del formulario, ponemos el resto de la página.

<div class="pageContent">

<div id="main">

<div class="container">
<h1>A Cool Login System</h1>
<h2>Easy registration management with PHP &amp; jQuery</h2>
</div>

<div class="container">
<p>This is a ...</p>
<div class="clear"></div>

</div>

</div>

Nada especial aquí. Continuemos con el backend de PHP.

Paso 3 - PHP

Es hora de convertir el formulario en un completo sistema de registro e inicio de sesión. Para lograrlo, necesitaremos más de la cantidad habitual de PHP. Dividiré el código en dos partes.

Si planea agregar más código, sería una buena idea dividirlo en varios archivos que se incluyen cuando sea necesario. Esto ayuda al desarrollo de grandes proyectos y permite la reutilización de código en diferentes partes de un sitio.

Pero veamos cómo lo hemos hecho aquí.

demo.php

define('INCLUDE_CHECK',true);

require 'connect.php';
require 'functions.php';

// Those two files can be included only if INCLUDE_CHECK is defined

session_name('tzLogin');
// Starting the session

session_set_cookie_params(2*7*24*60*60);
// Making the cookie live for 2 weeks

session_start();

if($_SESSION['id'] && !isset($_COOKIE['tzRemember']) && !$_SESSION['rememberMe'])
{
    // If you are logged in, but you don't have the tzRemember cookie (browser restart)
    // and you have not checked the rememberMe checkbox:

    $_SESSION = array();
    session_destroy();

    // Destroy the session
}

if(isset($_GET['logoff']))
{
    $_SESSION = array();
    session_destroy();
    header("Location: demo.php");
    exit;
}

if($_POST['submit']=='Login')
{
    // Checking whether the Login form has been submitted

    $err = array();
    // Will hold our errors

    if(!$_POST['username'] || !$_POST['password'])
        $err[] = 'All the fields must be filled in!';

    if(!count($err))
    {
        $_POST['username'] = mysql_real_escape_string($_POST['username']);
        $_POST['password'] = mysql_real_escape_string($_POST['password']);
        $_POST['rememberMe'] = (int)$_POST['rememberMe'];

        // Escaping all input data

        $row = mysql_fetch_assoc(mysql_query("SELECT id,usr FROM tz_members WHERE usr='{$_POST['username']}' AND pass='".md5($_POST['password'])."'"));

        if($row['usr'])
        {
            // If everything is OK login

            $_SESSION['usr']=$row['usr'];
            $_SESSION['id'] = $row['id'];
            $_SESSION['rememberMe'] = $_POST['rememberMe'];

            // Store some data in the session

            setcookie('tzRemember',$_POST['rememberMe']);
            // We create the tzRemember cookie
        }
        else $err[]='Wrong username and/or password!';
    }

    if($err)
        $_SESSION['msg']['login-err'] = implode('<br />',$err);
        // Save the error messages in the session

    header("Location: demo.php");
    exit;
}

Aquí el tzRemember La cookie actúa como un control si debemos cerrar la sesión de los usuarios que no han marcado la casilla de verificación "recordarme". Si la cookie no está presente (debido al reinicio del navegador) y el visitante no ha marcado la opción de recordarme, destruimos la sesión.

La sesión en sí se mantiene viva durante dos semanas (según lo establecido por session_set_cookie_params ).

Veamos la segunda parte de demo.php .

else if($_POST['submit']=='Register')
{
    // If the Register form has been submitted
    $err = array();

    if(strlen($_POST['username'])<4 || strlen($_POST['username'])>32)
    {
        $err[]='Your username must be between 3 and 32 characters!';
    }

    if(preg_match('/[^a-z0-9\-\_\.]+/i',$_POST['username']))
    {
        $err[]='Your username contains invalid characters!';
    }

    if(!checkEmail($_POST['email']))
    {
        $err[]='Your email is not valid!';
    }

    if(!count($err))
    {
        // If there are no errors
        $pass = substr(md5($_SERVER['REMOTE_ADDR'].microtime().rand(1,100000)),0,6);
        // Generate a random password

        $_POST['email'] = mysql_real_escape_string($_POST['email']);
        $_POST['username'] = mysql_real_escape_string($_POST['username']);
        // Escape the input data

        mysql_query("   INSERT INTO tz_members(usr,pass,email,regIP,dt)
                    VALUES(
                    '".$_POST['username']."',
                    '".md5($pass)."',
                    '".$_POST['email']."',
                    '".$_SERVER['REMOTE_ADDR']."',
                    NOW()
        )");

        if(mysql_affected_rows($link)==1)
        {
            send_mail(  '[email protected]',
                    $_POST['email'],
                    'Registration System Demo - Your New Password',
                    'Your password is: '.$pass);
                    $_SESSION['msg']['reg-success']='We sent you an email with your new password!';
        }
        else $err[]='This username is already taken!';
    }

    if(count($err))
    {
        $_SESSION['msg']['reg-err'] = implode('<br />',$err);
    }

    header("Location: demo.php");
    exit;
}

$script = '';
if($_SESSION['msg'])
{
    // The script below shows the sliding panel on page load
    $script = '
    <script type="text/javascript">
    $(function(){
        $("div#panel").show();
        $("#toggle a").toggle();
    });
    </script>';
}

Almacenamos todos los errores encontrados en un $err matriz, que luego se asigna a un $_SESSION variable. Esto permite que sea accesible después de una redirección del navegador.

Es posible que haya notado en algunos sitios que cuando envía un formulario y luego actualiza la página, los datos se envían nuevamente. Esto podría volverse problemático, ya que podría generar registros dobles y una carga innecesaria del servidor.

Usamos la función de encabezado para evitar esto, redirigiendo el navegador a la misma página. Esto inicia una nueva vista de la página, sin que el navegador la asocie con un envío de formulario. El resultado es que, al actualizar la página, no se envía ningún dato.

Pero como usamos $_SESSION para almacenar todos los errores encontrados, es importante que desactivemos estas variables, una vez mostramos los errores al usuario. De lo contrario, se mostrarán en cada vista de página (las líneas resaltadas en la parte XHTML del tutorial).

Observe también cómo creamos un script adicional (líneas 60-70 de la segunda parte del código PHP) que muestra el panel al cargar la página, para que los mensajes sean visibles para el usuario.

Ahora echemos un vistazo al CSS.

Paso 4 - CSS

El panel deslizante viene con su propia hoja de estilo. Esto significa que solo nos queda crear los estilos de página.

demostración.css

body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
    /* The reset rules */
    margin:0px;
    padding:0px;
}

body{
    color:#555555;
    font-size:13px;
    background: #eeeeee;
    font-family:Arial, Helvetica, sans-serif;
    width: 100%;
}

h1{
    font-size:28px;
    font-weight:bold;
    font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;
    letter-spacing:1px;
}

h2{
    font-family:"Arial Narrow",Arial,Helvetica,sans-serif;
    font-size:10px;
    font-weight:normal;
    letter-spacing:1px;
    padding-left:2px;
    text-transform:uppercase;
    white-space:nowrap;
    margin-top:4px;
    color:#888888;
}

#main p{
    padding-bottom:8px;
}

.clear{
    clear:both;
}

#main{
    width:800px;
    /* Centering it in the middle of the page */
    margin:60px auto;
}

.container{
    margin-top:20px;

    background:#FFFFFF;
    border:1px solid #E0E0E0;
    padding:15px;

    /* Rounded corners */
    -moz-border-radius:20px;
    -khtml-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius:20px;
}

.err{
    color:red;
}

.success{
    color:#00CC00;
}

a, a:visited {
    color:#00BBFF;
    text-decoration:none;
    outline:none;
}

a:hover{
    text-decoration:underline;
}

.tutorial-info{
    text-align:center;
    padding:10px;
}

Paso 5:jQuery

El panel deslizante viene con sus propios archivos jQuery.

demo.php

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<!-- PNG FIX for IE6 -->
<!-- http://24ways.org/2007/supersleight-transparent-png-in-ie6 -->
<!--[if lte IE 6]>
<script type="text/javascript" src="login_panel/js/pngfix/supersleight-min.js"></script>
<![endif]-->

<script src="login_panel/js/slide.js" type="text/javascript"></script>

<?php echo $script; ?>

Primero incluimos la biblioteca jQuery del CDN de Google. Más tarde viene una solución especial para los problemas de transparencia PNG de IE6 y, por último, se incluye el script del panel.

En la parte inferior de la página se encuentra la variable $script:muestra el panel en la carga de la página si es necesario.

¡Con esto, nuestro genial sistema de inicio de sesión está completo!

Conclusión

Hoy aprendimos cómo usar un fantástico componente de formulario y convertirlo en un sistema funcional de inicio de sesión/registro.

Eres libre de basarte en este código y modificarlo como mejor te parezca.