Aller au contenu

Travail pratique

ID : A02-TP02

But du TP

  • Mettre en place un environnement de développement web sur Windows.
  • Rédiger un manuel technique.

Note

Merci de ne pas copier/coller des définitions ou textes issues de Wikipedia ou ChatGPT. Expliquez avec vos propres mots ce que vous avez compris en lisant ces sources ou d'autres.

Travail à réaliser

nginx

  1. Installez le serveur web nginx.

  2. Démarrez nginx et vérifiez son bon fonctionnement en affichant la page web ci-dessous dans votre navigateur web.

    nginx-welcome.png

  3. Ouvrez le fichier principal de configuration de nginx (nginx.conf) et parcourez-le.

Documentation officielle

Fichier hosts

  1. Configurez le nom de domaine api-ti.lan dans le fichier hosts de Windows.
  2. Accédez à l'URL http://api-ti.lan dans votre navigateur web et vérifiez que cela fonctionne.

Questions

  • Comment démarrer et arrêter nginx ?

    • Quelles sont les différentes méthodes ?

  • Comment s'assurer que tous les processus nginx sont bien stoppés ?

    • Quelles sont les différentes méthodes ?

  • Définitions à comprendre et expliquer :

    • loopback
    • 127.0.0.1
    • localhost

  • Dans le fichier de configuration principal de nginx, où est défini le port sur lequel le serveur web reçoit les requêtes des clients ?

  • Où se trouve le fichier sur votre disque dur correspondant à la page web par défaut affichée par nginx ?

    • Où et comment ce chemin d'accès est-il défini dans le fichier de configuration principal de nginx ?
    • Quel est le paramètre de configuration permettant d'afficher automatiquement ce fichier sans préciser son nom dans l'URL ? Expliquez techniquement comment ce paramètre fonctionne au niveau du serveur web.

  • Quel est le rôle du fichier mime.types dans le dossier conf de nginx et comment fonctionne-t-il ?

    • Expliquez techniquement comment ce fichier est utilisé par le serveur web.

PHP

  1. Installez PHP (version NTS).

  2. Créez le fichier de configuration de PHP (php.ini) à partir de l'un des deux modèles fournis dans le répertoire principal de PHP, puis ouvrez-le et parcourez-le.

  3. Configurez nginx et PHP pour qu'ils fonctionnent ensemble.

  4. Créez un fichier info.php dans le répertoire où se trouve la page web par défaut de nginx et ajoutez-y le contenu suivant : <?php phpinfo();.

  5. Affichez cette page en entrant son URL dans votre navigateur web.

    • Vous devriez voir une page web semblable à celle-ci :

    phpinfo.png

  6. Configurez la variable d'environnement PATH de Windows pour pouvoir exécuter PHP CLI (PHP for the Command Line Interface) via l'invite de commandes (CMD) depuis n'importe quel répertoire.

    • Vérifiez que cela fonctionne !
    • Expliquez techniquement comment fonctionne cette variable d'environnement (que se passe-t-il au niveau de l'invite de commandes Windows).

Xdebug

  1. Installez et configurez l'extension PHP Xdebug.

  2. Vérifiez que Xdebug est bien installé et configuré.

  3. Installez une extension dans votre navigateur web pour facilement démarrer une session de debugging.

  4. Créez un fichier test.php dans le répertoire où se trouve la page web par défaut de nginx et ajoutez le contenu suivant : <?php echo 'Debug test';.

  5. Affichez cette page web en entrant son URL dans votre navigateur web.

  6. Activez l'extension de debugging dans votre navigateur web.

    • Vous devriez voir une page web semblable à celle-ci :

    xdebug.png

Questions

  • Quelles sont les différences entre les versions de PHP TS (Thread Safe) et NTS (Non Thread Safe) ?

    • Où trouve-t-on l'information indiquant qu'il faut utiliser la version NTS dans notre cas (en dehors de cette page) ?

  • Quelle est la différence entre les versions x64 et x86 de PHP disponibles sur PHP For Windows ?

  • Quelle commande doit-on entrer dans l'invite de commandes Windows (CMD) pour obtenir la version installée de PHP ?

  • Quelles sont les principales différences entre les fichiers modèles de configuration php.ini-development et php.ini-production ?

    • Pourquoi ces différences ?

