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.

Für den Rest im Modal brauchen wir eine neue Datei: inc/loadModal.inc.php
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)

Das fertige Ajax

 

<script>
Damit jQuery erst ausgeführt wird, wenn alle notwendigen Ressourcen komplett geladen sind ist der Standardaufbau
$(document).ready(function() { /* jQuery-Magic */ }

Es folgt ein Handler (.click()), der reagiert, wenn ich auf den Button mit der Klasse ajaxModal klicke.
$('.ajaxModal').click(function () { ... }

In diesem Button gibt es noch das data-Attribut, der wir die id aus der Datenbank mitgeben. Dadurch wissen wir, welchen Eintrag wir in der Datenbank suchen. Mit var lexikonID = $(this).data('id'); speichern wir uns diese id in die Variable lexikonID.

Mit $.ajax({ ... }) haben wir volle Kontrolle über den Ajax Request. Eine genau Beschreibung über diesen asynchronen HTTP request findet ihr auf der offiziellen jQuery Seite
In den geschwungenen Klammer definieren wir zu allererst wohin der Request gehen soll mit url: '/inc/loadModal.inc.php',
Außerdem geben wir den Typ an: type: 'post',. Da wir in dem File inc/loadModal.inc.php die ID für die Datenbankabfrage brauchen, müssen wir hier auch noch die lexikonID mitschicken.
data: { lexikonID: lexikonID },
Ich nenne hier den Parameter, dem ich den Wert meiner lexikonID zuweise gleich, damit ich in weiterer Folge nicht umdenken muss. Ist somit reine Faulheit von mir.
Jetzt ist der Request mit der lexikonID weggeschickt. Im besten Fall, wenn wir die Logik im loadModal.inc.php geschrieben haben, sollte jetzt eine Antwort kommen.
success: function(response) { ... } sagt nichts anderes als, wenn das ganze bisherige Erfolgreich war, nimm den response und mach damit was in der Funktion. In unserem Fall wollen wir den response in das Modal-Gerüst einfügen: $('.modal-content').html(response); und auch anzeigen $('#showModal').modal('show');

Damit endet unser Skript nach einer Menge Klammern die geschlossen werden müssen.

Das inc/loadModal.inc.php

Da wir in diesem File Daten aus der Datenbank lesen brauchen wir am Anfang wieder unsere include-Anweisung für das login.inc.php File. Das File wird in unser Konstrukt des Modals reingeladen, weshalb wir hier auf das übliche HTML Grundgerüst verzichten können.

Durch unser Ajax-Skript (und wenn wir uns nirgends vertippt haben) sollte hier ein $_REQUEST['lexikonID'] ankommen, das wir in eine Variable speichern. In meinem Quellcode heißt die Variable $entryID

Nun können wir das SQL Statement aufbauen und das Ergebnis in eine Variable speichern:
$result = $con->query("SELECT title, imgpath, description FROM content WHERE id = " . $entryID);

In unserem Ajax-Skript haben wir definiert, dass das Ergebnis im response ist. Somit müssen wir hier eine Variable deklarieren mit dem Namen $response
$response = "<div class='modal-header'>";
Achtung: Ihr verwendet hier außen die doppelten Anführungszeichen, somit müsst die die Klassen in einfache Anführungszeichen setzen.

Mit einer while($entry = $result->fetch_assoc()){ ... } können wir wieder jeden einzelnen Eintrag aus unserem Objekt auslesen und unsere Variable $response erweitern (.= ist das Zeichen Werte in einer Variable hinzuzufügen).
$response .= "<h5 class='modal-title'>" . $entry['title'] . "</h5>";
$response .= "<button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>";
$response .= "</div>";

Hier fehlt noch die Div-Box mit dem Bild und der Beschreibung aus der Datenbank.
Wenn unsere Variable $response fertig zusammen gebaut ist folgt nach der while-Schleife noch ein echo $response; und ein exit;
Damit ist das inc/loadModal.inc.php fertig.