HTML Select mit Fluid erstellen

31. Mai 2011 in TYPO3 von Leo

Mithilfe von Fluid kann aus einem Array welches wir mit Extbase erstellt haben, ein einfaches HTML Select erstellt werden. Dies funktioniert so:

<f:form.select name="person" property="person" options="{allPersons}"
optionValueField="firstname" optionLabelField="firstname"/>

Kurz erklärt: Wir erstellen aus dem Array “allPersons” (mit geschweiften Klammern als Array gekennzeichnet) die Optionen für das Select. Das OptionValueField ist der Wert der Option welcher schlussendlich als value=”" im Option Tag stehen wird. Mit optionLabelField wird das Label des Option Tags gegeben, also was bei der Auswahl angezeigt wird.

Mit dem “name” und “property” Tag bestimmen wir schlussendlich noch wie das Select heisst, und in welcher Variable die Auswahl gespeichert wird, also im property = person. Diesen Wert würden wir dann mit getter/setter weiterverarbeiten erhalten.

TYPO3: Immer HTML E-Mails bei Newsletter Anmeldung (sr_email_subscribe)

20. Dezember 2010 in TYPO3 von Leo

Da HTML E-Mails eigentlich mittlerweile sowieso der Standard sind und es nur mehr Aufwand ist einen Newsletter in zwei Formaten zu versenden, gibt es eine sehr simple Möglichkeit immer HTML E-Mails in TYPO3 zu aktivieren, wenn man die Newsletter Anmeldungs Extension sr_email_subscribe (oder irgend eine andere welche auf tt_address aufbaut) nutzt.

Um also HTML E-Mails als Standard zu setzen, gehen wir in unsere Datenbank und suchen die Tabelle “tt_address”. Dort wechseln wir zur Struktur und bearbeiten die Spalte “module_sys_dmail_html”. Dort setzen wir einen Benutzerdefinierten Standardwert, nämlich “1″.

Nun muss lediglich noch im HTML Template die Auswahl entfernt werden sowie im TypoScript das Feld aus den Required Fields nehmen.

HTML: Image Maps – Image Mapping

14. Mai 2010 in HTML von Leo

Mit JavaScript kann man viele Effekte auf seine Webseite bringen, jedoch bringt auch das eher langweilige HTML ein paar nette Sachen mit, welche einem einiges an JavaScript ersparen können. Und zwar geht es um Image Maps, also ums Mappen von Bildern. Zuerst aber eine kurze Erklärung was Image Maps überhaupt sind.

Mit Image-Maps ist es möglich, Bereiche auf einem einzigen Bild einzuteilen und z.B. eine Verlinkung auf einem bestimmten Punkt auf dem Bild hinzuzufügen. So könnte man theoretisch eine Navigation aus einem Bild erstellen und die einzelnen Links mit einem Image Mapping verlinken – aber dies wäre sehr unflexibel.

Offiziell wird Image-Map folgendermassen beschrieben:

Image maps allow authors to specify regions of an image or object and assign a specific action to each region (e.g., retrieve a document, run a program, etc.) When the region is activated by the user, the action is executed. 

Um so einen Image-Map zu erstellen, wird zuerst natürlich ein Bild benötigt, welches man mappen will.
Das Bild wird dann mit per HTML eingebunden und man gibt dem Bild einen Map:

<img usemap="#map" src="bild.jpg" />

“#map” ist hierbei der Name der Map, welche wir gleich definieren werden. Dieses HTML Attribut wird benötigt damit der Map funktioniert. Für valides HTML wird noch das alt und title-Attribut benötigt.

Der Mapping Part, welcher durch den oben genannten HTML-Tag aufgerufen wird, wird in einem eigenen Teil definiert und sieht so aus:

<map name="map">
    <area shape="rect" coords="11,10,59,29"href="http://www.google.ch" alt="Google CH" title="Google Schweiz" />
    <area shape="circle" coords="3,15,7" href="http://www.google.de" alt="Google DE" title="Google Deutschland" />
    <area shape="poly" coords="15,46,69,50,13,14" href="http://www.google.at" alt="Google AT" title="Google Österreich" />
</map>

Im img-Attribut wird also mit ‘usemap=”#map”‘ auf die Map ‘#map’ zugegriffen, welche wir (siehe Code oben) definieren.
Die Bereiche in denen was passiert (in unserem Beispiel sind es jetzt verlinkungen), werden mit Koordinaten angegeben und erhalten eine Form. Es gibt neben “default” (der restliche, undefinierte Bereich) 3 Formen fürs Mapping – rect (Viereck), circle (Kreis) und poly (Polynom). Diese werden (siehe oben) mit shape=”gewünschte form” angegeben.

Zu den verschiedenen Formen nun noch eine kurze Erklärung, wie das ganze mit den Koordinaten aussieht.

Viereck (shape=”rect”) Koordinaten werden definiert für: x1,y1,x2,y2
x1 = linke obere Ecke, Pixel von links
y1 = linke obere Ecke, Pixel von oben
x2 = rechte untere Ecke, Pixel von links
y2 = rechte untere Ecke, Pixel von oben

Kreis (shape=”circle”) Koordinaten werden definiert für: x,y,r
x = Mittelpunkt, Pixel von links
y = Mittelpunkt, Pixel von oben
r = Radius in Pixel

Polygon (shape=”poly”) Koordinaten werden definiert für: x1,y1,x2,y2 … xn,yn
x = Pixel einer Ecke von links
y = Pixel einer Ecke von oben
Es können so viele Ecken definieren wie gewünscht. Von der letzten definierten Ecke muss man sich einfach eine Linie zur ersten definierten Ecke hinzu denken, welche das Polygon schliesst.


(Quelle: Selfthtml)

PHP Grundkurs 1: echo Ausgabe

30. April 2010 in Grundkurs, PHP von Leo

Hallo, dies ist der erste Teil meiner PHP Grundkurs Reihe. Hier zeige ich euch PHP und erkläre euch einiges, damit auch ihr diese Web Programmiersprache erlernen könnt. Anbei möchte ich noch anmerken, dass auch ich erst PHP lerne und die Sprache somit auch noch nicht super beherrsche, aber ich bin dran. Und hier in diesen kleinen Kursen zeige ich euch jetzt, was ich bisher so gelernt habe.

Das erste was man in PHP lernen sollte, was auch sehr simpel ist, jedoch immer benötigt ist, ist die einfache Ausgabe mit ‘echo’.

Zu erst erstellt ihr ein PHP File mit der Dateiendung “.php”. Damit der PHP Code als PHP Code gesehen wird (man kann PHP ja auch in HTML verwenden, dazu aber später noch mehr), muss er in den, ich nenne sie mal PHP Tags stehen. Diese sehen wie folgt aus:

<?php

// Kommentar

?>

Wenn ihr ein anständiges Programm wie Aptana, Notepad++ etc. habt, dann wird euch dieses alles “färben” (Code Highlighting), mehr zu den richtigen Programmen und eine kurze Erklärung folgt noch in einem weiteren Artikel.

Doch zurück zur ‘echo’ Ausgabe. Eine einfache Textausgabe macht ihr nun so:

<?php

echo "Hello World";

?>

Der Syntax ist sehr einfach. Zuerst ‘echo’ dann die Ausgabe in Anführungszeichen und danach, wie in PHP halt üblich, ein Semikolon ‘;’.
Wer das ganze noch mit HTML Code erweitern will, also direkt in der Ausgabe drin, der nutzt die ”:

<?php

echo '<u>Unterstrichen</u><br/>';

?>

Die Ausgabe wäre nun Unterstrichen und nach dem Text folgt ein ‘br’ (break), also ein Zeilenumbruch.

Wer die Ausgabe mehrmals ausgeben will, kann das ganze nun in einer Variable abspeichern, so muss der Text nicht immer neu geschrieben werden. Um dies zu tun, muss der Text in einer Variable gespeichert werden, also die Variable zuerst definiert werden.
Dies geht folgendermassen:

<?php

$hallo = 'Hallo!';

echo $hallo;

?>

In der Variable ‘$hallo’ (Variablen immer mit einem $-Dollar Zeichen am Anfang!) wird also der Text ‘Hallo!’ gespeichert. Im echo wird danach die Variable ausgegeben, also der gespeicherte Wert (‘Hallo!’) in der Variable. Beim Ausgeben einer Variable werden keine Anführungszeichen im echo benötigt, sondern lediglich das $-Dollar Zeichen welches immer vor den Variablen ist.
Würde man im echo die Variable $hallo mit Anführungszeichen ausgeben wollen, würde uns das echo keine Variable, sondern einfach den genauen Text, also ‘$hallo’ ausgeben, was wir ja nicht wollen.

Mehrere Variablen am Stück

Wer nun mehrere Variablen an einer Kette ausgeben möchte, oder auch z.B. eine Variable und einen normalen Text in Anführungszeichen, kann dies so tun:

<?php

$hallo = 'Hallo';
$welt = 'Welt';

echo $hallo . $welt;

?>

Das ganze aneinander hängen geschieht wie ihr oben seht, mithilfe eines Punktes ‘.’
Im Code oben würde die Ausgabe aber HalloWelt heissen, ohne einen Abstand zwischen den beiden Wörtern. Um dies schön zu lösen, hängt mein einfach ein Leerzeichen dazwischen:

<?php

$hallo = 'Hallo';
$welt = 'Welt';

echo $hallo . ' ' . $welt;

?>

Nun ist die Ausgabe schön dargestellt.

Das war Teil 1, Teil 2 folgt demnächst.

Meine erste richtige TYPO3 Extension

4. Januar 2010 in TYPO3 von Leo

Nach meiner kleinen, aller ersten “Extension”  (Klick), habe ich vor kurzem nun eine richtige Extension erstellt. Und zwar habe ich in einem kürzlichen Projekt mit meinem Lehrmeister und teilweise der Hilfe von anderen eine erste “wirkliche” Extension erstellt. Die Extension nennt sich Testimonials und kann hier aufgefunden werden (siehe rechte Seite).
Die Extension zeigt zufällig eine der im backend ausgewählten Personen aus und zeigt sie an. Dabei wird der Name, Titel, sowie das Bild etc. aus der Personen Datenbank genommen.
Geschrieben ist die Extension extra für dieses Projekt und befindet sich bisher nur dort im Einsatz.

Angefangen haben wir wieder mit Kickstarter, um die einfachen Felder für die Eingabe im Backend zu erstellen. Danach mussten wir jedoch noch einiges mit PHP, HTML, sowie CSS anpassen, damit die Extension schlussendlich so aussah, wie es sich der Kunde gewünscht hat.
Die Extension ist in 2 Sprachen verfügbar, deutsch und englisch. Hierbei wird einfach jeweils die englische Übersetzung des Feldes aus einem XML File genommen, in welchem dies alles abgespeichert ist.

Nach dem Break erfahrt ihr noch alles im Detail.