Dieses Tutorial zeigt, wie ihr euch ganz einfach die neueste Version von dem Multi Chat Messenger Pidgin herunterladen, kompilieren und installieren könnt auf Debian 6 – “Squeeze” und Ubuntu 11.10 – “Oneiric Ocelot”.

Hinweis:

Dieses Tutorial wurde nur mit folgenden Versionen getestet:

• Ubuntu 11.10 – “Oneiric Ocelot”
• Debian 6 – “Squeeze”

Aber es sollte auch mit anderen Linux Systemen die auf Ubuntu oder Debian basieren funktionieren, wie Linux Mint.

Was ist Pidgin?

Pidgin ist ein Chat Programm, mit dem man sich in seine Accounts von vielen Chat Netzwerken gleichzeitig einloggen kann. Das heißt, das du mit Freunden aus MSN chatten, mit Google Talk Freunden sprechen MSN (Windows Live Messenger), Yahoo (Yahoo Messenger), ICQ, xFire (with the plugin: gFire) und im Yahoo Chat Raum sitzen kannst alles zur selben Zeit, mit einem Programm.

Wie Pidgin kompilieren und installieren

Da die Installation für Ubuntu 11.10 – “Oneiric Ocelot” und Debian 6 – “Squeeze” beschrieben ist, kann es für andere Distributionen sich eventuell unterscheiden.

Hinweis nur für Debian:
Bei Debian ist der User Account nicht standardmäßig zur Sudo Gruppe hinzugefügt.
Falls dein Account noch nicht in der Sudo Gruppe ist, füge in hinzu und starte danach den Rechner neu:

su root
adduser DEINUSERNAME sudo

Und los gehts!

Schritt 1: Vorbereitung

Um Pidgin erfolgreich zu installieren, müssen wir sicherstellen, dass alle Abhängigkeiten vorhanden sind.
Öffne ein Terminalfenster

Um dann anschließend alle Abhängigkeiten zu besorgen, tippe folgenden Befehl ins Terminal:

sudo apt-get build-dep pidgin

Nun sind alle erforderlichen Abhängigkeiten vorhanden.

Schritt 2: Downloaden und Vorbereitung für das Kompilieren

Als erstes müssen wir den Quelltext von Pidgin runterladen.
Für dieses Tutorial habe ich die Version: 2.10.0 mit dem Paketnamen: pidgin-2.10.0.tar.bz2
Öffne ein Terminalfenster:
Zum Downloaden und entpacken von pidgin-2.10.0.tar.bz2 tippe folgendes in das Fenster:

cd /tmp/
wget http://sourceforge.net/projects/pidgin/files/Pidgin/2.10.0/pidgin-2.10.0.tar.bz2
tar -xjvf pidgin-2.10.0.tar.bz2
cd pidgin-2.10.0/

das wird einen Ordner erstellen Namens “pidgin-2.10.0″, als nächtes wechseln wir in den Ordner.

Schritt 3: Kompilieren und Installieren

Als erstes müssen wir das Konfigurations Skript starten, welches alle Abhängigkeiten von Schritt 1 überprüft.
Um das zu tun, müssen wir folgenden Befehl im Ordner von Pidgin ausfürhen, in welchen wir uns ja noch befinden:

./configure

Das Skript sollte folgendes Anzeigen “configure complete, now type ‘make’”. Falls nicht, überprüfe nochmal alle Abhängigkeiten.

Tippe nun make in das Terminalfenster

make

Fortgeschrittene:
Wenn du mehr als einen Core hast Tippe folgendes:

 make -j DEINECOREANZAHL

Das könnte nun einen Moment dauern, Zeit für einen Keks.
Nun ist es Zeit um Pidgin endlich zu installieren.
Füge folgenden Befehl ins Terminal ein:

sudo make install

Das wird Pidgin in die richtigen Pfade installieren und wird die Gnome/Unity Einträge erstellen.

Schritt 4: Starte Pidgin

Um Pidgin sichtbar in den Menü einträgen zu machen, führe folgendes aus:

Für Debian:

sudo /etc/init.d/gdm3 stop

Jetz hast du einen Blackscreen.
Drücke: Alt+F1 um zu einem Terminalfenster zu wechseln und einzuloggen.
Wenn du eingeloggt bist, tippe folgendes:

sudo /etc/init.d/gdm3 start

Nun logge wieder ein.
Pidgin wird erscheinen unter: Anwendungen->Internet

Für Ubuntu:

