{"id":602,"date":"2021-06-20T16:32:21","date_gmt":"2021-06-20T14:32:21","guid":{"rendered":"https:\/\/neu.montybanse.eu\/?p=602"},"modified":"2022-03-06T23:38:02","modified_gmt":"2022-03-06T22:38:02","slug":"dms-die-funktionen","status":"publish","type":"post","link":"https:\/\/www.montybanse.eu\/index.php\/server-programmierung-co\/dms-die-funktionen\/","title":{"rendered":"DMS: Die Funktionen"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Als erstes entwickelte ich die Grundpfeiler f\u00fcr das DM-System. Das war f\u00fcr mich in erster Linie die Dokumente anzeigen und bearbeiten zu lassen. Als ersten Schritt davon, entwarf ich das Tabellenlayout (Ja, ich verwende tats\u00e4chlich eine Tabelle f\u00fcr die \u00dcbersicht).<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Aber warum eine Tabelle? Das war f\u00fcr mich recht einfach zu entscheiden: Die Tabelle basiert auf die Datatables und der dazugeh\u00f6rigen Javascript Klasse bzw. -funktionen. Datatables bringt ebenfalls eine Menge guter Dinge mit, um eine Tabelle recht gut aussehen zu lassen und erweitert diese z.B. gleichzeitig um eine Suchfunktion (die sich ausschlie\u00dflich auf die Tabelleninhalte bezieht), eine Sortierfunktion nach Tabellenkopf oder auch so praktische Funktionen wie das Ausblenden einer kompletten Spalte (das ben\u00f6tige ich sp\u00e4ter n\u00e4mlich noch).<\/p>

Tabellen allgemein sind in der HTML Welt mittlerweile recht verrufen, das liegt einfach daran, dass die Responsability f\u00fcr kleinere Ger\u00e4te oftmals nicht mehr gegeben ist und diese eine gro\u00dfe Tabelle mehr schlecht als Recht darstellen k\u00f6nnen.<\/p>

Hier greift einem Datatables auch wieder unter die Arme: Es erm\u00f6glicht die Tabelle bei kleineren Formaten automatisch anders zu positionieren, sodass sie weiterhin benutzbar bleibt. Optisch macht man dann nat\u00fcrlich abstriche, aber das ist f\u00fcr die schnelle Dokumentensuche f\u00fcr unterwegs gut vertretbar.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Die Tabelle ist soweit einfach aufgebaut. In der Mitte in der Spalte \u201eDokumentname\u201c befindet sich \u00fcber den Inhalt ein Link, der wiederum ein Modal \u00f6ffnet, welches die PDF im jeweiligen HTML5-Viewer des Browsers aufruft. Je nach Browser sieht der Viewer etwas anders aus und es gibt unterschiedliche Funktionen, aber f\u00fcr den allgemeinen Gebrauch sind sie alle brauch- und benutzbar:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Dadurch, dass die PDF erst im Modal per Ajax (nach-) geladen wird, verbraucht die PDF Ansicht auch nur wenig Speicher.<\/p>

Das war etwas, was ich mir auch erst angelesen habe. Anfangs hatte ich n\u00e4mlich die Modals immer automatisch erstellen lassen. Im Quelltext sah das dann in etwa so aus:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
<div class="modal-body">\n    <div class="embed-responsive embed-responsive-16by9">\n        <embed src="data:[@mimeTyp];base64,[@attachment]" >\n    <\/div>\n<\/div><\/code><\/pre>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
Hier reihte sich dann ein Modal an Modal am Ende der Webseite, welche \u00fcber einen entsprechenden Link aufgerufen wurden. Zu Beginn klappte das auch einwandfrei. Ich stellte aber fest, dass bei vielen Dokumenten (nachdem ich begonnen habe das DM-System einmal mit einer Reihe an 50+ Dokumenten zu f\u00fcttern), die Ladezeiten der Webseiten ewig lang war. Klar, so wurde in jedem Modal die komplette PDF als Base64 geladen (oben im Quelltext findet sich hier \u00fcbrigens nur ein Platzhalter [@attachment] <\/em>welcher von dem PHP-Skript dann bef\u00fcllt wird, sobald es aufgerufen wurde.<\/p>
So habe ich es dann umsetzen k\u00f6nnen, dass die jeweilige PDF erst geladen wird, wenn das Modal per Ajax \u201eerschaffen\u201c wird.<\/p>
Praktischerweise habe ich hier auch gleich die Funktionen f\u00fcr den Download und das L\u00f6schen mit eingebaut.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
Ich wollte mir meine Dokumente aber nicht nur ansehen, sondern auch Bearbeiten. Bearbeiten in Form von Kategorien vergeben, ein Datum festlegen von wann das Dokument war oder auch eine kleine Beschreibung hinzuf\u00fcgen, die mit in der \u00dcbersicht angezeigt wurde.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
Daraus entstand diese Ansicht. Ich unterteilte den gro\u00dfen \u201eAnsichtsbereich\u201c in zwei weitere Container. Im linken Bereich wird die M\u00f6glichkeit zum Bearbeiten gegeben und im rechten Bereich sieht man noch einmal das Dokument in der Vorschau.<\/p>
Warum hier auch noch einmal eine Vorschau? Anfangs hatte ich mir das auch \u00fcberlegt, eigentlich dachte ich, die Ansicht im Modal w\u00fcrde v\u00f6llig gen\u00fcgen. Bei den ersten Bearbeitungen stelle ich aber fest, dass es unpraktisch ist jedes mal das Modal zu \u00f6ffnen, sich z.B. das Datum oder den Betreff des Dokuments zu merken und dann in die andere Ansicht zu wechseln.<\/p>
Es soll doch so einfach und unkompliziert f\u00fcr einen selbst bleiben, nicht wahr?<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
Als letztes gibt es noch ein Modal zum direkten L\u00f6schen des Dokuments (was nat\u00fcrlich auch \u00fcber die Vorschau gehen w\u00fcrde).<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
Ja und Nein. Mehr Auswahl haben wir nicht.<\/p>
Bei der L\u00f6schung habe ich mich \u00fcbrigens dazu entschieden sie wirklich unwiderruflich zu machen. Das Dokument wird nach einem Klick auf \u201eJa\u201c komplett aus der Datenbank entfernt. Inklusive aller vorhandenen Daten, Informationen oder dergleichen. Ich wollte damit die M\u00f6glichkeit schaffen, dass zum Beispiel meine Familienmitglieder (die dieses System mittlerweile auch nutzen), die M\u00f6glichkeit haben ein Dokument so zu l\u00f6schen, dass auch ich als Entwickler darauf keinen Zugriff mehr h\u00e4tte.<\/p>
(Um Fair zu bleiben: Ja, es gibt nat\u00fcrlich Backups, aber diese m\u00fcssten relativ umst\u00e4ndlich wiederhergestellt und eingespielt werden. Zudem werden diese nicht dauerhaft vorgehalten, es m\u00fcsste mir also relativ zeitnah einfallen, dass ich genau dieses Dokument gerne gesehen h\u00e4tte.)<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
Halt. Hast du da nicht einen Button vergessen zu erkl\u00e4ren?

Jap, richtig. Da gibt es noch einen kleinen Button mit einem Mailsymbol. Das ist eine Funktion, die ich erst vor kurzem eingebaut habe. Dar\u00fcber l\u00e4sst sich ein Dokument mal spontan per E-Mail an einen Empf\u00e4nger weiterleiten. Ich brauchte die Funktion selbst f\u00fcr ein Dokument, welches ich an zwei Freunde weiterleiten wollte. Klar, ich h\u00e4tte die PDF einfach herunterladen und per Mail versenden k\u00f6nnen.<\/p>
Aber ich wollte es als dauerhafte Funktion mit einbinden. Warum auch nicht?
Hierzu erz\u00e4hle ich dann aber sp\u00e4ter mehr, wenn es um die Erweiterung des Projektes geht.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"
Als erstes entwickelte ich die Grundpfeiler f\u00fcr das DM-System. Das war f\u00fcr mich in erster Linie die Dokumente anzeigen und bearbeiten zu lassen. Als ersten Schritt davon, entwarf ich das Tabellenlayout (Ja, ich verwende tats\u00e4chlich eine Tabelle f\u00fcr die \u00dcbersicht). Aber warum eine Tabelle? Das war f\u00fcr mich recht einfach<\/p>\n","protected":false},"author":1,"featured_media":966,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","_themeisle_gutenberg_block_has_review":false,"footnotes":""},"categories":[18,17],"tags":[],"class_list":["post-602","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dokumentenmanagement-selbst-gemacht","category-server-programmierung-co"],"_links":{"self":[{"href":"https:\/\/www.montybanse.eu\/index.php\/wp-json\/wp\/v2\/posts\/602","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.montybanse.eu\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.montybanse.eu\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.montybanse.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.montybanse.eu\/index.php\/wp-json\/wp\/v2\/comments?post=602"}],"version-history":[{"count":11,"href":"https:\/\/www.montybanse.eu\/index.php\/wp-json\/wp\/v2\/posts\/602\/revisions"}],"predecessor-version":[{"id":968,"href":"https:\/\/www.montybanse.eu\/index.php\/wp-json\/wp\/v2\/posts\/602\/revisions\/968"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.montybanse.eu\/index.php\/wp-json\/wp\/v2\/media\/966"}],"wp:attachment":[{"href":"https:\/\/www.montybanse.eu\/index.php\/wp-json\/wp\/v2\/media?parent=602"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.montybanse.eu\/index.php\/wp-json\/wp\/v2\/categories?post=602"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.montybanse.eu\/index.php\/wp-json\/wp\/v2\/tags?post=602"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}