Introduction. AngularJS.

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

Download "Introduction. AngularJS. "

Transcription

1 Introduction Introduction Développement Web 2 Bertrand Estellon Aix-Marseille Université April 1, 2014 Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Introduction Introduction : simplifie l écriture des vues dynamiques d une application Web; est un outil écrit en JavaScript par Google; étend l expressivité de HTML; Exemple de page dynamique utilisant : <!doctype html> <html ng-app> <head><script src="angularminjs"></script></head> <input type="text" ng-model="name"> <h1>bonjour {{name!</h1> </html> Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Contrôleurs et Data Binding Contrôleurs Un deuxième exemple de page dynamique : <!doctype html> <html ng-app> <head><script src="angularminjs"></script></head> <p ng-init=" nom='bob' ">Bonjour {{nom!</p> </html> Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Data Binding : les vues sont automatiquement modifiées lors d un changement du modèle par un contrôleur Les contrôleurs sont attachés aux éléments du DOM et font évoluer le modèle en fonction des actions de l utilisateurs ou d événements <!doctype html> <html ng-app> <!-- --> <div ng-controller="myctrl"> <input type="text" ng-model="src"> <button ng-click="copy()">copier</button> <h1>{{dst</h1> </html> Bertrand Estellon (AMU) Développement Web 2 April 1, / 436

2 Contrôleurs et Data Binding Contrôleurs Scopes et RootScope Contrôleurs Data Binding : les vues sont automatiquement modifiées lors d un changement du modèle par un contrôleur Les contrôleurs sont attachés aux éléments du DOM et font évoluer le modèle en fonction des actions de l utilisateurs ou d événements La fonction qui permet de construire une instance du contrôleur : function MyCtrl($scope) { $scopecopy = function() { $scopedst = $scopesrc; La variable $scope référence un objet qui correspond à la partie du modèle attachée à l élément du DOM contrôle Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Scopes et RootScope Contrôleurs La variable $scopescope contient l intégralité du modèle alors que la variable $scope contient uniquement la partie du modèle attachée à l élément du DOM : <div ng-controller="myctrl"> <input type="text" ng-model="src"> <button ng-click="copy()">copier</button> <h1>{{dst</h1> function MyCtrl($scope, $rootscope) { $scopecopy = function() { $rootscopedst = $scopesrc; Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 ng-repeat Portée des scopes : <div ng-controller="myctrl"> {{ dst {{ dst <body ng-controller="listctrl"> <input ng-model="item"> <button ng-click="add()">add</button> <ul><li ng-repeat="e in items"> {{ e </li></ul> function MyCtrl($scope, $rootscope) { $rootscopedst = "rootscope"; $scopedst = "scope"; Chaque contrôleur peut donc avoir une partie du modèle comme contexte Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 function ListCtrl($scope) { $scopeitems = []; $scopeadd = function() { $scopeitemspush($scopeitem); Bertrand Estellon (AMU) Développement Web 2 April 1, / 436

3 ng-repeat visibilité <body ng-controller="listctrl"> <input ng-model="item"> <button ng-click="add()">add</button> <ul><li ng-repeat="e in items"> {{ e </li></ul> function ListCtrl($scope) { $scopeitems = []; $scopeadd = function() { $scopeitemspush($scopeitem); Il est possible de masquer ou d afficher certains éléments : <input type="checkbox" ng-model="checked"> <span ng-show="checked">coché</span> <span ng-hide="checked">non coché</span> <input type="text" ng-model="data"> <ul ng-switch on="data"> <li ng-switch-when="toto">data==toto</li> <li ng-switch-when="truc">data==truc</li> <li ng-switch-default>data!=toto and data!=truc</li> </ul> Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 style Il est possible de modifier la classe et le style des éléments : <body ng-init="style={color:'green'"> <button ng-click="style={color:'red'">rouge</button> <button ng-click="style={color:'black'">noir</button> <span ng-style="style">zadza</span> <pre>style={{style</pre> <body ng-init="cls='green'"> <button ng-click="cls='red'">rouge</button> <button ng-click="cls='black'">noir</button> <span ng-class="cls">zadza</span> Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 formulaire <form name="myform"> <input name="input" type="text" name="input" ng-model="text" ng-pattern="/^[a-z]{3,6$/" required> <button ng-disabled="!myform$valid" type="submit"> Envoyer </button> <span class="error" ng-show="myforminput$errorrequired"> Nécessaire </span> <span class="error" ng-show="myforminput$errorpattern"> 3 à 6 lettres miniscules </span> </form> Bertrand Estellon (AMU) Développement Web 2 April 1, / 436

4 événements les liens et les images <body ng-controller="myctrl"> <div ng-click="onevent('click')">click <div ng-mousedown="onevent('down')">down <div ng-mouseup="onevent('up')">up <div ng-mouseenter="onevent('enter')">enter <div ng-mouseleave="onevent('leave')">leave <div ng-mouseover="onevent('over')">over <input ng-model="data" ng-change="onevent('change')"> function MyCtrl($scope) { $scopeonevent = function(s) { consolelog(s); <body ng-controller="myctrl"> <div ng-repeat="item in items"> <a ng-href="{{itemimg"> <img ng-src="{{itemrimg"> </a> function MyCtrl($scope) { $scopeitems = [ {img : "ajpg", rimg : "rajpg", {img : "bjpg", rimg : "rbjpg" ]; Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 utilisation des filtres <body ng-controller="listctrl"> <input ng-model="item"> <button ng-click="add()">add</button> <input ng-model="query"> <ul><li ng-repeat="e in items filter:query"> {{ e </li></ul> function ListCtrl($scope) { $scopeitems = []; $scopeadd = function() { $scopeitemspush($scopeitem); Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Les modules Modules La façon de construire l application est spécifiée par des modules Dans les modules, on spécifie ce qui est partagé dans l application Un module peut dépendre d autres modules L application a un module principal Dans le code HTML : <!doctype html> <html ng-app="myapp"> <!-- --> </html> Côté JavaScript : var myapp = angularmodule('myapp', []); Bertrand Estellon (AMU) Développement Web 2 April 1, / 436

5 Modules Modules Les modules Les modules Un exemple avec la définition d un nouveau filtre : var myapp = angularmodule('myapp', []); myappfilter('bracket', function() { return function(text) { return '['+text+']'; ); Utilisation du filtre côté HTML : <!doctype html> <html ng-app="myapp"> <head><!-- --></head> {{ 'exemple' bracket <!-- [exemple] --> </html> Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Les modules Modules Trois sortes d éléments peuvent être définis dans un module : Un service (un objet partageable); Une directive (nouvel élément côté HTML); Un filtre (voir le transparent précédent) Il est recommandé de séparer les différents éléments : var myappservice = angularmodule('myappservice', []); var myappdirective = angularmodule('myappdirective', []); var myappfilter = angularmodule('myappfilter', []); var myapp = angularmodule('myapp', ['myappservice', 'myappdirective', 'myappfilter']); Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Il est possible d exécuter du code au lancement de l application : var myapp = angularmodule('myapp', []); myapprun(function($rootscope) { $rootscopemessage = "Mon message"; ); <!doctype html> <html ng-app="myapp"> <head><!-- --></head> {{ message <!-- devient "Mon message" --> </html> Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Un service est un objet utilisable par d autres objets de l application : var myappservice = angularmodule('myappservice', []); var myapp = angularmodule('myapp', ['myappservice']); myappservicefactory('messages', function() { callbacks : [], addmessage : function(msg) { for (var i = 0; i < thiscallbackslength; i++) thiscallbacks[i](msg);, addcallback : function(callback) { thiscallbackspush(callback); ); Bertrand Estellon (AMU) Développement Web 2 April 1, / 436

6 Code du contrôleur pour poster de nouveau message : function AddMsgCtrl($scope, messages /* injection */) { $scopeaddmessage = function() { messagesaddmessage($scopemsg); Code HTML associé à ce contrôleur : <div ng-controller="addmsgctrl"> <input type="text" ng-model="msg"> <button ng-click="addmessage()">add</button> Code d un contrôleur qui affiche le dernier message : function MsgViewer($scope, messages) { messagesaddcallback(function(msg) { $scopemsg = msg; ); Code HTML associé à ce contrôleur : <div ng-controller="msgviewer"> {{ msg Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Définition de Counter (un service qui compte des messages) : function Counter() { thiscount = 0; thiscallbacks = []; Counterprototypenotify = function(msg) { thiscount++; for (var i = 0; i < thiscallbackslength; i++) thiscallbacks[i](thiscount); CounterprototypeaddCallback = function(callback) { thiscallbackspush(callback); Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Ajout d une fabrique pour créer le service avec l aide d un autre service : myappservicefactory('counter', function(messages) { var counter = new Counter(); messagesaddcallback(function(msg) { counternotify(msg); ); return counter; ); Le service messages est injecté dans la fabrique du service counter Bertrand Estellon (AMU) Développement Web 2 April 1, / 436

7 Utilisation du service counter par un contrôleur : function CountViewer($scope, counter) { counteraddcallback(function(count) { $scopecount = count; ); Code HTML qui utilise ce contrôleur : <div ng-controller="countviewer"> {{ count Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 et événements extérieurs à : Les modifications du modèle engendrent une modification du DOM uniquement à la fin d un évenements Donc, il n y aura pas de modification du DOM à la fin d un traitement associé à un événement extérieur à La méthode $apply(func) permet d exécuter une fonction depuis l extérieur de Pseudo-code de la méthode $apply() : function $apply(expr) { try { return $eval(expr); catch (e) { $exceptionhandler(e); finally { $root$digest(); Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 appfactory('socket', function ($rootscope) { var socket = ioconnect('ws://localhost:8080'); on: function (eventname, callback) { socketon(eventname, function () { var args = arguments; $rootscope$apply(function () { callbackapply(socket, args); ); );, /* méthode emit du transparent suivant */ ; ); appfactory('socket', function ($rootscope) { var socket = ioconnect('ws://localhost:8080'); /* méthode on du transparent précédent */ emit: function (eventname, data, callback) { socketemit(eventname, data, function () { var args = arguments; $rootscope$apply(function () { if (callback) { callbackapply(socket, args); ); ) ; ); Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Bertrand Estellon (AMU) Développement Web 2 April 1, / 436

8 Injection Injection appfactory('socket', function ($rootscope) { var socket = ioconnect('ws://localhost:8080'); /* méthode on du transparent précédent */ emit: function (eventname, data, callback) { socketemit(eventname, data, function () { var args = arguments; $rootscope$apply(function () { if (callback) { callbackapply(socket, args); ); ) ; ); Par inférence sur le nom des paramètres : function MyController($scope, counter /* injection */) { /* */ Cette méthode d injection ne résiste pas à la minification/obfuscation du code JavaScript Par conséquent, il est préférable de faire : function MyController(scope, counter) { /* */ MyController$inject = ['$scope', 'counter']; Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Injection Injection Pour les fabriques, il est possible de faire : function counterfactory(messages) { /* */ counterfactory$inject = ['messages']; myappservicefactory('counter', counterfactory); ou plus simplement avec la notation en ligne : myappservicefactory('counter', ['messages', function(messages) { /* */ ]); Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Objectif : afficher des vues en fonction de l URL présente dans la barre d adresse du navigateur de façon à avoir un déplacement agréable dans le site Web (avec gestion de l historique et des paramètres) Solution : Avec HTML5, il est possible d interagir avec la barre d adresse du navigateur (URL, historique, etc) Le service $location de permet d avoir accès à ces fonctionnalités Le service $route de observe l URL (grâce au service $location) et modifie le contenu de la page en fonction de l URL Les routes sont définies via l API $routeprovider Les vues sont insérées côté HTML à l aide de ng-view Les paramètres sont accessibles via le service $routeparams Bertrand Estellon (AMU) Développement Web 2 April 1, / 436

9 Soit le tableau suivant : var users = [ { id : 0, name : "Lucie", age : 21, { id : 1, name : "Bob", age : 22, { id : 2, name : "Christine", age : 30, { id : 3, name : "Arthur", age : 24, ]; #/users : Lucie Bob Christine Arthur #/user/1 : Bob age : 22 #/user/2 : Christine age : 30 Pour configurer les routes, on configure le service $routeprovider : angularmodule('myapp', []) config(function($routeprovider) { $routeproviderwhen('/users', { templateurl: 'usershtml', controller: UserListCtrl ) when('/user/:id', { templateurl: 'userhtml', controller: UserCtrl ) otherwise({redirectto: '/users'); ); Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Le fichier usershtml : <ul> <li ng-repeat="user in users"> <a href="#/user/{{userid">{{username</a> </li> </ul> Le contrôleur UserListCtrl : function UserListCtrl($scope) { $scopeusers = users; Le fichier userlisthtml : <b>{{username</b> <ul> <li>age : {{userage</li> </ul> <a href="#/users">liste des utilisateurs</a> Le contrôleur UserCtrl : function UserCtrl($scope, $routeparams) { /* TODO : tester la valeur du paramètre */ $scopeuser = users[$routeparamsid]; Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Bertrand Estellon (AMU) Développement Web 2 April 1, / 436

10 Les directives permettent de créer de nouveaux éléments HTML : angularmodule('myapp', []) directive('user', function(){ restrict: 'E', replace: true, scope: { src : '=src', /* ou src : '=' */ template: '<span>{{srcname : {{srcage</span>' ); Ensuite, il est possible d utiliser le nouveau composant dans le HTML : <body ng-init="bob = {name:'bob', age:22"> <user src="bob" /> Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Il est possible d isoler le template dans un autre fichier : var myapp = angularmodule('myapp', []) myappdirective('user', function(){ restrict: 'E', replace: true, scope: { src : '=src', template: 'userhtml', ); Contenu du fichier userhtml : <span>{{srcname : {{srcage</span> Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Il est possible d associer un contrôleur à l élément : myappdirective('userform', function(){ restrict: 'E', replace: true, scope: { userlist : '=', /* attr user-list */ templateurl: 'userformhtml', controller : 'UserFormCtrl' ); Le code du contrôleur UserFormCtrl : function UserFormCtrl($scope) { $scopeadd = function(user) { $scopeuserlistpush(user); Le contenu du fichier userformhtml : <div> <input type="text" ng-model="username" /> <input type="text" ng-model="userage" /> <button ng-click="add(user);">ajouter</button> Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Bertrand Estellon (AMU) Développement Web 2 April 1, / 436

11 Utilisation des balises précédentes : <body ng-controller="mainctrl"> <ul> <li ng-repeat="user in users"> <user src="user" /> </li> </ul> <userform user-list="users" /> Code du contrôleur GlobalCtrl : function MainCtrl($scope) { $scopeusers = [{ name : "Lucie", age : 21, /*$*/]; Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Supposons que la directive suivante soit définie : myappdirective('message', function(){ restrict: 'E', replace: true, scope: { nickname : '=', templateurl: 'messagehtml', ); Nous souhaitons utiliser la directive de la façon suivante : <message nickname="bob">bonjour</message> De façon à obtenir : <b>bob</b> : Bonjour Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Réalisation d une grille de morpion : Pour ce faire, il suffit de définir le template de la façon suivante : <span> <b>{{nickname</b> : <span ng-transclude></span> </span> Le mot-clé ng-transclude permet de copier le contenu présent dans la balise dans la balise désignée à l aide du mot-clé Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 <body ng-controller="mainctrl"> <grid grid="grid" on-click="play"></grid> Avec le style suivant : cell { display :inline-block; height:30px; width:30px; border: 1px solid gray; red { background-color:red; blue { background-color:blue; while { background-color:white; Bertrand Estellon (AMU) Développement Web 2 April 1, / 436

12 Définition de la directive : var myapp = angularmodule('myapp', []); myappdirective('grid', function(){ restrict: 'E', replace: true, scope: { grid : '=', onclick : '=', templateurl: 'gridhtml', ); Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Le template gridhtml : <div> <div ng-repeat="l in [0,1,2]"> <div class="cell" ng-repeat="c in [0,1,2]" ng-class="grid[l][c]" ng-click="onclick(l,c)"> Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Définition du contrôleur : function MainCtrl($scope) { $scopegrid = []; for (var i = 0; i < 3; i++) { $scopegrid[i] = []; for (var j = 0; j < 3; j++) $scopegrid[i][j] = 'while'; $scopeplay = function(x,y) { $scopegrid[x][y]='red'; Rappel de l utilisation du contrôleur : <body ng-controller="mainctrl"> <grid grid="grid" on-click="play"></grid> Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Si nous avons le code HTML suivant : <body ng-controller="mainctrl"> <grid grid="grid" on-click="playred"></grid><br><br> <grid grid="grid" on-click="playblue"></grid> Que se passe-t-il avec le contrôleur suivant? function MainCtrl($scope) { /* TODO : initilisation de la grille */ $scopeplayred = function(x,y) { $scopegrid[x][y]='red'; $scopeplayblue = function(x,y) { $scopegrid[x][y]='blue'; Bertrand Estellon (AMU) Développement Web 2 April 1, / 436

13 Nous souhaitons utiliser le code HTML suivant : <body ng-controller="mainctrl"> <grid grid="grid" on-click="grid[x][y]='red'"></grid> <grid grid="grid" on-click="grid[x][y]='blue'"></grid> Avec le contrôleur suivant : function MainCtrl($scope) { $scopegrid = []; for (var i = 0; i < 3; i++) { $scopegrid[i] = []; for (var j=0;j<3;j++) $scopegrid[i][j] = 'while'; Modification de la directive : var myapp = angularmodule('myapp', []); myappdirective('grid', function(){ restrict: 'E', replace: true, scope: { grid : '=', onclick : '&', templateurl: 'gridhtml', ); Pourquoi la directive donnée précédemment ne fonctionne plus? Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Modification du template gridhtml : <div> <div ng-repeat="l in [0,1,2]"> <div class="cell" ng-repeat="c in [0,1,2]" ng-class="grid[l][c]" ng-click="onclick({x:l, y:c)"> Rappel de l utilisation de la directive : <body ng-controller="mainctrl"> <grid grid="grid" on-click="grid[x][y]='red'"></grid> <grid grid="grid" on-click="grid[x][y]='blue'"></grid> Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Les différentes façons d insérer une directive : E Element name: <my-directive></my-directive> A Attribute: <div my-directive="exp"> C Class: <div class="my-directive: exp;"> M Comment: <!-- directive: my-directive exp --> Modification de la directive : var myapp = angularmodule('myapp', []); myappdirective('grid', function(){ restrict: 'CA', /* */ ); Utilisation : <div class="grid: grid" on-click="grid[x][y]='red'"> <div grid="grid" on-click="grid[x][y]='blue'"> Bertrand Estellon (AMU) Développement Web 2 April 1, / 436

Modèle-Vue-Contrôleur. Développement Web 2. Projet 1 Sondages. Organisation générale

Modèle-Vue-Contrôleur. Développement Web 2. Projet 1 Sondages. Organisation générale PHP Modèle-Vue-Contrôleur Introduction Modèle-Vue-Contrôleur Développement Web 2 Bertrand Estellon Aix-Marseille Université April 1, 2014 Le Modèle-Vue-Contrôleur (MVC) est un méthode de conception utilisée

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

AngularJS Développez aujourd'hui les applications web de demain

AngularJS Développez aujourd'hui les applications web de demain Avant-propos 1. Pourquoi ce livre? 11 2. À qui s'adresse cet ouvrage? 12 3. Structure de l'ouvrage 12 4. Remerciements 13 Introduction à AngularJS 1. Introduction 15 2. Single Page Application 16 3. AngularJS

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

https://angularjs.org/ Gilles Landais -AngularJS 1

https://angularjs.org/ Gilles Landais -AngularJS 1 https://angularjs.org/ 1 Présentation Le Framework AngularJS https://angularjs.org/ Framework javascript depuis 2009 Aujourd'hui (wikipedia) le framework est utilisé dans >8,400/1,000,000 sites web Open-source

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

PHP 5.4 Développez un site web dynamique et interactif

PHP 5.4 Développez un site web dynamique et interactif Editions ENI PHP 5.4 Développez un site web dynamique et interactif Collection Ressources Informatiques Extrait 183 Chapitre 7 Gérer les formulaires 1. Vue d'ensemble Gérer les formulaires 1.1 Petit rappel

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

Introduction Web. 1ère année, cours - 5/5. Marcel Bosc 2011-2012

Introduction Web. 1ère année, cours - 5/5. Marcel Bosc 2011-2012 Introduction Web 1ère année, cours - 5/5 Marcel Bosc 2011-2012 Département informatique IUT de Villetaneuse Université Paris-13 table des matières Types en PHP Classes et objets Organisation code PHP CMS

Plus en détail

Éric Sarrion. JQuery. & JQuery UI. Groupe Eyrolles, 2011, ISBN : 978-2-212-12892-5

Éric Sarrion. JQuery. & JQuery UI. Groupe Eyrolles, 2011, ISBN : 978-2-212-12892-5 Éric Sarrion JQuery & JQuery UI Groupe Eyrolles, 2011, ISBN : 978-2-212-12892-5 11 Onglets Les pages HTML comportant des onglets (tabs) sont devenues courantes dans les sites web actuels. Elles permettent

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 Editions ENI PHP 5.4 Développez un site web dynamique et interactif Collection Ressources Informatiques Extrait 183 Chapitre 7 Gérer les formulaires 1. Vue d'ensemble Gérer les formulaires 1.1 Petit rappel

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

Référence du document :

Référence du document : Référence du document : Version du 11/03/2011 18/10/2012 Modifiée par JTG JTG Commentaires Création du document Ajout du paramètre idcategory Table des matières Présentation... 2 Méthodes d intégration...

Plus en détail

Ajouter les miniatures dans le re sultat de recherche pour SharePoint Foundation 2013

Ajouter les miniatures dans le re sultat de recherche pour SharePoint Foundation 2013 Ajouter les miniatures dans le re sultat de recherche pour SharePoint Foundation 2013 Après avoir installé SharePoint Foundation 2013, puis configuré le moteur de recherche, voyons comment personnaliser

Plus en détail

Plan du travail. 2014/2015 Cours TIC - 1ère année MI 86

Plan du travail. 2014/2015 Cours TIC - 1ère année MI 86 Plan du travail Chapitre 1: Internet et le Web Chapitre 2: Principes d Internet Chapitre 3 : Principaux services d Internet Chapitre 4 : Introduction au langage HTML 2014/2015 Cours TIC - 1ère année MI

Plus en détail

Document Object Model (DOM)

Document Object Model (DOM) Document Object Model (DOM) Jean-Claude Charr Maître de conférences IUT de Belfort Montbéliard Université de Franche Comté Description générale Définit un standard pour accéder aux documents structurés

Plus en détail

1. INSTALLATION... 2 2. CREATION D UN PROJET TYPESCRIPT... 3 3. ANGULAR AVEC TYPESCRIPT... 5. «Main»... 5 «Sous modules»... 5

1. INSTALLATION... 2 2. CREATION D UN PROJET TYPESCRIPT... 3 3. ANGULAR AVEC TYPESCRIPT... 5. «Main»... 5 «Sous modules»... 5 1 TypeScript 1. INSTALLATION... 2 2. CREATION D UN PROJET TYPESCRIPT... 3 A. AVEC VISUAL STUDIO... 3 B. AVEC VISUAL STUDIO CODE... 3 C. CREATION D UN SERVEUR AVEC «HTTP-SERVER»... 4 3. ANGULAR AVEC TYPESCRIPT...

Plus en détail

Internet. jquery jquery Mobile Partie 2

Internet. jquery jquery Mobile Partie 2 Internet jquery jquery Mobile Partie 2 Olivier Pons / 2013 Objectif Jquery / jquery Mobile Sommaire 1. Fondamentaux DOM 2. jquery 3. jquery Mobile 2 / 32 1. Fondamentaux DOM - Définition Le Document Object

Plus en détail

Arbres Mathématiques Informatique et Navigateurs Internet

Arbres Mathématiques Informatique et Navigateurs Internet Arbres Mathématiques Informatique et Navigateurs Internet Jacques Duma http://math.et.info.free.fr/ http://ateliermathematique.free.fr/ Arbres Expressions Mathématiques Structure arborescente de l expression

Plus en détail

Table des matières. JavaScript. Exemples. À quoi ça sert? À quoi ça sert? Présentation. Exemple 1. 1ère partie. Js partout!

Table des matières. JavaScript. Exemples. À quoi ça sert? À quoi ça sert? Présentation. Exemple 1. 1ère partie. Js partout! JavaScript M4103C - Programmation Web client riche Table des matières À quoi ça sert? 2ème année - S4, cours - 1/5 2014-2015 Présentation Exemple 1 Marcel Bosc Exemple 2 Département informatique 1ère partie

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

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

Le Html5 comporte de façon native de nombreuses interfaces de programmation (Application Programming Interface ou API). Citons :

Le Html5 comporte de façon native de nombreuses interfaces de programmation (Application Programming Interface ou API). Citons : Préambule Le Html5 comporte de façon native de nombreuses interfaces de programmation (Application Programming Interface ou API). Citons : La géolocalisation, qui permet de localiser l utilisateur par

Plus en détail

OP4. BD & Web. Résumé de cours. Partie II : HTML 4.0

OP4. BD & Web. Résumé de cours. Partie II : HTML 4.0 Univ.Montpellier II 2005 M. Hascoët OP4 BD & Web Résumé de cours Partie II : HTML 4.0 M. Hascoët mountaz@lirmm.fr Université Montpellier II Place Eugène Bataillon 34095 Montpellier Cedex 05 2/5 1. Introduction

Plus en détail

1. Manipulation des formulaires avec PHP. 2. Transmission d'arguments entre pages : méthodes GET et POST. 3. Manipulation du JavaScript avec le PHP.

1. Manipulation des formulaires avec PHP. 2. Transmission d'arguments entre pages : méthodes GET et POST. 3. Manipulation du JavaScript avec le PHP. TP5: LES FORMULAIRES OBJECTIFS : 1. Manipulation des formulaires avec PHP. 2. Transmission d'arguments entre pages : méthodes GET et POST. 3. Manipulation du JavaScript avec le PHP. PARTIE 1: Formulaire

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

FORMATION CONTINUE IGSO GLOBES VIRTUELS MÉCANISMES ET APPLICATIONS MONTAGE D UNE INTERFACE SUR LA BASE DES API S GOOGLE EARTH ET GOOGLE MAPS

FORMATION CONTINUE IGSO GLOBES VIRTUELS MÉCANISMES ET APPLICATIONS MONTAGE D UNE INTERFACE SUR LA BASE DES API S GOOGLE EARTH ET GOOGLE MAPS FORMATION CONTINUE IGSO GLOBES VIRTUELS MÉCANISMES ET APPLICATIONS MONTAGE D UNE INTERFACE SUR LA BASE DES API S GOOGLE EARTH ET GOOGLE MAPS CODE COMPLET ET COMMENTÉ DE L INTERFACE TABLE DES MATIÈRES 1.

Plus en détail

Séances 4a/4b Technologies du Web

Séances 4a/4b Technologies du Web Formations en Informatique de Lille 2012/2013 Séances 4a/4b Technologies du Web février 2013 Javascript Exercice 1 : Préalable : mise en place des outils Pour ce premier exercice, nous allons utiliser

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

Tutoriel pour l introduction à l animation en HTML5 et JavaScript

Tutoriel pour l introduction à l animation en HTML5 et JavaScript Tutoriel pour l introduction à l animation en HTML5 et JavaScript Frédéric Guégan Olivier Fauvel-Jaeger Giacomo Rombaut Table des matières 1. Introduction... 2 2. Création de l environnement... 2 3. Création

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

Introduction à la conception de sites web

Introduction à la conception de sites web Introduction à la conception de sites web Yannick Prié UFR Informatique Université Claude Bernard Lyon 1 9-16 janvier 2006 1- Les grands principes du web (1) Client / serveur réseau programmes communicants

Plus en détail

Mohammed REZGUI m.rezgui06@gmail.com. Basé sur le cours de Guillaume Perez

Mohammed REZGUI m.rezgui06@gmail.com. Basé sur le cours de Guillaume Perez Mohammed REZGUI m.rezgui06@gmail.com Basé sur le cours de Guillaume Perez Contenu, Organisation Objectif principal: Base pour la création d un site Notions de client-serveur Notions de programmations Option

Plus en détail

Projet Covoiturage TP 1

Projet Covoiturage TP 1 Projet Covoiturage TP 1 Description du thème Ce TP est le premier d une série mettant en œuvre le développement mobile en utilisant la bibliothèque jquery Mobile. Propriétés Description Intitulé long Formation

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 1 Premiers pas avec jquery : sélecteurs et modifieurs

Cours 1 Premiers pas avec jquery : sélecteurs et modifieurs Licence STIC IUT de Marne-la-Vallée 12/03/2015 Cours de jquery Cours 1 Premiers pas avec jquery : sélecteurs et modifieurs Philippe Gambette Organisation pratique Contact - Courriel : philippe.gambette@gmail.com

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

Bootstrap 3 INTRODUCTION. À l origine, projet interne lancé au sein de l entreprise Twitter

Bootstrap 3 INTRODUCTION. À l origine, projet interne lancé au sein de l entreprise Twitter INTRODUCTION À l origine, projet interne lancé au sein de l entreprise Twitter Août 2011 Bootstrap V1, Janvier 2012 Bootstrap V2, Août 2013 Bootstrap V3 Bootstrap est un frameworks HTML/CSS Bibliothèque

Plus en détail

Sécurite Web. Xavier Tannier xavier.tannier@limsi.fr. Yann Jacob yann.jacob@lip6.fr

Sécurite Web. Xavier Tannier xavier.tannier@limsi.fr. Yann Jacob yann.jacob@lip6.fr Sécurite Web Xavier Tannier xavier.tannier@limsi.fr Yann Jacob yann.jacob@lip6.fr Généralités 80 % des sites contiennent au moins une faille de sécurité 24 familles de failles différentes : on ne présente

Plus en détail

Module Com231A - Web et Bases de Données Notion 5 : Formulaires et utilisation des Bases de Données avec PHP

Module Com231A - Web et Bases de Données Notion 5 : Formulaires et utilisation des Bases de Données avec PHP Module Com231A - Web et Bases de Données Notion 5 : Formulaires et utilisation des Bases de Données avec PHP Au cours de ce TP, vous allez voir comment PHP permet aux utilisateurs, une interaction avec

Plus en détail

MVC / Les Tags JSP et JSTL

MVC / Les Tags JSP et JSTL MVC / Les Tags JSP et JSTL A.-E. Ben Salem LRDE and LIP6 17 Octobre 2011 1 / 18 Plan 1 Architecture MVC 2 Rappel JSP 3 JSTL (JSP Standard Tag Library) 4 Tags JSP pour gérer les Beans 5 Tags JSP d action

Plus en détail

Tp2 Emacs Développement Web

Tp2 Emacs Développement Web Tp2 Emacs Développement Web Les indications ci-dessous donnent les grandes lignes du développement. 1/ Evenement Ajax Jquery: Le code javascript jquery suivant permet d afficher un message dans un span

Plus en détail

Formation Angular JS

Formation Angular JS Formation Angular JS DURÉE DE LA F ORMATION : 3 JOURS DATE : 10 AU 12 JUIN 2014 P RIX : 1350 HT P U BLIC : C E T T E F O R MAT I O N E ST D E ST I N É E A U X C H E F S D E P R O J E T W E B, A R C H I

Plus en détail

Initiation aux techniques du Web. Cours L2 sciences cognitives séance 2 Charif HAYDAR: alchiekc@loria.fr

Initiation aux techniques du Web. Cours L2 sciences cognitives séance 2 Charif HAYDAR: alchiekc@loria.fr Initiation aux techniques du Web Cours L2 sciences cognitives séance 2 Charif HAYDAR: alchiekc@loria.fr Introduction Tableaux La balise (DIV) Polices en HTML Body (corps) et Head (en-tête) attributs Forms(formulaires):

Plus en détail

420-PK9-SL Programmation WEB JavaScript DOM

420-PK9-SL Programmation WEB JavaScript DOM 420-PK9-SL Programmation WEB JavaScript DOM Introduction Le lien entre JavaScript et le HTML/CSS est une hiérarchie d instances d objets appelé DOM (Document Object Model). À chaque balise HTML correspond

Plus en détail

Programmation Orientée Objet Java

Programmation Orientée Objet Java Programmation Orientée Objet Java Bertrand Estellon Département Informatique et Interactions Aix-Marseille Université 29 octobre 2015 Bertrand Estellon (DII AMU) Programmation Orientée Objet Java 29 octobre

Plus en détail

Web Components. Laurent Jouanneau Novembre 2013 - FranceJS. Innophi

Web Components. Laurent Jouanneau Novembre 2013 - FranceJS. Innophi Web Components Laurent Jouanneau Novembre 2013 - FranceJS Innophi CasperJS http://ljouanneau.com @ljouanneau http://innophi.com openweb.eu.org jelix.org slimerjs.org casperjs.org Qu'est ce qu'un composant

Plus en détail

Les tableaux. Programmation Orientée Objet Java. Références et Garbage Collector. Les tableaux

Les tableaux. Programmation Orientée Objet Java. Références et Garbage Collector. Les tableaux Les tableaux Déclaration d une variable de type référence vers un tableau : Programmation Orientée Objet Bertrand Estellon Département Informatique et Interactions Aix-Marseille Université 29 octobre 2015

Plus en détail

Les API JavaScript du HTML5 Intégrez la puissance du HTML5 dans vos applications Web

Les API JavaScript du HTML5 Intégrez la puissance du HTML5 dans vos applications Web 52 Les API JavaScript du HTML5 Intégrez la puissance du HTML5 dans vos applications Web D'où proviennent ces données qui permettent de vous localiser? Pour les smartphones, deux procédés peuvent être utilisés

Plus en détail

Classe ClInfoCGI. Fonctions membres principales. Gestion des erreurs

Classe ClInfoCGI. Fonctions membres principales. Gestion des erreurs Utilisation des classes de PourCGI par Michel Michaud, version 2002-11-23 Les fichiers PourCGI.h et PourCGI.cpp rendent disponibles deux classes et une fonction libre qui permettent de faire facilement

Plus en détail

Manipulation de formulaire

Manipulation de formulaire 1 Manipulation de formulaire points abordés outils (et balises) de création de formulaire, javascript, validation de formulaire en php site de départ nous nous baserons sur cette version pour l'exercice

Plus en détail

Module 133 Développer des application Web

Module 133 Développer des application Web Module 133 Développer des application Web Validation des formulaires Lab #5 et #6 Version 0.1 EPAI / Frédéric Free Powerpoint Mauron Templates Page 1 Introduction Les formulaires HTML sont omnis présents

Plus en détail

Serveur d'application Client HTML/JS. Apache Thrift Bootcamp

Serveur d'application Client HTML/JS. Apache Thrift Bootcamp Serveur d'application Client HTML/JS Apache Thrift Bootcamp Pré-requis La liste ci-dessous de logiciels doit être installée et opérationnelle sur la machine des participants : Compilateur thrift http://thrift.apache.org/

Plus en détail

Formation PHP débutant

Formation PHP débutant Formation PHP débutant Table des matières 1 Le principe de PHP 3 1.1 Langage côté serveur.................................. 3 1.2 Pour travailler..................................... 3 1.3 Langage de pré-processing...............................

Plus en détail

L UTILISATION DU HTML POUR L ENVOI DE VOS COURRIELS

L UTILISATION DU HTML POUR L ENVOI DE VOS COURRIELS L UTILISATION DU HTML POUR L ENVOI DE VOS COURRIELS Courrielleur privilégie l usage des courriels HTML pour les envois marketing. En effet, le HTML permet d organiser graphiquement l information de manière

Plus en détail

Dom, XML, Lecture de fichiers

Dom, XML, Lecture de fichiers Projet de développement web : Développement côté client Chapitre 4 Dom, XML, Lecture de fichiers Page 1 / 11 Table des matières Table des matières Introduction DOM : Document Object Model Structure habituelle

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

Symfony 2. 1.Définition de symfony 2. 2.Installation. 3.Structure. 4.Symfony et les commandes

Symfony 2. 1.Définition de symfony 2. 2.Installation. 3.Structure. 4.Symfony et les commandes Symfony 2 Sommaire : 1.Définition de symfony 2 2.Installation 3.Structure 4.Symfony et les commandes 5.Le fonctionnement : le routeur (les url), les bundles, twig(templates) 6.L architecture de symfony2

Plus en détail

Présentation du Framework BootstrapTwitter

Présentation du Framework BootstrapTwitter COUARD Kévin HELVIG-LARBRET Blandine Présentation du Framework BootstrapTwitter IUT Nice-Sophia LP-SIL IDSE Octobre 2012 Sommaire I. INTRODUCTION... 3 Définition d'un framework... 3 A propos de BootstrapTwitter...

Plus en détail

Bases de données et Sites Web. Li345

Bases de données et Sites Web. Li345 Bases de données et Sites Web. Li345 Remerciements à: Stéphane Gançarski et Philippe Rigaux. Ces transparents sont fortement inspirés du très bon livre : Pratique de MySQL et PHP, troisième édition Philippe

Plus en détail

<link rel = stylesheet  type = text / css  href = monstyle. css  /> Programmation Web AGRAL-3 et MTX-3, 2012-13 SÃl ance TP N o 5 Mars 2013 Objectifs Langage CSS Interactions HTML/CSS Manipulation [Où mettre ses fichiers? ] Pour ce TP vous allez mettre votre fichier HTML

Plus en détail

Applet, Servlet et JSP : des pages Web en action. Philippe Mabilleau ing.

Applet, Servlet et JSP : des pages Web en action. Philippe Mabilleau ing. Carrefour de l information Applet, Servlet et JSP : des pages Web en action Philippe Mabilleau ing. 5 novembre 2002 Des pages Web en action Le Web Des pages Web interactives Applet : de l action du coté

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

http://api.allocine.fr/rest/v3/search?partner=yw5kcm9pzc12m3m&q=avatar http://api.allocine.fr/rest/v3/movie?code=61282&partner=yw5kcm9pzc12m3m

http://api.allocine.fr/rest/v3/search?partner=yw5kcm9pzc12m3m&q=avatar http://api.allocine.fr/rest/v3/movie?code=61282&partner=yw5kcm9pzc12m3m SERVICES WEB Nicolas Singer L API ALLOCINE Allociné - www.allocine.com - est un site web donnant accès à une base de données de films et de séries télévisées. Cet accès est aussi possible par des services

Plus en détail

Repérage dans le support de cours. D3.js ~ Data Driven Document. Notes. Notes

Repérage dans le support de cours. D3.js ~ Data Driven Document. Notes. Notes Visualisation interactive de données sur le web Présentation Généralités Repérage dans le support de cours Sur les slides projetés, le numéro de page entre parenthèse correspond à celui de votre support

Plus en détail

HTML. Notions générales

HTML. Notions générales 1 HTML Le langage HTML est le langage de base permettant de construire des pages web, que celles-ci soient destinées à être affichées sur un iphone/android ou non. Dans notre cas, HTML sera associé à CSS

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

Projets. Conception de Sites Web dynamiques. Programme. Projets. Présentation d'un sujet du web 06/03/2010. Cours 7.

Projets. Conception de Sites Web dynamiques. Programme. Projets. Présentation d'un sujet du web 06/03/2010. Cours 7. Projets Conception de Sites Web dynamiques Cours 7 Patrick Reuter 1. Site de rencontre (utilisateurs, rechercher un correspondant) 2. Messagerie privée (éventuellement à combiner avec 1.) 3. Gestion d

Plus en détail

Programmation Web IMAC 2015-2016. TD 8 : Formulaires. 2 décembre 2015

Programmation Web IMAC 2015-2016. TD 8 : Formulaires. 2 décembre 2015 Programmation Web IMAC 2015-2016 TD 8 : Formulaires 2 décembre 2015 Objectif: Dans ce TD, nous allons introduire les formulaires en HTML. Pour pouvoir les utiliser on abordera aussi les plug-ins jquery

Plus en détail

Initiation à la réalisation de site Web pour mobiles

Initiation à la réalisation de site Web pour mobiles TP 5 Initiation à la réalisation de site Web pour mobiles Introduction et objectifs du TP Ce TP a pour ambition de vous faire réaliser une version mobile du site du département informatique de l IUT de

Plus en détail

Documentation Utilisateur SEO EXPERT

Documentation Utilisateur SEO EXPERT Documentation Utilisateur SEO EXPERT SEO EXPERT est un module très complet qui vous aide à optimiser rapidement le référencement naturel de votre boutique sur les principaux moteurs de recherche mais aussi

Plus en détail

Astuces Liens. Maîtrisez vos liens et leur apparence.

Astuces Liens. Maîtrisez vos liens et leur apparence. Astuces Liens Maîtrisez vos liens et leur apparence. Au sommaire de cet article : Un lien qui envoie un mail à plusieurs destinataires La couleur des liens dans une page Un lien sur un point précis d'une

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

Mac OS X Dashboard. Jean-Baptiste.Yunes@liafa.jussieu.fr http://www.liafa.jussieu.fr/~yunes/macosx/

Mac OS X Dashboard. Jean-Baptiste.Yunes@liafa.jussieu.fr http://www.liafa.jussieu.fr/~yunes/macosx/ Mac OS X Dashboard Jean-Baptiste.Yunes@liafa.jussieu.fr http://www.liafa.jussieu.fr/~yunes/macosx/ Dashboard un ensemble d outils toujours disponibles [F12] trois types d outils : accessoires (très autonomes)

Plus en détail

Devenez un ninja avec AngularJS - extrait gratuit. Ninja Squad

Devenez un ninja avec AngularJS - extrait gratuit. Ninja Squad Devenez un ninja avec AngularJS - extrait gratuit Ninja Squad Table of Contents... 1.... 1.1. Principe... 1.2. disponibles... 1.3. Filtre dynamique... iii 1 1 2 4 1.4. Créer ses propres filtres... 6 ii

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 CHAPITRE 1

INTRODUCTION CHAPITRE 1 CHAPITRE 1 INTRODUCTION Query, qu est-ce que c est?... 11 HTML, CSS, JavaScript, PHP : qui fait quoi?... 16 Un environnement de développement simple et gratuit... 19 Ce que vous allez apprendre... 20 9

Plus en détail

AdOps Spécifications techniques publicitaires

AdOps Spécifications techniques publicitaires AdOps Spécifications techniques publicitaires Matériel publicitaire HTML5 (Desktop) Les spécifications suivantes doivent être respectées pour la fourniture de matériel publicitaire HTML. Si vous utilisez

Plus en détail

Introduction. Introduction et HTML. A l issue de ce module vous devriez... Ce cours n est pas...

Introduction. Introduction et HTML. A l issue de ce module vous devriez... Ce cours n est pas... Introduction et HTML Technologies du Web 1 Jean-Christophe Routier Licence 1 SESI Université Lille 1 Introduction Objectifs : Présentation des bases de la création de documents web par la découverte des

Plus en détail

Gestion d email dans votre site

Gestion d email dans votre site Gestion d email dans votre site Ceci est une documentation préliminaire, traduite par Christine Dubois (Agilcom) et sujette à changement Dans ce chapitre, vous allez apprendre à envoyer un message e-mail

Plus en détail

PHP. virginie.sans@irisa.fr http://perso.univ-rennes1.fr/virginie.sans/pwb. Internet et HTML

PHP. virginie.sans@irisa.fr http://perso.univ-rennes1.fr/virginie.sans/pwb. Internet et HTML PHP virginie.sans@irisa.fr http://perso.univ-rennes1.fr/virginie.sans/ BUR Internet et HTML PHP, qu'est-ce que c'est? Un langage pour la programmation du serveur Permet d'inclure des parties programmées

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

SYSTÈMES D INFORMATIONS

SYSTÈMES D INFORMATIONS SYSTÈMES D INFORMATIONS Développement Modx Les systèmes de gestion de contenu Les Content Management Système (CMS) servent à simplifier le développement de sites web ainsi que la mise à jour des contenus.

Plus en détail

08/01/2013 www.toubkalit.ma

08/01/2013 www.toubkalit.ma 1 1 - La déclaration des chaînes 2 - Les opérations sur les chaînes 3 - Des exemples utiles 2 Pour déclarer une chaîne de caractères, vous pouvez utiliser les guillemets (") ou l'apostrophe ('). var chaine1="bonjour";

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

Secteur Tertiaire Informatique Filière étude - développement. Développer des composants d interface Créer des formulaires de saisie

Secteur Tertiaire Informatique Filière étude - développement. Développer des composants d interface Créer des formulaires de saisie Secteur Tertiaire Informatique Filière étude - développement. Développer des composants d interface Créer des formulaires de saisie JAVASCRIPT JS08-Gestion des cookies-consignes Accueil Apprentissage Période

Plus en détail

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15 .. CSS Damien Nouvel Damien Nouvel (Inalco) CSS 1 / 15 Feuilles de styles Plan 1. Feuilles de styles 2. Sélecteurs 3. Attributs Damien Nouvel (Inalco) CSS 2 / 15 Feuilles de styles Déportation des styles

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

Tp1 Ema EMACS Développement Web

Tp1 Ema EMACS Développement Web Tp1 Ema EMACS Développement Web 1/ Description de l application : Notre première application Web a pour objectif de gérer une liste de todo (truc à faire) : Diagramme de classe simplifié : Application

Plus en détail

3. Formulaires. Cours Web. Formulaires. 3. Formulaires. 3. Formulaires. Formulaires. Lionel Seinturier. Université Pierre & Marie Curie

3. Formulaires. Cours Web. Formulaires. 3. Formulaires. 3. Formulaires. Formulaires. Lionel Seinturier. Université Pierre & Marie Curie Cours Web Formulaires Lionel Seinturier Université Pierre & Marie Curie Lionel.Seinturier@lip6.fr 8/9/03 Formulaires HTML 1.0 essentiellement "mono"-directionnel informations fournies par le serveur (suite

Plus en détail

SHERLOCK 7. Version 1.2.0 du 01/09/09 JAVASCRIPT 1.5

SHERLOCK 7. Version 1.2.0 du 01/09/09 JAVASCRIPT 1.5 SHERLOCK 7 Version 1.2.0 du 01/09/09 JAVASCRIPT 1.5 Cette note montre comment intégrer un script Java dans une investigation Sherlock et les différents aspects de Java script. S T E M M E R I M A G I N

Plus en détail

PHP. Bertrand Estellon. 26 avril 2012. Aix-Marseille Université. Bertrand Estellon (AMU) PHP 26 avril 2012 1 / 214

PHP. Bertrand Estellon. 26 avril 2012. Aix-Marseille Université. Bertrand Estellon (AMU) PHP 26 avril 2012 1 / 214 PHP Bertrand Estellon Aix-Marseille Université 26 avril 2012 Bertrand Estellon (AMU) PHP 26 avril 2012 1 / 214 SQLite et PDO Base de données SQLite et PDO SQLite écrit les données relatives à la base dans

Plus en détail

Expressions communes. Détection du type de navigateur

Expressions communes. Détection du type de navigateur 2 Expressions communes Certaines tâches JavaScript récurrentes doivent être réalisées quasiment chaque jour. Elles sont à la base de nombreuses applications JavaScript mais n entrent dans aucune catégorie

Plus en détail

CREATE TABLE `blog` ( `id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY, `title` VARCHAR( 128 ) NOT NULL,

CREATE TABLE `blog` ( `id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY, `title` VARCHAR( 128 ) NOT NULL, Créer un blog en 20 mn Tout d abord, créer la base de données qui contiendra le blog Avec phpmyadmin définir une base de données de nom blog Définir une table de nom entries Dans cette table, on créera

Plus en détail

IFT1148 Introduction

IFT1148 Introduction IFT1148 Introduction Michael Blondin Direction de l enseignement de service en informatique Université de Montréal Hiver 2011 1 / 17 HTML Le HTML (ou XHTML) est un langage de balisage permettant de décrire

Plus en détail

Document technique. intégration Head Pilot Online. dans un site internet. 11 Rue de Navarre 14370 Chicheboville. Préparé par.

Document technique. intégration Head Pilot Online. dans un site internet. 11 Rue de Navarre 14370 Chicheboville. Préparé par. 11 Rue de Navarre 14370 Chicheboville Affaire suivie par : Pierre BOUCHARD pierre.bouchard@starnav.fr Document technique intégration Head Pilot Online dans un site internet Préparé par Pierre BOUCHARD

Plus en détail

Technique Internet de Base Javascript avancé

Technique Internet de Base Javascript avancé Technique Internet de Base Javascript avancé morge@di.unipi.it Licence 2 Université Jean Monnet 2008-2009 Introduction Un langage de programmation objet à prototype Un langage de programmation événementiel.

Plus en détail

Programme de Formation

Programme de Formation Windows / PC - initiation Etre à l aise avec Windows, savoir se situer, organiser son environnement et classer ses documents Tout utilisateur désireux d être rapidement autonome dans l utilisation de l

Plus en détail