Postits System

Bakkalaureatsarbeit 2009
Martin Grossegger

1
Abbildungsverzeichnis
Abbildung 1: Screenshot mit zwei aktiven "stickies"..............................................................6
Abbildung 2: Screen - Beispiel für eine "Tada"-Liste.............................................................7
Abbildung 3: Screen - Gmail Tasks........................................................................................8
Abbildung 4: Die Definition des Internets
Quelle: http://www.netplanet.org/geschichte/internet.shtml..................................................9
Abbildung 5: Klassisches Modell und AJAX Modell
Quelle: http://www.adaptivepath.com/ideas/essays/archives/000385.php.........................13
Abbildung 6: Kommunikationsdiagramm.............................................................................18
Abbildung 7: Tabellenrelationen...........................................................................................19
Abbildung 8: Scripten für die Benutzerverwaltung...............................................................20
Abbildung 9: Visitenkarte eines Benutzers..........................................................................21
Abbildung 10: Suchfeld mit Autovervollständigung..............................................................22
Abbildung 11: Scripten für die Gruppenverwaltung.............................................................23
Abbildung 12: Einladung für eine Gruppe versenden..........................................................25
Abbildung 13: erstes Design................................................................................................28
Abbildung 14: aktuelles Design............................................................................................28
Abbildung 15: Div-Container eines Postits..........................................................................29
Abbildung 16: Scripten für die Postitverwaltung..................................................................30
Abbildung 17: Scripten für die Verwaltung von Items..........................................................30
Abbildung 18: Titel ändern...................................................................................................31
Abbildung 19: Div für die Größenänderung ....................................................................32
Abbildung 20: Postit mit aktivierter Frabauswahl.................................................................33
Abbildung 21: Container für das Verschieben des Postits...................................................34
Abbildung 22: Items in Bearbeitung.....................................................................................34
Abbildung 23: Virtuelle Pinnwand im Web Client.................................................................36
Abbildung 24: Postits in einer Gruppe.................................................................................38
Abbildung 25: Postit mit einzeInen Items.............................................................................38
Abbildung 26: Item in Bearbeitung.......................................................................................38

Tabellenverzeichnis
Tabelle 1: SQL Tabelle "users".............................................................................................20
Tabelle 2: SQL-Tabelle "groups"..........................................................................................24
Tabelle 3: SQL-Tabelle "user_groups".................................................................................24
Tabelle 4: SQL-Tabelle "user_groups".................................................................................26
Tabelle 5: SQL-Tabelle "user_groups"; Beispieleintrag.......................................................26

2
Inhaltsverzeichnis
Postits System.......................................................................................................................1
1 Abstract..............................................................................................................................4
2 Aufgabenstellung................................................................................................................5
3 Software für Postits, Listen................................................................................................6
3.1 http://stickies.softonic.de/............................................................................................6
3.2 http://tadalist.com/.......................................................................................................7
3.3 Google Tasks..............................................................................................................8
4 Verwendete Technologie....................................................................................................9
4.1 HTML..........................................................................................................................9
4.2 CSS...........................................................................................................................10
4.3 PHP ..........................................................................................................................11
4.4 Javascript..................................................................................................................12
4.5 AJAX.........................................................................................................................13
4.6 Prototype...................................................................................................................14
4.7 Script.aculo.us .........................................................................................................14
4.8 MySql........................................................................................................................15
5 Devices............................................................................................................................17
5.1 iPhone.......................................................................................................................17
5.2 Personal Digital Assistant, Smartphone...................................................................17
6 Das „Postit“-System.........................................................................................................18
6.1 Struktur.....................................................................................................................18
6.1.1 Backend: MySQL..............................................................................................19
6.2 Benutzerverwaltung..................................................................................................20
6.2.1 Benutzer anlegen..............................................................................................20
6.2.2 Benutzer ändern - Visitenkarte..........................................................................21
6.2.3 Login..................................................................................................................22
6.2.4 Benutzer suchen...............................................................................................22
6.3 Gruppenverwaltung..................................................................................................23
6.3.1 Gruppen erstellen..............................................................................................23
6.3.2 Gruppe verlassen..............................................................................................24
6.3.3 Gruppeneinladungen.........................................................................................25
6.4 Postits.......................................................................................................................28
6.4.1 Design...............................................................................................................29
6.5 Verwaltung von Postits und Items............................................................................30
6.5.1 Postit erstellen...................................................................................................30
6.5.2 Titel ändern........................................................................................................31
6.5.3 Größenänderung...............................................................................................32
6.5.4 Farbänderung....................................................................................................33
6.5.5 Positionen..........................................................................................................34
6.6 Items.........................................................................................................................34
7 Anwendung......................................................................................................................36
7.1 Webclient..................................................................................................................36
7.2 Mobiler Client............................................................................................................37
8 Diskussion........................................................................................................................39
9 Ausblick............................................................................................................................39
10 Literaturverzeichnis........................................................................................................41
11 Anhang...........................................................................................................................42
11.1 Datenbankschema..................................................................................................42

3
1 Abstract
Das „Postit“-System ist ein „Ideensammlungssystem“, um Einfälle und Notizen mit
anderen zu teilen und zu verwalten.

Einerseits existiert eine Weboberfläche, wo in intuitiver Art und Weise mit den virtuellen
Notizblättern verfahren wird, andererseits gibt es auch eine Version für mobile Endgeräte
wie Handys (iPhone) oder PDAs (Personal Digital Assistants).
Diese mobile Version ist der Grundgedanke der Anwendung. Es soll die Eingabe von
Ideen zu jeder Zeit ermöglichen. Mit einem internetfähigen mobilen Endgerät hat man
Zugriff auf das Programm und kann Ideen und Vorschläge eintragen. Diese Vorschläge
können dann später in der Weboberfläche sortiert werden.
Programmiert wurde das Projekt in der Sprache PHP in Verbindung mit einer MySQL
Datenbank.
Als Fortführung ist die Integration von zusätzlichen Inhalten, wie zum Beispiel Bilder und
Videos angedacht. Eine nützliche Anpassung könnte die Umsetzung von Desktop Widgets
sein, wo das Programm dann als Widget ohne Browserfenster am Desktop arbeitet.

4
2 Aufgabenstellung

Es geht darum ein Ideensammlungssystem zu entwickeln, das es ermöglicht, Einfälle und

Notizen mit anderen zu teilen und zu verwalten.
Die bisher bestehende Software zur Erstellung und Verwaltung von virtuellen Notizzetteln
hat kaum eine Verwendung für mobile Endgeräte. Daher ist die Einbindung mobiler
Endgeräte ein zentraler Aspekt dieser Postit-Software. Es soll dem Benutzer möglich sein,
zu jeder Zeit seine Ideen online zu stellen und mit anderen zu teilen.
Die mobile Version stellt ein einfaches Interface dar, welches von jedem internetfähigen
Endgerät abgerufen werden kann. Das Design ist schlicht und funktionell gehalten, damit
der Benutzer schnell zu seinen Ideen navigieren kann und neue Vorschläge oder Notizen
erstellen kann.
Zusätzlich zu der mobilen Variante existiert eine Webversion des Programmes. Um die mit
dem mobilen Endgerät erstellten und übermittelten Nachrichten in eine übersichtliche
Form bringen zu können, ist diese Webversion wie eine virtuelle Pinnwand aufgebaut: Die
Nachrichten verhalten sich wie mit Nadeln befestigte Zettel. Man kann die Zettel per „Drag
and Drop“ verschieben und neu anordnen.
Die Notizzettel selbst (im folgenden „Postit“ genannt) sind an die Papierform der
bekannten Notizzettel angelehnt, was sowohl Form wie auch Farbgebung betrifft.
Die Webplattform soll so komfortabel wie möglich zu bedienen sein, die Nachricht soll mit
wenigen Mausklicks fertig sein. Intuitives Erstellen und Bearbeiten der Postits („Klick and
Go“) soll ermöglicht werden. Zu diesem intuitiven Bearbeiten gehören das Hinzufügen von
neuen Eintragungen auf dem Postit, das Löschen eines Eintrages, die Größenänderung
des Postits und das Verschieben des Postits an sich.
Ein weiterer zentraler Aspekt ist die Erstellung von Arbeitsgruppen und die damit
verbunden Teilbarkeit der Vorschläge und Ideen.

5
 3 Software für Postits, Listen

3.1 http://stickies.softonic.de/

Auf dieser Webseite findet sich eine Anwendung für den Desktop. Die Software läuft lokal
auf dem Rechner, mit einem Klick auf ein Icon wird ein neues „Sticky“ am Desktop erstellt,
welches gleich direkt bearbeitet werden kann. Farb- und Größenänderungen sind auch
möglich.

