Category: Coding


Editierbare HTML-Tabellen – ediTables ūüėČ

Normalerweise ist das Bearbeiten von HTML (4) Tabellen nicht ohne Weiteres möglich. Im Netz habe ich auf die Schnelle nur Beispiele gefunden, die auf jQuery aufsetzen. Ich wollte das aber ohne jQuery lösen, daher habe ich die folgende Lösung gebastelt. Dieser Ansatz arbeitet (auch) ohne
jQuery und funktioniert gut f√ľr meine Zwecke.

Grundsätzlich funktioniert das so:

1. die Tabellenzellen werden mit einem DoubleClick-Handler (Javascript) ausgestattet, daher ben√∂tigt jede Zelle eine eindeutige ID ‚Äď Meist kein Problem, da die Seiten, gerade bei Verwendung von Tabellen, ja meist ohnehin dynamisch generiert werden (PHP,‚Ķ)

2. der DoubleClick-Handler ersetzt zur Laufzeit (eben bei DoubleClick) den Zelleninhalt durch ein Miniformular, welches wiederum den betreffenden Wert in einem Input-Tag als Wert enthält.

3. bei Verlassen des Feldes (Javascript onblur-Event) wird ein Submit des Formulars ausgel√∂st und die √Ąnderungen werden an die gleiche (oder auch an eine andere) Seite per POST oder GET √ľbergeben.

4. Die Seite wird neu geladen, dabei können die Daten weggeschrieben oder anderweitig ausgewertet werden

Hier also zun√§chst mal die Dateien: ediTable.html und styles.css   styles.css nicht zwingend erforderlich (Rechtsklick, Ziel speichern unter…)

Beginnen wir mal mit dem Javascript Part:

<script type="text/javascript" >

function cellDblClick(item) {
 elem = document.getElementById(item);
 val¬† = elem.innerHTML;
 elem.setAttribute("ondblclick", "");
 size = elem.innerHTML.toString().length;

 elem.innerHTML = "<form name='input_form' action='#' method='get'> " +
  "¬†<input name='id' type='hidden' value='' /> " +
  "¬†<input name='setData' class='textfield_effect' type='text' value='" +
  val + "' size='"+size+"' onblur='document.input_form.submit();' />" +
  "</form> ";
 document.input_form.id. value = item;
 document.input_form.setData.focus();
}
</script>

Hier wird der DoubleClick abgefangen und das Mini-Formular in die Tablecell (td-Tag) geschrieben.
Nebenbei wird noch ein verstecktes Feld gef√ľllt, welches uns sp√§ter bei der Parameter√ľbergabe hilft, die Daten zuzuordnen. Darin steht dann die ID des ge√§nderten Feldes.


<table>
<tr>
<th>Nr</th>
<th style="width:130px;">Name</th>
<th style="width:260px;">Beschreibung</th>
<th>Preis</th>
</tr>
<tr>
<td>001</td>
<td id="N1" ondblclick="cellDblClick('N1');" >Quattro Stagioni</td>
<td id="B1" ondblclick="cellDblClick('B1');" style="white-space:nowrap" >K&auml;se, Salami, Schinken, Broccoli, Champignons</td>
<td id="P1" ondblclick="cellDblClick('P1');" >12,85 ‚ā¨</td>
</tr>
<tr>
<td>002</td>
<td id="N2" ondblclick="cellDblClick('N2');">Tonno</td>
<td id="B2" ondblclick="cellDblClick('B2');" style="white-space:nowrap" >Thunfisch, Zwiebeln, Oliven</td>
<td id="P2" ondblclick="cellDblClick('P2');">11,50 ‚ā¨</td>
</tr>
<tr>
<td>003</td>
<td id="N3" ondblclick="cellDblClick('N3');">Improwisita</td>
<td id="B3" ondblclick="cellDblClick('B3');" style="white-space:nowrap" >Lassen Sie sich &uuml;berraschen.</td>
<td id="P3" ondblclick="cellDblClick('P3');">15,20 ‚ā¨</td>
</tr>
</table>

