JavaScript utilisation base de données

**nyakoumo** · 22/09/2016, 15h21

Bonjour,

J'ai pris un code d'un framework nommé VIS je l'utilise pour avoir un aspect graphique pour des données...
Je voudrais utilisé des données directement d'une base de donnée sans utilisé AJAX ou JSON car c'est trop complexe pour moi j'aimerais utilisé PHP.

Voici le code:

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
  <script src="vis/dist/vis.js"></script>
  <link href="vis/dist/vis.css" rel="stylesheet" type="text/css" />
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<body>
<h2>Mode de calcul et prise d'information (teste)</h2>
<h3>L'objectif à attendre dans ce cas est de 70%</h3>
<div style="width:50px; font-size:14px; text-align: justify;">
</div>
<br />
 
<div id="visualization"></div>
 
<script type="text/javascript">
    // create a dataSet with groups
    var names = ['SquareShaded', 'Bargraph', 'Blank', 'CircleShaded'];
    var groups = new vis.DataSet();
        groups.add({
        id: 0,
        content: names[0],
        options: {
            drawPoints: {
                style: 'square' // square, circle
            },
            shaded: {
                orientation: 'bottom' // top, bottom
            }
        }});
 
    groups.add({
        id: 1,
        content: names[1],
        options: {
            style:'bar'
        }});
 
    groups.add({
        id: 2,
        content: names[2],
        options: {drawPoints: false}
    });
 
    groups.add({
        id: 3,
        content: names[3],
        options: {
            drawPoints: {
                style: 'circle' // square, circle
            },
            shaded: {
                orientation: 'top' // top, bottom
            }
        }});
 
  var container = document.getElementById('visualization');
  var items = [
    {x: '2014-06-13', y: 60},
    {x: '2014-06-14', y: 40},
    {x: '2014-06-15', y: 55},
    {x: '2014-06-16', y: 40},
    {x: '2014-06-17', y: 50},
    {x: '2014-06-13', y: 30, group: 0},
    {x: '2014-06-14', y: 10, group: 0},
    {x: '2014-06-15', y: 15, group: 1},
    {x: '2014-06-16', y: 30, group: 1},
    {x: '2014-06-17', y: 10, group: 1},
    {x: '2014-06-18', y: 15, group: 1},
    {x: '2014-06-19', y: 52, group: 1},
    {x: '2014-06-20', y: 10, group: 1},
    {x: '2014-06-21', y: 20, group: 2},
    {x: '2014-06-22', y: 60, group: 2},
    {x: '2014-06-23', y: 10, group: 2},
    {x: '2014-06-24', y: 25, group: 2},
    {x: '2014-06-25', y: 30, group: 2},
    {x: '2014-06-26', y: 20, group: 3},
    {x: '2014-06-27', y: 60, group: 3},
    {x: '2014-06-28', y: 10, group: 3},
    {x: '2014-06-29', y: 25, group: 3},
    {x: '2014-06-30', y: 30, group: 3}
  ];
 
  var dataset = new vis.DataSet(items);
  var options = {
      defaultGroup: 'ungrouped',
      legend: true,
      start: '2014-06-10',
      end: '2014-07-04'
  };
  var graph2d = new vis.Graph2d(container, dataset, groups, options);
 
</script>

A ce moment là j'ai déjà ce qui me montre dans le graph:

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
  var items = [
    {x: '2014-06-13', y: 60},
    {x: '2014-06-14', y: 40},
    {x: '2014-06-15', y: 55},
    {x: '2014-06-16', y: 40},
    {x: '2014-06-17', y: 50},
    {x: '2014-06-13', y: 30, group: 0},
    {x: '2014-06-14', y: 10, group: 0},
    {x: '2014-06-15', y: 15, group: 1},
    {x: '2014-06-16', y: 30, group: 1},
    {x: '2014-06-17', y: 10, group: 1},
    {x: '2014-06-18', y: 15, group: 1},
    {x: '2014-06-19', y: 52, group: 1},
    {x: '2014-06-20', y: 10, group: 1},
    {x: '2014-06-21', y: 20, group: 2},
    {x: '2014-06-22', y: 60, group: 2},
    {x: '2014-06-23', y: 10, group: 2},
    {x: '2014-06-24', y: 25, group: 2},
    {x: '2014-06-25', y: 30, group: 2},
    {x: '2014-06-26', y: 20, group: 3},
    {x: '2014-06-27', y: 60, group: 3},
    {x: '2014-06-28', y: 10, group: 3},
    {x: '2014-06-29', y: 25, group: 3},
    {x: '2014-06-30', y: 30, group: 3}
  ];

J'ai déjà discuté avec une base de donnée pour d'autre teste et voici le code:

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
 <?php
 echo $DATE["DATA"];
