Вы находитесь на странице: 1из 66

Tecnologas de la Informacin y Comunicacin

2012

1
Desarrollo de Aplicaciones WEB

Prctica 1: Instalacin de XAMPP en Windows 7
Lic. Javier Nolasco Hernndez
javnol@gmail.com
Mayo

Introduccin
Una forma fcil de instalar un servidor web en Windows con Apache, PHP y MySQL es XAMPP [1],
el cual es un programa que se ofrece gratuitamente y que permite instalar estas tres herramientas
(Apache, PHP y MySQL), correctamente configuradas, en un solo paso en sistemas Linux,
Windows, Mac OS y Solaris, sin tener que preocuparnos en los pormenores de cada uno [3].
En esta prctica se describe el procedimiento que debe seguirse para instalar XAMPP en un equipo
de cmputo que cuente con el sistema operativo Windows 7, adems se da un ejemplo de una
pgina web que permite comprobar el correcto funcionamiento de XAMPP.
Al finalizar esta prctica el estudiante ser capaz de:
Bajar XAMPP de Internet.
Instalar XAMPP en su equipo de cmputo.
Escribir una pgina web sencilla por medio de la cual compruebe que XAMPP funciona
adecuadamente.

Procedimiento
1. Bajar el programa XAMPP: Acceder a la pgina
http://sourceforge.net/projects/xampp/files/XAMPP%20Windows/1.7.3/xampp-win32-
1.7.3.exe/download Clic sobre la liga direct link (ver fig. 1)Guardar (ver fig. 2) Elegir
la carpeta en la que se desea almacenar el archivo xampp-win32-1.7.3.exe Guardar (ver
fig. 3 y 4)

Figura 1. Liga a partir de la cual se puede bajar XAMPP
Tecnologas de la Informacin y Comunicacin
2012

2
Desarrollo de Aplicaciones WEB


Figura 2. Ventana que permite la descarga del programa XAMPP

Figura 3. Cuadro de dilogo Guardar como. Aqu el usuario elige la carpeta en la que el archivo a descargar
se guardar
Tecnologas de la Informacin y Comunicacin
2012

3
Desarrollo de Aplicaciones WEB


Figura 4. Ventana en la que se indica el progreso de la descarga
2. Ubicar y ejecutar el archivo xampp-win32-1.7.3.exe recin descargado (ver fig. 5, 6, 7, 8,
9, 10, 11, 12, 13, 14 y 15)

Figura 5. Archivo xampp-win32-1.7.3.exe recin descargado de Internet
Tecnologas de la Informacin y Comunicacin
2012

4
Desarrollo de Aplicaciones WEB


Figura 6. Pantalla de inicio que aparece cuando se ejecuta la aplicacin xampp-win32-1.7.3.exe
Nota: Al oprimir el botn Install (ver fig. 6) aparece la ventana Control de cuentas de usuario, en
la que se requiere responder Si a la pregunta Desea permitir que este programa realice cambios
en el equipo? oprimiendo el botn titulado Si.
Tecnologas de la Informacin y Comunicacin
2012

5
Desarrollo de Aplicaciones WEB


Figura 7. Ventana que muestra el progreso de la instalacin

Figura 8. Se especifica que se desea agregar un acceso directo en el men de inicio y en el escritorio del
equipo

Figura 9. Se especifica que se desea ubicar la trayectoria de XAMPP adecuadamente
Tecnologas de la Informacin y Comunicacin
2012

6
Desarrollo de Aplicaciones WEB


Figura 10. Se especifica que no se desea crear una versin portable de XAMPP

Figura 11. Se oprime la tecla ENTER para continuar

Figura 12. Se presiona la tecla ENTER para continuar
Tecnologas de la Informacin y Comunicacin
2012

7
Desarrollo de Aplicaciones WEB


Figura 13. Se oprime la tecla 1 seguido de ENTER para iniciar el Panel de Control de XAMPP

Figura 14. Panel de Control de la Aplicacin XAMPP
Tecnologas de la Informacin y Comunicacin
2012

8
Desarrollo de Aplicaciones WEB


