Bilder und Datenbanken · 2020. 11. 20. · usemap Mit dem usemap-Attribut wird eine Grafik als...

242 Fortgeschrittene Techniken

Bei statischen Webseiten werden die Seitenund Bilder einmalig auf dem Webserver abge-legt. Wenn ein Bild hinzugefügt wird, mussdie Seite, auf der das Bild angezeigt werdensoll, entweder erstellt oder geändert und dasentsprechende Bild hochgeladen werden.

Dynamischen Webseiten verhalten sichanders. Sie können bei dynamischen Web-seiten jederzeit die Bildzuordnung auf derSeite ändern und mit entsprechenden Erwei-terungen sogar neue Bilder nur mit Hilfe desBrowsers auf den Webserver hochladen.

Gespeichert werden dann diese hochgela-denen Bilder entweder in einem Verzeichnisauf dem Webserver oder direkt in der Daten-bank. Werden die Bilder in einem Verzeichnisauf dem Server abgelegt, dann werden diePfade und Dateinamen der Bilder in derDatenbank gespeichert. Wie Sie Bilder aufdynamischen Webseiten einbinden und hoch-laden und welche Erweiterungen es gibt, er-fahren Sie in diesem Kapitel.

Bilder und DatenbankenBilder dynamisch anzeigen und speichern

Mit Hilfe einer Servererweiterung und einerMacromedia Exchange-Erweiterung fürUltraDev können Sie Bilder auf Ihren dynami-schen Seiten verwenden. Was wäre beispiels-weise ein Online-Shop ohne Produktfotos.

Einführung Bildparameter dynamischgenerieren

Mit UltraDev ist es möglich, jedes Attribut desIMG-Tags mit dynamischen Inhalten zu füllen.Das bedeutet, dass Sie nicht nur den Pfad zuder Datei (<img src="..."), sondern jedesandere Attribut des IMG-Tags dynamisch ge-stalten können. Zum Beispiel kann der alter-native Text für ein Bild aus einer Datenbankgelesen werden. Oder es können die Breiteund die Höhe aus der Datenbank eingelesenwerden.

Die Beispiele in diesem Kapitel beziehensich auf die Datenbank schiffe.mdb, die Sieauf der CD-ROM im Verzeichnis Datenbankenfinden.

Pfad aus der Datenbank auslesenSie besitzen generell zwei Möglichkeiten,Bilder dynamisch anzeigen zu lassen. Bei derersten werden die Bilddaten direkt in derDatenbank als BLOB-Objekt (Binary LargeObject) gespeichert. Da aber UltraDev dieseMethode nicht unterstützt, müssen Sie auf die

oo

CD-ROM

06_Teil_4_5 10.04.2001 13:21 Uhr Seite 242

243Bilder in Datenbanken

zweite Möglichkeit ausweichen, bei der dieBilder nicht in der Datenbank, sondern ineinem Verzeichnis des Webservers gespeichertwerden. Anstelle des Bildes wird bei dieserMöglichkeit nur der Pfad von der Webseitezum Bild in der Datenbank abgelegt.

Wenn Sie die Pfadangabe zu dem Bild auseiner Datenbank auslesen möchten, bietetUltraDev dafür eine sehr elegante Methode.Klicken Sie wie gewohnt auf das Grafiksymbolim Objektfenster. Im folgenden Dialogfensterschalten Sie vom Dateibrowser auf den 1Datensatzgruppenbrowser um (Abb. 1). Darinwählen Sie das Datenfeld aus, in dem die 2Pfade zu dem Bild gespeichert sind (Abb. 2).

Nachdem Sie nun wissen, wie Bilder dyna-

misch auf der Webseite eingebunden werden,fehlt noch die Möglichkeit, die Bilder über einEingabeformular auf den Webserver zu über-spielen bzw. über eine Update-Seite zu aktua-lisieren.

Attribute des IMG-TagsDas SRC-Attribut des IMG-Tags gibt die URLdes Bildes an und ist damit das wichtigsteAttribut dieses Tags. Es gibt aber noch weitereAttribute, die Sie dynamisch zuweisen können.Darunter fallen z. B. das Alt-Attribut, dessenWert angezeigt wird, wenn das Bild nichtoder noch nicht geladen ist, sowie dieHEIGHT- und WIDTH-Attribute, durch derenAngaben sich der Seitenaufbau beschleunigt.

1

2

i Abbildung 1Umschalten des Dateibrowsers in den Datensatz-browser

i Abbildung 2Auswahl des Datensatzes, der den Pfad zu dem Bildangibt.

Name Typ Beschreibung

Schiff_id AutoWert Laufende Nummer, die den Primärschlüssel erzeugt.

Schiff_name Text (50 Zeichen) Name des Schiffes

Schiff_hafen Text (50 Zeichen) Heimathafen des Schiffes

Schiff_pfad Text (255 Zeichen) In dieser Zeile wird der Pfad zu dem Bild mit dem entsprechenden Schiff gespeichert.

Aufbau der Tabelle »Schiffe« in derDatenbank Schiffe

