1
00:00:01,050 --> 00:00:02,950
‫Jonas: Selama beberapa kuliah

2
00:00:02,950 --> 00:00:06,940
‫berikutnya kami akan menambahkan fungsi login ke situs web kami.

3
00:00:06,940 --> 00:00:07,940
‫Dan

4
00:00:07,940 --> 00:00:10,420
‫dalam kuliah ini, kita akan mulai

5
00:00:10,420 --> 00:00:12,610
‫dengan menampilkan layar login untuk

6
00:00:12,610 --> 00:00:14,083
‫memudahkan pengguna login.

7
00:00:15,880 --> 00:00:19,620
‫Sekali lagi, saya sebenarnya ingin ini menjadi tantangan bagi

8
00:00:19,620 --> 00:00:22,810
‫Anda sehingga Anda benar-benar dapat melatih beberapa keterampilan

9
00:00:22,810 --> 00:00:24,890
‫yang telah Anda pelajari.

10
00:00:24,890 --> 00:00:28,230
‫Yang saya ingin Anda lakukan adalah membuat rute

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

12
00:00:31,550 --> 00:00:33,240
‫Kemudian buat pengontrol, dan,

13
00:00:33,240 --> 00:00:34,930
‫tentu saja, templat.

14
00:00:34,930 --> 00:00:36,720
‫Dan template itu sangat mudah.

15
00:00:36,720 --> 00:00:39,610
‫Ini hanya beberapa html statis dan kita tidak perlu

16
00:00:39,610 --> 00:00:41,783
‫memasukkan variabel apa pun ke dalamnya.

17
00:00:43,030 --> 00:00:45,050
‫Ada template untuk itu,

18
00:00:45,050 --> 00:00:47,375
‫sebenarnya, di sini di folder template.

19
00:00:47,375 --> 00:00:50,623
‫Jadi, itu seharusnya sangat mudah untuk Anda selesaikan.

20
00:00:52,211 --> 00:00:55,133
‫Jadi jeda video ini dan kembali setelah Anda siap.

21
00:00:58,580 --> 00:00:59,850
‫Oke, selamat datang kembali.

22
00:00:59,850 --> 00:01:04,300
‫Saya harap Anda menyelesaikan tantangan ini dengan sukses.

23
00:01:04,300 --> 00:01:05,963
‫Jadi inilah pendapat saya tentangnya.

24
00:01:07,080 --> 00:01:09,670
‫Router dot get rutenya adalah

25
00:01:09,670 --> 00:01:11,360
‫slash login dan

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

27
00:01:14,661 --> 00:01:17,223
‫kita menggunakan controller dot get

28
00:01:19,430 --> 00:01:20,650
‫login form.

29
00:01:20,650 --> 00:01:23,783
‫Jadi itu route handler yang akan saya buat selanjutnya.

30
00:01:29,820 --> 00:01:33,150
‫Ekspor dot get login form response dan di

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

32
00:01:39,470 --> 00:01:41,540
‫kita tidak membutuhkan lebih dari

33
00:01:41,540 --> 00:01:43,590
‫sekedar request dan response.

34
00:01:43,590 --> 00:01:45,100
‫Sebenarnya di atas sini saya melihat

35
00:01:45,100 --> 00:01:46,563
‫bahwa kita kehilangan yang berikutnya.

36
00:01:48,190 --> 00:01:51,360
‫Selalu, ketika kita memiliki fungsi async yang dibungkus dengan

37
00:01:51,360 --> 00:01:53,833
‫catchAsync, kita harus selalu menentukan selanjutnya.

38
00:01:55,950 --> 00:01:57,980
‫Tapi di sini, yang

39
00:01:57,980 --> 00:02:01,270
‫perlu kita lakukan sekarang adalah membuat template login.

40
00:02:01,270 --> 00:02:03,950
‫Jadi kami belum membuat template itu.

41
00:02:03,950 --> 00:02:06,320
‫Tapi, itu akan disebut login.

42
00:02:06,320 --> 00:02:09,240
‫Jadi, misalkan res dot status

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

44
00:02:13,390 --> 00:02:14,940
‫render template

45
00:02:16,060 --> 00:02:17,640
‫yang disebut login.

