%!TEX TS-program = pdfLaTeX
%!TEX encoding = UTF-8
%!BIB program = Bibtex

% Dokument definition
%-------------------------------------------------------------------
\documentclass{ibz-document}

% Article Variables
%-------------------------------------------------------------------
\newcommand{\titlepre}{CaseStudy}
\newcommand{\titleseparator}{ }
\newcommand{\titlename}{BusinessStreamline}
\newcommand{\subtitlepre}{Semester 1}
\newcommand{\subtitleseparator}{ }
\newcommand{\subtitlename}{Webtechnologie}
\newcommand{\authorname}{Ivan Hörler, Harayanamoorthy Prashath, Ciullo Alessio}
\newcommand{\cotitlename}{B2B Platform}

%Header & Footer
\newcommand{\HeaderLeft}{\footnotesize\textsc{\leftmark}}
\newcommand{\HeaderCenter}{}
\newcommand{\HeaderRight}{\footnotesize\textsc{\titlepre\titleseparator\titlename}}
\newcommand{\FooterLeft}{}
\newcommand{\FooterCenter}{}
\newcommand{\FooterRight}{\footnotesize Seite \thepage\ von \pageref{LastPage}}


% Developement Helpers
%-------------------------------------------------------------------
\fboxrule=0pt											%border thickness der fboxes zum bearbeiten auf 1 setzten
%\usepackage{showframe}									 %border der Bereiche anzeigen
\usepackage{blindtext}      								% Blindtext zum Testen von Textausgaben
%\usepackage{lipsum}									% Lorem Ipsum Text generator

% 0 Seite - Dokumentbeginn
%--------------------------------------------------------------------------------------------------------------------------------------
\begin{document}     		% Dokumentstruktur beginnen

% 1 Seite - Titelblatt
%-------------------------------------------------------------------
\include{Titelblatt}

% 2 Seite - Inhaltsverzeichniss
%-------------------------------------------------------------------
\tableofcontents 			%aufrufen des Inhaltsverzeichnisses
\thispagestyle{empty} 		%ohne footer und Headerzeile
\clearpage 				% neue Seite beginnen

% 3 Seite - Hier beginnt die Arbeit
%-------------------------------------------------------------------
\setcounter{page}{1} 		%hier beginnt die Seitenzahl

\section{Vision}
Die Vision beschreibt den Vorgang von Anwendern auf der Website der Firma BusinessStreamline graphisch als Kundenbeziehung.

  \begin{figure}[h]
    \subsection{Kundenbeziehung}
      \includegraphics[width=\textwidth]{bilder/vision/Kundenbeziehung.pdf}
      \caption{Kundenbeziehung}
      \label{fig:Kundenbeziehung} 
  \end{figure}
    
%  \begin{figure}[h]
%    \subsection{Meilensteine}
%      \includegraphics[width=\textwidth]{bilder/vision/Millestones.pdf}
%      \label{fig:Meilensteine}
%      \caption{Meilensteine}
%   \end{figure}

  
\section{User Stories}
    Ausgangspunkt ist diese Syntax:
    \begin{center}%
      %\begin{Small}%
       \textsc{Als } \textsc{\texttt{<Benutzerrolle> }}\textsc{will ich } \textsc{\texttt{<das Ziel>, }}\textsc{so dass } \textsc{\texttt{<Grund für das Ziel>.}} 
      %\end{Small}%
    \end{center}%
  \subsection{BusinessStreamline}
    \begin{itemize}
      \item Als Dienstleister firma will ich, dass der Kunde sich Anmelden muss, so dass kein unbefugter Zugang besteht.
      \item Als Dienstleister firma will ich Kontrolle über die Kundenanmeldung haben, so dass kein Kunde zweimal registriert sein kann.
      \item Als Dienstleister firma will ich die gesuchten Teile abfragen können, so dass jederzeit Gewissheit über die Anzahl Nachfragen besteht.
      \item Als Dienstleister firma will ich die Angebote überprüfen können.
      \item Als Dienstleister firma will ich, dass alle Nachfrager und Anbieter anonym verhandeln können.
    \end{itemize}
  \subsection{Nachfragerfirma}
  \begin{itemize}
    \item Als Nachfrager firma will ich eine Bezeichnung eines gesuchten Teils hinterlegen können so dass ein Anbieter das Teil spezifisch suchen kann.
    \item Als Nachfrager firma will ich die Qualität eines gesuchten Teils hinterlegt haben, sodass ich mich an Qualitätsmerkmalen orientieren kann.
    \item Als Nachfrager firma will ich einen Lieferzeitpunk hinterlegen können, sodass ein Anbieter über die Lieferfrist informiert ist. 
    \item Als Nachfrager firma will ich die benötigte Menge angeben können, sodass ich diese mit einer Bestellung bekomme.
    \item Als Nachfrager firma will ich ein Angebot annehmen können, so dass dem Anbieter eine Bestellung zugesandt wird.
    \item Als Nachfrager firma will ich das Teil innerhalb der Lieferzeit zugesandt bekommen.
  \end{itemize}
  \subsection{Anbieterfirma}
    \begin{itemize}
      \item Als Anbieter firma will ich abfragen welche Teile gesucht sind, so dass ein Angebot erstellt werden kann.
      \item Als Anbieter firma will ich, dass alle Eckpunkte geklärt sind, so dass keine unvorhergesehenen Kosten entstehen.
      \item Als Anbieter firma will ich ein Angebot abgeben können, so dass ein schriftlicher Vertrag entsteht.
      \item Als Anbieter firma will ich anonym bleiben, so dass die Nachfragefirma nur anhand des Preises entscheidet wer sie berücksichtigt.
      \item Als Anbieter firma will ich bei der Bestellung eine schriftliche Antwort erhalten, so dass der Vertrag gültig ist.
    \end{itemize}
  
