All posts tagged as Typo3

06 Okt

Ext: js_css_optimizer und t3lib_PageRenderer

In Javascript,PHP,Typo3 by Axel Jung / 6. Oktober 2009 / 0 Comments

In der neuen Typo3 Version 4.3 existiert eine neue Klasse t3lib_PageRenderer in der die CSS und Javascript Dateien registriert werden können. In dieser Klasse ist es vorgesehen die CSS Dateien zu bündeln und zu komprimieren. Da diese Funktionen noch nicht implementiert sind und es aber die Möglichkeit für Hooks gibt habe ich die Extension js_css_optimizer erstellt, die diese Lücke füllt.

Die Extension registriert folgende Hooks:

  • cssCompressHandler - zum Komprimieren der CSS Dateien
  • jsCompressHandler - zum Komprimieren der JavaScript Dateien
  • concatenateHandler - zum Bündeln der Dateien
  • clearCachePostProc - zum Löschen der gecachten Dateien im typo3temp Verzeichnis

CSS Komrpimierung

Hierbei wird das Tool CSSTidy verwendet.  Die Konfiguration lässt sich über den Extension Manager in Typo3 einstellen.

js_opt

Die CSS Datei wird in einem neuen Verzeichnis abgelegt. Die Extension versucht dabei die relativen Pfade in der CSS Datei auf Bilder um zuschreiben. Hier ist eventuell noch Anpassungbedarf.

Damit die CSS Datei komprimiert wird muss folgender Typo Script Code ergänzt werden:

page {
includeCSS {
 screenStyle = ..../base.css
 screenStyle {
   media = screen
   import = 0
   compress=1
 }

JavaScript Komprimierung

Für das JavaScript wird die JSMin Klasse aus dem Typo3 Core verwendet. Es wird nicht die t3lib::minify... verwendet, da diese nicht so effektiv ist.

In TypoScript kann die Komprimierung einzeln ein und ausgeschaltet werden:

page{
 includeJS {
 file1 = ....common.js
 file1.compress=1
...

Bündelung

Die Bündelung der Javascripte und CSS Dateien kann über TypoScript aktiviert werden.  Dafür gibt es diese Einstellung:

config.concatenateJsAndCss = 1

Hierbei ist nicht möglich CSS und JavaScript unterschiedlich zu behandeln. Deshalb gibt es in der Extension die Möglichkeit über den Extension Manager die Bündelung beispielsweise für CSS auszuschalten.

js_opt_1

Wenn bestimmte Dateien auf jeder Seite benötigt werden, dann macht es Sinn diese als Libs einzubinden. Dafür gibt es im TypoScript die Option includeJSlibs.

page.includeJSlibs{
  jquery = ...jquery-1.3.2.min.js
  ...
}

Dann werden die in eine separate Datei geschrieben und können vom Browser separat gecacht werden.

Caching

Die komprimierten und gebündelten Dateien werden in dem typo3Temp Verzeichnis abgelegt. Die Cache Datei werden nicht erneuert sondern müssen gelöscht werden um neu erzeugt zu werden. Das Löschen passiert automatisch wenn im Typo3 Backend der Cache gelöscht wird.

Javascript und CSS aus den Plugins hinzufügen

Wenn man früher in einem Plugin JavaScript oder CSS Daten hinzufügen wollte ohne TypoScript hat man das über $GLOBALS['TSFE']->additionalHeaderData machen. Da diese Daten nicht als JS oder CSS deklariert sind nutzen sie in diesen Kontext nichts mehr.  Man kann jetzt mittels $GLOBALS['TSFE']->getPageRenderer() auf den PageRenderer zugreifen und diesen die JS und CSS Dateien bekannt machen. Wenn man mit dem PageRenderer arbeitet kann man auch die Vorteile der Komprimierung und Bündelung nutzen. Es lohnt sich deshalb die Klasse t3lib_PageRenderer genauer anzuschauen.

30 Aug

Typo3 Formulare vor Spam schützen mit Powermail

In Typo3 by Axel Jung / 30. August 2008 / 0 Comments

Mit Typo3 lassen sich einfach Formulare zum Senden von Kontakt Anfragen erstellen. Doch diese werden leider häufig von Spambots missbraucht. Auf der Suche nach einer einfachen Lösung bin ich auf die Extension powermail gestoßen. Mit dieser kann man nicht nur bequem einen Spam-Schutz einbauen, sondern man kann wesentlich komplexere Formulare gestalten.

Die Extension verfügt über einen Formular Designer. Alle Formular Elemente werden als Datensätze gespeichert und es wird das Feature IRRE (Inline Relational Record Editing) verwendet. Somit können die einzelnen Datensätze in einen einzigen Formular bearbeitet werden.

Man kann mehrere Formular Seiten hinzufügen und einstellen ob das Blättern mit JavaScript oder PHP geschehen soll.

Die Elemente lassen sich per Drag and Drop neu sortieren.

Neben den Standard Feldern, kann man noch eine Reihe Extra Felder hinzufügen. Mir war hierbei das Captcha Element sehr wichtig.

Die Felder lassen sich einzeln konfigurieren und man kann einfache Validierungen für die Felder angeben.

Man kann die Felder auch automatisch mit den Daten aus der fe_user Tabelle füllen und somit dem Benutzer Tipparbeit ersparen.

Die Extension hat unzählige Einstellungen, die man über die Konstanten steuert. Wie auch die Wahl des Captcha System. Standardmäßig wird sr_freecap verwendet.

Alle Anfragen werden in der Datenbank gespeichert und diese können über das Backend aufgerufen werden und von dort als Excel, CSV oder HTml exportiert werden.

Für komplexere Formulare würde ich eher dre_formmaker empfehlen. Diese ist wirklich genial und kann eigentlich alles was man bracht. Nur ist sie nicht so einfach zu bedienen wie die powermail Extension.