structure

Application Structure

Client / server flow:

Wanneer de gebruiker de webpagina opent, wordt de clientzijde geladen. Dit omvat HTML-, CSS- en JavaScript-bestanden die nodig zijn om de gebruikersinterface weer te geven en de interactie met de gebruiker mogelijk te maken.

De gebruiker kan interactie hebben met de interface, zoals het selecteren van filters of het indienen van formulieren. Wanneer een interactie plaatsvindt, wordt er een HTTP-verzoek van de client naar de server gestuurd. Dit kan bijvoorbeeld een GET- of POST- verzoek zijn, afhankelijk van de actie die wordt uitgevoerd.

De server ontvangt het verzoek en verwerkt het.

De server stuurt een HTTP-respons terug naar de client met de gevraagde gegevens of bevestiging van de uitgevoerde actie.

De client ontvangt de respons en werkt de gebruikersinterface dienovereenkomstig bij.

Hieronder een voorbeeld voor het verwerken van je inloggegevens:

app.get("/login", (req, res) => {
  res.render("login", { loginFailed: "" });
});

app.post("/login", async (req, res) => {
  const { gebruikersnaam, wachtwoord } = req.body;

  try {
    const collection = client.db("register").collection("users");
    const gebruiker = await collection.findOne({ gebruikersnaam });

    if (gebruiker) {
      const match = await bcrypt.compare(wachtwoord, gebruiker.wachtwoord);
      if (match) {
        req.session.isIngelogd = true;
        req.session.username = gebruikersnaam;
        return res.redirect("/user");
      }
    }

    res.render("login", {
      loginFailed: "Deze gebruikersnaam en/of wachtwoord is onjuist!",
    });
  } catch (error) {
    console.error(error);
    res.status(500).send("Er is een fout opgetreden bij het inloggen");
  }
});

Gegevens verzenden van de client naar de server:

De client kan verschillende soorten gegevens naar de server sturen, afhankelijk van de actie die wordt uitgevoerd. Dit kan queryparameters, formuliergegevens, JSON-payloads, enz. zijn. Bijvoorbeeld, bij het filteren van auto's, kan de client de geselecteerde filters (zoals merk en soort auto) naar de server sturen om de lijst met auto's te filteren op basis van deze criteria.

Hieronder een voorbeeld voor het invullen van de gegevens in het select formulier op de eerste pagina:

document.addEventListener("DOMContentLoaded", function () {
  // Wachten tot het DOM is geladen voordat de code wordt uitgevoerd
  console.log("DOMContentLoaded event afgevuurd");

  zoekKnop.addEventListener("click", function (event) {
    // Voorkomen dat het standaardgedrag van het klikken op de zoekknop wordt uitgevoerd
    event.preventDefault();

    // Het ophalen van de geselecteerde autotype en automerk uit de HTML-elementen
    const selectedCarType = document.getElementById("soort-auto").value;
    const selectedCarBrand = document.getElementById("soort-merk").value;

    // Doorsturen naar een nieuwe URL met de geselecteerde autotype en automerk als queryparameters
    window.location.href =
      "/autolijst?soort-auto=" +
      selectedCarType +
      "&soort-merk=" +
      selectedCarBrand;
  });
});

Verwerking van gegevens op de server:

Op de serverkant ontvangt de server het verzoek en verwerkt de verzonden gegevens. Dit kan het valideren en filteren van de gegevens omvatten, bijvoorbeeld het controleren van de geldigheid van de ingediende formuliergegevens en het toepassen van filters op de lijst met auto's. De server kan ook communiceren met databases of externe API's om aanvullende gegevens op te halen of bewerkingen uit te voeren.

Hieronder een voorbeeld van het verwerken van de ingevulde gegevens in het select formulier op de eerste pagina:

// Haal de geselecteerde autotype en automerk op uit de queryparameters van de request
    const selectedCarType = req.query["soort-auto"];
    const selectedCarBrand = req.query["soort-merk"];

    // Definieer een Parse-object voor de klasse "Carmodels_Car_Model_List"
    const Carmodels_Car_Model_List = Parse.Object.extend(
      "Carmodels_Car_Model_List"
    );

    // Maak een query voor objecten van de klasse "Carmodels_Car_Model_List"
    const query = new Parse.Query(Carmodels_Car_Model_List);

    // Voeg voorwaarden toe aan de query om alleen auto's van het geselecteerde merk en type op te halen
    query.equalTo("Make", selectedCarBrand);
    query.equalTo("Category", selectedCarType);

    // Voer de query uit en wacht op het resultaat
    const results = await query.find();

    // Maak een lijst van auto-objecten op basis van de queryresultaten
    const carList = results.map((object) => {
      return {
        make: object.get("Make"), // Haal de waarde van het veld "Make" op
        year: object.get("Year"), // Haal de waarde van het veld "Year" op
        model: object.get("Model"), // Haal de waarde van het veld "Model" op
        category: object.get("Category"), // Haal de waarde van het veld "Category" op
      };
    });

Routestructuur:

Voor het organiseren van mijn routes, heb ik het MVC (Model-View-Controller)-patroon gevolgd. De routes worden gebruikt om de verschillende acties en functionaliteiten van de applicatie af te handelen.

Ik heb aparte routes gedefinieerd voor verschillende taken, zoals het ophalen van de startpagina, het verwerken van formuliergegevens, het ophalen van specifieke gegevens, enz. Elk van deze routes is gekoppeld aan een controller die de logica uitvoert om het verzoek te verwerken en een respons terug te sturen naar de client.

Hieronder een aantal routes die ik gebruikt heb:

// Homepagina
app.get("/home", (req, res) => {
  const isIngelogd = req.session.isIngelogd;
  res.render("index");
});

// login
app.get("/login", (req, res) => {
  res.render("login");
});

app.get("/user", (req, res) => {
  const gebruikersnaam = req.session.username;

  res.render("user", { gebruikersnaam });
});

// Render errorpage
app.get("/error", (req, res) => {
  res.render("<h1>ERROR 404 NOT FOUND</h1>");
});

Al met al is mijn applicatie gestructureerd volgens het client-servermodel, waarbij de client de gebruikersinterface biedt en de server de logica en gegevensverwerking afhandelt. De client stuurt verzoeken met gegevens naar de server, die deze verzoeken verwerkt en de gewenste respons terugstuurt.