codeigniter 2.0 - 1. konsep dasar mvc dan routing

CodeIgniter 2.0

Devid Haryalesmana Wahid

Basic Introduction

[email protected]

Devid Haryalesmana Wahid (http://masdevid.com)

1

CodeIgniter 2.0 Dasar-dasar Framework CodeIgniter

TUJUAN PRAKTIKUM

1. Memahami konsep Model-View-Controller (MVC)

2. Memahami konsep dasar Routing

3. Mampu membuat validasi form

4. Mampu membuat koneksi dan manipulasi database menggunakan Active Record

Dasar Teori

Framework

Framework adalah sekumpulan fungsi, class, dan aturan-aturan. Berbeda dengan library

yang sifatnya untuk tujuan tertentu saja, framework bersifat menyeluruh mengatur bagaimana

kita membangun aplikasi. Framework memungkinkan kita membangun aplikasi dengan lebih

cepat karena sebagai developer kita akan lebih memfokuskan pada pokok permasalahan

sedangkan hal-hal penunjang lainnya seperti koneksi database, form validation, GUI, dan

security; umumnya telah disediakan oleh framework.

CodeIgniter

CodeIgniter adalah salah satu framework php yang tangguh dan popular yang awalnya

ditulis oleh Rick Ellis, pendiri dan CEO EllisLab.com, perusahaan yang mengembangkan

codeigniter. Saat ini, codeigniter dikembangkan oleh komunitas dan disebarkan ke seluruh dunia

dengan lisensi bebas. CodeIgniter tergolong framework dengan ukuran kecil dan cukup mudah

di kuasai. CI juga datang dengan manual yang tergolong lengkap. CodeIgniter adalah sebuah

framework PHP. Framework itu sendiri adalah suatu kerangka kerja yang berupa sekumpulan

folder yang memuat file-file php yang menyediakan class libraries, helpers, plugins dan lainnya .

Framework menyediakan konfigurasi dan teknik coding tertentu.


2

Konsep Model-View-Controller

Konsep Model-View-Controller (MVC) adalah konsep pemisahan antara logika

pemrograman dengan tampilan dan database. Manfaat konsep ini adalah, membuat logika

pemrograman lebih sederhana dan mudah dipahami, karena sudah dipisah dengan code untuk

tampilan dan membuat programmer dapat bekerja secara terpisah dengan designer. Program-

mer mengerjakan logika pemrogramannya, sedangkan designer berkutat dengan design dan

tampilan.

Model: Merupakan code struktur data. Model berisi fungsi di dalam pengolahan data-

base. Script SQL masuk di sini.

View: Merupakan code untuk menampilkan tampilan suta program. Tampilan dapat be-

rupa web page, header, footer dan apa saja yang berjenis tampilan.

Controller: Merupakan code untuk logic, algoritma dan sebagai penghubung antara model,

view, dan sumber lain yang di perlukan untuk mengolah HTTP request dan gene-

rate web page.

CI menerapkan pola MVC yang flexible, karena model dapat tidak di gunakan. Anda dapat

hanya menggunakan Controller dan View saja dalam menggunakan CI tanpa Model. Jika anda

tidak memerlukan pemisahan di dalam struktur data dan database atau menganggap peng-

gunaan model hanya menambah kompleks aplikasi dengan keuntungan yang kurang sebanding,

maka anda dapat tidak menggunakan model.

Download CodeIgniter di http://ellislab.com/codeigniter/download

Download WAMP Server di http://www.wampserver.com/en/


3

Latihan

Dalam praktikum ini, anda akan membuat aplikasi dasar web berita. Anda akan

belajar menulis kode untuk menampilkan halaman web statis. Kemudian, anda akan

membuat kolom berita yang diambil dari database. Terakhir, anda akan membuat form

untuk membuat berita baru ke dalam database.

Instalasi

Install WAMP Server terlebih dahulu.

Ekstrak CodeIgniter_2.1.3.zip ke dalam root direktori (C:/wamp/www/)

Rename folder CodeIgniter_2.1.3 menjadi folder webberita

Pada browser akses alamat localhost/webberita; Jika instalasi berhasil maka anda

akan mendapatkan tampilan halaman welcome seperti gambar 1.

Gambar 1: Halaman Welcome CodeIgniter

Struktur Folder CodeIgniter

Perhatikan gambar disamping, ini adalah struktur folder

CodeIgniter. Dalam membuat aplikasi web berita ini nanti anda

akan berfokus pada folder ini saja:

Config

Controllers

Models

Views

Untuk text editornya anda dapat menggunakan notepad,

notepad++, atau menggunakan IDE seperti Aptana,

Dreamweaver, PHPStorm. Dalam modul praktikum ini penulis

menggunakan IDE PHPStorm 5.0.


4

Membuat Halaman Web Statis

Hal pertama yang akan anda lakukan adalah membuat Controller untuk menangani

halaman statis web. Controller adalah sebuah class yang didalamnya terdapat method

berupa sekumpulan function.

Sebelum membuat controller, anda perlu memahami skema URL CodeIgniter seperti

berikut ini:

Jadi ketika anda memanggil URL http://webberita/berita/terbaru/10 maka dapat

kita ketahui bahwa URL akan memanggil controller berita dengan function terbaru

dan argument 10.

Buat file pages.php pada direktori application/controllers/ , dengan kode seperti

berikut:

Disini anda telah membuat sebuah class bernama Pages yang telah mewarisi method,

variable, dan function class CI_Controller. Controller adalah pusat setiap request yang

akan dilayani pada aplikasi web anda. Seperti pada class php pada umumnya, anda

akan menggunakan $this untuk memuat libraries, views, helpers, dan instruksi-

instruksi umum yang digunakan framework.

Setelah anda membuat method view pada class pages, sekarang buat template

untuk header dan footer halaman.

Buat file header.php pada direktori application/views/templates/ , dengan kode

seperti berikut:

Lalu, buat file footer.php pada direktori application/views/templates , dengan

kode seperti berikut:


5

Setelah anda membuat template header dan footer, buatlah file home.php dan

about.php pada direktori application/views/pages/. Pada home.php, tuliskan apa

yang anda suka seperti Apa kabar dunia?. Dan pada about.php tuliskan biodata anda

seperti nama, nomor induk mahasiswa, dan alamat email.

Menambahkan logika program pada Controller

Untuk dapat memuat halaman home dan about, pertama-tama anda membuat logika

untuk memeriksa apakah halaman tersebut benar-benar ada, jika tidak maka tampilkan

halaman error.

Disini anda dapat mengakses halaman home dan about anda lengkap dengan header

dan footernya. Berikut link untuk mengakses halaman tersebut,

http://localhost/webberita/index.php/pages/view/home

Sedangkan untuk mengakses halaman about, berikut linknya:

http://localhost/webberita/index.php/pages/view/about

Mengatur Routing Halaman

Anda dapat membuat aturan routing custom untuk memetakan halaman anda pada

controller dan method manapun.

Buka file application/config/routes.php, lalu ubah kode didalamnya seperti kode

berikut:


6

Manfaat dari routing ini, untuk memberitahu system bahwa default controllernya adalah

pages/view dan pada aturan route kedua, setiap request apapun akan dilewatkan pada

method view di class pages. Sehingga, sekarang anda dapat mengakses halaman home

dan about menggunakan URL berikut:

http://localhost/webberita/index.php/home

http://localhost/webberita/index.php/about

Lebih singkat bukan? Disini nama controller dan methodnya menjadi tidak mudah

diketahui. ;)


