CodeIgniter Talk : CRUD Part 1

CodeIgniter menjadi terkenal karena kekuatannya sebagai framework PHP, namun masih banyak orang diluar sana yang belum mencoba keunggulannya. Pada kesempatan kali ini kita akan mencoba membuat aplikasi web sederhana dengan menggunakan framework CodeIgniter.

-Revisi tutorial karena kesalahan teknis, Sabtu 14 April 2012- 

Tutorial Details

  • Program : Codeigniter v2.1.0
  • Topic : CRUD, Getting Started with CodeIgniter
  • Difficulty : Easy
  • Estimated Completion Time : About 30 minutes

Introduction

Tutorial CRUD Codeiginter ini akan dibagi dalam beberapa tahapan yang akan membahas cara konfigurasi codeigniter sampai pada pengimplementasian aplikasi CRUD. CRUD sendiri adalah proses management database yang meliputi pembuatan data dalam database(Create), pembacaan data dalam database(Read), perubahan data dalam database(Update) dan penghapusan data dalam database(Delete). Pada part 1 ini kita akan memulainya dengan konfigurasi CodeIginter, pengenalan CodeIgniter sampai pada Create dan Read database.

Assumptions

  • Anda sudah mengenal fungsi-fungsi dasar Hypertext Preprocessor (PHP).
  • Anda sudah mengenal Object Oriented Programming (OOP)
  • Anda sudah menguasai basic knowledge dari Data Definition Language (DDL) dan Data Manipulation Language (DML)
  • Anda sudah menguasai basic knowledge dari HyperText Markup Language (HTML)
  • Anda sudah meng-install salah satu PHP All in One Package  program e.g, XAMPP, WAMP
  • Anda sedang tidak mengalami kegalauan 🙂

Step 1 (Configuring CodeIgniter )

Unduh framework CodeIgniter versi 2.1.0 disini dan extract di folder xampp/htdocs/. Setelah itu rename folder CodeIgniter_2.1.0 menjadi tutorial-ci-basic. Buka dengan web browser halaman http://localhost/tutorial-ci-basic, anda akan melihat halaman default CodeIgniter yang belum dikonfigurasi.

Untuk mengkonfigurasi CodeIgniter anda harus mengubah beberapa script PHP yang ada pada folder /tutorial-ci-basic/application/config/.

  • Configuring config.php file

cari script seperti berikut :

$config['base_url'] = '';

dan diubah menjadi,

$config['base_url'] = 'http://' . $_SERVER['HTTP_HOST'] . '/tutorial-ci-basic';

base_url digunakan untuk menentukan alamat domain kita, dalam hal ini halaman awal kita berarti http://localhost/tutorial-ci-basic. Script $_SERVER[‘HTTP_HOST’] berfungsi untuk mengambil alamat domain kita secara dinamis, dikarenakan kita menggunakan server local maka script tersebut akan menghasilkan localhost. Penambahan path /tutorial-ci-basic itu sendiri berhubungan dengan folder website yang kita buat sebelumnya.

  • Configuring routes.php file

Dikarenakan CodeIginiter merupakan implementasi dari OOP, maka fungsi-fungsi CodeIgniter selalu diakses melalui Controller. Controller yang pertama kali diakses oleh browser yang merequest halaman domain kita dinamakan default_controller. default_controller ini dapat diubah-ubah sesuai dengan keinginan kita. Untuk kali ini, ubah script berikut ini :

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

dengan,

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

Script diatas akan mengubah default controller halaman web kita ke controller home yang kan kita buat nanti.

  • Configuring autoload.php file

Ketika suatu halaman CodeIginiter diakses, system CodeIgniter akan menge-load beberapa file yang diperlukan untuk eksekusi fungsi-fungsi yang ada di Controller. File-file tersebut dapat berupa libraries, packages, helper, config, language dan model. Untuk kali ini, kita akan memerintahkan system untuk secara default menge-load database. Karena database merupakan sebuah library, maka ubah script berikut :

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

menjadi,

$autoload['libraries'] = array('database');
  • Configuring database.php file

Ketika database di-load oleh system, maka system akan melakukan koneksi dengan database dengan parameter yang dikonfigurasi di file database.php. Oleh karena itu, ubah beberapa script didalamnya menjadi seperti ini.

