TaffyDB und serverseitige Daten synchronisieren

TaffyDB zeigt, wo die Reise hingeht: Mit der JavaScript Schnittstelle wird die Datenhaltung von Web-Applikationen in den Browser gehievt. Wer auf die serverseitige Speicherung nicht verzichten kann oder will, bekommt hier einen Eindruck, wie leicht TaffyDB mit jQuery zusammen als Datenbank-Interface für relationale Datenbanken werden kann.

TaffyDB ist eine CRUD (Create, Read, Update, Delete) Schnittstelle, die JavaScript Objekte zu Kollektionen zusammenfasst und sie komfortabel verwalten und durchsuchen lässt. Die Operationen erinnern namentlich stark an SQL, so dass die Einarbeitungszeit für altgediente Freunde relationaler Datenbanken auf ein Nichts minimiert. Die Daten sind flüchtig, also verloren, sobald die aktuelle Seite neu geladen oder verlassen wird. Dauerhafte Speicherung erzeugt man nur mit entsprechendem Zusatz, etwa Google Gears und/oder der Übertragung in eine Datenbank auf dem Server (z.B. MySQL oder CouchDB).

Eben diese Anbindung an eine – in diesem Beispiel – relationale Datenbank, erreicht man mit einer Handvoll Ajax und vordefinierten Hooks in TaffyDB selbst in Form von drei Methoden, die auf die Ereignisse Insert, Update und Remove reagieren. Den Ajax-Teil realisieren wir in jQuery, jedes vergleichbare JavaScript Bibliothek erledigt dies auf gleich einfache Weise. Im Beispiel sieht das wie folgt aus:


<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="taffy-min.js" type="text/javascript"></script>
<script type="text/javascript"><!--
var records = new TAFFY([])
records.onInsert = function (r) {
jQuery.ajax({
type: "POST",
url: "save.php",
data: "action=insert&b="+r.a,
success: function(msg){
alert( "Data Saved: " + msg );
}
});
};
records.onRemove = function (r) {
jQuery.ajax({
type: "POST",
url: "save.php",
data: "action=remove&b="+r.a,
success: function(msg){
alert( "Data deleted: " + msg );
}
});
};
// --></script>
Daten:
<input id="d" maxlength="30" name="d" size="30" type="text" value="zyx" />
<input onclick="records.insert({a:document.getElementById("d").value})" name="add" type="button" value="add" />
<input onclick="records.remove({a:document.getElementById("d").value})" name="remove" type="button" value="remove" />
<input onclick="records.forEach(function (f,n) {alert(f.a)});" name="show" type="button" value="show" />

Im JavaScript Teil definieren wir zuerst eine leere Kollektion durch die Instanziierung der Klasse TAFFY. Die Kollektion dient uns als Sammelbecken für Daten, die wir gemeinsam vorhalten und beispielsweise durchsuchen wollen – im relationalen Denkbild entspricht dies einer Tabelle. An dieser Stelle lassen sich schon Objekte vordefinieren, die im Folgenden jedoch nicht mit synchronisiert werden. Darüber hinaus belegen wir die Hooks zum Einfügen (onInsert) und Löschen (onRemove) mit Ajax Aufrufen. Damit werden Änderungen an der Kollektion Datensatz für Datensatz mit dem Bestand auf dem Server synchronisiert – namentlich durch Verarbeitung des Datensatzes im Skript save.php. Pro forma quittieren wir jede erfolgreiche Synchronisierung mit einem alert().

Der HTML Teil besteht aus einem Eingabefeld und drei Knöpfen, die den Inhalt des Textfeldes als Objekt an die Taffy Kollektion anhängen oder daraus entfernen. Der letzte Knopf gibt uns nach und nach alle Objekte der Kollektion aus.

Beim Drücken des add-Knopfes wird die Methode insert der Kollektion aufgerufen. Dies erweitert die Kollektion und sorgt für den Aufruf des Hooks onInsert, der die Daten darüber hinaus zum Server schickt. Der remove Knopf reagiert analog. Sicherheit der Synchronisation wird mit dieser einfachen Version des Skriptes nicht erreicht!

Serverseitig muss die Verarbeitung der Daten, die als POST Parameter daherkommen, durch das Skript save.php geschehen, die im Folgenden dargestellt ist.

< ?php
if($_POST['b'] != ""){
$fehler = "";
$sqldb = new SQLiteDatabase('test.sqlite2', 0666, $fehler);
if($_POST['action'] == "insert"){
$sqldb->queryExec("INSERT INTO d (b) VALUES ('".$_POST['b']."');", $fehler);
} elseif ($_POST['action'] == "remove"){
$sqldb->queryExec("DELETE FROM d WHERE b='".$_POST['b']."';", $fehler);
}
echo $_POST['b'];
}?>

Der Einfachheit halber werden Daten in einer SQLite v2 Datenbank hinterlegt. Je nach Ausprägung des Parameters action wird der (nicht leere) String b in die Datenbank eingefügt oder daraus gelöscht. Das Löschen beachtet dabei nicht, dass ein gleichlautender String vorab in der Tabelle vorhanden sein kann. Beim Löschen eines der Datensätze würden beide entfernt werden.

Advertisements