Zitat.json – Software agil entwickeln: Handlungsnotwendige Kenntnisse

Die handlungsnotwendigen Kenntnisse beschreiben Wissenselemente, die benötigt werden um die Aufgaben zu lösen.

Das Web spricht Hypertext (HTML)

Als man damit anfing, Texte für die Verbreitung via Internet zu schreiben, entwickelte man HTML. HTML (Hypertext Markup Language) ist eine Auszeichnungssprache. Befehle beschreiben lediglich die Art und Weise der Darstellung des Dokumentes im Web Browser. Damit ein Web Browser einen Befehl interpretieren kann, werden diese durch eine vorgegebene Syntax gekennzeichnet – die sogenannte Tags.

HTML ist ein Klartextformat. HTML-Dateien können Sie mit jedem Texteditor bearbeiten, somit gibt es keine bestimmte Software, die Sie benötigen.

HTML5 Grundgerüst

<!doctype html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Titel der Seite</title>
 </head>
<body>
  <!-- Visible content -->
</body>
</html>

Semantische Verwendung von HTML Tags

HTML ist kein Mittel zur visuellen Gestaltung. HTML ist Beschreibung (Markup) und HTML-Tags geben dem beschriebenen Text Bedeutung.

Zum Beispiel ist eine <h1> Überschrift nicht einfach ein Titel in grossen, fetten Buchstaben, sondern steht für die oberste Stufe in einer logischen hierarchischen Gliederung. Weitere HTML-Tags mit deutlichen semantischen Eigenschaften sind <strong> (starke Betonung), <blockquote> (zitierter Text), und <address> (Adressinformationen).

Werden HTML-Tags semantisch verwendet, enthalten Hypertexte auch für (Such-) Maschinen lesbare Bedeutung.

HTML Syntax

Auch HTML kennt Schreibregeln. Nach gültigem Standard müssen Tags und Attribute in Kleinbuchstaben geschrieben werden und Attributwerte in Anführungszeichen (" ") stehen.

Document Object Model

Ein HTML Seite wird durch die Document Object Model (DOM) Spezifikation als Hierarchie von Knoten repräsentiert. Die logische Struktur (Text und Markup) der HTML Dokumente kann über diese Schnittstelle verändert, gelöscht oder ergänzt werden. Sie wird vom World Wide Web Consortium (W3C) definiert.

CGI Schnittstelle

HTML kann auch mit Hilfe von Programmen erstellt werden. Durch Einsatz der CGI-Schnittstelle können Programme oder Scripts im Web eingesetzt werden.

Es ist möglich, aus einer HTML-Datei, ein CGI-Script aufzurufen. Auch kann ein CGI-Script HTML Code an den Web Browser senden. Der Code wird auf dem Server ausgeführt und generiert HTML-Ausgaben, die an den Client gesendet werden.

Hyperlinks

Eine Besonderheit von Hypertext ist die Möglichkeit, an eine andere Stelle innerhalb eines Dokuments oder an eine Stelle in einem anderen Dokument zu springen. Diese Verknüpfungen werden gesteuert durch Hyperlinks (oder einfach Links).

Weblinks sind das wichtigste Element zum Surfen im Web.

Hypertext gestalten mit Formatvorlagen (CSS)

Zur Gestaltung von HTML-Seiten werden Formatvorlagen (Styles) zur Formatierung der Elemente eingesetzt. Eine Überschrift der Kategorie 1 (<h1>), wie jeder Absatz (<p>), jede Grafik (<img>) sind solche Seitenelement.

CSS (Cascading Style Sheets) Regeln bestehen aus einem Selektor, der die gewünschten HTML Elemente auswählt und einer Eigenschaft mit Zuordnung des Werts.

Selektor { Eigenschaft: Wert; }

Die Kombination aus Eigenschaft und Wert wird als Deklaration bezeichnet.

Um einheitliche Formate für alle HTML Dateien festzulegen, werden diese in eine separate Datei definiert und über einen Tag eingebunden:

<link rel="stylesheet" href="css/styles.css">

CSS Box-Modell

CSS folgt einem bestimmten Layout-Modell, dem sogenannten Box-Modell. Jedes Element auf einer Seite ist eine rechteckige Box.

Es wird zwischen zwei Typen differenziert: den Inline- und den Block-Elementen. Der Unterschied liegt darin, dass Inline-Elemente keine Höhe, keine Breite und keinen Aussenabstand haben können. Block-Elemente stehen - sofern nicht mit CSS modifiziert - alleine in einer Zeile, auch wenn sie nur sehr schmal sind. Inline-Elemente hingegen werden in der gleichen Zeile dargestellt.

