Introducción al desarrollo de aplicaciones Web

LOGO

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