1
00:00:01,290 --> 00:00:03,840
‫Dosen: Jadi sekarang izinkan pengguna

2
00:00:03,840 --> 00:00:07,883
‫mengunggah foto mereka langsung di situs web kami.

3
00:00:09,610 --> 00:00:11,640
‫Dan inilah yang kami inginkan.

4
00:00:11,640 --> 00:00:13,760
‫Ketika kita mengklik di sini, pada

5
00:00:13,760 --> 00:00:15,915
‫dasarnya kita ingin membuka jendela baru

6
00:00:15,915 --> 00:00:19,370
‫di mana kita dapat memilih gambar baru untuk diunggah dan

7
00:00:19,370 --> 00:00:21,380
‫kemudian ketika kita mengklik tombol

8
00:00:21,380 --> 00:00:23,990
‫ini dan mengirimkan formulir tentu saja kita ingin

9
00:00:23,990 --> 00:00:27,520
‫mengunggah gambar itu ke backend kita dan memperbarui pengguna , Baik.

10
00:00:27,520 --> 00:00:29,528
‫Jadi langkah pertama untuk

11
00:00:29,528 --> 00:00:33,400
‫melakukannya adalah menambahkan elemen input baru ke html kita.

12
00:00:33,400 --> 00:00:35,490
‫Jadi pada dasarnya untuk templat paket kami

13
00:00:35,490 --> 00:00:37,850
‫yang kemudian akan memungkinkan pemilih file itu terbuka

14
00:00:37,850 --> 00:00:39,503
‫ketika kami mengklik di sini.

15
00:00:40,930 --> 00:00:43,800
‫Jadi, mari kita pergi ke pandangan

16
00:00:43,800 --> 00:00:48,800
‫dan akun kita dan jadi inilah formulir di mana kita

17
00:00:49,010 --> 00:00:51,720
‫sekarang harus menambahkan input itu.

18
00:00:51,720 --> 00:00:55,420
‫Jadi sekarang kami memiliki tautan di sini yang mengatakan foto baru.

19
00:00:55,420 --> 00:00:58,800
‫Tapi tentu saja, itu bukan tautan yang akan kita gunakan.

20
00:00:58,800 --> 00:01:01,280
‫Jadi ini benar-benar hanya pengganti.

21
00:01:01,280 --> 00:01:03,360
‫Jadi mari kita singkirkan itu.

22
00:01:03,360 --> 00:01:05,063
‫Jadi yang kita butuhkan adalah masukan.

23
00:01:06,280 --> 00:01:07,803
‫Mati untuk mengetik file.

24
00:01:09,955 --> 00:01:13,110
‫Baiklah, jadi sebelumnya, untuk nama kami

25
00:01:13,110 --> 00:01:15,980
‫memiliki input dengan jenis teks.

26
00:01:15,980 --> 00:01:19,040
‫Kami juga ada input dengan jenis

27
00:01:19,040 --> 00:01:22,925
‫email dan ada juga yang khusus untuk password.

28
00:01:22,925 --> 00:01:26,210
‫Jadi masukan untuk password dan begitu

29
00:01:26,210 --> 00:01:30,283
‫untuk file, ada salah satunya tentunya untuk file.

30
00:01:31,380 --> 00:01:35,263
‫Kami kemudian dapat menentukan jenis file yang benar-benar kami terima.

31
00:01:38,920 --> 00:01:40,950
‫Dan kita bisa melakukan sesuatu seperti ini.

32
00:01:40,950 --> 00:01:43,410
‫Gambar dan kemudian semuanya.

33
00:01:43,410 --> 00:01:46,210
‫Jadi pada dasarnya semua format mendapatkan gambarnya sehingga

34
00:01:46,210 --> 00:01:49,010
‫yang memiliki tipe pikiran yang dimulai dengan

35
00:01:49,010 --> 00:01:50,823
‫gambar diterima di sini.

36
00:01:53,054 --> 00:01:55,780
‫Sekarang mari kita juga memberikan nama kelas