Eine Box besteht aus folgenden Bereichen:

Inhalt (Text, Bilder, weitere HTML Elemente)
Innen- und Aussenabstand (Aussenabstand nur bei Block-Elementen)
Rand
Hintergrund (Farbe und/oder Bild)

Die Grösse der Box wird berechnet durch …

Breite = width + padding-left + padding-right + border-left + border-right
Höhe = height + padding-top + padding-bottom + border-top + border-bottom

Die Grafik zeigt, wie das Box-Modell hierarchisch aufgebaut ist.

Mit dem Besucher interagieren (JavaScript und jQuery)

JavaScript ist kein direkter Bestandteil von HTML, sondern eine eigene Programmiersprache. JavaScript eignet sich besonders zur Manipulation von Webseiten, ohne dass diese neu geladen werden müssen. Auch die Überprüfung von Formularen gehört zu diesen Aufgaben.

JavaScripts werden wahlweise direkt in der HTML-Datei oder in separaten Dateien notiert. Sie werden zur Laufzeit vom Web-Browser, in einer so genannten "Sandbox", interpretiert. Das ist eine Art Sicherheitskäfig, in dem die Programmiersprache eingesperrt ist.

In einer Programmiersprache wie JavaScript gibt es für Anfänger viele verwirrende Elemente: Sonderzeichen, Variablen, Wenn-Dann-Anweisungen, Schleifen, Funktionen, Methoden, Parameter, Objekte, Eigenschaften und anderes mehr. Um mit diesen Elementen richtig umgehen zu können, müssen Sie lernen, sich vorzustellen, was im Computer passiert, wenn der Programmcode ausgeführt wird. Das ist ein langwieriger Lernprozess, den Anfänger nur durch viel Übung bewältigen.

Ereignis orientierte Programmierung

Event-Handler (Ereignis-Behandler) sind ein wichtiges Bindeglied zwischen HTML und JavaScript. Event-Handler werden meist in Form von Attributen in HTML-Tags notiert. Event-Handler erkennen Sie daran, dass solche HTML-Attribute immer mit on beginnen, zum Beispiel onclick. Ein Ereignis ist zum Beispiel ein Mausklick oder ein Tastendruck des Anwenders.

<p style="cursor:pointer" 
  onmouseover="this.innerHTML='Hallo Welt!'"
  onmouseout="this.innerHTML='Erkunde die Welt!'">Erkunde die Welt!</p>

Ein Element, das einen Event-Handler enthält, kann auf ein solches Ereignis reagieren, wenn das Ereignis im Anzeigebereich des Elements stattfindet. Mit dem Event-Handler können Sie beispielsweise eine JavaScript-Funktion aufrufen, die das Ereignis verarbeitet und darauf reagiert.

jQuery JavaScript Framework

Das jQuery JavaScript-Framework ist eine beliebte JavaScript-Bibliothek, in der alle grundlegenden DOM-, Ereignis-, Effekt- und Ajax-Funktionen enthalten sind.

jQuery beinhaltet viele Features:

DOM-Selektierung und -Navigation
DOM-Manipulation
Erweitertes Event-System
Hilfsfunktionen (each,…)
Effekte und Animationen
Ajax-Funktionalitäten
Zahlreiche frei verfügbare Plugins
Beliebige Erweiterbarkeit

In jQuery ist das Dollarzeichen ($) ein zentrales Element, da es als Selektor für DOM-Elemente eingesetzt wird. Ein wichtiger Code-Baustein ist also folgender:

$("element")

Mit jQuery kann definiert werden, wann JavaScript-Code ausgeführt wird. Der logischste Zeitpunkt dafür tritt ein, sobald die HTML-Datei und alle darin befindlichen Elemente (wie Bilder) geladen wurden: Das Dokument ist dann "fertig". So heisst auch die entscheidende Funktion in jQuery, die das Script zum Rollen bringt, wenn der HTML-Code vollständig übertragen wurde:

$(document).ready(function(){
  // jQuery-Code
});

Mit folgender Zeile wird die Schriftfarbe des Containers mit der ID "test" auf "weiss" gesetzt:

$("#test").css("color", "#ffffff");

In einer einzigen Javascript-Datei sind alle Funktionen beinhaltet: Die jQuery Bibliothek.

<script type="text/javascript" src="jquery.min.js"></script>

Mit dem Server interagieren (PHP)

