Tutorial

Membuat Hello World Dengan CodeIgniter

Posted by sukmopuji on 12 February 2010

Kalau anda sudah membaca tutorial pendahuluan CodeIgniter, maka saya anggap anda sudah mengerti tentang arsitektur URL pada CodeIgniter. Nah, sekarang saya akan mengajak anda membuat Hello World sebagai programming pertama anda.

Sebelum anda memulai saya perlu menjelaskan dimana area kerja kita. Coba anda perhatikan gambar di bawah ini :

Sebenarnya area kerja kita ada di bawah folder application seperti yang ditandai dengan kotak berwarna merah. Didalam folder application terdapat banyak folder, tetapi yang menjadi perhatian kita saat ini adalah folder controllers, views dan models.

Sekarang mari kita mulai langkah-langkah untuk membuat program HelloWorld anda dengan CodeIgniter.

Langkah Pertama

Buatlah file bernama helloworld.php dan taruh didalam folder controllers. Kemudian ketikkan sintaks seperti dibawah :


<?php

class HelloWorld extends Controller {

    function HelloWorld()
    {
        parent::Controller();
    }

    function index()
    {
        $this->load->view('helloworld_view');
    }

}

Fungsi HelloWorld() merupakan fungsi constructor pada class HelloWorld. Permasalahan ini bisa dijelaskan pada tutorial lain yang membahas mengenai Object Oriented Programming pada bahasa pemrograman PHP. Singkatnya nama class harus sama dengan nama fungsi constructor-nya. Dan juga nama file harus sama dengan nama classnya.

Nah, perhatikan pada sintaks didalam function index(). Disitu tertulis sintaks :

$this->load->view(‘heloworld_view’)

Maksudnya adalah fungsi index() memanggil sebuah view bernama helloworld_view.php. Dan jika kita mengakses URL http://localhost/CodeIgniter/index.php/HelloWorld melalui browser, maka hasilnya akan muncul error pada layar browser. Mengapa terjadi error? Karena kita belum membuat file view yang bernama helloworld_view.php pada folder views.

Maka langkah selanjutnya adalah anda harus membuat file view bernama helloworld_view.php yang disimpan didalam folder views.

Langkah Kedua

Buatlah file bernama helloworld_view.php dan taruh dalam folder views. Kemudian ketikkan sintaks seperti dibawah :


<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello Word</h1>
</body>
</html>

Sekarang anda akses lagi URL http://localhost/CodeIgniter/index.php/HelloWorld maka di layar browser akan muncul hasil seperti ini :

Untuk sementara mungkin anda sudah puas dengan hasil diatas. Setelah itu mungkin anda bertanya bagaimana cara menampilkan sebuah isi variabel dari controller ke halaman view? Sekarang ubahlah sintaks pada file helloworld.php pada folder controllers menjadi seperti dibawah ini :


<?php

class HelloWorld extends Controller {

    function HelloWorld()
    {
        parent::Controller();
    }

    function index()
    {
        $data['title'] = "My Web";
        $data['header'] = "My Hello World";
        $this->load->view('helloworld_view', $data);
    }

}

Variabel $data merupakan variabel bertipe array yang kemudian disisipkan menjadi parameter pada fungsi load->view yang memanggil helloworld_view.php.

Sekarang kita ingin menampilkan isi dari variabel $data ke halaman view. Untuk itu ubahlah file helloworld_view.php pada folder views menjadi seperti ini :


<html>
<head>
<title><? = $title ?></title>
</head>
<body>
<h1><? = $header ?></h1>
</body>
</html>

Setelah itu buka kembali lagi browser anda dan lakukan refresh… dan anda akan mendapatkan hasil seperti dibawah ini :

Nah, sekarang melalui artikel tutorial ini anda sudah mengerti bagaimana cara membuat sebuah halaman sederhana dengan CodeIgniter sekaligus bagaimana menampilkan data variabel dari controller ke halaman view-nya. Dari sini silahkan anda mencoba sendiri dengan kreatifitas anda untuk menampilkan berbagai macam data dari controller ke halaman view.

Tutorial selanjutnya adalah bagaimana menampilkan data array ke dalam halaman web CodeIgniter anda.

2 Responses to “Membuat Hello World Dengan CodeIgniter”

  1. W0a… Url untuk memanggil controller apa emang pke huruf kapital?

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

 
%d bloggers like this: