Vorwort
Diese Anleitung wurde für Schulungszwecke erstellt, weshalb einiges nicht als fertiger Code zur Verfügung steht. Es soll keine Copy-Paste-Übung werden 😅
Sollte etwas unverständlich oder inkorrekt sein, bitte ich um Feedback um es beheben zu können. Nobody is perfect.
In diesem kleinen Projekt, werden noch keine Abhängigkeiten in der Datenbank berücksichtigt. Das Einbauen der Kategorien folgt in einem der weiteren Teile.
Wenn ich von „Meinem Design/Startseite“ spreche, erkläre ich damit mein Layout, was bei euch natürlich wieder anders aussehen bzw. gelöst werden kann.
Details mit Ajax in ein Modal laden
Um die Daten aus der Datenbank anzuzeigen, ohne die Seite zu verlassen oder neu zu laden, benötigen wir zu Anfang das Grundgerüst eines Modals in der index.php. Jedoch nicht das ganze.
Anmerkung: Falls ihr euch jetzt fragt, was das „inc“ zwischen Dateiname und Endung bedeutet… Es kennzeichnet das File in der Ordnerstruktur als „included“, also dass es irgendwo eingebunden wird. Wir sind aber in der index.php noch nicht ganz fertig.
Die Ajax-Magic
Das Ajax-Script schaut in seiner Grundstruktur eigentlich fast immer gleich aus…
Vor dem Script muss jQuery geladen werden. Sonst funktioniert der Spaß nicht.
Ein Beispiel für Ajax mit JSON zum Anschauen findet ihr auf itsolutionstuff.com
Ein weiteres Beispiel ohne JSON mit Erklärungen findet ihr findet ihr auf freecodecamp.org
„Ajax (Asynchronous JavaScript and Xml) ist ein Konzept, das es Webanwendungen ermöglicht, neue Daten vom Server zu erhalten und/oder dem Server für die weitere Verarbeitung zu senden, ohne dass die Seite als Ganzes neu geladen wird.“
– wiki.selfhtml.org am 03.05.2020 aufgerufen (Der Artikel ist eine gute Einführung in Ajax)
Eine genau Beschreibung über diesen asynchronen HTTP request findet ihr auf der offiziellen jQuery Seite