Imprimer cette page

Serveur local XAMPP

Serveur local XAMPP Serveur local sous Ubuntu 16.04-LTS serveur apache linux MySQL PHP phpMyAdmin

Préliminaire - avant de lire la suite de cette page

Installer XAMPP sous Ubuntu n'est pas chose des plus faciles. Aussi, après de nombreuses tentatives (y compris de tentatives infructueuses), je tenais à vous présenter cette petite vidéo qui résume un peu l'ensemble de cette page, et vous donne un moyen sûr d'arriver à vos fins : avoir chez soi un serveur Apache et un serveur de bases de données relationnelles.

Procédure d'installation détaillée

Pour ceux d'entre vous qui voudraient se lancer dans le domaine passionnant de la création de sites internet, il existe une solution simple pour transformer votre PC Ubuntu en station de développement web. Cette solution a pour nom : « XAMPP ». Proposée par « Apache Friends », elle est totalement gratuite. XAMPP vous permet d'installer facilement (liste non exhaustive) :

  • Un serveur local Apache
  • Un serveur local de bases de données MySQL
  • PHP qui va vous permettre de créer des pages Web dynamiques
  • phpMyAdmin avec lequel vous pourrez créer et gérer vos bases de données MySQL
  • PEAR et SQLite
  • ... et de nombreux autres logiciels (ou classes, ou modules)

Obtenir XAMPP pour Linux Ubuntu

Depuis la version 5.5.30, XAMPP est livré avec MariaDB (au lieu de MySQL). Si vous voulez obtenir XAMPP avec MySQL inclus, vous pouvez vous rendre sur le site « sourceforge.net », ou encore, il vous suffit de cliquer sur ce lien pour télécharger la pack adapté à Linux (dont Ubuntu est une distribution). Vous obtiendrez le fichier « xampp-linux-x64-5.5.19-0-installer.run ». Si vous voulez d'autres versions (avec PHP 7 par exemple, mais sans MySQL), vous pouvez aller sur la page des téléchargements du site Apache Friends, et y faire votre choix.

Installer XAMPP pour Linux Ubuntu

La procédure décrite ci-dessous s'applique avec le fichier xampp-linux-x64-5.5.19-0-installer.run. Si vous voulez installer une autre version, il vous suffira de modifier le nom du fichier.
Première étape : déplacez-vous dans le dossier où vous avez téléchargé XAMPP, et modifiez les permissions de l'exécutable en .run (dans une console) :

tuto@tuto-PC:~$ cd Téléchargements
tuto@tuto-PC:~/Téléchargements$ ls
xampp-linux-x64-5.5.19-0-installer.run       xampp-linux-x64-5.5.19-0-installer.run
tuto@tuto-PC:~$ /Téléchargements$ sudo chmod 755 xampp-linux-x64-5.5.19-0-installer.run
[sudo] Mot de passe de tuto :
tuto@tuto-PC:~/Téléchargements$

Deuxième étape : lancer l'exécutable en .run à partir d'une console :

tuto@tuto-PC:~/Téléchargements$ sudo ./xampp-linux-x64-5.5.19-0-installer.run
[sudo] Mot de passe de tuto :

Ensuite de ça, vous n'aurez qu'à cliquer sur le bouton « Next (Suivant) » dans chaque fenêtre de l'installateur. Vous trouverez ci-dessous quelques captures d'écrans prises lors de l'installation.

xampp_install-0

xampp_install-1

xampp_install-2

xampp_install-3

xampp_install-4

Si d'aventure, à la fin de l'installation, vous rencontrez cette erreur au lancement de xampp dans votre terminal : « Failed to parse arguments: Cannot open display », et que votre serveur MySQL ne démarre pas, allez dans l'onglet « Manage Servers », sélectionnez le serveur MySQL et cliquez sur le bouton « Start ». Normalemant, le serveur en question doit passer au vert. Perso, ce petit déboire m'est arrivé, et m'a pas mal pris la tête, pour rien en fait car la solution est toute simple. En fait, ce qu'il ne faut pas que j'oublie de mentionner, c'est que je me suis vu dans l'obligation de désinstaller xampp, et d'installer une version plus ancienne qui suffit largement dans la plupart des cas : le pack xampp-linux-x64-5.5.19-0-installer.run.

Configurer votre environnement XAMPP

XAMPP est installé dans le dossier : /opt/lampp/, et votre serveur Apache local (localhost - adresse IP = 127.0.0.1) a pour chemin : /opt/lampp/htdocs. Comme Linux et ses dérivés (dont Ubuntu) gérent de façon stricte les permissions (les droits) sur les dossiers et fichiers, avant d'aller plus loin, il est probable que vous ayez besoin de les modifier de la façon suivante (dans une console - un terminal) :

tuto@tuto-PC:~$ sudo chown -R tuto:tuto /opt/lampp/htdocs
[sudo] Mot de passe de tuto :
tuto@tuto-PC:~$

Je vous conseille de créer un nouveau dossier nommé « projets » (par exemple) dans /opt/lampp/, dans lequel vous allez mettre tous vos sites web locaux. Pour ce faire, vous allez entrer la commande mkdir dans une console, et voir le contenu de votre dossier htdocs (pour vérification) :

tuto@tuto-PC:~$ mkdir /opt/lampp/htdocs/projets
tuto@tuto-PC:~$ cd /opt/lampp/htdocs
tuto@tuto-PC:~$ ls
applications.html   bitnami.css   dashboard   favicon.ico   img   index.php   projets   webalizer
tuto@tuto-PC:~$

Démarrer et arrêter les serveurs

Pour démarrer vos serveurs Apache et MySQL, entrez la commande suivante dans une console (ou terminal, si vous préférez) :

tuto@tuto-PC:~$ sudo /opt/lampp/lampp start
[sudo] Mot de passe de tuto :
Starting XAMPP for Linux 5.5.28-0...
XAMPP: Starting Apache...ok.
XAMPP: Starting MySQL...ok.
XAMPP: Starting ProFTPD...ok
tuto@tuto-PC:~$

Après utilisation de XAMPP, il est fortement recommandé d'arrêter vos serveurs Apache et MySQL. Pour ce faire, entrez la commande suivante dans une console :

tuto@tuto-PC:~$ sudo /opt/lampp/lampp stop
[sudo] Mot de passe de tuto :
Stopping XAMPP for Linux 5.5.28-0...
XAMPP: Stopping Apache...ok.
XAMPP: Stopping MySQL...not running.
XAMPP: Stopping ProFTPD...not running.
tuto@tuto-PC:~$

Tester votre installation

Ouvrez votre navigateur internet Firefox et tapez dans la barre d'adresses : localhost (ou encore 127.0.0.1), et validez. Si tout s'est bien passé, vous allez obtenir une page d'accueil « Welcome to XAMPP » (localhost/dashboard - serveur local / tableau de bord) :

welcome

Créer votre première page web statique en html5 et css3

Maintenant, il est temps de vous lancer dans la création de pages web. Pour commencer, déplacez-vous dans le répertoire « projets » que vous avez créé ci-dessus. Pour ce faire, vous allez ouvrir une fenêtre « Fichiers » lanceur-fichiers. Dans la partie gauche de cette fenêtre, vous allez cliquer sur « Ordinateur ». Dans la liste des dossiers, vous allez double-cliquer sur « opt », puis sur « lampp », puis sur « htdocs », et enfin sur « projets ». Dans l'espace vide, vous allez faire un clic droit, et créer un nouveau dossier nommé « static ». Dans le dossier « static », vous allez créer un fichier « index.html » (clic droit > Nouveau document > Document vide). En faisant un clic droit sur ce fichier, vous allez l'ouvrir (en édition) avec « gedit ». Ensuite, vous allez faire un copier-coller du contenu ci-dessous dans votre fichier. N'oubliez pas de le sauvegarder !

<!doctype html>
<html>
   <head>
      <meta charset="utf-8" />
      <meta name="robots" content="noindex, nofollow" />
      <title>page HTML5 minimale</title>
      <link rel="stylesheet" type="text/css" media="all" href="minimum.css" />
   </head>
   <body>
      <h1>page HTML5 minimale</h1>
      <h4>Des milliers d'applications, des millions d'utilisateurs, une nouvelle façon d'utiliser votre ordinateur !</h4>
      <p style="text-align:center;"><img width="300px" height="106px" title="linux-humans" alt="linux-humans" src="http://ubuntu.i17.fr/uploads/images/9-colonne-gauche/linux-humans.png" /></p>
      <p>Rapide et séduisant, Ubuntu est un <a href="https://www.ubuntu-fr.org/">système d'exploitation intuitif et sécurisé</a>, idéal pour les ordinateurs de bureau, les serveurs, les netbooks et les ordinateurs portables. Ubuntu est libre, gratuit, et est composé de logiciels qui le sont également.</p>
   </body>
</html>

Dans la foulée, vous allez créer votre première feuille de style. Dans votre dossier « static », vous allez créer un nouveau fichier que vous nommerez « minimum.css ». Vous allez l'ouvrir avec « gedit », et y coller le code ci-dessous :

body {
   display:block;
   width: 600px;
   font-family: Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
   margin: 20px auto;
   border:2px solid #888;
   border-radius:10px 10px 10px 10px;
   -moz-border-radius:10px 10px 10px 10px;
   -webkit-border-radius:10px 10px 10px 10px;
}
h1, h4 {
   font-family: Arial, Helvetica, sans-serif;
   padding: 20px;
}
p {
   font-size: 0.9em;
   padding: 20px;
   text-align: justify;
}
/* style des liens */
a {
   color: #383;
   text-decoration: none;
}
a:hover, a:focus {
   color: #f00;
   text-decoration: underline;
}

Ceci fait, ouvrez un onglet dans votre navigateur Firefox, et entrez dans la barre d'adresses : « localhost/projets », puis validez. Cet onglet va vous afficher une page web avec la liste des dossiers qui se trouvent dans « projets » :

index-of-projets

Cliquez sur le lien « static », et vous verrez s'afficher votre première page web statique en html5 et css3.

Créer votre premièrer page web dynamique avec PHP

Pour créer une page web dynamique, vous allez écrire votre premier script en langage PHP. Je vous propose de :

  • Créer un dossier « dynamic » dans votre répertoire « projets »
  • Créer un fichier « index.php » à l'intérieur de votre dossier « dynamic »
  • Le chemin absolu vers ce fichier sera : /opt/lampp/htdocs/projets/dynamic/
  • Dans le fichier « index.php », faites un copier-coller du code ci-dessous
  • Sauvegardez votre fichier « index.php »
  • Ouvrez un nouvel onglet dans votre navigateur Firefox
  • Entrez « localhost/projets » dans la barre d'adresses
  • Cliquez sur le lien « dynamic »
  • Et voilà : votre premièrer page web dynamique s'affiche

<?php
$aujourhui = date("l d m Y");
echo '<h3>Nous sommes le : ' . $aujourhui . '</h3>';
$heure = date('H');
$minute = date('i');
$seconde = date('s');
echo '<h3>Au moment ou j\'ai ouvert cette page, il &eacute;tait : ' . $heure . ' heure,' . $minute . ' minutes, et ' . $seconde . ' secondes</h3>';
$jour_code = date('w');
if (($jour_code == 0) or ($jour_code == 6)) {
   echo '<p>Nous sommes le week-end, je ne travaille pas.</p>';
} else {
   echo '<p>Nous sommes un jour de semaine, je travaille.</p>';
}
?>

Vous trouverez ci-dessous une copie d'écran de l'éditeur de texte « gedit », qui bénéficie d'une « coloration syntaxique ».

editeur-gedit

Installer un lanceur XAMPP dans votre bureau Unity

Pour vous simplifier la vie, si vous comptez utiliser XAMPP souvent, vous pouvez facilement créer un lanceur pour votre bureau Unity. Ouvrez une console, et entrez les commandes qui suivent (afin de créer un fichier « xampp.desktop »). Remarque : si la commande « gksudo » n'est pas installée, installez la en tapant « sudo apt install gksu » comme indiqué ci-dessous :

