WampServer. Pourquoi faire ?
WampServer est une plateforme de développement de type Wamp, servant à faire fonctionner des scripts PHP. Ce n’est pas vraiment un logiciel mais plutôt un environnement comprenant 2 serveurs (Apache et MySQL), et d’un interpréteur de script (PHP).
Wamp est un acronyme informatique signifiant :
- “W” signifie Windows, tout comme le “L” de Lamp signifie Linux, et le “M” de Mamp, Mac.
- “A” veut dire Apache. Apache est le serveur web «frontal» : il est «devant» l’ensemble des autres et répond directement aux requêtes du client web (navigateur).
- “M” comme MySQL. MySQL est un système de gestion de base de données. Sa fonction est de stocker les données.
- “P” de PHP. PHP est un langage de programmation dans lequel beaucoup de sites ou CMS (tels que WordPress, Prestashop, etc.) sont écrits. Il s’exécute en tant que processus dans Apache et communique avec la base de données MySQL. Il permet de créer un site web dynamique.
WampServer & Environnement de développement
Wamp est donc un ensemble de services permettant d’afficher notre site web en local (sans être connecté à internet). Bien entendu, vous serez le seul à le voir sur votre ordinateur.
Avec WampServer, nous pourrons donc reproduire au mieux, l’environnement du serveur web de notre hébergeur. En effet depuis WampServer 2, nous pouvons très facilement choisir et installer les versions Apache, PHP, MySQL ou Maria DB, dont nous avons besoin pour reproduire le serveur distant où nous hébergerons notre site en production.
Il faudra également tenir compte des besoins de configurations du site sur lequel vous travaillez. Certains CMS, par exemple, suivant la version utilisée, ne fonctionneront qu’avec une version de PHP ou de MySQL. Attention donc à cela lorsque vous développez.
D'autres solutions
D’autres solutions existent, comme EasyPHP, Uwamp, Caddy, IZ-wamp, Xampp, Laragon, etc.
Toutefois, si WampServer sera utilisé sur Windows, sachez que des solutions comme Xampp, ou Caddy, existent et fonctionnent aussi bien sur Windows, sur Linux ou sur Mac.
Sinon l’équivalent de WampServer pour Linux est Lamp, et pour Mac ce sera Mamp.
La différence entre IZ-Wamp et WampServer, est qu’avec IZ-wamp, vous pouvez installer des CMS (WordPress, Joomla, Drupal, etc.) directement depuis son interface.
Installation de WampServer
Vous commencez en avoir l’habitude, mais sur Activateur Web, vous avez le choix.
Vous avez donc la possibilité de suivre ce tutoriel en vidéo, ou alors de lire l’article en dessous de cette vidéo, avec les images d’illustration et procéder pas à pas, à l’installation de wampserver.
Si vous souhaitez suivre la vidéo, n’hésitez pas à vous abonner à ma chaine YouTube par la même occasion.
Comme lorsque vous vous inscrivez sur le site, vous serez alors prévenu de la publication d’un nouvel article.
Tutoriel Vidéo - Installation WampServer
Installation de WampServer
Comme pour tous les logiciels, avant de pouvoir installer WampServer sur notre machine, nous devons au préalable le télécharger.
Nous nous rendons donc sur la page de téléchargement de WampServer en cliquant sur ce lien.
Sur cette page nous devons choisir entre la version 64 bits (x64) ou 32 bits (x86), suivant le système d’exploitation que nous avons sur notre machine.
Système Windows 64 bits ou 32 bits ?
J’ouvre une petite parenthèse pour ceux d’entre vous qui ne connaissent pas la version du système d’exploitation qu’ils utilisent.
Les autres peuvent passer directement à la section suivante.
Informations système
Nous allons ensuite sur l’onglet “Système” qui contient lui même un onglet “Informations système”
Et enfin on recherche la ligne “Type de système” afin de voir quel type de système nous utilisons.
Téléchargement WampServer
Après avoir cliqué sur le lien selon son système d’exploitation, une nouvelle fenêtre s’ouvre.
Plus précisément, c’est un formulaire. Si vous souhaitez recevoir toutes les informations concernant les mises à jour et évolutions de WampServer, alors vous renseignez ce formulaire.
Pour ma part, je choisis de ne pas remplir ce formulaire, et je clique donc sur le lien “passer au téléchargement direct” :
Après avoir cliqué sur ce lien, la fenêtre de mon explorateur Windows s’ouvre. Je vais donc choisir ou enregistrer le fichier d’installation de WampServer sur mon ordinateur.
À vous de voir, où vous souhaitez enregistrer ce fichier. Le tout est de s’en souvenir.
Démarrage de l'installation de WampServer
Je vais donc ensuite ouvrir le dossier dans lequel j’ai enregistré le fichier d’installation et je fais un double clics sur le fichier téléchargé :
Choix de la langue
En premier, l’installateur nous demande de choisir la langue de l’interface WampServer que nous désirons. Ici, je choisis donc le français, ma chère langue maternelle…
Accord de licence
L’installateur nous demande ensuite d’accepter l’accord de licence, après sa lecture complète.
Après avoir lu, on clique donc sur le bouton radio “Je comprends et j’accepte les termes du contrat de licence”, et nous cliquons ensuite sur le bouton Suivant :
Informations
Nous avons ensuite une nouvelle fenêtre nous informant que nous aurons peut-être besoin d’installer des packages supplémentaires sur notre système, tels que les packages Visual Studio, etc.
Nous pouvons cliquer sur le bouton Suivant car si un package est manquant l’installateur nous en informera par la suite.
Dossier de destination
L’installateur nous demande où nous souhaitons enregistrer notre dossier wampserver. Il nous propose par défaut de créer un dossier à la racine de notre disque c.
À vous de voir où vous souhaitez enregistrer ce dossier. Vous pouvez modifier le choix par défaut en cliquant sur le bouton “Parcourir…” et en choisissant un autre dossier.
Sinon nous pouvons accepter le choix par défaut et on clique sur le bouton Suivant :
Composants à installer
La fenêtre suivante permet de faire un choix sur les composants à installer. Nous pouvons ajouter des versions de PHP, choisir les versions de MySQL ou de MariaDB. Les cases qui sont grisées seront des versions installées automatiquement.
Comme je vous ai dit en début de cet article, ces choix se feront selon la technologie, ou CMS que vous utilisez, ou pour ressembler au plus proche à la configuration du serveur de l’hébergeur web que vous utiliserez pour mettre votre site en production, et à la vue des internautes.
Sachez qu’ici, rien n’est irrémédiable, et nous aurons la possibilité, même après l’installation, d’ajouter d’autres versions d’Apache, de PHP, MySQL et MariaDB, via des “addons” WampServer.
Dossier du menu Démarrer
Nous allons ensuite choisir ou l’installateur nous créera un dossier afin d’accéder au raccourci dans le menu Démarrer de Windows.
Il nous propose de créer un dossier nommé WampServer 64, par défaut.
Là encore, à vous de voir si vous laissez le choix par défaut, si vous renommez ce dossier, ou si vous placez le raccourci dans un autre dossier, que vous choisirez en cliquant sur le bouton “Parcourir…”.
Sinon, nous pouvons laisser le choix par défaut et cliquer sur suivant.
Récapitulatif de l'installation à venir
L’installateur nous fait ensuite un récapitulatif de l’installation que nous nous apprêtons à lancer.
Nous pouvons encore modifier les actions précédentes en cliquant sur le bouton “Précédent”.
Si nos choix nous conviennent, alors nous faisons un clic sur le bouton “Installer”.
Installation en cours…
L’installation se lance…
Choix du navigateur
Il nous est demandé avant la fin de l’installation de choisir le navigateur par défaut qui sera utilisé par wampserver.
Par défaut, il nous propose le navigateur Internet Explorer.
Pour ma part, je n’utilise pas Internet Explorer. Au pire ce serait Edge, mais pas IE.
Je vais donc lui donner comme instruction d’installer un autre navigateur et pour cela, il faut cliquer sur le bouton “Oui”.
Choix du navigateur Chrome
Pour donner comme instruction à l’installateur que je veux que WampServer utilise le navigateur Google Chrome, je vais aller chercher l’application, là ou elle est installé sur mon système (souvent dans le dossier Programmes). Je vais donc dans mon dossier Programmes, puis dans mon dossier Google, enfin dans le dossier Chrome et Applications, et je sélectionne mon application se terminant par l’extension .exe. Donc pour moi, je sélectionne chrome.exe.
Je clique ensuite sur le bouton “Ouvrir” pour valider mon choix dans l’installateur.
Bien entendu, à vous de voir quel navigateur vous souhaitez utiliser. La procédure est la même pour tous les navigateurs.
Choix de l'éditeur de texte
Au même titre que le choix du navigateur, l’installateur nous dit que Notepad.exe (bloc note) sera l’éditeur de texte utilisé par WampServer, par défaut.
Nous pouvons choisir un autre éditeur de texte, comme par exemple Notepad++, ou encore un éditeur de code comme Visual Studio Code. Nous utiliserons alors la même procédure que nous avons faite lors du choix du navigateur.
Si vous souhaitez lire un article sur l’installation de Visual Studio Code, j’en ai écrit un voici très peu de temps.
Nous pouvons également laisser le choix, par défaut, de Notepad , et pour cela nous cliquons sur le bouton “Non”.
Informations de fin d'installation
Enfin, l’installateur nous affiche des informations concernant le fait qu’il nous a placé dans le dossier d’installation, des instructions sur l’utilisation de WampServer et de MySQL et MariaDB.
Installation terminée avec Succès
Enfin l’installateur de WampServer nous informe que l’application est installée avec succès sur notre ordinateur, et que nous pouvons la lancer depuis l’icône créée sur le bureau.
Il nous dit également que nous pouvons fermer sa fenêtre en cliquant sur le bouton “Terminer”.
Dossier WampServer
Nous pouvons également voir que le dossier de WampServer a bien été créé, à l’endroit indiqué. Ici à la racine de mon disque c.
En avant
Ce tutoriel sur l’installation de WampServer est maintenant terminé.
Il ne vous reste plus qu’à démarrer votre nouveau serveur local et commencer à créer des sites ou applications web.
Si ce tutoriel a pu vous aider, j’en serai ravi. N’hésitez pas à vous inscrire sur le site, à vous abonner à ma chaine YouTube, ou à ma page Facebook. Liker, partager, et commenter. Dans vos commentaires, si vous avez des envies de tutoriels, dites le moi, et je pourrai alors envisager d’en créer un sur le sujet demandé. Créer ces tutoriels prend du temps, alors merci par avance de prendre quelques secondes, au pire quelques minutes, pour m’encourager à continuer de publier du contenu.
Ceux qui ont l’habitude de lire ces tutoriels le savent, je ne vais pas partir ainsi. Alors en bonus aujourd’hui, je vais vous apprendre à créer un Virtual Host sur WampServer.
🎆🎇🎈 BONUS 🎉🎊🎆
Création d'un VirtualHost sur WampServer
Dans le bonus de cet article, je vous explique comment créer un Virtual Host avec WampServer.
C'est quoi un VirtualHost ??
Les virtualhosts ou hôtes virtuels permettent d’héberger plusieurs sites internet (nom de domaine) sur un même serveur dédié. Donc une seule adresse IP pour plusieurs sites internet ou nom de domaine, c’est un peu le principe des hébergements mutualisés.
Concernant les virtualhosts sur WampServer, vous l’aurez compris, ils désignent tous simplement les différents sites que vous allez créer en local sur votre serveur Wamp.
Cela veut dire que pour chaque site que je vais développer, alors je vais créer un VirtualHost. Cela me permettra d’y accéder en 1 clic depuis l’interface WampManager, et surtout que mon code soit bien structuré à l’intérieur de dossier.
Alors voyons cela tout de suite.
Couleur Icône WampServer
Avant toute chose, il y a plusieurs choses que vous devez savoir pour travailler avec wampserver. La première est que votre serveur local n’est fonctionnel que si l’icône de WampServer est de couleur verte. Cette icône peut être verte, orange ou rouge. Mais encore une fois, seulement lorsqu’elle est verte, votre serveur fonctionnera. Si elle est orange, c’est surement qu’un composant (Apache, PHP, MySQL) est manquant ou hors service. Parfois un simple redémarrage réglera le problème, ou parfois, il faudra plonger dans la documentation, ou faire une mise à jour. Si l’icône est rouge, c’est que les services ne fonctionnent pas. Peut être un problème de port, ou de pare-feu, ou bien d’autres choses encore possibles. Voir la documentation dans ce cas.
Le dossier WWW de WampServer
L’autre chose à savoir est que le dossier dans lequel vous devez travailler avec un serveur local comme wampserver est le dossier www, situé à l’intérieur du dossier d’installation.
Tous vos développements de sites web, applications ou autres, vous devez les placer dans ce dossier “www”. Sinon vous ne les verrez pas sur votre navigateur.
Chaque site que vous allez créer sera mis dans un dossier différent, avec un nom différent, bien entendu. Ce dossier, ou ce site local sera alors un Virtual host.
Alors créons notre premier site et donc notre premier Virtual host.
Gestion des Virtuals Hosts
La première chose à faire pour créer un Virtual host est d’abord de créer un dossier dans le dossier “www” de WampServer.
Ce dossier portera le nom de votre projet de développement ou celui du site que vous allez développer en local tout d’abord.
Pour ma part, je créais un dossier que je nomme “Monsite”. Oui je sais, j’ai beaucoup d’inspirations à cette heure ! 
Contenu du projet Monsite
Afin de créer un contenu dans mon projet de site web que j’ai nommé Monsite, je vais créer une page HTML, que je vais naturellement mettre dans ce projet.
Pour cela, je vais ouvrir mon projet Monsite dans mon éditeur de code. J’utilise VS Code, et si vous souhaitez également l’utiliser, j’ai écrit un tutoriel sur l’installation de Visual Studio Code.
J’ouvre donc le dossier dans mon éditeur et créer un fichier index.html :
Le code de mon fichier index.html
Si vous ne voulez pas écrire le code HTML, vous pouvez le copier ci dessous :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon site</title>
<style>
h1 {color:red;}
p {color:green; font-size: 1.5rem;}
</style>
</head>
<body>
<h1>Bienvenue Tout le monde sur Monsite !!</h1>
<p>
J'espère que vous appreciez ce tutoriel, et que vous arrivez à reproduire
cela lors de l'utilisation de WampServer.
</p>
</body>
</html>
Ici, je créais un exemple vraiment très simple, qui est uniquement pour savoir créer un virtual host dans WampServer. Donc vraiment simpliste !
Création du virtual host Monsite
Comme je vous l’ai dit, chaque projet sera un Virtual host dans WampServer.
Nous allons donc sur l’icône WampServer, et faisons un clic gauche. Ensuite nous allons sur la ligne “Vos VirtualHosts” et enfin nous allons cliquer sur Gestion VirtualHost.
Une fenêtre de navigateur s’ouvre alors sur la page d’ajout d’un VirtualHost.
Sur cette page, nous devons donner :
- un nom à notre virtual host. Donc je mets le même nom que mon projet (Monsite).
- Le chemin d’accès au dossier qui contient le projet : donc pour moi : c:/wamp64/www/Monsite/
- Le dernier champ est utile seulement si nous voulons attribuer un port d’écoute spécifique à notre projet. Mais ici en local, cela n’est pas nécessaire.
Après avoir cliqué sur le bouton “Démarrer la création du VirtualHost”, une nouvelle fenêtre s’ouvre nous indiquant que l’opération est un succès.
Le Virtual Host monsite a été créé.
Vous remarquerez qu’il m’a mis automatiquement le nom du virtual host en minuscule.
Si nous retournons sur l’icône de WampServer, et qu’on fait un clic gauche et que nous allons sur la ligne “Vos VirtualHosts” , le Virtual host “monsite” n’apparait pas ?
Rassurez vous, cela est tout à fait normal. Pour que notre Virtual host apparaisse, il faut que l’on redémarre le DNS.
Pour cela, on va faire un clic droit sur l’icône WampServer, et on va cliquer sur “Outils”, puis tout en haut de la liste qui s’affiche, on clique sur “Redémarrage DNS”.
Vous aurez alors 3 à 4 fenêtres de terminal qui vont s’ouvrir et se fermer aussitôt pour redémarrer le DNS (Domain Name Système).
Accès à notre Virtual Host
Maintenant que nous avons redémarré le DNS, voyons si notre Virtual host “monsite” apparaît. Donc clic gauche sur l’icône wampserver, puis “Vos VirtualHosts” :
Ouverture du Virtual Host
Comme je vous l’ai dit, il suffira alors d’un seul clic sur notre virtual host “monsite”, pour ouvrir notre projet dans le navigateur. Ici le projet ne contient qu’un titre et un paragraphe, mais bien entendu ce projet va alors pouvoir être modifié et grâce à mon serveur local, je pourrai ainsi l’afficher et voir ses modifications en temps réel.
Conclusion
Ce tutoriel sur l’installation de WampServer, et son bonus sur la création d’un Virtual Host sont maintenant terminés.
Je suis sûr que tout comme à moi, l’utilisation de WampServer vous sera d’une grande utilité.
Bien entendu, j’utilise également des serveurs Node.js où des serveurs Symfony lors de mes développements web, mais WampServer est vraiment très bien fait et assez simple d’utilisation.
Avant de vous quitter, je vous renouvelle ma demande de prendre quelques secondes, ou minutes, pour vous abonner au site Activateur Web, à ma chaine YouTube, ou à ma page Facebook. N’hésitez pas à liker, à partager et aussi à commenter. Et si vous avez des idées de tutos, faites le moi savoir. Un de ces gestes m’aidera en retour, et m’encouragera à continuer de rédiger du contenu.
Je vous remercie d’avoir suivi cet article. Je vous souhaite le meilleur dans vos futures créations. Prenez soin de vous et surtout, restez curieux !
À bientôt pour un nouveau tutoriel.
