Tutorial Carrito de Compra Con Php

7/16/2019 Tutorial Carrito de Compra Con Php

1/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 lacarpeta de instalacin del appserver.

Para este ejemplo se ha creado la carpeta llamada carritophp en la siguienteruta.

Luego de haber creado la carpeta en la ruta mencionada se proceder acrear 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 configuracin del sitio Web. Hacer un clic en la ficha avanzada. Nombre del sitio asignarle carritophp En la opcin de carpeta de raz local seleccionar la carpeta creada

anteriormente en la ruta C:\AppServ\www\carritophp.

En la opcin carpeta predeterminada de imgenes seleccionar la carpetaimgenes que se encuentra dentro de esta ruta

C:\AppServ\www\carritophp\imagenes.

En la opcin Direccin http escribir la siguiente rutahttp://localhost/carritophp.

Prof.: Cueva Valverde Diego


2/60

Manual de DreamWeaver CS3 con PHP Proyecto Carrito de Compras Active la casilla de opcin Activar cach, para crear un cach local para

mejorar la velocidad de las tareas de administracin de vnculos y sitios.

En la opcin categora seleccionar la opcin 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 URLhttp://localhost/carritophp. Finalmente hacer un clic en aceptar.

http://localhost/carritophphttp://localhost/carritophp


3/60


Una vez termina la configuracin del sitio Web. Hacer un clic en el men archivo > Nuevo.



4/60


Aparecer un cuadro de dialogo llamado Nuevo Documento Seleccionar la ficha Plantilla en blanco. Dentro de esta opcin seleccionar en tipo de Plantilla, la opcin Plantilla PHP. En el Modelo de plantilla seleccionar la opcin 2 columnas flotantes, barra

lateral izquierda.

En la opcin diseo CSS en seleccionar crear nuevo archivo.



5/60


Aparecer un cuadro de dialogo donde guardaremos el archivo CSS con elnombre de estilo.



6/60


El Diseo de Plantilla se vera de la siguiente forma.



7/60


Hacer un clic en la Ventana CSS



8/60


Como usted podr apreciar se pueden visualizar todos los estilosestablecidos 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 categora fondo y en el color de fondo seleccionamos

cualquier color que uno desee.



9/60


En la categora cuadro en el ancho asignarle 900 pix, luego hacer un clic enaceptar.

Hacer doble clic en la regla body. En la categora fondo seleccionar un color de fondo de color rojo o puede ser

cualquiera.



10/60


Seleccionar la regla Header en la categora tipo seleccionar la FuenteVerdana y el color cualquiera.

En la categora fondo en la opcin color de fondo seleccionar cualquier color.



11/60


Seleccionar la regla Sidebar1

En la categora tipo seleccionar la fuente verdana, en tamao seleccionartamao 10 pix, y cualquier color de fondo.

En la categora fondo Seleccionar un color de fondo y luego aceptar



12/60


Seleccionar el texto que se encuentra en el titulo de la pagina luego hacerun clic en Insertar > Objetos de planilla > Regin editable



13/60


Se asigna el nombre de Superior a la regin editable insertada. Lo mismo realizar con el lado izquierdo y el centro de la pagina. Para la regin editable izquierdo el nombre es izquierdo. Para la regin editable Centro el nombre es Centro.

Luego hacer un clic en archivo guardar como Plantilla

En el cuadro de dilogo que aparece asignar el nombre de la plantilla



14/60


Utilizacin de Plantillas

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



15/60

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 regin editable izquierdo, seleccionar la ficha Spry,dentro de la ficha Spry y luego hacer un clic en el botn Barra de mens

de Spry.



16/60


Luego aparecer una cuadro de dialogo barra de mens de spry en esecuadro de dialogo seleccionar la opcin vertical y luego hacer un clic en

aceptar.

Seleccionar el panel Aplicacin dentro del panel aplicacin se encuentra lapestaa Base de Datos, hacer un clic en el smbolo , aparecer la opcin

Conexin MySql.



17/60


En el cuadro de dialogo que aparecer:

Nombre de Conexin.- Asignar un nombre puede ser cualquiera, estenombre se toma como una variable.

Servidor Mysql.- en nombre de servidor se asigna el nombre del servidor eneste caso como se trabaja a nivel local es localhost.

Nombre de Usuario.- el nombre de usuario se asigna tal como se nombre almomento de instalar MySql.

Contrasea.- Se asigna la contrasea que se asigno cuando se instaloMySql.

Base de Datos.- Se asigna el nombre de la base de datos que se va atrabajar.

Luego hacer un clic en el botn prueba y tiene que aparecer un mensajeindicando si esta correcto o no la conexin.



18/60


Verificar en el panel Aplicacin que las tablas de la base de datos aparezcancorrectamente.

Como usted podr observar se pueden visualizar todas las tablas de la basede datos.

Seleccionar el panel Aplicacin dentro del panel aplicacin se encuentra lapestaa Vinculaciones, dentro de esta pestaa seleccionar el smbolo

,Aparecer la opcin Juego de registros(consulta).



19/60


Aparecer el cuadro de dialogo llamado juego de registros, se le asignara lossiguientes valores.

Nombre.- Se asigna un nombre que nos sirve como referencia de laconsulta, en este caso es rsCategorias.

Conexin.- Se asigna la variable de conexin que se creo con el nombre decn.

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



20/60

Manual de DreamWeaver CS3 con PHP Proyecto Carrito de Compras Luego hacer un clic en el botn prueba y aparecer el siguiente cuadro de

dialogo con el contenido de la tabla seleccionada.

En la Ficha Vinculaciones aparecer un juego de registros llamadorsCategoria, dentro de esa consulta aparecer los campos de la tabla que

en este caso es IdCategoria, NombreCategoria, descripcin.

Utilizar la vista Cdigo y dentro de esa vista posicionarse en la fila numero68, es decir en la lista con el nombre de elemento 1.



21/60


Seleccionar el texto elemento 1 y arrastrar del panel Aplicacin de laficha Vinculaciones del juego de registros rsCategoria el campo

NombreCategoria.

Seleccionar el panel CSS y la ficha CSS



22/60

Manual de DreamWeaver CS3 con PHP Proyecto Carrito de Compras Hacer doble clic en la regla ul: MenuBarVertical. En la categora tipo seleccionar el tipo de fuente que usted desee en tamao

10 y color el que a usted mas le guste, luego hacer clic en aceptar.

En la Categora Fondo Seleccionar el coro de fondo que usted desee.

En la Categora Cuadro Seleccionar el ancho 215 pix y finalmente hacer unclic en aceptar.



23/60


Hacer doble clic en la regla ul: MenuBarVertical a. En la categora tipo seleccionar un tipo de fuente y color Diferente a lo que

estaba.

En la Categora Fondo seleccionar un color de fondo diferente al otro Color.



24/60


En la Categora Cuadro asignar en ancho 215pix y finalmente aceptar.

Hacer doble clic en la regla ul: MenuBarVertical a:hover. En la Categora tipo en fuente seleccionar Verdana y en color de letra Negro.



25/60


En la categora fondo seleccionar un color de fondo diferente a lo que estabaanteriormente.

En la vista diseo seleccionar el conjunto de registro y luego ir al panelaplicacin y dentro del panel aplicacin ir a la ficha Comportamientos del

Servidor hacer un clic en el botn , y seleccionar la opcin Repetir

Regin



26/60


Luego aparecer un cuadro de dialogo llamado Repetir Regin, y dentro dela opcin juego de registros seleccionar el conjunto de registro llamado

rscategoria (creado anteriormente), y en mostrar seleccionar la opcin

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 pgina usted puede

observar que cuanto uno pasa el puntero del Mouse la lista cambia de color.



27/60


Creacin de la lista de productos

Seleccionar el panel Aplicacin dentro del panel aplicacin se encuentra lapestaa Vinculaciones, dentro de esta pestaa seleccionar el smbolo

,Aparecer la opcin Juego de registros(consulta).

En el cuadro de dialogo juego de registros asignarle como nombrersproductos, en conexin cn y la tabla productos.



28/60

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 deIdCategoria seleccionar Parmetro URL y asignar como variable

codigocategoria y luego hacer un clic en el botn Prueba.

Aparecer un cuadro de dialogo donde podemos el numero de la Categoray luego presionamos aceptar.

Como usted podr apreciar se muestra todos los registros de la categora02.



29/60


Una vez creado el nuevo juego de registros hacer un clic en el men Insertar> Objetos de Datos > Datos Dinmicos > Tabla Dinmica.



30/60


Aparecer un cuadro de dialogo donde se tiene que seleccionar el juego deregistros en esta caso es rsproductos, en mostrar todos los productos yluego hacer un clic en aceptar.

Aparecer una tabla en la pgina donde se muestra la informacin de latabla.

En la parte superior de la tabla se muestra el nombre que por defecto tieneque la base de datos que hace referencia al nombre del campo.



31/60


En la Fila numero 1 Cambiar el Nombre a los campos que se muestra, paraun mejor diseo.

Ejecutar la pagina F12. Como usted podr apreciar no se muestra nada todava, ya que falta

agregarle un parmetro a la tabla producto.

Seleccionar el juego de registro rscategoria y luego en el panel propiedadesseleccionar la opcin vinculo y agregarle la pagina lista.php.



32/60


Ir a la vista cdigo; En la vista cdigo en la lnea 83 con de se encuentra elvinculo del juego de registro agregarle el siguiente parmetro al vinculo

seguido de la pagina a vincular ?codigocategoria=.

El cdigo Completo es de la siguiente forma

Ejecutar la pgina F12 y seleccionar alguna de las categoras.



33/60


Seleccionar el panel Aplicacin dentro del panel aplicacin se encuentra lapestaa Vinculaciones.

Seleccionar el juego de registro rsproductos y hacerle doble clic. En el cuadro de dialogo que aparecer, en la opcin columnas adicionar la

columna imagenchica y luego hacer un clic en aceptar.

Entre la columna Descripcin y precio insertar una nueva columna, a lanueva columna asignarle el nombre de imagen.



34/60


En la segunda fila de la Columna imagen hacer un clic y luego ir al menInsertar > Imagen.

En el cuadro de dialogo que aparece seleccionar en la parte superior Fuentede Datos.

Seleccionar el conjunto de datos llamado rsproductos, desplegar lasopciones que hay dentro de ese conjunto de datos y seleccionar el campo

imagenchica.

Finalmente hacer un clic en aceptar



35/60


Ejecutar la pagina y seleccionar una categora y como usted podr apreciarse visualiza una imagen diferente por cada producto.



36/60

Manual de DreamWeaver CS3 con PHP Proyecto Carrito de Compras Seleccionar todo el contenido de la regin Editable Centro y luego hacer un

clic en el men Insertar >Objetos de datos > Mostrar Regin > 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



37/60


En la lnea 157 hay el siguiente cdigo

A ese cdigo 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 conexin cn. Tabla Productos. En las Columnas seleccionar los siguientes campos Idproducto,

nombreProducto, CantidadPorUnidad, PrecioUnidad,

UnidadesEnExistencia.

Filtro PrecioUnidad


38/60


Hacer un clic en medio de las 2 etiquetas php que aparecen y hacer que elpuntero del Mouse se posicione en el centro de esas 2 etiquetas.

Estando el puntero posicionado en el medio de las 2 etiquetas hacer un clicen la ficha datos la opcin tabla Dinmica



39/60


Aparecer un cuadro de dialogo donde tiene que seleccionar el conjunto deregistros que en este caso es rsOferta.

Ejecutar la pagina y como usted podr observar solo se visualiza la tablaque contiene el conjunto de registros rsOferta y luego seleccione una

Categora vera usted que cambia la tabla.



40/60


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 fichaformulario > Campo de Texto



41/60


En el ID asignarle Cantidad y aceptar.

