Heute ist endlich mal wieder ein Projekt fertig geworden, bei dem man sehen kann, dass für Dynamik nicht zwingend Flash notwendig ist. JQuery wird immer beliebter und so stehen für alle möglichen Probleme auch mehr oder weniger qualifizierte Plug-Ins zur Verfügung.

Skalierende Hintergrundbilder

Nach ein paar Anfangsschwierigkeiten ließ sich das JQuery-Plug-In Supersized durchaus dazu bewegen, Bilder auf volle Viewport-Größe zu skalieren. Weiterhin hat dieses Plug-In einige nette Zusatzfeatures, beispielsweise eine Galeriefunktion, so dass man skalierte Bilder mit Effekten tauschen kann. Das Plug-in ist verfügbar unter

www.buildinternet.com/project/supersized

Audio/Videoplayer

Für den Audioplayer hat sich bereits im Projekt MaxxTone der JPlayer bewährt. Über seine Skins lässt sich der doch erst sehr dröge daherkommende Player komplett umstylen, so dass eine Anpassung auf das Design einer jeden Webseite möglich ist. Der Player nutzt HTML5- und Flash-Techniken zur Wiedergabe, so dass auch moderne Geräte in der Lage sind, ohne Flash Medien wiederzugeben. Im Gegensatz zu vielen anderen Lösungen ist der JPlayer mit der MIT-Lizenz ausgestattet und daher rechtlich unproblematisch einzubetten.

www.jplayer.org

Inpage-Popups und Akkordion

Für diese Elemente kamen die beiden größten JQuery-Plugin-Bibliotheken zum Einsatz. Das Inpage-Popup entstammt in der Basis dem Overlay aus den JQuery-Tools. Das Akkordion ist ohne Anpassung aus dem JQuery-UI entnommen. Die Plug-Ins sind verfügbar unter

www.flowplayer.org/tools/overlay/index.html

www.jqueryui.com

Good Luck Deniz

Das Projekt ist gestartet und nun bleibt mir nur noch, Deniz viel Erfolg zu wünschen. Wer sich das Projekt ansehen möchte, kann unter www.deniz-gencler.de den einen oder anderen Blick riskieren.

www.deniz-gencler.de

Maxx Tone Startseite

Neben den defacto-Standards meiner Webprojekte (960-Grid System, jQuery und jQuery-Plug-Ins) ist dieses Projekt natürlich XHTML-konform. Besondere Herausforderungen war das Karussell mit integrierten MP3-Player, mit welchem die Referenzbeispiele des Tonstudios gezeigt und abgespielt werden sollen.

