Templaterie Blog

Ich programmiere noch für den kleinen Hausgebrauch und was da so zusammenkommt, das kann man teilweise hier zum gefälligen Gebrauch oder Nichtbeachtung wiederfinden. ES dient auch mir als Erinnerungstütze.

z.B. sollte ich nicht vergessen die Methode <form action="?" method="post"> anzugeben. Wenn ich auf $_SERVER[php_self] von wegen dem XSS-Exploit das heutzutage nicht mehr bei allen Servern geht und damit ist $_SERVER[php_self] nicht mehr generell böse … wie auch immer geht eben auch ohne.

1. <?php $m = isset($_POST[m]) ? intval($_POST[m]) : 1 ; ?>
2. <form action="?" method="post">
3. <input type="text"
4. value="<?php echo $m; ?>" name="m" id="m"
5. style="width: 4em;"
6. onfocus="this.value=''"
7. onChange="this.value= isNaN(this.value)? 1 : parseInt(parseFloat(this.value))"
8. onBlur="this.value= isNaN(this.value)? 1 : parseInt(parseFloat(this.value))"/>
9. <input type="submit" value="go" class="button" />
10. </form>

Es wird per Javascript schon dafür gesorgt, dass in das Formularfeld nur Ganzzahlen dürfen, nur Javascript kann leicht abgeschaltet werden oder im Browser überabeitet werden, ergo wird die Eingabe selbstredend auch in PHP noch einmal überprüft und überarbeitet bzw mit dem Defaultwert ersetzt. OK im PHP war ich noch etwas Faul. Schließlich müsste ich auch dort prüfen mit PHP is_float() prüfen statt mit PHP isset() seltsamer Weise aber scheint hier das Ergebnis immer false zu sein und der Default wird gewählt.

Dass die Werte in Javascript neben parseInt (= runde auf Ganzzahl ab) zunächst noch mit parseFloat (= behandle Wert als Zahl) bearbeitet wird liegt daran, dass bei der Suche nach der Javascript-Syntax für PHP intval() und Co mir die folgenden beiden Links begegneten:

1. javascript parseInt is broken
2. JavaScript parseInt() bug

(more…)

Filed under: Programmierung
No Comments

Yessss! Endlich habe ich eine Seite gefunden mit einem guten Cheatsheet für regular Expression. Hier zwei Links die einem wirklich weiterhelfen mit diesen Ungetümen, wobei der erste Link mir einen Tick mehr zusagt als der Zweite:

1. php-regex: Regular Expressions Tutorial
2. weblogtoolscollection: Regular Expressions Tutorial
    

Hier ist noch ein nützlicher Link: Powerfull onliner – PHP leere Zeilen entfernen (RegEX in der Praxis)

Filed under: 1001 Linktipp, Programmierung
No Comments

Manchmal will man auf der Seite aufräumen, z.B. wenn man per iFrame sich bereits sehr komplexe zwei Seiten gegenüberstellt, wie google-Transation und ein Formular das in diversen Sprachen ausgefüllt werden soll. In meinem Fall waren das dann 22 iFrames jeweils 11 Mal gegenübergestellt. Also habe ich nach Tab-Navigation im Netz gesucht. Rausgekommen ist:

• 25+ Useful Javascript Tab Navigation Scripts
• Yettii Yet (E)Another JavaScript Tab Interface Implementation.

Nachdem unter den Treffern schon 25 Treffer über eine Tabnavigation-Sammlung in einem Blog ist und unter den Suchtreffern auch noch andere die Liste wiederholen, konnte ich schon nach der ersten Ergebnisseite aufhören zu suchen.

Zwei aus der Liste mit den 25 Varianten gibt es zwei die mich besonders beeindruckt haben. Zum Einsatz ziehe ich für meinen Fall aber nur eines in Betracht.

Nodetraveller hat unter Module Tabs eine beeindruckende Funktionalität der Tabs aber ohne Javascript zickte die Seite bei mir und war so gar nicht unobtrusive.

Einfach, übersichtlich, valide, funktional und vor allem unobtrusive erwies sich DOMTab – Navigation tabs with CSS and DOMscripting auf Onlinetools.org

Das hier noch aufgeführte Tab-Menu YETTII fehlt in der Liste der 25, wurd in Smashing Magazin unter 75 really useful Javascript techniques gefeatured, weil es von der Funktionalität ebenfall durchaus beeindruckt, aber wie auch schon die Tabnavigation von Nodetraveller nicht wirklich auf sein Javascript verzichten kann und fällt damit bei meinen strengen Vorgaben durch.

Ebenfalls beeindruckend, um seine Navigation rassig und nützlich (weil informativ) aufzumotzen fand ich übrigens das Beispiel von Dynamic Drive unter DD Tab Menu (5 styles) Das zublenden von Linkerläuterungen ohne die Informationen in die Linkliste reinzupressen macht es für die meisten CMS-Tools leicht integrierbar.

Nachtrag: Seufz – nehmen wir noch die Liste mit den 37+ Great Ajax, CSS Tab-Based Interfaces hier auf … auch wenn sich der eine oder andere Link natürlich wiederholt und dann lass ich es aber besser gut sein und implementiere die DOMTABs in mein 11-sprachiges SPRD-Design-Publikations-Monstrum.

Nachtrag 2: Manche nachteile zeigen sich erst, wenn man die Demo im echten Leben umsetzen will, so verschluckt das DOMtab nested DIVs. DAs ist natürlich ein böses nogo. Aktuell arbeite ich wenig erfolgreich daran, das “getElmenetByID(DIV)” mit der Funktion getElementByClassName(el,class) (Fundstelle: Your Favourite getElementsByClassName) im Script zu ersetzen. um nur noch DIVs auszublenden, die eine entsprechende Klasse mitführen. Das Ergebnis stelle ich dann hier vor. Natürlich könnte man auch im Netz eine fertige Lösung suchen, aber hey … ein Skript überarbeiten schult ungemein. Da will ich mich ein wenig mit Javascript quälen, zwischen all den anderen Aufgaben, die meine Zeitplanung aktuell bestimmen.

Nachtrag 3: Planänderung: nachdem ich mich erst wieder in objektorientiertes Javascript einarbeiten müsste und das Netz nicht selten irgendwo, Probleme längst gelöst hat, habe ich mich dann doch noch einmal umgesehen und wurde fündig. Unbtrusive und eine Klasse bestimmt was zum Inhalt der Registerkarte zählt. Auch wenn ich noch nicht den Test gemacht habe. Der erste Eindruck ist jedenfalls beeindruckend und einen Linktipp wert:
  … and the winner is …

 
Standalone Unobtrusive Tabs Script: SimpleTabs By Komrade.
 

öps … öh … dieser Winner muss auch überarbeitet werden. Siehe Kritik im nachfolgenden Artikel “Unobtrusive JavaScript Rules”. Jajajaja ….

Filed under: 1001 Linktipp, Programmierung
No Comments

Nicht alles was ich da sah, erkannte ich als Shorthand, denn ich dachte, das sei die ganz normale Syntax, aber immerhin hier ist für den Anfänger ein kleiner Einblick der wichtigsten Shorthand-Syntax-Beispiele: PHP Shorthand Syntax

Nachtrag: Das sollte ich hier wohl auch noch dazu packen, obwohl ich es dann noch weniger als Shorthand erkannte und auch als relative Unvollständig empfinde. Schließlich wurde auf “.=” nicht eingegangen: PHP Shorthand Reference

jajaja … alle vergessen die Hälfte und unter PHP Shortcuts findet sich noch dieser Links: These Things I Know, PHP Tips

Gute Linktipps zum Thema Shorthand, Shortcuts zur Ergänzung der Linktipps hier werden gerne in den Kommentaren entgegengenommen.

Filed under: 1001 Linktipp, Programmierung
No Comments

Eigentlich bin ich ja ein absoluter Verfechter der Trennung von strukturiertem Inhalt, Aussehen und Benimm einer Website, aber in der Administration eines CMS ist es manchmal dann doch praktischer, wenn man mit dem alten onmouseover="" onmouseout="" im HTML-<TAG> arbeitet. Ein netter Tooltip an einer kryptischen Schaltfläche hilft dem Nutzer, der so oder so Javascript für das CMS aktiviert haben muss, bei der Bedienung des Werkzeugs.

Das ist zwar alter Kram aber weil ich das gerade gemacht habe und das eine oder andere erst Nachschlagen musste, will ich hier mein Ergebnis verposchten, für Andere zum Finden:

Tooltipp mit inline-Script

1. <a onClick="funktion()"
2. onmouseover="this.firstChild.style.display='block';"
3. onmouseout="this.firstChild.style.display='none';" >
4. <spanstyle="position: absolute; width: 200px; height: auto; margin-top: 28px; margin-left: -100px; padding=".5em" border: 1px solid #aaa; color: #494949; background: #efefef; display: none;">
5. Tooltip-Text</span><img src="buttoff.gif" alt="Button-Text"
6. onmouseover="this.setAttribute('src','button.gif');"
7. onmouseout="this.setAttribute('src','buttoff.gif');" /></a>

Und so kann das dann aussehen:

Viel Platz für den Namen der Funktion und Anweisungen .

Nachtrag: ach Gottchen, mein frisch aktualisierter Firefox mag nicht, was ich da gemacht habe. Nur gut, dass ich es nur für den IE brauchte und hier auch keine Rücksicht auf die veralteten Versionen genommen habe. Aber dann … der Firefox nimmt eh gruselige Entwicklung und ich mag ihn immer weniger. Ich weiß wirklich nicht was der FF an diesen simplen DOM-Anweisungen auszusetzen hat. Meine Güte. OK. Der Firefox wollte unbedingt auch noch Javascript blockieren, obwohl ich dafür ein Addon habe … jajaja Javascript ist böse und es macht Sinn es nur von Fall zu Fall zu gestatten. Einstellungen korrigiert — jetzt tut’s auch im FF.

Filed under: Programmierung, Tools, Tutorials
No Comments

Dank der Hilfe von Michael von Reichweite.de, konnte nun das Problem gelöst werden und ich weiß wieder, warum ich selbst nur in ganz kleinem Maß schon für Kunden PHP anfasse, und hier lieber Fachmänner ins Boot hole. Aber es kommt, Leute es kommt. Ich werde peut a peut besser. Danke auch an Robert, dass er mir die Hilfe von seinem Blog rübergeschickt hat.

1. <? /* */
2. $dgal = get_posts('numberposts=0&category=1');
3. function getThumbs($stichwort, $dgal){
4. foreach($dgal as $post) : setup_postdata($post);
5. $galArr = explode("\n", get_post_meta($post->ID, "designthumbs", true));
6. foreach($galArr as $thepics){
7. $dtharr = explode(",", $thepics);
8. $pos = strpos($dtharr[1], $stichwort);
9. if($pos===false){}else{
10. $galentry = '<dl class="galerie2">'."\n\t".'<dt><span><img src="http://franchie.de/ ... /uploads/'.$dtharr[0].'" alt="'.$dtharr[2].'" /></span></dt>'."\n\t".'<dd><a href="'.get_permalink($post->ID, '', true).'" title="'.the_title('','',false).'">Details ansehen</a> /<br /><a href="http://franchie.spreadshirt.net/ ... /design/'.$dtharr[3].'" title="'.$dtharr[2].'">Will ich haben!</a></dd>'."\n".'</dl>';
11. echo $galentry;
12. };
13. };
14. endforeach;
15. } //Funktion ende
16. //*/
17. ?>

Im Beitrag oder Seite folgt nun noch der Aufruf der Abfrage mit den jeweiligen Begriffen. Voila eine Thumb-Archivgalerie via Custom Fields.

1. <h4>Thumbs mit Menschen</h4>
2. <? getThumbs('Menschen', $dgal); ?>
3. <h4>Thumbs mit Tiere</h4>
4. <? getThumbs('Tiere', $dgal); ?>
5. etc.

Die eine oder andere Kleinigkeit muss bei Franchie.de noch angepasst werden, dann wird diese Archiv-Galerie dort laufen. Also noch ein klein wenig Geduld … ach ja und irgendwann werde ich das noch mit Blättern durch die Thumbs ausbauen müssen, denn je mehr es werden, desto problematischer wird es — wer will schon Warten bis 2000 Thumbs geladen sind . Das ist also auch erst noch ein Provisorium, das aber sicherlich eine Weile hält … d.h. ich muss noch ausprobieren wie die Page-Funktion von WP reagiert … ggf. vermutlich muss die Funktion in die Datei funktion.php verfrachtet werden (Jetzt erst Mal aber warten andere Aufgaben. Ich aktualisiere den Beitrag so bald ich kann).

BTW: Ich nehme für die Blätterfunktion jederzeit gerne Hilfe an, damit innerhalb einer Stichwortabfrage auch 1000de von Thumbs vorkommen dürfen.

Hier noch Mal was die Ausgangssituation war:

Ich habe in der Kategorie 1 ein Custom field namens ‘designthumbs’. In dem Feld ist der Inhalt wie folgt:

Name des Thumbs_a, Stichwort1 Stichwort2 Stichwort3 etc, externerLink_a

Name des Thumbs_b, Stichwort1 Stichwort3 Stichwort7 etc, externerLink_b
etc.

Diese Thumbs sollen in einer Galerie in einer Seite ausgegeben werden:

H3: Stichwort 1:
============
[Thumb_a]
Postlink
externer Link a

[Thumb_b]
Postlink
externer Link b

H3 Stichwort 2
============
[Thumb_a]
Postlink
externer Link a

Filed under: Programmierung
1 Comment

Nachdem ich vor einigen Tagen meine erste eigene Wordpress.PHP-Erweiterung für die Sidebar zusammengefriggelt hatte, ging ich munter daran, diesen netten praktischen Code-Schnipsel in eine Seite einzubinden und parallel die ganze Angelelgenheit ein wenig auszubauen. Doch was relativ schnell und einfach in die Sidebar einzubauen ging, erweist sich in der Seite in der erweiterten Form doch als reichlich widerspenstig. Nach etlichen Try&Error-Fehlschlägen und zahlreichen traurigen Teilerfolgen, habe ich es nun beinahe geschafft … beinahe, denn leider looped mein Script noch etwas übereifrig gleich mehrfach und listet die Liste damit mehrfach hintereinander. Ich will mit der Geschichte von Anfang an beginnen. (more…)

Filed under: Programmierung
9 Comments

Nach ein wenig try&error und mit der Hilfe einer Vorlage habe ich nun auf Franchie.de eine kleine Galerie in der Sidebar, die die jüngsten sechs Motive, genauer die jüngsten sieben T-Shirtmotive auf der Startseite. Das allerneuste Motiv ist in der rechte Spalte unter dem Feature, die weiteren sechs Motive erscheinen als Thumbgalerie. Nachdem ich über das Branford Magazin Theme die Custom fields etwas genauer unter die Lupe nahm, da war der Weg nicht weit zu den Motivbeiträgen eine Thumbgalerie zu generieren. Wie immer war Google der erste Weg. Die meisten Ergebnisse brachten mich wenig weiter, insbesondere wenn man mit der Aussage, dass Custom fields nur im Loop funktionieren nicht viel anfangen kann.

Und so sieht das Ergebnis aus:

1. <h3>Die jüngsten sechs Motive</h3>
2. <ul class="sixthumbs"><li>
3. <?php
4. $motive = get_posts('numberposts=7&category=12'); array_shift($motive); foreach($motive as $post) : setup_postdata($post);
5. $thumbsArr = explode("|", get_post_meta($post->ID, "designthumbs", true));
6. $cth = count($thumbsArr);
7. srand((float) microtime() * 10000000);
8. $rand_keys = array_rand($thumbsArr, $cth);
9. if($cth>1){
10. $dthpArr = explode(',', $thumbsArr[$rand_keys[0]]);
11. }else {$dthpArr = explode(',', $thumbsArr[0]);}
12. ?>
13. <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><img src="<?php bloginfo('url'); echo '/'; echo get_option('upload_path'); echo '/';
14. echo $dthpArr[0]; ?>" alt="<?php the_title(); ?>" /></a>
15. <?php
16. endforeach;
17. ?>
18. <span style="clear: left;"> </span>
19. </li></ul>

Zunächst werden die Datenbank-Einträge (der Loop) in die Variable $motive geschrieben. Außerhalb eines Posts oder einer Page, liefert get_posts() alle Einträge, innerhalb eines Posts oder einer Page jeweils die Inhalte des Posts oder der Page. Der Loop wird in der Sidebar daher mit der Anzahl der jüngsten Beiträge und der Einschränkung auf die Kategorie 12 auf das gewünschte Segement der Datenbank reduziert. Nachdem der erste Beitrag bereits auf der Startseite gesondert hervorgehoben wurde, macht es Sinn den jüngsten Eintrag wieder wegzunehmen. Dies geschieht mit array_shift() Anschließend wird mit foreach ... der Array mit den Datenbankeinrägen abgearbeitet. Damit ist der Loop quasi offen und man kann die Funktion get_post_meta() einwerfen. Da mein Feld ein Array ist, mit dem sich eine ganze Reihe Informationen zum Motiv aufarbeiten lässt, schreibe ich die Daten in einen Array und da pro Eintrag nicht immer nur ein Motiv vorgestellt wird, es aber nicht sinnvoll ist, jedes Einzelmotiv bzw. jede Motivvariation in der kleinen Übersicht anzuzeigen und den Rahmen damit sprengen, wird die kleine Thumb-Sammlung noch einmal aufgedröselt und über array_rand() wird jeweils ganz zufällig eines aus der kleinen Sammlung herausgefischt und angezeigt. Das Customfield heißt in meinem Fall ‘designthumbs’

Das ist nun nicht mehr schwer analog nachzubauen und kann so allerlei Dinge anzeigen lassen. Viel Spass beim Aufmotzen des eigenen Themes. Und Danke an meine beiden Vorarbeiter, ohne deren Hilfe ich vermutlich noch lange den Codex anstarren würde und nicht wüsste, wovon die Rede ist. Noch immer weiß ich z.B. nicht was hinter der Funktion steckt.

Mit dieser Vorlage ist es nicht mehr sehr schwer, jedwede Übersichten zusammenzutragen. Ich kann an dieser Stelle nur noch viel Spaß wünschen, beim Verbiegen des eigenen Themes.

PS: hier ist noch ein Link zu 28 Wege wie man sein Wordpress-Blog mit Custom fields aufpeppen kann.

Filed under: Programmierung
1 Comment

In Silkester.de verwende ich das Plugin “Technorati Tags“, das den Loop von Wordpress verwendet. Intern in Wordpress habe ich “tag” durch “Stichwort” ersetzt, was im Deutschen durchaus Sinn macht, dabei aber nicht bedacht, dass das Plugin nun die Link-Struktur für Silkester auf Technorati anwendet und damit in einem 404 bei Technorati aufläuft. Die Quick&Dirty-Methode ist es, einfach über str_replace an der Stelle, wo der Link erzeugt wird einzubinden und “stichwort” gegen “tag” auszutauschen. Besser wäre es, den Feld-Inhalt zu verwenden, das herauszukramen ist mir jetzt zu mühsam. Es ist unwahrscheinlich, das ich bei Silkester erzählt … die interne Url zu den jeweiligen Stichworten noch einmal ändere. Für da nächste Kundenprojekt werde ich es dann aber wohl heraussuchen müssen.

Filed under: Programmierung
No Comments

Sei kein Esel, delegate

Das so scheint das Fazit zu sein, dass ich meiner jüngsten Suche nach dem onLoad-Script entnehme. Es began mit einem Beitrag vom Mai 2004: addLoadEvent von Simon Wilson. Dann begegnete mir eine Übersicht des Onloads Stand 30. Januar 2007: The window.onload problem (still) von Peter Micheaux. Lesenswert auch wenn einige Bahnhöfe für mich dabei sind. Peter Micheaux publiziert im August des selben Jahres noch einmal zum Thema: The window.onload Problem – Really Solved!, Aha. Interessant … und am Ende der Kommentare stößt man auf eine Kommentar von Diego Perini, die besagt … Pfeiff auf onLoad-Funktionen und delegier: Delegates (Da sämtliche verlinkten Beispiele seiner vorherigen Kommentare verschwunden sind, macht es Sinn, sich die Seite irgendwo lokal für den zukünftigen Zugriff zu speichern, bevor auch diese Seite vom 19. Februar 2008 sich in Luft auflöst.). Ob und in wie weit es wirklich Sinn macht, auf den Eventhandler zu verzichten und schlicht alles zu delegieren, klärt Christian Heilman in seinem Beitrag: Vergleich Eventhandling und Eventdelegation

Schaut man sich weiter um, dann scheint die Delegation aktuell im Gespräch zu sein. Noch weitere Beiträge:

1. A Look at Sun.COM’s New Event Delegation Library
2. Poor man’s JavaScript Behaviours
3. Event-Delegation made easy in jQuery

Bildquelle Esel auf flickr.com vom User Jaxxon

Filed under: Programmierung
No Comments