‫Jonas: Selama beberapa kuliah
‫berikutnya kami akan menambahkan fungsi login ke situs web kami.
‫Dan
‫dalam kuliah ini, kita akan mulai
‫dengan menampilkan layar login untuk
‫memudahkan pengguna login.
‫Sekali lagi, saya sebenarnya ingin ini menjadi tantangan bagi
‫Anda sehingga Anda benar-benar dapat melatih beberapa keterampilan
‫yang telah Anda pelajari.
‫Yang saya ingin Anda lakukan adalah membuat rute
‫login slash.
‫Kemudian buat pengontrol, dan,
‫tentu saja, templat.
‫Dan template itu sangat mudah.
‫Ini hanya beberapa html statis dan kita tidak perlu
‫memasukkan variabel apa pun ke dalamnya.
‫Ada template untuk itu,
‫sebenarnya, di sini di folder template.
‫Jadi, itu seharusnya sangat mudah untuk Anda selesaikan.
‫Jadi jeda video ini dan kembali setelah Anda siap.
‫Oke, selamat datang kembali.
‫Saya harap Anda menyelesaikan tantangan ini dengan sukses.
‫Jadi inilah pendapat saya tentangnya.
‫Router dot get rutenya adalah
‫slash login dan
‫kemudian
‫kita menggunakan controller dot get
‫login form.
‫Jadi itu route handler yang akan saya buat selanjutnya.
‫Ekspor dot get login form response dan di
‫sini
‫kita tidak membutuhkan lebih dari
‫sekedar request dan response.
‫Sebenarnya di atas sini saya melihat
‫bahwa kita kehilangan yang berikutnya.
‫Selalu, ketika kita memiliki fungsi async yang dibungkus dengan
‫catchAsync, kita harus selalu menentukan selanjutnya.
‫Tapi di sini, yang
‫perlu kita lakukan sekarang adalah membuat template login.
‫Jadi kami belum membuat template itu.
‫Tapi, itu akan disebut login.
‫Jadi, misalkan res dot status
‫200,
‫render template
‫yang disebut login.
‫Kemudian seperti semua halaman kami
‫yang lain, kami sebenarnya ingin memberinya judul khusus.
‫Untuk itu kita selalu melewati sebuah
‫objek dengan property title.
‫Benar?
‫Jadi template dasar kemudian akan membaca judul itu
‫dan meletakkannya di elemen html judul.
‫Dalam hal
‫ini, judulnya cukup masuk ke akun Anda.
‫Dan itu saja untuk pengendali rute.
‫Sekarang mari
‫kita pergi, buka template login,
‫pilih semua, salin
‫semua, tutup dan buat tampilan baru di sini.
‫Panggil, tentu saja, login dot pug.
‫Kemudian, tempel kode itu di
‫sini, dan sekarang muncul lagi trik di mana kita memperluas
‫template dasar kita.
‫Yang ini meluas ke ekstensi file dasar jangan lupa bahwa di sini kita perlu
‫membuat blok dengan nama yang sama
‫persis seperti yang kita miliki di file dasar.
‫Jadi itu adalah konten.
‫Dan dengan ini kita benar-benar selesai, saya
‫percaya.
‫Tentu saja, kita perlu membuat indentasi untuk membuatnya menjadi anak
‫dari blok ini.
‫Tapi, itu sebenarnya.
‫Sekarang, satu hal lagi yang
‫perlu kita lakukan adalah benar-benar mengatur tautan ke
‫halaman login sehingga kita benar-benar dapat mengaksesnya.
‫Saat ini, tombol masuk dan daftar sebenarnya
‫menggunakan elemen tombol.
‫Tapi seperti ini, kita tidak bisa
‫benar-benar menentukan atribut href.
‫Jadi mari kita ubah mereka menjadi tautan nyata.
‫Dan di sini, kita dapat menentukan href.
‫Jadi yang ini hanya menunjuk untuk login.
‫Dan yang kedua
‫di sini, pendaftaran sebenarnya tidak akan
‫kami terapkan sehingga Anda dapat
‫menerapkannya sendiri jika Anda mau.
‫Jadi pada dasarnya formulir pendaftaran.
‫Tapi, karena semua
‫itu, jadi seluruh proses mendaftar akan sangat mirip dengan
‫masuk, saya memutuskan untuk tidak
‫memasukkannya di sini di bagian ini karena itu
‫hanya akan banyak duplikat konten dan saya
‫tidak mau membuat kursus yang tidak perlu panjang.
‫Berikan ini brankas, saya tidak
‫tahu apakah ini sekarang me-restart server, sebenarnya tidak,
‫jadi mari
‫simpan salah satu file skrip java ini.
‫Sekarang
‫ini adalah situs referensi kami.
‫Ingat, itulah yang kita inginkan, apakah
‫yang ini.
‫Ayo datang ke semua
‫tur dan sekarang mari kita coba rute login kita.
‫Dan, memang, inilah formulir kami.
‫Besar.
‫Nah disini kita bisa
‫memasukkan beberapa
‫email misalkan admin dot naders dot
‫io.
‫Dan Anda melihatnya dengan
‫baik memformat input ini di sini apakah alamat
‫email itu benar-benar valid atau tidak.
‫Misalnya, jika saya tidak memiliki ekstensi yang benar di sini, maka
‫akan menjadi oranye yang memberi
‫tahu saya bahwa ada sesuatu yang salah.
‫Dan hal yang sama untuk kata sandi.
‫Selama saya memiliki kurang dari delapan karakter, ini
‫akan selalu berwarna merah, pada
‫dasarnya memberi tahu saya bahwa ada kesalahan.
‫Bahwa sekarang saya memiliki delapan
‫karakter, berubah menjadi hijau.
‫Dan jika Anda tertarik dengan cara
‫melakukan keajaiban semacam ini dengan
‫css, silakan periksa file css yang saya kodekan hanya
‫untuk kursus ini.
‫Bagaimanapun, tentu saja, mengklik tombol ini
‫di sini sekarang benar-benar melakukan apa saja, bukan?
‫Jadi di video berikutnya, kita sebenarnya
‫akan benar-benar mulai mengimplementasikan fungsi login sebenarnya dengan
‫melakukan permintaan ke titik akhir api yang sudah
‫kita buat.