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