Informatique de l`Internet: Javascript et PHP Programmation réseau
Informatique de l’Internet:
Javascript et PHP
Joël Quinqueton
Dépt MIAp, UFR IV
UPV ! Université Montpellier III
Programmation réseau
• 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 (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)
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 (1)
• Personal Home Page
– « A la GNU » : PHP Hypertext Preprocessor
• Produit Open Source, gratuit
– Largement diffusé et utilisé
– Robuste
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écrit dans le
document "<a href="../Cours/Plan.zip">Plan du
cours</a>" correspond-il à vos attentes ?
. . .
Fichier stockerQuest.php
PHP (4)
• Le langage comporte des outils
facilitant l’interface avec les bases de
données (mySQL, …)
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
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();
}
}
Programmation objets
• Un objet (informatique) participe de la
dynamique d’un système (d’information)
• Il détient des informations, offre des
services
(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:
• donne accès à ses descendants
• informe sur la valeur courante des attributs
• effectue des modifications (valeurs des
attributs, structure du sous-arbre
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/
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
<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
• 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
• 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:
<input type=text name="grade" size=5>
Percent Correct:
<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
• 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
• Le script peut au passage
– Stocker
– Lire
des valeurs dans des fichiers
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
– 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>
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 été
téléchargé avec
succès.\n";
}
1
/
5
100%
