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

Notizen mit Ajax

Tutorial zum Erstellen einer Ajax-Notes-Anwendung.

Willkommen in meinem Tutorial zum Erstellen einer Ajax-Notes-Anwendung. Vorbild dafür ist Google-Mail; Und zwar wird dort, wenn man selber eine Mail verfasst, oder gerade eine Beantwortet, alle paar Sekunden diese automatisch gespeichert; man kann das Browser-Fenster sogar schließen, und den Computer runterfahren, und es ist beim nächsten mal immer noch da. Natürlich hat man auch die Möglichkeit selber, per Klick auf einen Button zu speichern. Dieses Tut wird aber nichts mit eMails zu tun haben, das Ergebnis ist ein Notiz-Feld, wenn man so will.

Voraussetzungen sind nur Basiswissen in Javascript, und Basiswissen in PHP-MySQL. Wobei ich hier vieles auch dennoch erklären werde. XMLHttpRequest sollte aber schon ein Begriff sein. Fundament dieses Scripts ist eben ein XMLHttpRequest, dessen Anfrage, einen Eintrag in eine MySQL Datenbank, von PHP aus, speichert. Also nochmal verständlich: Der XMLHttpRequest richtet sich an ein PHP, dieses PHP Script liest zunächst die Variable (die Notiz) die mit dem XMLHttpRequest übergeben worden ist, und lädt den Wert dieser Variabel in die Datenbank. Das wird später nachvollziehbar, keine Sorge.

Als aller erstes kommt die Datei "dbPut.php", diese empfängt den XMLHttpRequest, und speichert die Daten in die MySQL-Datenbank:

  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.  $text = $_GET['text'];
  9.  $sql = "update notes set text='$text'";
  10.  mysql_query($sql)
  11.  ?>


Zuerst wird der Name des Hosts festgelegt, für gewöhnlich die Domain, oder bei einem lokalem Server auf dem Computer "localhost"; Dann wird der Benutzername für die Datenbank festgelegt, und dann das Passwort und der Name der Tabelle. In den darauf folgenden 2 Zeilen wird die Verbindung mit der Datenbank aufgenommen. Mit "$text = $_GET['text'];" wird der Variabel $text, der Wert bzw. die Notiz übergeben; In $_GET['text'] wird dieser übergeben, dazu später mehr. Die nächsten 2 Zeilen speichern die Notiz in die Datenbank. Das war's dann für die "dbPut.php", jetzt kommt die "notes.php", die das Textfeld und den Button beinhaltet. Auf Gestaltung habe ich übrigens verzichtet. Fangen wir mit dem Javascript an:

  1.  var url = "dbPut.php?text=";
  2.  function updateDB() {
  3.  var txt = document.getElementById("txt").value;
  4.  http.open("GET", url + escape(txt), true);
  5.  http.send(null);
  6.  document.getElementById("btn").value = "saved";
  7.   }
  8.  function resetB(){
  9.  document.getElementById("btn").value = "save!";
  10.  }
  11.  function getHTTPObject() {
  12.  var xmlhttp;
  13.  /*@cc_on
  14.  @if (@_jscript_version >= 5) try {
  15.  xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  16.  } catch (e) {
  17.  try {
  18.   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  19.   } catch (E){
  20.   xmlhttp = false;
  21.   }
  22.   } @else xmlhttp = false; @end @*/ 
  23.   if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
  24.   try { xmlhttp = new XMLHttpRequest();
  25.   } catch (e) {
  26.   xmlhttp = false;
  27.   }
  28.   }
  29.   return xmlhttp;
  30.   } var http = getHTTPObject();
  31.  setInterval("updateDB()", 10000);


Als erstes wird die Variabel "url" festgelegt, diese beinhaltet das PHP Script welches den XMLHttpRequest empfängt.

Falls ihr euch fragt was das für ein komisches Anhängsel, nach "dbPut.php" ist, so kann man Variablen von einer Seite zur nächsten schicken, man hängt einfach ein "?" an, dann den Namen der Variabel dann ein "=", dann den Wert. Will man dann aber mehrere Variablen übergeben, sollte das wie folgt aussehen:
  1.  dbPut.php?text=WERT&tag=HEUTE&monat=JANUAR;
