Kategori Random

Notifikasi navbar seperti di facebook dengan CodeIgniter, Bootstrap dan JQuery

Posted : 24 Agustus 2016 | 08:43:02 , Dibaca 5252 kali

Pernah memperhatikan notifkasi yang muncul pada bar menu akun facebook anda? pastinya iya dong. Notifikasi yang muncul pada bar menu selalu realtime apapun aktifitas yang dilakukan pada foto, wall pesan atau yang lainnya. Pada tutorial kali saya akan berbagi bagaimana cara membuatnya. 

Oke mari kita mulai dengan melengkapi plugin yang akan digunakan seperti JQuery, Bootstrap dan core Framework CodeIgniter dapat didownload dari laman resmi masing-masing.

Langkah 1 : Database

Karena kita ingin membuat sebuah notifikasi maka datanya harus kita tampung di database. Create database dan rancang struktur tabel seperti dibawah ini.

CREATE TABLE `t_nitifikasifb` (
  `id` int(3) NOT NULL AUTO_INCREMENT,
  `pesan` text,
  `tgl` int(10) DEFAULT NULL,
  `oleh` varchar(30) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=latin1

Langkah 2 : Controllers

Untuk langkah awalnya, karena ini kita bangun mengunakan framework codeigniter jadi kita buat controller nya terlebih dahulu berinama notifikasi.php pada controllernya script seperti dibawah :

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Notifikasi extends CI_Controller {

	/*****
     | Notifikasi Facebook Codeigniter dan Bootstrap
     | controller notifikasi
     | by g2tech
	 */
    public function __construct() {
        parent::__construct();
        $this->load->model('mnotifikasi');   //load model mnotifikasi
        $this->load->helper('form','url');  //load helper ci form dan url
    }

	public function index()
	{
	    $data['title'] = 'Notifikasi seperti difacebook CodeIgniter'; //judul title
        $data['jlhnotif'] =$this->mnotifikasi->notif_count();  //menghitung jumlah post
        $data['notifikasi'] =$this->mnotifikasi->getnotifikasi(); //menampilkan isi postingan

		$this->load->view('vnotifikasi',$data); //load view vnotifikasi

	}

    public function postkan(){
	    //ambil variabel yang dikirim jquery post
		$pesan	= addslashes($this->input->post('pesan'));
		$nama	= addslashes($this->input->post('nama'));

		$data = array(
            'oleh'     => $nama,
            'pesan'     => $pesan,
            'tgl'  => time()
        );
        $this->mnotifikasi->ginsert($data);    //menyimpan data ke database melalu model mnotifikasi pada fungsi ginsert

    }

    public function load_row(){     //fungsi load_row untuk menampilkan jlh data pada navbar secara realtime
        echo $this->mnotifikasi->notif_count(); //jumlah data akan langsung di tampilkan
    }

    public function load_data(){    //fungsi load_data untuk menampilkan isi data pada navbar secara realtime

        $data=$this->mnotifikasi->getnotifikasi();
        $no=0;foreach($data as $rdata){ $no++;
            if($no % 2==0){$strip='strip1';}
                    else{$strip='strip2';}
            echo"<li><a href=\"#\" class=\"".$strip."\">".$rdata->pesan."<br>
            <small>".$rdata->oleh." ".timeAgo($rdata->tgl)."</small>
            </a><li>";
        }
    }
}

/* End of file notifikasi.php */
/* Location: ./application/controllers/notifikasi.php */

Keterangan bisa dibaca pada script

Langkah 3 : Models

Buat model untuk mengatur query kedatabase buat dengan nama mnotifikasi.php script seperti dibawah :

<?php
class Mnotifikasi extends CI_Model {

    var $tabel = 't_nitifikasifb';

    function __construct() {
        parent::__construct();
    }
	function notif_count() {
        $this->db->from($this->tabel);
		$query = $this->db->get();
        return $query->num_rows();
	}

    function getnotifikasi() {
        $this->db->from($this->tabel);
        $this->db->order_by('id', 'DESC');

        $query = $this->db->get();

        if ($query->num_rows() >0) {
            return $query->result();
        }
    }

    function ginsert($data){
       $this->db->insert($this->tabel, $data);
       return TRUE;
    }

}
?>

Langkah 4 : Views

Untuk view kita akan bagi menjadi 3 bagian view yaitu header.php, footer.php dan vnotifikasi.php

header.php

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="FaberNainggolan">
    <title><?=$title?></title>
    <!-- Bootstrap core CSS -->
    <link href="<?=base_url()?>assets/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="<?=base_url()?>assets/css/style.css" rel="stylesheet">
  </head>

  <body>
    <!-- Static navbar -->
    <nav class="navbar navbar-inverse navbar-static-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Gogo Labs</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a href="home"><i class="glyphicon glyphicon-home"></i> Home</a></li>
            <li><a href="#"><i class="glyphicon glyphicon-th"></i> Barang</a></li>
            <li><a href="#"><i class="glyphicon glyphicon-th"></i> Combo Dinamis</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>

            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li class="active dropdown text-success" ><a href="#" class="dropdown-toggle" data-toggle="dropdown">Notifikasi Pesan <span class="badge badge-danger" id="load_row"><?=$jlhnotif?></span></a>

            <ul class="dropdown-menu" role="menu" id="load_data">
                <? $no=0; foreach($notifikasi as $rnotif){ $no++;
                    if($no % 2==0){$strip='strip1';}  //agar pesan yang tampil striped beda warna
                    else{$strip='strip2';}
                ?>
                <li><a href="#" class="<?=$strip?>">
                <?=$rnotif->pesan?>     <br>
                <small><b><?=$rnotif->oleh?> </b><?=timeAgo($rnotif->tgl)?></small>
                </a>
                </li>
                <? }?>
              </ul></li>
            <li><a href="#">Static top <span class="sr-only">(current)</span></a></li>
            <li><a href="#">Fixed top</a></li>
          </ul>
        </div>
      </div>
    </nav>  <!--/.nav-collapse -->  

pada baris class navbar kebawah terdapat query untuk menampilkan jumlah data dan isi data yang telah tersimpan di database. Setiap yang data yang disimpan didatabase akan otomatis di tampilkan pada dropdownmenu pada "id=load_data" dan "id=load_row" dimana id keduanya akan selalu update otomatis.

 

Bersambung....ke part II Notifikasi navbar seperti di facebook dengan CodeIgniter, Bootstrap dan JQuery Part II

 

 

Postingan Terkait
» Mengganti Dukungan Bahasa Pada Codeigniter 3.xx ( 13 Agu 2017 | 17:08:24 , 665 hits )
» Cetak Laporan Format Excel di Codeigniter ( 25 Jan 2017 | 06:39:12 , 1998 hits )
» Membuat Laporan PDF dengan DomPDF di CodeIgniter ( 04 Nov 2016 | 07:42:55 , 6346 hits )
» Edit dan Hapus Foto Upload Codeigniter ( 31 Okt 2016 | 08:25:06 , 8233 hits )
» Membuat Paging dan Search Bootstrap CodeIgniter ( 11 Okt 2016 | 16:26:41 , 11973 hits )