Die Grundlegenge Ordnerstruktur

Es gibt keine fest vorgegebene Struktur für ein Repository. Es hat sich aber eine Struktur herausgebildet, die von den meisten Projekten, die Subversion einsetzen benutzt wird. Diese wird auch in der SVN-Referenz (deutsche Übersetzung) beschrieben. Dazu werden im Hauptverzeichnis folgende drei Ordner erstellt:

/
	trunk/
	branches/
	tags/

Solltet ihr mehrere Projekte in einem Repository verwalten, dann macht es Sinn für jeder eine solche Ordnerstruktur anzulegen:

/
	projekt1/
		trunk/
		branches/
		tags/
	projekt2/
		trunk/
		branches/
		tags/

Neues Repository mit dieser Ordnerstruktur erzeugen

Am besten erzeugen wir also gleich zu Beginn eines neuen Projekts eine solche Struktur. Gehen wir einfach mal von einem einfachen Repository mit nur einem Projekt aus. Ich möchte euch kurz die notwendigen Befehle aufzeigen um ein Repository für nur ein Projekt mit einer solchen Ordnerstruktur zu erzeugen.

Zuerst einmal erstellen wir in einem beliebigen Ordner ein neues Repository um dieses anschließend verwenden zu können:

svnadmin create /var/svn/public/myproject

Um nun die notwendigen Verzeichnisse zu erzeugen gibt es zwei Möglichkeiten:

1. Auschecken des Repositories, erzeugen der Ordner und commit der Ordnerstruktur
2. Direktes erzeugen der Ordner im Repository

Die erste Variante bietet sich an, wenn man gleich mehrere Projekte mit der Ordnerstruktur erzeugen möchte. Ich zeige euch hier kurz, welche Befehle dabei in Unix-Systemen notwendig wären:

cd ~
mkdir project
cd project/
svn checkout http://kau-boys.de/svn/myproject
cd myproject/
mkdir trunk tags branches

Jetzt müssen wir die Ordner zum Hinzufügen in das Repository markieren mit dem Befehl svn add:

svn add trunk tags branches

A         trunk
A         tags
A         branches

Jetzt können wir diese Ordnerstruktur in das Repository commiten:

svn commit -m "Import der initialen Ordnerstruktur"

Adding         branches
Adding         tags
Adding         trunk

Committed revision 1.

Die andere Möglichkeit ist wesentlich einfacher und erfordert nur einen einzigen Befehl. Dieser erzeugt die Ordnerstruktur direkt im Repository. Auch hier wäre es möglich die Ordner gleich für mehrere Projekte anzulegen (was ihr am besten mit mehreren Befehlen macht):

svn mkdir -m "Import der initialen Ordnerstruktur" \
	file:///var/svn/myproject/trunk \
	file:///var/svn/myproject/tags \
	file:///var/svn/myproject/branches

Committed revision 1.

Wie ihr seht ist diese Variante sehr viel einfacher. Gerade für den Administrator eines Repositories ist er praktischer. Man könnte den z.B. den gesamten Prozess zur Erzeugung eines Repositories und der Ordnerstruktur in einem Skript zusammenfassen, dass alle notwendigen Befehle automatisch hintereinander ausführt.

Das richtige Verzeichnis auschecken

Ganz wichtig ist es nun aber, dass ihr auch das richtige Verzeichnis benutzt um euer Projekt zu starten. Solltet ihr die Ordnerstruktur wie in der ersten Variante erzeugt haben, wechselt in eure Working Copy und benutzt dort den Befehl svn switch um auf das trunk Verzeichnis zu wechseln:

cd ~/myproject
svn switch http://kau-boys.de/svn/myproject/trunk

D    trunk
D    branches
D    tags

Wie ihr sehen könnt, wurden die Ordner gelöscht, da ihr euch nun “im Ordner trunk” befindet. In diesem könnt ihr nun eure Dateien des Projekts commiten.

Wenn ihr die Ordnerstruktur wie in Variante 2 erzeugt habt, dann müsst ihr lediglich das richtige Verzeichnis auschecken. Gebt also direkt den trunk Ordner bei auschecken an:

