Le client/serveur dans le cas du Web

Save this PDF as:
 WORD  PNG  TXT  JPG

Dimension: px
Commencer à balayer dès la page:

Download "Le client/serveur dans le cas du Web"

Transcription

1 Le client/serveur dans le cas du Web Olivier Flauzac & Cyril Rabat Licence 3 Info - Info Introduction à la programmation client/serveur Cours n 6 Rappel des problématiques liées au Web Présentation d AJaX Version 12 octobre 2015 O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

2 Table des matières 1 Exécutions longues et parallèles 2 Javascript et AJaX 3 La classe XMLHttpRequest 4 Exemples d utilisation d AJaX 5 Étude de cas O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

3 Exécutions longues et parallèles Table des matières 1 Exécutions longues et parallèles Problématiques Quelques solutions 2 Javascript et AJaX 3 La classe XMLHttpRequest 4 Exemples d utilisation d AJaX 5 Étude de cas O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

4 Exécutions longues et parallèles Problématiques Rappel sur le modèle client/serveur Exemple d un appel Client attente Serveur traitement Question Que se passe-t-il si le traitement sur le serveur est long? O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

5 Exécutions longues et parallèles Problématiques Cas d un traitement long Description Dans le cas d une programmation "classique" (hors Web) : Dépend des technologies utilisées Mode non connecté ou connecté? Mode non connecté : combien de temps doit-on attendre? Mode connecté : durée de la connexion TCP limitée Si pas de réponse, connexion fermée Suivant l intergiciel utilisé : mêmes problèmes Remarque Notion de temps dans un système réparti Attention à la synchronisation! O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

6 Exécutions longues et parallèles Problématiques Programmation Web Description Durée d exécution longue : Sur le client : peu d incidence Le navigateur peut interrompre le script Sur le serveur : dépend de la configuration Jouer sur la durée d exécution : Configuration serveur Web Configuration de PHP... Remarque Cas de la boucle infinie dans un script PHP O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

7 Exécutions longues et parallèles Problématiques Le principe de la boite noire Illustration de la vision Web navigateur Serveur Web Client O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

8 Exécutions longues et parallèles Problématiques Le principe de la boite noire Illustration de la vision Web navigateur Serveur Web Client Question Quelle sera la durée du traitement de la requête du client? O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

9 Exécutions longues et parallèles Problématiques Exemple avec un SGBD Illustration Client Exemple d exécution Client Serveur Web attente SGBD Serveur attente attente SGBD O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

10 Exécutions longues et parallèles Problématiques Cas d une exécution longue Description Que se passe-t-il sur le serveur en cas d exécution trop longue? Le processus en question est tué Risque sur un hébergeur tiers : désactivation du script, voire du site! Si la configuration serveur permet l exécution longue : Le client interrompt la connexion L utilisateur interrompt la connexion O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

11 Exécutions longues et parallèles Quelques solutions Première solution : exécution parallèle Illustration Client fini! Serveur traitement Explications Le client envoie une requête Il poursuit son exécution pendant le traitement Il intercepte les résultats O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

12 Exécutions longues et parallèles Quelques solutions Première solution : exécution parallèle Illustration Client fini! Serveur traitement Remarques Appel asynchrone Il faut que le client puisse intercepter l appel en cours d exécution O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

13 Exécutions longues et parallèles Quelques solutions Deuxième solution : exécution parallèle avec client actif Illustration Client attente attente OK fini? non! fini? OK Serveur fini! traitement Explications Lors de la requête, traitement réalisé dans un thread Le client reçoit un accusé de réception À intervalles réguliers : interrogation du serveur O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

14 Javascript et AJaX Table des matières 1 Exécutions longues et parallèles 2 Javascript et AJaX Le Web et Javascript AJaX 3 La classe XMLHttpRequest 4 Exemples d utilisation d AJaX 5 Étude de cas O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

15 Javascript et AJaX Le Web et Javascript Les technologies du Web Description Modèle Web : Basé sur le protocole HTTP Modèle client/serveur Différents niveaux de dynamicité : Aucune : fichiers HTML+CSS et médias (photos, vidéos... ) Côté serveur : PHP, ASP, CGI, J2EE... Côté client : principalement du code mobile Code "léger" : Javascript, flash, ActiveX... Code "lourd" : applet... O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

16 Javascript et AJaX Le Web et Javascript Rappels sur Javascript Description Créé en 1995 Langage de script exécuté au sein d une page Web Basé en partie sur la syntaxe du Java Objectif : permettre simplement la dynamicité dans la page Intégré dans le code HTML, interprété par le navigateur Une API complète Attention cependant aux incompatibilités entre navigateurs! Différents composants/éléments/langages liés : AJaX JSON O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

17 Javascript et AJaX Le Web et Javascript Quelques mots sur le cache Description Scripts Javascript situés dans des fichiers à part : Évite la surcharge du code HTML Libère de la bande passante Rappels lors de l accès à un URL : Script principal chargé par le navigateur Éléments secondaires (images, scripts, etc.) : Utilisation du cache Dans le cas de la programmation Javascript : Modifications des scripts non prises en compte sur le client! Solutions : Vider l historique du navigateur Inclure le Javascript dans le fichier HTML (en dev. uniquement) Configuration du serveur Web (empêche la mise en cache) Manuellement : <script type="script.js?v=1"/> O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

18 Javascript et AJaX AJaX AJaX Description AJaX pour Asynchronous JavaScript and XML Exploiter Javascript pour l envoi de requêtes HTTP Requêtes asynchrones Les réponses peuvent ensuite être analysées : Généralement du XML Peut être de tout type (exemple : JSON, HTML, etc.) Utilisation de la classe Javascript : XMLHttpRequest Du côté du serveur : tout langage permettant de traiter des requêtes HTTP et d en envoyer O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

19 Javascript et AJaX AJaX Fonctionnement d AJaX Description Sans AJaX, à chaque requête HTTP, nouvelle page créée par le navigateur Avec AJaX, possibilité d exécuter des requêtes au sein d une même page Web : Pas de rechargement de la page Intérêts : Pages dynamiques (modification du DOM de la page) Plus grande ergonomie pour l utilisateur Pas de nouveau langage (réutilisation de standards) Données présentes sur le client et sur le serveur Les appels peuvent être asynchrones... L utilisateur garde la main pendant la réception des données... ou synchrones O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

20 Javascript et AJaX AJaX Limites d AJaX Croisement de domaines Par mesure de sécurité, impossible de récupérer des données sur un autre domaine avec AJaX Travail actuel du W3C, même si des implémentations (propriétaires) existent Requêtes HTTP Techniquement, toute requête HTTP (dont GET et POST) Pas possible d envoyer des fichiers! Attention à l encodage des données O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

21 Javascript et AJaX AJaX Différences d appels Illustration Navigateur Client Serveur Serveur WEB VIDE saisie URL affichage GET OK récupération résultat traitement clic lien affichage GET OK récupération résultat traitement Série de requêtes/réponses HTTP classiques O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

22 Javascript et AJaX AJaX Différences d appels Illustration Navigateur Client Serveur Serveur WEB VIDE saisie URL affichage GET OK récupération résultat traitement clic lien affichage GET OK récupération résultat traitement Utilisation d un cookie O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

23 Javascript et AJaX AJaX Différences d appels Illustration Navigateur Client Serveur Serveur WEB VIDE saisie URL GET récupération affichage clic lien OK GET résultat récupération session affichage OK résultat Utilisation d une session O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

24 Javascript et AJaX AJaX Différences d appels Illustration Navigateur Client Serveur Serveur WEB VIDE saisie URL affichage GET OK récupération résultat traitement clic lien affichage GET OK récupération résultat traitement Utilisation d AJaX (avec couplage possible avec les cookies et les sessions) O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

25 La classe XMLHttpRequest Table des matières 1 Exécutions longues et parallèles 2 Javascript et AJaX 3 La classe XMLHttpRequest Méthodes de base Un peu plus loin 4 Exemples d utilisation d AJaX 5 Étude de cas O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

