Einleitung. Vorbemerkungen. Schritt 1 Ergebnistabelle erzeugen

Transkript

1 Einleitung Im Unterschied zu den Übungen "PHP-Navigation" und "Fotogalery" wird bei dieser Aufgabe keine Templatebzw. Platzhaltertechnologie eingesetzt, sondern eine reine Mischtechnologie: HTML-Code, erstellt in einer Phase 1 wird in einer Phase 2 Schritt für Schritt mit PHP-Code "angereichert". Ergebnis der Phase 1 ist eine (fast) reine HTML-Datei. Der Webdesigner hat sozusagen seine Arbeite getan, das Layout des Gästebuches ist fertiggestellt. Nun beginnt die Arbeit des PHP-Programmierers. Diese Arbeitsteilung zwischen Designer und Programmierer soll an dieser Stelle natürlich rein symbolisch verstanden werden. Zumindest in dieser Übung handeln beide, Designer und Programmierer, in Personalunion. Vorbemerkungen Erstellen Sie den folgenden Code in der Datei...\guestbook\index.php. Starten Sie ggf. den Apache- und den MySql-Server. Erstellen Sie ggf. auf der MySql-Konsole die Datenbank db24778 Tragen Sie ggf. in der Datei einstellungen.inc.php den benötigten Tabellennamen ein. Erzeugen Sie ggf. die benötigte MySql-Tabelle (Aufruf der Datei...\guestbook\create-table im Webbrowser). Bei der Realisierung der einzelnen Schritte werden ständig Datensätze innerhalb der Gästebuchtabelle angelegt. Sie können diese bei Bedarf löschen, indem Sie im Webbrowser den Skript.../guestbook/admin/ aufrufen. Schritt 1 Ergebnistabelle erzeugen (Siehe auch Dokument Teillistings für Übung 6 Listing 1) Schreiben Sie den erforderlichen Code unter Beachtung der folgenden Hinweise: öffnendes <php? und schließendes?> schreiben (in zwei Zeilen) PHP-Kommentare schreiben. Damit erhalten Sie einen groben Überblick über die vorbereitenden Hauptschritte, die in diesem Skript realisiert werden sollen. öffnendes <html> und schließendes </html> schreiben (in zwei Zeilen) öffnendes <head> und schließendes </head> schreiben (in zwei Zeilen), anschließend die weiteren Angaben für den head-bereich, also den title und den Link auf die CSS-Datei. öffnendes <body> und schließendes </body> schreiben (in zwei Zeilen) öffnendes <center> und schließendes </center> schreiben (in zwei Zeilen) usw., also immer erst einleitendes und schließendes Tag, danach erst Elemente innerhalb der Tags. Im Webbrowser testen. So oft wie möglich (und sinnvoll). <?php //Wichtige Variablen laden: //Positionszähler für Seitensteuerung (Blättern) bei erstem //Sktriptaufruf initialisieren: /*Verbindung zur Datenbank herstellen /ACHTUNG: vor dem Hochladen auf den Kurs-Server muss in der /Datei 'einstellungen.inc.php' der Wert für '$passwort' auf 'phpmysql' / eingestellt werden. */ //Anzahl der Datensätze ermitteln: //Links für das Blättern definieren:?> <html> <head> R.-P. Keil Übung 6 - Datenbankgestütztes Gästebuch - Schrittanleitung / Seite 1 von 7

2 <title>gästebuch</title> <link rel='stylesheet' href='formate.css' type='text/css'> </head> <body bgcolor='#c0dcc0'> <center> <h1>gästebuch</h1> <p>x Beiträge insgesamt (aktuelle zuerst)</p>  <table border=0 align='center' width='85%' cellspacing='3' cellpadding='3' class='tabtext' bgcolor='#aa9f55'>  <tr> <td width='50%' align='left' bgcolor='#aa9f55'> //Ggf. Link für das Rückwärtsblättern erzeugen: <td width='50%' align='right' bgcolor='#aa9f55'> //Ggf. Link für das Vorwärtsblättern erzeugen:   <tr bgcolor='#fffbf0'> <td colspan='2'> <b>name:</b> <?php echo $name;?> <b>datum:</b> <?php echo $datum;?> <?php echo $ ;?> <hr size='1' noshade> <?php echo $beitrag;?>   <tr> <td width='50%' align='left' bgcolor='#aa9f55'> //Ggf. Link für das Rückwärtsblättern erzeugen: <td width='50%' align='right' bgcolor='#aa9f55'> //Ggf. Link für das Vorwärtsblättern erzeugen:  </table>  </center> </body> </html> //DB-Verbindung schließen: Nach erfolgreicher Eingabe des Codes sollte sich in etwa folgendes Bild ergeben: R.-P. Keil Übung 6 - Datenbankgestütztes Gästebuch - Schrittanleitung / Seite 2 von 7

