64
Entwicklung eines Datenbankschemaeditors für den Einsatz im Schulunterricht Bachelor-Thesis im Fachbereich Informatik Eingereicht am: 02. Mai 2017 Autor: Marco Pawlowski Matr.-Nr.: 9708 E-Mail: [email protected] Betreuer: PD. Dr. Frank Huch Prof. Dr. Ulrich Hoffmann M.Sc Marcus Riemer E-Mail: [email protected] [email protected] [email protected]

Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

  • Upload
    others

  • View
    4

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

Entwicklung eines Datenbankschemaeditors für den Einsatzim Schulunterricht

Bachelor-Thesis im Fachbereich Informatik

Eingereicht am: 02. Mai 2017

Autor: Marco PawlowskiMatr.-Nr.: 9708E-Mail: [email protected]

Betreuer: PD. Dr. Frank Huch Prof. Dr. Ulrich HoffmannM.Sc Marcus Riemer

E-Mail: [email protected] [email protected]@fh-wedel.de

Page 2: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

Inhaltsverzeichnis

Inhaltsverzeichnis

1. Einleitung 1

2. Vergleichbare Arbeiten 42.1. DB SQLite Browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42.2. MySQL Workbench . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52.3. SQLite Manager . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62.4. Heidi SQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72.5. PHP-MyAdmin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82.6. PhpLiteAdmin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

3. Anforderungsanalyse 113.1. Vorhandenes Projekt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

3.1.1. Allgemein . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113.1.2. Zielgruppe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123.1.3. Drag & Drop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

3.2. Anforderungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133.2.1. Berücksichtigung Zielgruppe . . . . . . . . . . . . . . . . . . . . . 133.2.2. Zu entwickelnde Erweiterung . . . . . . . . . . . . . . . . . . . . . 13

4. Implementierung 174.1. Client - Darstellung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

4.1.1. Informationen vom Server . . . . . . . . . . . . . . . . . . . . . . 174.1.2. Fehlende Foreign Keys . . . . . . . . . . . . . . . . . . . . . . . . 184.1.3. Anzeige des Schemas . . . . . . . . . . . . . . . . . . . . . . . . . 184.1.4. Tabelleninhalte . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

4.2. Client - Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234.2.1. Änderungen und mögliche Folgen . . . . . . . . . . . . . . . . . . 234.2.2. Aufbau des Editors . . . . . . . . . . . . . . . . . . . . . . . . . . 264.2.3. Bedienung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274.2.4. Command Pattern . . . . . . . . . . . . . . . . . . . . . . . . . . 304.2.5. Kommunikation mit dem Server . . . . . . . . . . . . . . . . . . . 314.2.6. Problematiken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

4.3. Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 374.3.1. Sinatra reagieren auf Anfragen . . . . . . . . . . . . . . . . . . . . 37

II

Page 3: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

Inhaltsverzeichnis

4.3.2. Foreign Keys der Tabellen . . . . . . . . . . . . . . . . . . . . . . 374.3.3. Typsicherung der Tabellenspalten . . . . . . . . . . . . . . . . . . 384.3.4. Anfragen - Darstellung . . . . . . . . . . . . . . . . . . . . . . . . 404.3.5. Anfragen - Entfernen/Hinzufügen . . . . . . . . . . . . . . . . . . 414.3.6. SQLite vs. Ruby-Migration . . . . . . . . . . . . . . . . . . . . . . 424.3.7. Anfragen - Editieren . . . . . . . . . . . . . . . . . . . . . . . . . 434.3.8. Tests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 464.3.9. Unerwartete Probleme . . . . . . . . . . . . . . . . . . . . . . . . 46

5. Fazit 495.1. Erreichte Ziele . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 495.2. Nicht Erreichte Ziele . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 505.3. Weitere Entwicklung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50

A. Anhang 52A.1. Beispiel Aufgabe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52

B. Eidesstattliche Erklärung 59

C. Literaturverzeichnis 60

D. CD-ROM 61

III

Page 4: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

1. Einleitung

1. Einleitung

Es gibt eine große Menge an Software, für die grafische Erstellung und Bearbeitung einesDatenbankschemata. Diese variieren von der unterstützten Datenbank, der Funktiona-lität und ob sie als webbasierte Software, eigenständige Software oder als Plugin zurVerfügung stehen.

Dabei sind die vorhandenen Programme meist an Benutzer gerichtet, die bereits Wissenüber das Thema Datenbanken besitzen. Dadurch enthalten die Programme möglichstviele Funktionen, die von der jeweiligen Datenbank unterstützt werden. Das Erlenender Thematik mit Hilfe solcher Software, erweist sich häufig als hinderlich. Anfängererhalten eine Software, welche eine große Menge an Funktionen besitzt, für die bereitsWissen vorhanden sein muss.

Die Bedienbarkeit ist dabei im Fokus. Funktionen führen zusätzliche Aktionen aus, dienotwendig und als selbstverständlich für erfahrene Benutzer sind. Für Anfänger ist dabeiaber nicht direkt ersichtlich welche Aktionen getätigt wurden, und aus welchem Grunddiese notwendig sind.

Dabei vorab zu erwähnen ist die Software “MySQL Workbench”, die im Abschnitt 2.2noch genauer beschrieben wird. MySQL Workbench ist eine Software, von Profis anProfis. Studenten die mit dieser Software ihre ersten Schritte zum Thema Datenbankenmachen, stellen sich die Frage, welche der beiden zur Verfügung gestellten Knöpfe be-nutzt werden müssen zum Erstellen der Foreign Keys 1, anstelle der Überlegung was derUnterschied der Foreign Keys für die Datenbank bedeutet.

Mit dieser Arbeit wird versucht eine Lernsoftware zu entwickeln, die an Anfänger ge-richtet ist. Es sollen die elementaren Funktionen zur Erstellung von Datenbanken zurVerfügung gestellt werden. Dabei sollen Fehler nicht von der Software automatisch ge-löst werden, sondern an den Benutzer kommuniziert werden. Somit der Benutzer einVerständnis dafür bekommt, welche Bedingungen vorher erfüllt sein müssen, um diejeweilige Aktion durchzuführen.

Eine bereits vorhandene Lernsoftware namens “Blattwerkzeug” 3.1 wurde als MasterThesis an der Fachhochschule Wedel, von Marcus Riemer entwickelt. Blattwerkzeug istfür den Schulunterricht gestaltet worden und richtet sich an eine junge Zielgruppe 3.1.2,

1Fremdschlüssel

1

Page 5: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

1. Einleitung

mit der die Entwicklung von Webseiten unter der Verwendung von Datenbanken gelehrtwerden soll.

Dadurch wurde diese Arbeit als Erweiterung der Software Blattwerkzeug entwickelt.Somit kann vom Benutzer nachdem dieser das Erstellen einer Datenbank gelernt undangewendet hat, die Datenbank in einem praktischen Umfeld und zum zusätzlichenlernen anderer Themen verwenden.

Die in dieser Arbeit entwickelte Erweiterung, ermöglicht es ein komplett neues Schema zuerstellen. Das Schema, die einzelnen Tabellen und auch die in den Tabellen enthaltenenDaten können damit angezeigt werden. Zusätzlich lassen sich die Tabellen nach demErstellen in einem Editor verändern.Die Darstellung der Erweiterung ist in den folgenden Bildern (1 und 2) dargestellt:

Abbildung 1: Darstellung des Schemas

Abbildung 2: Tabellen Editor

2

Page 6: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

1. Einleitung

In der folgenden Ausarbeitung werden die einzelnen Schritte der Entwicklung, die Ge-dankengänge dabei und die entstandenen Funktionalitäten genau beschrieben.In einer ersten Übersicht 2 werden einige verschiedenen Programmen vorgestellt, dieeinen ähnlichen Nutzen haben wie diese Erweiterung. Dabei werden die vorhanden Funk-tionen und die Bedienung der einzelnen Programme genauer betrachtet.In den nachfolgenden Kapiteln wird der genaue Prozess der Entwicklung beschrieben.Dabei wird erst die Struktur von Blattwerkzeug genauer betrachtet 3.1 und welche Funk-tionalitäten dadurch entwickelt werden sollten. 3.2. In einer detaillierten Beschreibungwird genau erläutert wie die einzelnen Komponenten der Erweiterung implmentiert wur-den. Dabei wird vom Client 4.1 bis hin zum Server 4.3 die einzelnen Aspekte genaubeschrieben.Im letzten Kapitel Fazit 5 wird noch einmal Revue passiert was letzten Endes entwickeltwurde. Welche Komponenten und aus welchen Gründen nicht implementiert werdenkonnten. Für weitere zusätzliche Entwicklung an der Software, werden einzelne Möglich-keiten aufgelistet, die während der Bearbeitung dieser Arbeit aufgekommen sind.

Hinweis: Der aktuelle Stand von Blattwerkzeug kann sich auf der Seite http://www.blattwerkzeug.de/ angeschaut und ausprobiert werden. Für eine Einführungzur Benutzung, der in dieser Arbeit entstandenen Erweiterung, ist im Anhang A dieErstellung eines Beispielschemata beschrieben, welches der praxisorientierte Lesernachbauen kann.

3

Page 7: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

2. Vergleichbare Arbeiten

2. Vergleichbare Arbeiten

In diesem Abschnitt werden kurz einige Programme beschrieben, die mit grafischer Ober-fläche erlauben Datenbanken zu verwalten. Dabei sind keine davon an Anfänger gerich-tet, um sich in das Thema der Datenbanken einzuarbeiten.

2.1. DB SQLite Browser

Die von Sqlitebrowser2 entwickelte Open-Source Software soll nicht nur als ein Front-Endfür das Kommandozeilen Programm dienen. Die Entwickler beschreiben Ihre Softwarefolgendermaßen:

“This program is not a visual shell for the sqlite command line tool. It doesnot require familiarity with SQL commands. It is a tool to be used both bydevelopers and by end users, and it must remain as simple to use as possiblein order to achieve its goals.” [db_sqlite_browser]

Es soll bedient werden können ohne Kenntnis von SQL vorauszusetzen. Die einzelnenBefehle werden durch die GUI gesteuert. Dabei werden die einzelnen korrespondierendenSQL-Befele in der Seitenleiste angezeigt. Der “DB SQLite Browser” ist einer der wenigenProgramme, die die Migration von SQLite Datenbanken unterstützt. Dabei wird einAlgorithmus, der auf der SQLite Website zu finden ist, verwendet. Dieser wird in derweiteren Arbeit besprochen(siehe Kapitel: 4.3.6), da dieser Algorithmus einen wichtigenStellenwert annimmt.

Im DB SQLite Browser ist nicht an Beginner gerichtet. Viele Funktionen werden mitder Benutzeroberfläche bedient. Dabei wird jede Aktion zusätzlich als SQL-Statementangezeigt, was für Beginner eine Hilfe sein kann, oder zur Verwirrung führen kann.Fehler werden abgefangen und automatisch behoben. Sollte eine Tabelle mit “WithoutRowId” erstellt werden und kein Primärschlüssel gesetzt werden, wird dieser automatischhinzugefügt, anstelle einer Fehlermeldung anzuzeigen. Foreign Keys werden nicht direktangezeigt, sie sind nur in dem SQL-Create-Statement der Tabellen zu sehen.

2http://sqlitebrowser.org/

4

Page 8: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

2. Vergleichbare Arbeiten

Abbildung 3: DB SQLite Browser

2.2. MySQL Workbench

Die MySQL Workbench3 ist ein Datenbank-Modellierungswerkzeug, welches von denOracle Corporation, den Entwicklern des Datenbanksystems MySQL, entwickelt wurde.Mit der MySQL Workbench ist es möglich MySQL Datenbanken zu verwalten. Die Soft-ware ist an Benutzer mit Grundwissen bis hin zu professionelle Benutzer gerichtet. Esstellt alle Funktionen des Datenbanksystems in einer grafischen Anwendung zur Verfü-gung. Es lassen sich komplette neue Datenbanken, Insert-Statements und Migrationengrafisch erstellen.

Mit MySQL Workbench lassen sich grafisch Schemata erstellen. Dabei ist es möglich di-rekt Einträge in die Tabelle einzutragen. Bei der Verwendung der grafischen Erstellungvon Schemata, muss MySQL Workbench nicht mit einem Datenbankserver verbundensein. Die Einträge werden somit nicht validiert. Es gibt zwei Arten von Foreign Keysdie in der MySQL Workbench per Knopfdruck erstellt werden können. Zur Visuallisie-rung werden die Foreign Key Referenzen mit Strichen zwischen den Tabellen dargestellt.Studenten die diese Software im Einführungskurs Datenbanken verwenden, gehen von

3https://www.mysql.de/products/workbench/

5

Page 9: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

2. Vergleichbare Arbeiten

aus, dass die Workbench die Foreign Keys schon richtig setzt. Dabei erstellt die MySQLWorkbench “Identifying relationships”, was gegebenenfalls nicht vom Benutzer gewolltwird. MySQL Workbench ist eine sehr funktionsreiche Software, die von Anfängern ge-nutzt werden kann, aber an vielen Stellen, durch mangelndes Wissen, zu Fehlern führenkann.

