Imprimer cette page

Serveur local XAMPP

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

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 gratuite 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-5.5.28-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-5.5.28-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) :

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

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

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

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

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) :

moi@moi-PC:~$ sudo chown -R moi:moi /opt/lampp/htdocs
[sudo] Mot de passe de moi :
moi@moi-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) :

moi@moi-PC:~$ mkdir /opt/lampp/htdocs/projets
moi@moi-PC:~$ cd /opt/lampp/htdocs
moi@moi-PC:~$ ls
applications.html   bitnami.css   dashboard   favicon.ico   img   index.php   projets   webalizer
moi@moi-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) :

moi@moi-PC:~$ sudo /opt/lampp/lampp start
[sudo] Mot de passe de moi :
Starting XAMPP for Linux 5.5.28-0...
XAMPP: Starting Apache...ok.
XAMPP: Starting MySQL...ok.
XAMPP: Starting ProFTPD...ok
moi@moi-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 :

moi@moi-PC:~$ sudo /opt/lampp/lampp stop
[sudo] Mot de passe de moi :
Stopping XAMPP for Linux 5.5.28-0...
XAMPP: Stopping Apache...ok.
XAMPP: Stopping MySQL...not running.
XAMPP: Stopping ProFTPD...not running.
moi@moi-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 :

moi@moi-PC:~$ cd /usr/share/applications
moi@moi-PC:/usr/share/applications$ sudo touch xampp.desktop
[sudo] Mot de passe de moi :
moi@moi-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
moi@moi-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) ...
moi@moi-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.

Résoudre le problème d'accès à phpMyAdmin

Au lancement de phpMyAdmin, en utilisant ce lien, vous allez certainement obtenir le message d'erreur ci-dessous.

phpMyAdmin_issue

Après avoir effectué quelques recherches sur le web, je me suis rendu compte que certaines personnes ont mis des heures à résoudre ce problème. Il existe pourtant une solution très simple pour faire fonctionner phpMyAdmin. Il suffit de changer le propriétaire du dossier « lampp » dans une console :

moi@moi-PC:~$ sudo chown -R mon_compte:mon_groupe /opt/lampp
Mot de passe [sudo] pour moi :
moi@moi-PC:~$

Ensuite de quoi, il faut s'attribuer toutes les « permissions » sur l'ensemble du contenu du répertoire « lampp ».On peut le faire en mode graphique :

  1. On ouvre l'explorateur de fichiers
  2. On se place dans le dossier « opt »
  3. On fait un clic droit sur le répertoire « lampp »
  4. On choisi « Propriétés » et on va dans l'onglet « Permissions »
  5. On s'attribue les permissions comme indiqué dans l'image 1 ci-dessous
  6. On clique sur « Changer les permissions pour les fichiers »
  7. On se donne les permissions comme indiqué dans l'image 2 ci-dessous
  8. On clique sur le bouton « Changer »

change_permissions

apply_to_all_files

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.

 

Page précédente : Outils Google Page suivante : Problèmes-Solutions