Eine Prise PHP: Serverseitige Techniken zur Unterstützung von Frontend-Aufgaben

Der folgende Beitrag ist ein Gastbeitrag von Zachary Brady. Zachary nimmt uns mit auf eine Reise für Anfänger, um mit PHP einige Dinge zu erledigen, die wir Frontend-Entwickler manchmal tun müssen. Meiner Meinung nach macht uns diese Art von Dingen nicht zu Backend-Entwicklern, sondern zu ressourcenstärkeren Frontend-Entwicklern. Zachary konzentriert sich hier auch auf PHP, aber die gleichen Konzepte sind in jeder Backend-Sprache verfügbar.

PHP hat manchmal einen schlechten Ruf, doch es besteht fort und gedeiht nicht nur in einigen der beliebtesten CMSs, sondern auch in aufkommenden Strategien wie Responsive Design mit serverseitigen Komponenten (RESS). Ich habe festgestellt, dass das Einbringen einer kleinen Menge PHP in meinen Frontend-Entwicklungs-Workflow den Code stärkt und den Entwicklungsprozess beschleunigt.

Es ist weder sehr schwierig noch zeitaufwendig, genug Grundlagen von PHP zu erlernen, um es in Ihre Werkzeugkasten aufzunehmen. Lassen Sie uns gleich entdecken, wie das Mischen von serverseitigen Skripten in Ihre Frontend-Entwicklung sowohl einfach als auch lohnend sein kann.

Erste Schritte mit einigen PHP-Grundlagen

Wenn Sie sich mit den Grundlagen von PHP auskennen, springen Sie ruhig zum nächsten Teil. Für den Rest von uns kann es gut sein, sich ein wenig aufzufrischen.

Als serverseitige Sprache wird eine PHP-Datei (wie index.php oder myAwesomeCatPhotos.php) von Ihrem Server in HTML verarbeitet, bevor sie an den Browser gesendet wird. Aus diesem Grund **müssen** Sie Ihre PHP-Dateien auf einem Server hosten, während Sie mit ihnen arbeiten. Dies kann entweder ein Remote-Server oder ein lokaler Server sein, der sich auf Ihrem Computer befindet. Dies ist dank Software wie MAMP tatsächlich recht einfach einzurichten. (Ein Starter-Video gibt es hier auf CSS-Tricks).

Eines der großartigen Dinge an PHP ist, dass Sie es innerhalb einer PHP-Datei mit normalem HTML mischen können.

Die <?php und <? Tags definieren, wo Sie PHP in Ihrer Datei verwenden. **Profi-Tipp**: Wenn Ihre Seiten leer erscheinen, überprüfen Sie zuerst, ob Sie nicht irgendwo ein schließendes PHP-Tag vergessen haben. Die echo-Funktion gibt alles aus, was danach kommt, direkt in das Markup. In diesem Fall wird ein String mit den Worten „Hello World“ „ausgegeben“. In PHP ist das Beenden einer Anweisung mit einem Semikolon **zwingend erforderlich**; fehlende Semikolons sind eine weitere häufige Ursache für fehlschlagende Skripte. Dieses einfache PHP wird übersetzt in

<code>

<code>

Variablen in PHP können als $einWort, $vieleWorte, $sehrVieleZahlen, $a4 usw. geschrieben werden. Die wichtigste Zutat ist das **$** am Anfang des Variablennamens.

<code>

Mit Variablen könnten wir den vorherigen Code so schreiben

<code>

<code>

PHP hat auch for-Schleifen und if-Anweisungen. Eine if-Anweisung stellt eine Frage und führt eine Aufgabe aus, wenn die Frage wahr ist, und kann mit einer else-Anweisung gekoppelt werden, die eine Aufgabe ausführt, wenn die Frage falsch war.

<code>

<code>

Wenn $a gleich 7 ist, wird der erste String ausgegeben, aber wenn $a etwas albernes wie 5 ist, wird die zweite Anweisung ausgegeben.

<code>

Eine for-Schleife wird verwendet, um einen Codeblock zu wiederholen, solange eine bestimmte Bedingung erfüllt ist.

<code>

<code>

Dies besagt, dass wir eine Variable namens $d auf 0 setzen, dass wir den Wert von $d ausgeben, solange er kleiner als 7 ist, und dass wir $d am Ende jeder Iteration um eins erhöhen. Dies ergibt „0123456“.

<code>

Wir werden auch die Funktion include() verwenden, die den relativen Pfad einer anderen PHP-Datei nimmt, die durch den Pfad angegebene Datei findet und ihren Inhalt in die Datei einfügt, aus der sie aufgerufen wird.

<code>

Es gibt noch viel mehr zu PHP als das, aber diese Grundlagen werden uns durch den Rest des Artikels führen. Wenn Sie sich bei PHP noch etwas unsicher sind, empfehle ich, zuerst weiterzulesen und sich dann noch ein wenig aufzufrischen. Das Sehen dieser Konzepte im Kontext kann Ihnen helfen, sie besser zu verstehen.

<code>

Einfaches PHP-Templating

<code>

Sie werden feststellen, dass beim Erstellen Ihres Markups für jede Seite Ihres Projekts bestimmte Teile sich wiederholen. Die am häufigsten wiederholten Teile in einem Webprojekt sind der **Header** und der **Footer**.

<code>

Typischerweise müssten wir, wenn wir etwas im Header unserer Website ändern müssen, den Header manuell in jeder Datei unseres Projekts bearbeiten. Hier tritt PHP auf, um unsere Arbeit zu erleichtern. Mit PHP können wir das Markup für den Header unseres Projekts in einer eigenen Datei speichern und die Funktion include() verwenden, um den Code zu unseren Dateien hinzuzufügen. Wir können natürlich dasselbe mit dem Footer-Element und jedem anderen Schnipsel tun, den wir auf mehreren Seiten verwenden möchten.

<code>

<code>

In diesem Beispiel sind header.php und footer.php in einem Verzeichnis namens „includes“ gespeichert und werden jeweils in der Datei referenziert. Stellen Sie sich vor, wie viel Entwicklungszeit allein mit diesem Trick gespart werden kann.

<code>

Auslieferung unterschiedlicher Dateien je nach Seite

<code>

Ein Nachteil der Auslieferung desselben Headers und Footers auf jeder Seite ist, dass wir standardmäßig weniger Kontrolle darüber haben, welche Dateien für die verschiedenen Seiten ausgeliefert werden. Wir haben möglicherweise eine JavaScript-Datei für einen Bildschieberegler, die wir nur auf der Homepage benötigen, oder ein Skript für die Formularvalidierung auf der Kontaktseite. Glücklicherweise gibt es einen weiteren einfachen Trick, der uns dabei helfen kann.

<code>

Um diesen Trick auszuführen, muss ich zuerst den Namen der aktuellen Datei ermitteln und die Dateierweiterung davon entfernen.

<code>

<code>

Die erste Zeile ruft den Namen der Datei vom Server ab, während die zweite Zeile die Dateierweiterung davon entfernt (die zweite Zeile ist eher kosmetisch, um Ihren Code etwas sauberer zu machen, aber ich empfehle sie trotzdem). Ich pflege, diese Codezeile ganz oben in meine Dateien zu schreiben, noch bevor ich meinen <?php-Tag öffne; dies ermöglicht es mir, diese Daten für eine Vielzahl von Zwecken zu verwenden, wie z. B. die Generierung von Klassennamen.

<code>

Der zweite Teil dieses Tricks, die Entscheidung, welche Skripte für welche Seite ausgeliefert werden, kommt in den Footer vor dem schließenden Body-Tag. Wir verwenden eine Kombination aus if/else-Anweisung, um zu prüfen, ob die aktuelle Seite die **Kontaktseite** ist. Wenn es sich um eine solche handelt, wird ein Skript-Tag mit meinem contact.min.js-Datei ausgegeben, wenn nicht, geben wir die Datei global.min.js aus.

<code>

';
  } else { 
    echo '<script src="js/global.min.js"></script>';
  }
?&gt;

Diese Technik kann mit jeder Art von externer Datei verwendet werden, die Sie einschließen möchten. Ich verwende sogar gerne Grunt, um mein JavaScript in seiten- oder abschnittsspezifische Dateien zu organisieren und dann diese Technik zu verwenden.

Ein wenig RESS kann viel bewirken

Wir können das obige Beispiel noch weiterführen und eine ähnliche Technik verwenden, um unterschiedliche Dateien je nach Gerätekontext bereitzustellen. Dies ist ein sehr einfaches Beispiel für eine RESS-Lösung. RESS, Responsive Design mit serverseitigen Komponenten, bedeutet einfach, dass Sie ein wenig serverseitige Logik in Ihr Responsive-Design-Toolkit einbauen, um fantastische Dinge zu tun, wie z. B. das Reduzieren des Seiten­gewichts.

Dafür benötigen wir eine PHP-Bibliothek namens Mobile Detect, die eine einfache Möglichkeit bietet, den Gerätetyp Ihrer Benutzer zu ermitteln. Fügen Sie die Bibliothek irgendwo in Ihr Projekt ein, ich lege sie gerne in ein Verzeichnis „scripts“ und verwende dann die Funktion require_once, um sie einzubinden. Sie müssen auch eine Instanz der Klasse Mobile_Detect initialisieren, was ich gerne direkt nach dem Include in meiner Header-Datei mache.

<code>

Nun kann ich im Footer ein if/else-Paar verwenden, um zu entscheiden, ob der Benutzer ein mobiles Gerät verwendet oder nicht, und die entsprechende JavaScript-Datei auszuliefern. **HINWEIS**: Da Mobile Detect Tablets als mobile Geräte betrachtet, überprüfe ich auch, ob das Gerät kein Tablet ist.

<code>

    isMobile() && !$detect->isTablet()) {
    echo '<script src="js/global-mobile.min.js"></script>';
  } else{ 
    echo '<script src="js/global.min.js"></script>';
  }
?&gt;

<code>

Mit dieser Technik können wir JavaScript erstellen, das besser für ein mobiles Erlebnis geeignet ist, und all das zusätzliche Seiten­gewicht vermeiden, das von großbildschirmbezogenem JavaScript stammen kann.

<code>

Automatische Markup-Muster

<code>

Sie stellen möglicherweise fest, dass Sie bestimmte Markup-Muster haben, die zwar nicht denselben Inhalt teilen, aber einander sehr ähnlich sind. Eine häufige Situation kann das Anzeigen einer Gruppe von Bildern sein, die zum selben Galerieobjekt gehören. Glücklicherweise zeigte Lara Schenck kürzlich eine solche Lösung in einem wunderbaren Vortrag, den sie auf der Smashing Conference NYC Jam Session hielt.

<code>

// Function to print images
function printGalleryItem($path, $alt) {
  echo '

';
}

// Loop through image directory and printGalleryItem markup for each
function printGallery($dir, $alt) {
  echo '

';
}

<code>

In PHP ist es, wie in anderen Sprachen auch, möglich, eigene benutzerdefinierte Funktionen zu erstellen, um die Wiederverwendung Ihres Codes zu erleichtern.

<code>

Die erste Funktion, printGalleryItem(), nimmt einen relativen Pfad zu einem Bild und Text für seinen Alt-Tag und gibt einen Bild-Tag mit einem Div-Container aus. Die zweite Funktion, printGallery(), nimmt den relativen Pfad zu einem Verzeichnis, das Bilder enthält, und einen String, der für die Alt-Tags der Bilder verwendet werden soll. Die Funktion gibt zuerst einen Container für die Galerie aus und verwendet dann eine Variante der for-Schleife namens foreach, um durch ein Array von Bildpfaden zu iterieren, die von der glob-Funktion abgerufen wurden, und sie auf unsere printGalleryItem()-Funktion anzuwenden. Die foreach-Funktion ist sehr nützlich, wenn Sie durch ein Array von Variablen iterieren und mit den Werten jedes einzelnen etwas tun müssen.

<code>

Es gibt einige fortgeschrittenere Konzepte, die ich in diesem Beispiel nur oberflächlich erwähne. Vorerst reicht es aus, zu verstehen, was diese Funktionen tun und wie sie bei Ihrer Produktion helfen können. Es wäre jedoch gut, sich auch die foreach- und glob-Funktionen anzusehen, wenn Sie die Gelegenheit dazu haben. Versuchen Sie, eigene Funktionen zu erstellen, um einige der redundanteren Aspekte Ihres Markups zu automatisieren.

<code>

Das ist nur die Spitze des Eisbergs

<code>

Es gibt eine ganze Welt von Möglichkeiten, was Sie mit ein wenig PHP in Ihrer Entwicklung tun können. Die meisten der nützlichsten Code-Schnipsel sind auch recht einfach zu verstehen, und je mehr Sie sich PHP aussetzen, desto einfacher wird es. Etwas Logik auf dem Server auszuführen, bevor eine Seite an den Browser gesendet wird, kann Ihnen Entwicklungszeit sparen, Ihrem Code mehr Robustheit verleihen und sogar Ihre Seiten leichter machen.

<code>

Die in diesem Artikel erwähnten Techniken sollten ein guter Ausgangspunkt für Sie sein, egal ob Sie neu in PHP sind oder nur neu in der Verwendung von PHP auf diese Weise. Ich empfehle dringend, natürlich noch ein wenig weiter zu graben und sich nie zu scheuen, zu experimentieren; kaputter Code kann immer repariert werden. Und hey, vielleicht stellen Sie am Ende fest, dass Sie PHP lieben.