Cara Membuat CRUD Codeigniter : Menampilkan Data

Oleh Sugrahaku 25 September 2016 1 Komentar

Codeigniter adalah salah satu framework php yang sangat populer, dimana codeigniter sudah banyak digunakan oleh para programmer untuk membangun sebuah sistem atau website. Terlepas dari itu seorang programmer harus bisa membuat perintah dasar seperti Create, Read, Update, dan Delete yang sering disebut dengan CRUD. Fungsi ini berguna untuk menambahkan, melihat, mengubah ataupun menghapus suatu data yang terdapat dalam suatu sistem. Coba bayangkan, jika sebuah sistem atau website tidak memiliki fungsi ini, apakah itu bisa dinamakan dengan sistem? sistem yang tidak dapat dilihat, diubah, dihapus, ataupun ditambah, mungkin sistem ini setingkat dengan dewa. Oleh sebab itu, untuk membuat sebuah sistem kita harus memahami tentang CRUD khususnya dengan codeigniter. Pada kesempatan kali ini saya akan membahas tentang membuat CRUD Codeigniter, akan tetapi dibatasi untuk masalah bagaimana menampilkan data yang terdapat dalam database.

Persiapan Membuat CRUD Codeigniter

Ada beberapa hal yang harus dipersiapkan terlebih dahulu sebelum kita melanjutkan tutorial cara membuat crud codeigniter bagian menampilkan data ini. Adapun yang harus dipersiapkan adalah sebagai berikut.

1. Yang pasti sudah menginstall xampp.
2. Sudah memahami tentang codeigniter dan bisa menjalankannya.
3. Sudah membaca artikel saya sebelumnya tentang Cara Gampang Menghilangkan index.php pada Codeigniter dan Cara Cepat Membuat Login dengan Codeigniter

Poin diatas adalah persiapan penting untuk melanjutkan tutorial ini. Lalu pada poin ke-3 saya sangat menekankan untuk membaca tutorial tersebut, karena pembahasan kali ini sangat terkait dengan apa yang sudah saya jelaskan sebelumnya. Kalau kita membuat tutorial ini dari awal tanpa mengikuti tutorial sebelumnya, maka kita harus mengatur config, autoload, database, dan routes seperti pada tutorial Cara Cepat Membuat Login dengan Codeigniter. Oleh karena itu saya buat demikian karena jika diulang dari awal menulis kembali akan sangat banyak pengulangan yang tak berarti, jadi mohon untuk dimengerti.

Membuat Dummy Data pada Database Codeigniter

Nah, selanjutnya yaitu kita mempersiapkan dummy datanya terlebih dahulu, kita akan menggunakan database sama seperti tutorial sebelumnya tentang cara membuat login dengan codeigniter. Kita jalankan dulu xampp, dan aktifkan fungsi apache dan phpmyadmin, kemudan buka browser dan tuliskan localhost/phpmyadmin setelah itu, pilih database login, seperti sudah kita buat sebelumnya, lalu pilih tab SQL dan paste-kan script dibawah ini dan klik GO.

--
-- Database: `login`
--

-- --------------------------------------------------------

--
-- Table structure for table `orang`
--