Figura 15. Se oprime la tecla x seguida de ENTER para salir de la instalacin de XAMPP
3. Arrancar el servidor web Apache (ver fig. 16 y 17).


Figura 16. Seleccionar el mdulo de Apache, aceptar la instalacin del Servicio de Apache y oprimir el botn
Start para iniciar el servicio

Tecnologas de la Informacin y Comunicacin
2012

9
Desarrollo de Aplicaciones WEB


Figura 17. Muestra que se ha iniciado el Servicio de Apache satisfactoriamente

4. Comprobar que la pgina de inicio del servidor Apache funciona adecuadamente: Abrir el
navegador de internet y escribir en la barra de direcciones http://localhost/ y deber
aparecer algo parecido a lo que se muestra en la figura 18. Si el usuario lo desea puede
habilitar la configuracin de intranet (ver fig. 19 y 20).




Tecnologas de la Informacin y Comunicacin
2012

10
Desarrollo de Aplicaciones WEB

Figura 18. Pgina de inicio del servidor web Apache

Figura 19. Ventana de confirmacin de activacin de la configuracin de intranet

Figura 20. Pgina de inicio del servidor web Apache despus de habilitar la configuracin de intranet

5. Ejecutar el programa Araneae: Inicio Todos los programas Araneae 5 Araneae
Archivo Guardar como Seleccin de la carpeta C:\xampp\htdocs Nombre:
practica1.php Tipo: All Files (*.*) Guardar (ver fig. 21).
Nota: Si no se cuenta con la aplicacin Araneae hay que bajarla de internet o bien utilizar
cualquier otro editor de texto como Notepad++, Bloc de notas, etc.

Tecnologas de la Informacin y Comunicacin
2012

11
Desarrollo de Aplicaciones WEB


Figura 21. Ventana que aparece despus de ejecutar el programa Araneae
6. Editar el archivo practica1.php salvado anteriormente de acuerdo a la figura 22.

Figura 22. Edicin de la pgina web practica1.php
7. Ejecutar el programa practica1.php: http://localhost/practica1.php ENTER (ver fig. 23).
Tecnologas de la Informacin y Comunicacin
2012

12
Desarrollo de Aplicaciones WEB


Figura 23. Ejecucin de la pgina web practica1.php

Ejercicios:
1. Investigar qu otros programas permiten la instalacin de Apache + PHP + MySQL. Llevar a
cabo la instalacin de almenos uno de ellos.
2. Crear una pgina web llamada practica1_1.php que utilice las etiquetas para encabezados
h1, h2, h3, h4 y h5, la cual permita exhibir en el navegador 5 veces la cadena !Hola
mundo, pero ahora de la ms pequea a la ms grande.

Referencias:
[1] http://www.elwebmaster.com/articulos/xampp-servidor-web-facil-de-instalar
[2] http://php.diptongonante.com/curso/configurar.html
[3] http://www.desarrolloweb.com/articulos/xampp.html





Tecnologas de la Informacin y Comunicacin
2012

13
Desarrollo de Aplicaciones WEB

Prctica 1: Instalacin de XAMPP en Windows XP
Lic. Javier Nolasco Hernndez
javnol@gmail.com
Mayo 2010

Introduccin
Una forma fcil de instalar un servidor web en Windows con Apache, PHP y MySQL es XAMPP [1],
el cual es un programa que se ofrece gratuitamente y que permite instalar estas tres herramientas
(Apache, PHP y MySQL), correctamente configuradas, en un solo paso en sistemas Linux,
Windows, Mac OS y Solaris, sin tener que preocuparnos en los pormenores de cada uno [3].
En esta prctica se describe el procedimiento que debe seguirse para instalar XAMPP en un equipo
de cmputo que cuente con el sistema operativo Windows XP, adems se da un ejemplo de una
pgina web que permite comprobar el correcto funcionamiento de XAMPP.
Al finalizar esta prctica el estudiante ser capaz de:
Bajar XAMPP de Internet.
Instalar XAMPP en su equipo de cmputo.
Escribir una pgina web sencilla por medio de la cual compruebe que XAMPP funciona
adecuadamente.

