• Les 1.1 [WG] JavaScript herhalen

  • Variabelen
  • Datatypen
  • Logica
  • Arrays

• Les 1.2 [WG] Git & GitHub basics leren

  • Github bestand opzetten en gezamenlijke repository aanmaken. Hierin een master branch en side branches.

• Les 1.3 [WG] JavaScript herhaling

  • Functies (parameters, return, arrow functies)
  • Objecten (dot & bracket notatie)
  • Loops
  • import and export

• Les 1.4 [WG] Uitleg over JSON krijgen

  • JSON-notatie & -bestanden
  • Fetch Web API & lokaal JSON bestand
  • Promise afhandelen met .then()
  • Fetch in Async functie met await

• Les 2.1 [WG] Backend basis

  • Http request & response
  • Command line
  • NodeJS & NPM
  • Node modules
  • Data API

• Les 2.2 [WG] Frontend basis

  • API basics, empty & loading state
  • Keuze voor specialisatie maken (docenten inventariseren)

• Les 2.3 [WG] Concept eindopdracht & Verdieping Frontend

  • Verdieping frontend: Lijstjes (ListJS)
  • Back-enders richten de eerste versie van hun backend in

• Les 2.4 [WG] Concept eindopdracht & Verdieping Backend

  • Verdieping kiezen en Teams indeling
  • Backend verdieping: Routes, static, templates
  • Front-enders gaan eerste opzet voor hun component maken

Ik heb de voorbeeld html en css code voor een formulier gebruikt van de voorbeeld code op de project tech GitHub.

Het ingevulde formulier ziet er zo uit:

De ingevoerde data uit het formulier wordt na het versturen weergeven op een pagina:

Dat heb ik gedaan met deze code:

Ik heb mijn eigen database aangemaakt via MongoDB. Hierbij werkte het verbinden met de database als ik mijn hele uri neerzetten, dus inclusies wachtwoord dat voor iedereen zichtbaar was.

Toen ik probeerde te verbinden via de uri waarmee hij de inlogdata uit het .env bestand haald, kreeg ik een error.

In mijn uri verwijs in naar het wachtwoord met DB_password en in mijn .env bestand met DB_pass. Dus ik moest simpelweg zorgen dat die namen gelijk waren en toen was de uri wel correct. Toen kreeg ik een andere error.

Blijkbaar was het probleem dat ik 2x app.listen(8000) had staan in mijn server. Een helemaal bovenaan en een helemaal onderaan. Vandaar de error met "address already in use :::8000.

Ik heb hiervoor gekeken naar de voorbeeldcode die op de project tech Github stond om data over een bepaalde film op te halen uit de database en te laten zien in de terminal. Dat is deze code:

Deze code heb ik vervolgens aangepast door er .insertOne van te maken. Ook heb ik de code om het antwoord van een formulier weer te geven op een pagina eraan toegevoegd. Hierdoor wordt er na het verzenden van een formulier een overzicht van de antwoorden weergeven op een pagina en wordt het toegevoegd aan de database. De code ziet er dan zo uit:

Hiervoor heb ik dezelfde methode gebruikt als voor het opslaan van een film. Ik heb een nieuwe database aangemaakt genaamd 'gebruikers' met daarin een collectie genaamd 'accounts'. Momenteel bestaat het aanmaken van een account alleen maar uit een gebruikersnaam en wachtwoord.

Om te kunnen inloggen met een bestaand account, wordt er gekeken if er in de database een resultaat te vinden is voor de combinatie van de ingevoerde gebruikersnaam en wachtwoord. Daarna wordt er een if else statement gebruikt om aan te geven of er een resultaat is = ingelofd, of niet = error, niet ingelogd.

Mijn ESLint instellingen:

Eerst probeerde ik met res.send een lijst van alle toegevoegde films weer te geven na het verzenden van een film, maar dat lukte niet omdat ik dan html code stopte in de res.send in plaats van javascript. Ivo adviseerde mij om een view aan te maken.

