Como Hacer Un Login Sencillo

INSTITUTO POLITCNICO NACIONAL
ESCUELA SUPERIOR DE INGENIERA MECNICA Y ELCTRICA

UNIDAD CULHUACAN
Ingeniera En Comunicaciones y Electrnica.
Lenguajes de internet.
Reporte Final: Login PHP, MySQL y JavaScript
Alumno:
* Lopez Lopez Cesar
Profesor: Aldo
Grupo: 8EX54
Fecha: 16| Diciembre| 2015.
pg. 1

UNIDAD CULHUACAN
CONTENIDO
Pg. Introduccin...3
1. Marco Terico.............4
2. Descripcin del Proyecto6
3. Explicacin del Cdigo9
3. Conclusiones..21
4. Bibliografa.21
pg. 2

UNIDAD CULHUACAN
INTRODUCCIN
En toda conexin web existen dos partes bien separadas: cliente y servidor. El cliente suele ser la mquina
del usuario que utiliza un navegador de pginas web, el servidor es quien recibe esa peticin, es donde
reside el cdigo de las diferentes pginas y la base de datos y es donde, en principio, se realiza el
procesamiento.
En algunos casos se requiere que en la parte del cliente se realicen una serie de procesamientos, como
validacin de formularios, presentacin de calendarios para indicar una fecha, etc. En esos casos se suele
hacer uso de JavaScript como lenguaje de programacin, este se ejecuta en la mquina del usuario, lo que
tiene sus ventajas e inconvenientes.
Otro ejemplo en el que el procesamiento se realiza en la maquina cliente es el uso de applets en Java, en
ese caso el servidor entrega el cdigo Java a ejecutar y es la mquina virtual Java del ordenador del usuario
quien realiza esa ejecucin.
pg. 3

UNIDAD CULHUACAN
Marco Terico
PHP
PHP es un lenguaje de programacin de uso general de cdigo del lado del servidor originalmente diseado
para el desarrollo web de contenido dinmico. Fue uno de los primeros lenguajes de programacin del lado
del servidor que se podan incorporar directamente en el documento HTML en lugar de llamar a un archivo
externo que procese los datos. El cdigo es interpretado por un servidor web con un mdulo de procesador
de PHP que genera la pgina Web resultante. PHP ha evolucionado por lo que ahora incluye tambin una
interfaz de lnea de comandos que puede ser usada en aplicaciones grficas independientes. Puede ser
usado en la mayora de los servidores web al igual que en casi todos los sistemas operativos y plataformas
sin ningn costo.
PHP se considera uno de los lenguajes ms flexibles, potentes y de alto rendimiento conocidos hasta el da
]
de hoy , lo que ha atrado el inters de mltiples sitios con gran demanda de trfico, como Facebook, para
optar por el mismo como tecnologa de servidor.
Fue creado originalmente por Rasmus Lerdorf en 1995. Actualmente el lenguaje sigue siendo desarrollado
1
con nuevas funciones por el grupo PHP. Este lenguaje forma parte del software libre publicado bajo la
licencia PHP, que es incompatible con la Licencia Pblica General de GNU debido a las restricciones del uso
2
del trmino PHP.
MySQL
MySQL es un sistema de gestin de bases de datos relacional, multihilo y multiusuario con ms de seis
1
millones de instalaciones. MySQL AB desde enero de 2008 una subsidiaria de Sun Microsystems y sta a
su vez de Oracle Corporation desde abril de 2009 desarrolla MySQL como software libre en un esquema
de licenciamiento dual.
Por un lado se ofrece bajo la GNU GPL para cualquier uso compatible con esta licencia, pero para aquellas
empresas que quieran incorporarlo en productos privativos deben comprar a la empresa una licencia
especfica que les permita este uso. Est desarrollado en su mayor parte en ANSI C.
Al contrario de proyectos como Apache, donde el software es desarrollado por una comunidad pblica y los
derechos de autor del cdigo estn en poder del autor individual, MySQL es patrocinado por una empresa
privada, que posee el copyright de la mayor parte del cdigo. Esto es lo que posibilita el esquema de
licenciamiento anteriormente mencionado. Adems de la venta de licencias privativas, la compaa ofrece
soporte y servicios. Para sus operaciones contratan trabajadores alrededor del mundo que colaboran va
Internet. MySQL AB fue fundado por David Axmark, Allan Larsson y Michael Widenius
pg. 4

