Bila kita memiliki form tambah data, kemudian user melakukan tambah data dan berhasil, bagaimana cara kita memberitahukan ke user bahwa tambah data yang dilakukannya berhasil? Mungkin sebagian dari kita akan menggunakan alert javascript dan menampilkan pesan tambah data berhasil.

Mungkin juga sebagian tidak menyukai cara tersebut karena dirasa terlalu ‘kasar’ menampilkan alert. hehehe.. Untuk mengatasi hal tersebut sebenarnya cukup mudah. Kita bisa menggunakan sedikit css, jquery dan javascript.

Skenarionya adalah ketika user berhasil menambahkan data, akan muncul div yang berisi pesan tambah data berhasil dan kemudian selang beberapa detik div tersebut akan hilang dengan sendirinya.

Berikut ini adalah cara membuat notifikasi tersebut :

Disini saya asumsikan anda telah memiliki form, tabel dan aksinya dianggap berhasil. Saya hanya akan menunjukkan cara membuat notifikasinya saja.

Step 1 : Buatlah user.php dengan kode sebagai berikut. Saya asumsikan anda telah memiliki tampilan berupa tabel dan paginasinya, serta dengan link tambah, ubah dan hapus. Dalam contoh ini saya membuat hardcode.

Step 2 : Buatlah useradd.php dengan kode sebagai berikut. Dalam contoh ini saya juga hanya membuat fake form yang aksinya tidak akan menambah ke database. Saya hanya akan mengirimkan session pesan ke user.

Step 3 : Buka kembali user.php, tambahkan kode php sebagai berikut tepat di atas element h2

Step 4 : Tambahkan css dalam element head. Pastikan display none dan position fixed, untuk yang lain silahkan atur sesuai kemauan anda.

Step 5 : Tambahkan jquery dan javascript sbb sebelum pentup element body. Javascript yang kita buat akan menambahkan effect fadeIn dan fadeOut pada pesan. Anda bisa menggantinya dengan slideDown, slideUp atau effect lain yang anda sukai.

Jalankan kembali user.php melalui browser, klik tambah dan submit form tambah, maka akan muncul notifikasi tambah data berhasil yang akan hilang sendiri setelah beberapa detik.

DEMO | DOWNLOAD

Mudah bukan membuatnya. Anda dapat memodifikasi css dan effectnya sesuai kreatifitas anda. Jangan lupa di share dan dilike ya. Terima kasih telah berkunjung ke harviacode.com