Abt Gaiser Blog - Typo3

Isch hasse den Internet Explorer

nospam@example.com (Matthias Häger) — Fri, 21 Aug 2009 10:45:19 +0200

Eine wirklich kreative Erweiterung für TYPO3 ist mir heute über den Weg gelaufen: PMK "I hate IE" von Peter Klein blendet im Internet Explorer (Version einstellbar) eine kleine gelbe Zeile oben im Browserfenster ein, wie man es von ActiveX-Warnungen, etc. gewöhnt ist. Der dort erscheinende Text ist frei konfigurierbar, der dahinter stehende Link ebenfalls.

Finde ich super-praktisch, da man so den Benutzer komfortabel informieren kann, dass er seinen Browser updaten soll ohne ihn zusehr zu gängeln. Wir setzen das jetzt bei uns ein, um die immer noch knapp 6% IE6-User zu einem Update zu bewegen. Die Sicherheits- und CSS-Probleme des 8 Jahre alten IE6 sind bekannt und für viele Webentwickler Quell jahrelanger Qualen.

Powermail Conditions in Multipage-Formular

nospam@example.com (Matthias Häger) — Mon, 17 Aug 2009 10:42:51 +0200

Powermail und Powermail Conditions sind hervorragende Erweiterungen zum Umgang mit Formularen in TYPO3, die ich gerne immer wieder einsetze. Mit Powermail Conditions lassen sich abhängig von den Eingaben eines Benutzers weitere Formulaelemente ein- bzw. ausblenden. Das funktioniert auch einwandfrei, allerdings nur, wenn die Elemente auf einer Seite liegen. Hat man ein Formular auf mehreren Seiten und möchte z.B. das eine Auswahl auf Seite 1 Auswirkungen auf Seite 3 und 4 hat, dann steht man vor einem kleine Problem. Laut Dokumentation gibt es für Powermail Conditions (noch) keinen Multipage-Support.

Ich stand jetzt aber vor der Aufgabe, dieses Problem irgendwie zu lösen. Und ich habe es auch geschafft. Und zwar mittels JavaScript. Zuerst habe ich zwei Hilfsfunktionen aus SELFHTML genommen, um einen Cookie schrieben bzw. auslesen zu können:

Als nächstes habe ich dem Formularelement, das für das weitere Formular die Abhängigkeit bestimmt, eine Validierung hinzugefügt. In meinem Fall handelt es sich um eine Drop-Down Box, bei der der Benutzer "ja" oder "nein" auswählen kann. Entsprechend der Auswahl, wird dann der Wert "1" oder der Wert "0" in das Cookie geschrieben.

Validation.add('powermail_uid94','',
function(v) {
var i = document.getElementById('uid94').selectedIndex;
var text = document.getElementById('uid94').options[i].text;

var Verfallszeit = 1000 * 60 * 60 * 24 * 365;

if(text == 'ja') {
    WertSetzen("bfm", 1, Verfallszeit);
} else {
        WertSetzen("bfm", 0, Verfallszeit);
}
      return true;
}
)

Der Rest ist einfach. Auf jeder Seite überprüft jetzt ein JavaScript, ob das abhängige Element vorhanden ist. Wenn es auf der Seite ist, wird abhängig vom Cookie-Wert das Element entweder sichtbar oder unsichtbar geschaltet.

if(WertHolen() == 0) {
    if(document.getElementById('powermaildiv_uid15') != null) {
        document.getElementById('powermaildiv_uid15').style.display='none';
    }
} else {
    if(document.getElementById('powermaildiv_uid15') != null) {
        document.getElementById('powermaildiv_uid15').style.display='block';
    }
}

Zwei kleine Hinweise: Das JavaScript darf erst geladen werden, wenn das Formular bereits generiert ist und die abhängigen Elemente müssen in der CSS-Datei auf jeden Fall eine "display"-Eigenschaft haben. Ist diese Eigenschaft nicht vorhanden, kann man sie auch über JS nicht ändern.

Roll-Out

nospam@example.com (Matthias Häger) — Tue, 04 Aug 2009 15:23:54 +0200

Am Donnerstag ist offizielle Roll-Out Veranstaltung von TYPO3 bei uns an der Uni. Bin mal gespannt wie der Ansturm der Sekretärinnen nach der Vorstellung ist oder ob sie das System doch komplett ablehnen. Dann hätte man nen Jahr für die Katz gearbeitet.

TYPO3 - Breadcrumb als Seitentitel

nospam@example.com (Matthias Häger) — Tue, 05 May 2009 13:54:15 +0200

Heute möchte ich mich in Sachen TYPO3 einfach mal bei zwei anderen Blogs bedanken, die mir viel Arbeit und Sucherei erspart haben. Ich wollte nämlich als Seitentitel statt dem Titel der einzelnen Seite einen schönen Breadcrumb-Pfad haben, der auch die Struktur der Seite widerspiegelt und damit aussagekräftiger ist, als die herkömmliche Variante.

Für die grundlegende Anpassung des TS-Codes hat mir zuerst der MediaVrog-Blog geholfen, indem sehr anschaulich und übersichtlich erklärt wird, wie man einen Breadcrumb-Seitentitel einbaut. Damit war ich aber noch nicht 100% zufrieden, denn für den Titel wurde der Navigationstitel anstatt des Seitentitel verwendet. Deshalb habe ich diese Lösung noch mit einem Tipp aus dem TYPO3-Blog kombiniert. Dieser ändert den verwendeten Titel in den tatsächlichen Seitentitel.

Da hier nichts auf meinem Mist gewachsen ist, bitte ich bei Interesse einfach den Links zu folgen und in den Originalquellen nachzuschauen.

t3blog - die neue Blog-Extension für TYPO3

nospam@example.com (Matthias Häger) — Thu, 12 Mar 2009 15:46:06 +0100

Die letzten Wochen habe ich mich auf der Arbeit viel mit t3Blog, der neuen Blog-Extension der Schweizer Firma Snowflake beschäftigt. War die bisherige Arbeit mit tt_news und timtab doch immer eine ziemliche Fummelei, erweckte die überwiegend positiv besprochene Extension hohe Erwartungen in mir. Sollte man doch mit wenigen Mausklicks einen Blog aufsetzen können. Doch wie die Realität zeigt: So einfach ist das nicht. Besser gesagt: So wie ich das will, ist das nicht einfach.

Möchte man die Extension Out-of-the-Box installieren und ist mit dem mitgelieferten Layout auch glücklich, dann geht es wirklich schnell und man kann bereits nach wenigen Minuten anfangen zu bloggen. Bei uns sollte das Ganze aber in eine bestehende Seite mit einer bestehenden Navigation integriert werden. Dazu sollten es die einzelnen Backend-Benutzer in ihren Zweigen jeweils einsetzen können, ohne das sich die Blogs ins Gehege kommen und ohne das die Benutzer mit TypoScript in Berührung kommen. Dafür waren einige Änderungen, Erweiterungen und ausführliche Tests nötig. Insgesamt ist das Konzept, die einzelnen Anwendungen in sogenannte Widgets zu kapseln, sehr gelungen. Dadurch weiß man recht gut wie und wo man ansetzen muss und will.

Ich möchte mich auch bei Thorsten Schneider und beim Kaktusteam bedanken, die mir besonders beim RSS-Feed mit ihren Einträgen geholfen haben. Den Blog bei uns im Einsatz, gut eingepasst in die bestehende Navigation und Seitenstruktur sieht man auf unseren Seiten des Rechenzentrums. In den nächsten Zeilen werde ich grob auf einige Klippen und Hürden eingehen, die umschifft werden mussten. Einigen Code dazu in der Langfassung des Artikels.

1. TemplaVoila: Hauptproblem mit TemplaVoila ist, dass die Inhaltselemente doppelt angezeigt werden. Um dies zu umgehen habe ich ein neues TO erschaffen, dass einen zusätzlichen Inhaltsbereich, deckungsgleich mit dem eigentlich Inhaltsbereich enthält. Der eigentliche Inhaltsbereich wird über CSS ausgeblendet. Jetzt kommen die für den Blog genutzten Content Element in den nicht-sichtbaren Bereich und die Blog-Elemente in den sichtbaren Bereich. So kann man recht elegant das Problem der doppelt angezeigten Elemente bei t3blog umgehen.

2. BE-User Autorfeld: Blöd ist, dass ein eingeloggter BE-User alle anderen User als Autor auswählen kann, nicht nur die aus seiner BE-Gruppe. Das kann man umgehen, in dem man das Auswahlfeld nicht sichtbar macht und den Autor vorbelegt.

TCAdefaults.tx_t3blog_post.author :=author_return(uid)

3. Template Einstellungen: Ich finde es zwar nicht schlecht, dass man den Blog nahezu komplett über TS konfigurieren kann, aber es ist nicht immer ganz ersichtlich, ob man jetzt pi1 oder pi2 ansprechen muss. Da ist Rumprobiererei angesagt. Danach lassen sich aber Labels und Einstellungen sehr gut ansprechen. Trotzalledem bin ich nicht drumherum gekommen in den eigentlich setup.txt - Dateien Einstellungen vorzunehmen. Da diese mehrfach verschachtelt und sehr komplex sind, war es für mich weniger aufwendig schnell die setup.txt zu editieren und die Änderungen für spätere Updates zu dokumentieren, als das alles in das TS-Setup der Seite zu packen. Ich habe einige Einstellungen in den Wraps vorgenommen um z.B. das Autorenbild auszublenden, die Anzahl der Kommentare einzuklammern, Kategorie und Autor mit einem Bezeichner zu versehen und Elemente mit einer zusätzlichen umgebenden <div>-Box zu versehen, um sie mittels CSS besser stylen zu können.

4. CoolURI: Leider arbeitet t3blog noch nicht korrekt mit CoolURI zusammen. Um das zu umgehen, habe ich mir eine kleine userFunc in der localconf.php geschrieben, die abfragt ob auf der jeweiligen Seite ein Blog-Element vorhanden ist. Wenn dem so ist, dann wird CoolURI für die Seite einfach abgeschaltet.

5. Kommentar E-Mails: Bei neuen Kommentaren wird eine E-Mail an den Adminstrator verschickt. Normalerweise kann man den über den Constant Editor einstellen. Da ich diesen dem Benutzer nicht zur Verfügung stellen will, habe ich die Widget-Auswahl-Maske um ein Feld zur Eingabe einer E-Mail-Adresse erweitert. Jetzt kann der Benutzer beim Anlegen eines Blogs selber festlegen, an welche Adresse er die Mails haben möchte.

6. TagCloud: Leider sortiert die TagCloud standardmäßig nach dem Vorkommen der Begriffe. Ich wollte aber lieber eine Sortierung nach Alphabet. Dazu muss man einfach in der Datei class.tagCloud.php die Funktion sortByCountValue() auskommentieren.

7. JS-Files: Die JS-Files binden wir manuell ein und auch nur dann, wenn sich auf der Seite auch ein Blog befindet. Dazu bedienen wir uns wieder der userFunc die ich schon für CoolUri geschrieben habe.

8. CSS Styling: Das Styling des Blogs erfolgt in CSS-Dateien. Hier war auch einiges an Anpassung nötig, da die von Snowflake mitgelieferten Vorgaben nur auf das vorgegebene Layout passten. Aber mit viel Ausprobieren habe ich eine schöne Lösung gefunden, die die BlogList links und alle Widgets rechts auf der Seite positioniert. Von den Maßen her ist es sehr an unsere TYPO3-Installation angepasst, eine Weitergabe bringt nicht viel.

9. RSS-Feeds: Am meisten Probleme bereiteten die RSS-Feeds. Hier musste ich einige Eingriffe im Code vornehmen, damit nur die Beiträge aus dem zugehörigen Blog und nicht alle angezeigt werden. Außerdem wollte ich lieber einen Full-Feed statt einen Short-Feed. Auch hierzu musste der Quelltext abgeändert werden, da wir statt dem Text die UID brauchten um das zugehörige Content Element manuell zu rendern. Ansonsten habe ich keinen schönen Feed bekommen. Bei den Links musste man das vorkommende & maskieren und durch & ersetzen. Zum Schluß habe ich noch die komplette Feed-Metadaten, die man normalerweise über den Constant Editor setzen kann so umgeschrieben, dass sie entweder automatisch generiert werden, von mir allgemein vorgegeben werden oder vom Benutzer selber über zusätzliche Felder bei der Widget-Auswahl eingegeben werden können.

Fazit: Ein hartes Stück Arbeit, aber im Ergebnis eine sehr gut in TYPO3 integrierte Blog-Umgebung die jeder Benutzer komfortabel in seinem eigenen Zweig nutzen kann. Als kleinen Bonus gibt es noch einen Auszug aus dem Handbuch für unsere Benutzer zum Download: Benutzerhandbuch_Blog.pdf

CoolURI
#Keine Umschreibung, wenn Blog-Element
[userFunc = user_isBlog()]
config.tx_cooluri_enable = 0
[end]

Diese Funktion ruft die Methode user_isBlog auf. Gibt die true zurück, dann wird die URL-Umschreibung ausgeschaltet. Die entsprechende Methode in der Datei localconf.php sieht so aus:

//UserFunc um zu überprüfen, ob sich auf der Seite ein Kalender befindet
function user_isBlog() {
    $id = $GLOBALS['TSFE']->page['uid'];
    $res = $GLOBALS['TYPO3_DB']->exec_SELECTquery(
    '*',
    'tt_content',
    'pid='.$id.' AND list_type = "t3blog_pi2"',
    '',
    '',
    '');
    $num = mysql_num_rows($res);
    if($num > 0) {
        return true;
    } else {
        return false;
    }
}

Kommentar E-Mails:

Damit jeder Benutzer hier eine eigene Adresse eintragen kann, müssen wir das Flexform für die Widget-Auswahl erweitern. Dies geschieht in der Datei flexform_pi2.xml im Extension-Verzeichnis. Nach der Beschreibung des <storagePid> Feldes fügen wir folgenden Code ein:

    <commentEmail>
        <TCEforms>
            <exclude>1</exclude>
            <label>LLL:EXT:t3blog/pi2/locallang.xml:pi_flexform.commentEmail</label>
            <config>
                <type>input</type>
                <size>50</size>
            </config>
        </TCEforms>
    </commentEmail>

In der referenzierten locallang.xml Datei muss der gewünschte Text eingetragen werden:

    <label index=“pi_flexform.commentEmail“>E-Mail Adresse des Blog-Verantwortlichen (Bei Blog list- und RSS-Widget eintragen):</label>

Damit kann der Benutzer jetzt eine E-Mail Adresse angeben. Damit die dort eingegebene Adresse vom Blog bei Kommentaren auch verwendet wird, müssen wir Änderungen im Code vornehmen:

In der Datei pi2/class.tx_t3blog_pi2.php fügen wir in der init-Methode nach Zeile 75 ein:

$this->internal[‚commentEmail‘] = this->pi_getFFvalue($this->cObj->data[‘pi_flexform’], ‘commentEmail’, ‘sDEF’)

Anschließend schreiben wir so ermittelte Adresse in der main-Methode nach Zeile 54 in das globale Array. Dazu rufen wir eine Methode aus der Library auf:

    t3blog_div::setCommentEmail($this->internal[‚commentEmail‘]);

In der Datei pi1/lib/class.t3blog_div.php müssen wir die Methode natürlich implementieren. Zusätzlich implementieren wir eine Methode, die die E-Mail Adresse zurückgibt und von außen aufgerufen werden darf.

    function setCommentEmail($mail) {
        if($mail == „“) {
$GLOBALS[‚commentEmail‘] = “root”
        } else {
$GLOBALS[‚commentEmail‘] = $mail;
        }
    }

    function getCommentEmail() {
        return $GLOBALS[‚commentEmail‘];
    }

Zum Schluß ist dann im blogList-Widget die Datei class.singleFunctions.php zu ändern. In der Methode adminMailComment() ab Zeile 830 lesen wir die entsprechende Variable aus und fügen die E-Mail_Adresse als Zieladresse in den Aufruf der plainMailEncoded Methode ein.

    $mailTo = t3blog_div::getCommentEmail();

RSS-Feeds:

Damit der RSS-Feed funktioniert, sind ein paar Einstellungen nötig. RSS-Feeds werden über den speziellen Seitentyp 100 gekennzeichnet. Dieser muss definiert werden, dies geschieht im TS-Setup des Root-Templates:

#Definition des Seitentypes 100 um RSS-Feeds in Blogs anzuzeigen
xmlnews = PAGE
xmlnews {
        typeNum = 100
        config {
                disableAllHeaderCode = 1
                additionalHeaders = Content-type:text/xml
                linkVars = L
                no_cache = 1
               xhtml_cleaning = 0
               admPanel = 0
        }
        10 = USER
        10 {
                # Call the user function
                userFunc = tx_t3blog_pi1->main
                widget.rss < plugin.tx_t3blog_pi1.rss
          # Load "design" of the RSS-stuff
                # Attention! This will only work, when you are
                # using the static template "T3BLOG Layout".
                # The static template has included the full design of
                # a blog (position of widgets and much more)t

                template =< plugin.tx_t3blog_pi1.layoutBlog.40.80
        }
}

Weiterhin setzen wir im TS-Setup noch die folgenden Einstellungen:

#t3Blog: RSS Feed
plugin.tx_t3blog_pi1 {
rss {
    postItemCount = 10
    feedCopyright = 2009 Universität Konstanz
    feedWebMaster = typo3@uni-konstanz.de
}
}
plugin.tx_t3blog_pi2 {
rss {
    _LOCAL_LANG.de.rss_click_here = Feeds!
}
}

Der erste Block (pi1) setzt die Anzahl der Beiträge im Feed auf 10 und definiert einige Metadaten, die für alle Feeds im System gelten. Weitere Metadaten werden in einem separaten Unterkapitel behandelt. Der zweite Block (pi2) ändert die Überschrift im Frontend für die Feeds in der deutschen Sprachdatei.

Nur eigener Blog:

In der Methode getContentResult fügen wir ab Zeile 200 ein:

//Nur Beiträge/Comments aus dem zugehörigen Blog-Folder
$pid = t3blog_div::getBlogPid();

Und erweitern die where-Klausel für die Datenbankabfrage um die Abfrage der PID:

$where = ‚WHERE ‘.$table.‘deleted = 0 AND ‘.$table.’.hidden = 0 AND ‘.$table.’.pid = ‘.$pid;

Full-Feed statt Short-Feed:

Um den Benutzern einen Full-Feed anzubieten, der die kompletten Inhalte ausliefert, ist ebenfalls eine Änderung im Code notwendig. In der Methode make_xml erweitern wir in Zeile 137 & 147 den Methoden Aufruft setRecFields um den Parameter text.

    $xmlObj->setRecField(‚tx_t3blog_com‘, ‚title,author,uid,fk_post,date,text‘);

Der ausgelesene Text muss aber noch gerendert werden, ansonsten ist er unformatiert und ohne Zeilenumbrüche. Zu diesem Zweck ändert man die Abfrage der Datenbank in Zeile 227. Die SELECT-Klausel lautet neu:

    $select .= ‚, tt-content.uid AS text ‚;

Anstatt also über eine CONCAT-SQL-Funktion den Text direkt auszulesen, lassen wir nur die ID des Content Elements ausgeben.

Im weiteren Verlauf ändert man in der der fieldWrap – Methoden den case ‚text‘: Anstatt des Textes bekommen wir hier die ID übergeben und rendern das Content Element mit den folgenden zwei Zeilen manuell:

$getBodytext = array(‚tables‘ => ‚tt_content‘, ‚source‘ => $value, ‚dontCheckPid‘ => 1);
$this->item = $this->cObj->RECORDS($getBodytext);

Das ist natürlich nicht 100% sauber, da man auch einen eigenen case-Fall dafür bauen könnte.

Link-Generierung:

//Temporäre Generierung der Link-URL
$linkTempGen =
''.(stripos('http://',t3lib_div::getIndpEnv('HTTP_HOST'))?'':'http://').t3lib_div::getIndpEnv('HTTP_HOST').'/'.tslib_pibase::pi_getPageLink(t3blog_div::getBlogPid(), '', array('no_cache' => 1, 'tx_t3blog_pi1[blogList][year]' => $year, 'tx_t3blog_pi1[blogList][month]' => $month, 'tx_t3blog_pi1[blogList][day]' => $day, 'tx_t3blog_pi1[blogList][showUid]' => $this->conf['feedItemLinkPrefix'].$postid)).'';
$linkTempGen = str_replace("&","&",$linkTempGen);
return '<link>'.$linkTempGen.'</link><guid>'.$linkTempGen.'</guid>';

Feed-Metadaten:

Damit der Benutzer von TypoScript verschont bleibt, ist es notwendig die FlexForm Variablen auch in den Widgets verfügbar zu machen. Dazu ist eine Methode nötig, die die FlexForm Daten manuell aus der Datenbank holt und zur Verfügung stellt. Diese Methode wird als eigene Funktion implementiert:

    function getFlexform($value) {
        //Seiten ID
        $id = intval(t3lib_div::GP(‚id‘);
        //RSS Widget ist Nummer 7
        $like = “’%<value index=\”vDEF\”>7</value>%’”;
        //Flexform Daten besorgen
        $sql = $GLOBALS[‘TYPO3_DB’]->exec_SELECTquery (
            ‚pi_flexform‘,
            ‚tt_content‘,
            ‚pid = ‚.$id.‘ AND pi_flexform LIKE ‚.$like,
            ‘’,
            ‘’,
            ‘’
        );
        $row = $GLOBALS[‘TYPO3_DB’]->sql_fetch_assoc($sql);
        //Flexform-XML in Array umwandeln
        $flex = t3lib_div::xml2array($row[‘pi_flexform’]);
        Return $this->pi_getFFvalue($flex, $value, ‘sDEF’);

Der Zugriff und die Zuweisung zu den einzelnen Feldern erfolgt dann im Kopf der renderHeader-Methode mit den folgenden Aufrufen:

    $this->conf[‚feedManagingEditor‘] = $this->getFlexform(„commentEmail“);
    $this->conf[‚feedDescription‘] = $this->getFlexform(„feedDescription“);
    $this->conf[‚feedTitle‘] = $this->getFlexform(„feedTitle“);

Wichtig ist dabei, dass der der Methode getFlexform übergebene Wert dem Wert entspricht, der auch in der flexform_pi2.xml so definiert ist. Die E-Mail Adresse wurde bereits für Kommentar-Emails definiert, die anderen Einstellungen müssen wir noch festlegen. Dies geschieht nach dem Block commentEmail.

    <feedTitle>
        <TCEforms>
            <exclude>1</exclude>
            <label>LLL:EXT:t3blog/pi2/locallang.xml:pi_flexform.feedTitle</label>
            <config>
                <type>input</type>
                <size>50</size>
            </config>
        </TCEforms>
    </feedTitle>
    <feedDescription>
        <TCEforms>
            <exclude>1</exclude>
            <label>LLL:EXT:t3blog/pi2/locallang.xml:pi_flexform.feedDescription</label>
            <config>
                <type>input</type>
                <size>50</size>
            </config>
        </TCEforms>
    </feedDescription>

In der verlinkten locallang-Datei müssen noch die Beschriftungen eingetragen werden.

    <label index=“pi_flexform.feedTitle“>Titel des RSS-Feeds (Bei RSS-Widget eintragen):</label>
    <label index=“pi_flexform.feedDescription“>Kurzbeschreibung des RSS-Feed (Bei RSS-Widget eintragen):</label>

feedLink

Der Link wird zur Startseite des Blogs generiert. Diese ermitteln wir und generieren daraus den Link mit folgender Befehlszeile am Anfang der renderHeader-Methode:

    $this->conf[‚feedLink‘] =
(stripos(‚http://‘,t3lib_div::getIndpEnv(‚HTTP_HOST’))?’’:’http://’).t3lib_div::getIndpEnv(‘HTTP_HOST’).’/’.tslib_pibase::pi_getPageLink(t3blog_div::getBlogPid(),’’,’’);

feedImage

Ein Bild zum Feed wollen wir nicht anzeigen, deshalb kommentieren wir den Teil zur Generierung des Feed-Bildes im Code aus. Das geschieht in der Methode renderHeader ab Zeile 294.

TYPO3 an den Hochschulen in Baden-Württemberg

nospam@example.com (Matthias Häger) — Fri, 13 Feb 2009 10:52:16 +0100

Es ist zwar schon etwas her, genauer gesagt 9 Tage, aber am letzten Mittwoch war das erste TYPO3-Webmaster-Treffen in Nürtingen. Organisiert von der HfWU und der Universität Hohenheim trafen sich dort die TYPO3-Verantwortlichen der Hochschulen in Baden-Württemberg. Gedacht zum gemeinsamen Kennenlernen und Erfahrungsaustausch über das TYPO3-System trafen sich dort Vertreter aus Konstanz (Uni + HTWG), Ulm, Rottenburg, Reutlingen, Hohenheim, Nürtingen-Geislingen, Esslingen und Tübingen.

Es war seht interessant zu erfahren, mit welchen Problemen andere Hochschulen zu kämpfen haben und welch unterschiedliche Lösungen für ähnliche Probleme gefunden wurden. Insgesamt zeigt sich doch, dass es zwischen den Hochschulen viele Gemeinsamkeiten gibt. Die Anbindung von HIS-Systemen für Prüfungs- und Vorlesungsverwaltung und die Nutzung von eLearning-Plattformen steht bei nahezu allen Hochschule auf der Agenda.

Für die Zukunft wurden weitere Treffen und eine engere Zusammenarbeit vereinbart. Ich bin gespannt, ob sich daraus wirklich Synergieeffekte und Erleichterungen ergeben, der Start war schonmal vielversprechend. Das nächste Treffen soll im Mai in Hohenheim stattfinden.

Extension Mail2BE-User

nospam@example.com (Matthias Häger) — Tue, 13 Jan 2009 09:51:15 +0100

TYPO3: Mail an alle BE-User

Wieder eine kleine TYPO3 Extension von mir. Das Problem war, das ich als zentraler Administrator gerne E-Mails an alle registrierten BE-User verschicken wollte. Diese Funktion brauchte ich für Rundbriefe, News, etc. und sie ist leider von TYPO3 nicht vorgesehen. Zwar sollte das Ganze über DirectMail gehen, aber diese Extension war mir dann doch zu groß und umfangreich für den kleinen Anwendungszweck.

Also habe ich selber ein schnelles Backend-Modul programmiert, das eine Eingabemaske bereitstellt, in der Mailbetreff und Mailtext eingegeben werden können. Mittels Checkboxen können die Empfänger ausgewählt werden, die mit dieser E-Mail beglückt werden.

Die Extension lässt sich bequem mit einer vorgegebenen Betreffzeile und einem vorgegebenen Absender vorkonfigurieren. Dies geschieht ohne TypoScript oder ähnliches über die Konfiguration im Erweiterungsmanager.

Extension im TER!

TYPO3 - LDAP-Anbindung mit eu_ldap plus Modifikationen

nospam@example.com (Matthias Häger) — Fri, 05 Dec 2008 14:47:00 +0100

Endlich komme ich gegen Ende der Woche mal wieder dazu etwas über meine Arbeit an TYPO3 zu bloggen. Die letzte Zeit hatten wir ziemlich damit zu kämpfen, unsere TYPO3-Instanz an das universitäte LDAP anzubinden.

Ausgangslage: Bei uns an der Universität ist ein LDAP-Verzeichnis aktiv, dass die Accountdaten für sämtliche Mitglieder der Universität speichert. Es wäre also sinnvoll auch die Authentifzierung für unser TYPO3 darüber zu machen, da wir uns eine eigene Passwort- und Benutzerverwaltung innerhalb TYPO3 damit zumindest erleichtern können. Auch wenn sie nicht ganz wegfällt. Problematisch dabei ist, dass das LDAP wie so häufig historisch gewachsen ist und das LDAP-Schema dadurch nicht gerade komfortabel.

Weg und Lösung: Wir begannen als Basis mit der verbreiteten eu_ldap Extension, die unseren Anforderungen relativ nahe kam. Trotzdem waren noch einige Anpassungen nötig. Zuerst ist es bei uns so, dass die Benutzer über eine eindeutige ID identifiziert werden, wir aber den Login über den leichter zu merkenden E-Mail-Alias (vorname.nachname) haben wollten. Deshalb mussten wir in eu_ldap einen Zwischenschritt einbauen, der zuerst den Benutzer mit dem Alias gegen das LDAP-Verzeichnis authentifziert, dann die eindeutige ID ermittelt und mit dieser im weiteren Verlauf die Gruppenzuordnung herstellt.

Leider konnten wir nicht dem Benutzer einfach ein Attribut zuweisen, sondern mussten den Weg gehen für das TYPO3 eine neue Gruppe (ou=typo3) anzulegen, in der die IDs der erlaubten Benutzer (memberUID) geschrieben werden. Über die Einschränkung nur Benutzer aus Gruppe in eu_ldap können wir so die Authentifzierung nach unseren Wünschen durchführen.

Als nächstes Problem stellte sich der Import neuer User ins TYPO3 dar. Benutzer werden in einer externen, proprietären Anwendung in die TYPO3-Gruppe verschoben oder entfernt und stehen dann für TYPO3 zur Verfügung. Entweder wartet man bis sich der Benutzer das erste Mal einloggt, dann wird er importiert. Dies ist aber sehr unkomfortabel, da wir ihm erst nach dem 1. Einloggen die TYPO3-Gruppen zuordnen können, die ihm Rechte und Zugriff auf bestimmte Zweige des Baumes geben. Der manuelle Import neuer Benutzer durch eu_ldap funktionierte zwar im Prinzip, zeigte aber den unschönen Effekt, dass der gesamte LDAP-Baum durchlaufen und jeder Benutzer einzeln auf Zugehörigkeit überprüft wird. Bei knapp 15.000 Benutzern im LDAP aus Performance-Gründen nicht akzeptabel. Wir haben daraufhin das Backend-Modul von eu_ldap um zwei Importmöglichkeiten erweitert. Entweder ein einzelner Benutzer kann über seinen Alias importiert werden, oder gleich eine ganze komma-separierte Liste an Benutzern. Dabei wird nicht der ganze Baum, sondern nur der eingegebene Benutzer überprüft.

Das letzte Problem war schließlich ein altbekanntes von eu_ldap. Manuell zugeordnete Gruppen werden beim Re-Import des Benutzers nach dem Einloggen gelöscht. Da wir aber die TYPO3-Gruppen nicht im LDAP zuordnen können, sondern dies weiterhin in TYPO3 geschehen muss, mussten wir eine Unterscheidung zwischen LDAP-Gruppen und "normalen" Gruppen herstellen. Hierbei half uns der von Tom Gottschalk in seiner Diplomarbeit "Entwicklung einer interaktiven Publikations-Plattform mit Redaktionssystem für den Fachbereich Medien der Hochschule Mittweida (FH)" entwickelte Hack sehr weiter, den wir nahezu unverändert übernehmen konnten. Danke schön!

Daneben waren noch einige kleiner Anpassungen am Code, eine eigene Logging-Funktion zum Debuggen und vieles mehr nötig, so dass wir eu_ldap doch deutlich modifziert und auf uns zugeschnitten haben. OpenSource zeigt hier seine Stärken, die Flexibilität und Anpassbarkeit - besonders von TYPO3 - ist klasse.

Jetzige Situation: Derzeit läuft es so ab, dass wir einen neuen Benutzer extern zum TYPO3-User machen, ihn danach über unser modifiziertes eu_ldap ins TYPO3-Backend importieren und dort dann die Gruppen zuweisen. Soll ein Benutzer kein TYPO3-Admin mehr sein, dann nehmen wir einfach aus der LDAP-Gruppe raus oder der Account wird durch Ausscheiden aus der Uni automatisch inaktiv.

Im nächsten Schritt müssen wir uns noch Gedanken über die Realisierung von Frontend-Login machen, um bestimmte Bereiche nur Mitgliedern der Universität oder einzelnen Fachbereichen zugänglich zu machen. Das steht auf der Agenda aber nicht ganz oben.

TYPO3 - Anwendertag

nospam@example.com (Matthias Häger) — Wed, 12 Nov 2008 09:25:32 +0100

Wie angekündigt war ich gestern auf dem TYPO3-Anwendertag in Frankfurt, um mir neue Inputs zu holen und mich einfach mal darüber zu informieren was andere so machen. Meine Meinung dazu ist zweigeteilt, denn die Qualität der Vorträge und Beiträge war stark unterschiedlich. Nicht nur inhatlich, sondern auch in der Präsentation. Bei manchen Leuten kann man wirklich nur sagen: "Geht in Euer Büro, schließt Euch ein, programmiert - aber stellt Euch nie wieder vor Leute und redet." Von "zu leise" über "zu eintönig" bis zu "20 Minuten mit der Leinwand statt mit dem Publikum reden" und "falsch angezeigten Folien" waren eigentlich alle "No-Gos" für Präsentationen vertreten.

Inhaltlich setzte sich die unterschiedliche Qualität fort. Bei einem Teil der Beiträge dachte ich mir "Ja ganz nett, aber nix Neues" Dazu blieben auch einige zu sehr an der Oberfläche, die Präsentationen hätte man auch gut einem nicht-typo3-affinen Publikum vorsetzen können. Bei einer mit genügend Vorkenntnissen ausgestatteten Zuhörergruppe hätte ich mitunter schon etwas technischere und detailliertere Angaben gewünscht. Aber es soll jetzt nicht nur nach Kritik hier aussehen, einige Vorträge waren wirklich top und sehr informativ und haben auch eine Menge neue Ideen geliefert. Hierzu zähle ich besonders die Vorträge von Cisco Webex, tobaccoland und TYPO3 mit SAP, die - alle am Ende platziert - die Veranstaltung zum Schluß nocheinmal auf ein deutlich höheres Niveau gehoben haben.

Mein Fazit sieht so aus: Diejenigen die TYPO3 selbst umsetzen, kochen alle nur mit Wasser und liefern auch keine besonderen Lösungen. Nichts, hinter dem wir uns verstecken müssen und auch nicht viel was ich jetzt für besonders speziell und erwähnenswert halte. Diejnigen die spezialisierte Agenturen wie AOEMedia oder d.k.d. zu Rate ziehen, die erhalten auch innovative und teils spektakuläre Lösungen bei denen TYPO3 seine ganze Flexbilität und Erweiterbarkeit demonstrieren kann. Hier kann man sich auf jeden Fall Ideen abgucken und neue Impulse sammeln, zumal die individuelle Lösungen auch der Community wieder zur Verfügung gestellt werden.

Insgesamt also ein durchwachsener Tag, für die doch stolze Teilnahmegebühr von 238,00 Euro hätte ich mir persönlich etwas mehr Qualität erwartet.

Meine erste Typo3 Extension im TER: ActiveKB Top 10

nospam@example.com (Matthias Häger) — Mon, 10 Nov 2008 19:06:00 +0100

Jawoll. Es ist vollbracht. Meine erste eigene Extension findet sich im Typo3 Extension Repository, kurz TER, wieder. Nachdem meine bisherigen Programmierungen immer sehr individuelle, auf die Bedürfnisse bei uns an der Uni zugeschnittene Erweiterungen hervorbrachten, freue ich mich jetzt, eine Extension an die Community zurückzugeben, die mir bisher auch schon viel geholfen hat. Und zwar handelt es sich um die Extension ActiveKB Top 10. Nun - was tut sie?

Wir setzen bei uns an der Universität zusätzlich zu Typo3 die ActiveKB Knowledge Base der Firma Interspire ein. Mittlerweile heißt das Ding glaube ich Knowledge Manager. Es ist eine für unsere Zwecke sehr geeignete Software um FAQs, Tutorials und Co. in Form einer durchsuch- und bewertbaren Wissensdatenbank den Benutzern zur Verfügung zu stellen. Eine meiner Aufgaben ist es nun, diese Knowledge Base bestmöglichst mit Typo3 zu "verheiraten". Diese kleine Extension ist das erste Ergebnis davon.

Sie erlaubt es auf jeder beliebigen Seite ein Inhaltselement vom Typ Plug-In zu setzen und in den Einstellungen eine Kategorie der Knowledge Base und die Anzahl der zu zeigenden Artikel auszuwählen. Auf der Typo3 Seite werden dann die X beliebtesten Artikel aus der KB direkt angezeigt. So, wie auf dem Screenshot ersichtlich. Die Extension heißt Top 10, weil standardmäßig die 10 beliebtesten Artikel angezeigt werden.

Technisch gesehen stellt die Extension eine Verbindung zur KB-Datenbank her, ermittelt die vorhandenen Kategorien und - nach Auswahl einer Kategorie durch den Benutzer - die zugehörigen Einträge, die dann einfach dargestellt werden. Mittels TypoScript Einträgen werden KB-Pfade und Datenbanknamen gesetzt.

Ich weiß nicht, wer diese Extension brauchen kann, denn meine bisherigen Recherchen haben keine Anzeichen dafür ergeben, dass schonmal jemand Typo3 und Interspire ActiveKB gemeinsam eingesetzt hat. Trotzdem würde ich mich freuen, wenn meine Extension jemandem helfen kann.

Apropos Typo3: Morgen bin ich in Frankfurt auf dem Typo3-Anwendertag. Da bin ich mal gespannt, was man da so für neue Ideen und Anregungen bekommt.

Neue Typo3 Extension - CSS Editor

nospam@example.com (Matthias Häger) — Tue, 04 Nov 2008 09:37:58 +0100

Ich möchte eine weitere neue selbstentwickelte Typo3 Extension vorstellen.

Ausgangslage: Wir wollen wie bekannt an der Universität Konstanz Typo3 als uniweites CMS einführen. Das Problem ist dabei, dass wir zwar das Layout vorgeben, jeder Fachbereich und jede Einrichtung (BE-Gruppe mit eigenem Zweig) aber die Farben selber wählen darf. Beispiel: Rechenzentrum und KIM. Gleiches Layout, unterschiedliche Farben. Die Zuweisung der Farben erfolgt über CSS-Dateien, die für jede Gruppe eingebunden werden. Der Benutzer soll nun die Farben ändern können, ohne CSS lernen und eingeben zu müssen, ohne die CSS-Datei auf dem Server direkt zu manipulieren und ohne mit TypoScript-Code in Berührung zu kommen. Gefragt war also eine grafische Möglichkeit. Eine bestehende Lösung konnte ich nicht finden.

CSS Editor
Lösung: Die von mir entwickelt Extension baut auf folgendem Grundprinzip auf. Es wird die dem aktuelle eingeloggten Backend-Benutzer zugehörige Gruppe ermittelt und das bestehende CSS-File eingelesen, das den Namen der Gruppe tragen muss. Im CSS-File sind die zu verändernden Parameter durch eindeutige Marker gekennzeichnet. Das Backend-Modul liest die Werte ein und stellt sie mit Erläuterungen in Textfeldern dar. Die Hex-Werte können direkt manipuliert werden.

Um dem Benutzer, der mit Hex-Werten nichts anfangen kann, Unterstützung zu geben ist ein Color Chooser eingebaut. Er ist aus der Yahoo UI Library entnommen. Jeder Wert eines Parameters kann im Color Chooser angezeigt und dann bequem durch Ziehen manipuliert werden. RGB- und HSV-Werte können direkt eingegeben werden.

Unterhalb des Eingabebereiches findet sich eine Live-Vorschau, die das Layout unserer Webseiten zeigt. Bei Veränderung einer Farbe wird die Vorschau direkt verändert, so dass man die Wirkung von geänderten Farben direkt ersehen kann. Sind die Farben nach Wunsch verändert, dann können sie per Mausklick in die CSS-Datei geschrieben werden und sind dann im jeweiligen Webauftritt verfügbar.

Also ein grafischer Farbeditor für CSS-Dateien mit dem man die Stylesheets bequem und ohne Vorkenntnisse ändern kann. Zusammen mit einem in der neuen Version dann hoffentlich vernünftigen Frontend Editing kann man dann auch wenig technik-affine Sekretärinnen (Achtung: 5€ in die Chauvi-kasse) auf das System loslassen.

Demonstration: Eine kurze Tour durch den CSS Editor zeigt das von mir am Bildschirm aufgenommene Youtube - Video indem man die Benutzerführung und das Look & Feel grob erkennen kann.

Weiterverwendung: Leider ist die Extension momentan sehr auf unsere lokalen Verhältnisse zugeschnitten. Deshalb ist sie auch nicht im TER verfügbar. Durch die individuellen Marker in den CSS-Dateien und die individuelle Vorschau halte ich es auch für sehr schwierig sie so anzupassen, dass man sie universell verwenden kann. Für alle Interessierten habe ich trotzdem den Code der mod1/index.php und der Beispiel-CSS Datei vorlage.css im erweiterten Blogeintrag hinterlegt

mod1/index.php

<?php
/***************************************************************
* Copyright notice
*
* (c) 2008 Matthias Häger <matthias.haeger@uni-konstanz.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!
***************************************************************/

    // DEFAULT initialization of a module [BEGIN]
unset($MCONF);
require_once('conf.php');
require_once($BACK_PATH.'init.php');
require_once($BACK_PATH.'template.php');

$LANG->includeLLFile('EXT:rz_csseditor/mod1/locallang.xml');
require_once(PATH_t3lib.'class.t3lib_scbase.php');
$BE_USER->modAccess($MCONF,1);    // This checks permissions and exits if the users has no permission for entry.
    // DEFAULT initialization of a module [END]

/**
Module 'CSS Editor' for the 'rz_csseditor' extension.
*
@author    Matthias Häger <matthias.haeger@uni-konstanz.de>
@package    TYPO3
@subpackage    tx_rzcsseditor
*/
class tx_rzcsseditor_module1 extends t3lib_SCbase {
                var $pageinfo;

                /**
                Initializes the Module
                @return    void
                */
                function init()    {
                    global $BE_USER,$LANG,$BACK_PATH,$TCA_DESCR,$TCA,$CLIENT,$TYPO3_CONF_VARS;

                    parent::init();

                    /*
                    if (t3lib_div::GP('clear_all_cache'))    {
                        $this->include_once[] = PATH_t3lib.'class.t3lib_tcemain.php';
                    }
                    /
                }

                /**
                Adds items to the ->MOD_MENU array. Used for the function menu selector.
                *
                @return    void
                */
                function menuConfig()    {
                    global $LANG;
                    $this->MOD_MENU = Array (
                        'function' => Array (
                            '1' => $LANG->getLL('function1'),
                            '2' => $LANG->getLL('function2'),
                            '3' => $LANG->getLL('function3'),
                        )
                    );
                    parent::menuConfig();
                }

                /**
                Main function of the module. Write the content to $this->content
                If you chose "web" as main module, you will need to consider the $this->id parameter which will contain the uid-number of the page clicked in the page tree
                *
                @return    [type]        ...
                */
                function main()    {
                    global $BE_USER,$LANG,$BACK_PATH,$TCA_DESCR,$TCA,$CLIENT,$TYPO3_CONF_VARS;

                    // Access check!
                    // The page will show only if there is a valid page and if this page may be viewed by the user
                    $this->pageinfo = t3lib_BEfunc::readPageAccess($this->id,$this->perms_clause);
                    $access = is_array($this->pageinfo) ? 1 : 0;

                    //Einführung einer zusätzlichen Abfrage um die Extension auch für Nicht-Admins nutzbar zu machen.
                    if (($this->id && $access) || ($BE_USER->user['admin'] && !$this->id) || 1==1)    {

                            // Draw the header.
                        $this->doc = t3lib_div::makeInstance('mediumDoc');
                        $this->doc->backPath = $BACK_PATH;
                        $this->doc->form='<form action="" method="POST">';

                            // JavaScript
                        $this->doc->JScode = '
                            <script language="javascript" type="text/javascript">
                                script_ended = 0;
                                function jumpToUrl(URL)    {
                                    document.location = URL;
                                }
                            </script>
                        ';
                        $this->doc->postCode='
                            <script language="javascript" type="text/javascript">
                                script_ended = 1;
                                if (top.fsMod) top.fsMod.recentIds["web"] = 0;
                            </script>
                        ';

                        $headerSection = $this->doc->getHeader('pages',$this->pageinfo,$this->pageinfo['_thePath']).'<br />'.$LANG->sL('LLL:EXT:lang/locallang_core.xml:labels.path').': '.t3lib_div::fixed_lgd_pre($this->pageinfo['_thePath'],50);

                        $this->content.=$this->doc->startPage($LANG->getLL('title'));
                        $this->content.=$this->doc->header($LANG->getLL('title'));
                        $this->content.=$this->doc->spacer(5);
                        //$this->content.=$this->doc->section('',$this->doc->funcMenu($headerSection,t3lib_BEfunc::getFuncMenu($this->id,'SET[function]',$this->MOD_SETTINGS['function'],$this->MOD_MENU['function'])));
                        $this->content.=$this->doc->divider(5);

                        // Render content:
                        $this->moduleContent();

                        // ShortCut
                        if ($BE_USER->mayMakeShortcut())    {
                            $this->content.=$this->doc->spacer(20).$this->doc->section('',$this->doc->makeShortcutIcon('id',implode(',',array_keys($this->MOD_MENU)),$this->MCONF['name']));
                        }

                        $this->content.=$this->doc->spacer(10);
                    } else {
                            // If no access or if ID == zero

                        $this->doc = t3lib_div::makeInstance('mediumDoc');
                        $this->doc->backPath = $BACK_PATH;

                        $this->content.=$this->doc->startPage($LANG->getLL('title'));
                        $this->content.=$this->doc->header($LANG->getLL('title'));
                        $this->content.=$this->doc->spacer(5);
                        $this->content.=$this->doc->spacer(10);
                    }
                }

                /**
                Prints out the module HTML
                *
                @return    void
                */
                function printContent()    {

                    $this->content.=$this->doc->endPage();
                    echo $this->content;
                }

                /**
                Generates the module content
                *
                @return    void
                */
                function moduleContent()    {
                    //Ermittlung der Gruppe des eingeloggten Benutzers
                    $group_id = (int)strtok($GLOBALS['BE_USER']->user[usergroup], ",");
                    $res = $GLOBALS['TYPO3_DB']->exec_SELECTquery(
                        'title',
                        'be_groups',
                        'uid='.$group_id,
                        '',
                        '',
                        ''
                        );
                    $row=$GLOBALS['TYPO3_DB']->sql_fetch_assoc($res);
                    $group = $row['title'];

                    //Einstellbare Parameter (Keywords)
                    $params = array("CSS_H1", "CSS_H2", "CSS_NAVTOP", "CSS_NAVMAIN", "CSS_LEFTNAV", "CSS_CONTENT", "CSS_LINK");
                    switch((string)$this->MOD_SETTINGS['function'])    {
                        case 1:
                            if(t3lib_div::_POST('do')=="send") {
                                $this->updateCSS($group, $params);
                                $content = "Änderungen eingetragen!";
                                $content .= "<hr>";
                                $content .= $this->renderPage($group, $params);
                            } else {
                                $content = $this->renderPage($group, $params);
                            }
                            $this->content.=$content;
                        break;
                        case 2:
                            $content='<div align=center><strong>Menu item #2...</strong></div>';
                            $this->content.=$this->doc->section('Message #2:',$content,0,1);
                        break;
                        case 3:
                            $content='<div align=center><strong>Menu item #3...</strong></div>';
                            $this->content.=$this->doc->section('Message #3:',$content,0,1);
                        break;
                    }
                }

                /**
                Generiert die Seite und gibt sie an die übergeordnete Funktion zurück.
                *
                @param    String Name der Gruppe des Benutzers
                @param    Array    Die Parameter die in der CSS-Datei verändert werden sollen.
                @return    String    Output der Webseite
                */
                function renderPage($group, $params) {

                    //Festlegung der Beschreibung der einzelnen Parameter
                    $CSS_H1 = "Hintergrundfarbe Überschrift 1. Ordnung: ";
                    $CSS_H2 = "Farbe der Überschrift 2. Ordnung: ";
                    $CSS_NAVTOP = "Hintergrundfarbe Top-Menü mit Quicklinks: ";
                    $CSS_NAVMAIN = "Hintergrundfarbe Hauptmenü: ";
                    $CSS_LEFTNAV = "Hintergrundfarbe linkes Navigationsmenü: ";
                    $CSS_CONTENT = "Hintergrundfarbe Hauptinhaltsbereich: ";
                    $CSS_LINK = "Farbe eines Links im Inhaltsbereich: ";

                    //Einleitender Text
                    $output = "In diesem Bereich können Sie Farben für Ihren Webauftritt anpassen. Das Layout der Universität wird vorgegeben, Ihre Wahl der Farben wird in einem eigenen CSS-File für Ihre Webseiten niedergelegt. Damit können Sie Ihre Seiten farblich nach Ihren Wünschen gestalten.<br /><br />
In jeder Zeile sehen Sie den aktuellen Hex-Farbwert für die angegebene Eingeschaft. Durch einen Klick auf Edit wird der Farbwähler daneben auf diesen Wert eingestellt. Sie können die Farbe frei verändern, die Auswirkungen können Sie direkt unten in der Vorschau beobachten. Mit einem Klick auf den Button \"Übernehmen\" wird der neue Farbwert übernommen (dargestellt durch rote Farbe). Mit \"Reset\" setzen Sie den Farbwähler auf den Ausgangswert zurück. Endgültig in die Datei geschrieben werden die Änderungen erst bei einem Klick auf \"Änderungen in Datei schreiben.\" <b>Vorsicht: Dieser Klick hat direkte Auswirkungen auf Ihre Webseite.</b>
<br /><br />";
                    $output .= "Sie sind Angehöriger der Gruppe: ".$group."<br />";


                    //Datei öffnen
                    $file = file("https://cms.uni-konstanz.de/fileadmin/templates/".$group.".css");
                    //Array durchlaufen und Zeilennummer (+2) und Wert für wichtige Eigenschaften speichern
                    $css_config = array();
                    for($i=0; $i<count($file);$i++) {
                        foreach($params as $unit) {
                            if(strstr($file[$i], "/***".$unit."***/") != false) {
                                $css_config[$unit."_line"] = $i+2;
                                $css_config[$unit."_value"] = substr(strrchr($file[$i+2],"#"),0,7);
                            }
                        }
                    }
                    $output .= "<br>";

                    //Globale JavaScript Variablen definieren um später die richtigen Wert in der Vorschau zu verändern.
                    $output .= '<script type = "text/javascript">var ziel; var attribut;</script>';

                    //Formularzeilen und die Buttons zum Editieren
                    $output .= "<form action=\"".$this->file."\" method=\"post\">";
                    $output .= "<input type = \"hidden\" name=\"do\" value=\"send\">";
                    $output .="<table>";
                    foreach($params as $unit) {
                        $output .= "<tr><td>".$$unit."</td><td>";
                        $output .= "<input type = \"hidden\" name=\"".$unit."_line\" value=".$css_config[$unit."_line"].">";
                        if($unit == "CSS_H2" || $unit == "CSS_LINK") {
                            $output .= "<input type = \"text\"
                            onkeyup=\"document.getElementById('".$unit."').style.color=this.value;\"
                            class=\"value-box\"
                            name=\"".$unit."_value\"
                            id=\"".$unit."_value\"
                            value=".$css_config[$unit."_value"].">
                            <input type=\"button\" value=\"Edit\" onclick=\"rgb=hex2val(document.getElementById('".$unit."_value').value); ziel='".$unit."'; attribut='color'; picker.setValue(rgb, false);\"></td></tr>";
                        } else {
                            $output .= "<input type = \"text\"
                            onkeyup=\"document.getElementById('".$unit."').style.backgroundColor=this.value;\"
                            class=\"value-box\"
                            name=\"".$unit."_value\"
                            id=\"".$unit."_value\"
                            value=".$css_config[$unit."_value"].">
                            <input type=\"button\" value=\"Edit\" onclick=\"rgb=hex2val(document.getElementById('".$unit."_value').value); ziel='".$unit."'; attribut='backgroundColor'; picker.setValue(rgb, false)\"></td></tr>";

                        }
                    }
                    $output .= "</table><br /><br /><input type = \"submit\" value=\"Änderungen in Datei schreiben\"> ";
                    $output .= "<input type = \"reset\" value=\"Änderungen zurücksetzen\" onclick=\"location.reload()\">";
                    $output .= "</form><br />";

                    //Darstellung des Farbwählers
                    $output .= $this->colorChooser();
                    //Darstellung der Live-Vorschau
                    $output .= $this->renderVorschau($params, $css_config);
                    //Rückgabe des Outputs.
                    return $output;

                }

                /**
                Generiert und konfiguriert den Farbwähler, beinhaltet JavaScript Hilfsfunktionen.
                *
                @return    String    Output Farbwähler
                */
                function colorChooser() {
                    $output;

                    //Grundlegende Div-Boxen für den Inhalt, Einbindung der YUI Scripts und CSS-Files
                    $output .= '
                        <div id="colorChooser" class="yui-skinsam">
                        <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/utilities/utilities.js"></script>
                        <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/slider/slider-min.js"></script>
                        <link rel="stylesheet" type="text/css" href="/fileadmin/templates/colorpicker.css">
                        <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/colorpicker/colorpicker-min.js"></script>
                        <div id="CC_container"></div>';
                    //JavaScripts für die Ausführung. Zuerst Initialisierung des Farbwählers, danach Funktion die aus einem gegebenen
                    //Hex-Wert ein entsprechendes RGB-Array errechnet. Danach eine Funktion, die die Live-Vorschau aktualisiert und zum
                    //Schluß ein Event-Listener der bei einer Farbveränderung im Farbwähler direkt eine Veränderung in der Vorschau bewirkt.
                    $output .='
                        <script type="text/javascript">
                        var picker = new YAHOO.widget.ColorPicker("CC_container", {
                            showhsvcontrols: true,
                            showhexcontrols: true,
                            images: {
                                PICKER_THUMB: "picker_thumb.png",
                                HUE_THUMB: "hue_thumb.png"
                            }
                        });

                        function hex2val(hex) {
                            MyArray = new Array(parseInt(hex.substring(1,3),16), parseInt(hex.substring(3,5),16), parseInt(hex.substring(5,7),16));
                            return MyArray;
                        }

                        function updateAll(ziel, attribut, value, change) {
                            document.getElementById(ziel+\'_value\').value=v;
                            if(attribut == "color") {
                                document.getElementById(ziel).style.color=v;
                            } else {
                                document.getElementById(ziel).style.backgroundColor=v;
                            }
                            if(change == 1) {
                                document.getElementById(ziel+\'_value\').style.color=\'red\';
                            } else {}

                        }

                        var onRgbChange = function(o) {
                            hexreihe = \'0123456789abcdef\';
                            hex = "#";
                            for(i=0;i<3;i++) {
                                rgb = o.newValue[i];
                                ganz = Math.floor(rgb/16);
                                hex_single = hexreihe.charAt(ganz) + hexreihe.charAt(rgb-ganz*16);
                                hex = hex + hex_single;
                            }
                            if(attribut == "color") {
                                document.getElementById(ziel).style.color=hex;
                            } else {
                                document.getElementById(ziel).style.backgroundColor=hex;
                            }

                        }
                        picker.on("rgbChange", onRgbChange);
                        </script>';

                        //Zwei Buttons zum Übernehmen der Farbe bzw. zum Reset
                        $output .= '<input type="button" id="closeCC" value="Übernehmen" onclick="v = \'#\'+picker.get(\'hex\'); updateAll(ziel, attribut, v, 1);">
                        <input type="button" id="resetCC" value="Reset" onclick="v = document.getElementById(ziel+\'_value\').value; updateAll(ziel, attribut, v, 0); rgb=hex2val(v); picker.setValue(rgb, false);">
';
                        $output .= '</div>';
                    return $output;
                }

                /**
                Generiert eine Live-Vorschau der Webseite mit dem Grundlayout der Uni
                *
                @param    Array    Die Parameter die in der CSS-Datei verändert werden sollen.
                @param    Array    Array mit den verschiedenen Farbwerten
                @return    String    Output der Live-Vorschau
                */
                function renderVorschau($params, $css_config) {
                    $output = "";

                    //Zeichnung einer Webseite im Uni-Layout mit den CSS-Tags. Grundfarben im eingebundenen CSS-File
                    $output .= '<div id="CSS_BODY">
                        <link rel="stylesheet" type="text/css" href="/fileadmin/templates/vorschau.css">
                    <div id="logo"><img src="http://cms.uni-konstanz.de/fileadmin/templates/uni/logo.jpg" border="0"></div>
                    <div id="identityimage"><img src="http://cms.uni-konstanz.de/uploads/pics/home.png" width="220" height="134" border="0"></div>
                    <div id="heading"><p>Demoseite<br>CSS Vorschau<br></p></div>
                    <div id="CSS_NAVTOP"><ul><li><a>Home</a></li><li><a>Sitemap</a></li><li><a>Impressum</a></li></ul></div>
                    <div id="CSS_NAVMAIN"><ul><li><a style="background:white;" class="active">Menüpunkt 1</a></li><li><a>Menüpunkt 2</a></li></ul></div>
                    <div id="CSS_LEFTNAV"><ul class="leftnav"><li><a href="#">Unterseite</a></li><li><a href="#">2. Unterseite</a></li></ul></div>
                    <div id="CSS_CONTENT"><h1 id="CSS_H1">Überschrift 1. Ordnung</h1>
                    <p>Dies ist ein Blindtext. Dies ist ein Blindtext. Dies ist ein Blindtext. Dies ist ein Blindtext. Dies ist ein Blindtext. Diest ist ein Blindtext. Dies ist ein Blindtext. Dies ist ein Blindtext.</p>
                    <h2 id="CSS_H2">Überschrift 2. Ordnung</h2>
                    <p>Blindtext mit <a id="CSS_LINK" href="#">einem Link</a>!!!!!</p>
                    </div>
                        </div>';

                    //Generierung von JavaScript Code, der der Vorschau die initial eingelesenen Farbwerte aus dem übergebenen Array zuweist.
                    $output .= '<script type="text/javascript">';
                    foreach($params as $unit) {
                        if($unit == "CSS_H2" || $unit == "CSS_LINK") {
                            $output .= "document.getElementById('".$unit."').style.color='".$css_config[$unit."_value"]."';";
                        } else {
                            $output .= "document.getElementById('".$unit."').style.backgroundColor='".$css_config[$unit."_value"]."';";
                        }
                    }
                    $output .= '</script>';

                    //Rückgabe der Vorschau
                    return $output;
                }

                /**
                Öffnet die CSS-Datei, liest sie in ein Array und überschreibt die bisherigen Werte mit den neuen Angaben.
                *
                @param    String Name der Gruppe des Benutzers
                @param    Array    Die Parameter die in der CSS-Datei verändert werden sollen.
                @return    String    Output der Webseite
                */
                function updateCSS($group, $params) {
                    //Bisherige Datei öffnen
                    $file = file("../../../../fileadmin/templates/".$group.".css");

                    //Array der Parameter durchlaufen
                    foreach($params as $unit){
                        if($unit == "CSS_H2" || $unit == "CSS_LINK") {
                            //Zeile+3 muss ebenfalls geändert werden, damit die Linkfarbe auch bei a:visited gilt
                            if($unit == "CSS_LINK") {
                                $file[t3lib_div::_POST($unit."_line")] = "color:".t3lib_div::_POST($unit."_value").";\n";
                                $file[(int) t3lib_div::_POST($unit."_line") + 3] = "color:".t3lib_div::_POST($unit."_value").";\n";
                            } else {
                                $file[t3lib_div::_POST($unit."_line")] = "color:".t3lib_div::_POST($unit."_value").";\n";
                            }
                        } else {
                            $file[t3lib_div::_POST($unit."_line")] = "background-color:".t3lib_div::_POST($unit."_value").";\n";
                            //Bei der Linksnavigation muss die Änderung der Farben auch auf die Untermenüs übertragen werden. Deshalb Zeile+3 +6 und +9 ebenfalls mit dem Farbwert beschreiben.
                            if($unit == "CSS_LEFTNAV") {
                                $file[(int) t3lib_div::_POST($unit."_line") + 3] = "background-color:".t3lib_div::_POST($unit."_value").";\n";
                                $file[(int) t3lib_div::_POST($unit."_line") + 6] = "background-color:".t3lib_div::_POST($unit."_value").";\n";
                                $file[(int) t3lib_div::_POST($unit."_line") + 9] = "background-color:".t3lib_div::_POST($unit."_value").";\n";
                            }
                        }
                    }
                    $newcss;
                    //Umwandlung Array in ein String
                    foreach($file as $unit) {
                        $newcss .= $unit;
                    }
                    //String in Datei schreiben
                    t3lib_div::writeFile("../../../../fileadmin/templates/".$group.".css", $newcss);
                    //Ins Logfile schreiben
                    $this->log("[".date("Y-m-d - H:i:s")." - IP: ".$_SERVER['REMOTE_ADDR']."]@@@Geändertes CSS geschrieben: ___".$group."__");
                }

                /**
                Methode um in ein Logfile zu schreiben.
                *
                @params    string    In das Logfile zu schreibender String
                */
                function log($message) {
                    $logfile = fopen("/var/log/typo3/rz_css_editor.log", "a");
                    fwrite($logfile, $message."\n");
                }
            }

if (defined('TYPO3_MODE') && $TYPO3_CONF_VARS[TYPO3_MODE]['XCLASS']['ext/rz_csseditor/mod1/index.php'])    {
    include_once($TYPO3_CONF_VARS[TYPO3_MODE]['XCLASS']['ext/rz_csseditor/mod1/index.php']);
}

// Make instance:
$SOBE = t3lib_div::makeInstance('tx_rzcsseditor_module1');
$SOBE->init();

// Include files?
foreach($SOBE->include_once as $INC_FILE)    include_once($INC_FILE);

$SOBE->main();
$SOBE->printContent();

vorlage.css mit Markern

 Allgemein /

/***CSS_BODY***/
body {
	background-color: #FFFFFF;
}

/***CSS_H1***/
h1 {
	background-color:#DEE9EF;
}

/***CSS_H2***/
h2 {
	color:#005577;
}

/***CSS_LINK***/
a:link {
	color:#005577;
}
a:visited {
	color:#005577; 
}


/ Statische Navigationsleiste oben /

/***CSS_NAVTOP***/
#navtop {
	background-color: #85a9ba;
}

/ Hauptnavigationsleiste oben /

/***CSS_NAVMAIN***/
#navmain {
	background-color:#DDDDDD;
}


/ Navigationleiste links /

/***CSS_LEFTNAV***/
#leftnav {
	background-color: #dee9ef;
}
ul.leftnav {
	background-color: #dee9ef;
}
ul.leftnav2 {
	background-color: #dee9ef;
}
#leftnav li.notselected a{
	background-color:#dee9ef;
}

/ Inhalt der Seite /

/***CSS_CONTENT***/
#content {
	background-color: #FFFFFF;
}

Imagelightbox und andere JavaScripts

nospam@example.com (Matthias Häger) — Mon, 13 Oct 2008 10:20:59 +0200

Imagelightbox ist ein schöner JavaScript Effekt um ein Bild nicht einfach nur zu vergrößern, sondern formvollendet in einer smoothen Animation über die aktuelle Webseite zu legen und aufzuziehen. Ein Beispiel dafür sieht man in unserem CMS auf folgender Seite. Für Typo3 gibt es dazu eine schöne Extension. Am Freitag sprach mit ein Kunde an, dass die Lightbox auf einmal nicht mehr funktioniert und nur noch einen leeren weißen Rahmen anzeigte. Dem war auch so.

Fehleranalyse, Herumsuchen, Googlen - was war die Lösung? In der Zwischenzeit hatte ich T3Mootools ebenfalls als Extension installiert um noch weitere Effekte anbieten zu können. Die von den Extensions verwendeten verschiedenen JS-Frameworks kamen sich untereinander ins Gehege.

Hilfe fand ich dafür im mediaVROG Blog, der Autor stand vor einem ähnlichen Problem..

"Ich habe mich vor einiger Zeit mal mit dem Typo3 Plugin kj_imagelightbox 2 befasst und es in einem Projekt eingesetzt. Da ich aber anstatt der Kombination aus Prototype/Scriptaculous/Lightbox lieber eine mootools/slimbox einsetzen wollte, habe ich das Plugin entsprechend umgeschrieben, so dass es möglich wird, mootools zu verwenden."

..und hat dankenswerter Weise die Modifikationen bereits vorgenommen und stellt seine geänderte Extension auch zum Download zur Verfügung. Vielen Dank, damit funktioniert wieder alles.

Diverse URLs - und Typo3 reagiert so kritisch

nospam@example.com (Matthias Häger) — Thu, 25 Sep 2008 10:36:36 +0200

Ich hasse die nervigen URL-Effekte von Typo3. Wenn man wie bei uns mit mehreren Domains auf einen Typo3-Server verweist, dann reagiert Typo3 sehr kritisch auf die verwendete. Logge ich mich z.B. über die allgemeine URL in das Backend ein, dann kann ich keine Preview von verborgenen Seiten ansehen, die im Frontend über eine andere Domain angesprochen werden. Das ist schrecklicher Zeitverlust, wenn man erst ewig sucht und flucht, warum Änderungen nicht angenommen werden, es auf das Caching schiebt und dann war es eine simple URL-Sache.

Für mich hier an der Uni heißt das, dass ich mich bei jedem Kunden über seine Subdomain ins Backend einloggen muss, wenn ich z.B. die Preview nehmen muss. Über die zentrale Domain geht das nicht. Nervig - oder weiß jemand ne Lösung?

Typo3 ajaxbasierte Suchengine - neue Extension

nospam@example.com (Matthias Häger) — Wed, 17 Sep 2008 09:14:35 +0200

Gestern habe ich für meinen Arbeitgeber eine größere Extension fertiggestellt. Die Ausgangslage war bisher so bei uns, dass es für Typo3 selber die IndexedSearch und für das Newsmodul tt_news die dort eingebaute Suchfunktion gab. Zusätzlich kommt in unserem Szenario noch hinzu, dass wir die Knowledge Base von Interspire einsetzen. Diese bringt natürlich auch eine Suchfunktion mit, so dass wir den Benutzer mit drei verschiedene Suchmasken quälten. Ziel war nun, diese unter einen Hut zu bringen.

Es besteht zwar auch die Möglichkeit mit der IndexedSearch auch die Newsmeldungen zu durchsuchen, aber ich wollte die Ergebnisse gerne nach den unterschiedlichen Kategorien sortiert haben. Die Extension habe ich mit dem Kickstarter erstellt. Zuerst habe ich den grafischen Rahmen der Seite gebaut. Die Seite enthält ein Suchfeld, einen kurzen Hinweis und danach den Ergebnisbereich, der zunächst versteckt wird. Oben sind drei grafische Kategorienreiter, die als Buttons fungieren mit denen der Benutzer hin- und herschalten kann, darunter wird das jewelige Suchergebnis angezeigt.

Die Suche selber ist mit Xajax - einem Ajax Framework - realisiert. Es werden nacheinander eine versteckte Seite der IndexedSearch, die tt_news-Suchseite und die Suchseite der Knowledge Base aufgerufen. Die Resultate sind komplette HTML-Seiten über die ein kurzer selbstgeschriebener Parser läuft, der die relevanten Bereiche extrahiert und in die vorbereitet <div>-Box schreibt. Neben den Ergebnissen wird auch noch die Anzahl der Treffer gefiltert und in den Kategoriereitern angezeigt.

Über die Kategoriereiter kann der Benutzer jetzt zwischen den Ergebnislisten hin- und herschalten. Als Pferdefuß stellte sich dabei die Anzeige der Trefferanzahl heraus, die jetzt bei jedem Wechsel der Kategorie eingelesen, zwischengespeichert und wieder ausgegeben werden muss.

Live in Action ist diese Suchengine auf unseren Seiten.

Bisher ist noch sehr viel der Extension hart codiert im Quellcode, die Extension ist noch nicht so modular und erweiterbar aufgebaut, wie sie evtl. sein könnte. Deshalb habe ich sie auch nicht ins TER hochgeladen. Durch das Einfügen weiterer Parser lässt sich die Suchengine natürlich auf weitere Suchmaschinen erweitern.

In der erweiterten Fassung dieses Eintrages habe ich den kompletten Quellcode angehängt.....
<?php
/***************************************************************
* Copyright notice
*
* (c) 2008 Matthias Häger <matthias.haeger@uni-konstanz.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!
***************************************************************/

require_once(PATH_tslib . 'class.tslib_pibase.php');

/**
Plugin 'RZ Ajax Search' for the 'rzajaxsearch' extension.
*
@author   Matthias Häger <matthias.haeger@uni-konstanz.de>
@package   TYPO3
@subpackage   tx_rzajaxsearch
*/
class tx_rzajaxsearch_pi1 extends tslib_pibase {
   var $prefixId      = 'tx_rzajaxsearch_pi1';       // Same as class name
   var $scriptRelPath = 'pi1/class.tx_rzajaxsearch_pi1.php';   // Path to this script relative to the extension dir.
   var $extKey        = 'rzajaxsearch';   // The extension key.
   var $conf;

   /**
   The main method of the PlugIn. Zuerst werden grundlegende Variablen definiert, die für den weiteren Programmverlauf wichtig sind.
   Anschließend wird Xajax instanziiert und die Rückgabe-Methoden werden registriert. Danach wird das Formular generiert, in das der
   Suchbegriff eingegeben werden kann. Zum Schluß wird die Ergebnis-Box gerendert, aber vorerst nicht angezeigt.

   @param   string       $content: The PlugIn content
   @param   array       $conf: The PlugIn configuration
   @return   The content that is displayed on the website
   /
   function main($content,$conf)   {
       $this->conf=$conf;
       $this->pi_loadLL();
       $this->pi_initPIflexForm();
       $this->pi_USER_INT_obj = 1;
       $GLOBALS["TSFE"]->no_cache=1;

       /**
       Definition zentral verfügbarer Variablen für aktive und inaktive Rubrikreiter. Vorab Definition des JS-Ausdruck um den Wert
       der Menge der gefundenen Treffer aus der HTML-Seite zu lesen.
       /
       $this->readHeader1 = "document.getElementById('header1').firstChild.nodeValue";
       $this->readHeader2 = "document.getElementById('header2').firstChild.nodeValue";
       $this->readHeader3 = "document.getElementById('header3').firstChild.nodeValue";
       $this->active1 = '<a class="rActive" href="#" onclick="'.$this->prefixId.'showBox(1, '.$this->readHeader1.', '.$this->readHeader2.', '.$this->readHeader3.'); return false">Webseite <span id="header1"></span></a>';
       $this->active2 = '<a class="rActive" href="#" onclick="'.$this->prefixId.'showBox(2, '.$this->readHeader1.', '.$this->readHeader2.', '.$this->readHeader3.'); return false">Knowledge Base <span id="header2"></span></a>';
       $this->active3 = '<a class="rActive" href="#" onclick="'.$this->prefixId.'showBox(3, '.$this->readHeader1.', '.$this->readHeader2.', '.$this->readHeader3.'); return false">Newsmeldungen <span id="header3"></span></a>';
       $this->inactive1 = '<a class="rInactive" href="#" onclick="'.$this->prefixId.'showBox(1, '.$this->readHeader1.', '.$this->readHeader2.', '.$this->readHeader3.'); return false">Webseite <span id="header1"></span></a>';
       $this->inactive2 = '<a class="rInactive" href="#" onclick="'.$this->prefixId.'showBox(2, '.$this->readHeader1.', '.$this->readHeader2.', '.$this->readHeader3.'); return false">Knowledge Base <span id="header2"></span></a>';
       $this->inactive3 = '<a class="rInactive" href="#" onclick="'.$this->prefixId.'showBox(3, '.$this->readHeader1.', '.$this->readHeader2.', '.$this->readHeader3.'); return false">Newsmeldungen <span id="header3"></span></a>';

       //Xajax-Objekt instanziieren und Methoden registrieren
       require_once(t3lib_extMgm::extPath('xajax') . 'class.tx_xajax.php');
       $this->xajax = t3lib_div::makeInstance('tx_xajax');
       $this->xajax->decodeUTF8InputOn();
       $this->xajax->setCharEncoding('utf-8');
       #$this->xajax->debugOn();
       $this->xajax->setWrapperPrefix($this->prefixId);
       $this->xajax->registerFunction(array('getEngine', &$this, 'getEngine'));
       $this->xajax->registerFunction(array('showBox', &$this, 'showBox'));
       $this->xajax->processRequests();
       $GLOBALS['TSFE']->additionalHeaderData[$this->prefixId] = $this->xajax->getJavascript(t3lib_extMgm::siteRelPath('xajax'));

       //Formular für die Eingabe des Suchbegriffes
       $content ="";
       //Übernahme der Suchbegriffe, wenn jemand die Suchbox auf der Startseite benutzt. Wenn dort ein Begriff eingegeben wurde, dann wird
       //direkt die Ergebnisseite aufgerufen
       $post_phrase = t3lib_div::_POST();
       $post_phrase = $post_phrase[tx_indexedsearch];
       $post_phrase = $post_phrase[sword];
       $content='
           <form method="post" action="" onSubmit="'.$this->prefixId.'getEngine(document.getElementById(\'phrase\').value); return false;">
               <input type="text" id="phrase" name="'.$this->prefixId.'[input_field]" size="50" value="'.htmlspecialchars($this->piVars['input_field']).'" />
               <input type="submit" name="'.$this->prefixId.'[submit_button]" value="'.htmlspecialchars($this->pi_getLL('submit_button_label')).'" />
       </form>';
       if(isset($post_phrase)) {
           $content .= '<script language="javascript">'.$this->prefixId.'getEngine(\''.$post_phrase.'\');</script>';
           $content .= "<div id=\"hilfe\">Suche läuft.....</div>";
       } else {
           $content.='<br /><div id="hilfe">Durchsuchen Sie unsere Webseite, unsere Knowledge Base und die aktuellen Newsmeldungen. Nach Eingabe des Suchbegriffes erhalten Sie die Ergebnisse nach Kategorie geordnet. Klicken Sie auf die jeweilige Kategorie um zu den einzelnen Ergebnislisten zu gelangen.</div>
           ';
       }
       //Ergebnis-Box rendern, wird vorerst nicht angezeigt.
       $content .= $this->renderBox();

       return $this->pi_wrapInBaseClass($content);
   }

   /**
   Methode stellt die Ergebnis-Box dar. Die nötigen <div>-Bereiche werden angelegt, der Ergebnis-Bereich ist aber grundsätzlich ausgeblendet.

   @return   <div>-Box für die Resultate, die auf der Webseite angezeigt wird
   /
   function renderBox() {

       $output = "";
       $output .= ' <div id=\'resultWrapper\'>
               <span class="description">Wählen Sie die gewünschte Kategorie der Ergebnisse.</span>
               <div id=\'resultMenu\'>
                   <ul>
                       <li id="resultLink1">'.$this->inactive1.'</li>
                       <li id="resultLink2">'.$this->inactive2.'</li>
                       <li id="resultLink3">'.$this->inactive3.'</li>
                   </ul>
                   <div style="clear:both"></div>
               </div>
               <div id=\'result1\'></div>
               <div id=\'result2\'></div>
               <div id=\'result3\'></div>
           </div>';
       return $output;

   }

   /**
   Diese Methode dient zur Umschaltung zwischen den unterschiedlichen Ergebnislisten. Je nach angegebenr Engine werden die zugehörigen <div>-Boxen
   ein- bzw. ausgeblendet. Anschließend werden die Trefferzahlen neu eingefügt.

   @param   integer   Nummer der Suchengine, die angezeigt werden soll
   @param   string   Anzahl der Treffer von Engine 1, bereits umklammert als String dargestellt
   @param   string   Anzahl der Treffer von Engine 2, bereits umklammert als String dargestellt
   @param   string   Anzahl der Treffer von Engine 3, bereits umklammert als String dargestellt
   @return   XajaxResponseObject
   /
   function showBox($engine, $header1, $header2, $header3) {
       $this->piVars = $data[$this->prefixId];
       $objResponse = new tx_xajax_response();
       /**
       Engine 1: Webseite
       Engine 2: Knowledge Base
       Engine 3: Newsmeldungen
       */
       switch($engine) {
           case 1:
           $objResponse->addAssign("resultLink1", 'innerHTML', $this->active1);
           $objResponse->addAssign("resultLink2", 'innerHTML', $this->inactive2);
           $objResponse->addAssign("resultLink3", 'innerHTML', $this->inactive3);
           $objResponse->addAssign("result1", 'style.display', 'block');
           $objResponse->addAssign("result2", 'style.display', 'none');
           $objResponse->addAssign("result3", 'style.display', 'none');
           break;
           case 2:
           $objResponse->addAssign("resultLink2", 'innerHTML', $this->active2);
           $objResponse->addAssign("resultLink1", 'innerHTML', $this->inactive1);
           $objResponse->addAssign("resultLink3", 'innerHTML', $this->inactive3);
           $objResponse->addAssign("result2", 'style.display', 'block');
           $objResponse->addAssign("result1", 'style.display', 'none');
           $objResponse->addAssign("result3", 'style.display', 'none');
           break;
           case 3:
           $objResponse->addAssign("resultLink3", 'innerHTML', $this->active3);
           $objResponse->addAssign("resultLink2", 'innerHTML', $this->inactive2);
           $objResponse->addAssign("resultLink1", 'innerHTML', $this->inactive1);
           $objResponse->addAssign("result3", 'style.display', 'block');
           $objResponse->addAssign("result2", 'style.display', 'none');
           $objResponse->addAssign("result1", 'style.display', 'none');
           break;
       }

       //Trefferanzahlen neu schreiben
       $objResponse->addAssign('header1', 'innerHTML', $header1);
       $objResponse->addAssign('header2', 'innerHTML', $header2);
       $objResponse->addAssign('header3', 'innerHTML', $header3);
       return $objResponse->getXML();
   }

   /**
   Diese Funktion ist die Hauptantwortfunktion. In Ihr werden nacheinander die drei Suchmaschinen aufgerufen und geparset und dann
   damit die jeweiligen Result-Blöcke gefüllt.

   @param    String   Suchbegriff
   @return   XajaxResponseObject

   /
   function getEngine($phrase) {
       //Suchbegriff wird korrekt formatiert
       $phrase = urlencode($phrase);

       //Die drei Suchmaschinen werden nacheinander aufgerufen, der Rückgabewert ist jeweils ein Array, dass an der Stelle 0 die Ergebnisse
       //und an Stelle 1 die Anzahl der Treffer enthält.
       $output1 = $this->parseSearch($phrase);
       $output2 = $this->parseKB($phrase);
       $output3 = $this->parseNews($phrase);

       //Neues Antwortobjekt wird instanziiert
       $objResponse = new tx_xajax_response();

       $objResponse->addAssign('hilfe', 'style.display', 'none');

       //Ergebnisse 1 (Webseite) -> aktiv gesetzt
       $objResponse->addAssign('result1', 'innerHTML', $output1[0]);
       $objResponse->addAssign('result1', 'style.display', 'block');
       $objResponse->addAssign("resultLink1", 'innerHTML', $this->active1);
       $objResponse->addAssign('header1', 'innerHTML', $output1[1]);

       //Ergebnisse 2 (Knowledge Base)
       $objResponse->addAssign('result2', 'innerHTML', $output2[0]);
       $objResponse->addAssign('result2', 'style.display', 'none');
       $objResponse->addAssign('header2', 'innerHTML', $output2[1]);

       //Ergebnisse 3 (Newsmeldungen)
       $objResponse->addAssign('result3', 'innerHTML', $output3[0]);
       $objResponse->addAssign('result3', 'style.display', 'none');
       $objResponse->addAssign('header3', 'innerHTML', $output3[1]);

       //Der Gesamtblock mit den Ergebnissen wird sichtbar geschaltet und die Antwort wird zurückgegeben.
       $objResponse->addAssign('resultWrapper', 'style.display', 'block');
       return $objResponse->getXML();
   }

   /**
   Diese Funktion parst die Seite mit den Suchergebnissen der Typo3 Indexed Search und gibt Sie in einer Variable zurück. Dazu wird noch
   die Anzahl der Treffer extrahiert und mit Klammern umschlossen als String zurückgegeben. Die Ergebnisseite wird in ein Array geladen
   und dann zeilenweise ausgewertet. Über die Kennzeichnung der <div>-Boxen lässt sich bestimmen, wo der relevante Teil der Ergebnisseite
   beginnt und aufhört. Diese Zeilen werden dann in die Rückgabe-Variable geschrieben.

   @param   String   Suchbegriff
   @return   Array   Suchergebnisse und Anzahl der Suchtreffer
   */
   function parseSearch($phrase) {
       $return;
       $max;
       $parse = false;
       $res = file("http://www.rz.uni-konstanz.de/rechenzentrum/indexsuche/?tx_indexedsearch[sword]=$phrase");
       for($i=0; $i<count($res); $i++)   {
           if($parse == false && (strstr(utf8_encode($res[$i]),"tx-indexedsearch-whatis") != false)) {
               $parse = true;
           }
           if($parse == true && (strstr(utf8_encode($res[$i]),"tx-indexedsearch-browsebox\"></div>") != false)) {
               $return .= utf8_encode($res[$i]);
               $parse = false;
           }
           if($parse==true) {
               $return .=($res[$i]);
           }
           if(strstr(utf8_encode($res[$i]), "insgesamt <strong>") != false) {
               $max = strtok(substr(strstr(utf8_encode($res[$i]), "insgesamt <strong>"),18),"<");
           }
       }
       return array($return, "(".$max.")");
   }

   /**
   Diese Funktion parst die Seite mit den Suchergebnissen der Knowledge Base und gibt Sie in einer Variable zurück. Dazu wird noch
   die Anzahl der Treffer extrahiert und mit Klammern umschlossen als String zurückgegeben. Die Ergebnisseite wird in ein Array geladen
   und dann zeilenweise ausgewertet. Über Kommentare im Quellcode Seite lässt sich bestimmen, wo der relevante Teil der Ergebnisseite
   beginnt und aufhört. Diese Zeilen werden dann in die Rückgabe-Variable geschrieben.

   @param   String   Suchbegriff
   @return   Array   Suchergebnisse und Anzahl der Suchtreffer
   */
   function parseKB($phrase) {
       $return;
       $max;
       $parse = false;
       $res = file("http://www.rz.uni-konstanz.de/activekb/search/$phrase");
       for($i=0; $i<count($res); $i++)   {
           if($parse == false && (strstr(utf8_encode($res[$i]),"") != false)) {
               $parse = true;
           }
           if($parse == true && (strstr(utf8_encode($res[$i]),"") != false)) {
               $return .= utf8_encode($res[$i]);
               $parse = false;
           }
           if($parse==true) {
               $return .=($res[$i]);
           }
           if(strstr(utf8_encode($res[$i]), "Es wurde") != false) {
               $max = trim(strtok(substr(strstr(utf8_encode($res[$i]), "Es wurde"),9),"A"));
               if($max == "keine") $max = 0;
           }
       }
       return array($return, "(".$max.")");
   }

   /**
   Diese Funktion parst die Seite mit den Suchergebnissen der tt_news-Suche und gibt Sie in einer Variable zurück. Dazu wird noch
   die Anzahl der Treffer extrahiert und mit Klammern umschlossen als String zurückgegeben. Die Ergebnisseite wird in ein Array geladen
   und dann zeilenweise ausgewertet. Über die Kennzeichnung der <div>-Boxen lässt sich bestimmen, wo der relevante Teil der Ergebnisseite
   beginnt und aufhört. Diese Zeilen werden dann in die Rückgabe-Variable geschrieben.

   @param   String   Suchbegriff
   * @return   Array   Suchergebnisse und Anzahl der Suchtreffer
   */
   function parseNews($phrase) {
       $return;
       $max = 0;
       $parse = false;
       $res = file("http://www.rz.uni-konstanz.de/rechenzentrum/aktuelles/suche/?tx_ttnews[swords]=$phrase");
       for($i=0; $i<count($res); $i++)   {
           if($parse == false && (strstr(utf8_encode($res[$i]),"news-list-container") != false)) {
               $parse = true;
           }
           if($parse == true && (strstr(utf8_encode($res[$i]),"news-list-browse") != false)) {
               $return .= "</div>";
               $parse = false;
           }
           if($parse==true) {
               $return .=($res[$i]);
           }
           if(strstr(utf8_encode($res[$i]), "news-list-item") != false) {
               $max++;
           }
       }
       return array($return, "(".$max.")");
   }
}

if (defined('TYPO3_MODE') && $TYPO3_CONF_VARS[TYPO3_MODE]['XCLASS']['ext/rzajaxsearch/pi1/class.tx_rzajaxsearch_pi1.php'])   {
   include_once($TYPO3_CONF_VARS[TYPO3_MODE]['XCLASS']['ext/rzajaxsearch/pi1/class.tx_rzajaxsearch_pi1.php']);
}

?>

Die neue Wild Wings Homepage ist fertig!

nospam@example.com (Matthias Häger) — Fri, 12 Sep 2008 12:36:38 +0200

...sofern man bei einer Homepage von "fertig" sprechen kann. Eigentlich handelt es sich um einen stetigen Prozeß.

Wie bereits erwähnt, betreue ich gemeinsam mit einem Kollegen die Homepage der Schwenninger Wild Wings, eines Profi-Eishockeyclubs aus der 2. Bundesliga (ich werde heute im Laufe des Tages noch mehr die Wild Wings bloggen, schließlich ist heute Saisonauftakt. Nach drei oder vier Jahren stand in diesem Sommer der lang geplante Relaunch der Homepage an und was lag näher die beruflichen Erfahrungen mit Typo3 auf das Ehrenamt zu übertragen und somit sein Wissen in einem weiteren, anders gelagerten Projekt zu vertiefen.

Die Webseite nutzt Typo3 4.2.1 und TemplaVoila zur grundsätzlichen Gestaltung. Als Standard-Extensions kommen u.a. Powermail, CoolURI, rggooglemap, tt_news, kj_imagelightbox und xajax zum Einsatz. Daneben wurden aber auch noch einige eigene Extensions selber programmiert um Spielplan, Tabelle, Mannschaftsstatistik, Sponsoren und gegnerische Mannschaften nach eigenen Wünschen darzustellen. Dabei wurde möglichst viel Code der vorherigen Webseite, einer PHP-Eigenentwicklung, weiterverwendet.

Eine besondere Aufgabe bei der Implementation war das wieder mal zu rasch heraneilende Veröffentlichungsdatum. So waren wir gezwungen das alte Backend vorerst beizubehalten und mit Typo3 zu verknüpfen. Das alte Backend war ebenfalls eine Eigenentwicklung und ermöglichte verschiedenen Personen Newsmeldungen, Spielergebnisse und Spielbereichte einzustellen. Derzeit nutzen wir also eigene MySQL-Tabellen außerhalb von Typo3 für die Speicherung der Daten und lesen diese in unseren eigenen Typo3-Extensions aus. Dies funktioniert problemlos.

Nach und nach werden wir dann in den nächsten Wochen und Monate zusätzliche Inhalte einpflegen und auch die Backend- und Administrationsinterfaces Stück für Stück komplett auf Typo3 zu migrieren. Insgesamt zeigt sich aber jetzt schon, dass der Verwaltungsaufwand durch Typo3 im Vergleich zur eigenen vorherigen Lösung wesentlich geringer ist, ohne, dass man Abstriche bei der Funktionalität machen muss. Typo3 ließ die Umsetzung aller bisherigen Funktionen und aller Wünsche zu.

Zur Homepage!