600 lines
32 KiB
TeX
600 lines
32 KiB
TeX
%!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{Ausgangslage}
|
|
\subsection{Zielsetzung an die Fallstudie}
|
|
Die Webtech Case Study im dritten Semester der Ausbildung zum Dipl. Techniker IT befasst sich mit den Technologien HTML, PHP und SQL aus den Fächern Webtechnologie und Datenbanken.
|
|
Die Zielsetzung ist vom Fachgruppenleiter dokumentiert und wird gemäss diesem umgesetzt.
|
|
Es sind vier Ziele zu verfolgen:\\
|
|
|
|
\begin{minipage}{0.6\linewidth}
|
|
\begin{myitemize}
|
|
\item Der Studierende hat ein Geschäftsmodell in eine einfache dynamische Weblösung abgebildet
|
|
\item Der Studierende hat einen sinnvollen Testplan entworfen und diesen auf seine Lösung angewendet
|
|
\item Der Studierende hat die zur Verfügung stehenden Stunden in einer Planung den aufgaben zugeordnet und eine Abweichungsanalyse erstellt
|
|
\item Der Studierende hat die Lösung dokumentiert
|
|
\end{myitemize}
|
|
\end{minipage}
|
|
\subsection{Rahmenbedingungen}
|
|
\begin{minipage}{0.59\linewidth}
|
|
\center
|
|
\begin{tabular}{l|l}
|
|
Thema & Festlegung\\\hline
|
|
Art der Arbeit & Gruppenarbeit zu dritt\\
|
|
Umfang & 80 Stunden\\
|
|
Präsentation & 15min. vor der Klasse \\
|
|
Abgabe & Elektronisch\\
|
|
Benotung & gemäss Beurteilungsschema\\
|
|
\end{tabular}
|
|
\end{minipage}
|
|
\subsection{Umschreibung der Aufgabenstellung}
|
|
Folgendes Geschäftsmodel ist umzusetzen:\\
|
|
|
|
\begin{minipage}{0.96\linewidth}
|
|
\begin{myitemize}
|
|
\item Firmen (Nachfrager), welche Teile zur Herstellung Ihrer Produkte benötigen (Schrauben, Muttern, Nieten...) können diese auf unserer Plattform erfassen.
|
|
\item Erfasst werden dabei die genaue Bezeichnung, die benötigte Menge und Qualität und der gewünschte Lieferzeitpunkt.
|
|
\item Anbieter solcher Teile können nun nach gewissen Teilen suchen (z.B. sucht jemand Schrauben des Typ II-C ?)
|
|
\item Findet der Anbieter einen Eintrag, so kann er, anonymisiert, ein Angebot hinterlegen (ich biete Schraube II-C zu 12 Fr. per 100 Stück an)
|
|
\item Die Nachfrager können anschliessend alle Angebote, welche zu einem bestimmten Teil abgegeben worden sind auflisten und das Ihnen passende auswählen.
|
|
\item Ein so ausgewähltes Angebot wird dem Anbieter als Bestellung im XML- Format übermittelt
|
|
\end{myitemize}
|
|
\end{minipage}
|
|
|
|
\section{Projektorganisation}
|
|
Wir entscheiden uns für eine Agile Entwicklung nach SCRUM.
|
|
\subsection{Personen, Aufgaben und Werkzeuge}
|
|
Prashath Harayanamoorthy wird die Aufgabe des SCRUM Masters übernehmen während sich Ivan Hörler als Developer integriert und Alessio Ciullo übernimmt die Sprint Reviews. \\
|
|
Dabei wurde die Daily auf Weekly meetings ausgedehnt um den Ansprüchen der Aufgabe und der Nebenberuflichen erledigung der Case Study gerecht zu werden.\\
|
|
Die Dokumentation wird jeweils aktuell mitgeführt und über die gleiche Versioning Software verteilt wie der Code. Geschrieben wird in Latex um die Mitarbeit aller, direkt über commits ins ''Git'' Repository sicherzustellen. Programmiert wird ausschliesslich in HTML, PHP und MYSQL Sprache.\\
|
|
Der SCRUM Master erstellt die zu erledigenden Arbeitspaket (nachfollgend ''AP'' genannt), dazu Usecase Diagramm und User Storys und übergibt diese dem Developer der den Sprint damit beginnt. Durch den Revisor wird die jeweilige itteration beglaubigt bevor zum nächsten AP übergegangen wird.
|
|
\subsection{Kommunikationsstrukturen}
|
|
Zur Kommunikation untereinander wird ein Telegramm Messenger eingesetzt.
|
|
AP und Diagramme werden direkt im Dokument eingefügt und stehen somit mit dem nachgehenden Bericht des Developers im Selben allen zur Einsicht zur verfügung.
|
|
\subsection{Qualitätsmanagement}
|
|
Nach jedem AP wird das geleistete untersucht und eventuelle Abschweiffer von der Aufgabenstellung gleich behoben.
|
|
Untersucht wird anhand von User Stories und Usecase Diagramme ob die Lösung den Vorgaben entspricht.
|
|
\subsection{Abgrenzung}
|
|
Die Platform ist anonym. Die BusinessStreamline sperichert keine daten die auf die Wahre identität des Benutzers hinweist. Die Nutzung ist freiwillig und basiert auf einer Hohlschuld.
|
|
|
|
\section{Analyse}
|
|
\subsection{Interessensgruppen}
|
|
Die BusinessStreamline als B2B Partner verfolgt das Ziel Anbieter- und Nachfragerfirmen zu verbinden und kommerziellen Handel über die Platform anonym abzuwickeln.
|
|
\subsection{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}
|
|
|
|
\subsection{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}%
|
|
\subsubsection{BusinessStreamline}
|
|
\begin{myitemize}
|
|
\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{myitemize}
|
|
\subsubsection{Nachfragerfirma}
|
|
\begin{myitemize}
|
|
\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{myitemize}
|
|
\subsubsection{Anbieterfirma}
|
|
\begin{myitemize}
|
|
\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{myitemize}
|
|
\subsection{Zielsetzung}
|
|
\subsubsection{harte Ziele}
|
|
\begin{myitemize}
|
|
\item Benutzer muss sich einloggen können.
|
|
\item Benutzer muss Nachfrage mit genannten 4 Faktoren hinterlassen können.
|
|
\item Benutzer muss ein Angebot für eine Nachfrage erstellen können.
|
|
\item Benutzer muss ein Angebot annehmen können.
|
|
\item Benutzer muss das angenommene Angebot übermittelt bekommen.
|
|
\end{myitemize}
|
|
\subsubsection{weiche Ziele}
|
|
\begin{myitemize}
|
|
\item Benutzer könnte das Angebot per E-Mail übermittelt bekommen
|
|
\item Benutzer könnte in Angebot die Telefonnummer und Anschrift hinterlassen.
|
|
\item Benutzer könnte das Angebot anpassen.
|
|
\item Benutzer könnte sein Passwort ändern.
|
|
\end{myitemize}
|
|
\section{Lösungsvarianten}
|
|
\subsection{Variante 1}
|
|
\paragraph{XML Storage}
|
|
- Das XML Fileformat erlaubt das Speichern und abrufen von Datensätzen anhand von DOM Objekten. Da das Angestrebte Ausgabeformat ein XML File ist. Könnte die Speicherung aller Datensätze in XML Nodes geschehen.\\[1em]
|
|
Vorteile:\\[-2em]
|
|
\begin{myitemize}
|
|
\item Keine Verbindung zu externen Datensätzen nötig
|
|
\item Die Sprache für den Zugriff sowie das Speichern von Datensätzen kann einzig mit PHP geschehen.
|
|
\item Keine Konvertierung der Ausgabe nötig da die Daten in XML schon bestehen müssen sie nur neu angeordnet werden.
|
|
\end{myitemize}
|
|
Nachteile:\\[-2em]
|
|
\begin{myitemize}
|
|
\item Das Abfragen von XML Strukturen ist im Netz weniger gut dokumentiert als Datenbankabfragen.
|
|
\item Das Speichern von Files birgt eventuell Sicherheitsrisiken die wir noch nicht abschätzen können.
|
|
\end{myitemize}
|
|
\subsection{Variante 2}
|
|
\paragraph{MYSQL Database}
|
|
- MYSQL Datenbanken sind opensource Datenbanken die einfache und standardisierte Abfragen und Speicherungen über bestehende und in PHP integrierte Schnittstellen erlauben.\\[1em]
|
|
Vorteile:\\[-2em]
|
|
\begin{myitemize}
|
|
\item Gut dokumentierte und Standardisierte zugriffe.
|
|
\item Tabellen mit Spalten und Reihen die eine geordnete Datenstruktur vereinfacht.
|
|
\item SQL Datenbanken wurden im Unterricht schon behandelt.
|
|
\end{myitemize}
|
|
Nachteile:\\[-2em]
|
|
\begin{myitemize}
|
|
\item Infrastruktur muss vorhanden sein.
|
|
\item dezentrale Daten.
|
|
\item das Thema MYSQL queryes wurde noch nicht behandelt.
|
|
\end{myitemize}
|
|
\section{Detailplanung}
|
|
\subsection{Benutzerführung}
|
|
Damit der Kunde sieht wie seine Webseite funktioniert wurde ein Mockup zu den beiden Kundentypen erstellt.
|
|
\subsubsection{Nachfrage Firma}
|
|
\begin{figure}[H]
|
|
\begin{center}
|
|
\includegraphics[scale=0.45]{bilder/Benutzerfuehrung/Nachfrager.png}
|
|
\end{center}
|
|
\caption{Benutzerführung des Nachfragers}
|
|
\label{fig:BenutzerführungNachfrager}
|
|
\end{figure}
|
|
\subsubsection{Anbieter Firma}
|
|
\begin{figure}[H]
|
|
\begin{center}
|
|
\includegraphics[scale=0.48]{bilder/Benutzerfuehrung/Anbieter.png}
|
|
\end{center}
|
|
\caption{Benutzerführung des Anbieters}
|
|
\label{fig:BenutzerführungAnbieters}
|
|
\end{figure}
|
|
\subsection{Usecase Diagramme}
|
|
\subsubsection{Login}
|
|
\begin{figure}[H]
|
|
\begin{center}
|
|
\scalebox{0.6}{
|
|
\begin{tikzpicture}
|
|
\begin{umlsystem}[x=4.5, fill=red!10]{Login}
|
|
\umlusecase[x=0,y=-1.5,name=Login, width=20mm]{Login}
|
|
\umlusecase[x=6.5,y=-1.5, name=Prüfung, width=30mm]{Login erfolgreich}
|
|
\umlusecase[x=0, y=-4.5, name=restriktion, width=30mm]{Zugriff auf restriktrierten Bereich}
|
|
\umlextend[name=incl]{Login}{restriktion}
|
|
\umlinclude[name=exte]{Prüfung}{Login}
|
|
\end{umlsystem}
|
|
\umlactor[x=0,y=-1.5]{Benutzer}
|
|
\umlactor[x=-2,y=-4.5]{Anbieter}
|
|
\umlactor[x=0,y=-4.5]{Nachfrager}
|
|
\umlinherit[anchor2= -90]{Nachfrager}{Benutzer}
|
|
\umlinherit[anchor2= -100]{Anbieter}{Benutzer}
|
|
\umlassoc{Benutzer}{Login}
|
|
\umlnote[x=9.5,y=-4.5, width=4cm]{exte-1}{condition: \newline Username nicht belegt, \newline Passwort > 6 Zeichen }
|
|
\end{tikzpicture}
|
|
}%scalebox
|
|
\end{center}
|
|
\caption{Login Vorgang}
|
|
\label{fig:LoginVorgang}
|
|
\end{figure}
|
|
\subsubsection{Nachfrage}
|
|
\begin{figure}[H]
|
|
\begin{center}
|
|
\scalebox{0.6}{
|
|
\begin{tikzpicture}
|
|
\begin{umlsystem}[x=4.5, fill=red!10]{Nachfrage}
|
|
\umlusecase[x=0,y=-0.5,name=Login, width=20mm]{Nachfrage erstellen}
|
|
\umlusecase[x=6.5,y=-0.5, name=Prüfung, width=20mm]{Login}
|
|
\umlusecase[x=6.5, y=-2.5, name=restriktion, width=30mm]{speicherung in DB}
|
|
\umlinclude[name=incl]{Prüfung}{Login}
|
|
\umlextend[name=exte]{restriktion}{Login}
|
|
\end{umlsystem}
|
|
\umlactor[x=0,y=-1.5]{Benutzer}
|
|
\umlactor[x=0,y=-4.5]{Nachfrager}
|
|
\umlinherit[anchor2= -90]{Nachfrager}{Benutzer}
|
|
\umlassoc{Benutzer}{Login}
|
|
\umlnote[x=4.5,y=-3.5, width=4cm]{exte-1}{condition: \newline Typ > 0 Zeichen, \newline Menge > 0 Zeichen, \newline Beschrieb > 10 Zeichen }
|
|
\end{tikzpicture}
|
|
}%scalebox
|
|
\end{center}
|
|
\caption{Vorgang zur Nachfrage Erfassung}
|
|
\label{fig:NachfrageVorgang}
|
|
\end{figure}
|
|
\subsubsection{Suche}
|
|
\begin{figure}[H]
|
|
\begin{center}
|
|
\scalebox{0.6}{
|
|
\begin{tikzpicture}
|
|
\begin{umlsystem}[x=4.5, fill=red!10]{Suche}
|
|
\umlusecase[x=0,y=0,name=Login, width=20mm]{Suche nach Zeichen}
|
|
\umlusecase[x=6.5,y=0, name=Prüfung, width=20mm]{Login}
|
|
\umlusecase[x=6.5, y=-2.5, name=restriktion, width=30mm]{Abfrage von DB}
|
|
\umlusecase[x=0,y=-2.5,name=suche, width=20mm]{stelle suche dar}
|
|
\umlinclude[name=incl]{Prüfung}{Login}
|
|
\umlextend[name=exte]{restriktion}{Login}
|
|
\umlextend[name=extend]{suche}{Login}
|
|
\end{umlsystem}
|
|
\umlactor[x=0,y=0]{Benutzer}
|
|
\umlactor[x=0,y=-3]{Anbieter}
|
|
\umlactor[x=-2,y=-3]{Nachfrager}
|
|
\umlinherit[anchor2= -90]{Anbieter}{Benutzer}
|
|
\umlinherit[anchor2= -100]{Nachfrager}{Benutzer}
|
|
\umlassoc{Benutzer}{Login}
|
|
\end{tikzpicture}
|
|
}%scalebox
|
|
\end{center}
|
|
\caption{Vorgang der Suche}
|
|
\label{fig:SuchVorgang}
|
|
\end{figure}
|
|
\subsubsection{Angebot}
|
|
\begin{figure}[H]
|
|
\begin{center}
|
|
\scalebox{0.6}{
|
|
\begin{tikzpicture}
|
|
\begin{umlsystem}[x=4.5, fill=red!10]{Suche}
|
|
\umlusecase[x=0,y=0,name=Login, width=20mm]{Angebot erfassen}
|
|
\umlusecase[x=6.5,y=0, name=Prüfung, width=20mm]{Login}
|
|
\umlusecase[x=6.5, y=-2.5, name=restriktion, width=30mm]{speichern in DB}
|
|
\umlinclude[name=incl]{Prüfung}{Login}
|
|
\umlextend[name=exte]{restriktion}{Login}
|
|
\end{umlsystem}
|
|
\umlactor[x=0,y=0]{Benutzer}
|
|
\umlactor[x=0,y=-3]{Anbieter}
|
|
\umlinherit[anchor2= -90]{Anbieter}{Benutzer}
|
|
\umlassoc{Benutzer}{Login}
|
|
\umlnote[x=4.5,y=-3.5, width=4cm]{exte-1}{condition: \newline Angebot > 0 Zeichen, \newline Angebot < 9 Zeichen}
|
|
\end{tikzpicture}
|
|
}%scalebox
|
|
\end{center}
|
|
\caption{Vorgang des Angebots}
|
|
\label{fig:AngebotVorgang}
|
|
\end{figure}
|
|
\subsubsection{Profile}
|
|
\begin{figure}[H]
|
|
\begin{center}
|
|
\scalebox{0.6}{
|
|
\begin{tikzpicture}
|
|
\begin{umlsystem}[x=4.5, fill=red!10]{Profil - Nachfrager}
|
|
\umlusecase[x=-0.5,y=0,name=Prüfung, width=30mm]{stelle alle Nachfragen des Benutzers dar.}
|
|
\umlusecase[x=6.5,y=0, name=Login, width=20mm]{Login}
|
|
\umlusecase[x=6.5, y=-2, name=db, width=30mm]{Abfrage von DB}
|
|
\umlusecase[x=2.5, y=-3, name=angebot, width=20mm]{Angebot Akzeptieren Button}
|
|
\umlinclude[name=incl]{Prüfung}{Login}
|
|
\umlextend[name=exte2]{db}{Prüfung}
|
|
\umlextend[name=exte1]{Prüfung}{angebot}
|
|
\end{umlsystem}
|
|
\umlactor[x=0,y=0]{Benutzer}
|
|
\umlactor[x=0,y=-3]{Nachfrager}
|
|
\umlinherit[anchor2= -90]{Nachfrager}{Benutzer}
|
|
\umlassoc{Benutzer}{Login}
|
|
\umlnote[x=4,y=-5, width=4cm]{exte1-1}{condition: \newline Angebot ist abgegeben worden (bestehend)}
|
|
\end{tikzpicture}
|
|
}%scalebox
|
|
\end{center}
|
|
\caption{Abruf der Profil Seite aus Sicht des Nachfragers}
|
|
\label{fig:AngebotVorgang}
|
|
\end{figure}
|
|
\begin{figure}[H]
|
|
\begin{center}
|
|
\scalebox{0.6}{
|
|
\begin{tikzpicture}
|
|
\begin{umlsystem}[x=4.5, fill=red!10]{Profil - Angebot}
|
|
\umlusecase[x=-0.5,y=0,name=Prüfung, width=30mm]{stelle alle Angebote des Benutzers dar.}
|
|
\umlusecase[x=6.5,y=0, name=Login, width=20mm]{Login}
|
|
\umlusecase[x=6.5, y=-2, name=db, width=30mm]{Abfrage von DB}
|
|
\umlusecase[x=2.5, y=-3, name=angebot, width=20mm]{Auftrag herunterladen Button}
|
|
\umlinclude[name=incl]{Prüfung}{Login}
|
|
\umlextend[name=exte2]{db}{Prüfung}
|
|
\umlextend[name=exte1]{Prüfung}{angebot}
|
|
\end{umlsystem}
|
|
\umlactor[x=0,y=0]{Benutzer}
|
|
\umlactor[x=0,y=-3]{Nachfrager}
|
|
\umlinherit[anchor2= -90]{Nachfrager}{Benutzer}
|
|
\umlassoc{Benutzer}{Login}
|
|
\umlnote[x=4,y=-5, width=4cm]{exte1-1}{condition: \newline Angebot ist akzeptiert worden}
|
|
\end{tikzpicture}
|
|
}%scalebox
|
|
\end{center}
|
|
\caption{Abruf der Profil Seite aus Sicht des Anbieters}
|
|
\label{fig:AngebotVorgang}
|
|
\end{figure}
|
|
\subsubsection{XML}
|
|
\begin{figure}[H]
|
|
\begin{center}
|
|
\scalebox{0.6}{
|
|
\begin{tikzpicture}
|
|
\begin{umlsystem}[x=4.5, fill=red!10]{XML Herunterladen}
|
|
\umlusecase[x=0,y=-1.5,name=Login, width=20mm]{download}
|
|
\umlusecase[x=6.5,y=-1.5, name=Prüfung, width=30mm]{Pfad-Abfrage von DB}
|
|
\umlinclude[name=exte1]{Prüfung}{Login}
|
|
\end{umlsystem}
|
|
\umlactor[x=0,y=-1.5]{Benutzer}
|
|
\umlactor[x=-2,y=-4.5]{Anbieter}
|
|
\umlactor[x=0,y=-4.5]{Nachfrager}
|
|
\umlinherit[anchor2= -90]{Nachfrager}{Benutzer}
|
|
\umlinherit[anchor2= -100]{Anbieter}{Benutzer}
|
|
\umlassoc{Benutzer}{Login}
|
|
\umlnote[x=10.5,y=-4.5, width=4cm]{exte1-1}{condition: \newline File besteht }
|
|
\end{tikzpicture}
|
|
}%scalebox
|
|
\end{center}
|
|
\caption{Login Vorgang}
|
|
\label{fig:LoginVorgang}
|
|
\end{figure}
|
|
\subsection{Architektur}
|
|
Die Datenstruktur ist flach auf einer ebene aufgebaut.\\
|
|
Einzig die XML Files werden in einen Ordner abgelegt.\\[0.5em]
|
|
Die Software-Architektur der Eingeloggten Benutzerseiten ist auch Seiten-Orientiert. Das bedeutet das jede Seite die aufgerufen wird komplett geladen wird, einen eigenen header/body hat und nur die Navigation verschachtelt eingefügt wird.\\
|
|
\fbox{%
|
|
\begin{minipage}[c]{0.3\linewidth}
|
|
\begin{center}
|
|
\tikzstyle{every node}=[draw=black,thick,anchor=west]
|
|
\tikzstyle{file}=[draw=white]
|
|
\begin{tikzpicture}[%
|
|
grow via three points={one child at (0.5,-0.7) and
|
|
two children at (0.5,-0.7) and (0.5,-1.4)},
|
|
edge from parent path={(\tikzparentnode.south) |- (\tikzchildnode.west)}]
|
|
\node {htdocs}
|
|
child { node {Bilder}
|
|
child { node [file] {logo.png}}
|
|
}
|
|
child [missing] {}
|
|
child { node {XML}}
|
|
child { node [file] {angebot.php}}
|
|
child { node [file] {class.user.php}}
|
|
child { node [file] {config.php}}
|
|
child { node [file] {dbconfig.php}}
|
|
child { node [file] {dblogin.sql}}
|
|
child { node [file] {download.php}}
|
|
child { node [file] {erfassen.php}}
|
|
child { node [file] {index.php}}
|
|
child { node [file] {logout.php}}
|
|
child { node [file] {nav.php}}
|
|
child { node [file] {profile.php}}
|
|
child { node [file] {session.php}}
|
|
child { node [file] {sign-up.php}}
|
|
child { node [file] {style.css}}
|
|
child { node [file] {suche.php}}
|
|
child { node [file] {xml2.php}};
|
|
\end{tikzpicture}
|
|
\end{center}
|
|
\end{minipage}
|
|
}%
|
|
\fbox{%
|
|
\begin{minipage}[c][][t]{0.6\linewidth}
|
|
\newcommand{\baumtextskip}{0.23em}
|
|
\newcommand{\doublebaumtextskip}{4.5em}
|
|
\begin{small}
|
|
~\\[\doublebaumtextskip]
|
|
BusinessStreamline Logo für Loginseite.\\[\baumtextskip]
|
|
Ordner für alle Aufträge in XML Dokumtente.\\[\baumtextskip]
|
|
Angebotsabgabeformularseite.\\[\baumtextskip]
|
|
die Benutzerklasse.\\[\baumtextskip]
|
|
Der Datenbankzugriff für alle Login und Logout Vorgänge.\\[\baumtextskip]
|
|
Der Datenbankzugriff für alle Eingeloggten Vorgänge.\\[\baumtextskip]
|
|
Das Skript zur Erstellung der Datenbank.\\[\baumtextskip]
|
|
Der Vorgang des Herunterladens.\\[\baumtextskip]
|
|
Das Formular zur Erfassung von Nachfragen.\\[\baumtextskip]
|
|
Die erste Seite auf der man landet.\\[\baumtextskip]
|
|
Der Logout Vorgang.\\[\baumtextskip]
|
|
Die Navigation auf allen eingeloggten Seiten.\\[\baumtextskip]
|
|
Die Profilseite im eingeloggten zustand.\\[\baumtextskip]
|
|
Die sessions Verwaltung.\\[\baumtextskip]
|
|
Der Login vorgang.\\[\baumtextskip]
|
|
Der Login.\\[\baumtextskip]
|
|
Die erste Seite nach dem Login.\\[\baumtextskip]
|
|
Die Erstellung von XML Dokumenten.\\[\baumtextskip]
|
|
\end{small}
|
|
\end{minipage}
|
|
}%
|
|
|
|
|
|
\subsection{Datenbank}
|
|
Die Gruppe hat sich entschieden das Projekt auf Basis einer MySQL Datenbank mit PHP zu erstellen. Da ein Hoster über ein Team-Mitglied zur verfügung stand.
|
|
|
|
Zur Visualisierung wurden RM und ERM mit Dia erstellt:
|
|
\subsubsection{ERM}
|
|
\begin{figure}[H]
|
|
\begin{center}
|
|
\includegraphics[scale=0.4]{bilder/DB/DB-ERM2.png}
|
|
\end{center}
|
|
\caption{ERM zur Datenbank für BusinessStreamline}
|
|
\label{fig:ERM}
|
|
\end{figure}
|
|
\subsubsection{RM}
|
|
\begin{figure}[H]
|
|
\begin{center}
|
|
\includegraphics[scale=0.5]{bilder/DB/DB-RM2.png}
|
|
\end{center}
|
|
\caption{RM zur Datenbank für BusinessStreamline}
|
|
\label{fig:RM}
|
|
\end{figure}
|
|
\subsection{Webspace}
|
|
Die Seite ist online im Web unter folgender Adresse zu finden:\\[1em]
|
|
\begin{Large}
|
|
\url{http://wt1cs1.hoerler.us/}
|
|
\end{Large}
|
|
\newpage %-------------------------------------------------------------------
|
|
\begin{landscape}
|
|
\subsection{Termine und Meilensteine}
|
|
\begin{figure}[H]
|
|
\subsection{Zeitplan}
|
|
\includegraphics[scale=0.29]{bilder/Zeitplan/Zeitplanganz.png}
|
|
\caption{Zeitplanung}
|
|
\label{fig:Zeitplanung}
|
|
\end{figure}
|
|
\end{landscape}
|
|
\newpage %-------------------------------------------------------------------
|
|
|
|
\section{Realisation/Dokumentation}
|
|
|
|
\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 gestaltete 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. Im Formular des Angebots wird zuerst geprüft ob das Angebot nicht vom eingelogten Nutzer stammt und falls doch eine meldung platziert damit keine Angebote auf eigene Nachfragen gemacht werden können.
|
|
Ein Nutzer der die Nachfrage nicht erstellt hat kann per Post befehlt ein Angebot abgeben dass in der "Anbieter" Tabelle gespeichert wird. Vorgängig werden Leere Übermittlungen und Angebote mit über 9 Ziffern abgefangen und Fehlermeldungen platziert.
|
|
\subsection{Profile}
|
|
Der Ersteller einer Nachfrage musste nun noch ein Interface zur Akzeptierung eines Angebots erhalten dass dann die Bestellung auslösen wird. Da die erforderlichen Werte für die Auflistung der Einträge aus zwei Tabellen kommen musste ein Join der Tabellen erarbeitet werden das wiederholt noch nicht behandelte Thema im Fach Datenbanken machte es darum nicht einfacher. Durch Nachforschungen und Try\&Error konnte jedoch die Lösung ermittelt werden.
|
|
Durch IF/ELSE abfragen wird ermittelt ob für eine Nachfrage schone ein Angebot erstellt wurde und in dem falle der Download Button für das geforderte XML angezeigt oder dann k.A. für kein Angebot angezeigt.
|
|
\subsection{XML}
|
|
Da XML eine eigene Skript art ist mussten wir uns erst damit auseinandersetzen. Gut gibts dazu mehrere Tutorials. Als wir dann mit dem umsetzen der Aufgaben anfingen hatten wir schon einige fertig erstellte Skripts gefunden die diese Aufgabe automatisch durch Zuweisung der Tabellenspaltennamen erstellen. Jedoch waren alle für mehrere Tabellen-Zeilen ausgelegt und wir mussten diese dann an die gegebenheiten dass nur für ein Teil (und damit eine Zeile) iteriert wird anpassen. Die beste dokumentation fannden wir unter \cite{ref3} http://php.net/manual/en/book.dom.php welche mit einer Beschreibung auf Stackexchange zusammenpasste und uns so eine Grundlage zur Erstellung bot. \cite{ref4}.
|
|
\subsection{Filedownload}
|
|
Diese Problemstellung haben wir komplett unterschätzt. Die Art und Programmierung für den Trigger eines Downloads mit PHP ist kompliziert. Durch ausprobieren und der Kombination von verschiedenen Lösungen aus dem Internet konnte es dann bewerkstelligt werden. \cite{ref5}
|
|
|
|
\subsection{Testing}
|
|
Das Testen der Funktionen wurde auf basis der Use-Case Diagramme durchgeführt. Dabei stellt jeder Usecase ein Testszenario dar. Diese Testszenarien wurden aufbauend auf der Agilen Entwicklung jeweils am ende des sprints als Revision angehängt und genau so wie das Diagramm es darstellt für den jeweiligen Benutzertypen durchgespielt.
|
|
Bei Falschinterpretationen oder Fehlern in der Programmierung wurde bilateral darauf eingegangen und das Problem durch eine iteration behoben.
|
|
Zu den Einzelnen Fehlern die behoben werden mussten findet man das Protokoll in der Abweichungsanalyse \ref{subsec:Abweichungsanalyse}
|
|
|
|
\newpage %-------------------------------------------------------------------
|
|
\begin{figure}[H]
|
|
\section{Zeitaufwandsliste}
|
|
\begin{footnotesize}
|
|
\begin{center}
|
|
\begin{spreadtab}{{tabular}{ | l | c | c | c | l | }} \hline
|
|
@ Arbeitspaket & @ geplant & @ geleistet & @ delta & @ Erklärung \\ \hline
|
|
@ Projektorganisation & 1 & 1 & & \\
|
|
@ Projekt Analyse & 5 & 5 & & \\
|
|
@ Lösungsvarianten & 5 & 3 & -2 & @ \begin{scriptsize}Schell wurde klar das V2 im Web besser dokumentiert ist.\end{scriptsize}\\
|
|
@ Detailplanung & 40 & 60 & 20 & @ \begin{scriptsize}Die Usecase Diagramme wurden wiederholt überarbeitet.\end{scriptsize}\\
|
|
@ Dokumentation & 40 & 66 & 26 & @ \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 & 12 & 16 & 4 & @ \begin{scriptsize}der Schulische hintergrund fehlte zu dem Zeitpunkt noch.\end{scriptsize}\\
|
|
@ Abgebotsabgabe & 10 & 8 & -2 & \\
|
|
@ User Profile seite erstellt& 6 & 16 & 8 & \\
|
|
@ Angebotabgabe & 6 & 6 & 0 & \\
|
|
@ Angebote für eigene Nachfr. deakt. & 2 & 4 & 2 & \\
|
|
@ suche erstellt & 10 & 8 & -2 & \\
|
|
@ XML übersetzer & 14 & 16 & 2 & @ \begin{scriptsize}musste erst XML verstehen.\end{scriptsize}\\
|
|
@ Filedownload &3 & 10 & 10 & @ \begin{scriptsize}Aufgabe unterschätzt.\end{scriptsize}\\
|
|
@ Abweichungsanalyse & 1 & 1 & & \\
|
|
@ Dokumentation zusammenführen & 2 & 12 & 10 & @ \begin{scriptsize}Aufgabe unterschätzt.\end{scriptsize}\\
|
|
\hline \hline
|
|
@ Total & sum(b2:b21) & sum(c2:c21) & sum(d2:d21) & @ h \\ \hline
|
|
\end{spreadtab}
|
|
\caption{Zeitaufwand}
|
|
\label{tab:Zeitaufwand}
|
|
\end{center}
|
|
\end{footnotesize}
|
|
\end{figure}
|
|
|
|
\subsection{Abweichungsanalyse}
|
|
Produkt:\\
|
|
\begin{myitemize}
|
|
\item Das Login ist mit einer Separaten dbconfig.php angebunden da zu dem Zeitpunkt die Vererbung und deren Anwendung noch nicht im Unterricht thematisiert war konnte damit nicht weiter gearbeitet werden.
|
|
\item Die Angebotsabgabe Taste sollte gemäss Planung auf der gleichen Seite wie die Nachfragen stehen. Das konnte aufgrund fehlender Kenntnisse nicht so gelöst werden. Der Einfachheit halber wurde dazu eine Neue Seite erstellt. Das eigentliche Problem stellte sich heraus war, dass der Benötigte Schul-Stoff zu dem Zeitpunkt nicht behandelt war als wir diesen Sprint abhandelten.
|
|
\end{myitemize}
|
|
Projekt/Dokumentation:\\
|
|
\begin{myitemize}
|
|
\item Insgesamt hatten wir die benötigte Zeit zu tief eingeschätzt. Dies auch deshalb weil der nötige Schulische Hintergrund noch fehlte. \\ Der Umstand dass die Arbeit dem Schulstoff immer um ca. 4 Wochen vorauseilte und die nötigen Informationen im Netz recherchiert werden mussten erschwerte das zusammenarbeiten und die Arbeit enorm. \\ Das Zusammenarbeiten insofern, dass nie jedes Mitglied der Gruppe auf dem Selben stand war und die Arbeit weil der Schulstoff oft nachträglich fragen beantwortete die wir uns über das Netz nicht beantworten konnten und dadurch den Arbeitspunkt im Nachhinein nochmals überarbeiten mussten. Das generierte einen erheblichen mehraufwand der nicht nötig gewesen wäre.
|
|
\end{myitemize}
|
|
% 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}
|