Concevez votre site web avec PHP et MySQL

Nous savons désormais que PHP s'exécute sur le serveur, et que son rôle est de générer des pages web. Cependant, seul un serveur peut lire du PHP ; or, votre ordinateur n'est pas un serveur.

Qu'à cela ne tienne : nous allons temporairement transformer votre ordinateur en serveur pour que vous puissiez exécuter du PHP et travailler sur votre site dynamique.

Ayez en tête les outils de base pour créer un site statique

Les webmasters qui créent des sites statiques avec HTML et CSS ont de la chance, ils ont en général déjà tous les programmes dont ils ont besoin :

1. Un éditeur de texte.

2. Un navigateur web.

Un éditeur de texte

En théorie, un programme tel que le bloc-notes livré avec Windows suffit, bien qu'il soit recommandé d'utiliser un outil un peu plus évolué, comme Notepad++.

Un navigateur web

Il permet de tester la page web.

Vous pouvez utiliser par exemple :

• Mozilla Firefox ;

• Microsoft Edge ;

• Google Chrome ;

• Opera ;

• Safari ;

• ou tout autre navigateur auquel vous êtes habitué pour aller sur le Web.

Bref ! Mais, et vous le savez déjà : pour créer un site dynamique, ces outils ne suffisent pas…

Il est nécessaire d'installer des programmes supplémentaires !

Utilisez les outils pour créer un site dynamique

Pour que votre ordinateur puisse lire du PHP, il faut qu'il se comporte comme un serveur.

Rassurez-vous : vous n'avez pas besoin d'acheter une machine spéciale pour cela !

Il suffit simplement d'installer les mêmes programmes que ceux que l'on trouve sur les serveurs qui délivrent les sites web aux internautes.

Apache 

C'est ce qu'on appelle un serveur web. Il s'agit du plus important de tous les programmes, car c'est lui qui est chargé de délivrer les pages web aux visiteurs. Cependant, Apache ne gère que les sites web statiques (il ne peut traiter que des pages HTML). Il faut donc le compléter avec d'autres programmes.

PHP 

C'est un plug-in pour Apache qui le rend capable de traiter des pages web dynamiques en PHP. En clair, en combinant Apache et PHP, notre ordinateur sera capable de lire des pages web en PHP.

MySQL

C'est le logiciel de gestion de bases de données dont je vous ai parlé avant. Il permet d'enregistrer des données de manière organisée (comme la liste des membres de votre site). Nous n'en aurons pas besoin immédiatement, mais autant l'installer de suite.

Tous ces éléments sont libres et gratuits.

Dans la suite de ce chapitre, nous allons voir comment installer le « pack » qui convient en fonction de votre système d'exploitation.

Je vous propose d'utiliser XAMPP qui marche à la fois pour Windows, pour Mac et pour Linux.  Il a l'avantage d'être régulièrement mis à jour.

Installez XAMPP sous Windows

Commencez par télécharger XAMPP sur son site. Prenez la version correspondante à votre système d'exploitation. Une fois téléchargé, installez-le. 

Lancez ensuite XAMPP. La fenêtre suivante devrait apparaître :

Après le démarrage de XAMPP, vous devez lancer deux programmes essentiels : Apache et MySQL. Cliquez sur le bouton "Start" pour Apache et sur le bouton "Start" pour MySQL. Vous devriez observer un fond de couleur verte apparaître pour Apache et MySQL. Il peut parfois s'écouler un court laps de temps avant que ces programmes ne soient pleinement opérationnels.

Si une fenêtre apparaît pour vous indiquer que le pare-feu bloque Apache ou MySQL, cliquez sur "Débloquer". Vous n'avez aucune raison de vous inquiéter, c'est parfaitement normal.

Vérifions maintenant que XAMPP est bien installé. Je vous propose de créer un projet de test que nous appellerons tests.

Pour ce faire cliquer sur le bouton "Explorer" de XAMPP Control Panel et rendez-vous dans le dossier racine  htdocs  . Puis, créez un nouveau sous-dossier que vous appellerez tests, comme sur cette image :

Maintenant ouvrez votre navigateur web. Dans la barre d'adresse, saisissez  localhost/tests  . Le dossier tests apparaît dans le navigateur.

Il n'y a rien à l'intérieur pour le moment :