sudo service lightdm restart

Pidgin ist jetz in der Dash.

Falls es nicht erscheint, start einfach den Rechner neu, du kannst außerdem Pidgin von der Kommandozeile starten:

pidgin

Das wars!

Jetzt kannst du wenn du möchtest den Ordner, von dem du Pidgin installiert hast löschen oder irgendwo anders hinschieben.

Das schöne ist das man dank Ajax Technologie den Anwender immer auf dem neusten Stand halten kann.

• Download
• Vorschau im Browser

Als JavaScript Framework setze ich jQuery mit der Erweiterung jQuery UI. Den Datenaustausch zwischen Javascript und PHP mache ich mittels JSON, wodurch man PHP Objekte direkt als Javascript Objekte übergeben kann. Außerdem lassen sich dadurch bequem mehrere Daten übertragen.

Fangen wir an!

Als aller erstes sollte man sich nun jQuery und jQuery UI herunterladen. Als nächstes erstellt man sich eine index.php welche das Standard HTML Gerüst enthält. Im Bereich bindet man nun die JavaScript Libary und die dazu gehörigen CSS Dateien ein.

<link type="text/css" href="./css/ui-lightness/jquery-ui-1.8.13.custom.css" rel="stylesheet" />

<script type="text/javascript" src="./js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="./js/jquery-ui-1.8.13.custom.min.js"></script>

Im Body Teil unserer index.php bauen wir zwei Div Platzhalter ein. Der eine wird unsere Progressbar, der andere zeigt nacher eine Nachricht an, welche wir im PHP Code generieren. Wichtig ist, das wir beiden Divs IDs geben, nur dadurch können wir nach im JavaScript Code die beiden Divs wieder finden.

<!--Die Progressbar-->
<div id="progressbar"></div>

<!-- Div Platzhalter für eigene von PHP generierte Nachrichten -->
<div id="message">Lädt...</div>

Als nächstes kümmern wir uns um die PHP Seite. Die Datei, die für uns die eigentlich lange dauernde Aktion ausführen soll ist die ajax.php. Diese werden wir auch per JavaScript ansprechen und genau diese Datei soll uns mithilfe von einem JSON Objekt den aktuellen prozentualen Status und eine von uns aus PHP generierte Nachricht zurück geben, sodass wir sie auf der Webseite dem User darstellen können und informieren können, wie weit sein Prozess fortgeschritten ist.

Dazu erstellen wir die ajax.php und fügen folgenden Inhalt ein:

$zufall = rand(1,3); // Zufällige länge der Aktion simulieren

sleep($zufall); // Simulieren einer langen Aktion...

Diese zwei Zeilen sind nur dafür da eine lange Aktion zu simulieren, welche nacher irgendwelche langsamen Datenbank abfragen, Backup Funktion usw. sein können.

Als nächstes bauen wir unser php_array, welches wir später als JSON Objekt umwandeln. Das php_array enthält den Index status, in dem wir die aktuellen Fortschritt in Prozent rein schreiben. Natürlich kann man sich die indexe frei aussuchen .

Unser index Status bekommt noch eine kleine wenn überprüfung, denn bei 100% ist Schluss, so ist sicher gestellt, das wir nie über 100% kommen.

// Unser $php_array ist ein Array, welches nacher als JSON Objekt ausgeben wird
// Enthält unseren Prozessfortschritt, als Prozentwert
$php_array['status'] = $_GET['status']+($zufall*3);

// Bei 100% ist Schluss 
if($php_array['status']>100) {
	$php_array['status'] = 100;
}

Als zweiten Teil, wollen wir eine von PHP generierte Nachricht an den Benutzer auch noch übergeben. Dafür legen wir einfach einen neuen Index zu den bereits bestehenden $php_array an, den wir message nennen. Dort können wir unsere Nachricht angeben.

// Eine von Nachricht an dem Benutzer aus PHP
if($php_array['status'] != 100) {
	$php_array['message'] = 'Aktueller Status <b>'.$php_array['status'].'%</b> von 100%, Differenz: '.(100-$php_array['status']);
} else {
	$php_array['message'] = 'Juhu endlich geschafft!  ';
}

Zum Schluss des ganzen, müssen wir nur das PHP Array in ein JSON Objekt umwandeln, das geht mit folgender kleinen PHP Zeile:

// Ausgabe des PHP Arrays als JSON Objekt
echo json_encode($php_array);

Das gibt folgenden String zurück:

{"status":90,"message":"Aktueller Status <b>90%<\/b> von 100%, Differenz: 10"}

Das ist der String den wir in JavaScript brauchen. Nun geht es zu dem JavaScript Code, da unsere Background PHP Datei soweit fertig ist. Als aller erstes wollen wir unseren html div in eine Progressbar umwandeln. Diesen Befehl gibt es nur wenn jQuery + jQuery UI eingebaut ist. value sagt unserer Progressbar, wieviel % sie nun hat, zum Start macht es Sinn ihn auf 0% zu setzen, da wir ja unser PHP Skript noch gar nicht arbeiten lassen haben.

$("#progressbar").progressbar({
	value: 0
});

Als nächstes kommt die JavaScript Funktion load(), diese ruft die ajax.php mit einem Parameter auf, der Parameter ist unser aktueller Status. Dazu nutzen wir die Funktion ajax von jQuery. Als Einstellung gibt es dort unteranderem die url, welche der aufzurufenden Datei entspricht. Das ist bei unseren Fall, wie schon zuvor gesagt, die ajax.php.

url: './ajax.php?status='+$( "#progressbar" ).progressbar( "value" ),

Als nächstes kommt die Eigenschaft success, dort hinterlegen wir die Funktion, die aufgerufen werden soll, wenn der Request erfolgreich war, also wenn wir den Inhalt von der ajax.php zurück bekommen haben. Als Parameter von der Funktion, wird jQuery unseren Inhalt von den Ajax Request zurück geben, also in unserem Fall heißt der Parameter data.
Da unsere PHP Datei ein json Objekt zurück gibt, machen wir eine neue Variable ajax und fügen wir das JSON Objekt hinzu, das machen wir in dem wir ein eval ausführen, mit dem zurück gegeben String von PHP, der sich in der Variable data befindet.

ajax = eval('(' + data + ')');

Nun können wir mithilfe von ajax.index auf die zuvor in PHP erstellten Indexe zu greifen. In z.B. ajax.status ist der prozentuale Status, den wir in PHP errechnet haben.

Mit hilfe von ajax!=false überprüfen wir in der if Bedingung, ob wir überhaupt ein JSON Objekt erhalten haben. Der Progressbar geben wir ihren neuen Prozentsatz mithilfe von:

$("#progressbar").progressbar({
	value: ajax.status
});

Und danach aktualisieren wir den Div, der unsere PHP Message darstellen sollen.

$("#message").html( ajax.message );

Und zum guten Schluss, rufen wir unsere Funktion recursiv auf, solange wir noch nicht 100% haben.

if(ajax.status!=100) {
	load();
}

Die ganze load() Funktion:

function load() {
	$.ajax({
		// Welche URL soll aufgerufen werden?
		url: './ajax.php?status='+$( "#progressbar" ).progressbar( "value" ),
		// Wird ausgeführt, wenn die Datei erfolgreich requestet wurde
		success: function(data) {
			/**
			* PHP liefert ein JSON Objekt zurück, welches wir im
			* JavaScript Code ausführen müssen, um ein Objekt zu erhalten.
			* Danach können wir mittels ajax.message und ajax.status auf unser
			* zuvor erstelltes PHP Array zu greifen. Wenn ein neuer Index im PHP Array
			* hinzugefügt wird, können wir mittels ajax.neuerIndex auch im JS darauf
			* zu greifen.
			**/

			ajax = eval('(' + data + ')');

			// Überprüfen, ob ein JS Objekt da ist.
			if(ajax!=false) {
				// Updaten unserer Progressbar auf den aktuellen Stand
				$("#progressbar").progressbar({
					value: ajax.status
				});

				// Die von PHP generierte Meldung dem Benutzer darstellen
				$("#message").html( ajax.message );

				// Solange wir nicht 100% haben müssen wir die Datei nochmal aufrufen...
				if(ajax.status!=100) {
					load();
				}
			}
		}
	});
}

Und nochmal beide erstellten Dateien zum Schluss:

Die index.php

Die gesamte index.php

