Listenansicht / Kachelansicht

[Sara]

Guten Morgen,

auf meiner kleinen Community Seite können User sich ein eigenes Profil anlegen. Bis jetzt war es so dass ich auf der Übersichtsseite nur die Profilbilder mit dem dazugehörigen Benutzername angezeigt habe.

In letzter Zeit kommt vermehrt der Wunsch auf sich direkt mehr Informationen zum jeweiligen User anzeigen lassen zu können. Diesem Wunsch komme ich sehr gerne nach, allerdings würde ich dieses gerne auf folgende Art lösen:

Standartmäßig sind weiter die Profilbilder mit dem dazugehörigen Usernamen zu sehen. Wenn ein User auf einen Button klickt möchte ich gerne eine Art Listenansicht darstellen, das heißt immer zwei Profile in einer Reihe (bzw. so viel wie eben Platz ist) Links davon das Profilbild, daneben den Benutzernamen und darunter ein paar weitere Informationen.

HTML und CSS und PHP ist nicht das Problem nur wie kann ich dieses dynamisch umschalten? Ich möchte ungern die komplette Seite neu laden. Könnte man in diesem Fall mit jQuery bzw. Javascript machen? Ich muss dazu sagen, ich kenne mich mit jQuery und JavaScript nur sehr wenig aus. Alles was ich bis jetzt eingesetzt habe, habe ich mir im Netz zusammen gesucht.

Bin für jede Idee offen, da ich mit der Umsetzung noch ganz am Anfang stehe. Vielleicht hat jemand sogar ein fertiges Beispiel?

[Gunnar Bittersmann]

@@Sara

HTML und CSS und PHP ist nicht das Problem nur wie kann ich dieses dynamisch umschalten? Ich möchte ungern die komplette Seite neu laden. Könnte man in diesem Fall mit jQuery bzw. Javascript machen?

Ja, einfach nur eine Klasse oder ein data-…-Attribut eines Elternelements ändern, den Rest erledigt CSS.

Vielleicht hat jemand sogar ein fertiges Beispiel?

Letztens erst was gebaut. Das war etwas umfangreicher, hab mal das Entscheidende extrahiert: Beispiel. (Möglich, dass noch etwas zu viel übriggeblieben ist.)

LLAP 🖖

[Sara]

Letztens erst was gebaut. Das war etwas umfangreicher, hab mal das Entscheidende extrahiert: Beispiel. (Möglich, dass noch etwas zu viel übriggeblieben ist.)

Hallo Gunnar,

vielen Dank für das tolle Beispiel, so etwas suche ich. Dazu habe ich noch eine Frage. Bei dir werden alle vorhanden Informationen mit CSS anderes angeordnet, sprich der User sieht immer genau das gleiche.

Ich möchte allerdings bei Klick auf den Button Listenansicht, weitere Informationen haben. Ist es in diesem Fall nicht sinnvoll diese Daten mit jQuery nachzuladen? Alternativ müsste ich ständig alle Informationen auslesen und diese mit CSS verstecken was eigentlich nicht nötig ist, da die Datenbank jedes Mal unnötig beansprucht wird?

[Gunnar Bittersmann]

@@Sara

Ich möchte allerdings bei Klick auf den Button Listenansicht, weitere Informationen haben.

Du könntest ja bestimmte Daten in einer Ansicht mit CSS verstecken.

Ist es in diesem Fall nicht sinnvoll diese Daten mit jQuery nachzuladen?

Du meinst mit AJAX. jQuery vereinfacht den Umgang damit etwas, ist aber nicht erforderlich.

Alternativ müsste ich ständig alle Informationen auslesen und diese mit CSS verstecken was eigentlich nicht nötig ist, da die Datenbank jedes Mal unnötig beansprucht wird?

Ich würde vermuten, die Datenbank wird weniger beansprucht, wenn gleich komplette Datensätze ausgelesen werden und nicht später nochmal weitere Daten angefragt werden müssen. Hängt auch von der Datenbank ab: Steht alles in einer Tabelle oder sind die Daten über mehrere Tabellen verteilt?

Dafür passiert die Umschaltung zwischen den Ansichten blitzschnell, da die Daten ja schon beim Client sind.

