Hauptmenü

Untermenü

PHP/MySQL - Praxistutorial 1 - Daten eingeben

1. Die Abschnitte

2. Die Aufgabe

Jetzt wollen wir uns eine Oberfläche basteln, mit der wir unseren Tabellen Datensätze hinzufügen können. Hinzu kommt eine kleine Javascript-Spielerei, damit ihr das mit den GET-Parametern weiter verinnerlicht. Fügt als Erstes in der index.php unterhalb der Überschrift (also oberhalb von $code .= showList ($list);) folgenden Code ein.


$code .= '<p class="menue">
            <a href="#"
              onclick="fenster('."'".$_GET['tabelle']."',
              '".$_GET['tabelle']."'".');">
              Neuen Datensatz einpflegen
            </a>
          </p>';

Erläuterung

Damit rufen wir eine JavaScript-Funktion namens fenster auf (files/menu.js), die ein 500x280 Pixel großes Browserfenster öffnet. Es werden zwei Parameter übergeben, erstens der aus dem Menü übergebene GET-Wert, dem dann in der menue.js ein .php angehängt wird, also die Datei, die wir aufrufen. Gleichzeitig dient er noch als Namensgeber für das Popup-Fenster. Dieselbe Variable nutzen wir auch, um sie als GET-Parameter anzuhängen.

Ach ja, damit das funktioniert, müsst ihr in der Navigation vorher auf den Punkt "Kunden" klicken. Denn nur dort bauen wir diese Funktionalität ein. Das gilt übrigens auch für die folgenden Beispiele. Pro Menüpunkt eine Möglichkeit. Natürlich kann man das auch ganz einfach für alle einbauen, aber macht ihr mal schön selbst. Ist eine wunderbare Übung.

Warum zweimal denselben Parameter

Hab ich mich zuerst auch gefragt, als ich dieses Tutorial überarbeitet habe. Und bumms, da wusste ich wieder warum. Allerdings erfahrt ihr das erst im nächsten Abschnitt.

3. Die kunden.php

Nehmen wir als Beispiel und pflegen dort einen neuen Datensatz ein. Im Moment ist die Datei noch ein stinknormales HTML-Formular. Wir wollen es ja auch langsam angehen lassen, daher verzichte ich erst mal auf bestimmte Dinge. Füllt das Formular mal aus (bitte nicht mit "asdfasdfasdf"), und klickt auf "Eingeben". Toll, jetzt ist wieder alles leer! Jetzt drückt aber mal auf die F5-Taste und ruft die Datei erneut auf. Da kommt auf einmal eine seltsame Meldung, irgendwas mit Post-Daten und noch mal senden.

4. POST

Eine Möglichkeit, Daten zu übertragen, habt ihr mit der GET-Methode schon kennen gelernt. Die ist die zweite Möglichkeit, nämlich über Formularfelder. Dafür müsst ihr im <form> aber als Methode (method) post angeben. Die Daten sind also nicht ganz verloren gegangen. Tragt jetzt bitte oberhalb des <body>-Tags zwischen <?php und ?> Folgendes ein.


if ($_POST)
{
  print_r($_POST);
}

... füllt das Formular erneut aus und versendet es. Je nach Eingabe bekommt ihr dann so etwas wie das Folgende zu sehen.


Array
(
  [doktor] => Sadistico
  [telefon] => 0123 123456 0
  [telefax] => 0123 123456 10
  [strasse] => Spanische Jungfrau 12
  [plz] => 44444
  [ort] => Inquisitionsstadt
)

So! Da haben wir ja unsere Daten, allerdings erst, nachdem sie gesendet wurden. Ist ja auch Blödsinn, sie abzufragen, wenn sie eh noch nicht vorhanden sind. Jetzt müssen die nur noch irgendwie in die Datenbank. Also bindet als Erstes mal die Datei mit den Zugangsdaten in die kunde.php ein. Das macht ihr jetzt aber selber! Und denkt an die korrekte Pfadangabe.

5. Die Eingabe

Nachdem die Daten gesendet wurden, basteln wir uns zuerst eine SQL-Abfrage und packen sie in die if ($_POST)-Bedingung.