Abbildung 4: MySQL Workbench

2.3. SQLite Manager

Dieses als Plugin bereitstehende DBMS4, für den Firefox, Thunderbird, Komodo u.a.wurde von “lazierthanthou”5 entwickelt. Als Plugin soll diese Software besonders res-sourcensparend sein, und somit bietet es nur die nötigsten Funktionen zum Verwendeneiner SQLite Datenbank. Viele Funktionen werden als SQL-Befehle erwartet, welcheSchablonenweise aus einem Drop-Down-Menu erstellt werden können. Dabei werden Mi-grationen nicht direkt unterstützt und müssen gegebenenfalls selbst erstellt werden.

4https://github.com/lazierthanthou/sqlite-manager5https://github.com/lazierthanthou

6

Page 10: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

2. Vergleichbare Arbeiten

Damit ist der SQLite Manager als eine schnelle Alternative zu einer KommandozeilenKonsole. Durch die Auswahl von SQL-Befehle durch ein Drop-Down-Menu bietet es eineHilfestellung für Benutzer, die die SQL-Befehle noch nicht verinnerlicht haben. Damitist es keine Software die nur für erfahrene Benutzer bestimmt ist, es ist aber auch keinefür Anfänger.

Abbildung 5: SQLite Manager

2.4. Heidi SQL

Die Software6 vom deutschen Programmierer “Ansgar Becker” wurde ursprünglich alsMySQL-Front entwickelt. Es sollte als grafische Bedienoberfläche für MySQL Datenban-ken dienen. Es unterstützt alle Funktionen die MySQL bietet. Nachdem das Projekt zuOpen-Source wurde, wuchs die Gruppe an Entwicklern. In späteren Versionen wurdenweitere Datenbanken unterstützt, wie Microsoft SQL Server und PostgreSQL. Die Bedie-nung findet über die grafische Oberfläche statt, somit müssen SQL-Befehle nicht direktselbst geschrieben werden. Die SQL-Befehle die bei der Bedienung entstehen, werdenzusätzlich angezeigt.

Heidi SQL ist eine funktionsreiche Software. Anfänger können ähnlich wie bei der MySQLWorkbench mit der großen Anzahl an Funktionen überfordert sein. Nach einer gewissenEinarbeitungszeit können aber auch Anfänger mit dieser Software, Datenbanken erstellenund bearbeiten. Durch Symbole und Icons werden viele Eigenschaften von Tabellen, sozum Beispiel die Foreign Keys, verständlich und übersichtlich dargestellt. Somit ist die

6https://www.heidisql.com/

7

Page 11: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

2. Vergleichbare Arbeiten

Darstellung und Bedienung für Anfänger geeignet, lediglich die Fülle an Funktionenkönnen dabei hinderlich sein.

Abbildung 6: Heidi SQL

2.5. PHP-MyAdmin

PHP-MyAdmin7 ist eine webbasierte Anwendung, zur Verwaltung von MySQL Daten-banken. Die Software ist komplett in PHP geschrieben, was zu dem Namen der Anwen-dung führte. Die Software wurde von Tobias Ratschiller entwickelt, ab 2000 wurde dasProjekt von The phpMyAdmin Project weiter entwickelt. Die Software ist in mehrerenSprachen zur Verfügung gestellt und weit verbreitet. Viele Webhosting Provider verwen-den PHP-MyAdmin. Neben der PHP-MyAdmin Anwendung gibt es verwandte Softwarefür die Unterstützung von SQLite Datenbanken.

7https://www.phpmyadmin.net/

8

Page 12: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

2. Vergleichbare Arbeiten

PHP-MyAdmin ist an sehr erfahrene Benutzer gerichtet. Die Bedienung erfordert keinedirekte Eingabe von SQL-Befehlen, jedoch sind die benötigten Informationen die wäh-rend der Bedienung von PHP-MyAdmin von einem Anfänger nicht zu erwarten.

Abbildung 7: PHP-MyAdmin

2.6. PhpLiteAdmin

PhpLiteAdmin8 ist eine in PHP geschriebene Software, die die Verwaltung von SQLiteDatenbanken unterstützen soll. Die Anwendung soll zusätzlich zu den Funktionen vonSQLite selbst, auch unter anderem Migration von Datenbanken unterstützen. Dabeisollen Tabellen und Spalten verändert werden können. In der aktuellen Version zur Zeitder Entwicklung dieser Arbeit, führt jede Migration zu einem Fehler. Das Vorgehenzum Verändern einer Tabelle unterscheidet sich deutlich von der SQLite vorgestelltenMethode, die auch von DB SQLite Browser 2.1 verwendet wird.

• Es wird eine temporäre Tabelle erstellt in denen alle Datensätze gespeichert werden

• Tabelle löschen

• Neue Tabelle erstellen nach den Kriterien der Änderungen

• Datensätze aus der temporären Tabelle kopieren8https://www.phpliteadmin.org/

9

Page 13: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

2. Vergleichbare Arbeiten

• Temporäre Tabelle löschen

Mit dieser Lösung wird die Funktion von SQLite eine Tabelle umzubennen nicht verwen-det. Dadurch müssen Foreign Keys zusätzlich bearbeitet werden, wenn der Tabellennamesich verändert hat.

Abbildung 8: PhpLiteAdmin

10

Page 14: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

3. Anforderungsanalyse

3. Anforderungsanalyse

In dieser Analyse wird betrachtet, was in dem bereits vorhandenen Projekt integriertund mit welchen Programmiersprachen und Frameworks gearbeitet wurde. Die Zielgrup-pe dieser Software wird betrachtet, um bei weiteren Entscheidungen diese mit einzube-ziehen.Es wird zusätzlich entschieden, welche einzelnen Funktionen diese hier zu entwickelndeErweiterung zur Verfügung stellen soll.

3.1. Vorhandenes Projekt

In diesem Abschnitt wird das bereits vorhandene Projekt mit den benutzten Program-miersprachen und Frameworks beschrieben.

3.1.1. Allgemein

BlattWerkzeugDie Software namens “BlattWerkzeug” wurde von Marcus Riemer für seine Master-Thesis an der Fachhochschule Wedel entwickelt. “BlattWerkzeug” ist eine Lern-software die an Kinder und Jugendliche gerichtet ist, mit welcher die Themen derDatenmodellierung und Weboberflächen-Entwicklung gelehrt werden sollen.

Verwendete FrameworksDie in dem Projekt verwendeten Framworks Angular 2 und Ruby mit Sinatra,werden für die Client- und Server Architektur verwendet.

Angular 2Angular 29 ist ein von Google entwickeltes Javascript basiertes Webframework.Angular 2 wurde für die Entwicklung des Front-Ends für “BlattWerkzeug” ver-wendet. Die ganze Visualisierung wird Clientseitig realisiert, die Abfragen zumServer werden damit auf das wichtigste eingeschränkt. Der Entwickler schrieb inseiner Thesis:

9https://angular.io/

11

Page 15: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

3. Anforderungsanalyse

“[..]bietet sich eine rein clientseitige Visualisierung an, die weitestgehendauf Roundtrips zum Server verzichtet. Außer für den Zugriff auf server-seitige Resourcen (Datenbank, gespeicherte Ressourcen, gerenderte Sei-ten) werden alle Operationen im Browser ausgeführt.” [mastersthesis_mri]

Ruby mit SinatraDer Server wurde mit Ruby mit dem Zusatz der Sinatra Library10 entwickelt. Si-natra stützt sich dabei auf dem REST-Prinzip, und verwendet JSON als Schnittstellezur Kommunikation zwischen dem Server und dem Client.

DatenbankDas in der Software verwendete Datenbanksystem SQLite, ist eine SQL-Program-mierbibliothek. SQLite enthält den Großteil der SQL-Sprachbefehle, bietet abernur eingeschränkte Möglichkeiten der Migration einer vorhandenen Datenbank.

3.1.2. Zielgruppe

Wie schon im Abschnitt Allgemein 3.1.1 angesprochen, ist die Zielgruppe Kinder undJugendliche, denen die Entwicklung von Weboberflächen und die Verwendung von Da-tenbanken gelehrt werden soll. Einige Grundkenntnisse sind laut Entwickler hilfreich fürdie Verwendung von BlattWerkzeug. Diese sind sehr minimal, ein größeres Verständnisim Bereich Informatik ist nicht notwendig. Für die beiden Hauptthemen, “Verwendungvon Datenbanken” und “Entwicklung von Weboberflächen”, sind keinerlei Vorwissenerforderlich, jedoch die Anleitung durch eine Lehrperson.

3.1.3. Drag & Drop

Die Hauptbedienung der Software für den Endbenutzer ist durch Drag & Drop möglich.Die Verwendung der Software soll einheitlich in allen Teilen der Software sein.

10http://www.sinatrarb.com/

12

Page 16: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

3. Anforderungsanalyse

3.2. Anforderungen

3.2.1. Berücksichtigung Zielgruppe

Die Zielgruppe 3.1.2 der Software mit der Bedacht darauf, dass diese Software als Lern-software zu verwenden ist, ist der Hauptpunkt der zu berücksichtigen ist, bei der Ent-wicklung der weiteren Komponente. Dabei ist der Unterschied einer Lernsoftware undeiner reinen Anwendungssoftware eine Frage die sich immer wieder stellt und für jedenFall einzeln entschieden wurde. Diese Frage wird in den folgenden Auflistungen der An-forderungsanalyse der einzelnen Bereiche und der Implementierung 4 dieser, diskutiertund einzeln beantwortet.

3.2.2. Zu entwickelnde Erweiterung

Die Erweiterung soll es ermöglichen Datenbanken anzulegen und darzustellen. Dabeimuss darauf geachtet werden, dass die Gestaltung äquivalent zu dem bereits vorhande-nen Projekt ist. Das generelle Layout der bereits vorhandenen Komponenten ist in derGrafik 9 [mastersthesis_mri] dargestellt.

Abbildung 9: Layout der Komponenten

An diesem Layout wird sich die Darstellung der Erweiterung orientieren, um ein einheit-liches Aussehen der Software zu gewährleisten. Die Bedienung der einzelnen Elementesollte das schon vorhandene Prinzip des Drag & Drops 3.1.3 ermöglichen.

Die Implementierung des Drag & Drops ist schon in der Software für die bereits vorhan-denen Komponenten realisiert worden. In dieser Arbeit wird dieser Aspekt berücksich-

13

Page 17: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

3. Anforderungsanalyse

tigt, um ein Einbinden des Drag & Drops zu ermöglichen, ist aber kein direkter Teil derAusarbeitung.

Die zu entwickelnde Komponente lässt sich in folgende zwei sehr grobe Abschnitte un-terteilen:

Darstellung der DatenbankDie Darstellung der Datenbank muss mit dem generellen Layout und Interface derschon vorhandenen Software übereinstimmen. Des Weiteren muss die Zielgrup-pe in Betracht gezogen werden. Die Darstellung muss einfach zu verstehen seinund gleichzeitig alle wichtigen Informationen besitzen, die für die Arbeit mit derDatenbank notwendig sind. Es sollte dabei darauf geachtet werden, dass die An-fängerfreundlichkeit den Konventionen der Darstellung etablierter Software ähnelt.Damit werden die Schüler, die mit BlattWerkzeug ihre ersten Schritte machen, anDarstellungen gewöhnt werden, die sie später wiederfinden.

Die erste Ansicht die darzustellen ist, sollte eine Übersicht des ganzen Schemassein. Darin sollten alle vorhandenen Tabellen auf einen Blick zu sehen sein. EineVisualisierung der Verbindung zwischen den Tabellen, oder genauer gesprochenderen Relationen zu einander, müssen leicht zu verstehen sein und alle nötigenInformationen aufweisen.

Die Informationen der Tabellen werden bereits vom Server zur Verfügung gestellt,dabei muss nur noch entschieden werden, welche davon notwendig sind für dieDarstellung. Die Informationen die der Server über eine Tabelle zur Verfügungstellt sind folgende:

• Tabellenname

• Die vorhandenen Spalten, die folgende Eigenschaften besitzen

– Spaltenname

– Ist diese Spalte Teil des Primärschlüssels

– Typ der Spalte

– Ob die Spalte Null Werte annimmt

– Der Standartwert der Spalte

14

Page 18: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

3. Anforderungsanalyse

Dabei ist festzustellen, dass die Foreign Keys einer Tabelle, die für die Darstel-lung der Relationen notwendig sind, nicht vom Server geliefert werden. Wie schonerwähnt sind die Relationen wichtig für die Darstellung eines Schemas. Dabei soll-ten zwei Aspekte besonders deutlich hervorgehoben werden. Zum einem wie alleTabellen zu einander stehen, um einen groben Überblick zu erhalten wie das Sche-ma aufgebaut ist, zum anderem, und das ist besonders wichtig in Hinsicht für eineSoftware die zu Lehrzwecken verwendet wird, ist die genaue Verknüpfung zwischenzwei Tabellen. Es soll klar dargestellt werden, welche Spalte ein Foreign Key istund auf welcher Tabelle und welche Spalte dieser Tabelle diese verweist.

