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. Title Hello World 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 Client übernimmt Präsentationsschicht (JavaScript) Application Server (PHP) Datenserver (etwa eine Datenbank) Skalieren viel besser als Tow-Tier Architekturen. Three-Tier Architektur gilt auch für MVC Architektur. N-Tier Architektur Client Presentation Layer Server Application Server 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 Variabeln Starten immer mit $ Anschliessen A-z oder _ Case-Sevsitive Keine Syntax Vorgaben Konstanten Array "35", "Max"=>"28"); $age['Peter'] = "35"; ?> Typen int float string bool array object unset Superglobals $GLOBALS $_SERVER $_REQUEST ($_GET + $_POST + $_COOKIE) $_POST $_GET $_FILES $_ENV $_COOKIE $_SESSION Call by Value/Reference Value Reference 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
First name:

Last name:


//action_page.php select option textarea button radio
Male
Female
Other
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 if/else/elseif switch while "; $x++; } ?> do...while "; $x++; } while ($x <= 5); ?> for "; } ?> foreach "; } ?> continue '; } Klassen 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 Beispiel XML mit DTD Inline ElementSome Text Brot knetten backen Dies ist ein Kommentar 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 "PUBLIC" wird für standartisierte DTDs verwendet Beispiel DTD 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 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 Tove Jani Reminder Don't forget me this weekend! 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 Harry Potter 29.99 Learning XML 39.95 Abfrage Resultat /bookstore Alles in //book Alle 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 JavaScript

JavaScript

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: den Ereigsnistyp (mouseover, onClick) die auszuführende Funktion 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

elements with class="intro" $("p:first") Selects the first

element $("ul li:first") Selects the first

  • element of the first