Introducción Al Desarrollo de Aplicaciones Web

Desarrollo Aplicacin Web
Tienda online en PHP con Dreamweaver

>> Ing. Rafael Edwin Gordillo Flores
LOGO
Add your company slogan Tienda Online con Dreamweaver
Herramientas que se utilizara
Ing. Rafael Edwin Gordillo Flores
LOGO
Contenido del Proyecto
LOGO
Abrimos la conexin para despus crear la Base de Datos
LOGO
Creamos una Base de Datos
LOGO
Creamos las Tablas para gestionar la tienda, empezaremos con 3 tablas: Usuarios, Productos y Categoras
LOGO
Empezamos con la tabla usuario con sus respectivos campos
LOGO
Empezamos con la tabla productos con sus respectivos campos
LOGO
Empezamos con la tabla categora con sus respectivos campos
LOGO
Revisando las relaciones de las tablas
LOGO
Empezaremos a crear la Administracin de nuestra Web. Creamos nuestra carpeta zapatos dentro del servidor virtual Wampserver.
LOGO
Empezaremos a crear la Administracin de nuestra Web. Configuraremos nuestro sitio web en Dreamweaver.
LOGO
Empezaremos a crear la Administracin de nuestra Web. Configuraremos nuestro sitio web en Dreamweaver.
LOGO
Empezaremos a crear la Administracin de nuestra Web. Configuraremos nuestro sitio web en Dreamweaver. Crearemos carpetas para organizar nuestra web
LOGO
Creamos una plantilla hoja base de nuestro sitio web.
LOGO
Creamos una plantilla hoja base de nuestro sitio web. Nos pedir la carpeta para grabar el estilo, crearemos una carpeta estilos.
LOGO
Creara la siguiente plantilla muy bien estilizada.
LOGO
Guardaremos nuestra plantilla, despus modificaremos la comunicacin con la base de datos para validar los caracteres en espaol.
LOGO
Eliminaremos elementos de la plantilla que no utilizaremos. Logo Las listas
LOGO
Eliminaremos elementos de la plantilla que no utilizaremos. El texto que se encuentra en el menu Se aadir un include que mas adelante se creara.
LOGO
Crearemos el archivo cabeceraadmin.php.
LOGO
Modificaremos el footer y eliminaremos el texto de contenido
LOGO
Crearemos las regin editable.
LOGO
Crearemos nuestra primera pgina index de administracin.
LOGO
Empezamos a darle diseo.
LOGO
Visualizamos en el navegador. Debemos corregir los errores.
LOGO
Corrigiendo los errores en la plantilla BaseAdmin.
LOGO
Visualizamos en el navegador. Sin errores.
LOGO
Crearemos la pagina para visualizar Productos. Nos basaremos en index.php ctrl+c despus ctrl+v.
LOGO
Crearemos la conexin a la Base de Datos.
LOGO
Crearemos un Juego de Registros.
LOGO
Insertaremos una tabla 2x3
LOGO
Ingresamos las cabeceras, los campos correspondientes de la tabla Productos y las acciones Editar - Eliminar.
LOGO
Repetir los registros por fila, cada 10 registros, elegimos la fila donde esta los campos y despus elegimos comportamientos Repetir regin
LOGO
Aadiremos un link Aadir Producto
LOGO
Copiar y pegar en base a index.php un nuevo archivo y creamos la pagina productos_nuevos.php
LOGO
Utilizaremos el asistente de Dreamweaver para aadir un producto.
LOGO
Utilizaremos el asistente de Dreamweaver para aadir un producto.
LOGO
Nos generara un formulario de entrada de datos como se muestra
LOGO
Crearemos un Juego de Registros de Consulta de Categoras para obtener una lista de categoras.
LOGO
Quitamos el campo intCategoria e insertamos formulario Lista/Men, aceptamos por defecto.
LOGO
Rellenamos los valores de la categora dinmicamente
LOGO
Llamar el campo como se llamaba antes intCategoria
LOGO
Modificaremos el archivo cabeceraadmin.php, incrementaremos un link categorias_lista.php.
LOGO
Crearemos nuevo archivo categorias_lista.php
LOGO
Hacemos una consulta a la BD para extraer las categoras Juego de Registros..
LOGO
Crearemos una tabla 2X2 en el archivo categorias_lista.php, insertamos el campo strDescripcion y creamos una Repetir Regin
LOGO
Crearemos un link a Aadir una Categora al archivo categorias_nuevos.php, creamos la pagina categorias_nuevos.php y lo modificamos.
LOGO
Crearemos una Insercin de Registro con el asistente
LOGO
LOGO
LOGO
Aadimos 3 categoras Botas Zapatillas Sandalias
LOGO
Aadimos 3 categoras Botas Zapatillas Sandalias
LOGO
Crearemos la Edicin de Categoras, creamos link a Editar con la pgina categorias_editar.php
LOGO
Crearemos la Edicin de Categoras, indicaremos que categora deseamos editar crearemos un parmetro
LOGO
Crearemos la Edicin de Categoras, 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 parmetro por GET.
LOGO
Crearemos la Edicin de Categoras, 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 parmetro por GET.
LOGO
Crearemos la Edicin de Categoras, ahora actualizaremos registro mediante el asistente de Dreamweaver.
LOGO
LOGO
LOGO
Modificaremos la tabla tblproducto con Navicat para aadir un campo para su imagen.
LOGO
Modificaremos el archivo productos_nuevos.php para poder ingresar una imagen, insertaremos una fila con un campo de texto.
LOGO
Modificaremos el nombre del Campo de texto.
LOGO
Modificaremos el cdigo de Insertar un registro en el archivo productos_nuevos.php.
LOGO
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, despus insertaremos un botn Subir Imagen.
LOGO
Insertaremos JavaScript en el cdigo del botn Subir Imagen.
LOGO
Crearemos el JavaScript subirimagen(), despus crearemos el archivo gestionimagen.php.
LOGO
Probamos la pagina productos_nuevos.php con el botn Subir Imagen.
LOGO
Crearemos el cdigo de la pagina gestionimagen.php, insertaremos un formulario .
LOGO
Insertaremos un Campo de texto, de tipo Archivo
LOGO
Ahora Insertaremos un Botn Subir Imagen, despus un campo oculto de nombre enviado.
LOGO
Ejecutaremos la pagina para saber en donde estamos.
LOGO
Ingresaremos el cdigo PHP en el archivo gestionimagen.php para que funcione.
LOGO
Ingresaremos un Producto para probar.
LOGO
Despus de subir la imagen, obtenemos el nombre de la imagen y se grabara la imagen en la carpeta documentosproductos
LOGO
Crearemos el link Editar de la pagina productos_lista.php, crearemos pagina productos_editar.php, despus direccionamos el link Editar.
LOGO
Enviaremos un parmetro que es la identificacin del producto que deseamos modificar.
LOGO
Modificaremos la pagina productos_editar.php, crearemos un Juego de registros
LOGO
Crearemos nuevo Juego de registros, ConsultaCategorias
LOGO
Insertaremos Asistente de formulario de actualizacin de registros en la pagina productos_editar.php.
LOGO
Dreamweaver genero el formulario.
LOGO
Dreamweaver genero el formulario, aadiremos el botn Subir Imagen que tiene el archivo productos_nuevos.php.
LOGO
aadiremos el script que tiene el archivo productos_nuevos.php.
LOGO
Crearemos el link de Eliminar en base a index.php y lo llamaremos productos_eliminar.php
LOGO
Nos ubicamos en la pgina productos_lista.php y creamos el link a Eliminar con productos_eliminar.php.
LOGO
Le enviamos el mismo parmetros que enviemos en Editar.
LOGO
En la pgina productos_eliminar.php insertamos con el asistente Eliminar registro.
LOGO
En la pgina productos_eliminar.php insertamos con el asistente Eliminar registro.
LOGO
Empezamos a mejorar el diseo con Hojas de Estilo css, Abrimos el Template BaseAdmin.dwt.php y aadimos una cabecera e insertaremos un logo.
LOGO
Despus actualizaremos para todas las pginas
LOGO
Ajustaremos el tamao de letra General, seguimos en el twoColFixLtHdr.css y modificamos el body.
LOGO
Seguimos mejorando el diseo, abrimos una pagina del proyect y presionamos F12 en IE para determinar el diseo que cdigo tiene.
LOGO
Seguimos mejorando el diseo, abrimos una pagina del proyect y presionamos F12 en IE para determinar el diseo que cdigo tiene.
LOGO
Modificaremos entonces el estilo twoColFixLtHdr.css en el cdigo .header
LOGO
Modificaremos entonces el estilo twoColFixLtHdr.css ahora en el fondo de la pagina en body.
LOGO
Quedara de la siguiente manera.
LOGO
Crearemos una nueva clase.
LOGO
Modificaremos la pagina productos_lista.php y agregamos a la tabla, fila la clase que creamos.
LOGO
Quedara de la siguiente manera, eliminaremos el color naranja.
LOGO
Quitaremos el color naranja de la tabla, como se muestra.
LOGO
Introduciremos un efecto de color cuando el mouse esta encima del objeto que marquemos de productos_lista.php, crearemos un nuevo estilo.
LOGO
En la pagina productos_nuevos.php validaremos los campos para no ingresar productos errneos.
LOGO
Utilizaremos Spry.
LOGO
Elegimos el campo de texto y despus el Spry que valida
LOGO
Se creara una carpeta SpryAssets, donde contendr 2 archivos el estilo y la programacin correspondiente de validacin.
LOGO
Ahora cuando queremos insertar registros sin contenido nos saldr avisos como se muestra.
LOGO
Quitaremos el borde del aviso de validacin que nos sale, comentaremos el cdigo.
LOGO
Crearemos el link de Lista Usuarios en el Men del archivo cabeceraadmin.php.
LOGO
Crearemos el link Usuarios_lista.php en base index.php.
LOGO
Ahora insertaremos un Juego de paginas Masestro/Detalle en Usuarios_lista.php, despus crearemos un juego de registros.
LOGO
Crearemos un juego de registros despus seguiremos con la creacin de Juego de paginas Masestro/Detalle.
LOGO
El Juego de paginas Masestro/Detalle ser:
LOGO
Creara dos paginas, usuarios_lista.php y usuarios_datos.php(Eliminara), despus lo modelaremos con los estilos creados para una mejor vista.
LOGO
Aplicando los estilos creados para una mejor vista.
LOGO
Insertaramos una columna.
LOGO
Abriremos la Base de Datos con Navicat, e insertaremos datos de forma manual. Aadir, Editar y Eliminar ser creado por el Estudiante.
LOGO
Creacin de la pantalla principal, crearemos una plantilla en blanco.
LOGO
Creacin del archivo index.php en base a la plantilla Principal.
LOGO
Diseamos la plantilla Principal.
LOGO
Modificaremos el estilo principal.css.
LOGO
Crearemos Una Capa Nueva.
LOGO
Definiremos el subcontenedor, en la hoja de estilo principal.css .
LOGO
Modificaremos la cabecera del template principal.dwt.php, le insertaremos una imagen(fondocabecera.png ) al estilo principal.css.
LOGO
Ahora crearemos el css para headerinterior dentro de la hoja de estilo principal.css
LOGO
Insertaremos una imagen dentro de la nueva cabedera.
LOGO
Reduciremos las cabeceras de 180px a 100px, en la hoja estilo principal.css
LOGO
Crearemos un nuevo archivo catalogo.php dentro de la carpeta includes, despus crearemos un juego de registros catalogo
LOGO
Sacamos por pantalla la descripcin, adems se debe de repetir todos los registros, limpiaremos todo codigo html innecesario.
LOGO
Incluiremos el include catologo.php en la plantilla principal.dwt.php, tambin modificaremos el archivo catologo.php.
LOGO
Incluiremos una etiqueta <br> en el archivo catologo.php para poder visualizar mejor el men.
LOGO
Crearemos un archivo alta_usuario.php para que el usuario se de alta en base a index.php, despus insertamos 2 regiones editables a la plantilla principal.dwt.php
LOGO
Modificaremos la tabla usuarios abrimos Navicat.
LOGO
Ahora editamos alta_usuario.php, crearemos el formulario de alta
LOGO
El formulario de insercin de registro ser:
LOGO
Quedara como se muestra, haremos que los campos sean obligatorios de ingresar datos:
LOGO
Crearemos la pagina alta_ok.php en base a index.php despus lo modificaremos.
LOGO
Validaremos el email, no debera estar repetido crearemos un archivo alta_emailrepetido.php en base a index.php y lo modificaremos.
LOGO
Ahora en la pagina alta_usuario.php validaremos para no repetir el email de un usuario que ya se encuentra en la BD.
LOGO
LOGO
Ahora crearemos un link a alta_usuario.php aadiremos un link en catalogo.php
LOGO
Modificaremos el link creado que se direccione a la raz.
LOGO
Ahora crearemos el acceso del Usuario, crearemos una nueva pagina en base a index.php y le damos formato.
LOGO
Ahora insertaremos un campo de texto en acceso.php
LOGO
insertaremos un campo de texto mas en acceso.php y pondremos nombre a los campos de texto.
LOGO
insertaremos un botn despus un comportamiento del servidor Autentificacin de usuarios y luego conectar usuario.
LOGO
Pegaremos el cdigo session_start() de acceso.php en la pagina de conexionzapatos.php;
LOGO
Crearemos las pginas de acceso_ok.php y acceso_error.php en base a index.php
LOGO
Crearemos el link a Intntalo de nuevo
LOGO
Insertaremos el link Acceder en catalogo.php
LOGO
Validaremos en acceso.php el Email y la Contrasea en Spry
LOGO
Insertaremos el nombre del usuario de acceso.php en catalogo.php, pero al ingresar de nuevo a la pgina inicial nos sale error.
LOGO
Insertaremos en nombre del usuario de acceso.php en catalogo.php, pero al ingresar de nuevo a la pgina inicial nos sale error.
LOGO
Corregiremos validando nombre de la sesin.
LOGO
Probaremos y ahora eliminaremos el link Darme de alta por que no es necesario ponerlo si ya estamos de alta, cambiaremos el codigo.
LOGO
Ahora cambiaremos el correo electrnico por el nombre del usuario, crearemos un archivo de pruebas.php despus lo borraremos, crearemos una consulta en base del Id del usuario y obtendremos su nombre.
LOGO
Ahora cambiaremos el correo electrnico por el nombre del usuario, crearemos un archivo de pruebas.php despus lo borraremos, crearemos una consulta en base del Id del usuario y obtendremos su nombre.
LOGO
Ahora sacamos el srtnombre del juego de registros a la pagina prueba.php
LOGO
Ahora crearemos un archivo funciones.php dentro de la carpeta includes y borramos su contenido.
LOGO
Copiamos todo el codigo php del archivo prueba.php a funciones.php, empezamos con la consulta.
LOGO
Quedara como se muestra.
LOGO
Despus sacaremos la instruccin que nos saca el nombre por pantalla de prueba.php y lo pegaremos en funciones.php
LOGO
Por ultimo la copiamos la instruccin que limpia la memoria de la consulta, de prueba.php a funcion.php y despus cerramos prueba.php con cambios.
LOGO
Ahora crearemos una funcin de php y modificaremos el codigo como se muestra.
LOGO
Insertaremos dos variable globales que utilizaremos en toda la funcin, guardamos el archivo funcion.php y despus llamaremos a nuestra funcin creada, desde el archivo catalogo.php.
LOGO
Buscamos el Id de la persona que acaba ingresar al sistema en acceso.php, aadiremos a la consulta un campo mas que es idUsuario
LOGO
Despus aadiremos una sesin mas como se muestra en acceso.php
LOGO
Ahora modificaremos catalogo.php para que aparezca el Nombre del usuario, llamaremos a la funcin que obtiene el nombre del usuario
LOGO
Insertaremos nuestra funcin creada en nuestra pagina mediante un include en el archivo de conexionzapataos.php
LOGO
Probamos nos generara un error el cual se debe a que se acabo la sesin cerramos el navegador y lo abrimos de nuevo.
LOGO
Despues tendremos la pagina sin errores.
LOGO
LOGO

