Mise en place de l’environnement de développement PHP

Vous allez ici installer de manière simplifiée sur Windows une plateforme de développement Web complète (Apache + MySQL + Php) grâce au logiciel XAMPP puis allez configurer Apache pour créer un site personnel dans votre répertoire utilisateur.

Vous installerez aussi MySQL Workbench qui est un logiciel d’administration de bases de données MySQL.

XAMPP contient également le logiciel PhpMyAdmin pour administrer les bases de données MySQL mais MySQL Workbench dispose d’un outil graphique qui va permettre de modéliser le schéma d’une base de données.

💻 Travail n° 1 Installation/configuration de XAMPP

🎯 Travail à faire :

  1. Depuis l’installateur xampp-windows-x64-8.2.12-0-VS16-installer.exe disponible sur le NAS, installer XAMPP dans C:\bin\xampp comme illustré dans cette vidéo :

    Veiller à installer XAMPP dans le répertoire C:\bin et non dans C:\Program files sous peine de faire face à des restrictions d’usage lors de son utilisation.

    Ceci est d’ailleurs signalé par le message suivant lors du lancement de l’installation

    xampp uac warning

  2. Si ce n’est déjà fait, installer un éditeur de texte prenant en charge le langage PHP (ex. : VSCode)

  3. Configurer Apache pour permettre aux utilisateurs possédant un compte sur la machine d’avoir chacun un site web personnel.

    Pour cela, ouvrir le fichier c:\bin\xampp\apache\conf\extra\http-userdir.conf et modifier la directive UserDir et la section de configuration <Directory>…​</Directory conformément à ce qui suit :

    Il est fortément recommandé de faire une copie des fichiers de configuration initiaux avant de les modifier.

    Personnellement, je renomme les sauvegardes en ajoutant le suffixe .ori (sgnifiant “original”) : http-userdir.conf → http-userdir.conf.ori.
    http-userdir.conf
    [...]
UserDir "Documents/public_html"
[...]
<Directory C:/Users/*/Documents/public_html>
    AllowOverride All
    Require all granted
</Directory>

  4. S’assurer que les options suivantes sont bien décommentées dans C:\bin\xampp\apache\conf\httpd.conf (c-à-d ne sont pas précédées du caractère ‘#’) :

    [...]
LoadModule userdir_module modules/mod_userdir.so (1)
[...]
# User home directories
Include conf/extra/httpd-userdir.conf (1)
    1 Supprimer le ‘#’ éventuellement présent en début de ligne

  5. Éditer le fichier hosts de Windows (C:\Windows\System32\drivers\etc\hosts) pour associer le nom de domaine du site à l’adresse locale :

    127.0.0.1 tutophp.c12-01 (1)
    1 Remplacer le .c12-01 par le nom de votre machine (→ c12-xx)

  6. Lancer/Redémarrer Apache depuis le panneau de contrôle XAMPP

    xampp control panel

💻 Travail n° 2 Vérification de l’installation/configuration de XAMPP

Pour vérifier la bonne configuration de XAMPP, vous allez mettre en œuvre l’exemple présenté dans Principes de PHP.

  1. Créer un répertoire public_html\ dans le répertoire Documents de votre compte utilisateur (→ C:\Users\claud\Documents pour moi) et y placer un fichier index.php avec le contenu suivant :

    <!DOCTYPE html>
<html>
<head>
   <title>My clock</title>
   <meta charset="utf8">
</head>
<body>
   <?php
      $heureCourante = date("h:i:sa");
      echo "L'heure courante est " . $heureCourante . PHP_EOL;
   ?>
</body>
</html>

  2. Lancer un navigateur, se rendre sur la page d’accueil de votre site web.

    L’url à renseigner dans le navigateur doit être du genre http://tutophp.c12-01/~claude en remplaçant le nom de domaine par celui que vous avez renseigné dans le fichier hosts de Windows et en mettant votre propre nom de compte à la suite du ‘~’

  3. Constater l’affichage de l’heure courante.

    first php

    Ceci valide au niveau du serveur web :

    • la prise en charge effective du langage PHP

    • la prise en compte de la configuration concernant le site web utilisateur .

  4. Inspecter le code source de votre page web (→ option “afficher code source de la page” du menu contextuel dans le navigateur) et le comparer au code source initial placé dans le fichier index.php

  5. Depuis l’inspecteur réseau du navigateur (☰  Développement web  Réseau ou Ctrl+Maj+E dans Firefox), inspecter les entêtes des requête et réponse HTTP des échanges avec le serveur web lorsque vous visitez votre site.

    inspect http

🞄  🞄  🞄