cd ~
svn checkout http://kau-boys.de/svn/myproject/trunk myproject

Checked out revision 1.

Damit der Ordner aber dabei nicht trunk heißt geben wir beim checkout Befehl gleich den Namen des Ordners an, den unser Projekt nachher haben soll, also in diesem Fall myproject.

Fazit

Ihr habt nun also gesehen, wie man eine gute Ordnerstruktur für Subversion-Projekte anlegt. Falls ihr euch aber fragt, wieso das so wichtig ist, dann seht euch mal Kapitel 4 der SVN-Referenz (deutsche Übersetzung) an. Ich mal bei einem Projekt zwar einen Ordner trunk erzeugt aber diesen als Root-Verzeichnis meines Repositories benutzt. Als ich dann (ca. 10000 Commits später) dann doch mal branches einsetzen wollte, bekam ich natürlich Probleme, da ich dann erst die Unterverzeichnisse erzeugt habe und alle anderen Order und Dateien per svn move in den Ordner trunk verschieben musste. Dabei bleibt zwar die History aller Dateien erhalten, aber jeder Benutzer musste den Pfad zum Repository aktualisieren und dann in den neuen trunk Ordner wechseln.

Wenn ihr euch also schon immer zu Beginn eines neuen Projekts die Ordner erzeugt spart ihr euch nachher viel Arbeit. Selbst wenn ihr denkt, niemals so komplex zu werden, dann seht mal in der SVN-Referenz unter dem Stichpunkt Feature-Release nach. So etwas könnte auch euch mal passieren. Also spart nicht an dem einen Befehl und den drei Ordnern

Installieren von Subversion

Die Installationshilfen von Ubuntu machen einem diesen Schritt ja sehr einfach. Zuerst einmal müssen bei meinem frisch installierten Server die Paketquellen aktualisiert werden. Das macht man mit folgendem Befehl (solltet ihr nicht als “root” angemeldet sein, müsst ihr eventuell noch “sudo ” vor diesen und weiter Befehl setzen):

apt-get update

Anschließend können wir Subversion und die Erweiterung für den Apache-Server installieren, was mit folgendem Befehl passiert:

apt-get install subversion libapache2-svn

Wenn alles geklappt hat ist Subversion auch schon installiert. Um es zu testen könnt ihr den “svn” Befehl auf der Konsole testen und dabei auch gleich feststellen, ob das WebDAV Modul verfügbar ist:

svn --version

WebDAV Ordner einrichten

Zuerst einmal legen wir ein Verzeichnis an, in dem später all unsere SVN-Repositories abgelegt werden:

mkdir /var/svn

Anschließend erstellen wir einen weiteren Unterordner für alle SVN-Repositories, die wir später per WebDAV freigeben möchten:

mkdir /var/svn/public

Erzeugen des ersten öffentlichen Repository

So, nun sind wir bereit unser erstes Repository zu erzeugen und dieses anschließend freigeben zu können. Zuerst einmal müssen wir das SVN-Repository selbst erzeugen. Dies geschieht mit dem Befehl svnadmin, genauer gesagt mit dem Unterbefehl svnadmin create:

svnadmin create /var/svn/public/myproject

Der Befehl erzeugt keine Ausgabe, lass euch also nicht irritieren, wenn da nicht viel passiert. Um zu kontrollieren, ob das Erstellen des SVN-Repositories geklappt hat, seht euch einfach mal den Inhalt des Ordners an:

cd /var/svn/public/myproject
ls -l

total 24
drwxr-xr-x 2 root root 4096 2011-05-22 13:21 conf
drwxr-sr-x 6 root root 4096 2011-05-22 13:21 db
-r--r--r-- 1 root root    2 2011-05-22 13:21 format
drwxr-xr-x 2 root root 4096 2011-05-22 13:21 hooks
drwxr-xr-x 2 root root 4096 2011-05-22 13:21 locks
-rw-r--r-- 1 root root  229 2011-05-22 13:21 README.txt

Repository über WebDAV freigeben

