Diseño Web IV Upla

UNIVERSIDAD PERUANA LOS ANDES
2012
Creacin de la Carpeta Raz Local del Sitio y sus Sub Carpetas

Al crear pginas dinmicas que estarn ligados a una Base de Datos, estos deben crearse en un lugar muy especial. Es muy importante realizar los siguientes pasos al pie de la letra para un buen funcionamiento del sistema. 1. Lo primero es fijarse que el APACHE se haya instalado a la perfeccin. Luego doble clic en el icono Mi Pc ubicado en el escritorio de nuestro computador. 2. Luego ingresamos al disco C: y de all a la carpeta phpdev. Debemos recordar que esta carpeta es el lugar donde se instal en APACHE. 3. Luego ingresar a la carpeta phpdev deben hacer doble clic en la carpeta www, es aqu donde vamos a crear una carpeta el cul contendr toda nuestra pgina web. El nombre que usaremos para esto es <<tienda en lnea allison>>. 4. Ahora vamos a ingresar a la carpeta <<tienda en lnea allison>>. Y dentro de estga carpeta vamos a copiar todo el contenido de la carpeta <<tienda en lnea allison INICIO>>, que se encuentra en la carpeta que les he proporcionado
Diseo Web IV Ing. Carlos Almidn Ortiz
Pgina 1
2012
NOTA: Cuando creamos un sitio web dinmico siempre debemos crear las siguientes carpetas> admin: Aqu colocaremos todas las pginas PHP que sern parte del administrador de contenidos o tambin conocido como intranet. fuentes: Esta carpeta contendr todas las fuentes de nuestro sistema esto incluye los archivos (fla, png, psd, ai, doc, etc) a la hora de publicar la pgina web esta carpeta no se va a subir ya sirve slo para que el hizo la pgina. imagen_categora: Estos es valido si en algn momento se mostrarn las categoras de los productos en imgenes por lo tanto aqu colocaremos las mismas imagen_noticias: Nuestro sistema tambin tendr una seccin para mostrar noticias y estas por lo general vienen acompaado de imgenes y estas lo colocaremos en esta carpeta. Imgenes: Aqu colocaremos todas las imgenes que usaremos para la construccin de nuestro sitio web dinmico as como para nuestro administrador de contenidos estos casi siempre estn conformados por los botones, adornos, logos, etc. No debemos colocar ninguna imagen que este involucrado con los productos de nuestro catalogo. imagen_productos: Como su propio nombre lo indica aqu colocaremos todas las imgenes de los productos que se mostrarn en el catalogo en sus dos versiones, es decir cada producto deber tener 2 imgenes una pequea que se ver en la lista de productos y otra grande que se ver en el detalle de los productos.
Creacin de la Base de Datos y sus Respectivas Tablas

Ahora empezaremos a crear el proyecto y esto se refiere porque lo primero debemos realizar es estructurar bien nuestra base de datos y las respectivas tablas que usar nuestro sistema. Cuando creamos una pgina dinmica, siempre estaremos ligados a una base de datos. Esto lo podemos realizar en diferentes aplicaciones, sin embargo para nuestro propsito usaremos el MYSQL como gestor de base de datos y el APACHE como servidor web. Esto tambin hace suponer que nuestra pgina final debe alojarse en un hosting cuyo sistema operativo sea LINUX y que soporte PHP y MYSQL.
Acerca de la tablas que usar nuestra Base de Datos

Una base de datos siempre estar compuesta por una o ms tablas donde vamos a guardar la informacin textual, numrica, imgenes, etc Que luego invocaremos desde la pgina web creado en Dreamweaver CS5. Tabla usuarios Esta tabla sirve para colocar los datos de las personas que podrn acceder al administrador de contenidos del sitio. La funcin de estas personas ser: aadir productos, categoras, borrar, listar, clientes, noticias, etc.
Diseo Web IV Ing. Carlos Almidn Ortiz Pgina 2
2012
Tabla categora Esta tabla servir para colocar todas las categoras de nuestros productos, es decir sin nosotros vendemos ropas las categoras seran: casaca, pantalones, chompas, buzos, etc. Tabla productos Dentro de esta tabla colocaremos todos los datos de nuestros productos, aqu estar la informacin requerida para nuestra tienda en lnea. Tabla clientes Esta tabla almacenar los datos de los clientes que van a realizar el pedido en lnea, esto quiere decir que si alguien entra a nuestra tienda y no est inscrito como usuario no podr usar el carrito de compras ni hacer pedidos en lnea. Tabla noticias Como nuestro sistema tendr una seccin para noticias entonces esta tabla se encargar de dicho mdulo, es decir almacenar las noticias y eventos que sucedan en nuestro sitio web. Tabla carrito Esta tabla se usar solo cuando el cliente comience a usar el carrito de compras de nuestro sistema. Solo almacenar el cdigo de orden, cdigo de producto, cdigo del cliente y la cantidad. Cuando se termine el proceso de pedido en lnea y el cliente mande su orden via web el contenido de esta tabla se borrar en forma automtica. Tabla contactos Nuestro sitio posee un link de contactenos y este a su vez posee un formulario donde las personas dejarn su nombre, email, edad, etc. Estos datos lo almacenaremos en esta tabla. Tabla pedidodetalle Este almacenar el detalle del pedido para luego generar el pedido en lnea de nuestro catlogo. Tabla pedido La misin de esta tabla es registrar todos los pedidos que los clientes inscritos realicen desde nuestro catlogo en lnea, cuando nosotros queremos saber cuantos pedidos hay que atender usaremos esta tabla.
Pgina 3
2012
usuarios
Comentarios de la tabla: Administra los datos de las personas que administrarn nuestra base de datos. Campo codusuario nombres apellidos email clave estado Tipo int(11) varchar(20) varchar(50) varchar(50) varchar(20) char(1) Nulo No S S S S S NULL NULL NULL NULL NULL Predeterminado
ndices:
Nombre de la clave Tipo Cardinalidad Campo PRIMARY PRIMARY 0 codusuario
Espacio utilizado:
Tipo Uso Datos 0 Bytes ndice 1,024 Bytes Total 1,024 Bytes
Estadsticas de la fila:
Enunciado Valor Formato dinmico/a Filas 0 Prxima Autoindex 1 Creacin 14-09-2009 a las 17:46:24 ltima actualizacin 14-09-2009 a las 17:46:24
NOTA: Los tipos INT, solo podrn almacenar valores numricos enteros, los VARCHAR podrn almacenar letras, nmeros, signos, caracteres especiales y los CHAR solo podrn almacenar un carcter. La columna Atributos lo dejaremos en blanco para nuestro caso no es necesario, pero en la columna Nulo colocaremos Null a todos los campos menos al primero. NOTA: El campo codusuario debe llevar la opcin not null, debido a que este campo no lo vamos a ingresar por teclado, por el contrario ser generado por el sistema en forma automtica, al reto de campos le ponemos null por que lo ingresamos por teclado. NOTA: EN la columna Predeterminado y Extra, solo algunos campos tendr valores, por ejemplo el campo codusuario es un campo clave el cual nos servir para poder realizar cualquier operacin con
Pgina 4
2012
respecto a los datos, por lo tanto en la columna Extra seleccionaremos auto_increment y al final declaramos que es un campo primario. NOTA: El primer campo de cada tabla debe llevar este mismo aspecto (not null, auto_increment y primaria) en todas ya que este campo lo vamos a usar como campo clave para realizar cualquier operacin de bsqueda, indexacin, etc.
categorias
Comentarios de la tabla: Almacena categoras de nuestro catalogo en lnea, como el catlago en lnea que estamos realizando ser para mostrar prendas de vestir, entonces la categoras podr;ian ser por ejemplo: Tops Pantalones y Jeans Vestidos Faldas Buzos Ropa interior Pijamas Casacas Zapatos Carteras y accesorios Sin embargo nosotros podramos aadir o quitar categoras ms adelante cuando lo creamos por conveniente, es por tal motivo que necesitamos crear una tabla exclusiva para esto.
Tipo int(11) varchar(50) char(1) Nulo No S S NULL NULL Predeterminado
Campo codcategoria nom_categoria estado
ndices:
Nombre de la clave PRIMARY Tipo PRIMARY Cardinalidad Campo 0 codcategoria
Espacio utilizado:
Enunciado Formato Filas Prxima Autoindex Creacin Valor dinmico/a 0 1 14-09-2009 a las 18:15:52
ltima actualizacin 14-09-2009 a las 18:15:52

