CMS im Eigenbau Vom Konzept zum fertigen Content

CMS im Eigenbau Vom Konzept zum fertigen Content Management System. Ein Vortrag von Markus-Hermann Koch CMS im Eigenbau

1. Warum _noch_ ein CMS? Was spricht dagegen? • Es gibt bereits eine Vielzahl guter, zum Teil sogar freier CMS. Joomla, Wordpress, Typo 3, . . . • Diese werden seit Jahren entwickelt, bieten für vieles gute Standardlösungen und verfügen über ein ausgefeiltes Back End. • Ihre Installation ist mitunter verblüffend einfach. • Der Zeitaufwand einer Neuentwicklung ist hoch. 1. Motivation 2

Was spricht dafür? • Umsetzung selbstgewählter Standards. Nicht nur in punkto HTML, sondern auch in CSS, Java. Script, PHP und allen anderen Komponenten. • Das System wird auf die Inhalte der Site angepasst und nicht andersherum. • Sie verstehen Ihr System und wissen welche Änderungen für einen gewünschten Effekt erforderlich sind. • Man kann dabei einiges lernen! 1. Motivation 3

Warum das Original verwerfen? 1. Motivation 4

1. Motivation 5

Richtlinien für die Neufassung Konsequenzen aus dem Original: • Wartbarkeit. Sämtlicher Quellcode soll mit Hilfe normaler Texteditoren vernünftig lesbar und bearbeitbar sein. • Verzeichnisse sollen automatisch erzeugt werden. • Trennung von Struktur und Textinhalt. • Vermeidung von Redundanz. Insbesondere soll es eine einfach gestrickte, leere HTMLVorlagendatei geben, die immer gleiche Grundseite enthält und in die eigentlichen Textinhalte über PHP eingefügt werden. 1. Motivation 6

2. Aufbau der HTML-Vorlage CSS-Zen-Garden: http: //www. csszengarden. com/tr/deutsch/ <? php • Einbinden der Initialisierungsskripte und der benötigten Objektklassen. • Auswerten der _GET und _POST-Parameter. Davon abhängig: Welche CSS sollen eingebunden werden? Welche Inhalte werden aus der Datenbank/dem Cache geladen? Ggf. Datenbankinhalte in HTML umsetzen. Alle diese Daten in werden in Variablen abgelegt. (Das hält den HTML-Teil sauber und lässt den HTTP-Header lange variabel. ) ? > <html>DIV-orientierter Aufbau in den die Variablen eingefügt werden. </html> 2. Die Vorlage index. php 5 7

<? php require_once $_SERVER['DOCUMENT_ROOT']. '/init. php 5'; require_once $i_root. $i_scripts. $i_k. DB_fname; . . . [Weitere benötigte Objektklassen]. . . [Auswerten der _GET- und ggf. _POST-Parameter. Ggf. Auführung zusätzlicher Skripte]. . . [Laden der Linklisten, des Hauptinhaltes, inhaltsabhängiger CSS-Anweisungen und ggf. der Werbung aus der Datenbank und/oder dem Cache. Diese Daten werden in Variablen abgelegt]. . . [Ggf. Nachbearbeitung dieser Inhalte. Bis zu diesem Zeitpunkt wurde noch kein einziges Zeichen an den Browser geschickt. ] ? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -strict. dtd"> <html xmlns="http: //www. w 3. org/1999/xhtml"> 2. Die Vorlage index. php 5 8

<head>. . . [Metadaten]  <link rel='shortcut icon' type='image/x-icon' href='<? php echo $i_protocol. $_SERVER['HTTP_HOST']; ? >/favicon. ico' /> <link rel='stylesheet' type='text/css' href='<? php echo $i_protocol. $i_html. $i_styles_karriere. $i_common_css_fname; ? >' media='all' /> <link rel='stylesheet' type='text/css' href='<? php echo $i_protocol. $i_html. $i_styles_karriere. $i_main_css_fname; ? >' media='all' />  2. Die Vorlage index. php 5 9

