Login en Android usando PHP y MySQL

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-partei/
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.

Cuando todo est

funcionando la aplicacin debera hacer lo siguiente:

Parte web
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.
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 Table 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
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_DATABASE 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
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 ingrese otro diferente!
por lo que la aplicacion tambien controlara que no halla usuario repetidos.
Podemos verificar directamente desde la BD los usuarios creados:

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:

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.

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

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

/res/layout-land/main.xml

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

res/drawable-ldpi/edittext_rounded_corners.xml

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
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.

Como vemos, utilizo una clase interna asynclogin la cual es

unaAsyncTask 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

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

/res/layout-land/lay_screen.xml

Ahora el cdigo de su clase:

/src/test/Droidlogin/HiScreen.java

Luego de todo esto,

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

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.

ACTUALIZACIN 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:

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.