Inicio

Pro gramaci n

Aplicacio nes

Event o s

Diseo

Herramient as

T ips

No so t ro s

Login en Android usando PHP y MySQL

Escrito por sebastiancipolat | Thursday, July 5, 2012 a las 6:47 pm | 226 Comentarios

PDFmyURL.com

Hola amigos de Android, el da de hoy les voy a mostrar cmo hacer una aplicacin que simule el logueo o identificacin en un
sistema alojado en la nube como las que usamos todos los das en diversas aplicaciones.
El tutorial estar divido en 2 partes, la parte web la cual describir a continuacin y la de Android. De momento el API de android no
provee ningn mtodo que permita conectarse a travs de internet directamente a una Base de Datos Remota y ejecutar una
consulta dentro de ella. Para poder realizar esto se puede utilizar un web service al cul se pueda acceder a el pasando diversos
parmetros nos devuelve ya sea en formato XML o JSON, nuestro trabajo ser obtener esa informacin devuelta y utilizarla en
nuestra app.

Antes de seguir recomiendo haber ledo los siguientes tutoriales:

http://androideity.com/2011/09/21/trabajando-con-threads-en-android-iii/
http://androideity.com/2012/06/03/consultar-un-servicio-web-en-android-parte-i/
http://androideity.com/2012/05/19/tutorial-de-widget-tercera-parte-3/
http://androideity.com/2011/10/19/intents-en-android-implicitos/
http://androideity.com/2011/10/17/trabajando-con-intents-en-android-overview/
Bsicamente el funcionamiento sera algo as.

PDFmyURL.com

Cuando todo est funcionando la aplicacin debera hacer lo siguiente:

Parte web
PDFmyURL.com

Para realizar la parte web utilic como lenguaje en la parte de servidor PHP (Version 5.3.1), como Base de Datos MySQL y como
servidor Web Apache. Vamos a simular la nube para realizar pruebas de manera local para eso podemos utilizar XAMPP que pueden
descargar del sitio oficial, adems est disponible para varios sistemas operativo y es de muy fcil instalacin y uso. No voy a
explicar cmo instalarlo y configurarlo porque no es el objetivo de este tutorial pero si tienen algun consulta pueden visitar su
documentacin: http://www.apachefriends.org/es/faq-xampp.html

Base de Datos:
Como ya les comente utilizaremos MySQL, podemos aprovechar la utilidad que provee xampp llamada phpmyadmin por lo cual
accederemos mediante http://127.0.0.1/phpmyadmin luego de loguearnos. *si tuvieron algn problema pueden verificar la
documentacin oficial Vamos a crear una BD llamada droid_login como lo muestra la siguiente imagen:

O si vamos a la solapa SQL podemos ejecutar la siguiente consulta:

CREATE DATABASE droid_login;

Al ser la aplicacin solamente un ejemplo y al no tener un uso real crearemos una tabla llamada usuarios en donde guardaremos
el nombre de usuario y password juntos.
PDFmyURL.com

En la vida real para dotar de mayor seguridad el password debera guardarse encriptado y tal vez el usuario y password en tablas
separadas.
Podemos crear la tabla ejecutando esta simple consulta:
Create T able usuarios( username varchar(10) NOT NULL , passw varchar(20) NOT NULL )
Con esto basta por ahora con la base de datos.
Dentro de la carpeta htdocs crearemos una carpeta llamada droidlogin dentro de la cual colocaremos los siguientes archivos que
podrn descargar ms abajo, estos sern la parte web de nuestro sistema.
Podrn ver el contenido de estos archivos descargndolo de ms abajo, recomiendo estudiar el funcionamiento de cada uno para
una mayor comprension.
config.php En este se define el nombre de la base de datos su usuario, password y la ip del servidor.
Actualizacion 25/07/12
Es necesario modificar este archivo para poder adecuarlo a la configuracion de la BD de cada uno.
deberan modificar el valor que esta en rojo.

<?php
/**
* Database config variables
*/
DB_HOST Hace referencia a donde se encuentra la BD si es en el mismo equipo utilizaremos localhost o 127.0.0.1 si se
encuentra
PDFmyURL.com

en otro equipo deberemos colocar su direccin IP.

define(DB_HOST, localhost);
DB_USER cambiar por el nombre de usuario definido en la configuracion de la BD
define(DB_USER, username);
DB_PASSWORD Modificar por el password elegido
define(DB_PASSWORD, password);
DB_DAT ABASE Nombre de la base de datos reemplazar si se utilizo otro diferente al mencionado anteriormente
define(DB_DATABASE, droidlogin);
?>

