Added documentation

.gitignore

@@ -0,0 +1 @@
+/Documentation/out/

.idea/Webengineering-Filemanager.iml

@@ -5,6 +5,7 @@
       <excludeFolder url="file://$MODULE_DIR$/temp" />
       <excludeFolder url="file://$MODULE_DIR$/.tmp" />
       <excludeFolder url="file://$MODULE_DIR$/tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/Documentation/out" />
     </content>
     <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />

Documentation/content/01-00-chapter.tex

@@ -0,0 +1,15 @@
+\chapter{Einleitung und Installation}\label{ch:einleitung}
+Immer mehr Programme werden heutzutage nicht mehr als native App sondern als Webapp, die im Browser aufgerufen wird, genutzt.
+Ein Beispiel dafür sind die Office Anwendungen von Microsoft, die als native Programme und als Web-Version verfügbar sind.
+Die Web-Version hat dabei den Vorteil, dass sie auch unter Linux oder anderen, eigentlich nicht unterstützten Betriebssystemen, funktioniert.
+Dadurch können mehr Personen die Anwendung nutzen und oftmals ist auch die Entwicklung einfacher, weil nur für ein System (Browser) und nicht für mehrere Systeme (Windows, Linux, MacOS, \ldots) entwickelt werden muss.
+
+\section{Installation}
+Der Webservice kann mittels Docker gestartet werden.
+\begin{lstlisting}
+docker run --rm -v "<path>:/app" -v "<path>/upload.ini:/usr/local/etc/php/conf.d/upload.ini" -w /app -p 8080:80 php:7.4-cli php -S 0.0.0.0:80 router.php
+\end{lstlisting}
+
+Die eigentliche App wird geöffnet, indem die Datei \glqq index.html\grqq~im Ordner \glqq Frontend\grqq~in einem kompatiblen Browser geöffnet wird.
+
+Damit alles einwandfrei funktionieren kann, muss der Webservice entweder auf dem gleichen Gerät wie die eigentliche App laufen oder in der Datei \glqq Frontend/static/js/index.js\grqq~ muss die erste Zeile angepasst werden.

Documentation/content/02-00-chapter.tex

@@ -0,0 +1,33 @@
+\chapter{Allgemeine Informationen}\label{ch:allgemeine_informationen}
+Bei diesem Projekt wurden ausschließlich die Programmier- beziehungsweise Markupsprachen JavaScript, \gls{css} und \gls{html} verwendet.
+
+Es handelt sich um eine Single-Page-App.
+Das heißt, die komplette Funktionalität wurde in einer einzelnen \acrshort{html}-Datei und mehreren JavaScript beziehungsweise CSS Dateien umgesetzt.
+
+Alle Funktionen wurden in folgenden Browsern getestet:
+
+\section{Desktop}
+\begin{center}
+    \begin{tabular}{ c c c c c }
+        \bfseries{Browser} & \bfseries{Version} & \bfseries{funktioniert?} & \bfseries{Probleme} \\
+        \hline
+        Mozilla Firefox & 90.0b12 & \textcolor{green}{\cmark} & \\
+        Google Chrome & 91.0.4472.114 & \textcolor{red}{\xmark} & Audio + Video abspielen \\
+        Chromium & 91.0.4472.114 & \textcolor{red}{\xmark} & Audio + Video abspielen \\
+        Opera & 77.0.4054.203 & \textcolor{red}{\xmark} & Audio + Video abspielen \\
+        Microsoft Edge & & & \\
+        Internet Explorer & & &
+    \end{tabular}
+\end{center}
+
+
+\section{Mobile}
+\begin{center}
+    \begin{tabular}{ c c c }
+        Browser & Version & funktioniert? \\
+        Mozilla Firefox & & \\
+        Google Chrome & & \\
+        Safari & & \\
+        Opera & &
+    \end{tabular}
+\end{center}

Documentation/content/03-00-chapter.tex