Als oplossing hiervoor heb ik een variabele van de addedMovie (titel, plot en description) gemaakt.

Bij het aanmaken van een account moet de gebruiker zijn gebruikersnaam en wachtwoord invullen en hiermee wordt er een account aangemaakt. Deze data moet worden gesanitised, zodat bezoekers via dat inputveld geen aanslag op mijn site kunnen doen.

Ook bij het inloggen kan de gebruikers gegevens invoeren, daarom moet deze ingevoerde data ook gesanitesed worden voordat het verder wordt gebruikt.

Om een wachtwoord te hashen heb ik bcrypt.hash gebruikt. De 10 staat voor hoe sterk het wachtwoord gehashed is.

Toen ik wilde inloggen door mijn wachtwoord in te voeren, lukte dat niet. Toen besefte ik mij dat het wachtwoord dat je invoerd ook gehashed moet worden en dan moet worden vergeleken met het gehashde wachtwoord in de database. Dit heb ik gedaan met bcrypt.compare.

Bij het inloggen wordt de sessie gekoppeld aan het account dat bij de gebruikte username hoort.

Ik heb toegevoegd dat je na het succesvol inloggen meteen naar de "mijn account" pagina wordt gestuurd.

Verder wil ik dat als er al is ingelogd en je naar "inloggen" gaat, je niet opnieuw het inlogscherm krijgt, maar dat er komt te staan "je bent al ingelogd, wil je uitloggen?". Dit kan met de .destroy functie. Een verdere stap zou zijn dat als je al ingelogd bent, er uitloggen komt te staan in de nav.

Ik heb er voor gekozen om nu de uitlogknop op de "mijn account" pagina te stoppen.

Via "Mijn account" kun je een profielfoto uploaden:

Ik had alleen req.file.avatar gebruikt maar dan komt er "null" te staan als waarde in de database.

Na gegoogled te hebben kwam ik erachter dat er een path module is die het hele pad ophaalt. Via nodejs.org heb ik meer informatie opgezocht over de path module. nodejs.org/api/path

Ik heb de path module gebruikt en nu komt wel het hele pad als waarde in de database.

