1 00:00:01,150 --> 00:00:02,170 ‫Kursleiter: In 2 00:00:02,170 --> 00:00:05,883 ‫dieser Vorlesung werden wir damit beginnen, die Tour-Übersichtsseite wirklich aufzubauen. 3 00:00:07,500 --> 00:00:09,170 ‫Und denken Sie daran, 4 00:00:09,170 --> 00:00:11,900 ‫dass die Übersichtsseite im Moment so aussieht. 5 00:00:11,900 --> 00:00:13,790 ‫Es hat also keinen wirklichen 6 00:00:13,790 --> 00:00:16,860 ‫Inhalt, und das werden wir in diesem Video hinzufügen. 7 00:00:16,860 --> 00:00:19,740 ‫Wir sind also hier in dieser 8 00:00:19,740 --> 00:00:22,803 ‫Stammroute, und hier wird die Übersicht sein, okay? 9 00:00:23,670 --> 00:00:25,210 ‫Also in unserer 10 00:00:25,210 --> 00:00:28,650 ‫Routeransicht ist es dann natürlich diese Route, okay? 11 00:00:28,650 --> 00:00:30,650 ‫Der Controller, der für 12 00:00:30,650 --> 00:00:34,697 ‫das Rendern dieser Seite verantwortlich ist, ist der getoverview-Controller, okay? 13 00:00:34,697 --> 00:00:37,650 ‫Gehen wir also zuerst zu hier und legen Sie die 14 00:00:37,650 --> 00:00:39,840 ‫Schritte dar, die wir unternehmen werden, um 15 00:00:39,840 --> 00:00:41,373 ‫diese Seite zu rendern. 16 00:00:42,650 --> 00:00:44,950 ‫Als erstes müssen wir also 17 00:00:44,950 --> 00:00:47,750 ‫tatsächlich alle Tourdaten aus unserer Sammlung 18 00:00:47,750 --> 00:00:49,273 ‫holen, oder? 19 00:00:51,120 --> 00:00:52,170 ‫Holen Sie sich 20 00:00:54,740 --> 00:00:56,010 ‫also Tourdaten aus der Sammlung. 21 00:00:56,010 --> 00:00:58,310 ‫Als nächstes bauen wir unser Template und 22 00:01:00,290 --> 00:01:01,420 ‫das tun wir 23 00:01:01,420 --> 00:01:03,630 ‫hier in dieser Controller-Funktion natürlich nicht. 24 00:01:03,630 --> 00:01:05,333 ‫Aber schreiben wir es trotzdem hier. 25 00:01:06,800 --> 00:01:11,800 ‫Erstellen Sie also eine Vorlage und rendern Sie diese Vorlage 26 00:01:14,210 --> 00:01:18,360 ‫schließlich mit den Tourdaten aus Schritt eins. 27 00:01:18,360 --> 00:01:20,350 ‫Also, beginnend mit dem 28 00:01:20,350 --> 00:01:22,930 ‫ersten Schritt hier die Tourdaten aus der 29 00:01:22,930 --> 00:01:25,013 ‫Sammlung holen, das heißt dann müssen 30 00:01:25,013 --> 00:01:27,413 ‫wir natürlich zuerst das Tourmodell tatsächlich importieren. 31 00:01:31,100 --> 00:01:34,030 ‫Das haben wir also schon 32 00:01:34,030 --> 00:01:35,513 ‫oft gemacht. 33 00:01:36,490 --> 00:01:38,340 ‫Das ist eigentlich eine Ebene höher 34 00:01:38,340 --> 00:01:39,673 ‫und dann in Modellen. 35 00:01:41,390 --> 00:01:42,593 ‫und Tourmodell. 36 00:01:45,300 --> 00:01:46,470 ‫Und dann brauchen 37 00:01:46,470 --> 00:01:48,163 ‫wir auch noch die Funktion 38 00:01:51,240 --> 00:01:52,290 ‫catchAsync, denn 39 00:01:52,290 --> 00:01:55,513 ‫dann wird diese Get Overview natürlich eine asynchrone Funktion. 40 00:02:04,190 --> 00:02:09,190 ‫In Ordnung, also markieren wir diesen als asynchron. 41 00:02:11,340 --> 00:02:14,120 ‫Wir brauchen jetzt auch hier next, damit 42 00:02:14,120 --> 00:02:16,123 ‫die catchAsync-Funktion tatsächlich funktioniert. 43 00:02:22,690 --> 00:02:25,770 ‫Okay, und ich hoffe, dass Sie jetzt tatsächlich den 44 00:02:25,770 --> 00:02:28,020 ‫Wert erkennen, dass wir all das 45 00:02:28,020 --> 00:02:29,850 ‫API-Zeug und alle Codes 46 00:02:29,850 --> 00:02:33,380 ‫erstellt haben, die wir bis zu diesem Punkt gemacht haben, 47 00:02:33,380 --> 00:02:37,680 ‫sodass wir jetzt nur noch all diese Dinge tun müssen Teile zusammen, okay? 48 00:02:37,680 --> 00:02:40,530 ‫Wir wissen also bereits jetzt, wie man all diese Dinge macht. 49 00:02:40,530 --> 00:02:44,060 ‫Wir haben unser Tourmodell bereits richtig funktioniert. 50 00:02:44,060 --> 00:02:46,033 ‫Das ist jetzt alles ganz einfach. 51 00:02:47,460 --> 00:02:51,880 ‫Const Tours ist also gleich zu erwarten. 52 00:02:51,880 --> 00:02:54,620 ‫Also wieder nichts Neues an dieser Stelle. 53 00:02:54,620 --> 00:02:58,423 ‫Und finde, im Grunde alle, in Ordnung? 54 00:02:59,310 --> 00:03:01,700 ‫Und was machen wir nun 55 00:03:01,700 --> 00:03:03,960 ‫eigentlich mit diesen Tourendaten? 56 00:03:03,960 --> 00:03:06,510 ‫Nun, wir müssen all diese Tourdaten 57 00:03:06,510 --> 00:03:09,700 ‫in die Vorlage einfügen, damit wir sie dort tatsächlich 58 00:03:09,700 --> 00:03:12,610 ‫verwenden und auf der Website anzeigen können, richtig? 59 00:03:12,610 --> 00:03:14,910 ‫Und das ist eigentlich ganz einfach. 60 00:03:14,910 --> 00:03:18,300 ‫Wir müssen es nur hier in dieses 61 00:03:18,300 --> 00:03:22,200 ‫Objekt einfügen, das in diesem Fall in die 62 00:03:22,200 --> 00:03:24,770 ‫Übersichtsvorlage eingefügt wird, okay? 63 00:03:24,770 --> 00:03:28,960 ‫Also ganz einfach, alles was wir sagen müssen sind Touren. 64 00:03:28,960 --> 00:03:32,050 ‫Das ist also dasselbe, wie Touren gleich Touren 65 00:03:32,050 --> 00:03:35,910 ‫sind und Sie wissen bereits, dass es ab ES 6 ausreicht, 66 00:03:35,910 --> 00:03:37,460 ‫es so zu machen. 67 00:03:40,100 --> 00:03:42,810 ‫Super, also immer wenn jetzt 68 00:03:42,810 --> 00:03:45,860 ‫eine Anfrage für die Übersichtsseite, also im 69 00:03:45,860 --> 00:03:49,290 ‫Grunde unsere Homepage unserer dynamisch gerenderten Website, kommt, 70 00:03:49,290 --> 00:03:52,070 ‫werden hier alle Tourdaten aus unserer Datenbank 71 00:03:52,070 --> 00:03:55,210 ‫abgerufen und dann in unsere Vorlage eingefügt. 72 00:03:55,210 --> 00:03:56,920 ‫Und jetzt müssen 73 00:03:56,920 --> 00:04:00,150 ‫wir nur noch diese Vorlage erstellen, oder? 74 00:04:00,150 --> 00:04:03,560 ‫Kommen wir also zur Übersicht. Mops. 75 00:04:03,560 --> 00:04:08,270 ‫Hier können wir diesen h1-Platzhalter hier tatsächlich loswerden. 76 00:04:08,270 --> 00:04:10,410 ‫Und jetzt möchte ich mir die 77 00:04:10,410 --> 00:04:12,683 ‫statische HTML-Datei hier noch einmal genauer ansehen. 78 00:04:13,950 --> 00:04:18,320 ‫Das ist also im öffentlichen Ordner und dann 79 00:04:18,320 --> 00:04:22,120 ‫in der Übersicht. html, okay? 80 00:04:22,120 --> 00:04:24,370 ‫Wir haben den Header also bereits in 81 00:04:24,370 --> 00:04:26,000 ‫einer der vorherigen Vorlesungen erstellt 82 00:04:26,000 --> 00:04:29,780 ‫und nun ist es an der Zeit, diesen Teil hier zu erstellen. 83 00:04:29,780 --> 00:04:31,670 ‫Als wir das Template zum 84 00:04:31,670 --> 00:04:34,450 ‫ersten Mal erstellten, hatte ich es tatsächlich falsch in 85 00:04:34,450 --> 00:04:37,010 ‫meiner HTML-Datei und ich hatte den Abschnitt Klassenübersicht, 86 00:04:37,010 --> 00:04:38,950 ‫aber in Ihrer Starterdatei hätten Sie 87 00:04:38,950 --> 00:04:41,410 ‫diese Hauptdatei mit der Klasse Hauptdatei haben sollen. 88 00:04:41,410 --> 00:04:43,430 ‫Und ich glaube, in Ihrer Akte 89 00:04:43,430 --> 00:04:46,240 ‫gibt es tatsächlich einen kleinen Text, der das erklärt, okay? 90 00:04:46,240 --> 00:04:49,050 ‫Aber wie auch immer, wir haben diesen Teil tatsächlich 91 00:04:49,050 --> 00:04:50,720 ‫aus unserer Basisvorlage gelöscht. 92 00:04:50,720 --> 00:04:52,480 ‫Denken Sie also daran, 93 00:04:52,480 --> 00:04:55,370 ‫dass wir hier im Inhalt tatsächlich kein HTML haben. 94 00:04:55,370 --> 00:04:57,800 ‫Das Hauptelement, das sich gerade im 95 00:04:57,800 --> 00:05:00,510 ‫HTML befindet, ist also nirgendwo zu finden. 96 00:05:00,510 --> 00:05:05,500 ‫Und das brauchen wir jetzt in unserer Übersicht, okay? 97 00:05:05,500 --> 00:05:09,790 ‫Lassen Sie uns diesen Teil des HTML-Codes in der Übersicht erstellen, denn 98 00:05:09,790 --> 00:05:12,923 ‫danach haben wir all diese sich wiederholenden Karten. 99 00:05:14,200 --> 00:05:15,770 ‫Sehen wir uns das auch 100 00:05:15,770 --> 00:05:17,380 ‫an, bevor wir den Code kopieren. 101 00:05:17,380 --> 00:05:19,450 ‫Sie sehen also, dass wir diese 102 00:05:19,450 --> 00:05:23,340 ‫Karten hier haben, und im Grunde ist jede dieser Karten, also 103 00:05:23,340 --> 00:05:24,990 ‫jedes dieser Elemente hier, 104 00:05:24,990 --> 00:05:27,000 ‫das, was ich eine Karte nenne. 105 00:05:27,000 --> 00:05:29,813 ‫Und im Grunde werden wir neun Karten haben. 106 00:05:30,650 --> 00:05:34,490 ‫Also, diese neun Karten auf dieser Übersichtsseite. 107 00:05:34,490 --> 00:05:37,560 ‫Und es sind neun Karten, weil wir im Moment 108 00:05:37,560 --> 00:05:39,080 ‫neun Touren haben, aber 109 00:05:39,080 --> 00:05:42,780 ‫es könnten natürlich auch weniger oder mehr dieser Karten sein, oder? 110 00:05:42,780 --> 00:05:45,540 ‫Aber egal, was hier wichtig ist, 111 00:05:45,540 --> 00:05:48,150 ‫ist, dass sich diese Karten tatsächlich 112 00:05:48,150 --> 00:05:49,890 ‫immer wieder wiederholen. 113 00:05:49,890 --> 00:05:52,263 ‫Wir haben also dieses riesige Kartenelement hier. 114 00:05:54,240 --> 00:05:56,340 ‫Und so gibt es 115 00:05:56,340 --> 00:06:01,083 ‫das erste, und dann gibt es viele gleiche sich wiederholende Elemente danach. 116 00:06:01,940 --> 00:06:02,820 ‫Okay? 117 00:06:02,820 --> 00:06:05,920 ‫Und so habe ich eigentlich nur eine Mops-Vorlage für 118 00:06:05,920 --> 00:06:07,460 ‫diese Karte erstellt, 119 00:06:07,460 --> 00:06:10,020 ‫damit wir sie jetzt nicht manuell schreiben 120 00:06:10,020 --> 00:06:12,900 ‫und viel Zeit damit verschwenden müssen, in Ordnung? 121 00:06:12,900 --> 00:06:15,660 ‫Das würde den Kurs nur unnötig lang machen und so 122 00:06:15,660 --> 00:06:18,540 ‫habe ich beschlossen, diese Vorlage im Voraus zu erstellen, damit wir 123 00:06:18,540 --> 00:06:20,010 ‫sie jetzt verwenden können. 124 00:06:20,010 --> 00:06:22,970 ‫Wenn Sie jetzt Ihre Mops-Fähigkeiten noch ein 125 00:06:22,970 --> 00:06:26,010 ‫bisschen üben möchten, können Sie das Video an dieser 126 00:06:26,010 --> 00:06:30,040 ‫Stelle einfach anhalten und dann den gesamten Code in Mops übersetzen. 127 00:06:30,040 --> 00:06:30,873 ‫Gut? 128 00:06:30,873 --> 00:06:33,410 ‫Und wenn Sie fertig sind, können Sie wiederkommen. 129 00:06:33,410 --> 00:06:36,400 ‫Aber jetzt werde ich tatsächlich weitermachen und diese Vorlage verwenden. 130 00:06:36,400 --> 00:06:39,680 ‫Und das ist hier in den Entwicklerdaten 131 00:06:39,680 --> 00:06:43,630 ‫und dann in den Vorlagen und der Tourkartenvorlage, okay? 132 00:06:43,630 --> 00:06:46,404 ‫Und das ist die gesamte Karte 133 00:06:46,404 --> 00:06:50,333 ‫für eine Karte, im Grunde übersetzt in Mops-Code, okay? 134 00:06:51,210 --> 00:06:52,773 ‫Also lass 135 00:06:54,090 --> 00:06:58,830 ‫uns das alles kopieren, hier in die Übersicht stellen, okay? 136 00:06:58,830 --> 00:07:01,700 ‫Und dann bedenken wir, dass wir vorher auch 137 00:07:01,700 --> 00:07:05,030 ‫diesen Haupt- und diesen Kartencontainer brauchen, also kopieren wir 138 00:07:05,030 --> 00:07:06,630 ‫das auch einfach. 139 00:07:10,440 --> 00:07:12,570 ‫Also nur hier 140 00:07:12,570 --> 00:07:15,840 ‫als Referenz, damit wir jetzt main main 141 00:07:16,720 --> 00:07:21,567 ‫schreiben können und dort einen Entwickler namens Card Container haben. 142 00:07:23,870 --> 00:07:24,703 ‫Okay? 143 00:07:24,703 --> 00:07:27,100 ‫Und dann, wie der Name schon 144 00:07:27,100 --> 00:07:29,533 ‫sagt, wird dieser Container die Karte enthalten. 145 00:07:30,610 --> 00:07:33,240 ‫Lassen Sie uns dies jetzt einrücken, da es sich 146 00:07:33,240 --> 00:07:35,720 ‫im Moment nicht wirklich im Kartenbehälter befindet. 147 00:07:35,720 --> 00:07:38,490 ‫Im Moment wäre es also innerhalb von main, aber das ist 148 00:07:38,490 --> 00:07:39,930 ‫nicht das, was wir wollen. 149 00:07:39,930 --> 00:07:42,450 ‫Also wähle ich alles aus und drücke auf die Registerkarte. 150 00:07:42,450 --> 00:07:44,770 ‫Ich drücke erneut auf die Tabulatortaste, und jetzt sehen wir, dass es 151 00:07:44,770 --> 00:07:45,950 ‫auf der richtigen Ebene ist. 152 00:07:45,950 --> 00:07:47,693 ‫Es befindet sich im Kartenbehälter. 153 00:07:49,310 --> 00:07:51,820 ‫Aber eigentlich ist es immer noch nicht 154 00:07:51,820 --> 00:07:52,995 ‫100% richtig, 155 00:07:52,995 --> 00:07:56,540 ‫da dieses Element auch innerhalb des Kartenelements sein sollte. 156 00:07:56,540 --> 00:07:58,780 ‫Und aus irgendeinem Grund hat das Kopieren dieser 157 00:07:58,780 --> 00:08:00,600 ‫Vorlage von einer Datei in 158 00:08:00,600 --> 00:08:03,050 ‫die andere diesen Code ein wenig durcheinander gebracht. 159 00:08:03,050 --> 00:08:07,270 ‫Seien Sie also vorsichtig, wenn Sie den Code 160 00:08:07,270 --> 00:08:08,830 ‫so einfügen. 161 00:08:08,830 --> 00:08:11,490 ‫In unserer Originalvorlage war also alles richtig, wie Sie 162 00:08:11,490 --> 00:08:13,870 ‫sehen, aber dann, als wir es kopierten, war 163 00:08:13,870 --> 00:08:15,023 ‫es irgendwie durcheinander. 164 00:08:16,160 --> 00:08:17,760 ‫Also, lass uns das schließen. 165 00:08:17,760 --> 00:08:19,340 ‫Das können wir 166 00:08:19,340 --> 00:08:21,800 ‫eigentlich auch schließen, wir brauchen es nicht 167 00:08:21,800 --> 00:08:25,030 ‫mehr, und zwar auch das Basistemplate und das Tourtemplate. 168 00:08:25,030 --> 00:08:27,580 ‫Wir arbeiten jetzt also nur mit der Übersicht. 169 00:08:27,580 --> 00:08:30,377 ‫Und jetzt haben wir diese eine Karte hier. 170 00:08:30,377 --> 00:08:33,990 ‫Und jetzt, wie Sie sehen, ist es auch eine völlig statische Karte. 171 00:08:33,990 --> 00:08:35,593 ‫Es verwendet also noch nicht 172 00:08:35,593 --> 00:08:38,750 ‫die Daten, die wir in die Vorlage eingefügt haben, oder? 173 00:08:38,750 --> 00:08:42,180 ‫Es hat also dieses statische Bild, es hat den ganzen Text hier 174 00:08:42,180 --> 00:08:44,660 ‫und es verwendet die Variable überhaupt nicht. 175 00:08:44,660 --> 00:08:46,960 ‫Okay, denn diesen Teil wollte ich eigentlich 176 00:08:46,960 --> 00:08:48,660 ‫zusammen mit dir machen. 177 00:08:48,660 --> 00:08:51,440 ‫Denn das ist in der Tat der wichtigste Teil. 178 00:08:51,440 --> 00:08:53,730 ‫Es ist also nicht schwierig, all 179 00:08:53,730 --> 00:08:56,370 ‫diese Vorlagen so zu erstellen, und was 180 00:08:56,370 --> 00:09:00,140 ‫wirklich zählt, ist, wie man sie tatsächlich mit Daten füllt, okay? 181 00:09:00,140 --> 00:09:02,290 ‫Und das werden wir als nächstes tun. 182 00:09:02,290 --> 00:09:03,760 ‫Aber schauen wir 183 00:09:03,760 --> 00:09:06,409 ‫uns erst einmal an, wie das jetzt aussieht. 184 00:09:06,409 --> 00:09:09,370 ‫Dann denken Sie daran, dass wir nur eine Karte haben 185 00:09:09,370 --> 00:09:11,070 ‫sollten und nicht neun, okay? 186 00:09:11,070 --> 00:09:14,240 ‫Denn auch hier haben wir nur ein statisches 187 00:09:14,240 --> 00:09:15,083 ‫Kartenelement. 188 00:09:16,760 --> 00:09:21,690 ‫Laden Sie das neu, und das sieht nicht so richtig aus. 189 00:09:21,690 --> 00:09:24,833 ‫Versuchen wir also herauszufinden, was hier vor sich geht. 190 00:09:25,920 --> 00:09:28,083 ‫Wir haben also unser Hauptelement so wie 191 00:09:29,020 --> 00:09:31,940 ‫wir es erstellt haben, dann haben wir auch unseren Kartencontainer. 192 00:09:31,940 --> 00:09:32,970 ‫Aber aus irgendeinem 193 00:09:32,970 --> 00:09:34,723 ‫Grund ist da wieder ein Main drin. 194 00:09:36,230 --> 00:09:40,180 ‫Ähm ah okay, ich muss natürlich dieses ursprüngliche 195 00:09:40,180 --> 00:09:43,223 ‫HTML-Element löschen, das wir dort haben. 196 00:09:44,150 --> 00:09:45,563 ‫Versuchen wir es also noch einmal. 197 00:09:46,920 --> 00:09:50,460 ‫Und jetzt sieht das besser aus, okay? 198 00:09:50,460 --> 00:09:52,020 ‫Jetzt fehlt das Bild hier 199 00:09:52,020 --> 00:09:54,340 ‫immer noch, aber das macht vorerst nichts aus. 200 00:09:54,340 --> 00:09:55,930 ‫Wichtig ist, dass 201 00:09:55,930 --> 00:09:59,570 ‫wir diese gut aussehende Karte hier haben, okay? 202 00:09:59,570 --> 00:10:01,360 ‫Jetzt wollen wir natürlich 203 00:10:01,360 --> 00:10:04,940 ‫für jede der Touren eine Karte haben, oder? 204 00:10:04,940 --> 00:10:07,220 ‫Im Grunde wollen wir 205 00:10:07,220 --> 00:10:10,343 ‫jetzt also das Tours-Array durchlaufen, das wir 206 00:10:10,343 --> 00:10:13,070 ‫in die Vorlage eingefügt haben, oder? 207 00:10:13,070 --> 00:10:14,950 ‫Grundsätzlich ist diese Tour also variabel. 208 00:10:14,950 --> 00:10:17,250 ‫Und denken Sie daran, dass 209 00:10:17,250 --> 00:10:20,400 ‫dies ein Array ist, da es mehrere Tourdokumente enthält. 210 00:10:20,400 --> 00:10:22,410 ‫Lassen Sie uns nun dieses 211 00:10:22,410 --> 00:10:26,641 ‫Array durchlaufen und eine Karte für jedes der Tourdokumente erstellen, okay? 212 00:10:26,641 --> 00:10:29,420 ‫Und zum Glück ist das bei Mops 213 00:10:29,420 --> 00:10:33,860 ‫sehr einfach, da Mops im Grunde mit eingebauten Schleifen ausgestattet ist, okay? 214 00:10:33,860 --> 00:10:34,960 ‫Und jetzt 215 00:10:36,130 --> 00:10:40,530 ‫können wir jede Tour in Touren machen, okay? 216 00:10:40,530 --> 00:10:43,970 ‫Tours ist hier also die Variable, die wir eingefügt haben, 217 00:10:43,970 --> 00:10:45,460 ‫und dann wird die 218 00:10:45,460 --> 00:10:47,830 ‫aktuelle Variable in jeder Iteration Tour genannt. 219 00:10:47,830 --> 00:10:52,210 ‫Wir könnten es x oder x y z oder wie auch immer nennen, 220 00:10:52,210 --> 00:10:55,790 ‫aber es macht Sinn, es einfach Tour zu nennen, okay? 221 00:10:55,790 --> 00:10:58,810 ‫Und so kommt in jeder Iteration, was dann 222 00:10:58,810 --> 00:11:01,800 ‫reinkommt, was im Grunde gedruckt wird. 223 00:11:01,800 --> 00:11:05,363 ‫Dies muss also wieder eine Ebene mehr eingerückt werden. 224 00:11:06,450 --> 00:11:08,740 ‫Damit ist es im 225 00:11:08,740 --> 00:11:11,380 ‫Grunde in dieser Schleifendeklaration hier. 226 00:11:11,380 --> 00:11:14,753 ‫Super, mal sehen, wie das jetzt aussieht. 227 00:11:15,800 --> 00:11:19,380 ‫Und so sollten wir jetzt neun identische Karten bekommen. 228 00:11:19,380 --> 00:11:24,380 ‫Und tatsächlich ist genau das passiert, in Ordnung? 229 00:11:24,400 --> 00:11:25,730 ‫Diese Daten 230 00:11:25,730 --> 00:11:28,870 ‫werden hier natürlich noch nicht dynamisch erstellt. 231 00:11:28,870 --> 00:11:30,760 ‫Und genau das werden wir 232 00:11:30,760 --> 00:11:32,373 ‫im nächsten Video beheben.