2012
productos
Comentarios de la tabla: En esta tabla se coloca los datos del producto, como nombre, descripcin, fecha de ingreso, precio normal, precio oferta, imagen chica, imagen grande, entre otros. Campo codproducto codcategoria nombreproducto descripcion fecha_ing precio_normal precio_oferta imagen_chica imagen_grande oferta estado int(11) int(11) varchar(250) text date double double varchar(50) varchar(50) varchar(2) varchar(1) Tipo Nulo No S S S S S S S S S S NULL NULL NULL NULL NULL NULL NULL NULL NULL NULL Predeterminado
ndices:
Nombre de la clave Tipo Cardinalidad Campo PRIMARY PRIMARY 0 codproducto
Espacio utilizado:
NOTA: Dentro de esta tabla podemos observar algunos aspectos similares cuando hemos creado las dos primeras tablas por ejemplo en este caso el campo clave es codproducto por lo tanto debe estar en auto_increment y primario. Tambin estamos usando tres tipos de datos nuevos: los TEXT se usa cuando queremos colocar grandes cantidades de texto, los DATE cuando son fechas. Los campos DOUBLE son aquellos que almacenarn datos numricos decimales y es ideal para los precios por ejemplo.
2012
clientes
Comentarios de la tabla: Tiene la misin de almacenar los datos de los clientes que deseen utilizar nuestro sistema de catlogos en lnea conjuntamente con el carrito de compras y que tambin podr realizar pedidos va internet. Adems tambin nos servir para saber ms datos sobre los clientes como son direccin, email, fecha de nacimiento, entre otros datos que en un determinado momento nos pueden ser muy tiles y tener una relacin ms directa con el cliente y la empresa.
Campo codcliente nombres apellidos razonsocial dni direccion telefono email clave ocupacion edad fecha_nacim comentario estado
Tipo int(11) varchar(35) varchar(35) varchar(35) int(11) varchar(35) varchar(12) varchar(30) varchar(10) varchar(50) int(11) date text char(1)
Nulo No S S S S S S S S S S S S S NULL NULL NULL NULL NULL NULL NULL NULL NULL NULL NULL NULL NULL
Predeterminado
ndices:
Nombre de la clave Tipo Cardinalidad Campo PRIMARY PRIMARY 0 codcliente
Espacio utilizado:
Pgina 7
2012
noticias
Comentarios de la tabla: Almacena las noticias y eventos que suceden dentro de nuestra organizacin y que a suz sern publicados en la pgina web, entonces necesitamos una tabla esclusivo para este propsito.
Campo codnoticias titulo sumilla cuerpo fecha_ing fotochica fotogrande estado
Tipo int(11) varchar(250) varchar(250) text date varchar(50) varchar(50) char(1)
Nulo No S S S S S S S NULL NULL NULL NULL NULL NULL NULL
Predeterminado
ndices:
Nombre de la clave PRIMARY Tipo PRIMARY Cardinalidad Campo 0 codnoticias
Espacio utilizado:
contactenos
Comentarios de la tabla: Es usual colocar una tabla de contactenos en nuestra pgina web, esto es diferente a la tabla clientes pues debido a que cualquier navegante de la red puede llenar el formulario de contactenos para darnos su apreciacin sobre la web o cualquier observacin que el visitante crea conveniente.
2012
El formulario contactenos generalmente se acostumbra a enviarlo a una cuenta de correo electrnico pero en este casovamos a almacenarlo en la base de datos y por lo tanto y por lo tanto necesitamos una tabla contactenos. Campo codcontactenos nombres apellidos direccion distrito departamento telefono email sexo edad comentario estado Tipo int(11) varchar(35) varchar(35) varchar(50) varchar(50) varchar(50) varchar(12) varchar(35) varchar(30) int(11) text char(1) Nulo No S S S S S S S S S S S Predeterminado NULL NULL NULL NULL NULL NULL NULL NULL NULL NULL NULL
ndices:
Nombre de la clave PRIMARY Tipo PRIMARY Cardinalidad Campo 0 codcontactenos
Espacio utilizado:
NOTA: Luego de crear est tabla, solo nos faltan tres tablas que funcionarn en forma directa con sistema de carrito de compras y el sistema de pedidos en lnea, estas son la tabla carrito, pedidos y detallespedido. Con esto sumariamos a nueva tablas que es lo suficiente para realizar un catalogo de productos con su sistema de pedidos en lnea.
2012
carrito
Comentarios de la tabla: La tabla carrito tendr como misin almacenar los productos que el cliente va escogiendo dentro del catalogo para luego hacer un pedido en lnea, esta tabla solo estar llena cuando el cliente comienza a seleccionar los productos, una vez que se realice el pedido en lnea la tabla carrito borrar su contenido para estar listo para hacer otra seleccin.
Campo codorden codcliente codproducto cantidad
Tipo varchar(50) int(11) int(11) int(11)
Nulo No No No No
Predeterminado
Espacio utilizado:
Tipo Datos Uso 0 Bytes
Enunciado Formato Valor dinmico/a
ndice 1,024 Bytes Total 1,024 Bytes
Filas 0 Creacin 14-09-2009 a las 20:14:17 ltima actualizacin 14-09-2009 a las 20:14:17
NOTA: Esta tabla se relaciona con las tablas clientes a travs del campo codcliente y con la productos a travs del campo codproducto. Por lo tanto ambos campos deben coincidir en las tres tablas.
pedidodetalle
Comentarios de la tabla: La misin de esta tabla es almacenar el detalle del pedido como cdigo de orden, cdigo de producto, precio y cantidad, esta tabla tambin se relaciona con las tablas carrito y productos.
Campo codorden codproducto precio cantidad

Tipo varchar(50) int(11) double int(11)
Nulo No No No No
Predeterminado
Pgina 10
2012
Espacio utilizado:
Enunciado Formato Filas Creacin Valor dinmico/a 0 14-09-2009 a las 20:25:09
ltima actualizacin 14-09-2009 a las 20:25:09
pedidos
Comentarios de la tabla: Esta tabla se encargar de registrar los pedidos realizados por los clientes, aqu almacenaremos el cdigo de orden, cdigo del cliente, la fecha de pedido, observacin, monto bruto, igv y el neto a pagar. Campo codorden codcliente fechapedido observaciones bruto igv total Tipo varchar(50) int(11) datetime text double double double Nulo No No No No No No No Predeterminado
Espacio utilizado:
Enunciado Valor Formato dinmico/a Filas 0 Creacin 14-09-2009 a las 20:31:27 ltima actualizacin 14-09-2009 a las 20:31:27
NOTA: En esta tabla estamos usando un nuevo tipo de campo DATATIME este tipo de campos almacenarn la fecha y hora del pedido, esto es para preveer que no haya dos pedidos a la misma hora y la misma fecha.
Pgina 11
2012
INGRESANDO REGISTROS DENTRO DE UNA TABLA

Ahora que ya estn creadas todas las tablas de la base de datos que usaremos en nuestro sistema de catalogo con pedidos en lnea el otro paso importante antes de empezar con el desarrollo es ingresar los registros a cada tabla para poder manipularlos desde el Dreaweaver CS5.
Registros de la tabla usuarios

Servidor: localhost Base de datos: bdtienda_alison Tiempo de generacin: 14-09-2009 a las 23:58:38 Generado por: phpMyAdmin 2.10.2 / MySQL 5.0.45-community-nt-log consulta SQL: SELECT * FROM `usuarios` LIMIT 0, 30 ; Filas: 2 codusuario nombres apellidos email clave estado 1 JOSE OLIVERA ESPINOZA sejo_olivera@hotmail.com 123456 A 2 RITA BARRETON TAIPE ritabarreton@gmail.com 123456 A
Registros de la tabla categorias