37
00:01:55,780 --> 00:01:59,930
‫ini di sini sehingga tampak diformat dengan baik di halaman kita.

38
00:01:59,930 --> 00:02:03,660
‫Dan ini adalah nama kelas yang saya miliki di css saya.

39
00:02:03,660 --> 00:02:06,940
‫Dan sekarang juga memberikan ID sehingga kita dapat memilihnya

40
00:02:06,940 --> 00:02:08,440
‫dalam skrip java.

41
00:02:09,300 --> 00:02:12,690
‫Tambahkan itu sebagai foto dan akhirnya seperti

42
00:02:12,690 --> 00:02:15,840
‫bidang lainnya, kami juga memberinya nama.

43
00:02:15,840 --> 00:02:20,420
‫Jadi nama foto juga.

44
00:02:20,420 --> 00:02:23,093
‫Dan tentu saja itu adalah foto karena itulah

45
00:02:23,093 --> 00:02:25,680
‫nama yang kami miliki di dokumen

46
00:02:25,680 --> 00:02:29,063
‫pengguna kami dan itu juga nama bidang yang diharapkan multer.

47
00:02:30,106 --> 00:02:34,410
‫Jadi ini di sini adalah unggahan dan kemudian kami juga menentukan label

48
00:02:34,410 --> 00:02:35,483
‫untuk itu.

49
00:02:37,650 --> 00:02:40,293
‫Dan kita set ke

50
00:02:40,293 --> 00:02:44,110
‫empat dan kemudian ID elemen input, oke.

51
00:02:44,110 --> 00:02:45,570
‫Jadi saya tidak yakin

52
00:02:45,570 --> 00:02:47,890
‫apakah Anda terbiasa dengan cara kerjanya di html

53
00:02:47,890 --> 00:02:49,640
‫tetapi itu juga tidak terlalu penting.

54
00:02:51,329 --> 00:02:53,600
‫Jadi yang terjadi adalah ketika kita mengklik

55
00:02:53,600 --> 00:02:56,320
‫label ini di sini, maka akan benar-benar mengaktifkan elemen

56
00:02:56,320 --> 00:02:58,610
‫input yang memiliki ID yang kita tentukan

57
00:02:58,610 --> 00:03:00,500
‫di sini dalam bentuk.

58
00:03:00,500 --> 00:03:03,870
‫Dan dalam hal itu adalah fotonya, baiklah.

59
00:03:03,870 --> 00:03:05,343
‫Dan sebenarnya

60
00:03:05,343 --> 00:03:09,403
‫label inilah yang akan membuat teks memilih foto baru.

61
00:03:11,030 --> 00:03:12,950
‫Jadi ketika kita kemudian mengklik label

62
00:03:12,950 --> 00:03:14,597
‫itu maka akan mengaktifkan

63
00:03:14,597 --> 00:03:16,830
‫input ini yang pada gilirannya akan membuka

64
00:03:16,830 --> 00:03:18,913
‫jendela dari mana kita dapat memilih file.

65
00:03:20,060 --> 00:03:23,090
‫Dan hanya itu yang perlu kita lakukan untuk masukan di sini.

66
00:03:23,090 --> 00:03:26,290
‫Sekarang, seperti sebelumnya, ada dua kemungkinan cara untuk

67
00:03:26,290 --> 00:03:28,710
‫mengirim data ini ke server.

68
00:03:28,710 --> 00:03:31,480
‫Jadi pertama, tanpa API seperti yang kita lakukan di

69
00:03:31,480 --> 00:03:32,840
‫salah satu kuliah sebelumnya.

70
00:03:32,840 --> 00:03:35,470
‫Kami sudah menemukan tindakan yang ingin kami

71
00:03:35,470 --> 00:03:37,370
‫ambil dan juga metodenya.

72
00:03:37,370 --> 00:03:38,760
‫Dan dengan itu

73
00:03:38,760 --> 00:03:41,180
‫data tersebut kemudian langsung dikirim ke server.

