PROGRAMACIN WEB - GUA 3

PROGRAMACIN WEB - GUA 3

UNIVERSIDAD EAN
FACULTAD DE ESTUDIOS EN AMBIENTES VIRTUALES
INGENIERA DE SISTEMAS

GUA 3
BLOQUE DE ESTUDIO
PROGRAMACIN WEB
PRESENTADO POR
DIEGO ANTONIO GALVIS
TRABAJO EN GRUPO
FAJARDO MANZANO OSCAR REN
YANCE LVAREZ ELICER RAFAEL
ROSALES CUESTA HUMBERTO ANTONIO
DIEGO ANTONIO GALVIS
CARLOS IVAN CORTES GIRALDO

TUTOR
CAROLINA MEJA CORREDOR
BOGOT, D.C, 7 DE JUNIO DE 2016

PROGRAMACIN WEB - GUA 3

CONTENIDO
LISTA DE TABLAS........................................................................................................................4
LISTA DE IMGENES...................................................................................................................5
RESUMEN......................................................................................................................................6
Actividad 1.......................................................................................................................................9
1.

Listado de mashups..................................................................................................................9

2.

Construccin de mashup de Google Maps.............................................................................10

Actividad 2.....................................................................................................................................11
1.

Evidencia autoevaluacin.......................................................................................................11

.......................................................................................................................................................11
2.

Diseo del sitio web que incorpore elementos dinmicos......................................................11

3.

Diagrama entidad-relacin de la base de datos diseada.......................................................12

4.

Archivos del proyecto en el repositorio GitHub....................................................................13

5.

Validacin de las pginas php................................................................................................14

6.

Informe trabajo realizado.......................................................................................................22

CONCLUSIONES.......................................................................................................................23

PROGRAMACIN WEB - GUA 3

LISTA DE TABLAS
Tabla 1. Descripcin del software utilizado.....................................................................................8
Tabla 2. Listado de cinco mashups..................................................................................................9

PROGRAMACIN WEB - GUA 3

LISTA DE IMGENES
Imagen 1. Imagen mashup Google Maps en la pgina desarrollada.............................................10
Imagen 2. Evidencia autoevaluacin.............................................................................................11
Imagen 3. Diagrama entidad relacin............................................................................................12
Imagen 4. Diagrama tablas............................................................................................................12
Imagen 5. Base de datos................................................................................................................13
Imagen 6. Archivos del repositorio en la plataforma GitHub........................................................14
Imagen 7. Validacin pgina registro.php.....................................................................................14
Imagen 8. Validacin pgina prox_eventos.php............................................................................15
Imagen 9. Validacin pgina menu_dia.php..................................................................................16
Imagen 10. Validacin pgina mashup.php...................................................................................16
Imagen 11. Validacin pgina libro.php........................................................................................17
Imagen 12. Validacin pgina index.php.......................................................................................17
Imagen 13. Validacin pgina close-session.php...........................................................................18
Imagen 14. Validacin pgina carta_bar.php.................................................................................18
Imagen 15. Validacin pgina __header.php.................................................................................19
Imagen 16. Validacin pgina __footer.php..................................................................................20
Imagen 17. Validacin pgina functions.php.................................................................................20
Imagen 18. Validacin pgina bd.php............................................................................................21
Imagen 19. Validacin script.sql...................................................................................................21

PROGRAMACIN WEB - GUA 3

RESUMEN
En esta tercera gua se trabaja el desarrollo de la pgina web con las tecnologas PHP, MySQL y
Ajax, se utiliz el Mashup de Google Maps y se incluy en la pgina web, se utiliz la
plataforma de GitHub para el almacenamiento del cdigo y el trabajo colaborativo. Se trabaj
tecnologa Ajax para el dinamismo de las pginas y en el cdigo se utilizaron estructuras de
control if, else, while, for, para el diseo se trabajaron libreras CSS.
Palabras claves: Mashups, CSS, Google maps, Ajax, MySQL, PHP, if, else, while, for.

PROGRAMACIN WEB - GUA 3

GUA 3
SITIO WEB CON PHP Y MYSQL.

PROGRAMACIN WEB - GUA 3

1. Ttulo y nmero de la gua

Sitio web con PHP y MYSQL.
2. Propsito.
En esta gua de trabajo autnomo el estudiante podr familiarizarse con los fundamentos
de AJAX y su estructura, as como el uso de la biblioteca JQuery. Lograr utilizar estos
fundamentos aprendidos para la implementacin de un mashup en su sitio web.
Adicionalmente, el estudiante podr crear un sitio web dinmico utilizando el lenguaje del
lado del servidor PHP y del almacenamiento de datos en MySQL.
3. Competencias a desarrollar.
Lee los textos de referencia, recopila, sistematiza y procesa datos e informacin cuantitativa
y cualitativamente.
Revisa los objetos de aprendizaje, recopila, sistematiza y procesa datos e informacin
cuantitativa y cualitativamente.
Explorar en internet ejemplos de mashup. Recopila, sistematiza y procesa datos e
informacin cuantitativa y cualitativamente.
Construir el mashup en su sitio web. Realiza la autoevaluacin No3, Identifica, plantea y
resuelve problemas.
Desarrollar un sitio web dinmico con PHP y MySQL
Elaborar el informe.
Elaborar una presentacin del sitio web desarrollado.
Hacer la presentacin del encuentro final.
4. Software/Hardware.
Tabla 1. Descripcin del software utilizado.
Software/Hardware
Forma de acceso
GitHub
Plataforma online

