SQL dans Javascript

**fripou** · 05/01/2015, 15h30

Bonjour,

Pour un projet, je dois créer une page web qui permettra d'afficher un tableau de données.
Pour cela j'utilise la librairie UI OpenUI5.
Je suis loin d'être un pro en code donc je vais essayer de bien expliquer mon problème.
J'ai compris comment fonctionnait la création d'un tableau avec des données statiques par contre je sais pas du tout comment faire pour intégrer les données d'une BDD mysql.
Voici le script dans ma page html qui me permettra de mieux expliquer ensuite :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<script>  
// create the DataTable control
		var oTable = new sap.ui.table.Table({editable:false});
		// define the Table columns
		var oControl = new sap.ui.commons.TextView({text:"{lastName}"}); // short binding notation
		oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Last Name"}), template: oControl, sortProperty: "lastName", filterProperty: "lastName", width: "100px"}));
		oControl = new sap.ui.commons.TextView({text:"{name}"}); // more verbose binding notationt
		oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "First Name"}), template: oControl, sortProperty: "name", filterProperty: "name", width: "100px"}));
		oControl = new sap.ui.commons.CheckBox({checked:"{checked}"});
		oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Checked"}), template: oControl, sortProperty: "checked", filterProperty: "checked", width: "75px", hAlign: "Center"}));
		oControl = new sap.ui.commons.Link({text:"{linkText}", href:"{href}"});
		oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Web Site"}), template: oControl, sortProperty: "linkText", filterProperty: "linkText"}));
		oControl = new sap.ui.commons.RatingIndicator({value:"{rating}"});
		oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Rating"}), template: oControl, sortProperty: "rating", filterProperty: "rating"}));
 
		// create some local data
		var aData = [
			{lastName: "Dente", name: "Al", checked: true, linkText: "www.sap.com", href: "http://www.sap.com", rating: 4},
			{lastName: "Friese", name: "Andy", checked: true, linkText: "https://experience.sap.com/fiori", href: "https://experience.sap.com/fiori"},
			{lastName: "Mann", name: "Anita", checked: false, linkText: "http://www.saphana.com/", href: "http://www.saphana.com/", rating: 3},
		];
 
		// create a JSONModel, fill in the data and bind the Table to this model
		var oModel = new sap.ui.model.json.JSONModel();
		oModel.setData({modelData: aData});
		oTable.setModel(oModel);
		oTable.bindRows("/modelData");
 
		// finally place the Table into the UI
		oTable.placeAt("content");
 
</script>

Comme vous pouvez le voir les données du tableau sont en dur. Je souhaiterais faire une requête SQL et insérer ces données dans la variable aData.
Le problème n'est pas la requête bien entendu mais comment utiliser sql au milieu d'un script Javascript.
Merci d'avance

**lysandro** · 05/01/2015, 18h48

Si je comprends votre question : pour interroger un sgbd, il faut un client généralement fourni par l'éditeur.

Coté client: ClientWeb <==> SGBD

Si le navigateur est IE , il faut regarder vers adodb/oledb avec ActiveX mais cela nécessitera une installation du client du sgbd sur le poste.
Sinon, peut-être qu'il existe un client en javascript communiquant en soap ou json, par exemple, fourni avec le sgbd (voir la doc du sgbd) ?

Coté serveur: ClientWeb <==> Serveur(Web) <==> SGBD

Si vous avez la main sur le serveur web et qu'il est possible d'y exécuter du code (php, java, ...) vous pouvez vous créer des "pages" (ou des composants logiciels) qui répondront à vos différentes demandes envoyées en ajax par votre client web (page html). Le lien avec le sgbd se faisant coté serveur.
Si vous utilisez, coté serveur, node.js, il est aussi possible d'accéder à des sgbd. Vous devrez qd mm créer le protocole d'échange avec le code serveur node.js. Le lien avec le sgbd se faisant coté serveur.

Il existe peut-être d'autres alternatives que je ne connais pas.

**fripou** · 06/01/2015, 08h02

Je vais reposer ma question car elle n'a pas du être claire apparemment.
Ce que je veux ce sont les commandes me permettant de me connecter à une base de données mysql, faire des requêtes, integrer le résultat dans un variable ect.... au milieu du javascript.
En php par exemple ont fait :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
$connexion = mysql_connect(IP, user, password);
$choixbase = mysql_select_db(base, $connexion);
$sql = "SELECT toto FROM tata";
$requete = mysql_query($sql);
$resultat = array();
while($ligne = mysql_fetch_assoc($requete)){
    array_push($resultat, $ligne['toto']);
}

