ci

Hands-On Lab Code Igniter 2.1.0 Created By

: Willy Achmat Fauzi

Lab version

: 1.0

Last updated

: 3/16/2012

Contents OVERVIEW ............................................................................................................................................. 4 BAB 1: KONFIGURASI CODEIGNITER.................................................................................................. 5

Task 1 – Konfigurasi CodeIgniter ...................................................................................................... 5 Task 2 – Konfigurasi Tema................................................................................................................ 6 BAB 2: MEMBUAT LAYOUT UTAMA..................................................................................................... 8

Task 1 – Membuat Controller........................................................................................................... 8 Task 2 – Membuat View Template ................................................................................................... 8 BAB 3: DATA MODELING .................................................................................................................... 23

Task 1 – Membuat Conceptual Data Model .................................................................................... 23 Task 2 – Relationship pada CDM .................................................................................................... 27 Task 3 – Phisical Data Model .......................................................................................................... 31 Task 4 – Generate Script ................................................................................................................ 33 Task 5 – Intellisense Pada Netbeans & CodeIgniter ........................................................................ 36 BAB 4: MANAJEMEN CONTROLLER ................................................................................................. 38

Task 1 – Inhertiance Pada CodeIgniter Controller ........................................................................... 38 Task 2 – Menampilkan menu secara dinamis ................................................................................. 39 Task 3 – Clean URL pada XAMPP web server .................................................................................. 48 BAB 5: PENGATURAN HAK AKSES ................................................................................................... 50

Task 1 – Pembuatan Desain Halaman Login.................................................................................... 50 Task 2 – Redirect ke halaman login ................................................................................................ 53 Task 3 – Mekanisme Login ............................................................................................................. 54 Task 4 – Pembatasan Hak Akses (menu)......................................................................................... 64 BAB 6: CRUD ..................................................................................................................................... 68

Task 1 – Menampilkan Data ........................................................................................................... 68 Task 2 – Menambahkan Fitur Pagging ............................................................................................ 73 Task 3 – Insert Data ....................................................................................................................... 80 Task 4 – Edit Data .......................................................................................................................... 93 Task 5 – Delete Data ...................................................................................................................... 99 Task 6 – Validation Rule ............................................................................................................... 102

BAB 7: BULK ACTION ..................................................................................................................... 109 BAB 8: PATTERN IMPLEMENTATION ............................................................................................ 110 BAB 9: CODE GENERATION ........................................................................................................... 111 BAB 10: AJAX & JQUERY ............................................................................................................... 112

Overview Pada pelatihan ini difokuskan untuk dapat membuat aplikasi sederhana dengan codeigniter dan power designer 15 sebagai database modeler.

Objectives Pada pelatihan ini akan dibahas tentang : 



Code Igniter ◦

MVC

◦

Session

◦

Pagging

◦

Authentication

◦

Menu Management

Power Designer ◦

Data Modeling (CDM, PDM)

◦

Code Generation

System Requirements Perlu disiapkan software berikut untuk dapat mengikuti lab ini: 

XAMPP



Power Designer 15



Netbeans 7.1



Code Igniter 2.1

BAB 1: Konfigurasi CodeIgniter Pada bab ini akan dibahas bagaimana konfigurasi CodeIgniter yang akan berjalan di web server Apache. Sebelumnya install terlebih dahulu XAMPP, Power Designer 15 dan Netbeans 7.1. Task 1 – Konfigurasi CodeIgniter Download CodeIgniter versi 2.1 pada alamat web: http://codeigniter.com/downloads/ Setelah itu extract dan pindahkan ke web server pada folder : C:\xampp\htdocs\training Buat project baru pada Netbeans : File -> New Project -> PHP -> PHP Application From Exsisting Source. Kemudian arahkan source folder ke folder yang telah di-copy-kan source code CodeIgniter.

Sehingga struktur file akan tampak seperti berikut :

Setelah membuat project kita akan melakukan konfigurasi awal untuk CodeIgniter. File yang harus kita konfigurasi: config.php, database.php, autoload.php dan route.php, semua file ini berada di dalam folder yang sama "application/system/config". config.php $config['base_url'] = "http://localhost/training/"; $config['encryption_key'] = 'codeignitertraining';

