‫Instruktur: Dalam
‫video ini, kita akan membuat halaman akun pengguna
‫sebagian besar menggunakan konsep yang sudah kita ketahui
‫dan sudah digunakan sebelumnya.
‫Dan mari kita mulai dengan melihat
‫apa yang sebenarnya saya maksud dengan halaman akun pengguna di
‫situs referensi kami jadi di sini di natours. pengembang
‫Jadi kami sudah merender menu ini di
‫sini di
‫situs web kami, tetapi ketika kami mengklik pengguna ini,
‫kami mendapatkan akses ke halaman akun pengguna.
‫Jadi di sini, kita dapat mengubah beberapa pengaturan
‫dasar, juga mengunggah foto baru, tetapi
‫yang ini sebenarnya akan
‫kita lakukan di
‫bagian berikutnya, dan pengguna juga dapat memperbarui kata sandinya di halaman ini.
‫Kemudian, di sisi kiri ada beberapa item menu,
‫yang sebenarnya tidak akan kami
‫implementasikan sehingga kami hanya akan mengimplementasikan
‫menu, tetapi tidak benar-benar halaman yang mereka tunjuk,
‫dan kemudian jika pengguna adalah administrator, kami
‫juga merender bagian ini ke bawah. di sini.
‫Oke, jadi inilah yang akan kita bangun dalam kuliah
‫ini, dan dalam beberapa
‫kuliah berikutnya kita akan benar-benar memperbarui pengaturannya.
‫Jadi, pada dasarnya membuat tombol-tombol ini berfungsi di sini.
‫Baiklah?
‫Tapi untuk saat ini, itu hanya merender halaman ini di sini
‫di this . saya URL.
‫Oke?
‫Jadi, mari kita mulai dengan template pug.
‫Baiklah, dan seperti biasa,
‫saya sudah memiliki template akun ini di sini.
‫Jadi mari kita ambil itu, salin,
‫lalu buat tampilan baru di sini, yang
‫saya sebut akun.
‫Dan sekarang kami ingin memperluas
‫basis dan kami ingin membuat blok yang disebut konten seperti biasa.
‫Dan di sinilah kami benar-benar menempelkan konten kami.
‫Baiklah?
‫Sekarang kita perlu membuat
‫indentasi semua ini untuk membuatnya di dalam blok.
‫Hebat, jadi, pertama-tama kita memiliki navigasi, kan?
‫Jadi pengaturan, pemesanan, ulasan, dan tagihan
‫yang kami lihat ada di
‫sisi kiri halaman, dan kami juga memiliki navigasi Admin, bukan?
‫Dan mereka sudah melihat banyak kode duplikat di sini.
‫Jadi pada dasarnya elemen daftar item di
‫sini, mereka muncul sebenarnya delapan kali.
‫Jadi empat kali di atas sini dan empat kali di bawah sini
‫jadi mari kita dengan cepat membuat mixin untuk
‫membuat kode kita terlihat sedikit lebih bersih.
‫Baiklah, jadi saya akan
‫melanjutkan dan benar-benar menyalin salah satunya.
‫Dan kemudian buat mixin baru bernama navItem.
‫Oke, jadi kami melakukan itu sebelumnya.
‫Jadi ini sangat mirip.
‫Jadi apa yang perlu kita masukkan
‫ke dalam mixin ini untuk menyesuaikan setiap item pada dasarnya?
‫Nah, yang akan berubah adalah tautannya.
‫Juga teks, jadi pengaturan, pemesanan, dan lain-lain.
‫Jadi itu teks.
‫Kemudian ikonnya juga akan berubah, dan
‫akhirnya Anda melihat bahwa
‫yang pertama ini memiliki kelas side-nav--active, bukan?
‫Jadi kami juga akan menentukan aktif seperti di sini pada dasarnya.
‫Dan kemudian ketika kita ingin menandai sebuah item
‫sebagai aktif, kita cukup melewati sini.
‫Oke?
‫Jadi sekarang kita perlu memperbaiki lekukan di sini.
‫Dan kemudian berikan data kami.
‫Berikutnya adalah teks.
‫Jadi ini, tentu saja pada
‫titik ini, bukanlah hal baru jadi saya melakukannya dengan cukup cepat di sini, bukan?
‫Jadi icon lalu nama icon yang kita lewati.
‫Jadi seperti yang kita lakukan
‫sebelumnya, dan akhirnya aktif
‫di sini, ingat, akan benar atau salah.
‫Dan jika benar maka kita ingin menambahkan kelas ini.
‫Jadi mari kita salin.
‫Dan kemudian di sini mari kita tentukan atribut kelas.
‫Dan kemudian seperti yang kita
‫lakukan, mari kita lakukan turnery statement di sini.
‫Jadi katakanlah jika aktif, pada dasarnya, maka di
‫sini kita ingin memiliki side-nav--active.
‫Dan jika tidak maka kita tidak menginginkan apa-apa.
‫Jadi nama kelas kosong, pada dasarnya.
‫Baiklah.
‫Jadi sekarang kita bisa mengganti ini dengan mixin kita.
‫Jadi itu disebut navItem, dan jadi ingat, kita
‫menulis + dan kemudian navItem.
‫Jadi di sini tautannya adalah tautan kosong.
‫Dan sebenarnya untuk mereka semua untuk saat ini.
‫Kemudian
‫Pengaturan, lalu
‫nama ikon yang juga pengaturan, tetapi
‫dalam huruf kecil.
‫Dan akhirnya yang ini benar-benar aktif, jadi
‫kami memasukkan true.
‫Baiklah, mari kita duplikat.
‫Miliki tas kerja dan kami memiliki Pemesanan Saya.
‫Mari kita buat huruf kecil itu.
‫Baiklah, duplikat dua kali lagi.
‫Jadi di sini
‫kita memiliki bintang dan
‫kemudian di sini kartu kredit untuk penagihan.
‫Baiklah.
‫Dan sekarang kita memiliki navigasi admin.
‫Dan yang ini hanya
‫akan terlihat jika pengguna saat ini adalah administrator.
‫Jadi, mari kita definisikan itu menggunakan pernyataan if.
‫Jadi di sini kita perlu menguji apakah peran
‫pengguna sama dengan admin, bukan?
‫Dan itu,
‫sekali lagi, salah satu dari pernyataan if yang
‫lebih kompleks dan jadi kita harus menggunakan JavaScript untuk itu.
‫Jadi saya menggunakan kode unbuffered di sini lagi.
‫Dan kemudian jika
‫dan kita akan memiliki akses ke variabel pengguna di sini.
‫Jadi seperti yang kami lakukan di template lain.
‫Jadi pada dasarnya kita akan menyebarkannya ke sini.
‫Dan tentu saja, pengguna memiliki atribut role, jadi
‫kami menguji apakah itu admin.
‫Dan jika sudah maka kita ingin menampilkan semua ini.
‫Jadi sekarang perlu satu tingkat menjorok.
‫Oke?
‫Dan tentu saja sekarang kami ingin mengganti
‫semua ini di sini dengan mixin kami juga.
‫Jadi empat kali.
‫Yang ini disebut peta.
‫Kelola tur.
‫Yang ini adalah Kelola pengguna.
‫Kelola ulasan.
‫Dan akhirnya kita punya satu dengan koper.
‫Dan yang ini tidak memiliki teks di sini,
‫tetapi ini adalah Kelola pemesanan.
‫Baiklah.
‫Jadi mari kita singkirkan itu dan lanjutkan pekerjaan kita di sini.
‫Jadi yang ini di sini
‫akan menjadi formulir untuk mengubah pengaturan pengguna.
‫Dan data pribadi akan berada di sini dalam nilai-nilai ini, oke?
‫Jadi pada dasarnya dalam elemen input HTML, nilainya adalah jenis
‫teks yang telah ditentukan sebelumnya yang
‫dapat kita masukkan ke dalam elemen input.
‫Dan biasanya apa yang kita masukkan
‫di sana adalah nilai saat ini dari input itu,
‫jadi dari bidang itu.
‫Dan sekarang, itu tentu saja nama pengguna.
‫Jadi mari kita taruh itu di sini.
‫Pengguna. nama.
‫Dan kemudian di sini tentu
‫saja email.
‫Dan di sini kita juga memiliki gambar pengguna.
‫Jadi pengguna garis miring gambar memangkas nama gambar itu sendiri.
‫Oke.
‫Lalu di bawah sini tidak ada yang bisa dilakukan.
‫Baiklah?
‫Dan sebenarnya hanya itu.
‫Jadi itu benar-benar semua data yang
‫berasal dari objek pengguna yang
‫harus kita masukkan.
‫Oke, itu dia templatenya.
‫Sekarang mari kita lanjutkan dan tambahkan rute ke viewRouter.
‫Jadi di sini, dan yang ini akan dipanggil /me.
‫Jadi kita akan memiliki pengontrol bernama getAccount.
‫Nah, yang ini,
‫tentu saja, akan menjadi rute yang dilindungi, bukan?
‫Karena hanya jika kita benar-benar login
‫maka kita akan mendapatkan akses ke halaman ini.
‫Jadi kita perlu menggunakan middleware pelindung kita di sini.
‫Jadi itu adalah authController. melindungi.
‫Oke?
‫Jadi seperti yang kami lakukan dengan semua atau rute yang dilindungi lainnya.
‫Sekarang satu masalah yang saya lihat
‫dengan ini adalah bahwa melindungi
‫middleware di sini sangat mirip dengan isLoggedIn.
‫Jadi kami benar-benar akan melakukan beberapa operasi duplikat di
‫sana, yang tidak ideal.
‫Karena ingat bahwa isLoggedIn ini
‫akan berjalan untuk semua permintaan, bukan?
‫Jadi mari kita cepat melihat ini sehingga
‫saya dapat membuat poin saya.
‫Jadi dalam melindungi kita mendapatkan pengguna saat ini di sini.
‫Jadi kami memiliki findById ini di sini.
‫Tapi kami melakukan
‫hal yang sama di sini saat login, oke?
‫Jadi dengan menggunakan isLoggedIn dan melindungi pada saat yang sama, kami akan melakukan
‫kueri ini dua kali.
‫Dan itu tentu saja tidak ideal.
‫Jadi mari kita letakkan isLoggedIn di sini hanya
‫di bawah rute yang tidak dilindungi, oke?
‫Karena pada
‫jalur terproteksi ini pemeriksaan apakah
‫pengguna sudah login akan benar-benar terjadi juga, kan?
‫Tapi tidak di middleware ini,
‫tapi kemudian di
‫protect middleware karena pada dasarnya memeriksa itu juga, kan?
‫Jadi mari kita potong dari sini dan cukup tempel
‫di rute lain yang tidak dilindungi.
‫Oke, masuk akal?
‫Jadi seperti ini kami tidak memiliki masalah ini
‫pada dasarnya melakukan permintaan yang sama persis dua kali
‫di semua middlewares yang dilindungi.
‫Dan itu sedikit lebih baik untuk kinerja kami.
‫Sekarang satu hal yang kami lakukan di isLoggedIn
‫yang saat ini tidak kami
‫lakukan di lindungi adalah ini di sini.
‫Jadi kami menempatkan pengguna saat ini pada respons. penduduk setempat.
‫Jadi mari kita lakukan
‫hal yang sama sekarang di currentUser.
‫Jadi mari kita lakukan hal yang sama di sini di middleware protect.
‫Jadi Anda menempatkan currentUser keduanya berdasarkan permintaan. pengguna dan pada
‫respon. penduduk setempat, oke?
‫Sehingga kita dapat menggunakannya
‫secara otomatis di semua template setelahnya.
‫Jadi dalam hal ini, dalam template akun kita, oke?
‫Jadi, simpanlah.
‫Dan sekarang kita perlu menambahkan pengontrol getAccount ini untuk,
‫tentu saja, memperbaiki kesalahan yang kita dapatkan
‫saat ini.
‫Jadi itu di viewsController,. permintaan dan tanggapan getAccount.
‫Dan Anda akan melihat sebentar lagi mengapa kita hanya membutuhkan keduanya.
‫Jadi untuk mendapatkan halaman akun, yang perlu kita lakukan
‫hanyalah merender halaman itu.
‫Kami bahkan tidak perlu menanyakan pengguna saat ini
‫karena itu sudah dilakukan di
‫middleware pelindung, bukan?
‫Dan yang benar-benar perlu kita lakukan adalah
‫melakukan sesuatu seperti ini.
‫Jadi salin kode ini, lalu
‫di sini akun.
‫Dan beri judul akun Anda.
‫Baiklah, jadi itu membuat kesalahan itu hilang.
‫Dan sekarang sebagai bagian terakhir dari teka-teki, mari tambahkan tautan
‫yang benar, sebenarnya, di header.
‫Jadi di sini, di header kami sekarang, tautannya
‫tidak mengarah ke halaman akun ini, bukan?
‫Jadi itu menunjuk ke mana-mana.
‫Dan sekarang seharusnya menunjuk ke /me.
‫Oke, dan itu harus
‫menjadi bagian terakhir untuk benar-benar membuatnya bekerja.
‫Jadi mari masuk ke sini
‫sekarang dengan uji satu, dua, tiga, empat.
‫Kami berhasil login.
‫Dan sekarang setelah mengklik di sini kita mendapatkan halaman kita.
‫Fantastis.
‫Sekarang ada satu kesalahan di sini dengan foto Pengguna.
‫Jadi mari kita perbaiki itu.
‫Tapi selain itu, sebenarnya semuanya berfungsi dengan baik.
‫Kami juga mendapatkan menu ini di sini karena kami sedang dalam
‫admin dan jadi mari kita uji itu juga dalam sedetik untuk melihat
‫apakah itu menghilang untuk pengguna lain.
‫Dan sebenarnya kami juga mendapatkan kesalahan ini
‫di sini karena kami memiliki permintaan gambar yang gagal.
‫Jadi kita sudah melihat bahwa kita mungkin melakukan sesuatu
‫yang salah di sana.
‫Jadi di sini,
‫di gambar, tentu saja, itu bukan pengguna. nama, itu adalah pengguna. foto.
‫Jadi simpan itu, muat ulang di sini.
‫Dan sekarang memang, di sana kita pergi.
‫Baiklah?
‫Jadi sekarang mari kita logout, lihat apa yang terjadi kemudian.
‫Dan kemudian kita mendapatkan kesalahan semacam ini.
‫Dan itu pada dasarnya karena kami
‫mencoba mengakses rute yang dilindungi ini saat tidak masuk.
‫Baiklah?
‫Jadi mari kita coba lagi sekarang.
‫Jadi jika kami mencoba masuk
‫dengan /me, maka kami mendapatkan Anda tidak masuk, oke?
‫Dan sebelum kami mendapatkan kesalahan yang tampak aneh
‫karena kami sebenarnya sedang dalam pengembangan.
‫Tetapi dalam produksi, tentu saja, kami tidak akan melihat kesalahan aneh
‫yang kami lihat sebelumnya.
‫Benar?
‫Tapi apa
‫yang kita lihat sekarang, tentu saja, rute kita benar-benar terlindungi.
‫Jadi kita tidak bisa mengaksesnya jika kita tidak login.
‫Sekarang hanya untuk menyelesaikan, mari kita benar-benar masuk dengan beberapa
‫akun lain hanya
‫untuk melihat apakah bagian administrator juga berfungsi.
‫Jadi mari, sekali lagi, gunakan Laura di sini.
‫Dan Anda melihat bahwa dia hanyalah pengguna biasa.
‫Baiklah.
‫Dan sekarang
‫kita mendapatkan user account-nya, tanpa menu admin tentunya.
‫Oke, sempurna.
‫Jadi itu adalah membangun halaman akun.
‫Dan seperti yang saya katakan sebelumnya,
‫di video berikutnya, kami akan benar-benar
‫memperbarui pengaturan akun ini.