Framework EHop/Ecenvir

Historique Client-Serveur Quelques clients connus Client Lourd Client HTML/CSS/JS Léger puis de plus en plus lourd Potentiellement des millions de clients inconnus Réseau internet 1 connexion par requête Protocole HTTP Réseau privé 1 connexion par client Langage SQL Serveur HTTP (apache) Langage php, java… BDD Réseau privé 1 connexion par requête (avec gestion de pool éventuelle) Langage SQL BDD

Client-Serveur EHop/Ecenvir IHM (browser) Toute l’IHM (client) est chargée en une fois. Javascript est le langage de programmation HTML/CSS est le langage de description HTML/CSS Bootstrap http://getbootstrap.com/ http://knockoutjs.com/ Javascript KnockoutJS JQuery Les données sont chargées à la demande. Les échanges sont le plus souvent en JSON. Réseau CHU Echange en JSON wiki_json Serveur (unix) Le serveur présente une API au client Cette API est programmée en PHP PHP-Silex (symfony) BDD MySQL ou Oracle

L’application (1) Authentification Toute l’IHM d’authentification https://127.0.0.1/ecenvir_current/auth Toute l’IHM d’authentification est chargée en une fois. C’est une page HTML-CSS-JS (C’est une vue pour le modèle MVC habituel) Une fois chargée L’IHM est initialisée (linkage HTML-knockout) On peut alors l’utiliser Les échanges avec le serveur sont en JSON Si la connexion est validée une redirection vers une autre IHM est effectuée.

L’application (2) IHM Admin Toute l’IHM d’administration https://127.0.0.1/ecenvir_current/admin Toute l’IHM d’administration est chargée en une fois. Elle est différente de l’IHM de d’authentification (C’est une autre vue pour le modèle MVC habituel) Les échanges avec le serveur sont en JSON

L’application (3) IHM Admin L’onglet Formation User est vide https://127.0.0.1/ecenvir_current/admin L’onglet Formation User est vide Comment ajouter une fonctionnalité ?

Ajout d’une liste d’utilisateurs (0) Les fichiers impactés Création d’un bouton de chargement Affichage de la liste des utilisateurs E:\christian_merour\ecenvir\current\web\component\Admin\TabFormationUser.html Gestion du click du bouton de chargement Appel HTTP-AJAX Utilisation du retour JSON E:\christian_merour\ecenvir\current\web\component\Admin\TabFormationUser.js Réception de l’appel HTTP-AJAX retour en JSON Appel du service utilisateur E:\christian_merour\ecenvir\current\src\Ecenvir\Ctrl\AdminAjaxCtrl.php Appel SQL en BDD sur la table des utilisateurs E:\christian_merour\ecenvir\current\src\Ecenvir\Service\UserService.php http://getbootstrap.com/ http://knockoutjs.com/ http://knockoutjs.com/ http_foundation doctrine-dbal

Ajout d’une liste d’utilisateurs (1) HTML E:\christian_merour\ecenvir\current\web\component\Admin\TabFormationUser.html Utilisation de bootstrap pour le choix des classes CSS Utilisation de knockout pour la liaison javascript

Ajout d’une liste d’utilisateurs (2) javascript E:\christian_merour\ecenvir\current\web\component\Admin\TabFormationUser.js Le lien entre le fichier html et js est assuré par knockout Appel Ajax/JSON

Ajout d’une liste d’utilisateurs (3) JSON Url d’appel : https://127.0.0.1/ecenvir_current/adminAjax/getListUser https://127.0.0.1/ecenvir_current/Ecenvir_Ctrl_AdminAjaxCtrl/getListUser Retour json : [ {"id":"4","login":"user_3","firstname":"Christian","lastname":"MEROUR"}, {"id":"3","login":"user_2","firstname":"Christian","lastname":"MEROUR"}, {"id":"2","login":"user_1","firstname":"Christian","lastname":"MEROUR"}, {"id":"1","login":"root","firstname":"Christian","lastname":"MEROUR"} ]

Ajout d’une liste d’utilisateurs (4) Controleur Url d’appel : Rôle : https://127.0.0.1/ecenvir_current/adminAjax/getListUser https://127.0.0.1/ecenvir_current/Ecenvir_Ctrl_AdminAjaxCtrl/getListUser Présentation de l’API (Ce que voit le client) Vérification des droits d’accès Extraction des données de la requête Appels aux services Gestion du la mise en forme du retour Fichier php : E:\christian_merour\ecenvir\current\src\Ecenvir\Ctrl\AdminAjaxCtrl.php

Ajout d’une liste d’utilisateurs (5) Service Fichier php : E:\christian_merour\ecenvir\current\src\Ecenvir\Service\UserService.php Rôle : Donne des services aux Contrôleurs Accède à la base de Données Effectue des traitements métier lourds

Les fichiers (1) Configuration Répertoire : E:\christian_merour\ecenvir\current\config Un répertoire de configuration par environnement Initialise les objets principaux de l’application (fait le new object) Loggeur Service Connexion BDD … Déclaration du routage des requêtes HTTP