<html>
	<head>
		<title>jQuery UI Progressbar</title>
		<link type="text/css" href="./css/ui-lightness/jquery-ui-1.8.13.custom.css" rel="stylesheet" />

		<script type="text/javascript" src="./js/jquery-1.5.1.min.js"></script>
		<script type="text/javascript" src="./js/jquery-ui-1.8.13.custom.min.js"></script>
		<script type="text/javascript">
			$(function(){
				/* Progessbar definieren */
				$("#progressbar").progressbar({
					value: 0
				});

				// Funktion, die das Laden anstupst
				function load() {
					$.ajax({
						// Welche URL soll aufgerufen werden?
						url: './ajax.php?status='+$( "#progressbar" ).progressbar( "value" ),
						// Wird ausgeführt, wenn die Datei erfolgreich requestet wurde
						success: function(data) {
							/**
							* PHP liefert ein JSON Objekt zurück, welches wir im
							* JavaScript Code ausführen müssen, um ein Objekt zu erhalten.
							* Danach können wir mittels ajax.message und ajax.status auf unser
							* zuvor erstelltes PHP Array zu greifen. Wenn ein neuer Index im PHP Array
							* hinzugefügt wird, können wir mittels ajax.neuerIndex auch im JS darauf
							* zu greifen.
							**/

							ajax = eval('(' + data + ')');

							// Überprüfen, ob ein JS Objekt da ist.
							if(ajax!=false) {
								// Updaten unserer Progressbar auf den aktuellen Stand
								$("#progressbar").progressbar({
									value: ajax.status
								});

								// Die von PHP generierte Meldung dem Benutzer darstellen
								$("#message").html( ajax.message );

								// Solange wir nicht 100% haben müssen wir die Datei nochmal aufrufen...
								if(ajax.status!=100) {
									load();
								}
							}
						}
					});
				}

				load(); // Das erste Starten unserer Funktion
			});
		</script>

		<style>
			/* Größe für die Progressbar */
			#progressbar {
				width:300px;
				height: 20px;
			}
		</style>
	</head>
	<body>
		Lädt:
		<!--Die Progressbar-->
		<div id="progressbar"></div>

		<!-- Div Platzhalter für eigene von PHP generierte Nachrichten -->
		<div id="message">Lädt...</div>
	</body>
</html>

Die ajax.php

Die gesamte ajax.php

<?php

$zufall = rand(1,3); // Zufällige länge der Aktion simulieren

sleep($zufall); // Simulieren einer langen Aktion...

// Unser $php_array ist ein Array, welches nacher als JSON Objekt ausgeben wird
// Enthält unseren Prozessfortschritt, als Prozentwert
$php_array['status'] = $_GET['status']+($zufall*3);

// Bei 100% ist Schluss 
if($php_array['status']>100) {
	$php_array['status'] = 100;
}

// Eine von Nachricht an dem Benutzer aus PHP
if($php_array['status'] != 100) {
	$php_array['message'] = 'Aktueller Status <b>'.$php_array['status'].'%</b> von 100%, Differenz: '.(100-$php_array['status']);
} else {
	$php_array['message'] = 'Juhu endlich geschafft!  ';
}

// Ausgabe des PHP Arrays als JSON Objekt
echo json_encode($php_array);

• Download
• Vorschau im Browser

Viele haben Schwierigkeiten Pidgin vom Source Code zu kompilieren. Das ist der Grund, warum Pathin sich dazu entschieden hat ein kleines Tutorial zu schreiben, wie man Pidgin vom Source Code kompiliert und installiert.

Was ist Pidgin?

Pidgin ist ein Chat Programm, mit dem man sich in seine Accounts von vielen Chat Netzwerken gleichzeitig einloggen kann. Das heißt, das du mit Freunden aus MSN chatten, mit Google Talk Freunden sprechen und im Yahoo Chat Raum sitzen kannst alles zur selben Zeit, mit einem Programm.

Wie Pidgin kompilieren und installieren

Das Tutorial ist geschrieben für Ubuntu 11.04 – Natty Narwhal und könnte abweichen von anderen Distributionen.
Wenn du Probleme haben solltest, dem Tutorial zu folgen, hinter lass einfach einen Kommentar.

Schritt 1: Vorbereitung

Um Pidgin zu kompilieren, müssen wir sicherstellen, das alle Abhängigkeiten vorhanden sind.
Das kann sicher gestellt werden, in dem man folgendes Kommando im Linux Terminal benutzt:

sudo apt-get build-dep pidgin

Das wird alle Abhängigkeiten installieren, die wir brauchen um Pidgin zu kompilieren.

Schritt 2: Download und Vorbereitung zum kompilieren

