En este tutorial vamos a crear sesiones en PHP a través de formulario de inicio de sesión el cual envía una petición al servidor y este responde de acuerdo de acuerdo a cada petición enviada por cada usuario. Si bien en un tutorial anterior vimos el Inicio de Sesión seguro y Registro de Usuarios usando PHP, MySQLi, jQuery y Bootstrap; considero que este tutorial es mucho mas sencillo de entender para usuarios principiantes o intermedios en PHP.
En nuestro ejemplo, tenemos un formulario de acceso en donde el usuario rellena los campos necesarios y cuando pulsa sobre el botón de inicio de sesión, una sesión se creará en el servidor a la que se le asigna un ID de usuario de la información y la almacena único para su uso posterior.
El códigos HTML, CSS, SQL y PHP completos se presentan paso a paso a continuación:
Archivo login.sql, contiene la tabla llamada login la cual almacena los usuarios del sistema.
-- phpMyAdmin SQL Dump -- version 4.4.14 -- http://www.phpmyadmin.net -- -- Servidor: 127.0.0.1 -- Tiempo de generación: 03-09-2016 a las 20:38:28 -- Versión del servidor: 5.6.26 -- Versión de PHP: 5.6.12SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8mb4 */;
-- -- Base de datos: `login` --
-- --------------------------------------------------------
-- -- Estructura de tabla para la tabla `login` --
CREATE TABLE IF NOT EXISTS `login` ( `id` int(10) NOT NULL, `email` varchar(255) NOT NULL, `password` varchar(255) NOT NULL ) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=latin1;
-- -- Volcado de datos para la tabla `login` --
INSERT INTO `login` (`id`, `email`, `password`) VALUES (1, 'admin@admin.com', 'd033e22ae348aeb5660fc2140aec35850c4da997');
-- -- Índices para tablas volcadas --
-- -- Indices de la tabla `login` -- ALTER TABLE `login` ADD PRIMARY KEY (`id`);
-- -- AUTO_INCREMENT de las tablas volcadas --
-- -- AUTO_INCREMENT de la tabla `login` -- ALTER TABLE `login` MODIFY `id` int(10) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=2; /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
Para la conexión a la base de datos hemos creados 2 archivos, el primero almacena los datos de conexión al servidor, y el segundo realiza la conexion a la base de datos usando los datos del archivo 1. Procedamos a crear una carpeta llamada config y dentro de ella crear el archivo db.php
<?php
/*Datos de conexion a la base de datos*/
define('DB_HOST', 'localhost');//DB_HOST: generalmente suele ser "127.0.0.1"
define('DB_USER', 'root');//Usuario de tu base de datos
define('DB_PASS', '');//Contraseña del usuario de la base de datos
define('DB_NAME', 'test_login');//Nombre de la base de datos
Para que la conexion a nuestra base de datos funcione es necesario cambiar las credenciales de acceso a la base de datos a nuestro servidor, segun corresponda, en el archivo anteriormente creado.
Ahora siempre de la carpeta config creamos el archivo conexion.php
<?php
/*-------------------------
Autor: Obed Alvarado
Web: obedalvarado.pw
Mail: info@obedalvarado.pw
---------------------------*/
# conectare la base de datos
$con=@mysqli_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME);
if(!$con){
die("imposible conectarse: ".mysqli_error($con));
}
if (@mysqli_connect_errno()) {
die("Conexión falló: ".mysqli_connect_errno()." : ". mysqli_connect_error());
}
?>
Una vez hemos creado la base de datos y los archivos que permitirán hacer la conexión a la base de datos, vamos a crear una carpeta llamada css y dentro de ella un archivo style.css, para la creación de dicho archivo que contiene el estilo que embellece nuestro formulario de inicio de sesión me he apoyado en una plantilla que descargue desde w3layouts.com
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
--*/
/* reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
ol,ul{list-style:none;margin:0px;padding:0px;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
/* start editing from here */
a{text-decoration:none;}
.txt-rt{text-align:right;}/* text align right */
.txt-lt{text-align:left;}/* text align left */
.txt-center{text-align:center;}/* text align center */
.float-rt{float:right;}/* float right */
.float-lt{float:left;}/* float left */
.clear{clear:both;}/* clear float */
.pos-relative{position:relative;}/* Position Relative */
.pos-absolute{position:absolute;}/* Position Absolute */
.vertical-base{ vertical-align:baseline;}/* vertical align baseline */
.vertical-top{ vertical-align:top;}/* vertical align top */
nav.vertical ul li{ display:block;}/* vertical menu */
nav.horizontal ul li{ display: inline-block;}/* horizontal menu */
img{max-width:100%;}
/*end reset*/
body{
padding:0;
margin:0;
background:#7353b1;
background-size: cover;
font-family: 'Signika', sans-serif;
}
h1,h2,h3,h4,h5,h6{
margin:0;
}
p{
margin:0;
}
ul{
margin:0;
padding:0;
}
label{
margin:0;
}
a{
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
}
a:hover{
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
}
/*--header start here--*/
h1 {
font-size: 3em;
color: #fff;
text-align: center;
margin: 1.5em 0em 1em 0em;
}
.login-main {
width: 35%;
background: #fff;
margin: 0 auto;
border-radius: 5px 5px;
}
.login-main h3 {
font-size: 2.5em;
color:#000;
margin-bottom: 0.71em;
text-align: center;
}
.login-main h4 {
font-size: 1.1em;
margin: 1.3em 0em;
}
.login-main h4 a{
color:#ce3838;
}
.login ul li {
display: inline-block;
margin-right: 0.2em;
}
.login ul li a {
background: url(../images/t-icn.png)no-repeat;
width: 26px;
height: 26px;
display: inline-block;
}
.login ul li a.fa {
background-position:0px 0px;
}
.login ul li a.tw {
background-position:-26px 0px;
}
.login ul li a.g {
background-position: -52px 0px;
}
.login ul li a.fa:hover {
transform: rotateY(360deg);
}
.login ul li a.tw:hover {
transform: rotateY(360deg);
}
.login ul li a.g:hover {
transform: rotateY(360deg);
}
.login ul {
margin-top: 1.2em;
}
.login-main input[type="text"] {
font-size: 1em;
color: #000;
padding: 0.7em 0em;
margin-bottom: 1em;
width: 94%;
display: inline-block;
outline: none;
border: none;
border-bottom: 2px solid #000;
font-family: 'Signika', sans-serif;
}
.login-main input[type="password"] {
font-size: 1em;
color: #000;
padding: 0.7em 0em;
margin-bottom: 1em;
width: 94%;
display: inline-block;
outline: none;
border: none;
border-bottom: 2px solid #000;
font-family: 'Signika', sans-serif;
}
.login-main input[type="submit"] {
font-size: 1em;
color: #fff;
background: #ecaf0f;
border: none;
width: 94%;
display: block;
padding: 0.7em 1em;
text-align: center;
margin: 1.5em auto;
border-radius: 3px;
transition: 0.5s all;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
outline: none;
cursor: pointer;
}
.login-main input[type="submit"]:hover{
background: #7353b1;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
}
::-webkit-input-placeholder{
color:#000 !important;
}
.login {
padding: 2em 2em;
text-align: center;
}
/*--copy right start here--*/
.copy-rights p {
font-size: 1em;
color: #fff;
text-align: center;
line-height: 1.7em;
padding: 0px 15px;
}
.copy-rights p a{
color:#f3b208;
}
.copy-rights p a:hover{
color: #fff;
}
.copy-rights {
padding:4em 0em 3em 0em;
}
.clear{
clear:both;
}
/*--media quries start here--*/
@media(max-width:1440px){
}
@media(max-width:1366px){
.login-main {
width: 40%;
}
}
/*-- w3layouts --*/
@media(max-width:1280px){
.login-main {
width: 45%;
}
}
@media(max-width:1024px){
.login-main {
width: 55%;
}
}
@media(max-width:991px){
}
@media(max-width:768px){
.login-main {
width: 70%;
}
}
@media(max-width:667px){
}
@media(max-width:640px){
.login-main {
width: 80%;
}
}
@media(max-width:568px){
}
@media(max-width:480px){
h1 {
font-size: 2.2em;
margin: 0.8em 0em 0.8em 0em;
}
.login-main h3 {
font-size: 2em;
margin-bottom: 0.5em;
}
}
@media(max-width:414px){
.login-main {
width: 90%;
}
}
@media(max-width:375px){
.login-main {
width: 95%;
}
/*-- agileits --*/
.login-main h3 {
margin-bottom: 0.3em;
}
.login-main input[type="text"] {
margin-bottom: 0.5em;
}
.login-main input[type="submit"] {
margin: 0.5em auto;
}
.login-main h4 {
font-size: 1em;
margin: 0.8em 0em;
}
.copy-rights {
padding: 2em 0em 2em 0em;
}
h1 {
font-size: 2em;
}
}
@media(max-width:320px){
h1 {
font-size: 1.7em;
margin: 0.6em 0em 0.6em 0em;
}
.login {
padding: 1.5em 1.2em;
}
.login-main input[type="text"] {
font-size: 0.9em;
padding: 0.5em 0em;
width: 100%;
}
.login-main {
width: 90%;
}
.login-main input[type="password"] {
font-size: 0.9em;
padding: 0.5em 0em;
width: 100%;
}
.login-main input[type="submit"] {
font-size: 0.9em;
width: 100%;
padding: 0.5em 1em;
}
.login-main h3 {
font-size: 1.7em;
}
/*-- w3layouts --*/
.login-main h4 {
font-size: 0.9em;
}
.login ul {
margin-top: 0.6em;
}
.copy-rights p {
font-size: 0.9em;
}
}
span {
color:red
}
/*-- agileits --*/
Ahora vamos a crear el archivo index.php
<?php
include('login.php'); // Includes Login Script
if(isset($_SESSION['login_user_sys'])){
header("location: profile.php");
}
?>
<!DOCTYPE HTML>
<html>
<head>
<title>Formulario de inicio de sesión con PHP & MySQL</title>
<!-- Custom Theme files -->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
<!-- for-mobile-apps -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Flat Login Form Widget Responsive, Login form web template, Sign up Web Templates, Flat Web Templates, Login signup Responsive web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<!-- //for-mobile-apps -->
<!--Google Fonts-->
<link href='//fonts.googleapis.com/css?family=Signika:400,600' rel='stylesheet' type='text/css'>
<!--google fonts-->
</head>
<body>
<!--header start here-->
<h1>Formulario de inicio de sesión</h1>
<div class="header agile">
<div class="wrap">
<div class="login-main wthree">
<div class="login">
<h3>Iniciar sesión</h3>
<form action="#" method="post">
<input type="text" placeholder="Correo electrónico" required="" name="username" required>
<input type="password" placeholder="Contraseña" name="password" required>
<input name="submit" type="submit" value="Ingresar">
</form>
<div class="clear"> </div>
<span><?php echo $error; ?></span>
</div>
</div>
</div>
</div>
<!--header end here-->
<!--copy rights end here-->
<div class="copy-rights w3l">
<p>© <?php echo date("Y");?> <a href="http://obedalvarado.pw/" target="_blank">Sistemas Web</a> Todos los derechos reservados | Diseñado por <a href="http://w3layouts.com/" target="_blank">W3layouts</a> </p>
</div>
<!--copyrights start here-->
</body>
</html>
Archivo login.php. Consta de la escritura y conexión en la que está inicializando sesión de PHP.
<?php
session_start(); // Iniciando sesion
$error=''; // Variable para almacenar el mensaje de error
if (isset($_POST['submit'])) {
if (empty($_POST['username']) || empty($_POST['password'])) {
$error = "Username or Password is invalid";
}
else
{
// Define $username y $password
$username=$_POST['username'];
$password=$_POST['password'];
// Estableciendo la conexion a la base de datos
include("config/db.php");//Contienen las variables, el servidor, usuario, contraseña y nombre de la base de datos
include("config/conexion.php");//Contiene de conexion a la base de datos
// Para proteger de Inyecciones SQL
$username = mysqli_real_escape_string($con,(strip_tags($username,ENT_QUOTES)));
$password = sha1($password);//Algoritmo de encriptacion de la contraseña http://php.net/manual/es/function.sha1.php
$sql = "SELECT email, password FROM login WHERE email = '" . $username . "' and password='".$password."';";
$query=mysqli_query($con,$sql);
$counter=mysqli_num_rows($query);
if ($counter==1){
$_SESSION['login_user_sys']=$username; // Iniciando la sesion
header("location: profile.php"); // Redireccionando a la pagina profile.php
} else {
$error = "El correo electrónico o la contraseña es inválida.";
}
}
}
?>
Archivo profile.php, es la página en donde el usuario es redirigido luego del inicio de sesión correcto.
<?php
include('session.php');
?>
<!DOCTYPE HTML>
<html>
<head>
<title>Página de Inicio</title>
<!-- Custom Theme files -->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
<!-- for-mobile-apps -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Flat Login Form Widget Responsive, Login form web template, Sign up Web Templates, Flat Web Templates, Login signup Responsive web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<!-- //for-mobile-apps -->
<!--Google Fonts-->
<link href='//fonts.googleapis.com/css?family=Signika:400,600' rel='stylesheet' type='text/css'>
<!--google fonts-->
</head>
<body>
<!--header start here-->
<h1>Página de Inicio</h1>
<div class="header agile">
<div class="wrap">
<div class="login-main wthree">
<div class="login">
<h3>Bienvenid@ al sistema <i><?php echo $login_session; ?></i></h3>
<div class="clear"> </div>
<h4><a href="logout.php"> Cerrar sesión</a></h4>
</div>
</div>
</div>
</div>
<!--header end here-->
<!--copy rights end here-->
<div class="copy-rights w3l">
<p>© <?php echo date("Y");?> <a href="http://obedalvarado.pw/" target="_blank">Sistemas Web</a> Todos los derechos reservados | Diseñado por <a href="http://w3layouts.com/" target="_blank">W3layouts</a> </p>
</div>
<!--copyrights start here-->
</body>
</html>
Archivo session.php, esta página, obtiene la información del usuario conectado.
<?php
// Estableciendo la conexion a la base de datos
include("config/db.php");//Contienen las variables, el servidor, usuario, contraseña y nombre de la base de datos
include("config/conexion.php");//Contiene de conexion a la base de datos
session_start();// Iniciando Sesion
// Guardando la sesion
$user_check=$_SESSION['login_user_sys'];
// SQL Query para completar la informacion del usuario
$ses_sql=mysqli_query($con, "select email from login where email='$user_check'");
$row = mysqli_fetch_assoc($ses_sql);
$login_session =$row['email'];
if(!isset($login_session)){
mysqli_close($con); // Cerrando la conexion
header('Location: index.php'); // Redirecciona a la pagina de inicio
}
?>
Archivo logout.php, este archivo se encarga de destruir todas las sesiones y redirigir a la página principal.
<?php
session_start();
if(session_destroy()) // Destruye todas las sesiones
{
header("Location: index.php"); // Redireccionando a la pagina index.php
}
?>
Conclusión:
Sólo es una solución de autenticación de usuario muy sencilla, pero sin embargo considero que podría ser de mucha utilidad a la hora de querer implementarlo en algún proyecto web. Espero que te guste....
Comentarios