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

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

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

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

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

Veille technologique Symfony 2

Veille technologique Symfony 2 Veille technologique Symfony 2 Introduction : Symfony2 est un Framework PHP en MVC qui a pour objectif d'accélérer les développements. Il impose également un certain nombre de bonne pratique à respecter

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

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

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

Introduction au Makefile

Introduction au Makefile Introduction au Makefile Nicolas Kielbasiewicz 3 mars 2009 Le développement d un programme et plus généralement d un logiciel demande au(x) programmeur(s) de gérer plusieurs fichiers, voire plusieurs langages.

Plus en détail

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

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

Plus en détail

Java pour le Web. Cours Java - F. Michel

Java pour le Web. Cours Java - F. Michel Java pour le Web Cours Java - F. Michel Introduction à JEE 6 (ex J2EE) Historique Qu'est-ce que JEE JEE : Java Entreprise Edition (ex J2EE) 1. Une technologie outils liés au langage Java + des spécifications

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

Tutoriel Ionic framework

Tutoriel Ionic framework INGÉNIEURS EN SCIENCES INFORMATIQUES ADAPTATION DES INTERFACES A L ENVIRONNEMENT Tutoriel Ionic framework Tutoriel et présentation du framework IONIC : technologie permettant la réalisation d applications

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

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

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

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

Création d un catalogue en ligne

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

Plus en détail

Déploiement d'une base SQL Express

Déploiement d'une base SQL Express Déploiement d'une base SQL Express Comment déployer une base avec SQL Express Après l'article sur le déploiement d'une application ASP.NET, il fallait aborder la partie concernant les données. Ainsi, nous

Plus en détail

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

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

Plus en détail

TP 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

CHAPITRE 1 PREMIERS PAS. Créer un premier projet... 17 Écrire un programme... 18 Compiler, exécuter... 20 Mieux comprendre... 22

CHAPITRE 1 PREMIERS PAS. Créer un premier projet... 17 Écrire un programme... 18 Compiler, exécuter... 20 Mieux comprendre... 22 CHAPITRE 1 PREMIERS PAS Créer un premier projet... 17 Écrire un programme... 18 Compiler, exécuter... 20 Mieux comprendre... 22 15 1.1. Créer un premier projet Pour commencer, lancez Visual Basic Express.

Plus en détail

Groupe Eyrolles, 2003, ISBN : 2-212-11317-X

Groupe Eyrolles, 2003, ISBN : 2-212-11317-X Groupe Eyrolles, 2003, ISBN : 2-212-11317-X 3 Création de pages dynamiques courantes Dans le chapitre précédent, nous avons installé et configuré tous les éléments indispensables à la mise en œuvre d une

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

Comment faire pour créer un site web? (mon site, pas à pas)

Comment faire pour créer un site web? (mon site, pas à pas) Comment faire pour créer un site web? (mon site, pas à pas) Author : soufiane Bonjour, Bienvenue dans cette nouvelle série de tutoriels destinée aux débutants cherchant comment créer un site web de A à

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

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

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

Développement WEB en JAVA avec le Framework. Antoine CHAUVIN IR3 22 janvier 2013

Développement WEB en JAVA avec le Framework. Antoine CHAUVIN IR3 22 janvier 2013 Développement WEB en JAVA avec le Framework Antoine CHAUVIN IR3 22 janvier 2013 I) Historique II) Qu est ce que PLAY III) Les grands concepts IV)Développer en java avec PLAY Framework PLAY Antoine CHAUVIN

Plus en détail

LES SCRIPTS CGI. Présentation Mise en œuvre La programmation Les variables d environnement

LES SCRIPTS CGI. Présentation Mise en œuvre La programmation Les variables d environnement LES SCRIPTS CGI Présentation Mise en œuvre La programmation Les variables d environnement LES SCRIPTS CGI Présentation Mise en œuvre La programmation Les variables d environnement OBJECTIFS Historiquement,

Plus en détail

Création d un module Joomla! de base

Création d un module Joomla! de base Création d un module Joomla! de base Création de votre premier module Un module utile : la capsule 1 Qui suis-je? Développeur web depuis 2004 Artisan du Web chez IN CODE www.incode.be Sites internet essentiellement

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

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

T A B L E A U X D O B J E T S E T D A T A B I N D I N G

T A B L E A U X D O B J E T S E T D A T A B I N D I N G T A B L E A U X D O B J E T S E T D A T A B I N D I N G L AUTEUR DE CE TUTORIEL Dominique DAUSSY 3 Place de la Galaxie 76400 TOUSSAINT Mail : daussy.dominique@orange.fr Web : http://dominique-daussy.fr

Plus en détail

RÉSUMÉ DU TRAVAIL DE DIPLÔME

RÉSUMÉ DU TRAVAIL DE DIPLÔME Filière d'informatique de gestion Travail de diplôme ÉTUDE ORACLE XE & APEX RÉSUMÉ DU TRAVAIL DE DIPLÔME AUTEUR: BRUNO DA COSTA RESPONSABLE DU PROJET: FABRICE CAMUS MANDANT: LABORATOIRE DE GÉNIE LOGICIEL

Plus en détail

Guide d intégration. Protection de logiciels LABVIEW avec CopyMinder. Contact Commercial : Tél. : 02 47 35 70 35 Email : com@aplika.

Guide d intégration. Protection de logiciels LABVIEW avec CopyMinder. Contact Commercial : Tél. : 02 47 35 70 35 Email : com@aplika. Guide d intégration Protection de logiciels LABVIEW avec CopyMinder Contact Commercial : Tél. : 02 47 35 70 35 Email : com@aplika.fr Contact Technique : Tél. : 02 47 35 53 36 Email : support@aplika.fr

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

Validation de la création des groupes ABM et ajout de l utilisateur SASDEMO

Validation de la création des groupes ABM et ajout de l utilisateur SASDEMO COMMENT VALIDER VOTRE INSTALLATION SAS ACTIVITY-BASED MANAGEMENT 7.2? Vous venez d installer SAS Activity-Based Management 7.2. Ce document va vous aider à valider votre installation. Il pourra également

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

MINI-MÉMOIRE DE PPP - S4

MINI-MÉMOIRE DE PPP - S4 MINI-MÉMOIRE DE PPP - S4 Par [OUAZAR ARIS-ARAB] [S4-G2] [AYME OLIVIA] TABLE DES MATIÈRES ANALYSE DE L ENTREPRISE # PRESENTATION DE L ENTREPRISE # LISTE ET DESCRIPTION DES DIFFERENTS METIERS REPRESENTES

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

Installation de Windows 2012 Serveur

Installation de Windows 2012 Serveur Installation de Windows 2012 Serveur Introduction Ce document n'explique pas les concepts, il se contente de décrire, avec copies d'écran, la méthode que j'utilise habituellement pour installer un Windows

Plus en détail

Projet WAVES : Des flux de données brutes et hétérogènes à l information qualifiée N du contrat F1411006 Q Date de début 2 juin 2014 Durée 36 mois

Projet WAVES : Des flux de données brutes et hétérogènes à l information qualifiée N du contrat F1411006 Q Date de début 2 juin 2014 Durée 36 mois Projet WAVES : Des flux de données brutes et hétérogènes à l information qualifiée N du contrat F1411006 Q Date de début 2 juin 2014 Durée 36 mois Livrable D5.2 Dataset et Datastream Visualisation : Composants

Plus en détail

COMPTE RENDU D ACTIVITE ACTIVITE N 4. Identification (objectif) de l'activité. Contexte dans lequel le projet s'inscrit

COMPTE RENDU D ACTIVITE ACTIVITE N 4. Identification (objectif) de l'activité. Contexte dans lequel le projet s'inscrit BTS INFORMATIQUE DE GESTION Option Administrateur de réseaux Développeur d applications COMPTE RENDU D ACTIVITE ACTIVITE N 4 Nom et Prénom : BUISSON Pierre-Adrien EPSI Lyon 107 rue de Marseille 69 007

Plus en détail

Introduction au développement SharePoint. Version 1.0

Introduction au développement SharePoint. Version 1.0 Introduction au développement SharePoint Version 1.0 Z 2 Introduction au développement SharePoint 09/05/09 Sommaire 1 SharePoint : les bases... 3 1.1 Débuter sous SharePoint... 3 1.2 Connaissances Requises...

Plus en détail

Spécifications techniques. Analyse d une solution de gestion des processus

Spécifications techniques. Analyse d une solution de gestion des processus ACube : module workflow Spécifications techniques Analyse d une solution de gestion des processus Mise en place côté Framework Ergonomique d un composant permettant de piloter l ergonomie selon l avancement