Eine weitere Ansicht einer Tabelle, die auch häufig in vergleichbarer Software 2 zufinden ist, ist eine Ansicht der vorhandenen Datensätze die bereits in die Tabelleeingepflegt wurden. Dies sollte eine reine Ansicht sein und keine Möglichkeit bietendie vorhandenen Daten zu verändern, da dieses einer Software zu Lernzweckenwidersprechen würde. Die Anwender sollen SQL-Insertstatement verwenden umTabellen zu befüllen und dabei die Anwendung einer Datenbank erlernen.

EditorDer zweite wichtige Abschnitt dieser Komponente soll neben der Darstellung derDatenbank die Möglichkeit bieten, die vorhandene Datenbank zu verändern. DieVeränderung einer Datenbank wird auch als Datenbankmigration bezeichnet. Da-bei werden die Eigenschaften einzelner Tabellen und deren Relationen hinzugefügt,korrigiert oder auf neue Gegebenheiten angepasst.

Die allgemeinen Änderungen am Schema sollten das Erstellen und Löschen von Ta-bellen ermöglichen. Diese Funktion kann in der normalen Darstellung des Schemaszur Verfügung gestellt werden. Detaillierte Änderungen einzelner Tabellen sollteeine weitere Möglichkeit der Datenbankmigration sein. Dazu sollten folgende Än-derungen implementiert werden:

• Namen der Tabelle verändern

• Spalten hinzufügen/löschen

• Die Eigenschaften einzelner Spalten verändern:

– Typen verändern

– Primärschlüssel setzen/entfernen

15

Page 19: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

3. Anforderungsanalyse

– Not Null Constraint setzen/entfernen

– Standartwert der Spalte setzen/entfernen

• Spaltenreihenfolge verändern

• Foreign Keys setzen/entfernen

Die Änderungen an einzelnen Tabellen sind durch die Komplexität in einer eige-nen Ansicht unterzubringen. Dabei sollten Hilfsmittel zur Verfügung stehen, diedas Verändern einer Tabelle unterstützen und vereinfachen. Unter Berücksichti-gung der Zielgruppe, die mit dieser Software an Datenbanken und deren Migrati-on erst vertraut gemacht werden soll, ist eine Vorschau der Tabelle mit den darinenthaltenen Daten, eine gute Hilfestellung zur Visualisierung der Auswirkung vonMigrationen auf Daten. Eine Funktionalität die häufig in verschiedener Software zufinden ist, ist die Möglichkeit eine Aktion rückgängig zu machen, oder die rückgän-gig gemachte Aktion wieder durchzuführen. Oft als “undo” und “redo” bezeichnet.Damit man nachvollziehen kann welche Änderungen vorgenommen wurden, solltendie einzelnen Aktionen in einer Listendarstellung angezeigt werden. Dadurch wirddas Undo & Redo leichter zu verstehen und anzuwenden sein.

Bei jeder Migration können Fehler auftreten oder die Konsistenz der Datenbankverletzen. Deswegen muss jeder aufgetretene Fehler dem Benutzer mitgeteilt wer-den. Neben der Kommunikation zum Nutzer, muss auch zu jedem Zeitpunkt sichergestellt werden, dass die Datenbank in einem Zustand verbleibt, die zu keinen wei-teren Fehlern in der Software führt.

DatentypenIn SQLite, ist im Gegensatz zu den meist bekannten Datenbanksystemen, der Da-tentyp einzelner Spalten dynamisch. Dies bedeutet, dass die Angabe eines Typenseiner Spalte als Hinweis dient und keine Restriktion darstellt. Der Datentyp selbstwird in SQLite in jedem einzelnem eingetragenem Werte assoziiert, an Stelle derganzen Spalte.Dies ist eher eine Anomalie in Datenbanken. Da BlattWerkzeug ein Einstiegs-punkt zum Thema darstellen soll, sollte diese Gegebenheit umgangen werden. Esmuss also dafür gesorgt werden, dass eine Typprüfung bei der Eingabe von Wertenstattfindet.

16

Page 20: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

4. Implementierung

4. Implementierung

Nachdem die Anforderungsanalyse beendet, und die Ziele bestimmt wurden, wurdenalle Funktionalitäten implementiert. Dabei wurde in Richtung Front-End zu Back-Endgearbeitet. Diese Reihenfolge wird auch im folgenden Kapitel eingehalten. Zum einemum den Entwicklungsprozess wieder zu spiegeln, zum anderen um die Gedankengängebesser darzustellen, die sich durch die Entwicklungsreihenfolge entwickelt haben.

4.1. Client - Darstellung

In dem ersten Abschnitt wird die Entwicklung des Clients beschrieben. Dieser dientletzten Endes zu der Bedienung und Darstellung der Software. Neben der Funktionalität,muss zusätzlich auf Bedienbarkeit und Verständlichkeit der Software geachtet werden.

4.1.1. Informationen vom Server

In der schon bereits vorhandenen Software gibt es eine erste Implementierung, die dieInformationen vom Server an den Client sendet. Der Client speichert diese Informationenin einem “Interface” (siehe: Listing 1).

1 export interface ColumnDescription {2 index : number3 name : string4 type : string5 not_null : boolean6 dflt_value ? : string7 primary : boolean8 }9

10 export interface TableDescription {11 name : string12 columns : ColumnDescription []13 }

Listing 1: Interface einer Tabelle und Spalte

Eines der Grundprinzipien von Typescript, ist die Typprüfung. Interfaces erfüllen da-bei die Rolle der Benennung der Typen und bestimmen Schnittstellen innerhalb desProjektes und zum Code außerhalb. [typescript_interfaces]

17

Page 21: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

4. Implementierung

Damit ist festgeschrieben welche Eigenschaften eine Tabelle und die dazugehörigen Spal-ten besitzen müssen. Bis zu diesem Zeitpunkt wurden die Informationen der Datenbank,nur verwendet um diese, beim Erstellen von SQL-Statements, auszuwählen. Mit der dazukommenden Funktionalität der Migration, werden Funktionen auf einzelne Tabellen oderSpalten angewendet. Diese Funktionen lassen sich nicht in einem Interface abspeichern.Für eine leichtere Anwendung und der Verhinderung globale Funktionen zu definieren,wurden zwei Klassen implementiert. In einer Tabellen und Spalten Klasse konnten dieeinzelnen Funktionen für die weitere Implementierung programmiert werden.

4.1.2. Fehlende Foreign Keys

Bei der Analyse der Daten die vom Server versendet werden (siehe: Listing 1), wurde fest-gestellt, dass die Foreign Keys der einzelnen Tabellen nicht übermittelt wurden. Für dieakkurate Darstellung des Schemas sind die Foreign Keys der einzelnen Tabellen notwen-dig, um die einzelnen Relationen anzeigen zu können. Dafür mussten die Informationenzuerst von der Datenbank erfragt und dann versendet werden (siehe dafür: 4.3.2). Daim Gegensatz zu Tabellen und Spalten keine direkten Veränderungen an Foreign Keysmöglich sind, sondern nur das Hinzufügen und Entfernen dieser, müssen diese nicht ineiner eigenen Klasse abgebildet werden.

1 export interface ForeignKeyDescription {2 refs : {3 to_table : string4 from_column : string5 to_column : string6 }[];7 }

Listing 2: Interface: Foreign Keys

4.1.3. Anzeige des Schemas

Die Darstellung des Schemas ist der Einstiegspunkt der Komponente und soll neben derDarstellung auch die Bedienung und Weiterleitung zu den weiteren Funktionen liefern.

Angular 2Im ersten Schritt wurden die Daten, die vom Server zur Verfügung gestellt wurden,

18

Page 22: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

4. Implementierung

in simpler Art auf dem Bildschirm dargestellt. Dafür bietet Angular 2 “Templates”an. Templates definieren damit das Aussehen einer Komponente. Templates sehendabei aus wie HTML-Dokumente, mit ein paar Unterschieden [angular2_flow].

Abbildung 10: Angular 2 Architektur

Bei diesen Unterschieden handelt es sich um Erweiterungen, die bestimmte Funk-tionalitäten zu dem HTML Standard hinzufügen. Die wichtigsten und in diesemProjekt am häufigsten angewandten Erweiterungen sind folgende:

• Direkter Zugriff auf Variablen einer Komponente (Property Binding)

• Funktionen direkt an Events zu verknüpfen (Event Binding)

• If-Anweisungen

• Schleifen

BootstrapBootstrap ist ein CSS-Framework, welches in dem Projekt bereits eingebunden ist.Damit lassen sich auf schnelle und einfache Art HTML-Dokumente gestalten. Einesder in Bootstrap vorhandenen Gestaltungsvorlagen sind die “Cards”11, die für dieGestaltung der einzelnen Tabellen benutzt wurde.

11https://v4-alpha.getbootstrap.com/components/card/

19

Page 23: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

4. Implementierung

Abbildung 11: Darstellung einer Tabelle mit Bootstrap

Font AwesomeUm die Darstellung ein wenig angenehmer für die Benutzer zu machen, wurdenauf Symbole zurückgegriffen, um einige Informationen in der Tabelle oder Buttonsdarzustellen. In der ursprünglichen Entwicklung der Software, wurde dafür derIcon-Font12 “Font Awesome” eingebunden. Dieser Font wurde unter anderem dannauch zur Visualisierung der Primärschlüssel verwendet.(siehe: Grafik 11)

GraphvizIm bereits vorhandenen Server war eine Schnittstelle zu einem Graphviz-Service13

integriert. Graphviz ist ein Programmpaket um Grafiken darzustellen. Dieses kanndazu verwendet werden, um eine Darstellung des Datenbankschemas zu erzeugenund anzuzeigen. Speziell ermöglicht Graphviz eine weitere Möglichkeit das ganzeSchema, mit nur den nötigsten Informationen, auf einen Blick sehen zu können.Ein Beispiel ist in der Grafik 12 zu sehen.

Zusätzliche Darstellung der Foreign KeysZusätzlich zu der Darstellung mit Graphviz wird, wenn der Benutzer mit demMauszeiger über einer Spalte ist, die Tabelle und Spalte eingeblentet, auf die dieSpalte verweist. (siehe Grafik: 13)

12https://de.wikipedia.org/wiki/Font_(Informationstechnik)13http://www.graphviz.org/

20

Page 24: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

4. Implementierung

Abbildung 12: Graphviz Schema Darstellung

Abbildung 13: Darstellung eines Foreign Keys

4.1.4. Tabelleninhalte

In Blattwerkzeug bestand bereits die Möglichkeit SQL-Statements auszuführen. Es istalso möglich eine Abfrage der Art “Select * from Tabellenname” auszuführen, undsich damit alle Daten aus einer Tabelle anzeigen zu lassen. In Anbetracht darauf, dassBlatt-werkzeug eine Software zum Erlernen von Datenbanken und deren Umgang ist,soll es möglich sein die Daten einer Tabelle in einer übersichtlichen Ansicht anzeigenzulassen, sowie es in anderen ähnlichen Programmen 2, die dieses zur Verfügung stellen,üblich ist. Die Daten kommen vom Server in ein 2-Dimensionales Array, eine Dimensionfür jede vorhandene Spalte und die zweite Dimension für die einzelnen Zeilen der Spalte.In Abschnitt 4.3.4 wird dann im Detail darauf eingegangen, wie die Daten im Server vonder Datebbank abgefragt werden.

Ein Beispiel einer solcher Darstellung ist in der Grafik 14 dargestellt.

Verwendung Angular 2 & Bootstrap

21

Page 25: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

4. Implementierung

Abbildung 14: Darstellung der Tabelleninhalte

In der Darstellung der Daten konnte das 2-Dimensionale Array direkt in dem Tem-plate der Komponente eingebunden werden. Im folgendem sieht man die Verwen-dung der Angular 2 Templates mit der zusätzlichen Verwendung von Bootstrap,die im Abschnitt 4.1.3 erwähnt wurden. Dabei ist in Zeile 1 die class-Eigenschaftauf “table table-striped” gesetzt um die von Bootstrap zur Verfügung gestellte Ta-bellendarstellung zu verwenden. Dabei sorgt die zweite class-Eigenschaft, dafürdass die Tabellenzeilen, gestreift angezeigt werden, zur besseren Übersicht. In denZeilen 5,13,14 sind von Angular 2 Schleifen zu sehen und in Zeile 6 und 15, dassmit “Property Binding” direkt auf eine Variable aus der “Component” zugegriffenwird.

