Membuat Alert Box (pesan dengan pop up)

Masih berkutat dengan dunia web, kali ini mencoba membuat alert box, satu perintah kecil untuk memberi komentar ketika kita melakukan eksekusi.

Alert box biasa digunakan untuk memberi keterangan atas suatu inputan. Jika inputan yang dimasukkan tidak sesuuai dengan yang disyaratkan, maka akan muncul window kecil yang menampilkan peringatan tertentu.

Untuk menampilkan alert box dengan cara yang sangat simple bisa menggunakan perintah dalam bentuk java script. Javascript tinggal dimasukkan dalam kombinasi tag php atau html maka alert box bisa dijalankan.

Beberapa contoh pengunaan alert box:

Alert box dari button

Pada baris kode ini akan menampilkan alertbox ketika melakukan klik pada button. Perintah untuk menampilkan alert box terletak pada baris onclick="alert('pesan')".

Alertbox dari hyperlink

Prinsip dari alertbox yang ini sama dengan alert box dengan button, namun disini alert box dipasangkan pada suatu link, yang biasanya digunakan untuk memberitahukan proses yang dilakukan.

Konsep penulisan hyperlink yang digunakan sama dengan hyperlink pada umumnya, namun yang membedakan adalah penambahan aksi pada perintah onclick, nah aksi yang dieksekusi pada perintah onclick adalah kode javascript dengan fungsi untuk menampilkan alertbox.

Alert box dua opsi

Dalam pembuatan alert box terkadang kita dihadapkan pada permasalahan untuk menampilkan alert box dengan dua opsi yang berbeda. Untuk mendapatkan ilmu yang satu ini sempat agak mumet juga cari kata kunci buat googling. Tapi ndilalah bisa ketemu juga. Sedikit berbeda dengan alert box yang sebelumnya, untuk pesan yang diatas menggunakan perintah alert sedangkan untuk yang ini menggunakan perintah confirm.

Dari hasil eksekusi script diatas adalah?

Untuk menghasilkan alert box dengan 2 option yang bisa berjalan dengan sempurna maka digunakan fungsi if, dimana fungsi tersebut berguna untuk melakukan eksekusi terhadap opsi yang dipilih. Pada kasus ini, confirm digunakan untuk menampilkan pilihan ok dan cancel. Sedangkan eksekusi yang dilakukan jika memilih opsi ok akan merujuk pada perintah if, eksekusi dilakukan dengan menampilkan alert box baru, sedangkan perintah window.location digunakan untuk memberikan alamat link yang dituju. Sedangkan else mewakili option cancel dengan hasil eksekusi akan tetap berada pada halaman semula setelah melalui alert box.

Yang mau sukses tentu ga lupa mencobanya. Good Luck

download bentuk pdf