Procedimiento
8. Bajar el programa XAMPP: Acceder a la pgina
http://sourceforge.net/projects/xampp/files/XAMPP%20Windows/1.7.3/xampp-win32-
1.7.3.exe/download Clic sobre la liga direct link (ver fig. 1)Guardar (ver fig. 2) Elegir
la carpeta en la que se desea almacenar el archivo xampp-win32-1.7.3.exe Guardar (ver
fig. 3 y 4)

Figura 1. Liga a partir de la cual se puede bajar XAMPP
Tecnologas de la Informacin y Comunicacin
2012

14
Desarrollo de Aplicaciones WEB


Figura 2. Ventana que permite la descarga del programa XAMPP

Figura 3. Cuadro de dilogo Guardar como. Aqu el usuario elige la carpeta en la que el archivo a descargar
se guardar
Tecnologas de la Informacin y Comunicacin
2012

15
Desarrollo de Aplicaciones WEB


Figura 4. Ventana en la que se indica el progreso de la descarga
9. Ubicar y ejecutar el archivo xampp-win32-1.7.3.exe recin descargado (ver fig. 5, 6, 7, 8,
9, 10, 11, 12, 13, 14 y 15)

Figura 5. Archivo xampp-win32-1.7.3.exe recin descargado de Internet
Tecnologas de la Informacin y Comunicacin
2012

16
Desarrollo de Aplicaciones WEB


Figura 6. Pantalla de inicio que aparece cuando se ejecuta la aplicacin xampp-win32-1.7.3.exe

Tecnologas de la Informacin y Comunicacin
2012

17
Desarrollo de Aplicaciones WEB

Figura 7. Ventana que muestra el progreso de la instalacin

Figura 8. Se especifica que se desea agregar un acceso directo en el men de inicio y en el escritorio del
equipo

Figura 9. Se especifica que se desea ubicar la trayectoria de XAMPP adecuadamente

Figura 10. Se especifica que no se desea crear una versin portable de XAMPP
Tecnologas de la Informacin y Comunicacin
2012

18
Desarrollo de Aplicaciones WEB


Figura 11. Se oprime la tecla ENTER para continuar

Figura 12. Se presiona la tecla ENTER para continuar
Tecnologas de la Informacin y Comunicacin
2012

19
Desarrollo de Aplicaciones WEB


Figura 13. Se oprime la tecla 1 seguido de ENTER para iniciar el Panel de Control de XAMPP

Figura 14. Panel de Control de la Aplicacin XAMPP
Tecnologas de la Informacin y Comunicacin
2012

20
Desarrollo de Aplicaciones WEB


Figura 15. Se oprime la tecla x seguida de ENTER para salir de la instalacin de XAMPP
10. Arrancar el servidor web Apache (ver fig. 16 y 17).


Figura 16. Seleccionar el mdulo de Apache, aceptar la instalacin del Servicio de Apache y oprimir el botn
Start para iniciar el servicio

Tecnologas de la Informacin y Comunicacin
2012

21
Desarrollo de Aplicaciones WEB


Figura 17. Muestra que se ha iniciado el Servicio de Apache satisfactoriamente

Nota: Como se observa en la figura 17, no pudo ser iniciado el servicio de Apache. Esto se debe a
que el equipo utilizado para la instalacin cuenta con IIS (Internet Information Server), que es otro
servidor de pginas web que por omisin ocupa el puerto 80, el mismo que XAMPP ocupa por
default. Para comprobar qu servidor web est instalado en el equipo en el puerto 80, se escribe
en la barra de direcciones del navegador http://localhost/ (ver fig. 18).

Los servidores web generalmente usan el puerto nmero 80 para gestionar peticiones. Para evitar
conflictos con otro software que pueda estar usando el puerto 80 en la mquina, es necesario
configurar XAMPP para que escuche en otro puerto diferente; por ejemplo, el 8080. Para esto, hay
que editar el archivo c:\xampp\apache\conf\httpd.conf. En su interior, es necesario buscar la lnea
que contiene la siguiente directiva Listen 80 (ver fig. 19) y modificarla por Listen 8080 (ver fig. 20).
Finalmente, se guardan los cambios realizados en el archivo httpd.conf [2]. Una vez hechas estas
modificaciones es necesario reiniciar el equipo y al ejecutar la Aplicacin del Panel de Control de
XAMPP se puede comprobar que el servidor web Apache ya ha sido iniciado (ver fig. 21).