Tip

Utilisez la commande fc dans l'invite de commandes Windows (CMD).

Documentation de la commande fc

  • À quoi sert la fonction PHP phpinfo() ?

  • À quoi sert l'extension PHP Xdebug ?

  • Comment vérifier que Xdebug est installé et configuré correctement (et que la configuration est effective) ?

IntelliJ IDEA

  1. Ouvrez IntelliJ IDEA et installez le plugin PHP.

    intellij-idea-plugin-php.png

  2. Sur l'écran d'accueil d'IntelliJ IDEA, cliquez sur "Open" et sélectionnez le répertoire html de nginx.

    intellij-idea-open.png

    intellij-idea-open-html.png

  3. Ouvrez le fichier test.php, ajoutez un point d'arrêt (breakpoint) à la première ligne du fichier en cliquant sur le numéro de ligne, puis démarrez l'écoute des connexions de debugging PHP.

    intellij-idea-debug.png

  4. Dans votre navigateur web, activez l'extension de debugging, puis rafraîchissez la page web test.php.

    • Si tout est correctement configuré, la page web "chargera" indéfiniment dans votre navigateur, et la première ligne de code du fichier test.php sera surlignée en bleu dans IntelliJ IDEA.

    intellij-idea-debug-breakpoint.png

Debugging with PhpStorm

IntelliJ vs PhpStorm

PhpStorm est un IDE spécialisé pour PHP et le développement web, avec des outils PHP prêts à l'emploi (comme CLion pour les langages C et C++). En revanche, IntelliJ IDEA est un IDE polyvalent prenant en charge plusieurs langages, dont PHP via un plugin. Tous ces logiciels sont développés par JetBrains et sont très similaires.

Questions

  • Quelle est l'utilité de pouvoir stopper l'exécution du code à un endroit spécifique grâce aux breakpoints ?

Manuel technique

Rédigez un manuel technique permettant de reproduire à l'identique le travail pratique que vous avez réalisé. Le document devra inclure des explications sur les éléments importants à comprendre, notamment les points abordés dans les sections Questions des parties précédentes.

Directives générales

  • Référencez toutes les sources d'informations utilisées pour réaliser le travail pratique et pour la rédaction de votre document. Privilégiez l'utilisation de citations en fin de chapitres et/ou en notes de bas de page, plutôt qu'une liste de sources en fin de document.

  • Prenez des notes au fur et à mesure de la réalisation du travail pratique si vous ne rédigez pas le manuel en parallèle.

  • Ajoutez des images, des illustrations et des captures d'écran pour aider le lecteur à mieux comprendre et suivre les étapes.

  • Utilisez uniquement la forme impersonnelle dans le manuel technique.

Structure du manuel

Votre manuel technique devra inclure les éléments suivants :

Page de garde (sans en-tête ni pied de page)

  • Le logo de la HEIA-FR
  • Le nom de la formation : Année Passerelle Ingénierie ISC
  • Le nom du cours : Technologies Internet
  • L'ID du travail pratique : A02-TP02
  • Une illustration graphique représentant ce travail pratique
  • Vos informations personnelles (nom, prénom, adresse email)
  • La date du travail pratique

En-tête (à partir de la deuxième page)

  • Le logo de la HEIA-FR
  • Le nom de la formation : Année Passerelle Ingénierie ISC
  • Le nom du cours : Technologies Internet
  • L'ID du travail pratique : A02-TP02
  • Vos informations personnelles (nom, prénom, adresse email)

Pied de page (à partir de la deuxième page)

  • La numérotation automatique des pages (ex. : N° de la page / # de pages)
  • La date du travail pratique

Contenu supplémentaire

  • Une table des matières (avec des liens cliquables) après la page de garde.
  • Une table des illustrations (avec des liens cliquables) à la fin du document.

Rendu du TP

Le document, au format PDF, est à rendre pour le lundi 30 septembre à 13h, au plus tard, par email (joel.dacomo@hefr.ch).

Le document PDF aura le nom de fichier : API-TI - A02-TP02 - Nom Prénom.pdf

Le TP sera évalué.