Este login cuenta con una interfaz mejorada, tiene un botón que intercambia las ventanas entre registrar y el login. Uno se encarga de registrar al usuario y encriptar la contraseña, mientras que el otro se ocupa de desencriptar la contraseña.
Primero debemos de crear los archivos en una carpeta, puedes usar un bloc de notas y modificar la extensión.
Debemos de crear los siguientes archivos, conexion.php, index.html, login.css, login_registrar.php, principal.php y el logo es opcional.
A diferencia de los otros proyectos de LOGIN la base de datos de este proyecto es un poco distinta.
Creamos la base de datos loginvai.
Agregamos una tabla con nombre login y tendrá 2 columnas.
Uno será para el usuario (usu) varchar de 50 y el otro será para la contraseña (pass) varchar de 255, es necesario este espacio porque la contraseña encriptada suele tener 60 caracteres y hay la posibilidad de que aumente, por lo que necesitamos suficiente espacio para evitar futuros problemas.
Una vez creada la base de datos continuamos con el código de cada archivo.
index.html
<html> <head> <meta charset="UTF-8"> <title>VaidrollTeamLogin3</title> <link rel="stylesheet" href="login.css"> </head> <body> <div class="cajafuera"> <div class="formulariocaja"> <div class="botondeintercambiar"> <div id="btnvai"></div> <button type="button" class="botoncambiarcaja" onclick="loginvai()">Login</button> <button type="button" class="botoncambiarcaja" onclick="registrarvai()">Registrar</button> </div> <div class="logovai"> <img src="logo.png"> </div> <!--Formulario para el login --> <form id="frmlogin" class="grupo-entradas" method="POST" action="login_registrar.php"> <input type="text" class="cajaentradatexto" placeholder="🔑 Ingresar usuario" name="txtusuario" required> <input type="password" class="cajaentradatexto" placeholder="🔒 Ingresar contraseña" name="txtpassword" required> <input type="checkbox" class="checkboxvai"><span>Recordar contraseña</span> <button type="submit" class="botonenviar" name="btnloginx">Iniciar sesión</button> </form> <!--Formulario para registrar --> <form id="frmregistrar" class="grupo-entradas" method="POST" action="login_registrar.php"> <input type="text" class="cajaentradatexto" placeholder="🔑 Ingresar usuario" required name="txtusuario"> <input type="password" class="cajaentradatexto" placeholder="🔒 Ingresar contraseña" required name="txtpassword"> <input type="checkbox" class="checkboxvai"><span>He leído y acepto los términos y condiciones de uso.</span> <button type="submit" class="botonenviar" name="btnregistrarx">Registrar</button> </form> </div> </div> <script> var x = document.getElementById("frmlogin"); var y = document.getElementById("frmregistrar"); var z = document.getElementById("btnvai"); function registrarvai(){ x.style.left = "-400px"; y.style.left = "50px"; z.style.left = "110px"; } function loginvai(){ x.style.left = "50px"; y.style.left = "450px"; z.style.left = "0"; } </script> </body> </html>
login.css
*
{
margin: 0;
padding: 0;
font-family: sans-serif;
font-size:14px;
}
.pagprincipal
{
width: 380px;
height: 500px;
position: relative;
margin: 10% auto;
padding: 2px;
overflow: hidden;
text-align:center;
}
h1
{
font-size:40px;
}
.cajafuera
{
background: linear-gradient(to bottom, #3380B5, white);
height: 100%;
width: 100%;
position: absolute;
}
.formulariocaja{
width: 380px;
height: 500px;
position: relative;
margin: 10% auto;
background: white;
padding: 2px;
overflow: hidden;
border: 1px solid black;
border-radius: 2px;
}
.botondeintercambiar{
width: 240px;
margin: 35px auto;
position: relative;
box-shadow: 0 0 6px 0.5px black;
border-radius: 30px;
}
.botoncambiarcaja{
padding: 10px 30px;
cursor: pointer;
background: transparent;
border: 0;
outline: none;
position: relative;
font-weight: bold;
font-size:16px;
color:black;
}
#btnvai{
top: 0;
left: 0;
position: absolute;
width: 130px;
height: 100%;
background-image: linear-gradient(180deg, #a5d9f4 0, #6cb4d8 50%, #1d90bd 100%);
border-radius: 30px;
transition: .5s;
}
.logovai
{
text-align: center;
}
.logovai img
{
width: 120px;
}
.grupo-entradas{
top: 240px;
position: absolute;
width: 280px;
transition: .5s;
}
.cajaentradatexto{
width: 100%;
padding: 10px 0;
margin: 5px 0;
border-left: 0;
border-top: 0;
border-right: 0;
border-bottom: 1px solid #999;
outline: none;
background: transparent;
}
.botonenviar{
width: 85%;
padding: 10px 30px;
cursor: pointer;
display: block;
margin: auto;
background-image: linear-gradient(180deg, #a5d9f4 0, #6cb4d8 50%, #1d90bd 100%);
border: 0;
outline: none;
border-radius: 10px;
font-weight: bold;
border:1px solid black;
}
.checkboxvai{
margin: 30px 10px 30px 0;
}
span{
color: #777;
font-size: 12px;
bottom: 66px;
position: absolute;
}
#frmlogin{
left: 50px;
}
#frmregistrar{
left: 450px;
}
conexion.php
<?php $conn = new mysqli("localhost","root","","loginvai"); if($conn->connect_errno) { echo "No hay conexión: (" . $conn->connect_errno . ") " . $conn->connect_error; } ?>
login_registrar.php
La variable donde estoy guardando mi contraseña sin encriptar es en $pass, el password_hash y PASSWORD_BCRYPT se encargan de encriptar la contraseña.
Entonces lo declaramos de la siguiente manera password_hash($pass, PASSWORD_BCRYPT)
Para desencriptar se usa password_verify y necesitamos la contraseña sin encriptar y la columna donde tiene la contraseña encriptada, para que pueda verificar si es la misma contraseña.
Entonces lo declaramos de la siguiente manera password_verify($pass,$mostrar['pass']).
Además, esta validado para que no se pueda registrar dos usuarios con el mismo nombre :)
<?php include('conexion.php'); $nombre = $_POST["txtusuario"]; $pass = $_POST["txtpassword"]; //Para iniciar sesión if(isset($_POST["btnloginx"])) { $queryusuario = mysqli_query($conn,"SELECT * FROM login WHERE usu = '$nombre'"); $nr = mysqli_num_rows($queryusuario); $mostrar = mysqli_fetch_array($queryusuario); if (($nr == 1) && (password_verify($pass,$mostrar['pass'])) ) { session_start(); $_SESSION['nombredelusuario']=$nombre; header("Location: principal.php"); } else { echo "<script> alert('Usuario o contraseña incorrecto.');window.location= 'index.html' </script>"; } } //Para registrar if(isset($_POST["btnregistrarx"])) { $queryusuario = mysqli_query($conn,"SELECT * FROM login WHERE usu = '$nombre'"); $nr = mysqli_num_rows($queryusuario); if ($nr == 0) { $pass_fuerte = password_hash($pass, PASSWORD_BCRYPT); $queryregistrar = "INSERT INTO login(usu, pass) values ('$nombre','$pass_fuerte')"; if(mysqli_query($conn,$queryregistrar)) { echo "<script> alert('Usuario registrado: $nombre');window.location= 'index.html' </script>"; } else { echo "Error: " .$queryregistrar."<br>".mysql_error($conn); } }else { echo "<script> alert('No puedes registrar a este usuario: $nombre');window.location= 'index.html' </script>"; } } /*VaidrollTeam*/ ?>
principal.php
<link rel="stylesheet" href="login.css"> <div class="cajafuera"> <div class="pagprincipal"> <?php include('conexion.php'); session_start(); if(isset($_SESSION['nombredelusuario'])) { $usuarioingresado = $_SESSION['nombredelusuario']; echo "<h1>Bienvenido: $usuarioingresado </h1>"; } else { header('location: index.html'); } ?> <form method="POST"> <tr><td colspan='2' align="center"><input type="submit" value="Cerrar sesión" name="btncerrar" /></td></tr> </form> <?php if(isset($_POST['btncerrar'])) { session_destroy(); header('location: index.html'); } ?> </div> </div>
Resultado.
Con un botón puedes cambiar las ventas entre el LOGIN Y REGISTRAR.
No permite registrar a 2 dos usuarios con el mismo nombre.
Validación de usuario no registrado.
Al registrar un usuario su password estará encriptada.
Le dará la bienvenida si el usuario registrado inicia sesión.
Posibles errores.
Mensaje.
Solución.
Eso se debe porque en el query faltaron las comillas a la variable $nombre.
$queryusuario = mysqli_query($conn,"SELECT * FROM login WHERE usu = $nombre");
Debería de quedar de esta manera.
$queryusuario = mysqli_query($conn,"SELECT * FROM login WHERE usu = '$nombre'");
Aquí tienes el vídeo para que puedas ver como se hace paso a paso.
Tutoriales recomendados
 |  |
