Java News and Music. Projektdokumentation. Jens Knaup. Softwaredesign und Computernetze SS2003

Transkript

1 Projektdokumentation Jens Knaup Java News and Music Softwaredesign und Computernetze SS2003 Programmierung der Online-Anzeige sowie die Erstellung eines Layout und Planung der Gesamtrealisierung des Projektes: Java News and Music.

2 1 Das Java News and Music Projekt Bei dem Java News and Music Project handelt es sich um eine Internetplattform auf der in erster Linie Musik über ein online Stream von den Usern gehört werden kann. Da es aufgrund von GEMA Bestimmungen in Deutschland nicht erlaubt ist gebührenfrei Musik aus dem Internet zu hören muss der Zugang zu dieser Internetseite unbefugten usern unmöglich sein. Dies kann nur mit einem Einlog Mechanismus über Username und Passwort realisiert werden. Weiterhin ist auf der Seite noch Folgendes zu finden: Eine NEWS Anzeige die aktuelle Neuigkeiten aller Art bereitstellt Eine BILDERGALERIE in der man sich Bilder anschauen kann, aber auch eigene hinzufügen kann Ein integriertes CHAT Programm indem sich alle user unterhalten können Ein ONLINE SPIEL bei dem Spieler gegeneinander über den Server antreten können Und einen KOMMENTAR Bereich indem jeder seine Meinung sagen darf Die Aufgaben der Layout-Gruppe: Programmierung der Benutzerverwaltung Festlegung einer Datei- und Verzeichnisstruktur an die sich die anderen Gruppen halten mussten Aufteilung des Framesets Die gesamte optische Gestaltung und Darstellung der Internetseite Programmierung der Online-Anzeige Server-Infos Kommentar Jens Knaup Java News and Music Projekt Seite 3

3 2 Die Online-Anzeige Die Online-Anzeige hat in erster Linie die Aufgabe darzustellen welcher user gerade online ist. Weiterhin sollte noch angezeigt werden seit wann jeder einzelne online ist und die Anzahl der user. Die Ausgabe dieser Informationen ist im Frameset in den Info-Bereich gekommen, da nur Informationen Ausgegeben werden und keine interaktionen möglich sind. 3 Dateien für die Online-Anzeige 3.1 Das user-verzeichnis Das Userverzeichnis befindet sich direkt unter dem /jnews Hauptverzeichnis Es wurde zur besseren Übersicht ein eigenes Verzeichnis für die Userdateien eingerichtet. Anfangs waren noch andere Dateien der Benutzerverwaltung in diesem Verzeichnis. Da die Userdateien jedoch automatisch erzeugt und gelöscht werden mussten sie nicht in den gleichen Ordner wie die Dateien die von dem Administrator gepflegt werden müssen. Eine bessere Übersicht ist also so gewährleistet. 3.2 Die User-Online-Dateien Um die aktuell ordnungsgemäß eingeloggten User zu orgenisieren/verwalten wird für jeden user für die Zeit die er online ist eine User-Online-Datei erzeugt. Die wichtigen Informationen des users werden direkt in dem Namen der Datei gespeichert. Die Datei ist also leer und hat auch keine Dateinamenserweiterung. Jens Knaup Java News and Music Projekt Seite 4

4 3.3 Verzeichnisstruktur des gesamten Projektes 3.4 Inhalte der einzelnen Verzeichnisse addon: Ordner für Zusatz-Programme Hier bisher : Timer. class Benötigte Klasse für die Server-Infos admin: Dies ist der einzige Ordner den der Administrator zu pflegen hat. Hier werden die von dem Kommentar Programm erzeugten Textdateien abgelegt. Der Dateiname gibt Auskunft über Erstellungsdatum, Zeit und den Nicknamen des Absenders. Dateien: z.b.: com_030611_051842_test.txt Außerdem werden hier die Registrierungsanforderungen von neuen usern erstellt. Der Dateiname gibt hier Auskunft über die Erstellungszeit und den Nicknamen des Absenders. Dateien: z.b.: register_12-37_rama.txt Jens Knaup Java News and Music Projekt Seite 5

