Sie sind auf Seite 1von 33

Bachelor Arbeit – Lernkarteiwidgets für WDE

Michael Pilz
Bachelor Arbeit – Lernkarteiwidgets für WDE – Michael Pilz 0730527

Inhaltsverzeichnis:

1 Abstract . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4

2 Einführung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5

3 Stand der Technik . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6


3.1 Was ist ein Widget . . . . . . . . . . . . . . . . . . . . . . . 6
3.2 Web Widget . . . . . . . . . . . . . . . . . . . . . . . . . . 6
3.3 Standards . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
3.3.1 Normative Vorgaben . . . . . . . . . . . . . . . . . . . . 7
3.3.2 Nicht normative Vorgaben . . . . . . . . . . . . . . . . . 8

4 Umsetzung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
4.1 Erster Entwurf mit Spezifikationen . . . . . . . . . . . . . . . 9
4.1.1 Widget zum Lernen . . . . . . . . . . . . . . . . . . . . . 9
4.1.2 Widget um erstellen von Fragen . . . . . . . . . . . . . . . 10

4.2 Verwendete Techniken . . . . . . . . . . . . . . . . . . . . . 11


4.2.1 Webserver . . . . . . . . . . . . . . . . . . . . . . . . . 11
4.2.2 Datenbank/MySQL . . . . . . . . . . . . . . . . . . . . . 12
4.2.3 PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
4.2.4 Java Script & Ajax . . . . . . . . . . . . . . . . . . . . . . 13
4.2.5 HTML & CSS. . . . . . . . . . . . . . . . . . . . . . . . . 15
4.2.6 MVC Pattern. . . . . . . . . . . . . . . . . . . . . . . . . 17

4.3 Generelle Umsetzung. . . . . . . . . . . . . . . . . . . . . . 18


4.3.1 Erstellung der Datenbank. . . . . . . . . . . . . . . . . . 18
4.3.2 Benutzeroberfläche. . . . . . . . . . . . . . . . . . . . . 20
4.3.3 Website zur Registrierung. . . . . . . . . . . . . . . . . . 21
4.3.4 Aufbau des Code Grundgerüstes. . . . . . . . . . . . . . . 22
4.3.5 Umsetzung der Funktionalität. . . . . . . . . . . . . . . . 22

5 Anwendungsbeispiele . . . . . . . . . . . . . . . . . . . . . . . . . . 27
5.1 Lernwidget zum Fragen lernen . . . . . . . . . . . . . . . . . 27
5.1.1 Registrieren . . . . . . . . . . . . . . . . . . . . . . . . 27
5.1.2 Anmelden und Lernkartei auswählen . . . . . . . . . . . . 28

2/33
Bachelor Arbeit – Lernkarteiwidgets für WDE – Michael Pilz 0730527

5.1.3 Erklärung der Funktionen. . . . . . . . . . . . . . . . . . 28


5.1.3.1 Lernen . . . . . . . . . . . . . . . . . . . . . . . . . 29
5.1.3.2 Editieren . . . . . . . . . . . . . . . . . . . . . . . . 29
5.1.3.3 Kopieren . . . . . . . . . . . . . . . . . . . . . . . . 29
5.1.3.4 Bewerten . . . . . . . . . . . . . . . . . . . . . . . . 30

5.2 Lernwidget zum erstellen von Fragen und Fragenkatalogen . . . 30


5.2.1 Anmelden . . . . . . . . . . . . . . . . . . . . . . . . . 30
5.2.2 Lernkataloge anlegen . . . . . . . . . . . . . . . . . . . 30
5.2.3 Fragen anlegen . . . . . . . . . . . . . . . . . . . . . . 31

6 Zusammenfassung. . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

7 Literatur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

3/33
Bachelor Arbeit – Lernkarteiwidgets für WDE – Michael Pilz 0730527

1) Abstract

This article is about the development of two questionnaire widgets for the WDE. The
widgets have the sense to share learning resources with other students. So it should
be possible to learn better and more effective.
For the development were used diffrend kinds of programming languages, these are
PHP, MySQL, Javascript and Ajax.
The article explains how and where data were stored. The access to these data, an
how these were presented.You also get some information about the MVC Pattern,
which is very usefull for good widget development.

4/33
Bachelor Arbeit – Lernkarteiwidgets für WDE – Michael Pilz 0730527

2) Einführung

Diese Arbeit handelt von der Durchführung einer Bachelor Arbeit, um genauer zu
sein von der Entwicklung von Widgets. Da ich privat auch regelmäßig Widgets nutze
hat mich dieses Thema doch sehr interessiert und somit war die Entscheidung für
dieses Thema recht einfach.
Meine Widgets sollen zukünftig den Studenten helfen schneller und effektiver zu
lernen. Hierbei unterscheiden wir zwischen zwei Widgets. Widget A dient rein zum
Lernen der Fragen, Widget B ermöglicht das Eintragen neuer Fragen,
beziehungsweise Erstellen neuer Fragenkataloge. Fragenkataloge können nach
Studienzweige und den jeweiligen Lehrveranstaltungen dieser Studienzweigen
unterteilt werden, wodurch es für andere Studenten einfacher wird die benötigten
Fragenkataloge zu finden. Jeder Student kann somit beliebig viele Kataloge anlegen.
Es gibt ebenfalls die Möglichkeit der Bewertung von einzelnen Fragen , was
wiederum die Wertigkeit eines Fragenkataloges steigern kann.
Ein großer Teil der Arbeit befasst sich natürlich mit der Umsetzung der Widgets. Das
größte Problem an der gesamten Umsetzung war der Datenaustausch. Hierbei
mussten Client-seitige Datenanfragen aus einer Datenbank gelesen werden ohne den
Browser zu aktualisieren.
Somit war es nötig Teile des Widgets neu zu laden. Die dazu nötigen
Programmiersprachen waren Javascript und Ajax. Dank dieser
Programmiersprachen konnte das Problem mit dem Datenaustausch doch sehr
schnell und einfach gelöst werden.
Hierbei wird sowohl auf den theoretischen als auch auf den praktischen Teil des
Projekts eingegangen.
Gegen Ende wird noch einmal anhand eines gezielten Anwendungsbeispiel erklärt
wie sich die Widgets handhaben lassen, damit auch wirklich die gesamte
Funktionalität klar und verständlich dargestellt wird.

