Präsentation Designteam

Inhaltsübersicht Projektvorgaben Aufgabenstellung Ziele Projektstruktur Design Benutzerverwaltung Serverinfos Online-Anzeige Kommentar

Projektvorgaben Projektseite mit Auflösung für 1024 x 768 px Einbindung verschiedener Komponenten: News Chat Game Gallery Music Einfache Bedienbarkeit

Aufgabenstellung Layoutentwicklung Datei- und Datenverwaltung Benutzerverwaltung Serverinfos Zuhöreranzeige Kommentar

Ziele Individuelle Skinauswahl Aktualisierung der Frames Layout unabhängig von Auflösung Größe, Datei- und Ordnerstruktur erstellen Vorgestellter Login-, Registrierungs- und Skinauswahl-Bereich Login nur mit Nickname und Passwort Funktionsweise der Registrierung Aufgabe der Serverinfos Realisierung der Online-Anzeige von Benutzern Funktionsweise des Kommentars

Verzeichnisstruktur unabhängiges arbeiten der Teams voneinander Anforderungen: flexible Struktur (nachträgliche Erweiterbarkeit) Sicherheit im Netz möglichst leichte Verwaltung

addon admin chat dev_doc gallery game html music news skin user Verzeichnisstruktur projektorientierte Struktur addon admin chat dev_doc gallery game html music news skin user jeder Teilbereich besizt einen eigenen Ordner optionale Unterordner können durch die Gruppen festlegen werden skin layout1 layout2...

addon admin chat dev_doc gallery game html music news skin user Verzeichnisstruktur projektorientierte Struktur Daten liegen außerhalb vom html, => über Web nicht erreichbar CaseSensitive Namen addon admin chat dev_doc gallery game html music news skin user addon admin chat dev_doc gallery game html music news skin user Websicherheit

Verzeichnisstruktur projektorientierte Struktur Websicherheit addon admin chat dev_doc gallery game html music news skin user admin zentraler Datenordner - Kommentare - Neuanmeldungen - User.dat mit Namen... Administrator freundlich

Seitensprache(n), Code Anforderungen: zukunftssicher (W3C Konform) flexibel (unbek. Struktur der anderen Teams) auf möglichst vielen Systemen einsetzbar

HTML-Code => XHTML 1.0 zukunftsicherer da näher an XML und W3C konform kompatibel mit aktuellen Browsern syntaktisch saubere Struktur 1 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 " Java News and Music – [sending comment]

XHTML => Dynamisch Problemstellung: Grenzen von XHTML und CSS erreicht Benutzerverwaltung... Realisierung von Skins so nicht möglich

Java Server Pages Integration des bisherigen Konzepte Anforderungen: Kompatibel zu den anderen Teilprojekten Clientseitige Verarbeitung

Java Server Pages Funktionsweise Request HTML Server Client JSP Compiler JSP HTML HTML...

Java Server Pages Session Skinauswahl Benutzerverwaltung Kommentar versenden Eingesetzt für:

Sessions Anforderungen: Übergabe von Variablen an alle Seiten des Framsets Clientseitige Unterscheidung hohe Sicherheit

Session index.jsp erzeugt in der Datei index.jsp // transmit to all other sides HttpSession sess = request.getSession(true); sess.putValue("Layout", LNr); sess.putValue("UserName", request.getParameter("user")); sess.putValue("appDir",appDir); gesetzt werden Variablen für - Layout (ausgewähltes Layout) - Username - appDir, relativer Pfad für Layout, Speichern...

Session index.jsp abgerufen werden können die Daten mit // use in Code (String) = in String umwandeln

Session Probleme : der KeepAlive-Effekt funktioniert nicht zuverlässig Session geht nach längerer Pause, Reload schon mal verloren... Cookies müssen aktiviert sein (Temp. Cookies) Überlegung von Alternative: Übergabe per POST - Nur direkt an ein Ziel möglich Übergabe per GET - Unkontrollierbare URL - Sicherheitsrisiko

Verzeichnisstruktur jnews skin login- Thumbnails layout picture- Dateinamen, Grafiktypen style- css-style

Dateinamen picture Beispiel: comm_back.jpg comm_head.gif -alle Dateinamen klein geschrieben. (Berücksichtigung von Linux, Mac) -Bereichszugehörigkeit der Dateinamen (die ersten 4 Buchstaben) zieht sich durchs ganze Projekt -Problem: Abweichung durch nachträgliche Änderungen (animierte Button)

Grafiktypen -x.jpg gute Qualität 16,7 Mio Farben (Foto). Eingesetzt für Hintergründe -x.gif max. 256 Farben. Eingesetzt für Logos, Button, Überschriften. Vorteil: transparenz. Grafiken können über Hintergründe gelegt werden. -x.png gute Qualität, transparenz Nachteil: Grafikformat zu groß ( lange Ladezeiten) Picture Gif - Grafiken

