Introducción al desarrollo de aplicaciones Web

Desarrollo Aplicación Web Tienda online en PHP con Dreamweaver

>> Ing. Rafael Edwin Gordillo Flores

Add your company slogan

LOGO Ing. Rafael Edwin Gordillo Flores

Tienda Online con Dreamweaver

Herramientas que se utilizara

Contenido del Proyecto

Abrimos la conexión para después crear la Base de Datos

Creamos una Base de Datos

Creamos las Tablas para gestionar la tienda, empezaremos con 3 tablas: Usuarios, Productos y Categorías

Empezamos con la tabla usuario con sus respectivos campos

Empezamos con la tabla productos con sus respectivos campos

Empezamos con la tabla categoría con sus respectivos campos

Revisando las relaciones de las tablas

Empezaremos a crear la Administración de nuestra Web. • Creamos nuestra carpeta zapatos dentro del servidor virtual

Wampserver.

Empezaremos a crear la Administración de nuestra Web. • Configuraremos nuestro sitio web en Dreamweaver.

Empezaremos a crear la Administración de nuestra Web. • Configuraremos nuestro sitio web en Dreamweaver. • Crearemos carpetas para organizar nuestra web

Creamos una plantilla hoja base de nuestro sitio web.

Creamos una plantilla hoja base de nuestro sitio web. • Nos pedirá la carpeta para grabar el estilo, crearemos una carpeta

estilos.

Creara la siguiente plantilla muy bien estilizada.

Guardaremos nuestra plantilla, después modificaremos la comunicación con la base de datos para validar los caracteres en español.

Eliminaremos elementos de la plantilla que no utilizaremos. • Logo • Las listas

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.

Crearemos el archivo cabeceraadmin.php.

Modificaremos el footer y eliminaremos el texto de contenido

Crearemos las región editable.

Crearemos nuestra primera página index de administración.

Empezamos a darle diseño.

Visualizamos en el navegador. • Debemos corregir los errores.

Corrigiendo los errores en la plantilla BaseAdmin.

Visualizamos en el navegador. • Sin errores.

Crearemos la pagina para visualizar Productos. • Nos basaremos en index.php ctrl+c después ctrl+v.

Crearemos la conexión a la Base de Datos.

Crearemos un Juego de Registros.

Insertaremos una tabla 2x3

Ingresamos las cabeceras, los campos correspondientes de la tabla Productos y las acciones Editar - Eliminar.

Repetir los registros por fila, cada 10 registros, elegimos la fila donde esta los campos y después elegimos comportamientos Repetir región

Añadiremos un link Añadir Producto

Copiar y pegar en base a index.php un nuevo archivo y creamos la pagina productos_nuevos.php

Utilizaremos el asistente de Dreamweaver para añadir un producto.

Nos generara un formulario de entrada de datos como se muestra

Crearemos un Juego de Registros de Consulta de Categorías para obtener una lista de categorías.

Quitamos el campo intCategoria e insertamos formulario Lista/Menú, aceptamos por defecto.

Rellenamos los valores de la categoría dinámicamente

Llamar el campo como se llamaba antes intCategoria

Modificaremos el archivo cabeceraadmin.php, incrementaremos un link categorias_lista.php.

Crearemos nuevo archivo categorias_lista.php

Hacemos una consulta a la BD para extraer las categorías – Juego de Registros..

Crearemos una tabla 2X2 en el archivo categorias_lista.php, insertamos el campo strDescripcion y creamos una Repetir Región

Crearemos un link a Añadir una Categoría al archivo categorias_nuevos.php, creamos la pagina categorias_nuevos.php y lo modificamos.

Crearemos una Inserción de Registro con el asistente

Añadimos 3 categorías • Botas • Zapatillas • Sandalias

Crearemos la Edición de Categorías, creamos link a Editar con la página categorias_editar.php

Crearemos la Edición de Categorías, indicaremos que categoría deseamos editar crearemos un parámetro

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.

Crearemos la Edición de Categorías, ahora actualizaremos registro mediante el asistente de Dreamweaver.

Modificaremos la tabla tblproducto con Navicat para añadir un campo para su imagen.

Modificaremos el archivo productos_nuevos.php para poder ingresar una imagen, insertaremos una fila con un campo de texto.

Modificaremos el nombre del Campo de texto.

Modificaremos el código de Insertar un registro en el archivo productos_nuevos.php.

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.

Insertaremos JavaScript en el código del botón Subir Imagen.

Crearemos el JavaScript subirimagen(), después crearemos el archivo gestionimagen.php.

Probamos la pagina productos_nuevos.php con el botón Subir Imagen.

Crearemos el código de la pagina gestionimagen.php, insertaremos un formulario .

Insertaremos un Campo de texto, de tipo Archivo

Ahora Insertaremos un Botón Subir Imagen, después un campo oculto de nombre enviado.

Ejecutaremos la pagina para saber en donde estamos.

Ingresaremos el código PHP en el archivo gestionimagen.php para que funcione.

Ingresaremos un Producto para probar.

