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
i
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
ii
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
iii
Daftar Tabel
Tabel 2-1 Mahasiswa ... 10
Tabel 2-2 Data... 10
Tabel 2-3 Mhs ... 13
1
Bab 1
Pendahuluan
1.1 _____
Dalam Pengembangan
2
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.
3
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
4
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
5
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
6
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)
7
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.
8
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
9
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.
10
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
11
Gambar 2-17 Model DataModel 6. Isi view/mhs.php sebagai berikut
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.
12
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
13
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
Gambar 2-24 Tampil Data
14
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
15
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
