Upload
nibla16
View
143
Download
5
Embed Size (px)
Citation preview
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 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
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
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
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
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
Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras
• Hacer un clic en la Ventana CSS
Prof.: Cueva Valverde Diego
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras
<p>Para confirmar el pedido <a href="confirmarpedido.php">haga
clic aquí</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