tuto@tuto-PC:~$ cd /usr/share/applications
tuto@tuto-PC:/usr/share/applications$ sudo touch xampp.desktop
[sudo] Mot de passe de tuto :
tuto@tuto-PC:/usr/share/applications$ gksudo gedit xampp.desktop
Le programme « gksudo » n'est pas encore installé. Vous pouvez l'installer en tapant :
sudo apt install gksu
tuto@tuto-PC:/usr/share/applications$ sudo apt install gksu
Lecture des listes de paquets... Fait
.....................................
Traitement des actions différées (« triggers ») pour libc-bin (2.23-0ubuntu3) ...
tuto@tuto-PC:/usr/share/applications$ gksudo gedit xampp.desktop

Dans l'éditeur de texte gedit, faites un copier-coller du code ci-dessous, puis sauvegardez le fichier.

[Desktop Entry]
Version=1.0
Type=Application
Terminal=Terminal
Categories=GNOME;GTK;
Exec=xterm -e 'sudo /opt/lampp/lampp start'
Name=Xampp
Comment=
Icon=/opt/lampp/htdocs/favicon.ico
 
X-Ayatana-Desktop-Shortcuts=Start;Restart;Stop;+++++
 
[Start Shortcut Group]
Name=Demarrer
Exec=xterm -e 'sudo /opt/lampp/lampp start'
OnlyShowIn=Unity
 
[Restart Shortcut Group]
Name=Re-demarrer
Exec=xterm -e 'sudo /opt/lampp/lampp restart'
OnlyShowIn=Unity
 
[Stop Shortcut Group]
Name=Arreter
Exec=xterm -e 'sudo /opt/lampp/lampp stop'
OnlyShowIn=Unity

Ouvrez votre tableau de bord, vous allez y trouver votre lanceur dans l'onglet « Applications ». Cliquez dessus : il va se placer dans votre barre de lanceurs. Faites un clic droit sur son icône, et choisissez « Conserver dans le lanceur ». Voilà : c'est fait. Pour utiliser votre lanceur, vous ferez un clic droit dessus et choisirez votre option : Démarrer, Re-démarrer, ou Arrêter. C'est quand même plus rapide qu'avec la console !

lanceur-xampp

Voir fonctionner votre XAMPP en « live »

Le tutoriel (YouTube) qui suit va vous permettre de découvrir comment fonctionne XAMPP, avec les deux exemples que j'ai décrit ci-dessus.

Gérer ses bases de données avec phpMyAdmin

Si vos serveurs locaux sont bien démarrés, vous pouvez lancer phpMyAdmin, en utilisant ce lien. Avec cet outil, vous allez pouvoir créer et gérer vos bases de données MySQL (voir image ci-dessous).

phpMyAdmin_local

Si vous développez une appli nécessitant une bdd, les paramètres d'accès à une base de données locale (par défaut) sont les suivants :

  • Nom du serveur (hostname) = localhost
  • Nom d'utilisateur (username) = root
  • Mot de passe (password) = [champ vide]
  • Nom de la bdd (database) = nom_de_votre_bdd

Post-scriptum : si vous n'êtes pas à l'aise avec la langue de Shakespeare, vous pouvez consulter le lexique qui se trouve dans ce site.

Désinstaller XAMPP de votre PC

Il peut arriver, pour une raison quelconque, que vous ayez à désinstaller l'application XAMPP. Si tel est le cas, vous pouvez procéder ainsi, dans une console (euh... un terminal) :

tuto@tuto-PC:~$ sudo /opt/lampp/uninstall
Mot de passe [sudo] pour tuto :
tuto@tuto-PC:~$

Une fois que le wizard de désinstallation est terminé, vous pouvez supprimer le dossier lampp qui se trouve dans /opt :

tuto@tuto-PC:~$ rm -R /opt/lampp
Mot de passe [sudo] pour tuto :
tuto@tuto-PC:~$

Celà fait, il ne reste plus aucune trâce de lampp (XAMPP) sur votre ordi. ATTENTION ! Il va de soit qu'avant de désinstaller xampp, il faut faire des sauvegardes de tous vos projets, et de toutes vos bases de données MySQL.

 

Page re-mise à jour le 09-04-2020

 

 

Page précédente : Outils Google Page suivante : Créer un site web gratuitement chez free