Einleitung

Hab‘ mich letzte Woche mal daran gemacht meinen CD-Manager für’n Blog neu zu machen. Bisher war das Durchschalten der CDs über die bisherige Seite alles andere als komfortabel. Daher wollte ich da schon lange mal was Neues machen. Am meisten daran gestört hat mich, dass beim aufrufen einer CD immer die Seite neu geladen werden musste. Von daher war klar, dass bei der neuen Seite AJAX zum Einsatz kommen muss.
Bevor ich hier jetzt zu sehr ins Detail gehe. Den neuen Web CD-Manager findet man hier: Musik -> Medlans CDs. Ohne meine Seite darum herum lässt er sich (aktuell) über folgende URL aufrufen: http://files.medlan.de/cdm/

Umsetzung

Web-Technologien sind jetzt nicht mein Fachgebiet (ganz und gar nicht). HTML ist ja kein Problem. Ein ‚alert‘ im JavaScript geht auch noch und auch Grundlagen in PHP sind vorhanden. Ich habe ja schließlich auch meine beiden Blogs um ein paar Skripte erweitert.

Für die Umsetzung hatte ich eine kleine TODO Liste. Das Layout sollte in etwa dem meines Desktop CD-Managers entsprechen. Ich wollte einen Slider zum schnellen navigieren. Das ‚GOTO‘ Feld darf natürlich auch nicht fehlen (auch aus dem Desktop CD-Manager übernommen). Die Daten sollten asynchron geladen werden. In Tabs sollten die Daten der CDs und des Bonusmaterial angezeigt werden (wenn vorhanden).

Angefangen habe ich mit einem Grundlayout. Der nächste Schritt war dann die Anzahl der CDs zu lesen. Die Funktion dazu gab es ja schon. Es folgte die Implementierung der Hauptmenüpunkte. Beim Öffnen einer Liste muss der Slider und die bisherige Anzeige zurückgesetzt und die erste CD aus der Kategorie geladen werden. Die Funktionen für den ‚Weiter‘ und ‚Zurück‘ Button waren schnell getippt. Somit konnte man auch schon durch die Listen navigieren. Die Funktion zum Lesen der CD Daten gab es ja ganz grob auch schon. Dennoch bin ich an dieser Stelle auf das erste ‚größere‘ Problem gestoßen. Wie bekomme ich die Daten einer CD, die mit PHP aus der SQLite Datenbank gelesen werden, in meine Anwendung und kann diese dann mit JavaScript verarbeiten? Hmm. Man hört ja immer von JSON. Schauen wir uns das doch mal an. Es dauerte nicht lange um festzustellen, dass dies die perfekte Lösung war, denn mit PHP kann einfach JSON Objekte erzeugen und jQuery kann JSON Objekte asynchron abrufen. Zuerst habe ich nur Gruppe, Titel & VÖ ausgelesen. Das hat gereicht um die Grundlegenden Funktionen zu testen. Anschließend wird das JSON Objekt um die Tracks der CD und das Bonusmaterial erweitert. Nachdem die CD Daten angezeigt wurden, habe ich mich wieder ein wenig der Oberfläche gewidmet und langsam angefangen die Elemente so anzuordnen, wie sie in der finalen Version positioniert sein sollen. Die Layout Formatierungen wurden über CSS vorgenommen.
Eigentlich hätte man an dieser Stelle aufhören können, doch ….

• Ich wollte noch den Anzeigen/Ausblenden Button haben
• Ausblenden und Anzeigen ist nur dann interessant, wenn die Tracks nur dann geladen werden, wenn diese auch angezeigt werden
• Anzeigen -> CD laden -> Ausblenden -> Anzeigen: Tracks wurden neu geladen. Das muss verhindert werden
• Ich hätte gerne noch die CD-Cover angezeigt (Standardmäßig abgeschaltet)
• Die GOTO Funktion aus dem CD-Manager muss noch rein -> Implementiert
• GOTO soll so oft wie möglich den Focus automatisch erhalten
• Focus auf das GOTO Feld muss bei mobilen Geräten verhindert werden :/
• Durch die ASIN kann ich die CD eigentlich auf Amazon verlinken
• Keine ASIN? Dann bei Amazon nach EAN suchen
• Keine EAN? Dann bei Amazon nach der Gruppe suchen
• Die Tabs, die keine Daten enthalten sollen deaktiviert werden
• Bei der Benutzung des Sliders soll eine Vorschau angezeigt werden
• Für die Vorschau brauche ich einen ‚Cache‘ (wird einmalig per Skript erzeugt und beim Start geladen)
• Auf mobilen Geräten soll der Cache beim Start nicht automatisch geladen werden (ca. 310 KB)
• Durch den Cache konnte ich auch die GOTO Funktionen entsprechend erweitern (‚=‘ und ‚#‘)

Dann noch ein wenig für ein ‚runderes‘ Gesamtbild sorgen:

• Auslagern von JavaScript in eine eigenen Datei
• Auslagern von CSS in eine eigene Datei
• Einheitliche Schrift verwenden

Es gibt aber auch noch offene Punkte

• Nahtlose Integration in meinen Blog
• Cache Datei automatisch neu erzeugen, wenn eine neue Datenbank hochgeladen wird
• Vielleicht doch einen ‚Loader‘ anzeigen, wenn man navigiert – manchmal dauert es einfach ein wenig
• Einen Slider für mobile Geräte, denn man auch ziehen kann
• Cache am Client (weniger Daten übertragen) oder Cache am Server (SQLite Zugriffe minimieren) hinzufügen

Technische Details

Layout & Design: HTML & CSS
Programmierung: Javascript, jQuery & PHP
Datenaustausch: JSON
Datenbank: SQLite
Dauer: ca. 20h

Persönliches Fazit

Ich bin begeistert. Der neue CD-Manager sieht nicht nur besser aus als der alte, nein, er lässt sich auch wesentlich besser bedienen. Durch die verwendeten Technologien lässt sich der CD-Manager mit jedem Browser (JavaScript vorausgesetzt) nutzen. Auf meinem Android Gerät sieht der CD-Manager 1:1 genauso aus. Damit kann ich jetzt auch von unterwegs aus schnell prüfen ob eine CD schon in meinem Schrank steht. Damit muss ich mir jetzt auch keine Android App mehr machen. Die Version reicht vorerst mal vollkommen aus.
Bezüglich: JavaScript, jQuery, JSON und CSS: Ich musste fast alles nachschlagen. Klar – hab‘ mich damit nie beschäftigt. Das Resultat kann sich aber sehen lassen. Leider muss ich aber auch sagen es war ein auf und ab. Die Freude war groß, wenn etwas Neues funktioniert hat, doch ca. 10 Sekunden später Stand man vor’m nächsten Problem. Layout war komplett verschoben, weil man ein ‚padding‘ an der falschen Stelle hatte oder es ging kein JavaScript mehr, weil ein ‚;‘ vergessen wurde.

Edit
09.05.2013: Alter CD-Manager wurde deaktiviert. Neuer CD-Manager ist jetzt nicht mehr ‚Preview‘ und wurde nahtlos in den Blog integriert. Ineressante Anmerkung dazu. Damit man mit jQuery JSON Daten von SubDomains einbinden kann muss die Seite, die das Ergebnis zurückliefert im Header folgenden Eintrag enthalten (hier am Beispiel PHP)

header('Access-Control-Allow-Origin: *');