4 Fragen zu Webanwendung

c) Der Server PHP wird typischerweise auf der Serverseite verwendet, um serverseitige Skripte auszuführen und dynamische Inhalte zu generieren, die dann an den Browser Benutzers ges werden.

Der Aufwand, eine bestehende Webanwendung von [Bulma](https://bulma.io/) nach [Bootstrap](https://getbootstrap.com/) umzuprogrammieren, hängt von mehreren Faktoren ab: **1. Umfang der Anwendung:** Je größer und komplexer die Anwendung, desto mehr Code muss angepasst werden. **2. Nutzung von Bulma-Komponenten:** Wenn viele Bulma-spezifische Klassen und Komponenten verwendet werden, ist der Aufwand höher, da du alle Klassen und Strukturen auf die entsprechenden Bootstrap-Pendants umstellen musst. **3. Individuelle Anpassungen:** Eigene CSS-Anpassungen oder Überschreibungen, die auf Bulma basieren, müssen ebenfalls überprüft und ggf. neu geschrieben werden. **4. JavaScript-Funktionalitäten:** Bootstrap bringt eigene JavaScript-Komponenten mit, während Bulma weitgehend ohne JavaScript auskommt. Falls du Bulma mit eigenen Skripten ergänzt hast, musst du prüfen, ob Bootstrap dafür bereits Lösungen bietet oder ob Anpassungen nötig sind. **5. Layout-Struktur:** Das Grid-System und die Utility-Klassen unterscheiden sich zwischen Bulma und Bootstrap. Das bedeutet, dass du das gesamte Layout (z.B. Spalten, Container, Abstände) anpassen musst. **Fazit:** Der Wechsel ist in der Regel **aufwendig**, da du nicht einfach die CSS-Datei austauschen kannst. Es ist notwendig, die HTML-Struktur und die verwendeten Klassen systematisch zu überarbeiten. Für kleine Projekte kann das in wenigen Tagen erledigt sein, bei größeren Anwendungen kann es deutlich länger dauern. **Empfehlung:** Erstelle eine Liste aller verwendeten Bulma-Komponenten und -Klassen und plane die Migration Schritt für Schritt. Ein automatisiertes Tool für die Umstellung gibt es nicht, daher ist Handarbeit gefragt. **Tipp:** Überlege, ob der Wechsel wirklich notwendig ist, oder ob es Alternativen gibt (z.B. nur bestimmte Komponenten zu ersetzen oder beide Frameworks parallel zu nutzen, falls sich die Klassen nicht überschneiden).

Um eine Schlagwortsuche (Keyword-Suche) in einer Webanwendung auf Basis einer vorhandenen index.json zu realisieren, gehst du typischerweise wie folgt vor: **1. index.json einlesen** Lade die index.json-Datei in deine Webanwendung. Das geht z.B. mit `fetch` in JavaScript: ```javascript fetch('index.json') .then(response => response.json()) .then(data => { // data enthält jetzt dein Index-Array }); ``` **2. Datenstruktur verstehen** Schau dir an, wie die Daten in der index.json aufgebaut sind. Typisch ist ein Array von Objekten, z.B.: ```json [ { "id": 1, "titel": "Beispielartikel", "beschreibung": "Dies ist ein Beispieltext.", "schlagworte": ["Beispiel", "Artikel", "Test"] }, ... ] ``` **3. Suchfunktion implementieren** Erstelle eine Funktion, die die Daten nach einem oder mehreren Schlagworten filtert: ```javascript function sucheNachSchlagworten(daten, suchbegriff) { const begriff = suchbegriff.toLowerCase(); return daten.filter(eintrag => eintrag.schlagworte.some( schlagwort => schlagwort.toLowerCase().includes(begriff) ) ); } ``` **4. UI für die Suche bauen** Füge ein Eingabefeld und einen Button hinzu, um die Suche zu starten. Beispiel mit HTML: ```html <input type="text" id="suche" placeholder="Schlagwort eingeben"> <button onclick="starteSuche()">Suchen</button> <div id="ergebnisse"></div> ``` **5. Suchergebnisse anzeigen** Ergänze JavaScript, um die Ergebnisse darzustellen: ```javascript let daten = []; fetch('index.json') .then(response => response.json()) .then(json => daten = json); function starteSuche() { const suchbegriff = document.getElementById('suche').value; const ergebnisse = sucheNachSchlagworten(daten, suchbegriff); document.getElementById('ergebnisse').innerHTML = ergebnisse .map(e => `<div>${e.titel}</div>`) .join(''); } ``` **6. Optional: Mehrere Schlagworte unterstützen** Erweitere die Funktion, um mehrere Schlagworte (z.B. durch Kommas getrennt) zu unterstützen. **Zusammenfassung:** - index.json laden - Datenstruktur analysieren - Filterfunktion für Schlagworte schreiben - Suchfeld und Ergebnisanzeige im Frontend bauen Für komplexere Anforderungen (z.B. große Datenmengen, fuzzy search) kannst du Bibliotheken wie [Fuse.js](https://fusejs.io/) verwenden. **Tipp:** Achte auf die Performance bei großen Datenmengen und erwäge ggf. eine serverseitige Suche.

Eine Webanwendung ist ein Programm, das über das Internet oder ein Intranet zugänglich ist und in einem Webbrowser ausgeführt wird. Im Gegensatz zu herkömmlichen Desktop-Anwendungen, die auf einem bestimmten Computer installiert werden müssen, laufen Webanwendungen auf einem Server und können von jedem Gerät mit Internetzugang und einem Webbrowser genutzt werden. Webanwendungen nutzen Technologien wie HTML, CSS und JavaScript, um interaktive Benutzeroberflächen zu erstellen. Sie können für verschiedene Zwecke eingesetzt werden, darunter E-Commerce, soziale Netzwerke, Online-Banking und viele andere Dienste. Ein Vorteil von Webanwendungen ist, dass sie plattformunabhängig sind und keine Installation auf dem Endgerät erfordern.