Abbildung 1: Screenshot mit zwei aktiven "stickies"

Als Zusatzfunktion können bestimmte Notizen zu einer bestimmten Zeit oder bei
Ausführung eines bestimmten Programmes geöffnet werden.
Die Notizen versendet "Stickies" bei Bedarf per E-Mail oder als Sofortnachricht über das
Netzwerk.
Der Schwerpunkt dieser Anwendung liegt auf der lokalen Komponente, die Notizen sind
eher als Gedächtnisstütze gedacht.1

1 http://stickies.softonic.de/ (Abruf am 14.8.2009)

6
 3.2 http://tadalist.com/

Ta-da-List ist eine Websoftware für das Erstellen von einfachen ToDo-Listen. Nach der
Erstellung eines Accounts kann man sofort die erste Liste anlegen. Das Design ist sehr
einfach gehalten, es besteht zum Großteil aus farbigen Textlinks.

Abbildung 2: Screen - Beispiel für eine "Tada"-Liste

Der frisch erstellten ToDo-Liste kann man nun einzelne Einträge oder Aufgaben, die man
zu erledigen hat, hinzufügen. Erledigte Dinge kann man mit einem Klick "abhaken", sie
wandern sogleich ans Ende der Liste. Zusätzlich gibt es noch die Möglichkeit die Items der
Liste per "Drag and Drop" neu zu arrangieren und die Liste mit anderen zu teilen.
Ta-da-List hat eher den Charakter eines Webformulars und eignet sich nur bedingt als
Postitersatz.2

2 http://tadalist.com/ (Abruf am 14.8.2009)

7
3.3 Google Tasks

Google bietet zusätzlich zum Email Service „gmail“ auch einen Aufgabenplaner an: die
„Gmail Tasks“. Im Menü des Gmail-Accounts findet sich der Punkt „Aufgabenplaner“.
Dieser Link öffnet eine ToDo-Liste am Bildschirm, wo neue Punkte erstellt werden können.
Erledigte Dinge werden einfach abgehakt. Diese erscheinen dann durchgestrichen.
Der große Vorteil dieser Liste ist das Zusammenspiel mit dem Gmail-Kalender, wo
Listeneinträge, die mit Datum versehen sind, gleich eingetragen werden.
Aufgabenlisten können auch ausgedruckt und auch auf mobilen Geräten abgerufen
werden. 3

Abbildung 3: Screen - Gmail Tasks

3 http://mail.google.com/mail/help/tasks/ (Abruf am 25.9.2009)

8
4 Verwendete Technologie

4.1 HTML
HTML ist die Abkürzung für HyperText Markup Language.
Am 24. Oktober 1995 veröffentlichte das Federal Networking Council (FNC) eine
Definition des Internet aus der (durchaus abstrakten) Sicht einer Bundesbehörde:

Abbildung 4: Die Definition des Internets

Quelle: http://www.netplanet.org/geschichte/internet.shtml

Diese auch heute noch geltende Definition wird wiederum von vielen Experten als
Geburtsstunde des Internet gesehen, weil mit dieser Definition ein Beratergremium der
US- Regierung offiziell das Internet formulierte, das bis dato aus offizieller Sicht
weitgehend auf einer Vielzahl von Absichtserklärungen, Vereinbarungen, ungeschriebenen
Regeln und einfach vorhandenen Tatsachen gelagert war.4

HTML ist eine einfache Sprache, die aus einzelnen Tags (Etikett, Anhänger) besteht. Diese
Tags haben eine hierachische Ordnung, sodass eine Webseite als Baumstruktur

4 http://www.netplanet.org/geschichte/internet.shtml (Abruf 3.8.2009)

9
dargestellt werden kann.
Die einzelnen Tags werden von spitzen Klammern umschlossen (z.B. <body> ). Das Ende
des Wirkungsbereiches eines Tags wird mit einem Schrägstrich angezeigt (</body>), d.h.
alles was sich zwischen dem öffnenden und dem schließenden Tag befindet, ist eine
Ebene tiefer in der Hierachie angesiedelt.
Die Sturkturierung des Textes kann mittels Tabellen vorgenommen werden. Der Vorteil
darin ist, dass Tabellen wiederum Tabellen beinhalten können und somit auch
kompliziertere Designs umsetzbar sind.
Doch die Verwendung von Tabellen bringt andererseits auch die Gefahr der
Unübersichtlichkeit mit sich. Sobald man eine ausereichend tiefe Verschachtelung der
einzelnen Tags erreicht, kann man vom Code nicht mehr auf die visuelle Ausgabe
schließen. Das Designen von solchen Internetseiten ist nur mehr mit sogenannten
"WYSIWYG" - Editoren (steht für "What You See Is What You Get") möglich, die das
Bearbeiten einer Internetseite vereinfachen, indem sie den Code übersetzen und die Seite
direkt anzeigen, ähnlich einer Textverarbeitungssoftware.
Mit der Entwicklung von CSS (siehe Abschnitt CSS) wurden die Tabellen als
Gestaltungselement weitgehend abgelöst. Die einzelnen Inhalte der Webseite konnten
nun in sogenannte Container verpackt werden, in der HTML Sprache "div" genannt. Diese
"div-Container" erlaubten eine freie Positionierung und Gestaltung von Inhalten.
Die Syntax von HTML ist sehr fehlertolerant, was vor allem in Verbindung mit Tabellen zu
unerwünschtem Verhalten führen kann. Ob eine Webseite standardkonform programmiert
wurde, kann mit einem Validator überprüft werden. 5

4.2 CSS
Der nächste Schritt in der Evolution der Gestaltung von Webseiten wurde mit den
"Cascading Style Sheets" - kurs CSS - getan. Diese ermöglichten es erstmals Design von
Inhalt zu trennen.
Es war nun möglich eine Seite mit verschiedenen Designs zu verknüpfen, zum Beispiel je
nach Ausgabegerät, also ein Design für den Bildschirm und eine Druckansicht, wo nicht
benötigte Menüs und Elemente ausgeblendet wurden.
CSS kann als seperate Datei eingebunden werden, oder direkt im HTML Dokument
definiert werden. Grunsätzlich ist dabei erstere Variante zu bevorzugen, da sich dann alle
5 Link: http://validator.w3.org/

10
Formatierungen in einer Datei befinden und schnell gefunden werden können, falls eine
Änderung notwendig sein sollte.
Bei den Formatierungen gibt es zwei Grundtypen - eindeutige Formatierungen für
Elemente die nur einmal vorkommen (sogenannte "ids") - diese beginnen in der CSS
Sprache mit einer Raute # - und Formatierungen für Elementgruppen (sogenannte
"Klassen") - diese beginnen mit einem Punkt.
Ein weiterer Vorteil besteht darin, dass mehrere Formatierungen kombiniert werden
können, mit anderen Worten, ein Element kann viele Klassen haben, die dann aufeinander
aufbauen ("cascading").

4.3 PHP
PHP ist der Nachfolger von PHP/FI ("Personal Home Page / Forms Interpreter"). PHP/FI
wurde 1995 von Rasmus Lerdorf geschaffen. Ursprünglich war PHP/FI ein Set von Perl
Skripten zur Erfassung der Zugriffe eines Webauftrittes. Er nannte dieses Set von Skripten
'Personal Home Page Tools'. Als dann mehr Funktionalität benötigt wurde, schrieb
Rasmus eine viel größere Umsetzung in C, welche auch mit Datenbanken kommunizieren
konnte, und den Benutzern die Entwicklung einfacher dynamischer Webapplikationen
ermöglichte. Rasmus entschloss sich, den Sourcecode von PHP/FI zu veröffentlichen,
sodass ihn jeder benutzen, von Fehlern bereinigen, und weiterentwickeln konnte.

Die Sprache PHP wurde dann sukzessive ausgebaut und verändert um den steigenden
Anforderungen gerecht zu werden, wie zum Beispiel der Unterstützung einer großen
Auswahl von Datenbanken und APIs ("Application Programming Interface") von
Drittanbietern.
PHP 5 wurde im Juli 2004 nach langer Entwicklung und mehreren Vorabversionen
veröffentlicht.6

PHP eignet sich sehr gut zur Programmierung von Datenbankanbindungen. Es werden
viele Funktionen mitgeliefert, die den Umgang mit diversen Datenbanksystemen sehr
erleichtern und eine effiziente Programmierung ermöglichen.
Für Webseiten besonders wertvoll ist das "session management", also das Verwalten von
einzelnen Sitzungen. Am Webserver werden Variablen angelegt, die nur für den aktuellen

6 http://www.php.net/manual/de/history.php.php, (Abruf 1. 8. 2009)

