‫-: In diesem und
‫dem nächsten Video werden wir gemeinsam die Tour-Detailseite erstellen.
‫Und
‫nebenbei lernst du weitere Mops-Techniken
‫wie Conditionals und Mixins.
‫Und wie ich
‫Ihnen bereits gezeigt habe, sieht die Tour-Detailseite tatsächlich so aus.
‫Und das ist es, was wir in diesem und
‫im nächsten Video aufbauen werden.
‫Das einzige, was wir
‫etwas später verlassen
‫werden, ist eigentlich diese Karte.
‫Alles klar, aber alles
‫andere werden wir in diesen Werkzeugvorträgen aufbauen.
‫Einschließlich dieser Bewertungen.
‫Gut.
‫Im Moment haben wir also unsere Übersicht
‫und wir haben
‫diese Schaltflächen natürlich mit den bereits erstellten URLs.
‫Aber wenn wir dann versuchen, auf diese Seite zuzugreifen,
‫erhalten wir natürlich diesen Fehler.
‫Gut.
‫Kommen wir also zurück zu unserem VS-Code und
‫ich möchte dies eigentlich mit einer
‫kleinen Herausforderung für Sie beginnen.
‫Ich möchte, dass
‫Sie eine Route für die Detailseite gemäß
‫der URL erstellen, die wir gerade erstellt haben.
‫Und es wird
‫ähnlich sein, was wir hier bereits
‫haben, aber Sie müssen es ein wenig optimieren.
‫Okay.
‫Genug davon,
‫ich möchte auch, dass Sie diesen Controller bauen.
‫Also komm dazu.
‫Denn im Moment haben wir
‫nur diesen Platzhalter.
‫Lassen Sie mich Ihnen hier die Schritte geben.
‫Und wie immer
‫müssen wir
‫zuerst die Daten abrufen.
‫Diesmal für die gewünschte Tour.
‫Und dafür
‫bedenken Sie, dass wir hier tatsächlich die Bewertungen
‫und auch die Reiseleiter brauchen.
‫Okay.
‫Schauen wir
‫uns das also noch einmal an.
‫Also haben wir diese Reiseleiter hier.
‫Richtig, und so sind sie im Grunde ein separater Datensatz.
‫Also Benutzer.
‫Und dann haben wir hier auch die Bewertungen.
‫Nun, diese Reiseleiter hier,
‫ich glaube, sie werden tatsächlich automatisch in ein
‫Modell eingefügt.
‫Schauen wir uns das also ganz schnell an.
‫Also das
‫Tourmodell und so,
‫ja.
‫Hier
‫unten haben wir diese
‫automatische Auffüllung, wenn es eine Suchabfrage gibt,
‫aber nur für die Leitfäden.
‫Vergessen Sie also nicht, auch die
‫Bewertungen auszufüllen.
‫Okay.
‫Danach werden wir
‫eine Vorlage erstellen, aber
‫das werden wir zusammen gut machen, also brauche ich
‫Sie nicht, um diesen Teil zu erledigen.
‫Und schließlich möchte
‫ich, dass Sie auch diesen Teil hier abschließen.
‫So rendern
‫Sie
‫die Vorlage erneut mit
‫den Daten aus Schritt eins.
‫Gut.
‫Das ist also auch ganz einfach.
‫Ich möchte also,
‫dass Sie die Route erstellen und
‫dann auch die Daten abrufen.
‫Okay, also pausiere das Video hier und viel Glück dabei.
‫Ich hoffe, Sie haben das getan
‫und lassen es mich wissen, lösen Sie es hier für Sie.
‫Und wir beginnen mit der Route.
‫Und jetzt müssen wir hier eigentlich nur noch diese Schnecke hinzufügen.
‫Und das tun wir natürlich als URL-Parameter.
‫Also einfach so, es Slug nennen.
‫Also bevor wir die ID benutzen, richtig?
‫Also hatten wir es
‫so und nennen wir es jetzt einfach die Schnecke.
‫Gut.
‫Denn
‫auch so sieht die Übersichtsseite aus.
‫Wir haben im Grunde Tour Slash Slug.
‫Okay, und damit legen
‫wir dann die Tour im Controller an.
‫Also machen wir das jetzt hier.
‫Also const, Tour
‫gleich, erwarten Tour und
‫Findone.
‫Daher können wir die Suche nach ID dieses Mal nicht verwenden.
‫Nun, weil wir die
‫ID der Tour nicht kennen.
‫Und
‫so suchen wir stattdessen nach der Schnecke.
‫Und die
‫Schnecke ist wie ich
‫hoffe, Sie wissen es. Params
‫Dot Slug in Ordnung.
‫Und jetzt ist das alles, um
‫das Arrays-Feld zu füllen.
‫Gut.
‫Der Weg zum Auffüllen sind also Bewertungen.
‫Und eigentlich brauchen wir hier nicht alle Felder.
‫Lassen Sie uns also einfach diejenigen angeben, die wir brauchen.
‫Das sind also nur
‫die Rezension, die
‫Bewertung
‫und der Benutzer.
‫Denn
‫denken Sie daran, dass
‫wir tatsächlich so den Benutzernamen und das Benutzerfoto anzeigen.
‫Und dann
‫natürlich die Rezension selbst und die Bewertung.
‫Okay.
‫Dann beschwert es
‫sich natürlich, dass wir Async nicht verwendet haben.
‫Und das würde ich natürlich nicht vergessen.
‫Aber trotzdem ist
‫es gut, dass ES Line uns vor solchen Fehlern warnt.
‫Es nimmt wirklich viele Fehler aus
‫der Entwicklung weg.
‫Okay.
‫Und
‫dann übergeben wir hier natürlich
‫diese Tourvariable an unsere Tourvorlage.
‫Also dieser.
‫Sparen Sie.
‫Keine Fehler mehr.
‫Und damit ist dieser Teil nun tatsächlich fertig.
‫Alles, was wir
‫jetzt tun müssen, ist, unsere Vorlage zu erstellen.
‫Okay.
‫Das sollten
‫wir hier also schon haben.
‫Und das sind die Entwicklerdaten.
‫Wir haben also
‫viele Ordner und viele Daten.
‫Und es kann irgendwann
‫etwas verwirrend werden.
‫Okay.
‫Also,
‫lassen Sie uns diesen Platzhalterinhalt hier loswerden.
‫Und bevor wir etwas anderes
‫tun, werfen wir noch einmal einen Blick auf die ursprüngliche HTML-Datei.
‫Welches ist in diesem
‫öffentlichen Ordner, den ich gerade geschlossen habe.
‫Lassen Sie uns all dies hier wirklich schließen,
‫denn ich finde das wirklich verwirrend.
‫Okay, die Modelle auch.
‫Was wir jetzt brauchen, ist die Öffentlichkeit und dann
‫die Tour. html.
‫Also den Header haben wir natürlich schon.
‫Und dann geht hier der gesamte Inhalt.
‫Alle
‫diese Abschnitte, die
‫wir auf unserer
‫Seite haben, sind hier natürlich als HTML übersetzt.
‫Und genau
‫wie zuvor habe ich tatsächlich bereits
‫eine Pug-Vorlage erstellt, die auf all diesem HTML-Code basiert.
‫Alles klar, wir möchten das hier
‫nicht manuell zusammen übersetzen.
‫Okay.
‫So habe ich es hier schon in dieser Vorlagendatei.
‫Aber natürlich
‫können Sie das Video auch
‫jetzt wieder anhalten und
‫selbst übersetzen, wenn Sie Lust haben.
‫Gut.
‫Aber was ich jetzt tun werde, ist,
‫den gesamten Code zu kopieren.
‫Was immer noch eine Menge Code ist, wie Sie sehen können.
‫Also lass uns das alles kopieren und in unsere Tour gehen
‫und das hier einfügen.
‫Jetzt wird die Annotation wieder falsch sein.
‫Lassen Sie uns also kopieren oder auswählen, was wir gerade hier eingefügt haben.
‫Also ist alles außer der ersten Zeile falsch.
‫Aber alles, was wir hier tun müssen, ist, eine weitere Registerkarte hinzuzufügen.
‫Und das ist es.
‫Jetzt befinden sie sich alle innerhalb dieses Inhaltsblocks auf
‫derselben Ebene.
‫Also Sektion und
‫Sektion und
‫im Grunde sind alle Sektionen jetzt auf
‫dem gleichen Niveau,
‫also sind sie alle Geschwister.
‫Toll.
‫Also lasst uns all das, was wir nicht
‫mehr brauchen, einfach schließen.
‫Und genau wie
‫zuvor haben wir jetzt diese statische Seite
‫hier mit all diesen statischen Daten.
‫Von denen wir wissen, dass wir sie ersetzen müssen.
‫Aber bevor wir das tatsächlich
‫tun, schauen wir einfach mal, ob unsere
‫Route bereits funktioniert.
‫Okay.
‫Laden wir es also neu
‫und das gibt uns den gleichen Fehler.
‫Und ich denke,
‫das liegt daran, dass wir hier
‫Touren haben und nicht Tour, wie ich
‫denke, dass wir sie in unserer Route haben.
‫Hier haben wir also eine Tour.
‫Und so macht es eigentlich auch Sinn.
‫Also lasst uns das hier in unserer
‫Übersicht ändern.
‫Okay und
‫hier wollen wir eigentlich Tour.
‫Denn tatsächlich
‫sehen wir nur eine Tour und
‫nicht mehrere Touren.
‫Richtig?
‫Wenn wir also jetzt zurück zur
‫Übersicht gehen, sie laden und jetzt
‫The Forest Hiker öffnen,
‫dann sehen Sie, dass es eine Tour wird.
‫Und
‫dann bekommen wir natürlich den
‫HTML-Code für die soeben erstellte Seite.
‫Aus irgendeinem Grund ist das CSS nicht hier.
‫Versuchen wir einfach, das neu zu laden.
‫Nun, was ist hier los?
‫Versuchen wir, dies zu überprüfen.
‫Und ich sehe, wir haben ein paar Fehler.
‫Also können wir darauf klicken.
‫Und damit der Grund für das fehlende CSS,
‫denn stattdessen versucht es, die Datei an der falschen
‫Stelle zu laden.
‫Es wird also versucht, es in den CSS-Ordner innerhalb von
‫Tour zu laden.
‫Aber das gibt es natürlich nicht.
‫Und das liegt
‫daran, dass wir hier auf dieser Tourroute sind, okay.
‫Also müssen wir grundsätzlich die Art
‫und Weise korrigieren, wie wir das CSS in unser Basistemplate importieren.
‫Lass uns da hin gehen.
‫Und hier
‫sollten wir tatsächlich einen weiteren Schrägstrich haben.
‫Okay, und das gleiche eigentlich hier.
‫Und das
‫aus genau dem gleichen
‫Grund, den ich Ihnen zuvor in der Übersicht hier unten erläutert habe.
‫Also haben wir auch diese URL mit einem Schrägstrich begonnen.
‫Und das wird dann wieder am
‫Stamm der Seite beginnen.
‫Und so soll es funktionieren.
‫Das gilt übrigens für alle Bilder hier.
‫Alle Bilder sollten
‫also immer auch relativ zur Root-URL beginnen.
‫Also fügen wir das hier ganz schnell zu all diesen Bildern hinzu.
‫Und, ja,
‫das ist es.
‫Das sind sie alle.
‫Damit
‫haben wir die
‫Übersicht und auch diese Basisdatei korrigiert.
‫Wenn wir also jetzt
‫neu laden, sollten wir dann Zugriff auf das richtige CSS bekommen.
‫Und tatsächlich, los geht's.
‫Es gibt nur einen weiteren
‫Fehler, der hier in diesem Bild ist.
‫Und wieder
‫liegt es daran, dass es versucht,
‫es von der Tour hierher
‫zu laden und nicht von der Root-URL.
‫Das Problem
‫liegt also hier im Header.
‫Und so
‫müssen wir es hier natürlich
‫auch relativ zum Root-Pfad machen.
‫Wahrscheinlich das gleiche in der Fußzeile.
‫Und ja.
‫Gut.
‫Nur um das schnell zu bestätigen, ja,
‫es geht los.
‫Toll.
‫Wie ich bereits
‫erwähnt habe, enthält dies natürlich alle
‫statischen Daten zu The Park Camper Tour,
‫die wir in der Vorlage haben.
‫Aber wir schauen auf den Waldwanderer.
‫Beginnen wir also damit, unsere Vorlage zu reparieren und
‫im Grunde die dynamischen Daten hier zu verwenden.
‫Denken Sie also daran, dass die Variable, die wir hier
‫übergeben haben, Tour heißt.
‫Richtig?
‫Es heißt also einfach
‫Tour und so müssen wir es hier nennen.
‫Also Tour. Namen, und auch
‫das gleiche hier oben.
‫Und jetzt wissen Sie bereits, dass wir
‫hier einen Vorlagenstring
‫verwenden müssen, weil wir eigentlich einen String erstellen möchten.
‫So genannt . Tour.
‫Und auch hier ist dieser Weg nicht richtig.
‫Zuerst muss es ein Template-String sein und
‫dann unsere Bilder, ich schreibe
‫Image Slash
‫Tours Slash den Namen des Titelbilds.
‫Also Tourpunkt, und jetzt weiß ich
‫nicht mehr,
‫ob es das Titelbild oder das Titelbild ist.
‫Also, ja.
‫Bild-Cover.
‫Okay.
‫Probieren wir das also schnell aus.
‫Und denken Sie daran, wir sind bei The First Hiker.
‫Und das sollte nun der Name sein.
‫Und noch ein Fehler.
‫Also, heißt es hier, kann die Eigenschaftstour von
‫undefined nicht lesen.
‫Also gehen wir zurück und
‫ja.
‫Also hier ist dieser dumme Fehler.
‫Also natürlich Tour. Name und nicht Name.
‫Tour.
‫Also, was dachte
‫ich da?
‫Laden wir das neu und
‫jetzt bekommen wir
‫tatsächlich The Forest Hiker mit diesem wirklich schönen Titelbild im Hintergrund.
‫Toll.
‫Und lass uns hier weitermachen.
‫Erstellen Sie also noch eine weitere Vorlagenzeichenfolge.
‫Tour.
‫Dauer und dann
‫die Anzahl der Tage.
‫Dann hier unten haben wir wieder
‫den Startplatz.
‫Also, Rundgang.
‫Startort. Beschreibung, denken Sie daran.
‫Gut.
‫Jetzt hier unten
‫haben wir diese Übersichtsboxen hier.
‫Also Übersichtskasten-Detail.
‫Und wie Sie sehen, haben
‫wir hier
‫vier gleiche Kästchen, in denen sich nur
‫dieser Symbolname ändert, dann
‫das Datum und das nächste Datum.
‫Okay, hier ändert sich nicht der nächste
‫Termin,
‫sondern die Beschreibung der Boxen.
‫Also nächstes Datum,
‫Schwierigkeit, Teilnehmer und Wertung.
‫Gut.
‫Und so ist
‫dieser Code hier im
‫Grunde immer derselbe, nur mit drei Teilen, die sich ändern.
‫Also der Name des Symbols, die Beschreibung und
‫der Wert dieser Beschreibung.
‫Und da wir wiederholten Code nicht mögen,
‫richtig?
‫Lassen Sie uns eine andere Funktion von Pug
‫verwenden, die wir noch nicht verwendet
‫haben, nämlich Mixins.
‫Mixins sind also im
‫Grunde wiederverwendbare Codestücke, an die wir Argumente übergeben können.
‫Also ein bisschen wie eine Funktion.
‫Und es ist auch genau wie Mixins in SAS.
‫Das ist also ein CSS-Vorprozessor, mit dem
‫Sie vielleicht vertraut sind.
‫Kopieren wir also diesen Code hier für dieses Übersichtsfeld.
‫Also kopieren.
‫Und jetzt hier draußen,
‫aus diesem Block heraus, lasst uns dann ein neues Mixin erstellen.
‫Also schreiben wir Mixin und
‫dann den Namen des Mixins, den ich Übersichtsbox nenne.
‫Und dann können wir, ähnlich
‫wie bei einer Funktion, einige Argumente angeben.
‫Denken Sie also daran, wie
‫wir die Beschreibung der Box haben, dann haben wir den Wert dieser Beschreibung
‫und nennen es hier einfach Text.
‫Und dann auch der Symbolname.
‫Okay.
‫Also kopieren wir jetzt
‫diesen Text hier hinein und das bringt natürlich jetzt
‫unsere Formatierung durcheinander.
‫Lass uns das einfach schnell beheben.
‫Und jetzt funktionieren diese Variablen hier
‫wirklich wie
‫alle anderen Variablen in Pug.
‫Hier sollte nun also der Text
‫stehen.
‫Richtig?
‫Und das hier sollte die Beschreibung sein.
‫Also gleiche Beschreibung.
‫Nun, hier heißt es im CSS eigentlich Label.
‫Nennen wir es also auch hier Label.
‫Okay, also Label, Text und Symbol.
‫Daher müssen wir hier auch den Namen
‫dieses Symbols ändern und alle diese Symbolnamen beginnen immer
‫mit dem Symbolstrich.
‫Alles was wir also wirklich ersetzen
‫müssen, ist dieses Teil.
‫Lassen Sie uns also erneut eine Vorlagenzeichenfolge erstellen.
‫Und dann lass das los.
‫Und Symbol.
‫Okay, und jetzt können wir das verwenden.
‫Ich wollte auch sagen, dass wir dieses
‫Mixin auch in
‫eine andere Datei hätten exportieren und diese Datei dann hier einfügen können.
‫Aber ich denke, das macht nicht viel Sinn.
‫In diesem Fall, weil
‫es nicht wirklich viel Code ist.
‫Wie auch immer, lassen Sie uns jetzt wirklich weitermachen und
‫dieses Mixin verwenden.
‫Lassen Sie mich nur den Namen kopieren.
‫Also hier statt dieses Übersichtskastens.
‫Und jetzt lassen Sie es mich hier eigentlich nur duplizieren.
‫Okay, wir haben dieses Mixin verwendet, indem
‫wir plus geschrieben haben, und
‫dann wie bei einer normalen
‫Funktion leere Argumente übergeben.
‫Und so ist unsere erste Übersichtsbox der nächste Termin.
‫Dann ist vorerst nur das Datum, das hier ist.
‫Damit ich Ihnen zeigen kann, dass es tatsächlich funktioniert.
‫Also 20. August
‫21.
‫Und
‫dann hier, Kalender.
‫Okay, denn so heißt das Symbol hier.
‫Und so sollten wir jetzt
‫zwei Kisten bekommen.
‫Also dieser und
‫dieser, der genau gleich aussehen sollte.
‫Lassen Sie uns das also schnell bestätigen.
‫Und dann können wir weitermachen, um
‫das Mixin richtig zu verwenden.
‫Und ja, hier sind also unsere beiden
‫exakt gleichen Boxen.
‫Toll.
‫Also lasst uns dieses erste loswerden.
‫Und natürlich wollen wir hier das
‫echte Datum.
‫Okay.
‫Und
‫das heißt, Tour hinzufügen. Start, Datum, Null.
‫Schauen wir uns das also an.
‫Und denken Sie
‫daran, dass dies ein bisschen seltsam aussehen wird.
‫So wie früher.
‫Okay.
‫Also lass uns weitermachen und das beheben.
‫Lassen Sie uns das also von hier aus nehmen.
‫Was wir also brauchen, ist
‫im Grunde dies stattdessen.
‫Jetzt möchte ich diese
‫Zeile hier nicht zu lang machen, indem
‫ich sie einfach hier einfüge.
‫Warum also
‫nicht einfach eine neue Java-Script-Variable dafür erstellen.
‫Denken Sie also daran, dass wir
‫diese Syntax hier verwenden müssen,
‫um Java-Script-Code zu erstellen, der keine Ausgabe erzeugt.
‫Und dann können wir
‫hier auch einfach Java-Skript schreiben.
‫Okay.
‫Und jetzt werde ich hier einfach dieses
‫Datum verwenden.
‫Toll.
‫Und jetzt duplizieren wir das hier ein paar Mal für
‫alle Boxen, die wir haben.
‫Der erste ist also für Schwierigkeiten.
‫Und die Ikone ist im Trend.
‫Dann ist der nächste für die Teilnehmer.
‫Mit dem Symbol des Benutzers.
‫Und das letzte ist die Bewertung.
‫Und das Symbol ist ein Stern.
‫Hier haben wir also das Datum, aber hier in der
‫Schwierigkeit haben wir tatsächlich Tour. Schwierigkeit.
‫Dann wollen wir hier
‫für die Teilnehmer diese Saite.
‫Wie 10 Leute.
‫Also eine Schablone
‫mit dem Spruch Tour. Mischung,
‫Gruppengröße und dann Leute.
‫Und schließlich wollen wir die Wertung und
‫dann von fünf.
‫Also Tour,
‫und ich kann mich nie
‫erinnern, wie ich dieses Feld genannt habe.
‫Und es ist der Durchschnitt der Bewertungen.
‫Gut.
‫Und dann von
‫fünf.
‫Okay.
‫Und das sollte es sein.
‫Jetzt können wir all diesen Code loswerden.
‫Und so sieht es viel schöner aus.
‫Und
‫um sicherzugehen, dass
‫das funktioniert, speichern wir hier,
‫laden neu und tatsächlich bekommen wir leicht
‫25 Leute und die Bewertung
‫fünf von fünf.
‫Genial.
‫Wir haben also schon viel
‫behandelt, aber lass uns dieses Video in zwei Teile aufteilen und mit
‫dem Rest der Seite gleich im
‫nächsten fortfahren.