Zum Einsatz kamen hierfür das jQuery-PlugIn CloudCarousel (http://plugins.jquery.com/project/CloudCarousel) von „Professor Cloud“ sowie das jPlayer-Plug-In (http://www.jplayer.org/) zur Wiedergabe der MP3-Dateien.

Lediglich 3 Zeilen Codeveränderung waren notwendig, um die Interaktion des Karussells mit dem jPlayer zu gewährleisten, da das CloudCarousel leider noch nicht auf Events ausgelegt ist.

Im Testing liefen dies Seiten auf IE8, Firefox 3/4/5 sowie Safari problemlos. Für iPad, iPhone und Browser ohne Flash-Unterstützung wurden adäquate Alternativen integriert, um die Anzeige gleichwertig zu gewährleisten.

Zu betrachten ist das Projekt unter www.maxxtone.de.

Technisch war im Webprojekt Platz für neue jQuery-Plugins und, wie mittlerweile fast in jedem Projekt, ebenso für Cufon. Während Cufon wie immer für den gelungenen Level an Corporate Identity sorgt, sind in diesem Projekt jquery-tools und ein Scrollable-Plugin verbaut.

Die jQuery-tools (http://flowplayer.org/tools/index.html) sind in diesem Projekt mit den Komponenten Scrollable (Bildwechsel) sowie Overlay (Kontaktformularpopup) verbaut. Besonders interessant ist die Lösung des Overlays. Hierbei bieten die jQuery-Tools nur eine Basis, um Overlay-Popups zu erstellen. Mit einer geschickten Kombination ist es jedoch möglich, wie mit jedem anderen Overlay-Popup zu arbeiten. Hier der passende Quellcode:


$(document).ready(function() {
$("a[rel]").overlay({ mask: '#928959', onBeforeLoad:
function() {
var wrap = this.getOverlay().find(".contentWrap");
wrap.html('<iframe frameborder="0" style="width: '+(this.getOverlay().innerWidth())+'px; height:'+
(this.getOverlay().innerHeight())+'px; border: none; margin: none;" src="'+
htmlencode(this.getTrigger().attr("href"), true)+'"></iframe>')
}
});
});

Hinzu kommt die Funktion htmlencode, welche dem htmlentities in PHP entspricht.


function htmlencode(s, quotes){
if ( !quotes )
return $("<div/>").text(s).html();
else
return $("<div/>").text(s).html().replace(/"/g, '&quot;').replace(/'/, '&#039;');
}

Damit ist das Overlay entsprechend umgerüstet und kann als browser-kompatibles InPage-Popup genutzt werden.

Ebenso neu eingesetzt ist das Plugin jScrollPane von Kelvin Luck (http://www.kelvinluck.com), welches in Version 2.0 erschienen ist. Es bietet hervorragende Möglichkeiten, Scrollbars zu skinnen bzw. die Browser-Scrollbars zu ersetzen. Einzige Unzulänglichkeit, man kann die Scrollbars nicht vom Inhalt separieren.

Bleibt nur noch, dem Projekt kulturgeleit gutes Gelingen zu wünschen!

kulturgeleit.de / kulturgeleit.com

jQuery tools

jScrollPane

Hi. This is the qmail-send program at <HOST>.(none).
I'm afraid I wasn't able to deliver your message to the following addresses.
This is a permanent error; I've given up. Sorry it didn't work out.
<root@<HOST>>:
Sorry, I couldn't find any host named <HOST> (#5.1.2)

--- Below this line is a copy of the message.
Return-Path: <anonymous@<HOST>>
Received: (qmail 23991 invoked by uid 107); 3 Feb 2011 16:00:09 +0100
Delivered-To: drweb@<HOST>
Received: (qmail 23986 invoked by uid 107); 3 Feb 2011 16:00:09 +0100
Date: 3 Feb 2011 16:00:03 +0100
Message-ID: <20110203150003.23972.qmail@<HOST>>
From: root@<HOST> (Cron Daemon)
To: drweb@<HOST>
Subject: Cron <drweb@<HOST>> /opt/drweb/update.pl
Content-Type: text/plain; charset=UTF-8
X-Cron-Env: <SHELL=/bin/sh>
X-Cron-Env: <HOME=/var/drweb>
X-Cron-Env: <PATH=/usr/bin:/bin>
X-Cron-Env: <LOGNAME=drweb>
...


So ist die Abhilfe natürlich so einfach und simpel wie die Ursache. Ein Eintrag in die Alias-Tabelle reicht aus, um alle E-Mails an root weiterzuleiten:


# /etc/aliases
mailer-daemon: postmaster
postmaster: root
nobody: root
hostmaster: root
usenet: root
news: root
webmaster: root
www: root
ftp: root
abuse: root
noc: root
security: root
drweb: root


Danach noch schnell den Mailserver neu gestartet und schon erreichen den Server-Administrator die E-Mails auf regulärem Weg.

Kurz vor Weihnachten erhielt ich den Anruf meines Frankfurter Grafikers, ob ich ihm einmal kurz helfen könne, er bekommt ein Flash nicht mittig auf die Seite zentriert. Als ordentlicher Webprogrammierer ist dies natürlich kein Problem und so schüttelte ich kurz mit dem linken Arm und siehe da … die übliche Zentrierung fiel wie von Geisterhand in das offene Skype-Fenster und funktionierte.

Wie ein Projekt entsteht …

Das Thema hatte sich nahezu erledigt und war mir auch schon aus dem Sinn, als kurz vor Weihnachten ein weiterer Hilfeschrei kam: “Martin, kannst du mir einen Facebook-Button einbauen?” Natürlich würde das gehen, allerdings begann jetzt die Phase, über das Gesamtk0nzept nachzudenken und kurz darüber nachzudenken, ob der Weg eigentlich richtig ist. Also wieder drei Schritte zurück und nachgeschaut, was passieren soll und was die eigentlichen Anforderungen sind. Und wie dies mit Wespennestern so ist, man sticht sehr schnell rein und … das Projekt war geboren.

Das Hole Magazine

Julian Laidig hat als Fotograf mit einem kleinen Projekt ein ganzes Magazin voller Themen rund um das Thema Modelling, Styling und Fotografie gestartet. Dabei entstanden neben sehr schicken Fotos auch Produktionsvideos und das Online-Magazin.

Dank moderner Techniken ist das Magazin mit Hilfe von issue.com im Internet anzeigbar, enthält realistische Blätterfunktionen und zur Erhöhung der Lesbarkeit auch eine Skalierung. Dabei musste kein Qualitätsverlust hingenommen werden, sowohl Bilder als auch Texte blieben in der Online-Version gestochen scharf.

Nach und nach ergaben sich im Gespräch weitere Anforderungen:

1. Das blätterbare Magazin stellt die Hauptseite des Auftritts dar.
2. Sowohl Julian Laidig als Fotograf als auch Ondrej Navratil als Grafiker sollten verlinkt werden
3. Eine Kontaktmöglichkeit via E-Mail sollte möglich sein, allerdings ohne die Preisgabe für SPAM-Robots
4. Das Making-Of-Video sollte sich in einem In-Frame-Popup über dem blätterbaren Magazin öffnen
5. Es muss ein Impressum geben, das auch ohne Flash und andere Script-Technologien zu öffnen ist
6. “Gefällt mir” darf nicht fehlen – die Verknüpfung mit Social Media soll erstellt werden.

Verdammt viel Holz für eine kleine zentrierte Seite …

Für jede dieser Einzelanforderungen ist eine Lösung verfügbar, diese zusammenzubringen und insgesamt funktional zu machen war die Schwierigkeit:

1. Das Flash von Issue.com wird mittels IFrame eingebettet.

2. Für die Darstellung der externen Seiten wird eine Verlinkung in einem neuem Fenster angestrebt.

3. Für die dynamischen Funktionen wird JQuery als performantes und einfaches Framework genutzt. Für die SPAM-Vermeidung dient ein einfaches, eigen erstelltes Script, welches die E-Mail-Adressen nachträglich korrigiert. Die In-Frame-Popups werden mit Hilfe von Fancy Box – einer Erweiterung für JQuery – dargestellt. Optisch fügen sich diese Popups hervorragend in den Stil des Magazins ein.

Natürlich klingt dies alles nach Baukasten-System, aber leider passt nicht immer alles zusammen und so musste das Fancy-Popup tatsächlich noch um eine Option erweitert werden: IFrame ausblenden, wenn sich das Popup öffnet. Warum? Das Flash auf Issue.com leuchtete natürlich durch, ein Problem, was sich noch über Jahre nicht auflösen wird, obwohl es bereits Lösungen gibt.

Was ist, was wird?

Entstanden ist eine optisch repräsentative Landing-Page- welche verschiedene Webkomponenten zusammen führt und das HOLE MAGAZINE repräsentiert.Das Magazin ist mittlerweile sogar durch das österreichische Boulevard-Fernsehen gegangen und es sind in jedem Fall sehr schöne Bilder und Videos entstanden

Sofern es eine Fortsetzung des Low-Budget-Projekts gibt, stehen insbesondere hier folgende Themen aus:

• Wie werden Archivierungen alter Magazine durchgeführt
• Wie können die Magazintexte von Google indiziert werden

Das entsprechende Paket heißt arno-iptables-firewall. Die Projektseiten hierfür sind bei Freshmeat oder auf der Autorenseite zu finden.

Notwendiges Wissen für die Installation

Vorausgesetzt wird grundlegendes Wissen in Netzwerk-Technik (IP-Adressen, Ports, internes und externes Netz) sowie Basisinformationen von der Installation auf Debian mit Hilfe von Aptitude. Darüber hinaus sollte bekannt sein, welche Netzwerkschnittstellen auf dem System genutzt werden und ob diese intern oder extern genutzt werden.

Installationsschritte

Alle angegebenen Befehle sind für Debian Lenny beispielhaft hinterlegt. Für ältere Systeme kann jedoch mit kleinen Anpassungen analog verfahren werden.

1. Update der Paketlisten und eventuell Update des Systems

aptitude update
aptitude safe-upgrade

2. Installation der Firewall

Die Installtion mittels aptitude führt die entsprechenden Paketinstallationen durch.

aptitude install arno-iptables-firewall

Direkt im Anschluss erfolgt die Abfrage nach der Einrichtung der Firewall. Für die erste Konfiguration wird die Einrichtung mittels Debconf empfohlen. Diese Option kann später noch verändert werden, jedoch ist dies erst einmal ein nahezu sicherer Weg zu einer möglichen funktionalen Konfiguration.

Danach erfolgt die Angabe der externen Netzwerkschnittstellen, also all jene Schnittstellen, welche mit dem Internet kommunizieren. Üblicherweise ist dies eth0 oder eeth1. Virtuelle Schnittstellen sind hier jedoch nicht anzugeben!

Es erfolgt die Abfrage, ob der Rechner seine IP-Adresse auf der  externen Netzwerkschnittstelle per DHCP erhält.

Danach erfolgt eine wichtigsten Abfragen, die Abfrage der zu öffnenden Ports. Diese sollten entsprechend der Nutzung des Servers eingetragen werden.

Dieser Schritt erfolgt sowohl für TCP- als auch für UDP-Ports.

Anschließend erfolgt die Angabe der internen Netzwerkschnittstellen. Auf diesen Netzwerk-Interfaces wird die Firewall keine Einschränkung installieren. Sofern es interne Netzwerkschnittstellen gibt, müssen diese hier eingetragen werden, anderenfalls bleibt das Feld leer.

Nach diesem Schritt ist die Basis-Konfiguration von IP-Tables durchgeführt und die Einstellungen können geladen werden. Sofern sicher ist, dass die Eingaben korrekt sind, kann der Neustart der Firewall durchgeführt werden. sofern -Profis hier der Automatisierung nicht trauen, kann dieser Schritt mit “nein” beendet werden. In diesem Fall wird die Firewall erst beim nächsten Server-Neustart geladen.

Nun sollte die Firewall aktiv sein. Am einfachsten lässt sich dies testen, wenn man einen Ping auf das System durchführt. Da die Firewall Pings auf der externen Schnittstelle zunächst blockiert, sollten diese nun ins Leere führen.

3. Reaktiveren der Pings (optional)

Für einige Systeme ist es notwendig, dass Pings eine Antwort senden. Daher sollte man in diesem Fall ICMP-Requests zulassen, so dass das System auch wieder antwortet. Hierfür muss die Datei /etc/arno-iptables-firewall/debconf.cfg editiert werden

nano /etc/arno-iptables-firewall/

in dieser Datei muss die Variable DC_OPEN_ICMP auf 1 gesetzt werden. Sollte es diese Option nicht geben, kann sie manuell hinzugefügt werden. Ob diese dann berücksichtigt wird, ist jedoch abhängig von der Version des installierten Scripts.

DC_OPEN_ICMP=1

4.  Rekonfigurieren der Firewall / Übernahme von Änderungen in der Datei debconf.cfg (optional)

dpkg-reconfigure arno-iptables-firewall

Dies führt dazu, dass die bei der Installation durchgeführten Schritte erneut abgefragt werden. Vorher konfigurierte Variablen werden übernommen und vorgeschlagen.

Genutzte Paket-Versionen

arno-iptables-firewall 1.8.8.0-2

iptables 1.4.2-6

nano 2.0.7.5

Webentwickler kennen das Problem: Täglich kommen neue, schnellere, bessere Browser auf den Markt und je nach Anwenderkreis werden diese auch genutzt. Was jedoch des Anwenders Freud, ist des Entwicklers Leid, denn nicht jeder nutzt die immer neuen Features neuerer Browserversionen. Mittelständler und Großunternehmen rangieren teilweise noch mit dem Internet Explorer 6 im Internet, die Updates sind auch so schnell nicht geplant. Also bleibt Webentwicklern nichts weiter übrig, als seine Systeme abwärtskompatibel zu produzieren. Doch woher nimmt man altes Softwareequipment, wenn der Standard schon weit fortgeschritten ist?

Eine Lösung

Microsoft hat es hier einmal geschafft, sich durch besonderen Service hervor zu heben, denn der Betriebssystem-Spezialist liefert nicht nur die Virtualisierungssoftware für alte Systeme, sondern bringt auch gleich seinen Browser auf verschiedenen Plattformen mit.

Mit Microsoft Virtual PC und den entsprechenden Images stehen einem Internet Explorer 6 – 8 in den XP und Vista-Umgebungen zur Verfügung. Sofern der Entwicklungsrechner mit einigermaßen aktueller Hardware ausgestattet ist, lässt diese Kombination ein doch recht komfortables Entwickeln zu, das Beste: das ganze kostet bis auf die vorhandene Internet-Verbindung keinen Cent!

Unter http://www.microsoft.com/windows/products/winfamily/virtualpc/default.mspx stellt Microsoft den Virtual PC zur Verfügung, die entsprechenden Images sind unter http://www.microsoft.com/downloads/details.aspx?FamilyID=21eabb90-958f-4b64-b5f1-73d0a413c8ef&displaylang=en#filelist verfügbar.

Natürlich geht nichts ohne persönliche Anpassung und daher sollte man in der virtuellen Umgebung die Region doch auf die eigenen Bedürfnisse umstellen. Über Start > Control Panel > Regional and Language Options die Auswahl German (Germany) stellt schon einmal die deutschen Zahlen- und Datumsformate ein. Im gleichen Fenster im Register Languages im Abschnitt  Text services and input languages verbirgt sich unter dem Button Details die Möglichkeit, das deutsche Eingabeschema hinzuzufügen. Damit lassen sich dann auch die deutschen Umlaute nutzen.

Aufgrund des englischen Tastaturschemas hat Microsoft die AltGr-Taste als Hosttaste verwendet. Leider benötigt man die Taste AltGr im deutshcen Sprachschema recht häufig, so dass es doch recht hilfreich ist, eine Umbelegung auf die rechte StrG-taste vorzunehmen. ie lässt sich im Virtual PC Konsolenfenster über Datei > Optionen > Tastatur erledigen. Einfach im Fenster in das Feld “Aktuelle Hosttaste” klciken und die rechte Strg-Taste drücken. Ein Klick auf Ok bestätigt die neue Einstellung.

Non-IE-Browser

Die Lösung für Internet Explorer ist nun klar. Allerdings gibt es mehr als nur die Microsoft-Welt und so müssen natürlich auch Opera und Co dran glauben. Allerdings ist Microsoft auch hier bereits so nett, uns die Basis zu liefern, denn in die virtuellen Umgebungen lassen sich Alternativbrowser installieren und so kann man in eine neue virtuelle Maschine einen Download von Firefox oder Opera installieren und hat ohne Mühe die neue Testumgebung parat. Wo bekommt man die alten Browser her? Auch hier gibt es Spezialisten und so hat man unter http://browsers.evolt.org/ eine ganze Sammlung älterer und neuerer Browser zusammengestellt, welche sich recht mühelos downloaden und installieren lassen.

Nachteile

Natürlich gibt es auch hier Kehrseiten und man sollte diese kennen, bevor man zu einem produktiven Einsatz des Systems kommt:

1. Die aktuellen Microsoft-Images arbeiten nur bis zum Januar 2010, dann schalten sich die Betriebssysteme tot. Sofern man hier also viel Konfigurationsaufwand in die Images stecken muss, um seine virtuelle Umgebung zu erhalten, sollte man überlegen, ob es dann nicht sinnvoller ist, in einer virtuellen Umgebung das System selbst aufzusetzen. Hierbei entstehen dann jedoch auf legalem Wege Kosten für die entsprechenden Betriebssysteme.
2. Die virtuelle Umgebung benötigt Festplattenkapazität. Pro Installation muss mit circa dreifacher Größe für die Installation sowie mit circa doppelter Größe der Original-Images für den Betrieb einer virtuellen Umgebung gerechnet werden.
3. Parallelbetrieb von virtuellen Umgebungen ist möglich, jedoch benötigt jede einzelne Umgebung entsprechenden Arbeitsspreicher sowie CPU-Kapazität. Muss man also über mehrere Umgebungen gleichzeitig testen, kann es hilfreich sien, trotzdem mehrere Rechner zu nutzen, auf denen dann die einzelnen Umgebungen laufen

Fazit

Mit der gezeigten Lösung gibt es einen stabilen Weg, verschiedene Umgebungen abzubilden und mit diesen zu entwickeln. Tests und Verhalten sind mit diesen Mitteln aussagekräftiger als mögliche Hacks für Parallelinstallationen, ebenso sind Entwicklungsumgebung und Testsystem voneinander getrennt.

So ist es nicht verwunderlich, dass es einem Schweißperlen auf die Stirn treibt, wenn man versucht, verzweifelt eine Verbindung einzurichten und das W-LAN mit der Meldung “Die Verbindung konnte nicht hergestellt werden” den Dienst quittiert, obwohl man vorher noch den Netzwerkschlüssel eingeben durfte.

Natürlich ist der erste Schritt, den Schlüssel zu prüfen, aber nach einigen weiteren Versuchen dürfte klar sein, dass man sich nicht vertippt hat und die Lösung (hoffentlich) nicht am eigenen Tippvermögen scheitert.

Erste Hilfe scheint nach einer gründlichen Google-Suche das Zurücksetzen der Netzwerkverbindungen im iPhone zu sein, eine Option, die man nicht so ohne weiteres findet. Über Einstellungen – Allgemein – Zurücksetzen kann man einzelne oder alle Komponenten des iPhones resetten. Nach einem Neustart des Telefons sollten nun alle W-LAN-Netzwerke verschwunden sein und man kann den EInwahlversuch erneut starten.

Leider hilft bei einigen W-LAN-Routern trotz WPA- und WPA2-Verschlüsselung auch dieser Neustart nicht. Schuld ist, wie bei meinem Beispiel mit dem NETGEAR ProSafe VPN Wireless ADSL Gateway DGFV338, der Verschlüsselungsalgorithmus, denn während einigen Geräten AES256 ausreicht, benötigen andere TKIP, so offensichtlich auch das iPhone.

In so einem Fall hilft dann nur, die Firmware der Router zu upgraden, in der Hoffnung, die Hersteller haben nachgebessert. NETGEAR hat dies getan und – nach einem nochmaligen Zurücksetzen der iPhone-Netzwerkeinstellungen – war das Problem behoben und das Gerät konnte sich problemlos in das W-LAN-Netzwerk einwählen.

In meiner Vergangenheit bin ich dem System mehrfach begegnet und bis auf ein paar kleine, aber feine Codeschnipsel konnte ich dem System nahezu nichts abgewinnen. In der uns von der Living-e AG übermittelten Version waren offensichtlich alte PHP4-Codefetzen zusammen mit neuen Funktionen in PHP5 ausgeliefert worden. Die Projektstruktur war dadurch mehr als unübersichtlich und das gesamte Projekt war logisch nicht ganz nachvollziehbar aufgebaut. Es handelte sich dabei um ein Stable-Release, welches wir niemals zum Projekteinsatz brachten.

Das gesamte System machte den Eindruck, als sei es mit altem und neuem Code geflickt worden. Etliche Features ließen sich auch nicht quer verbinden. Ein Austausch von Funktionen gestaltete sich daher ebenso schwierig wie die Anpassung der Templates an eigene Bedürfnisse, welche das System erweiterten.

Aus diesem Grund läßt hier der EIndruck nicht los, dass Living-e versucht, die in die Jahre gekommenen Kinder kurz vor dem Sterben mit Hilfe der Open Source-Gemeinde zu retten. Bleibt Living-e nur zu wünschen, dass ihnen dies trotz vielfach besserer Konkurrenz mit der Open Source-Version 6 gelingt.

Zur Meldung auf Heise.de

Zur Meldung aus dem Software & Support Verlag

Progressbars sind mittlerweile ein gängiges Mittel, um Statusanzeigen zu realisieren. Seit 2003 nutze ich diese in verschiedenen Projekten, jedoch waren die Mittel, diese zu regeln, in der Vergangenheit eher holperig, unkomfortabel oder instabil gelöst. Musste in Projekt umziehen oder gab es neue Browser oder auch Flash-Versionen, begann die Konfiguration und das Rätselraten von neuem. CGI und Flash oder per Output-Buffer gesteuerte Javascript-Bars waren immer instabil und hielten selten länger als ein Jahr in einem Projekt aus.

Dank der “Erfindung” von Ajax war man daraufhin in der Lage, für Prozesse, die nach einem Request durchgeführt wurden, bereits gute und flüssige Prozessanzeigen zu realisieren. In verschiedenen Projekten habe ich beispielsweise Datensammlungen oder das Erstellen von ZIP-Archiven visuell dargestellt.

Mit der PHP-Version 5.2 lässt sich nun auch über die Extension APC ein Upload mit einer Progress-Anzeige sinnvoll lösen, denn im Wesentlichen verändert sich nichts. Um dieses Feature zu nutzen, sind jedoch ein paar Vorbereitungen nötig:

1. Installation von APC

Benötigt werden:

• Root-Zugriff auf die Kommandozeile
• ein installiertes und auf Kommandozeilenebene funktionsfähiges PEAR bzw. PECL
• Internet-Zugriff

Zunächst einmal wird APC mittels PECL installiert:

testserver:~# pecl install apc

Bei der darauffolgenden Frage die Option APCX ändern auf “NO”

Use apxs to set compile flags (if using APC with Apache)? [yes] : no

Nun folgen etliche Zeilen Kompilierung und Installation. Abhängig vom System (in meiner Debian-Testumgebung ist es zwingend notwendig) muss in die php.ini bzw. im Debian in eine separate Datei

extension=apc.so

eingetragen werden.

Ausschnitt aus der PHP-Info zum APC-Eintrag

Ein Neustart des Webservers sollte nun – oh Wunder – die Extension geladen haben. Dies lässt sich am einfachsten Über eine Ausgabe der phpinfo(); prüfen, hier sollte es einen neuen Eintrag zu APC geben. Sofern APC-Support “enabled” ist, kann es weitergehen mit dem PHP-Teil der Installation. Sollte das Modul noch nicht aktiviert sein, hilft in der Regel ein Basiseintrag in der php.ini:

[APC]
apc.enable_cli=0
apc.enabled=1
apc.num_files_hint=1024
apc.optimization=0
apc.rfc1867=1
apc.shm_segments=1
apc.shm_size=128
apc.ttl=7200
apc.user_ttl=7200

2. PHP-Dateien und deren Funktionsweise

Grundsätzlich funktioniert das Uploaden nun in der Weise, dass PHP in der Lage ist, einen weiteren Request aus der gleichen Quelle parallel zum laufenden Request zu beantworten. Dies bedeutet, dass man eigentlich nur dafür sorgen muss, dass PHP während des Uploads brav antwortet, wieviel Upload statt fand. Hierfür sind folgende Codeschnipsel notwendig:

Das Formular in der HTML-Datei:

<form action="upload.php" method="post" target="uploadFrame" enctype="multipart/form-data">


<input type="file" name="upload" />
<input type="hidden" name="APC_UPLOAD_PROGRESS" value="<?php echo md5(uniqid(rand(), true)); ?>" />
<button type="submit" onclick="this.disabled=true; setTimeout('requestStatus(\''+this.form.APC_UPLOAD_PROGRESS.value+'\')', 1000);">Abschicken</button>
</form>

Zu beachten ist, dass APC mit dem versteckten Feld APC_UPLOAD_PROGRESS mitgeteilt wird, wie die eindeutige Id für diesen Upload lautet. Der Bezeichner muss mit der Angabe apc.rfc1867_name in der PHP-Konfiguration überein stimmen.

Zusätzlich muss in den HTML-Code ein IFrame eingebaut werden, an welches die Upload-Datei geschickt wird. Dies wird notwendig, weil alle gängigen Browser durch das Abschicken des Formulars im gleichen Fenster die Seite blockieren würde und Änderungen im HTML-Code dann nicht mehr möglich sind.

<iframe src="blank.html" name="uploadFrame" style="display:none"></iframe>

Zusätzlich sollte fehlt natürlich noch ein Platz, um den Upload-Status anzuzeigen. Hier sind mehrere Varianten denkbar, für einen ersten Test reicht zunächst erst einmal ein leeres DIV.

<div id="divStatus"></div>

Die Datei für den Empfang des Uploads (upload.php)

An dieser simplen Funktion ändert sich genau nichts, der Upload funktioniert hier genau gleich:


<?php
if (isset($_FILES['upload'])) {
move_uploaded_file($_FILES['upload']['tmp_name'], 'upload/'.$_FILES['upload']['name']);
}
?>


Natürlich muss man hier selbst für Sicherheit etc. sorgen, aber im Grundsatz ist der Upload identisch.

Die Datei für die Statusmeldung (status.php)

Ihre einzige Aufgabe ist es, den Upload anhand der eindeutigen Id zu identifizieren und mit Hilfe der Funktion apc_fetch() den aktuellen Status auszulesen. Dieser muss dann nur noch entsprechend aufbereitet werden, um im richtigen Format an die HTML-Seite übermittelt zu werden:

<?php
$arr_status = apc_fetch('upload_'.$_GET['str_apcId']);
printf("<pre>%s</pre>", print_r($arr_status, true));
?>

Der Javascript-Teil

function requestStatus(str_apcId)' {

var request = new Request({
url: ‘/status.php?apcId=’+str_apcId,
onComplete: function(responseText) {
$(‘uploadStatus’).innerHTML = responseText;
}
}).send();
}

Der Javascript-Part sollte hier sehr individuell ausfallen, dies ist insbesondere abhängig vom genutzten Javascript-Framework, von der Art, den Status anzuzeigen sowie den technischen Möglichkeiten. Das gezeigte Beispiel wäre eine Möglichkeit in MooTools, aber auch hier gilt, dass sowohl die Schnittstelle zum Server als auch das Javascript abgesichter sein sollten gegen einen Fremdzugriff.

Quellen:

http://www.debianblogs.com/debian_apc_alternative_php_cache

http://www.coder-wiki.de/HowTos/PHP-AJAX-Upload-Fortschritt

http://mootools.net/docs/Request/Request

Update:

Wer Probleme bei der Installation mit PECL bekommt, sollte überprüfen, ob folgende Pakete installiert und verfügbar sind:
php5-dev
apache2-dev
build-essentials

Die Namen der Pakete sind zwischen den Distributionen unterschiedlich, wichtig ist, dass sowohl von PHP als auch vom installierten Apache die Development-Pakete zur Verfügung stehen und alle notwendigen Bibliotheken installiert sind.