Créer une interface de gestion en Ajax pour Pure-FTP

Dans ce tutoriel, nous allons comment créer une interface de gestion en Ajax pour notre serveur FTP Pure-FTP afin de nous faciliter la tâche et gérer facilement nos utilisateurs FTP. Si vous souhaitez déléguer la création, suppression, … des utilisateurs FTP de votre entreprise, il peut être judicieux de créer une petite interface graphique pour vos collègues moins à l’aise que vous en ligne de commande. Pour réaliser ce projet nous aurons besoin d’un serveur LAMP et d’AJAX.

Présentation du projet de création d’une interface de gestion en Ajax

Le but est d’afficher le contenu de la table MySQl qui stocke vos utilisateurs FTP ainsi que leurs options. Pour cela nous allons utiliser le mode tableau.

Les tableaux HTML sont largement utilisés dans les applications Web pour afficher des données en lignes et en colonnes. Les tableaux ne sont que des éléments HTML et ne peuvent être utilisés que pour afficher des enregistrements. Mais si vous voulez des tableaux HTML interactifs et dotés de fonctions telles que le tri, la recherche et la pagination, vous êtes au bon endroit.

Dans ce tutoriel, vous allez découvrir le plugin jQuery Datatables pour créer des tableaux HTML interactifs et riches en fonctionnalités avec des données dynamiques. Nous allons utiliser la tables des utilisateurs de Pure-FTP (créer dans ce tutoriel) en direct pour ajouter, mettre à jour et supprimer des enregistrements avec PHP et MySQL. Nous nous occuperons de rafraîchir les tables de données lorsqu’un enregistrement est mis à jour ou supprimé dans la table.

Nous couvrirons ce tutoriel étape par étape en créant un exemple de table de données en direct pour ajouter, modifier et supprimer des enregistrements avec PHP et MySQL. En route.

N’étant pas un programmeur averti, je me suis basé sur un script existant trouvé sur Internet. J’ai modifié ce script pour l’adapter à mes besoins pour ce projet.

Voici à quoi va ressembler notre interface à la fin du tutoriel. (Les champs seront différents) :

Étape 1 : Créer une table de base de données MySQL

La base MySQL a été créé dans le tutoriel : Installer un serveur FTP Sécurisé, que je vous engage à lire avant.  Notre base de travail s’appellera PUREFTPD_BDD qui contient une table users (Cette table contient tous les utilisateurs devant avoir accès à votre serveur FTP et leurs options associées).

USE PUREFTPD_BDD;
CREATE TABLE users (
User varchar(16) NOT NULL default '',
status enum('0','1') NOT NULL default '0',
Password varchar(64) NOT NULL default '',
Uid varchar(11) NOT NULL default ’-1’,
Gid varchar(11) NOT NULL default ’-1’,
Dir varchar(128) NOT NULL default '',
ULBandwidth smallint(5) NOT NULL default '0',
DLBandwidth smallint(5) NOT NULL default '0',
comment tinytext NOT NULL,
ipaccess varchar(15) NOT NULL default '*',
QuotaSize smallint(5) NOT NULL default '0',
QuotaFiles int(11) NOT NULL default 0,
PRIMARY KEY (User),
UNIQUE KEY User (User)
) ENGINE=MyISAM;

Étape 2 : Inclure les fichiers Bootstrap, jQuery et Datatables

Dans le fichier header.php, créé dans le répertoire suivant /var/www/html/admin-pureftp/inc, nous allons inclure les fichiers Bootstrap, jQuery et le plugin jQuery Datatables.

Afin de faire un script propre, nous allons créer un répertoire inc, dans lequel nous mettrons tous nos appels de fonctions.

Pour assurer la mise en forme de notre tableau nous allons faire appel à des fonctions existantes (inutile de réinventer la roue). Il faut créer un autre répertoire nommé js avec les fichiers javascript suivant dedans :

Puis un répertoire css, avec dedans le fichier :

• DataTables.bootstrap.min.css

Étape 3 : Créer un tableau HTML

Dans le fichier index.php, nous allons créer une table HTML pour lister les enregistrements des utilisateurs FTP de votre base. Le tableau HTML sera converti en tables de données avec la liste des enregistrements des utilisateurs.

Dans le fichier index.php :

Dans ce tableau; nous allons afficher toutes les informations de vos utilisateurs FTP. Pour cela nous allons utiliser les fonctions plugin jQuery Datatables pour la mise en page.

A ce stade, si vous souhaitez afficher la page pour voir ce que cela donne vous aurez un message d’erreur, car l’accès à la base de données ne doit pas être bon.

Étape 4 : Charger les tables de données avec les enregistrements des utilisateurs

Dans le fichier JavaScript data.js (qui se trouve dans /js), nous allons initialiser les bases de données et charger les enregistrements des employés en faisant une demande Ajax à l’action listEmployee pour appeler la méthode employeeList() de la classe Employee afin de retourner les données JSON des utilisateurs FTP.

Les paramètres d’accès à la base de données se font dans le fichier config.php, présent à la racine. Vous devez saisir le nom du serveur (ici vu que tout est en local, c’est localhost), le username, password et le nom de la base de données.

Etape 5 : Obtenir la liste des utilisateurs FTP à partir des tables de la base de données MySQL

