Webtechnologien

3. Semester

XHTML

Vorgänger von HTML5. Basiert auf XML. Abgeleitet von SGML. Viel strickter als HTML.

HTML5

Wurde 2014 veröffentlicht. Hat mehr Elemente als frühere HTML Versionen. Audio und Video können direkt verwendet werden. Plugins werden dadurch unnötig.

<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
        <meta charset="utf-8">
    </head>
    <body>
        Hello World
    </body>
</html>

CSS

CSS ist für das Styling der Websiten zuständig. Dadurch wird die Trennung von Inhalt und Styling aufrecht erhalten.

Einbinden

Selektoren

Element

h1 {
}

ID

#myId {
}

Klasse

.myClass {
}

Nachkommen

div p {
}

Direct Child

div > p {
}

Direkte Geschwister

ul + p {
}

Allgemeine Geschwister

ul ~ p {
}

Attribute

a[title="Ein Titel"] {
}

Box Modell

DIV und SPAN

DIV und SPAN werden verwendet um Elemente einzufügen. DIV für Block Element und SPAN wird für Inline Elemente verwendet. Heute können für DIV jedoch auch semantische Elemente verwendet werden wie etwa section oder nav.

Encoding

Character Encoding ist die Zuordnung eines Bitmusters zu einem Zeichen. Zeichenvorrat ist die Anzahl der möglichen Zeichen. Zeichensatz definiert welche Zeichen es gibt (etwa Umlaute etc.).

Byte-Order Mark

Wird bei Textdateien verwendet um anzugeben welchen UTF-x Dialekt verwendet wird. Steht am Anfang des Dateicodes. Little Endian heisst das das niederwertige Bit zuerst geschrieben wird und Big Endian heisst, dass das höherwertige Bit zuerst geschrieben wird. Wird nur bei UTF-16 und UTF-32 verwendet.

Client-Server Modell

Ermöglicht das die Anwendungen auf mehrere Computer verteilt werden kann und macht das Ganze dadurch dezentraler. Ist die Basis für das WWW und HTTP.

Two-Tier Architektur

Die Software läuft auf dem Client und greift für die Daten auf einen Server zu. Bei einer Programm Änderung muss die Software auf allen Clients aktualisiert werden.

Three-Tier Architektur

  1. Client übernimmt Präsentationsschicht (JavaScript)
  2. Application Server (PHP)
  3. Datenserver (etwa eine Datenbank)

Skalieren viel besser als Tow-Tier Architekturen. Three-Tier Architektur gilt auch für MVC Architektur.

N-Tier Architektur

  1. Client
  2. Presentation Layer Server
  3. Application Server
  4. Datenbankserver

HTTP Client-Server Kommunikation

HTTP/1.0
Eine TCP Verbindung pro Anfrage
HTTP/1.1
Eine TCP Verbindung kann wieder verwendet werden (keepalive)
HTTP/2
Binäres Protokoll->kompakter, Multiplexing, Server Push

HTTP Anfragemethoden

Methode Beschreibung
GET Holt eine Ressource vom Server
HEAD Holt nur den Header einer Ressource vom Server
POST Sendet Daten im Body an den Server
PUT Speichert den Body der Anfrage auf dem Server
TRACE Schickt eine Anfrage zurück an den Client. Dazwischenliegende Proxy Server erweitern die Daten. Wird in erster Linie für die Fehleranalyse verwendet.
OPTIONS Holt die Liste der verfügbaren Methoden vom Server
DELETE Löscht den Ressource auf dem Server

HTTP Status Codes

HTTPS: Ablauf

PHP

Anwendungsbereiche

  • Dynamische Webseiten
  • Webseiten mit Datenbank Inhalt
  • Darstellen von Inhalten aus anderen Formaten
  • Interaktive Webseiten

Hello World

<html>
    <body>
        <?php
            echo "Hello world";
        ?>
    </body>
</html>

Variabeln

  • Starten immer mit $
  • Anschliessen A-z oder _
  • Case-Sevsitive
  • Keine Syntax Vorgaben

Konstanten

<?php
define("CONSTANT", "This is a constant.");

function myTest() {
        echo CONSTANT;
}

myTest();
?>

Array

<?php
$cars = array("Volvo", "BMW", "Toyota");
$cars[0] = "Volvo";

$age = array("Peter"=>"35", "Max"=>"28");
$age['Peter'] = "35";
?>

Typen

  • int
  • float
  • string
  • bool
  • array
  • object
  • unset
<?php
$value = "100"; //String
$value = (int)$value //Converted to int
?>

Superglobals

$GLOBALS
$_SERVER
$_REQUEST ($_GET + $_POST + $_COOKIE)
$_POST
$_GET
$_FILES
$_ENV
$_COOKIE
$_SESSION

Call by Value/Reference

Value

<?php
$var = 1;
function foo($var)
{
    $var++;
}
echo $var; //1
?>

Reference

<?php
$var = 1;
function foo(&$var)
{
    $var++;
}
echo $var; //2
?>

REST

GET /api/robots Retrieves all robots
GET /api/robots/2 Retrieves robots based on primary key
POST /api/robots Adds a new robot
PUT /api/robots/2 Updates robots based on primary key
DELETE /api/robots/2 Deletes robots based on primary key

