1. UNIVERSIDAD TECNOLÓGICA DEL ESTADO DE ZACATECAS
UNIDAD ACADÉMICA DE PINOS
TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN
Materia
DESARROLLO DE APLICACIONES II
Tema
MANUAL PARA LA CREACION DE
APLICACIONES WEB
Nombre completo del Alumno : Ana Francisca Martínez Betancourt
Grado:
4
Grupo:
B
Nombre del Docente: I. en TIC. Eloy Contreras De Lira
Fecha de entrega : 08 de Noviembre del 2013

2. Para comenzar la realización de nuestra base de datos se debe tener el programa con el que vas a
realizarlo, ya instalado con anterioridad. En este caso tenemos el “XAMPP” que es con el que
trabajaremos para crear nuestra base de datos.
Cuando ya está instalado nuestro programa comenzaremos por activar o ejecutar algunas
opciones que este nos ofrece, como se muestra a continuación:
En la imagen anterior se muestra que las opciones no están activadas y nosotros para poder
trabajar con nuestro programa necesitamos que este ejecutado el “Apache” y “Mysql” así que
activaremos estas opciones para poder trabajar con el local host. Se mostrara nuestro programa
así ya activadas las opciones que necesitamos.
Después de haber activado las opciones que necesitamos lo que vamos hacer es crear nuestra
base de datos. Para comenzar hay que abrir nuestro explorador de internet, en el que deseemos
trabajar.

3. Cuando nuestro explorador este ejecutado lo que debemos hacer es escribir la url de la página que
vamos a utilizar en este caso seria “LOCAL HOST”.
Seleccionamos la opción que sea la correcta o terminamos de escribir la URL y damos clic en
buscar o podemos presionar enter.
Nos aparece la siguiente ventana que es la del local host en esta seleccionamos la opción de
“phpMyadmin”

4. Después de seleccionar esa opción nos aparecerá la siguiente ventana la cual indica que estamos
en el programa y que podemos crear nuestra base de datos.
Aquí podremos crear nuestra base de datos como lo haré a continuación en la imagen siguiente,
Donde se encuentra el apartado de CREATE NEW DATABASE se le asigna un nombre:

5. Después de crearlo nos aparecerá la siguiente pantalla que muestra que nuestra base de datos ya
fue creada esto se muestra en la parte superior.
Después de esto podremos crear nuestra tabla le damos un nombre y el número de filas que
contendrá nuestra tabla. Para guardarla o crearla damos clic en GO.
Nos aparecerá la siguiente ventana en la que se muestran las columnas o filas que contendrá
nuestra base de datos.

6. Para continuar con la creación de la tabla lo que sigue es llenar los campos que se muestran en
pantalla con los campos que necesitamos esto como se muestra a continuación en nuestra
siguiente imagen.
Cuando nuestros campos han sido llenados con los datos correspondientes y se ha definido el tipo
de dato si es clave primaria, autoincrementar y el tamaño del texto lo que debemos hacer es
guardar la tabla.
La pantalla que observaremos a continuación es la ventana que surge después de guardar tu tabla
en esta se muestra las filas que se encuentran en ella y los valores que tiene. Te muestra también
los datos para que puedas modificar o eliminar.

7. Al final de la pantalla anterior puedes observar que hay un apartado en el que puedes ver cuál es
la clave primaria y los datos que contiene.
Después de esto ya se creó satisfactoriamente tu base de datos, ahora si puedes comenzar a
realizar la aplicación pero antes de esto debo aclarar que tienes que crear la carpeta donde
alojaras todas tus aplicaciones.
Para esto lo que debes hacer es crear una carpeta en “C”.

8. Cuando ya entraste al XAMPP te aparecerán todas las carpetas que contiene el XAMPP.
Lo que debes hacer es localizar la carpeta del xampp.
Una vez que ya la localizaste lo que debes hacer es accesar a ella para poder ver las carpetas que
contiene.
En esta podrás ver que contiene una carpeta que tiene por nombre “HTDOCS”

9. En esta carpeta acezaremos para poder crear la carpeta que nos ayudara a guardar nuestra
aplicación.
Aquí crearemos nuestra carpeta
Cuando creamos nuestra carpeta le tendremos que dar un nombre en este caso el nombre que le
asigne fue “Prueba”, ahí es donde estaremos guardando nuestra aplicación.

