Beim Auslesen werden die Ergebnisse so zusammen gefasst, dass es für den normalen Programmierer kein Unterschied gibt. Die neuste Version findet man auf GitHub, die Erklärung zur Installation und Nutzung in diesem Eintrag.

Voraussetzungen

Das Expandable Behavior erwartet zwei Tabellen Keys und Values:

CREATE TABLE IF NOT EXISTS 'keys' (
  'id' int(3) unsigned NOT NULL AUTO_INCREMENT,
  'model' varchar(25) COLLATE utf8_bin NOT NULL,
  'key' varchar(50) COLLATE utf8_bin NOT NULL,
  PRIMARY KEY ('id')
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_bin;
CREATE TABLE IF NOT EXISTS 'values' (
  'id' int(6) unsigned NOT NULL AUTO_INCREMENT,
  'key_id' int(3) NOT NULL,
  'model_id' int(6) NOT NULL,
  'value' text COLLATE utf8_bin NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_bin;

Außerdem sollte man das Containable Behavior für das Model aktiviert haben. Ansonsten fehlt nur noch die Datei aus dem Repository auf GitHub.

Installation

Ein schönes Beispiel ist das Model Document. In meinem Projekt gibt es die Möglichkeit beliebige Dateien hochzuladen, jede Datei hat dabei andere Eigenschaften die dazu mit gespeichert werden sollen. Jetzt könnte man alle Spalten anlegen und nur die benötigten ausfüllen, was aber zu einer äußerst unangenehmen Tabelle führt. Da doch lieber das Expandable Behavior. Die Tabelle documents besitzt folgende Spalten:

ID
created
modified
user_id
title
file
extension
is_hidden

Für ein OpenOffice Dokument soll der Benutzer jetzt die Anzahl Seiten eintragen können. Das macht für ein Video natürlich keinen Sinn. Jetzt kommt das Expandable Behavior ins Spiel.

class Document extends AppModel {
  var $actsAs = array('Containable', 'Expandable');
}

Fertig!

Speichern

Im View kann man jetzt ein Formular mit beliebigen Feldern anlegen, zum Beispiel für ein neues OpenOffice Dokument:

<?php
echo $this->Form->create('Document');
echo $this->Form->input('title');
echo $this->Form->input('file', array('type' => 'file'));
echo $this->Form->input('pages');
echo $this->Form->end('Save');
?>

Das Feld pages wird beim Speichern erkannt, eventuell in der Datenbank keys ein neuer Eintrag erzeugt und in values die Inhalte gespeichert. So einfach.

Neue Felder werden nur angelegt, wenn debug größer als 0 ist.

Validierung

Es lassen sich wie gewohnt alle Cake Validierungsregeln auf die dynamischen Felder anwenden.

class Document extends AppModel {
  $validate = array('pages' => array('rule' => 'numeric'));
}

Auslesen

Hier muss man auf eine Sache achten. Normalerweise sieht die Abfrage so aus:

$document = $this->Document->find('first', array(
  'conditions' => array('Document.id' => $document_id),
));

Da erhält man jetzt für jeden dynamisch angelegten Key einen leeren Eintrag weil die Inhalte nicht automatisch geladen werden. Das muss beim auslesen noch mit angegeben werden:

$document = $this->Document->find('first', array(
  'conditions' => array('Document.id' => $document_id),
  'contain' => array('Value')
));

Über das Containable Behavior werden alle zugehörigen Inhalte ausgelesen, das Expandable Behavior kümmert sich um den Rest.

$this->Document->getKeys();

Die Funktion getKeys() aus dem Behavior liefert ein Array mit allen dynamisch angelegten Schlüsseln. Ganz praktisch um dynamische Formulare aufzubauen.

ToDo

Ganz fertig ist die Arbeit noch nicht.

• Ich habe im beforeFind() Callback alles versucht, aber ich kriege Cake einfach nicht dazu die Inhalte automatisch mit auszulesen.
• Es wäre natürlich nett die values auch im Paginator nutzen zu können. Das muss noch untersucht werden.
• Die Keys sollten verschiedene Typen ermöglichen, z.B. für Zahlen, Text oder Floats. Im Moment wird einfach alles in einem Feld vom Typ Text gespeichert.

Fazit

Das Behavior funktioniert bisher super, ist allerdings noch in einer sehr frühen Entwicklungsphase. Wer einen Fehler findet ist herzlich eingeladen einen Patch über GitHub zu schicken.

Bisher macht es großen Spaß neue Felder anzulegen ohne sich über die Datenbank Gedanken zu machen. Mal sehen was daraus noch wird.

CakePHP vorbereiten

Um in allen Teilen der Applikation zu erkennen, ob ein mobiles Endgerät auf die Seite zugreift, definiert man im AppController eine Variable $isMobile.

class AppController extends Controller {
  var $isMobile = false;
}

In der Funktion beforeFilter() wird mit Hilfe des RequestHandlers das mobile Endgerät erkannt:

function beforeFilter() {
  if($this->RequestHandler->isMobile() || isset($this->params['url']['mobile'])) {
    $this->layout = 'mobile';
    $this->isMobile = true;
  }
  $this->set('is_mobile', $this->isMobile);
}

Die Variable isMobile wird auf true gesetzt und das Layout mobile genutzt. Um es in der gewohnten Umgebung zu testen, erlaube ich auch den URL Parameter mobile, mit dem jeder View per ?mobile=1 im mobilen Layout angezeigt werden kann.

Bei einer richtig guten Applikation ist die Arbeit damit getan und alle Views funktionieren auch in der mobilen Version. Realistischer ist aber das man in der mobilen Version anderen HTML Code braucht und nur einen Teil der Funktionalität zur Verfügung stellt. Das erreicht man über angepasste Views.

In der Funktion beforeRender() kann der View verändert werden. Meine Lieblingsfunktion sieht so aus:

function beforeRender() {
  if($this->isMobile) {
    $this->action = 'mobile/'.$this->action;
  }
}

Entweder man fügt diese Funktion im AppController ein und leitet für die gesamte Applikation alle Views in den mobile Ordner weiter, oder nur in den betreffenden Controllern.

Nach dem abarbeiten der Funktion im Controller wird der View in den mobile Ordner weiter geleitet. Cake sucht jetzt für den Aufruf von /users/login den View in app/views/users/mobile/login.ctp.

jQuery Mobile im CakePHP Layout

Jetzt kommt der schöne Teil! Eine mobile Applikation mit jQuery mobile bauen. Grundlage ist ein HTML5 Grundgerüst:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 Gerüst</title>
    <meta charset="utf8">
  </head>
  <body>
    <h1>Hallo Welt</h1>
  </body>
</html>

Die üblichen Variablen aus dem CakePHP View können natürlich nach belieben eingesetzt werden, ich denke da an $title_for_layout und $content_for_layout. Wirklich entscheidend ist aber jQuery mobile.

Auf der Downloadseite gibt es ein praktisches Copy Paste Snippet um jQuery und jQuery Mobile aus dem CDN einzubinden:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 Gerüst</title>
    <meta charset="utf8">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
    <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
  </head>
  <body>
    <div data-role="page">
      <div data-role="header">
        <h1>Hallo Welt!</h1>
      </div>
      <div data-role="content">
        <p>Meine erste mobile Seite</p>
      </div>
    </div>
  </body>
</html>

Bei jQuery Mobile läuft sehr viel über das data Attribut eines Elements. Seite, Kopf und Inhalt werden darüber deklariert. In jQuery ließt man diese Eigenschaften übrigens sehr einfach über die data() Funktion aus.

$('div').data('role'); // returns string
$('div').data(); // returns object

Konfiguration

Es gibt Standardeinstellungen, Callbacks und Events auf die man in Javascript reagieren kann. Allerdings muss man den eigenen Code vor dem Einbinden von jQuery Mobile anlegen! So siehts aus:

<script src="jquery.min.js"></script>
<script>
  $(document).bind("mobileinit", function(){
    //apply overrides here
  });
</script>
<script src="jquery.mobile.min.js"></script>

Formulare

jQuery Mobile erwartet einen Container der das Label und das Inputfeld umschließt. Kein Problem sagt der Cake Entwickler erst, dann bemerkt er aber das der Container das Data Attribut fieldcontainer braucht. Zum Glück auch kein Problem, da man dem FormHelper beim erstellen des Formulars Standardeigenschaften mitgeben kann:

echo $this->Form->create('User', array(
  'action' => 'login',
  'inputDefaults' => array(
    'div' => array('data-role' => 'fieldcontain')
  ),
));

jQuery Mobile kümmert sich jetzt von selbst um die korrekte Darstellung. Bei viel Platz werden Label und Inputelement nebeneinander, bei weniger Platz untereinander dargestellt. Submitbuttons werden automatisch schick dargestellt.

Fazit

Es gibt eine Menge Dinge man beim Arbeit mit jQuery Mobile entdecken kann. Es macht großen Spaß und funktioniert gut über die meisten mobilen Endgeräte hinweg. Die Dokumentation von jQuery Mobile ist mit jQuery Mobile erstellt. Dazu ein Trick: Wenn man die Seite gefunden hat, die genau das darstellt was man sucht, dann entfernt man die Raute aus der URL und öffnet anschließend den Quelltext der Seite um zu verstehen wie das Feature aufgebaut ist.

Da alles dynamisch geladen wird, vom Framework angepasst und erweitert wird, wird man im Firebug durch jede Menge Kram abgelenkt. Will man also herausfinden wie durchsuchbare Listen aufgebaut sind, navigiert man auf die entsprechende Seite in der Doku:

http://jquerymobile.com/demos/1.0a2/#docs/lists/lists-search.html

Und entfernt die Raute:

http://jquerymobile.com/demos/1.0a2/docs/lists/lists-search.html

Und erkennt das es äußerst einfach, genial und zukunftsfähig aufgebaut ist:

<div data-role="page">
  <div data-role="header">
    <h1>Search filter bar</h1>
  </div><!-- /header -->
  <div data-role="content">
      <ul data-role="listview" data-filter="true">
        <li><a href="index.html">Acura</a></li>
        <li><a href="index.html">Audi</a></li>
        <li><a href="index.html">BMW</a></li>
        <li><a href="index.html">Cadillac</a></li>
        <li><a href="index.html">Chrysler</a></li>
        <li><a href="index.html">Dodge</a></li>
        <li><a href="index.html">Ferrari</a></li>
        <li><a href="index.html">Ford</a></li>
        <li><a href="index.html">GMC</a></li>
        <li><a href="index.html">Honda</a></li>
        <li><a href="index.html">Hyundai</a></li>
        <li><a href="index.html">Infiniti</a></li>
        <li><a href="index.html">Jeep</a></li>
        <li><a href="index.html">Kia</a></li>
        <li><a href="index.html">Lexus</a></li>
        <li><a href="index.html">Mini</a></li>
        <li><a href="index.html">Nissan</a></li>
        <li><a href="index.html">Porsche</a></li>
        <li><a href="index.html">Subaru</a></li>
        <li><a href="index.html">Toyota</a></li>
        <li><a href="index.html">Volkswagon</a></li>
        <li><a href="index.html">Volvo</a></li>
      </ul>
  </div><!-- /content -->
</div><!-- /page -->

Ist das nicht schön?

Beim schreiben sind mir eine ganze Menge Themen aufgefallen die unbedingt noch behandelt werden müssen: Links, Ajax und Maps.

Wie sind deine Erfahrungen mit jQuery Mobile?

Mit ein paar Tricks und einer handvoll Wissen wir dieses Zusammenspiel ein Hort der Freude! Dieser Artikel beschreibt das Zusammenspiel zwischen Versionsverwaltung und Framework.

Das Repository

Auf unserem Entwicklungsserver liegt das zentrale Coderepository. Hier wird es zum Projektstart angelegt und jeder beteiligte Entwickler kriegt bei bedarf Zugriff darauf. Zum starten wird nur eine leere Datei versionisiert, der Projektleiter legt dann alle benötigten Grundlagen von seinem Rechner aus an.

# Auf dem Server
$ mkdir PROJEKT.git
$ cd PROJEKT.git
$ touch init.txt
$ git init
$ git add .
$ git commit -m "Init"

Auf dem eigenen Rechner wird vom Projekt (eventuell per VPN von zuhause) eine Arbeitskopie erstellt.

# Zuhause
$ cd Ordner_fuer_alle_Projekte
$ git clone gitosis@SERVER:git/PROJEKT.git

Beim clonen legt git einen neuen Ordner mit dem Namen des Projektes an.

CakePHP

Im ersten Schritt werden alle Cake Dateien in den Ordner kopiert. Anschließend werden die benötigten Tabellen in der Datenbank angelegt. Über die Cake Console werden dann alle benötigten Dateien gebacken.

$ cd cake/console/
$ ./cake bake

Jetzt kommt der Trick! Um in Zukunft jeden Stress mit der Datenbank zu vermeiden, backt man das Datenbankschema mit in die Cake Applikation.

$ ./cake schema generate

Mit diesem Befehl liest Cake die Datenbank aus und legt die Struktur in der PHP Datei unter /config/schema/schema.php ab. Ändert ein Entwickler eine Tabelle auf seinem Rechner, muss er das Schema neu erstellen und in Git bekannt machen.

$ ./cake schema generate
$ cd ../..
$ git add .
$ git commit -m "Einiges ist passiert, inkl. neuer Datenbank"

Der Kollege oder alternativ der gleiche Entwickler zuhause holt sich die neuste Version vom Server und aktualisert mit Cake Magie seine Datenbank.

$ git pull
$ cd cake/console
$ ./cake schema update

Fertig ist die Datenbank!

Dateien ignorieren

Beim initialen anlegen macht es Sinn, Git einige Dateien und Ordner zu entziehen, die nicht versioniert werden müssen, da sie bei jedem Entwickler individuell vorhanden sind. Dafür legt man im Root Verzeichnis vom Projekt eine Datei Names .gitignore an.

Hier werden Dateien und Ordner festgehalten, die nicht eingebunden werden:

app/tmp/
config/database.php

Cache Dateien anlegen

Das Problem ist bei der oben verwendeten .gitignore Datei, dass die Caches leer sind und keine Zugriffsrechte darauf bestehen. Deshalb muss man beim erstellen des Projekts die nötigen Ordner anlegen und die entprechenden Zugriffsrechte vergeben.

# cd app/
# mkdir tmp
# mkdir tmp/cache/
# mkdir tmp/cache/models/
# mkdir tmp/cache/persistent/
# sudo chmod -R 777 tmp/

Nach dem das Administratorpasswort eingegeben wurde, wird eine sehr freundliche Berechtigung gesetzt (die zum testen okay ist, auf dem Liveserver aber tabu!) und Cake kann in die Order schreibenn. Da der Ordner aus der Versionisierung ausgeschlossen wurde, muss man diesen Schritt zum Glück nur ein einziges mal durchführen.

Die Datenbank

Weil ein frisch geclontes Cake Projekt noch keine Datenbankverbindung besitzt, muss man als erstes eine neue Datenbank über phpMyAdmin o.ä. erstellen. Anschließend wechselt man in die Konsole und erstellt anhand des Schemas alle benötigten Tabellen.

$ cd cake/console
$ ./cake bake

Da keine Datenbankverbindung besteht, werden die Zugangsdaten abgefragt. Anschließend

$ ./cake schema create

Jetzt noch die zwei Fragen mit y bestätigen und schon liegen alle Tabellen ordentlich in der frisch angelegten Datenbank.

Fazit

Was benutzt ihr um Demoinhalte zu übertragen? Im Schema gibt es zwei Callbacks: before() und after(); ich fürchte die werden beim neugenerieren überschrieben.

Ansonsten bleibt nur noch frohes Entwickeln zu wünschen übrig. Frohes entwickeln!

echo Configure::read('Hello.World');

Das funktioniert vom Model, über den Controller bis zum View. Wäre es nicht wunderbar auf die gleiche Art und Weise auf den angemeldeten Benutzer zugreifen zu können? Ich denke da an:

echo User::get('name');

Ja, wäre es und funktioniert ganz einfach. Die Idee stammt von Matt Curry und ist in seinem kostenlosen Cake Buch auf englisch beschrieben. Im Laufe der Zeit hab ich die Funktionen erweitert und angepasst.

Das User Model

Hier beginnt die Arbeit. Die Grundlage ist die Funktion getInstance() mit deren Hilfe die Daten gespeichert werden und sicher gestellt wird, dass immer die richtigen Daten zurück gegeben werden:

function &getInstance($user = null) {
  static $instance = array();
  if ($user) {
    $instance[0] =& $user;
  }
  return $instance[0];
}

Um neue Daten hinzuzufügen habe ich die Funktion store() erstellt. Diese kann beliebig oft aus dem Controller aufgerufen werden. Neue Daten ersetzen alte Inhalte. Mit Hilfe dieser Funktion kann man nachträglich noch einzelne Daten hinzufügen.

function store($data) {
  $user = User::getInstance();
  $user = Set::merge($user, $data);
  User::getInstance($user);
}

Und natürlich die Funktion um Daten auszulesen:

function get($path = '') {
  $_user =& User::getInstance();
  if(empty($path)) {
    return $_user;
  }
  $path = str_replace('.', '/', $path);
  if (strpos($path, 'User') !== 0) {
    $path = sprintf('User/%s', $path);
  }
  if (strpos($path, '/') !== 0) {
    $path = sprintf('/%s', $path);
  }
  $value = Set::extract($path, $_user);
  if (!$value) {
    return false;
  }
  return $value[0];
}

Wie man sieht wird mit der Funktion Set::extract() aus den gespeicherten Daten gelesen. Die Core Utilities sind einfach großartig. Unbedingt durchstöbern!

Im App Controller

Hier werden die Daten vom angemeldeten Benutzer gesetzt. Als erstes muss natürlich das Model importiert werden, unabhängig von einer Anmeldung. Damit alle Controller mit den Daten arbeiten können, gehört der folgende Code in die Funktion beforeFilter().

App::import('Model', 'User');
$User = new User;

Als nächstes wird geprüft ob der Benutzer angemeldet ist. Wenn das der Fall ist, werden die Benutzerdaten aus der Session ins Model geschrieben:

if($this->Session->check('Auth.User')) {
  $User->store($this->Session->read('Auth'));
}

Hat man im Laufe der Abarbeitung der Anfrage noch weitere Informationen vom Benutzer gesammelt oder errechnet, kann man die einfach hinzufügen:

$User->store(array('is_cool' => true));

Überall

Überall, im View, im Controller oder im Model kann jetzt auf die Benutzerdaten zugegriffen werden:

echo User::get('User.name');
echo User::get('email');

Ich mag diese Form sehr! Sie ist schön, kurz und einprägsam. Man kann sie auch noch vielfältig erweitern.

Sehr schöne Erweiterung

Kaum können sich Benutzer anmelden, sollen sie verschiedene Rechte auf einer Plattform haben. Mit den oben beschriebenen Grundlagen erreicht man schon sehr viel. Noch besser wird es, wenn man eine Funktion check() im Model hinzufügt um auf das vorhanden sein von Feldern zu prüfen.

function check($path) {
  $value = User::get($path);
  if (!$value || empty($value) || $value === false) {
    return false;
  }
  return true;
}

Damit kann man schon gut lesbare Abfragen schreiben.

if(User::check('is_cool')) { /* usw. */ }

Aber so richtig sauber sieht das nicht aus. Und was passiert wenn es mehrere Rollen gibt die der Nutzer einnehmen kann? Dann wäre eine is() Funktion wesentlich schöner.

if(User::is('cool')) //ist der benutzer cool?
if(User::is('cool', 'okay')) //ist der benutzer cool oder okay?

Das sieht nett aus! Und der Schlüssel/die Funktion ist einfach implementiert. Im User Model einfach folgendes hinzufügen:

function is() {
  $roles = func_get_args();
  foreach($roles as $role) {
    if(User::check('User.is_'.$role)) {
      return true;
    }
  }
  return false;
}

Die Rechte werden im Benutzerarray erwartet in der Form is_Rechtename. Im Controller also schnell hinzugefügt:

$User->store(array('is_cool' => 1, 'is_okay' => 1, 'is_bloede' => 0));

Die Funktion is() nimmt den übergebenen Namen, setzt ein is_ davor und prüft ob die Variable in den Benutzerdaten gesetzt ist.

Fazit

Ich finde dieses Pattern einfach großartig und arbeite nur noch damit! Ich hab versucht das ganze in ein Plugin zu packen um nicht jedes mal aus einem alten Projekt die Funktionen rüber zu kopieren, aber es daran gescheitert, dass das Benutzer Model, wenn es statisch aufgerufen wird natürlich nicht mehr seine Behaviors (UserStorage) beinhaltet. Jemand eine Idee?

Welche das sind, wie sie eingebaut und verwendet werden, ist das Thema dieses Artikels.

Im App Controller

Alles fängt im Controller an. Meine erste Tat ist jetzt stets einen App Controller anzulegen. Der liegt im Verzeichnis /app/ und definiert eine Reihe von Grundlagen.

class AppController extends Controller {
  var $components = array('Auth', 'Session', 'RequestHandler');
  var $helpers = array('Form', 'Html', 'Javascript', 'Time', 'Text', 'Layout');
}

Die Components Auth und Session sind wahrscheinlich schon hinreichend bekannt. Der RequestHandler ist mein bester Freund, denn er beinhaltet alle Informationen über den aktuellen Aufruf. Mit seiner Hilfe ist es zum Beispiel möglich zu erkennen ob es sich um einen asynchronen Aufruf handelt oder um ein mobiles Endgerät.

Die Helper sollten auch soweit klar sein, bis auf Layout. Der ist nicht im Core enthalten sondern in der Bakery verfügbar. Mit diesem Helper im Projekt ist  Template Inheritance möglich. Das heißt man definiert im Layout (/app/views/layouts/default.ctp) einen Block, zum Beispiel den Footer.

<div id="footer">
  <? $this->Layout->output($footer_for_layout, $this->element('default_footer')); ?>
</div>

Im Element default_footer (/app/views/elements/default_footer.ctp) befindet sich der Standardfooter. Und den überschreibt man im Bedarf einfach in einem View:

<?=$layout->blockStart('footer');?>
Ein <strong>neuer</strong> Footer!
<?=$layout->blockEnd();?>

Grandios oder? Der im View definierte Inhalt wird dann im entsprechenden Block im Layout ausgegeben. Das Prinzip habe ich bei Django gesehen und jetzt zum Glück auch in Cake zur Verfügung.

Noch ein Wort zum RequestHandler. In der Funktion AppController::beforeFilter() benutze ich folgende Abfrage um auf einen asynchronen Aufruf zu reagieren:

if($this->RequestHandler->isAjax()) {
  Configure::write('debug', 0);
  if($this->RequestHandler->prefers() == 'json') {
     die(json_encode($this->viewVars));
  }
  else {
     $this->layout = 'ajax';
  }
}

Wenn es sich um einen Ajaxaufruf handelt $this->RequestHandler->isAjax() dann wird als erstes eine Debugausgabe verhindert Configure::write('debug', 0); (das sollte man sich merken!!) und dann überprüft, was für ein Datentyp zurück erwartet wird.

Wenn JSON Code angefordert wird, werden alle Variablen für den View in einem JSON Objekt zurück gegeben, andernfalls wird das Ajax Layout verwendet, welches einfach den View zurück gibt ohne das ganze HTML Gerüst.

Wichtig ist bei der Verwendung dieser Abfrage daran zu denken keine sensiblen Daten an den View zu übergeben und dort zu prüfen ob der Nutzer die Daten sehen darf oder nicht. Aber da wir ja alle strikt dem MVC Pattern folgen, ist das ja auch gar nicht möglich.

Das Layout

Okay, jQuery keine Frage:

echo $this->Javascript->link(array(
  'jquery.min'
));

Die Endung .js kann man sich sparen, Cake sucht die angegebenen Dateien automatisch im Ordner /app/webroot/js/.

Zur angenehmen Verteilung des Inhalts benutze ich jetzt immer das 960.gs CSS Framework. Es gibt einen grandiosen Konfigurator mit dessen Hilfe man sich sehr schnell ein passendes Grid zusammenstellt. Die erzeugte CSS Datei legt man im Ordner /app/webroot/css/ ab und bindet sie mit Hilfe des HTML Helpers ein.

Außerdem benutze ich den CSS Reset von Eric Meyer um eine einheitliche Ausgangslage in allen Browsern zu erreichen. In der Datei layout.css binde ich dann je nach Komplexibilität weitere CSS Dateien über import url() ein.

echo $this->Html->link(array(
  '960',
  'reset',
  'layout'
));

Um in jQuery immer die richtige Baseurl für Ajaxanfragen zur Verfügung zu haben, nutze ich das Base Tag:

<base href="http://<?=env('HTTP_HOST').$this->base?>/" />

HTML Gerüst

Das 960.gs verlangt einen umfassenden Container mit der Klasse container_XX, wobei das XX für die Anzahl der Spalten steht. Was sich außerdem bewäht hat ist, Controller und Action als Klasse auszugeben um per CSS einzelne Ansichten individuell gestallten zu können. In meinem Layout führt das zur folgenden Monsterzeile:

<div id="wrap" class="container_16 <?=$this->params['controller']?> <?=$this->params['action']?> <?=$this->params['controller']?><?=ucfirst($this->params['action'])?>">

Alle Views des Controllers Blogs haben jetzt die Klasse #wrap.blogs. Und jede einzelne View lässt sich mit #wrap.blogsAdd gezielt ansprechen. Außerdem können auch alle Formular zum hinzufügen von neuen Einträgen angesprochen werden: #wrap.add form.

Damit ist man schon sehr flexibel.

Noch ein Satz zu 960.gs: die Aufteilung des Inhalts in Spalten erfolgt über das verteilen von Klassen. Diese haben immer das Format grid_XX, darauf folgt immer ein Container mit der Klasse clear.

<div class="grid_8">Linke Hälfte</div>
<div class="grid_8">Rechte Hälfte</div>
<div class="clear"></div>

Das teilt den Inhalt in zwei gleiche Teile. Es ist über die Klassen pull_XX und push_XX auch möglich Abstände einzufügen. Einfach ein bisschen rumspielen.

Hilfe und Informationen

Alle Core Components und Helper liegen bestens dokumentiert in eurem Projekt! Um schnell zu erfahren wie die verdammte Funktion im RequestHandler heißt, öffnet man einfach die entsprechende Datei in /cake/libs/controller/components/.

Im Verzeichnis /cake/libs/ ist Cake genau so aufgebaut wie im eigenen Ordner /app/. Daran muss man unbedingt denken und diese wertvolle Quelle nutzen. Aber: niemals Änderungen vornehmen!!! NIEMALS. Absolut verboten, denn damit verliert man die Updatefähigkeit. Alle Dateien die man anpacken darf liegen im /app/ Ordner. Wenn man jetzt wirklich nicht drum rum kommt und zum Beispiel im Time Helper etwas ändern muss, dann kopiert man die komplette Datei und legt sie in den Ordner /app/views/helpers/. Jetzt darf man sie verändern wenn es unbedingt sein muss.

Unter http://www.cakephp.org findet man eine ganze Reihe nützlicher Links und Ressourcen, dass ist ja klar. Für deutschsprachige Cake Entwickler bietet sich außerdem noch das CakeForum an, da bin ich auch ab und zu unterwegs.

Fazit

CakePHP ist ein grandioses Framework, die aktuelle Version 1.3 macht großen Spaß und ich kann es kaum erwarten das unsere Projekte endlich das digitale Licht des Internets erblicken.

Infohäppchen gibt es in meinem Twitter Account, richtig gute Hilfe und Unterstüztung leistet die Ape Unit GmbH gegen Bares oder Mitarbeit und wenn du einen Job suchst, dann freue ich mich auf einen Besuch auf unserer Seite der offenen Stellen!

Frohes backen!

Zum Beispiel in einem Tool welches umfangreiche Exportmöglichkeiten besitzt und gerade von einer jungen, dynamischen Agentur entwickelt wird. In dem Programm legt man ein Exportscript an und kann diesem verschiedene Exportdateien zuweisen die beim durchlaufen dynamisch erstellt werden.

Diese einfache 1:n Beziehung ist mit Cake schnell gebacken, mit ein paar Zeilen erweitert und läuft. Allerdings verteilt auf mehreren Seiten. Zum Glück gibt uns Cake einfache Möglichkeiten an die Hand um das zu verhindern.

In diesem Artikel will ich aufschreiben wie man praktisch jedes Cake Projekt zusammen mit dem Lieblings-Javascriptframework jQuery in eine coole Web 2.0 Anwendung verwandeln kann.

Grundlagen

Ich gehe mal von einer laufenden Cakeanwendung aus. Da gibt es die Tabelle Export und die Tabelle Exportfiles. Die beiden sind über eine 1:n Beziehung verknüpft, die Anwendung wurde gebacken und man verfügt über die normalen CRUD Funktionen.

Wenn Interesse an einem Tutorial dazu besteht, wäre ein kurzer Hinweis in den Kommentaren oder per Mail nett.

Der AppController

Den schönsten Teil bringt Cake schon mit: den RequestHandler. Mit dessen Hilfe kann man auf Ajaxanfragen reagieren. Als erstes muss er in der Datei app/app_controller.php eingebunden werden:

$components = array('RequestHandler');

Anschließend stehen in jedem Controller über $this->RequestHandler umfangreiche Möglichkeiten zur Verfügung. Besonders toll wirds im Callback beforRender(). Dieser wird im AppController definiert und von Cake automatisch aufgerufen, wenn die Logik im entsprechenden Controller abgearbeitet wurde.

So sieht die Killerfunktion aus:

function beforeRender() {
  if($this->RequestHandler->isAjax()) {
     Configure::write('debug', 0);
     if($this->RequestHandler->prefers() == 'json') {
        die(json_encode($this->viewVars));
     }
     else {
        $this->layout = 'ajax';
     }
  }
}

Was hier passiert ist so gut wie selbsterklärend: Wenn es sich um eine asynchrone Anfrage handelt if($this->RequestHandler->isAjax()), dann wird als erstes jegliche Debugausgabe verboten. Das muss man sich unbedingt merken, sonst besteht die Gefahr auszuflippen weil debug() "aufeinmal" nichts mehr ausgibt. Auf der anderen Seite kann man aber nicht mit einem JSON String in Javascript weiterarbeiten, wenn dem ein Datenbanklog am Hintern an der schließenden Klammer klebt. Also nicht vergessen!

Nach dem Cake weiß, das es eine Ajaxanfrage bearbeitet, wird geprüft, welche Rückantwort erwartet wird $this->RequestHandler->prefers(). Wenn diese JSON ist, werden alle viewVars, dass sind alle Variablen die über $this->set() im Controller gesetzt wurden, als JSON Objekt zurück gegeben. Damit stehen dem Javascript alle Informationen zur Verfügung die sonst im View verarbeitet werden. Toll oder?

Dieses die(json_encode()) finde ich noch nicht ganz so elegant wie der ganze Rest von Cake, tut aber seine Arbeit. Vielleicht hat jemand einen schöneren Ansatz?!

Wenn die Anfrage kein JSON erwartet, wird nicht das Standardlayout genutzt, sondern auf das Ajax umgeschaltet. Das befindet sich in der Datei app/views/layouts/ajax.ctp und besteht nur aus einer Zeile:

<?php echo $content_for_layout; ?>

Standardlayout

Um Probleme beim ändern der BaseURL zu vermeiden habe ich mir angewöhnt im Standardlayout das Tag base zu verwenden um mit jQuery schnell auf die URL zugreifen zu können. In der Datei app/views/layouts/default.ctp muss dafür folgende Zeile hinzugefügt werden:

<base href="http://<?=$_SERVER['HTTP_HOST']?><?=$this->base?>/" host="http://<?=$_SERVER['HTTP_HOST']?>" />

Ich weiß, das Attribut host verhindert eine komplette Validierung, allerdings brauche ich in einigen Fällen nur den Host und in anderen die komplette BaseURL, da zum Beispiel die erstellen Formulare mit $form->create(...) schon die BaseURL enthalten.

Das wird man gleich sehen.

jQuery Action

Da sind jetzt in wenigen Zeilen mächtige Grundlagen gelegt worden, die man mit jQuery an seiner Seite ausnutzen möchte. Im Formular zur Erstellung eines neuen Exports habe ich ein Button "Neue Exportdatei", die bei Klick in den Container div#new das Formular lädt um eine neue Datei zu speichern. Nichts leichter als das:

$ajax({
  url: $('base').attr('href')+'exportfiles/add/export:'+$('#ExportEditForm').attr('rel'),
  dataType: 'html',
  success: function(form) {
      $('#new').html(form);
  }
};

Als benannten Parameter wird die ID des aktuellen Exports übergeben. Im Controller steht diese Information im Array $this->params['named'] zur Verfügung. Von da wird sie an den View übergeben und hier wird, sofern gesetzt ein verstecktes Formularfeld erzeugt, anstatt der gebackenen Liste der vorhandenen Exports.

Mit der Verwendung des Ajax-Layouts und der Angabe dataType: 'html' steht in der Variable form der Success Funktion genau das Formular zur Verfügung, welches im View definiert wurde.

JSON benutzen

Wenn das Formular ausgefüllt wurde, muss man das Abschicken abfangen. Leider unterstützt die Live Funktion noch nicht den Event submit, deshalb muss man sich mit einem Klick auf den Submitbutton helfen.

$('#new .submit input').live('click', function() { ... });

Das wirklick spannende ist natürlich auch hier die Ajaxanfrage und das Geheimnis liegt im dataType: 'json'.

$.ajax({
  url: $('base').attr('host')+$form.attr('action'),
  data: $form.serialize(),
  type: 'POST',
  dataType: 'json',
  success: function(content) {
    if(content.saved) {
        $form.closest('fieldset').prev().find('ul')
            .find('li.empty').remove().end()
            .append('<li>Neuer Eintrag <b>'+$form.find('input[type=text]:first').val()+'</b> angelegt.</li>');
    }
    else {
        alert("Leider ist ein Fehler beim speichern aufgetreten.");
    }
  }
});

In der Variable $form ist das jQuery Objekt gespeichert, welches das Formular widerspiegelt, dass gerade abgeschickt wurde. Da man immer wieder darauf zugreifen muss, macht es Sinn das in eine Variable zu legen um Zeit bei der Abarbeitung zu sparen.

In der Variable content stehen jetzt dank AppController und RequestHandler alle View-Variablen zur Verfügung. Über das Auslesen des Attributs Action des Formulars muss man sich nicht mal mehr Gedanken machen wo das Formular überhaupt abgearbeitet wird. Wichtig ist nur das in der entsprechenden Funktion ein Status gesetzt wird:

$this->set('saved', true);

Fazit

Nach genau dem gleichen Prinzip funktioniert auch das Löschen oder jeder andere Anwendungsfall der einem einfällt. Ich bin im Moment mal wieder begeistert von diesen beiden tollen Frameworks und den schier unerschöpflichen Möglichkeiten.

Demnächst gibt es dann hoffentlich mal die Vorstellung von einem fertigen Tool. Bis dahin freue ich mich auf Fragen und Verbesserungsvorschläge. Vielen Dank fürs lesen!

Da hilft nur eins: während der Eingabe dem Benutzer direkt passende Tags vorschlagen. Eine automatische Vervollständigung wie beim Mailen in den großen sozialen Netzwerken oder beim suchen bei Google.

Zum Glück haben sehr schlaue Leute schon diverse Plugins erstellt, welche einen JSON String oder eine simple Textliste verarbeiten können. Zum Beispiel Autobox2. Gleich mal die Demo angucken, runterladen und dann ins eigene Projekt integrieren.

So funktionierts...

Vorbereitung

Bestimmt ist jQuery schon im gesamten Projekt verfügbar, wenn nicht, muss es unter views/layouts/default.ctp mit Hilfe des Javascript Helpers eingebunden werden:

echo $javascript->link('jquery.min');
echo $javascript->link('jquery.action');
echo $scripts_for_layout;

Der Javascript Helper sucht die Dateien automatisch im Ordner webroot/js/ und bindet sie ein, sofern sie vorhanden sind. In der Datei jquery.action.js befindet sich mein eigenes Script in dem das Verhalten der Seite gesteuert wird.

Sehr wichtig für den nächsten Schritt ist die Ausgabe der Variable $scripts_for_layout. Diese kann von jedem View aus befüllt werden. Das brauchen wir im View der Edit/Add Methode vom Model:

$javascript->link(array(
  'jquery.templating',
  'jquery.ui.autobox.ext.js',
  'jquery.ui.autobox.js'
), false);

Damit werden die Javascript Dateien nicht überall eingebunden, sondern nur auf den Seiten auf denen sie auch benötigt werden.

Nach dem gleichen Prinzip, aber mit dem HTML Helper wird die Autobox CSS Datei eingebunden.

$html->css('jquery.ui.autobox.css', null, array(), false);

Und da wir gerade dabei sind, bietet es sich an diese Datei zu öffnen und in der Zeile 66 den Pfad zum close.gif anzugeben. Wenn sich alles in den korrekten Ordnern befindet ist es einfach:

background: url('../img/close.gif');

Aussehen wird es gut, aber im Moment weiß das Script nicht wo es sich befindet. Damit die Baseurl auch in Javascript zur Verfügung steht, habe ich mir angewöhnt im HTML Gerüst das Basetag zu erweitern:

<base href="http://<?=$_SERVER['HTTP_HOST']?><?=$this->base?>/" host="http://<?=$_SERVER['HTTP_HOST']?>" />

Mit dieser Zeile im Layout wird später vieles einfacher. Leider validiert es mit dem Attribut host nicht mehr, wer darauf Wert legt, muss sich also eine andere Lösung überlegen.

jQuery Action

Jetzt gehts los und das Plugin wird initalisiert. Ich mache das gerne in der Datei jquery.action.js. Um es auf die schnelle zu testen, kopiere ich einfach das Beispiel aus der Demo. Gemäß des letzten Posts zu HABTM heißt mein Feld temp_tags. Das resultiert in der ID ModelTempTags:

jQuery(function($) {
  
  var list1 = [{text: 'Curious George'}, {text: 'George of the Jungle'}, {text: 'Felix the Cat'}];
  
  $('#ModelTempTags').autobox({
    list: list1,
    match: function(typed) { return this.text.match(new RegExp(typed, "i")); },
    insertText: function(obj) { return obj.text },
    templateText: "<li>Hey: <%= text %></li>"
  });
});

Seite neuladen, und... herrlich! Funktioniert. Nur eine Kleinigkeit: Die vorhandenen Tags werden nicht übernommen. Zum Glück hilft eine einzige Zeile um das Problem zubeheben. Innerhalb der Autobox Konfiguration wird die Vorbelegung (prevals) angegeben:

prevals: $('#LinkTempTags').val().split(', ')

Mit dieser Zeile wird der Inhalt ausgelesen, beim Komma geteilt und der Autobox als Vorbelegung übergeben. Dann kanns jetzt losgehen mit der asynchronen Datenübertragung. Das Attribut list in der Autobox Konfiguration wird ausgetauscht mit einer URL:

ajax: $('base').attr('href')+'tags/index',

Damit wird im Parameter val die Benutzereingabe an den Tags Controller geschickt. Und der muss jetzt noch reagieren.

Antworten mit CakePHP

Der Controller Tags ist dafür zuständig eine Liste zu genierieren. In der Variable $this->params['url']['val'] steht die Benutzereingabe zur Verfügung. Mit der wird eine Datenbankabfrage gestartet:

$tags = $this->Tag->find('all', array('conditions' => array('title LIKE' => $this->params['url']['val'].'%'), 'order' => 'Tag.title ASC'));

Mit Hilfe der RequestHandler Componente wird ein Ajaxaufruf erkannt. Dafür muss die Componente im Controller eingebunden werden.

class TagsController extends AppController {
  var $components = array('RequestHandler');

In der Index Funktion wird bei einem Ajaxaufruf der Renderingprozess gestoppt und purer Text zurück gegeben.

if($this->RequestHandler->isAjax()) {
  Configure::write('debug', 0);
  $this->autoRender = false;
  return '['.implode(',', Set::format($tags, '{text: "{0}"}', array('{n}.Tag.title'))).']';
}

Besondere Aufmerksamkeit verdient die letzte Zeile. Implode bekommt ein Array, das aus dem Core Utility Set stammt: Format. Eine großartige Funktion die ein verschachteltes Array umformatiert. In diesem Fall zu JSON Objekten, welche dann mit einem Komma verbunden werden.

Das wars! Kaum zu glauben, aber ein Neuladen macht die Einbindung komplett. Und den Webentwickler fröhlich!

Speichern im Model

Das Plugin erstellt für jeden Tag ein verstecktes Formularfeld, welches den gleichen Namen hat wie das Ursprungsfeld. Damit die eingegebenen Daten übertragen werden, muss der Name auf ein Array hinweise:

echo $form->input('temp_tags', array('name' => 'data[Model][temp_tags][]');

Der Trick sind die beiden eckigen Klammern am Ende. Damit steht die Eingabe im Model als Array zur Verfügung:

debug($this->data['temp_tags']);

Es ist jetzt also sehr leicht möglich die Mails aus einem Postfach auszulesen. Im folgenden Beitrag wird gezeigt wie.

Grundlagen

Das installierte PHP muss IMAP unterstützten. Das lässt sich herausfinden in dem die Funktion imap_start() aufgerufen wird. Wenn die Funktion exsistiert ist alles okay.

Die IMAP Componente muss in dem Ordner app/controllers/components/ mit dem Dateinamen Imap.php gespeichert werden.

Benutzen

In einem beliebigen Controller wird die Componente wie gewohnt geladen.

$components = array('Imap');

In einem Shellprogramm (abgelegt in app/vendors/shells/) muss die Componente über Import reingeholt werden:

App::import('Component', 'Imap');
$this->Imap = new ImapComponent();

Verbinden

Die Componente erwartet ein Array mit den Zugangsdaten zum Postfach.

private $imap_config = array(
  'imap_user' => 'test@kiwi-service.de',
  'imap_pass' => 'total-geheimes-supersicheres-passwort',
  'imap_flags' => '',
  'imap_mailbox' => 'test@kiwi-service.de',
  'imap_server' => 'kiwi-service.de',
  'imap_port' => '143'
);

Die einzelnen Keys sind ja selbsterklärend. Nur die Componente muss sie noch wissen. Das geschieht per Übergabe eines Arrays:

$this->Imap->items($this->imap_config);

Oder einzelnd mit

$this->Imap->item('imap_user', 'test@kiwi-service.de');

Wenn alle Daten gesetzt sind, wird zum Postfach verbunden.

$this->Imap->connect();

Der Rückgabewert dieser Funktion ist negativ wenn es nicht funktioniert hat.

Emails bekommen

Die Anzahl der neuen Nachrichten liefert die Funktion msg_count().

Eine Liste aller Nachrichten liefert die Funktion msg_list(). Das Ergebnis ist ein mehrdimensionales Array und kann in einer Schleife durchgegangen werden.

$messages = $this->Imap->msg_list();
foreach($messages as $message) {
  debug('Titel: '.$message['title']);
}

Eine gute Hilfe gegen verrückte Sonderzeichen und Kodierungen ist die Kombination von utf8_encode und quoted_printable_decode. Damit werden die meisten Umlaute richtig dargestellt.

Für den Text der Mail wäre das dann innerhalb der foreach-Schleife

debug(utf8_encode(quoted_printable_decode($message['body'])));

Ende

Zu guter letzt sollte dann auch noch die Verbindung wieder getrennt werden.

$this->Imap->close();

Auch hier ein negativer Rückgabewert wenn es nicht funktioniert hat.

Die Klasse bietet noch einige Funktionen, wer auf der suche ist sollte da mal einen Blick rein werfen.

Ansonsten, frohes Backen!

Mit der folgenden Anleitung bekommt ein beliebiges Model die Möglichkeit Tags zu speichern, inklusive Has and belongs to many Beziehung.

Anforderungen

Alle Einträge der Datenbank Posts (z.B.) sollen mit einer beliebigen Anzahl Tags beschrieben werden können. Die Tags werden in einer eigenen Datenbank gespeichert. Die Relationen zu den Einträgen wird in einer weiteren Datenbank gespeichert.

Zur komfortablen Eingabe sollen die Tags mit Komma getrennt eingegeben und bearbeitet werden. In der Ausgabe sollen alle Tags als Array zur Verfügung stehen.

Die Datenbanken

Eine Datenbank ist bereits vorhanden welche alle Posts speichert.

Die Tags bekommen eine eigene Datenbank mit den Spalten id (primary, auto_increment) und name.

Um CakePHP die Magie zu ermöglichen muss die dritte Tabelle, zum speichern der Relationen, tags_posts heißen. Sie beinhaltet die Spalten tag_id und post_id.

Das Model

Das Model der Tags ist denkbar einfach:

<?
  class Tag extends AppModel {
    var $name = 'Tag';
    
    $hasAndBelongsToMany = array('Post');
  }
?>

Die Schönheit ist in der letzten Zeile: $hasAndBelongsToMany = array('Post'); hier wird dem Model erklärt das es zum Model Post gehört und dementsprechend wird die Datenbank tags_posts erwartet.

Das Model Post kriegt die gleiche Informationen, in umgekehrte Richtung:

$hasAndBelongsToMany = array('Tag');

Speichern von Tags

Jetzt wird es spannend! Die Tags sollen kommaspeariert eingegeben werden und beim speichern automatisch auseinander geschnitten werden. Dazu wird im View der Funktionen add und edit der Posts ein neues Element angelegt. Ich nenne es temp_tags.

echo $form->input('temp_tags', array(
  'label' => 'Tags (mit Komma trennen)',
));

Die Verarbeitung des Feldes erfolgt im Model von Post und zwar in der Funktion beforeSave(). Diese wird ausgeführt bevor ein Datensatz gespeichert wird.

function beforeSave() {
  // hier gehts ab!
}

Als erstes wird überprüft ob das Feld temp_tags überhaupt existiert. Ist dies der Fall wird in der Variable $tags ein Array gespeichert, aufgeteilt nach Komma. Anschließend wird die Variable temp_tags aus dem Datensatz gelöscht:

if(isset($this->data[$this->name]['temp_tags'])) {
  $tags = explode(",", $this->data[$this->name]['temp_tags']);
  unset($this->data[$this->name]['temp_tags']);

Ich habe auf die Daten über $this->data[$this->name] zugegriffen. Das ermöglicht die Kopie der gesamten Funktion in das nächste Projekt ohne sich noch einmal Gedanken über die Namen machen zu müssen.

Das Array $tags wird jetzt Element für Element untersucht. Dabei sollen keine Leerzeichen stören (trim).

foreach($tags as $tag) {
  $tag = trim($tag);
}

Der erste Schritt besteht darin herauszufinden ob der Tag schon vorhanden ist und wenn ja, für die neue Relation die ID herauszubekommen.

$id = $this->Tag->findByName($tag);

Wenn das nicht geklappt hat wird das Model Tag darauf vorbereitet einen neuen Eintrag zu speichern (create) und muss es dann auch sofort tun.

if(!$id['Tag']['id']) {
  $this->Tag->create();
  $this->Tag->save(array('name' => $tag));
  $id['Tag']['id'] = $this->Tag->id;
}

In Normalfall steht jetzt aufjedenfall in der Variable $id['Tag']['id'] die ID des Tags. Entweder weil es ausgelesen wurde, oder weil ein neuer Eintrag erzeugt wurde.

Das wird jetzt dem Model mitgeteilt

$this->data['Tag']['Tag'][] = $id['Tag']['id'];

Fehlt nur noch die ggf. definierte Elternmethode und eine positive Rückmeldung.

parent::beforeSave();
return true;

Fertig!

}

Das Auslesen im View geschieht von alleine durch die habtm Beziehung. Eine reine Freude dieser PHP Kuchen. Nicht vergessen die Daten zu überprüfen und zu sichern, wenn dieser Schnippsel auf einer öffentlichen Seite zum Einsatz kommt!

Hier noch mal der gesamte Quelltext der Funktion beforeSave():

  function beforeSave() {
    //Kommaseparierte Liste von Tags als Tags speichern
    if(isset($this->data[$this->name]['temp_tags'])) {
     $tags = explode(",", $this->data[$this->name]['temp_tags']);
     unset($this->data[$this->name]['temp_tags']);

     foreach($tags as $tag) {
      $tag = trim($tag);

      //ID vorhanden oder nicht?
      $id = $this->Tag->findByName($tag);
      if(!$id['Tag']['id']) {
        //Tag neu anlegen
        $this->Tag->create();
        $this->Tag->save(array('name' => $tag));
        $id['Tag']['id'] = $this->Tag->id;
      }

      $this->data['Tag']['Tag'][] = $id['Tag']['id'];
     }
    }

    parent::beforeSave();
    return true;
  }

Nun gibt es aber beim aktuellen Projekt folgendes Problem: Einem Projekt wird ein Kunde zugeordnet und jedes Projekt kriegt einen Ansprechpartner. Dieser Ansprechpartner ist in der User-Datenbank gespeichert und besitzt eine ID zu einem Kunden.

Legt man ein neues Projekt an und wählt einen Kunden aus, sollen nur noch die passenden Ansprechpartner angezeigt werden.

Nichts leichter als das! Hier stelle ich meine sehr flexible Möglichkeit für die Umsetzung mit jQuery und CakePHP vor. Grundwissen allerdings vorrausgesetzt.

Vorbereitungen

(Alle CakePHP Pfadangaben beziehen sich auf den app/ Ordner)
jQuery muss eingebunden werden. Dafür will ich den Ajaxhelper benutzen. Da das gesamte Projekt mit jQuery arbeiten soll, habe ich es für alle Controller auf einen Schlag eingebunden, und zwar in der Datei app_controller.php.

class AppController extends Controller {
  var $helpers = array('Ajax');
}

Die Javascriptdateien kommen in den Ordner /webroot/js/ und sind anschließend im Default Layout (oder welchem auch immer) in der Datei views/layouts/default.ctp schnell eingebunden:

echo $javascript->link(
  array(
    'jquery.min.js',
    'jquery.action.js',
  )
);

Damit der absolute Pfad der Anwendung in der JavaScript Datei zur Verfügung steht, wird im Layout das Tag <base> gesetzt. Das wird dann ausgelesen:

<base href="http://<?=$_SERVER['HTTP_HOST']?><?=$this->base?>/" />

Das Formular

Um für das neue Anlegen und das Bearbeiten von Projekten nicht zwei Formulare pflegen zu müssen, habe ich das Formular in ein Element ausgelagert, es befindet sich jetzt in der Datei views/elements/projectform.ctp und wird im View add.ctp und edit.ctp mit dem Befehl

echo $this->element("projectform");

eingebunden. Die Datei selbst besteht, gekürzt, aus folgenden Zeilen:

$c = array('') + $customers;
echo $form->input('customer_id', array(
  'class' => 'relation',
  'rel' => 'ProjectContact',
  'data' => 'users|customer_id',
  'options' => $c
));
echo $form->input('contact', array(
  'options' => $contacts
));

In der ersten Zeile wird das Array $customers, welches im Controller gesetzt wurde, um ein leeres Element am Anfang erweitert. Als nächstes folgen ein paar Erweiterungen für das zu erzeugende HTML Element auf die mit jQuery dynamisch zugegriffen wird.

'class' => 'relation' ist der grundlegende Hinweis für jQuery das hier was passieren soll.
'rel' => 'ProjectContact' bezeichnet die ID des Selectors welches die dynamischen Inhalte darstellt.
'data' => 'users|customer_id' enthält zwei Teile: users steht für das Model aus dem die Daten gezogen werden, customer_id ist die Spalte die mit dem Wert dieser Selectbox verglichen wird.
'options' => $c weißt dann nur noch das neue Array dem Element hinzu.

jQuery Action

Weiter gehts in der Datei webroot/js/jquery.action.js. Als erstes muss die Baseurl ausgelesen werden.

if($("base").length == 1)
  BASEURL = $("base").attr("href");
else {
  alert("Keine BaseUrl gefunden!!!");
}

Als nächstes kommt die geballte Action für die Selectbox. Erstmal der ganze fette Block jQuery-Schönheit vorweg, anschließend Zeile für Zeile erklärt. Für weitere dynamische Selectboxen muss man diesen Code dann nicht mehr anpassen:

$("select.relation").each(function() {
  //Vorhandene Elemente entfernen
  target = "#"+$(this).attr("rel");
  $(target).find("option").remove();

  //Eventhandler binden
  $(this).change(function() {
    $(target).find("option").remove();

    //Ajaxanfrage abschicken
    data = $(this).attr("data").split("|");
    val = $(this).val();
    if(val > 0) {
      $.ajax({
        url: BASEURL+data[0]+'/get/',
        data: {field: data[1], value: val},
        dataType: 'json',

        success: function(j) {
          $.each(j, function(i) {
            $(target).append('<option value="'+i+'">'+this+'</option>');
          });
        },
        error: function(e) {
          alert("Fehler bei der Ajaxanfrage! Siehe Konsole.");
          console.log(e);
        }
      });
    }
  })
});

$("select.relation").each(function() { Jede Selectbox mit der Klasse relation dient als Auslöser und braucht spezielle Behandlung.
In der Variable target wird die ID der zu ändernde Selectbox, für die spätere Verwendung gespeichert "#"+$(this).attr("rel");
$(target).find("option").remove(); entfernt die vorhandenen Einträge.

Jetzt wird der Selectbox ein Eventhandler zugewiesen, der ausgeführt wird, sobald sich der Inhalt der Selectbox ändert: $(this).change(function() {.
Falls es die zweite Änderung ist, müssen vorhandene Inhalte entfernt werden $(target).find("option").remove(); und per Ajax neue Inhalte geladen. Die Variable val speichert die aktuelle Auswahl und data beinhaltet die Informationen von weiter oben. Wenn eine gültige ID ausgewählt wurde, dann wird die Ajaxanfrage gesendet.

url: BASEURL+data[0]+'/get/', gesucht wird die Funktion get im Controller data[0] (im Beispiel = users).
data: {field: data[1], value: val}, für die Datenabfrage wird field und value standardmäßig per GET übergeben
und als Rückgabe ein JSON String erwartet dataType: 'json'.

Wenn die Anfrage erfolgreich war, wird diese Funktion ausgeführt: success: function(j) {
j beinhaltet das erhaltene JSON Array und wird Schritt für Schritt durchgegangen $.each(j, function(i) { um dem Zielelement target eine neue Option hinzuzufügen $(target).append('<option value="'+i+'">'+this+'</option>');

Danach folgt noch ein Errorhandler, der je nach belieben gestalltet werden kann, im Großen und Ganzen aber uninteressant ist.

Das wars schon. Jetzt gehts in den Controller User unter controllers/users_controller.php.

Im Controller

In der URL habe ich die Funktion get genannt, also muss sie hier definiert werden:

class UsersController extends AppController {
  function get() {
  }
}

Als erstes wird wie gewohnt eine Liste von Daten aus dem Model gezogen:

$list = $this->User->find('list', array(
  'conditions' => array(
    'User.'.$this->params['url']['field'] => $this->params['url']['value']
  )
));

Und jetzt wird es spannend, mit Hilfe der RequestHandler Komponente, die in der Datei app_controller.php oder constrollers/users_controller.php eingebunden wird.

var $components = array('RequestHandler');

Jetzt steht das Objekt $this->RequestHandler zur Verfügung, mit dessen Hilfe z.B. abgefragt werden kann ob die ankommende Anfrage per Ajax gesendet wurde. Wenn dies der Fall ist, darf es keine Debugausgaben mehr geben und die Liste soll als JSON String ausgegeben werden. Und so versteht das auch CakePHP:

if($this->RequestHandler->isAjax()) {
  Configure::write('debug', 0);
  $this->autoRender = false;
  return json_encode($list);
}

Fertig! jQuery kriegt jetzt von der Funktion einen JSON String zurück und kann diesen, wie beschrieben, in die Selectbox einfügen.

Fazit

Diese Lösung ist nur ein Vorschlag und ich bin mir sicher das es viele verschiedene Lösungswege gibt. Wahnsinnig wichtig ist die Tatsache, dass hier kein bisschen auf die Sicherheit geachtet wurde. Dieses Beispiel sollte man nicht unverändert im Livebetrieb einsetzen!

Ich bin mir auch nicht sicher, ob der gewählte Weg der beste ist. Deshalb freue ich mich diesmal besonders über Kommentare mit Anmerkungen und Erweiterungen.

Frohes backen!