$query 'INSERT INTO 
            kunde 
          VALUES 
          (
            '."'','".
            $_POST['doktor']."','".
            $_POST['telefon']."','".
            $_POST['telefax']."','".
            $_POST['strasse']."','".
            $_POST['plz']."','".
            $_POST['ort']."'".
          ')';

Schaut euch den Code mal genau an, da erfahrt ihr viel über Zeichenkettenverknüpfungen und die Verwendung von Anführungszeichen, respektive Hochkommata. Und noch ein Tipp, wenn die Eingabe in die Datenbank nicht klappt, ist fast immer eine fehlerhafte SQL-Abfrage schuld. In so einem Fall solltet ihr mit echo $query; arbeiten und die Ausgabe mit eurem MySQL-Frontend testen. Ist die Anfrage dann in Ordnung, so schickt sie an die Datenbank.


$result mysql_query ($query) or die (mysql_error());

Noch nicht ausprobieren!!!

Wenn der SQL-Befehl erfolgreich ausgeführt wurde, so hat die Variable $result den Wert 1 also true. Und nun kommen wir zu unserem ersten kleinen Schmankerl.

6. Das erste Schmankerl

Wir wollen bei erfolgreicher Eingabe dieses Fenster schließen und unser Hauptmenü neu aufrufen, damit wir sofort die Änderung zu sehen bekommen. Dafür benötigen wir aber die ausgewählte Tabelle. Und die haben wir ja schon. Denn sie wird in weiser Voraussicht in der JavaScript-Funktion fenster in der Datei files/menue.js übergeben.


'.php?tabelle=' param

Schreibt mal im PHP-Bereich ein print_r($_GET). Und, ein Wunder, ein Wunder, da steht sie tatsächlich. Es gibt nur ein Problem. Die verschwindet, sobald ihr auf den "Eingeben"-Button drückt. Daher muss die durchgeschleift werden, und zwar folgendermaßen. Unser "Link" ist das action-Attribut im <form>-Tag. Also muss die Variable dort angehängt werden. Jetzt mache ich etwas, was ich sonst so nie tue, aber sei es drum. Wir ändern


<form action="kunden.php" method="post">

in


<form action="kunden.php?tabelle=<?php echo $_GET['tabelle']; ?>" 
  method="post">

Gut, der Eintrag in die Datenbank war erfolgreich, wir wollen unser Fenster schließen, die index.php neu aufrufen und den Eintrag bewundern. Dazu benötigen wir zwei JavaScript-Methoden, window.opener.location.ref und window.close. Da die gewünschten Aktionen aber erst verarbeitet werden können, nachdem die Seite neu aufgerufen wurde, müssen wir unser <body>-Tag umarbeiten. Löscht es und ersetzt es durch


<?php
  echo '<body';
  if ($result)
  {
    echo ' onload="window.opener.location.href='."'".'../index.php'.
           '?tabelle='.$_GET['tabelle']."'".'; window.close();"';
  }
  echo '>';
?>

Erläuterung

echo '<body'; ... echo '>' gibt ganz normal das <body>-Element aus. In der Bedingung wird abgefragt, ob der Eintrag in die Datenbank erfolgreich war. Wenn ja, so sollte nach dem Neuladen (onload), also nach dem Klick auf den "Eingeben"-Button, zwei JavaScript-Methoden aufgerufen werden. Fangen wir mit der zweiten und leichten an.

window.close(); schließt unser Fenster und das war es.

window.opener.location.href ruft die Hauptseite neu auf und übergibt, ähnlich wie im Hauptmenü, den GET-Parameter namens tabelle. Das Ganze kann man noch verfeinern, aber dazu komme ich später.

Ach ja, jetzt haben wir zwei <?php ... ?> direkt untereinander. Das ist nicht besonders schön und wen es stört, der kann es gerne korrigieren.

7. Ausführung

Das war immer die knappe Anweisung bei Y-Tours, wenn man einen Befehl umsetzen sollte. Und das macht ihr jetzt auch. Füllt schön brav das Formular aus und sendet es ab. Wenn ihr jetzt alles richtig gemacht habt, wird der neue Eintrag in die Datenbank geschrieben, das Fenster schließt sich und ihr seht im Hauptmenü den neuen Datensatz. Ausführung!

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt