LOGO Desarrollo Aplicación Web Tienda online en PHP con Dreamweaver >> Ing. Rafael Edwin Gordillo Flores
Oct 24, 2014
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
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Contenido del Proyecto
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
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Creamos una Base de Datos
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
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Empezamos con la tabla usuario con sus respectivos campos
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Empezamos con la tabla productos con sus respectivos campos
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Empezamos con la tabla categoría con sus respectivos campos
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Revisando las relaciones de las tablas
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.
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.
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.
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
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Creamos una plantilla hoja base de nuestro sitio web.
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.
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Creara la siguiente plantilla muy bien estilizada.
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.
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
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.
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Crearemos el archivo cabeceraadmin.php.
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Modificaremos el footer y eliminaremos el texto de contenido
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Crearemos las región editable.
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Crearemos nuestra primera página index de administración.
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Empezamos a darle diseño.
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Visualizamos en el navegador. • Debemos corregir los errores.
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Corrigiendo los errores en la plantilla BaseAdmin.
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Visualizamos en el navegador. • Sin errores.
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.
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Crearemos la conexión a la Base de Datos.
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Crearemos un Juego de Registros.
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Insertaremos una tabla 2x3
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.
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
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Añadiremos un link Añadir Producto
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
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Utilizaremos el asistente de Dreamweaver para añadir un producto.
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Utilizaremos el asistente de Dreamweaver para añadir un producto.
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
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.
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.
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Rellenamos los valores de la categoría dinámicamente
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Llamar el campo como se llamaba antes intCategoria
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.
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Crearemos nuevo archivo categorias_lista.php
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..
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
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.
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Crearemos una Inserción de Registro con el asistente
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Crearemos una Inserción de Registro con el asistente
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Crearemos una Inserción de Registro con el asistente
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Añadimos 3 categorías • Botas • Zapatillas • Sandalias
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Añadimos 3 categorías • Botas • Zapatillas • Sandalias
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
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
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.
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.
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.
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.
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.
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.
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.
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Modificaremos el nombre del Campo de texto.
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.
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.
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.
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.
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.
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 .
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Insertaremos un Campo de texto, de tipo Archivo
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.
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Ejecutaremos la pagina para saber en donde estamos.
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.
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Ingresaremos un Producto para probar.
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
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.
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.
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
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Crearemos nuevo Juego de registros, ConsultaCategorias
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.
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Dreamweaver genero el formulario.
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.
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.
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
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.
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Le enviamos el mismo parámetros que enviemos en Editar.
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.
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.
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.
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Después actualizaremos para todas las páginas
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.
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.
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.
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
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.
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Quedara de la siguiente manera.
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Crearemos una nueva clase.
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.
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Quedara de la siguiente manera, eliminaremos el color naranja.
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Quitaremos el color naranja de la tabla, como se muestra.
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.
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.
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Utilizaremos Spry.
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
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.
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.
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.
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.
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Crearemos el link Usuarios_lista.php en base index.php.
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.
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.
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
El Juego de paginas Masestro/Detalle será:
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.
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Aplicando los estilos creados para una mejor vista.
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Insertaríamos una columna.
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.
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.
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.
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Diseñamos la plantilla Principal.
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Modificaremos el estilo principal.css.
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Crearemos Una Capa Nueva.
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Definiremos el subcontenedor, en la hoja de estilo principal.css .
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.
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
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Insertaremos una imagen dentro de la nueva cabedera.
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
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
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.
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.
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ú.
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
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Modificaremos la tabla usuarios abrimos Navicat.
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Ahora editamos alta_usuario.php, crearemos el formulario de alta
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
El formulario de inserción de registro será:
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:
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.
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.
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.
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
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
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.
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.
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Ahora insertaremos un campo de texto en acceso.php
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.
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.
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;
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
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Crearemos el link a Inténtalo de nuevo
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Insertaremos el link Acceder en catalogo.php
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
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.
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.
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Corregiremos validando nombre de la sesión.
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.
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.
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.
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
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.
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.
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Quedara como se muestra.
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
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.
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.
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.
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
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
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
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
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.
Add your company slogan
LOGO Ing. Rafael Edwin Gordillo Flores
Tienda Online con Dreamweaver
Despues tendremos la pagina sin errores.
LOGO Ing. Rafael Edwin Gordillo Flores