Aller au contenu
M07 · A. Introduire la notion client/serveur

Préparer l'environnement : XAMPP, Apache, PHP et VS Code

Installer XAMPP, démarrer Apache et MySQL, régler les ports, ranger son projet dans htdocs, activer les extensions PHP (PDO) et équiper VS Code.

1Situer

Pour développer le site de Souk Atlas, il faut un serveur web, PHP et MySQL sur votre propre PC. Plutôt que d'installer et de relier ces trois logiciels un par un, on utilise un paquet tout-en-un : XAMPP. Cette leçon prépare le poste de travail que vous utiliserez jusqu'à la fin du module.

2Comprendre

Le panneau de contrôle de XAMPP
XAMPP Control Panel ModulePortsÉtatAction Apache — arrêté Start MySQL — arrêté Start http://localhost ✔ localhost:3306 ✔ Port 80 in use by another applicationhttpd.conf : Listen 8080 C:\xampp\htdocs\souk\index.php→ http://localhost/souk/

Au lancement, aucun service ne tourne : Apache et MySQL sont arrêtés.

1 / 5

XAMPP : un serveur complet sur son PC

Il existe des équivalents : WAMP (Windows), MAMP (macOS), Laragon. En entreprise, on utilise aussi des conteneurs Docker. Le principe ne change pas : un serveur web, PHP et une base de données sur la machine du développeur.

Installation en bref :

  1. Télécharger XAMPP sur le site d’Apache Friends (version avec PHP 8).
  2. Installer dans C:\xampp (évitez C:\Program Files, à cause des droits d’écriture).
  3. Ouvrir le XAMPP Control Panel, cliquer sur Start devant Apache puis devant MySQL.
  4. Ouvrir http://localhost/ : la page d’accueil de XAMPP s’affiche.

Choisir et configurer le serveur web

Points de configuration à connaître :

  • Port : Listen 80 (HTTP) et Listen 443 dans httpd-ssl.conf (HTTPS).
  • Racine : DocumentRoot ; http://localhost/souk/ correspond au dossier C:\xampp\htdocs\souk\.
  • Page par défaut : DirectoryIndex index.php index.html ; c’est pour cela que http://localhost/souk/ ouvre index.php.
  • Journaux : apache\logs\error.log ; c’est le premier endroit à lire quand Apache refuse de démarrer.

Configurer PHP : php.ini et extensions

; extensions nécessaires au module
extension=pdo_mysql      ; PDO pour MySQL (leçons C)
extension=mbstring       ; chaînes avec accents
extension=fileinfo       ; type réel des fichiers envoyés
extension=openssl        ; chiffrement, HTTPS

; pendant le développement
display_errors = On
error_reporting = E_ALL

; envoi de fichiers
upload_max_filesize = 2M
post_max_size = 8M

Pour vérifier la configuration réelle, on crée un fichier info.php contenant <?php phpinfo(); et on l’ouvre dans le navigateur : il liste la version, le php.ini chargé et les extensions actives.

MySQL et phpMyAdmin

Accès : http://localhost/phpmyadmin. Le compte par défaut de XAMPP est root sans mot de passe : c’est celui que vos scripts utiliseront pour se connecter (new PDO(..., 'root', '')). Pour le projet, créez la base souk et importez le script du module 06.

VS Code pour PHP

Extensions conseillées :

  • PHP Intelephense : complétion, signatures des fonctions, erreurs soulignées en rouge ;
  • PHP Debug (avec Xdebug activé dans php.ini) : points d’arrêt et exécution pas à pas, comme le lab de ce site ;
  • Live Server n’est pas adapté à PHP (il ne sait servir que des fichiers statiques) : utilisez Apache.

Dans VS Code, ouvrez directement le dossier du projet (Fichier > Ouvrir le dossier > C:\xampp\htdocs\souk), et indiquez à Intelephense où trouver PHP si besoin (php.validate.executablePath).

Exemple simple

La cuisine équipée

Plutôt que d'acheter un four, une plaque et un frigo séparément puis de tout brancher, on loue une cuisine équipée : XAMPP livre Apache, PHP, MySQL et phpMyAdmin déjà reliés entre eux.

Exemple simple

Deux commerces, une seule porte

Si Skype ou IIS occupent déjà le port 80, Apache ne peut pas ouvrir sa porte : c'est comme deux commerces qui voudraient la même adresse. On en déplace un (port 8080).

3Manipuler

Rangez chaque élément de l'environnement de développement dans le bon outil.
Le port 80 (Listen 80 dans httpd.conf)
Le dossier htdocs où l'on range les sites
Le fichier .htaccess
extension=pdo_mysql
display_errors = On pendant le développement
upload_max_filesize = 2M
Le port 3306
Le compte root sans mot de passe
http://localhost/phpmyadmin
L'extension PHP Intelephense
Ouvrir le dossier C:\xampp\htdocs\souk comme projet
L'extension PHP Debug (Xdebug)

4Pratiquer

Exercice 1 · Apache ne démarre pas

Dans le panneau XAMPP, Apache passe au vert puis s'arrête aussitôt. Le journal indique « Port 80 in use by ... Skype ». Donnez deux solutions.

Voir le corrigé
1. Fermer (ou désactiver au démarrage) le programme qui occupe le port 80, puis relancer Apache.
2. Changer le port d'Apache : dans httpd.conf, remplacer « Listen 80 » par « Listen 8080 »
   (et « ServerName localhost:80 » par « localhost:8080 »), redémarrer Apache,
   puis ouvrir http://localhost:8080/.

Exercice 2 · Où ranger le projet ?

Votre projet est dans C:\xampp\htdocs\souk\ et contient index.php et produits.php. Quelles adresses tapez-vous dans le navigateur pour ouvrir ces deux pages ?

Voir le corrigé
http://localhost/souk/            (Apache ouvre index.php tout seul)
http://localhost/souk/produits.php

Exercice 3 · Vérifier PDO

Écrivez un petit script info.php qui affiche la version de PHP et indique si l'extension pdo_mysql est chargée.

Voir le corrigé
<?php
echo "PHP " . PHP_VERSION . "<br>";
echo extension_loaded('pdo_mysql') ? "pdo_mysql : activée" : "pdo_mysql : à activer dans php.ini";
// phpinfo(); affiche toute la configuration (à supprimer avant la mise en ligne)

5Vérifier

1. Dans quel dossier faut-il placer les fichiers d'un site pour qu'Apache (XAMPP) les serve ?
2. Après avoir modifié php.ini, que faut-il faire ?
3. Quel est le compte MySQL par défaut de XAMPP ?