Home

DIPLOMARBEIT - Martin Weise

Contents

1. db2 gt query SELECT FROM pf posten ORDER BY orderIndex ASC array l db3 gt query SELECT O color FROM pf berufsgruppen P JOIN PERE O Mos ROO WHERE NOS IDE EE MOB ORDER BRE TDI RASC array N if db gt count gt 0 ZUTEILUNGEN GEFUNDEN foreach db gt row as row Sposten row i row Code 56 Eingangslogik Tagesplan Das in Code 55 beschriebene Verfahren zeigt die Suche nach Leiharbeitern in der Datenbank und ist besonders raffiniert Man kann n mlich anhand der Lieferfrequenz O w chentlich 1 alle 2 Wochen etc und einem Startdatum ausrechnen wann der Lieferant kommt Das wird mithilfe von WEEK date WEEK P date P period 1 0 gepr ft In der n chsten Abfrage wird auf existieren von demselben Schritt in pf_wochenplan_bestellungen gepr ft Ist dieser dort vorhanden wird f r diese Teilabfrage vorerst nichts ausgegeben Anschlie end werden in Code 57 die verschobenen Bestellungen ausgelesen zerissene Produktketten usw 12 05 2014 Umsetzung Seite 101 von 125 HTL Mistelbach Planify App Thoma Weise ECT 1 as lieferant DATE ADD date INTERVAL m H D INT DATEDIFF DATE _ ADD FIRST_DAY OF W DAY date DAY as date NU es TID NU as stepID SE group Lieferant D name 0 as quantity 0 as duration e
2. Code 40 SQL Klasse 11 4 3 Komponenten 11 4 3 1 Wochenplan In den folgenden Punkten werden Komponenten des Wochenplans siehe Abb 37 unterteilt in Eingangslogik siehe Code 41 MySQL Statements und Ausgabe erkl rt if isset _ GET s amp amp preg match d 4 d 2 d 2 i GET s matches Spdate mktime 0 0 0 matches 2 matches 3 matches 1 else Spdate time Sheader new Header Smain new Main Code 41 Eingangslogik des Wochenplans Der Sourcecode in Code 42 ben tigt eine Zeitangabe um den vom Benutzer angeforderten Zeitraum zu liefern Die Kalenderwoche wird ber die _GET Variable am http www php net manual de class pdo php 25 02 2014 12 05 2014 Umsetzung Seite 87 von 125 HTL Mistelbach Planify App Thoma Weise Index s im Format YYYYMMDD gesetzt Kalenderwoche 11 wird in Form von s 20140310 angegeben Der Regul re Ausdruck in Zeile 3 sucht nach genau diesem Muster Wird dieses erkannt wird ein sog Timestamp dieses Datums erzeugt also der Zeitstempel 2014 03 10 um 00 00 00 Wird das Muster nicht erkannt wird einfach der aktuelle Zeitstempel gerade in diesem Moment genommen Sheader gt arrLinks index php p wochenplan s date Ymd strtotime date d m Y pdate 1 week Sheader gt arrLinks index php p wochenplanss date Ymd strtotime date d m Y pdate 1 week Code 42 Berechn
3. HTL Mistelbach Planify App Thoma Weise einer quivalenten Initialisierungsfunktion wie zB Sinstace gt init welche man vorher nat rlich in der Klasse definieren muss In der Funktion construct wird die Konstante CONTENT mit dem Namen des Verzeichnisses definiert in welchem sich alle Front End Dokumente der Module befinden Anschlie end werden die Funktionen setPages siehe 11 4 1 2 und setTitle siehe 11 4 1 4 aufgerufen Nun wird der Wert f r die von au en von Zugriffen gesch tzten Variable pageIndex ein Wert abh ngig von der momentanen Berechtigung des Benutzers und des Vorhandenseins der GET Variable oder des Wertes am Index p der _GET Variable vergeben 11 4 1 2 Funktion setPages Sie ist zust ndig die wichtigsten Informationen ber eine Seite in einem Array zu organisieren Die Datens tze werden von Hand eingegeben weil das sicherer von unerlaubten Zugriffen ist private function setPages Sthis gt pages array wochenplan gt array title gt Wochenplan file gt wochenplan php nav gt true permission gt wp Gs dienstplan gt array title gt Dienstplan wilet gt arenstplan pho nav gt true permission gt dp Ir Code 36 Klasse Template mit setPages Funktion Die Variable pages wird in Code 36 mit einem multidimensionalen Array das an den Stellen wochenplan dienstplan etc ein we
4. Start Wochenplan Start Dienstplan Start Produktion Start Einstellungen Start Login Men schlie en Ende Men Ende Men Ende Men Ende Men Ende Men Ende Men Seite 114 von 125 HTL Mistelbach Planify App Men Button dr cken Start Men Produkte dr cken Lieferanten dr cken Start Produkte Start Lieferanten Posten dr cken Start Posten Konten dr cken tal A P Mitarb Mitarbeiter P Fenster eiter Bearbeiten dr cken Speichern dr cken Start Konten ZEILE Weiteren Mitarbeiter hinzuf gen apierk rbe sichtbar Papierk rbe EIN hinzuf gen Papierk rbe entfernen Eingaben pr fen Papierkorb dr cken Firmen dr cken NEIN Fehlermeld ung Mitarbeiter entfernen a Start Firmen Mitarb eiter Abb 49 Flussdiagramm Mitarbeiter 12 05 2014 Anhang R ckmeldu ng Thoma Weise Mitarbeiter speichern Seite 115 von 125 HTL Mistelbach Planify App Produkte dicen Start Produkte Mitarbeiter Start Mitarbeiter dr cken Lieferanten dr cken Start Lieferanten tal Konten dr cken Start Konten Weitere dr cken Posten hinzuf gen 66006 Poste Posten Fenster e Bearbeiten dr cken apierk rbe sichtbar EIN Papierk rbe hinzuf gen Papierk rbe entfe
5. Die nicht offizielle Version HTML5 bietet Entwicklern eine riesige Auswahl von neuen Technologien die sich sehr leicht in bestehende Projekte implementieren lassen Erg nzte Funktionen von HTML5 sind unter anderem Offlinespeicher Echtzeit Kommunikation Hardwarezugang Markupneuerungen Bessere Multimedia Unterst tzung O O O O F r die Diplomarbeit sind die Punkte Hardwarezugang und Neues Markup relevant weil es n tig war die Kamera des Endger tes anzusteuern Mit HTML5 ist sichergestellt dass die Kamera eines jeden Ger tes mit modernen Browser angesteuert werden kann ohne f r jedes einzelne Ger t eine spezielle Notation zu t tigen Das Markup in dem in Abb 22 zu sehenden Dokument ist nicht wirklich aufw ndig wie sich vielleicht vermuten l sst Man kann die Kamera eines Endger tes sehr leicht durch Erweiterung des input Elements mittels accept image capture camera aufrufen HTML5 f gt das aufgenommene Bild als Datei dem input Feld an F r die vorhandenen Screenshots wurde ein iPhone 4G verwendet Man kann aber genauso gut mit jedem anderen mobilen Endger t mit integrierter Kamera auf http slides html5rocks com 03 02 2014 12 05 2014 Theorie Seite 41 von 125 HTL Mistelbach Planify App Thoma Weise dieeingebaute Kamera zugreifen Mit dem heutigen Fortschritt Stand 16 Februar 2014 ist es jedoch noch nicht einwandfrei m glich Hersteller bergreifend Fotos mit integrierten externen
6. E N mistelbach Biomedizin und Gesundheitstechnik H here Lehranstalt f r HTL Mistelbach hEl bildung mit zukunft Biomedizin und Gesundheitstechnik DIPLOMARBEIT Planity App Plani Ausgef hrt im Schuljahr 2013 14 von Martin Thoma 5AHELB 24 Martin Weise 5BHELB 25 Mistelbach am 12 05 2014 Betreuer Betreuerin DI Paul Tutschek HTL Mistelbach Planify App Thoma Weise Eidesstattliche Erkl rung Ich erkl re an Eides statt dass ich die vorliegende Diplomarbeit selbst ndig und ohne fremde Hilfe verfasst andere als die angegebenen Quellen und Hilfsmittel nicht benutzt und die den benutzten Quellen w rtlich und inhaltlich entnommenen Stellen als solche erkenntlich gemacht habe Mistelbach am 12 05 2014 Martin Thoma Martin Weise 12 05 2014 Eidesstattliche Erkl rung Seite 2 von 125 HTL Mistelbach Planify App Thoma Weise Danksagung Wir bedanken uns bei e DI Paul Tutschek unserem Betreuer daf r dass er uns dieses Projekt vorgeschlagen hat uns bei der Verwirklichung des Projekts unterst tzt hat und fachlich sehr kompetent beraten hat e Christian Heiss unserem Partner der Heiss amp S GmbH f r die gute Zusammenarbeit e Yves Schulz vom Sektor 5 der uns steuerrechtlich beraten hat und uns Kontakte sowie wichtige Tipps f r die Zukunft mitgegeben hat e Mag Reinhard Gabauer unserem Wirtschaft amp Recht Professor der uns ebenfalls steuerrechtlich beraten hat e Phi
7. wird das src Attribut des Bildes anstatt mit dem sonst blichen Verweis auf eine Datei nun mit einem Objekt das aus diesem Zwischengespeicherten Bild generiert wurde bef llt 11 3 3 Komponenten Man kann die Web Applikation in die Teile Wochenplan Dienstplan Tagesplan Produktion Einstellungen Leiharbeiterauswahl und Spezialbestellungen einteilen Im Folgenden werden alle diese Komponenten im Detail erl utert deren Code erkl rt und bei Bedarf ein Screenshot angef gt 11 3 3 1 Wochenplan Im Wochenplan werden 10 JavaScript Funktionen zur Abdeckung des geforderten Produktumfangs ben tigt Im Folgenden wird eine Auswahl der wichtigsten Funktionen beschrieben function wp_sel SA es ldats to US Ens dara ao toggleClass selected Code 25 JavaScript wp_sel Funktion In Code 25 wird die Funktion vn sel dargestellt Wie sich vermuten l sst macht diese nichts anderes als allen Elementen des Wochenplans mit der Klasse item und dem Attribut data id dessen Wert mit dem angeklickten Element bereinstimmen muss eine Klasse zuzuweisen oder zu entfernen Die Klasse selected ist etwas ganz spezielles Sie ndert den Hintergrund des Elements zu einem 45 gestreiften Fortschrittsbalken Dieses Muster wird dann auch noch von links nach rechts bewegt und simuliert so den Fortschritt Die neue Hintergrundfarbe h ngt von der alten ab 12 05 2014 Umsetzung Seite 73 von 125 HTL Mistelbach Planify App
8. 13 10 2013 13 10 2013 Beginn der Testphase und Bedienungsunterweisung 28 10 2013 01 11 2013 Fertigstellung 21 10 2013 15 12 2013 Bedienungsanleitung fertig 10 02 2013 15 01 2014 Endg ltige Abnahme und bergabe der App 21 02 2013 01 03 2014 Theoretischer Teil der Diplomarbeit fertig 22 04 2013 15 04 2014 Diplomarbeit fertig 12 05 2014 20 05 2014 Abgabe Diplomarbeit Tabelle 2 Meilensteine Mit der endg ltigen Abnahme des Projektes gab es Verz gerungen da anfangs der Server unseres Kunden noch nicht vorhanden bzw noch nicht in Betrieb war und als dieser dann funktionierte war es schwierig einen Termin zu vereinbaren an dem alle Beteiligten Zeit hatten Die Diplomarbeit wurde erst eine Woche sp ter als geplant fertiggestellt da die Schule neue Anforderungen an die Diplomarbeit stellte und wir unsere Diplomarbeit dahingehend noch anpassen mussten 3 1 Kosten Name Aufwand in Euro PHPStorm7 2 St ck 180 Photoshop Elements 12 95 Visio Professional 60T Probeversion 0 Diplomarbeit drucken 5 St ck 140 Verkauf App 2000 USt 20 0 Erl s 1585 Tabelle 3 Kostenaufschl sselung 12 05 2014 Projektplanung Seite 16 von 125 HTL Mistelbach Planify App Thoma Weise 4 Markt amp Konkurrenzanalyse W hrend unseres Projektes haben wir uns oft berlegt welche St rken und Schw chen unser Projekt und auch welche Chancen man mit diesem Projekt am Markt hat u
9. Abb 22 11 2 7 js Verzeichnis Das beinhaltet die Haupt JavaScript Datei main js und ein Unterverzeichnis 11 2 7 1 vendor Unterverzeichnis Hier werden alle JavaScript Dateien von externen Anbietern engl vendor Die Skripte bootstrap min js jquery min js Bibliothek jquery mobile custom min js Taphold Funktion man k nnte auch Bibliotheken wie hammer js verwenden jquery noui slider min js Der Schieberegler der Mitarbeiter Arbeitszeit jquery stayInWebApp min js wichtig um eine am Homescreen abgelegte Web Applikation etwas mehr wie eine native App wirken zu lassen jquery ui min js Draggable Droppable jquery ui touch punch min js wichtig weil jquery Ul alleine nicht auf mobilen Ger ten unterst tzt wird 11 2 8 sql Verzeichnis Beinhaltet ein Backup der Datenbank im SQL Format 11 2 9 var Verzeichnis Dieses beinhaltet den Druckbaren Tagesplan print tagesplan php der mit der fpdf Klasse arbeitet sowie die Projektvariablen variables php die f r die Template nttp www fpdf org 02 03 2014 https github com EightMedia hammer js 05 03 2014 12 05 2014 Umsetzung Seite 67 von 125 HTL Mistelbach Planify App Thoma Weise Klasse wichtig sind und die Datei welche die aufgenommenen Bilder in die richtige Rotation versetzt sodass sie immer aufrecht sind und im quadratischen Verh ltnis stehen als auch 2 Unterverzeichnisse 11 2 9 1 controller Unterverzeichnis Controller Beinhaltet d
10. D date IS NULL AND Q ID P productID ORDER BY 0 name ASC Code 47 SQL Abfrage der Produkte im Wochenplan Die Zeilen 114 f werden nun vereinfacht dargestellt weil es nicht des ganzen Codes bedarfs F r detailliertere Informationen werfen Sie bitte einen Blick auf den beigef gten Datentr ger und betrachten Zeilen 114 f in source cntnt wochenplan php Code 49 zeigt vereinfacht wie die beweglichen statischen Elemente des Wochenplans erzeugt werden Es werden 7 Spalten mittels for Schleife erzeugt und erst in dieser nachgeschaut ob Elemente angezeigt werden sollen Der Trick dabei ist es die Daten aus der Datenbank so aufzubereiten dass man mit nur einer einzigen Abfrage den gesamten Wochenplan erh lt ohne 7 Mal zu pr fen ob etwas vorhanden ist Das Standard db gt row Array ist dabei nicht hilfreich Es wird stattdessen ein Array dataerstellt und durch die for Schleife bef llt Undzwar wird an der Stelle Sdata x nun ein neues Array erzeugt wobei x dem Tagesindex i aus der Datenbank entspricht Sdata array for db gt row as i gt row Sdatale zone Seren Code 48 Datenaufbereitung f r den Wochenplan Da die Daten nun wunderbar aufbereitet sind muss man diese nurnoch auf L nge berpr fen ist diese gr er 0 wird damit begonnen alle Schritte dieses Arrays auszugeben Die Eigenschaften color ID stepID duration qty und productName sind wichtig f r den Schritt und ersetzen na
11. EE EE ER 9 5 ee e EE 33 9 5 1 Spezialbestellung sec ee 33 9 6 le Tote EE 34 96 A a a De er 34 9 6 2 Produktgruppen nie ee eine ee 35 9 6 3 Mitarbeitern eaa ea RA E E a EEE RAE T 35 9 6 4 Lieferanten a a a a N Er ereet 36 9 6 5 EE 37 9 7 RO e E A E E E 37 10 Programmieren Theorie Anis ee 39 10 4 Allgemeines nee suchte re 39 10 1 1 Prinzip as 39 AE E 39 A Hadrcihnerkeireit 39 1022 a ee a a De ee 44 10 2 3 e EE 47 1024 PHP een nenne 53 O A OTAN 57 UE e ea 59 10 2 7 Workflow in Anlehnung an L t 21 62 12 05 2014 Verzeichnisse Seite 8 von 125 HTL Mistelbach Planify App Thoma Weise 11 Pro rammieren Umselzung sn a 65 11 1 Entwicklungsumgebung zarte ee 65 11 1 1 Funktionen age en a a eent 65 RRE EE 66 11 2 1 ajax VerzeiChNiS see 66 11 2 2 cntnt Verzeichnis ee eer 66 UE Oe TE 66 11 24 Font VerzelC ONIS sa bc a a EN EE Ee ENEE 66 11 2 5 EE NEE EIERE 67 11 26 1M9 Verzeichhis se na en 67 11 2 7 JS VOZ een En 67 E Ee E 67 ba Dee la 67 11 3 denne vii LE 68 A ee 68 1123 23 Malas Dale ee bai 72 11 3 3 gt KOMPanehlen atera stand 73 114 BackEnd tenen ee ei ee ee 82 11 4 1 Template coin ee enger eur 82 11 4 2 SQ Klassen a ee ee ee E 86 11 54 37 ing e TO GE 87 PO Eee 104 PTIICHISHNEe 2 en ee een 104 Allgemeines curar RAR lesen 104 Einleitung 105 Gh raklerisika sr ae ee 105 Lieter mlang isa ii 106 Sa WT Ce EE 106 Farbliche HErv rhebungen anne le 106 Ei
12. HTL Mistelbach Planify App IV Zeiterfassung Thoma Weise Name Datum T tigkeit Dauer h Bereich Thoma 08 02 2013 Diplomarbeitsvorschlag von Herrn Tutschek Weise 08 02 2013 Diplomarbeitsvorschlag von Herrn Tutschek Thoma 15 02 2013 Diplomarbeitsvorschlag konkretisieren Weise 15 02 2013 Diplomarbeitsvorschlag konkretisieren Thoma 21 02 2013 Kundentreffen Anforderungen Weise 21 02 2013 Kundentreffen Anforderungen Thoma 01 04 2013 Lastenheft erstellen Weise 01 04 2013 Lastenheft erstellen Thoma 09 04 2013 Pflichtenheft erstellen Weise 09 04 2013 Pflichtenheft erstellen Thoma 23 04 2013 Pflichtenheft erstellen Weise 23 04 2013 Pflichtenheft erstellen Thoma 30 04 2013 Pflichtenheft erstellen Weise 30 04 2013 Pflichtenheft erstellen Thoma 06 03 2013 Designentwurf It Pflichtenheft Weise 06 03 2013 Designentwurf It Pflichtenheft Thoma 19 03 2013 Designentwurf It Pflichtenheft Weise 19 03 2013 Designentwurf It Pflichtenheft Thoma 02 04 2013 Design Konzept Pr sentation Weise 02 04 2013 Design Konzept Pr sentation Thoma 03 04 2013 Pflichtenheft verbessern Weise 03 04 2013 Pflichtenheft verbessern Thoma 11 05 2013 Pflichtenheft verbessern Weise 11 05 2013 Pflichtenh
13. Leiharbeiterfirmen nderungen vornehmen Huber Abb 18 Planify Einstellungen Leiharbeiterfirmen 9 6 4 Lieferanten Unter Lieferanten sind alle vorhandenen Lieferanten aufgelistet Hier k nnen Sie die vorhandenen Lieferanten bearbeiten Wenn Sie auf das rechts unten klicken wird ein neuer Lieferant hinzugef gt Jetzt muss noch der Firmenname ein Bestellungsintervall ein Startdatum und die Wochentage an denen bestellt werden muss eingegeben werden Anschlie end m ssen Sie rechts unten auf Speichern klicken damit die nderungen gespeichert werden Wenn Sie einen Lieferanten l schen wollen m ssen Sie rechts unten auf Bearbeiten klicken und anschlie end auf den Papierkorb neben dem zu l schenden Lieferanten klicken 12 05 2014 Bedienungsanleitung Seite 36 von 125 HTL Mistelbach Planify App Thoma Weise Einstellungen Lieferanten Firma 1 W chentlich v 14 12 2013 Montag Dienstag Mittwoch Donnerstag Freitag Samstag Sonntag Montag Dienstag Mittwoch Donnerstag Freitag Samstag Sonntag 14 12 2013 Montag Dienstag Mittwoch Donnerstag Freitag Samstag Sonntag EN gt N r w Firma 2 W chentlich v rma 3 W chentlich D Montag Dienstag Mittwoch Donnerstag Freitag Samstag Sonntag a u N P H Firma 4 W chentlich M Abb 19 Planify Einstellungen Lieferanten 9 6 5 Posten Unter Posten sind alle vorhandenen Posten aufgelistet Hier k nnen Sie die vorhandenen Posten
14. WHERE S ID R colorID AND R ID Q group AND 0 ID P employeeIlD AND P temp IS NULL AND P date gt FIRST DAY OF WEEK date AND P date lt DATE ADD FIRST_DAY OF WEEK date INTERVAL 6 DAY UNION SELECT DATEDIFF D date FIRST DAY OF WEEK date as 1 P CID D date P employeelD D boss 0 name NULL NULL 3 P starttime P endtime Ss color FROM pf tagesplan zuteilungen P JOIN pf leiharbeiter Q JOIN G berufsgruppen R JOIN of colors S WHERE S ID R colorID AND P temp IS NOT NULL AND Q ID P employeeID AND R ID 4 ORDER BY ir pID ASC Code 51 SQL Abfrage Dienstplan Mitarbeiter Der Index des Mitarbeiters in Code 51 wird wie im Wochenplan schon erkl rt berechnet EL ECT Statements werden mit denen einen zweiten vereint Die Ergebnisse des ersten s 12 05 2014 Umsetzung Seite 96 von 125 HTL Mistelbach Planify App Thoma Weise Dieses fragt jedoch nur Leiharbeiter ab anschlie end werden beide Ergebnisse nach dem Tagesindex i und pID in aufsteigender Reihenfolge sortiert EE Mon De ER Ro A O yy SQL ABFRAGE DIENSTPLAN MITARBEITER SE EE gt 0 foreach db gt row as row sarr lerowl 07111 Srow For Sl EE Ee es Sdate strtotime time gt row 0 date i day echo lt ul class unstyled droppable echo smain 21sHolidaykdase t a m 1 Sdate
15. damit die nderungen gespeichert werden Sie k nnen f r jeden Benutzer festlegen welche Fenster er sehen bzw bearbeiten darf Gr n berechtigt den Benutzer das Fenster zu bearbeiten Rot nicht 12 05 2014 Bedienungsanleitung Seite 38 von 125 HTL Mistelbach Planify App Thoma Weise 10 Programmieren Theorie 10 1 Allgemeines 10 1 1 Prinzip Das World Wide Web basiert auf der klassischen Client Server Architektur Darunter versteht man eine gemeinsame Informationsverarbeitung welche einzelne Komponenten zwischen Programmen auf miteinander vernetzten Rechnern aufteilt In diesem Netz k nnen sowohl Server die ber das Netz Dienstleistungen anbieten als auch Clients teilnehmen die bei Bedarf solche Dienste anfordern Die Kommunikation zwischen Server und Client erfolgt in Form von Transaktionen die ein Verbund aus logisch zusammenh ngenden Aktionen ist Client und Server sind entweder ber ein lokales Netz oder ber gro e Entfernungen hinweg zum Beispiel ber eine Satellitenverbindung miteinander verbunden Relevante Eigenschaften von Teilnehmern dieses Netzes ist beispielsweise das Rechenleistungsverm gen Dabei kann der Client den Server leistungstechnisch gesehen durchaus bersteigen denn die Idee hinter dieser Architektur ist eine optimale Ausnutzung der Ressourcen der beteiligten Systeme f r den jeweiligen Zweck 10 2 Sprachen 10 2 1 HTML Die Hypertext Markup Language HTML wird vom Browser des Clie
16. dass ein Konzept das f r einen Anwendungsbereich interessant ist dann r ckwirkend auf andere ebenso interessant wirkt und dann auch in Bereiche bernommen wird die eigentlich als Abgeschlossen galten 10 2 7 4 Entwicklungsphase Hier hat der Mobile First Ansatz wieder die volle G ltigkeit die zuvor festgehaltene Anordnung der Elemente wird in den Fokus genommen Es gilt m gliche Konzeptfehler mit dem Design abzukl ren und es m glichst vielen Aufl sungen verschiedener Endger te recht zu machen Zil13 http contentsmagazine com 12 05 2014 Theorie Seite 64 von 125 HTL Mistelbach Planify App Thoma Weise 11 Programmieren Umsetzung 11 1 Entwicklungsumgebung F r das rasche Umsetzen einer komplexen Anwendung wie der Diplomarbeit ist es notwendig flexibel und effizient arbeiten zu k nnen Daf r stehen Entwicklern diverse Werkzeuge zur Verf gung wie der Datei Explorer ein Textverarbeitungsprogramm und der Browser f r zB Datenbankverwaltung Je gr er die Anzahl der verwendeten Entwicklerwerkzeuge desto schwieriger wird es bei der Sache also bei der Arbeit zu bleiben Muss man st ndig zwischen Datei Explorer und Textverarbeitungsprogramm hin und herschalten verliert man schnell das Interesse zB noch eine weitere Stunde zu arbeiten Also setzt man auf sog integrierte Entwicklungsumgebungen engl IDE Integrated Developemnt Environment Diese bringen zumindest die vorhin genannten Funktionen mit
17. die von uns verwendete Software PhpStorm Du SD OI I Bon kin FE D zuckerbaecker EJ cntnt gt F eo prp gl E Projea sl O tr Ge ffnete Dateien m EI o S ES a SI 2 echo lt div id content gt lt div id login class wrapper text center gt lt div id logo gt lt div gt S H 3 if isset _GET s 88 _GET s m E 4 echo Login Daten sind nicht korrekt E 5 else if isset 5_GET s 88 _GETL s 1 El gt 6 echo BATES Raten zingeben El H H 3 8 lt form action ajax login php method POST gt 9 lt div gt lt imput type text name user placeholder Benutzername Email class span3 gt lt div gt 10 lt div gt lt imput type password name pass placeholder rr class span3 gt lt div gt 1 lt div gt lt imput type submit class btn value Absg lt div gt 191 Acorm gt 14 lt div gt lt div gt Projektstruktur Favorites L Spe T0D0 Terminal MM 9 Changes Eh Event Log 14 13 cr UTF 8 Gt master 8 E Closing tap matches nothing 259 PM Abb 36 PhpStorm 7 0 Entwicklungsumgebung 11 1 1 Funktionen Die verwendeten Kernfunktionen sind in Abb 36 markiert Man findet einen komplettes Dateiverwaltungssystem vor mit dem man zB ffnen 1 und speichern 2 kann Zudem kann man externe Versionskontrollsysteme verwenden Um eine Version auf einen externen Server hochzuladen muss man nur VCS Push 4 dr cken
18. else Sthis gt title this gt pagesl err104 title else if empty this gt pagelndex Sthis gt title this gt pages wochenplan title else Sthis gt title this gt pagesl err404 title Code 38 Klasse Template mit SetTitle Funktion 11 4 1 5 Funktion loadPage Die Funktion in Code 38 berpr ft ob die Variable pageIndex gesetzt ist und ob an der Stelle des Wertes von pageIndex im Array pages berhaupt etwas zu finden ist und ob die dort angegebene Datei berhaupt im System exisitiert Ist das der Fall und hat der Benutzer die passende Berechtigung zu der Seite wird sie an Ort und Stelle inkludiert also bernommen hat der Benutzer jedoch keine Berechtigung und die Seite exisitiert wird die Datei an der Stelle err500 im Array pages aufgerufen Fehlt die Angabe ber das Berechtigungsk rzel f r die Datenbank wird davon ausgegangen dass die Seite ffentlich zug nglich ist und wird inkludiert Wenn die Variable pageIndex nicht gesetzt ist an der Stelle des Wertes von pageIndex im Array pages nichts zu finden ist oder das dort angegeben Dokument am Server nicht exisitert wird standardm ig das Fehlerdokument eingebunden das im Normalfall immer vorhanden ist public function loadPage if isset this gt pagelndex amp amp isset this gt pages this gt pagelndex amp amp file exists _ CONTENT this gt pages this gt pagelndex file VAL
19. gt Semployee query e INSERT IGNORE INTO pf tagesplan zuteilungen date employeeID VALUES date Y m d S date Semployee ID EINTEILEN Sdb gt query query array Code 50 Mitarbeiter einteilen im Dienstplan Wie in Code 50 zu sehen ist wird zuerst abgefragt ob schon Mitarbeiter der aktuellen Kalenderwoche zugewiesen sind Sind keine zugeteilt wird f r Montag Samstag 6 Tage das zugeh rige Datum errechnet und ein Query zusammengesetzt der jeden Mitarbeiter an jeden dieser Tage einteilen soll vorausgesetzt der aktuelle Tag ist kein Feiertag Smain gt isHoliday Sp ter wird dieser zusammengesetzte Query noch ausgef hrt und die Mitarbeiter sind nun eingeteilt 12 05 2014 Umsetzung Seite 95 von 125 HTL Mistelbach Planify App Thoma Weise SELECT DATEDIFF P date FIRST DAY OF WEEK date as i P ID D date P employeelD as eID IF P boss IS NOT NULL 1 NULL as boss O firstname O surname OQ Image O group 1 as pID IF P starttime IS NULL O starttime P starttime starttime IF P endtime IS NULL Oo endtime P endtime as endtime S color FROM pf_tagesplan zuteilungen P JOIN of mitarbeiter Q JOIN pf berufsgruppen R JOIN of colors S
20. if ui draggable parent is last child Sleigh Kee Cl eelere D se EE S tbiei finish effect highlight color color 1000 else HOVER EFFEKT ZUR CKSETZEN LOSLASSEFFEKT EINLEITEN this css background fff finish effect highlight f colloricolior 1000 S ajax Ehe MASIA url ajax tagesplan add employee to posten php dator aoon clama 2 y MO ra goal app en ato test si O IA eq this index css 1 Vetter top 0 DP Wo cale ciues tp employee count Code 33 JavaScript tp_drop Funktion Anschlie end wird in Code 34 ein AJAX Request an die Datei tagesplan add employee to posten php geschickt welche bestehende Eintr ge aktualisiert und neue vornimmt Das Element wird sofort zu dem Posten verschoben der auf der Loslass Fl che liegt Au erdem werden die absoluten Positionen des Elements auf 0 gesetzt weil sich auch die absolute Position zu einer Relativen ge ndert hat jQuery Skript bernimmt dies und das Element sonst einfach irgendwo platziert w ren w rde 12 05 2014 Umsetzung Seite 81 von 125 HTL Mistelbach Planify App Thoma Weise function update posten position e ui if this 0 ui item parent 0 S ajax Les T ROSTIT EE EE EE EE data f date ftagesplan data date stepid ui item data stepid eelere group ui item parent index 1 Code 3
21. lt span gt lt ANZAHL BESTELLUNGEN gt lt span gt lt fli gt lt BESTELLUNGEN gt lt li class eitem data id style background color gt lt div class overflow gt lt PRODUKTNAME gt lt div gt lt span class fancy qty gt lt MENGE gt lt span gt lt 11 gt lt ENDE BESTELLUNGEN gt KE Code 49 Markup Wochenplan Arbeitsschrite Bestellungen vereinfacht 11 4 3 2 Dienstplan Der Aufbau des Dienstplans siehe 9 2 hnelt stark dem des Wochenplans so sind der Header bis auf den Text und die Toolbar rechts unten von der Programmierung ident Zur Vermeidung von Redundanzen wird dieser Teil nicht genauer erl utert 12 05 2014 Umsetzung Seite 94 von 125 HTL Mistelbach Planify App Thoma Weise Semployees new SOL Semployees gt query SELECT ID FROM pf mitarbeiter array VORERST NUR AKTUELLE WOCHE Sdb gt query SELECT ID FROM pf tagesplan zuteilungen WHERE date gt FIRST DAY OF WEEK date AND date lt DATE ADD FIRST DAY OF WEEK date INTERVAL 6 DAY array uE date gt mysql real escape string date Y m d pdate Dr query if db gt count 0 NO EMPLOYEES FOUND NO PROBLEM gt CALL THEM TO WORK torso o sdate strtotime time gt row 0 date i day if S Smain gt isHoliday date d m Y date foreach employees gt row as j
22. on taphold tagesplan li item not ui sortable helper cnor a liererenit ll EE Chenge value z document on click tagesplan li item not ui sortable Helper mes tera TEE Eet pamaco E PRE angie luee ee document on click wochenplan li basso bereet Tree EEN EE sao elec Y ms sell Les all P Code 23 Teil der Event Handler Am Anfang wird definiert s Code 23 beim Klicken auf welches Element verhindert werden soll dass die Web Applikation verlassen werden soll Daf r wird die Funktion stayInWebApp der jquery stayInWebApp min js verwendet und auf das Element a angewandt welches im Normalfall dazu f hrt dass die Web Applikation verlassen wird Die Aktion taphold wird durch die jquery mobile xxx min js bereitgestellt if url in window amp amp webkitURL in window window URL window webkitURL function takePicture event this parent ajaxForm success proxy function showResponse responseText this parent parent find img data url responseText IMG this statusCode 400 function msgq show html lt h4 gt Fehler lt h4 gt fadeOut 8000 y AUTO PREVIEW if event target files length 1 amp amp event target files 0 type index0f image 0 this parent parent find image attr src URL createObjectURL event tar get files 0 this parent su
23. um seine Version auf 12 05 2014 Umsetzung Seite 65 von 125 HTL Mistelbach Planify App Thoma Weise dem vorher konfigurierten Server hochzuladen Steigt man frisch in das Programm ein oder m chte nderungen von anderen Entwicklern herunterladen dr ckt man VCS Pull 3 um diesen Vorgang einzuleiten Die nderungen zur aktuellen Versionen werden dann im Changes Log 6 angezeigt wenn man m chte sogar Zeile f r Zeile M chte man vor dem Verlassen der IDE noch eine Anmerkung f r das n chste Mal hinterlassen kommentiert man mit TODO Anmerkung sofort scheint im TODO Log 5 die entsprechende Zeile mit Dateinamen auf und man sieht die Anmerkung 11 2 Datei Struktur Das Model View Controller MVC Modell ist in der Programmierung besonders beleibt weil es Pr sentations und Logikschicht klar voneinander trennt Diese Separierung ist wichtig daher wurde die Diplomarbeit nach diesem Aspekt gestaltet Hinzu kommen noch andere Verzeichnisse die einen eigenen Sinn verfolgen 11 2 1 ajax Verzeichnis Dieses Verzeichnis beinhaltet jede Datei die ber einen AJAX Request angefordert wird Das sind im Normalfall PHP Skripte welche f r die Auswertung von HTML Formularen zust ndig sind 11 2 2 cntnt Verzeichnis In diesem Verzeichnis befinden sich das Layout des Wochenplans Dienstplans Tagesplans der Bestellungen Einstellungen und weiterer Seiten 11 2 3 css Verzeichnis Hier befinden sich die CSS Dateien wie bootstrap
24. 07 2013 Backend Arbeiten Weise 01 08 2013 Backend Arbeiten Weise 02 08 2013 Backend Arbeiten Weise 03 08 2013 Backend Arbeiten Weise 05 08 2013 Backend Arbeiten Weise 07 08 2013 Backend Arbeiten Weise 08 08 2013 Backend Arbeiten Thoma 18 08 2013 Kundentreffen Entwurfpr sentation Weise 18 08 2013 Kundentreffen Entwurfpr sentation Thoma 27 08 2013 Sektor5 Treffen Weise 27 08 2013 Sektor5 Treffen Thoma 28 08 2013 Frontend Arbeiten Weise 28 08 2013 Frontend Arbeiten Thoma 01 09 2013 Frontend Arbeiten Thoma 02 09 2013 Frontend Arbeiten Thoma 03 09 2013 Frontend Arbeiten Weise 05 09 2013 Backend Arbeiten Weise 06 09 2013 Backend Arbeiten Weise 07 09 2013 Backend Arbeiten Thoma 23 09 2013 Diplomarbeitsantrag Weise 23 09 2013 Diplomarbeitsantrag Thoma 30 09 2013 SQL Abfragen Programmierung Weise 30 09 2013 SQL Abfragen Programmierung Thoma 07 10 2013 Bedienungsanleitung Weise 07 10 2013 Programmierung Thoma 13 10 2013 Kundentreffen Weise 13 10 2013 Kundentreffen Thoma 14 10 2013 Bedienungsanleitung Weise 14 10 2013 Programmierung Thoma 21 10 2013 Bedienungsanleitung Thoma 21 10 2013 Datenbank Optimierung Weise 28 10 2013 Datenbank Optimierung
25. 2014 http ntml5 mobile de blog meta viewport fuer mobile anpassen 17 02 2014 12 05 2014 Umsetzung Seite 69 von 125 HTL Mistelbach Planify App Thoma Weise Wenn man die Web Applikation zum Homescreen hinzuf gt soll der voreingestellte Name Planify sein das stellt apple mobile web app title sicher lt link rel icon type image x icon href img png favicon png gt lt link rel shortcut icon href img touch apple touch icon png gt lt link rel apple touch icon precomposed href img png favicon72x72 png gt lt link rel stylesheet type text css href css bootstrap min css gt lt link rel stylesheet type text css href css jquery gridster css gt lt link rel stylesheet type text css href css normalize css gt lt link rel stylesheet type text css href css page css gt lt link rel stylesheet type text css href css jquery nouislider css gt Code 20 Verlinkte externe Ressourcen des index php Um externe Ressourcen in Verbindung mit dem index php bringen zu k nnen gibt man eine Ressource mithilfe des lt link gt Tags in das index php an diese sind selbstschlie end ben tigen also keinen Closing Tag Dabei spielt das Attribut rel eine wichtige Rolle Es gibt an welchen Zweck die verlinkte Ressource f r das Dokument hat das Attribut type hingegen gibt ber den Typ der verlinken Ressource Auskunft So l sst sich zum Beispiel das Icon einer Web Applikation se
26. HTL Mistelbach Planify App Thoma Weise Hat man diese Fragen gekl rt gilt es von den vorliegenden Entw rfen die restlichen Entw rfe zu besprechen Man sollte sich nun Gedanken ber kleinere und gr ere Bildschirme machen Dabei darf man sich nicht dazu verleiten lassen die Desktop Ansicht zu vernachl ssigen Es kann n mlich durchaus auch vorkommen dass dann ein sog Content out entsteht und wichtiger interessanter Inhalt fehlt und dem Nutzer dann eine langweilige Web Applikation geboten wird Das Design darf nicht zu kurz kommen Das Zusammenspiel von Bildern Texturen Layout und Schriftstil sind auf mobilen und station ren Endger ten genauso unverzichtbar es kommt auf die Dosierung an apura a aro ed S ES ch d ve en K Kr Wi Mos eng e y Issue Ne 5 ran 16 January 2013 to 17 April 2013 Ki 4 Enormous Changes at the Last Minute a Ve ouie 277 e The G sarden 4 Ferry Street This City O le o have te e Chance Isa Good Libra 1 Alberto Manguel Dark Archives technology an e Tim Maly leen wie ap Street This City Abb 35 Gelungenes Design ber verschiedene Bildschirmaufl sungen N H 6 e Alles in allem ist es wichtig flexibel zu bleiben und sich bei dem Entwerfen von Skizzen nicht in Details zu verrennen Die Leute von Contents Magazine haben das sehr vorbildlich umgesetzt wie man in Abb 35 sehr gut erkennen kann Es wird n mlich im Laufe der Gestaltung immer wieder vorkommen
27. Mobile Query UI ein https developer apple com library safari documentation AppleApplications Reference SafariHTM LRef Articles MetaTags html 17 02 2014 http www w3schools com tags tag_link asp 19 02 2014 http iconhandbook co uk reference examples favicons 19 02 2014 12 05 2014 Umsetzung Seite 70 von 125 HTL Mistelbach Planify App Thoma Weise kleines Script stayInWebApp Skript welches verhindern soll dass eine Homescreen Web Applikation den Standardbrowser ffnen soll und diverse slider Skripts sowie dem main js Skript welches die Web Applikation verbessert Sp ter findet man noch die Skripte bootstrap js modernizr js und jquery ui touch punch js welche ebenfalls zu einer besseren Usability beitragen und nur aus Ladezeittechnischen Gr nden nicht im head Bereich des HTML Dokuments stehen if isset SESSION id amp amp empty SESSION id START NAVIGATION echo tada de ABFRAGE NACH SEITENRECHTEN Squery SELECT wp dp pr ta ei EROM pf login WHERE ID idt db a Squery array id gt mysql_real escape string _SESSION id E foreach template gt pages as i gt item if Sitem nav true amp amp db gt count gt 0 amp amp isset db gt row 0 item permission amp amp db gt row 0 beten on m echo lt li gt lt a href php p strtolower Sitem title o titlet EA lA Int echo lt ul gt lt div class text cente
28. PREPARES dass man mehrere Queries auf einmal ausf hren m chte das ist wichtig um so noch mehr Abfragen in nur eine einzige Verbindung zu packen Schl gt die Verbindung fehl wird die Variable e mit einer Fehlermeldung beschrieben welche in der Web Applikation sp ter ausgelesen werden kann 11 4 2 2 Query Funktion Die Funktion ben tigt 2 Parameter sql Auszuf hrender Query mit Variablen und SarrParams Variablen mit zugeh rigen Werten in Arrayform Anhand dieser wird dem SQL Statement sth die Datenbankverbindung dbh mitsamt dem vorher pr parierten Query zugewiesen welche dann ber execute zusammen mit dem Parameterarray ausgef hrt wird Das Ergebnis wird dann in der Variable row mithilfe der Funktion fetcha11 des Statements gespeichert Das Ergebnis ist stark abh ngig von dem Query und wird in Arrayform gespeichert Die Funktion ist auch nicht geeignet um riesige Datenmengen abzufragen in dem Benutzerhandbuch wird ausdr cklich darauf hingewiesen dass man Ergebnisse vorher mit den MySQL Anweisungen WHERE und ORDER BY sortieren soll bevor man selbiges mit PHP macht Anschlie end wird die Anzahl der gefundenen Datens tze des Statements in die Variable count gespeichert die nach so ziemlich jeder Abfrage des Applikationscodes gebraucht wird Danach wird der Variable 1ast ID der Integer Wert der letzten 1D zugewiesen was bei vielen Punkten des Projekts sehr hilfreich war
29. bearbeiten Wenn Sie auf das rechts unten klicken wird ein neuer Posten hinzugef gt Anschlie end m ssen Sie rechts unten auf Speichern klicken damit die nderungen gespeichert werden Wenn Sie einen Posten l schen wollen m ssen Sie rechts unten auf Bearbeiten klicken und anschlie end auf den Papierkorb unter dem zu l schenden Posten klicken Mit dem ausgef llten Stern in der rechten oberen Ecke markieren Sie den Posten dem alle Lieferanten Bestellungen im Tagesplan zugewiesen werden Einstellungen Posten Chef Einsetz Schne Verpac Logistil Ofen Abb 20 Planify Einstellungen Posten 9 7 Konten Unter Konten sind alle vorhandenen Konten aufgelistet Hier k nnen Sie die vorhandenen Konten bearbeiten Wenn Sie auf das rechts unten klicken wird ein neues Benutzer Konto hinzugef gt Sie k nnen dann sehr bersichtlich festlegen was dieser Benutzer alles sehen darf Der Benutzer in dieser Abbildung darf die Module Wochenplan und Dienstplan sehen 12 05 2014 Bedienungsanleitung Seite 37 von 125 HTL Mistelbach Planify App Thoma Weise Einstellungen Konten halloGtest at Test gt Wochenp Dienstp Produkt Einstell Tagesp gt Neues Konto gt onto 2 email example com Abb 21 Planify Einstellungen Konten Wenn Sie auf ein Konto klicken k nnen Sie die Informationen dieses Kontos eingeben bzw bearbeiten Anschlie end m ssen Sie rechts unten auf Speichern klicken
30. bestellungen WHE P ID Code 57 SQL Abfrage 12 05 2014 Tagesplan Produktschritte Teil 1 Umsetzung Seite 102 von 125 HTL Mistelbach Planify App Thoma Weise SELECT NULL as lieferant NULL as date Se ID P stepID as stepID IF ISNULL P group X orderIndex P group 1 as group RH name as productName O name SELECT quantity FROM of produkte mengen WHERE ID S gqtyID as quantity TIME TO SEC V time as duration W color FROM G wochenplan bestellungen P JOIN of produkte arbeitsschritte JOIN pf produkte R JOIN pf bestellungen S JOIN pf produkte mengen T JOIN pf produkte arbeitsschritte U JOIN pf produkte zeiten V JOIN pf colors W JOIN pf posten X WHERE X ID Q9 group AND W ID R colorID AND V productID S productID AND V stepID Q ID AND V qtyID S qtyID AND U ID P stepID AND T ID Sekt AND S ID P orderID AND R ID Q productID AND Q ID P stepID AND P date date Code 58 SQL Abfrage Tagesplan Produktschritte Teil 2 12 05 2014 Umsetzung Seite 103 von 125 HTL Mistelbach Anhang I Pflichtenheft Allgemeines Allgemeine Informationen Planify App Thoma Weise Name der Mitglieder Martin Thoma Martin Weise alphabet Adresse 2
31. die Materie der Appentwicklung und dem Marketing ringsherum Wie man auch in der Zeiterfassung sehen kann wurde danach sofort das Layout verworfen weil die gro en Studios der App Szene neue Designkonzepte vorgestellt haben und uns diese optisch sehr gefielen Ebenso war durch die vorgestellten Konzepte eine deutliche Steigerung der Effizienz zu erkennen und ein durchdachterer Ansatz in der Entwicklung Das Ticket ist bei einem Gewinnspiel der futurezone at gewonnen worden und berechtigte einen von uns zu dem Kongress zu fahren Es wurden wichtige Kontakte gekn pft und Informationen ausgetauscht Es waren ein paar Vertreter der Austrian Startups vor Ort die mit uns auch das Treffen im Sektor5 organisierten 7 1 2 Kod io Linz Durch ein Gewinnspiel das durch die Austrian Startups durchgef hrt wurde sind wir diesmal alle 2 eingeladen worden an der Kod io Developer Conference in Linz teilzunehmen und unser Vorhaben kurz in englischer Sprache vor einem mittelgro en internationalen Publikum zu pr sentieren In Startup Kreise ist das als pitchen bekannt und erkl rt ein Vorhaben eines angehenden Unternehmens in m glichst einfacher Sprache und das m glichst kurz 12 05 2014 Gelerntes Ausblick Seite 28 von 125 HTL Mistelbach Planify App Thoma Weise Der Besuch brachte uns tolle Einblicke in die Welt des Entwickler Anwerbens und der Unternehmensplanung bzw in die Organisation eines Events und deren
32. dr cken A Start Dienstplan Leiharbeiter Fenster Weiteren dr cken Leiharbeiter Einteilen a H Leiharbeiter R ckmeldu i dr cken Eingaben pr fen A einteilen ng Start Dienstplan ES NEIN y Fehlermeld ung Abb 45 Flussdiagramm Leiharbeiter 12 05 2014 Anhang Seite 112 von 125 HTL Mistelbach Planify App Thoma Weise Start Men Produkte dr cken Start Produkte H blica Start Mitarbeiter dr cken Ba Start Posten dr cken oi Konten dr cken Start Konten 3 a Lieferanten Weiteren Liefer dr cken Lieferanten hinzuf gen Fenster p antep Bearbeiten apierk rbe Papierk rbe dr cken sichtbar EIN hinzuf gen A Papierk rbe entfernen Speichern Eingaben pr fen A Lieferanten R ckmeldu dr cken speichern ng LH NEIN Fehlermeld ung Papierkorb Lieferanten dr cken entfernen Abb 46 Flussdiagramm Lieferanten EIN Login Fenster 12 05 2014 Button ogin Daten Abschicken korrekt A gt Start Wochenplan Abb 47 Flussdiagramm Login Seite 113 von 125 Anhang HTL Mistelbach Men Fenster 12 05 2014 Planify App Thoma Weise Wochenpla n dr cken Dienstplan dr cken Produktion dr cken Einstellung en dr cken Logout dr cken Men Button dr cken Abb 48 Flussdiagramm Men Anhang
33. einen button der beim Klicken den Namen des Besuchers ausgibt muss man das Markup aus Code 6 und das passende Skript aus Code 7 verwenden lt hl class text center gt Hallo lt h1 gt lt form onsubmit javascript check gt lt label for name gt Wie ist dein Name lt label gt dir class input graup gt lt input type text class form control id name gt lt span class input graup btn gt lt input type submit class btn btn primary value Weiter gt lt span gt x ELE lt form gt 12 05 2014 Theorie Seite 48 von 125 HTL Mistelbach Planify App Thoma Weise Code 6 HTML Code zum Programm in Abb 27 unico nte necia 0 var obj document getElementBylId name if obj value length gt 0 alert Hallo obj value Code 7 JavaScript zum Programm in Abb 27 Die Funktion check fragt zuerst das Element mit der id name an Danach wird der Inhalt dieses Elements auf seine L nge gepr ft ist diese gr er als 0 also wurde etwas eingegeben dann wird der Besucher mit einer sog alert Box benachrichtigt e 3 AT F 18 42 opges 3 AT F 18 42 10 0 0 8 10 0 0 8 Hallo Hallo Wie ist dein Name Wie ist dein Name http 10 0 0 8 Ll N S Hallo Martin 7 Fertig OK lolwlelrltizfuf ole AISIDIFIGIHSJIKIL BEE YIXICIVIBIN M Bu lt Ch aD m ES ES Leerzeichen EN Abb 27 Beispielanwendung unter V
34. fen gt 2 poant Speichern Papierkorb Element dr cken entfernen Abb 55 Flussdiagramm Spezialbestellung H Start Produktion Produkt Speichern Men Button dr cken PDF Drucken Dokument dr cken erzeugen drucken Tag vor zur ck anklicken Tag vor zur ck Tagesplan Fenster Mitarbeiter Mitarbeiter verschieben verschieben Produktschr itt verschieben Produktschnitt verschieben Produktschr itt anklicken und halten Produktmeng e ndern Abb 56 Flussdiagramm Tagesplan 12 05 2014 Anhang Seite 120 von 125 HTL Mistelbach Planify App Thoma Weise Datum dr cken Start Tagesplan Men Button dr cken Start Men Dienstplan dr cken Start Dienstplan Start Tagesplan Woche vor S Woche vor anuch zur ck anklicken Produkt doppelklick Produktmeng e ndern en Wochenplan Fenster Produkt anklicken und halten Produktkette zerrei en Produkt anklicken Produkt markiert Produkt unmarkieren Markierung berpr fen NEIN Produkt markieren Produkt Produkt verschieben verschieben A Markierte eer Produkte dr cken a l schen Produkt in Produkt in Plan ziehen Plan ziehen Abb 57 Flussdiagramm Wochenplan 12 05 2014 Anhang Seite 121 von 125
35. gezogen werden um Sie einzuteilen Unter den Arbeitsschritten wird angezeigt wie viele B cker Hilfsarbeiter Lehrlinge und Leiharbeiter eingeteilt sind Darunter sehen Sie die Minuten welche f r die Arbeitsschritte ben tigt werden und darunter die verf gbaren Mitarbeiter Minuten Wenn Sie aus den eingeteilten Mitarbeitern einen Verantwortlichen f r eine Abteilung festlegen wollen m ssen Sie auf diesen Mitarbeiter klicken und halten bis neben dem Mitarbeiter ein Herz erscheint Wenn Sie die Produktmenge im Tagesplan ndern wollen m ssen Sie auf einen Produktschritt klicken und halten bis die Box zum ndern erscheint Um die Arbeitsschritte f r alle Posten auszudrucken m ssen Sie auf den Button Drucken rechts unten klicken 12 05 2014 Bedienungsanleitung Seite 32 von 125 HTL Mistelbach Planify App Thoma Weise Tagesplan 21 01 2014 Logistik Ofen Martin Weise Abb 11 Planify Tagesplan 9 5 Produktion Zum Fenster Produktion gelangen Sie ber die Men leiste Hier sind alle Produkte aufgelistet und nach Produktgruppen sortiert Sie k nnen hier die unter Einstellungen vordefinierten Mengen ausw hlen Anschlie end m ssen Sie rechts unten auf Bestellen klicken um diese dann im Wochenplan unter Bestellungen anzuzeigen Produktion Schaum Produkt 1 wo 00 Spezialbestellung Bestellen Abb 12 Planify Produktion 9 5 1 Spezialbestellung Durch Klicken auf den Button Spezialb
36. her behandelt Diese Web Anwendung ist in HTML CSS und JavaScript geschrieben worden Die Daten werden in einer MySQL Datenbank gespeichert welche ber PHP manipuliert wird 12 05 2014 Vorwort Einleitung Seite 5 von 125 HTL Mistelbach Planify App Thoma Weise Literaturverzeichnis Sei06 Seidler Kai Vogelsang Kay Das XAMPP Handbuch Der offizielle Leitfaden zu Einsatz und Programmierung Pearson Wesley Verlag M nchen 2006 Zil13 Zillgens Christoph Gangelt Responsive Webdesign Reaktionsf hige Websites gestalten und umsetzen Carl Hanser Verlag M nchen 2013 Mau12 Mauriece Florence PHP 5 4 amp MySQL 5 5 Der Einstieg in die Programmierung dynamischer Websites Addison Wesley Verlag M nchen 2012 Ste07 Steyer Ralph JavaScript Einstieg f r Anspruchsvolle Pearson Wesley Verlag M nchen 2007 Fek04 Fekete Thomas Customer Relationship Management im Wandel der Zeit mit spezieller Ber cksichtigung des Electronic Customer Relationship Management der sterreichischen Wirtschaft Wien 2004 Tan07 Tanoury Doug Back in Black Understanding The Financial Impact of CRM Online in Internet URL http www crm2day com library EpulEyyFpkkBEVfRsg php Mai07 Maida Martina Wickenhauser Sandra Seminararbeit Thema Customer Relationship Management Wirtschaftsuniversit t Wien 2007 Wal04 Waldemar Pelz Strategisches und operatives Management Ein Leitfaden zur Erstellung eines professionellen Market
37. min css normalize css setzt alle HTML Elemente auf normale Werte f r alle Browser und page css Stylesheet 11 2 4 font Verzeichnis Wie in Kapitel 10 2 2 1 erw hnt ist mit CSS3 viel Neues dazugekommen So kann man Beispielsweise jede beliebige Schriftart innerhalb der Web Applikation verwenden auch wenn man diese nicht mal installiert hat Die Schriftart Open Sans ist unter der Apache License 2 0 ver ffentlich worden d h darf man mit dem Projekt Geld verdienen auch wenn die Schriftart nicht von einem stammt und unterst tzt alle erdenklichen Sonderzeichen und Schrifttypen Daher wurde u a aus diesem Grund diese Schriftart gew hlt http www google com fonts specimen Open Sans 02 03 2014 12 05 2014 Umsetzung Seite 66 von 125 HTL Mistelbach Planify App Thoma Weise 11 2 5 fpdf Verzeichnis In diesem kommen alle Dateien welche f r die fpdf Klasse ben tigt werden unter Das beinhaltet auch Dokumentation Tutorials und die Character Maps f r verschiedene unterst tzte Schriftarten 11 2 6 img Verzeichnis Hier sind alle Bilder der Web Applikation untergebracht Es sind mehrere Unterverzeichnisse vorzufinden 11 2 6 1 background Unterverzeichnis Alle Hintergrundbilder der Web Applikation 11 2 6 2 img Unterverzeichnis Alle Bilder im PNG Format wie das Herz f r den Tagesplan usw 11 2 6 3 u Unterverzeichnis Alle von Benutzer User kurz u hochgeladenen Bilder wie zB durch das Formular in
38. ohne gro e Konfigurierung n tzen kann 10 2 2 2 Einsatz Um das aus Code 1 bekannte Paragraph Element zu stilisieren kann man zum Beispiel den Wert des st y1e Attributs ndern lt p style color red gt Ich bin ein Absatz mit roter Schrift lt p gt Code 3 HTML Paragraph mit inline CSS Man kann sich vorstellen dass beim ndern der einzelnen Stilinformationen bei mehreren Elementen der Wartungsaufwand den Nutzen bersteigt Die Stilinformationen f r jedes einzelne Element im HTML Quellcode vorzunehmen ist auch nicht die Intention der CSS Entwickler H kon Wium Lie und Bert Bos 10 2 2 3 Nutzen Die beiden wollten mit ihrer neu entwickelten Stylesheet Sprache Stilregeln aufstellen die an Elemente vererbt werden konnten Sie legten damit den Grundstein f r die Auslagerung aller Stilinformationen von einem HTML Dokument in ein Cascading Stylesheet einer CSS Datei Dort lassen sich Stilinformationen zentral sammeln Sie minimieren damit den Wartungs aufwand enorm und tragen zu einer fortschrittlichen Gestaltung des Internets bei Wie in Code 5 zu sehen ist gestaltet sich die Syntax in CSS sehr einfach und mit wenig Schreibarbeit 10 2 2 4 Verwendung Um CSS ben tzen zu k nnen werden keinerlei Installationen ben tigt Ein einfacher Texteditor der bereits mit einer Windows Installation am PC vorhanden ist wie editor exe engl notepad exe reicht v llig aus http people opera com howcome 2006 phd 29
39. verwendbar ist Die 3 wichtigsten Module aus der Serverumgebung f r die Diplomarbeit sind der Apache Server PHP und die MySQL Datenbank Das Modul Apache l sst sich mit diesem Abschnitt schon sehr gut beschreiben die Module PHP und MySQL sind in den Abschnitten 10 2 4 und 10 2 5 n her erkl rt Sei06 10 2 6 2 Apache Der Begriff Apache bezeichnet lediglich die Apache Software Foundation welche unter anderem den wohl am H ufigsten verwendeten Webserver der Welt entwickelt den Apache HTTP Server http nttpd apache org ABOUT_APACHE html 08 02 2014 http www netcraft com survey 08 02 2014 12 05 2014 Theorie Seite 60 von 125 HTL Mistelbach Planify App Thoma Weise Web server developers Market share of all sites HETCRAFT mu u 2 E Microsoft K M PS Sun E nginx E Google E NCSsA 4 U BW Other 60 0 NAAA ES ee O OK o O A 5 k 05 50 09 09 0 NO A A A SS pr g i a vi af oi e i A pd oi e i gi pd oi e Abb 33 Anteil der Webserver Technologien Das Ziel ist schnell erkl rt Die gemeinsame Entwicklung eines robusten frei erh ltlichen HTTP Web Servers der viele Funktionen aufweisen kann Das Projekt wird von vielen Freiwilligen die berall auf der Welt verteilt sitzen verwaltet und gef hrt Sie ben tzen das Internet und das Web f r Kommunikation Planung Entwicklung des Servers und der Dokumentation Jeder kann bei der Weiterentwicklung helfen Je mehr man geholfen hat desto m
40. 04 2014 12 05 2014 Theorie Seite 45 von 125 HTL Mistelbach Planify App Thoma Weise Die ausgelagerte CSS Datei kann nun in dem HTML Dokument verbunden werden Daf r gibt es einen eigenen Tag den man einfach irgendwo in dem lt head gt lt head gt Bereich eintr gt lt link rel stylesheet type text css href file css gt Code 4 Einbinden der CSS Datei file css in ein HTML Dokument Dieser Tag ist anders als die vorher erw hnten Diese Art von Tags nennt man Self Closing also selbstschlie end Es gibt somit keinen Closing Tag der das Element schlie t aufgrund dieser Tatsache gibt es auch keinen Inhalt Das Element wird n mlich rein durch seine Attribute rel type und href bestimmt Es soll auch keinen Inhalt geben 10 2 2 5 Syntax pi Code 5 CSS Code In CSS hat diese Form einen bestimmten Namen und auch eine Form die immer dieselbe ist Auf Code 5 bezogen ergibt sich ein p Selektor der die color Eigenschaft aller p Elemente auf red setzt Neben diesem Element Selektor gibt es noch vier weitere Methoden den Selektor zu beschreiben e Eindeutige Kennzeichnung Man kann durch Auswahl eines eindeutigen Elements wie zum Beispiel durch das HTML Markup Attribut id dessen Wert im Dokument einzigartig sein muss Diese Bezeichnung sollte die Bedeutung des Elements im Dokument bezeichnen wie beispielsweise passwort color blue e Klassen ber das HTML Markup Attribut class lassen si
41. 10 2 3 4 Einsatz JavaScript kann ohne Installation mit jedem modernen Browser ausgef hrt werden M chte man hingegen eine Bibliothek verwenden wie jQuery eine ist muss man diese vorher herunterladen und im HTML Dokument einbinden Es ist empfehlenswerter production Versionen herunterzuladen weil diese Ladezeit sparen und damit etwas effizienter als die unkomprimierte development Versionen arbeiteten Die heruntergeladene jquery x x x min js kann nun im dist js Ordner von Bootstrap untergebracht werden und im HTML Dokument eingebunden werden http query com download 29 04 14 12 05 2014 Theorie Seite 51 von 125 HTL Mistelbach Planify App Thoma Weise 10 2 3 5 AJAX JavaScript war jedoch nicht immer so beliebt bei Entwicklern denn fr her war man der Meinung die Funktionalit t der Sprache w re von leistungsf higeren Technologien berholt worden und man sollte ohnehin den Server die ganze Arbeit machen lassen Vor einigen Jahren bekam JavaScript eine kleine Erweiterung mit der es m glich war den nervigen Datenverkehr in den Hintergrund zu verlegen und Inhalte dynamisch von dem Server laden ohne das der Client etwas davon mitbekommt Diese Technologie hei t Asynchronous JavaScript and XML AJAX und ist der wichtigste Bestandteil von JavaScript und der Diplomarbeit 12 silentresponse normal response Browser Browser NO gt Abb 29 Flussdiagramme HTTP Request li amp kom
42. 115 Simonsfeld 2136 Laa Thaya Telefon 4366475074706 436603499411 E Mail Martin Weise gmx at thomamartin gmx at Allgemeine Projektdaten Tabelle 4 Pflichtenheft Kontaktinformationen Projektname Planify App Kunde Heiss amp S GmbH Projektbetreuer Paul Tutschek Datum 09 04 2013 1 0 am 09 04 2013 Version 2 0 am 23 04 2013 a 3 0 am 30 04 2013 4 0 am 16 05 2013 Tabelle 5 Pflichtenheft Projektdaten 12 05 2014 Anhang Seite 104 von 125 HTL Mistelbach Einleitung Planify App Thoma Weise Das Pflichtenheft soll den W nschen und Anforderungen der Firma Heiss amp S GmbH entsprechen Das ist eine finale Version und ist sp ter nicht mehr nderbar Nachtr gliche nderungen werden als Vorschlag betrachtet und sind nicht verpflichtend Charakteristika Ist Zustand In Planung Soll Zustand Fertigstellung Auslieferung Allgemeine Ziele Erstellen einer Webanwendung Technische Ziele Verwaltung von Mitarbeitern Produkten Bestellungen Qualitative Ziele Optisch ansprechende Oberfl che Gestensteuerung Organisatorische Ziele Fertigstellung geplant am 1 November 2013 Funktionale Anforderungen Schl ssige Bedienung Multi User Bedienung EDV Anforderungen Internetverbindung Hostingprovider Schnittstellen Tablet Computer Handy Wartbarkeit Das Produkt wird Wartungsfrei konzipiert Sonstiges Arbeit wird als Diplomarbeit gef h
43. 4 Theorie Weise 17 02 2014 Theorie Thoma 18 02 2014 Diplomarbeit Weise 20 02 2014 Theorie Weise 21 02 2014 Theorie Weise 21 02 2014 Durchf hrung Weise 22 02 2014 Durchf hrung Thoma 01 03 2014 Kod io Developer Conference App Pitch Weise 01 03 2014 Kod io Developer Conference App Pitch Weise 03 03 2014 Durchf hrung Weise 05 03 2014 Durchf hrung Thoma 27 03 2014 Accent Pr sentation Weise 27 03 2014 Accent Pr sentation Weise 30 03 2014 Durchf hrung Weise 07 04 2014 Zeitaufstellung Thoma 14 04 2014 Diplomarbeit Weise 14 04 2014 Diplomarbeit Thoma 15 04 2014 Diplomarbeit Thoma 16 04 2014 Diplomarbeit Thoma 17 04 2014 Diplomarbeit Thoma 19 04 2014 Diplomarbeit Thoma 21 04 2014 Diplomarbeit Thoma 22 04 2014 Diplomarbeit Weise 28 04 2014 Diplomarbeit r J wlu 2r P u wr r o PrP w w In LOS PP CECR CHE r u Pr P IN IN IN I PX IR IN IN O0 0 0 0 0 0 0 0 0 0 H fe H El Ecke Bis Eelef Ke H ec H Ke JO JO ke Ber JO OO Kall O0 El Xx JU Ju vn vn vv 0 DV 12 05 2014 Tabelle 9 Zeiterfassung Detailaufschl sselung Anhang Seite 124 von 125 HTL Mistelbach Planify App Thoma Weise V DVD Inhalt e Diplomarbeit im Format pdf e Diplomarbeit im Forma
44. 4 JavaScript update_posten_positionen Funktion 11 4 Back End Mit Back End wird im groben Sinne die Logik hinter einer Applikation bezeichnet die daf r sorgt dass die Applikation m glichst stabil l uft Dazu verwaltet sie Daten und ist Dreh und Angelpunkt f r alle m glichen Aktionen des Benutzers 11 4 1 Template Ein Template ist wichtig f r die schnelle Darstellung von Inhalten Man spart viel Zeit und versteckt alle wichtigen Funktionen in einer kleinen Datei um diese danach nurnoch von au en aufzurufen Das macht die einzelnen Dateien kleiner und brsichtlicher private pageIndex null public title null permission null pages array publi function _ constructi 1 destine CONTENT Ente Y Sthis gt setPages this gt setTitle ZEN ISSEE lo GEL Pp 1 es Nee SESSION Tarija this gt pagelndex login else ee el on De esse Sen De this gt pagelndex wochenplan else Sthis gt pagelndex trim GET p Code 35 Klasse Template mit Konstruktorfunktion Die Klasse SOL ist tats chlich in beinahe jedem PHP Skript des Back Ends und Front Ends zu finden Daher wird ab diesem Abschnitt nicht mehr n her darauf eingegangen 11 4 1 1 Konstruktor Wenn eine Instanz einer Klasse erstellt wird so ist die erste Funktion die Aufgerufen wird stets construct Das spart bei jeder neuen Instanzierung einen Funktionsaufruf 12 05 2014 Umsetzung Seite 82 von 125
45. Analyse ist leicht anwendbar und das mit nur wenig Aufwand Sie verschafft einen berblick ber das gesamte Unternehmen Es werden positive und negative Aspekte ber cksichtigt und nicht nur eine Seite Ein weiterer Vorteil ist dass sich die SWOT Analyse vielf ltig anwenden l sst zum Beispiel auf das ganze Unternehmen egal wie gro es auch ist auf eine einzelne Abteilung oder auf einzelne Projekte 4 4 Nachteile Nachteile sind dass es bei einer Analyse von gr eren Unternehmen nur sehr oberfl chlich beschrieben werden kann welche Probleme und L sungen es gibt Es gibt keinen Bewertungsma stab f r die vier Teilbereiche das hei t sie sind gleichwertig aber wenn das f r ein Unternehmen ein Problem sein sollte wird es daf r garantiert eine L sung geben Wie ich finde ist der gr te Nachteil dass das Ergebnis stark von den an der Analyse beteiligten Personen abh ngt 12 05 2014 Markt amp Konkurrenzanalyse Seite 20 von 125 HTL Mistelbach Planify App 5 Kundenmanagement 5 1 Grundlagen Theorie STRATEGIE 100 Kunde Abteilungs ber greifend Potentialerkennung lange Kundenbindung ANALYSE Markt zie puppen def ein sch tzen KOMMUNIKATION keine Widerspr che geplante Methoden mehrere Kan le Thoma Weise OPERATION Ziele aus Strategie m gl definiert umsetzen Unterst t zung CRM Systeme ES A ee KUNDENMANAGEMENT ZUFRIEDENHEIT TREUE N HE INTEGRATIO
46. Bliss Schokotarte 113 33 2 400 Abgl amp auml nzen und verpacken 06A2CB 10800 Candy Bliss Schokotarte Abb 40 Beispielabfrage aus Code 43 Die Spalte i repr sentiert den Tag in der Woche also den index des Tages an dem dieser Schritt stattfindet Dieser ist nat rlich abh ngig ob der Datensatz ein Lieferant Geburtstag oder ein Schritt in dem Produktzyklus ist Man geht folgenderma en vor Zuerst werden in Code 43 alle Lieferanten mit zugeh rigen Einteilungen herausgesucht anschlie end werden die Geburtstage aller Mitarbeiter angef gt In Code 44 werden dann regul re Bestellungen herausgesucht unter ber cksichtigung dass diese nicht schon in der Tabelle Gr wochenplan bestellungen zu finden sind Dann werden nurnoch diese aus der Tabelle pf wochenplan bestellungen angef gt und man hat eine Abfrage die somit Lieferanten Geburtstage regul re Bestellungen und verschobene Bestellungen abdeckt Das in Code 46 beschriebene SQL Statement sucht in der Datenbank nach allen Mitarbeitern und Leiharbeitern die an allen Tagen der ausgew hlten Woche Dienst haben um so die verf gbare Mitarbeiterzeit an diesem Tag zu berechnen Daf r wird zuerst der Tagesindes berechnet Mittels DATE DIFF date argl date arg2 kann man die Differenz in int Tagen berechnen Dazu wird das Datum des ersten Tages der Woche FIRST DAY OF WEEK date Datum von dem Datum der Zuteilung P date subtrahiert T Die Funktio
47. Einteilen klicken um die Leiharbeiter in der aktuellen Woche einzuteilen Diese werden dann im Dienstplan angezeigt Leiharbeiter Person Keii Y AAA O 07 00 18 00 Montag Dienstag Mittwoch Donnerstag Freitag Samstag Sonntag Abb 9 Planify Leiharbeiter 9 3 Wochenplan Zum Wochenplan gelangen Sie ber die Men leiste links Durch klicken auf das Datum eines Tages gelangen Sie zum zugeh rigen Tagesplan ber dem Datum sehen Sie die Mitarbeiter Minuten die Sie an diesem Tag zur Verf gung haben und dar ber die Minuten welche f r die Produktion der unten stehenden Produkte ben tigt werden Mit den Pfeilen rechts und links neben der berschrift Wochenplan k nnen Sie eine Woche vor oder zur ck springen Mit dem Heute Button rechts unten gelangen Sie zum aktuellen Tag Durch klicken auf den Dienstplan Button gelangen Sie zum Dienstplan Rechts unter Bestellungen sind alle Produkte aufgelistet welche unter Produktion bestellt worden sind Durch ziehen auf einen Tag wird dieser als Starttag des Produkts festgelegt und alle Arbeitsschritte teilen sich entsprechend auf die anderen Tage auf Wenn Sie einen Produktschritt verschieben richtet sich das ganze Produkt danach Um eine Produktkette zu zerrei en m ssen Sie auf den Produktschritt welchen Sie aus der Kette rei en wollen klicken und halten bis der Produktschritt sich bewegt Anschlie end m ssen Sie den Arbeitsschritt nur zum gew nschten Tag schieben Wenn Si
48. ID if isset this gt pages this gt pagelIndex permission if this gt hasPermission this gt pages this gt pagelndex permission MySQL gt HAT BERECHTIGUNG include once _ CONTENT this gt pages this gt pageIndex file else MySQL gt NICHT include once _ CONTENT this gt pages err500 file else include once _ CONTENT Sthis gt pages this gt pagelndex file else include once _ CONTENT this gt pages err404 file Code 39 Klasse Template mit loadPage Funktion 12 05 2014 Umsetzung Seite 85 von 125 HTL Mistelbach Planify App Thoma Weise 11 4 2 SQL Klasse Es ist das ungesch nte Herzst ck der Web Applikation und sorgt jedes Mal f r eine wunderbar reibungslose Verbindung mit der MySQL Datenbank Hinter ihr stecken viele Stunden Arbeitszeit und noch mehr an Erfahrung und Technologiewissen Sie tr gt zu einer effektiven Query Entwicklung bei und kommt auch in der fertigen Production Version zum Einsatz 11 421 Konstruktor In Bezug auf Code 40 erkennt man innerhalb des Standardkonstruktors dass versucht wird ber den Data Source Name DSN also alle Datenbankspezifischen Informationen den Usernamen und das zugeh rige Passwort eine MySQL Verbindung aufzubauen F r dieses Projekt wurde die PDO Schnittstelle verwendet Anschlie end sagt man an der Schnittstelle dem Treiber noch mittels PDO ATTR EMULATE
49. Kameras von Laptops oder PCs zu machen Es ist aber nur eine Frage der Zeit bis auch das gel st wird EH C l wen e Hardwarezugriff Hardwarezugriff Foto Foto Input Feld mit Kamerazugriff Csenge H 1010 Input Feld mit Kamerazugriff Datei ausw hlen Keine Datei ausgew hlt Wiederholen Foto benutzen lt o 0 q lt ME ei Abb 22 Zugriff auf Hardware mit HTML5 1 1 2 3 Formulare mit HTML5 Formulare sind wichtig f r die Interaktion von Inhalt und dem Nutzer Sie werden zur Kontaktaufnahme verifizieren von Login Daten angeben pers nlicher Daten und Kreditkarteninformationen und vielem mehr verwendet und sind ein wichtiger Bestandteil einer Applikation Beinahe jede Internetpr senz ben tigt ein Formular zur Interaktion auch wenn es nur ein Newsletter Abo ist wie in Abb 23 zu sehen 12 05 2014 Theorie Seite 42 von 125 HTL Mistelbach Planify App Thoma Weise AU SIGN UP ma P IW SAN Wl au ni un ay AND Jl IN F Your first name E m Email Address WW Your last name Your email address Sign up NNN Abb 23 Formular in HTML5 mit placeholder Attributen Trotz der h ufigen Verwendung ist die Ausstattung an W3C konformen HTML Attributen zu dem Thema recht sp rlich gewesen Das erforderte den Einsatz von serverseitigen Skriptsprachen und war nur durch gro e Umwege m glich was den Datenverkehr zwischen jeder Eingabe erheblich ansteigen lie HTML5 setzt genau dort an wie der Nutzer
50. LECT quantity FROM pf produkte_mengen WHERE ID S gqtyID as quantity Q name V color TIME TO SEC U time RH name as productName FROM pf_wochenplan bestellungen P JOIN of produkte arbeitsschritte Q JOIN pf produkte R JOIN pf bestellungen S JOIN pf produkte mengen T JOIN pf_produkte zeiten U JOIN G colors V WHERE V ID R colorID AND U productID S productID AND U stepID Q ID AND U qtyID S qtyID AND T ID S gtyID AND S ID P orderID AND R ID Q productID AND Q ID P stepID AND S date IS NOT NULL AND P date lt DATE ADD FIRST DAY OF WEEK date INTERVAL 6 DAY AND P date gt FIRST DAY OF WEEK date Code 44 SQL Statementder Produkte des Wochenplans Teil 2 12 05 2014 Umsetzung Seite 90 von 125 HTL Mistelbach Planify App Thoma Weise Eine Beispielabfrage mit dem SQL Query aus Code 43 amp Code 44 ist in Abb 40 abgebildet Dabei wird die Variable date durch den Wert von pdate ersetzt dessen Wert vorher festgelegt wird ID steplD i quantity name color duration productName NULL NULL 1 NULL Alpha iii 0 Lieferant NULL NULL 4 NULL Breganzia Dm 0 Lieferant 113 310 400 Aluformen mit M amp uuml rbteig auslegen backen 06 A2CB 24000 Candy Bliss Schokotarte 113 32 1 400 Schoko creme abf amp uuml llen 06A2CB 7200 Candy
51. N BINDUNG Erwartungen Beanspruchte Entschieden f Unternehmen Quantit t Interaktionen Einbinden Prozesse besseres Bindung aus rationalen amp Leistungen Subjektives beste Leistung bester N her besser Bed rfnisse Ergebnis mehr Aufw emotionalen Aspekten e e A F Q Abb 3 Infografik zum Kundenmanagement 5 1 1 Gutes CRM engl Customer Relationship Management Kundenmanagement geht mit der Marketingabteilung eines Unternehmens einher Es sollte stets gemeinsam durchgef hrt werden dabei sollen die Ziele des CRM ident mit denen des Marketings sein in Anlehnung an Fek04 Ziele e Man will durch Analyse des Kunden und des eigenen Unternehmen eine bessere Kundenzufriedenheit erreichen und die Kauffrequenz des Kunden steigern e Ein weiteres Ziel des erfolgreichen CRM ist es aus interessierten Unternehmen Bestands kunden zu machen Das kann durch Bindung der Interessenten durch spezielle Aktionen geschehen oder durch ma geschneiderte Leistungen f r eine neue Kundensparte die man durch den Einsatz von CRM gefunden hat e Je l nger die Dauer dieser Beziehung ist desto weniger kostet es das Unternehmen weil es die Bed rfnisse des Kunden besser kennenlernt und entsprechend dieser handeln kann Die damit verbundenen Kosten f r die Pflege und Fortf hrung der Beziehung werden reduziert und das Fr herkennen von etwaigen Problemen maximiert Seite 21 von 125 12 05 2014 Kundenm
52. Name FROM pf mitarbeiter P WHERE DAYOFYEAR birthday gt DAYOFYEAR FIRST_DAY OF WEEK date AND DAYOFYEAR birthday lt DAYOFYEAR FIRST_DAY OF WEEK date 6 UNION Code 43 SQL Statementder Produkte des Wochenplans Teil 1 12 05 2014 Umsetzung Seite 89 von 125 HTL Mistelbach Planify App Thoma Weise SELECT P IDy Q LD as stepID WEEKDAY DATE ADD P date INTERVAL OD dayIndex 1 DAY as i T quantity Q name U color TIME _TO_SEC S time as duration RH name as productName FROM pf_bestellungen P JOIN pf produkte arbeitsschritte Q JOIN pf produkte R JOIN pf produkte zeiten S JOIN pf produkte_mengen T JOIN pf colors U WHERE U ID R colorID AND T ID P gtyID AND S stepID Q ID AND S qtyID P qtyID AND R ID P productID AND Q productID P productID AND DATE ADD P date INTERVAL Q dayIndex 1 DAY gt FIRST_DAY OF WEEK date AND DATE ADD P date INTERVAL Q dayIndex 1 DAY lt T DATE ADD FIRST DAY OF WEEK date INTERVAL 6 DAY AND NOT EXISTS SELECT FROM pf_wochenplan bestellungen WHERE I S stepID Q0 1D AND order P ID UNION SELECT S ID P stepID WEEKDAY P date as i SE
53. P 12 05 2014 Theorie Seite 55 von 125 HTL Mistelbach Planify App Thoma Weise 10 2 4 3 Formulare mit PHP lt php f dissec iS BOST ke counto POST 10 1 echo lt pre class text left gt var dumpis POST echo lt pre gt 2 lt h1 gt PHP Formular lt h1 gt lt form action lt SERVER PHP SELF gt method POST gt lt section gt lt label for name gt Ihr Name lt label gt lt input type text id name name name class form control gt lt section gt lt section gt lt label for name gt Ihr Geschlecht lt label gt lt br gt lt div class btn group data toggle buttons gt lt label class btn btn default gt lt input type radio name gender value m gt M amp auml nnlich lt label gt lt label class btn btn default gt lt input type radio name gender value f gt Weiblich lt label gt lt div gt lt section gt lt section gt lt label for tel gt Ihre Telefonnummer lt label gt lt input type tel id tel name tel class form control gt lt section gt lt input type submit class btn btn primary value 0K gt lt form gt Code 16 HTML Ausschnitt mit eingebetteter PHP Verarbeitung Das in Code 16 gezeigte Dokument stellt eine input Box zur Eingabe des Names zwei radio Boxen zur Auswahl des Geschlechts sowie eine weitere input Box zur Eingabe der Telefonnummer des Besuchers Klickt man dann auf den submi
54. Planify App Thoma Weise Spezialtastaturen unterst tzt hat Sogar ein alter iPod Touch 2G Erscheinung 2008 konnte ohne Updates das letzte erfolgte 2011 moderne HTML5 Seiten anzeigen und wechselte die Tastatur bei den zuvor erw hnten Eingabetypen s 3 A F 11 52 uo e o 3 AT F 11 51 CS ee 3 AT F 11 52 10 0 0 8 10 0 0 8 10 0 0 8 HTML5 Skeleton E Mail Adresse Datum Uhrzeit 16 02 2014 DH 11 47 ES gt Fertig lt gt L schen Fertig amp L schen Fertig QIWIEIRITIZIUIJ I OIP AISIDIFIGIHLJIKIL Zee s 2 INR 16 Februar 2014 11 47 Rz YIXICIVIBINIM Es 123 ER Leerzeichen 3 Return Abb 24 Tastaturen bei verschiedenen Eingabetypen Zil13 10 2 2 CSS Ist das vom Server geholte Dokument ein reines HTML Dokument welches optisch nicht besonders ansprechend ist hat man die M glichkeit die Seite noch mehr seinen Vorstellungen anzupassen Die Auszeichnungssprache HTML l sst n mlich bis auf kleine Design Vorschl ge nicht viel Kreativit t zu Aus diesem Grund wurde die HTML Erg nzungssprache CSS Cascading Stylesheets geschaffen mit deren Hilfe man die Stilinformationen bestimmter Elemente anhand ihrer Eigenschaften oder ihre Position im Dokument ndern kann P 10 2 2 1 CSS Version 37 Zudem tr gt CSS einen ma geblichen Anteil zur Anpassung der Stilinformationen aller Elemente eines HTML Dokuments an die Bildschirmbreite oder h he bei und ist damit hauptverantwortlich f r die dy
55. Sprecher Vortragenden Abb 6 v l n r Martin Weise Martin Thoma vor dem Ars Electronica Center in Linz 8 Ausblick Da diese Software nicht nur f r unseren Kunden sondern auch f r einen Weiterverkauf an andere Kunden gedacht ist haben wir die Software in einzelne sinnvolle Module zerlegt aus denen ein anderer Kunde w hlen kann Der Weiterverkauf der Software ist im Pflichtenheft und im Werkvertrag geregelt Sollten wir mit unserem Projekt weitere Kunden gewinnen k nnen werden diese dann nat rlich andere Anforderungen stellen so entstehen dann wieder neue Module aus denen dann wieder andere Kunden w hlen k nnen 12 05 2014 Gelerntes Ausblick Seite 29 von 125 HTL Mistelbach Planify App Thoma Weise 9 Bedienung 9 1 Login Men Die Startseite ist das Login Fenster siehe unten Hier k nnen Sie sich mit Ihrer Email Adresse bzw Ihrem Benutzernamen und Ihrem Passwort einloggen Falls Sie Ihr Passwort vergessen haben muss der Administrator ein neues Passwort festlegen unter Einstellungen gt Konten Plan jy VOA Abschicken Ich habe meine Daten vergessen Abb 7 Planify Login Sind die Login Daten korrekt gelangen Sie zum Wochenplan Mit dem Button links oben ffnen Sie das Men Hier k nnen Sie zu Wochenplan Dienstplan Produktion und Einstellungen navigieren und sich ausloggen Wenn Sie im Wochenplan oder im Dienstplan auf das Datum eines Tages klicken gelangen Sie zum zugeh rigen T
56. Start Posten Start Konten Start Produkt Start Produktgruppen Seite 118 von 125 Start Produkt Abb 52 Flussdiagramm Produkte kte nde Produ kte nde Produ kte Ende Produ kte HTL Mistelbach Planify App Zur ck dr cken Start Produkte Weitere Produktgrupp e hinzuf gen Bearbeiten dr cken Produktgruppen i Papierk rbe Fenster entfernen Papierk rbe sichtbar Papierk rbe hinzuf gen Thoma Weise Speichern dr cken Eingaben pr fen ng Fehlermeld ung L schen dr cken Produktgrupp e entfernen Abb 53 Flussdiagramm Produktgruppen Men Button Start Men dr cken Se Sun dr cken Spezialbestellung Produktion Fenster Bestellen berpr fung R ckmeldu dr cken Produkte ng R ckmeldu Produktgrupp en speichern Produkte bestellen Fehlermeld ung Abb 54 Flussdiagramm Produktion 12 05 2014 Anhang Seite 119 von 125 HTL Mistelbach Planify App Thoma Weise Zur ck d Y dr cken gt Start Dienstplan Bearbeiten Papierk rbe EIN Papierk rbe dr cken sichtbar hinzuf gen JA A Papierk rbe entfernen Spezialbestellung Fehlermeld Fenster ung NEIN Speichern a Verwerfen Eingaben R ckmeldu Produkt 7 eer a Eingaben pr
57. Thoma 11 11 2013 Vorbereitung vorl ufige Projekt bergabe Weise 11 11 2013 Vorbereitung vorl ufige Projekt bergabe Thoma 17 11 2013 Kundentreffen Fehler beheben nv e e e 2 eloloIn in iololo o n n n in in e n e e elololu uln in n in in in ir e Plwlwiun e gt ojuololololgoljololo lojolojolojolojololjolojolo lojo x xlojojoljolojo lojlo mjojnln nin in n 12 05 2014 Anhang Seite 123 von 125 HTL Mistelbach Planify App Thoma Weise Weise 17 11 2013 Kundentreffen Fehler beheben Thoma 17 11 2013 Kundentreffen vorl Projekt bergabe f Testen 0 5 Weise 17 11 2013 Kundentreffen vorl Projekt bergabe f Testen e u Thoma 09 12 2013 Vorbereitung endg ltige Projekt bergabe Mm Weise 09 12 2013 Vorbereitung endg ltige Projekt bergabe Thoma 22 12 2013 Software bergabe Weise 22 12 2013 Software bergabe Thoma 27 12 2013 Rechnung gestellt Weise 27 12 2013 Rechnung gestellt Thoma 06 01 2013 Jugend Innovativ Unterlagen Zusammenstellen Weise 06 01 2013 Jugend Innovativ Unterlagen Zusammenstellen Weise 03 02 2013 Beginn Diplomarbeit Thoma 10 02 2014 Projektabschluss Weise 10 02 2014 Projektabschluss Weise 12 02 2014 Theorie Weise 14 02 2014 Theorie Thoma 14 02 2013 Diplomarbeit Weise 15 02 201
58. Thoma Weise keyframes progress bar stripes from background position 40px 0 to background position 0 0 wochenplan li item selected background image linear gradient 45deg rgba 255 255 255 0 15 25 transparent 25 transparent 50 rgba 255 255 255 0 15 50 rgba 255 255 255 0 15 75 transparent 75 transparent background size 40px 40px animation progress bar stripes 2s linear infinite Code 26 CSS Deklaration der Klasse selected Mit der keyframes Regel kann man wie in Code 26 zu sehen ist Animationen definieren In diesem Fall wird der simulierte Fortschrittsbalken der mit 40x40 Pixel bemessen ist um seine Breite von 40 Pixeln in Richtung O verschoben diese Animation dauert 2 Sekunden und wird unendlich oft wiederholt function wp drag single event ui S this addClass single this on mouseup function if this css left auto this css top auto S this removeClass single Code 27 JavaScript wp_drag_single Funktion Dr ckt man lange die linke Maustaste oder mit dem Finger wird die Funktion wp drag single die in Code 27 abgebildet ist aufgerufen Diese f gt an das angeklickte Element die Klasse single an und einen weiteren Eventhandler der beim Loslassen der Taste aktiviert wird Diese Funktion wird aber erst dann Interessant wenn man die Funktion wp_sort die in Code 28 abgebildet ist hinzuzi
59. abei spiet PHP eine wichtige Rolle Mit dieser serverseitigen Skriptsprache ist es m glich das Request Response Modell um 2 wesentliche Bestandteile zu erweitern wie man in Abb 30 sieht Browser PHP Parser Abb 30 Request Response Modell mit PHP Parser Beschreibung zu Abb 30 o Der Client schickt ber den Browser einen Request an den Server ein Dokument zu suchen o Handelt es sich bei dem angeforderten Dokument um ein PHP Skript erkennt das der Server an der Dateiendung php und liefert die Seite nicht direkt an den Client aus sondern bergibt sie dem PHP Parser o Der PHP Parser interpretiert die PHP Befehle und versucht ein HTML Dokument zu erzeugen o Das erzeugte HTML Dokument wird an den Browser zur ckgesendet Es hei t zwar noch genauso wie das angeforderte Dokument enth lt aber keinerlei PHP Code mehr Das erm glicht die Erstellung von HTML Dokumenten deren Inhalte stets aktuell sind da sie dynamisch mit Daten aus Dokumenten oder einer Datenbank gef ttert werden k nnen PHP ist also f r die Logik hinter webbasierten Anwendungen verantwortlich denn ohne diese Skriptsprache w ren Webseiten nicht das was sie heute sind Mau 12 10 2 4 2 Syntax In PHP kann man Variablen definieren die neben numerischen auch textuelle oder eine Kombination aus diesen annehmen k nnen Ebenso ist es m glich den Variablen einen http php net manual de language types array php 29 01 2014 12 05 2014 The
60. agesplan 9 2 Dienstplan Zum Dienstplan gelangen Sie ber die Men leiste links Durch klicken auf das Auge links neben dem Datum eines Tages gelangen Sie zum zugeh rigen Tagesplan Mit den Pfeilen rechts und links neben der berschrift Dienstplan k nnen Sie eine Woche vor oder zur ck springen Alle Mitarbeiter sind immer fix eingeteilt und m ssen aus der Liste gezogen werden wenn diese frei haben oder krank sind Wenn Sie auf den Pfeil rechts neben dem Datum klicken werden alle Mitarbeiter angezeigt die nicht eingeteilt sind Unter den Mitarbeitern sehen Sie die Mitarbeiter Minuten die an diesem Tag zur Verf gung stehen 12 05 2014 Bedienungsanleitung Seite 30 von 125 HTL Mistelbach Planify App Thoma Weise Dienstplan vo Di 2 vo Mi 22 0 vo Do 23 0 vilo 240 ele er sis m 3 as Weise DD veise 3 as Welse 3 as Welse Do veise PL V 3 3 Abb 8 Planify Dienstplan 9 2 1 Leiharbeiter hinzuf gen Uber den Leiharbeiter Button rechts unten im Dienstplan k nnen Sie einen Leiharbeiter hinzuf gen Sie m ssen einen Namen eingeben eine Firma ausw hlen welche unter Einstellungen gt Mitarbeiter gt Firmen vordefiniert werden m ssen eine Start bzw Endzeit angeben die Mittagspause wird dabei nicht ber cksichtigt und die Wochentage an denen der Leiharbeiter in der aktuellen Woche arbeitet Mit dem rechts unten k nnen Sie einen weiteren Leiharbeiter hinzuf gen Anschlie end m ssen Sie auf
61. anagement HTL Mistelbach Planify App Thoma Weise e F r das Unternehmen sind Bestandskunden ein wirtschaftlicher Vorteil weil neue Kunden anzulocken mit hohen Kosten verbunden ist Das k nnen Marketingma nahmen oder Angebote sein die das Unternehmen langfristig wieder aufholen muss um die Kosten zu decken e Bestandskunden tolerieren Fehler und Preis nderungen st rker als Neukunden Sie wissen dass das Unternehmen gute Arbeit leistet und sind mit dieser auch zufrieden Daher sind treue Kunden auch gro z giger wenn es um die Erh hung von Tarifen oder Pauschalzahlungen geht sie sch tzen den Nutzen einer langfristigen Beziehung h her ein e Viele Dieser Ziele sind jedoch nicht auf direktem Wege zu erreichen daher gilt es sog Sekund rziele zu erreichen bevor es zu einer langfristigen Kundenbindung kommt 5 1 2 Sekund rziele in Anlehnung an Mai07 5 1 2 1 Kundenzufriedenheit Die Zufriedenheit eines Kunden richtet sich zentral nach den Erwartungen eines Kunden an die beanspruchten Leistungen des Unternehmens Diese Anforderungen sind subjektiv und k nnen sich von Kunde zu Kunde unterscheiden es gilt diese Anforderungen herauszufinden und zu erf llen 5 1 2 2 Kundenn he Die N he zu einem Kunden spiegelt sich in der Quantit t der Interaktionen oder Gesch ftstransaktionen wieder Je h ufiger es zu einer Interaktion zwischen beiden Parteien kommt desto n her sind sich selbige Je n her diese Beziehung gepfleg
62. arser interpretiert werden muss bevor der Request beendet werden kann und ein Response folgt http whatis techtarget com definition front end 17 02 2014 12 05 2014 Umsetzung Seite 68 von 125 HTL Mistelbach Planify App Thoma Weise Diese zwei berlegungen sind wichtig denn nun kann eine Sitzung mit session start gestartet werden anschlie end werden alle etwaigen Fehlermeldungen mit error reporting f r die Anzeige aktiviert und alle MVC Skripte eingebunden dazu sp ter Nun werden Instanzen der Klassen SOL Login und Template erstellt es wird vorerst zur Klasse Template n her Bezug genommen lt title gt Planify bull lt template gt title gt lt title gt lt meta http equiv Content Type content text html charset utf 8 gt lt meta name viewport content width device width initial scale 1 0 maximum scale 1 0 user scalable no gt lt meta name apple touch fullscreen content yes gt lt meta name apple mobile web app capable content yes gt lt meta name apple mobile web app status bar style content black gt lt meta name apple mobile web app title content Planify gt e e x lt meta name HandheldFriendly content true gt e e e e Code 19 title Tag und meta Angaben im head Bereich des index php In Code 19 wird klar dass auch meta Angaben in einem HTML Dokument nicht fehlen sollten denn jede dieser Angaben ist wichtig f r eine bestimmte Anfo
63. b 44 Abb 45 Abb 46 Abb 47 Abb 48 Abb 49 Abb 50 Abb 51 Abb 52 Abb 53 Abb 54 Abb 55 Abb 56 Abb 57 Flus diagramm en DEE 111 Flussdiagramm K nlen ans ee 112 Flussdiagramm Leiharbeiter cio ak 112 Flussdiagramm Lieferanten ie 113 Flussdiagramm Login ee Ze en a ee en a renee 113 Elussdiagramm Mena ea coleccionista 114 Flussdiagramm Mitarbeiter ee 115 Elussdiagramme Posten aa Hr 116 Elussdiagramm Produkt nee ee 117 Flussdiagramm Produkte zu ni ee 118 Flussdiagramm Produktgruppen EEN 119 le Egal e E 119 Flussdiagramm Spezialbestellung AEN 120 Flussdiagran m Tagesplan unse ae 120 Flussdiagramm W chenplan u u zuerst 121 Tabellenverzeichnis Tabelle 1 Tabellarische Zeiterfassung ENEE 15 Tabelle 2 Meilensteine nnnnnnnnnnnnnnnnnnnnnn nn 16 Tabelle 3KostenauischlUssold ctas 16 Tabelle 4 Pflichtenheft Kontaktinformationen nnnnnnnnnnnnnnnnnnnnnnnnnn nn 104 Tabelle 5 Pflichtenheft Projektdaten AAA 104 Tabelle 6 Pflichtenheft Projektcharakteristika nenne nnnnnnnnnnnnnnnn 105 Tabelle 7 Pflichtenheft Lieferumfang AAA 106 Tabelle 8 Pflichtenheft Risiken AAA 109 Tabelle 9 Zeiterfassung Detailautschl sselung en nnnnnnnnnnnnnnnn 124 Abbildungsnachweis Abb 2 http www lernende regionen at de page asp id 30 Stand 28 04 2014 Abb 23 http failconference at Stand 16 02 2014 Abb 25 http getbootstrap com about Stand 16 02 2014 Abb 33 ht
64. berh ufen Es sollen alle Kommunikationskan le wie 12 05 2014 Kundenmanagement Seite 24 von 125 HTL Mistelbach Planify App Thoma Weise Telefon Fax Internet Email etc als geb ndelte Einheit agieren Der Kunde soll gezielt mit einer einheitlichen Zielsetzung angesprochen werden Es soll Kontakt zu den Kunden ber alle Kan le gleichzeitig aufgenommen werden aber niemals beim selben Kunden mehrmals hintereinander 5 2 Erkenntnisse Oft ist es leichter mit dem Kunden sofort auf einer etwas lockereren stets gesch ftlichen Basis zu betreuen weil er sich dann auch mehr sagen traut und einem Fehler besser verzeiht Au erdem kann man die Bedienung von Sachen nicht detailliert genug beschreiben es wird immer wieder Leute geben welche genau vorgegebenen Schritten einer Anleitung nicht folgen k nnen m chten Alles in allem waren wir u ert froh diese Erfahrungen machen zu d rfen wir haben sehr viele Zusammenh nge zwischen der Theorie und der Praxis im Arbeitsleben kn pfen k nnen und werden an das n chste Projekt gewiss anders rangehen und wieder neue Erfahrungen machen die aus uns bestimmt noch kompetentere Absolventen machen 12 05 2014 Kundenmanagement Seite 25 von 125 HTL Mistelbach Planify App Thoma Weise 6 Entstehungsgeschichte Dieses Projekt beginnt damit dass unser Projektbetreuer an uns herangetreten ist und uns dieses Projekt in Zusammenarbeit mit einem Kunden bzw Partner vorgeschlagen hat Bei un
65. bilen Ger ten verwendet werden soll Wir haben uns schon fr h f r ein gemeinsames softwarelastiges Projekt als Diplomarbeit entschieden weil wir uns sehr f r die Programmierung und Planung von bestimmten Abl ufen im Sektor Business Software interessieren Als wir den Projektvorschlag von unserem Softwaredesign Professor DI Paul Tutschek erhielten haben wir uns sofort daf r entschieden da die Zusammenarbeit mit einem Kunden f r uns eine neue Herausforderung darstellte Wenn man ein Projekt f r einen Kunden durchf hrt lernt man viel mehr dabei da auf der Ergebnisseite jemand steht der sich ein bestimmtes Ergebnis des Projektes erwartet was in den Abschnitten Entstehungsgeschichte und Gelerntes noch n her ausgef hrt wird Einleitung Das Ziel dieses Projektes ist es den Planungsablauf unseres Kunden in eine Web Anwendung zu integrieren Die Web Anwendung soll einfach zu bedienen sein den Gesch ftsprozess nachvollziehbar darstellen und die R ckverfolgbarkeit der Produktion soll gegeben sein indem ein verantwortlicher Mitarbeiter auf einem ausgedruckten Arbeitsplan jeden Arbeitsschritt unterzeichnen muss Genauere Informationen ber die Anforderungen des Projekts finden sich im Anhang unter Pflichtenheft und Werkvertrag Die Benutzeroberfl che wird anschlie end unter Bedienung n her erkl rt Unter Programmieren Theorie und Programmieren Umsetzung werden Software Aspekte n
66. biniert mit AJAX Request re Einen AJAX Request zu schicken ist an und f r sich keine gro e Kunst mehr heutzutage Mit Bibliotheken wie jQuery ben tigt man keine 4 Zeilen und hat schon mehrere Dateien asynchron nachgeladen Nachfolgend dasselbe Skript in nativen JavaScript Code 11 und mit der Bibliothek jQuery Code 12 var obj document querySelector button obj addEventListener click send false function send var obj document getkElementBylId intro var xmlhttp if window XMLHttpRequest code for IE7 Firefox Chrome Opera Safari xmlhttp new XMLHttpRequest else ij code for TEO TES xmlhttp new ActiveXObject Microsoft XMLHTTP xmlhttp open GET file php false xmlhttp send obj innerHTML xmlhttp responseText 12 05 2014 Theorie Seite 52 von 125 HTL Mistelbach Planify App Thoma Weise Code 11 AJAX Request mit JavaScript document ready function Seet career EEN Eeer SEI O Saa D tie Miles eene success function msg Same rest mee y Code 12 Query AJAX Request Sp testens hier hat jeder jQuery Skeptiker aufgegeben Der Code in Code 12 ist transparenter atomarer und ist f r jeden Browser der Gleiche Man kann mit AJAX auch Datenpakete hin und her schicken daf r hat sich eine spezielle Notationsform als sehr Hilfreich erwiesen die man JSON JavaScript Object Notation nennt JSON ist eine seh
67. bject Model DOM Attribute href Element lt title gt lt a gt Das DOM ist plattform und sprachenunabh ngig und bildet einen gemeinsamen Zugangspunkt um den Inhalt Struktur und Stil eines Dokuments dynamisch zu lesen und zu ndern Wie in Abb 26 zu sehen ist die Wurzel eines Dokuments das lt htm1 gt Tag der sich in das Kopfelement lt head gt und K rperelement lt body gt aufspaltet Diese Elemente unterteilen sich dann inhaltsabh ngig in weitere Elemente 10 2 3 2 Syntax Die Syntax erinnert stark an die von C oder die des Namensvetters Java Die beiden haben jedoch nur m ige Gemeinsamkeiten Java muss vor dem Verwenden n mlich von dem Prozessor kompiliert werden und z hlt somit zu den Programmiersprachen JavaScript hat im Gegensatz zu seinem Namensvetter weitaus mehr Einschr nkungen und kann zum Beispiel auch nicht auf Systembezogene Abteile zugreifen es ist also nicht m glich Systembezogene Dateien mit JavaScript zu lesen oder zu beschreiben was die Systemsicherheit einigerma en gew hrleistet Man kann JavaScript zwar direkt in ein HTML Dokument einbinden jedoch ist das nicht Zweckm ig es wird daher ein seperates JavaScript Dokument verfasst welches common js genannt wird und ber lt script src common js gt lt script gt in das HTML Dokument eingebunden wird M chte man ein Skript realisieren das den Besucher fragt wie er hei t und ihm ein input Feld sowie
68. blich hinterlegt Rot Konditoren Gelb Hilfskr fte Blau Lehrlinge Gr n Leiharbeiter Produkte Die Produkte werden nach Produktgruppen farblich hinterlegt Die Produktgruppen k nnen im Programm neu angelegt ge ndert werden dabei k nnen auch die Farben ausgew hlt werden 12 05 2014 Anhang Seite 106 von 125 HTL Mistelbach Planify App Thoma Weise Dienstplan Alle Konditoren Lehrlinge und Hilfskr fte haben standardm ig jeden Tag Dienst Diese sind in einer Liste nach Berufsgruppen und Priorit t aufgelistet Durch ziehen in den Papierkorb k nnen die Mitarbeiter die an diesem Tag nicht da sind entfernt werden Die Arbeitszeit einzelner Personen k nnen auch ver ndert werden falls ein Mitarbeiter sp ter beginnt oder fr her aufh rt ber einen Leiharbeiter Button kommt man ins Leiharbeiter Fenster Leiharbeiter In diesem Fenster k nnen Leiharbeiter f r einen oder mehrere Tage hinzugef gt werden mit Namen und Leihfirmen Diese sind dann auch im Tagesplan einzuteilen Wochenplan Im Wochenplan sind f r jeden Tag alle Arbeitsschritte mit Zeiten aufgelistet Rechts gibt es eine Leiste mit allen Produkten die unter Produktion ausgew hlt wurden die durch ziehen zu bestimmten Tagen an diesen Tagen zugeteilt werden Aus der Leiste k nnen auch Produkte entfernt werden falls zu viel hinzugef gt wurden ber einen Heute Button kann man im Kalender zum aktuellen Tag springen F r jeden Tag gibt es eine Aufli
69. bmit Code 24 BilduploadSkript aus 2 Teilen bestehend Das in Code 24 zu sehende Fragment ist wichtig f r den automatischen Upload von Bildern bei den Mitarbeiter Einstellungen Die erste if Anweisung pr ft ob der Browser Webkit unterst tzt Tut dieser das muss die window URL Variable auf die des Webkits abgeglichen werden 27 9 https developer mozilla org en US docs Web API Window URL 03 03 2014 12 05 2014 Umsetzung Seite 72 von 125 HTL Mistelbach Planify App Thoma Weise Die Funktion takepicture ben tigt n mlich den korrekten Pfad f r die Zwischenspeicherung des Abbilds und macht nichts anderes als das hochzuladende Bild lokal anzuzeigen ohne dass es noch gespeichert wurde Anschlie end wird das Formular mit AJAX abgeschickt und das Bild somit ber das im Markup definierte Skript ajax upload_file php hochgeladen Dieses pr ft die Datei auf Gr e lt 5 MB und auf den Dateityp Jeder Fehler gibt einen HTTP Status von 400 Bad Request zur ck der hei t dass etwas schief gegangen ist Im Normalfall wird aber HTTP Status 200 OK zur ckgegeben was mit der Funktion success einhergeht Mit data wird das Bild mit dem Dateinamen des erfolgreich hochgeladenen Bildes beschrieben Das ist f r die Datenbank sehr wichtig falls sich der Benutzer dazu entscheiden sollte auf Speichern zu dr cken Hat event target files eine L nge von 1 und ist die in event target files enthaltene Datei vom Typ image
70. ch f r gew hnlich sehr effizient mehrere Elementgruppen eines Dokuments anw hlen wie durch das folgende Beispiel form control Das ist auch Sinn A Zweck dieses Selektortyps e Universal Durch den Einsatz eines Wildcard Symbols wie beispielsweise kann man allen Elementen eines Dokuments bestimmte Eigenschaften zuweisen e Attribut Ebenso ist es m glich durch HTML Attribute wie href src type etc bestimmte Elemente oder Elementgruppen auszuw hlen Das ist durch den reinen Attributnamen zB type oder auch durch einen Zuweisungsoperator zB type text m glich e Pseudo Klassen bzw Elemente Es ist m glich bestimmte Elemente mittels ihrer Position oder anderen Eigenschaften zu selektieren ohne dabei den Quelltext ndern zu m ssen Um nur das Erste p Element auszuw hlen schreibt man p first child http de wikibooks org wiki Websiteentwicklung CSS Syntax 28 01 14 12 05 2014 Theorie Seite 46 von 125 HTL Mistelbach Planify App Thoma Weise 10 2 2 6 Bootstrap F r diese Arbeit wird ein von der Firma Twitter Inc entwickeltes CSS Framework also ein CSS Ger st verwendet welches ber definierte Elementklassen class aktiviert wird Man kann Bootstrap kostenlos herunterladen und den Ordner dist Version 3 in das Wurzelverzeichnis des Projektes verschieben Bootstrap Abb 25 Bootstrap Logo Diese einfache als auch effektive Handhabung ist mitverantwortlich f r den bahnbrechende
71. d Alphabet aufgelistet und durch dr cken auf das jeweilige Produkt k nnen die verf gbaren Mengen ausgew hlt werden Alle 12 05 2014 Anhang Seite 107 von 125 HTL Mistelbach Planify App Thoma Weise ausgew hlten Produkte sind dann im Wochenplan in der Leiste Mit einem Button gelangt man zu den Sonderbestellungen Sonderbestellungen Hier k nnen Sonderbestellungen Hochzeitstorten einmalige Bestellungen eingegeben werden Diese werden automatisch gespeichert und dann unter Sonderbestellungen aufgelistet und dann wiederverwendet ver ndert ber einen Button k nnen neue Sonderbestellungen hinzugef gt werden Sonderbestellungen werden so eingegeben wie unten unter Einstellungen beschrieben Einstellungen Die Einstellungen k nnen nur mit dem Chef Account ge ndert werden Unter Einstellungen gibt es wieder 4 Tabs auszuw hlen Produkte Mitarbeiter Lieferanten Posten Produkte Die Produkte sind nach Produktgruppen und Alphabet aufgelistet und k nnen ver ndert gel scht werden ber einen Button k nnen neue Produkte hinzugef gt werden Parameter f r ein Produkt sind der Name Auswahl der Produktgruppe und die Arbeitsschritte ber einen Button k nnen weitere Arbeitsschritte hinzugef gt werden Parameter f r einen Arbeitsschritt sind der Name Auswahl vom Posten Mengen und dazugeh rige Zeiten Zutaten f r diesen Arbeitsschritt der Tag in der Produktkette Einzelne Produkte k nnen kopiert und modifizier
72. d der boolsche Wert true zur ckgegeben wenn er keine Berechtigung hat wird false zur ckgegeben private function hasPermission acronym null Sdb new SQOL irlisset S SESSION id 6 lis nulli acronym db gt query SELECT ID FROM GE login WHERE Sacronym IS NOT NULL AND ID id array id gt mysql_real escape string SESSION id Y return Sdb gt coune gt 0 Y true false Pelse IE issetio SESSION dt 1 return false else return true Code 37 Klasse Template mit hasPermission Funktion 11 4 1 4 Funktion setTitle Die in Code 38 zu findende Funktion macht im Grunde genommen nichts anderes als die den Wert an der Stelle pageIndex des Arrays pages abzufragen und nach dem zur ckgegebenen Ergebnis zu handeln Ist der Wert vorhanden wird die Variable auf den im Array gefunden Wert festgelegt Wird nichts gefunden wird der Titel an der Stelle err404 also der Fehlerseite genommen Wenn der pageIndex berraschend leer sein wird der Titel der Standardseite also Wochenplan hergenommen Ist er jedoch nicht gesetzt wird abermals der Titel der Fehlerseite als Wert herangezogen 12 05 2014 Umsetzung Seite 84 von 125 HTL Mistelbach Planify App Thoma Weise private function setTitle irl issetr Sthis gt pagelndex 1 if empty this gt pages this gt pagelndex title Sthis gt title this gt pages this gt pagelndex title
73. das Formular ben tzen m chte Das Platzhalterattribut placeholder ist ein gutes Beispiel um diese Neuerung zu demonstrieren Wenn man n mlich das input Feld um diese Eigenschaft erweitert und einen Wert anf gt erscheint im input Feld ein Wert der beim Schreiben ausgeblendet wird Weitere Attribute w ren required welche das Feld zu einem verpflichtenden Feld machen und autofocus welcher beim Aufruf eines Dokuments den Cursor direkt in das Feld setzt man kann sofort in dieses Feld Eingaben t tigen Um das in Abb 23 angegebene E Mail Feld auch bei mobilen Ger ten ohne gro en Aufwand eingeben zu k nnen hat man als Entwickler nun die M glichkeit dieses Feld zu einem lt input type email gt zu machen Moderne Browser pr fen dieses Feld nun auf eine korrekte E Mail Syntax Das hei t mit anderen Worten man muss sich nicht um JavaScript berpr fungen k mmern der Browser berpr ft das Feld eigenst ndig und sagt dem Nutzer bei falschen Eingaben auch was falsch ist Zudem wird bei mobilen Ger ten zwischen verschiedenen Eingabetypen die Tastatur gewechselt um die Eingabe von Uhrzeiten Daten Zahlen Telefonnummern und dergleichen zu erleichtern bzw Falscheingaben gar nicht erst m glich zu machen Das kann man in Abb 24 sehr gut sehen Die Firma Apple Inc geht mit hervorragend gutem Beispiel voran und war einer der Ersten Anbieter der diese Neuerungen mit 12 05 2014 Theorie Seite 43 von 125 HTL Mistelbach
74. die 12 05 2014 Anhang Seite 109 von 125 HTL Mistelbach Planify App Thoma Weise Auftragnehmer ist unzul ssig Die Auftragnehmer haften jedoch daf r dass der Auftrag entsprechend dem Pflichtenheft ordnungsgem und zum vereinbarten Termin erbracht wird Rechte Urheber der geschaffenen webtechnischen Anwendung ist die Heiss amp S GmbH und diese kann vollst ndig ber das Werk verf gen S mtliche Rechte wie Patent Urheber und Leistungsschutzrechte bleiben derFirma Heiss amp S vorbehalten Das Designrecht bleibt den Herren Thoma und Weise vorbehalten Im Falle des Verkaufs der webtechnischen Anwendung bekommen 30 des Nettoumsatzes die Herren Thoma und Weise Und des Weiteren werden die Herren Thoma und Weise als Support empfohlen Anspr che Der Auftraggeber verpflichtet sich die Auftragnehmer zu entlohnen wenn diese Ihre Arbeit zur Verf gung stellen Diese Entlohnung betr gt insgesamt Euro 2 000 ohne MwSt zahlbar prompt nach Rechnungserhalt Ablaufdiagramme Men nde Button Start Men Dienst dr cken El nde Datum Se dr cken Start Tagesplan Dienst lan nde Start Leiharbeiter Dienst dl ta Dienst pla Dienstplan Leiharbeiter Fenster dr cken V ceie yor 7 Woche vor d zur ck zur ck anklicken Mitarbeiter Mitarbeiter verschieben verschieben Abb 41 Flussdiagramm Dienstplan 12 05 2014 Anhang Seite 110 von 125 HTL Mistelbach Planify App T
75. e Code 29 JavaScript wp_sort_stop Funktion Wochenplan Kalenderwoche 08 MA 0 1 LA MA 0 2 LA pr MA 0 2 LA Bestellungen Mo 17 02 Di 18 02 Do 20 02 So 23 02 Abb 37 Wochenplan 12 05 2014 Umsetzung Seite 76 von 125 HTL Mistelbach Planify App Thoma Weise 11 3 3 2 Dienstplan Das Front End des Dienstplans ist nicht ganz so kompliziert wie das des Wochenplans Dennoch werden f r die definierte Funktionalit t des Dienstplans ca 9 Funktionen ben tigt Dienstplan Kalenderwoche 10 Abb 38 Dienstplan 12 05 2014 Umsetzung Seite 77 von 125 HTL Mistelbach Planify App Thoma Weise function dp show employees if sender length gt 0 return false var element if event type click element this parent parent if this hasClass rotate 180 AUSGEKLAPPT this removeClass rotate 180 S tr eq 0 find ul eq element index html return AUSKLAPPEN VERHINDERN else S this addClass rotate 180 else element this element find i pull right addClass rotate 180 S ajax EE EE EE EE EE E data date element data date beforeSend function document find ul itemlist eq element index show html lt li class text center gt lt img src img loading gif alt gt lt li gt success proxy function msg var js
76. e auf den zugeh rigen roten Papierkorb klicken Durch klicken auf Speichern wird das Produkt gespeichert Wenn Sie ein Produkt duplizieren wollen dann m ssen Sie auf das Produkt klicken welches Sie duplizieren wollen Anschlie end ndern Sie den Produktnamen und klicken auf duplizieren Nun m ssen Sie nur noch die Daten des duplizierten Produkts bearbeiten Neues Produkt Gruppe Nuss Ii Rot Y Neuer Schritt Abb 15 Planify Einstellungen Neues Produkt Initialansicht 9 6 2 Produktgruppen Durch klicken auf Produktgruppen rechts unten unter Einstellungen gt Produkte gelangen Sie in ein neues Fenster wo Sie die Produktgruppen bearbeiten entfernen oder neue hinzuf gen k nnen Durch klicken auf das rechts unten k nnen Sie eine neue Produktgruppe hinzuf gen Wenn Sie rechts unten auf Bearbeiten klicken k nnen Sie einzelne Produktgruppen l schen Um die Produktgruppen zu speichern m ssen Sie rechts unten auf Speichern klicken Der Produktgruppe welche mit dem ausgef llten Stern markiert ist werden die Spezialbestellungen zugewiesen aber nur denen die auch gespeichert werden sollen Produktgruppen nderungen vornehmen Nuss Schaum Schokolade Spezialbestellung Abb 16 Planify Einstellungen Produktgruppen 9 6 3 Mitarbeiter Unter Mitarbeiter sind alle vorhandenen Mitarbeiter aufgelistet Hier k nnen Sie die vorhandenen Mitarbeiter bearbeiten Wenn Sie auf das rech
77. e ein Produkt l schen wollen m ssen Sie es anklicken und anschlie end auf den roten Papierkorb rechts unten klicken Dann erscheint das gel schte Produkt wieder rechts in der Liste Wenn Sie es noch einmal anklicken und auf den Papierkorb klicken ist es endg ltig 12 05 2014 Bedienungsanleitung Seite 31 von 125 HTL Mistelbach Planify App Thoma Weise gel scht Durch doppelklicken auf den Arbeitsschritt eines Produktes k nnen Sie die Produktmenge direkt im Wochenplan ndern EES o 100 61 400 10 o o MA 1110 MA 540 MA 540 MA 1110 MA 1110 MA 1110 MA 0 Mo 20 01 Di 21 01 Mi 22 01 Do 23 01 Fr 24 01 Sa 25 01 So 26 01 Firma 2 Firma 1 Firma 3 Firma 4 Bestellungen 1 Abb 10 Planify Wochenplan 9 4 Tagesplan Zum Tagesplan gelangen Sie indem Sie im Wochenplan auf das Datum des gew nschten Tages klicken oder indem Sie im Dienstplan auf das Auge links neben dem Datum des gew nschten Tages klicken Durch klicken auf die Pfeile rechts und links neben der berschrift Tagesplan springen Sie einen Tag vor oder zur ck Unter jedem Posten sind die Arbeitsschritte aufgelistet welche an diesem Tag zu erledigen sind Die Lieferanten bei denen an diesem Tag bestellt werden muss sind auch aufgelistet Sie k nnen die Arbeitsschritte auch zu einem anderen Posten schieben Rechts befindet sich eine Liste mit allen Mitarbeitern die an diesem Tag Dienst haben Diese m ssen zum entsprechenden Posten
78. eeeee as color FROM G lieferanten P JOIN as as WH ER un supplierID WEEK date W ATE ADD date F T EK P date INTERVAL o Ve ECT orderIndex FROM pf posten WH EK date ERVAL Oo dayIndex ERE isboss IS NOT NULL productName pf lieferanten zutei lungen P ID AND 5 P period 1 0 AND PEDIFF T Di Q D DATE ADD FIRST 1E DAY OF W te DAY gt da ES da as as ID ID as stepID orderIndex as group name as productName name quanti E TO S color lieferant date ty EC T time as pf bestellungen P JOIN OIN pf produkte R JOIN OIN pf produkte zeiten E y WHE S D Q group AND D R colorID AND ayIndex DATEDIFF roductID D produc P productID AN Q ID AND gtyID AND gtyID AND SELECT FROM AND orderlID my ES P Ha 0 H 9 Q H H D CG o DO OT 1 O stepID UNION EK date INT ERVAL Oo dayIndex L F duration pf produkte arbeitsschritte Q pf produkte mengen S T JOIN pf colors U JOIN pf_posten V date P date 1 LID AND D AND G wochenplan
79. eft verbessern Thoma 16 05 2013 Kundentreffen Pflichtenheft unterzeichnen Weise 16 05 2013 Kundentreffen Pflichtenheft unterzeichnen Thoma 17 05 2013 Wochenplan Dienstplan Layout 1 Weise 17 05 2013 Wochenplan Dienstplan Layout 1 Weise 12 06 2013 berall App Congress Weise 13 06 2013 berall App Congress Thoma 17 06 2013 Verwerfen Layout 1 Erstellen Layout 2 Weise 17 06 2013 Verwerfen Layout 1 Erstellen Layout 2 Thoma 25 06 2013 Frontend Arbeiten Weise 25 06 2013 Frontend Arbeiten Thoma 28 06 2013 Frontend Arbeiten Thoma 01 07 2013 Frontend Arbeiten Weise 01 07 2013 Frontend Arbeiten Weise 10 07 2013 Backend Arbeiten Weise 12 07 2013 Backend Arbeiten CHE CHE CHL MECH CHE CHE Ce le Pr eINnN In lu vv P P n in u uvm PP ww r P w w u Im Il PIePINI N N N vv vv vo v I 7 0 0 x xlv 00000 070 00T v vo IV 0 00 0 0 0 0 0 0000 0 0 12 05 2014 Anhang Seite 122 von 125 HTL Mistelbach Planify App Thoma Weise Weise 14 07 2013 Backend Arbeiten Weise 16 07 2013 Frontend Arbeiten Thoma 16 07 2013 Frontend Arbeiten Weise 18 07 2013 Backend Arbeiten Weise 19 07 2013 Backend Arbeiten Thoma 20 07 2013 Frontend Arbeiten Thoma 21 07 2013 Frontend Arbeiten Weise 22
80. ehmens resultieren aus F higkeiten und Ressourcen eines Unternehmens Das Ziel dieser Analyse ist es Ansatzpunkte f r die Schaffung eines strategischen Wettbewerbsvorteils zu finden Wenn man die St rken seines Unternehmens kennt kann man auf diesen St rken aufbauen und diese St rken auch ausnutzen Die Schw chen wirken sich negativ auf das Unternehmen aus und hindern es daran einen Wettbewerbsvorteil zu erlangen Kennt man seine Schw chen kann man diesen Schw chen entgegenwirken Die St rken und Schw chen werden verglichen mit den jeweiligen Schw chen bzw St rken von Mitbewerbern da St rken und Schw chen immer relativ zu betrachten sind Ein Unternehmen kann einen Aspekt der Analyse als Schw che sehen hingegen kann ein anderes Unternehmen 12 05 2014 Markt amp Konkurrenzanalyse Seite 17 von 125 HTL Mistelbach Planify App Thoma Weise dasselbe Ergebnis als eine St rke ansehen Die interne Analyse kann auf mehrere Arten strukturiert werden 4 1 2 Umfeldanalyse externe Analyse In der Umfeldanalyse oder auch externen Analyse werden die Chancen und Risiken eines Unternehmens identifiziert Bei dieser Analyse f llt der Blick auf die Aufgaben des Unternehmens auf den Wettbewerb und auf den potenziellen Markt also auf die Kunden Hier gibt es eine Unterteilung in Technologiefr herkennung amp Technologieprognose und Konkurrentenanalyse F r die Technologiefr herkennung und Technologieprognose muss man Signale aus der U
81. ehr Rechte bekommt man bei der Entwicklung Das Entscheidungsrecht ist dabei dem Komitee vorbehalten das entscheidet ob eine nderung an dem Originalcode vorgenommen wird oder nicht Das Original Projektverzeichnisist n mlich f r jeden Entwickler schreibgesch tzt nur das Komitee kann nderungen bewilligen Daf r wird an alle Komitee Mitglieder eine E Mail geschrieben Geben drei ihr 1 und keines ein 1 dann wird die nderung beim n chsten gr eren Patch wirksam gemacht Die eigentlichen nderungen geschehen also erst einmal auf den lokalen Maschinen der Entwickler bevor sie in der Mailingliste diskutiert oder vorgeschlagen werden Dem Komitee kann man als Entwickler nach einer Zeit von sechs Monaten beitreten wenn ein Mitglied des Komitees einen Nominiert Die Apache Software ist ohne Einschr nkungen irgendeiner Art kostenlos und frei verf gbar f r jeden Menschen der Zugang zum Internet hat Die Software ist und bleibt auf unbestimmte Zeit kostenlos weil die Apache Software Foundation der Meinung ist dass Ein Produkt wie es ein Webserver ist stets kostenlos verf gbar sein muss um das Internet frei von Besitzern zu halten welche das Internet gerne als ihr Eigentum ansehen wollen w rden Die Protokolle des Internets zB HTTP sollen stets frei von 12 05 2014 Theorie Seite 61 von 125 HTL Mistelbach Planify App Thoma Weise Besitzern gehalten werden deshalb muss man jedem einen Zugang zu einem Tei
82. eht Diese sucht nach allen Elementen des Wochenplans mit der Klasse item und demselben Wert des Attributs data id wie den des gerade bewegenden Elements Die gefundenen Elemente werden alle mit dem bewegten Element mitverschoben Die Positionen berechnen sich wie folgt http www w3schools com cssref css3_pr_animation keyframes asp 10 03 2014 12 05 2014 Umsetzung Seite 74 von 125 HTL Mistelbach Planify App Thoma Weise DOS draggableoffsetLeft z iteMindex kW draggableyiatn Es eMindex 4 pos draggablesffsetrop Offset 45 offset 4 Die Berechnung von pos aus erfolgt von dem Abstand nach Links des bewegenden Elements minus dem index des aktuellen Elements Mo 0 Di 1 etc mal der Breite des bewegenden Elements Der Index ist blicherweise negativ daher gilt je h her der index desto weiter rechts ist das Element platziert Dazu wird blicherweise ein Abstand von rem mal 4 addiert der aus Formatierungstechnischen Gr nden notwendig ist function wp sort event ui if S ui item hasClass single MEHRERE ELEMENTE S tr eq 0 find ul each function offset 0 S li item data id ui item data id each function index ui item parent index this parent index S this css 1 position absolute width this parent width left parseInt ui item css left index parselInt ui item css wid
83. em Mobile First Ansatz profitieren auch Endger te mit h herer Aufl sung als ein Smartphone wie ein Tablet und der altbekannte PC Denn durch eine klare Struktur und durch bersichtliche Elemente sowie einem Fokus auf elementare Funktionen erreicht man auch bei Nutzern von gro en Bildschirmen gewisse Sympathie Vorteile sind zum Beispiel o Schnellere Ladezeiten durch weniger F ll Inhalt o Mehr Klarheit durch sinnvolle Strukturierung o Besser durchdachtes Gesamtkonzept 10 2 7 3 Designphase Geht es in die Designphase in der man versucht ein visuelles Konzept seiner Web Applikation auszuarbeiten hat es sich f r jedes Projekt bew hrt dem Mobile First Ansatz nur eingeschr nkt zu folgen Se o OK LEICHT Abb 34 Accessability von Elementen bei Touch Oberfl chen Von daher wurde hier auf das bekannte 960px Grid gesetzt welches den Inhalt der Webseite auf 960 Pixel reduziert Sinn dahinter ist die einfache und unkomplizierte Unterteilung weil sich 960 sehr leicht durch eine beliebige nat rliche Zahl teilen l sst Folgende Fragen k nnen bei diesem Prozess dabei sehr hilfreich sein e Wo platziere ich welche Inhalte e Wie soll der Gesamteindruck der Applikation sein e Wie soll die farbliche Gestaltung sein e Wie ist die Accessability siehe Abb 34 der Elemente mit Touch Eingabeger ten 2 http canalys com newsroom smart phones overtake client pcs 2011 12 05 2014 Theorie Seite 63 von 125
84. en kann Aktivit ten und Softwarel sungen die nach dem analytischen Prinzip arbeiten berechnen anhand der Daten diverse Eigenschaften der Kundenbeziehungen und erm glichen Prognosen f r das Unternehmen So ist es zum Beispiel m glich aus den Daten Merkmale einer neuen Zielgruppe zu extrahieren oder Eigenschaften Verhaltensweisen und Wertsch pfungspotenziale von Kunden besser kennenzulernen und einzusch tzen 5 1 3 3 Operatives CRM Das operative CRM soll die Ziele des strategischen CRM m glichst so wie definiert umsetzen und so Marketing Service und Vertrieb automatisieren Die Ergebnisse des analytischen CRM werden im operativen CRM verwendet Der Kontakt zum Kunden ist die Basis des Operativen CRM Diese wird blicherweise mit einem Produkt gesichert Die Wichtigkeit des zust ndigen Mitarbeiters variiert dabei stark von der Art der Kontaktierung Wird ber Onlinemedien mit dem Kunden interagiert ist der Mitarbeiter eher nicht entscheidend wichtig Tritt jedoch Kontakt ber direktem Wege ein wie durch pers nliche Treffen und Gespr che ist der zust ndige Mitarbeiter sehr wichtig f r das Unternehmen Operative CRM Systeme sollen Mitarbeiter in diesen Schl sselpositionen im Bereich der Terminplanung Angebotsverwaltung oder der Verwaltung der Kundendaten unterst tzen 5 1 3 4 Kommunikatives CRM Beim Kommunikativen CRM ist es wichtig den Kunden nicht mit Widerspr chen oder nicht strategisch geplanten Methoden zu
85. endtime SELECT endtime FROM pf mitarbeiter WHERE ID Q ID P endtime as endtime FROM pf_tagesplan zuteilungen P JOIN of mitarbeiter Q JOIN pf berufsgruppen R JOIN of colors S WHERE S ID R colorID AND 0 ID P employeeIlD AND R ID Oo group AND P temp IS NULL AND D date date UNION SELECT P Di P groupIndex as i D date Se color u unknown as image NULL as boss O name as firstname Ts ID as pID OQ ID as eID NULL as surname P starttime P endtime FROM pf_tagesplan zuteilungen P JOIN of leiharbeiter Q JOIN pf berufsgruppen R JOIN of colors S JOIN pf berufsgruppen T WHERE T istemp IS NOT NULL AND S ID R colorID AND R istemp IS NOT NULL AND P temp IS NOT NULL AND Q ID P employeeID AND D date date Code 55 SQL Abfrage Tagesplan Zuteilungen Der Ablauf in Code 56 ist folgenderma en Ist der ausgew hlte Tag kein Feiertag werden die in Code 55 dargestellte SQL Abfrage eine Abfrage aller Posten und aller Berufsgruppen get tigt Nun werden wie in 11 4 3 1 schon beschrieben die zugeteilten Mitarbeiter nach dem Index ihres zugeteilten Postens sortiert 12 05 2014 Umsetzung Seite 100 von 125 HTL Mistelbach Planify App Thoma Weise if Ssmain gt 1sHolidayidazettd m Y pasate 4 SQL ABFRAGE TAGESPLAN ZUTEILUNGEN
86. erung auf den jeweiligen Verwendungszweck und tr gt somit zu einer h heren Effizienz ma geblich bei 10 2 6 1 Lokaler Server Mit dem Serverpaket XAMPP Software die auf einem beliebigen Betriebssystem X Apache MySQL Per PHP enth lt ist es m glich mit nahezu keinem Konfigurationsaufwand einen kleinen Server auf dem Heimrechner zu installieren Zudem sind alle genannten Komponenten Open Source was bedeutet dass deren Nutzung zu welchem Zweck auch immer stets kostenlos bleibt Es wird die Serverkomponente auf den Client geholt und es ist m glich unter realen Bedingungen zu testen Damit bieten sich dem Benutzer unter anderem zwei neue M glichkeiten auf o Es ist nun m glich einen Server im lokalen Netzwerk zu betreiben und so eine Umgebung zu schaffen mit der man vereinfacht lokal Web Applikationen testen kann die sonst einen Server au erhalb der R umlichkeiten des Benutzers ben tigt h tten o Ein m gliches Anwendungsgebiet ist die Speicherung von pers nlichen Dokumenten Bildern oder Musik auf dem so geschaffenen Server die man im lokalen Netzwerk aufrufen kann Diese Aspekte sind insbesondere f r Personen der Entwicklungsbranche sehr hilfreich und verbessern den Workflow siehe Abschnitt 10 2 7 durch minimierten Einrichtungsaufwand praktisch keine Kosten f r einen Server amp Software und die optimalen Deploymentbedingungen also die Vorraussetzungen dass Software schnell am Rechner des Benutzers verf gbar und
87. erwendung von JavaScript 10 2 3 3 Query F r JavaScript gibt es wie bei vielen anderen hier aufgef hrten Sprachen Bibliotheken welche die Entwicklung erheblich beschleunigen und den Code wesentlich weniger wartungsaufw ndig machen F r die Diplomarbeit wurde die popul rste JavaScript Bibliothek Query ben tzt da die Dokumentation am ausf hrlichsten ist und sie mit Query Mobile erweitert werden kann was den Einsatz der Web Applikation auf mobilen Ger ten noch besser macht Um den Unterschied von JavaScript und Query zu verdeutlichen sei folgende Aufgabenstellung gegeben Schreibe ein HTML Dokument und ein passendes Skript welches die Arbeitszeit anhand von Startzeit und Endzeit berechnet ohne Mittagspause 12 05 2014 Theorie Seite 49 von 125 HTL Mistelbach Planify App Thoma Weise lt hl class text center gt Dienstzeit lt hl gt lt div gt lt label for start gt Antritt lt label gt lt input type time class form control id start gt lt fdiv gt lt div gt lt label for end gt Feierabend lt label gt lt input type time class form control id end gt lt div gt lt xdiy gt lt button class btn btn lg btn primary id sbmtBtn gt Berechnen lt button gt lt div gt Code 8 Markup zur Aufgabenstellung Das Markup zur Aufgabenstellung bleibt f r beide Skripts gleich und l sst sich in Code 8 betrachten Es gibt zwei input Felder vom Typ time und eine
88. es St ck schneller als PHP Daher versucht man alle Abfragen Filterungen und Sortierungen mit SQL zu l sen und lediglich 1 einzigen Query an die Datenbank zu schicken Dadurch spart man sehr viel Ladezeit und das ganze System wird wesentlich beschleunigt Man berl sst der Datenbank die Berechnung der gefundenen Datens tze somit muss man nurnoch die gefundenen Zahlen richtig ausgeben das spart eine Menge Zeit in der Ausf hrung Es wird f r die drei Suchkriterien ein eigenes Attribut generiert und ein Tupel erzeugt der f r die drei Kriterien einen ganzzahligen Wert annimmt n mlich die Anzahl der gefundenen Datens tze 10 2 5 3 Einsatz F r die Diplomarbeit wurde ein lokaler Webserver verwendet der einen vorkonfigurierten MySQL Server beeinhaltet Dieses Softwarepaket nennt sich XAMPP und ist untenn her erkl rt 10 2 6 XAMPP Im Normalfall wird der Server irgendwo au erhalb der R umlichkeiten des Benutzers stehen und dort unter optimalen Bedingungen gek hlte Raumtemperatur niedrige http dev mysql com doc refman 5 0 en use html 13 02 2014 ACID Atomicity Consistency Isolation Durability http dev mysql com doc refman 5 1 en create table html 13 02 2014 12 05 2014 Theorie Seite 59 von 125 HTL Mistelbach Planify App Thoma Weise Luftfeuchte Schalld mmung etc betrieben Der Browser l uft daheim auf dem Notebook Tablet oder Smartphone des Benutzers Diese Aufstellung erm glicht eine Spezialisi
89. estellung rechts unten im Produktions Fenster gelangen Sie in das Spezialbestellungen Fenster Hier m ssen Sie einen Produktnamen eingeben und entscheiden ob Sie die Spezialbestellung speichern oder verwerfen wollen und dann noch eine Farbe ausw hlen Wenn Sie darunter auf das klicken ffnet sich ein neuer Produktschritt Dieser braucht einen Tag in der Produktkette einen Namen einen festgelegten Posten und eine Zeit Dar ber m ssen Sie noch eine Menge eingeben Sie k nnen auch Zutaten eingeben m ssen Sie aber nicht Mit dem neben der Menge k nnen Sie eine weitere Menge hinzuf gen Sie m ssen f r jeden Arbeitsschritt genauso viele Zeiten angeben wie das Produkt Mengen hat Durch klicken auf Neuer Schritt k nnen Sie einen weiteren Arbeitsschritt hinzuf gen Wenn Sie rechts unten auf Bearbeiten klicken k nnen Sie einzelne Mengen oder Produktschritte wieder l schen indem Sie auf den zugeh rigen roten Papierkorb klicken Durch klicken auf Speichern wird die Spezialbestellung im Wochenplan angezeigt 12 05 2014 Bedienungsanleitung Seite 33 von 125 HTL Mistelbach Planify App Thoma Weise Wenn Sie eine Spezialbestellung duplizieren wollen m ssen Sie die angelegte Spezialbestellung speichern und anschlie end unter Einstellungen gt Produkte duplizieren Spezialbestellun Speichern Gruppe Spezialbestellung Yi j Rot Y al ab v Name Posten Chef rr v Name Posten Chef ro v Name Po
90. homa Weise Men Ende Button Start Men Einstell dr cken ungen Ende Produkte Start Produkte Einstell dr cken ungen b n ende Mitarbeiter Start Mitarbeiter Einstell dr cken ungen tart e Einstell en ngen enster i Ende Lieferanten Start Lieferanten Einstell dr cken ungen ende Poston Start Posten Einstell dr cken ungen ende Konten Start Konten Einstell dr cken ungen Abb 42 Flussdiagramm Einstellungen ES Start Mitarbeiter dr cken Weitere Firma hinzuf gen dr cken L schen Button hinzuf gen Bearbeiten dr cken Firmen Fenster R ckmeldu Firmen ng speichern Speichern dr cken Eingaben berpr fen Fehlermeld ung Firma entfernen L schen dr cken Abb 43 Flussdiagramm Firmen 12 05 2014 Anhang Seite 111 von 125 HTL Mistelbach Planify App Thoma Weise Start Men Produkte EISE Start Produkte Mires Start Mitarbeiter dr cken Konten Fenster Hieferanien Start Lieferanten dr cken ne Posten Konte dr cken Start Posten d Weiteres Konto hinzuf gen Speichern Eingaben A R ckmeldu Konten dr cken berpr fen ng speichern NEIN Fehlermeld ung Abb 44 Flussdiagramm Konten gt Zur ck dr cken Start Dienstplan Abbruch
91. hr leicht festlegen wie man in Code 20 Anweisung 1 3 sehen kann Spezieller wird es da schon mit der Vergabe des Icons der Web Applikation wenn man bei mobilen Ger ten der Firma Apple Inc die Web Applikation zum Homescreen hinzuf gen m chte Hierf r ben tigt man die Apple spezifische Relationsangabe apple touch icon precomposed Der Name der Datei muss auch mit den Richtlinien von Apple bereinstimmen f r das iPad ist das Dateinamensuffix 72x72 Cascading Stylesheets werden ber die Relationsangabe stylesheet und dem Dateityp text css angegeben lt link rel icon type image x icon href img png favicon png gt lt link rel shortcut icon href img touch apple touch icon png gt lt link rel apple touch icon precomposed href img png favicon72x72 png gt lt link rel stylesheet type text css href css bootstrap min css gt lt link rel stylesheet type text css href css jquery gridster css gt lt link rel stylesheet type text css href css normalize css gt lt link rel stylesheet type text css href css page css gt lt link rel stylesheet type text css href css jquery nouislider css gt Code 21 Verlinkte JavaScript Skripte des index php Mit Hilfe des lt script gt lt script gt Tags kann man in das HTML Dokument Clientseitige Skriptsprachen wie zB JavaScript einbinden oder auf eine externe Ressource verweisen F r die Diplomarbeit waren die Bibliothek jQuery Query
92. hren bestehen zu k nnen Zum Beispiel indem Qualit tsm ngel am eigenen Produkt behoben werden um einen Mitbewerber zur ckzudr ngen 12 05 2014 Markt amp Konkurrenzanalyse Seite 19 von 125 HTL Mistelbach Planify App Thoma Weise 4 1 4 Bewertung Nach der Kombination der Unternehmensanalyse und der Umfeldanalyse kommt die Bewertung dieser Ergebnisse Die Ergebnisse der einzelnen vier Strategien werden bewertet und sortiert Diese Bewertung ist nicht immer gleich da es auf das pers nliche Empfinden der Personen ankommt die diese Ergebnisse bewerten Die Ergebnisse k nnen nach Wichtigkeit Dringlichkeit vorhandene fehlende Ressourcen bzw Kompetenzen Intensit t Kostenaufwand und Zeitaufwand sortiert werden 4 1 5 Unternehmensstrategie definieren Aufgrund der vorangegangen Analysen und Bewertungen kann das Unternehmen nun Strategien und Ma nahmen ableiten 4 2 Ziele Die SWOT Analyse soll vor allem dem Management einen berblick ber das gesamte Unternehmen verschaffen Sie soll m gliche Wettbewerbsvorteile und den internen Handlungsbedarf aufzeigen Weiters soll diese Analyse vor m glichen Risiken warnen auf bestehende Chancen die noch nicht genutzt werden hinweisen Das Hauptziel der SWOT Analyse ist jedoch ganz einfach die Unterst tzung bei der Entwicklung einer Unternehmensstrategie 4 3 Vorteile Zu den Vorteilen z hlt dass die SWOT Analyse durch die Vier Feld Matrix eine sehr einfache Struktur hat Diese
93. htet die Herren Thoma und Weise Auftragnehmer jeweils mit einem Nettobetrag von 1 000 Euro zu entlohnen Da dies unter die Einkommenssteueruntergrenze f llt werden voraussichtlich keine Steuern anfallen II Werkvertrag Dieser Vertrag wird zwischen der Firma Heiss amp S GmbH Auftraggeber und den Herren Martin Thoma und Martin Weise Auftragnehmer abgeschlossen und beinhaltet folgende Aspekte 1 Arbeitsverh ltnis Das Arbeitsverh ltnis beginnt mit Vertragsabschluss und endet mit Erf llung der vorgesehenen T tigkeit Der sp teste Zeitpunkt da das Werk im Rahmen einer Diplomarbeit erstellt wird ist der 1 November 2013 2 Vorgesehene T tigkeit Die Vertragspartner Thoma und Weise sind verpflichtet eine Webanwendung f r Heiss amp S GmbH zu entwerfen und umzusetzen die dessen Vorgaben entspricht im Pflichtenheft geregelt Der Umfang der vorgesehenen T tigkeit basiert auf Grundlage des Pflichtenhefts Alle dar ber hinausgehenden T tigkeiten sind nicht Teil des Vertrags 3 Arbeitsort amp Arbeitszeit Die Auftragnehmer unterliegen hinsichtlich Arbeitszeit Arbeitsort und konkreter Durchf hrung der T tigkeit keinen Weisungen des Auftraggebers 4 Haftung Der Auftraggeber tr gt das Risiko dass er die vom Auftragnehmer geleistete Arbeit nutzbringend einsetzen kann Ob die erbrachte Arbeit dem Auftraggeber einen finanziellen Nutzen bringt spielt keine Rolle Die Abw lzung des unternehmerischen Risikos auf
94. htm1 gt Wie man erkennt gibt es einen Er ffnungs Tag Starting Tag und einen Schlie enden Tag Closing Tag Innerhalb dieser Tags k nnen dann mehrere Elemente Platz finden lt HTML Element Attribut Wert gt lt HIML Element gt Code 1 HTML Syntax Ein nach den Standards des W3C definierten Vorgaben besteht ein konformes HTML Dokument besteht f r gew hnlich aus vier elementaren Teilen http www w3 org Consortium mission 04 02 2014 http open stand org principles 04 02 2014 http gd tuwien ac at languages html html design makepage 03 02 2014 12 05 2014 Theorie Seite 40 von 125 HTL Mistelbach Planify App Thoma Weise o Dokumenttypdeklaration Angabe welche HTML Version verwendet wird zB lt DOCTYPE html gt f r HTML5 Wurzelelement Das HTML Wurzelelement lt htm1 gt lt html1 gt Kopfelement In diesem sind Kopfdaten wie zB Titel CSS Datei Links etc vorhanden lt head gt lt head gt o Body Der anzuzeigende Inhalt eines Dokuments mit Text Bilder Videos etc Ein exemplarisches Beispiel lt DOCTYPE html gt lt html gt lt head gt lt title gt Mein erstes HTML Dokument lt title gt lt head gt lt body gt lt p gt Hallo Welt lt p gt lt body gt lt html gt Code 2 W3C konformes HTML Grundger st Man gestaltet die Web Applikation mithilfe sogenannter CSS Dateien die man dezentral in das HTML Dokument einbindet 10 2 1 3 HTML5
95. ie Template Main und SQL Klasse 11 2 9 2 model Unterverzeichnis Model Beinhaltet das Header Modell welches auf jeder Seite zu finden ist 11 3 Front End Das Front End ist jener Teil der Applikation der f r das pr sentieren von Daten Texten Bildern Videos also jeder Information zust ndig ist Komponenten des Front Ends sind das Design die User Experience die Usability und viele weitere 11 3 1 Template Das index php ist das Grundskript in welches alle Inhalte dynamisch ber PHP und AJAX geladen werden Hinter dieser berlegung steckt sehr viel Erfahrung und Wissen ber die Technologie lt php session start error_reporting E ALL require_once var variables php require_once var model Header php require once var model Button php require once var model ButtonGroup php require once var controller Template php require once var controller SQL php require once var controller Login php db newSQL login newLogin Stemplate new Template EE Code 18 Einbinden aller MVC Module in das index php Skript Durchsucht man mit einem Browser ein Verzeichnis auf einem Webserver sucht dieser immer nach einer Datei die index hei t die Dateiendung ist erst einmal egal Das stellt f r das wichtigste Dokument sicher dass es auf jeden Fall zuerst ausgef hrt wird Die Dateiendung php deklariert die Datei als ein PHP f higes Skript welches durch den PHP P
96. ie erzeugt und im Browser ausgegeben 11 4 3 3 Tagesplan Der in Abb 39 dargestellte Tagesplan wird zu einem Gro teil durch den Query der in Code 55 zu finden ist generiert Dabei sind vor allem wieder der Index i des zugeteilten Posten ob der zugeteilte Mitarbeiter eine verantwortliche Rolle aus bt boss und die Start als auch Endzeit des Mitarbeiters Die Abfrage wird intelligent verarbeitet Ist der eingeteilte Arbeiter ein Mitarbeiter so ist das Attribut temp der Tabelle pf tagesplan zuteilungen NULL ist er jedoch nur ein Leiharbeiter erh lt temp den Wert 1 Es werden also oben nur zugeteilte Mitarbeiter gesucht an denen dann die zugeteilten Leiharbeiter angeh ngt werden http www php net manual de function imagecreatetruecolor php 05 03 2014 http www php net manual de function imagecopyresampled php 05 03 2014 http hu1 php net manual en function imagejpeg php 05 03 2014 12 05 2014 Umsetzung Seite 99 von 125 HTL Mistelbach Planify App Thoma Weise SELECT P ID P groupIndex as i P date Sa Color Q image IF ISNULL P boss boss as boss O firstname Re LD a8 BID OQ ID as elD O surname IF ISNULL P starttime SELECT starttime FROM D mitarbeiter WHERE ID Q I1D P starttime as starttime IF ISNULL P
97. ing Plans Norderstedt 2004 12 05 2014 Verzeichnisse Seite 6 von 125 HTL Mistelbach Planify App Thoma Weise Inhaltsverzeichnis Eid8sstattliche Erklanung citar een 2 Danks aguda ee 3 Kurztassung EE 4 Lee ea Ha 4 tel en ze Sea Es Ya rer A E IO 5 Einleitung picota 5 Literat rverzeichnis sasra BR He 6 alain TER 7 ees Ui le Ee EE 11 Tabellenverzeichnis u ee ein 12 ales Heli Te Caen 12 ee Deelen TEE 13 1 Projektteafi enassie ee 14 2 SZEIETASSUNd a een 15 3 Pr jektplaning tii aa el 16 3 1 Meilensteine rn re a ee an 16 Da e EE 16 4 Markt amp Konkurrenzanalyse au ende en ea ee 17 4 1 SWOT Analyse in Anlehnung an Wal04 uuu44444444444RRnnnnnnnnnn nennen 17 4 1 1 Unternehmensanalyse interne Analyse 17 4 1 2 Umfeldanalyse externe Anahyse 18 4 1 3 RM A a a enne 18 Ad BE WENO ci lt 20 4 1 5 Unternehmensstrategie definieren kee 20 ET 20 434 Vorteile ee 20 4 4 Nachteile iii a 20 5 leie e EE 21 5il Gr ndlag n RR dE 21 Sell Biel cotidiana 21 5 1 2 Sekund rziele in Anlehnung an Ma 7 22 5 1 3 o o UE EOI 24 12 05 2014 Verzeichnisse Seite 7 von 125 HTL Mistelbach Planify App Thoma Weise 52 e Tun 25 E Gelle Dee UE 26 TS O ee EE EI Er NE EN 28 Tale EVENS a esgeenleiiien 28 7 14 1 A 28 A A EE 28 Ausblick ee te ie 29 Bedienung a ea 30 A A re ee NR E 30 9 2 DIEHSIplan masse Re 30 9 2 1 Leih rbeiter hinzuf gen 31 E MVOchenplan ensure een 31 4
98. it PHP Das Skript startet gleich damit die Headerinformationen der PHP Datei zu modifizieren Ausgabetyp des Dokuments ist nun ein Bild im Format JPEG Nach dem definieren des Dateinamens filename abh ngig ob die Datei am Server gefunden wird wichtig f r Dienstplan wird eine tempor re Kopie des an der Stelle filename am Server liegenden Bildes gemacht und die selbstdefinierte Funktion image fix rotation darauf angewandt Das gro e Problem beim Aufnehmen von Bildern durch HTMLS5 ist n mlich dass mobile Ger te gedreht werden k nnen und damit auch die Fotos verdreht sind Jedoch speichert jedes Mobilger t in den sog EXIF Daten eines Bildes u a auch die Orientierung eben dieses Diese muss man nurnoch abfragen und das Bild dementsprechend um 90 oder mehr drehen Danach werden die Breite des gedrehten Bildes mit imagesx und die H he des gedrehten Bildes mit imagesy ausgelesen Das Bild soll nun nicht einfach verkleinert werden wie es der HTML Tag img machen w rde Es soll ein neues Bild erzeugt 12 05 2014 Umsetzung Seite 98 von 125 HTL Mistelbach Planify App Thoma Weise werden welches 100x100 Pixel gro ist ohne dabei zu verzerren Nach dem Ausrechnen der richtigen Faktoren wird ein neues Bild mit schwarzem Hintergrund in den vorher festgelegten Dimensionen erzeugt Dieses wird anschlie end mit dem beschnittenen verkleinerten und gedrehten Bild berschrieben Nun wird ein JPEG Bild aus dieser Kop
99. iteres Array enth lt definiert Dieses Sub Array enth lt Eigenschaften einer Seite im Templatesystem Der Wert des Indexes title legt den Titel der Seite im HTML Dokument Fest und erscheint in folgender Werkseinstellung Form Planify title http www php net manual en language oop5 decon php 19 02 2014 http si1 php net manual en function define php 05 05 2014 12 05 2014 Umsetzung Seite 83 von 125 HTL Mistelbach Planify App Thoma Weise Wichtig f r die Einbindung der Datei in das HTML Dokument mit template gt loadPage ist der Wert des Arrays am Index file Er Verweist auf ein Dokument im __ CONTENT Verzeichnis Ist der boolsche des Werts am Index nav gleich true besteht die M glichkeit einen Link auf dieses Dokument im Navigationsbereich des Dokuments vorzufinden Diese Einstellung ist aber sehr stark von den Berechtigungen des momentan angemeldeten Benutzers abh ngig Am Index permission findet sich ganz entgegen aller Vermutungen kein boolscher Wert oder ein Integer Stattdessen ist der Wert vom Datentyp String und ist das K rzel der Seite in der Berechtigungstabelle in der Datenbank 11 4 1 3 Funktion hasPermission Diese Funktion berpr ft mithilfe des K rzels am Index permission des Arrays pages ob der Benutzer das berhaupt im System angemeldet ist und ob dieser die Berechtigung hat die aufgerufene Seite berhaupt sehen zu d rfen Ist der Benutzer berechtigt die Seite aufzurufen wir
100. l des Protokolls geben mithilfe eines Webservers 10 2 6 3 phpMyAdmin Mit dem Softwaretool phpMyAdmin ist es f r Web Administratoren leichter geworden Zugang zu dem MySQL Dienst eines Web Servers zu erhalten und zu verwalten Das Tool ist ebenfalls kostenlos und komplett in PHP geschrieben In neueren Versionen ist besteht es mittlerweile aus PHP ca 79 8 JavaScript 19 6 und anderen Sprachen 0 6 Die Hauptgr nde um phpMyAdmin zu nutzen sind die gro e Community die gro e Stabilit t und das funktionelle User Interface mit dem man Tabellen Datenbanken Spalten Tupel Relationen Indizes Benutzer Rechte usw verwalten kann Au erdem ist das User Interfacehervorragend geeignet um SQL Statements auszuf hren und diese zu entwickeln testen Mit dem Serverpaket XAMPP ist bereits ein User im Werkszustand festgelegt der alle Rechte am MySQL Server genie t der root User Dieser kommt im Werkszustand ohne Passwort sodass man im Browser nur http localhost phpmyadmin aufrufen muss um sofort Zugriff auf oben genannte Funktionen zu haben 10 2 7 Workflow in Anlehnung an Zil13 Als Entwickler von Software hat man als Freiberuflicher oder als Agentur einen bestimmten Ablauf den man durchf hrt um ein Softwareprojekt m glichst schnell und kosteng nstig im Rahmen der veranschlagten Kosten abzuwickeln Dabei hat jeder Freelancer oder jede Agentur ihre eigenen Workflow der meist auf Erfahrungswerten Ressourcen und dem K
101. lanify Einstellungen Lieferanten kee 37 20 Planify Einstellungen Posten ito dao eu 37 21 Planify Einstellungen Konten nennen ke en 38 22 Zugriff auf Hardware mit HTMLS use ee ENNESCH 42 23 Formular in HTML5 mit placeholder Attributen ern nnnn 43 24 Tastaturen bei verschiedenen Eilngabetypen coocccccnnonoooccccnnccccnnnnnnnnncnnnncnnnnnnnns 44 25 Bootstrap e EE 47 26 Das Document Object Model DOM 444444444400nnnnnnnnnnnnnnnnnnnnnnnnnnn nn 48 27 Beispielanwendung unter Verwendung von JavaScript 22244ssnnennnnsnn nennen 49 28 Ablauf der Aufgabenstellung kee 51 29 Flussdiagramme HTTP Request li amp kombiniert mit AJAX Request re 52 30 Request Response Modell mit PHP PDarser 54 31 Formularverarbeitung mit PHP au ee 57 32 Tabelle sn eier 58 33 Anteil der Websener Technologien ENEE 61 34 Accessability von Elementen bei Touch Oberti chen 63 35 Gelungenes Design ber verschiedene Bildschirmaufl sungen 64 36 PhpStorm 7 0 Entwicklungsumgebung sssssssressessserererrrrreserrrnerrnnnrssrrrrrrnne 65 37 Wochenplan AA een he 76 38 DIAS area ee a E 77 Ee ET EE 80 40 Beispielabfrage aus Code 43 uuunessnssnnnnnnnnnnnnannnnnnnnnnnnnnnnnnnnnnnnnnnnannnnnnnnn nn 91 41 Flussdiagramim Dienstplan cio id 110 42 Flussdiagramm Einstellungen AAA 111 12 05 2014 Verzeichnisse Seite 11 von 125 HTL Mistelbach Planify App Thoma Weise Abb 43 Ab
102. lement die passende Mitarbeiterzahl um 1 erh ht am betreffenden Posten function tp employee count S ftagesplan ul posten ul employees 1i html 0 tagesplan li eitem each function var e ftagesplan ul posten eq this parent index find ul employees li eq parseInt this data pid 111 1 e html parseInt e html IO 1 Ek D Code 32 JavaScript tp_employee_count Funktion Das in Code 33 zu findende Skript behandelt die Aktion die man einleitet wenn man ein verschiebbares Element im Tagesplan verschiebt und dann losl sst Diese Elemente sind sowieso nur auf den daf r vorgesehenen Fl chen fallen zu lassen andersrum w rden sie einfach nur zur ckgesetzt werden Die folgende i f else Bedingung regelt die Animation beim loslassen So wird wenn das Element auf einem Posten fallen gelassen wird einfach die Farbe jedes Postens auf Wei zur ckgesetzt und dann auf dem aktuellen Posten die Rahmenfarbe des Elements kurz animiert 12 05 2014 Umsetzung Seite 80 von 125 HTL Mistelbach Planify App Thoma Weise function tp drop event ui var e this find 1i ul employees 1i eq ui draggable data pid 1 var color ui draggable css border right color var temp ui draggable data pid 4 1 0 var data eid ui draggable data eid pid this index date tagesplan data date tempe temo hi
103. lip Ehrenfellner und Christoph Peter von der Internetkultur die uns mit Insiderwissen versorgt haben e DI Martin Panzer der uns bei der Kundenbetreuung beraten hat 12 05 2014 Danksagung Seite 3 von 125 HTL Mistelbach Planify App Thoma Weise Kurzfassung Das Ziel dieser Diplomarbeit war es eine Anwendung Software f r unseren Partner Heiss amp S GmbH zu entwickeln Die Anwendung kann auf allen Plattformen verwendet werden die einen modernen Webbrowser installiert haben Mithilfe dieser Anwendung kann unser Partner das Unternehmen verwalten seine Mitarbeiter effizienter einsetzen und den Produktionszyklus besser berwachen F r jede Abteilung kann ein Tagesplan mit allen Arbeitsschritten ausgedruckt werden auf dem der verantwortliche Mitarbeiter unterschreiben muss damit nachvollziehbar ist wer wann was produziert hat F r den Anwender besteht die Anwendung im Prinzip aus f nf Teilen e Unter Einstellungen werden alle Mitarbeiter Produkte und Lieferanten definiert e Im Dienstplan wird definiert welche Mitarbeiter zur Verf gung stehen e Unter Produktion k nnen dann die von dem Anwender der Anwenderin definierten Produkte in Form einer Bestellung aufgegeben werden e Im Wochenplan k nnen diese Auftr ge an bestimmten Tagen eingeteilt werden e Diese erscheinen dann im Tagesplan detailliert wo Arbeitsschritte und Mitarbeiter zwischen Abteilungen verschoben werden k nnen Dieser Tagesplan ist anschlie e
104. n Erfolg des urspr nglich firmenintern gestarteten Projekts Auf die Diplomareit bezogen war es m glich den Fokus der Programmierung weniger auf das Design der Elemente zu setzen sondern auf die Funktionalit t der Anwendung Das hei t man muss sich nur sehr wenig um das Design einer Web Applikation k mmern das ist ein enormer Vorteil gegen ber Projekten ohne CSS Framework Die Farben und Gr en der Elemente harmonieren automatisch sehr gut miteinander 10 2 3 JavaScript In allen modernen Web Applikationen lassen sich heute Teile von JavaScript finden Es ist eine Skriptsprache die haupts chlich beim Client interpretiert und ausgef hrt wird Es ist bereits in jedem modernen Webbrowser integriert und muss nicht erst gekauft oder installiert werden 10 231 DOM Um JavaScript ben tzen zu k nnen muss man das Document Object Model DOM verstanden haben Beim Laden eines HTML Dokuments vom Server erstellt der Browser des Client das DOM das eine Gitterartige Beschreibung des Aufbaus des Dokuments ist http getbootstrap com about 14 01 2014 http getbootstrap com 29 04 2014 http www w3schools com s is_htmldom asp 29 01 2014 12 05 2014 Theorie Seite 47 von 125 HTL Mistelbach Planify App Thoma Weise Document Root element lt html gt Element lt head gt Element lt body gt Element lt h1 gt Text Text Text My title my link My header Abb 26 Das Document O
105. n FIRST_DAY OF WEEK gibt im Grunde genommen nur die Berechnung der DATE SUB date argl int arg2 Funktion aus Diese Nimmt das mitgelieferte Datum arg1 und geht um arg2 Schritte zur ck in diesem Fall um genau so viele wie der Tagesindex des mitgelieferten Tages ist also der WEEKDAY date argl1 Index DELIMITER CREATE FUNCTION FIRST DAY OF WEEK day DATE DETERMINISTIC D ETURNS date RETURN SUBDATE day WEEKDAY day DELIMITER Code 45 Funktion FIRST_DAY_OF_WEEK in MySQL 12 05 2014 Umsetzung Seite 91 von 125 HTL Mistelbach Planify App Thoma Weise Insbesondere die Anweisung DELIMITER ist neu gewesen deren Funktion war jedoch schnell gelernt und angewandt Mit DELIMITER ver ndert man das Begrenzungszeichen Clientseitig von Standard in um die ganze Funktion in ein Statement zu bekommen 2 SELECT DATEDIFF P date FIRST DAY OF WEEK date Se i P ID 0 grop 1 as pID FLOOR TIME_ TO SEC IF P endtime IS NULL Q endtime P endtime TIME TO SEC IF P starttime IS NULL Q starttime P starttime 60 as total FROM pf_tagesplan zuteilungen P JOIN of mitarbei
106. n button der dann das JavaScript ber einen sog Event Handler also eine definierte Funktion beim Interagieren mit dem Button aufrufen soll Dazu wird lediglich die id des button ben tigt var obj document getElementById sbmtBtn obj addEventListener click calc false function calc var start document getElementByld start var end document getElementByld end start new Date 01 01 2014 start value getHours end new Date 01 01 2014 end value getHours alert Du wirst end start Stunden arbeiten Ohne Mittagspause Code 9 L sung in JavaScript Wie in Code 9 zu sehen ist wird dem Objekt obj ein sog EventListener zugewiesen der beim Klicken auf obj die Funktion calc aufruft Diese berechnet die Start amp Endzeit des Mitarbeiters anhand der Differenz der absoluten Stunden eines beliebigen Datums Hierbei sei noch gesagt dass der Verweis auf common js erst am Ende des HTML Dokuments stehen darf steht er im head Bereich des HTML Dokuments wird das Skript vor dem Interpretieren des Inhalts also des DOMs aufgerufen und somit ist ein Interagieren zB dem Hinzuf gen eines EventListeners unm glich document ready function S sbmtBtn on click function var start start val var end end val start new Date 01 01 2014 start getHours end new Date 01 01 2014 end getHours alert Du wirs
107. n gab es dann weitere Treffen mit unserem Kunden um zu verhindern dass das Projekt in eine falsche Richtung verl uft Am 17 November 2013 wurde dann die erste Version der Software dem Kunden zum Testen bergeben Es fand auch gleich eine Unterweisung statt Nach einigen kleinen nderungen bzw Anpassungen wurde dann am 10 Februar 2014 die Software mit einer Bedienungsanleiung bergeben und somit das Projekt abgeschlossen 12 05 2014 Entstehungsgeschichte Seite 27 von 125 HTL Mistelbach Planify App Thoma Weise 7 Gelerntes Wenn wir dieses Projekt jetzt noch einmal durchf hren w rden w rden wir die Projektplanung um vieles besser machen indem wir vor allem genauer und detailierter planen Das Problem bei diesem Projekt war dass uns viele Probleme die bei einem solchen Projekt auftreten k nnen noch garnicht bewusst waren Auch im Pflichtenheft w rden wir die Anforderungen viel genauer definieren damit keine M glichkeiten offen gelassen werden Ein Problem das dann auftreten kann ist zum Beispiel dass der Kunde immer wieder nderungen vornehmen will welche im Pflichtenheft nicht genau dokumentiert wurden Jetzt w rden wir von unserem Kunden im Vorfeld schon viel genauere Details erfragen 7 1 Events 7 1 1 berall App Kongress Der berall App Kongress im METAStadt 1220 Wien hat unserer App und unserem Kunden sehr viel Wissen ber die Konkurrenz Verfahren in der Entwicklung und generell mehr Einblick in
108. namische Anzeige von Inhalten auf Ger ten verschiedener Gr e und Bildschirmaufl sung Die aktuelle Version ist CSS3 und steckt offiziell seit 2000 in der Entwicklung fest was bedeutet dass eine Standardisierung durch das W3C noch nicht stattgefunden hat Dennoch unterst tzen viele moderne Browser bereits viele der f r die Fertigstellung von CSS3 geplanten Module Gro teils unterst tzte Module sind zum Beispiel Shttp de selfhtml org css intro htm 14 01 2014 http www w3 org Style CSS current work 14 01 2014 12 05 2014 Theorie Seite 44 von 125 HTL Mistelbach Planify App Thoma Weise o CSS Color Level 3 Bisher konnte man Farben in CSS durch sogenannte color keywords zB black oder durch ihren hexadezimalen Wert zB 000000 definieren Hier ergibt sich eine Einschr nkung welche durch CSS Color Level 3 gro teilig aufgehoben wird Man erweitert um das RedGreenBlue RGB und das HueSaturationLightness HSL Modell Selectors Level 3 Erweiterung der Selektoren und Pseudoklassen aus CSS2 o Media Queries Hauptverantwortlich f r den Umstand dass ein und dasselbe HTML Dokument auf verschiedenen Ger ten optimal anhand ihrer Bildschirm dimension proportion etc dargestellt wird Es wurde CSS Version3 verwendet da sie viele Neuerungen mit sich bringt und die Web Applikation wesentlich ansehlicher macht Au erdem ist die Unterst tzung durch die Browser schon sehr fortgeschritten sodass man viele Funktionen bereits
109. nd ausgedruckbar Im Zuge dieser Diplomarbeit besch ftigen wir uns auch mit der Weiterentwicklung und der Vermarktung der Software Abstract The aim of this diploma thesis was to develop an application software for our partner Heiss amp S GmbH The software can be used on all platforms with a modern web browser With this software application our partner is able to manage his business He uses this software to fit in his employees more efficient and to monitor the production cycle For each section a plan can be printed for every day with every work step where the responsible employee has to sign This makes it possible to trace who has produced which product at what time The software basically consists of five parts Under settings all employees products and suppliers can be defined In the work plan a list of all available employees is shown Under production the predefined products can be commissioned In the week plan these products can be assigned to days In the detailed day plan the work steps and employees can be displaced between the divisions This plan can be printed then In this thesis we also deal with the development and marketing of our software 12 05 2014 Kurzfassung Abstract Seite 4 von 125 HTL Mistelbach Planify App Thoma Weise Vorwort Der Titel unserer Diplomarbeit ist Planify App weil sie sich vorrangig mit der Planung eines Unternehmens mit Software besch ftigt welche vorrangig auf mo
110. nd wie es mit der Konkurrenz aussieht Im Wesentlichen haben wir dabei nichts anderes gemacht als eine SWOT Analyse 4 1 SWOT Analyse in Anlehnung an Wal04 Die SWOT Analyse ist ein Hilfsmittel des strategischen Managements Sie ist auch die Grundlage vieler Marketingstrategien SWOT steht f r Strengths Weaknesses Opportunities und Threats Also ist die SWOT Analyse eine Analyse von St rken Schw chen Chancen und Risiken Die internen St rken und Schw chen werden externen Chancen und Risiken gegen bergestellt Das Ziel ist es die Unternehmensstrategie zu analysieren Dazu geh rt nicht nur das analysieren sondern auch die folgenden Ver nderungen und Konsequenzen die aus dieser Analyse hervorgehen Die Analyse kann in mehreren verschiedenen Unternehmensbereichen eingesetzt werden im Zusammenhang mit der Produktpolitik dem Absatzpotential oder der Standortanalyse Die SWOT Analyse besteht aus 5 Schritten e Unternehmensanalyse interne Analyse e Umtfeldanalyse externe Analyse e Kombination e Bewertung e Definition der Unternehmensstrategie 4 1 1 Unternehmensanalyse interne Analyse Die Unternehmensanalyse wird auch interne Analyse oder St rken Schw chen Analyse genannt Hierbei werden die internen St rken und Schw chen eines Unternehmens erkannt und aufgelistet Es werden das Mitarbeiterteam die Produkte und die Produktion dieser betrachtet Die Schw chen und St rken eines Untern
111. nstellungen 2 da loa lea 108 EE Ee ee ee E 108 L aan ee ee een 108 Lieferanten a 108 12 05 2014 Verzeichnisse Seite 9 von 125 HTL Mistelbach Planify App Thoma Weise ED eebe 108 STE WEE 109 Verpflichtungen EE 109 ll WErkverlrag essen eig 109 IN Ablaufdiagrammen nasse es a a 110 IV 2 Zeiterfassung tes as al en 122 V DVD RE 125 12 05 2014 Verzeichnisse Seite 10 von 125 HTL Mistelbach Planify App Thoma Weise Abbildungsverzeichnis Abb Abb Abb Abb Abb Abb Abb Abb Abb Abb Abb Abb Abb Abb Abb Abb Abb Abb Abb Abb Abb Abb Abb Abb Abb Abb Abb Abb Abb Abb Abb Abb Abb Abb Abb Abb Abb Abb Abb Abb Abb Abb 1 Diagramm Zo enel 15 2 OT Maita ee een 19 3 Infografik zum kundenmanagemenmt nn 21 4 Musterbeispiel f r gute Kundenintegration nenn 23 5 Erste Skizzierungen beim Kundentreffen kee 26 6 v l n r Martin Weise Martin Thoma vor dem Ars Electronica Center in Linz 29 A era 30 8 Planiiy Dienistplan EE 31 9 Planiiy Leiharbeiter u 31 10 Planify eene EE 32 1 1 GE ege GETT 33 12 Blan ty Produkten rennen ee 33 13 Planify Spezialbestellung EE 34 14 Planify Einstellungen Pr d kte 22 u ideen 34 15 Planify Einstellungen Neues Produkt Initialansicht gt 35 16 Planify Einstellungen Produktoruppen nn 35 17 Planify Einstellungen Mitarbeiter 36 18 Planify Einstellungen Leiharbeiterfirmen nee nnnnnnnnnnnnnnnnen 36 19 P
112. nt interpretiert und ist eine Auszeichnungssprache die verwendet wird um Dokumente im World Wide Web zu strukturieren Dabei wird immer in Klartext geschrieben und auf Kontrollstrukturen wie es Bedingungen Schleifen oder Variablen sind verzichte HTML Dokumente sind Plattformunabh ngig und ben tigen einen Browser um aus dem Quellcode ein nutzbares Web Dokument zu generieren HTML wird von dem W3C standardisiert und stetig verbessert Die Aktuelle Version tr gt die Nummer 4 01 und wird in Entwicklerkreisen nur noch eingeschr nkt verwendet Sei06 Man verwendet den inoffiziellen Standard HTML5 der auf experimenteller Basis viele Funktionen unterst tzt wof r die man sonst andere Sprachen wie beispielsweise JavaScript ben tigen w rde 10 2 1 1 Das W3C Das Ziel des World Wide Web Consortium ist es Protokolle und Richtlinien zu entwickeln die ein langfristiges Wachstum des Internets sicherstellen Dabei ist es den http gd tuwien ac at study hrh glossar 1 2 17 htm 03 02 2014 12 05 2014 Theorie Seite 39 von 125 HTL Mistelbach Planify App Thoma Weise Mitgliedernwichtig dass Menschen unabh ngig ihrer verf gbaren Hardware Software Netzwerk Infrastruktur Sprache Kultur Heimat physischen oder mentalen F higkeiten das Internet f r Kommunikation Kommerz und der M glichkeit Wissen auszutauschen ben tzen k nnen Jedes Mitglied muss sich an folgende Grunds tze halten e Entscheidungen werden unter Einhaltung v
113. nternenmensumfeld aufnehmen und interpretieren Unter Unternehmensumfeld versteht man die Kunden also den potenziellen Markt die Zulieferer des Unternehmens und Institutionen die Erkenntnisse ber neue Technologien liefern k nnen Weiters k nnen hier die Weiterentwicklungspotenziale neuer Technologien und die Grenzen bekannter Technologien in Erfahrung gebracht werden Bei der Konkurrentenanalyse werden die Aktivit ten von relevanten Mitbewerbern in dem Sektor des eigenen Unternehmens untersucht Zuerst werden die Konkurrenten oder Wettbewerber ausgew hlt Anschlie end werden die Beobachtungsthemen festgelegt Dann folgt die Informationsgewinnung mit anschlie ender Speicherung der Informationen Zum Schluss werden diese Informationen ausgewertet und eventuell mit den Ergebnissen fr herer Analysen verglichen 4 1 3 Kombination Wenn die Unternehmensanalyse und die Umfeldanalyse abgeschlossen sind kommt es zur Gegen berstellung dieser Ergebnisse F r diese Gegen berstellung wird eine sogenannte Vier Felder Matrix verwendet In jedes Feld wird einer von vier Teilbereichen mit Strategiem glichkeiten eingetragen Die vier Teilbereiche sind St rken Chancen St rken Risiken Schw chen Chancen amp Schw chen Risiken Hier werden immer die Ergebnisse einer internen Analyse mit denen einer externen Analyse verglichen Die Chancen k nnen auch als M glichkeiten und die Risiken auch als Bedrohungen bezeichnet werden 12 05 2014 Markt am
114. oete emer JO data json data else NUR UPDATE ajax POSI ROSTET url ajax roster update employees php data json data y ui draggable css left 0 TOPO appendTo S this finish css background fff effect highlight color ui draggable css border right colori 1000 dp_calc time Code 31 JavaScript dp_drop Funktion Zuerst wird in Code 31 das Datenobjekt gef llt Danach wird bepr ft ob am Zielort bereits ein Mitarbeiter mit denselben Informationen existiert Wird der Mitarbeiter zu einem Posten neu zugeteilt wird das PHP Skript roster add employees php Mittels AJAX aufgerufen Andernfalls wird die Zuteilung des Mitarbeiters ber einen AJAX Request an roster update employees php geschickt Anschlie end werden noch die Stilinformationen des Elements zur ckgesetzt und eine Hintergrund Animation am Ziel Container vollf hrt 11 3 3 3 Tagesplan Der Tagesplan ben tigt 6 verschiedene Funktionen bliche Funktionen sind die Verschiebe aktionen der Mitarbeiter zwischen den Posten und der Liste der Nichteingeteilten amp der Produktschritte zwischen den Posten 12 05 2014 Umsetzung Seite 79 von 125 HTL Mistelbach Planify App Thoma Weise Tagesplan Abb 39 Tagesplan Der Ablauf in Code 32 ist wie folgt Es werden die Zahlen aller Mitarbeiter die bunten Vierecke unten an jedem Posten auf O gesetzt Nun wird einfach f r jedes E
115. on JSON parse msg document find ul itemlist egqg element index html for var i 0 i lt json length i document find ul itemlist eq element index append if json length lt 0 element find i icon chevron down removeClass rotate SONO DRAGGABLE MACHEN EE this DE Code 30 JavaScript dp_show_employees Funktion Die Funktion liefert in Code 30 automatisch ein Objekt event mit F r die Funktion interessant ist die Eigenschaft event type weil diese Auskunft ber die Aktivierungsart gibt Wird das Zirkumflex angeklickt und es zeigt die verf gbaren Mitarbeiter werden diese versteckt und das Zirkumflex wird wieder normal gedreht Werden diese nicht gezeigt so wird es gedreht In jedem Fall werden die noch fehlenden Mitarbeiter geladen und in dem Platzhalter angezeigt 12 05 2014 Umsetzung Seite 78 von 125 HTL Mistelbach Planify App Thoma Weise function dp drop event ui var data date this data date eid parselnt ui draggable data eid null id parselnt ui draggable data id null coords ui draggable parent index ui draggable index if S this find li item data eid ui draggable data eid data pid ui draggable data pid length 0 if ui draggable parent parent index 0 NEU S ajax 1 Era MEROS male Vejer r
116. on Gerechtigkeit und Fairness unter den Teilnehmern gef llt Keine Partei wird bevorzugt oder f hrt die Entwicklung der Standards an e Bei allen Prozessen werden alle Ansichten ber cksichtigt und k nnen angesprochen werden sodass eine bereinstimmung ber verschiedene Interessen gefunden werden kann e Wenn ein Standard vorgeschlagen wird muss dieser ffentlich bekannt gemacht werden ebenso wie die Entwicklungsaktivit ten Umfang der durchzuf hrenden Arbeiten und die Bedingungen f r die Teilnahme an den Arbeiten Materialien wie zum Beispiel Aufzeichnungen von Entscheidungen m ssen leicht zug nglich sein und bereitgestellt werden Es werden Zeiten vorgesehen in denen die ffentlichkeit ber den Vorschlag diskutieren kann e Die Normungsaufgaben werden nicht ausschlie lich von einer Person Gesellschaft oder Interessengruppe dominiert e Die Standardisierungsprozesse sind offen f r alle interessierten Parteien Die beschlossenen Normen des W3C werden implementiert f r alle zug nglich gemacht Alle Standards des W3C sind freiwillig umzusetzen der Erfolg wird durch den Markt bestimmt 10 2 1 2 Syntax Die Syntax von HTML kann man sehr vereinfacht als Strukturierung von Daten innerhalb eines Dokuments bezeichnen Sie macht im Grunde genommen nichts anderes als Daten in bestimmte Muster zu packen und diese dann dem Browser zu bergeben Diese Muster werden Tags genannt und haben blicherweise die Form lt htm1 gt lt
117. orie Seite 54 von 125 HTL Mistelbach Planify App Thoma Weise boolschen true false Wert oder keinen null Wert zuzuweisen Neben diesen einfachen Variablen ist es erlaubt eine Art Liste oder Karte zu definieren Das nennt man Array und ist die bevorzugte Art eine gr ere Menge Daten zu speichern lt php Saumber lay zani Setters Sal NOE Scollection array Hallo 42 Welt false Array EE Code 14 Variablendeklarationen Die Syntax von PHP ist sehr an die von C angelehnt jedoch ist es in PHP nicht notwendig den Datentyp von Variablen zu definieren Der PHP Parser sucht sich automatisch den passenden Man definiert also einen Integer Wert genau gleich wie einen vom Typ String was man in Code 14 gut erkennen kann Eine wichtige Funktion f r die Entwicklung in PHP ist var_dump Diese gibt n mlich jede Art von Variablen aus und sagt einem welchen Datentyp eine jede besitzt Zusammen mit dem HTML Tag lt pre gt lt pre gt ergeben die Beiden eine m chtige Kombination mit der schnell amp bersichtlich entwickelt werden kann Das Beispiel aus Code 15 zeigt eine typische Fehlerbehebungs Situation in der man den Inhalt eines Arrays ausgibt lt php collection array Hallo 42 Welt false var _dump collection ES EE array 4 0 gt Sering so Aci BEI int 42 2 gt string 4 Welt 3 gt bool false PE 2 gt Code 15 Hallo Welt Beispiel in PH
118. p Konkurrenzanalyse Seite 18 von 125 HTL Mistelbach Planify App Thoma Weise Interne Analyse SWOT Analyse St rken Strengths Schw chen Weaknesses Chancen Opportunities 030 x m Gefahren Threats A n a y s e Abb 2 SWOT Matrix Im ersten Feld der Vier Felder Matrix oben werden die internen St rken mit den externen Chancen oder M glichkeiten verglichen Ein Unternehmen sollte mit den vorhandenen St rken die bestehenden Chancen nutzen zum Beispiel mit einem bestehenden Produkt einen neuen Markt erschlie en Im zweiten Feld werden die internen Schw chen den externen Chancen oder M glichkeiten gegen bergestellt Hier sollen die eigenen Schw chen beseitigt werden um dann die bestehenden Chancen n tzen zu k nnen Zum Beispiel kann ein neues Produkt entwickelt werden wo die Schw chen dann nicht mehr vorhanden sind um den Kundenanforderungen gerecht zu werden Im dritten Feld werden die internen St rken den externen Risiken oder Bedrohungen gegen bergestellt Hier soll ein Unternehmen mit den eigenen vorhandenen St rken die Gefahren abwehren die auf das Unternehmen zukommen k nnen Zum Beispiel kann das Unternehmen mit der Werbung f r ein bestehendes Produkt einen neuen Mitbewerber zur ckdr ngen Im vierten und letzten Feld werden die internen Schw chen mit den externen Risiken oder Bedrohungen verglichen Hier muss das Unternehmen seine eigenen Schw chen beseitigen um bei drohenden Gefa
119. r GE ENDE NAVIGATION UNABH NGIG VON LOGIN WIRD DER INHALT GELADEN Stemplate gt loadPage ENDE if isset _SESSION id amp amp empty SESSION id echo lt div gt Code 22 Template System des index php Ist der Benutzer siehe Code 22 ber das Login Formular im System angemeldet wird das richtige Template im body Bereich ausgegeben welches ein Logo und eine Navigation vorsieht Dazu wird in der Datenbank nach den Berechtigungen der 5 Hauptmodule gefragt und im Array db gt row 0 gespeichert Nun wird f r alle im System angelegten Seiten selektiert ob diese berhaupt in der Navigation erscheinen sollen Sitem nav true man pr ft bei boolschen Werten und null immer auf den Datentyp und nicht auf deren Wert entspr In der Datenbank wird die Erlaubnis ein Modul verwenden zu k nnen mit dem Wert 1 festgelegt Es wird also auf Wertegleichheit mit 1 gepr ft bei einer bereinstimmung wird der entsprechende Listenpunkt ausgegeben Dem folgt ein Logout Link Der aber wohl interessanteste Punkt ist die Einbindung des Inhalts der aufgerufenen Seite dieser wird ber die Klasse Template siehe 11 4 1 mit der Funktion loadPage geladen siehe 11 4 1 5 http www w3schools com TAGS tag_script asp 19 02 2014 12 05 2014 Umsetzung Seite 71 von 125 HTL Mistelbach Planify App Thoma Weise 11 3 2 main js Datei function DOM Ready stayInWebApp a document
120. r effiziente Form Daten eines Objektes darzustellen wie man in Code 13 eindeutig sehen kann DNS name John Doe Ao MOSSOS Maat ar 2073021851 Code 13 Ein JSON Objekt Das JSON Objekt aus Code 13 wird von zwei geschwungenen Klammern umschlossen und enth lt 4 Eigenschaften denen entweder ein String Wert zugewiesen wird oder ein Array das von zwei eckigen Klammern umschlossen wird 10 2 4 PHP Entspricht das Dokument den Vorstellungen des Entwicklers Kunden gilt es als n chsten Schritt eine solide Logik zu schaffen Daf r wird die Serverseitige Skriptsprache PHP Hypertext Preprocessor herangezogen Um PHP auf einem Webserver lauff hig zu machen muss zuerst eine Installation vorgenommen werden falls das noch nicht geschehen ist Im Kapitel XAMPP wird n her darauf eingegangen 10 2 4 1 PHP Parser Mit PHP ist es m glich webbasierte Dokumente wie zum Beispiel die eingangs erw hnten HTML Dokumente dynamischer zu gestalten Man kann sie hierf r ganz leicht in Sinnabschnitte teilen und danach wieder an die richtigen Stellen einf gen Das geht mit http www w3schools com ajax ajax_xmihttprequest_send asp 20 02 2014 Shttps api query com Query ajax 20 02 2014 http www json org 20 02 2014 12 05 2014 Theorie Seite 53 von 125 HTL Mistelbach Planify App Thoma Weise der Funktion include file php und dient der Vermeidung von Redundanzen also doppelten Anweisungen D
121. rderung Die erste Anweisung sagt dem Browser dass es sich um ein text html basiertes HTML Dokument handelt dessen Bytes mit ut 8 umzuwandeln sind Die Anweisung viewport bestimmt wie das Dokument auf mobilen Endger ten dargestellt werden soll Hier wird dem Browser gesagt er soll die Breite des Dokuments auf die maximale Bildschirmbreite des Ger ts device width einstellen Zudem soll das Dokument in 1 facher Vergr erung dargestellt werden und eine Vergr erung durch den Benutzer nicht zul ssig sein user scalable no Diese Einstellung ist ziemlich popul r und bei manchen Webentwicklern verp nt weil sie den Benutzer bevormundet und ihm die Freiheit nimmt das Dokument nach seinem Belieben zu skalieren Spezieller Erkl rung bedarf es noch den app1e Attributen Mit der Anweisung apple touch fullscreen ist es m glich die Web Applikation vorausgesetzt man betrachtet das Dokument mit einem Apple Mobilger t und startet es vom Homescreen ohne Browsersteuerungen zu starten Diese Notation wurde durch apple web app capable ersetzt Die Web Applikation hnelt dann sehr einer nativen OS App Die Anweisung apple mobile web app status bar style bestimmt die Farbe des Statusleiste wenn man die Web Applikation ber den Homescreen im Vollbildmodus startet Der Wert wurde auf black ge ndert um sicherzustellen dass die Farbe der Statusleiste auch weiterhin schwarz bleibt http de selfhtml org htmi kopfdaten meta htm 17 02
122. rkauf t tigt genau und n tzt dieses f r k nftige Kaufabsichten Es soll eine Bindung die aus rationalen und emotionalen Aspekten besteht geschaffen werden Wochenplan Mo 28 Di 29 Mi 30 Do 01 Fr 02 Sa 03 So 04 0 0 0 0 0 0 0 Weiteres Produkt Testprodukt Wochenplan Kalenderwoche 18 Mo 28 Di 29 Mi 30 Do 01 Fr 02 Sa 03 So 04 Bestellungen 10 630 10 0 0 0 0 1 El Ei EJ Hallo Huhu Gehts estp t Abb 4 Musterbeispiel f r gute Kundenintegration 12 05 2014 Kundenmanagement Seite 23 von 125 HTL Mistelbach Planify App Thoma Weise 5 1 3 Aufbau 5 1 3 1 Strategisches CRM Man kann das strategische CRM als Teilbereich eines Marketingkonzepts verstehen der Kunde nimmt dabei eine zentrale Rolle ein weil s mtliche Bereiche des Unternehmens auf ihn abgestimmt werden Es wird die Beziehung und das Wechselspiel zwischen Markt und Unternehmen analysiert Es werden Potenziale erkannt und entsprechende Strategien entwickelt Die Auswirkungen dieser Strategien betreffen das ganze Unternehmen und sind langfristig orientiert 5 1 3 2 Analytisches CRM Die aus einer gr ndlichen Analyse stammenden Daten sind wichtig f r ein CRM System Sie m ssen gesammelt und ausgewertet werden Sie dienen als Entscheidungsgrundlage f r das Regeln von Kundenbeziehungen Die Menge der gesammelten Daten ist irrational wenn die Quantit t der Daten ihre Qualit t bersteigt und man aus diesen nichts mehr herausles
123. rnen 12 05 2014 Speichern ma dr cken Eingaben pr fen NEIN b Fehlermeld ung Papierkorb Posten dr cken entfernen Abb 50 Flussdiagramme Posten Anhang Thoma Weise R ckmeldu Posten ng speichern Seite 116 von 125 HTL Mistelbach Planify App Thoma Weise Zur ck gt Start Produkte dr cken Bearbeiten Papierk rbe em Papierk rbe dr cken sichtbar hinzuf gen JA Papierk rbe entfernen L Start Produkte 1 Speichern m R ckmeldu D Produkt dr cken NFC gt vi ng gt speichern tai Produ Produkt Fenster NEIN kt Fehlermeld ung Duplizieren R ckmeldu 7 pirado A Eingaben pr fen na gt NEIN Fehlermeld ung Produkt dupliezieren Start Produkte T Element entfernen Papierkorb D dr cken di Abb 51 Flussdiagramm Produkt 12 05 2014 Anhang Seite 117 von 125 HTL Mistelbach ta Produ kte Produkte Fenster 12 05 2014 Planify App Thoma Weise Men nde Button Start Men Produ dr cken kte Mitarbeiter nog Dan Start Mitarbeiter Produ dr cken kte 1 Ende SEENEN Start Lieferanten Produ dr cken Posten dr cken Konten dr cken Produktgru ppen dr cken Produkt anklicken Anhang
124. rojektteam Seite 14 von 125 HTL Mistelbach Planify App Thoma Weise 2 Zeiterfassung Name Zeit in Stunden Martin Thoma 207 5 Martin Weise 240 5 Zeit Gesamt 448 Tabelle 1 Tabellarische Zeiterfassung Zeitverteilung Sonstiges 12 Software Dokumentation 41 23 Planung 24 Abb 1 Diagramm Zeitverteilung Wie in Abb 1 zu sehen ist wurde die meiste Zeit in die Entwicklung der Software gesteckt Das hat zum Teil damit zu tun dass die Planung der Software im Vorhinein schlecht realisierbar war zum Teil aber nat rlich damit dass die Planung mangelhaft in der Ausf hrungsqualit t war W rden wir vor ein vergleichbares Projekt gestellt werden und m ssten dieses von der Planung bis zur Abgabe realisieren w ren nur die H lfte der Software Zeit von n ten weil wir bei der Erstellung dieser Software gelernt haben Wir w rden unser Hauptaugenmerk auf komplett andere Dinge legen und w rden anders an den Kunden herantreten sodass dieser kompetenter Beraten wird und uns durch qualitativ bessere Aussagen besser unterst tzen w rde 12 05 2014 Zeiterfassung Seite 15 von 125 HTL Mistelbach 3 Projektplanung 3 1 Meilensteine Planify App Thoma Weise Ist Soll Beschreibung 16 05 2013 01 06 2013 Pflichtenheft unterschrieben 02 04 2013 01 07 2013 Design Konzeptentwurf pr sentieren 18 08 2013 01 09 2013 Prototyp fertigstellen
125. rt Tabelle 6 Pflichtenheft Projektcharakteristika 12 05 2014 Anhang Seite 105 von 125 HTL Mistelbach Planify App Thoma Weise Lieferumfang Dokumentation In Text und Bildern Schulung Pers nliche Schulung Abnahme Durch erf llen des Pflichtenhefts Service Wartung Keine Wartung Quellcode wird mitgeliefert Quellcode Zur eventuellen Fehlerbehebung Tabelle 7 Pflichtenheft Lieferumfang Einflussfaktoren Allgemein Durch eventuelle l ngere Krankenst nde des Teams und oder des Betreuers kann sich die Entwicklungsdauer erheblich verz gern Im Zeitalter digitaler Medien ist eine digitale Kommunikation zwar prinzipiell m glich dennoch kann keine Verz gerung ausgeschlossen werden Funktion amp Design Es gibt mehrere Accounts damit nicht jeder Mitarbeiter auf alle Daten zugreifen oder alle Daten ndern kann Mit Chef Account k nnen alle Daten ge ndert und auf alle Daten zugegriffen werden mit dem Mitarbeiter Account kann man nicht alle Daten ndern aber zum Beispiel neue Bestellungen eingeben oder den Dienstplan verwalten Bei Verlust der Eingabedaten eines Benutzers wird vom System eine Funktion bereitgestellt die neue Zugangsdaten zur Verf gung stellt Wenn die Anwendung gestartet wird kommt man immer auf den Wochenplan Es gibt 4 Tabs auszuw hlen Dienstplan Wochenplan Produktion Einstellungen Farbliche Hervorhebungen Mitarbeiter Die Mitarbeiter werden nach Berufsgruppen far
126. serem Kunden handelt es sich um die Konditorei Heiss amp S GmbH aus Leitsberg 3033 Altlengbach Unser Ansprechpartner seitens der Heiss amp S GmbH Christian Heiss ist zuvor an den Projektbetreuer herangetreten und hat ihn gebeten dieses Projekt mit einer Sch lergruppe zu verwirklichen Nachdem dieses Projekt Gestalt annahm setzten wir uns mit Herrn Heiss in Verbindung und vereinbarten ein erstes Treffen Bei diesem Treffen zeigte er uns wie derzeit die Arbeitsplanung in seinem Betrieb aussieht und welche Vorstellungen er von dem ganzen Projekt hat Er verschaffte uns auch Einblicke in die Abl ufe im Betrieb damit wir uns von seinen Vorstellungen ein Bild machen konnten Dieses erste Treffen fand am 21 Februar 2013 in der HTL Mistelbach statt Abb 5 Erste Skizzierungen beim Kundentreffen 12 05 2014 Entstehungsgeschichte Seite 26 von 125 HTL Mistelbach Planify App Thoma Weise Anhand dieser besprochenen Anforderungen sind ein Lastenheft und erste Design Entw rfe erstellt worden Diese wurden dann beim n chsten Treffen am 2 April 2013 dem Kunden vorgestellt Hier kam es dann noch zu einigen Ab nderungen der Projektanforderungen Anschlie end wurde ein Pflichtenheft erstellt welches dann am 16 Mai 2013 gemeinsam mit dem Werkvertrag nach meheren Ab nderungen unterschrieben wurde Nach dem Unterzeichnen des Pflichtenheftes begann dann die eigentliche Planungs bzw Entwicklungsphase In Abst nden von 1 2 Monate
127. sten Chef ri Neuer Schritt Abb 13 Planify Spezialbestellung 9 6 Einstellungen Zum Fenster Einstellungen gelangen Sie ber die Men leiste Unter Einstellungen k nnen Sie in 5 Fenstern verschiedene Daten verwalten Das sind Folgende Produkte Mitarbeiter Lieferanten Posten Konten 96 1 Produkte Unter Produkte sind alle vorhandenen Produkte aufgelistet und sortiert nach Produktgruppen Durch klicken auf ein Produkt ffnet sich ein neues Fenster in dem Sie das Produkt bearbeiten k nnen Durch klicken auf das rechts unten k nnen Sie ein neues Produkt erstellen Einstellungen Produkte Schaum Produkt 1 gt Abb 14 Planify Einstellungen Produkte Wenn Sie unter dem neuen Produkt auf das klicken ffnet sich ein neuer Produktschritt Dieser braucht einen Tag in der Produktkette einen Namen einen festgelegten Posten und eine Zeit Dar ber m ssen Sie noch eine Menge eingeben Sie k nnen auch Zutaten eingeben m ssen aber nicht Mit dem neben der Menge k nnen Sie eine weitere Menge hinzuf gen Sie m ssen f r jeden Arbeitsschritt genauso viele Zeiten angeben wie das Produkt Mengen hat Durch klicken auf Neuer Schritt k nnen Sie einen weiteren Arbeitsschritt hinzuf gen 12 05 2014 Bedienungsanleitung Seite 34 von 125 HTL Mistelbach Planify App Thoma Weise Wenn Sie rechts unten auf Bearbeiten klicken k nnen Sie einzelne Mengen oder Produktschritte wieder l schen indem Si
128. stung der Anzahl an Mitarbeitern nach Berufsgruppen dann die gesamte Zeit aller Mitarbeiter und die Zeit die noch verf gbar gr n zu viel rot ist Die Anzahl der ben tigten Leiharbeiter wird gleich berechnet Durch verschieben eines einzelnen Arbeitsschrittes werden alle anderen Arbeitsschritte dieses Produkts um genauso viele Tage verschoben Es gibt auch die M glichkeit die Produktkette zu zerrei en Die Produktmengen k nnen auch gleich im Wochenplan ge ndert werden Durch dr cken auf die einzelnen Tage kommt man zum Tagesplan Tagesplan Im Tagesplan gibt es f r jeden Posten eine Auflistung der Anzahl an Mitarbeitern nach Berufsgruppen dann die gesamte Zeit aller Mitarbeiter und die Zeit die noch verf gbar gr n zu viel rot ist Durch klicken auf den Balken mit den Mitarbeiteranzahlen ffnet sich ein neues Fenster wo alle Mitarbeiter aufgelistet sind man einzelne l schen und einen Verantwortlichen festlegen kann Rechts gibt es eine Leiste mit allen Mitarbeitern die an diesem Tag anwesend sind die durch ziehen zu den Posten dort zugeteilt werden Arbeitsschritte k nnen zwischen Posten verschoben werden Die Mengen der Produkte k nnen auch noch im Tagesplan ver ndert werden ber einen Button kann man f r jeden Posten eine Liste mit allen Arbeitsschritten Mitarbeitern und dem Verantwortlichen ausdrucken ber einen weiteren Button kann man den Drucker einrichten Produktion Alle Produkte sind nach Produktgruppen un
129. t end start Stunden arbeiten Ohne Mittagspause II H 12 05 2014 Theorie Seite 50 von 125 HTL Mistelbach Planify App Thoma Weise Code 10 L sung mit jQuery Bibliothek Man sieht sofort dass in Code 10 auf ein Bereitsein des Dokuments gewartet wird Das hei t man kann das Skript auf im head Bereich des HTML Dokuments einbinden es wird keinen Fehler durch das DOM geben Gleich danach wird dem Element mit der id ein Zeichen in jQuery somtBtn der Klick Eventhandler zugewiesen Der Rest ist gleich mit Code 9 Das Ergebnis wird in Abb 28 dargestellt Tv ee 3 AT F 11 52 essee 3 AT F 11 52 au eo 3 AT F 11 51 10 0 0 8 10 0 0 8 10 0 0 8 HTML5 Skeleton E Mail Adresse Datum Uhrzeit 16 02 2014 E 11 07 Ba gt Fertig lt gt L schen Fertig lt L schen Fertig alwleiriTIzful ol AlSIDIFIGIHIYJIKIL LE anne l A 16 Februar 2014 11 47 e vixicivieinin ia 1 M 12 18 123 Ei Leerzeichen 3 Return Abb 28 Ablauf der Aufgabenstellung In Abb 28 fragt der Benutzer seine Arbeitsstunden ab Als Antrittszeit wird 8 00 angegeben und der Feierabend beginnt um 17 15 Das Programm berechnet v llig korrekt eine Arbeitszeit von 9 Stunden ohne Pause Selbst wenn man bis 17 59 arbeitet m sste man eigentlich 10 Stunden ohne Pause arbeiten das Skript sagt jedoch 9 Stunden Das r hrt aus der getHours Funktion Diese nimmt keine R cksicht auf die eingegebenen Minuten
130. t docx e Zusammenfassung der Diplomarbeit DE im Format docx e Zusammenfassung der Diplomarbeit EN im Format docx e Pr sentation der Diplomarbeit im Format pptx e Source Code in einem komprimierten Verzeichnis im Format rar CD Cover 12 05 2014 DVD Seite 125 von 125
131. t rlich die Fragezeichen Au erdem werden noch der Schrittname Menge und Produktname dem Benutzer sichtbar angezeigt 12 05 2014 Umsetzung Seite 93 von 125 HTL Mistelbach Planify App Thoma Weise lt div class tr gt lt 7 SPALTEN gt lt ul class unstyled employeelist hide sortable data date YYYY MM DD gt lt li class text center day gt lt a href index php p tagesplan amp s YYYYMMDD gt lt span gt 0 lt span gt lt div gt MA lt span gt lt MA Zeit gt lt span gt lt span class additi gt lt LEIHARBEITER gt lt span gt Za lt div gt lt strong gt lt TAGNAME gt lt DD MM gt lt strong gt lt div gt lt a gt lt li gt lt AUSGABE ALLER ARBEITSSCHRITTE GEB TAGE usw gt lt li class item box style background color data id data stepid data duration data qty data prodname gt lt div class overflow gt lt SCHRITTNAME gt lt div gt lt span class fancy qty gt lt MENGE gt lt PRODUKTNAME gt lt span gt LIS lt UL gt lt ENDE 7 SPALTEN gt lt ul class unstyled hide orders gt lt li class text center gt lt div gt nbsp lt div gt lt strong gt lt div gt Bestellungen lt div gt lt strong gt
132. t Button werden die Daten mittels _POST Array an das Skript dasselbe Dokument geschickt und und dort auf vorhandensein mit der Funktion isset gepr ft Danach wird gepr ft ob das Array POST mehr als O Stellen hat ist das der Fall wird es sch n Formatiert im lt pre gt lt pre gt Element ausgegeben Wie man in Abb 31 erkennt zeigt das Array POST an der Stelle name den eingegebenen Wert an Man k nnte genauso gut _POST name schreiben es h tte dasselbe Ergebnis zur Folge Ebenso gibt es zwei input Felder vom Typ option welche einen unterschiedlichen Wert haben n mlich f r female und m f r male 12 05 2014 Theorie Seite 56 von 125 HTL Mistelbach Planify App Thoma Weise seese 3 AT F 17 47 9 essee 3 AT F 17 48 gt ee 3 AT F 17 48 10 0 0 7 10 0 0 7 C 10 0 0 7 C M nnlich Weiblich array 3 In ls PHP Formular Ihre Telefonnummer sering 12 Hartin Weise Ihr Name 43660123456789 gender gt string 1 m tel gt string 15 43660123456789 Ihr Geschlecht M nnlich Weiblich lt Fertig Ihre Telefonnummer 1 D EI P H P Form u lar ABC DEF Ihr Name 4 5 6 GHI Ia MNO Ihr Geschlecht 7 8 PORS TUV WXYZ M nnlich Weiblich lt tr RRE t 0 lt 06 0 0 Abb 31 Formularverarbeitung mit PHP 10 2 5 MySQL Wie im vorangegangenen Punkt PHP bereits erw hnt wirdeine Datenbank ben tigt Dabei gilt es zu beachten dass die Technologie Relationale Datenbanken beherrscht und un
133. t werden Mitarbeiter Die Mitarbeiter sind nach Produktgruppen und Alphabet aufgelistet und k nnen ver ndert gel scht werden ber einen Button k nnen neue Mitarbeiter hinzugef gt werden Parameter f r einen Mitarbeiter sind ein Foto Vor und Nachname Auswahl der Berufsgruppe und das Geburtsdatum Lieferanten Die Lieferanten sind nach Alphabet aufgelistet und k nnen ver ndert gel scht werden ber einen Button k nnen neue Lieferanten hinzugef gt werden Parameter f r einen Lieferanten sind der Name eine Auswahlm glichkeit w chentlich 2 w chentlich 3 w chentlich 4 w chentlich und die einzelnen Wochentage an denen beim Lieferanten bestellt werden muss m ssen auch ausgew hlt werden Feiertage werden automatisch ber cksichtigt Die Lieferantenbestellungen werden automatisch beim Posten Firmenleitung aufgelistet Posten Die vorhandenen Posten sind nach Alphabet aufgelistet und k nnen ver ndert gel scht werden ber einen Button k nnen neue Posten hinzugef gt werden 12 05 2014 Anhang Seite 108 von 125 HTL Mistelbach Planify App Thoma Weise Risiken Beurteilung Geringe Risiken Verz gerung der Fertigstellung Geschmack des Kunden verfehlt E E EER Bedienkonzept nicht realisierbar bzw verfehlt Hohe Risiken Unternehmerisches Risiko Tabelle 8 Pflichtenheft Risiken Verpflichtungen Finanzielles F r alle oben genannten Leistungen ist Heiss amp S GmbH verpflic
134. t wird umso besser kann ein Unternehmen auch auf die Bed rfnisse einen Kunden eingehen 5 1 2 3 Kundentreue Kommt es wiederholt zu Nach und Wiederk ufen bei einem Unternehmen spricht man von Kundentreue Diese treuen Kunden haben sich im Markt f r das Unternehmen entschieden weil es f r das verf gbare Budget unter Abw gung speziellen branchenspezifischen Aspekten die beste Leistung bietet Zudem sind zufriedene Kunden auch treue Kunden 5 1 2 4 Kundenintegration Die N he eines Kunden kann durch Einbinden in unternehmensspezifische Prozesse gesteigert werden Gut integrierte Kunden erhalten mit gesteigerter Wahrscheinlichkeit ein besseres Ergebnis als weniger integrierte weil das Unternehmen verst rkt auf integrierte Kunden eingehen kann 12 05 2014 Kundenmanagement Seite 22 von 125 HTL Mistelbach Planify App Thoma Weise Wie in Abb 4 zu sehen ist f hrte eine gute Kundenintegration zu einem besseren Ergebnis subjektiv f r den Kunden Er sah seine Erwartungen und Anforderungen Auf der anderen Seite steigen f r das Unternehmen meist der Aufwand und die Kosten Ein Beispiel ist die fr he Integration eines Kunden in Planungsphasen wie es auch bei unserer Diplomarbeit war Der Kunde war seit der ersten Stunde voll integriert und hat den Entwicklungsprozess ma geblich beeinflusst 5 1 2 5 Kundenbindung Das Unternehmen welches Leistungen oder Produkte anbietet analysiert die Motive des Kunden der einen Wiede
135. ter Q JOIN pf berufsgruppen R JOIN of colors S WHERE S ID R colorID AND R ID Q group AND 0 ID P employeeID AND P temp IS NULL AND P date gt FIRST DAY OF WEEK date AND P date lt DATE ADD FIRST_DAY OF WEEK date INTERVAL 6 DAY UNION SELECT DATEDIFF D date FIRST DAY OF WEEK date as 1 P CID 3 E FLOOR TIME_TO_SEC P endtime TIM as total FROM TO SEC P starttime 60 pf_tagesplan zuteilungen P JOIN pf leiharbeiter Q JOIN pf berufsgruppen R JOIN of colors S WHERE S ID R colorID AND P temp IS NOT NULL AND Q ID P employeeID AND R CID A ORDER BY K ip ASC Code 46 Mitarbeiterzeiten Query im Wochenplan Der letzte verwendete Query im Wochenplan sucht nach den Bestellten Produkten mit Zeiten und Mengen und ist in Code 46 festgehalten Dabei zu beachten ist dass die Bestellungen unabh ngig von der ausgew hlten Woche angezeigt werden http dev mysql com doc retman 5 1 de create procedure html 05 03 2014 12 05 2014 Umsetzung Seite 92 von 125 HTL Mistelbach Planify App Thoma Weise SELECT P ID R antity y Sa Color y Q name FROM pf bestellungen P JOIN pf produkte Q JOIN pf produkte_mengen R JOIN pf colors S WHERE S ID Q colorID AND R ID P gqtyID AND
136. ter einer Lizenz ver ffentlicht wurde die sich mit den Anforderungen deckt Der Begriff Relation ist fest definiert und beschreibt die Verbindung zweier Tabellen mittels eindeutigen Werten Um sich davon ein besseres Bild machen zu k nnen wird das nachfolgend n her erl utert Mau12 102 571 Begriffe Eine Tabelle besitzt im Allgemeinen mindestens eine Reihe und mindestens 1 Spalte Die Spalte einer Tabelle wird in der Fachliteratur als Attribut und eine Zeile wird als Tupel bezeichnet Um einen Tupel von einem anderen unterscheiden zu k nnen hat jede Tabelle ein oder mehrere identifizierende Attribute die als Schl sselattribute Keys bezeichnet werden Identifiziert soein Attribut den Tupel eindeutig also ist das Attribut einmalig vorhanden so wird das Schl sselattribut als Prim rschl ssel bezeichnet der wichtigste Key Im Normalfall ist das eine fortlaufende ganze nat rliche Zahl und tr gt den Spaltennamen ID Mau 12 Dient dieser jedoch lediglich als Verweis zu einem Prim rschl ssel einer anderen Tabelle wird dieses Schl sselattrbut Fremdschl ssel also Foreign Key genannt Der Prim rschl ssel ist hingegen in jeder Tabelle vorhanden daher kann man sp ter sehr gut und vor allem einfach Verbindungen zwischen den Tabellen herstellen Um eine Tabelle von einer anderen sogar einer strukturell gleichen unterscheiden zu k nnen weist man jeder Tabelle eine Relationsvariable also eine Tabellenbezeichnung z
137. th index 4 al 9000 top parselnt ui item css top offset 45 offset 4 y of set D D else EINZELNES ELEMENT Kr Code 28 JavaScript wp_sort Funktion In Code 29 wird abermals jede Liste durchsucht und jedes Element der Liste dem Array data hinzugef gt Wichtig und Interessant sind die Daten stepID orderID date und index Ist das Array fertig bef llt wird ein AJAX Request an das PHP Skript wochenplan update item php geschickt welcher die neuen Positionen aller Elemente in die Datenbank schreibt Anschlie end werden die Klassen sender m und single von den entsprechenden Elementen entfernt und die neuen Zeiten berechnet 12 05 2014 Umsetzung Seite 75 von 125 HTL Mistelbach Planify App Thoma Weise function wp sort stop event ui S tr eq 0 find ul each function S this find li item data id ui item data id each function S this css width this parent width data push date this parent data date stepid this data stepid vordertow i EhIS data Cran index koeff p II y ajax ALLE REFRESHEN Bype EOS url ajax wochenplan update item php Carcasi sons Carca lr success proxy function message console log message this sender removeClass sender SMA remove Class Im S single removeClass single wp Calc tim
138. tp www netcraft com survey Stand 08 02 2014 Abb 3 Blaue Grafiken von http iconarchive com Stand 05 05 2014 Anmerkung Nicht angef hrte Bilder sind Eigenaufnahmen 12 05 2014 Verzeichnisse Seite 12 von 125 HTL Mistelbach Planify App Thoma Weise Abk rzungsverzeichnis Name Bedeutung HTML Hyper Text Markup Language WSC World Wide Web Consortium Syntax Programmier Grammatik Tag HTML Attribut CSS Cascading Stylesheet Cursor Mauszeiger AJAX Asynchronous JavaScript And XML JSON JavaScript Object Notation PHP Hypertext Preprocessor SQL Structured Query Language Patch Programm um Software zu erneuern root Administrator unter Linux Platform 960px Grid Bekanntes Skaliermodell Webentwicklung IDE Integrated Development Environment FPDF PDF Bibliothek f r PHP MVC Model View Controller Webentwicklung OS Betriebsystem f r Mobilger te Slider Schieberegler Login Anmeldeverifizierung Logout Verlassen eines Dienstes DSN Data Source Name EXIF Exchangeable Image File Format JPEG Bildkompressionsformat 12 05 2014 Verzeichnisse Seite 13 von 125 HTL Mistelbach Planify App Thoma Weise 1 Projektteam Martin Thoma 5SAHELB HTL Mistelbach thnomamartin gmx at Simonsfeld 7 2115 Ernstbrunn Martin Weise 5SAHELB HTL Mistelbach hi martinweise at F rsterweg 29 2136 Laa an der Thaya 12 05 2014 P
139. ts unten klicken wird ein neuer Mitarbeiter hinzugef gt Jetzt muss noch Vorname Nachname Geburtsdatum Berufsgruppe Arbeitszeit Beginn amp Ende Mittagspause nicht ber cksichtigt 12 05 2014 Bedienungsanleitung Seite 35 von 125 HTL Mistelbach Planify App Thoma Weise eingegeben werden Sie k nnen auch ein Bild des Mitarbeiters machen amp dieses mit einem Klick auf das Bild hochladen Besitzen Sie ein Android oder OS Tablet k nnen Sie auch direkt ein Bild mit der Kamera machen das automatisch hochgeladen wird Anschlie end m ssen Sie rechts unten auf Speichern klicken damit die nderungen gespeichert werden Wenn Sie einen Mitarbeiter l schen wollen m ssen Sie rechts unten auf Bearbeiten klicken und anschlie end auf den Papierkorb unter dem zu l schenden Mitarbeiter Einstellungen Mitarbeiter 2 Martin weise EE 07 00 16 00 2 L amp weise gt gt 04 15 13 45 Abb 17 Planify Einstellungen Mitarbeiter Wenn Sie rechts unten auf den Button Firmen klicken k nnen Sie die Leihfirmen bearbeiten Hier sind alle Leiharbeiterfirmen aufgelistet und k nnen bearbeitet werden Wenn Sie auf das rechts unten klicken k nnen Sie eine neue Firma hinzuf gen Wenn Sie eine Firma l schen wollen m ssen Sie auf Bearbeiten klicken und anschlie end auf L schen rechts neben der Firma Dann m ssen Sie rechts unten auf Speichern klicken damit die nderungen gespeichert werden
140. u Diese enth lt 12 05 2014 Theorie Seite 57 von 125 HTL Mistelbach Planify App Thoma Weise blicherweise ein Pr fix das die Projektzugeh rigkeit symbolisieren soll In Abb 32 ist das pt in der Beschriftung eine Abk rzung f r pr fix ID a D Abb 32 Tabelle pf_colors Mau12 Ein Relationales Datenbankmanagementsystem RDBMS wird durch die Structured Query Language SQL beschrieben und bedient Dabei gibt es viele verschiedene Anbieter verschiedenster L sungen 10 2 5 2 Syntax Wie man in Code 17 erkennt schreibt man SQL Schl sselw rter wie CRE Mau12 ATE TA BLE oder die Datentypen INT VARCHAR DOUBLE allesamt in Gro buchstaben was der besseren Lesbarkeit dient und den Code wesentlich bersichtlicher macht Zudem r ckt man nach jedem Anweisungsblock ein USE test CREATE TABLE IF NOT EXISTS pf colors ID int 11 NOT NULL AUTO INCREMENT notice varchar 100 NOT NULL color char 6 NOT NULL PRIMARY KEY ID ENGINE InnoDB DEFAULT CHARSET utf8 AUTO INCREMENT 9 INSERT INTO of colors ID notice color VALUES 1 Rot DD1E2F 2 Gelb EBBO35 3 Gr n 218559 4 Blau 336699 6 Hellblau 06A2CB 7 Grau DOC6B1 8 Braun 834C24 Code 17 Erstellen der Tabellenstruktur aus Abb 32 http www 1ke
141. und so ziemlich der Hauptgrund f r die Wahl einer PDO Schnittstelle anstatt einer herk mmlichen MySQLi Schnittstelle bei der http www php net manual de pdo construct php http www php net manual de pdostatement fetchall php 12 05 2014 Umsetzung Seite 86 von 125 HTL Mistelbach Planify App Thoma Weise man zwar selbiges ber die MySQL Anweisung LAST INSERT ID erreichen k nnte aber das behindert die Query Entwicklung class o0L f private Saba null Ssth nu public row array count null error null e null glastiD mall Ssuecess ta lees p blic function construct i try a this gt dbh new PDO mysql dbname planifydb host 127 0 0 1 charset utf8 user pass this gt dbh gt setAttribute PDO ATTR EMULATE PREPARES der catch PDOkxception e Sthis gt e Verbindung abgebrochen e gt getMessage public function query sql arrParams LEY 1 Sthis gt sth this gt dbh gt prepare sql array PDO ATTR_CURSOR gt PDO CURSOR_FWDONLY this gt sth gt execute arrParanms this gt row Sthis gt sth gt fetchAll this gt count this gt sth gt rowCount this gt error this gt sth gt errorInfo this gt lastID Sthis gt dbh gt lastInsertId ch PDOExecption e this gt dbh gt rollback this gt e Error U e gt getMessagel ca UE PUE ich UE UF UF RUE VE
142. undenfeld basiert 10 2 7 1 Mobile First Betrachtet man ein Projekt auf seine grundlegenden Anforderungen hat es sich f r Web Entwickler als sinnvoll erwiesen mit einer mobilen Version der Web Applikation zu starten Diese Vorgehensweise wird seit einigen Jahren vom amerikanischen Webdesigner Luke Wroblewski verbreitet der sie als den Mobile First Ansatz bezeichnet Der soll sicherstellen dass in der Planungsphase der Fokus auf den wesentlichen Inhalten gelenkt wird Weil dieser Ansatz in Symbiose mit dem Inhalt lebt wird auch oft von einem Content First Ansatz gesprochen Das soll verdeutlichen dass man sich verst rkt mit den Inhaltsfragen besch ftigen soll Wenn man nur einen Blick auf die Verkaufszahlen und Wachstumsraten von Smartphones im Vergleich zu denen von PCs wirft sieht man warum es zwingend notwendig ist Web Applikationen Mobile First anzugehen Im Jahr 2011 wurde weltweit mehr Smartphones als PCs verkauft In absoluten Zahlen gesprochen hei t das 488 Millionen 63 zu 2010 verkaufte Smartphones und 415 Millionen 15 zu 2010 PCs Da die Diplomarbeit aber 2 https github com phpmyadmin phpmyadmin Stand 08 02 2014 12 05 2014 Theorie Seite 62 von 125 HTL Mistelbach Planify App Thoma Weise f r Tablets und Desktops konzipiert wird sind die Verkaufszahlen von Tablets von gro em Interesse Diese wurden 2011 n mlich 27 Millionen 274 zu 2010 Mal verkauft 10 2 7 2 Planungsphase Von d
143. ung des Datums von vorheriger n chster Woche Der Code aus Code 42 berechnet einen Tag aus der vorherigen n chsten Woche mittels der vorher in Code 41 definierten Variable Die Funktion date nimmt 2 Argumente an Das erste legt fest in welcher Form das Datum ausgegeben werden soll Es wurde die Form YYYYMMDD also das Parameter Ymd gew hlt Da ein Timestamp nichts anderes als die vergangenen Sekunden seit dem 1 1 1970 00 00 00 sind kann man auch ganz einfach pdate 3600 24 7 rechnen also 3600 Sekunden einer Stunde mal 24 Stunden am Tag mal 7 Tage die man zur ckgehen m chte 12 05 2014 Umsetzung Seite 88 von 125 HTL Mistelbach Planify App Thoma Weise SELECT NULL as ID NULL as stepID OQ dayIndex as i NULL as quantity P name ffffff as color 0 as duration Lieferant as productName FROM pf lieferanten P JOIN pf lieferanten zuteilungen Q WHERE Q supplierID P ID AND CEIL WEEKOFYEAR date WEEKOFYEAR P date P period 1 0 UNION SELECT NULL as ID NULL as stepID WEEKDAY DATE ADD P birthday INTERVAL YEAR date YEAR P birthday YEAR as i YEAR CURDATE YEAR birthday 1 as quantity D firstname fff as color 0 as duration Geburtstag as product
144. y holiday UY echo Im data date date Y m d date gt lt li class text center day gt lt a href index php p tagesplan s date Ymd date elass pullzlert gt lt i class icon eye open gt lt i gt lt a gt ee date lt i class icon chevron down animation pull right gt lt i gt rm y if rssetisarec si be is arraylsarr s foreach arr i as Sitem echo lt li class item draggable data pid Sitem pID data e d E Siteni erni nV Qata td UN Sitemi ID NY aata starteime oiteml startteime datazendtime S tem endeimel style border right 4px solid item color gt lt img src img u item image JPEG class img E eebe EE lfrescnamel Bel EE EEN El io SE echo EE Code 52 PHP Code zum Anzeigen des Dienstplans Auch hier bei Code 52 zu sehen wird dasselbe Anzeigeprinzip wie bei Code 49 angewandt Man gibt 7 Mal eine Liste aus egal ob sie gef llt wird oder nicht Abh ngig von ihrem Datum f llt sie auf einen Feiertag oder nicht Sp ter wird berpr ft ob sich ein Array an der Stelle i befindet anschlie end wird mit den enthaltenen Daten einer jeden Stelle ein Mitarbeiterblock in das Dokument ausgegeben Ein Leiharbeiter hat standardm ig kein Bild daher wird das Bild img u u_unknown JPEG eingebunden Doch nur theoretisch denn die htaccess Datei verhindert solche Peinlichkeiten Wie in Code 53
145. ydata com de sql 27 01 2014 12 05 2014 Theorie Seite 58 von 125 HTL Mistelbach Planify App Thoma Weise Die Syntax macht sofort einen sehr strukturierten Eindruck Die Anweisungsbl cke lassen sich wie ein Text lesen USE db name sagt dem MySQL Interpreter dass er die Datenbank test f r alle folgenden Statements verwenden soll Die Datenbank bleibt bis zum Ende der Sitzung oder bis ein weiteres USE Statement folgt gespeichert D CREATE TABLE IF NOT EXISTS tbl nameerzeugt eine neue Tabelle mit dem Namen tbl name Dieses Statement wird auch ausgef hrt wenn derzeit keine Standardtabelle ausgew hlt wurde Man muss nur die Datenbank dem Tabellennamen voranstellen und die beiden mit einem Punkt verbinden Der PRIMARY KEY identifiziert einen Datensatz eindeutig Dieser kann aus einer oder mehreren Spalten Bestehen In diesem Fall wird nur eine Spalte in den Prim rschl ssel einbezogen n mlich die Spalte ID Als Engine f r die Tabelle wird die InnoDB Storage Engine verwendet weil die Funktionen nach dem ACID Modell arbeiten Als Charakter Set wurde UTF 8 gew hlt weil dieses jedes Zeichen in dem international weit verbreiteten Set dem Unicode speichern kann Generell gilt es so viel wie nur irgend m glich ber die Datenbank zu regeln Ein Query ist im eigenen Netzwerk mit einer durchschnittlichen Ausf hrzeit von etwa 250 Millisekunden um ein beachtlich
146. zu sehen ist werden alle Aufrufe die in das Verzeichnis img u gehen abgefangen und an die Datei imagerotate php weitergeleitet RewriteRule img u var imagerotate php img 1 L Code 53 Auszug der htaccess Datei Der Dateiname wird in das Array _ GET unter dem Index img gespeichert 12 05 2014 Umsetzung Seite 97 von 125 HTL Mistelbach Planify App Thoma Weise header Content type image jpeg function image fix _orientation amp image filename image imagerotate image array values 0 0 0 180 0 0 90 0 901 fexif read data filename Orientation 0 0 return image filename ile tests DROE Ee ue ng u_unknown JPEG source imagecreatefromjpeg filename source img image fix orientation source filename new w new_ h 100 orig w imagesx source img orig_h imagesy source img w ratio Snew_w orig w sh ratio Snew h sorig i if Sorig w gt orig h landscape EE roundisorig oh ratio crop h new h elseif sorig w lt orig h portrait crop h roundisorig N Me to crop w new w else square crop w new w crop h new_h dest_img imagecreatetruecolor new_w new_h imagecopyresampled dest img source img 0 0 0 0 crop w crop h orig w SOL imagejpeg dest img Code 54 Skript zum Manipulieren von Bildern m

Download Pdf Manuals

Related Search

Related Contents

USER MANUAL  取扱説明書 - タートル工業  

Copyright © All rights reserved. Failed to retrieve file