Androideity Com 2012-07-05 Login en Android Usando Php y Mysql

download Androideity Com 2012-07-05 Login en Android Usando Php y Mysql

of 36

Transcript of Androideity Com 2012-07-05 Login en Android Usando Php y Mysql

  • Login en Android usando PHP y MySQLEscrito por sebastiancipolat | Thursday, July 5, 2012 a las 6:47 pm | 226 Comentarios

    Inicio Programacin Aplicaciones Event os Diseo Herramient as Tips Nosot ros

    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 unsistema 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 noprovee ningn mtodo que permita conectarse a travs de internet directamente a una Base de Datos Remota y ejecutar unaconsulta dentro de ella. Para poder realizar esto se puede utilizar un web service al cul se pueda acceder a el pasando diversosparmetros nos devuelve ya sea en formato XML o JSON, nuestro trabajo ser obtener esa informacin devuelta y utilizarla ennuestra 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 comoservidor Web Apache. Vamos a simular la nube para realizar pruebas de manera local para eso podemos utilizar XAMPP que puedendescargar del sitio oficial, adems est disponible para varios sistemas operativo y es de muy fcil instalacin y uso. No voy aexplicar cmo instalarlo y configurarlo porque no es el objetivo de este tutorial pero si tienen algun consulta pueden visitar sudocumentacin: 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 cualaccederemos mediante http://127.0.0.1/phpmyadmin luego de loguearnos. *si tuvieron algn problema pueden verificar ladocumentacin 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 guardaremosel 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 tablasseparadas.

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

  • 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 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 anteriormentedefine(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 deusuarios 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 unusuario.

    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 ingrese 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 jsonsi 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 validoBasicamente 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. Hecreado 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 sobreesto.

    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 losarchivos 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 derealizarse la validacin.

    Desde esta clase redirecciono al usuario al HiScreen o en el caso de ser el logueo invlido vibramos el telfono y mostramos elmensaje de error.

    Tambin he creado una clase para manejar con mayor facilidad el envo de peticiones a nuestro web service. El manejo de surespuesta 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 alservidor 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:

    PDFmyURL.com

  • Recuerden que si bajan todo el contenido comprimido y lo importan al Eclipse, luego debern remover las carpetas mencionadas delproyecto.

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

    Saludos

    Sebastin.

    Te gust este tutorial? Comprtelo!

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

    PDFmyURL.com

  • Comparte este post

    Acerca de: sebastiancipolatDesarrolador web y de aplicaciones mobiles en android, apasionado por la tecnologia y todo lo relacionado con ella, Fanatico de la Ciencia Ficcion ydel software libre. Argentino, hincha de boca.Sgueme en TwitterLeer todos mis artculos sebastiancipolat

    394 98 14.1K

    PDFmyURL.com

  • Hotmail Oficial llega aAndro id

    ACTUALIZACION. Swypev3.26

    Juega Avatar en tu Andro id

    Siguiente post

    S u s c r b e t e

    Tambin puede interesarte

    Comentarios de este artculo Post anterior

    PDFmyURL.com

  • Anlisis (7) Aplicaciones (65) Diseo (31) Equipos Android (3) Eventos (30) Herramientas (10) Programacin (101) Tips (4)Videojuegos (13)

    AndroCode Android Universe Androjuegos AndroTalk HoneyApp

    May 2013 March 2013 February 2013 November 2012 October 2012 August 2012 July 2012 June 2012 May 2012 April 2012March 2012 February 2012 January 2012 December 2011 November 2011 October 2011 September 2011 August 2011July 2011

    C a t e g o r a s

    B l o g r o l l

    A r c h i v o

    B u s c a r

    G i t H u b

    PDFmyURL.com

  • l t i m o s p o s t sGoogle Maps Android API v2Usando SurfaceView en Android Parte 2Usando SurfaceView en Android Parte 1Uso de la Librera PanoramaGL en Android usando EclipseAction Bar Android usando Eclipse

    A u t o r e sSe guir a Se guir a @androide ity@androide ity

    Se guir a Se guir a @conde sa_sama@conde sa_sama

    Se guir a Se guir a @iamkore@iamkore

    Se guir a Se guir a @GustavoIvanVe ga@GustavoIvanVe ga

    Se guir a Se guir a @ke rpie@ke rpie

    Se guir a Se guir a @davidtoca@davidtoca

    Se guir a Se guir a @Jaime Ye sidLe on@Jaime Ye sidLe on

    Se guir a Se guir a @se ba_cipolat@se ba_cipolat

    Se guir a Se guir a @AndrDe ve lop@AndrDe ve lop

    PDFmyURL.com

  • Se guir a Se guir a @carlosthe one@carlosthe one

    Se guir a Se guir a @Che lixPre ciado@Che lixPre ciado

    AndroideityLike

    1,978 people like Androideity.

    Facebook s ocia l p lug in

    androideityandroideity

    andro ideity An no has trabajado conGoogle Mpas v2 en Andro id? Aqu teplaticamos las novedades para que teanimes a probarloandro ideity.com/2013/05/05/goo3 days ago rep ly re tweet favor i te

    andro ideity @AndrDevelop@seba_cipo lat termnalo , as tendrsuna mejor visin de cmoestructurarlo y si es necesario hacerajustes :)14 days ago rep ly re tweet favor i te

    beebutterflymx @andro ideity PDFmyURL.com

  • Powered by @condesa_sama | Theme: Yoko by ElmastudioTodo el contenido Bajo la Licencia Atribucin No comercial Compartir igual 2.5 Mxico de Creative Commons

    Ir hasta arriba

    Jo in the conversation

    @condesa_sama anda buscandodesarro lladores andro id para proyectoen QRO me das RT por si tusseguidores se interesan22 days ago rep ly re tweet favor i te

    andro ideity @carlosjdc ? Pues le

    PDFmyURL.com