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

Wer sich den Artikel ansehen will: http://d4nza.de/blog/tutorials/jquery-tutorial-1

Noch dazu habe ich noch einen kleinen Link mit den über 50 nützlichen jQuery Plugins: drweb.de. Einfach mal reinschauen und Sachen ausprobieren.

Mein absolutes lieblings Plugin ist natürlich die jQuery Lightbox. Direkt gefolgt vom jQuery Dateibrowser, den ihr dort findet: jQuery

Allen in allen kann man sagen das jQuery ein Top Framework ist und so schnell nicht von der Konkurrenz geschlagen wird.

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/

Fakt ist man kann damit, wenn man weiß wie, sehr schnell schöne Funktionen schreiben.

http://jquery.com/