UNIDAD CULHUACAN
JavaScript
.JavaScript (abreviado comnmente "JS") es un lenguaje de programacin interpretado, dialecto del
3
estndar ECMAScript. Se define como orientado a objetos, basado en prototipos, imperativo, dbilmente
tipado y dinmico.
Se utiliza principalmente en su forma del lado del cliente (client-side), implementado como parte de un
4
navegador web permitiendo mejoras en la interfaz de usuario y pginas web dinmicas aunque existe una
forma de JavaScript del lado del servidor (Server-side JavaScript o SSJS). Su uso en aplicaciones externas a la
web, por ejemplo en documentos PDF, aplicaciones de escritorio (mayoritariamente widgets) es tambin
significativo.
JavaScript se dise con una sintaxis similar al C, aunque adopta nombres y convenciones del lenguaje de
programacin Java. Sin embargo Java y JavaScript no estn relacionados y tienen semnticas y propsitos
diferentes.
Todos los navegadores modernos interpretan el cdigo JavaScript integrado en las pginas web. Para
interactuar con una pgina web se provee al lenguaje JavaScript de una implementacin del Document
Object Model (DOM).
Tradicionalmente se vena utilizando en pginas web HTML para realizar operaciones y nicamente en el
marco de la aplicacin cliente, sin acceso a funciones del servidor. Actualmente es ampliamente utilizado
para enviar y recibir informacin del servidor junto con ayuda de otras tecnologas como AJAX. JavaScript se
interpreta en el agente de usuario al mismo tiempo que las sentencias van descargndose junto con el
cdigo HTML.
Jquery
jQuery es una biblioteca de JavaScript, creada inicialmente por John Resig, que permite simplificar la
manera de interactuar con los documentos HTML, manipular el rbol DOM, manejar eventos, desarrollar
animaciones y agregar interaccin con la tcnica AJAX a pginas web. Fue presentada el 14 de enero de
1
2006 en el BarCamp NYC. jQuery es la biblioteca de JavaScript ms utilizada.
jQuery es software libre y de cdigo abierto, posee un doble licenciamiento bajo la Licencia MIT y la Licencia
2
Pblica General de GNU v2, permitiendo su uso en proyectos libres y privados. jQuery, al igual que otras
bibliotecas, ofrece una serie de funcionalidades basadas en JavaScript que de otra manera requeriran de
mucho ms cdigo, es decir, con las funciones propias de esta biblioteca se logran grandes resultados en
menos tiempo y espacio.
3
Las empresas Microsoft y Nokia anunciaron que incluirn la biblioteca en sus plataformas. Microsoft la
4
aadir en su IDE Visual Studio y la usar junto con los frameworks ASP.NET AJAX y ASP.NET MVC, mientras
que Nokia los integrar con su plataforma Web Run-Time.
pg. 5

UNIDAD CULHUACAN
Descripcin del Proyecto

As se ve el inicio de mi aplicacin. Como podemos ver en la imagen tienen para ingresar su usuario,
contrasea y el rea a la que pertenece, esto es para tener un control de usuarios.
pg. 6

UNIDAD CULHUACAN
Si el usuario y la contrasea es correcta esta me enva al rea en la cual pertenezco, en este caso ventas me
dirigir a la pgina de ventas como se muestra en la imagen.
Si no existe el usuario me manda el siguiente mensaje de error
pg. 7

UNIDAD CULHUACAN
Tambin si el usuario no ha ingresado nada tambin manda el siguiente mensaje.
pg. 8