$db['default']['hostname'] = 'localhost';
$db['default']['username'] = 'root';
$db['default']['password'] = '';
$db['default']['database'] = 'tutorialci';
$db['default']['dbdriver'] = 'mysql';
$db['default']['dbprefix'] = '';
$db['default']['pconnect'] = TRUE;
$db['default']['db_debug'] = TRUE;
$db['default']['cache_on'] = FALSE;
$db['default']['cachedir'] = '';
$db['default']['char_set'] = 'utf8';
$db['default']['dbcollat'] = 'utf8_general_ci';
$db['default']['swap_pre'] = '';
$db['default']['autoinit'] = TRUE;
$db['default']['stricton'] = FALSE;

Perlu dipastikan bahwa kita akan melakukan koneksi ke database server local dengan username dan password default dimana database yang akan kita gunakan adalah tutorialci.

Step 2 (Understanding the URLs)

Dengan default controller sekarang adalah home, maka kita bisa mengasumsikan sebuah URL sederhana sebagai berikut.

Mari kita bedah URL diatas dan apakah yang akan dilakukan CodeIgniter dengan URL tersebut. index.php adalah file pertama yang harus diakses oleh user untuk menuju controller. Controller sendiri didefinisikan setelah penulisan index.php. Lalu setelah controller terdapat function/method yang ingin diakses, jika tidak diisi maka controller secara default akan memanggil fungsi index. Dan diakhir URL, terdapat parameter yang akan diassign ke parameter pada fungsi yang bersangkutan. Parameter ini tidak terbatas hanya satu, melainkan dapat berapapun tergantung kebutuhan setiap fungsi e.g, /index/param1/param2/param3/dst

Step 3 (Initializing Database)

Buatlah sebuah database dengan nama tutorialci pada MySQL , lalu eksekusi script DDL berikut ini.

CREATE TABLE IF NOT EXISTS `students` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `student_number` varchar(10) NOT NULL,
  `name` varchar(50) NOT NULL,
  `gpa` float NOT NULL,
  `course` varchar(50) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;

Lalu untuk menginisialisasi data, eksekusi query DML berikut.

INSERT INTO `students` (`id`, `student_number`, `name`, `gpa`, `course`) VALUES
(1, '080704851', 'Stefanus Diptya', 4, 'Computer Engineering '),
(2, '080704512', 'Park JiYeon', 4, 'Informatics Engineering ');

Step 4 (Reading Database)

Untuk menampilkan data dalam bentuk table, kita harus melalui beberapa tahap.

  • Creating data model

Buatlah model dengan nama students_model.php pada folder application/models, lalu isikan dengan script berikut.

<?php

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

class students_model extends CI_Model {

    public function __construct() {
        parent::__construct();
    }

    function create($array_data) {
        $this->db->insert('students', $array_data);
    }

    function getAll() {
        $this->db->select('*')->from('students');
        return $this->db->get();
    }

    function get($id) {
        $this->db->select('*')->from('students');
        $this->db->where('id', $id);
        return $this->db->get();
    }

    function update($array_data, $id) {
        $this->db->where('id', $id);
        $this->db->limit(1);
        $this->db->update('students', $array_data);
    }

    function delete($id) {
        $this->db->where('id', $id);
        $this->db->delete('students');
    }

}

?>

Pada data model ini kita membuat basic query DML (create, read, update dan delete) dengan bantuan active records. Active records merupakan fungsi bawaan framework CodeIginiter yang dapat menyederhanakan pembuatan query. Untuk lebih jelas tentang penggunaan Active Records, silahkan baca panduannya disini.

  • Creating view