74
00:03:41,180 --> 00:03:43,130
‫Sekarang jika kita ingin mengirim

75
00:03:43,130 --> 00:03:45,440
‫file menggunakan metode ini, kita perlu menentukan

76
00:03:45,440 --> 00:03:47,220
‫opsi lain di sini.

77
00:03:47,220 --> 00:03:49,801
‫Dan itu adalah tipe enc.

78
00:03:49,801 --> 00:03:54,520
‫Jadi tipe enc harus berupa data formulir multi-bagian.

79
00:03:54,520 --> 00:03:59,520
‫Jadi data bentuk garis miring multi-bagian, oke.

80
00:04:02,530 --> 00:04:06,090
‫Jadi di sini lagi, kami memiliki nama ini multi-bagian.

81
00:04:06,090 --> 00:04:07,948
‫Dan seperti yang kami

82
00:04:07,948 --> 00:04:11,220
‫katakan sebelumnya, multi-bagian selalu untuk mengirim file ke server.

83
00:04:11,220 --> 00:04:13,864
‫Dan sekali lagi kita benar-benar membutuhkan

84
00:04:13,864 --> 00:04:17,164
‫multi middleware untuk menangani data formulir multi-bagian ini, oke.

85
00:04:17,164 --> 00:04:20,650
‫Dan sebenarnya nama multer berasal dari multi part.

86
00:04:20,650 --> 00:04:23,317
‫Jadi mult, multer, oke.

87
00:04:23,317 --> 00:04:26,830
‫Lagi pula jika kita ingin mengirim data tanpa

88
00:04:26,830 --> 00:04:29,320
‫API, kita harus selalu menentukan

89
00:04:29,320 --> 00:04:31,200
‫tipe enc ini.

90
00:04:31,200 --> 00:04:33,740
‫Kalau tidak, formulir hanya akan mengabaikan file

91
00:04:33,740 --> 00:04:35,623
‫dan tidak mengirimkannya, oke.

92
00:04:35,623 --> 00:04:38,370
‫Tapi seperti yang sudah kita

93
00:04:38,370 --> 00:04:41,780
‫ketahui, kita sebenarnya menggunakannya dengan API, kan.

94
00:04:41,780 --> 00:04:44,727
‫Jadi kita tidak perlu menentukan tipe

95
00:04:44,727 --> 00:04:48,630
‫enc ini tetapi kita harus melakukannya secara terprogram.

96
00:04:48,630 --> 00:04:51,382
‫Jadi mari kita lakukan itu.

97
00:04:51,382 --> 00:04:54,180
‫Jadi sekarang mari kita kirimkan data kita, termasuk

98
00:04:54,180 --> 00:04:56,920
‫tentunya foto dengan melakukan panggilan API

99
00:04:56,920 --> 00:04:59,970
‫seperti yang telah kita lakukan di bagian sebelumnya.

100
00:04:59,970 --> 00:05:04,100
‫Jadi sekarang kita perlu membuka di folder publik kita dan dari

101
00:05:04,100 --> 00:05:08,973
‫js mereka, kita membuka index. js.

102
00:05:10,360 --> 00:05:13,560
‫Jadi di sinilah kami sebenarnya

103
00:05:13,560 --> 00:05:17,010
‫mengirim data untuk diperbarui di server.

104
00:05:17,010 --> 00:05:19,260
‫Yah, kami tidak benar-benar mengirimnya

105
00:05:19,260 --> 00:05:21,960
‫ke sini, tetapi kami memilihnya dari

106
00:05:21,960 --> 00:05:24,790
‫formulir dan kemudian meneruskannya ke pengaturan pembaruan.

107
00:05:24,790 --> 00:05:27,260
‫Baiklah, tapi sekarang ingat bagaimana saya

108
00:05:27,260 --> 00:05:29,590
‫mengatakan bahwa kita perlu

109
00:05:29,590 --> 00:05:32,660
‫membuat ulang data formulir multi-bagian secara terprogram?

