‫Kursleiter: In
‫dieser Vorlesung werden wir damit beginnen, die Tour-Übersichtsseite wirklich aufzubauen.
‫Und denken Sie daran,
‫dass die Übersichtsseite im Moment so aussieht.
‫Es hat also keinen wirklichen
‫Inhalt, und das werden wir in diesem Video hinzufügen.
‫Wir sind also hier in dieser
‫Stammroute, und hier wird die Übersicht sein, okay?
‫Also in unserer
‫Routeransicht ist es dann natürlich diese Route, okay?
‫Der Controller, der für
‫das Rendern dieser Seite verantwortlich ist, ist der getoverview-Controller, okay?
‫Gehen wir also zuerst zu hier und legen Sie die
‫Schritte dar, die wir unternehmen werden, um
‫diese Seite zu rendern.
‫Als erstes müssen wir also
‫tatsächlich alle Tourdaten aus unserer Sammlung
‫holen, oder?
‫Holen Sie sich
‫also Tourdaten aus der Sammlung.
‫Als nächstes bauen wir unser Template und
‫das tun wir
‫hier in dieser Controller-Funktion natürlich nicht.
‫Aber schreiben wir es trotzdem hier.
‫Erstellen Sie also eine Vorlage und rendern Sie diese Vorlage
‫schließlich mit den Tourdaten aus Schritt eins.
‫Also, beginnend mit dem
‫ersten Schritt hier die Tourdaten aus der
‫Sammlung holen, das heißt dann müssen
‫wir natürlich zuerst das Tourmodell tatsächlich importieren.
‫Das haben wir also schon
‫oft gemacht.
‫Das ist eigentlich eine Ebene höher
‫und dann in Modellen.
‫und Tourmodell.
‫Und dann brauchen
‫wir auch noch die Funktion
‫catchAsync, denn
‫dann wird diese Get Overview natürlich eine asynchrone Funktion.
‫In Ordnung, also markieren wir diesen als asynchron.
‫Wir brauchen jetzt auch hier next, damit
‫die catchAsync-Funktion tatsächlich funktioniert.
‫Okay, und ich hoffe, dass Sie jetzt tatsächlich den
‫Wert erkennen, dass wir all das
‫API-Zeug und alle Codes
‫erstellt haben, die wir bis zu diesem Punkt gemacht haben,
‫sodass wir jetzt nur noch all diese Dinge tun müssen Teile zusammen, okay?
‫Wir wissen also bereits jetzt, wie man all diese Dinge macht.
‫Wir haben unser Tourmodell bereits richtig funktioniert.
‫Das ist jetzt alles ganz einfach.
‫Const Tours ist also gleich zu erwarten.
‫Also wieder nichts Neues an dieser Stelle.
‫Und finde, im Grunde alle, in Ordnung?
‫Und was machen wir nun
‫eigentlich mit diesen Tourendaten?
‫Nun, wir müssen all diese Tourdaten
‫in die Vorlage einfügen, damit wir sie dort tatsächlich
‫verwenden und auf der Website anzeigen können, richtig?
‫Und das ist eigentlich ganz einfach.
‫Wir müssen es nur hier in dieses
‫Objekt einfügen, das in diesem Fall in die
‫Übersichtsvorlage eingefügt wird, okay?
‫Also ganz einfach, alles was wir sagen müssen sind Touren.
‫Das ist also dasselbe, wie Touren gleich Touren
‫sind und Sie wissen bereits, dass es ab ES 6 ausreicht,
‫es so zu machen.
‫Super, also immer wenn jetzt
‫eine Anfrage für die Übersichtsseite, also im
‫Grunde unsere Homepage unserer dynamisch gerenderten Website, kommt,
‫werden hier alle Tourdaten aus unserer Datenbank
‫abgerufen und dann in unsere Vorlage eingefügt.
‫Und jetzt müssen
‫wir nur noch diese Vorlage erstellen, oder?
‫Kommen wir also zur Übersicht. Mops.
‫Hier können wir diesen h1-Platzhalter hier tatsächlich loswerden.
‫Und jetzt möchte ich mir die
‫statische HTML-Datei hier noch einmal genauer ansehen.
‫Das ist also im öffentlichen Ordner und dann
‫in der Übersicht. html, okay?
‫Wir haben den Header also bereits in
‫einer der vorherigen Vorlesungen erstellt
‫und nun ist es an der Zeit, diesen Teil hier zu erstellen.
‫Als wir das Template zum
‫ersten Mal erstellten, hatte ich es tatsächlich falsch in
‫meiner HTML-Datei und ich hatte den Abschnitt Klassenübersicht,
‫aber in Ihrer Starterdatei hätten Sie
‫diese Hauptdatei mit der Klasse Hauptdatei haben sollen.
‫Und ich glaube, in Ihrer Akte
‫gibt es tatsächlich einen kleinen Text, der das erklärt, okay?
‫Aber wie auch immer, wir haben diesen Teil tatsächlich
‫aus unserer Basisvorlage gelöscht.
‫Denken Sie also daran,
‫dass wir hier im Inhalt tatsächlich kein HTML haben.
‫Das Hauptelement, das sich gerade im
‫HTML befindet, ist also nirgendwo zu finden.
‫Und das brauchen wir jetzt in unserer Übersicht, okay?
‫Lassen Sie uns diesen Teil des HTML-Codes in der Übersicht erstellen, denn
‫danach haben wir all diese sich wiederholenden Karten.
‫Sehen wir uns das auch
‫an, bevor wir den Code kopieren.
‫Sie sehen also, dass wir diese
‫Karten hier haben, und im Grunde ist jede dieser Karten, also
‫jedes dieser Elemente hier,
‫das, was ich eine Karte nenne.
‫Und im Grunde werden wir neun Karten haben.
‫Also, diese neun Karten auf dieser Übersichtsseite.
‫Und es sind neun Karten, weil wir im Moment
‫neun Touren haben, aber
‫es könnten natürlich auch weniger oder mehr dieser Karten sein, oder?
‫Aber egal, was hier wichtig ist,
‫ist, dass sich diese Karten tatsächlich
‫immer wieder wiederholen.
‫Wir haben also dieses riesige Kartenelement hier.
‫Und so gibt es
‫das erste, und dann gibt es viele gleiche sich wiederholende Elemente danach.
‫Okay?
‫Und so habe ich eigentlich nur eine Mops-Vorlage für
‫diese Karte erstellt,
‫damit wir sie jetzt nicht manuell schreiben
‫und viel Zeit damit verschwenden müssen, in Ordnung?
‫Das würde den Kurs nur unnötig lang machen und so
‫habe ich beschlossen, diese Vorlage im Voraus zu erstellen, damit wir
‫sie jetzt verwenden können.
‫Wenn Sie jetzt Ihre Mops-Fähigkeiten noch ein
‫bisschen üben möchten, können Sie das Video an dieser
‫Stelle einfach anhalten und dann den gesamten Code in Mops übersetzen.
‫Gut?
‫Und wenn Sie fertig sind, können Sie wiederkommen.
‫Aber jetzt werde ich tatsächlich weitermachen und diese Vorlage verwenden.
‫Und das ist hier in den Entwicklerdaten
‫und dann in den Vorlagen und der Tourkartenvorlage, okay?
‫Und das ist die gesamte Karte
‫für eine Karte, im Grunde übersetzt in Mops-Code, okay?
‫Also lass
‫uns das alles kopieren, hier in die Übersicht stellen, okay?
‫Und dann bedenken wir, dass wir vorher auch
‫diesen Haupt- und diesen Kartencontainer brauchen, also kopieren wir
‫das auch einfach.
‫Also nur hier
‫als Referenz, damit wir jetzt main main
‫schreiben können und dort einen Entwickler namens Card Container haben.
‫Okay?
‫Und dann, wie der Name schon
‫sagt, wird dieser Container die Karte enthalten.
‫Lassen Sie uns dies jetzt einrücken, da es sich
‫im Moment nicht wirklich im Kartenbehälter befindet.
‫Im Moment wäre es also innerhalb von main, aber das ist
‫nicht das, was wir wollen.
‫Also wähle ich alles aus und drücke auf die Registerkarte.
‫Ich drücke erneut auf die Tabulatortaste, und jetzt sehen wir, dass es
‫auf der richtigen Ebene ist.
‫Es befindet sich im Kartenbehälter.
‫Aber eigentlich ist es immer noch nicht
‫100% richtig,
‫da dieses Element auch innerhalb des Kartenelements sein sollte.
‫Und aus irgendeinem Grund hat das Kopieren dieser
‫Vorlage von einer Datei in
‫die andere diesen Code ein wenig durcheinander gebracht.
‫Seien Sie also vorsichtig, wenn Sie den Code
‫so einfügen.
‫In unserer Originalvorlage war also alles richtig, wie Sie
‫sehen, aber dann, als wir es kopierten, war
‫es irgendwie durcheinander.
‫Also, lass uns das schließen.
‫Das können wir
‫eigentlich auch schließen, wir brauchen es nicht
‫mehr, und zwar auch das Basistemplate und das Tourtemplate.
‫Wir arbeiten jetzt also nur mit der Übersicht.
‫Und jetzt haben wir diese eine Karte hier.
‫Und jetzt, wie Sie sehen, ist es auch eine völlig statische Karte.
‫Es verwendet also noch nicht
‫die Daten, die wir in die Vorlage eingefügt haben, oder?
‫Es hat also dieses statische Bild, es hat den ganzen Text hier
‫und es verwendet die Variable überhaupt nicht.
‫Okay, denn diesen Teil wollte ich eigentlich
‫zusammen mit dir machen.
‫Denn das ist in der Tat der wichtigste Teil.
‫Es ist also nicht schwierig, all
‫diese Vorlagen so zu erstellen, und was
‫wirklich zählt, ist, wie man sie tatsächlich mit Daten füllt, okay?
‫Und das werden wir als nächstes tun.
‫Aber schauen wir
‫uns erst einmal an, wie das jetzt aussieht.
‫Dann denken Sie daran, dass wir nur eine Karte haben
‫sollten und nicht neun, okay?
‫Denn auch hier haben wir nur ein statisches
‫Kartenelement.
‫Laden Sie das neu, und das sieht nicht so richtig aus.
‫Versuchen wir also herauszufinden, was hier vor sich geht.
‫Wir haben also unser Hauptelement so wie
‫wir es erstellt haben, dann haben wir auch unseren Kartencontainer.
‫Aber aus irgendeinem
‫Grund ist da wieder ein Main drin.
‫Ähm ah okay, ich muss natürlich dieses ursprüngliche
‫HTML-Element löschen, das wir dort haben.
‫Versuchen wir es also noch einmal.
‫Und jetzt sieht das besser aus, okay?
‫Jetzt fehlt das Bild hier
‫immer noch, aber das macht vorerst nichts aus.
‫Wichtig ist, dass
‫wir diese gut aussehende Karte hier haben, okay?
‫Jetzt wollen wir natürlich
‫für jede der Touren eine Karte haben, oder?
‫Im Grunde wollen wir
‫jetzt also das Tours-Array durchlaufen, das wir
‫in die Vorlage eingefügt haben, oder?
‫Grundsätzlich ist diese Tour also variabel.
‫Und denken Sie daran, dass
‫dies ein Array ist, da es mehrere Tourdokumente enthält.
‫Lassen Sie uns nun dieses
‫Array durchlaufen und eine Karte für jedes der Tourdokumente erstellen, okay?
‫Und zum Glück ist das bei Mops
‫sehr einfach, da Mops im Grunde mit eingebauten Schleifen ausgestattet ist, okay?
‫Und jetzt
‫können wir jede Tour in Touren machen, okay?
‫Tours ist hier also die Variable, die wir eingefügt haben,
‫und dann wird die
‫aktuelle Variable in jeder Iteration Tour genannt.
‫Wir könnten es x oder x y z oder wie auch immer nennen,
‫aber es macht Sinn, es einfach Tour zu nennen, okay?
‫Und so kommt in jeder Iteration, was dann
‫reinkommt, was im Grunde gedruckt wird.
‫Dies muss also wieder eine Ebene mehr eingerückt werden.
‫Damit ist es im
‫Grunde in dieser Schleifendeklaration hier.
‫Super, mal sehen, wie das jetzt aussieht.
‫Und so sollten wir jetzt neun identische Karten bekommen.
‫Und tatsächlich ist genau das passiert, in Ordnung?
‫Diese Daten
‫werden hier natürlich noch nicht dynamisch erstellt.
‫Und genau das werden wir
‫im nächsten Video beheben.