11
Benutzer zugänglich sind. Damit ist es möglich den Zustand einer Webseite oder
benutzerspezifische Daten, wie zum Beispiel Warenkörbe in Webshops, für jeden
einzelnen Benutzer abzuspeichern. PHP stellt für dieses "session management" eigene
Funktionen zur Verfügung.
Einer der größten Stärken von PHP ist es, dass der Programmcode an jeder Stelle in einer
Webseite eingebaut werden kann. Mit anderen Worten, man kann HTML und PHP
gemeinsam verwenden. Der Server interpretiert die Teile der Webseite, die PHP Code
beinhalten und generiert dann je nach Ergebnis die endgülte HTML Seite, die an den
Browser gesendet wird.

4.4 Javascript
Gegen Ende des Jahres 1995 stellte die Firma Netscape die neueste Version ihres
Internet-Browsers vor. Unter anderem war auch eine Sprache namens "LiveScript"
eingebaut, mit der man auf HTML-Seiten Einfluss nehmen konnte. Die Syntax dieser
Sprache lehnte sich an Java an, und aus marketingtechnischen Gründen wurde die
Programmiersprache schließlich in "JavaScript" umbenannt.7

Javascript ist wie der Name schon vermuten lässt, eine Scriptsprache. Das heißt der Code
wird bei jedem Aufruf vom Webserver intrepretiert.
Innerhalb einer HTML Seite wird Javascript mittels <script type="text/javascript"></script>
Tags (Etikett, Anhänger) gekennzeichnet. Alles was innerhalb zweier solcher Tags steht,
wird als Javascript interpretiert und ausgeführt.
Die große Stärke von Javascript ist es, den DOM-Tree (Document Object Model, Tree
bezeichnet die baumartige Struktur einer Webseite) verändern zu können. Es ist möglich
die Eigenschaften einzelner Knoten zu ändern, Knoten zu entfernen oder auch
einzufügen.
Eine eindeutige Identifizierung einzelner Seitenelemente wird mit der "id" - Eigenschaft der
HTML Tags erreicht, welche den Elementen eine einzigartige Kennzeichnung, sozusagen
ein Namensschild, verleiht. Über dieses "Namensschild" können die einzelnen Elemente
gefunden und verändert werden.

7 http://steffke.de/jbbs/doc/javascript_ajax/01_einleitung_001.htm, (Abruf 3.8.2009)

12
4.5 AJAX
AJAX steht für „Asynchronous JavaScript and XML". Die folgende Abbildung zeigt das
asynchrone Modell der Kommunikation zwischen Server und Client. Dieses Modell
ermöglicht es Anfragen an den Server zu stellen und diese auszuwerten, ohne dass der
Benutzer der Webseite etwas davon merkt. Die linke Seite der Abbildung stellt das
traditionelle Modell der Datenübertragung zwischen Server und Client dar, wo die
Webseite nach jeder Anfrage neu geladen wird. Auf der rechten Seite wird das AJAX
Modell dargestellt, wo die Anfragen und Antworten des Servers vom AJAX Modul
gesteuert werden. 8

Abbildung 5: Klassisches Modell und AJAX Modell

Quelle: http://www.adaptivepath.com/ideas/essays/archives/000385.php

Die Architektur von AJAX basiert auf der Kombination folgender Komponenten:
– (X)HTML und CSS, die eine standardkonforme Seitenstruktur und Präsentation
sicher stellen.
– DOM (Document Object Model) zur dynamischen Anzeige, Interaktion und
Manipulation von Seitenstrukturen

8 http://www.adaptivepath.com/ideas/essays/archives/000385.php, 3.8.2009

13
 – XML (eXtensible Markup Language) zum Nachladen, Austauschen und Ändern von
lokal und extern gespeicherten Daten (dies kann auch HTML oder einfacher Text
sein)
– XMLHttpRequest-Objekten zur Generierung und Vermittlung von Anfragen sowie
Asynchroner Datenübermittlung zwischen der Client- und der Serverseite.
– JavaScript, mit dem alle aufgelisteten Techniken miteinander in einer Ajax Engine
verknüpft werden.9

AJAX stellt sozusagen die Brücke zwischen den Technologien dar und sorgt für eine große
Verbesserung und Flexibilität der Webseiten. Einfach die Möglichkeit, dass Anfragen an
den Server im Hintergrund ausgeführt werden können, bietet große
Gestaltungsmöglichkeiten.
Dadurch kann man die Inhalte von einzelnen Teilen einer Webseite einfach austauschen.
Ideal für diese Vorgehensweise ist es, wenn Inhalt und Design getrennt sind - (siehe CSS).
Es gibt mittlerweile eine Vielzahl von Bibliotheken und Javascriptsammlungen, die das
Programmieren mit AJAX sehr vereinfachen, und es ermöglichen, komplexe Seiten zu
entwerfen, die beinahe die Funktionalität einer Desktopsoftware besitzen. Ein gutes
Beispiel hierfür sind die "google apps", wo neben dem Mailversand auch Webseiten für
Tabellenkalkulation und Textverarbeitung zu finden sind.10

4.6 Prototype
Prototype ist ein Javascript Framework für den Umgang mit AJAX. Anfragen an den Server
können sehr einfach und übersichtlich gestaltet werden, auch kompliziertere Anfragen sind
kein Problem. Neben der simplen Anfrage "Request" existiert mittles "Update" auch die
Möglichkeit Inhalte gleich auszutauschen. Eine sehr beliebte Funktion ist die
Autovervollständigung von Eingabefeldern.

4.7 Script.aculo.us
Diese Scriptsammlung ist eine Javascript Bibliothek, die viele visuelle Effekte beinhaltet.
Jeder Effekt hat Parameter für die Beinflussung der Darstellung. Die Palette der
9 Friedman, S.675
10 Linkbeispiel: http://www.google.com/apps/intl/de/business/index.html

14
Möglichkeiten reicht von Überblendungseffekten, Größenänderungseffekten bis hin zu
Drag & Drop Effekten.

4.8 MySql
SQL steht für Structured Query Language und ist die Datenbanksprache für relationale
Systeme. Konzeptionell ist eine relationale Datenbank eine Ansammlung von Tabellen.
Hinter den Tabllen steht mathematisch die Idee einer Relation: ein grundlegender Begriff,
der dem gesamten Ansatz den Namen gegeben hat. 11

MySQL ist eine der bekanntesten Open Source Varianten einer SQL Datenbank und bei
vielen Serverpaketen bereits vorinstalliert. Ein beliebtes "all in one" Paket ist "xampp", wo
nach der Installation ein Apache Webserver, MySQL Datenbanken und PHP verfügbar
sind.12

Anfragen in einer relationalen Datenbanksprache werden mit Hilfe des SFW-Blocks

formuliert, der nach den ersten drei Klauseln einer solchen Anfrage (select, from, where)
benannt ist:

-- Anfrage
select Projektionsliste
from Relationenliste
[where Bedingung]

Die select-Klausel
• gibt die Projektionsliste an, die das Ergebnisschema bestimmt und
• integriert auch arithmetische Operationen und Aggregatfunktionen

Die from-Klausel
• legt die zu verwendenden Relationen (Basisrelationen oder Sichten) fest und
• führt enventuelle Umbenennungen durch (mithilfe von Tupelvariablen oder
Aliasnamen)
11 Saake, Sattler, Heuer, S11
12 Linkbeispiel: http://www.apachefriends.org/de/xampp.html

15
 • Sind mehrere Relationen angegeben, so werden diese über das kartesische
Produkt miteinander verknüpft.

Die optionale where-Klausel

• spezifiziert Selektionsbedingungen und
• Verbundbedingungen, um aus dem kartesischen Produkt einen Gleichverbund
(Equi Join) zu machen
• Darüber hinaus sind in der where-Klausel auch geschachtelte Anfragen erlaubt,
d.h. in der where-Klausel kann wieder ein SFW-Block angegeben werden.

Neben diesen drei Klauseln können in Anfragen noch weitere eingesetzt werden, u.a. die
group by-Klausel zur Gruppierung von Tupeln einer Relation über gleiche Attributwerte,
sowie die oder by-Klausel zur Sortierung der Ergebnisse.13
Zum Aktualisieren einzelner Tabellenfelder wird die update-Klausel verwendet, die
syntaktisch wie folgt notiert wird:

update Relationenname
set Attribut1 = Ausdruck1, ..., Attributn = Ausdruckn
[where Bedingung]

Die Wirkung der update-Anweisung kann wie folgt charakterisiert werden: In allen Tupeln
der Relation "Relationenname", die "Bedingung" erfüllen, werden die Attributwerte wie
angegeben ersetzt. 14

13 Saake, Sattler, Heuer, S219

14 Saake, Sattler, Heuer, S239

16
 5 Devices

