3 Min

Wenn du “was mit Daten” machen möchtest, brauchst du irgendwann CRUD. Ich erklärs dir mal.

Das Akronym steht für Create, Read, Update, Delete (Erstellen, Lesen, Aktualisieren, Löschen) und ist eine der grundlegendsten Aufgaben in der Webentwicklung. Das Verständnis von CRUD-Operationen ist der Schlüssel zum Erstellen dynamischer, datengesteuerter Websites oder Apps. Dieser Spickzettel führt dich durch die grundlegenden CRUD-Konzepte und bietet einfache Erklärungen, Beispiele und Tipps zur Implementierung dieser Operationen. Egal, ob du Anfänger in JavaScript, HTML oder Webentwicklung im Allgemeinen bist, dieser Beitrag wird dir helfen, CRUD besser zu verstehen.

Was ist CRUD?

CRUD steht für Erstellen, Lesen, Aktualisieren und Löschen – die vier grundlegenden Operationen, die Sie an Daten in einer Anwendung durchführen können.

  • Erstellen: Neue Daten hinzufügen (z. B. einen neuen Benutzer hinzufügen, einen neuen Blogbeitrag erstellen)
  • Lesen: Vorhandene Daten abrufen oder anzeigen (z. B. eine Liste von Benutzern oder Blogbeiträgen anzeigen)
  • Aktualisieren: Vorhandene Daten ändern (z. B. das Profil eines Benutzers bearbeiten)
  • Löschen: Daten entfernen (z. B. einen Blogbeitrag löschen)

Übersicht über CRUD-Operationen

CRUD-Operationen werden normalerweise an in Datenbanken gespeicherten Daten durchgeführt und typischerweise mit einer Kombination aus HTML, JavaScript und einem Backend-Server abgewickelt. So funktioniert jede CRUD-Operation konzeptionell und wie sie in Ihrer Web-App implementiert werden kann.

1. Create (C)

Erstellen ermöglicht es Benutzern, der Anwendung neue Daten hinzuzufügen.

So funktioniert es:

  • Der Benutzer füllt ein Formular aus (z. B. ein Anmeldeformular oder ein „Neuer Beitrag“-Formular).
  • Die Formulardaten werden mit einer Methode wie „POST“ an das Backend (den Server) gesendet.
  • Das Backend speichert die Daten in einer Datenbank.

Beispiel:

HTML-Formular zum Erstellen eines neuen Benutzers:

<form id="userForm">
  <input type="text" name="username" placeholder="Benutzername" erforderlich />
  <input type="email" name="email" placeholder="E-Mail" erforderlich />
  <button type="submit">Benutzer erstellen</button>
</form>

JavaScript-Code zum Verarbeiten der Formularübermittlung:

document.getElementById('userForm').addEventListener('submit', function(e) {
  e.preventDefault();

  const formData = {
    username: e.target.username.value,
    email: e.target.email.value,
  };

  fetch('/api/users', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(formData)
    })
    .then(response => response.json())
    .then(data => console.log('Benutzer erstellt:', data))
    .catch(error => console.error('Fehler:', error));
});

2. Read (R)

Lesen ermöglicht das Abrufen und Anzeigen von Daten aus der Datenbank.

Funktionsweise:

  • Das Frontend sendet eine Anfrage an das Backend (normalerweise mit der Methode GET), um Daten abzurufen.
  • Das Backend ruft die Daten aus der Datenbank ab und sendet sie zurück an das Frontend.
  • Das Frontend zeigt die Daten an (z. B. eine Liste von Benutzern, Blogbeiträgen oder Produkten).

    Beispiel:

JavaScript-Code zum Abrufen und Anzeigen einer Benutzerliste:

fetch('/api/users')
  .then(response => response.json())
  .then(users => {
    const userList = document.getElementById('userList');
    users.forEach(user => {
      const listItem = document.createElement('li');
      listItem.textContent = `${user.username} (${user.email})`;
      userList.appendChild(listItem);
    });
  })
  .catch(error => console.error('Error:', error));

