60
Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras Manual de DreamWeaver CS3 con PHP Proyecto 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 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:\AppServ\www\carritophp. En la opción carpeta predeterminada de imágenes seleccionar la carpeta imágenes que se encuentra dentro de esta ruta C:\AppServ\www\carritophp\imagenes. En la opción Dirección http escribir la siguiente ruta http://localhost/carritophp. Prof.: Cueva Valverde Diego

Manual de Dream Weaver CS3 Con Php

Embed Size (px)

Citation preview

Page 1: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

Manual de DreamWeaver CS3 con PHP

Proyecto 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 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:\AppServ\www\carritophp.

• En la opción carpeta predeterminada de imágenes seleccionar la carpeta

imágenes que se encuentra dentro de esta ruta

C:\AppServ\www\carritophp\imagenes.

• En la opción Dirección http escribir la siguiente ruta

http://localhost/carritophp.

Prof.: Cueva Valverde Diego

Page 2: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

• Active la casilla de opción Activar 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 Servidor de Prueba

• En modelo de Servidor seleccionar PHP MySql.

• Acceso local/Red.

• Carpeta de Servidor Seleccionar la siguiente ruta

C:\AppServ\www\carritophp.

• Prefijo de URL http://localhost/carritophp.

• Finalmente hacer un clic en aceptar.

Prof.: Cueva Valverde Diego

Page 3: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

• Una vez termina la configuración del sitio Web.

• Hacer un clic en el menú archivo > Nuevo.

Prof.: Cueva Valverde Diego

Page 4: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

• 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

Page 5: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

• Aparecerá un cuadro de dialogo donde guardaremos el archivo CSS con el

nombre de estilo.

Prof.: Cueva Valverde Diego

Page 6: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

• El Diseño de Plantilla se vera de la siguiente forma.

Prof.: Cueva Valverde Diego

Page 7: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

• Hacer un clic en la Ventana CSS

Prof.: Cueva Valverde Diego

Page 8: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

• 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

Page 9: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

• En la categoría cuadro en el 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

Page 10: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

• 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

Page 11: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

Seleccionar la regla Sidebar1

• En la categoría tipo seleccionar la fuente verdana, en tamaño seleccionar

tamaño 10 pix, y cualquier color de fondo.

• En la categoría fondo

• Seleccionar un color de fondo y luego aceptar

Prof.: Cueva Valverde Diego

Page 12: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

• 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

Page 13: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

• 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

Page 14: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

Utilización de Plantillas

Creación de la Pagina Lista.php

• Una vez guardada la plantilla hacer un clic en el menú archivo> nuevo.

• En el cuadro de dialogo que aparecerá seleccionar pagina de 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

Page 15: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

• 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

Page 16: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

• Luego aparecerá una cuadro de 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 , aparecerá la opción

Conexión MySql.

Prof.: Cueva Valverde Diego

Page 17: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

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 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

Page 18: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

• 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).

Prof.: Cueva Valverde Diego

Page 19: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

Aparecerá el cuadro de dialogo llamado juego de registros, se le asignara los

siguientes valores.

• Nombre.- Se asigna un nombre que nos sirve como referencia de la

consulta, en este caso es rsCategorias.

• Conexión.- Se asigna la variable de conexión que se creo con el nombre de

cn.

• Tabla.- Seleccionar la tabla que se va a trabajar en este caso es

Categorías.

Prof.: Cueva Valverde Diego

Page 20: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

• 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 IdCategoria, NombreCategoria, 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

Page 21: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

• 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

Page 22: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

• 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

Page 23: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

• Hacer doble clic en la regla ul: MenuBarVertical a.

• En la categoría tipo seleccionar un 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

Page 24: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

• 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

Page 25: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

• 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 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 , y seleccionar la opción Repetir

Región

Prof.: Cueva Valverde Diego

Page 26: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

• 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

Page 27: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

Creación de la lista de productos

• 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).

• En el cuadro de dialogo juego de registros asignarle como nombre

rsproductos, en conexión cn y la tabla productos.

Prof.: Cueva Valverde Diego

Page 28: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

• En columnas seleccionar Idproducto, nombreProducto,

CantidadPorUnidad, PrecioUnidad, 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

Page 29: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

• 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

Page 30: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

• 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

Page 31: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

• 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

Page 32: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

• Ir a la vista código; En la vista código en la línea 83 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

<li><a href="lista.php?codigocategoria=<?php echo $row_rscategoria['IdCategoria']; ?>"><?php echo $row_rscategoria['NombreCategoria']; ?></a> </li>

• Ejecutar la página F12 y seleccionar alguna de las categorías.

Prof.: Cueva Valverde Diego

Page 33: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

• 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

Page 34: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

• 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, 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

Page 35: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

• Ejecutar la pagina y seleccionar una categoría y como usted podrá apreciar

se visualiza una imagen diferente por cada producto.

Prof.: Cueva Valverde Diego

Page 36: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

• 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

Page 37: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