Les fichiers (2) Le Serveur Répertoires : Les contrôleurs (API HTTP) E:\christian_merour\ecenvir\current\src\Ecenvir\Ctrl\ E:\christian_merour\ecenvir\current\src\Ecenvir\Service\ E:\christian_merour\ecenvir\current\src\Ecenvir\Support\ Les contrôleurs (API HTTP) Les services Code métier Accès BDD Les outils

Les fichiers (3) L’IHM (1) Répertoire des vues HTML : E:\christian_merour\ecenvir\current\views\ Une vue par type d’IHM client Rôle : Charger tout le code nécessaire à l’IHM. Contient donc tout le code des composants.

Les fichiers (4) L’IHM (2) Répertoire des composants HTML-JS : E:\christian_merour\ecenvir\current\web\componant\ Un répertoire par vue d’IHM Un couple de fichier HTML-JS par composant Le fichier HTML donne le design Le fichier JS donne le comportement Les composants peuvent utiliser d’autres composants. Au final ils constituent l’IHM.

Les fichiers (5) Les Librairies Répertoires E:\christian_merour\ecenvir\current\vendor\ E:\christian_merour\ecenvir\current\web\lib\ Répertoire var n’est pas source-contrôlé Contient les logs, les exports Répertoire vendor administré par Composer Contient les dépendances PHP Le répertoire web est accessible directement par l’IHM Répertoires communs pour l’IHM Répertoire lib administré manuellement Contient les dépendances js-css Fichier Composer pour administrer le répertoire vendor

Les outils du projet (1) Composer, Gestionnaire de dépendances https://getcomposer.org/ Site web du repository principal de composer https://packagist.org/ SVN, Gestionnaire de versions des sources https://subversion.apache.org/ Tortoise, Client SVN https://tortoisesvn.net/downloads.html Serveur http Apache https://httpd.apache.org/ Moteur Php http://php.net/ Moteur HTML/CSS/Javascript https://developer.mozilla.org/fr/docs/Learn/HTML https://developer.mozilla.org/fr/docs/Learn/CSS https://developer.mozilla.org/fr/docs/Web/JavaScript

Les outils du projet (2) Laragon Environnement intégré LAMP pour développer Contient : Apache, PHP, MySQL, Composer, GitBash, NodeJS… https://laragon.org/ Netbean, Editeur de projets PHP et Java https://netbeans.org/downloads/ NotePad++, Editeur de texte et de code https://notepad-plus-plus.org/fr/ Client FTP, FileZilla https://filezilla-project.org/ Putty, Client ssh http://www.putty.org/ MySQL workbench, outil de gestion de base de données MySQL (Client lourd en java) https://www.mysql.com/fr/products/workbench/ Phpmyadmin, outil de gestion de base de données MySQL (Client léger PHP) https://www.phpmyadmin.net/

Les outils du projet (3) Jira, gestion des tickets https://fr.atlassian.com/

Les outils de l’IHM Outils principaux Outils secondaires Bootstrap Design HTML-CSS http://getbootstrap.com/ knockoutjs Linkage HTML-Javascript http://knockoutjs.com/ Manipulation HTML https://jquery.com/ Gestion de tableaux https://datatables.net/ Gestion de graphs http://www.chartjs.org/ Gestion des collections https://lodash.com/ Manipulation de date https://momentjs.com/ Gestion d'icones (compatible Bootstrap) http://fontawesome.io/

Les outils du serveur Silex, Framework Principal, routage des requêtes (micro-framework symfony) https://silex.sensiolabs.org/ Pimple, Gestionnaire de dépendances (IOC/configuration) https://pimple.sensiolabs.org/ symfony/templating, Gestionnaire de template simple php (Partie Vue de MVC) http://symfony.com/doc/current/components/templating.html Wrapper HTTP symfony/http-foundation http://symfony.com/doc/current/components/http_foundation.html Wrapper DB doctrine/dbal http://docs.doctrine-project.org/projects/doctrine-dbal/en/latest/ Logueur monolog https://seldaek.github.io/monolog/ Wrapper smtp http://swiftmailer.org/ Wrapper ldap http://symfony.com/doc/current/components/ldap.html

Autres outils intéressants (Non utilisés car double emploi) Gestion des collections javascript (détrôné par lowdash) http://underscorejs.org/ MVC javascript http://backbonejs.org/ Linkage HTML-Javascript orienté composants https://vuejs.org/ https://facebook.github.io/react/ ExtJS, Système intégré de création d'IHM https://www.sencha.com/products/extjs Dojo, Système intégré de création d'IHM https://dojotoolkit.org/ Linkage HTML-Javascript https://angularjs.org/ Linkage HTML-Typescript (orienté composants) https://angular.io/ Gestion de dépendances http://requirejs.org/ Gestion de graphs https://d3js.org/ MVC node.js https://emberjs.com/ Le langage typescript https://www.typescriptlang.org/