$servername = "localhost";
$username = "root";
$password = "*****";
$dbname= "CSV_DB";
$EntreeDATE = htmlentities($_POST['EntreeDATE']);
$EntreeDATE2 = htmlentities($_POST['EntreeDATE2']);
 
 
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
     die("La base de donnée est introuvable " . $conn->connect_error);
}
 
$sql = "SELECT DATE, High, Low FROM TBL_NAME WHERE DATE BETWEEN '".$EntreeDATE."' AND '".$EntreeDATE2."'";
 
// $sql = "SELECT DATE, High, Low FROM TBL_NAME WHERE DATE BETWEEN '".$EntreeDATE."' AND '".$EntreeDATE2."'";
$result = $conn->query($sql);
 
if ($result->num_rows > 0) {
     // output data of each row
     while($row = $result->fetch_assoc()) {
         echo "<br> DATE: ". $row["DATE"]. " - High: ". $row["High"]. " - Low " . $row["Low"] . "<br>";

Bref j'aime utilisé le même while pour qui me donne tout les données sans les BETWEEN bien sûr je voudrais juste affiché de la façon encore plus haut pour que mon graph me montre mes stocks de ma base de donnée.

Merci d'avance !

**Watilin** · 27/09/2016, 02h41

Salut,

Je voudrais utilisé des données directement d'une base de donnée sans utilisé AJAX ou JSON car c'est trop complexe pour moi j'aimerais utilisé PHP.

Si j’ai bien compris tu as une application JavaScript et tu veux faire des requêtes vers le serveur sans JavaScript ? Y’a comme un problème…

Pourtant Ajax c’est pas si compliqué. Va sur ton site, ouvre les outils de développement avec la touche F12 et trouve l’onglet console. Il y a une zone où on peut taper du code. Tape ceci :

Code :

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

1
2
3
4
5
6
var req = new XMLHttpRequest();
req.onload = function () {
  console.log(this.responseText);
};
req.open('GET', 'monscript.php'); // remplace monscript.php par le nom de ton script qui fait les requêtes SQL
req.send();

Voilà, une requête Ajax en six lignes. Et tu vois les détails dans l’onglet réseau. Ça te donne pas de l’inspiration ?

**sekaijin** · 27/09/2016, 11h10

Envoyé par nyakoumo

Bonjour,
...

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
 <?php
 echo $DATE["DATA"];
$servername = "localhost";
$username = "root";
$password = "*****";
$dbname= "CSV_DB";
$EntreeDATE = htmlentities($_POST['EntreeDATE']);
$EntreeDATE2 = htmlentities($_POST['EntreeDATE2']);
 
 
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
     die("La base de donnée est introuvable " . $conn->connect_error);
}
 
$sql = "SELECT DATE, High, Low FROM TBL_NAME WHERE DATE BETWEEN '".$EntreeDATE."' AND '".$EntreeDATE2."'";
 
// $sql = "SELECT DATE, High, Low FROM TBL_NAME WHERE DATE BETWEEN '".$EntreeDATE."' AND '".$EntreeDATE2."'";
$result = $conn->query($sql);
 
if ($result->num_rows > 0) {
     // output data of each row
     while($row = $result->fetch_assoc()) {
         echo "<br> DATE: ". $row["DATE"]. " - High: ". $row["High"]. " - Low " . $row["Low"] . "<br>";

quant à ce qu'il te faut mettre dans ton php pour répondre à l'appel ajax c'est simple

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
 <?php
header("Content-type:application/json");
// echo $DATE["DATA"]; interdit de faire des echo autre que le résultat
// à la place mettre  un header
header("DATA_VALUE:".$DATE["DATA"]); // les headesr son visible dans l'onglet network 
$servername = "localhost";
$username = "root";
$password = "*****";
$dbname= "CSV_DB";
$EntreeDATE = htmlentities($_POST['EntreeDATE']);
$EntreeDATE2 = htmlentities($_POST['EntreeDATE2']);
 
 
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    header ('HTTP/1.1 500 La base de donnée est introuvable')
    die("La base de donnée est introuvable " . $conn->connect_error);
    //die est une très mauvaise pratique tout juste bonne à débugger => donne trop d'info aux pirates
}
 
$sql = "SELECT DATE, High, Low FROM TBL_NAME WHERE DATE BETWEEN '".$EntreeDATE."' AND '".$EntreeDATE2."'";
 
// $sql = "SELECT DATE, High, Low FROM TBL_NAME WHERE DATE BETWEEN '".$EntreeDATE."' AND '".$EntreeDATE2."'";
$result = $conn->query($sql);
 
$data = array();
if ($result->num_rows > 0) {
     // output data of each row
     while($row = $result->fetch_assoc()) {
         array_push($data , $row);
     }    
}
echo utf8_encode (json_encode($data));

[/QUOTE]

cela va produire

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
[
    {"DATE": "2014-06-13", "High": 30, "Low": 0},
    {"DATE": "2014-06-14", "High": 10, "Low": 0},
    {"DATE": "2014-06-15", "High": 15, "Low": 1},
    {"DATE": "2014-06-16", "High": 30, "Low": 1},
    {"DATE": "2014-06-17", "High": 10, "Low": 1},
    {"DATE": "2014-06-18", "High": 15, "Low": 1},
    {"DATE": "2014-06-19", "High": 52, "Low": 1},
    {"DATE": "2014-06-20", "High": 10, "Low": 1},
    {"DATE": "2014-06-21", "High": 20, "Low": 2},
    {"DATE": "2014-06-22", "High": 60, "Low": 2},
    {"DATE": "2014-06-23", "High": 10, "Low": 2},
    {"DATE": "2014-06-24", "High": 25, "Low": 2},
    {"DATE": "2014-06-25", "High": 30, "Low": 2},
    {"DATE": "2014-06-26", "High": 20, "Low": 3},
    {"DATE": "2014-06-27", "High": 60, "Low": 3},
    {"DATE": "2014-06-28", "High": 10, "Low": 3},
    {"DATE": "2014-06-29", "High": 25, "Low": 3},
    {"DATE": "2014-06-30", "High": 30, "Low": 3}
  ]

dans le code de Watilin tu récupère cette réponse dans une variable

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var req = new XMLHttpRequest();
req.onload = function () {
  console.log(this.responseText);
};
req.open('GET', 'monscript.php'); // remplace monscript.php par le nom de ton script qui fait les requêtes SQL
req.send();
 
var data
request.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
      var items = JSON.parse(this.responseText);
      dataset = new vis.DataSet(items);
    }
}

