systemconsulting: einwohnermeldeamt AJAX

Was kann die Demo - und was tut sie nicht?

Unser letztes AJAX-Beispiel hat schon sehr viel mit einer "Wapplication" zu tun. Hier soll gezeigt werden, dass der Weg zu Online-Applikationen offen ist und mit zunehmender Transfergeschwindigkeit immer wahrscheinlicher wird. Stellen Sie sich einmal vor, ein Administrator hätte weltweit für seinen Konzern nur noch eine einzige Applikation zu pflegen, dieses System unabhängig und ohne all zu hohe Ansprüche an permanente technische Innovationen anzupassen. Möglich ist das, wenn Sie das folgende Beispiel eingehend studiert haben, werden Sie das auch glauben.

Module:

Datensätze werden eingeblendet, sobald Sie aus der Liste augewählt wurden

Datensätze können neu angelegt werden (Einschränkung: Bild - wir wollen Bilder-Uploads vermeiden)

Datensätze können gelöscht werden

Module die zur Vollständigkeit fehlen:

Datensätze überarbeiten

Nach Datensätzen suchen

Liste drucken

Natürlich könnten die fehlenden Funktionen ergänzt werden. Dies würde allerdings den Umfang des Tutorials (und unseren Zeitrahmen sprengen - sorry).

Eingabemaske

Zunächst zur Steuerlogik:

Eine gute Steuerlogik soll dafür sorgen, dass die Anwender möglichst wenig Fehler machen können, weshalb beim Aufruf der Maske zunächst nur die Möglichkeit "[Neuer Datensatz]" angeboten wird. Die beiden anderen Buttons sind nicht zu sehen und können deshalb auch nicht versehentlich gedrückt werden. Beim Klick auf "[Neuer Datensatz]" werden die Inhalte der Maske (des Formulars - nicht! der Datenbank-Tabelle) gelöscht und der Eingabefokus in das erste Formularfeld gesetzt.

Die Eigenschaft: "disabled" (true oder false) hat ihre Tücken. Prinzipiell arbeiten wir hier zwar mit einer Klasse class="dis". Allerdings verwenden wir wir nicht "disabled" sondern arbeiten mit der Eigenschaft "visibility" (hidden oder visible), was der Eingabemaske zwar eine gewisse "Härte" verleiht, dafür aber um so zuverlässiger arbeitet.

Neuer Datensatz

Beim Klick auf "[Neuer Datensatz]" wird der Button "Datensatz speichern" aktiviert und der Button "Neuer Datensatz" inaktiv gestellt (ausgeblendet). Zugleich werden die Formularfelder geleert und ein Ersatzbild bereitgestellt:

function new_data() {
  for (i=0; i<document.forms["individuals"].length -4 ; i++ ) {
    document.forms["individuals"].elements[i].value="";
  }
  document.forms["individuals"].elements[0].focus();
  document.forms["individuals"].elements[10].checked = false;
  document.forms["individuals"].elements[11].checked = false;
  document.getElementById("save").className="show";
  document.getElementById("save").style.visibility="visible";
  document.getElementById("new").className="dis";
  document.getElementById("new").style.visibility="hidden";
  document.getElementById("kill").className="dis";
  document.getElementById("kill").style.visibility="hidden";
  document.images[0].src="images/phantom.jpg";
return
}

Der Button "[Datensatz löschen]" wird erst bei einem Klick auf die Liste aktiviert und der augenblicklich angewählte Datensatz wird abgebildet:

Klick auf die Liste:

<tr onClick=requesT_A(this.id) id='" . $row['id'] ."' class='a' onmouseover=this.className='c' onmouseout=this.className='a'>

function requesT_A(id){
  document.getElementById("new").className="dis";
  document.getElementById("new").style.visibility="hidden";
  document.getElementById("save").className="dis";
  document.getElementById("save").style.visibility="hidden";
  document.getElementById("kill").className="show";
  document.getElementById("kill").style.visibility="visible";
  document.forms["individuals"].elements['selected'].value=id;
  rqo.open('get', 'show.php?id='+ id);
  rqo.onreadystatechange = receivE_A;
  rqo.send(null);
}