Tecnologas de la Informacin y Comunicacin
2012

22
Desarrollo de Aplicaciones WEB


Figura 18. IIS est instalado en el puerto 80 del equipo de cmputo


Figura 19. Localizacin de la directiva Listen 80 en el archivo httpd.conf
Tecnologas de la Informacin y Comunicacin
2012

23
Desarrollo de Aplicaciones WEB


Figura 20. Establecimiento de la directiva Listen 8080 en el archivo httpd.conf


Figura 21. Panel de Control de XAMPP despus de reiniciar el equipo


11. Comprobar que la pgina de inicio del servidor Apache funciona adecuadamente: Abrir el
navegador de internet y escribir en la barra de direcciones http://localhost:8080/ y
deber aparecer algo parecido a lo que se muestra en la figura 22.





Tecnologas de la Informacin y Comunicacin
2012

24
Desarrollo de Aplicaciones WEB


Figura 22. Pgina de inicio del servidor web Apache
12. Ejecutar el programa Araneae: Inicio Todos los programas Araneae 5 Araneae
Archivo Guardar como Seleccin de la carpeta C:\xampp\htdocs Nombre:
practica1.php Tipo: All Files (*.*) Guardar (ver fig. 23).
Nota: Si no se cuenta con la aplicacin Araneae hay que bajarla de internet o bien utilizar
cualquier otro editor de texto como Notepad++, Bloc de notas, etc.


Tecnologas de la Informacin y Comunicacin
2012

25
Desarrollo de Aplicaciones WEB

Figura 23. Ventana que aparece despus de ejecutar el programa Araneae
13. Editar el archivo practica1.php salvado anteriormente de acuerdo a la figura 24.

Figura 24. Edicin de la pgina web practica1.php
14. Ejecutar el programa practica1.php: http://localhost:8080/practica1.php ENTER (ver fig.
25).

Figura 25. Ejecucin de la pgina web practica1.php

Tecnologas de la Informacin y Comunicacin
2012

26
Desarrollo de Aplicaciones WEB

Ejercicios:
3. Investigar qu otros programas permiten la instalacin de Apache + PHP + MySQL. Llevar a
cabo la instalacin de almenos uno de ellos.
4. Crear una pgina web llamada practica1_1.php que utilice las etiquetas para encabezados
h1, h2, h3, h4 y h5, la cual permita exhibir en el navegador 5 veces la cadena !Hola
mundo, pero ahora de la ms pequea a la ms grande.

Referencias:
[1] http://www.elwebmaster.com/articulos/xampp-servidor-web-facil-de-instalar
[2] http://php.diptongonante.com/curso/configurar.html
[3] http://www.desarrolloweb.com/articulos/xampp.html
















Tecnologas de la Informacin y Comunicacin
2012

27
Desarrollo de Aplicaciones WEB

Prctica 2: Etiquetas bsicas de HTML
Lic. Javier Nolasco Hernndez
javnol@gmail.com
Mayo

Introduccin
En esta prctica se ejemplifica el uso de algunas etiquetas bsicas de HTML.
Al finalizar esta prctica el estudiante ser capaz de:
Utilizar prrafos en una pgina web alinendolos a su gusto.
Utilizar listas ordenadas y desordenadas en una pgina web.
Incorporar en una pgina web imgenes.
Crear referencias a otras pginas web.

Procedimiento
15. Crear la carpeta practica2 en C:\xampp\htdocs, crear la carpeta img en
C:\xampp\htdocs\practica2 y almacenar en C:\xampp\htdocs\practica2\img las imgenes
fig1.JPG y fig2.PNG.


16. Crear un archivo llamado practica2.php en la carpeta C:\xampp\htdocs\practica2.