JSON n'a rien d'extraordinaire.
A+JYT

**nyakoumo** · 29/09/2016, 09h54

Bonjour, j'ai appris grâce à vous merci beaucoup !

Mais j'ai d'autre problème et je connais pas à 100%, j'ai écris donc ce programme en m'aidant de vos écrit qu'est-ce que vous en pensez ?

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
 <?php
 echo $DATE["DATA"];
$servername = "localhost";
$username = "root";
$password = "****";
$dbname= "CSV_DB";
$EntreeDATE = htmlentities($_POST['EntreeDATE']);
$EntreeDATE2 = htmlentities($_POST['EntreeDATE2']);
 
 
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
     die("La base de donnée est introuvable " . $conn->connect_error);
}
 
$sql = "SELECT DATE, High, Low FROM TBL_NAME WHERE DATE BETWEEN '".$EntreeDATE."' AND '".$EntreeDATE2."'";
 
// $sql = "SELECT DATE, High, Low FROM TBL_NAME WHERE DATE BETWEEN '".$EntreeDATE."' AND '".$EntreeDATE2."'";
$result = $conn->query($sql);
 
$data = array();
if ($result->num_rows > 0) {
     // output data of each row
     while($row = $result->fetch_assoc()) {
         array_push($data , $row);
     }    
}
echo utf8_encode (json_encode($data));
 
if ($result->num_rows > 0) {
     // output data of each row
     while($row = $result->fetch_assoc()) {
         echo "<br> DATE: ". $row["DATE"]. " - High: ". $row["High"]. " - Low " . $row["Low"] . "<br>";
         echo round( $test =  $row["Low"] * 100 / $row["High"], 2, PHP_ROUND_HALF_ODD), "%"; 
        if ($test < 70) {
          echo'<img src="http://publicdomainvectors.org/photos/glassy-smiley-bad.png" width="47" height="47"/>' ;
         }
 
        else{
        	echo '<img src="http://i.skyrock.net/1998/62391998/pics/2514434523_small_1.jpg" width="47" height="47"/>' ;
        }
 
     }
} else {
     echo "Pas de résultat trouvé";
}
 
$conn->close();
?> 
 
 
 
 
<script type="text/javascript">
 
</script>
 
 
 
<div id="visualization"></div>
 