Servidor: localhost Base de datos: bdtienda_alison Tiempo de generacin: 15-09-2009 a las 00:07:51 Generado por: phpMyAdmin 2.10.2 / MySQL 5.0.45-community-nt-log consulta SQL: SELECT * FROM `categotias` LIMIT 0, 30 ; Filas: 12 codcategoria 1 2 3 4 5 6 7 8 9 10 11 12 nom_categoria Tops Pantalones-Jeans Vestidos Faldas Buzos Ropa Interior Pijamas Casacas Casacas Zapatos Carteras Carteras y Accesorios estado A A A A A A A A A A A A
Pgina 12
2012
Registros de la tabla productos

Servidor: localhost Base de datos: bdtienda_alison Tiempo de generacin: 15-09-2009 a las 00:46:49 Generado por: phpMyAdmin 2.10.2 / MySQL 5.0.45-community-nt-log consulta SQL: SELECT * FROM `productos` LIMIT 0, 30 ; Filas: 8
codprod codcate nombrepr descrip fecha precio_n precio_o imagen_ imagen_g ofe esta ucto goria oducto cion _ing ormal ferta chica rande rta do Este profuct o est elabora Top licrado 20091 do con de verano 07-16 una licra import a... Este produc to es ideal Top licrado 20091 para de verano 08-12 lucirlo en Verano , es ... Este produc to es ideal 2009para el 06-10 verano, es muy sens...
80
75 top1a
top1b
SI
68
50 top2a
top2b
SI
Top con abertura 1 en la espalda
80
NULL top3a
top3b
NO A
Este Top produc 20091 transparen to est 06-17 te finame nte
115
95 top4a
top4b
SI
Pgina 13
2012
codprod codcate nombrepr descrip fecha precio_n precio_o imagen_ imagen_g ofe esta ucto goria oducto cion _ing ormal ferta chica rande rta do elabora dp con seda y ... Este es un pantal n Jean Pantalones 20092 finame Jean 05-13 nte acabad o que ent... Este es un pantalo n estilo 2009sastre 09-03 muy bien elabora ... Este pantalo n es ideal 2009para t 03-03 que te gusta sentir... Este es un pantal n que 2009va con 05-22 la moda retro, cuan...
160
125
pantalon pantalon1 Si 1a b
Pantalon 2 estilo sastre
148
NULL
pantalon pantalon2 NO A 2a b
Panlan de 2 vestir juvenil
135
110
pantalon pantalon3 Si 3a b
Pantalon Jean 2 votapie ancho
140
110
pantalon pantalon4 SI 4a b
Pgina 14
2012
NOTA: Acordemos que el cdigo de producto se llenar de forma automtica, cdigo de categora debemos ingresarlo manualmente teniendo en cuenta la tabla categora, por ejemplo 1 para tops, 2 para pantaln, 3 para vestidos, etc.
El cdigo de categora ser 1 para los cuatro primeros producto, pues estos sern Tops, los siguientes 4 sern para Pantalones, despus Vestidos, Faldas, etc. El nombre del producto deber ser creativo y vendedor.
Registros de la tabla clientes

Servidor: localhost Base de datos: bdtienda_alison Tiempo de generacin: 15-09-2009 a las 01:08:35 Generado por: phpMyAdmin 2.10.2 / MySQL 5.0.45-community-nt-log consulta SQL: SELECT * FROM `clientes` LIMIT 0, 30 ; Filas: 2
codcli nom apelli razons ente bres dos ocial dni direc telef cion ono email clav ocupa ed fecha_n comen esta e cion ad acim tario do Primer a cliente que usara A el sistem a de carrito de... Segun da cliente que usar A el sistem a de carrito de...
Comuni Jirn Huam da Puno 20060 5032 betsy@hotmail 123 Enfer 1 Betsy an Virtual 285 959 42 .com 456 mera Artica Peruan Huan a cayo
35
197308-16
2 Rita
Carde INGSO nas FT Alarc S.R.L on
Jr. Las Reta 20060 mas 4587 125 Pio Pata
3642 rcardenas@ho 123 Obstat 198525 58 tmail.com 456 riz 09-19
Para que el sistema pueda funcionar, necesitamos por lo menos de 1 o 2 clientes, los cuales nos va a servir para usar el carrito de compras y el sistema de pedidos en lnea.
Pgina 15
2012
Registros de la tabla noticias

Servidor: localhost Base de datos: bdtienda_alison Tiempo de generacin: 15-09-2009 a las 01:18:21 Generado por: phpMyAdmin 2.10.2 / MySQL 5.0.45-community-nt-log consulta SQL: SELECT * FROM `noticias` LIMIT 0, 30 ; Filas: 2
codnoticias titulo sumilla Ofertas expectaculares Agosto cuerpo En el mes de Agosto todos los Tops a mitad de prec... fecha_ing fotochica fotogrande estado 2009-0803 top2a top2b A
Ofertas 1 Agosto
Este mes de Dos por uno Pantalones 2 por setiembre todos 2009-092 en 1 en Setiembre los pantalones, en 01 Setiembre ofe...
pantalon2a pantalon2b A
Registros de la tabla contactenos

Servidor: localhost Base de datos: bdtienda_alison Tiempo de generacin: 15-09-2009 a las 01:24:33 Generado por: phpMyAdmin 2.10.2 / MySQL 5.0.45-community-nt-log consulta SQL: SELECT * FROM `contactenos` LIMIT 0, 30 ; Filas: 2
codcontact nombr apellid direcci distrit departam telefo enos es os on o ento no 1 Jos La Jr. Torre Lima Galvez 458 Huanc Junin ayo email sex ed coment esta o ad ario do Cliente viajero 41 A frecuent e. Cliente con preferen 31 cia a A comprar ropas intimas.
36454 galvez@hotmail.c M 2 om
Jr. 9 Sosa Merce de 2 Carde Chilca Junin des Diciem nas bre
52321 mercedes@hotm F 4 ail.com
Sobre los registros de las tablas carrito, pedidos y pedidodetalle.

A estas tablas no ser necesario llenar ningn registro, debido a que estos se llenarn en el mismo momento en que se estn usando el sistema de carrito de compras y al momento de hacer pedido en lnea.
2012
Iniciando el Desarrollo con el Dreamweaver CS5

Como ya tenemos la base de datos con las tablas que vamos a trabajar , estamos listos para comenzar el proceso de desarrollo de nuestro catalogo de productos en lnea. NOTA: Es muy importante antes de ingresar al Adobe Dreamweaver CS5, debemos de iniciar el Apache. Ahora inicialice el Dreamweaver CS5 Definiendo un Nuevo Sitio para crear Pginas Dinmicas. Lo ms importante y primordial es definir bien el nuevo sitio a desarrollar, de lo contrario y si esto estuviera mal nada de lo que realicemos funcionar. Por lo tanto debemos tener mucho cuidado y atencin en este punto. 1. Una vez que ingresemos al Dreamweaver CS5 y cuando vemos la pantalla de bienvenida nos dirigimos al men sitio/nuevo sitio al hacer esto saldr la siguiente pantalla.
NOTA: Cuando ingresamos a la ventana Definicin de Sitio, en la ficha Avanzadas observamos que en la parte lateral izquierda 10 categoras. Para nuestro caso solo utilizaremos las tres primeras.
Pgina 17
2012
2.
3.
En la Categora Datos Locales en la parte derecha de la pantalla vamos a escribir el nombre de nuestro sitio y luego le diremos donde esta nuestra carpeta raz local. La carpeta raz local es donde se crear toda la pgina web y su posicin es: C:\Appserv\www\tienda en lnea allison\ Ahora haremos clic en la Categora Datos Remotos y all en la opcin Acceso debemos seleccionar Local/red y en la opcin Carpeta remota debemos seleccionar la misma carpeta raz local que se seleccion en Carpeta raz local.
4.
Por ltimo y para terminar el proceso de creacin del sitio dinmico debemos hacer clic en la categora Servidor de Prueba. Luego en la opcin Modelo de Servidor debemos de elegir PHP MySQL, en acceso Local/red. Al hacer esto la opcin Carpeta de servidor ya sale la ubicacin de la carpeta raz local la misma que se ha utilizado en las dos categoras anteriores.
Pgina 18
2012
5.
Lo ms importante en esta categora, en la opcin Prefijo de URL, al final de todo el texto que aparece all, debemos aadir el nombre de la carpeta raz local finalizar con un slash.
Colocar esto es muy importante ya que nos permitir visualizar pginas dinmicas PHP directamente desde Dreamveaver CS5 con slo pulsar F12. 6. Despus de esto procedemos a hacer clic en Aceptar y cuando vuelva a salir una ventana de advertencia hacemos clic nuevamente en Aceptar. NOTA: Bueno, el proceso de crear el nuevo sitio para desarrollar una pgina dinmica ya est finalizado, prueba de ello es que en la paleta Archivos Locales podemos observar el nombre de nuestro sitio y todo el contenido de nuestra carpeta raz local.
Pgina 19
2012
Nombre del sitio
Contenido de la Carpeta raz local
Creando una Prueba de Visualizacin de una Pgina PHP