Für den Fall, dass tatsächlich gelöscht werden soll, wurde die ID des ausgewählten Datensatzes bereits beim Aufruf in die Tabelle geschrieben und kann nun an die Datei "show.php" adressiert werden, welche (mit der AJAX-Methode - also - dem XMLHttpRequest()) den Datensatz aus der Tabelle ausliest und einen String zurück gibt, der nachfolgend zerlegt und in das Eingabeformular geschrieben wird (auch in dieser Funktion wird die ID des ausgewählten Satzes in ein verstecktes Feld "selected" geschrieben):

function receivE_A(){
  if(rqo.readyState == 4){

    my_string=rqo.responseText;

    suche = my_string.indexOf(";");
    vorname = my_string.substring(0, suche);
    my_string = my_string.substring(suche+1,1000);
    document.forms["individuals"].elements['vorname'].value = vorname;

    suche = my_string.indexOf(";");
    name = my_string.substring(0, suche);
    my_string = my_string.substring(suche+1,1000);
    document.forms["individuals"].elements['name'].value = name;

    suche = my_string.indexOf(";");
    ausweisnummer = my_string.substring(0, suche);
    my_string = my_string.substring(suche+1,1000);
    document.forms["individuals"].elements['ausweisnummer'].value = ausweisnummer;

    suche = my_string.indexOf(";");
    geburtsdatum = my_string.substring(0, suche);
    my_string = my_string.substring(suche+1,1000);
    document.forms["individuals"].elements['geburtsdatum'].value = geburtsdatum;

    suche = my_string.indexOf(";");
    strasse = my_string.substring(0, suche);
    my_string = my_string.substring(suche+1,1000);
    document.forms["individuals"].elements['strasse'].value = strasse;

    suche = my_string.indexOf(";");
    plz = my_string.substring(0, suche);
    my_string = my_string.substring(suche+1,1000);
    document.forms["individuals"].elements['plz'].value = plz;

    suche = my_string.indexOf(";");
    ort = my_string.substring(0, suche);
    my_string = my_string.substring(suche+1,1000);
    document.forms["individuals"].elements['ort'].value = ort;

    suche = my_string.indexOf(";");
    telefon = my_string.substring(0, suche);
    my_string = my_string.substring(suche+1,1000);
    document.forms["individuals"].elements['telefon'].value = telefon;

    suche = my_string.indexOf(";");
    telefax = my_string.substring(0, suche);
    my_string = my_string.substring(suche+1,1000);
    document.forms["individuals"].elements['telefax'].value = telefax;

    suche = my_string.indexOf(";");
    email = my_string.substring(0, suche);
    my_string = my_string.substring(suche+1,1000);
    document.forms["individuals"].elements['email'].value = email;

    suche = my_string.indexOf(";");
    geschlecht = my_string.substring(0, suche);
    my_string = my_string.substring(suche+1,1000);
    if(geschlecht==1) {
      document.forms["individuals"].elements[10].checked = false;
      document.forms["individuals"].elements[11].checked = true;
    } else {
      document.forms["individuals"].elements[10].checked = true;
      document.forms["individuals"].elements[11].checked = false;
    }

    suche = my_string.indexOf(";");
    passbild = my_string.substring(0, suche);
    my_string = my_string.substring(suche+1,1000);
    document.images[0].src=passbild;

    suche = my_string.indexOf(";");
    bemerkung = my_string.substring(0, suche);
    document.forms["individuals"].elements['bemerkung'].value = bemerkung;

  }
  return
}

Nun bleibt nur noch die "Rückstellung", falls die Taste "[Datensatz löschen]" irrtümlich gedrückt wurde oder tatsächlich gelöscht werden soll - diese "Rückstellung" wird in jedem Falle durchgeführt.

"[Datensatz löschen]" ruft:

      onclick=requesT_C(document.forms["individuals"].
      elements["selected"].value)

und in dieser Funktion werden die Tasten "[Neuer Datensatz]", "[Datensatz speichern]" und "[Datensatz löschen]" frisch eingestellt:

