Forum: PC-Programmierung HTML -> Javascript -> CGI


von Wendels B. (wendelsberg)


Lesenswert?

Ich verzweifle an einer (aus meiner Sicht) eigentlich einfachen Aufgabe.
Mit Webseitenprogrammierung habe ich nur wenig Erfahrungen.
Um ein Diagramm mit Daten fuer 12 Stunden anzuzeigen wird ein 
HTML-Dokument aufgerufen mit:
1
http://server/diagramm_daten_12h.htm
Im HTML wird dann ein Perlscript zur Aufbereitung der Daten fuer die 
richtige Anzahl  von Minuten aufgerufen:
1
<script src="./daten_csv_schreiben.cgi?nr_of_min=720"></script>
Es stoerte mich schon laenger, dass ich fuer verschiedene Zeitspannen 
verschiedene HTMLs haben muss. Also habe ich den Aufruf in einen 
Parameter verlagert:
1
http://server/diagramm_daten.htm?zahl=2222
Ich bin soweit gekommen, dass im HTML der Parameter "zahl" extrahiert 
und angezeigt wird.
1
  <body>  
2
    <script type="text/javascript">
3
      const queryString = window.location.search;
4
      const urlParams = new URLSearchParams(queryString);
5
      const ANZAHL = urlParams.get('zahl');
6
      document.write(ANZAHL);
7
    </script>
8
9
<-- hier wird das Perlscript zur Aufbereitung der Daten aufgerufen -->
10
<script src="./daten_csv_schreiben.cgi?nr_of_min=720"></script>

Wie geht das, dass ich die "720" durch den Inhalt von ANZAHL ersetzen 
kann?
Dann braeuchte ich nur noch ein HTML mit dem Zeitraum in Minuten im 
Aufruf.
1
http://server/diagramm_daten.htm?zahl=720
Randbedingung: es gibt kein PHP.

wendelsberg

: Verschoben durch Admin
Beitrag #7288990 wurde von einem Moderator gelöscht.
von Andreas S. (andreas) (Admin) Benutzerseite


Lesenswert?

Ich würde das mit der fetch-API machen. Damit kannst du eine externe 
Ressource laden (in deinem Fall die URI des CGI-Skripts), ohne dafür 
erst ein HTML-Tag erstellen zu müssen. Dein CGI müsste dann auch keinen 
Javascript-Code zurückgeben, sondern könnte einfach die Daten ein einem 
beliebigen Format liefern (z.B. JSON) das du dann per JavaScript 
weiterverarbeiten kannst. Hier ist ein Beispiel: 
https://developer.mozilla.org/en-US/docs/Web/API/Response/json

von Ein Kommentar (Gast)


Lesenswert?

Es sollte eine einfache Aufgabe sein.

Das alte System, mit den CGI Scripten ist ausgestorben. Hat nicht 
wirklich funktioniert. Gab an allen Ecken und Enden Probleme.

Heutzutage macht man eine Mischung aus HTML und in Javascript 
geschriebenen Anwendungsprogrammen. Im Browser läuft ein 
Anwendungsprogramm, das auf Benutzereingaben reagiert, Daten holt und 
als HTML ausgibt.

Eigentlich ist das, was Andreas vorgeschlagen hat, 'Request' und 
'document.createElement' der richtige Weg.

Aber da brauchst du einiges an Einarbeitungszeit. Und die Frameworks, 
wie Angular, Ember, React... machen die Sache nicht wirklich einfacher.

von Andreas S. (andreas) (Admin) Benutzerseite


Lesenswert?

Naja, ich würde da mal auf dem Teppich bleiben. Nur weil man ein 
Diagramm mit dynamisch geladenen Daten haben möchte, muss man noch lange 
keine React-App oder ähnliches entwickeln.

von Ein Kommentar (Gast)


Lesenswert?