Introducción Al Desarrollo de Aplicaciones Web

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Introducción Al Desarrollo de Aplicaciones Web

Uploaded by

Copyright:

Available Formats

Desarrollo Aplicacin Web

Tienda online en PHP con Dreamweaver

Add your company slogan Tienda Online con Dreamweaver

Herramientas que se utilizara

Ing. Rafael Edwin Gordillo Flores

Add your company slogan Tienda Online con Dreamweaver

Contenido del Proyecto

Ing. Rafael Edwin Gordillo Flores

Add your company slogan Tienda Online con Dreamweaver

Abrimos la conexin para despus crear la Base de Datos

Ing. Rafael Edwin Gordillo Flores

Add your company slogan Tienda Online con Dreamweaver

Creamos una Base de Datos

Ing. Rafael Edwin Gordillo Flores

Add your company slogan Tienda Online con Dreamweaver

Ing. Rafael Edwin Gordillo Flores

Add your company slogan Tienda Online con Dreamweaver

Empezamos con la tabla usuario con sus respectivos campos

Ing. Rafael Edwin Gordillo Flores

Add your company slogan Tienda Online con Dreamweaver

Empezamos con la tabla productos con sus respectivos campos

Ing. Rafael Edwin Gordillo Flores

Add your company slogan Tienda Online con Dreamweaver

