Introduction à une techno web à la mode AngularJS

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

Download "Introduction à une techno web à la mode AngularJS"

Transcription

1 Introduction à une techno web à la mode AngularJS Alain Tchana, Maître de Conférence Institut National Polytechnique de Toulouse IRIT / Équipe SEPIA

2 Objectifs du cours Pouvoir répondre aux questions suivantes : 1) Pourquoi AngularJS? 2) Où se positionne-t-il dans le développement web? rapport à JEE par exemple? 3) Comment l'utilise-t-on? 2

3 Plan Contexte Problématiques AngularJS Conclusion

4 Aperçu Avant de se lancer

5 Bref aperçu avant de se lancer (extrait de votre support de cours)

6 Bref aperçu avant de se lancer (extrait de votre support de cours)

7 Contexte Web dynamique

8 Contexte : App. web dynamiques (rappel rapide) Caractéristiques d'une application web dynamique Les informations produites par le même lien varient d'un utilisateur à l'autre. 1) Les informations présentées sur la même page varient avec le temps (court). 2) Les informations présentées sur la même page varient suivant les actions de l'utilisateur. Le site reconnaît chaque utilisateur Construit un contenu en fonction du user 8

9 Contexte : App. web dynamiques (rappel rapide) Caractéristiques d'une application web dynamique Les informations produites par le même lien varient avec le temps (peu être très court). 1) Les informations présentées sur la même page varient avec le temps (court). 2) Les informations présentées sur la même page varient suivant les actions de l'utilisateur. Le site se met à jour dynamiquement sans l'admin system L'utilisateur est directement à l'origine 9

10 Contexte : App. web dynamiques (rappel rapide) Caractéristiques d'une application web dynamique Les informations présentées sur la même page varient suivant les actions de l'utilisateur. 1) Les informations présentées sur la même page varient avec le temps (court). 2) Les informations présentées sur la même page varient suivant les actions de l'utilisateur. La vue prend des initiatives toute seule Modifie des bouts de la page Peut contacter un serveur distant L'utilisateur est indirectement à l'origine 10

11 Contexte : App. web dynamiques (rappel rapide) Comment était implantée une app. web dyn, à l'époque? Un script côté serveur (CGI par exemple) Reçoit la requête Identifie l'utilisateur et génère une page HTML Pb. 1 Conséquences (pour le développeur) Le script est volumineux Illisible Difficile à maintenir et à faire évoluer 11

12 Contexte : App. web dynamiques (rappel rapide) Comment était implantée une app. web dyn, à l'époque? Toute action du client sur la page Nécessite le contact du serveur La régénération de la page (toute entière) Pb. 2 Même si la modification était minime Conséquences (pour le client web) Les temps de réponse sont longs (trafic sur le réseaux) Le serveur sature très vite (génération de la page entière, IO) 12

13 Contexte MVC

14 Contexte : App. web dynamiques (rappel rapide) MVC : un guide de programmation au secours du développeur Organise le code de l'application en 3 catégories Les structures de données des informations que manipulent l'app. Contient le code métier C'est le Modèle Le code qui construit la façon dont le modèle est présenté Pb. 1 C'est la Vue Les contrôles Contrôle des requêtes. MAJ modèle C'est le Contrôle 14

15 Contexte : App. web dynamiques (rappel rapide) MVC : un guide de programmation au secours du développeur Organise le code de l'application en 3 catégories Les structures de données des informations que manipulent l'app. Contient le code métier C'est le Modèle Le code qui construit la façon dont le modèle est présenté Pb. 1 C'est la Vue Les contrôles Contrôle des requêtes. MAJ modèle C'est le Contrôle 15

16 Contexte : App. web dynamiques (rappel rapide) MVC : un guide de programmation au secours du développeur Organise le code de l'application en 3 catégories Les structures de données des informations que manipulent l'app. Contient le code métier C'est le Modèle Le code qui construit la façon dont le modèle est présenté Pb. 1 C'est la Vue Les contrôles Contrôle des requêtes. MAJ modèle C'est le Contrôle 16

17 Contexte : App. web dynamiques (rappel rapide) MVC : un guide de programmation au secours du développeur Plusieurs technos permettent de faire du MVC PHP JEE Pb. 1 Les EJB pour le modèle Les servlets pour le contrôle Les JSP pour la vue Etc. La dynamicité de l'app. web se traduit par celle de la «vue» 17

18 Contexte : App. web dynamiques (rappel rapide) MVC : un guide de programmation au secours du développeur Plusieurs technos permettent de faire du MVC PHP JEE Pb. 1 Les EJB pour le modèle Les servlets pour le contrôle Les JSP pour la vue Etc. La dynamicité de l'app. web se traduit par celle de la «vue» 18

19 Contexte Zoom sur la vue

20 Contexte : App. web dynamiques (rappel rapide) Le DOM Structure de données représentant votre page dans le navigateur Possibilité de le modifier via java script (JS) Ajout ou modification d'éléments Le navigateur prend en compte (à chaud) les modifications Pb. 2 Ne se modifie pas de la même façon sur tous les navigateurs Non standardisation des navigateurs 20

21 Contexte : App. web dynamiques (rappel rapide) Modification dynamique du DOM au secours du client web Comment le développeur s'en sert pour modifier une zone Un code JS dans la vue soumet une requête au serveur Le serveur traite la requête Le serveur retourne les informations nécessaires pour la MAJ de la vue Un code JS dans la vue MAJ la vue en modifiant le DOM Pb. 2 Conséquences La logique de la MAJ de la page est placée côté client Peu de trafic sur le réseau (bon pour le temps de réponse) 21

22 Contexte : App. web dynamiques (rappel rapide) Modification dynamique du DOM au secours du client web Plusieurs technos telles que Java script : la renaissance Ajax Pb. 2 22

23 Problématiques Problème 1 Application du MVC Problème 2 Testabilité

24 Problématiques La mise en pratique du MVC n'est pas totale Le MVC est essentiellement respecté côté serveur Or, l'analyse des codes des app. existantes montrent que Besoin du MVC au niveau de la machine cliente (sans s'en rendre compte) Le DOM est un modèle Une partie du contrôle a été transférée sur le client Pour éviter les transits sur le réseaux 24

25 Problématiques La mise en pratique du MVC n'est pas totale 25

26 Problématiques La mise en pratique du MVC n'est pas totale MVC devient : M+(MVC)+C Le backend implante le «M» Le client implante la vue qui est maintenant un mini MVC Le «M» c'est le DOM Le «V» est vide Le «C» est le premier niveau de contrôle Le backend implante le «C» (le second niveau de contrôle) 26

27 Problématiques L'application du MVC n'est pas totale Ce MVC côté client n'est pas pris en compte par les technos de dev. actuelles Conséquences Il est mal programmé Mélange du modèle, de la vue, et du contrôle 27

28 Problématiques Quelques causes de cette mauvaise programmation Faut implanter soit même «modification du modèle modification de la vue» Faut implanter des «observateurs» De plus, modifier le DOM est fastidieux Verbeuse : document.getelementbyid.xxx.yyy.zzz Nécessite la maîtrise de l'architecture du DOM Faut prendre en compte la spécificité de chaque navigateur Bref le code de la vue est alourdi, verbeux et mal structuré 28

29 Problématiques Quelques causes de cette mauvaise programmation Faut implanter soit même «modification du modèle modification de la vue» Faut implanter des «observateurs» De plus, modifier le DOM est fastidieux Verbeuse : document.getelementbyid.xxx.yyy.zzz Nécessite la maîtrise de l'architecture du DOM Faut prendre en compte la spécificité de chaque navigateur Bref le code de la vue est alourdi, verbeux et mal structuré 29

30 Problématiques Quelques causes de cette mauvaise programmation Faut implanter soit même «modification du modèle modification de la vue» Faut implanter des «observateurs» De plus, modifier le DOM est fastidieux Verbeuse : document.getelementbyid.xxx.yyy.zzz Nécessite la maîtrise de l'architecture du DOM Faut prendre en compte la spécificité de chaque navigateur 30

31 Problématiques Quelques causes de sa mauvaise programmation De plus en plus de communication entre le client et serveur pour la même page Beaucoup de bouts de codes pour gérer cela Code sale!!! Le premier niveau de contrôle (dans le navigateur) prend de plus en plus de place Pour limiter la saturation du serveur d'applications Bref le code de la vue est alourdi, verbeux et mal structuré 31

32 Problématiques Quelques causes de sa mauvaise programmation De plus en plus de communication entre le client et serveur pour la même page Beaucoup de bouts de codes pour gérer cela Code sale!!! Le premier niveau de contrôle (dans le navigateur) prend de plus en plus de place Pour limiter la saturation du serveur d'applications Bref le code de la vue est alourdi, verbeux et mal structuré 32

33 Problématiques Problème 1 Application du MVC Problème 2 Testabilité

34 Problématiques Une conséquence du premier problème est la testabilité Dans le processus de développement d'une application Le test est une étape capitale Vérifie le respect du cahier des charges Il s'agit à la fois des tests unitaires et du test global C'est une étape fastidieux car Répétitive Longue sources d'erreurs 34

35 Problématiques Une conséquence du premier problème est la testabilité Dans le processus de développement d'une application Le test est une étape capitale. Vérifie le respect du cahier des charges Il s'agit à la fois des tests unitaires et du test global C'est une étape fastidieux car Répétitive Longue sources d'erreurs 35

36 Problématiques Besoin d'automatiser les tests (Continous Delivery) Il existe des outils d'automatisation des tests d'app. web Détectent les modifications dans les sources l'application Simulent des navigateurs ainsi que des clics de clients web Exemple : Karma, Protractor, Neoload, Clif, etc. 36

37 Problématiques Une conséquence du premier problème est la testabilité Ces outils de test sont très difficiles à utiliser actuellement Car les applications web sont mal codées Une légère modification d'un bout de l'application Peut entraîner la réécriture complète du code pour les tests 37

38 Résumé de la problématique La vue des app. web dynamiques est très mal programmées Deux conséquences (1) L'app. est difficilement maintenable (2) L'app. est difficilement testable 38

39 Une solution AngularJS, de google

40 AngularJS Où intervient Angular? 40

41 AngularJS Philosophie générale : faciliter la vie du programmeur Un framework pour le développement de la vue d'une app. web (1) Incite le programmeur à coder proprement le MVC côté client Via des bonnes recettes (des années d'observation) (2) A été construit en ayant à l'esprit la testabilité de l'application S'intègre parfaitement avec les outils de test existants Ce qui facilite le test plus tard 41

