structure

Application Structure

Client / server flow

Wat hier gebeurd is dat op de client side 4 pagina's zijn met formulier elementen. De data hiervan wordt pas geladen na de laatste stap. Om dit mogelijk te maken wordt de data wel gepost op de server maar het wordt op de volgende pagina als hidden gezet in de HTML. Hierdoor is het voor de client side niet zichtbaar maar is de data wel verzameld. Pas als het laatste formulier is ingevuld wordt de data opgeslagen in de date base waarvan de data vervolgens op de profiel pagina wordt weergeven.

Welke data wordt er verzameld

In mijn feature gebruik ik verschillende inputs waarvan de data wordt opgeslagen. Deze data wordt uiteindelijk weergegeven op de profielpagina met uitzondering van het email adres en de telefoonnummer aangezien dat persoonlijke informatie is. De volgende data wordt verzameld:

• Gebruikersnaam
• Geboorte datum/Leeftijd
• Telefoon nummer
• Profiel foto
• About me tekst

Wat gebeurt er met de data

De data die in de forms wordt ingevuld wordt naar MondoBG gestuurd en opgeslagen als user. Vervolgens wordt deze data wordt geladen op de profiel pagina. Deze opgeslagen data wordt vervolgens op de profiel pagina getoond. Ook heb ik een afbeelding verwerkt maar die laad ik in de HTML via de server. Als ik meer tijd had gehad was ik me gaan verdiepen in hoe je afbeeldingen op de database kan opslaan en via de database kan inladen.

Routes

Aangezien mijn Feature van het profiel pagina aanmaken uit meerder pagina's bestaat heb ik daarvoor bijpassende routes bedacht. Je vult namelijk eerst de basis gegevens in voor je nieuwe profiel. Daarna kan je een profiel foto uploaden. Dit formulier wordt weer gepost en dan krijg je de pagina waar je een about me kan schrijven. Dan post je de data naar de Database en selecteer je de artist en bands waar je naar luistert. Als laatst haalt de profiel pagina de data op en zet het neer. Als je naar een link gaat die niet bestaat ga je naar de 404.

Wat hieronder staat lijkt heel veel maar dat komt omdat ik van meerdere formulieren de data in een keer wil opslaan. En ik de data vervolgens op de profiel pagina wil tonen.

// Make new profile page
app.get('/new-profile',(req, res) => {
  res.render('make-profile.ejs', { username: '', age: '', tel: '' });
})

// Upload profile picture page
app.post('/upload-picture',(req, res) => {
  const { username, age, tel, file } = req.body;
  res.render('upload-picture.ejs', { username, age, tel, file });
})

// Fill in about info
app.post('/new-about', (req, res) => {
  const { username, age, tel, file, about } = req.body;
  res.render('make-about.ejs', { username, age, tel, file, about });
});

// Select the band/artist page
app.post('/select-artists', async (req, res) => {
  const { username, age, tel, file, about } = req.body;

  const userData = {
    username: username,
    age: age,
    tel: tel,
    file: file,
    about: about,
  };

  try {
    await client.connect();

    const db = client.db(dbName);
    const collection = db.collection(collectionName);

    await collection.insertOne(userData);

    console.log('Gebruikersgegevens succesvol opgeslagen in MongoDB');

    res.render('select-artists.ejs', { items: artists, username, age, tel, file, about });
  } catch (error) {
    console.error('Er is een fout opgetreden bij het opslaan van de gegevens:', error);
    res.render('error-page.ejs');
  } finally {
    await client.close();
  }
})

// User profile
app.get('/profile', async (req, res) => {
  try {
    await client.connect();

    const db = client.db(dbName);
    const collection = db.collection(collectionName);

    const userData = await collection.findOne({}); // Haal de gegevens op, je moet mogelijk een query specificeren

    if (userData) {
      const profileData = {
        username: userData.username,
        age: userData.age,
        file: userData.file,
        about: userData.about
      };

      res.render('profile', { profileData: profileData });
    } else {
      // Geen gegevens gevonden, handel dit op de gewenste manier af
      res.render('profile', { profileData: null });
    }
  } catch (error) {
    console.error('Er is een fout opgetreden bij het ophalen van de gegevens:', error);
    res.render('error-page.ejs');
  } finally {
    await client.close();
  }
});

// 404 error if page is not found
app.use((req, res, next) => {
  res.status(404).render('error.ejs');
});

Conclusie

Het maken van routes ging vrij simpel en had ik de werking ervan ook snel door. Het meest lastige voor mij was de data opslaan van meerdere formulieren op 1 moment. Daar liep ik steeds mee vast maar het is me gelukt. Ook vond ik het heel interessant om Node, EJS en een localhost te gebruiken inplaats van een standaard HTML file die je in je browser opent.