Práctica 1: Tienda básica - Sianats/LTAW-Practicas GitHub Wiki
El objetivo de esta práctica es hacer la aplicación web de una tienda básica, que integre el servidor web (back-end) como la presentación al usuario (front-end) usando Node.js y aplicando los conocimientos obtenidos en CSAAI para desarrollar el front-end.
Mi código de esta práctica se encuentra en mi Práctica 1. Una vez en este, seleccionaremos el contenido de las carpetas js, fotos y los archivos fuera de carpeta específica (siempre dentro de la P1). El más importante y principal es el tienda.js.
Este es el código de mis html con comentarios sobre el uso de cada parte.
- Código del archivo tienda.html:
<!DOCTYPE html>
<head>
<meta charset = "utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Estilos -->
<link rel = "stylesheet" href="tienda.css">
<link rel="stylesheet" href="pop-up.css">
<!-- Fuentes que voy a utilizar -->
<link href="https://fonts.googleapis.com/css?family=Work+Sans:600" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Overpass:300,400,600,700,800,900" rel="stylesheet">
<!-- Archivos Js (no todos son archivos originales) -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/cookies.js"></script>
<link rel="icon" href="fotos/climator.png" width="40px">
<title>Climator Ibiza</title>
<h6>
<!-- La foto de la cabecera -->
<a href="tienda.html"><img src="fotos/25aniversario.png" alt="logo" ;=""></a>
</h6>
</head>
<body>
<!-- El pop-up de las cookies. Esto es cosa mía y no parte de la práctica.
No contiene coockies reales.-->
<div class="modal fade bottom-center" id="demoModal" tabindex="-1" role="dialog" aria-labelledby="demoModal" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-body bg-rhino text-white rounded">
<img src="fotos/cookie.png" alt="cookie" width="100">
<h3 style="text-align:left">Política de cookies</h3>
<p class="text-white-50">
Utilizamos cookies para brindar una mejor experiencia a nuestros clientes.
Todas las cookies que utilizamos son propias, no utilizamos cookies de terceros.
</p>
<div class="text-center">
<a href="" class="btn btn-cstm-danger mr-2" data-dismiss="modal" aria-label="Close">Acepto</a>
<a href="cookies.html" class="ml-2 btn btn-cstm-dark2">Más información</a>
</div>
</div>
</div>
</div>
</div>
<div class="cabecera">
<br>
<!-- La cabecera donde están las cosas que usaremos en la siguiente práctica -->
<a href="error.html"><img src="fotos/carrito.png" alt="" width="30px" ;=""></a>..
<a href="error.html"><img src="fotos/usuario.png" alt="" width="30px" ;=""></a>..
<a href="error.html"><img src="fotos/lupa.png" alt="" width="30px" ;=""></a>...
</div>
<div class="cuerpo">
<aside>
<!-- Caja lateral, donde están las opciones de navegación de la tienda
En ella se incluye la barra desplegable que he creado con css -->
<div id="header">
<nav>
<ul class="nav">
<li><a href="">Productos➤<br>________________________</a>
<ul>
<li><a href="calor.html">Calor</a></li>
<li><a href="frio.html">Frío</a></li>
</ul>
</li>
<li ><a href="">Acerca de➤<br>________________________</a>
<ul style="margin-top:-16px;">
<li><a href="legal.html">Aviso legal</a></li>
<li><a href="cookies.html">Política de cookies</a></li>
<li><a href="privacidad.html">Política de privacidad</a></li>
</ul>
</li>
<li><a href="contacto.html">Contacto<br>________________________</a></li>
</ul>
</nav>
</div>
</aside>
<main>
<!-- En esta caja, se incluye el slider con las fotos que he elegido -->
<div class="slider">
<ul>
<li><img src="fotos/foto1slider.jpg" alt="" ;=""></li>
<li><img src="fotos/foto2slider.jpg" alt="" ;=""></li>
<li><img src="fotos/foto3slider.jpg" alt="" ;=""></li>
<li><img src="fotos/foto4slider.jpg" alt="" ;=""></li>
</ul>
</div>
</main>
</div>
</body>
</html>- Código de la página de productos (en este caso categoría frío):
<!DOCTYPE html>
<head>
<meta charset = "utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel = "stylesheet" href="tienda.css">
<link rel = "stylesheet" href="productos.css">
<link rel="stylesheet" href="pop-up.css">
<!-- Link de las fuentes que quiero usar -->
<link href="https://fonts.googleapis.com/css?family=Work+Sans:600" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Overpass:300,400,600,700,800,900" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/pop-up.js"></script>
<link rel="icon" href="fotos/climator.png" width="40px">
<title>Climator Ibiza</title>
<h6>
<a href="tienda.html"><img src="fotos/25aniversario.png" alt="logo" ;=""></a>
</h6>
</head>
<body>
<div class="cabecera">
<br>
<a href="error.html"><img src="fotos/carrito.png" alt="" width="30px" ;=""></a>..
<a href="error.html"><img src="fotos/usuario.png" alt="" width="30px" ;=""></a>..
<a href="error.html"><img src="fotos/lupa.png" alt="" width="30px" ;=""></a>...
</div>
<div class="cuerpo">
<aside>
<div id="header">
<nav>
<ul class="nav">
<li><a href="">Productos➤<br>________________________</a>
<ul>
<li><a href="calor.html">Calor</a></li>
<li><a href="frio.html">Frío</a></li>
</ul>
</li>
<li><a href="">Acerca de➤<br>________________________</a>
<ul style="margin-top:-16px;">
<li><a href="legal.html">Aviso legal</a></li>
<li><a href="cookies.html">Política de cookies</a></li>
<li><a href="privacidad.html">Política de privacidad</a></li>
</ul>
</li>
<li><a href="contacto.html">Contacto<br>________________________</a></li>
</ul>
</nav>
</div>
</aside>
<main>
<section>
<div class="card estilo">
<div class="img-container">
<button type="button" class="btn btn-dark btn-cta" data-toggle="modal" data-target="#demoModal">
<img src="fotos/cuecepasta.jpg" alt="">
</button>
<!-- Página Propia del Producto -->
<div class="modal fade" id="demoModal" tabindex="-1" role="dialog"
aria-labelledby="demoModal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg " role="document">
<div class="modal-content">
<div class="container-fluid">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="row">
<div class="col-md-6 bg-img rounded-left m-h-60 d-none d-sm-block" style="background-image: url('fotos/cuecepasta.jpg')">
</div>
<div class="col-md-6 py-5 px-sm-5 my-auto ">
<h2 class="pt-sm-3">Cuece Pasta</h2>
<h3>790€</h3>
<p class="text-muted">
Marca: Lotus<br>
Dimensiones: 30x60x29cm<br>
Potencia Electrica: 2.83kW<br>
4 cestas(10x14x13.5cm)
</p><br>
<span class="favorite">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"/></svg>
</span>
<form>
<button type="submit" class="btn btn-cstm-dark btn-block btn-cta" data-dismiss="modal" aria-label="Close">Añadir al carrito</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Página Propia del Producto -->
<span class="price">790€</span>
<p>Cuece Pasta</p>
<a href="">Añadir a carrito</a>
</div>
</div>
<div class="card estilo">
<div class="img-container">
<button type="button" class="btn btn-dark btn-cta" data-toggle="modal" data-target="#demoModal1">
<img src="fotos/freidora.jpg" alt="">
</button>
<!-- Página Propia del Producto -->
<div class="modal fade" id="demoModal1" tabindex="-1" role="dialog"
aria-labelledby="demoModal1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg " role="document">
<div class="modal-content">
<div class="container-fluid">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="row">
<div class="col-md-6 bg-img rounded-left m-h-60 d-none d-sm-block" style="background-image: url('fotos/freidora.jpg')">
</div>
<div class="col-md-6 py-5 px-sm-5 my-auto ">
<h2 class="pt-sm-3">Freidora</h2>
<h3>2327€</h3>
<p class="text-muted">
Marca: Repagas<br>
Dimensiones: 400x550x850mm<br>
Potencia total: 9Kw<br>
Dispone de termostato de seguridad
</p><br>
<span class="favorite">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"/></svg>
</span>
<form>
<button type="submit" class="btn btn-cstm-dark btn-block btn-cta" data-dismiss="modal" aria-label="Close">Añadir al carrito</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Página Propia del Producto -->
<span class="price">2327€</span>
<p>Freidora</p>
<a href="">Añadir a carrito</a>
</div>
</div>
<div class="card estilo">
<div class="img-container">
<button type="button" class="btn btn-dark btn-cta" data-toggle="modal" data-target="#demoModal2">
<img src="fotos/fry-topmodular.jpg" alt="">
</button>
<!-- Página Propia del Producto -->
<div class="modal fade" id="demoModal2" tabindex="-1" role="dialog"
aria-labelledby="demoModal2" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg " role="document">
<div class="modal-content">
<div class="container-fluid">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="row">
<div class="col-md-6 bg-img rounded-left m-h-60 d-none d-sm-block" style="background-image: url('fotos/fry-topmodular.jpg')">
</div>
<div class="col-md-6 py-5 px-sm-5 my-auto ">
<h2 class="pt-sm-3">Fry-Top Modular</h2>
<h3>1835€</h3>
<p class="text-muted">
Marca: Mainho<br>
Dimensiones: 400x550x900mm<br>
Potencia: 4300Kcal/h
</p><br>
<span class="favorite">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"/></svg>
</span>
<form>
<button type="submit" class="btn btn-cstm-dark btn-block btn-cta" data-dismiss="modal" aria-label="Close">Añadir al carrito</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Página Propia del Producto -->
<span class="price">1835€</span>
<p>Fry-Top Modular</p>
<a href="">Añadir a carrito</a>
</div>
</div>
<div class="card estilo">
<div class="img-container">
<button type="button" class="btn btn-dark btn-cta" data-toggle="modal" data-target="#demoModal3">
<img src="fotos/hornoconveccion.jpg" alt="">
</button>
<!-- Página Propia del Producto -->
<div class="modal fade" id="demoModal3" tabindex="-1" role="dialog"
aria-labelledby="demoModal3" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg " role="document">
<div class="modal-content">
<div class="container-fluid">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="row">
<div class="col-md-6 bg-img rounded-left m-h-60 d-none d-sm-block" style="background-image: url('fotos/hornoconveccion.jpg')">
</div>
<div class="col-md-6 py-5 px-sm-5 my-auto ">
<h2 class="pt-sm-3">Horno Convección</h2>
<h3>556€</h3>
<p class="text-muted">
Marca: Clajosa<br>
Dimensiones exteriores: 540x480x335mm<br>
Dispone de 1 Bandeja y 1 Rejilla
</p><br>
<span class="favorite">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"/></svg>
</span>
<form>
<button type="submit" class="btn btn-cstm-dark btn-block btn-cta" data-dismiss="modal" aria-label="Close">Añadir al carrito</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Página Propia del Producto -->
<span class="price">556€</span>
<p>Horno Convección</p>
<a href="">Añadir a carrito</a>
</div>
</div>
<div class="card estilo">
<div class="img-container">
<button type="button" class="btn btn-dark btn-cta" data-toggle="modal" data-target="#demoModal4">
<img src="fotos/hornomixto.jpg" alt="">
</button>
<!-- Página Propia del Producto -->
<div class="modal fade" id="demoModal4" tabindex="-1" role="dialog"
aria-labelledby="demoModal4" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg " role="document">
<div class="modal-content">
<div class="container-fluid">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="row">
<div class="col-md-6 bg-img rounded-left m-h-60 d-none d-sm-block" style="background-image: url('fotos/hornomixto.jpg')">
</div>
<div class="col-md-6 py-5 px-sm-5 my-auto ">
<h2 class="pt-sm-3">Horno Mixto</h2>
<h3>3090€</h3>
<p class="text-muted">
Marca: Romagsa<br>
Dimensiones: 800x800x820mm<br>
Potencia total: 8.3Kw
</p><br>
<span class="favorite">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"/></svg>
</span>
<form>
<button type="submit" class="btn btn-cstm-dark btn-block btn-cta" data-dismiss="modal" aria-label="Close">Añadir al carrito</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Página Propia del Producto -->
<span class="price">3090€</span>
<p>Horno Mixto</p>
<a href="">Añadir a carrito</a>
</div>
</div>
<div class="card estilo">
<div class="img-container">
<button type="button" class="btn btn-dark btn-cta" data-toggle="modal" data-target="#demoModal5">
<img src="fotos/hornopizza.jpg" alt="">
</button>
<!-- Página Propia del Producto -->
<div class="modal fade" id="demoModal5" tabindex="-1" role="dialog"
aria-labelledby="demoModal5" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg " role="document">
<div class="modal-content">
<div class="container-fluid">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="row">
<div class="col-md-6 bg-img rounded-left m-h-60 d-none d-sm-block" style="background-image: url('fotos/hornopizza.jpg')">
</div>
<div class="col-md-6 py-5 px-sm-5 my-auto ">
<h2 class="pt-sm-3">Horno Pizza</h2>
<h3>2460€</h3>
<p class="text-muted">
Marca: OEM (eurofred)<br>
Dimensiones Exteriores: 1000x1150x410mm<br>
Potencia Electrica: 6000W<br>
Capacidad: 6 pizzas de 30cm
</p><br>
<span class="favorite">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"/></svg>
</span>
<form>
<button type="submit" class="btn btn-cstm-dark btn-block btn-cta" data-dismiss="modal" aria-label="Close">Añadir al carrito</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Página Propia del Producto -->
<span class="price">2460€</span>
<p>Horno Pizza</p>
<a href="">Añadir a carrito</a>
</div>
</div>
</section>
</main>
</div>
</body>En los css hay especificaciones de qué función tiene cada parte del código. Solo me queda enseñar el resultado estético.
Esta es mi página principal. Está inspirada en una tienda real en Ibiza. Por las especificaciones, no será la principal puesto que tiene que enseñar los productos disponibles.
La página principal que te enseñará al principio es la siguiente:
Esta es la página específica de cada producto, con más información sobre este:
Esta es la página de error cuando intentas acceder a un recurso inválido:
Adjunto mi código del back-end:
- Código del archivo Tienda.js:
const http = require('http');
const fs = require('fs');
const PUERTO = 9090;
// Se crea el servidor
const server = http.createServer((req, res) => {
let myURL = new URL (req.url, 'http://' + req.headers['host']);
let page = "";
//Se llama a la página principal por defecto
if (myURL.pathname != "/"){
page += "."+ myURL.pathname
} else{
page += "calor.html"
}
fs.readFile(page, function(err, data) {
if (err) {
// Si se pide un recurso que no existe, salta la página de error
res.writeHead(404, {'Content-Type': 'text/html'});
return fs.createReadStream('error.html').pipe(res)
}
res.write(data);
res.end();
});
});
server.listen(PUERTO);
console.log("Escuchando en puerto: " + PUERTO);Una vez descargado el repositorio y abierto en nuestro editor de código, hay que asegurarse de tener instalado Node.js en nuestro navegador. Para acceder a la página, abre el terminal integrado de la carpeta donde se encuentra la tienda.js (en este caso la P1) y escribe el siguiente comando:
Para cerrar el servidor solo hay que pulsar ctrl + C en el terminal.
Después, accede a tu navegador y escribe la URL: localhost:9090. Esta es mi página principal. Está inspirada en una tienda real en Ibiza.
Para ver esta página concreta, al pulsar el logo del 25 aniversario te llevará aquí:
La página principal que te enseñará al principio es la siguiente. Te enseña los productos (en específico los de la categoría calor, pero puedes ver otros pulsando en productos->frío). También puedes ir a 'Acerca de' o 'Contacto' para ver más información de la tienda y de sus políticas.
Al pulsar en la foto de un producto, nos aparece la página específica de este, con más información:
Si pulsas o intentas acceder a algún recurso que no está disponible (como por ejemplo las opciones carrito, usuario o búsqueda) te llevará a la página de error. En ella puedes volver a la página de los productos pulsando el enlace de debajo del gif.
- pop-up con aviso de política de cookies que puedes aceptar o ver más información al respecto
- Sliders, barras desplegables...
- Una página principal digna de página web real
- Más apartados como 'contacto' o 'acerca de' donde hay más información