Nun müssen wir die Konfiguration des WebDAV Moduls anpassen, damit das Repository von außen verfügbar ist. Dazu öffnen wir die Konfigurationsdatei:

vi /etc/apache2/mods-enabled/dav_svn.conf

Hier müsst ihr in ein paar Zeilen die anführenden Kommentarzeichen entfernen. Eure Konfiguration sollte dann mindestens folgende Zeilen (unkommentiert) enthalten:

<Location /svn>
  DAV svn
  SVNParentPath /var/svn/public
  AuthType Basic
  AuthName "Subversion Repository"
  AuthUserFile /etc/apache2/dav_svn.passwd
  <LimitExcept GET PROPFIND OPTIONS REPORT>
    Require valid-user
  </LimitExcept>
</Location>

Nachdem ihr die Konfiguration gespeichert habt können wir den Zugang für euer öffentliches Repository machen. Wir verwenden hier allerdings eine Benutzer-Autorisierung, damit wir den Schreibzugriff auf das Repository einschränken können. Zum Erstellen eines Benutzers wird folgender Befehl verwendet. Gebt dort anschließend zweimal das neue Passwort des Nutzers ein:

htpasswd -cm /etc/apache2/dav_svn.passwd public

New password:
Re-type new password:
Adding password for user public

Damit die Benutzer auch in das Verzeichnis schreiben können, muss es noch auf den Apache-Benutzer übertragen werden, da wir es ja als root erzeugt haben. Das geschieht mit folgendem Befehl:

chown -R www-data /var/svn/public/

Das war es im Grunde auch schon. Was jetzt noch fehlt ist ein Neustart des Apache-Servers, damit die neue Konfiguration auch geladen wird:

/etc/init.d/apache2 restart

Testen des öffentlichen Repositories

Jetzt könnt ihr das neue öffentliche Repository testen. Navigiert dazu einfach in eurem Browser auf eine eurer Domains und dort in den Unterordner /svn/myproject. Ihr solltet dann in etwa folgendes sehen:

Das war es auch schon. Jetzt habt ihr euern eigenen Subversion Server und könnt dort nach Belieben öffentliche Projekte verwalten. Solltet ihr aber mal ein nicht öffentliches Projekt haben, könnte ihr dieses weiterhin über das svn+ssh: Protokoll betreiben. Dazu müsst ihr es einfach nur direkt im /var/svn Ordner ablegen und dann per SSH für bestimmt Benutzer erreichbar machen. Falls Interesse besteht werde ich das in einem separaten Artikel nochmal kurz erklären.

Fragen und Anmerkungen sind wie immer gerne gesehen!

Wartungsmodus vorher

Während des Updates eurer WordPress Installation, eines Themes oder Plugins, bzw. bei der Installation neuer Themes oder Plugins wird WordPress automatisch in einen Wartungsmodus versetzt, damit keine Schäden an eurem Blog auftreten. Dabei wir eurem Benutzer aber eine sehr unschöne Nachricht angezeigt, die wie folgt aussieht:

Ich habe hier den deutschen Text als Screenshot, aber bei meinem zweisprachigen Blog erscheint immer der englische Text, egal welche Sprache der Nutzer verwendet. Aber abgesehen davon ist die Nachricht mit besonders hübsch.

Testen und kontrollieren des Wartungsmodus

Gesteuert wird der Wartungsmodus übrigens über eine Datei mit dem Namen .maintenance die von WordPress bei der Installation mit folgendem Inhalt im ROOT-Verzeichnis eures Blogs abgelegt wird:

<?php $upgrading = 1281043765; ?>

