GUIA DE LABORATORIO PHONE GAP JQUERY MOBILE CARGADO DE_DATOS_DE_REGISTROS_REMOTAMENTE_A_TRAVES_DE_UNA_CONEXION REMOTA CON PHP Y MYSQL ANDROID ING IVAN PETRLIK AZABACHE

1. GUIA DE LABORATORIO
MOSTRAR UN REPORTE DE REGISTROS
CARGADOS REMOTAMENTE A TRAVES DE
UNA CONEXIÓN REMOTA CON LA BASE
DE DATOS MYSQL A TRAVES DE PHP
UTILIZANDO EL FRAMEWORK
PHONEGAP Y JQUERY MOBILE
ING.IVAN PETRLIK AZABACHE

2. CARGADO DE DATOS
REMOTAMENTE
Desarrollar una aplicación móvil en android , utilizando el framework
PhoneGap y JQuery Mobile que me permita cargar remotamente los
registros con conexión remota a una base de datos en mysql a
través de un aplicativo Web en PHP.

3. SOLUCION:
IMPLEMENTACION DEL FRAMEWORK PHONEGAP EN
EL PROYECTO EN ANDROID
Para poder implementar el Framework PhoneGAP en una aplicación en Android primero tenemos
que descargar dicho Framework a través de la siguiente página:
http://phonegap.com/download/
Digitar la siguiente
dirección electrónica
Elegimos el siguiente
icono para la
respectiva descarga
Cuando la librería ha sido descargada entonces se tiene que descomprimir e ingresar dentro de
la carpeta hasta llegar a la carpeta android y extraer una serie de archivos.

4. Aquí estos archivos que vamos a utilizar en nuestro proyecto en android son:
A continuación vamos a crear un proyecto en android a través del IDE Eclipse.
Proyecto creado
satisfactoriamente

5. Ahora vamos a crear un folder para almacenar la librería: cordova-2.3.0.jar
Nota : Si en caso en el proyecto ya existe la carpeta libs , nos es necesario crearlo
Colocando un nombre (libs) al Folder
Colocando el nombre al
Folder
Presionar el botón
Finish

6. Aquí observamos el Folder de nombre libs que esta almacenando el archivo cordova-2.3.0.jar
Folder creado satisfactoriamente
El archivo cordova-2.3.0.jar
almacenado en el Folder de
nombre libs
Agregando al Path la librería cordova-2.3.0.jar
Aquí se encuentra almacenado
el cordova-2-0-3.jar
Presionando la
opción Build Path
Elegir la opción Add Build Path

7. Aquí observamos que la librería cordova-2.3.0.jar ha sido agregado al path para que sea
reconocido por el proyecto.
Archivo cordova-2.3.0.jar
agregado al path para que sea
reconocido por el proyecto
En la carpeta Assets se tiene que crear un Folder
En el menú contextual
elegir la opción New
Seleccionar la opción
Folder
Dar clic derecho a la
carpeta assets

8. Colocando el nombre www al Folder
Colocando el nombre
www
Presionar el botón
Finish
Aquí tenemos el Folder de nombre www
Folder de nombre www
debidamente implementado

9. Dentro del folder www hemos copiado la librería cordova-2.3.0.jar
Librería cordova-2.3.0.jar
debidamente copiado al Folder
www
Copiando la carpeta xml al folder de nombre res
En el Folder de nombre res se tiene
que copiar la carpeta xml que contiene
un archivo xml de nombre config

10. Ahora en el folder assets/www se debe de colocar un archivo index.html y empezar a codificar.
Colocando el archivo
index.html
Codificando la estructura básica
del Html
Ahora en la clase MovilPhoneGap.java se tiene que editar la clase Activity y reemplazarlo con la
clase DroidGap y además dentro del método onCreate se tendr aque que invocar al
metodoloadUrl que cargara en el emulador la página index.html
Aquí estamos reemplazando
la clase Activity con la clase
DroidGap
Codificando en la
clase
MovilPhoneGAp.java
Invocando al método loadUrl
que permite cargar la página
index.html

11. Ahora en el archivo AndroidManifest.xml vamos a agregarle los siguientes permisos
Agregando los permisos en el archivo
AndroidManifest.xml
Implementar
permisos en el
archivo
Colocar en el
android:minSDKVersion=”8”

