Bloguero-ec

Codigo Fuente, programación, Diseño Web

Login php mysql para web

abril 30, 2014
codigo-fuente,formulario,login



Hola como están en este tutorial vamos a aprender a crear un pequeño y simple inicio de sesión en nuestra web antes de eso necesitaremos que los usuarios se registren en una base de datos para posteriormente iniciar el login , es bastante sencillo y sin complicaciones para principiantes ya que cada día todos aprendemos un poco de cada cosa…

Para la utilización de este sistema vamos a necesitar de ciertos archivos ..

Archivos para la utilización de este sistema :

Una tabla llamada strong>usuarios

index.php

conexion.php

registro.php

perfil.php (solo para usuarios registrados)

estilo.css

Breve explicación suponiendo un poco de conocimiento por parte del lector… Para comenzar vamos a necesitar de una tabla llamada usuarios que se va a encargar de guardar los datos introducidos en el registro.php , La tabla es la siguiente…

CREATE TABLE usuarios (
    id      int(5) not null auto_increment,
    fecha   int(10) not null,
    nick    varchar(20) not null,
    pass    varchar(32) not null,
    mail    varchar(40) not null,
    ip      varchar(15) not null,
    primary key (id),
    key (nick,pass)
)

Una vez creada la tabla vamos a proceder a crear el archivo conexion.php que se va a encargar de conectar mediante mysql nuestros archivos:

<?php
$hostname_conexion = "localhost";  //conexion al hosting
$database_conexion = "";  //nombre de la base de datos
$username_conexion = "root"; //nombre de usuario
$password_conexion = "";  //clave de usuario
$conexion = mysql_pconnect($hostname_conexion, $username_conexion, $password_conexion) or trigger_error(mysql_error(),E_USER_ERROR); 
    mysql_select_db($database_conexion) or exit('No existe la base de datos.');

/*Verificamos que la sesion este iniciada*/ 
session_start();

/*eliminamos codigo malicioso de las variables.*/
function limpiar($var)
{
    $var = trim($var);
    $var = htmlspecialchars($var);
    $var = str_replace(chr(160),'',$var);
    return $var;
}

/*validamos que el mail esta escrito correctamente.*/
function validar_email($email){
    $mail_correcto = 0; 
    //compruebo unas cosas primeras 
    if ((strlen($email) >= 6) && (substr_count($email,"@") == 1) && (substr($email,0,1) != "@") && (substr($email,strlen($email)-1,1) != "@"))
    { 
       if ((!strstr($email,"'")) && (!strstr($email,"\"")) && (!strstr($email,"\\")) && (!strstr($email,"\$")) && (!strstr($email," ")))
       {//miro si tiene caracter .
          if (substr_count($email,".")>= 1)
          {//obtengo la terminacion del dominio 
             $term_dom = substr(strrchr ($email, '.'),1); 
             //compruebo que la terminacion del dominio sea correcta 
             if (strlen($term_dom)>1 && strlen($term_dom)<5 && (!strstr($term_dom,"@")) )
             {//compruebo que lo de antes del dominio sea correcto 
                $antes_dom = substr($email,0,strlen($email) - strlen($term_dom) - 1); 
                $caracter_ult = substr($antes_dom,strlen($antes_dom)-1,1); 
                if ($caracter_ult != "@" && $caracter_ult != ".")
                { 
                   $mail_correcto = 1; 
                }
             }
          }
       }
    }
    if ($mail_correcto) 
       return 1;
    else 
       return 0;
}

/*con esta opcion verificamos que el usuario este registrado y logeado correctamente*/
function user_login()
{
    if(!$_SESSION['id'])
    {
        exit ("<h5>Solo usuarios registrados y logeados podrán acceder a esta Página,</h5> <a href='javascript:history.back(-1)'>Volver</a>");
    }
}

?>

El archivo index.php que será el que se va a encargar de logear o iniciar sesión en la página …


<?php include('conexion/conexion.php'); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css/estilo.css">
<title>Registro - Login php mysql</title>
</head>

<body>
   <form name="login_user" id="form1" method="POST" action=""> 
   <div>
   <?php

if(isset($_POST['login']))
{
    /*Validamos que todos los campos esten llenos correctamente*/
    if(($_POST['nick'] != '') && ($_POST['pass'] != '') )
    {

    $nick= $_POST['nick'];
    $pass= md5(md5($_POST['pass']));
    $b_user=mysql_query("SELECT * FROM usuarios WHERE nick='$nick'");   
    $ses = @mysql_fetch_assoc($b_user) ;
    if(@mysql_num_rows($b_user))
    {
        if($ses['pass'] == $pass)
        {   
            $_SESSION['id']=        $ses["id"];
            $_SESSION['fecha']= $ses["fecha"];
            $_SESSION['nick']=  $ses["nick"];
            $_SESSION['mail']=  $ses["mail"];
            $_SESSION['ip']=        $ses["ip"];
        }
        else
        {
            echo '<h5>Contraseña incorrecta.</h5>';
        }
    }
    else
    {
        echo '<h5>Nombre de Usuario incorrecto.</h5>';
    }
    }
    else
    
    echo '<h5>Deberas llenar todos los campos.</h5>';
    
    }
    