Der Timestamp hier gibt an, wann das Update gestartet wurde. Solltet ihr euren Wartungsmodus einmal testen wollen, könnt ihr einfach eine entsprechende Datei erzeugen und den Timestamp auf den aktuellen Wert setzen. Dazu einfach anstelle einer Zahl die Funktion time() verwenden, es sei denn, eure innere Uhr kennt immer den aktuellen Timestamp Denkt aber daran sie später wieder zu löschen. Ihr solltet auch nach jedem Update kontrollieren, ob euer Blog wieder funktioniert. Wie ich heute auf dem Blog von perun.net nachlesen konnte, ist es schon einigen Blogbesitzern passiert, dass die Datei nach dem Update nicht gelöscht wurde. Das kann schnell mal passieren, wenn man z.B. den Tab mit dem Update aus Versehen löscht. Glücklicherweise wird aber nach 10 Minuten der Blog wieder angezeigt, da WordPress dann davon ausgeht, dass das Löschen der Datei gescheitert ist.

Verschönern des Wartungsmodus

Jetzt aber zum eigentlich interessanten Teil des Artikels. Nachdem ich die Standardmeldung im Quellcode von WordPress ausgemacht hatte, fand ich in dem Kommentar der Funktion auch einen Hinweis darauf, wie man die Anzeige mit sehr einfachen Mitteln verschönern kann. Dazu ist es lediglich notwendig eine Datei mit dem Namen maintenance.php im Ordner wp-content abzulegen. Da man hier auch eine PHP Datei verwenden kann sind, der eigenen Kreativität keine Grenzen gesetzt.

Das Anlegen meiner Seite habe ich wie folgt vorgenommen. Zuerst habe ich eine gewöhnliche WordPress Seite erstellt und mit einem netten Text und einen Comic von xkcd.com gefüllt. Diese Seite habe ich dann kurz freigegeben und nach dem Abmelden vom Admin-Bereich gespeichert, damit auch alle Inhalte zu sehen sind, die ein angemeldeter Besucher nicht sieht. Von dieser Seite habe ich dann den Quellcode gespeichert.

Den Quellcode könnte man nun einfach in die maintenance.php Datei einfügen und im wp-content Ordner ablegen. Da mein Blog aber zweisprachig ist, habe ich zwei HTML-Dateien mit den Namen maintenance-de.htm und maintenance-en.htm und diese beiden im gleichen Ordner abgelegt. Innerhalb der maintenance.php lese ich dann die Sprache des Benutzers aus, und gebe den Inhalt der entsprechenden Datei aus. Wer mal sehen möchte, wie meine Wartungsseite aussieht kann das gerne hier tun: http://kau-boys.de/wp-content/maintenance.php.

Fazit

Der neue Wartungsmodus ist wirklich eine tolle Sache und kann mit sehr wenig Aufwand auch an die eigenen Bedürfnisse angepasst werden. Wer eine statische Kopie einer WordPress Seite verwendet, sollte seine Wartungsseite aber von Zeit zu Zeit aktualisieren, damit sie immer dem aktuellen Layout entspricht.

Ich hoffe, dass der Tipp auch euch weiterhelfen wird und ich würde mich freuen, wenn mir der ein oder andere ebenfalls einen Link zu seiner toll gestalteten Wartungsseite als Kommentar schicken würde.

Der Quellcode für dieses Beispiel

Zuerst einmal wieder der Quellcode für dieses Beispiel. Ich werde wie auch schon im ersten Teil des Tutorials die wichtigen Zeilen etwas genauer erklären. Die Zeilen 1-34 enthalten das grundlegende Gerüst der HTML-Seite sowie die Stylesheets, auf die ich nicht näher eingehen möchte:

