Manual de paginas web

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

Manual de paginas web

Más contenido relacionado

La actualidad más candente

Destacado

Similar a Manual de paginas web

Más de Jesus Cisneros Morales

Manual de paginas web