Installation et configuration de XAMPP

XAMPP est une distribution logicielle libre qui permet d’installer facilement un serveur web local sur son ordinateur, quel que soit le système d’exploitation (Windows, macOS, Linux, Solaris).

Elle regroupe plusieurs composants essentiels au développement web :

  • le serveur Apache,

  • le système de gestion de bases de données MariaDB (ou MySQL)

  • les langages PHP et Perl

  • des outils comme phpMyAdmin pour l’administration des bases de données

Grâce à son installation simple et rapide, XAMPP s’adresse aussi bien aux débutants qu’aux développeurs expérimentés souhaitant tester, développer ou déboguer leurs sites et applications web en local, avant de les mettre en ligne.

Il offre une interface de gestion conviviale et centralisée pour démarrer ou arrêter les différents services, ce qui en fait un outil de référence pour le développement web local.

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.

Installation

  1. Depuis l’installateur xampp-windows-x64-7.4.5-0-VC15-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)

Configuration

La configuration de XAMPP proposée ci-après permet à chaque utilisateur possédant un compte sur la machine de disposer de son propre site web.

  1. 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 :

    [...]
UserDir "Documents/public_html"
[...]
<Directory C:/Users/*/Documents/public_html>
    AllowOverride All
    Require all granted
</Directory>

    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.

  2. 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

  3. Lancer/Redémarrer Apache depuis le panneau de contrôle XAMPP accessible depuis le menu “Démarrer” de Windows (← XAMPP Control Panel)

    xampp control panel

Vérification de l’installation/configuration de XAMPP

Pour vérifier la bonne configuration de XAMPP, on peut mettre un 1er site web élémentaire.

  1. Créer un répertoire public_html\ dans le répertoire Documents de votre compte utilisateur (→ Ex. : C:\Users\ragnar\Documents\public_html pour l’utilisateur Ragnar) 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.

    Celui-ci se trouve à l’url http://localhost/~<compte-utilisateur>
    (Ex : http://localhost/~ragnar)

    Veiller à noter que le compte utilisateur doit être précédé du caractère '~'.

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

    first php

    Ceci valide au niveau du serveur web :

    1. la prise en charge effective du langage PHP

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

🞄  🞄  🞄