Der nächste Schritt, ist das Downloaden von dem Source Code.
Geh zur Downloadseite: http://www.pidgin.im/download/source/, downloade es und speicher es in deinen persönlichen home Ordner. (In meinen Fall ist es: /home/pathin)
Für dieses Tutorial habe ich die Version: 2.8.0 mit dem Paketnamen: pidgin-2.8.0.tar.bz2 heruntergeladen.
Öffne ein neues Terminal Fenster
Zum entpacken von pidgin-2.8.0.tar.bz2 gib folgenden Befehl ein:

cd ~/<br />tar -xjvf pidgin-2.8.0.tar.bz2

das wird einen neuen Ordner erstellen mit dem Namen: pidgin-2.8.0.
Wechsle zum Ordner:

cd pidgin-2.8.0/

Schritt 3: Kompilieren und installieren von Pidgin

Als erstes müssen wir das configure Skript ausführen, welches überprüft ob alle Abhängigkeiten die wir in Schritt 1 getroffen haben vorhanden sind.
Um das zu tun benutzen folgendes Kommando im pidgin-2.8.0 Ordner:

./configure

Wenn das Skript “configure complete, now type ‘make’” ausgibt, ist alles in Ordnung. Wenn nicht, überprüfe nochmal alle Abhängigkeiten!
Nun starte den make Befehl im Terminal:

make

Das kann eine Weile dauern, jetzt ist der richtige augenblick, sich einen Kaffee zu holen.
Nachdem neuer Kaffee vorhanden ist, ist es Zeit Pidgin zu installieren.
Füge dazu folgenden Befehl ins Terminal Fenster und starte ihn:

sudo make install

Das wird Pidgin in die richtigen Ordner installieren, setzt die richtigen chmod Rechte and stellt die Gnome Menü Einträge ein.

Schritt 4: Starte Pidgin

At standard Pidgin should appear at Anwendungen -> Internet -> Pidgin.
Wenn es nicht startet, restarte deinen XServer oder neustarte deinen Rechner.
Alternativ, kannst du pidgin auch über das Terminal starten:

pidgin

Voila: Da ist es!

Jetzt kannst du wenn du möchtest den Ordner, von dem du Pidgin installiert hast löschen oder irgendwo anders hinschieben.

Was ist PHP?

PHP ist eine Skriptsprache, welche auf dem Webserver ausgeführt wird. Durch PHP wird es möglich Serverseitig Dynamische Webseiten zu erstellen.

Wie kann ich PHP benuzen?

PHP muss auf einem Webserver installiert werden, falls ihr keinen PHP fähigen Webserver habt, könnt ihr allerdings auch vorrerst einen lokalen Webserver auf euren eigenen Rechner erstellen. Dazu geht ihr auf die Webseite von Apache Friends und ladet euch XAMPP herunter und insstalliert es. Die installation ist sehr einfach, da in diesem Paket bereits alles Konfiguriert ist. Den Webserver tut ihr über das Xampp Control Menü starten, welches sich im XAMPP Ordner als xampp-control.exe finden lässt. Um nun Inhalte zu erstellen müsste ihr Dateien im htdocs(z.B. C:\xampp\htdocs) Ordner erstellen, alle Dateien in diesem Ordner sind über die Weboberfläche erreichbar, in dem ihr einen Browser eurer Wahl auf macht z.B. Firefox und in die Adresszeile eintippt: http://localhost. Nun sollte eine Webseite angezeigt werden, wenn ihr alles richtig gemacht habt.

Das erste Skript

Wie mittlerweile in jeder Programmiersprache üblich, fangen wir auch mit einem “Hallo Welt!” Skript an:

hallo-welt.php

<?php
 echo 'Hallo Welt!';
?>

Mit <?php wird jedes PHP Skript eröffnet und mit ?> wird es wieder geschlossen. In der zweiten Zeile steht nun unser erste Befehl. Das Keyword echo ist ein Befehl, welchen wir noch oft in PHP gebrauchen werden. Echo sorgt in PHP dafür das es eine Ausgabe gibt. Ein normales PHP Skript besitzt sonst keine Ausgabe. ‘Hallo Welt’ ist ein String, das bedeutet er wird mit ‘ eingeleitet und mit ‘ wieder beendet. Zwischen den beiden einfachen Anführungszeichen steht unser eigentlich Inhalt, nämlich Hallo Welt!. Das einfache Anführungszeichen findet ihr auf eurer Tastatur auf der Raute Taste neben der Entertaste, wenn ihr dabei die Shift Taste gedrückt haltet. Abgeschlossen wird jede PHP Anweisung mit einem Semikolon (;). In der letzten Zeile wird das PHP Skript wieder geschlossen mit ?>. Dieses Skript sorgt beim Aufrufen im folgende Ausgabe:

Hallo Welt!

Variablen in PHP

Nun ist das Skript noch Statisch und erzeugt bei jedem Aufruf immer dieselbe Ausgabe, deshalb beschäftigen wir uns jetzt mit Variablen um später dynamische Skripts zu erstellen. Variablen sind Platzhalter für irgendwelche X-Belibigen Inhalte. Aus der Mathematik als Buchstaben oder Platzhalter bekannt. In einer Variable können praktisch alle Inhalte sich befinden.

Eine Variable beginnt mit dem Dollar Zeichen($) mit einem nachfolgenden Namen. Achtung: Die Namen dürfen keine Leerzeichen oder Sonderzeichen enthalten und auch nicht mit einer Zahl beginnen.

text-variable.php

<?
 $text = 'Ich bin ein Text in einer Variable';

 echo $text;
?>

Wie wir in dem kleinen simplen Skript sehen wird der Variable $text der String ‘Ich bin ein Text in einer Variable zugewiesen. Eine Variable wird mit einem = Zeichen zugewiesen mit dem Nachfolgenden Inhalt der in der Variable stehen soll und mit einem ; abgeschlossen wird. In der 4. Zeile wird das ganze Mittels echo Ausgegeben. Diesmal steht hinter dem echo $text, was als Platzhalter für den oben definierten Text steht. Auch diese Seite wird noch statisch sein, wenn man sie im Browser aufruft, das der Variable immer der selbe Wert zugewisen wird.

Kommentare

In PHP können Kommentare eingefügt werden, wie in HTML mit <!– Zum start eines Kommentares und mit –> zum Beenden eines Kommetares. In PHP gibt es Verschiedene Arten von Kommentaren. Den mehr und einzeiligen Kommentar.

Einzeilger Kommentar

Da gibt es zum einen den einzeiligen Kommentar, er wird mit Hilfe von // eingefürt. Die zwei Slash Zeichen findet ihr auf eurer Tastatur über den Buchstaben bei der 7, wenn ihr dabei die Großschreibtaste (Shift-Taste) gedrückt haltet.

<?php
 // Ich bin ein einzeiliger Kommentar
?>

Ein Kommentar wird von PHP komplett Ignoriert, das heißt ihr könnt dort alles reinschreiben was ihr wollt, solange es sich im Kommentar Bereich Befindet. Bei einem einzeiligen Kommentar wird alles ignoriert, was rechts von den zwei Slash Zeichen sich befindet, er dient dazu um einen einzelnen Befehl zu kommentieren oder näher zu erläutern. Er muss nicht beendet werden, da er automatisch am Zeilenende endet.

Mehrzeiliger Kommentar

Der Mehrzeilige Kommentar kann X-Beliebige Zeichen umfassen. Er wird mit /* eingeleitet und mit */ beendet. Zwischen diesen Beiden Zeichen darf wie beim einzeiligen Kommentar alles stehen.

<?php
 /* Mehrzeiliger Kommentar
 Hier darf überall kommentiert werden
 und hier auch noch */

Unser erstes dynamische Skript

Mit der Funktion time(); wird die Unix Zeit angezeigt, es ist die Zeit in Sekunden, seit dem 01.01.1970 um 0Uhr in Sekunden. Bei jedem Aufruf wird nun also diese Zeit in Sekunden angezeigt. Deshalb ist das Skript dynamisch.

<?php
 echo time();
?>

Eine Funktion hat zwei Klammern nach dem Namen eine öffnende und eine schließende, zwischen diesen Klammern können Parameter stehen, Parameter sind Informationen, die diese Funktion beachten soll. In unserem Beispiel sind zwischen den beiden Klammern keine Parameter, da diese Funktion keine Parameter benötigt.

Nun wird man sich Fragen was man mit dieser Zeit soll, die kann man ja so gar nicht lesen. Deshalb gibt es in PHP ein Funktion um dieses Datum anzuzeigen.

<?php
 $aktuelleZeit = time(); // aktuelle Zeit im Unix timestamp der Variable $aktuelleZeit zuweisen

 echo date('d.m.Y h:I:s',$aktuelleZeit); // mithilfe der Datefunktion das Datum formatieren
?>