3 Schritt 2 Formular erzeugen (Siehe auch Dokument Teillistings für Übung 6 Listing 2) Mit diesem Schritt wird unterhalb der Ergebnistabelle das Formular für die Erstellung eigener Beiträge durch Besucher erstellt. <h2>eigenen Beitrag verfassen:</h2> <p>(fettgedruckte Felder müssen ausgefüllt werden!)</p>  <form action=<? echo $PHP_SELF?> method='post'>  <input type='hidden' name='go' value='1'> <table border='0' align='center' width='85%' class='tabtext' cellpadding='3' cellspacing='3' bgcolor='#aa9f55'> <tr bgcolor='#aa9f55'> <td><b>name:</b> <td>  <input type='text' name='name' size='50'> <tr bgcolor="#aa9f55"> <td> <td>  <input type='text' name=' ' size="50" maxlength="s"> <tr bgcolor="#fffbf0"> <td valign=top><b>beitrag:</b> <td>  <textarea name='beitrag' cols='80' rows='10' class='tabtext'></textarea> <tr> <td COLSPAN='2' ALIGN='CENTER' bgcolor="#aa9f55"> <input type='submit' value='abschicken'> </table> </form>  R.-P. Keil Übung 6 - Datenbankgestütztes Gästebuch - Schrittanleitung / Seite 3 von 7

4 Das Formular kann nun insgesamt getestet werden. Schritt 3 - vorbereitenden PHP-Code Tragen Sie bei den einzelnen Kommen den entsprechenden Code ein: Unter Kommentar "//Wichtige Variablen laden:" include ("einstellungen.inc.php"); echo "TableName: $TableName"; Die echo-anweisung kann nach dem Testen gelöscht werden. Unter Kommentar "/*Verbindung zur Datenbank herstellen:..." $fehlermeldung = "Fehler beim Konnektieren des or die($fehlermeldung); $fehlermeldung = "Fehler bei Auswahl der Datenbank or die($fehlermeldung); Unter Kommentar //DB-Verbindung schließen: (am Ende des Skriptes) folgenden PHP- Code: mysql_close(); Unter Kommentar "//Anzahl der Datensätze ermitteln:" $ResultatAlle = mysql_query ("SELECT ID from $TableName"); $AnzahlEintraege = mysql_num_rows($resultatalle); echo "AnzahlEintraege: $AnzahlEintraege<br>"; Die echo-anweisung kann nach dem Testen gelöscht werden. Unter Überschrift "Gästebuch" das Zeichen X ersetzen durch: <?php echo $AnzahlEintraege;?> Schritt 4 - Formulardaten senden/in DB schreiben: Mit diesem Schritt wird erreicht, dass durch das Formular an den Webserver gesendeten Daten in die Datenbank geschrieben werden Schreiben Sie hinter den Kommentar //Daten in Datenbank schreiben: den folgenden Code: $datum = date ("Y-m-d"); mysql_query ("INSERT INTO $TableName (name, ,datum,beitrag) VALUES ('$name','$ ','$datum','$beitrag')"); Schritt 5 - Ergebniszeilen auslesen Schreiben Sie hinter den HTML-Kommentar  folgenden PHP-Code: //Ausgabe des Tabelleninhaltes: $sql = "SELECT * FROM $TableName ORDER BY ID DESC"; $Resultat = mysql_query ($sql); while ($zeile=mysql_fetch_array($resultat)) { R.-P. Keil Übung 6 - Datenbankgestütztes Gästebuch - Schrittanleitung / Seite 4 von 7

