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... 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 Bab 3... 16 Bab 4... 17 Bab 5... 18 DAFTAR PUSTAKA... 19 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 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 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 5
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 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 8
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 Gambar 2-28 Tampil Data setelah diubah 14
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 15
Bab 3 16
Bab 4 17
Bab 5 18
19 DAFTAR PUSTAKA