PaginationEs ist zu berücksichtigen, dass einige Tabellen gefüllt sein können mit einer großenDatenmenge. Damit ein endlos langes Scrollen verhindert wird und den Daten-transfer zwischen Datenbank-Server und Server-Client zu minimieren, wurde eine“Pagination” eingebaut. Damit kann die Anzahl an gleichzeitig angezeigten Datengewählt werden, und mit den Pfeil-Buttons, kann zwischen den Pages 14 geschaltetwerden.

14Seiten - hier Satz an Daten

22

Page 26: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

4. Implementierung

1 <table class ="table table - striped ">2 <!-- Header with every column name in the table -->3 <thead >4 <tr >5 <th *ngFor ="let column of table. columns ">6 {{ column .name }}7 </th >8 </tr >9 </thead >

10 <!-- Table body , with every entry -->11 <tbody >12 <!-- expected 2d array with tabledata [row ][ column ]-->13 <tr *ngFor ="let row of tableData ">14 <td *ngFor ="let column of table. columns ">15 {{ row[ column .index] }}16 </td >17 </tr >18 </tbody >19 </table >

Listing 3: Code zur Darstellung von Tabelleninhalte

4.2. Client - Editor

Im folgendem Kapitel soll die Implementierung des Editors auf Clientsseite erklärt wer-den. Dieser und der korrespondierende serverseitige Abschnitt werden deutlich und aus-führlich behandelt, da es der Kern dieser Ausarbeitung ist. Die Migration eines Schemaseiner Datenbank, ist im Allgemeinen das Verändern der Datenbank, mit der Absicht die-se auf neue Gegebenheiten anzupassen oder zu erweitern. Zusätzlich ist im allgemeinenSinne der Migration, auch die Möglichkeit gegeben, das Schema auf eine ältere Versionzurückzuführen. In Anbetracht der hier vorliegenden Software, wird nur die Möglich-keit geboten das Schema anzupassen, ohne einer Versionskontrolle. Da die Thematik derSchemamigration ein sehr komplexes ist, mit möglichen irreversiblen Fehlern, wird hiereine ausführliche Erklärung gegeben, die neben der Art der Implementierung, auch dieFunktionsweise und Bedienung beschreibt.

4.2.1. Änderungen und mögliche Folgen

Kurz angesprochen in Kapitel 3.2.2 welche Änderungen alle möglich sein sollen, wirdhier im Detail erklärt welche Änderungen implementiert wurden. Vom SQLite Standard

23

Page 27: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

4. Implementierung

sind nur die Tabellennamensänderung und das Hinzufügen einer Spalte direkt vorgese-hen und stehen als Funktionen zur Verfügung. Dabei wird zu allen Änderungen daraufhingewiesen, welche Konsequenzen oder negative Eigenschaften entstehen könnten.

Tabellen erstellen/entfernenDas zusätzliche erstellen von Tabellen, wird zu keinen Fehlern führen, im Gegen-satz zu dem entfernen von Tabellen. Dies kann zu inkonsistenten Schemata führen.Damit eine Tabelle entfernt werden kann, müssen zuerst, mit hilfe des Editors, al-le Foreign Keys entfernt werden, die auf die zu löschende Tabelle verweisen. Einemögliche Automatisierung dieses Vorganges wurde bewust nicht eingebaut, da eineAutomatisierung zu Missgeschicken führen kann und in Anbetracht des Lernerfol-ges, sollen die Benutzer darauf hingewiesen werden, dass in Datenbanken dafürselbst gesorgt werden muss, dass Verweise auf eine Tabelle mit entfernt werdenmüssen. So wurde nur ein Hinweis eingebaut, der den Benutzer darauf hinweist,dass Spalten auf die zu löschende Tabelle verweisen. Normalerweise, kann das Lö-schen, mit Triggern erreicht werden, jedoch unterstützt Blattwerkzeug derzeit keineTrigger, sondern möchte das Verständnis und Wissen des Users für die Situationaufbauen. Zudem können Trigger nur mit dem nötigen Verständnis effektiv benutztwerden.

Tabellennamen ändernJede Tabelle erhält beim erstellen einen einzigartigen Namen. SQLite besitzt eineFunktion zum verändern des Namens. Durch die Veränderung eines Tabellenna-mens können mehrere Probleme auftreten:

• Trigger die auf die Tabelle verweisen funktionieren nicht mehr

• Indizes die auf die Tabelle verweisen funktionieren nicht mehr

• Fremdschlüsselbeziehungen verweisen auf den alten Tabellennamen

In Blattwerkzeug sind Indizes und Trigger zurzeit nicht vorgesehen, und sind da-mit in diesem Projekt nicht weiter behandelt worden. Dies muss bei der weiterenEntwicklung der Software gegebenenfalls beachtet werden. Fremdschlüsselbezie-hungen sind notwendig und vorhanden. Es muss dafür gesorgt werden, dass beimUmbenennen einer Tabelle alle Verweise auf diese Tabelle mit verändert werden.SQLite bietet dafür eine Lösung:

24

Page 28: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

4. Implementierung

Wenn bei der Verbindung mit der Datenbank die “foreign_key_constraints”15 ein-geschaltet sind, werden alle Verweise auf diese Tabelle beim Umbenennen mitangepasst.[sqlite_doc_alter]

Spalten löschenEine Funktion die von SQLite nicht direkt unterstützt wird. Dabei ist zu beachten,ähnlich wie beim Entfernen von Tabellen, dass das Schema weiterhin konsistentbleibt.

Spalten hinzufügenEine Spalte in eine bereits vorhandene Tabelle einzufügen ist in SQLite bereitsintegriert. Dabei gibt es einige Einschränkungen die man dabei beachten muss. Ineiner neu angelegten Spalte sind keine Daten vorhanden, damit sind alle Wertedieser Spalte “NULL”. Somit ist ein “NOT NULL Constraint” in einer neuen Spaltenicht möglich, außer man gibt dieser Spalte einen Standardwert. NULL-Werte imZusammenhang mit Primärschlüsseln haben in SQLite eine Besonderheit, dies wirdim nächsten Abschnitt beschrieben.

Primärschlüssels setzen/entfernenBeim entfernen eines Primärschlüssels, führt dies nicht zu Fehlern. Es kann zuinkonsistenten Zuständen führen, beim einpflegen von Daten die die Einzigartig-keit der Werte in dieser Spalte verletzen. Beim Hinzufügen eines Primärschlüssels,können Fehler auftreten, sollten die Werte der Spalte die Einzigartigkeit verletzen.Ein weiteres Problem besteht in der besonderen Verhaltensweise von NULL-Wertenin Primärschlüsseln bei SQLite. SQLite unterstützt “NULL” als einen Wert einerPrimärschlüsselspalte, wenn die Spalte nicht vom Typ Integer ist. Wobei der SQLStandard ein implizites “NOT NULL Constraint” vorsieht.Das Unterstützen von NULL-Werten als Primärschlüssel, ist auf einen Bug zurück-zuführen und aus “backward compatibility” 16 Gründen bis heute nicht behobenworden.[sqlite_doc_alter]

Typen ändernDer Typ einer Spalte ist in SQLite, wie schon in Kapitel 3.2.2 angesprochen, nurein Hinweis, aber keine Restriktion. Somit hat SQLite keine Funktion vorgese-hen um den Typen einer Spalte zu verändern. Blattwerkzeug sieht eine statische

15https://sqlite.org/foreignkeys.html#fk_enable16Kompatibilität mit älteren Versionen

25

Page 29: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

4. Implementierung

Typisierung vor, somit wurde darauf geachtet, dass beim Ändern des Typen diedazugehörigen Werte übereinstimmen.

Not Null Constraint verändernSollte die jeweilige Spalte keine NULL-Werte bereits besitzen, ist beim Hinzufügenkein Fehler zu erwarten. Beim entfernen werden keine Fehler auftreten.

Standardwert setzen/verändernStandardwerte werden erst bei einem INSERT-Statement wirksam und werden da-her nicht direkt zu Fehlern führen.

Reihenfolge der Spalten verändernDie Reihenfolge der Spalten ist in SQL nicht von großer Bedeutung. In der SELECT-Anweisung kann die Reihenfolge der Ausgabe unabhängig von der Spaltenreihen-folge bei der Erstellung, gewählt werden. In Blattwerkzeug sollen die Tabellen alsTabellen in der Schemadarstellung angezeigt werden, dabei ist die Reihenfolge derSpalten die die bei Erstellung der Tabelle. Als Einsteigersoftware ist solch eineFunktion zur besseren Darstellung eine Erleichterung für den Benutzer. So tendie-ren Anfänger häufig dazu, die Primärschlüsselspalte als erste Spalte zu definieren,dies kann nach dem Verändern des Primärschlüssels, mit Veränderung der Reihen-folge erzielt werden.

Foreign Keys setzen/entfernenMit der Veränderung von Foreign Keys können nur inkonsistente Zustände imSchema erstellt werden.Das hier entwickelte Backend unterstützt die Erstellung von zusammengesetzenForeign Keys, doch nach Absprache mit dem Erfinder von Blattwerkzeug und feh-lenden Ideen eines Designs diese zu erstellen, sind nur “einfache” Foreign Keysmöglich.

4.2.2. Aufbau des Editors

Zuerst wird der generelle Aufbau des Editors beschrieben und welche Veränderungs-möglichkeiten bestehen. Dies wird zum leichteren Verständnis im weiteren Verlauf desKapitels führen, wenn auf die einzelnen Elemente des Editors verweist wird.

26

Page 30: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

4. Implementierung

LayoutDas drei Spalten Layout, welches in der Software bereits verwendet wird (sieheAbbildung: 9) wird hier als Grundgerüst verwendet. Dabei wird der Editor Bereichhorizontal getrennt. Der obere Bereich der die zu veränderte Tabelle anzeigt, wirdgenutzt um die Veränderungen an der Tabelle durchzuführen. Der untere Bereichwird die Tabelle mit ihren Daten, ähnlich der Darstellung der Tabelleninhalte 4.1.4,darstellen.Der Toolbox Bereich wird ebenfalls horizontal getrennt. Der obere Bereich ist, wiein der schon vorhandenen Software, für die Bedienelemente zuständig, darunterdas Drag & Drop. Der untere Bereich stellt einen Stack da. Dies ist eine Liste diedie einzelnen Veränderungen anzeigt, die an der Tabelle durchgeführt wurden. Zurbesseren Visualisierung des Layouts siehe folgende Grafik:

Abbildung 15: Layout des Editors

4.2.3. Bedienung

Einzelne VeränderungenWie im Abschnitt 4.2.1, am Beispiel der Erstellung einer neuen Spalte fest zustellen ist, sind Kombinationen von Veränderungen Auslöser für Fehler. So ist dasHinzufügen von neuen Spalten kein Problem, ungleich zum Hinzufügen einer neuenSpalte die ein NOT NULL-Constraint besitzt.Des Weiteren ist bei einer Kette von Veränderung nicht immer feststellbar wie dieUrsprungstabelle zu der Zieltabelle entwickelt wurde, wenn man die Zwischenta-bellen nicht kennt. Zur genaueren Erläuterung betrachte man folgende Grafik: 16.

Ohne Betrachtung der Werte und der Zwischentabelle, könnte davon ausgegangen

27

Page 31: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

4. Implementierung

Abbildung 16: Exemplarische Veränderung einer Tabelle

werden, dass nur die Spalte C gelöscht wurde. Aus diesen Gründen ist es sinn-voll, jeden Schritt im einzelnen zu betrachten und abzuspeichern, anstelle nur derZieltabelle. Zusätzlich bietet dies die Möglichkeit dem Benutzer genau mitzuteilenwelche Veränderung fehlgeschlagen ist.

VorschauDer Editor zeigt nur die Informationen der Tabelle an. Zum leichteren Verständ-nis was die einzelnen Veränderungen bewirken, auf Hinsicht der Tabelle und derDaten, wurde eine Vorschau eingebaut. Die Vorschau zeigt die Tabelle in der ty-pischen tabellarischen Darstellung an, mit ein paar Beispieldaten aus der Tabelle.Eine solche Darstellung wurde schon in der Darstellung der Tabelleninhalte 4.1.4entwickelt. Diese wurde in einer eigenen Angular 2 Component geschrieben. Da-durch wurde die Wiederverwendbarkeit von Components benutzt, und wird direktin die Componente des Editors eingebunden. Damit die Veränderung der Tabelleauch gleichzeitig in beiden Components sichtbar sind, wird das Objekt der Tabellein einem Service gespeichert auf das beide Components zugreifen. In der Grafik 10wurde die allgemeine Architektur dargestellt.

Damit die Vorschau noch übersichtlicher wird, werden die einzelnen Spalten farb-lich gekennzeichnet:

• Rot - Spalte wurde gelöscht

• Grün - Spalte wurde neu hinzugefügt

• Gelb - Spalte wurde verändert

28

Page 32: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

4. Implementierung

Undo & RedoTypescript unterstützt unter anderem das Objekt Orientierte Paradigma, damitkann man auf bereits bekannte Entwurfsmuster der Objekt Orientierten Sprachenzurückgreifen. Um die “Undo & Redo” Funktion einzubauen wird das Verhaltens-muster “Command”17 verwendet.(Mehr dazu: 4.2.4)

StackBeim Verwenden von “Undo & Redo” und das dabei eingesetzte EntwurfsmusterKommando sind die einzelnen Objekte in einer Liste abgelegt(siehe Kapitel: 4.2.4).Durch die Erweiterung der einzelnen Klassen mit einer Funktion die eine String-Repräsentation des Objekts liefern, ist das Erstellen eines Stacks (siehe Grafik: 17)möglich. Dieser zeigt die einzelnen Schritte an, welche bereits gemacht wurden.Mit einem Pfeil wird dargestellt an welcher Stelle im Stack man sich zurzeit be-findet. Eine zusätzlich eingebaute Funktion ist, die Möglichkeit durch einen Klickan eine bestimmte Stelle im Stack zu springen. Dabei wird die Undo oder RedoFunktion mehrmals hintereinander ausgeführt, bis die Zielstelle im Stack erreichtist. Wenn man sich nicht am Ende des Stacks befindet, werden alle Elemente vomStackpointer bis zum Ende gelöscht, bevor ein neues Element hinzugefügt wird.

Abbildung 17: Stack Beispiel

Der Stack wird zusätzlich verwendet, um bei aufgetretenen Fehler darzustellen, welcherSchritt fehlgeschlagen ist. In diesem Fall wird der Eintrag im Stack, rot markiert.

17Kommando oder auch Befehl

29

Page 33: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

4. Implementierung

4.2.4. Command Pattern

Während der Entwicklung einer Software sollte eine Architektur gut durchdacht sein.In der Objekt Orientierten Programmierung, in der wir uns in diesem Projekt bewe-gen, treten einige Probleme immer wieder auf. Für solche Probleme wurden in früherenProjekten bereits Lösungen entwickelt. Um ein “Neuerfinden” von bereits vorhandenenLösungen zu vermeiden, wurde eine Reihe von Entwurfsmustern erstellt.Eine Zusammenfassung an Entwurfsmuster für Softwareentwickler, wurde von der sogenannten “Gang of Four” zusammengestellt und unter dem Namen “Design Patterns:Elements of Reusable Object-Oriented Software” veröffentlicht.

AllgemeinFür die Veränderungen werden einzelne Funktionen benötigt, die “Undo & Re-do” Funktionen, im Zusammenhang mit dem Stack, dass zu jeder Funktion eineFunktion besteht, die diese Rückgängig macht. Dabei müssen die gegebenenfallsveränderten Zustände gespeichert werden, um diese wieder herzustellen.Für solch eine Gegebenheit ist in dem Werk das Command18 im Buch genannt.Zitat:

“support undo. The Command’s Execute operation can store state forreversing its effects in the command itself. The Command interfacemust have an added Unexecute operation that reverses the effects ofa previous call to Execute. Executed commands are stored in a histo-ry list. Unlimited-level undo and redo is achieved by traversing this listbackwards and forwards calling Unexecute and Execute, respectively.”[Gamma1994]

Das Command Pattern erlaubt es bestimmte Funktionen in ein Objekt zu kap-seln. Diese können dann verwendet werden ohne die genaue Funktionalität deseinzelnen Objektes kennen zu müssen. Eine häufige Anwendungsmöglichkeit istin der Implementierung von GUI-Elementen. Indem das Command ähnlich einer“callback-function” dient. Zusätzlich können die einzelnen Befehle in einer Liste ge-speichert werden, um diese zu einem späteren Zeitpunkt auszuführen. Die Strukturdieses Entwurfsmusters wird in folgender Grafik visualisiert: 18.

18Befehl

30

Page 34: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

4. Implementierung

Abbildung 18: Genreller Aufbau des Command

Genereller AufbauAnhand diesem Entwurfsmusters wurde für jede einzelne Veränderung an der Ta-belle eine Klasse erstellt, die vom Typ Befehl ist. In jeder Klasse wurden die Funk-tionen zur Veränderung und deren Umkehrung implementiert. Zusätzlich speichertjede Klasse die nötigen Informationen und die alten Inhalte die verändert wurden.In einer zusätzlichen Klasse, werden die einzelnen Befehle in einer Liste abgespei-chert. Für eine grafische Darstellung der Struktur siehe Grafik: 19

Konvertierung InterfacesJede Befehlsklasse besitzt eine Funktion zur Erstellung einer JSON-Repräsentationvon sich selbst. Diese kann direkt an den Server versendet werden, um die Ände-rungen in der Datenbank durchzuführen.

Textuelle DarstellungZusätzlich kann jede einzelne Klasse eine textuelle Darstellung ausgeben, um dieseauf dem Stack anzeigen zu können.

4.2.5. Kommunikation mit dem Server

In diesem Abschnitt wird die Kommunikation beschrieben. Wie der Client Anfragen anden Server verschickt und welche Antwort erwartet wird. Die Serverseitige Kommunika-tion wird im Kapitel: 4.3.1 beschrieben.

31

Page 35: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

4. Implementierung

Abbildung 19: Strukturaufbau der Klassen

Für alle Anfragen braucht der Server einen Identifikator, der das Projekt definiert undden Namen der Datenbank. Die Anfragen werden per HTTP-Befehle an den Server gelei-tet.19

Tabelleninhalte vom Server beantragenFür die Anfrage der Daten einer Tabelle wird der Tabellenname benötigt. Hinzukommt, dass in der Ansicht der Daten, durch das Pagination (siehe Kapitel: 4.1.3),dem Server mitgeteilt werden muss, wie viele und ab welchen Tabelleneintrag dieDaten erwartet werden.

19Genaueres siehe: https://marcusriemer.de/static/marcus-riemer-thesis-blattwerkzeug.pdf

32

Page 36: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

4. Implementierung

Als Antwort ist ein 2-Dimensionales Array zu erwarten, welches die Spalten undall deren Zeilen enthält.

Neue Tabellen erstellenFür das Erstellen neuer Tabellen muss in dem Body des HTTP-Befehls ein JSON-Objekt sich befinden, welches die zu erstellende Tabelle mit allen Informationenrepräsentiert.

Als Antwort erhält der Client das neue komplette Schema zurückgeschickt. Damitkann der Client das Schema aktualisieren. Dies erhöht den Datentransfer zwischenServer und Client. Eine andere Möglichkeit wäre, das Schema des Clients mit demvorhandenen Objekt separat zu erweitern. Dies verringert den Datentransfer, kannaber bei Kommunikationsfehlern zu nicht synchronisierten Zuständen führen. Umdem gegen zu wirken, wird der Zustand des Servers als richtig angenommen undan den Client verschickt.

Tabellen löschenIn diesen Fall wird nur der Name der Tabelle verschickt.

Die Antwort ist wieder das komplette aktualisierte Schema.

Tabellen verändernIn dem Body der Anfrage, ist eine Liste an einzelnen Befehlen 4.2.4 die an einerTabelle ausgeführt werden sollen.

Die Antwort, sollten keine Probleme auftreten, ist das aktualisierte Schema.

Fehler beim Ausführen der BefehleBeim Erstellen, Löschen und Verändern wird die von der Datenbank mitgeteilteFehlernachricht an den Client versendet. Dies können Fehler sein, wie das Erstelleneiner Tabelle mit einem Bereits vergebenen Namen oder auch Konsistenzverstößedes Schemas.

Beim Editieren einer Tabelle, wird zusätzlich der genaue Schritt mitgeteilt anwelchem ein Fehler aufgetreten ist. Dies wird, wie im Abschnitt 4.2.3 verwendet,um den Fehler im Stack darzustellen.

33

Page 37: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

4. Implementierung

4.2.6. Problematiken

Während der Entwicklung des Clients kamen einige Probleme auf, die auf mehrere Wei-sen gelöst werden konnten. In diesem Abschnitt soll besprochen werden, welche Proble-me aufkamen mit den möglichen Lösungen und einer Begründung warum die jeweiligeLösung gewählt wurde.

Multiple Tabellen simultan verändernJede Veränderung einer Tabelle wird erst übernommen, wenn ein Speicher-Buttongedrückt wird. Damit kam die Frage auf, wie damit umgegangen werden soll, wennman während der Bearbeitung einer Tabelle, denn Editiervorgang verlässt und ei-ne andere Tabelle bearbeitet. Damit wäre es möglich zwei Tabellen simultan zuverändern.Dies bietet eine Vielzahl an möglichen Problemen, die nur schwer vorhersehbarsind. Zusätzlich wäre eine sehr klare und detaillierte Kommunikation notwendigbei der Benutzung der Software. Sollte ein Benutzer eine Änderung an einer Tabellegemacht haben und den Editorvorgang verlassen haben, muss zu jedem Zeitpunktfolgendes klar definiert sein. Hat der Benutzer den Editiervorgang verlassen, umeine andere Änderung durchzuführen, oder weil er den Vorgang abbrechen will. InAnbetracht der unvorhersehbaren Probleme, ist der Gewinn einer solchen Funk-tionalität recht gering. Zusätzlich sollte Einsteigern im Thema Datenbanken ver-ständlich gemacht werden, dass die Migration von Datenbanken sich immer nur aufdas Nötigste beziehen sollte, mit so wenig und kleinen Veränderungen wie möglich.Gerade bei den ersten Projekten, die keinen großen Umfang aufweisen, sollte eineMigration durch gute Vorausplanung verhindert werden.Somit ist es nicht möglich mehrere Tabellen gleichzeitig zu verändern. Da aberwährend einer Veränderung, der Wunsch bestehen könnte, sich die anderen Ta-bellen anzusehen ohne das der Stack20 gelöscht wird, besteht die Möglichkeit denEditiermodus zu verlassen, dass Schema zu betrachten und den Editiervorgangfortzusetzen. Beim Betreten eines Editiermodus einer anderen Tabelle, wird derBenutzer darauf aufmerksam gemacht, dass das Betreten eines anderen Editier-vorgangs, den bereits vorhandenen Stack löscht.

Undo vs. selbst verändernDie Undo & Redo Funktion (siehe Kapitel: 4.2.3) wurde eingebaut,als Erleichte-

20die bereits durchgeführt, aber noch nicht gespeicherten Veränderungen

34

Page 38: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

4. Implementierung

rung für den Nutzer, um eine falsche Aktion wieder Rückgängig zu machen. Derdurch die Undo & Redo Funktion entstandene Stack wird auch genutzt, um diesenzum Server zu schicken.Neben der Benutzung von Undo ist es auch möglich die Änderung selbst Rück-gängig zu machen. Als Beispiel wäre das Hinzufügen eines NOT NULL Constraints,und dieses wieder manuell zu entnehmen, im Gegensatz zur Benutzung der Undo-Funktion. Dies würde zu zwei verschiedenen Stacks führen, die auch anders aufServerseite durchgeführt werden würden. (Siehe Grafik: 20)

(a) Manuell Rückgängig (b) Nutzung von Undo

Abbildung 20: Vergleich manuell Rückgängig vs. Undo

Dadurch könnten Fehler auftreten, wenn Änderungen auf dem Server durchge-führt werden, von denen der Benutzer ausging sie wurden Rückgängig gemacht.Eine mögliche Lösung des Problems ist die “Stack Optimierung” die im nächstenAbschnitt besprochen wird und aus welchem Grund diese nicht von Vorteil ist.Bei einigen Änderungen kann man die Absicht des Benutzers nicht abschätzen,und verhindert gegebenenfalls Änderungen die vom Benutzer gewollt sind. Mitder Anzeige des Stacks wird dem Benutzer angezeigt, welche Schritte durchge-führt werden. Dies ist ein mögliches Thema, welches in weiterer Entwicklung derSoftware beachtet werden könnte. Mögliche Lösungen können sich ergeben nachAbsprache mit Benutzern.

Stack OptimierungStack Optimierung ist die Verallgemeinerung des Problems “Undo vs. selbst verän-dern”. Es gibt viele Ketten an Veränderungen die zusammengefügt oder optimiertwerden könnten. Einige Beispiele wären:

• Verändern einer Spalte die danach gelöscht wird

• Manuelles rückgängig machen von Veränderungen

35

Page 39: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

4. Implementierung

• Eine Spalte mehrmals Umbenennen

Die jeweiligen Lösungen dafür wären:

• Veränderungen nicht durchführen, Spalte sofort löschen

• Änderung gar nicht erst durchführen

• Spalte direkt auf den letzten Namen ändern

