Escolar Documentos
Profissional Documentos
Cultura Documentos
2012
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-win321.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)
2012
Figura 3. Cuadro de dilogo Guardar como. Aqu el usuario elige la carpeta en la que el archivo a descargar se guardar
2012
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)
2012
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.
2012
Figura 8. Se especifica que se desea agregar un acceso directo en el men de inicio y en el escritorio del equipo
2012
Figura 10. Se especifica que no se desea crear una versin portable de XAMPP
2012
Figura 13. Se oprime la tecla 1 seguido de ENTER para iniciar el Panel de Control de XAMPP
2012
Figura 15. Se oprime la tecla x seguida de ENTER para salir de la instalacin de XAMPP
Figura 16. Seleccionar el mdulo de Apache, aceptar la instalacin del Servicio de Apache y oprimir el botn Start para iniciar el servicio
2012
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).
2012
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.
10
2012
Figura 21.
11
2012
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
12
2012
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-win321.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)
13
2012
Figura 3. Cuadro de dilogo Guardar como. Aqu el usuario elige la carpeta en la que el archivo a descargar se guardar
14
2012
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)
15
2012
16
2012
Figura 8. Se especifica que se desea agregar un acceso directo en el men de inicio y en el escritorio del equipo
Figura 10. Se especifica que no se desea crear una versin portable de XAMPP
17
2012
18
2012
Figura 13. Se oprime la tecla 1 seguido de ENTER para iniciar el Panel de Control de XAMPP
19
2012
Figura 15. Se oprime la tecla x seguida de ENTER para salir de la instalacin de XAMPP
Figura 16. Seleccionar el mdulo de Apache, aceptar la instalacin del Servicio de Apache y oprimir el botn Start para iniciar el servicio
20
2012
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).
21
2012
22
2012
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.
23
2012
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.
24
2012
Figura 23.
25
2012
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
26
2012
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.
27
2012
28
2012
29
2012
30
2012
31
2012
Ejercicios:
5. Crear una pgina web que muestre la informacin presentada en esta prctica de laboratorio.
32
2012
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.
33
2012
muestraimagen.php
en
la
carpeta
34
2012
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.
35
2012
36
2012
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
37
2012
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.
38
2012
39
2012
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.
40
2012
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.
41
2012
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.
42
2012
43
2012
44
2012
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.
45
2012
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:
46
2012
47
2012
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.
48
2012
49
2012
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.
50
2012
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.
51
2012
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.
52
2012
53
2012
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.
54
2012
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.
55
2012
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
mysql_affected_rows mysql_close mysql_connect mysql_query mysql_num_fields mysql_num_rows mysql_field_name mysql_fetch_array
Descripcin Devuelve el nmero de registros afectados Cierra una conexin MySQL Abre una conexin Ejecuta una consulta Devuelve el nmero de campos en un resultado Devuelve el nmero de renglones en un resultado Devuelve el nombre de un campo Obtiene un registro como un arreglo
Procedimiento 56
Desarrollo de Aplicaciones WEB
2012
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.
57
2012
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.
58
2012
59
2012
60
2012
61
2012
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.
62
2012
63
2012
49. Agregar los datos de otros dos alumnos y oprimir el botn Ver Tabla.
64
2012
Ejercicios:
de tal forma que al invocarlo mediante el botn Ver Tabla produzca el resultado de la siguiente figura.
65
2012
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.
66