5/33
Bachelor Arbeit – Lernkarteiwidgets für WDE – Michael Pilz 0730527

3) Stand der Technik

3.1 Was ist ein Widget

Ein Widget ist eine Anwendung die innerhalb eines Fenstersystems läuft. Hierbei
gibt es eine grafische Oberfläche die für den Benutzer sichtbar ist und je nach
Widget Benutzerinteraktion zulässt. [1]
Widgets gibt es zur heutigen Zeit für sehr viele Anwendungsgebiete. Sei es zum
Beispiel ein Wetterwidget (Abbildung 3.1a), welches nur die aktuelle Wetter
Situation anzeigt, oder auch ein Aufgabenwidget (Abbildung 3.1b), welches die
Funktionalität bereitstellt um noch ausständige Aufgaben einzutragen und diese
auch wieder zu löschen, wenn diese erledigt sind. Vergleichbar mit einem Post-IT,
nur eben in digitaler Form.

Abbildung 3.1a Abbildung 3.1b www.netvibes.com


http://images.apple.com/de/pro/photo/images/dashboard_weat
herwidget.jpg

3.2 Web Widget

Eine spezielle Form von Widgets ist ein Web-Widget. Hierbei ist im Gegensatz zu
einem normalen Widget eine Web Plattform nötig die diese Web-Widgets anbietet.
In der Regel muss man sich bei solch einer Plattform registrieren und kann sich
dann für den Account die Widgets beliebig zusammenstellen.
Diese Web-Widgets dienen meist als Schnittstelle zu einer anderen Internet
Plattform. Beispielsweise mit einem Mail-Widget. Dieses Widget ermöglicht Einsicht
auf den Posteingang von unterschiedlichen Mail-Anbietern.

6/33
Bachelor Arbeit – Lernkarteiwidgets für WDE – Michael Pilz 0730527

Nutzt man solch ein Widget nun mehrmals, kann man all seine Mail-Adressen auf
neue e-Mails überprüfen.

Abbildung 3.2 http://v3.etelos.com/ruf/RU2_F2c284445c1a5d3b21d9318d43e884019_netvibes-crm-etelos.jpg

3.3 Widget Standards [2]

Im Laufe der Jahre haben sich gewisse Widget Standards entwickelt, dies soll vor
allem dazu dienen damit unterschiedliche Widget Entwickler beziehungsweise
Plattformen einfach Widgets "tauschen" können.
Bei Web-Widgets hat dies vor allem den Vorteil, dass die dafür vorgesehenen
Plattformen die Widgets anderer Plattformen einfach einbinden und wenn nötig
auch ohne Probleme ändern können.

3.3.1 Normative Vorgaben

Hier ist eine Liste der normativen Vorgaben welche mehrmals von der W3C
veröffentlicht wurden und somit als Standard dienen:

7/33
Bachelor Arbeit – Lernkarteiwidgets für WDE – Michael Pilz 0730527

• Widget Packaging an Konfiguration


Diese Spezifikation gibt den Standard für das Paket und Konfigurations
Format vor.

• The Widget Interface


Definiert API's um Zugang zu Preferenzen und Widget Paket Meta-Daten zu
speichern.

• Digital Signatures for Widgets.


Definiert eine digitale Signatur

• Widget Update over HTTP


Diese Spezifikation dient dazu Widgets up-to-date zu halten. Dazu wird ein
version control model definiert.

• Widget Accesss Request Policy


Definiert den Zugang zu URI-identifizierbaren Ressourcen.

3.3.2 Nicht normative Vorgaben

• Widgets 1.0 Requirements


Dieses Dokument gibt Auskunft über die Design Ziele und Anforderungen für
die Widget Standardisierung.

• Widgets 1.0 The Widget Landscape


Ein Dokument für eine Gruppe von Widget User-Agents mit dem Ziel über die
Anforderungen zu informieren.

8/33
Bachelor Arbeit – Lernkarteiwidgets für WDE – Michael Pilz 0730527

4) Umsetzung

4.1 Erster Entwurf mit Spezifikationen

Zu Beginn des Projekts wurde ein erster Entwurf angefertigt, hierbei wurde ein
grobes Design entwickelt und erste Funktionalitäten festgelegt. Diese wurden im
Laufe der Zeit verändert oder auch weiterentwickelt.

4.1.1 Widget zum Lernen

Auflistung der spezifizierten Funktionalität für das erste Widget. Weiters wurde
auch ein Design beziehungsweise struktureller Aufbau entworfen. Siehe
Abbildung 4.1.1

• next
Nächste Frage wird angezeigt

• prev
vorige Frage wird angezeigt

• show_answer
Zu Beginn ist nur die Frage sichtbar, wird der Button „show answer“ betätigt
wird die Antwort angezeigt.

