2010

Membina Aplikasi
Web Dengan
Codeigniter
Panduan Ringkas Langkah Demi Langkah
Buku ini merupakan sebuah panduan ringkas bagi anda yang ingin memulakan
pembangunan sebuah aplikasi web dengan menggunakan CodeIgniter. Buku ini
ditulis dengan amat ringkas, dan jangan harapkan sebarang penerangan secara
terperinci. Ditulis secara langkah demi langkah dan harap-harap anda
memahaminya. Buku ini diberi secara percuma kerana penulisannya belum
selesai.

Rusmaini Miftah
blog: http://rusmaini.blogspot.com | projek: http://dadida.my
07-03-2010
 Panduan Ringkas Langkah Demi Langkah 2

Membina Aplikasi Web Dengan Codeigniter

MODUL 1: PEMASANGAN CODEIGNITER

Wampserver

Langkah 1:

• Muat turun perisian Wampserver.

• Url untuk muat turun: http://www.wampserver.com/en/download.php

Langkah 2:

• Memasang Wampserver (buat sendiri lah!)

• Untuk panduan ini, saya install ke folder E.

Pemasangan Codeigniter

Langkah 1:

• Muat turun framework Codeigniter.

• URL untuk muat turun: http://codeigniter.com/.

Langkah 2:

• Extract fail CodeIgniter_1.7.2 .zip. Anda akan peroleh fail seperti dalam
gambar di bawah.

Folder Codeigniter
2
 Panduan Ringkas Langkah Demi Langkah 3

Membina Aplikasi Web Dengan Codeigniter

Langkah 3:

• Copy folder Codeigniter_1.7.2 dan paste ke folder E:/wamp/www.

• Kemudian rename folder tersebut dengan nama projek anda.
• Contoh yang akan digunakan dalam ebook ini ialah projekci.

Folder projek

Langkah 4:

• Buka fail config.php yang berada di dalam folder

E:\wamp\www\projekci\system\application\config.
• Ubah baris:
$config['base_url'] = "http://example.com/";
kepada:
$config['base_url'] = "http://localhost/projekci/";
• Jika aplikasi anda sudah siap dan ingin memindahkannya ke server,
pastikan anda tukar nilai tersebut kepada URL atau domain name server
anda.

3
 Panduan Ringkas Langkah Demi Langkah 4

Membina Aplikasi Web Dengan Codeigniter

Langkah 5:

• Uji aplikasi web anda di browser. URL: http://localhost/projekci.

Contoh hasil aplikasi web setakat ini

4
 Panduan Ringkas Langkah Demi Langkah 5

Membina Aplikasi Web Dengan Codeigniter

MODUL 2: PANGKALAN DATA MYSQL

Membina Pangkalan Data

Langkah 1:

• Buka PhpMyadmin di URL http://localhost/phpmyadmin.

• Bina pangkalan data dengan nama ci_projek.

Paparan Membina Pangkalan Data

• Bina table users. Masukkan penyata SQL di bawah ke ruangan SQL

