Programmation réseau Informatique de l’Internet: Javascript et PHP Joël Quinqueton Dépt MIAp, UFR IV UPV ! Université Montpellier III Javascript (1) • Mis au point par Netscape – Maintenant pris en charge par la plupart des navigateurs • Effort de standardisation – ECMA (European Computer Manufacturers Association) – (Aussi soumis aux spécifications du DOM / W3C) PHP (1) • Personal Home Page – « A la GNU » : PHP Hypertext Preprocessor • Produit Open Source, gratuit – Largement diffusé et utilisé – Robuste • Exécution client – Le navigateur prend en charge l’exécution du code – Le code a un accès limité aux ressources côté client • Exécution serveur – Envoi d’un requête au serveur commandant l’exécution d’un programme – Scripts embarqués – Application (servlets) Javascript (2) • Un exemple • Le script est embarqué dans le document HTML – Certains éléments/attributs du document lancent le script • <input type="button" value="grade quiz" onClick="gradeQuiz(this.form)"> • Le script accède aux éléments qui composent le document – Utile pour valider des questionnaires côté client, par exemple PHP (2) • Le script est stocké côté serveur • Une action côté client provoque le lancement du programme (et le chargement de paramètres client envoyés via une requête) • Le programme est exécuté côté serveur (pas par le navigateur) PHP (3) <FORM ACTION="stockerQuest.php" METHOD="post> <p>Le contenu du cours, tel que d&eacute;crit dans le document &quot;<a href="../Cours/Plan.zip">Plan du cours</a>&quot; correspond-il &agrave; vos attentes ? . . . PHP (4) • Le langage comporte des outils facilitant l’interface avec les bases de données (mySQL, …) Fichier stockerQuest.php Servlet Java (1) • Repose sur la technologie Java • Exécution d’application Java (non embarquée) côté serveur – Plus structurée – Les applications Java sont alors soumises aux limitations du contexte client-serveur Programmation objets • Un objet (informatique) participe de la dynamique d’un système (d’information) • Il détient des informations, offre des services Servlet Java (2) public class SimpleServlet extends HttpServlet { /** * Handle the HTTP GET method by building a simple web page. */ public void doGet (HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { PrintWriter out; String title = "Simple Servlet Output"; // set content type and other response header fields first response.setContentType("text/html"); // then write the data of the response out = response.getWriter(); out.println("<HTML><HEAD><TITLE>"); out.println(title); out.println("</TITLE></HEAD><BODY>"); out.println("<H1>" + title + "</H1>"); out.println("<P>This is output from SimpleServlet."); out.println("</BODY></HTML>"); out.close(); } } (JavaScript) <HTML> <HEAD> <TITLE> Validation/alert example </TITLE> </title></HEAD> <SCRIPT> function validate(obj, lowval, hival) { if ((obj.value < lowval) || (obj.value > hival)) alert("Le nombre doit être dans l'intervalle [0, 10]") } </SCRIPT> <BODY><FORM NAME="choice"> <P><B>Entrez un nombre entre 0 et 10:</B> <input type=text NAME="numChoice" size="5"> <P> <INPUT TYPE="button" VALUE="Soumettre" onClick="validate(numChoice, 0, 10)"> </FORM> </BODY> </HTML> DOM (1) • Un document HTML possède une représentation interne, accessible depuis l’application hôte – Structure arborescente – Un nœud de l’arborescence: DOM (2) • Les langages de programmation (réseau) offre des moyens d’accéder au document, des méthodes pour les inspecter/modifier/contrôler/ • donne accès à ses descendants • informe sur la valeur courante des attributs • effectue des modifications (valeurs des attributs, structure du sous-arbre DOM (3) • Un objet peut être composé d’autres objets – Un document HTML peut contenir un ou plusieurs objets formulaires – Le document peut offrir des méthodes pour parcourir l’ensemble des formulaires, les uns après les autres JavaScript • Langage interprété (pas de compilation) – Exécution ligne à ligne par un moteur d’interprétation (embarqué avec le navigateur) • Langage non typé – Le type des variables est implicite (selon la valeur qui leur est affectée) – Les variables sont globales (sauf si déclarée dans une fonction) JavaScript <SCRIPT> function howMany(selectObject) { !!!var numberSelected=0; !!!for (var i=0; i < selectObject.options.length; i++) { !!!!!!if (selectObject.options[i].selected==true) !!!!!!!!!numberSelected++; !!!} !!!return numberSelected; } </SCRIPT> <FORM NAME="selectForm"> <P><B>Choose some music types, then click the button below:</B> <BR><SELECT NAME="musicTypes" MULTIPLE> <OPTION SELECTED> R&B <OPTION> Jazz <OPTION> Blues <OPTION> New Age <OPTION> Classical <OPTION> Opera </SELECT> <P><INPUT TYPE="button" VALUE="How many are selected?" onClick="alert ('Number of options selected: ' + howMany(document.selectForm.musicTypes))"> </FORM> JavaScript • Structuration du code – Structure de données: tableaux (dynamiques) – Structures de contrôle habituelle: boucles, expression booléenne, etc. – Blocs – Fonctions – Définition de classe (type d’objets) JavaScript • Manipulation du document – Parcours des formulaires et des objets qui les composent – Validation des saisies utilisateur – Affichage de fenêtre d’alerte • Mots réservés – this (objet courant) – form (formulaire parent) JavaScript <form name="evaluateQuest"> <p> <center> <input type="button" ! value="gradequiz" onClick="gradeQuiz(this.form)"> </center> <p> The number you got right: &nbsp;&nbsp; <input type=text name="grade" size=5> &nbsp;&nbsp; Percent Correct: &nbsp;&nbsp; <input type=text name="percent" size=5> </form> PHP • Langage non typé • Structures de contrôles • Tableaux, manipulation de chaînes de caractères • Fonctions • Accès entrées/sorties (côté serveur) • Accès/connexion bases de données PHP • Entrées/sorties • Le script peut au passage – Stocker – Lire des valeurs dans des fichiers PHP • Le script invoqué est précisé dans le formulaire d’origine – Les variables (objets formulaires) de la page d’origine sont passés au script appelé PHP • Entrées/sorties • La plupart des commandes UNIX ont un équivalent php – mkdir – chdir (cd) – lstat (info sur un fichier) –... PHP • Entrées/sorties – fopen (modes read, write, append) – fwrite –... – is_file – is-_dir –... PHP • Entrées/sorties: chargement de fichiers distants – _FILES[$userfile] stocke (automatiquement) des informations sur le fichier téléchargé $uploaddir = $user; if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploaddir."/".$_FILES['userfile']['name'])) { echo "Le fichier est valide, et a &eacute;t&eacute; t&eacute;l&eacute;charg&eacute; avec succ&egrave;s.\n"; } PHP • Entrées/sorties: chargement de fichiers distants – Utilise le type « file » de l’objet « input » des formulaires <form name="upload" method="post" action="grabPage.php" enctype="multipart/form-data"> Sélectionner le fichier correspondant à votre questionnaire: <input type="file" name="userfile"> <p> <input type="submit" name="Submit" value="Envoyez le fichier"> </p> </form>