26 La classe XMLHttpRequest Méthodes de base Présentation de la classe XMLHttpRequest Construction Utilisation d AJaX en Javascript : Utilisation de la classe XMLHttpRequest Possède un constructeur par défaut : var requetehttp = new XMLHttpRequest(); Permet l envoi de requêtes HTTP et le traitement de la réponse Si plusieurs requêtes concurrentes, plusieurs objets nécessaires Une fois créé, il faut initialiser l objet : Préparation de la requête Modification de l en-tête O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

27 La classe XMLHttpRequest Méthodes de base Préparation de la requête et envoi Description Il faut créer l URL et le spécifier à l objet XMLHttpRequest : Exemple : requetehttp.open("get", "toto.html"); Le prototype complet : open(méthode, URL, synchrone, user, password); méthode : GET, POST, HEAD... URL : l URL synchrone (opt.) : true si appel asynchrone (par défaut) user et password (opt.) : utile pour l authentification HTTP Une fois l URL spécifié, envoi de la requête : requetehttp.send(); O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

28 La classe XMLHttpRequest Méthodes de base Appel synchrone Description Spécifié lors de l appel à la méthode open : requetehttp.open("get", URL, false); Par défaut, c est true (appel asynchrone) L appel à send est bloquant : Les instructions suivantes ne seront exécutées qu après la réponse reçue O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

29 La classe XMLHttpRequest Méthodes de base Appel asynchrone Description L appel à send n est pas bloquant À la réception de la réponse : un handler (ou callback) est appelé Plusieurs types de handler suivant l état de l appel : onloadstart, onload, onloadend onprogress onabort onerror ontimeout Pour spécifier le handler : requetehttp.onloadend = function() {... }; Il s agit d un pointeur de fonction : possible d utiliser une fonction existante requetehttp.onloadend = traitement; La fonction traitement est définie ailleurs O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

30 La classe XMLHttpRequest Méthodes de base Handler générique Description Un autre handler générique : onreadystatechange La fonction est appelée à chaque changement d état de l objet Le handler est appelé plusieurs fois!!! Comment savoir si la réponse a été reçue? Vérification de l état de l objet O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

31 La classe XMLHttpRequest Méthodes de base L état de l objet Description L objet XMLHttpRequest prend différents états successifs État récupéré à l aide de l attribut readystate Les différents états : UNSENT (=0) : l objet est construit OPENED (=1) : la méthode open a été correctement invoquée HEADER_RECEIVED (=2) : en-tête final reçu LOADING (=3) : corps en cours de réception DONE (=4) : toutes les données ont été reçues O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

32 La classe XMLHttpRequest Méthodes de base Résumé d un appel onloadstart onreadystatechange onreadystatechange onreadystatechange onreadystatechange onloadend onload Handers : onerror Etats : Méthodes : open send HTTP : réception en tête réception données O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

33 La classe XMLHttpRequest Un peu plus loin Récupération du statut HTTP Description Deux attributs : status : code d état HTTP (exemple : 200) statustext : message associé (exemple : OK) Utilisable dès que l en-tête est reçu Par défaut à 0 (ou en cas d erreur) O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

34 La classe XMLHttpRequest Un peu plus loin Récupération des en-têtes Description Méthode getresponseheader(nomduchamp) Récupère la valeur associée à un champ Par exemple : alert(requetehttp.getresponseheader("content-type")); Récupération de tous les champs avec getallresponseheaders() O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

35 La classe XMLHttpRequest Un peu plus loin Fixer un compte-à-rebours Description Possibilité de fixer un temps maximum pour la réponse Utilisation de l attribut timeout (en millisecondes) Si la réponse n est pas reçue avant l expiration du compte-à-rebours : handler ontimeout exécuté Autre solution pour interrompre une requête : méthode abort() Attention Attention au support des navigateurs... O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

36 La classe XMLHttpRequest Un peu plus loin Modifier l en-tête Description Possibilité d ajouter des champs dans l en-tête : À faire avant l envoi de la requête Utilisation de la méthode setrequestheader : setrequestheader(nomduchamp, valeur) Si le champ existe, combinaison avec la valeur existante Remarque sur les cookies La gestion des cookies est automatique en Javascript document.cookie Pas de modification de l en-tête manuelle O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

37 Exemples d utilisation d AJaX Table des matières 1 Exécutions longues et parallèles 2 Javascript et AJaX 3 La classe XMLHttpRequest 4 Exemples d utilisation d AJaX Hello World!!! Récupération de JSON Jouons avec les cookies Encodage d URL et POST AJaX et JQuery 5 Étude de cas O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

38 Exemples d utilisation d AJaX Hello World!!! Description de l application Fonctionnement Scripts Page Web complétée dynamiquement Nouveaux éléments reçu via AJaX Insertion dans le DOM Création d un fichier HTML : Contient le Javascript exploitant AJaX Structure vide complétée avec la réponse AJaX Possible aussi de la construire à l exécution Différentes possibilités Version synchrone Version asynchrone O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

39 Exemples d utilisation d AJaX Hello World!!! Fichier HTML - version synchrone Contenu <html> <head> <script type="text/javascript"> function exemple() { var requetehttp = new XMLHttpRequest(); requetehttp.open("get", "helloworld.txt", false); requetehttp.send(); if((requetehttp.readystate == 4) && (requetehttp.status == 200)) document.getelementbyid("destajax").innerhtml = requetehttp.responsetext; } </script> </head> <body> <h1>exemple d AJaX</h1> <p id="destajax"></p> <button type="button" onclick="exemple()">ajout de texte</button> </body> </html> O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

40 Exemples d utilisation d AJaX Hello World!!! Exécution Description 1 Création du document contenant l élément paragraphe vide 2 Lorsque le bouton est pressé, l objet XMLHttpRequest est créé 3 La requête est ensuite créée puis envoyée Attente de la réponse 4 Lorsque la réponse est reçue, l exécution reprend : Le texte est ajouté dans la balise L utilisateur reprend la main O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

41 Exemples d utilisation d AJaX Hello World!!! Fichier HTML - version asynchrone (onreadystatechange) Contenu <html> <head> <script type="text/javascript"> function exemple() { var requetehttp = new XMLHttpRequest(); requetehttp.onreadystatechange=function() { if((requetehttp.readystate == 4) && (requetehttp.status == 200)) document.getelementbyid("destajax").innerhtml = requetehttp.responsetext; } requetehttp.open("get", "helloworld.txt"); requetehttp.send(); } </script> </head> <body> <h1>exemple d AJaX</h1> <p id="destajax"></p> <button type="button" onclick="exemple()">cliquez-ici</button> </body> </html> O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

42 Exemples d utilisation d AJaX Hello World!!! Fichier HTML - version asynchrone (onload et onerror) Contenu <html> <head> <script type="text/javascript"> function bien() { document.getelementbyid("destajax").innerhtml = requetehttp.responsetext; } function pasbien() { document.getelementbyid("destajax").innerhtml = "Argh! Erreur!"; } function exemple() { var requetehttp = new XMLHttpRequest(); requetehttp.onload=bien; requetehttp.onerror=pasbien; requetehttp.open("get", "helloworld.txt"); requetehttp.send(); } </script> </head>... O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

43 Exemples d utilisation d AJaX Hello World!!! Exécution Description 1 Création du document contenant l élément paragraphe vide 2 Lorsque le bouton est pressé, l objet XMLHttpRequest est créé 3 La requête est ensuite créée puis envoyée : L utilisateur reprend la main 4 Lorsque la réponse est reçue : exécution de la fonction handler Le texte est ajouté dans la balise O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

44 Exemples d utilisation d AJaX Hello World!!! Exécution Description 1 Création du document contenant l élément paragraphe vide 2 Lorsque le bouton est pressé, l objet XMLHttpRequest est créé 3 La requête est ensuite créée puis envoyée : L utilisateur reprend la main 4 Lorsque la réponse est reçue : exécution de la fonction handler Le texte est ajouté dans la balise À noter Les balises HTML seront interprétées par le navigateur : Si le type de contenu est application/html Est-ce que le Javascript est exécuté? O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

45 Exemples d utilisation d AJaX Hello World!!! Exécution Description 1 Création du document contenant l élément paragraphe vide 2 Lorsque le bouton est pressé, l objet XMLHttpRequest est créé 3 La requête est ensuite créée puis envoyée : L utilisateur reprend la main 4 Lorsque la réponse est reçue : exécution de la fonction handler Le texte est ajouté dans la balise À noter Les balises HTML seront interprétées par le navigateur : Si le type de contenu est application/html Est-ce que le Javascript est exécuté? NON!!! C est au programmeur de l exécuter manuellement O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