CREATE TABLE IF NOT EXISTS `orang` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nama` varchar(50) NOT NULL,
  `alamat` text NOT NULL,
  `pekerjaan` varchar(50) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;

--
-- Dumping data for table `orang`
--

INSERT INTO `orang` (`id`, `nama`, `alamat`, `pekerjaan`) VALUES
(1, 'Ramanda', 'Jalan Apa', 'Halal'),
(2, 'Sugraha', 'Jalan Siapa', 'Web Programmer');

Maka hasilnya akan menjadi seperti berikut ini.

Mempercantik Codeigniter dengan Bootstrap dan jQuery

Kemudian yang selanjutnya saya akan memberikan sedikit bumbu agar tampilan pada tutorial kali ini sedikit lebih menarik, saya akan meminta bantuan bootstrap. Sudah tahu bootstrap? ituloh yang sebuah framework juga yang banyak digunakan programmer untuk mempercantik dan mempermudah dalam membangun sistem. Pertama-tama download dulu bootstrap-nya disini (Klik Disini). Kemudian pada root directory buat folder dengan nama "assets" tanpa tanda petik, buka folder tersebut lalu extract folder css, js, dan font dari file bootstrap yang tadi sudah kita download. Maka hasilnya akan menjadi seperti berikut ini.

Jika bootstrap sudah dimasukkan, sekarang kita download jQuery klik disini pilih yang compressed saja biar file size-nya lebih kecil. Setelah di download, copy jQuery yang di download tadi dan paste di folder js yang terdapat di assets/js seperti gambar berikut ini.

Cara Menampilkan Data Dari Database Dengan CodeIgniter

Setelah semua yang disebutkan diatas sudah dipersiapkan, sekarang saatnya kita mulai untuk membuat CRUD Codeigniter bagian menampilkan data. Karena pada Codeigniter menggunakan OOP, maka ada beberapa hal yang harus kita lakukan dalam hal ini. Berikut adalah langkah-langkah dalam menampilkan data dari database dengan Codeigniter.

Model

Sekarang bukalah folder application/model, kemudian buatlah sebuah file dengan nama "Model_admin.php" (Ingat perhatikan Huruf kapital). Kemudian buka file tersebut dengan script dibawah ini, lalu save.

<?php  if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Model_admin extends CI_Model{
    function __construct(){
        parent::__construct();
    }
    function orang(){
        $query = $this->db->get('orang');
        return $query->result_array();
    }
}

Model_admin diatas memiliki fungsi orang(), yaitu mengambil isi atau data yang terdapat pada tabel "orang" dari database.

Controller

Setelah membuat model, kita harus membuat controller untuk fungsi menampilkan. Cara dengan membuka folder "application/controller" kemudian buka file "Admin.php" yang sudah kita buat kemarin, lalu ganti isinya menjadi seperti berikut ini.

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Admin extends CI_Controller{
 function __construct(){
  parent::__construct();
  $this->load->model('model_admin');
  $session = $this->session->userdata('login'); 
        if($session != 'login'){
            $this->load->view('view_login');
        }else{
            redirect('admin');
        }
 }
 function index(){
  $data=array(
   'data' => $this->model_admin->orang()
  );
  $this->load->view('view_admin',$data);
 }
}

Agak sedikit ada perubahan dengan yang kita buat kemarin, tetapi akan saya jelaskan.

$this->load->model('model_admin');

Seperti yang kita tahu bahwa fungsi ini digunakan untuk memanggil model_admin, jadi kita dapat menggunakan fungsi yang terdapat pada model tersebut.

$session = $this->session->userdata('login'); 
if($session != 'login'){
    $this->load->view('view_login');
}

Kemudian fungsi ini digunakan untuk melakukan cek, apakah pengguna sudah login atau belum ketika memasuki sistem yang sudah kita buat. Jika pengguna ingin masuk tanpa login, maka ia akan di lempar ke halaman login.

function index(){
    $data=array(
 'data' => $this->model_admin->orang()
    );
    $this->load->view('view_admin',$data);
}

Lalu fungsi ini digunakan untuk memasukkan model dengan fungsi orang() kedalam variabel agar nanti dapat digunakan ke dalam view atau tampilan yang dapat dilihat oleh pengguna.

View

Sekarang kita masuk ke bagian view, bukalah file view_admin.php yang sudah kita buat sebelumnya terdapat di application/view kemudian ganti atau isi menjadi seperti berikut ini.

<!DOCTYPE html>
<html>
<head>
 <title>Membuat CRUD Dengan CodeIgniter | https://sugrahaku.com</title>
 <link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/css/bootstrap.min.css')?>">
 <script src="<?php echo base_url('assets/js/jquery-3.1.1.min.js');?>"></script>
 <script src="<?php echo base_url('assets/js/bootstrap.min.js');?>"></script>
</head>
<body>
 <div class="container">
  <h1 class="text-center">Data Orang</h1>
  <p class="text-center">Selamat Datang, <?php echo $this->session->userdata("username"); ?></p>
  <div class="form-group text-right">
   <a class="btn btn-primary" href="#">Tambah</a>
   <a class="btn btn-warning" href="<?php echo base_url('index.php/login/logout'); ?>">Logout</a>
  </div>
  <table class="table table-striped table-bordered">
   <thead>
    <tr>
     <th>No.</th>
     <th>Nama</th>
     <th>Alamat</th>
     <th>Pekerjaan</th>
     <th>Aksi</th>
    </tr>
   </thead>
   <tbody>
    <?php $no=0; foreach ($data as $dt){ ?>
    <tr>
     <td><?php echo ++$no;?></td>
     <td><?php echo $dt['nama'];?></td>
     <td><?php echo $dt['alamat'];?></td>
     <td><?php echo $dt['pekerjaan'];?></td>
     <td>
      <a href="#" class="btn btn-info">Ubah</a>
      <a href="#" class="btn btn-danger">Hapus</a>
     </td>
    </tr>
    <?php } ?>
   </tbody>
  </table>
 </div>
</body>
</html>

Disini kita menggunakan bootstrap dan jquery untuk mempercantik tampilan dari halaman admin. Untuk memanggil bootstrap dan jQuery dapat dilihat pada script ini diatas.

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

Kemudian lihat pada scritpt berikut ini.

<?php $no=0; foreach ($data as $dt){ ?>
<tr>
   <td><?php echo ++$no;?></td>
   <td><?php echo $dt['nama'];?></td>
   <td><?php echo $dt['alamat'];?></td>
   <td><?php echo $dt['pekerjaan'];?></td>
      <td>
         <a href="#" class="btn btn-info">Ubah</a>
  <a href="#" class="btn btn-danger">Hapus</a>
   </td>
</tr>
<?php } ?>

Script diatas digunakan untuk menampilkan data yang terdapat dalam database. Kemudian lihat variabel $no dan ++$no; itu digunakan untuk membuat penomoran dalam tabel yang sudah kita buat.

Sekarang mari kita coba apa yang sudah kita buat. buka localhost/login, silahkan masukkan username admin dan password admin. Maka akan menjadi seperti berikut ini.

Kesimpulan

Bagaimana? Mudah bukan? Untuk tombol-tombolnya memang belum saya masukkan fungsi apapun kecuali tombol logout yang digunakan untuk keluar dari sistem. Tombol-tombol lainnya akan saya buat di tutorial selanjutnya, dimana saya akan mengunakan popup modal dari bootstrap agar lebih menarik lagi.

Mungkin hanya ini saja yang bisa saya sampaikan, jika ada pertanyaan atau menginginkan file yang sudah kita buat, silahkan ditanyakan atau diminta pada kolom komentar. Maka nantinya akan saya bundle dan buatkan sebuah link agar dapat di download teman-teman sekalian. Sekian dan terima kasih.

Sugrahaku

Blogger, Programmer, Data Analytic, Web Designer

Bagikan Artikel ini