if(isset($_GET['modo']) == 'desconectar')
{
    session_destroy();
    echo '<meta http-equiv="Refresh" content="2;url=../demo"> ';
    exit ('Desconectando espere.......');
}
    
if(isset($_SESSION['id']))
{
    echo '<p>Usuario :   ' . $_SESSION['nick'] . '</p>';
    echo '<p>Fecha de registro :   ' . date("d-m-Y - H:i", $_SESSION['fecha']) . '</p>';
    echo '<p>mail :   ' . $_SESSION['mail'] . '</p>';
    echo '<p>IP :   ' . $_SESSION['ip'] . '</p>';
    echo '<a href="?modo=desconectar">cerrar sesión';
    echo '<a href="perfil.php">ir al perfil</a>';

}
else
{
?>
    </div>
    <div>
        <label for="login_username">Usuario :</label> 
        <input type="text" name="nick" id="login_username" class="field required" title="Ingrese su nombre de usuario" />
    </div>            

    <div>
        <label for="login_password">Clave :</label>
        <input type="password" name="pass" id="login_password" class="field required" title="Clave requerida" />
    </div>            
    
                
    <div class="submit">
        <input type="submit" class="enviar" name="login" style="width:100px;" tabindex="6" value="Entrar" />
        
        <label>
            <input type="checkbox" name="remember" id="login_remember" value="0" />
            Recuerdeme en este computador
        </label>  
        
    </div>
    
    <p class="back">No eres usuario?<a href="registro.php">Registrate..</a></p>
  
</form>   
<?php
}
?>
</body>
</html>

El archivo registro.php que servirá para que los usuarios se registren en la web…



<?php
include("conexion/conexion.php");
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css/estilo.css">
<title>Registro - Login php mysql</title>
</head>

<body>
<form name="registrar" action="" id="form1" method="post" onsubmit="return validar()" />
    <h2>Ya estás registrado?<a href="../demo" > Inicia sesión</a></h2>

    <div>
    <?php
if(isset($_POST['registro']))//Vallidamos que el formulario fue enviado
{
    /*Validamos que todos los campos esten llenos correctamente*/
    if(($_POST['nick'] != '') && ($_POST['mail'] != '') && ($_POST['pass'] != '') && ($_POST['conf_pass'] != ''))
    {
        if($_POST['pass'] != $_POST['conf_pass'])
        {
            echo '<h5>Las contraseñas no coinciden</h5>';
        }
        else
        {
            $date= time(); 
            $nick= limpiar($_POST['nick']);
            $mail= limpiar($_POST['mail']);
            $pass= md5(md5(limpiar($_POST['pass'])));
            $ipuser= $_SERVER['REMOTE_ADDR'];
            
            $b_user= mysql_query("SELECT nick FROM usuarios WHERE nick='$nick'");
            if($user=@mysql_fetch_array($b_user))
            {
                echo '<h5>El nombre de usuario o el email ya esta registrado.</h5>';
                mysql_free_result($b_user); //liberamos la memoria del query a la db
            }
            else
            {
                if(validar_email($_POST['mail']))
                {
                    mysql_query("INSERT INTO usuarios (fecha,nick,mail,pass,ip) values ('$date','$nick','$mail','$pass','$ipuser')");
                    echo '<h4>Te has registrado Correctamente, ahora podras iniciar sesión como usuario registrado.</h4>';
                }
                else 
                {
                    echo '<h5>El email no es valido.</h5>';
                }
            }
        }
    }
    else
    {
        echo '<h5>Deberas llenar todos los campos.</h5>';
    }
}
?>

    </div>

        <div>
        <label for="login_username">* Usuario :</label> 
        <input type="text" name="nick" id="nick" class="field required" title="Ingrese un nombre de usuario" />
  </div>
    
    <div>
        <label for="login_mail">* email :</label> 
        <input type="text" name="mail" id="mail" class="field required" title="Ingrese su correo" />
    </div>            
    
    <div>
        <label for="login_pass">* contraseña :</label> 
        <input type="password" name="pass" id="pass" class="field required" title="Ingrese su contraseña" />
    </div>
    
    <div>
        <label for="login_conf_pass">* Confirme contraseña:</label>
        <input type="password" name="conf_pass" id="conf_pass" class="field required" title="Confirme su contraseña" />
    </div>
        
         <span><input name="registro" type="submit" value="Registrar"  class="enviar"/>
        <input type="reset" name="Limpiar" style="width:100px;" tabindex="6" value="Limpiar" class="enviar" /></span>
    </form>

</body>
</html>

El archivo perfil.php sirve solo para usuarios registrados y logeados correctamente haz un tets aquí