Alle diese Änderungen könnten aber von dem Benutzer genau in dieser Weise ge-wollt sein. So könnte ein mehrfaches Umbenennen einer Spalte die Folge sein, wennbei zwei Spalten die Namen vertauscht werden sollen und dafür der Spaltennameeiner Spalte einen temporären Namen erhielt.Sollte eine Optimierung des Stacks dynamisch schon während der Bearbeitung derTabelle stattfinden, könnte dies zur Verwirrung des Benutzers führen, wenn ein-zelne Schritte aus dem Stack verschwinden und dann auch nicht mehr per Undoerreicht werden können. Wenn die Optimierung nach dem Speichern angewendetwird, ist die Benachrichtigung während welchen Schrittes ein Fehler aufkam deut-lich erschwert.Die letzten beiden Punkte sind in Anbetracht des ersten Punktes, der Vorhersagewas vom Benutzer wirklich gewollt ist, einfacher zu Lösen und weisen trotzdemeinen hohen Aufwandswert auf, für den dafür gewonnen Nutzen.Dieses Thema ist eine Optimierung die zu keiner besseren Benutzung der Softwareselbst führt und der Optimierungsgrad ist relativ gering im Vergleich zum Arbeits-aufwand, und wurde aus diesen Gründen in dieser Arbeit nicht weiter bearbeitet.In der weiteren Entwicklung der Software, kann dieses Thema ein Ansatzpunktsein.

36

Page 40: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

4. Implementierung

4.3. Server

Im folgendem Kapitel, wird die Implementierung des Servers beschrieben. Der Aufbauvon Blattwerkzeug besitzt eine starke Trennung zwischen Client und Server. Dies er-möglichte es, diese beiden Gebiete von einander getrennt zu implementieren. Die bereitsvorhandene Testmöglichkeit des Server, erlaubt es alle Funktionalitäten zu testen, ohnedie Verwendung eines Clients.Der Server bietet eine direkte Schnittstelle für die Kommunikation mit der Datenbank,welche erlaubt die eigentlichen Aktionen auszuführen.

4.3.1. Sinatra reagieren auf Anfragen

In Sinatra werden die Anfragen durch ein REST-artigem System angesprochen. Für diejeweiligen Anfragen wurden URLs bestimmt, mit denen die einzelnen Funktionen vonClients angesteuert werden konnten. Die möglichen Anfragen an den Server sind:

• Einen Satz von Daten einer Tabelle

• Die Anzahl von vorhandenen Daten in einer Tabelle

• Löschen einer Tabelle

• Anlegen einer neuen Tabelle

• Editieren einer Tabelle

Dabei wurde zur Vorbeugung von “SQL-Injections”21 darauf geachtet durch Prüfung,ob eine Tabelle zu der Informationen oder Änderungen angefragt wurden, auch wirklichbesteht.

4.3.2. Foreign Keys der Tabellen

Das Schema wurde bereits an den Client versendet. Um die Foreign Keys dem Schemaanzuhängen, wurde zuerst die Struktur der Foreign Keys bestimmt.Die Informationen von Foreign Keys einer Tabelle kann man mit der Verwendung vonPRAGMAS erhalten. PRAGMA-Statement ist eine Erweiterung in SQLite, diese wird für die

21https://de.wikipedia.org/wiki/SQL-Injection

37

Page 41: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

4. Implementierung

modifizierung der SQLite Operationen und zum erhalt von internen (nicht Tabellen)Informationen genutzt.[sqlite_pragma]

Die Ausgabe des PRAGMA “foreign_key_list”22 enthält die nötigen Informationen. Siebietet eine Liste einer Liste von zusammengesetzten Foreign Keys. Diese werden unteranderem durch drei Eigenschaften dargestellt:

• den Spaltennamen der Tabelle die ein Foreign Keys Constraint besitzt

• auf welche Tabelle dieser Foreign Keys verweist

• zu welcher Spalte dieser Tabelle genau verwiesen wird

Foreign Keys auf Spaltenebene zu speichern erschien somit nicht sinnvoll. Wegen derAusgabe des PRAGMA und das Foreign Keys aus mehreren Foreign Keys zusammengesetztsein können, werden die Informationen zu Foreign Keys auf Tabellenebene gespeichert.Diese werden mit Anlehnung an die Ausgabe des PRAGMA gespeichert. Es wird eine Listeeiner Liste zusammengesetzter Foreign Keys gespeichert, die die drei Information direktaus dem PRAGMA speichert.Dies wird dann zusammen mit dem bereits versendeten Schema an den Client geliefert.

4.3.3. Typsicherung der Tabellenspalten

Die dynamische Typisierung von Spalten ist in SQLite eine Ausnahme verglichen mitanderen Datenbanken, wie schon im Kapitel: 3.2.2 erwähnt wurde.Aus diesem Grund ist dafür gesorgt, dass die Typen in Blattwerkzeug sich ähnlicher zumStandard vom SQL verhalten. Dafür werden die Werte die in eine Tabelle eingetragenwerden je nach Typ überprüft. SQLite besitzt drei Möglichkeiten Werte nach einembestimmten Muster zu prüfen.Der LIKE-Operator bietet zwei Wildcards im zu vergleichenden Muster:

• “_” ein beliebiges Zeichen

• “%” eine beliebige Anzahl an Zeichen

22https://sqlite.org/pragma.html#pragma_foreign_key_list

38

Page 42: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

4. Implementierung

In Abfragen ist der LIKE-Operator häufig zu gebrauchen und nützlich.

Der GLOB-Operator ist sehr ähnlich zu dem LIKE-Operator, er ist zusätzlich Case-Sensitiveund bietet Wildcards mit gleicher Funktionalität wie der LIKE-Operator und einer Mög-lichkeit ein Zeichen variabel aus einer Menge zu setzen.Die Funktionalität vom GLOB-Operator und LIKE-Operator sind nicht ausreichend fürdie Überprüfung eines Wertes, ob dieser die Kriterien eines Typs erfüllt.

SQLite besitzt zusätzlich einen “REGEXP”-Operator der prüfen kann, ob ein String23

einem Regulären Ausdruck entspricht. Der “REGEXP”-Operator ist in SQLite nativnicht implementiert, um die SQLite Datenbankbibliothek so klein wie möglich zu halten.Somit muss zur Laufzeit eine solche Funktion implementiert und hinzugefügt werden.Die Schnittstelle von Ruby, in dem der Server geschrieben wurde, besitzt eine “create_-function”-Funktion, um bei der Verbindung mit einer SQLite Datenbank, eine Funktionzu definieren, die dann verwendet werden kann. Damit wurde eine Funktion definiert fürden “REGEXP”-Operator. Der Quelltext dieser Funktion ist in Listing 4 dargestellt.

1 db. create_function (’regexp ’, 2) do |func , pattern , expression |2 unless expression .nil?3 func. result = expression .to_s.match(4 Regexp .new( pattern .to_s , Regexp :: IGNORECASE )) ? 1 : 05 else6 # Return true if the value is null , let the DB handle this7 func. result = 18 end9 end

Listing 4: Implmentierung einer Funktion für den “REGEXP”-Operator

Die Funktion überprüft im ersten Schritt, ob der übergebene Wert ein leerer String ist.Dies verhindert, dass REGEXP einen Fehler auslöst, da ein leerer String mit dem über-gebenen Muster nicht übereinstimmt. Die Datenbank hat bereits mit dem NOT NULL-Constraint eine Überprüfung, ob ein Wert NULL sein darf oder nicht. Aus diesem Grundwerden leere Strings nicht von der Funktion überprüft.Der Rest der Funktion benutzt die Ruby Implementierung einer REGEXP-Funktion.24

Nachdem der “REGEXP”-Operator verwendet werden kann, wird bei der Definitioneiner Spalte die Möglichkeit geboten, ein Contraint25 zu definieren. Für jeden der vor-

23Zeichenkette24https://ruby-doc.org/core-2.1.1/Regexp.html25https://sqlite.org/lang_createtable.html

39

Page 43: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

4. Implementierung

gesehenen Typen wurde ein Contraint erstellt, mit einer individuellen Fehlermeldung.Die vier Typen sind:

• TEXT - Eine Menge an beliebigen Zeichen, dafür ist ein Constraint nicht nötig

• BOOLEAN - Der Wert darf nur von Wert von 1 oder 0 annehmen, dies kann mitVergleichsoperatoren implementiert werden (siehe: 5)

• INTEGER - Eine Vorzeichen gebundene ganze Zahl, dafür wird der “REGEXP”-Operator verwendet, um sicher zustellen, dass nur Zahlen in dem Wert enthaltensind (siehe: 6)

• FLOAT - Eine Vorzeichen gebundene reelle Zahl, dafür wird der “REGEXP”-Operatorverwendet, damit auch nur solche Zahlen angenommen werden (siehe: 7)

• URL - Ein zusätzlicher Typ, der in standard Datenbanken nicht vorhanden ist, sollaber für die junge Zielgruppe ein weiterer Zusatz sein, der die Möglichkeit bietetURLs in einer Datenbank zu speichern. (siehe: 8)

4.3.4. Anfragen - Darstellung

Wie schon im Kapitel 4.1.3 wurde das Schema bereits an den Client versendet, mit derErweiterung der Foreign Keys. (siehe Kapitel: 4.3.2)Für die Darstellung der einzelnen Tabelleninhalte, mit der Möglichkeit der Paginati-on 4.1.4, soll nur eine gewisse Anzahl an Daten aus einer Tabelle an den Client gesendetwerden.

Die erste Möglichkeit nur eine bestimmte Anzahl an Daten an den Client zu schicken,wäre alle Daten von der Datenbank auf dem Server zu filtern und diese an den Clientzu schicken. Dabei wäre das Problem, dass bei einer Tabelle mit vielen Inhalten vielDatentransfer statt finden würde.Um den Datentransfer so niedrig wie möglich zu halten, werden die “LIMIT”- und“OFFSET”-Funktionen benutzt.

Mit der “LIMIT”-Funktion kann genau angegeben werden wie viele Daten aus der Tabellewiedergegeben werden. Somit kann die Anzahl an Daten aus der Datenbank erfragtwerden, die pro Page angezeigt werden sollen.

40

Page 44: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

4. Implementierung

Mit der “OFFSET”-Funktion, wird eine Anzahl an Daten übersprungen bei der Ausgabe.Somit werden bei einem OFFSET 10 erst die Daten ab dem 11 Eintrag wiedergegeben.

Zusätzlich zu den anzuzeigenden Daten auf dem Client, ist für die Pagination die Anzahlan vorhandenen Daten in der Tabelle nötig. Dafür wurde der “COUNT”-Operator verwen-det. Dieser wird in der Form “SELECT COUNT(*) FROM ...” verwendet. Dabei steht das“*” für alle Einträge, wobei das “COUNT” die Anzahl dieser zurückliefert.

4.3.5. Anfragen - Entfernen/Hinzufügen

Tabellen entfernenBeim Entfernen einer Tabelle wurde keine weitere Funktionalität benötigt alsdie schon erwähnte Prüfung, ob die besagte Tabelle vorhanden ist. (siehe Ka-pitel: 4.3.1)Die SQL-Datenbank meldet einen Fehler bei existenz eines Foreign Keys, der aufdie zu löschende Tabelle, verweist. Der Fehler wird, an den Benutzer weitergeleitet.

Tabellen hinzufügenBei der Anfrage zum Erstellen einer Tabelle erhält der Server im Body der Anfrageeine JSON Repräsentation der Tabelle.Diese ist äquivalent zu der JSON Darstellung die bereits Verwendet wurde, um dieeinzelnen Tabellen vom Server an den Client zu senden. Damit wird die bereitsimplementierte Tabellen-Klasse verwendet, um das JSON-Objekt in ein Ruby Ob-jekt zu konvertieren, für die weitere Verwendung.Das Objekt einer Tabelle muss zu einem SQL-CREATE_TABLE-Statement um-geformt werden, um dieses dann an die Datenbank zu senden. Die möglichen Fehlerwerden von der Datenbank geprüft und gegebenenfalls an den Client weiter gesen-det. Einige typische Fehler, wie die Einzigartigkeit des Tabellennamens könntenbereits auf Clientsseite geprüft werden. Dies ist bei weiteren Optimierungen inBetracht zu ziehen. Die vorhandene Implementierung ermöglicht es solche Opti-mierung in der Zukunft einzubauen. Durch eine große Menge möglich auftretenderFehler und um eine Vermischung von Client- und Datenbankseitiger Fehlererken-nung zu verhindern, wurde die ganze Fehlererkennung an die Datenbank ausgela-gert.

41

Page 45: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

4. Implementierung

Veränderung SQLite Ruby MigrationReihenfolge vertauschenPrimary Key setzen/entfernenSpaltentypen verändernCheck Constraint setzen

√(im Create Table)

Not Null setzen/entfernenDefault Value setzen/entfernen

Spalte entfernen√

Foreign Keys setzen/entfernen√

Tabellen Namen verändern√ √

Spalte Hinzufügen√ √

Tabelle 1: Native Funktionen in SQLite & Ruby Migration

4.3.6. SQLite vs. Ruby-Migration

