Concevez votre site web avec PHP et MySQL
Last updated on Monday, December 1, 2014
  • 8 semaines
  • Facile

Free online content available in this course.

Videos available in this course

Paperback available in this course

eBook available in this course.

Certificate of achievement available at the end this course

Got it!

Préparer son ordinateur

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. Comment diable allez-vous pouvoir créer un site dynamique si PHP ne fonctionne pas chez vous ?

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. Vous serez fin prêts à programmer après avoir lu ce chapitre !

De quels programmes a-t-on besoin ?

Selon que l'on crée un site statique ou un site dynamique, on a besoin de logiciels différents. En fait, faire un site dynamique nécessite malheureusement pour nous quelques logiciels supplémentaires !

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

  • 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++. Nous reparlerons du choix de l'éditeur à la fin de ce chapitre.

  • Un navigateur web : il permet de tester la page web. Vous pouvez utiliser par exemple Mozilla Firefox, Internet Explorer, Google Chrome, Opera, Safari, ou tout autre navigateur auquel vous êtes habitués pour aller sur le web. Il est conseillé de tester son site régulièrement sur différents navigateurs.

Mozilla Firefox
Mozilla Firefox

Cependant, pour ceux qui comme nous travaillent sur des sites dynamiques, ces outils ne suffisent pas. Il est nécessaire d'installer des programmes supplémentaires.

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

Ces programmes dont nous allons avoir besoin, quels sont-ils ?

  • 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é en introduction. 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.

Logo d'Apache
Logo d'Apache

Tous ces éléments qui vont nous aider à créer notre site dynamique sont libres et gratuits. Certes, il en existe d'autres (parfois payants), mais la combinaison Apache + PHP + MySQL est la plus courante sur les serveurs web, à tel point qu'on a créé des « packs » tout prêts qui contiennent tous ces éléments. Il est possible de les installer un à un mais cela prend plus de temps et vous n'allez rien y gagner (sauf si vous êtes administrateur de serveur, ce qui ne devrait pas être votre cas ;)).

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

Sous Windows : WAMP

Il existe plusieurs paquetages tout prêts pour Windows. Je vous propose d'utiliser WAMP Server qui a l'avantage d'être régulièrement mis à jour et disponible en français.

Commencez par télécharger WAMP ici.

Une fois téléchargé, installez-le en laissant toutes les options par défaut. Il devrait s'installer dans un répertoire comme C:\wamp et créer un raccourci dans le menu Démarrer.

Lorsque vous lancez WAMP, une icône doit apparaître en bas à droite de la barre des tâches, à côté de l'horloge, comme sur la figure suivante.

Icône de WAMP
Icône de WAMP

Si une fenêtre apparaît pour vous indiquer que le pare-feu bloque Apache, cliquez sur Autoriser l'accès (fig. suivante). Vous n'avez aucune raison de vous inquiéter, c'est parfaitement normal.

Firewall et Apache
Firewall et Apache

Par défaut, WAMP est en anglais. Vous pouvez facilement le passer en français en faisant un clic droit sur l'icône de WAMP dans la barre des tâches, puis en allant dans le menu Language / french (fig. suivante).

Modification de la langue
Modification de la langue

WAMP est maintenant en français !