also die erste Variabel bekommt ein "?" davor gestellt, alle folgenden ein "&". Das in dem Javascript, noch kein Wert drinnen steht, hat den Grund, dass dieser dynamisch ist und erst später dazu kommt.

Danach wird eine Funktion geschrieben, die dann den Request ausführt, über die erste Zeile in der Funktion, wird jedes mal wenn diese aufgerufen wird, der aktuelle Wert des Textfeldes ermittelt. Gespeichert wird der Wert in der Variabel $text. http ist das Request-Objekt, das wird gleich noch deklariert, das ist sozusagen das Herz des Scripts. Mit ".open()", wird sozusagen ein neuer Request erstellt; "GET", stellt die Methode der Variablenübergabe dar;"url + escape(txt)" ist das Ziel des Requests, wie oben schon erwähnt. Hier wird die Variablenübergabe bzw. deklarierung vorgenommen. Nehmen wir an, im Textfeld steht "ExosSho", dann heißt url "dbPut.php?text=ExosSho", das "escape" ist notwendig, um Leerzeichen, Umlaute oder Sonderzeichen zu übergeben; Mit "true" gebt ihr bescheid, dass der Request asynchron ablaufen soll, also im Hintergrund. Mit der Zeile "document.getElementById("btn").value = "saved"; ändert ihr nach jedem Request, den Value des Buttons zu "saved". Das war die erste Funktion, jetzt kommt die nächste "resetB();"(steht für reset button), dieser setzt(bei Aufruf) den Value des Button wieder auf "save!!". Diese Funktion wird nur aufgerufen, wenn in dem Textfeld was verändert wird. Das war die zweite Funktion. Jetzt kommt die Funktion die für das Request zuständig ist "getHTTPObject()". Diese werde ich nicht weiter erklären. Im Endeffekt wird hier für jeden Fall eines anderen Browser (also falls z.B.: xmlhttp = new ActiveXObject("Microsoft.XMLHTTP") usw. ) eine andere Deklaration verwendet. Das ist dazu notwendig, die Seite cross-browser-fähig, also für alle Browser lesbar zu machen. Das soll sich mit dem neuen IE ändern, da der angeblich das von Gecko-Browsern(also alle außer IE) verwendete "xmlhttp = new XMLHttpRequest()" übernimmt. Also diese Funktion liefert einen Request zurück, und mit der Zeile
  1.  var http = getHTTPObject();
wird das in der Variabel "http" gespeichert, die wie ihr euch erinnern könnt am Anfang schon auftauchte.

Als letztes kommt der Intervall mit "setIntervall()" wird dieser aufgerufen, der erste Wert in den Klammern ist die Funktion die im Intervall aufgerufen werden soll, und der zweite Wert ist die Intervall Dauer, also wie lange gewartet werden soll bis die Funktion wieder aufgerufen werden soll, dabei gilt 1 Sekunde = 1000ms.

Jetzt kommt hier noch der HTML Teil:

  1.  <input type="button" value="save!" id="btn" onclick="updateDB()" style="float:left"/>
  2.  <br />
  3.  <textarea cols="100" rows="20" id="txt" onchange="resetB()" onkeypress="resetB()">
  4.  <?php echo ($dsatz['text']) ?>
  5.  </textarea>


Der sollte eigentlich selbsterklärend sein...

Damit aber schon nach dem Laden der Seite, im Textfeld was steht, muss vor dem HTML noch ein kleiner PHP-Teil hin:

  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.  $sqlab = "select text from notes";
  9.  $satz = mysql_query($sqlab);
  10.  $dsatz = mysql_fetch_assoc($satz);
  11.  ?>


Den Teil sollte man mittlerweile auch schon verstehen können.

Nun zur Datenbank-Tabelle, nötig ist für dieses Tutorial nur eine Zeile, und zwar "text", mit Typ "Mediumtext", der Name der Tabelle sollte "notes" lauten.

Das war's dann, viel Spaß damit.

Das ganze Script gibt es auch zum herunterladen: dbPut.php und notes.php

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