Manual de DreamW eaver CS3 CS3 con PHP P royecto carrito de compras •
Primero tiene que tener instalado el appserver en su computadora.
•
Luego crear un directorio virtual en la carpeta WWW que se encuentra en la carpeta de instalación del appserver.
•
Para este ejemplo se ha creado la carpeta llamada carritophp en la siguiente ruta.
•
Luego de haber creado la carpeta en la ruta mencionada mencionada se procederá a crear el sitio en dreamweaver Cs3.
•
Una vez ejecutado el programa hacer un clic en el menú sitio> Nuevo sitio.
•
Luego aparecerá un cuadro de dialogo de configuración del sitio Web.
•
Hacer un clic en la ficha avanzada.
•
Nombre del sitio asignarle carritophp
•
En la opción de carpeta de raíz local seleccionar la carpeta creada anteriormente en la ruta C:\ C:\ AppServ\w AppServ\w ww \ carrit carritophp. ophp.
•
En la opción carpeta predeterminada de imágenes seleccionar la carpeta imágenes que se encuentra dentro de esta ruta C:\ C:\ AppServ AppServ\\ ww w\ carrit carritophp\ ophp\ imagenes imagenes..
•
En la opción Dirección http escribir la siguiente ruta http:/ http:/ / localhost/ localhost/ carritophp. carritophp.
Prof.: Cueva Valverde Diego
•
Active la casilla de opción Activar caché, caché , para crear un caché local para mejorar la velocidad de las tareas de administración de vínculos y sitios.
En la opción categoría seleccionar la opción Serv Servidor idor de P rueba
•
En modelo de Servidor seleccionar PHP M yS ySql. ql.
•
Acceso local/ local/ Red.
•
Carpeta de Servidor Seleccionar la siguiente ruta C:\ C:\ AppServ AppServ\\ ww w\ carrit carritophp ophp..
•
Prefijo de URL http: http:// / local localhost/ host/ carrit carritophp ophp .
•
Finalmente hacer un clic en aceptar.
Prof.: Cueva Valverde Diego
•
Una vez termina la configuración del sitio Web.
•
Hacer un clic en el menú archivo > Nuevo.
Prof.: Cueva Valverde Diego
•
Aparecerá un cuadro de dialogo llamado Nuevo Documento
•
Seleccionar la ficha Plantilla en blanco.
•
Dentro de esta opción seleccionar en tipo de Plantilla, la opción Plantilla PHP.
•
En el Modelo de plantilla seleccionar la opción 2 columnas flotantes, barra lateral izquierda.
•
En la opción diseño CSS en seleccionar crear nuevo archivo.
Prof.: Cueva Valverde Diego
•
Aparecerá un cuadro de dialogo donde guardaremos el archivo CSS con el nombre de estilo.
Prof.: Cueva Valverde Diego
•
El Diseño de Plantilla se vera de la siguiente forma.
Prof.: Cueva Valverde Diego
•
Hacer un clic en la Ventana CSS
Prof.: Cueva Valverde Diego
•
Como usted podrá apreciar se pueden visualizar todos los estilos establecidos para esta plantilla.
•
Hacer doble clic en la regla con el nombre de container.
•
Aparecerá una cuadro de dialogo donde uno podrá configurar.
•
Seleccionamos la categoría fondo y en el color de fondo seleccionamos cualquier color que uno desee.
Prof.: Cueva Valverde Diego
•
En la categoría categoría cuadro en el ancho ancho asignarle 900 pix, luego hacer un clic en aceptar.
•
Hacer doble clic en la regla body.
•
En la categoría fondo seleccionar un color de fondo de color rojo o puede ser cualquiera.
Prof.: Cueva Valverde Diego
•
Seleccionar la regla Header en la categoría tipo seleccionar la Fuente Verdana y el color cualquiera.
•
En la categoría fondo en la opción color de fondo seleccionar cualquier color.
Prof.: Cueva Valverde Diego
Seleccionar la regla Sidebar1 •
En la categoría tipo seleccionar la fuente verdana, en tamaño seleccionar tamaño 10 p ix , y cualquier color de fondo.
•
En la categoría fondo
•
Seleccionar un color de fondo y luego aceptar
Prof.: Cueva Valverde Diego
•
Seleccionar el texto que se encuentra en el titulo de la pagina luego hacer un clic en Insertar > Objetos de planilla > Región editable
Prof.: Cueva Valverde Diego
•
Se asigna el nombre de Superior a la región editable insertada.
•
Lo mismo realizar con el lado izquierdo y el centro de la pagina.
•
Para la región editable izquierdo el nombre es izquierdo.
•
Para la región editable Centro el nombre es Centro.
•
Luego hacer un clic en archivo guardar como Plantilla
•
En el cuadro de diálogo que aparece asignar el nombre de la plantilla
Prof.: Cueva Valverde Diego
Utilización de Plantillas Creación de la Pag ina Lista.php •
Una vez guardada la plantilla hacer un clic en el menú archivo> nuevo.
•
En el cuadro de dialogo dialogo que aparecerá seleccionar seleccionar pagina de plantilla plantilla y el sitio seleccionar el nombre del sitio Web que para este ejemplo se a utilizado carritophp y al lado derecho seleccionar el nombre de principal y finalmente hacer un clic en Crear.
Prof.: Cueva Valverde Diego
•
Luego hacer un clic en archivo guardar y guardar la nueva pagina Web con el nombre de lista.
•
Hacer un clic en la región editable izquierdo, seleccionar la ficha Spry, dentro de la ficha Spry y luego hacer un clic en el botón Barra de menús de Spry.
Prof.: Cueva Valverde Diego
•
Luego aparecerá una cuadro de dialogo dialogo barra de menús de spry en ese cuadro de dialogo seleccionar la opción vertical y luego hacer un clic en aceptar.
•
Seleccionar el panel Aplicación dentro del panel aplicación se encuentra la pestaña Base de Datos, hacer un clic en el símbolo Conexión MySql.
Prof.: Cueva Valverde Diego
, aparecerá la opción
En el cuadro de dialogo que aparecerá: •
Nombre de Conexión.- Asignar un nombre puede ser cualquiera, este nombre se toma como una variable.
•
Servidor Mysql.- en nombre de servidor se asigna el nombre del servidor en este caso como se trabaja a nivel local es localhost.
•
Nombre de Usuario.- el nombre de usuario se asigna tal como se nombre al momento de instalar MySql.
•
Contraseña.- Se asigna la contraseña que se asigno cuando cuando se instalo MySql.
•
Base de Datos.- Se asigna el nombre de la base de datos que se va a trabajar.
•
Luego hacer un clic en el botón prueba y tiene que aparecer un mensaje indicando si esta correcto o no la conexión.
Prof.: Cueva Valverde Diego
•
Verificar en el panel Aplicación que las tablas de la base de datos aparezcan correctamente.
•
Como usted podrá observar se pueden visualizar todas las tablas de la base de datos.
•
Seleccionar el panel Aplicación dentro del panel aplicación se encuentra la pestaña Vinculaciones, dentro de esta pestaña seleccionar el símbolo ,Aparecerá la opción Juego de registros(consulta registros(consulta). ).
Prof.: Cueva Valverde Diego
Aparecerá el cuadro de dialogo llamado juego de registros, se le asignara los siguientes valores. •
Nombre.Nombre .- Se asigna un nombre que nos sirve como referencia de la consulta , en este caso es rsCategorias. rsCategorias .
•
Conexión .- Se asigna la variable de conexión que se creo con el nombre de cn .
•
Tabla.Tabla .- Seleccionar la tabla que se va a trabajar en este caso es Categorías.
Prof.: Cueva Valverde Diego
•
Luego hacer un clic en el botón prueba y aparecerá el siguiente cuadro de dialogo con el contenido de la tabla seleccionada.
•
En la Ficha Vinculaciones aparecerá un juego de registros llamado rsCategoria, dentro de esa consulta aparecerá los campos de la tabla que en este caso es Id Categoria, Nombre Categoria, descripción.
•
Utilizar la vista Código y dentro de esa vista posicionarse en la fila numero 68, es decir en la lista con el nombre de elemento 1.
Prof.: Cueva Valverde Diego
•
Seleccionar el texto elemento 1 y arrastrar del panel Aplicación de la ficha Vinculaciones del juego de registros rsCategoria el campo NombreCategoria.
•
Seleccionar el panel CSS y la ficha CSS
Prof.: Cueva Valverde Diego
•
Hacer doble clic en la regla ul: MenuBarVertical.
•
En la categoría tipo seleccionar el tipo de fuente que usted desee en tamaño 10 y color el que a usted mas le guste, luego hacer clic en aceptar.
•
En la Categoría Fondo Seleccionar el coro de fondo que usted desee.
•
En la Categoría Cuadro Seleccionar el ancho 215 pix y finalmente hacer un clic en aceptar.
Prof.: Cueva Valverde Diego
•
Hacer doble clic en la regla ul: MenuBarVertical a.
•
En la categoría tipo seleccionar un tipo tipo de fuente y color Diferente a lo que estaba.
•
En la Categoría Fondo seleccionar un color de fondo diferente al otro Color.
Prof.: Cueva Valverde Diego
•
En la Categoría Cuadro asignar en ancho 215pix y finalmente aceptar.
•
Hacer doble clic en la regla ul: MenuBarVertical a:hover.
•
En la Categoría tipo en fuente seleccionar Verdana y en color de letra Negro.
Prof.: Cueva Valverde Diego
•
En la categoría fondo seleccionar un color de fondo diferente a lo que estaba anteriormente.
•
En la vista diseño seleccionar el conjunto de registro y luego luego ir al panel aplicación y dentro del panel aplicación ir a la ficha Comportamientos del Servidor hacer un clic en el botón Región
Prof.: Cueva Valverde Diego
, y seleccionar la opción Repetir
•
Luego aparecerá un cuadro de dialogo llamado Repetir Región, y dentro de la opción juego de registros seleccionar el conjunto de registro llamado rscategoria (creado anteriormente), y en mostrar seleccionar la opción Todos los registros y luego aceptar.
•
Luego guardar la pagina y ejecutar presionando la tecla F12.
•
En la lista que se muestra al lado izquierdo de la página usted puede observar que cuanto uno pasa el puntero del Mouse la lista cambia de color.
Prof.: Cueva Valverde Diego
Creación de la lista de producto s •
Seleccionar el panel Aplicación dentro del panel aplicación se encuentra la pestaña Vinculaciones, dentro de esta pestaña seleccionar el símbolo ,Aparecerá la opción Juego de registros(consulta registros(consulta). ).
•
En el cuadro de dialogo juego de registros asignarle como nombre rsproductos, en conexión cn y la tabla productos.
Prof.: Cueva Valverde Diego
•
En columnas seleccionar Idproducto, nombreProducto, CantidadPorUn idad, Pr ecioUnidad, UnidadesEnExistencia.
•
En filtro Seleccionar IdCategoria y al Lado Derecho =, debajo de IdCategoria seleccionar Parámetro URL y asignar como variable codigocategoria y luego hacer un clic en el botón Prueba.
•
Aparecerá un cuadro de dialogo donde podemos el numero de la Categoría y luego presionamos aceptar.
•
Como usted podrá apreciar se muestra todos los registros de la categoría 02.
Prof.: Cueva Valverde Diego
•
Una vez creado el nuevo juego de registros hacer un clic en el menú Insertar > Objetos de Datos > Datos Dinámicos > Tabla Dinámica.
Prof.: Cueva Valverde Diego
•
Aparecerá un cuadro de dialogo donde se tiene que seleccionar el juego de registros en esta caso es rsproductos, en mostrar todos los productos y luego hacer un clic en aceptar.
•
Aparecerá una tabla en la página donde se muestra la información de la tabla.
•
En la parte superior de la tabla se muestra el nombre que por defecto tiene que la base de datos que hace referencia al nombre del campo.
Prof.: Cueva Valverde Diego
•
En la Fila numero 1 Cambiar el Nombre a los campos que se muestra, para un mejor diseño.
•
Ejecutar la pagina F12.
•
Como usted podrá apreciar no se muestra nada todavía, ya que falta agregarle un parámetro a la tabla producto.
•
Seleccionar el juego de registro rscategoria y luego en el panel propiedades seleccionar la opción vinculo y agregarle la pagina lista.php.
Prof.: Cueva Valverde Diego
•
Ir a la vista código; En la vista código en la línea 8 3 con de se encuentra el vinculo del juego de registro agregarle el siguiente parámetro al vinculo seguido de la pagina a vincular ?codigocategoria=.
•
El código Completo es de la siguiente forma
">
•
Ejecutar la página F12 y seleccionar alguna de las categorías.
Prof.: Cueva Valverde Diego
•
Seleccionar el panel Aplicación dentro del panel aplicación se encuentra la pestaña Vinculaciones.
•
Seleccionar el juego de registro rsproductos y hacerle doble clic.
•
En el cuadro de dialogo que aparecerá, en la opción columnas adicionar la columna imagenchica y luego hacer un clic en aceptar.
•
Entre la columna Descripción y precio insertar una nueva columna, a la nueva columna asignarle el nombre de imagen.
Prof.: Cueva Valverde Diego
•
En la segunda fila de la Columna imagen hacer un clic y luego ir al menú Insertar > Imagen.
•
En el cuadro de dialogo que aparece seleccionar en la parte superior Fuente de Datos.
•
Seleccionar el conjunto de datos llamado rsproductos, rsproductos, desplegar las opciones que hay dentro de ese conjunto de datos y seleccionar el campo imagenchica.
•
Finalmente hacer un clic en aceptar
Prof.: Cueva Valverde Diego
•
Ejecutar la pagina y seleccionar una categoría categoría y como usted podrá apreciar se visualiza una imagen diferente por cada producto.
Prof.: Cueva Valverde Diego
•
Seleccionar todo el contenido de la región Editable Centro y luego hacer un clic en el menú Insertar >Objetos de datos > Mostrar Región > Mostrar si el juego de registros no esta vació.
Aparecerá un cuadro de dialogo donde se selecciona el juego de registro que en este caso rsproductos y luego hacer un clic en aceptar.
Ejecutar la pagina
Prof.: Cueva Valverde Diego
En la línea 157 hay el siguiente código ?> A ese código php agregarle un else.
•
Dentro de ese Else Agregar un Nuevo conjunto de Registros.
•
Para ello Creamos un nuevo juego de registros.
•
En nombre le asignamos reoferta.
•
En conexión cn.
•
Tabla Productos.
•
En las Columnas seleccionar los siguientes campos Idproducto, nombreProducto, CantidadPorUnidad, PrecioUnidad, UnidadesEnExistencia.
•
Filtro PrecioUnidad <= , Valor Introducido es 15 y aceptar.
Prof.: Cueva Valverde Diego
•
Hacer un clic en medio de las 2 etiquetas php que aparecen y hacer que el puntero del Mouse se posicione en el centro de esas 2 etiquetas.
•
Estando el puntero posicionado en el medio de las 2 etiquetas hacer un clic en la ficha datos la opción tabla Dinámica
Prof.: Cueva Valverde Diego
•
Aparecerá un cuadro de dialogo donde tiene que seleccionar el conjunto de registros que en este caso es rsOferta.
•
Ejecutar la pagina y como usted podrá observar solo se visualiza visualiza la tabla que contiene el conjunto de registros rsOferta y luego seleccione una Categoría vera usted que cambia la tabla.
Prof.: Cueva Valverde Diego
Modifican do la Tabla Insertada •
En la Fila 2 Columna 1, Insertar una tabla de Fila 6 Columna 1.
•
Dentro de la Nueva tabla creado Asignarle el nombre a cada fila y cada campo del conjunto conjunto de registro pasar a la fila que corresponda. corresponda.
•
En la fila cantidad agregar un Campo de Texto; hacer clic en la ficha formulario > Campo de Texto
Prof.: Cueva Valverde Diego
•
En el ID asignarle Cantidad y aceptar.
•
Aparecerá un cuadro de dialogo indicando si desea añadir etiqueta de formulario, en este caso hacemos clic en no.
Prof.: Cueva Valverde Diego
•
Luego en la fila Pedir Insertar 2 campos ocultos, uno con el nombre de codigoproducto y origenlistaproductos; origenlistaproductos; Hacer un clic en Formularios > Campo de Imagen.
•
Estando en la fila Pedir insertar un imageField y seleccionar cualquier imagen esta imagen se utilizara como botón para enviar los pedidos realizados.
Prof.: Cueva Valverde Diego
•
En el ID asignarle el nombre de imageField.
•
En el mensaje de añadir etiqueta de formulario hacer un clic en no.
Prof.: Cueva Valverde Diego
•
Modificar el juego de registro rsoferta y agregarle el campo imagenchica.
•
Hacer un clic en la fila numero 3.
•
Hacer un clic en el menú Insertar > Imagen.
Prof.: Cueva Valverde Diego
•
En el cuadro de dialogo seleccionar Fuente de Datos.
•
Seleccionar el juego de registro llamado rsoferta.
•
Seleccionar el campo imagenchica.
Prof.: Cueva Valverde Diego
•
Luego de insertar la imagen borrar las demás columnas que no se están utilizando.
•
En la vista Código a la etiqueta
![<?php echo $row_rsoferta['CantidadPorUnidad']; ?>]()
•
Guardar los cambios y ejecutar la pagina F12.
Prof.: Cueva Valverde Diego
•
Ir a la vista Código. Código .
•
En el campo oculto origenlistaproductos asignarle como valor 1.
•
En el Campo oculto codigoproducto en valor .
•
Agregar una nueva pagina en blanco con el nombre de imagen.php. imagen .php.
•
Crear un juego de registro con el nombre de rsimagen .
•
Utilizar la Tabla productos y solo seleccionar el campo imagengrande. imagengrande.
•
En filtro seleccionar IdProducto igual Parámetro codigoproducto. codigoproducto.
Prof.: Cueva Valverde Diego
En la pagina imagen hacer un clic en el menú archivo >imagen
•
Seleccionar fuente de Datos.
•
Seleccionar el juego de Registro llamado rsimagen el campo imagengrande
Prof.: Cueva Valverde Diego
•
Guardar los cambios de la Página.
•
Ir a la pagina Lista.php
•
En la página lista seleccionar el campo imagen.
•
Hacer un clic en el panel Etiqueta > Comportamiento y seleccionar la opción Abrir ventana del navegador. navegador .
Prof.: Cueva Valverde Diego
•
En el cuadro de Dialogo que aparecerá en Mostrar URL asignarle imagen.php, en ancho 170 y alto 170.
•
En el evento seleccionar Clic.
•
En la etiqueta
![<?php echo $row_rsoferta['CantidadPorUnidad']; ?>]()
Prof.: Cueva Valverde Diego
•
Seleccionar el campo imagen y el panel propiedades en la opción vinculo asignarle el símbolo # y en borde asignarle 0 .
•
Estando aun aun seleccionado seleccionado ir al panel Etiqueta > Comportam Comportam iento y seleccionar la opción Efectos > Agitar .
Prof.: Cueva Valverde Diego
•
En el cuadro de dialogo que aparecerá seleccionar la opción selección actual.
•
En el evento seleccionar onMouserOver
•
Guardar la Página.
•
Al momento de guardar aparecerá una mensaje indicando que tiene que copiar el archivo SpryEffects.js, hacer un clic en aceptar.
•
En la Pagina imagen.php seleccionar seleccionar el campo imagen imagen ir al panel Etiqueta > Comportam Comportam iento y seleccionar la opción Efectos > Aparecer/ Desvanecer Desvanecer..
•
En Efecto Seleccionar Aparecer.
Prof.: Cueva Valverde Diego
•
En el Evento seleccionar onLoad.
•
Guardar los Cambios.
•
Ir ala pagina lista y dentro de la Pagina lista hacer doble clic en el comportamiento Abrir ventana del navegador agregarle la siguiente parámetro.
imagen.php?codigoproducto=
•
Como ustedes se darán cuenta solo se muestra los productos en una sola columna, se procederá a cambiar el código php para que genere 4 columnas al momento de ejecutar la pagina.
Prof.: Cueva Valverde Diego
•
Después de la Etiqueta
y antes de la etiqueta , agregar el siguiente código. "; } ?>
•
Después el codigo del contador agregar una etiqueta de formulario formulario y en el action asignar como pagina agregarproducto.php.