10. Si abrimos la carpeta nos daremos cuenta que es una carpeta vacía porque aún no hemos
guardado ningún dato.
Después de haberla creado lo que sigue es comenzar a crear nuestra aplicación.
Para ello utilizaremos Dreamweaver
Ejecutamos el programa que utilizaremos en este caso el mencionado anteriormente.

11. “Creación del sitio”
Después de abrir nuestro programa nos aparecerá la interfaz de este en la que podremos trabajar
en la creación de nuestra aplicación.
Para comenzar con la creación de nuestra aplicación lo que debemos hacer es crear el sitio lo cual
se realiza de la siguiente forma.

12. Selecciona en parte superior de la interfaz en la barra de herramientas la opción de “site” das clic
en este y te aparecerá la siguiente ventana.
Damos clic en new site para crear el nuevo sitio y nos aparecerá la siguiente ventana donde se
llenaran los datos que a continuación se presentaran.
En esta parte le damos un nuevo nombre a sitio con el que estaremos trabajando
Después de esto seleccionamos la ruta en la que guardaremos nuestro sitio y será en la carpeta
que creamos con anterioridad en el “C”.

13. Se abrirá automáticamente la ventana que se muestra a continuación para verificar donde es la
ruta en la que queremos guardarla.
Seleccionamos la carpeta en este caso será la carpeta que creamos la seleccionamos y damos clic
en abrir.

14. Después de esto se abrirá la carpeta y nos mostrara su contenido, aquí se muestra vacío porque
aún no contiene nada. Damos clic en guardar para que se guarde nuestro sitio.
Se muestra la siguiente pantalla después de terminar de llenar los datos de nuestro sitio.
Seleccionamos la opción de servers pero no hay que guardar porque aún no terminamos de
modificar la información de nuestro sitio. Al dar clic en servers se mostrara la siguiente pantalla
para poder agregar un nuevo servidor. Para agregarlo lo que debemos hacer es lo siguiente damos
clic en la pestaña que tiene el signo de suma.

15. Al dar clic en la pestaña con signo de suma automáticamente nos aparece la ventana que se
muestra a continuación, la cual nos permitirá cambiar los datos del servidor
En la primera opción tendríamos que agregar o poner el nombre del servidor le damos el nombre
que queríamos que tenga el sitio.

16. Después de eso el tipo de conexión que vamos a utilizar en este caso será local por lo que
seleccionamos la opción “Local/Network”
Lo que debemos hacer es seleccionar la carpeta en la que vamos a alojar nuestro sitio web.

17. Cuando damos clic en la carpeta que aparece en un costado y nos aparecerá esta ventana para ver
dónde vamos a guardar el sitio damos clic en el botón guardar.
Después de eso nos pide que introduzcamos la dirección web o URL nosotros pondremos
http://localhost/prueba primero porque es un local host y después porque nuestra carpeta donde
está alojado se llama prueba.
Después que hemos terminado con esto nos quedaran llenos todos los campos del registro.

18. Damos clic en la pestaña “advanced” esto antes de guardar.
Estando en esta pestaña el único cambio que realizaremos será que la opción desplegable
seleccionamos la opción “PHP MySQL”

19. Aquí se muestra la opción “PHPMySQL” seleccionada
Al tener este dato cambiado lo único que hacemos es dar clic en el botón de “Save” (Guardar) para
que los datos sean modificados con éxito.
Después de esto regresamos a la ventana de un principio

20. Estando en esta pantalla cambiamos la opción de remoto a Testing y solo dejamos seleccionada
esta opción.
Al finalizar esto nos regresa a la ventana principal del programa y nos mostrara que nuestro sitio
ya fue creado como se muestra a continuación.
“Creación de los archivos”
Después de terminar de hacer el sitio continuamos creando la página que utilizaremos para
nuestra aplicación.

21. Cuando estas de nuevo en la página principal puedes crearlo desde donde te aparece el sitio
creado
Lo puedes hacer dando clic derecho sobre el sitio seleccionas la opción “new file”
Y te aparece que ya fue creado como se muestra en la primera imagen y le das un nombre como
se muestra en la segunda imagen. Puedes crear las páginas que necesites, como la tercera imagen
muestra varias páginas que necesitaba para mi aplicación.
Cuando abrimos el archivo nos aparecerá en blanco porque aún no hemos realizado ningún
cambio.

