Sei sulla pagina 1di 36
Inicio Programación Aplicaciones Eventos Diseño Herramientas Tips Nosotros Login en Android usando
Eventos Diseño Herramientas Tips Nosotros Login en Android usando PHP y MySQL Escrito por

Login en Android usando PHP y MySQL

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

en Android usando PHP y MySQL Escrito por sebastiancipolat | Thursday, July 5, 2012 a las
PHP y MySQL Escrito por sebastiancipolat | Thursday, July 5, 2012 a las 6:47 pm |
Hola amigos de Android, el día de hoy les voy a mostrar cómo hacer una

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:

Básicamente el funcionamiento sería algo así.

Básicamente el funcionamiento sería algo así.
Básicamente el funcionamiento sería algo así. PDFmyURL.com
Cuando todo esté funcionando la aplicación debería hacer lo siguiente: Parte web

Cuando todo esté funcionando la aplicación debería hacer lo siguiente:

Cuando todo esté funcionando la aplicación debería hacer lo siguiente: Parte web

Parte web

Cuando todo esté funcionando la aplicación debería 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, 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:

‘ droid_login ‘ como lo muestra la siguiente imagen: O si vamos a la solapa SQL

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.

crearemos una tabla llamada ‘ usuarios ‘ en donde guardaremos el nombre de usuario y password

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 encuentra

a donde se encuentra la BD si es en el mismo equipo utilizaremos localhost o 127.0.0.1

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

podemos ingrear

debemos crear un usuario. Accedemos a http://127.0.0.1/droidlogin/adduser.html podemos ingrear PDFmyURL.com

usuario: test

password: test01

usuario: test password: test01 Luego al clickear en ‘Agregar’ Si queremos volver a agregar el mismo

Luego al clickear en ‘Agregar’

test password: test01 Luego al clickear en ‘Agregar’ Si queremos volver a agregar el mismo usuario,

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:

tambien controlara que no halla usuario repetidos. Podemos verificar directamente desde la BD los usuarios creados:
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.

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:

utilizaremos el archivo login.html Accederemos a el mediante http://127.0.0.1/droidlogin/login.html veremos lo siguiente:
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

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.

pueden seguir con la sig. parte. Parte Android: Al proyecto lo llame droidlogin , lo podrán
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

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)

son de iOS sirven igual. He creado 2 interfaces para cuando el teléfono se encuentre en
igual. He creado 2 interfaces para cuando el teléfono se encuentre en posicion horizontal (layout-land) PDFmyURL.com
o vertical (layout-port) Para hacer la interfaz más agradable hice que los EditText tengan bordes

o vertical (layout-port)

o vertical (layout-port) Para hacer la interfaz más agradable hice que los EditText tengan bordes redondeados,

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

una acción diferente. Se encuentran definidos en los siguientes archivos: /res/layout-port/main.xml PDFmyURL.com
/res/layout-land/main.xml

/res/layout-land/main.xml

/res/layout-land/main.xml
/res/layout-land/main.xml PDFmyURL.com
El xml que utilicé para hacer los bordes redondeados es este: res/drawable-ldpi/edittext_rounded_corners.xml

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

res/drawable-ldpi/edittext_rounded_corners.xml

El xml que utilicé para hacer los bordes redondeados es este: res/drawable-ldpi/edittext_rounded_corners.xml
xml que utilicé para hacer los bordes redondeados es este: res/drawable-ldpi/edittext_rounded_corners.xml PDFmyURL.com

Ahora el AndroidManifest.xml.

Como pueden ver hay definidas 2 activities definidos.

. Como pueden ver hay definidas 2 activities definidos. Ahora veremos el código principal, comento en

Ahora veremos el código principal, comento en cada caso.

/src/test/Droidlogin/Login.java

definidos. Ahora veremos el código principal, comento en cada caso. /src/test/Droidlogin/Login.java PDFmyURL.com

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.

deberían usar el dominio correpospondiente. Tambien recorriendo revisar el Logcat para entender mejor el funcionamiento.
el dominio correpospondiente. Tambien recorriendo revisar el Logcat para entender mejor el funcionamiento. PDFmyURL.com
Como vemos, utilizo una clase interna asynclogin la cual es una AsyncTask para mostrar el

Como vemos, utilizo una clase interna asynclogin la cual es una AsyncTask 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

peticiones a nuestro web service. El manejo de su respuesta se encuentra en: /src/test/Droidlogin/library/Httppostaux.java
nuestro web service. El manejo de su respuesta se encuentra en: /src/test/Droidlogin/library/Httppostaux.java PDFmyURL.com
Ahora veremos la otra activity a la que seremos redigiridos si el login es correcto.

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

