garapenean...

.gitignore

@@ -1 +1,2 @@
 node_modules/
+package-lock.json

index.js

@@ -1,29 +1,29 @@
 const express = require('express');
 const app = express();
 const path = require('path');
+const bodyParser= require('body-parser');
+const cookieParser = require('cookie-parser');
+const routes = require('./routes');
+const api = require('./routes/api');
 
 app.set('port', 8080);
+app.set('view engine', 'pug');
 app.use(express.static(path.join(__dirname, 'public')));
-app.use('/images', express.static(path.join(__dirname, 'public/images')));
+app.use(bodyParser.urlencoded({extended: true}));
+app.use(bodyParser.json());
+app.use(cookieParser());
 
-app.get('/', (req, res) => {
-	res.status(200).sendFile(__dirname + '/index.html');
-});
+app.get('/', routes.index);
 
-app.get('/irudiak', (req, res) => {
-	res.status(200).sendFile(__dirname + '/irudiak.html');
-});
-
-app.get('/irudi_:num', (req, res) =>{
-	var num = req.params.num;
-	res.status(200).sendFile(__dirname + '/irudi_'+num+'.html');
-});
+app.get('/:name', routes.partials);
 
 app.get('*', (req, res, next) => {
 	res.status(200).send('Eskatu duzun orrialdea ez da aurkitu!');
 	next();
 });
 
+app.post('/',api.login);
+
 app.listen(app.get('port'), () => {
 	console.log('Zerbitzaria martxan ' + app.get('port') + ' atakan');
 });

package.json

@@ -4,7 +4,9 @@
   "description": "03.-Oinarrizko web aplikazio bat eraiki Node.js, Express.js eta Pug erabiliz - Pug",
   "main": "index.js",
   "dependencies": {
-    "express": "^4.17.1"
+    "cookie-parser": "^1.4.5",
+    "express": "^4.17.1",
+    "pug": "^3.0.2"
   },
   "devDependencies": {},
   "scripts": {
@@ -14,4 +16,3 @@
   "author": "superuser@lainoa.eus",
   "license": "GPL-3.0-or-later"
 }
-

public/css/footer.css

@@ -0,0 +1,12 @@
+footer{
+	position:fixed;
+	width: 100%;
+	height: max-content;
+	bottom: 0;
+	left: 0;
+	background-color: #000000;
+	color: white;
+	text-align: center;
+	padding-top: 5px;
+	padding-bottom: 5px;
+}

public/css/header.css

@@ -0,0 +1,59 @@
+header {
+background-color: #0069ed;
+position: fixed;
+top: 0;
+left: 0;
+right: 0;
+height: 50px;
+display: flex;
+flex-direction: row;
+align-items: center;
+z-index: 9;
+box-shadow: 0 0 25px 0 black;
+color: white;
+}
+
+header > .back:nth-child(2) {
+    order: 1;
+    position: fixed;
+    left: 15px;
+}
+
+header :nth-child(1) {
+    order: 2;
+}
+
+header > .next:nth-child(3) {
+    order: 3;
+    position: fixed;
+    right: 15px;
+}
+
+.title{
+text-align: center;
+right: 0;
+left: 0;
+position: fixed;
+}
+
+.next {
+  width: 0;
+  height: 0;
+  border: 10px solid transparent;
+  border-right: 0;
+  border-left: 15px solid white;
+  position: fixed;
+  right: 15px;
+  display: none;
+}
+
+.back {
+  width: 0;
+  height: 0;
+  border: 10px solid transparent;
+  border-left: 0;
+  border-right: 15px solid white;
+  position: fixed;
+  left: 15px;
+  display: none;
+}

public/css/styles.css

@@ -1,6 +1,8 @@
 .edukiontzia {
 	display: table;
 	margin:auto;
+	position: relative;
+	top: 50px;
 }
 
 .item1 { grid-area: irudi1; }
@@ -20,8 +22,11 @@
   width: max-content;
 }
 
+#unknown, #logged{
+	margin:80px auto auto;
+}
 
