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

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.

SOLUCION:

IMPLEMENTACION DEL FRAMEWORK PHONEGAP EN EL PROYECTO EN ANDROIDPara 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/

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.

Digitar la siguiente dirección electrónica

Elegimos el siguiente icono para la respectiva descarga

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

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

Aquí observamos el Folder de nombre libs que esta almacenando el archivo cordova-2.3.0.jar

Agregando al Path la librería cordova-2.3.0.jar

Folder creado satisfactoriamente

Aquí se encuentra almacenado el cordova-2-0-3.jar

Presionando la opción Build Path

Elegir la opción Add Build Path

El archivo cordova-2.3.0.jar almacenado en el Folder de nombre libs

Aquí observamos que la librería cordova-2.3.0.jar ha sido agregado al path para que sea reconocido por el proyecto.

En la carpeta Assets se tiene que crear un Folder

Archivo cordova-2.3.0.jar agregado al path para que sea reconocido por el proyecto

En el menú contextual elegir la opción New

Dar clic derecho a la carpeta assets

Seleccionar la opción Folder

Colocando el nombre www al Folder

Aquí tenemos el Folder de nombre www

Colocando el nombre www

Presionar el botón Finish

Folder de nombre www debidamente implementado

Dentro del folder www hemos copiado la librería cordova-2.3.0.jar

Copiando la carpeta xml al folder de nombre res

Librería cordova-2.3.0.jar debidamente copiado al Folder www

En el Folder de nombre res se tiene que copiar la carpeta xml que contiene un archivo xml de nombre config

Ahora en el folder assets/www se debe de colocar un archivo index.html y empezar a codificar.

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

Colocando el archivo index.html

Codificando la estructura básica del Html

Codificando en la clase MovilPhoneGAp.java

Aquí estamos reemplazando la clase Activity con la clase DroidGap

Invocando al método loadUrl que permite cargar la página index.html

Ahora en el archivo AndroidManifest.xml vamos a agregarle los siguientes permisos

Implementar permisos en el archivo

Agregando los permisos en el archivo AndroidManifest.xml

Colocar en el android:minSDKVersion=”8”

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.

Ahora en la declaración del Activity principal, se tiene que quitar el respectivo paquete y solamente

dejarlo con .Principal

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

En la siguiente página podemos descargarnos los archivos JS y CSS.

A continuación vamos a descargarnos el JQuery Tradicional a través de la siguiente página

www.jquery.com

Descargarse la hoja de estilo css

Descargarse el JQuery Mobile en archivo JS

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

Dar clic al siguiente enlace que me permite la descarga de la librería jquery

Hemos agregado todas las librerías del JQuery y además una imagen con extensión JPG

Ahora vamos agregar código en la página index.html .

Ahora agregamos una capa <div> dentro del <body>

Dar clic derecho a la página index.html del proyecto

Visualizando el archivo index.html

1

2 3

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

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.

A continuación vamos a detallar cada uno de las carpetas implementadas en el respectivo

proyecto y el contenido de cada uno de ellos.

Aquí observamos la estructura del proyecto en PHP que se tiene que implementar

Carpeta BEANS

Persona.php

CARPETA UTIL

ConexionBD.php

CARPETA DAO

PersonaDAO.php

CARPETA VISTA

ReporteServicioActivo.php

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.

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

Ahora vamos a ejecutar el programa a través del emulador para que se pueda conectar

remotamente:

Lista automáticamente los registros de la base de datos en Mysql remotamente.

1

2 3

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:

Ejecutando la respectiva Aplicación en Android.

Implementar la respectiva función que me permite capturar los campos del registro seleccionado y mostrarlo por pantalla

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.