Manual para la_creacion_de_aplicaciones_web
0 recomendaciones296 vistas
Este documento proporciona instrucciones paso a paso para crear una aplicación web sencilla utilizando XAMPP y Dreamweaver. Explica cómo instalar XAMPP, crear una base de datos en phpMyAdmin, configurar un sitio en Dreamweaver y conectarlo a la base de datos, y agregar formularios para insertar datos. El objetivo es enseñar a los estudiantes los conceptos y herramientas básicas para el desarrollo de aplicaciones web.
Manual para la_creacion_de_aplicaciones_web
- 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.