First Cycle

The purpose of this project is to design a Squad page as a server-side website using express, node, and a database

analyze

based on the instructions the approach was to research express, node.js, and how to implement them in the project. and to make filters and routs to show data on the Squad page

ontwerp

the idea was to create a game-like website that also works as a squad Page.

bouwen

i copied the necessary HTML, CSS, and Javascript of the profile-card to make the new squad page, then I tried using URL filters, POST and GET route to show the necessary information.

app.get('/', function (request, response) {
  // Haal alle personen uit de WHOIS API op
  fetchJson(apiUrl + '/person').then((apiData) => {
    // apiData bevat gegevens van alle personen uit alle squads
    // Je zou dat hier kunnen filteren, sorteren, of zelfs aanpassen, voordat je het doorgeeft aan de view

    // Render index.ejs uit de views map en geef de opgehaalde data mee als variabele, genaamd persons
    response.render('index', {persons: apiData.data, squads: squadData.data, data: data.data})
    // response.render('index', data)

  })
})

<section class="window_content">

    <a href="/">Back</a>
    <h1>Students of </h1>
    <h2><%= data.name %></h2>
    
    <p>Squad: <%= data.squad_id %>
    <ul>
        <% persons.forEach(person => { %>
            <li><a href="./person/<%= person.id %>"><%= person.name %></a>, squad_id <%= person.squad_id %>,<%= person.prefix %></li>
        <% }) %>
    </ul>

</section>

Integrating and testing

I ran NPM start to start the node server where the page will be locally hosted. this helped confirm that the integration was a success.