@@ -0,0 +1,87 @@
+\chapter{Anforderungen}\label{ch:anforderungen}
+
+\section{Laufzeitumgebung}
+\subsection{Sprachen}
+Wie bereits erwähnt wurden bei diesem Projekt nur die Sprachen \gls{html}, \gls{css} und JavaScript verwendet
+
+\subsection{Keine Bibliotheken}
+Auf JavaScript Bibliotheken und Frameworks wie \glqq jQuery\grqq, \glqq React\grqq~oder \glqq Angular\grqq~wurde verzichtet.
+Stattdessen wurden native JavaScript-Funktionen verwendet.
+
+Auch das \gls{html}- bezieziehungsweise \gls{css}-Framework \glqq Bootstrap\grqq~wurde nicht verwendet.
+
+
+\section{Sicherheit}
+\subsection{Authentifizierung}
+Damit nicht jede Person zugang zu den Daten hat, muss der Benutzer sich authentifizieren.
+Dafür wird beim starten der Webapp ein Login-Fenster angezeigt.
+Sollte der Login am Server erfolgreich sein, wird der generierte Token in Session Storage gespeichert.
+Das hat zur Folge, das der Login spätestens mit dem beenden der Browser-Session ungültig gemacht wird.
+
+\subsection{Logout}
+Der Logout wird zum einen vom Server automatisch durchgeführt, wenn seit 600 Sekunden keine Aktivität mehr erkannt wurde.
+Des Weiteren wird im Browser beim Login und bei jeder Aktivität ein Timeout gesetzt, sodass der Token in Session Storage automatisch nach diesen 600 Sekunden gelöscht wird.
+
+\section{Darstellung}
+\subsection{Anpassung an Browserfenstern}
+Da es unterschiedliche Bildschirme gibt, ist der Inhalt der App nicht überall gut lesbar.
+Deshalb wurde mittels \gls{css} \glqq Media queries\grqq~dafür gesorgt, dass bei schmalen Geräten die Baum-Ansicht unter der Verzeichnis-Ansicht angezeigt wird.
+Dadurch wird sichergestellt, dass auf Smartphones, die sowieso schon wenig Platz in der Breite haben, nicht noch mehr Platz \glqq verschwendet\grqq~wird.
+
+\subsection{Usability}
+Der Dateimanager ist von der Grundstruktur ähnlich aufgebaut wie der \glqq Windows Explorer\grqq~unter Windows oder \glqq Nautilus\grqq~unter Linux.
+Nutzer, die diese Dateimanager schon genutzt haben, finden sich in der Webapp schnell zurecht.
+
+\subsection{Fehlererkennung}
+Auch wenn es eigentlich nicht vorkommen sollte, kann es immer wieder zu Fehlern kommen, weil die angefragte Datei zum Beispiel gelöscht wurde.
+Die Fehlermeldungen des Servers werden von der App abgefangen und angezeigt.
+
+\subsection{Verzeichnisse \& Dateitypen}
+Verzeichnisse und Dateitypen werden in der Verzeichnisansicht durch unterschiedliche Icons angezeigt.
+So wird sichergestellt, dass der Benutzer schnell herausfinden kann, um was es sich handelt.
+
+\section{Navigation}
+Die Navigation ist entweder über den Verzeichnis-Baum links beziehungsweise unten oder über die Datei-Ansicht rechts oder oben möglich.
+Um sich ein Verzeichnis nach oben zu bewegen, kann \glqq ..\grqq~verwendet werden.
+Um ein oder mehrere Verzeichnisse nach oben zu gehen, kann der Pfad oberhalb der Dateien verwendet werden.
+
+\subsection{Verzeichnis öffnen}
+Um ein Verzeichnis zu öffnen, kann das entsprechende Verzeichnis in der Verzeichnisansicht angeklickt werden.
+
+\section{Datei-Handling}
+\subsubsection{MP4-Video-Datei abspielen}
+Der Dateimanager kann mp4-Video-Dateien abspielen, indem diese in der Verzeichnisansicht angeklickt werden.
+
+\subsubsection{Audio-Datei abspielen}
+Der Dateimanager kann Audio-Dateien abspielen, indem diese in der Verzeichnisansicht angeklickt werden.
+
+\subsubsection{Bild-Datei ansehen}
+Der Dateimanager kann Bild-Dateien anzeigen, indem diese in der Verzeichnisansicht angeklickt werden.
+
+\subsubsection{Text-Datei bearbeiten}
+Der Dateimanager kann Text-Dateien bearbeiten, indem diese in der Verzeichnisansicht angeklickt werden.
+Im neuen Fenster kann der Inhalt der Datei bearbeitet werden und wird mit einem Klick auf \glqq Save\grqq~gespeichert.
+
+\subsubsection{Datei herunterladen}
+Eine Datei kann heruntergeladen werden, indem in der Verzeichnisansicht das Kontextmenü mittels Rechtsklick geöffnet wird.
+
+\subsubsection{Datei löschen}
+Eine Datei kann gelöscht werden, indem in der Verzeichnisansicht das Kontextmenü mittels Rechtsklick geöffnet wird.
+
+\subsubsection{Text-Datei erstellen}
+Um eine Text-Datei zu erstellen muss unten rechts über das \glqq +\grqq-Icon gehovert werden.
+Bei den neu angezeigten Icons das zweite von oben anklicken, um die Datei zu erstellen.
+Im Header des neuen Fensters kann der Dateiname festgelegt werden.
+Der Rest ist gleich, wie beim bearbeiten von Text-Dateien.
+
+\subsubsection{Datei hochladen}
+Um eine Datei hochzuladen muss unten rechts über das \glqq +\grqq-Icon gehovert werden.
+Bei den neu angezeigten Icons das dritte von oben anklicken, um die Datei hochzuladen.
+
+\section{Verzeichnis-Handling}
+\subsection{Verzeichnis löschen}
+Ein Verzeichnis kann gelöscht werden, indem in der Verzeichnisansicht das Kontextmenü mittels Rechtsklick geöffnet wird.
+
+\subsection{Verzeichnis erstellen}
+Um ein Verzeichnis zu erstellen, muss unten rechts über das \glqq +\grqq-Icon gehovert werden.
+Bei den neu angezeigten Icons das oberste anklicken, um das Verzeichnis zu erstellen.

Documentation/customization/style.tex

@@ -0,0 +1,86 @@
+%! Author = soeichho
+%! Date = 20.11.2020
+
+% Text style
+\setmainfont{\mainFont}
+\setstretch{\lineStretchValue}          % Space between lines
+
+
+% Chapter format
+\renewcommand*{\chapterformat}{
+    \thechapter \hspace{10pt} \textcolor{accent-color}{|} \hspace{10pt}
+}
+\renewcommand*{\chapterheadstartvskip}{\vspace*{0pt}}
+
+
+% Header / Footer
+\clearpairofpagestyles
+\KOMAoptions {
+    headsepline = true,
+    footsepline = true,
+    plainfootsepline = true
+}
+\automark[chapter]{chapter}
+
+\ihead{\headmark}
+\ifoot{\author~~|~~\kurs~~|~~\date}
+\ofoot{\thepage}
+
+\renewcommand*{\headfont}{\normalfont} % Keine kursive Schrift
+\renewcommand*{\footfont}{\normalfont}
+
+\newpairofpagestyles{chapterpage}{
+    \KOMAoptions {
+        headsepline = false,
+        footsepline = true,
+        plainfootsepline = true
+    }
+    \ihead{}
+    \ifoot{\author~~|~~\kurs~~|~~\date}
+    \ofoot{\thepage}
+}
+
+\renewcommand*{\chapterpagestyle}{chapterpage}
+
+
+% Listings style
+\lstset{
+    basicstyle=\ttfamily\small,
+    frame=top,
+    frame=bottom,
+    breaklines=true,
+    tabsize=2,
+    upquote = true,
+    numbers=left,
+    stepnumber=1,
+    numbersep=5pt,
+    commentstyle=\color{teal},
+    stringstyle=\color{magenta},
+    keywordstyle=\color{orange}
+}
+
+\lstdefinelanguage{JSON}{
+    string=[s]{"}{"},
+    comment=[l]{:\ "},
+    morecomment=[l]{:"},
+}
+
+\lstdefinelanguage{JavaScript}{
+    keywords={const, let, typeof, instanceof, new, true, false, catch, function, return, null, undefined, catch, switch, var, if, in, while, for, do, else, case, default, break},
+    ndkeywords={class, export, throw, import, this},
+    sensitive=false,
+    comment=[l]{//},
+    morecomment=[s]{/*}{*/},
+    morestring=[b]',
+    morestring=[b]`,
+    morestring=[b]"
+}
+
+% Float listings
+\newfloat{lstfloat}{htbp}{lop}
+\floatname{lstfloat}{Listing}
+\def\lstfloatautorefname{Listing} % needed for hyperref/auroref
+
+\usepackage{pifont}% http://ctan.org/pkg/pifont
+\newcommand{\cmark}{\ding{51}}%
+\newcommand{\xmark}{\ding{55}}%

Documentation/customization/text-variables.tex

@@ -0,0 +1,17 @@
+%! Author = flokaise
+%! Date = 21.04.2021
+
+% Text variables
+\renewcommand{\author}{Florian Kaiser}
+\renewcommand{\date}{\today}
+\newcommand{\institutionName}{Duale Hochschule Baden-Württemberg}
+\newcommand{\paperName}{Dokumentation Web Engineering Projekt}
+\newcommand{\registerId}{9829423}
+\newcommand{\kurs}{TINF20C}
+\renewcommand{\title}{Filemanager}
+
+% Layout variables
+\newcommand{\pageMarginLeft}{40mm}
+\newcommand{\pageMarginRight}{20mm}
+\newcommand{\pageMarginTop}{40mm}
+\newcommand{\pageMarginBottom}{20mm}

Documentation/customization/variables.tex

@@ -0,0 +1,29 @@
+%! Author = soeichho
+%! Date = 19.11.2020
+
+%! This file is dedicated to individual changes.
+%! If I've done my job correctly, you only have to modify this file to your personal favour.
+%! Access these variables by using \commandname within any .tex file
+
+% Style variables
+%! IMPORTANT: The font size needs to be changed after the \begin{document} block in your main.tex
+% TODO
+%\newcommand{\mainFont}{TeleNeo Office}    % Whatever font you want to use, needs to be installed on your computer
+\newcommand{\mainFont}{Ubuntu}    % Whatever font you want to use, needs to be installed on your computer
+\newcommand{\lineStretchValue}{1.5}
+\newcommand{\coverSheetImages}{
+    \includegraphics[width=0.4\textwidth]{images/dhbw-stuttgart}\hspace{1 cm}
+    \includegraphics[width=0.4\textwidth]{images/TSY-transparent}
+}
+
+% Colors
+%! You can name as many colors as you'd like.
+%! The accent-color is the only one, that is actually used by the template so far
+%! Here are some convenient color codes for you ;)
+%! telekom magenta: E20074
+%! fom:             539D90
+%! fom_light:       73d9c6
+%! fom_dark:        36665e
+%! dhbw_red:        E2001A
+%! dhbw_grey:       7D8990
+\definecolor{accent-color}{HTML}{E20074}    % This color will be used as highlight color in the chapter name

Documentation/includes/acronyms.tex

@@ -0,0 +1,16 @@
+\newacronym{api}{API}{application programming interface}
+\newacronym[plural=Apps]{app}{App}{application software}
+\newacronym{aws}{AWS}{Amazon Web Services}
+\newacronym{css}{CSS}{Cascading Style Sheets}
+\newacronym{dom}{DOM}{Document Object Model}
+\newacronym{html}{HTML}{Hypertext Markup Language}
+\newacronym{http}{HTTP}{Hypertext Transfer Protocol}
+\newacronym{it}{IT}{Informationstechnik}
+\newacronym{js}{JS}{JavaScript}
+\newacronym{json}{JSON}{JavaScript Object Notation}
+\newacronym{onsite}{onsite}{T-Systems onsite services GmbH}
+\newacronym{rest}{REST}{Representational State Transfer}
+\newacronym{s3}{Amazon S3}{Amazon Simple Storage Service} % Unused
+\newacronym{ui}{UI}{User Interface}
+\newacronym{url}{URL}{Uniform Resource Locator}
+\newacronym{ux}{UX}{User Experience}

Documentation/includes/cover.tex

@@ -0,0 +1,17 @@
+%! Author = soeichho
+%! Date = 19.11.2020
+
+\begin{titlepage}
+    \centering
+    \coverSheetImages
+    \par\vspace{3cm}
+    {\scshape\LARGE \institutionName \par}\vspace{1cm}
+    \paperName\par\vspace{3cm}
+    \hrule\vspace{1cm}
+    {\large\bfseries \title\par}\vspace{1cm}
+    \hrule\vspace{3cm}
+    {\Large\itshape \author\par}
+    {\Large\itshape Matrikel-Nr.: \registerId\par}
+    {\Large\itshape Kurs: \kurs\par}
+    \vfill{\large \date}
+\end{titlepage}

Documentation/main.tex

@@ -0,0 +1,56 @@
+% Preamble
+% !IMPORTANT! Do not change the font size here, but after the \begin{document} markup
+\documentclass[12pt,a4paper,oneside,listof=totoc,abstract=on]{scrreprt}
+
+\include{customization/text-variables}
+
+% Packages
+\usepackage[ngerman]{babel}             % for German language
+\usepackage[autostyle=true,german=quotes]{csquotes}
+\usepackage{refcheck}
+\usepackage{float}                      % for placing images where I want them
+\usepackage{fontspec}                   % for using own font
+\usepackage{multicol}
+\usepackage[includefoot,left=\pageMarginLeft,right=\pageMarginRight,top=\pageMarginTop,bottom=\pageMarginBottom,headsep=\baselineskip,footskip=\dimexpr2\baselineskip+3mm\relax]{geometry}
+\usepackage{scrlayer-scrpage}           % for header / footer
+\usepackage{graphicx}                   % for including images
+\usepackage[hidelinks,pdftitle={\paperName},pdfauthor={\author},pdfsubject={\title},pdfpagemode=UseOutlines,pdfdisplaydoctitle=true,pdflang=german]{hyperref}
+\usepackage{setspace}                   % for line spacing
+\usepackage{xcolor}                     % for defining colors
+\usepackage[acronym,toc]{glossaries}    % for acronyms
+\usepackage{listings}                   % for listings
+\usepackage{parskip}                    % for no indent in each paragraph
+
+\usepackage[backend=biber,bibwarn=true,bibencoding=utf8,sortlocale=de_DE,style=numeric-comp]{biblatex}
+\usepackage{amssymb}
+\addbibresource{main.bib}
+
+\include{customization/variables}
+\include{customization/style}
+\include{includes/acronyms}
+
+% Document
+\begin{document}
+    \setcounter{secnumdepth}{3}
+
+    \fontsize{13pt}{13pt}\selectfont
+    \pagenumbering{arabic}
+
+    \include{includes/cover}
+
+    % Inhaltsverzeichnis
+    \cleardoublepage
+    \KOMAoptions{toc=chapterentrydotfill}
+    \tableofcontents
+
+    % Kapitel
+    \cleardoublepage
+    \input{content/01-00-chapter}
+    \include{content/02-00-chapter}
+    \include{content/03-00-chapter}
+
+    % Literatur
+    \cleardoublepage
+    \printbibliography[title=Literaturverzeichnis]
+    \addcontentsline{toc}{chapter}{Literaturverzeichnis}
+\end{document}