5.1 iPhone
Im Jahre 2005 verkündete die Firma Apple durch ihren Mobilbereichs-Chef Stanley T.
Sigman eine revolutionäre Neuentwicklung auf dem Medienmarkt: das iPhone. Über 150
Millionen US Dollar wurden in dessen Entwicklung gesteckt, welche völlig abgeschottet
von der Umwelt vonstatten ging, sogar die Hard- und Softwareentwickler arbeiteten
voneinander getrennt. Nachdem das iPhone, ein Smartphone, das über einen
Medienplayer verfügt und seine Steuerung weitgehend über den Bildschirm erfährt, am
9.1. 2007 durch die Firma Apple erstmals der Öffentlichkeit vorgestellt worden war,
kündigte der Hersteller wenig später bereits den Verkaufsbeginn in den USA an.
Apple-Mitbegründer Steve Jobs, der mit an der erfolgreichen iPhone Geschichte beteiligt
war, kündigte im September 2007 eine Preissenkung des Gerätes an, welches noch im
selben Jahr vom US-Magazin "Time" zur Erfindung des Jahres gekürt wurde. Am 9.
November 2009 wurde das Gerät dann erstmals auch in Europa angeboten.
Und die iPHone Geschichte zog weitere Kreise: Im März 2009 wurde es in über 80
Ländern verkauft.15
Das iPhone verwendet den Safari Browser zur Anzeige von Webseiten, andere
Mobiltelefone setzen auf den Opera Mobile Browser.

5.2 Personal Digital Assistant, Smartphone

Personal Digital Assistants (PDAs) gibt es mittlerweile in den verschiedensten

Abwandlungen, XDA über MDA oder VDA bis hin zum Smartphone. Sie alle stellen aber
prinzipiell nichts weiter dar, als ein PDA mit erweiterter (Telefon-)Funktionalität, wobei jeder
größere Hersteller seine eigene Bezeichnung für diese Art von Geräten hat.
Die Bildschirme bei Smartphones sind in der Regel etwas größer als bei gewöhnlichen
Mobiltelefonen, außerdem bieten Smartphones oftmals eine "QWERTZ" - Tastatur oder
werden mit einem Stift oder Touchscreen bedient.16

15 http://www.infos-zum-iphone.de, 8.8.2009
16 Bieh, S. 22, 23

17
6 Das „Postit“-System

6.1 Struktur

Das System ist grundsätzlich in zwei große Teile geteilt, die über Javascript und AJAX
miteinander verbunden sind. Es sind dies auf der einen Seite der PHP/HTML Teil, also das
sogenannte „frontend“, jener Teil mit dem der Benutzer arbeitet, und auf der anderen Seite
das „backend“, die MySQL Datenbank, in der die Daten gespeichert sind.
Die Anfragen an den Server werden über eigene Ereignisse („Events“) ausgelöst und
gesteuert.
Durch die spezielle Anforderung der mobilen Endgeräte ist der visuelle Teil für den
Benutzer noch einmal unterteilt, das heißt es gibt zwei grundsätzlich verschiedene
Arbeitsoberflächen, die aber im Hintergrund auf denselben Daten operieren.

Abbildung 6: Kommunikationsdiagramm

18
6.1.1 Backend: MySQL

Abbildung 7: Tabellenrelationen

Der Datenbankteil besteht aus vier Datentabellen: users, groups, postits, items (in Gelb
dargestellt). Jeder Datensatz in diesen Tabellen bekommt eine eindeutige Id-Nummer
zugewiesen, mit welcher alle den Datensatz betreffenden Operation durchgeführt werden.
Diese Datentabellen sind über Verbindungstabellen miteinander in Beziehung gesetzt.
users_postits: In dieser Tabelle befinden sich die Verbindungen der Benutzer zu den
privaten Postits, also zu Postits die nicht öffentlich und in keiner Gruppe zu finden sind. Es
wird jeweils eine "User-Id" und eine "Positit-Id" in einer Tabellenzeile gespeichert, sprich:
ein bestimmter Benutzer wird mit einem bestimmten Postit in Beziehung gesetzt.
Hier wird eine "one-to-many" Relation verwendet: Ein Benutzer kann viele Postits haben,
aber ein Postit kann nur einen Benutzer haben.
users_groups: Diese Tabelle verbindet die Benutzer mit den einzelnen Gruppen. Auch
hier bekommt ein Benutzer eine Gruppen-Id zugewiesen. Es ist eine "many-to-many"
Relation: Ein Benutzer kann viele Gruppen haben und auf der anderen Seite kann eine
Gruppe viele Benutzer haben.
groups_postits: Die Verbindung von Gruppen und Postits. Ein Postit kann nur eine
Gruppe haben, aber eine Gruppe kann viele Postits haben. ("one-to-many").
items: Diese Tabelle ist direkt mit der Postit-Tabelle verbunden, d.h. jedes Item hat nur ein
Postit dem es zugeordnet ist ("one-to-one"). Die Id des Postits wird in einer Spalte des
Datensatzes für ein Item abgespeichert.

Um die Postits eines Benutzers für eine bestimmte Gruppe zu finden, sucht man zuerst

19
die Gruppe des Benutzers. Mit dieser Gruppen-Id sucht man nun in der groups_postits
Tabelle alle Postit-Ids mit ebendieser Gruppen-Id.

6.2 Benutzerverwaltung

Abbildung 8: Scripten für die

Benutzerverwaltung

6.2.1 Benutzer anlegen

Um das System benutzen zu können, braucht man einen gültigen Account. Diesen legt
man entweder über die Eingabemaske auf der Webseite selbst an, oder man bekommt
eine Einladung zu einer Gruppe. Hier wird automatisch ein Account angelegt, das
Passwort kann man nachträglich ändern.

id username password email last_login

1 admin $H$7q1URbRN7dcVxOFlcuR42kgnhRVBns/ mail@mail.com 0
Tabelle 1: SQL Tabelle "users"

In der Datenbank werden die Daten des Benutzers abgespeichert. In der ersten Spalte
befindet sich die „id“, die interne Nummer des Datensatzes. Diese id ist die Verbindung zu
allen Daten die diesen einzelnen Benutzer betreffen. Mit ihr lassen sich alle relevanten
Daten (Postits, Gruppenzugehörigkeit) feststellen.
In der zweiten Spalte username befindet sich, wie der Name schon ausdrückt, der
Benutzername. Dieser Name taucht auf den Postits als Name des Autors auf, und
natürlich auf allen Email Aussendungen, die diesen Benutzer betreffen.
Das Passwort wird in der Spalte mit dem Namen „password“ gespeichert. Es wird mittels
Verschlüsselungsverfahren MD5 verschlüsselt und so in der Datenbank abgespeichert.

20
Die Email Adresse des Benutzers wird in der vorletzten Spalte festgehalten.
Gruppeneinladungen und Änderungsbenachrichtigungen werden an diese Adresse
gesendet.
Die Spalte „last_login“ beinhaltet den Zeitstempel („timestamp“) der letzten Anmeldung des
Benutzers.

6.2.2 Benutzer ändern - Visitenkarte

Jeder Benutzer hat eine persönliche

Visitenkarte. Diese beinhaltet ein Formular
um die persönlichen Daten zu ändern.
Mit einem Klick auf die Schaltfläche "Daten
ändern" wird das Script
"user_change_data" aufgerufen.
Im ersten Schritt wird überprüft ob alle
notwendigen Eingaben vorhanden sind.
Abbildung 9: Visitenkarte eines Benutzers

Fehler sind:

• Benutzername leer
• Passwort nicht wiederholt
• Passwörter nicht identisch
• Email Adresse beinhaltet keinen Punkt oder kein @-Zeichen.

Das Script unterscheidet dann zwischen den beiden Fällen ob die Passwortfelder leer sind
oder nicht. Im Falle von zwei leeren Passwortfeldern wird eine Aktualisierungsfunktion aus
der Datenbankbibliothek aufgerufen, die das Passwort nicht verändert.
Im anderen Fall, also bei ausgefüllten Passwortfeldern, wird eine Aktualisierungsfunktion
aufgerufen, die das neue Passwort zuerst mittels MD5 verschlüsselt und dann alle neuen
Daten aktualisiert. Abschließend werden noch die Daten der aktuellen Session erneuert.
Im Falle eines Fehlers wird die Fehlermeldung in eine Session Variable gespeichert, die
Visitenkarte neu geladen und der Inhalt der Fehler-Variable angezeigt.

21
6.2.3 Login