Plus en détail

JACi400 Génération & JACi400 Développement

JACi400 Génération & JACi400 Développement JACi400 Génération & JACi400 Développement Une solution pour développer rapidement des applications WebSphere pour votre iseries directement en RPG ou Cobol. "After spending time with SystemObjects and

Plus en détail

Formulaires Web avec Spring Web MVC

Formulaires Web avec Spring Web MVC Formulaires Web avec Spring Web MVC Spring propose un framework MVC pour faciliter la programmation d applications Web : Spring Web MVC. Au fil des ans ce framework a supplanté Struts pour être à présent

Plus en détail

Sauvegarde des bases SQL Express

Sauvegarde des bases SQL Express Sauvegarde des bases SQL Express Sauvegarder les bases de données avec SQL Express Dans les différents articles concernant SQL Server 2005 Express Edition, une problématique revient régulièrement : Comment

Plus en détail

PPE Installation d un serveur FTP

PPE Installation d un serveur FTP Introduction : Tout au long de ce tutorial nous allons créer un serveur FTP, commençons tout d abord à voir ce qu est un serveur FTP. File Transfer Protocol (protocole de transfert de fichiers), ou FTP,

Plus en détail

Description des pratiques à adopter pour la mise à jour du layout en utilisant le gestionnaire de conception de Sharepoint 2013

Description des pratiques à adopter pour la mise à jour du layout en utilisant le gestionnaire de conception de Sharepoint 2013 Exemple d utilisation du gestionnaire de conception Description des pratiques à adopter pour la mise à jour du layout en utilisant le gestionnaire de conception de Sharepoint 2013 6, rue de l Etang, L-5326

Plus en détail

Transfert de fichiers (ftp) avec dreamweaver cs5 hébergement et nom de domaine. MC Benveniste

Transfert de fichiers (ftp) avec dreamweaver cs5 hébergement et nom de domaine. MC Benveniste Transfert de fichiers (ftp) avec dreamweaver cs5 hébergement et nom de domaine MC Benveniste 2013 Configuration Vous devez au préalable avoir un hébergeur, qui vous aura fourni les codes ftp, le log-in

Plus en détail

Installer SharePoint Foundation 2010 sur Windows 7

Installer SharePoint Foundation 2010 sur Windows 7 Installer SharePoint Foundation 2010 sur Windows 7 Installer SP Foundation 2010 sur Windows Seven Lorsque l'on souhaite développer dans le monde SharePoint, il existe plusieurs solutions. La méthode classique

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

SOUMISSION WEB MANUEL D UTILISATION

SOUMISSION WEB MANUEL D UTILISATION 11/03/11 Version 3 SOUMISSION WEB MANUEL D UTILISATION Conventions utilisées dans le manuel... 1 Introduction... 3 Rôle de l application... 3 Accès à l application... 4 Accès à partir de l imprimante Print2C...

Plus en détail

Création d'un site dynamique en PHP avec Dreamweaver et MySQL

Création d'un site dynamique en PHP avec Dreamweaver et MySQL Création d'un site dynamique en PHP avec Dreamweaver et MySQL 1. Création et configuration du site 1.1. Configuration de Dreamweaver Avant de commencer, il est nécessaire de connaître l'emplacement du

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

Galilée Le cours Zend PHP I : les Fondamentaux (version IBMi/OS) est conçu pour fournir de solides fondations en PHP. Ce cours vous guide à travers les bases de PHP grâce à une approche expérientielle,

Plus en détail

StockMalin l application pour les brocanteurs!

StockMalin l application pour les brocanteurs! StockMalin l application pour les brocanteurs! Conçue en intégralité par Quentin Comte-Gaz StockMalin Gestion de stock/clients/fournisseurs en ligne (2014) 1/15 Sommaire Introduction...3 PARTIE 1 : DESCRIPTION

Plus en détail

WEBMESTRE : CONCEPTION DE SITES ET ADMINISTRATION DE SERVEURS WEB

WEBMESTRE : CONCEPTION DE SITES ET ADMINISTRATION DE SERVEURS WEB WEBMESTRE : CONCEPTION DE SITES ET ADMINISTRATION DE SERVEURS WEB Installation et administration d un serveur web Module 25793 TP A5 (1/2 valeur) Chapitre 17 Internet Information Services (v.5) - Partie

