login en android usando php y mysql
DESCRIPTION
Login en Android Usando PHP y MySQLTRANSCRIPT
Login en Android usando PHP y MySQL
Hola amigos de Android, el día de hoy les voy a mostrar cómo hacer una aplicación que simule el ‘logueo’ o identificación en un sistema alojado en la nube como las que usamos todos los días en diversas aplicaciones.
El tutorial estará divido en 2 partes, la parte web la cual describiré a continuación y la de Android. De momento el API de android no provee ningún método que permita ‘conectarse’ a través 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 cuál se pueda acceder a el pasando diversos parámetros nos devuelve ya sea en formato XML o JSON, nuestro trabajo será obtener esa información devuelta y utilizarla en nuestra app.
Antes de seguir recomiendo haber leído 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/
Básicamente el funcionamiento sería algo así.
Cuando todo esté funcionando la aplicación debería 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, además está disponible para varios sistemas operativo y es de muy fácil instalación y uso. No voy a explicar cómo instalarlo y configurarlo porque no es el objetivo de este tutorial pero si tienen algun consulta pueden visitar su documentación: 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 algún problema pueden verificar la documentación 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 aplicación 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 debería 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 podrán descargar más abajo, estos serán la parte web de nuestro sistema.
Podrán ver el contenido de estos archivos descargándolo de más 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 encuentraen otro equipo deberemos colocar su direcciòn IP.define(“DB_HOST”, “localhost“);DB_USER cambiar por el nombre de usuario definido en la configuracion de la BDdefine(“DB_USER”, “username“);DB_PASSWORD Modificar por el password elegidodefine(“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 métodos 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 página 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 aplicación podemos verlo a través 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 podrán descargar del repositorio.
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 teléfono se encuentre en posicion horizontal (layout-land)
o vertical (layout-port)
Para hacer la interfaz más 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 acción 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 código principal, comento en cada caso.
/src/test/Droidlogin/Login.java
En la línea número 35 es necesario modificar esa dirección 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 deberían 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 validación.
Desde esta clase redirecciono al usuario al HiScreen o en el caso de ser el ‘logueo’ inválido vibramos el teléfono y mostramos el mensaje de error.
También he creado una clase para manejar con mayor facilidad el envío 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 también 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 código 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 código completo desde nuestro repositorio, podrán acceder clickeando en la imagen más abajo.
En el mismo verán que hay una archivo llamado droidloginweb.zip dentro se encuentran droidlogin. Deberán mover esa carpeta al servidor web en la carpeta htdocs ya que en ella se encuentran todos los archivos para la parte web.
También incluí la carpeta droidlogin suelta.
ACTUALIZACIÓN 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 deberán 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
Sebastián.