37
MANUAL PARA CREAR UN SITIO EN DREAMWEAVER Desarrollo de Aplicaciones II Edgar Eduardo Renovato Contreras 8/11/2013

Manual edgar

Embed Size (px)

Citation preview

Page 1: Manual edgar

MANUAL PARA CREAR UN SITIO EN

DREAMWEAVER

Desarrollo de Aplicaciones II

Edgar Eduardo

Renovato Contreras

8/11/2013

Page 2: Manual edgar

1

Nos posicionamos en el equipo para crear una carpeta.

A seleccionamos la unidad c:

Page 3: Manual edgar

2

Y ahora seleccionamos la carpeta de XAMP.

Y dentro de la carpeta htdocs creamos la carpeta donde se guardara el sitio.

Page 4: Manual edgar

3

Se crea la carpeta con el nombre que se decida.

Después debemos crear la base de datos en localhost.

Page 5: Manual edgar

4

Seleccionamos phpMyAdmin para comenzar.

Aquí es donde comenzamos a realizar la base de datos.

Page 6: Manual edgar

5

Aquí se le da el nombre a la base de datos. Al finalizar se le da crear.

Aquí se le da el nombre a la tabla con los campos que se desee. Después se le da en el botón

continuar.

Page 7: Manual edgar

6

Aquí se llena cada campo con la información que se desea registrar.

Al final se le da clic en el botón que dice grabar.

Al terminar aparecerá la tabla con los datos a registrar.

Page 8: Manual edgar

7

Después abriremos Adobe Dreamweaver CS6.

Aquí se muestra la interfaz de Dreamweaver CS6.

Page 9: Manual edgar

8

Después en la pestaña superior seleccionamos sitio y creamos un nuevo sitio.

Después aparecerá una ventana como la anterior donde le daremos el nombre al sitio.

En la carpeta del sitio local será la que se creó al principio en la unidad c: la carpeta

XAMP/localhost/y el nombre de la carpeta. Como se muestra a continuación.

Page 10: Manual edgar

9

Page 11: Manual edgar

10

Después antes de guardar seleccionamos la pestaña de servidores.

Page 12: Manual edgar

11

En la pestaña del signo + para agregar un servidor.

Se le da el nombre al servidor se usara Local/red para conectar usuario

La carpeta del servidor será la carpeta que se creó para guarda los archivos.

En el URL Web: después de http//localhost/ y el nombre de la carpeta.

Page 13: Manual edgar

12

Antes de guardar debemos dar clic en la pestaña de avanzados. En la parte de Modelo de

servidor se despliega la pestaña y se selecciona php. Y por presionamos clic en el botón

guardar.

Al seleccionar el botón guardar aparecerá una ventana donde cambiaremos la al otro

recuadro como se muestra en la siguiente imagen.

Después presionamos el boton guardar.

Page 14: Manual edgar

13

Después se creo la carpeta donde se guardaran los archivos que se van a crear.

En esta carpeta se crearan los archivos. Como: Guardar_alumno.php y Lista_alumno.php.

Basta con dar clic derecho en la carpeta y seleccionar Nuevo archivo como se muestra en la

siguiente imagen

Page 15: Manual edgar

14

Después de que tengámonos nuestros archivo creados

presionamos doble clic en Guardar_Alumno.php

Después nos mostrara una pantalla en banco donde comenzaremos a realizar nuestra

conexión.

En la parte superior de la interfaz seleccionamos ventana al seleccionarla se desplegará una

lista de opciones como la siguiente imagen.

Page 16: Manual edgar

15

Después seleccionaremos Bases de datos.

Para que aparezca la pestaña base de datos.

Después presionamos clic en la ella en el signo +para crear una conexión a mysql.

Aparecerá una ventana como la anterior donde se llenaran los campos como se muestra el

nombre de la conexión puede variar.

Ahora presionamos clic en seleccionar y aparecerá otra ventana donde seleccionaremos la

carpeta que se creó en la unidad c: XAMP/htdoct/ y el nombre de la carpeta.

Page 17: Manual edgar

16

En este caso la carpeta se llama prueba4b la que fue seleccionada. Al dar aceptar nos mandara

otra ventana como la siguiente.

Donde la carpeta ya fue seleccionada. Por ultimo damos clic en el botón Aceptar.

Después se creó la conexión como se muestra

Y ahora en la pestaña de inserta que se encuentra en la parte superior derecha seleccionamos

datos.

Page 18: Manual edgar

17

Aquí es donde se muestra la opción datos.

Y buscamos la opción

Y seleccionamos Asistente de formulario de inserción de registro

Page 19: Manual edgar

18

Al seleccionar la opción aparecerá una ventana donde no mostrara los datos que se desearan

registrar.

En esta parte buscaremos en archivo llamado Guardar_alumno.php que se encuentra en la

carpeta creada.

Después damos aceptar.

Y ya tenemos el archivo seleccionado.