06_Teil_4_5 10.04.2001 13:21 Uhr Seite 243

Alt-Attribut dynamisch erzeugen

Im folgenden Beispiel wird das Attribut ALT mitInhalten aus einer Datenbank gefüllt. ErzeugenSie dazu eine neue ASP-Seite und fügen Sie eineDatensatzgruppe auf dieser Seite ein.

1. Fügen Sie ein Bild auf der Seite einWählen Sie die Stelle auf Ihrer Seite aus, an derspäter das Bild eingefügt werden soll, und kli-cken Sie im Objektinspektor auf das Bildsymbol.Wählen Sie ein beliebiges Bild aus.

2. Definieren Sie ein dynamisches AttributSchalten Sie den Eigenschaftsinspektor auf 1Attribut-Ansicht um und fügen Sie das Attributalt hinzu (Abb.3). Durch Klicken auf das 2Blitzsymbol können Sie im nachfolgend öffnen-den Fenster ein Feld aus Ihrer Datensatzgruppeauswählen (Abb. 4), dessen Wert später alsalternativer Text für die Grafik angezeigt wer-den soll.


1

2

i Abbildung 3Ein zusätzliches Attribut hinzufügen

i Abbildung 4Einen Datensatz auswählen

06_Teil_4_5 10.04.2001 13:21 Uhr Seite 244

Übersicht der wichtigsten Attribute des IMG-Tags

Attribut Beschreibung

a.href Um Hypertext-Verbindungen (»Links«) zu erstellen, setzt man im HTML-Text einen »Anker« der folgenden Form an: <a href=“URL“>.

a.target Damit das Verweisziel in einem anderen Frame angezeigt wird, fügt man dem Verweis-Tag<a> zusätzlich das Attribut target (target = Ziel) zu. Dahinter folgt der Name des Frames, in dem das Verweisziel angezeigt werden soll. Neben den frei wählbaren Namen für die Frames gibt es reservierte Bezeichnungen (_blank, _parent, _top, _self).

align Mit dem align-Attribut wird das Bild relativ zu seinen umgebenden Elementen ausgerich-tet. Als Werte stehen u.a. top, middle und bottom für die vertikale und left und right für die horizontale Ausrichtung zur Verfügung.

alt Da nicht alle Browser Bilder anzeigen können, wie z.B. Lynx, wird im alt-Attribut ein Text angegeben, der anstelle des Bildes angezeigt wird. Internet Explorer und Netscape zeigen den Text des alt-Attributs an, wenn man mit der Maus über einem Bild verweilt.

border Mit dem border-Attribut wird die Stärke des Bildrahmens in Pixeln bestimmt.

class Das class-Attribut gibt an, dass das HTML-Element einer bestimmten Style-Sheet-Klasse angehört. Beispiel: <img src=“bild.jpg“ class=“roterRahmen“>

hspace Mit hspace= [Pixel] bestimmen Sie den horizontalen Abstand zwischen einer Grafik und anderen Elementen. Dieses Attribut steht immer in Verbindung mit align=LEFT oder align=RIGHT.

id Das id-Attribut hat mehrere Aufgaben. Es wird zum einen zur Identifizierung von Stellen innerhalb eines Dokuments genutzt, die als Ziele von Links definiert worden sind. Innerhalb eines HTML-Dokuments wird ein id-Name nur einmal vergeben. Zum anderen wird das id-Attribut für Cascading Style Sheets verwendet.

ismap ismap ist ein Befehl zur Verarbeitung einer verweissensitiven Grafik. Dem Server-Rechner wird so mitgeteilt, dass es sich um eine verweissensitive Grafik (Imagemap) handelt. Beispiel: <a href=»MapName«><img src=»datei.gif« ismap></a>

lowsrc Bei großen Grafiken ist es sinnvoll, zunächst eine niedrigauflösende Grafik zu laden und anschließend erst die hochauflösende. Durch das lowsrc-Attribut bewirken Sie, dass zunächst die niedrigauflösende, kleinere Grafik geladen wird. Erst wenn die komplette Seite geladen ist, wird die hochauflösende, größere Grafik, die durch das src-Attribut defi-niert ist, geladen.

name Wenn Sie ein Skript für z.B. ein Rollover-Bild erstellen, müssen Sie ein name-Attribut angeben, über welches das Skript auf das Bild zugreifen kann,

style Das style-Attribut ermöglicht CSS-Definitionen zur Formatierung eines HTML-Elements. Darunter fallen Rahmen, Filter, Effekte und Positionen.

title Der Text, der im title-Attribut definiert ist, wird beim Verweilen mit der Maus über dem Element in einer Textbox angezeigt. Wenn title- und alt-Attribut definiert sind, wird nur der Text des title-Attributs angezeigt.

usemap Mit dem usemap-Attribut wird eine Grafik als verweissensitiv gekennzeichnet. Um dieses Attribut einzusetzen, muss zuvor eine Imagemap definiert werden. Das usemap-Attribut wird zur Nutzung von Imagemaps auf der Clientseite verwendet.

