TS: Einfaches Darstellungsmodell (View für Datenbank -> HTML) gesucht

Hello,

ich habe Listenanzeigen mit zur Zeit maximal drei Unterebenen (vorgesehen sind später maximal sechs). Zu jeder Ebene kann es außerdem xbeliebig viele Artikel geben. Also ungefähr so:


# 1 - Informationsquellen
## 1.1 - Bücher
## 1.2 - Internet
## 1.2 - 1 - Was ist das Internet?
## 1.2 - 2 - Geschichte des Internet
### 1.2.1 - Wikipedia
### 1.2.2 - Suchmaschinen
### 1.2.3 - Wiki der SelfHTML

#### 1.2.3 - 1 - Grundlagen zum Wissensaustausch
#### 1.2.3 - 2 - Was ist HTML?

# 2 - Hersteller

Usw.

Wie man innerhalb der Auflistung Einfügungen, Verschiebungen, Löschungen, Bearbeitungen etc. durchführen kann, ist bereits gestest.

Aber mir sind die unterschiedlichen Sichten und wie ich sie darstellen sollte noch nicht klar. Es ist unmöglich, immer alle ca. 30.000 Zeilen zu laden.

Daher würde ich gerne immer nur die relevante Ebene anzeigen, so ähnlich wie Windows das mit dem Dateisystem macht. Zusätzlich müssen aber auch die Funktionen, für den jeweiligen Betrachter zur Verfügung stehen, angezigt werden. Mit JS würd man einfach ein Kontextmenu öffnen, aber wie stellt man das ohne JS dar?

Hat da jemand eine gute Idee, die dann im nächsten Schritt "progressive Enhancement"-fähig gemacht werden kann? Da müssten dann z. B. Änderungen/Einfügungen/Löschungen auch sofort ohne Neuladen der dargestellten Teilseite werden können...

Im Backend wird PHP mit Sessions und ggf. auch Auth benutzt.

Liebe Grüße
Tom S.