Demgegenüber stünde eine Wartezeit, wenn Daten erst nachgeladen werden müssen. Was du einsparen würdest, wäre die Übertragung evtl. nicht angezeigter Daten im HTML-Code. Das ist bei geringem Umfang nur sehr wenig Text.

TL;DR: It depends.

LLAP 🖖

[Sara]

Hallo Gunnar,

Du könntest ja bestimmte Daten in einer Ansicht mit CSS verstecken.

Genau das meinte ich. Dazu nutze ich display:none;

Du meinst mit AJAX. jQuery vereinfacht den Umgang damit etwas, ist aber nicht erforderlich.

Richtig, da in meinem Projekt jQuery eingebunden ist kann ich darauf auch zurückgreifen :) Wie schon zu Beginn geschrieben, ich kenne mich mit JavaScript nur sehr wenig aus.

Ich würde vermuten, die Datenbank wird weniger beansprucht, wenn gleich komplette Datensätze ausgelesen werden und nicht später nochmal weitere Daten angefragt werden müssen. Hängt auch von der Datenbank ab: Steht alles in einer Tabelle oder sind die Daten über mehrere Tabellen verteilt?

Gehen wir mal von maximal 30 Einträgen pro Seite aus. Derzeit werden das Profilbild und der Benutzername standartmäßig ausgelesen / angezeigt. Wenn ein User sein Geburtsdatum eingetragen hat, wird das Alter hinter dem jeweiligen Benutzername zusätzlich mit ausgegeben.

In der Listenansicht sollen noch zusätzlich folgende Daten mit angezeigt werden:

1. Sprachen
2. Bildung
3. Hobbys
4. Lieblingsfilme
5. Lieblingsmusik
6. Ich bin hier, weil

diese liegen in einer weiteren Tabelle werden aber mit left join bereits mit meiner Usertabelle zusammengefügt und die Daten sind ständig verfügbar.

[Auge]

Hallo

Du meinst mit AJAX. jQuery vereinfacht den Umgang damit etwas, ist aber nicht erforderlich.

Richtig, da in meinem Projekt jQuery eingebunden ist kann ich darauf auch zurückgreifen :)

Wenn die Bibliothek sowieso verwendet wird, kannst du sie natürlich auch dazu nutzen.

Wie schon zu Beginn geschrieben, ich kenne mich mit JavaScript nur sehr wenig aus.

Wenn du mit Jquery zurecht kommst, ist das erstmal ok. Aaber: JQuery ist JavaScript. Du solltest dich deshalb recht bald mit den Grundlagen von JavaScript befassen, auch, um zu verstehen, warum es Jquery gibt und was es tut.

Ich würde vermuten, die Datenbank wird weniger beansprucht, wenn gleich komplette Datensätze ausgelesen werden und nicht später nochmal weitere Daten angefragt werden müssen. Hängt auch von der Datenbank ab: Steht alles in einer Tabelle oder sind die Daten über mehrere Tabellen verteilt?

Gehen wir mal von maximal 30 Einträgen pro Seite aus. Derzeit werden das Profilbild und der Benutzername standartmäßig ausgelesen / angezeigt. Wenn ein User sein Geburtsdatum eingetragen hat, wird das Alter hinter dem jeweiligen Benutzername zusätzlich mit ausgegeben.

In der Listenansicht sollen noch zusätzlich folgende Daten mit angezeigt werden:

1. Sprachen
2. Bildung
3. Hobbys
4. Lieblingsfilme
5. Lieblingsmusik
6. Ich bin hier, weil

Gunnar hat ja schon die Vorteile genannt, die beim sofortigen Laden aller Daten und verbergen der nicht relevanten eintreten. Es gibt aber auch Nachteile, von denen einer wegen deiner Aufzählung gravierend sein könnte.

Hat ein großer Teil oder gar alle 30 auf einer Seite angezeigten Benutzer zusätzliche Angaben gemacht, kann ein großer Batzen Daten, die zusätzlich zum Namen, Geburtsdatum und Bild übertragen werden, zusammenkommen. Unter der Annahme, dass diese zusätzlichen Daten bei einem nicht unerheblichen Anteil der Aufrufe der Benutzerliste überhaupt nicht angezeigt werden, ist das unnützer Traffic.