Plus en détail

La MEAN stack. Qu'est-ce qu'une stack?

La MEAN stack. Qu'est-ce qu'une stack? La MEAN stack Jean-Philippe FORESTIER (jpf@osyx.com) http://www.mean-stack.info Qu'est-ce qu'une stack? Une stack est une pile de technologies utilisée pour développer une application web. Une stack peut

Plus en détail

TSI-V5 Manuel d installation

TSI-V5 Manuel d installation TSI-V5 Manuel d installation 1 Sommaire Introduction... 3 Pré-requis... 3 Installation SQL SERVER 2008... 3 Introduction... 3 Installation... 3 Prise en main... 7 Application TSI... 9 Premier démarrage

Plus en détail

Modèle de cahier des charges pour un appel d offres relatif à une solution de gestion des processus métier (BPM)

Modèle de cahier des charges pour un appel d offres relatif à une solution de gestion des processus métier (BPM) LA BOITE A OUTILS DE L ACHETEUR DE BPM Modèle de cahier des charges pour un appel d offres relatif à une solution de gestion des processus métier (BPM) La boîte à outils de l acheteur de solution BPM -

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

LOT03P6 - Domino 8.5 : XPages dans Domino Designer 8.5 - Partie 6

LOT03P6 - Domino 8.5 : XPages dans Domino Designer 8.5 - Partie 6 LOT03P6 - Domino 8.5 : XPages dans Domino Designer 8.5 - Partie 6 Objectifs du développement en 8.5 Fournir un outil de développement moderne Faire pour les développeurs ce que Notes 8 a fait pour l'utilisateur

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

Examen CAR 2 Heures Tout documents autorisés le 17 Novembre 2005

Examen CAR 2 Heures Tout documents autorisés le 17 Novembre 2005 Examen CAR 2 Heures Tout documents autorisés le 17 Novembre 2005 Rappel : Tout méta-modèle ou profil doit être commenté! 1 Question de compréhension du cours barème indicatif : 5 points Q : Lorsque l on

Plus en détail

Le Moteur de Recherche de WSS V3

Le Moteur de Recherche de WSS V3 Le Moteur de Recherche de WSS V3 Installer le moteur de recherche de WSS V3 Parmi les évolutions de Windows SharePoint Services V3, on trouve le moteur de recherche. Nous verrons dans cet article comment

Plus en détail

Introduction à la programmation web

Introduction à la programmation web Introduction à la programmation web Nouvelles Technologies Dr. Thé Van LUONG The-Van.Luong@heig-vd.ch HEIG-VD Switzerland 8 octobre 2015 1/34 8 octobre 2015 1 / 34 Plan 1 État de l art des langages orientés

Plus en détail

KUMARASAMY Sandirane Lemont Jérémy Fruitet Robin FOULARD Aymeric BTS 2 SLAM Compte-rendu PPE03 et PPE04

KUMARASAMY Sandirane Lemont Jérémy Fruitet Robin FOULARD Aymeric BTS 2 SLAM Compte-rendu PPE03 et PPE04 KUMARASAMY Sandirane Lemont Jérémy Fruitet Robin FOULARD Aymeric BTS 2 SLAM Compte-rendu PPE03 et PPE04 Environnement : Ce projet a été réalisé en deuxième année de BTS, il s'agit d'un travail de groupe

Plus en détail

Contexte PPE GSB CR. Analyse. Projet réalisé :

Contexte PPE GSB CR. Analyse. Projet réalisé : Contexte PPE GSB CR Le laboratoire est issu de la fusion entre le géant américain Galaxy et le conglomérat Swiss Bourdin. Cette fusion a eu pour but de moderniser l activité de visite médicale et de réaliser

Plus en détail

Publication (avancée) de données spatiales dans Internet

Publication (avancée) de données spatiales dans Internet Publication (avancée) de données spatiales dans Internet GMT-4152 & GMT-6006 Capsule 3 - Architectures pour le développement d applications sur web Thierry Badard & Frédéric Hubert Université Laval, Dép.

Plus en détail

Travaux pratiques : EJB avec JBoss 5 + Java 6 + Eclipse