\section{Benutzerführung}
Damit der Kunde sieht wie seine Webseite funktioniert wurde eine Benutzerführung in form von Flowdiagrammen zu jedem Typ von Kunden erstellt.
\subsection{Nachfrage Firma}

  \begin{figure}[H]
    \begin{center}
      \includegraphics[scale=0.5]{bilder/Benutzerfuehrung/Nachfrager.png}
    \end{center}
    \caption{Benutzerführung des Nachfragers}
    \label{fig:BenutzerführungNachfrager} 
  \end{figure}
  
\subsection{Anbieter Firma} 

  \begin{figure}[H]
    \begin{center}
      \includegraphics[scale=0.6]{bilder/Benutzerfuehrung/Anbieter.png}
    \end{center}  
    \caption{Benutzerführung des Anbieters}
    \label{fig:BenutzerführungAnbieters} 
  \end{figure}

\section{Datenbank}
Die Gruppe hat sich entschieden das Projekt auf Basis einer MySQL Datenbank mit PHP zu erstellen.

Zur Visualisierung wurden RM und ERM mit Dia erstellt:
\subsection{ERM}
  \begin{figure}[H]
    \begin{center}
      \includegraphics[scale=0.4]{bilder/DB/DB-ERM.png}
    \end{center}
    \caption{ERM zur Datenbank für BusinessStreamline}
    \label{fig:ERM}
  \end{figure}
\subsection{RM}  
  \begin{figure}[H]
    \begin{center}
      \includegraphics[scale=0.5]{bilder/DB/DB-RM.png}
    \end{center}
    \caption{RM zur Datenbank für BusinessStreamline}
    \label{fig:RM} 
  \end{figure}  

\newpage %-------------------------------------------------------------------
\section{Coding}
\subsection{erstes Login}
Nach dem wir einige Tutorials durchgearbeitet hatten, fanden wir mit codeingcage \cite{ref1} ein Tutorial dass die Abläufe 
genügend einfach gestaltet hatte. So dass wir auch in der Lage waren es zu verstehen, verändern und unseren Bedürfnissen anzupassen.
Wir haben es zuerst nach dem vorgezeigten Schema erstellt und dann gemerkt dass wir die E-Mail Adresse als Login Feld eher als lästig empfinden.
Also machten wir uns an die Arbeit um den Login nach User-Namen umzukrempeln und entfernten alle E-Mail Felder und Variablen auch aus der Datenbank. 
Als fun fügten wir noch ein Bild ein und entfernten alle bootstrap CSS Klassen und ersetzten sie mit unseren aus dem lokalen style.css 
File um das ganze auch schön aussehen zu lassen. Zusätzlich wurde eine Automatische Login Routine implementiert so dass ein Login nach der
Anmeldung eines Users nicht noch mal eingegeben werden muss.
\subsection{Datenbankeinträge}
Um die Datenbankeinträge gemäss RM erstellen zu könne wurde als erstes das .sql file zur Erstellung der Datenbank erstellt.
Danach wurden von Hand drei Einträge gemacht um die Abfrage testen zu können. Da der Unterricht die SQL-Querrys noch nicht abgedeckt hatte schob der Dozent eine kurze Einführung samt Beispiel ein, was als Vorlage für die weitere Arbeit diente.
Zudem entnahm ich dem youtube Video \cite{ref2} wichtige Informationen zum vorgehen mit PDO.
Um die Darstellung zu gliedern wurde die Abfrage in HTML Tabellenform integriert. Das Eintragsdatum musste von YYYY-MM-DD-hh-mm gekürzt werden und wird nun als Datum ohne Zeitangabe dargestellt.
Die Eintrags Erfassung wird mit dem gleichen vorgehen gemacht und fängt Fehler wie leergelassene Felder oder zu kurze Beschreibungen ab. 
\subsection{Angebotsabgabe}
Die selektion von einem eintrag gestalltete sich schwierig. Nachdem die erste Idee mit onclick auf der Tabellenzeile nicht funktionierte weil das Thema JavaSkript noch nicht angeschnitten wurde und mir nicht klar ist wie es umzusetzen ist wurde auf einen einfachen Link zurückgegriffen und per get Befehl die ID der Zeile übermittelt wird.