<script type="text/javascript">
    // create a dataSet with groups
    var names = ['SquareShaded', 'Bargraph', 'Blank', 'CircleShaded'];
    var groups = new vis.DataSet();
        groups.add({
        id: 0,
        content: names[0],
        options: {
            drawPoints: {
                style: 'square' // square, circle
            },
            shaded: {
                orientation: 'bottom' // top, bottom
            }
        }});
 
    groups.add({
        id: 1,
        content: names[1],
        options: {
            style:'bar'
        }});
 
    groups.add({
        id: 2,
        content: names[2],
        options: {drawPoints: false}
    });
 
    groups.add({
        id: 3,
        content: names[3],
        options: {
            drawPoints: {
                style: 'circle' // square, circle
            },
            shaded: {
                orientation: 'top' // top, bottom
            }
        }});
 
 
 
  var container = document.getElementById('visualization');
  var items = [
    {x: '2014-06-13', y: 60},
    {x: '2014-06-14', y: 40},
    {x: '2014-06-15', y: 55},
    {x: '2014-06-16', y: 40},
    {x: '2014-06-17', y: 50},
    {x: '2014-06-13', y: 30, group: 0},
    {x: '2014-06-14', y: 10, group: 0},
    {x: '2014-06-15', y: 15, group: 1},
    {x: '2014-06-16', y: 30, group: 1},
    {x: '2014-06-17', y: 10, group: 1},
    {x: '2014-06-18', y: 15, group: 1},
    {x: '2014-06-19', y: 52, group: 1},
    {x: '2014-06-20', y: 10, group: 1},
    {x: '2014-06-21', y: 20, group: 2},
    {x: '2014-06-22', y: 60, group: 2},
    {x: '2014-06-23', y: 10, group: 2},
    {x: '2014-06-24', y: 25, group: 2},
    {x: '2014-06-25', y: 30, group: 2},
    {x: '2014-06-26', y: 20, group: 3},
    {x: '2014-06-27', y: 60, group: 3},
    {x: '2014-06-28', y: 10, group: 3},
    {x: '2014-06-29', y: 25, group: 3},
    {x: '2014-06-30', y: 30, group: 3}
  ];
 
  var dataset = new vis.DataSet(items);
  var options = {
      defaultGroup: 'ungrouped',
      legend: true,
      start: '2014-06-10',
      end: '2014-07-04'
  };
  var graph2d = new vis.Graph2d(container, dataset, groups, options);
 
</script>

Je sais pas exactement comment mettre du coup le code ici

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
  var container = document.getElementById('visualization');
  var items = [
    {x: '2014-06-13', y: 60},
    {x: '2014-06-14', y: 40},
    {x: '2014-06-15', y: 55},
    {x: '2014-06-16', y: 40},
    {x: '2014-06-17', y: 50},
    {x: '2014-06-13', y: 30, group: 0},
    {x: '2014-06-14', y: 10, group: 0},
    {x: '2014-06-15', y: 15, group: 1},
    {x: '2014-06-16', y: 30, group: 1},
    {x: '2014-06-17', y: 10, group: 1},
    {x: '2014-06-18', y: 15, group: 1},
    {x: '2014-06-19', y: 52, group: 1},
    {x: '2014-06-20', y: 10, group: 1},
    {x: '2014-06-21', y: 20, group: 2},
    {x: '2014-06-22', y: 60, group: 2},
    {x: '2014-06-23', y: 10, group: 2},
    {x: '2014-06-24', y: 25, group: 2},
    {x: '2014-06-25', y: 30, group: 2},
    {x: '2014-06-26', y: 20, group: 3},
    {x: '2014-06-27', y: 60, group: 3},
    {x: '2014-06-28', y: 10, group: 3},
    {x: '2014-06-29', y: 25, group: 3},
    {x: '2014-06-30', y: 30, group: 3}
  ];

Mais mais mais un problème est apparue avant !

Code :

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

[{"DATE":"2016-10-03","High":"190","Low":"127"},

Ceci, le titre comme: "DATE" ou "High" etc.. faudrais les renommés x et y car le tableau prend ça pour ces données... Low je pense refaire une demande PHP pour du coup faire une autre courbe....

Conclusion merci à vous, vous m'apprenez beaucoup je suis en BTS S.I.O et je veux vraiment apprendre mais j'ai encore des lacunes...
Du coup je sais pas comment mettre la variable pour créé les courbes pouvez vous m'aidez ?
Je dois renommé les titre je pense avec As mais je suis pas sur donc je vous demande conseil...
Merci à vous en tout qu'à de prendre du temps et de m'aider !

PS: Le group que vous voyez je vais créé un champs peut-être dans les tables directement sur la base à voir mais vous en préoccupé pas encore ne vous inquiété pas.

**sekaijin** · 30/09/2016, 18h52

Code sql :

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

SELECT DATE as x , High as y, Low as groupe FROM TBL_NAME WHERE DATE BETWEEN '".$EntreeDATE."' AND '".$

Je suis sur mon tel l'édition n'est pas facile.
Suivant ton moteur sql il faut mettre data as x, ou date x, et si x devient X a l'exécution, il faut le mettre entre double quotes.

Enfin je te conseille vivement de lire la doc php sur les prepare stament.

L'écriture
BETWEEN '".$EntreeDATE."' AND ' est un gros risque de sécurité par injection sql.

A+

JavaScript utilisation base de données

JavaScript

Discussions similaires

Partager

Partager