Aparecer un cuadro de dialogo indicando si desea aadir etiqueta deformulario, en este caso hacemos clic en no.



42/60


Luego en la fila Pedir Insertar 2 campos ocultos, uno con el nombre decodigoproducto y origenlistaproductos; Hacer un clic en Formularios >

Campo de Imagen.

Estando en la fila Pedir insertar un imageField y seleccionar cualquierimagen esta imagen se utilizara como botn para enviar los pedidos

realizados.



43/60


En el ID asignarle el nombre de imageField.

En el mensaje de aadir etiqueta de formulario hacer un clic en no.



44/60


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.



45/60


En el cuadro de dialogo seleccionar Fuente de Datos. Seleccionar el juego de registro llamado rsoferta. Seleccionar el campo imagenchica.



46/60

Manual de DreamWeaver CS3 con PHP Proyecto Carrito de Compras Luego de insertar la imagen borrar las dems columnas que no se estn

utilizando.

En la vista Cdigo a la etiqueta


47/60


Ir a la vista Cdigo. 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. 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 Parmetro codigoproducto.



48/60


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



49/60


Guardar los cambios de la Pgina. Ir a la pagina Lista.php En la pgina lista seleccionar el campo imagen. Hacer un clic en el panel Etiqueta > Comportamiento y seleccionar la

opcin Abrir ventana del navegador.



50/60


En el cuadro de Dialogo que aparecer en Mostrar URL asignarleimagen.php, en ancho 170 y alto 170.

En el evento seleccionar Clic. En la etiqueta


51/60


Seleccionar el campo imagen y el panel propiedades en la opcin vinculoasignarle el smbolo # y en borde asignarle 0.

Estando aun seleccionado ir al panel Etiqueta > Comportamiento yseleccionar la opcin Efectos > Agitar.



52/60

Manual de DreamWeaver CS3 con PHP Proyecto Carrito de Compras En el cuadro de dialogo que aparecer seleccionar la opcin seleccin actual.

En el evento seleccionar onMouserOver

Guardar la Pgina. 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 opcin Efectos >

Aparecer/Desvanecer.

En Efecto Seleccionar Aparecer.



53/60


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

parmetro.

imagen.php?codigoproducto=

Como ustedes se darn cuenta solo se muestra los productos en una solacolumna, se proceder a cambiar el cdigo php para que genere 4 columnas

al momento de ejecutar la pagina.



54/60

Manual de DreamWeaver CS3 con PHP Proyecto Carrito de Compras Despus de la Etiqueta y antes de la etiqueta , agregar el

siguiente cdigo.

Despus el codigo del contador agregar una etiqueta de formulario y en elaction asignar como pagina agregarproducto.php.

Al final de la Etiqueta cerrar la etiqueta de formulario.

Luego agregar el siguiente codigo del contador.



55/60


Guardar los cambios y ejecutar la pagina F12.

Pasar el Mouse sobre cualquier imagen y veras un efecto.



56/60


Haga clic en Cualquiera de las imgenes y vera que aparecer una imagen mucho

mas grande un con efecto.

Creacin 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 cdigo.

//Se nombra a la variable de conexin



57/60



58/60

Manual de DreamWeaver CS3 con PHP Proyecto Carrito de Comprasheader("Location:carritodecompras.php");

}

//Asi se direcciona terminado el proceso al pgina carritodecompras.php, la cual

mostrar los productos agregados...

?>

Creacin de la Pagina CarritoCompras.php

Crear una nueva pagina con el nombre de CarritoCompras.php en la partesuperior de esta pagina agregar el siguiente codigo.

Crear una tabla de 8 columnas y 2 filas. En la vista codigo en la parte superior agregar el siguiente codigo.

Cod

ProductoPrecio

Cant

Subtotal


59/60

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

?>


60/60


Para confirmar el pedido haga

clic aqu

Usted no ha seleccionado algn producto

Crear la Pagina borrarproductocarrito.php

Tutorial Carrito de Compra Con Php

Documents

Transcript of Tutorial Carrito de Compra Con Php