Lo ms importante en estos momentos es saber si realmente todo lo que hemos realizado est bien y para esto no hay otra cosa que crear una pgina PHP de prueba y correrlo desde el Dreamweaver CS5, de esta forma comprobaremos que todo lo que se hizo hasta ahora est bien. 1. Abrimos el Archivo/Nuevo, cuando salga el cuadro de dialogo, en la primera columna debemos seleccionar la opcin Pgina Blanca, en la segunda columna PHP y por ltimo hacer clic en el botn Crear.
2. Estando en la nueva pgina vamos a escribir un texto de bienvenida, por ejemplo BIENVENIDOS A MI PRIEMERA PAGINA PHP. 3. Luego lo grabamos y cargamos el Internet Explorer para visualizarlo. Nuestra Web debe salir en el navegador gracias a que el Apache est en ejecucin.
2012
Creando la Conexin a la Base de Datos

Uno de los primeros pasos para comenzar a desarrollar nuestra aplicacin es crear un enlace o conexin con la Base de Datos con el cual vamos a trabajar, ya que este es la llave para que podamos manipular informacin dinmica y por consiguiente podamos ver, leer, modificar, agregar, consultar y buscar todo tipo de informacin desde la base de datos que inicialmente hemos creado. La conexin se realiza una sola vez y al inicio del desarrollo, pero no obstante en algunos casos estos pueden fallar y tendremos la necesidad de borrar y crear nuevamente la conexin. Cuando creamos una conexin utilizaremos un nombre propio para ste, por lo tanto todas las pginas PHP que estn conectadas usarn dicho nombre. Si por problemas ajenos a nosotros necesitamos crear nuevamente la conexin debemos darle el mismo nombre que usamos al inicio, esto es porque todas las pginas PHP estarn usando ese nombre, entonces si lo cambiamos nuestras aplicaciones ya funcionarn correctamente. 1. Primero es obligatorio tener abierto una pgina PHP, como al inicio hemos creado uno, nos aseguramos que el archivo prueba.php est abierto. NOTA : Si no tuviramos ningn PHP tendramos que abrir una nueva pgina PHP y grabar con este formato antes de crear la conexin. 2. Luego de esto debemos activar la paleta Base de Datos. Para esto vamos al men Ventana/Base de datos. Cuando abrimos la paleta Base de datos observaremos que dentro de este sale cuatro opciones nmeradas de las cuales solo los tres primeros poseen un check o visto bueno. Esto significa que todo est OK y podemos crear la conexin a la base de datos, sin embargo si uno de estas tres primeras opciones no tuvieran el check simplemente no podremos crear la conexin. 3. Ahora hacemos clic en el +/ Conexin MYSQL 4. Cuando salga el cuadro de dialogo Conexin MySQL, debemos llenar las opciones que se muestra :
5. Al finalizar el proceso de conexin a la base de datos, en la paleta Base de datos saldr un pequeo icono de color amarillo con el nombre de la conexin que acabamos de crear.
Pgina 21
2012
Conexin a Base de Datos finalizada Podemos ampliar la conexin y ver la tablas y el campo que posee cada uno de ellos y all observaremos el nombre de cada campo con su respectiva longitud.
Pgina 22
2012
Desarrollo del Administrador de contenidos del Sistema

En esta parte del desarrollo nos ocuparemos especficamente en la creacin del Backoffice o administrador de contenidos para nuestra base de datos, desde esta parte nosotros podremos insertar, modificar, eliminar productos, usuarios, clientes, noticias, categora de productos, etc. Es muy importante que todos los archivos PHP que realicemos para el administrador de contenidos se graben en la carpeta admin. Lo primero que realizaremos es el rbol de la barra de navegacin y el nombre de los archivos que tendrn cada opcin del mdulo de administrador de archivos.
Barra de navegacin del administrador y el nombre de los PHP.
Home page del administrador (index.php)

Sistema Nuevo Usuario Listado de Usuarios Modificar Eliminar Productos Categora Nueva Categora Listado Categora Modificar Eliminar Productos Nuevo Producto Listado Productos Modificar Eliminar Pedidos Clientes Nuevos Clientes Listado Clientes Modificar Eliminar Noticias Nuevas Noticias Listado Noticias Modificar Eliminar
(ing_nuevo_usuario.php) (listado_usuario.php) (modif_usuario.php) (eliminar_usuario.php)
(ing_nueva_categoria.php) (listado_categoria.php) (modificar_categoria.php) (eliminar_categoria.php) (nuevo_producto.php) (listado_producto.php) (modificar_producto.php) (eliminar_producto.php) (listado_pedidos.php)
(nuevo_cliente.php) (listado_cliente.php) (modificar_cliente.php) (eliminar_cliente.php)
(nueva_noticia.php) (listado_noticia.php) (modificar_noticia.php) (eliminar_noticia.php)

Pgina 23
2012
(nuevo_contacto.php) (listado_contacto.php) (modificar_contacto.php) (eliminar_contacto.php)
Contactos Nuevos Contactos Listado Contactos Modificar Eliminar
NOTA : Estos son los nombres de los archivos que crearemos para el administrador de contenidos como cada opcin general poseen sub opciones tendremos que hacer uso de los mens desplegables. Tener muy en cuenta el nombre de los archivos, pues el resto del curso se basa en ellos y cualquier alteracin tambin tendran que modificarlo en sus aplicaciones.
Creando la Pgina Inicial (index.php) del Administrador de Contenidos

Como ya se haba explicado anteriormente al mdulo administrador de contenidos slo podrn ingresar personas autorizadas y previamente registrados como usuario. Por lo tanto la primera pgina deber contener un formulario donde se puedan loguear con un nombre de usuario y una contrasea. Slo cuando se realice el logueo con usuario y contrasea correcta podrn acceder a la pgina principal del administrador de contenidos y poder modificar y editar informacin de la base de datos. 1. Primero cerramos cualquier PHP que tengamos abierto en pantalla. 2. Ahora vamos al men Archivo/Abrir y nos dirigimos a la carpeta admin de nuestra carpeta raz local y abrimos el archivo index.html. 3. Cuando ya este el archivo en pantalla, procedemos a grabarlo de nuevo pero como index.php.
Guardado como index.php
Pgina 24
2012
4. Ahora vamos a crear un formulario dentro del diseo para que los usuarios se loguen.
La tabla dentro del formulario es de 5 filas y 1 columna. El ancho de la tabla es de 280 pixeles. El campo de texto del email tiene las siguientes propiedades.
El campo de texto de l contrasea tiene las siguientes propiedades.
NOTA: en Car. mx es recomendable siempre colocar el ancho de variable que se defini al momento de crear la tabla usuarios de nuestra base de datos. El botn de comando Ingresar tiene las siguientes propiedades.
Pgina 25
2012
Para probar si el php est funcionando sin ningn problema podemos pulsar la tecla F12 y nuestro mdulo saldr en pantalla. 5. Cerramos el Internet Explorer y volvemos al Dreamweaver CS5. 6. Vamos a dejar abierto el archivo index.php porque an lo vamos a usar para realizar la validacin. NOTA : hasta ahora solo hemos creado para de lo que ser el ingreso al administrador de contenidos. Lo que realizaremos a continuacin es crear la pgina principal que saldr cuando un usuario ingresa su usuario y clave correcta. Tambin falta realizar las validaciones para que solo se restrinja el acceso a travs de este formulario y si una persona ingresa un usuario o clave errad que no deje ingresar al sistema.
Pgina 26
2012
Desarrollo de Pginas internas del Administrador de Contenidos

