Este proyecto contiene un login con sesiones, registro de nuevos usuarios, y una página donde lista los usuarios de la base de datos luego de iniciar sesión, todo en PHP. Ten en cuenta que este proyecto es la unión de varios proyectos anteriormente creados, cada uno de estos proyectos tiene su propio vídeo explicativo para que puedas saber como se hizo paso a paso.
Proyectos necesarios.
No te olvides de dejar tu LIKE en los vídeos para seguir creando y compartir más proyectos.
¿Cómo iniciar?
Como los proyectos ya están creados debemos de modificar y hacer que encaje uno con el otro. no pienses que es solo unir todo los archivos en una carpeta y ya esta xd, tampoco es que se hace rápido.
Primero necesitas un fondo para la página y un logo para los dos formularios.
Necesitamos crear los archivos, conexion.php, index.php, listar.php, login.css, registrar.php, lo puedes hacer con un bloc de notas.
Antes de iniciar con el código, necesitamos crear la base de datos (Esta base de datos es del login con sesiones)
<?php $dbhost = "localhost"; $dbuser = "root"; $dbpass = ""; $dbname = "bdtest"; $conn = mysqli_connect($dbhost, $dbuser, $dbpass, $dbname); if (!$conn) { die("No hay conexión: ".mysqli_connect_error()); } ?>
index.php
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"/> <title>VaidrollTeam Login</title> <link rel="stylesheet" href="login.css"> </head> <body> <div> <form method="post" action="index.php" name="vaidrollteam"> <table> <tr><td style="background-color:#33A8DB;"><label>Login</label></td></tr> <tr><td><img src="logo.png"/></td></tr> <tr><td><input type="text" name="txtusuario" placeholder="🔑 Ingresar usuario" required /></td></tr> <tr><td><input type="password" name="txtpassword" placeholder="🔒 Ingresar Contraseña" required /> </td></tr> <tr><td><input type="submit" value="Ingresar" name="btningresar"/> </td></tr> <br> <tr><td><a href="registrar.php" style="float:right">Crear una cuenta</a></td></tr> </table> </form> </div> </body> </html> <?php include('conexion.php'); session_start(); if(isset($_SESSION['nombredelusuario'])) { header('location: listar.php'); } if(isset($_POST['btningresar'])) { $nombre = $_POST["txtusuario"]; $pass = $_POST["txtpassword"]; $query = mysqli_query($conn,"SELECT * FROM login WHERE usuario = '".$nombre."' and password = '".$pass."'"); $nr = mysqli_num_rows($query); if($nr == 1) { $_SESSION['nombredelusuario']=$nombre; header("Location: listar.php"); } else if ($nr == 0) { echo "<script> alert('Usuario no existe');window.location= 'index.php' </script>"; } } ?>
registrar.php
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"/> <title>VaidrollTeam Registrar</title> <link rel="stylesheet" href="login.css"> </head> <body> <div> <form method="post" action="registrar.php" name="vaidrollteam"> <table> <tr><td style="background-color:#33A8DB;"><label>Registrar</label></td></tr> <tr><td><img src="logo.png"/></td></tr> <tr><td><input type="text" name="txtusuario" placeholder="🔑 Ingresar usuario" required /></td></tr> <tr><td><input type="password" name="txtpassword" placeholder="🔒 Ingresar Contraseña" required /> </td></tr> <tr><td><input type="submit" value="Registrar" name="btnregistrar"/> </td></tr> <br> <tr><td><a href="index.php" style="float:right">Iniciar sesión</a></td></tr> </table> </form> </div> </body> </html> <?php include('conexion.php'); session_start(); if(isset($_SESSION['nombredelusuario'])) { header('location: listar.php'); } if(isset($_POST["btnregistrar"])) { $nombre = $_POST["txtusuario"]; $pass = $_POST["txtpassword"]; $sqlgrabar = "INSERT INTO login(usuario,password) values ('$nombre','$pass')"; if(mysqli_query($conn,$sqlgrabar)) { echo "<script> alert('Usuario registrado con exito: $nombre'); window.location='index.php' </script>"; }else { echo "Error: ".$sql."<br>".mysql_error($conn); } } ?>
login.css
body {
margin: 0;
padding: 0;
background: url(fondo.png) no-repeat center top;
background-size: cover;
font-family: sans-serif;
}
table
{
margin:0;
border: 2px solid #353A46;
background-color: #3ABAF1;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%,-50%);
}
td
{
padding: 10px 30px;
}
input[type=text], input[type=password]
{
width: 100%;
font-size: 16px;
border: none;
box-sizing: border-box;
border-bottom: 2px solid black;
background: transparent;
}
img
{
}
label
{
font-size: 20px;
font-weight: bold;
}
input[type=submit]
{
font-size: 16px;
background-color: #f3f3f3;
color:black;
font-weight: bold;
border-radius: 20px;
height: 40px;
width: 200px;
border: solid;
}
a
{
font-size: 14px;
}
listar.php
<link rel="stylesheet" href="login.css"> <table> <?php include('conexion.php'); session_start(); if(isset($_SESSION['nombredelusuario'])) { $usuarioingresado = $_SESSION['nombredelusuario']; echo "<tr><td colspan='2' align='center'><h1>Bienvenido: $usuarioingresado </h1></td></tr>"; } else { header('location: index.php'); } ?> <form method="POST"> <tr><td colspan='2' align="center"><input type="submit" value="Cerrar sesión" name="btncerrar" /></td></tr> </form> <tr><td colspan="2"><h1>Listado de usuarios</h1></td></tr> <tr><td><label>Usuario</label></td> <td><label>Contraseña</label></td> </tr> <?php if(isset($_POST['btncerrar'])) { session_destroy(); header('location: index.php'); } $sql="SELECT * FROM login"; $result=mysqli_query($conn,$sql); while($mostrar=mysqli_fetch_array($result)) { ?> <tr> <td><?php echo $mostrar['usuario'] ?> <td><?php echo $mostrar['password'] ?> </tr> <?php } ?> </table>
¿Cómo funciona?
Debes de ingresar el nombre de un usuario y una contraseña, si este se encuentra en la base de datos, serás enviado a la página listar.php.
En la nueva página podrás ver la lista de los usuarios registrados en la base de datos y cerrar sesión.
En el caso de que el usuario no exista en la base de datos e intentas iniciar sesión te saldrá una alerta y serás enviado a la página de registro.
En la página de registro puedes crear un nuevo usuario, una vez creado te enviará a la página del login.
También puedes usar los enlaces debajo del botón para ir a la otra página.
Posibles errores.
P: Acabo de iniciar sesión y no me da la bienvenida o no muestra nada de la página listar.php
S: Fíjate en la base de datos si el usuario con el que estas ingresando este registrado solo una vez, como es un login básico puede registrar al mismo usuario más de una vez, por lo que te daría este problema, elimina a los usuarios duplicados y vuelve a intentar.
P: No me detecta al usuario ni la contraseña a pesar de que este registrado en la base de datos.
S: Fíjate si todo esta bien en la conexión.php o en la hoja index.php posiblemente te falto cerrar un paréntesis o una llave.
P: Le doy doble clic al archivo index.php y me aparece solo el código.
S: Un día le hice un proyecto a un compañero y este estaba abriendo el archivo php haciendo doble clic y veía que solo le cargaba el código xd, estaba asustado porque el profesor pasaba a revisar los proyectos y ya casi era su turno, entonces le explique que debía de mover la carpeta del proyecto a htdocs del xampp. y abrirlo por localhost. al final aprobó con buena nota xd.
- PSCS6