connectbd.php Provee los mtodos para conectarse y desconectarse a la BD.

funciones_bd.php Provee los procedimientos para interactuar con la BD e insertar nuevos usuarios, validar existencia de
usuarios y validar un login
login.html

Mediante esta pgina podemos loguearnos mediante el navegador sirve para observar la respuesta del sistema.

acces.php Se encarga de devolver en notacion Json si el logueo es valido

adduser.html Permite realizar alta de usuarios verificando previamente su existencia utiliza adduser.php
Para poder comprobar qu es lo que har la aplicacin podemos verlo a travs del navegador pero primero debemos crear un
usuario.
Accedemos a http://127.0.0.1/droidlogin/adduser.html
podemos ingrear
PDFmyURL.com

usuario: test
password: test01

Luego al clickear en Agregar

Si queremos volver a agregar el mismo usuario, nos mostrar el siguiente mensaje:

Este usuario ya existe ing rese otro diferente!
por lo que la aplicacion tambien controlara que no halla usuario repetidos.
Podemos verificar directamente desde la BD los usuarios creados:

PDFmyURL.com

Antes de pasar a la parte de Android vamos a probar si todo funciona correctamente.

Para lo cual utilizaremos el archivo login.html
Accederemos a el mediante http://127.0.0.1/droidlogin/login.html
veremos lo siguiente:

PDFmyURL.com

Ingresamos el usuario y password creados anteriormente.

Si configuramos todo correctamente y nada falla deberiamos acceder al archivo acces.php el cual nos devolvera en notacion json
si el logueo fue correcto o no.
[{"logstatus":"0"}] > logueo invalido > debemos verificar que los datos ingresados sean iguales a los creados en la BD.
[{"logstatus":"1"}] > logueo valido
Basicamente esto que nos devuelve el servidor es lo que leera la app de android.
si todo funciono bien pueden seguir con la sig. parte.

Parte Android:
Al proyecto lo llame droidlogin, lo podrn descargar del repositorio.

PDFmyURL.com

Para la UI he tratado de inspirarme en el contenido link http://inspired-ui.com/tagged/logins aunque son de iOS sirven igual. He
creado 2 interfaces para cuando el telfono se encuentre en posicion horizontal (layout-land)

PDFmyURL.com

o vertical (layout-port)

Para hacer la interfaz ms agradable hice que los EditText tengan bordes redondeados, encontr en Stackoverflow un post sobre
esto.
La pantalla de login es muy simple tiene un Button y 2 TextView que al presionarlos cada uno har una accin diferente.
Se encuentran definidos en los siguientes archivos:
/res/layout-port/main.xml

PDFmyURL.com

PDFmyURL.com

PDFmyURL.com

/res/layout-land/main.xml

PDFmyURL.com

PDFmyURL.com

El xml que utilic para hacer los bordes redondeados es este:

res/drawable-ldpi/edittext_rounded_corners.xml

PDFmyURL.com

PDFmyURL.com

Ahora el AndroidManifest.xml .
Como pueden ver hay definidas 2 activities definidos.

Ahora veremos el cdigo principal, comento en cada caso.

/src/test/Droidlogin/Login.java
PDFmyURL.com

En la lnea nmero 35 es necesario modificar esa direccin IP y reemplazarla por la del PC en el que est el servidor web con los
archivos descritos anteriormente.
Si van a colocar esto en internet deberan usar el dominio correpospondiente.
Tambien recorriendo revisar el Logcat para entender mejor el funcionamiento.

PDFmyURL.com

PDFmyURL.com

PDFmyURL.com

Como vemos, utilizo una clase interna asynclogin la cual es una AsyncTask para mostrar el progressdialog hasta que termina de
realizarse la validacin.
Desde esta clase redirecciono al usuario al HiScreen o en el caso de ser el logueo invlido vibramos el telfono y mostramos el
mensaje de error.
Tambin he creado una clase para manejar con mayor facilidad el envo de peticiones a nuestro web service. El manejo de su
respuesta se encuentra en: /src/test/Droidlogin/library/Httppostaux.java

PDFmyURL.com

PDFmyURL.com

Ahora veremos la otra activity a la que seremos redigiridos si el login es correcto.

Para esta tambin defin dos layouts diferentes para cubrir el cambio de la orientacion de la pantalla.
/res/layout-port/lay_screen.xml

PDFmyURL.com

/res/layout-land/lay_screen.xml
PDFmyURL.com

PDFmyURL.com

Ahora el cdigo de su clase:

/src/test/Droidlogin/HiScreen.java

PDFmyURL.com

Luego de todo esto,

Si todo fue configurado y funciona correctamente veremos al HiScreen que coment anteriormente.