UNIDAD CULHUACAN
Cdigo
En la carpeta de vistas estn las plantillas que visualizara el usuario, aqu est el cdigo de la plantilla
login.php
<?php
include('../php/conexion.php');
if(isset($_SESSION['id_usu'])==true and isset($_SESSION['id_area'])==true){
if($_SESSION['id_area'] == 'ventas'){
header('Location: ventas.php');
}else if($_SESSION['id_area'] == 'almacen'){
header('Location: almacen.php');
}
En esta parte del cdigo

incluimos
el
archivo
conexin.php esto con la
finalidad de hacer la conexin
con el servidor de base de datos.
Metemos un if el cual
mencionamos si la sesin y el
usuario son correctos lo
mandara a la pgina con el rea
correspondiente.
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Login por Areas</title>
<link href="../css/estilo.css" rel="stylesheet">
Aqu esta lo bsico de la plantilla

HTML en el cual ingresamos lo
de siempre, metadatos, el link
con la referencia a los estilos, el
archivo jquery, y el archivo de
JavaScript que nos permitir
hacer las validaciones de
usuario.
<script src="../js/jquery.js"></script>
<script src="../js/myjava.js"></script>
</head>
pg. 9

UNIDAD CULHUACAN
<body>
<div class="login" align="center">
<h2>INICIE SESION</h2>
<label>Ingrese su Usuario:</label>
<br />
<input type="text" id="usu"/>
<br />
<label>Ingrese su Contrasea:</label>
<br />
<input type="password" id="pass"/>
<br />
<br />
Dentro del bodi lo que ingrese

fue
lo
bsico
para
la
presentacin de mi login, que
fue los textbox, y un botn para
validar el contenido de los
textbox, tambin puse un
textbox en el cual mostraba el
tipo de rea a la cual pertenece
cada usuario.
<label>Elija su Area:</label>
<br />
<select id="area">
<option value="ventas">Ventas</option>
<option value="almacen">Almacen</option>
</select>
<br />
<br />
<button id="ingresar">Ingresar</button>
<br />
<br />
A cada elemento se le agrego un

id para que de esta manera se
pudiera comparar el elemento
que se cre con lo que hay en
las tablas de la tabla o tablas de
la base de datos.
Al igual se le agrego un la bel
con un mensaje, de igual
manera se le agrego un id en el
cual despus de la comparacin
si la conexin falla o en su
defecto no ha escrito nada el
usuario o los campos estn mal,
mostrara el mensaje de error.
<div id="mensaje"></div>
</div>
</body>
</html>
pg. 10

UNIDAD CULHUACAN
Ventas.php
<?php
if(isset($_SESSION['id_usu'])==false or isset($_SESSION['id_area'])==false){
header('Location: login.php');
}else{
if($_SESSION['id_area'] == 'almacen'){
header('Location: almacen.php');
}else{
$nombre = mysql_query("SELECT * FROM usuarios WHERE
id_usu = '".$_SESSION['id_usu']."'");
$nombre2 = mysql_fetch_array($nombre);
}
}
De igual manera mandamos a

llamar a conexin.php para que
haga la conexin con la base de
datos.
Metemos un tipo de proteccin
en el cual especfica que si no
estamos
logueados
no
podremos
acceder
a
almacen.php
o
ventas.php
aunque lo escribamos en el
localhost esto nunca pasara.
Si las contraseas son correctas
este acceder a la pgina
correspondiente.
Al
estar
logueados le pedimos a la base
de datos que seleccione de la
tabla usuarios el nombre de la
persona que se logueo, y se
mostrara en el header.
?>
<head>


usuario.
</head>
pg. 11

UNIDAD CULHUACAN
<body>
<img id="fondo" src="../recursos/ventas_fondo.jpg"/>
<header>
<table align="left" border="0" height="100%" width="100%">
<tr>
<td><b>AREA DE VENTAS</b></td>
<td width="300" align="left"><label>Bienvenido/a:
<?php echo $nombre2['nomb_usu']; ?></label></td>
<td width="50"><a href="../php/logout.php">Salir</a></td>
</tr>
Dentro de este body solo

podremos
destacar
la
presentacin que es una imagen
de fondo, un ttulo, una funcin
que muestra el nombre del
usuario logueado y una funcin
que se manda a llamar para
cerrar sesin.
</table>
</header>
</body>
</html>
pg. 12

UNIDAD CULHUACAN
Almacen.php
<?php
if(isset($_SESSION['id_usu'])==false or isset($_SESSION['id_area'])==false){
header('Location: login.php');
}else{
if($_SESSION['id_area'] == 'ventas'){
header('Location: ventas.php');
}else{
$nombre = mysql_query("SELECT * FROM usuarios
WHERE id_usu = '".$_SESSION['id_usu']."'");
$nombre2 = mysql_fetch_array($nombre);
}
}
?>
De igual manera mandamos a

llamar a conexin.php para que
haga la conexin con la base de
datos.
Metemos un tipo de proteccin
en el cual especfica que si no
estamos
logueados
no
podremos
acceder
a
almacen.php
o
ventas.php
aunque lo escribamos en el
localhost esto nunca pasara.
Si las contraseas son correctas
este acceder a la pgina
correspondiente.
Al
estar
logueados le pedimos a la base
de datos que seleccione de la
tabla usuarios el nombre de la
persona que se logueo, y se
mostrara en el header.

<head>


usuario.
</head>
pg. 13

UNIDAD CULHUACAN
<body>
<img id="fondo" src="../recursos/almacen_fondo.jpg" />
<header>
<table align="left" border="0" height="100%" width="100%">
<tr>
<td><b>AREA DE ALMACEN</b></td>
<td width="300" align="left"><label>Bienvenido/a: <?php echo
$nombre2['nomb_usu']; ?></label></td>
<td width="50"><a href="../php/logout.php">Salir</a></td>
</tr>
</table>
Dentro de este body solo

podremos
destacar
la
presentacin que es una imagen
de fondo, un ttulo, una funcin
que muestra el nombre del
usuario logueado y una funcin
que se manda a llamar para
cerrar sesin.
</header>
</body>
</html>
pg. 14

UNIDAD CULHUACAN
Carpeta de php podemos denotar los elementos que hacen las comparaciones y las validaciones para que el
login fuera posible.
Conexin.php
<?php
$conexion = mysql_connect('localhost', 'root', 'root');
mysql_select_db('sesiones', $conexion);
session_start();
?>
Logout.php
<?php
session_start();
session_destroy();
header('Location: ../vistas/login.php');
En esta parte en una variable llamada conexin le

decimos que haga una conexin con mysql donde
le insertamos el lugar proveniente del servidor de
base de datos, el usuario y la contrasea, con la
funcin mysql_conect le decimos que se conecte
a la base de datos llamada sesiones, y que haga
la autentificacin que metimos en la variable
conexin.
Solo en esta parte denotamos la funcin sesin

start que es para iniciar sesin, la sesin destroy
que es para cerrar sesin y en el header, la
direccin a la que se va a dirigir, y la proteccin
especial que les mencione en los cdigos de
arriba.
?>
Procesar_login.php
<?php
include('conexion.php');
$usu = addslashes($_POST['usu']);
$pass = addslashes($_POST['pass']);
$area = addslashes($_POST['area']);
$usuario = mysql_query("SELECT * FROM usuarios WHERE id_usu = '$usu'");

if(mysql_num_rows($usuario)<1){
echo 'usuario';
}else{
pg. 15

UNIDAD CULHUACAN
$area = mysql_query("SELECT * FROM usuarios WHERE id_usu = '$usu' AND id_area = '$area'");
if(mysql_num_rows($area)<1){
echo 'area';
}else{
$consulta = mysql_query("SELECT * FROM usuarios WHERE id_usu = '$usu' AND pass_usu
= '$pass'");
if(mysql_num_rows($consulta)<1){
echo 'password';
}else{
$consulta2 = mysql_fetch_array($consulta);
$_SESSION['id_usu'] = $consulta2['id_usu'];
$_SESSION['id_area'] = $consulta2['id_area'];
switch($consulta2['id_area']){
case 'ventas':
echo 'ventas';
break;
case 'almacen':
echo 'almacen';
break;
}
}
}
}
?>
En resumidas cuentas lo que hacemos aqu es lo siguiente.

Asignamos variables a cada elemento que obtendremos der la tabla
usuarios creada en mysql y pediremos la peticin por el mtodo
post. A cada variable se le hace una comparativa con los datos que
hay en la base de datos, bsicamente es como una consulta pero el
que va a validar va a ser nuestro archivo de JavaScript.
pg. 16

UNIDAD CULHUACAN
Myjava.js
$(function(){
$('#ingresar').on('click',function(){
var usu = $('#usu').val();
var pass = $('#pass').val();
var area = $('#area').val();
var url = '../php/procesar_login.php';
var total = usu.length * pass.length * area.length;
if (total>0){
$.ajax({
type: 'POST',
url: url,
data: 'usu='+usu+'&pass='+pass+'&area='+area,
success: function(valor){
if(valor == 'usuario'){
$('#mensaje').addClass('error').html('El
ingresado no existe').show(300).delay(3000).hide(300);
usuario
$('#usu').focus();
return false;
}else if(valor == 'area'){
$('#mensaje').addClass('error').html('Usted
pertenece al area seleccionada').show(300).delay(3000).hide(300);
no
$('#area').focus();
return false;
}else if(valor == 'password'){
$('#mensaje').addClass('error').html('Su password es
incorrecto').show(300).delay(3000).hide(300);
pg. 17

UNIDAD CULHUACAN
$('#pass').focus();
return false;
}else if(valor == 'ventas'){
document.location.href = 'ventas.php';
}else if(valor == 'almacen'){
document.location.href = 'almacen.php';
}
}
});
return false;
}else{
$('#mensaje').addClass('error').html('Complete
campos').show(300).delay(3000).hide(300);
todos
los
}
});
});
Hacemos la relacin de las variables de nuestra plantilla procesar_login.php para poder validar los datos y
que el usuario se loguee, de igual manera utilizaremos la peticin por el mtodo post, despus de esto hace
la comparativa con la base de datos en la cual dice que si el usuario no es correcto o la contrasea no es
correcta mandara un mensaje de error el cual nos dice que el usuario no existe, de igual manera si el
usuario es correcto pero la contrasea esta mal mandara un mensaje de error diciendo que la contrasea
es incorrecta, al igual que seleccionar el rea, si se selecciona una que no corresponde, mandara un
mensaje de error diciendo que el usuario no pertenece a esa rea. Ya por ultimo si el usuario no ha
ingresado nada simplemente mandara un mensaje de error diciendo, por favor rellene todos los campos.
pg. 18

UNIDAD CULHUACAN
Hoja de estilos que use para darle presentacin al loguin se llama Estilos.css
@charset "utf-8";
background-image:
-ms-lineargradient(bottom,#08298A,#084B8A);
/* CSS Document */
width:100%;
height:50px;
body{
color:#FFF;
margin:0px;
font-family:"Trebuchet
Helvetica, sans-serif;
MS",
Arial,
min-width:1000px;
header table tr td b{
font-size:30px;
margin-left:20px;
#fondo{
position: fixed;
z-index: -1;
header table tr td label{
top: 0;
margin-left:20px;
left: 0;
width: 100%;
height:100%;
header table tr td a{
margin-left:10px;
text-decoration:none;
header{
background-image:
gradient(bottom,#08298A,#084B8A);
color:#E0E0E0;
linear-
background-image:
-webkit-lineargradient(bottom,#08298A,#084B8A);
background-image:
-moz-lineargradient(bottom,#08298A,#084B8A);
background-image:
gradient(bottom,#08298A,#084B8A);
-o-linear-
.login{
width:300px;
height:auto;
padding:10px;
background-color:#1B44AF;
pg. 19

UNIDAD CULHUACAN
margin:auto;
.login button{
margin-top:100px;
width:30%;
box-shadow:2px 2px 10px #484848;
height:25px;
font-size:14px;
cursor:pointer;
background-color:#ECEF7E;
.login h2{
border:1px solid #515151;
color:#EFF856;
font-weight:bold;
.login label{
.login button:hover{
color:#FFF;
background-color:#E6D93E;
.login input, select{
.error{
width:60%;
background-color:#D50909;
height:25px;
color:#FFF;
outline:none;
padding:5px;
pg. 20

UNIDAD CULHUACAN
Conclusiones
En la programacin Web php, html son lenguajes que permite codificar o preparar documentos de
hipertexto, que viene a ser los lenguajes ms comunes para la construccin de las pginas Web.
Con el comienzo de Internet y la programacin web, se desfasaron los diseos grficos
tradicionales, con lo que se empezaron a disear interfaces concretas para este medio, se ha
optado ms por el diseo sencillo y de fcil comprensin. Hoy en da se implementan ciertos
lenguajes de programacin los cuales ayudan para proteger las pginas web al igual que lo
pueden perjudicar, por eso, para cada aplicacin se debe implementar cierta seguridad a los
elementos que lo componen.
Bibbliografia
Libros de apoyo:
Abramson, I., Abbey, M., Corey, M. J. y Malcher, M. (2009). Oracle Database 11g A Beginner's
Guide: Learn Essential Oracle Database Skills. Estados Unidos: Mc Graw Hill.
ISBN: 978-0-07-160460-4
Silberschatz, A., Korth, H. F. y Sudarshan, S. (2006). Fundamentos de Bases de Datos (5 ed.).

Espaa:
Mc
Graw
Hill.
ISBN: 84-481-4644-1
PHP. La Gua Esencial. Ed. Prentice Hall
Creacin
de
Prentice Hall
Aplicaciones
Web
con
PHP4,
Ratschiller&Gerken
pg. 21

Como Hacer Un Login Sencillo

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Como Hacer Un Login Sencillo

Uploaded by

Copyright:

Available Formats

INSTITUTO POLITCNICO NACIONAL

ESCUELA SUPERIOR DE INGENIERA MECNICA Y ELCTRICA

Ingeniera En Comunicaciones y Electrnica.

Reporte Final: Login PHP, MySQL y JavaScript

* Lopez Lopez Cesar

Fecha: 16| Diciembre| 2015.

INSTITUTO POLITCNICO NACIONAL

INSTITUTO POLITCNICO NACIONAL

INSTITUTO POLITCNICO NACIONAL

INSTITUTO POLITCNICO NACIONAL

INSTITUTO POLITCNICO NACIONAL

Descripcin del Proyecto

INSTITUTO POLITCNICO NACIONAL

Si no existe el usuario me manda el siguiente mensaje de error

INSTITUTO POLITCNICO NACIONAL

Tambin si el usuario no ha ingresado nada tambin manda el siguiente mensaje.

INSTITUTO POLITCNICO NACIONAL

En esta parte del cdigo

<link href="../css/estilo.css" rel="stylesheet">

Aqu esta lo bsico de la plantilla

INSTITUTO POLITCNICO NACIONAL

Dentro del bodi lo que ingrese

A cada elemento se le agrego un

INSTITUTO POLITCNICO NACIONAL

De igual manera mandamos a

<link href="../css/estilo.css" rel="stylesheet">

Aqu esta lo bsico de la plantilla

INSTITUTO POLITCNICO NACIONAL

Dentro de este body solo

INSTITUTO POLITCNICO NACIONAL

De igual manera mandamos a

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

<link href="../css/estilo.css" rel="stylesheet">

Aqu esta lo bsico de la plantilla

INSTITUTO POLITCNICO NACIONAL

Dentro de este body solo

INSTITUTO POLITCNICO NACIONAL

En esta parte en una variable llamada conexin le

Solo en esta parte denotamos la funcin sesin

$usuario = mysql_query("SELECT * FROM usuarios WHERE id_usu = '$usu'");

INSTITUTO POLITCNICO NACIONAL

En resumidas cuentas lo que hacemos aqu es lo siguiente.

INSTITUTO POLITCNICO NACIONAL

INSTITUTO POLITCNICO NACIONAL

INSTITUTO POLITCNICO NACIONAL

header table tr td label{

INSTITUTO POLITCNICO NACIONAL

box-shadow:2px 2px 10px #484848;

border:1px solid #515151;

.login input, select{

INSTITUTO POLITCNICO NACIONAL

Silberschatz, A., Korth, H. F. y Sudarshan, S. (2006). Fundamentos de Bases de Datos (5 ed.).

PHP. La Gua Esencial. Ed. Prentice Hall

You might also like