Bücherpoolanzeige mit Filter

Guten Abend,

ich möchte folgendes realisieren, bin mir aber nicht sicher, welche die beste Technik dafür ist. Vielleicht habt ihr Ideen. Ich möchte folgendes:

- Ich hab einen Bücherpool mit etwa 30-40 Bücher.
- Nun will ich die Coverbilder dieser Bücher wie beim Metrostyle von Windows 8 nebeneinander und untereinander anzeigen.
- Wenn man auf ein Büchercover klickt soll sich dieses umdrehen, vergrößern und die Beschreibung des Buches anzeigen.
- Außerdem soll es rechts eine Spalte geben mit mehreren Filtern wie z.B.: gelesene Bücher, aktive oder deaktive Bücher, Genre usw.
- Mehrere Personen sollen den Pool anschauen können, also nicht gleichzeitig bedienen, aber angucken. Daher sollte das Endprodukt evtl. auf dem Laptop aufrufbar (Website o.ä.) und dann auf den TV übertragbar sein.

Ich hab Erfahrung mit HTML, PHP, CSS, MYSQL, etwas MongoDB, C#.

Struct schrieb:

- Ich hab einen Bücherpool mit etwa 30-40 Bücher.

Zum Vergrößern anklicken....

Stinknormales Datenbank-Problem... genauer gesagt relationale Datenbanken, kein so n Hipster-Bullshit wie MongoDB. Sollte ein Nobrainer sein.

- Nun will ich die Coverbilder dieser Bücher wie beim Metrostyle von Windows 8 nebeneinander und untereinander anzeigen.

Zum Vergrößern anklicken....

In HTML/CSS extrem einfach.
Semantisch sinnvollster Ansatz: Aus den Büchern eine unsortierte Liste (<ul>) aufbauen, wobei jedes Buch-"Item" ein <li> ist.
Den Kachel-Look kann man auf zig Varianten erstellen.
Einfachste Lösung? float:left. Macht Probleme, wenn die Kacheln nicht dieselbe Höhe haben.
Bessere Lösung: display:inline-block; Macht mit den Abständen Probleme, wenn man nicht daran denkt, wie sich Inline-Elemente (oder Inline-Blöcke) gegenüber Leerzeichen und Zeilenumbrüchen im HTML-Code verhalten.
Technisch coolste Lösung? display:flex; Nachteil? CSS3, keinerlei Support für IE9 und niedriger. Vorteil? Unglaublich geiles, flexibles System.

- Wenn man auf ein Büchercover klickt soll sich dieses umdrehen, vergrößern und die Beschreibung des Buches anzeigen.

Zum Vergrößern anklicken....

CSS3 3D Transformationen mit ein klein wenig JavaScript für das Click-Handling.
Geht natürlich nur in modernen Browsern, kein Support für IE<=9. IE9 ist eh Schrott, also was solls...

- Außerdem soll es rechts eine Spalte geben mit mehreren Filtern wie z.B.: gelesene Bücher, aktive oder deaktive Bücher, Genre usw.

Zum Vergrößern anklicken....

Stinknormales HTML/CSS - Problem.

- Mehrere Personen sollen den Pool anschauen können, also nicht gleichzeitig bedienen, aber angucken. Daher sollte das Endprodukt evtl. auf dem Laptop aufrufbar (Website o.ä.) und dann auf den TV übertragbar sein.

Zum Vergrößern anklicken....

Du hast Vorkenntnisse in HTML, PHP & MySQL... Was liegt da näher, als auf diesen Bausteinen eine Webanwendung zu bauen? Jetzt noch etwas CSS3 und JavaScript dazu, schon ist dein Bücherpool nicht nur mehrbenutzer-tauglich, sondern auch fit für unterschiedliche Display-Größen, Touch-Devices,...

Die Zukunft gehört Webanwendungen, also warum überhaupt über was anderes nachdenken?

Danke, das geht in die Richtung wie ich es mir vorgestellt hatte.

Hab gestern noch jQuery Grid gegoogelt und einige Treffer, aber keins passt 100%, daher werd ich es selbst machen.

Setz JavaScript nur da ein, wo JS zwingend nötig ist. Das heißt:
- asynchrones Nachladen
- Event Handling (außer Mouseover, das geht mit :hover problemlos in CSS)
- tatsächlich notwendige DOM-Manipulation

In meinem obigen Ansatz brauchst du JS lediglich für das Click-Handling auf den "Kacheln" und evtl. für asynchrones Nachladen der Kachel-Details. Mehr nicht.