Requerimientos
Acceso a internet,
navegador Google
Chrome, Firefox,
Internet Explorer.

Derechos de autor
Versin gratuita con
caractersticas
reducidas.

PROGRAMACIN WEB - GUA 3

JS Bin

Plataforma online

Acceso a internet,
navegador Google
Chrome, Firefox,
Internet Explorer.

Versin gratuita con

caractersticas
reducidas.

Google Maps

Plataforma online

Acceso a las APIS

desde la web de
Google

Versin gratuita para

utilizarla en proyectos
propios.

Fuente: Elaboracin propia.

5. Enunciado y desarrollo o procedimiento.
Actividad 1
1. Listado de mashups
La tabla 2 muestra la lista de los cinco (5) mashups que podran ser de inters para la
pgina web de Dizzy Restaurante Bar.

Tabla 2. Listado de cinco mashups

Nombre

Descripcin

Url

Uber

Esta aplicacin web simple permite a los http://uberestimate.com

Calculator

usuarios calcular el costo actual de

& Statistics

paseos Uber.

Sports

Sports News Pub es un portal de noticias http://www.sportcentral.com/

News Pub

deportivas que hace que la lectura de

noticias fcil de usar y divertida.

doob.fm

Doob.fm es un sitio de streaming de http://www.doob.fm

PROGRAMACIN WEB - GUA 3

msica libre con la radio en lnea

personalizada y la funcionalidad scrobbler
de audio / vdeo. Doob.fm consume la API
de Last.fm y permite a los usuarios
reproducir pistas a la carta, escuchar
radio

por

Internet,

crear

listas

de

reproduccin personalizadas, ver videos

musicales y ms.

Api Expert - Api Expert - Google Place Search es una http://apiexpert.net/aspnet/placeGoogle

aplicacin que permite a los usuarios la finder-google

Place

bsqueda

Search

empresas

de

diferentes
/

tipos

de

establecimientos,

proporcionando la ubicacin deseada.

Esta aplicacin se implementa mediante
el aprovechamiento de lugar de Google y
mapa API.

Currency

Currency Table es una aplicacin mvil http://www.currency-

Table

que muestra las tasas de cambio para table.com/en/appdiferentes pares de divisas.

currencytable.html

Fuente: Elaboracin propia

2. Construccin de mashup de Google Maps
Se desarroll un mashup de google maps en el sitio que se vena trabajando (Imagen 1),
actualmente el sitio se encuentra en dos servidores.
http://bitooservices.net/dizzy/mashup.php
http://ec2-52-36-238-109.us-west-2.compute.amazonaws.com/mashup.php
Se adjuntan los archivos del desarrollo.
10

PROGRAMACIN WEB - GUA 3

Imagen 1. Imagen mashup Google Maps en la pgina desarrollada

Fuente: Elaboracin propia plataforma Googl Maps.

Actividad 2
1. Evidencia autoevaluacin
Imagen 2. Evidencia autoevaluacin

11

PROGRAMACIN WEB - GUA 3

Fuente: Elaboracin propia plataforma EAN

2. Diseo del sitio web que incorpore elementos dinmicos
Para hacer el sitio web dinmico desarrollado en las guas anteriores se incorporaron los
siguientes elementos:
Se cre el contador de visitas manualmente.
Se hicieron dos iteraciones donde se utilizaron las estructuras de control solicitadas if, else if,
else, for.
Se agreg color naranja a ttulos.
Se agreg el mashup de google maps.
Se cambiaron los labels.
Login automtico despus de registro.
Cuando el usuario se registra el sistema almacena unas cookies en el equipo local.
Se puede consultar desde la pgina http://bitooservices.net/dizzy o desde http://ec2-52-36-238109.us-west-2.compute.amazonaws.com/mashup.php
3. Diagrama entidad-relacin de la base de datos diseada
Como se ve en la (Imagen 2) solo se relacionan las tablas de sesin y usuario. Para las dems
no hay relacin dada la baja complejidad del sitio y la poca informacin que maneja
Imagen 3. Diagrama entidad relacin

12

PROGRAMACIN WEB - GUA 3

Fuente: Elaboracin propia

Imagen 4. Diagrama tablas

Fuente: Elaboracin propia

13

PROGRAMACIN WEB - GUA 3

Imagen 5. Base de datos

Fuente: Elaboracin propia

4. Archivos del proyecto en el repositorio GitHub

Imagen 6. Archivos del repositorio en la plataforma GitHub

14

PROGRAMACIN WEB - GUA 3

