Coretan Asha21: CRUD Dengan CodeIgniter + Ajax + JQuery (Part II

Okay kini saatnya kita membuat aplikasi CRUD CodeIgniter kita. Bagi pembaca yang belum berkenalan dengan CodeIgniter, silah baca Part I dari tutoral ini. Nah, di tutorial sebelumnya kita sudah berkenalan dan menginstall CodeIgniter di server kita. Sekarang waktunya kita membuat aplikasi CRUD kita.

CodeIgniter menerapkan konsep MVC (Model, View, Controller) di dalamnya. Nah istilah apalagi ini? Tenang-tenang, saya akan jelaskan satu per satu.

Konsep MVC ini banyak diterapkan di Framework PHP lainnya seperti CakePhp, Symphoni dan sebagainya. Apa maksudnya? Jadi dalam pembuatan aplikasi bagian database, logika dan tampilan dari aplikasi dipisahkan. Pernahkah pembaca membuat script seperti ini?

<html>
<head>
   <title>Websitku</title>
</head>
<body>
<?php 
$koneksi = mysql_connect("localhost","root","")
mysql_select_db("namadatabase",$koneksi);

$query = mysql_query("select * from namaTable",$koneksi);

while($baris=mysql_fetch_array($query)){
  echo "bla bla bla bla";
}
?>
</body>
</html>

Saya yakin pembaca pernah membuat script PHP seperti itu. Pada script di atas, bagian logika, database dan tampilan aplikasi digabung menjadi satu. Apakah ada masalah? Jika kode programnya hanya seperti itu memang tidak akan menjadi masalah. Bagaimana jika aplikasinya semakin komplex dan rumit? Tentu baris kodenya akan menjadi semakin banyak. Jika bagian logika, database dan tampilan digabung menjadi satu, tentu akan sangat susah dilakukan perawatan bukan?

Nah itulah keunggulan dari konsep MVC. Mari kita berkenalan dengan konsep ini terlebih dahulu.

M = Model, yaitu bagian yang menangani database. Jadi setiap kode yang berhubungan dengan database diletakan di bagian ini. Pada CodeIgniter, model diletakan di direktori /application/models/

V = View, yaitu bagian tampilan dari aplikasi. Bagian inilah yang akan menampilkan informasi ke pengguna. Bagian view diletkan di direktori /application/views/

C = Controller, berfungsi untuk menghubungkan Model dan View, menangani logika dari aplikasi. Bagian controller dilekatan di direktori /application/controllers/

Nah alur kerja dari konsep MVC bisa dilihat seperti gambar di bawah ini.

Konsep MVC

Okay kita lanjut ke pembuatan CRUD kita. Dalam tutorial ini kita akan membuat aplikasi database mahasiswa. Karena masih belajar, kita buat yang sederhana saja dulu okay? Silahkan buat sebuah database baru terlebih dahulu misalkan dengan nama mahasiswa. Kemudian masukan query berikut ini untuk membuat tabel mahasiswa.


CREATE TABLE IF NOT EXISTS `mahasiswa` (
  `nim` varchar(10) NOT NULL,
  `nama` varchar(200) NOT NULL,
  `jurusan` varchar(20) NOT NULL,
  `angkatan` year(4) NOT NULL,
  `ipk` double NOT NULL,
  PRIMARY KEY  (`nim`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

--
-- Dumping data for table `mahasiswa`
--

INSERT INTO `mahasiswa` (`nim`, `nama`, `jurusan`, `angkatan`, `ipk`) VALUES
('1005021039', 'Buda Suyasa', 'Manejemen Informatik', 2010, 3.4),
('1005021033', 'Heni Melina', 'Manajemen Informatik', 2010, 3.9),
('1005021044', 'Leonardo ', 'Kimia', 2012, 2.9),
('1005021022', 'Luna Maya', 'Bahasa Inggris', 2012, 3.6);

Selanjutnya mari kita sesuaikan konfigurasi CodeIgniter untuk aplikasi yang kita buat.

Pertama, kita edit /application/config/config.php. Kemudian ubah:

$config['base_url']    = '';

Menjadi:

$config['base_url'] = 'http://localhost/webku';

Tujuannya adalah mengeset base url kita menjadi http://localhost/webku. Kemudian yang harus kita seting berikutnya adalah koneksi database. File yang kita edit selanjutnya yaitu /application/config/database.php. Yang perlu kita konfigurasi di sini adalah hostname, username, password, nama database dan type database. Lebih jelasnya lihatlah contoh di bawah ini.

$db['default']['hostname'] = 'localhost';
$db['default']['username'] = ''; 
$db['default']['password'] = '';
$db['default']['database'] = '';
$db['default']['dbdriver'] = 'mysql';

Menjadi

$db['default']['hostname'] = 'localhost';
$db['default']['username'] = 'root'; 
$db['default']['password'] = '';
$db['default']['database'] = 'mahasiswa';
$db['default']['dbdriver'] = 'mysql';

Okay, konfigurasi database sudah selesai. Selanjutnya kita akan me-load beberapa library dan helper CodeIgniter. Untuk itu, buka /application/config/autoload.php. Editlah bagian:

$autoload['libraries'] = array();

Menjadi

$autoload['libraries'] = array('database');

Dan,

$autoload['helper'] = array();

Menjadi

$autoload['helper'] = array('url');

Okay, untuk sementara hanya itu konfigurasi yang kita perlukan. Mari kita lanjutkan membuat Model dari aplikasi CRUD kita. Ketikanlah kode berikut:

<?php 
class ModelMahasiswa extends CI_Model{
    function getDataMahasiswa(){
        return $this->db->get('mahasiswa')->result();
    }
}
?>

Kemudian simpan di direktori /application/models dengan nama modelmahasiswa.php
Jadi, dalam modelmahasiswa kita membuat sebuah fungsi bernama getDataMahasiswa untuk mendapatkan data dari tabel mahasiswa. Fungsi result() berfungsi mengubah hasil query menjadi object.

Selanjutnya mari kita buat controller aplikasi kita. Buatlah file conmahasiswa.php kemudian simpan di direktori /application/controller. Kemudian isikan dengan kode berikut:

<?php
class ConMahasiswa extends CI_Controller{
    function __construct(){
        parent::__construct();
        $this->load->model('modelmahasiswa');
    }
    
    function index(){
        $data['judul'] = 'Data Mahasiswa';
        $data['mahasiswa'] = $this->modelmahasiswa->getDataMahasiswa();
        $this->load->view('viewmahasiswa',$data);
    }
}
?>

Pada controller conmahasiswa, terlebih dahulu kita me-load model modelmahasiswa yang sudah kita buat sebelumnya. Kemudian kita membuat function index(), nantinya function index-lah yang pertama kali dijalankan ketika controller diakses. Dalam function index() kita meload view yang bernama viewMahasiswa. Data yang dikirimkan ke dalam view ditampung dalam variabel $data yang merupakan array. Isi dari $data yaitu string judul (Data Mahasiswa) dan objek mahasiswa (modelmahasiswa->getDataMahasiswa). Selanjutnya mari kita membuat viewmahasiswa yang berfungsi menampilkan informasi yang ingin ditampilkan. Buatlah sebuah file bernama viewmahasiswa.php dan simpan di direktori /application/views/. Kemudian isikan kode berikut ini:

<!DOCTYPE>
<html>
<head>
    <title><?php echo $judul ?></title>
<head>
<body>
    <table border="1" cellspacing="0" cellpadding="0">
        <tr>
            <td>Nim<td>
            <td>Nama<td>
            <td>Jurusan<td>
            <td>Angkatan<td>
            <td>IPK<td>
        </tr>
        <?php foreach($mahasiswa as $baris):?>
        <tr>
            <td><?php echo $baris->nim ?><td>
            <td><?php echo $baris->nama ?><td>
            <td><?php echo $baris->jurusan ?><td>
            <td><?php echo $baris->angkatan ?><td>
            <td><?php echo $baris->ipk ?><td>
        </tr>
        <?php endforeach ?>
    </table>
</body>
</html>

Nah sampe tahap ini, kita sudah membuat model, controller dan view dari aplikasi CRUD sederhana kita. Untuk mencoba aplikasi yang kita buat, silahkan ketikan localhost/webku/index.php/conmahasiswa pada web browser pembaca. Jika pembaca mengikuti tutorial ini dengan benar maka tampilan dari aplikasi yang kita buat adalah seperti berikut:

Nim	Nama	Jurusan	Angkatan	IPK
1005021039	Buda Suyasa	Manejemen Informatik	2010	3.4
1005021033	Heni Melina	Manajemen Informatik	2010	3.9
1005021044	Leonardo	Kimia	2012	2.9
1005021022	Luna Maya	Bahasa Inggris	2012	3.6

Selanjutnya, agar akses aplikasi lebih mudah, kita akan menjadikan controller conmahasiswa sebagai controller default. Silahkan edit file /application/config/routes.php. Ubahlah baris:

$route['default_controller'] = "welcome";

Menjadi

$route['default_controller'] = "conmahasiswa";

Selanjutnya untuk mencoba silahkan ketika localhost/webku/ pada web browser pembaca.

Okay sekian dulu tutorial kali ini. Di tutorial selanjutnya kita akan belajar untuk menambahkan, mengubah dan menghapus data. Jadi, tunggu apalagi?Ayo lanjut ke tutorial selanjutnya.

Coretan Asha21

Rabu, 25 Juli 2012

CRUD Dengan CodeIgniter + Ajax + JQuery (Part II - Create + Read)

3 komentar: