Gestion de données distante en Javascript et Json

Articles-fr / Par

Lorsque PHP était la seule manière d’échanger avec une base de données, on ne se posait pas la question sur la technologie à employer : on utilisait simplement un code PHP combiné aux requêtes SQL. Cependant depuis 2006, de nombreux Framework ont émergés à partir du Javascript qui était jusque là délaissé. Les plus connus étant jQuery, React, Angular, Vue, entre autres…

C’est à ce moment que Javascript a connu sa plus grande expansion et constitue toujours aujourd’hui l’un des langages le plus utilisé pour dynamiser un site web et créer une application tout en gardant la même base de code (framework agnostique).

Vous trouverez ici les connaissances nécessaires pour afficher et mettre à jour votre base de données de manière asynchrone. Tout est développé en Javascript, jQuery, JSON, PHP et SQL. L’utilisation d’un Framework aurait permis ici de combiné directement ces technologies.

Sachez que pour cet exemple, la structure du dossier à son importance. Toutes procédures et fichiers PHP doivent être dans un dossier « serveur » et le code HTML/JS/CSS dans un dossier client.

Pré-requis et installation

Des pré-requis sont nécessaires en Javascript et PHP SQL pour comprendre l’intégralité de l’exemple expliqué ci-dessous. La première étape est tout d’abord de créer un dossier « MyProject ». Ajoutez y un fichier index.html. Vous devrez aussi avoir un serveur local et créer votre base de données sur Phpmyadmin. Y intégrer une table post avec : un ID (clef primaire – auto-increment), un titre (varChar), une description et un timeStamp (auto completed).

Pour donner une structure de base propre, éviter d’écrire le CSS à la main et garder une bonne visibilité sur navigateur, j’utilise ici Bootstrap. Veillez un bien l’intégrer sur vos pages. Il n’est cependant pas nécessaire de l’utiliser.

Le plus important à importer sur votre projet sont les fichiers jQuery et GetUri. Veillez aussi à créer une base sur PhpMyAdmin. Sans ces derniers il sera impossible de dialoguer avec votre base de données.

Dans votre header, ajoutez :

<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Intégration des librairies jQuery et getUri -->
<script src="jquery.js"></script>
<script src="geturi.js"></script>

<!-- jQuery - Link -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">

Vous pouvez aussi intégrer la librairie Bootstrap (cependant pas nécessaire) :

<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
<!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
<!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Créez un fichier de connexion.php pour se connecter à la base.

try{
  $servername = "localhost";
    $username = "root";
    $password = "root";
    $dbname = "db_name";
  $bdd = new PDO('mysql:host='.$servername.';dbname='.$dbname, $username, $password);
  $bdd->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}

catch (PDOException $e) {
  die('Erreur : ' . $e->getMessage()); 
}

Sans les étapes cités ci-dessus, il vous sera totalement impossible de poursuivre. La librairie jQuery est indispensable pour transmettre des données en interprétant le JSON ; getUri vous allouera la possibilité de pouvoir jouer avec vos variables à partir de l’url ; et enfin la connexion à votre base qui est bien évidemment indispensable afin de connecter votre base de données à l’interface client.

Affichage des données

Lorsque votre environnement est prêt et que tous les pré-requis décris précédemment sont remplis ; vous pouvez alors poursuivre avec la création d’un fichier find-posts.js qui vous permettra de récupérer et d’afficher vos requêtes sur l’ index.html.

Déclarer le script dans le header de votre index.html

<script type="text/javascript" src="find-posts.js"></script>

Ajouter simplement une div avec id dans le body de votre index.html.

<div id="posts-feed"></div>

Ensuite, au niveau de votre fichier find-posts.js ; ici le Javascript (code jQuery entre autre) fait une requête Ajax sur le serveur. Cette requête récupère le résultat renvoyé par le fichier find-post.php (détaillé prochainement) et retourne le résultat instantanément dans l’élément HTML ayant un id= »posts-feed ».

var url = '../server/find-posts.php'; $(document).ready(function(){
     load_data();
     function load_data(page)
     {
         $.ajax({
             url: url,
             method:'POST',
             data:{page:page},
             success:function(data){
                 $('#posts-feed').html(data);
             }
         })
     }
 });

Ensuite, votre fichier PHP fait la recherche d’articles sur la base de données. Le résultat est récupéré et intégré dynamiquement au HTML. Enfin, l’ensemble est renvoyé en echo sous format JSON pour être capté par le fichier find-posts.js.

Créez donc un fichier find-post.php qui sera responsable d’effectuer la requête vers votre base de données et renvoyer les résultats déjà formatés en HTML. Ici il aurait été possible (certainement mieux) de renvoyer les données sous format JSON. Cependant ici, compte tenu du fait que cette API peut être utilisée pour des plateformes web ou application mobile, nous allons directement définir la structure HTML. 

// Connexion to the database
require 'connexion.php';
// Select all the content from the table "post"
$q="SELECT * FROM post";
$reponse = $bdd->query($q);

