‫Instruktur: Sekarang mari kita selesaikan
‫bagian fungsi login ini.
‫Dan ingat bagaimana saya mengatakan
‫bahwa dalam video ini saya ingin menerapkan
‫peringatan yang sangat bagus ketika pengguna berhasil masuk, dan
‫untuk melihatnya mari kita keluarkan pengguna untuk saat
‫ini dengan menghapus cookie secara manual.
‫Mari kita muat ulang, dan sekarang
‫tentu saja pengguna tidak boleh masuk
‫lagi, dan memang tidak.
‫Seperti yang sudah kita ketahui, itu karena
‫cookie tidak dikirim dalam permintaan.
‫Jadi ada login middleware yang kami buat
‫di video terakhir
‫tidak menempatkan objek pengguna menjadi respons. penduduk setempat, ingat
‫itu?
‫Jadi jika tidak ada, manual pengguna tidak akan di-render, dan
‫sebagai gantinya bagian ini di-render sehingga kita sekarang
‫bisa klik di sini di Log In.
‫Jadi peringatan yang saya bicarakan sebelum saya ingin itu muncul
‫di sini pada dasarnya di awal dan kemudian
‫setelah satu setengah detik
‫kami masih ingin melakukan reload itu.
‫Jadi pindah ke beranda utama.
‫Pokoknya mari kita buat
‫beberapa fungsi untuk peringatan ini di file terpisah lainnya.
‫Jadi file baru,
‫waspada. js.
‫Baiklah, tapi sekarang sebelum kita benar-benar dapat melanjutkan, kita
‫perlu berpikir sedikit
‫tentang arsitektur front-end kita di sini.
‫Kursus ini, tentu saja, bukan tentang front-end, tetapi
‫setidaknya kita perlu sedikit peduli tentangnya
‫di sini, karena
‫kita benar-benar mulai mendapatkan
‫sejumlah besar file di sini,
‫dan termasuk semuanya ke halaman
‫kami bukanlah praktik yang baik.
‫Jadi seperti
‫yang telah kita lakukan di sini.
‫Jadi ini bukan praktik yang baik.
‫Kita seharusnya hanya memiliki satu file JavaScript
‫besar yang mencakup semua kode.
‫Jadi dalam pengembangan front-end JavaScript modern,
‫kami biasanya menggunakan sesuatu yang disebut modul bundler.
‫Yang paling populer mungkin masih Webpack, tetapi
‫biasanya Webpack memberi kita banyak masalah
‫dan sangat merepotkan untuk mengaturnya.
‫Jadi sebenarnya ada anak baru yang sangat baik di blok
‫ini, bisa dikatakan, yang disebut Parcel.
‫Jadi kita akan lihat itu, lihat apakah itu sudah muncul,
‫dan memang, itu dia.
‫Sangat cepat, tanpa bundler aplikasi web konfigurasi.
‫Jadi itulah yang kami cari.
‫Cukup bundler yang tidak memerlukan konfigurasi
‫yang rumit, karena kami tidak ingin
‫membuang waktu dengan itu.
‫Baiklah, jadi mari kita lanjutkan dan menginstalnya di sini.
‫Jadi npm install dan
‫saya tidak yakin apakah itu hanya Parcel sebenarnya.
‫Jadi mari
‫kita kembali ke sini.
‫Mungkin itu Parcel. js atau sesuatu,
‫karena saya ingat terakhir kali saya
‫menginstalnya tidak langsung berfungsi, jadi mari kita periksa itu.
‫Ya, memang, itu Parcel-bundler.
‫Sekarang kami mendapat beberapa kesalahan.
‫Oke, jadi saya lupa menyimpannya sebagai ketergantungan dev.
‫Jadi kami sebenarnya menginginkannya sebagai pengembang simpanan, oke, dan
‫itu karena ini adalah alat pengembangan.
‫Sekarang masih ada yang tidak beres.
‫Biarkan saya mencobanya dengan Sudo di sini.
‫Jadi jika itu tidak berhasil dalam
‫kasus Anda, gunakan saja Sudo untuk mendapatkan izin yang tepat.
‫Baiklah, jadi mari kita lihat paket kami. json
‫dan memang ini dia, oke.
‫Sekarang jika Anda
‫menonton video ini beberapa saat setelah saya
‫merekamnya, mereka mungkin sudah beralih ke versi nomor dua
‫dan seperti yang telah kita
‫ketahui mungkin memperkenalkan beberapa perubahan yang melanggar.
‫Dan seterusnya dari titik ini jika Anda mendapatkan kesalahan yang tidak
‫Anda lihat di sini dalam
‫video, silakan lanjutkan dan instal paket ini di sini menggunakan
‫versi .
‫1, oke.
‫Jadi pada
‫dasarnya tambahkan satu seperti ini, oke.
‫Jadi ini kemudian membuat Anda mengalami kesalahan aneh ini dan
‫semoga itu juga menyelamatkan saya dari
‫banyak komentar negatif atau ulasan
‫negatif yang mengharapkan saya untuk memperbarui semua video saya setiap minggu
‫hanya karena beberapa alat diperbarui, dan tentu saja
‫itu tidak mungkin.
‫Sering kali solusi
‫termudah adalah dengan menggunakan versi yang
‫sama seperti yang saya gunakan di video, oke.
‫Bagaimanapun, sekarang untuk benar-benar menggunakan Parcel mari
‫tambahkan beberapa skrip di sini.
‫Jadi saya menambahkan satu untuk ditonton atau JavaScript.
‫Oke, dan untuk
‫itu saya menggunakan perintah Parcel watch.
‫Ini sebenarnya sudah berjalan dengan baik di luar kotak,
‫tetapi saya masih ingin mengonfigurasi sedikit, karena
‫jika tidak, itu akan menempatkan saya bundel terakhir di
‫beberapa folder yang tidak saya inginkan.
‫Jadi mari kita tentukan folder mana yang sebenarnya harus dilihat.
‫Jadi itu publik/JavaScript dan kemudian index. js, jadi itulah titik masuk kita dan
‫itulah file yang
‫akan kita buat dalam hitungan detik.
‫Oke.
‫Maka direktori keluaran juga harus menjadi
‫publik.
‫js, oke.
‫Sering kali Anda akan
‫memiliki folder yang berbeda untuk pengembangan dan
‫untuk output, tetapi dalam kasus ini karena arsitekturnya sangat
‫sederhana, saya akan meletakkan file bundel tepat di
‫tempat yang sama dengan file pengembangan.
‫Baiklah, mari kita tentukan juga file
‫output
‫dan itu harus dibundel. js, baiklah.
‫Jadi sekarang saya dapat menjalankan ini dan kemudian akan
‫melihat file ini di sini dan melihat apakah ada sesuatu yang
‫berubah atau di salah satu
‫dependensi dan kapan pun
‫itu terjadi, ia akan menggabungkan semua file
‫bersama-sama lagi ke dalam bundel ini. file js, baiklah.
‫Kemudian mari
‫kita juga menduplikasi ini, karena kita juga
‫ingin final, katakanlah versi produksi, oke.
‫Jadi yang ini kita akan menjalankan yang
‫di mana mereka benar-benar selesai, oke.
‫Jadi itu membutuhkan waktu sedikit lebih lama,
‫tetapi juga melakukan sedikit lebih banyak hal pengoptimalan, tetapi tentu
‫saja kita tidak memerlukan pengembangan.
‫Dalam pengembangan seperti biasa, kami hanya ingin itu berhasil.
‫Jadi mari kita lakukan npm
‫run watch:js, tetapi sebelum kita melakukannya, mari kita buat file
‫index. js.
‫Mari kita tutup beberapa folder ini di sini.
‫Agak terlalu membingungkan seperti ini.
‫Jadi indeks. js dan mari kita lakukan
‫konsol sederhana. log di sini untuk saat ini.
‫Halo dari Parcel,
‫baiklah.
‫Kemudian mari kita juga pergi ke
‫basis kita di sini dan kemudian kita akan benar-benar mengomentari
‫semua ini dan
‫hanya menyertakan file bundel.
‫Jadi sekali lagi, satu file yang pada dasarnya akan berisi semua
‫kode yang ada di semua file
‫lain dan semua dependensinya.
‫Jadi mari kita simpan, dan sekarang mari kita jalankan ini, lihat apa yang kita
‫dapatkan di sana.
‫Dan memang, kami mendapat file baru kami, yaitu bundel. js dan ia
‫memiliki semua kumpulan kode ini di sana,
‫oke, cukup untuk satu baris kode pada saat ini.
‫Tapi bagaimanapun mari kita reload halaman kita
‫di sini, dan halo dari Parcel.
‫Jadi itu berhasil, dan sekarang mari kita lanjutkan dan benar-benar
‫menyiapkan file ini di sini.
‫Jadi untuk menghindari kebingungan, mari kita tutup file-file ini
‫yang tidak lagi kita perlukan untuk apa
‫yang sedang kita lakukan sekarang.
‫Jadi itu banyak hal.
‫Baiklah, yang ini juga.
‫Jadi sekarang ide dasarnya adalah bahwa index. File js adalah file
‫entri kami, jadi dalam file ini
‫kami tidak bisa mendapatkan data dari antarmuka
‫pengguna dan kemudian kami mendelegasikan tindakan ke beberapa
‫fungsi yang berasal dari modul lain di sini pada dasarnya.
‫Jadi kita sekarang memiliki modul login,
‫kita memiliki modul alert, dan seperti
‫di Node.js. js sekarang
‫kita sebenarnya dapat mengekspor data dari modul-modul ini.
‫Jadi mari kita lakukan itu, dan yang ingin saya
‫ekspor adalah fungsi ini di sini.
‫Sekarang ini bekerja sedikit berbeda dari
‫bekerja dengan Node.js. js
‫karena Node.js js menggunakan sesuatu
‫yang disebut CommonJS untuk mengimplementasikan modul.
‫Saya tidak yakin
‫apakah saya menyebutkannya ketika kami pertama
‫kali berbicara tentang modul, tetapi di sini di JavaScript front-end sejak ES2015 atau
‫ES6 ada sesuatu yang disebut modul dalam JavaScript juga.
‫Sintaksnya sedikit berbeda, tetapi
‫sebenarnya cara kerjanya di belakang layar, tetapi
‫sebenarnya jika Anda memahami cara kerjanya dengan CommonJS maka
‫yang ini di sini akan sangat mirip.
‫Jadi modul ES6 menggunakan sintaks ekspor impor.
‫Jadi di sini yang perlu kita lakukan adalah mengatakan ekspor
‫dan kemudian apa pun yang ingin kita ekspor dari file
‫ini, dan hanya itu.
‫Sekarang potongan kode ini di sini kita akan
‫benar-benar menggunakannya dalam file indeks.
‫Jadi ingat bagaimana saya mengatakan bahwa file ini
‫di sini lebih untuk benar-benar mendapatkan data dari antarmuka
‫pengguna dan kemudian mendelegasikan tindakan.
‫Jadi itulah yang kami lakukan di sini, oke.
‫Jadi di sini kita hanya memiliki modul semacam
‫ini yang kemudian mengekspor fungsi login.
‫Kemudian kita dapat mengimpornya di sini dan memanggil
‫login di sini di index. js dan
‫itu berfungsi seperti ini.
‫Jadi impor alih-alih mengharuskan
‫lalu nama variabel yang ingin kita impor.
‫Jadi saya menggunakan kurung kurawal di sini.
‫Jadi itu disebut
‫login dan kemudian dari nama file.
‫Yang dalam hal ini, direktori yang sama, login.
‫Sekarang mari kita juga menonaktifkan eslint di sini lagi, dan saya
‫menggunakan kurung kurawal ini di sini, pada dasarnya karena
‫kita melakukan ekspor dengan cara ini, tetapi ada juga sesuatu
‫yang mirip dengan module. ekspor yang
‫merupakan jenis ekspor default.
‫Jadi dalam modul ES6 sebenarnya disebut ekspor default.
‫Jadi dalam hal ini kita tidak akan membutuhkan kurung kurawal ini.
‫Oke.
‫Sekarang kita perlu melakukannya seperti
‫ini, karena itu nama fungsi yang kita
‫ekspor, oke.
‫Sekarang sesuatu yang sangat penting juga dalam login ini adalah
‫kita menggunakan axios.
‫Dan ingat bagaimana saya mengatakan bahwa
‫kami akan menginstalnya sebenarnya dari npm sebagai modul npm, bukan?
‫Jadi mari kita lakukan sekarang, dan sebenarnya karena kita
‫sudah mengomentari aksioma dari sini.
‫Jadi saat ini login tidak bisa menggunakan axios.
‫Yah karena kami tidak lagi memasukkannya di sini.
‫Jadi mari kita tambahkan, buka terminal baru dan
‫instal axios ke dalam proyek kita.
‫Kemudian sekarang yang perlu kita lakukan adalah mengatakan import axios from
‫axios, dan hanya itu,
‫baiklah.
‫Jadi file ini, setidaknya untuk saat ini, sudah
‫selesai tetapi jangan ditutup karena kita
‫masih akan membutuhkannya segera.
‫Selanjutnya kita sebenarnya juga harus menginstal polyfill, yang akan membuat
‫beberapa fitur JavaScript yang lebih baru
‫juga berfungsi di browser yang lebih lama.
‫Jadi katakanlah npm install dan yang ini
‫di sini terlihat agak aneh.
‫Jadi mari kita tambahkan babel/polyfill, seperti
‫ini.
‫Kemudian sampai disini kita
‫akan
‫melakukan import seperti ini, baiklah.
‫Jadi yang ini disini kita tidak menyimpannya ke variabel apapun, karena
‫itu tidak perlu sama sekali.
‫Yang kami ingin lakukan adalah pada dasarnya dimasukkan
‫ke dalam bundel terakhir kami untuk melakukan polyfill
‫dengan baik beberapa fitur JavaScript.
‫Baiklah, dan karena itu juga mengapa ini ada
‫di baris pertama dari impor ini.
‫Bagaimanapun, sekarang mari kita impor kotak peta ini juga.
‫Untuk itu kita harus terlebih dahulu
‫membuat fungsi yang akan melakukan semua hal ini di sini.
‫Oke.
‫Jadi mari kita
‫buat
‫export displayMap, yang akan mengambil array lokasi.
‫Sehingga nantinya akan benar-benar terbaca di index. file js, baiklah.
‫Jadi sekali lagi, indeks. js lebih untuk mendapatkan
‫data dari antarmuka pengguna, jadi dari
‫situs web, dan kemudian mendelegasikan beberapa tindakan ke modul lain
‫ini, oke.
‫Jadi karena itu, hal ini di sini akan dilakukan di dalam index.
‫Mari kita lakukan di sini.
‫Kemudian impor kotak peta
‫displayMap, baiklah.
‫Jadi mari kita
‫sebut itu juga dengan lokasi.
‫Sekarang ingat kembali ketika kita benar-benar membuat peta ini dan
‫ingat bagaimana peta itu menanyakan apakah kita ingin
‫menggunakan pustaka mapbox di npm?
‫Jadi sekarang kita bisa melanjutkan dan benar-benar
‫menggunakan yang itu daripada yang ini yang kita gunakan sekarang.
‫Jadi tidak ada
‫di sini.
‫Ya, jadi yang ini.
‫Jadi ini adalah pustaka mapbox yang saat
‫ini kami gunakan, tetapi sekali lagi
‫ada juga versi npm.
‫Jadi kita tidak perlu memiliki yang satu ini.
‫Namun, untuk beberapa alasan ada
‫masalah dengan menggunakan perpustakaan ini bersama dengan Parcel, oke.
‫Jadi orang lain benar-benar mengalami masalah ini.
‫Jadi kita tidak bisa menggunakan library npm
‫mapbox bersama-sama dengan Parcel.
‫Jadi itulah alasan mengapa saya masih melakukannya seperti ini.
‫Oke.
‫Jadi mapbox dilengkapi dengan ini.
‫Ini juga tidak kita butuhkan lagi.
‫Sekarang mari kita benar-benar menyingkirkan beberapa kesalahan yang
‫kita lihat di sini.
‫Nah sekarang mereka tidak
‫lagi di sini, tetapi misalnya kami memiliki masalah
‫bahwa kode ini di sini membuat
‫beberapa kesalahan ketika kami berada di halaman yang tidak memiliki peta ini di sini, kan.
‫Karena tentu saja pada halaman detail memiliki peta ini jadi elemen
‫ini, tetapi kemudian kode ini tentu saja berjalan di
‫semua halaman lainnya, yang
‫kemudian akan membuat kesalahan di sana.
‫Jadi mari kita perbaiki itu.
‫Jadi apa yang saya lakukan di sini adalah pertama-tama
‫membuat elemen dengan ini dan kemudian menguji apakah itu benar-benar ada
‫sebelum kita mengeksekusi baris kode ini.
‫Jadi kita akan membuat beberapa elemen DOM disini.
‫Dan di sini
‫saya akan mengatakan delegasi.
‫Jadi jika mapbox
‫dan hanya kemudian ke dua tindakan ini di
‫sini, oke.
‫Ini juga kemudian mapbox dan
‫itu jauh lebih bagus.
‫Di sini mari
‫kita juga meletakkan nilai, dan
‫saya akan menempatkan keduanya karena sebenarnya kita mungkin
‫membutuhkannya atau sebenarnya kita akan membutuhkannya untuk hal-hal lain juga.
‫Jadi cara ini sedikit lebih bersih.
‫Mari tambahkan juga pendengar acara ini
‫di sini jika elemen ini ada, kan.
‫Karena yah, sekali lagi, itu akan membuat kesalahan jika tidak.
‫Jadi loginform, dan
‫jika dan
‫kemudian
‫mari kita gunakan kembali di sini, simpan, dan
‫sekarang itu terlihat lebih baik.
‫Oke.
‫Mari kita tutup terminal ini.
‫Ini Anda harus terus menggabungkan kode kita
‫setiap kali ada simpanan.
‫Mari kita simpan di sini lagi.
‫Oke, jadi saya harap itu berubah sekarang.
‫Jadi mari kita pergi ke depan dan mencobanya.
‫Jadi, jika Anda masih bisa masuk pada titik ini
‫dengan baik, itu berarti itu benar-benar berhasil.
‫Yah mungkin tidak.
‫Mari kita coba lagi di sini.
‫Baiklah, jadi ada sesuatu yang salah terjadi di sini.
‫Jadi seperti biasa, mari kita log email dan kata sandi ini
‫ke konsol di sini.
‫Maksud saya, karena kita sudah
‫tahu bahwa sebenarnya fungsi ini dipanggil, kan.
‫Jika tidak, kami bahkan tidak akan mendapatkan kesalahan.
‫Benar, karena kesalahan itu jelas berasal dari API kami.
‫Jadi semua yang kita miliki di sini benar-benar berfungsi, saya percaya.
‫Mari kita lihat konsolnya.
‫Sehingga terlihat bahwa sebenarnya tidak ada username
‫dan password.
‫Oke.
‫Saya tidak yakin mengapa demikian.
‫Mari kita lihat apakah kita benar-benar mendapatkan sesuatu.
‫Jadi login dan saya juga akan
‫mencatat ini di sini, bukan di sini
‫tapi di
‫sini.
‫Dan ternyata masalahnya
‫pasti nama pengguna dan kata
‫sandi tidak benar-benar ditentukan.
‫Oh, dan sekarang tentu saja saya bisa mengerti mengapa demikian.
‫Apa kesalahan bodoh.
‫Jadi kami mencoba membaca nilai-nilai ini di
‫sini, tepat di awal ketika halaman
‫dimuat, dan tentu saja pada titik ini nilai-nilai ini tidak ditentukan.
‫Jadi kami tentu saja hanya bisa
‫mendefinisikannya di sini di pendengar acara kami, kan.
‫Jadi pada saat fungsi ini dipanggil
‫dengan baik maka tentu saja email dan password sudah
‫diatur maka inilah saatnya kita bisa membacanya.
‫Jadi itu agak bodoh, tapi,
‫Anda tahu, terkadang hal semacam itu terjadi.
‫Sekarang mari kita salin ini di sini.
‫Kali ini kita berhasil login,
‫artinya kode kita disini masih berfungsi.
‫Bagus, jadi sekarang mari kita lakukan bagian terakhir yang
‫ingin kita lakukan
‫dalam kuliah ini, yang sebenarnya membuat peringatan ini, oke.
‫Jadi mari kita buat sebuah fungsi bernama show alert dan mengekspornya.
‫Jadi saat masuk kita akan mengimpor fungsi ini dan menggunakannya
‫di sana.
‫Jadi showAlert dan ini
‫sebagai input akan mendapatkan tipe dan pesan,
‫jadi seperti ini.
‫Dan
‫tipe ini
‫sukses atau error, oke.
‫Karena bergantung pada input ini, kami kemudian akan memiliki
‫CSS yang berbeda untuk setiap peringatan ini dan Anda
‫akan melihatnya dalam sedetik.
‫Jadi yang akan kita lakukan pada dasarnya adalah membuat beberapa
‫markup HTML di sini dan kemudian memasukkannya ke dalam HTML kita, jadi itu adalah
‫sesuatu yang sangat mudah.
‫Jadi markup dan string template dan sekarang
‫beberapa HTML yang bagus.
‫Jadi ini hanyalah sebuah div dengan kelas
‫alert dan kemudian
‫alert -- jadi pengubah dengan tipe
‫kita.
‫Oke, dan itulah mengapa
‫itu harus sukses atau salah.
‫Jadi izinkan saya menunjukkannya dengan
‫cepat di CSS, karena menurut saya sangat penting
‫untuk benar-benar mengetahui bagaimana semua ini dimainkan bersama, oke.
‫Jadi di sini kami memiliki
‫kelas peringatan kami dan kemudian peringatan sukses dan kesalahan peringatan.
‫Baiklah.
‫Seperti biasa mari kita nonaktifkan eslint di sini, oke,
‫dan singkirkan ini dan sekarang tentu saja
‫di sini ada pesan yang kita sampaikan
‫ke fungsi ini.
‫Tentu saja kita dapat
‫melanjutkan dan menggunakan ini di seluruh aplikasi, tetapi
‫dalam kasus ini kita hanya membutuhkannya di sini untuk login kita.
‫Jadi dokumen. queryselector, dan sekarang
‫di sini kita memilih elemen di
‫mana kita ingin memasukkan HTML yang baru saja kita buat.
‫Jadi itu sebenarnya tepat di
‫awal elemen body.
‫Jadi tepat di bagian atas halaman.
‫Jadi
‫isi, lalu masukkan HTML yang berdekatan, jadi yang ini di sini.
‫Jika Anda mengikuti kursus JavaScript lengkap saya,
‫maka semua ini di sini bukanlah hal baru bagi
‫Anda, oke.
‫Jadi di sini kita dapat menentukan beberapa kata kunci,
‫dan dalam hal ini kita ingin afterbegin.
‫Jadi pada dasarnya apa
‫artinya ini di dalam tubuh, tapi tepat di awal, baiklah.
‫Kemudian HTML, jadi markup,
‫yang sebenarnya ingin kita sertakan.
‫Besar.
‫Jadi ini akan membuat peringatan yang sangat
‫sederhana berdasarkan jenis dan metode, tetapi sekarang kita sebenarnya juga
‫menginginkan fungsi untuk menyembunyikan peringatan.
‫Jadi mari kita buat di sini juga, ekspor, dan
‫mungkin kita bahkan tidak membutuhkannya di luar sini,
‫tetapi tetap untuk dapat digunakan kembali, selalu merupakan ide bagus untuk
‫mengekspor semua ini.
‫Yang ini tidak perlu menerima argumen apa pun.
‫Jadi sekarang yang akan kita lakukan adalah
‫memilih elemen dengan
‫kelas alert dan kemudian menghapusnya.
‫Jadi peringatan pemilih
‫kueri.
‫Jadi nama kelasnya sama persis seperti di sini.
‫Kemudian kita perlu menggunakan trik JavaScript
‫di mana kita perlu naik satu tingkat ke elemen
‫induk dan kemudian dari sana menghapus elemen anak.
‫Jadi jika ada elemen maka
‫elemen. elemen induk. removeChild
‫dan kemudian elemen.
‫Oke.
‫Jadi sekali lagi, itu seharusnya hanya JavaScript dasar
‫atau manipulasi DOM dasar.
‫Jadi karena ini adalah kursus
‫simpul, saya tidak akan membahasnya lebih dalam.
‫Bagaimanapun, yang ingin saya lakukan di sini
‫sekarang adalah setiap kali kami
‫menampilkan peringatan, sembunyikan dulu semua peringatan yang sudah ada.
‫Jadi kami selalu
‫memastikan selalu menjalankan hideAlert.
‫Lalu akhirnya saya juga selalu ingin menyembunyikan semua peringatan setelah
‫lima detik.
‫Jadi jendela
‫setTimeout hideAlert setelah lima
‫detik.
‫Baiklah, dan sekarang mari kita impor itu di sini.
‫Tampilan peringatan itu disebut, kan?
‫Oh showAlert, dengan jenis dan pesan.
‫Jadi showAlert
‫dari
‫kanan dari itu dan seterusnya ...
‫Ya, jadi kami ingin menggunakan hak itu di tempat ini.
‫Jadi alih-alih peringatan JavaScript kami ingin
‫melakukan showAlert, baiklah, dan di
‫sini sama.
‫Kami masih perlu menentukan
‫jenisnya di
‫sini, dan itu berhasil dalam
‫kasus ini dan ini kesalahannya.
‫Kami mencapai pelengkapan otomatis.
‫Oke, itu lebih baik.
‫Jadi mari kita mengujinya.
‫Dan pertama-tama kita harus logout dengan menghapus cookie ini.
‫Muat ulang, login, dan sekarang
‫saya mengujinya
‫terlebih dahulu dengan kata sandi yang
‫salah dan ini dia.
‫Jadi email atau kata sandi yang salah tepat di peringatan kami yang bagus
‫dan Anda melihat bahwa setelah lima detik itu menghilang.
‫Tentu saja kita bisa
‫menempatkan beberapa animasi yang bagus di sana
‫dan semuanya, tapi saya pikir seperti ini sudah lebih dari cukup.
‫Jadi mari kita lihat lagi dengan
‫cepat, dan seperti itulah yang akan terlihat, tetapi
‫ketika itu benar maka tentu saja itu harus menjadi hijau.
‫Jadi ya, masuk dengan sukses dan kami
‫melihat pemuatan ulang setelah satu setengah detik
‫dan sekarang ini benar-benar berfungsi.
‫Itu otentikasi lengkap kami di front-end.
‫Itu banyak pekerjaan, tetapi jika Anda bertanya kepada saya, itu sangat berharga.
‫Sekarang satu-satunya hal yang hilang adalah
‫kita benar-benar keluar ketika kita mengklik tombol ini di sini.
‫Jadi sekarang bukan itu masalahnya
‫dan di video berikutnya mari kita perbaiki itu.