Como Hacer Un Login Sencillo
Transcript of Como Hacer Un Login Sencillo
-
7/25/2019 Como Hacer Un Login Sencillo
1/21
INSTITUTO POLITCNICO NACIONALESCUELASUPERIORDEINGENIERAMECNICAYELCTRICA
UNIDADCULHUACAN
pg. 1
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.
-
7/25/2019 Como Hacer Un Login Sencillo
2/21
INSTITUTO POLITCNICO NACIONALESCUELASUPERIORDEINGENIERAMECNICAYELCTRICA
UNIDADCULHUACAN
pg. 2
CONTENIDO
Pg. Introduccin...3
1. Marco Terico.............4
2. Descripcin del Proyecto6
3. Explicacin del Cdigo9
3. Conclusiones..21
4. B ib li ogra fa.21
-
7/25/2019 Como Hacer Un Login Sencillo
3/21
INSTITUTO POLITCNICO NACIONALESCUELASUPERIORDEINGENIERAMECNICAYELCTRICA
UNIDADCULHUACAN
pg. 3
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 JavaScriptcomo 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, enese caso el servidor entrega el cdigo Java a ejecutar y es la mquina virtual Java del ordenador del usuario
quien realiza esa ejecucin.
-
7/25/2019 Como Hacer Un Login Sencillo
4/21
INSTITUTO POLITCNICO NACIONALESCUELASUPERIORDEINGENIERAMECNICAYELCTRICA
UNIDADCULHUACAN
pg. 4
Marco Terico
PHP
PHP es un lenguaje de programacinde uso general decdigo del lado del servidor originalmente diseado
para eldesarrollo web decontenido dinmico.Fue uno de los primeros lenguajes de programacin del lado
del servidor que se podan incorporar directamente en el documentoHTML 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 porRasmus Lerdorf en 1995. Actualmente el lenguaje sigue siendo desarrollado
con nuevas funciones por el grupo PHP.1 Este lenguaje forma parte del software libre publicado bajo la
licencia PHP,que es incompatible con laLicencia Pblica General de GNU debido a las restricciones del uso
del trmino PHP.2
MySQL
MySQL es un sistema de gestin de bases de datos relacional,multihilo ymultiusuario con ms de seis
millones de instalaciones.1MySQL AB desde enero de 2008 una subsidiaria deSun Microsystems y sta a
su vez deOracle Corporation desde abril de 2009
desarrolla MySQL comosoftware libre en un esquemade licenciamiento dual.
Por un lado se ofrece bajo laGNU 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 enANSI C.
Al contrario de proyectos comoApache,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 porDavid Axmark,Allan Larsson yMichael Widenius
https://es.wikipedia.org/wiki/Lenguaje_de_programaci%C3%B3n_de_prop%C3%B3sito_generalhttps://es.wikipedia.org/wiki/Script_del_lado_del_servidorhttps://es.wikipedia.org/wiki/Desarrollo_webhttps://es.wikipedia.org/wiki/Contenido_din%C3%A1micohttps://es.wikipedia.org/wiki/HTMLhttps://es.wikipedia.org/wiki/L%C3%ADnea_de_comandoshttps://es.wikipedia.org/wiki/Interfaz_gr%C3%A1fica_de_usuariohttps://es.wikipedia.org/wiki/Facebookhttps://es.wikipedia.org/wiki/Rasmus_Lerdorfhttps://es.wikipedia.org/wiki/PHP#cite_note-historia-1https://es.wikipedia.org/wiki/PHP#cite_note-historia-1https://es.wikipedia.org/wiki/PHP#cite_note-historia-1https://es.wikipedia.org/wiki/Software_librehttps://es.wikipedia.org/wiki/Licencia_PHPhttps://es.wikipedia.org/wiki/GNU_General_Public_Licensehttps://es.wikipedia.org/wiki/PHP#cite_note-licencia-2https://es.wikipedia.org/wiki/PHP#cite_note-licencia-2https://es.wikipedia.org/wiki/PHP#cite_note-licencia-2https://es.wikipedia.org/wiki/Sistema_de_gesti%C3%B3n_de_bases_de_datoshttps://es.wikipedia.org/wiki/Modelo_relacionalhttps://es.wikipedia.org/wiki/Hilo_de_ejecuci%C3%B3nhttps://es.wikipedia.org/wiki/Multiusuariohttps://es.wikipedia.org/wiki/MySQL#cite_note-1https://es.wikipedia.org/wiki/MySQL#cite_note-1https://es.wikipedia.org/wiki/MySQL_ABhttps://es.wikipedia.org/wiki/Sun_Microsystemshttps://es.wikipedia.org/wiki/Oracle_Corporationhttps://es.wikipedia.org/wiki/Software_librehttps://es.wikipedia.org/wiki/Licencia_p%C3%BAblica_general_de_GNUhttps://es.wikipedia.org/wiki/Software_propietariohttps://es.wikipedia.org/wiki/ANSI_Chttps://es.wikipedia.org/wiki/Servidor_HTTP_Apachehttps://es.wikipedia.org/wiki/Derechos_de_autorhttps://es.wikipedia.org/wiki/Internethttps://es.wikipedia.org/w/index.php?title=David_Axmark&action=edit&redlink=1https://es.wikipedia.org/w/index.php?title=Allan_Larsson&action=edit&redlink=1https://es.wikipedia.org/wiki/Michael_Wideniushttps://es.wikipedia.org/wiki/Michael_Wideniushttps://es.wikipedia.org/w/index.php?title=Allan_Larsson&action=edit&redlink=1https://es.wikipedia.org/w/index.php?title=David_Axmark&action=edit&redlink=1https://es.wikipedia.org/wiki/Internethttps://es.wikipedia.org/wiki/Derechos_de_autorhttps://es.wikipedia.org/wiki/Servidor_HTTP_Apachehttps://es.wikipedia.org/wiki/ANSI_Chttps://es.wikipedia.org/wiki/Software_propietariohttps://es.wikipedia.org/wiki/Licencia_p%C3%BAblica_general_de_GNUhttps://es.wikipedia.org/wiki/Software_librehttps://es.wikipedia.org/wiki/Oracle_Corporationhttps://es.wikipedia.org/wiki/Sun_Microsystemshttps://es.wikipedia.org/wiki/MySQL_ABhttps://es.wikipedia.org/wiki/MySQL#cite_note-1https://es.wikipedia.org/wiki/Multiusuariohttps://es.wikipedia.org/wiki/Hilo_de_ejecuci%C3%B3nhttps://es.wikipedia.org/wiki/Modelo_relacionalhttps://es.wikipedia.org/wiki/Sistema_de_gesti%C3%B3n_de_bases_de_datoshttps://es.wikipedia.org/wiki/PHP#cite_note-licencia-2https://es.wikipedia.org/wiki/GNU_General_Public_Licensehttps://es.wikipedia.org/wiki/Licencia_PHPhttps://es.wikipedia.org/wiki/Software_librehttps://es.wikipedia.org/wiki/PHP#cite_note-historia-1https://es.wikipedia.org/wiki/Rasmus_Lerdorfhttps://es.wikipedia.org/wiki/Facebookhttps://es.wikipedia.org/wiki/Interfaz_gr%C3%A1fica_de_usuariohttps://es.wikipedia.org/wiki/L%C3%ADnea_de_comandoshttps://es.wikipedia.org/wiki/HTMLhttps://es.wikipedia.org/wiki/Contenido_din%C3%A1micohttps://es.wikipedia.org/wiki/Desarrollo_webhttps://es.wikipedia.org/wiki/Script_del_lado_del_servidorhttps://es.wikipedia.org/wiki/Lenguaje_de_programaci%C3%B3n_de_prop%C3%B3sito_general -
7/25/2019 Como Hacer Un Login Sencillo
5/21
INSTITUTO POLITCNICO NACIONALESCUELASUPERIORDEINGENIERAMECNICAYELCTRICA
UNIDADCULHUACAN
pg. 5
avaScript
.JavaScript (abreviado comnmente "JS") es un lenguaje de programacin interpretado, dialecto del
estndarECMAScript.Se define comoorientado a objetos,3basado en prototipos,imperativo,dbilmente
tipado y dinmico.
Se utiliza principalmente en su forma del lado del cliente (client-side), implementado como parte de un
navegador web permitiendo mejoras en lainterfaz de usuario ypginas web dinmicas4aunque existe una
forma de JavaScript dellado del servidor (Server-side JavaScript oSSJS). Su uso enaplicaciones externas a la
web,por ejemplo en documentos PDF,aplicaciones de escritorio (mayoritariamente widgets)es tambin
significativo.
JavaScript se dise con una sintaxis similar alC,aunque adopta nombres y convenciones del lenguaje de
programacin Java.Sin embargoJava y JavaScript no estn relacionados y tienen semnticas y propsitosdiferentes.
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 webHTML para realizar operaciones y nicamente en el
marco de laaplicacin cliente,sin acceso a funciones delservidor.Actualmente es ampliamente utilizado
para enviar y recibir informacin del servidor junto con ayuda de otras tecnologas comoAJAX.JavaScript se
interpreta en el agente de usuario al mismo tiempo que las sentencias van descargndose junto con el
cdigoHTML.
Jquery
jQuery es una biblioteca de JavaScript, creada inicialmente por John Resig, que permite simplificar la
manera de interactuar con los documentosHTML,manipular el rbolDOM,manejar eventos, desarrollar
animaciones y agregar interaccin con la tcnicaAJAX a pginas web. Fue presentada el 14 de enero de
2006 en elBarCamp NYC. jQuery es la biblioteca de JavaScript ms utilizada.1
jQuery essoftware libre y de cdigo abierto,posee un doble licenciamiento bajo laLicencia MIT y laLicencia
Pblica General de GNU v2, permitiendo su uso en proyectoslibres yprivados.2jQuery, 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.
Las empresas Microsoft y Nokia anunciaron que incluirn la biblioteca en sus plataformas.3 Microsoft la
aadir en suIDEVisual Studio4y la usar junto con los frameworksASP.NET AJAX yASP.NET MVC,mientras
que Nokia los integrar con su plataformaWeb Run-Time.
https://es.wikipedia.org/wiki/Lenguaje_de_programaci%C3%B3n_interpretadohttps://es.wikipedia.org/wiki/ECMAScripthttps://es.wikipedia.org/wiki/Programaci%C3%B3n_orientada_a_objetoshttps://es.wikipedia.org/wiki/JavaScript#cite_note-3https://es.wikipedia.org/wiki/JavaScript#cite_note-3https://es.wikipedia.org/wiki/Programaci%C3%B3n_basada_en_prototiposhttps://es.wikipedia.org/wiki/Programaci%C3%B3n_imperativahttps://es.wikipedia.org/wiki/Lado_del_clientehttps://es.wikipedia.org/wiki/Navegador_webhttps://es.wikipedia.org/wiki/Interfaz_de_usuariohttps://es.wikipedia.org/wiki/P%C3%A1gina_webhttps://es.wikipedia.org/wiki/JavaScript#cite_note-4https://es.wikipedia.org/wiki/JavaScript#cite_note-4https://es.wikipedia.org/wiki/JavaScript#cite_note-4https://es.wikipedia.org/wiki/Script_del_lado_del_servidorhttps://es.wikipedia.org/w/index.php?title=Server-side_JavaScript&action=edit&redlink=1https://es.wikipedia.org/w/index.php?title=SSJS&action=edit&redlink=1https://es.wikipedia.org/wiki/Aplicaci%C3%B3n_inform%C3%A1ticahttps://es.wikipedia.org/wiki/World_Wide_Webhttps://es.wikipedia.org/wiki/PDFhttps://es.wikipedia.org/wiki/Widgethttps://es.wikipedia.org/wiki/Lenguaje_de_programaci%C3%B3n_Chttps://es.wikipedia.org/wiki/Lenguaje_de_programaci%C3%B3n_Javahttps://es.wikipedia.org/wiki/Lenguaje_de_programaci%C3%B3n_Javahttps://es.wikipedia.org/wiki/Lenguaje_de_programaci%C3%B3n_Javahttps://es.wikipedia.org/wiki/Document_Object_Modelhttps://es.wikipedia.org/wiki/Document_Object_Modelhttps://es.wikipedia.org/wiki/HTMLhttps://es.wikipedia.org/wiki/Cliente_%28inform%C3%A1tica%29https://es.wikipedia.org/wiki/Servidorhttps://es.wikipedia.org/wiki/AJAXhttps://es.wikipedia.org/wiki/Agentes_de_usuariohttps://es.wikipedia.org/wiki/HTMLhttps://es.wikipedia.org/wiki/Biblioteca_%28inform%C3%A1tica%29https://es.wikipedia.org/wiki/JavaScripthttps://es.wikipedia.org/wiki/John_Resighttps://es.wikipedia.org/wiki/HTMLhttps://es.wikipedia.org/wiki/Document_Object_Modelhttps://es.wikipedia.org/wiki/AJAXhttps://es.wikipedia.org/wiki/BarCamphttps://es.wikipedia.org/wiki/JQuery#cite_note-1https://es.wikipedia.org/wiki/JQuery#cite_note-1https://es.wikipedia.org/wiki/JQuery#cite_note-1https://es.wikipedia.org/wiki/Software_libre_y_de_c%C3%B3digo_abiertohttps://es.wikipedia.org/wiki/MIT_Licensehttps://es.wikipedia.org/wiki/GNU_General_Public_Licensehttps://es.wikipedia.org/wiki/GNU_General_Public_Licensehttps://es.wikipedia.org/wiki/Software_librehttps://es.wikipedia.org/wiki/Software_propietariohttps://es.wikipedia.org/wiki/JQuery#cite_note-2https://es.wikipedia.org/wiki/JQuery#cite_note-2https://es.wikipedia.org/wiki/JQuery#cite_note-2https://es.wikipedia.org/wiki/Microsofthttps://es.wikipedia.org/wiki/Nokiahttps://es.wikipedia.org/wiki/JQuery#cite_note-3https://es.wikipedia.org/wiki/JQuery#cite_note-3https://es.wikipedia.org/wiki/JQuery#cite_note-3https://es.wikipedia.org/wiki/Entorno_de_desarrollo_integradohttps://es.wikipedia.org/wiki/Microsoft_Visual_Studiohttps://es.wikipedia.org/wiki/Microsoft_Visual_Studiohttps://es.wikipedia.org/wiki/Microsoft_Visual_Studiohttps://es.wikipedia.org/wiki/ASP.NET_AJAXhttps://es.wikipedia.org/w/index.php?title=ASP.NET_MVC&action=edit&redlink=1https://es.wikipedia.org/w/index.php?title=Web_Run-Time&action=edit&redlink=1https://es.wikipedia.org/w/index.php?title=Web_Run-Time&action=edit&redlink=1https://es.wikipedia.org/w/index.php?title=ASP.NET_MVC&action=edit&redlink=1https://es.wikipedia.org/wiki/ASP.NET_AJAXhttps://es.wikipedia.org/wiki/Microsoft_Visual_Studiohttps://es.wikipedia.org/wiki/Microsoft_Visual_Studiohttps://es.wikipedia.org/wiki/Entorno_de_desarrollo_integradohttps://es.wikipedia.org/wiki/JQuery#cite_note-3https://es.wikipedia.org/wiki/Nokiahttps://es.wikipedia.org/wiki/Microsofthttps://es.wikipedia.org/wiki/JQuery#cite_note-2https://es.wikipedia.org/wiki/Software_propietariohttps://es.wikipedia.org/wiki/Software_librehttps://es.wikipedia.org/wiki/GNU_General_Public_Licensehttps://es.wikipedia.org/wiki/GNU_General_Public_Licensehttps://es.wikipedia.org/wiki/MIT_Licensehttps://es.wikipedia.org/wiki/Software_libre_y_de_c%C3%B3digo_abiertohttps://es.wikipedia.org/wiki/JQuery#cite_note-1https://es.wikipedia.org/wiki/BarCamphttps://es.wikipedia.org/wiki/AJAXhttps://es.wikipedia.org/wiki/Document_Object_Modelhttps://es.wikipedia.org/wiki/HTMLhttps://es.wikipedia.org/wiki/John_Resighttps://es.wikipedia.org/wiki/JavaScripthttps://es.wikipedia.org/wiki/Biblioteca_%28inform%C3%A1tica%29https://es.wikipedia.org/wiki/HTMLhttps://es.wikipedia.org/wiki/Agentes_de_usuariohttps://es.wikipedia.org/wiki/AJAXhttps://es.wikipedia.org/wiki/Servidorhttps://es.wikipedia.org/wiki/Cliente_%28inform%C3%A1tica%29https://es.wikipedia.org/wiki/HTMLhttps://es.wikipedia.org/wiki/Document_Object_Modelhttps://es.wikipedia.org/wiki/Document_Object_Modelhttps://es.wikipedia.org/wiki/Lenguaje_de_programaci%C3%B3n_Javahttps://es.wikipedia.org/wiki/Lenguaje_de_programaci%C3%B3n_Javahttps://es.wikipedia.org/wiki/Lenguaje_de_programaci%C3%B3n_Javahttps://es.wikipedia.org/wiki/Lenguaje_de_programaci%C3%B3n_Chttps://es.wikipedia.org/wiki/Widgethttps://es.wikipedia.org/wiki/PDFhttps://es.wikipedia.org/wiki/World_Wide_Webhttps://es.wikipedia.org/wiki/Aplicaci%C3%B3n_inform%C3%A1ticahttps://es.wikipedia.org/w/index.php?title=SSJS&action=edit&redlink=1https://es.wikipedia.org/w/index.php?title=Server-side_JavaScript&action=edit&redlink=1https://es.wikipedia.org/wiki/Script_del_lado_del_servidorhttps://es.wikipedia.org/wiki/JavaScript#cite_note-4https://es.wikipedia.org/wiki/P%C3%A1gina_webhttps://es.wikipedia.org/wiki/Interfaz_de_usuariohttps://es.wikipedia.org/wiki/Navegador_webhttps://es.wikipedia.org/wiki/Lado_del_clientehttps://es.wikipedia.org/wiki/Programaci%C3%B3n_imperativahttps://es.wikipedia.org/wiki/Programaci%C3%B3n_basada_en_prototiposhttps://es.wikipedia.org/wiki/JavaScript#cite_note-3https://es.wikipedia.org/wiki/Programaci%C3%B3n_orientada_a_objetoshttps://es.wikipedia.org/wiki/ECMAScripthttps://es.wikipedia.org/wiki/Lenguaje_de_programaci%C3%B3n_interpretado -
7/25/2019 Como Hacer Un Login Sencillo
6/21
INSTITUTO POLITCNICO NACIONALESCUELASUPERIORDEINGENIERAMECNICAYELCTRICA
UNIDADCULHUACAN
pg. 6
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.
-
7/25/2019 Como Hacer Un Login Sencillo
7/21
INSTITUTO POLITCNICO NACIONALESCUELASUPERIORDEINGENIERAMECNICAYELCTRICA
UNIDADCULHUACAN
pg. 7
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
-
7/25/2019 Como Hacer Un Login Sencillo
8/21
INSTITUTO POLITCNICO NACIONALESCUELASUPERIORDEINGENIERAMECNICAYELCTRICA
UNIDADCULHUACAN
pg. 8
Tambin si el usuario no ha ingresado nada tambin manda el siguiente mensaje.
-
7/25/2019 Como Hacer Un Login Sencillo
9/21
INSTITUTO POLITCNICO NACIONALESCUELASUPERIORDEINGENIERAMECNICAYELCTRICA
UNIDADCULHUACAN
pg. 9
Cdigo
En la carpeta de vistas estn las plantillas que visualizara el usuario, aqu est el cdigo de la plantilla
login.php
Login por Areas
En esta parte del c
incluimos el a
conexin.php esto co
finalidad de hacer la con
con el servidor de base de d
Metemos un if el
mencionamos si la sesin
usuario son correctos
mandara a la pgina con e
correspondiente.
Aqu esta lo bsico de la plHTML en el cual ingresam
de siempre, metadatos, e
con la referencia a los esti
archivo jquery, y el archi
JavaScript que nos per
hacer las validaciones
usuario.
-
7/25/2019 Como Hacer Un Login Sencillo
10/21
INSTITUTO POLITCNICO NACIONALESCUELASUPERIORDEINGENIERAMECNICAYELCTRICA
UNIDADCULHUACAN
pg. 10
INICIE SESION
Ingrese su Usuario:
Ingrese su Contrasea:
Elija su Area:
Ventas
Almacen
Ingresar
Dentro del bodi lo que ingrese
fue lo bsico para la
presentacin de mi login, que
fue los textbox, y un botn paravalidar el contenido de los
textbox, tambin puse un
textbox en el cual mostraba el
tipo de rea a la cual pertenece
cada usuario.
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 dela 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 mensa e de error.
-
7/25/2019 Como Hacer Un Login Sencillo
11/21
INSTITUTO POLITCNICO NACIONALESCUELASUPERIORDEINGENIERAMECNICAYELCTRICA
UNIDADCULHUACAN
pg. 11
Ventas.php
-
7/25/2019 Como Hacer Un Login Sencillo
12/21
INSTITUTO POLITCNICO NACIONALESCUELASUPERIORDEINGENIERAMECNICAYELCTRICA
UNIDADCULHUACAN
pg. 12
AREA DE VENTAS
Bienvenido/a:
Salir
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 paracerrar sesin.
-
7/25/2019 Como Hacer Un Login Sencillo
13/21
INSTITUTO POLITCNICO NACIONALESCUELASUPERIORDEINGENIERAMECNICAYELCTRICA
UNIDADCULHUACAN
pg. 13
Almacen.php
-
7/25/2019 Como Hacer Un Login Sencillo
14/21
INSTITUTO POLITCNICO NACIONALESCUELASUPERIORDEINGENIERAMECNICAYELCTRICA
UNIDADCULHUACAN
pg. 14
AREA DE ALMACEN
Bienvenido/a:
Salir
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 funcinque se manda a llamar para
cerrar sesin.
-
7/25/2019 Como Hacer Un Login Sencillo
15/21
INSTITUTO POLITCNICO NACIONALESCUELASUPERIORDEINGENIERAMECNICAYELCTRICA
UNIDADCULHUACAN
pg. 15
Carpeta de php podemos denotar los elementos que hacen las comparaciones y las validaciones para que el
login fuera posible.
Conexin.php
Logout.php
Procesar_login.php
-
7/25/2019 Como Hacer Un Login Sencillo
16/21
INSTITUTO POLITCNICO NACIONALESCUELASUPERIORDEINGENIERAMECNICAYELCTRICA
UNIDADCULHUACAN
pg. 16
$area = mysql_query("SELECT * FROM usuarios WHERE id_usu = '$usu' AND id_area = '$area'");
if(mysql_num_rows($area)
-
7/25/2019 Como Hacer Un Login Sencillo
17/21
INSTITUTO POLITCNICO NACIONALESCUELASUPERIORDEINGENIERAMECNICAYELCTRICA
UNIDADCULHUACAN
pg. 17
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 usuario
ingresado no existe').show(300).delay(3000).hide(300);
$('#usu').focus();
return false;
}else if(valor == 'area'){
$('#mensaje').addClass('error').html('Usted no
pertenece al area seleccionada').show(300).delay(3000).hide(300);
$('#area').focus();
return false;
}else if(valor == 'password'){
$('#mensaje').addClass('error').html('Su password es
incorrecto').show(300).delay(3000).hide(300);
-
7/25/2019 Como Hacer Un Login Sencillo
18/21
INSTITUTO POLITCNICO NACIONALESCUELASUPERIORDEINGENIERAMECNICAYELCTRICA
UNIDADCULHUACAN
pg. 18
$('#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 todos los
campos').show(300).delay(3000).hide(300);
}
});
});
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.
-
7/25/2019 Como Hacer Un Login Sencillo
19/21
INSTITUTO POLITCNICO NACIONALESCUELASUPERIORDEINGENIERAMECNICAYELCTRICA
UNIDADCULHUACAN
pg. 19
Hoja de estilos que use para darle presentacin al loguin se llama Estilos.css
@charset "utf-8";
/* CSS Document */
body{
margin:0px;
font-family:"Trebuchet MS", Arial,
Helvetica, sans-serif;
min-width:1000px;
}
#fondo{
position: fixed;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height:100%;
}
header{
background-image: linear-
gradient(bottom,#08298A,#084B8A);
background-image: -webkit-linear-gradient(bottom,#08298A,#084B8A);
background-image: -moz-linear-
gradient(bottom,#08298A,#084B8A);
background-image: -o-linear-
gradient(bottom,#08298A,#084B8A);
background-image: -ms-linear-
gradient(bottom,#08298A,#084B8A);
width:100%;
height:50px;
color:#FFF;
}
header table tr td b{
font-size:30px;
margin-left:20px;
}
header table tr td label{
margin-left:20px;
}
header table tr td a{
margin-left:10px;
text-decoration:none;
color:#E0E0E0;
}
.login{
width:300px;
height:auto;
padding:10px;
background-color:#1B44AF;
-
7/25/2019 Como Hacer Un Login Sencillo
20/21
INSTITUTO POLITCNICO NACIONALESCUELASUPERIORDEINGENIERAMECNICAYELCTRICA
UNIDADCULHUACAN
pg. 20
margin:auto;
margin-top:100px;
box-shadow:2px 2px 10px #484848;
font-size:14px;
}
.login h2{
color:#EFF856;
}
.login label{
color:#FFF;
}
.login input, select{
width:60%;
height:25px;
outline:none;
}
.login button{
width:30%;
height:25px;
cursor:pointer;
background-color:#ECEF7E;
border:1px solid #515151;
font-weight:bold;
}
.login button:hover{
background-color:#E6D93E;
}
.error{
background-color:#D50909;
color:#FFF;
padding:5px;
}
-
7/25/2019 Como Hacer Un Login Sencillo
21/21
INSTITUTO POLITCNICO NACIONALESCUELASUPERIORDEINGENIERAMECNICAYELCTRICA
UNIDADCULHUACAN
pg. 21
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(5aed.).
Espaa: Mc Graw Hill.
ISBN: 84-481-4644-1
PHP. La Gua Esencial. Ed. Prentice Hall
Creacin de Aplicaciones Web con PHP4, Ratschiller&Gerken
Prentice Hall