PRAKTIKUM. Rekayasa Web. Modul 1: Introduction CodeIgniter. Laboratorium Teknik Informatika Universitas Pasundan

(1)

Rekayasa Web

Modul 1: Introduction CodeIgniter

Laboratorium Teknik Informatika

Universitas Pasundan

(2)

TIM DOSEN IF 1

Konten modul:

1. What is CodeIgniter?

2. MVC

3. Template

Tujuan praktikum:

1. Praktikan diharapkan mampu mengetahui hal-hal seputar CodeIgniter (CI).

2. Praktikan diharapkan mampu memahami Konsep MVC pada CodeIgniter (CI).

3. Praktikan diharapkan mampu memahami templating web page menggunakan CI..

(3)

TIM DOSEN IF 2

1 Bagian 1

Teori

1.1 CodeIgniter

CodeIgniter adalah sebuah web framework yang dikembangkan oleh Rick Ellis dari Ellis Lab.

CodeIgniter dirancang untuk menjadi sebuah web framework yang ringan dan mudah untuk digunakan.

Bahkan pengakuan dari Rasmus Lerdorf, pencipta Bahasa pemrograman PHP, mengatakan bahwa

CodeIgniter merupakan web framework yang mudah dan andal.

1.1.1 Seputar CodeIgniter

Sebelum mencoba CodeIgniter, perlu diketahui istilah web framework itu sendiri. Menurut

Microsoft Computer Dictionary, web adalah sekumpulan dokumen yang saling terhubung dalam sistem

hypertext yang penggunanya akan menjelajahi web melalui halaman beranda. Sedangkan framework

adalah desain struktur dasar yang dapat digundakan kembali (reuseable) yang terdiri dari abstract class

dan concrete class di pemrograman berorientasi objek.

Menurut dokumentasi CodeIgniter, CodeIgniter merupakan toolkit bagi orang yang ingin

membangun aplikasi web menggunakan PHP. Tujuannya adalah membuat pengembangan proyek

menjadi lebih cepat dibandingkan dengan menulis kode dari awal (scratch). CodeIgniter menyediakan

kumpulan library untuk tugas–tugas yang sering dilakukan (commonly needed task) dan sangat mudah

untuk mengakses library yang tersedia di CodeIgniter. Dengan menggunakan CodeIgniter, kita cukup fokus

pada pengembangan proyek dan meminimalisasi jumlah kode yang akan dibuat.

Sebagai web framework populer yang menggunakan bahasa pemrograman PHP, CodeIgniter

mempunyai berbagai keunggulan, seperti:

1. Free, karena berada dibawah lisensi open source mirip Apache/BSD, kita dapat melakukan apapun

dengan CodeIgniter. Lisensi lengkapnya dapat dilihat di halaman dokumentasi

2. Light Weight, sistem inti CodeIgniter memerlukan library yang sedikit. Berbeda sekali dengan

framework lainnya yang membutuhkan banyak sumber daya tambahan. Library tambahan akan

digunakan ketika request secara dinamis, membuat sistem yang dibangun menjadi eﬁsien dan cukup

cepat

3. Fast, menurut dokumentasi, performa yang dimiliki CodeIgniter terbukti cepat setelah dibandingkan

dengan web framework lainnya

(4)

TIM DOSEN IF 3

4. Menggunakan kaidah M-V-C, Dengan menggunakan Model-View-Controller, kita dapat

memisahkan bagian logic dan presentation dari aplikasi yang kita bangun. Hal ini tentu sangat cocok

dan bagus untuk proyek yang memfokuskan desainer fokus pada template ﬁle dan programmer fokus

pada pembangunan logic dari aplikasi yang dibangun

5. Menghasilkan URL yang bersih, URL yang dihasilkan oleh CodeIgniter bersih dan ramah terhadap

mesin pencari. CodeIgniter menggunakan pendekatan segment-based dibandingkan dengan query

string yang biasa digunakan oleh programmer yang tidak menggunakan web framework. Gambar 1.1

menggambarkan contoh URL yang dihasilkan CodeIgniter:

Gambar 1.1 Hasil URL CodeIgniter

