Workshop: Gästebuch-Frontend

Okay. Ich denke wir legen mal ganz einfach los.

Wir wollen uns also damit beschäftigen ein Gästebuch zu planen, zu designen und zu programmieren.

Punkt 1: Der Plan
Welche Dinge wollen wir denn in unser Gästebuch mit aufnehmen. Warscheinlich ersteinmal den Namen des Besuchers. Die E-Mail Adresse wäre nicht schlecht, und wenn er uns die URL seiner Homepage da lassen will, ist das auch gut. Und natürlich der Eintrag selber.
Das sind dann schon mal 4 Eingabefelder. Wovon 2 sogenannte Pflichtfelder dabei sind: der Name und der Eintrag, die ausgefüllt werden müssen.
Wir brauchen dann noch 2 Button um das ausgefüllte Formular abzuschicken und die Eingaben zurückzusetzten. Der Button zum Zurücksetzten muss nicht unbegingt.
Natürlich brauchen wir noch irgenteine Art von Datenverarbeitung, damit die Einträge auch irgentwo gespeichert werden. Darauf werde ich auf Anfrage speziell eingehen.

Punkt 2: Look and Feel
Jeder der jetzt mit diesem Workshop ein GB baut wird seine eigenen Vorstellungen zum Design haben.
Nur einige Dinge sind im Prinzip immer gleich:
1. Die Pflichtfelder sollte irgentwie gekennzeichnet werden. z.B. Ein [*] am Anfang oder am Ende des Feldes. Man kann sich aber auch mal was neues einfallen lassen! Ich wie z.B. eine kleine Grafik. Diese "Hinweise" sollten zwar ins Augefallen, aber nicht hervorstechen!
2. Die Reihenfolge in der die Eingabefelder sollte so gewählt sein, das die Eingabe intuitiv erfolgt. Also Name zuerst, dann E-Mail und HP und dann der Eintrag.
Die Button müssen nicht unbedingt wirkliche Buttons sein. Mit JavaScript kann man praktisch fast jedes HTML-Element in einen Button verwandeln.
3. Die Darstellung der einzelnen Beiträge erfolgt auf 2 Arten.
Entweder man listet sie direkt unter der Eingabemaske auf, oder man listet sie auf einer Extraseite auf. In jedemfall sollte man die letzten Beiträge zuerst auflisten!

Punkt 3: Das Programmieren
Jetzt wirds interessant. Ich denke jeder von euch hat schon HTML erfahrungen gemacht. Am besten ist es, wenn Ihr euch jetzt mal die das Zip-File runterladet und euch mal die 3 Dateien dadrinn anschaut.
Im Prinzip wäre dieses Frontend voll funktionsfähig und einsatzbereit. Nur wer versucht die Daten mit dem Button abzuschicken, wird aif einen Fehler rennen, weil es die ASP-Datei zum schreiben der Einträge nicht gibt.
Aber wer will kann diese ASP-Datei im nächsten Teil ja selber schreiben

Jetzt aber zum Quelltext. Sicher ist euch schon aufgefallen, dass ich bei vielen Tags die Attribute "name" und "id" verwende. name gebrauche ich, wenn ich dieses Element über JavaScript ansprechen will. id ist der Name für das Element in CSS.
Man sollte es sich ruhig angewöhnen, diese beiden Attribute immer mit zuschrieben.
Im "form"- Tag stehen 2 wichtige Attibute: "method" und "action".
method gibt an mit welcher Methode die Daten verschickt werden. In unserem Beispiel werden die Daten mit "post" abgeschickt. Eine weitere Art zum Verschicken währe "get". Wobei get nicht die beste Methode ist, da hierbei die Formulardaten im Klartext über den Querrystring (erkläre ich gleich noch) übertragen werden.
Schaut euch erstmal die Datei "html_ohne_css.htm" an.
Sieht ja ehrlich gesagt ganz schon "*******" aus, oder?
Deswegen wird im Header auch eine CSS-Datei eingebunden, die die gesammte Formatierung der Seite vornimmt. Eine gute Einführung in CSS gibt es in Self HTML

Ich würde jetzt vorschlagen, jeder Bastelt mal mit den Files etwas rum, um sich mit dem Quelltext vertraut zu machen.

--- Fortsetzung folgt ---

Teil 2:

So, weiter gehts!

Im ersten Teil des Workshops haben wir uns ein Formular gebastelt, das die Eingaben entgegennimmt.

Heute werden wir die Daten aus dem Formular weiter verarbeiten.
Das passiert in 2 Schritten:
1. Daten in die Datenbank schreiben
2. Daten zum Anzeigen wieder rausholen

In Zeile 1 der write_gb.asp steht "Option Explicit"
Das bedeutet, das auf Gross/Kleinschreibung bei Variablennamen geachtet wird. Es muss auch jede Variable mit "Dim" deklariert werden.
Das passiert in den Zeilen 2 - 6

In den Zeilen 8 - 16 werden Variablen mit Werten gefüllt.

Die Zeilen 18 - 22 sind eine If-Abfrage.
Wenn in der Variable der Wert "http://"; gefunden wird dann bleibt alles beim Alten. Ansonsten hänge das "https://www.study-board.de; davor.
Das das "https://www.study-board.de; ist absoulut wichtig, weil sonst in der nächsten Seite eine Funktion nicht funktioniert.

In Zeile 24 benutze ich den Replace Befehl um in der Variavle "Eintrag" einen String gegen einen anderen auszutauschen.
Gesucht wird ein Zeilenumbruch, und wird gegen ein
"<br>" ausgetauscht. Ich mache das damit der Eintrag auch so dargestellt wird wie er eingegeben wurde. Würde man das nicht tun, dann würde der Eintrag an einem Stück ohne Zeilenumbrüche rausgerotzt.

Zeile 27 enthält den Connection-String. Den brauche ich um eine Verbindung zur Datenbank herstellen zu können.

In den Zeilen 29 und 30 erstelle ich mir eine Connection-Objekt und ein Recordset-Objekt auf dem Webserver.

Zeile 32-33 enthält meine SQL-Anweisung. Es ist erstmal nur ein String.

Jetzt gehts alles ganz schnell:
in Zeile 35 wird die Verbindung zur Datenbank hergestellt
in Zeile 36 die SQL-Anweisung ausgeführt, und
in Zeile 37 wird die Verbindung wieder geschlossen.
Das Schliessen der Verbindung ist absolut wichtig! Vergesst Ihr das mal, kann es sein, das der Server im laufe der Zeit soviele Verbindung offen hat, bis er einfach anhält!

Der Rest der Datei ist "nur" noch ganz einfaches HTML.
Die Werte der Variablen werden nocheinmal zur Ansicht ausgegeben, Und das wars.

War doch gar nicht so schwer, oder?

-- Fortsetztung folgt ---

Teil 3:

So jetzt müssen wir nur noch die Daten aus der Datenbank wieder rausholen.

Wie in Teil 2 wird also eine Verbindung zur Datenbank hergestellt. Nur dieses mal werden die Daten gelesen.
Deswegen brauchen wir auch dieses mal das Recordset-Objekt.

Bis zur Zeile 15 der Datei "read_book.asp" dürfte alles bekannt sein.
In Zeile 15 wird jetzt nicht mit "conn.Execute" gearbeitet, sondern über das Recordset-Objekt.

In der SQL-Anweisung steht Übersetzt:
wähle alles aus der Tabelle Eintraege und sortiere das ganze absteigend nach dem Feld ID
Das Ergebnis dieser Anweisung ist, dass alle Einträge jetzt im Recordset sind.

Jetzt wird die HTML-Seite gebaut.

In Zeile 25 startet eine Schleife die solange durchläuft, bis das Ende des Recordset oder der Anfang des Recordset erreicht ist. Jetzt fragt sich sicher jemand:
Warum soll ich abprüfen, ob der Anfang erreicht ist??
Ganz einfach, wenn keine Einträge im Recordset sind, und man versucht Daten da raus zu holen gibts einen üblen Fehler.

In den Zeilen 26 - 47 wird die Tabelle mit Zellen gefüllt, und in den Zellen die Werte aus den Datanbankfeldern
"=rs.fields("Datenbakfeld")

Wirklich absolut super wichtig ist die Zeile 48
Da wird dem Recorset gesagt, das es jetzt den nächsten Datensatz anspringen soll.