46 Exemples d utilisation d AJaX Hello World!!! Exécution d un script Javascript reçu Modification du code de l handler // Mise à jour du contenu document.getelementbyid("destajax").innerhtml = requetehttp.responsetext; // Récupération des balises script var elementsjs = document.getelementbyid( destajax ).getelementsbytagname( script ); // Exécution des balises for(var i in elementsjs) { eval(elementsjs[i].text); } O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

47 Exemples d utilisation d AJaX Hello World!!! Exécution d un script Javascript reçu Modification du code de l handler // Mise à jour du contenu document.getelementbyid("destajax").innerhtml = requetehttp.responsetext; // Récupération des balises script var elementsjs = document.getelementbyid( destajax ).getelementsbytagname( script ); // Exécution des balises for(var i in elementsjs) { eval(elementsjs[i].text); } Attention Il n y a pas que du Javascript entre les balises <script> O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

48 Exemples d utilisation d AJaX Récupération de JSON Application de news (1/2) Fonctionnement Récupération de news depuis un serveur Toutes les news sont contenues dans un fichier JSON : Pour simplifier, mais elles peuvent être contenues dans une BD L utilisateur peut parcourir les news une à une : Le numéro de la news désirée est envoyée (via GET) Le serveur envoie une news après l autre Navigateur id=? JSON listenews.json JSON news getnews.php O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

49 Exemples d utilisation d AJaX Récupération de JSON Application de news (2/2) Scripts Fichier HTML contenant le script AJaX Bouton permettant d obtenir la news suivante Script PHP qui reçoit le numéro de la news désirée Lecture du fichier JSON Vérification sur la validité du nombre Envoi de la news + id de la suivante Id stocké du côté client (en Javascript) O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

50 Exemples d utilisation d AJaX Récupération de JSON Fichier index.html (1/3) Corps du document <body> <h1>news</h1> <h2 id="titrenews"></h2> <p id="corpsnews"></p> <p id="datenews"></p> <button type="button" onclick="getnews()">news suivante</button> </body> Explications Création de balises vides : Peuvent être créées à la volée O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

51 Exemples d utilisation d AJaX Récupération de JSON Fichier index.html (2/3) Partie Javascript (1/2) var requetehttp = new XMLHttpRequest(); // Création de l objet requetehttp.onloadend = handler; // Spécification de l handler à exécuter var courante = 0; // Numéro de la news courante // Fonction pour récupérer la news suivante function getnews() { var URL = "getnews.php?id=" + courante; requetehttp.open("get", URL, true); requetehttp.send(); } Explications Un objet XMLHttpRequest est créé et sera réutilisé plusieurs fois : La fonction handler sera la même La variable courante correspond au numéro de la news courante La fonction getnews est appelée lorsque le bouton est cliqué O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

