Membuat notifikasi pesan berhasil

Membuat notifikasi pesan berhasil

4673
11
SHARE

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

Bagikan artikel ini ya.. terima kasih

11 COMMENTS

  1. keren nih kode nya bisa do download tanpa harus di redirect dulu kemana mana, thanks yaa sukses selalu buat admin harviacode

  2. Jadi intinya ketika sudah berhasil menyimpan data, kita buat session.
    Kemudian dicek apakah ada ato tidak nya sessionnya itu, kalo ada ditampilin kalo.kagak ya nggak.
    Cmiiw

    • iya betul sekali mas defrian.. kalo menggunakan framework codeigniter ada fasilitas flash session.. mirip seperti itu..

  3. Min gimana cara bikin notif pesan kaya gini tapi kasusnya dikirim ke komputer yang berbeda ? Misalnya si user udah ngeinput dikomputernya nah pas disubmit ada notif dari komputer si admin kalo si user udah ngeinput.

  4. Min gimana cara bikin notifikasi tapi si notif nya dikirim ke komputer lain ? misalnya saat si user udah ngeinput dikomputernya sendiri terus ngesubmit, muncul notif di komputer nya si admin kalo si user udah ngisi.

    • Contoh kasusnya seperti apa ya? kalo usernya banyak, repot juga adminnya menerima notifikasi terus menerus. Lebih baik menurut saya dibuat field status saja, jadi admin bisa tahu mana user yang sudah input / update. TInggal bagaimana menampilkan notifikasi. Bila tidak ingin melakukan refresh halaman bisa menggunakan ajax, namun kelemahannya ajax bisa membebani server. Cara kedua dan paling gampang ya admin harus refresh halaman untuk melihat update field terbaru.

  5. Min gimana kalo kasusnya itu nampilin message box dari sisa hari. Misal saya mau ujian menanti 2 hari lagi. Dan saat hari ujian ada message box..
    Itu pake kodingan if gtu ya??
    Mohon bantuannya.

    • iya gan pakai if aja. if(date(‘Y-m-d’) == $tgl_ujian){ // tampilkan pesan disini }. Jadi rasanya tidak perlu pakai session seperti artikel diatas mas..

LEAVE A REPLY