Travaux pratiques : EJB avec JBoss 5 + Java 6 + Eclipse Travaux pratiques : EJB avec JBoss 5 + Java 6 + Eclipse Introduction Le but de ce TP est de programmer une application à la norme EJB en utilisant le serveur d application JBoss. Matériel requis - JBoss

Plus en détail

BOOSTEZ MAITRISEZ. votre business en ligne. la qualité de vos données

BOOSTEZ MAITRISEZ. votre business en ligne. la qualité de vos données 3 BOOSTEZ votre business en ligne MAITRISEZ la qualité de vos données J accélère drastiquement le temps de mise en ligne d un nouveau site et je m assure de la qualité de marquage Mon site évolue constamment

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

Automatisation de l'exécution d'un package SSIS sur Microsoft SQL Server 2005

Automatisation de l'exécution d'un package SSIS sur Microsoft SQL Server 2005 Automatisation de l'exécution d'un package SSIS sur Microsoft SQL Server 2005 par Fleur-Anne BLAIN (fablain.developpez.com) Date de publication : 01/04/2008 Dernière mise à jour : 01/04/2008 Ce tutoriel

Plus en détail

TD n 1 : Architecture 3 tiers

TD n 1 : Architecture 3 tiers 2008 TD n 1 : Architecture 3 tiers Franck.gil@free.fr 27/10/2008 1 TD n 1 : Architecture 3 tiers 1 INTRODUCTION Ce TD, se propose de vous accompagner durant l installation d un environnement de développement

Plus en détail

Fonctionnalités de développement

Fonctionnalités de développement 163 Chapitre 5 Fonctionnalités de développement 1. Optimisation des applications ASP.NET Fonctionnalités de développement 1.1 Présentation de ASP.NET ASP.NET est un ensemble de technologies créé par Microsoft

Plus en détail

[CONFIGURATION DE LA LIBRAIRIE WEBUTIL] 2 juillet 2013. CONFIGURATION DE LA LIBRAIRIE WEBUTIL (11g) Oracle Forms 11gR2

[CONFIGURATION DE LA LIBRAIRIE WEBUTIL] 2 juillet 2013. CONFIGURATION DE LA LIBRAIRIE WEBUTIL (11g) Oracle Forms 11gR2 CONFIGURATION DE LA LIBRAIRIE WEBUTIL (11g) Oracle Forms 11gR2 Préparé par Abderrahmane Abed Juillet 2013 Version 1.0 Courriel: aabed@oraweb.ca Site web: www.oraweb.ca Blogue Oracle: http://blogueabedoracle.blogspot.ca/

Plus en détail

Création d un serveur Web Sous Windows 2000 Pro / Server / XP Pro

Création d un serveur Web Sous Windows 2000 Pro / Server / XP Pro Création d un serveur Web Sous Windows 2000 Pro / Server / XP Pro 1 Introduction IIS (Internet information service) est un composant Windows qui prend en charge le service Web (http) et FTP. Le serveur

Plus en détail

Automne 2007, vous démarrez votre premier job chez Kerdiezel.

Automne 2007, vous démarrez votre premier job chez Kerdiezel. PROJET LSI3 A. Contexte projet Automne 2007, vous démarrez votre premier job chez Kerdiezel. Kerdiezel est le leader en France sur la distribution de combustibles auprès des établissements scolaires. La

Plus en détail

Tests de montée en charge d'applications JBoss Seam

Tests de montée en charge d'applications JBoss Seam Tests de montée en charge d'applications JBoss Seam Baptiste CARLIER IUT 'A' de Lille1 Logica Comment réagit une application classique de Seam lors d'une montée en charge? Baptiste CARLIER IUT 'A' de Lille1

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

Installation de SQL Server DENALI CTP3

Installation de SQL Server DENALI CTP3 Installation de SQL Server DENALI CTP3 Au mois de Juillet 2011, Microsoft a mis à la disposition des testeurs volontaires la CTP 3 (Community Technological Preview) du futur moteur SQL Server ayant le

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

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

Démarrage rapide. Protection de logiciels sous MAC avec DinkeyDongle. Contact commercial : Tél. : 02 47 35 70 35 Email : com@aplika.

Démarrage rapide. Protection de logiciels sous MAC avec DinkeyDongle. Contact commercial : Tél. : 02 47 35 70 35 Email : com@aplika. Démarrage rapide Protection de logiciels sous MAC avec DinkeyDongle Contact commercial : Tél. : 02 47 35 70 35 Email : com@aplika.fr Contact Technique : Tél. : 02 47 35 53 36 Email : support@aplika.fr

