Newsletter

  • Immer informiert über die neusten Trends, Webseiten und Tutorials! Einfach hier für den monatlichen Newsletter anmelden.
  •  Eintragen
  •  Austragen

Login

Umfrage

  • Haben Sie Interesse an Softwaretipps für Webmaster?
  •  
  • ja
  • nein
  •  


Linktipps

Anzeige

 

www.finanzcheck.de
» Startseite » PHP und MySQL Tutorials

MySQL-Tabellen-Management (AJAX)

Ziel dieses Tutorials ist es, wieder einmal, einen kleinen Einblick in AJAX zu geben. Es wird ein Script geschrieben, dass einen Datensatz einer MySQL-Datenbank ausgibt.

Aber das wäre ja so ziemlich nicht AJAX; Was noch fehlt ist eine kleine Prise Javascript (Tatsache ist, dass Javascript diesmal nicht für die Verarbeitung zuständig ist, sondern nur den Boten spielt). Weiter im Text. Die Daten werden ausgegeben, in Textfelder, oder HTML-Inputs, wenn man nun diese Felder verändert und den Button "eintragen" drückt, erscheint erstmal eine Bestätigungs-Aufforderung (optional), wenn diese bestätigt wurde, werden die Daten in der Datenbank aktualisiert.

Voraussetzungen: ein bisschen HTML, grundlegendes PHP & MySQL, grundlegendes Javascript sowie grundlegendes DOM (Document Object Model). Davon abgesehen sollte man einen Server zur Verfügung haben, gemietet oder selbst auf dem Rechner installiert ist egal, die Hauptsache ist, dass er PHP unterstützt und eine MySQL-Datenbanken anbietet.

Ok, also erstmal ist eine PHP-Datei von Nöten, die für die Verbindung mit der Datenbank zuständig ist; Ich taufe sie: "db.php". Sie sollte den Namen des Host (Domain oder IP), den Benutzernamen, und das Passwort beinhalten. Bei XAMPP (ein Paket um ein z.B. ein WAMPP System aufzusetzen), ist der Host = localhost, Nutzername =root und das Passwort wird leer gelassen. Dazu braucht man noch den Namen der Datenbank, hier heißt sie einfach: "ajax".

  1.  <?php 
  2.  $dbhost = 'localhost';
  3.  $dbusername = 'root';
  4.  $dbpasswd = '';
  5.  $database_name = 'ajax';
  6.  $connection = mysql_pconnect($dbhost,$dbusername,$dbpasswd) or die ("Couldn't connect to server.");
  7.  $db = mysql_select_db($database_name,$connection) or die("Couldn't select database.");
  8.  ?>


Wie gesagt, diese Datei wird als "db.php" gespeichert, und muss sich auch in dem selben Ordner befinden, wie die Datei die wir gleich basteln werden. In dieser, muss auch am Anfang:

  1.  <?php
  2.  include("db.php")
  3.  // ...
  4.  ?>

stehen.

Jetzt kommen wir zum eigentlichen Script. Fangen wir gleich mit der Ausgabe der Daten an. Diese findet in einem kleinen Formular statt, dabei ist der Name des Formulars: "m".

  1.  <form name="m" action="tut.php" method="post"> 
  2.  <input name="ak" type="hidden"/>
  3.  <input name="id" type="hidden"/>


Die zwei Hidden-Inputs, sind dafür nötig, dass wir sozusagen von Javascript aus Befehle an PHP geben können. Dazu später mehr.