• copy_into
Frage kann in einen anderen Fragenkatalog kopiert werden

• name of questionnaire
Hier wählt man den Katalog aus wohin die aktuelle Frage bei Bedarf kopiert
werden soll

9/33
Bachelor Arbeit – Lernkarteiwidgets für WDE – Michael Pilz 0730527

Abbildung 4.1.1

4.1.2 Widget zum Erstellen von Fragen

Auch für das zweite Widget wurden zu Beginn Spezifikationen festgelegt, welche
auch im Großen und Ganzen eingehalten wurden.
Struktureller Aufbau des Widgets blieb ebenfalls ziemlich unverändert (Abbildung
4.1.2a & 4.1.2b).

• insert question
Fügt neue Frage zu ausgewählten Fragenkatalog hinzu

• new question
Wechselt zum Formular für das Erstellen einer neuen Fragen

• new questionnaire
Wechselt zum Formular für das Erstellen einer neuen Fragenkataloges

• create questionnaire
Erstellt neuen Fragenkatalog

• name of questionnaire
Hier wählt man die Kartei aus wo die Frage eingefügt werden soll

10/33
Bachelor Arbeit – Lernkarteiwidgets für WDE – Michael Pilz 0730527

Abbildung 4.1.2 a

Abbildung 4.1.2 b

4.2 Verwendete Techniken

4.2.1 Webserver

Bei Webprojekten mit Datenbanken und einer serverseitigen Programmiersprache


ist es nötig dass ein Webserver zur Verfügung steht, beziehungsweise einen local zu
installieren.
Hierfür gibt es das einfache System XAMPP, welches eine Zusammenstellung von
freier Software ist. Diese Software schafft die nötigen Voraussetzungen für
Datenbanken und Server-seitige Webanwendungen.
XAMPP greift auf den APACHE Server zurück und ermöglicht somit die Handhabung
einer Server-seitigen Programmiersprache wie zum Beispiel PHP.

11/33
Bachelor Arbeit – Lernkarteiwidgets für WDE – Michael Pilz 0730527

4.2.2 Datenbank

Zur allgemeinen Datenverwaltung für Webanwendungen ist es sinnvoll


Datenbanken einzusetzen.
Die grundlegende Aufgabe solch einer Datenbank ist es hierbei Daten dauerhaft und
effizient zu speichern und diese bei Gebrauch bereit zu stellen.
MySQL ist wohl eines der bekanntesten Datenbanksystemen [3]. Bei MySQL handelt
es sich um ein relationales Datenbanksystem. Zu Beginn noch sehr eingeschränkt,
hat sich dieses System relativ schnell entwickelt.
In den letzten Jahren wurde dieses System hauptsächlich für den dynamischen
Datenaustausch bei Webanwendungen genutzt. Hierfür gibt es sogenannte SQL
Querys, Inserts, Updates...uvm. Diese Abfragen in Verbindung mit einer Server-
seitigen Programmiersprache ermöglichen die Nutzung der Datenbank und der
enthaltenen Daten.

Beispiel für eine typische SQL Datenabfrage:

SELECT
id, name
FROM
users

Der Grundstein einer funktionierenden Datenbank ist es natürlich eine sinnvolle und
gut überlegte Datenbankstruktur festzulegen.
Bei kleineren Projekten gibt es in der Regel keine Probleme, doch sobald ein Projekt
größere Ausmaße annimmt, muss man für die Entwicklung der Datenbank einen
geraumen Zeitaufwand einrechnen.
Datenbanken sind in Tabellen aufgeteilt, diese wiederum lassen sich in beliebig viele
Felder einteilen.
Das wichtigste bei dessen Feldern ist ein Name und ein Typ. Über den Typ des Feldes
bekommt man Aufschluss über die darin enthaltenen Daten. Ein Feld vom Typ INT
enthält somit beispielsweise eine Zahl(Integer).

Um diese Datenbank nun nutzen zu können wird eine Server-seitige


Programmiersprache benötigt.Dadurch ich schon etwas Erfahrung mit PHP habe, ist
somit die Wahl auf diese Programmiersprache gefallen.

12/33
Bachelor Arbeit – Lernkarteiwidgets für WDE – Michael Pilz 0730527

4.2.3 PHP

Die serverseitige Skriptsprache PHP wird oft für die Erstellung von
Webanwendungen beziehungsweise Webseiten verwendet. Bei PHP wir der Code
nicht vom Client verarbeitet sondern von einem Interpreter auf einem Webserver.
Der Benutzer sendet also den Code an den Interpreter, dieser bearbeitet den Code
und sendet diesen an den Client/Browser zurück. [4]

Beispiel Code für eine von PHP ausgeführte Anfrage an die Datenbank

<?php

