1 00:00:01,040 --> 00:00:03,600 ‫Jonas: Sekarang mari kita gunakan halaman 2 00:00:03,600 --> 00:00:06,803 ‫akun pengguna untuk memungkinkan pengguna memperbarui data mereka. 3 00:00:08,410 --> 00:00:10,770 ‫Jadi yang akan kita lakukan adalah 4 00:00:10,770 --> 00:00:15,030 ‫mengizinkan pengguna untuk memperbarui nama dan alamat email untuk saat ini. 5 00:00:15,030 --> 00:00:17,060 ‫Dan kami akan menambahkan foto pengguna di 6 00:00:17,060 --> 00:00:18,843 ‫sini nanti di bagian berikutnya. 7 00:00:19,826 --> 00:00:23,670 ‫Oke, sekarang ada dua cara di mana kita bisa melakukan ini. 8 00:00:23,670 --> 00:00:27,420 ‫Yang pertama adalah mengirimkan permintaan posting ke API kami seperti 9 00:00:27,420 --> 00:00:31,150 ‫yang kami lakukan dengan formulir login, ingat itu? 10 00:00:31,150 --> 00:00:33,950 ‫Dan sebenarnya, kita akan melakukannya di kuliah berikutnya. 11 00:00:33,950 --> 00:00:36,600 ‫Tapi kali ini, saya 12 00:00:36,600 --> 00:00:39,950 ‫ingin menunjukkan cara lain yang lebih tradisional. 13 00:00:39,950 --> 00:00:41,840 ‫Jadi dengan cara 14 00:00:41,840 --> 00:00:45,150 ‫yang lebih tradisional ini, kami menentukan metode posting 15 00:00:45,150 --> 00:00:49,710 ‫tepat di formulir, bersama dengan URL tujuan pengiriman permintaan posting. 16 00:00:49,710 --> 00:00:52,980 ‫Jadi pada dasarnya, dengan menggunakan metode ini, kita 17 00:00:52,980 --> 00:00:55,660 ‫tidak memerlukan JavaScript untuk melakukan permintaan, 18 00:00:55,660 --> 00:00:59,450 ‫itu secara otomatis terjadi dengan bentuk HTML yang kemudian akan 19 00:00:59,450 --> 00:01:03,580 ‫memposting data ke titik akhir URL di backend yang kita tentukan. 20 00:01:03,580 --> 00:01:06,980 ‫Sekarang secara pribadi, saya tidak terlalu menyukai solusi ini, 21 00:01:06,980 --> 00:01:09,270 ‫karena ini memaksa halaman dimuat ulang, 22 00:01:09,270 --> 00:01:11,200 ‫dan juga mengharuskan kita 23 00:01:11,200 --> 00:01:14,750 ‫untuk membuat route dan route handler lain di backend kita. 24 00:01:14,750 --> 00:01:16,830 ‫Dan akhirnya, itu juga membuatnya 25 00:01:16,830 --> 00:01:19,120 ‫sedikit lebih sulit untuk menangani kesalahan. 26 00:01:19,120 --> 00:01:22,510 ‫Namun, saya masih percaya bahwa sangat penting bagi Anda 27 00:01:22,510 --> 00:01:25,700 ‫untuk mengetahui cara bekerja dengan formulir dengan cara 28 00:01:25,700 --> 00:01:27,910 ‫ini, karena mungkin lebih masuk 29 00:01:27,910 --> 00:01:30,630 ‫akal dalam aplikasi yang sedang Anda bangun. 30 00:01:30,630 --> 00:01:34,140 ‫Misalnya, aplikasi Anda mungkin bahkan tidak memerlukan API, dan dalam hal 31 00:01:34,140 --> 00:01:36,200 ‫ini, ketika Anda hanya membuat situs 32 00:01:36,200 --> 00:01:39,140 ‫web yang dirender, tentu saja tidak masuk akal untuk 33 00:01:39,140 --> 00:01:41,770 ‫mengirimkan formulir menggunakan panggilan API, dan sebagai gantinya, 34 00:01:41,770 --> 00:01:43,490 ‫Anda akan lakukan seperti 35 00:01:43,490 --> 00:01:46,020 ‫yang akan kita lakukan di video ini. 36 00:01:46,020 --> 00:01:48,760 ‫Baiklah, dan itulah mengapa kami melakukannya dengan cara 37 00:01:48,760 --> 00:01:50,580 ‫ini di kuliah ini, 38 00:01:50,580 --> 00:01:53,320 ‫dan kemudian menggunakan cara API di kuliah berikutnya. 39 00:01:53,320 --> 00:01:55,910 ‫Jadi, apa yang perlu kita lakukan 40 00:01:55,910 --> 00:01:57,960 ‫di formulir kita untuk mengirimkannya 41 00:01:57,960 --> 00:01:59,930 ‫secara otomatis, tanpa harus 42 00:01:59,930 --> 00:02:02,030 ‫melalui JavaScript seperti yang saya 43 00:02:02,030 --> 00:02:05,240 ‫sebutkan sebelumnya, jadi pada dasarnya secara otomatis memposting 44 00:02:05,240 --> 00:02:10,240 ‫data ke titik akhir kita, adalah menentukan titik akhir itu, dan kita 45 00:02:10,550 --> 00:02:15,133 ‫melakukannya di sini dalam bentuk, di mana kita menentukan atribut tindakan. 46 00:02:17,380 --> 00:02:21,410 ‫Jadi tindakannya, dan katakanlah kita akan membuat 47 00:02:21,410 --> 00:02:26,410 ‫titik akhir yang disebut kirim data pengguna, seperti ini. 48 00:02:27,740 --> 00:02:30,433 ‫Oke, lalu kita juga 49 00:02:33,180 --> 00:02:37,400 ‫tentukan caranya, yaitu post, oke, jadi ini selalu perlu 50 00:02:37,400 --> 00:02:41,310 ‫terjadi pada elemen form yang kita submit, oke. 51 00:02:41,310 --> 00:02:43,963 ‫Mari kita beri lebih banyak ruang 52 00:02:45,020 --> 00:02:47,170 ‫di sini, agar lebih 53 00:02:47,170 --> 00:02:49,920 ‫mudah dipahami, dan semua ini di 54 00:02:49,920 --> 00:02:52,500 ‫sini adalah formulir kita, dan ketika 55 00:02:52,500 --> 00:02:56,260 ‫kita mengklik elemen tombol ini, secara otomatis formulir akan 56 00:02:56,260 --> 00:03:01,260 ‫dikirimkan, dan data akan dikirim menggunakan permintaan posting ke URL ini, oke. 57 00:03:01,410 --> 00:03:03,540 ‫Ada juga berbagai cara di 58 00:03:03,540 --> 00:03:06,850 ‫mana data sebenarnya dikirim, tetapi yang default disebut URL yang 59 00:03:06,850 --> 00:03:09,540 ‫dikodekan, dan itulah yang kami gunakan di sini. 60 00:03:09,540 --> 00:03:11,440 ‫Jadi pada dasarnya apa yang 61 00:03:11,440 --> 00:03:14,050 ‫akan dilakukan adalah mengkodekan semua data yang kami 62 00:03:14,050 --> 00:03:16,650 ‫kirimkan di URL sedikit seperti string kueri. 63 00:03:16,650 --> 00:03:19,480 ‫Oke, tapi lebih pada itu ketika kita 64 00:03:19,480 --> 00:03:22,790 ‫benar-benar bekerja untuk mendapatkan data di server dan bekerja dengannya. 65 00:03:22,790 --> 00:03:26,880 ‫Jadi, inilah langkah pertama dalam membuat metode ini bekerja, dan 66 00:03:26,880 --> 00:03:30,220 ‫yang kedua adalah menentukan properti nama pada bidang 67 00:03:30,220 --> 00:03:32,423 ‫yang sebenarnya ingin kita kirim. 68 00:03:33,310 --> 00:03:35,950 ‫Jadi input ini dan input ini, 69 00:03:35,950 --> 00:03:38,460 ‫dan nilainya akan dikirim 70 00:03:38,460 --> 00:03:41,420 ‫dengan permintaan berdasarkan atribut nama mereka. 71 00:03:41,420 --> 00:03:46,420 ‫Oke, jadi misalkan di sini, nama sama dengan nama, oke, jadi 72 00:03:48,360 --> 00:03:53,180 ‫itu nama pengguna, dan yang ini di sini akan memiliki 73 00:03:53,180 --> 00:03:56,083 ‫nama yang sama dengan email. 74 00:03:57,680 --> 00:04:01,910 ‫Oke, jadi ini akan menjadi nama bidang ini, dan 75 00:04:01,910 --> 00:04:04,370 ‫badan yang diterima aplikasi kita. 76 00:04:04,370 --> 00:04:07,840 ‫Baiklah, jadi sekarang ketika kita mengirimkan formulir, badan 77 00:04:07,840 --> 00:04:09,750 ‫yang akan kita terima hanya 78 00:04:09,750 --> 00:04:12,410 ‫akan memiliki nama dan email, karena ini 79 00:04:12,410 --> 00:04:14,290 ‫adalah dua bidang 80 00:04:14,290 --> 00:04:16,640 ‫yang benar-benar memiliki atribut nama. 81 00:04:16,640 --> 00:04:20,233 ‫Baiklah, sekarang mari kita terapkan rute ini di sini, oke, seperti 82 00:04:21,730 --> 00:04:23,930 ‫yang saya katakan dengan metode ini, 83 00:04:23,930 --> 00:04:25,993 ‫kita perlu mengimplementasikan rute lain. 84 00:04:28,550 --> 00:04:33,550 ‫Oke, jadi router, dan ingat bahwa ini adalah permintaan posting. 85 00:04:36,200 --> 00:04:40,713 ‫Oke, jadi yang ini akan berada di viewsController, dan 86 00:04:44,500 --> 00:04:48,467 ‫katakanlah updateUserData, baiklah, simpan, dan sekarang mari kita 87 00:04:54,934 --> 00:04:57,100 ‫buat handler ini. 88 00:04:58,440 --> 00:04:59,993 ‫Jadi di sini di file ini. 89 00:05:10,580 --> 00:05:12,310 ‫Dan hal pertama yang ingin 90 00:05:12,310 --> 00:05:14,733 ‫saya lakukan di sini adalah benar-benar melihat tubuh. body, oke, dan pada dasarnya dalam kasus ini, 91 00:05:19,437 --> 00:05:22,800 ‫hanya untuk menunjukkan kepada Anda bahwa itu sebenarnya tidak akan bekerja begitu saja. 92 00:05:22,800 --> 00:05:26,550 ‫Oke, dan saya akan memberi tahu Anda mengapa 93 00:05:26,550 --> 00:05:29,380 ‫setelah kita bereksperimen, oke, jadi untuk 94 00:05:29,380 --> 00:05:33,200 ‫sekarang mari kita lihat apakah kita benar-benar sudah terhubung. 95 00:05:33,200 --> 00:05:35,380 ‫Jadi jika mengirimkan formulir itu 96 00:05:35,380 --> 00:05:38,390 ‫benar-benar akan memicu penangan ini di sini, oke, 97 00:05:38,390 --> 00:05:41,700 ‫mari tambahkan juga string di sini hanya untuk memastikan. 98 00:05:41,700 --> 00:05:43,500 ‫Baiklah, jadi mari kita muat 99 00:05:47,620 --> 00:05:50,980 ‫ulang ini di sini sehingga kita mendapatkan formulir baru kita, dan 100 00:05:52,040 --> 00:05:54,020 ‫untuk memastikannya, mari kita lihat itu. 101 00:05:54,020 --> 00:05:56,020 ‫Baiklah, jadi Anda lihat 102 00:05:58,210 --> 00:06:01,080 ‫di sini, tindakan dan metode yang kami 103 00:06:01,080 --> 00:06:04,023 ‫tambahkan, dan tentu saja juga nama-nama ini, 104 00:06:04,870 --> 00:06:09,253 ‫oke, jadi mari kita tambahkan beberapa nama tengah di sini, saya 105 00:06:10,890 --> 00:06:13,010 ‫tidak tahu, katakanlah Sarah, lalu 106 00:06:13,010 --> 00:06:17,473 ‫di sini emailnya mari kita tambahkan nama belakangnya, sekarang kita mendapatkan kesalahan 107 00:06:19,500 --> 00:06:23,460 ‫ini, berikan email dan kata sandi, dan ini berasal dari 108 00:06:23,460 --> 00:06:25,730 ‫formulir login, benar, jadi itu aneh. 109 00:06:25,730 --> 00:06:29,063 ‫Jadi mari kita lihat formulir kita di 110 00:06:30,770 --> 00:06:34,660 ‫sini, dan memang, formulir ini di sini memiliki kelas bentuk. 111 00:06:34,660 --> 00:06:38,130 ‫Dan saya pikir itu yang kami gunakan juga 112 00:06:38,130 --> 00:06:39,270 ‫di index. j, benar. 113 00:06:39,270 --> 00:06:42,377 ‫Jadi di sini kita pada 114 00:06:45,200 --> 00:06:48,070 ‫dasarnya mendapatkan formulir itu menggunakan kelas formulir, dan ketika itu 115 00:06:48,070 --> 00:06:50,830 ‫ada, dan dikirimkan, lalu kita coba masuk, di sini. 116 00:06:50,830 --> 00:06:54,990 ‫Oke, dan itu tentu saja tidak benar, jadi kita harus 117 00:06:54,990 --> 00:06:58,450 ‫memilih formulir masuk kita dengan cara lain. 118 00:06:58,450 --> 00:07:02,170 ‫Jadi mari kita perbaiki dengan cepat, di sini kita memiliki 119 00:07:02,170 --> 00:07:03,783 ‫login, jadi mari 120 00:07:05,310 --> 00:07:10,310 ‫kita tambahkan kelas lain di sini, form login, dan itu agak aneh karena 121 00:07:12,300 --> 00:07:14,970 ‫kita sudah memiliki form login di sini, 122 00:07:14,970 --> 00:07:17,460 ‫tapi itu tidak benar-benar pada elemen form. 123 00:07:17,460 --> 00:07:20,040 ‫Jadi kita tidak boleh menggunakannya, jadi 124 00:07:20,040 --> 00:07:23,820 ‫mari kita buat formulir di sini dengan pengubah login, oke. 125 00:07:23,820 --> 00:07:28,493 ‫Jadi mari kita taruh di sini, simpan, dan sekarang ini seharusnya 126 00:07:31,890 --> 00:07:34,853 ‫tidak lagi terjadi, karena sekarang kita tidak 127 00:07:36,970 --> 00:07:39,270 ‫lagi memiliki event handler yang dilampirkan 128 00:07:40,270 --> 00:07:42,010 ‫ke formulir ini. 129 00:07:42,010 --> 00:07:44,173 ‫Jadi mari kita cepat memuat ulang 130 00:07:45,120 --> 00:07:48,473 ‫lagi, dan coba ini lagi, dan sekarang Anda melihat bahwa itu benar-benar 131 00:07:50,953 --> 00:07:53,340 ‫melakukan sesuatu, tetapi tentu saja itu tidak akan 132 00:07:53,340 --> 00:07:56,290 ‫pernah berhenti berputar di sini, karena kami sebenarnya tidak mengirim 133 00:07:56,290 --> 00:07:59,470 ‫respons apa pun kembali, dan siklus respons permintaan tidak pernah berakhir. 134 00:07:59,470 --> 00:08:03,160 ‫Tapi bagaimanapun, saya hanya ingin melihat badan 135 00:08:03,160 --> 00:08:04,870 ‫permintaan, ingat itu? 136 00:08:04,870 --> 00:08:07,680 ‫Dan seperti yang saya sebutkan sebelumnya, sekarang sebenarnya MT. 137 00:08:07,680 --> 00:08:10,853 ‫Oke, seperti yang saya katakan, ini tidak akan 138 00:08:11,960 --> 00:08:15,100 ‫berfungsi begitu saja, karena kita perlu menambahkan 139 00:08:15,100 --> 00:08:18,510 ‫middleware lain untuk mengurai data yang berasal dari formulir. 140 00:08:18,510 --> 00:08:21,540 ‫Jadi mari kita lakukan itu di aplikasi kita. js. 141 00:08:21,540 --> 00:08:23,843 ‫Tapi pertama-tama, mari kita tutup beberapa file ini di sini. 142 00:08:24,870 --> 00:08:28,333 ‫Baiklah, yang ini juga, dan sekarang, pergi ke aplikasi. js, mari tambahkan klausa itu ke parser 143 00:08:30,880 --> 00:08:35,880 ‫tubuh kita, jadi inilah 144 00:08:37,290 --> 00:08:40,373 ‫kita, karena sebenarnya sangat mirip. 145 00:08:41,860 --> 00:08:45,273 ‫Jadi aplikasi. gunakan, dan itu masih merupakan middleware bawaan 146 00:08:47,340 --> 00:08:51,423 ‫Express, jadi ekspres. urlencoded, oke, dan ini disebut cara 147 00:08:52,940 --> 00:08:56,837 ‫ini karena ingat, cara formulir 148 00:09:00,280 --> 00:09:03,380 ‫mengirim data ke server sebenarnya juga disebut URL yang disandikan, 149 00:09:03,380 --> 00:09:06,830 ‫jadi di sini, kita memerlukan middleware itu untuk mengurai data yang 150 00:09:06,830 --> 00:09:09,000 ‫berasal dari formulir yang dikodekan URL. 151 00:09:09,000 --> 00:09:13,440 ‫Kemudian kita melewati beberapa pengaturan, dan kita dapat mengatakan diperpanjang benar, dan 152 00:09:13,440 --> 00:09:16,630 ‫itu hanya akan memungkinkan kita untuk melewatkan beberapa 153 00:09:16,630 --> 00:09:21,630 ‫data yang lebih kompleks, yang dalam hal ini tidak benar-benar diperlukan, tetapi tetap 154 00:09:22,000 --> 00:09:23,720 ‫mari kita gunakan di 155 00:09:23,720 --> 00:09:25,650 ‫sini, dan kita juga dapat 156 00:09:25,650 --> 00:09:29,530 ‫mengatur batasnya properti seperti yang kita lakukan di parser tubuh, 157 00:09:29,530 --> 00:09:33,010 ‫jadi di sini, dan jadi katakanlah lagi 10 kilobyte. 158 00:09:33,010 --> 00:09:37,113 ‫Baiklah, jadi jika kita coba ini sekarang lagi di sini, 159 00:09:38,930 --> 00:09:42,930 ‫kita memang harus mendapatkan data ini, dan data ini. 160 00:09:42,930 --> 00:09:46,670 ‫Mari kita tambahkan lagi data yang berbeda ini di sini, 161 00:09:46,670 --> 00:09:50,370 ‫jadi kami yakin mereka benar-benar tidak mendapatkan pengguna saat 162 00:09:50,370 --> 00:09:53,620 ‫ini, tetapi sebenarnya data yang berasal dari formulir, 163 00:09:54,480 --> 00:09:56,090 ‫oke, dan lagi itu 164 00:09:56,090 --> 00:09:57,593 ‫terus berputar selamanya 165 00:09:59,820 --> 00:10:02,860 ‫di sini, atau sampai waktu habis, tapi 166 00:10:02,860 --> 00:10:07,720 ‫yang kami minati, adalah mendapatkan data baru ini sekarang di tubuh kita. 167 00:10:07,720 --> 00:10:11,850 ‫Bagus, jadi itu berhasil, dan sekarang kami memiliki formulir 168 00:10:11,850 --> 00:10:16,410 ‫HTML kami yang benar-benar terhubung ke penangan rute ini di sini. 169 00:10:16,410 --> 00:10:19,920 ‫Jadi sekarang kita bisa melanjutkan dan benar-benar memperbarui 170 00:10:19,920 --> 00:10:22,860 ‫pengguna berdasarkan data baru ini, oke. 171 00:10:22,860 --> 00:10:25,490 ‫Jadi, mari singkirkan ini, lalu 172 00:10:25,490 --> 00:10:29,010 ‫perbarui pengguna karena kita sudah tahu cara melakukannya. 173 00:10:29,010 --> 00:10:31,610 ‫Sekarang, pertama-tama, kita harus mengimpor model pengguna, 174 00:10:31,610 --> 00:10:33,900 ‫jadi mari kita lakukan itu. 175 00:10:33,900 --> 00:10:37,873 ‫Pengguna, di sini 176 00:10:39,160 --> 00:10:44,160 ‫dengan U kecil, baiklah, dan sekarang 177 00:10:46,930 --> 00:10:51,910 ‫katakanlah pengguna sama dengan menunggu Pengguna. findByIdAndUpdate. 178 00:10:51,910 --> 00:10:55,013 ‫Benar, tentu saja 179 00:11:00,780 --> 00:11:04,850 ‫seperti biasa, tandai yang ini sebagai asinkron, dan tangkap semua kesalahannya. 180 00:11:04,850 --> 00:11:07,473 ‫Sekarang baiklah, jadi apa ID yang kita cari? 181 00:11:12,920 --> 00:11:17,890 ‫Dan saya harap pada titik ini Anda tahu di mana 182 00:11:17,890 --> 00:11:21,120 ‫itu, itu akan sesuai permintaan. pengguna. Indo. 183 00:11:21,120 --> 00:11:25,640 ‫Oh, dan satu 184 00:11:25,640 --> 00:11:27,980 ‫hal penting yang perlu kita lakukan, yang 185 00:11:27,980 --> 00:11:30,490 ‫belum saya lakukan, adalah untuk benar-benar melindungi 186 00:11:30,490 --> 00:11:32,600 ‫rute ini di sini juga, oke, 187 00:11:32,600 --> 00:11:35,430 ‫karena hanya dengan begitu kita benar-benar meminta pengguna 188 00:11:35,430 --> 00:11:38,810 ‫ini, kan, dan tentu saja juga kami hanya ingin dapat 189 00:11:38,810 --> 00:11:41,050 ‫mengakses rute ini jika kami masuk, 190 00:11:41,050 --> 00:11:44,470 ‫jika tidak, siapa pun dapat melanjutkan dan memperbarui beberapa data. 191 00:11:44,470 --> 00:11:46,683 ‫Jadi, di rute 192 00:11:48,210 --> 00:11:50,880 ‫ini, mari kita tambahkan authController. melindungi. 193 00:11:50,880 --> 00:11:53,300 ‫Baiklah, 194 00:11:58,450 --> 00:12:03,390 ‫jadi itu ID-nya, lalu kita butuh data baru, 195 00:12:03,390 --> 00:12:08,343 ‫jadi misalkan kita ingin nama yang sama dengan request. tubuh. nama, dan email diatur ke 196 00:12:08,343 --> 00:12:13,320 ‫permintaan. tubuh. surel. 197 00:12:18,710 --> 00:12:23,233 ‫Dan ingat bahwa ini adalah 198 00:12:25,010 --> 00:12:27,960 ‫nama bidang, karena kami memberi mereka atribut nama dalam bentuk HTML. 199 00:12:27,960 --> 00:12:31,630 ‫Ingat, sekarang sebelum kami memperbarui beberapa data, kami biasa meneruskan 200 00:12:31,630 --> 00:12:35,470 ‫seluruh permintaan di sini ke metode pembaruan, kan, tetapi dalam 201 00:12:35,470 --> 00:12:37,970 ‫kasus ini, kami benar-benar hanya ingin 202 00:12:37,970 --> 00:12:41,020 ‫memperbarui nama dan email, dan jadi seperti ini, 203 00:12:41,020 --> 00:12:44,520 ‫kami yakin bahwa hal lain pada dasarnya sedang dilucuti 204 00:12:44,520 --> 00:12:47,210 ‫dari tubuh, karena beberapa peretas tentu saja 205 00:12:47,210 --> 00:12:50,710 ‫sekarang dapat melanjutkan dan menambahkan beberapa bidang tambahan ke 206 00:12:50,710 --> 00:12:53,040 ‫HTML dan kemudian misalnya mengirimkan 207 00:12:53,040 --> 00:12:55,770 ‫data seperti kata sandi dan hal-hal seperti 208 00:12:55,770 --> 00:12:58,330 ‫itu, dan tentu saja kami melakukannya 209 00:12:58,330 --> 00:13:01,020 ‫tidak ingin menyimpan data berbahaya itu ke 210 00:13:01,020 --> 00:13:03,070 ‫dalam database kami, kan. 211 00:13:03,070 --> 00:13:06,720 ‫Juga, kata sandi sekali lagi ditangani secara terpisah, 212 00:13:06,720 --> 00:13:10,700 ‫karena ingatlah bahwa kita tidak akan pernah bisa memperbarui 213 00:13:10,700 --> 00:13:13,250 ‫kata sandi menggunakan findByIdAndUpdate. 214 00:13:13,250 --> 00:13:17,120 ‫Sekali lagi, karena itu tidak akan menjalankan middleware aman 215 00:13:17,120 --> 00:13:20,580 ‫yang akan menangani enkripsi kata sandi kita. 216 00:13:20,580 --> 00:13:23,860 ‫Oke, dan itulah mengapa kami memiliki rute terpisah untuk 217 00:13:23,860 --> 00:13:26,560 ‫itu di API kami, dan juga 218 00:13:26,560 --> 00:13:29,950 ‫kami memiliki rute terpisah untuk itu di antarmuka pengguna kami. 219 00:13:29,950 --> 00:13:32,090 ‫Dan biasanya itulah yang selalu Anda lihat 220 00:13:32,090 --> 00:13:34,550 ‫di aplikasi web ketika Anda ingin memperbarui kata 221 00:13:34,550 --> 00:13:36,610 ‫sandi Anda, Anda biasanya memiliki formulir 222 00:13:36,610 --> 00:13:38,430 ‫terpisah hanya untuk itu, oke. 223 00:13:38,430 --> 00:13:41,493 ‫Bagaimanapun, sekarang mari kita lanjutkan di sini dengan opsi 224 00:13:42,830 --> 00:13:45,373 ‫kami, di mana kami mengatakan bahwa 225 00:13:46,640 --> 00:13:50,063 ‫kami ingin mendapatkan yang baru, jadi pada dasarnya dokumen yang 226 00:13:51,140 --> 00:13:54,463 ‫diperbarui sebagai hasilnya, dan juga bahwa kami ingin menjalankan validator. 227 00:13:55,350 --> 00:13:59,053 ‫Jadi ini seperti yang kami lakukan sebelumnya di API kami. 228 00:14:00,500 --> 00:14:03,193 ‫Hebat, jadi sebut saja updateUser. 229 00:14:05,410 --> 00:14:08,613 ‫Oke, dan jadi apa yang ingin kita lakukan sekarang? 230 00:14:12,800 --> 00:14:16,070 ‫Nah, setelah mengirimkan data di website kami, pada dasarnya 231 00:14:16,070 --> 00:14:18,763 ‫yang kami inginkan adalah kembali ke halaman ini 232 00:14:19,790 --> 00:14:22,350 ‫di sini, tetapi tentu saja dengan data 233 00:14:22,350 --> 00:14:24,760 ‫yang diperbarui di sini, oke. 234 00:14:24,760 --> 00:14:27,660 ‫Jadi itu mudah, yang harus kita lakukan pada 235 00:14:27,660 --> 00:14:30,170 ‫dasarnya adalah merender halaman akun lagi. 236 00:14:30,170 --> 00:14:32,873 ‫Jadi mirip dengan yang ini, mari kita 237 00:14:34,160 --> 00:14:36,340 ‫salin saja, oke, tapi sekarang 238 00:14:36,340 --> 00:14:39,900 ‫sebenarnya ada satu perbedaan penting, karena saat ini, kita 239 00:14:39,900 --> 00:14:41,910 ‫sebenarnya juga perlu 240 00:14:41,910 --> 00:14:44,120 ‫memasukkan pengguna, jadi pengguna yang 241 00:14:44,120 --> 00:14:47,600 ‫diperbarui, karena jika tidak, pengguna yang template akan 242 00:14:47,600 --> 00:14:49,920 ‫digunakan, apakah yang berasal dari middleware 243 00:14:49,920 --> 00:14:52,190 ‫pelindung, ingat, dan yang tidak 244 00:14:52,190 --> 00:14:54,330 ‫akan menjadi pengguna yang diperbarui. 245 00:14:54,330 --> 00:14:57,223 ‫Benar, jadi kita harus memasukkan user is updatedUser. 246 00:14:58,720 --> 00:15:03,720 ‫Baiklah, dan begitu, itu sudah cukup. 247 00:15:06,050 --> 00:15:08,933 ‫Jadi jika sekarang kami memuat ulang ini, atau sebenarnya jika 248 00:15:10,450 --> 00:15:14,943 ‫sekarang menyimpan ini di sini, maka Anda melihat bahwa kami sebenarnya kembali ke halaman yang sama 249 00:15:16,000 --> 00:15:17,890 ‫persis dan datanya masih sama. 250 00:15:17,890 --> 00:15:20,970 ‫Jadi mari kita buktikan, buka 251 00:15:20,970 --> 00:15:25,000 ‫halaman lain, lalu kembali ke halaman pengaturan. 252 00:15:25,000 --> 00:15:27,450 ‫Jadi, ini membuktikan bahwa data sekarang 253 00:15:27,450 --> 00:15:29,500 ‫telah diperbarui secara efektif. 254 00:15:29,500 --> 00:15:31,603 ‫Jadi jika sekarang kita logout, maka 255 00:15:33,090 --> 00:15:35,440 ‫mari kita coba login dengan email baru ini. 256 00:15:35,440 --> 00:15:37,423 ‫Jadi saya ingin keluar, baiklah, dan sekarang masuk lagi. 257 00:15:39,530 --> 00:15:44,530 ‫Jadi sekarang, kita akan menggunakan email baru ini, dan tentu saja masih 258 00:15:44,950 --> 00:15:47,493 ‫dengan kata sandi lama, test1234, dan 259 00:15:48,780 --> 00:15:51,130 ‫memang, ini adalah alamat email 260 00:15:53,810 --> 00:15:56,500 ‫baru yang perlu kita gunakan untuk masuk. 261 00:15:56,500 --> 00:15:59,670 ‫Sekarang mari kita lihat apa yang terjadi ketika kita memasukkan beberapa 262 00:15:59,670 --> 00:16:01,120 ‫data yang salah di sini. 263 00:16:01,120 --> 00:16:04,860 ‫Misalnya, Google Chrome memungkinkan kita untuk mengirimkan alamat email 264 00:16:04,860 --> 00:16:07,120 ‫seperti ini, tetapi tentu saja, 265 00:16:07,120 --> 00:16:09,530 ‫model Mongoose kita tidak mengizinkan email 266 00:16:09,530 --> 00:16:11,550 ‫dengan format ini. 267 00:16:11,550 --> 00:16:14,250 ‫Jadi kita sekarang harus mendapatkan kesalahan, dan memang, 268 00:16:14,250 --> 00:16:15,950 ‫kita mendapatkan kesalahan ini, 269 00:16:17,620 --> 00:16:20,540 ‫berikan email yang valid, tapi itu semacam pengalaman 270 00:16:20,540 --> 00:16:23,690 ‫pengguna yang mengerikan, benar, jadi kami baru saja mengirimkan 271 00:16:23,690 --> 00:16:26,530 ‫data kami, dan kemudian tiba-tiba, kami pergi ke 272 00:16:26,530 --> 00:16:28,470 ‫halaman yang sama sekali baru. 273 00:16:28,470 --> 00:16:31,740 ‫Dan sebenarnya kami melihat bahwa kami 274 00:16:31,740 --> 00:16:36,740 ‫juga mendapatkan URL baru ini, jadi URL tempat kami mengirimkan data. 275 00:16:36,850 --> 00:16:39,420 ‫Dan ya, itu agak buruk, dan seperti 276 00:16:39,420 --> 00:16:41,470 ‫yang saya katakan di awal, 277 00:16:41,470 --> 00:16:43,930 ‫cara melakukan sesuatu ini sebenarnya sedikit 278 00:16:43,930 --> 00:16:46,420 ‫lebih buruk untuk menangani kesalahan, yang merupakan 279 00:16:46,420 --> 00:16:48,960 ‫salah satu alasan mengapa saya pribadi lebih 280 00:16:48,960 --> 00:16:51,840 ‫suka menggunakan API yang kami sudah dibuat untuk 281 00:16:51,840 --> 00:16:55,640 ‫memperbarui data pengguna, dan secara umum untuk melakukan hal-hal semacam ini. 282 00:16:55,640 --> 00:16:57,740 ‫Baiklah, jadi mari kita 283 00:16:57,740 --> 00:17:00,720 ‫lakukan persis seperti itu di video berikutnya.