Este mdulo aunque no lo crean es el ms pesado pero tambin realiza el 50% del desarrollo de nuestro sistema de Catlogo con Pedidos en Lnea. A continuacin vamos a desarrollar mdulo por mdulo hasta completar todo el administrador de contenidos, para luego crear el Frontoffice. Administrando las Opciones del Men SISTEMA. Empezaremos creando los cuatro mdulos de la opcin SISTEMA en el siguiente orden y luego pararemos a desarrollar las otras opciones del men principal. Nuevo Usuario Listado de Usuarios Modificar Eliminar ing_nuevo_usuario.php listado_usuario.php modif_usuario.php eliminar_usuario.php
Creando el mdulo Ingresar Nuevos Usuarios. Debemos tener en cuenta que la opcin SISTEMA del men principal del administrador es poder controlar a las personas que tendrn la misin de actualizar toda la informacin de la Base de Datos, tambin son las nicas personas autorizadas en ingresar al administrador de contenidos. Por lo tanto es presindible realizar este mdulo para poder aadir usuarios en un determinado momento. 1. Empezamos cerrando todos los php abiertos incluyendo plantillas y slo debe quedar abierto el archivo index.php. 2. 2. Ahora abrimos el archivo ing_nuevo_usuario,php al hacer esto en pantalla saldr la pgina perteneciente a este mdulo vaci y slo con su ttulo. 3. Colocamos el cursor dos lneas ms abajo del ttulo y en la barra Insertar activamos la lengeta Formularios. NOTA : Como recordamos las herramientas dentro de esta lengeta nos ayudar a construir formularios dentro de un pgina web.
Pgina 27
2012
4. Lo primero que realizamos es insertar un nuevo formulario, para esto nos dirigimos a la primera a la primera herramienta de la lengeta formularios y hacemos clic.
Colocando el cursor debajo del ttulo y activando la lengeta formulario en la barra Insertar. 5. La hacer esto en la posicin del cursor saldr un rectngulo de color rojo con lneas entrecortadas indicando que acabamos de insertar un formulario. 6. Apenas veamos el formulario en nuestra pgina, procedemos a darle un nombre apropiado. Para esto nos dirigimos a la barra de propiedades del Dreamweaver y en la opcin ID de formulario colocamos nuevo usuario.
7. Despues de nombrar el formulario procedemos a la diagramacin del mismo, para esto podemos usar tablas, estilos, imgenes, entre otros elementos para que el diseo salga presentables. 8. Colocamos el cursor dentro del formulario que acabamos de crear y abrimos el men Insertar/Tabla.
Pgina 28
2012
9. Colocamos 6 filas, 2 columnas 550 pixeles de ancho y las otras tres opciones ponemos en 0. Hacemos clic en OK para terminar de crear la tabla. 10. Ahora apenas veamos la tabla creada nos dirigimos a la barra de propiedades y en la opcin Alinear seleccionamos Centro. 11. Ahora colocamos las etiquetas del formulario en la primera columna de la tabla como se ve a continuacin.
12. Para poder aplicarle estilo a toda la tabla, marcamos como bloque todas las celdas de la misma. Para esto arrastramos el mouse desde la primera celda hasta la ltima.
Marcado como bloque todas las celdas de la tabla. 13. Ahora en la barra de propiedades en la opcin Parrafo. Aquie estamos aplicando el estilo p a todas las celdas de la tabla para que adquieran un texto uniforme.
Pgina 29
2012
14. Luego de esto, aplicaremos un estilo de tipo class a cada celda donde se encuentren las etiquetas de nuestro fotograma apara que los textos se alinien hacia la derecha. NOTA : Este proceso debemos realizarlo celda por celda y no podemos marcar varias al mismo tiempo pues no tendremos el resultado que deseamos. Primero colocamos el cursor en la celda donde se encuentra el texto Nombres, y luego nos dirigimos a la barra de propiedades y en la opcin Clase debemos hacer clic en el estilo textoformularios.
Aplicando estilo textoformularios a la primera celda de la tabla. Como podemos ver el texto se alinea a la derecha de la celda, debemos realizar este mismo procedimiento en las otras celdas donde se encuentra los textos. Tambin podemos cambiar el ancho de la primera columna a 40%. Al final debemos tener la siguiente presentacin.
Presentacin final de la tabla con los estilo aplicados. 15. Colocamos el cursor en la primera celda de la segunda columna y hacemos clic en la herramienta Campo de texto.
Pgina 30
2012
16. Con el campo de texto en pantalla y estando seleccionado nos dirigimos a la barra de propiedades y all debemos indicar el nombre del campo, la longitud de la misma y el mximo de caracteres a ingresar.
Colocando nombre de campo, ancho de campo y mximo de caracteres aceptables. NOTA : En Campo de texto puede ser cualquiera, pero para un mejor aprendizaje podremos colocar txt_nombres, en la opcin Ancho car colocamos el ancho del cuadro de texto, este nmero puede ser cualquiera pero en la opcin Car. Mx. debemos colocar siempre el mismo ancho que asignamos al campo nombre a la hora de crear la tabla. 17. Luego de esto colocamos el cursor en la segunda celda debajo del campo nombre, luego hacemos clic nuevamente en la herramienta Campo de texto. No olvidemos hacer clic en Cancel cuando salga el cuadro de dialogo.
Colocando un campo de texto para Apellidos 18. Seleccionamos el campo que acabamos de insertar y en la barra de propiedades colocamos en Campo de texto, Ancho car y el Car. Max. Igual al de la tabla.
NOTA : Debemos tener en cuenta que el nmero 50 que hemos colocado en la opcin Car. Max es el mismo ancho que le dimos al campo a la hora de generar la tabla Usuarios en nuestra base de datos. 19. Debemos insertar otro campo de texto para el campo E-mail y configurarlo de la siguiente manera en la barra de propiedades.
Pgina 31
2012
20. Ahora nos toca insertar el Campo de texto para la contrasea y en la barra de propiedades debemos colocar lo siguiente.
21. Ahora nos falta el campo estado, para esto podemos usar la herramienta Botn de Opcin, esta herramienta se usa cuando tenemos dos o ms opciones y slo activaremos uno de ellos. El campo estado slo tendr dos opciones A (activo) I (Inactivo) entonces primero colocamos los texto y el campo de la siguiente manera.
Insertando Boton de Opcin para Activo E inactivo. 22. Al igual que los otros campos este tambin tendr su nombre y su valor y esto lo realizamos desde la barra de propiedades.
Pgina 32
2012
Seleccionamos el primer Botn de Opcin y como nombre le ponemos txt_estado y en valor Activo como se ve en la siguiente figura.
Aplicando propiedades para el primer botn 23. Ahora seleccionamos el segundo Botn de Opcin y en la barra de propiedades colocamos lo siguiente.
Aplicando propiedades para el segundo botn NOTA : Cuando usamos Botn de Opcin, el nombre de los campos sern el mismo para todos, solo cambia el Valor, por ejemplo para nuestro caso el primero tubo como valor Activo y el segundo Inactivo. 24. Para finalizar la creacin del formulario para ingresar un nuevo usuario debemos usar la herramienta Botn para ingresar el botn que ejecutar el comando grabar informacin. Para esto hacemos clic en dicha herramienta.
Insertando el botn ingresar 25. Ahora seleccionamos el botn y en la barra de propiedades cambiamos la configuracin de la siguiente forma.
Pgina 33
2012
26. Una vez finalizado el proceso de creacin del formulario, procedemos a generar la rutina que permitir que la informacin ingresada en el formulario se grabe dentro de la tabla Usuario de nuestra base de datos. Para esto primero seleccionamos el botn Registrar de nuestro formulario y luego nos dirigimos a la paleta Comportamiento del Servidor/+/Insertar Registro.
Seleccionando el comportamiento Insertar registro Al hacer esto en pantalla saldr el cuadro de dialogo Insertar Registro, all debemos realizar los siguientes cambios antes de hacer clic en Aceptar.
Cuadro de dialogo Insertar Registro.