5 Außerdem ist hier die Datei mit der Liste der registrierten user. Diese Datei kann mit jedem Texteditor bearbeitet werden. Datei: user.dat html: In diesem Ordner sind alle JSP Dateien vorhanden (Wir haben es nicht mehr geschafft in in jsp umzubenennen). Unter anderem sind hier die beiden Startseiten index.jsp und jnm_start.jsp zu finden. Index. jsp: Jnm_start.jsp: Startet den Login Bereich. Startet die Java News and Music Hauptseite. skin: Hier sind acht Unterverzeichnisse (layout1 bis layout8) für die acht verschiedenen Skins vorhanden (siehe Kap.7). Jeder layout Ordner hat einen Unterordner /picture in dem die Grafiken für das entsprechende layout gespeichert werden. Und einen Unterordner style in dem die css Datei liegen muss. Jedes layout greift also auf eine eigene css Datei zu. In dem Login Unterordner sind die erforderlichen Dateien und Grafiken für den Login Bildschirm. Dieser ist immer gleich. user: In diesem Ordner werden die user-online-dateien gespeichert. Für jeden user der online ist wird eine Datei erstellt. Der Dateiname gibt Auskunft über die IP-Adresse, Einlog Zeit und den Nicknamen des users. Dateien: z.b.: _test_14-04 Die restlichen Ordner sind für die anderen Projektgruppen erstellt worden. Die Layout-Gruppe ist für den Inhalt nicht verantwortlich. Die Gruppen können in ihren Ordnern eine eigene Verzeichnisstruktur erstellen. Jens Knaup Java News and Music Projekt Seite 6

6 4 Allgemeine Funktionsweise 4.1 Benötigte Dateien / Verzeichnisse Da die Online-Anzeige nur die user anzeigen soll die gerade online sind ist hier nur das Verzeichnis user von Bedeutung, weil hier die user-online-dateien liegen. Es muss also nur dieses Verzeichnis bearbeitet werden. 4.2 Grundsätzlicher Ablauf Nach dem ein user sich mit einem gültigen Usernamen und einem Passwort eingeloggt hat, wird seine user-online-datei erzeugt und im Verzeichnis user gespeichert. Die Online-Anzeige prüft dieses Verzeichnis und liest die dort abgelegten Dateien aus. Dann werden diese eingelesenen Dateinamen einzeln bearbeitet. Es werden die benötigten Informationen herausgeholt und in drei einzelnen Strings gespeichert. Jetzt können diese Informationen des users in geeigneter Form zusammen ausgegeben werden. Das optische Erscheinungsbild der Online-Anzeige kann zum einen einfach über die verändert werden und zum anderen über die Grafiken des Skins. css Datei Jens Knaup Java News and Music Projekt Seite 7

7 5 Realisierung 5.1 Auslesen des User-Verzeichnisses Die Dateinamen der Dateien die in dem User-Verzeichnis sind müssen ausgelesen werden und in ein ArrayofString geschrieben werden. Man hat hier jetzt das Problem, dass sowohl die Länge der Dateinamen wie auch die Anzahl der Dateien variiert. Es wäre also eigentlich erforderlich bei jedem Auslesen erneut über Schleifen und Zähler die Dateianzahl und die Länge der Dateinamen zu bestimmen. In Java gibt es jedoch die Klasse FILE die genau hierfür sehr hilfreiche Methoden bereitstellt. Die Methoden isdirectory(), list() und length() werden im folgenden Programmausschnitt benutzt. String workdirectory = appdir + "user/"; // Der Pfad zu dem user Verzeichnis wird in workdirectory geschrieben String fd; if (workdirectory.length() == 0) fd=""; // Hier wird zunächst geprüft ob workdirectory eine Länge größer null hat. Also gültig ist. Ist es größer wird der Pfad in fd gespeichert else fd = workdirectory; // Jetzt wird eine Instanz (fod) der Klasse File mit fd als Parameter erzeugt File fod = new File(fd); // Die Methode isdirectory prüft ob Instanz ein Verzeichnis ist if (fod.isdirectory() ) { // Jetzt wird mit der Methode list() die Dateiliste in das Array fliste[] kopiert. // Der Programmierer braucht sich um die Größen des Array oder die Länge der Dateinamen keine // Gedanken zu machen. Es wird alles dynamisch angepasst. String fliste[] = fod.list(); Jens Knaup Java News and Music Projekt Seite 8

8 5.2 Rückgewinnung der User Daten Die einzelnen Dateinamen liegen jetzt hintereinander in dem ArrayofString fliste[]. Um nun die einzelnen Informationen jedes einzelnen users zu bekommen müssen die einzelnen Strings in Teilstrings zerlegt werden. Dies geschieht mit Hilfe der Klasse STRING die hierfür die Methoden indexof(), index() oder substring() bietet. for (int i=0 ; i<fliste.length ; i++) { // Auch die Anzahl der Schleifendurchläufe wird einfach über die length() Methode bestimmt // Dateiname stellt einen kompletten Dateinamen da String dateiname = fliste[i]; // Es werden nun drei Teilstrings gebildet: userhour, usermin und username // Die Methode substring() begrenzt den String von links und rechts. // Die Variable g ist der Zählindex. int b = dateiname.indexof('-')-2; String userhour = dateiname.substring(b,dateiname.length()-3; int c = dateiname.indexof('-')+1; String usermin = dateiname.substring(c,dateiname.length()-0); int a = dateiname.indexof('_')+1; String username = dateiname.substring(a,dateiname.length()-6); int g = i+1; Jens Knaup Java News and Music Projekt Seite 9

9 5.3 Ausgabe der User Daten Die drei einzelnen Strings müssen jetzt in einer anschaulichen Form ausgegeben werden. Dafür ist es am sinnvollsten wenn die einzelnen Elemente in einer Tabelle fixiert werden. Das hat den Vorteil, dass sich die einzelnen Elemente immer in ihrer Spalte automatisch zentrieren. Das Ergebnis ist eine sauber ausgerichtete Tabelle. Die Aufteilungsstriche der Tabelle werden natürlich ausgeblendet. <tr> <td class="nicktag"> < </td> <td class="nickname"> <p> <%=g+". "+username %> </p> </td> <td class="nicktag"> > </td> <tr> <tr> <td> </td> <td> ist seit <%= userhour+":"+usermin+"uhr online" %> </td> <td> </td> <tr> Der tr Befehl öffnet eine komplette Zeile. Diese Zeile wird durch dreifache Verwendung des td Befehls in drei Spalten aufgeteilt. Außerdem wird durch einen zweiten tr Befehl eine weitere Zeile eröffnet Jeder user wird also durch zwei Zeilen mit jeweils drei Spalten dargestellt. Bei diesen Befehlen handelt es sich um normale HTML Anweisungen. Wenn jedoch z.b. Variablen ausgegeben werden sollen, so kann einfach mit dem <% und %> Befehl JSP Code eingefügt werden. Es kann beliebig zwischen HTML und JSP gewechselt werden. Jens Knaup Java News and Music Projekt Seite 10

10 Zur besseren Veranschaulichung hier die Online-Anzeige mit eingeblendeten Tabellen-Linien. Man kann hier sehr gut sehen, dass die zwei Zeilen und drei Spalten sich gleichmäßig verteilen. Auch wenn die Nicknames unterschiedlich lang sind werden sie automatisch zentriert. Jens Knaup Java News and Music Projekt Seite 11

11 6 Das Frameset Die Darstellung des Java News and Music Projektes sollte für eine Bildschirmauflösung von 1024 x 768 Punkten optimiert sein. Daraus ergab sich eine gesamte nutzbare Fläche von ca. 960 x 540 Punkten. Die Seite wurde in fünf Bereiche geteilt: 1. Das Frame frm_head bildet den Kopf der Seite. Hier ist eine Fläche von 960 x 100 Punkten für Überschriften, Logos und Buttons. 2. Rechts befindet sich das Frame frm_news. Dieser große Bereich mit 250 x 440 Punkten ist für die Darstellung der News gedacht. Da die News aus viel Text bestehen könnten wurde dieser Bereich bewusst etwas großzügiger bemessen. 3. Links mittig ist das Frame frm_info. Hier werden auf einer Fläche von 250 x 340 Punkten Informationen über die eingeloggten user ausgegeben. Außerdem ist hier platz für ein Bild. 4. Links unten ist der 250 x 100 Punkte gr0ße Frame frm_misic. Hier soll das Plugin der Music Gruppe hin. 5. Der mittlere größte Bereich kann über Buttons umgeschaltet werden. Er ist 460 x 440 Punkte groß. Es kann zwischen folgenden vier Plugins gewechselt werden: Gallery, Chat, Game und Comment. Jens Knaup Java News and Music Projekt Seite 12

12 7 Skins 7.1 Warum Skins Um das optische Erscheinungsbild der Seite interessanter, individueller und flexibler zu machen haben wir uns entschlossen den usern acht verschiedene Skins anzubieten. So ist es jedem user möglich sich sein bevorzugtes auszusuchen. Für den Administrator ist es weiterhin möglich neue Skins zu entwerfen und den usern zur Verfügung zu stellen. Mit etwas Übung in der Bildbearbeitung sollte dies kein Problem sein. 7.2 Aufbau der Skins Grundsätzlich hat jedes Frame einen Rahmen einen Hintergrund und eine Überschrift. Im oberen Frame ist zusätzlich eine Gesamt Überschrift vier Buttons ein Logo und zwei weitere Grafiken vorgesehen. Im Einzelnen sind für ein komplettes Skin folgende Dateien zu erstellen: 1. Head - head_back.jpg Hintergrund - head_logo.gif Logo - head_line.gif Überschrift der Seite - head_design1.gif Grafik - head_design2.gif Grafik - head_btn_gal.gif Button Gallery - head_btn_cha.gif Button Chat - head_btn_gam.gif Button Game - head_btn_com.gif Button Comment Wenn die vier Buttons animiert sein sollen muss jeweils ein zweiter Button mit der Endung 2 erstellt werden(z.b. head_btn_gal2.gif). Wenn keine Animation erwünscht ist können die ersten Buttons einfach kopiert werden und mit der Endung 2 erweitert werden. Wenn die zweiten Buttons nicht vorhanden sind gibt es Darstellungsfehler auf der Seite. 2. Info - info_back_i.jpg Hintergrund - info_back.jpg Rahmen - info_pic.gif Bild - info_online.gif Überschrift Jens Knaup Java News and Music Projekt Seite 13

13 3. Music - music_back_i.jpg Hintergrund - music_back.jpg Rahmen - music_online.gif Überschrift 4. News - news_back_i.jpg Hintergrund - news_back.jpg Rahmen - news_online.gif Überschrift 5. Content - comm_back.jpg Hintergrund für vier Plugins - gall_head.gif Überschrift Gallery - game_head.gif Überschrift Game - chat_head.gif Überschrift Chat - comm_head.gif Überschrift Comment Außerdem hat man noch die Möglichkeit das optische Erscheinungsbild über eine Stylesheet-Datei zu verändern. Hier werden global Schriftarten, größen, Farben und Zeilenabstände definiert. Jens Knaup Java News and Music Projekt Seite 14

14 8 Schluss Abschliessend kann man sagen, dass das Java News and Music Projekt eine gelungene zusammenarbeit von mehreren Programmier Gruppen war. Durch die genauen Vorgaben der Layout Gruppe war ein weitgehend unabhängiges Arbeiten der einzelnen Gruppen möglich. Auch die spätere zusammenführung der Programmteile hat gut funktioniert. Es mußten nur kleinigkeiten wie z.b. Pfadangaben angepasst werden. Aufgrund der eingeschränkten Zeit sind sicher viele Funktionen, die erst während der Realisierung für nötig befunden wurden, nicht mehr fertig gestellt worden. Jens Knaup Java News and Music Projekt Seite 15