Auf der Startseite der Anwendung befindet sich das Formular für die Anmeldung.
Benutzername und Passwort werden abgefragt und an das Login-Script weitergegeben.
Dieses Login-Script stellt die Verbindung mit der Datenbank her und verwendet die
Funktion: getUserdata($username, $password) um die Daten des Benutzers
auszulesen. Die aufgerufene Funktion sucht in der Datenbank einen Benutzer mit dem
angegebenen Benutzernamen. Falls dieser Benutzer existiert, wird sein verschlüsseltes
Passwort gelesen und zusammen mit dem Passwort der Eingabemaske an eine
Vergleichsfunktion übergeben. Dort wird das Passwort der Eingabemaske mit MD5
verschlüsselt und anschließend mit dem MD5 Passwort aus der Datenbank verglichen. Bei
einer Übereinstimmung werden die Daten des Benutzers als assoziatives Array
zurückgegeben, welches in eine Session Variable gespeichert wird. Zusätzlich wird noch
eine Session Variable gesetzt um zu kennzeichnen dass der Benutzer angemeldet ist:
$_SESSION["user_logged_in"] = TRUE;

6.2.4 Benutzer suchen

In der Webansicht existiert eine Textfeld, mit welchem Benutzer

gesucht werden können. Dies ist ein Paradebeispiel für die
Verwendung der Textvervollständigung mittels AJAX.
Unter dem Textfeld befindet sich ein Div, welches als Container für
die Ergebnisliste der gefundenen Einträge fungiert.
Mittels Javascript wird ein AJAX-Autocompleter Objekt erzeugt,
welches als Paramter das Textfeld (search_user_field), die Id
Abbildung 10: Suchfeld
des Div-Containers (search_user_result), das Script, welches mit Autovervollständigung
die Ergebnisliste erzeugen soll (/db/search_user.php) und eine Liste mit Paramtern, die
die Wirkung des Programmes beinflussen, bekommt.
Diese letzten Paramter bestehen in diesem Fall aus:
• paramName: Der Name für die Variable mit der die Tastatureingabe an das
erzeugende Script weitergegeben wird
• minChars: Nach wievielen Zeichen wird das Script aufgerufen
• afterUpdateElement: Diese hier notierte Funktion wird aufgerufen, sobald der

22
 Benutzer einen Eintrag aus der Ergebnisliste ausgewählt hat. In unserem Fall ist
das openInvitationWindow - es wird also ein Fenster geöffnet, über welches der
ausgewählte Benutzer direkt in eine Gruppe eingeladen werden kann. (siehe
Benutzer einladen)

new Ajax.Autocompleter("search_user_field",
"search_user_result", baseDir + "/db/search_user.php",
{
paramName: "username",
minChars: 2,
afterUpdateElement : openInvitationWindow
});
Das aufgerufene Script (search_user.php) sucht in der Datenbank Benutzernamen, die
mit dem übergebenen Zeichen beginnen und generiert aus den gefundenen Einträgen
eine Liste:
foreach($users as $user)
echo "<li id=\"".$user["username"]."\">".$user["username"]."</a>";

6.3 Gruppenverwaltung

Abbildung 11: Scripten für die

Gruppenverwaltung

6.3.1 Gruppen erstellen

Die Funktionalität der Gruppenerstellung ist eine wichtige Grundfunktion. Sie ermöglicht
es, die Notizen gleich mit allen Gruppenmitgliedern zu teilen. Jeder in der Gruppe sieht
alle neuen Notizen sofort und kann gegebenenfalls selbst Änderungen vornehmen.

23
Eine neue Gruppe kann über einen Link angelegt werden. Dies ist sowohl in der
Webversion als auch in der mobilen Variante möglich. Die Erstellung einer neuen Gruppe
beinflusst zwei Datenbanktabellen. Zuerst einmal wird die neue Gruppe in die groups-
Tabelle eingetragen.

id name
1 Neue Gruppe
Tabelle 2: SQL-Tabelle "groups"

Anschließend muss der Ersteller natürlich als Mitglied der neuen Gruppe eingetragen
werden.

user_id group_id invitation security_token

1 1 0 NULL
Tabelle 3: SQL-Tabelle "user_groups"

Der Benutzer mit der Id "1" ist der Gruppe mit der Id "1" zugeordnet. Die Spalte "invitation"
kennzeichnet ob eine aktive Einladung in die Gruppe vorhanden ist - in diesem Fall wird
der Wert auf 0 (false) gesetzt. "invitation" und "security_token" werden im Kapitel
"Gruppeneinladungen" ausführlich erklärt.

6.3.2 Gruppe verlassen

Neben der Funktion eine Gruppe zu erstellen, ist es natürlich auch möglich eine Gruppe
wieder zu verlassen. Dies geschieht über einen Link, der erscheint wenn man sich in einer
Gruppe befindet, mit anderen Worten, wenn man sich nicht auf der privaten Pinnwand
befindet, denn diese kann natürlich nicht entfernt werden.
Der besagte Link aktiviert das Script "leave_group" welches den Benutzer aus der Gruppe
entfernt. Zusätzlich wird noch überprüft, ob der Benutzer der letzte in der Gruppe war. In
diesem Fall wird die Gruppe auch gleich mitgelöscht:

if(count(getUsersFromGroup($group_id)) == 0)
{
deleteGroup($group_id);

24
 }
Die Funktion "getUsersFromGroup" liefert ein Array über die Benutzer der Gruppe mit der
übergebenen Gruppen-Id. Die Funktion "count" zählt die Einträge in diesem Array, sprich
wieviele Elemente darin enthalten sind. Falls dabei Null herauskommt befindet sich kein
Benutzer mehr in der Gruppe und die angegebene Gruppe kann mit "deleteGroup"
gelöscht werden.

6.3.3 Gruppeneinladungen

Neben der Erstellung neuer

Gruppen ist es natürlich auch
notwendig andere Benutzer
in die Gruppen einladen zu
können. Dieser Vorgang kann
sowohl für bereits registrierte
Benutzer als auch für neue
Benutzer ohne Account
durchgeführt werden.
In der Abbildung ist das
Formular für die Einladung
Abbildung 12: Einladung für eine Gruppe versenden
eines Benutzers ohne
Account dargestellt.
In diesem speziellen Fall muss zuerst ein neuer Benutzer mit dem angegebenen Namen
angelegt werden. Dieser Benutzer bekommt ein Standardpasswort zugewiesen.
Das Script "user_send_invitation" überprüft die Vollständigkeit der benötigten
Informationen (Name muss angegeben sein, Email darf nicht leer sein und muss einen
Punkt und ein @ enthalten) und erstellt eine Zufallszeichenkette für die Einladung
("security_token"). Diese Zeichenkette hat den Zweck, dass nur der gewünschte
Benutzer die Einladung annehmen kann, beziehungsweise die Einladung nur einmal
angenommen werden kann.

25
user_id group_id invitation security_token
1 1 1 rVmozppRWkl9cV7HhHRh
Tabelle 4: SQL-Tabelle "user_groups"

Das Script verschickt anschließend eine Email, in der die notwendigen Daten enthalten
sind, um der Gruppe beizutreten:

Hallo Benutzer!

Benutzer2 hat dich in die Gruppe Neue Gruppe eingeladen!

Um die Einladung anzunehmen, verwende bitte folgenden Link:

http://postit.tugraz.at/accept_invitation.php?
userid=28&group_id=27&st=C1qlNn8HRg0ANMIvvmhD

Dein Benutzername lautet: Benutzer

Dein Passwort lautet: postit

Bitte ändere dein Passwort gleich nach dem ersten Anmelden, um

Missbrauch zu vermeiden.

Durch die Verwendung des Links wird das Script "accept_invitation" aufgerufen. Als
erstes überprüft das Script den Zusammenhang zwischen dem Benutzer, der Gruppe und
der Einladung. Laut der Email in der Abbildung wäre es die Überprüfung, ob es in der
Tabelle user_groups einen Eintrag gibt, der wie folgt aussieht:

user_id group_id invitation security_token

28 27 1 C1qlNn8HRg0ANMIvvmhD
Tabelle 5: SQL-Tabelle "user_groups"; Beispieleintrag

Wenn so ein Eintrag existiert, ist die Einladung gültig. Der Wert in der Spalte "invitation"
wird auf 0 gesetzt und der Wert von "security_token" entfernt. Somit gilt der Benutzer als
Mitglied der Gruppe mit der Gruppen-Id 27.

26
Ein erneuter Aufruf des Links in der Email hätte die Anzeige einer Fehlermeldung
("Einladung abgelaufen oder ungültig!") zur Folge und würde den Benutzer zum
Anmeldefenster führen.

Die zweite Möglichkeit einer Gruppeneinladung betrifft bereits angemeldete Benutzer.