Si vous avez le même résultat, cela signifie que tout fonctionne. Bravo, vous avez installé XAMPP et il fonctionne correctement. Vous êtes prêt à programmer en PHP !

Eh oui, l'ami ! On n'a pas encore commencé à programmer, il ne fallait pas non plus vous attendre à un feu d'artifice tout de suite. 🎆

Vous pouvez passer la section suivante qui ne concerne que les utilisateurs sous Mac et sous Linux.

Installez XAMPP sous macOS

Commencez par télécharger XAMPP sur son site. Prenez la version correspondant à votre système d'exploitation. Une fois téléchargé, installez-le. Si vous avez un message de sécurité qui apparaît, allez voir la section dédiée plus bas.

Lancez ensuite XAMPP. La fenêtre suivante devrait apparaître :

Vous devez cliquer plusieurs fois sur le bouton “Next” jusqu'au démarrage de l'installation.

À la fin de l'installation, vous devrez voir la fenêtre suivante :

Cliquez sur le bouton "Finish" pour lancer XAMPP :

Après le démarrage de XAMPP, vous devez démarrer Apache et MySQL. Pour cela, vous devez aller sur l’onglet "Manage Servers". Il suffit de cliquer sur "Apache Web Server" sur la liste et d’appuyer sur le bouton "Start". Si tout s'est bien passé, la diode à gauche devrait passer au vert.

Il ne reste plus qu’à faire de même pour MySQL Database.

Voilà, XAMPP a été installé avec succès sur votre système macOS.

Si lors de l'installation, vous avez le message de sécurité "xampp-osx-8.2.4-0installer cannot be opened because the developer cannot be verified." :

1. Cliquez sur le bouton cancel.

2. Fermez l'installation.

3. Allez dans le menu "System Settings" :

4. Sur la fenêtre qui ouvre, cliquez sur "Privacy & Security" :

5. Descendez jusqu'à la partie sécurité et cliquez sur le bouton "Open Anyway" :

6. La fenêtre de confirmation par mot de passe devrait apparaître et ensuite, cliquez sur le bouton "Unlock".

7. Cliquez sur le bouton "Open" sur la fenêtre suivante.

Vous pouvez maintenant installer XAMPP.

Les fichiers PHP devront être placés dans le répertoire  /Applications/xampp/htdocs . Vous pouvez y créer un sous-répertoire tests pour vos premiers tests. Vérifions d'abord que XAMPP est bien installé avec ce dossier.

Une fois le dossier créé, vous pouvez y accéder depuis votre navigateur à l'adresse suivante :  localhost/tests  . Si le dossier vide tests apparaît sur votre navigateur, XAMPP est opérationnel !

Installez XAMPP sous Linux

Ce pack est plus complet que MAMP. Nous n'utiliserons toutefois qu'une partie des éléments installés.

Sur le site officiel de XAMPP, recherchez le lien XAMPP pour Linux.

Une fois le téléchargement terminé, ouvrez une console. L'installation et le lancement de XAMPP se font en effet uniquement en console (allons, allons, pas de chichis, vous n'allez pas me faire avaler que c'est la première fois que vous l'ouvrez, la console !).

Rendez-vous dans le dossier dans lequel vous avez téléchargé XAMPP. Par exemple, dans mon cas, le fichier se trouve sur le bureau :

cd /Desktop

Vous devez passer root pour installer et lancer XAMPP.

Si comme moi vous utilisez Ubuntu, tapez donc :

sudo su

Donnez les droits d'exécution au fichier que vous venez de télécharger :

chmod 755 xampp-linux-*-installer.run

Puis lancez le programme d'installation :

./xampp-linux-*-installer.run

Et voilà ! XAMPP est maintenant installé.

Pour démarrer XAMPP (et donc Apache, PHP et MySQL), tapez la commande suivante :

/opt/lampp/lampp start

Si vous désirez plus tard arrêter XAMPP, tapez :

/opt/lampp/lampp stop

Ce n'est pas bien compliqué, comme vous pouvez le voir !

Vous pouvez maintenant tester XAMPP en ouvrant votre navigateur favori et en tapant l'adresse suivante : http://localhost  .

Les fichiers PHP devront être placés dans le répertoire /opt/lampp/htdocs  . Vous pouvez y créer un sous-répertoire tests pour vos premiers tests.

cd /opt/lampp/htdocs && mkdir tests