Et ce que je voudrais c'est la même chose pour du javascript

PS : Je découvre totalement le javascript ^^

**SylvainPV** · 06/01/2015, 09h40

PHP = langage serveur
JavaScript = langage client (la plupart du temps)

La question est: où se trouve la base de données ? Si comme dans 99% des cas elle est sur un serveur, alors JavaScript ne peut communiquer autrement avec elle qu'avec des requêtes IP ; le serveur sera le relais entre les requêtes client et la base de données, permettant notamment d'ajouter une couche sécurité.

**fripou** · 06/01/2015, 10h33

Ok j'ai compris le principe.
Du coup je suis parti sur un fichier php qui permet de récupérer les données en base et une autre page qui me servira d'index avec le script javascript.
Par contre je reste bloqué ^^ donc voila ce que j'ai fais pour ma page de récupération de données datacontacts.php :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
$connect = mysqli_connect($hostname, $username, $password,$database)
or die('Could not connect: ' . mysql_error());
 
$query = "SELECT contacts.nom_contact, contacts.prenom_contact FROM contacts";
 
$result = mysqli_query($query) or die("SQL Error 1: " . mysqli_error());
while ($row = mysqli_fetch_array($result, MYSQL_ASSOC)) {
    $aData[] = array(
        'nom_contact' => $row['nom_contact'],
        'prenom_contact' => $row['prenom_contact']
		);
}
echo json_encode($aData);

Par contre ma page index m'affiche bien un tableau mais il me dit "Aucune donnée", je pense que la récupération de données dans la variable aData n'est pas bonne mais je ne vois pas pourquoi, voici mont index.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>  
<html><head>  
    <meta name="description" content="UI5 table example with local JSON model" />
	<meta http-equiv='X-UA-Compatible' content='IE=edge' />
	<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>  
 
    <script id="sap-ui-bootstrap"
   src="resources/sap-ui-core.js"
   data-sap-ui-theme="sap_bluecrystal"
   data-sap-ui-libs="sap.ui.commons,sap.ui.table"></script> 
 
 
 
<script>  
// create the DataTable control
		var oTable = new sap.ui.table.Table({editable:false});
		// define the Table columns
		var oControl = new sap.ui.commons.TextView({text:"{nom_contact}"}); // short binding notation
		oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Nom"}), template: oControl, sortProperty: "nom_contact", filterProperty: "nom_contact", width: "100px"}));
		oControl = new sap.ui.commons.TextView({text:"{prenom_contact}"}); // more verbose binding notationt
		oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Prénom"}), template: oControl, sortProperty: "prenom_contact", filterProperty: "prenom_contact", width: "100px"}));
 
 
		// create some local data
		var aData = {
                 datatype: "json",
                 datafields: [{ nom_contact: 'nom_contact' },{ prenom_contact: 'prenom_contact' }],
                 url: 'datacontacts.php'
		};
 
		// create a JSONModel, fill in the data and bind the Table to this model
		var oModel = new sap.ui.model.json.JSONModel();
		oModel.setData({modelData: aData});
		oTable.setModel(oModel);
		oTable.bindRows("/modelData");
 
		// finally place the Table into the UI
		oTable.placeAt("contacts");
 
</script>
</head>
<body class='sapUiBody'>
    <div id='contacts'></div>
</body>
</html>

**lysandro** · 06/01/2015, 11h54

https://openui5.hana.ondemand.com/#d...db0e91070.html
https://openui5.hana.ondemand.com/do....html#loadData

**fripou** · 06/01/2015, 15h08

Merci pour les liens lysandro par contre j'ai un soucis dans mon php avec json_encode :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$connect = mysqli_connect($hostname, $username, $password,$database)
or die('Could not connect: ' . mysql_error());
 
$aDate = array();
$query = "SELECT contacts.nom_contact, contacts.prenom_contact FROM contacts";
$result = mysqli_query($connect,$query) or die("SQL Error 1: " . mysqli_error());
while ($row = mysqli_fetch_array($result)) {
   		$aData[] = array(
        'nom_contact' => $row['nom_contact'],
        'prenom_contact' => $row['prenom_contact']
		);
}
 
