Upload
said-radhouani-phd
View
675
Download
0
Embed Size (px)
DESCRIPTION
Common Gateway Interface, JavaScript, Web Forms
Citation preview
Documents intéractifsCGI - JavaScript
Saïd Radhouani Université de Genèveavril 2005
04 avril 2005 Saïd Radhouani - CUI 2
Introduction
HTML seul ne permet pas de créer des documents interactifs
Besoin d’un programme Exécuté côté serveur
Exemples : CGI (Common Gateway Interface), PHP (PHP Hypertext Preprocessor)
Exécuté côté clientExemple: Javascript
HTML permet en revanche de créer l’interface de ces programmes Formulaires Affichage des résultats d’un programme
04 avril 2005 Saïd Radhouani - CUI 3
CGI – Common Gateway Interface
Une CGI (Common Gateway Interface) est une technique qui permet à un client d'exécuter des programmes spécifiques sur un serveur, il permet de : produire des pages html dynamiques accès à des bases de données l'affichage de données traitées par le serveur ...
Un des grands intérêts est la possibilité de fournir des pages dynamiques. L'application la plus fréquente repose sur l'utilisation de formulaire HTML : ça permet à l'utilisateur de choisir ou saisir des données, puis à
cliquer sur un bouton de soumission du formulaire, envoyant alors les données du formulaire en paramètre du programme CGI...
04 avril 2005 Saïd Radhouani - CUI 4
CGI - généralités
Un programme CGI peut être écrit dans n'importe quel langage qui est:
capable de lire le flux de données d'entrée capable de traiter des chaînes de caractères capable d'écrire sur le flux standard de sortie exécutable ou interprétable par le serveur
Les langages de programmation les plus utilisés pour écrire des CGI sont :
Le langage Perl (majoritairement) Les langages C, C++ Java ...
04 avril 2005 Saïd Radhouani - CUI 5
CGI – principe de fonctionnement
Lorsqu'une requête est envoyée au serveur, celui-ci examine l'extension du fichier demandé afin de déterminer l'action qu'il va effectuer
Exemples : fichier HTML (extension .htm ou .html) : le serveur génère des en-
têtes de réponse HTTP et envoie le fichier HTML au navigateur
fichier CGI écrit en Perl (extension .pl) : le serveur exécute l'interpréteur Perl, celui-ci interprète le code contenu dans le fichier .pl puis envoie les données au serveur, qui va les envoyer au navigateur (comme dans le cas d'un fichier HTML)
fichier CGI écrit en langage C (extension .exe) : le serveur exécute la CGI, puis envoie vers le navigateur les données que le programme lui aura transmis
…
04 avril 2005 Saïd Radhouani - CUI 6
CGI – principe de fonctionnement
Exécution d'un programme sur le serveur et création de la page La page html envoyée est générée dynamiquement
Navigateur web (client)
<html> …
</html>
http://www....[paramètres]
page html
Serveur Web
La page HTML est créée en fonction de la requête HTTP
Le client reçoit la page dont le contenu est créé en temps réel
Chaque client reçoit une page dont le contenu est dépendant de sa requête
04 avril 2005 Saïd Radhouani - CUI 7
Les formulaires
Permettent aux auteurs de dialoguer avec leurs lecteurs
04 avril 2005 Saïd Radhouani - CUI 8
Les formulaires - La balise FORM
La balise FORM ~ un conteneur
Balise <form>…</form>
Permet de regrouper des éléments d’un formulaire qui vont permettre à l'utilisateur de choisir ou de saisir des données, qui seront envoyées à l'URL indiqué dans l'attribut ACTION par la méthode indiquée par l'attribut METHOD
Il est possible d'insérer n'importe quel élément HTML de base dans une balise FORM (textes, boutons, tableaux, liens,...) mais il est surtout intéressant d'insérer des éléments interactifs. Ces éléments sont :
La balise INPUT: un ensemble de boutons et de champs de saisie La balise TEXTAREA: une zone de saisie La balise SELECT: une liste à choix multiples
04 avril 2005 Saïd Radhouani - CUI 9
Les formulaires - La balise FORM
Attributs obligatoires :
Method => sous quelle forme seront envoyées les réponsesGET : le contenu du formulaire apparaît dans l’URLPOST : le contenu est posté dans le corps de la requête
http
Action => indique l’adresse d’envoiScript CGI : URL du programme qui va traiter les
données e-Mail : mailto:[email protected]
Attributs facultatifs : Name : nom du formulaire Enctype => spécifie le codage des données transmises
04 avril 2005 Saïd Radhouani - CUI 10
Les formulaires - La balise FORM
Syntaxe :<FORM
NAME = «nom_form» METHOD =«POST» ou «GET»ACTION = «URL»ENCTYPE = «type mime»
>…</FORM>
Exemples : <form name="formulaire" method= "get" action =
"http://www.machin.com/cgi-bin/script.cgi">
04 avril 2005 Saïd Radhouani - CUI 11
Les formulaires - Envoi des données
Les données sont envoyées sous forme de paire nom/valeur Syntaxe : champ1=valeur&champ2=valeur&…
eg. Google
Envoi par email :<form action="mailto:adresse_email"method="post" enctype="text/plain">
enctype="text/plain" => éviter d’avoir un message illisible comme :nom=Radhouani&prenom=Sa%EFd&email=Said.Radhouani%40cui.unige.ch&
Ajouter un sujet au message action = "mailto:adresse_email?subject=..."
eg.
04 avril 2005 Saïd Radhouani - CUI 12
Les formulaires - La balsie INPUT
INPUT => créer des éléments interactifs Syntaxe :
<INPUT type=“type de l’élément” value=“valeur par défaut” name=“nom de l’élément”
Attributs Type : spécifie le type d’élément Value : valeur initiale Name : nom de l’élément Size : nombre de caractères Maxlength : nombre max. de caractères checked (pour les boutons “radio”) indique que l’élément est
sélectionné
04 avril 2005 Saïd Radhouani - CUI 13
Champ de saisi de texte - une ligne Syntaxe : <input type="text" name="nom"> Size : taille de la case Maxlength : nombre max de caractères
Password Syntaxe : <input type="password" name="pwd">
Les formulaires - Champ de saisi
04 avril 2005 Saïd Radhouani - CUI 14
Les formulaires - Champ de saisi
Champ de saisi - plusieurs lignes (≠ INPUT type = “texte”) Syntaxe : <TEXTAREA name=”nom" rows=”x" cols=”y” …>
texte par défaut </TEXTAREA>
Cols : le nombre de caractères que peut contenir une ligne Rows : le nombre de lignes Name : le nom associé au champ Readonly : permet d'empêcher l'utilisateur de modifier le texte
entré par défaut dans le champ Value : la valeur qui sera envoyée par défaut au script si le champ
de saisie n'est pas modifié par l'utilisateur
04 avril 2005 Saïd Radhouani - CUI 15
Les formulaires - Cases à cocher
Case à cocher Deux états : checked (coché)/unchecked(non coché)
Syntaxe : <input type=”CHECKBOX" name=”nom" value=”valeur"> texte affiché</input>
Exemple : <input type="checkbox" name=”navigateurs" value=”Netscape"> Netscape</input> <br><input type="checkbox" name="navigateurs” value="mozilla"> Mozilla</input><br>…<input type="checkbox" name="navigateurs” value="autre"> Autre</input>
04 avril 2005 Saïd Radhouani - CUI 16
Les formulaires - Bonton option
Bouton option : radio - un seul choix parmi plusieurs Tous les boutons ont le même nom Checked : attribut permettant de sélectionner un élément par défaut
Exemple : <input type="radio" name="boisson" value="cafe">café</input><br>
<input type="radio" name="boisson" checked value="orange” checked>jus d'oranges</input><br>…<input type="radio" name="boisson" value="autre">autre</input><br>
04 avril 2005 Saïd Radhouani - CUI 17
Les formulaires - La balise SELECT
La balise SELECT => créer une liste déroulante d’éléments Les éléments sont précisés par les balises OPTION Attributs :
Name : le nom du champ Disabled : créer une liste désactivée (affichée en grisée)
Exemple : <select name="couleur_prefere">
<option value="bleu">Bleu</option><option value="jaune">Jaune</option><option value="rouge">Rouge</option><option value="vert">Vert</option><option value="orange">Orange</option><option value="violet">Violet</option>
</select>
04 avril 2005 Saïd Radhouani - CUI 18
Les formulaires - La balise SELECT
Autres attributs : MULTIPLE => Sélection multiple SIZE => nombre d’éléments affichés en même temps
Exemple : <select multiple="multiple" name="couleurs_detestees"
size="6">
04 avril 2005 Saïd Radhouani - CUI 19
Les formulaires - Groupement dans une sélection
Groupement dans une sélection => Balise OPTGROUP
Exemple : <select name="couleur_prefere">
<optgroup label="couleurs de base"><option value="bleu">Bleu</option><option value="jaune">Jaune</option><option value="rouge">Rouge</option>
</optgroup><optgroup label="mélanges">
<option value="vert">Vert</option><option value="orange">Orange</option><option value="violet">Violet</option>
</optgroup> </select>
04 avril 2005 Saïd Radhouani - CUI 20
Les formulaires - Regroupement d’éléments
Grouper des éléments FIELDSET : Regroupement de champs LEGEND : Légende d'un regroupement - texte affiché LABEL : étiquette du champ - texte affiché ID du champ
Exemple:<fieldset><legend>Auteur</legend>
<label for="nom">Nom:</label><input type="text" id="nom" name="nom" /><label for=”prenom">Prénom:</label><input type="text" id="prenom" name="prenom" />
</fieldset>
04 avril 2005 Saïd Radhouani - CUI 21
Les formulaires - Sélection d’un fichier
Sélection d’un fichier à envoyer avec le formulaire Préciser le type de données pouvant être envoyées grâce à
l’attribut ENCTYPE
Exemple : <form enctype=”…" method=“post” action =”mailto:...">
fichier à envoyer <input type=“file” size=20 name=“fichier”></form>
04 avril 2005 Saïd Radhouani - CUI 22
Les formulaires - Champs cachés
Champs cachées
Ça permet de transmettre de l’information d’un formulaire au suivant, lorsqu’on a prévu un enchaînement de formulaires
Syntaxe : <input type=“hidden” name=“...” value=“...”>
Exemple : écolde doctorale de Grenoble
http://adum.igh.cnrs.fr/index.pl
04 avril 2005 Saïd Radhouani - CUI 23
Les formulaires - Bouton SUBMIT/RESET
Bouton de remise à zéro : rétablir les éléments du formulaires à leurs valeurs par défaut
Attributs : TYPE : type du bouton = RESET NAME : nom du bouton VALUE : le texte du bouton
Syntaxe <input type="reset" name="effacer" value="clear">
Bouton de soumission - envoi du formulaire au programme (ou email)
Syntaxe : <input type="submit" name="envoi" value="envoi">
Bouton de soumission personnalisé : son apparence est l’image située à l’emplacement précisé par son attribut SRC
Syntaxe : SRC = “URL”
04 avril 2005 Saïd Radhouani - CUI 24
Démos
Exemple de recherche de vidéo : Cf. Charhad
Autres exemples :Formulaires sans/avec contrôle
Référence :W3C :
http://www.la-grange.net/w3c/html4.01/interact/forms.html
Introduction à JavaScriptcontrôle des champs d’un formulaire
04 avril 2005 Saïd Radhouani - CUI 26
Langage de script - JavaScript
C'est un langage de programmation Le langage de script est incorporé dans un document HTML Apporter des améliorations au langage HTML Exécuter des commandes du côté client
Fonctionnement :
------------------------ ------------------------------------------------------------------------------------------------------------------------------------
HTML Script
<SCRIPT language="Javascript">
Le code du script
</SCRIPT >
04 avril 2005 Saïd Radhouani - CUI 27
Web intéractif
Les langages de script permet d'avoir des pages actives et non dynamiques
Le contenu des pages est fixe
Navigateur web (client)
<html> …<javascript…>…</html>
http://www.unige.ch/…Serveur Web
Interpréteur Javascript
page html
04 avril 2005 Saïd Radhouani - CUI 28
JavaScript - Utilisation
Affichage d'un message dans la barre d'état quand l'utilisateur positionne le curseur de la souris sur un lien
Ouverture d'une boîte de dialogue lors d'un click Modification d'une image lors du survol d'un lien par le pointeur
de la souris Fermer une fenêtre lors d’un click Ouverture d'une fenêtre popup Modifier l'apparence d'une page web Afficher des message pour l'utilisateur Afficher une horloge … Contrôler les champs d'un formulaire
04 avril 2005 Saïd Radhouani - CUI 29
JavaScript
Balise script (n’importe où dans la page HTML)<script language="javascript"><!--
instructions JavaScript
// -->
</script>
Dans un fichier externe<script language="javascript" src="fich.js">
document.write("script non trouvé");</script>
04 avril 2005 Saïd Radhouani - CUI 30
javaScript - Variables
Une variable est un objet repéré par un nom; Elle est prévue pour contenir des données qui pourront
changer au cours de l’exécution du programme
Une variable peut être déclarée : Explicitement
var i;var j = 1;
Implicitement nom = “toto”;
Types de données (pas besoin de préciser) Entiers Flottants Booléens (true / false) Chaînes de caractères (entre ‘ ‘ ou “ “)
04 avril 2005 Saïd Radhouani - CUI 31
javaScript - Quelques opérateurs
i=0; affectation
== comparaison
>, >=, <, <= + - / *
&& et, || ou, != différent
! Not
++, -- incrément, décrément
% modulo
i += x; i-= x; ajoute / retire x à i
i *= x; i /= x;
04 avril 2005 Saïd Radhouani - CUI 32
JavaScript : Structures de contrôle
if (condition) {instructions;
}else {
instructions;}
condition ? instructions à exécuter si vrai instructions à ne pas exécuter si faux
04 avril 2005 Saïd Radhouani - CUI 33
javaScript : Structures de contrôle
switch (Variable) {
case Valeur1:
Liste d'instructions;
break;
case Valeur2:
Liste d'instructions;
break;
…
default:
Liste d'instructions;
break;
}
04 avril 2005 Saïd Radhouani - CUI 34
JavaScript : Boucles
for (initialisation; condition d’arrêt; incrément){
instructions}
while (condition) {
instructions}
do {Instructions
} while (condition)
04 avril 2005 Saïd Radhouani - CUI 35
JavaScript : Fonctions
Une fonction attribue un nom à un ensemble d’instructions (sous-programme)
Permet d’exécuter plusieurs fois les mêmes instructions sans avoir à tout réécrir
Permet de modulariser le code
Une fonction peut avoir zéro ou plusieurs paramètres
Retourne parfois un résultat
04 avril 2005 Saïd Radhouani - CUI 36
JavaScript : Evénements
Les événements permettent de conditionner l’exécution de code JavaScript aux actions de l’utilisateur
(double) clics de souris
Positionner le curseur sur un élément de l’interface
Fermeture d’une page
...
04 avril 2005 Saïd Radhouani - CUI 37
JavaScript- Contrôle des champs d’un formulaire
Principe : appeler une fonction JavaScript qui permet de contrôler les champs du formulaire
<form method="get" action= "URL ou email" name= "nom du formulaire" onsubmit="return Fonction_JavaScript(this)" >
Fonction_JavaScript est une fonction JavaScript Elle a comme paramètre le contenu du formulaire (this) Elle permet de contrôler tous les champs du formulaire
04 avril 2005 Saïd Radhouani - CUI 38
Liens tiles
Il existe des sites sur lequels on peut trouver des dizaines de programmes JavaScript prêts à l’emploi
Exemple : http://www.editeurjavascript.com/scripts/