Für die Kommunikation mit der Datenbank gibt es die Möglichkeit der Verwendung vonSQL oder der in Ruby integrierten “Migration”. Die Ruby Migration bietet die Möglich-keit Datenbanken zu verändern, dabei neue Tabellen erstellen, Tabellen zu verändernoder Tabellen zu löschen. Die Migration ist dabei Datenbanken unabhängig, somit wäreder Wechsel von SQLite zu einem anderen Datenbanksystem vereinfacht. In Hinblickauf die zur Verfügung gestellten Veränderungen (siehe Kapitel: 4.2.1), und der Typsi-cherung 4.3.3 wurde sich für die Implementierung mit SQL-Statements entschieden.Eine Veränderung des Tabellennamens und das Hinzufügen neuer Spalten oder kom-pletten Tabellen ist in SQLite und Ruby Migration möglich. Für eine Kategorisierungwelche Veränderungen durch welche Schnittstellen nativ möglich sind siehe Tabelle: 1

Die Typsicherung ist ein wichtiger Aspekt in dieser Software (siehe: 4.3.3), dies ist vonRuby Migration nicht direkt unterstützt und müsste per zusätzliches SQL-Statementerreicht werden, ähnlich wie die Veränderung der Spaltenreihenfolge.Es müssten somit für die Ruby Migration Sonderfälle integriert werden, um jede Verän-derung abzubilden.SQLite besitzt nativ nur die Möglichkeit Tabellennamen zu ändern und das Hinzufügeneiner neuen Spalte. Jedoch bieten die SQLite Entwickler einen allgemeingültigen Algo-rithmus an, mit dem sich alle möglichen Veränderungen realisieren lassen:[sqlite_doc_alter]

1. Wenn Foreign Keys aktiviert sind, müssen diese deaktiviert werden

2. Starten einer Transaktion

42

Page 46: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

4. Implementierung

3. Alle Indizes und Trigger speichern, die mit dieser Tabelle verbunden sind

4. Eine neue Tabelle erstellen, die das gewünschte Format besitzt. Benenne diese miteinem temporären Namen

5. Übermittle alle Inhalte der alten Tabelle in die neue Tabelle

6. Lösche die alte Tabelle

7. Verändere den Namen der neuen Tabelle in den gewünschten Namen

8. Erstelle Indizes und Trigger nach dem Vorbild der alten Tabelle

9. Lösche alle Views die durch die Veränderung betroffen sind und rekonstruiere diese

10. Sollten Foreign Keys ursprünglich aktiviert sein, prüfe die Konsistenz der Daten-bank durch “PRAGMA foreign_key_check”

11. Commit die Transaktion

12. Aktiviere die zuvor deaktivierten Foreign Keys

Da dieser Algorithmus bereits allgemeingültig ist und dieser für Veränderungen imple-mentiert werden müsste, die durch Ruby Migration nicht realisiert werden können, wur-de der SQLite Algorithmus für alle Veränderungen verwendet. Zusätzlich müssen keine“Mischlösungen” implementiert und weitere Ruby Bibliotheken eingebunden werden.

4.3.7. Anfragen - Editieren

In diesem Abschnitt wird die Implementierung erläutert, wie einzelne Tabellen auf derServerseite und somit in der Datenbank selbst verändert werden. Dabei wird der vonSQLite vorgegebene Algorithmus zur eigentlichen Migration verwendet(siehe: 4.3.6).

Die Daten die vom Client bei einer Anfrage zum Verändern einer Tabelle versendet wer-den, sind in einer Liste bestehend aus JSON-Objekten, die die einzelnen Veränderungendarstellen. (genaueres siehe: 4.2.5) Auf dem Server wird der gleiche Vorgang realisiert, derauf dem Client bereits realisiert wurde. Die einzelnen Befehle des Command Patterns,werden auf dem Server durch einzelne Funktionen abgebildet. Die zu jedem Command,auf Clientsseite, vorhandene “Undo”-Funktion ist auf dem Server nicht abgebildet. Zudem Zeitpunkt, wenn eine Änderung auf dem Server durchgeführt werden soll, sind

43

Page 47: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

4. Implementierung

die einzelnen Veränderungen bereits fest, und müssen nicht rückgängig gemacht wer-den. Hierbei werden bereits vorhandene Funktionen verwendet. Es wird ein Objekt ausder Tabelle, die Verändert wird, von der Datenbank erstellt. Die Funktion Objekte ausTabellen der Datenbank zu erschaffen, wurde bereits von Marcus Riemer erstellt. Dieerstellten Funktionen in Anlehnung an die Commands vom Client, verändern das Ob-jekt. Nachdem das Objekt verändert wurde, kann dieses auf die gleiche Weise wie beimErstellen einer neuen Tabelle zu einem SQL-CREATE_TABLE-Statement konvertiertwerden.

Zuweisung der SpaltenDamit der von SQLite vorgegebene Algorithmus verwendet werden kann, musstebei dem Überführen der Tabellendaten (siehe Schritt 5: 4.3.6) bekannt sein, welcheSpalte der alten Tabelle mit welcher Spalte der neuen Tabelle korrespondiert. DerSQLite Befehl zum Hinzufügen von Daten aus einer Tabelle in eine andere ist inListing 9 exemplarisch dargestellt:

Für die Zuweisung der alten Spalte zu der neuen Spalte wurde ein Hash in Rubyverwendet. Dieser wird zusammen mit der Tabelle in den einzelnen Funktionenverändert. Für Veränderungen die die Informationen einer Spalte verändern, mussder Hash nicht angepasst werden. Durch die Syntax des SQLite Befehls zum Über-tragen der Tabelleneinträge, ist die Reihenfolge innerhalb des Befehls entscheidend,somit muss beim verändern der Reihenfolge der Spalten in der Tabelle, der Hashnicht angepasst werden. Die Fälle in denen der Hash angepasst wird ist, wenn einSpaltenname sich verändert oder eine Spalte komplett entfernt wird.

Abbildung 21: Die Darstellung der Spaltenzuordnung durch einen Hash

44

Page 48: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

4. Implementierung

(a) Umbenennen einer Spalte (b) Entfernen einer Spalte

Abbildung 22: Hash - Entfernen & Umbenennen einer Spalte

Änderungen einzeln oder alle durchführenMit der jetzigen Implementierung wird jede Änderung einzeln an der Datenbankdurchgeführt. Durch die Implementierung des Hashs für die Spaltenzuweisung undder Abbildung der Tabelle auf dem Server, könnten alle Änderung auf dem Serverdurchgeführt werden, bevor diese an die Datenbank weitergeleitet werden. Dieswürde die Zugriffe auf die Datenbank deutlich verringern, und somit die Synchro-nisierung auf die Datenbankzugriffe von verschiedenen Benutzern vereinfachen.Der Nachteil wäre, dass nicht festzustellen ist, welche Veränderung gegebenenfallsfehlgeschlagen ist. Da die Zielgruppe Anfänger im Thema Datenbanken ist, ist dieFehlerkommunikation ein wichtigerer Aspekt, der einen Vorrang hat.

Sicherung der DatenbankBei der Veränderung der Datenbank in Einzelschritten, schlagen Veränderungen in-nerhalb der Kette von Veränderungen fehl, nachdem einige Änderungen bereits ander Datenbank durchgeführt wurden. Dabei muss die Datenbank beim Fehlschla-gen der Veränderungskette auf den ursprünglichen Zustand zurückgeführt werden.In SQLite werden, anders als in anderen Datenbanksystemen, Verschachtelungenvon Transaktionen nicht unterstützt. Dafür wird in SQLite eine Datenbank in ei-ner einzelnen Datei gespeichert.Es kann damit eine Kopie dieser Datei beim Anfang der Migration erstellt werden,um diese gegebenenfalls wiederherzustellen.

45

Page 49: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

4. Implementierung

4.3.8. Tests

Um die einzelnen Funktionen zu testen, wurden die bereits von Marcus Riemer genutz-ten Möglichkeiten verwendet, um Unit-Tests zu schreiben.Damit konnte sichergestellt werden, dass Funktionen sich in der Weise verhalten habenwie es erwartet war. Diese Tests waren die einzige Möglichkeit die Funktionalität zutesten, die nicht direkt per Oberfläche gesteuert werden konnten. Wie bereits in 4.2.1erwähnt, wurde keine Lösung gefunden für die Darstellung von zusammengesetzten For-eign Keys. Mit Tests wurde sichergestellt, dass der Server auch diese unterstützt, damitin Zukunft zusammengesetzte Foreign Keys im Client eingebaut werden können.

4.3.9. Unerwartete Probleme

Während der Entwicklung auf dem Server sind einige Schwierigkeiten aufgetreten, somuss unter anderem die REGEXP-Funktion bei jeder Verbindung mit der Datenbank de-finiert werden und das größte Problem lag in der Nutzung von PRAGMA-Funktionen.

PRAGMA foreign_key_check löst SQLException ausIn dem Algorithmus zum Verändern der Tabelle wird die Konsistenz der Daten-bank mit dem Befehl “PRAGMA foreign_key_check” geprüft. (Schritt 12: 4.3.6)Das PRAGMA gibt eine Tabelle zurück, mit Einträgen die anzeigen welche Tabelleund welche Spalte die Konsistenz verletzen. Sollte die Datenbank inkonsistent sein,wird eine SQLException geworfen und in der Message der Exception ist die Tabel-le mit den Einträgen enthalten. Die Exception vom Typ SQLException, wird beiden meisten Fehlern geworfen die mit SQL verbunden sind. Dies ist ein Problem,wenn alle geworfenen Fehler als Ergebnis der Konsistenzprüfung interpretiert wer-den. Aus diesem Grund musste die Prüfung in eine separate Funktion ausgelagertwerden.Ab der SQLite Version 3.16.0 die am 2. Januar 2017 erschienen ist, lassen sichPRAGMA-Funktionen, die eine Ausgabe liefern, innerhalb von SELECT-Statementsbenutzen. Diese werden als Tabellen interpretiert und sind erreichbar über denFunktionsnamen mit dem Präfix “pragma_”. Damit lässt sich das Auslösen einerSQLException mit dem Aufruf SELECT * from pragma_foreign_key_check ver-hindern. Diese sehr junge Erweiterung, war auf der Entwicklermaschine noch nichtvorhanden, und ist nicht auf dem zukünftigen Server garantiert vorhanden, was

46

Page 50: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

4. Implementierung

dazu führt, dass vorerst die Implementierung per PRAGMA-Funktionen verwendetwird.

47

Page 51: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

4. Implementierung

