Entwicklung eines Redaktionssystems für die Präsentation

Entwicklung eines Redaktionssystems
für die Präsentation von Künstlern und
ihren Werken im Web
Große Studienarbeit
im Studiengang Informationswirtschaft
der
Fachhochschule Stuttgart –
Hochschule der Medien
von
Jörg Jochims (M.-Nr.: 13769)
Betreuender Dozent:
Prof. Dr. Rathke
Bearbeitungszeitraum: 1. Mai – 30. Juni 2004
1
Kurzfassung
Gegenstand der vorliegenden großen Studienarbeit ist die Entwicklung und Umsetzung
eines Redaktionssystems zum Anlegen von Künstlern und ihren Werken im Web.
Nach einer umfassenden Analyse der Website http://www.harlequins.de, für die das System im Rahmen dieser Studienarbeit entwickelt wurde und der anschließenden Begründung warum kein kommerziell erhältliches Content Management System eingesetzt worden ist, widmet sich diese Arbeit vornehmlich der Dokumentation der technischen Umsetzung des Redaktionssystems und der Darstellung der Daten auf der Website.
Schlagwörter: Content Management System, CMS, Redaktionssystem, Künstler, Servlets, Java Server Pages, JSP, XSLT
Abstract
This work contains a documentation about the evolution and realization of a Content
Management System, which transfers artist`s data and the presentation of their work into
the web.
A analysis of the website http://www.harlequins.de gives the answer to the question, why
there was not chosen an always existing and commercial CMS.
The focus of this work lays on the technical realization of the CMS and the display of the
data on the website.
Keywords: Content Management System, CMS, artist, Servlets, Java Server Pages,
JSP, XSLT
2
Inhaltsverzeichnis
Kurzfassung.......................................................................................................................2
Abstract..............................................................................................................................2
Inhaltsverzeichnis............................................................................................................3
Abbildungsverzeichnis ...................................................................................................4
Einleitung .........................................................................................................................5
1
Voraussetzungen..................................................................................................6
1.1
Anforderungen an das Redaktionssystem..............................................................6
1.2
Technische und funktionelle Analyse der Website http://www.harlequins.de.........7
1.3
1.3.1
1.3.2
1.3.3
Designaspekte der Website....................................................................................8
Die Unterteilung in Bereiche...................................................................................8
Fest vorgeschriebene Bildformate und -grössen ....................................................9
Navigation und Benutzerführung ............................................................................9
1.4
Begründung: Warum sind bereits vorhandene Content Management Syteme
nicht geeignet und die Entwicklung eines eigenen Redaktionssystems
sinnvoll?................................................................................................................10
2
Umsetzung ..........................................................................................................11
2.1
2.1.1
2.1.2
2.1.3
Datenbankstruktur ................................................................................................11
Datenanalyse........................................................................................................11
Entitäten – Beziehungsmodell ..............................................................................12
Datendefinition......................................................................................................13
2.2
2.2.1
2.2.2
2.2.3
Technologie des Redaktionssystems ...................................................................14
Datenbankverbindung mittels JDBC und Web.xml...............................................14
Java Servlets ........................................................................................................18
Java Server Pages ...............................................................................................18
2.3
Applikationslogik...................................................................................................18
2.4
Darstellung des Redaktionssystems ....................................................................21
2.5
Darstellung der Künstlerdaten auf der Website....................................................22
3
Anhang ................................................................................................................27
3.1
Auflistung und Kurzbeschreibung aller Servlets des Redaktionssystems ............27
3.2
Auflistung und Kurzbeschreibung aller JSP`s des Redaktionssystems ...............28
3.3
Screenshots des Redaktionssystems...................................................................30
3.4
Screenshots der Künstlerplattform (Darstellung)..................................................32
Quellenverzeichnis:.......................................................................................................33
3
Abbildungsverzeichnis
Abbildung 1: Trennung von Inhalt, Logik und Präsentation @ www.harlequins.de...... 7
Abbildung 2: Einteilung in Bereiche.............................................................................. 8
Abbildung 3: Entitäten- Beziehungsmodell................................................................... 12
Abbildung 4: Aplikationslogik des Redaktionssystems................................................. 19
Abbildung 5: Frames bei der Redaktionssystem-Darstellung im Browser.................... 21
Abbildung 6: Links und Blätterfunktion bei der Künstlerauflistung............................... 26
Abbildung 7: Standardbilderauswahlkatalog................................................................ 30
Abbildung 8: Künstlerdaten-Eingabeformular.............................................................. 31
Abbildung 9: Überprüfung der eingegebenen Künstlerdaten....................................... 31
Abbildung 10: Detailansicht eines Künstlers.................................................................. 32
4
Einleitung
Im Rahmen dieser großen Studienarbeit entwickelte ich ein Redaktionssystem zum Anlegen von Künstlern und ihren Werken für den gemeinnützigen Verein „Arbeitskreis für
Jugendkultur e.V.“ in Heidelberg. Unter dem Projektnamen „Harlequins Universe“ veranstaltet dieser Verein seit mittlerweile 8 Jahren Kulturevents und Ausstellungen im Großraum Rhein-Neckar-Kreis.
Auf der Website http://www.harlequins.de ist nun das Ergebnis meiner Arbeit zu sehen. Im Folgenden werde ich auf die einzelnen Schritte der Umsetzung eingehen, mit
Schwerpunkt auf technische, funktionelle und logische Aspekte.
Code-Fragmente sind in der Schrift Courier dargestellt, Abbildungen und Screenshots runden das Gesamtbild ab.
Der komplette Programm-Code inkl. aller Servlets und JavaServerPages befindet
sich auf der beigefügten CD-Rom.
5
1
Voraussetzungen
Bevor es an die Umsetzung und Implementierung des Redaktionssystems gehen kann, ist
es wichtig, folgende Fragen zu klären:
• Welche Anforderungen werden an das Redaktionssystem gestellt?
• Wie ist das System aufgebaut, auf dem das Redaktionssystem laufen soll?
• An welche Vorgaben muss man sich bei der Implementierung halten?
• Muss man überhaupt ein eigenes System entwickeln? Gibt es vielleicht auch
„Software von der Stange“, welche sich hervorragend für den Zweck eignet und
problemlos integriert werden kann?
Die Antworten auf diese Fragen wird dieses Kapitel geben.
Zuerst werde ich meine Ansprüche an das Redaktionssystem äußern. Daraufhin wird das
System und die Website etwas genauer unter die Lupe genommen. Die individuellen
Merkmale der Website und meine eigenen Ansprüche an die Funktionalität des Redaktionssystems führen dann zur Antwort auf die letzte Frage.
1.1
Anforderungen an das Redaktionssystem
Welche Funktionalitäten soll das Redaktionssystem bieten? Folgende Anforderungen habe ich an das Redaktionssystem:
Es soll...
•
Künstler anlegen können
•
die Möglichkeit beinhalten, ein Passbild eines Künstlers anzulegen, bzw.
hochzuladen.
•
über einen Standardbilder-Auswahlkatalog verfügen (für den Fall, daß kein
Künstler-Passbild vorhanden ist).
•
Künstler überarbeiten können (für den Fall nachträglicher Änderungen, wie z.B.
neue Kontaktadresse des Künstlers).
•
Werke des Künstler hochladen und anlegen können.
•
sicher sein, damit gewährleistet ist, dass nur berechtigte Personen das System
benutzen.
6
1.2
Technische und funktionelle Analyse der Website
http://www.harlequins.de
Die Website http://www.harlequins.de liegt auf einem Apache-Server, auf dem Resin von
Caucho.com als Webserver mit Servlet- und JSP-Engine eingesetzt wird.
Die Seite verwendet Java-Technologie in Form von JavaServerPages zur Präsentation
und Servlets als mittlere Schicht zwischen Front- und Backend. Als Backend des Systems
dient eine MySQL-Datenbank. Den Servlets kommen bei einer Anfrage verschiedene
Aufgaben zu, so sorgen sie z.B. für eine zufällige Auswahl von dekorativen Bildern, oder
nehmen Kontakt mit der Datenbank auf, um entsprechende Daten auszulesen und an das
Frontend zu übermitteln.
Als Frontend dienen JSP`s, welche XML-Format ausgeben, das die Definition von
eigenen Tags unterstützt und somit mehr Flexibilität und Ordnung zulässt, als das bei
HTML möglich wäre. Die XML-Dokumente werden dann mit einem XSLT-Prozessor in ein
repräsentatives HTML-Format umgewandelt.
Die untere Abbildung zeigt auf, wie mittels dieses Systems Inhalt, Logik und Präsentation
voneinander getrennt werden.
Request
JSP im
XML –
Format
Browser
(Client)
HTML
Servlet
DB
XSLTProzessor
Abbildung 1: Trennung von Inhalt, Logik und Präsentation @ www.harlequins.de
Die Website beinhaltet auch Flash-Elemente, z.B. eine Flash-Navigationsleiste (s. 1.3.3).
Da nicht alle Besucher der Website Flash auf ihrem Computer installiert haben, wird auf
der index.html - Startseite mittels eines JavaScript-Codes überprüft, ob dies der Fall ist.
Wenn ja, erfolgt eine automatische Weiterleitung in den flash-Ordner der Web-App, in
dem sich alle JSP`s mit einer Referenz auf die Flash Navigation befinden. Wenn der
7
Besucher kein Flash installiert hat, wird er auf den sogenannten Nonflash-Ordner
verwiesen, in dem alle JSP`s mit einer alternativen Navigation liegen.
1.3
Designaspekte der Website
Das Layout der Website http://www.harlequins.de unterliegt strengen Gestaltungsregeln,
welche der Mediengestalter Simon Leidig definiert hat.
Mittels zufallsgenerierter Bilder in speziellen Bereichen (s.1.3.1.) und einem ebenfalls zufallsgenerierten XSL-Stylesheet wirkt die Website lebendiger und abwechslungsreicher.
Alle Inhalte und Zitate dieses Kapitels stammen aus der internen Dokumentation von Simon Leidig, die sich auf der beigefügten CD-Rom befindet.
1.3.1 Die Unterteilung in Bereiche
Das Layout ist in verschiedenen Bereiche eingeteilt (siehe Abbildung unten).
Abbildung 2: Einteilung in Bereiche
8
In den Bereichen A und B befinden sich auf allen Seiten die gleichen „Shortcut Icons“, die
Stammgästen der Site einen schnellen Zugriff auf die wichtigsten Bereiche und Funktionen gewähren.
Die Bereiche C, D und F sind ausschließlich für Bilder bzw. Grafiken vorgesehen, die für
jede Seite definiert werden müssen.
In den Bereichen E und G befinden sich die eigentlichen Inhalte, in Form von Texten,
weiteren Bildern, zusätzlichen Links oder Ankern, Formularen, Tabellen usw.
Im Bereich H kann sich eine Blätterfunktion oder Ähnliches befinden, abhängig vom
jeweiligen Inhalt.
Redaktionell bearbeitet werden die Bereiche C, D, E, F, G und H.
Im Bereich G befindet sich der hauptsächliche Inhaltsbereich.
In diesem Bereich ist auch das Ergebnis der Arbeit zu sehen.
1.3.2 Fest vorgeschriebene Bildformate und -grössen
Da die Bildformate eng mit dem Layout verknüpft sind, unterliegen sie einem strengen
System.
Demnach sind die grundlegenden Maße für ein Bild auf 16 Pixel, 106 Pixel und 368 Pixel
festgelegt.
Dieses System findet in dem Redaktionssystem Beachtung, denn es können nur Bilder
eines Künstlers oder eines Werkes hochgeladen und angelegt werden, welche eine Breite
von 106 Pixel besitzen.
1.3.3 Navigation und Benutzerführung
Die Hauptnavigation befindet sich im rechten Teil der Website und unterliegt als Bestandteil des Layouts ebenso strengen und festdefinierten Regeln, welche von Simon Leidig
aufgestellt wurden.
Sie besteht aus einem Flash Film, der dynamisch aus einer Textdatei die Informationen
über Bezeichnung, Verknüpfung und logische Position jedes Links liest.
Wie schon erwähnt, gibt es für User ohne Flash eine Alternativlösung, die allerdings nicht
den vollen Komfort bieten kann.
9
1.4 Begründung: Warum sind bereits vorhandene Content
Management Syteme nicht geeignet und die Entwicklung eines
eigenen Redaktionssystems sinnvoll?
Anhand der eben durchgeführten technischen und funktionellen Analyse der Website,
unter besonderer Berücksichtigung ihrer speziellen Layout-Charakteristika (z.B. fest vorgeschriebene Bildgrößen) und Open Source Ausrichtung wird klar, dass die Integrierung
eines bereits vorhandenen kommerziell erhältlichen CMS scheitern muss.
Da es sich um ein offenes und erweiterbares System handelt, mit essentiellen Bestandteilen aus Open Source Quellen, wäre eine kommerzielle Lösung nicht denkbar.
Außerdem tragen meine eigenen Ansprüche an ein Redaktionssystem (z.B. einen Bilderkatalog zu besitzen) dazu bei, mich für die Entwicklung eines neuen Redaktionssystems
zu entscheiden.
10
2 Umsetzung
2.1
Datenbankstruktur
Um eine geordnete Struktur der Künstlerdaten zu gewährleisten, ist eine Datenbank als
Speicher dieser Daten absolut notwendig. Aus diesem Grund war der erste Schritt bei der
Umsetzung des Projekts, eine sinnvolle Struktur der Datenbank festzulegen. Die auf dem
Server bereits installierte MySQL-Datenbank bietet alles, was hierfür an Funktionalität
benötigt wird.
2.1.1 Datenanalyse
Welche Funktionalitäten soll die Datenbank haben? Welche Datenfelder sind wichtig um
einen Künstler und dessen Werk(e) genauer zu beschreiben?
Ausgehend von diesen Fragen legte ich folgende Datenfelder für einen Künstler fest:
•
Link zum Bild des Künstlers
•
Kunstkategorie, der er zugeordnet werden kann
•
Künstlername
•
Kurzbeschreibung
•
bürgerlicher Name (wenn nicht identisch mit Künstlernamen),
•
Kunststil des Künstlers
•
Beginn der künstlerischen Tätigkeit
•
Sternzeichen
•
Geburtsjahr
•
Werdegang
•
Auftragsarbeiten für den Verein
•
E-Mail-Adresse
•
ggfs. die URL der persönlichen Website des Künstlers
•
ein Datumsfeld, daß das Datum des Eintrags festhält
11
Ein Werk hat folgende Datenfelder:
•
Urheber des Werkes
•
Link zum Bild des Werkes
•
Link zum Werk selbst
•
Name des Werkes
•
Beschreibung des Werkes
2.1.2 Entitäten – Beziehungsmodell
Im Anschluss an die Datenanalyse, setzte ich ein Entitäten-Beziehungsmodell um (s. Abbildung unten). Während der Umsetzung des Modells wurde offensichtlich, dass eine dritte Tabelle namens „hu_kunstkategorie“, notwendig werden würde, um eine gemäß der
drei Normalformen korrekte Datenbankstruktur zu gewährleisten.
hu_kuenstler
1
unterstellung
m
hu_kunstkategorie
1
urheberschaft
mc
hu_werke
Abbildung 3: Entitäten- Beziehungsmodell
12
2.1.3 Datendefinition
Ausgehend von den Erkenntnissen der Datenanalyse und des EntitätenBeziehungsmodells definierte ich folgende Tabellen (mySQL-Dump-Ansicht):
---------
MySQL dump 9.10
Host: localhost
Database: harlequins
-----------------------------------------------------Server version 4.0.18
Table structure for table `hu_kuenstler`
CREATE TABLE hu_kuenstler (
id int(6) NOT NULL auto_increment,
kategorie int(1) NOT NULL default '0',
bildlink text NOT NULL,
kuenstler_name text NOT NULL,
kurzbeschreibung text NOT NULL,
buerger_name text,
kuenstler_art text NOT NULL,
taetigkeit int(4) default NULL,
sternzeichen varchar(20) NOT NULL default '',
geburtsjahr int(4) default NULL,
werdegang text NOT NULL,
hu_einsatz text NOT NULL,
e_mail text,
website text,
updated timestamp(14) NOT NULL,
PRIMARY KEY (id)
) TYPE=MyISAM;
--- Table structure for table `hu_kunstkategorie`
-CREATE TABLE hu_kunstkategorie (
id int(1) NOT NULL auto_increment,
bezeichnung char(30) NOT NULL default '',
PRIMARY KEY (id)
) TYPE=MyISAM;
--- Dumping data for table `hu_kunstkategorie`
--
13
INSERT INTO hu_kunstkategorie VALUES (1,'Optik');
INSERT INTO hu_kunstkategorie VALUES (2,'Musik');
--- Table structure for table `hu_werke`
-CREATE TABLE hu_werke (
id int(6) NOT NULL auto_increment,
kuenstler_id int(6) NOT NULL default '0',
bildlink text NOT NULL,
name text NOT NULL,
kunstwerklink text NOT NULL,
beschreibung text NOT NULL,
updated timestamp(14) NOT NULL,
PRIMARY KEY (id)
) TYPE=MyISAM;
2.2
Technologie des Redaktionssystems
Die Technologie des Redaktionssystems beruht auf einer MySQL-Datenbank als
Backend, Servlets als mittlere Schicht zwischen Datenbank und Java Server Pages, die
als Frontend des Systems in Erscheinung treten.
2.2.1 Datenbankverbindung mittels JDBC und Web.xml
Um von einem Servlet oder von einer Java Server Page eine Verbindung zu der mySQLDatenbank herzustellen, z.B. um neue Einträge in die Datenbank zu machen, oder Daten
aus der Datenbank abzurufen, muss man zunächst den entsprechenden JDBC-Treiber
laden.
Damit der Code möglichst flexibel und portabel bleibt, gebe ich die entsprechende Referenz auf den Klassennamen nicht direkt an, sondern lege diesen in der Web.xml – Datei
im WEB-INF – Ordner meiner Web-App auf dem Server ab.
Das hat den großen Vorteil, dass man bei der Installation des Redaktionssystems auf
einen anderen Server die entsprechenden Datenbankzugriffsparameter, wie Datenbanktreiber, Verbindungs-URL, Datenbankuser und Passwort nur in dieser Datei anpassen
muss.
Um nun die Klasse von web.xml zu laden, verwendet man die Methode Class.forName.
14
Nachdem der JDBC-Treiber geladen wurde, muss der Standort des Datenbankservers
angegeben werden. Diese Verbindungs-URL liegt selbstverständlich auch wieder in
web.xml.
Um die eigentliche Netzwerkverbindung herzustellen, muss die Methode getConnection aus der Klasse DriverManager die URL, den Datenbank-Benutzernamen und das
Passwort übergeben.
In einem Servlet oder einer JSP, in der man wie in nachfolgendem Beispiel, eine Datenbankverbindung aufbaut muss das Paket java.sql importiert werden.
Für den Zugriff auf die web.xml – Parameter, verwendet man die context – Methode von
ServletContext.
In dem folgenden Quellcode der JSP „k_liste“ wird ein Datenbankverbindungsaufbau und
–abbau gezeigt:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<!DOCTYPE web-app
PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/j2ee/dtds/web-app_2_3.dtd">
<web-app>
<context-param>
<param-name>DatabaseDriver</param-name>
<param-value>com.caucho.jdbc.mysql.Driver</param-value>
</context-param>
<context-param>
<param-name>DatabaseURL</param-name>
<param-value>jdbc:mysqlcaucho://localhost:3306/harlequins</param-value>
</context-param>
<context-param>
<param-name>DatabaseUser</param-name>
<param-value>user_name</param-value>
</context-param>
<context-param>
<param-name>DatabasePassword</param-name>
<param-value>secret_password</param-value>
</context-param>
</web-app>
17
2.2.2 Java Servlets
Alle von mir entwickelten Servlets des Redaktionssystems liegen in einem eigenen Ordner, bzw. Package: „/k_plattform/redaktion“
Eine Kurzbeschreibung aller Servlets befindet sich im Anhang und der entsprechende
Java-Code auf der beigefügten CD-Rom.
Die Hilfsklassen im fileupload-Package (s. CD-Rom) sind Open Source und wurden ohne
Veränderungen übernommen. Mein besonderer Dank geht hierbei an die Entwickler dieser Klassen: Marco Schmidt und Jason Pell.
2.2.3 Java Server Pages
Bei den zahlreichen JSP`s des Redaktionssystems habe ich mir ihre Eigenschaft zu Nutzen gemacht, dass man in normalen HTML-Code Java-Code „einstreuen“ kann. Da das
Redaktionssystem aus relativ vielen Seiten besteht, erklärt sich daraus auch die große
Menge an JSP`s, die ich geschrieben habe.
Die einzelnen JSP`s tauschen untereinander Parameter aus, welche entweder in den
Formularfeldern erzeugt werden, oder bereits schon bestehen, wie z.B. der „AccessParameter“, der immer mitgeliefert werden muss. Dieser einfache Sicherheitsmechanismus verhindert, dass eine nichtauthorisierte Person in das System „einbricht“, indem sie
eine andere JSP anstatt der zuerst geforderten (login.jsp) öffnet. Die Parameter werden
meistens über Hidden-Formulare oder durch Anhängen an die URL (Bsp.:
http://bsp.de?param1=test&param2=test) an die nächste JSP oder ein Servlet weitergereicht, das dann diese mittels der Methode getParameter des Interfaces ServletRequest einliesst und ggfs. verarbeitet.
Eine Auflistung und Kurzbeschreibung aller Java Server Pages des Redaktionssystems
befindet sich im Anhang.
2.3
Applikationslogik
Für die Visualisierung der Applikationslogik entwickelte ich ein eigenes Modell.
Dieses zeigt auf, in welchem Dialog die einzelnen Klassen und JSP`s zueinander stehen
und welche Parameter übermittelt und abgerufen werden.
Die Pfeile zeigen neben der Parameterübergabe auch die Benutzerführung durch das
System auf, sowie die Interaktion zwischen den JSP`s, Servlets und Hilfsklassen.
18
login.jsp
= JSP
failed.jsp
name
password
name
password
= Servlet
xyz
= Parameter
PasswordCheck.class
access
access
welcome.jsp
access
doku.jsp
access
kategorie
access
k_auswahl.jsp
access
kategorie
option
k_liste.jsp
access
kategorie
kuenstler_id
kuenstler_name
access
kategorie
K_Abruf.class
access
kategorie
kuenstler_id
alle kuenstler -Parameter
k_bild.jsp
access
kategorie
update_k_bild.jsp
access
kategorie
bildupload
imgupload.jsp
access
kategorie
kuenstler_id
alle kuenstler –
Parameter
update_imguploa
access
kategorie
kuenstler_id
kuenstler_name
w_liste.jsp
access
kategorie
werk_id
kuenstler_name
WerkDelete.class
access
kategorie
werk_id
kuenstler_name
w_bild.jsp
access
kategorie
werk_id
kuenstler_name
bildupload
w_imgupload.jsp
ServletMultipartRequest.class
ImageInfo.class
MaxReadBytesException.clas
EmptyInputStream.class
TempFile.class
19
access
kategorie
kuenstler_id
alle kuenstler –
Parameter
access
kategorie
bildupload
k_bild_standard.jsp
update_k_bild_standard.j
access
kategorie
werk_id
kuenstler_name
bildupload
w_bild_standard.jsp
access
kategorie
kuenstler_id
alle kuenstler –
Parameter
access
kategorie
bildlink
k_text.jsp
access
kategorie
bildlink
eingegebene param
k_text_check.jsp
IntPruefer.class
access
kategorie
kuenstler_id
alle kuenstler –
Parameter
KuenstlerEintragen.class
access
kategorie
kuenstler_name
bildlink
access
kategorie
werk_id
kuenstler_name
bildlink
update_k_text.jsp
access
kategorie
kuenstler_id
alle kuenstler –
Parameter
update_k_text_check.jsp
w_text.jsp
access
kategorie
kuenstler_id
kuenstler_name
bildlink
name
beschreibung
w_text_check.jsp
access
alle werk –
Parameter
access
kategorie
kuenstler_id
alle kuenstler –
Parameter
MultipartRequest.cl
ass
MaxReadBytesExc
eption.class
EmptyInputStream.
class
TempFile.class
KuenstlerUpdaten.class
w_upload_jsp
access
alle werk –
Parameter
w_upload2.jsp
access
alle werk –
Parameter
Kunstwerklink
WerkEintragen.class
access
kategorie
kuenstler_name
bildlink
k_db_eintrag_ok.jsp
access
kategorie
kuenstler_id
kuenstler_name
check.jsp
Abbildung 4: Aplikationslogik des Redaktionssystems
20
2.4
Darstellung des Redaktionssystems
Die HTML-Startseite des Redaktionssystems (index.html) kreiert 2 Frames, in denen die
JSP`s eingebettet werden (s. Abbildung unten).
Alle JSP`s beinhalten gängigen HTML-Code und greifen auf denselben CSS-Stylesheet
zu.
Im Top-Frame liegt immer top.jsp, das die Headline („Harlequins Künstlerplattform“), das
aktuelle Datum, sowie einen Copyright-Vermerk inkl. E-Mail-Link anzeigt.
Im Main-Frame werden alle JSP`s des Redaktionssystems angezeigt.
Ich habe die Frame-Darstellung gewählt, um ein Anzeigen des Quell-Codes einer JSP im
Browser und an die URL angehängte Parameter zu unterbinden.
Top-Frame
(top.jsp)
Main-Frame
(login.jsp)
Abbildung 5: Frames bei der Redaktionssystem-Darstellung im Browser
21
2.5
Darstellung der Künstlerdaten auf der Website
Für die Darstellung der Künstlerdaten auf der Website kreierte ich 3 JSP`s (s. beigefügte
CD-Rom), welche von ihrer XML-Struktur allen anderen JSP`s der Website gleichen. Es
werden bei ihnen die geforderten Tags der einzelnen Bereiche (s.1.3.1.) eingesetzt.
Es folgt eine Kurzbeschreibung der 3 JSP`s:
•
k_plattform.jsp: Hier wählt der Besucher die Kunstkategorie aus. Zusätzlich wird
noch der aktuellste Künstler der Datenbank angezeigt und mittels eines Links kann
man direkt in dessen Detailansicht gelangen.
•
k_plattform2.jsp: Listet alle Künstler der zuvor gewählten Kategorie mit Bild, Name und Kurzbeschreibung auf.
•
k_plattform3.jsp: Detailansicht des Künstlers mit allen Werken des Künstlers.
Der untere Code von k_plattform2.jsp zeigt die geforderte XML-Struktur auf (im Code
fett hervorgehoben):
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet href="harlequins.xsl"?>
<!DOCTYPE harlequins [
<!-<%@ include file="/entities.ent" %>
-->
]>
<%@ page import='java.sql.*, javax.sql.*, javax.naming.*, java.util.*' %>
<jsp:useBean id="dateanzeige2" class="k_plattform.redaktion.DateAnzeige2"
/>
<% try { %>
<% String kategorie = request.getParameter("kategorie");
String kat = "";
if (kategorie.equals("1")) { kat = "Optik"; }
else
{ kat = "Musik"; }
%>
<% ServletContext context = getServletContext();
String dbdriver = context.getInitParameter("DatabaseDriver");
String dburl = context.getInitParameter("DatabaseURL");
String dbuser = context.getInitParameter("DatabaseUser");
String dbpasswd = context.getInitParameter("DatabasePassword");
%>
<% Class.forName(dbdriver);
Connection con = DriverManager.getConnection(dburl, dbuser,
dbpasswd);
%>
<harlequins>
<jsp:directive.page session="false" contentType="x-application/xsl"/>
<jsp:include page="area_a.xml" flush="true" />
22
<jsp:include page="area_b.xml" flush="true" />
<area_c>
<default>
<image src="/img/headlines/k_plattform.jpg"
alt="Harlequins K&uuml;nstlerplattform"/>
</default>
</area_c>
<area_d>
<default/>
</area_d>
<area_e>
<default/>
</area_e>
<area_f>
<option_4/>
</area_f>
<area_g>
<subheadline>K&uuml;nstler aus dem Bereich <%= kat %></subheadline>
<acts max_per_page="2">
<% try {
Statement stmt = con.createStatement();
ResultSet rs = stmt.executeQuery("select id, kuenstler_name, bildlink,
kurzbeschreibung, updated from hu_kuenstler " +
"WHERE kategorie = " + kategorie + " ORDER BY kuenstler_name");
%>
<% while (rs.next()) { %>
<%-- (1) = id | (2) = kuenstler_name | (3) = bildlink | (4) = kurzb | (5)
= Date --%>
<act link_img="<%= rs.getString(3) %>" link_dest="k_plattform3.jsp?id=<%=
rs.getString(1) %>" name="<%= rs.getString(2) %>">
<%= rs.getString(4) %><br/>
<link href="k_plattform3.jsp?id=<%= rs.getString(1) %>">Mehr...</link>
<meta>Ge&auml;ndert am: <%= dateanzeige2.getDate(rs.getTimestamp(5))
%></meta>
</act>
<% } } finally { con.close(); } %>
<% } catch (Exception e) { %> <jsp:forward page="k_plattform.jsp" />
<% } %>
</acts>
</area_g>
<jsp:include page="area_h.xml" flush="true" />
</harlequins>
23
Ich definierte die neuen Tags „<acts>“ und „<act>“ für die Bereiche E (Blätterfunktion), G
(Inhaltsbereich), H (Blätterfunktion): Hier ein Auszug des XSL-Stylesheets area_g.xsl mit
den neuen Modifikationen für die Künstlerplattform:
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html"
version="3.2"
encoding="ISO-8859-1"
doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN"
omit-html-declaration="no"
indent='yes'/>
...

<xsl:template match="act">
<xsl:choose>
<xsl:when test="@name">
<tr>
<td colspan="2" class="farbe1" align="right">&nbsp;<br/></td>
<td colspan="1" class="farbe1" align="left" width="100%"><FONT
FACE="Verdana,Arial,Helvetica" SIZE="2" CLASS="copy"><b><xsl:value-of
select="@name"/></b></FONT><br/></td>
</tr>
</xsl:when>
</xsl:choose>
<tr>
<td valign="top" align="left">
<xsl:choose>
<xsl:when test="@abs_img">
<img src="{@abs_img}" width="106"/>
</xsl:when>
<xsl:when test="@link_img">
<a href="{@link_dest}"><img src="{@link_img}" border="0"
width="106"/></a>
</xsl:when>
<xsl:when test="@link_img2">
<a href="{@link_dest2}" target="_blank"><img src={@link_img2}
border="0" width="106"/></a>
</xsl:when>
<xsl:when test="@img">
<img src="/img/images/acts/{@img}" width="106"/>
</xsl:when>
<xsl:otherwise>
<img src="/img/icons/space.gif" width="106" height="1"/>
</xsl:otherwise>
</xsl:choose>
<br/></td>
<td><img src="/img/icons/space.gif" width="5" height="1"/><br/></td>
<td valign="top" align="left"><img src="/img/icons/space.gif" width="1"
height="5"/><br/>
<FONT FACE="Verdana,Arial,Helvetica" SIZE="2" CLASS="copy">
<xsl:apply-templates select="node()[not(name()='meta')]"
mode="copy"/><br/>
</FONT>
</td>
</tr>
<xsl:if test="meta">
<tr><td colspan="3">
24
<FONT FACE="Verdana,Arial,Helvetica" SIZE="2" CLASS="copy">
<xsl:apply-templates select="meta/node()"/><br/>
</FONT>
</td></tr>
</xsl:if>
<tr><td colspan="3">
<img src="/img/icons/space.gif" width="1" height="10"/><br/>
</td></tr>
</xsl:template>
<xsl:template match="acts">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<xsl:choose>
<xsl:when test="boolean(string-length(@max_per_page)) and
count(act) &gt; @max_per_page">
<xsl:for-each select="act">
<xsl:if test="(position() &gt;= (parent::*/@max_per_page *
$page - 1)) and (position() &lt;= (parent::*/@max_per_page * $page))">
<xsl:apply-templates select="self::*"/>
</xsl:if>
</xsl:for-each>
</xsl:when>
<xsl:otherwise>
<xsl:apply-templates select="act"/>
</xsl:otherwise>
</xsl:choose>
</table>
</xsl:template>