<? if($i_media!=$i_std_media): ? >. . . [Einbinden von Media-bezogenem CSS] <? endif? > <? php echo $dp->get. Css. Link(); ? > <title>KARRIERE handbuch - Koch Management Consulting</title>   <script src='<? php echo $i_protocol. $i_html. $i_scripts. $i_v. Scale_fname; ? >' type='text/javascript'></script> </head> <body onload='set. Height()'> <div id='master'>  <div id='title'>  <? php print($dp->replace. Aliases('{{IMG'. $i_gif_head. '; kh}}')); ? > </div> 2. Die Vorlage index. php 5 10

<div id='content'>  <? php print($c. Content); ? > </div> <div id='left'>  <? php print(static. Tools: : link. List(1, 20, array(2, 7, 11, 14), $active. Link, 'kh', NULL, $add. Links. Left, $db)); ? > </div> <div id='right'>  <? php print(static. Tools: : do. Impressum($db, $dp, $active. Link)); ? > <? php print(static. Tools: : link. List(23, 40, array(1, 4, 7), $active. Link, 'kh', NULL, $add. Links. Right, $db)); ? > </div> <div id='bottom'>  <? php. . . [Logo und Suchfeld einbinden / Debug-Code] ? > </div> 2. Die Vorlage index. php 5 11

</div>  <!-. . . [Einige Kommentare zum Code] Die Vorlage fuer dieses Template lieferte der Css Zen Garden. Eine wunderschoene Site, die sich der Verbreitung von CSS gewidmet hat. Da Sie offenbar Interesse an Quellcode haben, schauen Sie ruhig auch dort einmal vorbei: http: //www. csszengarden. com/ P. S. : Diese Site verwendet keine Frames. Es ist also unerheblich ob Frames von Ihrem Browser unterstuetzt werden. ; -) --> </body> </html> 2. Die Vorlage index. php 5 12

<div>s wie im Zen-Garden CSS-Zen-Garden: http: //www. csszengarden. com/tr/deutsch/ 2. Die Vorlage index. php 5 13

Interessante CSS-Eigenschaften Inhalte sollen gut aussehen auf IE 7+, Firefox 2+, Lynx. margin: auto: Zentriert relativ positionierte Blockelemente. float, clear: Erlauben und steuern das horizontale Nebeneinander von relativ positionierten Blockelementen. position: Ob relative, absolute, static oder fixed, mit position lassen sich die Blockelemente im Browser positionieren. overflow: Scrollbars in Blockelementen. Sehr empfehlenswert: http: //de. selfhtml. org/ 2. Die Vorlage index. php 5 14

3. Das wichtigste PHP Die vier zentralen Bausteine des CMS init. php 5: Immer zuerst ausgeführtes Config-Script. Definiert globale, das CMS beschreibende Variablen und ruft seinerseits ein weiteres Script init<Plattform>. php 5 auf, welches Daten zur Serverumgebung enthält. class Kdb: Ein eigenes Datenbankobjekt. Sämtliche DB-Zugriffe erfolgen über Instanzen dieses Objektes. class ht. Display und Ableitungen: Verarbeiten die Datenbankinhalte zu HTML-Code oder PDF-Dokumenten. class kh. Action/fg. Action: Enthalten Code für Funktionen die dynamischen Inhalt erzeugen. Diese Klassen werden aktiv, wenn ein GET/POSTParameter ´action´ vorliegt und als Wert den Namen einer definierten Methode enthält. 3. Die Programmstruktur 15

4. Die Datenbankstruktur 16