Después de subir la imagen, obtenemos el nombre de la imagen y se grabara la imagen en la carpeta documentosproductos

Crearemos el link Editar de la pagina productos_lista.php, crearemos pagina productos_editar.php, después direccionamos el link Editar.

Enviaremos un parámetro que es la identificación del producto que deseamos modificar.

Modificaremos la pagina productos_editar.php, crearemos un Juego de registros

Crearemos nuevo Juego de registros, ConsultaCategorias

Insertaremos Asistente de formulario de actualización de registros en la pagina productos_editar.php.

Dreamweaver genero el formulario.

Dreamweaver genero el formulario, añadiremos el botón Subir Imagen que tiene el archivo productos_nuevos.php.

añadiremos el script que tiene el archivo productos_nuevos.php.

Crearemos el link de Eliminar en base a index.php y lo llamaremos productos_eliminar.php

Nos ubicamos en la página productos_lista.php y creamos el link a Eliminar con productos_eliminar.php.

Le enviamos el mismo parámetros que enviemos en Editar.

En la página productos_eliminar.php insertamos con el asistente Eliminar registro.

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.

Después actualizaremos para todas las páginas

Ajustaremos el tamaño de letra General, seguimos en el twoColFixLtHdr.css y modificamos el body.

Seguimos mejorando el diseño, abrimos una pagina del proyectó y presionamos F12 en IE para determinar el diseño que código tiene.

Modificaremos entonces el estilo twoColFixLtHdr.css en el código .header

Modificaremos entonces el estilo twoColFixLtHdr.css ahora en el fondo de la pagina en body.

Quedara de la siguiente manera.

Crearemos una nueva clase.

Modificaremos la pagina productos_lista.php y agregamos a la tabla, fila la clase que creamos.

Quedara de la siguiente manera, eliminaremos el color naranja.

Quitaremos el color naranja de la tabla, como se muestra.

Introduciremos un efecto de color cuando el mouse esta encima del objeto que marquemos de productos_lista.php, crearemos un nuevo estilo.

En la pagina productos_nuevos.php validaremos los campos para no ingresar productos erróneos.

Utilizaremos Spry.

Elegimos el campo de texto y después el Spry que valida

Se creara una carpeta SpryAssets, donde contendrá 2 archivos el estilo y la programación correspondiente de validación.

Ahora cuando queremos insertar registros sin contenido nos saldrá avisos como se muestra.

Quitaremos el borde del aviso de validación que nos sale, comentaremos el código.

Crearemos el link de Lista Usuarios en el Menú del archivo cabeceraadmin.php.

Crearemos el link Usuarios_lista.php en base index.php.

Ahora insertaremos un Juego de paginas Masestro/Detalle en Usuarios_lista.php, después crearemos un juego de registros.

Crearemos un juego de registros después seguiremos con la creación de Juego de paginas Masestro/Detalle.

El Juego de paginas Masestro/Detalle será:

Creara dos paginas, usuarios_lista.php y usuarios_datos.php(Eliminara), después lo modelaremos con los estilos creados para una mejor vista.

Aplicando los estilos creados para una mejor vista.

Insertaríamos una columna.

Abriremos la Base de Datos con Navicat, e insertaremos datos de forma manual. Añadir, Editar y Eliminar será creado por el Estudiante.

Creación de la pantalla principal, crearemos una plantilla en blanco.

Creación del archivo index.php en base a la plantilla Principal.

Diseñamos la plantilla Principal.

Modificaremos el estilo principal.css.

Crearemos Una Capa Nueva.

Definiremos el subcontenedor, en la hoja de estilo principal.css .

Modificaremos la cabecera del template principal.dwt.php, le insertaremos una imagen(fondocabecera.png ) al estilo principal.css.

Ahora crearemos el css para headerinterior dentro de la hoja de estilo principal.css

Insertaremos una imagen dentro de la nueva cabedera.

Reduciremos las cabeceras de 180px a 100px, en la hoja estilo principal.css

Crearemos un nuevo archivo catalogo.php dentro de la carpeta includes, después crearemos un juego de registros catalogo

Sacamos por pantalla la descripción, además se debe de repetir todos los registros, limpiaremos todo codigo html innecesario.

Incluiremos el include catologo.php en la plantilla principal.dwt.php, también modificaremos el archivo catologo.php.

Incluiremos una etiqueta <br> en el archivo catologo.php para poder visualizar mejor el menú.

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

Modificaremos la tabla usuarios abrimos Navicat.

Ahora editamos alta_usuario.php, crearemos el formulario de alta

El formulario de inserción de registro será:

Quedara como se muestra, haremos que los campos sean obligatorios de ingresar datos:

Crearemos la pagina alta_ok.php en base a index.php después lo modificaremos.

Validaremos el email, no debería estar repetido crearemos un archivo alta_emailrepetido.php en base a index.php y lo modificaremos.

Ahora en la pagina alta_usuario.php validaremos para no repetir el email de un usuario que ya se encuentra en la BD.