22. “Conexión con la Base de Datos”
Creamos la conexión con la base de datos en la opcion “+” como se muestra en la siguiente
pantalla se muestra una pestaña (Conexión MySQL) lo que indica que nuestra base de datos sera
manejada con MySQL.
En este aparatado vamos a agregarle un nombre a la base de datos, así como el servidor y el
usuario. Seleccionamos la opción de seleccionar para que aparezca la base de datos ya creada,
con la información que le agregamos.
Después seleccionamos aceptar para realizar la conexión, teniendo llenos los campos que se
piden anteriormente, como se observa en la imagen de a continuación en mi caso no agregué una
contraseña así que al dar clic en aceptar me mostrara una alerta que me indica que no tengo pero
como no deseo que haya alguna aceptare y continuare.

23. En la pantalla que se muestra nos aparece la base de datos ya creada, en esta vamos a poder
almacenar nuestros datos utilizando el XAMPP.
“Creación de la función Guardar”
Ahora trabajaremos con el archivo que creamos anteriormente “guardar_alumno” en este vamos
a crear las cajas de texto, el menú y los botones de opción de una manera fácil.
Para comenzar seleccionamos la barra de insertar y se despliega un menú donde elegiremos la
opción “Datos”.
Aparecerá el siguiente menú seleccionamos la opción insertar registro-asistente de formulario
de inserción de registros.

24. Aparece la siguiente ventana donde podemos modificar ciertos datos de la tabla que vamos a
agregar.
En la opción tras la inserción ir a le damos clic en examinar y elegimos el archivo que nos llevara
después de insertar el registro, después de esto damos clic en aceptar.
Seleccionamos sexo y en la opción mostrar como elegimos la opción grupo de opción damos
nombre a la etiqueta y valor, después damos clic en aceptar para que nuestros cambios se
guarden con éxito.

25. Para el grado elegimos la opción menú que es la que más se apega a lo que necesitamos o la que
deseamos utilizar.
De igual manera le damos nombre y valor a las etiquetas dependiendo de lo que necesitemos
modificar.
Damos clic en aceptar para que guarden los cambios.
En la barra archivo-guardar todo para que lo que hemos hecho hasta el momento se guarde y no
se pierdan los datos que ya habían sido modificados.

26. Verificamos si el archivo fue creado y si guarda los registros, para esto nos vamos al explorador en
la dirección http:/localhost/prueba. Que es la URL que le dimos a nuestro sitio cuando lo creamos.
Le damos clic en la opción “registrar.php” porque ese es el nombre que le asignamos a nuestra
página y llenamos los campos para ver si estos funcionan
Nos vamos a la base de datos para verificar si los datos se han guardado con éxito y si esto se
cumple los datos se mostraran sino no habrá datos pero en caso de que pudiera llegar a suceder
esto nos aparecería el error desde el explorador donde lo estamos ejecutando.

27. “Creación de la lista”
Para crear el archivo de mostrar registros o mejor bien dicho nuestra Lista nos vamos a
dreamweaver en la opción datos y elegimos la opción tabla dinámica.
Nos aparece la siguiente ventana y seleccionamos Juego de registros.
Nos aparece la siguiente ventana y seleccionamos la opción aceptar.

28. Después de esto nos parecerá la siguiente ventana que se muestra a continuación donde
seleccionamos el recorset que vamos a utilizar en caso de que tengamos varios, así como cuantos
registros queremos que se muestren.
Automáticamente se creara la tabla donde se guardaran nuestros registros.
Guardas todos los cambios realizados
Nos vamos al navegador para verificar si los datos se están guardando correctamente.

29. “Creación de actualizar y eliminar”
En el archivo que ya creamos lista_alumno vamos a insertar 2 nuevas columnas que
tendrán los valores de Eliminar y Actualizar.
Primero a nuestra tabla le insertaremos las columnas que le hacen falta esto se
realiza de la siguiente manera. Se selecciona la última columna de nuestra lista y
se da clic derecho después eliges table, seleccionas la opción Insert rown or
columns.
Al dar clic automáticamente te mandara a una ventana que te pedirá que quieres
insertar si filas o columnas y cuantas.
Y la tabla se muestra de la siguiente manera con las 2 columnas que insertamos al
final de nuestra tabla.
Las 2 celdas que se insertaron
para eliminar y actualizar.
Después llenamos esos campos con la información requerida y se mostrara como en la
siguiente imagen.

