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
Ontwerp en ontwikkel een server-side website voor een opdrachtgever.
Voor deze opdracht heb ik een webstie voor Tumi Mundo gebouwd. Ik heb de eerste "lessons" pagina mobile first gebouwd met daarbij een werkend menu. Vanuit dit menu kan je op de verschillende pagina's komen van dit project. Op de "lessons" pagina staan playlist en verhalen die je vanuit deze pagina verder kan bekijken wat in een later stadium van dit project mogelijk wordt.
Voor deze opdracht heb ik de eerste "lessons" pagina mobile first gebouwd inclusief een werkend menu. Vanuit dit menu kan je op alle pagina's komen die je nodig hebt. Op de lessons pagina staat alle algemene inhoud uit de database weergegeven. Je kunt hier al je eigen playlists bekijken, alle verhalen in verschillende talen, je gelikede playlists en aanbevolen playlists. Vanuit deze pagina kan je in een later stadium van dit project ook naar de "All stories" pagina, naar de individuele playlists en het verhaal bekijken en beluisteren.
https://server-side-rendering-server-side-website-zxns.onrender.com
Voor deze website is gebruik gemaakt van van Node, Express en EJS. Node maakt het mogelijk om server-side gebruik te maken van Javascript. Express is een webapplicatieframework voor Node.js. Het wordt vaak gebruikt in combinatie met Node voor het bouwen van webapplicaties en API's. Door het gebruiken van Express in combinatie met Node kun je makkelijker routes definiëren en HTTP verzoeken afhandelen. EJS, ook wel Embedded Javascript, is een template-engine voor Node.js en JavaScript. EJS laat toe om direct in de HTML-bestanden stukjes Javascript te gebruiken zoals een loop om gegevens uit een database te tonen. EJS neemt deze code en maakt er uiteindelijk HTML van dat naar de browser wordt gestuurd, zodat gebruikers de webpagina kunnen zien zoals bedoeld. Daarnaast maak ik gebruik van client side Javascript voor (micro)interacties en CSS.
- Fork deze repository;
- Clone de repository op uw eigen apparaat;
- Gebruik een editor naar keuze.
- Npm install
- https://docs.directus.io/reference/introduction.html
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON
- https://dev.to/pszponder/control-flow-in-javascript-loops-26bd
- https://ejs.co
This project is licensed under the terms of the MIT license.