6. Packs a Punch, CodeIgniter hadir dengan berbagai library yang akan membantu tugas - tugas di

pengembangan web yang sudah umum dan sering dilakukan seperti mengakses database,

mengirim email, validasi data dari form, mengelola session, manipulasi gambar, bekerja dengan

XML-RPC dan masih banyak lagi

7. Extensible, kita dapat menambahkan library atau helper yang kita ciptakan sendiri ke dalam

CodeIgniter. Selain itu kita dapat juga menambahkan ﬁtur lewat class extension atau system hooks.

8. Thoroughly Documented, hampir semua ﬁtur, library, dan helper yang ada di CodeIgniter telah

terdokumentasi dengan lengkap dan tersusun dengan baik. Ketika mendapatkan unduhan

CodeIgniter, dokumentasinya sudah tersedia dan siap digunakan

9. Mempunyai komunitas yang ramah, komunitas CodeIgniter sangat ramah dan siap membantu

pengguna CodeIgniter pemula atau yang sudah mahir. Komunitasnya dapat ditemui di :

http://forum.codeigniter.com/

1.1.2 Cara Kerja Codeigniter

Untuk melengkapi pemahaman mengenai CodeIgniter, terdapat sebuah diagram yang

menjelaskan cara kerja CodeIgniter yang ada pada gambar 1.2:

(5)

TIM DOSEN IF 4

Gambar 1.2 Cara Kerja CodeIgniter

Berikut adalah penjelasan cara kerja CodeIgniter:

1. index.php bertindak sebagai controller terdepan, dan menginisialisasi resource yang diperlukan

untuk menjalankan CodeIgniter.

2. Router memeriksa HTTP request untuk menentukan apa yang harus dikerjakan

3. Jika cache ﬁle ada, maka akan ditampilkan langsung, dengan melewati eksekusi normal sistem

4. Sebelum memuat controller, HTTP request akan memeriksa apa yang disubmit user dan

memﬁlternya untuk keamanan.

5. Controller memuat model, core libraries, plugin, helper, dan resource lainnya untuk

6. memproses permintaan tertentu

7. View ditampilkan di browser sesuai proses yang dikerjakan controller. Jika caching dijalankan,

view akan di-cache terlebih dahulu agar dapat ditampilkan di request selanjutnya.

1.2 MVC

Model-View-Controller atau MVC adalah sebuah metode untuk membuat sebuah aplikasi dengan

memisahkan data (Model) dari tampilan (View) dan cara bagaimana memprosesnya (Controller). Dalam

implementasinya kebanyakan framework dalam aplikasi website adalah berbasis arsitektur MVC (gambar

1.3). MVC memisahkan pengembangan aplikasi berdasarkan komponen utama yang membangun

sebuah aplikasi seperti manipulasi data, antarmuka pengguna, dan bagian yang menjadi kontrol dalam

sebuah aplikasi. Berikut Penjelasan singkat mengenai MVC:

• Model, Model mewakili struktur data. Biasanya model berisi fungsi-fungsi yang membantu seseorang

dalam pengelolaan basis data seperti memasukkan data ke basis data, pembaruan data dan lain-lain.

• View, View adalah bagian yang mengatur tampilan ke pengguna. Bisa di katakan berupa halaman

(6)

TIM DOSEN IF 5

• Controller, Controller merupakan bagian yang menjembatani model dan view Controller berisi

perintah-perintah yang berfungsi untuk memproses suatu data dan mengirimkannya ke halaman

web.

Gambar 1.3 Konsep MVC

1.3 Templating Web Page

Untuk membuat template website yang dinamis, sama seperi menggunakan include() pada bagian

header dan footer pada penggunaan PHP native, tetapi di codeigniter kita membuat nya dengan

men-load view codeigniter yang kita pisah-pisahkan sesuai keinginan, misalnya anda bisa memisahkan bagian

header, footer, sidebar dan konten untuk mencegah pengulangan penulisan syntax dan memudahkan

dalam hal memodifikasi temlate website.

Material Kit adalah Free Bootstrap UI Kit sebuah desain baru yang fresh terinpirsasi oleh material

desain milik Google. Creative Tim Memperkenalkan konsep material dalam rangkaian komponen yang