110
00:05:32,660 --> 00:05:34,893
‫Dan jadi kita perlu melakukannya seperti ini.

111
00:05:42,020 --> 00:05:46,740
‫Sebut saja formulir dan kemudian data formulir baru.

112
00:05:48,580 --> 00:05:51,200
‫Baiklah, dan sekarang ke formulir

113
00:05:51,200 --> 00:05:53,883
‫itu kita perlu terus menambahkan data baru.

114
00:05:53,883 --> 00:05:57,152
‫Dan pada dasarnya satu tambahkan untuk setiap data

115
00:05:57,152 --> 00:05:59,143
‫yang ingin kita kirim.

116
00:06:00,370 --> 00:06:04,400
‫Jadi bentuk. tambahkan dan yang pertama adalah namanya.

117
00:06:04,400 --> 00:06:08,250
‫Jadi kita tentukan nama di sini dan kemudian nilai nama.

118
00:06:08,250 --> 00:06:11,000
‫Dan tentu saja yang satu ini.

119
00:06:11,000 --> 00:06:15,363
‫Jadi mari kita ambil itu, tempel di sini dan duplikat.

120
00:06:16,870 --> 00:06:19,653
‫Dan selanjutnya adalah email, oke.

121
00:06:20,690 --> 00:06:24,580
‫Lalu mari kita singkirkan ini masuk ke pengaturan pembaruan.

122
00:06:24,580 --> 00:06:28,040
‫Kami kemudian melewati formulir, oke.

123
00:06:28,040 --> 00:06:30,560
‫Dan atau panggilan teks menggunakan axios

124
00:06:30,560 --> 00:06:32,350
‫kemudian akan benar-benar mengenali

125
00:06:32,350 --> 00:06:34,480
‫formulir ini di sini sebagai

126
00:06:34,480 --> 00:06:37,550
‫objek dan akan bekerja sama seperti sebelumnya, oke.

127
00:06:37,550 --> 00:06:39,900
‫Jadi di sini dalam pengaturan pembaruan

128
00:06:39,900 --> 00:06:42,178
‫di mana kami meneruskan data,

129
00:06:42,178 --> 00:06:44,980
‫yang kemudian diteruskan di sini ke dalam permintaan

130
00:06:44,980 --> 00:06:47,543
‫axios, kami tidak perlu mengubah apa pun.

131
00:06:49,090 --> 00:06:51,810
‫Baiklah, jadi ini setara dengan apa yang kita

132
00:06:51,810 --> 00:06:54,380
‫miliki sebelumnya dengan nama dan email tetapi sekarang

133
00:06:54,380 --> 00:06:57,050
‫tentu saja mari kita tambahkan juga foto yang

134
00:06:57,050 --> 00:06:59,380
‫merupakan alasan mengapa kita sekarang harus

135
00:06:59,380 --> 00:07:00,580
‫melakukannya seperti ini.

136
00:07:02,590 --> 00:07:07,590
‫Jadi bentuk. tambahkan lagi maka nama yang ingin

137
00:07:07,650 --> 00:07:10,400
‫kita berikan tentu saja lagi, foto dan

138
00:07:12,093 --> 00:07:12,970
‫kemudian dokumen. getelementbyid

139
00:07:14,176 --> 00:07:22,930
‫yang juga foto tapi sekarang tidak. nilai tetapi sebaliknya.

140
00:07:22,930 --> 00:07:22,930
‫file, baiklah.

141
00:07:22,930 --> 00:07:25,920
‫Dan file-file ini

142
00:07:25,920 --> 00:07:28,170
‫sebenarnya dalam array dan karena hanya

143
00:07:28,170 --> 00:07:30,260
‫ada satu, kita perlu memilih

144
00:07:30,260 --> 00:07:33,260
‫elemen pertama dalam array dan jadi itu nol.

145
00:07:33,260 --> 00:07:34,733
‫Baiklah, dan mari

146
00:07:36,880 --> 00:07:40,810
‫kita log formulir ini ke konsol hanya sampai kita melihat sekilas