Jetzt wird das Datum samt Uhrzeit mit Stunden, Minuten und Sekunden angezeigt. Durch die Date Funktion können wir das Datum formatieren, sie hat zwei Parameter. Als ersten Parameter geben wir an, wie wir gerne das Datum formatiert haben. Dabei wird z.B. für d die Zahl für den Tag und mit m die Zahl für den Monat ausgegeben. Für den ersten Paramter gibt es verschiedene Parameter, die jeweils das Datum entsprechend formatieren, alle Parameter können hier nachgeschlagen werden: Parameter für Date. Der zweite Parameter ist der Timestamp den wir formatieren wollen, in unseren Beispiel die aktuelleZeit, wir vorher definiert haben.

Die Antwort ist das tolle Plugin Multi-page Toolkit. Auf der zweiten Seite des Artikels beschreibe ich die Installation und Konfiguration dieses Plugins.

Demo 1 Alert Box

Als erstes registrieren wir ein so genanntes “ready Event” für das Document. Dieses geht in jQuery mit der Funktion $(document).ready(function()). Im Code sieht das folgendermaßen aus:

$(document).ready(function() {
    //Mach irgendetwas wenn das Dokument geladen ist.
});

Wir wollen nun, das wenn man auf einen Link klickt, eine Messagebox erscheint, mit dem Inhalt Hallo Welt. Dazu schreiben wir folgendes in die Funktion:

$(document).ready(function(){
    $("a").click(function(){
        alert("Hallo Welt");
    });
});

Der komplette HTML Code sieht jetzt folgendermaßen aus:

Demo 1 Alert Box – Anzeigebeispiel: So sieht’s aus

<html>
    <head>
        <!--jQuery Framework laden (evtl. Pfad anpassen)-->
        <script src="jquery.js" type="text/javascript"></script>

        <!--Code für Demo 1-->
        <script type="text/javascript">
        $(document).ready(function(){
            $("a").click(function(){
                alert("Hallo Welt");
            });
        });
        </script>
    </head>

    <body>
        <!--Zwei Test Links-->
        <p><a href="#">Ein Link</a></p>
        <p><a href="#">Ein weiterer Link</a></p>
    </body>
</html>

