JAVASCRIPT et CGI en 2 leçons
Transcription
JAVASCRIPT et CGI en 2 leçons
JAVASCRIPT et CGI en 2 leçons Leçon n°2 : CGI Plan ❚ ❚ ❚ ❚ ❚ ❚ Qu’est-ce que CGI ? où et comment ... Les langages usuels des CGI Les variables d'environnement CGI La gestion des entrées La gestion des sorties Traitement d'un formulaire ❚ Différences entre CGI et … ❚ Présentation du TP Ph. Leray CGI 1 Qu’est-ce que CGI ? ❚ CGI = Common Gateway Interface ❚ Passerelle entre le serveur Web et l'utilisateur ❙ ex : traitement d'un formulaire transfert des données du navigateur formulaire au serveur formulaire formulaire merci! ! merci 1 appel d'un script CGI serveur 2 script CGI 3 sortie du script CGI Ph. Leray CGI 2 Où utiliser CGI ? ❚ CGI = Passerelle entre l'utilisateur et des données présentes sur le serveur ❙ bases de données ❙ fichiers de données divers (mail, …) ❚ Scripts ❙ appelés dans les pages HTML ❙ situés et exécutés sur le serveur ➨ Création dynamique de pages HTML Ph. Leray CGI 3 Comment utiliser CGI ? ❚ Choix du langage de script ❙ selon le serveur ❙ selon les fonctionnalités offertes par le langage pour ❘ interagir avec le serveur • obtention des variables systèmes, … ❘ interagir avec les données • manipulation de fichiers texte • faire des requêtes SQL • produire des graphiques, … Ph. Leray CGI 4 Les langages usuels des CGI ❚ Perl ❘ ❘ ❘ ❘ Unix, Windows, MacOs Outil puissant de manipulation de textes Utilisation de commandes systèmes proches d'Unix Extensions : • pour l'écriture rapide de CGI (CGI.pm) • la manipulation de graphiques (GD.pm) • manipulation de bases de données – SQL: Sprite – Oracle: DBI – Sybase : sybperl • ... Ph. Leray CGI 5 Les langages usuels des CGI (suite) ❚ C, C++ ❘ ❘ ❘ ❘ Unix, Windows, MacOs Langage "universel" langage compilé … pas besoin d'interpréteur sur le serveur Besoin de librairies spécifiques pour avoir des fonctionnalités intéressantes : • écriture rapide de CGI • création de graphiques (GD) • manipulation de bases de données – SQL: – Oracle: – ... Ph. Leray CGI 6 Les langages usuels des CGI (fin) ❚ Shell (ex: Bash) ❘ Unix ❘ Utilitaires de manipulation de texte (sed, awk) ❘ Besoin de programmes supplémentaires pour traiter certaines variables systèmes (ex: uncgi), pour la manipulation de bases de données, graphiques, … ❚ Tcl ❘ Unix ❘ Fonctionnalités intéressantes (BD, graphique, …) ❚ Applescript ❘ MacOS ❚ Visual Basic Ph. Leray ❘ Windows CGI 7 Stockage et contenu des CGI ❚ Sécurité "serveur" : ❙ le serveur ne peux pas permettre l'exécution de n'importe quel script ❙ les scripts "autorisés" sont rangés dans un (ou plusieurs) répertoire(s) cgi-bin ❘ ex sur servasi : webmaster : home/webasi/cgi-bin étudiants : home/etud/asi99/pub/cgi-bin (cgi) (etudcgi) ❘ pour exécuter un cgi "webmaster" prog.pl http://servasi.insa-rouen.fr/cgi/prog.pl ❘ pour exécuter un cgi "étudiant" prog2.pl http://servasi.insa-rouen.fr/etudcgi/prog2.pl Ph. Leray CGI 8 Stockage et contenu des CGI (fin) ❚ Sécurité "programmeur" : ❙ vos scripts ne doivent pas permettre l'exécution de n'importe quelle commande système (genre rm -r, format…) Ph. Leray CGI 9 Variables d'environnement CGI ❚ Informations fournies par le serveur ❙ client ❘ ❘ ❘ ❘ nom / IP de la machine types MIME reconnus URL du document précédent données envoyées, … ❙ serveur ❘ version CGI ❘ nom / IP du serveur, ... Ph. Leray CGI 10 Variables d'environnement (suite) ❚ Exemple Perl #!/usr/bin/perl # Infos sur le serveur print "Content-type: text/html\n\n"; print "<HTML>\n"; print "<HEAD><TITLE>About this Server</TITLE></HEAD>\n"; print "<BODY><H1>About this Server</H1>\n<HR><PRE>"; print "Server Name: ", $ENV{'SERVER_NAME'}, "<BR>\n"; print "Running on Port: ", $ENV{'SERVER_PORT'}, "<BR>\n"; print "Server Software: ", $ENV{'SERVER_SOFTWARE'}, "<BR>\n"; print "Server Protocol: ", $ENV{'SERVER_PROTOCOL'}, "<BR>\n"; print "CGI Revision: ", $ENV{'GATEWAY_INTERFACE'}, "<BR>\n"; print "<HR></PRE>\n</BODY></HTML>\n"; exit (0); Ph. Leray CGI 11 Variables d'environnement (fin) ❚ Exemple Bash #!/bin/bash echo "Content-type: text/html" echo "" echo "<HTML>" echo "<HEAD><TITLE>About this Server</TITLE></HEAD>" echo "<BODY><H1>About this Server</H1>" echo "<HR><PRE>" echo "Server Name: $SERVER_NAME <BR>" echo "Running on Port: $SERVER_PORT<BR>" echo "Server Software: $SERVER_SOFTWARE <BR>" echo "Server Protocol: $SERVER_PROTOCOL <BR>" echo "CGI Revision: $GATEWAY_INTERFACE<BR>" echo "<HR></PRE>" echo "</BODY></HTML>" Ph. Leray CGI 12 Les types MIME ❚ MIME = Multipurpose Internet Mail Extensions ❙ A l'origine : description du contenu des mails ❙ Maintenant : description du contenu d'un document ❚ Quelques types MIME courants : ❙ ❙ ❙ ❙ ❙ Ph. Leray text/html text/plain image/gif image/jpeg audio/x-wav Document HTML Fichier texte Image Gif Image JPEG Fichier son Windows *.wav CGI 13 Gestion des entrées ❚ Entrées = données issues du formulaire HTML ❚ Deux types d'envoi de formulaire ❙ GET ❘ Envoi des données dans la requête HTTP http://moteur.de.recherche/cgi-bin/search.pl?key=XXX ❘ la variable QUERY_STRING récupère les données ❙ POST ❘ Envoi des données dans un "flux" d'entrée (STDIN) ❘ la variable CONTENT_LENGTH donne la taille des données ❘ il faut que le script lise le flux STDIN pour récupérer les données ❙ Comment connaître la méthode utilisée ? ❘ la variable d'environnement REQUEST_METHOD Ph. Leray CGI 14 Gestion des entrées (fin) ❚ Attention à l'encodage des données ❙ les données sont codées pour ne pas interférer avec l'URL ❙ les caractères spéciaux (espace, symbole, …) sont remplacés par leur code ISO 8859 ❘ / devient %2F ❘ l'espace devient %20 ➨ il faut penser à décoder les entrées d'un CGI si nécessaire Ph. Leray CGI 15 Gestion des sorties ❚ La sortie d'un script CGI peut prendre différentes formes : ❙ HTML ❙ graphique ❙ PS, PDF … ❘ (il faut vérifier que le navigateur accepte les types MIME correspondants) ❙ Commandes HTTP diverses… Ph. Leray ❘ ❘ ❘ ❘ Content_length Content_type Expires ... : nb d'octets : type MIME de la sortie : date d'expiration dans le cache CGI 16 Gestion des sorties (suite) ❚ Ex de sortie HTML simple (Perl): #!/usr/bin/perl # hello.cgi print "Content-Type: text/html\n\n"; print print print print print print Ph. Leray "<html> <head>\n"; "<title>Hello, world!</title>"; "</head>\n"; "<body>\n"; "<h1>Hello, world!</h1>\n"; "</body> </html>\n"; CGI type MIME de la sortie création d'un fichier HTML classique 17 Sortie graphique ❚ Le script CGI peut appeler ❙ un utilitaire ❙ une bibliothèque graphique pour "construire" une image en fonction des données ❚ Exemple d'utilisation : ❙ statistiques de connexions ❙ compteur graphique ❙ ... Ph. Leray CGI 18 Sortie graphique (suite) ❚ Exemple d'utilitaires : ❙ interpréteurs Postscript (Ghostscript, …) ❘ puissant, mais lourd à utiliser ! ❙ librairie graphique gd (accessible avec Perl, Tcl, C) ❘ assez puissant, bien pour les figures simples ❘ pas besoin d'interpréteur/utilitaire externe ❙ Gnuplot ❘ bien pour le tracé de graphiques ❘ produit une image au format ppm que le CGI doit transformer en gif (utilitaire unix = ppmtogif) ❙ Problème actuel : les interpréteurs ne créent plus d'image gif ... Ph. Leray CGI 19 Traitement d'un formulaire ❚ Exemple Bash+uncgi (formulaire HTML) … <form action="http://servasi.insa-rouen.fr/cgi/uncgi/formulaire.sh" name="" method=get> Nom : <input type="text" name="nom" size=40 maxlength=200> <BR> Prénom : <input type="text" name="prenom" size=40 maxlength=200> <BR> Profession : <input type="text" name="profession" size=40 maxlength=200><BR> Société : <input type="text" name="societe" size=40 maxlength=200> <BR> E-mail : <input type="text" name="email" size=40 maxlength=200> <BR> Remarques : <textarea name="remarques" cols="40" rows="10"></textarea> <BR> <input type="submit" value="Envoyer"> <input type="reset" value="Effacer"> </form> Ph. Leray CGI ...20 Traitement d'un formulaire ❚ Exemple Bash+uncgi (script 1/2 : traitement) #!/bin/bash # Script de reception d'un formulaire HTML # Ph. Leray - avril 2000 mail -s "Inscription Entree Libre" asi<<__EOF__ Nom : $WWW_nom Prenom : $WWW_prenom Profession : $WWW_profession Societe : $WWW_societe E-mail : $WWW_email Remarques : $WWW_remarques __EOF__ … à suivre Ph. Leray CGI traitement des données recues = envoi d'un mail à asi contenant toutes les infos le programme uncgi (appelé avant le script) traite la variable CGI QUERY_STRING et crée des variables systèmes correspondant aux zones du formulaire 21 Traitement d'un formulaire ❚ Exemple Bash+uncgi (script 2/2 : sortie HTML) … suite echo "Content-type: text/html" echo "" echo "<HTML>" echo "<H1>Confirmation</H1>" echo "<BR>$WWW_nom $WWW_prenom : " echo "Inscription bien recue" echo "<BR><BR>Merci !<BR><BR>" echo '<A HREF="http://servasi.insa-rouen.fr/actualite/jtasi.html">' echo "Retour à la page d'Entrée Libre</A>" echo "<BR><BR><BR><BR><BR><BR><BR><BR><BR>" echo "</HTML>" Ph. Leray CGI message de réception du formulaire envoyé à l'utilisateur comme résultat du CGI 22 Différence entre CGI et … ❚ Javascript : ❙ script inclus dans le HTML ❙ exécuté par le navigateur client ❚ CGI : ❙ script hébergé par le serveur HTTP ❙ exécuté par le serveur ❙ renvoie un document au navigateur Ph. Leray CGI 23 Différence entre CGI et … ❚ SSI : "Server Side Includes" ❙ directives inclues dans le fichier HTML "d'origine" ❙ exécution des directives par <HTML> le serveur lorsque la page <HEAD><TITLE>Test SSI</TITLE></HEAD> est demandée <BODY> Serveur : ❙ le client ne voit que le <!---#echo var="SERVER_NAME"--> résultat de la directive <BR>Utilisateur : <!--#echo var="REMOTE_HOST"--> ❙ directives limitées : ❘ affichage de variables d'environnement ❘ inclusion de fichiers ❘ exécution d'un script CGI ! Ph. Leray CGI <BR>Heure locale: <!--#echo var="DATE_LOCAL"--> <BR>Modification: <!--#echo var="LAST_MODIFIED"--> </BODY> </HTML> 24 Différence entre CGI et … ❚ ASP : "Active Server Page" (Microsoft) ❙ directives inclues dans le fichier HTML "d'origine" ❙ exécution des directives par le serveur lorsque la page est demandée ❙ le client ne voit que le résultat de la directive ❙ directives puissantes ❘ langage de programmation mélange de Javascript, Visual Basic Script… Ph. Leray CGI 25 Différence entre CGI et … ❚ PHP : "Personal Home Page" ❙ directives inclues dans le fichier HTML "d'origine" ❙ exécution des directives par <HTML> le serveur lorsque la page <HEAD><TITLE>Test PHP3</TITLE></HEAD> est demandée <BODY> Utilisateur : ❙ le client ne voit que le <? echo $REMOTE_ADDR ?> résultat de la directive <BR><BR> <H2>Exemple de fichier html avec du ❙ directives puissantes ! ❘ langage de programmation évolué ❘ interaction BD ❘ graphique Ph. Leray CGI PHP</H2> <PRE> <? include "test-php3.ph3" ?> </PRE> </BODY> </HTML> 26 Présentation du TP ❙ 1 : un compteur en mode texte ❙ 2 : formulaire de sondage ❘ 2.a : création du formulaire + traitement des données ❘ 2.b : affichage du résultat ❙ 3 : suivi des connexions d'une 1ère page ❘ 3.a : récupération des données :navigateur, page précédente… ❘ 3.b : affichage des résultats récapitulatifs ❙ 4 : envoi de mail au webmestre par un formulaire ❙ 5 : livre d'or ❘ 5.a : création du formulaire + sauvegarde du résultat ❘ 5.b : consultation du livre d'or ❙ 6 : annuaire (fichier texte, pas de BD) ❙ ??? Ph. Leray CGI 27 Bibliographie ❚ Livres de référence : ❙ Programmation CGI - S. Gundavaram (O'Reilly) ❙ Perl in a Nutshell ❚ Tutoriels on-line : ❙ liste de tutoriels : http://www.edelweb.fr/ EdelStuff/EdelPages/AdminW3/cours_cgi.html ❙ Cours, scripts, … : http://cgi.xhtml.net/ ❙ Tout sur les CGI :http://www.cgi-resources.com/ ❙ Tout sur Perl : http://www.cpan.org/ ❙ Tout sur PHP : http://fr.php.net/ ❚ Exemples on-line : ❙ site d'O'Reilly : http://www.editions-oreilly.fr/ Ph. Leray CGI 28