echo ("test");
echo json_encode($aData);
echo ("test2");

En fait je vois bien mon "test" mais après rien. Je json_encode m'affiche rien et en plus le "test2" ne s'affiche pas.

**lysandro** · 06/01/2015, 16h13

mpff ... je ne connais rien à php malheureusement ...
Vous avez 'json_last_error()' qui peut peut-être vous donner plus d'infos. ~~Dans la syntaxe $aData[] = array( les crochets me semblent inhabituels~~ Vous avez écrit $aDate = array(); et vous utilisez $aData[] = array( ? mais encore fois, mieux vaut l'avis de connaisseurs sur le sujet.

**ABCIWEB** · 06/01/2015, 16h33

Salut,

A mon avis ce n'est pas json_encode qui pose problème mais plutôt la récupération des données de la requête.
A la place de echo ("test"); (qui ne sert à rien) on peut déjà faire print_r($aDate); pour voir s'il y a un retour.

Attention tu utilises mysql_error() pour la connexion or tu utilise mysqli, et mysqli demande l'identifiant de connexion en style procédural soit

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

mysqli_error($connect)

à corriger dans la requête.

**fripou** · 07/01/2015, 10h00

J'ai remarqué que mon php n’était apparemment pas en bonne version et je l'ai donc upgrade en 5.3.3 mais cela ne change rien. Lorsque je met print_r($aDate); cela me renvoie Array ( ).
La récupération de données est bonne car lorsque je fais

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

echo $aData[0]['nom_contact'];

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

echo $aData[0]['prenom_contact'];

cela me renvoie les bonnes informations

**fripou** · 07/01/2015, 10h57

Alors bonne nouvelle le json_encode est fonctionnel. J'ai bien les bonnes données d'afficher au bon format.
Par contre je n'arrive toujours pas à récuper les data dans ma page principale ^^

**lysandro** · 07/01/2015, 15h05

edit: Le code ci-dessous est un code de test. Sa forme inhabituelle vient de ce que j'utilise ce code dans un autre environnement, Windows/CScript en l'occurence. Dans cet environnement, il y a plusieurs contrôles ActiveX différents qui sont instantiables chacun avec leurs particularités, chacun avec leurs erreurs. Certains ne gèrent pas les redirections HTTP par exemple. C'est un code de mise au point. Dans le contexte présent, il assure une remontée des erreurs quoi qu'il se produise (enfin je l'espère !) tout en sachant où l'erreur s'est produite quel que soit l'environnement. Il n'est pas destiné à être mis en production tel quel. Il n'est en aucune façon une référence quelconque de programmation web. Son seul objectif, était de me permettre de savoir si une erreur se produisait, où elle s'était produite, ainsi que de m'assurer que fripou aurait connaissance de l'erreur pour la retransmettre, pas spécialement pour qu'il l'a comprenne. D'où le alert plutot qu'un console.log.

Vous pouvez vérifier le retour de votre page 'datacontacts.php' avec une page de test :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
...
<script type="text/javascript">
    var step, xhr = null;
    try {
        step = "create";
        if ( typeof window.XMLHttpRequest == "function" )
            xhr = new XMLHttpRequest();
        else
            xhr = new ActiveXObject("MSXML2.XMLHTTP");
        if ( xhr == null )
            throw new Error("failed to create an XMLHttpRequest");
 
        step = "open";
        xhr.open("GET","datacontacts.php",false);
 
        step = "send";
        xhr.send();
 
        step = "receive";
        if ( xhr.readyState != 4 )
            alert("readyState : "+xhr.readyState);
        else if ( xhr.status != 200 && xhr.status != 0 )
            alert("status : "+xhr.status);
        else
            alert("responseText : "+String(xhr.responseText));
    } catch( ex ) {
        alert("exception at "+step+" : "+ex.name+": "+ex.message);
    }
</script>
...

Si vous avez bien votre 'responseText' avec vos données, il ne vous restera plus qu'à aller piocher dans la doc de sap.ui ...

**Bovino** · 07/01/2015, 15h13

Quelques précisions quand même.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if ( typeof window.XMLHttpRequest == "function" )

Ca me semble un peu compliqué par rapport à un classique

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if ( window.XMLHttpRequest )

voire si tu veux un peu de rigueur

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if ( 'XMLHttpRequest' in window )

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

xhr = new ActiveXObject("MSXML2.XMLHTTP");

Cette condition devient quelque peu caduque à moins que ton public cible concerne les utilisateurs d'IE 6.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

throw new Error("failed to create an XMLHttpRequest");

~~Pourquoi mettre ça dans un throw plutôt que d'inclure une clause catch prévue par le try ?~~
De plus, le message est complètement incompréhensible par le commun des mortels qui ne sait pas ce qu'est un "XMLHttpRequest" et qui n'a d'ailleurs aucun intérêt à le savoir.

EDIT
Ah oui, je viens de voir le pourquoi du throw.

Sauf que je vois mal l'utilité car à part à la création de l'objet XMLHttpRequest, aucune autre partie du code n'est supposée générer d'erreur...

**lysandro** · 07/01/2015, 15h26

Envoyé par Bovino

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if ( typeof window.XMLHttpRequest == "function" )

Ca me semble un peu compliqué par rapport à un classique ...
...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

xhr = new ActiveXObject("MSXML2.XMLHTTP");

Cette condition devient quelque peu caduque à moins que ton public cible concerne les utilisateurs d'IE 6.

Sans doute, mais comme en l'occurence je test avec IE8 et en local, cela m'oblige à changer mes sécurités sur ma zone locale et ça m'em...nnuie. C'est une solution de facilité. edit: ce n'est peut-être pas trés clair: dans IE8, window.XMLHttpRequest existe mais n'est pas une fonction (il ne passe pas le test) ça cascade sur le ActiveXObject qui lui n'a pas les mêmes restrictions (pourquoi ? je ne veux même pas le savoir, enfin si mais je n'ai pas envie de chercher

)