HTML-Struktur zur Anzeige von Benutzern:

<ul id="userList"></ul>

3. Update (U)

Update ändert vorhandene Daten, z. B. das Bearbeiten eines Profils oder das Ändern des Inhalts eines Beitrags.

Funktionsweise:

  • Der Benutzer bearbeitet vorhandene Daten mithilfe eines Formulars oder einer Schnittstelle.
  • Die aktualisierten Daten werden an das Backend gesendet (normalerweise mithilfe der Methode PUT oder PATCH).
  • Das Backend aktualisiert den Datensatz in der Datenbank.

Beispiel:

HTML-Formular zum Aktualisieren von Benutzerdaten:

<form id="updateForm">
  <input type="text" name="username" placeholder="Neuer Benutzername" erforderlich />
  <input type="email" name="email" placeholder="Neue E-Mail" erforderlich />
  <button type="submit">Benutzer aktualisieren</button>
</form>

JavaScript-Code zum Aktualisieren des Benutzers:

document.getElementById('updateForm').addEventListener('submit', function(e) {
  e.preventDefault();

  const updatedData = {
    username: e.target.username.value,
    email: e.target.email.value,
  };

  fetch('/api/users/1', { // Angenommen, die Benutzer-ID ist 1
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(updatedData)
    })
    .then(response => response.json())
    .then(data => console.log('Benutzer aktualisiert:', data))
    .catch(error => console.error('Fehler:', error));
});

4. Delete (D)

Löschen entfernt Daten aus der Datenbank, z. B. das Löschen eines Benutzers oder das Entfernen eines Blogbeitrags.

Funktionsweise:

  • Der Benutzer klickt auf eine Schaltfläche, um Daten zu löschen.
  • Das Frontend sendet eine Anfrage an das Backend mit der Methode DELETE.
  • Das Backend entfernt die Daten aus der Datenbank.

Beispiel:

JavaScript-Code zum Löschen eines Benutzers:

function deleteUser(userId) {
  fetch(`/api/users/${userId}`, {
      method: 'DELETE'
    })
    .then(response => response.json())
    .then(data => console.log('Benutzer gelöscht:', data))
    .catch(error => console.error('Fehler:', error));
}

// Angenommen, es gibt eine Löschtaste für den Benutzer mit der ID 1
document.getElementById('deleteBtn').addEventListener('click', () => deleteUser(1));

HTML für eine Löschtaste:

<button id="deleteBtn">Benutzer löschen</button>

CRUD in der Praxis: Tipps für Anfänger

  1. Klein anfangen: Wenn Sie CRUD-Operationen lernen, beginnen Sie mit dem Erstellen kleiner Anwendungen, wie einer einfachen Aufgabenliste oder einem einfachen Benutzerverwaltungssystem.

  2. RESTful-APIs verwenden: CRUD-Operationen werden häufig um RESTful-APIs herum erstellt. Erfahren Sie, wie HTTP-Methoden (GET, POST, PUT, DELETE) CRUD-Aktionen zugeordnet werden.

  3. Konzentrieren Sie sich auf die Sicherheit: Wenn Sie CRUD-Operationen durchführen, stellen Sie sicher, dass Ihre App über grundlegende Sicherheitsmaßnahmen verfügt, wie z. B. die Validierung von Benutzereingaben und die Authentifizierung von Anfragen.

  4. Üben Sie mit JSON-Daten: Da die meisten CRUD-Anwendungen mit Daten arbeiten, werden Sie beim Senden von Daten zwischen Frontend und Backend häufig mit JSON arbeiten.

  5. Testen Sie Ihre API-Aufrufe: Verwenden Sie Tools wie Postman oder cURL, um Ihre CRUD-Operationen zu testen, bevor Sie sie mit Ihrem Frontend verbinden.

Viel Spaß beim Programmieren!

Updated:

Similar Content