Diese erhalten eine kürzere Email, in der nur der Gruppennamen und der Einladungslink
enthalten ist. Das dafür zuständige Script "user_send_invitation_registered"
überprüft hier noch zusätzlich ob der Benutzer bereits Mitglied der Gruppe ist, damit er
nicht zweimal der Gruppe beitritt.

Das Senden von Emails wird mit der in PHP eingebauten "mail" Funktion ausgeführt.

mail($email,$subject,$text,$header);

Hierfür werden einfach die benötigten Variablen als Strings zusammengestellt und dann
übergeben.

• $email: Die Email Adresse des Empfängers

• $subject: Der Betreff der Nachricht
• $text: Die Nachricht selbst
• $header: Eine Kopfzeile, die die Email Adresse des Absenders enthält

27
 6.4 Postits

Das Kernelement des Programmes stellen die Postits dar. Das Design ist betont schlicht
gehalten und an die Papierform der bekannten Notizzettel angelehnt. Wie auf einer
Pinnwand sind die virtuellen Notizblätter verschiebbar und können übereinander gelegt
werden. Zur besseren Unterscheidung der einzelnen Blätter können diese eingefärbt und
beliebig vergrößert werden (vgl. Abschnitt „Größenänderung“).

Abbildung 13 zeigt ein Postit in einem frühen Design-

Abbildung 13: erstes Design
stadium. Der Hintergrund war ein Bild mit fester Größe.
Durch die Anforderung, dass die Größe des Postits
variabel sein sollte, wurde von dieser Designentscheidung
wieder Abstand genommen. Der Hintergrund besteht nun
nur aus einer Farbe, die jedoch einfach austauschbar ist.
(vgl. Abschnitt „Farbänderung“).
Gut zu erkennen sind die einzelnen Elemente – mit
anderen Worten – die einzelnen Notizen, welche in den
nachfolgenden Kapiteln auch als "Items" bezeichnet
werden. Diese sind mit einem Klick angelegt und können
sofort bearbeitet werden.

Hier in Abbildung 14 sieht man die aktuelle Version eines

Postits. Dieses Design ermöglicht problemloses
Verschieben und Überdecken der einzelnen Postits. Auch
die Änderung der Größe und Farbe wird erheblich
erleichtert. (vgl. Abschnitt "Größenänderung",
"Farbänderung")

Abbildung 14: aktuelles Design

28
6.4.1 Design

Ein einzelnes Postit ist aus mehreren Div-Containern aufgebaut, die die einzelnen
Bereiche des Postits begrenzen. Der Term #id in den einzelnen Bezeichnungen der Div-
Container stellt die Id des Postits in der Datenbank dar. Somit ist eine eindeutige
Identifizierung im DOM-Tree des Dokuments sichergestellt.

Abbildung 15: Div-Container eines Postits

postit_#id: Dieses Div umschließt das Postit und enthält die Hintergrundfarbe sowie
Höhen- und Breitenangabe und Angaben zur Position des Postits. Hinzu kommt noch der
sogenannte „z-index“, also die Tiefeninformation. Mit diesem „z-index“ wird die
Verdeckung der einzelnen Divs realisiert. Alle diese Paramter werden bei der Anzeige der
Postits direkt aus der Datenbank gelesen und bei Veränderungen sofort in die Datenbank
geschrieben. Somit wird sichergestellt, dass die virtuelle Pinnwand immer in dem Zustand
verbleibt, in der sie zurückgelassen wird, in diesem Fall, wenn das Browserfenster mit der
Anwendung geschlossen wird.
postit_movebar_#id: Dieser Div-Container dient dazu, um das Postit verschieben zu

29
können. Wenn der Benutzer mit der Maus über das Div fährt, wird der Mauszeiger mit Hilfe
von CSS in einen Verschiebe-Zeiger verwandelt. Somit wird dem Benutzer die Möglichkeit
des Verschiebens visuell signalisiert. Außerdem wird mit der script.aculo.us - Funktion
"Draggable" ein verschiebbares Objekt erzeugt, welches das gesamte Postit beinhaltet.
postit_title_#id: In diesem Container wird der Titel des Postits angezeigt. Er ist mit einem
„onClick“-Event ausgestattet, das heißt bei einem Klick in den Bereich des Containers
wird das Script für den Bearbeitungsmodus aufgerufen. Bestätigt wird eine Änderung
simpel durch das Verlassen des Containers, also mit einem Klick außerhalb des
Containers. Dies wird durch das Javascript-Event „onBlur“ ermöglicht.
postit_content_#id: Dieser Container beinhaltet die eigentlichen Notizen, welche sich
wiederum in eigenen Containern befinden, damit ein separates Editieren ermöglicht wird.
Weiters ist dieser Container wichtig um eine automatische Größenänderung
vorzunehmen, falls der Inhalt nicht mehr in das Postit passt.

6.5 Verwaltung von Postits und Items

Abbildung 17: Scripten

Abbildung 16: Scripten für die für die Verwaltung von
Postitverwaltung Items

6.5.1 Postit erstellen

In der oberen linken Ecke des Arbeitsbereiches gibt es einen Link mit Namen "Neues
Postit anlegen". Dieser Link kann mit gedrückter linker Maustaste auf die Arbeitsfläche
gezogen werden. An der Stelle, wo die Maustaste losgelassen wird, wird ein neues Postit

30
erstellt. Dies wird durch folgenden Aufruf realisiert:
addPostit("Neues Postit", $user_id, $group_id, $top, $left);

"$user_id" bezeichnet dabei die Nummer des Benutzers, "$group_id" bezeichnet die
Nummer der Gruppe, in welcher das neue Postit erstellt werden soll, "$top" und "$left"
sind die Koordinaten der linken oberen Ecke des Postits. Dieses Koordinatenpaar ist dabei
genau die Stelle, an der der Erstellungslink losgelassen wurde.
Nach dem Eintrag in die Datenbanktabelle der Postits muss noch die Verbindung zu einer
Gruppe hergestellt werden.
Falls das neue Postit auf der privaten Pinnwand erstellt wurde, wird die Nummer des
Postits (die Nummer des zuletzt eingefügten Datensatzes) in die Tabelle "user_postits"
eingetragen, andernfalls zusammen mit der Gruppennummer in die Relationentabelle
"groups_postits". (siehe Abschnitt "Backend:MySQL").
Abschließend wird der Arbeitsbereich neu geladen, um das frisch erstellte Postit
anzuzeigen.

6.5.2 Titel ändern

Der Titel eines Postits ist in einem eigenen Div Container verpackt.
Wenn man nun in diesen Container klickt, wird folgendes AJAX
Script aufgerufen:
Abbildung 18: Titel
ändern

if (title_textfield_active == false){
var title_div = "postit_title_"+id;
var title_textfield = "title_textfield_"+id;

if (title == "Neues Postit")

$(title_div).innerHTML = "...onBlur = updateTitle("+id+");..."
else
$(title_div).innerHTML = "...";

$(title_textfield).focus();
title_textfield_active = true;
}

title_textfield_active fungiert hier als Signal, um festzustellen ob das Titelfeld aktiv

oder inaktiv ist. Aktiv bedeuted, dass der Benutzer eine Eingabe macht. Falls das Titelfeld
nun inaktiv ist, werden zuerst die Variablen für die Container festgelegt, damit die richtigen

31
Felder manipuliert werden können.
Falls im Titelfeld der Text "Neues Postit" steht, wird ein leeres Textfeld erzeugt (siehe
Abbildung), ansonsten ein Textfeld mit Titeltext. Beim Verlassen des Textfeldes (onBlur -
Statement im Codebeispiel) wird ein weiteres Script mit Namen updateTitle aufgerufen.
Dieses AJAX Script schreibt den neuen Titel in die Datenbank und kennzeichnet den Titel
Container als inaktiv:
title_textfield_active = false;

Abschließend wird die Anzeige des Titel Containers aktualisiert.

6.5.3 Größenänderung

Jedes Postit besitzt in der rechten unteren Ecke einen speziellen

Container, um die Größe des Divs zu verändern. Beim Überqueren
des Divs mit der Maus verwandelt sich der Mauszeiger in einen
Größenänderungszeiger damit der Benutzer weiß, dass er hier die
Abbildung 19: Div für Größe ändern kann.
die Größenänderung
Um dies zu erreichen wird zuerst mit Hilfe der script.aculo.us -
Funktion "Draggable" ein Objekt erzeugt, das am Bildschirm verschoben werden kann. Für
den Benutzer wird dies durch zwei graue Linien angezeigt, die den verschiebbaren
Container kennzeichnen. Sobald das Objekt abgesetzt wird, das heißt sobald der Benutzer
am Ende des Verschiebevorgangs die Maustaste loslässt, wird die relative
Positionsänderung an ein AJAX Script gesendet, welches die neuen Größen des Postits
ausrechnet - also die relativen Änderungen in X-Richtung zur Breite und in Y-Richtung zur
Höhe addiert. Dann wird die Datenbank aktualisiert und auch die Arbeitsfläche neu
geladen, damit die Größenänderung sichtbar wird.