vspace Mit vspace= [Pixel] bestimmen Sie den vertikalen Abstand zwischen einer Grafik und anderen Elementen. Dieses Attribut steht immer in Verbindung mit align=LEFT oder align=RIGHT.

06_Teil_4_5 10.04.2001 13:21 Uhr Seite 245


FTPWenn Sie mit den Bordmitteln von UltraDevund Ihrem Webserver auskommen möchten,dann ist das Hochladen der Bilddateien viaFTP der einfachste Weg. Dazu werden die ein-zelnen Bilddateien zunächst mit Hilfe einesFTP-Clients hochgeladen. Gleichzeitig werdendie Pfade zu den Bildern in Ihrer Datenbankgespeichert. Sie können auf diese Weise je-dem Datensatz in Ihrer Datenbank ein Bild zu-ordnen. Wenn Sie nur eine gewisse Anzahlvon Bildern haben, die nur in Ihrer Zuordnungvariieren, macht diese Methode durchausSinn. Problematisch und vor allem unüber-sichtlich wird es, wenn Sie ständig wechselndeBilder haben.u Vorteil: Sie benötigen keine zusätzlichen

Erweiterungen. Weder für Ihren Webser-ver, noch für UltraDev.

u Nachteil: Sie können über den Browserlediglich die Zuordnung zu den Bildernspeichern.

Wenn Sie ein neues Bild verwenden möchten,müssen Sie dieses mit Hilfe eines FTP-Clients(vgl. Abb. 5) hochladen.

BLOBIhre Datenbank kann neben normalen Text-,Zahl- oder anderen Feldtypen ein Feld vomTyp Blob (OLE Objekt) enthalten (siehe Abb.6). Ein Blob (Binary Large Objects) ist einDatenbankfeld, das binäre Daten aufnehmenkann. Das heißt, Sie können Ihre Bilder direktin der Datenbank mitabspeichern. Während inden Textfelder z. B. die Bezeichnungen undSpezifikationen zu einem Produkt abgelegtsind, liegt in dem BLOB-Feld die Grafik zudem entsprechenden Produkt.

Wenn Sie allerdings in Ihrer Datenbank proDatensatz ein Bild abspeichern, wird IhreDatenbank schnell sehr groß. Und bei einergroßen Datenbank stellt sich natürlich wiederdie Frage nach der Performance. Wie Sie eineGrafik in der Datenbank speichern können,

i Abbildung 5Der FTP-Client von UltraDev

i Abbildung 6BLOBs in einer Access-Datenbank

Upload-Methoden

06_Teil_4_5 10.04.2001 13:21 Uhr Seite 246

erfahren Sie im Unterkapitel »SA-FileUp«.SA-FileUp ist eine Servererweiterung, mit deres möglich ist, BLOB-Objekte in Datenbankeneinzufügen.u Vorteile: Alle Daten werden an einem Ort,

nämlich in der Datenbank, gespeichert.Dies ermöglicht eine maximale Übersicht.Die dynamischen Seiten können vollständigüber den Browser gewartet werden.

u Nachteile: Die Datenbankgröße wächstsehr schnell stark an. Komplizierte Rea-lisierung, die durch UltraDev nicht unter-stützt wird.

Pfadangabe zum Bild in der DatenbankMeistens werden nur die Pfadangaben derBilder in die Datenbank geschrieben, das Bildselbst aber nicht. Bei dieser Methode wird dasBild als Datei auf dem Webserver gespeichertund der Pfad zum Bild in einer Datenbankabgelegt. Dadurch bleibt die Datenbankgrößegering. Da Sie bei dieser Methode das Bildmit Hilfe des HTTP-Protokolls übertragen,brauchen Sie auf der Gegenseite (auf IhremWebserver) eine Komponente, die dieseDaten wiederum als Datei speichern kann. Imnächsten Abschnitt stellen wir Ihnen eine klei-ne Übersicht an Servererweiterungen vor, diediesen Vorgang ermöglichen.u Vorteile: Sie können Ihre dynamischen

Webseiten vollständig über den Browserwarten. Die Datenbankgröße bleibt gering,da nur Texte anstelle von Bildern gespei-chert werden.

u Nachteil: Auch wenn Datensätze aus derDatenbank gelöscht werden, bleiben dieBilder auf dem Webserver gespeichert.Sollen sie wieder entfernt werden, könnensie nur über ein zusätzliches Pflegetooloder „von Hand“ gelöscht werden.

Servererweiterungen für Datei-UploadDatei-Upload-Servererweiterungen ermög-lichen es, Dateien in ein bestimmtes Verzei-chnis oder in einer Datenbank zu speichern.Darüber hinaus besitzen sie noch weitereFunktionen. Es können z. B. Beschränkungendefiniert werden, die sich auf den Dateitypbeziehen. So bestimmen Sie, dass z. B. nurJPEG- oder GIF-Dateien hochgeladen werden.Oder Sie schränken die Dateigröße ein (z. B.alle Dateien, die größer als 40 KB sind, dürfennicht hochgeladen werden).u SA-FileUp ermöglicht es dem Benutzer,