PHP (rekursives Akronym und Backronym für PHP: Hypertext Preprocessor) ist eine Skriptsprache die hauptsächlich zur Erstellung dynamischer Webseiten oder Webanwendungen verwendet wird.

Während Prozesse, die über HTML und JavaScript gesteuert werden, exklusiv auf dem Benutzer Rechner ablaufen, bietet PHP die Möglichkeit der dynamischen Benutzer-Server-Kommunikation. PHP ist hauptsächlich auf serverseitige Skripte fokussiert, weshalb Sie alles tun können, was auch ein anderes CGI-Programm kann, wie z.B. Formulardaten sammeln, dynamische Inhalte für Webseiten generieren oder Cookies senden und empfangen.

Heutzutage sind Datenbanken die Hauptkomponenten jeder webbasierten Applikation, aufgrund welcher Websites verschiedene dynamische Inhalte anbieten können. Vielleicht die grösste und bemerkenswerteste Stärke von PHP ist seine Unterstützung für eine breite Masse von Datenbanken.

Die Schnittstellen von HTML zu PHP sind entweder Seitenaufrufe oder Dateneingaben, die der Benutzer über HTML-Formulare vornimmt.

Das Programm wird serverseitig verarbeitet. Das bedeutet, dass der Quelltext nicht an den Webbrowser übermittelt wird, sondern an einen Interpreter auf dem Webserver. Erst die Ausgabe des PHP Interpreters wird an den Browser geschickt.

Mit PHP erweiterte Web-Seiten werden wie normale HTML-Seiten behandelt. Sie können sie genauso wie normale HTML-Seiten erstellen und bearbeiten.

Um zu sehen, ob auf dem Web-Server PHP verfügbar ist, kann eine Datei zu Testzwecke eingesetzt werden:

<body>
  <?php
  phpinfo();
  ?>
</body>

Bitte beachten Sie, dass die PHP-Dateien nicht ausführbar sein müssen, da wir keine kommandozeilenorientierten Skripte schreiben.

Verbreitete PHP-Applikationen

Eine Auswahl verbreiteter Applikationen, die in PHP entwickelt wurden:

phpMyAdmin	WordPress	Symfony	phpBB
TYPO3	Magento	Drupal	sugarCRM
MediaWiki	Piwik	phpPgAdmin	Contao

Asynchroner Datenaustausch (AJAX und JSON)

AJAX (Asynchronous JavaScript and XML) bezeichnet ein Konzept der asynchronen Datenübertragung zwischen einem Web-Browser und dem Server. Dieses ermöglicht es, HTTP Anfragen durchzuführen, während eine HTML-Seite angezeigt wird, und die Seite zu verändern, ohne sie komplett neu zu laden.

Eine Ajax-Anwendung basiert auf folgenden Web-Techniken:

HTML (oder XHTML)
Document Object Model (DOM) zur Repräsentation der Daten oder Inhalte
JavaScript zur DOM Manipulation und zur Darstellung der Inhalte
Das XMLHttpRequest-Objekt um Daten auf asynchroner Basis mit dem Webserver auszutauschen

JavaScript Object Notation (JSON)

Die Abkürzung JSON steht für JavaScript Object Notation. Der Datenaustausch via JSON hat sich im Web und auf mobilen Endgeräten etabliert, da XML mehr Informationen (Overhead) benötigt. JSON wird nicht nur in Verbindung mit JavaScript eingesetzt, sondern auch bei der Entwicklung von Apps für iPhone oder Android.

Die wesentlichen Datenstrukturen sind Objekte und Arrays.

Ein Objekt beginnt mit { und endet mit } und kann eine ungeordnete Liste von Paaren aus einem Schlüssel und einem Wert enthalten.
Ein Array beginnt mit [ und endet mit ] und kann eine geordnete Liste von Werten enthalten.
Ein Schlüssel ist eine Zeichenkette.
Ein Wert kann ein Objekt, ein Array, eine Zeichenkette, eine Zahl, ein boolescher Wert oder null sein.

{
  "Name" : "Meier",
  "Vorname" : "Hans",
  "Telefon" : [
    "089-12345678",
    "0174-1234567"
  ]
}

Daten sammeln und verwalten (MySQL und phpMyAdmin)

Internetprojekte greifen häufig auf Datenbestände zurück, die in Datenbanken gespeichert sind. MySQL ist eine relationale Multi-User Datenbank, die auf verschiedenen Plattformen angeboten wird. In einer Datenbank sind Auszüge der realen Welt abgebildet, wobei nur diejenigen Eigenschaften berücksichtigt sind, die für die Arbeit mit der Datenbank von Bedeutung sind. Mit PHP können sämtliche Funktionen von MySQL gesteuert werden.

