Daten

von | Nov 22, 2017 | JavaScript | 0 Kommentare

Die Daten zu Webseiten sind in einer Datenbank am Server abgelegt. Bei WordPress ist das eine MySQL-Datenbank.

MySQL

mysql Logo
Webseiten werden in einer Datenbank abgelegt. Diese Datenbank wird von WordPress automatisch angelegt und verwaltet. Man muss in der Regel nichts damit tun. Verwaltet wird die Datenbank über das Website-Panel (https://panel.ccc.at). Dort gibt es den Link „Browse Database“, mit dem Änderungen in der Datenbank durchgeführt werden können.
Wer MySQL lokal installiert hat, sollte sich unbedingt auch PhpMyAdmin installieren, mit dem man die lokale MySQL-Datenbank ebenso komfortabel administrieren kann wie am Server.

Der klassische Weg ist, die Daten aus der Datenbank durch PHP verarbeiten zu lassen und dann als berechnete HTML-Datei zum Client zu senden.
Es ist aber auch möglich, die Daten für eine Seite in ein geeignetes Transportformat zu verpacken und dieses gemeinsam mit einem JavaScript-Programm zum Client zu senden und die eigentliche Darstellung dem Client zu überlassen.

Datenaustausch

Wenn im Internet Daten angezeigt werden sollen, gibt es die Möglichkeit, nur die Daten vom Server zum Client zu senden und es dem Client zu überlassen, wie die Daten anzuzeigen sind. Drei Datenaustauschformate bieten sich an: JSON, YAML und XML, wobei jedes Format bestimmte Vorteile hat.
JSON hat den Vorteil, dass es eigentlich eine Spracherweiterung von JavaScript ist und das JSON-Datenformat ohne irgendeine Veränderung oder Zusatzprogramm mit einem JavaScript-Programm vereinigt werden kann.
YAML hat den Vorteil, dass es an Einfachheit kaum mehr zu übertreffen ist.
XML hat den Vorteil, dass man es nur mit einem StyleSheet verbinden muss und das Ergebnis schon im Browser darstellbar ist. Wegen seiner Komplexität wird es aber als Websprache nicht so gerne angenommen.

JSON (JavaScript Object Notation)

JSON Logo

[code lang=“javascript“]
var aktivitaeten =
{
"club": "clubcomputer",
"jahr": 2017,
"clubabende" :
[
{
"datum": "2017-11-07",
"thema": "Wie ticken Webseiten?",
"vortragender": "Franz Fiala"
},
{
"datum": "2017-11-23",
"thema": "WordPress-Template",
"vortragender": "Roman Heinzinger"
}
]
}
[/code]

YAML (YAML Ain’t Markup Language)

yaml Logo

[code lang=“text“]
—
club: clubcomputer
jahr: 2017
clubabende:
– datum: 2017-11-07
thema: Wie ticken Webseiten?
vortragender: Franz Fiala

– datum: 2017-11-23
thema: WordPress-Template
vortragender: Roman Heinzinger
[/code]

XML

XML Logo

[code lang=“xml“]
<?xml version="1.0" encoding="UTF-8"?>
<aktivitaeten>
<club>clubcomputer</club>
<jahr>2017</jahr>
<clubabende>
<clubabend>
<datum>2017-11-07</datum>
<thema>Wie ticken Webseiten?</thema>
<vortragender>Franz Fiala</vortragender>
</clubabend>
<clubabend>
<datum>2017-11-23</datum>
<thema>WordPress-Template</thema>
<vortragender>Roman Heinzinger</vortragender>
</clubabend>
</clubabende>
</aktivitaeten>
[/code]
https://www.predic8.de/xml-json-yaml.htm
Der Vorteil von JSON zeigt sich, wenn der Server Daten zurücksendet und diese dann auf einer Webseite verarbeitet werden sollen. Diese Verarbeitung geschieht in JavaScript und die Daten müssen in keiner Weise verändert werden.
[code lang=“javascript“]
<html>
<head>
<script src="daten.js"></script>
</head>
<body>
<script>
document.write(aktivitaeten.club
+ "-" + aktivitaeten.jahr);
document.write("<ul>");
var abende = aktivitaeten.clubabende;
for (i=0; i<abende.length; i++) {
document.write("<li><b>" + abende[i].datum + "</b> "
+ abende[i].thema + ", " + abende[i].vortragender + "</li>");
}
document.write("</ul>");
</script>
</body>
</html>
[/code]
Datenausgabe

Hinweise

  • Alle hier in Klammen gesetzten Dateien findest Du auf der Seite http://sex.clubcomputer.at -> webseiten zum Ausprobieren.
  • Die Beispiele in diesem Beitrag sind auch in einem Foliensatz zu finden.
  • Beachte auch den Beitrag „Websprachen lernen“, in dem zahlreiche Links zu dem hier besprochenen Thema zu finden sind.

 

Kommentar absenden

Zur Werkzeugleiste springen