Jetzt kommt der Part der für die Kommunikation mit der Datenbank verantwortlich ist:

  1.  <form name="m" action="tut.php" method="post">
  2.  <input name="ak" type="hidden"/>
  3.  <input name="id" type="hidden"/>
  4.  <?php
  5.  $res = mysql_query("select * from tut ");
  6.  while($dsatz = mysql_fetch_assoc($res)){
  7.  ?>
Der Satz in der Klammer, der ersten Zeile, ist eine MySQL-Anweisung, sie sagt: Wähle (select) Alles (*) von (from) der Tabelle tut (tut). Der Name der Tabelle liegt natürlich bei euch. Eine while-Schleife wäre noch nicht nötig, aber in einem folgendem Tutorial, (Simples Adressbuch das auf diesem Script basieren wird) wird das sehr nützlich sein. Der Satz "mysql_fetch_assoc($res)" speichert die Daten der Tabelle in einem assoziativen-Feld (Array). Dabei wird der Wert der Tabellen-Zelle mit dem Namen "alpha", in diesem Array unter "$dsatz['alpha']" erreichbar sein.

Aber nun weiter, jetzt kommt die Ausgabe dazu:

  1.  <form name="m" action="manage.php" method="post">
  2.  <input name="ak" type="hidden"/>
  3.  <input name="id" type="hidden"/>
  4.  <?php
  5.  $res = mysql_query("select * from tut ");
  6.  while($dsatz = mysql_fetch_assoc($res)){
  7.  echo "<table align="'center'"><td><tr>
  8.  <td>Header:</td>
  9.  <td><input name="'kopf'" value="'_Scribe![]- . $dsatz["kopf"] . "' size="'60'" /></td>
  10.  </tr><tr>
  11.  <td align="'right'" valign="'top'">Text:</td>
  12.  <td><textarea style="'" width: 100%;' name="'korper'" tabindex="'1'" rows="'14'" cols="'40'" wrap="'soft'">" . $dsatz["korper"] . "</textarea></td> </tr><tr><td></td>
  13.  <td><a href="'javascript:send(1,0);'">eintragen</a></td> </tr></td>
  14.  </table>";
  15.  }
  16.  ?>
  17.  </form>


Also mit "$dsatz["kopf"]" wird auf das Array, das ich im letzten Schritt erwähnt habe, zugegriffen; Dabei wird die Variable, der der Name "kopf" zugewiesen ist raus gepickt. Die Namen der Inputs sind wichtig. Und machen Sie diese nicht zu lang. Auch wichtig ist das Aufrufen der JavaScript-Funktion "send()"; Noch wäre es eigentlich nicht nötig Variablen an Javascript zu übergeben, aber das wird im nächsten Tutorial nötig sein. Um Missverständnissen aus dem Weg zu gehen, es ist jetzt so wie wir es schreiben SCHON NÖTIG, diese zwei kleinen Zahlen an Javascript zu übergeben.

Jetzt machen wir einen kleinen Sprung in den Head der Datei, wir befassen uns kurz mit dem Javascript-Teil.

  1.  function send(a, b){ 
  2.  if(a=="1"){ 
  3.  if(confirm("Daten eintragen??")){ 
  4.  document.m.ak.value = "put"
  5.  }else{
  6.  return;
  7.  }
  8.  } 
  9.  document.m.submit();
  10.  }
Übersetzt steht dort: Wenn die Variable a gleich 1 ist, frage ob man die Daten eintragen will, falls Ja setzte den Wert von ak auf "put", falls Nein brech die Prozedur ab. Falls einem die Zeile 'document.f.ak.value = "put" ' nichts sagt, sollte er sich mal mit DOM beschäftigen, ist nicht zu schwer. Durch diese Zeile wird es möglich von Javascript aus, mit PHP zu kommunizieren, mehr oder weniger.

Gut also nehmen wir an, die Frage ob die Daten eingetragen werden sollen, wurde bestätigt, was passiert dann. Noch nichts, jetzt bewegen wir uns wieder in den Body des HTML Codes, die folgenden PHP-Zeilen sollten direkt unter dem "include(db.php)" stehen, und über den PHP-Teil den wir eben noch geschrieben hatten.

  1.  <?php
  2.  if(isset($ak)){ 
  3.  if($ak=="put"){
  4.  echo "data added";
  5.  $sqlab = "update tut set kopf = '$kopf', korper = '$korper'";
  6.  mysql_query($sqlab);
  7.  }
  8.  }
  9.  ?>


Erst wird überprüft ob die Variable ak gesetzt wurde, wenn das zutrifft, wird geprüft ob ak den Wert "put" hat, trifft auch das zu, wird die Datenbank aktualisiert. Der Variablen-Name $kopf stammt vom name-Attribut des Inputs für Kopf. Wäre das name-Attribut "french", müsste man jetzt auch $french schreiben.

Und komplett, sollte es wie folgt aussehen:

  1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.   <title>Unbenanntes Dokument</title>
  5.  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6.  <script type="text/javascript">
  7.  function send(a, b){
  8.  if(a=="1"){
  9.  if(confirm("Daten eintragen??")){
  10.  document.m.ak.value = "put"
  11.  }else{
  12.  return;
  13.  }
  14.  }
  15.  document.m.submit();
  16.  }
  17.  </script>
  18.  </head>
  19.  <body>
  20.  <?php
  21.  include('db.php');
  22.  if(isset($ak)){
  23.  if($ak=="put"){
  24.  echo "data added";
  25.  $sqlab = "update tut set kopf = '$kopf', korper = '$korper'";
  26.  mysql_query($sqlab);
  27.  }
  28.  } 
  29.  ?>
  30.  <form name="m" action="tut.php" method="post">
  31.  <input name="ak" type="hidden"/>
  32.  <input name="id" type="hidden"/>
  33.  <?php
  34.  $res = mysql_query("select * from tut ");
  35.  while($dsatz = mysql_fetch_assoc($res)){
  36.  echo "<table align='center'><td><tr><td>Header:</td> <td><input name='kopf' value='" . $dsatz["kopf"] . "' size='60'></td> </tr><tr><td align='right' valign='top'>Text:</td> <td><textarea style=' width: 100%;' name='korper' tabIndex='1' rows='14' cols='40' wrap='soft'>" . $dsatz["korper"] . "</textarea></td> </tr><tr><td></td> <td><a href='javascript:send(1,0);'>eintragen</a></td> </tr></td></table>";
  37.  } 
  38.  ?></form>
  39.  </body>
  40.  </html>


Ok, eigentlich sind wir hier schon fertig mit dem Script. Damit dieses Tutorial aber auch funktioniert, ist es nötig die Datenbank zu erstellen. Falls einer mit XAMPP arbeitet, sollte das recht schnell gehen. Ich poste hier einfach mal die tut-Tabelle wie sie aussehen sollte.

  1.  CREATE TABLE `ajax` (
  2.  `kopf` VARCHAR( 20 ) CHARACTER SET latin1 COLLATE latin1_general_ci NOT NULL ,
  3.  `koerper` MEDIUMTEXT CHARACTER SET latin1 COLLATE latin1_general_ci NOT NULL 
  4.  ) TYPE = MYISAM CHARACTER SET latin1 COLLATE latin1_general_ci COMMENT = 'Ajax Beispiel';

Den gesamten Code können Sie auch hier herunterladen (db.php ist schon eingefügt!): manage.zip



Fragen? Probleme? Keine Antworten? Hilfe finden Sie im Webmaster Forum!

Diese Artikel könnten Sie auch interessieren:
Reguläre Ausdrücke
Alternative Syntax für Kontroll-Strukturen
Unterschiedlicher Footer auf verschiedenen Seiten
String nach Wortende trennen
Was ist PHP?


 
Anzeige