1 00:00:01,210 --> 00:00:03,550 ‫Narator: Jadi, seperti yang kami katakan di 2 00:00:03,550 --> 00:00:07,883 ‫kuliah terakhir, sekarang mari kita benar-benar menggunakan API kita untuk memperbarui data pengguna. 3 00:00:09,460 --> 00:00:12,860 ‫Jadi, seperti sebelumnya, dengan fungsi login, 4 00:00:12,860 --> 00:00:16,990 ‫sekarang kita akan membuat panggilan API dari front end. 5 00:00:16,990 --> 00:00:20,313 ‫Jadi kita perlu membuat file JavaScript baru untuk itu. 6 00:00:21,370 --> 00:00:26,033 ‫Dan yang ini akan saya sebut pengaturan pembaruan. 7 00:00:26,890 --> 00:00:29,149 ‫Dan pengaturan, karena pada dasarnya kita 8 00:00:29,149 --> 00:00:31,991 ‫akan memperbarui data yaitu nama dan email, 9 00:00:31,991 --> 00:00:35,720 ‫dan kemudian kita juga akan memperbarui kata sandi dari file 10 00:00:35,720 --> 00:00:38,768 ‫ini, dan kata sandi, bersama dengan data pengguna, 11 00:00:38,768 --> 00:00:42,080 ‫saya menyebutnya pengaturan. Baiklah. 12 00:00:42,080 --> 00:00:44,510 ‫Jadi ini sebenarnya sangat mirip dengan apa 13 00:00:44,510 --> 00:00:46,680 ‫yang kami lakukan dengan login. 14 00:00:46,680 --> 00:00:48,650 ‫dan sekali lagi saya benar-benar ingin 15 00:00:48,650 --> 00:00:50,436 ‫meninggalkan ini sebagai tantangan bagi 16 00:00:50,436 --> 00:00:53,830 ‫Anda sehingga Anda dapat mempraktekkan apa yang telah Anda pelajari. 17 00:00:53,830 --> 00:00:57,003 ‫Jadi lanjutkan dan buat fungsi pembaruan data di sini. 18 00:00:58,380 --> 00:01:00,800 ‫Jadi, perbarui data adalah nama fungsi yang 19 00:01:00,800 --> 00:01:03,720 ‫saya ingin Anda buat di sini dan tentu 20 00:01:03,720 --> 00:01:06,021 ‫saja panggil fungsi itu di sini 21 00:01:06,021 --> 00:01:08,250 ‫dari index. jf. 22 00:01:08,250 --> 00:01:11,820 ‫Jadi Anda harus mengekspor fungsi dari sini dan kemudian mengimpornya 23 00:01:11,820 --> 00:01:14,230 ‫di sini ke dalam indeks sehingga sangat 24 00:01:14,230 --> 00:01:16,110 ‫mirip dengan apa yang 25 00:01:16,110 --> 00:01:18,020 ‫kita lakukan sebelumnya dengan fungsi lainnya. 26 00:01:18,020 --> 00:01:20,630 ‫Sekarang satu hal penting yang harus dilakukan 27 00:01:20,630 --> 00:01:22,953 ‫sebelum benar-benar menulis JavaScript, adalah 28 00:01:22,953 --> 00:01:27,320 ‫bahwa dalam formulir kita, kita sebenarnya perlu menghapus bagian-bagian ini di sini. 29 00:01:27,320 --> 00:01:28,969 ‫Jadi mari kita benar-benar menduplikasi baris 30 00:01:28,969 --> 00:01:31,163 ‫ini di sini sehingga kita meninggalkannya sebagai referensi. 31 00:01:32,500 --> 00:01:36,563 ‫Jadi mari kita komentari bagian ini dan tambahkan komentar lain 32 00:01:37,890 --> 00:01:40,003 ‫di sini, tanpa API, lalu 33 00:01:41,350 --> 00:01:45,310 ‫yang ini dengan API, jadi di sini kita tidak 34 00:01:45,310 --> 00:01:48,210 ‫perlu tindakan dan juga bukan metode, 35 00:01:48,210 --> 00:01:49,710 ‫oke, karena 36 00:01:49,710 --> 00:01:52,480 ‫jika dibiarkan seperti ini maka itu 37 00:01:52,480 --> 00:01:55,480 ‫mungkin benar-benar mengirimkan data ke URL ini. 38 00:01:55,480 --> 00:01:59,063 ‫Dan bahkan jika tidak, kita masih tidak membutuhkannya di sini. 39 00:02:00,020 --> 00:02:03,760 ‫Baiklah, jadi itu hanya satu hal penting. 40 00:02:03,760 --> 00:02:06,500 ‫Tapi sekarang silakan lanjutkan dan jeda video 41 00:02:06,500 --> 00:02:08,533 ‫dan coba terapkan ini sendiri. 42 00:02:12,030 --> 00:02:14,620 ‫Jadi saya yakin Anda baru saja melakukannya. 43 00:02:14,620 --> 00:02:18,230 ‫Dan inilah cara saya melakukannya. 44 00:02:18,230 --> 00:02:21,103 ‫Jadi ekspor data const_update. 45 00:02:24,040 --> 00:02:26,900 ‫Dan fungsi ini akan menerima sebagai input 46 00:02:26,900 --> 00:02:31,900 ‫nama dan email, jadi data yang ingin Anda perbarui dan kemudian kita 47 00:02:32,980 --> 00:02:34,600 ‫akan menggunakan axios 48 00:02:34,600 --> 00:02:36,853 ‫untuk membuat panggilan API itu sendiri. 49 00:02:37,710 --> 00:02:40,450 ‫Jadi mari kita juga mengimpor axios 50 00:02:45,270 --> 00:02:47,420 ‫dari modul axios. 51 00:02:47,420 --> 00:02:50,630 ‫Jadi sekali lagi ini adalah sintaks modul es6 dan bukan sintaks modul 52 00:02:50,630 --> 00:02:55,290 ‫js umum yang kita gunakan di node.js. js, baiklah, 53 00:02:55,290 --> 00:02:59,610 ‫jadi jangan bingung dengan keduanya, baiklah. 54 00:02:59,610 --> 00:03:03,030 ‫Sehingga permintaan HTTP yang kami lakukan dengan axios 55 00:03:03,030 --> 00:03:06,661 ‫perlu lagi berada di dalam blok try catch sehingga 56 00:03:06,661 --> 00:03:09,050 ‫jika ada kesalahan, kami dapat menanganinya 57 00:03:09,050 --> 00:03:10,483 ‫dengan benar. 58 00:03:12,890 --> 00:03:14,653 ‫Jadi di sini di 59 00:03:15,660 --> 00:03:19,420 ‫blok tangkap, dan seperti sebelumnya mari kita mulai dengan 60 00:03:19,420 --> 00:03:22,060 ‫melakukan itu dan jika ada yang 61 00:03:22,060 --> 00:03:26,430 ‫salah, kita ingin menunjukkan peringatan seperti yang kita lakukan di login. 62 00:03:26,430 --> 00:03:29,620 ‫Jadi mari impor fungsi showAlert seperti ini dari 63 00:03:33,670 --> 00:03:34,580 ‫dalam 64 00:03:35,950 --> 00:03:40,457 ‫folder yang sama ". /peringatan. 65 00:03:42,270 --> 00:03:46,333 ‫" Baiklah. Oh, dan kita juga perlu menonaktifkan eslint lagi. 66 00:03:52,080 --> 00:03:53,513 ‫Dan sekarang kami siap berangkat. 67 00:03:54,480 --> 00:03:57,023 ‫Jadi tidak ada gunanya menampilkan fungsi peringatan di sini. 68 00:04:00,750 --> 00:04:02,860 ‫Kami ingin itu 69 00:04:02,860 --> 00:04:05,440 ‫menjadi kesalahan sehingga mendapatkan warna merah 70 00:04:05,440 --> 00:04:07,670 ‫yang bagus dan kemudian pesan 71 00:04:07,670 --> 00:04:10,090 ‫yang ingin kami tampilkan adalah kesalahan 72 00:04:10,090 --> 00:04:14,640 ‫jadi itulah kesalahan yang dibuat di blok try ketika terjadi kesalahan. 73 00:04:14,640 --> 00:04:18,772 ‫Kemudian di sana ada err. respon, dan 74 00:04:18,772 --> 00:04:23,297 ‫kemudian di sana, data. pesan, oke, jadi properti 75 00:04:23,297 --> 00:04:26,620 ‫pesan ini adalah yang kita definisikan di 76 00:04:26,620 --> 00:04:29,740 ‫server setiap kali ada kesalahan, oke. 77 00:04:29,740 --> 00:04:32,450 ‫Iklan jadi kami akan mencobanya seperti yang kami 78 00:04:32,450 --> 00:04:36,140 ‫lakukan sebelumnya dengan validasi, jadi dalam kuliah terakhir kami mendapat pesan 79 00:04:36,140 --> 00:04:38,560 ‫kesalahan validasi ini di sini, dan sekarang 80 00:04:38,560 --> 00:04:39,810 ‫di video ini 81 00:04:39,810 --> 00:04:42,044 ‫ketika kami melakukan kesalahan yang sama 82 00:04:42,044 --> 00:04:45,600 ‫dengan API Anda akan kemudian dapatkan peringatan dengan pesan yang sama 83 00:04:45,600 --> 00:04:48,731 ‫persis ini, dan itu akan menjadi pengalaman pengguna yang jauh 84 00:04:48,731 --> 00:04:52,423 ‫lebih baik, karena kami tidak meninggalkan halaman tempat kami berada, kan. 85 00:04:54,320 --> 00:04:57,693 ‫Pokoknya sekarang mari kita lakukan permintaan HTTP itu. 86 00:04:58,910 --> 00:05:01,603 ‫Dan simpan respons interloop itu, 87 00:05:02,451 --> 00:05:05,750 ‫dan seperti yang sudah Anda ketahui, kita 88 00:05:05,750 --> 00:05:09,130 ‫perlu menunggu janji yang datang dari permintaan axios 89 00:05:09,130 --> 00:05:14,130 ‫ini dan itu ditandai sebagai async dan sekarang di sini opsinya. 90 00:05:16,540 --> 00:05:21,540 ‫Jadi metodenya adalah tambalan, oke? 91 00:05:21,560 --> 00:05:23,700 ‫Dan Anda bisa menggunakan ini di sini 92 00:05:23,700 --> 00:05:26,660 ‫dalam huruf kecil, tapi saya lebih suka untuk selalu menulis 93 00:05:26,660 --> 00:05:30,023 ‫metode HTTP huruf besar seperti ini dan sekarang mari kita benar-benar pergi 94 00:05:30,023 --> 00:05:33,023 ‫ke posting dan melihat URL yang akan kita tekan sekarang. 95 00:05:34,210 --> 00:05:37,087 ‫Untuk beberapa alasan, ini terlihat agak aneh karena terlalu besar.. 96 00:05:40,050 --> 00:05:41,050 ‫tapi sudahlah. 97 00:05:41,050 --> 00:05:45,270 ‫Saya hanya ingin memilih URL yang akan kita tekan di sini. 98 00:05:45,270 --> 00:05:47,470 ‫jadi itu di sini 99 00:05:47,470 --> 00:05:51,091 ‫pada pengguna dan perbarui pengguna saat ini, oke. 100 00:05:51,091 --> 00:05:52,295 ‫Jadi yang 101 00:05:52,295 --> 00:05:57,090 ‫ini hanya menerima data yang ingin kami perbarui sebagai badan. 102 00:05:57,090 --> 00:05:59,790 ‫Jadi dalam hal ini adalah nama dan 103 00:05:59,790 --> 00:06:01,070 ‫perannya, tetapi tentu 104 00:06:01,070 --> 00:06:03,790 ‫saja kami tidak akan mengizinkan pengguna untuk 105 00:06:03,790 --> 00:06:07,420 ‫memperbarui peran dan saya pikir kami hanya melakukan ini di 106 00:06:07,420 --> 00:06:09,866 ‫sini untuk menunjukkan contoh bahwa yang 107 00:06:09,866 --> 00:06:11,550 ‫ini tidak diperbolehkan, benar, 108 00:06:11,550 --> 00:06:14,710 ‫dan jadi yang kami update tentunya nama dan emailnya. 109 00:06:14,710 --> 00:06:17,910 ‫Yang penting di sini adalah bahwa untuk rute ini, kita 110 00:06:17,910 --> 00:06:20,650 ‫tidak perlu menentukan ID pengguna, karena kita harus 111 00:06:20,650 --> 00:06:22,763 ‫melakukannya di sini di Perbarui Pengguna. 112 00:06:23,920 --> 00:06:25,870 ‫Jadi yang ini di sini adalah yang pertama kami buat. 113 00:06:25,870 --> 00:06:30,010 ‫Dan di sini, kami harus memberikan ID sebagai parameter URL, tetapi tentu 114 00:06:30,010 --> 00:06:32,460 ‫saja dalam memperbarui pengguna saat ini, kami 115 00:06:32,460 --> 00:06:37,050 ‫mendapatkan ID pengguna itu dari permintaan. pengguna seperti biasa. 116 00:06:37,050 --> 00:06:38,293 ‫Ingat itu? 117 00:06:39,396 --> 00:06:41,713 ‫Bagaimanapun, mari kita salin ini di sini. 118 00:06:46,800 --> 00:06:48,593 ‫Dan kemudian tentukan URL-nya. 119 00:06:50,610 --> 00:06:55,610 ‫Oke, jadi di sini seperti biasa host lokal dan tentu 120 00:06:56,120 --> 00:06:58,460 ‫saja ketika kami menerapkan 121 00:06:58,460 --> 00:07:01,653 ‫ini, kami akan mengubahnya di sini. 122 00:07:03,790 --> 00:07:06,540 ‫Tapi untuk saat ini, tentu saja kami hanya bekerja secara lokal di sini. 123 00:07:07,704 --> 00:07:09,104 ‫Karena itulah yang digunakan. 124 00:07:09,970 --> 00:07:12,057 ‫Selanjutnya kita tentukan data 125 00:07:12,057 --> 00:07:13,890 ‫dan jadi ini 126 00:07:13,890 --> 00:07:16,800 ‫akan menjadi tubuh yang akan dikirim bersama 127 00:07:16,800 --> 00:07:19,400 ‫dengan permintaan dan nama hanya akan 128 00:07:19,400 --> 00:07:23,423 ‫menjadi nama, yang masuk, dan kemudian tentu saja, email. 129 00:07:24,930 --> 00:07:27,323 ‫Baiklah, jadi itu saja permintaannya, dan 130 00:07:29,240 --> 00:07:32,920 ‫sekarang mari kita uji apakah kita benar-benar mendapatkan kembali kesuksesan 131 00:07:36,160 --> 00:07:40,993 ‫kita begitu tanggapannya. data. status, jika 132 00:07:44,470 --> 00:07:46,140 ‫itu sama dengan 133 00:07:46,140 --> 00:07:50,910 ‫sukses, dan sekali lagi status ini kami temukan di semua 134 00:07:50,910 --> 00:07:54,520 ‫tanggapan kami, ingat, dan jika ini berhasil, maka 135 00:07:54,520 --> 00:07:56,750 ‫kami ingin menampilkan peringatan sukses 136 00:07:59,770 --> 00:08:04,400 ‫yang mengatakan, "Data berhasil diperbarui. " Berikan save, dan 137 00:08:07,650 --> 00:08:09,170 ‫saya 138 00:08:09,170 --> 00:08:14,170 ‫pikir itu seharusnya untuk fungsi ini, oke. 139 00:08:14,620 --> 00:08:17,293 ‫Sekarang yang perlu kita lakukan adalah menggunakannya di sini. 140 00:08:18,220 --> 00:08:20,373 ‫Jadi pertama, saya akan mengimpor 141 00:08:25,493 --> 00:08:26,493 ‫fungsi, 142 00:08:29,050 --> 00:08:32,360 ‫"updateData" dari ". /perbarui pengaturan" sehingga 143 00:08:32,360 --> 00:08:34,623 ‫kami dapat menghapus "js" di sana. 144 00:08:36,340 --> 00:08:39,933 ‫Selanjutnya, mari kita benar-benar memilih formulir di halaman. 145 00:08:41,860 --> 00:08:46,860 ‫Jadi, gunakan formulir data yang sama dengan dokumen. querySelector dan kemudian 146 00:08:50,489 --> 00:08:53,190 ‫mari kita lihat itu. 147 00:08:53,190 --> 00:08:55,410 ‫Jadi di sini di akun 148 00:08:58,150 --> 00:09:01,893 ‫dan formulir ini memiliki nama kelas dari data pengguna formulir. 149 00:09:03,630 --> 00:09:07,920 ‫Jadi, mari ambil itu dan taruh di sini. 150 00:09:07,920 --> 00:09:11,670 ‫Oke, jadi sekarang kita akan melakukan sesuatu yang sangat mirip dengan 151 00:09:11,670 --> 00:09:12,703 ‫login ini. 152 00:09:14,480 --> 00:09:19,089 ‫Jadi jika ada formulir data pengguna, mari kita 153 00:09:19,089 --> 00:09:22,203 ‫tambahkan pendengar acara ke dalamnya. 154 00:09:24,410 --> 00:09:27,980 ‫Jadi addEventListener dalam hal mengirimkan dan mendapatkan akses 155 00:09:33,640 --> 00:09:35,660 ‫ke acara di sini dan 156 00:09:37,060 --> 00:09:38,880 ‫kami akan mencegah 157 00:09:38,880 --> 00:09:42,110 ‫default, jadi kami akan mencegah formulir dikirimkan. 158 00:09:42,110 --> 00:09:45,810 ‫Dengan potongan kode ini, mari kita dapatkan email dan nama yang 159 00:09:45,810 --> 00:09:48,363 ‫akan sangat mirip dengan apa yang 160 00:09:48,363 --> 00:09:51,663 ‫sebenarnya kita miliki di sini, jadi mari kita ambil itu. 161 00:09:56,178 --> 00:09:59,777 ‫Hanya untuk memastikan mereka benar-benar ada mari kita 162 00:09:59,777 --> 00:10:01,200 ‫buka ini 163 00:10:02,080 --> 00:10:06,679 ‫lagi dan memang mereka mendapatkan ID nama dan ID email. 164 00:10:06,679 --> 00:10:09,762 ‫Baiklah, jadi email adalah email dan 165 00:10:13,908 --> 00:10:16,050 ‫nama dengan ide nama. 166 00:10:16,050 --> 00:10:18,640 ‫Oke, lalu yang perlu kita lakukan adalah 167 00:10:18,640 --> 00:10:21,053 ‫benar-benar memanggil fungsi yang kita impor. 168 00:10:22,090 --> 00:10:27,090 ‫Jadi, updateData dengan nama dan email dan saya 169 00:10:27,880 --> 00:10:32,530 ‫pikir itu urutan yang benar, jadi ya. 170 00:10:32,530 --> 00:10:35,840 ‫pertama nama dan kemudian email, oke. 171 00:10:35,840 --> 00:10:37,480 ‫Dan di balik layar, paket 172 00:10:39,060 --> 00:10:41,310 ‫kami masih harus menggabungkan semua file ini 173 00:10:41,310 --> 00:10:43,880 ‫bersama-sama di setiap penyimpanan jadi jika kami menyimpan ini, 174 00:10:43,880 --> 00:10:45,846 ‫Anda melihat bahwa itu diperbarui sekarang 175 00:10:45,846 --> 00:10:48,883 ‫di sini dan jadi sekarang kami harus melakukannya dengan baik. 176 00:10:51,580 --> 00:10:55,393 ‫Jadi, mari kembali ke beranda kami di sini. 177 00:10:56,790 --> 00:10:59,723 ‫Baiklah. Dan mari kita coba perbarui data kita. 178 00:11:01,300 --> 00:11:03,515 ‫Dan apa yang akan saya 179 00:11:03,515 --> 00:11:07,570 ‫lakukan pada dasarnya adalah kembali ke data asli, menghapus nama 180 00:11:07,570 --> 00:11:10,580 ‫tengah dan nama belakang dari sini dan 181 00:11:11,620 --> 00:11:15,260 ‫sekarang simpan pengaturan dan ini dia, data berhasil diperbarui. 182 00:11:15,260 --> 00:11:17,370 ‫Jadi jika kita sekarang memuat ulang 183 00:11:17,370 --> 00:11:20,520 ‫halaman, pada dasarnya kita akan mendapatkan data itu kembali dari 184 00:11:20,520 --> 00:11:22,880 ‫server dan jika itu sama maka itu berarti 185 00:11:22,880 --> 00:11:24,763 ‫bahwa data tersebut benar-benar bertahan. 186 00:11:25,630 --> 00:11:28,680 ‫Jadi, reload dan ini dia. 187 00:11:28,680 --> 00:11:31,370 ‫Sangat bagus. Itu benar-benar berhasil. 188 00:11:31,370 --> 00:11:33,270 ‫Mari kita pergi ke 189 00:11:33,270 --> 00:11:36,102 ‫halaman lain di sini dan kembali hanya 190 00:11:36,102 --> 00:11:38,920 ‫untuk memastikan tetapi memang itu berhasil. 191 00:11:38,920 --> 00:11:41,233 ‫Dan sekarang, mari kita coba salah satu kesalahan ini. 192 00:11:42,920 --> 00:11:46,090 ‫Baiklah, dan itu akan memicu alamat email yang salah dan 193 00:11:47,540 --> 00:11:50,190 ‫terlihat jauh lebih bagus, jadi itu memberi kita 194 00:11:50,190 --> 00:11:51,960 ‫pesan kesalahan ini, yang tentu 195 00:11:51,960 --> 00:11:54,634 ‫saja bisa kita format sedikit lebih baik untuk 196 00:11:54,634 --> 00:11:56,203 ‫membuatnya terlihat lebih baik. 197 00:11:58,140 --> 00:12:00,730 ‫Tapi saya pikir seperti ini baik-baik 198 00:12:00,730 --> 00:12:03,080 ‫saja untuk aplikasi kecil ini. 199 00:12:03,080 --> 00:12:04,760 ‫Dan kita bisa melakukan segala 200 00:12:04,760 --> 00:12:08,600 ‫macam hal seperti menandai bidang ini di sini dengan warna merah atau semacamnya. 201 00:12:08,600 --> 00:12:10,830 ‫Tetapi untuk hal-hal semacam ini Anda 202 00:12:10,830 --> 00:12:15,020 ‫mungkin akan lebih baik menggunakan kerangka kerja front-end yang lengkap seperti 203 00:12:15,020 --> 00:12:16,791 ‫React atau View. 204 00:12:16,791 --> 00:12:20,310 ‫Bagaimanapun, formulir ini sekarang berfungsi di sini kecuali gambar, yang 205 00:12:20,310 --> 00:12:22,480 ‫sekali lagi kita lakukan di bagian 206 00:12:22,480 --> 00:12:24,610 ‫berikutnya, jadi yang tersisa 207 00:12:24,610 --> 00:12:29,233 ‫sekarang adalah memperbarui kata sandi sehingga kita akan melakukannya di video berikutnya.