30. Cuando terminaste de crear las acciones que realizará tu lista, debes hacer los archivos que
permitirán la realización de cada una de las instrucciones. Los cuales serían “Actualizar_alumno y
Eliminar_alumno”.
Después de que tus archivos ya fueron creados tus archivos debes de modificar cada uno de
estos.
“Creación de la función Actualizar”
Para crear este archivo actualizar_alumnos, se abre el archivo de guardar_alumnos
Y lo guardas como… actualizar_alumnos.
Al abrir el archivo de actualizar_alumnos se observara
guardar_alumnos.
igual que el archivo

31. Para convertirlo de guardar a actualizar hay que seguir los siguientes pasos:
 Seleccionas la opción Update record y te aparecerá la siguiente ventana.
 Seleccionas la opción Recordset y aparecerá la siguiente ventana, en la que
cambiaras los datos que se adapte a tu trabajo, una vez que este acomodado de
forma correcta das clic en aceptar para guardar los cambios.
 Después de crear el Recordset
mostrara que se creó con éxito.
deberá aparecer
en la parte inferior así se
 Ahora después de que creaste el Recordset hay que arrastrar los datos del
Recordset al formulario donde vaya cada uno, para que quede de la siguiente
manera:
 Después de esto debes ir a lista_alumnos y hacer el link de la palabra que realizara
la acción y del archivo.

32.  A continuación para finalizar con la acción de actualizar lo que prosigue es agregar
al código el siguiente código.
 Así es como finalizas la acción de actualizar la cual ya puede ser ejecutada, antes
debes guardar los datos.
Lista
Actualizar el
registro
Después de modificar
el registro
“Creación de la función Eliminar”
Para la creación de la acción eliminar_alumnos se crea un nuevo archivo y este archivo
debe de estar vacío.
Primero se crea el nuevo archivo sin nada de código.
Después de crearlo debes realizar lo siguiente:
 En la parte de Insert > data > Delete Record das clic

33.  Te aparecerá la siguiente pantalla das clic en aceptar
 Automáticamente te aparecerá la siguiente ventana donde debes modificar los
campos que te aparecen.
 Aceptas los cambios y se generara automáticamente el código.
 Después regresas a la lista y en las acciones donde esta eliminar hacer el vínculo
con el archivo para que esté conectado y al dar clic se ejecute.
 A continuación para finalizar con la acción de eliminar lo que prosigue es agregar al
código el siguiente código.
 Así es como finalizas la acción de eliminar la cual ya puede ser ejecutada, antes
debes guardar los datos.
Lista
Lista con los
datos sin
eliminar

34. Después de dar clic en eliminar
y eliminar el segundo registró
“Creación de los reportes”
Lo primero que debemos hacer es copiar la carpeta de la librería FPDF para la creación de los
reportes.
Primero debes crear otra columna en la lista donde colocaste las acciones. Selecciona las dos
columnas que contienen las Acciones presionas clic derecho sobre las columnas > clic en
Tabla >presiona clic en Insertar filas o columnas.
Seleccionas la opción columna y das en numero 1 la agregas después de la actual después de
realizar los cambio das clic en aceptar para que se guarde la edición.

35. Después la lista se mostrara de la siguiente manera:
Agregas en el campo la palabra reporte para así identificar lo que será tu reporte, das clic en
guardar todo para que los cambios sean realizados y se actualicen.
Crear un archivo con el nombre de “reporte_alumno”.
Abres el archivo “Reporte_alumno” y accedes directamente al código, debes eliminar todo el
código que haya ahí (algo parecido a lo que hicimos con el archivo de eliminar).

36. Ahora escribes el código que se muestra en la siguiente imagen con este podrás crear tus
reportes solo modificando los datos que lo componen.
Ahora abres tu archivo listas y seleccionas el campo de Reporte y realizas la vinculación entre el
“Reporte_alumno” y la acción.

37. Después de lo anterior se abrirá una ventana para elegir el archivo que se nos mostrara tras
presionar la palabra PDF. En nuestro caso es “reporte_alumno” solo das clic en aceptar para
guardar los cambios.
Para finalizar solo entras nuevamente hasta la lista y das clic sobre reportes para que te des
cuenta que se ejecute esta acción.
Como resultado te abrirá un documento PDF los datos de los campos de la elección.