CREATE TABLE IF NOT EXISTS `users` (

`id` int(11) NOT NULL AUTO_INCREMENT,
`group_id` int(11) NOT NULL,
`username` varchar(50) DEFAULT NULL,
`password` varchar(50) DEFAULT NULL,
`email` varchar(255) DEFAULT NULL,
`status` char(1) DEFAULT NULL,

5
 Panduan Ringkas Langkah Demi Langkah 6

Membina Aplikasi Web Dengan Codeigniter

`date_register` datetime DEFAULT NULL,

`last_login` datetime DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1
AUTO_INCREMENT=1 ;

Create Table Di Ruangan SQL

• Masukkan data. Masukkan penyata di bawah sama seperti kaedah di

atas.

INSERT INTO `users` (`id`, `group_id`, `username`, `password`,

`email`, `status`, `date_register`, `last_login`) VALUES
(1, 1, 'rusmaini', '5f4dcc3b5aa765d61d8327deb882cf99',
'rusmaini@gmail.com', 'A', '2010-02-06 17:26:21', '2010-02-06
17:26:24');

6
 Panduan Ringkas Langkah Demi Langkah 7

Membina Aplikasi Web Dengan Codeigniter

Langkah 2:

• Buka fail database.php di dalam folder

E:\wamp\www\projekci\system\application\config.
• Masukkan maklumat berkaitan iaitu hostname, username, password dan
database seperti dalam gambar di bawah:

Konfigurasi Fail database.php

Langkah 3:

• Buka fail autoload.php dari folder

E:\wamp\www\projekci\system\application\config.
• Ubah baris ke-42 di dalam fail tersebut dengan menambah database
seperti dalam gambar di bawah.

Konfigurasi Autoload

7
 Panduan Ringkas Langkah Demi Langkah 8

Membina Aplikasi Web Dengan Codeigniter

MODUL 3: MODEL, VIEW & CONTROLLER

Membina senarai data.

Langkah 1: (Model)

• Create fail muser.php di dalam folder

E:\wamp\www\projekci\system\application\models.
• Kandungan fail seperti di bawah:

<?php
class MUser extends Model{

function MUser()
{
parent::Model();
}

function listProfile()
{
$this->db->order_by('username','ASC');
$q = $this->db->get('users');
if($q->num_rows() > 0):
$r = $q->result_array();
return $r;
else:
return array();
endif;
}

}
?>

8
 Panduan Ringkas Langkah Demi Langkah 9

Membina Aplikasi Web Dengan Codeigniter

Langkah 2: (Controller)

• Create fail users.php di dalam folder

E:\wamp\www\projekci\system\application\controllers.
• Kandungan fail seperti di bawah:

<?php
class Users extends Controller {

function Users()
{
parent::Controller();
$this->load->model('MUser');
}

function index()
{
//vars
$data['title'] = 'Projek CI';
$data['meta_desc'] = 'Projek web aplikasi dengan CodeIgniter';
$data['meta_keywords'] = 'framework,CI';

$data['lists'] = $this->MUser->listProfile();
$this->load->vars($data);
$this->load->view('user_index');
}
}
?>

9
 Panduan Ringkas Langkah Demi Langkah 10

Membina Aplikasi Web Dengan Codeigniter

Langkah 3: (View)

• Create fail user_index.php di dalam folder

E:\wamp\www\projekci\system\application\views.
• Kandungan fail seperti di bawah:

<table>
<tr>
<th>Nama</th>
<th>Emel</th>
<th>Status</th>
<th>Tarikh Daftar</th>
<th>&nbsp;</th>
</tr>
<?php
$total_lists = count($lists);
if($total_lists):
foreach($lists as $key => $list):
echo '<tr>';
echo '<td>'.$list['username'].'</td>';
echo '<td>'.$list['email'].'</td>';
echo '<td>'.$list['status'].'</td>';
echo '<td>'.date('d-m-Y',strtotime($list['date_register'])).'</td>';
echo '<td>'.anchor('users/papar/'.$list['id'],'Papar').'</td>';
echo '</tr>';
endforeach;
endif;
?>
</table>

10
 Panduan Ringkas Langkah Demi Langkah 11

Membina Aplikasi Web Dengan Codeigniter

Langkah 4:

• Buka semula fail autoload.php dan tambahkan URL pada baris ke-54
seperti dalam gambar di bawah:

Autoload Helper URL

Langkah 5:

• Uji aplikasi web anda di browser. URL untuk pengujian ialah

http://localhost/projekci/index.php/users.
• Hasil paparan boleh dilihat seperti contoh di bawah.
• Untuk menambah data, anda boleh mengulang proses insert data seperti
dalam modul 2.

Contoh Paparan Senarai Data

Sekian buat waktu ini, terima kasih kerana sudi membaca. Semoga ada manfaatnya. Bersambung...

11