Membuat Alert Bootsrap Dengan Ajax Timer

Alert With Ajax

Membuat alert pada sebuah website sangat berguna untuk memberikan informasi atas aksi yang telah dilakukan pengguna website. Dengan sebuah alert yang terlihat menarik juga menambah daya tarik pengguna website untuk mencerna informasi yang di berikan oleh alert website.

alert yang sudah standart dari browser sudah biasa kita lihat dengan tampilan kotak dan background grey. Namun bootstrap memberikan tampilan alert lebih menarik untuk di pandang mata. Alert dari bootstrap dapat kita kombinasikan dengan ajax dan timer, yang membuat alert menjadi lebih menarik lagi.

penggunaan ajax dan timer disini adalah berfungsi untuk membuat alert muncul tanpa mereload page dan alert akan hilang dengan sendirinya tanpa harus klick tombol "X" atau close. Menarik bukan ? simak Logika programnya dibawah ini :

• Alert yang telah di bootstrap dan diletakkan pada posisi yang kita inginkan akan kita "hide" ketika page load.

• Lalu alert dengan javascript kita akan kembali membuat alert "show" ketika ajax sukses ataupun ajax error.

• Setelah semua proses berjalan timer dengan javascript akan kembali melakukan "hide" setelah beberapa saat sesuai dengan waktu yang kita inginkan, untuk standartnya saya membuat 3 detik.

Dengan logika program di atas, kita dapat membuat script seperti dibawah ini :



script diatas dapat anda simpan dengan index.php untuk melakukan demo namun pada file yang saya share ke anda terdapat pada file reg.php. Namun Script diatas belum menggunakan Javascript dan Ajax, berikut script untuk javascript dan ajax nya :


Semoga bermanfaat dan membantu anda dalam membangun website yang lebih baik lagi. Bagi yang mengalami masalah dalam penerapan diatas dapat menghubungi saya pada halaman Contact di pojok kanan bawah halaman ini, terimakasih. Silahkan anda download file lengkapnya pada link berikut ini ==>DOWNLOAD SOURCE CODE<==

Lihat juga Demo pada video dibawah ini :