Buatlah file home_view.php pada folder application/views, lalu isikan dengan script berikut.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Tutorial Basic CI</title>

        <style type="text/css">
            th {
                font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica,sans-serif;
                color: #6D929B;
                border-right: 1px solid #C1DAD7;
                border-bottom: 1px solid #C1DAD7;
                border-top: 1px solid #C1DAD7;
                letter-spacing: 2px;
                text-transform: uppercase;
                text-align: left;
                padding: 6px 6px 6px 12px;
                background: #CAE8EA;
            }
            td {
                border-right: 1px solid #C1DAD7;
                border-bottom: 1px solid #C1DAD7;
                background: #fff;
                padding: 6px 6px 6px 12px;
                color: #6D929B;
            }
        </style>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>Student Number</th>
                    <th>Name</th>
                    <th>Grade Point Average(GPA)</th>
                    <th>Course</th>
                </tr>
            </thead>
            <tbody>
                <? foreach ($students as $student) { ?>
                    <tr>
                        <td><? echo $student->student_number ?></td>
                        <td><? echo $student->name ?></td>
                        <td><? echo $student->gpa ?></td>
                        <td><? echo $student->course ?></td>
                    </tr>
                <? } ?>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="4"><? echo anchor("home/add", "Add", array("title" => "Add new student")) ?></td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>

Pada file view ini kita membuat design tampilan untuk memetakan data students yang akan kita ambil dari database. Yang perlu diperhatikan adalah script yang ada diantara tag tbody. Disana terdapat PHP embedded script, yaitu script PHP yang digabungkan dengan script HTML. Didalam script tersebut kita melakukan perulangan dengan foreach terhadap variable $students yang kita dapat dari controller. Variable $students tersebut di-assign satu persatu kedalam variable $student dimana variable ini dalam bentuk object sehingga dalam pengaksesan datanya menggunakan tanda “->”

  • Creating Controller

Buatlah file home.php pada folder application/controllers. Lalu isikan dengan script berikut.

<?php

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

class Home extends CI_Controller {

    public function __construct() {
        parent::__construct();
        $this->load->helper("url");
        $this->load->model('students_model');
    }

    public function index() {
        $data['students'] = $this->students_model->getAll()->result();
        $this->load->view('home_view', $data);
    }

}

?>

Dapat dilihat pada constructor class ini, terdapat pemuatan helper url. Helper url adalah sebuah bantuan yang diberikan framework Codeigniter untuk memanipulasi url. Fungsi-fungsi manipulasi itu antara lain adalah site_url(), base_url(), redirect() dan lain sebagainya.

Terdapat pula pemuatan students model sehingga pada nantinya kita dapat menggunakan fungsi-fungsi students model pada controller ini. Controller secara default akan memanggil method index jika method pada URL tidak didefinisikan. Maka ketika controller mengeksekusi method index, controller akan memanggil fungsi getAll pada model students untuk mendapatkan semua data students dari database. Hasil keluaran dari fungsi tersebut dijadikan sebuah arrah dengan memanggil fungsi result() yang pada akhirnya di-assign ke variable $data[‘students’].

Perlu diketahui bahwa pembuatan associative array $data ini bertujuan untuk me-reference data dari controller ke view. Dimana pengaksesan variable pada view tidak lagi dengan menggunakan associative array, melainkan dengan data key-nya, dalam hal ini yaitu students. Diakhir script method index, controller akan memuat view dengan nama home_view.php dengan reference variable data yang sudah dibuat.

Step 5 (Creating/adding a new record)

Untuk memasukan data baru dari sebuah form, lakukanlah beberapa tahap berikut.

  • Creating view

Buatlah file form_view.php pada folder application/views, lalu isikan dengan script berikut.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Tutorial Basic CI</title>

        <style type="text/css">
            th {
                font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica,sans-serif;
                color: #6D929B;
                border-right: 1px solid #C1DAD7;
                border-bottom: 1px solid #C1DAD7;
                border-top: 1px solid #C1DAD7;
                letter-spacing: 2px;
                text-transform: uppercase;
                text-align: left;
                padding: 6px 6px 6px 12px;
                background: #CAE8EA;
            }
            td {
                border-right: 1px solid #C1DAD7;
                border-bottom: 1px solid #C1DAD7;
                background: #fff;
                padding: 6px 6px 6px 12px;
                color: #6D929B;
            }
        </style>
    </head>
    <body>
        <? $is_edit = (isset($student)); ?>
        <form action="<? echo site_url((!$is_edit) ? "home/add" : "home/edit") ?>" method="post">
            <table>
                <tbody>
                    <tr>
                        <td>Student Number</td>
                        <td><input type="text" name="student_number" value="<? echo (!$is_edit) ? "" : $student->student_number; ?>"/></td>
                    </tr>
                    <tr>
                        <td>Name</td>
                        <td><input type="text" name="name" value="<? echo (!$is_edit) ? "" : $student->name; ?>"/></td>
                    </tr>
                    <tr>
                        <td>GPA</td>
                        <td><input type="text" name="gpa" value="<? echo (!$is_edit) ? "" : $student->gpa; ?>"/></td>
                    </tr>
                    <tr>
                        <td>Course</td>
                        <td><input type="text" name="course" value="<? echo (!$is_edit) ? "" : $student->course; ?>"/></td>
                    </tr>
                    <tr style="display: none;">
                        <td><input type="hidden" name="id" value="<? echo (!$is_edit) ? "" : $student->id; ?>"/></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><input type="submit" name="submit" value="<? echo (!$is_edit) ? "Add" : "Edit" ?>"/></td>
                    </tr>
                </tbody>
            </table>
        </form>
    </body>
</html>

Halaman form yang kita buat ini dirancang untuk menjadi halaman yang dinamis. Kenapa dinamis? Karena halaman ini akan menjadi view bagi action add maupun edit. Dapat kita lihat pada embedded php script berikut :

<? $is_edit = (isset($student)); ?>

Script diatas akan memeriksa apakah ada data dengan variable $student yang dikirimkan oleh controller? Jika ada maka status $is_edit menjadi true, jika tidak maka status $is_edit menjadi false. Status inilah akan menjadi panduan dalam pembentukan halaman form.  Salah satunya dapat kita lihat pada tag HTML form. Pada attribute action, jika status $is_edit sama dengan false maka php akan memberikan nilai “home/add”, jika tidak php akan memberikan nilai “home/edit”. Hal ini juga akan digunakan dalam pemberian nilai pada attribute value pada setiap tag input.

  • Updating Controller

Setelah kita buat halaman form untuk memasukan data, maka yang perlu kita lakukan adalah membuat fungsi yang akan menangani data yang dikirim oleh form. Bukalah file home.php pada folder application/controllers, dan buatlah fungsi add seperti contoh dibawah ini.

    public function add() {
        $inputs = $this->input->post(NULL, TRUE);
        if (!$inputs) {
            $this->load->view('form_view');
        } else {
            $data = array("student_number" => $inputs['student_number'],
                "name" => $inputs['name'],
                "gpa" => $inputs['gpa'],
                "course" => $inputs['course']);
            $this->students_model->create($data);
            redirect("home");
        }
    }

Pada fungsi diatas, dapat kita lihat bahwa pertama kali program akan mengambil data yang dikirimkan melalui POST method. Jika ada maka variable $inputs akan terisi data tersebut jika tidak maka $inputs akan bernilai false. Maka setelah mengambil  data POST tersebut, program akan melakukan pemerikasaan terhadap $inputs, jika data tidak ada maka controller ini akan mengeload view dari form_view.php, jika ada maka program akan memasukan data tersebut kedalam database dengan menggunakan query Active Records yang sudah dibuat dalam students model.

The Results

 

Gambar 1 : Read Database

Gambar 2 : Adding new record to Database

Gambar 3 : Result after adding

Summary

Pembuatan aplikasi web dengan CodeIgniter dapat lebih mudah karena beberapa hal yang telah kita pelajar diatas seperti fungsi Active Records. Selain mudah, dengan CodeIgniter ini kita dapat me-manage file-file kita jauh lebih mudah, sehingga dalam maintenance dan documentation website tidaklah sulit.

Anda bisa mendukung saya untuk tetap melakukan update tutorial dengan cara mem-follow blog saya, atau mem-follow twitter saya disini, bisa juga dengan meninggalkan komentar dan atau me-request tutorial yang anda inginkan. Best regards, eSDhee

Advertisements

15 thoughts on “CodeIgniter Talk : CRUD Part 1

  1. Pingback: CodeIgniter Talk : CRUD Part 2 | eSDhee weBlog

  2. Pingback: CodeIgniter Talk : Pagination | eSDhee weBlog

  3. gan, kok gak bisa sih, keluarnya di student number malah “student_number ?>” yang lainnya juga sama, itu kenapa ya?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s