$query_studies = mysql_query("SELECT courses.c_id , courses.label FROM


courses INNER JOIN courses_studies ON courses_studies.id_studies = '".
$_GET['st_id']."' AND courses_studies.id_courses = courses.c_id GROUP BY
courses.c_id , courses.label ORDER by courses.label ASC");

while(list($c_id,$label) = mysql_fetch_row($query_studies)){
.
.
.
}

?>

Die unten angeführte Grafik verdeutlicht noch genauer die Funktionsweise von PHP

Abbildung 4.2.3 http://de.wikipedia.org/wiki/Datei:PHP_funktionsweise.svg

4.2.4 Java Script & Ajax

Java Script ist eine Skript Sprache die hauptsächlich bei Webanwendungen für Web-
Browser angewandt wird [5]. Java Script ist Klassen los, allerdings ist es trotzdem
möglich objektorientiert zu programmieren. Dieses funktioniert mit Prototyps.

13/33
Bachelor Arbeit – Lernkarteiwidgets für WDE – Michael Pilz 0730527

Weiters ist diese Programmiersprache rein Client-seitig. Java Script verarbeitet die
Benutzerinteraktionen welche mittels HTML und CSS dargestellt werden.

Die bekannteste Nutzung von Javascript ist wohl die Validierung von
Formulareingaben. Das heißt es wird die Eingabe des Benutzers geprüft bevor sie
beispielsweise mittels einer serverseitigen Programmiersprache wie PHP
verarbeitet wird.

Aber es gibt auch andere typische Einsatzgebiete von Script-sprachen:


• dynamische Manipulation von Webseiten
• verschleiern von e-Mail Adressen
• Senden und Empfangen von Daten

Der Punkt "Senden und Empfangen von Daten" benötigt allerdings noch eine weitere
"Programmiersprache". Ajax - Asynchronous Javascript and XML ermöglicht die
asynchrone Datenübertragung zwischen Client und Server. Das heißt es ist möglich
HTTP Anfragen wie zum Beispiel Daten von einem Server abzufragen und beim
Client anzuzeigen ohne das dieser die gesamte Seite neu laden muss. [6]

14/33
Bachelor Arbeit – Lernkarteiwidgets für WDE – Michael Pilz 0730527

Abbildung 4.2.4 http://de.wikipedia.org/w/index.php?title=Datei:Ajax-vergleich.svg&filetimestamp=20070826155716

4.2.5 HTML & CSS

Hypertext Markup Language ist eine Sprache die für die Strukturierung von
Webseiten verwendet wird. Sie ist die Grundlage jeder Website. Mit HTML lassen
sich Bilder, Text, Tabellen und vieles mehr darstellen. HTML ist mit sogenannten
Tags aufgebaut. Hierbei gibt es immer eine Anfangs- und einen End-Tag. Beispiele
hierfür wäre einen Text fett darzustellen. [7]
Somit würde <b> Text </b> solch ein Ergebnis liefern: Text
Um kurz auf die Grundstruktur von einer Website einzugehen, diese sieht wie folgt
aus:

<html>
<head>
<title>Titel der Webseite</title>
<!-- Evtl. weitere Kopfinformationen -->
</head>
<body>

15/33
Bachelor Arbeit – Lernkarteiwidgets für WDE – Michael Pilz 0730527

<p>Inhalt der Webseite</p>


</body>
</html>

Cascardy Style Sheets ist eine Sprache für strukturierte Dokumente. Wird meist in
Verbindung mit HTML eingesetzt. [8]
Hierbei wird in der Regel ein Dokument angelegt indem gewisse Struktur
beziehungsweise Design Vorgaben definiert werden.
Diese können also sogenannte Klassen oder Ids festgelegt werden.
Wenn man nun Beispielweise mit HTML ein Bild anzeigt, ist es möglich diesem Bild
eine ID zuzuordnen, wobei diese ID nicht unbedingt eine Zahl sein muss.
Ein Bild Tag ist Standard mäßig wie folgt aufgebaut:

<img src="bild.jpg" alt="bild" />

Nun kann man wie schon erwähnt diesem Tag eine ID zuordnen.

<img src="bild.jpg" alt="bild" id="bildrand" />

Wenn man nun im Style Sheet diese ID definiert hat, nimmt das Bild diese
Definitionen an.

#id bildrand{
border:3px solid #000000;
}

Vorher Nachher

16/33
Bachelor Arbeit – Lernkarteiwidgets für WDE – Michael Pilz 0730527

4.2.6 MVC Pattern

MVC ist ein Entwurfsmuster welches auf 3 Ebenen arbeitet, dem Model, der View
und dem Controller. Durch eine richtige Verwendung von MVC ist es möglich
Änderungen im nachhinein einfach durchzuführen oder auch einzele Teile ohne
Probleme für andere Projekte wieder zu verwenden.
Das Model verfügt über die Daten die dargestellt werden sollen. Es hat keine direkte
Abhängigkeit zur View und zum Controller.
Der View Teil ist wie der Name schon vermuten lässt für die Darstellung von Daten
zuständig. Weiters übernimmt die View die Benutzer Eingaben, sprich sie ist die
direkte Schnittstelle zum Benutzer. Für die Handhabung der entgegen genommen
Daten ist die View allerdings nicht zuständig, dafür gibt es dann den Controller.
Der Controller verwaltet die vom Benutzer getätigten Aktionen. Je nach
Benutzerinteraktion erfolgt somit ein jeweiliger Arbeitsschritt. Der Controller ist
dafür zuständig, Daten im Model zu ändern und hat weiters die Aufgaben
beziehungsweise die Möglichkeit die View einzuschränken und somit dem Benutzer
bestimmte Aktionen zu verwehren. [9]

Abbildung 4.2.6 http://www.cocoalab.com/media/labnotes/mvc.png

17/33
Bachelor Arbeit – Lernkarteiwidgets für WDE – Michael Pilz 0730527

4.3 Generelle Umsetzung

4.3.1 Erstellung der Datenbank

Auf die in Punkt 4.1 beschriebene erste Spezifikation wurde nun aufgebaut.
Es erfolgte zuerst das Anlegen der nötigen Datenbank.
Da die Widgets Userabhänig sind, ist es natürlich nötig diese User in einer
Datenbanktabelle zu verwalten.
Weiters mussten Tabellen für die Fragen, Fragenkataloge, Bewertungssystem,
Lehrveranstaltungen, Studien erzeugt werden.
Die Struktur der Tabellen ist jeweils einfach aufgebaut. Die Datensätze besitzen
einen Primary Key, welcher die Datensätze eindeutig identifiziert und je nach Bedarf
ein paar zusätzliche Daten.
Damit das Ganze auch von den Abfragen her einfach und Datenbank freundlich
bleibt, werden immer wieder ID's eingesetzt um Zuweisungen zu tätigen.
Hierbei wurde zum Beispiel eine Tabelle mit dem Namen "courses_studies"
angelegt, welche nur über ID Felder verfügt. Diese ID's werden bei den Abfragen mit
den ID's anderer Tabellen verknüpft. Somit ist es beispielsweise nur einmal nötig die
Lehrveranstaltung Computer Grafik 1 einzutragen, allerdings kann ich diese für
beliebig viele Studienabteilungen zuweisen.

Im folgenden Abschnitt ist die Auflistung der Datenbank zu sehen:

Tabellenstruktur für Tabelle courses

Feld Typ Null Standard


c_id int(11) Nein
label varchar(100) Nein

Tabellenstruktur für Tabelle courses_studies

Feld Typ Null Standard


cs_id int(11) Nein
id_courses int(11) Nein
id_studies int(11) Nein

18/33
Bachelor Arbeit – Lernkarteiwidgets für WDE – Michael Pilz 0730527

Tabellenstruktur für Tabelle questionnairs

Feld Typ Null Standard


q_id int(11) Nein
label varchar(100) Nein
id_users int(11) Nein
id_courses_studies int(11) Nein

Tabellenstruktur für Tabelle questions

Feld Typ Null Standard


qu_id int(11) Nein
question varchar(500) Nein
answer varchar(5000) Nein
id_questionnairs int(11) Nein
points int(8) Nein

Tabellenstruktur für Tabelle rank

Feld Typ Null Standard


r_id int(8) Nein
user_id int(8) Nein
qu_id int(8) Nein

Tabellenstruktur für Tabelle studies

Feld Typ Null Standard


st_id int(11) Nein
label varchar(100) Nein

19/33
Bachelor Arbeit – Lernkarteiwidgets für WDE – Michael Pilz 0730527

Tabellenstruktur für Tabelle users

Feld Typ Null Standard


u_id int(8) Nein
usr varchar(50) Nein
pwd varchar(50) Nein
mail varchar(50) Nein

4.3.2 Benutzeroberfläche

Als nächster Schritt folgte das Designen der Benutzeroberfläche. Hierbei war die
Idee die Widgets ganz klar und strukturiert aufzubauen. Immerhin sollen ja die
Fragen und das Lernen im Vordergrund stehen.
Somit wurde für jedes Widget ein Haupt-Div angelegt welcher eine fixe Breite hat.
Diese fixe Breite ist wichtig, da die Widget Plattform nur Widgets mit 300px zulässt.
Würde somit ein Widget mehr als diese 300px haben, wäre ein Teil davon
abgeschnitten und somit nicht mehr zu gebrauchen.
Die Höhe spielt allerdings keine Rolle, diese wird je nach Menge an Daten angepasst.
Weiters besitzen die Widgets Buttons für die Benutzerinteraktionen und Textfelder
für Eingabe von Daten, oder für die Ausgabe von Daten. Abbildung 4.3.2a und 4.3.2b
zeigen die beiden Widgets bei der ersten Design Version.

20/33
Bachelor Arbeit – Lernkarteiwidgets für WDE – Michael Pilz 0730527

Abbildung 4.3.2b

Abbildung 4.3.2a

4.3.3 Website zur Registrierung

Um die Widgets nutzen zu können muss man sich zuvor anmelden, somit wurde eine
kleine Website eingerichtet um User anlegen zu können. Die Funktionalität dieser
Website beschränkt sich zurzeit nur auf das Registrieren von Benutzern (Abbildung
4.3.3). Hierfür gibt es ein Formular bei dem der Benutzer seinen Namen, e-Mail und
Passwort angibt. Diese Daten werden dann in die Datenbank eingetragen und der
Benutzer ist angelegt.
Testweise kann man auf der Website das Einloggen versuchen, doch mehr als diese
Funktionen sind zurzeit nicht vorhanden.

21/33
Bachelor Arbeit – Lernkarteiwidgets für WDE – Michael Pilz 0730527

Abbildung 4.3.3

4.3.4 Aufbau des Code Grundgerüst

Damit die Widgets auch ohne Probleme in die Widget Plattform genannt WDE
eingebunden werden konnten muss eine gewisse Dokument und Ordner Struktur
vorhanden sein. Es wird ein JS Ordern vorhanden sein, indem sich die Javascript
Files befinden, weiters ein CSS Ordner mit den Style Sheets.
Ebenfalls ein PIC Ordern für Bilder und ein INC Ordner für php includes
beziehungsweise AJAX Aufrufe wurde erstellt.
Zusammengefasst wird das ganze über ein Hauptfile. Hier wird angegeben wo sich
die notwendigen Files befinden und liefert somit den Grundstein für die Widget
Programmierung.

4.3.5 Umsetzung der Funktionalität

Nachdem nun alle Grundvoraussetzungen vorhanden waren, wurden die ersten

22/33
Bachelor Arbeit – Lernkarteiwidgets für WDE – Michael Pilz 0730527