46
00:02:17,640 --> 00:02:19,790
‫Kemudian seperti semua halaman kami

47
00:02:19,790 --> 00:02:23,090
‫yang lain, kami sebenarnya ingin memberinya judul khusus.

48
00:02:23,090 --> 00:02:26,010
‫Untuk itu kita selalu melewati sebuah

49
00:02:26,010 --> 00:02:28,240
‫objek dengan property title.

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

51
00:02:29,090 --> 00:02:32,010
‫Jadi template dasar kemudian akan membaca judul itu

52
00:02:32,010 --> 00:02:34,543
‫dan meletakkannya di elemen html judul.

53
00:02:35,581 --> 00:02:37,480
‫Dalam hal

54
00:02:38,770 --> 00:02:43,770
‫ini, judulnya cukup masuk ke akun Anda.

55
00:02:43,890 --> 00:02:46,690
‫Dan itu saja untuk pengendali rute.

56
00:02:46,690 --> 00:02:47,963
‫Sekarang mari

57
00:02:48,820 --> 00:02:51,520
‫kita pergi, buka template login,

58
00:02:51,520 --> 00:02:53,230
‫pilih semua, salin

59
00:02:53,230 --> 00:02:57,663
‫semua, tutup dan buat tampilan baru di sini.

60
00:02:59,860 --> 00:03:02,923
‫Panggil, tentu saja, login dot pug.

61
00:03:04,480 --> 00:03:06,380
‫Kemudian, tempel kode itu di

62
00:03:06,380 --> 00:03:09,900
‫sini, dan sekarang muncul lagi trik di mana kita memperluas

63
00:03:09,900 --> 00:03:11,063
‫template dasar kita.

64
00:03:14,740 --> 00:03:19,740
‫Yang ini meluas ke ekstensi file dasar jangan lupa bahwa di sini kita perlu

65
00:03:20,120 --> 00:03:22,660
‫membuat blok dengan nama yang sama

66
00:03:22,660 --> 00:03:25,443
‫persis seperti yang kita miliki di file dasar.

67
00:03:26,950 --> 00:03:28,163
‫Jadi itu adalah konten.

68
00:03:29,610 --> 00:03:33,130
‫Dan dengan ini kita benar-benar selesai, saya

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

70
00:03:36,000 --> 00:03:38,770
‫Tentu saja, kita perlu membuat indentasi untuk membuatnya menjadi anak

71
00:03:38,770 --> 00:03:39,913
‫dari blok ini.

72
00:03:40,760 --> 00:03:42,233
‫Tapi, itu sebenarnya.

73
00:03:43,602 --> 00:03:46,110
‫Sekarang, satu hal lagi yang

74
00:03:46,110 --> 00:03:49,160
‫perlu kita lakukan adalah benar-benar mengatur tautan ke

75
00:03:49,160 --> 00:03:52,163
‫halaman login sehingga kita benar-benar dapat mengaksesnya.

76
00:03:54,462 --> 00:03:57,480
‫Saat ini, tombol masuk dan daftar sebenarnya

77
00:03:57,480 --> 00:03:59,393
‫menggunakan elemen tombol.

78
00:04:00,630 --> 00:04:03,260
‫Tapi seperti ini, kita tidak bisa

79
00:04:03,260 --> 00:04:05,110
‫benar-benar menentukan atribut href.

80
00:04:05,110 --> 00:04:09,360
‫Jadi mari kita ubah mereka menjadi tautan nyata.

81
00:04:09,360 --> 00:04:12,763
‫Dan di sini, kita dapat menentukan href.

82
00:04:16,290 --> 00:04:20,543
‫Jadi yang ini hanya menunjuk untuk login.

83
00:04:21,970 --> 00:04:23,400
‫Dan yang kedua

84
00:04:23,400 --> 00:04:25,540
‫di sini, pendaftaran sebenarnya tidak akan

85
00:04:27,210 --> 00:04:29,080
‫kami terapkan sehingga Anda dapat

86
00:04:29,080 --> 00:04:30,660
‫menerapkannya sendiri jika Anda mau.

87
00:04:30,660 --> 00:04:33,190
‫Jadi pada dasarnya formulir pendaftaran.

88
00:04:33,190 --> 00:04:34,490
‫Tapi, karena semua

