Halo semuanya, pada video ini kita akan belajar bagaimana membuat sebuah halaman website dapat berinteraksi dengan kita menggunakan javascript Javascript merupakan bahasa pengukuran yang memungkinkan kita melakukan hal-hal yang komplek pada sebuah halaman web misalnya menambahkan animasi, membuat map, atau misalnya sebuah halaman web datanya update terus misalnya ada angka yang selalu update counting atau bisa juga misalnya ada sebuah halaman video yang otomatis nge-crawl dan lain-lain Nah, javascript ini merupakan bahasa pengograman karena dapat digunakan untuk proses pengolahan data seperti penjumlahan, pengurangan, dan fungsi matematik lainnya Nah, untuk kali ini biar belajarnya ada goals yang jelas kita akan Hai menyelesaikan sebuah use case Hai dimana yuskesnya adalah kita membuat sebuah halaman login yang digunakan untuk menginputkan username dan password apabila username dan passwordnya benar maka akan diarahkan ke halaman landing page Apabila username dan passwordnya salah, maka halaman ini akan menampilkan informasi bahwa data yang dimasukkan tersebut salah. Hai ke langsung aja sebelum memulai kita pastikan sudah mempunyai sebuah halaman misalnya disini saya menggunakan sebuah halaman web dengan nama landingpage.html jika belum mempunyai bisa download dulu atau ngeklon dari repository ini Oke saya sudah punya halamannya ini Hai langkah pertama adalah membuat sebuah halaman dengan nama lucin.html kita klik new files kemudian ketikan login.html enter Hai dan sini langsung create files Hai non langkah berikutnya adalah membuat Hai login form kita masukkan HTML biasa langsung disini kita bisa mengganti judulnya misalnya login kemudian kita tambahkan isian login form kita masukkan dulu elemen form actionnya biarkan kosong aja dulu Hai kemudian login itu ada username ada password kemudian biasanya ada sebuah tombol login kita masukkan input biasa kita tambahkan placeholder Hai ter misalnya username kita tambahkan input lagi hai hai karena kita akan memasukkan password kita tambahkan sini password placeholder password kemudian satu lagi kita tambahkan tombol login seperti ini kita coba dulu lihat hasilnya seperti apa alamat login seperti ini masuknya kelihatan nah biar agak bagus kita bisa letakkan ini di tengah misalnya kita tambahkan disini style center Hai kemudian biar ke tengah sini kita tambahkan misalnya Margin top 200px misalnya Nah sudah di tengah Hai seperti ini untuk tampilannya username-password bisa kebawah atau seperti ini aja cukup lebih agak kelihatan disini bisa tambahkan tulisan misalnya eh Hai di sini kita tambahkan tulisan lecina Hai toh disini berarti Hai marginnya ini dihapus kita pindah ke sini Hai enggak di sini kita tambahkan misalnya pakai satu aja login tinggal diketengahkan kita tambahkan Hai kita bisa coba inspect element login ini kita tengahkan misalnya pakai teks center nabisa juga seperti itu berarti di sini kita tambahkan lagi style Hai nah terus style-nya kita coba yang pakai teknik embed nah disini tambahkan satu tambahkan teks lain center loh Hai yang udah di tengah nah biar ini juga bersih kita pindah ke bagian atas hit ini kita bahkan berarti misalnya form text atau gini aja biar karena ini sama kita teman sini aja form hai hai Hai style yang sini dibuang kan sudah ada satu form ditaruh di tengah asal to form ditaruh di tengah hai oke sudah di tengah kita coba zoom oke langkah berikutnya loginnya sudah ada tambahkan script element untuk menambahkan script element script element ini bisa digunakan untuk menambahkan javascript bisa diletakkan di atas ini tapi karena kita di tahap berikutnya adalah membutuhkan Hai dem itu adalah kau lihat di sini Oh ya kita menggunakan referensi dari MDN Mozilla developer Hai Network yang dimana lebih digunakan untuk referensi seputar HTML CSS dan JavaScript Nah kalau kita lihat di sini, di sini ada bagian JavaScript itu banyak yang harus dipelajari ya. Karena dia bahasa pemograman tentu dia mengenal variable. Seperti saya katakan tadi, karena bahasa pemograman dia bisa melakukan operasi-operasi matematik, operasi manipulasi tulisan.
Hai Rai kemudian ada struktur kontrol atau pengkondisian nanti kita juga akan pakai ini Hai kemudian ada loop atau pengulaman hai hai hai hai hai hai ada function dan seterusnya yang akan kita gunakan adalah DOM scripting DOM scripting ini digunakan untuk memanipulasi elemen dari HTML seperti pada use case kali ini kalau di langkah selanjutnya kita akan mengambil elemen tombol login input username dan input password Hai nah agar elemen ini bisa diambil Hai berarti prosesnya itu adalah HTML nya dirender dulu baru diambil elemennya oleh karena itu Hai menambahkan elemen script ini harus diletakkan setelah elemennya di render atau ditampilkan di proses HTML itu kan dari atas ke bawah menampilkan judul nampilkan ini input ini prosesnya seperti itu sehingga agar elemen ini bisa diambil kita harus meletakkan elemen scriptnya di bagian bawah script seperti ini hai hai Hai menambahkan elemen script berikutnya langkah keempat ini kita di minta untuk mengambil elemen tombologen. Nah disini ada tombologen. Untuk mengambil elemen tombologen ini langkah yang paling gampang kita bisa menggunakan ID dari elemen tersebut. Input ini belum ada ID nya kita bisa tambahkan ID sama dengan misalnya tombol.
Hai kali disininya id-nya tombol kita bisa membuat sebuah variabel Hai jika variabelnya nilainya tetap kita bisa gunakan keyword cons nama variabelnya misalnya tombol sama dengan untuk mengambil elemen ini kita gunakan perintah dokumen kemudian query selector seperti ini Hai yang diambil apa id-nya sehingga disini kita masukkan id-nya dengan cara ID itu sama seperti penggunaan CSS kita bisa manggil elemennya tapi kalau selektornya berupa elemen nantikan input ada tiga kita gunakan ID ID itu kalau di CSS pakainya pagar namanya tombol-tombolnya sudah diambil berikutnya username sama password gunakan langkah yang sama cons misalnya username untuk memudahkan misalnya karena ini objek kita tambahkan di sini bn atau button tombol gitu kemudian untuk username nya misalnya kita tambahkan TX itu text username sama dengan dokumen dot query selektor sama username juga kita tambahkan ID berarti disini kita id-nya username disini juga username berikutnya ID password kita const teic password sama dengan dokumen.query password oke sekarang elemennya sudah diambil ada elemen tombol elemen username elemen password untuk penamaan variabel ini sebetulnya bebas bisa langsung tombol kayak tadi tapi biar membedakan bahwa ini objek atau variabel asli username nya saya tambahkan disini bn untuk button tx untuk text Hai pasukan sebetulnya sama aja teks semua bedanya Hai kalau dia password ketika kita input apa yang kita tulis kelihatan Oke berikutnya buat agar objek tombolnya ketika diklik akan bereaksi kita disini tambahkan PN tombol hai hai Hai tambahkan at least event-event stand stand event listen ner ketika diklik di klik kemudian tuliskan suruh ngapain ketika diklik function nah seperti ini misalnya ketika diklik menampilkan pop hai hai Hai atau pesan Hai arlet klik berarti tombol diklik ya kita coba di-reface dulu coba klik nah klik sekarang setelah tombolnya diklik dia akan tombol button ini ketika belum ditambahkan JavaScript dia belum ada aksi apa-apanya hai hai Oke berikutnya tambahkan kode untuk mengecek username dan password Oke nah kita ini diubah karena kita enggak usah diklik username dan passwordnya dicek caranya gimana untuk ngecek itu kan if take username Oh bentar bentar sebelum dicek kita cek isinya Bagaimana kita coba mengecek isinya dengan perintah console.log tx username dot ngga ada ya, get value ngga ada coba pakai ini dulu apa yang terjadi console.log itu untuk debugging atau melihat Hai kontrol shift i nah ini konsol-konsol log itu nanti akan muncul di sini harusnya coba login Oh sorry belum di refresh Hai kosong kita coba tambahkan ah benar kita gunakan value ya Hai ini komen aja karena nggak digunakan if the X username dot value hai hai sama dengan nah ini jadi di programan itu kan kita bisa membandingkan sebuah nilai nah di javascript untuk membandingkan sebuah nilai itu menggunakan atau mengkomparasi sebuah nilai itu menggunakan sama dengannya kalau mau dicek apakah itu sama menggunakan sama dengan yang ditulis dua kali misalnya jika username nya guru ku Hai maka konsolok.com username Anda benar misalnya kita coba refresh lagi Ayo kita a nggak ada apa-apa kita coba gue roeku username anda benar Oke kita cek lagi berarti if tx password dot sama dengan passwordnya GGWP misal console.log password anda eh sorry harus pakai ptik password anda benar kita coba di refresh lagi kosong nggak ada apa-apa a nggak ada apa-apa goeroegu user name benar passwordnya masih kosong passwordnya diisi masih kosong ggwp password anda benar berarti secara logik sudah sesuai ya add got to open if username dan passwordnya benar nah ini kan di cek satu-satu kita juga bisa Hai berbagai logika ya sebetulnya kau seperti ini kan dicek satu tampilkan benar atau salah kita pakai logic lain ini kan yang diminta adalah jika Hai username dan passwordnya benar maka akan membuka halaman landing page Ayo kita ini jadikan comment hai hai dengan pendekatan yang sama jika dapet di sini Hai copy aja dan dan di javascript bisa menggunakan seperti ini jika username dan password nya benar maka hai hai Hai buka landing page caranya gimana window dot location masukkan namanya landing base.at Jadi, kalau tadi ini dicek satu-satu, jika benar akan dituliskan di konsol. Nah, sekarang jika keduanya benar, kalau salah satunya salah, ya dia akan tidak akan mengeksekusi yang ada di dalam ini. Seperti itu.
Kita coba refresh. Jika user passwordnya ngarang, ini A, A. Kita coba goerwiku. Usernya benar. passwordnya cuma A gak ada aksi apa-apa kita coba ggwp sudah berhasil karena user dan passwordnya benar maka dia akan dialihkan atau membuka landing page berikutnya jika username dan passwordnya salah maka akan menampilkan informasi username password salah tinggal jika salah berarti else console.log informasi salah user dan password anda salah username seperti ini kita refresh Oh sorry di back Hai refresh a lagi a lagi nah username dan password anda salah gue loiku username dan password anda salah karena walaupun isinya bener pasutnya salah karena kan sini nn itu artinya baik username maupun passwordnya harus benar kita coba di sini a disini ganti GG WP Hai lucin masih salah sering password salah kenapa karena tadi username nya a passwordnya ggwp jadi saya lagi n disini tanda n ini dan 22 kali itu harus membandingkan kanan dan kiri dan harus sesuai Hai nah enggak kelihatan nih kalau enggak semua orang membuka konsol lagi kan enggak kelihatan yang terjadi Nah kita bisa menggunakan informasi art ini dijadikan comment dulu saya kita ganti dengan adat username dan password Anda salah silakan dicek kembali bisa seperti ini hai hai Hai dan simpan pastikan disini kalau belum simpan itu ada tandanya nah ini ada tandanya putih simpan di-reface kalau kosong berarti saya mau pasunya salah nah username password salah oke kemudian gak betul GG WP hai hai Hai selesai sehingga channelnya adalah membuat login dan memasukkan username password Hai jika benar masuk ke landing page jika salah akan keluar informasi keluar informasinya bisa berbagai teknik ya bisa pakai art atau menampilkan di sini nah disini misalnya username sama password salah warnanya merah itu challenge buat kalian gimana tertentang Nah untuk referensinya kita bisa lihat Hai di yang ini Hai sama di javascript fundamental tadi ada variabel pengolahan teks untuk ngecek Apakah sebuah teks sama atau enggak berdasarkan inputan kemudian ada kondisi kita menggunakan FF if-else banyak ada Swiss dan seterusnya tapi di video kali ini kita cuma menyelesaikan yuskes Bagaimana penggunaan JavaScript agar webnya lebih interaktif mungkin itu terima kasih jangan lupa challenge nya