-
Notifications
You must be signed in to change notification settings - Fork 4
L6: Practica 2_2
- Tiempo: 2h
- Fecha:
-
Objetivos de la sesión:
- Practicar con formularios y Cookies
- Continuar con la implementación de la práctica 2
- Introducción
-
¡A practicar!
- Ejercicio 1: Practicar con formularios
- Ejercicio 2: Página de acceso en la tienda (Login)
- Ejercicio 3: Formulario de compra
- Ejercicio 4: Practicar con Cookies
- Ejercicio 5: Página de acceso (Login, Versión 2)
- Ejercicio 6: Nombre de usuario en página principal
- Ejercicio 7: Añadir al carrito
- Ejercicio 8: Formalizar la compra
- Resumen de tareas a realizar
- Conclusiones
- Autores
- Licencia
- Enlaces
En la sesión anterior del laboratorio ya tenemos una base de datos mínima creada en JSON, y somos capaces de leer información de ella así como realizar escrituras. En esta sesión añadiremos formularios y gestión de acceso y del carrito mediante cookies
Para implementar la práctica 2, e ir aprendiendo durante el camino, te propongo los siguientes ejercicios. Si los haces, súbelos a las carpetas indicadas de tu repositorio
Haz los ejemplos del 1 al 3 que vimos en la sesión 6 de Teoría. Súbelos a la carpeta P2/S6 de tu repositorio. Estudia y asimila estos ejemplos. Te permitirán entender cómo funcionan los formularios
Añade un enlace en tu tienda para que los usuarios puedan acceder (login). Al pinchar sobre ese enlace debe aparecer un formulario pidiendo el nombre del usuario (por simplicidad en la práctica sólo pedimos el nombre y se deja como mejora el pedir un password). La tienda nos debe responder con una página HTML en la que nos de la bienvenida si el usuario introducido se encuentra dentro de la base de datos definida en el fichero tienda.json hecho en el ejercicio 2 de la sesión L5, o una página de error indicando que el usuario es desconocido
Utiliza el método GET para el envío de datos desde el cliente al servidor
Sube los ficheros a la carpeta P2 de tus prácticas, ya que serán parte de la práctica a entregar, aunque de momento sean temporales
Añade en la página principal otro enlace para finalizar la compra (Llámalo como quieras). Al pinchar ahí debe aparecer un formulario que nos pida la dirección de envío y el número de tarjeta de crédito para hacer el pago. Estos datos los debe recibir el servidor e introducirlos en la base de datos, en el campo de los pedidos (Fichero tienda.json). NOTA: En el campo de los pedidos todavía nos faltaría por añadir el usuario y la lista de productos. Esto lo haremos en los ejercicios siguientes. En este puedes o bien dejarlos en blanco o poner cualquier valor constante que quieras para hacer pruebas
Utiliza el método GET para el envío de datos desde el cliente al servidor
Sube los ficheros a la carpeta P2 de tus prácticas, ya que serán parte de la práctica a entregar, aunque de momento sean temporales
Haz los ejemplos del 4 al 6 que vimos en la sesión 6 de Teoría. Súbelos a la carpeta P2/S6 de tu repositorio. Estudia y asimila estos ejemplos. Te permitirán entender cómo funcionan las cookies. Las usaremos para la implementación del Login y del carrito de la compra
Modifica la página de acceso del ejercicio 2 para que el servidor añada el campo user a la cookie del mensaje de respuesta, si el login ha sido correcto (user=nombre-usuario). Si al acceder a esta página de Login el usuario ya estaba dentro, responder con una página indicando que ya ha accedido (Es decir, no debe aparecer el formulario de login)
En la petición recibida al recurso de login sabrás si el usuario está o no logeado leyendo el campo user de la cookie recibida (si es que hubiese cookie)
Modifica la página principal de la tienda para que aparezca el enlace del Login en caso de que el usuario no se haya identificado. Si el usuario ya está identificado deberá aparecer su nombre de usuario (y NO el enlace al login)
Para implementarlo, en la página pricipal se deberá leer la Cookie y comprobar el valor del campo user si lo hubiese
En las páginas web de cada producto crea una opción de añadir al carrito. Al hacerlo, el producto se añadirá a la cookie del carrito que se devolverá en el mensaje de respuesta. Por simplicidad, puedes hacer que se añada tantas veces como se quiera. En este ejercicio no hagas todavía el control del stock. Eso añadelo como mejora cuando lo básico te funcione (al añadir al carrito se deberá decrementar el stock del producto seleccionado y actualizarlo en la base de datos)
Modifica lo que hiciste en el ejercicio 3 para guardar en la base de datos tanto el nombre del usuario como los productos del carrito
- Ejemplos 1-6 de la sesión 6 de Teoría. Súbelos a la carpeta P2/S6
- Ejercicios 2-8 propuestos en esta sesión para implementar tu práctica. Súbelos a la carpeta P2
- Asimila todo lo visto e integralo para construir tu tienda según las especificaciones de la práctica 2
Tras finalizar la práctica P2-2, deberías saber lo siguiente:
- Manejar las cookies
- Enviar información desde el cliente al servidor mediante formularios
- Juan González-Gómez (Obijuan)
- Jose María Cañas
- S0: Presentación
- S1: Lenguajes de marcado. Markdown
- S2: Node.js
- S3: Node.js. Módulos
- S4: XML
- S5: JSON (28-Feb-2022)
- S6: Formularios y Cookies (14-Mar-2022)
- S7: Peticiones AJAX (21-Mar-2022)
- S8: NPM. Paquetes node.js (28-Mar-2022)
- S9: Websockets (4-Abril-2022)
- S10: Electron (25-Abril-2022)
- S11: A-frame
Prácticas y sesiones de laboratorio
- L5: Datos de la tienda y JSON
- L6: Login, carrito, pedidos
- L7: Búsquedas (22-Mar-2022)
- L8: ¡Oxígeno!. Tiempo de laboratorio para que avances con tu práctica (29-Mar-2022)
- L11: Home chat (26-Abril-2022)
- L12: Laboratorio puro. NO hay contenido nuevo (9-Mayo-2022)
- L13: Laboratorio/Tutorias. No hay contenido nuevo (10-Mayo-2022)