Sei sulla pagina 1di 3

Web server

In informatica un server web (o web server) è un’applicazione software che, in esecuzione su un


server, è in grado di gestire le richieste di trasferimento di pagine web di un client, tipicamente un
web browser. La comunicazione tra server e client avviene tramite il protocollo HTTP, che utilizza
la porta TCP 80. Per informazioni sul web server dei nostri sistemi rimando al relativo capitolo del
Manuale programmazione IEC61131-3.

Pagine dinamiche
(Download esempi) La caratteristica più importante del web server web dei nostri sistemi è la
possibilità di gestire le pagine dinamiche. Una pagina web dinamica è una pagina il cui contenuto,
in tutto o in parte, è generato sul momento dal server, potendo dunque essere diversa ogni volta che
viene richiamata, consentendo quindi un’interattività con l’utente. Per aiutare nella realizzazione
delle pagine dinamiche forniamo esempi con programma SlimLine e pagine web.
TAGs: All’interno di pagine con estensione htm è possibile inserire TAGs che verranno
automaticamente sostituiti dal server con il valore della variabile PLC. I TAGs hanno il costrutto di
un commento HTML, ad esempio il TAG “<!–[‘%d’, UINT, 10]->” verrà sostituito con il valore
della variabile UINT allocata nella DB100.10.
ARGs: All’interno di pagine con estensione htm è possibile inserire ARGs che permettono di
impostare da pagina web valori di variabili PLC. Per definire le ARGs si utilizzano i nomi degli
oggetti che saranno inviati in POST al server, ad esempio un oggetto input di nome “UINT 12”
permette di impostare con il valore definito la variabile PLC allocata all’indirizzo DB100.12.
Ecco una pagina html con la visualizzazione di un TAG e con l’impostazione di un ARG.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>SlimLine - Simple page</title>
</head>
<body">
DB100.10: <!--['%d', UINT, 10]--></br>
<form id="MyForm" name="MyForm" method="post" action="DPage.htm">
DB100.12: <input name="UINT 12" type="text" size="5" maxlength="10" value="<!--
['%d', UINT, 12]-->">
<input type="submit" id="MyButton" value="Save"/>
</form>
</body>
</html>

Salvando il testo riportato in un file, esempio DPage.htm, e trasferendo il file nella cartella C:/Web
(o cartella Storage sui sistemi ARM 7) di SlimLine, sarà possibile visualizzare la pagina web
risultante semplicemente digitando nel proprio browser l’indirizzo IP del dispositivo seguito dal
nome della pagina. Come si vede nella riga superiore viene visualizzato il valore della variabile
PLC DB100.10 mentre impostando un valore nella casella di testo della riga inferiore e agendo sul
tasto Save sarà possibile impostare il valore della variabile PLC DB100.12. In una pagina web
possono essere visualizzate e impostate tutte le variabili desiderate, si consiglia comunque di non
esagerare con il numero di variabili, è preferibile suddividerle in più pagine.

Esempio: WebObjects

Semplicemente utilizzando gli oggetti messi a disposizione dal linguaggio HTML si possono fare
pagine con un piacevole impatto grafico come è possibile vedere in questo esempio.
Check box: Eseguendo il tick si attiva una variabile BOOL, lo stato dei primi 2 è trasferito anche
sulle uscite logiche del modulo CPU.
Radio button (A): Questi radio button riportano lo stato degli ingressi del modulo CPU. Come vedi
hanno attributo name diverso, in questo modo sono oggetti unici e tra di loro slegati. Siccome sono
di sola visualizzazione sono stati disabilitati in modo da non essere modificabili da pagina web.
Radio button (B): Questi radio button hanno lo stesso attributo name è quindi agendo su di uno si
disabilita l’altro. Agiscono su una variabile USINT, che viene valorizzata in base alla selezione.
Text field: Definendo il valore viene valorizzata una variabile UINT con il valore definito.
Progress bar: Viene visualizzata una barra progressiva con il valore impostato nel campo Text field.
Select: Scegliendo una delle opzioni viene valorizzata una variabile USINT.
Per inviare i valori allo SlimLine occorre agire sul tasto Save, agendo sul tasto Reload si richiede la
pagina al server aggiornando i valori delle variabili SlimLine. In questo esempio ogni volta che
desideriamo visualizzare i nuovi valori occorre ricaricare l’intera pagina, utilizzando la tecnica
AJAX è possibile gestire l’aggiornamento automatico delle variabili.

Aggiornamento pagine con AJAX


AJAX, acronimo di Asynchronous JavaScript and XML, è una tecnica di sviluppo software per la
realizzazione di applicazioni web interattive. Lo sviluppo di applicazioni HTML con AJAX si basa
su uno scambio di dati in background fra web browser e server, che consente l’aggiornamento
dinamico di una pagina web senza esplicito ricaricamento da parte dell’utente. Per gestire
l’aggiornamento nella pagina deve essere inserito uno script java che gestisce le richieste AJAX a
tal scopo forniamo lo script “Sfw191a010.js” che dovrà essere incluso nella pagina web.
Esempio: AJAXUpdate

In questo esempio il sistema SlimLine esegue l’incremento ad ogni secondo di un contatore (Da 0 a
999), il valore di conteggio è visualizzato sulla pagina web. Sulla pagina è gestita anche la
visualizzazione del valore suddiviso nei 3 digits.
Il valore di Counter value (id=”Counter”) può essere impostato da pagina, i valori di Counter
digits (id=”Hundreds”, id=”Tens”, id=”Units”) sono solo in visualizzazione. Impostando Counter
value ed inviando il valore con il tasto Save il conteggio continua dal valore impostato. Ecco il
codice javascript presente nella head della pagina che ne gestisce l’aggiornamento ad ogni secondo.
<script src="Sfw191a010.js"></script>
<script>
function SetupValues(PContent)
{
var Value=new Array(); //Array valori ricevuti da server
if (PContent.indexOf('|') != -1)
{
Value=PContent.split('|');
if (document.activeElement !== document.getElementById("Counter"))
document.getElementById("Counter").value=Value[0];
document.getElementById("Units").value=Value[1];
document.getElementById("Tens").value=Value[2];
document.getElementById("Hundreds").value=Value[3];
}
}
</script>
</head>
<body onLoad="setInterval('AJAXSendRequest(\'Values.htm\')', 1000)">

Sul caricamento della pagina viene impostato il tempo di esecuzione della funzione AJAX, ad ogni
secondo viene richiesta al server la pagina Values.htm (Che deve essere caricata nella cartella
C:/Web). Questa pagina contiene i TAGs relativi alle variabili da visualizzare il cui valore viene
ritornato a passato alla funzione SetupValues che lo parsa e copia i valori negli oggetti di
visualizzazione. La pagina Values.htm ritorna i valori delle 4 variabili separati dal simbolo |. Ecco il
listato di questa pagina.
<!--['%d', UINT, 0]-->|<!--['%d', UINT, 2]-->|<!--['%d', UINT, 4]-->|<!--['%d',
UINT, 6]-->

Come vedete contiene dei TAGs che saranno sostituiti con il valore delle rispettive variabili.
Siccome i campi sono costantemente aggiornati in AJAX dovendo gestire l’impostazione del valore
di Counter value (id campo Counter), è stato inserito un controllo sull’aggiornamento del suo
valore, quando l’oggetto è attivo (Cursore del mouse sull’oggetto) l’aggiornamento si arresta.