52 Exemples d utilisation d AJaX Récupération de JSON Fichier index.html (3/3) Partie Javascript (2/2) function handler() { if((requetehttp.readystate == 4) && (requetehttp.status == 200)) { var docjson = JSON.parse(requeteHTTP.responseText); document.getelementbyid("titrenews").innerhtml = docjson[ titre ]; document.getelementbyid("corpsnews").innerhtml = docjson[ corps ]; document.getelementbyid("datenews").innerhtml = docjson[ date ]; courante = docjson[ suivant ]; } else { // Gestion d erreur } } Explications Les données reçues sont en JSON Il suffit de récupérer les valeurs O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

53 Exemples d utilisation d AJaX Récupération de JSON Fichier getnews.php Contenu <?php header("content-type: application/json"); $listenews = json_decode(file_get_contents("listenews.json"), true); if(!isset($_get[ id ])) $num = 0; else { $num = intval($_get[ id ]); if(($num < 0) ($num >= sizeof($listenews->news))) $num = 0; } $news = $listenews[$num]; $news["suivant"] = ($num + 1) % sizeof($listenews); echo json_encode($news);?> O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

54 Exemples d utilisation d AJaX Récupération de JSON Fichier listenews.json Contenu [ { "titre" : "Titre 1", "corps" : "Corps 1", "date" : "01/10/2015" }, { "titre" : "Titre 2", "corps" : "Corps 2", "date" : "02/10/2015" },... ] O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

55 Exemples d utilisation d AJaX Récupération de JSON Positionnement des données Description Le nombre de news n est pas connu par le client : Quand s arrêter? Comment éviter les erreurs? Solution précédente : Le serveur spécifie le numéro de la news suivante dans la réponse Le client met à jour sa variable locale en fonction Autres solutions : Utilisation d un cookie : Le serveur crée un cookie contenant le numéro de la news courante L identifiant est envoyé à chaque fois par le client Le serveur peut le mettre à jour Utilisation d une session : Le numéro de la news courante est sauvé sur le serveur O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

56 Exemples d utilisation d AJaX Jouons avec les cookies Description de l application Fonctionnement Compteur stocké sur le client Envoi de la valeur sur le serveur Scripts Création d un cookie par le script PHP Dans le cookie : déclaration d un compteur id Récupération/suppression avec Javascript Avec AJaX : envoi au serveur et récupération du résultat O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

57 Exemples d utilisation d AJaX Jouons avec les cookies Fichier HTML (1/3) Javascript : partie AJaX <script type="text/javascript"> var requetehttp = new XMLHttpRequest(); requetehttp.onloadend = function() { if(requetehttp.status == 200) document.getelementbyid("destination").innerhtml = requetehttp.responsetext; }; function update() { requetehttp.open("get", "script.php"); requetehttp.send(); } O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

58 Exemples d utilisation d AJaX Jouons avec les cookies Fichier HTML (2/3) Javascript : récupération cookie function reset() { var expiration = new Date(); expiration.settime(today.gettime() - 1); document.cookie = "id=0;expires=" + expiration.togmtstring(); document.getelementbyid("destination").innerhtml = "Réinitialisation"; } function recuperationvaleur() { var expression = new RegExp("(?:; )?id=([^;]*);?"); if (expression.test(document.cookie)) document.getelementbyid("destination").innerhtml = "Valeur actuelle = " + decodeuricomponent(regexp["$1"]); else document.getelementbyid("destination").innerhtml = "Pas de valeur fixée."; } </script> O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

59 Exemples d utilisation d AJaX Jouons avec les cookies Fichier HTML (3/3) Corps HTML <body onload="javascript:recuperationvaleur();"> <h1>test avec un cookie</h1> <div id="destination"></div> <button type="button" onclick="javascript:update();">envoi requête</button> <button type="button" onclick="javascript:reset();">réinitialisation</button> </body> O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

60 Exemples d utilisation d AJaX Jouons avec les cookies Partie PHP Contenu <?php // Récupération de la valeur du cookie if(isset($_cookie[ id ])) { $id = $_COOKIE[ id ]; $id++; } else $id = 1; // Modification de sa valeur setcookie("id", $id, 0); echo "Vous avez réalisé $id fois l appel";?> O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

61 Exemples d utilisation d AJaX Encodage d URL et POST Encodage d URL et POST Données envoyées en GET Les données sont codées dans l URL : Ajout de "?" puis des variables séparées par "&" Chaque variable : nomvariable=valeur Utilisation de la fonction Javascript encodeuricomponent Données envoyées en POST Comment envoyer des données avec POST? Les données sont spécifiées comme avec GET Modifier l en-tête avec le Content-Type suivant : Pour les formulaires : application/x-www-form-urlencoded O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

62 Exemples d utilisation d AJaX AJaX et JQuery JQuery Description Bibliothèque Javascript Permet : D enrichir les possibilités Simplifier le développement Système de sélecteurs puissant Ajouter des effets etc. À inclure comme un script Javascript O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

63 Exemples d utilisation d AJaX AJaX et JQuery AJaX avec JQuery Description Solution permettant de simplifier les appels AJaX Fonction ajax qui prend en paramètre : Type de requête HTTP (GET, POST, etc.) L URL Les données (à encoder) Les handlers pour la réussite, l échec Permet aussi simplement de modifier l en-tête : Type des données envoyées (application/x-www-form-urlencoded) Type des données à recevoir etc. Objet jqxhr retourné O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

64 Exemples d utilisation d AJaX AJaX et JQuery Code générique d une requête AJaX Le code requete = $.ajax( { type: POST, url:, data:, datatype: json } ); requete.done( function (reponse, textestatut, jqxhr) { // Requête réussie } ); requete.fail( function (jqxhr, textestatut, erreurlevee){ // Erreur!!! } ); O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

65 Étude de cas Table des matières 1 Exécutions longues et parallèles 2 Javascript et AJaX 3 La classe XMLHttpRequest 4 Exemples d utilisation d AJaX 5 Étude de cas O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

66 Étude de cas Gestion de notes d étudiants Fonctionnement Étudiants inscrits dans des matières Matières contenant des épreuves Données stockées sur le serveur au format JSON Possibilité de renseigner les notes Sélection de la matière, de l épreuve Liste des étudiants avec une zone de texte Questions 1 Modélisation des données JSON 2 Scripts nécessaires (fonctions, structure) 3 Données échangées en AJaX O. Flauzac / C. Rabat (Info0503) Le client/serveur dans le cas du Web / 58

Introduction Implantation Format des données Restriction. Programmation WEB. Ajax. Programmation licence. IUT de Fontainebleau.

Introduction Implantation Format des données Restriction. Programmation WEB. Ajax. Programmation licence. IUT de Fontainebleau. Ajax IUT de Fontainebleau 1 er mars 2015 Sommaire Introduction 1 Introduction 2 3 4 Sommaire Introduction 1 Introduction 2 3 4 Introduction AJAX se base sur l objet JavaScript XMLHttpRequest qui permet

Plus en détail

Introduction à Ajax. CNAM le 2013 O. Pons S. Rosmorduc

Introduction à Ajax. CNAM le 2013 O. Pons S. Rosmorduc 2013 Introduction à Ajax CNAM le 2013 O. Pons S. Rosmorduc 1 / 18 Principe général de fonctionnement Faire des requettes http sans avoir recharger une page entiere. Communication de javascript avec les

Plus en détail

AJAX AJAX. Asynchronous JavaScript And XML. Technologie pour créer des pages web interactives Basées sur XML, HTML et JavaScript

AJAX AJAX. Asynchronous JavaScript And XML. Technologie pour créer des pages web interactives Basées sur XML, HTML et JavaScript AJAX Ajax 1 AJAX Asynchronous JavaScript And XML. Technologie pour créer des pages web interactives Basées sur XML, HTML et JavaScript Utilise: HTML pour le marquage XML pour représenter les résultats

Plus en détail

NFA016 : Introduction. Pour naviguer sur le Web, il faut : Naviguer: dialoguer avec un serveur web

NFA016 : Introduction. Pour naviguer sur le Web, il faut : Naviguer: dialoguer avec un serveur web NFA016 : Introduction O. Pons, S. Rosmorduc Conservatoire National des Arts & Métiers Pour naviguer sur le Web, il faut : 1. Une connexion au réseau Réseau Connexion physique (câbles,sans fils, ) à des

Plus en détail

Dojo partie 1. Widgets dojo.form Validation des formulaires Côté client Côté serveur Requêtes Ajax

Dojo partie 1. Widgets dojo.form Validation des formulaires Côté client Côté serveur Requêtes Ajax Dojo partie 1 Widgets dojo.form Validation des formulaires Côté client Côté serveur Requêtes Ajax 1 Modules Dojo 3 espaces de noms principaux: dojo: bibliothèque de base dijit: bibliothèque de widgets

Plus en détail

TME 1 JAVASCRIPT (2 SEANCES)

TME 1 JAVASCRIPT (2 SEANCES) TME 1 JAVASCRIPT (2 SEANCES) 1. EXERCICES DE BASE Créez des fonctions javascript pour : - faire un jeu «plus petit plus grand» qui tire un nombre au hasard que l utilisateur doit trouver en entrant des

Plus en détail

Documents web dynamiques. 20 novembre 2007 Architecture Multi-Niveaux 54

Documents web dynamiques. 20 novembre 2007 Architecture Multi-Niveaux 54 Documents web dynamiques 20 novembre 2007 Architecture Multi-Niveaux 54 Documents web dynamiques Contenu Statique Le client envoie une requête avec un nom de fichier Le serveur répond en lui retournant

Plus en détail

Programmation Web. Thierry Hamon

Programmation Web. Thierry Hamon 1/27 Programmation Web Thierry Hamon Bureau H202 - Institut Galilée Tél. : 33 1.48.38.35.53 Bureau 150 LIM&BIO EA 3969 Université Paris 13 - UFR Léonard de Vinci 74, rue Marcel Cachin, F-93017 Bobigny

Plus en détail

Présentation et traitement d information sur le Web Présentation du WWW (architectures web)

Présentation et traitement d information sur le Web Présentation du WWW (architectures web) Université de La Rochelle LUP-SIG 2004-2005 Programmation SIG et Internet Cartographique Présentation et traitement d information sur le Web Présentation du WWW (architectures web) Jean-Michel Follin jean-michel.follin@univ-lr.fr

Plus en détail

Programmation Web. Madalina Croitoru IUT Montpellier

Programmation Web. Madalina Croitoru IUT Montpellier Programmation Web Madalina Croitoru IUT Montpellier Organisation du cours 4 semaines 4 ½ h / semaine: 2heures cours 3 ½ heures TP Notation: continue interrogation cours + rendu à la fin de chaque séance

Plus en détail

TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012

TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012 TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012 FORMULAIRE DE CONTACT POUR PORTFOLIO PRINCIPE GENERAL Nous souhaitons réaliser un formulaire de contact comprenant les champs suivants : NOM PRENOM ADRESSE MAIL MESSAGE

Plus en détail

PHP & BD. PHP & Bases de données. Logiciels & matériels utilisés. Bases de données et Web

PHP & BD. PHP & Bases de données. Logiciels & matériels utilisés. Bases de données et Web PHP & Bases de données La quantité de données utilisée par certains sites web nécessite l'utilisation d'une base de données Il faut donc disposer d'un SGBD (mysql, postgresql, oracle, ) installé sur un

Plus en détail

Programmation du Web : Présentation du Web dynamique

Programmation du Web : Présentation du Web dynamique Programmation du Web : Présentation du Web dynamique Jean-Baptiste Vioix (Jean-Baptiste.Vioix@u-bourgogne.fr) IUT de Dijon-Auxerre - LE2I http://jb.vioix.free.fr 1-8 Présentation Nécessité du web dynamique

Plus en détail

TD2-1 : Application client-serveur V2.3.0

TD2-1 : Application client-serveur V2.3.0 TD2-1 : Application client-serveur V2.3.0 Cette œuvre est mise à disposition selon les termes de la licence Creative Commons Attribution Pas d'utilisation Commerciale Partage à l'identique 3.0 non transposé.

Plus en détail

DOM - Document Object Model

DOM - Document Object Model DOM - Document Object Model 1 But de DOM Interfacer les langages de programmation avec les documents XML en les associant avec un modèle orienté objet DOM permet aux programmes et scripts : d'accéder et

Plus en détail

PHP/MYSQL. Web Dynamique

PHP/MYSQL. Web Dynamique PHP/MYSQL Web Dynamique ENSG Juin 2008 Qui suis-je? Guillaume Gautreau Responsable projets Systèmes d information à l ENPC guillaume@ghusse.com http://www.ghusse.com Ces 6 jours de formation Jour 1 : présentations,

Plus en détail

Systèmes d'informations

Systèmes d'informations Systèmes d'informations C'est un ensemble d'outils pour stocker / gérer / diffuser des informations / des données Le stockage : Bases de données + SGDBR La gestion : Saisie, Mise à jour, Contrôle La diffusion

Plus en détail

Programmation orientée objet et événementielle en JavaScript. Département SRC Pôle Universitaire de Vichy Bruno Bachelet

Programmation orientée objet et événementielle en JavaScript. Département SRC Pôle Universitaire de Vichy Bruno Bachelet Programmation orientée objet et événementielle en JavaScript Département SRC Pôle Universitaire de Vichy Bruno Bachelet PARTIE I JavaScript: script côté client Programmation objet et événementielle en

Plus en détail

Module: Programmation sites Web Dynamique

Module: Programmation sites Web Dynamique Module: Programmation sites Web Dynamique Formateur: A BENDAOUD LEÇON : MÉTHODES DE NAVIGATION Les différentes méthodes de navigation : Voici les différentes méthodes que nous allons expliciter dans cette

Plus en détail

Les objectifs de ce tp sont d être capable d intégrer des scripts clients dans un site ou une page en respectant les bonnes pratiques.

Les objectifs de ce tp sont d être capable d intégrer des scripts clients dans un site ou une page en respectant les bonnes pratiques. TP Javascript 2013 tv - v.1.0 Sommaire Séquence n 1 : les bases 2 Insertion de code javascript..................................... 2 Exercice n 1.1 : code javascript interne au document.......................

Plus en détail

Cours HTML/PHP. Cours HTML/PHP. E.Coquery. emmanuel.coquery@liris.cnrs.fr

Cours HTML/PHP. Cours HTML/PHP. E.Coquery. emmanuel.coquery@liris.cnrs.fr Cours HTML/PHP E.Coquery emmanuel.coquery@liris.cnrs.fr Pages Web Pages Web statiques Principe de fonctionnement : L utilisateur demande l accès à une page Web depuis son navigateur. Adresse tapée, clic

Plus en détail

Cours 9 Formulaires Web pour saisie de données dans une base de données relationnelle avec PHP (partie 1 de 2)

Cours 9 Formulaires Web pour saisie de données dans une base de données relationnelle avec PHP (partie 1 de 2) École de bibliothéconomie et des sciences de l information SCI6306 Bases de données documentaires Cours 9 Formulaires Web pour saisie de données dans une base de données relationnelle avec PHP (partie

Plus en détail

INTERNET est un RESEAU D ORDINATEURS RELIES ENTRE EUX A L ECHELLE PLANETAIRE. Internet : interconnexion de réseaux (anglais : net = réseau)

INTERNET est un RESEAU D ORDINATEURS RELIES ENTRE EUX A L ECHELLE PLANETAIRE. Internet : interconnexion de réseaux (anglais : net = réseau) CS WEB Ch 1 Introduction I. INTRODUCTION... 1 A. INTERNET INTERCONNEXION DE RESEAUX... 1 B. LE «WEB» LA TOILE, INTERCONNEXION DE SITES WEB... 2 C. L URL : LOCALISER DES RESSOURCES SUR L INTERNET... 2 D.

Plus en détail

Programmation Web Avancée AJAX

Programmation Web Avancée AJAX 1/28 Programmation Web Avancée AJAX Thierry Hamon Bureau H202 - Institut Galilée Tél. : 33 1.48.38.35.53 Bureau 150 LIM&BIO EA 3969 Université Paris 13 - UFR Léonard de Vinci 74, rue Marcel Cachin, F-93017

Plus en détail

GED MARKETING. Page 1 sur 18

GED MARKETING. Page 1 sur 18 GED MARKETING I. Présentation du produit... 2 II. Page principale de l application... 3 L arbre... 3 Le menu... 4 La fenêtre de navigation... 4 III. La recherche de documents... 4 Rechercher tous les documents...

Plus en détail

Formation JavaScript : Perfectionnement. Programme. L approche AJAX. L objet XMLHttpRequest. Objectif(s):

Formation JavaScript : Perfectionnement. Programme. L approche AJAX. L objet XMLHttpRequest. Objectif(s): Formation JavaScript : Perfectionnement Objectif(s): Comprendre l'approche AJAX Comprendre l'objet XMLHttpRequest Durée : 2 jour(s) Pré-requis : Bonnes connaissances en (X)HTML, CSS et JavaScript Public

Plus en détail

Dossier Technique. Détail des modifications apportées à GRR. Détail des modifications apportées à GRR Le 17/07/2008. Page 1/10

Dossier Technique. Détail des modifications apportées à GRR. Détail des modifications apportées à GRR Le 17/07/2008. Page 1/10 Dossier Technique Page 1/10 Sommaire : 1. REPONSE TECHNIQUE A LA DEMANDE 3 1.1. Prise en compte de la dernière version de phpcas 3 1.2. Gestion de la connexion à GRR 3 1.2.1. Récupération des attributs

Plus en détail

Plusieurs façons de communiquer AJAX? Communication, manière facile. AJAX en jquery

Plusieurs façons de communiquer AJAX? Communication, manière facile. AJAX en jquery Programmation web AJAX Jean-Christophe Dubacq IUT de Villetaneuse S3 2013 AJAX A Jean-Christophe Dubacq (IUTV) Programmation web S3 2013 1 / 33 Le modèle classique Jean-Christophe Dubacq (IUTV) Programmation

Plus en détail

Technologies Web. Farah Benamara Zitoune Maître de conférences IRIT-UPS benamara@irit.fr

Technologies Web. Farah Benamara Zitoune Maître de conférences IRIT-UPS benamara@irit.fr Technologies Web Farah Benamara Zitoune Maître de conférences IRIT-UPS benamara@irit.fr Plan du cours Cours 1 : Introduction HTML/CSS Cours 2 : Introduction programmation web + javascirpt Cours 3 : Introduction

Plus en détail

Facebook Création d'applications avec PHP et JavaScript - Version numérique

Facebook Création d'applications avec PHP et JavaScript - Version numérique Introduction. Avant-propos 1. Objectif 1 1. Pré-requis 2 1.3 Structure 2 1.4 Conventions 3 1.4.1 Règles 3 1.4.2 Code source 3 2. Historique 4 2.1 2003-200 : les origines 4 2.2 2005-2008 : l'envol 7 2.3

Plus en détail

//////////////////////////////////////////////////////////////////// Développement Web

//////////////////////////////////////////////////////////////////// Développement Web ////////////////////// Développement Web / INTRODUCTION Développement Web Le développement, également appelé programmation, désigne l'action de composer des programmes sous forme d'algorithme (codage).

Plus en détail

Cours Web - Javascript

Cours Web - Javascript Cours Web - Javascript Thierry Vaira BTS IRIS Avignon tvaira@free.fr v0.1 Objectifs Se familiariser avec le langage Javascript et acquérir une pratique minimale. Être capable d intégrer des scripts clients

Plus en détail

Premières applications. Web 2.0. avec Ajax et PHP. J e a n - M a r i e D e f r a n c e. Groupe Eyrolles, 2008, ISBN : 978-2-212-12090-5

Premières applications. Web 2.0. avec Ajax et PHP. J e a n - M a r i e D e f r a n c e. Groupe Eyrolles, 2008, ISBN : 978-2-212-12090-5 Premières applications Web 2.0 avec Ajax et PHP J e a n - M a r i e D e f r a n c e Groupe Eyrolles, 2008, ISBN : 978-2-212-12090-5 8 Applications Ajax-PHP synchrones Pour commencer simplement, je vous

Plus en détail

Introduction à AJAX. Isabelle Mougenot mougenot@lirmm.fr. May 13, 2009. LIRMM Université Montpellier 2

Introduction à AJAX. Isabelle Mougenot mougenot@lirmm.fr. May 13, 2009. LIRMM Université Montpellier 2 LIRMM Université Montpellier 2 May 13, 2009 Quelques clés de compréhension Asynchronous JavaScript And XML (adossé à JavaScript comme à XML) 2005, J.Garret, popularité accrue au travers de quelques applications

Plus en détail

Le langage PHP permet donc de construire des sites web dynamiques, contrairement au langage HTML, qui donnera toujours la même page web.

Le langage PHP permet donc de construire des sites web dynamiques, contrairement au langage HTML, qui donnera toujours la même page web. Document 1 : client et serveur Les ordinateurs sur lesquels sont stockés les sites web sont appelés des serveurs. Ce sont des machines qui sont dédiées à cet effet : elles sont souvent sans écran et sans

Plus en détail

TP 2 : programmation côté serveur À rendre pour le mardi 6 mai 2008

TP 2 : programmation côté serveur À rendre pour le mardi 6 mai 2008 Université Claude Bernard Lyon 1 UFR d informatique avril 2006 MIAG soir Systèmes d Information Méthodes Avancées TP 2 : programmation côté serveur À rendre pour le mardi 6 mai 2008 Introduction Dans ce

Plus en détail

LISTES DE DISTRIBUTION GÉRÉES PAR SYMPA DOCUMENT EXPLICATIF DE L'INTERFACE WEB À L'INTENTION DES ABONNÉS

LISTES DE DISTRIBUTION GÉRÉES PAR SYMPA DOCUMENT EXPLICATIF DE L'INTERFACE WEB À L'INTENTION DES ABONNÉS LISTES DE DISTRIBUTION GÉRÉES PAR SYMPA DOCUMENT EXPLICATIF DE L'INTERFACE WEB À L'INTENTION DES ABONNÉS MAI 2013 Table des matières 1. Introduction... 3 2. Interface d accueil... 4 2.1. Zone d authentification...

Plus en détail

Les sites Internet dynamiques. contact : Patrick VINCENT pvincent@erasme.org

Les sites Internet dynamiques. contact : Patrick VINCENT pvincent@erasme.org Les sites Internet dynamiques contact : Patrick VINCENT pvincent@erasme.org Qu est-ce qu un site Web? ensemble de pages multimédia (texte, images, son, vidéo, ) organisées autour d une page d accueil et

Plus en détail

Application Web et J2EE

Application Web et J2EE Application Web et J2EE Servlet, JSP, Persistence, Méthodologie Pierre Gambarotto Département Informatique et Math appli ENSEEIHT Plan Introduction 1 Introduction Objectfis

Plus en détail

Sécurité d un site php

Sécurité d un site php Sensibilisation IUT de Fontainebleau 8 juin 2015 1 2 1 2 Enjeux L application manipulent-ils des données fiables? L application interagit-elle avec le bon interlocuteur? Le secret des données échangées

Plus en détail

Programmation Avancée pour le Web

Programmation Avancée pour le Web L3 Informatique Option : ISIL Programmation Avancée pour le Web RAMDANI Med U Bouira 1 Contenu du module Introduction aux applications Web Rappels sur les sites Web Conception d une application Web Notion

Plus en détail

Headers, cookies et sessions

Headers, cookies et sessions Headers, cookies et sessions Chargement de fichiers (upload) Entêtes HTTP et redirections Gestion des cookies et des sessions de connexions Authentification Validation des données Programmation avancée

Plus en détail

Pages Web statiques. LIF4 - Initiation aux Bases de données : PHP. Pages Web dynamiques. Illustration. Illustration

Pages Web statiques. LIF4 - Initiation aux Bases de données : PHP. Pages Web dynamiques. Illustration. Illustration statiques LIF4 - Initiation aux Bases de données : E.Coquery emmanuel.coquery@liris.cnrs.fr http ://liris.cnrs.fr/ ecoquery Principe de fonctionnement : L utilisateur demande l accès à une page Web depuis

Plus en détail

Cours 4 AJAX avec jquery

Cours 4 AJAX avec jquery Licence STIC IUT de Marne-la-Vallée 04/06/2015 Cours de jquery Cours 4 AJAX avec jquery Philippe Gambette Sources Cours de Jean-Loup Guillaume http://jlguillaume.free.fr/www/documents/teaching/ntw1213/li385_c5_jquery.pdf

Plus en détail

Architecture applicative de l application Web

Architecture applicative de l application Web Architecture applicative de l application Web Principes d organisation de l application PHP Gsb-AppliFrais Les principes d'organisation de l'application s'inspirent des travaux réalisés autour du contexte

Plus en détail

Les Framework Java DWR. Claude Duvallet 1/13. Université du Havre UFR Sciences et Techniques 25 rue Philippe Lebon - BP 540 76058 LE HAVRE CEDEX

Les Framework Java DWR. Claude Duvallet 1/13. Université du Havre UFR Sciences et Techniques 25 rue Philippe Lebon - BP 540 76058 LE HAVRE CEDEX Les Java DWR Claude Duvallet Université du Havre UFR Sciences et Techniques 25 rue Philippe Lebon - BP 540 76058 LE HAVRE CEDEX Claude.Duvallet@gmail.com http://litis.univ-lehavre.fr/ duvallet/ Claude

Plus en détail

L3 informatique TP n o 2 : Les applications réseau

L3 informatique TP n o 2 : Les applications réseau L3 informatique TP n o 2 : Les applications réseau Sovanna Tan Septembre 2009 1/20 Sovanna Tan L3 informatique TP n o 2 : Les applications réseau Plan 1 Transfert de fichiers 2 Le Courrier électronique

Plus en détail

Cet ouvrage a bénéficié des relectures attentives des zcorrecteurs.

Cet ouvrage a bénéficié des relectures attentives des zcorrecteurs. Cet ouvrage a bénéficié des relectures attentives des zcorrecteurs. Sauf mention contraire, le contenu de cet ouvrage est publié sous la licence : Creative Commons BY-NC-SA 2.0 La copie de cet ouvrage

Plus en détail

TP ASP SUPINFO DOT NET TRAINING COURSE

TP ASP SUPINFO DOT NET TRAINING COURSE TP ASP SUPINFO DOT NET TRAINING COURSE Auteur : David Poulin Version 1.0 25 novembre 2003 Nombre de pages : 13 Ecole Supérieure d Informatique de Paris 23. rue Château Landon 75010 PARIS www.supinfo.com

Plus en détail

Problématique. Développement Web 2. Problématique. Jetty Création d un serveur Web

Problématique. Développement Web 2. Problématique. Jetty Création d un serveur Web Communication client/serveur Comet Problématique Problématique Développement Web 2 Problématique : Nous souhaitons réaliser un tchat Les clients se connectent au serveur; Les clients peuvent discuter;

Plus en détail

Programmation Android TP7 - WebServices

Programmation Android TP7 - WebServices 1. WebService Dans le TP6, les avis étaient stockés dans une base SQL. Cette semaine les n-uplets sont stockés sur une base de données externe gérée par un serveur HTTP sur lequel tournent des scripts

Plus en détail

WWW - Intérêts du Web

WWW - Intérêts du Web WWW - Intérêts du Web client universel facilité d'emploi standards ouverts intégration des autres services Internet extensibilité du système faibles coûts logiciel et réseau utilisation au sein d'une entreprise

Plus en détail

Les 2 grands métiers. autour de la création Web. Mais où est passé l'intégrateur?

Les 2 grands métiers. autour de la création Web. Mais où est passé l'intégrateur? Les 2 grands métiers autour de la création Web Mais où est passé l'intégrateur? Langages et frameworks Outils spécifi ques dev mobile À voir dans le module multimédia... Langage : Java Objective C C#,...

Plus en détail

Université Bordeaux Segalen Licence 3 MIASHS, semestre 6 (2014/2015)

Université Bordeaux Segalen Licence 3 MIASHS, semestre 6 (2014/2015) Université Bordeaux Segalen Licence 3 MIASHS, semestre 6 (2014/2015) Conception de Sites Web Dynamiques : TD 7 Inscription de membres - Variables de sessions - Formulaires pour insérer des images Version

Plus en détail

Les formations. Développeur Logiciel. ENI Ecole Informatique

Les formations. Développeur Logiciel. ENI Ecole Informatique page 1/5 Titre professionnel : Reconnu par l Etat de niveau III (Bac), inscrit au RNCP (arrêté du 12/10/07, J.O. n 246 du 23/10/07) (32 semaines) Unité 1 : Structurer une application 6 semaines Module

Plus en détail

Manuel du revendeur. version 2.0-r1

Manuel du revendeur. version 2.0-r1 Manuel du revendeur version 2.0-r1 Table des matières 1 Explication des termes 3 2 Sections du tableau d administration dédié au revendeur 3 3 Généralités 4 3.1 Aperçu............................... 4

Plus en détail

techniques & langages

techniques & langages 65 techniques & langages ActionScript 2 66 ActionScript 3 67 ASP 68 ASP.NET 69 Bases de données MySQL 70 Ajax 71 Java 72 Javascript-AJAX 73 PHP-MySQL 74 XHTML et CSS niveau 1 75 XHTML et CSS niveau 2 76

Plus en détail

Introduction à PHP. Formulaires HTML et PHP, interactions avec le client. monnerat@u-pec.fr. 6 avril 2015. IUT de Fontainebleau. Introduction à PHP

Introduction à PHP. Formulaires HTML et PHP, interactions avec le client. monnerat@u-pec.fr. 6 avril 2015. IUT de Fontainebleau. Introduction à PHP Formulaires HTML et PHP, interactions avec le client IUT de Fontainebleau 6 avril 2015 1 Formlaire et traitement 2 Texte Cases à cocher Listes Upload de fichiers Sommaire Formlaire et traitement 1 Formlaire

Plus en détail

Apprenez les langages HTML5, CSS3 et JavaScript pour créer votre premier site web

Apprenez les langages HTML5, CSS3 et JavaScript pour créer votre premier site web Le Web 1. Qu est-ce que le Web? 7 1.1 Côté serveur : HTTP, FTP, langages, SQL 7 1.2 Côté client : HTML, CSS, JavaScript 10 2. Les langages et leur utilité 10 2.1 HTML 10 2.2 CSS 13 2.3 JavaScript 16 2.4

Plus en détail

Création d un catalogue en ligne

Création d un catalogue en ligne 5 Création d un catalogue en ligne Au sommaire de ce chapitre Fonctionnement théorique Définition de jeux d enregistrements Insertion de contenu dynamique Aperçu des données Finalisation de la page de

Plus en détail

Formation : WEbMaster

Formation : WEbMaster Formation : WEbMaster Objectif et Description : Centre Eclipse vous propose une formation complète WebMaster, vous permettant de : Utiliser dès maintenant les nouveautés du web2, ainsi alléger les besoins

Plus en détail

Plan. Environnement Client/Serveur. Cours 7 JavaServer Pages (1) JSP. Programmation Web coté serveur

Plan. Environnement Client/Serveur. Cours 7 JavaServer Pages (1) JSP. Programmation Web coté serveur Plan Environnement Client/Serveur Cours 7 JavaServer Pages (1) kn@lri.fr 7.1 Principe 7.2 Rappels HTTP 7.3 Le serveur web Tomcat Programmation Web coté serveur JSP 2/28 (rappel) génération de pages-web

Plus en détail

APP-TSWD Apprentissage Par Problèmes Techniques des Sites Web Dynamiques Licence Professionnelle FNEPI

APP-TSWD Apprentissage Par Problèmes Techniques des Sites Web Dynamiques Licence Professionnelle FNEPI APP-TSWD Apprentissage Par Problèmes Techniques des Sites Web Dynamiques Licence Professionnelle FNEPI Cours en Réponse à questions, n 1 Valérie Bellynck, Benjamin Brichet-Billet, Mazen Mahrous Grenoble

Plus en détail

PHP CLÉS EN MAIN. 76 scripts efficaces pour enrichir vos sites web. par William Steinmetz et Brian Ward

PHP CLÉS EN MAIN. 76 scripts efficaces pour enrichir vos sites web. par William Steinmetz et Brian Ward PHP CLÉS EN MAIN 76 scripts efficaces pour enrichir vos sites web par William Steinmetz et Brian Ward TABLE DES MATIÈRES INTRODUCTION 1 1 TOUT CE QUE VOUS AVEZ TOUJOURS VOULU SAVOIR SUR LES SCRIPTS PHP

Plus en détail

4D v11 SQL Release 6 (11.6) ADDENDUM

4D v11 SQL Release 6 (11.6) ADDENDUM ADDENDUM Bienvenue dans la release 6 de 4D v11 SQL. Ce document présente les nouveautés et modifications apportées à cette nouvelle version du programme. Augmentation des capacités de chiffrement La release

Plus en détail

Vous pouvez utiliser votre propre script personnalisé (ISAPI, NSAPI ou CGI) comme programme de traitement de formulaire.

Vous pouvez utiliser votre propre script personnalisé (ISAPI, NSAPI ou CGI) comme programme de traitement de formulaire. Récupérer et stocker les données de formulaire entrées par les visiteurs du site Par défaut, les résultats du formulaire sont enregistrés dans un fichier texte. Définir un formulaire pour enregistrer les

Plus en détail

Sécurité web client. Magali Contensin. ANF Dev Web ASR Carry-Le-Rouet. 25 octobre 2012

Sécurité web client. Magali Contensin. ANF Dev Web ASR Carry-Le-Rouet. 25 octobre 2012 web client Magali Contensin 25 octobre 2012 ANF Dev Web ASR Carry-Le-Rouet Plan Visibilité du code La vérification des données côté client est insuffisante XSS Usurpation de contenu AJAX Visibilité du

Plus en détail

jquery Mobile La bibliothèque JavaScript pour le Web mobile Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2

jquery Mobile La bibliothèque JavaScript pour le Web mobile Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2 jquery Mobile La bibliothèque JavaScript pour le Web mobile É r i c S a r r i o n Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2 Table des matières PREMIÈRE PARTIE

Plus en détail

Principales failles de sécurité des applications Web Principes, parades et bonnes pratiques de développement

Principales failles de sécurité des applications Web Principes, parades et bonnes pratiques de développement Guillaume HARRY l Contenu sous licence Creative Commons CC-BY-NC-ND Principales failles de sécurité des applications Web Principes, parades et bonnes pratiques de développement P. 2 1. Introduction 2.

Plus en détail

PHP OO et Pear DB. Olivier Perrin IUT Nancy-Charlemagne Département Informatique Université Nancy 2. Olivier.Perrin@loria.fr

PHP OO et Pear DB. Olivier Perrin IUT Nancy-Charlemagne Département Informatique Université Nancy 2. Olivier.Perrin@loria.fr PHP OO et Pear DB Olivier Perrin IUT Nancy-Charlemagne Département Informatique Université Nancy 2 Olivier.Perrin@loria.fr Classes et objets en PHP Une classe PHP regroupe des variables d instance, représentés

Plus en détail

Apprendre à développer avec JavaScript

Apprendre à développer avec JavaScript Présentation du langage JavaScript 1. Définition et rapide historique 11 2. Pré-requis pour un apprentissage aisé du langage 13 3. Outillage nécessaire 14 4. Positionnement du JavaScript face à d autres

Plus en détail

Le langage JAVASCRIPT

Le langage JAVASCRIPT Le langage JAVASCRIPT I Introduction Vous vous dites encore un langage alors qu il y en a déjà un nombre non négligeable. En effet un de plus, mais à chaque langage son utilisation et sa particularité.

Plus en détail

Philosophie des extensions WordPress

Philosophie des extensions WordPress 8 Philosophie des extensions WordPress Le concept L une des forces de WordPress dans la jungle CMS, c est la simplicité de création d extensions. Il y a plusieurs raisons à cela. Des raisons techniques

Plus en détail

TD3 : PHP «avancé» V2.4.0

TD3 : PHP «avancé» V2.4.0 TD3 : PHP «avancé» V2.4.0 Cette œuvre est mise à disposition selon les termes de la licence Creative Commons Attribution Pas d'utilisation Commerciale Partage à l'identique 3.0 non transposé. Document

Plus en détail

Web et présentation d information spatiale

Web et présentation d information spatiale Université de La Rochelle LUP-SIG 2004-2005 Programmation SIG et Internet Cartographique Web et présentation d information spatiale Moteurs de recherche et formulaires HTML Jean-Michel FOLLIN jmfollin@univ-lr.fr

Plus en détail

Applications orientées données (NSY135)

Applications orientées données (NSY135) Applications orientées données (NSY135) 2 Applications Web Dynamiques Auteurs: Raphaël Fournier-S niehotta et Philippe Rigaux (philippe.rigaux@cnam.fr,fournier@cnam.fr) Département d informatique Conservatoire

Plus en détail

Le langage php. Serveur http est automatiquement lancé.

Le langage php. Serveur http est automatiquement lancé. Le langage php 1. Introduction aux langages serveurs : Il y a deux modes d exécution d une page HTML : Local : en cliquant sur le fichier, le navigateur Serveur http est automatiquement lancé. Navigateur

Plus en détail

COURS DE PROGRAMMATION DE SITE WEB 3 (Base de données web)

COURS DE PROGRAMMATION DE SITE WEB 3 (Base de données web) COURS DE PROGRAMMATION DE SITE WEB 3 (Base de données web) Chapitre 1 INTRODUCTION À PHP PLAN DU COURS 1.1 Les sites statiques et dynamiques 1.2 Fonctionnement d un site internet 1.3 Les langages du Web

Plus en détail

Javascript et les applications Web

Javascript et les applications Web Javascript et les applications Web APIs récentes ou en cours d adoption Télécom ParisTech Jean-Claude Moissinac Octobre 2014 Avec l aide de Jean-Claude Dufourd Et Thomas Bertrand Mastère CPD Javascripts,

Plus en détail

Technologies Web. Farah Benamara Zitoune Maître de conférences IRIT-UPS benamara@irit.fr

Technologies Web. Farah Benamara Zitoune Maître de conférences IRIT-UPS benamara@irit.fr Technologies Web Farah Benamara Zitoune Maître de conférences IRIT-UPS benamara@irit.fr Plan du cours Cours 1 : Introduction HTML/CSS Cours 2 : Introduction programmation web + javascirpt Cours 3 : Introduction

Plus en détail

L1 Option Programmation Web côté Serveur - Contrôle continu n 1

L1 Option Programmation Web côté Serveur - Contrôle continu n 1 L Option Programmation Web côté Serveur - Contrôle continu n Veuillez noircir les cases correspondantes à votre numéro d étudiant ( case/colonne). Si votre N est, il faut noircir le dans la ère colonne,

Plus en détail

Vulnérabilités logicielles Injection SQL

Vulnérabilités logicielles Injection SQL MGR850 Hiver 2014 Vulnérabilités logicielles Injection SQL Hakima Ould-Slimane Chargée de cours École de technologie supérieure (ÉTS) Département de génie électrique 1 Plan SQL Injection SQL Injections

Plus en détail

Compte rendu de PHP MySQL : création d un formulaire de base de données

Compte rendu de PHP MySQL : création d un formulaire de base de données REVILLION Joris Décembre 2009 3EI Compte rendu de PHP MySQL : création d un formulaire de base de données Objectifs : Le principal objectif de ce cours est de découvrir et de nous familiariser avec le

Plus en détail

TP2 : Client d une BDD SqlServer

TP2 : Client d une BDD SqlServer TP2 : Client d une BDD SqlServer Objectifs : utiliser la barre de menu, utiliser les préférences d application (settings) ou (options), gérer la persistance des données, utiliser la bibliothèque jtds:jdbc

Plus en détail

ITII Programmation Web FMC Page 1

ITII Programmation Web FMC Page 1 Programmation Web FMC Page 1 Définition d'ajax AJAX signifie Asynchronous JavaScript and XML : c'est un ensemble de technologies (CSS, JavaScript, XML...) utilisées ensemble afin de permettre des communications

Plus en détail

ISLOG Logon Tools Manuel utilisateur

ISLOG Logon Tools Manuel utilisateur ISLOG Logon Tools Manuel utilisateur Document révision 02 Copyright 2013 ISLOG Network. Tout droit réservé. Historique de version Date Auteur Description Document Version 23/08/13 F Godinho Version initiale

Plus en détail

Cours de programmation web

Cours de programmation web Cours de programmation web ENSAE 2006-2007 Cours 1 - Introduction 1. Introduction 2. Le principe d Internet 3. Les langages du web 4. Le web 2.0 Introduction : Historique 1967 : Arpanet : réseau militaire

Plus en détail

édition revue et corrigée avec Java SE 7 7 1 Les bases 11 Compiler un programme Java 13 Exécuter un programme Java 14 Définir le chemin de classe 15

édition revue et corrigée avec Java SE 7 7 1 Les bases 11 Compiler un programme Java 13 Exécuter un programme Java 14 Définir le chemin de classe 15 Table des matières Au sujet de l auteur 1 Introduction 3 édition revue et corrigée avec Java SE 7 7 1 Les bases 11 Compiler un programme Java 13 Exécuter un programme Java 14 Définir le chemin de classe

Plus en détail

Formation web. Antoine Souques. 25 février 2010 ECP

Formation web. Antoine Souques. 25 février 2010 ECP Formation web ECP 25 février 2010 Pré-requis Présentation Formation HTML/CSS Formation PHP (pour l'ajax) Ce qu'on sait faire Faire des pages web (HTML/CSS) Avoir des pages évolutives (PHP) stocker et consulter

Plus en détail

TD2 : PHP «avancé» V3.0.0

TD2 : PHP «avancé» V3.0.0 TD2 : «avancé» V3.0.0 Cette œuvre est mise à disposition selon les termes de la licence Creative Commons Attribution Pas d'utilisation Commerciale Partage à l'identique 3.0 non transposé. Document en ligne

Plus en détail

PHP 5.4 Développez un site web dynamique et interactif

PHP 5.4 Développez un site web dynamique et interactif Introduction 1. Objectif de l'ouvrage 9 2. Bref historique de PHP 10 3. Où se procurer PHP? 10 4. Conventions d'écriture 12 Vue d'ensemble de PHP 1. Qu'est-ce que PHP? 13 2. Structure de base d'une page

Plus en détail

TD 1 - Programmation Web avec PHP (1)

TD 1 - Programmation Web avec PHP (1) TD 1 - Programmation Web avec PHP (1) CORRIGE DU TD 1 Objectif : créer des scripts du côté serveur avec PHP, utiliser quelques fonctionnalités Internet de PHP Attention : si vous recréez des pages PHP

Plus en détail

Le Web: les machines parlent aux machines

Le Web: les machines parlent aux machines Le Web: les machines parlent aux machines Historique Année 70 : ARPA (Advanced Research Project Agency). Relier les centres de recherche : ARPANET. 1972 : Premières spécifications TCP/IP (IP internet Protocol)

Plus en détail

Bases de données (INF225), TELECOM ParisTech. TP PHP & MySQL

Bases de données (INF225), TELECOM ParisTech. TP PHP & MySQL Bases de données (INF225), TELECOM ParisTech TP PHP & MySQL Pierre Senellart (pierre.senellart@telecom-paristech.fr) Bogdan Cautis (bogdan.cautis@telecom-paristech.fr) Ioana Ileana (ioana.ileana@telecom-paristech.fr)

Plus en détail

Evolutions du Web et des langages

Evolutions du Web et des langages Evolutions du Web Evolutions du Web et des langages WEB statique Ces pages sont écrites en HTML Les pages demandées sont identiques quelque soit La personne qui les demande L heure de la demande Etc. WEB

Plus en détail

Devenez un véritable développeur web en 3 mois!

Devenez un véritable développeur web en 3 mois! Devenez un véritable développeur web en 3 mois! L objectif de la 3W Academy est de former des petits groupes d élèves au développement de sites web dynamiques ainsi qu à la création d applications web

Plus en détail

GUIDE DE DEMARRAGE V1.02

GUIDE DE DEMARRAGE V1.02 SUPPORT FONCTIONNEL SFR Business Team SFR Suite Stockage Cloud GUIDE DE DEMARRAGE V1.02 Entité Nom Date(s) Propriétaire Rédacteur Vérificateur SFR SFR SFR SFR www.sfr.fr Page : 2/15 Table des matières

Plus en détail

Webmaster / Concepteur Multimedia

Webmaster / Concepteur Multimedia Durée : 217 heures Objectifs : Webmaster / Concepteur Multimedia Participants : Toute personne attirée par la création de site internet professionnel. Méthodes : Mise en pratique sur micro-ordinateur.

Plus en détail

Gérer les formulaires

Gérer les formulaires 195 Chapitre 7 Gérer les formulaires 1. Vue d'ensemble Gérer les formulaires 1.1 Petit rappel sur les formulaires Le formulaire est un outil de base indispensable pour les sites web dynamiques puisqu'il

Plus en détail

Formation interne AJAX

Formation interne AJAX Formation interne AJAX AJAX - Formation Interne DRF - ENC Table des matières TABLE DES MATIERES I -AJAX - Généralités... 5 A -Définitions...5 B -Comment çà marche?...5 1)Contrairement au fonctionnement

Plus en détail