‫Jonas: Sekarang mari kita gunakan halaman
‫akun pengguna untuk memungkinkan pengguna memperbarui data mereka.
‫Jadi yang akan kita lakukan adalah
‫mengizinkan pengguna untuk memperbarui nama dan alamat email untuk saat ini.
‫Dan kami akan menambahkan foto pengguna di
‫sini nanti di bagian berikutnya.
‫Oke, sekarang ada dua cara di mana kita bisa melakukan ini.
‫Yang pertama adalah mengirimkan permintaan posting ke API kami seperti
‫yang kami lakukan dengan formulir login, ingat itu?
‫Dan sebenarnya, kita akan melakukannya di kuliah berikutnya.
‫Tapi kali ini, saya
‫ingin menunjukkan cara lain yang lebih tradisional.
‫Jadi dengan cara
‫yang lebih tradisional ini, kami menentukan metode posting
‫tepat di formulir, bersama dengan URL tujuan pengiriman permintaan posting.
‫Jadi pada dasarnya, dengan menggunakan metode ini, kita
‫tidak memerlukan JavaScript untuk melakukan permintaan,
‫itu secara otomatis terjadi dengan bentuk HTML yang kemudian akan
‫memposting data ke titik akhir URL di backend yang kita tentukan.
‫Sekarang secara pribadi, saya tidak terlalu menyukai solusi ini,
‫karena ini memaksa halaman dimuat ulang,
‫dan juga mengharuskan kita
‫untuk membuat route dan route handler lain di backend kita.
‫Dan akhirnya, itu juga membuatnya
‫sedikit lebih sulit untuk menangani kesalahan.
‫Namun, saya masih percaya bahwa sangat penting bagi Anda
‫untuk mengetahui cara bekerja dengan formulir dengan cara
‫ini, karena mungkin lebih masuk
‫akal dalam aplikasi yang sedang Anda bangun.
‫Misalnya, aplikasi Anda mungkin bahkan tidak memerlukan API, dan dalam hal
‫ini, ketika Anda hanya membuat situs
‫web yang dirender, tentu saja tidak masuk akal untuk
‫mengirimkan formulir menggunakan panggilan API, dan sebagai gantinya,
‫Anda akan lakukan seperti
‫yang akan kita lakukan di video ini.
‫Baiklah, dan itulah mengapa kami melakukannya dengan cara
‫ini di kuliah ini,
‫dan kemudian menggunakan cara API di kuliah berikutnya.
‫Jadi, apa yang perlu kita lakukan
‫di formulir kita untuk mengirimkannya
‫secara otomatis, tanpa harus
‫melalui JavaScript seperti yang saya
‫sebutkan sebelumnya, jadi pada dasarnya secara otomatis memposting
‫data ke titik akhir kita, adalah menentukan titik akhir itu, dan kita
‫melakukannya di sini dalam bentuk, di mana kita menentukan atribut tindakan.
‫Jadi tindakannya, dan katakanlah kita akan membuat
‫titik akhir yang disebut kirim data pengguna, seperti ini.
‫Oke, lalu kita juga
‫tentukan caranya, yaitu post, oke, jadi ini selalu perlu
‫terjadi pada elemen form yang kita submit, oke.
‫Mari kita beri lebih banyak ruang
‫di sini, agar lebih
‫mudah dipahami, dan semua ini di
‫sini adalah formulir kita, dan ketika
‫kita mengklik elemen tombol ini, secara otomatis formulir akan
‫dikirimkan, dan data akan dikirim menggunakan permintaan posting ke URL ini, oke.
‫Ada juga berbagai cara di
‫mana data sebenarnya dikirim, tetapi yang default disebut URL yang
‫dikodekan, dan itulah yang kami gunakan di sini.
‫Jadi pada dasarnya apa yang
‫akan dilakukan adalah mengkodekan semua data yang kami
‫kirimkan di URL sedikit seperti string kueri.
‫Oke, tapi lebih pada itu ketika kita
‫benar-benar bekerja untuk mendapatkan data di server dan bekerja dengannya.
‫Jadi, inilah langkah pertama dalam membuat metode ini bekerja, dan
‫yang kedua adalah menentukan properti nama pada bidang
‫yang sebenarnya ingin kita kirim.
‫Jadi input ini dan input ini,
‫dan nilainya akan dikirim
‫dengan permintaan berdasarkan atribut nama mereka.
‫Oke, jadi misalkan di sini, nama sama dengan nama, oke, jadi
‫itu nama pengguna, dan yang ini di sini akan memiliki
‫nama yang sama dengan email.
‫Oke, jadi ini akan menjadi nama bidang ini, dan
‫badan yang diterima aplikasi kita.
‫Baiklah, jadi sekarang ketika kita mengirimkan formulir, badan
‫yang akan kita terima hanya
‫akan memiliki nama dan email, karena ini
‫adalah dua bidang
‫yang benar-benar memiliki atribut nama.
‫Baiklah, sekarang mari kita terapkan rute ini di sini, oke, seperti
‫yang saya katakan dengan metode ini,
‫kita perlu mengimplementasikan rute lain.
‫Oke, jadi router, dan ingat bahwa ini adalah permintaan posting.
‫Oke, jadi yang ini akan berada di viewsController, dan
‫katakanlah updateUserData, baiklah, simpan, dan sekarang mari kita
‫buat handler ini.
‫Jadi di sini di file ini.
‫Dan hal pertama yang ingin
‫saya lakukan di sini adalah benar-benar melihat tubuh. body, oke, dan pada dasarnya dalam kasus ini,
‫hanya untuk menunjukkan kepada Anda bahwa itu sebenarnya tidak akan bekerja begitu saja.
‫Oke, dan saya akan memberi tahu Anda mengapa
‫setelah kita bereksperimen, oke, jadi untuk
‫sekarang mari kita lihat apakah kita benar-benar sudah terhubung.
‫Jadi jika mengirimkan formulir itu
‫benar-benar akan memicu penangan ini di sini, oke,
‫mari tambahkan juga string di sini hanya untuk memastikan.
‫Baiklah, jadi mari kita muat
‫ulang ini di sini sehingga kita mendapatkan formulir baru kita, dan
‫untuk memastikannya, mari kita lihat itu.
‫Baiklah, jadi Anda lihat
‫di sini, tindakan dan metode yang kami
‫tambahkan, dan tentu saja juga nama-nama ini,
‫oke, jadi mari kita tambahkan beberapa nama tengah di sini, saya
‫tidak tahu, katakanlah Sarah, lalu
‫di sini emailnya mari kita tambahkan nama belakangnya, sekarang kita mendapatkan kesalahan
‫ini, berikan email dan kata sandi, dan ini berasal dari
‫formulir login, benar, jadi itu aneh.
‫Jadi mari kita lihat formulir kita di
‫sini, dan memang, formulir ini di sini memiliki kelas bentuk.
‫Dan saya pikir itu yang kami gunakan juga
‫di index. j, benar.
‫Jadi di sini kita pada
‫dasarnya mendapatkan formulir itu menggunakan kelas formulir, dan ketika itu
‫ada, dan dikirimkan, lalu kita coba masuk, di sini.
‫Oke, dan itu tentu saja tidak benar, jadi kita harus
‫memilih formulir masuk kita dengan cara lain.
‫Jadi mari kita perbaiki dengan cepat, di sini kita memiliki
‫login, jadi mari
‫kita tambahkan kelas lain di sini, form login, dan itu agak aneh karena
‫kita sudah memiliki form login di sini,
‫tapi itu tidak benar-benar pada elemen form.
‫Jadi kita tidak boleh menggunakannya, jadi
‫mari kita buat formulir di sini dengan pengubah login, oke.
‫Jadi mari kita taruh di sini, simpan, dan sekarang ini seharusnya
‫tidak lagi terjadi, karena sekarang kita tidak
‫lagi memiliki event handler yang dilampirkan
‫ke formulir ini.
‫Jadi mari kita cepat memuat ulang
‫lagi, dan coba ini lagi, dan sekarang Anda melihat bahwa itu benar-benar
‫melakukan sesuatu, tetapi tentu saja itu tidak akan
‫pernah berhenti berputar di sini, karena kami sebenarnya tidak mengirim
‫respons apa pun kembali, dan siklus respons permintaan tidak pernah berakhir.
‫Tapi bagaimanapun, saya hanya ingin melihat badan
‫permintaan, ingat itu?
‫Dan seperti yang saya sebutkan sebelumnya, sekarang sebenarnya MT.
‫Oke, seperti yang saya katakan, ini tidak akan
‫berfungsi begitu saja, karena kita perlu menambahkan
‫middleware lain untuk mengurai data yang berasal dari formulir.
‫Jadi mari kita lakukan itu di aplikasi kita. js.
‫Tapi pertama-tama, mari kita tutup beberapa file ini di sini.
‫Baiklah, yang ini juga, dan sekarang, pergi ke aplikasi. js, mari tambahkan klausa itu ke parser
‫tubuh kita, jadi inilah
‫kita, karena sebenarnya sangat mirip.
‫Jadi aplikasi. gunakan, dan itu masih merupakan middleware bawaan
‫Express, jadi ekspres. urlencoded, oke, dan ini disebut cara
‫ini karena ingat, cara formulir
‫mengirim data ke server sebenarnya juga disebut URL yang disandikan,
‫jadi di sini, kita memerlukan middleware itu untuk mengurai data yang
‫berasal dari formulir yang dikodekan URL.
‫Kemudian kita melewati beberapa pengaturan, dan kita dapat mengatakan diperpanjang benar, dan
‫itu hanya akan memungkinkan kita untuk melewatkan beberapa
‫data yang lebih kompleks, yang dalam hal ini tidak benar-benar diperlukan, tetapi tetap
‫mari kita gunakan di
‫sini, dan kita juga dapat
‫mengatur batasnya properti seperti yang kita lakukan di parser tubuh,
‫jadi di sini, dan jadi katakanlah lagi 10 kilobyte.
‫Baiklah, jadi jika kita coba ini sekarang lagi di sini,
‫kita memang harus mendapatkan data ini, dan data ini.
‫Mari kita tambahkan lagi data yang berbeda ini di sini,
‫jadi kami yakin mereka benar-benar tidak mendapatkan pengguna saat
‫ini, tetapi sebenarnya data yang berasal dari formulir,
‫oke, dan lagi itu
‫terus berputar selamanya
‫di sini, atau sampai waktu habis, tapi
‫yang kami minati, adalah mendapatkan data baru ini sekarang di tubuh kita.
‫Bagus, jadi itu berhasil, dan sekarang kami memiliki formulir
‫HTML kami yang benar-benar terhubung ke penangan rute ini di sini.
‫Jadi sekarang kita bisa melanjutkan dan benar-benar memperbarui
‫pengguna berdasarkan data baru ini, oke.
‫Jadi, mari singkirkan ini, lalu
‫perbarui pengguna karena kita sudah tahu cara melakukannya.
‫Sekarang, pertama-tama, kita harus mengimpor model pengguna,
‫jadi mari kita lakukan itu.
‫Pengguna, di sini
‫dengan U kecil, baiklah, dan sekarang
‫katakanlah pengguna sama dengan menunggu Pengguna. findByIdAndUpdate.
‫Benar, tentu saja
‫seperti biasa, tandai yang ini sebagai asinkron, dan tangkap semua kesalahannya.
‫Sekarang baiklah, jadi apa ID yang kita cari?
‫Dan saya harap pada titik ini Anda tahu di mana
‫itu, itu akan sesuai permintaan. pengguna. Indo.
‫Oh, dan satu
‫hal penting yang perlu kita lakukan, yang
‫belum saya lakukan, adalah untuk benar-benar melindungi
‫rute ini di sini juga, oke,
‫karena hanya dengan begitu kita benar-benar meminta pengguna
‫ini, kan, dan tentu saja juga kami hanya ingin dapat
‫mengakses rute ini jika kami masuk,
‫jika tidak, siapa pun dapat melanjutkan dan memperbarui beberapa data.
‫Jadi, di rute
‫ini, mari kita tambahkan authController. melindungi.
‫Baiklah,
‫jadi itu ID-nya, lalu kita butuh data baru,
‫jadi misalkan kita ingin nama yang sama dengan request. tubuh. nama, dan email diatur ke
‫permintaan. tubuh. surel.
‫Dan ingat bahwa ini adalah
‫nama bidang, karena kami memberi mereka atribut nama dalam bentuk HTML.
‫Ingat, sekarang sebelum kami memperbarui beberapa data, kami biasa meneruskan
‫seluruh permintaan di sini ke metode pembaruan, kan, tetapi dalam
‫kasus ini, kami benar-benar hanya ingin
‫memperbarui nama dan email, dan jadi seperti ini,
‫kami yakin bahwa hal lain pada dasarnya sedang dilucuti
‫dari tubuh, karena beberapa peretas tentu saja
‫sekarang dapat melanjutkan dan menambahkan beberapa bidang tambahan ke
‫HTML dan kemudian misalnya mengirimkan
‫data seperti kata sandi dan hal-hal seperti
‫itu, dan tentu saja kami melakukannya
‫tidak ingin menyimpan data berbahaya itu ke
‫dalam database kami, kan.
‫Juga, kata sandi sekali lagi ditangani secara terpisah,
‫karena ingatlah bahwa kita tidak akan pernah bisa memperbarui
‫kata sandi menggunakan findByIdAndUpdate.
‫Sekali lagi, karena itu tidak akan menjalankan middleware aman
‫yang akan menangani enkripsi kata sandi kita.
‫Oke, dan itulah mengapa kami memiliki rute terpisah untuk
‫itu di API kami, dan juga
‫kami memiliki rute terpisah untuk itu di antarmuka pengguna kami.
‫Dan biasanya itulah yang selalu Anda lihat
‫di aplikasi web ketika Anda ingin memperbarui kata
‫sandi Anda, Anda biasanya memiliki formulir
‫terpisah hanya untuk itu, oke.
‫Bagaimanapun, sekarang mari kita lanjutkan di sini dengan opsi
‫kami, di mana kami mengatakan bahwa
‫kami ingin mendapatkan yang baru, jadi pada dasarnya dokumen yang
‫diperbarui sebagai hasilnya, dan juga bahwa kami ingin menjalankan validator.
‫Jadi ini seperti yang kami lakukan sebelumnya di API kami.
‫Hebat, jadi sebut saja updateUser.
‫Oke, dan jadi apa yang ingin kita lakukan sekarang?
‫Nah, setelah mengirimkan data di website kami, pada dasarnya
‫yang kami inginkan adalah kembali ke halaman ini
‫di sini, tetapi tentu saja dengan data
‫yang diperbarui di sini, oke.
‫Jadi itu mudah, yang harus kita lakukan pada
‫dasarnya adalah merender halaman akun lagi.
‫Jadi mirip dengan yang ini, mari kita
‫salin saja, oke, tapi sekarang
‫sebenarnya ada satu perbedaan penting, karena saat ini, kita
‫sebenarnya juga perlu
‫memasukkan pengguna, jadi pengguna yang
‫diperbarui, karena jika tidak, pengguna yang template akan
‫digunakan, apakah yang berasal dari middleware
‫pelindung, ingat, dan yang tidak
‫akan menjadi pengguna yang diperbarui.
‫Benar, jadi kita harus memasukkan user is updatedUser.
‫Baiklah, dan begitu, itu sudah cukup.
‫Jadi jika sekarang kami memuat ulang ini, atau sebenarnya jika
‫sekarang menyimpan ini di sini, maka Anda melihat bahwa kami sebenarnya kembali ke halaman yang sama
‫persis dan datanya masih sama.
‫Jadi mari kita buktikan, buka
‫halaman lain, lalu kembali ke halaman pengaturan.
‫Jadi, ini membuktikan bahwa data sekarang
‫telah diperbarui secara efektif.
‫Jadi jika sekarang kita logout, maka
‫mari kita coba login dengan email baru ini.
‫Jadi saya ingin keluar, baiklah, dan sekarang masuk lagi.
‫Jadi sekarang, kita akan menggunakan email baru ini, dan tentu saja masih
‫dengan kata sandi lama, test1234, dan
‫memang, ini adalah alamat email
‫baru yang perlu kita gunakan untuk masuk.
‫Sekarang mari kita lihat apa yang terjadi ketika kita memasukkan beberapa
‫data yang salah di sini.
‫Misalnya, Google Chrome memungkinkan kita untuk mengirimkan alamat email
‫seperti ini, tetapi tentu saja,
‫model Mongoose kita tidak mengizinkan email
‫dengan format ini.
‫Jadi kita sekarang harus mendapatkan kesalahan, dan memang,
‫kita mendapatkan kesalahan ini,
‫berikan email yang valid, tapi itu semacam pengalaman
‫pengguna yang mengerikan, benar, jadi kami baru saja mengirimkan
‫data kami, dan kemudian tiba-tiba, kami pergi ke
‫halaman yang sama sekali baru.
‫Dan sebenarnya kami melihat bahwa kami
‫juga mendapatkan URL baru ini, jadi URL tempat kami mengirimkan data.
‫Dan ya, itu agak buruk, dan seperti
‫yang saya katakan di awal,
‫cara melakukan sesuatu ini sebenarnya sedikit
‫lebih buruk untuk menangani kesalahan, yang merupakan
‫salah satu alasan mengapa saya pribadi lebih
‫suka menggunakan API yang kami sudah dibuat untuk
‫memperbarui data pengguna, dan secara umum untuk melakukan hal-hal semacam ini.
‫Baiklah, jadi mari kita
‫lakukan persis seperti itu di video berikutnya.