Funktionalitäten umgesetzt. Für das Widget zum Lernen wurde ein Daten Model
mittels Javascript angelegt. Zu Beginn wurde standardmäßig ein Fragenkatalog aus
der Datenbank ausgewählt und diese Daten werden in das Daten Model gespeichert.
Das Model besitzt mehrere Arrays. Diese Arrays besitzen die Fragen, Antworten,
Bewertungen und Besitzer des Katalogs. Die Daten werden mittels PHP und AJAX
abgefragt. Javascript/AJAX nutzt hierbei die PHP-MySQL Datenabfrage und übergibt
die erhaltenen Daten an das Daten Model. Hierfür wurde das Daten-Model mit den
nötigen Setter und Getter Methoden ausgestattet.
Der Grund warum AJAX für die Datenabfrage angewandt wurde, ist der, dass die
Daten ausgetauscht werden sollen, ohne den Rest der Website neu zu laden.

Nun da das Widget die Daten erhalten hat, wird sofort die erste Frage angezeigt.
Der Button "Prev" und "Next" ermöglicht das Durchgehen der Fragen. Es wird
jeweils ein Counter erhöht oder gesenkt. Dieser Counter wird als Array-Index
genutzt, damit es eben möglich ist die gesamten Fragen in den zuvor gespeicherten
Arrays durch zu gehen.
Wie schon erwähnt wurden die Widget mittels dem MVC Pattern umgesetzt. Somit
wurden die Funktionen für den Datenaustausch auf die Files model.js, view.js und
controller.js aufgeteilt.

Somit war der erste Schritt erledigt, es war möglich Fragen mit Antworten zu lernen.
Jetzt wurde das ganze ein wenig erweitert und die Antworten der Fragen werden
nun nicht mehr angezeigt, sondern erst wenn man den "show answer" Button
betätigt. Dieser Button ändert einfach die Value des Antwort Textfeldes von "hidden"
auf "Antwort der Frage" .

Der nächste Teil der Umsetzung drehte sich um das Kopieren von Fragen in einen
eigenen Fragenkatalog. Dafür war es nötig eine Liste mit den eigenen
Fragenkatalogen anzuzeigen. Das Abfragen der eigenen Fragenkatalog Namen und
ID's wird somit ab diesem Zeitpunkt ebenfalls zu Beginn erledigt.
Der Button "copy into" wurde ebenfalls hinzugefügt und stellt die Funktion des
Fragen kopierens zur Verfügung. Bei klicken des Buttons wird nun die ID der
aktuellen Fragen mit der ID des Fragenkatalogs in den man die Frage kopieren
möchte in der Datenbank verbunden.
Um die bisherige Umsetzung besser testen zu können war es nötig sich als nächstes
mit der Nutzung des Widgets durch unterschiedliche User auseinander zu setzen.
Das Anlegen von Benutzern war zu diesem Zeitpunkt schon möglich, somit war es
nur mehr nötig dem Widget die Funktion zu geben sich als User anzumelden.

23/33
Bachelor Arbeit – Lernkarteiwidgets für WDE – Michael Pilz 0730527

Mehr als 2 Input Felder und ein Button war hierfür nicht nötig. Die angegeben
Usernamen und Passwörter werden abermals mit PHP und Javascript/AJAX geprüft.
Wenn der User in der Datenbank gefunden wurde, gilt der Login als erfolgreich.

Der nächste Schritt lag in der Entwicklung der Fragenkatalogauswahl.


Um einen Fragenkatalog auswählen zu können muss man diesen innerhalb eines
Studiums und des Lehrveranstaltungen auswählen.
Aus diesem Grund erfolgte die Entscheidung 3 Listenelemte anzulegen, welche per
Klick auf einen Button sichtbar werden. Der Button hierfür heißt "other
questionnaire". Die 3 Listen, bestehend aus "Studium", "Lehrveranstaltung" und
"Name des Katalogs" werden in Abhängigkeit der zuvor getroffenen Auswahl gefüllt.
Javascript bietet dafür ein OnChangeEvent an. Dieses Event wurde mit der
Datenabfrage gekoppelt. Das heißt, wird nun das Studium Informatik in der ersten
Liste ausgewählt, wird die zweite Liste wieder mittels PHP und Javascript/AJAX mit
den Lehrveranstaltungen des Studiums befüllt. Selbiges für die dritte Liste.
Somit war wieder ein Teil der Funktionalität abgeschlossen. Abbildung 4.3.5 zeigt
den Stand zu diesem Zeitpunkt.

Abbildung 4.3.5a

Als letztes wurde nun noch eine Möglichkeit zum Bearbeiten der Fragen und zum
Bewerten von Fragen geschaffen.
Vier weitere Buttons waren also nötig. Der "edit" Button hat die Funktionalität die
Textfelder der Fragen und Antworten in Input Felder umzuwandeln und einen "save"
Button anzuzeigen. Nun ist es möglich den Text zu ändern. Das Ganze wird mit

24/33
Bachelor Arbeit – Lernkarteiwidgets für WDE – Michael Pilz 0730527

einfachen Javascript Befehlen beziehungsweise CSS Style Änderungen in die Tat


umgesetzt.

Code Beispiel für das Updaten einer Frage in der Datenbank:

Javascript/AJAX:

function controllerUpdateSQL(question,answer,index){

data_model.getQuestions()[index][0] = question;
data_model.getQuestions()[index][1] = answer;

if(xmlHttp){
try{
xmlHttp.open("POST", "inc/question_update.php?qu_id="
+ data_model.getQuestions()[qu_index][2] + "&qu_que="
+ question + "&qu_ans=" + answer, true);
xmlHttp.onreadystatechange = controllerState;
xmlHttp.send(null);
}catch(e){}
}

PHP:

<?php
require("connect.php");

$update = mysql_query("UPDATE questions SET question = '".


$_GET['qu_que']."', answer = '".$_GET['qu_ans']."' WHERE qu_id =
'".$_GET['qu_id']."'");

?>

Durch den "save" Button wird die Änderung der Frage in dem Array an der
korrekten Stelle geändert und auch in der Datenbank aktualisiert.
Jetzt gab es nur mehr die Bewertung von Fragen umzusetzen. Abermals eine
einfache PHP/ Javascript/AJAX Abfrage per Klick auf einen Button verbessert oder
verschlechtert den aktuellen Ruf einer Frage.
Die Umsetzung des ersten Widgets ist somit abgeschlossen.

Das Umsetzen des zweiten Widgets war um einiges einfacher, da die Grundstruktur

25/33
Bachelor Arbeit – Lernkarteiwidgets für WDE – Michael Pilz 0730527

des ersten Widgets schon vorhanden war. Auch hier war es nötig eine User
Anmeldung einzubauen. Diese Anmelde Funktion wurde eins zu eins übernommen.
Nach erfolgreicher Anmeldung war es bei diesem Widget allerdings nicht nötig so
viele Funktionen wie beim ersten Widget anzubieten. Jeweils ein einfaches Formular
für das Erstellen von Fragenkatalogen und Fragen war nötig. (Abbildung 4.3.5b)
Durch Nutzung der Buttons "create Question" und "create Questionnaire" werden
die Formular Daten in die Datenbank eingetragen. Zu beachten ist das es nötig war
die Formulare vollständig auszufüllen. Die Eingabeüberprüfung erfolgt einfach
mittels Javascript indem jedes Inputfeld auf Inhalt geprüft wird.
Damit es auch hier nicht nötig ist die gesamte Seite neu zu laden um Daten in die
Datenbank einzutragen oder auszulesen, wird wie schon mehrmals zuvor auf PHP in
Verbindung mit Javascript/AJAX zurück gegriffen.

Abbildung 4.3.5b

26/33
Bachelor Arbeit – Lernkarteiwidgets für WDE – Michael Pilz 0730527

5) Anwendungsbeispiel

In diesem Teil der Arbeit wird die Handhabung der beiden Widgets erklärt. Wie schon
erwähnt wurde gibt es ein Widget zum Fragen lernen und eines um die Fragen
beziehungsweise die Lernkataloge zu erstellen.

5.1 Lernwidget zum Fragen lernen

Dieses Widget hat die Hauptaufgabe um Fragenkataloge zu wählen und die darin
enthaltene Fragen zu lernen. Es sind auch noch andere kleine Funktionen enthalten,
welche jetzt Anhand eines Beispiels näher gebracht werden.

5.1.1 Registrieren

Bevor man ein Widget nutzen kann muss man sich mit einem Account anmelden der
natürlich zuvor einmal registriert werden muss. Hierfür gibt es ein einfaches
Anmeldeformular welches einen Namen, Passwort und eine e-mail Adresse fordert.
Siehe Abbildung 5.1.1

Abbildung 5.1.1

27/33
Bachelor Arbeit – Lernkarteiwidgets für WDE – Michael Pilz 0730527

5.1.2 Anmelden und Lernkartei auswählen

Nachdem man sich also erfolgreich registriert hat kann man sich beim Widget mit
dem gewählten Benutzernamen und Passwort anmelden. Hat die Anmeldung
funktioniert, folgt die Auswahl der Lernkarteien. Dafür ist eine Angabe des Studiums
und der Lehrveranstaltung notwendig. Siehe Abbildung 5.1.2.1 & 5.1.2.2

Abbildung 5.1.2.1

Abbildung 5.1.2.2

5.1.3 Erklärung der Funktionen

Das Widget(Abbildung 5.1.3 ) hat natürlich mehrere Funktionen welche hier kurz
durchgespielt werden.

Abbildung 5.1.3

28/33
Bachelor Arbeit – Lernkarteiwidgets für WDE – Michael Pilz 0730527

5.1.3.1 Lernen

Die Hauptfunktion ist natürlich das Lernen mit den Fragen. Wie in Abbildung
5.1.3 zu sehen ist, sieht man zu Beginn die Frage, und die Antwort ist nicht
sichtbar. Erst durch betätigen des "show answer" Button wird die Antwort
sichtbar. Mit "prev" und "next" kann man eine Frage weiter oder eben zurück
gehen.

5.1.3.2 Kopieren

Falls man eine Frage gefunden hat die einem besonders gut gefällt hat man die
Möglichkeit diese in einen eigenen Fragenkatalog zu kopieren. Hierfür wird
einfach der Name des Fragenkatalogs ausgewählt in den man die Frage kopieren
möchte und betätigt den "copy into" Button. Sofern das Kopieren funktioniert
hat erhält man dafür eine Bestätigung.
Siehe Abbildung 5.1.3.2

Abbildung 5.1.3.2

5.1.3.3 Editieren

Bei Fragen die man selbst erstellt hat, kann man diese bei Bedarf editieren.
Hierzu gibt es eine "edit" Button. Befindet man sich allerdings gerade in einem

29/33
Bachelor Arbeit – Lernkarteiwidgets für WDE – Michael Pilz 0730527

Fragenkatalog denn man nicht selbst angelegt hat ist dieser "edit" Button nicht
vorhanden (Siehe Abbildung 5.1.3 & 5.1.3.2).

5.1.3.4 Bewerten

Eine weitere Funktion ist das Bewerten eine Fragen. Man klickt entweder auf
den Button "Daumen nach oben" oder "Daumen nach unten" (Abbildung 5.1.3).
Danach sieht man die allgemeine Meinung zu dieser Frage (Abbildung 5.1.3.2).

5.2 Lernwidget zum erstellen von Fragen und Fragenkatalogen

Bei diesem Widget gibt es nur zwei Funktionen. Einerseits das Anlegen von
Fragenkatalogen und andererseits das Eintragen von Fragen.
Beides wird hier nun kurz erklärt.

5.2.1 Anmelden

Natürlich muss man sich auch bei diesem Widget erst einmal anmelden oder eben
erst registrieren. Beides wurde allerdings schon beim Punkt 5.1.1 und 5.1.2 näher
erläutert.

5.2.2 Fragenkataloge anlegen

Um einen Fragenkatalog anlegen zu können muss man nur ein Studium auswählen
und eine dazu gehörige Lehrveranstaltung. Dann gibt man seinem neuen
Fragenkatalog einen Namen und betätigt den "create questionnaire" Button (Siehe
Abbildung 5.2.2).

30/33
Bachelor Arbeit – Lernkarteiwidgets für WDE – Michael Pilz 0730527

Abbildung 5.2.2

5.2.3 Fragen anlegen

Hat man nun einen Fragenkatalog, kann man mittels des "new question" Button in
Abbildung 5.2.2 auf die Eingabemaske für eine neue Frage wechseln. Siehe
Abbildung 5.2.3. Hier wählt man den gewünschten Fragenkatalog aus und gibt eine
Frage und deren Antwort an. Nach Betätigung des "create question" Button wird
diese Frage nun in den Katalog aufgenommen.

Abbildung 5.2.3

31/33
Bachelor Arbeit – Lernkarteiwidgets für WDE – Michael Pilz 0730527

6) Zusammenfassung

