Präsentation Designteam. Inhaltsübersicht Projektvorgaben Aufgabenstellung Ziele Projektstruktur Design Benutzerverwaltung Serverinfos Online-Anzeige.

Präsentation zum Thema: "Präsentation Designteam. Inhaltsübersicht Projektvorgaben Aufgabenstellung Ziele Projektstruktur Design Benutzerverwaltung Serverinfos Online-Anzeige."—  Präsentation transkript:

1 Präsentation Designteam

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

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

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

5 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

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

7 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...

8 addon admin chat dev_doc gallery game html music news skin user Verzeichnisstruktur projektorientierte Struktur http://www.jnews.de 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

9 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

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

11 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 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3 4 5 Java News and Music – [sending comment] 6 7...

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

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

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

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

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

17 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...

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

19 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

20 Verzeichnisstruktur jnews skin login- Thumbnails layout 1...8 picture- Dateinamen, Grafiktypen style- css-style

21 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)

22 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

23 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; }

24 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ß.

25 - 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

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

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

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

29 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

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

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

32 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

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

34 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

35 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

36 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 [] = 127.0.0.1_jens_21-29, 127.0.0.1_Peter_14-55, 127.0.0.1_test_16-21 => Dateinamen werden in ArrayofString geschrieben

37 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 192.168.0.1_Peter_12-35 Nickname Minuten Stunden String username = Peter String userhour = 12 String usermin = 35

38 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

39 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

40 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

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

42 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

43 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)

44 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 19.06.03 um 05:27 Uhr folgenden Kommentar: ------------------------------------------------------------------ Hallo dieses ist ein Test ------------------------------------------------------------------ // find System LineBreaker String newLine = System.getProperty("line.separator");