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
1.1 _____ Dalam Pengembangan
1.2 ______
1
Pendahuluan
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
.
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 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
http://localhost/ci2/index.php/home/artikel. Lihat perbedaannya
8
seperti
berikut
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
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. 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
Gambar 2-24 Tampil Data
Sekarang tampilan diatas kita tambahi link untuk delete data,
13
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
________
DAFTAR PUSTAKA
19
