Discussion :

[fripou]

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]

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]

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]

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]

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]

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