9a sessió: Aplicacions.

Bé, ara ens podem preguntar: Què podem fer amb PERL i JavaScript? Potser la meva resposta esveri a molts: Tot! De fet, considero aquest binomi com la base de la programació al segle XXI: sense monopolis, completa, independent del temps (sempre trobarem compatibilitat amb versions anteriors), de la màquina (multiplataforma), de l'espai (treballem amb connexions IP), ... Fins i tot podem ampliar el ventall de possibilitats als telèfons mòbils gràcies a la tecnologia WAP.

Els meus alumnes de 1r de batxillerat del curs 2000-2001 desenvolupen projectes que en són un exemple: comptadors de visites gràfics, albums de fotografies amb comentaris, reserva d'aules, agenda, fòrums, taulers de compra-venda, ...

Avui en dia el S.O. Linux es pot administrar via web (webmin, linuxconf, ...). Al meu centre els professors i alumnes poden accedir al seu espai de disc al servidor des de casa, presentar i corregir treballs, ... Actualment una alumna està realitzant el seu treball de recerca dissenyant una estació metereològica digital que ofereix dades a Internet. Realment, JavaScript + PERL = binomi de futur.

Veiem un exemple. Al meu centre continuament tenim incidències sobre el funcionament dels ordinadors: ratolins bruts, falta de tinta o toner a les impressores, desconfiguració de programes, ... Són petits problemes de fàcil solució, el que falla és la comunicació: Quin ordinador dius? Doncs no he vist cap nota! Com que això fa una setmana que passa? Per què no m'ho has dit abans! El que necessita el coordinador d'informàtica és una eina on centralizar la informació, de fàcil ús per part dels membres de la comunitat educativa. Veiem la meva solució:

Com veieu, la pàgina té tres frames:

<html>
<head>
<title>Manteniment Aula d'informàtica Argo</title>
</head>
<frameset cols="570,*">
<frame name="plano" src="planoargo.html">
<frameset rows="200,*">
<frame name="actual" src="instrargo.html">
<frame name="informe" src="/cgi-bin/argo.cgi?EQUIP=SALA">
</frameset>
</frameset>
</html>

El primer frame conté un mapa sensible amb el plànol de l'aula, realitzat amb l'AutoSketch:

<html>
<head>
<script language="javascript">
function selecciona (equip)
{
destino=equip+".txt";
formulario="/cgi-bin/argo.cgi?EQUIP="+equip;
parent.actual.location=destino;
parent.informe.location=formulario;
}
</script>
</head>
<body>
<h2><center>Incidències aula d'informàtica Argo</center></h2>
<map name="mapa">
<area shape="rect" coords="216,17,259,58" href="javascript:selecciona('E-41')" alt="E-41">
<area shape="rect" coords="299,17,365,58" href="javascript:selecciona('E-42')" alt="E-42">
<area shape="rect" coords="384,17,435,58" href="javascript:selecciona('E-43')" alt="E-43">
<area shape="rect" coords="467,17,510,58" href="javascript:selecciona('E-44')" alt="E-44">
<area shape="rect" coords="463,269,510,312" href="javascript:selecciona('E-45')" alt="E-45">
<area shape="rect" coords="380,269,430,312" href="javascript:selecciona('E-46')" alt="E-46">
<area shape="rect" coords="300,269,350,312" href="javascript:selecciona('E-47')" alt="E-47">
<area shape="rect" coords="220,269,260,312" href="javascript:selecciona('E-48')" alt="E-48">
<area shape="rect" coords="125,269,190,312" href="javascript:selecciona('E-4P')" alt="E-4P">
<area shape="default" href="javascript:selecciona('ARGO')" alt="Aula ARGO">
</map>
<img src="argo.jpg" usemap="#mapa" border="0">
</body>
</html>

Al clicar sobre un ordinador, els altres dos frames mostren el llistat d'incidències per a aquell ordinador i un formulari personalitzat per a aquell ordinador. Per poder fer dos enllaços simultanis faig servir una funció JavaScript.

El segon frame mostra l'arxiu de text corresponent a l'ordinador seleccionat (l'aula sencera inicialment). Aquest arxiu de text té el permissos adients (666) per permetre la seva actualització per part del servidor.

El tercer frame mostra un formulari HTML:

<html>
<head>
</head>
<body>
<h3>Informe d'incidències equip E-4X</h3>
<form action="">
<input name="EQUIP" type="hidden" value="E-4X">
<textarea name="TEXTO" rows="4" cols="23" ></textarea><br><br>
<center><input type="submit"></center>
</form>
</body>
</html>

Aquest formulari té la paraula clau E-4X que es substitueix per l'equip seleccionat mitjançant un script PERL:

#!/usr/bin/perl
print "content-type: text/html\n\n";
if ($ENV{'REQUEST_METHOD'}eq "POST")
{
    read(STDIN,$entrada,$ENV{'CONTENT_LENGTH'});
    }
elsif ($ENV{'REQUEST_METHOD'}eq "GET")
{
    $entrada= $ENV{'QUERY_STRING'};
    }
else
{
    $entrada= $ARG[0];
    }
foreach (split(/\&/,$entrada))
{
    ($clave,$valor)=split(/=/,$_);
    $clave =~ tr/+/ /;
    $clave =~ s/%([\dA-Fa-f][\dA-Fa-f])/pack ("C", hex ($1))/eg;
    $valor =~ tr/+/ /;
    $valor =~ s/%([\dA-Fa-f][\dA-Fa-f])/pack ("C", hex ($1))/eg;
    $parametro{$clave}=$valor;
    }

$equip=$parametro{'EQUIP'};

open (MODELO,"formargo.html");
while (<MODELO>)
{
    s/E-4X/$equip/g;
    print;
    }
close (MODELO);

Un altre script PERL s'encarrega d'afegir la nova informació al fitxer de text:

$equip=$parametro{'EQUIP'};
$contenido=$parametro{'TEXTO'};
$fecha=`date`;

open (SALIDA,">>/home/httpd/html/argo/$equip.txt");
print SALIDA "* $fecha";
print SALIDA "$contenido\n";
close (SALIDA);

print "<h3>Informe afegit amb exit</h3>";
print "<b>Equip:</b> $equip<br>";
print "<b>Data:</b> $fecha<br>";
print "<b>Text:</b><pre>$contenido</pre>";

print "<script languaje=\"javascript\">";
print "parent.actual.location.reload();";
print "</script>";

Fixeu-vos com al final del codi PERL es genera un script JavaScript per actualitzar el segon frame amb el nou fitxer de text.

Naturalment, el coordinador d'informàtica fa servir una pàgina semblant per treure les incidències resoltes, consultar el maquinari de l'equip, ...

9a sessió: Aplicacions.

© Jordi Orts, març 2001