Nun schauen wir mal was wir gemacht haben. $(“a”) ist ein jQuery Selector. Mit $(“element”) können verschieden Sachen selektiert werden, auch Klassen $(‘.klasseDesElements’) oder IDs $(‘#idDesElements’). Es kann aber auch kombiniert werden, um z.B. alle Divs mit der Klasse development zu selektieren $(‘div.development’).

In unserem Fall werden alle a Element in dem Dokument selektiert. click() fügt allen ausgewählten Elementen ein Klick Event hinzu. In unseren Fall wird eine ganz normale Javascript Funktion aufgerufen, nämlich alert(“Hallo Welt”);. Nun was passiert jetzt bei dieser Funkion? Alle a-Elemente führen beim klicken darauf, eine Messagebox aus in der steht Hallo Welt. Also genau das was wir wollten.

Demo 2 CSS Klassen

Eine andere Aufgabe von jQuery ist das hinzufügen und entfernen von CSS-Klassen. Zuerst erstellen wir mithilfe von CSS eine Klasse mit dem Namen test. Wir nehmen in diesem Fall mal eine fette und kursive Schriftart

a.test {
    font-weight: bold;
    font-style: italic;
}

Als nächstes kommen wir zum Javascriptteil. Sobald nun also das Dokument geladen ist, soll nun allen Links die Klasse test hinzugefügt werden. Dazu nehmen wir die zuvor gelernte Funktion $(document).ready(function()) mit der wir nun abfragen, wann die Seite fertig geladen ist. Mit $(“a”) selektieren wir nun alle a-Elemente und fügen mit der Funktion addClass() eine Klasse hinzu, in unseren Fall ist das die Klasse test.

$(document).ready(function(){
    $("a").addClass("test");
});

Nun noch ein paar Links zum Testen hinzufügen, schon werden wir sehen was passiert.

Demo 2 CSS Klassen – Anzeigebeispiel: So sieht’s aus

<html>
    <head>
        <!--jQuery Framework laden (evtl. Pfad anpassen)-->
        <script src="jquery.js" type="text/javascript"></script>

        <!--CSS Klasse "test" macht fett und kursiv -->
         <style type="text/css">
            a.test {font-weight: bold; font-style:italic;}
         </style>

        <!--Code für Demo 2-->
        <script type="text/javascript">
        $(document).ready(function(){
            $("a").addClass("test");
        });
        </script>
    </head>

    <body>
        <!--HTML Links ohne der "test" Klasse-->
        <p><a href="#">Ein Link</a></p>
        <p><a href="#">Ein weiterer Link</a></p>
    </body>
</html>

Wenn wir nun uns die Seite ansehen werden wir feststellen das alle Links fett und kursiv dargestellt werden. Die HTML Links haben also die Klasse test jetzt.

jQuery besitzt einige Spezial Effekte, von denen wir nun auch Gebrauch machen wollen. Sie lassen die eigene Website mit wenig Aufwand schön für den Besucher aussehen.

Als aller erstes nehmen wir eine ganz normale Div Box, mit etwas Text drin:

<div style="background-color:#336699;color:#fff;">
    Ich bin eine Testbox und muss immer viel arbeiten 
</div>

Damit wir die Box besser sehen, habe ich per Style Attribut, die Hintergrund Farbe auf Blau und die Schrift Farbe auf weiß gesetzt.

Nun fügen wir noch einen Link hinzu, der etwas machen soll:

<a href="#" id="klein">Mach die Box klein (80 x 120px)</a>

Ich gebe diesen Link die ID klein, sodass wir später mit jQuery diesen Link selektieren können.

Als nächstes fügen wir noch etwas javascript hinzu, sodass der Link auch etwas macht wenn man drauf klickt:

$(document).ready(function(){
    /*Box klein machen*/
	$('a#klein').click(function(){
		$('div').animate({ height: 80, width: 120 }, "slow", function(){});
	})
});

Wir selektieren mit $(‘a#klein’) unseren zuvor erstellten Link und geben ihn das Event click, wie schon zuvor erklärt wird bei einem Klick auf das Element nun der javascript Code in den Klammer ausgeführt.

Als nächstes bestimmen wir welches Objekt verändert werden soll ($(‘div’)), in diesen Fall sind das alle div Elemente. Mit der Funktion animate können wir Objekte animieren. Animate besitzt verschiedene Eigenschaften, in unseren Beispiel sagen wir height die Höhe auf 80px und width die Breite auf 120px, den Effekt wollen wir nun langsam haben, also hängen wir noch ein slow an.

Demo 3 Spezial Effekte – Anzeigebeispiel: So sieht’s aus

<html>
    <head>
        <!--jQuery Framework laden-->
        <script src="jquery.js" type="text/javascript"></script>

        <!--Code für Demo 3-->
        <script type="text/javascript">
        $(document).ready(function(){
            /*Box klein machen*/
            $('a#klein').click(function(){
                $('div').animate({ height: 80, width: 120 }, "slow", function(){});
            })
            /*Die Box große machen*/
            $('a#gross').click(function(){
                $('div').animate({ height: 200, width: 800 }, "slow", function(){});
            })
            /*Mehrer Effekte bestimmen*/
            $("a#slideFade").toggle(function(){
                $("div").animate({ height: 'hide', opacity: 'hide' }, 'slow');
            },function(){
                $("div").animate({ height: 'show', opacity: 'show' }, 'slow');
            })
        });
        </script>
    </head>

    <body>
        <div style="background-color:#336699;color:#fff;">Ich bin eine Testbox und muss immer viel arbeiten  </div>

        <p><a href="#" id="klein">Mach die Box klein (80 x 120px)</a></p>
        <p><a href="#" id="gross">Mach die Box Groß (200 x 800px)</a></p>
        <p><a href="#" id="slideFade">Dieser Link führt zwei Unteschiedliche Funktionen aus</a></p>
    </body>
</html>

Ich habe noch zwei weitere Links hinzugefügt und genau wie eben noch ein paar Effekte hinzugefügt. Einzige Besonderheit ist bei Link Nummer 3. Er führt beim zweiten Klick eine andere Funktion aus, als beim ersten. Beim ersten Klick lässt er die Box verschwinden und beim zweiten Klick wieder erscheinen. Dafür habe ich die Funktion toggle benutzt. An ihr kann man beliebig viele Funktionen an Reihen, die der Reihe nach abgearbeitet werden und dann wieder von vorne beginnt. Per animate und der height und opacity und der Eigenschaft hide bzw. show kann man die Box verschwinden und wieder erscheinen lassen.

Am besten man guckt sich mal die Beispiel Seite an und probiert es selber einmal.

Wer noch weiter probieren will, sollte sich mal jQuery UI ansehen, hier zu auch ein kleines Tutorial.

Englische Übersetzung von Pathin – http://www.pathin.org/tutorials/jquery-tutorial/