definí dos layouts diferentes para cubrir el cambio de la orientacion de la pantalla. /res/layout-port/lay_screen.xml
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

/res/layout-land/lay_screen.xml

/res/layout-land/lay_screen.xml PDFmyURL.com
Ahora el código de su clase: /src/test/Droidlogin/HiScreen.java

Ahora el código de su clase:

/src/test/Droidlogin/HiScreen.java

Ahora el código de su clase: /src/test/Droidlogin/HiScreen.java
Ahora el código 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

Luego de todo esto,

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

Luego de todo esto, Si todo fue configurado y funciona correctamente veremos al HiScreen que comenté
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 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:

he realizado un video en el que les explico paso a paso como hacer andar este

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:

para acceder simplemente den click en la siguiente imagen: Espero que les haya gustado el tutorial.

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.

¿Te gustó este tutorial? ¡Compártelo!

, android , Aplicaciones , aplicaciones android , conociendo Android , tutorial | Permalink PDFmyURL.com
Comparte este post 394 98 14.1K Acerca de: sebastiancipolat Desarrolador web y de aplicaciones mobiles
Comparte este post
394
98
14.1K
Acerca de: sebastiancipolat
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.
Sígueme en Twitter
Leer todos mis artículos sebastiancipolat
software libre. Argentino, hincha de boca. Sígueme en Twitter Leer todos mis artículos sebastiancipolat PDFmyURL.com

También puede interesarte

 
   
   
 
   
 
   
 
 
 

Comentarios de este artículo

 
 

S

u

s

c

r

í

b

e

t

e

 
 
Post anterior   Siguiente post → S u s c r í b e t e
Ú l t i m o s p o s t s Google Maps Android

Ú l

t

i

m

o

s

p

o

s

t

s

A u

t

o

r

SS e e g g u u i i r r a a @ @ See gguuiirr aa @@aannddrrooiiddee iittyy

ssaammaa cciippoollaatt
ssaammaa
cciippoollaatt

SS e e g g u u i i r r a a @ @ See gguuiirr aa @@ccoonnddee ssaa

SS e e g g u u i i r r a a @ @ See gguuiirr aa @@iiaammkkoorree

SS e e g g u u i i r r a a @ @ See gguuiirr aa @@GGuussttaavvooIIvvaannVVee ggaa

SS e e g g u u i i r r a a @ @ See gguuiirr aa @@kkee rrppiiee

SS e e g g u u i i r r a a @ @ See gguuiirr aa @@ddaavviiddttooccaa

SS e e g g u u i i r r a a @ @ See gguuiirr aa @@JJaaiimmee YYee ssiiddLLee oonn

SS e e g g u u i i r r a a @ @ See gguuiirr aa @@ssee bbaa

SS e e g g u u i i r r a a @ @ See gguuiirr aa @@AAnnddrrDDee vvee lloopp

e

s

e e b b a a S S e e g g u u i i
SSee gguuiirr aa @@ccaarrlloosstthhee oonnee SSee gguuiirr aa @@CChhee lliixxPPrree cciiaaddoo Androideity Like 1,978
SSee gguuiirr aa @@ccaarrlloosstthhee oonnee
SSee gguuiirr aa @@CChhee lliixxPPrree cciiaaddoo
Androideity
Like
1,978 people like Androideity.
Facebook s ocial plugin
androideity
androideity
androideity ¿Aún no has trabajado con
Google Mpas v2 en Android? Aquí te
platicamos las novedades para que te
animes a probarlo
androideity.com/2013/05/05/goo…
3 days ago · reply · retweet · favorite
androideity @AndrDevelop
@seba_cipolat termínalo, así tendrás
una mejor visión de cómo
estructurarlo y si es necesario hacer
ajustes :)
14 days ago · reply · retweet · favorite
beebutterflymx @androideity
y si es necesario hacer ajustes :) 14 days ago · reply · retweet · favorite
@condesa_sama anda buscando desarrolladores android para proyecto en QRO me das RT por si tus
@condesa_sama anda buscando
desarrolladores android para proyecto
en QRO me das RT por si tus
seguidores se interesan
22 days ago · reply · retweet · favorite
Join the conversation
Powered by @condesa_sama | Theme: Yoko by Elmastudio
Todo el contenido Bajo la Licencia Atribución No comercial Compartir igual 2.5 México de Creative Commons
Ir hasta arriba
Bajo la Licencia Atribución No comercial Compartir igual 2.5 México de Creative Commons Ir hasta arriba