Vous pouvez alors lancer la page d'accueil de WAMP. Faites un clic gauche sur l'icône de WAMP (attention, j'ai bien dit un clic gauche cette fois), puis cliquez sur Localhost, comme le montre la figure suivante.

Menu localhost de WAMP
Menu localhost de WAMP

Une page web similaire à la capture de la figure suivante devrait s'ouvrir dans votre navigateur favori (Firefox, par exemple). Si la page s'affiche chez vous, cela signifie qu'Apache fonctionne.

Page d'accueil de WAMP
Page d'accueil de WAMP

La section « Vos projets » de la page d'accueil de WAMP doit indiquer qu'aucun projet n'existe pour le moment. Considérez que chaque site web que vous entreprenez de faire est un nouveau projet.

Nous allons créer un projet de test que nous appellerons tests. Pour ce faire, ouvrez l'explorateur Windows et rendez-vous dans le dossier où WAMP a été installé, puis dans le sous-dossier intitulé www. Par exemple : C:\wamp\www.

Une fois dans ce dossier, créez un nouveau sous-dossier que vous appellerez tests, comme le suggère l'image suivante.

Dossier créé pour WAMP
Dossier créé pour WAMP

Retournez sur la page d'accueil de WAMP et actualisez-la (vous pouvez appuyer sur la touche F5). La section « Vos projets » devrait maintenant afficher « tests » car WAMP a détecté que vous avez créé un nouveau dossier (fig. suivante).

Projets dans WAMP
Projets dans WAMP

Vous créerez là-dedans vos premières pages web en PHP.

En revanche, si vous cliquez sur ce lien "tests", une erreur s'affiche... Je ne vais pas rentrer dans les détails du comment du pourquoi ( ;) ), je vais plutôt vous demander de saisir l'adresse suivante dans la barre d'adresse de votre navigateur et tout ira bien :

http://localhost/tests/

Vous devriez voir une page vide comme dans la figure suivante.

Le contenu est pour le moment vide
Le contenu est pour le moment vide

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

Vous pouvez passer les sections suivantes qui ne concernent que les utilisateurs sous Mac OS X et Linux.

Sous Mac OS X : MAMP

Pour ceux qui ont un Mac sous Mac OS X, je vous conseille le programme MAMP (Mac Apache MySQL PHP). Il est vraiment très simple à installer et à utiliser.
Vous pouvez le télécharger ici.

Vous devriez avoir téléchargé une archive au format .dmg qui contient le logiciel. Lorsque vous l'ouvrez, la fenêtre de la figure suivante apparaît.

Archive DMG de MAMP
Archive DMG de MAMP

Vous devez tout simplement faire glisser le dossier MAMP en bas à gauche vers le dossier « Applications » au-dessus.

MAMP est maintenant installé. Vous le trouverez dans votre dossier « Applications ». La fenêtre principale de MAMP indique que les serveurs Apache et MySQL ont été correctement démarrés. L'icône de chacun de ces éléments doit être verte comme sur la figure suivante.

Fenêtre principale de MAMP
Fenêtre principale de MAMP

Je vous invite à configurer le répertoire dans lequel Apache ira chercher les fichiers PHP de votre site web. Pour cela, cliquez sur le bouton « Préférences » de la fenêtre principale. Une boîte de dialogue de configuration s'ouvre (figure suivante). Cliquez sur l'onglet Apache en haut.

Configuration de MAMP
Configuration de MAMP

Cliquez sur le bouton « Choisir » pour sélectionner le dossier dans lequel vous placerez les fichiers de votre site web. Sous Mac OS, un dossier est déjà créé : il s'agit de « Sites », dans votre répertoire personnel (fig. suivante).

Le dossier Sites de Mac OS X
Le dossier Sites de Mac OS X

Sélectionnez ce répertoire, qui devrait être de la forme /Users/pseudo/Sites. Notez que ce n'est pas une obligation : vous pouvez utiliser n'importe quel autre répertoire si vous le désirez.

Validez les changements et retournez sur la fenêtre principale de MAMP. Là, cliquez sur « Ouvrir la page d'accueil ». Votre navigateur (Firefox ou Safari, par exemple) devrait alors s'ouvrir et afficher une page web.

Pour vous préparer pour la suite, je vous invite à créer un dossier « tests » dans votre répertoire « Sites ». Nous placerons nos premiers fichiers PHP de test à l'intérieur.

Si le dossier « tests » a été correctement créé, vous pouvez visualiser son contenu en vous rendant à l'adresse http://localhost:8888/tests/.

Si tout va bien, une page vide devrait s'afficher (figure suivante).

Dossier vide MAMP
Dossier vide MAMP

MAMP est correctement installé et configuré. Vous êtes maintenant prêts à travailler en PHP pour le chapitre suivant !

Sous Linux : XAMPP

Sous Linux, il est courant d'installer Apache, PHP et MySQL séparément. Toutefois, il existe aussi des packs tout prêts comme XAMPP (X Apache MySQL Perl PHP), anciennement connu sous le nom de LAMPP.

Ce pack est plus complet que WAMP pour Windows ou MAMP pour Mac OS X. Nous n'utiliserons toutefois qu'une partie des éléments installés.

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

Téléchargement de XAMPP pour Linux
Téléchargement de XAMPP pour Linux

Sur la page qui s'affiche, recherchez un peu plus bas le lien de téléchargement de XAMPP pour Linux.

Lien de téléchargement de XAMPP
Lien de téléchargement de XAMPP

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.
root est le compte administrateur de la machine qui a notamment le droit d'installer des programmes. Normalement, il suffit de taper su et de rentrer le mot de passe root. Sous Ubuntu, il faudra taper sudo su et taper votre mot de passe habituel.

Si comme moi vous utilisez Ubuntu, tapez donc :

sudo su

Vous devez maintenant extraire le dossier compressé dans /opt. Pour ce faire, recopiez simplement la commande suivante :

tar xvfz xampp-linux-1.6.7.tar.gz -C /opt

Lorsque la décompression des fichiers est terminée, c'est fait ! 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.

Vous devriez voir la page de sélection de la langue de XAMPP. Cliquez sur « Français », comme la figure suivante vous y invite.

Choix de la langue dans XAMPP
Choix de la langue dans XAMPP

La page principale de configuration de XAMPP s'affiche ensuite. Elle est plus complète que ses homologues WAMP et MAMP, notamment parce que XAMPP contient plus de logiciels et propose donc plus de fonctionnalités (beaucoup plus).

Vous pouvez vérifier que tout fonctionne correctement en allant dans le menu Statut, comme dans la figure suivante.

Statut des composants de XAMPP
Statut des composants de XAMPP

Au minimum, les modules MySQL et PHP doivent être en vert. Quant aux autres, nous ne les utiliserons pas, donc peu importe. ;-)

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.

