Web-Programmierung

Question	Answer
Erfinder des WWW	Tim Berners-Lee
WWW	WWW = Hypertext + Internet
Basistechnologien des Internets	HTML URL HTTP CSS JavaScript
Aufbau einer URL	protokoll://host:port/datei?parameter#anker z.B.: http://de.wikipedia.org/wiki/URL#Aufbau http://localhost/quassel/do.jsp?action=search&asc=1
HTTP	Zustandsloses Protokoll zur Übertragung von Dokumenten
HTTP - zustandlos	Keine Erkennung von wiederkehrenden Clients möglich strikte Anfrage/Antwort-Zyklen
HTTP - Anfrage an den Server	Beginn der Kommunikation zwischen Client und Server Fordert den Server auf eine definierte Aktion durchzuführen Aufforderung in Form von Verben
HTTP - Antwort des Servers	Beendet die Kommunikation zwischen Client und Server Beinhaltet immer einen Status-Code
HTTP - Verben	GET/dateiname: Abruf einer Datei vom Server - Antwort Dateiinhalt ohne Response Header GET/dateiname HTTP/1.1: Abruf einer Datei - vollständige Antwort HEAD: fast identisch zu GET, Server antwortet mit Kopfdaten ohne Dateiinhalt POST: Senden von Dateien an den Server DELETE: Löschen einer Datei OPTIONS: Abruf der erlaubten Optionen TRACE: Auffordern, die empfangene Anforderung zurückzusenden
HTTP - Statuscodes	1xx: Information 2xx: Erfolgreicher Abschluss 3xx: Umleitung 4xx: Client Fehler 5xx: Server Fehler
HTTP - Aufbau der Anfrage	Image: HTTP-Anfrage (image/jpg)
HTTP - Aufbau der Antwort	Image: HTTP-Antwort (image/jpg)
HTML - Boxenmodell	Inline: Ausrichtung der Boxen wie Buchstaben in einer Zeile Block: Erzwingt einen Zeilenumbruch vor und nach der Box Inline-Block: Wie Block aber Breite wächst mit Inhalt Table-Cell: Formatierung wie die Zelle einer Tabelle
HTML - Ablauf	1) Anwender gibt im Browser eine Adresse ein 2) Browser besorgt das angefragte Dokument und alle eingebundenen Ressourcen 3) Browser parst das empfangene Dokument und erstellt einen DOM-Baum 4) Basierend auf dem DOM wird die Anzeige berechnet
CSS - Ablauf	1) HTML definiert den Inhalt und die Struktur einer Seite 2) Auswahl von Teilen der Dokumentenstruktur durch spezielle CSS Selektoren 3) Darstellung der ausgewählten Elemente notieren (Vererbung inklusive) 4) Anzeige der angepassten Seite im Browser
Einbinden einer CSS in HTML	1) Noch vor dem html-Tag (nur für XHTML erlaubt) 2) im Head: link-Tag <link type="text/css" href="beispiel.css"/> 3) In den Kopfbereich einbinden und CSS hier schreiben 4) Direkte Verwendung im Body
JavaScript	objekt-orientierte Skriptsprache nutzt Brwoser als Laufzeitumgebung ermöglicht dynamisch erzeugte Inhalte anzuzeigen Zugriff auf das DOM zur Manipulation
JavaScript - DuckTyping	Keine Typangabe bei der Definition von Variablen Typ ergibt sich aus dem Inhalt und kann sich jederzeit ändern Prüfungen bei Variablenzugriffen erst zur Laufzeit
JavaScript - Prototypbasierte Objektorientierung	- keine Klassen, die die Struktur von Objekten beschreiben - Struktur eines Objektes kann sich jederzeit ändern, z.B. durch Hinzufügen neuer Methoden - Objekte werden durch Kopien von einem Prototypobjekt erzeugt --> var wert = new Irgendwas(); //Kopie von Irgendwas.prototyp
JavaScript in HTML einbinden	1) Verweis auf externe Datei im head-Bereich 2) Code als Teil des Scriptelements im head-Bereich: <script type="text/javascript" src="script.js"></script> 3) Scriptelement im Body 4) Hinweis für Browser ohne JavaScript (<noscript>)
JavaScript und DOM	1) Browser lädt eine Webseite mit eingebundenem JavaScript 2) DOM wird erstellt und die Seite angezeigt 3) JavaScript-Code nimmt eine Änderung am DOM-Baum vor 4) Änderungen werden sofort umgesetzt und die Seite entsprechend vom Browser angezeigt
AJAX	Asynchronous JavaScript and XML AJAX nutzt JavaScript und DOM, um vom Server nur den zu aktualisierenden Teil einer bereits angezeigten Seite anzufordern
Anwendungen ohne AJAX	1) Anwender fordert die Startseite einer Webanwendung vom Server an 2) Der Webserver führt ein Skript (z.B. CGI) aus um die Seite zu generieren 3) Durch Anklicken eines Links fordert der Anwender eine weitere Aktion vom Server an 4) Serverseitig wie eine neue Seite generiert und an den Browser geschickt
Anwendungen mit AJAX	1) Der Anwender fordert die Startseite einer Webanwendung vom Server an 2) Der Webserver führt ein Skript (z.B. CGI) aus, um die Seite zu generieren 3) Durch Anklicken eines Links fordert der Anwender eine weitere Aktion vom Server an 4) Der JavaScript-Code der Seite reagiert auf den Link und schickt eine Anfrage an den Server. Das Ergebnis wird mit Hilfe des DOM-Baums in die Seite eingebaut
AJAX - Beispiel	Image: AJAX (image/jpg)
JavaScript - Vor-und Nachteile	+ kompakter Sprachumfang mit javaähnlicher Syntax + offizieller ECMA-Standard, von allen Webbrowsern unterstütz - sehr begrenzter Sprachumfang - Kompatabilitätsproblem zwischen verschiedenen Browsern
Serverseitiger Code - Ablauf	1) Webserver empfängt eine HTTP-Anfrage 2) Server führt ein Script aus, um eine Antwort zu generieren 3) Skript hat Zugriff auf alle Daten der HTTP-Anfrage 4) Skript erzeugt eine HTTP-Antwort und übergibt sie an den Server 5) Server fügt der generierten Antwort noch Header Fields hinzu und schickt die Antwort an den Client
Aktive Serverseiten - Ablauf	1) Webserver empfängt eine HTTP-Anfrage 2) Anfrage bezieht sich auf HTML, daher sucht der Server im Dateisystem 3) Dokument enthält sowohl HTML als auch Programmcode, muss also einem Interpreter übergeben werden 4) Interpreter führt den Programmcode aus und gibt das Ergebnis an den Server 5) Webserver erzeugt aus dem Ergebnis eine vollständige HTTP-Antwort und sendet diese an den Client
Webanwendungen	- Entwicklung als in sich geschlossene Komponenten - laufen in einer speziellen Laufzeitumgebung (Java EE) - laufen in einem sog. Webcontainer
Applikationsserver	Serverseitigt Laufzeitumgebung für Client/Server-Anwendungen
Webcontainer	- Teil des Applikationsservers, der für Webanwendungen zuständig ist - stellt einen in Java programmierten Webserver dar - Laufzeitumgebung für Servlets und JSP - technische Grundlage für weiterreichende Webframeworks
Javabasierte Webanwendungen - Ablauf	1) Webcontainer empfängt eine HTTP-Anfrage 2) Zu jeder anfragbaren URL existiert eine Klasse (Servlet), welche die Anfrage bearbeitet 3) Container muss zur Bearbeitung eine spezielle Methode des Servletobjekts aufrufen 4) Innerhalb der Methode müssen die zurückzuschickenden Daten erzeugt werden 5) Server wandelt die generierte Antwort in eine HTTP-Antwort um und schickt diese an den Client
Servlets	- Softwarekomponente einer Webanwendung - selbstprogrammierte Klassen, die auf HTTP-Anfragen reagieren - werden dazu vom Webcontainer aufgerufen - HTTP-Anfragen werden an Servlets delegiert - Kommunikation mit dem Client über Webcontainer
Servlets - Vorteile	- relativ einfach zu programmieren - nicht an HTML als Ausgabeformat gebunden (flexibel) - einmal geladene Servelts bleiben im Speicher - Ausführung erfolgt in Threads statt in Prozessen - hohe Geschwindigkeit - dank Java plattformunabhängig - einfacher Zugang zu Java APIs
Servlets - Nachteile	- keine direkte HTML-Programmierung möglich - Java-Kenntnisse erforderlich, ungeeignet für Webdesign - viel mehr Tippaufwand als bei anderen Web-Frameworks
Komponenten des Webcontainers	Image: Komponenten_des_Webcontainers (image/jpg)
Deployment	Hochladen einer Webanwendung in den Container Anwendung wird als Webarchiv gepackt und in ein vorgegebenes Verzeichnis kopiert
Servletobjekt	- reagiert auf HTTP-Anfragen - generieren eine Antwort
Requestobjekt	- Kapselt die empfangenen HTTP-Anfragen - wird bei einem Servlet als Methodenparameter übergeben
Responseobjekt	- Kapselt die zu sendendne HTTP-Antworten - wird den Servlets übergeben - Methode zum Erzeugen eines PrintWriter für die Antwort
Servlet Lebenszyklus	Image: Servlet_Lebenszyklus (image/jpg)
class HttpServlet	- dient als Basisklasse für eigene HTTP-Servlets - definiert eine Handlermethode je HTTP-Verb, von denen mindestens eine überschrieben werden muss - spezielle Objekte für Anfragen/Antworten: HttpServletRequest HttpServletResponse
Methoden von HttpServlet	- public void doGet(...): Reaktion auf GET-Anfrage - public void doPost(...): Reaktion auf POST-Anfrage ...
Beispiel eines Servlets	Image: Servlet_Beispiel (image/jpg)
Deployment - Webarchiv	classes: Kompilierte Servlets lib: Importierte Bibliotheken, wie z.B. Frameworks sources: nicht-kompilierte Servlets Image: Webarchiv_Struktur (image/jpg)
Die 3 Kontexte	- jedes Servlet hat Zugriff auf die drei Kontextobjekte, um darin Objekte zwischen mehreren Aufrufen zwischenzuspeichern - Verwaltung eines serverseitigen Zustands je Besucher - Wiedererkennung eines Besuchers notwendig, um Logins /Warenkörbe etc. abzubilden
Servlet Context	- übergreifender Kontext für gesamte Anwendung - genau ein Servlet Context je Webanwendung
Session Context	- repräsentiert eine Sitzung mit dem Benutzer - überwindet die Zustandslosigkeit von HTML - fasst mehrere Seitenaufrufe logisch zusammen
Request Context	- stellt genau eine bearbeitete HTTP-Anfrage dar - Weitergabe von Parametern vor einer Weiterleitung
Einsatz des Request Context	1) Anwender setzt eine neue Anfrage ab, die durch ein Request Objekt dargestellt wird 2) Request Context wird dem aufgerufenen Servlet übergeben 3) Das Servlet bindet ein Objekt an den Context und wird für Bearbeitung an ein anderes Servlet weitergeleitet 4) Dem neuen Servlet wird derselbe Request Context übergeben, so dass es das Objekt aus dem Kontext auslesen kann
Weiterleitung (mit Request Dispatcher)	Image: Weiterleitung_Request_Dispatcher (image/jpg)
Java Server Pages (JSP)	- Java-Variante von aktiven Serverseiten - bestehen aus statischen Textdateien (z.B. HTML) - integrieren Java-Code - JSP werden nicht interpretiert - JSP werden stattdessen zu Servlets kompiliert - schnellere Ausführung möglich - erweiterte Funktionen wie Tag Libraries
JSP vs. Servlet	JSP: für die Darstellung der Oberfläche/ HTML Servlet: viel Logik, wenig HTML, Controllr für MVC, wenn kein HTML sondern Binärdaten zurückgegeben werden müssen
Vorteile JSP vs. Servlet	- Programmierung ohne Java Code möglich - es kann direkt in HTML programmiert werden - Tag Libraries helfen Java Code zu reduzieren
Java Code in JSPs verwenden	Image: Java_Code_in_JSP (image/jpg)
Templateseiten	- durch Templateseite index.jsp wird das allgemeine Layout und Stylesheet definiert - die variablen Inhalte werden durch die eingebundene JSP-Seiten erzeugt
Architekturtyp: Model 1	- schlechte Architektur - lauter JSP-Dateien in denen sich HTML und Java mischen - eigentlich sollten JSPs überhaupt keinen Javacode beinhalten
Architekturtyp: Model 2	- bessere Architektur - die eigentliche Anwendungslogik wurde in Java Beans ausgelagert - JSP beinhalten nur noch HTML - innerhalb der JSPs werden bei Bedarf Methoden aus den Beans aufgerufen
Java Beans	- sind normale Objekte - besitzen keinen Konstrukor, bzw einen parameterlosen Konstruktor - besitzen für jedes Attribut Setter- und Getter-Methoden
Architekturtyp: MVC	- Model-View-Controller-Architektur - ähnlich zu Model 2, aber JSP noch weiter reduziert Model: Anwendungslogik in den Beanklassen View: JSP dienen nur noch der Anzeige Controller: Web-spezifische Logik, Navigation steckt in den Servlets
MVC-Architektur (Bild)	Image: MVC_Architektur (image/jpg)
Verwendung von Java Beans	Image: JavaBeans_Anwendung (image/jpg)
Vermeidung von Java-Code in JSP	- JSP-Tags zur Verwendung von Beans - JSP Expression Language - JSP Tag Libraries
Expression Language	Image: Expression_Language (image/jpg)
JSP und MVC - Ablauf - Servlets (C)	1) Alle HTTP Anfragen werden vom Front Servlet empfangen und verarbeitet. Es untersucht die aufgerufene URL und entscheidet, wohin die Anfrage weitergeleitet wird 2) Der Anwender hat einen Blogeintrag angeklickt, die Anfrage wird daher an das Servlet zum Anzeige eines EIntrags geleitet
JSP und MVC - Ablauf - Beans (M)	3) Das gerufene Servlet ruft eine Java Bean auf, um den aufgeforderten Blogeintrag aus der Datenbank auszulesen
JSP und MVC - Ablauf - JSP (V)	4) Eine JSP-Datei dient als HTML-Template. Die eingelesene Daten werden daher an die JSP übergeben, um das HTML zu erzeugen. Das Ergebnis wird an den Browser geschickt
JSP und MVC - Ablauf	5) Der Anwender hat einen Kommentar geschrieben. Die Formulareingaben werden daher per AJAX an den Server geschickt 6) Das Front Servlet leitet die Anfrage an das Servlet für Kommentare weiter 7) Das Servlet ruft eine Java Bean auf, um den Kommentar in die Datenbank zu speichern
JSP und MVC - Ablauf	8) Dem Anwender wir keine neue Seite angezeigt, daher wird auch keine JSP aufgerufen. Stattdessen schickt das Servlet den neuen Datensatz im JSON-Format an den Browser 9) Der JavaScript-Code auf der Webseite empfängt die Antwort und aktualisiert die Anzeige Anmerkung: Ohne AJAX würde das Servlet einen Redirect an den Browser schicken, ihn also auffordern eine neue URL aufzurufen
Vorteile MVC	- leichtere Wartbarkeit - leichtere Wiederverwendbarkeit - Verantwortlichkeiten getrennt

Next up

Description

Resource summary

Similar

	Created by daniel-eberwein over 9 years ago