PDFmyURL.com

Cuando el usuario presiona Cerrar sesion volvemos a la ventana de logueo.

Pueden bajar el cdigo completo desde nuestro repositorio, podrn acceder clickeando en la imagen ms abajo.
En el mismo vern que hay una archivo llamado droidloginweb.zip dentro se encuentran droidlogin. Debern mover esa carpeta al
servidor web en la carpeta htdocs ya que en ella se encuentran todos los archivos para la parte web.
Tambin inclu la carpeta droidlogin suelta.

ACT UALIZACIN 07/12/12

Dada la cantidad de comentarios en el post he realizado un video en el que les explico paso a paso como hacer andar este ejemplo,
espero que les sirva:

PDFmyURL.com

Recuerden que si bajan todo el contenido comprimido y lo importan al Eclipse, luego debern remover las carpetas mencionadas del
proyecto.
Pueden Descargar el codigo utilizado en nuestro tutorial desde nuestro repositorio.
para acceder simplemente den click en la siguiente imagen:

Espero que les haya gustado el tutorial. Cualquier consulta o sugerencia no duden en hacerla en el cuadro de comentarios de
abajo.
Saludos
Sebastin.
T e gust este tutorial? Comprtelo!

Categora: Programacin | Etiquetas: activity, android, Aplicaciones, aplicaciones android, conociendo Android, tutorial | Permalink
PDFmyURL.com

Comparte este post

394

98

14.1K

Acerca de: sebast iancipo lat

Desarrolador web y de aplicaciones mobiles en android, apasionado por la tecnologia y todo lo relacionado con ella, Fanatico de la Ciencia Ficcion y
del software libre. Argentino, hincha de boca.
Sgueme en Twitter
Leer todos mis artculos sebastiancipolat

PDFmyURL.com

Tambin puede interesarte

Ho tmail Oficial llega a

Andro id

ACTUALIZACION. Swype
v3.26

Juega Avatar en tu Andro id

Comentarios de este artculo

Po st ant erio r
Siguient e po st

PDFmyURL.com

Anlisis (7)

Aplicaciones (65)

Diseo (31)

Equipos Android (3)

Eventos (30)

Herramientas (10)

Programacin (101)

Tips (4)

Videojuegos (13)

AndroCode

May 2013

Android Universe

March 2013

March 2012

Androjuegos

AndroTalk

HoneyApp

February 2013

February 2012

November 2012

January 2012

October 2012

December 2011

August 2012

November 2011

July 2012

October 2011

June 2012

September 2011

May 2012

April 2012

August 2011

July 2011

PDFmyURL.com

Google Maps Android API v2

Usando SurfaceView en Android Parte 2
Usando SurfaceView en Android Parte 1
Uso de la Librera PanoramaGL en Android usando Eclipse
Action Bar Android usando Eclipse

Se g uir a @ and ro id e it y
Se g uir a @ co nd e sa_sama
Se g uir a @ iamko re
Se g uir a @ G ust avo IvanVe g a
Se g uir a @ ke rp ie
Se g uir a @ d avid t o ca
Se g uir a @ Jaime Ye sid Le o n
Se g uir a @ se b a_cip o lat
Se g uir a @ And rD e ve lo p

PDFmyURL.com

Se g uir a @ carlo st he o ne
Se g uir a @ C he lixPre ciad o

Androideit y
Like
1,978 people like Androideity.

Fa ce b o o k s o ci a l p l u g i n

androideity

androideity
andro ideity An no has trabajado co n
Go o gle Mpas v2 en Andro id? Aqu te
platicamo s las no vedades para que te
animes a pro barlo
andro ideity.co m/20 13/0 5/0 5/go o
3 d a ys a g o r e p l y r e twe e t fa vo r i te

andro ideity @AndrDevelo p

@seba_cipo lat termnalo , as tendrs
una mejo r visi n de c mo
estructurarlo y si es necesario hacer
ajustes :)
1 4 d a ys a g o r e p l y r e twe e t fa vo r i te

beebutterflymx @andro ideity

PDFmyURL.com

@co ndesa_sama anda buscando

desarro llado res andro id para pro yecto
en QRO me das RT po r si tus
seguido res se interesan
2 2 d a ys a g o r e p l y r e twe e t fa vo r i te

andro ideity @carlo sjdc ? Pues le

Jo in the co nversatio n

Powered by @condesa_sama | Theme: Yoko by Elmastudio

Todo el contenido Bajo la Licencia Atribucin No comercial Compartir igual 2.5 Mxico de Creative Commons

Ir hasta arriba

PDFmyURL.com