Tecnologas de la Informacin y Comunicacin
2012

28
Desarrollo de Aplicaciones WEB

17. Editar el archivo C:\xampp\htdocs\practica2\practica2.php de acuerdo a la siguiente
figura:

Tecnologas de la Informacin y Comunicacin
2012

29
Desarrollo de Aplicaciones WEB

Tecnologas de la Informacin y Comunicacin
2012

30
Desarrollo de Aplicaciones WEB


18. Ejecutar el programa practica2.php: http://localhost:8080/practica2/practica2.php
ENTER.
Tecnologas de la Informacin y Comunicacin
2012

31
Desarrollo de Aplicaciones WEB



Tecnologas de la Informacin y Comunicacin
2012

32
Desarrollo de Aplicaciones WEB



Ejercicios:
5. Crear una pgina web que muestre la informacin presentada en esta prctica de
laboratorio.



Tecnologas de la Informacin y Comunicacin
2012

33
Desarrollo de Aplicaciones WEB

Prctica 3: Galera de imgenes
Lic. Javier Nolasco Hernndez
javnol@gmail.com
Mayo

Introduccin
En esta prctica se ejemplifica el uso de las etiquetas <a> </a> e <img> para generar una galera
de imgenes sencilla.
<a> y </a> denotan el inicio y el final de una etiqueta que contiene una liga, vnculo o
hipervnculo, que le permite al usuario dirigirse a otra pgina (aunque tambin es posible hacer
referencia a otra ubicacin dentro de la misma pgina). Dos de sus atributos son:
href: Para indicar la ruta del recurso al cual hace referencia el hipervnculo).
target: Para indicar la ventana en la que debe mostrarse el recurso especificado en href. Uno de
los valores para este atributo e _blank, el cual permite mostrar el recurso especificado por href en
una ventana de pgina nueva.
La etiqueta <img> permite mostrar una imagen en el navegador, el cual interpreta los atributos de
la imagen para determinar la manera en la que la administra. Algunos de dichos atributos son:
src: Especifica la ruta en la que se encuentra almacenada la imagen.
width: Para especificar el ancho de la imagen.
height: Para especificar la altura de la imagen.
alt: Para describir la imagen en los navegadores de slo texto y para etiquetar la imagen antes de
cargarse en la pgina.
Al finalizar esta prctica el estudiante ser capaz de:
Utilizar imgenes y referencias para mostrar una galera de imgenes.

Procedimiento
19. Crear la carpeta practica3 en C:\xampp\htdocs, crear la carpeta img en
C:\xampp\htdocs\practica3 y almacenar en C:\xampp\htdocs\practica3\img las imgenes
fig1.JPG, fig2.JPG y fig3.JPG.

Tecnologas de la Informacin y Comunicacin
2012

34
Desarrollo de Aplicaciones WEB


20. Crear los archivos galeria.php y muestraimagen.php en la carpeta
C:\xampp\htdocs\practica3.

21. Editar el archivo C:\xampp\htdocs\practica3\galeria.php de acuerdo a la siguiente figura:

Tecnologas de la Informacin y Comunicacin
2012

35
Desarrollo de Aplicaciones WEB


22. Editar el archivo C:\xampp\htdocs\practica3\muestraimagen.php de acuerdo a la
siguiente figura:

23. Ejecutar el programa galeria.php: http://localhost:8080/practica3/galeria.php ENTER.
Ubicar el cursor del ratn en cualquiera de las imgenes y hacer clic.
Tecnologas de la Informacin y Comunicacin
2012

36
Desarrollo de Aplicaciones WEB





Tecnologas de la Informacin y Comunicacin
2012

37
Desarrollo de Aplicaciones WEB



Ejercicios:
6. Crear una pgina web que muestre una galera de 20 imgenes elegidas por el alumno.
Todas las imgenes deben estar en formato JPG y tener la misma resolucin (por ejemplo
704x528 pixeles).

Referencias:
http://html.conclase.net/w3c/html401-es/struct/links.html
http://www.duiops.net/curso/atribimg.htm
















Tecnologas de la Informacin y Comunicacin
2012

