Kategori Random

Notifikasi navbar seperti di facebook dengan CodeIgniter, Bootstrap dan JQuery Part II

Posted : 24 Agustus 2016 | 08:59:38 , Dibaca 3640 kali

Oke baik mari kita lanjutkan tutorial yang belum selesai sebelumnya Notifikasi navbar seperti di facebook dengan CodeIgniter, Bootstrap dan JQuery jika belum di baca silakan dibaca pada link tersebut. Setelah kita buat views untuk header.php kita lanjut untuk footer.php dan vnotifikasi.php

footer.php

Untuk footer nya kita buat untuk include js nya yaitu jquery.js, bootstrap.js serta skrip javascript untuk meload notifikasi secara realtime dan skrip javascript untuk insert post data ke php, silakan di buat seperti dibawah ini :

<!-- jquery core -->
<script src="<?=base_url()?>assets/js/jquery.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script src="<?=base_url()?>assets/js/bootstrap.min.js"></script>
<script>
setInterval(function(){
$("#load_row").load('<?=base_url()?>notifikasi/load_row')
}, 2000); //menggunakan setinterval jumlah notifikasi akan selalu update setiap 2 detik diambil dari controller notifikasi fungsi load_row

setInterval(function(){
$("#load_data").load('<?=base_url()?>notifikasi/load_data')
}, 2000); //yang ini untuk selalu cek isi data notifikasinya sama setiap 2 detik diambil dari controller notifikasi fungsi load_data

$(document).ready(function(){
    $("#postkan").click(function(){
        var vname = $("#nama").val();
        var vpesan = $("#pesan").val();
        if(vname=='' && vpesan==''){
            alert("Nama Pesan tidak boleh kosong");
        }else if(vname=='' && vpesan!==''){
            alert("Nama tidak boleh kosong");
        }else if(vpesan=='' && vname!==''){
            alert("Pesan tidak boleh kosong");
        }else{
            $.post("<?=base_url()?>notifikasi/postkan", //url untuk menangani insert data ke database
            {
                // Data variabel yang dikirim ke server
                nama:vname,
                pesan:vpesan
            },

            function(response,status){ // Required Callback Function
                $("#sukses").html('Data disimpan : '+ response +'\n\nStatus : '+ status); //pesan berhasil ketika berhasil disimpan
                $("#form")[0].reset(); //form akan direset ketika telah berhasil di kirim
            });
        }
    });
});
</script>
</body>
</html>

vnotifikasi.php

pada vnotifikasi.php kita form untuk inputan pesan notifikasinya. Form tidak berjalan langsung ke php namun dijembatani oleh ajax yang dijabarkan pada script footer.php buat code seperti dibawah :

<? $this->load->view('header');?> <!-- header.php di includekan--> 
    <div class="container">
      <!-- Main component for a primary marketing message or call to action -->
      <div class="jumbotron">

      <form id="form" method="post">
        <h2>Selamat datang di Notifikasi </h2>
        <p>
        <input type="text" id="nama" placeholder="Isikan Nama" />
        <div id="vname"></div>
        <br>
        <textarea id="pesan" cols="50" rows="5" placeholder="Isikan Pesan" ></textarea>
        <div id="vpesan"></div>
        </p>
        <p>
          <input type="button" class="btn btn-lg btn-primary" id="postkan" value="Postkan">
        </p>
        <p>Silakan isi pesan lalu klik tombol postkan.</p>
        </form>
        <div id="sukses"></div>
      </div>

    </div> <!-- /container -->
<? $this->load->view('footer');?> <!-- footer.php di includekan -->

nah pada code diatas tidak ada kode khusus, hanya script form biasa saja. Sampai disini jika kita coba jalan seharusnya sudah berjalan.

Dan jika belum tau penempatan folder untuk masing-masing file bisa dibaca pada artikel saya sebelumnya tentang codeigniter.

Hampir lupa untuk tampilan css nya saya ada sedikit tambahkan agar badge pada navbar bisa ganti warna silakan buat file css pada folder assets/ beri nama style.css buat seperti code dibawah

style.css

body {
  min-height: 780px;
}

.navbar-static-top {
  margin-bottom: 19px;
}

.badge-danger {
  background-color: #d43f3a;
}

.badge-warning {
background-color: #d58512;
}

.badge-success {
background-color: #398439;
}

.badge-info {
background-color: #269abc;
}

.badge-inverse {
background-color: #333333;
}

.strip1 {
    background-color: #fefefe;
}

.strip2 {
    background-color: #ededed;
}

tambahan 

buat helper untuk menangani fungsi waktu posting yaitu timeAgo(), simpan pada folder application/helper dan beri nama fungsi_helper.php 

<?php  if ( ! defined('BASEPATH')) exit('No direct script access allowed'); 
function timeAgo($timestamp){
	    $time = time() - $timestamp;

	    if ($time < 60)
	    return ( $time > 1 ) ? $time . ' detik yang lalu' : 'satu detik';
	    elseif ($time < 3600) {
	    $tmp = floor($time / 60);
	    return ($tmp > 1) ? $tmp . ' menit yang lalu' : ' satu menit yang lalu';
	    }
	    elseif ($time < 86400) {
	    $tmp = floor($time / 3600);
	    return ($tmp > 1) ? $tmp . ' jam yang lalu' : ' satu jam yang lalu';
	    }
	    elseif ($time < 2592000) {
	    $tmp = floor($time / 86400);
	    return ($tmp > 1) ? $tmp . ' hari lalu' : ' satu hari lalu';
	    }
	    elseif ($time < 946080000) {
	    $tmp = floor($time / 2592000);
	    return ($tmp > 1) ? $tmp . ' bulan lalu' : ' satu bulan lalu';
	    }
	    else {
	    $tmp = floor($time / 946080000);
	    return ($tmp > 1) ? $tmp . ' years' : ' a year';
	    }
    }

dang helper tersebut saya load di config/autoload.php pada baris $autoload['helper'] = array('fungsi'); helper tersebut juga bisa diload di controller tinggal ditambahkan aja di $this->load->helper('form','url','fungsi'); jadi bisa dipilih salah satu.

dan setelah selesai kita ikuti langkah demi langkah diatas, maka akan tampil seperti berikut screnshootnya

 

Demikian tutorial kali semoga bermanfaat.

Untuk demo dan download bisa dilihat pada link dibawah

Postingan Terkait
» Edit dan Hapus Foto Upload Codeigniter ( 31 Okt 2016 | 08:25:06 , 1512 hits )
» Membuat Paging dan Search Bootstrap CodeIgniter ( 11 Okt 2016 | 16:26:41 , 3895 hits )
» Menambah Web File Menager pada CKEditor di CodeIgniter ( 15 Sep 2016 | 09:10:43 , 1255 hits )
» WYSIWYG editor menggunakan CKEditor di CodeIgniter ( 15 Sep 2016 | 03:07:03 , 1380 hits )
» Notifikasi navbar seperti di facebook dengan CodeIgniter, Bootstrap dan JQuery ( 24 Agu 2016 | 08:43:02 , 2565 hits )