Developpez.com - Rubrique PHP

Le Club des Développeurs et IT Pro

Introduction à PHP 7, ECMASCRIPT 6 et VUE.JS par l'exemple,

Un tutoriel de Serge Tahé

Le 2019-10-10 14:31:18, par Serge Tahé, Expert éminent
Bonjour,

J'ai mis à l'URL https://tahe.developpez.com/tutoriel...ascript6-vuejs un cours intitulé [Introduction à PHP 7, ECMASCRIPT 6 et VUE.JS par l'exemple]. Il remplace un document paru en juillet 2019 [Introduction au langage PHP 7 par l'exemple]. Ce document est toujours disponible.

[Introduction à PHP 7, ECMASCRIPT 6 et VUE.JS par l'exemple] reprend la totalité du document précédent [Introduction au langage PHP 7 par l'exemple] et lui ajoute plusieurs chapitres présentant le langage JavaScript dans sa version la plus récente ECMAScript 6 ainsi que le framework Vue.js qui permet d’écrire des clients JavaScript exécutés par un navigateur et dialoguant avec des serveurs. Le but est d'écrire une application SPA (Single Page Application) de type client / serveur où le client serait écrit en ECMAScript 6 avec le framework Vue.js et le serveur serait l'un des serveurs développés dans la partie PHP 7.

[Introduction au langage PHP7 par l’exemple] présente les concepts PHP7 suivants :

chap 3 : les bases du langage ;
chap 5 : les classes ;
chap 6 : les interfaces ;
chap 7 : les exceptions et erreurs ;
chap 9 : les traits ;
chap 10 : applications en couches ;
chap 12 : utilisation du SGBD MySQL ;
chap 16 : programmation internet (HTTP, SMTP, POP, IMAP) ;
chap 17 : services web jSON, XML ;
chap 21 : XML ;

Ces chapitres constituent le cours PHP 7 proprement dit. Ils sont illustrés par 13 versions d’une application de calcul d’impôt qui sert de fil rouge à tout le document. Alors que le cours est illustré par des scripts simples, l’exercice d’application met en œuvre des concepts de plus en plus avancés qui font l’intérêt premier de ce document :

chap 4 : versions 1 et 2, implémentation du calcul d’impôt avec des scripts PHP procéduraux classiques ;
chap 8 : version 3, implémentation du calcul d’impôt avec des classes et l’héritage de classes ;
chap 11 : version 4, implémentation du calcul d’impôt avec une architecture en couches [main, métier, dao], des classes et interfaces pour implémenter chaque couche. On introduit ici la notion de programmation par interfaces qui sera conservée dans toutes les versions qui suivent ;
chap 13 : version 5, implémentation du calcul d’impôt avec une architecture en couches [main, métier, dao] et une base de données MySQL. On montre ici que si l’architecture en couches de la version précédente a été bien conçue, alors le changement de couche [dao] se fait sans impact sur les deux autres couches [main, métier] ;
chap 14 et 15 : versions 6 et 7, implémentation du calcul d’impôt avec une architecture en couches et une base de données PostgreSQL. On montre ici que le changement de SGBD se fait quasiment sans impact sur les couches [main, métier, dao], ceci parce que la couche [dao] est isolée du SGBD par la couche [PDO] du SGBD. Changer de SGBD revient à changer la couche [PDO] ;
chap 18 et 19 : versions 8 et 9, implémentation du calcul d’impôt avec une architecture client / serveur jSON et une base de données. Grosso modo, les couches [main, métier, dao, PDO] de l’architecture précédente migrent sur un serveur en une architecture [web, métier, dao, PDO] et côté client on implémente de nouveau une architecture en couches [client, dao] destinée à dialoguer avec le serveur ;
chap 20 : version 10, implémentation du calcul d’impôt avec une architecture client / serveur jSON, une base de données et un serveur de cache Redis. On réutilise l’architecture précédente en y ajoutant un serveur de cache Redis qui permet à l’application serveur d’avoir une mémoire de portée [Application] (commune à tous les utilisateurs), ce que PHP n’a pas nativement*;
chap 22 : version 11, implémentation du calcul d’impôt avec une architecture client / serveur XML, une base de données et un serveur de cache Redis. L’architecture est identique à la précédente, mais le serveur envoie du XML plutôt que du jSON ;
chap 23 : version 12, implémentation du calcul d’impôt avec une architecture web MVC (Model – View – Controller), une base de données et un serveur de cache Redis. Le serveur produit indifféremment et à la demande un flux jSON, XML ou HTML. On réutilise l’architecture précédente [web, métier, dao], mais là où la couche [web] était implémentée par un unique script, ici elle est structurée en architecture MVC (Modèle – Vue – Contrôleur) ;
chap 24 : la version 13 est une variante sécurisée de la version 12 ;

