1
00:00:01,050 --> 00:00:02,950
‫Jonas: In den nächsten

2
00:00:02,950 --> 00:00:06,940
‫Vorlesungen werden wir die Login-Funktionalität zu unserer Website hinzufügen.

3
00:00:06,940 --> 00:00:07,940
‫Und in

4
00:00:07,940 --> 00:00:10,420
‫diesem Vortrag beginnen wir damit, den Anmeldebildschirm

5
00:00:10,420 --> 00:00:12,610
‫tatsächlich zu rendern, um den Benutzern

6
00:00:12,610 --> 00:00:14,083
‫die Anmeldung zu erleichtern.

7
00:00:15,880 --> 00:00:19,620
‫Ich möchte noch einmal, dass dies eine Herausforderung für Sie

8
00:00:19,620 --> 00:00:22,810
‫ist, damit Sie einige der Fähigkeiten, die Sie

9
00:00:22,810 --> 00:00:24,890
‫gelernt haben, tatsächlich üben können.

10
00:00:24,890 --> 00:00:28,230
‫Ich möchte, dass Sie eine Slash-Login-Route

11
00:00:28,230 --> 00:00:29,463
‫erstellen.

12
00:00:31,550 --> 00:00:33,240
‫Dann erstellen Sie einen Controller

13
00:00:33,240 --> 00:00:34,930
‫und natürlich eine Vorlage.

14
00:00:34,930 --> 00:00:36,720
‫Und diese Vorlage ist wirklich einfach.

15
00:00:36,720 --> 00:00:39,610
‫Es ist nur ein statischer HTML-Code, an den

16
00:00:39,610 --> 00:00:41,783
‫wir keine Variablen übergeben müssen.

17
00:00:43,030 --> 00:00:45,050
‫Dafür gibt es tatsächlich

18
00:00:45,050 --> 00:00:47,375
‫eine Vorlage hier im Vorlagenordner.

19
00:00:47,375 --> 00:00:50,623
‫Das sollte für Sie also wirklich einfach sein.

20
00:00:52,211 --> 00:00:55,133
‫Also pausiere dieses Video und komm zurück, wenn du fertig bist.

21
00:00:58,580 --> 00:00:59,850
‫Gut, willkommen zurück.

22
00:00:59,850 --> 00:01:04,300
‫Ich hoffe, Sie haben diese Herausforderung erfolgreich gemeistert.

23
00:01:04,300 --> 00:01:05,963
‫Hier also meine Meinung dazu.

24
00:01:07,080 --> 00:01:09,670
‫Router Dot Get die Route

25
00:01:09,670 --> 00:01:11,360
‫ist Slash-Login und

26
00:01:11,360 --> 00:01:12,380
‫dann

27
00:01:14,661 --> 00:01:17,223
‫verwenden wir Controller Dot

28
00:01:19,430 --> 00:01:20,650
‫Get Login-Formular.

29
00:01:20,650 --> 00:01:23,783
‫Das ist also der Routenhandler, den ich als nächstes erstellen werde.

30
00:01:29,820 --> 00:01:33,150
‫Exportieren Sie Punkt und erhalten Sie die Antwort des Anmeldeformulars

31
00:01:35,740 --> 00:01:36,680
‫und hier

32
00:01:39,470 --> 00:01:41,540
‫benötigen wir nicht mehr als nur

33
00:01:41,540 --> 00:01:43,590
‫die Anfrage und die Antwort.

34
00:01:43,590 --> 00:01:45,100
‫Tatsächlich sehe ich hier oben, dass

35
00:01:45,100 --> 00:01:46,563
‫wir den nächsten verpassen.

36
00:01:48,190 --> 00:01:51,360
‫Immer, wenn wir async-Funktionen in catchAsync verpackt haben,

37
00:01:51,360 --> 00:01:53,833
‫sollten wir immer next angeben.

38
00:01:55,950 --> 00:01:57,980
‫Aber hier müssen

39
00:01:57,980 --> 00:02:01,270
‫wir jetzt nur noch eine Login-Vorlage rendern.

40
00:02:01,270 --> 00:02:03,950
‫Wir haben diese Vorlage also noch nicht erstellt.

41
00:02:03,950 --> 00:02:06,320
‫Aber es wird Login heißen.

42
00:02:06,320 --> 00:02:09,240
‫Nehmen wir also an, res dot

43
00:02:10,280 --> 00:02:11,113
‫status

44
00:02:13,390 --> 00:02:14,940
‫200, eine

