CRUD dengan vue.js

pada tutorial kali ini kita akan belajar cara menampilkan data mengunakan Vue JS di framework Codeigniter, di dutorial sebelumnya kita sudah mempelajari cara Crud mengunakan Vue JS dan Codeigniter, kalian bisa lihat tutorialnya disini CRUD CODEIGNITER DAN VUE JS .

kali ini kita akan mencoba menampilkan data yang ada pada database dengan framwork codeigniter dan vue js, untuk koneksi database di codeigniter adalah :

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

$active_group = 'default';
$query_builder = TRUE;

$db['default'] = array(
    'dsn'    => '',
    'hostname' => 'localhost',
    'username' => 'root',
    'password' => 'root',
    'database' => 'civue',
    'dbdriver' => 'mysqli',
    'dbprefix' => '',
    'pconnect' => FALSE,
    'db_debug' => (ENVIRONMENT !== 'production'),
    'cache_on' => FALSE,
    'cachedir' => '',
    'char_set' => 'utf8',
    'dbcollat' => 'utf8_general_ci',
    'swap_pre' => '',
    'encrypt' => FALSE,
    'compress' => FALSE,
    'stricton' => FALSE,
    'failover' => array(),
    'save_queries' => TRUE
);
 

Silahkan sesuaikan nama database,user, dan password database dengan setingan database anda, setelah itu kita akan membuat Controller untuk memanggil model dan menampilkan di view, untuk script Controller pada function index adalah :

public function index()
    {
        $this->data['halaman']='vcrud';
        $this->load->view('_main',$this->data);
    }

pada script diatas kita akan menampilkan view terlebih dahulu, dengan nama view Vcrud, sekarang kita buat file vcrud.php dan menyimpan file tersebut di folder view codeigniter, untuk script di vcrud adalah : 

<script src="<?php echo base_url()?>assets/js/vue.min.js"></script>
<script src="<?php echo base_url()?>assets/js/axios.min.js"></script>
<script src="<?php echo base_url()?>assets/js/jquery.min.js"></script>

<div id="app">
     <table class="table is-bordered is-hoverable">
               <thead class="text-white bg-dark" >
                    <th class="text-white">ID</th>
                    <th class="text-white">Nama</th>
                    <th class="text-white">Alamat</th>
                    <th class="text-white">No HP</th>
                    <th colspan="2" class="text-center text-white">Action</th>
                </thead>
                <tbody class="table-light">
                    <tr v-for="crud in biodata" class="table-default">
                        <td>{{crud.id}}</td>
                        <td>{{crud.nama}}</td>
                        <td>{{crud.alamat}}</td>
                        <td>{{crud.nohp}}</td>
                       
                        <td><button class="btn btn-info fa fa-edit" @click="editModal = true; selectbiodata(crud)"></button></td>
                        <td><button class="btn btn-danger fa fa-trash" @click="deleteModal = true; selectbiodata(crud)"></button></td>
                    </tr>

                    <tr v-if="emptyResult">
                      <td colspan="9" rowspan="4" class="text-center h3">Tidak ada data ditemukan</td>
                  </tr>
                </tbody>
                
            </table>
</div>
<script src="<?php echo base_url();?>assets/js/app.js"></script>

Pada script diatas kita yang harus kita perhatikan adalah :

1. pertama load dulu library vue JS (<script src="<?php echo base_url()?>assets/js/vue.min.js"></script>)
2. kemudian load library Axios (<script src="<?php echo base_url()?>assets/js/axios.min.js"></script>)
3. load library jquery (<script src="<?php echo base_url()?>assets/js/jquery.min.js"></script>)
4. load script app.js (<script src="<?php echo base_url();?>assets/js/app.js"></script>) app.js merupakan script kita melakukan semua query yang berhubungan tampil data, boleh saja langsung kita buat di bawah file view yang telah kita buat sebelumnya
5. jangan lupa beri nama id view kita dengan app, karena itu merupakan pengenal di Vue nanti

sekarang kita akan membuat script untuk memanggil data dari controller, kita buat file app.js dulu kemudian script nya adalah :

var v = new Vue({
   el:'#app',
    data:{
        url:'http://localhost/civue/',
        addModal: false,
        editModal:false,
        deleteModal:false,
        biodata:[],
        search: {text: ''},
        emptyResult:false,
        newbiodata:{
            nama:'',
            alamat:'',
            nohp:''},
        pilihbiodata:{},
        formValidate:[],
        successMSG:'',
        
        //pagination
        currentPage: 0,
        rowCountPage:5,
        totalbiodata:0,
        pageRange:2
    },
     created(){
      this.tampil(); 
    },
    methods:{
         tampil(){ axios.get(this.url+"crud/tampil").then(function(response){
                 if(response.data.biodata == null){
                     v.noResult()
                    }else{
                        v.getData(response.data.biodata);
                    }
            })
        },

 }
})

itu adalah script yang akan mengarahkan kita ke controller crud dengan function tampil, pada function tampil kita buat script sebagai berikut :

public function tampil()
    {
           $query=  $this->Crud_m->tampil();
             if($query){
        
                   $result['biodata']  = $this->Crud_m->tampil();
             
          }
        echo json_encode($result);
    }

pertama kita load dulu model Crud_m, untuk pemanggilan mode bisa di load di autoload atau di bagian atas controller kita dengan script :

function __construct()
    {
        parent::__construct();
        $this->load->model('Crud_m');
        
    }

setelah itu kita coba jalankan di browser kita , dan akan menampilkan data yang ada di database, mudah kan ,selamat belajar dan Happy Coding