89
00:04:34,490 --> 00:04:37,440
‫itu, jadi seluruh proses mendaftar akan sangat mirip dengan

90
00:04:37,440 --> 00:04:39,220
‫masuk, saya memutuskan untuk tidak

91
00:04:39,220 --> 00:04:42,130
‫memasukkannya di sini di bagian ini karena itu

92
00:04:42,130 --> 00:04:44,800
‫hanya akan banyak duplikat konten dan saya

93
00:04:44,800 --> 00:04:47,663
‫tidak mau membuat kursus yang tidak perlu panjang.

94
00:04:50,240 --> 00:04:52,480
‫Berikan ini brankas, saya tidak

95
00:04:52,480 --> 00:04:55,730
‫tahu apakah ini sekarang me-restart server, sebenarnya tidak,

96
00:04:55,730 --> 00:04:56,730
‫jadi mari

97
00:04:57,630 --> 00:05:00,113
‫simpan salah satu file skrip java ini.

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

99
00:05:03,980 --> 00:05:06,470
‫ini adalah situs referensi kami.

100
00:05:06,470 --> 00:05:08,450
‫Ingat, itulah yang kita inginkan, apakah

101
00:05:08,450 --> 00:05:09,357
‫yang ini.

102
00:05:11,030 --> 00:05:12,890
‫Ayo datang ke semua

103
00:05:12,890 --> 00:05:16,320
‫tur dan sekarang mari kita coba rute login kita.

104
00:05:16,320 --> 00:05:19,550
‫Dan, memang, inilah formulir kami.

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

106
00:05:21,650 --> 00:05:23,950
‫Nah disini kita bisa

107
00:05:23,950 --> 00:05:25,730
‫memasukkan beberapa

108
00:05:25,730 --> 00:05:29,140
‫email misalkan admin dot naders dot

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

110
00:05:30,100 --> 00:05:32,100
‫Dan Anda melihatnya dengan

111
00:05:32,100 --> 00:05:34,790
‫baik memformat input ini di sini apakah alamat

112
00:05:34,790 --> 00:05:36,860
‫email itu benar-benar valid atau tidak.

113
00:05:36,860 --> 00:05:40,770
‫Misalnya, jika saya tidak memiliki ekstensi yang benar di sini, maka

114
00:05:40,770 --> 00:05:43,100
‫akan menjadi oranye yang memberi

115
00:05:43,100 --> 00:05:45,580
‫tahu saya bahwa ada sesuatu yang salah.

116
00:05:45,580 --> 00:05:47,730
‫Dan hal yang sama untuk kata sandi.

117
00:05:47,730 --> 00:05:50,400
‫Selama saya memiliki kurang dari delapan karakter, ini

118
00:05:50,400 --> 00:05:52,200
‫akan selalu berwarna merah, pada

119
00:05:52,200 --> 00:05:54,423
‫dasarnya memberi tahu saya bahwa ada kesalahan.

120
00:05:56,520 --> 00:05:58,260
‫Bahwa sekarang saya memiliki delapan

121
00:05:58,260 --> 00:05:59,690
‫karakter, berubah menjadi hijau.

122
00:05:59,690 --> 00:06:01,970
‫Dan jika Anda tertarik dengan cara

123
00:06:01,970 --> 00:06:04,020
‫melakukan keajaiban semacam ini dengan

124
00:06:04,020 --> 00:06:07,670
‫css, silakan periksa file css yang saya kodekan hanya

125
00:06:07,670 --> 00:06:09,390
‫untuk kursus ini.

126
00:06:09,390 --> 00:06:12,270
‫Bagaimanapun, tentu saja, mengklik tombol ini

127
00:06:12,270 --> 00:06:15,200
‫di sini sekarang benar-benar melakukan apa saja, bukan?

128
00:06:15,200 --> 00:06:17,390
‫Jadi di video berikutnya, kita sebenarnya

129
00:06:17,390 --> 00:06:20,390
‫akan benar-benar mulai mengimplementasikan fungsi login sebenarnya dengan

130
00:06:20,390 --> 00:06:23,570
‫melakukan permintaan ke titik akhir api yang sudah

131
00:06:23,570 --> 00:06:24,823
‫kita buat.