inclform-Plugin: Einbinden von Berechnungsformularen durch Integration von PHP-, HTML- und JavaScript-Quelltext in Wiki-Seiten

Mittels des inclform-Plugins werden interaktive Berechnungen in Wiki-Seiten eingebunden, wie beispielsweise die Schaumberechnungen.

Einbindung einer Datei auf einer Wiki-Seite

Die Einbindung einer Textdatei mit HTML-, PHP- oder JavaScript-Quellcode und der Dateiendung .php erfolgt mit dem folgenden Kommando:

~~INCLFORM=dateiname~~

wobei der Dateiname ohne die Dateiendung .php angegeben wird.

Der Aufruf

~~INCLFORM=gewuenschte_schaummenge~~

würde die Datei gewuenschte_schaummenge.php einbinden, die sich im entsprechenden Verzeichnis befindet. Dieses ist standardmäßig /data/media/berechnungen, ausgehend vom Wiki-Hauptverzeichnis. Dieses Verzeichnis kann in der Konfiguration geändert werden, beachten Sie in diesem Fall aber, dass Sie die derzeit im Verzeichnis enthaltenen Dateien ebenfalls an den neuen Ort verschieben müssen, damit die bereits integrierten Berechnungen im Einsatzleiterwiki weiterhin funktionieren.

Eigene Berechnungen programmieren

Selbstverständlich können Sie auch eigene Berechnungen programmieren. Grundsätzlich können Sie dafür jede Technik verwenden, die Sie in einer php-Datei aufrufen können.

Die bestehenden Berechnungen sind in JavaScript geschrieben. Zur Demonstration hier ein vergleichsweise einfaches Beispiel, welches nur ein Eingabefeld besitzt, nämlich die Berechnung von Sicherheitsabständen zu Flüssiggastanks. Grundlegende Kenntnisse von HTML und JavaScript sind zum Verständnis erforderlich.

Eingabeformular und Ausgabe

Zuerst wird das Eingabeformular erzeugt. Es handelt sich dabei um ein ganz normales HTML-Formular. Durch den Klick auf den Button werden die Funktionen input_abstand_kugeltank() zur Validierung der Eingabewerte und output_abstand_kugeltank() zur Berechnung der Ergebnisse und deren Ausgabe aufgerufen. Zusätzlich definieren wir gleich zwei div-Elemente, in denen die Ausgabe erscheinen soll.

<form name="abstand_kugeltank_form"> <table> <tbody> <tr> <td>Radius des Kugeltanks</td> <td> <input name="input_abstand_kugeltank_form_d" size="10" value="" type="text"> m</td> </tr> </tbody> </table> <!-- Aufruf der Funktionen input_abstand_kugeltank() und output_abstand_kugeltank() beim Klicken auf folgende Schaltfläche --> <p><input value=" Sicherheitsabstand berechnen " onclick="input_abstand_kugeltank(),output_abstand_kugeltank()" type="button"></p> </form> <div id="abstand_kugeltank_ueberschrift_div"></div> <div id="abstand_kugeltank_gefaehrdungsradius_div"></div>

Globale Variablendefinition und Validierung der Eingabewerte

Zuerst wird die JavaScript-Umgebung geöffnet. Danach folgt die Definition globaler Variablen, also die auch außerhalb der Funktionen verwendet werden können.

In der function input_abstand_kugeltank() wird zuerst der Wert aus dem Eingabefeld des Formulars ind die Variable abstand_kugeltank_d übernommen und danach ein etwaiges Komma durch einen Punkt ersetzt, da die Nachkommastellen bei Zahlen in JavaScript durch einen Punkt anstelle eines Kommas abgetrennt werden.

<script language="JavaScript">
// Globale Variablen
var abstand_kugeltank_d;
// Ein-/Ausgabe-Funktionen
function input_abstand_kugeltank()
{
abstand_kugeltank_d = document.abstand_kugeltank_form.input_abstand_kugeltank_form_d.value;
abstand_kugeltank_d = abstand_kugeltank_d.replace(/,/, ".");
}

Berechnung und Ausgabe

