Programmation Web Avancée. Cours 7 Web Storage Ajax.

Save this PDF as:
 WORD  PNG  TXT  JPG

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

Download "Programmation Web Avancée. Cours 7 Web Storage Ajax."

Transcription

1 Programmation Web Avancée Cours 7 Web Storage Ajax

2 Plan 1 Introduction/ Généralité et rappels sur le Web/ Javascript : survol du langage 2 Objets/Portée des variables/tableaux/rappels MVC 3 Visiteur/Expressions régulières/git 4 DOM/Observers et MVC 5 Évènements DOM/Rappels sur les clôtures/set & Map 6 Canvas 7 Web Storage/Ajax 7.1 Webstorage 7.2 Modèle de sécurité de Javascript 7.3 Ajax 2/16

3 Persistance Le développement d'application Web moderne (et en particulier mobiles) fait apparaître un problème de persistance des données En effet, on souhaîte pouvoir stocker l'état du programme Javascript (pour pouvoir le restaurer plus tard). On peut aussi vouloir stocker des données volumineuses pour pouvoir y accéder «hors connexions». Les solutions «naïves» ne fonctionnent pas pour Javascript : Impossible en Javascript d'écrire dans des fichiers du répertoire utilisateur (modèle de sécurité de Javascript) Utilisation des cookies : ne permet pas de stocker des donnéer de grande taille. Envoi de données au serveur : nuit à l'interactivité 3/16

4 Storage L'object Storage implémente une table associative clé valeur : Associe dans l'espace de stockage la valeur value à la clé key (toutes deux sont des chaînes de caractères arbitraires)..setitem(key, value) :.getitem(key) : Renvoie la valeur associée à la clé key.removeitem(key) :.length :.key(i) : Supprime la valeur associée à la clé key Renvoie le nombre de clé associées Renvoie la valeur de la i ème clé Deux objets de type Storage sont accessibles : localstorage : stockage à durée de vie illimité sessionstorage : stockage jusqu'à la fin de la session (fermeture de l'onglet ou du navigateur) 4/16

5 Démo On va implémeter un simple compteur de click. On stocke que le nombre de click à la fois dans le localstorage et dans le sessionstorage. 5/16

6 Plan 1 Introduction/ Généralité et rappels sur le Web/ Javascript : survol du langage 2 Objets/Portée des variables/tableaux/rappels MVC 3 Visiteur/Expressions régulières/git 4 DOM/Observers et MVC 5 Évènements DOM/Rappels sur les clôtures/set & Map 6 Canvas 7 Web Storage/Ajax 7.1 Webstorage 7.2 Modèle de sécurité de Javascript 7.3 Ajax 6/16

7 Accès au données depuis Javascript Le modèle de sécurité des navigateurs Web impose une politique de même origine pour l'accès à des données (same origin policy). Les scripts de deux pages ne peuvent partager des données que si ces pages ont la même origine Deux pages ont la même origine si elles ont les même protocole, hôte et port. Si on considère : : (dépend des navigateurs) 7/16

8 Politique de sécurité Si deux pages ont la même origine, alors elle peuvent se manipuler librement l'une/l'autre (changer leur DOM, enregistrer/supprimer des gestionnaires d'évènements, lire l'espace de stockage et les cookies, ) Cela pose de gros problèmes de sécurité et de confidentialité si les deux pages n'ont pas la même origine interdit. Attention : un script a pour origine celle de la page qui le charge et non pas l'url à laquelle il est stocké 8/16

9 Exercice Imaginer un scenario dans lequel une page charge légitimement un script distant et où ce dernier collecte des informations confidentielles? 9/16

10 Plan 1 Introduction/ Généralité et rappels sur le Web/ Javascript : survol du langage 2 Objets/Portée des variables/tableaux/rappels MVC 3 Visiteur/Expressions régulières/git 4 DOM/Observers et MVC 5 Évènements DOM/Rappels sur les clôtures/set & Map 6 Canvas 7 Web Storage/Ajax 7.1 Webstorage 7.2 Modèle de sécurité de Javascript 7.3 Ajax 10/16