Eine kleine HTML-Tabelle – sorry, wieder mal ein Pizzabeispiel ūüėČ
Die IDs und die ondblclick Attribute werden im Normalfall von einem PHP-Script oder √Ąhnlichem erzeugt.

Wird nun per Doppelklick eine Zelle zum Bearbeiten göffnet, wird diese Zelle rot gekennzeichnet (CSS).
Beim Verlassen der Zelle (Enter oder Mausklick in einen anderen Bereich), wird das in der Zelle vorhandene Mini-Formular einen Submit ausf√ľhren.
In der Zelle dieser Demo ändert sich zwar nichts, aber den Erfolg der Aktion kann man an der Adresszeile des Browsers erkennen.
Die (hier per GET) gesendeten Parameter m√ľssen nun (vermutlich in PHP oder √§hnlichem Server-Side-Script) vom Server ausgewertet werden.
Es kann ein Update in der DB vorgenommen werden oder was auch immer….

Viel Erfolg…

Wer mit PHP Daten in eine Datenbank bzw. in eine Tabelle schreiben möchte, der kennt normalerweise auch die Struktur der Tabelle. In einigen Fällen braucht man aber vielleicht trotzdem zur Laufzeit genauere Informationen zu den Feldern.

Hier können die folgenden PHP-Funktionen hilfreich sein:

string mysql_field_type(resource $result , int $field_offset) (Achtung: deprecated)
string mysql_field_name(resource $result , int $field_offset) (Achtung: deprecated)
int mysql_field_len(resource $result , int $field_offset) (Achtung: deprecated)

Achtung! Alle diese Funktionen sind, wie die ganze PHP-MySQL-API veraltet. Der Einsatz ist also nur dort sinnvoll, wo ohnehin noch mit der alten MySQL-Extension gearbeitet wird. Generell sollte in Zukunft eher auf mysqli oder PDO_MYSQL gesetzt werden.

Dennoch soll ein kleines Beispiel zeigen, wie die Funktionen genutzt werden können, um Detailinformationen zu den verwendeten Feldern zu erhalten.
————————————



————————————
Ausgabe:

Feldanzahl: 3
Feldname : diameter (int:11)
Feldname : pizza (string:20)
Feldname : veggie (string:3)

Simple Syslogd mit Perl

Zum Empfang von Störungsmeldungen verschiedener Netzwerkdrucker und anderer Geräte kann ggf. die Syslog-Einstellung benutzt werden. Diese Einstellung findet sich z.B. in einigen HP-Druckermodellen (z.B. Laserjet 4200N, 4250N und sicher vielen weiteren). Der Drucker oder auch ein anderes Netzwerkgerät sendet dann kurze Textnachrichten bzw. Störungs- und Statusmeldungen an eine eingestellte Netzwerkadresse. Diese Meldungen können bei der Problemdiagnose helfen.

Als Empfänger kann ein kleines Programm dienen, welches auf einem entpsrechenden Rechner gestartet wird. Die empfangenen Meldungen in der Datei syslog.log gesammelt.
Ich habe dies hier mal als kleines Perl-Script realisiert. Das kann man sicherlich eleganter machen, es war nur ein erster Test mit Perl. ūüėČ Achtung hier sind keine Sicherheitsfeatures implementiert, das Script nimmt jede eingehende Meldung und schreibt sie in die Datei.

Getestet mit Strawberry Perl, unter Windows XP :
syslogd.pl

# perl
# christian-nagel.net
# SimpleSyslogDeamon
# Benutzt den Syslog-Standardport 514 (UPD), um Nachrichten zu empfangen
# und in eine Logdatei zu schreiben. (Z.B. HP-Drucker)
# Datenbankerweiterung (mySQL) kann ggf. ergänzt werden.

use strict;
use IO::Socket;

sub writelog;
my($sock, $oldmsg, $newmsg, $hisaddr, $hishost, $MAXLEN, $PORTNO, $onScreen);

$MAXLEN = 1024;
$PORTNO = 514;
$onScreen = 1;
$sock = IO::Socket::INET->new(LocalPort => $PORTNO, Proto => ‚udp‘) or die „socket: $@“;

print „Warte auf eingehende Syslog messages auf Port $PORTNO\n“;
writelog(„Syslogd started!“);