Es kommen vier Arten von Inhalten vor: Standardinhalte, Werbeinhalte, statische Inhalte und dynamische Inhalte. a) Standardinhalte. Aus den SQL-Tabellen index_<clt> und content_<lng>_<clt> Diese bilden das Gros der Inhalte der Site. Die index_<clt>-Tabellen stellen eine inhaltslose Baumstruktur voneinander abhängiger Index-Knoten zur Verfügung. Jedem Knoten ist eine cid (Content-Id) zugeordnet. Die cid entspricht einer Zeilennummer in den Tabellen content_<lng>_<clt>. In den sprachbezogenen Content-Tabellen liegen die eigentlichen Überschriften und Textinhalte. 4. Die Datenbankstruktur 17

Auszüge aus der Index-Content-Struktur. Auszug aus index_kh Auszug aus content_de_kh 4. Die Datenbankstruktur 18

Interessante SQL-Kommandos SHOW COLUMNS FROM <Tabellenname>: Liefert eine Tabelle mit Informationen über die Spalten der Zieltabelle zurück: Datentyp, Defaultwert, Primärschlüssel, . . . <Wert 1> REGEXP <Wert 2>: SQL kennt durchaus reguläre Ausdrücke! <Tabelle 1> INNER JOIN <Tabelle 2>: Nimmt beide Datensätze und liefert (als Menge betrachtet) ihr kartesisches Produkt zurück. So wird z. B. aus den Datensätzen (a, b, c) und (1, 2) der Datensatz (a 1, a 2, b 1, b 2, c 1, c 2). Das ist toll! Bsp. : SELECT ‘title‘ FROM `index_kh` INNER JOIN `content_kh` ON `index_kh`. `cid` = `content_<lng>_kh`. `id` WHERE `index_kh`. `id` = <con>; Liefert für beliebige <lng> den Title eines beliebigen <con> des kh zurück. Sehr empfehlenswert: http: //www. sqldocu. com/ Zeigt sehr viele seiner Kommandos auch als Code an: PHP-My. Admin. 4. Die Datenbankstruktur 19

5. Die Darstellungsklassen <cconv>Disp In den Datenbankeinträgen und im Quellcode so wenig HTML wie möglich. • HTML unterliegt schwankenden Standards. Keine Lust 10. 000 Datenbankeinträge nachzubearbeiten! • HTML-Code ist relativ umfangreich und Datenbankeinträge sollten einigermaßen „schlank“ ausfallen. Meine Lösung: • Trage Artikel in vereinfachter, am besten Fließtextform in die Datenbank ein. • Weise dem Artikel eine „Art“ zu. Z. B. twocol für zweispaltige Linklisten oder tabular für Inhalte, die Tabellen enthalten sollen. • Schreibe Ableitungen twocol. Disp und tabular. Disp der Darstellungsklasse ht. Display, welche alle Fähigkeiten von ht. Display erben, aber diejenige Methode, die dort einfach nur die Inhalte aus der Datenbank holt, überschreibt: ht. Display->con. Tpl(. . ) liest einen Datenbankeintrag ein und liefert ihn zurück. twocol. Disp->con. Tpl(. . ) liest ihn ein und verarbeitet ihn vor dem Zurückliefern. • Bei Bedarf zusätzlich: Verfassen und Einbinden von twocol. Con. css 5. Die Darstellungsklassen 20

Aus der Datenbank auf den Monitor: Eine twocol-Linkliste Ebenfalls aus der Db: Der Content Converter für diesen Artikel ist twocol. Disp ergänzt den HTML-Header auch um einen Link auf twocol. Con. css 5. Die Darstellungsklassen 21

Manchmal praktisch: Ein Artikel - Zwei Displayer Der Artikel, wie er in der Datenbank steht. Für den Browser interpretiert von einem Objekt der Klasse standard. Disp: 5. Die Darstellungsklassen 22

Für den Acrobat Reader interpretiert von einem Objekt der Klasse standard. Pdf: Anmerkung: So etwas geht zügig und vergleichsweise einfach mit der Tool. Klasse des PHP-Open Source Projektes fpdf: http: //www. fpdf. de/ 5. Die Darstellungsklassen 23

Interessante PHP 5 -Kommandos $cconv=‘twocol. Disp‘; $displayer = new $cconv(. . . ); . . . ist ein durchaus funktionierendes Codefragment! Sehr nützlich, wenn man den Namen der zu instanzierenden Klasse vorher nicht kennt. preg_replace(. . . ) und eine Reihe verwandter Funktionen bringen die Möglichkeiten von Perl Regular Expressions nach PHP. (250 mal) header(. . . ) muss aufgerufen werden, bevor das erste Zeichen an den Browser geschickt wurde. Erlaubt die Ergänzung des HTTP-Headers und somit z. B. Weiterleitungen (Location), veränderte MIME-Types (Content. Type), Browser-Cache-Kontrolle (Expires, Cache-Control, Pragma: nocache) und vieles mehr. mb_detect_encoding(. . . ), mb_convert_encoding(. . . ): Umkodieren von Textinhalten zum Beispiel von UTF-8 in ASCII. Äußerst empfehlenswert: Programmieren mit PHP von Rasmus Lerdorf et Al. Erschienen im O‘Reilly-Verlag. ISBN-10 3 -89721 -473 -3. 5. Die Darstellungsklassen 24

6. Performance-Fragen Ich bezeichne einen Vorgang als teuer, wenn der Server für seine Bearbeitung stark beansprucht wird. 6. Performance-Fragen 25

Festplatten-Caching: • Nachdem der an den Client zu sendende Inhalt bestimmt wurde diesen parallel auch in einer Datei auf der Festplatte ablegen. • Jedes mal wenn eine Anfrage an den Server geht erst überprüfen, ob der geforderte Inhalt nicht bereits in einer noch einigermaßen aktuellen Cache-Datei vorliegt und ggf. einfach diesen Inhalt laden. Meine Lösung: Die Cache-Dateien für die Hauptinhalte heißen content_<id>_<lng>_<clt>_<media>. cch Sie sind per Default für 24 h aktiv und gliedern sich intern in 2 Blöcke: HTML für den Header<CSS==CACHE==CONTENT> HTML für den eigentlichen Inhalt 6. Performance-Fragen 26

Am Rande: Die Standardausgabe von PHP ist der Zielbrowser. PHP bietet aber einige Funktionen, die es erlauben die Ausgabe erst einmal in Variablen abzufangen. PHP-Stichworte dazu: ob_start(), ob_get_contents(), ob_end_clean() Anwendungsbeispiel auf Karrierehandbuch. de: Das Karrierehandbuch verfügt über ein auf bb. Press laufendes Forum, dessen Funktionen dazu neigen, ihre Ausgaben direkt per print(. . . ) auszugeben. Mit den ob_-Tools kann ich diese Ausgaben in Variablen abfangen, sie z. B. mit $displayer->replace. Aliases(. . . ) nachbearbeiten und erst dann anzeigen lassen. Ohne die gesamte BB-Press-Source überarbeiten zu müssen. BB-Press: http: //bbpress. org/ Auf KH: http: //www. karrierehandbuch. de/Extern/BBPress/index. php 6. Performance-Fragen 27

Speicher-Caching: Insbesondere die Ergebnisse wiederholt auftretender SQL-Queries (etwa bei einfachen Aliasen) oder auch die Ausgaben komplexerer Methoden können parallel im Speicher abgelegt werden. Wird das Query oder die Methode aufgerufen schaut das Programm immer zuerst, ob bereits eine geeignete Variable mit dem Inhalt vorliegt. Es gibt viele kleine Informationsmethoden im CMS die immer wieder aufgerufen werden. Ohne Cache führt das bei einigermaßen komplexen Seiten schnell zu bis zu ca. 800 winzigen SQL-Queries. Allein durch konsequentes Speichercaching gelang es mir, die Geschwindigkeit der Site mehr als zu verdoppeln. 6. Performance-Fragen 28

Objekt-Recycling: Das CMS enthält einige recht umfangreiche Objektklassen deren Instanzierung bereits teuer ist. Das ist besonders bei kleinen Funktionen, die zuweilen auch ein Displayer- oder ein Datenbankobjekt benötigen, schmerzhaft. Eine Lösung ist die optionale Übergabe einer Objektreferenz, die ggf. das teure new einspart: function tool(. . . , $dp=NULL, $db=NULL) //. . . { if (is_null($dp)) $dp = new ht. Display(. . ); if (is_null($db)) $db = new Kdb(. . ); . . . return $res; } 6. Performance-Fragen 29

Objektorientierung nutzen! Schlanke Versionen von Klassen: Beispiel: Anlegen einer Log-Klasse • Wird einfach nur ein Inhalt abgerufen, muss die Log-Klasse Ihrer Site nicht viel können. Es genügt, wenn Sie eine Zeile in einer Logdatei richtig zu schreiben vermag. • Lediglich im Backend Ihres CMS benötigen Sie eine deutlich aufwändigere Log-Klasse, die Log-Dateien auch auswerten kann. Programmieren sie diese als Ableitung der einfachen Write-Only. Klasse! 6. Performance-Fragen 30

Einige von meiner Erfahrung belegte, subjektive Feststellungen: • PHP hat mehr Möglichkeiten, aber SQL arbeitet schneller. • Der Flaschenhals ist die Schnittstelle zwischen PHP und SQL. 10 einfache, SQL-Kommandos sind teurer als 1 „zehnfaches“ SQL-Kommando mit recht komplexem Query. • Die Performance von SQL-JOINS in Kombination mit SQL-REGEXPAusdrücken ist durchaus eindrucksvoll. Beispiel: Die interne Suchmaschine des Karrierehandbuchs verwendet SQL und PHP parallel: Zunächst wird mit einem REGEXP-JOIN eine einfache Vorauswahl an möglichen Artikeln getroffen. Auf diese überschaubare Datenmenge werden dann die mächtigeren preg_Methoden von PHP angewandt, die Treffer auch bewerten. 6. Performance-Fragen 31

7. All user input is evil Das CMS soll Dritten dienen, eigene Inhalte und ggf. sogar Dateien zu präsentieren. Dabei wird zwangsläufig die Sicherheitsfrage aufgeworfen. Bedrohung: SQL-Injection. Unter SQL-Injection versteht man den Versuch eines Users, durch kunstvolle Eingabe von Daten SQL-Kommandos zu manipulieren. Ein Beispiel: Das Programm erzeugt eine harmlose Anfrage aus einem Parameter <which> SELECT `<which>` FROM `content_de_kh`; Der User übergibt aber: passwd` FROM `userdata` WHERE `login`=´Admin´; -SELECT `passwd` FROM `userdata` WHERE `login`=´Admin´; -- ` FROM `content_de_kh`; 7. All user input is evil 32

Was kann man tun? • Automatisch: Die PHP-Funktion mysql_query(. . ) lässt nur einen Befehl auf einmal zu. • Gefährliche Zeichen “`´ -- nur kodiert in die SQL-Maschine einfüttern. • Eben diese Zeichen für die genutzten Queries einsetzen. Also SELECT `broetchen` FROM `baecker`; anstelle von SELECT broetchen FROM baecker; • Regelmäßig Datenbank-Backups ziehen. Hinweis: PHP bietet für die SQL-Schutzkodierung eigens die Kommandos addslashes($text) und stripslashes($text) an. Unicode-Fest ist mysql_real_escape_string($text, $db. Resource. Id) http: //shiflett. org/blog/2006/jan/addslashes-versus-mysql-real-escape-string 7. All user input is evil 33

Bedrohung: Cross Site Scripting. XSS (um es nicht mit CSS zu verwechseln) ist der Versuch eines bösartigen Autors z. B. Java-Script. Fragmente in seine Beiträge einfließen zu lassen, die etwa die Cookies eines diese Beiträge lesenden Admins auslesen und an den Hacker weiterleiten. Letzterer kopiert dann diese Cookies in seine eigenen HTTPRequests und sieht für das CMS nun wie der Admin aus. Was kann man tun? • Javascript aus User-Artikeln herausfiltern. • Cookies an IPs knüpfen. Wer ein Cookie anfordert wird mitsamt seiner IP registriert ($_SERVER['REMOTE_ADDR']). Kommt nun eine Anfrage an den Server wird nicht nur der Wert des Cookies sondern auch die Korrektheit der IP überprüft. Das ist keine Garantie, aber schnell umgesetzt. 7. All user input is evil 34

Bedrohung: User stellen Schadskripte in Ihren Downloadbereichen bereit. Was kann man tun? User-eigene Downloads nur in dafür vorgesehenen Verzeichnissen bereitstellen lassen. Auf Apache-Servern kann man in jedem Verzeichnis eine Datei. htaccess hinterlegen, in der man unter anderem festlegen kann, wie der Server mit zum Beispiel Perl - Dateien verfahren soll. 7. All user input is evil 35

Beispiel für eine solche. htaccess-Datei: <Files. Match ". (cgi|pl|. . . )$"> Force. Type application/octet-stream </Files. Match> Dieses Code-Fragment (die Regexp ist unvollständig) sorgt dafür, dass Scriptdateien bei Aufruf nicht ausgeführt, sondern einfach als Text an den Client gesendet werden. 7. All user input is evil 36

Bedrohung: Abhören des Client beim Austausch vertraulicher Daten. Was kann man tun? • Falls der Server-Dienst dies anbietet: Die Übertragung auf SSL (Secure Socket Layer) setzen und den Client seine Anfragen verschlüsseln lassen. • Die meisten modernen Browser können sich ohne Aufwand für den User von der SSL anbietenden Site einen Public Key herunterladen, um damit zum Beispiel Formulardaten nach RSA zu verschlüsseln. Dazu genügt besucherseitig meist schon das Stellen der Anfrage als https: //. . . anstelle von http: //. . . • Umsetzung: Auf meinem CMS gibt es eine Variable $i_protocol = ‚http: //‘ die bei der Erzeugung der internen Links eine wichtige Rolle spielt und deren Wert bei Bedarf auf https: // angepasst wird. FAQ zum Thema SSL: http: //www. ccc. de/https/faq? language=de Kostenlose Zertifizierung: http: //www. cacert. org/ Nette Einführung: Geheime Botschaften von Simon Singh. 7. All user input is evil 37

8. Dinge, die ich gerne vorher gewusst hätte Regular Expressions sind das Werkzeug für die Bearbeitung von Strings. SQL bietet das Vergleichszeichen REGEXP an. PHP bietet ereg_. . ()- und preg_. . ()-Tools. „preg“ steht für Perl Regular Expressions. Die preg-Tools sind besser als die ereg-Varianten. Die Anzahl der tatsächlich ausgeführten SQL Queries klein halten! Speicher- und Festplatten-Caching ist schnell programmiert und super! PEAR-DB wird von Rasmus Lerdorf empfohlen, ist aber bei der Verarbeitung von Strings buggy und führt bei Belastung zu Serverabstürzen. Die mysql_. . ()-Kommandos sind meiner Erfahrung nach zuverlässig. Auf Apache-Servern lohnt es sich, einmal die Datei httpd. conf entspannt durchzulesen. . htaccess-Dateien erlauben die Konfiguration des Serververhaltens in beliebigen Verzeichnissen 8. Dinge, die ich gerne vorher gewusst hätte 38

Vielen Dank für Ihre Aufmerksamkeit! CMS im Eigenbau 39