Das Widget ist eine ideale Möglichkeit um sich effektiv auf zukünftige Prüfungen
vorzubereiten. Es ist einfach zu bedienen, ist jedem Studenten zugänglich und kann
ohnen Probleme einfach erweitert werden.
Ein nicht unwichtiger Punkt bei der Umsetzung war die bestmögliche Nutzung der
vorhanden Ressourcen, vorallem die Serverauslastung sollte möglichst gering gehalten
werden. Hierbei wird Abhilfe geschaffen indem alle Fragen des ausgewählten Katalogs
auf einmal vom Server abgefragt um beim Client gespeichert werden.Somit gibt es keine
ständige Interaktion zwischen Server und Client und das hält die Serverauslastung
möglichst gering.
Weiters hat das Widget den großen Vorteil dass die Qualität der Fragen durch die
Studenten bewertet werden können und somit ersichtlich ist ob man sich auf die
Richtigkeit der Frage/Anwort verlassen kann oder auch nicht.
Ein großer Nachteil könnte wohl sein, dass es nicht einfach ist Studenten dazu zu
motivieren dieses Widget zu nutzen, da man zu Beginn einmal eine große Menge an
Fragen für unterschiedliche Studienrichtungen und deren Lehrveranstaltungen
benötigt.
Ebenfalls könnte man als negativ Punkt erwähnen dass Personen lieber von Papier als
vom Bildschirm lernen(lesen).
Allerdings könnte man hierbei mit einer einfachen Druckfunktion abhilfe schaffen,
indem man dem Benutzer die Möglichkeit gibt, sich Fragen einfach ausdrucken zu
lassen.
Somit lässt sich abschließen sagen, das die Vorteil sicherlich überwiegen und es jetzt an
den Studenten liegt die Qualität des Widgets zu erkennen und dieses auch zu nutzen.

32/33
Bachelor Arbeit – Lernkarteiwidgets für WDE – Michael Pilz 0730527

7) Literaturverzeichnis

[1] Widgets - http://de.wikipedia.org/wiki/Widget (28.07.2010)


[2] Widget Standards - http://www.w3.org/2008/webapps/wiki/WidgetSpecs (28.07.2010)
[3] MySQL - http://de.wikipedia.org/wiki/MySQL (03.08.2010)
[4] PHP Client Server Prinzip - http://de.wikipedia.org/wiki/PHP (03.08.2010)
[5] Javascript - http://de.wikipedia.org/wiki/JavaScript (03.08.2010)
[6] Ajax - http://de.wikipedia.org/wiki/Ajax_(Programmierung) (04.08.2010)
[7] HTML - http://de.wikipedia.org/wiki/Hypertext_Markup_Language (09.08.2010)
[8] CSS - http://de.wikipedia.org/wiki/Cascading_Style_Sheets (09.08.2010)
[9] MVC Pattern - http://de.wikipedia.org/wiki/Model_View_Controller (10.08.2010)

[10] Buch - AJAX und PHP: Interaktive Anwendungen für das Web 2.0 erstellen

Abbildungen:
3.1a - http://images.apple.com/de/pro/photo/images/dashboard_weatherwidget.jpg
3.1b – http://www.netvibes.com
3.2 - http://v3.etelos.com/ruf/RU2_F2c284445c1a5d3b21d9318d43e884019_netvibes-
crm-etelos.jpg
4.2.3 - http://de.wikipedia.org/wiki/Datei:PHP_funktionsweise.svg
4.2.4 - http://de.wikipedia.org/w/index.php?title=Datei:Ajax-
vergleich.svg&filetimestamp=20070826155716
4.2.6 – http://www.cocoalab.com/media/labnotes/mvc.png

Für alle anderen Abbildungen ist Copyright vorhanden

33/33