2012
Entrar valores de : Aqu seleccionamos el nomre del formulario, aunque este sale ya por defecto. Conexin : Seleccionamos nuestra conexin. Insertar tabla : Elegimos en que tabla se va a grabar la informacin. Columnas : Aqu aparecen todos los campos de la tabla usuarios, lo que debemos hacer es seleccionar el campo nombres y en la opcin Valor seleccionar el campo txt_nombres, hacer la misma operacin en todos los campos menos con el cod_usuario, por que este es un campo primario y se incrementar en forma automtica. Tras insertar, ir a : Aqu le indicamos a que pgina ir una vez hecho el proceso de insercin de registro. 27. Luego de esto hacemos clic en Aceptar y en la paleta Comportamientos del Servidor saldr el comportamiento que acabamos de insertar.
Paleta Comportamiento del Servidor con el comportamiento Insertar Registro. NOTA : Al hacer esto observaremos que toda la tabla donde se encuentran los campos quedar pintado de color celeste claro indicando que la operacin de insertar registro no ha tenido ningn problema. 28. Ahora debemos grabar el archivo ing_nuevo_registro.php y para probar si est funcionando debemos pulsar F12 desde el archivo index.php. Una vez que ingresemos con usuario y clave nos dirigimos al men SISTEMA y all ingresamos a la opcin Nuevo Usuario.
Pgina 35
2012
Ingresando un nuevo usuario del sistema. Luego de ingresar el nuevo usuario, hacemos clic en el botn Registrar y la pantalla vaca saldr nuevamente. Como podemos probar si el registro se ha ingresado con xito? 1. Salimos de administrador de contenidos, para esto debemos hacer clic en el botn CERRAR SESION y al hacer esto el control volver nuevamente a la pgina inicial para logearnos nuevamente. All debemos logearrnos nuevamente pero est vez ser con el usuario que acabamos de ingresar. Cuando hacemos clic en Ingresar, saldr la pgina principal del administrador de contenidos, el hecho de entrar, significa que est bien el proceso pero adems en la parte superior saldr el nombre del usuario.
Pgina 36
2012
2. Otra forma de averiguar es ingresando al MySql a travs del internet explorer con http://localhost, despus entrar al phpmyadmin y de all seleccionar la base de datos y examinar la tabla usuario.
Creando mdulo Listado de Usuarios.

A continuacin debemos crear un php para poder listar todos los usuarios inscritos y tambin desde all preparar los enlaces para modificar y eliminar registros. 1. Empecemos cerrando todos los php abiertos y slo debe quedar abierto el archivo index.php. 2. Ahora abrimos el archivo listado_usuario.php al hacer esto en pantalla saldr la pgina perteneciente a ese mdulo vaco y slo con su ttulo. 3. Colocamos el cursor dos lneas ms abajo del ttulo y insertamos una tabla.
Pgina 37
2012
Insertando tabla de 2 filas y 5 columnas. 4. Luego de crear la tabla en la primera columna escribimos el ttulo de los campos a mostrar, opcionalmente podemos cambiar el color de fondo de las celdas. 5. Ahora debemos realizar un juego de registros para hacer una consulta, para esto nos dirgimos a la paleta Vinculaciones/+/ Juego de Registros (Consulta).
Creando un juego de registros. 6. Al hacer esto saldr en pantalla un cuadro de dialogo donde realizaremos la configuracin del Juego de Registros de la siguiente forma.
Pgina 38
2012
Cuadro de dialogo Juego de Registros. Nombre : Colocamos el nombre del juego de registros. Conexin : Seleccionamos nuestra conexin. Tabla : Seleccionamos la tabla con el cul vamos a trabajar. Columnas : Seleccionamos todos haciendo clic en Todo. Filtro : Aun no usamos esto pues ser un listado simple. Ordenar : Seleccionamos el campo por el cual vamos a ordenar y en forma ascendente. 7. Luego de esto hacemos clic en Aceptar, en la paleta Vinculaciones observaremos el Juego de Registros que acabamos de generar.
Juego de Registro (rslistado) que acabamos de crear. 8. Ahora vamos a expandir el Juego de registro (rslistado) para poder obervar los campos de la tabla. Luego de esto arrastramos cada campo del Juego de registro a su correspondiente posicin en la tabla que tenemos en la pantalla.
Pgina 39
2012
Arrastrando los campos del Juego de Registros a las celdas correspondientes a las tablas. 9. Tambin se debe llevar el control a la ltima celda vacia y all colocamos los enlaces que invocarn a las pginas modificar y eliminar usuarios. Ver figura de arriba. 10. Esta operacin solo mostrar en el listado el primer registro de la tabla usuario, para poder ver los otros registros debemos utilizar un comportamiento llamado Repetir Regin. Para esto primero debemos seleccionar slo la segunda fila de la tabla donde se muestran los campos del juego de registros.
Seleccionando la segunda fila de la tabla donde se encuentra los campos del juego de registros. NOTA : Es muy importante que el puntero del mouse se convierta en una flecha antes de seleccionar toda la fila, caso contrario no saldr el resultado que realmente estamos esperando. 11. Luego de seleccionar la segunda fila de la tabla nos dirigimos a la paleta Comportamiento del servidor/+/Repetir regin.
Pgina 40
2012
Seleccionando el comportamiento Repetir regin. Cuando salga el cuadro de dialogo, primero seleccionamos el Juego de registros rslistado y luego activamos la opcin Todos los registros, pues esta tabla no tendr muchos registros. Por ltimo hacemos clic en Aceptar.
Configurando para mostrar todos los registros de la tabla usuarios. 12. Grabar todos los cambios que acabamos de realizar. Ctrl + S. 13. Para ver si funciona o no debemos pulsar F12 desde el archivo index.php, luego de ingresar con usuario y contrasea nos dirigimos al mdulo Listado de Usuarios.
Pgina 41
2012
Listado de personas inscritas como usuario de sistema NOTA : Cuando los datos a listar son en grandes cantidades entonces ser necesario utilizar opciones para compaginar los datos por pantallas e ir mostrando en que nmero de registro nos encontramos en estos momentos.
Creando Mdulo Modificar Datos de Usuario.

Otro mdulo re rutina en el mantenimiento de una base de datos es el que podamos modificar los datos ya existentes por una nueva informacin, pues a continuacin realizaremos exactamente este proceso. Para esto necesitamos dos php, el primero ser listado_usuario.php a partir del cual vamos a invovar al mdulo modificar. 1. En la pantalla del Dreamweaver debemos tener abierto los siguientes archivos : index.php, listado_usuario.php y modif_usuario.php. 2. Ahora llevamos el control al archivo modif_usuario.php colocamos el cursor debajo del ttulo e insertamos un nuevo formulario.
Abriendo los archivos involucrados en el archivo modificar 3. Cuando el cursor est dentro del formulario desde la barra de propiedades debemos darle el nombre al mismo.
Pgina 42
2012
Dando nombre al formuario 4. Luego de esto debemos diagramar nuestro formulario igual como se hizo en el mdulo insertar nuevo usuario. De tal forma que la finalizar se visualice de la siguiente forma :
Diagramando el formulario modificar datos de usuario No olvidar que el nombre de los campos de texto debe ser (txt_nombres, txt_apellidos, txt_email, txt_clave, y txt_estado) el ancho puede ser cualquier nmero pero el Car. Mx. debe el mismo que se defini en la base de datos. (ver mdulo ingresar nuevo usuario). 5. Una vez terminado de construir el formulario, debemos realizar un Juego de Registros para ver los datos del usuario a modificar, para esto vamos a la paleta Vinculaciones/+/Juego de Registros (Consulta).
Creando un Juego de registros (Consulta)