Une fois le dossier créé, vous pouvez y accéder depuis votre navigateur à l'adresse suivante :http://localhost/tests  . Si vous voyez un dossier vide dans votre navigateur, XAMPP est bien fonctionnel !

Découvrez le serveur PHP intégré

Nous avons installé des logiciels qui reproduisent le comportement exact d'un serveur tel qu'il serait configuré et installé en ligne. Mais pour de petits travaux sur votre ordinateur "en local", PHP fournit un serveur web interne très pratique, et qui utilise PHP en ligne de commande pour provoquer l'exécution du script et le rendu de la page.

Par exemple, si l'on crée un fichier PHP index.php avec le contenu suivant :

<?php

echo "Hello world";

et que nous exécutons en ligne de commande au niveau du dossier où se trouve le fichier index.php :

php -S localhost:8080

• localhost étant votre "nom de domaine" local ;

• "8080" étant un port HTTP quelconque.

Par la suite, dans les vidéos du cours, nous utiliserons l'une ou l'autre des options proposées.

Vous êtes prêt à travailler en PHP !

Utilisez un bon éditeur de texte

Comme vous devez déjà le savoir, pour éditer le code d'une page web, vous avez plusieurs solutions :

• utiliser un éditeur de texte tout simple que vous avez déjà, comme Bloc-notes. Ce logiciel suffit normalement à écrire des pages web en HTML et même en PHP, mais…

• le mieux reste d'utiliser un logiciel spécialisé qui colore votre code (très pratique) et qui numérote vos lignes (très pratique aussi).

Il existe des centaines et des centaines de logiciels gratuits faits pour les développeurs comme vous. Je vais vous en présenter ici deux :

1. Un que l'on peut utiliser gratuitement : Visual Studio Code.

2. Et un payant : PHPStorm.

Je vous propose donc d'installer un logiciel qui va vous permettre d'éditer vos fichiers sources de manière efficace. Vous en avez probablement déjà installé un si vous avez appris à programmer en HTML/CSS, mais comme on n'est jamais trop prudent, je vais rapidement vous en présenter quelques-uns en fonction de votre système d'exploitation.

Voici le code source HTML que nous allons utiliser pour commencer en terrain connu. Copiez-collez ce code dans l'éditeur de texte que je vais vous faire installer :

<html>
    <head>
        <meta charset="utf-8"/>
        <title>Ceci est une page HTML de test</title>
    </head>

    <body>
        <h2>Page de test</h2>
        <p>
            Cette page contient <strong>uniquement</strong> du code HTML.<br/>


            Voici quelques petits tests :


        </p>

        <ul>
            <li style="color: blue;">Texte en bleu</li>
            <li style="color: red;">Texte en rouge</li>
            <li style="color: green;">Texte en vert</li>
        </ul>
    </body>
</html>

Il n'y a pas de PHP pour l'instant, afin de commencer en douceur. Nous allons simplement essayer d'enregistrer un fichier HTML avec ce code pour nous échauffer.

Visual Studio Code

Que vous soyez sous Windows, Mac ou Linux, je vous recommande de commencer avec l'éditeur Visual Studio Code qui est suffisamment léger et simple si vous débutez.

Ne vous fiez pas à son apparente simplicité : Visual Studio Code est en effet rapide et simple à la base, mais il est possible d'étendre ses fonctionnalités avec d'innombrables plugins !

PHPStorm

Vous ne commencerez peut-être pas de suite avec PHPStorm, mais gardez-le sur votre radar car c'est un outil très utilisé que vous essaierez sûrement un jour.

En résumé

• Pour créer des sites web dynamiques, nous devons installer des outils qui transforment notre ordinateur en serveur, afin de pouvoir tester notre site.

• Les principaux outils nécessaires sont :

  1. Apache, le serveur web.

  2. PHP, le programme qui permet au serveur web d'exécuter des pages PHP.

  3. MySQL, le logiciel de gestion de bases de données.

• Bien qu'il soit possible d'installer ces outils séparément, il est plus simple pour nous d'installer un paquetage tout prêt : XAMPP.

• Il est conseillé d'utiliser un éditeur de texte qui colore le code source, comme Visual Studio Code, pour programmer convenablement en PHP. Pour les personnes plus expérimentées qui travaillent sur de gros projets, je recommande PHPStorm.

Tout est installé, maintenant vous allez passer à la pratique et écrire votre premier script. On y va !