indah dan mudah digunakan. Seiring dengan restyling elemen Bootstrap, selengkapnya dapat dilihat di

alamat :

https://www.creative-tim.com/product/material-kit

(7)

TIM DOSEN IF 6

2 Bagian 2

Latihan

2.1 Instalasi CodeIgniter

CodeIgniter dapat di download gratis di website resminya yaitu www.codeigniter.com. Pada kuliah

kali ini silahkan download di modul online. Silahkan ikuti intruksi dibawah ini.

1. Setelah mendownload dari module online, Kemudian Extract Folder CodeIgniter yang sudah di

download sebelumnya ke direktori htdocs, kemudian ganti nama folder CodeIgniter_3.x.x

tersebut dengan CI_NRP yang selanjutnya akan menjadi direktori kerja Anda, sehingga seperti

yang ada pada gambar 2.1.

Gambar 2.1 Struktur Folder CodeIgniter

2. Aktifkan Apache (web server) dan MySQL (database) melalui XAMPP Control Panel

3. Akses direktori tersebut lewat browser dengan URL : http://localhost/CI_NRP

4. Jika berhasil maka akan muncul tampilan seperti pada gambar 2.2.

(8)

TIM DOSEN IF 7

2.2 Membuat Hello World

Pada Latihan kali ini kita akan membuat sebuah tulisan “hello world” di codeigniter. Caranya cukup

mudah. Silakan ikuti intruksi dibawah ini!

1. Buka file didirektori Application -> Controllers -> Welcome.php, kemudian ikuti scriptnya seperti

gambar 2.3.

Gambar 2.3 Fungsi Index

2. Kemudian buka file didirektori Application -> views -> welcome_message.php. kemudian ikuti

scriptnya gambar 2.4.

Gambar 2.4 Halaman Utama

Setelah mengikuti instruksi diatas silahkan refresh kembali url :

http://localhost/CI_NRP

tersebut amati

hasilnya.

2.3 Templating web page

2.3.1 Persiapan

Untuk membuat templating web page, ada banyak hal yang harus dipersiapkan. Pertama, buka file

hasil download source code sebelumnya terdapat didalamnya sebuah folder assets Extract Folder tersebut

di direktori xampp -> htdocs -> CI_NRP . Pastikan ada tiga buah folder, seperti yang ada pada gambar

2.5.

Gambar 2.5 Struktur Folder Utama CI_NRP

(9)

TIM DOSEN IF 8

Gambar 2.6 Struktur Folder Views

Buatlah dua buah file pada application/controllers bernama buku.php dan kategori.php. Buat juga

dua buah file pada application/models bernama m_buku.php dan m_kategori.php. Buatlah tiga buah file

pada application/views/buku, yaitu dashboard.php, tambah_buku.php, dan ubah_buku.php. Pada

application/views/kategori, buat juga tiga buah file, antara lain: dashboard.php, tambah_kategori.php, dan

ubah_kategori.php.

Untuk modularisasinya, buatlah file header.php, footer.php, dan sidebar.php di dalam folder parts.

Dan yang terakhir, buat sebuah file pada folder template dengan nama my_template.php. Dengan begitu,

persiapan telah selesai.

2.3.2 Pembuatan Halaman Website

Pertama, ketikkan kode-kode yang ada pada gambar 2.7 ke dalam file buku.php.

Gambar 2.7 Source Code Buku.php

(10)

TIM DOSEN IF 9

Gambar 2.8 Source Code Kategori.php

Buatlah tampilan halaman web dengan memanfaatkan file-file yang telah dimodularisasi. Ketikkan

kode yang tercantum pada gambar 2.9 untuk membuat header.php simpan pada folder parts.

Gambar 2.9 Source Code Header.php

Untuk file footer.php bisa diisi oleh source code yang tertera pada gambar 2.10.

(11)

TIM DOSEN IF 10

Ketik kode yang tertera pada gambar 2.11 ke file sidebar.php.

Gambar 2.11 Source Code sidebar.php

Selanjutnya, buatlah sebuah file my_template.php simpan pada folder template lalu ketikan kode sesuai

pada gambar 2.12

(12)

TIM DOSEN IF 11

