Anzeige
Tutorialbeschreibung

Web-Apps erstellen (Teil 16): JSON-Inhalte laden (2)

Web-Apps erstellen (Teil 16): JSON-Inhalte laden (2)

Ihr habt die JSON-Datei im vorherigen Video-Training angelegt. Jetzt soll natürlich noch der Zugriff auf die darin hinterlegten Informationen erfolgen. Dazu werden in diesem Video-Training zwei Seiten erstellt. Auf einer werden kurze Informationen zu allen Tutorials zu sehen sein. Klickt man in dieser Übersicht die Kurzbeschreibung eines Tutorials an, sind detaillierte Daten zu dem betreffenden Tutorial verfügbar.

... übrigens findest du die komplette Serie hier: Web-Apps programmieren - das Training - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


Zunächst zur allgemeinen Tutorial-Seite. Auf der ist ein kurzer Überblick aller angebotenen Tutorials zu sehen.

Bilder



Ich gehe an dieser Stelle davon aus, dass es sich bei dieser Datei um die tutorials.html handelt. Herzstück bildet ein entsprechender JavaScript-Bereich.
<script type="text/javascript">

Testet am Anfang immer, ob die Seite tatsächlich vollständig geladen wurde. Erst wenn das der Fall ist, wird der JavaScript-Code ausgeführt.
$('#tutorials').on("pageshow", function() {

 
Dazu gibt man die ID der Seite an, die über <div data-role="page" id="tutorials“> angegeben wurde. Leert anschließend die Tutorial-Liste, um ggf. doppelte Einträge zu vermeiden.
$('#liste').empty();

Tja, und dann geht es auch schon direkt mit der eigentlichen JSON-Funktionalität los. Bindet die entsprechende Datei über getJSON ein. Ich gehe im folgenden Beispiel davon aus, dass die JSON-Datei im selben Verzeichnis wie die eigentliche HTML-Datei liegt.
$.getJSON('tutorials.json', function(data) {

Im aktuellen Fall sollen sämtliche Einträge aus dem tutorials-Objekt ausgelesen werden. Verwendet wird dafür each().
$.each(data.tutorials, function(i,item){

Anschließend wird die Art der Ausgabe der Einträge bestimmt. Ich habe mich an dieser Stelle für eine unsortierte Liste entschieden. Ihr könnt natürlich auch Textabsätze, div-Bereiche usw. verwenden. Das bleibt im Endeffekt euch überlassen.
$('<li><a href="tutorials_detail.html" data-transition="slide" onClick="javascript:sessionStorage.tutorials=\''+item.name+'\';"><img src="images/'+item.bild+'" /><h3>' + item.name + '</h3>' + '<p>' + item.inhalt + '</p></a></li>').appendTo('#liste');

Jeder Listeneintrag setzt sich aus verschiedenen Elementen zusammen. Umschlossen werden die jeweiligen Einträge von einem Hyperlink, der auf die Seite tutorials_detail.html zeigt. Ausführliche Informationen dazu dann im Anschluss. Dieser Seite wird das betreffende Tutorial übergeben. Verwendet wird dafür sessionStorage. Die Daten werden bei dieser Methode innerhalb der aktuellen Browser-Session gespeichert. Der übergebene Wert ist letztendlich der Name des Tutorials (item.name). Daran schließen sich ein Bild und eine Beschreibung des Tutorials an. Übergeben werden die ausgelesenen Werte dann letztendlich an das Element mit der ID liste.
});

$('#liste').listview('refresh');

 
listview sorgt für eine attraktivere Darstellung der Liste.

Bilder



Und zu guter Letzt müssen natürlich noch die geöffneten Klammern wieder geschlossen werden.
});
});
</script>

So viel also zur allgemeinen Tutorial-Seite. Wenn ihr diese aufruft, sollte sich ein erstes Ergebnis zeigen.


 

Die Detailseite anlegen

Die allgemeinen Informationen zu den Tutorials werden bereits angezeigt. Jetzt fehlt nur noch die Detailseite. Diese ist zu sehen, wenn in der Übersichtsseite auf eines der Tutorials geklickt wird.

Bilder



Ich gehe an dieser Stelle davon aus, dass diese Seite unter dem Namen tutorials_detail.html angelegt wird.

 
Zunächst wieder ein Blick darauf, wie die Syntax ganz allgemein aussieht. Danach wird die Syntax dann noch einmal detailliert unter die Lupe genommen.
<html>
<head>
<title>psd-tutorials.de</title>
</head>
<body>
<div data-role="page" id="tutorials-einzeln" data-add-back-btn="true" data-back-btn-text="Zurück">
  <div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false">
    <h1>Unsere Tutorials</h1>
  </div>
  <div data-role="content" id="tutorials-inhalt"> </div>
  <div data-role="footer" data-id="footernav" data-tap-toggle="false" data-position="fixed" data-theme="b">
    <div data-role="navbar" data-theme="b">
      <ul>
        <li><a href="about.html" data-icon="info">Über uns</a></li>
        <li><a href="kontakt.html" data-icon="grid">Kontakt</a></li>
        <li><a href="anfahrt.html" data-icon="star">Anfahrt</a></li>
        <li><a href="impressum.html" data-icon="gear">Impressum</a></li>
        <li><a href="#infos" data-icon="gear">Themen</a></li>
      </ul>
    </div>
  </div>
  <script type="text/javascript">