\section{Projektplanung}

  \begin{figure}[H]
    \subsection{Zeitplan}
      \includegraphics[width=\textwidth]{bilder/Zeitplan/Zeitplan.png}
      \caption{Zeitplanung}
      \label{fig:Zeitplanung} 
  \end{figure}
  
    \begin{figure}[H]
    \subsection{Zeitaufwand}
    \begin{center}
      \begin{spreadtab}{{tabular}{ | l | c | c | c | l | }} \hline
       @ Arbeitspaket 			& @ geplant 	& @ geleistet 	& @ delta 		& @ Erklärung \\ \hline
       @ Projekt Management	& 1			& 1			&  			& \\
       @ Dokumentation		& 3			& 6			& 3 			& @ \begin{scriptsize}LaTeX verstehen und einrichten\end{scriptsize}\\
       @ Vision 				& 1 			& 1			&	  		& \\
       @ UserStories 			& 3 			& 3 			&  			& \\ 
       @ Benutzerführung		& 2 			& 3 			& 1 			& @ \begin{scriptsize}gezeichnet mit Libreoffice\end{scriptsize}\\          
       @ Datenbank 			& 1 			& 1 			&  			& \\ 
       @ erstes login/out		& 2 			& 8 			&  6			& \\     
       @ Datenbankeinträge	& 8 			& 11 		&  5			& @ \begin{scriptsize}der Schulische hintergrund  fehlte zu dem Zeitpunkt noch.\end{scriptsize}\\      
       @ Abgebotsabgabe		& 10 		& 8 			&  -2			& @ \begin{scriptsize}der Schulische hintergrund  fehlte zu dem Zeitpunkt noch.\end{scriptsize}\\ 
       \hline \hline         
       @ Total				& sum(b2:b10)	& sum(c2:c10)	& sum(d2:d10) 	& @ h \\ \hline
        \end{spreadtab}
      \caption{Zeitaufwand}
      \label{tab:Zeitaufwand} 
    \end{center}  
  \end{figure}

  
% Etwas Hilfe zu Latex:
%-------------------------------------------------------------------
	
%\section{Latex Hilfe}	
%Ich kann einfach drauf los schreiben...\textbackslash \textbackslash erzeugt einen Zeilenumbruch.\\
%Für gewisse symbole wie \& muss ich \textbackslash \& schreiben damit es richtig dargestellt wird.\\
%
%einige Hilfe für Tesxtstyling:
%
%This will produce \textit{italizized} text
%
%This will produce \textbf{boldfaced} text
%
%This will produce \textsc{small caps} text
%
%This will produce \texttt{typewriter} text
%
%please visit Mrs. Krummels website at
%\texttt{http://mrskrummel.com/tutorials.html}.\\
%
%Please excuse 
%\begin{tiny}%
%	my dear aunt Sally
%\end{tiny}
%
%Please excuse 
%	\begin{scriptsize}%
%	my dear aunt Sally
%	\end{scriptsize}
%	
%Please excuse 
%	\begin{footnotesize}%
%	my dear aunt Sally
%	\end{footnotesize}	
%
%Please excuse 
%\begin{small}%
%	my dear aunt Sally
%\end{small}
%
%Please excuse my dear aunt Sally % Default Schriftgrösse
%
%Please excuse\begin{large}
%my dear aunt Sally \end{large} 
%
%Please excuse\begin{Large}
%my dear aunt Sally \end{Large} 
%
%Please excuse\begin{LARGE}
%my dear aunt Sally \end{LARGE} 
%
%Please excuse \begin{huge}%
%my dear aunt Sally \end{huge} 
%
%Please excuse \begin{Huge}%
%my dear aunt Sally \end{Huge} 
%
%
%	
%\begin{flushleft}
%	this is flushleft = not indent
%\end{flushleft}
%\begin{center}This ist centered Text \end{center}
%\begin{flushright}
%	This is flushright text
%\end{flushright}
%
%\begin{enumerate}
%\item pencil
%\item paper
%\item calculator
%\item ruler
%\item notebook
%	\begin{enumerate}
%	\item assessment
%		\begin{enumerate}
%		\item tests
%		\item quizzes
%		\end{enumerate}
%	\item homework
%	\item notes
%	\end{enumerate}
%\item graph paper
%\end{enumerate}
%
%\begin{itemize}
%\item pencil
%\item paper
%\item calculator
%\item ruler
%\item notebook
%	\begin{itemize}
%	\item assessment
%		\begin{itemize}
%		\item tests
%		\item quizzes
%		\end{itemize}
%	\item homework
%	\item notes
%	\end{itemize}
%\item graph paper
%\end{itemize}
%
%\begin{enumerate}
%	\item[Commutative] $a+b=b+a$ % was in der eckigen klammer steht wird als bulletpoint oder nummerierungs-ersatz genommen...
%	\item[Associative] $a+(b+c)=(a+b)+c$
%	\item[Distrbutive] $ a(b+c)=ab+ac$
%\end{enumerate}
%
%	\begin{center}
%		Einfügen von Tabellen:\\
%		\begin{tabular}{|c|c|c|c|} \hline
%			$x$ & 0 & 1 & 2 \\ \hline
%			$f(x)$ & 3 & 6 & 9 \\ \hline
%		\end{tabular}
%		\label{tab:data1}									 % verlinkung im Text ueber den namen tab:data1
%        \end{center}
%
%Formeln einfügen:\\
%für Hilfe siehe: https://en.wikibooks.org/wiki/LaTeX/Mathematics
%\begin{equation}
%\frac{
%    \begin{array}[b]{r}
%      \left( x_1 x_2 \right)\\
%      \times \left( x'_1 x'_2 \right)
%    \end{array}
%  }{
%    \left( y_1y_2y_3y_4 \right)
%  }
%\end{equation}
%
%\begin{equation}
%  x = a_0 + \cfrac{1}{a_1 
%          + \cfrac{1}{a_2 
%          + \cfrac{1}{a_3 + \cfrac{1}{a_4} } } }
%\end{equation}
%
%\begin{equation}
%\sqrt{\frac{a}{b}} 
%\end{equation}
%
%\begin{equation} \label{eq:solve} % <--- lable wird zur referenzierung weitergereicht
%x^2 - 5 x + 6 = 0 
%\end{equation} 
%\centering Formel: \ref{eq:solve}\\ % der Abschluss von \centering ist mit \\ was etwas ungewöhnlich ist.
%
%\begin{equation}
%x_1 = \frac{5 + \sqrt{25 - 4 \times 6}}{2} = 3
%\end{equation}
%
%\begin{equation}
%x_2 = \frac{5 - \sqrt{25 - 4 \times 6}}{2} = 2
%\end{equation}
%
%and so we have solved equation~\ref{eq:solve} % <--- die referenzierung holt das label
%kann ich nun hier shcreiben
%
%\begin{equation}
%\sqrt[n]{1+x+x^2+x^3+\dots+x^n}
%\end{equation}
%
%\begin{equation}
%\displaystyle\sum_{i=1}^{10} t_i
%\end{equation}
%
%Referenziere auf das Bild mit dem Label Meilensteine: \ref{fig:Meilensteine}


% Quellverzeichniss
%-------------------------------------------------------------------
\newpage
\thispagestyle{empty}
\section{Referenzen}
  \nocite{*}
  \bibliographystyle{plain}
  \bibliography{quellverzeichniss}


% Index
%-------------------------------------------------------------------
%\newpage
%\printindex
%\thispagestyle{empty}
% abspann
%-------------------------------------------------------------------
\newpage
\thispagestyle{empty}
 \begin{center}
	\vspace*{\fill}
	\line(1,0){400} \\ [4mm]
	\Large{\textsc{this Document is Typset with}} \\ [3mm]
	\textrm{\Huge\LaTeX{}} \\ [1mm]
	\line(1,0){400}\\
	\vspace*{\fill}
 \end{center}

% Dokumentende
%--------------------------------------------------------------------------------------------------------------------------------------		

\end{document}