38
Desarrollo de Aplicaciones WEB

Prctica 4: Calculadora bsica
Lic. Javier Nolasco Hernndez
javnol@gmail.com

Introduccin
En esta prctica se ejemplifica el uso de formularios en los que se incluyen cuadros de texto y
controles. Adems se muestra la manera en la que se definen clases en archivos independientes y
la forma en la que se pueden incluir dichas clases en la aplicacin principal, as como la creacin de
objetos de dichas clases.
La idea es resaltar los aspectos relacionados con las etiquetas que se pueden colocar en los
formularios. Los aspectos relacionados con php se pueden dejar para despus, hasta la evaluacin
2 y 3.
Procedimiento
24. Crear la carpeta calculadora en C:\xampp\htdocs y en dicha carpeta crear los archivos
calculadora.php y appcalc.php.


25. Editar el archivo C:\xampp\htdocs\calculadora\calculadora.php de acuerdo a la siguiente
figura:
Tecnologas de la Informacin y Comunicacin
2012

39
Desarrollo de Aplicaciones WEB


26. Editar el archivo C:\xampp\htdocs\calculadora\appcalc.php de acuerdo a la siguiente
figura:

Tecnologas de la Informacin y Comunicacin
2012

40
Desarrollo de Aplicaciones WEB


27. Ejecutar el programa appcalc.php: http://localhost:8080/calculadora/appcalc.php
ENTER. Introducir datos en los cuadros de edicin correspondientes a los operandos 1 y 2
y oprimir el botn correspondiente a la operacin que se desee ejecutar.
Tecnologas de la Informacin y Comunicacin
2012

41
Desarrollo de Aplicaciones WEB



Ejercicios:
7. Agrear a la aplicacin un botn que permita calcular e imprimir el residuo o mdulo
obtenido al dividir el Operando 1 entre el Operando 2.
8. Agregar a la aplicacin un botn que calcule e imprima el factorial del operando 1.
9. Agregar a la aplicacin un botn que calcule e imprima la optencia de ambos operandos,
es decir, Operando1 elevado al Operando 2.












Tecnologas de la Informacin y Comunicacin
2012

42
Desarrollo de Aplicaciones WEB

Prctica 5: Formularios
Lic. Javier Nolasco Hernndez
javnol@gmail.com

Introduccin
En esta prctica se ejemplifica el uso de formularios en los que se incluyen varios controles
bsicos.
La idea es resaltar los aspectos relacionados con las etiquetas que se pueden colocar en los
formularios. Los aspectos relacionados con php se pueden dejar para despus, hasta la evaluacin
2 y 3.
Procedimiento
28. Crear la carpeta estadias en C:\xampp\htdocs y en dicha carpeta crear los archivos
alestadias.php y recibealestadias.php.


29. Editar el archivo C:\xampp\htdocs\estadias\alestadias.php de acuerdo a la siguiente
figura:
Tecnologas de la Informacin y Comunicacin
2012

43
Desarrollo de Aplicaciones WEB


Tecnologas de la Informacin y Comunicacin
2012

44
Desarrollo de Aplicaciones WEB


30. Editar el archivo C:\xampp\htdocs\estadias\recibealestadias.php de acuerdo a la siguiente
figura:


Tecnologas de la Informacin y Comunicacin
2012

45
Desarrollo de Aplicaciones WEB

31. Ejecutar el programa alestadias.php: http://localhost:8080/estadias/alestadias.php
ENTER. Introducir y/o seleccionar algunas de las opciones proporcionadas y oprimir el
botn Enviar.

Tecnologas de la Informacin y Comunicacin
2012

46
Desarrollo de Aplicaciones WEB



Ejercicios:
10. Elaborar una pgina web que le pida al usuario su correo electrnico y sus comentarios y
que al oprimir el botn enviar se muestre dicha informacin en otra pgina web. La
interfaz de la primera pgina es:


11. Elaborar una pgina web que tenga la siguiente interfaz.
Tecnologas de la Informacin y Comunicacin
2012

47
Desarrollo de Aplicaciones WEB
















Tecnologas de la Informacin y Comunicacin
2012

