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 : José de Jesús Cisneros Morales

Grado: 4 Grupo: B Nombre del Docente: I. en TIC. Eloy Contreras De Lira Fecha de entrega : 08 de noviembre de 2013

1.- Abrimos Xampp que es la aplicación que nos permitirá poner en marcha nuestros servicios

tanto el Apache como el MySQL y así poder activar nuestra página donde podremos construir

nuestra Base de Datos.

1.1.- Imagen que muestra la aplicación Xampp con los servicios Apache y MySQL ya están activados.

2.- Ahora en nuestro Explorador de cualquier tipo “Explore, Chrome, Mozilla, etc.) en la barra

del Explorador escribimos la siguiente página http://localhost o si tienes problemas al

momento de acceder y no te muestra una pantalla como la que se te muestra a continuación

entonces introduces la dirección ip “127.0.0.1” para que puedas comenzar a crear tu Base de

Datos. Una vez hecho lo anterior ahora solo das clic sobre la opción que de Herramientas

llamada “phpMyAdmin”.

2.1.- La Imagen te muestra la pantalla del local host que te permitirá para acceder a crear tu nueva Base de Datos.

3.- Ahora comenzamos a crear nuestra nueva Base de Datos para esto solamente introducimos

el nombre que deseamos asignarle a la Base de Datos en el espacio marcado. Ejemplo:

“miprueba” es importante recordar que el nombre no debe de llevar espacios de preferencia

utiliza un guio bajo en lugar de espacio. Ejemplo “mi_prueba”.

.

4.- Una vez asignado el nombre con las restricciones correspondiente solamente das un clic en

el botón “Crear”, pero no pienses que ya has terminado esto que acabas de hacer es solo para

darle nombre a tu Base de Datos.

5.- El siguiente paso es la creación de la tabla donde solo le damos el nombre que tendrá para

poder identificar cuáles son los damos que nos estará almacenando así como la asignación de

los campos que nosotros comúnmente conocemos como los datos que vamos a guardar en la

Base de Datos. En esta ocasión le daremos a la tabla el nombre “alumnos” y se le

asignaran “6” campos para poder hacer la prueba. El número de campos lo defines tú ya que

tú lo adecuaras acorde a las necesidades que se requieren en la información que almacenaras.

Una vez hecho lo anterior solo das un clic en el botón “Continuar”.

6.- Para finalizar te mostrara una pantalla parecida a la que más adelante se te muestra en ella

comenzaras a asignar los siguiente valores: Nombre del Campo o Nombre del Dato, Tipo

