introducción al desarrollo de aplicaciones web
TRANSCRIPT
![Page 1: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/1.jpg)
LOGO
Desarrollo Aplicación Web Tienda online en PHP con Dreamweaver
>> Ing. Rafael Edwin Gordillo Flores
![Page 2: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/2.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Herramientas que se utilizara
![Page 3: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/3.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Contenido del Proyecto
![Page 4: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/4.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Abrimos la conexión para después crear la Base de Datos
![Page 5: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/5.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Creamos una Base de Datos
![Page 6: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/6.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Creamos las Tablas para gestionar la tienda, empezaremos con 3 tablas: Usuarios, Productos y Categorías
![Page 7: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/7.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Empezamos con la tabla usuario con sus respectivos campos
![Page 8: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/8.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Empezamos con la tabla productos con sus respectivos campos
![Page 9: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/9.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Empezamos con la tabla categoría con sus respectivos campos
![Page 10: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/10.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Revisando las relaciones de las tablas
![Page 11: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/11.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Empezaremos a crear la Administración de nuestra Web. • Creamos nuestra carpeta zapatos dentro del servidor virtual
Wampserver.
![Page 12: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/12.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Empezaremos a crear la Administración de nuestra Web. • Configuraremos nuestro sitio web en Dreamweaver.
![Page 13: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/13.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Empezaremos a crear la Administración de nuestra Web. • Configuraremos nuestro sitio web en Dreamweaver.
![Page 14: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/14.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Empezaremos a crear la Administración de nuestra Web. • Configuraremos nuestro sitio web en Dreamweaver. • Crearemos carpetas para organizar nuestra web
![Page 15: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/15.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Creamos una plantilla hoja base de nuestro sitio web.
![Page 16: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/16.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Creamos una plantilla hoja base de nuestro sitio web. • Nos pedirá la carpeta para grabar el estilo, crearemos una carpeta
estilos.
![Page 17: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/17.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Creara la siguiente plantilla muy bien estilizada.
![Page 18: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/18.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Guardaremos nuestra plantilla, después modificaremos la comunicación con la base de datos para validar los caracteres en español.
![Page 19: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/19.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Eliminaremos elementos de la plantilla que no utilizaremos. • Logo • Las listas
![Page 20: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/20.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Eliminaremos elementos de la plantilla que no utilizaremos. • El texto que se encuentra en el menu Se añadirá un include que mas adelante se creara.
![Page 21: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/21.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Crearemos el archivo cabeceraadmin.php.
![Page 22: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/22.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Modificaremos el footer y eliminaremos el texto de contenido
![Page 23: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/23.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Crearemos las región editable.
![Page 24: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/24.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Crearemos nuestra primera página index de administración.
![Page 25: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/25.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Empezamos a darle diseño.
![Page 26: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/26.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Visualizamos en el navegador. • Debemos corregir los errores.
![Page 27: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/27.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Corrigiendo los errores en la plantilla BaseAdmin.
![Page 28: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/28.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Visualizamos en el navegador. • Sin errores.
![Page 29: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/29.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Crearemos la pagina para visualizar Productos. • Nos basaremos en index.php ctrl+c después ctrl+v.
![Page 30: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/30.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Crearemos la conexión a la Base de Datos.
![Page 31: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/31.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Crearemos un Juego de Registros.
![Page 32: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/32.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Insertaremos una tabla 2x3
![Page 33: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/33.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Ingresamos las cabeceras, los campos correspondientes de la tabla Productos y las acciones Editar - Eliminar.
![Page 34: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/34.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Repetir los registros por fila, cada 10 registros, elegimos la fila donde esta los campos y después elegimos comportamientos Repetir región
![Page 35: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/35.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Añadiremos un link Añadir Producto
![Page 36: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/36.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Copiar y pegar en base a index.php un nuevo archivo y creamos la pagina productos_nuevos.php
![Page 37: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/37.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Utilizaremos el asistente de Dreamweaver para añadir un producto.
![Page 38: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/38.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Utilizaremos el asistente de Dreamweaver para añadir un producto.
![Page 39: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/39.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Nos generara un formulario de entrada de datos como se muestra
![Page 40: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/40.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Crearemos un Juego de Registros de Consulta de Categorías para obtener una lista de categorías.
![Page 41: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/41.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Quitamos el campo intCategoria e insertamos formulario Lista/Menú, aceptamos por defecto.
![Page 42: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/42.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Rellenamos los valores de la categoría dinámicamente
![Page 43: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/43.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Llamar el campo como se llamaba antes intCategoria
![Page 44: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/44.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Modificaremos el archivo cabeceraadmin.php, incrementaremos un link categorias_lista.php.
![Page 45: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/45.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Crearemos nuevo archivo categorias_lista.php
![Page 46: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/46.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Hacemos una consulta a la BD para extraer las categorías – Juego de Registros..
![Page 47: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/47.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Crearemos una tabla 2X2 en el archivo categorias_lista.php, insertamos el campo strDescripcion y creamos una Repetir Región
![Page 48: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/48.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Crearemos un link a Añadir una Categoría al archivo categorias_nuevos.php, creamos la pagina categorias_nuevos.php y lo modificamos.
![Page 49: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/49.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Crearemos una Inserción de Registro con el asistente
![Page 50: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/50.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Crearemos una Inserción de Registro con el asistente
![Page 51: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/51.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Crearemos una Inserción de Registro con el asistente
![Page 52: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/52.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Añadimos 3 categorías • Botas • Zapatillas • Sandalias
![Page 53: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/53.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Añadimos 3 categorías • Botas • Zapatillas • Sandalias
![Page 54: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/54.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Crearemos la Edición de Categorías, creamos link a Editar con la página categorias_editar.php
![Page 55: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/55.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Crearemos la Edición de Categorías, indicaremos que categoría deseamos editar crearemos un parámetro
![Page 56: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/56.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Crearemos la Edición de Categorías, creamos la pagina categorias_editar.php, lo primero que aremos es recuperar el valor que queremos editar, crearemos una consulta(Juego de Registros) y pasamos un parámetro por GET.
![Page 57: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/57.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Crearemos la Edición de Categorías, creamos la pagina categorias_editar.php, lo primero que aremos es recuperar el valor que queremos editar, crearemos una consulta(Juego de Registros) y pasamos un parámetro por GET.
![Page 58: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/58.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Crearemos la Edición de Categorías, ahora actualizaremos registro mediante el asistente de Dreamweaver.
![Page 59: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/59.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Crearemos la Edición de Categorías, ahora actualizaremos registro mediante el asistente de Dreamweaver.
![Page 60: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/60.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Crearemos la Edición de Categorías, ahora actualizaremos registro mediante el asistente de Dreamweaver.
![Page 61: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/61.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Modificaremos la tabla tblproducto con Navicat para añadir un campo para su imagen.
![Page 62: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/62.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Modificaremos el archivo productos_nuevos.php para poder ingresar una imagen, insertaremos una fila con un campo de texto.
![Page 63: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/63.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Modificaremos el nombre del Campo de texto.
![Page 64: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/64.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Modificaremos el código de Insertar un registro en el archivo productos_nuevos.php.
![Page 65: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/65.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
La imagen no se guardara en la BD, se guardara en el disco del servidor y en la BD solo se guardara el nombre de la imagen. Crearemos una nueva carpeta, después insertaremos un botón Subir Imagen.
![Page 66: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/66.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Insertaremos JavaScript en el código del botón Subir Imagen.
![Page 67: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/67.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Crearemos el JavaScript subirimagen(), después crearemos el archivo gestionimagen.php.
![Page 68: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/68.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Probamos la pagina productos_nuevos.php con el botón Subir Imagen.
![Page 69: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/69.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Crearemos el código de la pagina gestionimagen.php, insertaremos un formulario .
![Page 70: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/70.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Insertaremos un Campo de texto, de tipo Archivo
![Page 71: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/71.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Ahora Insertaremos un Botón Subir Imagen, después un campo oculto de nombre enviado.
![Page 72: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/72.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Ejecutaremos la pagina para saber en donde estamos.
![Page 73: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/73.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Ingresaremos el código PHP en el archivo gestionimagen.php para que funcione.
![Page 74: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/74.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Ingresaremos un Producto para probar.
![Page 75: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/75.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Después de subir la imagen, obtenemos el nombre de la imagen y se grabara la imagen en la carpeta documentosproductos
![Page 76: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/76.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Crearemos el link Editar de la pagina productos_lista.php, crearemos pagina productos_editar.php, después direccionamos el link Editar.
![Page 77: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/77.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Enviaremos un parámetro que es la identificación del producto que deseamos modificar.
![Page 78: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/78.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Modificaremos la pagina productos_editar.php, crearemos un Juego de registros
![Page 79: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/79.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Crearemos nuevo Juego de registros, ConsultaCategorias
![Page 80: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/80.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Insertaremos Asistente de formulario de actualización de registros en la pagina productos_editar.php.
![Page 81: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/81.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Dreamweaver genero el formulario.
![Page 82: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/82.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Dreamweaver genero el formulario, añadiremos el botón Subir Imagen que tiene el archivo productos_nuevos.php.
![Page 83: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/83.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
añadiremos el script que tiene el archivo productos_nuevos.php.
![Page 84: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/84.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Crearemos el link de Eliminar en base a index.php y lo llamaremos productos_eliminar.php
![Page 85: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/85.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Nos ubicamos en la página productos_lista.php y creamos el link a Eliminar con productos_eliminar.php.
![Page 86: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/86.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Le enviamos el mismo parámetros que enviemos en Editar.
![Page 87: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/87.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
En la página productos_eliminar.php insertamos con el asistente Eliminar registro.
![Page 88: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/88.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
En la página productos_eliminar.php insertamos con el asistente Eliminar registro.
![Page 89: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/89.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Empezamos a mejorar el diseño con Hojas de Estilo css, Abrimos el Template BaseAdmin.dwt.php y añadimos una cabecera e insertaremos un logo.
![Page 90: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/90.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Después actualizaremos para todas las páginas
![Page 91: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/91.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Ajustaremos el tamaño de letra General, seguimos en el twoColFixLtHdr.css y modificamos el body.
![Page 92: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/92.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Seguimos mejorando el diseño, abrimos una pagina del proyectó y presionamos F12 en IE para determinar el diseño que código tiene.
![Page 93: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/93.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Seguimos mejorando el diseño, abrimos una pagina del proyectó y presionamos F12 en IE para determinar el diseño que código tiene.
![Page 94: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/94.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Modificaremos entonces el estilo twoColFixLtHdr.css en el código .header
![Page 95: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/95.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Modificaremos entonces el estilo twoColFixLtHdr.css ahora en el fondo de la pagina en body.
![Page 96: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/96.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Quedara de la siguiente manera.
![Page 97: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/97.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Crearemos una nueva clase.
![Page 98: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/98.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Modificaremos la pagina productos_lista.php y agregamos a la tabla, fila la clase que creamos.
![Page 99: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/99.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Quedara de la siguiente manera, eliminaremos el color naranja.
![Page 100: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/100.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Quitaremos el color naranja de la tabla, como se muestra.
![Page 101: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/101.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Introduciremos un efecto de color cuando el mouse esta encima del objeto que marquemos de productos_lista.php, crearemos un nuevo estilo.
![Page 102: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/102.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
En la pagina productos_nuevos.php validaremos los campos para no ingresar productos erróneos.
![Page 103: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/103.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Utilizaremos Spry.
![Page 104: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/104.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Elegimos el campo de texto y después el Spry que valida
![Page 105: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/105.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Se creara una carpeta SpryAssets, donde contendrá 2 archivos el estilo y la programación correspondiente de validación.
![Page 106: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/106.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Ahora cuando queremos insertar registros sin contenido nos saldrá avisos como se muestra.
![Page 107: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/107.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Quitaremos el borde del aviso de validación que nos sale, comentaremos el código.
![Page 108: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/108.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Crearemos el link de Lista Usuarios en el Menú del archivo cabeceraadmin.php.
![Page 109: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/109.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Crearemos el link Usuarios_lista.php en base index.php.
![Page 110: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/110.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Ahora insertaremos un Juego de paginas Masestro/Detalle en Usuarios_lista.php, después crearemos un juego de registros.
![Page 111: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/111.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Crearemos un juego de registros después seguiremos con la creación de Juego de paginas Masestro/Detalle.
![Page 112: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/112.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
El Juego de paginas Masestro/Detalle será:
![Page 113: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/113.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Creara dos paginas, usuarios_lista.php y usuarios_datos.php(Eliminara), después lo modelaremos con los estilos creados para una mejor vista.
![Page 114: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/114.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Aplicando los estilos creados para una mejor vista.
![Page 115: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/115.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Insertaríamos una columna.
![Page 116: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/116.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Abriremos la Base de Datos con Navicat, e insertaremos datos de forma manual. Añadir, Editar y Eliminar será creado por el Estudiante.
![Page 117: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/117.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Creación de la pantalla principal, crearemos una plantilla en blanco.
![Page 118: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/118.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Creación del archivo index.php en base a la plantilla Principal.
![Page 119: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/119.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Diseñamos la plantilla Principal.
![Page 120: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/120.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Modificaremos el estilo principal.css.
![Page 121: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/121.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Crearemos Una Capa Nueva.
![Page 122: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/122.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Definiremos el subcontenedor, en la hoja de estilo principal.css .
![Page 123: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/123.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Modificaremos la cabecera del template principal.dwt.php, le insertaremos una imagen(fondocabecera.png ) al estilo principal.css.
![Page 124: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/124.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Ahora crearemos el css para headerinterior dentro de la hoja de estilo principal.css
![Page 125: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/125.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Insertaremos una imagen dentro de la nueva cabedera.
![Page 126: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/126.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Reduciremos las cabeceras de 180px a 100px, en la hoja estilo principal.css
![Page 127: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/127.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Crearemos un nuevo archivo catalogo.php dentro de la carpeta includes, después crearemos un juego de registros catalogo
![Page 128: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/128.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Sacamos por pantalla la descripción, además se debe de repetir todos los registros, limpiaremos todo codigo html innecesario.
![Page 129: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/129.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Incluiremos el include catologo.php en la plantilla principal.dwt.php, también modificaremos el archivo catologo.php.
![Page 130: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/130.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Incluiremos una etiqueta <br> en el archivo catologo.php para poder visualizar mejor el menú.
![Page 131: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/131.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Crearemos un archivo alta_usuario.php para que el usuario se de alta en base a index.php, después insertamos 2 regiones editables a la plantilla principal.dwt.php
![Page 132: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/132.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Modificaremos la tabla usuarios abrimos Navicat.
![Page 133: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/133.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Ahora editamos alta_usuario.php, crearemos el formulario de alta
![Page 134: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/134.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
El formulario de inserción de registro será:
![Page 135: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/135.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Quedara como se muestra, haremos que los campos sean obligatorios de ingresar datos:
![Page 136: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/136.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Crearemos la pagina alta_ok.php en base a index.php después lo modificaremos.
![Page 137: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/137.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Validaremos el email, no debería estar repetido crearemos un archivo alta_emailrepetido.php en base a index.php y lo modificaremos.
![Page 138: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/138.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Ahora en la pagina alta_usuario.php validaremos para no repetir el email de un usuario que ya se encuentra en la BD.
![Page 139: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/139.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
![Page 140: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/140.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Ahora crearemos un link a alta_usuario.php añadiremos un link en catalogo.php
![Page 141: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/141.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Modificaremos el link creado que se direccione a la raíz.
![Page 142: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/142.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Ahora crearemos el acceso del Usuario, crearemos una nueva pagina en base a index.php y le damos formato.
![Page 143: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/143.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Ahora insertaremos un campo de texto en acceso.php
![Page 144: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/144.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
insertaremos un campo de texto mas en acceso.php y pondremos nombre a los campos de texto.
![Page 145: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/145.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
insertaremos un botón después un comportamiento del servidor – Autentificación de usuarios y luego conectar usuario.
![Page 146: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/146.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Pegaremos el código session_start() de acceso.php en la pagina de conexionzapatos.php;
![Page 147: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/147.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Crearemos las páginas de acceso_ok.php y acceso_error.php en base a index.php
![Page 148: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/148.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Crearemos el link a Inténtalo de nuevo
![Page 149: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/149.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Insertaremos el link Acceder en catalogo.php
![Page 150: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/150.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Validaremos en acceso.php el Email y la Contraseña en Spry
![Page 151: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/151.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Insertaremos el nombre del usuario de acceso.php en catalogo.php, pero al ingresar de nuevo a la página inicial nos sale error.
![Page 152: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/152.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Insertaremos en nombre del usuario de acceso.php en catalogo.php, pero al ingresar de nuevo a la página inicial nos sale error.
![Page 153: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/153.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Corregiremos validando nombre de la sesión.
![Page 154: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/154.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Probaremos y ahora eliminaremos el link Darme de alta por que no es necesario ponerlo si ya estamos de alta, cambiaremos el codigo.
![Page 155: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/155.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Ahora cambiaremos el correo electrónico por el nombre del usuario, crearemos un archivo de pruebas.php después lo borraremos, crearemos una consulta en base del Id del usuario y obtendremos su nombre.
![Page 156: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/156.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Ahora cambiaremos el correo electrónico por el nombre del usuario, crearemos un archivo de pruebas.php después lo borraremos, crearemos una consulta en base del Id del usuario y obtendremos su nombre.
![Page 157: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/157.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Ahora sacamos el srtnombre del juego de registros a la pagina prueba.php
![Page 158: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/158.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Ahora crearemos un archivo funciones.php dentro de la carpeta includes y borramos su contenido.
![Page 159: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/159.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Copiamos todo el codigo php del archivo prueba.php a funciones.php, empezamos con la consulta.
![Page 160: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/160.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Quedara como se muestra.
![Page 161: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/161.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Después sacaremos la instrucción que nos saca el nombre por pantalla de prueba.php y lo pegaremos en funciones.php
![Page 162: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/162.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Por ultimo la copiamos la instrucción que limpia la memoria de la consulta, de prueba.php a funcion.php y después cerramos prueba.php con cambios.
![Page 163: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/163.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Ahora crearemos una función de php y modificaremos el codigo como se muestra.
![Page 164: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/164.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Insertaremos dos variable globales que utilizaremos en toda la función, guardamos el archivo funcion.php y después llamaremos a nuestra función creada, desde el archivo catalogo.php.
![Page 165: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/165.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Buscamos el Id de la persona que acaba ingresar al sistema en acceso.php, añadiremos a la consulta un campo mas que es idUsuario
![Page 166: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/166.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Después añadiremos una sesión mas como se muestra en acceso.php
![Page 167: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/167.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Ahora modificaremos catalogo.php para que aparezca el Nombre del usuario, llamaremos a la función que obtiene el nombre del usuario
![Page 168: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/168.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Insertaremos nuestra función creada en nuestra pagina mediante un include en el archivo de conexionzapataos.php
![Page 169: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/169.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Probamos nos generara un error el cual se debe a que se acabo la sesión cerramos el navegador y lo abrimos de nuevo.
![Page 170: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/170.jpg)
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Despues tendremos la pagina sin errores.
![Page 171: Introducción al desarrollo de aplicaciones Web](https://reader034.vdocuments.site/reader034/viewer/2022051208/544a8b0caf7959b0438b49c3/html5/thumbnails/171.jpg)
LOGO Ing. Rafael Edwin Gordillo Flores