E-Book PEMROGRAMAN CLIENT SERVER BERBASIS PHP DENGAN FRAMEWORK CODEIGNITER Disusun Oleh: Arfian Hidayat, S.Kom http://arfianhidayat.com FAKULTAS ILMU KOMPUTER UNIVERSITAS DIAN NUSWANTORO SEMARANG 2013
DAFTAR ISI DAFTAR ISI... i Daftar Gambar... ii Daftar Tabel... iii Bab 1 Pendahuluan... 1 1.1... 1 1.2... 1 Bab 2 Aplikasi Sederhana Dengan CodeIgniter... 2 2.1 Memasang Template CSS di CodeIgniter... 2 2.2 Memisahkan Header, Body, dan Footer Template... 6 2.3 Koneksi Database Mysql... 9 2.4 Menampilkan Data Dari Database... 9 2.5 Input Data Ke Database... 11 2.6 Delete Data Di Database... 13 2.7 Membuat Login Dengan Session... 15 2.8 Membuat Logout... 19 Bab 3... 21 Bab 4... 22 Bab 5... 23 DAFTAR PUSTAKA... 24 i
Daftar Gambar Gambar 2-1 Template CSS... 2 Gambar 2-2 Lokasi Folder Assets... 2 Gambar 2-3 Isi Folder Asset... 3 Gambar 2-4 File index.html menjadi index.php di View... 3 Gambar 2-5 File Controller Home... 3 Gambar 2-6 Isi Controller Home... 4 Gambar 2-7 Tampilan Sementara Template... 4 Gambar 2-8 Contoh isi Template CSS... 5 Gambar 2-9 Penggunaan Base Url... 5 Gambar 2-10 Template dalam CodeIgniter... 6 Gambar 2-11 Header, Body, Footer Template... 6 Gambar 2-12 Bagian body/konten... 7 Gambar 2-13 Isi file view/artikel.php... 7 Gambar 2-14 isi file view/index.php... 8 Gambar 2-15 Controller Home... 8 Gambar 2-16 Controller Data... 10 Gambar 2-17 Model DataModel... 11 Gambar 2-18 View Mhs... 11 Gambar 2-19 Output Data... 11 Gambar 2-20 Tambahan Controller Data... 12 Gambar 2-21 Tambahan Model DataModel... 12 Gambar 2-22 View InputMhs... 12 Gambar 2-23 Output Form Input Mhs... 13 Gambar 2-24 Tampil Data... 13 Gambar 2-25 Ubah View Mhs... 14 Gambar 2-26 Fungsi Menghapus Data... 14 Gambar 2-27 Fungsi delete di datamodel.php... 14 Gambar 2-28 Tampil Data setelah diubah... 14 ii
Daftar Tabel Tabel 2-1 Mahasiswa... 10 Tabel 2-2 Data... 10 Tabel 2-3 Mhs... 13 Tabel 2-4 isi tabel mhs... 15 iii
Bab 1 Pendahuluan 1.1 Dalam Pengembangan 1.2 1
Bab 2 Aplikasi Sederhana Dengan CodeIgniter 2.1 Memasang Template CSS di CodeIgniter 1. Persiapkan 1 buah template CSS. Untuk pembelajaran, gunakan template sesederhana mungkin agar lebih mudah. Dalam 1 buah template CSS biasanya terdapat 1 folder images, files css, dan file html (file html biasanya bernama index.html). Berikut adalah tampilan template yang saya gunakan Gambar 2-1 Template CSS 2. Buat folder baru bernama assets di dalam directory utama Codeigniter. Kemudian copy semua isi template CSS ke dalam folder assets. Gambar 2-2 Lokasi Folder Assets 2
Gambar 2-3 Isi Folder Asset 3. Sekarang folder assets telah berisikan template CSS. Untuk file index.html kita pindahkan ke dalam view (C:\xampp\htdocs\ci2\application\views) kemudian kita ubah extensi file *.html menjadi *.php (index.html menjadi index.php) Gambar 2-4 File index.html menjadi index.php di View 4. Buat controller baru di folder controller, misal buat controller home. Gambar 2-5 File Controller Home Isi dari file controller home seperti berikut 3
Gambar 2-6 Isi Controller Home 5. Jalankan controller home dari browser dengan penulisan URL sebagai berikut http://localhost/ci2/index.php/home dan hasilnya... Gambar 2-7 Tampilan Sementara Template Template diatas belum keload secara sempurna, ini dikarenakan beberapa file *.css belum terdeteksi. Kalau kita buka file index.php yang ada di view (C:\xampp\htdocs\ci2\application\views) akan kita temui beberapa baris yang meload file *.css, misal seperti berikut 4
Gambar 2-8 Contoh isi Template CSS Dibagian yang terblok diatas, terdapat pemanggilan file style.css, pemanggilan file ini perlu diubah seperti berikut 5 Gambar 2-9 Penggunaan Base Url 6. Base Url merupakan salah satu helper bawaan dari Codeigniter, yaitu url helper. Cara load url helper : a. Buka file autoload di b. Temukan baris berikut $autoload['helper'] = array(); kemudian ubah seperti berikut $autoload['helper'] = array('url'); Base Url akan mengembalikan nama situs yang kita buat. Base Url dapat kita seting di bagian config.php (C:\xampp\htdocs\ci2\application\config\config.php). Di sekitar line 17 akan kita temui baris seperti berikut $config['base_url'] = '';, bagian ini kita ubah menjadi seperti berikut $config['base_url'] = 'http://localhost/ci2'; Keterangan : ci2 adalah nama aplikasi, sesuaikan dengan aplikasi Anda. Contoh penggunaan lain dari base_url() - echo base_url("blog/post/123"); output: http://example.com/blog/post/123 - echo base_url("images/icons/edit.png"); output: http://example.com/images/icons/edit.png 7. Setelah step-step diatas dijalankan semua, silakan buka panggil ulang controller home dari browser, maka hasilnya akan menjadi
Gambar 2-10 Template dalam CodeIgniter 2.2 Memisahkan Header, Body, dan Footer Template Dalam sebuah situs atau aplikasi, bagian header dan footer akan selalu sama tampilannya. Hanya bagian body atau konten yang berganti-ganti. Gambar 2-11 Header, Body, Footer Template Untuk memisahkan bagian Header, Body, dan Footer template silakan ikuti langkah berikut 1. Buka file index.php dalam view (C:\xampp\htdocs\ci2\application\views\index.php) 6
2. Ambil bagian body atau konten dalam template, biasanya bagian body berada dalam syntax <div id="content"> </div>. Gambar 2-12 Bagian body/konten 3. Buat file baru di view untuk menampung bagian konten yang kita ambil dari view/index.php, misal artikel.php. Sekarang di dalam view terdapat file artikel.php, kita paste bagian konten yang telah kita ambil dari index.php ke artikel.php sehingga isi file view/artikel.php menjadi seperti berikut Gambar 2-13 Isi file view/artikel.php Dan isi file view/index.php setelah diambil kontennya kita ubah seperti berikut, tambahkan source <?php echo $konten;?> dibagian konten. 7
Gambar 2-14 isi file view/index.php 4. Ubah controller/home.php yang sebelumnya kita buat menjadi seperti berikut 8 Gambar 2-15 Controller Home 5. Sekarang kita panggil controller/home melalui browser dengan url sebagai berikut http://localhost/ci2/index.php/home dan url ke-2 seperti berikut http://localhost/ci2/index.php/home/artikel. Lihat perbedaannya
2.3 Koneksi Database Mysql Codeigniter telah menyediakan file konfigurasi untuk koneksi database. Untuk mengatur konfigurasi file tersebut ikuti langkah berikut 1. Buka file database.php di C:\xampp\htdocs\ci2\application\config 2. Temukan Baris berikut dan sesuaikan dengan database Anda di server $db['default']['hostname'] = 'localhost'; $db['default']['username'] = 'root'; $db['default']['password'] = ''; $db['default']['database'] = 'test'; $db['default']['dbdriver'] = 'mysql'; $db['default']['dbprefix'] = ''; $db['default']['pconnect'] = TRUE; $db['default']['db_debug'] = TRUE; $db['default']['cache_on'] = FALSE; $db['default']['cachedir'] = ''; $db['default']['char_set'] = 'utf8'; $db['default']['dbcollat'] = 'utf8_general_ci'; $db['default']['swap_pre'] = ''; $db['default']['autoinit'] = TRUE; $db['default']['stricton'] = FALSE; 3. Setelah konfigurasi pada file config/database.php selesai, silakan load koneksi. Buka file autoload.php di C:\xampp\htdocs\ci2\application\config. Temukan source berikut $autoload['libraries'] = array(); Kemudian ubah jadi seperti berikut $autoload['libraries'] = array('database'); 4. Buka situs Anda melalui browser, jika kondisi normal itu menandakan koneksi database telah berhasil. 2.4 Menampilkan Data Dari Database Sebelumnya siapkan database dahulu, nama database yang digunakan dalam tutorial adalah test. Dalam database test ini, kita siapkan 1 buah tabel sebagai latihan, misal tabel mhs. 9
Tabel 2-1 Mahasiswa Dan berikut adalah isi dari tabel mhs Tabel 2-2 Data Setelah tabel diatas siap,kita buat controller, model, dan view untuk menampilkan isi data dari tabel mhs diatas. 1. Buat file data.php di dalam controller, C:\xampp\htdocs\ci2\application\controllers\data.php 2. Buat file datamodel.php di dalam model, C:\xampp\htdocs\ci2\application\models\dataModel.php 3. Buat file mhs.php di dalam view, C:\xampp\htdocs\ci2\application\views\mhs.php 4. Isi controller/data.php sebagai berikut Gambar 2-16 Controller Data 5. Isi model/datamodel.php sebagai berikut 10
6. Isi view/mhs.php sebagai berikut Gambar 2-17 Model DataModel Gambar 2-18 View Mhs 7. Panggil controller data, function mhs dari browser dengan url http://localhost/ci2/index.php/data/mhsdan hasilnya sebagai berikut Gambar 2-19 Output Data 2.5 Input Data Ke Database Melanjutkan dari menampilkan data dari database, sekarang kita buat inputan data ke database, tabel yang kita gunakan masih tetap, yaitu tabel mhs. 1. Buka controller/data.php, dan tambahkan source berikut kedalamnya 11
Gambar 2-20 Tambahan Controller Data 2. Buka model/datamodel.php Gambar 2-21 Tambahan Model DataModel 3. Buat file baru di view dengan nama inputmhs.php, C:\xampp\htdocs\ci2\application\views\inputMhs.php dan isi source Gambar 2-22 View InputMhs 12
Didalam view/inputmhs.php, terdapat beberapa form helper yang sudah disediakan oleh Codeigniter, yaitu form_open(), form_close(), form_input(), form_submit(), dan masih banyak lainnya. Untuk menggunakan form helper ini, kita harus meloadnya dahulu a. Buka file config/autoload.php b. Temukan baris berikut $autoload['helper'] = array('url'); lalu tambahan tulisan form ke dalam array, sehingga menjadi $autoload['helper'] = array('url','form'); 4. Lalu kita jalankan dari browser, dan coba inputkan data Gambar 2-23 Output Form Input Mhs 5. Ketika kita simpan, maka form akan mengarah ke url http://localhost/ci2/index.php/data/savemhs. Dan data masuk ke tabel mhs Tabel 2-3 Mhs 2.6 Delete Data Di Database Sebelumnya kita sudah membuat tampil data dari database. Dari data yang ditampilkan tersebut akan kita hapus datanya. Kalau kita lihat, sebelumnya tampil data hasilnya sebagai berikut 13 Gambar 2-24 Tampil Data Sekarang tampilan diatas kita tambahi link untuk delete data,
1. Buka file view/mhs.php, kemudian ubah isi sourcenya seperti berikut Gambar 2-25 Ubah View Mhs 2. Buka file controller/data.php, lalu kita tambahkan function berikut Gambar 2-26 Fungsi Menghapus Data 3. Buka file model/datamodel.php, lalu kita tambahakn function berikut Gambar 2-27 Fungsi delete di datamodel.php 4. Sekarang buka tampilan datanya, outputny seperti ini setelah kita ubah 14 Gambar 2-28 Tampil Data setelah diubah
5. Hapus salah satu data, misal nim A11.20xy.xyxyx akan kita hapus, maka link delete akan mengarah ke url http://localhost/ci2/index.php/data/deletemhs/a11.20xy.xyxyx. Dan nim A11.20xy.xyxyx telah hilang dari tabel mhs Tabel 2-4 isi tabel mhs 2.7 Membuat Login Dengan Session 1. Kita buat file controller/dashboard.php, dan isi filenya seperti ini 2. Buat file view/dashboard.php, dan kita isi seperti ini 3. Dan kalau kita jalankan dari browser http://localhost/ci/index.php/dashboard tampilan yang keluar seperti ini. 4. Sekarang kita buat agar url http://localhost/ci/index.php/dashboard bisa dibuka jika user sudah login. Jika belum login akan dilempar (redirect) ke url http://localhost/ci/index.php yang tampilannya seperti ini. 15
5. Sebelum membuat login aktifikan dulu sessionnya, caranya a. Buka file config/autoload.php, temukan baris yang isinya $autoload['libraries'] dan ubah buat jadi seperti ini $autoload['libraries'] = array('database','session'); b. Buka file config/config.php, temukan baris berikut $config['encryption_key'] = ''; lalu kita isi variable tersebut, (BEBAS). Tujuannya sebagai kunci untuk melakukan enkripsi session di Codeigniter. Misal kita isi kayak gini $config['encryption_key'] = '585adf88cdd3693831b0748f409ce846'; c. Lalu kita cari baris berikut $config['sess_cookie_name'] = 'ci_session'; $config['sess_expiration'] = 7200; $config['sess_expire_on_close'] = FALSE; $config['sess_encrypt_cookie'] = FALSE; $config['sess_use_database'] = FALSE; $config['sess_table_name'] = 'ci_sessions'; $config['sess_match_ip'] = FALSE; $config['sess_match_useragent'] = TRUE; $config['sess_time_to_update'] = 300; Dan kita ubah baris berikut $config['sess_cookie_name'] = 'ci_session_bebas'; 6. Di controller/dashboard.php kita buka lagi lalu sesuaikan isi source seperti berikut 16
7. Sekarang kalau kita jalankan url http://localhost/ci/index.php/dashboard maka akan dilempar ke halaman yang http://localhost/ci/index.php. Ini karena $this->session->userdata('login') belum bernilai true. $this->session->userdata('login') akan kita set nilainya true ketika kita login. 8. Membuat login a. Buat sebuah tabel di database dengan nama tabel user b. Masukkan 1 buah data ke tabel user untuk login nanti, seperti berikut Setelah diinput seperti diatas, jika kita refresh tabelnya maka akan menjadi seperti berikut c. Buat file controller/login.php, dan isi controller seperti berikut 17
d. Buat file model/loginmodel.php dengan isi seperti ini 18
e. Buat file views/login.php dengan isi seperti ini f. Sekarang kita coba jalankan controller login dengan url http://localhost/ci2/index.php/login, dan tampilan yang muncul seperti ini g. Sekarang kita coba login, jika username dan password yang diinput benar maka halaman akan diredirect ke http://localhost/ci2/index.php/dashboard dan jika salah maka akan kembali muncul form login 2.8 Membuat Logout Melanjutkan dari login yang sudah kita buat, sekarang kita buat menu untuk logout 1. Buka file views/dashboard.php lalu tambahkan isi file seperti ini 2. Buka file controller/login.php lalu tambahkan isi file seperti ini 19
3. Sekarang kita buka url http://localhost/ci2/index.php/dashboard maka akan muncul link logout 4. Setelah kita klik tombol logout maka session login dihapus dan url http://localhost/ci2/index.php/dashboard tidak dapat kita akses 20
Bab 3 21
Bab 4 22
Bab 5 23
24 DAFTAR PUSTAKA