Sekarang, mari kita mulai membuat kontennya. Untuk membuat halaman utama buku, salin kode

berikut ini dan simpan sebagai file dashboard.php pada folder buku.

<button type="button" class="navbar-toggle" data-toggle="collapse"> <span class="sr-only">Toggle navigation</span>

<a class="navbar-brand" href="#">BooKooKoo</a> </div>

<a href="#pablo" class="dropdown-toggle" data-toggle="dropdown"> <i class="material-icons">person</i>

<p class="hidden-lg hidden-md">Admin</p> </a>

</li> </ul>

</div>

<button type="submit" class="btn btn-white btn-round btn-just-icon"> <i class="material-icons">search</i><div class="ripple-container"></div> </button> </form> </div> </div> </nav> <div class="content"> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <div class="card">

<h4 class="title"><i class="fa fa-book"></i> Daftar Buku</h4> </div>

<div class="card-content table-responsive"> <table class="table table-striped table-hover"> <thead class="text-success"> <td>No.</td> <td>Cover</td> <td>Judul Buku</td> <td>Pengarang</td> <td>Penerbit</td> <td>Kategori</td> <td>Opsi</td> </thead> <tbody> <tr> <td>1</td>

<td><img class="img img-responsive thumbnail" src="<?= base_url('assets/img/laskarpelangi.jpg') ?>"></td> <td>Laskar Pelangi</td> <td>Andrea Hirata</td> <td>PT. Gramedia</td> <td>Novel</td> <td>

(13)

TIM DOSEN IF 12

</tr> <tr>

<td>Conan Movie: Magician Of The Silver Sky (First)</td> <td>Aoyama Gosho</td>

<td>PT. Gramedia</td> <td>Komik</td> <td>

</tr> <tr>

<td><img class=" img img-responsive thumbnail" src="<?= base_url('assets/img/codeigniter.jpg') ?>"></td> <td>Framework Codeigniter 3</td> <td>Yenda Purbadian</td> <td>PT. Gramedia</td> <td>Edukasi</td> <td>

<tr>

<td>Membangun Toko Online Dengan Joomla & J2Store + Cd</td> <td>M. Hilmi Masruri & Java Creativity </td>

<td>PT. Gramedia</td>

<td>Edukasi dan Teknologi</td> <td>

</p> </div> </footer> </div>

Salin kode berikut ini dan simpan sebagai file tambah_buku.php.

<button type="button" class="navbar-toggle" data-toggle="collapse"> <span class="sr-only">Toggle navigation</span>

<a class="navbar-brand" href="#">BooKooKoo</a> </div>

(14)

TIM DOSEN IF 13

<a href="#pablo" class="dropdown-toggle" data-toggle="dropdown"> <i class="material-icons">person</i>

<p class="hidden-lg hidden-md">Admin</p> </a>

</li> </ul>

</div>

<button type="submit" class="btn btn-white btn-round btn-just-icon"> <i class="material-icons">search</i><div class="ripple-container"></div> </button> </form> </div> </div> </nav> <div class="content"> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <div class="card">

<div class="card-header" data-background-color="green"> <h4 class="title">Tambah Data Buku</h4>

</div>

<label class="control-label">Kategori</label> <select class="form-control" name="kategori"> <option value="#" disabled selected></option> <option value="1">Novel</option>

<option value="2">Bahasa dan Kamus</option> <option value="3">Agama</option> <option value="4">Edukasi</option> </select> </div> </div> <div class="col-md-4">

<label class="control-label">Judul Buku</label> <input type="text" class="form-control" name="judul"> </div>

</div>

<label class="control-label">Nama Pengarang</label> <input type="text" class="form-control" name="pengarang"> </div> </div> </div> <div class="row"> <div class="col-md-3">

<label class="control-label">Penerbit</label>

</div>

<label class="control-label">Tahun Terbit</label>

</div>

(15)

TIM DOSEN IF 14

</div>

<label class="control-label">Browse Image</label>

<label class="control-label">Sinopsis Buku</label>

</div> </div>

<button type="submit" class="btn btn-success pull-right" style="margin: 0 20px 20px 0;"><i class="fa fa-save"></i> Simpan</button>