Cara Membuat Notifikasi pada Codeigniter dengan Bootstrap

Masih seputar Codeigniter sekarang saya akan membuat tutorial bagaimana membuat sebuah notifikasi  pemberitahuan atau peringatan pada codeigniter dengan memanfaatkan library session set_flashdata, mungkin ini akan berguna bagi project agan khusunya jika melakukan suatu eksekusi perintah pada controllers dan menghasilkan option berhasil atau tidak perintah tersebut maka munculah pesan tersebut. Berikut langkah2 nya.

Bahan
    - Codeigniter Framework
    - Bootstrap Framework
    - Jquery

1. Buatlah sebuah project dan aktifkan library sessions dan helper form
2. Buatlah sebuah controllers seperti script berikut.

function insert_data() {
    $kata = $this->input->post('kata');
    if($kata == null) {
        $this->session->set_flashdata('msg', 
                '<div class="alert alert-danger">
                    <h4>Oppss</h4>
                    <p>Tidak ada kata dinput.</p>
                </div>');    
        $this->load->view('welcome_message');      
    } else {    
        $this->session->set_flashdata('msg', 
                '<div class="alert alert-success">
                    <h4>Berhasil </h4>
                    <p>Anda berhasil input kata '.$kata.'.</p>
                </div>');    
        $this->load->view('welcome_message');    
    };
}

3. Buatlah sebuah views dan ketikan script berikut sebagai header.

<link rel="stylesheet" href="<?php echo base_url();?>assets/css/bootstrap.min.css">
<script src="<?php echo base_url();?>assets/js/bootstrap.min.js"></script>
<script src="<?php echo base_url();?>assets/js/jquery-1.7.1.min.js"></script>

4. lalu ketikan script berikut sebagai body.

<div id="notifications"><?php echo $this->session->flashdata('msg'); ?></div> 
<br>
<div class="col-sm-6 col-sm-offset-4">
    <form method="post" enctype="multipart/form-data" action="<?php echo base_url(); ?>index.php/welcome/insert_data" class="form-horizontal">
        <div class="form-group">
            <div class="col-sm-6">
                <input type="text" class="form-control" name="kata"/>
            </div>   
            <div class="col-sm-6">   
                <button type="submit" class="btn btn-default " >Submit</button>
            </div>
        </div>
    </form>
</div>

5. Selanjutnya ketikan scritp jquery untuk menambahkan efek motion, script tersebut bisa diedit sesuai kebutuhan.

<script>   
    $('#notifications').slideDown('slow').delay(3000).slideUp('slow');
</script>

6. Optional / pilihan mau digunakan atau tidak untuk mempercantik notifikasi yang muncul dari sebelah kanan bawah, bisa di edit sesuai selera.

#notifications {
    cursor: pointer;
    position: fixed;
    right: 0px;
    z-index: 9999;
    bottom: 0px;
    margin-bottom: 22px;
    margin-right: 15px;
    min-width: 300px; 
    max-width: 800px;  
}

7. Jika semua tahapan sudah selesai, buka browser dan jalankan project anda jika berhasil maka akan tampil seperti gambar dibawah ini.

Demo

Semoga bermanfaat