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.
-
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:
-
<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.
-
<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
So wurde bisher in Prototype.js eine Klasse erstellt:
-
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.
-
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().
-
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.
-
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:
-
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!
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:
-
<script src="sprinkle.js"></script>
-
<div src="info.html"></div>
-
<!-- info.html wird via ajax in das div geladen, on body load -->
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
-
$('textarea[src], div[src], span[src]').each(function() {
-
$(this).load(this.src);
-
});
Prototype -www.prototypejs.org
-
$$('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 ;)
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
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
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.
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.
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.
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!
Erstmal sorry dass hier so wenig los ist in letzter Zeit. Hab einfach viel um die Ohren :)
Nun habe ich aber gerade mal wieder meinen Google Reader angeschmissen und dabei zum einen gemerkt das Prototype 1.5.1 nun endlich final ist (sowie dass es auch wieder eine Protopressed Version dessen gibt), und zum anderen wurde ich auf eine Empfehlung im prototypejs.org Weblog aufmerksam:
PeepCode: Prototype Video Training Series
Das erste von insgesamt zwei geplanten Screencasts zum erlernen von Prototype steht zum kaufen bereit. Ich habe nicht gezögert und die veranschlagten 9 US Dollar investiert und muss sagen dass es sich lohnt. Jeder der gerade mit Prototype anfängt, oder nur zum Teil weiss wozu etwas in Prototype überhaupt gut ist, sollte sich dieses Tutorial zu Gemüte führen. Selbst für Fortgeschrittene ist das eine oder andere doch recht interessant.
Das Video ist in englischer Sprache und beginnt mit der simplen Typenbeschreibung und weist auf die Unterschiede hin. Basierend auf diesen Grundlagen kommt nach und nach Prototype ins Spiel, bis man sich anschliessend gänzlich im Prototype-Land bewegt. Es wird anhand einfacher Beispiele innerhalb der Firebug Konsole ausführlich erklärt warum und wieso Prototype an diesen Stellen nützlich ist und was man davon hat. Hauptaugenmerk liegt in diesem Teil auf DOM Events und DOM Manipulation, sowie Aggregation von Elementen.
Wer dem englischen nicht ganz so mächtig ist, muss nicht zwingend zögern. Der Sprecher hat keinen übertriebenen Akzent und spricht langsam und verständlich. Die Audioqualität ist top und die Bildqualität ist gut. Das Video selbst ist ein Quicktime Mov mit integrierter Kapitelnavigation (auch für iPod verfügbar). Der Screencast hat eine Laufzeit von knapp einer Stunde und schliesst mit einem kleinen Projekt ab.
Um das Video zu kaufen braucht ihr nur PayPal und schlappe 7 Euro Guthaben.
Also ich freue mich schon auf den zweiten Teil.
Letzte Woche habe ich mir die knapp 1-stündige Einführung des Firebug Autors Joe Hewitt angetan. Leider sind gute Entwickler nicht auch gleich immer gute Erzähler, mich eingeschlossen. :)
Per Zufall fand ich vorhin zu Firebug zwei kurze, aber präzise Tutorial-Videos auf YouTube. Das erste Video beschreibt wie man den Debugger im Allgemeinen einsetzt, und das Zweite zeigt wie man mit Firebug das CSS einer Seite temporär ändern kann, was es alles im Net-Tab zu sehen gibt und wie man den Inspector benutzt um schnell an Elemente zu kommen.
- YouTube: Introduction to Debugging AJAX Application
- YouTube: Introduction to CSS editing using Firebug
- Yahoo Video: Joe Hewitt's Firebug Overview
Für CakePHP Baker dürfte dieser Link hier auch interessant sein: FireCake, ebenso wie für Nicht-Baker diese PHP Alternative: FirePHP .. oder beides ;)
