read me

.env

@@ -0,0 +1 @@
+

.gitignore

@@ -0,0 +1,2 @@
+/node_modules
+.env

README.md

@@ -1,33 +1,79 @@
-> _Fork_ deze leertaak en ga aan de slag. Onderstaande outline ga je gedurende deze taak in jouw eigen GitHub omgeving uitwerken. De instructie vind je in: [docs/INSTRUCTIONS.md](docs/INSTRUCTIONS.md)
+# Performance Matters oba
+![CD4C69B9-BB73-4A29-8DE4-C875DC73297C](https://user-images.githubusercontent.com/94745953/236788424-0f177e4b-6cfa-497b-bd35-d4d7246b428f.jpg)
 
-# Titel
-<!-- Geef je project een titel en schrijf in één zin wat het is -->
+<img width="408" alt="logo-oba" src="https://user-images.githubusercontent.com/94745953/236790054-ef3dbbb0-634b-4ab1-a6fd-4059f59713a7.png">
 
-## Inhoudsopgave
+[Bezoek de oba site](https://uninterested-shirt-seal.cyclic.app/)
 
-  * [Beschrijving](#beschrijving)
-  * [Gebruik](#gebruik)
-  * [Kenmerken](#kenmerken)
-  * [Installatie](#installatie)
-  * [Bronnen](#bronnen)
-  * [Licentie](#licentie)
 
-## Beschrijving
-<!-- Bij Beschrijving staat kort beschreven wat voor project het is en wat je hebt gemaakt -->
-<!-- Voeg een mooie poster visual toe 📸 -->
-<!-- Voeg een link toe naar Github Pages 🌐-->
+##📚 Inhoudsopgave
+
+  * 📝 [Beschrijving](#beschrijving)
+  * 🖇 [Gebruik](#gebruik)
+  * 🔖 [Kenmerken](#kenmerken)
+  * 📲 [Installatie](#installatie)
+  * 💾 [Bronnen](#bronnen)
+  * 📠 [Licentie](#licentie)
+
+
+## 📝 Beschrijving
+Als team hebben wij een responsive website gebouwd voor onze opdrachtgever Oba waarbij verschillende performance technieken zijn toegepast.
+Wij hebben de website gebouwd met server- side code Node en gebruik gemaakt van de API om informatie op te halen zoals boeken, activiteiten en cursussen. 
+Voor de client side opmaak hebben wij gebruikt gemaakt van Ejs-HTML, CSS.
+
+[Bezoek de oba site](https://uninterested-shirt-seal.cyclic.app/)
+
+## 🖇 Gebruik
 
-## Gebruik
 <!-- Bij Gebruik staat de user story, hoe het werkt en wat je er mee kan. -->
+Voor onze groepsopdracht hebben wij besloten om verschillende userstories te gebruiken. 
+Wij hebben gebruik gemaakt van een projectboard en daar alle userstories en issues beschreven. 
+
+Userstories: 
+- Als gebruiker wil ik makkelijk kunnen navigeren op alle devices
+- Als ontwikkelaar wil ik een overzichtelijke stylegids kunnen openen om de huisstijl en het sfeer van Oba te begrijpen en ontwerptaal en ontwerpredenen te definiëren.
+- Als gebruiker wil ik een boek/item reserveren 
+- Als gebruiker wil ik een studieplek reserveren
+
+## 🔖 Kenmerken
 
-## Kenmerken
 <!-- Bij Kenmerken staat welke technieken zijn gebruikt en hoe. Wat is de HTML structuur? Wat zijn de belangrijkste dingen in CSS? Wat is er met JS gedaan en hoe? Misschien heb je iets met NodeJS gedaan, of heb je een framwork of library gebruikt? -->
+Wij hebben gebruikt gemaakt van Node, Ejs-HTML en express, CSS en JavaScript.
+
+Omdat deze leertaak over performace gaat hebben wij de onderstaande metrics aan onze website toegepast.
+Voor client side performance: 
+-  Assets optimization (responsive images by using modern image extensions zoals  webP, Avif etc)
+-  Delivery optmization (lazy load for images)
+-  Build optimization
+
+Voor server side performance: 
+- LCP (loading)
+- FID (interaction)
+- CLS (visual stability)
+
+## 📲 Installatie
 
-## Installatie
 <!-- Bij Instalatie staat hoe een andere developer aan jouw repo kan werken -->
+## NPM
+Voordat wij aan dit project gingen werken hebben wij eerst NPM install gedaan omdat we met REST API en Databases gingen werken. Wanneer je npm install uitvoert, leest npm het package.json-bestand in de hoofdmap van je project, dat de afhankelijkheden voor het project vermeldt. Vervolgens downloadt en installeert het die afhankelijkheden in de node_modules map in het project. In de terminal van Visual Studio Code zijn er een aantal commando's voor gebruikt om het NPM init te initialiseren, installeren NPM install en testen met NPM start. In de map Node_Modules hebben wij Nodemon geactiveerd om bij iedere aanpassing die wij hebben opgeslagen in de server te laten verversen. Hiervoor gebruiken wij het commando NPM install Nodemon.
+
+Express is een webframework voor Node.js dat wordt gebruikt voor het bouwen van webapplicaties en API's. EJS is een templating engine die wordt gebruikt voor het genereren van dynamische HTML-pagina's op basis van gegevens vanuit een server. In combinatie worden Express en EJS vaak gebruikt voor het bouwen van dynamische websites
+
+## .gitignore en .env
+Voor dit project hebben wij .env gebruikt omdat wij met echte data gingen werken. Om Api key te beschermen hebben wij een .env mapje aangemaakt en daar API key aangekoppeld. Api key van Oba is hierdoor beschermd. Door .env in de gitignore mapje te plaatsen gaat de API key niet mee naar github en is dit niet zichtbaar online.
+
+## Progressive Enhancement
+Om ervoor te zorgen dat iedereen toegang heeft tot het project, hebben wij de methode "progressive enhancement" gebruikt. Hierbij hebben we eerst de inhoud van de webpagina opgebouwd met behulp van HTML, geïntegreerd in EJS. Vervolgens heb ik functionaliteit toegevoegd door middel met de GET en POST-methode. Voor CSS hebben we diverse CSS-stijlen gebruikt om de website te stijlen in de huisstijl van OBA. 
+
+
+## 💾 Bronnen
+- MDN documents
+- Pagespeed insights
+- Lighthouse 
+- Can i use
+- DOC (instructions)
 
-## Bronnen
 
-## Licentie
+## 📠 Licentie
 
 This project is licensed under the terms of the [MIT license](./LICENSE).

index.js

@@ -0,0 +1,283 @@
+// Importeert basis modules uit npm
+import express from "express";
+import dotenv from "dotenv";
+import bodyParser from 'body-parser';
+
+dotenv.config();
+
+// Maakt een nieuwe express app
+const server = express();
+
+// Stelt de public map in
+server.use(express.static("public"));
+
+// Stelt het poortnummer in waar express op gaat luisteren
+server.set("port", process.env.PORT || 8000);
+
+// Activeert het .env bestand
+dotenv.config();
+
+// Handelt de formulieren af
+server.use(bodyParser.urlencoded({
+	extended: true
+}));
+server.use(bodyParser.json());
+
+// Stel in hoe express gebruikt kan worden
+server.set("view engine", "ejs");
+server.set("views", "./views");
+
+// Start express op, haal het ingestelde poortnummer op
+server.listen(server.get("port"), function () {
+	// Toon een bericht in de console en geef het poortnummer door
+	console.log(
+		`Application started on http://localhost:${server.get(
+			"port"
+		)}`
+	);
+});
+
+// Extenties voor de URL
+const space = "%20";
+const bookItems = "boeken";
+
+// Endpoints voor de URL
+const urlSearch = "search/";
+
+// Opbouw URL van de API
+const urlBase = "https://zoeken.oba.nl/api/v1/";
+const urlQuery = "?q=";
+const urlDefault = "special:all";
+const urlKey = `${process.env.KEY}`;
+const urlOutput = "&refine=true&output=json";
+
+// opbouw url activiteiten en Cursus
+const activityURL =
+	urlBase +
+	"/search/?q=special:all%20table:activiteiten&authorization=" +
+	process.env.authorization +
+	"&output=json";
+const courseURL =
+	urlBase +
+	"/search/?q=special:all%20table:jsonsrc&authorization=" +
+	process.env.authorization +
+	"&output=json";
+
+const defaultUrl =
+	urlBase +
+	urlSearch +
+	urlQuery +
+	urlDefault +
+	space +
+	bookItems +
+	urlKey +
+	urlOutput;
+
+// Maakt een route voor de index
+server.get("/", (request, response) => {
+	fetchJson(defaultUrl).then((data) => {
+		response.render("index", data);
+	});
+});
+
+// Maakt een route voor de detailpagina
+server.get("/item", async (request, response) => {
+	let uniqueQuery = "?id=";
+	let urlId = request.query.id || "";
+
+	const itemUrl =
+		urlBase +
+		urlSearch +
+		uniqueQuery +
+		urlId +
+		urlKey +
+		urlOutput;
+
+	const data = await fetch(itemUrl)
+		.then((response) => response.json())
+		.catch((err) => err);
+	response.render("item", data);
+});
+
+// Maakt een route voor de reguliere reserveringspagina
+server.get("/reserveren", async (request, response) => {
+	const baseurl = "https://api.oba.fdnd.nl/api/v1";
+	const url = `${baseurl}/reserveringen`;
+
+	let uniqueQuery = "?id=";
+	let urlId = request.query.id || "|oba-catalogus|279240";
+
+	const itemUrl =
+		urlBase +
+		urlSearch +
+		uniqueQuery +
+		urlId +
+		urlKey +
+		urlOutput;
+
+	const data = await fetch(itemUrl)
+		.then((response) => response.json())
+		.catch((err) => err);
+	response.render("reserveren", data);
+
+	fetchJson(url).then((data) => {
+		response.render("reserveren", data);
+	});
+});
+
+// Verstuurt de data naar de API
+server.post("/reserveren", (request, response) => {
+	const baseurl = "https://api.oba.fdnd.nl/api/v1";
+	const url = `${baseurl}/reserveringen`;
+
+	postJson(url, request.body).then((data) => {
+		let newReservering = { ... request.body }
+		console.log(newReservering);
+		if (data.id) {
+		  response.redirect('/succes') 
+		  console.log("werkt!")
+
+
+		} else{
+		  response.redirect('/succes')
+		}
+
+	});
+});
+
+// Maakt een route voor de studieplek reserveringspagina
+server.get(
+	"/reserveer-een-studieplek",
+	(request, response) => {
+		const baseurl = "https://api.oba.fdnd.nl/api/v1";
+		const url = `${baseurl}/studieplekReserveringen`;
+
+		fetchJson(url).then((data) => {
+			response.render("reserveer-een-studieplek", data);
+		});
+	}
+);
+
+server.get("/succes", (request, response) => {
+		response.render("succes");
+});
+
+// Maakt een route voor de studieplek reserveringspagina om vestiging foto's in te laden
+server.get(
+	"/reserveer-een-studieplek",
+	(request, response) => {
+		const baseurl = "https://api.oba.fdnd.nl/api/v1";
+		const url = `${baseurl}/vestigingen?clgnoumd6fttt0buw6rwa00pa`;
+
+		fetchJson(url).then((data) => {
+			response.render("reserveer-een-studieplek", data);
+		});
+	}
+);
+
+// Verstuurt de data van de studieplek naar de API
+server.post(
+	"/reserveer-een-studieplek",
+	(request, response) => {
+		const baseurl = "https://api.oba.fdnd.nl/api/v1";
+		const url = `${baseurl}/studieplekReserveringen`;
+
+		postJson(url, request.body).then((data) => {
+			let newReservation = {
+				...request.body,
+			};
+
+			console.log(data);
+
+			if (data.success) {
+				response.redirect("/");
+			} else {
+				const errormessage = `${data.message}: Mogelijk komt dit door het id die al bestaat.`;
+				const newdata = {
+					error: errormessage,
+					values: newReservation,
+				};
+
+				response.render(
+					"reserveer-een-studieplek",
+					newdata
+				);
+			}
+
+			console.log(JSON.stringify(data.errors));
+		});
+	}
+);
+
+//Maakt een route voor de activiteiten pagina
+server.get("/activiteiten", (request, response) => {
+	fetchJson(activityURL).then((data) => {
+		let dataClone = structuredClone(data);
+
+		if (request.query.titles) {
+			dataClone.results.titles =
+				dataClone.results.titles.filter(function (title) {
+					return results.titles.includes(
+						request.query.titles
+					);
+				});
+		}
+
+		response.render("activiteiten", dataClone);
+	});
+});
+
+// Maakt route voor de cursussen pagina
+server.get("/cursussen", (request, response) => {
+	fetchJson(courseURL).then((data) => {
+		let dataClone = structuredClone(data);
+
+		if (request.query.titles) {
+			dataClone.results.titles =
+				dataClone.results.titles.filter(function (title) {
+					return results.titles.includes(
+						request.query.titles
+					);
+				});
+		}
+		response.render("cursussen", dataClone);
+	});
+});
+
+//Maakt route voor de Vestigingen pagina
+server.get(
+	"/vestigingen",
+	(request, response) => {
+		const baseurl = "https://api.oba.fdnd.nl/api/v1";
+		const url = `${baseurl}/vestigingen`;
+
+		fetchJson(url).then((data) => {
+			response.render("vestigingen", data);
+		});
+	}
+);
+
+
+/**
+ * fetchJson() is a wrapper for the experimental node fetch api. It fetches the url
+ * passed as a parameter and returns the response body parsed through json.
+ * @param {*} url the api endpoint to address
+ * @returns the json response from the api endpoint
+ */
+export async function fetchJson(url, payload = {}) {
+	return await fetch(url, payload)
+		.then((response) => response.json())
+		.catch((error) => error);
+}
+
+export async function postJson(url, body) {
+	return await fetch(url, {
+			method: "post",
+			body: JSON.stringify(body),
+			headers: {
+				"Content-Type": "application/json",
+			},
+		})
+		.then((response) => response.json())
+		.catch((error) => error);
+}