‫Narator: Jadi, seperti yang kami katakan di
‫kuliah terakhir, sekarang mari kita benar-benar menggunakan API kita untuk memperbarui data pengguna.
‫Jadi, seperti sebelumnya, dengan fungsi login,
‫sekarang kita akan membuat panggilan API dari front end.
‫Jadi kita perlu membuat file JavaScript baru untuk itu.
‫Dan yang ini akan saya sebut pengaturan pembaruan.
‫Dan pengaturan, karena pada dasarnya kita
‫akan memperbarui data yaitu nama dan email,
‫dan kemudian kita juga akan memperbarui kata sandi dari file
‫ini, dan kata sandi, bersama dengan data pengguna,
‫saya menyebutnya pengaturan. Baiklah.
‫Jadi ini sebenarnya sangat mirip dengan apa
‫yang kami lakukan dengan login.
‫dan sekali lagi saya benar-benar ingin
‫meninggalkan ini sebagai tantangan bagi
‫Anda sehingga Anda dapat mempraktekkan apa yang telah Anda pelajari.
‫Jadi lanjutkan dan buat fungsi pembaruan data di sini.
‫Jadi, perbarui data adalah nama fungsi yang
‫saya ingin Anda buat di sini dan tentu
‫saja panggil fungsi itu di sini
‫dari index. jf.
‫Jadi Anda harus mengekspor fungsi dari sini dan kemudian mengimpornya
‫di sini ke dalam indeks sehingga sangat
‫mirip dengan apa yang
‫kita lakukan sebelumnya dengan fungsi lainnya.
‫Sekarang satu hal penting yang harus dilakukan
‫sebelum benar-benar menulis JavaScript, adalah
‫bahwa dalam formulir kita, kita sebenarnya perlu menghapus bagian-bagian ini di sini.
‫Jadi mari kita benar-benar menduplikasi baris
‫ini di sini sehingga kita meninggalkannya sebagai referensi.
‫Jadi mari kita komentari bagian ini dan tambahkan komentar lain
‫di sini, tanpa API, lalu
‫yang ini dengan API, jadi di sini kita tidak
‫perlu tindakan dan juga bukan metode,
‫oke, karena
‫jika dibiarkan seperti ini maka itu
‫mungkin benar-benar mengirimkan data ke URL ini.
‫Dan bahkan jika tidak, kita masih tidak membutuhkannya di sini.
‫Baiklah, jadi itu hanya satu hal penting.
‫Tapi sekarang silakan lanjutkan dan jeda video
‫dan coba terapkan ini sendiri.
‫Jadi saya yakin Anda baru saja melakukannya.
‫Dan inilah cara saya melakukannya.
‫Jadi ekspor data const_update.
‫Dan fungsi ini akan menerima sebagai input
‫nama dan email, jadi data yang ingin Anda perbarui dan kemudian kita
‫akan menggunakan axios
‫untuk membuat panggilan API itu sendiri.
‫Jadi mari kita juga mengimpor axios
‫dari modul axios.
‫Jadi sekali lagi ini adalah sintaks modul es6 dan bukan sintaks modul
‫js umum yang kita gunakan di node.js. js, baiklah,
‫jadi jangan bingung dengan keduanya, baiklah.
‫Sehingga permintaan HTTP yang kami lakukan dengan axios
‫perlu lagi berada di dalam blok try catch sehingga
‫jika ada kesalahan, kami dapat menanganinya
‫dengan benar.
‫Jadi di sini di
‫blok tangkap, dan seperti sebelumnya mari kita mulai dengan
‫melakukan itu dan jika ada yang
‫salah, kita ingin menunjukkan peringatan seperti yang kita lakukan di login.
‫Jadi mari impor fungsi showAlert seperti ini dari
‫dalam
‫folder yang sama ". /peringatan.
‫" Baiklah. Oh, dan kita juga perlu menonaktifkan eslint lagi.
‫Dan sekarang kami siap berangkat.
‫Jadi tidak ada gunanya menampilkan fungsi peringatan di sini.
‫Kami ingin itu
‫menjadi kesalahan sehingga mendapatkan warna merah
‫yang bagus dan kemudian pesan
‫yang ingin kami tampilkan adalah kesalahan
‫jadi itulah kesalahan yang dibuat di blok try ketika terjadi kesalahan.
‫Kemudian di sana ada err. respon, dan
‫kemudian di sana, data. pesan, oke, jadi properti
‫pesan ini adalah yang kita definisikan di
‫server setiap kali ada kesalahan, oke.
‫Iklan jadi kami akan mencobanya seperti yang kami
‫lakukan sebelumnya dengan validasi, jadi dalam kuliah terakhir kami mendapat pesan
‫kesalahan validasi ini di sini, dan sekarang
‫di video ini
‫ketika kami melakukan kesalahan yang sama
‫dengan API Anda akan kemudian dapatkan peringatan dengan pesan yang sama
‫persis ini, dan itu akan menjadi pengalaman pengguna yang jauh
‫lebih baik, karena kami tidak meninggalkan halaman tempat kami berada, kan.
‫Pokoknya sekarang mari kita lakukan permintaan HTTP itu.
‫Dan simpan respons interloop itu,
‫dan seperti yang sudah Anda ketahui, kita
‫perlu menunggu janji yang datang dari permintaan axios
‫ini dan itu ditandai sebagai async dan sekarang di sini opsinya.
‫Jadi metodenya adalah tambalan, oke?
‫Dan Anda bisa menggunakan ini di sini
‫dalam huruf kecil, tapi saya lebih suka untuk selalu menulis
‫metode HTTP huruf besar seperti ini dan sekarang mari kita benar-benar pergi
‫ke posting dan melihat URL yang akan kita tekan sekarang.
‫Untuk beberapa alasan, ini terlihat agak aneh karena terlalu besar..
‫tapi sudahlah.
‫Saya hanya ingin memilih URL yang akan kita tekan di sini.
‫jadi itu di sini
‫pada pengguna dan perbarui pengguna saat ini, oke.
‫Jadi yang
‫ini hanya menerima data yang ingin kami perbarui sebagai badan.
‫Jadi dalam hal ini adalah nama dan
‫perannya, tetapi tentu
‫saja kami tidak akan mengizinkan pengguna untuk
‫memperbarui peran dan saya pikir kami hanya melakukan ini di
‫sini untuk menunjukkan contoh bahwa yang
‫ini tidak diperbolehkan, benar,
‫dan jadi yang kami update tentunya nama dan emailnya.
‫Yang penting di sini adalah bahwa untuk rute ini, kita
‫tidak perlu menentukan ID pengguna, karena kita harus
‫melakukannya di sini di Perbarui Pengguna.
‫Jadi yang ini di sini adalah yang pertama kami buat.
‫Dan di sini, kami harus memberikan ID sebagai parameter URL, tetapi tentu
‫saja dalam memperbarui pengguna saat ini, kami
‫mendapatkan ID pengguna itu dari permintaan. pengguna seperti biasa.
‫Ingat itu?
‫Bagaimanapun, mari kita salin ini di sini.
‫Dan kemudian tentukan URL-nya.
‫Oke, jadi di sini seperti biasa host lokal dan tentu
‫saja ketika kami menerapkan
‫ini, kami akan mengubahnya di sini.
‫Tapi untuk saat ini, tentu saja kami hanya bekerja secara lokal di sini.
‫Karena itulah yang digunakan.
‫Selanjutnya kita tentukan data
‫dan jadi ini
‫akan menjadi tubuh yang akan dikirim bersama
‫dengan permintaan dan nama hanya akan
‫menjadi nama, yang masuk, dan kemudian tentu saja, email.
‫Baiklah, jadi itu saja permintaannya, dan
‫sekarang mari kita uji apakah kita benar-benar mendapatkan kembali kesuksesan
‫kita begitu tanggapannya. data. status, jika
‫itu sama dengan
‫sukses, dan sekali lagi status ini kami temukan di semua
‫tanggapan kami, ingat, dan jika ini berhasil, maka
‫kami ingin menampilkan peringatan sukses
‫yang mengatakan, "Data berhasil diperbarui. " Berikan save, dan
‫saya
‫pikir itu seharusnya untuk fungsi ini, oke.
‫Sekarang yang perlu kita lakukan adalah menggunakannya di sini.
‫Jadi pertama, saya akan mengimpor
‫fungsi,
‫"updateData" dari ". /perbarui pengaturan" sehingga
‫kami dapat menghapus "js" di sana.
‫Selanjutnya, mari kita benar-benar memilih formulir di halaman.
‫Jadi, gunakan formulir data yang sama dengan dokumen. querySelector dan kemudian
‫mari kita lihat itu.
‫Jadi di sini di akun
‫dan formulir ini memiliki nama kelas dari data pengguna formulir.
‫Jadi, mari ambil itu dan taruh di sini.
‫Oke, jadi sekarang kita akan melakukan sesuatu yang sangat mirip dengan
‫login ini.
‫Jadi jika ada formulir data pengguna, mari kita
‫tambahkan pendengar acara ke dalamnya.
‫Jadi addEventListener dalam hal mengirimkan dan mendapatkan akses
‫ke acara di sini dan
‫kami akan mencegah
‫default, jadi kami akan mencegah formulir dikirimkan.
‫Dengan potongan kode ini, mari kita dapatkan email dan nama yang
‫akan sangat mirip dengan apa yang
‫sebenarnya kita miliki di sini, jadi mari kita ambil itu.
‫Hanya untuk memastikan mereka benar-benar ada mari kita
‫buka ini
‫lagi dan memang mereka mendapatkan ID nama dan ID email.
‫Baiklah, jadi email adalah email dan
‫nama dengan ide nama.
‫Oke, lalu yang perlu kita lakukan adalah
‫benar-benar memanggil fungsi yang kita impor.
‫Jadi, updateData dengan nama dan email dan saya
‫pikir itu urutan yang benar, jadi ya.
‫pertama nama dan kemudian email, oke.
‫Dan di balik layar, paket
‫kami masih harus menggabungkan semua file ini
‫bersama-sama di setiap penyimpanan jadi jika kami menyimpan ini,
‫Anda melihat bahwa itu diperbarui sekarang
‫di sini dan jadi sekarang kami harus melakukannya dengan baik.
‫Jadi, mari kembali ke beranda kami di sini.
‫Baiklah. Dan mari kita coba perbarui data kita.
‫Dan apa yang akan saya
‫lakukan pada dasarnya adalah kembali ke data asli, menghapus nama
‫tengah dan nama belakang dari sini dan
‫sekarang simpan pengaturan dan ini dia, data berhasil diperbarui.
‫Jadi jika kita sekarang memuat ulang
‫halaman, pada dasarnya kita akan mendapatkan data itu kembali dari
‫server dan jika itu sama maka itu berarti
‫bahwa data tersebut benar-benar bertahan.
‫Jadi, reload dan ini dia.
‫Sangat bagus. Itu benar-benar berhasil.
‫Mari kita pergi ke
‫halaman lain di sini dan kembali hanya
‫untuk memastikan tetapi memang itu berhasil.
‫Dan sekarang, mari kita coba salah satu kesalahan ini.
‫Baiklah, dan itu akan memicu alamat email yang salah dan
‫terlihat jauh lebih bagus, jadi itu memberi kita
‫pesan kesalahan ini, yang tentu
‫saja bisa kita format sedikit lebih baik untuk
‫membuatnya terlihat lebih baik.
‫Tapi saya pikir seperti ini baik-baik
‫saja untuk aplikasi kecil ini.
‫Dan kita bisa melakukan segala
‫macam hal seperti menandai bidang ini di sini dengan warna merah atau semacamnya.
‫Tetapi untuk hal-hal semacam ini Anda
‫mungkin akan lebih baik menggunakan kerangka kerja front-end yang lengkap seperti
‫React atau View.
‫Bagaimanapun, formulir ini sekarang berfungsi di sini kecuali gambar, yang
‫sekali lagi kita lakukan di bagian
‫berikutnya, jadi yang tersisa
‫sekarang adalah memperbarui kata sandi sehingga kita akan melakukannya di video berikutnya.