function requesT_C(id){
  document.getElementById("new").className="show";
  document.getElementById("new").style.visibility="visible";
  document.getElementById("kill").className="dis";
  document.getElementById("kill").style.visibility="hidden";
  ob_kill=confirm('Datensatz wirklich loeschen?');
  if(ob_kill==true){
    rqo.open('get', 'delete.php?id='+ id);
    rqp.open('get', 'table.php');
    rqp.onreadystatechange = receivE_C;
    rqo.send(null);
    rqp.send(null);
  }else{
    return
  }
}

function receivE_C(){
  if(rqp.readyState == 4){
    alert('Datemsatz wurde geloescht.')
    document.getElementById("liste").innerHTML = rqp.responseText;
    for (i=0; i<13 ; i++ ) {
      document.forms["individuals"].elements[i].value='';
    }
  document.forms["individuals"].elements[10].checked = false;
  document.forms["individuals"].elements[11].checked = false;
  document.images[0].src="images/phantom.jpg";
  document.getElementById("save").className="show";
  document.getElementById("save").style.visibility="visible";
  }
  return
}

und ganz gleich, wie der Anwender / die Anwenderin entscheidet, die Ausgangslage: nur noch "[Neuer Datensatz]" aktiv wird wieder hergestellt.

Die Organisation der Steuerlogik in Anwendermodulen hilft allerdings nicht nur den Anwendern, sondern auch den Entwicklern, weil so die voraussehbaren Möglichkeiten und eventuellen Fehlerquellen besser einzuschränken sind.

Der Start:

Im Aufruf der Datei "ajax-start.php" sind zwei PHP-Blöcke integriert, um zum einen:

Das Formular mit Inhalten des ersten Datensatzes zu füllen (leere Masken zum Start frustrieren die Anwender):

<?php
$i = 0;
$con = mysql_connect("systemconsulting.de","username","passwort");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }
mysql_select_db("datenbank", $con);
mysql_query("SET NAMES 'utf8'");
$result = mysql_query("SELECT * FROM einwohner limit 1");
$row = mysql_fetch_array($result);
$vorname       = $row['vorname'];
$name          = $row['name'];
$geburtsdatum  = $row['geburtsdatum'];
$strasse       = $row['strasse'];
$plz           = $row['plz'];
$ort           = $row['ort'];
$telefon       = $row['telefon'];
$telefax       = $row['telefax'];
$email         = $row['email'];
$ausweisnummer = $row['ausweisnummer'];
$passbild      = $row['passbild'];
$geschlecht    = $row['geschlecht'];
$bemerkung     = $row['bemerkung'];
mysql_close($con);
?>

Die Variablen werden dann beim Einlesen der Maske direkt in die Formularfelder geschrieben:<?php echo $vorname; ?> usw. und füllen damit bereits die Maske mit Inhalten auf.

Der zweite PHP-Block generiert die Liste, welche ebenfalls beim ersten Aufruf angezeigt wird:

<?php
$i = 0;
$con = mysql_connect("systemconsulting.de","username","passwort");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }
mysql_select_db("datenbank", $con);
$result = mysql_query("SELECT id, vorname, name, strasse,plz, ort
FROM einwohner order by name");
echo "<table align='center' width='100%'>";
echo "<tr style='background:#9EB7BC;font-weight:bold;'>";
echo "<td>Vorname</td>";
echo "<td>Name</td>";
echo "<td>Staße</td>";
echo "<td>PLZ</td>";
echo "<td>Ort</td>";
echo "</tr>";
while($row = mysql_fetch_array($result))
  {
  $i++;
    if(round($i/2) == $i/2){
      echo "<tr onClick=requesT(this.id) id='" . $row['id'] ."' class='a'
      onmouseover=this.className='c' onmouseout=this.className='a'><td>"
      . $row['vorname'] . "</td><td>" . $row['name']
      . "</td><td>" .$row['strasse'] . "</td><td>"
      . $row['plz'] . "</td><td>" . $row['ort'] . "</td></tr>";
    }else{
      echo "<tr onClick=requesT(this.id) id='" . $row['id'] ."' class='b'
      onmouseover=this.className='c' onmouseout=this.className='b'><td>"
      . $row['vorname'] . "</td><td>" . $row['name']
      . "</td><td>" .$row['strasse'] . "</td><td>"
      . $row['plz'] . "</td><td>" . $row['ort'] . "</td></tr>";
    }
  }
echo "</table>";
mysql_close($con);
?>

Schema der abgefragten Tabelle:

Tabellenschema

Inhalte der abgefragten Tabelle:

Tabelleninhalte

Hier würde die Implementierung von AJAX-Methoden weniger Sinn machen, weil ohnehin eine neue Seite aufgerufen werden muss. Mit dem Aufruf werden auch die oben bereits erwähnten Eigenschaften "visibility (visible / hidden)" für die Steuerelemente und deren Klasseneigenschaften bereits geregelt.

Die Funktion "Neuer Datensatz":

Einschränkung - es findet keine Eingabeüberprüfung statt!!! (dazu am Ende noch ein kurzer Kommentar)

Selbstverständlich würde man in einer "realen" Anwendung die Eingaben überprüfen. Auf diese Prüfung wird im Tutorial verzichtet, weil andere Inhalte zu klären sind.

Bei korrekter Formulareingabe wird über den Aktion-Button "Datensatz speichern" die Funktion requesT_B()() (onclick) gerufen:

function requesT_B(){
  document.getElementById("save").style.visibility="hidden";
  document.getElementById("save").className="dis";
  document.getElementById("new").style.visibility="visible";
  document.getElementById("new").className="show";
  sentstring="?";
  sentstring=sentstring+"vorname=
  "+document.forms["individuals"].elements["vorname"].value;
  sentstring=sentstring+"&name=
  "+document.forms["individuals"].elements["name"].value;
  sentstring=sentstring+"&geburtsdatum=
  "+document.forms["individuals"].elements["geburtsdatum"].value;
  sentstring=sentstring+"&strasse=
  "+document.forms["individuals"].elements["strasse"].value;
  sentstring=sentstring+"&plz="+document.forms["individuals"].elements["plz"].value;
  sentstring=sentstring+"&ort="+document.forms["individuals"].elements["ort"].value;
  sentstring=sentstring+"&telefon=
  "+document.forms["individuals"].elements["telefon"].value;
  sentstring=sentstring+"&telefax=
  "+document.forms["individuals"].elements["telefax"].value;
  sentstring=sentstring+"&email="+document.forms["individuals"].elements["email"].value;
  sentstring=sentstring+"&ausweisnummer=
  "+document.forms["individuals"].elements["ausweisnummer"].value;
  sentstring=sentstring+"&passbild=images/phantom.jpg";
  sentstring=sentstring+"&bemerkung=
  "+document.forms["individuals"].elements["bemerkung"].value;
  if(document.forms["individuals"].elements[10].checked==true) {
  geschlecht=0;
  } else {
  geschlecht=1;
  }
  sentstring=sentstring+"&geschlecht="+geschlecht;
  rqo.open('get', 'enter.php'+ sentstring);
  rqp.open('get', 'table.php');
  rqp.onreadystatechange = receivE_B;
  rqo.send(null);
  rqp.send(null);
}

function receivE_B(){
  if(rqp.readyState == 4){
    document.getElementById("liste").innerHTML = rqp.responseText;
    document.getElementById("save").className = "dis";
    document.getElementById("save").style.visibility = "hidden";
    document.getElementById("new").style.visibility = "visible";
    alert('Datensatz wurde gespeichert');
  }
  return
}

Zunächst wird die Steuerlogik geklärt. Der Button "[Datensatz speichern]" wird auf visible und der Button "[Neuer Datensatz]" auf hidden gesetzt

Danach wird aus den Formularinhalten ein String zusammengebaut, der über rqo.open an die Datei "enter.php" im Hintergrund weitergeleitet wird und zum Abschluss wird eine zweite PHP-Datei aufgerufen rqp (rqp ist dabei ein zweites XMLHttpRequest Objekt), die via "document.getElementById("liste").innerHTML = rqp.responseText;" die aktualisierte Liste in das Formular ausgibt.

PHP- und HTML-vertraute Entwickler(innen) werden jetzt fragen, was denn die aufwändige String-Behandlung soll und warum nicht einfach eine Form mit "post" abgesetzt wird?

ganz einfach:

Das XHTML-request-Object kennt kein POST und damit ist es auch nicht möglich, einen POST über AJAX abzusetzen, was z.B.: dazu führt, dass mit AJAX kein File-Upload zu realisieren ist (so was Vergleichbares stellen wir dennoch in den nächsten Wochen vor). Aus diesem Grund müssen wir einen String zusammen bauen, um via AJAX Daten an den Server zur Ablage zu senden.

Einen guten link zu GET und POST finden Sie hier: SELF-PHP (GET und POST)

enter.php:

<?php
$vorname      = $_REQUEST["vorname"];
$name         = $_REQUEST["name"];
$geburtsdatum = $_REQUEST["geburtsdatum"];
$strasse      = $_REQUEST["strasse"];
$plz          = $_REQUEST["plz"];
$ort          = $_REQUEST["ort"];
$telefon      = $_REQUEST["telefon"];
$telefax      = $_REQUEST["telefax"];
$email        = $_REQUEST["email"];
$ausweisnummer= $_REQUEST["ausweisnummer"];
$passbild     = $_REQUEST["passbild"];
$bemerkung    = $_REQUEST["bemerkung"];
$geschlecht   = $_REQUEST["geschlecht"];
$con = mysql_connect("host","username","passwort");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }
mysql_select_db("datenbank", $con);
$q_string ="INSERT INTO einwohner (vorname, name,geburtsdatum, strasse,
plz, ort, telefon, telefax, email, ausweisnummer, passbild, bemerkung,
geschlecht)VALUES(" . "'" . $vorname ."', " . "'" . $name ."', " . "'"
 . $geburtsdatum ."', " . "'" . $strasse ."', " . "'" . $plz ."', " . "'"
 . $ort ."', " . "'" . $telefon ."', " . "'" . $telefax ."', " . "'" . $email
."', " . "'" . $ausweisnummer ."', " . "'" . $passbild ."', " . "'"
. $bemerkung ."', " . "'" . $geschlecht ."' )";
echo $q_string;
mysql_query($q_string);
mysql_close($con);
?>

Nachdem der neue Datensatz über "INSERT" (eine Überarbeitung eines bestehenden Satzes hätte "UPDATE where id=" zur Verwendung) in die Tabelle geschrieben ist, soll dieser auch in der Liste angezeigt werden. Im Beispiel wurde ein zweites XMLHttpRequest Objekt verwendet rqp, was nicht unbedingt erforderlich wäre. Immerhin wird gezeigt, dass auch mehrere Objekte gleichzeitig zu handeln sind. Die zweite Datei "table.php" wird mit einem "sleep(1)" ausgebremst, damit auch tatsächlich der neue Datensatz in der Liste angezeigt wird.

table.php:

<?php
sleep(1);
$i = 0;
$con = mysql_connect("systemconsulting.de","username","passwort");
if (!$con)
  {
    die('Could not connect: ' . mysql_error());
  }

mysql_select_db("datenbank", $con);
$result = mysql_query("SELECT id, vorname, name, strasse,plz, ort FROM einwohner order by name");
echo "<table align='center' width='100%'>";
echo "<tr style='background:#9EB7BC;font-weight:bold;'>";
echo "<td>Vorname</td>";
echo "<td>Name</td>";
echo "<td>Staße</td>";
echo "<td>PLZ</td>";
echo "<td>Ort</td>";
echo "</tr>";
while($row = mysql_fetch_array($result))
  {
  $i++;
  if(round($i/2) == $i/2){
    echo "<tr onClick=requesT_A(this.id) id='" . $row['id'] ."' class='a'
    onmouseover=this.className='c' onmouseout=this.className='a'><td>"
    . $row['vorname'] . "</td><td>" . $row['name']
    . "</td><td>" .$row['strasse'] . "</td><td>"
    . $row['plz'] . "</td><td>"
    . $row['ort'] . "</td></tr>";
  }else{
    echo "<tr onClick=requesT_A(this.id) id='" . $row['id'] ."' class='b'
    onmouseover=this.className='c' onmouseout=this.className='b'><td>"
    . $row['vorname'] . "</td><td>" . $row['name']
    . "</td><td>" .$row['strasse'] . "</td><td>"
    . $row['plz'] . "</td><td>"
    . $row['ort'] . "</td></tr>";
    }
  }
echo "</table>";
mysql_close($con);
?>

Die Funktion "Datensatz löschen":

Generell wird beim Anklicken der Liste der ausgewählte Datensatz mit seinen Inhalten im Formular abgebildet, wie oben bereits ausgeführt.

<tr onClick=requesT_A(this.id) id='" . $row['id'] ."'>

requesT_A(this.id):

function requesT_A(id){
  document.getElementById("new").className="dis";
  document.getElementById("new").style.visibility="hidden";
  document.getElementById("save").className="dis";
  document.getElementById("save").style.visibility="hidden";
  document.getElementById("kill").className="show";
  document.getElementById("kill").style.visibility="visible";
  document.forms["individuals"].elements['selected'].value=id;
  rqo.open('get', 'show.php?id='+ id);
  rqo.onreadystatechange = receivE_A;
  rqo.send(null);
}

function receivE_A(){
  if(rqo.readyState == 4){

    my_string=rqo.responseText;

    suche = my_string.indexOf(";");
    vorname = my_string.substring(0, suche);
    my_string = my_string.substring(suche+1,1000);
    document.forms["individuals"].elements['vorname'].value = vorname;

    suche = my_string.indexOf(";");
    name = my_string.substring(0, suche);
    my_string = my_string.substring(suche+1,1000);
    document.forms["individuals"].elements['name'].value = name;

    suche = my_string.indexOf(";");
    ausweisnummer = my_string.substring(0, suche);
    my_string = my_string.substring(suche+1,1000);
    document.forms["individuals"].elements['ausweisnummer'].value = ausweisnummer;

    suche = my_string.indexOf(";");
    geburtsdatum = my_string.substring(0, suche);
    my_string = my_string.substring(suche+1,1000);
    document.forms["individuals"].elements['geburtsdatum'].value = geburtsdatum;

    suche = my_string.indexOf(";");
    strasse = my_string.substring(0, suche);
    my_string = my_string.substring(suche+1,1000);
    document.forms["individuals"].elements['strasse'].value = strasse;

    suche = my_string.indexOf(";");
    plz = my_string.substring(0, suche);
    my_string = my_string.substring(suche+1,1000);
    document.forms["individuals"].elements['plz'].value = plz;

    suche = my_string.indexOf(";");
    ort = my_string.substring(0, suche);
    my_string = my_string.substring(suche+1,1000);
    document.forms["individuals"].elements['ort'].value = ort;

    suche = my_string.indexOf(";");
    telefon = my_string.substring(0, suche);
    my_string = my_string.substring(suche+1,1000);
    document.forms["individuals"].elements['telefon'].value = telefon;

    suche = my_string.indexOf(";");
    telefax = my_string.substring(0, suche);
    my_string = my_string.substring(suche+1,1000);
    document.forms["individuals"].elements['telefax'].value = telefax;

    suche = my_string.indexOf(";");
    email = my_string.substring(0, suche);
    my_string = my_string.substring(suche+1,1000);
    document.forms["individuals"].elements['email'].value = email;

    suche = my_string.indexOf(";");
    geschlecht = my_string.substring(0, suche);
    my_string = my_string.substring(suche+1,1000);
    if(geschlecht==1) {
      document.forms["individuals"].elements[10].checked = false;
      document.forms["individuals"].elements[11].checked = true;
    } else {
      document.forms["individuals"].elements[10].checked = true;
      document.forms["individuals"].elements[11].checked = false;
    }

    suche = my_string.indexOf(";");
    passbild = my_string.substring(0, suche);
    my_string = my_string.substring(suche+1,1000);
    document.images[0].src=passbild;

    suche = my_string.indexOf(";");
    bemerkung = my_string.substring(0, suche);
    document.forms["individuals"].elements['bemerkung'].value = bemerkung;

  }
  return
}

Sieht zwar mächtig aus, ist aber ganz harmlos. Die PHP-Datei "show.php" gibt einfach einen String zurück, der dann schrittweise zerlegt wird, um die entsprechenden Formularinhalte verfügbar zu machen (viele Wege führen nach Rom - dieser ist mir als erster eingefallen und funktioniert ja. Man könnte die Zerlegung ebenso gut in der PHP-Datei handeln).

Nachdem die Formularinhalte ausgegeben sind, werden die Steuerelemente entsprechend gehandelt. Hier wird der Aktion-Button "[Datensatz löschen" aktiviert und "[Datensatz speichern]", "[Neuer Datensatz]" auf unsichtbar gesetzt.

Den Anwendern steht nun frei, den ausgewählten Datensatz zu löschen oder nicht. Um weiter zu kommen muss er zumindest auf den Button "[Datensatz löschen]" klicken (die Aktion kann er abbrechen und von vorne beginnen.

Datensatz löschen:

Der Aktion-Button "[Datensatz löschen]" ruft die Funktion "requesT_C()" mit der "id" des ausgewählten Datensatzes auf.

<input id="kill" onclick=requesT_C(document.forms["individuals"].elements["selected"].value)>:

Die Anwender werden gefragt, ob sie tatsächlich löschen wollen, und wenn ja, wird zunächst die PHP-Datei "delete.php" im Hintergrund gerufen, um den Staz zu löschen. Danach wird mit "table.php" (siehe oben) die Liste aktualisiert.

function requesT_C(id){
  document.getElementById("new").className="show";
  document.getElementById("new").style.visibility="visible";
  document.getElementById("kill").className="dis";
  document.getElementById("kill").style.visibility="hidden";
  ob_kill=confirm('Datensatz wirklich loeschen?');
  if(ob_kill==true){
    rqo.open('get', 'delete.php?id='+ id);
    rqp.open('get', 'table.php');
    rqp.onreadystatechange = receivE_C;
    rqo.send(null);
    rqp.send(null);
  }else{
    return
  }
}

function receivE_C(){
  if(rqp.readyState == 4){
    alert('Datemsatz wurde geloescht.')
    document.getElementById("liste").innerHTML = rqp.responseText;
    for (i=0; i<13 ; i++ ) {
      document.forms["individuals"].elements[i].value='';
    }
  document.forms["individuals"].elements[10].checked = false;
  document.forms["individuals"].elements[11].checked = false;
  document.images[0].src="images/phantom.jpg";
  document.getElementById("save").className="show";
  document.getElementById("save").style.visibility="visible";
  }
  return
}

Nachdem die aktualisierte Liste ausgegeben ist, werden die Steuerelemente gemäß der Steuerlogik aktualisiert. Zum Abschluss noch die Datei:

delete.php:

<?php
$id = $_REQUEST['id'];
$con = mysql_connect("systemconsulting.de","username","passwort");
if (!$con)
  {
    die('Could not connect: ' . mysql_error());
  }
mysql_select_db("datenbank", $con);
$d_string = "delete FROM einwohner WHERE id=" . $id;
mysql_query($d_string);
mysql_close($con);
?>

Was in Ansätzen gezeigt wurde (werden sollte)

Das gezeigte Eingabeformular kann bei allen Mängeln (keine Sicherheits- bzw. Validierungsroutinen, Unvollständigkeit etc), dass mit der heutigen Technologie sehr wohl ganze Applikationen im Browser zu realisieren sind. Ein Vorreiter in diese Richtung ist mit Sicherheit Google - andere werden folgen. Keine Frage: die Pflege und Datensicherung solcher Lösungen kann günstiger nicht realisiert werden.

Die Frage muss aber sein: "Wollen wir künftig tatsächlich alle unsere Informationen in's WEB stellen?" Dazu führt die Weiterentwicklung auf dem vorgestellten Weg und wer wird dabei der WEB-Master ein?

Zugehörende Dateien:

ajax-start.php table.php enter.php show.php delete.php dump.txt style.css