Inhaltsverzeichnis  Motivation  Kurzbeschreibung  Benutzte Technologien HTML 5 / Javascript / Geolocation API AJAX PHP MYSQL GPS  Datenbankstruktur.

Slides:



Advertisements
Ähnliche Präsentationen
Be.as WEB Technologie
Advertisements

Dynamische Seiten mit Dreamweaver Zugriff auf (mysql) Datenbank mit PHP.
Seminar: XML für Fortgeschrittene Referent: Katrin Apel
XML - Aufbau und Struktur - mit Einsatz im B2B
HTML - Einführung Richard Göbel.
Java: Grundlagen der Sprache
Colibi Bibliothekssystem der Computerlinguistik. Einführung Motivation Was braucht Colibi? Software Datenbankdesign.
Anfragesprachen – Dipl. Ing. Ulrich Borchert / FH Merseburg1/7 Datenbanken werden als Anhäufung von Werten eines Wertebereiches aufgefasst und Datenbankabfragen.
DOM (Document Object Model)
Internetstruktur Das Internet besteht aus vielen Computern, die weltweit untereinander vernetzt sind.
Web 3.0 – Programmierung – Semantic Web / CIDOC CRM
XINDICE The Apache XML Project Name: Jacqueline Langhorst
Geschichte und Funktion des Internets.
Oracle PL/SQL Server Pages (PSP). © Prof. T. Kudraß, HTWK Leipzig Grundidee: PSP – Internet-Seiten mit dynamischer Präsentation von Inhalten durch Einsatz.
Spezielle Aspekte der Anbindung von Datenbanken im Web.
Technik Gestaltung Navigation Daten. Übersicht Client Webbrowser InternetServer.
Projekt Web Engineering
Zukunft des Webs? Dennis Beer Christian Blinde
Erhard Künzel für Info 9. Klasse: digitale-schule-bayern.de © Erhard Künzel.
Einführung MySQL mit PHP
Seite Common Gateway Interface. Konzepte. Übersicht 1Einleitung 2Was ist CGI? 3Wozu wird CGI verwendet? 4Geschichtlicher Überblick 5Grundvoraussetzungen.
PHP Pakete und Beispiele Webengineering Robert Lemke.
FH-Hof HTML - Einführung Richard Göbel. FH-Hof Komponenten des World Wide Webs WWW Browser HyperText Transfer Protocol (HTTP) via Internet WWW Server.
... und alles was dazugehört
JavaScript Object Notation
Lommy® SAFE Individuelles Überwachen von Fahrzeugen und Gütern.
Erste Schritte mit PHP 5 von Max Brandt, 22. September 2006.
Wir bauen uns eine Webapplikation!
Webseitengestaltung.
Gegenstand EDV Thema: Informative Webseiten
Silverlight Eine Einführung. Agenda 1.Was ist Silverlight? 2.Die Silverlight Philosophie 3.Vorstellung des Szenarios 4.Einführendes Beispiel 5.Konzepte.
JavaScript.
Projektarbeit PHP 5.3 / MySQL & Content Management Systems
Erstellen einer Webseitenstatistik mithilfe eines OLAP-Servers
Erstellen einer Webseitenstatistik mithilfe eines OLAP-Servers
Grundlagen: Client-Server-Modell
Game Development mit LUA Integration und Kommunikation von LUA mit C++ Referat von Paul van Hemmen Seminar: Reusable Content in 3D und Simulationssystemen.
HTML-Editoren Eine Präsentation von Erik Kulisch.
RATEME Suchen und Bewerten von Ausgangsorten. Inhalt RateMe - Pirmin Schürmann, Thomas Junghans - Hochschule für Technik Zürich 2 Unser Ziel.
Folgendes kann missbraucht werden: formulare unverschlüsselte login-informationen ungeschützte includes SQL-injection reto ambühler
CGI (Common Gateway Interface)
Allgemeines zu Datenbanken
PHP Basic.
Oliver Spritzendorfer Thomas Fekete
Torque in Turbine Team 4 Josef Bohninger Thomas Lindenhofer
Web 2.0 & AJAX (A)sysnchrones (J)avaScript (A)nd (X)ML
Mag. Andreas Starzer weloveIT – EDV Dienstleistungen
Client-Server-Modell
PHP PHP ( „PHP Hypertext Preprocessor") ist eine Skriptsprache
Ajax und Webentwicklung mit Prototype
HEX-code für die Farbe weiß: #FFFFFF Änderung von Inhalt & Darstellung Inhalt & Darstellung HTML Javascript CSS.
PHP:: Hypertext Preprocessor Einführung Praxis. PHP:: Hypertext Preprocessor Jetzt mal von der anderen Seite © All rights reversed2 PHP:: Hypertext Preprocessor.
Datenbanken im Web 1.
Java Server Pages Technologie zur Erzeugung dynamischer Webseiten basierend auf Java-Servlets Blockseminar Wintersemester 2001/2002Jochen Pfeiffer Seite.
MD 4/02 CORBA Static/Dynamic Invocation Interface (SII/DII), Interface Repository.
Cookies Kekse? Internet Gefahr?.
Internet - Grundbegriffe Unterlagen zum Kurs "Wie erstelle ich eine Homepage?"
Das Internet Ein Netzwerk, das viele Rechner miteinander verbindet
PHPmyadmin Maya Kindler 6c.
Abschlussprojekt von Lars Reinken.  Anwendung (GUI)  Server und ihre Aufgaben  Datenbankstruktur (MSSQL)  Serverkonfiguration (IIS)  Programmaufbau.
Microsoft Silverlight Autor: Christian Pirker. Inhalt Einführung Silverlight Einführung XAML Silverlight 1.0 und 1.1 Silverlight 2.0 Silverlight 3.0 Ausblick.
Entwurf, Implementierung und Test eines Java – Web Services als Kommunikationsschnittstelle für Webapplikationen mit Funktionen.
Erstellung eines webbasierten Geografischen Informationssystem mit Darstellung von Sonderbauwerken Seminararbeit WS 09/ Februar 2010 © FH AACHEN.
© WZL/Fraunhofer IPT Entwicklung einer Profilbörse für Konfigurationen von Smartphones Vortrag der Seminararbeit von Patrick Posor Aachen, den
Entwicklung einer Webapplikation mittels HTML, PHP, MySQL, jQuery, und Smarty-Templates am Beispiel einer Studienarbeitsverwaltung.
Theorie. Was ist Drupal? Content-Management-System, Open Source Software Hauptanwendung in der Organisation von Websites In PHP geschrieben und wird als.
WEB-Entwickler 2016.
Von Wietlisbach, Lenzin und Winter
Datenbanken
 Präsentation transkript:

Inhaltsverzeichnis  Motivation  Kurzbeschreibung  Benutzte Technologien HTML 5 / Javascript / Geolocation API AJAX PHP MYSQL GPS  Datenbankstruktur  Struktur der Anwendung  Benutzerverwaltung  Sammlung und Auswertung der Daten

Motivation  Anwendung im Rahmen einer Datenerhebung  Mobilitätsverhalten von Menschen in Aachen  Benötigte Daten: Zweck und Fortbewegungsmittel Länge der Strecke Geschwindigkeiten  Für den Benutzer: Auswertung der Daten für Benutzer sichtbar Beobachtung des eigenen Verhaltens

Kurzbeschreibung  Webbasierte Anwendung  Aufzeichnung von Wegen  Anzeige einer Auswertung  Bestimmung der Position mit GPS  Plattformunabhängig Anwendung im Webbrowser  Sprachen: HTML 5, PHP und Javascript  Speicherung in MySQL  Auswertung einzeln, gruppiert und gesamt Authentifizierung per E- Mailadresse und Passwort Aktivierungsmail Clientseite:  HTML 5, Javascript Serverseite:  PHP

Technologien  HTML : Hypertext Markup Language Textbasierte Auszeichnungssprache für Inhalte im Internet Interpretiert und dargestellt von Webbrowsern, z.B.: „Internet Explorer“ HTML 5 in Entwicklung, jedoch vom Großteil aller Browser unterstützt  Javascript Scriptsprache für dynamische Webseiten Erweitert HTML um einige Funktionen, z.B.: Eventhandling Syntax ähnlich der von Java  Geolocation API Einführung mit HTML 5 Ermittlung der Position des Gerätes Muss akzeptiert werden vom Benutzer HTML 5 / Javascript / Geolocation API

AJAX / JSON / JQuery  Ajax: „Asynchronous Javascript and XML“ Asynchroner Datenaustausch zwischen Browser und Server Keine neue Seite wird aufgerufen Benutzt um GPS Daten zu senden und Statusmeldungen zu empfangen  JSON: „Javascript Object Notation“ Textbasiertes Format für die Codierung von Daten Valides Javascript Vorgefertigte Funktionen zum Codieren und Decodieren in Javascript und PHP vorhanden  Jquery Javascript Bibliothek Vereinfacht die manipulation der Webseite Vereinfacht das versenden von Requests und das Verarbeiten der Antworten

PHP  PHP steht für „PHP: Hypertext Processor“  Scriptsprache zum erzeugen von dynamischen Webseiten  Oft serverseitig benutzt  PHP Dateien werden nicht übertragen sondern interpretiert, Ergebniss wird übertragen (Quelle:

PHP  Viele Vorteile für dieses Projekt: Unterstützung vieler Datenbanksysteme Als Scriptsprache auch für die AJAX Funktionen zu benutzen Objektorientierung möglich  Rolle in diesem Projekt: Erstellung des HTML – Codes Scripte für Speicherung und Nachladen von Daten Versand von E - Mails

MySQL  Ein Auf SQL basierendes relationelles Datenbanksystem  Oft Datenspeicherung für Webanwendungen, oft benutzt mit PHP  Unterteilung in Datenbanken und Tabellen  Daten – definition, -abfrage und – manipulation erfolgen mit der Sprache SQL  Beispielabfrage „SELECT * FROM user WHERE benutzer=‘test‘; ”

GPS  GPS steht für „Global Positioning System“  Satelitengestütztes System zur Positionsbestimmung und Zeitmessung  Vorteile: Geräte müssen Daten nur Empfangen Dadurch relativ Stromsparend  Sichtkontakt zu 4 Satteliten  Berechnung der Position anhand der Laufzeit der Signale (Quelle:

GPS  Für Lückenlose Übertragung mindestens 24 Satteliten in der Luft  6 Umlaufbahnen mit mindestens 4 Satteliten  Durchschnittliche Bahnhöfe von Metern  Geolocation API stellt Längen- und Breitengrade bereit  Breitengrad konstante Länge von 111,12 km  Länge eines Längengrades abhängig vom Breitengrad laenge = 111,12km *cos(Breitengrad)

Datenbankstruktur  Tabellen für Folgende Daten: Benutzer Registration Weg- und Zeitdaten Kategorien für Zwecke Kategorien für Fortbewegungsmittel

Datenbankstruktur

Struktur der Anwendung  Objektorientierter Ansatz  „index.php“ enthält die Logik der Anzeige sowie HTML Grundgerüst  Ist kein Benutzer angemeldet wird das Modul für Login und Registration geladen  Zu ladene Unterseiten werden durch den GET Parameter „id“ benannt z.B.: „index.php?id=start“  Unterseiten werden durch Klassen repräsentiert.  Objekt wird erstellt, HTML – Code durch toString-Methode  Ordner mit PHP Skripten für AJAX Funktionen  Klasse für die Kommunikation mit der Datenbank

Benutzerverwaltung  Identifizierung mit adresse  Anmeldung: Eingabe der adresse und Passwort, Validierung mit Javascript Server überprüft ob adresse verfügbar ist Erzeugung eines Aktivierungscodes und Senden eines Aktivierungslinks per E- Mail Speicherung in der Tabelle „activation“ Bei Aktivierung umschreiben der Daten in die Tabelle „user“ Speicherung eines Passworthashes ○ MD5 Hash berechnet aus Passwort + adresse  Login Speicherung in PHP Sessionvariable Abfrage von adresse und Passwort Berechung des Passworthashes Gibt es einen Datensatz mit passender adresse und Passworthash gelingt der Login Sonst erneutes Laden des Loginfensters

Sammlung und Auswertung  Javascript fragt eine Aufnahmeid ab und speichert diese versteckt  Beim Aufrufen einer anderen Seite wird diese ID mitgeschickt  So läuft die Aufnahme auf den anderen Unterseiten weiter  Ist die ID gesetzt ist die Aufzeichnung aktiviert  Funktion „navigator.geolocation.watchPosition(Send)“ ruft die Funktion „Send“ bei Positionswechsel auf  Die Funktion „Send“ sendet Koordinaten an Serverskript  Zeitpunkt wird auf dem Server ermittelt um die zu sendenen Daten zu vermindern Starten einer Aufzeichnung

Speicherung und Zwischenspeicherung  Zwischenspeicherung in Datei mit Aufnahmeid als Namen  Zeichenkette wird angehängt  Format: „Timestamp;Breitengrad;Längengrad;Höhe][„  Die Semikolons trennen einzelne Daten, die Klammern die Datensätze  Format ermöglicht einfache Trennung der Datensätze bei der Auswertung  Bei Beenden der Aufnahme Speicherung der Rohdaten in der Datenbank zusammen mit übermittelten Daten

Auswertung  Zwischenspeicherung von Zweck und Fahrzeug  Datenstring aus der Datei aufspalten, Speichern des ersten Datensatzes  Schleife berechnet die Werte mit den Datensätzen Zeitdifferenz: t =neueZeit – alteZeit (ms) Längengradlänge lgl=111120*cos(Breitengrad) (m) Längengraddifferenzlänge lgd = (neuerLängengrad-alterLängengrad)*lgl (m) Breitengraddifferenzlänge bgd = (neuerBreitengrad-alterBreitengrad)* (m) Höhendifferenz hd=neueHöhe – alteHöhe (m) Wegpunktentfernung d = sqrt( lgd² + bgd² +hd²) (m) Momentane Geschwindigkeit v = d / t * 3,6 *100 (km/h)  Längen werden addiert  Maximaltempo ermittelt  Daten werden in der Datenbank gespeichert und die temporäre Datei gelöscht

Anzeige  Tabellenform  Links zu Einzelansichten  Filter für gruppierte Ansichten Erweiter um Durchschnittliche Länge, Zeit und Geschwindigkeit  Filter kombinierbar

Fazit  Konzept entwickelt  Details zur Implementation  Anforderungen erfüllt: Mobilität Plattformunabhängigkeit  Durch Objektorientierung leichte Erweiterung möglich  Durch das Speichern der Rohdaten lassen sich auch neue Funktionen auf alte Daten anwenden

Quellen  Anne van Kesteren : HTML 5 differences from HTML 4, Introduction.   W3C HTML  Christian Wenz: Javascript,  w3schools.com: HTML5-Geolocation  Jesse James Garrett: Ajax: A New Approach to Web Applications, om/ideas/essays/archives/ php  IETF, JSON,  The PHP Group,PHP-Documentation  MySQL: Why MySQL,  Ron White, Tim Downs ( ): How Global Positioning Systems Work,