-@media only screen and (max-width: 360px) {
+@media only screen and (max-width: 480px) {
 	.irudiak{
 		grid-template-areas: 
 			'irudi1'

routes/api.js

@@ -0,0 +1,11 @@
+/* POST eskaera */
+
+exports.login = function(req, res){
+	//console.log(req.body);
+	var logged;
+	if(req.body.username != ''){
+		res.cookie('username', req.body.username, { expires: new Date(Date.now() + 900000), 'sameSite':'lax'});
+		logged = true;
+	}
+	res.render('index',{logged: logged, username: req.body.username});
+};

routes/index.js

@@ -0,0 +1,30 @@
+/* GET home orrialdea */
+
+exports.index = function(req, res){
+	var username;
+	var logged;
+
+	if(req.cookies.username){
+		username = req.cookies.username;
+		logged = true;
+		//console.log(username);
+	}
+
+	res.render('index',{logged: logged, username: username});
+};
+
+/* GET orrialde desberdinak */
+
+exports.partials = function (req, res) {
+	var name;
+	var num;
+
+	if(req.params.name.includes('_')){
+		name = req.params.name.split("_")[0];
+		num = req.params.name.split("_")[1];
+	}else{
+		name = req.params.name;
+	}
+
+	res.render('partials/' + name, {num: num});
+};

views/footer.pug

@@ -0,0 +1,2 @@
+//footer.pug
+footer wproject - 2021

views/header.pug

@@ -0,0 +1,6 @@
+//header.pug
+header
+	.title
+		h3 ariketa 3
+	.next(onclick='window.location.href="irudiak"')
+	.back(onclick='window.history.go(-1)')

views/index.pug

@@ -0,0 +1,18 @@
+extends layout
+
+block content
+
+  if logged
+    #logged
+      h1 Kaixo !{username}!!
+      p
+        | Hau Node.js, Express.js eta Pug erabiliz egindako nabigazio adibide bat da. 
+
+  else
+    #unknown
+      h4 Erabiltzailea:
+      form(action='./' method='post')
+        input(type='text' name='username')
+        button Sartu
+      p
+        | Oharra: sartzen duzun izena 15 minutuan iraungitzen den cookie batean gordeko da.

views/layout.pug

@@ -0,0 +1,36 @@
+doctype
+html(lang='eu')
+	head
+		title Node.js Express.js Pug adibidea
+		meta(name='viewport', content='width=device-width, initial-scale=1.0')
+		base(href='/')
+		link(rel='stylesheet', href='css/styles.css')
+		link(rel='stylesheet', href='css/header.css')
+		link(rel='stylesheet', href='css/footer.css')
+		link(rel='shortcut icon', href='#')
+
+		script.
+			window.onload = function () {
+				var logged = "#{logged}"
+				var path = window.location.pathname;
+				if(path != '/'){
+					document.querySelector('.back').style.display = 'block';
+					document.querySelector('.next').style.display = 'none';
+				}else{
+					document.querySelector('.back').style.display = 'none';
+					if(logged) {
+						document.querySelector('.next').style.display = 'block';
+					}
+				}
+			};
+
+	body
+
+		
+		block header
+			include header
+
+		block content
+  
+		block footer
+			include footer

views/partials/irudi.pug

@@ -0,0 +1,7 @@
+extends ../layout.pug
+
+block content
+	-var num
+	.edukiontzia
+		h1 Irudi !{num}
+		img.irudi(src='images/irudi_'+num+'.jpg')

views/partials/irudiak.pug

@@ -0,0 +1,19 @@
+extends ../layout.pug
+
+block content
+	
+	.edukiontzia
+		h1 Irudiak
+		.irudiak
+			div
+				img.irudi_1(src='images/irudi_1.jpg' onclick='window.location.href="images/irudi_1.jpg"')
+				p
+					a(href='irudi_1') irudi 1
+			div
+				img.irudi_2(src='images/irudi_2.jpg' onclick='window.location.href="images/irudi_2.jpg"')
+				p
+					a(href='irudi_2') irudi 2
+			div
+				img.irudi_3(src='images/irudi_3.jpg' onclick='window.location.href="images/irudi_3.jpg"')
+				p
+					a(href='irudi_3') irudi 3