Envoyé par Bovino

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

throw new Error("failed to create an XMLHttpRequest");

Pourquoi mettre ça dans un throw plutôt que d'inclure une clause catch prévue par le try ?
De plus, le message est complètement incompréhensible par le commun des mortels qui ne sait pas ce qu'est un "XMLHttpRequest" et qui n'a d'ailleurs aucun intérêt à le savoir.

Bin, comme tu l'as remarqué tout le code est dans un bloc 'try catch' avec un affichage des erreurs rudimentaire, le 'throw' m'évite d'alourdir le code et ainsi de passer par ce qui est déjà prévu. Le message est complétement incompréhensible

c'est pas faux ! en même temps fripou est ingénieur sytèmes et réseaux, pas vraiment le commun des mortels, mais sutout, il confesse ne pas être à l'aise avec javascript et donc (un poil long cette phrase) l'idée est simplement que si ça lui pète une erreur, il viendra le dire et on saura lui répondre alors, n'est il pas

Si, tu peux avoir des erreurs à l'open' (toujours mes tests en local) et peut-être ailleurs je n'ai pas fait le tour de la question, je me borde simplement.

**fripou** · 07/01/2015, 15h31

Je viens de tester et j'ai bien dans le 'responseText' mes données.
Il me reste plus qu'a comprendre comment je peux faire ca avec sapui mais c'est gagner car comme tu as dis lysandro c'est ma premiere expérience en javascript et donc je galère pas mal ^^

**Bovino** · 07/01/2015, 15h46

Bon, désolé de dévier un peu du post d'origine, mais lysandro, pour tester des appels AJAX en local, je te conseillerais plutôt d'utiliser un serveur local (type WAMP) plutôt qu'un appel à partir d'un file: qui risque de ne pas s'effectuer de la même façon que sur un serveur.

D'autant que là, tu laisses à penser que ton code correspond à une façon habituelle de procéder ce qui est loin d'être le cas.

**lysandro** · 07/01/2015, 15h50

Bin, je connais encore moins sap.ui que toi ... mais j'essaierai ça dans un premier temps

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var oModel = new sap.ui.model.json.JSONModel();
oModel.loadData("datacontacts.php",null,true); // charge les données en synchrone
alert(oModel.getJSON()); // affiche ce qui a été récupéré

Cela étant que ça fonctionne ou pas, je te conseille de chercher des forums où on connait ce framework, j'ai atteint mes limites :/

edit: suite à la remarque pertinente de Bovino, le code de test correct pour une requête synchrone est

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var oModel = new sap.ui.model.json.JSONModel();
oModel.loadData("datacontacts.php",null,false); // charge les données en synchrone
alert(oModel.getJSON()); // affiche ce qui a été récupéré

