CÓMO CREAR EL MODULO DE LOGÍN En esta guía se encuentra el paso a paso de cómo desarrollar su aplicativo de login: 1. Lo primero que se debe hacer es crear el archivo principal, es decir index.php de la siguiente manera: <!DOCTYPE html> <html> <head> <title>mi Sitio Iniciar Sesión</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <style type="text/css" rel="stylesheet">.cuadrouno { border: 2px solid #73AD21; width:600px; margin:0 auto; padding:20px; border-radius: 25px; </style> </head> <body> <div class="cuadrouno"> <form class="form-horizontal" method="post" action=""> <div class="form-group"> <label for="n_usuario" class="col-sm-2 control-label">usuario</label> <div class="col-sm-10"> <input class="form-control" name="n_usuario" id="n_usuario" placeholder="digite su Usuario"> <div class="form-group"> <label for="pwd" class="col-sm-2 control-label">contraseña</label> <div class="col-sm-10"> <input type="password" class="form-control" name="pwd" id="pwd" placeholder="digite su Contraseña"> Fundación de capacitación Para el Trabajo y desarrollo Humano High System Training, Res. 030 De la Secretaria
<div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-primary">iniciar Sesión</button> </form> </body> </html> <?PHP require 'conexion.php' ; if (isset ($_POST['n_usuario'],$_POST['pwd'])) { $usuario = $_POST['n_usuario'] ; $password = $_POST['pwd'] ; $sql = "SELECT id_usuario, nombre_usuario FROM usuario WHERE id_usuario='".$usuario."' AND contrasenna='".$password."'"; $comprobar = $mysqli -> query ($sql); if ($comprobar->num_rows > 0) { echo "si" ; // output data of each row while($row = $comprobar->fetch_assoc()) { setcookie("misitio_userid",$row["id_usuario"], time() + 3600); setcookie("misitio_username",$row["nombre_usuario"], time() + 3600); else { echo "Usuario o Contraseña incorrectos"; setcookie("misitio_userid","", time() + 3600); setcookie("misitio_username","", time() + 3600);
header("location:inicio.php");?> Lo guardamos dentro de la carpeta LOGIN que se encuentra creada dentro de la carpeta www de nuestro WampServer y le colocamos el nombre: index.php Nota: Previamente se debe crear dentro de la carpeta www de nuestro WampServer una carpeta llamada LOGIN. Ten en cuenta que para ahorrar espacio y mejorar la presentación se han incluido en el archivo principal también el archivo que permite hacer la conexión con la base de datos y los estilos bootstrap 1 que permiten darle una mejor presentación a nuestro aplicativo. De la misma manera se incluye la consulta SQl que valida si existe un determinado usuario y contraseña para poder iniciar la sesión. 2. A continuación vamos a realizar el archivo inicio.php el cual nos permitirá ejecutar la acción determinada (iniciar sesión o volver a la página principal) según sea el caso (es decir si ingresamos los datos correctos o incorrectos) <HTML> <HEAD> <link href="css/bootstrap.min.css" rel="stylesheet"> <style type="text/css" rel="stylesheet">.cuadrouno { border: 2px solid #73AD21; width:300px; margin:0 auto; padding:20px; border-radius: 25px; </style> </HEAD> <BODY> <div class="cuadrouno"> <?php 1 Bootstrap se refiere a estilos para insertar en las aplicaciones que son de uso libre y se pueden descargar gratuitamente desde internet.
if(isset($_cookie["misitio_userid"])) { echo "<p class='bg-info'>"; echo "Bienvenido ".$_COOKIE["misitio_userName"]." usted tiene privilegios de Administrador"; echo "</P>"; else { echo"<p class='bg-warning'>"; echo "No haz iniciado sesión <br/> <a href=index.php>iniciar Sesión</a>"; echo "</P>";?> <div> </BODY> </HTML> Lo guardamos dentro de la carpeta LOGIN que se encuentra creada dentro de la carpeta www de nuestro WampServer y le colocamos el nombre: inicio.php 3. Luego hacemos el archivo de conexión a la base de datos previamente realizada (al final se explicará cómo realizar la base de datos a través de phpmyadmin): <?php $mysqli = new mysqli ('localhost','root','', 'login' );?> Lo guardamos dentro de la carpeta LOGIN que se encuentra creada dentro de la carpeta www de nuestro WampServer y le colocamos el nombre: inicio.php 4. Se deben incluir dentro de la carpeta LOGIN las carpetas correspondientes al bootstrap que son: css, fonts y js; que se obtienen al descomprimir el archivo que descargamos desde la página de internet de bootstrap 2. 2 http://getbootstrap.com/
Ahora veremos el proceso de creación de la base de datos desde phpmyadmin de WampServer: 1. Iniciamos WampServer 2. Permitimos la advertencia del control de cuentas de usuario (clic en la opción sí) 3. Damos clic en el logo de WampServer que se encuentra en el deslizador de la esquina inferior derecha (al lado de la hora)
4. Damos clic en phpmyadmin 5. Se abrirá el navegador con la página de phpmyadmin 6. En la parte superior izquierda damos clic en Nueva (para crear una nueva base de datos) y llenamos los campos: Nombre de la base de datos: login Cotejamiento: utf8_spanish_ci Y damos clic en el botón crear
Saldrá un aviso diciendo que la base de datos ha sido creada. 7. Luego damos clic en el nombre de nuestra base de datos que aparecerá en la parte superior izquierda y hacemos clic en el botón SQL para crear una tabla. 8. Ejecutamos la siguiente instrucción SQL para crear una tabla: CREATE TABLE usuario (id_usuario int primary key not null, nombre_usuario char(80), email char (50), contrasennna char (25), sexo int)
Y daremos clic en continuar. Nos saldrá un mensaje diciendo que la tabla fue creada. 9. Luego deberemos hacer clic en la parte superior izquierda en el nombre de nuestra tabla (en este caso usuario) y examinaremos en el botón estructura los campos que hemos creado. Iremos nuevamente al botón SQL para ejecutar una instrucción que nos permita agregarle datos a los campos de nuestra tabla. Ejecutaremos la siguiente instrucción SQL: INSERT INTO usuario VALUES (123456, 'Pepito Perez', 'pepitoperez@gmailcom', '123456', 1); Y daremos clic en el botón continuar. Nos saldrá un mensaje diciendo que la instrucción SQL fue ejecutada. Podremos revisar los datos ingresados dando clic en el botón examinar dentro de nuestra tabla. En la parte central observaremos los datos que acabamos de ingresar.
Finalmente este será nuestro resultado en el navegador: Localhost/login/ Ingresamos los datos correspondientes:
Damos clic en iniciar sesión y este será nuestro resultado: Si se ingresan los datos de forma incorrecta este será el resultado:
Se debe hacer clic en iniciar sesión para volver a la pantalla principal: LISTO!!! Guía elaborada por: Willian G. Arévalo A. Asesor de Proyectos HST