5 echo $zeile["id"]; } In der Browseransicht ist nun oberhalb der Ergebnistabelle eine absteigende Zahlenreihe zu sehen. Das ist natürlich noch nicht das, was herauskommen soll. Die prinzipielle Funktionsfähigkeit der Schleife ist jedoch nachgewiesen. Es kommt nun darauf an, den Inhalt der einzelnen Zeilen der MySql-Tabelle im Browser an der richtigen Stelle anzuzeigen. Ein Teil dieser Arbeit ist bereits erledigt. Im Block, der mit  und  umschlossen ist, sind PHP-Inseln für eine korrekte Ausgabe enthalten (z.b. <?php echo $name;?> für die Anzeige des Namens). Ändern Sie die Schleifenanweisung echo $zeile["id"]; um in $name = $zeile["name"]; Nun muss die schließende geschweifte Klammer der Schleife noch hinter den Kommentar  verschoben werden, da ja bei jedem Schleifendurchlauf eine Ergebniszeile erzeugt werden soll. Der HTML-Block zur Definition einer Ergebniszeile muss also Bestandteil des Schleifenkörpers werden. Dazu wird unterhalb des Kommentars  die PHP-Insel <?php }?> zur Ausgabe einer geschweiften Klammer eingefügt. Jetzt muss natürlich das bisherige Schleifenende noch gelöscht werden. Testen Sie den aktuellen Arbeitsstand im Webbrowser, indem Sie verschiedene Namen eingeben und "Abschicken" betätigen. Es sollten jetzt die eingegebenen Namen an der richtigen Stelle in der Ergebnisliste erscheinen. Nun werden unterhalb der Anweisung $name = $zeile["name"]; noch die Werte für die Variablen $ , $datum und $beitrag aus der MySql-Tabelle gelesen: $ = $zeile[" "]; $datum = $zeile["datum"]; $beitrag = $zeile["beitrag"]; Testen Sie den aktuellen Arbeitsstand im Webbrowser, indem Sie Namen, -Adressen und Textbeiträge eingeben und jeweils "Abschicken" betätigen. Es sollten jetzt alle Angaben an der richtigen Stelle in der Ergebnisliste erscheinen. Schritt 6 - Realisierung der Seitensteuerung und Blätterfunktion Stellen Sie zunächst sicher, dass sich ca. 25 bis 30 Datensätze in der MySql-Tabelle befinden (ggf. weitere Datensätze abschicken). Mit den folgenden Schritten sollen die Anzeige der Datensätze pro Seite limitiert und eine Blätterfunktion realisiert werden. Die SQL-Anweisung zur Auswahl der anzuzeigenden Datensätze muss um den fett gedruckten Anteil ergänzt werden: SELECT * FROM $TableName ORDER BY ID DESC LIMIT $pos,$beitraegeproseite Damit wird ab der Position $pos eine Anzahl Datensätze selektiert, die dem Inhalt der Variablen $BeitraegeProSeite entspricht. $BeitraegeProSeite wird in der Datei einstellungen.inc.php festgelegt. Die Variable $pos ist beim ersten Aufruf des Skriptes noch nicht gesetzt. Deshalb muss unterhalb des Kommentars //Sktriptaufruf initialisieren noch eingefügt werden: if(isset($pos) == 0) { $pos = 0; } Alle weiteren Werte von $pos ergeben sich weiter unten durch Realisierung der Blätterfunktion. Tragen Sie dazu unterhalb des Kommentars //Links für das Blättern definieren: ein: $LinkFruehere = "<a href=".$php_self. "?pos=".($pos + $BeitraegeProSeite). "><&lt Frühere Einträge</a>"; $LinkSpaetere = "<a href=".$php_self. "?pos=".($pos - $BeitraegeProSeite). ">Spätere Einträge >&gt</a>"; Damit werden Links erzeugt, mit denen sich das Skript selbst aufruft und dabei jeweils einen numerischen Wert als Argument pos übergibt. Testen Sie das Zwischenergebnis im Webbrowser. Nun müssen diese Links noch an den vorgesehenen Stellen im Kopf und Fuß der Ergebnistabelle eingefügt werden: R.-P. Keil Übung 6 - Datenbankgestütztes Gästebuch - Schrittanleitung / Seite 5 von 7