48
Desarrollo de Aplicaciones WEB

Prctica 6: Calculadora bsica de Fracciones
Lic. Javier Nolasco Hernndez
javnol@gmail.com

Introduccin
En esta prctica se ejemplifica la manera en la que se definen clases en archivos independientes y
la forma en la que se pueden incluir dichas clases en la aplicacin principal, as como la creacin de
objetos de dichas clases.
Procedimiento
32. Crear la carpeta Fracciones en C:\xampp\htdocs y en dicha carpeta crear los archivos
frac.php y appfrac.php.


33. Editar el archivo C:\xampp\htdocs\Fracciones\frac.php de acuerdo a la siguiente figura:
Tecnologas de la Informacin y Comunicacin
2012

49
Desarrollo de Aplicaciones WEB


34. Editar el archivo C:\xampp\htdocs\Fracciones\appfrac.php de acuerdo a la siguiente
figura:

Tecnologas de la Informacin y Comunicacin
2012

50
Desarrollo de Aplicaciones WEB



35. Ejecutar el programa appcalc.php: http://localhost:8080/Fracciones/appfrac.php
ENTER. Introducir datos en los cuadros de edicin correspondientes al numerador y
denominador de ambas fracciones y oprimir el botn titulado Sumar.


Tecnologas de la Informacin y Comunicacin
2012

51
Desarrollo de Aplicaciones WEB

Ejercicios:
12. Modificar la aplicacin appfrac.php para que en lugar de mostrar el numerador y el
denominador de la fraccin resultante en cuadros de texto, muestre dichos valores como
cadenas de texto.
13. Agregar a la aplicacin un botn que imprima en pantalla la fraccin 1 simplificada. Por
ejemplo, si la fraccin 1 es 6/8 se debe imprimir la fraccin simplificada 3/4.
14. Agregar a la aplicacin los botones que permitan exhibir en pantalla el resultado de la
resta, multiplicacin y divisin de fracciones.




















Tecnologas de la Informacin y Comunicacin
2012

52
Desarrollo de Aplicaciones WEB

Prctica 7: Representacin grfica de fracciones
Lic. Javier Nolasco Hernndez
javnol@gmail.com

Introduccin
En este ejemplo se aplican varias instrucciones en php: for, if, if-else y switch. Se sugiere hacer
corridas de escritorio para ver el funcionamiento del cdigo.
Procedimiento
36. Crear la carpeta RepreFrac en C:\xampp\htdocs y en dicha carpeta crear los archivos
frac.php y reprefrac.php. Adems, crear una carpeta llamada img en la cual se deben
copiar los archivos unmedio.JPG, , unnoveno.JPG.


37. Editar el archivo C:\xampp\htdocs\RepreFrac\frac.php de acuerdo a la siguiente figura:
Tecnologas de la Informacin y Comunicacin
2012

53
Desarrollo de Aplicaciones WEB


38. Editar el archivo C:\xampp\htdocs\RepreFrac\reprefrac.php de acuerdo a la siguiente
figura:

Tecnologas de la Informacin y Comunicacin
2012

54
Desarrollo de Aplicaciones WEB



39. Ejecutar el programa appcalc.php: http://localhost:8080/RepreFrac/reprefrac.php
ENTER. Seleccionar alguna de las fracciones de la parte izquierda y oprimir el botn
Mostrar.
Tecnologas de la Informacin y Comunicacin
2012

55
Desarrollo de Aplicaciones WEB



Ejercicios:
15. Modificar la aplicacin reprefrac.php para que en lugar de seleccionar las fracciones en
botones de radio se puedan seleccionar a partir de un cuadro combinado.
16. Investigar la manera en la que se pueden generar grficas de manera dinmica en lugar de
tener archivos para cada una de las fracciones.






Tecnologas de la Informacin y Comunicacin
2012

56
Desarrollo de Aplicaciones WEB

Prctica 8: Programacin de MySql desde PHP
Lic. Javier Nolasco Hernndez
javnol@gmail.com

Introduccin