// DISPLAY RESULT
while ($row = $reponse->fetch()) {
  // HTML EXPORT
  $output .= '
    <article class="col-md-3 col-sm-6 col-xs-12" style="padding:0px 20px 20px 20px;">
      <h1>
        '.$row["title"].'
      </h1>
      <small>Post id: '.$row["id"].' | Date: '.$row["date"].'</small>
      <p>
        '.$row["description"].'
      </p>
      <a href="post-edit.html?id='.$row["id"].'" class="btn btn-primary"> Edit Post </a>
    </article>';
}

// CLOSE HTML
$output .= '</div>';

// RETURN RESULTS
echo $output;

Prenez en compte que les fichiers HTML et JS sont des fichiers interprétés par le côté client. Les fichiers PHP sont eux intégré au serveur. Il est donc préférable de segmenté en 2 sous dossiers /client et /serveur pour avoir une structure de fichier correct si vous souhaitez compiler votre code en application mobile. Le code qu’il est notamment possible d’émuler est celui contenu dans le dossier client uniquement. Le PHP n’est malheureusement pas un code interprétable/compilable.

Mise à jour de la base de données

  • Dans le dossier client : Un fichier update-post.html qui sera le formulaire utilisateur dans lequel il sera possible de mettre à jour les données.
  • Aussi côté client : Un fichier find-post-by-id.js qui va récupérer le post sélectionné et intégrer les données au formulaire. Et un fichier update-post-by-id.js qui permettra d’envoyer les informations à votre base une fois que le formulaire sera validé.
  • Et enfin dans le dossier serveur : Un fichier find-post-by-id.php et update-post-by-id.php qui feront la passerelle entre les fichiers Javascript et la base de données.

Tout d’abord, les informations de base à intégrer à votre header.

<script src="jquery.js"></script>
 <!-- Get Uri > For Embed App -->
  <script type="text/javascript" src="geturi.js"></script>
  <script type="text/javascript">
  var post_id = decodeURI(getUrlVars()["id"]);
  var title = "";
  var description = "";
  </script>
  <script type="text/javascript" src="find-post-by-id.js"></script>

La suite en terme de HTML est très minimale. Votre formulaire (champs inputs notamment) sera intégré dans vos requêtes.

<section class="container">
    <div class="row">
      <h1>Posts Edit</h1>
    </div>
    <div class="row">
      <div class="form-signin" id="post-edit"></div>
    </div>
  </section>

Au niveau du fichier find-post-by-id.js

var url = '../server/find-post-by-id.php?id='+post_id;

$(document).ready(function(){
    load_data();
    function load_data(page)
    {
        $.ajax({
            url: url,
            method:'POST',
            data:{page:page},
            success:function(data){
                $('#post-edit').html(data);
            }
        })
    }
});

En ce qui concerne le fichier update-post-by-id.js

function updatePost(){
     // Variables
     title = document.getElementById("title").value;
     description = document.getElementById("descr").value;
     var url = "../server/update-post-by-id.php";
 // alert("id:"+post_id+" | title:"+title+" | descr:"+description+" | url:"+url);   
   $.ajax({
        type: "GET",
        url: url,
        dataType:'json',
        data: {
            'id': post_id,
            'title': title,
            'description': description,
        },
        crossDomain: true,
        cache: false
    });

    setTimeout(function() { 
        document.location.href="index.html";
    }, 50);
}

Ensuite côté serveur, pour le find-post-by-id.php

// Connexion to the database
 require 'connexion.php';
 $Post_id = $_GET['id'];
 // Select all the content from the table "post"
 $q="SELECT * FROM post WHERE id='$Post_id' LIMIT 1";
 $reponse = $bdd->query($q);
 // DISPLAY RESULT
 while ($row = $reponse->fetch()) {
   // HTML EXPORT
   $output .= '
    <small>Post id :'.$row["id"].' | Date : '.$row["date"].' </small>
    <p>
      <input name="title" id="title" value="'.$row["title"].'" type="text" class="form-control ">
      <input name="descr" id="descr" value="'.$row["description"].'" type="text" class="form-control">
    </p>
    <button onclick="updatePost();" class="btn btn-primary">
      Update Post
    </button>
    <br>';
 }
 // RETURN RESULTS
 echo $output;

Et enfin le fichier update-post-by-id.php

require 'connexion.php';
 // Grab the variables form the JSON
 $Post_id= $_GET['id'];
 $Post_title= $_GET['title'];
 $Post_description= $_GET['description'];
 // SQL request to the Database
 $request = "UPDATE post SET title='$Post_title', description='$Post_description' WHERE id='$Post_id'";
 $result = $bdd->query($request);

Ajouter et supprimer des données

En suivant la procédure faite précédemment pour la mise à jour, l’implémentation pour ajouter ou supprimer des données est presque la même. En copiant-collant simplement le code ci-dessus à partir des fichiers JS et PHP, en les renommant avec des noms différents et porteurs de sens, la seule chose à faire est de modifier les requêtes SQL du côté serveur. Le formulaire d’ajout d’articles n’a même pas besoin d’être généré en JS et pour la suppression il y a simplement un bouton où il faut s’assurer qu’il pointe sur le bon id d’article.

Si beaucoup d’entre vous sont bloqués, je mettrai à jour cet article avec le code correspondant. Cependant, si vous avez compris et appliqué correctement les étapes précédentes, la mise en œuvre de l’ajout et de la suppression de données devrait être facile pour vous à implémenter.

Related Posts