Notas de la Asignatura Desarrollo de Aplicaciones Web

Documento creado por: Ing. Julia Gabriela Nieva Paredes PTC TI UTT

Free Powerpoint Templates

Page 1

En Dreamweaver, crear una nueva pgina PHP en su sitio y guardarla como index.php Escriba connTest como el nombre de la conexin. (Fig 2) Escriba la contrasea correspondiente al usuario (fig 2)

En el panel Databases (dentro de Windows-> Databases), haga click en el botn + y seleccione Conexin MySQL. (Fig. 1)

En el campo MySQL Server, escriba localhost (Fig 2)

En el campo User Name escriba phpUser (el nombre de usuario creado en MySQL) (fig 2)

En el campo DataBase, escriba el nombre de la bd creada para phpUser (fig 2) Si la conexin fue exitosa, presione OK. Esto mostrar la nueva conexin en el panel Databases. (fig 4)

Presione Test, en este momento, Dreamweaver tratar de conectar con la base de datos. (fig 3) Expanda la conexin connTest, y luego expanda la rama Tables. (fig 4)

Free Powerpoint Templates

De esta forma queda establecida la conexin MySQLDreamweaver

Page 2

Fig. 1

Fig. 2

Fig. 4
Fig. 3 Free Powerpoint Templates Page 3

En Dreamweaver, crear una nueva pgina PHP en su sitio y guardarla como ver.php Abrir el panel Server Behaviors (Figura 1), presiona sobre el botn + y selecciona Recordset.

Crea una tabla con dos renglones, en donde el primer rengln contenga los ttulos de los campos de la tabla Esto abre la caja de dilogo RecordSet (Fig. 2)

En el campo Name escriba el nombre del RecordSet (es una variable), y verifique que la conexin y la tabla sean las adecuadas.
Presione OK para cerrar esta ventana y OK para cerrar el cuadro de dilogo Recordset. Abre el panel Bindings para aadir objetos de datos de datos dinmicos a una pgina HTML.

Presione el botn Test, lo que genera que se muestren los resultados de la consulta de la base de datos (Fig 3).

El Recordset debe estar listado en el panel Server Behaviors. Guarda el archivo. Ah est listado el Recordset creado (getData). Expandelo al hacer click en el +.(Fig.4) Guarda el archivo y prubalo con F12

Arrastra cada uno de los elementos del Recordset a la pgina HTML, en el lugar donde quieres que sea mostrado el contenido del campo.

Free Powerpoint Templates

Page 4

Fig. 1

Fig. 3

Fig. 2

Free Powerpoint Templates

Fig. 4
Page 5

Selecciona la etiqueta <tr> de la tabla en donde se muestran los datos de la tabla. (Fig. 1) Abre el panel Server Behaviors y haz click en el botn +

Selecciona Repeat Region

Esto abre la caja de dilogo RepeatRegion (Fig. 2)

En el nombre del RecordSet ya se encuentra seleccionado el RecordSet creado anteriormente.

En la opcin Show, selecciona el nmero de registros que se quieren mostrar.

Presione OK para cerrar esta ventana y OK para cerrar el cuadro de dilogo Recordset.

Guarda el archivo y prubalo con F12.

El resultado se muestra en la Fig. 3.

Free Powerpoint Templates

Page 6

Fig. 1 Fig. 2

Fig. 3

Free Powerpoint Templates

Page 7


Selecciona Insert -> Data Objects -> Recordset Paging -> Recordset Navigation Bar (Fig 1)

Esto abre la caja de dilogo Recordset Navigation Bar (Fig. 2)

En el nombre del RecordSet ya se encuentra seleccionado el RecordSet creado anteriormente.

Selecciona el tipo de despliegue de los botones de la barra, ya sea en imgenes o en texto.

Presione OK para cerrar esta ventana. La barra de navegacin se muestra en la fig. 3.

Guarda el archivo y prubalo con F12. Free Powerpoint

Templates

Page 8


Fig. 1

Fig. 2

Fig. 3 Free Powerpoint Templates

Page 9

En Dreamweaver, crea una pgina nueva de tipo php.

Crea un formulario con los objetos necesarios para capturar los datos en la tabla alumnos (Fig. 1)

Abre el panel Server Behaviors, click en el botn + y selecciona Insert Record

La caja de dilogo Insert Record automticamente despliega los valores correctos.

En la opcin columna, se indican el tipo de datos para cada campo. Si dice que no hay valor, hay que revisar que los nombres de los objetos del formulario sean los mismos que los campos de la tabla

Presiona OK, guarda el archivo y prubalo con F12.

Free Powerpoint Templates

Page 10

Fig. 1

Fig. 2

Fig. 3 Free Powerpoint Templates

Page 11


