VO/PS Programmieren von Webinformationssystemen
Art: Vorlesung mit Proseminar (2+3 ECTS, 1VO+2PS)
LVA-Leiter: Wolfgang Gassler
Ort und Zeit: VO Mo 09:15 - 10:00 HSB 8
PS Mo 10:00 - 11:45 HSB 8
Start der LVA Freitag 09.03.2012
LFU-Online Informationen im Lehrzielkatalog
Folien
Thema
Unterlagen
Einführung, Organisatorisches
Folien (pdf)
HTTP, HTML, CSS, PHP
Tafelbild HTTP (pdf), Folien PHP (pdf)
JavaScript,REST
Folien (pdf),Code Snippets (txt)
Optimierungen, Indexstrukturen
Folien + Tafelbilder (pdf)
Datei-Upload, Apache Rewrite Rules, JS Formularüberprüfung Folien (pdf), Live Demo (html)
Zend Framework
Anmerkungen Live Demo
jQuery, MongoDBFolien (pdf), jQuery Live Demo (zip)
Node.js
Folien (pdf), Server.js, Async.js, Queue.js, Chat.js
Usability und Barrierefreiheit
Folien (pdf), Folien2 (pdf)
Tasks
Nr.
Task Unterlagen
Deadline
 1
  • Apache Web Server einrichten
  • iptables anpassen
  • einfache Webseite über Gruppe erstellen (2-3 einfache HTML Seiten)
iptables HowTo18.03.2012 17:00
 2MiniWiki - Angabe siehe Folien PHP
 25.03.2012 17:00
 3

MiniWiki:

  • Installation MySQL und phpMyAdmin am Server
  • Codeverbesserung (Klassen, Abstraktion der Schicht zum Artikel-Handling)
  • Behandlung aller Fehler und Ausgabe sinnvoller Fehlermeldungen für den Endbenutzer
  • Anbindung und Speicherung der Artikel in eine MySQL Datenbank
 15.04.2012 17:00
 4 Kapitel I - IV Litte BoxesLitte Boxes Online
23.04.2012 09:00
 5
  • Features
    • Linkliste: Liste auf jeder Seite mit Informationen, von welchen Seiten aus auf die aktuelle Seite verlinkt wird
    • Paginator: max. Anzahl pro Artikel in der Übersichtsliste mit Navigation zu 1...n anderen Übersichtseiten
    • Suchfunktion nach Artikeltiteln mit anschließender Auflistung der passenden Artikel
  • Optimierung
    • Automatische Generierung von 10.000 Artikel
    • Automatische Generierung von zufälligen Links zwischen Artikeln (ca. 5 pro Artikel)
    • Zeitmessung von DB-Zugriff von Artikelaufruf und Linkauflösung für Linkliste
    • Optimierung durch Indizes (z.B. Titel) und Zeit-Vergleich Vorher/Nachher
    • Optimierung durch 2-Spalten Tabelle für Links (von-nach) und Zeit-Vergleich Vorher/Nachher
 29.04.2012 17:00
6
  • Bild Upload
    • Sicherer Upload mit PHP
    • Auswahl ob Bild link oder rechts im Textfluß des Artikels angezeigt wird
    • Abspeichern der Bilder mit der ID des Artikels (Namen desOriginalbildes in DB abspeichern)
    • Bilder überschreiben, wenn bereits vorhanden
  • RESTful Design
    • Realisierung über Apache Rewrite Rules
    • .../article/mein_titel zur Ansicht
    • .../article/mein_titel/edit bzw. delete um zu löschen
  • Client-seitige Formularüberprüfung mi JavaScript
    • Fehlermeldungen jeweils neben betroffenem Feld
    • Feld bei Fehlerfarblich markieren
    • Feld ständig bei Änderung überprüfen und gegebenfalls Fehlermeldung und Farbe wieder entfernen
    • Formular erst absenden, wenn alle Fehler behoben wurden
  • Userverwaltung
    • DB-Tabelle für Benutzerverwaltung mit Passwort als Hash
    • Login/Logout
    • Realisierung mit PHP-Session
JavaScript MDN
06.05.2012 17:00
7
  • Schere-Stein-Papier mit ZendFramework
    • Formular: Spieler (Name, Email), Gegner (Name, Email), Wahl von Schere Stein oder Papier
    • Speicherung von Spielen in MySQL (inkl. Ergebnis)
    • Gegner kann mit bekannter URL Spiel durch Wahl beenden und Ergebnis wird angezeigt
    • Defensive Programmierung wie bisher beachten: Formularüberprüfungen, Fehlermeldungen, Sicherheit (z.B. SQL Injections)
