600 lines
32 KiB
TeX
600 lines
32 KiB
TeX
%!TEX TS-program = pdfLaTeX
|
|
%!TEX encoding = UTF-8
|
|
%!BIB program = Bibtex
|
|
|
|
% Dokument definition
|
|
%-------------------------------------------------------------------
|
|
\documentclass[
|
|
12pt,
|
|
a4paper
|
|
]{article}
|
|
\usepackage[
|
|
left=2cm,
|
|
right=2cm,
|
|
top=3cm,
|
|
bottom=3cm
|
|
]{geometry}
|
|
\include{includes/ibz-document}
|
|
|
|
% Article Variables
|
|
%-------------------------------------------------------------------
|
|
\include{includes/author}
|
|
|
|
%Header & Footer
|
|
\include{includes/header}
|
|
|
|
% Document Variable-Set finetuned
|
|
\author{\authorname}
|
|
\title{\titlepre\titleseparator\titlename}
|
|
\date{\today}
|
|
% 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{includes/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 einer einfachen dynamischen 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 & je 80 Stunden\\
|
|
Präsentation & 15min. vor der Klasse \\
|
|
Abgabe & Elektronisch\\
|
|
Benotung & gemäss Beurteilungsschema\\
|
|
\end{tabular}
|
|
\end{minipage}
|
|
\newpage %-------------------------------------------------------------------
|
|
\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 die Sprint Reviews übernimmt. \\
|
|
Dabei wurde die Daily- auf Weeklymeetings 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 Arbeitspakete (nachfollgend ''AP'' genannt), dazu das Usecase Diagramm und die 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 allen zur Einsicht zur verfügung.
|
|
\subsection{Qualitätsmanagement}
|
|
Nach jedem AP wird das Geleistete untersucht und eventuelle Abschweifer von der Aufgabenstellung gleich behoben.
|
|
Untersucht wird anhand von User Stories und Usecase Diagrammen, ob die Lösung den Vorgaben entspricht.
|
|
\subsection{Abgrenzung}
|
|
Die Platform ist anonym. Die BusinessStreamline speichert 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 Nachfrager 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 will ich, dass der Kunde sich anmelden muss, so dass kein unbefugter Zugang besteht.
|
|
\item Als Dienstleister will ich Kontrolle über die Kundenanmeldung haben, so dass kein Kunde zweimal registriert sein kann.
|
|
\item Als Dienstleister will ich die gesuchten Teile abfragen können, so dass jederzeit Gewissheit über die Anzahl Nachfragen besteht.
|
|
\item Als Dienstleister will ich die Angebote überprüfen können.
|
|
\item Als Dienstleister will ich, dass alle Nachfrager und Anbieter anonym verhandeln können.
|
|
\end{myitemize}
|
|
\subsubsection{Nachfrager}
|
|
\begin{myitemize}
|
|
\item Als Nachfrager will ich eine Bezeichnung eines gesuchten Teils hinterlegen können, so dass ein Anbieter das Teil spezifisch suchen kann.
|
|
\item Als Nachfrager will ich die Qualität eines gesuchten Teils hinterlegt haben, so dass ich mich an Qualitätsmerkmalen orientieren kann.
|
|
\item Als Nachfrager will ich einen Lieferzeitpunk hinterlegen können, so dass ein Anbieter über die Lieferfrist informiert ist.
|
|
\item Als Nachfrager will ich die benötigte Menge angeben können, so dass ich diese mit einer Bestellung bekomme.
|
|
\item Als Nachfrager will ich ein Angebot annehmen können, so dass dem Anbieter eine Bestellung zugesandt wird.
|
|
\item Als Nachfrager will ich das Teil innerhalb der Lieferzeit zugesandt bekommen.
|
|
\end{myitemize}
|
|
\subsubsection{Anbieter}
|
|
\begin{myitemize}
|
|
\item Als Anbieter will ich abfragen, welche Teile gesucht sind, so dass ein Angebot erstellt werden kann.
|
|
\item Als Anbieter will ich, dass alle Eckpunkte geklärt sind, so dass keine unvorhergesehenen Kosten entstehen.
|
|
\item Als Anbieter will ich ein Angebot abgeben können, so dass ein schriftlicher Vertrag entsteht.
|
|
\item Als Anbieter will ich anonym bleiben, so dass die Nachfragefirma nur anhand des Preises entscheidet wer sie berücksichtigt.
|
|
\item Als Anbieter 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 kann das Angebot per E-Mail übermittelt bekommen.
|
|
\item Benutzer kann in Angebot die Telefonnummer und Anschrift hinterlassen.
|
|
\item Benutzer kann das Angebot anpassen.
|
|
\item Benutzer kann 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, kann die Speicherung aller Datensätze auch 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{Nachfrager}
|
|
\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}
|
|
\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.8}{
|
|
\begin{tikzpicture}
|
|
\begin{umlsystem}[x=4.5, fill=red!10]{Logins}
|
|
\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.8}{
|
|
\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=,y=-0.5]{Benutzer}
|
|
\umlactor[x=1,y=-3.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 Nachfrageerfassung}
|
|
\label{fig:NachfrageVorgang}
|
|
\end{figure}
|
|
\subsubsection{Suche}
|
|
\begin{figure}[H]
|
|
\begin{center}
|
|
\scalebox{0.8}{
|
|
\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.8}{
|
|
\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.8}{
|
|
\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 Profilseite aus Sicht des Nachfragers}
|
|
\label{fig:AngebotVorgang}
|
|
\end{figure}
|
|
\begin{figure}[H]
|
|
\begin{center}
|
|
\scalebox{0.8}{
|
|
\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 Profilseite aus Sicht des Anbieters}
|
|
\label{fig:AngebotVorgang}
|
|
\end{figure}
|
|
\subsubsection{XML}
|
|
\begin{figure}[H]
|
|
\begin{center}
|
|
\scalebox{0.8}{
|
|
\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}
|
|
\newpage %-------------------------------------------------------------------
|
|
\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 eingelogten Benutzerseiten ist auch Seitenorientiert. Das bedeutet, dass 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 eingelogten 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 eingelogten Seiten.\\[\baumtextskip]
|
|
Die Profilseite im eingelogten zustand.\\[\baumtextskip]
|
|
Die Sessionsverwaltung.\\[\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}
|
|
}%
|
|
\newpage %-------------------------------------------------------------------
|
|
\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}
|
|
Nachdem wir einige Tutorials durchgearbeitet hatten, fanden wir mit codeingcage \cite{ref1} ein Tutorial, das 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 spass 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 ohne externe Abhängigkeiten.
|
|
\subsection{Datenbankeinträge}
|
|
Um die Datenbankeinträge gemäss RM erstellen zu können 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 Tabellen 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 war, wie es umzusetzen ist, wurde auf einen einfachen Link zurückgegriffen und per ''GET'' Befehl die ID der Zeile übermittelt. 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'' befehl ein Angebot abgeben, das 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 muss nun noch ein Interface zur Akzeptierung eines Angebots erhalten, das 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.
|
|
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 Gegebenheit, dass nur für ein Teil (und damit eine Zeile) iteriert wird, anpassen. Die beste Dokumentation fanden 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}
|
|
\newpage%-------------------------------------------------------------------
|
|
\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 wurde, konnte damit nicht weiter gearbeitet werden.
|
|
\item Die Angebotsabgabetaste 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 war, dass der benötigte Schulstoff zu dem Zeitpunkt nicht behandelt war, als wir diesen Sprint abhandelten.
|
|
\end{myitemize}
|
|
Projekt/Dokumentation:\\
|
|
\begin{myitemize}
|
|
\item Insgesamt hatten wir zu wenig Zeit eingerechnet. 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}
|