147
00:07:40,810 --> 00:07:42,340
‫apa sebenarnya formulir ini.

148
00:07:43,360 --> 00:07:45,870
‫Namun singkatnya, seperti yang saya katakan sebelumnya, pada dasarnya

149
00:07:45,870 --> 00:07:48,280
‫kami membuat ulang data formulir multi-bagian ini.

150
00:07:48,280 --> 00:07:52,480
‫Dan itulah sebenarnya mengapa disebut data formulir karena, yah,

151
00:07:52,480 --> 00:07:55,200
‫data formulir itu juga ada

152
00:07:55,200 --> 00:07:58,640
‫di sini dalam tipe enc multi-bagian ini, oke.

153
00:07:58,640 --> 00:08:02,173
‫Jadi, saya kira itu sebenarnya cukup bagi

154
00:08:03,750 --> 00:08:06,450
‫kita untuk mencobanya sekarang.

155
00:08:06,450 --> 00:08:08,670
‫Jadi seperti yang saya katakan, dalam pengaturan

156
00:08:08,670 --> 00:08:10,860
‫pembaruan, tidak ada yang perlu kita

157
00:08:10,860 --> 00:08:13,030
‫ubah dan juga titik akhir

158
00:08:13,030 --> 00:08:15,320
‫pembaruan saya di mana kami mengirimkan alat

159
00:08:15,320 --> 00:08:18,630
‫permintaan ini sehingga yang ini juga sudah berfungsi dan siap

160
00:08:18,630 --> 00:08:21,040
‫menerima gambar dan bahkan mengubah ukurannya, kan.

161
00:08:21,040 --> 00:08:25,230
‫Jadi sekarang mari kita lanjutkan dan coba ini.

162
00:08:25,230 --> 00:08:28,319
‫Jadi mari kita reload ini sekali lagi.

163
00:08:28,319 --> 00:08:32,050
‫Jadi mari kita lihat, dan pada

164
00:08:32,050 --> 00:08:36,031
‫dasarnya kita sekarang mendapatkan file picker kita.

165
00:08:36,031 --> 00:08:38,450
‫Jadi jendela ini di mana kita sekarang

166
00:08:38,450 --> 00:08:40,550
‫dapat memilih file dan apa yang

167
00:08:40,550 --> 00:08:42,370
‫akan saya lakukan pada dasarnya

168
00:08:42,370 --> 00:08:45,620
‫adalah mengembalikan gambar asli yang kita miliki pada pengguna ini.

169
00:08:45,620 --> 00:08:47,730
‫Jadi itu di desktop,

170
00:08:47,730 --> 00:08:52,513
‫natours, publik, pengguna gambar, dan itu adalah pengguna 11, jadi yang ini.

171
00:08:54,060 --> 00:08:58,700
‫Dan jadi itu sekarang diunggah.

172
00:08:58,700 --> 00:09:00,050
‫Jadi buka, simpan ke pengaturan, dan pembaruan data berhasil.

173
00:09:01,940 --> 00:09:06,940
‫Sekarang tidak langsung tercermin di sini.

174
00:09:07,780 --> 00:09:10,180
‫Baik di sini maupun di atas

175
00:09:10,180 --> 00:09:13,280
‫sini tetapi seharusnya begitu kami mengunggah halaman ini.

176
00:09:13,280 --> 00:09:15,393
‫Dan kami memang bisa melakukannya

177
00:09:16,410 --> 00:09:19,540
‫dengan skrip java tapi itu sebenarnya banyak pekerjaan.

178
00:09:19,540 --> 00:09:21,620
‫Saya telah mencoba melakukannya dan saya

179
00:09:21,620 --> 00:09:23,740
‫melakukannya tetapi kemudian saya berpikir bahwa itu

180
00:09:23,740 --> 00:09:26,800
‫terlalu banyak pekerjaan dan tidak layak untuk diterapkan di sini.