Page 20: Manual edgar

19

Seleccionamos la parte:

Y después en el signo – para eliminar.

Después seleccionamos la Grado para mostrar como Grupo de opción

Page 21: Manual edgar

20

Damos clic en:

Para agregar etiquetas basta con dar clic en el símbolo + y se edita la palabra por la que se

desea escribir después damos clic en el botón aceptar. Y llevar un orden de valores.

Page 22: Manual edgar

21

Esta parte es similar a la anterior se distingue solamente porque ahora seleccionamos sexo y lo

mostramos como campo de texto.

Al finalizar clic en Aceptar.

Y ya tenemos la interfaz para Guardar alumno.

Ahora nos posicionamos en el archivo Lista_alumno.php

Page 23: Manual edgar

22

Y hacemos seleccionamos datos en la pestaña de insertar.

Y seleccionamos tabla dinámica después aparecerá una ventana como la siguiente.

Damos clic en juego de registro

Page 24: Manual edgar

23

Si es necesario cambiar nombre se puede hacer.

Después damos aceptar.

Seguimos seleccionando el botón aceptar.

Después aparecerá otra ventana donde seleccionaremos todos los registros y aceptar.

Page 25: Manual edgar

24

Y ya tenemos nuestra Lista_alumno.php

Comprobamos que nuestro sistema funciona en la web.

Damos clic en la opción Guardar_alumno.php

Aquí agregamos algún nombre cualquiera para verificar que este en la Lista_alumno.php

Page 26: Manual edgar

25

En esta ocasión agregue una serie de letras al azar las cuales si se guardaron en la base de

datos.

Page 27: Manual edgar

26

Y ahora agregamos tres campos donde digan Acciones, Actualizar y Eliminar.

Seleccionamos la parte de Sexo después damos clic derecho.

Donde aparecerá una lista y posicionaremos el cursor en tabla donde automáticamente

aparece una lista donde daremos clic en insertar filas o columnas.

Page 28: Manual edgar

27

Después aparecerá una ventana como la anterior donde seleccionaremos columnas donde el

número de columnas será de 2.

Después damos clic en el botón aceptar.

Después aparecerá las dos columnas que insertamos. Ahora realizaremos lo siguiente

Seccionamos las columnas insertadas dar clic derecho y en tabla ahora en combinar celdas.

Page 29: Manual edgar

28

Así es como quedaran las columnas después de combinar celdas.

Ahora escribimos Acciones en la parte de arriba después Eliminar y Actualizar como se muestra

en la imagen anterior.

Ahora creamos un nuevo archivo llamado Actualizar y eliminar clic derecho en Sitio-

UTEZ(C:/XAMP….y nuevo archivo.

Ahora vincularemos Eliminar con el archivo creado.

Seleccionando La palabra Eliminar y dando clic en la carpeta vinculo que aparece en la parte

inferior de la interfaz.

Page 30: Manual edgar

29

Después buscamos el archivo de eliminar y damos clic en el botón aceptar

El mismo procedimiento el que aremos para el archivo de Actualizar.

Ahora seleccionamos Eliminar y damos clic en la pestaña que dice código que se encuentra en

la parte superior izquierda de la pantalla.

Page 31: Manual edgar

30

Aparecerá el siguiente código donde en la línea de eliminar

después de esta parte agregamos un ?id_alumno= después copiamos

el código

Solamente la parte de a continuación

El código anterior después de:

El mismo procedimiento se realiza con Actualizar.

Page 32: Manual edgar

31

Ahora damos doble clic en el archivo Eliminar para abrir.

Después en datos seleccionamos eliminar registro.

Aparecerá una ventana como la anterior donde lo único que aremos será examinar adonde

queremos que nos lleve después de borrar damos clic en el botón Examinar.

Page 33: Manual edgar

32

Y buscamos el archivo Lista después clic en el botón Aceptar

Después mostrara la ventana anterior, damos Aceptar.

Ahora abrimos el archivo de Actualizar.

Page 34: Manual edgar

33

En datos seleccionamos Actualizar registro y seleccionamos la primera opción.

Así mostrara una ventana como la anterior lo único que realizaremos es en la parte de “Tras la

actualización, ir a:” damos clic en el botón Examinar

Page 35: Manual edgar

34

Para después de la acción ir a lista, seleccionamos lista y damos aceptar.

Y automáticamente nos mostrara la interfaz donde la información del alumno serán

Actualizados.

Al finalizar para poder entrar a el sitio creado escribimos en la barra de dirección localhost o

127.0.0.1/y el nombre de la carpeta creada en localhost.

Page 36: Manual edgar

35

En esta parte vinculamos reporte con el reporte_alumno.

En esta parte presionamos la carpeta para vincular.

Después Aparecerá una ventana donde seleccionaremos el reporte que

vincularemos.

Presionamos el botón aceptar

Page 37: Manual edgar

36

Modificamos el código de tal manera que muestre en un archivo de pdf.