database.php $db['default']['hostname'] = "localhost"; $db['default']['username'] = "root"; $db['default']['password'] = ""; $db['default']['database'] = "training"; $db['default']['dbdriver'] = "mysql";

autoload.php $autoload['libraries'] = array('database', 'session'); $autoload['helper'] = array('url', 'form');

route.php $route['default_controller'] = "dashboard";

Dari setting-setting di atas ‘base url’ adalah dimana halaman utama berada, kemudian database adalah pengaturan koneksi ke database, sedangkan autoload adalah modul-modul apa saja yang diinisialisasikan di awal program, sehingga tidak perlu tiap kali dibutuhkan dipanggil secara berulangulang. Terakhir adalah ‘default controller’ yaitu fungsi yang pertama dipanggil bila alamat ‘base url’ yang di set sebelumnya dipanggil. Task 2 – Konfigurasi Tema Download tema pada alamat web : http://www.netdreams.co.uk/index.php/blog/2010/02/18/free-admin-skin-available-for-download/

Buat folder assets pada direktori training. C:\xampp\htdocs\training\assets Extract file admin-xhtml, dan pindahkan beberapa direktori ke direktori asset antara lain : -

css images js

Sehingga struktur file yang baru akan menjadi seperti berikut :

BAB 2: Membuat Layout Utama Pada bab ini akan difokuskan untuk membuat layout utama dengan tema yang telah disiapkan sebelumnya, dan cara mengatur view agar lebih hemat kode dan mudah untuk di maintenance. Task 1 – Membuat Controller Sebelumnya kita telah mengatur default_controller pada file route.php. Sehingga controller inilah yang pertama akan dijalankan saat kita membuka base uri dari web site yang telah kita konfigurasi. Controller tersebut sebelumnya kita set dengan nama “dashboard”. Untuk membuat controller sesuai dengan konfigurasi tersebut ikuti langkah-langkah berikut ini : 1. Buat file dengan nama dashboard.php pada direktori “training/applications/controllers/”. 2. Isi file tersebut dengan source code berikut : dashboard.php

3. Buka halaman http://localhost/training/ Setelah menjalankan langkah tersebut maka pada layar web browser akan di tampilkan teks “Dashboard” sesuai dengan yang kita tuliskan pada function index di class dashboard. Task 2 – Membuat View Template Pada kali kita akan membuat view lebih terorganisasi dengan baik, kode tidak perlu dituliskan secara berulang-ulang pada controller pada beberapa view yang dipisahkan. Berikut adalah contoh bila kita load view pada controller bila tema header, content, footer dan menu dipisahkan.

Bila ada banyak halaman maka tentunya kita akan menuliskan ulang kode-kode yang sama, seperti halnya yang terlihat seperti diatas, untuk mengurangi penulisan ulang kode-kode tersebut kita dapat membuat sebuah Template View yang mengorganisasi semua view yang akan dipanggil. Contoh seperti pada gambar berikut :

Sehingga pada controller kita akan menghemat baris menjadi seperti berikut :

Seperti yang telah kita ketahui bahwa pada MVC pattern View digunakan sebagai User Interface (Tampilan) yang terpisah dengan alur proses (rule). Untuk membuat Template View dapat dilakukan dengan cara: 1. Buat file dengan nama container.php pada direktori “training/applications/views/”. 2. Isi file tersebut dengan source code berikut : container.php

3. Kemudian buat direktori part pada direktori “training/applications/views/”. Setelah itu buat 5 file sebagai berikut : 

meta.php



script.php



header.php



menu.php



footer.php

4. Dari tema yang telah kita download terdapat file text.html yang berisi satu halaman penuh halaman web yang telah tertata rapi, seperti pada gambar berikut :

Buka source code dan kita pisahkan menjadi 5 bagian seperti yang telah kita atur sebelumnya. Setelah kita pisahkan maka masing-masing file menjadi seperti berikut : meta.php {{title}}

script.php