Kann nicht sein. Bisher ist noch kein einziger Webprogrammierer auf dem 
Teppich geblieben. Es muss irgendeinen Grund geben, warum ein 
document.createElement unter 30 Layern an Frameworks und Build-Tools 
versteckt werden muss.

von Daniel A. (daniel-a)


Lesenswert?

Ein Kommentar schrieb:
> Es muss irgendeinen Grund geben, warum ein
> document.createElement unter 30 Layern an Frameworks und Build-Tools
> versteckt werden muss.

Der Grund ist simpel: Inversion of Control & Modularisierung. Einzelne 
Komponenten und deren Funktion von bestimmten Seiten entkoppeln, um 
diese einfach wiederverwendbar zu machen.

Es ist nur so, dass die meisten Anwender das gar nicht verstehen. DIe 
denken einfach, cool, hip, besser, packen wir auch noch rein! (und 
irgend etwas selber machen ist ja unprofessionell und unwartbar).

: Bearbeitet durch User
von Daniel A. (daniel-a)


Lesenswert?

Wendels B. schrieb:
> Ich bin soweit gekommen, dass im HTML der Parameter "zahl" extrahiert
> und angezeigt wird.

Du kannst das einfach leicht anpassen:
1
document.write(`<script src="./daten_csv_schreiben.cgi?nr_of_min=${+ANZAHL}"></script>`);

Ist zwar nicht mehr zeitgemäss, sollte aber gehen. Und falls du noch 
einen default für ANZAHL willst, schreib einfach "+ANZAHL||234" stat 
+ANZAHL.

von Karl Käfer (Gast)


Lesenswert?

Wendels B. schrieb:
> Ich verzweifle an einer (aus meiner Sicht) eigentlich einfachen Aufgabe.
> Mit Webseitenprogrammierung habe ich nur wenig Erfahrungen.
> Um ein Diagramm mit Daten fuer 12 Stunden anzuzeigen wird ein
> HTML-Dokument aufgerufen mit:
> [...]
>
1
> <script src="./daten_csv_schreiben.cgi?nr_of_min=720"></script>
2
>
> Es stoerte mich schon laenger, dass ich fuer verschiedene Zeitspannen
> verschiedene HTMLs haben muss. Also habe ich den Aufruf in einen
> Parameter verlagert: [...]

Andreas und Daniel haben Dir ja schon sehr gute Tipps gegeben, denen ich 
gerne noch eine andere Idee hinzufügen möchte, nämlich interaktive Plots 
mit einer entsprechenden Library. Davon gibt es etliche im Netz, bekannt 
wäre beispielweise D3.js, aber das ist ein ziemliches Monster und bedarf 
einiger intensiver Einarbeitungszeit -- kann aber auch viel.

Zwei einfachere Plottinglibraries, die ich hie und da verwendet habe, 
sind
Flot [1] und jqPlot [2]. Damit kannst Du Deine Daten gleich vom CGI 
laden (oder sie über das CGI und Fetch- oder eine andere AJAX-API 
nachladen) und Deine Diagramme interaktiv mit der Maus bedienen.


[1] https://www.flotcharts.org/
[2] http://www.jqplot.com/

von Wendels B. (wendelsberg)


Lesenswert?

Daniel A. schrieb:
> Ist zwar nicht mehr zeitgemäss,
Das ist mir egal, ganz im Gegenteil. Der Server ist ein Olinuxino A10, 
der ist auch nicht wirklich das Rechenleistungsmonster, tut aber seit 
Jahren treue Dienste.

Karl Käfer schrieb:
> noch eine andere Idee hinzufügen möchte, nämlich interaktive Plots
> mit einer entsprechenden Library

Nein, das ist nicht das Problem.
Das hier:
1
<-- hier wird das Perlscript zur Aufbereitung der Daten aufgerufen -->
2
<script src="./daten_csv_schreiben.cgi?nr_of_min=720"></script>
erzeugt eine data.csv in /dev/shm, die dann gleich danach in eine solche 
Diagrammerzeugungslibrary (hier highcharts) eingelesen und dargestellt 
wird, das funktioniert auch seit Jahren prima.

