Download - Manual de Dreamweaver 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


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


http://localhost/carritophp


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

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



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



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

nombre de estilo.



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



• Hacer un clic en la Ventana CSS



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



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



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



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



• Seleccionar el texto que se encuentra en el titulo de la pagina luego hacer

un clic en Insertar > Objetos de planilla > Región editable



• 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



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.



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



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



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.



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


pestaña Vinculaciones, dentro de esta pestaña seleccionar el símbolo

,Aparecerá la opción Juego de registros(consulta).



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.



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



• 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



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



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



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



• 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



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



Creación de la lista de productos


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.



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



• Una vez creado el nuevo juego de registros hacer un clic en el menú Insertar

> Objetos de Datos > Datos Dinámicos > Tabla Dinámica.



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



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



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




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.



• 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



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

se visualiza una imagen diferente por cada producto.



• 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



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


• 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



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



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



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



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



• En el ID asignarle el nombre de imageField.

• En el mensaje de añadir etiqueta de formulario hacer un clic en no.



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



• En el cuadro de dialogo seleccionar Fuente de Datos.

• Seleccionar el juego de registro llamado rsoferta.

• Seleccionar el campo imagenchica.



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



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



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



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



• 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']; ?>"



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



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



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



• 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>"; } } ?>



• Guardar los cambios y ejecutar la pagina F12.

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



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



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



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'])){


}

?>

• 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



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



<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


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");

?>


Download - Manual de Dreamweaver CS3 Con Php

Top Related