Prasyarat
Sebelum membaca tutorial ini, Anda harus mengerti tentang:
- Dasar-dasar HTML
- Dasar-dasar PHP, terutama penggunaan class dan function
- Dasar-dasar MySQL
Pendahuluan
Pada tutorial ini akan dijelaskan bagaimana menuliskan 'Hello World' ke browser, sekaligus menerangkan konsep MVC (Model-View-Controller) dalam CI. Tutorial ini mengasumsikan Anda menggunakan CodeIginiter 1.7.0.
Saat meng-install CodeIgniter (CI), Anda akan mendapati folder CodeIginiter_x.x.x dengan x.x.x. adalah versi CI. Untuk mempermudah, ubahlah nama folder tersebut menjadi ci, dan untuk mengakses folder tersebut dari web browser, digunakan http://localhost/ci. Di dalam folder ci banyak folder dan sub-folder lain. Yang banyak kita gunakan nantinya ada di dalam folder ci/system/application. Di dalam folder ini terdapat beberapa sub-folder lainnya, yaitu:
- Config, berisikan konfigurasi website
- controllers, berisikan kode-kode untuk fungsi dan class
- views, berfungsi untuk menampilkan data HTML ke browser
- models, berhubungan dengan database
- errors, berisikan halaman-halaman error, seperti error 404, yang akan keluar jika halaman yang dimaksud tidak ada.
Sebelum memulai, bukalah file application/config/config.php . Atur variabel $config['base_url'] sesuai dengan nama site Anda, misalnya http://localhost/ci/.
Controller
Mari kita mulai dengan controller. Kita akan membuat suatu controller (atau class) dengan nama Blog. Ada beberapa aturan yang perlu diperhatikan dalam pembuatan controller:
- Satu controller dibuat pada satu file.
- Penamaan controller dan nama file mengikuti aturan berikut:
- Nama file menggunakan extension .php
- Nama file (tanpa extension) dengan nama controller harus sama, namun nama controller harus diawali dengan huruf besar. Misalnya nama file adalah blog.php, maka nama controller adalah Blog.
- Pembuatan Controller sama dengan pembuatan class, yaitu menggunakan keyword class. Pembuatan class harus meng-extends Controller.
Maka, buatlah suatu file dengan nama blog.php di dalam folder controller, dan di dalamnya ketikkan kode berikut:
<?php
class Blog extends Controller {
}
?>
Catatan: Untuk selanjutnya, semua kode program yang baru akan dituliskan dalam cetak tebal.
Selanjutnya, buatlah function index seperti di bawah ini
<?php
class Blog extends Controller {
function index() {
echo "Hello World";
}
function testing() {
echo "Testing";
}
?>
Buka http://localhost/ci/index.php/blog. Anda akan melihat teks Hello World terlihat di browser. Selanjutnya buka http://localhost/ci/index.php/blog/index, Anda akan mendapatkan hasil yang sama. Sedangkan jika Anda membuka http://localhost/ci/index.php/blog/testing, Anda akan melihat teks Testing pada browser.
Penjelasan:
Saat membuka http://localhost/ci/index.php/blog, CI akan mencari function bernama index di controller Blog pada file blog.php. Oleh karena itu, hasil dari http://localhost/ci/index.php/blog akan sama dengan http://localhost/ci/index.php/blog/index. Sedangkan jika Anda membuka http://localhost/ci/index.php/blog/testing, CI akan menjalankan function testing pada controller Blog. Perlu diingat, bahwa index.php di sana nantinya bisa dihapus dengan mengatur file .htaccess, namun tidak akan dibahas dalam tutorial ini.
Sekarang cobalah buka http://localhost/ci atau http://localhost/ci/index.php. Secara default, saat membuka kedua halaman tersebut, CI akan mengakses controller yang namanya ada pada system/application/config/routes.php. Cari variabel dengan nama $route['default_controller']. Akan terlihat di sana isinya adalah welcome, yang berarti merujuk ke controller bernama welcome. Ubahlah menjadi blog dan refresh http://localhost/ci.
Catatan:
Dari sini bisa Anda lihat bahwa Controller adalah merupakan function dengan syarat tertentu seperti yang sudah saya jelaskan di atas. Jadi, di dalam CI, suatu controller pasti merupakan function, namun suatu function belum tentu merupakan controller.
View
Buatlah file baru pada folder application/views, namai dengan blog_view.php. Isinya sederhana saja
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>My first Heading</h1>
</body>
</html>
Kemudian buka file blog.php dan ubah menjadi seperti berikut:
<?php
class Blog extends Controller {
function index() {
$this->load->view('blog_view');
}
}
?>
Dengan langkah ini, controller Blog akan memanggil file blog_view untuk menampilkan halaman. Akses halaman baru ini dari http://localhost/ci. Halaman yang diperlihatkan di sini adalah statis, mengacu pada file blog_view.php. Agar dinamis, kita dapat mengatur isinya dari controller. Ubahlah file blog.php seperti berikut ini:
<?php
class Blog extends Controller {
function index() {
$data['title'] = "My Blog Title";
$data['heading'] = "My Blog Heading";
$this->load->view(‘blog_view’, $data);
}
}
?>
Sedangkan blog_view.php diubah seperti berikut:
<html>
<head>
<title><?=$title?></title>
</head>
<body>
<h1><?=$heading?></h1>
</body>
</html>
Kita melakukan sedikit perubahan pada file blog.php dengan menambahkan suatu array.
<?php
class Blog extends Controller {
function index() {
$data['title'] = "My Blog Title";
$data['heading'] = "My Blog Heading";
$data['todo'] = array('clean house', 'eat lunch', 'call mom');
$this->load->view('blog_view', $data);
}
}
?>
Selanjutnya, kita tampilkan isi array tersebut di blog_view.php
<html>
<head>
<title><?=$title?></title>
</head>
<body>
<h1><?=$heading?></h1>
<ol>
<?php foreach ($todo as $item): ?>
<li><?=$item?></li>
<?php endforeach; ?>
</ol>
</body>
</html>
Constructor
Constructor merupakan function yang otomatis akan dipanggil jika suatu class diefinisikan. Untuk penggunaan constructor pada CI, perlu diperhatikan adanya baris untuk memanggil class Controller seperti berikut ini:
<?php
class Blog extends Controller {
function Blog() {
parent::Controller();
}
function index() {
$data['title'] = "My Blog Title";
$data['heading'] = "My Blog Heading";
$data['todo'] = array('clean house', 'eat lunch', 'call mom');
$this->load->view('blog_view', $data);
}
}
?>
|