Ahora crearemos un link a alta_usuario.php añadiremos un link en catalogo.php

Modificaremos el link creado que se direccione a la raíz.

Ahora crearemos el acceso del Usuario, crearemos una nueva pagina en base a index.php y le damos formato.

Ahora insertaremos un campo de texto en acceso.php

insertaremos un campo de texto mas en acceso.php y pondremos nombre a los campos de texto.

insertaremos un botón después un comportamiento del servidor – Autentificación de usuarios y luego conectar usuario.

Pegaremos el código session_start() de acceso.php en la pagina de conexionzapatos.php;

Crearemos las páginas de acceso_ok.php y acceso_error.php en base a index.php

Crearemos el link a Inténtalo de nuevo

Insertaremos el link Acceder en catalogo.php

Validaremos en acceso.php el Email y la Contraseña en Spry

Insertaremos el nombre del usuario de acceso.php en catalogo.php, pero al ingresar de nuevo a la página inicial nos sale error.

Insertaremos en nombre del usuario de acceso.php en catalogo.php, pero al ingresar de nuevo a la página inicial nos sale error.

Corregiremos validando nombre de la sesión.

Probaremos y ahora eliminaremos el link Darme de alta por que no es necesario ponerlo si ya estamos de alta, cambiaremos el codigo.

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.

Ahora sacamos el srtnombre del juego de registros a la pagina prueba.php

Ahora crearemos un archivo funciones.php dentro de la carpeta includes y borramos su contenido.

Copiamos todo el codigo php del archivo prueba.php a funciones.php, empezamos con la consulta.

Quedara como se muestra.

Después sacaremos la instrucción que nos saca el nombre por pantalla de prueba.php y lo pegaremos en funciones.php

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.

Ahora crearemos una función de php y modificaremos el codigo como se muestra.

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.

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

Después añadiremos una sesión mas como se muestra en acceso.php

Ahora modificaremos catalogo.php para que aparezca el Nombre del usuario, llamaremos a la función que obtiene el nombre del usuario

Insertaremos nuestra función creada en nuestra pagina mediante un include en el archivo de conexionzapataos.php

Probamos nos generara un error el cual se debe a que se acabo la sesión cerramos el navegador y lo abrimos de nuevo.

Despues tendremos la pagina sin errores.

Introducción al desarrollo de aplicaciones Web

Documents

Transcript of Introducción al desarrollo de aplicaciones Web

Desarrollo de aplicaciones para la sociedad de la información PARTE III Estilo arquitectónico para el desarrollo de aplicaciones sociales Introducción.

Estrella 2 Introducción al desarrollo de aplicaciones de escritorio con.NET Programa Microsoft Desarrollador Cinco Estrellas.

Introducción al desarrollo de aplicaciones Web - …climate.cs.buap.mx/CondeJC/cursos/Material/WebTechnologies_/Notas... · Introducción unFdamentos entajas y Desventajas Arquitectura

Introducción al desarrollo de aplicaciones móviles BlackBerry™

Introducción a aplicaciones web.

COIS 215 Introducción al Desarrollo de Aplicaciones 215 UMET.pdf · 2005-08-04 · Introducción al desarrollo de aplicaciones. Los conceptos básicos para el desarrollo de aplicaciones

Introducción al desarrollo de aplicaciones web en Java

Desarrollo de Aplicaciones Móviles para Andoid 2020cisco-espol.info/planificacion/PDF/Desarrollo de...Desarrollo Desarrollo de Aplicaciones Móviles para Android 8.1. Introducción

Introducción al desarrollo de aplicaciones Web César Fernández Acebal Universidad de Oviedo acebal@ieee.org Arquitectura Web en aplicaciones.

Desarrollo web en entorno servidor · 1. introducciÓn al desarrollo de aplicaciones web ... 8. desarrollo de aplicaciones en symfony ... 8.4.4. rutas a nivel de clase ...

Introducción al desarrollo de aplicaciones para Android

GUIA DE DESARROLLO DE APLICACIONES SOBRE WIICapítulo 1. Introducción 1.1. Presentación El objetivo de esta memoria es que sirva como guía de introducción al desarrollo de aplicaciones

Introducción al Desarrollo de Aplicaciones Empresariales

Introducción Apache WEB Server Desarrollo de Aplicaciones para Internet.

Introducción al Desarrollo de Aplicaciones Web

APLICACIONES DESARROLLADASbibing.us.es/proyectos/abreproy/11420/fichero/VOLUMEN+1... · APLICACIONES DESARROLLADAS 8.1 Introducción En este capítulo se explica el desarrollo de

Introducción al desarrollo de aplicaciones de escritorio ...

Introducción al desarrollo de aplicaciones Xamarin

DESARROLLO DE APLICACIONES WEBETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios Hielscher! Cristina Puente Águeda! DESARROLLO DE APLICACIONES WEB Tema 3. Introducción

Introducción al desarrollo de aplicaciones de escritorio ...Introducción al desarrollo de aplicaciones de escritorio con .NET. Objetivo Conocer los elementos involucrados en el desarrollo