--
Es gibt nichts Gutes, außer man tut es!
Das Leben selbst ist der Sinn.
  1. Tach!

    Sehe ich das richtig so, dass du nicht Nested Sets als Tabellenmodell suchst, mit denen man zwar etwas umständlicher Daten einfügen und löschen muss, dafür aber recht für viele Abfragewünsche recht einfache Querys formulieren kann? Stattdessen suchst du wie man den Anwendern das am geschicktesten präsentieren kann?

    Ansonsten ist mir auch noch nicht ganz klar, was du genau suchst. Sind es Ideen, wie man das präsentiert oder eher, wie man mit Javascript vorgenommene Änderungen (ohe Seitenneuladen) einbaut?

    Daher würde ich gerne immer nur die relevante Ebene anzeigen, so ähnlich wie Windows das mit dem Dateisystem macht.

    Mit Nested Sets bekommt man ja Daten einer Ebene recht günstig abgefragt. Anhand der L-R-Werte kann man auch einfach erkennen, ob Kinder existieren (R > L+1 bei Kindern). Den Pfad hoch zur Wurzel zu ermitteltn ist ebenfalls nicht schwierig.

    Zusätzlich müssen aber auch die Funktionen, für den jeweiligen Betrachter zur Verfügung stehen, angezigt werden. Mit JS würd man einfach ein Kontextmenu öffnen, aber wie stellt man das ohne JS dar?

    Kontextmenü ist so eine Sache. Damit müsste man das browsereigene überschreiben, was nicht sehr nett ist. Klickbares Ordnersymbol wäre eine Alternative, die mit und ohne Javascript gleichermaßen funktioniert.

    Hat da jemand eine gute Idee, die dann im nächsten Schritt "progressive Enhancement"-fähig gemacht werden kann? Da müssten dann z. B. Änderungen/Einfügungen/Löschungen auch sofort ohne Neuladen der dargestellten Teilseite werden können...

    Muss man solch eine komplexe Anwendung zwingend ohne Javascript bedienen können? Wenn nicht, tät ich Angular nehmen. Das ist wie gemacht für Anwendungen im Browser, die man früher als Desktopprogramme schrieb.

    dedlfix.

    1. Hello,

      Sehe ich das richtig so, dass du nicht Nested Sets als Tabellenmodell suchst, mit denen man zwar etwas umständlicher Daten einfügen und löschen muss, dafür aber recht für viele Abfragewünsche recht einfache Querys formulieren kann? Stattdessen suchst du wie man den Anwendern das am geschicktesten präsentieren kann?

      Stimmt, das Backend ist bewusst vereinfacht und denormalisiert aufgebaut worden. Das funktioniert auch soweit, wenn man ihm genau mitteilt, was man wünscht.

      Die Scheuklappen habe ich nur beim Frontend.

      Es sollen entweder alle Hauptkategorieren mit/ohne Detail-Links angezeigt werden, oder eine der Unterkategorien mit/ohne Detail-Links. Nun geht es darum, wie zeigt man für die intuitive Benutzung an, dass es ggf. noch eine übergeordnete Kategorie oder eine untergeordnete gibt?

      Liebe Grüße
      Tom S.

      --
      Es gibt nichts Gutes, außer man tut es!
      Das Leben selbst ist der Sinn.
      1. Tach!

        Es sollen entweder alle Hauptkategorieren mit/ohne Detail-Links angezeigt werden, oder eine der Unterkategorien mit/ohne Detail-Links. Nun geht es darum, wie zeigt man für die intuitive Benutzung an, dass es ggf. noch eine übergeordnete Kategorie oder eine untergeordnete gibt?

        Es ist vermutlich sinnvoll für den Anwender, wenn er den Pfad aufwärts vollständig gezeigt bekommt, oder zumindest mehrere übergeordnete Ebenen. Ob es Kinder gibt, kann ein Symbol anzeigen, über das man gleichzeitig die Kinderanzeige ausklappen kann.

        Du kannst ja mal schauen, wie das MSDN das gelöst haben. Das ist sozusagen ein riesiger Haufen von Textseiten. Auf jener Seite sieht man oben Teile vom Pfad und link den aktuellen Teilbaum mit Kindern.

        dedlfix.

        1. Hello,

          danke. Die Darstellung mit Breadcrumb für den Pfad der Überordnung und Menu für deren Inhalt gefällt mir gut.

          Muss ich jetzt "nur noch" überlegen, wie ich dei weiteren Bedienelemente aufbaue und unterbringe. Der Maintainer muss die Daten ja pflegen können.

          Liebe Grüße
          Tom S.

          --
          Es gibt nichts Gutes, außer man tut es!
          Das Leben selbst ist der Sinn.
  2. Aber mir sind die unterschiedlichen Sichten und wie ich sie darstellen sollte noch nicht klar. Es ist unmöglich, immer alle ca. 30.000 Zeilen zu laden.

    Ja hat denn Deine Gliederung 30.000 Zeilen? Wenn ja taugt das Modell wohl eher nicht für ein View. Ansonsten: Ich würde Gliederung und Daten schon von der Datenhaltung her auf 2 Tabellen aufteilen. Für die Darstellung einer Gliederung im Browser gibt es Libraries zum Ein- und Ausklappen.

    Der Zugriff auf die zweite Tabelle erfolgt erst, wenn der Betrachter einen bestimmten Gliederungspunkt anklickt, hier kommt dann ein Paginator zum Einsatz sollte sich mehr als eine Seite ergeben. Oder die Inhalte werden beim Scrollen nachgeladen.

    MfG

    1. Hello,

      das ist auch so aufgebaut. Es geht darum, wie man die Daten für den Anwender präsentiert und wie man sie für den Maintainer zugänglich macht, also wie und wo die Bedienelemente hingehören, damit er möglichste wenig Klicks oder Pushes benötigt.

      Liebe Grüße
      Tom S.

      --
      Es gibt nichts Gutes, außer man tut es!
      Das Leben selbst ist der Sinn.
      1. Es geht darum, wie man die Daten für den Anwender präsentiert und wie man sie für den Maintainer zugänglich macht,

        Das Umschalten der Sichten wird über Parameter und eine serverseitige Kontrollstruktur gesteuert. Zweckmäßigerweise werden die Daten auch über ein Template gerendert, das kann sowohl serverseitig als auch im Browser erfolgen.

        MfG

        1. Hello,

          Das Umschalten der Sichten wird über Parameter und eine serverseitige Kontrollstruktur gesteuert. Zweckmäßigerweise werden die Daten auch über ein Template gerendert, das kann sowohl serverseitig als auch im Browser erfolgen.

          [o. K.] ;-P

          Es geht hauptsächlich um die Forms und Sichten des Maintainers.
          Der darf einzelne Zeilen oder ganze Blöcke (je nach Level)

          • hinzufügen,
          • editieren,
          • löschen,
          • verschieben.

          Und beim Einfügen hat er die Wahl

          • vor dem aktuellen
          • nach dem aktuellen
          • unter dem aktuellen

          Level einen einzufügen. Ähnliches gilt für das Verschieben.

          Wie schon geschrieben, ist hier die Lösung mit JavaScript (und Ajax) wesentlich leichter (grafisch) umzusetzen, als die native HTML-Lösung. DIE ist aber gerade im Moment meine Aufgabe. JS wird dann später (vielleicht) eingebaut.

          Liebe Grüße
          Tom S.

          [o. K.] = ohne Kommentar

          --
          Es gibt nichts Gutes, außer man tut es!
          Das Leben selbst ist der Sinn.
          1. hinzufügen,
            editieren,
            löschen,
            verschieben.
            

            Überlege Dir Namen für die Schlüsselparameter über die sich der Controller hermacht. Z.B. edit=123 womit der Controller ein Editformular auf einen einzelnen Record mit der id=123 ins Template rendert. D.h., Du hast Schlüssel- bzw. Aktionparameter welche die Sicht umschalten und ggf. weitere Parameter die für eine betreffende Aktion notwendig sind. Z.B. move=123&dest=456 womit der Record mit id=123 unter der Rubrik mit id=456 eingetragen wird.

            Auf diese Art und Weise kannst Du auch ganze Konfirmationsdialoge ins Template rendern wir z.B. Löschen J/N damit nicht ein versehentlicher Klick alles gleich löscht. Und wenn Du das später mit JS benutzerfreundlicher machen willst, bleiben die Parameter dieselben.

            Das A&O also ist, wie Du siehst eine zweckmäßige Parameterkontrollstruktur im Controller womit über eine TemplateDings die entsprechende View erzeugt wird. -- ohne Kommentar.

            1. Hello,

              Das A&O also ist, wie Du siehst eine zweckmäßige Parameterkontrollstruktur im Controller womit über eine TemplateDings die entsprechende View erzeugt wird.

              Vielleicht hast Du das einfach trotz merhfacher Hinweise immer noch überlesen. Der Controller und das Modell funktionieren bis auf den Feinschliff einwandfrei. Ich weiß nur nicht, wie ich die grafische Umsetzung und die Wahl der passenden HTML-Dialog-Elemente möglichst platzsparend, verständlich und mit dem Ziel für die Aktionen nur wendige Klicks/Pushes und Roundturns zu benötigen, umsetze.

              Ich kann/will da nicht 7-10 Buttons und Checkboxen neben jede Zeile setzen. Manche Schritte (Löschen, Verschieben) sind ja auch sinnvollerweise mehrstufig. Bei Del gibt es ein del_set und ein del_exec, bei move gibt es ein mv_src und eine mv_tgt.

              Liebe Grüße
              Tom S.

              --
              Es gibt nichts Gutes, außer man tut es!
              Das Leben selbst ist der Sinn.
              1. Vielleicht hast Du das einfach trotz merhfacher Hinweise immer noch überlesen.

                Da musst Du schonmal ein bischen konkreter fragen. Immerhin hab ich genau solch Anwendungen auch schon mehrfach entwickelt und könnte Dir diesen oder jenen Tipp geben. MfG

  3. Hello,

    
    # 1 - Informationsquellen
    ## 1.1 - Bücher
    ## 1.2 - Internet
    ## 1.2 - 1 - Was ist das Internet?
    ## 1.2 - 2 - Geschichte des Internet
    ### 1.2.1 - Wikipedia
    ### 1.2.2 - Suchmaschinen
    ### 1.2.3 - Wiki der SelfHTML
    
    #### 1.2.3 - 1 - Grundlagen zum Wissensaustausch
    #### 1.2.3 - 2 - Was ist HTML?
    
    # 2 - Hersteller
    
    

    Für meine Darstellung habe ich nun den Vorschlag von Dedlfix genommen, und zwar die Variante von MSDN.

    Da ich ggf. 8-9 Ebenen in der horizontalen Navigation bekommen kann (Home, Modul, 6 Unterebenen, Seite), könnte es sein, dass die Zeile gesprengt wird. Ich könnte da noch zweizeilige Anzeige vorsehen, aber auch das könnte ggf. bei langen Namen für die Unterebenen nicht reichen. Ich möchte die aber im HTML nicht kürzen und in der Anzeige mindestens die letzten beiden voll darstellen.

    Kann ich ggf. per CSS einen max. horizontalen Platz vorgeben und dann von rechts nach links entscheiden, ob der Bezeichner für die Ebene ganz oder nur teilweise angezeigt wird? Die letzten zwei, besser drei, sollten immer vollständig zu lesen sein, und der "Home"-Button ganz links auch.

    HOME -> Modul -> L1-Text -> L2-Text -> L3-Text -> ... -> Page 
    
    +----------------+
    | (Pagemenu)     | 
    | <Überordnung>  |
    | - SubPos 1 -   |
    | - SubPos 2 -   |
    | - ...          |
    | - SubPos N     |
    +----------------+
    
    
    

    Das bedeutet, das ich die für den Seiteninhalt eventuell erforderliche Pagination mit in die Menus verfrachten will.

    Usw.

    Im HTML sollen die Texte und die zugehörigen URis sowieso alle vollständig enthalten sein, nur in der Anzeige möchte ich sie ggf. kürzen.

    Geht das überhaupt mit CSS, oder kommt mir da wieder Herr Turing in die Quere mit seinen Ansprüchen auf Vollständigkeit der Sprache?

    Liebe Grüße
    Tom S.

    --
    Es gibt nichts Gutes, außer man tut es!
    Das Leben selbst ist der Sinn.
    1. Hallo TS,

      Kann ich ggf. per CSS einen max. horizontalen Platz vorgeben

      Ja. 😝

      und dann von rechts nach links entscheiden, ob der Bezeichner für die Ebene ganz oder nur teilweise angezeigt wird? Die letzten zwei, besser drei, sollten immer vollständig zu lesen sein, und der "Home"-Button ganz links auch.

      button:not(:first-of-type):not(:last-of-type):not(:nth-last-of-type(2)):not(:nth-last-of-type(3)) {
        max-width: 10em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        /* schicker ist imho text-overflow: " …"; */
      }
      

      Bis demnächst
      Matthias

      --
      Rosen sind rot.
      1. Hello,

        ich danke Dir von unterwegs. Werde es zuhause gleich einbauen in mein CSS ;-)

        Liebe Grüße aus Braunschweig Tom S.

        --
        Es gibt nichts Gutes, außer man tut es!
        Das Leben selbst ist der Sinn.