In de source moet /static/weg worden gelaten. Dit kan worden gedaan met .replace (Mozilla, hiermee vervang ik het /static/ gedeelte met leegte.

Dit is dan de code voor het hele pad wat in de img src moet staan in de html:

Ik heb er dit van gemaakt en nu werkt het: res.send(Avatar succesvol toegevoegd.); Ik denk dat het probleem de ' haakjes waren en dat het dus geen backticks waren.

Ik probeerde te maken dat een gebruiker zijn gebruikersnaam kan wijzigen. Hiervoor heb ik de code over update uit de powerpoint over forms en databases gebruikt, maar ik krijg deze error en ik snapte niet hoezo. Ik heb hulp aan Ivo gevraagd.

Ivo zei dat ik er _id: new ObjectId(req.body.id) van moest maken. Hier kreeg ik ook een error bij.

Ik mijn code voor het toevoegen en wijzigen van een profielfoto erbij gepakt en deze toegepast bij mijn code. Hierdoor heb ik updateOne({ username: username }, gebruikt in plaats van ObjectId gebruiken. Ook heb ik voor het gemak een constante voor req.body.updatedUsername aangemaakt. Dus nu zoekt hij naar de username van de user waarmee de sessie is gestart en wordt deze username aangepast naar wat er in het form is ingevuld. Vervolgens wordt de gebruiker geredirect naar de inlogpagina waar hij opnieuw kan inloggen.

Ik kreeg als nieuwe wachtwoord waarde "null" terug.

Ik vroeg aan ChatGPT waarom ik als waarde "null" terug kreeg. Ik was vergeten om "err" toe te voegen aan de bcrypt.hash.

Dit is hoe ik het email wijzigen heb gedaan. Hiervoor heb ik de code voor het wijzigen van een gebruikersnaam gebruikt. In plaats van opnieuw moeten inloggen, wordt de gebruiker meteen opnieuw herleidt naar de "my account" pagina waar het nieuwe emailadres meteen zichtbaar is.

Het is gelukt om het account uit de database te verwijderen, maar na het verwijderen kreeg ik deze error. Hij wil de pagina "my account" nog laden, omdat de sessie nog steeds bezig is, maar er dus geen gebruiker meer is waarvan hij de data kan ophalen.

Ik heb dit opgelost door na het verwijderen van het account de sessie te beëindigen.

Op dinsdag 2 april hebben wij een grote merge gedaan. Hierbij heb ik mijn code naar testing gepusht en vervolgens heb ik samen met Esmé haar code ook naar testing gepushed. Hierbij hebben wij samen de merge conflicten opgelost. Dit was de eerste keer dat wij onze backend codes hebben samengevoegd. Dit is succesvol gegaan.

.env bestand was zichtbaar op GitHub

Ging de .gitignore checken en ik zag dat er overal een sterretje voor stond. Hierdoor werken die bestanden niet genegeerd.

Na de sterretjes weg te hebben gehaald en het wachtwoord veranderd te hebben, ging ik het pushen en checken of .env nog steeds op GitHub te zien was. Dit was helaas nog steeds zo, ook al stond het nu wel goed in de .gitignore.

Op google ging ik zoeken naar een oplossing voor dat mijn .env bestand nog steeds op GitHub werd vertoond, ook al staat het in de .gitignore. op stackoverflow vond ik een antwoord hierop. Het kwam doordat .env ooit online stond, dat dat nu niet genegeerd meer wordt. Om dit op te lossen moest ik het .env bestand uit de cache verwijderen met een command.

Ik had een idee voor een stukje code waarmee je via een knop, met daarachter een form met een post-request en een input met subit, een item aan jouw favorieten kon toevoegen. Echter werkte dit niet meteen. Esmé ging verder met het uitwerken van de "favorieten" functie, dit was tevens ook haar taak. Hieronder is de voor mijn ideetje te zien:

Wij hebben erg veel afbeeldingen, omdat elke auto uit de api een eigen afbeelding bevat. Dit zijn er ongeveer 50. Het is veel werk om die allemaal zelf te moeten compressen, daarom wilde ik de module Imagemin proberen te gebruiken. Ik heb de code overgenomen die op de imagemin pagina van de npmjs site staat. Helaas kreeg ik hierbij een error.

Ik heb hulp gevraagd aan Ivo en hij legde mij uit dat de Imagemin module een module is die je niet constant hoeft uit te voeren, maar eigenlijk maar 1x om je plaatjes 1x kleiner te maken. Ik kwam erachter dat deze module dus anders werkt dan ik dacht en heb ervoor gekozen om deze nu niet toe te passen in het project.

Op vrijdag 5 april hebben wij een tweede grote merge naar testing gedaan. Hierbij heeft eerst Furkan zijn code voor build, sorteren en filteren gepusht, daarna Esmé haar backend code voor favorieten en daarna ik mijn complete backend code en alle pagina's die ik van HTML naar EJS heb omgezet. Toen ik mijn code wilde mergen kreeg ik een conflict-melding:

Er waren een aantal conflicten die ik zelf rustig heb opgelost. Dit waren de conflicten:

Het mergen was succesvol gegaan.

• Index
• Signup
• Login
  • Logged in
  • Notloggedin
• Build
• Account
  • Update_email
  • Update_password
  • Update _ username
  • Delete_account
  • Account deleted

Nb. Wees specifiek ('css-tricks' als bron is bijv. niet specifiek genoeg). Nb. ChatGpT en andere AI horen er ook bij. Nb. Vermeld de bronnen ook in je code.

1. Voorbeeld code voor formulier op: de project tech GitHub.
2. Informatie over node path module op: nodejs.org
3. Uitleg over .replace op: Mozilla
4. Oplossing voor gitignore env file op: stackoverflow
5. ChatGPT 3.5
6. Uitleg over imagemin op: de npmjs site