INSTITUTO TÉCNICO
Pensamos en tu futuro
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:
<title>Mi Sitio | Iniciar Sesión</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style type="text/css" rel="stylesheet">
.cuadroUno {
</style>
border: 2px solid #73AD21;
width:600px;
margin:0 auto;
padding:20px;
border-radius: 25px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="cuadroUno">
placeholder="digite su Usuario">
placeholder="Digite su Contraseña">
</div>
<div class="form-group">
</div>
</div>
</div>
<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"
<label for="pwd" class="col-sm-2 control-label">Contraseña</label>
<div class="col-sm-10">
<input
class="form-control"
type="password"
name="pwd"
id="pwd"
Fundación de capacitación Para el Trabajo y desarrollo Humano High System Training, Res. 030 De la Secretaria
de Gobierno Departamental y Resolución 2361 de la Secretaria de Educación Municipal
Calle 19 No. 27 – 89 Tel. 7220340 - 7364404 Cel. 3162543254 www.hst.edu.co
INSTITUTO TÉCNICO
Pensamos en tu futuro
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">Iniciar Sesión</button>
</div>
<div class="form-group">
</div>
</form>
</div>
</body>
</html>
<?PHP
require 'conexion.php' ;
if (isset ($_POST['n_usuario'],$_POST['pwd'])) {
$sql = "SELECT id_usuario, nombre_usuario FROM usuario WHERE id_usuario='".$usuario."' AND
contrasenna='".$password."'";
$comprobar = $mysqli -> query ($sql);
}
else {
}
echo "si" ;
// output data of each row
while($row = $comprobar->fetch_assoc()) {
}
if ($comprobar->num_rows > 0) {
echo "Usuario o Contraseña incorrectos";
setcookie("misitio_userid","", time() + 3600);
setcookie("misitio_userName","", time() + 3600);
$usuario = $_POST['n_usuario'] ;
$password = $_POST['pwd'] ;
setcookie("misitio_userid",$row["id_usuario"], time() + 3600);
setcookie("misitio_userName",$row["nombre_usuario"], time() + 3600);
Fundación de capacitación Para el Trabajo y desarrollo Humano High System Training, Res. 030 De la Secretaria
de Gobierno Departamental y Resolución 2361 de la Secretaria de Educación Municipal
Calle 19 No. 27 – 89 Tel. 7220340 - 7364404 Cel. 3162543254 www.hst.edu.co
INSTITUTO TÉCNICO
Pensamos en tu futuro
}
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 bootstrap1 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)
<link href="css/bootstrap.min.css" rel="stylesheet">
<style type="text/css" rel="stylesheet">
.cuadroUno {
</style>
border: 2px solid #73AD21;
width:300px;
margin:0 auto;
padding:20px;
border-radius: 25px;
}
<HTML>
<HEAD>
</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.
Fundación de capacitación Para el Trabajo y desarrollo Humano High System Training, Res. 030 De la Secretaria
de Gobierno Departamental y Resolución 2361 de la Secretaria de Educación Municipal
Calle 19 No. 27 – 89 Tel. 7220340 - 7364404 Cel. 3162543254 www.hst.edu.co
INSTITUTO TÉCNICO
Pensamos en tu futuro
echo "</P>";
}
else {
}
?>
<div>
if(isset($_COOKIE["misitio_userid"])) {
echo "<p class='bg-info'>";
echo "Bienvenido ".$_COOKIE["misitio_userName"]." usted tiene privilegios de
echo"<p class='bg-warning'>";
echo "No haz iniciado sesión <br/> <a href=index.php>Iniciar Sesión</a>";
echo "</P>";
Administrador";
</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 bootstrap2.
2 http://getbootstrap.com/
Fundación de capacitación Para el Trabajo y desarrollo Humano High System Training, Res. 030 De la Secretaria
de Gobierno Departamental y Resolución 2361 de la Secretaria de Educación Municipal
Calle 19 No. 27 – 89 Tel. 7220340 - 7364404 Cel. 3162543254 www.hst.edu.co
INSTITUTO TÉCNICO
Pensamos en tu futuro
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)
Fundación de capacitación Para el Trabajo y desarrollo Humano High System Training, Res. 030 De la Secretaria
de Gobierno Departamental y Resolución 2361 de la Secretaria de Educación Municipal
Calle 19 No. 27 – 89 Tel. 7220340 - 7364404 Cel. 3162543254 www.hst.edu.co
INSTITUTO TÉCNICO
Pensamos en tu futuro
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
Fundación de capacitación Para el Trabajo y desarrollo Humano High System Training, Res. 030 De la Secretaria
de Gobierno Departamental y Resolución 2361 de la Secretaria de Educación Municipal
Calle 19 No. 27 – 89 Tel. 7220340 - 7364404 Cel. 3162543254 www.hst.edu.co
INSTITUTO TÉCNICO
Pensamos en tu futuro
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)
Fundación de capacitación Para el Trabajo y desarrollo Humano High System Training, Res. 030 De la Secretaria
de Gobierno Departamental y Resolución 2361 de la Secretaria de Educación Municipal
Calle 19 No. 27 – 89 Tel. 7220340 - 7364404 Cel. 3162543254 www.hst.edu.co
INSTITUTO TÉCNICO
Pensamos en tu futuro
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
que
datos
acabamos
de
ingresar.
Fundación de capacitación Para el Trabajo y desarrollo Humano High System Training, Res. 030 De la Secretaria
de Gobierno Departamental y Resolución 2361 de la Secretaria de Educación Municipal
Calle 19 No. 27 – 89 Tel. 7220340 - 7
Crear cuenta
Comentarios de: Como crear el modulo de login (0)
No hay comentarios