Da zum Rechnen eine weitere Variable benötigt wird, muss diese als erstes nach Öffnen der Funktion definiert werden.

Danach erfolgt eine Prüfung, ob ein gültiger Eingabewert eingegeben wurde, in diesem Fall ob der Wert nicht 0 ist.

Ist dies der Fall, wird das Ergebnis berechnet (worauf an dieser Stelle nicht weiter eingegangen werden soll).

Nun folgt die Ausgabe. Hier wird mittels JavaScript das bereits auf der Seite befindliche, aber leere div-Element vom Anfang nachträglich geändert bzw. mit Inhalt gefüllt, und das Script danach wieder geschlossen. Das war schon alles.

function output_abstand_kugeltank(){
var abstand_kugeltank_gefaehrdungsradius;
if (abstand_kugeltank_d == 0)
{
alert("Es wurde kein Wert eingegeben!");
}
else
{
abstand_kugeltank_gefaehrdungsradius = Math.round(77*Math.pow((4/3*3.14*Math.pow(abstand_kugeltank_d,3)*0.5),(1/3)));
// Ausgabe
document.getElementById("abstand_kugeltank_ueberschrift_div").innerHTML = ("<b>Ergebnisse der Berechnung der Sicherheitsabst&auml;nde von Kugeltanks</b>");
document.getElementById("abstand_kugeltank_gefaehrdungsradius_div").innerHTML = ("Gef&auml;hrdungsradius " + abstand_kugeltank_gefaehrdungsradius + " m ");
}
}
</script>

Der komplette Code

Leider können die bis jetzt aufgeführten Elemente nicht einfach nacheinander auf eine Seite geschrieben werden, da die JavaScript-Funktionen vor dem Formular stehen müssen. Daher ergibt sich eine andere Reihenfolge. Hier der komplette Code:

<script language="JavaScript"> // Globale Variablen var abstand_kugeltank_d; // Ein-/Ausgabe-Funktionen function input_abstand_kugeltank() { abstand_kugeltank_d = document.abstand_kugeltank_form.input_abstand_kugeltank_form_d.value; abstand_kugeltank_d = abstand_kugeltank_d.replace(/,/, "."); } function output_abstand_kugeltank(){ var abstand_kugeltank_gefaehrdungsradius; if (abstand_kugeltank_d == 0) { alert("Es wurde kein Wert eingegeben!"); } else { abstand_kugeltank_gefaehrdungsradius = Math.round(77*Math.pow((4/3*3.14*Math.pow(abstand_kugeltank_d,3)*0.5),(1/3))); // Ausgabe document.getElementById("abstand_kugeltank_ueberschrift_div").innerHTML = ("<b>Ergebnisse der Berechnung der Sicherheitsabst&auml;nde von Kugeltanks</b>"); document.getElementById("abstand_kugeltank_gefaehrdungsradius_div").innerHTML = ("Gef&auml;hrdungsradius " + abstand_kugeltank_gefaehrdungsradius + " m "); } } </script> </p><form name="abstand_kugeltank_form"> <table> <tbody> <tr> <td>Radius des Kugeltanks</td> <td> <input name="input_abstand_kugeltank_form_d" size="10" value="" type="text"> m</td> </tr> </tbody> </table> <!-- Aufruf der Funktionen input_abstand_kugeltank() und output_abstand_kugeltank() beim Klicken auf folgende Schaltfläche --> <p><input value=" Sicherheitsabstand berechnen " onclick="input_abstand_kugeltank(),output_abstand_kugeltank()" type="button"></p> </form> <div id="abstand_kugeltank_ueberschrift_div"></div> <div id="abstand_kugeltank_gefaehrdungsradius_div"></div>

Installation des Plugins

Dieses Plugin ist in der Standard-Einsatzleiterwiki-Installation enthalten und sollte daher nicht erst installiert werden müssen. Eine Anleitung, wie Sie ein Plugin installieren, finden Sie auf dieser Seite.

Dokumentation des inclform-Plugins auf dokuwiki.org

Tracedump:

newBaseSize: 16pt
newBaseSizeInPt: 16