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

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.

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”

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:

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.

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.

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”.

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”

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.

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.

“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.

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”.

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.

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.

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.

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.

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.

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”

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

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.

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.

“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.

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.

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.

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.

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.

“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.

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.

“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.

Después llenamos esos campos con la información requerida y se mostrara como en la

siguiente imagen.

Las 2 celdas que se insertaron

para eliminar y actualizar.

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 igual que el archivo

guardar_alumnos.

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 deberá aparecer en la parte inferior así se

mostrara que se creó con éxito.

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.

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.

“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

Lista

Actualizar el

registro

Después de modificar

el registro

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

“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.

Después de dar clic en eliminar

y eliminar el segundo registró

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).

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.

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.