css-style style -Auf das Layout abgestimmt -ext. in Datei ausgelagert, damit alles zum Layout x in einem Ordner ist. -modularisiert -Layout ist änderbar ohne den HTML-Code zu ändern. /* Head Elements */ h1 { margin:0px; padding-left:38px; font-size:150%; color:#336699; margin-left:-25px; margin-right:10px; margin-top:4px; margin-bottom:3px; line-height:40px; }

Frameset Da vorher nicht klar war womit die Gruppen arbeiten (applet,Serlets,...) Teilbereiche können aktualisiert werden ohne das die ganze Seite geladen werden muß.

- PlugIn-Größe kleiner da Reserven für z.B. große Schriftarten vorgesehen sind. - Überschriften sind als erstes Element in der Seite platziert. Frameset

Benutzerverwaltung· Elemente index.jsp user.dat Benutzer Registrierung Benutzer Login

Benutzerverwaltung· Registrierung 1 / 2 Einlesen von Nickname und Nickname und eingetragen? Öffnen von user.dat Vergleich eingetragener Nicknames Nickname noch frei? Registrierungsdatei erzeugen (register_time_nick) Ausgabe an Benutzer

Benutzerverwaltung· Registrierung 2 / 2 Einlesen von Nickname und Vergleich eingetragener Nicknames Registrierungsdatei erzeugen (register_time_nick)

Benutzerverwaltung· Login 1 / 2 Einlesen von Nickname und Passwort Nickname und Passwort eingetragen? String userpass erzeugen: nick, pass Öffnen von user.dat Vergleich userpass mit Zeilen aus user.dat Korrekten Eintrag gefunden? Datei für Benutzer erzeugen (IP_Nick_Time) Weiterleitung an jnm_start.jsp

Benutzerverwaltung· Login 2 / 2 Vergleich userpass mit Zeilen aus user.dat

Benutzerverwaltung· Administration 1 / 2 Registrierungsanfrage Registrierungsdatei in Ordner admin Dateinamen beginnen mit register Dateiformat: txt Beispiel für eine neue Registrierung: Dateiname Dateiinhalt

Benutzerverwaltung· Administration 2 / 2 Ein- und Austragen von Benutzern user.dat in Ordner admin Kann mit Editor geöffnet werden Benutzereinträge zeilenweise Beispiel für user.dat: Dateiinhalt Nickname Passwort

Die Online Anzeige Aufgaben: Ausgabe einer variablen Liste der Online-User Darstellung der Anzahl der Online-User Angabe seit wann jeder User online ist

Darstellung der Online-Liste Zwei Zeilen pro User Als Iframe realisiert, Fenstergrösse passt sich automatisch an Die Ausgabe wurde in den Info-Bereich gelegt Farbe, Schriftart, Zeilenabstände usw. über.CSS Datei Konfigurierbar Überschrift und Hintergrund über SKIN-Grafiken änderbar

Organisation der Online- User- Dateien Für jeden Online-User wird eine Datei erzeugt Dateien werden im Unterverzeichnis /user abgelegt Nach dem Ausloggen eines users wird seine Datei gelöscht

Auslesen des User- Verzeichnisses Dateinamen im Verzeichnis /user müssen eingelesen werden Die Klasse FILE bietet die Methoden: isDirectory() list() length() zur Dateibearbeitung String Dateiliste [] = _jens_21-29, _Peter_14-55, _test_16-21 => Dateinamen werden in ArrayofString geschrieben

Rückgewinnung des Nicknames + Einlogzeit Die benötigten Infos sind im Dateinamen vorhanden Die Klasse String bietet die Methoden indexOf() und index() zur Stringbearbeitung Die einzelnen Dateinamen werden in drei Strings aufgeteilt _Peter_12-35 Nickname Minuten Stunden String username = Peter String userhour = 12 String usermin = 35

Ausgabe des Nicknames + Einlogzeit Ausgabe der neu zusammengesetzten Strings String username = Peter String userhour = 12 String usermin = 35 ist seit Ausgabe: => 1. Peter ist seit 12:35Uhr online

Probleme Keine automatisch Aktualisierung Die Lösung wäre, den Frame über einen Thread automatisch nach einer bestimmten Zeit zu aktualisieren In aktueller Version noch nicht realisiert

Mögliche Erweiterungen Zuweisung eines individuellen ICONS und einer bestimmten Farbe für jeden user User wäre in Online-Anzeige und CHAT schneller zu finden Online-Liste könnte nach Einlog-Zeit sortiert werden

Kommentar Inhalt ist für den Administrator, nicht öffentlich Anforderungen: Abgelegt als Datei auf dem Server Benutzername, Uhrzeit vermerken

Kommentar aktiver User wird automatisch ins from Feld eingetragen dieses Feld ist nicht änderbar nach dem senden wird im Verzeichnis admin eine Datei mit dem Kommentar erzeugt. Datei und Verzeichnis ist nicht im aktuellen URL-Pfad => keine weiteren Sicherheitsmaßnahmen nötig

Kommentar Dateiname: com_ _ _.txt // create a unique filename "YearMonthDay_HourMinSec_Nickname.txt" SimpleDateFormat fmt1; fmt1 = new SimpleDateFormat(); fmt1.applyPattern("yyMMdd'_'hhmmss"); Calendar cal; cal = new GregorianCalendar(); comFileName = "com_"+ fmt1.format(cal.getTime()) +"_"+ userName+".txt"; File comFile = new File(appDir + "admin/" + comFileName); Datums-Format: Jahr Monat Tag neue Kommentar-Dateien werden automatisch als lezter gelistet Datumsanzeige über Greg. Kalender und Pattern => Länderübergreifen unabhänig (außerhalb der MEZ)

Kommentar Dateiformat: Inhalt mit Username Datum und Uhrzeit Problem unterschiedliche Zeilenumbrüche auf verschiedenen Betriebssystemen => über SystemProperty ermittelter Zeilenumbruch Betriebssystem unabhänig test schrieb am Donnerstag den um 05:27 Uhr folgenden Kommentar: Hallo dieses ist ein Test // find System LineBreaker String newLine = System.getProperty("line.separator");