Rendre le javascript dynamique par apport à une base de données

Dernière mise à jour le par @karamel .

Rendre le javascript dynamique par apport à une base de données

Introduction

Rappel

Le javascript est un langage de programmation Internet coté client. L'avantage de ce langage est de pouvoir manipuler les objets du browser du client facilement mais son inconvénient est qu'il ne peut accéder à une base de données.

Pour pouvoir utiliser, en javascript, des informations contenues dans une base, nous devons effectuer une simulation d'accès grâce au PHP qui lui est un langage coté serveur. Comment accéder à ces données sans recharger la page ?

Explication

Le principe de simulation d'accès est de 'créer' le javascript grâce à PHP lors du chargement de la page. Le contenu du javascript sera alors dynamique par apport à la base, ce qui est le but recherché. Cela permet de ne toucher qu'à la base de données au lieu de retoucher ses pages web. Ce qui est plus pratique et ce que je conseille vivement pour éviter certains 'oublis'.

L'apprentissage par l'exemple

Création de la base de donné et de la table

Nous allons, pour cet exemple, créer une base Test qui contiendra une table Ingredient avec comme champs :

  • ID integer auto-increment Primary Key
  • LIBELLE varchar 50
  • TYPE varchar 2

En SQL :

CREATE DATABASE 'Test' ;
CREATE TABLE 'Ingredient' (
'ID' INT NOT NULL AUTO_INCREMENT ,
'LIBELLE' VARCHAR(50) NOT NULL ,
'TYPE' VARCHAR(2) NOT NULL ,
PRIMARY KEY ('ID')
);

Ajout des donnés

Ensuite nous allons ajouter quelques données dans la table :

INSERT INTO ' Ingredient ' ('ID', 'LIBELLE', 'TYPE') 
VALUES ('', 'Pomme', '1');

INSERT INTO ' Ingredient ' ('ID', 'LIBELLE', 'TYPE') 
VALUES ('', 'Poire', '1');

INSERT INTO ' Ingredient ' ('ID', 'LIBELLE', 'TYPE') 
VALUES ('', 'Banane', '1'); 

INSERT INTO ' Ingredient ' ('ID', 'LIBELLE', 'TYPE') 
VALUES ('', 'Poireau', '2');

INSERT INTO ' Ingredient ' ('ID', 'LIBELLE', 'TYPE') 
VALUES ('', 'Carotte', '2');

INSERT INTO ' Ingredient ' ('ID', 'LIBELLE', 'TYPE') 
VALUES ('', 'Courgette', '2');

creation d'une table

Nous allons ensuite créer une table Categorie avec comme champs :

  • ID INTEGER auto-increment Primary Key
  • LIBELLE VARCHAR 50
CREATE TABLE 'Categorie' ( 
'ID' INT NOT NULL AUTO_INCREMENT ,
'LIBELLE' VARCHAR(50) NOT NULL ,
PRIMARY KEY ('ID') 
);

Dont nous insérons comme données

INSERT INTO 'Categorie' ('ID', 'LIBELLE') 
VALUES ('', 'Fruit');

INSERT INTO 'Categorie' ( 'ID' , 'LIBELLE' ) 
VALUES ('', 'Légume');

Nous avons fini de créer la base de test. Comme vous pouvez le voir L'ID de la catégorie nous permet de 'classer' les ingrédients.

Passons du coté du code.

la partie html

Nous allons créer une page web banale qui contiendra un 'select' pour le choix de la catégorie (le select est rempli en PHP) ainsi qu'un 'input type=text' pour la visualisation du résultat.

<?php
    mysql_connect("localhost", "root", "") or die("Impossible de se connecter :  " . mysql_error());
    mysql_select_db("Test");
? >

<html>
<body>
    <select name='categorie'>
        <?php
            $sql = 'SELECT LIBELLE, ID FROM CATEGORIE ORDER BY ID';
            $result = mysql_query($sql) ;
            while ( $row = mysql_fetch_array($result))
            {
        ?>
         <option value=' <?php echo $row[0] ;? >' ><?php echo $row[1] ;? >
        <?php
            }
        ?>
    </select>
<br/>
<br/>
    <input type=text name=' ingredient' id=' ingredient'>
</body>
</html>

Le javascript

Passons ensuite au script PHP qui créer le javascript ( La partie la plus dure !! ).

Nous avons comme information que les fruits et légumes sont différenciés grâce au champ 'TYPE'. Ce que nous voulons c'est que lorsqu'on change le select, le 'input type=text' s'adapte suivant le 'TYPE'. Comment faire ? C'est très simple en faite. Grâce au PHP, nous allons créer un 'SWITCH' en javascript. (IL NE FAUDRA PAS OUBLIER DE MODIFIER LE SELECT AVEC UN 'ONCHANGE')

Démonstration :

<script language=javascript>
function changecategorie() 
{ 
    categorie = document.getElementById('categorie').value; 
    switch (categorie) 
    { 
    <?php 
        /*On recherche tous les types dans les catégories qui créerons les 'case'*/
        $sql = "SELECT DISTINCT(ID) FROM CATEGORIE"; 
 $result = mysql_query($sql); 
 while ( $row = mysql_fetch_array( $result ) ) 
 { 
    ? > 
    case ('<?php echo $row[0];? >'): 
    <?php 
        /*Pour chaque type on cherche tous les ingrédients associés que l'on met dans une variable*/ 
        $valeur = "'"; 
 $sql2 = "SELECT LIBELLE FROM INGREDIENT WHERE TYPE='".$row[0]."'"; 
 $result2 = mysql_query($sql2); 
 while ( $row2 = mysql_fetch_array($result2)) 
 { 
     $valeur = $valeur." ".$row2[0]; 
 } 
     $valeur = $valeur."'"; 
    ?> 
    document.getElementById('ingredient').value = ""; 
    document.getElementById('ingredient').value = <?php echo $valeur;? >; 
    break; 
    <?php 
        } 
    ? > 
    } 
} 
</script> 
......... 
<select name='categorie' id='categorie' onchange='changecategorie()'>

TUTORIEL REALISE PAR VALENTIN RENAUDEAU.

A voir également
Ce document intitulé « Rendre le javascript dynamique par apport à une base de données » issu de CodeS SourceS (codes-sources.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Tutoriel sur window.open
Infos sur objets manipulés
Rejoignez-nous