Sehr witzig, heute habe ich beim Surfen auf http://www.studenten-wg.de entdeckt, wie plötzlich ein schönes “bla” mitten auf der Seite erschien. Da scheinen wohl einige Webentwickler nicht lokal testen zu wollen 
. Hier der Beweis:
Am Samstag haben wir unseren ersten studentischen Techtalk veranstaltet. Die Veranstaltung in meinen Augen auf jeden Fall ein Erfolg, ich denke jeder von uns konnte an dem Tag einiges lernen und freut sich nun auf das nächste Mal . Die Teilnehmerzahl kann ruhig noch etwas wachsen, aber das wird sicherlich schon fast ganz alleine kommen, wenn wir mit der Organisation früher anfangen und der Termin dann eher feststeht.
Mit etwas mehr Vorlauf ist es dann auch sogar noch mehr Teilnehmern möglich eigene Präsentationen zu zeigen, die ja doch etwas mehr Vorarbeit benötigen als ich dachte. Ich wollte eigentlich das Session Hijacking vorführen, aus Zeitgründen hat es dann aber doch nur für eine XSS-Lücke gereicht .
Vor einigen Wochen war ich auf der Suche nach einem leistungsfähigem PHP-Framework für eine Webanwendung. Meine Wahl fiel Mitte September auf CakePHP, einem modernen Anwendungs-Framework, welches die Entwicklung von robusten interaktiven Internetseiten beschleunigen soll.
Die Entscheidung war schnell getroffen, denn die schicke Internetseite von CakePHP überzeugt sehr schnell, besonders die Screencasts machen Lust auf mehr und geben einen guten Einblick in die Model-View-Controller-Funktionsweise.
Voller Eifer beginnt man also mit der Entwicklung und freut sich darauf, so nette Features wie die dynamischen Funktionen der Daten-Modelle zu nutzen: Der Aufruf $User->findByName('Thorsten'); beispielsweise funktioniert, da es in der Datenbank eine Spalte ‘Name’ in der ‘User’-Tabelle gibt. CakePHP erkennt dies automatisch und erzeugt eine korrekte SQL-Abfrage für den Methodenaufruf … und das obwohl diese Funktion zur Kompilierzeit noch nicht einmal existiert. Ich werde jetzt nicht genauer darauf eingehen, wie diese “Magic” funktioniert, aber auf jeden Fall ist es cool
Heute folgt das große Finale (Teil 1, Teil 2) … uns fehlt bisher nur noch der JavaScript-Code, der das Formular abschickt und die GET-Parameter generiert. Wir nutzen nicht den normalen “submit”-Button, denn dann würde für jedes Feld eine eigene GET-Variable abgesendet werden, stattdessen generieren wir mit JavaScript eine einzige, die dann von Typo3 interpretiert wird.
Am besten legen wir eine separate Datei namens news_filter.js an, die wir dann wie folgt im HMTL-Kopf einfügen können (diese Zeile muss im “Header-Teile”-Bereich bei TemplaVoila aktiviert werden, wenn man das Formular mittels eines Flexiblem Content Element umsetzt):
Der Code der JavaScript-Methode:
function filter_news()
{
var categories = '';
var subject = document.getElementById('thema');
// nun weitere Felder auslesen, z.B. Medientyp
var mediaType = document.getElementById('medienTyp');
var author = document.getElementById('author');
categories = subject + ',' + mediaType + ',' + author;
// neue URL mit Variable 'categories' zusammen setzen
window.location = document.getElementById('filter-formular').action +
'?no_cache=1&categories=' + categories;
}
Die Variable ‘categories’ wird zusammen gesetzt aus den Selektionsfeldern mit den Id’s ‘thema’, ‘medienTyp’ und ‘author’. Das Abschicken geschieht durch das Verändern der eigenen URL (window.location). Wichtig ist an der Stelle, dass das action-Attribut des Formulars eine gültige URL in der Form ‘http://www.domain.org/’ enthält.
Damit ist das Tutorial komplett und der Filter funktionsfähig, wenn du alles richtig zusammen gebaut hast Es gibt natürlich noch viel Platz zum Verbessern. Beispielsweise wäre es eleganter die JavaScript-Methode durch eine php-Funktion auf der Server-Seite auszutauschen, um dort die übergebenden Variablen auszuwerten.
Heute gehts endlich weiter mit meinem kleinem Typo3-Tutorial (Teil 1). In zweiten Teil wollen wir nun den HTML-Codes des Formulars per Typoscript erzeugen.
News-Kategorien auslesen
Die News-Kategorien können mit dem folgenden TypoScript-Schnipsel ausgelesen werden. Das HTML-Grundgerüst drumherum kann mit TEXT oder HTML-Objekten erzeugt werden.
get_categories = CONTENT
get_categories {
table = tt_news_cat
select {
pidInList = 123
where = parent_category = 0
orderBy = title
}
renderObj = COA
renderObj {
10 = TEXT
10.field = uid
10.dataWrap =
}
}
pidInList muss auf den Sysfolder zeigen, der alle Kategorien beinhaltet.
where=parent_category=0 gibt an, welche Unterkategorien angezeigt werden sollen; in diesem Fall würden die Oberkategorien ausgegeben werden
HTML-Code generieren
Die einzelnen Ausklappboxen werden nun mit Hilfe von <select name=”source” size=”1″><option … erzeugt. Die option-Tags werden durch das TypoScript von oben generiert. Wenn man TemplaVolia nutzt, muss man ein FCE erzeugen und dann das Typoscript auf die entsprechenden HTML-Tags mappen.
lib.news_filter = COA
lib.news_filter {
10 = TEXT
10.value =
Hey, danke für die coole Anleitung!
Hab aber mal ne frage/problem!
Bekomme das alles hin mit den Auswahlboxen( hab nur eine da ich keine unterKategorien benutze!) jetzt möchte ich aber eine 2te box bauen mit der ich auch die jahreszahl auswählen kann!
dafür bräuchte ich aber irgendwie zugriff auf die jahre in denen es bereits News gibt…hab aber irgendwie keinen blassen schimmer wie ich das bewerkstelligen soll!?! eine alternative wäre natürlich zB zu sagen von 2003-heute aber selbst das ist mir noch zu hoch (typoscript ist noch nicht so mein ding)!
Also wäre cool wenn einer eine Idee hätte wie man das hinbekommt?!?
Gruß Hondo
Heute beginne ich eine kleine Artikelreihe, in der ich zeigen will, wie man einen Suchfilter für tt_news bauen kann. Solch ein Formular ist speziell für große Seiten interessant, die ihre Nachrichten in hierarchischen Kategorien ablegen. Ziel ist das Entwickeln eines Filters, der ungefähr so aussehen wird:
tt_news Kategorie-Filter
In Typo3 haben wir die drei Oberkategorien “Thema”, “Medientyp” und “Autor”. Alle Unterkategorien sollen jeweils einzeln in einer Liste oder Ausklappbox dargestellt werden. Dies ist mit der bereits vorhandenen CATMENU-Ansicht nicht zu realisieren.
Anzeige der gefilterten Nachrichten
Ja, richtig gelesen, wir fangen quasi von hinten an … das Formular werden wir erst in den folgenden Artikeln zusammenbauen. Heute geht es zunächst darum wie wir das Ergebnis des Filters anzeigen können.
Das Ergebnis wird eine GET-Variable (erzeugt vom Formular), welche die Kategorie-UID’s enthält, also so etwas wie “?categories=45,12,90“. Wir wollen uns möglichst viel Arbeit ersparen, daher nutzen wir zur Anzeige einfach das normale News-Plugin mit der LIST-Ansicht. Da wir die Kategorien kombinieren wollen, wählen wir als Kategoriemodus “Zeige alle Beiträge aus ausgewählten Kategorien (UND)”.
Normalerweise werden die anzuzeigenden Kategorien im Plugin fest eingestellt. Alternativ gibt es auch die Möglichkeit diese per Typoscript festzulegen und da man von Typoscript aus auf GET-Variablen zugreifen kann, ist unsere Lösung schon mit einer einzigen Zeile abgetan:
hondo is discussing. plugin.tt_news.categorySelection.data = GPvar : categories
Dank der data-Eigenschaft können wir die Kategorie-Selektion aus der GET-Variable “categories” auslesen. Der Aufruf der Suchergebnisse würde nun also z.B. so aussehen: http://www.yourdomain.de/index.php?id=1000&categories=45,12,90
Wer das ganze jetzt mehrmals hintereinander testet, wird feststellen, dass sich die Seite nach dem ersten Aufruf nicht mehr verändert. Dem Cache sei dank! So nützlich er auch ist, so stört er doch an dieser Stelle. Daher müssen wir noch eine weitere GET-Variable an die URL anhängen, die Typo3 signalisiert, dass nicht gecached werden soll: http://www.yourdomain.de/index.php?id=1000&categories=45,12,90&no_cache=1
Und fertig ist die Anzeige der Ergebnisse … demnächst gehts weiter
Man muss nicht unbedingt den Cache ausschalten, sonst ist die generierung der Seiten recht belastend für den Server un langsam.
Besser man benutzt typolink zum Erzeugen der links und setzt useCacheHash = 1. Dann werden auch die Kategory Seiten gecacht.
Möchte man diese nicht tun sollte man zumindest das Plugin von tt_news als UserInt einbinden, damit nicht die ganze Seite neu erzeugt werden muss.
Axotos 12:06 on 11.11.2010 Permalink
WOW! Tolles Tutorial!
aber danach wirds holprig:
Genau das wonach ich gesucht habe! – Leider verstehe ich es nicht…
Also das News-Plugin mit der LIST-Ansicht einzufügen habe ich nosch geschafft
- Ich vermute mal, dass wenn man “?categories=45,12,90″ hinter seine URL einfügt, dass dann die Kategorie(n?) angezeigt werden sollten. Ich habe aber realUrl installiert funktioniert das damit nicht?
- Muss der 2. Teil ins ganz normale TS eingetragen werden oder unter plugin.ttnews {…}?
- Der Code in Teil 3 muss dann in die news_filter.js?
Über eine Antwort würde ich mich sehr freuen!