45
00:02:16,060 --> 00:02:17,640
‫Rendervorlage namens login.

46
00:02:17,640 --> 00:02:19,790
‫Dann, wie bei allen unseren

47
00:02:19,790 --> 00:02:23,090
‫anderen Seiten, möchten wir ihr eigentlich einen benutzerdefinierten Titel geben.

48
00:02:23,090 --> 00:02:26,010
‫Dafür haben wir immer ein Objekt

49
00:02:26,010 --> 00:02:28,240
‫mit der title-Eigenschaft übergeben.

50
00:02:28,240 --> 00:02:29,090
‫Rechts?

51
00:02:29,090 --> 00:02:32,010
‫Die Basisvorlage liest dann diesen Titel und

52
00:02:32,010 --> 00:02:34,543
‫fügt ihn in das Titel-HTML-Element ein.

53
00:02:35,581 --> 00:02:37,480
‫In diesem Fall

54
00:02:38,770 --> 00:02:43,770
‫ist der Titel einfach in Ihr Konto einzuloggen.

55
00:02:43,890 --> 00:02:46,690
‫Und das war's für den Routenhandler.

56
00:02:46,690 --> 00:02:47,963
‫Jetzt gehen

57
00:02:48,820 --> 00:02:51,520
‫wir 'Kopf, öffne die Login-Vorlage,

58
00:02:51,520 --> 00:02:53,230
‫wähle alles aus,

59
00:02:53,230 --> 00:02:57,663
‫Alles kopieren, schließen und die neue Ansicht hier erstellen.

60
00:02:59,860 --> 00:03:02,923
‫Rufen Sie natürlich Login-Punkt-Mops auf.

61
00:03:04,480 --> 00:03:06,380
‫Dann fügen wir diesen Code

62
00:03:06,380 --> 00:03:09,900
‫hier ein und jetzt kommt wieder der Trick, bei dem wir

63
00:03:09,900 --> 00:03:11,063
‫unser Basistemplate erweitern.

64
00:03:14,740 --> 00:03:19,740
‫Diese Erweiterung erstreckt sich auf die Erweiterung der Basisdatei. Vergessen Sie nicht, dass wir

65
00:03:20,120 --> 00:03:22,660
‫hier einen Block mit genau demselben

66
00:03:22,660 --> 00:03:25,443
‫Namen wie in der Basisdatei erstellen müssen.

67
00:03:26,950 --> 00:03:28,163
‫Das ist also Inhalt.

68
00:03:29,610 --> 00:03:33,130
‫Und damit sind wir eigentlich fertig, glaube

69
00:03:33,130 --> 00:03:33,963
‫ich.

70
00:03:36,000 --> 00:03:38,770
‫Natürlich müssen wir einrücken, um es zu einem Kind aus

71
00:03:38,770 --> 00:03:39,913
‫diesem Block zu machen.

72
00:03:40,760 --> 00:03:42,233
‫Aber das ist es tatsächlich.

73
00:03:43,602 --> 00:03:46,110
‫Jetzt müssen wir nur

74
00:03:46,110 --> 00:03:49,160
‫noch einen Link zur Anmeldeseite setzen,

75
00:03:49,160 --> 00:03:52,163
‫damit wir tatsächlich darauf zugreifen können.

76
00:03:54,462 --> 00:03:57,480
‫Im Moment verwenden die Anmelde- und Anmeldeschaltflächen

77
00:03:57,480 --> 00:03:59,393
‫tatsächlich das Schaltflächenelement.

78
00:04:00,630 --> 00:04:03,260
‫Aber so können wir das href-Attribut

79
00:04:03,260 --> 00:04:05,110
‫nicht wirklich angeben.

80
00:04:05,110 --> 00:04:09,360
‫Lassen Sie uns sie also tatsächlich in einen echten Link ändern.

81
00:04:09,360 --> 00:04:12,763
‫Und hier können wir die href angeben.

82
00:04:16,290 --> 00:04:20,543
‫Dieser zeigt also einfach auf Login.

83
00:04:21,970 --> 00:04:23,400
‫Und eine zweite hier,

84
00:04:23,400 --> 00:04:25,540
‫die Anmeldung, die wir eigentlich nicht implementieren werden,

85
00:04:27,210 --> 00:04:29,080
‫damit Sie dies selbst implementieren können,

86
00:04:29,080 --> 00:04:30,660
‫wenn Sie Lust dazu haben.

87
00:04:30,660 --> 00:04:33,190
‫Also im Grunde ein Anmeldeformular.

88
00:04:33,190 --> 00:04:34,490
‫Aber da all