Aufbau einer Datentabelle in einer relationalen Datenbank

In den Spaltenüberschriften stehen die Bezeichnungen für die Datenfelder bzw. Attribute. In den einzelnen Zellen (= Datenfelder) stehen die "Daten" oder "Werte".

Jede Zeile bildet einen Datensatz ab (auch: Tupel). Jeder Datensatz muss eindeutig zu bestimmen sein. Dazu benutzt man ein Feld, dessen Inhalt in der Tabelle nur einmal vorkommt - Primärschlüssel. Wenn ein solches Feld nicht existiert, wird es künstlich erzeugt (z.B. Feld ID - Identifikationsnummer).

Komfortable Datenbank Benutzeroberfläche (phpMyAdmin)

MySQL umfasst - im Gegensatz zu beispielsweise Access – keine komfortable Benutzeroberfläche, mit deren Hilfe Sie Tabellen anlegen oder Daten manipulieren können. Eine solche Benutzeroberfläche bietet jedoch phpMyAdmin, durch deren Einsatz die Arbeit mit Datenbanken erheblich erleichtert wird.

phpMyAdmin ist das wohl beliebteste Administrationswerkzeug für MySQL. Sie können damit Datenbanken und Tabellen erzeugen, verändern und wieder löschen, neue Datensätze einfügen/ändern/löschen, Daten bzw. ganze Datenbanken importieren und exportieren sowie diverse andere Administrationsaufgaben durchführen.

Eine mögliche phpMyAdmin Alternative ist phpMiniAdmin. Es ist mit seinen ~10Kb sehr klein, besteht auch aus nur einer Datei und ist deshalb schnell eingerichtet. Es hat gegenüber phpMyAdmin zwar ein etwas kleinerer Funktionsumfang, dafür erscheint bei jeder Aktion der dazugehörige SQL Befehl.

Datenbanken sprechen SQL

SQL ist die Abkürzung für Structured Query Language, also strukturierte Abfragesprache. Die Abfragesprache SQL ist die etablierte Sprache für die Arbeit mit relationale Datenbankmanagementsysteme (DBMS). Relationale Datenbanken versuchen einen Bestandteil der Realität in einem Datenmodell abzubilden. Für diese Datenmodelle gibt es verschiedene Abstraktionsebenen. In der Regel unterscheidet man zwischen Entitäten-Modell und Tabellenmodell.

Datenbank Tabellen

Tabellen sind zweidimensional gegliederte Informationen. Anzahl, Bezeichnung und Typ der Spalten (auch Felder oder Attribute genannt) werden durch die Definition der Tabelle festgelegt. Die Zeilen (Anzahl und Inhalte) sind variabel und entsprechen jeweils einem Objekt des Typs, der in der Tabelle gesammelt wird. Dabei handelt es sich um eine Basistabelle (TABLE).

Spalten bezeichnen die Elemente einer Tabellenstruktur. Sie werden eindeutig gekennzeichnet durch ihren Namen und besitzen einen Datentyp.

Datenbank Verknüpfungen und Schlüssel

Mit Verknüpfungen und Schlüssel werden Tabellen in Beziehung zueinander gebracht. Der Primärschlüssel ist eine Spalte in der Tabelle, durch die eindeutig jede Zeile identifiziert wird. Über Fremdschlüssel werden die Tabellen miteinander verknüpft.

Durch Verknüpfungen (Relationen) werden mehrere Vorteile erreicht:

Informationen werden nur einmal gespeichert
Änderungen werden nur einmal vorgenommen
Der Zusammenhang der Daten wird gewährleistet

Damit dies umgesetzt werden kann, sind geeignete Massnahmen nötig:

Jeder Datensatz muss durch einen Schlüssel eindeutig identifiziert werden
Die Schlüssel der verknüpften Datensätze müssen sich zuordnen lassen

SQL Syntax

Die Menge an SQL Befehlen wurde in Teilbereiche gegliedert:

DML – Data Manipulation Language (Beschäftigt sich mit dem Inhalt des Datenbestandes)

 INSERT, UPDATE, DELETE

DDL – Data Definition Language (Definiert die Struktur einer Datenbank)

 CREATE, ALTER, DROP

DCL – Data Control Language (Regelt Rechte für den Zugriff auf Objekte)

 GRANT, REVOKE

Versionen verwalten (Git)