$('#tutorials-einzeln').on("pageshow", function() {
      $('#tutorials-inhalt').empty();
      var tutorials = sessionStorage.tutorials;
      $.getJSON('tutorials.json', function(data) {
            $.each(data.tutorials, function(i,item){
                  if(item.name == tutorials){
                        $('<img src="images/'+item.bild+'"/><h3>' + item.name + '</h3>' + '<p>' + item.details + '</p>').appendTo('#tutorials-inhalt');
            }
            });
      });
});
</script>
</div>
</body>
</html>

 
Im ersten Schritt solltet ihr eine Möglichkeit bereitstellen, über die man von der Detail- wieder zur Übersichtsseite gelangt. Das geschieht im aktuellen Beispiel über eine Zurück-Schaltfläche.

Bilder



Verwendet wird hierfür die Syntax data-add-back-btn="true" data-back-btn-text="Zurück". Tatsächlich stellt JQM entsprechende Möglichkeiten zur Verfügung.
<div data-role="page" id="workshop-einzeln" data-add-back-btn="true" data-back-btn-text="Zurück">

Die Besonderheit an der Detailseite besteht darin, dass jeweils die Informationen eines bestimmten Tutorials zu sehen sein sollen. Dabei handelt es sich um das Tutorial, das auf der allgemeinen Tutorial-Seite angeklickt wurde. Gespeichert werden die Session-Daten innerhalb einer Variablen.
var tutorials = sessionStorage.tutorials;

Schlussendlich braucht nun nur noch mittels if-Abfrage überprüft zu werden, ob einer der innerhalb der JSON-Datei hinterlegten Tutorial-Namen mit dem Namen des in der Session übergebenen Wertes übereinstimmt.
if(item.name == tutorials)

 
Gibt es eine Übereinstimmung, werden die Daten des entsprechenden Tutorials ausgelesen und angezeigt. Wie die Anzeige letztendlich erfolgen soll, könnt ihr dann wieder selbst bestimmen. Ich gebe drei Elemente aus:

• ein Bild
• den Namen des Tutorials
• die Beschreibung des Tutorials

Verpackt wird all das innerhalb einer HTML-Konstruktion, die in meinem Fall folgendermaßen aussieht.
$('<img src="images/'+item.bild+'"/><h3>' + item.name + '</h3>' + '<p>' + item.details + '</p>').appendTo('#tutorials-inhalt');

Das Prinzip ist dabei denkbar einfach. Hinter item. gibt man immer den Eintrag aus der JSON-Datei an, den man auslesen will. Wollt ihr also auf den Namen des Tutorials zugreifen, der innerhalb der tutorials.json folgendermaßen steht, ...
"name": "Contao (Teil 2): Die lokale Installation",

... sieht das dann so aus: item.name. Auf diese Weise könnt ihr problemlos sämtliche Werte der JSON-Datei auslesen. Mehr ist tatsächlich nicht nötig, um das gewünschte Ergebnis zu erzielen.

Bilder



In diesem und dem vorherigen Tutorial habt ihr gesehen, wie einfach sich eure App um eine JSON-Funktionalität erweitern lässt. Stellt sich abschließend vielleicht eine Frage: Warum sollte man auf JSON setzen, anstatt die Daten direkt in die HTML-Dateien einzutragen? Dank der JSON-Datei lassen sich die Daten viel leichter pflegen. Änderungen müssen ab sofort nur innerhalb einer einzigen Datei vorgenommen werden.

Das ist natürlich ein riesiger Vorteil gegenüber dem "klassischen Weg". Bei dem müsste man nämlich jede einzelne HTML-Datei der App öffnen und darin die Daten anpassen. JSON ermöglicht also eine deutlich flexiblere Datenverwaltung für eure App.

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 16.10.2016 - 14:58

Herzlichen Dank für das Video

Portrait von MicroSmurf
  • 07.08.2014 - 16:39

Sehr interessant wie immer. Vielen Dank.

Portrait von Kundentest
  • 27.07.2014 - 13:03

Herzlichen Dank für das Tutorial.

Portrait von BOPsWelt
  • 20.07.2014 - 16:26

Danke für den Teil des Tutorials. :)

Portrait von Caesarion2004
  • 20.07.2014 - 11:06

Vielen Dank für den weiteren sehr interessanten Teil und die Datei.

Portrait von Kundentest
  • 14.06.2014 - 18:43

Herzlichen Dank für das Video.

Portrait von Steve007
  • 14.06.2014 - 12:25

Vielen Dank für Dein interessantes Video - Training.

Portrait von renate_C
  • 13.06.2014 - 11:22

Wieder vielen Dank für das interessante und lehrreiche Videotutorial sowie die Materialien.

Portrait von Caesarion2004
  • 13.06.2014 - 11:13

Vielen Dank für das weitere sehr informative und gut erklärte Teilstück der Tutorialreihe.

Portrait von MicroSmurf
  • 13.06.2014 - 08:38

Vielen Dank für den weiteren Teil.

x
×
×