Laden Sie mit der kostenlosen Template-Engine Smarty verschiedene Textbausteine aus einem Content Ordner und zeigen deren Inhalte auf der Webseite an.
Teil 4 - der Templatebau-Reihe für das überaus populäre Template-System Smarty. Legen Sie nun Ordner für Ihre Texte des Contant an, um verschiedene Inhalte laden zu können.
Ordner für Texte
Wenn Sie sich bis hier vorgearbeitet haben, dann existiert bereits ein erstes Template in Ihrer Smarty Engine das Sie weiter ausbauen sollten. Bisher war das Template nur wenig flexibel und konnte nur einen Content darstellen. In der nächsten Ausbaustufe werden verschiedene Inhalte programmatisch gesteuert ausgegeben. Ordner "texte"
Zu Beginn müssen Sie einen neuen Ordner anlegen in dem Sie zukünftig die reinen Textdefinitionen ablegen werden, Sie trennen dadurch den Content noch besser vom Code.
+-- radelle.de
|
+-- libs
|
+-- texte
| |
| beitrag_a.php
| beitrag_b.php
| default.php
|
+-- templates
| |
| artikel.tpl
|
+-- templates_c
|
index.phpCode
Legen Sie im Ordner texte gleich zwei neue Dateien mit dem Namen beitrag_a.php, default.php und beitrag_b.php an.
beitrag_a.php
In der Datei des Beitrags A können Sie das folgende Listing übernehmen:
01 <?php
02 $titel_var =
03 "Das ist der Titel Beitrag A";
04
05 $anleser_var =
06 "Beitrag A ist der erste Beispieleitrag";
07
08 $inhalt_var =
09 "<p>Der Inhalt des Beitrags A - der Haupttext.</p>";
10
11 $autor_var = "Oliver Lohse";
12 $mail_var = "moc.liamg@tset";
13 $datum_var = "12-2019";
14 $footer_var = "(c) Oliver Lohse";
15 ?>Code
Für Beitrag B ist es exakt das gleiche Listing, nur sollten Sie A durch B ersetzen, um einen Unterschied im Browser sehen zu können. Die Variablen $titel_var, $anleser_var, $inhalt_var, $autor_var, $mail_var, $datum_var und $footer_var werden später noch in der index.php benötigt.
default.php
Die Textkonserve default.php soll einen Inhalt symbolisieren, wenn der Leser keinen Parameter übergibt. Es zeigt dann ein Menü mit Auswahloptionen (Links) zu den Beiträgen.
01 <?php
02 $titel_var =
03 "Default";
04
05 $anleser_var =
06 "Sie muessen eine Wahl treffen";
07
08 $inhalt_var =
09 "<pvDefault wird geladen, der Anwender hat keinen Wert uebergeben.</p>
10 <p><a href='../index.php?artikel=beitrag_a'>Beitrag A</a></p>
11 <p><a href='../index.php?artikel=beitrag_b'>Beitrag B</av</p>";
12
13 $autor_var = "Oliver Lohse";
14 $mail_var = "moc.liamg@tset";
15 $datum_var = "12-2019";
16 $footer_var = "(c) Oliver Lohse";
17 ?>Code
artikel.tpl
Das HTML-Template sollten Sie etwas anpassen. Prinzipiell ist es immer noch das gleiche Template wie Sie es in den ersten Beiträgen gesehen haben, Sie sollten es wie folgt komplettieren.
01 <!DOCTYPE html>
02 <html lang="de">
03 <head>
04 <meta charset="utf-8">
05 <meta http-equiv="X-UA-Compatible" content="IE=edge">
06 <meta name="viewport" content="width=device-width, initial-scale=1">
07 <meta name="description" content="">
08 <meta name="author" content="Oliver Lohse">
09
10 <title>{$titel_tmpl}</title>
11
12 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
13 </head>
14
15 <body>
16
17 <div class="container">
18
19 <br>
20
21 <div class="jumbotron">
22 <h1 class="display-4">{$titel_tmpl}</h1>
23 <hr class="my-4">
24 <p class="lead">{$anleser_tmpl}</p>
25 </divv
26
27 {$inhalt_tmpl}
28
29 <hr class="my-4">
30 {$autor_tmpl} - {$datum_tmpl} - {$mail_tmpl}
30
29 <footer style="position: fixed; padding: 10px; bottom: 0px; left: 0px; right: 0px; background-color: #ffffff; text-align: center;">
30 {$footer_tmpl}
31 </footer>
32
33 </div>
34
35 <br><br>
36
37 </body>
38 </html>Code
Fügen Sie einen CSS-Style hinzu, um es optisch ansprechender zu gesatlten, ich habe mich für Bootstrap (https://getbootstrap.com/) entschieden und es in Zeile 012 eingehängt. Zudem sollten Sie die obligatorischen Angaben zu Metainfos und zur Zeichencodierung ebenfalls eingefügen. Alles was Sie hinter class finden, sind spezielle CSS-Klassen des Bootstrap die lediglich zur Formatierung des Inhaltes dienen, sie machen die Seite "schön". Sie können die CSS-Klassen auch gerne weglassen oder ein anderes CSS-Framework nutzen wie zum Beispiel UIkit (https://getuikit.com/).
index.php
Der zentrale Ausgangspunkt ist nach wie vor die Datei index.php in der Sie wie folgt Kontrollstrukturen implementieren die in der Lage sind externe Parameter auszuwerten.
01 <?php
02 require_once('libs/Smarty.class.php');
03 $smarty = new Smarty();
04
05 @require("texte/default.php");
06 if(isset($_GET['artikel'])) {
07 $artikel = $_GET['artikel'];
08 @require("texte/".$artikel.".php");
09 }
10
11 $smarty->assign('titel_tmpl', $titel_var);
12 $smarty->assign('anleser_tmpl', $anleser_var);
13 $smarty->assign('inhalt_tmpl', $inhalt_var);
14 $smarty->assign('autor_tmpl', $autor_var);
15 $smarty->assign('mail_tmpl', $mail_var);
17 $smarty->assign('datum_tmpl', $datum_var);
18 $smarty->assign('footer_tmpl', $footer_var);
19
20 $smarty->display('artikel.tpl');
21 ?>Code
Die Datei index.php ist in der Zwischenzeit auch etwas erweitert worden, es werden ein Anleser, der Autor und ein Datum zusätzlich gefüllt.
Die Magie passiert in den Zeilen 05 bis 09. Der erste require läd die Default-Textkonserve im Ordner texte. Der folgende if prüft ob der Anwender etwas in der GET-Variable artikel übergeben hat und nutzt dann diesen Inhalt als Namen der zu ladenenden Textkonserve aus dem Ordner texte. Hat der Anwender hingegen nichts eingegeben, dann bleibt die default.php als Textbaustein nach wie vor geladen.
Run it
Rufen Sie die Domain im Browser wie folgt auf: http://radelle.de/?artikel=beitrag_a und Sie erhalten die folgende Anzeige. Versuchen Sie auch artikel=beitrag_b.
Geben Sie statt des konkreten Beitrags einfach nur den Domain-Namen ein, dann springt das Default-Template an und wird von Smarty geladen:
Die Beitragsvorlage Default können Sie daher wie ein Menü verwenden, von dem aus der Leser weiter verzweigen kann.
Anmerkung - Diese kleine Templatestruktur kann bereits einfach strukturierten Inhalt mit einer Navigationsebene aufnehmen und sinnvoll für den Leser aufbereiten. Allerdings ist dieses Template noch nicht in der Lage praktikabel mit Parametern umzugehen die nicht existieren oder falsch sind, es muss ein sauberes Fehlermanagement implementiert werden. Die Navigationstiefe ist sehr flach und bietet nur eine Schachtelungsebene an, mindestens eine weitere Navigationsstufe wäre wünschenswert. Aber keine Sorge die Template Engine Smarty kann auch das für Sie leisten. Der Text selbst ist ebenfalls noch ein Problem, da Umlaute wie öäüÖÄÜß nicht automatisch konvertiert werden dies sollte ebenfalls durch die Template Engine möglich sein.
28.01.2024 Kontakt@Oliver-Lohse.de Content