Die zweite Möglichkeit einer Änderung ist die automatische Anpassung der Postitgröße,
falls das Postit in vertikaler Richtung zu klein wird.
Dabei wird die aktuelle Höhe des Inhaltscontainers (postit_content) mit der Höhe des
Postits verglichen. Der Inhaltscontainer hat keine fixe Höhenangabe, daher kann er nach
unten wachsen und schließlich auch über die Grenzen des Postits hinausragen.
Bei jeder Aktualisierung eines Items wird folgende Funktion aufgerufen:

checkHeight(id, content_height, postit_height, postit_width)

32
In dieser Funktion werden die beiden Höhenangaben miteinader verglichen und falls die
Höhe des Inhalts (content_height) größer als die Höhe des Postits (postit_height)
sein sollte, wird die Höhe des Postits in der Datenbank korrigiert und die Arbeitsfläche neu
geladen. Die Breitenangabe dient lediglich dazu, das bereits vorhandene Datenbankscript
für die Größenänderung verwenden zu können.

6.5.4 Farbänderung

In der Kopfzeile eins jeden Postits befindet sich ein

Icon, welches für die Farbauswahl zuständig ist. In
der Grundstuktur eines Postits ist dieser
Abbildung 20: Postit mit aktivierter
Frabauswahl
Farbauswahlcontainer von Anfang an vorhanden, er
besitzt jedoch die Eigenschaft unsichtbar zu sein.
Mit einem einfach CSS Befehl wird der gewünschte Effekt erzielt:

<div id="color_selector_$id" style="visibility:hidden">

...
<span onClick="changeColor($id, 'yellow');" class="color_icon"> <img src=
"images/color_icon_yellow.jpg"></span>
...
</div>

Der Befehl visibility:hidden macht den gesamten Container unsichtbar, besser

gesagt er wird vom Browser einfach nicht angezeigt, aber der Platz, den er benötigen
würde, wird sehr wohl reserviert. Mit einer einfachen Änderung in visibility:visible
kann der Container samt Inhalt sichtbar gemacht werden, was auch bei einem Klick auf
das Farbauswahlicon geschieht.
Im Codebeispiel ist stellvertretend für jede Farbe das Auswahlfeld für Gelb dargestellt. Das
onClick-Event löst den Aufruf des Farbänderungsscriptes aus, welches als Paramter die
Nummer des Postits und die gewünschte Farbe übegeben bekommt:
changeColor($id, 'yellow')
Hier werden wieder die bekannten Schritte ausgeführt: Aufruf eines Datenbankscriptes um
die Farbänderung in den Datensatz des richtigen Postits zu schreiben und ein
anschließendes Aktualisieren der Arbeitsfläche, um die Farbe des Postits auch visuell zu
ändern. Abschließend wird der Farbauswahlcontainer wieder versteckt.

33
6.5.5 Positionen

Fährt der Benutzer mit der Maus über den Container mit
dem Namen postit_movebar (siehe Abbildung), wird ein
verschiebbares Objekt erzeugt. Wenn der Benutzer nun
Abbildung 21: Container für das
Verschieben des Postits immer wieder über den Container fährt, würden immer
neue Objekte erzeugt werden. Um das zu vermeiden,
wird das Objekt wieder zerstört, sobald der Benutzer mit der Maus den Bereich des
Containers verlässt.

... onMouseOver="createDraggable($id);" onMouseOut="destroyDraggable();

Da es immer nur ein "Draggable"-Objekt geben kann, braucht die Zerstörungsfunktion

destroyDraggable auch keinen Parameter, es wird immer das aktuelle Objekt gelöscht.
Damit ist es möglich ein Postit auf die gewünschte Position am Bildschirm zu verschieben.
Die Beendigung des Verschiebevorgangs löst ein AJAX Script aus, welches die neue
Position in die Datenbank schreibt und die virtuelle Pinnwand aktualisiert.

6.6 Items

Nach der Erstellung eines neuen Postits ist bereits ein Item
angelegt. Mit einem Klick auf den Text des Items wird der
Inhalt des Item-Containers durch ein Textfeld ersetzt, in dem
der Text bereits markiert ist.
Das folgende Codebeispiel stellt die Änderungsfunktion dar,
die den Inhalt des Items mit einem Textfeld tauscht.
Abbildung 22: Items in
Bearbeitung

if (item_textfield_active == false){
var item_div = "item_"+id;

$(item_div).innerHTML =
"<textarea id=\""+item_textarea+"\" rows=\"3\"
class=\"textarea_active\" onFocus=\"this.select();\"
onBlur=\"updateItem("+id+","+postit_id+");\" >" +value+"

34
 </textarea>";

item_textfield_active = true;
}

Die Variable item_textfield_active dient wie im Abschnitt "Titel ändern" dazu, um zu

kennzeichnen, dass das Textfeld aktiv ist. Diese Abfrage sorgt dafür dass immer nur ein
Textfeld aktiv sein kann.
Wenn kein Item aktiv ist, wird das mit der Maus angeklickte Item gesucht, der Container
hat praktischerweise eine eindeutige Kennzeichnung, nämlich "item_" gefolgt von der
Nummer des Items, also z.B.: "item_192". Der Inhalt dieses Containers wird dann mit
einem Textfeld ("<textarea>") ausgetauscht. Dieses Textfeld erhält nun ein onBlur-Event,
welches ein Script für die Aktualisierung des Itemtextes aufruft (updateItem).
In diesem Update-Script werden alle deutschen Sonderzeichen und auch Zeilenumbrüche
in HTML Code übersetzt, damit es keine Anzeigeprobleme gibt. Nach diesem Schritt wird
das abschließende Datenbankscript aufgerufen, welches nun den neuen Text im
Datensatz des jeweiligen Items aktualisiert. Im Unterschied zu Größen- oder
Positionsänderungen wird in diesem Fall nicht die ganze Arbeitsfläche neu geladen,
sondern nur der Div-Container des berabeiteten Items.
Falls der Text des Items gelöscht wurde und der übergebene Wert für das Datenbankscript
daher leer ist, wird das ganze Item aus der Datenbank gelöscht.
Unter dem letzten Item befindet sich ein unsichtbarer Container, der dazu dient ein neues
Item zu erzeugen. Bei einem Klick wird das entsprechende AJAX Script aufgerufen und
damit ein neues Item mit dem Text "Bearbeiten" erzeugt.

35
7 Anwendung

Die Version des Programmes für mobile Endgeräte verwendet das selbe Backend wie die
Desktop Variante. Daher wirken sich Änderungen, die unterwegs mit einem mobilen
Endgerät vorgenommen werden, gleich direkt auf die virtuelle Pinnwand aus und
umgekehrt. Mit anderen Worten sind die beiden Programme nur zwei verschiedene
Darstellungsformen von ein und denselben Daten.

7.1 Webclient

Abbildung 23: Virtuelle Pinnwand im Web Client

Die Webversion des Programmes präsentiert sich als Pinnwand (Abb. 23). Um ein neues
Postit zu erstellen, muss man nur den Link „Neues Postit erstellen“ an die gewünschte
Stelle des Bildschirms ziehen. Sobald die Maustaste losgelassen wird, erscheint an dieser
Stelle das neue Postit. Die einzelnen Postits lassen sich nun einfach verschieben und neu
anordnen. Verdeckungen werden dadurch berücksichtigt, das das aktive Postit in der

36
Hierarchie nach oben rutscht und die übrigen Postits verdeckt.
Neue Items werden mit einem Klick in das Postit hinzugefügt – es erscheint ein Item mit
dem Text „Bearbeiten“. Mit einem erneuten Klick lässt sich das neue Item nun ändern und
wird mit einem Klick außerhalb des Postits abgespeichert. Die Menüleiste jedes einzelnen
Postits gibt Auskunft über das Datum der Erstellung und über den Autor, und bietet Icons
für die Farbauswahl und für das Löschen des ganzen Postits.
Bei einer Änderung des Inhaltes eines Postits werden alle Mitglieder der Arbeitsgruppe per
Email verständigt.
Am oberen Bildschirmrand befindet sich die Menüleiste, welche Links zur Erstellung neuer
Postits und Gruppen bietet. Darüber befindet sich ein Dropdown-Menü um zwischen den
Gruppen zu wechseln. Falls man zu einer neuen Gruppe eingeladen wurde, erscheint
neben diesem Dropdown-Menü eine dementsprechende Nachricht in roter Schrift.
Sobald man Mitglied in einer Gruppe ist, kann man neue Mitglieder mit Hilfe des Links in
der Menüleiste, oder über das Texteingabefeld einladen.

