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 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

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

Gambar 2-28 Tampil Data setelah diubah ............................................................................... 14

iii

Daftar Tabel

Tabel 2-1 Mahasiswa ............................................................................................................... 10

Tabel 2-2 Data.......................................................................................................................... 10

Tabel 2-3 Mhs .......................................................................................................................... 13

Tabel 2-4 isi tabel mhs ............................................................................................................. 15

1

Bab 1 Pendahuluan

1.1 _____

Dalam Pengembangan

1.2 ______

2

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

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

http://localhost/ci2/index.php/home/artikel. Lihat perbedaannya

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.

1. Buka controller/data.php, dan tambahkan source berikut kedalamnya

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

Gambar 2-22 View InputMhs

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

Sekarang tampilan diatas kita tambahi link untuk delete 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

Gambar 2-28 Tampil Data setelah diubah

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

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.

16

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

17

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

18

d. Buat file model/loginModel.php dengan isi seperti ini

19

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

20

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

21

Bab 3 _____

22

Bab 4 _______

23

Bab 5 ________

24

DAFTAR PUSTAKA