# Eine Dauerschleife
while (1 eq 1) {
  
  while ($sock->recv($newmsg, $MAXLEN)) {
    my($port, $ipaddr) = sockaddr_in($sock->peername);
    $hishost = gethostbyaddr($ipaddr, AF_INET);
    $hishost = inet_ntoa($ipaddr);
    #print „$hishost: „$newmsg“\n“;
    writelog(„$hishost: $newmsg“, $onScreen);
  }
}

sub writelog {
  my($timedata);
  my($sec,$min,$hour,$mday,$mon,$year,$wday,$yday,$isdst);

  ($sec,$min,$hour,$mday,$mon,$year,$wday,$yday,$isdst)=localtime(time);
  $timedata = sprintf „%4d-%02d-%02d %02d:%02d:%02d „,$year+1900,$mon+1,$mday,$hour,$min,$sec;

  open(MYLOG, „>>syslog.log“);
  print MYLOG $timedata.“ „.$_[0].“\n“;

  if ($_[1] eq 1) {
    print $timedata.“ „.$_[0].“\n“;
  }

  close MYLOG;
}

Bei der √úbergabe von Daten eines Eingabeformulares an ein PHP-Skript legt man sich im Normalfall auf eine Art (GET / POST) der Daten√ľbergabe fest. Werden die Daten von dem Formular nach der GET Spezifikation (√úbergabe im URL) √ľbergeben, so nutzt man beim Empf√§ngerscript in PHP f√ľr gew√∂hnlich die Schreibweise $_GET['parameter'] f√ľr den Zugriff auf die Daten. Bei √úbergabe per POST wird der Wert entsprechend mit $_POST['parameter'] ermittelt.
Wenn nicht klar ist, welche Art der Parameter√ľbergabe vom Aufrufer benutzt wird – oder wenn (aus welchen Gr√ľnden auch immer) beide Methoden ber√ľcksichtigt werden m√ľssen, dann kann die Abfrage √ľber $_REQUEST['parametername'] eine Alternative sein. Bei der Nutzung von $_REQUEST ist es egal, √ľber welche Methode der Wert √ľbergeben wurde.

Beispiel:

Man nehme folgendes Formular als HTML/PHP Eingabeseite:

<html>
<title>Test $_REQUEST</title>
<head></head><body>
<form action="test_request.php" method="get">
Eingabe <input type = "text" name="fancy_param" value="">
<input type = "submit" value="go">
</form></body>
</html>

und die PHP-Datei test_request.php

<?PHP
echo "√úbergebener Wert (REQUEST): ".$_REQUEST['fancy_param']."<br />";
echo "Übergebener Wert (GET)    :".$_GET['fancy_param']."<br />";
echo "Übergebener Wert (POST)   : ".$_POST['fancy_param']."<br />";
echo "--------------------------<br />";
echo "Manipulation von \$_GET...<br />";
$_GET['fancy_param']="0987654321";
echo "√úbergebener Wert (REQUEST): ".$_REQUEST['fancy_param']."<br />";
echo "<del>√úbergebener</del> Wert (GET): ".$_GET['fancy_param']."<br />";
echo "√úbergebener Wert (POST): ".$_POST['fancy_param']."<br />";
?>

Bei Eingabe von „12345“ im Eingabefeld erhalten wir folgende Ausgabe:

√úbergebener Wert (REQUEST): 12345
√úbergebener Wert (GET) :12345
√úbergebener Wert (POST) :
————————–
Manipulation von $_GET…
√úbergebener Wert (REQUEST): 12345
√úbergebener Wert (GET): 0987654321
√úbergebener Wert (POST):

Hier wird gleichzeitig deutlich, da√ü eine Manipulation des Wertes in $_GET[‚fancy_param‘] sich zur Laufzeit nicht in $_REQUEST[‚fancy_param‘] auswirkt. Nach der Manipulation der Daten innerhalb des PHP Scriptes haben beide Ausdr√ľcke unterschiedliche Werte.

Um die POST Methode zu testen, ist im HTML-Code das Attribut ‚method‘ des form-Tags auf method="post" zu √§ndern.