En la línea 157 hay el siguiente código

A

P

<?php } // Show if recordset not empty ?>

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.

rof.: Cueva Valverde Diego

Page 38: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

• 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

Page 39: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

• 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 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

Page 40: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

Modificando 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 de registro pasar a la fila que corresponda.

• En la fila cantidad agregar un Campo de Texto; hacer clic en la ficha

formulario > Campo de Texto

Prof.: Cueva Valverde Diego

Page 41: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

• 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

Page 42: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

• Luego en la fila Pedir Insertar 2 campos ocultos, uno con el nombre de

codigoproducto y 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

Page 43: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

• 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

Page 44: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

• 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

Page 45: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

• En el cuadro de dialogo seleccionar Fuente de Datos.

• Seleccionar el juego de registro llamado rsoferta.

• Seleccionar el campo imagenchica.

Prof.: Cueva Valverde Diego

Page 46: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

• Luego de insertar la imagen borrar las demás columnas que no se están

utilizando.

• En la vista Código a la etiqueta <img agregarle alt,y dentro de esta etiqueta

agregar los siguiente.

alt="<?php echo $row_rsoferta['CantidadPorUnidad']; ?>"

• Guardar los cambios y ejecutar la pagina F12.

Prof.: Cueva Valverde Diego

Page 47: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

• Ir a la vista Código.

• En el campo oculto origenlistaproductos asignarle como valor 1.

• En el Campo oculto codigoproducto en valor <?php echo

$row_rsoferta['IdProducto']; ?>.

• Agregar una nueva pagina en blanco con el nombre de imagen.php.

• Crear un juego de registro con el nombre de rsimagen.

• Utilizar la Tabla productos y solo seleccionar el campo imagengrande.

• En filtro seleccionar IdProducto igual Parámetro codigoproducto.

Prof.: Cueva Valverde Diego

Page 48: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

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

Page 49: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

• 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.

Prof.: Cueva Valverde Diego

Page 50: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

• 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 <img de la imagen que se esta trabando agregarle la

etiqueta:

alt="<?php echo $row_rsoferta['CantidadPorUnidad']; ?>"

Prof.: Cueva Valverde Diego

Page 51: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

• Seleccionar el campo imagen y el panel propiedades en la opción vinculo

asignarle el símbolo # y en borde asignarle 0.

• Estando aun seleccionado ir al panel Etiqueta > Comportamiento y

seleccionar la opción Efectos > Agitar.

Prof.: Cueva Valverde Diego

Page 52: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

• 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 el campo imagen ir al panel Etiqueta

> Comportamiento y seleccionar la opción Efectos >

Aparecer/Desvanecer.

• En Efecto Seleccionar Aparecer.

Prof.: Cueva Valverde Diego

Page 53: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

• 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=<?php echo $row_rsoferta['IdProducto']; ?>

• 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

Page 54: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

• Después de la Etiqueta <table> y antes de la etiqueta <tr>, agregar el

siguiente código.

<?php $contador=0; while ($row_rsoferta = mysql_fetch_assoc($rsoferta)) { if($contador % 4==0){ echo "<tr>"; } ?>

• Después el codigo del contador agregar una etiqueta de formulario y en el

action asignar como pagina agregarproducto.php.

<form method="post" action=" agregarproducto.php">

• Al final de la Etiqueta <table> cerrar la etiqueta de formulario.

• Luego agregar el siguiente codigo del contador.

</form>

<?php $contador++; if($contador % 4==0){ echo "</tr>"; } } ?>

Prof.: Cueva Valverde Diego

Page 55: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

• Guardar los cambios y ejecutar la pagina F12.

• Pasar el Mouse sobre cualquier imagen y veras un efecto.

Prof.: Cueva Valverde Diego

Page 56: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

Haga clic en Cualquiera de las imágenes y vera que aparecerá una imagen mucho

mas grande un con efecto.

Creación de la pagina que contiene la variable de

session_start ()

• Crear una nueva pagina de tipo *php, sin utilizar plantillas.

• Guardar la pagina con el nombre de agregarproducto.php.

• Agregar el Siguiente código.

//Se nombra a la variable de conexión

Prof.: Cueva Valverde Diego

Page 57: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

<? php require_once('Connections/cn.php');

session_start();//ASi se inicia la sesión

extract($_REQUEST);//De esta forma se esta almacenando en variables locales

//os valores de los parámetros URL o variables de formulario recibidos

//las variables locales tendrán el nombre del parámetro URL o de la variable de

//formulario

mysql_select_db($database_cn,$cn);

if(!isset($cantidad)){

$cantidad=1;

//Inicialmente al seleccionar un producto se esta asumiendo

//que se pedirá una unidad

}

