Como crear un login con sesiones ($_SESSION) paso a paso, desde el diseño con HTML y CSS hasta la programación en PHP usando Notepad++.
Primero hay que crear la base de datos bdtest, tabla login, columnas usuario y password.
Necesitamos crear una carpeta en la siguiente dirección para que funcione al abrir el archivo PHP por localhost.
Dentro de la carpeta necesitamos, una imagen para el fondo de la página y otra para el lado izquierdo del login.
Luego debemos de crear los archivos index.php, login.css y pagina.php. Lo podemos crear con un simple bloc de notas y cambiar la extensión.
Clic derecho sobre los archivos recién creados y modificar.
La explicación de cada parte del código lo puedes escuchar en el vídeo.
index.php
<html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="login.css"> </head> <body> <div align="center"> <form method="POST"> <table> <tr><td colspan="2" style="background-color:#33A8DB;padding-bottom:10px;"><label>Iniciar sesión</label></td></tr> <tr><td rowspan="6"><img src="logo.png"></td><td><label>Usuario</label></td></tr> <tr><td><input type="text" name="txtusuario" placeholder="Ingresar usuario" required /> </td></tr> <tr><td><label>Contraseña</label></td></tr> <tr><td><input type="password" name="txtpassword" placeholder="Ingresar password" required /> </td></tr> <tr><td><input type="submit" name="btningresar" value="Ingresar"/></td></tr> <tr><td><a href="#">¿Olvidaste tu contraseña?</a><br><br><a href="#">Crear una nueva cuenta </a></td></tr> </table> </form> </div> </body> </html> <?php session_start(); if(isset($_SESSION['nombredelusuario'])) { header('location: pagina.php'); } if(isset($_POST['btningresar'])) { $dbhost="localhost"; $dbuser="root"; $dbpass=""; $dbname="bdtest"; $conn=mysqli_connect($dbhost,$dbuser,$dbpass,$dbname); if(!$conn) { die("No hay conexión: ".mysqli_connect_error()); } $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(!isset($_SESSION['nombredelusuario'])) { if($nr == 1) { $_SESSION['nombredelusuario']=$nombre; header("location: pagina.php"); } else if ($nr == 0) { echo "<script>alert('Usuario no existe');window.location= 'index.php' </script>"; } } } ?>
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 40px; } input[type=text], input[type=password] { width:100%; font-size:16px; border: none; box-sizing: border-box; border-bottom: 2px solid black; background: transparent; } label { font-size:16px; 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: 12px; }
pagina.php
<?php session_start(); if(isset($_SESSION['nombredelusuario'])) { $usuarioingresado = $_SESSION['nombredelusuario']; echo "<h1>Bienvenido: $usuarioingresado </h1>"; } else { header('location: index.php'); } if(isset($_POST['btncerrar'])) { session_destroy(); header('location: index.php'); } ?> <link rel="stylesheet" href="login.css"> <body> <form method="POST"> <input type="submit" value="Cerrar sesión" name="btncerrar" /> </form> </body>
Cuando el usuario inicie sesión con éxito, será enviado a la otra página donde le dará la bienvenida.
Listo.
Recuerda.
Si inicias sesión con éxito, no podrás ver nuevamente la pantalla del login hasta que cierres sesión.
Puedes enviar más datos a las diferentes páginas con
$_SESSION['TEXTO']
En este caso solo estoy enviando el nombre del usuario que fue ingresado en la caja de texto.
$_SESSION['nombredelusuario']=$nombre;
Aquí tienes el vídeo para que puedas ver como se hace paso a paso.