42 AngularJS (allé, plus de pub) Philosophie générale : faciliter la vie du programmeur Simplifie au maximum la programmation de la vue Éviter la répétition de code Éviter la maîtrise du DOM ou des technos comme Ajax Angular vous force à modulariser le code Angular le fait pour vous Éviter l'aspect verbeux et illisible de HTML Angular vous permet de définir et nommer des comportements HTML Bref, rendre le code concis et lisible 42

43 AngularJS (allé, plus de pub) Philosophie générale : faciliter la vie du programmeur Simplifie au maximum la programmation de la vue Éviter la répétition de code Éviter la maîtrise du DOM ou des technos comme Ajax Angular vous force à modulariser le code Angular le fait pour vous Éviter l'aspect verbeux et illisible de HTML Angular vous permet de définir et nommer des comportements HTML Bref, rendre le code concis et lisible 43

44 AngularJS (allé, plus de pub) Philosophie générale : faciliter la vie du programmeur Simplifie au maximum la programmation de la vue Éviter la répétition de code Éviter la maîtrise du DOM ou des technos comme Ajax Angular vous force à modulariser le code Angular le fait pour vous Éviter l'aspect verbeux et illisible de HTML Angular vous permet de définir et nommer des comportements HTML Bref, rendre le code concis et lisible 44

45 AngularJS, c'est quoi? Vous fournissez Template Your JS scripts Application finale Déployée là ou là, ou,... Je veux une page Accessible via n'importe quel navigateur Je veux une page 45

46 AngularJS, c'est quoi? Vous fournissez Template Your JS scripts Application finale Déployée là ou là, ou,... Je veux une page Accessible via n'importe quel navigateur Je veux une page Lorsqu'une page (template) est demandée par un client : Le serveur web retourne La template en question + les scripts JS que vous aviez écrits + les scripts JS d'angulars cas 46

47 AngularJS, c'est quoi? Vous fournissez Template Your JS scripts Application finale Déployée là ou là, ou,... Je veux une page Accessible via n'importe quel navigateur Angular opère ici Angular opère ici Je veux une page Lorsqu'une page (template) est demandée par un client : Le serveur web retourne La template en question + les scripts JS que vous aviez écrits + les scripts JS d'angulars cas 47

48 AngularJS, c'est quoi? Traitement d'une réponse à une requête niveau navigateur Template Your JS scripts Angular Compilateur Génère Fournit Contenu HTML Your JS scripts Utilisé par le contenu HTML Angular scripts JS La page finale 48

49 AngularJS, c'est quoi? Une grosse librairie JS Tout est au sein d'un fichier JS Angular.js (sur le site d'angularjs) Un langage qui étend HTML Le remplace dans certains cas 49

50 AngularJS, c'est quoi? Une grosse librairie JS Un compilateur qui va traduire votre application Angular en un code HTML+JS Compréhensible par les navigateurs Un runtime JS qui implante des comportements de base dont on a besoin dans une app. Modification du DOM, observateurs, communication avec un serveur d'application, etc. La machine cliente est vraiment mise à contribution 50

51 AngularJS, c'est quoi? Traitement d'une réponse à une requête niveau navigateur Template Your JS scripts Angular Compilateur Angular.js Génère Fournit Contenu HTML Your JS scripts Utilisé par le contenu HTML Angular scripts JS La page finale 51

52 AngularJS, c'est quoi? Traitement d'une réponse à une requête niveau navigateur Template Your JS scripts Le compilateur Angular Compilateur Angular.js Génère Fournit Contenu HTML Your JS scripts Utilisé par le contenu HTML Angular scripts JS La page finale 52

53 AngularJS, c'est quoi? Traitement d'une réponse à une requête niveau navigateur Template Your JS scripts Le compilateur Angular Compilateur Angular.js Génère Fournit Contenu HTML Your JS scripts Utilisé par le contenu HTML Angular scripts JS La page finale Le runtime 53

54 AngularJS, c'est quoi? Un ensemble de bonnes recettes de programmation Sur la modularité du code Canevas pour la programmation Le code est moins longs Organisation en répertoires et fichiers 54

55 AngularJS, c'est quoi? Un ensemble de bonnes recettes de programmation Sur la modularité du code Canevas pour la programmation Le code est moins longs Organisation en répertoires et fichiers 55

56 AngularJS, c'est quoi? Un ensemble de recettes pour le test Pour l'écriture des tests unitaires Tester très précisément les fonctions de base de l'application Pour l'écriture d'un test globale Simulation des clients web Simulation des scénarios d'utilisation réelle Avec des navigateurs 56

57 AngularJS, c'est quoi? Un ensemble de recettes pour le test Pour l'écriture des tests unitaires Tester très précisément les fonctions de base de l'application Pour l'écriture d'un test globale Simulation des clients web Simulation des scénarios d'utilisation réelle Avec des navigateurs 57

58 AngularJS Mise en route

59 AngularJS, c'est quoi? Comment s'en servir? (https://docs.angularjs.org/tutorial) Étape 1 : préparer une arborescence pour votre application Partir d'un exemple sur le site et le customiser git clone --depth=14 https://github.com/angular/angular-phonecat.git cd angular-phonecat Étape 2 : Installer les outils de tests (Karma, Protractor, Brower et Http-Server) apt-get install nodejs-legacy npm npm install 59

60 AngularJS, c'est quoi? Comment s'en servir? (https://docs.angularjs.org/tutorial) Étape 1 : préparer une arborescence pour votre application Partir d'un exemple sur le site et le customiser git clone --depth=14 https://github.com/angular/angular-phonecat.git cd angular-phonecat Étape 2 : Installer les outils de tests (Karma, Protractor, Brower et Http-Server) apt-get install nodejs-legacy npm npm install 60

61 AngularJS, c'est quoi? Comment s'en servir? (https://docs.angularjs.org/tutorial) Étape 3 : Coder votre application (voir les slides suivants) Étape 5 : Coder les tests (voir les slides suivants) 61

62 AngularJS, c'est quoi? Comment s'en servir? (https://docs.angularjs.org/tutorial) Etape 6 : Tester votre application npm start : démarrer un serveur web local (pour les tests) npm test : démarre Karma, le moteur des tests unitaires npm run protractor : démarre Protractor, le moteur du test global npm run update-webdriver : install les drivers nécessaires pour Protractor 62

63 AngularJS Coder son application

64 Coder en AngularJS Maîtriser les concepts suivants Directives Scope Watchers Dependency injection Routing Data binding Expressions Controller Model + HTML et JS 64

65 Coder en AngularJS Démo avec l'application : 65

66 Coder en AngularJS Démo avec l'application : Toute recherche nécessite le rafraîchissement de la page 66

67 Coder en AngularJS Démo avec l'application : L'URL reste inchangée, quelque soit la recherche 67

68 AngularJS La base

69 Une page en AngularJS Toute page contient au moins les deux éléments suivants L'inclusion du script angular.js La directive «ng-app» 69

70 Une page en AngularJS Toute page contient au moins les deux éléments suivants L'inclusion du script angular.js La directive «ng-app» 70

71 Une page en AngularJS Toute page contient au moins les deux éléments suivants L'inclusion du script angular.js La directive «ng-app» Exemple d'expression 71

72 Voici le résultat Faire la démo1 Une page en AngularJS 72

73 AngularJS Directives

74 Coder en AngularJS Les directives Sont des composants paramétrables qui implantent des comportements Se met dans la déclaration d'une balise HTML <balise_html directiveangular="param"> ou <directiveangular="param"> Angular fournit une panoplie correspondant aux comportements très souvent codés Le premier d'entre eux est «ng-app», permet de bootstraper une application Angular ng-src, ng-href, ng-model, ng-mousemove, ng-submit, etc. Vous pouvez développer les vôtres Ce qui facilite la réutilisabilité 74

75 Coder en AngularJS Les directives Sont des composants paramétrables qui implantent des comportements Se met dans la déclaration d'une balise HTML <balise_html directiveangular="param"> ou <directiveangular="param"> Angular fournit une panoplie correspondant aux comportements très souvent codés Le premier d'entre eux est «ng-app», permet de bootstraper une application Angular ng-src, ng-href, ng-model, ng-mousemove, ng-submit, etc. Vous pouvez développer les vôtres Ce qui facilite la réutilisabilité 75

76 Coder en AngularJS Les directives (Exemple 1) Nous souhaitons implanter ce comportement Faire la démo2 76

77 Coder en AngularJS Les directives (Exemple 1) Voici le code sans AngularJS (partie HTML) 77

78 Coder en AngularJS Les directives (Exemple 1) Voici le code sans AngularJS (partie JS) 78

79 Coder en AngularJS Les directives (Exemple 1) Voici le code en AngularJS : 25 lignes de code en moins (32 %), soit toute la partie JS 79

80 Coder en AngularJS Les directives (Exemple 1) Voici le code en AngularJS : 25 lignes de code en moins (32 %), soit toute la partie JS ng-model : Permet de déclarer une variable Ensuite l'utiliser plus tard 80

81 Coder en AngularJS Les directives (Exemple 1) Voici le code en AngularJS : 25 lignes de code en moins (32 %), soit toute la partie JS ng-model : Permet de déclarer une variable Ensuite l'utiliser plus tard ng-disabled: Permet de déclarer une variable Ensuite l'utiliser plus tard 81

82 Coder en AngularJS Les directives (Exemple 2 : créer sa propre directive) Nous souhaitons modifier le style css d'un élément HTML à chaque clic. Nous allons définir ce comportement de façon générique Afin de le réutiliser pour tout type d'élément Faire la démo3 82

83 Coder en AngularJS Les directives (Exemple 2 : créer sa propre directive) Avec Angular on le réalise en plusieurs étapes, de façon modulaire Étape 1 Faut définir ce que Angular appelle un «module» Qui sera passer comme paramètre de la directive «ng-app» Dans le fichier «app/js/app.js» 83

84 Coder en AngularJS Les directives (Exemple 2 : créer sa propre directive) Avec Angular on le réalise en plusieurs étapes, de façon modulaire Étape 1 Faut définir ce que Angular appelle un «module» Qui sera passer comme paramètre de la directive «ng-app» Dans le fichier «app/js/app.js» Le module «MonApp» est crée Les modules dépendants 84

85 Coder en AngularJS Les directives (Exemple 2 : créer sa propre directive) Un point sur la notion de «module» Permet de mieux organiser le code source de l'application Une application peut être organisée en modules Un module peut utiliser les services d'un autre 85

86 Coder en AngularJS Les directives (Exemple 2 : créer sa propre directive) Étape 2 : création de sa directive La directive s'appellera «mon-composant» Dans le fichier «app/js/directives.js» 86

87 Coder en AngularJS Les directives (Exemple 2 : créer sa propre directive) Étape 2 : création de sa directive Dans le fichier «app/js/directives.js» La directive est rattachée à notre module (la variable «var») 87

88 Coder en AngularJS Les directives (Exemple 2 : créer sa propre directive) Étape 2 : création de sa directive Le comportement de la directive Dans le fichier «app/js/directives.js» 88

89 Coder en AngularJS Les directives (Exemple 2 : créer sa propre directive) Étape 2 : création de sa directive Configuration de la directive pour Angular Dans le fichier «app/js/directives.js» 89

90 Coder en AngularJS Les directives (Exemple 2 : créer sa propre directive) Étape 2 : création de sa directive Dans le fichier «app/js/directives.js» "E" : La directive sera utilisée comme un élément (balise HTML). "A" pour attribut de balise 90

91 Coder en AngularJS Les directives (Exemple 2 : créer sa propre directive) Étape 2 : création de sa directive Son comportement est la fonction définie Dans le fichier «app/js/directives.js» 91

92 Coder en AngularJS Les directives (Exemple 2 : créer sa propre directive) Étape 3 : utilisation de la directive Ma page HTML est liée au module Angular créé Dans son fichier HTML.. 92

93 Coder en AngularJS Les directives (Exemple 2 : créer sa propre directive) Étape 3 : utilisation de la directive Inclusion des 2 nouveaux fichiers JS Dans son fichier HTML.. 93

94 Coder en AngularJS Les directives (Exemple 2 : créer sa propre directive) Étape 3 : utilisation de la directive Utilisation de la directive (comme une base HTML) Dans son fichier HTML.. 94

95 AngularJS Controllers

96 Coder en AngularJS Controller et data binding (Exemple 1 : un controller simple) Nous souhaitons afficher une liste d'éléments Commençons avec quelque chose de simple Les données de la liste sont connues Mais peuvent évoluer Faire la démo4 96

97 Coder en AngularJS Controller et data binding (Exemple 1 : un controller simple) Avec Angular Étape 1 : Créer un controller Il s'agit d'un controller simple pour l'instant J'ajoute un controller à mon module Il nous permet de définir notre modèle. Et prépare au data binding Dans le fichier «app/js/controllers.js» 97

98 Coder en AngularJS Controller et data binding (Exemple 1 : un controller simple) Avec Angular Étape 1 : Créer un controller Il s'agit d'un controller simple pour l'instant Nom du controller Il nous permet de définir notre modèle. Et prépare au data binding Dans le fichier «app/js/controllers.js» 98

99 Coder en AngularJS Controller et data binding (Exemple 1 : un controller simple) Avec Angular Étape 1 : Créer un controller Il s'agit d'un controller simple pour l'instant Corps du controller. Pas grand chose. Juste initialiser le modèle. Il nous permet de définir notre modèle. Et prépare au data binding Dans le fichier «app/js/controllers.js» 99

100 Coder en AngularJS Controller et data binding (Exemple 1 : un controller simple) Avec Angular Étape 2 : Utiliser le controller dans le fichier HTML Inclusion du fichier JS contenant les controllers.. 100

101 Coder en AngularJS Controller et data binding (Exemple 1 : un controller simple) Avec Angular Étape 2 : Utiliser le controller dans le fichier HTML Inclusion du fichier JS contenant les controllers.. 101

102 Coder en AngularJS Controller et data binding (Exemple 1 : un controller simple) Avec Angular Étape 2 : Utiliser le controller dans le fichier HTML Application du controller au corps du document HTML.. 102

103 Coder en AngularJS Controller et data binding (Exemple 1 : un controller simple) Avec Angular Étape 2 : Utiliser le controller dans le fichier HTML Une directive qui s'appuie sur le controller. Permet de répéter un bloc. Les données viennent du modèle intialisé dans le controller «phones» a été défini dans le controller.. 103

104 Coder en AngularJS Controller et data binding (Exemple 1 : un controller simple) Avec Angular Étape 2 : Utiliser le controller dans le fichier HTML Expressions et data binding: le controller permet ici de réaliser la liaison entre le modèle et la vue

105 AngularJS Les filtres

106 Coder en AngularJS Les filtres (suite de l'exemple précédent) Nous voulons faire ceci Faire la démo5 106

107 Coder en AngularJS Les filtres (de l'exemple précédent) Avec Angular Utiliser le service «filter» Nous définissons la zone de texte comme élément du modèle 107

108 Coder en AngularJS Les filtres (de l'exemple précédent) Avec Angular Utiliser la fonction «filter» Nous définissons la zone de texte comme élément du modèle Le contenu de la zone de texte est utilisé pour filtrer la liste à afficher. Angular gère tout (binding, comparaison, rafraichissement, etc.) 108

109 AngularJS Les services

110 Coder en AngularJS Les données viendront maintenant d'un serveur 110

111 Coder en AngularJS Les données viendront maintenant d'un serveur Avec Angular Utilisation du service «$http» de Angular Géré par Angular grâce à l'injection de dépendances Dans le fichier «app/js/controllers.js» Angular injectera cette variable dans les sources du controller 111

112 Coder en AngularJS Les données viendront maintenant d'un serveur Avec Angular Utilisation du service «$http» de Angular Géré par Angular grâce à l'injection de dépendances Dans le fichier «app/js/controllers.js» Obtention des données du serveur 112

113 Coder en AngularJS Les données viendront maintenant d'un serveur Avec Angular Utilisation du service «$http» de Angular Géré par Angular grâce à l'injection de dépendances Dans le fichier «app/js/controllers.js» Obtention des données du serveur Fonction appelée en cas de succès : asynchrone 113

114 Coder en AngularJS Les données viendront maintenant d'un serveur Avec Angular Utilisation du service «$http» de Angular Géré par Angular grâce à l'injection de dépendances Dans le fichier «app/js/controllers.js» Obtention des données du serveur Initialisation du modèle 114

115 Coder en AngularJS Les services Angular fournit un ensemble de services Commence par le caractère «$» Exemple : $http : $http.get(), $http.post(), $http.delete(), $http.options(), etc. $timeout, $log, etc. Vous pouvez construire les vôtres Se sert de sa capacité d'injection de codes pour implanter ceci Injection de dépendance 115

116 AngularJS Tests unitaires

117 Tests unitaires Permet de tester des fonctions écrites en JS Surtout les fonctions liées au contrôles et au modèle Pas le DOM (que nous avons présenté comme une partie de notre modèle) Généralement le test du DOM se fait en plusieurs étapes Donc, pas unitaire 117

118 Tests unitaires Test unitaire de l'exemple 1 : un controller simple Le but du test : s'assurer que le controller crée bien 3 éléments dans le tableau 118

119 Tests unitaires Test unitaire de l'exemple 1 : un controller simple Avec Jasmine (le langage de description du test) et Karma (le moteur d'exécution du test) Dans le fichier «test/unit/controllersspec.js» Le nom du test 119

120 Tests unitaires Test unitaire de l'exemple 1 : un controller simple Avec Jasmine (le langage de description du test) et Karma (le moteur d'exécution du test) Dans le fichier «test/unit/controllersspec.js» Le corps de la fonction de test. Constituée d'une unique spécification à tester 120

121 Tests unitaires Test unitaire de l'exemple 1 : un controller simple Avec Jasmine (le langage de description du test) et Karma (le moteur d'exécution du test) Dans le fichier «test/unit/controllersspec.js» Le nom de la spécification 121

122 Tests unitaires Test unitaire de l'exemple 1 : un controller simple Avec Jasmine (le langage de description du test) et Karma (le moteur d'exécution du test) Dans le fichier «test/unit/controllersspec.js» La spécification est réussie si tous les «expect» sont true 122

123 Tests unitaires Test unitaire de l'exemple 1 : un controller simple Exécution du test Dans un terminal : npm test Voici le résultat du test Démo6 Succès du test 123

124 AngularJS Test globale

125 Test global Test global de l'exemple 1 : un controller simple avec filtre Rappel de l'exemple 125

126 Test global Test global de l'exemple 1 : un controller simple avec filtre Dans le fichier «test/e2e/scenarios.js» Le test se réalise sur la page index.html 126

127 Test global Test global de l'exemple 1 : un controller simple avec filtre Dans le fichier «test/e2e/scenarios.js» On voit ici le test unitaire 127

128 Test global Test global de l'exemple 1 : un controller simple avec filtre Dans le fichier «test/e2e/scenarios.js» Simulation de la saisie dans la zone de texte. Si le filtre fonctionne correctement, alors la liste ne doit contenir qu'un élément Un autre 128

129 Test global Test global de l'exemple 1 : un controller simple avec filtre Dans le fichier «test/e2e/scenarios.js» Démo7 129

130 Conclusion

131 Conclusion AngularJS facilite la vie des développeurs et testeurs Se situe au niveau du développement de la vue dans le modèle MVC Remplace les technos telles que Ajax Par contre, fonctionne très bien avec JEE (avec moins de JSP) par exemple Permet de modulariser le code Réduit drastiquement le nombre de lignes de codes Facilite sa maintenabilité et son évolution S'associe très bien aux outils de tests 131

132 Conclusion AngularJS facilite la vie des développeurs et testeurs Se situe au niveau du développement de la vue dans le modèle MVC Remplace les technos telles que Ajax Par contre, fonctionne très bien avec JEE (avec moins de JSP) par exemple Permet de modulariser le code Réduit drastiquement le nombre de lignes de codes Facilite sa maintenabilité et son évolution S'associe très bien aux outils de tests 132

133 Conclusion AngularJS facilite la vie des développeurs et testeurs Se situe au niveau du développement de la vue dans le modèle MVC Remplace les technos telles que Ajax Par contre, fonctionne très bien avec JEE (avec moins de JSP) par exemple Permet de modulariser le code Réduit drastiquement le nombre de lignes de codes Facilite sa maintenabilité et son évolution S'associe très bien avec les outils de tests 133

134 Conclusion AngularJS n'est rien d'autre qu'une librairie JS Le gros du boulot est donc de maîtriser toute la librairie Par exemple, toutes les directives (afin de ne pas en redévelopper) 134

135 Introduction à une techno web à la mode AngularJS Alain Tchana, Maître de Conférence Institut National Polytechnique de Toulouse IRIT / Équipe SEPIA

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

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

Auteur LARDOUX Guillaume Contact guillaume.lardoux@epitech.eu Année 2014 DEVELOPPEMENT MOBILE AVEC CORDOVA

Auteur LARDOUX Guillaume Contact guillaume.lardoux@epitech.eu Année 2014 DEVELOPPEMENT MOBILE AVEC CORDOVA Auteur LARDOUX Guillaume Contact guillaume.lardoux@epitech.eu Année 2014 DEVELOPPEMENT MOBILE AVEC CORDOVA Sommaire 1. Introduction 2. Installation 3. Fonctionnement 4. Développement 5. Démonstration 2

Plus en détail

TD1. Installation de Symfony 2 et Netbeans

TD1. Installation de Symfony 2 et Netbeans I - Introduction : TD1 Installation de Symfony 2 et Netbeans L objet de ce TP est d installer l environnement de travail. Nous commençons par définir des notions de base nécessaires pour comprendre la

Plus en détail

Leçon 0 : Introduction au développement web

Leçon 0 : Introduction au développement web Module : Atelier programmation n- tiers Atelier de TP : N 0 Durée : 6h Groupes : M31- M32 Leçon 0 : Introduction au développement web NB : Ce document est un support de cours (notes de cours) : ce n'est

Plus en détail

Développer de nouvelles fonctionnalités

Développer de nouvelles fonctionnalités 19 Développer de nouvelles fonctionnalités Chaque site e-commerce est unique. Bien que Magento soit une application riche, des besoins spécifiques apparaîtront et l ajout de modules deviendra nécessaire.

Plus en détail

Développement d'applications Web HTML5 L'art et la manière avec Visual Studio 2015 et TFS

Développement d'applications Web HTML5 L'art et la manière avec Visual Studio 2015 et TFS Avant de commencer 1. Introduction 15 2. HTML5 oui, mais pas que... 15 2.1 HTML5 16 2.2 JavaScript 17 2.3 CSS 18 3. Les outils 18 Préparation des outils et création du projet 1. Introduction 21 2. Team

Plus en détail

Evolutions du Web et des langages

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

Plus en détail

AngularJS pour une application d'entreprise

AngularJS pour une application d'entreprise AngularJS pour une application d'entreprise SAVOIR FAIRE SERIAL Jean-Philippe Laurent Responsable pôle Web Benoit Charpié-Pruvost Expert AngularJS 18 juin 2015 BRINGING THE HUMAN TOUCH TO TECHNOLOGY BRINGING

Plus en détail

Projet 2. Gestion des services enseignants CENTRE D ENSEIGNEMENT ET DE RECHERCHE EN INFORMATIQUE. G r o u p e :

Projet 2. Gestion des services enseignants CENTRE D ENSEIGNEMENT ET DE RECHERCHE EN INFORMATIQUE. G r o u p e : CENTRE D ENSEIGNEMENT ET DE RECHERCHE EN INFORMATIQUE Projet 2 Gestion des services enseignants G r o u p e : B E L G H I T Y a s m i n e S A N C H E Z - D U B R O N T Y u r i f e r M O N T A Z E R S i

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 architectures N-tiers

Les architectures N-tiers Les architectures N-tiers 1 SOMMAIRE DU COURS XML ET LES ARCHITECTURES N-TIER Introduction aux architectures N-tier Serveurs d applications Déploiement d applications J2EE Tiers applicatif : servlets Tiers

Plus en détail

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

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

Plus en détail

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

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

Plus en détail

Avant-propos 1. Avant-propos...3 2. Organisation du guide...3 3. À qui s'adresse ce guide?...4

Avant-propos 1. Avant-propos...3 2. Organisation du guide...3 3. À qui s'adresse ce guide?...4 Les exemples cités tout au long de cet ouvrage sont téléchargeables à l'adresse suivante : http://www.editions-eni.fr. Saisissez la référence ENI de l'ouvrage EP5EJAV dans la zone de recherche et validez.

Plus en détail

Cloud Computing. Alain Tchana, Maître de Conférence Institut National Polytechnique de Toulouse IRIT / Équipe SEPIA alain.tchana@enseeiht.

Cloud Computing. Alain Tchana, Maître de Conférence Institut National Polytechnique de Toulouse IRIT / Équipe SEPIA alain.tchana@enseeiht. Cloud Computing Alain Tchana, Maître de Conférence Institut National Polytechnique de Toulouse IRIT / Équipe SEPIA alain.tchana@enseeiht.fr Alain Tchana, alain.tchana@enseeiht.fr Objectifs du cours Répondre

Plus en détail

Programmation Avancée pour le Web

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

Plus en détail

Etude technologique sur Corss-platform Mobil

Etude technologique sur Corss-platform Mobil Etude technologique sur Corss-platform Mobil ADAPTION DES INTERFACES À L ENVIRONNEMENT Date : 11/11/2014 Student : Lifeng TAO I. Introduction RhoMobile RhoMobile est le conteneur de l'application mobile

Plus en détail

Formation GWT. www.objis.com - Formation GWT 1

Formation GWT. www.objis.com - Formation GWT 1 Formation GWT www.objis.com - Formation GWT 1 Sommaire Formation GWT Introduction Qu'est ce qu'une application GWT? Méthodologie et étapes clés gestion projet GWT Interface utilisateur : widgets, panels,

Plus en détail

Architecture J2EE. Thierry Lecroq (merci à Alexandre Pauchet (INSA Rouen)) Université de Rouen FRANCE. Thierry Lecroq (Univ. Rouen) J2EE 1 / 16

Architecture J2EE. Thierry Lecroq (merci à Alexandre Pauchet (INSA Rouen)) Université de Rouen FRANCE. Thierry Lecroq (Univ. Rouen) J2EE 1 / 16 Architecture J2EE Thierry Lecroq (merci à Alexandre Pauchet (INSA Rouen)) Université de Rouen FRANCE Thierry Lecroq (Univ. Rouen) J2EE 1 / 16 Plan 1 Historique 2 Architecture J2EE 3 J2EE et applications

Plus en détail

Documentation technique

Documentation technique MEEVY Documentation technique Juillet 200 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 ligne gratuite

Plus en détail

Desktop Manager 2.8 Guide de mise à jour. Janvier 2014

Desktop Manager 2.8 Guide de mise à jour. Janvier 2014 Desktop Manager 2.8 Guide de mise à jour Janvier 2014 Ce document d'aide présente une méthodologie pour migrer d'une ancienne version de Desktop Manager vers la nouvelle version 2.8. Elle comporte deux

Plus en détail

VisualAge Pacbase 3.0 et WebSphere

VisualAge Pacbase 3.0 et WebSphere VisualAge Pacbase 3.0 et WebSphere Conférence VisualAge Pacbase 13 décembre 2001 Fernand Bonaguidi Jean-François Lévi 1 La plateforme logicielle WebSphere Applications de s et de Partenaires Accélérateurs

Plus en détail

JAVA PROGRAMMATION. Programme. 1. Java, HTML et World Wide Web

JAVA PROGRAMMATION. Programme. 1. Java, HTML et World Wide Web PROGRAMMATION PUBLIC Professionnels informatiques qui souhaitent développer des applications et «applets» Java DUREE 4 jours 28 heures OBJECTIF Créer divers «applets» à intégrer dans un site Web dynamique,

Plus en détail

Développement de Servlets et JSP avec Eclipse

Développement de Servlets et JSP avec Eclipse Développement de Servlets et JSP avec Eclipse Sommaire 1 Mise en place o 1.1 Installation de Galileo o 1.2 Association de Galileo avec une installation de Tomcat o 1.3 Pilotage des serveurs 2 Développement

Plus en détail

Schéma de principe client / serveur

Schéma de principe client / serveur Présentation Le langage est un langage de scripts spécialement conçu (initialement) pour développer des applications web Historique Créé par Rasmus Lerdorf sous le nom de /FI [Personnal Home Page / Forms

Plus en détail

http://www.sigl.epita.net Struts Struts Romain Couturier Aurélia Fermé Frédéric Lung Tung Matthieu Nicolas 17/06/2002 17/06/2002 ACO slide 1

http://www.sigl.epita.net Struts Struts Romain Couturier Aurélia Fermé Frédéric Lung Tung Matthieu Nicolas 17/06/2002 17/06/2002 ACO slide 1 http://www.sigl.epita.net Romain Couturier Aurélia Fermé Frédéric Lung Tung Matthieu Nicolas slide 1 Plan Rappels Servlet JSP JavaBean MVC (1 & 2) Présentation Vue Contrôleur Modèle Exemple d application

Plus en détail

Zend Framework 2 Développez des applications web mobiles (PHP, HTML5, JavaScript, NoSQL)

Zend Framework 2 Développez des applications web mobiles (PHP, HTML5, JavaScript, NoSQL) Avant-propos 1. À qui s adresse ce livre? 13 2. Comment cet ouvrage est-il structuré? 15 Premiers pas avec Zend 1. Objectif 19 2. Quoi de neuf chez Zend? 20 2.1 Zend Framework 2 20 2.2 Les nouveaux composants

Plus en détail

I N F O R M A T I O N S G É N É R A L ES D O M A I N E S D E C O M P É T E N C E S T E C H N O L O G I E S [DÉVELOPPEUR WEB] MAALEJ Nassim, 25 ans

I N F O R M A T I O N S G É N É R A L ES D O M A I N E S D E C O M P É T E N C E S T E C H N O L O G I E S [DÉVELOPPEUR WEB] MAALEJ Nassim, 25 ans , 25 ans Ingénieur étude et développement informatique Concepteur fonctionnel Assistant chef de projet I N F O R M A T I O N S G É N É R A L ES Titre Ingénieur étude et développement informatique Ecole

Plus en détail

CQP Développeur Nouvelles Technologies (DNT)

CQP Développeur Nouvelles Technologies (DNT) ORGANISME REFERENCE STAGE : 26572 20 rue de l Arcade 75 008 PARIS CONTACT Couverture géographique : M. Frédéric DIOLEZ Bordeaux, Rouen, Lyon, Toulouse, Marseille Tél. : 09 88 66 17 40 Nantes, Lille, Strasbourg,

Plus en détail

Exemple de rapport simplifié de Test de charge

Exemple de rapport simplifié de Test de charge syloe.fr http://www.syloe.fr/conseil/test de charge/exemple de rapport simplifie de test de charge/ Exemple de rapport simplifié de Test de charge Contexte du test de charge Un client nous soumet une problématique

Plus en détail

Interactions audio sur le site web du LIA Documentation Technique

Interactions audio sur le site web du LIA Documentation Technique 2007 Interactions audio sur le site web du LIA Documentation Technique Projet 13 - IUP Avignon Master1 TAIM 28/05/2007 2 Projet 13 : Interactions audio sur le site web du LIA Sommaire Composants de l'application...

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

PJS 4 jours (28 heures) 2 000 HT (hors promotion ou remise particulière)

PJS 4 jours (28 heures) 2 000 HT (hors promotion ou remise particulière) L institut de formation continue des professionnels du Web Formation Polymer JS Référence formation : Durée : Prix conseillé : PJS 4 jours (28 heures) 2 000 HT (hors promotion ou remise particulière) Description

Plus en détail

TP JEE Développement Web en Java. Dans ce TP nous commencerons la programmation JEE par le premier niveau d une application JEE : l application web.

TP JEE Développement Web en Java. Dans ce TP nous commencerons la programmation JEE par le premier niveau d une application JEE : l application web. ASTRIUM - Toulouse JEE Formation 2013 TP JEE Développement Web en Java Dans ce TP nous commencerons la programmation JEE par le premier niveau d une application JEE : l application web. Figure 1 Architecture

Plus en détail

E-mail : contact@nqicorp.com - Web : http://www.nqicorp.com

E-mail : contact@nqicorp.com - Web : http://www.nqicorp.com - 5, rue Soutrane - 06560 Valbonne Sophia-Antipolis E-mail : contact@nqicorp.com - Web : http://www.nqicorp.com NQI Orchestra 3.3 - Guide d'installation Windows.................................................................

Plus en détail

Fonctionnement du Site Web Dynamique:

Fonctionnement du Site Web Dynamique: Fonctionnement du Site Web Dynamique: Site Web Dynamique: Un site Web dynamique est en faite un site Web dont les pages qu'il contient peuvent être générées dynamiquement, c'est à dire à la demande de

Plus en détail

Fiche de présentation d'une situation professionnelle.. p1. Charte graphique de campustech p2. 1.1 Contexte du projet.. p4

Fiche de présentation d'une situation professionnelle.. p1. Charte graphique de campustech p2. 1.1 Contexte du projet.. p4 Sommaire Fiche de présentation d'une situation professionnelle.. p1 Charte graphique de campustech p2 1. CONTEXTE.. p3 1.1 Contexte du projet.. p4 1.2 Cahier des charges.. p4 2. ENVRIONNEMENT DE TRAVAIL..

Plus en détail

Méthode de Test. Pour WIKIROUTE. Rapport concernant les méthodes de tests à mettre en place pour assurer la fiabilité de notre projet annuel.

Méthode de Test. Pour WIKIROUTE. Rapport concernant les méthodes de tests à mettre en place pour assurer la fiabilité de notre projet annuel. Méthode de Test Pour WIKIROUTE Rapport concernant les méthodes de tests à mettre en place pour assurer la fiabilité de notre projet annuel. [Tapez le nom de l'auteur] 10/06/2009 Sommaire I. Introduction...

Plus en détail

Applications orientées données (NSY135)

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

Plus en détail

Le langage PHP 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

Chapitre 4 Les Servlets. 1. Qu'est-ce qu'une Servlet? 1.1 Présentation. 1.2 Requêtes HTTP

Chapitre 4 Les Servlets. 1. Qu'est-ce qu'une Servlet? 1.1 Présentation. 1.2 Requêtes HTTP 210 Les Servlets 1. Qu'est-ce qu'une Servlet? 1.1 Présentation Les Servlets sont la base de la programmation Java EE. La conception d'un site Web dynamique en Java repose sur ces éléments. Une Servlet

Plus en détail

FORMATION PcVue. Mise en œuvre de WEBVUE. Journées de formation au logiciel de supervision PcVue 8.1. Lieu : Lycée Pablo Neruda Saint Martin d hères

FORMATION PcVue. Mise en œuvre de WEBVUE. Journées de formation au logiciel de supervision PcVue 8.1. Lieu : Lycée Pablo Neruda Saint Martin d hères FORMATION PcVue Mise en œuvre de WEBVUE Journées de formation au logiciel de supervision PcVue 8.1 Lieu : Lycée Pablo Neruda Saint Martin d hères Centre ressource Génie Electrique Intervenant : Enseignant

Plus en détail

L3 - Sites Web dynamiques : Mini-Wall MINI-WALL

L3 - Sites Web dynamiques : Mini-Wall MINI-WALL L3 - SITES WEB DYNAMIQUES MINI-WALL 1 Introduction L'objectif de ce TD est de mettre en place un mini "livre d'or", permettant à vos visiteurs de vous laisser des messages sur votre site. Une page affiche

Plus en détail

Rails, une alternative à J2EE

Rails, une alternative à J2EE Rails, une alternative à J2EE http://www.rubyonrails.org/ Présentation Ruby on Rails, ou RoR ou Rails, est un framework web basé sur le design pattern MVC et utilisant le langage Ruby. Ruby est un langage

Plus en détail

Chapitre 4 Le framework et les API de Joomla

Chapitre 4 Le framework et les API de Joomla Chapitre 4 Le framework et les API de Joomla 1. Les bases du framework Le framework et les API de Joomla 1.1 Notions de framework «Framework» se traduit littéralement par «cadre de travail». C'est un ensemble

Plus en détail

Systèmes de Gestion de Contenu

Systèmes de Gestion de Contenu Introduction aux de site Web Master 1 CAWEB Page 1/7 Introduction Définition CMS Content Management Systems : logiciels de conception et de mise à jour dynamique de site web ou d'application multimédia

Plus en détail

Refonte front-office / back-office - Architecture & Conception -

Refonte front-office / back-office - Architecture & Conception - Refonte front-office / back-office - Architecture & Conception - GLG204 - Architectures Logicielles Java 2008/2009 Nom : Cédric Poisson Matricule : 06-49012 Version : 1.0 Jeudi 28 mai 2009 1 / 23 Table

Plus en détail

Dr. Djamel Benmerzoug. Email : djamel.benmerzoug@univ-constantine2.dz

Dr. Djamel Benmerzoug. Email : djamel.benmerzoug@univ-constantine2.dz Master 2 SITW Les services Web Dr. Djamel Benmerzoug Email : djamel.benmerzoug@univ-constantine2.dz Maitre de Conférences A, Département TLSI Faculté des NTIC Université Constantine 2 Abdelhamid Mehri

Plus en détail

ASP.NET MVC 4 Développement d'applications Web en C# - Concepts et bonnes pratiques

ASP.NET MVC 4 Développement d'applications Web en C# - Concepts et bonnes pratiques Introduction 1. Introduction 11 2. La plateforme de développement web de Microsoft 11 3. Définition du modèle de programmation MVC 14 4. L'historique d'asp.net MVC 17 4.1 ASP.NET MVC 1 (2008) 17 4.2 ASP.NET

Plus en détail

[ Hornet ] Charte de méthodologie

[ Hornet ] Charte de méthodologie [ Hornet ] Hornet Cette création est mise à disposition selon le Contrat Paternité - Pas d'utilisation Commerciale - Partage des Conditions Initiales à l'identique disponible en ligne http://creativecommons.org/licenses/by-nc-sa/2.0/fr/

Plus en détail

Institut Supérieure Aux Etudes Technologiques De Nabeul. Département Informatique

Institut Supérieure Aux Etudes Technologiques De Nabeul. Département Informatique Institut Supérieure Aux Etudes Technologiques De Nabeul Département Informatique Support de Programmation Java Préparé par Mlle Imene Sghaier 2006-2007 Chapitre 1 Introduction au langage de programmation

Plus en détail

Les templates. Chapitre 7. 1. Principes et généralités

Les templates. Chapitre 7. 1. Principes et généralités 351 Chapitre 7 Les templates 1. Principes et généralités Les templates Nous utilisons le mot anglais de template, car il est communément utilisé, répandu, et compris dans ce contexte par les professionnels.

Plus en détail

La programmation sous Android : Quels sont les moyens disponibles?

La programmation sous Android : Quels sont les moyens disponibles? La programmation sous Android : Quels sont les moyens disponibles? Cet article présente plusieurs manières, plusieurs méthodes pour arriver à coder pour Android. Nous commencerons par la programmation

Plus en détail

Dans nos locaux au 98 Route de Sauve 30900 NÎMES. Un ordinateur PC par stagiaire, scanner, imprimante/copieur laser couleur

Dans nos locaux au 98 Route de Sauve 30900 NÎMES. Un ordinateur PC par stagiaire, scanner, imprimante/copieur laser couleur FORMATION FORFAIT WEB DEVELOPPEUR Qualification ISQ OPQF Formacode 46 125 Certification de titre professionnel Web Designer + modules optionnels : Développement PHP/MySQL avancé, Web App, CMS e-boutique

Plus en détail

Explication des statistiques

Explication des statistiques Explication des statistiques Sources : http://www.eolas.fr/8-conseil/65-interpreter-vos-statistiques-webalizer.htm http://support.sherweb.com/faqdetails.php?idarticle=68 Un site web est un ensemble de

Plus en détail

Nouveautés joomla 3 1/14

Nouveautés joomla 3 1/14 Nouveautés joomla 3 1/14 Table des matières 1 Responsive... 1 2 Bootstrap... 1 3 LESS CSS intégré... 1 4. JUI (pour les développeurs d'extensions)... 1 5. Le Mambo days vs le Génial UX... 2 6. 7 étapes

Plus en détail

Gestion du service des enseignements Analyse détaillée. Gestion du service des enseignements. Ce document est la propriété exclusive du groupe GSE

Gestion du service des enseignements Analyse détaillée. Gestion du service des enseignements. Ce document est la propriété exclusive du groupe GSE 1 sur 54 Projet Émetteur du Document Groupe GSE Destinataire du Document J.L. Massat Titre Nom Du Fichier O_Analyse_Detaillee_v2.1.pdf Version v2.1 Historique Des Versions Version Date Création Date Validation

Plus en détail

AJAX est l'acronyme d'asynchronous JavaScript And XML, autrement dit JavaScript Et XML Asynchrones.

AJAX est l'acronyme d'asynchronous JavaScript And XML, autrement dit JavaScript Et XML Asynchrones. Le concept d'ajax Introduction AJAX est l'acronyme d'asynchronous JavaScript And XML, autrement dit JavaScript Et XML Asynchrones. AJAX n'est ni une technologie ni un langage de programmation ; AJAX est

Plus en détail

ASP.NET avec C# sous Visual Studio 2013 Conception et développement d'applications Web

ASP.NET avec C# sous Visual Studio 2013 Conception et développement d'applications Web Visual Studio 2013 et.net 4.5.1 1. Nouveautés de Visual Studio 2013 15 1.1 Installation 17 1.2 Interface du logiciel 18 1.2.1 La page de démarrage 18 1.2.2 Les fenêtres de Visual Studio 20 1.2.3 Les activités

Plus en détail

Application Web et J2EE

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

Plus en détail

INTRODUCTION A JAVA. Fichier en langage machine Exécutable

INTRODUCTION A JAVA. Fichier en langage machine Exécutable INTRODUCTION A JAVA JAVA est un langage orienté-objet pur. Il ressemble beaucoup à C++ au niveau de la syntaxe. En revanche, ces deux langages sont très différents dans leur structure (organisation du

Plus en détail

Cahier de Charge. Master I Informatique parcours Ingénierie Logiciels. E-Service Système d information web «Gestion des services ensignants

Cahier de Charge. Master I Informatique parcours Ingénierie Logiciels. E-Service Système d information web «Gestion des services ensignants Master I Informatique parcours Ingénierie Logiciels Projet : E-Service Gestions des Enseignements Groupe 06 Cahier de Charge E-Service Système d information web «Gestion des services ensignants 2011-2012

Plus en détail

Les formations. Développeur Logiciel. ENI Ecole Informatique

Les formations. Développeur Logiciel. ENI Ecole Informatique page 1/8 Titre professionnel : Inscrit au RNCP de Niveau III (Bac + 2) (J.O. du 19/02/13) 24 semaines + 8 semaines de stage (uniquement en formation continue) Développer une application orientée objet

Plus en détail

Programmation GWT 2. Développer des applications HTML5/JavaScript en Java avec Google Web Toolkit. 2 e édition. Sami Jaber

Programmation GWT 2. Développer des applications HTML5/JavaScript en Java avec Google Web Toolkit. 2 e édition. Sami Jaber Programmation GWT 2 Développer des applications HTML5/JavaScript en Java avec Google Web Toolkit 2 e édition Sami Jaber Groupe Eyrolles, 2012, ISBN : 978-2-212-13478-0 Table des matières Introduction à

Plus en détail

Sage CRM. 7.2 Guide de Portail Client

Sage CRM. 7.2 Guide de Portail Client Sage CRM 7.2 Guide de Portail Client Copyright 2013 Sage Technologies Limited, éditeur de ce produit. Tous droits réservés. Il est interdit de copier, photocopier, reproduire, traduire, copier sur microfilm,

Plus en détail

Les grandes facettes du développement Web Nicolas Thouvenin - Stéphane Gully

Les grandes facettes du développement Web Nicolas Thouvenin - Stéphane Gully Les grandes facettes du développement Web Qui sommes nous? Nicolas Thouvenin Stéphane Gully Projets Web depuis 2000 LAMP, NodeJS HTML, CSS, jquery

Plus en détail

GRAILS L'ARCHITECTURE GRAILS

GRAILS L'ARCHITECTURE GRAILS GRAILS L'ARCHITECTURE GRAILS Grails est un serveur d'application web basé sur le langage Groovy, et le framework Spring. Il est édité par la société : SpringSource. Une application Grails se décompose

Plus en détail

ASP.NET 4.5 avec C# sous Visual Studio 2012 Conception et développement d'applications Web

ASP.NET 4.5 avec C# sous Visual Studio 2012 Conception et développement d'applications Web Visual Studio 2012 et.net 4.5 1. Nouveautés de Visual Studio 2012 15 1.1 Installation 17 1.2 Interface du logiciel 18 1.2.1 La page de démarrage 19 1.2.2 Les fenêtres de Visual Studio 20 1.2.3 Les activités

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

Ajax et Accessibilité

Ajax et Accessibilité Ajax etaccessibilité Présentation Michel HOËL : Responsable Technique d'urbilog En 2001, création d'ocawa : Outil de validation automatique de "règles d'accessibilité" pour France Télécom. Les règles sont

Plus en détail

Le client/serveur dans le cas du Web

Le client/serveur dans le cas du Web Le client/serveur dans le cas du Web Olivier Flauzac & Cyril Rabat olivier.flauzac@univ-reims.fr cyril.rabat@univ-reims.fr Licence 3 Info - Info0503 - Introduction à la programmation client/serveur 2015-2016

Plus en détail

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

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

Plus en détail

Traitement et navigation

Traitement et navigation 12 Traitement et navigation Au chapitre précédent, nous avons vu comment créer des pages web avec différentes technologies (HTML, JSP, JSTL, etc.) en insistant sur le fait que JSF est la spécification

Plus en détail

Unité de formation 1 : Structurer une application. Durée : 3 semaines

Unité de formation 1 : Structurer une application. Durée : 3 semaines PROGRAMME «DEVELOPPEUR LOGICIEL» Titre professionnel : «Développeur Logiciel» Inscrit au RNCP de niveau III (Bac+2) (JO du 23 Octobre 2007) (32 semaines) Unité de formation 1 : Structurer une application

Plus en détail

Conception d'un système d'information WEB avec UML Par Ass SERGE KIKOBYA

Conception d'un système d'information WEB avec UML Par Ass SERGE KIKOBYA Conception d'un système d'information WEB avec UML Par Ass SERGE KIKOBYA I. Introduction Suite à une demande des étudiants, il m'est apparu intéressant de montrer, à travers un exemple concret, comment

Plus en détail

SOAP OU REST, QUE CHOISIR?

SOAP OU REST, QUE CHOISIR? SOAP OU REST, QUE CHOISIR? Eric van der Vlist (vdv@dyomedea.com) SOAP ou REST, que choisir? Web Services Convention Juin 2004 Eric van der Vlist (vdv@dyomedea.com) SOAP-- WS Convention 2004 -- Page 1 COMPARER

Plus en détail

Guide d'installation pour Plug-in : PHP et Perl

Guide d'installation pour Plug-in : PHP et Perl Guide d'installation pour Plug-in : PHP et Perl Version AE280507-APIv6 Guide d'installation pour Plug-in : PHP et Perl API v6 Avertissements : Le fichier Version.txt précise l'environnement dans lequel

Plus en détail

JSF 2 avec Eclipse Développement d'applications web avec Java Server Faces (2ième édition)

JSF 2 avec Eclipse Développement d'applications web avec Java Server Faces (2ième édition) Applications web, servlets et JSP 1. Introduction 15 2. Rappels sur la notion d'application web 15 2.1 Éléments constitutifs d'une application 15 2.2 Vie d'une application 16 3. Les servlets 16 3.1 Présentation

Plus en détail

Développement Web Introduction générale

Développement Web Introduction générale 1 / 58 Développement Web Introduction générale Jean-Michel Richer jean-michel.richer@univ-angers.fr http://www.info.univ-angers.fr/pub/richer Juillet 2008 2 / 58 Plan Plan 1 Introduction 2 Historique et

Plus en détail

Programmation Web. Introduction

Programmation Web. Introduction Programmation Web Introduction 1 Introduction 10 séances 1 h cours + 1h TD Notes : contrôle continu DS 1 TP : note de groupe : rapport + code source + démo TD : note personnelle (=0 si 2 absences non justifiées)

Plus en détail

CHAPITRE 1. Introduction aux web services. 1.1 Définition. Contenu du chapitre : Env. De dev. Langage Visual Studio Java EE Qt Creator C#

CHAPITRE 1. Introduction aux web services. 1.1 Définition. Contenu du chapitre : Env. De dev. Langage Visual Studio Java EE Qt Creator C# CHAPITRE 1 Introduction aux web services Contenu du chapitre : Env. De dev. Langage Visual Studio Java EE Qt Creator C# NetBeans JavaScript Eclipse Objective C Xcode PHP HTML Objectifs du chapitre : Ce

Plus en détail

Architectures et Web

Architectures et Web Architectures et Web Niveaux d'abstraction d'une application En règle générale, une application est découpée en 3 niveaux d'abstraction : La couche présentation ou IHM (Interface Homme/Machine) gère les

Plus en détail

TP réseaux 4 : Installation et configuration d'un serveur Web Apache

TP réseaux 4 : Installation et configuration d'un serveur Web Apache TP réseaux 4 : Installation et configuration d'un serveur Web Apache Objectifs Installer, configurer, lancer et administrer le serveur Web Apache sous Linux Données de base machine fonctionnant sous Linux

Plus en détail

Documentation de CMS-gen

Documentation de CMS-gen Table des matières GÉNÉRALITÉ... 1 LA ZONE D'ADMINISTRATION... 2 LOGIN SUR LA ZONE D ADMINISTRATION... 2 EDITION DU CONTENU EN LIGNE... 3 LE MODE EDITION... 3 PUBLICATION... 3 SUPPRIMER DES MODIFICATIONS...

Plus en détail

Automatisation de l administration système

Automatisation de l administration système Automatisation de l administration système Plan Problèmatique : trop de systèmes, trop de solutions Typage des solutions Puppet : gestion de configuration de systèmes Capistrano : déploiement d applications

Plus en détail

Java EE. Grégory Cuellar, Julien Goullon. 1 er octobre 2007. gregory.cuellar@bull.net. julien.goullon@9business.fr

Java EE. Grégory Cuellar, Julien Goullon. 1 er octobre 2007. gregory.cuellar@bull.net. julien.goullon@9business.fr Grégory Cuellar Julien Goullon gregory.cuellar@bull.net julien.goullon@9business.fr 1 er octobre 2007 1 Généralité 2 / 54 Pourquoi? Historique Les alternatives Les composants 2 Architecture n-tiers 3 JEE

Plus en détail

Tutoriel d'utilisation de Wireshark

Tutoriel d'utilisation de Wireshark Tutoriel d'utilisation de Wireshark Ce tutoriel présente les principales fonctions de Wireshark nécessaires à une utilisation basique et se destine principalement à un public néophyte. Nous invitons le

Plus en détail

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

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

Plus en détail

HTML et JavaScript. s1 ----------

HTML et JavaScript. s1 ---------- HTML et JavaScript s1 ---------- Dans cette partie, nous allons introduire le langage JavaScript qui permet de manipuler le document HTML : création ou repositionnement d'éléments de structure, modification

Plus en détail

I La création d'un compte de messagerie Gmail.

I La création d'un compte de messagerie Gmail. Les outils du Cloud Computing #2 Gmail / Google Drive L'exemple des Googles Documents & Googles formulaires Un pas à pas pour faire connaissance avec les services google. I La création d'un compte de messagerie

Plus en détail

Aide Utilisateur. Cellpass.fr

Aide Utilisateur. Cellpass.fr Aide Utilisateur Mise en place simple :... 2 Création d une ressource... 2 Installation du module... 5 Test fonction file OK... 7 temps de connexion < 1 seconde(s)... 7 Exemple d'installation PassUp pour

Plus en détail

TP réseau Android. Bidouilles Tomcat. a) Installer tomcat : il suffit de dézipper l'archive apache-tomcat-8.0.15-windowsx64.zip.

TP réseau Android. Bidouilles Tomcat. a) Installer tomcat : il suffit de dézipper l'archive apache-tomcat-8.0.15-windowsx64.zip. TP réseau Android Ce TP utilise tomcat 8, sous windows et des.bat windows. On peut trouver ce serveur web et conteneur d'applications web à http://tomcat.apache.org/download-80.cgi. Il se trouve dans l'archive

Plus en détail

25 mars. Tutoriel sur Laravel. Préparé par : Lydiane Beaulne-Bélisle. Ceci est un tutorial qui montre comment débuter avec le Framework PHP Laravel.

25 mars. Tutoriel sur Laravel. Préparé par : Lydiane Beaulne-Bélisle. Ceci est un tutorial qui montre comment débuter avec le Framework PHP Laravel. 25 mars Tutoriel sur Laravel Préparé par : Lydiane Beaulne-Bélisle Ceci est un tutorial qui montre comment débuter avec le Framework PHP Laravel. Créé pour le cours de Projet de fin d étude Collège de

Plus en détail

Cahier de charges (Source : "Java EE - Guide de développement d'applications web en Java" par Jérôme Lafosse) Module. Site Web dynamique JSP / Servlet

Cahier de charges (Source : Java EE - Guide de développement d'applications web en Java par Jérôme Lafosse) Module. Site Web dynamique JSP / Servlet Cahier de charges (Source : "Java EE - Guide de développement d'applications web en Java" par Jérôme Lafosse) Module Site Web dynamique JSP / Servlet Sujet : betaboutique Soutenance le 04 / 01 /2013 &

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

Programme «Analyste Programmeur» Diplôme d état : «Développeur Informatique» Homologué au niveau III (Bac+2) (JO N 176 du 1 août 2003) (34 semaines)

Programme «Analyste Programmeur» Diplôme d état : «Développeur Informatique» Homologué au niveau III (Bac+2) (JO N 176 du 1 août 2003) (34 semaines) Programme «Analyste Programmeur» Diplôme d état : «Développeur Informatique» Homologué au niveau III (Bac+2) (JO N 176 du 1 août 2003) (34 semaines) Module 1 : Programmer une application informatique Durée

Plus en détail

TD4 : Wikis, Servlets & Projet

TD4 : Wikis, Servlets & Projet Université Bordeaux 1 T.D. License 3 Informatique 2007 2008 TD4 : Wikis, Servlets & Projet L objet de cette séance est de vous familiariser avec les sockets et les servlets, et d introduire le projet.

Plus en détail

Architecture Logicielle

Architecture Logicielle Architecture Logicielle Chapitre 3: UML pour la description et la documentation d une architecture logicielle Année universitaire 2013/2014 Semestre 1 Rappel L architecture d un programme ou d un système

Plus en détail

Formation Webase 5. Formation Webase 5. Ses secrets, de l architecture MVC à l application Web. Adrien Grand Centrale Réseaux

Formation Webase 5. Formation Webase 5. Ses secrets, de l architecture MVC à l application Web. Adrien Grand <jpountz@via.ecp.fr> Centrale Réseaux Formation Webase 5 Ses secrets, de l architecture MVC à l application Web Adrien Grand Centrale Réseaux Sommaire 1 Obtenir des informations sur Webase 5 2 Composants de Webase 5 Un

Plus en détail