Wenn du dich entscheidest, die zusätzlichen Daten mit Ajax nachzuladen, solltest du auch so konsequent sein, dies einzeln pro Datensatz zu tun. Mit einer gewissen Wahrscheinlichkeit werden sich die Besucher der Benutzerliste nicht für die Daten aller, sondern für die Daten einzelner anderer Benutzer interessieren.

Tschö, Auge

[Gunnar Bittersmann]

@@Auge

Hat ein großer Teil oder gar alle 30 auf einer Seite angezeigten Benutzer zusätzliche Angaben gemacht, kann ein großer Batzen Daten, die zusätzlich zum Namen, Geburtsdatum und Bild übertragen werden, zusammenkommen. Unter der Annahme, dass diese zusätzlichen Daten bei einem nicht unerheblichen Anteil der Aufrufe der Benutzerliste überhaupt nicht angezeigt werden, ist das unnützer Traffic.

Das ja. Aber vermutlich kein „großer Batzen“, sondern etwas Text im max. einstelligen Kilobyte-Bereich.

Anders sieht es bei den Bildern aus. Da sollte man schon dafür sorgen, dass nicht angezeigte auch nicht geladen werden. Wie war das doch gleich? Dafür darf nicht img, sondern muss ein Elternelement auf display: none gesetzt werden? Müsste ich nochmal nachlesen; ich glaub bei Jake Archibald.

LLAP 🖖

[Sara]

Anders sieht es bei den Bildern aus. Da sollte man schon dafür sorgen, dass nicht angezeigte auch nicht geladen werden. Wie war das doch gleich? Dafür darf nicht img, sondern muss ein Elternelement auf display: none gesetzt werden? Müsste ich nochmal nachlesen; ich glaub bei Jake Archibald.

Hallo Gunnar,

Bilder werden bei mir immer angezeigt, dieses soll auch so bleiben.

Aber interessant finde ich deine Aussage. Bis jetzt dachte ich immer wenn ich etwas mit CSS ausblende also dem ganzen ein display:none; gebe dass es dennoch geladen wird nur eben für den User versteckt. Falsch gedacht?

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Anders sieht es bei den Bildern aus. Da sollte man schon dafür sorgen, dass nicht angezeigte auch nicht geladen werden. Wie war das doch gleich? Dafür darf nicht img, sondern muss ein Elternelement auf display: none gesetzt werden? Müsste ich nochmal nachlesen; ich glaub bei Jake Archibald.

Ich erinnerte mich, dass da was war, aber nicht mehr richtig, was es war. Es waren Hintergrundbilder.

LLAP 🖖

[Sara]

Ich erinnerte mich, dass da was war, aber nicht mehr richtig, was es war. Es waren Hintergrundbilder.

Hallo Gunnar,

sollte ich meine Profilbilder lieber mit CSS background-image: url(""); einbinden? Dann könnte ich diese sollten sie nicht gebraucht werden einfach über CSS display:none; ausbleden?

[Sara]

Hallo Auge,

Wenn du mit Jquery zurecht kommst, ist das erstmal ok. Aaber: JQuery ist JavaScript. Du solltest dich deshalb recht bald mit den Grundlagen von JavaScript befassen, auch, um zu verstehen, warum es Jquery gibt und was es tut.

[....] Hat ein großer Teil oder gar alle 30 auf einer Seite angezeigten Benutzer zusätzliche Angaben gemacht, kann ein großer Batzen Daten, die zusätzlich zum Namen, Geburtsdatum und Bild übertragen werden, zusammenkommen. Unter der Annahme, dass diese zusätzlichen Daten bei einem nicht unerheblichen Anteil der Aufrufe der Benutzerliste überhaupt nicht angezeigt werden, ist das unnützer Traffic.

Von viel Traffic für den User würde ich hier nicht reden. Hab gerade mal in der Datenbank geschaut. Von 821 Usern haben 782 User diese Daten komplett ausgefüllt. Pro Aufzählung sind es maximal 4 Wörter. Beim letzten Punkt sind es im Durchschnitt 2-3 Sätze.

Zähle ich alle zusammen komme ich vielleicht auf 1 - 2 DIN A4 Seiten? So viel Traffic kann dieses nicht verursachen, oder liege ich hier falsch?