[Introduction à PHP 7, ECMASCRIPT 6 et VUE.JS par l'exemple] ajoute les chapitres suivants :

chap 25 : Introduction à ECMAScript 6 à l’aide de courts scripts :
  • les bases ;
  • les tableaux ;
  • les objets littéraux ;
  • les chaînes de caractères ;
  • les expression régulières ;
  • les fonctions ;
  • les erreurs et exceptions ;
  • les modules ES6 ;
  • programmation événementielle et fonctions asynchrones ;
  • les fonctions HTTP ;
  • les classes ;


chap 26 : on y construit trois clients HTTP JavaScript du serveur de calcul d’impôt. Deux sont exécutés sous [node.js] et un dans un navigateur ;
chap 27 : introduction au framework [Vue.js]. Cette introduction est faite avec de courts projets d’illustration d’une ou de plusieurs caractéristiques du framework :
  • les bases ;
  • utilisation du framework CSS Bootstrap ;
  • gestion des événements ;
  • directives [v-model, v-bind] ;
  • directive [v-for] ;
  • mise en page d’une vue avec des slots ;
  • remontée d’événements dans la hiérarchie des composants ;
  • événements indépendants de la hiérarchie des composants ;
  • création d’un plugin ;
  • requêtes HTTP asynchrones ;
  • routage et navigation
  • gestion des tables HTML ;
  • mise à jour d’un composant - utilisation d’une session ;
  • utilisation du plugin [Vuex] ;


chap 28 : écriture d’un client [Vue.js] d’une version 14 du serveur PHP 7 de calcul de l’impôt ;
chap 29 : diverses améliorations du client [Vue.js] ;

Le document est destiné à des personnes de niveau débutant ou intermédiaire en PHP, JavaScript ou Vue.js. Tout y est expliqué et détaillé.

Le document utilise divers outils :

• [Netbeans 11] (mars 2019) pour le développement des applications PHP ;
• [Laragon 4] qui amène avec lui : un serveur Apache 2.4, un SGBD MySQL 5.7, un interpréteur PHP7.2, un serveur de cache REDIS, un terminal, l’outil [composer] pour importer des bibliothèques PHP tierces ;
• le SGBD [PostgreSQL 11] ;
• [Postman] qui permet d’écrire des requêtes HTTP pour interroger un serveur jSON, XML, HTML ;
• diverses bibliothèques PHP :
  • Symfony SwiftMailer : pour envoyer des mails ;
  • Symfony HttpClient : pour implémenter le client dans une architecture client / serveur ;
  • Symfony HttpFoundation : pour implémenter le serveur dans une architecture client / serveur ;
  • Symfony Serializer : pour sérialiser en jSON, XML, CSV divers objets PHP ;
  • Predis : un client pour le serveur REDIS ;
  • php-mime-mail-parser : pour lire des boîtes à lettres ;


Visual Studio Code, Node.js, Npm pour le développement JavaScript ;
• la bibliothèque [@vue-cli] pour le développement Vue.js

Bonne lecture à tous.

Serge Tahé, octobre 2019
  Discussion forum
8 commentaires
  • MaitrePylos
    Modérateur
    Merci....pour l'ensemble du travail.
  • gabriel21
    Membre chevronné
    Merci pour ce splendide cours.
    Je l'ai commencé en septembre et je ne suis qu'au chapitre 3.6.
    Cela fait un joli complément.
  • novembrezoulou
    Membre du Club
    Bonsoir,
    Malgré mes diverses tentatives (et réinstallations de Laragon), je ne trouve pas le répertoire "vendor"
    j'ai installé la version 4.0.15 190704 qui, je pense, est la dernière.
    Faut-il télécharger "vendor" ailleurs ?
    Merci et encore bravo pour ce travail partagé gracieusement.
    Claude_NZ
  • novembrezoulou
    Membre du Club
    Envoyé par gabriel21
    Merci pour ce splendide cours.
    Je l'ai commencé en septembre et je ne suis qu'au chapitre 3.6.
    Cela fait un joli complément.
    Bonjour,
    Où avez-vous trouvé le dossier "vendor" ?
    Merci !
    NovembreZoulou
  • Serge Tahé
    Expert éminent
    Envoyé par novembrezoulou
    Bonjour,
    Où avez-vous trouvé le dossier "vendor" ?
    Merci !
    NovembreZoulou
    Bonjour,

    Excusez le retard de ma réponse. Curieusement je n'ai pas été averti de votre question alors que je suis abonné à ce forum. [vendor] est un dossier du serveur développé dans la partie PHP7. Si vous me dites où vous avez trouvé cette erreur dans le document (absence de précision sur vendor), je la corrigerai.

    Cordialement,

    st
  • novembrezoulou
    Membre du Club
    Envoyé par Serge Tahé
    Bonjour,

    Excusez le retard de ma réponse. Curieusement je n'ai pas été averti de votre question alors que je suis abonné à ce forum. [vendor] est un dossier du serveur développé dans la partie PHP7. Si vous me dites où vous avez trouvé cette erreur dans le document (absence de précision sur vendor), je la corrigerai.

    Cordialement,

    st
    Bonsoir,
    Dans votre document (daté d'octobre 2019 - page 21, dernier alinéa) vous parlez de "[[laragon-lite]>/www/vendor]", et c'est ce dossier que je n'ai pas trouvé. Du coup, j'ai provisoirement abandonné netbeans faute de pouvoir le configurer conformément. (une intallation récente sur un nouvel ordi n'y a rien changé...)
    En cherchant dans l'arborescence de laragon, j'ai, aujourd'hui, trouvé 2 dossiers "vendor" : laragon/bin/cmder/vendor et laragon/etc/apps/phpRedisAdmin/vendor, mais ni l'un ni l'autre ne contiennent les dossiers présents sur la copie d'écran précédent l'alinéa précité.
    Peut-être ai-je mal interprété quelque chose car le développement n'est pas mon métier, juste un hobby parmi bien d'autres...
    Merci de m'avoir répondu.
    Cordialement
  • Serge Tahé
    Expert éminent
    Envoyé par novembrezoulou 
    Bonsoir,
    Dans votre document (daté d'octobre 2019 - page 21, dernier alinéa) vous parlez de "[<laragon-lite>/www/vendor]", et c'est ce dossier que je n'ai pas trouvé. Du coup, j'ai provisoirement abandonné netbeans faute de pouvoir le configurer conformément. (une intallation récente sur un nouvel ordi n'y a rien changé...)
    En cherchant dans l'arborescence de laragon, j'ai, aujourd'hui, trouvé 2 dossiers "vendor" : laragon/bin/cmder/vendor et laragon/etc/apps/phpRedisAdmin/vendor, mais ni l'un ni l'autre ne contiennent les dossiers présents sur la copie d'écran précédent l'alinéa précité.
    Peut-être ai-je mal interprété quelque chose car le développement n'est pas mon métier, juste un hobby parmi bien d'autres...
    Merci de m'avoir répondu.
    Cordialement

    ==========
    Oui vous avez raison. C'est un oubli de ma part. J'ai refait une archive [https://tahe.developpez.com/tutoriel...ipt6-vuejs.rar] dans laquelle j'ai mis une archive [php7-vendor.rar] qui contient le dossier [vendor] qui vous manque. Mettez-le ensuite au bon endroit comme le montrent les copies d'écran du document.

    Cordialement,

    Serge Tahé
  • novembrezoulou
    Membre du Club
    Merci de l’ajout de ce dossier.
    Je n'ai plus qu'à me mettre au travail !
    Encore merci pour ce partage.
    Cordialement
    NovembreZoulou