In Zeile 49 folgt das "Loop" das in die Zeile 25 zurückspringt. Das geschieht dann solange, bis das Ende des Recordset erreicht ist.
Würde das "rs.MoveNext" nicht da sein, würde das Ende des Recordset niemals erreicht werden und man hätte sich eine sehr schöne Endlosschleife gebaut, die, weil alle Anweisungen ja auf dem Server laufen, nur duch einen Neustart des Serverdienstes wieder beendet werden kann. Wiedermal eine sehr effektive Art, wie man einen Webserver "OK-Schlägt".

Nun wird in den Folgenden Zeilen das HTML-Document beendet, die Verbindungen zur Datenbank beendet, und die Variablen zurückgesetzt.

Und nu isses komplett fertig!

Für einen Fortgeschrittenen ASP-Programmierer sollte das alles nicht mehr als 15 min Abeit sein!

Ich hoffe Ihr konntet was mit diesem Workshop anfangen.
Wenn Jemand jetzt ein richtiges Hyper-Mega-Gästebuch bauen will, die Grundlage dazu bietet dieser Workshop!

Nur eins noch zum Schluss, wer ASP Programmieren will braucht dazu einen IIS (Internet Information Server)!
Der ist eigentlich bei Windows dabei. Ab Windows 2K Prof in der Version 5.0
Kann ganz easy nachinstalliert werden, und ist super einfach zu konfigurieren!

--- Nachtrag ---
Die Funktion die in Teil 2 angesprochen wurde...
aus der eMail Adresse und der URL der Homepage wird auf der Ausgabeseite automatisch ein Link generiert.
Ohne das "http://" vor einer url würde ein falscher Link rauskommen!

http://www.nicebook.tk

Das kann man alles mit ein bischen ASP, HTML, CSS und VBScript machen!

Es kommt sicher bald wieder was neues. (muss mir erstmal wieder was einfallen lassen)

Die Response auf den letzten Workshop war ja ganz gut.
Und der Bedarf für Workshops ist sicher da *ggg*

Ich mach mir mal Gedanken und poste es dann hier

Jeder der mit Windows ab der Version 98SE arbeitet hat auf jeden Fall schon alles was er für einen eigenen Webserver an Software braucht.

Ab 98SE gibt es den sog. Personal Web Server. Allerdings eignet sich der nicht wirklich gut um Web-Projekte zu realisieren.

Ich empfehle den InternetInformation Server 5.0 der ab
Windows 2000 Professional ausgeliefert wird.

Über die Systemsteuerung kann dieser Installiert werden:
Systemsteuerung -> Software -> Windowskomponenten
In der folgenden Liste einfach links neben "Internet-Informations Dienste (IIS)" einen Hacken machen.
Es werden dann alle nötigen Komponenten von der Windows CD installiert.

Wenn dieser Schritt erfolgreich war, dann erscheint im Startmenü unter Verwaltung nun ein Programm "Internet Dienstemanager"
Diese Verwaltungskonsole ist ab jetzt dafür zuständig, neue Webseiten anzulegen und zu administrieren.

Am besten ist es, wenn man sich auf der Festplatte ein Verzeichnis anlegt in dem alle Webprojekte gespeichert werden. In der Verwaltungskonsole legt man sich dann ein neues "Virtuelles Verzeichnis" an. Ein Assistent hilft dabei.

Die voreingestellten Startseiten des IIS sind "default.htm" und "default.asp" man kann sich aber auch jede andere Seite als Startseite einrichten. Das macht man über die Eigenschaften des jeweiligen Virtuellen Verzeichnisses, im Menü "Dateien".

Das wars schon.

Die Webseiten werden jetzt über den Internet Explorer aufgerufen.
http://rechnername/web
- Das http:// kann man weglassen, das bastelt sich der IE sowieso davor, wenn nix anderes angegeben wird.
- rechnername, sollte klar sein, ist der Name des Computers im Netzwerk auf dem der IIS installiert wurde. Ruft man die Webs direkt auf dem IIS auf, kann man auch "localhost" also Rechnername eingeben.
- web ist der Name des Virtuellen Verzeichnisses.

!!!
Es kann übrigens auch auf einem IIS ein Perl Interpreter eingebunden werden. Das heisst wer will kann auf einem IIS auch PHP-Seiten laufen lassen
!!!

Eine Besonderheit des IIS ist die Datei "global.asa"

Diese Datei wird immerdann ausgeführt, wenn eine neue Session auf einem Web beginnt. Sie muss in VBScript geschrieben werden und macht keine Ausgaben auf dem Bildschirm.

-----------------------------------------
Sorry, falsch gepostet.