1 CONSTRAINT ’ERROR[ Column (#{ schema_column .name })]: Value is not of typeboolean ’’ CHECK (#{ schema_column .name} == 1 or #{ schema_column .name} == 0)

Listing 5: Implementierung des BOOLEAN-Constraint

1 CONSTRAINT ’ERROR[ Column (#{ schema_column .name })]: Value is not of typeinteger ’ CHECK (#{ schema_column .name} regexp ’^[+ -]?[0 -9]+$’)

Listing 6: Implementierung des INTEGER-Constraint

1 CONSTRAINT ’ERROR[ Column (#{ schema_column .name })]: Value is not of typefloat ’ CHECK (#{ schema_column .name} regexp ’^[+ -]?([0 -9]*\.[0 -9]+$|[0 -9]+$)’)

Listing 7: Implementierung des FLOAT-Constraint

1 CONSTRAINT ’ERROR[ Column (#{ schema_column .name })]: Value is not of typeurl ’ CHECK (#{ schema_column .name} regexp ’^(( http[s]?| ftp):\/)?\/?([^:\/\ s]+) ((\/\w+) *\/) ([\w \ -\.]+[^#?\ s]+) (.*) ?(#[\w\ -]+)?$’)

Listing 8: Implementierung des URL-Constraint

1 INSERT INTO NewTable ([ ColumnNames ]) SELECT OldTable FROM ColumnNames ;

Listing 9: SQLite - Einträge aus einer Tabelle in eine andere übertragen

48

Page 52: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

5. Fazit

5. Fazit

In dem letzten Abschnitt wird noch einmal beschrieben, welche Ziele erreicht wurden undin welchem Ausmaß und was nicht erreicht wurde und welche weiteren Entwicklungenmöglich sind und angestrebt werden sollten.

5.1. Erreichte Ziele

Im Rückblick auf die Anforderungsanalyse 3 sollte eine Erweiterung zu der SoftwareBlattwerkzeug erreicht werden, in der man die vorhandene Datenbank anzeigen, dieTabelleninhalte durchschauen und Tabellen erstellen, löschen oder verändern kann. Diesalles sollte unter Berücksichtigung geschehen, dass Blattwerkzeug eine Software seinsoll, die einer jungen Zielgruppe den Umgang mit der Erstellung und Veränderung vonDatenbanken zu lehren hat.

Diese Ziele wurden erreicht. Eine Vorschau der Datenbank wurde auf mehrere Weisenrealisiert und verschiedene Aspekte der Datenbank wurde genauer dargestellt. So ist eineGrafik vorhanden um die genauen Beziehungen zwischen den Tabellen zu visualisieren,und eine detaillierte Ansicht, der genauen Eigenschaften einer Tabelle, zu geben. Zusätz-lich lassen sich die einzelnen Inhalte der Tabelle, auch ohne den Umweg einer Abfrage,anzeigen.

Der Editor gibt die Möglichkeit, Tabellen zu löschen, neue zu erstellen oder bereits vor-handene zu verändern. Dabei ist der wichtige Aspekt der Kommunikation bei möglichenFehlern realisiert. Fehler die automatisch korrigiert werden könnten sind weiterhin vor-handen, um so die Möglichkeit zu bieten, in einem Kurs solche herbeizuführen und zubesprechen. Der Stack mit der Vorschau der Tabelle beim Editieren, lässt den Benutzerleicht verstehen was die Veränderungen bringen werden.

Die strikte Typisierung konnte eingebaut werden, auch wenn es keine Eigenschaft vonSQLite ist. Da SQLite in dieser Hinsicht aber die Ausnahme ist, wird dem Benutzer vonBlattwerkzeug, der Standard von Datenbanken näher gebracht.

Somit ist die Funktionalität die erreicht werden sollte eingebaut und konnte durch Testsbestätigt werden.

49

Page 53: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

5. Fazit

5.2. Nicht Erreichte Ziele

Eines der wichtigen Aspekte von Blattwerkzeug ist die Bedienung durch Drag & Drop.Die Funktionsweise dieser Funktion wurde bereits in der Masterarbeit von Marcus Rie-mer entwickelt und eingebaut. Der Fokus dieser Arbeit bezog sich, auf die Entwicklungder Anzeige und Verarbeitung der Datenbank. Das Einbauen der bereits vorhandenenImplementierung von Drag & Drop, wurde bereits am Anfang als ein Zusatz gewertet. Eswurde darauf geachtet, dass die Implementierung das Nachträgliche Einbauen des Drag& Drops ermöglicht. Am Ende wurde diese Funktionalität nicht eingebaut, und die Zeitwurde für weitere Verbesserungen der Fehler-Kommunikation und Tests genutzt.

In Datenbanken ist es möglich zusammengesetzte Fremdschlüssel zu erstellen. Nach vielÜberlegung zusammen mit Marcus Riemer, wurde keine passende Darstellung gefundenum diese grafisch zu erstellen. Somit ist es zur Zeit in der Bedienung nur möglich, ein-fache Fremdschlüssel zu bilden. Das Backend unterstützt die Erstellung, Speicherungund Veränderung von zusammengesetzten Schlüsseln, welches auch durch Tests bestä-tigt werden konnte. Somit kann in weiterer Entwicklung, beim vorhanden sein einergrafischen Bedienung, diese Funktion unterstützt werden.

5.3. Weitere Entwicklung

Die Entwicklung der Erweiterung für Blattwerkzeug führte zu Ideen weiterer Entwick-lungen für die Zukunft. Die zwei bereits besprochenen Aspekte, des Drag & Drop undder Möglichkeit der Erstellung zusammengesetzter Fremdschlüssel, währen die erstenMöglichkeiten einer Weiterentwicklung von Blattwerkzeug.

Zusätzlich wäre die Darstellung des Schemas ein Aspekt zur weiteren Entwicklung.Eine Möglichkeit wäre die grafische Darstellung des Schemas an Stelle einer Grafik ineiner interaktiven Benutzeroberfläche anzuzeigen. So könnten die Tabellen frei bewegtwerden, wie es auch in einigen bereits vorhandenen Programmen möglich ist.

Um den Entwicklungsprozess von Datenbanken neuen Benutzern beizubringen, könn-te vor der Erstellung der physikalischen Datenbank die Möglichkeit bestehen, ein ER-Diagramm zu erstellen, welches mit der physikalischen Datenbank im Anschluss vergli-chen wird.

50

Page 54: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

5. Fazit

Blattwerkzeug wurde als Software gedacht, die auch in Schulen im Informatikkurs be-nutzt werden könnte. Dabei könnte den Kursleitern eine Funktion zum leichten einpflegenvon Inhalten in Tabellen, zum Beispiel im Form von einer CSV-Datei die Vorbereitungeiner speziellen Aufgabe vereinfachen.

Dies sind einige Ideen die während der Entwicklung der Erweiterung aufgekommen sind.Es werden weitere Ideen und mögliche Verbesserung der bereits vorhandenen Softwareaufkommen, wenn diese von Benutzern verwendet wird. Eine solche Software erreichtselten einen Zustand, in dem keine weitere Entwicklung nötig ist. Vor allem in einerSoftware die für eine Zielgruppe entwickelt wurde, in der sich die Entwickler selbst nichtbefinden, und Teil der Zielgruppe sich dadurch auszeichnet, kein direktes Wissen zumThema zu besitzen, wodurch sie sich nicht ausdrücken können, welche Funktionalitäterwünscht ist. Somit wird viel Weiterentwicklung zusammen mit der Zielgruppe, währendder Verwendung der Software erforderlich sein.

51

Page 55: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

A. Anhang

A. Anhang

A.1. Beispiel Aufgabe

In diesem Abschnitt wird der Umgang und die Bedienung der Erweiterung anhand einerBeispielaufgabe dargestellt. Die Aufgabe wurde aus dem Buch “Tabellenkalkulationssys-teme Datenbanken” [hubwieser_inf_2] von Seite 110 gewählt und ist eine Aufgabedie für die Zielgruppe (Kapitel: 3.1.2) der Erweiterung angemessen ist.

AufgabenstellungIn dieser Aufgabe soll ein ER-Diagramm in ein relationales Datenbankmodell über-führt werden. Das ER-Diagramm ist in der Abbildung 23a zu sehen. In der originalAufgabe besaßen die Entitytypen keine Attribute, diese wurden zur besseren Prä-sentation der Erweiterung hinzugefügt 23b.

(a) Originale Aufgabenstellung (b) Erweiterte Aufgabenstellung

Projekt öffnenIm ersten Schritt muss das passende Projekt geöffnet werden. Dafür wird in derProjektauswahl das Projekt “Klett - Informatik 2” durch den “Bearbeitungs” But-ton gewählt.

Schema AnsichtUm Tabellen anlegen zu können, muss in die Schemaansicht gewechselt werden.Das Schema ist am Anfang leer, somit ist die einzige verfügbare Funktion eine neueTabelle zu erstellen. Diese Funktion ist am oberen Rand durch den Button “NeueTabelle” (Abbildung: 25) erreichbar.

Tabellen erstellenDurch den Button wird der Editor geöffnet. Im Editor können durch die einzelnenBedienelemente eine Tabelle erstellt werden. Als ersten wird die Schüler Tabelleerstellt.

52

Page 56: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

A. Anhang

Abbildung 24: Projekt Auswahl

Abbildung 25: Button zum Erstellen neuer Tabellen

Im oberen Input Feld kann der Name der Tabelle, hier “Schueler”, eingetragenwerden. Nachdem die Tabelle einen Namen besitzt, müssen die einzelnen Spaltenerzeugt werden.Mit dem Klick auf das “+”-Symbol kann eine neue Spalte hinzugefügt werden.Jeder Schüler soll einen Namen erhalten. In der neuen Spalte wird, wie bei derTabelle, in dem ersten Input Feld der Name der Spalte “Vorname” eingetragen. DerVorname ist kein Primärschlüssel somit wird die Checkbox nicht ausgewählt. DerTyp der Spalte wird in dem Dropdown-Menu ausgewählt. Zur Verfügung stehen:

• TEXT

• INTEGER

• FLOAT

• BOOLEAN

53

Page 57: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

A. Anhang

• URL

Für den Vornamen wird der Typ “TEXT” gewählt. Jeder Schüler hat einen Na-men, somit kann in die Checkbox “NOT NULL” ausgewählt. Einen Standartwertwird hier nicht vergeben.Nach dem gleichen Schema wird nun eine Spalte für den “Nachname” erzeugt.Um die einzelnen Schüler zu identifizieren wird noch eine zusätzliche Spalte benö-tigt. Die zusätzliche künstliche Spalte erhält den Namen “ID”. Diese Spalte soll alsPrimärschlüssel dienen, somit wird die Checkbox ausgewählt. Dabei wird “NOTNULL” automatisch gesetzt. Die ID Spalte ist vom Typ “INTEGER”. Ein Stan-dartwert wird nicht benötigt.Zur besseren Gestaltung soll der Primärschlüssel die erste Spalte sein. Um die Spal-te an diese Position zu verschieben, wählen wir im ersten Dropdown-Menu in der“Switch” Einstellung, die Spalte “ID”. In dem zweiten Dropdown-Menu wird diePosition gewählt. Die Einstellung wird mit dem nebenstehenden Button bestätigt.

Die fertige Tabelle sollte folgendermaßen aussehen: (Abbildung: 26)

Abbildung 26: Fertige Schueler Tabelle

Die Tabelle “Fach” wird nach dem gleichen Muster erstellt. (Abbildung: 27)

54

Page 58: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

A. Anhang

Abbildung 27: Fertige Fach Tabelle

Beheben von FehlernSollte während der Bearbeitung ein Fehler passieren, kann der “Undo” Buttonauf der oberen Seite verwendet werden. Zusätzlich wird nach jeder Änderung einEintrag im Stack erstellt. Mit einem Mausklick auf einen Stackeintrag wird dieTabelle zu diesem Zustand verändern.

Vereinigungstabelle erstellenDa die Relation zwischen den Tabellen eine N-zu-M-Relation ist, muss zusätzlicheine Vereinigungstabelle erstellt werden. Zuerst wird eine neue Tabelle namens“macht_Abi” erstellt, die nur die Spalte “Note” vom Typ “FLOAT” besitzt. Fürdiese Spalte wird der Standartwert “0.0” eingetragen.Nach dem Speichern der Tabelle, wird in der Schemaansicht das Schema dargestellt(Abbildung: 28a). Es ist zu sehen, dass die Tabellen keine Relation haben.

Tabellen bearbeitenUm Relationen zwischen den Tabellen zu erstellen, muss die Tabelle “macht_Abi”bearbeitet werden. Es wird auf das bearbeitungs Symbol neben der Tabelle ge-drückt. Es werden zwei Spalten erstellt: “fk_schueler” und “fk_fach”, die beidevom Typ “INTEGER” sind.Die Spalten sollen Foreign Keys auf die beiden Tabellen haben. Im ersten Dropdown-

55

Page 59: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

A. Anhang

(a) Schema ohne Relationen (b) Schema mit Relationen

Menu in der “Add FK” Auswahl, wird die Spalte “fk_schueler” ausgewählt. In demdarauf erscheinten Dropdown-Menu wird die Tabelle gewählt auf den der ForeignKey zeigen soll. In diesem Fall “Schueler”. In dem letzten Dropdown-Menu wirdnoch die genaue Spalte (“ID”) der Tabelle gewählt, auf den der Foreign Key ver-weisen soll. Nachdem alles ausgewählt wurde wird die Einstellung mit dem Buttonbestätigt.Die Schritte werden für den Foreign Key zur “Fach” Tabelle erstellt. Die erstell-ten Foreign Keys werden dabei unter dem Typen der Spalte dargestellt. Wenn dieTabelle folgendermaßen (Abbildung: 29) aussieht, kann diese gespeichert werden.

Das angezeigte Schema ist (Abbildung: 28b) wie es zu erwarten ist.

Tabellen Datten befüllenNachdem das Schema erstellt wurde, können mit der bereits eingebauten Funk-tion Datensätze in die Tabelle eingeführt werden. (Abbildung: 30) Für genauereInformationen dazu siehe die Master-Thesis von Marcus Riemer. 26

Tabelleninhalte ansehenZum Schluss können, indem der Name der Tabelle geklickt wird, die eingetragenen

26https://marcusriemer.de/static/marcus-riemer-thesis-blattwerkzeug.pdf

56

Page 60: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

A. Anhang

Abbildung 29: Tabelle mach_Abi mit Foreign Keys

Daten angezeigt werden.

57

Page 61: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

A. Anhang

Abbildung 30: Insert Statement erstellen

Abbildung 31: Tabelleninhalte der Schueler Tabelle

58

Page 62: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

B. Eidesstattliche Erklärung

B. Eidesstattliche Erklärung

Ich erkläre hiermit an Eides statt, dass ich die vorliegende Arbeit selbstständig und ohneBenutzung anderer als der angegebenen Hilfsmittel angefertigt habe; die aus fremdenQuellen direkt oder indirekt übernommenen Gedanken sind als solche kenntlich gemacht.Die Arbeit wurde bisher in ähnlicher Form keiner anderen Prüfungskommission vorgelegtund auch nicht veröffentlicht.

Hamburg, 30. April 2017 Marco Pawlowski

59

Page 63: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

C. Literaturverzeichnis

C. Literaturverzeichnis

60

Page 64: Entwicklung eines Datenbankschemaeditors für den Einsatz ...files.blattwerkzeug.de/theses/marco-pawlowski... · Angular2 Angular 29 ist ein von Google entwickeltes Javascript basiertes

D. CD-ROM

D. CD-ROM

Alle auf der beigefügten CD-ROM enthaltenen Daten sind auch im Blattwerkzeug-Git-Repository unter http://blattwerkzeug.de/forward/git-repository verfügbar.

61