Empezamos con la tabla categora con sus respectivos campos

Ing. Rafael Edwin Gordillo Flores

Add your company slogan Tienda Online con Dreamweaver

Revisando las relaciones de las tablas

Ing. Rafael Edwin Gordillo Flores

Add your company slogan Tienda Online con Dreamweaver

Ing. Rafael Edwin Gordillo Flores

Add your company slogan Tienda Online con Dreamweaver

Ing. Rafael Edwin Gordillo Flores

Add your company slogan Tienda Online con Dreamweaver

Ing. Rafael Edwin Gordillo Flores

Add your company slogan Tienda Online con Dreamweaver

Ing. Rafael Edwin Gordillo Flores

Add your company slogan Tienda Online con Dreamweaver

Creamos una plantilla hoja base de nuestro sitio web.

Ing. Rafael Edwin Gordillo Flores

Add your company slogan Tienda Online con Dreamweaver

Ing. Rafael Edwin Gordillo Flores

Add your company slogan Tienda Online con Dreamweaver

Creara la siguiente plantilla muy bien estilizada.

Ing. Rafael Edwin Gordillo Flores

Add your company slogan Tienda Online con Dreamweaver

Ing. Rafael Edwin Gordillo Flores

Add your company slogan Tienda Online con Dreamweaver

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

Ing. Rafael Edwin Gordillo Flores

Add your company slogan Tienda Online con Dreamweaver

Ing. Rafael Edwin Gordillo Flores

Add your company slogan Tienda Online con Dreamweaver

Crearemos el archivo cabeceraadmin.php.

Ing. Rafael Edwin Gordillo Flores

Add your company slogan Tienda Online con Dreamweaver

Modificaremos el footer y eliminaremos el texto de contenido

Ing. Rafael Edwin Gordillo Flores

Add your company slogan Tienda Online con Dreamweaver

Crearemos las regin editable.

Ing. Rafael Edwin Gordillo Flores

Add your company slogan Tienda Online con Dreamweaver

Crearemos nuestra primera pgina index de administracin.

Ing. Rafael Edwin Gordillo Flores