Dans le fichier Employee.php (à la racine), nous allons créer la méthode employeeList() pour obtenir la liste des utilisateurs FTP selon la requête de données Datatables et retourner la liste des utilisateurs FTP sous forme de données JSON.

Dans le fichier Employée.php à la  :

A ce stage du tutoriel, si vous afficher la page, vous devriez avoir ceci :

Si vous souhaitez ne pas effectuer de tri sur les colonnes de votre tableau, vous devez indiquer le numéro de la colonne à exclure (la numérotation commence à 0). Ici seul les 2 dernières colonnes (12 et 13) sont concernés, puisque c’est des boutons d’actions.

Étape 6 : Créer un formulaire HTML modal pour ajouter des enregistrements ou effectuer des mises à jour de données.

Dans le fichier index.php, nous allons créer un modèle HTML Bootstrap pour ajouter et mettre à jour les nouveaux enregistrements.

Cette étape peut-être un peu compliqué car nous allons devoir rajouter quelques variables, pour avoir la possibilité de modifier nos 12 champs qui composent notre table Utilisateurs FTP.

La principale difficulté sera de repéré votre clé primaire dans votre table (une clé primaire permet d’identifier de manière unique un enregistrement), puis de modifier les champs dans les fichiers.

En ce qui concerne ce tutoriel, la clé primaire est le champs User (attention aux majuscules c’est important).

Vous devez éditer le fichier js/data.js :

• Ligne 29, vous devez modifier la clé primaire qui fera le lien pour l’enregistrement sélectionné.

var empUser = $(this).attr("User");

• A partir de la ligne 36, il faut ajouter vos champs à vous de votre table. Attention à bien respecter le nom des champs de la table en particulier si il y a une majuscule ou minuscule. La ligne à rajouter pour chaque champs est de ce type :

$('#empUser').val(data.User); //ou User est un champ de ma table.

Vous devez éditer le fichier index.php :

• A partir de la ligne 47, vous devez créer les champs qui nous permettront soit de rajouter un utilisateur ou de modifier un utilisateur existant.

<div class="form-group">

   <label for="status" class="control-label">Status</label>

   <input type="number" class="form-control" id="empStatus" name="empStatus" placeholder="Status" required>

</div>

Il suffit de réutiliser les variables déclarer le fichier data.js dans id et name, attention aussi au type de votre variable.

Vous devez éditer le fichier Employée.php :

• A partir de la ligne 101, vous devez modifier la clé primaire pour faire la jonction de la fonction getEmployee().

A ce stade, si vous cliquer sur le bouton Update de votre tableau, tous les champs seront repris. Attention toutefois vous ne pouvez pas les modifier pour l’instant !

Étape 7 : Gestion de l’ajout d’un nouvel enregistrement d’un utilisateur FTP

Dans data.js, nous allons gérer le formulaire modal Bootstrap submit pour soumettre le formulaire et faire une requête Ajax pour envoyer des données à l’action addEmployee pour appeler la méthode addEmployee() de la classe employée pour insérer de nouveaux enregistrements d’utilisateurs FTP dans la base de données.

Etape 8 : Sauvegarder le nouvel enregistrement d’un utilisateur FTP dans la table de la base de données

Dans la classe Employee.php, nous allons créer une méthode pour insérer un enregistrement d’utilisateur dans la table Users.

Ici nous utilisons l’instruction INSERT dans la fonction addEmployee() pour ajouter un nouvel enregistrement dans la base. C’est ici que vous devez rajouter vos champs si vous en avez d’autres.

Avant d’insérer le mot de passe du compte, vous devrez le transformer en MD5, vous pouvez utiliser ce site : https://www.md5.fr/

Étape 9 : Enregistrer les modifications d’un utilisateur FTP

A l’étape 6, nous avons affiché les informations d’un utilisateur FTP dans un formulaire, sans pouvoir enregistrer les modifications effectuées. Nous allons maintenant exécuter une requête Update.

Il faut ouvrir le fichier Employee.php et modifier la fonction updateEmployee().

Étape 10 : Gestion de la suppression d’un utilisateur FTP

Maintenant pour que notre gestion des utilisateurs de notre FTP soit complète, il nous reste à gérer la suppression des utilisateurs.

Dans le fichier data.js, nous allons gérer la suppression de l’enregistrement des utilisateurs en faisant une requête Ajax à l’action empDelete et en appelant la méthode deleteEmployee() pour supprimer l’enregistrement de l’utilisateur FTP.

C’est ici que vous pouvez modifier le message de confirmation avant la suppression de l’utilisateur.

Dans le fichier Employee.php, nous allons créer la méthode deleteEmployee() pour supprimer un enregistrement d’utilisateur dans la table de la base de données.

Maintenant vous pouvez supprimer facilement un utilisateur.

Compléments

Pout utiliser au mieux votre linux, vous pouvez consulter ce tutoriel, qui vous détaille quelques commandes d’administration Linux du quotidien. Il reste sûrement des améliorations à faire dans le code pour améliorer notre interface de gestion en Ajax pour Pure-FTP. Je mets le projet sur mon GitHub. Vous pouvez déjà l’utiliser pour administrer facilement les comptes de votre serveur FTP.