ZendFramework
13.05.2012 17:00
8
  • Verbesserungen und Optimierungen Schere-Stein-Papier
    • Email Versand
      • Email mit Informationen und Link an Gegner (URL "gesichert" über zufällig generierte ID/Hash-Wert)
      • Email mit Link zur Ansicht der Spielentscheidung an Herausforderer
    • Servereinstellungen
      • httpd alias: http://138.232.66.x/game soll direkt und transparent auf den richtigen /public Ordner verweisen
    • Highscore-Liste auf Startseite (Anzahl Spiele, Gewonnen, Verloren)
    • Usability
      • JS basierte Überprüfungen der Felder
      • Auswahl von Schere-Stein-Papier über Bilder
      • Übersichtliche Anzeige des Spielergebnisse durch z.B. Grafiken, CSS
      • Wiedererkennung des Benutzers durch Cookies und Vorausfüllung der Felder
      • Bei Erstellung des Revanche-Spiels Vorausfüllung der Felder
    • Sicherheit: URLs sollen nicht erraten werden können bzw. Spiele sollen nicht durch fremde Personen oder Spieler selbst manipuliert werden können
    • Testspiele durch 10 Personen durchführen und Feedback zur Bedienung sammeln und dokumentieren
 20.05.2012 17:00
9
  • Single Page Application (kein Reload der Seite) mit jQuery, HTML wird nicht mehr vom Server generiert
  • Gesamte Kommunikation mit dem Server über AJAX
  • Installation MongoDB
  • Adaptierung Speicherung der Spiele in MongoDB
  • Anzeige der Highscores mit automatischen Reload (alle 30 Sekunden) in der Single Page Application
  • Eingabe von Textnachrichten: beide Spieler können bei jedem Zug eine Textnachricht für den anderen Spieler setzen. Die zwei Nachrichten sollen jeweils zusammen mit dem Spiel gespeichert werden.
 03.06.2012 17:00
10
  • Chat Server unter Verwendung von Node.js und Socket.oIO
    • Web-basiert, Kommunikation zwischen JS Client (jQuery) und Server (Node.js) über Websockets (Socket.IO)
    • Benutzer werden direkt beim Besuch der Webseite mit dem Chatserver verbunden und mit einem automatisch generierten Benutzername beim Chatserver angemeldet
    • Danach haben sie die Möglichkeit Nachrichten einzugeben, die an alle angemeldeten Benutzer weitergeleitet werden
    • Folgende Kommandos sollen - neben dem Versand von Nachrichten - realisiert werden:
      • /help - zeigt alle möglichen Befehle mit Erklärung an
      • /name:myname - ändert den Namen des aktuellen Benutzers auf myname
      • /super:myname - der Benutzer myname erhält Superrechte
      • /kick:myname - Kickt den Benutzer myname aus dem Chatserver und schließt damit die Verbindung
      • /quit - Beendet die Verbindung zum Server
      • /users - Zeigt alle Benutzernamen an, die derzeit mit dem Chatserver verbunden sind
      • /topic:mytopic - ändert das Chattopic auf mytopic
      • /topic - zeigt das aktuelle Chattopic an
      • Für folgende Befehle sind Superrechte nötig: super, kick, topic:
node.js, Socket.IO
10.06.2012 17:00
Hilfreiche Links
Inhalt

Themen:

  • Entwicklung von Web-Projekten
  • Web-Server Architekturen
  • Skalierung in Web-Architekturen
  • HCI, Usability & Zugänglichkeit
  • Datenbanken in Web-Projekten

Technologien:

  • HTML
  • PHP
  • JavaScript
  • MySQL
  • Node.js
  • Key-Value Storage

Voraussetzungen:

  • VO Datenbanksysteme oder sehr gute SQL Kenntnisse
  • Sehr gute Kenntnisse Softwareentwicklung

Benotung
  • Proseminar
    • Lösungen der Tasks (50%)
    • Präsentationen der Lösungen (50%)
  • Vorlesung
    • Klausur 1 Termin 25.06.2012 11:00-12:00 HSB 8
    • Klausur 2.Termin 15.10.2012 10:00-11:00 3S01 (ICT-Gebäude)
    • Klausur 3.Termin 31.10.2012 14:00-15:00 3S01 (ICT-Gebäude)