Dateien von seiner lokalen Festplatte zueinem Microsoft Internet InformationServer (IIS) zu übermitteln. Die Dateienkönnen in jedem beliebigen Format vorlie-gen, z. B. Word-Dokumente, Bilder oderTextdateien. Die Dateigröße kann bis zu 2GB betragen. Entwickler können SA-FileUpverwenden, um solche Dateien in einfacherWeise innerhalb von ASP-Applikationen zuverarbeiten. SA-FileUp enthält außerdemdie Datei-Download und -Management-Komponenten. Hiermit können Dateienzum Browser des Benutzers gesendet wer-den. Außerdem sind Dateimanipulationen,das Ändern der Rechte (ACLs) sowie dasRegistrieren von DLLs möglich.

u Asp smartUpload bietet ähnliche Möglich-keiten wie SA-FileUp:u Hochladen einer oder mehrerer Dateien

auf einen Webserveru Hochladen in eine Datenbanku Umgang mit gemischten Formularen

(Daten und Text)u Herunterladen von Dateienu Herunterladen in eine Datenbanku Beschränkung von Dateigrößen und

-typen


06_Teil_4_5 10.04.2001 13:21 Uhr Seite 247

u ASPuploadu Unterstützung von BLOBsu MacBinary Unterstützungu Hochladen von Verzeichnisse u Extrahieren von Bilddimensionen u Herunterladen von Dateien u Kompatibel zu IIS 3, IIS 4, IIS 5

(Window 2000), und PWSu Mehrere Dateien gleichzeitig hochladenu Zugriff auf Textfelder des Upload-

Formularsu Generierung von eindeutigen

Dateinamenu Dateimanager-Funktionenu Beschränkungen bezüglich Größe, Datei-

typ usw.

SA-FileUp

SA-FileUp ist eine Servererweiterung für denIIS und PWS, die es Ihnen ermöglicht, Da-teien über das Hypertext Transfer Protokoll anden Webserver zu übermitteln. Die Dateienkönnen entweder in einer Datenbank abge-legt oder als Datei in einem Verzeichnis aufdem Webserver gespeichert werden. SA-File-Up bietet ein großes Spektrum an Optionen

bezüglich des Hochladens. So können Sie mitHilfe dieser Erweiterung u.a Dateigröße undDateitypen beschränken. Der große Vorteilvon SA-FileUp ist jedoch die Tatsache, dass esfür dieses Produkt eine UltraDev-Erweiterunggibt, die es ermöglicht, mit geringem Auf-wand eine File-Upload-Seite zu erstellen.

Bei dem Thema FileUpload stößt manschnell an die Grenzen von UltraDev. So ist esbeispielsweise nur schwer möglich, Seiten zuerstellen, die Bilder direkt aus einer Daten-bank auslesen und auf der Seite anzeigen.Dazu ist immer ein wenig Programmierung imQuelltext nötig. Wer diese nicht scheut, sei andie Beispielseiten von SA-FileUp verwiesen, indenen alle Möglichkeiten der Erweiterung mitBeispielen erklärt werden.

Installation der DemoversionDie Installation von SA-FileUp gestaltet sichsehr einfach. Auf der mitgelieferten CD-ROMbefindet sich im Verzeichnis SA-FileUp eineDemoversion. Sie brauchen einfach nur aufdie Datei zu klicken, und das Programm be-ginnt sich selbst zu installieren. Damit Sie dieinstallierten Beispiele von SA-FileUp betrach-ten können, müssen Sie ein virtuelles Verzei-chnis für Ihren Webserver anlegen. Wenn Sie


Upload über http ohne ErweiterungUnter der Adresse http://www.asp101.com/articles/jacob/scriptupload.asp finden Sie einTutorium, in dem beschrieben wird, wie SieDateien hochladen können, ohne eine Erwei-terung benutzen zu müssen.

Name Internetadresse

der Erweiterung

SA-FileUp http://www.softartisans.com

ASPsmartUpload http://www.aspsmart.com/

ASPupload http://www.persits.com/

Microsoft Posting http://www.microsoft.com/Tech-

Acceptor Net/Sitesrv/Manuals/SSExpGde/

SSExpPa/setup.asp

Bezugsadressen der Servererweiterungen

oo

Demoversionauf CD-ROM

06_Teil_4_5 10.04.2001 13:21 Uhr Seite 248

die Datenbankbeispiele testen möchten, müs-sen Sie einen System DSN einrichten. LesenSie dazu bitte die Anleitung, die zusammenmit der Demoversion verschickt wurde.


System-DSN Virtuelle Verzeichnisse für den

Webserver

AccessUpload SAFileUpSamples

SAFileUpDocs

Angaben zur Trailversion auf der CD-ROMVersionsnummer 3.1.4

UltraDev-ErweiterungUm SA-FileUp in UltraDev benutzen zu kön-nen, ist noch eine Erweiterung für UltraDeverforderlich. Dank dieser Erweiterung könnenSie die Funktionalität einer File-Upload Seitemit einem Serververhalten erstellen.