**Bovino** · 07/01/2015, 15h57

Je pense qu'il serait de toute façon utile de faire un point sur l'état actuel du code et sur ce qui ne fonctionne pas.
De même, utiliser la console (touche F12) pour nous donner les éventuels messages d'erreur.

Ceci dit, il y a des chances que ce soit lié au fait que tu récupères tes données via AJAX.
Voir : Un classique AJAX : utiliser les données au bon moment ! pour plus d'explications.

**lysandro** · 07/01/2015, 15h59

@Bovino: Mm je comprends ce que tu veux dire ... Je pourrais utiliser une des vm où je dois bien avoir ça, plutot un LAMP d'ailleurs, mais ici je fais du support bénévole je n'ai pas envie de monter une vm qui met trois plombes à démarrer, pas plus que d'installer un WAMP pour un bout de code. J'ai quand même installé spécialement pour répondre aux questions, une nouvelle version de ffx, c'est dire ...

Maintenant si tu penses que le code est un mauvais exemple (il n'était là que pour un test) sens toi libre de le supprimer, l'aménager ou ce que tu veux, pas de problème en ce qui me concerne, il a rempli son office. Je peux le supprimer si tu préféres ?

**fripou** · 07/01/2015, 16h07

J'avais déjà tester ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var oModel = new sap.ui.model.json.JSONModel();
oModel.loadData("datacontacts.php",null,true); // charge les données en synchrone
alert(oModel.getJSON()); // affiche ce qui a été récupéré

Et cela me renvoyais "{}". Merci quand même pour l'aide

le soucis de ce framework c'est que les forums sont plus ou moins inexistant ^^

Je vais donc faire un point sur mes codes :
page datacontacts.php qui est maintenant fonctionnelle :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?php
#Include the connect.php file
include('connect.php');
#Connect to the database
//connection String
$connect = mysqli_connect($hostname, $username, $password,$database)
or die('Could not connect: ' . mysqli_error($connect));
 
$aDate = array();
// get data and store in a json array
$query = "SELECT contacts.nom_contact, contacts.prenom_contact FROM contacts";
 
$result = mysqli_query($connect,$query) or die("SQL Error 1: " . mysqli_error($connect));
while ($row = mysqli_fetch_array($result)) {
   		$aData[] = array(
        'nom_contact' => $row['nom_contact'],
        'prenom_contact' => $row['prenom_contact']
		);
}
mysql_close($connect);
 
echo json_encode($aData);
 
?>

page index.php qui ne fonctionne pas :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>  
<html><head>  
    <meta name="description" content="UI5 table example with local JSON model" />
	<meta http-equiv='X-UA-Compatible' content='IE=edge' />
	<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>  
 
    <script id="sap-ui-bootstrap"
   src="resources/sap-ui-core.js"
   data-sap-ui-theme="sap_bluecrystal"
   data-sap-ui-libs="sap.ui.commons,sap.ui.table"></script> 
 
<script>  
// create the DataTable control
		var oTable = new sap.ui.table.Table({editable:false});
		// define the Table columns
		var oControl = new sap.ui.commons.TextView({text:"{nom_contact}"}); // short binding notation
		oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Nom"}), template: oControl, sortProperty: "nom_contact", filterProperty: "nom_contact", width: "100px"}));
		oControl = new sap.ui.commons.TextView({text:"{prenom_contact}"}); // more verbose binding notationt
		oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Prénom"}), template: oControl, sortProperty: "prenom_contact", filterProperty: "prenom_contact", width: "100px"}));
		// create a JSONModel, fill in the data and bind the Table to this model
		var oModel = new sap.ui.model.json.JSONModel();
		oModel.loadData("datacontacts.php",null,true); // charge les données en synchrone
		alert(oModel.getJSON()); // affiche ce qui a été récupéré
		oTable.setModel(oModel);
		oTable.bindRows("/modelData");
		// finally place the Table into the UI
		oTable.placeAt("contacts");
 
</script>
</head>
<body class='sapUiBody'>
    <div id='contacts'></div>
</body>
</html>

En tout cas merci pour l'aide ça me permet d'avancer pas à pas

SQL dans Javascript

JavaScript

Discussions similaires

Partager

Partager