$consulta=mysql_query("select NombreProducto,PrecioUnidad from

productos where idproducto=".$codigoproducto);

//$codigoproducto es una variable local que almacena el valor del parametro URL

codigoproducto recibido

$fila=mysql_fetch_array($consulta);

if(isset($_SESSION['carrito'])){

$carrito=$_SESSION['carrito'];

}

//Esto significa que si la variable sesión carrito contiene algo, entonces se

//almacenará en la variable local $carrito

$carrito[$codigoproducto]=array('codigo'=>$codigoproducto,

'cantidad'=>$cantidad,

'producto'=>$fila['NombreProducto'],

'precio'=>$fila['PrecioUnidad']);

//Asi se define un elemento (nuevo) dentro de la varibale local $carrito usandose

como índice

//$codigoproducto este elemento contendrá una matriz asociativa que en este caso

representa

//al producto seleccionado

$_SESSION['carrito']=$carrito;

//Asi se almacena para la sesión en la variable session carrito el valor de la variable

//local $carrito que contiene el elemento recientemente agregado

if ($origenlistaproductos==1){

header("Location:lista.php");

}

else{

Prof.: Cueva Valverde Diego

Page 58: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

header("Location:carritodecompras.php");

}

//Asi se direcciona terminado el proceso al página carritodecompras.php, la cual

mostrará los productos agregados...

?>

Creación de la Pagina CarritoCompras.php

• Crear una nueva pagina con el nombre de CarritoCompras.php en la parte

superior de esta pagina agregar el siguiente codigo.

<?php

session_start();

if(isset($_SESSION['carrito'])){

$carrito=$_SESSION['carrito'];

}

?>

• Crear una tabla de 8 columnas y 2 filas.

• En la vista codigo en la parte superior agregar el siguiente codigo.

<?php

if($carrito){

//Asi se pregunta si la variable $carrito contiene

//algún elemento

?>

<table border="1" cellspacing="0" cellpadding="4">

<tr bgcolor="#333333">

<td width="30"><span class="style1"></span></td>

<td width="40"><span class="style1">Cod</span></td>

<td width="300"><span class="style1">Producto</span></td>

<td width="50"><span class="style1">Precio</span></td>

<td width="28"><span class="style1">Cant</span></td>

<td><img src="imagenes/actualizar.gif" width="20" height="20"

/></td>

<td width="60"><span class="style1">Subtotal</span></td>

<td><img src="imagenes/trash.gif" alt="Eliminar" width="12"

height="14" /></td>

</tr>

<?php

Prof.: Cueva Valverde Diego

Page 59: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

$item=0;//Asi se declara una variable para tener el recuento

de

//los items pedidos

$total=0;//Asi se declara una variable que acumulará el total

de la

//compra

foreach($carrito as $k => $v){

$item++;

//$v representa a cada elemento (fila) del carrito

$subtotal=$v['precio']*$v['cantidad'];

$total+=$subtotal;//Asi se acumula el subtotal en la variable

total

?>

<form method="post" action="agregarproducto.php">

<tr>

<td><?php echo $item; ?></td>

<td><?php echo $v['codigo']; ?></td>

<td><?php echo $v['producto']; ?></td>

<td><?php echo number_format($v['precio'],2); ?></td>

<td><input name="cantidad" type="text" id="cantidad" size="6"

value="<?php echo $v['cantidad']; ?>" /> </td>

<td><input name="" type="image" src="imagenes/actualizar.gif"

alt="Actualizar" />

<input name="codigoproducto" type="hidden" value="<?php

echo $v['codigo']; ?>" /> </td>

<td width="60"><?php echo number_format($subtotal,2);

?></td>

<td><a href="borrarproductocarrito.php?codigoproducto=<?php

echo $v['codigo']; ?>"><img src="imagenes/trash.gif" alt="Eliminar"

width="12" height="14" border="0" /></a></td>

</tr>

</form>

<?php

}//cierra el foreach

?>

</table>

<p>El total de la venta es: <?php echo number_format($total,2); ?>

nuevos soles.</p>

Prof.: Cueva Valverde Diego

Page 60: Manual de Dream Weaver CS3 Con Php

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

<p>Para confirmar el pedido <a href="confirmarpedido.php">haga

clic aqu&iacute;</a> </p>

<?php

}//Asi se cierra el if que verifica si el carrito tiene elementos

else{

?>

<p align="center">Usted no ha seleccionado algún producto</p>

<p align="center"><img

src="imagenes/table_mensaje_carrito_2.jpg" width="143"

height="122" /></p>

<p align="center"><a href="listaproductos.php"><img

src="imagenes/button_back_over.jpg" width="112" height="35"

border="0" /></a></p>

<?php

}//cierra else

?>

Crear la Pagina borrarproductocarrito.php

<?php

session_start();

extract($_GET);

//Esto vuelca en variables locales los par{ametros URL recibidos

$carrito=$_SESSION['carrito'];

unset($carrito[$codigoproducto]);//Así se elimina el elemnto de indice

$codigoproducto

//de la variable $carrito (se elimina una fila)

$_SESSION['carrito']=$carrito;

header("Location:carritocompras.php");

?>

Prof.: Cueva Valverde Diego