Eine Versionsverwaltung ist ein System, das zur Erfassung von Änderungen an Dokumenten oder Dateien verwendet wird. Alle Versionen werden in einem Archiv mit Zeitstempel und Benutzerkennung gesichert und können später wiederhergestellt werden.

Versionsverwaltungssysteme werden typischerweise in der Softwareentwicklung eingesetzt, um Quelltexte zu verwalten. Versionsverwaltung kommt auch in Büroanwendungen oder Content Management Systemen zum Einsatz.

Einst gab es in der freien Softwarewelt nur CVS. Inzwischen existieren mit Subversion, Git, Mercurial und Bazaar mehrere professionelle, ausgereifte Systeme für die Versionsverwaltung.

Git ist in der Programmiersprache C entwickelt und stand lange Zeit nur für Unix-basierte Systeme zur Verfügung. Mit Git for Windows oder GitHub Desktop existiert auch eine stabile und schnelle Portierung für Windows.

Git besteht aus einer Vielzahl von Einzelbefehlen. Hinter jedem dieser Befehle steckt ein eigenes ablauffähiges Programm, das über das Kommandozeilen-Werkzeug Git gestartet wird. Wem die Arbeit mit den Kommandozeilenprogrammen nicht eingängig genug ist, der kann auf verschiedene grafische Benutzeroberflächen zurückgreifen. Wer unter Windows entwickelt, der kann Tortoisegit nutzen, das sich in den Windows Explorer integriert.

Erste Schritte mit Git

Wir erstellen zunächst ein Projektverzeichnis und fügen Dateien hinzu. Dieses Verzeichnis wollen wir nun unter Versionsverwaltung mit git stellen. Wir wechseln in die Wurzel des Projektes und führen die Initialisierung durch.

git init

Dadurch wird ein Verzeichnis .git (lokales leeres Repository) angelegt, dass unsere Versionsverwaltung aufnimmt. Die Dateien des Projektverzeichnisses werden nun mit Hilfe von

git add .

hinzugefügt.

Wie bei anderen VCS sorgt auch bei Git der Befehl commit dafür, dass eine Version für die Änderungen angelegt wird.

git commit -m 'Beseitigung Fehler #156'

Die sieben Fragen einer User Story

Wer eine Antwort will, muss zuerst Fragen. Man kann offene Fragen stellen, oder auch geschlossene Fragen. Geschlossene Fragen kann man mit Ja oder Nein beantworten, offene Fragen benötigen hingegen eine etwas ausführlichere Antwort.

Fragen, die mit einem W-Wort beginnen, also mit einem Fragewort, dessen Anfangsbuchstabe W lautet sind W-Fragen. W-Fragen fördern die Kommunikation im Team, fragen Meinungen und Informationen ab.

Als klassische W-Fragewörter gelten: Wer / Was / Wozu / Wo / Wann / Wie / Warum

Eine User Story ist das Ergebnis der Antworten auf die Fragen:

Wer möchte was, wozu?

Es bleiben noch die Fragen Wo / Wann / Wie / Warum übrig. Durch eine Analyse der Schlüsselwörter innerhalb der W-Frage Was werden die übrige Fragen im Team besprochen und Akzeptanzkriterien festgelegt.

Beispiel einer User Story

Als Benutzer möchte ich mein Profil speichern können, damit ich meine Daten nicht immer wieder eingeben muss.

Schlüsselwort: Speichern - W-Fragen (Verb)

Wer muss …?
Wann soll … stattfinden?
Wann ist … abgeschlossen?
Wie kann … durchgeführt werden?
Wie oft/schnell/gross soll … sein?
Wie/Wo kann geprüft werden ob … durchgeführt wurde?
Wurde sichergestellt das … alle Daten/Aspekte berücksichtigt?
Was geschieht wenn man nicht … kann?
Was könnte … verhindern und was wird dann erwartet?
Welche Fehleingaben müssen in Zusammenhang mit … abgefangen werden?

Schlüsselwort: Profil - W-Fragen (Substantiv)

Welche Inhalte kommen in … vor?

Welche optionale/verpflichtende Aspekte gelten für …?
Welche Inhalte von … und nach welchen Regeln soll überprüft werden?
Wie sieht das Layout für … aus?

Die Fragen werden im Team diskutiert und sollen die Kommunikation unterstützen und mögliche Lücken in der Anzahl der Akzeptanzkriterien schliessen.

◀ Wichtige Strategien

Inhaltsverzeichnis

Agile Umsetzung (Aufgabenstellungen) ▶

<< Inhaltsverzeichnis