Simulation d’accès à une base pour le javascript grâce à PHP/MySQL
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 contenue 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 certain ‘oublie’.
L’apprentissage par l’exemple :
Nous allons pour cet exemple créer une base Test qui contiendra une table Ingredient avec comme champs :
- ID interger 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` )
);
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'
);
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.
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> |
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éérons 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 ingredients 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()'> |
Et voilà. Maintenant vous pouvez changer les valeurs dans la base et le javascript sera complètement dépendant des données dans la base.
TUTORIAL REALISE PAR VALENTIN RENAUDEAU.
EMAIL : gowserlegoserien@gmail.com