6 Tragen Sie in der oberen Seitensteuerung unterhalb des Kommentars //Ggf. Link für das Rückwärtsblättern erzeugen: ein*: echo $LinkFruehere; (* Achten Sie dabei, dass es sich einschließlich des Kommentars um PHP-Code handelt!) Testen Sie das Zwischenergebnis im Webbrowser. Wenn Sie ganz nach links blättern werden Sie feststellen, dass keine Ergebnisdatensätze mehr angezeigt werden. Wenn links keine Datensätze mehr folgen, sollte der Link zum Rückwärtsblättern also gar nicht erst angezeigt werden. Das erreichen Sie mit folgender Modifikation: //Ggf. Link für das Rückwärtsblättern erzeugen: if ($AnzahlEintraege > $pos + $BeitraegeProSeite) { echo $LinkFruehere; } Ein Test im Webbrowser sollte nun zeigen, dass "am linken Anschlag" der Link auf der letzten Ergebnisseite nun wie gewollt nicht mehr angezeigt wird. Möglicherweise ist Ihnen beim Testen auch aufgefallen, dass mit jedem Klick auf den Blätterlink ein neuer Datensatz angelegt wird. Wie das verhindert werden kann, sehen Sie weite unten. Realisieren Sie aber zunächst am Beispiel des Rückwärtsblätterns das Vorwärtsblättern in der oberen Seitensteuerung und übertragen Sie es anschließend in die untere Seitensteuerung. Die Bedingung für das Vorwärtsblättern lautet: $pos - $BeitraegeProSeite >= 0 Testen Sie die gesamte Blätterfunktion im Webbrowser. Testen Sie es auch mit einer geänderten Einstellung in der Datei einstellungen.inc.php. Reduzieren Sie bei Bedarf die Anzahl an Datensätzen in der MySql-Tabelle auf ca. 25. Schritt 7 - Anlegen neuer Datensätze beim Blättern verhindern Dafür zuständig ist das versteckte Formular-Textfeld mit dem Namen go (s. Quelltext des Formulars). Dieses ist per Voreinstellung auf den Wert 1 gesetzt (value='1'). Die dieses Textfeld repräsentierende Variable $go wird nur gesetzt, wenn zuvor der Absenden-Button des Formulars betätigt wurde. Das ist nicht der Fall, wenn lediglich die Blätterfunktion verwendet wurde. Mit dem folgenden if-konstrukt wird realisiert, dass ein neuer Datensatz wirklich nur dann angelegt wird, wenn zuvor auf "Absenden" geklickt wurde. Zusätzlich wird getestet, ob bei "Name" und bei "Beitrag" etwas eingegeben wurde. Wenn nicht, wird mittels einem Stück eingebettetem JavaScript-Code eine entsprechende Meldung angezeigt. Ersetzen Sie mit dem folgenden Code das bisher unter dem Kommentar //Daten in Datenbank schreiben stehende (Siehe auch Dokument Teillistings für Übung 6 Listing 3): //Wenn Formular abgesendet wurde: if ($go == 1) { //Wenn eines der erforderlichen Eingabefelder leer ist Meldung anzeigen. //Diese wird mittels JavaScript erzeugt: if ($name == "" $beitrag == "") {?> <script language = 'JavaScript'> window.alert('bitte alle erforderlichen Felder ausfüllen.'); </script> <?php } else { //Wenn alle erforderlichen Eingabefelder gefüllt sind und auf "Absenden" //geklickt wurde, Übernahme in Datenbank (neuer Datensatz): $datum = date ("Y-m-d"); mysql_query ("INSERT INTO $TableName (name, ,datum,beitrag) VALUES ('$name','$ ','$datum','$beitrag')"); } //ENDE if } //ENDE if R.-P. Keil Übung 6 - Datenbankgestütztes Gästebuch - Schrittanleitung / Seite 6 von 7

7 Schritt 8 - Gesamttest und Hochladen auf den öffentlichen Server Testen Sie den vorhandenen Arbeitsstand im Webbrowser, auch mit unvollständigen Eingaben. Für diesen Fall müsste die o.g. Fehlermeldung erscheinen. Das Blättern sollte nun ohne Neuanlegen von Datensätzen möglich sein. Jetzt muss noch dafür gesorgt werden, dass das Gästebuch von Ihrer Internetpräsenz aus geöffnet werden kann. Ändern Sie dazu in der Hauptvorlage-Datei tpl.htm der Navigationsübung (Übung 2) den Gästebuchlink wie folgt: <a href='guestbook' target='_blank'> Wenn alles funktioniert, können Sie das gesamte Verzeichnis.../guestbook und die geänderte Datei tpl.htm per FTP auf den Kursserver laden. Zuvor muss aber in der Datei einstellungen.inc.php noch das Passwort geändert werden. Vor dem ersten Test auf dem öffentlichen Server muss noch die MySql-Tabelle angelegt werden. R.-P. Keil Übung 6 - Datenbankgestütztes Gästebuch - Schrittanleitung / Seite 7 von 7