Schlichten Strukturbaum für eine Website dynamisch erstellen?
Hey Leute! :)
Ich hätte mal eine Frage. Wie wäre es den möglich mittels PHP HTML und evtl JavaScript (Mit Js kenne ich mich noch nicht aus) einen möglichst schlichten Strukturbaum zu erstellen?
Ich werde dafür in meiner Datanbank User haben. Und jeder dieser User ist noch mit einem anderen verknüpft. Einer hat mal mehr Verknüpfungen als der andere. Und mein Gedanke dazu war, dass man sich seine eigene Struktur bis ganz nach unten veranschaulichen lassen kann.
Nur habe ich dafür bisher keinen Ansatz. Mein erster Gedanke war, so einen Baum wie unten im Anhang zu "zerlegen" und dann je nachdem wie es gebraucht wird anzuordnen. Aber ich glaube nicht dass das der richtige und auch beste Weg dafür ist :D
Daher wende ich mich an euch und hoffe mir kann jemand etwas helfen bzw einen Denkanstoß geben :)
Vielen Dank im Voraus für Antworten! :) 'n Guden :D
3 Antworten
Ja das geht. Kannst li's in li's stecken. Mit bissl CSS bekommste die grobe Struktur schnell hin.
Ja du kannst das stylen wie im Bild, dafür ist CSS ja da. CSS und HTML solltest du schon können. JavaScript brauchst du dafür evtl. auch. (PHP sowieso .)
Für den Baum an sich benötigt man nur HTML & CSS, siehe:
https://codepen.io/Pestov/pen/BLpgm
Das mit dem Strukturbaum an sich habe ich schon gelöst. War eigentlich einfach nur eine Funktiion die sich bei Bedarf immer und immer wieder aufruft bis alle Benutzer in der richtigen Struktur hinzugefügt sind.
PHP kann ich ja, nur manchmal stelle ich mir das Problem so riesig vor, obwohl die Lösung so einfach ist.
Womit ich aber noch nicht so gut zurechtkomme ist CSS. Da muss ich mal schauen wie ich das anstelle.
Danke [Nutzername entfernt] für den Link! Das sieht sehr gut aus.
Das Generieren von dem HTML Baum würde ich rekursiv lösen. Eine Funktion die einfach von einem Element die Kinder generiert uns dich für jedes Kind wieder selbst aufruft - recht einfach.
Das hängt davon ab wie deine Datenbankstruktur ausschaut. Ohne hier nähere Informationen zu haben wäre das nur ein Ratespiel.
Danke für die schnelle Antwort.
Das hätte ich noch erwähnen sollen, sorry.
Ich habe eine ganz normale User - Tabelle. Jeder hat ja seine eigene ID ganz am Anfang. Und jeder neu registrierte User muss vorher seinen Betreuer angeben. Und dadurch wird in dem neuen Datensatz der erstellt wird in der Spalte "betreuer", einfach die ID des jeweiligen Datensatzes des Betreuers eingetragen.
Und jetzt würde ich das am liebsten so machen, dass wenn Person X die ganze Struktur unter sich sehen will, erstmal jeder Benutzer abgerufen wird der seine ID in der "betreuer"-Spalte hat. Und diese Schleife dann für jeden weiteren Benutzer in der unteren Struktur durchführen bis es nicht mehr weiter geht. Was das angeht könnte ich mir schon vorstellen wie ich das mache. Wird nicht so schwer sein.
Nur wie ich dass dann grafisch veranschaulichen kann wie in dem Bild, da habe ich keinen Plan wie ich das machen könnte..
Es hängt von deiner Datenbankaufbau ab, denn seine Inhalte bestimmen, was du überhaupt darstellen kannst.
Diese Verknüpfung wirst du ja in irgendeiner Form abgespeichert haben, z.B. in Form einer Freundesliste.
Im Fall der Freundesliste würdest du einen Loop an dargestellten Elementen machen wie die Person Freunde hat. Und jeder Freund wird ja auch Elben Namen haben. Diesen könntest du in besagtem Loop in das Element schreiben. Mehr als eine Ebene hat dieses Beispiel allerdings nicht.
Möchtest wiederum auch die Verknüpfungen der Freunde und dessen Freunde anzeigen, um zu sehen, wie weit das soziale Netzwerk mit Freundesfreundes reicht, empfehle ich dir eher eine Visualisierung als Netz, statt als Baum.
Welche Informationen genau möchtest du denn visualisieren?
Davon habe ich schon gelesen. Nur habe ich gedacht dass das für mich nicht relevant ist da ich es ja etwas so aussehen lassen will wie in dem Bild. Aber wenn ich es mir recht überlege wäre das sogar möglich. Zwar nicht so wie in dem Bild, aber es ist denke ich möglich. Nur kenne ich mich in CSS nicht so gut aus. Es macht nie das, was ich will :'D