2012
6. Cuando salga el cuadro de dialogo Vinculaciones debemos configurar y cambiar las siguientes opciones.
Cambiando la configuracin del Juego de Registros. Nombre : Colocar el nombre del Juego de Registro. Conexin : Seleccionar la conexin a la base de datos. Tabla : Seleccionar la tabla a la cual vamos a a realizar la consulta. Columnas : Seleccionamos todas. Filtro : Seleccionamos el campo codusuario y en Parmetro URL tambin colocamos codusuario. Esta vez si colocamos la opcin filtro debido a que realizaremos una bsqueda usando como campo clave codusuario. 7. Luego de realizar est configuracin hacemos clic en Aceptar, y luego desde el panel Vinculaciones arrastramos los campos (nombres, apellidos, email, clave) hacia los campos de estrada como de ve en la figura.
Arrastrando campo del Juego de registros (rsmodificar) hacia los campos de entrada.
2012
8. Para hacer el proceso de modificacin debemos insertar un campo oculto en el cual va a volver a grabar el campo codusuario. Estando el cursor en cualquier parte de la tabla y desde la barra de Formularios hacemos clic en la herramienta Campo Oculto para insertar un campo oculto.
Insertando un Campo Oculto 9. Ahora seleccionamos el campo oculto que acabamos de insertar y desde la barra de propiedades debemos darle el nombre codusuario, luego en la opcin Valor hacemos clic en la figura del rayo y cuando salga un cuadro de dialogo Datos dinmicos hacemos clic en codusuario y Aceptar.
Dando el nombre del campo oculto y aplicando el valor del campo. NOTA : Este proceso es muy importante para que el mdulo modificar pueda funcionar sin ningn problema, si no lo hacemos correctamente el proceso de actualizar datos no funcionar.
Pgina 45
2012
10. Ahora debemos realizar el proceso de actualizacin de datos del formulario, para esto primero seleccionamos el botn Guardar, luego nos dirigimos a la paleta Comportamiento del Servidor/+/ Actualizar registro.
Seleccionando la opcin Actualizar registro. Al hacer esto saldr un cuadro de dialogo en el cual debemos realizar los siguientes cambios.
Configurando las propiedades de actualizar registro.

Pgina 46
2012
Enviar valores de : Nombre del formulario que actualizaremos. Conexin : Conexin a base de datos con el que se est trabajando. Actualizar tabla : Tabla en cual realizaremos la actualizacin. Columnas : Aqu debemos seleccionar los campos nombres, apellidos, email, clave, estado y reemplazamos desde la opcin Valor con sus respectivos valores. Tras actualizar, ir a : Indicamos a donde se dirigir el control una vez realizado la actualizacin. 11. Luego de esto hacemos clic en Aceptar y en la paleta Comportamiento del Servidor vemos el comportamiento Actualizar Registro.
Casi todo est listo para realizar el ltimo proceso del mdulo actualizar datos de usuario. 12. Primero nos dirigimos al archivo listado_usuario.php, luego seleccionamos el texto Modificar ubicado en la ltima celda de la tabla listado. En la barra de propiedades en la opcin Vinculo colocamos modif_usuario.php?codusuario=
Creando el enlace a la pgina modif_usuario.php 13. Luego nos dirigimos a la paleta Vinculaciones y desde el Juego de registros (rslistado) arrastramos el campo codusuario al vaco y fuera de la tabla.
Pgina 47
2012
14. Estando seleccionado el campo {rslistado.codusuario} ingresamos al modo cdigo del Dreamweaver. Cuando ingresemos al modo cdigo, observaremos que el cdigo php de {rslistado.codusuario}, sale seleccionado aun. Lo que debemos hacer es clic derecho sobre el bloque de cdigo y seleccionamos Cortar.
Cortando el cdigo php del campo {rslistado.codusuario}
15. Despus de cortar el cdigo php debemos volver nuevamente al modo Diseo de Dreamweaver. Luego seleccionamos nuevamente el enlace Modificar y en la barra de Propiedades, en la opcin Vinculo al final de todo lo que ya se ha colocado debemos pegar el cdigo php que acabamos de cortar.
Pgina 48
2012
modif_usuario.php?codusuario=<?php echo $row_rslistado['codusuario']; ?> Este es el enlace completo del texto Modificar Debemos asegurarnos que el nuevo enlace se vea como se muestra en la parte superior de este texto, slo eso nos asegurar el buen funcionamiento del enlace. 16. Para terminar debemos hacer clic en cualquier parte de la pgina web, tambin debemos grabar los ltimos cambios realizados en el archivo listado_usuario.php. 17. Ahora solo queda probar si lo elaborado esta todo bien, para esto primero nos aseguramos que los tres archivos involucrados (index.php, listado_usuario.php, modif_usuario.php) estn debidamente grabados. Luego llevamos el control al index.php y desde all pulsamos F12 para ingresar a la pgina principal del administrador de contenidos. 18. Ya estando en el administrandor procedemos a ingresar un Usuario y su respectiva clave para poder acceder a la pgina principal del administrador de contenidos. Desde all nos dirigimos a la opcin SISTEMA y desde dentro de este hacemos clic en Listado de Usuario.
Enlace completo del texto modificar.
19. Cuando el listado de usuario sale en la pantalla podemos editar o modificar a cualquiera de los usuario, por ejemplo editaremos los datos al cuarto usuario, por lo tanto hacemos clic en el enlace Modificar de dicho usuario. En la pantalla debera salir datos como este :
Pgina 49
2012
Consulta de datos de un usuario. Podemos editar o modificar cualquier dato de este usuario, por ejemplo modificaremos el Apellidos por este nuevo CHAVEZ CONTRERAS, modificamos tambin el email por chavez@gmail.com. 20. Luego de realizar estos cambios procedemos a guardar los nuevos datos, para esto simplemente hacemos clic en el botn Grabar cambios. Al hacer esto el control volver nuevamente al listado de usuarios y all observaremos el cambio realizado.
Listado de usuarios con datos actualizados.
Pgina 50
2012
Creando Mdulo Eliminar Usuario.

Al igual que el modulo modificar usuario, este mdulo al cual llamaremos eliminar usuario, es muy indispensable debido a que en determinados momentos se presenta la necesidad de poder borrar uno o ms registros de la base de datos. Para completar este mdulo necesitaremos dos php, el primero ser listado_usuario.php a partir del cual vamos a invocar al mdulo eliminar. 1. En la pantalla de Dreamweaver debemos tener abierto los siguientes archivos index.php, listado_usuario.php y eliminar_usuario.php. 2. Estando en el archivo eliminar_usuario.php colocamos el cursor debajo del ttulo, luego de esto en la barra de herramientas Formularios insertamos un nuevo formulario. 3. Desde la barra de herramientas debemos indicar el nombre del formulario que acabamos de insertar.
Colocando el nombre del formulario 4. Luego de esto debemos diagramar el contenido de este mdulo, para esto slo necesitaremos una tabla de 6 filas por 2 columnas con un ancho de 757 pixeles, en la parte izquierda colocamos las etiquetas o nombre de los campos a visualizar. No ser necesario insertar ningn Campo de Texto, por el contrario slo un botn Eliminar Usuario para completar este proceso.
Diagramando el contenido del formulario solo con tablas y el botn eliminar. NOTA : Dentro de este formulario no ser necesario usar campos de texto como si necesitaba el mdulo modificar, esto se debe a que en este mdulo no vamos a modificar ningn dato, solo visualizaremos e Eliminaremos al usuario que se ve en pantalla. 5. Ahora debemos generar un juego de registros para consultar un determinado usuario en pantalla. Para esto nos dirigimos a la paleta Vinculaciones/+/Juego de registros(Consulta).
2012
6. Al hacer esto saldr un cuadro de dialogo, en el cual realizaremos la siguiente configuracin.
Cuadro de dialogo juego de registros. Nombre : Colocamos el nombre del juego de registros. Conexin : Seleccionamos la conexin a la base de datos con el cul se est trabajando. Tabla : Seleccionamos la tabla en cul se realizar la cinsulta. Columnas : Seleccionamos todo. Filtro : Aqu colocaremos un filtro por codusuario y Parmetro URL
Pgina 52
2012
7. Luego de esto hacemos clic en Aceptar, apenas veamos el Juego de registros en la paleta Vinculaciones, lo expandimos para poder apreciar los campos de la tabla en el lugar que corresponde.
Arrastrando los campos del Juego de registros (rseliminar) a la tabla. 8. Hasta aqu hemos creado la consulta de un determinado usuario al cual vamos a eliminar de la base de datos. Ahora tenemos que realizar el proceso de eliminar un usuario de la base de datos. Al igual que en el mdulo modificar debemos insertar un campo oculto dentro de la tabla. Colocaremos el cursor en cualquier parte de la tabla y hacemos clic en la herramienta Campo Oculto que se encuentra ubicado en la barra de herramientas Fformulario. Luego de esto seleccionamos el campo y desde la barra de propiedades vamos a colocarle su nombre y aplicarle su valor.
Nombrando al campo oculto y aplicando un valor