89
00:04:34,490 --> 00:04:37,440
‫das, also der gesamte Prozess der Anmeldung sehr ähnlich

90
00:04:37,440 --> 00:04:39,220
‫ist wie das Einloggen, habe

91
00:04:39,220 --> 00:04:42,130
‫ich beschlossen, dies hier nicht in diesen Abschnitt aufzunehmen,

92
00:04:42,130 --> 00:04:44,800
‫da dies nur eine Menge doppelter Inhalte wäre

93
00:04:44,800 --> 00:04:47,663
‫und ich nicht möchte machen den Kurs unnötig lang.

94
00:04:50,240 --> 00:04:52,480
‫Geben Sie dem einen Safe, ich weiß

95
00:04:52,480 --> 00:04:55,730
‫nicht, ob der Server jetzt neu gestartet wird, tatsächlich tut

96
00:04:55,730 --> 00:04:56,730
‫er das

97
00:04:57,630 --> 00:05:00,113
‫nicht, also speichern wir eine dieser Java-Skriptdateien.

98
00:05:01,930 --> 00:05:02,763
‫Jetzt

99
00:05:03,980 --> 00:05:06,470
‫ist dies unsere Referenz-Website.

100
00:05:06,470 --> 00:05:08,450
‫Denken Sie daran, das ist es, was wir

101
00:05:08,450 --> 00:05:09,357
‫wollen, ist dieses.

102
00:05:11,030 --> 00:05:12,890
‫Kommen wir zu allen

103
00:05:12,890 --> 00:05:16,320
‫Touren und probieren wir jetzt unsere Login-Route aus.

104
00:05:16,320 --> 00:05:19,550
‫Und hier geht tatsächlich unsere Form.

105
00:05:19,550 --> 00:05:20,383
‫Groß.

106
00:05:21,650 --> 00:05:23,950
‫Jetzt können wir hier

107
00:05:23,950 --> 00:05:25,730
‫eine E-Mail eingeben,

108
00:05:25,730 --> 00:05:29,140
‫sagen wir admin dot naders dot

109
00:05:29,140 --> 00:05:30,100
‫io.

110
00:05:30,100 --> 00:05:32,100
‫Und Sie sehen, dass diese

111
00:05:32,100 --> 00:05:34,790
‫Eingabe hier schön formatiert wird, unabhängig davon, ob

112
00:05:34,790 --> 00:05:36,860
‫die E-Mail-Adresse tatsächlich gültig ist oder nicht.

113
00:05:36,860 --> 00:05:40,770
‫Wenn ich zum Beispiel die Erweiterung hier nicht richtig

114
00:05:40,770 --> 00:05:43,100
‫habe, wird sie orange und

115
00:05:43,100 --> 00:05:45,580
‫sagt mir, dass etwas nicht stimmt.

116
00:05:45,580 --> 00:05:47,730
‫Und das gleiche für das Passwort.

117
00:05:47,730 --> 00:05:50,400
‫Solange ich weniger als acht Zeichen habe, wird dies

118
00:05:50,400 --> 00:05:52,200
‫immer rot sein, was mir

119
00:05:52,200 --> 00:05:54,423
‫im Grunde bedeutet, dass ein Fehler vorliegt.

120
00:05:56,520 --> 00:05:58,260
‫Da ich jetzt acht Zeichen

121
00:05:58,260 --> 00:05:59,690
‫habe, wird es grün.

122
00:05:59,690 --> 00:06:01,970
‫Und wenn Sie daran interessiert sind, wie man

123
00:06:01,970 --> 00:06:04,020
‫diese Art von Magie mit CSS

124
00:06:04,020 --> 00:06:07,670
‫macht, dann schauen Sie sich bitte die CSS-Datei an, die ich nur

125
00:06:07,670 --> 00:06:09,390
‫für diesen Kurs codiert habe.

126
00:06:09,390 --> 00:06:12,270
‫Wie auch immer, das Klicken auf diese

127
00:06:12,270 --> 00:06:15,200
‫Schaltfläche hier bewirkt jetzt natürlich absolut alles, oder?

128
00:06:15,200 --> 00:06:17,390
‫Im nächsten Video werden wir also

129
00:06:17,390 --> 00:06:20,390
‫wirklich damit beginnen, die Anmeldefunktionalität zu implementieren,

130
00:06:20,390 --> 00:06:23,570
‫indem wir eine Anfrage an unseren bereits erstellten

131
00:06:23,570 --> 00:06:24,823
‫API-Endpunkt senden.