En Dreamweaver, crea una pgina nueva de tipo php. (actualizar.php) Selecciona el texto Editar y haz click en el icono de carpeta de la seccin Link de la ventana de Propiedades (fig.2) Se abre la caja de dilogo Parameters. Escribe el nombre del campo llave de la tabla, en este caso, matricula, en la caja Name(fig.4) Abrir la pgina ver.php, en la que se despleg el contenido de la tabla alumnos. Agregar dos columnas al final de la tabla (ver fig.1)

En la caja de dilogo, selecciona el archivo actualizar.php y haz click en el botn Parmetros (Parameters) (Ver fig. 3) Esto abre la caja Dynamic Data, con el RecordSet creado (getData). Expndelo y selecciona el campo matricula (fig.5)

En la caja Value, haz click en el rayo que est a la derecha (fig.4)

Presiona Presiona OK, la caja OK 2 veces Parameters ms para se muestra cerrar los ahora como dilogos en la fig. 6 Free Powerpoint abiertos

El texto Editar debe observarse como en la fig.7. El azul de la fuente es por que el texto es un hipervnculo, y el azul claro de fondo de la celda indica que contiene cdigo Templates PHP.

Guarda el archivo ver.php

Page 12

Fig. 1

Fig. 2

Free Powerpoint Templates

Page 13

Fig. 4

Fig. 3

Fig. 6 Fig. 7

Free Powerpoint Templates Fig. 5

Page 14


En Dreamweaver, abre la pgina actualizar.php Crea un formulario con los objetos necesarios para capturar los datos en la tabla alumnos (Fig. 1)

Asegrate que los nombres de las cajas de texto sean iguales que los campos de la tabla a leer. (Fig. 2)

Abre el panel Server Behaviors, click en el botn + y selecciona Recordset

La caja de dilogo RecordSet automticamente despliega los valores correctos. (Fig. 3)

En la opcin Filter, selecciona matricula de la lista desplegable. (Fig. 3)

En el panel Bindings se muestra el Recordset. Expndelo, y arrastra cada uno de los componentes del RecordSet hasta su correspondiente caja de texto del formulario. (Fig.4)

Presiona OK, guarda el archivo. Para probar, previsualiza el archivo ver.php.

Free Powerpoint Templates

Page 15

Fig. 2

Fig. 1

Fig. 3 Free Powerpoint Templates

Fig. 4 Page 16


En Dreamweaver, abre la pgina actualizar.php
A la derecha del botn Guardar, inserta un campo oculto: Insert -> Form -> Hidden Field

Con el campo oculto seleccionado, cambia su nombre en el panel de Propiedades a matricula, y haz click sobre el rayo a la derecha de la caja Value. (Fig.1)

En el cuadro de dilogo Dynamic Data (fig 1) selecciona matricula del Recordset mostrado, y presiona Ok.

Este valor ser pasado al comportamiento Update Record.

Abre el panel Server Behaviors y selecciona Update Record (fig. 2)

Dreamweaver debe haber seleccionado los valores adecuadamente, por lo que presiona click. (Fig. 3)

Guarda el archivo. Para probar, previsualiza el archivo ver.php, selecciona Editar del registro que desees modificar.

Free Powerpoint Templates

Page 17

Fig. 1

Fig. 2

Free Powerpoint Templates Fig. 3

Page 18

Para borrar un registro, crea la pgina borrar.php

En la pgina ver.php, edita el hipervnculo Borrar tal y como se hizo para Editar

En la pgina borrar.php, en el panel Server Behaviors, haz click en el botn + y aade un Delete Record (fig.1)

El cuadro de dilogo Delete Record (fig 2) ya est configurado, revisa que los datos sean correctos y presiona Ok.

Guarda el archivo. Para probar, previsualiza el archivo ver.php, selecciona Borrar del registro que desees borrar.

Free Powerpoint Templates

Page 19

Fig. 1

Fig. 2

Free Powerpoint Templates

Page 20


Crea una nueva pgina PHP y gurdala como login.php
En la pgina login.php, crea el formulario mostrado en la fig.1

En la base de datos ya debe existir una tabla llamada usuarios

Selecciona el campo password y en el panel de Propiedades selecciona la opcin Password para que Dw oculte lo que el usuario escriba en esa caja.

En el panel Server Behaviors, selecciona User Authentication > LogIn User

Configura este cuadro tal y como se muestra en la fig. 2., y presiona OK

Guarda la pgina y prueba con F12.

Free Powerpoint Templates

Page 21


Fig. 1

Fig. 2

Free Powerpoint Templates

Page 22

Antes de crear una pgina Web con PHP, deber estar corriendo el panel de control de XAMPP, con los servidores Apache y MySQL ejecutndose.

El sitio se debe crear dentro de la carpeta c:\xampp\htdocs\

Se debe configurar el servidor de prueba en Dreamweaver.

Para conectar con una base de datos, se debe crear una conexin y probarla.
Para trabajar con los datos de las tablas, el panel Server Behaviors tiene un tipo especifico de objeto dinmico, que depender de la accin requerida. (RecordSet, InsertRecord, UpdateRecord, etc)

Free Powerpoint Templates

Page 23