12. Ahora en la declaración del Activity
principal, se tiene que quitar el
respectivo paquete y solamente
dejarlo con
.Principal
A continuación vamos a ejecutar la aplicación Móvil en Android
Ahora para poder implementar el html Interactivo en este proyecto en Android, vamos a ver a
continuación un Framework de nombre JQuery y JQuery Mobile.

13. Descargar el JQUERY MOBILE
Primeramente para poder descargarnos el JQuery Mobile tenemos que visitar su sitio web de la
siguiente manera: www.jqurerymobile.com
Digitar la siguiente dirección
electrónica: www.jquerymobile.com
ww
Ir a descargas

14. En la siguiente página podemos descargarnos los archivos JS y CSS.
Descargarse el JQuery
Mobile en archivo JS
Descargarse la hoja de estilo css
A continuación vamos a descargarnos el JQuery Tradicional a través de la siguiente página
www.jquery.com

15. Dar clic al siguiente
enlace que me permite la
descarga de la librería
jquery
A continuación mostramos los archivos que hemos logrados descargar:
A continuación sobre el proyecto en Android con PhoneGap que hemos implementado al inicio
de este documento, vamos a agregarle las librería del JQuery Mobile y una Imagen de formato
JPG , dentro del folder assets/www
Hemos
agregado
todas las librerías del
JQuery y además
una
imagen con
extensión JPG

16. Ahora vamos agregar código en la página index.html .
Ahora
agregamos una capa <div> dentro del <body>

17. Dar clic derecho a la página index.html del proyecto
2
1
Visualizando el archivo index.html
3

18. Ahora dejemos por un momento esto y empecemos a desarrollar el Script de la base de
datos a la cual se va a implementar en el manejador de base de datos MYSQL.
Ahora este script lo tenemos que ejecutar en el PhpMyAdmin del programa Wamp Server

19. Ahora vamos a utilizar el IDE Netbeans para empezar a desarrollar el aplicativo web en
PHP.
A continuación vamos a pasar a desarrollar el proyecto Web por el lado del servidor en
PHP.
Aquí observamos la estructura
del proyecto en PHP que se
tiene que implementar
A continuación vamos a detallar cada uno de las carpetas implementadas en el respectivo
proyecto y el contenido de cada uno de ellos.

20. Carpeta BEANS
Persona.php
CARPETA UTIL
ConexionBD.php

21. CARPETA DAO
PersonaDAO.php
CARPETA VISTA
ReporteServicioActivo.php

22. CARPETA CONTROLADOR
PersonaControlador.php
Ahora vamos a ejecutar PersonaControlador.php
Ahora para poder indicar que el aplicativo web en php tiene el servicio activo , vamos a
ejecutar la página ReporteServicioActivo.php.

23. Ahora regresemos el
proyecto Android para terminar de implementar el respectivo código
de la página index.html.
Debemos de implementar una función que se ejecute automáticamente, desde el momento
que la página se carga.
A continuación en la sección de Javascritp de nuestra página se tendrá que codificar lo
siguiente para que se conecte remotamente con el proyecto en PHP y puede traerse el
conjunto de registros de la base de datos leyéndolo en el formato JSON.
Implementando esta fracción de código que me permite la
conexión remota con la base de datos y a través del
formato JSON me permite traer los registros para que
después se puedan mostrar en la página index.html

24. Ahora vamos a ejecutar el programa a través del emulador para que se pueda conectar
remotamente:
1
2
3
Lista automáticamente los registros de la base de datos en Mysql remotamente.

25. Cuando ya hemos logrado mostrar todos los registros de la tabla persona remotamente
,ahora vamos a implementar la siguiente funcionalidad que me permite seleccionar un
registro y se debe de mostrar un mensaje mostrándote estos mismos.
Para ellos se tiene que implementar una función en javascritp que me permita recibir los
campos del registro seleccionado y a través de la función alert se mostrara por pantalla.
A continuación vamos a mostrar la línea de código a implementar:
En el respectivo enlace <a> se deberá de
invocar a la función reporte y se deberá
de enviar por sus parámetros de envió los
campos
capturados
del
registro
seleccionado.
Implementar la respectiva función
que me permite capturar los campos
del registro seleccionado y mostrarlo
por pantalla
Ejecutando la respectiva Aplicación en Android.