Fuente: Elaboracin propia en la plataforma GitHub

5. Validacin de las pginas php.
La validacin del cdigo php se realiz en dos sitios web http://phpcodechecker.com/ y
https://es.piliapp.com/php-syntax-check/ se muestran las pantallas.

Imagen 7. Validacin pgina registro.php

15

PROGRAMACIN WEB - GUA 3

Fuente: Elaboracin propia.

Imagen 8. Validacin pgina prox_eventos.php

Fuente: Elaboracin propia.

Imagen 9. Validacin pgina menu_dia.php

16

PROGRAMACIN WEB - GUA 3

Fuente: Elaboracin propia.

Imagen 10. Validacin pgina mashup.php

Fuente: Elaboracin propia.

Imagen 11. Validacin pgina libro.php
17

PROGRAMACIN WEB - GUA 3

Fuente: Elaboracin propia.

Imagen 12. Validacin pgina index.php

Fuente: Elaboracin propia.

Imagen 13. Validacin pgina close-session.php

18

PROGRAMACIN WEB - GUA 3

Fuente: Elaboracin propia.

Imagen 14. Validacin pgina carta_bar.php

Fuente: Elaboracin propia.

Imagen 15. Validacin pgina __header.php
19

PROGRAMACIN WEB - GUA 3

Fuente: Elaboracin propia.

Imagen 16. Validacin pgina __footer.php

Fuente: Elaboracin propia.

Imagen 17. Validacin pgina functions.php

20

PROGRAMACIN WEB - GUA 3

Fuente: Elaboracin propia.

Imagen 18. Validacin pgina bd.php

Fuente: Elaboracin propia.

Imagen 19. Validacin script.sql
21

PROGRAMACIN WEB - GUA 3

Fuente: Elaboracin propia.

6. Informe trabajo realizado
En esta gua se trabaj el tema de los mashups que son la utilizacin de APIS en los sitios
web, haciendo un sitio web dinmico, se elabor un listado de cinco mashups que consideramos
le pueden interesar a la empresa del sitio web que se est desarrollando, se implement el
mashup de Google maps en la pgina que se est desarrollando, donde tiene como objetivo
mostrar los sitios de inters cercanos como son las universidades y las estaciones de transporte.
Al sitio web se le agregaron varias funcionalidades para hacerlo ms dinmico entre ellas:
se desarroll el sitio en PHP, se utiliz el motor de bases de datos de MySQL y se implement el
uso de Ajax. Se desarroll un formulario para el registro para los clientes VIP utilizando la
tecnologa Ajax para la validacin. Se implement un contador de visitas de manera manual, se
implement un libro de vistas que almacena el nombre, correo y opinin de la persona en la base
de datos que se estableci, se utilizaron estructuras de control if, else, else if, while, for y
funciones para el desarrollo del cdigo.

22

PROGRAMACIN WEB - GUA 3

Se desarroll la base de datos en MySQL donde se almacena toda la informacin de los

clientes. Se realiz el diagrama entidad relacin y se mostraron las tablas creadas con la misma
herramienta.
Todo el cdigo se trabaj en el repositorio de GitHub, donde se trabaj de manera
colaborativa con todos los integrantes del equipo de trabajo.

23

PROGRAMACIN WEB - GUA 3

CONCLUSIONES
Con esta tercera gua se concluye que existe una gran cantidad de APIS de diferentes
proveedores y diferentes funciones para hacer mashups, desplegando en la pgina web mayor
dinamismo y funcionalidades. Con la investigacin realizada se puede determinar que existen
muchas APIS para implementar en nuestra web. Para hacer ms atractivas las pginas agregando
funcionalidades que se requiere hoy en da.
El trabajo colaborativo es otra de las conclusiones importantes de la gua, con plataformas como
GitHub, es posible realizar desarrollos rpidos y eficientes con un gran nmero de personas, todo
el desarrollo de la gua se trabaj de manera colaborativa.
Otra de las conclusiones que se obtuvieron es la sencillez de trabajar con PHP y MySQL.

24

PROGRAMACIN WEB - GUA 3

REFERENCIAS BIBLIOGRFICA

Deitel, P., Deitel, H. & Deitel, A (2014). Cmo programar internet & World Wide Web? Quinta
Edicin. Mexico: Pearson Education.
(Eclipse) (2016). Eclipse. Tomado de https://eclipse.org/downloads/ el 10 de mayo de 2016
(Oracle) (2016). Oracle. JDK. Tomado de http://www.oracle.com/technetwork/es
/java/javase/downloads/index.html el 10 de mayo de 2016
(Jimdo). (2016). Jimdo Tomado de http://es.jimdo.com/ el 10 de mayo de 2016
(JS Bin) (2015). JS Bin. Help/Features Tomado de https://JS Bin.com/help/features el 22 de abril
del 2016
Plumley, G. (2010). Website Design and Development:100 Questions to Ask Before Building a
Website. Hoboken, NJ, USA: Jhon Wiley & Sons.

25