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.
Vorbereitung
Die Datenbank
Eine Tabelle 'content' mit den Spalten
id, title, description, teaser, imgpath, created_at
Eine Tabelle 'users' mit den Spalten
id, username, email, password, forename, familyname, created_at
Erstell auch einen Testeintrag in der 'content'-Tabelle in der Datenbank
username und email haben einen Schlüssel dabei, da sie auf „unique“ gesetzt sind in der Datenbank. Bedeutet: dürfen nur einmal vorkommen.
inc/login.inc.php
Die index.php
Die index.php besteht aus einer grundlegenden HTML Struktur. In meinem Beispiel (siehe linker Screenshot) binde ich Bootstrap ein und tausche hier auch gleich die jQuery Versionen aus. Wenn man Bootstrap von der offiziellen Seite einbindet, wird die jQuery Slim Version verwendet. Prinzipiell keine schlechte Idee, sofern man nicht mit Ajax arbeiten will. Daher den Link austauschen durch die minified Version von jQuery.
Außerdem arbeite ich gern mit Icons, weshalb ich mir den CDN Link für Fontawesome hole.
Um nicht die üblichen Verdächtigen bei den Schriften nehmen zu müssen, binde ich über Google Font zwei Schriften ein. Eine Handschrift für die Überschriften und eine gut lesbare (z.B.: Raleway, …). Das deklarier ich dann auch in meinem ‚css/custom.css‘.
Mein Design beginnt mit einem Slider von Bootstrap und Bildern von, da es ein Übungsprojekt ist, Unsplash (Achtung, die Bilder sollten für den Slider im Querformat sein und die selbe Abmessung haben sonst kann es sein, dass die Seite zu hüpfen anfängt), einem animierten Einführungstext (schöne Erklärung dazu von den Kulturbanausen) und den Wiki Einträge, dargestellt mit der Card Column von Bootstrap, die in einer Div-Box mit der Klasse container eingebettet ist.
inc/head.inc.php
Grundgerüst index.php
include();include('inc/login.inc.php');
Jetzt zu den Datensätzen. Auf der Startseite benötigen wir vorerst mal die id, title, teaser, imgpath. Das Ergebnis wird in eine Variable gespeichert.
$result = $con->query("SELECT id, title, teaser, imgpath FROM content");
var_dump($result); können wir uns anschauen was sich da drin befindet.Hier seht ihr jetzt ein Objekt. Dieses Objekt zeigt, dass wir 4 Felder haben und (ich hab ein paar mehr Daten schon in der Datenbank) acht Datensätze vorhanden sind.
while-Schleife.Mit
fetch_assoc() wird eine Zeile aus dem Objekt abgerufen und als assoziatives Array in die Variable $entry abgespeichert.Erklärungen zu den Unterschieden zu: PHP Mysql Fetch Association Vs Fetch Array Vs Fetch Object Performance Analysis