7.2 Mobiler Client

Beim Design des mobilen Clients wurde vor allem auf rasche Bedienbarkeit geachtet. Die
Links sind als große Balken dargestellt, um die Verwendung von Touchscreen-Displays
besonders gut zu unterstützen.
Die einzelnen Webseiten sind in einfachem HTML Code geschrieben, um möglichst wenig
Probleme auf den unterschiedlichen Endgeräten zu verursachen. Die Links aktivieren die
gewünschten Scripts zur Datenmanipulation gleich direkt. Das heißt der Datentransfer
funktioniert so, wie man das vor dem Zeitalter von AJAX gekannt hat. Das mobile
Endgerät schickt eine Anfrage an den Webserver mit gewünschtem Script und allen
benötigten Parametern. Der Webserver führt das Script aus und sendet die Antwort,
meistens eine neue HTML Seite, an das Gerät zurück, welches die Antwortseite dann
anzeigt. Auf diese Art und Weise kann man sehr rasch durch die einzelnen Bereiche des
Programmes navigieren.
Das Programm verwendet dieselben Datenbankscripten für das Erstellen, Ändern und
Löschen von Postits und Items, die bereits in den vorherigen Kapiteln ausführlich
beschrieben wurden.

37
Abbildung 24: Postits in einer Abbildung 25: Postit mit Abbildung 26: Item in
Gruppe einzeInen Items Bearbeitung

Nach der erfolgreichen Anmeldung befindet man sich auf der Gruppenübersichtseite. Hier
kann man eine Gruppe auswählen, der man angehört. Auch das Erstellen einer neuen
Gruppe ist mit einem Link möglich. Nach der Auswahl der Gruppe erscheinen die
einzelnen Postits der Gruppe (Abb. 24), aber jeweils nur der Titel des Postits. Links für das
Erstellen eines neuen Postits sind oben und unten auf dem Bildschirm vorhanden.
Um ein Postit zu bearbeiten muss man einfach auf den Titel des entsprechenden Postits
klicken und gelangt dann zum Postit an sich. Die Bearbeitung der einzelnen Items erfolgt
intuitiv, ein Klick auf den Itemtext und schon kann man das Item verändern. Es öffnet sich
ein Standard-Webformular mit Schaltflächen zum Ändern oder zum Löschen des Textes
(Abb.26).
Neue Items werden mit Hilfe des Textfeldes in der Postitansicht erzeugt. Ein Klick auf die
"Eintragen"-Schaltfläche (Abb. 25) erzeugt das neue Item, außer das Textfeld ist leer. In
diesem Fall hat ein Klick auf die Schaltfläche keinen Effekt.
Um die Navigation zu erleichtern, gibt es auf jeder Seite als ersten Link die "Zurück"-
Schaltfläche.

38
8 Diskussion

Das Programm verwendet verschiedene Technologien, die miteinander funktionieren

sollen. Es war ein großer Vorteil, dass ich schon Erfahrung im Umgang mit den meisten
verwendeten Technologien hatte. Schwierig war das Design der Datenbank um die
Benutzerverwaltung zu ermöglichen, um eine Trennung in einen privaten Bereich und
einen Gruppenbereich vorzunehmen und um flexibel im Bezug auf Gestaltung und Inhalt
der Postits zu bleiben. Im Umgang mit AJAX waren die verwendeten Bibliotheken eine
große Hilfe um eine stabile und saubere Lösung zu programmieren.
Bei der mobilen Version war das Design hinsichtlich eines effizienten Zugangs zu den
gewünschten Informationen und das grafische Design hinsichtlich der Verwendung von
Touch-Screen-Displays eine Herausforderung. Durch die gezielte Wiederverwendung von
Code wurde der Programmieraufwand für die mobile Variante erheblich reduziert.
Das große Potential des Programmes liegt in der Kombination von Webinhalten, die ein
mobiles Arbeiten ermöglichen. Die einzige Einschränkung in Bezug auf das darstellende
Endgerät ist die Möglichkeit HTML Seiten darstellen zu können. Durch die Verwendung
von CSS wäre es möglich für unterschiedliche Endgeräte maßgeschneiderte
Anzeigeformen zu erstellen. Mit der Webvariante wird gleichzeitig zum mobilen Arbeiten
eine einfache Möglichkeit geboten, die erstellten Inhalte zu verwalten.

9 Ausblick

Die mobile Variante ist im Grunde genommen eine Webseite, die auf dem Endgerät
angezeigt wird. Eine möglich Weiterentwicklung wäre die Programmierung einer
Anwendung für das Iphone, das heißt eine Anwendung, die direkt auf dem Gerät installiert
und aus dem Menü heraus aufgerufen wird. Ein solches Client-Programm könnte den
Komfort in der Bedienung der Software erhöhen, es wäre zum Beispiel nicht mehr
notwendig, irgendwelche Verbindungsdaten wie die URL oder die Login-Daten
einzugeben, da diese Informationen im Client gespeichert werden könnten.
Auch könnte mit dem Client eine ansprechende grafische Umsetzung der Postits am
Iphone erreicht werden um die Benutzer auch visuell anzusprechen.

39
Im Desktopbereich können durch die Verwendung der script.aculo.us - Funktion "sortable"
die einzelnen Items eines Postits per "Drag and Drop" sortiert werden.
Die Datenbank ist mit der Items-Tabelle bereits auf verschiedene Arten von Inhalten
vorbereitet. Das heißt es kann in Zukunft möglich sein, Bilder und eventuell auch Videos in
ein Postit zu integrieren. Bei den Bildern ist allerdings noch die Frage zu klären, ob diese
verlinkt oder direkt vom Benutzer auf den Server hochgeladen werden können.
Grafische Verbesserungen und auch Verbesserungen in der Benutzbarkeit sind natürlich
immer vorzunehmen, wobei letzteres erst durch die Verwendung des Programmes und
durch regelmäßiges Feedback zu erreichen sind. Zu diesem Zweck sollte ein Formular für
die Kontaktaufnahme und zur Fehlerberichterstattung integriert werden.
Mit Hilfe von Widgets kann man die Postits auf dem Desktop dargestellen und bearbeiten.
Zusätzlich könnten einzelne Postits mit Hilfe von Widgets auf Webseiten eingebunden
werden.

40
 10 Literaturverzeichnis

Manuel Bieh; Mobiles Webdesign;

Konzeption, Gestaltung, Entwicklung; Galileo Press, Bonn 2008; 1. Auflage 2008

Vitaly Friedman; Praxisbuch Web 2.0;

Moderne Webseiten programmieren und gestalten; Galileo Press, Bonn; 2. aktualisierte und
erweiterte Auflage 2009

Gunter Saake, Kai-Uwe Sattler, Andreas Heuer

Datenbanken; Konzepte und Sprachen; Heidelberg, Redline GmbH; 3., aktualisierte und erweiterte
Auflage 2008

Christian Wenz; JavaScript und AJAX

Das umfassende Handbuch
http://steffke.de/jbbs/doc/javascript_ajax/01_einleitung_001.htm; Abruf am 3.8.2009

Jesse James Garrett; Ajax: A New Approach to Web Applications

18. 2. 2005
(http://www.adaptivepath.com/ideas/essays/archives/000385.php, Abruf am 3.8.2009)

Besim Karadeniz; Das Internet wird erwachsen

http://www.netplanet.org/geschichte/internet.shtml Abruf am 3.8.2009

Die Geschichte von PHP

http://www.php.net/manual/de/history.php.php, Abruf am 1. 8. 2009

iPhone Geschichte; Infos zum iPhone

5.5.2009
http://www.infos-zum-iphone.de, Abruf am 8.8.2009

41
 11 Anhang

11.1 Datenbankschema
postits:
id :int (primary key)
titel :varchar(255)
item_id :int
author_id :int
creation_date :timestamp(int)
expiration_date :timestamp(int)
position_top :int
position_left :int
height :int
width :int
z_index :int
color :varchar(255)

items:
id :int (primary key)
postit_id :int (index)
item_type :varchar(255)
value :text
position_index :int

users:
id :int (primary key)
username :varchar(255)
password :varchar(255) (MD5)
email :varchar(255)
last_login :timestamp(int)
active_group_id :int

42
groups:
id :int (primary key)
name :varchar(255)

users_postits:
postit_id :int
user_id :int
visibility :boolean

user_groups:
user_id :int
group_id :int
invitaiton :boolean
security_token :varchar(25)

groups_postits:
postit_id :int
group_id :int
visible :boolean

user_friends:
user_id :int
friend_id :int
date_add :timestamp(int)

43