Auf den Macromedia Exchange-Seiten (http://www.macromedia.com/de/exchange/ultradev/) finden Sie die Erweiterung Upload Files withSA-FileUpload als *.mxp Datei zum Herunter-laden (Abb. 7). Zum Auffinden dieser Dateisuchen Sie auf den Exchange-Seiten nach demBegriff »fileup«.

Nachdem Sie die Datei heruntergeladenhaben, installieren Sie diese mit dem Macro-media Extension Manager (Abb. 8). Wenn Siemehrere Macromedia-Produkte auf IhremRechner einsetzen, müssen Sie darauf achten,dass Sie die Erweiterung für DreamweaverUltraDev 4 installieren. Nach der Installationmüssen Sie UltraDev einmal beenden und neustarten, bevor Sie die Erweiterung einsetzenkönnen. Wenn die Installation der Erweiter-ung erfolgreich abgeschlossen ist, erscheintein zusätzliches Serververhalten bei UltraDev.

Praxisbeispiel

Schiffsdatenbank mit BildernIn dem nachfolgenden Beispiel sollen dieÜbersichts- und Updateseite einer Schiffsda-tenbank realisiert werden. Auf der Übersichts-seite soll pro Schiff ein Bild angezeigt werden.Auf der Update-Seite sollen Sie den Schiffs-namen, den Heimathafen und den Pfad zumBild ändern können.

i Abbildung 7Macromedia Exchange für UltraDev

i Abbildung 8Der Macromedia Extension Manager

06_Teil_4_5 10.04.2001 13:21 Uhr Seite 249

Beispiel für eine Anwendung mit dynami-schen Bildern

1. Erstellen der ÜbersichtsseiteZunächst erstellen Sie eine normale Übersichts-seite mit einer Datensatzgruppe, die alle Daten-sätze der Tabelle »schiffe« enthält (SELECT *FROM schiffe). Fügen Sie zunächst die Daten-sätze, die Text enthalten, auf Ihrer Seite ein.Dann fügen Sie das Serververhalten Bereichwiederholen ein, um alle Datensätze anzeigenzu lassen. Zum Schluss fügen Sie noch einenLink auf die Seite aktualisieren.asp mit demParameter id ein, der seine Werte aus demDatensatz schiff_id bezieht. Ihre Übersichtsseitekönnte dann wie in Abb. 9 aussehen.

2. Dynamische Bilder einfügenSuchen Sie sich einen Platz auf Ihrer Seite aus,an dem die Bilder angezeigt werden sollen.Dieser Platz sollte innerhalb des sich wiederho-lenden Bereiches liegen, da sonst nur das ersteBild der Datensatzgruppe angezeigt würde. Kli-cken Sie im Objektfenster auf das Grafiksymbol.Schalten Sie anschließend die Ansicht des Datei-browsers auf die Ansicht des 1 Datensatzgrup-penbrowsers um (Abb. 10). Wählen Sie denDatensatz mit dem Pfadnamen aus (schiff_pfad).Schalten Sie in die Live Data-Vorschau um undbetrachten Sie sich das Ergebnis.


i Abbildung 9Die Übersichtsseite ohne Bilder

i Abbildung 10Umschalten zwischen Datei- und Datensatzbrowser

1

06_Teil_4_5 10.04.2001 13:22 Uhr Seite 250

3. ALT-Tag des Bildes definierenAlle Bilder sollten mit einem alternativen Textversehen werden. Der alternative Text zeigt wäh-rend des Ladevorgangs des Bildes bereits denNamen an. Weiterhin ist der alternative Text fürden Inhalt des kleinen gelben Kästchens verant-wortlich, der angezeigt wird, wenn man mit demMauszeiger über die Grafik fährt. Sinnvollerweiseverwenden Sie die Schiffsnamen für diesesAttribut.

Markieren Sie das dynamische Bild und schaltenSie im Eigenschaftsinspektor auf die 2 Attri-butsansicht um. Fügen Sie dann das Attribut althinzu. Mit dem 3 Blitzsymbol öffnen Sie denDatensatzgruppenbrowser. Hier wählen Sie dasFeld schiff_name aus.


i Abbildung 11Definieren Sie das alt-Attribut dynamisch

2 3

Für Übersichtsseiten empfiehlt sich eigentlichnoch eine kleine Version des Fotos (Thumb-nail), ansonsten wird die Übersichtsseite unü-berschaubar groß. Sie können in diesemBeispiel die Bildbreite fest definieren, um einwenig Konformität in das Design zu bringen.

Update-SeitenDie Aktualisierungsfunktion der Datensätzewird mit zwei Seiten realisiert. Auf der erstenSeite (aktualisieren.asp) befindet sich einFormular. Es enthält alle Textfelder und dasDateifeld, mit dessen Hilfe Sie die Datei be-

stimmen können, die hochgeladen werdensoll. Die zweite Seite (aktualisieren_script.asp)führt alle Aktionen durch, die notwendig sind,damit das Bild in einem Verzeichnis auf demWebserver gespeichert wird und die Daten ausden Textfeldern in die Datenbank geschriebenwerden. Um die Bilddatei hochzuladen, wirddas zusätzlich installierte Serververhalten ge-nutzt. Die Daten aus den Textfeldern werdenmit Hilfe einer gespeicherten Prozedur, diesich auf der Seite aktualisieren_script.aspbefindet, in die Datenbank geschrieben.

Bilddimensionen auslesenSeiten, auf denen sich Bilder befinden, wer-den schneller geladen, wenn die Attributeheight und width angegeben werden. MitSA-FileUp haben Sie die Möglichkeit, die

Bilddimensionen auszulesen. Betrachten Siedazu das Beispiel http://localhost/SAFileUp-Samples/FileManagerSamples/FileContent/ImageProp.asp.

06_Teil_4_5 10.04.2001 13:22 Uhr Seite 251

Die Aktualisierungsseite

1. AktualisierungsformularErstellen Sie eine neue Seite (aktualisieren.asp)mit einem Formular. In dem Formular sollensich zwei Textfelder mit den Bezeichnungenschiff_name und schiff_hafen befinden. Zu-sätzlich zu den beiden Textfeldern fügen Sienoch ein 1 Dateifeld auf der Seite ein und ge-ben diesem den Namen FILE1 (Abb. 12). Um dieID an die nächste Seite zu übergeben, benötigenSie noch ein verstecktes Feld mit dem Namenschiff_id.

2. Dynamische Inhalte einfügenVerbinden Sie die beiden Textfelder in IhremFormular mit den entsprechenden Feldern inder Datensatzgruppe (Abb. 13), das Textfeldschiff_name mit dem Feld schiff_name und dasTextfeld schiff_hafen mit dem Feld schiff_hafen.Das versteckte Feld wird mit dem Feldschiff_id verknüpft.

3. FormularaktionJetzt müssen Sie angeben, welche Aktion dasFormular ausführen soll. Markieren Sie dazuden 2 <form>-Tag links unten im Tag-Selektordes Dokumentenfensters (Abb. 13). Daraufhinkönnen Sie im Eigenschaftsinspektor die Aktionangeben (Abb. 14). Geben Sie als 3 Aktion dieSeite aktualisieren_script.asp an. Wichtig istauch, dass die 4 Versand-Methode auf POSTgesetzt wird.


o Abbildung 12Das Dateifeld im Objektinspektor

i Abbildung 13Die Textfelder werden mit der Datensatzgruppeverknüpft.

i Abbildung 14Der Eigenschaftsinspektor des Formulars

1

3 54

2

06_Teil_4_5 10.04.2001 13:22 Uhr Seite 252

4. Encryption Type setzenEin weiterer Punkt, auf den Sie achten müssen,ist der Encryption Type des Formulars. Da essich bei den Bilddaten nicht um normale Text-daten, sondern um Binärdaten handelt, mussder Encryption Type auf »multipart/form-data«gesetzt werden. Sie können dies überprüfen,indem Sie auf den 5 Quick Tag Editor im Eigen-schaftsinspektor klicken (Abb. 14). Mit demQuick Tag Editor können Sie einzelne HTML-Tags innerhalb eines Dokumentenfensters bear-beiten (Abb. 15). Das heißt, Sie brauchen zumBearbeiten nicht in die Quelltextansicht wech-seln.


i Abbildung 15Der Quick Tag Editor

Die SkriptseiteDie Formularseite, die Sie soeben erstellthaben, hat noch keine Upload-Funktion. DerUpload-Prozess wird erst auf der Seite aktua-lisieren_script.asp durchgeführt. Auf dieserSeite werden alle Formularfelder der Seiteaktualisieren.asp ausgelesen und verarbeitet.

Zuerst wird auf der Skriptseite das Bild inein Verzeichnis auf dem Webserver hochgela-den. Jedes Bild wird in dem gleichen Verzei-chnis abgespeichert. Von dem Formular derVorseite wird jedoch die komplette Pfadan-gabe des Client Rechners übermittelt. Wirbrauchen allerdings nur den Namen der Da-tei. Das heißt, wir müssen den Namen aus derPfadangabe herausfiltern und dann neuzusammensetzen. Vom Formular wird z. B.folgende Pfadangabe übermittelt:

c:\grafik\neu\jpg\test.jpg

Aus dieser Pfadangabe muss der Dateinameextrahiert werden. Das Zielverzeichnis aufdem Server befindet sich direkt im Root-Ver-

zeichnis und heißt images (/images/). Durchfolgendes VBScript wir der Dateiname aus derFormularübergabe extrahiert und ein relativerPfad zur Bilddatei auf dem Server erstellt:

"images/" & Mid(upl.form("FILE1"),

InstrRev(upl.form("FILE1"), "\") + 1)

Diesen neu zusammengesetzten Pfad (images/test.jpg) können Sie nun zusammen mit denanderen Formularelementen mit einer gespei-cherten Prozedur in die Datenbank schreiben.

Beim Definieren der Parameter der gespei-cherten Prozedur dürfen Sie die Formularwerteder vorherigen Seite nicht mit dem Request-Objekt aufrufen, sondern mit upl.form(“...“).Das liegt daran, dass es sich bei dem Formularnicht um ein normales Textformular, sondernum ein Datenformular handelt. Das wiederumheißt, dass die Textfelder nicht wie gewohntausgelesen werden können. Zum Auslesen derFormularfelder benutzen Sie den Aufruf:upl.form(“...“). Mit diesen Aufruf haben SieZugriff auf alle Felder des Formulars.

06_Teil_4_5 10.04.2001 13:22 Uhr Seite 253

Erstellen der Seite aktualisieren_script.asp

1. Seite erstellen und die gespeicherteProzedur hinzufügenErstellen Sie zunächst eine Seite mit demNamen aktualisieren_script.asp. Definieren Sienun die gespeicherte Prozedur (Abb. 16). Ihreneue Prozedur wird eine 1 Aktualisierungsab-frage. Fügen Sie die Variablen 2 name, 3hafen, 4 pfad und 5 id hinzu.

2. Laufzeitwerte definierenDen 6 Laufzeitwert der Variablen name erhal-ten Sie aus dem Formular der Vorseite mit Hilfedes Aufrufs upl.form (“schiff_name“). Sie kön-nen an dieser Stelle nicht mit Request arbeiten,da es sich auf der Vorseite nicht um ein Text-formular handelt (Abb. 17).

Die 7 Variable hafen erhält ihren Wertdurch den Aufruf upl.form (»schiff_hafen«).

Im 8 Laufzeitwert der Variablen pfad findenSie den zuvor angesprochenen Filter der Pfadan-gabe wieder.

Bei der Definition der 9 Variablen id wirdder Laufzeitwert mit Eins multipliziert, um ausder Variable des Typs Variant einen Zahlwert zuerzeugen, der in das Tabellenfeld schiff_id ge-schrieben wird.

3. Upload-Serververhalten hinzufügenSie finden die SA-FileUp-Servererweiterungunter dem Menüpunkt MagicBeat·1008: Up-load Files with SA-FileUp. Nachdem Sie dieServererweiterung ausgewählt haben, erscheintein Fenster, in dem Sie den Pfad angeben müs-sen, in dem die Dateien auf Ihrem Webserverabgespeichert werden sollen (Abb. 18). WählenSie das Verzeichnis, in dem die anderen Schiffs-bilder bereits liegen.


i Abbildung 16Die gespeicherte Prozedur aktualisieren

i Abbildung 17Variablen für die Prozedur

i Abbildung 18Geben Sie das Verzeichnis an, wo Ihre Dateien späterabgelegt werden sollen.

1

2

34

5

987

6

06_Teil_4_5 10.04.2001 13:22 Uhr Seite 254

4. Einen Link hinzufügenAbschließend fügen Sie auf der Seite noch einenLink ein, der den Besucher zurück auf die Über-sichtsseite führt. Zusätzlich können Sie auf die-ser Seite noch eine Bestätigung anbringen, dassdie Daten erfolgreich übermittelt wurden.


DateitypenbeschränkungDurch Hinzufügen weniger Zeilen Quelltextkönnen Sie definieren, welche Dateitypenhochgeladen werden dürfen. In diesem Bei-spiel wird das Format auf JPEG-Dateien be-schränkt.

Im ersten Teil Ihres Seitenquelltextes erset-zen Sie den Standardquelltext, der durch dieServererweiterung eingefügt wurde, durch fol-genden:

<%@LANGUAGE="VBSCRIPT"%>

<!—#include file="../Connections/schiffe.asp" —>

<%

Dim FName , FCONT

‘ —- Objekt Softartisans.FileUp erzeugen

Set upl = Server.CreateObject("SoftArtisans.FileUp")

upl.Path = "c:\inetpub\wwwroot\ud-buch\schiffe\images"

‘—- Dateinamen extrahieren

FName = Mid(upl.UserFilename, InstrRev(upl.UserFilename, "\") + 1)

‘—- Dateityp extrahieren

FCONT = upl.ContentType

‘MagicBeat Server Behavior - 1008 - by Jag S. Sidhu - www.magicbeat.com

%>

In dieser Passage des Quelltextes werden derDateityp und der Dateiname extrahiert.

In der gespeicherten Prozedur können Siejetzt die Zuweisung der Variablen schiff_pfad("images/" & Mid(upl.form("FILE1"),

InstrRev(upl.form("FILE1"), "\") + 1))

durch "images/" & Fname ersetzen.

Hinter dem BODY-Tag müssen Sie dieFallunterscheidung einbauen, welcheentscheidet, ob ein Bild hochgeladen werdendarf oder nicht.

97

06_Teil_4_5 10.04.2001 13:22 Uhr Seite 255

<%

' —- Fallunterscheidung jpg oder nicht

Select Case LCase(FCONT)

Case "image/pjpeg" , "image/jpeg"

upl.Save

Response.Write "" & FName & " wurde gespeichert."

Case Else

Response.Write "" & "Sie können nur jpg Dateien hochladen. "

'Response.End

End Select

%>


In der Zeile upl.Path = »c:\....« wird der Pfadeingetragen, in dem die Bilder hochgeladenwerden sollen.

Ein weiterer Fehler kann auftauchen, wennSie nicht die richtige Reihenfolge beim Erstel-len der einzelnen Funktionalitäten der Seiteeinhalten.

Wenn Sie z.B zuerst den FileUpload unddann die gespeicherte Prozedur einbinden,wird die gespeicherte Prozedur vor der Erzeu-gung des Upload-Objekts (Set upl = Server.-

CreateObject(»SoftArtisans.FileUp«)) aufgeru-fen. Da innerhalb der gespeicherten Prozedurjedoch Anfragen an das upl-Objekt gestelltwerden, wird die Prozedur nicht ausgeführt.

Besonders wichtig ist der Encryption Typeund die Versandmethode des Formulars. Ach-ten Sie darauf, dass der enctype auf»multipart/form-data« und die Versandmet-hode auf POST eingestellt ist.

So könnte der Quelltext der fertigen Skript-Seite mit Dateinamenbeschränkung aussehen:

BugsAchtung! An einigen Stellen können sich klei-ne Bugs einschleichen. Wenn Sie das Server-verhalten SA-FileUp alleine auf einer Seite ein-fügen, erscheint es anschließend im FensterSerververhalten. Sie können den Upload-Pfad durch Doppelklick auf das Serverver-

halten nachträglich ändern. Benutzen Sie aberzusätzlich noch eine gespeicherte Prozedur aufderselben Seite, verschwindet das Serverhaltenaus der Serververhaltenpalette, obwohl es imQuelltext hinzugefügt wurde. Wenn Sie den-noch nachträglich den Pfad ändern wollen,müssen Sie ihn im Quelltext ändern.

<%



upl.Save

'MagicBeat Server Behavior - 1008 - by Jag S. Sidhu - www.magicbeat.com

%>

06_Teil_4_5 10.04.2001 13:22 Uhr Seite 256

<%@LANGUAGE="VBSCRIPT"%>

<!—#include file="../Connections/schiffe.asp" —>

<%

Dim FName , FCONT

‘ —- Objekt Softartisans.FileUp erzeugen



‘—- Dateinamen extrahieren

FName = Mid(upl.UserFilename, InstrRev(upl.UserFilename, "\") + 1)

‘—- Dateityp extrahieren

FCONT = upl.ContentType

‘MagicBeat Server Behavior - 1008 - by Jag S. Sidhu - www.magicbeat.com

%>

<%

‘—- LAufzeitwerte für gespeicherte Prozedur definieren

if(upl.form("schiff_name") <> "") then aktualisieren__name = upl.form("schiff_name")

if(upl.form("schiff_hafen") <> "") then aktualisieren__hafen =

upl.form("schiff_hafen")

if("images/" & FName <> "") then aktualisieren__pfad = "images/" & FName

if(upl.form("schiff_id")*1 <> "") then aktualisieren__id = upl.form("schiff_id")*1

%>

<%

‘ —- Gespeicherte Prozedur

set aktualisieren = Server.CreateObject("ADODB.Command")

aktualisieren.ActiveConnection = MM_schiffe_STRING

aktualisieren.CommandText = "UPDATE schiffe SET schiff_name = ‘" + Replace(aktuali

sieren__name, "‘", "‘’") + "‘, schiff_hafen = ‘" + Replace(aktualisieren__hafen, "‘",

"‘’") + "‘, schiff_pfad = ‘" + Replace(aktualisieren__pfad, "‘", "‘’") + "‘ WHERE

schiff_id = " + Replace(aktualisieren__id, "‘", "‘’") + " "

aktualisieren.CommandType = 1

aktualisieren.CommandTimeout = 0

aktualisieren.Prepared = true

aktualisieren.Execute()

%>

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>


06_Teil_4_5 10.04.2001 13:22 Uhr Seite 257

<body bgcolor="#FF6600" text="#FFFFFF" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF">



<%

‘ —- Fallunterscheidung jpg oder nicht

Select Case LCase(FCONT)

Case "image/pjpeg" , "image/jpeg"

upl.Save

Response.Write "" & FName & " wurde gespeichert."

Case Else

Response.Write "" & "Sie können nur jpg Dateien hochladen. "

End Select

%>



<a href="uebersicht.asp"><img src="images/nav/overview.gif" width="22" height="23"

border="0"></a>

</body>

</html>


06_Teil_4_5 10.04.2001 13:22 Uhr Seite 258

Bilder und Datenbanken · 2020. 11. 20. · usemap Mit dem usemap-Attribut wird eine Grafik als...

Documents

Transcript of Bilder und Datenbanken · 2020. 11. 20. · usemap Mit dem usemap-Attribut wird eine Grafik als...