7

Membuat Halaman Berita

Disini kita akan membuat halaman berita yang nantinya berita yang ditampilkan akan

diambil dari database.

Membuat Model

Pertama-tama kita buat database berita dan atur konfigurasi databasenya dengan

cara, buka application/config/database.php

$db['default']['hostname'] = "localhost";

$db['default']['username'] = "root";

$db['default']['password'] = "";

$db['default']['database'] = "berita";

Kemudian buat tabel dengan mengeksekusi query berikut ini:

Lalu kita dapat memulai membuat Model untuk mengakses informasi dari database.

Buat file news_model.php pada direktori application/models/, dan tuliskan kode

berikut ini:

Lalu tambahkan method get_news, seperti berikut ini:


8

Menampilkan Berita

Sekarang query untuk mengambil informasi berita dari database telah dibuat, sekarang

membuat controller dan view-nya untuk menampilkan berita tersebut.

Pertama buat controller baru bernama news.php pada direktori

application/controllers/, tuliskan kode berikut:

Sekarang data telah diterima oleh controller melalui model, tapi ini belum bisa

menampilkan apa-apa. Data perlu dilewatkan ke view untuk nantinya dirender menjadi

sebuah tampilan halaman web dinamis.

Modifikasi pada method index() seperti kode berikut:

Disini data dari database diset kedalam variable $data[news], bersamaan dengan

judul halaman yang diset kedalam variable $data[title] yang kemudian data

dilewatkan ke view menggunakan parameter $data.

Buat index.php pada direktori application/views/news/, dan tulis kode berikut:


9

Disini tiap item berita akan ditampilkan, tapi tampilan individual berita belum. Untuk

membuat tampilan individual berita, buka kembali controller news dan modifikasi

method view() yang dibuat sebelumnya menjadi seperti berikut ini:

Lalu buat lagi view untuk tampilan individual berita pada direktori

application/views/news/ dengan nama file view.php, lalu tulis kode berikut:

Langkah terakhir untuk latihan menampilkan berita ini adalah menambahkan aturan

baru pada Routing halaman. Buka kembali application/config/routes.php dan

modifikasi kodenya seperti berikut:

Coba akses http://localhost/webberita/index.php/news untuk melihat hasilnya.


10

Membuat Berita Baru

Pada latihan sebelumnya anda sudah membuat halaman untuk menampilkan berita tapi

belum ada berita yang dapat ditampilkan karena belum ada data di database. Oleh karena

itu sekarang anda akan mulai membuat halaman untuk membuat berita baru.

Membuat Form

Untuk memasukkan data baru ke dalam database, anda perlu membuat form dimana

user dapat memasukkan berita baru. Buat view create.php pada direktori

application/views/news/ dan tulis kode berikut:

Kemudian buka kembali controller news.php dan tambahkan method berikut:


11

Kemudian buat success.php pada direktori application/views/news/ dan tuliskan

kode berikut :

News added! or

Kemudian buka kembali model news_model.php dan tambahkan method berikut:

Kemudian anda tambahkan lagi aturan routing baru untuk menambahkan berita. Buka

kembali application/config/routes.php dan modifikasi kodenya seperti berikut:

Coba akses http://localhost/webberita/index.php/news/create dan tambahkan berita

baru.

Selanjutnya anda dapat mengeksplorasi Library, Helper, dan Class bawaan

CodeIgniter secara offline pada http://localhost/[namasitus]/user_guide

Dokumentasi CI sangat bagus dan detail berikut tutorialnya, jika ada pertanyaan

silahkan kirim email ke [email protected]

codeigniter 2.0 - 1. konsep dasar mvc dan routing

Documents