<?php include('conexion/conexion.php'); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Perfil de usuario...</title>
<link rel="stylesheet" type="text/css" href="css/estilo.css">
</head>

<body>
<div id="form1">
<div>
<?php
user_login();
    echo '<p>Usuario :   ' . $_SESSION['nick'] . '</p>';
    echo '<p>Usted se encuentra en esta página de usuarios registrados donde solo ingresaran usarios que se hayan registrado y logeado correctamente ....</p>';
    echo '<p>Usted podrá hacer uso de página bloqueada usando user_login(); para bloquear dichas páginas a las cuales desea que solo usuarios registrados y logeados accedan a ellas.....</p>';

    echo '<a href="index.php?modo=desconectar">desconectar</a>';
?>
</div>
</div>
</body>
</html>

El estilo.css lo he dejado simple solo para realizar una prueba ….

/*
 * Login php mysql para web:
 * Php mysql login,
 * Copyright 2015 bloguero-ec.
 * Usese cómo mas le convenga no elimine estas líneas (http://www.bloguero-ec.com)
*/
body,html,h1,h2,h4,p,h5{
    /* A simple page reset */
    margin:0px;
    padding:0px;
}
html{
    background:url('../img/bg.jpg') repeat #e4e4e4;
}
h1{
    font-size:28px;
    font-weight:bold;
    font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;
    letter-spacing:1px;
}

h2{
    font-weight:normal;
    font-size:12px;
    text-align:right;
    padding-left:2px;
}
a {
    margin:0 30px 0 0;
    color:#339900;
}
/*-------------------------
    formulario
--------------------------*/
#form1{
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    -moz-box-shadow:0 0 10px #4e707c;
    -webkit-box-shadow:0 0 10px #4e707c;
    box-shadow:0 0 10px #4e707c;
    text-align:left;
    position:relative;
    margin:5em auto;
    background:#fff;
    border:8px solid #eee;
    padding: 10px;
    width:500px;
    margin:50px auto;
    background: #FFFFFF;
    border: 1px solid #CCCCCC;
}
#form1 div{
    margin:.5em 25px;
    background:#eee;
    padding:4px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    text-align:right;
    position:relative;
    }   
#form1 label{
    float:left;
    line-height:30px;
    padding-left:10px;
    }
.enviar{    
    cursor:pointer;
    border: 1px solid #666666;
    padding: 2px;
    width: 100px;
    border-radius:6px;
    margin:0 0 0 100px;
}
.enviar:hover{  
    cursor:pointer;
    border: 1px solid #333333;
    padding: 2px;
    width: 100px;
    border-radius:6px;
    margin:0 0 0 100px;
    background-color:#C7C7C7;
}

#form1 .field{
    border:1px solid #ccc;
    width:250px;
    font-size:12px;
    line-height:1em;
    padding:4px;
    -moz-box-shadow:inset 0 0 5px #ccc;
    -webkit-box-shadow:inset 0 0 5px #ccc;
    box-shadow:inset 0 0 5px #ccc;
    }   
#form1 .back{padding:1em 0;border-top:1px solid #eee;text-align:right;font-size:11px;}
#form1 .register{
    position:absolute;
    float:left;
    margin:0;
    line-height:30px;
    top:-40px;
    right:0;
    font-size:11px;
    }
p {
    font-family:Georgia, "Times New Roman", Times, serif;
    font-weight: normal;
    position:relative;
    color:#000066;
    font-size: 18px;
    text-align:left;
    width:auto;
    padding:2px 0 0 14px ;
}

h4 {
    font-family:Georgia, "Times New Roman", Times, serif;
    font-weight: normal;
    position:relative;
    color:#006600;
    font-size: 12px;
    text-align:center;
    width:auto;
}

h5 {
    font-family:Georgia, "Times New Roman", Times, serif;
    font-weight: normal;
    position:relative;
    color:#FF0000;
    font-size: 12px;
    text-align:center;
    width:auto;
}
#form1 .pie{
    position:absolute;
    float:right;
    margin:0;
    line-height:30px;
    top:-40px;
    right:0;
    font-size:11px;
    }

El estilo y los archivos podrás modificarlos a tu gusto recuerda ordenar tus archivos de forma que cada carpeta contenga una extensión que los identifique espero les sirva de algo hasta la próxima

Este sistema está desactualizado el admin ha desactivado su demostración cualquier duda dejenos su comentario…

Visita nuestro nuevo sistema Login php mysql mas panel de administración demo.

Visita nuestro nuevo sistema Timeline de twitter hecho en Php mysql

Mas Publicaciones

Siguenos




Conviertase en Editor

Te gustaría ser editor en Bloguero-ec.? Escribe tutoriales referente a programación, diseño web, CSS, entre otros y deja tu marca personal en nuestro sitio, contáctanos y empieza a editar Ya..

Compartir..!

© Copyright 2017 Bloguero-ec - Derechos Reservados

A %d blogueros les gusta esto: