Kjell October 17, 2007 Development, Tutorials 3 comments full post »

Snippet: Unobstrusive Javascript mit Prototype und Event-Selectors

Den Benutzer nicht gleich umzuleiten wenn er sicht registrieren möchte ist chique, modern und freundlich. Das geht aber nur mit Javascript, oder doppelten Code, bzw. zwei Formularen. Aber wenn der Benutzer kein Javascript hat, geht es entweder überhaupt nicht, oder wir müssen die Struktur so ändern, dass wir andere Links setzen.

Hier mal ein Vorschlag wie man das geschickt umgehen kann.

JAVASCRIPT:

var AppRules = {
'a.swaplink:click': function(element) {
new Effect.toggle(element.getAttribute('href').split('#')[1], 'appear', {duration:0.4});
// brich den inhalt von href auseinander und verwende den hinteren teil.
}
}
FastInit.addOnLoad(function(){
EventSelectors.start(AppRules);
});

Unsere Links müssten dann so aussehen:

HTML:

<a href="signup.php#signup" class="swaplink">Registrieren</a>

Unser Formular müsste dann eine versteckte Sektion beinhalten, welche die zur Registrierung zusätzlich notwendigen Felder beinhalten.

HTML:

<div id="signup" style="display:none">
... wähle ein passwort, etc..
</div>

Wenn Javascript aktiviert ist erhält der "swaplink" unser Event, welches "href" auseinanderbricht und nur das verwendet was hinter der Raute steht um ein Element mit der daraus resultierenden ID zu 'togglen'.

Wenn Javascript nicht aktiviert ist wird der Benutzer ganz einfach auf die "signup.php" umgeleitet. Zusätzlich hätte man auch die Sprungmarke auf der signup.php um es dem Benutzer noch angenehmer zu machen.

So einfach kann das sein! :)

Verwendete Bibliotheken: prototype.js, event-selectors.js, fastinit.js, effects.js

Kjell October 16, 2007 Development, Tutorials 0 comments full post »

Prototype 1.6 – Der neue Stil

So wurde bisher in Prototype.js eine Klasse erstellt:

JAVASCRIPT:

var Message = Class.create();
Message.prototype = {
initialize(title, message) {
this.title = title;
this.message = message;
},
format: function() {
return this.title + "\n" + this.message;
},
show: function() {
alert(this.format());
}
}

Und so haben wir diese dann erweitert, komplett mit "Variable.prototype" und "Object.extend", aber ohne wirklichen Bezug zur abgeleiteten Klasse.

JAVASCRIPT:

var ErrorMessage = Class.create();
ErrorMessage.prototype = Object.extend(new Message(), { // überschreibe format()
format: function() {
return 'ERROR: ' + this.title + "\n" + this.message;
}
});

In Prototype 1.6 ist dass nun alles ein wenig einfacher. Anstatt noch mal mit "Variable.prototype = {...}" zu beginnen, übergeben wir den "Hash" direkt als Parameter von Class.create().

JAVASCRIPT:

var Message = Class.create({
initialize(title, message) {
this.title = title;
this.message = message;
},
format: function() {
return this.title + "\n" + this.message;
},
show: function() {
alert(this.format());
}
});

Das Erweitern ist jetzt ähnlich PHP und liest sich fast ebenso natürlich wie "Klasse extends AndereKlasse". Wir nehmen auch hier direkt den Namen der Variable (bzw. Klassenname) anstatt "new Variable()". Hinzu kommt dass "Object.extend" komplett wegfällt. Man beachte das $super, welches die Kopie der originalen Methode ist.

JAVASCRIPT:

var ErrorMessage= Class.create(Message, {
format: function($super) {
return 'ERROR: ' + $super(); // vergleichbar mit parent::format(); in PHP
}
});

Die vorherige Klasse hatte kein Parameter in der Funktion, jedoch wird $super nun definiert. Warum?

Das ist nur der Fall bei Unterklassen und ist optional. Sollte die ursprünglich Methode bereits Paremeter erwarten, sind diese dann einfach als zweiter Parameter zu definieren. Die neue Methode lässt sich dann genau wie das Original verwenden.

Hier mal ein Beispiel:

JAVASCRIPT:

var notice = new Message('Nur zur Info', 'Dies ist das normale Format');
notice.show(); // wirft alert('Nur zur Info ...');
var error = new ErrorMessage('Es trat ein Fehler auf', 'Deshalb ein anderes Format');
error.show(); // wirft alert('ERROR: Es trat ein ...');