Plus en détail

Installation / Sauvegarde Restauration / Mise à jour

Installation / Sauvegarde Restauration / Mise à jour Installation / Sauvegarde Restauration / Mise à jour SPIP version 1.8.x Serveur (Linux) Jean Sébastien BARBOTEU dev.jsb@laposte.net Introduction Nous allons aborder tous les aspects techniques liés à la

Plus en détail

BAAN IVc. Guide de l'utilisateur BAAN Data Navigator

BAAN IVc. Guide de l'utilisateur BAAN Data Navigator BAAN IVc Guide de l'utilisateur BAAN Data Navigator A publication of: Baan Development B.V. B.P. 143 3770 AC Barneveld Pays-Bas Imprimé aux Pays-Bas Baan Development B.V. 1997 Tous droits réservés. Toute

Plus en détail

GED MARKETING. Page 1 sur 18

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

Plus en détail

MODULES 3D TAG CLOUD. Par GENIUS AOM

MODULES 3D TAG CLOUD. Par GENIUS AOM MODULES 3D TAG CLOUD Par GENIUS AOM 1 Sommaire I. INTRODUCTIONS :... 3 II. INSTALLATION MANUELLE D UN MODULE PRESTASHOP... 3 III. CONFIGURATION DU MODULE... 7 3.1. Préférences... 7 3.2. Options... 8 3.3.

Plus en détail

CROSS PLATEFORM MOBILE DEVELOPMENT (Phonegap, RhoMobile)

CROSS PLATEFORM MOBILE DEVELOPMENT (Phonegap, RhoMobile) INGENIEUR EN SCIENCES INFORMATIQUES RAPPORT D ETUDE TECHNOLOGIQUE SUR LES SOLUTIONS WEB CROSS PLATEFORM MOBILE DEVELOPMENT (Phonegap, ) Student : Jiachen NIE Parcours: IHM Subject : Adaptation des Interfaces

Plus en détail

BTS Informatique de Gestion (lycée Rostand Chantilly) Initiation au PHP Fiche 5 Floats dynamiques - Page 1. Sommaire

BTS Informatique de Gestion (lycée Rostand Chantilly) Initiation au PHP Fiche 5 Floats dynamiques - Page 1. Sommaire Initiation au PHP Fiche 5 Floats dynamiques - Page 1 FICHE 5 Objectifs : Etre capable de gérer dynamiquement un site. Utiliser la propriété Float et la fonction include( ) Gérer à la fois du XHTML, du

Plus en détail

Gérer des sites avec Dreamweaver

Gérer des sites avec Dreamweaver Gérer des sites avec Dreamweaver La boîte de dialogue Gérer les sites a pour fonction de vous permettre de créer un nouveau site, de modifier, de dupliquer, de supprimer un site, d'importer ou d'exporter

Plus en détail

Offre FlowUnit by CGI Tests automatisés de flux de données inter-applicatifs

Offre FlowUnit by CGI Tests automatisés de flux de données inter-applicatifs Offre FlowUnit by CGI Tests automatisés de flux de données inter-applicatifs CGI Group Inc. 2013 Agenda 1 2 3 4 5 6 7 Problématiques et enjeux Solutions et fonctionnalités Concepts Exécution et rapport

Plus en détail

Le Framework.Net. Introduction. Pourquoi.Net?

Le Framework.Net. Introduction. Pourquoi.Net? Introduction. Pourquoi.Net? Le Framework.Net Cela fait une dizaine d'années que le monde du développement est bouleversé d'une part par la programmation objet et d'autre part par les applications web.

Plus en détail

Process Daemon. Manuel de l utilisateur. Tous droits réservés 2008-2009 BrainBox Technology Inc. Process Daemon

Process Daemon. Manuel de l utilisateur. Tous droits réservés 2008-2009 BrainBox Technology Inc. Process Daemon Manuel de l utilisateur Table des matières 1.0 INTRODUCTION 3 2.0 EXEMPLES D APPLICATIONS 3 3.0 DESCRIPTION DU LOGICIEL 4 4.0 PREMIÈRE UTILISATION 11 5.0 QUESTIONS FRÉQUENTES 15 6.0 SYSTÈME REQUIS 17 Page

Plus en détail