11 Asynchronous Javascript and XML Une application Web doit parfois échanger avec un serveur Web : Calcul coûteux (en mémoire, temps, ) Centralisation (synchronisation de plusieurs clients, vérification d'identifiants, de licences, ) Accès à des données distantes Utilisation de formulaires HTML : Nuit à l'interactivité (alternance client/serveur/client/serveur fixée, temps de transmission) Perte de la page courante, nécessité de sauver l'état du client localement et re le restaurer AJAX : API permettant d'envoyer des requêtes HTTP à un serveur depuis Javascript de manière asynchrone, en tâche de fond et de récupérer le résultat 11/16

12 XmlHttpRequest Objet contenant les (nombreuses) méthodes permettant d'envoyer une requête GET ou POST à un serveur distant : new XmlHttpRequest() : création de l'objet.open(method, url, async) :.send() :.responsetext :.status :.readystate : crée une requête HTTP avec la méthode method (valant "GET" ou "POST"), vers l'url url. Le booléen async (vrai par défaut) exécute un envoi asynchrone. On le laissera toujours à vrai. envoie la requête au serveur. L'appel retourne immédiatement si async valait vrai lors de l'ouverture contient la réponse du serveur sous forme de chaîne de caractères le code HTTP de la réponse du serveur Un entier entre 0 (requête non envoyée) et 4 (résultat disponible) 12/16

13 Traîtement asynchrone de la réponse On se connecte à l'évennement readystatechange de l'objet XmlHttpRequest. Exemple: var xhr = new XmlHttpRequest(); xhr.open("get", "page.php?user=toto", true); xhr.addeventlistener("readystatechange", function (ev) { if (xhr.status == 200 && xhr.readystate == 4) { console.log(xhr.responsetext); } }); xhr.send(); 13/16

14 Avantage/Inconvénients Avantages : Évite de recharger la page Permet d'envoyer plusieurs requêtes de manière asynchrone Permet de faire autre chose (interaction utilisateur) en attendant que la réponse arrive Inconvénient Sujet à la same origin policy (donc un script ne peut parler qu'au serveur qui l'a fourni), sauf si le serveur accepte explicitement les connexions (il faut configurer le serveur Web spécialement). Interface relativement bas-niveau Ne permet pas une communication temps réel On peut demander un résultat d'un autre type que string (document HTML, objet JSON, ) 14/16

15 Démo On souhaite faire une boite de texte qui propose de la complétion à partir d'un dictionaire en français. On doit écrire une partie serveur et une partie client. 15/16

16 Retour sur l'exercice de «sécurité» Le script malicieux peut-il utiliser AJAX pour envoyer les cookies au serveur? 16/16

Exemples d applications Ajax

Exemples d applications Ajax Web 2.0 et Ajax AJAX Exemples d applications Ajax Complétion automatique Validation en temps réel des données d un formulaire Navigation dynamique Lecture d un flux RSS Sauvegarde automatique des documents

Plus en détail

Les API de HTML5. Michel Gagnon École Polytechnique de Montréal

Les API de HTML5. Michel Gagnon École Polytechnique de Montréal Les API de HTML5 Michel Gagnon École Polytechnique de Montréal Cache d application L idée ici consiste à garder en cache les ressources nécessaires pour continuer à utiliser une application web même si

Plus en détail

Technologies Web. Technologies Web AJAX TCM-TWEB Julien BEAUCOURT 2006 pour ETNA

Technologies Web. Technologies Web AJAX TCM-TWEB Julien BEAUCOURT 2006 pour ETNA AJAX Sommaire Introduction Applications Web Applications AJAX Avantages / Inconvénients Exemple Introduction AJAX, ou Asynchronous JavaScript And XML («XML et Javascript asynchrones»), est un acronyme

Plus en détail

AJAX Licence 3 ère Année

AJAX Licence 3 ère Année BDWeb : AJAX Licence 3 ère Année Fabrice Lefèvre 2010 Asynchronous Javascript + XML nom donné à un ensemble de techniques préexistantes dépend essentiellement de XMLHttpRquest, un objet coté client utilisable

Plus en détail

Programmation Web AJAX

Programmation Web AJAX /25 Programmation Web AJAX Thierry Hamon Bureau H202 Institut Galilée - Université Paris 13 & LIMSI-CNRS hamon@limsi.fr http://perso.limsi.fr/hamon/teaching/progweb-20132014/ 2/25 Asynchronous Javascript

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

Exercices de Programmation Web, Laboratoires et TP

Exercices de Programmation Web, Laboratoires et TP Exercices de Programmation Web, Laboratoires et TP TABLEAU DES MATIÈRES 1. Introduction...1 2. Outils de développement...1 3. Programmation en JQuery...2 3.1. Utilisation Démarrer jquery...2 3.2. Gestion

Plus en détail

SESSION, AUTHENTIFICATION ET CONTRÔLE D ACCÈS

SESSION, AUTHENTIFICATION ET CONTRÔLE D ACCÈS SESSION, AUTHENTIFICATION ET CONTRÔLE D ACCÈS Développer des applications Web 1 Gestion de sessions Session 2 En informatique, le terme «session» désigne un temps durant lequel un programme est en interaction

Plus en détail

Table des matières. Introduction 1

Table des matières. Introduction 1 Table des matières Introduction 1 1 Les bases de JavaScript 5 Compréhension de JavaScript (et de son histoire) 5 Établissement d un système de test 8 Configuration de navigateurs Web 9 Inclusion du code

Plus en détail

Ajax. Asynchronous Javascript and XML. <tv>lt La Salle Avignon BTS IRIS</tv>

Ajax. Asynchronous Javascript and XML. <tv>lt La Salle Avignon BTS IRIS</tv> Ajax Asynchronous Javascript and XML Le terme Ajax a été introduit par Jesse James Garrett (informaticien américain), le 18 février 2005, dans un article sur le site Web Adaptive Path (http://www.scriptol.fr/ajax/ajax-garrett.php)

Plus en détail

Programme Formation Webmaster Opérationnel niveau 2

Programme Formation Webmaster Opérationnel niveau 2 Programme Formation Webmaster Opérationnel niveau 2 Objectif : Savoir personnaliser et dynamiser le contenu de sites web par la connaissance de l'html5/css3, du PHP MySQL, du JavaScript et d'ajax. Compétences

Plus en détail

Tutoriel Ajax en exemples. nom Ajax ne se soit répandu, dès la parution d'un article de J. J. Garrett. Sommaire

Tutoriel Ajax en exemples. nom Ajax ne se soit répandu, dès la parution d'un article de J. J. Garrett. Sommaire Page 1 sur 9 Rechercher Ajax XUL JavaScript CSS HTML 5 FAQ-Forum Ajax Tutoriel Ajax XMLHttpRequest Frameworks Démos et scripts Tutoriel Ajax Web 2.0 Techniques Application web Tutoriel RSS XUL & XML Tutoriel

Plus en détail

TP Websockets avec JavaScript et Node.js

TP Websockets avec JavaScript et Node.js Intervenant : Chouki TIBERMACINE TP Websockets avec JavaScript et Node.js Objectifs du TP. - Écrire un serveur Node.js simple capable de communiquer avec le protocole Websockets - Écrire un client JavaScript

Plus en détail

Ajax et PHP5. Bonjour tout le monde ( Hello World ) en Ajax et PHP

Ajax et PHP5. Bonjour tout le monde ( Hello World ) en Ajax et PHP Ajax et PHP5 Ajax n est pas vraiment une technologie mais plutôt un ensemble de plusieurs technologies, parmi lesquelles se trouvent JavaScript Asynchrone, XML, XHTML et CSS. Le mot asynchrone est de la

Plus en détail

AJAX - Développez pour le Web 2.0 Entrez dans le code : JavaScript, XML, DOM, XMLHttpRequest2... (2ième édition)

AJAX - Développez pour le Web 2.0 Entrez dans le code : JavaScript, XML, DOM, XMLHttpRequest2... (2ième édition) Présentation générale d'ajax 1. Principe et définition 11 2. Exemples sur le Web 16 2.1 Google Maps 16 2.2 Google Suggest 18 2.3 Google Agenda 19 2.4 Google Docs, Google Sheets et Google Slides 20 3. Avantages

Plus en détail

Exercices sur Servlets/JSP

Exercices sur Servlets/JSP Exercices sur Servlets/JSP XVII-1 Installation Installer, si ce n'est déjà fait : J2SE (1.6) tomcat (6.0) un éditeur de texte (notepad++) XVII-2 Correspondance URL vs. emplacement disque On doit avoir

Plus en détail

JavaScript NÉCESSAIRE WEB XAVIER BLANC UNIVERSITÉ DE BORDEAUX

JavaScript NÉCESSAIRE WEB XAVIER BLANC UNIVERSITÉ DE BORDEAUX JavaScript NÉCESSAIRE WEB XAVIER BLANC UNIVERSITÉ DE BORDEAUX Script JavaScript est un langage de script Un script est une séquence d instructions qui seront interprétées les unes après les autres Les

Plus en détail

PHP. Arnaud Sallaberry montp3.fr. Programma;on pour le Web 1

PHP. Arnaud Sallaberry montp3.fr. Programma;on pour le Web 1 PHP Arnaud Sallaberry arnaud.sallaberry@univ- montp3.fr 06/02/2015 Programma;on pour le Web 1 Plan Les principaux langages du Web Côté client Côté serveur Autres Récapitula;f PHP Introduc;on Types de données

Plus en détail

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

Pour naviguer sur le Web, il faut : Naviguer: dialoguer avec un serveur web 1. 2. Pour naviguer sur le Web, il faut : Une connexion au réseau Réseau Connexion physique (câbles,sans fils, ) à des machines Protocoles de communication Plusieurs niveau (couche) : Internet, protocole

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

Programmation Web IMAC TD 7 : AJAX et JSON. 18 novembre 2015

Programmation Web IMAC TD 7 : AJAX et JSON. 18 novembre 2015 Programmation Web IMAC 2015-2016 TD 7 : AJAX et JSON 18 novembre 2015 Objectif: Ce TD a pour but de decouvrire les syntaxes AJAX et JSON, ainsi que leur liens avec jquery. 1 AJAX AJAX (acronyme de Asynchronous

Plus en détail

IDENTIFICATION DESCRIPTION

IDENTIFICATION DESCRIPTION IDENTIFICATION Intitulé de l Unité d Enseignement : PROJET DE DÉVELOPPEMENT WEB Intitulé du cours : PROJET DE DÉVELOPPEMENT : PROGRAMMATION CÔTÉ CLIENT ET PROGRAMMATION CÔTÉ SERVEUR Nombre de périodes

Plus en détail

AJAX. Magali Contensin. JoSy AJAX et bibliothèques JS pour les ASR. 3 novembre 2011

AJAX. Magali Contensin. JoSy AJAX et bibliothèques JS pour les ASR. 3 novembre 2011 AJAX Magali Contensin 3 novembre 2011 JoSy AJAX et bibliothèques JS pour les ASR Plan Comment actualiser une partie d'une page web? Principe Quelques applications Etapes Sécurité Support par les navigateurs

Plus en détail

Developpement Web Lic Pro Web et Mobile REST avec PHP Silex

Developpement Web Lic Pro Web et Mobile REST avec PHP Silex Developpement Web Lic Pro Web et Mobile 2017 2018 REST td n 5 REST avec PHP Silex Silex, REST, API Exercice 1. Contexte Dans ce TD, on va mettre en place une architecture REST simple entre sur un serveur

Plus en détail

Module Parcours. Comment identifier l utilisateur et améliorer son expérience client 19/4/2016. Canada France Russie. dialoginsight.

Module Parcours. Comment identifier l utilisateur et améliorer son expérience client 19/4/2016. Canada France Russie. dialoginsight. Comment identifier l utilisateur et améliorer son expérience client 19/4/2016 Canada France Russie dialoginsight.com 1 Table des matières Préambule... 2 Utilisation du stockage Web... 2 Stockage de session

Plus en détail

Cours 4 AJAX avec jquery

Cours 4 AJAX avec jquery Licence CRRW IUT de Marne-la-Vallée 02/11/2016 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

Java et jquery Java et jquery - Intégrer un framework JavaScript dans l'écosystème JEE - Version numérique

Java et jquery Java et jquery - Intégrer un framework JavaScript dans l'écosystème JEE - Version numérique Avant-propos 1. Introduction 13 2. Niveau de compétences requis 14 3. Structure du livre 14 Premiers pas 1. Introduction 17 2. Les applications JEE 18 2.1 Les API JEE 19 2.2 Les ressources statiques 22

Plus en détail

Environnement Client/Serveur. Cours 7 JavaServer Pages (1) kn@lri.fr

Environnement Client/Serveur. Cours 7 JavaServer Pages (1) kn@lri.fr Environnement Client/Serveur Cours 7 JavaServer Pages (1) kn@lri.fr Plan 1 Rappels sur les systèmes d'exploitations / Communication par mémoire partagée 2 Réseaux généralités, IP, UDP 3 TCP, Rappels sur

Plus en détail

JQUERY : Développer en Javascript avec le framework JQUERY

JQUERY : Développer en Javascript avec le framework JQUERY JQUERY : Développer en Javascript avec le framework JQUERY Objectifs : Cette formation Jquery vous permet d'acquérir des connaissances et des compétences pour développer des sites Web interactifs et dynamiques

Plus en détail

Comprendre les concepts fondamentaux de jquery Mettre en place des applications web 2.0 dynamiques avec HTML, CSS, jquery et Ajax

Comprendre les concepts fondamentaux de jquery Mettre en place des applications web 2.0 dynamiques avec HTML, CSS, jquery et Ajax Formation jquery Objectif(s): Comprendre les concepts fondamentaux de jquery Mettre en place des applications web 2.0 dynamiques avec HTML, CSS, jquery et Ajax Durée : 2 jour(s) Pré-requis : Avoir suivi

Plus en détail

PROJET DE DEVELOPPEMENT WEB

PROJET DE DEVELOPPEMENT WEB MINISTERE DE LA COMMUNAUTE FRANCAISE ADMINISTRATION GENERALE DE L ENSEIGNEMENT ET DE LA RECHERCHE SCIENTIFIQUE ENSEIGNEMENT DE PROMOTION SOCIALE DE REGIME 1 DOSSIER PEDAGOGIQUE UNITE DE FORMATION PROJET

Plus en détail

HTML5 (LP IRSII) TP3

HTML5 (LP IRSII) TP3 HTML5 (LP IRSII) TP3 Jean-Yves Didier Situation initiale : Monsieur Lesieur, épicier, souhaite s équiper à moindre frais pour faciliter le passage en caisse de ses clients. Il a donc acheté un lecteur

Plus en détail

Web dynamique. approche client/serveur

Web dynamique. approche client/serveur Web dynamique approche client/serveur Client/serveur Serveur requête (url) réponse (fichiers) Client url = adresse IP + /chemin/vers/fichier réponse = fichier (lu sur le DD du serveur) Le client gère la

Plus en détail

MODALITÉS D ÉVALUATION : DOCUMENT DÉLIVRÉ :

MODALITÉS D ÉVALUATION : DOCUMENT DÉLIVRÉ : DURÉE : 28 jours soit 196 heures de formation VERSION 2017 RÉSUMÉ PROGRAMME : - HTML / CSS 8 jours [56 heures] - JAVASCRIPT 7 jours [49 heures] - PHP / SQL 10 jours [70 heures] - RÉFÉRENCEMENT 3 jours

Plus en détail

Triptyque d'une application. Architectures N-tiers. Triptyque d'une application. Triptyque d'une application. Triptyque d'une application

Triptyque d'une application. Architectures N-tiers. Triptyque d'une application. Triptyque d'une application. Triptyque d'une application Architectures N-tiers Master Technologies de l'internet 1 ère année Eric Cariou Université de Pau et des Pays de l'adour UFR Sciences Pau Département Informatique Eric.Cariou@univ-pau.fr métier Octobre

Plus en détail

Architectures N-tiers

Architectures N-tiers Architectures N-tiers Master Technologies de l'internet 1 ère année Eric Cariou Université de Pau et des Pays de l'adour UFR Sciences Pau Département Informatique Eric.Cariou@univ-pau.fr Octobre 2016 1

Plus en détail

Programmation web & mobile d applications géomatiques

Programmation web & mobile d applications géomatiques Programmation web & mobile d applications géomatiques SCG-67216 Technologies pour réaliser des applications géospatiales communicantes Architectures Web, J2EE et Servlets Thierry Badard & Frédéric Hubert

Plus en détail

LIFAP5 Programmation fonctionnelle pour le WEB

LIFAP5 Programmation fonctionnelle pour le WEB LIFAP5 Programmation fonctionnelle pour le WEB CM1 introduction à javascript Licence informatique UCBL Printemps 2016 2017 https://liris.cnrs.fr/~rthion/dokuwiki/doku.php?id=enseignement:lifap5:start FST-INFO

Plus en détail

Ajax, jquery et PHP. 42 ateliers pour concevoir des applications Web 2.0. Jean-Marie Defrance. 3 e édition

Ajax, jquery et PHP. 42 ateliers pour concevoir des applications Web 2.0. Jean-Marie Defrance. 3 e édition Ajax, jquery et PHP 42 ateliers pour concevoir des applications Web 2.0 3 e édition Jean-Marie Defrance Groupe Eyrolles, 2008, 2010, 2011, ISBN : 978-2-212-13271-7 3 Comment fonctionne Ajax? Ajax, un amalgame

Plus en détail

Vous avez dit script?

Vous avez dit script? Vous avez dit script? Le mot anglais script désigne (dans l'acception qui nous intéresse) le texte d'un film ou d'une pièce de théâtre. Un script est donc un texte destiné à être joué - comme un programme...

Plus en détail

Formation Webmaster Avancé : HTML5/CSS3, JavaScript/DOM + Responsive Design et XML, JSON, AJAX/jQuery

Formation Webmaster Avancé : HTML5/CSS3, JavaScript/DOM + Responsive Design et XML, JSON, AJAX/jQuery Objectif(s): Formation Webmaster Avancé : HTML5/CSS3, JavaScript/DOM + Responsive Design et XML, JSON, AJAX/jQuery Maîtriser HTML5/CSS3 Mettre en œuvre les techniques de conception de sites web adaptatifs

Plus en détail

COMFAST. Gestionnaire de communication

COMFAST. Gestionnaire de communication COMFAST 2015 Gestionnaire de communication Rapport de stage FINES Guillaume COMBARI Christophe 29/06/2015 Remerciements Je remercie Monsieur COMBARI de m avoir accueilli dans son entreprise de business

Plus en détail

A. Présentation. 1. Dialogue avec une servlet. Les servlets. Le développement d'applications web avec JEE 6 45

A. Présentation. 1. Dialogue avec une servlet. Les servlets. Le développement d'applications web avec JEE 6 45 Les servlets A. Présentation La première question que l'on se pose lorsque l'on commence à développer des applications Web concerne en général l'aspect que peut avoir une servlet. En fait une servlet est

Plus en détail

Services de retrait et de dépôt de fichiers

Services de retrait et de dépôt de fichiers FICHE DOCUMENTAIRE Services de retrait et de dépôt de fichiers 11/03/2016 Accès Les deux services sont accessibles à partir du portail entreprise à l adresse suivante : http://entreprises.insee.fr/ecmoss.htm

Plus en détail

AJAX. Magali Contensin. ANF Dev Web ASR Carry-le-Rouet. 25 octobre 2012

AJAX. Magali Contensin. ANF Dev Web ASR Carry-le-Rouet. 25 octobre 2012 AJAX Magali Contensin 25 octobre 2012 ANF Dev Web ASR Carry-le-Rouet Plan Présentation d AJAX Principe Etapes Prendre en compte la latence Support par les navigateurs Inconvénients Avantages Présentation

Plus en détail

Introduction aux technologies du Web. Mercredi 12 décembre 2007 Patrice Pillot

Introduction aux technologies du Web. Mercredi 12 décembre 2007 Patrice Pillot Introduction aux technologies du Web Mercredi 12 décembre 2007 Patrice Pillot http://www.toulibre.org Plan Définitions Les fondements du Web Problèmes et solutions Le Web tendance Définitions Le World

Plus en détail

Inf340 Systèmes d information. Premier site ce qu il ne faut pas faire

Inf340 Systèmes d information. Premier site ce qu il ne faut pas faire Inf340 Systèmes d information Premier site ce qu il ne faut pas faire Objectifs Objectif : Réaliser un premier site en utilisant une mauvaise approche de conception. Le site permet de gérer un carnet d

Plus en détail

INF04-06 Langages et structure du Web. Benoît Habert

INF04-06 Langages et structure du Web. Benoît Habert INF04-06 Langages et structure du Web Benoît Habert Séance 8 - début Rappels Les limites de l appel à un autre script AJAX Modèle/Vue/Contrôleur : un patron de conception MVC en action : revisiter l exemple

Plus en détail

INF4375 Paradigmes des échanges Internet Projet de session Automne Voici une carte représentant les dépendances entre les fonctionnalités :

INF4375 Paradigmes des échanges Internet Projet de session Automne Voici une carte représentant les dépendances entre les fonctionnalités : INF4375 Paradigmes des échanges Internet Projet de session Automne 2016 Projet Le projet consiste à récupérer un ensemble de données provenant de la ville de Montréal et d'offrir des services à partir

Plus en détail

Architectures n-tiers et applications Web Outils Java et applications Web Servlets État d un servlet Les JSP Accès aux BD avec servlets Conception

Architectures n-tiers et applications Web Outils Java et applications Web Servlets État d un servlet Les JSP Accès aux BD avec servlets Conception Plan 153 Architectures n-tiers et applications Web Outils Java et applications Web Servlets État d un servlet Les JSP Accès aux BD avec servlets Conception HTTP: protocole sans états 154 HTTP gère les

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

L open source dans les nouvelles architectures web. Christophe

L open source dans les nouvelles architectures web. Christophe L open source dans les nouvelles architectures web Christophe Villeneuve @hellosct1 Qui??? Christophe Villeneuve mozilla reps - firefox os - B2GOS - ausy - afup lemug.fr mysql mariadb drupal demoscene

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

Cours 4 Programmation web, orientée serveur

Cours 4 Programmation web, orientée serveur DUT MMI IUT de Marne-la-Vallée 01/03/2016 M2202 - Algorithmique Cours 4 Programmation web, orientée serveur Philippe Gambette Sources phpdebutant.net www.php.net (documentation du langage PHP) Préambule

Plus en détail

Jeudi 26 Avril BETANT Olivier, MORA Cédric IFIPS 4ème année. DEP. Informatique PROJET WEB BD XML RAPPORT FINAL

Jeudi 26 Avril BETANT Olivier, MORA Cédric IFIPS 4ème année. DEP. Informatique PROJET WEB BD XML RAPPORT FINAL Jeudi 26 Avril 2007 DEP. Informatique BETANT Olivier, MORA Cédric IFIPS 4ème année PROJET WEB BD XML RAPPORT FINAL SOMMAIRE : Introduction... 3 Cahier des charges... 3 Dévelopment de l application... 4

Plus en détail

AJAX. Asynchronous JavaScript - XML

AJAX. Asynchronous JavaScript - XML AJAX Asynchronous JavaScript - XML Rédacteur : Morel Alexandre Version : 1.2 Date : 08 novembre 2005 Tables des matières Introduction 3 L'objet XMLHttpRequest 3 Qu'est-ce qu'ajax? 3 Utilisation 4 Étape

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

App hybrides. Merci de vous installer par binôme de niveau différent

App hybrides. Merci de vous installer par binôme de niveau différent App hybrides Merci de vous installer par binôme de niveau différent Programme (1/2) Introduction: panorama du dev mobile Le web et le HTML Évaluation 1 (QCM) La mise en page avec CSS Les bases de Javascript

Plus en détail

EXAM JAVASCRIPT 6 FRAMEWORKS

EXAM JAVASCRIPT 6 FRAMEWORKS EXAM JAVASCRIPT 6 FRAMEWORKS MAUER Florent JQuery JQuery est une bibliothèque JavaScript permettant de faciliter l'écriture de scripts dans le code HTML. Sa devise est "jquery. Write Less, Do More" Pourquoi?

Plus en détail

Windows PowerShell Administration de postes clients Windows (2e édition)

Windows PowerShell Administration de postes clients Windows (2e édition) Présentation de Windows PowerShell 1. Introduction 15 2. Qu'est-ce que Windows PowerShell? 19 3. Et les scripts, dans tout ça? 20 4. La syntaxe de Windows PowerShell 21 4.1 Retrouver rapidement une cmdlet

Plus en détail

INF Paradigmes des échanges Internet. Communication réseau. Jacques Berger

INF Paradigmes des échanges Internet. Communication réseau. Jacques Berger INF4375 - Paradigmes des échanges Internet Communication réseau Jacques Berger Objectifs Comprendre le fonctionnement d'une communication réseau Prérequis Aucun Rappel : Le modèle OSI 7. Application 6.

Plus en détail

SOA et Services Web. 23 octobre SOA: Introduction

SOA et Services Web. 23 octobre SOA: Introduction SOA et Services Web 23 octobre 2011 1 SOA: Introduction 2 Définition service web Un "Service Web" est une application logicielle à laquelle on peut accéder à distance à partir de différents langages

Plus en détail

INSA - ASI TechnoWeb : AJAX 1/40. Technologie Web AJAX. Alexandre Pauchet. INSA Rouen - Département ASI. BO.B.RC.18,

INSA - ASI TechnoWeb : AJAX 1/40. Technologie Web AJAX. Alexandre Pauchet. INSA Rouen - Département ASI. BO.B.RC.18, INSA - ASI TechnoWeb : AJAX 1/40 Technologie Web AJAX Alexandre Pauchet INSA Rouen - Département ASI BO.B.RC.18, pauchet@insa-rouen.fr INSA - ASI TechnoWeb : AJAX 2/40 Plan 1 Introduction 2 Fonctionnement

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

Les fondamentaux du langage Perl 5 Apprentissage par la pratique (Nouvelle édition)

Les fondamentaux du langage Perl 5 Apprentissage par la pratique (Nouvelle édition) Démarrer avec Perl 1. Caractéristiques du langage Perl 13 1.1 Les domaines d'utilisation de Perl 15 1.2 Perl 5 16 1.3 Perl 6 16 2. Mise en œuvre de Perl 17 2.1 Unix/Linux 17 2.1.1 Installation de Perl

Plus en détail

Le langage HTML. Université KASDI Merbah Ouargla Département des mathématiques & Informatique.

Le langage HTML. Université KASDI Merbah Ouargla Département des mathématiques & Informatique. Université KASDI Merbah Ouargla Département des mathématiques & Informatique Le langage HTML BELOUAAR Houcine Belouar_hocine@yahoo.fr Les formulaires L'élément permet de créer des

Plus en détail

Programmation client / serveur

Programmation client / serveur Benjamin Canou - Christian Queinnec Cours 5 du 17/12/2012 Programmation côté client Rappels rapides sur JavaScript Manipulation du document et du style via DOM L'inévitable JavaScript La mode est aux applications

Plus en détail

Guide du programmeur. Version 2.01 Juin 2010

Guide du programmeur. Version 2.01 Juin 2010 Sogenactif Paiement Web PLUG-IN 6.15 Guide du programmeur Version 2.01 Juin 2010 1 Avertissements : Le fichier Version.txt précise l'environnement dans lequel l API a été compilée et testée. L'installation

Plus en détail

ENVIRONNEMENT CLIENT/SERVEUR

ENVIRONNEMENT CLIENT/SERVEUR ENVIRONNEMENT CLIENT/SERVEUR Cours 6 Rappels Java (suite) Appel de méthode à distance kn@lri.fr http://www.lri.fr/~kn Plan 1 Rappels sur les systèmes d'exploitations / Communication par mémoire partagée

Plus en détail

présente Bien utiliser son navigateur Internet

présente Bien utiliser son navigateur Internet présente Bien utiliser son navigateur Internet Tous droits réservés 11 mars 2008 Comm@ssoc Généralités sur les navigateurs Qu est ce qu un navigateur WEB? C est un logiciel qui permet d accéder à une des

Plus en détail

SUPPORT DE FORMATION WEBMAIL

SUPPORT DE FORMATION WEBMAIL SUPPORT DE FORMATION Département Département Technique & commerciale Service Service Projets & Grands Comptes Auteur Kaimoussi Abderrazzek - SECUSERVE Nom du document Formation Webmail Pronto! Objet du

Plus en détail

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

XML DOM. Taha Zerrouki

XML DOM. Taha Zerrouki XML DOM Taha Zerrouki Définition Le Document de référence Objet Modèle (DOM) est une norme de W3C. Il définit une norme pour l'accès aux documents comme HTML et XML. 2 Définition par W3C Le modèle objet

Plus en détail

TP architecture MVC. Partie 1 : Créer une application web dynamique avec Eclipse Java EE

TP architecture MVC. Partie 1 : Créer une application web dynamique avec Eclipse Java EE TP architecture MVC Cette suite de TP a été faite, les années précédentes en "faisant tout à la main" : l'installation de tomcat, les scripts de lancement et d'arrêt de tomcat, l'écriture dans un éditeur

Plus en détail

PHP et MySQL. Originaux. Auteurs et version. Prérequis. Modules

PHP et MySQL. Originaux. Auteurs et version. Prérequis. Modules PHP et MySQL PHP et MySQL act-php-mysql Code: act-php-mysql Originaux url: http://tecfa.unige.ch/guides/tie/html/act-php-mysql/act-php-mysql-fc.html url: http://tecfa.unige.ch/guides/tie/pdf/files/act-php-mysql-fc.pdf

Plus en détail

Développer. application

Développer. application Développer une application web Développer une application web Alain Cazes Ancien maître de conférences en informatique au Cnam Joëlle Delacroix Maître de conférences au Cnam et chef de département pour

Plus en détail

CCNA 1 v5.0 Chapitre 10 réponses examen 2016

CCNA 1 v5.0 Chapitre 10 réponses examen 2016 CCNA 1 v5.0 Chapitre 10 réponses examen 2016 1 Quels sont les trois couches du modèle OSI fournissent des services de réseau similaires à celles prévues par la couche du modèle TCP / IP de l'application?

Plus en détail

M Algorithmique et PHP

M Algorithmique et PHP M2202 - Algorithmique et PHP David Annebicque 2016 1 TD : Accès aux base de données 1.1 Introduction Une base de données permet de stocker des données de manière durable, contrairement à une session ou

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

Documentation technique Back-office

Documentation technique Back-office MEEVY Documentation technique Back-office Juillet 2010 MEEVY a pour but de fournir aux artistes des outils pour promouvoir leur musique sur internet et proposer à l auditeur une plateforme de musique en

Plus en détail

Exercices JavaScript

Exercices JavaScript Exercices Javascript - page 1 Exercices JavaScript Auteur : E.Thirion - 07/12/2015 Ce document est extrait du site http://cours.thirion.free.fr/cours/javascript Les exercices suivants sont s fichiers à

Plus en détail

Cet article décrit le connecteur php, son installation, son paramétrage et son utilisation.

Cet article décrit le connecteur php, son installation, son paramétrage et son utilisation. Cet article décrit le connecteur php, son installation, son paramétrage et son utilisation. Le connecteur php est une application php livrée avec un exemple qui permet de l'illustrer et mettre en oeuvre

Plus en détail

Projet DELIRE. Introduction à PHP

Projet DELIRE. Introduction à PHP Projet DELIRE Introduction à PHP Pages dynamiques page statique Nous sommes le 28/03/2007 Probleme : Afficher une page différente en fonction

Plus en détail

Introduction. Javascript. L événement onsubmit. Javascript et les formulaires. IFT1147 Programmation Serveur Web avec PHP

Introduction. Javascript. L événement onsubmit. Javascript et les formulaires. IFT1147 Programmation Serveur Web avec PHP IFT1147 Programmation Serveur Web avec PHP Au delà du HTML création dynamique de Javascript, d images et de fichiers PDF Introduction PHP ne permet pas seulement de générer du code HTML. On peut, entre

Plus en détail

Les comptes informatiques SWITCHdrive et AAI sont deux comptes différents. En voici les conséquences:

Les comptes informatiques SWITCHdrive et AAI sont deux comptes différents. En voici les conséquences: 1 / 14 Service Informatique et Multimédia SWITCHdrive 1. SWITCHdrive Est un service Cloud proposé par SWITCH qui vous permet de stocker, synchroniser et partager des fichiers. En particulier: Synchroniser

Plus en détail

BadPHP. Fiche explicative des Classes et des Fonctions de BadPHP. Equipe : Savelli Adrien Hugo Morales

BadPHP. Fiche explicative des Classes et des Fonctions de BadPHP. Equipe : Savelli Adrien Hugo Morales BadPHP Fiche explicative des Classes et des Fonctions de BadPHP Equipe : Savelli Adrien Hugo Morales SOMMAIRE 1 Classe $sql... 1 1.1 connect(string (1), string (2), string (3), string (4));... 1 1.2 request(variable,

Plus en détail

Formulaire HTML et PHP

Formulaire HTML et PHP Formulaire HTML et PHP Partie 1 Les langages du Web Vincent Bouvier vincent.bouvier@kware.fr HTML - Les formulaires Un formulaire permet à l'utilisateur d'envoyer des données au serveur Un formulaire commence

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

Xamarin Développez vos applications multiplateformes pour ios, Android et Windows

Xamarin Développez vos applications multiplateformes pour ios, Android et Windows Avant-propos 1. Pourquoi ce livre? 19 2. À qui s adresse cet ouvrage? 20 3. Remerciements 21 Introduction 1. Qu est-ce que la plateforme Xamarin? 23 1.1 L environnement.net sur ios et Android 23 1.2 Un

Plus en détail

Séance 3. Javascript/DHTML

Séance 3. Javascript/DHTML Séance 3 Javascript/DHTML Nils Schaefer (nils.schaefer@sn-i.fr) Langage Javascript Vrai langage de programmation Exécution côté client Apporter du dynamisme aux pages HTML Syntaxe générale similaire au

Plus en détail

UTILISATION CMS PERSO

UTILISATION CMS PERSO UTILISATION CMS PERSO La gestion du site se passe entièrement dans la partie Administration du site. Pour accéder à l administration du site, il faut, soit cliquer sur le lien admin situé dans le menu,

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

3I 023 Projet Java Serveur HTTP et Morpion Semaine du 20 février 2017

3I 023 Projet Java Serveur HTTP et Morpion Semaine du 20 février 2017 Serveur HTTP et Morpion Semaine du 20 février 2017 Introduction L objectif de ce mini-projet est de concevoir et de programmer une architecture client-serveur HTTP. Cette architecture est composée de deux

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

Gestion de versions, procédure de tests et de déploiement

Gestion de versions, procédure de tests et de déploiement Polarbase : Documentation technique Table des matières Avant-propos...1 Dernière révision :...1 Gestion de versions, procédure de tests et de déploiement...1 Composants logiciels...2 Base de données...2

Plus en détail

Sommaire. 1 Gestion simple d une vidéothèque Gestion d un album de photos Envoi de messages chiffrés... 43

Sommaire. 1 Gestion simple d une vidéothèque Gestion d un album de photos Envoi de messages chiffrés... 43 1 Gestion simple d une vidéothèque... 17 1.1. Configuration... 18 1.2. Classes et espaces de noms utilisés... 18 1.3. Accès aux données... 18 Création de la base de données... 18 Configuration des tables...

Plus en détail

Le langage PHP. Le langage PHP p.1/??

Le langage PHP. Le langage PHP p.1/?? Le langage PHP Le langage PHP p.1/?? Le langage PHP p.2/?? Sommaire Les principaux aspects du langage PHP généralités littéraux, variables et constantes tableaux associatifs et indicés boucles et tests

Plus en détail

Introduction aux technologies WEB. Pr. Hajar IGUER

Introduction aux technologies WEB. Pr. Hajar IGUER Introduction aux technologies WEB Pr. Hajar IGUER hajar.iguer@uic.ac.ma Fonctionnement du WEB 1. Le navigateur effectue une requête spécifiée à travers l URL 2. Le serveur retourne un flot de données 3.

Plus en détail

Module SSO Central Authentication Service Central Authentication Service

Module SSO Central Authentication Service Central Authentication Service Module SSO Central Authentication Service Central Authentication Service IUT Béziers, dépt. R&T 2017 http://www.borelly.net/ Christophe.BORELLY@iutbeziers.fr Généralités Un même utilisateur accède en général

Plus en détail

PORTAIL DE LA FORMATION PROFESSIONNELLE AU MAROC

PORTAIL DE LA FORMATION PROFESSIONNELLE AU MAROC PORTAIL DE LA FORMATION PROFESSIONNELLE AU MAROC Télécharger tous les modules de toutes les filières de l'ofppt sur le site dédié à la formation professionnelle au Maroc : www.marocetude.com Pour cela

Plus en détail