Demostración Descargar archivos
Formulario de Inicio de sesión
Las variables de sesión se utilizan para almacenar información individual de los clientes en el servidor web para su uso posterior, como un servidor web, que no sabe de la petición del cliente para ser responder porque la dirección HTTP no mantiene estado.
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
-- 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.12 SET 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
1 2 3 4 5 6 |
<?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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<?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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<?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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<?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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?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.
1 2 3 4 5 6 7 |
<?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….