Blog ENI : Toute la veille numérique !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. Apprendre à développer avec JavaScript
  3. Stockage distant (Ajax
Extrait - Apprendre à développer avec JavaScript Des bases à l'utilisation de frameworks (5e édition)
Extraits du livre
Apprendre à développer avec JavaScript Des bases à l'utilisation de frameworks (5e édition) Revenir à la page d'achat du livre

Stockage distant (Ajax - PHP - MySQL - XML)

Présentation générale de la solution

Dans les deux chapitres précédents, nous avons vu comment stocker des données sur le poste client par l’intermédiaire de cookies et par l’intermédiaire des objets de Web Storage (sessionStorage et localStorage).

Ces solutions sont tout à fait satisfaisantes pour de la persistance de données à petite échelle (mémorisation de paramètres utiles lors de la navigation entre les pages d’un même site web, stockage des préférences utilisateur...). Il est aussi possible d’avoir recours aux objets de Web Storage pour réaliser une saisie de données en mode non connecté avec ensuite synchronisation avec le serveur une fois la connexion rétablie.

La solution de persistance avec un stockage des données centralisé sur un serveur distant est bien sûr préférable (éventuellement avec un complément en Web Storage). La mise en œuvre en est bien évidemment plus complexe. C’est justement l’objet du présent chapitre.

L’objectif va être de pouvoir accéder à des données entreposées dans un système  de gestion de base de données (SGBD) MySQL via les protocoles HTTP et SOAP par l’intermédiaire d’une librairie de fonctions PHP NuSOAP....

Mise en œuvre du stockage distant au travers d’exemples

Deux exemples complets de mise en œuvre vont vous être présentés.

Pour les besoins de ces exemples sera utilisée une table de nom voitures comportant trois champs :

  • code_voiture sur quatre caractères (code de la voiture).

  • libelle_voiture sur 20 caractères (libellé de la voiture).

  • vitesse_maximale_voiture en entier (vitesse maximale que la voiture peut atteindre, sur circuit bien sûr !).

Dans le cadre de vos expérimentations personnelles, vous ne pourrez pas utiliser la base de données support des exemples du livre. L’identifiant et le mot de passe sont d’ailleurs masqués dans les reproductions des codes sources qui vont suivre.

Il vous faudra donc disposer d’un SGBD MySQL auquel vous aurez accès. L’obtention ou la réservation d’un accès à un tel type de serveur sortent du cadre de notre exposé dans ce livre.

Pour que vous puissiez tester les exemples, il vous faudra donc déployer une table de nom voitures sur votre serveur MySQL et bien sûr renseigner l’identifiant et le mot de passe de connexion dans les scripts.

Pour faciliter le déploiement, un script SQL de création de la table voitures est fourni ci-après. Il vous faudra l’exécuter dans la fenêtre SQL de votre interface d’administration MySQL (PHPMyAdmin en règle générale).

CREATE TABLE voitures( 
    code_voiture CHAR(4), 
    libelle_voiture CHAR(20), 
    vitesse_maximale_voiture INTEGER 
); 

Un jeu d’essai doit aussi être mis en place pour l’exploitation des exemples. Vous pourrez exécuter le script ci-dessous pour peupler votre table voitures :

INSERT INTO voitures (code_voiture, libelle_voiture,  
vitesse_maximale_voiture) 
VALUES ("V001", "Porsche 930 Turbo", 290); 
INSERT INTO voitures (code_voiture, libelle_voiture,  
vitesse_maximale_voiture) 
VALUES ("V002", "Porsche 964 Turbo", 300); 
INSERT INTO voitures (code_voiture, libelle_voiture,  
vitesse_maximale_voiture) 
VALUES ("V003", "Ferrari 430", 320); 

Les deux scripts SQL ainsi que tous les scripts des exemples de ce livre sont téléchargeables gratuitement sur le site des Éditions ENI.

1. Exemple 1 : Accès Ajax sur BDD MySQL (liste de l’ensemble des voitures)

Dans un premier exemple, le listage de tous les enregistrements d’une table MySQL de nom voitures est prévu.

Ce premier exemple utilise essentiellement quatre éléments :

  • un script HTML (contenant bien sûr également des séquences de code JavaScript) de nom client_ws_01.htm,

  • un script PHP de nom serveur_ws_01.php,

  • un script PHP nusoap.php,

  • une table MySQL de nom voitures (évoquée précédemment).

Pour pouvoir utiliser ces scripts dans le cadre d’une expérimentation personnelle, les fichiers client_ws_01.htm, serveur_ws_01.php et nusoap.php devront être placés par votre client FTP habituel (Mozilla Filezilla par exemple) dans un répertoire (par exemple de nom js_nusoap) sur votre serveur web.

Une fois de plus l’obtention...