<!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" dir="ltr" lang="de-DE">
<head>
	<head>
		<title>Drag-and-Drop Part 2</title>
		<script type="text/javascript" src="prototype.js"></script>
		<script type="text/javascript" src="scriptaculous.js"></script>
		<style type="text/css">
			.item {
				padding: 40px;
				border: 1px solid #000;
				cursor: move;
				display: inline-block;
				margin-right: 20px;
			}
			.blue {
				background-color: #39c;
			}
			.green {
				background-color: #292;
			}
			div#shopping_cart {
				width: 180px;
				height: 180px;
				background: #fff;
				border: 5px solid #ccc;
			}
			div#shopping_cart.hover {
				border: 5px dashed #aaa;
			}
		</style>
	</head>
	<body>
		<h1>Drag-and-Drop</h1>
		<div id="blue_box" title="Blaue Box" class="item blue"></div>
		<div id="green_box" title="Grüne Box" class="item green"></div>
		<div id="shopping_cart">
			<ul id="items_in_cart"></ul>
		</div>
		<script type="text/javascript">
			new Draggable('blue_box', {
				revert: true
			});
			new Draggable('green_box', {
				revert: true
			});
			Droppables.add('shopping_cart', {
				onDrop: addItem,
				hoverclass: 'hover'
			});
			function addItem(dragged, dropped, event){
				var itemCount = $('items_in_cart').select('li[id="item' +
									dragged.id + '"] span').first();
				if(itemCount == undefined){
					$('items_in_cart').insert({
						bottom: '<li id="item' + dragged.id +
								'"><span>1</span>x ' + dragged.title + '</li>'
					});
				} else {
					itemCount.update(parseInt(itemCount.innerHTML) + 1);
				}
			}
		</script>
	</body>
</html>

In den Zeilen 35-39 sind zwei einfache “Artikel” aufgeführt (in unserem Fall einfache farbige DIVs) sowie der “Warenkorb”, der eine leere unsortierte Liste enthält. In diese fügen wir dann per Drag-and-Drop die Waren ein. Sehen wir uns nun aber den interessanten Teil des Quellcodes an, das JavaScript. Die Zeilen 41-46 sollten aus dem ersten Teil des Tutorials bekannt sein. Wir erzeugen hier zwei Draggables wobei wir die Option reset auf true setzen, damit die Artikel beim “loslassen” wieder auf ihre ursrpüngliche Position zurückkehren. Nun aber zum neuen Teil der Droppables-Klasse:

Droppables.add('shopping_cart', {
	onDrop: addItem,
	hoverclass: 'hover'
});

Wichtig ist hier, dass wir keine Instanz der Klasse durch das Schlüsselwort new erzeugen. Es existiert vielmehr schon eine Instanz, der wir mit der add() Funktion eine neue “Drop-Zone” hinzufügen. Es ist also möglich mehrere Bereiche einer Website für die Reaktion auf Draggables zu verwenden. Es wäre z.B. möglich einen “Papierkorb” einzurichten, mit dem man einenen bereits hinzugefügten Artikel wieder aus der Liste entfernen kann bzw. dessen Anzahl verringern.

Der add() Funktion können auch mehrere Optionen übergeben werden, welche das sind könnt ihr in der API zu Droppables nachlesen. Ich verwende hier die hoverClass Option, die der “Drop-Zone” eine Klasse zu weist, wenn der Benutzer mit einem Draggable darüber steht. Zusätzliche gebe ich eine Callback-Funktion für das onDrop Event an. Wie ihr der Funktion addItem() entnehmen könnte, bekommt die onDrop() Funktion eine Referenz auf das aufgenommene Elemente sowie auf die “Drop-Zone” und das Event selbst übergeben. In der Funktion selbst fügen wir den Artikel an die Liste an und setzen die Anzahl auf 1, sofern er noch nicht enthalten ist. Wenn er enthalten ist erhöhen wir dir Anzahl um 1.

Das Beispiel

Das oben beschriebene Beispiel sieht dann wie folgt aus (es darf aber gerne unter Verwendung von Bildern anstelle von DIVs und mehr CSS noch ansprechender gestaltet werden):

Wie ihr also sehen könnt ist es sehr einfach ein Element für die Interaktion mit Draggables zu verwenden. Was ihr dabei mit den Elementen macht ist eurer Fantasie überlassen. Die Möglichkeiten sind schier unbegrenzt. Ich möchte euch also dazu animieren einfach einmal mit der Funktion zu experimentieren.

Das war es dann auch schon wieder mit diesem Teil des Tutorials. Im nächsten Teil sehen wir uns einen sehr speziellen Fall von Drag-and-Drop an und zwar mit dem Sortieren von Elementen. Wie einfach so etwas möglich ist und wie leicht sich die Sortierreihenfolge auslesen lässt, das erwartet euch in Teil 3 des Tutorials. Für welche Einsatzzwecke habt ihr bisher Draggables und Droppables genutzt? Über einen Kommentar dazu würde ich mich wie immer sehr freuen.