Forms

In HTML5 neu dazugekommen:

  • color
  • date
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

Wenn HTML5 nicht unterstützt wird werden sie als text input behandelt.

Input

//index.html
<form action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br><br>
  <input type="submit" value="Submit">
</form>

//action_page.php
<?php
echo $_POST['firstname'];
echo $_POST['lastname'];
?>

select

<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

option

<select name="cars" size="3" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

textarea

<textarea name="message" rows="10" cols="30">
    The cat was playing in the garden.
</textarea>

button

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

radio

<form>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>

htmlspecialchars()

Wandelt Sonderzeichen in HTML Code um. Dies ist nötig weil die speziellen Zeichen je nach dem ungewollte Reaktionen auslösen könnten da sie in PHP eine spezielle Bedeutung haben.

Formularverarbeitung

Nach Entgegennahme eines Requests sollte die Formularverarbeitung im Normalfall mit diesen Schritten abgearbeitet werden:

  • Validierung
    • Sind alle required Felder ausgefüllt?
    • Gibt es Verletzungen von Formatvorgaben oder Datentypen?
  • Verarbeitung der Daten
    • Datenbankoperationen durchführen
    • Loggen
  • Rendern einer Antwortseite
    • Das Vorhandensein von Fehlern entscheidet, welche Seite als Antwort angezeigt werden soll
    • Wenn Feldwerte ausgegeben werden, immer htmlspecialchars() oder Typecasts verwenden

Kontrollstrukturen

  1. if/else/elseif

     <?php
    $t = date("H");
    
    if ($t < "10") {
        echo "Have a good morning!";
    } elseif ($t < "20") {
        echo "Have a good day!";
    } else {
        echo "Have a good night!";
    }
    ?>
  2. switch

     <?php
    $favcolor = "red";
    
    switch ($favcolor) {
        case "red":
            echo "Your favorite color is red!";
            break;
        case "blue":
            echo "Your favorite color is blue!";
            break;
        case "green":
            echo "Your favorite color is green!";
            break;
        default:
            echo "Your favorite color is neither red, blue, nor green!";
    }
    ?>
  3. while

     <?php
    $x = 1;
    
    while($x <= 5) {
        echo "The number is: $x <br>";
        $x++;
    }
    ?>
  4. do...while

     <?php
    $x = 1;
    
    do {
        echo "The number is: $x <br>";
        $x++;
    } while ($x <= 5);
    ?>
  5. for

     <?php
    for ($x = 0; $x <= 10; $x++) {
        echo "The number is: $x <br>";
    }
    ?>
  6. foreach

     <?php
    $colors = array("red", "green", "blue", "yellow");
    
    foreach ($colors as $value) {
        echo "$value <br>";
    }
    ?>
  7. continue

    <?php
    $stack = array('first', 'second', 'third', 'fourth', 'fifth');
    
    foreach($stack AS $v){
        if($v == 'second')continue;
        if($v == 'fourth')break;
        echo $v.'<br>';
    }

Klassen

<?php

class Person {

    protected $name;
    protected $vorname;
    protected $alter;
    protected $wohnort;

    public __construct($name) {
        $this->name = $name;
    }

    public __destruct() {
    }

    public function getName() {
        return $this->name;
    }
}

class Student extends Person {
}
?>

Interfaces

interface Reader {
    public function read();
}

class BookReader implements Reader {
    public function read() {
        echo "reading a book";
    }
}

Exception

class CustomException extends Exception {
    public function errorMessage() {
        $errorMsg = 'Error: ' . $this-getMessage();
        return $errorMsg;
    }
}

try {
    echo $email;
    throw new CustomException($email);
} catch (CustomException $e) {
    echo $e->errorMessage();
}

4. Semester

XML

XML dient zur Beschreibung und Darstellung von Daten. Ist ein W3C Standard. Die aktuelle Version ist "Fünfte Ausgabe Version 1.0" von 2008. Wurde entwicklet um auf einfach und standartisierte Weise Daten austauschen zu können. XML ist dabei:

  • frei verfügbar
  • hat eine einheitliche Zeichenkodierung
  • eine allgemeingültige Hierarchie/struktur
  • einheitliche Formate der Felder
  • einfach erweiterbar
  • selbstbeschreibend (DTD oder XSD)

Wohlgeformt und Valide

Wohlgeformt
Root Element vorhanden, Keine Überschneidung von Elementen, alle Tags korrekt geschlossen
Valide
Grammatik der Schemasprache (DTD, XSD)erfüllt

Vorteile

  • Freie Modellierung von Daten
  • Daten unabhängig von Darstellung
  • offener Standard
  • Unicode

Nachteile

  • grosser Speicherbedarf und höhere Übertragungsmenge
  • beschränkte Datentypisierung
  • schwierig Beziehungen zu beschreiben
  • Für Menschen schwer lesbar

XML basierte Formate

Einsatzgebiete

  • Datenablage (MS Office)
  • Datenbanken
  • Schnittstellen
    • Webservices (SOAP, REST)
    • Zahlungsinterfaces
    • RSS

Alternativen

  • JSON
  • YAML

XML Aufbau

Prolog

Die Elemente sind optional ohne ist die Datei jedoch nicht wohlgeformt oder valide. Mindestens die Declaration sollte vorhanden sein.

Body

  • Namen dürfen nur mit Buchstaben oder _ - . beginnen
  • Namen dürfen keine Leerzeichen enthalten
  • Namen dürfen nicht mit xml oder XML beginnen
  • Gross und Kleinschreibung wird unterschieden

Entity References

Werden verwendet um special Characters zu escapen

DTD

  1. Beispiel XML mit DTD

    <?xml version="1.0"? encoding="UTF-8" standalone="no"?>
    <!DOCTYPE collection SYSTEM "recipes.dtd">
    <?xml-stylesheet href="tutorialspoint.css" type="text/css"?>
    <!-- Comment
    Over multiple lines
    -->
    <collection>
      Inline Element<description>Some Text</description>
      <empty/>
      <recipe>
        <title>Brot</title>
        <ingredient name="mehl" amount="2" unit="kg"/>
        <preparation>
          <step>knetten</step>
          <step>backen</step>
        </preparation>
        <comment>Dies ist ein Kommentar</comment>
        <nutrition protein="2" carbohydrates="4" fat="7"/>
      </recipe>
    </collection>
  2. Document Type Definition

    • Erlaubt die Validierung eines XML Dokuments
    • Garantiert die Gültigkeit
    • Macht Sinn, wenn
      • Daten über einen längeren Zeitraum gespeichert werden
      • Von verschiedenen Stakeholdern verarbeitet bzw. gepflegt werden
    • Gibt den Spielraum für ein XML Dokument vor:
      • Welche Elemente dürfen verwendet werden
      • Welche Attribute können/müssen für Elemente verwendet werden
      • Welche Subelemente können/müssen für Elternelement vorkommen

    "SYSTEM" wird für private also selbsterstellte DTDs verwendet

    <!DOCTYPE collection SYSTEM recipes.dtd>

    "PUBLIC" wird für standartisierte DTDs verwendet

    <!DOCTYPE html PUBLIC "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3. Beispiel DTD

  4. Verarbeitungsanweisung

    Geben an wie das XML verarbeitet werden müssen. Syntax:

    target
    An welche Applikation die Instruktion gerichtet ist
    instructions
    Welche Informationen sollen verarbeitet werden

  5. CDATA vs. PCDATA

DTD vs. XSD

DTD

  • nur sehr wenige Datentypen (CDATA, PCDATA, ID, IDREF, etc.)
  • eingeschränkt Strukturierbar
  • wiederverwendung nur eingeschränkt möglich
  • Typen können nicht von Anwender erweitert werden
  • Keine Namensräume
  • Nur sehr einfache Referenzierung möglich
  • DTD selber ist nicht XML konform

*XSD*

  • sind gültige XML Dokumente
  • alle modernen Datentypen vorhanden
  • eigene Datentypen können definiert werden
  • erweiterbar
  • Namensräume werden unterstützt

XML Schemas

XML Dokumente welche von einem XML Schema abgeleitet werden, werden Instanzdokumente genannt.

Beispiel XML mit XSD

<?xml version="1.0"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"
targetNamespace="https://www.w3schools.com"
xmlns="https://www.w3schools.com"
elementFormDefault="qualified">

<xs:element name="note">
  <xs:complexType>
    <xs:sequence>
      <xs:element name="to" type="xs:string"/>
      <xs:element name="from" type="xs:string"/>
      <xs:element name="heading" type="xs:string"/>
      <xs:element name="body" type="xs:string"/>
    </xs:sequence>
  </xs:complexType>
</xs:element>

</xs:schema>
<?xml version="1.0"?>
<note
xmlns="https://www.w3schools.com"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="https://www.w3schools.com/xml/note.xsd">
  <to>Tove</to>
  <from>Jani</from>
  <heading>Reminder</heading>
  <body>Don't forget me this weekend!</body>
</note>

XPath

  • Ist ein W3C Standard
  • Zwei Versionen (1.0 und 2.0)
  • Wird verwendet für:
    • Extensible Stylesheet Language (XSL)
    • Parsen von XML Dokumenten (Websiten)
    • Abfragen in XML Datenbanken

Beispiele

<?xml version="1.0" encoding="UTF-8"?>
<bookstore>
  <book>
    <title lang="en">Harry Potter</title>
    <price>29.99</price>
  </book>
  <book>
    <title lang="en">Learning XML</title>
    <price>39.95</price>
  </book>
</bookstore>
Abfrage Resultat
/bookstore Alles in <bookstore></bookstore>
//book Alle <book> Elemente egal welche Position
//@lang Alle Attribute Namens "lang"
bookstore//book Alle Bücher die Kinder von Bookstore sein
//book[@id='en'] Alle Bücher wo "lang='en'"
/bookstore/book[1] Das erste Buch unter "bookstore"
/bookstore/book[last()] Das letzte Buch
/bookstore/book[price>35.00] Alle Bücher unter 35 Franken
/bookstore/book[price>35.00]/title Alle Titel der Bücher unter 35 Franken
/bookstore/* Alle Elemente unter "bookstore"

XSL

XSL wird dazu verwendet um XML Daten zu formatieren. Wir hauptsächlich im Print Bereich verwendet. Zusammen mit XSL Transformation kann es dazu verwendet um aus XML Dateien andere Dokumente zu erstellen. Etwa von XML zu PDF oder XML zu HTML. XSLT ist ein W3C Standard.

XSLT wird von allen modernen Browser unterstützt. Somit kann XSLT sowohl im Server Bereich wie auch im Client Bereich eingesetzt werden.

Ablauf

JavaScript

  • Schwach und dynamisch typisiert
  • objektorientier, prozedural und funktional
  • Kern als ECMAScript standardisiert
  • keine Klassen
  • unterscheidet Gross und Kleinschreibung

Einsatzgebiete

  • Dynamische Manipulation von Websiten
  • Clientseitige Validierung
  • Senden und Empfangen von Daten ohne erneutes Laden der Seite
  • Animationen
  • Berechnungen
  • Mit Node.js auch serverseitig verwendbar
  • AJAX für Web 2.0

Vor- und Nachteile

Vorteile

  • kein Plugin
  • Logik im Client spart Rechenzeit auf dem Server
  • Schnellere Antwortzeiten für Clients

*Nachteile*

  • Browser Inkompatibilitäten
  • Kann deaktiviert werden
  • Sicherheitsprobleme
  • XSS Angriffe

Beispiel JavaScript in HTML

<!DOCTYPE html>
<head>
  <title>JavaScript</title>
</head>
<body onload="alert('Seite wurde geladen.');">
  <h1>JavaScript</h1>
  <script type="text/javascript" src="functions.js"></script>
  <p style="cursor:pointer" onmouseover="this.innerHTML='Hallo Welt!'"</p>
  <input type="button" value="Check" onclick="raten();" />
  <form onsubmit="return validiereFormular();">
</body>
</html>

Pure JavaScript

function test(parameter1, parameter2) {
    var local_variable = "hi";
    global_variable = "hi";
    alert(paremeter1 + parameter2);
    const constant_variable;
    return local_variable;
    var a = new Array();
    a[0] = "Januar"

    for(var i = 0; i < 10; i++){
        alert(i);
    }

    //set
    document.cookie="user=Max Muster";
    //delete
    document.cookie="user=;expires=Thu, 01 Jan 1970 00:00:00 GMT";

    var id = getElementById(id);
    var tag = getElementsByTagName(elementName);
}
test();
alert(local_variable);

// DOM
function addEntry() {
    var ul = document.getElementById("list");
    var li = document.createElement("li");
    var name = document.getElementsByName("muster");
    var name = document.getElementsByClassName("muster");
    var textNode = document.createTextNode(counter);
    li.appendChild(textNode);
    ul.appendChild(li);
    counter++;
}

//Objects
var obj = {
    property: value,
}

function Farbe (R, G, B)
{
    this.R = R;
    this.G = G;
    this.B = B;
    this.hex = "#";
    var private = "private property"
}
function HintergrundWechseln () {
var Hintergrund = new Farbe("E0", "FF", "E0");
    document.bgColor = Hintergrund.hex + Hintergrund.R + Hintergrund.G +
    Hintergrund.B;
}

//EventListener
var button = document.getElementById("testButton");
button.addEventListener("mousedown", myFunction, false);

HttpOnly

Cookies mit dem Attribut HttOnly können von JavaScript nicht gelesen werden.

Eventlistener

Es werden drei Parameter übergeben:

  1. den Ereigsnistyp (mouseover, onClick)
  2. die auszuführende Funktion
  3. Die Phase (Capture oder Bubbling)

XSS

  • Code Injection Attacke
  • Es wird unbeabsichtig fremdes JavaScript ausgeführt
  • drei Arten
    Persistent XSS
    etwa in einem Gästebuch Eintrag
    Reflected (temporär)
    Der Server schickt ein schädliches Script als Teil einer Antwort retour.
    DOM-based (lokal)
    Kommt vom Computer des Users aus. Server ist nicht involviert.

CSRF

Session-Hijacking
der Angreifer übernimmt die Session des Opfers. Der Angreifer surft im Namen des Opfers.
Session-Fixation
Dem Opfer wird eine falsche Session unterschoben. Das Opfer surft im Namen des Angreifers.

jQuery

jQuery Selectors

Syntax Beschreibung
$("*") Selects all elements
$(this) Selects the current HTML element
$("p.intro") Selects all <p> elements with class="intro"
$("p:first") Selects the first <p> element
$("ul li:first") Selects the first <li> element of the first <ul>
$("ul li:first-child") Selects the first <li> element of every <ul>
$("[href]") Selects all elements with an href attribute
$("a[target='blank']") Selects all <a> elements with a target attribute value equal to "blank"
$("a[target!='blank']") Selects all <a> elements with a target attribute value NOT equal to "blank"
$(":button") Selects all <button> elements and <input> elements of type="button"
$("tr:even") Selects all even <tr> elements
$("tr:odd") Selects all odd <tr> elements

Nutzen

  • Einfache Handhabung von komplexen Aufgaben
  • gute Kapselung von AJAX
  • viele vorgefertigte Objekte
  • Mobile fähig
  • aktive Community

Architektur

statische Seiten

Vorteile

  • Einfache Erstellung
  • keine speziellen Anforderungen
  • gute Performance
  • gute Sicherheit
  • keine speziellen Werkzeuge nötig

*Nachteile*

  • keine Automatisierung
  • keine Personalisierung
  • Seite muss von Hand gepushed werden
  • kann bei grösseren Seiten sehr aufwändig werden

dynamische Seiten

Vorteile

  • Automatisierung möglich
  • Personalisierung möglich
  • Inhalt kann einfach getauscht werden
  • Zeitabhängiges Ein/Ausblenden möglich

*Nachteile*

  • Webserver muss die Technologie unterstützen
  • kann Performance Problem geben
  • potenzielle Sicherheitsprobleme
  • kann komplexer sein

Rich Internet Application

Eine Webseite bei der ein grösserer Teil der Logik auf den Client ausgelagert wird. Theoretisch sind alle Websiten welche komplexere Webanwendung mit JavaScript etc. umsetzen um RIAs.

Single-page-Webanwendung

Kombination von RIAs und Webservices. Präsentationsschicht wird komplett vom Client übernommen.

Standalone

Die Webanwendung ist ein eigenständiges Binärprogramm, welches für jede Anfrage neu gestartet wird. Man nennt solche Anwendungen meist CGI- Programme.

Integriert

Die Webanwendung ist Teil des Webservers oder ein vom Webserver interpretiertes Skript Es muss nicht mehr für jeden Request Cycle ein Programm gestartet werden Beispiele: PHP, Perl, Python, Java Servlet, JavaServer Pages oder ASP.NET.

Fachapplikation mit Webinterface

Spezifisch für einen Kunden angefertigte Software, z.B.

  • Kundenverwaltung (CRM)
  • Vertragsverwaltung für Mitarbeiter einer Versicherung
  • Patientenverwaltung in einem Krankenhaus

CMS

Vorteile

  • Für Laien einfacher zu benutzen
  • Content on the fly erzeugen
  • mit Plugins erweiterbar
  • SEO Unterstützung
  • Dynamische Inhalte
  • Rechteverwaltung

*Nachteile*

  • Code oft nicht W3C konform
  • Code meist undurchsichtig
  • Technologien werden vorgegeben
  • können Sicherheitslücken enthalten

CMS Arten

Volldynamische Systeme
erzeugen die Dokumente bei jedem Aufruf neu
Statische Systeme
Erzeugen die Dokumente aus den Vorlagen als statisch abgelegte Dateien
Hybride Systeme
Inhalte die dynamisch sein müssen werden aus der DB zur Laufzeit gelesen. Der Rest wird statisch abgelegt.Inhalte die dynamisch sein müssen werden aus der DB zur Laufzeit gelesen. Der Rest wird statisch abgelegt.

CMS Varianten

Desktop CMS
Desktop Programm (Adobe Dreamweaver)
Web CMS
Selbst installiert, Wordpress, etc.
Cloud CMS
werden in der Regel nicht selbst installiert und von vielen gleichzeitig genutzt, Jimdo, Wix, Squarespace

CMS Aufbau

Cloud CMS

Entwurfsmuster

Entwurfsmuster sind Lösungsschablonen für bekannte Probleme und dienen als Vorlage zur Problemlösung. In der letzten Zeit auch zunehmend im Human Interface Design zu finden. Sie sollen helfen die üblichen Probleme bei der Entwicklung zu umgehen (schlechte Wartbarkeit, schlechte Testbarkeit, schlechte Portierbarkeit, schlechte Wiederverwendbarkeit).

Typen

  • Erzeugungsmuster (Creational Patterns)
  • Strukturmuster (Structural Patterns)
  • Verhaltensmuster (Behavioral Patterns)

Erzeugungsmuster

  • erzeugt Objekte
  • Beispiele
    • Abstrakte Fabrik
    • Einzelstück (singleton)
    • Erbauer
    • Fabrikmethode (factory method)
    • Multiton
    • Prototype

Strukturmuster

Beschreibt wie Gruppen von Objekten in grössere Strukturen eingeordnet werden können. Soll den Entwurf von Software durch das Erstellen von Beziehungen zwischen Entitäten erleichtern.

Beispiele:

  • Adapter
  • Brücke (bridge)
  • Dekorierer (decorator)
  • Fassage (facade)
  • Kompositum (composite)
  • Stellvertreter (proxy)

Verhaltensmuster

Hilft die Kommunikation und Interaktion zwischen Objekten und Klassen zu definieren sowie den Kontrollfluss in komplexen Programmen zu bestimmen.

Beispiele:

  • Beobacher (observer)
  • Nullobjekt
  • Strategie (strategy pattern)
  • Vermittler (mediator)

Modell View Control

Modell View Control definiert den Aufbau von Software. Soll Änderungen und Erweiterungen vereinfachen sowie Komponenten wiederverwendbar machen.

  • Modell, enthält die Daten
  • View, beschaft die Daten und zeigt sie an
  • Controller, reagiert auf Ereignisse und führt entsprechende Aktionen aus.

Anti-Patterns

Sind das Gegenteil von Entwurfsmuster und entstehen in der Regel durch mangelnde Erfahrung oder Qualifikation oder Zeitknappheit.

Authentifizierung

Authentifizierung

Man beweist seine Identität.

Autorisierung

Steht für das verwalten von Rechten. Welcher User hat worauf Zugriff. Ohne Authentifizierung nicht möglich.

Verfahren

Symetrische
Passwort, Schlüssel, etc
Asymetrische
Public/Private Key (GPG, Zertifikate)

2-Factor Authentication

Basiert auf dem Prinzip das man etwas vorweisen kann was man weiss (Passwort) und etwas was man hat (etwa die Bankkarte + Kästchen). Bietet zusätzliche Sicherheit da ein Angreifer trotz Passwort immer noch keinen Zugriff auf die Daten hat.

HTTP Basic Authentication

Simpleste Form der Authentifizierung im WWW. Daten werden dabei im Klartext übermittelt!

Single Sign On

Man hat einen Account bei einem Dienst. Ein Dritt-Dienst authentifiziert den User dann über den ersten Dienst etwa Facebook oder das Active Directory der Firma.

Hash, Salt und Doppelverschlüsselung

Hash
Prüfwert/Prüfsumme eines Wertes oder einer Nachricht. Ist für den gleichen Wert immer gleich-> Schwachstelle Rainbowtables.
Salt
Vor dem hashen dem Wert angehängt damit nicht jeder Wert gleich aussieht. Erschwert das verwenden von Rainbow Tables.

Doppelverschlüsselung
Passwort und Salt werden verschlüsselt, zusammengehängt und dann nochmal verschlüsselt.

5. Semester

Webservices

Webservices sind Dienste welche Informationen bereitstellen. Dies Könenn etwa Wetter Daten oder Wechselkurse(FX) sein. App basieren auch sehr stark auf Webservices da sie oft auf einen zentralen Dienst zugreifen oder zusätzliche Rechenpower benötigen. Dies erlaubt einem seine Applikation Service orientiert zu entwickeln und sich somit auch seine Kernkompetenz zu konzentrieren.

Als Entwickler greift man über eine Schnittstelle(API) darauf zu welche nach gängigen Webstandards funktionieren.

Vorkommen:

  • verteilte Systeme
  • Systemintegration
  • Kommunikation über Plattformgrenzen

Arten:

  • XML-RPC
  • SOAP
  • REST

RPC

Ein RPC bringt einen entfernten Server zum reagieren. Der Client schickt dabei über eine Methode eine Anfrage (Request) an einen Server/Provider. Dieser wiederum liefert dem Client dann die Antwort (Response), das Resultat.

SOAP

SOAP ist ein W3C Standard. Die Schnittstellendefinition ist meist WSDL. Basiert auf XML. Hat Aufgrund des XML Aufbaus einen relativ grossen Overhead. Ist Plattform agnostisch, das Protokoll kann also frei gewählt werden (HTML, HTTPS, SMTP). Läuft auf der Anwendungsebene ab.

  1. Aufbau

    1. Envelope

      Jede Anfrage besteht aus einem Envelope welcher einen Header und einen Body enthällt. Im Header findet man auch die Namespaces.

    2. Header

      Kann leer sein.

    3. Body

      Enthält die eigentlichen Daten der Anfrage oder Antwort.

  2. Beispiel

    <?xml version="1.0"?>
    <soap:Envelope
        xmlns:soap="http://www.w3.org/2003/05/soap-envelope/"
        soap:encodingStyle="http://www.w3.org/2003/05/soap-encoding">
      <soap:Header>
      </soap:Header>
      <soap:Body>
      </soap:Body>
    </soap:Envelope>
  3. WSDL

    Ist eine Plattform und Protokoll unabhängige Defintionssprache. WSDL definiert ein formales und eindeutiges Interface (Vertrag) zwischen Webservice Provider (Server) und Webservices Konsument (Client). Wird häufig in Kombination mit SOAP und XLS verwendet.

REST

Leichter als SOAP. Allerdings ist REST ein Architektur Stil. Bietet sich jedoch für Webservices an. Basiert rein auf HTTP und verwendet dabei die üblichen HTTP Funktionen und Status-Codes. Da REST auf HTTP basiert kann es ohne Probleme im Browser betrachtet und navigiert werden. Es gibt 3 mögliche Gruppen:

  • Complete RESTful
  • Not fully RESTful
  • No RESTful

*Vorteile gegenüber SOAP:*

  • Leichter
  • weniger komplex
  • ressourcenorientiert
  • Unterstützt verschieden Formate

Ressourcenorientiert bedeutet das eine REST URL diverse Resourcen bereit stellt.

  1. Nutzung

    1. Betrachtung/Abfragen

      1. Die gewünschte URL mit GET aufrufen http://example.com/rest_root/ Diese URL beinhaltet dann alle Objekte welche angeboten werden.
      2. Anschliessend kann dann eine Resource aus der Root ausgewählt werden und diese an die URL angefügt werden. http://example.com/rest_root/resource_path
    2. Daten zum Server schicken

      Daten könnnen via den POST Befehl an den Server geschickt werden.

  2. Spezifikation

    REST hat im Gegensatz zu SOAP keinen fixen Standard. Dadurch kann es verschiedene Implementationen geben. Es gibt jedoch Prinzipien an die man sich halten sollte:

    • Identifizierbare Ressourcen (URI)
    • Adressierbarkeit
    • Benutzung von Standard HTTP Methoden (GET, POST, ..)
    • Unterstützung verschiedener Formate (HTML, JSON, XML)
    • Stateless
  3. Standard HTTP Methoden

    PUT
    Zustandsänderung oder Updaten einer Ressource.
    GET
    Das Wiederauffinden/ Abfragen einer Ressource.
    POST
    Das Erstellen oder Kreieren einer Ressource.
    DELETE
    Das Entfernen oder Löschen einer Ressource.
  4. Anwendung

    Überall wo "RPC"s verwendet werden sowie AJAX und Web "API"s benutzt werden.

Design (SOA)

Ziel ist es flexible Applikationen durch zusammenbauen von wiederverwendbaren (Web-)Services zu bauen.

  1. Designaspekte

    1. Granularität

      Möglichst viele kleine Webservices. Hat Einflus auf:

      • Komplexität
      • Wiederverwendbarkeit
      • Agilität
    2. Wiederverwendbarkeit

      Webservices sollten so allgemein wie möglich gehalten werden damit sie ohne grosse Anpassungen in einem anderen Projekt wieder verwendet werden können.

  2. Sicherheitsaspekte

    • Authentifizierung
    • Autorisierung
    • Integrität
    • Vertraulichkeit

AJAX

Führt HTTP Anfragen im Hintergrund aus. Dabei sollen nur Teile der Website geladen werden und nicht die ganze Seite. Wird oftmals in Kombination mit Webservices eingesetzt was teilweise zu Kolisionen mit der der Same Origin Policy kolidiert. Oft kommt auch jQuery zum Einsatzt. Wird etwa für Push Up Benachrichtigungen verwendet oder Newsticker.

Client-Plattform:

  • Browser
  • JavaScript

Server-Plattform:

  • Scripts
  • Webservices
<!DOCTYPE html>
<html>
<body>

<div id="demo">
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}
</script>

</body>
</html>

Vorteile

  • Nur Teile der Webseite müssen geladen werden
  • Höhere Ladegeschwindigkeit
  • Niedriger Datenaustausch
  • Kein Browser Plugin benötigt

Nachteile

  • JavaScript kann deaktiviert werden
  • Suchmaschinen können keine Daten auslesen
  • Zurück-Button im Browser funktioniert nicht
  • Browserrückmeldungen bei Fehlschlag müssen selbst programmiert werden

readyState

Status Beschreibung
0 Die Anfrage wurde nicht initialisiert
1 Die Anfrage wurde vorbereitet
2 Die Anfrage wurde versendet
3 Die Anfrage wird verarbeitet
4 Die Anfrage wurde abgehandelt

JSON

JSON Array

{
    "book": [
    {
        "id": "01",
        "language": "java"
    },
    {
        "id": "02",
        "language": "python"
    }]
}

JSON Object

{
    "Herausgeber": "Xema",
    "Nummer": "2323424",
    "Waehrung" "Euro"
}

Vor- und Nachteile gegenüber XML

Vorteile

  • kompakter
  • besser Lesbar
  • Datenvolumen geringen
  • kann direkt in JavaScript Objekte umgewandelt werden

*Nachteile*

  • Schlechte Möglichkeiten Metadaten und Kommentare zu integrieren
  • wenig verbreitet
  • nicht erweiterbar

SOP

URL Outcome Reason
http://store.company.com/dir2/other.html Success  
http://store.company.com/dir/inner/another.html Success  
https://store.company.com/secure.html Failure Different protocol
http://store.company.com:81/dir/etc.html Failure Different port
http://news.company.com/dir/other.html Failure Different host

Kann mit diesen zwei Verfahren umgangen werden:

  • JSONP
  • CORS

JSONP

  • Unsicher da nicht kontrolliert werden kann was zurück kommt
  • wird über dein src-Attribut in einem script-Element realisiert

CORS

  • funktioniert mit Berechtigungen
  • sicherer als JSONP

E-Commerce

B2C
klassischer Webshop
B2B
Webshop für Firmen (alltron, mobility)
C2C
Ricardo etc.

Cloud Servicemodelle

Vor- und Nachteile

Vorteile

  • Hohe Skalierbarkeit
  • Elastizität
  • Nutzungsbasierte Abrechnung (pay as you go)
  • Keine hohen Initial Kosten
  • Sehr kurze Setup Zeit (time to market)
  • Keine eigene Infrastruktur (Rechenzentrum, Server, Netzwerk) notwendig

*Nachteile*

  • Grosse Abhängigkeit vom Cloud Anbieter
  • Verbindung zur Cloud muss zuverlässig sein
  • Bandbreite bei vielen Anwendern an einem Standort
  • Kundenspezifische Anpassungen nur sehr bedingt möglich
  • Sicherheit
  • Datenschutz
  • Gesetzliche Auflagen

Servicemodelle

Abkürzung Beispiel
BaaS PayPal
SaaS Office 365, G Suite
PaaS Azure, Elastic Beanstalk
IaaS Amazon S3/EC2, MS Azure

Cloud Liefermodelle

Public Cloud
Office 365, Dropbox
Private Cloud
Nextcloud, Plex
Community Cloud
Github
Hybrid Cloud
Nextcloud mit Dropbox Anbindung

Cloudangebote

Single-Cloud
Nutzung eines einzelnen Services
Hybrid-Cloud
Mix aus Private und Public Cloud
Multi-Cloud
Nutzung mehrer Public Clouds. Minimiert das Risiko beim Aufall eines Anbieters.

Semantische Netze

Syntax

Die Syntax gibt die Regeln vor wie ein Programm geschrieben werden muss. In etwa die Grammatik der Programmiersprache.

Semantik

Bei der Semantik geht es um den Inhalt, also die Bedeutung des Codes. Code der eine falsche Syntax hat, hat nie eine Semantik.

Domäne

Die Domäne gibt den Bereich an in dem etwas läuft. Etwa den Wissensbereich. Dies kann etwa ein Fachbereich sein wenn man in einem Gebiet arbeitet das man nicht kennt fehlt einem das Domänen Know-How.

Taxonomie und Ontologie

Taxonomie bedeutet etwas in Klassen einzuordnen und Ontologie bedeutet die Beziehungen zwischen den Klassen abzubilden.

Agent

Ein Beispiel für einen Agent ist etwa der Web-Crawler von Google. Ein Agent ist in der Regel autonom (arbeitet selbständig), kognitiv (kann sich selber verbessern), adaptiv (passt sich seiner Umgebung an).

Beispiel Bild

Übung

  1. Inwieweit ist die Idee des Semantischen Webs bereits heute Realität?

    Sehr minimal vorhanden. Meist handelt es sich um geschlossene Systeme die nicht gerne nach aussen komunizieren.

  2. Kann die Idee des Semantischen Webs mit den heutigen Technologien Realität werden?

    Ja sollte mit entsprechenden Standards möglich sein.

  3. Sehen Sie Nachteile oder Gefahren in einem Semantischen Web?

    Ja die Verbreitung von falsch Informationen können ein grosses Problem sein wenn sie nicht entsprechend verifiziert werden können.

Standards. Semantisches Web

  1. Web Stack

    Es gibt zwei Kategorieren von Technologien. Die einen wurden standardisiert und sind akzeptiert. Die anderen sind grössenteils noch unklar.

  2. RDF

    • RDF kann dazu verwendet werden Beziehungen abzubilden und Metadaten über ein Objekt zu speichern oder zu versenden.
    • Es werden Metadaten über Ressourcen beschrieben
    • Basiert auf XML
    • Soll von Computern gelesen werden
    • Macht logische Aussaugen über Ressourcen und setzt sie in Beziehung zueinander.
    • Wie bei XML gibt es ein Schema (RDFS) zum definieren des RDF. Beschreibt Ressourcen mit Klassen, Properties und Werten. Gibt die mögliche Hierarchie an.
    • Jede Aussage besteht aus einen 3-Tupel (Subjekt="Apple", Prädikat="entwickelt", Objekt="Computer")

SEO

On- und Offpage

Onpage Sind alle technische Verbesserungen der Website. Valider Code, H1-H3 Titel, SSL, Sitemap

Offpage Offpage sind Optimierungen welche nicht auf der eigenen Seite passieren. Etwa Backlinks auf die Seite. Social Signal (Facebook, Google+)

Glossary

<>
Two Factor Authentication
<>
Asynchronous JavaScript And XMLHttpRequest
<>
Application Programming Interface
<>
Business to Business
<>
Business to Consumer
<>
Business as a Service
<>
Browser Object Modell
<>
Consumer to Consumer
<>
Communication as a Service
<>
Content Management System
<>
Cross Origing Resource Sharing
<>
Cross Site Request Forgery
<>
Document Object Modell
<>
Document Type Definition
<>
Hyper Text Markup Language
<>
Hyper Text Transfer Protocol
<>
Infrastructur as a Service
<>
Internationalized Resource Identifier
<>
JavaScript Object Notation
<>
JSON with Padding
<>
Plattform as a Service
<>
PHP Hypertext Preprocessor
<>
Resource Description Framework
<>
Representational State Transfer
<>
Rich Internet Application
<>
Remote Procedure Call
<>
Software as a Service
<>
Search Engine Advertising
<>
Search Engine Marketing
<>
Search Engine Optimisation
<>
Service Oriented Architecture
<>
Same Origin Policy
<>
Simple Object Access Protocol
<>
Secure Socket Layer
<>
Single Sign On
<>
Stateless bedeutet das ein Aufruf einer Website sich immer so verhält als wäre es der erste Aufruf. Dies ist etwa auf einer simplen HTML Page ohne Cookies der Fall.
<>
Transport Layer Security
<>
Uniform Resource Identifier
<>
Uniform Resource Locator
<>
Uniform Resource Name
<>
Web Service Description Language
<>
Everything as a Service
<>
XML Remote Procedure Call
<>
eXtensible Markup Language
<>
XML Path Language
<>
XML Schema Definition
<>
Extensible Stylesheet Language
<>
Cross Site Scripting
No Comments
Back to top