Ich habe eine Testseite angelegt und auch ein paar weitere Beispiele angefangen. Vor allem ist addMethods interessant, da es die hinzugefügten Methoden anschliessend an alle Instanzen vererbt. So könnte man zum Beispiel durch eine erfüllte Bedingung allen Klassen "auf Knopfdruck" neue Möglichkeiten einräumen (mutieren).

Naja.. schaut euch einfach mal die Tests an und ansonsten wie gehabt:
Happy coding!

Kjell September 21, 2007 Development, Notizen 2 comments full post »

Sprinkle.js und die 3 Zeiler Alternativen

Auf Ajaxian entdeckte ich heute die sprinkle.js. Ein Skript welches das dynamische laden von Inhalten via eines Pseudoattributes "src" ermöglichen soll. Abgesehen davon dass dies nicht valide ist, da es kein "src"-Attribut für ein DIV gibt, waren die Kommentare im Gegenzug dazu doch recht erfrischend. :-)

Hier ein Beispiel wie sprinkle.js funktionieren soll:

HTML:

<script src="sprinkle.js"></script>
<div src="info.html"></div>

Die sprinkle.js ist rund 300 Zeilen lang und enthält eine Menge Schönheitsfehler und ist eigentlich ein gutes Beispiel wie man es nicht machen sollte. Wem aber diese Lösung gefällt, und bereits eine Bibliothek wie Prototype oder jQuery verwendet, sollte sich mal die folgenden Beispiele ansehen.

jQuery - www.jquery.com

JAVASCRIPT:

$('textarea[src], div[src], span[src]').each(function() {
$(this).load(this.src);
});

Prototype -www.prototypejs.org

JAVASCRIPT:

$$('textarea[src], div[src], span[src]').each(function(el){
new Ajax.Updater(el, el.src||'');
});

Somit wäre das mit der sprinkle.js wohl dann auch geklärt ;)

Kjell September 16, 2007 Development, Infos 0 comments full post »

CakePHP 1.2 Dokumentation fast komplett

Zumindest temporär(?) und es fehlen nur noch 3 Abschnitte, die man aber ruhig übersehen darf. Das Blog Tutorial und User Auth. Ich habe eine frühe Version dieser Doku bereits als PDF im Forge von CakePHP gefunden und war begeistert eine beinahe Buch-ähnliche Fassung zu haben. Nun scheint es fast komplett und beim überfliegen des Inhaltsverzeichnisses kommt es einem vor als wäre man an der richtigen Stelle für alle seine Fragen. Sehr zu empfehlen - auch wenn es noch nicht komplett ist.

Link: http://tempdocs.cakephp.org

via CakeBaker

Kjell August 14, 2007 Notizen 0 comments full post »

CenterNetworks Startup Tips eBook

CenterNetworks hat kürzlich ein eBook mit vielen nützlichen Tips rund um das Thema "Startup" veröffentlicht. Das PDF umfasst 46 Seiten wo rund 40 Autoren Ihre Erfahrungen und Tips verraten. Kostenlos natürlich, samt Inhaltsverzeichnis und im druckbaren Format. - Download

Kjell July 29, 2007 Development, Notizen 2 comments full post »

CakePHP Sanitize für alle Controller

Ich mag es einfach und nutze dabei sehr häufig den AppController um mir immer wiederkehrende Aufgaben zu sparen. Sanitize ist fast immer notwendig um die Benutzereingaben zu säubern und auf die Verwendung in Datenbank Queries vorzubereiten. Hier nun ein kleiner Tip wie man sich das ständige escaping und cleaning in den Actions spart:

class AppController extends Controller
{
	var $cleandata = array();
	var $helpers = array('Html', 'Form', 'Javascript', 'Time', 'Text');

	function beforeFilter() {
		if(!empty($this->data)) {
			uses('sanitize');
			$sanitize = new Sanitize();
			$this->cleandata = $sanitize->clean($this->data);
		}
	}
}

Also wenn wir Daten haben (nicht empty), lade die Sanitize Bibliothek (uses) und schreibe das gesäuberte Array in cleandata.

Nun haben wir $this->data und $this->cleandata in jedem Controller zur Verfügung. Das folgende Beispiel stammt aus dem UsersController:

function signup() {
	if(!empty($this->data)) {
		if($this->User->create($this->cleandata) && $this->User->validates())
		{
			echo 'valid!'; // save data .. etc..
		}
	}
}

Ihr könnt natürlich auch !empty($this->cleandata) verwenden. Mein Beispiel soll nur zur Veranschaulichung dienen.

Kjell July 23, 2007 Notizen, Tutorials 0 comments full post »

Peepcode Release: Ajax with Prototype.js

