Programmation des Sites Web

Deuxième Année ENSIMAG

ENSIMAG 2000 - 2001

James L. Crowley

Séance 5

10 novembre 2000

TD 2 - Maintenance d'un agenda éléctronique.

Le but de l'exercice est d'introduire un certain nombre de constructions en PERL utile pour la programmation du CGI. Dans cet exercice, vous allez réaliser une page "create-plan.html" et un script "create-plan.cgi" pour maintenir un agenda électronique dans un répertoire nommé ~/www/plan. L'agenda sera composé d'un fichier ".html" par rendez-vous. Le nom de chaque fichier indiquera la date et l'heure du rendez-vous. Par exemple, le nom du fichier pour un rendez-vous pour ce cours sera : 2000.3.16.11.30.html. Le fichier contiendra 6 champs de texte : qui, quand, durée, sujet, lieu, description. Le champ "description" est un texte de format libre comportant jusqu'au 4 x 48 caractéres. Les autres formats sont limités aux 24 caractéres.

1) Allez au répertoire ~/www et utilisez votre éditeur de texte préféré afin de créer un fichier contenant les lignes suivantes :

<HTML>
<HEAD>
<TITLE>[votre nom]</TITLE>
</HEAD>
<BODY   BGCOLOR=#FFFFFF >
<H1 ALIGN=CENTER>Creation d'une rendezvous</H1>
<FORM ACTION="create-plan.html" METHOD = "GET">
<P><HR></P>
<INPUT TYPE=SUBMIT Value="Valider">
<INPUT TYPE=RESET Value="Reinitialiser">
<P>
</BODY>
</HTML>

Sauvegardez le fichier dans votre répertoire ~/www avec le nom create-plan.html, Lancez Netscape. Allez à la page : http://ensisun.imag.fr/[votre login]/.create-plan.html. Cliquez sur valider. Notez que ceci a pour effet de relancer la page.

2) Une ligne de texte peut étre acceptée par la commande "<INPUT>". Voici un exemple d'une ligne pour entrer le nom de la personne avec laquelle vous avez rendez-vous.

Le texte entré sur cette ligne sera identifié par la clé "qui". Entrez les lignes pour demander "qui", "durée" (en minutes), "sujet" et "lieu". Ajoutez les commandes de format qui vous convient. Regardez le résultat avec netscape.

3) Une zone de texte libre peut étre créée avec la commande texterea.

Ajoutez un champ de texte pour la description du rendez-vous à votre page et regardez le résultat.

4) On peut spécifier la date et l'heure avec les menus du style "select". La commande suivante propose un choix entre 1 et 12 pour le mois. Le mois par défaut est "3".

Entrez et testez cette commande dans votre page. Entrez les autres commandes pour proposer l'année, le jour, l'heure et la minute (en multiples de 15) pour un rendez-vous. Tester votre page html. La ligne engendrée par la commande "valider" doit ressembler :

...create-plan.html?heur=09&minute=00&jour=16&mois=3&annee=2000&qui=Moi+meme&duree=30&lieu=ici&sujet=ceci&description=test

5) Création du fichier CGI. Avec votre éditeur, créez un fichier nommé create-plan.cgi dans votre répertoire cgi-bin. Entrez dans ce fichier les lignes suivantes :

#!/usr/local/bin/perl #create-plan.cgi
# entete d'un page html
print "Content-type: text/html", "\n\n";
print "<HTML>", "\n";
print "<TITLE>Rendezvous</TITLE>" , "\n";
print "<BODY>" , "\n";
print "<H1>Rendezvous </H1><BR>" , "\n";

#recuperer les parameters et les imprimer $query = $ENV{'QUERY_STRING'};
print "parameters : $query<br>", "\n";
print "<HR>" , "\n";

#completer et fermer le fichier .html
print "</BODY>" , "\n";
print "</HTML>" , "\n"; exit(0);

Changez ce fichier en "exécutable pour tous" avec la commande unix :

chmod a+x create-plan.cgi

Editez votre page create-plan.html afin que l'action de la forme soit d'exécuter ce script avec la ligne :

Testez le script. Regardez la ligne de paramétre.

6) On peut construire un "hash" PERL avec les paramétres du script à l'aide de la commande "split". Entrez la code suivant dans votre script et testez-la avec create-plan.html.

#recuperer et decoder les parametres
@key_value_pairs = split(/&/,$query);
foreach $key_value (@key_value_pairs)
{ ($key, $value) = split(/=/,$key_value);
$data{$key} = $value;
print "
data($key) = $data{$key}, ", "\n"; }

7) Ajoutez les lignes suivantes avant l'affectation de "$value" au hash, afin de décoder les caractéres spéciaux. Testez ces lignes.

$value =~ tr/+/ /;
$value =~ s/%([\dA-Fa-f][\dA-Fa-f])/pack("C", hex($1))/eg;

8) Une commande $data{"annee"} permet de recouper la valeur de l'année par sa clé. La commande"." permet une concaténation des champs. Entrez la ligne suivante afin de composer le nom du fichier.

$filename = $data{"annee"}.".".$data{"mois"}.".".$data{"jour"}.".".$data{"heur"}.".".$data{"minute"}.".html";

print "Filename is $filename", "\n";

9) Créez un répertoire sous www nommé /plan.Changez sa protection afin de permettre tout l'accés pour écrire et lire dans ce répertoire avec la commande

chmod a+rw /plan

Le ficher pour le rendez-vous est ouvert et fermé par les commandes suivantes
open (FILE, ">/users/[your login]/www/plan/$filename") || print "Error openening file $filename","\n";
close (FILE);

Le contenu peut étre écrit par les lignes :

print FILE "Content-type: text/html", "\n\n";
print FILE "<HTML>" , "\n";
print FILE "<TITLE>Rendezvous avec $data{"qui"}</TITLE>" , "\n";
print FILE "<BODY><BR>" , "\n";
print FILE "qui : $data{"qui"}<br>", "\n";
print FILE "quand : $data{'heur'}:$data{minute}<br>", "\n";
print FILE "duree : $data{'duree'} minutes<br>", "\n";
print FILE "lieu : $data{'lieu'}<br>", "\n";
print FILE "sujet : $data{'sujet'}<br>", "\n";
print FILE "description : $data{'description'}<br>", "\n";
print FILE "</BODY>" , "\n";
print FILE "</HTML>" , "\n";

10) Le répertoire dans lequel le fichier est stocké peut étre sélectionné avec
"chdir". Voici une commande pour stocker le fichier dans votre répertoire
"plan".

chdir "[votre-repetroire]/plan" or die "unable to open directory [votre-repetroire]/plan";

Ajoutez cette commande à votre script "create-plan.cgi".