10.4 Ein Klient in Ajax 
Jetzt legen wir das PHP-Handbuch für wenige Minuten aus der Hand, denn die nächsten Seiten sind JavaScript und Ajax gewidmet.
| Ajax |
|
In der Welt der Webanwendungen steht Ajax für Asynchronous JavaScript and XML. Die Idee dahinter ist, dass der Browser statt ganzen HTML-Seiten nur Daten lädt, die gebraucht werden. Diese Daten werden dann in der aktuellen Seite verwendet. Die Daten werden in einen JavaScript-Programm mit dem Objekt XMLHttpRequest geladen. XMLHttpRequest kann entweder synchron oder asynchron aufgerufen werden. Bei einem synchronen Aufruf wartet das JavaScript-Programm (und somit meistens der ganze Browser), bis die Daten geladen werden. Bei einem asynchronen Aufruf läuft das Programm weiter. Während des Ladens der Daten werden Callback-Funktionen aufgerufen, in denen man die Daten verarbeiten kann. Die Möglichkeit, Daten in eine bereits geladene Seite asynchron nachzuladen, gibt es bereits mit Java-Applets und IFRAME seit den 90er Jahren. Ende des letzten Jahrhunderts implementierte Microsoft XMLHttpRequest als eine Ac-tiveX-Komponente. Bald zogen andere Browserhersteller nach. Den Namen Ajax gibt es erst seit 2005, und erst 2006 hat sich das W3C der Standardisierung des Objekts XMLHttpRequest angenommen. Obwohl das »x« in Ajax für XML steht, kann man mit dieser Technologie auch andere Datenformate laden. |
10.4.1 Bereitstellung der Daten
Wir haben jetzt eine Funktion programmiert, die uns die Kontakte eines Benutzers auflisten kann. Bevor wir diese Funktion von einem Klienten aufrufen können, müssen wir das Datenformat definieren, in dem wir die Daten übertragen. Hier bietet sich XML an, denn man kann es in PHP einfach erstellen und im Browser einfach verarbeiten. Eine beliebte einfachere Alternative zu XML in Ajax-Anwendungen ist JSON (JavaScript Object Notation).
Bernhard: Wofür entscheiden wir uns denn? Für XML oder JSON, und warum?Gregor: In PHP kann man beides einfach erzeugen, also hilft uns die Tatsache, dass wir die Daten in PHP erstellen, bei dieser Entscheidung nicht. Wir sollten uns darauf konzentrieren, was wir mit den Daten im Browser machen. Um die Kontaktdaten anzuzeigen, könnten wir sie im XML-Format einfach mit XSLT in die gewünschte HTML-Form transformieren. Um die Daten in JavaScript einfacher zu bearbeiten, ist es jedoch vorteilhafter, sie im JSON-Format zu übertragen.In unserer Anwendung werden wir die Daten mit JavaScript im Browser bearbeiten, also schlage ich vor, dass wir sie zuerst nach JSON übertragen. Glücklicherweise ist dies keine Entweder-Oder-Entscheidung. Wir können eine Schnittstelle bauen, die mehrere Formate unterstützt.
Bernhard: Sind XML und JSON die einzigen Formate, die wir in unserer Anwendung in Betracht ziehen sollten?
Gregor: Für unsere Beispielanwendung reichen erst einmal XML und JSON. In der Praxis findet man häufig auch andere Formate. Oft wird einfach HTML oder einfacher Text verwendet, der in bestimmte Elemente geladen wird. Beliebt ist auch JavaScript, mit dem man nicht nur Daten, sondern auch lauffähige Quelltexte übertragen kann.Wenn wir unsere Dienste auch anderen Klienten, also nicht nur dem Browser, zur Verfügung stellen wollten, könnten wir auch andere Formate und Aufrufprotokolle unterstützen. Um zum Beispiel aus unserem Dienst einen echten Webservice zu machen, könnten wir die Daten in SOAP [SOAP stand ursprünglich für »Simple Object Access Protocol«. Es ist ein XML-basiertes Protokoll für den Aufruf von Webservices. In SOAP kann man nicht nur die eigentlichen Nutzdaten übertragen, sondern auch zusätzliche Informationen, die für die Zustellung und Verarbeitung der Nachricht benötigt werden. Mehr über SOAP erfahren Sie unter http://www.w3.org/TR/soap/. Wenn Sie sich über die Standards und Empfehlungen informieren wollen, die es erlauben, zueinander kompatible Webservices zu bauen, empfehlen wir Ihnen diese Adresse: http://www.ws-i.org/ ] übertragen.
| JSON |
|
JSON steht für JavaScript Object Notation. Es basiert auf der Notation, in der in JavaScript Objekte und die Werte ihrer Eigenschaften initialisiert werden. Genauer gesagt ist JSON eine vereinfachte Version der Initialisierungsform der Objekte in JavaScript. In JavaScript kann man als Werte der Objekteigenschaften auch Funktionen, berechnete Ausdrucke und Referenzen auf Variablen angeben. Dagegen kann man in JSON ausschließlich Konstanten verwenden. In einem JavaScript-Quelltext kann man Kommentare verwenden, die JSON-Grammatik dagegen kennt keine Kommentare. Hier folgt das Beispiel eines in JavaScript korrekten Quelltextfragments, das in JSON jedoch nicht korrekt wäre: { "name" : lastName, // Referenz auf eine Variable
"age" : now() – 1970, // Ausdruck
"emails" : ["gregor.rayman@gmail.com"] // OK, ein Array9
"send" : function(text) { // Eine Methode
sendMail(this.email, text);
}
}Dieser Text dagegen wäre korrekt, sowohl in JavaScript als auch in JSON: { "name" : "Gregor",
"age" : 38,
["gregor.rayman@gmail.com", "rayman@grayman.de"]
}Obwohl es der Name anders suggeriert, kann man JSON in jeder Programmiersprache und nicht nur in JavaScript verwenden. Die Grammatik von JSON ist sehr einfach, und entsprechend leicht lassen sich die Parser in verschiedenen Programmiersprachen entwickeln. Als Beweis für diese Einfachheit geben wir hier die komplette Grammatik von JSON auf dem Seitenrand wieder. |
Vervollständigen wir also die erste PHP-Datei unserer Anwendung um die folgenden Zeilen, damit sie die aus der Datenbank geladenen Daten dem Klienten zurückgibt:
$kontakte = new Kontakte();
header('Content-type: text/plain; charset=UTF-8');
if ($_SERVER['REQUEST_METHOD'] == 'POST' &&
array_key_exists('kontaktid', $_POST)) {
$kontaktid = $_POST['kontaktid'];
} else if (array_key_exists('kontaktid', $_GET)) {
$kontaktid = $_GET['kontaktid'];
} else {
$kontaktid = -1;
}
echo json_encode($kontakte->auflisten($kontaktid)); Listing 10.4 Aufruf einer Operation unseres Dienstes
In Zeile erstellen wir ein Exemplar unseres Dienstes. In Zeile zeigen wir an, dass die Daten, die wir schicken, einfacher Text und kein HTML sind. [Dies ist eigentlich nicht notwendig, um die Daten in unserem JavaScript-Programm im Browser verarbeiten zu können. Während der Entwicklung ist es jedoch ganz angenehm, wenn der Browser die Daten als einfachen Text darstellt, wenn wir die Seite direkt aufrufen. ]
Der Quelltext ab Zeile ist dafür verantwortlich, den Parameter kontaktid aus dem Request abzufragen. Wenn kein Parameter kontaktid angegeben wurde, verwenden wir den Wert –1, der dafür sorgt, dass alle Kontakte des Benutzers zurückgegeben werden.
In Zeile geben wir schließlich die Daten im JSON-Format aus. Die Funktion json_encode ist in PHP ab der Version 5.2 ein Teil der Standardinstallation. In früheren Versionen kann sie nachinstalliert werden.
10.4.2 Darstellung der Daten
In unserer Anwendung wollten wir die Geschäftslogik von der Darstellungslogik trennen. Dies ist uns bisher gelungen, denn bis jetzt konnten wir uns ausschließlich der Geschäftslogik widmen, ohne die Darstellungslogik in Betracht zu ziehen.
Begeben wir uns nun auf die andere Seite unserer Trennlinie, und kümmern wir uns um die Darstellung der Kontaktdaten.
Wir fangen klein an, mit einer einfachen HTML-Seite, in die wir die Kontaktdaten einbetten werden:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/xhtml;charset=utf-8" />
<title>Kontakte</title>
<link rel="stylesheet" type="text/css" href="kontakte.css" />
<script type="text/javascript" src="jquery-1.3.js"></script>
<script type="text/javascript" src="kontakte.js"></script>
</head>
<body>
<h1>Kontakte</h1>
<div id="kontakte">
<!-- Hier werden die Kontaktdaten dynamisch geladen -->
</div>
</body>
</html>Listing 10.5 Die Datei »kontakte.html«
Trennung der Anliegen in HTML
Trennung der Anliegen in HTML: Struktur, Stil, Verhalten
In unserer Beispielanwendung möchten wir die Trennung der Anliegen demonstrieren. Wir haben bereits die Geschäftslogik von der Darstellungslogik getrennt. Mit der Trennung der Anliegen möchten wir innerhalb der Darstellungslogik weitermachen.
Eine HTML-Seite hat ihre Struktur, die als DOM-Struktur [DOM steht für »Document Object Model«. Es ist ein standardisiertes Objektmodell, mit dem man den Inhalt eines XML- oder HTML-Dokuments beschreiben kann. ] des HTML-Dokuments beschrieben werden kann. Wie in Zeile sichtbar, haben wir uns für die strikte Variante von XHTML entschieden, weil diese großen Wert auf die Trennung der Struktur von den anderen Aspekten einer HTML-Seite legt.
Den Stil, also die Farben, Zeichensätze, Ränder und andere visuelle Aspekte der HTML-Seite, beschreiben wir in der Datei kontakte.css, wie in Zeile angegeben.
Die Trennung der Anliegen Struktur und Darstellung gehört seit der Einführung der Cascading Style Sheets (CSS) zu den guten Praktiken jedes professionellen Webdesigners. Obwohl die kleinen Unterschiede in der Umsetzung des CSS-Standards der verschiedenen Browser manchmal Probleme bereiten, stellen die CSS ein großartiges Werkzeug für die Trennung der Struktur vom Stil einer HTML-Seite dar.
| Cascading Style Sheets (CSS) |
|
CSS ist eine Beschreibungssprache, mit der vor allem (aber nicht ausschließlich) die Darstellung von HTML- und XML-Dokumenten beschrieben wird. Das Ziel ist dabei, die Struktur der Dokumente von ihrer Darstellung zu trennen. So kann über CSS zum Beispiel festgelegt werden, wie bestimmte Elemente einer HTML-Seite in einem Browser formatiert und dargestellt werden. |
Für die Trennung des Verhaltens der Seite von ihren anderen Aspekten gibt es zurzeit keine standardisierten Verfahren. Man kann das HTML-Dokument mit JavaScript bearbeiten und den Ereignissen der HTML-Elemente JavaScript-Routinen zuweisen.
Eine Möglichkeit, wie man JavaScript-Routinen den Ereignissen der HTML-Elemente zuordnet, ist, die Attribute onEreignis wie zum Beispiel onclick oder onmouseover wie in folgendem Quelltext zu verwenden:
<button onclick="lert('Hello World');">Hello</button>Dies hat jedoch den Nachteil, dass die Struktur des Dokuments und sein Verhalten miteinander vermischt sind. Und das auch, wenn sich der Inhalt des onclick-Attributes auf einen Aufruf einer Funktion aus einer verlinkten JavaScript-Datei beschränkt.
Eine andere Möglichkeit, JavaScript den Ereignissen der HTML-Elemente zuzuweisen, besteht darin, die Werte der onEreignis-Attribute nicht direkt in den HTML-Quelltext einzugeben, sondern sie dynamisch in JavaScript zu setzen:
<button id="hiButton">Hi</button>
<script type="ext/javascript">
var button = document.getElementById('hiButton');
button.onclick = function(event) {
alert('Hi World');
};
</script>Diese Vorgehensweise ermöglicht es uns, das dynamische Verhalten der Seite von ihrer Struktur fast vollständig zu trennen. Das Einzige, was in der Struktur der HTML-Seite bleiben muss, ist ein Link auf die JavaScript-Datei, in der das dynamische Verhalten der Seite programmiert wird. Genau dies tun wir in Zeile unseres Quelltextes kontakte.html (Listing 10.5).
Wenn wir uns jedoch die zwei letzten Quelltextbeispiele anschauen, wird offensichtlich, warum viele die Verwendung der onEreignis-Attribute der Zuweisung der Ereignisse in JavaScript vorziehen: Die Verwendung der onEreignis-Attribute ist einfacher, der Quelltext ist kürzer und weniger fehleranfällig.
Wenn es bloß etwas gäbe, das es uns ermöglichen würde, das Verhalten von der Struktur der HTML-Seiten zu trennen und dabei unseren Quelltext genauso kurz und bündig zu lassen wie bei der Verwendung der onEreignis-Attribute!
jQuery
Glücklicherweise gibt es so etwas! JavaScript ist eine sehr mächtige Skriptsprache, und es gibt verschiedene Bibliotheken, die uns bei unserem Problem helfen können.
In unserer Beispielanwendung werden wir das zu Recht beliebte Framework jQuery verwenden:
| jQuery |
|
jQuery ist eine JavaScript-Bibliothek, die die Durchsuchung, Manipulation, Ereignisbearbeitung, Ajax-Interaktion und Animation von HTML-Seiten für uns vereinfacht. jQuery unterstützt alle einigermaßen modernen Browser, weswegen sich ein Webentwickler nicht mit den Unterschieden zwischen den einzelnen Browsern beschäftigen muss. Die vollständige Dokumentation finden Sie auf www.jquery.com, hier folgt le-diglich eine extrem verkürzte Einführung: Die wichtigste Funktion der Bibliothek jQuery ist die Funktion jQuery. Das Verhalten dieser Funktion ist abhängig von den Parametern: jQuery(selektor, context) gibt eine jQuery-Liste der Elemente des HTML-Dokuments bzw. des Kontextparameters zurück, die dem Selektor entsprechen. So gibt jQuery("p") eine Liste aller P-Elemente des Dokuments zurück, jQuery("#hiButton") eine Liste mit dem einzigen Element, das die Id hiButton hat, und jQuery("input[name *= 'neu']") eine Liste aller INPUT-Elemente, deren Name mit »neu« anfängt. jQuery(html) erstellt ein HTML-Element, das man anschließend in das HTML-Dokument einfügen kann: jQuery("<p>Hello</p>") erstellt also ein neues P-Element mit dem Text »Hello«. jQuery(func) stellt sicher, dass die Funktion func aufgerufen wird, wenn das HTML-Dokument vollständig geladen ist, jedoch noch bevor es angezeigt wird. Die jQuery-Liste, die von der Funktion jQuery(selector) oder jQuery(html) zurückgegeben wurde, stellt viele Methoden bereit, mit denen man alle ihre Elemente mit sehr wenig Quelltext manipulieren kann. So kann man zum Beispiel die Hintergrundfarbe aller H1-Elemente auf Gelb setzen: jQuery('h1').css('background-color', 'yellow') Um die Quelltexte noch etwas knapper zu halten, kann man statt jQuery auch das Dollarzeichen verwenden. Denn $ ist in JavaScript ein gültiger Bezeichner. So kann man den eben genannten Aufruf auch so schreiben: $('h1').css('background-color', 'yellow') |
Um mit jQuery das Ereignis Click auf der Taste mit einer JavaScript-Routine zu verknüpfen, kann man also Folgendes schreiben:
<script type="text/javascript">
$( function() {
$('#hiButton').bind('click', function(event) {
alert("Hi World");
});
});
</script>
<button id="hiButton">Hi</button>Immer noch ziemlich lang, nicht wahr? Nun, nur der fett dargestellte Quelltext verbindet das Ereignis Click mit der Taste hiButton.
Stellen wir uns aber vor, dass wir nicht nur eine Taste, sondern viele Tasten auf unserer Seite mit einer JavaScript-Routine verknüpfen möchten:
<script type="text/javascript">
$( function() {
$('.greet').bind('click', function(event) {
alert($(event.target).text() + " world");
});
});
</script>
<button class="greet">Hi</button>
<button class="greet">Hello</button>
<button class="greet">Good morning</button>In diesem Beispiel haben wir dem Ereignis Click aller Elemente, die der CSS-Klasse greet zugehören, eine Funktion zugeordnet, die die Welt mit dem Text des Elementes grüßt.
In diesem Beispiel sehen wir zwei jQuery-Selektoren: '.greet' in Zeile selektiert alle Elemente, die der CSS-Klasse greet zugehören. 'button.greet' würde nur die BUTTON-Elemente dieser Klasse auswählen.
In Zeile befindet sich ein Element, das wir bereits kennen – das Element event.target, das in unserem Beispiel die angeklickte Taste referenziert. Wozu soll das denn gut sein? Wir haben das Element doch bereits. $(event.target) gibt eigentlich nicht genau das Element event.target, sondern eine jQuery-Liste zurück, die viele nützliche Funktionen bereitstellt. In unserem Beispiel verwenden wir die Funktion text(), die den Textinhalt des angeklickten Elements zurückgibt.
Darstellung der Kontakte
Entwickeln wir jetzt die JavaScript-Routine, die unsere Kontakte mit Ajax lädt und sie an der richtigen Stelle der HTML-Seite einfügt. Die Datei kontakte.js wird in die Seite kontakte.html in Zeile in Listing 10.5 geladen.
$(function() {
$.getJSON('kontakte.php', kontakteAuflisten);
});Die jQuery-Funktion getJSON startet einen asynchronen Ajax-Aufruf. Wenn die Antwort des Aufrufes zurückkommt, werden die Daten an die Funktion kontakteAuflisten übergeben.
Wir können die Funktion getJSON nicht direkt in unser Skript einbinden, denn dann würde der Browser sie sofort aufrufen – noch bevor die HTML-Seite komplett geladen wäre und noch bevor das DIV-Element, in dem wir die Kontakte anzeigen wollen, geladen wäre. Deswegen betten wir den Ajax-Aufruf in eine anonyme Funktion in Zeile , die wir als einen Parameter der Funktion jQuery (in unserem Quelltext als $ abgekürzt) übergeben. Dies bewirkt, dass unsere anonyme Funktion erst aufgerufen wird, nachdem die HTML-Seite komplett geladen wurde, aber noch bevor sie angezeigt wird.
Implementieren wir jetzt die Funktion kontakteAuflisten:
$(function() {
function kontakteAuflisten(data) {
var kontakte = $("<ul>");
for (var id in data.daten) {
var kontakt = $("<li>");
kontakte.append(kontakt);
kontakt.append(
kontaktAnzeigen(id, data.daten[id])
);
}
$("#kontakte").append(kontakte);
}
$.getJSON('kontakte.php', kontakteAuflisten);
});Listing 10.6 Die Datei »kontakte.js«
Die Funktion kontakteAuflisten in Zeile ist innerhalb unserer anonymen Funktion deklariert – es ist also eine lokale Funktion, die nicht den globalen Namensraum unserer Anwendung »besetzt«. Die Deklaration entspricht der Deklaration einer lokalen Variablen, und wir könnten sie auch so schreiben:
var kontakteAuflisten = function(data) { ... }Der Aufruf $.getJSON('kontakte.php', kontakteAuflisten) stellt sicher, dass das JSON-Objekt, das von kontakte.php zurückgegeben wurde, als Parameter data an die Funktion kontakteAuflisten übergeben wird.
Wir werden die Kontakte in einer Liste darstellen; eine einfache Liste wird in HTML mit dem Element UL markiert, und ihre Einträge werden zu LI-Elementen. In den mit markierten Zeilen erzeugen wir solche Elemente wieder mit der Funktion jQuery beziehungsweise $.
Schließlich fügen wir mit der Funktion append die erzeugten Elemente anderen Elementen zu. In Zeile fügen wir also unsere komplette Liste der Kontakte zu der HTML-Seite hinzu, und zwar zu dem HTML-Element, das die Id kontakte hat.
Jetzt müssen wir nur die Funktion kontaktAnzeigen implementieren, die einen Kontakt darstellt. Wir möchten die Kontaktdaten editierbar machen, also werden wir sie in INPUT-Elementen darstellen. Wenn die Einträge mehrwertig sein dürfen, werden wir immer ein zusätzliches INPUT-Element hinzufügen, um neue Werte eintragen zu können.
function kontaktAnzeigen(id, kontakt) {
var dl = $("<dl>");
for (var i in kontakt) {
var eintraege = kontakt[i];
dl.append($("<dt>").text(eintraege.name + ":"));
if (eintraege.eintrag instanceof Array) {
for (var j in eintraege.eintrag) {
dl.append($("<dd>").append(
$("<input>")
.attr('name',
'bearbeitet[' + eintraege.eintrag[j].id + ']')
.val(eintraege.eintrag[j].wert)));
}
dl.append($("<dd>")
.append($("<input name='neu[" + id + "]["
+ eintraege.id + "]["
+ kontaktAnzeigen.neuerEintrag++ + "]' >")));
} else {
dl.append($("<dd>").append(
$("<input>")
.attr('name',
'bearbeitet[' + eintraege.eintrag.id + ']')
.val(eintraege.eintrag.wert)));
}
}
return dl;
};
kontaktAnzeigen.neuerEintrag = 0;Listing 10.7 Die Funktion »kontaktAnzeigen« in »kontakte.js«
Jeden Kontakt werden wir als eine Definitionsliste darstellen. Deswegen erzeugen wir in Zeile ein DL-Element. Die Namen der Eintragstypen fügen wir in diese Liste als DT-Elemente ein, die Werte der Einträge als DD-Elemente.
Verkettung der Aufrufe (Invocation Chaining)
In den Zeilen, die mit markiert sind, sehen wir eine Technik, die in jQuery so häufig verwendet wird, dass wir sie nicht unangesprochen lassen können: die Verkettung der Aufrufe (Invocation Chaining).
Wenn eine Methode eines Objekts nicht dazu dient, einen Wert zurückzugeben, so gibt sie einfach das Objekt selbst zurück. In unserem Beispiel verwenden wir die Methoden text, attr und val, die den Text oder ein Attribut von Elementen beziehungsweise den Wert von Formularfeldern setzen. Alle diese Methoden geben das Objekt, zu dem sie gehören, zurück. Auf diese Weise kann man den Aufruf dieser Methoden verketten und den Quelltext kompakter schreiben sowie sich viele temporäre lokale Variablen sparen. Übrigens, die Methode append verhält sich genauso.
Die Verkettung der Aufrufe wurde als Standardverhalten von Java 7 vorgeschlagen. Wenn dieser Vorschlag angenommen wird, wird jede (nichtstatische) Methode, die void »zurückgibt«, das Objekt, zu dem sie gehört, zurückgeben. So könnte man ähnlich wie in jQuery statt
var dd = $("<dd>");
var input = $("input");
input.attr("name", name);
input.val(wert);
dd.append(input);einfach
$("<dd>").append($("<input>").attr("name", name).val(wert));schreiben.
In jQuery ist es nicht notwendig, die Attribute und Texte der erstellten Elemente mit den Funktionen attr, text und val zu setzen, man kann sie auch wie in Zeile von Listing 10.7 direkt in dem Parameter der Funktion $ übergeben [Bei dieser Vorgehensweise sollte man aufpassen, wenn man die Zeichenkette aus Variablen zusammensetzt – sie können HTML-Steuerungszeichen wie <, & oder > enthalten. ] .
Was wir bisher programmiert haben, kann man noch lange nicht Version 1.0 nennen, aber einen Grund zur Freude haben wir doch: Wir haben jetzt eine lauffähige Anwendung, mit der wir uns die Kontaktdaten in einer Webanwendung anschauen können. Hier zum Beweis ein Screenshot:
Abbildung 10.3 Der erste Screenshot unserer Beispielanwendung
Funktional, aber nicht besonders attraktiv, nicht wahr? Nun, mit wenigen Zeilen CSS lässt sich die Darstellung etwas verbessern:
Abbildung 10.4 Der erste Screenshot mit ein wenig Stil
Unsere Anwendung kann jetzt die Kontakte anzeigen, und wir können sogar die Daten im Browser bearbeiten. Speichern können wir sie allerdings noch nicht. Dazu müssen wir jetzt zu PHP zurückkehren und weitere Dienste programmieren.
Ihre Meinung
Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de.