181
00:09:26,800 --> 00:09:29,630
‫Tapi bagaimanapun hanya untuk menguji apakah itu benar-benar berfungsi,

182
00:09:29,630 --> 00:09:32,040
‫sekarang kita perlu memuat ulang halaman.

183
00:09:32,040 --> 00:09:34,320
‫Dan itu terjadi.

184
00:09:34,320 --> 00:09:35,840
‫Ini sekarang gambar baru yang baru saja kami unggah.

185
00:09:35,840 --> 00:09:39,320
‫Sangat bagus.

186
00:09:39,320 --> 00:09:41,450
‫Mari kita lihat folder itu sendiri.

187
00:09:41,450 --> 00:09:44,210
‫Jika itu benar-benar ada, juga, dan

188
00:09:44,210 --> 00:09:46,530
‫jika diubah dengan benar.

189
00:09:46,530 --> 00:09:48,810
‫Jadi itu gambar.

190
00:09:48,810 --> 00:09:52,030
‫Mari kita reload di sini.

191
00:09:52,030 --> 00:09:53,293
‫Dan sekarang saya tidak yakin yang mana itu.

192
00:09:57,240 --> 00:09:59,663
‫Ah, tepatnya.

193
00:10:00,890 --> 00:10:02,690
‫Jadi 500 kali

194
00:10:02,690 --> 00:10:07,200
‫500 dan sekarang benar-benar kabur karena gambar aslinya jauh lebih kecil.

195
00:10:07,200 --> 00:10:10,440
‫Tapi tidak apa-apa, itu tidak masalah sama sekali.

196
00:10:10,440 --> 00:10:12,643
‫Yang penting sekarang kita

197
00:10:13,910 --> 00:10:17,570
‫bisa mengunggah foto langsung dari formulir ini.

198
00:10:17,570 --> 00:10:19,830
‫Saya ingin itu saja untuk melihat

199
00:10:19,830 --> 00:10:22,480
‫konsol kami di sini di data formulir

200
00:10:22,480 --> 00:10:27,480
‫yang saya pikir telah kami log dan tidak muncul di sini karena kami

201
00:10:27,546 --> 00:10:29,530
‫sudah memuat ulang halaman.

202
00:10:29,530 --> 00:10:32,184
‫Tapi bagaimanapun, saya ingin mengembalikan gambar lainnya ke sini.

203
00:10:32,184 --> 00:10:36,543
‫Jadi yang sebenarnya kita upload sebelumnya ada di

204
00:10:39,290 --> 00:10:41,820
‫dev-data, image, dan aarav.

205
00:10:41,820 --> 00:10:46,820
‫Baiklah, data berhasil diperbarui.

206
00:10:50,040 --> 00:10:53,340
‫Langsung saja kita lihat data ponsel kita disini.

207
00:10:53,340 --> 00:10:56,760
‫Ah, tapi kurasa kita tidak bisa benar-benar melihat apa yang kita miliki di sini.

208
00:10:56,760 --> 00:11:00,173
‫Ayo lihat.

209
00:11:01,100 --> 00:11:02,223
‫Nah, kita tidak bisa benar-benar melihat apa yang kita miliki.

210
00:11:04,045 --> 00:11:06,689
‫Oke, jadi saya tidak pernah melihat ini.

211
00:11:06,689 --> 00:11:09,160
‫Dan saya pikir kita mungkin bisa melihat informasinya

212
00:11:09,160 --> 00:11:10,110
‫tapi tidak apa-apa.

213
00:11:10,110 --> 00:11:12,850
‫Yang penting itu benar-benar berhasil.

214
00:11:12,850 --> 00:11:16,170
‫Jadi, jika kita memuat ulang sekarang, maka tentu saja

215
00:11:16,170 --> 00:11:18,191
‫gambar lama ini kembali lagi.

216
00:11:18,191 --> 00:11:21,940
‫Luar biasa, jadi sekali lagi, aplikasi ini

217
00:11:21,940 --> 00:11:25,000
‫benar-benar mulai terasa semakin nyata.