‫Kursleiter: Lassen Sie uns nun jedes der
‫Kartenelemente mit den richtigen Daten für jede der Touren füllen.
‫Also nur als kurze Zusammenfassung.
‫In einem letzten Video haben wir damit begonnen, dieses Hauptelement
‫und ein Element innerhalb eines div-Containerelements zu erstellen, und
‫dann innerhalb dieses Containers
‫eines dieser Kartenelemente für jede der
‫Touren, die in dem Array enthalten sind, das
‫wir an diese Vorlage übergeben.
‫Und dafür verwenden wir ein Pug-Array, das genau
‫so funktioniert.
‫Also, was ist jedes Schlüsselwort
‫hier und das Ergebnis davon sah so aus, in Ordnung.
‫Was wir jetzt also tun werden,
‫ist, jede dieser Karten hier mit den tatsächlichen Daten zu füllen.
‫Und fangen wir hier mit dem Tournamen an.
‫Denken Sie also daran, wie wir den Wert einer Variablen
‫in ein Element einfügen.
‫Naja, wir benutzen gleich und dann in diesem Fall Tour.
‫Also, der Name
‫der Variablen in der aktuellen Schleifeniteration, richtig.
‫Das ist also ein Tourdokument und dann ein Punktname, denk dran.
‫Schauen wir uns das also ganz schnell im Kompass an.
‫Hier haben wir also
‫vier Touren und
‫das sind alle Daten, die wir jetzt brauchen werden, okay.
‫Und beginnend mit dem Namen hier, okay.
‫Wenn wir also jetzt unsere Seite neu laden, sollte sich
‫das hier eigentlich widerspiegeln.
‫Und hier beginnt die Magie und es hat funktioniert.
‫Dies ist das erste Mal, dass wir
‫wirklich sehen, dass die Daten aus der Datenbank tatsächlich
‫auf der Website gerendert werden.
‫Hier haben wir also den Tournamen für jede der
‫Touren und wieder der kommt jetzt direkt aus unserer Datenbank.
‫Also, fantastisch, das ist wirklich cool
‫und lasst uns diese Karte nun tatsächlich weiterbauen.
‫Also, hier über das Bild jetzt.
‫Fügen wir auch den alternativen Text zum Tournamen hinzu.
‫Jetzt können wir hier nicht einfach einen Tourpunktnamen eingeben, weil
‫wir uns in einem String befinden
‫und das funktioniert nicht.
‫Wenn
‫wir es jetzt so
‫machen, wird es auch nicht funktionieren, denn hier
‫erwartet dieses Alt tatsächlich einen String, okay.
‫Daher brauchen wir hier einige Anführungszeichen um diese Variable.
‫Der einfachste Weg, dies
‫zu tun, besteht darin, tatsächlich ES6-Vorlagenzeichenfolgen zu verwenden.
‫Also, nur so und immer wieder,
‫weil dies hier eigentlich erwartet, dass eine Saite
‫hereinkommt, und damit erstellen wir natürlich eine Saite.
‫Als nächstes legen wir dann das Bild hier fest, okay.
‫Werfen wir also noch einmal einen Blick auf
‫den Kompass, um zu sehen, wie das Titelbild in Ordnung aussieht.
‫Und so haben wir eine Eigenschaft namens image
‫cover und dann haben wir hier nur den Namen des Bildes selbst.
‫Also nicht der Pfad zum Bild. =
‫und damit wir tatsächlich manuell angeben müssen, okay.
‫Aber was hier zählt, ist, dass es
‫Image-Cover genannt wird.
‫Und lassen Sie uns das alles los.
‫Beginnen Sie damit, eine Vorlagenzeichenfolge zu
‫erstellen und dann das Dot-Image-Cover zu erkunden, und jetzt müssen
‫wir den
‫gesamten Pfad zu diesem Bild herausfinden, okay.
‫Und wie wir bereits wissen, befinden sich die
‫Bilddaten im öffentlichen Ordner.
‫Also der Ordner, aus dem alle
‫statischen Assets bereitgestellt
‫werden, und hier haben wir Bilder.
‫Und dann haben wir einen Ordner.
‫Eine für Touren und eine für Benutzer, okay.
‫Und so haben wir innerhalb jeder
‫dieser Touren dann die drei Bilder und ein Titelbild.
‫Das wird also ungefähr so aussehen.
‫Und so ist der Pfad hier Bildpunkt-Touren oder Schrägstrich-Touren und
‫dann den Namen des Bildes schräg, großartig.
‫Damit sollten ganze Websites
‫jetzt noch besser aussehen, ja.
‫Jetzt wird es richtig lebendig.
‫Das ist also fantastisch.
‫Das gibt mir jedes Mal ein
‫tolles Gefühl, wenn es funktioniert.
‫Wie auch immer, kümmern wir uns jetzt um den
‫Rest der Daten, die
‫natürlich auf all diesen Karten immer noch gleich aussehen, okay.
‫Lassen Sie uns nun die Daten in unserer Sammlung verwenden,
‫um diese Zeichenfolge hier zu erstellen.
‫Sie sehen also, dass dies tatsächlich eine
‫Kombination verschiedener Daten ist.
‫Wir haben also den Schwierigkeitsgrad und die Tourdauer und
‫lassen uns hier nun einen Vorlagenstring erstellen.
‫Weisen Sie diesem Element also grundsätzlich diese Vorlagenzeichenfolge zu.
‫Und so starten wir hier mit
‫Tourpunktschwierigkeit, merken, dann den Platz und dann
‫die Tourdauer, Tourpunktdauer Tagestour, okay.
‫Das ist die Übersetzung dieses Inhalts.
‫Als nächstes haben wir hier die Tourzusammenfassung, okay.
‫Also, gleiche Tour-Punkte-Zusammenfassung, in Ordnung.
‫Als nächstes haben wir dann den Startort und so startet
‫diese Tour zum Beispiel in
‫Banff Kanada und also schauen wir uns hier nochmal
‫den Kompass an, nur um zu
‫sehen, wie die Daten aussehen oder
‫eigentlich müssen wir nicht immer hin und
‫her schalten zu kompassieren.
‫Wir können hier auch einfach Daten öffnen oder importieren.
‫Auf den Touren können wir diese Daten also einfach hier
‫verwenden, anstatt immer den Kompass zu verwenden.
‫Bevor wir also die Zusammenfassung verwenden,
‫gehen wir weiter und verwenden den Startort, der
‫tatsächlich hier oben ist.
‫Also, jetzt wollen wir die Punktbeschreibung des Startorts, okay.
‫Also, Tourpunkt-Startpunkt-Punktbeschreibung.
‫Und jetzt beginnen Sie
‫zu verstehen, warum es sinnvoll war, all
‫diese verschiedenen Daten, die wir hier erstellt haben, zu erstellen.
‫Richtig, als nächstes werden wir die Verabredungen verwenden, also behalte
‫es im Hinterkopf.
‫Dass dies ein Array ist, okay.
‫Denn was wir jetzt in unserer Übersicht wollen,
‫ist im Grunde das Datum, an dem die nächste Tour beginnt.
‫Das ist in diesem Fall das Symbol mit
‫einem Kalender hier.
‫Das ist also
‫im Grunde das erste Element dieses Startdaten-Arrays.
‫Beginnen Sie also mit dem Startdatum an Position 0.
‫Als nächstes haben wir dieses Datenelement, das angibt, wie viele Stopps
‫es bei diesen Touren gibt.
‫Im Grunde
‫bedeutet das also, wie viele Standorte
‫wir haben und wir werden also wieder die
‫Standorte verwenden und dieses Mal
‫nicht die Start-Location, sondern wirklich diese Standorte,
‫also wenn Sie angeben möchten, wie viele Standorte wir haben.
‫Nun, dann müssen wir die Länge dieses Arrays zählen, okay.
‫Und so einfach auch.
‫Also, gleich und setzen Sie es
‫dann auf diese Vorlagenzeichenfolge,
‫da wir auch diesen Stopp hinzufügen möchten und so Punktpositionen Punktlängenstopps
‫und schließlich die Anzahl der Personen,
‫die zu jeder der Gruppen gehören, hinzufügen.
‫Denken Sie also daran, die Personen, die an einer
‫Tour teilnehmen können und
‫die bei Tour gespeichert ist, aber maximale Gruppengröße.
‫Und dann Leute.
‫Großartig, dieser Teil ist jetzt erledigt und
‫lasst uns tatsächlich auf unsere Website zurückkehren und
‫das testen.
‫Und ja schön, zumindest fast schön, denn dieses Date
‫sieht hier irgendwie komisch aus.
‫Also, wir wollen wirklich nur den einundzwanzigsten Juni, also müssen wir
‫hier in dieser Übersicht
‫nicht allzu spezifisch sein, okay.
‫Was wir also wollen, ist wieder der Juni 2021 und im Moment
‫ist das ganze Durcheinander und also lasst uns
‫das beheben und zum
‫Glück ist das mit JavaScript
‫sehr einfach, das ein paar sehr nette
‫Funktionen enthält, um mit Datumsangaben zu arbeiten.
‫Und denken Sie daran, dass jedes dieser
‫Startdaten hier wirklich ein Datumsobjekt
‫in einer Datenbank ist und wir
‫jetzt eine Funktion wie diese für lokale Zeichenfolgen verwenden können, okay.
‫Im Grunde wird dieses Datum also in
‫einen gut lesbaren String umgewandelt
‫und hier können wir jetzt eine Option für die Sprache übergeben.
‫Das ist also Englisch für US und
‫dann auch ein Objekt mit einigen Optionen und so
‫können wir hier nun angeben, dass ein Monat
‫lang sein soll.
‫Also, anstatt nur eine Abkürzung, wie wir sie
‫hier hatten.
‫Also, an einem April, einem
‫August wird es jetzt so ausgedruckt.
‫Also wirklich der Name des gesamten Monats und okay und dann
‫auch noch sagen, dass das Jahr numerisch sein soll und wenn du
‫hier mehr über diese Funktion
‫erfahren willst dann geh einfach weiter und google das, okay.
‫Also, probieren wir das noch einmal
‫aus und jetzt sieht es wirklich schön aus, toll.
‫Lassen Sie uns also weitermachen und den letzten Teil hier mit
‫dem Preis und den Bewertungsdetails beenden.
‫Und das ist hier unten in der Fußzeile der Karte
‫und das ist hier nur der Preis.
‫Also, lassen wir es tatsächlich dort, denn jetzt brauchen
‫wir noch einen Vorlagenstring, weil der
‫Preis nicht nur diese Zahl ist, sondern wir brauchen
‫hier tatsächlich ein zusätzliches Dollarzeichen für
‫den Dollarpreis.
‫Also, dieser hier, richtig.
‫Als nächstes haben wir hier die durchschnittliche Bewertung.
‫Das ist es also,
‫und wir wissen bereits, dass dies Tour-Punkte-Durchschnittsbewertung genannt wird.
‫Also haben wir das so oft benutzt, glaube ich zumindest.
‫Bestätigen wir es einfach so, dass es sich tatsächlich um den Durchschnitt der Bewertungen und dann
‫auch um die Anzahl der Bewertungen handelt.
‫Also kopieren wir das einfach.
‫Also, Bewertungen durchschnittlich und
‫jetzt wollen wir hier die Anzahl der Bewertungen.
‫Alles klar, aber natürlich muss dies
‫ein Template-String sein
‫und dann hier gleich setzen und dann natürlich den Variablennamen
‫hier interpolieren und jetzt müssen wir endlich
‫die URL zur Detailseite bauen, okay.
‫Denken Sie also daran, wenn wir auf eine der Karten klicken.
‫Es führt uns dann zur
‫Detailseite und so müssen wir jetzt natürlich diesen Link
‫angeben, denn das hängt natürlich von jeder Tour ab.
‫Wir möchten also Links zu Slash-Touren verlinken und uns dann
‫daran erinnern, wie ich zuvor erwähnt
‫habe, dass wir zum Rendern dieser Seiten tatsächlich
‫Touren nach ihrem Slug und nicht nach
‫ihrer ID abfragen möchten.
‫Wie wir es in der API
‫gemacht haben, okay, denn dadurch sieht die URL eigentlich viel schöner aus, okay.
‫Und das verwenden wir jetzt hier.
‫Also Tour Dot Slug und so nur um euch zu
‫erklären warum wir diese
‫URL hier mit einem Schrägstrich beginnen.
‫Dies liegt daran, dass das Erstellen einer URL
‫wie dieser, die nur mit dem Schrägstrich beginnt, als relative URL
‫bezeichnet wird und
‫dies bewirkt, dass an diesem Teil der URL nach
‫dem Hostnamen hinzugefügt wird.
‫Also, dieser Host ist im Moment eins bis sieben Komma null null eins,
‫aber das muss hier nicht angegeben
‫werden, da beim Schreiben einer relativen URL wie dieser
‫dann das, was wir hier haben, zu diesem Hostnamen hinzufügt, okay.
‫Also, lass uns das nochmal neu laden und so
‫sind wir hier fast fertig, nicht
‫ganz fertig.
‫Hier sehen Sie also undefiniert
‫und daher haben wir dort wahrscheinlich etwas falsch gemacht.
‫Und Sie sehen auch, dass hier kein Platz
‫zwischen dem Preis und dem
‫pro Person ist und auch hier jetzt das gleiche.
‫Wenn Sie diese Schaltfläche hierher
‫bewegen, dann unten in der linken Ecke.
‫Hier unten sehen Sie also die URL, die wir
‫gerade erstellt haben.
‫Kann es tatsächlich
‫anklicken und es wird uns dann
‫dieser Fehler geben, weil wir diese Route natürlich
‫noch nicht definiert haben, aber
‫du siehst, dass es hier wirklich schön aussieht, mit den
‫Touren, die den Waldwanderer aufschlitzen, anstatt diesen hässlich aussehenden Ausweis da oben zu haben, okay .
‫Aber wie auch immer, lassen Sie uns jetzt dieses Undefinierte
‫in diesem fehlenden Raum reparieren.
‫Werfen wir also einen Blick auf diesen.
‫Nun, es sieht tatsächlich richtig aus, Bewertungen, Quantität,
‫aber natürlich fehlt uns dieser Tourpunkt, okay.
‫Das hast du wahrscheinlich schon gesehen.
‫Nun zu diesem fehlenden Platz.
‫Es gibt etwas Neues, das ich Ihnen über
‫Mops zeigen muss, nämlich diese sogenannte leere
‫Gasse oder eine Linie.
‫Wenn wir also einen
‫echten Abstand zwischen zwei Inline-Block-Elementen
‫benötigen, die diese Bänder sind, müssen
‫wir diesen Abstand
‫manuell mit dieser Pipeline hier wie folgt erstellen, okay.
‫Und das gleiche hier unten,
‫denn sonst werden,
‫wie wir gerade gesehen haben,
‫all diese Elemente dann einfach zusammengeklebt, in Ordnung.
‫Also, jetzt sollte das alles behoben sein
‫und dieser Platz ist immer noch nicht da und das
‫liegt tatsächlich daran, dass wir etwas vergessen haben.
‫Gehen wir
‫also zurück und wir müssen
‫diesen leeren Raum hier und hier manuell hinzufügen.
‫Diese leere Pipeline hier schafft also im Grunde
‫einen Raum für uns, in dem wir dann Inhalte
‫außerhalb eines Elements erstellen
‫können, und das ist im Grunde dieser Raum.
‫Also, dieser Raum hier, den wir gerade hier platziert haben.
‫Der Inhalt dieses leeren Raums befindet sich also
‫nicht in einem dieser beiden Elemente.
‫Um das zu können, brauchen
‫wir diese Pipeline.
‫Also, diese beiden Pipelines.
‫Also, versuchen Sie es noch
‫einmal und jetzt ist
‫der Raum, den wir gerade geschaffen haben, perfekt.
‫Und damit beenden wir eigentlich diesen Vortrag und
‫diese atemberaubend aussehende erste Website oder einen
‫Teil der Website, die wir gerade hier zusammen gebaut haben.
‫Also, ein Moment, um zu schätzen, wie cool das
‫wirklich ist und wie der
‫ganze Code, den wir zusammen geschrieben haben, tatsächlich funktioniert, okay.
‫Und danach gleich wieder
‫zurück, damit wir gemeinsam die Tourübersichtsseite aufbauen können.