Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
de
una
agenda
web,
junto
con
una
App
para
Android
para
compartir
datos.
Tabla
de
contenido
Descripcin
general
.............................................................................................................................
3
Esquema
del
proyecto
.........................................................................................................................
4
Sitio
WEB
para
la
agenda
....................................................................................................................
5
Base
de
datos
..................................................................................................................................
6
Hoja
de
estilo
..................................................................................................................................
7
Parmetros
de
conexin
con
la
base
de
datos
..............................................................................
10
Conexin
con
la
base
de
datos
......................................................................................................
11
Pagina
ndice
.................................................................................................................................
12
Men
.............................................................................................................................................
13
Tablas
de
registros
........................................................................................................................
14
Modificar
nombre
.........................................................................................................................
16
Guardar
modificacin
....................................................................................................................
18
Insertar
nombre
............................................................................................................................
19
Guardar
nombre
insertado
...........................................................................................................
21
Servicios
WEB
....................................................................................................................................
23
Consultas
JSON
..............................................................................................................................
24
Insertar
JSON
.................................................................................................................................
24
App
para
Android
..............................................................................................................................
25
Activity
Main
.................................................................................................................................
26
Activity
Agenda
.............................................................................................................................
27
Activity
Configuracin
...................................................................................................................
28
Activity
Acerca
de
..........................................................................................................................
29
Activity
Insertar
.............................................................................................................................
30
Libreras
adicionales
......................................................................................................................
31
Sub
Process_Globals
.....................................................................................................................
32
Sub
Globals
....................................................................................................................................
32
Sub
Activity_Create(FirstTime
As
Boolean)
...................................................................................
32
Sub
ExtraerListaNombres
..............................................................................................................
33
Sub
ListView1_ItemClick
(Position
As
Int,
Value
As
Object)
..........................................................
33
Sub
ExecuteRemoteQuery(Query
As
String,
TaskId
As
Int)
...........................................................
33
Sub
ExecuteRemoteInsert(Query
As
String,
TaskId
As
Int)
...........................................................
33
Sub hc_ResponseError (Response As HttpResponse, Reason As String, StatusCode As Int, TaskId As Int) ............................................................................................................................................ 34 Sub hc_ResponseSuccess (Response As HttpResponse, TaskId As Int) ......................................... 34 Sub btActualizar_Click ................................................................................................................... 35 Sub btInsertar_Click ...................................................................................................................... 35
Descripcin
general
Este
proyecto
consiste
en
generar
un
sitio
web
ya
sea
en
un
servidor
local
o
un
servidor
remoto
en
Internet,
que
permita
tener
una
agenda
con
datos
bsicos
como
nombre,
telfono
y
email,
y
adems
en
conjunto
contara
con
una
App
para
Android
que
se
conecte
con
este
servidor
y
permita
acceder
a
estos
datos
al
mismo
tiempo
de
poder
insertar
nuevos
si
as
se
desea.
Ms
all
de
la
complejidad
que
pueda
suponer
desarrollar
un
sitio
Web
con
HTML,
CSS,
PHP
o
una
App
para
Android,
este
tutorial
pretende
servir
como
una
introduccin
para
desarrollar
proyectos
que
donde
la
lgica
del
proyecto
no
solo
radique
en
la
nube
o
en
las
App,
sino
en
ambas.
Este
tutorial
est
compuesto
por
3
partes:
1. Un
Sitio
Web
con
conexin
a
una
base
de
datos
en
MySQL,
que
permite
mostrar,
insertar,
modificar
y
borrar
registros.
2. Servicio
Web
para
realizar
el
intercambio
de
datos
entre
la
App
y
la
base
de
datos
MySQL.
3. Una
App
para
Android
que
se
conectara
de
forma
remota
a
la
Base
de
datos,
para
poder
consultar
e
insertar
registros.
Base
de
datos
La
base
de
datos
Agenda,
contendr
solamente
una
tabla
que
permitir
almacenar
el
nombre,
telfono
y
email,
para
posteriormente
realizar
consultas
a
esos
datos,
adems
de
poder
modificarlos
y
eliminarlos
si
se
requiere.
agenda.sql
CREATE DATABASE `salvador_agenda` DEFAULT CHARACTER SET utf8 COLLATE utf8_spanish_ci; USE `salvador_agenda`; CREATE TABLE IF NOT EXISTS `nombres` ( `idNombre` int(11) NOT NULL AUTO_INCREMENT, `nombre` varchar(50) NOT NULL, `telefono` varchar(10) NOT NULL, `email` varchar(30) NOT NULL, PRIMARY KEY (`idNombre`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=95 ; -- -- Volcar la base de datos para la tabla `nombres` -- INSERT INTO `nombres` (`idNombre`, `nombre`, `telefono`, `email`) VALUES (1, 'Nadia Grisel Perez Sandoval', '5467889009', 'nadia@gmail.com'), (2, 'Jose Gomez Gonzalez', '7715623456', 'jose@gmail.com), (3, 'Salvador Hernandez Mendoza', '7757512345', 'salvadorhm@gmail.com');
Hoja
de
estilo
Se
define
una
hoja
de
estilo
para
establecer
los
colores,
tipos
de
letras,
y
dems
formatos
de
estilo
para
el
sitio
web
que
se
creara.
estilo.css
body
{
background-color:white;
color:blue;
font-family:
"lucida
sans
unicode",
"lucida
grande",
sans-serif;
font-size:
14px;
}
h1
{
color:blue;
text-align:center;
font-size:18px;
font-family:
"lucida
sans
unicode",
"lucida
grande",
sans-serif;
}
p
{
font-family:
"lucida
sans
unicode",
"lucida
grande",
sans-serif;
font-size:14px;
}
a
{
color:blue;
font-size:14px;
text-decoration:
none;
border-left-style:
none;
font-family:
"lucida
sans
unicode",
"lucida
grande",
sans-serif;
border-bottom-style:
double;
border-bottom-width:
1px;
border-bottom-color:
orange;
}
table
{
color:blue;
font-family:arial,helvetica,sans-serif;
font-size:14px;
}
td
{
color:blue;
background-color:white;
}
input.enlace
{
border:0;
font-family:
"lucida
sans
unicode",
"lucida
grande",
sans-serif;
background-color:#ffffff;
color:blue;
cursor:pointer; font-size: 14px; border-bottom-style: double; border-bottom-width: 1px; border-bottom-color: orange; } #newspaper-a { font-family: "lucida sans unicode", "lucida grande", sans-serif; font-size: 14px; margin: 45px; text-align: left; border-collapse: collapse; border: 1px solid #69c; } #newspaper-a th { padding: 12px 17px 12px 17px; font-weight: normal; font-size: 14px; color: #039; border-bottom: 1px dashed #69c; text-align: center; font-weight: bold; } #newspaper-a td { padding: 7px 17px 7px 17px; color: #669; } #newspaper-a tbody tr:hover td { color: #339; background: #d0dafd; } #newspaper-b { font-family: "lucida sans unicode", "lucida grande", sans-serif; font-size: 14px; margin: 45px; text-align: left; border-collapse: collapse; border: 1px solid #69c; } #newspaper-b th { padding: 12px 17px 12px 17px; font-weight: normal; font-size: 14px; color: #039; border-bottom: 1px dashed #69c; text-align: center; } #newspaper-b td { padding: 7px 17px 7px 17px;
color: #669;
10
11
Pagina
ndice
Para
el
diseo
del
sitio
web
se
utilizaran
marcos,
de
forma
tal
que
habr
un
titulo,
men
y
el
contenido,
donde
se
podr
ver,
modificar,
insertar
y
eliminar
registros
a
la
base
de
datos.
index.php
<html> <head> <title> agenda salvador hm </title> </head> <frameset rows="12%,*" border="0"> <frame name="cabecera" src="cabecera.html"> <frameset cols="120,*"> <frame name="menu" src="menu.html"> <frame name="contenido" src="nombresregistrados.php"> </frameset> </frameset> </html>
12
Men
Este
archivo
contiene
2
hipervnculos:
Inicio
manda
llamar
la
pgina
nombresRegistrados.php
que
muestra
una
tabla
con
los
datos
almacenados
en
la
base.
Nuevo
que
llama
a
registroNombres.php,
cuya
funcin
es
la
de
mostrar
un
formulario
para
insertar
nuevos
registros.
menu.html
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <link rel="stylesheet" type="text/css" href="estilo.css"> </head> <body> <h1>men</h1> <ul> <li><a href="nombresregistrados.php" target="contenido">inicio</a> <li><a href="registronombres.php" target="contenido">nuevo</a> </ul> </body> </html>
13
Tablas
de
registros
Esta
pgina
realiza
una
consulta
a
la
base
de
datos,
solicitando
todos
los
registros
almacenados,
para
posteriormente
mostrarlos
en
una
tabla.
nombresRegistrados.php
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <link rel="stylesheet" type="text/css" href="estilo.css"> <?php include 'conexion.php'; ?> </head> <body> <h1>nombres registrados</h1> <?php $result = mysql_query("select * from nombres order by idnombre", $conexion) or die("no se puede ejecutar la consulta: ".mysql_error());; ?> <center> <table id='newspaper-a' summary='nombres en la agenda'> <thead> <tr> <th scope='col'>nombre</th> <th scope='col'>telfono</th> <th scope='col'>e-mail</th> <th scope='col'>editar</th> <th scope='col'>eliminar</th> </tr> </thead> <tbody> <?php while (($row = mysql_fetch_row($result)) !== false) { echo "<tr>"; echo "<td>$row[1]</td>"; echo "<td>$row[2]</td>"; echo "<td>$row[3]</td>"; echo "<td><a href='modificarnombre.php?idnombre=$row[0]'>modificar</a></td>";
14
echo "<td><a href='borrarnombre.php?idnombre=$row[0]'>borrar</a></td>"; echo "</tr>"; } echo "</tbody> </table>"; mysql_close($conexion); ?> </center> </body> </html>
15
Modificar
nombre
Esta
pgina
como
su
nombre
lo
indica,
permite
editar
el
registro
seleccionado,
permitiendo
corregir
los
datos
previamente
capturados.
modificarNombre.php
<html>
<head>
<meta
http-equiv="content-type"
content="text/html;
charset=utf-8">
<link
rel="stylesheet"
type="text/css"
href="estilo.css">
<?php
include
'conexion.php';
?>
<title></title>
</head>
<body>
<h1>editar
clientes</h1>
<center>
<form
action="guadarmodificacionnombre.php"
method=post>
<table
id='newspaper-b'
summary='modificar
nombre'>
<thead>
<tr>
<th
scope='col'
colspan='2'>registro
a
modificar</th>
</tr>
</thead>
<tbody>
<?php
$consulta="select
*
from
nombres
where
idnombre=".$_get['idnombre'];
$result
=
mysql_query($consulta,
$conexion)
or
die("no
se
puede
ejecutar
la
consulta:
".mysql_error());;
while
(($row
=
mysql_fetch_array($result))
!==
false)
{
16
echo "<input type='hidden' name='idnombre' value='$row[0]'>"; echo "<tr><td>nombre<td><input type='text' name='nombre' value='$row[1]' size='50'></tr>"; echo "<tr><td>telfono<td><input type='text' name='telefono' value='$row[2]' size='10'></tr>"; echo "<tr><td>e-mail<td><input type='text' name='email' value='$row[3]' size='30'></tr>"; } mysql_close($conexion); ?> </tdoby> </table> <input type='submit' name='boton' id='1' value='modificar' class='enlace'/> <a href='nombresregistrados.php' target='contenido'>cancelar</a> </form> </center> </body> </html>
17
Guardar
modificacin
Este
archivo
es
llamado
desde
modificarNombre.php,
del
cual
recibe
el
idNombre,
nombre,
telfono
y
email,
para
realizar
la
actualizacin
de
dicho
registro.
guadarModificacionNombre.php
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="estilo.css"> <?php include 'conexion.php'; ?> <title></title> </head> <body> <?php $idnombre =$_post['idnombre']; $nombre = $_post['nombre']; $telefono = $_post['telefono']; $email = $_post['email']; $sql = "update nombres set nombre='$nombre', telefono='$telefono', email='$email' where idnombre=$idnombre;"; mysql_query($sql, $conexion) or die("no se puede ejecutar la consulta: ".mysql_error()); echo "se han modificado exitosamente el registro"; mysql_close($conexion); ?> <a href='nombresregistrados.php' target='contenido'>inicio</a> </body> </html>
18
Insertar
nombre
En
esta
pgina
se
muestra
un
formulario
donde
el
usuario
introducir
los
valores
que
desea
almacenar
en
la
base
de
datos.
registroNombres.php
<html>
<head>
<meta
http-equiv="content-type"
content="text/html;
charset=utf-8"/>
<link
rel="stylesheet"
type="text/css"
href="estilo.css">
</head>
<body>
<h1>registro
de
nuevo
nombre</h1>
<center>
<form
name="clientes"
action="insertarnombre.php"
method=post>
<table
id='newspaper-b'
summary='borrar
nombre'>
<thead>
<tr>
<th
scope='col'
colspan='2'>nuevo
registro</th>
</tr>
</thead>
<tbody>
<tr>
<td>nombre
<td><input
type="text"
name="nombre"
size='50'>
</tr>
<tr>
<td>telfono
<td><input
type="text"
name="telefono">
</tr>
19
<tr> <td>e-mail <td><input type="text" name="email" size='30'> </tr> </tbody> </table> <input type='submit' name='boton' id='1' value='guardar' class='enlace'/> <input type='reset' name='boton' id='2' value='limpiar' class='enlace'/> <a href='nombresregistrados.php' target='contenido'>cancelar</a> </form> </center> </body> </html>
20
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <link rel="stylesheet" type="text/css" href="estilo.css"> <?php include 'conexion.php'; ?> </head> <body> <h1>datos nuevo usuario</h1> <?php $nombre = $_post['nombre']; $telefono = $_post['telefono']; $email = $_post['email']; $sql = "insert into nombres (nombre, telefono, email) values ('$nombre', '$telefono','$email')"; $result = mysql_query($sql, $conexion) or die("no se puede ejecutar la consulta: ".mysql_error()); if (!$result) { die("fallo en la insercin de registro en la base de datos: " . mysql_error()); } echo "gracias! hemos recibido sus datos.\n"; mysql_close($conexion); ?>
21
22
Servicios
WEB
Para
realizar
la
comunicacin
entre
la
App
y
el
servidor
remoto
se
generaran
servicios
Web
en
formato
JSON,
acrnimo
de
JavaScript
Object
Notation,
que
es
un
formato
ligero
para
el
intercambio
de
datos.
JSON
es
un
subconjunto
de
la
notacin
literal
de
objetos
de
JavaScript
que
no
requiere
el
uso
de
XML.
23
Consultas
JSON
Este
archivo
permite
realizar
consultas
a
la
base
de
datos
y
formatear
la
salida
con
JSON
para
su
uso
en
la
aplicacin
de
Android.
consultarJSON.php
<?php
include
'conexion.php';
$con
=
mysql_connect($dbhost,$dbuser,$dbpassword)
or
die(mysql_error());
mysql_select_db($dbname)
or
die(mysql_error());
$query
=
file_get_contents("php://input");
$sth
=
mysql_query($query);
if
(mysql_errno())
{
header("HTTP/1.1
500
Internal
Server
Error");
echo
$query.'\n';
echo
mysql_error();
}
else{
$rows
=
array();
while($r
=
mysql_fetch_assoc($sth))
{
$rows[]
=
$r;
}
print
json_encode($rows);
}
?>
Insertar
JSON
Este
archivo
recibe
los
datos
enviados
desde
la
aplicacin
Android
e
insertar
los
datos
en
la
base.
insertarJSON.php
<?php
include
'conexion.php';
$con
=
mysql_connect($dbhost,$dbuser,$dbpassword)
or
die(mysql_error());
mysql_select_db($dbname)
or
die(mysql_error());
$query
=
file_get_contents("php://input");
mysql_query($query);
?>
24
25
Activity
Main
Pantalla
principal
de
la
App
que
contiene
un
TabHost
para
mostrar
cada
uno
de
los
Activities.
main.bal
Activity
TabHost1
26
Activity
Agenda
Activity
que
muestra
los
items
y
al
hacer
tap
en
uno
de
ellos
muestra
los
datos
correspondientes.
agenda.bal
Activity
lblNombre
lblTelefono
lblEmail
ListView1
(click)
27
Activity
Configuracin
Activity
que
configura
la
direccin
URL
del
servidor
donde
esta
hospedada
la
BD,
en
caso
de
que
la
aplicacin
este
conectndose
a
un
servidor
local,
se
sustituye
la
URL
del
host
remoto,
por
la
IP
del
servidor
local.
Ejemplo
http://192.168.0.1/agenda
configuracion.bal
Activity
txtDireccion
btActualizar
(click)
28
Activity
Acerca
de
Activity
que
muestra
informacin
sobre
la
creacin
de
la
aplicacin
acerca.bal
Activity
Label1
29
Activity
Insertar
Activity
que
permite
insertar
un
nuevo
registro
en
la
base
de
datos
MySQL.
insertar.bal
lblNombreE
lblTelefonoE
lblEmailE
txtNombre
txtTelefono
txtEmail
btInsertar(
click
)
Nota:
Las
etiquetas
de
este
Activity,
tienen
un
nombre
distinto
a
las
del
Activity
agenda.bal
30
Libreras
adicionales
Lista
de
libreras
que
se
deben
anexar
para
realizar
la
conexin
con
HTTP
y
procesar
los
resultados
con
JSON.
31
Sub
Process_Globals
Se
declara
una
variable
hc
de
tipo
HTTPClient
que
permitir
la
conexin
hacia
Internet
para
intercambiar
datos,
adems
se
definen
2
variables
que
indican
el
nmero
de
proceso
que
se
realiza
al
ejecutar
una
consulta.
Sub
Process_Globals
Dim
hc
As
HttpClient
Dim
lista_nombres
As
Int
:
lista_nombres
=
1
Dim
datos_nombres
As
Int
:
datos_nombres
=
2
End
Sub
Sub
Globals
Es
en
este
procedimiento
donde
se
declaran
las
variables
que
podrn
ser
utilizadas
en
todo
el
proyecto,
adems
es
aqu
donde
se
declaran
los
componentes
visuales
que
se
generan
desde
el
Designer
al
utilizar
la
opcin
Generate
members.
Sub
Globals
Type
TwoLines
(First
As
String,
Second
As
String)
Dim
lblTelefono
As
Label
Dim
ListView1
As
ListView
Dim
lblNombre
As
Label
Dim
btActualizar
As
Button
Dim
lblEmail
As
Label
Dim
txtURL
As
EditText
Dim
txtDireccion
As
EditText
Dim
TabHost1
As
TabHost
Dim
btInsertar
As
Button
Dim
txtEmail
As
EditText
Dim
txtNombre
As
EditText
Dim
txtTelefono
As
EditText
Dim
lblEmailE
As
Label
Dim
lblNombreE
As
Label
Dim
lblTelefonoE
As
Label
End
Sub
32
Sub
ExtraerListaNombres
Realiza
la
consulta
de
la
tabla
nombres
para
ver
todos
los
registros.
Sub
ExtraerListaNombres
ProgressDialogShow("Buscando
lista
de
Nombres")
ExecuteRemoteQuery("SELECT
*
FROM
nombres
ORDER
BY
idNombre",
lista_nombres)
End
Sub
&
33
Sub
hc_ResponseError
(Response
As
HttpResponse,
Reason
As
String,
StatusCode
As
Int,
TaskId
As
Int)
En
caso
de
ocurrir
un
error
en
la
conexin
remota
se
llama
a
automaticamente
a
este
metodo
y
se
almacena
un
log
con
el
detalle
del
error,
tambien
se
puede
mostrar
un
mensaje
con
el
error.
Sub
hc_ResponseError
(Response
As
HttpResponse,
Reason
As
String,
StatusCode
As
Int,
TaskId
As
Int)
Log("Error:
"
&
Reason
&
",
StatusCode:
"
&
StatusCode)
If
Response
<>
Null
Then
Log(Response.GetString("UTF8"))
Response.Release
End
If
ProgressDialogHide
End
Sub
34
Sub
btActualizar_Click
Este
procedimiento
quita
todos
los
elementos
del
ListView,
limpia
los
datos
de
las
cajas
de
texto
y
solicita
la
lista
completa
de
datos
para
postrarlos
nuevamente,
a
travs
del
procedimiento
ExtraerListaNombres.
Sub
btActualizar_Click
ListView1.Clear
lblNombre.Text=""
lblTelefono.Text=""
lblEmail.Text=""
ExtraerListaNombres
End
Sub
Sub
btInsertar_Click
Como
su
nombre
lo
indica
este
procedimiento
toma
los
datos
de
las
cajas
de
texto
y
genera
una
consulta
en
SQL
para
insertar
los
datos
en
el
servidor,
ya
sea
local
o
remoto.
Sub
btInsertar_Click
ExecuteRemoteInsert("insert
into
nombres(nombre,telefono,email)
values('"
&
txtNombre.Text
&
"','"
&
txtTelefono.Text
&"','"
&
txtEmail.Text
&
"')",5)
txtNombre.Text=""
txtTelefono.Text=""
txtEmail.Text=""
btActualizar_Click
End
Sub
35