Knackpunkt ist wirklich nur, dass der Parameter aus der URL (zahl=2222) 
in den Aufruf des cgi-Scriptes uebergeben wird und dort die 
beispielhafte "720" ersetzt.

Der Vorschlag von Daniel tut auch leider nicht das, was er soll.
1
  <body>  
2
    <script type="text/javascript">
3
      const queryString = window.location.search;
4
      const urlParams = new URLSearchParams(queryString);
5
      const ANZAHL = urlParams.get('zahl');
6
      document.write(ANZAHL);
7
      document.write(`<script src="./daten_csv_schreiben.cgi?nr_of_min=${+ANZAHL}"></script>`);
8
    </script>
ruft das cgi-Script nicht auf, ohne dass Fehler im apache-log 
erscheinen.
1
<-- hier wird das Perlscript zur Aufbereitung der Daten aufgerufen -->
2
document.write(`<script src="./daten_csv_schreiben.cgi?nr_of_min=${+ANZAHL}"></script>`);
funktioniert auch nicht, vermutlich, weil 1. "ANZAHL" aussserhalb von 
<script type="text/javascript"> ...     </script> nicht mehr sichtbar 
ist und 2. weil "document.write" in reinem HTML ja sowieso nicht 
existiert.
1
<-- hier wird das Perlscript zur Aufbereitung der Daten aufgerufen -->
2
<script src="./daten_csv_schreiben.cgi?nr_of_min=${+ANZAHL}"></script>
erzeugt immerhin einen Eintrag im apache-log (ist an der Stelle ANZAHL 
noch gueltig?)
1
[Sun Dec 18 13:22:58.297944 2022] [cgid:error] [pid 1998:tid 2952737824] [client 192.168.0.112:50268] AH01264: script not found or unable to stat: /va
2
r/www/html/daten_csv_schreiben.cgi, referer: http://daxbaseo/diagramm_betriebsdaten_12h.htm?zahl=12

wendelsberg

von Daniel A. (daniel-a)


Lesenswert?

Versuche es mal mit:
1
document.write(`<script src="./daten_csv_schreiben.cgi?nr_of_min=${+ANZAHL}"><`+`/script>`);

Innerhalb eines <script> tag schliesst das </script> im template string 
sonst den script bereich frühzeitig ab.

Wendels B. schrieb:
> funktioniert auch nicht, vermutlich, weil 1. "ANZAHL" aussserhalb von
> <script type="text/javascript"> ...     </script> nicht mehr sichtbar
> ist und 2. weil "document.write" in reinem HTML ja sowieso nicht
> existiert.

Auserhalb eines script blocks wird das document.write sowieso nicht mehr 
als JS ausgewerted, sondern als Text. das document.write(` ist dann nur 
Text, das <script 
src="./daten_csv_schreiben.cgi?nr_of_min=${+ANZAHL}"></script> ein 
normaler script tag, und ${+ANZAHL} hat keine spezielle bedeutung.

von Wendels B. (wendelsberg)


Lesenswert?

Daniel A. schrieb:
> Innerhalb eines <script> tag schliesst das </script> im template string
> sonst den script bereich frühzeitig ab.

Das war die Ursache, jetzt funktioniert es.
Das sind halt Fallstricke, ueber die man ohne Erfahrung einfach faellt.

Vielen Dank und einen schoenen Sonntag noch.

wendelsberg

Bitte melde dich an um einen Beitrag zu schreiben. Anmeldung ist kostenlos und dauert nur eine Minute.
Bestehender Account
Schon ein Account bei Google/GoogleMail? Keine Anmeldung erforderlich!
Mit Google-Account einloggen
Noch kein Account? Hier anmelden.