Tutorial: HTML Vorlage Extension Key: mitglieder Copyright 2000-2002, Thorsten Reichelt, <Thorsten_Reichelt@gmx.de> This document is published under the Open Content License available from http://www.opencontent.org/opl.shtml The content of this document is related to TYPO3 - a GNU/GPL CMS/Framework available from www.typo3.com Inhaltsverzeichnis Tutorial: HTML Vorlage... 1 Einleitung... 1 Um was geht es?...1 Screenshots...1 Die Anfänge... 2 Der Kickstarter...2 Eingemachtes... 4 ext_typoscript_constants.txt... 4 ext_typoscript_setup.txt...4 pi1/class.tx_mitglieder_pi1.php... 5 Die Funktion main()... 6 Die Funktion displayall()...6 Die Funktion getitems()... 7 Die HTML-Vorlage... 10 Die Bilder... 10 Einleitung Um was geht es? Mit dieser Anleitung versuche ich zu erklären, wie man die Daten einer Extension im Frontend über eine HTML-Vorlage ausgibt. Als Grundlage diente mir Anleitung Creating a basic extension von Oliver Hofmann und meine eigene Extension. Screenshots Hier könnt ihr schon einmal einen kleinen Blick auf das spätere Ergebnis werfen. Tutorial: HTML Vorlage - 1
Die Anfänge Wer sich das Tutorial von Oliver noch nicht durchgelesen hat sollte dies jetzt einmal machen. Da es mir hier hauptsächlich um das Einbinden einer HTML-Vorlage geht werde ich die für die Erstellung einer neuen Extension nötigen Schritte nur kurz ansprechen. Außerdem werde ich für die verschiedenen Felder deutsche Titel wählen. Will man seine Extension später einmal veröffentlichen sollte man englische Beschriftungen benutzen. Der Kickstarter Wir erstellen eine neue Extension indem wir im Erweiterungs Manager den Punkt Make new extension auswählen. Als Extension-Key geben wir hier mitglieder an und klicken auf [Update...]. Als erstes geben wir jetzt einige grundlegende Daten für unsere Extension an. Dafür klicken wir links auf den Punkt General Info und füllen die Felder folgendermaßen aus: Anschließend klicken wir wieder auf [Update...]. Als nächstes müssen wir eine Datentabelle anlegen in der später die Daten der Mitglieder gespeichert werden. Dazu klicken wir links auf bei New Database Table und erstellen eine neue Tabelle mit dem Namen tx_mitglieder_liste. Als Titel (Title of the tables) geben wir members an und wählen folgende Punkte aus: Add Deleted field Add Hidden flag Manual ordering of records Allowed on pages Allowed in 'Insert Records' field in content elements Tutorial: HTML Vorlage - 2
Jetzt fehlen uns nur noch einige Felder in die wir die Daten eintragen können. Damit wir nachher auch schön viel ausgeben können legen wir insgesamt 15 neue Felder an. Wer will kann natürlich auch erst einmal weniger Felder anlegen und dann später den Code abändern. Folgende Felder sollten vorhanden sein: Field name Field title Field type Bemerkung first_name last_name Vorname Nachname birthday Geburtstag Date street zip city email Straße Postleitzahl Wohnort E-Mail Adresse homepage Homepage Link phone mobile Telefonnummer Handynummer function Funktion des Mitgliedes Text Area elected Gewähltes Mitglied Checkbox, single privacy Private Daten verstecken Checkbox, single keycard Schlüsselkarte Checkbox, single photo Foto des Mitgliedes Files Sollen Telefonnummer usw. nicht öffentlich sichtbar sein? Extensions:: Web-Imagefiles Max. Filesize : 20kB Wenn wir alle Felder eingefügt haben scrollen wir wieder etwas nach oben und wählen bei Label field den Punkt first_name: Vorname aus. Damit werden später im Backend die Datensätze anstatt mit der ID mit dem Vornamen angezeigt. Type-field, if any lassen wir auf [none] stehen. Jetzt definieren wir die Erweiterung noch als Frontend Plugin indem wir links auf das bei Frontend Plugins klicken. Im folgenden Formular geben wir folgendes an: Enter a title for the plugin: Mitgliederliste Mehr Einstellungen nehmen wir hier nicht vor. Jetzt fehlt nur noch ein Klick auf [Update...]! Damit wir später die Extension über TypoScript konfigurieren können legen wir jetzt noch zwei leere Textdateien für CONSTANTS und SETUP an. Dafür klicken wir auf der linken Seite auf das bei Static TypoScript code und fügen in beide Felder einen Kommentar ein (// Ich bin ein Kommentar). [Update...] anklicken! Die Extension muss jetzt nur noch gespeichert werden. Dafür klicken wir jetzt links unten auf den Knopf [View result]. Wir bekommen eine Liste aller generierten Dateien angezeigt. Als Ziel (write to location) wählen wir local: aus und klicken auf [write]. Das wars. :-) Tutorial: HTML Vorlage - 3
Eingemachtes Nachdem wir jetzt das Grundgerüst für unsere Extension erstellt haben werden wir jetzt die einzelnen Dateien unseren Bedürfnissen anpassen. Wir wählen im Pull-Down Menü des Erweiterungs Managers den Punkt Available Extensions to install aus und suchen unsere neu erzeugte Erweiterung in der List der Frontend-Plugins. Diese wählen wir jetzt aus indem wir auf den Namen klicken. Auf der folgenden Seite wählen wir dann im Pull-Down Menü den Punkt Edit Files. Um eine Datei zu editieren genügt ein Klick auf den Edit file Link. ext_typoscript_constants.txt Bis auf den Kommentar ist diese Datei noch ziemlich leer. Deswegen füllen wir die Datei jetzt auch mit Inhalt. // Die maximale Breite des Thumbnails usw. wird hier definiert plugin.tx_mitglieder{ // Die maximale Breite des Bildes im Template maximagewidth = 150 // Ein Klick vergrößert das Bild? clickenlarge = 1 ext_typoscript_setup.txt Die Bilder elected.gif und key.gif werden angezeigt wenn es sich um ein gewähltes Mitglied handelt bzw. das Mitglied eine Schlüsselkarte besitzt. Hier muss der relative Pfad ausgehend vom Root-Verzeichnis der TYPO3 Installation angegeben werden. plugin.tx_mitglieder_pi1{ // Pfad zum Bild für gewählte Mitglieder picelected = typo3conf/ext/mitglieder/images/elected.gif // Pfad zum Bild für Mitglieder mit Schlüsselkarte pickeycard = typo3conf/ext/mitglieder/images/key.gif // ID des SysOrdners mit den Daten //pid_list = 49 // HTML-Template inkl. Pfad templatefile = fileadmin/mitglieder/template.tpl.html // Konfiguration exklusiv für die displayall Funktion displayall{ image { file.maxw = {$plugin.tx_mitglieder.maximagewidth alttext = Fachschaft imagelinkwrap = {$plugin.tx_mitglieder.clickenlarge imagelinkwrap { enable = 1 bodytag = <body bgcolor="#000000"> wrap = <a href="javascript:close()"> </a> width = 400m height = 400 JSwindow = 1 JSwindow.newWindow = 1 JSwindow.expand = 17,20 // ENDE imagelinkwrap // ENDE image // ENDE displayall Tutorial: HTML Vorlage - 4
pi1/class.tx_mitglieder_pi1.php Die PHP-Datei ist das wichtigste unserer Extension. Hier werden wir jetzt die umfangreichsten Änderungen vornehmen. Aus der Originaldatei löschen wir jetzt erst einmal alles was in rot dargestellt ist. <?php / Copyright notice (c) 2003 Webmaster (webmaster@snert.nt.fh-koeln.de) All rights reserved This script is part of the Typo3 project. The Typo3 project is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version. The GNU General Public License can be found at http://www.gnu.org/copyleft/gpl.html. This script is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. This copyright notice MUST APPEAR in all copies of the script! / / Plugin 'Mitgliederliste' for the 'mitglieder' extension. @author Thorsten Reichelt <Thorsten_Reichelt@gmx.de> / require_once(path_tslib."class.tslib_pibase.php"); class tx_mitglieder_pi1 extends tslib_pibase { var $prefixid = "tx_mitglieder_pi1"; var $scriptrelpath = "pi1/class.tx_mitglieder_pi1.php"; var $extkey = "mitglieder"; // The extension key. / [Put your description here] / function main($content,$conf) { $this->conf=$conf; $this->pi_setpivardefaults(); $this->pi_loadll(); $content=' <strong>this is a few paragraphs:</strong><br> <P>This is line 1</P> <P>This is line 2</P> <h3>this is a form:</h3> <form action="'.$this->pi_getpagelink($globals["tsfe"]->id).'" method="post"> <input type="hidden" name="no_cache" value="1"> <input type="text" name="'.$this->prefixid.'[input_field]" value="'.htmlspecialchars($this->pivars["input_field"]).'"> <input type="submit" name="'.$this->prefixid.'[submit_button]" value="'.htmlspecialchars($this->pi_getll("submit_button_label")).'"> </form> <BR> <P>You can click here to '.$this->pi_linktopage("get to this page again",$globals ["TSFE"]->id).'</P> '; return $this->pi_wrapinbaseclass($content); if (defined("typo3_mode") && $TYPO3_CONF_VARS[TYPO3_MODE]["XCLASS"] ["ext/mitglieder/pi1/class.tx_mitglieder_pi1.php"]) { include_once($typo3_conf_vars[typo3_mode]["xclass"] ["ext/mitglieder/pi1/class.tx_mitglieder_pi1.php"]);?> Tutorial: HTML Vorlage - 5
Die Funktion main() Jetzt ändern wir die Funktion main() folgendermaßen ab: function main($content,$conf){ // Besorge die lokale Konfiguration $this->conf = $conf; $this->pi_setpivardefaults(); $this->pi_loadll(); // Lade das Template-File. $this->templatecode = $this->cobj->fileresource($this->conf["templatefile"]); if ($this->templatecode=="") { return "<h3>mitglieder: Kein HTML-Template gefunden:</h3>".$this->conf["templatefile"]; // Rufe die Funktion displayall() auf und schreibe das Ergebnis nach $content $content.= $this->displayall(); // Gebe den erstellten Content zurück return $this->pi_wrapinbaseclass($content); Über die Funktion main() kann man später die einzelnen Funktionen aufrufen. Wir rufen in unserem Beispiel die Funktion displayall() einfach direkt auf. Die Funktion displayall() Unterhalb der main() legen wir jetzt eine Funktion displayall() an. Diese Funktion zeigt später alle Einträge der Datenbank an. function displayall(){ // Lösche $content und lade die lokale Konfiguration für displayall $content = ""; $lconf = $this->conf["displayall."]; // Definiere den Bereich des Templates in dem gearbeitet wird. // Im Template sieht das dann so aus: // <!-- ###TEMPLATE_DISPLAY_ALL### begin --> //...Der HTML-Code... // <!-- ###TEMPLATE_DISPLAY_ALL### end --> $template = $this->cobj->getsubpart($this->templatecode,"###template_display_all###"); // Definiere ein Array für die Marker $markerarray=array(); // Definiere ein Array für die wrappedsubparts (benutzen wir hier nicht, muss aber übergeben werden. $wrappedsubpartarray=array(); //Lese alle Daten aus der Datenbank aus und speicher diese in $rows //Dafür benutzen wir die Funktion getitems() die später noch definiert wird. $rows = $this->getitems(); //Gehe alle ausgelesenen Daten durch und schreibe ins Template while( list($c,$row)=each($rows) ){ // Definiere das Foto. Wenn nicht vorhanden setze Dummybild ein. if ($row["photo"] == false) {$lconf["image."]["file"] = "media/emoticons/sad.gif"; else { $lconf["image."]["file"] = "uploads/tx_mitglieder/".($row["photo"]); $theimgcode = $this->cobj->image($lconf["image."]); // Ersetze Wrap-Marker mit Inhalt aus der Datenbank // Diese Funktion habe ich noch nicht ausprobiert. Aber im Template sieht das dann wohl so aus: // <!--###LINK_ITEM###--> ###FIRST_NAME### <--###LINK_ITEM###--> // ###FIRST_NAME### wird dann vom array umschlossen. // //$wrappedsubpartarray=array(); //$wrappedsubpartarray["###link_item###"]= array('<a href="'.$this->einefunktion (parameter)'">','</a>'); // Ersetze die einzelne Marker mit Inhalt aus der DB $markerarray["###first_name###"] = $row['first_name']; $markerarray["###last_name###"] = $row['last_name']; // EMail Adresse durch TypoLink schicken damit Anti-Spam Funktionen greifen $temp_conf = $this->typolink_conf; $temp_conf["parameter."]["wrap"] = ",".$row["email"]; $markerarray["###email###"] = $this->cobj->typolink($row["email"],$temp_conf); Tutorial: HTML Vorlage - 6
// Ersetze die einzelne Marker mit Inhalt aus der DB $markerarray["###homepage###"]= "<A href='http://".$row['homepage']."'>".$row['homepage']."</a>"; $markerarray["###phone###"] = $row['phone']; $markerarray["###mobile###"]= $row['mobile']; // Die Zeilenumbrüche aus dem Textfeld in <br> Tags umwandeln $markerarray["###function###"] = nl2br($row['function']); // Hier ersetzen wir die Marker mit den Grafiken für gewähltes Mitglied und Schlüsselkarte $markerarray["###elected###"] = $elected = ($row['elected']==1)? $elected="<img src='".$this- >conf["picelected"]."' alt=' '>" : $elected = ""; $markerarray["###keycard###"] = $keycard = ($row['keycard']==1)? $keycard="<img src='".$this- >conf["pickeycard"]."' alt=' '>" : $keycard = ""; // Hier binden wir das Foto des Mitglieds ein. Die nötigen Daten dazu kommen aus $theimgcode $markerarray["###photo###"] = $theimgcode; // Wenn privacy nicht gesetzt ist werden private Daten angezeigt if ($row["privacy"] == 0){ $markerarray["###birthday###"] = $birthday = ($row["birthday"]==0)? $birthday="" : $birthday=gmdate("d.m.y",$row['birthday']+7200); $markerarray["###street###"] = $row['street']; $markerarray["###zip###"] = $row['zip']; $markerarray["###city###"] = $row['city']; $markerarray["###phone###"] = $row['phone']; $markerarray["###mobile###"]= $row['mobile']; else { // Ansonsten werden leere Felder angezeigt $markerarray["###birthday###"] = ""; $markerarray["###street###"] = ""; $markerarray["###zip###"] = ""; $markerarray["###city###"] = ""; $markerarray["###phone###"] = ""; $markerarray["###mobile###"]= ""; // Die HTML-Vorlage inkl. ersetzte Marker in die $content Variable schreiben $content.=$this->cobj->substitutemarkerarraycached($template,$markerarray,array(), $wrappedsubpartarray); // Ein paar Debugbefehle #t3lib_div::debug($conf); #t3lib_div::debug($this->getitems()); // Wir geben die gerade erzeugten Daten an die main() Funktion zurück return $content; Die Funktion getitems() Diese Funktion macht nichts anderes als die Daten aus der Datenbank auszulesen. function getitems(){ // pid_list ist die PID/PID-Liste des Sysordners mit den Daten // Ist im Setup keine Liste mit ID angegeben werden die Werte des "Ausgangspunktes" benutzt. $this->config["pid_list"] = trim($this->cobj->stdwrap($this->conf["pid_list"],$this->conf ["pid_list."])); $this->config["pid_list"] = $this->config["pid_list"]? implode(t3lib_div::intexplode(",",$this- >config["pid_list"]),",") : $this->cobj->data["pages"]; list($pid) = explode(",",$this->config["pid_list"]); $this->pid = $pid; // Führe die Abfrage durch und lasse versteckte Elemente aus $query = "SELECT FROM tx_mitglieder_liste WHERE pid IN (".$pid.")". $this->cobj->enablefields ("tx_mitglieder_liste"). " ORDER BY sorting"; $res = mysql(typo3_db,$query); // Schreibe in das Array $out $out = array(); while( $row = mysql_fetch_assoc($res) ){ $out[]=$row; return $out; Damit hätten wir das Schlimmste hinter uns. :-) Auf der folgenden Seite ist noch einmal der komplette Code abgebildet. Tutorial: HTML Vorlage - 7
<?php / Copyright notice (c) 2003 Thorsten Reichelt (Thorsten_Reichelt@gmx.de) All rights reserved This script is part of the Typo3 project. The Typo3 project is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version. The GNU General Public License can be found at http://www.gnu.org/copyleft/gpl.html. This script is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. This copyright notice MUST APPEAR in all copies of the script! / / Plugin 'Mitgliederliste' for the 'mitglieder' extension. @author Thorsten Reichelt <Thorsten_Reichelt@gmx.de> / require_once(path_tslib."class.tslib_pibase.php"); class tx_mitglieder_pi1 extends tslib_pibase { var $prefixid = "tx_mitglieder_pi1"; var $scriptrelpath = "pi1/class.tx_mitglieder_pi1.php"; extension dir. var $extkey = "mitglieder"; // The extension key. var $conf; // Same as class name // Path to this script relative to the function main($content,$conf) { $this->conf = $conf; $this->pi_setpivardefaults(); $this->pi_loadll(); $this->templatecode = $this->cobj->fileresource($this->conf["templatefile"]); if ($this->templatecode=="") { return "<h3>mitglieder: Kein HTML-Template gefunden:</h3>".$this->conf["templatefile"]; $content.= $this->displayall(); return $this->pi_wrapinbaseclass($content); function displayall(){ $content = ""; $lconf = $this->conf["displayall."]; $template = $this->cobj->getsubpart($this->templatecode,"###template_display_all###"); $markerarray=array(); $wrappedsubpartarray=array(); $rows = $this->getitems(); while( list($c,$row)=each($rows) ){ if ($row["photo"] == false) {$lconf["image."]["file"] = "media/emoticons/sad.gif"; else { $lconf["image."]["file"] = "uploads/tx_mitglieder/".($row["photo"]); $theimgcode = $this->cobj->image($lconf["image."]); $markerarray["###first_name###"] = $row['first_name']; $markerarray["###last_name###"] = $row['last_name']; $temp_conf = $this->typolink_conf; $temp_conf["parameter."]["wrap"] = ",".$row["email"]; $markerarray["###email###"] = $this->cobj->typolink($row["email"],$temp_conf); $markerarray["###homepage###"]= "<A href='http://".$row['homepage']."'>".$row['homepage']."</a>"; $markerarray["###phone###"] = $row['phone']; $markerarray["###mobile###"]= $row['mobile']; $markerarray["###function###"] = nl2br($row['function']); $markerarray["###elected###"] = $elected = ($row['elected']==1)? $elected="<img src='".$this- Tutorial: HTML Vorlage - 8
>conf["picelected"]."' alt=' '>" : $elected = ""; $markerarray["###privacy###"] = $row['privacy']; $markerarray["###keycard###"] = $keycard = ($row['keycard']==1)? $keycard="<img src='".$this- >conf["pickeycard"]."' alt=' '>" : $keycard = ""; $markerarray["###photo###"] = $theimgcode; if ($row["privacy"] == 0){ $markerarray["###birthday###"] = $birthday = ($row["birthday"]==0)? $birthday="" : $birthday=gmdate("d.m.y",$row['birthday']+7200); $markerarray["###street###"] = $row['street']; $markerarray["###zip###"] = $row['zip']; $markerarray["###city###"] = $row['city']; $markerarray["###phone###"] = $row['phone']; $markerarray["###mobile###"]= $row['mobile']; else { $markerarray["###birthday###"] = ""; $markerarray["###street###"] = ""; $markerarray["###zip###"] = ""; $markerarray["###city###"] = ""; $markerarray["###phone###"] = ""; $markerarray["###mobile###"]= ""; $content.=$this->cobj->substitutemarkerarraycached($template,$markerarray,array(), $wrappedsubpartarray); return $content; function getitems(){ $this->config["pid_list"] = trim($this->cobj->stdwrap($this->conf["pid_list"],$this->conf ["pid_list."])); $this->config["pid_list"] = $this->config["pid_list"]? implode(t3lib_div::intexplode(",",$this- >config["pid_list"]),",") : $this->cobj->data["pages"]; list($pid) = explode(",",$this->config["pid_list"]); $this->pid = $pid; $query = "SELECT FROM tx_mitglieder_liste WHERE pid IN (".$pid.")".$this->cobj->enablefields ("tx_mitglieder_liste")." ORDER BY sorting"; $res = mysql(typo3_db,$query); $out = array(); while( $row = mysql_fetch_assoc($res) ){ $out[]=$row; return $out; if (defined("typo3_mode") && $TYPO3_CONF_VARS[TYPO3_MODE]["XCLASS"] ["ext/mitglieder/pi1/class.tx_mitglieder_pi1.php"]) { include_once($typo3_conf_vars[typo3_mode]["xclass"] ["ext/mitglieder/pi1/class.tx_mitglieder_pi1.php"]);?> Was uns jetzt noch fehlt ist eine passende HTML-Vorlage. Tutorial: HTML Vorlage - 9
Die HTML-Vorlage Wenn eure Liste später einmal so aussehen soll wie in der Grafik auf der ersten Seite gezeigt könnt ihr folgenden Code benutzen. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN"> <html> <head> <title></title> </head> <body> <!-- ###TEMPLATE_DISPLAY_ALL### begin --> <table width="550" border="0" cellspacing="1" cellpadding="0" align="center"> <td rowspan="8" align="center" width="200" style="border:dashed; borderwidth:1px;">###photo###</td> <td bgcolor="#e3cd63" width="150">vorname</td> <td bgcolor="#ffe66f">###first_name###</td> <td bgcolor="#f0e4ab">nachname</td> <td bgcolor="#fff8bf">###last_name###</td> <td bgcolor="#e3cd63">geburtstag</td> <td bgcolor="#ffe66f">###birthday###</td> <td bgcolor="#f0e4ab">adresse</td> <td bgcolor="#fff8bf">###street###<br> ###ZIP### ###CITY###</td> <td bgcolor="#e3cd63">e-mail</td> <td bgcolor="#ffe66f">###email###</td> <td bgcolor="#f0e4ab">homepage</td> <td bgcolor="#fff8bf">###homepage###</td> <td bgcolor="#e3cd63">telefon</td> <td bgcolor="#ffe66f">###phone###</td> <td bgcolor="#f0e4ab">handy</td> <td bgcolor="#fff8bf">###mobile###</td> <td></td> <td bgcolor="#e3cd63">funktion des Mitglieds</td> <td bgcolor="#ffe66f">###function###</td> <td></td> <td bgcolor="#f0e4ab"></td> <td bgcolor="#fff8bf">###elected######keycard###</td> </table><br> <!-- ###TEMPLATE_DISPLAY_ALL### end --> </body> </html> Die Bilder Dies sind die beiden Bilder die über die Extension eingefügt werden. key.gif elected.gif Tutorial: HTML Vorlage - 10