Vous devriez voir une page similaire à la figure suivante.

Le dossier tests est actuellement vide dans XAMPP
Le dossier tests est actuellement vide dans XAMPP

Vous êtes prêts à travailler en PHP !

Utiliser un bon éditeur de fichiers

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. Pour l'ouvrir, faites Démarrer / Programmes / Accessoires / 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 vous propose donc d'installer un logiciel qui va vous permettre d'éditer vos fichiers source 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 :

<!DOCTYPE html>
<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>

Sous Windows

Il existe beaucoup de logiciels gratuits à télécharger pour éditer du texte sous Windows. Il m'est impossible de tous vous les présenter : je vais donc vous en recommander un qui est très utilisé et en lequel vous pouvez avoir confiance : Notepad++.

Ce logiciel est petit et rapide à télécharger. N'hésitez pas à l'essayer. Page de téléchargement de Notepad++.

Lorsque Notepad++ s'ouvre, il présente généralement — comme vous le montre la figure suivante — un fichier vide (vous pouvez en créer un nouveau au besoin en allant dans le menu Fichier / Nouveau).

Le logiciel Notepad++
Le logiciel Notepad++

Copiez-collez le code HTML que je viens de vous donner dans Notepad++. Vous devriez voir l'écran de la figure suivante.

Notepad++ : création d'un nouveau fichier
Notepad++ : création d'un nouveau fichier

Comme vous pouvez le voir, le code n'est pas coloré. La raison vient du fait que Notepad++ ne sait pas de quel type de code source il s'agit. Vous devez au préalable enregistrer le fichier.

Allez dans Fichier / Enregistrer, puis choisissez le dossier où vous souhaitez enregistrer le fichier. Je vous conseille d'aller dans le dossier C:\wamp\www\tests que vous avez créé à l'installation de WAMP.
Choisissez le type de fichier .html (Hyper Text Markup Language file) puis donnez un nom à votre fichier, ainsi que le montre la figure suivante.

Enregistrement d'un fichier HTML
Enregistrement d'un fichier HTML

Une fois le fichier enregistré, le code source apparaît coloré (figure suivante).

Notepad++ avec la coloration syntaxique
Notepad++ avec la coloration syntaxique

Vous pourrez suivre la même procédure plus loin avec les fichiers PHP, à condition d'enregistrer le fichier en .php. Ça vous entraînera, vous verrez.

Sous Mac OS X

Si vous êtes sous Mac, je peux vous recommander l'éditeur TextWrangler, qui est gratuit.

Il existe aussi Smultron. Vous pouvez l'essayer mais il n'est malheureusement plus mis à jour.

D'autres éditeurs de texte payants de qualité existent, notamment l'excellent TextMate.

L'éditeur de texte TextWrangler sous Mac OS X
L'éditeur de texte TextWrangler sous Mac OS X

Sous Linux

Sous Linux, les bons éditeurs ne manquent pas. Si vous êtes des habitués de la console, vous travaillerez sûrement avec plaisir avec vim ou emacs.

Si vous recherchez un éditeur graphique plus facile à utiliser, je vous recommande gedit (fig. suivante) ou tout autre logiciel installé avec votre distribution Linux, cela fera l'affaire.

gEdit
gEdit

Quel que soit le logiciel que vous utilisez, rassurez-vous, ça ne change pas du tout la manière dont vous allez apprendre le PHP : les manipulations seront exactement les mêmes pour tout le monde.

En résumé

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

  • Les principaux outils dont nous avons besoin sont :

    • Apache : le serveur web ;

    • PHP : le programme qui permet au serveur web d'exécuter des pages PHP ;

    • 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 : WAMP sous Windows, MAMP sous Mac OS X ou XAMPP sous Linux.

  • Il est conseillé d'utiliser un éditeur de texte qui colore le code source comme Notepad++ pour programmer convenablement en PHP.

Example of certificate of achievement
Example of certificate of achievement

Only Premium members can download videos from our courses. However, you can watch them online for free.