En este punto vas a ver paso a paso un ejemplo de utilización de sesiones para almacenar la información del usuario. Utilizarás la base de datos "proyecto", creada anteriormente, para crear un prototipo de una tienda web dedicada a la venta de productos de informática.

Las páginas de que constará tu tienda online son las siguientes:

• conexion.php. En ella meteremos los parámetros para iniciar la conexión y alguna otra función útil. Con require_once la "llamaremos" desde los otros archivos, lo que nos evitará tener que repetir código
• login.php. Su función es autentificar al usuario de la aplicación web. Todos los usuarios de la aplicación deberán autentificarse utilizando esta página antes de poder acceder al resto de páginas.
• listado.php. Presenta un listado de los productos de la tienda, y permite al usuario seleccionar aquellos que va a comprar.
• cesta.php. Muestra un resumen de los productos escogidos por el usuario para su compra y da acceso a la página de pago.
• pagar.php. Una vez confirmada la compra, la última página debería ser la que permitiera al usuario escoger el método de pago y la forma de envío. En este ejemplo no la vas a implementar como tal. Simplemente mostrará un mensaje de tipo "Gracias por su compra" y ofrecerá un enlace para comenzar una nueva compra.
• cerrar.php. Nos permitirá cerrar la sesión y nos devolverá a la página de "login".

Una vez "logeados" se nos dará la opción de cerrar sesión en todas las páginas

Aunque el aspecto de la aplicación no es importante para nuestro objetivo, se ha usado Bootstrap y los iconos de FontAwesome para mejorar fácilmente y rápidamente el diseño de la misma. Se ha optado por incorporar los CDN, para no tener que descargar los estilos por lo que será necesario internet para que puedas ver los mismos. Para poder usarlos basta con poner lo siguiente en el head de las páginas.

 <!-- css para usar Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
          integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- css Fontawesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
          integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

Se recomienda también usar las extensiones adecuadas en VSC para poder trabajar con estos estilos. Poniendo Bootstrap en el gestor de extensiones te aparecen varias, prueba hasta que encuentres una que te guste.

Antes de comenzar ten en cuenta que la aplicación que vas a desarrollar no es completamente funcional. Además de no desarrollar la página con la información de pago, habrá algunas opciones que no tendrás en cuenta para simplificar el código. Por ejemplo:

• No tendrás en cuenta la posibilidad de que el usuario compre varias unidades de un mismo producto.
• Una vez añadido un producto a la cesta de compra, no se podrá retirar de la misma. La única posibilidad será vaciar toda la cesta y comenzar de nuevo añadiendo productos.
• No se mostrarán imágenes de los productos, ni será posible ver el total de la compra hasta que ésta haya finalizado.
• Se muestran todos los productos en una única página. Sería preferible filtrarlos por familia y mostrarlos en varias páginas, limitando a 10 o 20 productos el número máximo de cada página.