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 http://www.wampserver.com/en/download. /en/download.php php
Langkah 2: •
Memasang Wampserver (buat sendiri lah!)
•
Untuk panduan ini, saya install ke folder E.
Pemasangan Codeigniter Langkah 1: •
Muat turun framework Codeigniter. Codeigniter.
•
URL untuk muat turun: http://codeigniter.com/ http://codeigniter.com/..
Langkah 2: •
Extract fail CodeIgniter_1.7.2 CodeIgniter_1.7.2 .zip .zi p. 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. E:/wamp/www .
•
Kemudian rename folder rename folder tersebut dengan nama projek anda.
•
Contoh yang akan digunakan dalam ebook ini ialah projekci. projekci.
Folder projek Langkah 4: •
Buka fail config.php yang berada di dalam folder E:\wamp\www\projekci\system E:\wamp\www\projekci\system\application\co \application\config nfig..
•
Ubah baris: $config['base_url'] $config['base_url'] = "http://example.com/"; "http://example.com/"; kepada: $config['base_url'] $config['base_url'] = "http://localhost/projekci/"; "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 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 http://localhost/phpmyadmin..
•
Bina pangkalan data dengan nama ci_projek. ci_projek.
Paparan Membina Pangkalan Data •
Bina table users. 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', '
[email protected]', '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 E:\wamp\www\projekci\system\application\co \application\config nfig..
•
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 E:\wamp\www\projekci\system\application\co \application\config nfig..
•
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 E:\wamp\www\projekci\system\application\mo \application\models. dels.
•
Kandungan fail seperti di bawah: 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 E:\wamp\www\projekci\system\application\co \application\controllers. ntrollers.
•
Kandungan fail seperti di bawah: 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 user_index.php di dalam folder E:\wamp\www\projekci\system E:\wamp\www\projekci\system\application\view \application\viewss.
•
Kandungan fail seperti di bawah:
| Nama | Emel | Status | Tarikh Daftar | |
$list): echo ''; echo '| '.$list['username'].' | '; echo ''.$list['email'].' | '; echo ''.$list['status'].' | '; echo ''.date('d-m-Y',strtotime($list['date_register'])).' | '; echo ''.anchor('users/papar/'.$list['id'],'Papar').' | '; echo '
'; endforeach; endif; ?>
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. bro wser. 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