<xsl:template match="area_g">
<xsl:apply-templates/>
</xsl:template>
</xsl:stylesheet>
25
Folgender Screenshot zeigt das Ergebnis der in diesem Kapitel beschriebenen Arbeit:
Blätterfunktion
Seitenanzeige
(Blätterfunktion)
Link zur Künstlerdetailansicht (k_plattform3.jsp)
Abbildung 6: Links und Blätterfunktion bei der Künstlerauflistung
26
3 Anhang
3.1
Auflistung und Kurzbeschreibung aller Servlets des
Redaktionssystems
•
DateAnzeige.java : Zeigt das aktuelle Datum im Top-Frame des Redaktionssystems.
•
IntPruefer.java: Diese Bean „überwacht“ die Eingabe des Tätigkeits – und Ge-
burtsjahrfeldes im Künstlerdaten-Erhebungsformular. Wenn hier keine Jahreszahl
angegeben wurde, oder gar Buchstaben, wird die Eingabe durch den int-Wert „o“
ersetzt.
•
K_Abruf.java: Ruft alle Künstlerdaten eines bereits existierenden Künstlers ab.
•
KuenstlerEintragen.java: Überträgt die Daten eines neuen Künstlers in die
hu_kuenstler – Datenbanktabelle.
•
KuenstlerUpdaten.java: Führt den Update eines Künstlers in der entsprechenden
Tabellenzeile aus.
•
PasswordCheck.java: Überprüft den eingegebenen Username und Passwort auf
Richtigkeit anhand Vergleich mit den in der entsprechenden Datenbanktabelle gespeicherten Daten.
•
UrlZuweisung.java: In dieser Bean wird der absolute Verzeichnispfad angegeben, in dem das Redaktionssystem liegt. Auf diese Bean greifen alle JSP`s zu.
Vorteil: Bei Installation in ein anderes Verzeichnis muss die URL nur in dieser
Bean angepasst werden.
•
WerkDelete.java: Löscht ein ausgewähltes Werk aus der Datenbank.
•
WerkEintragen.java: Trägt die Daten eines Werkes in die Tabelle hu_werke ein.
27
3.2 Auflistung und Kurzbeschreibung aller JSP`s des
Redaktionssystems
•
top.jsp: Top-Frame des Redaktionssytems. Zeigt aktuelles Datum und Zeit mittels
der Klasse DateAnzeigen an.
•
login.jsp: Authentifizierungsformular. Sendet die eingegebenen Daten (Login und
Passwort) an das Servlet PasswordCheck, welches diese überprüft (s. 3.1.)
•
failed.jsp: Authentifizierungsformular mit Hinweis „Zugriff verweigert“. Wird immer
dann aufgerufen, wenn die eingegebenen Daten beim Login falsch waren, oder
wenn jemand versucht hat, eine andere JSP direkt und ohne den AccessParameter zu öffnen. Sendet die eingegebenen Daten an PasswordCheck.class.
•
welcome.jsp: Hier kann man entweder die Kurzanleitung und Dokumentation des
Redaktionssystems studieren (Aufruf von doku.jsp) oder man wählt die Kunstkategorie aus, zu der der Künstler gehört, den man anlegen möchte (Aufruf von
k_auswahl.jsp?kategorie=*).
•
doku.jsp: Kurzanleitung und Dokumentation des Redaktionssystems für Erstnutzer.
•
k_auswahl.jsp: Auswahl folgender Optionen: Neuen Künstler anlegen (Aufruf von
k_bild.jsp), einen vorhandenen Künstler bearbeiten (Aufruf von
k_liste.jsp?option=k) oder ein Werk anlegen / löschen (Aufruf von
k_liste.jsp?option=w).
•
k_bild.jsp: Hier kann entweder ein Bild des Künstlers hochgeladen werden (Aufruf
von imgupload.jsp), oder wenn kein Bild vorhanden ist, kann man ein sog. „Standardbild“ (Aufruf von k_bild_standard.jsp) aus einem Katalog wählen.
•
imgupload.jsp: Hier wird zunächst überprüft, ob das File ein zugelassenes Bild-
format (jpg, gif, png) ist und ob die fest vorgeschriebene Breite von 106 Pixeln eingehalten wird. Ist beides der Fall wird das Bild hochgeladen und die URL des Bildes als Parameter angehängt. Die JSP erzeugt entsprechende Instanzen der
Klassen im fileupload-Package, die die Funktionalität des Upload-Vorgangs bereitstellen.
•
k_bild_standard.jsp: Auswahlkatalog mit mehreren Standardbildern.
•
k_text.jsp: Hier werden alle Daten des Künstlers mittels eines Formulars aufge-
nommen und zur Überprüfung an k_text_check.jsp weitergereicht.
•
k_text_check.jsp: Hier wird überprüft, ob die Pflichtfelder ausgefüllt wurden.
Wenn nicht, erscheint eine Aufforderung dies zu tun. Außerdem wird überprüft, ob
die Maximalzeichenlänge des Kurzbeschreibungsfeldes eingehalten worden ist.
28
Zudem erfolgt eine Überprüfung der beiden Jahreseingaben (Tätigkeit und Geburtsjahr) auf int-Werte. Bei „Zuwiderhandlung“ (z.B. bei Eingabe von Buchstaben)
wird der Wert durch „0“ ersetzt. Die Texte werden auf deutsche Umlaute (ö, ä, ü)
überprüft und ggfs. ersetzt (oe, ae, ue). Ohne diese Überprüfung wäre die Darstellung der Texte im Browser fehlerhaft. Wenn alles korrekt ist, werden die Daten an
das Servlet KuenstlerEintragen weitergereicht.
•
k_liste.jsp: Listet alle Künstler der gewählten Kategorie auf. Durch das Klicken auf
einen Künstler wird je nach dem eingegangenen Option-Parameter (k oder w)
entweder auf das Servlet k_abruf.java verwiesen, oder auf w_liste.jsp.
•
update_imgupload.jsp: siehe imgupload.jsp. Die von k_abruf.java ausgelesenen
spezifischen Künstlerdaten werden als Parameter entgegengenommen und weitergereicht.
•
update_k_bild_standard.jsp: siehe k_bild_standard.jsp
•
update_k_text.jsp: Die mitgelieferten Daten werden in die Formulare eingetragen. Nach evtl. Abänderungen der Künstlerdaten wird update_k_text_check.jsp
aufgerufen.
•
update_k_text_check.jsp: siehe k_text_check.jsp. Wenn die Überprüfung erfolgreich war, werden die Daten an das Servlet KuenstlerUpdaten übergeben.
•
k_db_eintrag_ok.jsp: Diese Java Server Page erscheint immer, wenn ein Künstler erfolgreich eingetragen oder abgeändert wurde. Es bietet die Möglichkeit, das
Ergebnis auf der Künstlerplattform zu überprüfen (Aufruf von check.jsp), den
Künstler nochmal zu bearbeiten (Aufruf des Servlets k_abruf), ein Werk des Künstlers anzulegen (Aufruf von w_bild.jsp) oder zu welcome.jsp zurückzukehren.
•
check.jsp: Integriert mittels „include“ die offizielle Darstellung der Künstlerdaten
im Künstlerplattformbereich der Website. Durch einen Klick auf den „Zurück“ Button gelangt man wieder zu k_db_eintrag_ok.jsp
•
w_liste.jsp: Listet alle Werke des zuvor ausgewählten Künstlers. Wenn die Option
„Löschen“ ausgeführt,wird, wird das entsprechende Werk mittels des Servlets
WerkDelete gelöscht. Wenn „Neues Werk anlegen“ gewählt wird, folgt eine Weiterleitung auf w_bild.jsp. Es besteht außerdem die Möglichkeit zu welcome.jsp zurückzukehren.
•
w_bild.jsp: siehe k_bild.jsp
•
w_imgupload.jsp: siehe imgupload.jsp
•
w_bild_standard.jsp: siehe k_bild_standard.jsp
•
w_text.jsp: siehe k_text.jsp
•
w_text_check.jsp: siehe k_text.jsp
29
•
w_upload.jsp: Hier kann das File ausgewählt werden, welches hochgeladen werden soll (Abruf von w_upload2.jsp).
•
w_upload2.jsp: Hier wird zunächst überprüft, ob das File die geforderte Maximal-
größe von 8 MB einhält. Wenn die Überprüfung erfolgreich war wird das File übernommen und die entsprechende URL des Werkes an die Datenbank gesendet.
3.3
Screenshots des Redaktionssystems
Abbildung 7: Standardbilderauswahlkatalog
30
Abbildung 8: Künstlerdaten-Eingabeformular
Abbildung 9: Überprüfung der eingegebenen Künstlerdaten
31
3.4
Screenshots der Künstlerplattform (Darstellung)
Abbildung 10: Detailansicht eines Künstlers
32
Quellenverzeichnis:
Hall, Marty (2001). Servlets und JavaServer Pages, Markt + Technik Verlag, München.
Shepherd, Devan (2002). XML – Daten plattformübergreifend austauschen und modellieren, Markt + Technik Verlag, München.
Reese, George, Jay Yarger, Randy, King, Tim (2003). MySQL – Einsatz und Programmierung, O`Reilly Verlag, Köln.
Hawlitzek, Florian. (2000). Java 2, Addison-Wesley Verlag, München
Horn, Thorsten. Techdocs. Zugriff am 11.5.04 unter http://www.thorsten-horn.de
Schmidt, Marco. ImageInfo - Java class to extract image properties. Zugriff am 11.5.2004
unter: http://www.geocities.com/marcoschmidt.geo/image-info.html
Pell, Jason. Programming (Java,C,PHP). Zugriff am 11.5.2004 unter:
http://www.geocities.com/jasonpell/programs.html
33