Longitud que es el asignar cuantos valores permite solo introducir, Índice (Se asignara un

dato que se le conocerá como dato primario “Que mediante el podrás encontrar con mayor

facilidad la información restante que deseas buscar”) y A_I (Que sea un dato Auto Incremental

que quiere decir “Que este dato no será necesario estar cambiándolo constantemente y

automáticamente se le ira asignando valores que se van enlistando conforme se introduce un

nuevo dato”.

7.- Una vez que terminaste de asignarle lo requerido para el manejo de tus datos como se

muestra en la imagen ahora solo das un clic en el botón “Grabar” para que te guardar los

cambios que le has hecho a tu tabla.

8.- Cuando ya hallas terminado el paso anterior te mostrara una interfaz como la que te

mostramos a continuación. Donde te muestra que tu Base de Datos ya se creó y que se le han

creado en ella Tablas con sus respectivos Campos.

De esta manera has creado tu Base de Datos.

Ahora comenzaremos a trabajar con el programa DREAMWEAVER para poder crear tu

aplicación web. La versión puede variar en este caso utilizaremos la DREAMWEAVER CS6.

Una vez que tienes el programa procedes a abrirlo dando doble clic sobre su icono. Cuando ya

abriste el programa te mostrara una interfaz como la siguiente:

“CREACION DEL SITIO”

Primero creamos una carpeta con un nombre relacionado con nuestro nueva aplicación web en

la siguiente ruta “C:\xampp\htdocs” una vez hecho comenzaremos a crear nuestro sitio,

buscas en la barra de menús la opción “Sitio” y después clic en Nuevo Sitio”.

A continuación te mostrara una interfaz donde cambiaras el nombre de tu sitio y la ruta donde

lo guardaras tu sitio pero aun no presiones el botón “Guardar” porque antes de eso deberás

crear tu servidor, guíate con el ejemplo:

Sin guardar lo anterior das clic en “Servidores” donde te mostrara una ventana como la

siguiente donde darás un clic en el signo de más que aparece en ella y comenzar a crear tu

servidor, guíate con la imagen:

Cuando realizaste lo anterior te mostrara una ventana donde llenaras los siguientes datos:

Nombre del servidor: Asignas el nombre de tu gusto.

Conectar usando (en este caso será “local/red” porque se realizara de manera local).

Carpeta del servidor (eliges la ruta en donde guardaste tu sitio).

URL web: Escribes lo siguiente (http://localhost/nombre de la carpeta que creaste

en htdocs y utilizaste para guardar el sitio).

Cuando ya modificaste los datos no des clic en el botón “Guardar” porque aun harás

modificaciones.

Guíate con la imagen que muestra la un ejemplo ya llenado:

Ahora das clic en la opción “Avanzadas” donde solo modificaremos el Modelo de Servidor a “PHP MySQL” y ahora si das clic en el botón “Guardar” fíjate en el ejemplo:

Entonces te regresara a la interfaz que te mostro primero cuando comenzarte a crear tu sitio.

Hay para finalizar esta parte solo cambias que tu servidor no sea de tipo REMOTO si no de tipo DE PRUEBA y para finalizar das clic en el botón Guardar.

Para que compruebes que si se ha creado tu sitio solo verifica en la Barra de “Archivos”.

“CREACION DE LOS ARCHIVOS”

Seleccionas el sitio y das clic derecho sobre él.

Y se desplazara una ventana como la siguiente donde darás clic en la opción “Nuevo archivo”

Y tu nuevo archivo te lo mostrara bajo el sitio y lo que este seleccionado de azul lo borras y escribes “guardar_alumno” porque será la ventana donde comenzaremos a ingresar y guardar los datos.

Después crearas otro archivo.

Este segundo archivo lo nombraras con el nombre de “lista_alumno” para que en el visualices una lista con todos los datos ingresados

“CONEXIÓN CON LA BASE DE DATOS”

Para poder hacer la conexión de la aplicación con la base de datos debes de abrir tu archivo de “guardar_alumno” y te diriges al menú “Ventana” seguido de un clic en la opción “Base de Datos” para poder visualizar la herramienta para realizar tu conexión.

Imagen de la ruta para mostrar la herramienta de Base de Datos.

Imagen que muestra en donde se trabajara para poder hacer la conexión.

Ahora das un clic en la cruz que se encuentra en el área de la conexión y das otro clic en la opción “Conexión MySQL” que se desplaza. Sigue el ejemplo:

A continuación te mostrara una ventana donde deberás llenar los siguientes datos:

Nombre de Conexión: Asignaras el nombre que desees. Servidor MySQL: Como es de manera local escribes “localhost”. Nombre de Usuario: Siempre será root. Contraseña: Este campo quedara solo. Base de Datos: En esta ocasión va a variar porque va a depender según la Base de

Datos que deseas conectar en este caso será “miprueba”. Una vez terminado das clic en el botón “Aceptar”. Sigue el ejemplo que se te muestra en la imagen:

Imagen de la elección de la base de Datos

Imagen que muestra la ventana con los datos asignados para la realización de la conexión.

Y por ultimo para verificar que si se creó tu Base de Datos te diriges al área de Base de Datos y checas que se encuentre mediante el nombre que le asignaste.

“CREACION DE LA FUNCION GUARDAR”

Como anteriormente abrimos nuestro archivo “guardar_alumno” ahora vamos a crear el texto,

las cajas de texto, el menú y los botones de opción de una manera fácil y sencilla si tener que

codificar mucho solamente recordar muy bien que herramientas insertaremos.

Primero verificamos que nuestra área de Insertar este posicionado en la opción “Datos o

Data”.

Después continuamos la siguiente ruta “Insertar Registro – Asistente de Formulario de

Inserción de Registros” donde nos desplegara una ventana como la que se te muestra más

adelante y tendrás que elegir los siguientes datos:

Connection: Se refiere a elegir la conexión con la que realizaste la conexión entre el

archivo y la Base de Datos por lo general muchas de las ocasiones aparece por default

pero ten cuidado porque cuando ya hiciste la conexión de varias Bases de Datos te

puede mostrar otra que quizás no es la correcta que deseas utilizar.

Table: Te da a elegir con cuál de las tablas que creaste en tu Base de Datos quieres

tomar los datos para la creación de la función GUARDAR.

After inserting,go to: Esta instrucción es para declarar que es lo que quieres que te

muestre una vez que ya has insertado y guardado los datos deseados puede ser tanto

volver a mandarte a insertar y guardar más datos o como en este caso lo mandaremos

que nos muestre, una vez guardado, a la lista de los datos guardados con anterioridad.

Para poder realizar esta operación das clic en el botón Browse muestras la ruta

correspondiente y así poder elegir el archivo deseado.

Form fields: En esta nos permite eliminar o agregar los campos que deseamos que se

muestren en muestra aplicación en este caso como nuestra Base de Datos declaramos

que la id_alumno se autoincremental no tiene caso que lo dejemos y no lo muestre

para llenar simplemente nos ocasionara un choque de información para solucionar

seleccionamos la fila que le corresponde al id_alumno y después lo eliminamos dando

un clic en símbolo de menos. Lo que es nombre_alumno, apellido_paterno y

apellido_materno se dejan y como automáticamente tienen un Display as: Text field lo

dejamos así, el campo sexo lo manejaremos como un grupo de opción porque en la

Base de Datos declaramos este campo como entero al igual que el grupo pero este se

manejara con un menú estos dos últimos se modificaran en el botón “Propiedades”.

Guíate con las imágenes siguientes:

Imagen donde se selecciona la lista_ alumno que es lo que nos mostrara una vez que ya guardemos nuestros

datos una vez elegido solo das clic en el boton OK.

Imagen que te muestra que ya se eligió un destino después de guardar los datos.

Imagen que muestra la selección de la fila de id_alumno y que está destinada a ser eliminada mediante el símbolo

de menos que se te muestra.

Imagen que muestra ya los campos restantes una vez que se eliminó el id_alumno, así como los campos que no

se modificaran debido a la declaración varchar que se les asigno en la Base de Datos.

Imagen que muestra que se está eligiendo un Grupo de Opción para el dato sexo.

Se presiona el botón que esta seleccionado la modificar las propiedades de esta función.

Imagen que representa como se han modificado para poder asignar los datos dentro de nuestra Base de Datos una vez

realizada la modificación se da clic en el botón OK

Imagen que muestra que se está eligiendo un Menú para el dato grupo.

Se presiona el botón que esta seleccionado la modificar las propiedades de esta función.

Imagen que muestra la interfaz de las propiedades del Menú

Imagen que representa como se han modificado para poder asignar los datos dentro de nuestra Base de Datos una vez

realizada la modificación se da clic en el botón OK

Imagen que muestra que ya todos los datos requeridos han sido modificados, ahora solo das clic en el botón OK.

Una vez hecho lo anterior en tu archivo “guardar_alumno” te mostrara un formulario con los

campos que elegiste con anterioridad como en el ejemplo siguiente:

Ahora solo guardas todo lo que has realizado para que puedas hacer la prueba.

Enseguida abres una página de tu explorador para que verifiques que si funciona tu aplicación

de guardar. En ella en la barra de URL introduces la URL Web que asignaste cuando creaste el

servidor en este caso es http://localhost/miprueba5b y te mostrara una interfaz con los archivos

que tienes guardados en la carpeta que creaste en xampp – htdocs y en ella darás un clic

sobre “guardar_alumno.php” para que te permita ingresar datos y guardarlos como se

muestra a continuación:

Cuando ya accediste a “guardar_alumno.php” podrás introducir los datos que desees en la

ventana siguiente:

Cuando ya introduzcas tus datos solo das clic en “Insert record” y automáticamente guardara

los datos en la Base de Datos y te mandara directamente a la lista_alumno.php porque así se

asignó anteriormente. La siguiente imagen te muestra cómo se llenaron los campos:

Por último si aún dudas que se hayan guardado tus datos verifica en la Base de Datos y en la

tabla correspondiente. Mira el ejemplo:

Imagen que indica que los datos introducidos en la aplicación han sido guardados con éxito.

“CREACION DE LA LISTA”

Ahora en lugar de trabajar en el archivo “guardar_alumno” te vas a posicionar en el archivo

“lista_alumno” darás doble clic y se abrirá automáticamente el área en que trabajaras.

Primero creamos el Recordset para no tener problemas mas adelante mediante la ruta

“Bindings – clic en el símbolo de la cruz – clic en Recordset (Query)” o guíate con la

siguiente imagen.

En este caso no modificamos nada porque para nuestra lista deseamos que nos muestre toda

la informacion, entonces lo dejamos todo intacto y solo damos clic en el boton “OK”

Después verificamos que nuestra área de Insertar este posicionado en la opción “Datos o

Data”.

Después continuamos la siguiente ruta “Dynamic Data: Dynamic Table – Dynamic Table”

donde nos desplegara una ventana como la que se te muestra más adelante y tendrás

solamente que dar clic en el botón OK.

Y te mostrara tu archivo con la siguiente tabla que será la que te mostrara los datos que iras

guardando en tu aplicación.

Guardas todo lo realizado en el archivo “lista_alumno”.

Una vez que realizaste todo lo anterior procedes a guardar otro dato desde el principio en tu

aplicación y al momento de dar clic en el botón Insert record te mandara automáticamente a

una lista como la que se muestra a continuación:

“CREACION DE LOS VINCULOS ELIMINAR Y ACTUALIZAR”

En el archivo “lista_alumno” en la tabla que creamos debemos de insertar dos nuevas

columnas la de ELIMINAR y ACTUALIZAR esta segunda la ocuparemos más adelante.

Primero seleccionamos la última fila - das sobre ella clic derecho – clic en table – Insert

Rows or Colums:

Después se desplegara una ventana donde seleccionaras la opción “Colums – Number of

columns = 2 – Where = After current Column seguido de un clic en OK como se muestra en

la imagen:

Ahora combinara las dos últimas columnas de la primera columna y en ella escribirás

“Acciones” y en las otras que restan solo escribirás “Eliminar y Actualizar” como se muestra

en la imagen:

Una vez terminado lo anterior en el sitio creas dos nuevos archivos con los siguientes nombres

“eliminar_alumno y actualizar_alumno”.

Cuando ya creaste los archivos seleccionas el texto de las columnas para para realizar la

vinculación en el caso de eliminar.

Ya seleccionado te vas a la barra de propiedades y darás clic en donde encuentres un folder

pequeño.

Y se desplegará una nueva interfaz donde deberás de indicar a donde deseas que te deslice

una vez que se hace clic sobre el nuevo vinculo en el caso de eliminar no mandara a el archivo

“eliminar_alumno” seguido de un clic en el botón OK.

Y tu vínculo te lo presentara de la siguiente manera:

Ahora vuelves a seleccionar el vínculo Eliminar y das clic en el botón “Code o Codigo”.

Y en la línea marcada después de (<td width="94"><div align="center"><a href=

“eliminar_alumno.php) escribes lo siguiente (?id_alumno=?php echo

$row_Recordset1['id_alumno']; ?>) pero esto es antes de (“>Eliminar</a></div></td>)

Dejando tu código de la siguiente manera:

Ahora seleccionas el texto Actualizar.

Ya seleccionado realizaras lo mismo que en el vínculo anterior te vas a la barra de propiedades

y darás clic en donde encuentres un folder pequeño.

Y se desplegará una nueva interfaz donde deberás de indicar a donde deseas que te deslice

una vez que se hace clic sobre el nuevo vinculo en el caso de eliminar no mandara a el archivo

“actualizar_alumno” porque primero debemos de entrar a otro archivo apara poder cambiar

los datos y por ultimo seguido de un clic en el botón OK.

Y tu vínculo te lo presentara de la siguiente manera:

Ahora vuelves a seleccionar el vínculo Actualizar y das clic en el botón ”Code o Codigo”.

Y en la línea marcada después de (<td width="94"><div align="center"><a href=

“actualizar_alumno.php) escribes lo siguiente (?id_alumno=?php echo

$row_Recordset1['id_alumno']; ?>) pero esto es antes de (“>Actualizar</a></div></td>)

Dejando tu código de la siguiente manera:

Por ultimo guardamos todos los cambios.

“CREACION DE LA FUNCION ELIMINAR”

Ahora vamos a abrir el archivo de “eliminar_alumno” para crear la función y seguimos la

siguiente ruta Insert – Data – Delete Record como se muestra a continuación:

Se desplazara una ventana en la cual solo elegirás a donde te mandara después de eliminar el

dato:

En este caso elegirás mandar al archivo “lista_alumno” y solo das clic en OK.

Y vuelves a dar clic en OK para la terminación de esta función.

Y no te preocupes en la pantalla no te aparecerá nada y por ultimo solamente guarda los

cambios.

Ahora en la lista ya que te muestra las acciones elimina uno de los datos para que veas si en

realidad funciona.

Imagen sin eliminacion de datos.

Imagen con eliminacion de datos.

“CREACION DE LA FUNCION ACTUALIZAR”

Ahora vamos a abrir el archivo de “actualizar_alumno” para crear la función para la

actualización de los datos y seguimos la siguiente ruta Insert – Data – Update Record –

Record Update Form Wizard como se muestra a continuación:

Se desliza una ventana donde te pide que crees un Recorset, solamente das clic sobre la

palabra Recorset en la opción 4.

Te muestra otra ventana hay no haces nada solamente das clic en OK para la creacion del

Recorset.

Te vuelve a aparecer la primera ventana no te preocupes hay solamente da clic en el boton

OK.

Ahora si nos aparece otra ventana donde solamente indicaremos a dónde quieres que te

mande la función del archivo en este caso a “lista_alumno” para que muestre las nuevas

modificaciones.

Elegimos el archivo y damos clic en el boton OK.

Por siguiente te mostrara como quedaron cambiado los datos según a los datos que se piden y

almacenan en la Base de Datos y solo das clic en el boton OK.

Lo anterior te asignara los campos correspondientes para cambiar la informacion y para dar por

terminada esta funcion solo es necesario que guardes los cambios para que se puedan activar

el resto de las funciones y puedas comenzar a modificar.

Abres donde esta tu lista y comienza a realizar pruebas dando clic en la opcion Actualizar

Enseguida te mostrara en campos habilitado para poder cambiar los datos que se desean

actualizar.

Cambia unos datos por otro y solo das clic en el boton Update record para validad la funcion.

Y una vez hecho lo anterior te regresa a la lista ya con lo datos actualizados.

“CREACION DE LOS REPORTES”

Primero pasamos en la carpeta la librería y el resto de los archivos para la creación de

reportes. Guíate con los que están encerrados.

Ahora te mostraremos como crear un reporte acerca de los datos que se asignan. Para

comenzar debes de crear otra columna a lado de las columnas donde colocamos las acciones.

Seleccionamos las dos columnas que contienen las Acciones – presionas clic derecho

sobre las columnas – clic en Tabla – presiona clic en Insertar filas o columnas. Para

mayor precision guiate con la siguiente imagen:

Hecho lo anterior seleccionas la opcion Columnas – en numero introduces 1 porque solo

deseas agregar una columna – seleccionas la opcion Despues de la columna actual y por

ultimo presionas el boton de Aceptar.

Y te creara la columna como se muestra a continuación:

Introduces en el campo de la tabla la palabra PDF (porque en este caso se generaran reportes

en PDF) igual puedes escribir otras palabras como reporte, imprimir, etc. Cuando termines

guardas los cambios.

En el sitio vuelves a crear otro archivo con el nombre de “reporte_alumno” y procedes a abrir

el archivo.

Una vez abierto el archivo presionas el botón “Codigo”.

En el área de código borras todo lo que contenga y escribes el código que se te

muestra más adelante. Ten mucho ojo puedes utilizar siempre este código pero lo

importante es que cambies en nombre de la Base de Datos, las tablas en las consultas

y el nombre de los campos. Observa los datos encerrados.

Nombre de la Base de Datos

Nombre de la tabla donde se

llaman los datos

Nombre de los

Campos que se

desea extraer los

datos

Ya casi para terminar vuelves a abrir tu archivo “lista_alumno” y en el seleccionas la palabra

que escribiste que fue PDF esto es con el fin de hacer la vinculación y te pueda mostrar el

reporte de cada persona que desees. Cuando ya seleccionaste PDF solamente presionas el

botón con la imagen de un folder para crear la vinculación.

Después de lo anterior se desplazara una ventana para elegir el archivo que se nos mostrara

tras presionar la palabra PDF. En nuestro caso es “reporte_alumno.php” ahora solo

presionas clic en el botón “Aceptar”.

Ahora ya tendrás vinculadas todas tus acciones solo es cuestión de que guardes todo los

cambios, observa la imagen siguiente:

Para finalizar solo entras nuevamente hasta la lista de todos los datos que has introducido y

presionas en la opción “PDF”

Como resultado te abrirá un documento PDF los datos de los campos de la elección.

NOTA: No siempre te mostrara el reporte como el anterior incluso puedes hasta ingresar

imágenes para hacerlo mas vistoso.

Con esto finalizamos la principales opciones en la creacion de un aplicación web.