En esta prctica se emplea el manejador de base de datos relacional MySQL para crear una base
de datos (escuela) y una tabla (alumnos). Despus se tiene acceso a la tabla alumnos mediante el
lenguaje PHP para insertar registros y mostrar el contenido de la tabla.

PHP permite el acceso a los datos almacenados en una base de datos creada en MySQL mediante
la invocacin de funciones predefinidas. Algunas de estas funciones de PHP relacionadas con el
acceso a datos en MySQL son las siguientes:

Funcin Descripcin
mysql_affected_rows Devuelve el nmero de registros afectados
mysql_close Cierra una conexin MySQL
mysql_connect Abre una conexin
mysql_query Ejecuta una consulta
mysql_num_fields Devuelve el nmero de campos en un resultado
mysql_num_rows Devuelve el nmero de renglones en un resultado
mysql_field_name Devuelve el nombre de un campo
mysql_fetch_array Obtiene un registro como un arreglo


Procedimiento
Tecnologas de la Informacin y Comunicacin
2012

57
Desarrollo de Aplicaciones WEB


40. Abrir el navegador web y ejecutar http://localhost:8080/xampp/ Enter.
41. En la pgina que aparece en el navegador seleccionar y ejecutar la opcin phpMyAdmin
del men Herramientas.



42. Aparece la siguiente pantalla:


Tecnologas de la Informacin y Comunicacin
2012

58
Desarrollo de Aplicaciones WEB

43. Seleccionar la pestaa SQL Crear una base de datos llamada escuela Indicar que se
desea usar la base de datos escuela Crear una tabla llamada alumnos Continuar (ver
la siguiente figura):



44. Despus de oprimir continuar aparece la figura de abajo, en la que se indica que se han
ejecutado las consultas anteriores con xito.



45. Crear la carpeta C:\xampp\htdocs\bdmysql y en dicha carpeta crear los archivos bd.php y
appbd.php.

Tecnologas de la Informacin y Comunicacin
2012

59
Desarrollo de Aplicaciones WEB



46. Editar el archivo bd.php de acuerdo a la siguiente figura:

Tecnologas de la Informacin y Comunicacin
2012

60
Desarrollo de Aplicaciones WEB


Tecnologas de la Informacin y Comunicacin
2012

61
Desarrollo de Aplicaciones WEB



47. Editar el archivo appbd.php de acuerdo a la siguiente figura:

Tecnologas de la Informacin y Comunicacin
2012

62
Desarrollo de Aplicaciones WEB



48. Ejecutar la pgina http://localhost:8080/bdmysql/appbd.php, proporcionar el registro,
nombre y telfono de algn alumno y oprimir el botn Insertar. Despus oprimir el botn
Ver Tabla.


Tecnologas de la Informacin y Comunicacin
2012

63
Desarrollo de Aplicaciones WEB





Tecnologas de la Informacin y Comunicacin
2012

64
Desarrollo de Aplicaciones WEB



49. Agregar los datos de otros dos alumnos y oprimir el botn Ver Tabla.
Tecnologas de la Informacin y Comunicacin
2012

65
Desarrollo de Aplicaciones WEB




Ejercicios:

1. Agregar a la clase BDMySql un mtodo con la siguiente firma:
function cargarTablaConColores($consulta, $colorEncabezado, $colorFilaPar, $colorFilaImpar){}
de tal forma que al invocarlo mediante el botn Ver Tabla produzca el resultado de la
siguiente figura.



Tecnologas de la Informacin y Comunicacin
2012

66
Desarrollo de Aplicaciones WEB



Es decir, tiene la misma funcionalidad que la funcin cargarTabla, pero el color de fondo
del encabezado, el color de fondo de los registros pares y el color de fondo de los registros
impares son argumentos adicionales proporcionados por el usuario cuando se invoca a la
funcin. Un ejemplo de llamado a dicha funcin es:
$bd->cargarTablaConColores("select * from alumnos", "C8FA64", "FAFA64", "FA96C8");

2. Modificar la aplicacin anterior para incorporar dos botones, uno para eliminar un registro
y el otro para actualizar un registro de la tabla Alumnos.

Вам также может понравиться