Im ersten Teil geht es um die Grundlage einer Seite mit Drag-and-Drop. Wir verwenden für dieses Tutorial die Drag-and-Drop Funktionalität von Scriptaculous, welches eine Erweiterung des Prototype Frameworks ist. Um die hier gezeigten Funktionen selbst nachprogrammieren zu können benötigt ihr also zuerst einmal die beiden Frameworks.

Der Quellcode für dieses Beispiel

Beginnen wir also mit dem Beispiel. Zuerst einmal benötigen wir etwas HTML in dem wir ein Element platzieren, welches wir dann aufnehmen möchten. Für das Element nehme ich exemplarisch ein DIV, aber ihr könnt auch z.B. ein Bild verwenden:

<!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" dir="ltr" lang="de-DE">
<head>
	<head>
		<title>Drag-and-Drop Teil 1</title>
		<script type="text/javascript" src="prototype.js"></script>
		<script type="text/javascript" src="scriptaculous.js"></script>
		<style type="text/css">
			#draggable {
				width: 100px;
				height: 100px;
				padding: 30px;
				background-color: #39c;
				border: 1px solid #000;
				cursor: move;
			}
		</style>
	</head>
	<body>
		<h1>Drag-and-Drop</h1>
		<div id="draggable"></div>
		<script type="text/javascript">
			new Draggable('draggable');
		</script>
	</body>
</html>

Wichtig für das Aktivieren der Draggable Funktion auf ein Element ist eine ID für das Element. Das DIV hat hier die ID “draggable”. Im Kopf werden die beiden JavaScript Dateien für Prototype und Scriptaculous eingebunden. Wichtig ist hierbei, dass zuerst Prototype eingebunden wird. Zusätzlich ist noch etwas CSS angegeben um dem DIV einen Rahmen und eine Hintergrundfarbe zu verpassen. Alles was nun notwendig ist, um das DIV aufnehmbar zu machen ist eine einzige Zeile JavaScript:

new Draggable('draggable');

Es wird hier eine neue Instanz des Draggable Objekts erzeugt. Dem Konstruktor wird hierbei die ID des Elements übergeben, welches aufnehmbar sein soll.

Ein Beispiel gefällig

Da dieser Blog auch Prototype einsetzt, sollten wir es nicht bei einem Quellcode Auszug belassen, sondern einfach mal hier ein solches DIV einfügen. Also, hier kommt es:

Dieses DIV kann nun beliebig im Sichtbaren Bereich verschoben werden. Die Klasse bietet aber auch viele Optionen, die in einem Hash an die Funktion als zweiten Parameter übergeben werden können. Wir können z.B. die Bewegung eines Elements auf die horizontale beschränken und zusätzlich das Element beim “Loslassen” des Elements wieder auf seine ursprüngliche Position zurücksetzen. Der JavaScript Befehl dazu sieht wie folgt aus:

new Draggable('draggable2', {constraint: 'horizontal', revert: true});

Ich habe hier die ID um eine Zwei erweitert, damit ich auch dieses Beispiel hier vorführen kann. Wichtig ist natürlich immer, dass ihr für die verschiedenen Elemente unterschiedliche IDs verwendet und niemals eine ID in zwei Instanzen verwendet. Das DIV verhält sich dann wie folgt:

Da es hier in diesem Tutorial nicht darum geht alle möglichen Optionen zu erklären möchte ich euch gerne auf die API Referenz der Draggable Klasse verweisen. Dort findet ihr eine Liste aller Optionen und einige weitere Beispiele.

Damit möchte ich auch schon den ersten Teil des Tutorials abschließen. Ihr solltet einfach einmal die verschiedenen Optionen ausprobieren um zu sehen, wie sich das DIV dabei verhält. Im zweiten Teil beschäftigen wir uns mit “dem Bruder” von Draggable. Dabei handelt es sich um die Droppables Klasse, die es ermöglicht ein aufgenommenes Element “einzufangen” und auf das Element zu reagieren.