WebOntwikkeling 2024
DigitAP
  • Introductie
  • Tooling
    • Devcontainers
    • Git
    • Terminal en bash
  • NodeJS + TypeScript
    • Wat is NodeJS?
    • Waarom TypeScript?
    • Nieuw project
    • Input lezen
    • Type Systeem
      • Basic types
      • Arrays
      • Interfaces
      • Functions
    • Exceptions
    • Modules
    • Asynchroon Programmeren
      • Promises
      • Async/Await
      • Fetch
      • Extra voorbeelden
  • Express.js
    • Wat is een backend framework?
    • Basis
    • Nodemon
    • Statische Bestanden
    • EJS
    • Request
      • GET Request
      • POST Request
      • Multi-part form data
    • Response
    • Router
    • Middleware
    • Deployment
  • MongoDB
    • Wat is MongoDB?
    • MongoDB driver
    • Insert
    • Find
    • Limit & Sort
    • Query Operators
    • Update
    • Delete
    • Text Search
    • Gebruik in Express.js
      • CRUD
  • Security & Testing
    • Environment Variables
    • Cookies
    • Hashing & Encryptie
    • Sessions
      • Session Based Login
    • JWT Tokens
      • JWT NPM package
      • Tokens veilig opslaan
      • Token Based Login
    • Testing
  • Labos
    • 1. Tooling
    • 2. Basis
      • Hello Name
      • BMI Calculator
      • BMI Calculator Multi
      • Interest Calculator
      • Uren en Minuten
      • Wisselgeld
      • Name from Email
      • Text Box
    • 3. Arrays
      • Som van getallen
      • Puntenboek
      • Rot13
      • Pokemon Team
      • Todo List String
      • Tick Tac Toe
    • 4. Interfaces & functies
      • Interfaces
        • Recepten
        • Movies Objects
        • Todo List Objects
      • Functies
        • Math Fun
        • Short Notation
        • Array Sum
        • Movies Functions
        • Filter Numbers
        • At Least Two
    • 5. Async & fetch
      • Fake Fetch
      • Promise All
      • Slow Sum
      • Todo List Fetch
      • Cocktails Promise All
      • Bitcoin API
      • Joke API
      • School API
      • Cocktails API
      • Unix Timestamp API
    • 6. Modules en NPM Packages
      • Math Module
      • Export Interfaces
      • Cowsay Module
      • Cat GPT
      • Rainbow Chalk
    • 7. Express
      • Hello Express
      • DadJoke Express
      • Bitcoin current
    • 8. EJS + Static
      • Hello Express EJS
      • Cat Static
      • Maaltafels
      • Newspaper
    • 9. Get Request
      • Hello Query
      • Math Service
      • Newspaper Route
      • Newspaper Search
      • Steam
    • 10. Post Request
      • Pet Shelter
      • Redirect Form
      • Contact Form
    • 11. Router en Middleware
      • Router Combi
      • Utility Middleware
      • Rate Limiter
    • 12. Herhaling
      • Twitter
      • Word Guess
    • 13. Mongo Basics
      • Guestbook
      • MoviesDB
      • Pokemon Team
    • 14. Mongo Queries
      • Pet Shelter
      • Games DB
    • 15. Mongo + Express
      • Pet Shelter Express
      • Guestbook Express
      • Pokemon Team Express
    • 16. CRUD
      • Users CRUD
      • Pokedex
    • 17. Session & Cookies
      • Shopping Cookie
      • View Counter Cookies
      • View Counter Sessions
    • 18. Session based login
      • Login Express
      • Pokedex Express Sessions
    • 19. Token based login
      • JWT Sign
      • Login Express JWT
    • 20. Testing
      • Math Test
      • String Test
      • Math Express Test
      • Form Express Test
      • Pet Shelter Express Test
    • 21. Herhaling
      • Youtube Favorites
      • Beerster
    • Extra oefeningen
      • DNA Match
      • View Counter
      • Hogwarts Express CRUD
  • Project
    • Voorbereiding (devcontainer + github)
    • Semester 2
      • Milestone 1 - Terminal App
      • Milestone 2 - Express
      • Milestone 3 - MongoDB
      • Milestone 4 - Security
Powered by GitBook
On this page
Export as PDF
  1. Labos
  2. 21. Herhaling

Youtube Favorites

Previous21. HerhalingNextBeerster

Last updated 1 year ago

In deze opdracht ga je een applicatie bouwen die het toelaat om youtube videos aan te duiden als favoriet. De applicatie zal een lijst van favoriete videos tonen en het zal mogelijk zijn om videos toe te voegen en te verwijderen.

Als de applicatie opstart zal een json van youtube videos ingeladen worden. Deze json moet worden ingelezen via de fetch api op het volgende adres: https://raw.githubusercontent.com/similonap/json/master/videos.json. Vervolgens moeten deze videos in een mongodb database worden opgeslagen. Bij het opstarten worden ook twee users toegevoegd aan de database met een username en password. Het passwoord moet gehashed worden met bcrypt. Als er al data in de database zit, mag deze data niet overschreven worden. Voorzie een environment variable in een dotenv bestand CLEAR_DB_ON_RESTART. Als deze op true staat mag de database wel overschreven worden.

De applicatie moet een login pagina hebben waar de gebruiker kan inloggen. Als de gebruiker niet ingelogd is, mag hij niet naar de hoofdpagina gaan. Als de gebruiker niet ingelogd is, moet hij naar de login pagina worden gestuurd. Als de gebruiker inlogt, moet hij naar de hoofdpagina worden gestuurd. De gebruiker moet ook kunnen uitloggen. Als de gebruiker verkeerde gegevens ingeeft, moet er een foutmelding getoond worden (gebruik flash messages in de session).

De hoofdpagina toont een lijst van de youtube videos die in de database zitten. Naast de velden van de video moet er een knop zijn om de video als favoriet aan te duiden. Als de video al als favoriet is aangeduid, moet de knop de video als niet favoriet aanduiden.

Bovenaan de pagina staat een zoekbalk waarmee je op de titel van het lied kunt zoeken. Als je op de titel van het lied zoekt, moet je enkel de videos tonen die de zoekterm in de titel hebben. Als je niets invult in de zoekbalk, moet je alle videos tonen. Voorzie ook database sorting op alle velden. Je kan deze oplopend of aflopend sorteren.

Voorzie ook een manier om nieuwe videos toe te voegen. Er moet geen server side validation gebeuren. Als de video correct is toegevoegd, moet de gebruiker terug naar de hoofdpagina worden gestuurd.

youtube-demo