Parte web Parte Base de Datos · config.php: En este se define el nombre de la base de datos su...
23
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 AppServer que pueden descargar del sitio oficial, además está disponible para varios sistemas operativos y es de muy fácil instalación y uso. No vamos a explicar cómo instalarlo y configurarlo porque no es el objetivo de este tutorial. Parte Base de Datos: Como ya se comentó utilizaremos MySQL, podemos aprovechar la utilidad que provee appserver 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;
Transcript of Parte web Parte Base de Datos · config.php: En este se define el nombre de la base de datos su...
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 AppServer que pueden descargar del sitio oficial, además está disponible para varios sistemas operativos y es de muy fácil instalación y uso. No vamos a explicar cómo instalarlo y configurarlo porque no es el objetivo de este tutorial.
Parte Base de Datos:
Como ya se comentó utilizaremos MySQL, podemos aprovechar la utilidad que provee appserver 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;
Crearemos una tabla llamada ‘usuarios’ en donde guardaremos el nombre de usuario y password juntos.
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 “www” crearemos una carpeta llamada ‘droidlogin’ dentro de la cual colocaremos los siguientes archivos, estos serán la parte web de nuestro sistema.
config.php: En este se define el nombre de la base de datos su usuario,
password y la ip del servidor.
Es necesario modificar este archivo para poder adecuarlo a la configuración de la
BD de cada uno.
Deberán modificar el valor que está 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 dirección IP.*/
define(“DB_HOST”, “localhost“);
/*DB_USER cambiar por el nombre de usuario definido en la configuración 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 utilizó 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://localhost/droidlogin/adduser.html
Podemos ingresar:
-usuario: usuario1
-password: usuario1
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 aplicación también 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 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 deberíamos acceder al archivo
“acces.php” el cual nos devolverá 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”
Básicamente esto que nos devuelve el servidor es lo que leerá la app de android.
Parte Android:
Al proyecto lo llame “Login-en-Android-usando-PHP-y-MySQL-master”.
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 posición 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
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 correspondiente.
También recorriendo revisar el Logcat para entender mejor el funcionamiento.
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 redirección 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 redirigidos si el login es correcto.
Para esta también definí dos layouts diferentes para cubrir el cambio de la
orientación 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 sesión volvemos a la ventana de logueo.
Parte Aplicación Java Netbeans
Para la aplicación java, utilizaremos el nombre “serviciowebescritorio” como se ve
a continuación.
Luego haremos la interface para la aplicación:
Una vez hecha la interfaz nos dirigimos a la programación de las clases.
Presentación/Login.java:
Y finalmente pasamos a probar la aplicación de escritorio:
Si no ingresamos correctamente los datos aparecerá la siguiente ventana:
En cambio sí ingresamos correctamente los datos nos aparecerá lo siguiente:
Y eso sería la parte final del trabajo, con las 3 interfaces diferentes y una misma
base de datos.
