Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- informatik:php:php-programmierkurs:php-p8 [2018/04/07 20:45] – angelegt jonathan.pfeiffer
+++ informatik:php:php-programmierkurs:php-p8 [2024/10/14 20:47] (aktuell) – jonathan.pfeiffer
@@ Zeile 1: / Zeile 1: @@
-====== PHP-Programmierkurs [7] - Datenbankabfragen mit google charts visualisieren ======
+====== PHP-Programmierkurs [8] - Datenbankabfragen & google charts ======
 In diesem Lernpfad, erfährst du, wie du Daten mit google charts darstellen kannst.
 <tabbox Verbindung>
+**Verbindung aufnehmen**\\
+Zunächst muss eine Verbindung zur Datenbank bestehen:
+\\
+<code php>
+//php-code
+$db_host="localhost";
+$db_user="username";
+$db_password="deinPasswort";
+$db_database="nameDerDatenbank";
+//Verbindung aufbauen
+$verbindung = mysqli_connect($db_host, $db_user, $db_password, $db_database) or
+die("Keine Verbindung möglich! " . mysqli_error($verbindung));
+echo "Verbindung zum Datenbankserver / zur Datenbank hergestellt! <br />";
+</code>
+\\
+  * Die Funktion  ''mysqli_connect()'' öffnet eine Verbindung zum MySQL-Datenbankserver. In den Klammern stehen vier Parameter:  Hostname, Benutzername,  Kennwort und  Tabellenname.
+  * Der Rückgabewert der Funktion  ''mysqli_connect()'' ist eine Referenz auf die Verbindung. Diese Referenz wird anschließend für weitere Funktionen benötigt und daher in der Variablen  $verbindung gespeichert.
+<tabbox Abfrage>
+Nun kannst du Daten aus der Datenbank abfragen. Beachte: Für ein Liniendiagramm benötigst du mindestens zwei Attribute (einen y-Wert für die Zeitachse & einen x-Wert für die Datenpunkte).
+<code php>
+//php-code
+$abfrage = "SELECT spaltenattribut1, spaltenattribut2 FROM tabellenname WHERE bedingung";
+$ergebnis = mysqli_query($verbindung, $abfrage) or die("Tabellenabfrage fehlgeschlagen!");
+</code>
+<tabbox javascript>
+In den body deines php-Dokuments, also **nicht** in die php-tags, kommt ein **script** (javascript):\\
+<code javascript>
+<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
+  <div id="chart_div"></div>
+  <script>
+           google.charts.load('current', {packages: ['corechart', 'bar']});
+           google.charts.setOnLoadCallback(drawBarColors);
+   function drawBarColors() {
+      var data = google.visualization.arrayToDataTable([
+        ['spaltenattribut1', 'spaltenattribut2'],
+        <?php
+                          while($row = mysqli_fetch_array($ergebnis))
+                          {
+                               echo "['".$row["spaltenattribut1"]."', ".$row["spaltenattribut2"]."],";
+                          }
+                          ?>
+      ]);
+      var options = {
+        title: 'This is a title!',
+        chartArea: {width: '50%'},
+        colors: ['#b0120a', '#ffab91'],
+        hAxis: {
+          title: 'title for x-axis',
+          minValue: 0,
+		  maxValue: 5
+        },
+        vAxis: {
+          title: 'title for y-axis'
+        }
+      };
+      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
+      chart.draw(data, options);
+    }
+  </script>
+</code>
+  * ''['spaltenattribut1', 'spaltenattribut2'], <?php''   - Diesen Teil solltest du verändern: Ersetze spaltenattribut1 und spaltenattribut2 mit den tatsächlichen Spaltenattributen.
+  * Genauso hier: ''echo "['".$row["spaltenattribut1"]."', ".$row["spaltenattribut2"]."],";'' - Diesen Teil solltest du verändern: Ersetze spaltenattribut1 und spaltenattribut2 mit den tatsächlichen Spaltenattributen.
+  * Weise dem Diagramm auch einen aussagekräftigen Titel zu und beschrifte die x- und die y-Achse.
+Die gute und hilfreiche Dokumentation zu google charts: [[https://developers.google.com/chart/interactive/docs/quick_start]]
+<tabbox Verbindung schließen>
+Die Verbindung zur Datenbank wird durch den Aufruf der Funktion ''mysqli_close()'' wieder geschlossen.
+<code php>
+/* Verbindung schließen */
+mysqli_close($verbindung);
+</code>
 </tabbox>
-{{tag>[informatik thema php html lernpfad datenbank]}}
+{{tag>[informatik thema php php-programmierkurs html lernpfad datenbank googlecharts]}}