Wat is CRUD?

CRUD is een afkorting die de belangrijkste bewerkingen beschrijft die op gegevens worden uitgevoerd:

• Create (Aanmaken): Nieuwe gegevens toevoegen.
• Read (Lezen): Bestaande gegevens ophalen.
• Update (Bijwerken): Bestaande gegevens wijzigen.
• Delete (Verwijderen): Gegevens verwijderen.

In frontend-ontwikkeling komen deze bewerkingen vaak overeen met HTTP-methoden bij interactie met de backend via API:

CRUD-operatie	HTTP-methode	Beschrijving
Create	POST	Gegevens verzenden om te maken.
Read	GET	Gegevens opvragen.
Update	PUT / PATCH	Gegevens verzenden om bij te werken.
Delete	DELETE	Gegevens opvragen voor verwijdering.

Voorbeeld van implementatie in frontend met JavaScript om te communiceren met REST API:

// Stel dat we een user-object hebben en dit op de server willen maken
fetch('/api/users', {
  method: 'POST', // Aanmaken
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'Nieuwe Gebruiker', email: 'nieuwe.gebruiker@voorbeeld.com' }),
})
  .then(response => response.json())
  .then(data => console.log('Gebruiker gemaakt:', data))
  .catch(error => console.error('Fout bij het maken van gebruiker:', error));

// Voorbeeld van gegevens lezen
fetch('/api/users/1') // Voor gebruiker met ID 1
  .then(response => response.json())
  .then(data => console.log('Gebruikersgegevens:', data))
  .catch(error => console.error('Fout bij het ophalen van gebruiker:', error));

// Voorbeeld van gegevens bijwerken
fetch('/api/users/1', {
  method: 'PUT', // Bijwerken
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'Bijgewerkte Gebruiker' }),
})
  .then(response => response.json())
  .then(data => console.log('Gebruiker bijgewerkt:', data))
  .catch(error => console.error('Fout bij het bijwerken van gebruiker:', error));

// Voorbeeld van gegevens verwijderen
fetch('/api/users/1', {
  method: 'DELETE', // Verwijderen
})
  .then(response => {
    if (response.ok) {
      console.log('Gebruiker verwijderd');
    } else {
      console.error('Fout bij het verwijderen van gebruiker:', response.status);
    }
  })
  .catch(error => console.error('Fout bij het verwijderen van gebruiker:', error));