Wenn du dich entscheidest, die zusätzlichen Daten mit Ajax nachzuladen, solltest du auch so konsequent sein, dies einzeln pro Datensatz zu tun. Mit einer gewissen Wahrscheinlichkeit werden sich die Besucher der Benutzerliste nicht für die Daten aller, sondern für die Daten einzelner anderer Benutzer interessieren.

Wenn ich den User selber entscheiden lasse ob er alle Daten sehen möchte (wahrscheinlich zusätzlich zur Listenansicht?), dann habe ich kein einheitliches Bild mehr und es sieht nicht schön aus.

[Auge]

Hallo

[....] Hat ein großer Teil oder gar alle 30 auf einer Seite angezeigten Benutzer zusätzliche Angaben gemacht, kann ein großer Batzen Daten, die zusätzlich zum Namen, Geburtsdatum und Bild übertragen werden, zusammenkommen. Unter der Annahme, dass diese zusätzlichen Daten bei einem nicht unerheblichen Anteil der Aufrufe der Benutzerliste überhaupt nicht angezeigt werden, ist das unnützer Traffic.

Von viel Traffic für den User würde ich hier nicht reden. Hab gerade mal in der Datenbank geschaut. Von 821 Usern haben 782 User diese Daten komplett ausgefüllt. Pro Aufzählung sind es maximal 4 Wörter. Beim letzten Punkt sind es im Durchschnitt 2-3 Sätze.

Ganz schön einsilbig. ;-)

Zähle ich alle zusammen komme ich vielleicht auf 1 - 2 DIN A4 Seiten? So viel Traffic kann dieses nicht verursachen, oder liege ich hier falsch?

Bei 782 Benutzern mit diesen Daten wirst du mit ein bis zwei DIN-A4-Seiten wohl nicht hinkommen. Dennoch scheint das, wenn ich deinen Aussagen traue, nicht so viel mehr zu sein. Zumal dann, wenn 30 und nicht 782 Benutzerdatensätze am Stück angezeigt werden.

Wenn du dich entscheidest, die zusätzlichen Daten mit Ajax nachzuladen, solltest du auch so konsequent sein, dies einzeln pro Datensatz zu tun. Mit einer gewissen Wahrscheinlichkeit werden sich die Besucher der Benutzerliste nicht für die Daten aller, sondern für die Daten einzelner anderer Benutzer interessieren.

Wenn ich den User selber entscheiden lasse ob er alle Daten sehen möchte (wahrscheinlich zusätzlich zur Listenansicht?), dann habe ich kein einheitliches Bild mehr und es sieht nicht schön aus.

Jetzt mal unabhängig von dem nicht oder doch einzusparenden Traffic. Ist es so viel wichtiger, dass es für dich als Seitenbetreiberin schön aussieht (du sprichst ja hier und jetzt von deinem ästhetischen Empfinden), als dass es (eventuell, die Datenmenge scheint ja nicht das Problem zu sein) für den Besucher besser zu handhaben ist?

Tschö, Auge

[Sara]

Jetzt mal unabhängig von dem nicht oder doch einzusparenden Traffic. Ist es so viel wichtiger, dass es für dich als Seitenbetreiberin schön aussieht (du sprichst ja hier und jetzt von deinem ästhetischen Empfinden), als dass es (eventuell, die Datenmenge scheint ja nicht das Problem zu sein) für den Besucher besser zu handhaben ist?

Hallo Auge,

ich kann jetzt natürlich erstmal nur von mir ausgehen. Persönlich finde ich es schöner wenn ein User auf eine Seite kommt die klar strukturiert und aufgeräumt ist. Dazu zählt für mich auch dass z.B. alle Bilder gleich groß sind (nicht eines Hoch und das andere Quer) oder dass alle Boxen auf der gleichen Höhe aufhören bzw. anfangen.

Das Bilder Beispiel von Gunnar http://codepen.io/gunnarbittersmann/pen/LpVNJJ finde ich eigentlich richtig toll aber mir persönlich ist es zu unruhig.

Kann aber auch sein ich habe dich komplett falsch verstanden wie du die Umsetzung meinst.