Geoffrey Grosenbach und Justin Palmer vom Prototype Core-Team haben sich die letzten Wochen über zusammengesetzt und den zweiten Teil der Prototype Video Serie zusammengestellt. Das Video geht 90 Minuten und zeigt euch wie man mit Ajax und Json seiner Applikation den letzten Schliff verpasst, und worauf man achten muss bevor man Ajax verwendet. Wie auch im ersten Teil wird empfohlen das Tutorial mit Firefox samt Firebug zu verfolgen. Beispiel Rails Projekte die im Video verwendet werden, liegen dem Download bei.

Vorschauvideo

Ihr könnt das Video (quicktime und ipod format vorhanden) für 9 Dollar (rund 6 Euro) via PayPal oder Google Checkout bei peepcode.com kaufen.

Kjell June 10, 2007 Development 3 comments full post »

CakePHP 1.2 – Die neue Konsole unter Windows

Okay.. habe gerade den neusten Trunk von CakePHP 1.2 ausgecheckt und als erstes fiel mir auf das der "scripts" Ordner verschwunden ist. Es gibt nun einen neuen Ordner unter "cake" namens "console". Dieser beherbergt ein Shellskript und eine Batch-Datei für Windowsuser. Da bisher noch keine Doku existiert stand ich anfangs vor einem Problem: "Wie zum Geier soll die BAT funktionieren?"

In der Datei selbst gab es jedoch einen kleinen Hinweis, wenn auch mit Falschinformation gewürzt:

In order for this script to work as intended, the cake\scripts\ folder must be in your PATH

Scripts wurde ja entfernt. Müsste also "cake\console\" sein.

Console Ordner eurer PATH variable hinzufügen

Die globale PATH variable kennt man noch aus DOS Zeiten und ist unter XP auch recht gut versteckt.

Rechte Maustaste auf das Arbeitsplatz-Symbol -> Eigenschaften
Systemeigenschaften: Wählt dort "Erweitert"
Erweitert: Unten ist ein Button "Umgebungsvariablen". Klicken.
Dort sind zwei Listenfelder. In dem unteren "Systemvariablen" Feld "Path" suchen
Markiert "Path" und klickt auf den "Bearbeiten"-Button
Wert der Variablen: Ist eine durch Semikolon getrennte Liste mit Pfaden
Fügt nun den vollen Pfad zu eurem "cake" Ordner (wahrscheinlich irgendwo in htdocs)
Beispiel: ;F:\xampp\php;F:\htdocs\cake\console;
Bestätigen mit OK und fertig.

Hinweis 1: Ich habe neben cake\console auch xampp\php hinzugefügt, damit ich PHP von überall aufrufen kann.
Hinweis 2: Wenn ihr die "CMD" Konsole noch offen habt, müsst ihr die neu aufrufen, damit die geänderte PATH variable auch aktiv ist.

Neues Projekt anlegen

Es hat sich einiges geändert. Früher konnte man mit scripts\bake.php -project "name" ein neues Skelett anlegen lassen. In CakePHP existiert aber der "project" parameter nicht mehr, und man kann ihm auch nicht sagen wo es hingehen soll (soweit ich weiss..). Da man nun von überall backen kann, muss man einfach in den zukünfigten Projektordner wechseln!

Prüft ob der neue Befehl "cake" funktioniert. Öffnet "cmd" und gebt einfach irgendwo "cake" ein, gefolgt von Enter.
Ihr solltet "Welcome to CakePHP v1.2.0.5165alpha Console" sehen, gefolgt von ein paar Statusinfos.
Geht nun in euren Ordner wo die cake-, app- und vendor-Ordner ebenfalls liegen. Erstellt einen neuen Ordner. Zum Beispiel "testprojekt".
Wechselt nun nach "testprojekt" und ruft "cake bake" auf, wobei "bake" nun ein Parameter ist und "cake" unsere Batch-Datei.

Ihr solltet nun einen ähnlichen Dialog bekommen wie früher mit "bake.php -project .."

App : testprojekt
Path: F:\htdocs\testprojekt
---------------------------------------------------------------
Skel Directory: F:\htdocs\cake\console\libs\templates\skel
Will be copied to:
---------------------------------------------------------------
App: testprojekt
Path: F:\htdocs\testprojekt
---------------------------------------------------------------
Look okay? (y/n/q)

Entscheidet ob der gefundene Pfad richtig ist und dann geht es gewohnt weiter :)

Ihr solltet nun die Willkommensseite sehen wenn ihr http://localhost/testprojekt aufruft. Angaben und Pfade varrieren selbstverständlich. Aber das dürfte ja klar sein.

Für weitere Tips und Tricks empfehle ich den Beitrag von Cakebaker zu den neuen Funktionen.

Viel Spass!