Pgina 53
2012
El nombre del campo oculto ser codusuario igual como se defini en la base de datos, luego para aplicarle su valor hacemos clic en el icono ubicado al lado derecho (el cual tiene la figura de un rayo), cuando salga el cuadro de dialogo Datos Dinmicos, primero expandimos el Juego de registros (rseliminar) y luego seleccionamos el campo codusuario y por ltimo hacemos clic en Aceptar para terminar este proceso. 9. Con el campo oculto que acabamos de generar ya estamos listos para aplicar el comportamiento Eliminar registros. Nos dirigimos a la paleta Comportamiento del Servidor/+/Eliminar registro
Seleccionando el comportamiento Eliminar registro Al seleccionar la opcin Eliminar registro, en pantalla saldr el cuadro de dilogo para poder configurar el mdulo de la siguiente forma.
Configurando el comportamiento Eliminar registro

Pgina 54
2012
Comprobar primero si hay una variable definida : Lo dejamos con la misma opcin que aparece. Conexin : Seleccionamos la conexin a la base de datos que se est usando. Tabla : Seleccionamos la tabla en el cual vamos a eliminar el registro. Columna de clave principal : Seleccionamos codusuario. Valor de clave principal : Seleccionamos la opcin Variable de formulario y codusuario. Despues de borra, ir a : Le indicamos a donde ir el control una vez eliminado el usuario. 10. Luego de configurar todo segn lo indicado, hacemos clic en Aceptar, en la paleta Comportamiento del servidor saldr el comportamiento que acabamos de generar.
Comportamiento Eliminar registro dentro de la paleta Comportamiento del servidor 11. Para que el mdulo funcione sin ningn problema falta realizar lo ms importante, este al igual que modificar usuario deben ser invocados desde el archivo listado_usuario.php, por lo tanto primero nos dirigimos a dicho archivo.
Creando enlace a la etiqueta Eliminar
Pgina 55
2012
NOTA : El enlace o Vinculo para esta opcin es exactamente igual a la opcin modificar con la nica diferencia que cambia slo en el nombre del archivo que invocar. Una buena tcnica podra resultar primero copiar todo el enlace de la opcin modificar y luego pegarlo para eliminar y all realizar slo el cambio necesario.
Vinculo completo del texto eliminar. eliminar_usuario.php?codusuario=<?php echo $row_rslistado['codusuario']; ?> 12. Luego de esto procedemos a grabar todos los php que tenemos en pantalla y desde el index.php pulsamos F12 para ejecutar toda la aplicacin. Ingresamos al administrador de contenidos con usuario y clave existente, luego de esto nos dirigimos a la opcin SISTEMA y all hacemos clic en la opcin Listado de Usuarios.
Haciendo clic en la opcin Eliminar del tercer usuario Al hacer esto saldr la pantalla donde podremos visualizar los datos completos del usuario a eliminar.
Marcando datos del usuario a eliminar antes de completar el proceso.
Pgina 56
2012
Bueno, para probar si funciona el proceso de eliminar tenemos que hacer clic en el botn Eliminar Usuario, el sistema realizar el proceso y luego retornar al listado, solo que esta vez tendremos un usuario menos.
Nuevo listado despus de eliminar un usuario.
Administrando las opciones del men PRODUCTOS I

Una vez terminado el desarrollo de las 4 primeras opciones el men SISTEMA procederemos a desarrollar todas las opciones del men PRODUCTOS, aqu tendremos que desarrollar las opciones para la categora de productos y para los productos en s. Los mdulos a desarrollar sern los siguientes. Categora Nueva Categora Listado categora Modificar Categora Eliminar Categora Productos Nuevo Producto Liatado Productos Modificar Productos Eliminar Productos Pedidos Productos
ing_nueva_categora.php listado_categora.php modificar_categora.php eliminar_categora.php nuevo_producto.php listado_productyo.php modificar_producto.php eliminar_producto.php listado_pedidos.php
Aunque la opcin Pedido Productos aun no vamos a desarrollarlo puesto esto comenzar a funcionar cuando estemos desarrollando el Frontoffice, lo colocamos como parte de lo que se va a desarrollar.
Desarrollando los Mdulos de la Opcin Categora.

Al iniciar todo este proceso de crear un catlogo con pedidos en lnea creamos una tabla categoras dentro de nuestra base de datos, tambin ingresamos las siguientes categoras dentro de dicha tabla:
Pgina 57

Diseño Web IV Upla

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Diseño Web IV Upla

Cargado por

Copyright:

Formatos disponibles

UNIVERSIDAD PERUANA LOS ANDES

Creacin de la Carpeta Raz Local del Sitio y sus Sub Carpetas

Diseo Web IV Ing. Carlos Almidn Ortiz

UNIVERSIDAD PERUANA LOS ANDES

Creacin de la Base de Datos y sus Respectivas Tablas

Acerca de la tablas que usar nuestra Base de Datos

UNIVERSIDAD PERUANA LOS ANDES

Diseo Web IV Ing. Carlos Almidn Ortiz

UNIVERSIDAD PERUANA LOS ANDES

UNIVERSIDAD PERUANA LOS ANDES

Campo codcategoria nom_categoria estado

ltima actualizacin 14-09-2009 a las 18:15:52

UNIVERSIDAD PERUANA LOS ANDES

UNIVERSIDAD PERUANA LOS ANDES

Diseo Web IV Ing. Carlos Almidn Ortiz

UNIVERSIDAD PERUANA LOS ANDES

Campo codnoticias titulo sumilla cuerpo fecha_ing fotochica fotogrande estado

Tipo int(11) varchar(250) varchar(250) text date varchar(50) varchar(50) char(1)

Nulo No S S S S S S S NULL NULL NULL NULL NULL NULL NULL

UNIVERSIDAD PERUANA LOS ANDES

UNIVERSIDAD PERUANA LOS ANDES

Campo codorden codcliente codproducto cantidad

Tipo varchar(50) int(11) int(11) int(11)

ndice 1,024 Bytes Total 1,024 Bytes

Campo codorden codproducto precio cantidad

Tipo varchar(50) int(11) double int(11)

UNIVERSIDAD PERUANA LOS ANDES

ltima actualizacin 14-09-2009 a las 20:25:09

Diseo Web IV Ing. Carlos Almidn Ortiz

UNIVERSIDAD PERUANA LOS ANDES

INGRESANDO REGISTROS DENTRO DE UNA TABLA

Registros de la tabla usuarios

Registros de la tabla categorias

Diseo Web IV Ing. Carlos Almidn Ortiz

UNIVERSIDAD PERUANA LOS ANDES

Registros de la tabla productos

Top con abertura 1 en la espalda

Este Top produc 20091 transparen to est 06-17 te finame nte

Diseo Web IV Ing. Carlos Almidn Ortiz

UNIVERSIDAD PERUANA LOS ANDES

Pantalon 2 estilo sastre

Panlan de 2 vestir juvenil

Pantalon Jean 2 votapie ancho

Diseo Web IV Ing. Carlos Almidn Ortiz

UNIVERSIDAD PERUANA LOS ANDES

Registros de la tabla clientes

Carde INGSO nas FT Alarc S.R.L on

Jr. Las Reta 20060 mas 4587 125 Pio Pata

3642 rcardenas@ho 123 Obstat 198525 58 tmail.com 456 riz 09-19

Diseo Web IV Ing. Carlos Almidn Ortiz

UNIVERSIDAD PERUANA LOS ANDES

Registros de la tabla noticias

Registros de la tabla contactenos

52321 mercedes@hotm F 4 ail.com

Sobre los registros de las tablas carrito, pedidos y pedidodetalle.

UNIVERSIDAD PERUANA LOS ANDES

Iniciando el Desarrollo con el Dreamweaver CS5

Diseo Web IV Ing. Carlos Almidn Ortiz

UNIVERSIDAD PERUANA LOS ANDES

Diseo Web IV Ing. Carlos Almidn Ortiz

UNIVERSIDAD PERUANA LOS ANDES

Diseo Web IV Ing. Carlos Almidn Ortiz

UNIVERSIDAD PERUANA LOS ANDES