Buku Ajar Pemrograman Web Lanjut

FRAMEWORK
CODEIGNITER 13
Buku Pegangan Matakuliah Pemrograman
Web
Abstract
Pengembangan aplikasi web memanfaatkan framework CodeIgniter 3.
Terdapat penggunaan helper dan library baik untuk menampilkan data,
mengedit data, dan mengunggah file.
Sugeng Widodo, M.Kom

[email protected]
Daftar Isi
Daftar Isi................................................................................................................. i
1 Pendahuluan....................................................................................................... 1
1.1 Konsep dasar................................................................................................ 1
A. Kerangka kerja CodeIgniter.........................................................................1
B. Cara kerja Kerangka Kerja CodeIgniter.......................................................1
C. Mencari informasi pada user guide.............................................................2
1.2 MVC.............................................................................................................. 2
A. Membuat Controller..................................................................................... 4
B. Menampilkan tulisan menggunakan View...................................................4
C. Menampilkan hasil di Browser.....................................................................6
D. Membuat Model.......................................................................................... 6
E. Menampilkan data dari database..............................................................11
1.3 Helper dan Library...................................................................................... 12
A. Load Helper atau Library...........................................................................14
B. Menggunakan Library (Table)....................................................................14
C. Menggunakan Helper (URL).......................................................................15
D. Menggunakan pustaka Javascript DataTable............................................16
1.4 Menggunakan aplikasi version control system (git)....................................16
2 URI dan Penanganan Form...............................................................................17
2.1 URL Helper.................................................................................................. 17
A. Konsep URI................................................................................................ 17
2.2 Pengaturan URL.......................................................................................... 18
2.3 Membuat Link Menggunakan URL Helper...................................................18
2.4 Membuat fungsi edit................................................................................... 19
2.5 Form helper................................................................................................ 20
A. Elemen form.............................................................................................. 20
B. Elemen input............................................................................................. 20
C. Contoh penggunaan form..........................................................................21
D. Form Helper.............................................................................................. 21
E. Contoh penggunaan form helper...............................................................22
2.6 Validasi Form.............................................................................................. 23
2.7 Menyimpan data......................................................................................... 26
A. Cara kerja form......................................................................................... 26
i
B. Fungsi edit................................................................................................. 27
C. Fungsi simpan........................................................................................... 28
2.8 Upload file................................................................................................... 29
A. Cara kerja upload file................................................................................ 29
B. Fasilitas Upload......................................................................................... 30
C. "Extend" Helper......................................................................................... 32
3 Session dan Authentikasi.................................................................................. 36
3.1 Konsep dan cara kerja Session...................................................................36
3.2 Skenario Autentikasi................................................................................... 37
3.3 Controller Login.......................................................................................... 38
A. Membuat Fungsi Index..............................................................................38
B. Membuat fungsi logout..............................................................................40
C. Controller login.......................................................................................... 41
D. Membuat user model................................................................................ 42
E. Membuat form Login.................................................................................42
3.4 Membuat fungsi __construct pada controller selain login...........................42
3.5 Membuat fungsi untuk menampilkan nama user yang telah Login............43
4 AJAX (Asyncronous Javascript and XML)............................................................44
4.1 Javascript.................................................................................................... 44
A. Console...................................................................................................... 44
B. Membuat "Hello Word"..............................................................................44
C. Variable..................................................................................................... 46
D. Komentar.................................................................................................. 46
E. Function..................................................................................................... 46
F. Events........................................................................................................ 47
4.2 jQuery......................................................................................................... 47
A. Syntax....................................................................................................... 48
B. Selector..................................................................................................... 48
C. Event......................................................................................................... 49
D. Effect......................................................................................................... 49
E. Callback..................................................................................................... 50
F. Mengambil nilai dan mengisi nilai..............................................................51
G. Traversing................................................................................................. 52
H. Ajax........................................................................................................... 52
5 Template........................................................................................................... 57
ii
5.1 Template Parser......................................................................................... 57
5.2 Bootstrap.................................................................................................... 59
A. Layout dan grid......................................................................................... 60
B. Table dan Button....................................................................................... 61
C. Bootstrap Example.................................................................................... 64
6 Web Desain....................................................................................................... 75
iii
1 Pendahuluan
1.1 Konsep dasar
A.Kerangka kerja CodeIgniter

CodeIgniter adalah sebuah Framework (Kerangka kerja) untuk membangun
sebuah aplikasi web site menggunakan bahasa pemrograman PHP. Tujuannya
adalah untuk mempercepat pengembangan aplikasi, daripada mengembangan
program mulai awal. CodeIgniter telah menyediakan banyak fasilitas yang
umum digunakan, sehingga tidak perlu lagi membuat dari awal. Sehingga dapat
lebih fokus pada pengembangan aplikasi.
CodeIgniter menggunakan pendekatan Model-View-Controller, untuk

memisahkan antara tampilan dan proses. Sehingga seorang designer web dapat
mengerjakan tampilan tanpa harus memikirkan proses. Dan yang utama adalah
program akan menjadi lebih sedikit, karena tampilan telah dipisahkan dengan
PHP.
Bagian Model digunakan untuk mengelola data, seperti mengambil data,

menambah dan mengkoreksi data yang ada di database. Intinya model berisi
program yang akan berhubungan dengan penyediaan data dan pengolahan data,
walaupun tidak dari database.
Bagian View adalah bagian program yang hasilnya akan dilihat oleh user.
Secara umum View adalah sebuah halaman web, tetapi dapat juga berupa
potongan halaman, seperti misalnya bagian atas atau bawah dari sebuah
halaman. Atau juga dapat berupa sebuah halaman yang merupakan data seperti
halaman RSS.
Bagian Controller adalah bagian yang berada diantara Model dan View.
Controller adalah bagian utama yang akan mengolah seluruh HTTP Request.
Semua permintaan yang biasanya tertulis pada bagian URL sebuah browser,
akan melewati controller. Kemudian controller yang akan menggunakan Model,
View, atau Helper, Library.
B.Cara kerja Kerangka Kerja CodeIgniter
Gambar 1.1 Alur Kerja Framework CodeIgniter 1

1. Dimulai dari file index.php. Seluruh aplikasi akan dikendalikan oleh file
index.php, yang akan mengatur seluruh kebutuhan untuk menjalankan
CodeIgniter.
2. Dilanjutkan dengan Routing (terdapat pada file config/route.php), yang
akan mengarahkan seluruh alamat web (HTTP request) menuju pada file
yang dituju.
3. Jika halaman sudah pernah disimpan pada cache, maka seluruh proses
akan dilewati, dan langsung menampilkan halaman pada browser.
4. Security. Sebelum menjalankan Controller, permintaan halaman (URL
yang tertulis pada bagian alamat di browser), akan dibersihkan
(diamankan) terlebih dahulu.
5. Selanjutnya akan menjalankan Controller. Dalam sebuah file controller,
dapat menggunakan file lain yang dibutuhkan, seperti Model, Library,
helper, dan lainnya, untuk mengolah atau memproses seluruh permintaan
Dan akhirnya, View akan di buat untuk ditampilkan pada web browser. Jika
caching diatur enable, maka view akan disimpan terlebih dahulu.
C.Mencari informasi pada user guide

CodeIgniter telah menyediakan dokumentasi, yang disertakan pada paket
framework CodeIgniter. Letak dokumentasi (user guide) adalah pada folder user
guide dalam paket CodeIgniter.
Semua hal tentang penggunaan CodeIgniter telah disediakan dalam

dokumentasi ini. Pada dokumentasi ini juga disediakan fasilitas pencarian, dan
menu yang baik.
1.2 MVC
Controller adalah file utama yang menjadi request dari user. File controller
disimpan pada folder application/controller. Untuk saat ini semua controller
yang akan dibuat adalah turunan dari CI_Controller. Untuk tahap yang lebih
2
lanjut, dapat dikembangkan sebuah class baru sebagai parent dari class
controller yang akan dibuat.
CodeIgniter telah memberikan sebuah contoh class Controller. Class tersebut

adalah welcome.php. Secara umum bentuk class welcome.php adalah sebagai
berikut:
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Welcome extends CI_Controller {
/**
* Index Page for this controller.
*
* Maps to the following URL
* http://example.com/index.php/welcome
* - or -
* http://example.com/index.php/welcome/index
* - or -
* Since this controller is set as the default controller in
* config/routes.php, it's displayed at http://example.com/
*
* So any other public methods not prefixed with an underscore will
* map to /index.php/welcome/<method_name>
* @see https://codeigniter.com/user_guide/general/urls.html
*/
public function index()
{
$this->load->view('welcome_message');
}
}
Dapat dilihat pada contoh controller tersebut, bahwa:
1. Nama Controller (disamping tulisan class) sama dengan nama file

(Welcome.php)
2. Controller diturunkan dari class CI_Controller
3. Sebuah class, dapat berisi beberapa function / method (kata kerja)
4. Jika terdapat URL http://example.com/index.php/welcome, maka fungsi yang
akan dijalankan adalah fungsi default (index)
5. Controller default adalah welcome, telah diatur pada file config/routes.php
6. Pada fungsi index, terdapat perintah untuk menampilkan file view ($this-
>load->view). Nama file view adalah welcome_message.php di folder view.
A.Membuat Controller
CodeIgniter telah memanfaatkan model pemrograman berorientasi object.
Dalam pemrograman berorientasi object, nama class dapat berupa benda atau
objek. Contoh nama class adalah mahasiswa, berita, penjualan, dan lain-lain.
3
<?php
class berita extends CI_Controller {
Sedangkan nama fungsi adalah metode yang biasanya dituliskan dalam kata
kerja. Biasanya method dapat berupa get (mengambil), atau set (mengisi).
Contoh nama function/method adalah tambah, hapus, getAll dan lain-lain.
Rasanya cukup aneh jika nama dari sebuah class adalah "Tambah". Sehingga
nama class sebaiknya berupa kata benda, sedangkan nama fungsi adalah kata
kerja.
B.Menampilkan tulisan menggunakan View

Bagian View digunakan untuk membuat tampilan atau potongan tampilan. Pada
CodeIgniter, bagian view terdapat pada folder application/views. Seperti yang
sudah dijelaskan sebelumnya, semua file yang terdapat pada folder ini dapat
dipanggil melalui Controller.
Berikut ini adalah script pada file 'berita_view.php' yang terdapat dalam folder
application/views.
<h1>Percobaan</h1>
Perintah berikut ditulis di Controller atau dapat juga di Views dan digunakan
untuk menampilkan isi dari file berita_view yang ada di dalam folder
application/views tersebut.
Contoh :
$this->load->view('berita_view');
Hasil dari perintah tersebut adalah sebagai berikut :
Karena isi dari folder ini akan sangat banyak, maka perlu dilakukan pengaturan
penulisan file. Misalnya untuk semua view yang terkait dengan Controller berita,
4
dimasukkan kedalam folder berita. Sehingga isi dari folder view adalah sebagai
berikut :
Maka perintah untuk memanggil file view.php dalam folder view menjadi sebagai
berikut :
$this->load->view('berita\view');
Berdasarkan pengalaman, cara ini akan lebih memudahkan dalam

mengembangkan aplikasi.
B.1 Menampilkan beberapa view

Pada CodeIgniter, dapat dilakukan pemanggilan beberapa view sekaligus.
Berikut contoh penggunaan beberapa view sebagai berikut:
$this->load->view('header');
$this->load->view('menu');
$this->load->view('content', $data);
$this->load->view('footer');
Jika terdapat beberapa view yang dipanggil, maka tampilan akan digabung dan
menjadi sebuah halaman.
B.2 Mengirim data ke view

Untuk mengirimkan data dari controller ke view digunakan variable array atau
object yang dituliskan pada parameter kedua setelah nama file view. Berikut ini
adalah potongan program pada Controller:
<?php

{
$data = array(
'title' => 'My Title',
'heading' => 'My Heading'
);
$data['message'] = 'My Message';
$this->load->view('berita/view', $data);
}
}
5
Pada potongan diatas terdapat sebuah variable $data yang merupakan Array
Associcative, yang memiliki tiga buah index (title, heading, dan message).
Maka pada file view akan menerima 3 (tiga) buah variable yaitu $title,
$heading, dan $message. Berikut ini adalah isi dari file
application/views/berita/view.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php echo $title;?></title>
</head>
<body>
<h1><?php echo $heading;?></h1>
<div><?php echo $message;?></div>
</body>
</html>
C.Menampilkan hasil di Browser

Untuk mencoba menjalankan aplikasi yang telah dibuat, maka panggil nama
controller di url, dengan cara sebagai berikut
localhost/ci/index.php/berita/index.
Atau untuk hasil yang sama, dapat juga dituliskan
localhost/ci/index.php/berita
function index adalah fungsi default yang akan dipanggil jika tidak dituliskan
dibelakang controller.
D. Membuat Model
Bagian Model digunakan untuk membuat fungsi-fungsi yang berhubungan
dengan database. Nama class dari Model, biasanya terkait dengan data yang
akan diolah. Contoh nama Model adalah mahasiswa_model, yang artinya akan
berisi fungsi yang berhubungan dengan table mahasiswa. Sedangkan nama
fungsi biasanya berupa operasi yang dapat dilakukan terhadap table. Contoh
nama fungsi yang berhubungan dengan database adalah get, update, delete,
ambil, ambil_data_by_nrp, getByNRP, save, simpan, tambah dan lain-lain.
File model disimpan di dalam folder application/models. Berikut ini contoh Model
class Berita_model extends CI_Model {
public $judul;
public $isi;
public $tanggal;
public function get_last_ten_entries()

{
$query = $this->db->get('entries', 10);
6
return $query->result();
}
}
Pada contoh model diatas dapat dilihat bahwa :
1. Nama Model (disamping tulisan class) sama dengan nama file

(Berita_model.php)
2. Model diturunkan dari class CI_Model
3. Sebuah class, dapat berisi beberapa function / method (kata kerja)
4. $this->db->get('entries',10) berarti mengambil data dari table entries,
sebanyak 10 data.
Perintah ini akan sesuai dengan perintah query: " select * from entries
limit 10"
5. Return $query->result() berarti menghasilkan seluruh data yang sesuai.
Dengan kata lain, data yang akan dihasilkan adalah banyak (dalam bentuk
kumpulan data)
Perlu diperhatikan adalah bahwa semua Model hanya dipanggil oleh controller.
D.1 Konfigurasi Database

Sebelum dapat melakukan menggunakan Model, atau operasi terhadap database
(mengambil, menambah, menghapus data), maka harus melakukan pengaturan
configurasi pada file application/config/database.php.
$db['default'] = array(
'dsn' => '',
'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => 'stiki',
'dbdriver' => 'mysqli',
'dbprefix' => '',
'pconnect' => FALSE,
'db_debug' => (ENVIRONMENT !== 'production'),
'cache_on' => FALSE,
'cachedir' => '',
'char_set' => 'utf8',
'dbcollat' => 'utf8_general_ci',
'swap_pre' => '',
'encrypt' => FALSE,
'compress' => FALSE,
'stricton' => FALSE,
'failover' => array(),
'save_queries' => TRUE
);
Bagian yang penting untuk diisi adalah username, password, dan nama database
(baris 4 sampai 6).
7
D.2 Mengaktifkan database
Setelah mengatur konfigurasi database, yang harus dilakukan adalah
mengaktifkan library database. Untuk mengaktifkan library database dapat
dilakukan dengan beberapa cara berikut:
a. Menggunakan perintah $this->load->database() didalam setiap function

b. Menggunakan perintah $this->load->database() pada constructor. Contoh :

public function __construct()
{
$this->load->database();
}
...
...
...
}
c. Menggunakan fasilitas autoload. Mengatur konfigurasi autoload yang ada

pada file autoload.php. Karena database termasuk libraris, maka pada file
autoload, diisikan konfigurasi sebagai berikut (sekitar baris 61) :
$autoload['libraries'] = array('database');
D.3 Mengaktifkan Model (Load Model)

Model yang sudah dibuat, tidak dapat langsung digunakan. Sebelum model
dapat digunakan, maka model tersebut harus diaktifkan atau di load terlebih
dahulu. Seperti halnya mengaktifkan database, terdapat beberapa tempat untuk
melakukan load model.
Pada function dalam controller,
class Berita extends CI_Controller {

{
$this->load->model('berita_model');
...
...
}
atau pada constructor.
class Berita extends CI_Controller {

{
parent::__construct();
}
8
}
Atau pada file application/config/autoload.php, baris terakhir
$autoload['model'] = array('berita_model');
D.4 Query builder Class

CodeIgniter memiliki fasilitas Query Builder, sehingga untuk pembuatan perintah
query dapat dilakukan dengan script yang sedikit.
Get()
$this->db->get('mytable', 10, 20) : untuk mengambil data dari tabel

mytable sebanyak 10 data mulai dari data ke 20. Atau dalam bentuk
perintah Query : SELECT * FROM mytable LIMIT 20, 10
Get_where()
$this->db->get_where('mytable', array('id' => $id), $limit,

$offset); : untuk mengambil data dari tabel mytable sebanyak $limit
data mulai dari data ke $offset yang memiliki isi field id sesuai dengan isi
variabel id. Atau dalam bentuk perintah Query : SELECT * FROM mytable
WHERE id = $id LIMIT $offset, $limit
Perintah lainnya adalah sebagai berikut :
 $this->db->select()
 $this->db->select_max()
 $this->db->select_min()
 $this->db->select_avg()
 $this->db->select_sum()
 $this->db->from()
 $this->db->join()
 $this->db->where()
 $this->db->like()
 $this->db->having()
 $this->db->order_by()
Perintah tersebut diatas dapat digabungkan sesuai dengan kebutuhan.

Seandainya akan menggunakan perintah get dan where tanpa menggunakan
get_where, maka perintah dapat digabung sebagai berikut :
$this->db->where('kode',$kode);
$this->db->like('judul',$judul);
$query = $this->db->get('berita');
Ketiga perintah diatas akan menghasilkan perintah query sebagai berikut :
Select * from berita where kode = $kode and judul like %$judul% 9
D.5 Query Result
 result(): Method ini akan memberikan nilai array dari object, dan
biasanya untuk mengambil datanya menggunakan foreach
$query = $this->db->get("berita");
$result = $query->result();
foreach ($result as $row)

{
echo $row->title;
echo $row->name;
echo $row->body;
}
 result_array() : Method ini akan memberikan nilai array dari array,

contoh penggunaannya sebagai berikut :
foreach ($query->result_array() as $row)

{
echo $row['title'];
echo $row['name'];
echo $row['body'];
}
 row() : Method ini akan memberikan satu data (record) dalam bentuk
object.
$row = $query->row();
if (isset($row))
{
echo $row->title;
echo $row->name;
echo $row->body;
}
 row_array() : Method ini akan memberikan satu data (record) dalam

bentuk array.
$row = $query->row_array();
if (isset($row))
{
echo $row['title'];
10
echo $row['name'];
echo $row['body'];
}
E. Menampilkan data dari database

Berikut ini adalah penggunaan controller, model, dan view untuk menampilkan
data.
E.1 Controller
<?php

{
}

{
$data = array(
);
$data['berita'] = $this->berita_model->get();
}
}
E.2 Model
<?php
{
$this->load->database();
}
public function get($id = FALSE){

if ($id === FALSE)
{
}
$query = $this->db->get_where('berita', array('id' => $id));
return $query->row();
}
public function get_last_ten_entries()

{
$query = $this->db->get('berita', 10);
11
}
}
E.3 View
<!DOCTYPE html>
<html lang="en">
<head>
<title><?=$title;?></title>
</head>
<body>
<h1><?=$heading;?></h1>
<div><?=$message;?></div>
<?php
foreach ($berita as $row)

{
echo $row->title;
echo $row->name;
echo $row->body;
}
?>
</body>
</html>
1.3 Helper dan Library

CodeIgniter memiliki sekumpulan Helper dan Library. Seperti namanya helper
digunakan untuk membantu. Helper berisi kumpulan fungsi sesuai dengan
kategorinya. Misalnya saja URL Helper, berisi fungsi-fungsi yang terkait dengan
URL, seperti membuat link, redirect, dan lainnya.
CodeIgnitier telah menyediakan banyak helper :
 Array Helper
 CAPTCHA Helper
 Cookie Helper
 Date Helper
 Directory Helper
 Download Helper
 Email Helper
 File Helper
 Form Helper
 HTML Helper
 Inflector Helper
 Language Helper
 Number Helper
 Path Helper
 Security Helper
 Smiley Helper
 String Helper
12
 Text Helper
 Typography Helper
 URL Helper
 XML Helper
Selain helper, CodeIgniter juga memiliki Library. Tidak seperti helper, Library
adalah class yang terletak pada folder system/libraries dan bertugas untuk
membantu sebuah tugas seusai dengan nama library. Misalnya Library Form
Validation, adalah class yang berisi sekumpulan fungsi yang digunakan untuk
membantu validasi form.
 Benchmarking Class
 Caching Driver
 Calendaring Class
 Shopping Cart Class
 Config Class
 Email Class
 Encrypt Class
 Encryption Library
 File Uploading Class
 Form Validation
 FTP Class
 Image Manipulation Class
 Input Class
 Javascript Class
 Language Class
 Loader Class
 Migrations Class
 Output Class
 Pagination Class
 Template Parser Class
 Security Class
 Session Library
 HTML Table Class
 Trackback Class
 Typography Class
 Unit Testing Class
 URI Class
 User Agent Class
 XML-RPC and XML-RPC Server Classes
 Zip Encoding Class
A.Load Helper atau Library

Helper atau Library harus di load terlebih dahulu sebelum dapat digunakan.
Perintah Load diletakkan pada Controller atau pada konfigurasi autoload. Jika
diletakkan dalam function atau constructor maka caranya adalah sebagai
berikut:
13
$this->load->helper('url');
$this->load->helper('form');
$this->load->library('form_validation');
$this->load->library('table');
Atau
$this->load->helper('url','form');
$this->load->library('form_validation','table');
B.Menggunakan Library (Table)

Library Table digunakan untuk membantu menampilkan data dalam bentuk
table. Berikut ini cara menampilkan data menggunakan library table.
B.1 Load Library pada Controller
<?php

{
}

{
$data = array(
);
}
}
B.2 View
Pada view dilakukan penggunaan fungsi yang ada dalam library table, seperti
petunjuk pada User Guide.
<!DOCTYPE html>
<html lang="en">
<head>
14
<title><?=$title;?></title>
</head>
<body>
<h1><?=$heading;?></h1>
<div><?=$message;?></div>
<?php
$template = array('table_open' => '<table>');
$this->table->set_template($template);
$this->table->set_heading('Id', 'Judul', 'Berita','Gambar','Aksi');

{
$this->table->add_row(
$row->id,
$row->title,
$row->body,
'',
'Edit'
);
}
echo $this->table->generate();
?>
</body>
</html>
C.Menggunakan Helper (URL)

Dalam Helper URL terdapat banyak fungsi yang terkait dengan URL, antara lain :
 site_url()
 base_url()
 current_url()
 anchor()
 anchor_popup()
 redirect
untuk membuat link digunakan fungsi anchor(). Fungsi anchor() ini akan
membuat link html berdasar pada alamat web saat ini.
echo anchor('news/local/123', 'My News', 'title="News title"');
Menghasilkan tag HTML berikut ini
<a href="http://example.com/index.php/news/local/123" title="News title">My

News</a>
D. Menggunakan pustaka Javascript DataTable

DataTable adalah sebuah javascript library, yang dapat digunakan untuk
mengubah tampilan dan fasilitas Table menjadi lebih lengkap. Pada CodeIgniter,
semua dilakukan pada file view.
15
Yang perlu dipersiapkan adalah file pendukung
(https://datatables.net/download/):
1. Memasukkan file CSS dan JS dari JQuery, dan DataTable. Untuk memasukkan
file tersebut dapat dilakukan dengan cara-cara berikut :
a. Cara pertama menggunakan CDN
<link rel="stylesheet" type="text/css"

href="https://cdn.datatables.net/v/dt/dt-1.10.20/datatables.min.css"/>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-
1.10.20/datatables.min.js"></script>
b. Cara kedua adalah dengan mengunduh ke drive lokal

File pendukung dapat di unduh dari laman
https://datatables.net/download/
c. Menggunakan NPM (tidak dibahas)
2. Mempersiapkan identifikasi pada Table
$template = array('table_open' => '<table id="myTable">');
3. Memanggil DataTable
<script>
$(document).ready( function () {
$('#myTable').DataTable();
} );
</script>
1.4 Menggunakan aplikasi version control system (git)
16
2 URI dan Penanganan Form
2.1 URL Helper
A.Konsep URI
URI adalah kependekan dari Uniform Resource Identifier. URI adalah sebuah
tulisan yang akan menunjukkan letak dari suatu dokumen. Sedangkan URL
(Uniform Resource Locator) adalah bentuk khusus dari URI. Berikut ini adalah
beberapa contoh URL:
 http://www.ietf.org/rfc/rfc2396.txt
 ftp://ftp.is.co.za/rfc/rfc1808.txt
 https://www.example.com/
 mailto:[email protected]
 http://localhost/ci/index.php/berita/edit/1
CodeIgniter merancang URL agar mudah dicari, dan tidak menggunakan query
string standar, tetapi menggunakan pendekatan segmen, sebagai berikut:
http://localhost/ci/index.php/berita/edit/1/2/3
Keterangan pada URL diatas adalah
 http adalah protocol

 localhost adalah domain
 ci adalah folder
 index.php adalah file utama yang dijalankan
 Segmen pertama (tulisan "berita") adalah Nama controller
 Segmen kedua (tulisan "tambah") adalah nama fungsi.
 Selanjutnya setelah segmen kedua (dibelakang tulisan "edit") adalah nilai
untuk parameter dari fungsi edit.
Pada contoh diatas terdapat 3 parameter
a. Tulisan "1" adalah nilai untuk parameter pertama

b. tulisan "2" adalah nilai untuk parameter kedua
c. dan seterusnya.
Sehingga jika ada alamat URL seperti diatas, artinya akan

dijalankan fungsi edit yang ada pada controller berita dengan
tiga parameter. Parameter pertama akan diterima oleh $p1,
sehingga $p1 akan berisi data 1, dan seterusnya.
<?php
public edit($p1, $p2, $p3){
$this->load->view('berita/edit');
}
17
Parameter adalah tulisan yang ada didalam kurung setelah nama fungsi. Pada
contoh diatas, parameter adalah $p1, $p2 dan $p3. Atau dapat juga dibuat
parameter sebagai berikut
public function edit($satu = FALSE, $dua = '')

{
Pada fungsi edit diatas, terdapat dua parameter yaitu $satu dan $dua. Sehingga
jika terdapat URL seperti diatas, maka parameter pertama $satu akan berisi nilai
1, dan parameter kedua $dua akan berisi nilai 2. Dan nilai 3 dari URL tidak akan
dilakukan proses.
2.2 Pengaturan URL

Ada beberapa hal yang perlu diatur agar URL terlihat lebih bersih (tidak ada
index.php). URL yang awalnya
http://localhost/ci/index.php/berita/edit/1/2/3
akan menjadi
http://localhost/ci/berita/edit/1/2/3
yang perlu dilakukan adalah
1. membuat file .htaccess yang berisi
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]
2. mengatur file config.php yang ada di folder config
$config['base_url'] = 'http://localhost/ci/'; //sesuaikan dengan folder yang digunakan

$config['index_page'] = '';
2.3 Membuat Link Menggunakan URL Helper

Didalam URL Helper terdapat fungsi untuk membuat Link. Fungsi tersebut
adalah anchor. Cara penggunaan fungsi anchor adalah :
echo anchor('berita/edit/1','Edit','class="btn"');
18
dengan perintah ini maka akan dihasilkan tag HTML sebagai berikut :
<a href="http://localhost/ci/berita/edit/1" class="btn">Edit</a>
Jika tidak menghasilkan URL seperti diatas maka perlu dilakukan pengaturan URL
seperti pada sub bab 2.2 diatas.
Untuk dapat menggunakan perintah anchor, jangan lupa untuk melakukan load
URL Helper.
Contoh lain adalah pada pembuatan table (program sebelumnya).
$this->table->add_row($row->id, $row->title, $row->body, '',

anchor('berita/edit/1','Edit'));
Sehingga pada table akan ditampilkan link menuju controller berita, fungsi edit.
Tulisan "1" pada perintah diatas, akan digunakan sebagai parameter data yang
akan diambil untuk di koreksi.
Tantangan : modifikasi perintah tersebut (add_row) sehingga link yang

ditampilkan sesuai dengan id masing-masing baris.
Berita/edit/1  untuk id 1
Berita/edit/2  untuk id 2
2.4 Membuat fungsi edit

Skenario fungsi edit yang akan dilakukan adalah sebagai berikut :
Pada bagian controller, fungsi edit
1. Fungsi edit memiliki sebuah parameter yang merupakan kunci untuk

mengambil data yang akan di koreksi (lihat baris 1 pada segmen program
dibawah).
2. Mengambil data berita sesuai kunci (nilai dari parameter pertama pada
fungsi edit). Untuk mengambil data digunakan model berita_model. fungsi
pada berita_model yang digunakan adalah fungsi get dengan parameter
berupa kunci berita (lihat baris 4 pada segmen program dibawah).
3. Menampilkan view yang memuat form, dan mengirim data yang telah
diambil pada view tersebut (lihat baris 7 pada segmen program dibawah).
public function edit($id = '')

{
$data['judul'] = 'Ubah Berita';
$data['berita'] = $this->berita_model->get($id);
19
$this->load->view('header',$data);
$this->load->view('berita/edit', $data);
}
2.5 Form helper

Pada bahasa HTML, untuk mengirimkan data dari satu halaman web, ke halaman
web yang lain diperlukan elemen Form. Elemen Form dapat berisi beberapa
elemen input. Elemen input akan menampung data-data yang diisikan oleh
user, yang selanjutnya akan dikirimkan pada halaman web yang dituju.
A.Elemen form
Form digunakan untuk membungkus berbagai elemen input, seperti text,
password, radio, select, textarea, bahkan juga submit. Sebuah elemen form
memiliki atribut action dan method. Dimana atribut action digunakan untuk
menentukan tujuan pengiriman data, sedangkan atribut method digunakan
menentukan cara mengirim data.
<form action="berita/edit/1" method="post">
</form>
B.Elemen input
HTML memiliki beberapa elemen input antara lain: text, password, radio, select,
textarea, submit, dan lain-lain. Secara umum setiap elemen input akan memiliki
atribut type, name, dan value. Atribut type digunakan untuk menentukan jenis
elemen input. Atribut name digunakan untuk menentukan nama dari tempat
menampung data. Sedangkan atribut value digunakan untuk menentukan isi
dari data yang akan ditampung oleh atribut name.
Terdapat bermacam-macam elemen input. Berikut ini adalah beberapa contoh

elemen input:
 Elemen input text

<input type="text" name="fullname" value="John">
 Elemen input Password

<input type="password" name="password" value="John">
 Elemen input Radio (satu pilihan)

<input type="radio" name="jk">
 Elemen input Dropdown

<select name="city">
<option>satu</option>
<option>dua</option>
</select>
 Textarea
<textarea name="body">
</textarea> 20
 Submit
<input type="submit" value="Submit">
C.Contoh penggunaan form

Berikut ini adalah contoh tampilan form isian berita :
program untuk membuat form diatas, adalah sebagai berikut :
<form action="berita/edit/1" method="post">

<label>Judul</label>
<input type="text" name="judul" value="" /><br>
<label>Penulis</label>
<input type="text" name="penulis" value="" /><br>
<label>Berita</label>
<input type="text" name="berita" value="" /><br>
<input type="submit" value="Simpan" />

</form>
D. Form Helper
Form helper digunakan untuk membantu atau memudahkan dalam membuat
form dan elemen input. Sehingga form helper berisi kumpulan fungsi yang
tugasnya terkait dengan form dan elemen input.
Seperti biasa, di CodeIgniter, helper perlu di load terlebih dahulu sebelum

digunakan. Untuk melakukan load form helper, dilakukan dengan menulis
perintah berikut di controller:
<?php
public edit(){
$this->load->view('berita/edit');
}
Berikut ini adalah fungsi-fungsi yang terdapat di dalam form helpler :
 form_open  form_hidden  form_checkbox

 form_close  form_password  form_radio
 form_open_multipar  form_upload  form_submit
t  form_textarea  set_value
 form_input  form_dropdown
21
Manfaat dan cara penggunaan dari masing-masing fungsi dapat dilihat pada user
guide di alamat http://localhost/ci/user_guide/.
Berikut ini adalah contoh file view untuk membuat form seperti pada sub bab 2C.
diatas.
<?php
echo form_open('berita/edit/1');
echo form_label('Judul', 'judul');

echo form_input('judul').'<br>';
echo form_label('Penulis', 'penulis');

echo form_input('penulis') .'<br>';
echo form_label('Berita', 'berita');

echo form_input('berita') .'<br>';
echo form_submit('', 'Simpan');

echo form_close();
?>
E. Contoh penggunaan form helper

Berikut ini contoh penggunaan form helper pada fungsi edit di Controller Berita
secara lengkap.
Menambahkan load form_helper pada controller

application/controller/berita.php

{
}
Membuat form untuk isian berita pada application/views/berita/edit.php.

Pada potongan program diatas (controller berita), data yang di dapat dari model
berita_model adalah berupa 1 data (record), sehingga pada potongan view
dibawah ini, data dari table berita dapat langsung ditampilkan (field title, body
dan name)
<?php
echo form_open("berita/edit/$berita->id");
22
echo form_input('judulnya',set_value('judulnya',$berita->title));
echo form_input('beritanya',set_value('beritanya',$berita->body));
echo form_input('penulisnya',set_value('penulisnya',$berita->name));
echo form_submit('','Simpan');
echo form_close();
?>
Segmen program diatas akan menghasilkan halaman web yang berisi form. Jika
dilihat pada page source maka akan terlihat script HTML. Script HTML yang
dihasilkan dari view tersebut adalah sebagai berikut
<form action="http://localhost/ci/berita/edit/1" method="post" accept-

charset="utf-8">
<input type="text" name="judulnya" value="Pemrograman Web" />
<input type="text" name="beritanya" value="Testing" />
<input type="text" name="penulisnya" value="Sugeng" />
<input type="submit" value="Simpan" />
</form>
Dari potongan view dan HTML, bagian 'judulnya', 'beritanya', dan 'penulisnya'
akan menjadi bagian dari atribut "name", dan tidak terkait dengan nama field di
table.
Sedangkan perintah set_value digunakan untuk menampilkan data yang telah

diisikan atau jika belum ada isi maka akan ditampilkan tulisan dari table berita
sebagai nilai awal.
2.6 Validasi Form

Untuk membuat validasi untuk isian pada form, dapat menggunakan library form
validation.
Mekanisme yang terjadi adala sebagai berikut :
1. Form ditampilkan
2. Mengisi form dan menekan tombol submit
3. Jika terdapat kesalahan pada isian atau ada isian yang harus diisi tetapi
kosong, maka form akan ditampilkan kembali termasuk data yang telah
diisikan termasuk pesan kesalahan sesuai kesalahan
4. Proses ini akan terus terjadi sampai isian benar
Berikut ini adalah contoh penggunaan Library Form Validation.
Modifikasi file view edit.php
<?php
echo validation_errors();
echo form_open("berita/edit/$berita->id");
23
?>
Fungsi validation_errors digunakan untuk menampilkan pesan kesalahan yang

terjadi.
Modifikasi fungsi edit pada controller berita
Berdasarkan pada file view edit.php diatas, maka akan dibuatkan modifikasi
fungsi edit pada controller yanga akan menerima dan mengolah data yang
diisikan (controller berita).

{
$this->form_validation->set_rules('judulnya', 'Judul', 'required');

$this->form_validation->set_rules('beritanya', 'Berita', 'required',
array('required' => '%s harus diisi.'));
$this->form_validation->set_rules('penulisnya', 'Nama Penulis',
'required');
if ($this->form_validation->run() == FALSE)
{

} else {
//disini tempat membuat program menyimpan data
redirect('berita');
}
}
Penjelasan Program
1. Mengaktifkan helper dan url yang diperlukan
Mengaktifkan helper url dan library form validation.
2. Membuat aturan untuk isian

a. Inputan judul

24
Membuat aturan untuk elemen input yang memiliki atribut name judulnya.
Input "judulnya" harus diisi (required), dan jika kosong akan ada pesan
kesalahan "The Judul field is required."
b. Inputan berita

Membuat aturan untuk elemen input yang memiliki atribut name beritanya.
<input type="text" name="beritanya" value="Testing" />
Input "beritanya" harus diisi (required), dan jika kosong akan ada pesan
kesalahan "Berita harus diisi." %s akan diganti dengan isi dari parameter ke-
dua pada set_rules (Berita).
c. Inputan penulis
$this->form_validation->set_rules('penulisnya', 'Nama Penulis','required');
Membuat aturan untuk elemen input yang memiliki atribut name

penulisnya.
<input type="text" name="penulisnya" value="Sugeng" />
Input "penulisnya" harus diisi (required), dan jika kosong akan ada pesan
kesalahan "The Nama Penulis field is required."
3. Menjalankan pemeriksaan data sesuai aturan yang telah dibuat
Apabila terdapat kesalahan pada pengisian data maka akan dilakukan

menampilkan form isian kembali.
4. Membuka halaman (redirect)
Jika data yang diisikan tidak menyalahi semua aturan yang telah dibuat
maka akan dibuka halaman daftar berita.
redirect('berita');
25
2.7 Menyimpan data
A.Cara kerja form

Penting untuk diperhatikan bahwa
 Semua data yang diisikan harus dipastikan berada dalam form.

 Setiap form memiliki action dan method
a. Action berisi tujuan pengiriman data
b. Method berisi cara pengiriman data
 Setiap data memiliki name
 Data yang telah diisikan akan diterima sesuai action dan method
a. Nama file sesuai dengan action
b. Data berada pada $_POST atau $_GET sesuai method
Pada CodeIgniter, untuk mengambil data yang berada pada $_POST dapat
dilakukan dengan menggunakan perintah
$this->input->post();
26
action= "berita/edit/1 " Controller berita
method = "post" Functionedit($id)
name = "title"
Judul Berita
$_POS
name = "body" T
"titl Judul Berita
Body Berita Body
Berita Body Berita e"
Body Berita
"body" Body Berita Body

Berita Body Berita
Body Berita
Simpan
Database stiki Model berita_model

Tableberita Functionsimpan($data,$id)
B.Fungsi edit
Proses menyimpan (update) data dilakukan jika semua inputan telah lolos
validasi. Jika inputan tidak ada yang salah, selanjutnya data dapat disimpan.
Berikut ini adalah perbaikan pada fungsi edit. Terutama setelah validasi sukses :

{

array('required' => '%s harus diisi.')
);
$this->form_validation->set_rules('penulisnya', 'Nama Penulis',
'required');
{
27
} else {
$data['title'] = $this->input->post('judulnya');
$data['body'] = $this->input->post('beritanya');
$data['name'] = $this->input->post('penulisnya');
$this->berita_model->simpan($data,$id);
redirect('berita');
}
}
Penjelasan :
Perintah $this->input->post('judulnya') digunakan untuk mengambil data yang

telah diisikan pada form, khususnya input dengan name judulnya. Dan begitu
pula lainnya. Untuk proses simpan, variabel $data telah diisi, kemudian variabel
$id diisi sesuai parameter dari fungsi edit.
C.Fungsi simpan
Pada berita_model, ditambahkan perintah untuk menyimpan data ke table berita
<?php
public function simpan($data,$id = ''){

if($id == ''){
$this->db->insert('berita',$data);
} else {
$this->db->where('id',$id);
$this->db->update('berita',$data);
}
}
Penjelasan:
Fungsi simpan ini memiliki dua buah parameter:
 Parameter pertama adalah $data, yang berisi data array. Data array
tersebut berisi data yang akan disimpan.
 Parameter kedua adalah $id, jika tidak diisi maka akan dilakukan insert,
tapi jika diisi maka akan dilakukan koreksi data.
28
2.8 Upload file
A.Cara kerja upload file

Untuk dapat membuat fasilitas upload file, maka perlu dipersiapkan beberapa
hal:
 Tag form open yang memuat atribut enctype="multipart/form-data"

Jika menggunakan form helper dapat menggunakan fungsi
form_open_multipart()
 Minimal satu tag Input type="file"

Jika menggunakan form helper dapat menggunakan fungsi
form_upload()
Mekanisme kerja dari upload file tanpa CodeIgniter, adalah sebagai berikut:
 data dikirim dari Form multipart yang berisi input type="file"

 semua informasi terkait file yang dikirim akan diterima oleh server web
dan dimasukkan ke dalam variable $_FILES,
 file gambar disimpan pada temporary folder di server.
 Harus membuat program untuk memindahkan file pada temporary folder,
ke folder yang seharusnya
Pada CodeIgniter, telah ada library upload yang menangai semua hal terkait file
upload.
 Mengatur konfigurasi, misalnya $config

a. Upload_path : alamat tempat file disimpan, folder tempat file harus
sudah disiapkan
b. Allowed_types : tipe file yang dapat diunggah
c. Max_size: besar file yang dapat diunggah
d. Dan lain-lain
 $this->load->library('upload',$config) : mengatur file yang dapat
diunggah
 $this->upload->do_upload($field): digunakan untuk menjalankan proses
upload
 $this->upload->display_errors() : digunakan untuk menampilkan pesan
kesalahan saat upload
 $this->upload->data: Menampung semua informasi terkait file yang
dikirim
Isi dari dari data adalah array :
Array
(
[file_name] => mypic.jpg
[file_type] => image/jpeg
[file_path] => /path/to/your/upload/
[full_path] => /path/to/your/upload/jpg.jpg
[raw_name] => mypic
[orig_name] => mypic.jpg
[client_name] => mypic.jpg
[file_ext] => .jpg 29
[file_size] => 22.2
[is_image] => 1
[image_width] => 800
[image_height] => 600
[image_type] => jpeg
[image_size_str] => width="800" height="200"
)
Untuk menampilkan satu informasi dapat dilakukan dengan cara :

$this->upload->data('file_name');  akan menampilkan mypic.jpg
B.Fasilitas Upload
Untuk menambahkan fasilitas upload pada aplikasi yang sudah dibuat diatas,
maka perlu menambahkan sebuah field (picture) untuk menampung nama file.
B.1 Fungsi cek_upload

Membuat fungsi cek_upload pada controller berita. Fungsi ini akan dijadikan
sebagai pemeriksa isian file pada saat form validation, dan juga sebagai fungsi
upload (memindahkan data yang tedapat di temporary menuju folder yang
diinginkan). Fungsi cek_upload ini akan memberikan nilai TRUE untuk sukses,
dan jika ada kesalahan pada saat upload maka akan mengembalikan nilai FALSE,
dan juga memberikan pesan kesalahan (set_message) sesuai pesan yang
dihasilkan dari kesalahan proses upload. Beriktu ini adalah Fungsi cek_upload
selengkapnya:
public function cek_upload()

{
$config['upload_path'] = './uploads/';
$config['allowed_types'] = 'gif|jpg|png';
$config['max_size'] = 100;
$config['max_width'] = 1024;
$config['max_height'] = 768;
$this->load->library('upload', $config);
30
if ( ! $this->upload->do_upload('gambarnya'))
{
$this->form_validation->set_message('cek_upload',
$this->upload->display_errors());
return FALSE;
}
else
{
return TRUE;
}
}
Tulisan "gambarnya" pada perintah do_upload('gambarnya'), disesuaikan

dengan nama yang digunakan pada input type="file", atau pada form_upload.
B.2 Fungsi Edit

Mengubah fungsi edit pada controller berita sebagai berikut
public function edit($id = ''){

$this->load->helper(['form','url']);

$this->form_validation->set_rules('penulisnya','Nama Penulis',
'required');
$this->form_validation->set_rules('gambarnya', 'Gambar',
'callback_cek_upload');
{
$data = array(
'judul' => 'My Heading'
);
$data['judul'] = 'Edit Berita';

} else {
$data['picture'] = $this->upload->data('file_name');
redirect('berita');
}
}
31
B.3 View berita/edit.php
Pada program dibawah ini, memanfaatkan form_helper untuk membuat tampilan
(dapat dibuat menggunakan tag HTML). Terdapat beberapa hal yang perlu
diperhatikan:
 form_open_multipart :
membuat form dengan atribut enctype="multipart/form-data"
 form_upload
membuat input dengan atribut Input type="file"
<?php
echo form_open_multipart("berita/edit/$berita->id");
echo form_upload('gambarnya');
echo form_close();
?>
B.4 View berita/view.php

Pada view.php akan ditambah program untuk menampilkan data gambar yang
telah di upload.
$row->id,
$row->title,
$row->body,
$row->picture,
anchor("berita/edit/$row->id",'Edit')
);
C."Extend" Helper
Seperti pada penjelasan sebelumnya, Helper berisi kumpulan fungsi sesuai
dengan kategorinya. Terkadang fungsi yang telah disediakan oleh CodeIgniter,
tidak sesuai dengan harapan. Oleh karena itu CodeIgniter memberikan suatu
kesempatan untuk melakukan perubahan terhadap fungsi yang telah dibuat,
tanpa harus mengubah langsung pada Helper atau fungsi yang asli.
Untuk melakukan perubahan tersebut yang perlu dilakukan adalah
• Membuat file dengan nama MY_[nama helper]
32
• Awalan MY_ dapat diganti dengan tulisan lainnya, tergantung isi
dari variable $config['subclass_prefix'] pada
application/config/config.php
• Simpan file tersebut pada folder folder application/helpers/
C.1 Form Helper

Pada penjelasan sebelumnya telah dijelaskan tentang penggunaan Form Helper.
Didalam Form helper terdapat fungsi untuk membuat elemen input, khususnya
input text. Fungsi untuk membuat input text, pada Form Helper adalah
form_input(). Pada file view/berita/edit.php, terdapat penggunaan fungsi
form_input, sebagai berikut
Dari perintah diatas, akan dihasilkan script HTML sebagai berikut :
Script HTML tersebut dihasilkan dari fungsi form_input pada form helper yang
ada pada system/helpers/form_helper.php. Apabila dilihat di dalam
form_helper, maka isi dari fungsi form_input adalah sebagai berikut :
function form_input($data = '', $value = '', $extra = '')

{
$defaults = array(
'type' => 'text',
'name' => is_array($data) ? '' : $data,
'value' => $value
);
return '<input '._parse_form_attributes($data,

$defaults)._attributes_to_string($extra)." />\n";
}
C.2 "Extend" Form Helper

Fungsi form_input diatas dapat disesuaikan, sehingga dapat menampilkan script
HTML yang diingikan, sehingga akan mengurangi pengulangan pekerjaan.
Terkadang untuk menampilkan sebuah input perlu diberikan tambahan tag HTML
atau atribut, agar tampilan form menjadi lebih baik.
Berikut ini adalah contoh penambahan tag HTML dan atribut untuk membuat
isian judulnya.
<div class="form-group">
<label for="judulnya">Judul</label>
<input type="text" name="judulnya" value="Pemrograman Web" class="form-
control" id="judulnya" placeholder="Isikan dengan judul">
</div>
33
Pada script diatas, terlihat adanya penambahan tag HTML <div> dan <label>,
juga atribut class, id, dan placeholder pada tag input. Seandainya untuk
membuat sebuah input harus dilakukan penambahan tag dan atribut maka akan
sangat merepotkan jika terdapat beberapa input.
Perlu diketahui bahwa bentuk penambahan Script HTML diatas adalah format
dari Framework Bootstrap. Untuk Framework Bootstrap dapat dilihat pada link
berikut ini:
(https://getbootstrap.com/docs/4.0/components/forms/).
Untuk mengubah prilaku dari fungsi form_input diatas, maka harus dibuat fungsi
form_input yang baru. Untuk itu perlu dilakukan langkah berikut :
 membuat file MY_form_helper.php disimpan pada application/helper.

 Membuat fungsi form_input.
a. Mengambil Fungsi form_input dari
system/helpers/form_helper.php.
b. Melakukan modifikasi pada fungsi form_input pada MY_form_helper.
Modifikasi fungsi form_input dapat dilakukan pada bagian parameter, ataupun

pada bagian isi fungsi. Berikut ini adalah perubahan fungsi form_input, agar
sesuai dengan yang diingiknan :
function form_input($data = '', $value = '', $extra = '', $label = '')

{
$defaults = array(
'type' => 'text',
'name' => is_array($data) ? '' : $data,
'value' => $value
);
$nama = is_array($data) ? '' : $data;

$awalan = '<div class="form-group"> <label for="'.$nama.'">'.
$label.'</label>';
$extra .= 'class="form-control" id="'.$nama.'" placeholder="Isikan

dengan '.$label.'"';
return $awalan.'<input '._parse_form_attributes($data, $defaults).

_attributes_to_string($extra)." /></div>\n";
}
Keterangan:
34
Pada fungsi diatas, terdapat variable $awalan yang berisi bagian sebelum
<input>. Sedangkan variable $extra adalah variable yang akan berisi tambahan
atribut, seperti class, id, dan placeholder.
Jika view edit.php diubah sedikit, dengan menambahkan label diakhir fungsi
form_input sebagai berikut:
echo form_input('judulnya',set_value('judulnya',$berita-
>title),'','Title');
Makan berikut ini adalah tampilan sebelum dan sesudah perubahan fungsi
form_input.
Dan apabila telah di memasukkan framework bootstrap maka tampilkannya

akan menjadi sebagai berikut :
Untuk menambahkan boostrap dapat dipelajari pada link berikut :

https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp
35
3 Session dan Authentikasi
3.1 Konsep dan cara kerja Session
Terdapat dua buah program a.php dan b.php. Didalam file a.php terdapat
perintah untuk mengisi variabel $nama dengan sebuah nilai, kemudian pada file
b.php terdapat perintah untuk menampilkan isi dari variable $nama. Maka saat
program b.php dijalankan yang akan tampil adalah pesan kesalahan, yang
menyatakan bahwa variabel $nama belum diisi. Karena memang variabel
$nama pada kedua program ini tidak saling terkait.
Agar nilai pada variabel $nama yang diisi pada program a.php dapat
ditampilkan pada program b.php maka dapat digunakan variabel session.
Session adalah variabel yang berada di sisi server dan bersifat global. Karena
berada disisi server maka data yang disimpan dapat diakses oleh semua halaman.
Codeigniter telah menyediakan library untuk membantu bekerja dengan session.

Library tersebut adalah library session. Dalam library ini terdapat beberapa
fungsi untuk menambah variabel session, mengambil data dari variable
session dan menghapus session. Untuk dapat menggunakan library ini perlu
dilakukan load library terlebih dahulu, baik pada controller ataupun pada file
application/config/autoload.php. Karena fungsi session ini penting maka pada
36
modul ini akan diatur pada file autoload.php. Dengan memasukkan tulisan
session pada bagian autoload[‘libraries’].
$autoload['libraries'] = array('database','session');
Berikut ini ringkasan perintah terkait operasi terhadap session :
Fungsi Perintah
Menambah atau  $this->session->set_userdata('namavariabel',

mengisi variable $nilai);
session  $this->session->namavariabel = $nilai;
 $_SESSION['namavariabel'] = $nilai;
Mengambil  echo $this->session->userdata('namavariabel');

kemudian  echo $this->session->namavariabel;
Menampilkan isi  echo $_SESSION['namavariabel'];
variable session
Menghapus satu  $this->session->unset_userdata('namavariabel');

variabel session  unset( $_SESSION['namavariabel'] );
Memeriksa  $this->session->has_userdata('namavariabel');
keberadaan  isset( $_SESSION['namavariabel'] );
session
3.2 Skenario Autentikasi

Untuk membuat autentikasi diperlukan sebuah controller Login. Didalam
Controller ini terdapat fungsi-fungsi :
 Index() : alur kerja dalam fungsi ini adalah sebagai berikut

 melakukan pemeriksaan status login (variabel session),
■ Jika sudah login, maka tampilkan halaman utama
■ Jika belum login, maka
 Periksa username dan password (setelah mengisi form
login)
 Jika salah maka tampilkan form login
 Jika benar maka
■ simpan status login ke session
■ tampilkan halaman utama
 Logout() : proses dalam fungsi ini adalah sebagai berikut :

 Menghapus session status login
 Mengarahkan ke controller login/index
Sedangkan untuk controller selain login, yang perlu dibuat adalah pada fungsi
__construct(). Fungsi __construct() adalah fungsi yang pertama dijalankan pada 37
setiap kelas. Dalam fungsi __construct() akan dilakukan pemeriksaan session
status login, dan jika belum login, maka proses akan diarahkan ke controller
login.
3.3 Controller Login

Seperti pada skenario diatas, maka berikut ini adalah isi dari controller sesuai
urutannya
A.Membuat Fungsi Index
<?php
class Login extends CI_Controller {

{
}
A.1 Memeriksa status login

Pada contoh ini, variable session yang digunakan untuk menampung status login
diberi nama logged_in. Jika user telah melakukan login, maka akan diarahkan
pada halaman utama dalam hal ini halaman berita.
<?php

{
if ($this->session->logged_in){
redirect('berita');
}
}
A.2 Menampilkan form login

Jika belum login maka akan ditampilkan form login.
<?php

{
38
redirect('berita');
}
$data['judul'] = 'Login Form';
$this->load->view('login/form');
}
}
A.3 Validasi username dan password

Untuk melakukan validasi username dan password, akan digunakan library form
validation. Aturan untuk username adalah tidak boleh kosong. Sedangkan
password selain tidak boleh kosong, juga harus sesuai dengan username yang
telah diisikan. Untuk membuat rule untuk password, maka akan dibuat sebuah
fungsi baru yang bertugas untuk melakukan pengecekan data dari database.
<?php

{
redirect('berita');
}
$this->form_validation->set_rules('username','Username','required',
array('required' => '%snya harus diisi.'));
$this->form_validation->set_rules('password','Password',
'required|callback_cek_password');
{
} else {
//jika username dan password benar
}
A.4 Username dan password benar

Jika username dan password benar (pada bagian akhir script diatas) maka
data terkait user akan disimpan. Data yang akan disimpan adalah username dan 39
status login. Jika ingin menampilkan nama lengkap, maka dapat ditambahkan
untuk menyimpan nama lengkap. Kemudian mengarahkan program untuk
menampilkan halaman utama, sebagai contoh adalah halaman berita.
$username = $this->input->post('username');
$sessiondata = array(
'username' => $username,
'logged_in' => TRUE
);
$this->session->set_userdata($sessiondata);
redirect('berita');
A.5 Fungsi callback cek_password

Untuk melakukan validasi terhadap password yang diisikan (perhatikan pada
set_rule bagian password diatas), maka diperlukan fungsi callback. Fungsi
callback ini akan mengambil data user sesuai username, dan kemudian
memeriksa password yang diisikan. Jika password yang diisikan sama dengan
password yang ada pada data user, berarti data tersebut benar atau valid. Jika
tidak maka sebaliknya, dan akan dibuat pesan kesalahan.
public function cek_password($password)

{
$this->load->model('user_model');
$result = $this->user_model->get($username);
if (@$result->password === $password){

return TRUE;
} else {
$this->form_validation->set_message('cek_password',
'Username atau {field} Salah');
return FALSE;
}
B.Membuat fungsi logout

Fungsi logout pada hakikatnya adalah menghapus data session. Pada contoh ini
data yang dihapus hanya variable session logged_in. Setelah dihapus,
kemudian mengarahkan pada halaman login kembali.
public function logout(){

$this->session->unset_userdata('logged_in');
redirect('login');
}
40
C.Controller login
Selengkapnya isi dari controller login adalah sebagai berikut :
<?php

{
redirect('berita');
}
$this->form_validation->set_rules('username','Username','required',
array('required' => '%snya harus diisi.'));
$this->form_validation->set_rules('password','Password',
'required|callback_cek_password');
{
} else {
$sessiondata = array(
'username' => $username,
'logged_in' => TRUE
);
$this->session->set_userdata($sessiondata);
redirect('berita');
}
public function cek_password($password)

{
$this->load->model('user_model');
//$password = $this->input->post('password');
$result = $this->user_model->get($username);
if (@$result->password === $password){

return TRUE;
} else {
$this->form_validation->set_message('cek_password', 'Username
atau {field} Salah');
return FALSE;
}
41
}
public function logout(){

$this->session->unset_userdata('logged_in');
redirect('login');
}
D. Membuat user model

Sebelum langkah-langkah berikutnya dilakukan, buatlah sebuah tabel User,
yang memiliki field sebagai berikut : id_user, username, password, dan fullname.
Model user hanya berisi fungsi get, yang akan digunakan oleh controller login,
untuk memeriksa username yang telah diisikan pada form. Karena hanya
mengambil satu data maka yang akan dikembalikan adalah row();
<?php
class user_model extends CI_Model {
public function get($username)
{
$this->db->where('username',$username);
$query = $this->db->get('user');
return $query->row();
}
}
E. Membuat form Login

Pembuatan form login menggunakan form_helper. Pada halaman ini berisi 3
(tiga) elemen, yaitu username, password dan tombol login.
<?php
echo form_open('login');
echo form_input('username',set_value('username'));
echo form_input('password',set_value('password'));
echo form_submit('', 'Login');
echo form_close();
?>
3.4 Membuat fungsi __construct pada controller selain login

Berikut ini akan dibuat tambahan program pada fungsi __construct yang ada
pada controller berita.

{
42
$this->load->library('session');
if ($this->session->logged_in == FALSE){
redirect('login');
}
}
....
3.5 Membuat fungsi untuk menampilkan nama user yang

telah Login
Ini tugas saja ya….:)
Untuk menampilkan dapat menggunakan perintah berikut ini

Pada Controller, data username dari session diambil
$data['username'] = $this->session->username;
Kemudian ditampilkan pada view
43
4 AJAX (Asyncronous Javascript and
XML)
Bila dilihat dari kepanjangan AJAX, maka dapat dilihat bahwa pembahasan
kedepan akan terkait dengan javascript. Sedangkan untuk XML tidak dibahas
pada modul ini. Secara sederhana XML digunakan sebagai format yang akan
digunakan saat mengirimkan data. Seiring dengan berjalannya perkembangan
javascript, maka format data yang akan digunakan pada modul ini adalah
format JSON. Format JSON lebih mudah digunakan baik dari sisi Javascript
maupun dari sisi PHP.
4.1 Javascript
Javascript adalah sebuah script yang termasuk dalam client side. Artinya
Javascript dapat berjalan di browser tanpa harus ada server. Beberapa contoh
penggunaan javascript adalah bergeraknya jarum detik pada sebuah jam yang
tampil di browser. Atau adanya suatu perubahan pada tampilan tanpa interaksi
dari user.
Pada modul ini akan dijelaskan sekilas tentang javascript, sebagai pengantar
untuk menggunakan jQuery. Karena jQuery adalah hanya sebuah library yang
dibangun menggunakan javascript. Tetapi untuk menggunakan Ajax jika
menggunakan jQuery dibanding hanya menggunakan javascript.
Diambil, diterjemahkan dan disesuaikan dari
https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/
JavaScript_basics
JavaScript adalah bahasa pemrograman yang menambahkan interaktivitas ke

situs web Anda (misalnya game, respons ketika tombol ditekan atau saat
memasukkan data dalam form, dan animasi..etc).
A.Console
Console adalah adalah sebuah tab yang ada pada developer tool. Pada Chrome
dapat dibuka dengan menekan tombol F12, pilih tab console. Console dapat
digunakan untuk menampilkan kesalahan, tulisan, isi variable, dan lain-lain
untuk membantu dalam pengembangan javascript.
B.Membuat "Hello Word"

Membuat program menggunakan javascript lebih sulit dibanding menggunakan
HTML dan CSS. Tetapi jika sudah menguasai maka web site akan menjadi
sangat bagus.
Dimulai dari yang sedikit. Untuk contoh kita akan menambahkan javascript untuk
alamat
44
http://localhost/ci/berita
1. Buat file main.js di folder xampp/htdocs/ci/assets/js

2. Pada view (misalnya pada file view.php yang ada di dalam folder
views/berita), setelah tag </body> (body tutup) tuliskan
<script src="/ci/assets/js/main.js"></script>
3. Pada file main.js, buat script berikut (javascript adalah bahasa pemrograman
yang case sensitive):
const myHeading = document.querySelector('h1');

myHeading.textContent = 'Hello world!';
4. Setelah disimpan, progarm dapat dicoba
http://localhost/ci/berita
Gambar 4.1 Sebelum diberi javascript
Gambar 4.2 Setelah diberi javascript
Setelah dijalankan maka akan terlihat tulisan pada tag H1, yang awalnya
bertuliskan "Daftar Berita", digantikan dengan tulisan "Hello world!". Perintah
querySelector() akan mengambil H1 sebagai objek tujuan, dan menyimpannya
45
pada variable myHeading. Kemudian mengisi "Hello world!" dengan
menggunakan property textContent dari myHeading.
C.Variable
Variable adalah sebuah tempat yang dapat diisi nilai. Sebuah variable harus di
deklarasi dengan memulai dengan kata kunci "var" atau "let", diikuti dengan
nama variable, seperti berikut :
let myNRP;
var myNama;
setelah dideklarasikan maka variable dapat diisi nilai.
myNRP = '11223344';
atau bisa juga menggunakan cara berikut :
let myNRP = '11223344';
D. Komentar
Komentar atau keterangan dapat dituliskan dalam program javascript, yang
tidak akan diproses oleh browser. Dapat menggunakan
/*
Jika banyak baris
*/
Jika hanya satu baris dapat digunakan cara sebagai berikut :
// komentar satu baris
E. Function
Bila terdapat satu atau beberapa baris perintah yang akan digunakan berulang-
ulang dengan sedikit perbedaan, maka dapat dibuat sebuah function. Sehingga
jika diperlukan cukup memanggil nama fungsinya tanpa menulis perintah yang
sama berulang-ulang.
Contoh fungsi yang sudah ditulis diatas dan merupakan fungsi yang sudah ada di
javascript adalah
querySelector()
dan alert()
46
Untuk membuat fungsi sendiri (User Define Function) dapat dilakukan sebagai
berikut, (dapat di coba di console)
function multiply(angka1,angka2) {
let result = angka1 * angka2;
return result;
}
multiply(3,4);
multiply(5,5);
F. Events
Interaksi pada website akan diatur pada event handler. Event handler adalah
struktur pemrograman yang akan menangkap kejadian yang terjadi pada
browser, dan menjalankan perintah sebagai respon. Contoh yang paling sering
adalah event klik. Tulis perintah berikut di console, kemudian klik halaman web.
document.querySelector('html').onclick = function() {
alert('Ouch! Stop poking me!');
}
Pada contoh diatas, event click di tempelkan pada html. Artinya semua element
diantara tag html di klik maka akan dijalankan perintah alert.
Perintah diatas sama dengan perintah berikut :
let myHTML = document.querySelector('html');

myHTML.onclick = function() {
alert('Ouch! Stop poking me!');
};
4.2 jQuery
Seperti telah dijelaskan diatas, bahwa jQuery adalah hanya sebuah library, dan
bukan sebuah bahasa pemrograman. Jadi cara kerja pengembangan aplikasi
pada jQuery sama seperti membuat aplikasi javascript.
Untuk dapat membuat program javascript menggunakan jQuery, maka library

jQuery harus di download di http://jquery.com/download/ atau diambil dari CDN.
Terdapat beberapa sumber CDN, MaxCDN, Google, atau Microsoft. Jika
menggunakan CDN dari google maka yang dilakukan adalah sebagai berikut :
<script src =
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
Nama file jquery.min.js, adalah bentuk ukuran file kecil dari jquery, yang isinya
sama dengan jquery.js.
47
Jika di download, maka cara memanggil library adalah sebagai berikut :
<script src="assets/js/jquery.min.js"></script>
A.Syntax
Aturan penulisan dasar dari jQuery adalah sebagai berikut :
$(selector).action()
 simbol $ digunakan untuk menggantikan tulisan jQuery

 selector digunakan untuk mencari elemen HTML yang dituju
 action adalah fungsi jQuery yang akan dijalankan
Semua program jQuery, lebih baik dituliskan didalam script berikut :
jQuery(document).ready(function() {
// do stuff when DOM is ready
});
Atau menggunakan singkatan menjadi
$(document).ready(function() {
});
Maksud perintah diatas adalah pilih bagian document, jika sudah siap (semua isi
dari dokumen sudah di download) maka jalankan perintah dalam fungsi.
Atau yang lebih singkat dapat ditulis dengan perintah :
$(function() {
});
B.Selector
Selector pada jQuery digunakan untuk menentukan element HTML yang akan di
manipulasi. Selector selalu ditulis didalam kurung setelah $.
$("p") : memilih semua elemen HTML "<p>"
$("#pertama") : memilih elemen HTML dengan id="pertama"
$(".merah") : memilih semua elemen HTML dengan class="merah"
$("p.merah"): memilih semua elemen HTML dengan <p class="merah">
$("tr:even") : memilih semua elemen HTML <tr> yang genap
48
$("input[name='nrp']") : memilih semua elemen HTML <input> yang memiliki
atribut name berisi nrp, seperti <input type="text" name="nrp">
atau <input type="hidden" name="nrp">
C.Event
Semua aksi yang diberikan oleh user dan akan direspon oleh web browser.
Sebuah event mewakili suatu saat ketika terjadi sesuatu. Contohnya:
menggerakkan mouse diatas sebuah elemen, memilih radio button, klik sebuah
elemen, dll.
Mouse Events Keyboard Events Form Document/Window

Events Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
Untuk membuat perintah "jika paragraph di klik" maka ditulis sebagai berikut :
$("p").click();
Kemudian untuk menentukan apa yang akan dilakukan jika p di klik dituliskan
dalam function
$("p").click(function(){
// action goes here!!
});
Contoh :
$("p").hide();
});
Contoh program diatas akan menghilangkan semua elemen p saat ada elemen
p yang di klik. Contoh berikut hanya menghilangkan elemen p yang di klik,
elemen p yang lain (yang tidak di klik) tidak hilang).
$("this").hide();
});
D. Effect
Efek adalah perintah untuk melakukan sesuatu, seperti pada contoh sebelumnya
efek hide(). Selain hide(), juga ada show(), dan toggle().
Untuk kelompok Slide terdapat : slideDown(), slideUp(), slideToggle() 49

Untuk kelompok Fade terdapat : fadeIn(), fadeOut(), fadeToggle(), fadeTo()
dan animate().
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></
script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</html>
Silahkan lakukan eksperimen untuk efek yang lain. Cari cara penggunaan
perintah efek yang lainnya.
E. Callback
Fungsi callback adalah menjalankan perintah selanjutnya setelah perintah
sebelumnya selesai dijalankan. Perintah javascript akan dijalankan baris per
baris dari atas kebawah. Tetapi dengan menggunakan efek, baris berikutnya
akan dijalankan walaupun efek belum selesai dilakukan. Hal ini akan memicu
masalah. Untuk mencegah hal ini terjadi maka digunakan callback.
Berikut ini contoh dua perintah tanpa callback, hide dan alert. Pada contoh
dibawah ini alert akan ditampilkan walaupun proses hide belum selesai.
$("button").click(function(){
$("p").hide(1000);
alert("The paragraph is now hidden");
});
50
Cara menulis callback adalah sebagai berikut :
$(selector).hide(speed, callback);
Contoh :
$("button").click(function(){
$("p").hide("slow", function(){
alert("The paragraph is now hidden");
});
});
F. Mengambil nilai dan mengisi nilai

Untuk mengambil dan mengisi nilai digunakan perintah-perintah berikut :
 text() : mengisi atau mengambil nilai dari elemen yang dipilih

 html(): mengisi atau mengambil nilai dari isi elemen yang dipilih termasuk
tag HTML
 val() : mengisi atau mengambil nilai dari form fields
Contoh :
https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_html_get
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
alert("HTML: " + $("#test").html());
});
});
Jika #btn1 ditekan maka akan menghasilkan : Text: This is some bold text in a
paragraph.
Jika #btn2 ditekan maka akan menghasilkan : HTML: This is some <b>bold</b>
text in a paragraph.
Contoh penggunaan perintah text(), html(), dan val() untuk mengisi :
https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_html_set
$("#test1").text("Hello world!");
});
$("#test2").html("<b>Hello world!</b>");
});
51
$("#test3").val("Dolly Duck");
});
});
Pada contoh diatas,
 tulisan pada id test1 akan diganti tulisan Hello world saat #btn1 diklik.
 Dan saat tombol #btn2 diklik maka tulisan pada #test2 akan diganti
dengan tulisan "hello world!" yang tebal.
 Sedangkan saat tombol #btn3 di klik maka isi dari form yang memiliki
#test3 akan diganti dengan tulisan "Dolly Duck".
G. Traversing
Traversing maksudnya adalah mencari atau melalui sebuah elemen. Jika
terdapat script HTML sebagai berikut:
<div>
<ul>
<li>
<span>Nomer</span>
<span>Satu</span>
</li>
<li>
<b>Penting</b>
</li>
</ul>
</div>
Maka contoh traversing parent :
 <span>Satu</span> memiliki parent <li>

 <li> memiliki parent <ul>
 <ul> memiliki parent <div>
Terdapat beberapa konsep tentang traversing, seperti ancestor (pendahulu),

descendant (turunan), sibling (saudara), filtering (menyaring). Pada modul ini
hanya akan di jelaskan tentang ancestor parent.
H. Ajax
Seperti judul sub bab ini, bahwa kepanjangan dari ajax adalah asyncronous
javascript and xml. Seluruh proses download file HTML adalah syncronous
artinya sekali file diminta maka seluruh isi file akan didownload dan akan
ditampilkan.
Kita sering melihat setelah proses download selesai, seolah-olah masih ada
proses yang terjadi setelah itu.
52
Contoh pada facebook, terdapat proses yang terjadi setelah seluruh halaman di
load. Proses tersebut adalah proses menunggu load notification. Proses
tersebut menggunakan ajax, karena setelah seluruh halaman di load, maka
halaman akan menjalankan perintah ajax untuk mengambil data.
Berikut ini contoh lain dari proses ajax :
Gambar 4.3 meminta halaman
53
Gambar 4.4 meminta data tambahan
Keterangan
panah no. 1 : browser meminta sebuah halaman pada web server
panah no. 2 : seluruh halaman akan ditampilkan (lihat Gambar 4 .4 sisi sebelah
kiri)
panah no. 3 : setelah tombol 3 ditekan maka akan dilakukan pengambilan data
lagi ke server
panah no. 4 : data yang dikirim dari server (tulisan merah) akan ditampilkan
pada form (tulisan merah)
H.1 Post
Perintah post adalah salah satu perintah yang dapat digunakan untuk melakukan
ajax (meminta data). Perintah ini akan meminta data ke server dengan
menggunakan metode request HTTP POST. Aturan penulisan untuk perintah post
adalah sebagai berikut:
$(selector).post(URL,data,function(data,status,xhr),dataType)
Parameter Description
URL Harus diisi. Menentukan tujuan permintaan data
data Optional. Menentukan data yang akan dikirim ke server
function(data,status,x Optional. Fungsi merupakan callback yang akan
hr) dijalankan jika permintaan sukses didapatkan.
parameters:
 data – berisi data hasil dari server
 status – berisi status hasil
 xhr – berisi object XMLHttpRequest
dataType Optional. Menentukan tipe data hasil yang diinginkan.
xml,html,text,script,json,jsonp
Contoh :
54
$("input[name='penulisnya']").blur(function(){
$.post("/ci/berita/get_author",
{ the_author: $(this).val() },
function(data, status){
$.each(data, function(index, elemen){
$("ul").append('<li>'+elemen.title+'</li>');
});
},
"json"
);
});
});
Keterangan:
Script diatas
 akan meminta data setelah mengisi input penulis

 akan meminta data dari controller berita fungsi get_author.
 Mengirim parameter the_author yang isinya diambil dari input yang
memiliki name penulisnya
 Jika data sukses diproses, maka semua data dari table berita dengan
nama field "title" akan ditambahkan pada elemen ul
Berikut ini adalah isi dari file view edit.php secara lengkap:
<?php
echo form_open_multipart("berita/edit/$berita->id");
echo form_input('judulnya',set_value('judulnya',$berita-
>title),'','Title');
echo form_input('beritanya',set_value('beritanya',$berita-
>body),'','Body');
echo form_input('penulisnya',set_value('penulisnya',$berita-
>name),'','Author');
echo form_upload('gambarnya');
echo form_close();
?>
<h2> Daftar Judul</h2>
<ul></ul>
</div>
</body>
<script src="/ci/assets/js/main.js"></script>
</html>
H.2 Get_author
Fungsi get_author pada controller berita akan dipanggil oleh fungsi ajax pada
H.1. Isi dari fungsi get_author adalah sebagai berikut :
55
public function get_author(){
$title = $this->input->post('the_author');
$result = $this->berita_model->get_like($title);
echo json_encode($result);
}
Fungsi ini bertugas meminta data pada berita model, dan mengembalikan data
yang didapat dalam format data json. Data dalam format json akan digunakan
oleh ajax (sub bab H.1)
H.3 Fungsi get_like pada Berita_model

Pada berita model ditambahkan sebuah fungsi dengan nama get_like yang
bertugas mengambil data berita berdasarkan nama penulis. (like)
public function get_like($str = ''){

$this->db->like('name', $str);
}
56
5 Template
5.1 Template Parser
CodeIgniter memilik sebuah fasilitas untuk template parser, walaupun hanya
sederhana. Karena diluar sana telah banyak template parser khusus seperti
twig, smarty, dan lain-lain.
Materi ini hanya sebagai pengenalan tentang adanya template parser. Sehingga
jika nanti akan mempelajari template parser lain, sudah memiliki gambaran.
Intinya template parser digunakan untuk mengganti sebuah sintak (tulisan

tertentu) dengan isi dari variable. Contoh :
Terdapat data sebagai berikut :
<?php
$this->load->library('parser');
$data = array(
'blog_title' => 'My Blog Title',
'blog_heading' => 'My Blog Heading',
'blog_entries' => array(
array('title' => 'Title 1', 'body' => 'Body 1'),
array('title' => 'Title 5', 'body' => 'Body 5')
)
);
$this->parser->parse('blog_template', $data);
Terdapat view sebagai berikut :
<html>
<head>
<title>{blog_title}</title>
</head>
<body>
<h3>{blog_heading}</h3>
{blog_entries}
<h5>{title}</h5>
<p>{body}</p>
{/blog_entries}
</body>
</html>
Maka semua tulisan yang ada didalam kurung akan diganti dengan isi dari
variable dengan nama yang sama, dan hasilnya menjadi sebagai berikut :
57
<html>
<head>
<title>My Blog Title</title>
</head>
<body>
<h3>My Blog Heading</h3>
<h5>Title 1</h5>
<p>Body 1</p>
<h5>Title 2</h5>
<p>Body 2</p>
<h5>Title 3</h5>
<p>Body 3</p>
<h5>Title 4</h5>
<p>Body 4</p>
<h5>Title 5</h5>
<p>Body 5</p>
</body>
</html>
Ada beberapa keuntungan dengan menggunakan template parser, yaitu:
1. Tidak perlu lagi melakukan <?php echo $nama_variable; ?> atau <?=
$nama_variable; ?>
2. Penggunaan perintah perulangan untuk menampilkan data yang banyak
lebih mudah
Contoh penggunaan pada studi kasus kita:
Pada file views/berita/view.php, akan ditampilkan tampilan dalam bentuk table.

Sebelumnya untuk untuk menampilkan data yang dibentuk table, digunakan
table helper. Dapat digunakan menjadi sebagai berikut:
<table id="example2" class="table table-striped table-bordered table-sm

table-hover">
<thead>
<tr class="thead-dark">
<th>kode</th>
<th>judul</th>
<th>beritanya</th>
<th>penul</th>
<th>gambarnya</th>
<th>aksi</th></tr>
</tr>
</thead>
<tbody>
{{berita}}
<tr>
<td>{{id}}</td>
<td>{{title}}</td>
<td>{{body}}</td>
<td>{{name}}</td>
58
<td>{{picture}}</td>
<td><?=anchor("berita/edit/{{id}}",'Edit','class="btn btn-
primary btn-sm"');?></td></tr>
</tr>
{{/berita}}
</tbody>
</table>
Pada controller berita dibuat sebagai berikut :
<?php

{
$this->parser->set_delimiters('{{','}}');
}

{
$data = array(
//'title' => 'My Title',
);
$data['judul'] = 'Daftar Berita';
$this->parser->parse('new_header',$data);
$this->parser->parse('berita/view', $data);
$this->parser->parse('new_footer',$data);
}
Pada contoh diatas, pada function __construct di siapkan terlebih dahulu library
parser. Kemudian mengubah simbol untuk variable yang diganti digunakan
simbol {{ }}. Kemudian pada function index untuk menampilkan digunakan
perintah $this->parser->parse, bukan lagi menggunakan $this->load->view.
Jika dilihat pada file view.php, tidak terlihat perintah perulangan untuk
menampilkan semua baris. Tetapi diganti dengan menggunakan {{berita}} dan
{{/berita}}. Dan semua {{ }} didalam atau diantara {{berita}} dan
{{/berita}} akan diulang-ulang untuk semua data atau baris atau record yang
ada didalam data berita.
Akhirnya jika menggunakan teknik ini, maka tidak dapat menggunakan library
Table, seperti sebelumnya.
5.2 Bootstrap
Sebelumnya pada sub bab sebelumnya, penggunaan bootstrap juga pernah
dibahas sedikit pada sub bab 2C.2 tentang "Extend" Form Helper.
59
Bootstrap adalah sebuah framework CSS, yang artinya sebuah kumpulan CSS
atau Javascript yang akan mengatur tampilan atau efek pada tampilan. Dengan
menggunakan framework CSS, yang perlu dilakukan adalah menyesuaikan
format html sesuai framework, dan menuliskan class yang akan digunakan.
Sebelum dapat menggunakan fasilitas dari Bootstrap, yang perlu dilakukan

adalah memasukkan file css dan javascript yang dibutuhkan. Dapat
menggunakan file yang telah didownload atau menggunakan CDN.
Untuk kasus pada program, akan digunakan CDN untuk menggunakan bootstrap.
A.Layout dan grid

Layout pada bootstrap disesuaikan pada lebar device atau alat yang digunakan
untuk membuka web. Lebar alat kemudian di bagi menjadi 5 bagian, yaitu :
Extra small, Small, Medium, Large, Extra Large.
Extra small untuk ukuran layar <576px, menggunakan aturan sm
Small untuk ukuran layar ≥576px, menggunakan aturan sm
Medium untuk ukuran layar ≥768px, menggunakan aturan md
Large untuk ukuran layar ≥992px, menggunakan aturan lg
Extra large untuk ukuran layar ≥1200px, menggunakan aturan xl
A.1 Grid
Untuk mengatur sebuah halaman, bootstrap menggunakan teknik kolom.
Sebuah halaman akan dibagi menjadi 12 kolom.
Contoh :
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
</div>
</div>
</div>
</div>
Maksud dari skrip diatas adalah jika lebar alat lebih besar 576px maka tampilan
akan menjadi 3 (tiga) kolom.
60
Jika lebar alat kurang dari 576px maka tampilan akan menjadi 1 kolom, sebagai
berikut :
Jika ingin membuat lebar kolom yang berbeda, maka dapat ditambahkan lebar
yang diinginkan dengan total 12 kolom, sebagai berikut:
<div class="container">
<div class="row">
<div class="col-md-2">
1 of 3
</div>
Variable width content
</div>
3 of 3
</div>
</div>
</div>
Hasilnya sebagai berikut:
B.Table dan Button

B.1 Table
Untuk membentuk table, bootstrap menyediakan beberapa pilihan untuk
membuat tampilan table.
 Striped rows
 Bordered table
 Borderless table
 Hoverable rows
 Small table
Semua bentuk tampilan dapat digabungkan.
61
Contoh pada kasus yang telah dibuat, akan ditambahkan aturan bootstrap pada
table. Untuk menggunakan, dapat diterapkan pada file view.php.
Pada bagian template ditambahkan class table-striped, table-bordered, table-sm,

dan table-hover pada table open, sedangkan untuk thead open ditambahkan
thead-dark.
B.2 Button
Untuk membuat tampilan tombol, bootstrap telah menyediakan class "btn".
Berikut ini class untuk memberikan perbedaan warna tombol :
<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
B.3 Bootstrap datatable

Datatable yang telah digunakan, dapat juga digabungkan dengan bootstrap.
Contoh dapat dilihat pada halaman web berikut :
https://datatables.net/examples/styling/bootstrap4
Untuk dapat menampilkan datatable dalam bentuk bootstrap, yang harus

dilakukan adalah memasukkan css dan javascript datatable khusus bootstrap.
Tambahkan pada file header.php bagian header tulisan berikut :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Berita</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css
">

<script
script>

<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min
.js"></script>

62
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"><
/script>

href="https://cdn.datatables.net/v/dt/dt-1.10.20/datatables.min.css"/>

href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css"
/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-

1.10.20/datatables.min.js"></script>
<script type="text/javascript"
src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></
script>
</head>
B.4 Contoh penggunaan
$template = array('table_open' => '<table id="example" class="table table-

striped table-bordered table-sm table-hover">',
'thead_open' => '<thead class="thead-dark">');
$this->table->set_template($template);
$this->table-
>set_heading('kodes','judul','beritanya','penul','gambarnya','aksi');

{
$row->id,
$row->title,
$row->body,
$row->name,
$row->picture,
anchor("berita/edit/$row->id",'Edit','class="btn btn-primary btn-
sm"')
);
}
echo $this->table->generate();
sehingga hasil dari program diatas adalah sebagai berikut :
63
Pada tampilan tersebut, terlihat terdapat warna berbeda pada judul table
(thead). Kemudian terdapat warna yang berbeda antara baris genap dan ganjil
(table-striped). Disekeliling table terdapat garis batas (table-bordered). Dan jika
mouse diarahkan pada baris dibawah judul, maka akan terlihat berubah warna.
C.Bootstrap Example
Bootstrap juga telah memiliki contoh tampilan yang dapat digunakan. Untuk
download contoh yang ada pada bootstrap dapat dibuka pada halaman web
berikut :
https://github.com/twbs/bootstrap/releases/download/v4.5.0/bootstrap-4.5.0-
examples.zip
Contoh tampilan yang akan digunakan adalah ada pada folder dashboard.
Sebelum dapat menggunakan, masukkan terlebih dahulu folder asset kedalam

folder codeigniter:
xmpp/htdocs/ci/assets.
Kemudian masukkan juga folder css dan javascript yang ada pada folder
dashboard ke dalam folder assets, sesuai tempatnya.
Sehingga hasilnya adalah sebegai berikut :
64
C.1 Uji coba template
Membuat file template.php pada application/views. Untuk membuat file
template.php, yang perlu dilakukan adalah mengambil file index.php yang ada
folder dashboard di bootstrap example.
Lakukan modifikasi lokasi file untuk css dan javascript pada file tersebut.
Beberapa yang perlu di modifikasi adalah
 baris 14, lokasi bootstrap.css diubah menjadi

<link href="/ci/assets/dist/css/bootstrap.css" rel="stylesheet">
 baris 33, lokasi file dashboadr.css diubah menjadi
<link href="/ci/assets/css/dashboard.css" rel="stylesheet">
 baris 275 dan 276, lokasi jquery diubah menjadi

<script
script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.m
in.js"></script>
 pada baris 276, lokasi bootstrap.bundle.js diubah menjadi
<script src="/ci/assets/dist/js/bootstrap.bundle.js"></script>
 dan baris 279, lokasi dashboard.js diubah menjadi
<script src="/ci/assets/js/dashboard.js"></script>
Selanjutnya dibaut sebuah fungsi dengan nama template di controller berita,

sebagai berikut:
<?php

{
redirect('login');
}
65
$this->load->theme('demo');
$this->parser->set_delimiters('{{','}}');
}
public function template(){

$this->load->view('template');
}
Untuk mencoba dapat dipanggil url berikut:

localhost/ci/berita/template
hasilnya adalah:
C.2 Multiple view

Karena banyaknya baris yang ada dalam template.php, maka file template akan
dipecah menjadi beberapa bagian. Bagian tersebut adalah bagian header,
content dan footer.
Berikut ini adalah gambaran dari bagian header (merah), content (biru), dan
footer (tidak terlihat).
66
Secara skrip, maka berikut ini adalah gambaran bagian header (merah), content
(biru) dan footer (hijau):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap
contributors">
<meta name="generator" content="Jekyll v4.0.1">
<title>Dashboard Template · Bootstrap</title>
<link rel="canonical"
href="https://getbootstrap.com/docs/4.5/examples/dashboard/">


<link href="/ci/assets/dist/css/bootstrap.css" rel="stylesheet">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media (min-width: 768px) {

.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
67

<link href="/ci/assets/css/dashboard.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0
shadow">
<a class="navbar-brand col-md-3 col-lg-2 mr-0 px-3" href="#">Company
name</a>
<button class="navbar-toggler position-absolute d-md-none collapsed"
type="button" data-toggle="collapse" data-target="#sidebarMenu" aria-
controls="sidebarMenu" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<input class="form-control form-control-dark w-100" type="text"
placeholder="Search" aria-label="Search">
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link" href="#">Sign out</a>
</li>
</ul>
</nav>
<div class="container-fluid">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light
sidebar collapse">
<div class="sidebar-sticky pt-3">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">
<span data-feather="home"></span>
Dashboard <span class="sr-only">(current)</span>
</a>
</li>
<a class="nav-link" href="#">
<span data-feather="file"></span>
Orders
</a>
</li>
<span data-feather="shopping-cart"></span>
Products
</a>
</li>
<span data-feather="users"></span>
Customers
</a>
</li>
<span data-feather="bar-chart-2"></span>
Reports
</a>
</li>
68
<span data-feather="layers"></span>
Integrations
</a>
</li>
</ul>
<h6 class="sidebar-heading d-flex justify-content-between align-

items-center px-3 mt-4 mb-1 text-muted">
<span>Saved reports</span>
<a class="d-flex align-items-center text-muted" href="#" aria-
label="Add a new report">
<span data-feather="plus-circle"></span>
</a>
</h6>
<ul class="nav flex-column mb-2">
<span data-feather="file-text"></span>
Current month
</a>
</li>
Last quarter
</a>
</li>
Social engagement
</a>
</li>
Year-end sale
</a>
</li>
</ul>
</div>
</nav>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4">

<div class="d-flex justify-content-between flex-wrap flex-md-nowrap
align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">Dashboard</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group mr-2">
<button type="button" class="btn btn-sm btn-outline-
secondary">Share</button>
<button type="button" class="btn btn-sm btn-outline-
secondary">Export</button>
</div>
<button type="button" class="btn btn-sm btn-outline-secondary
dropdown-toggle">
<span data-feather="calendar"></span>
This week
</button>
69
</div>
</div>
<canvas class="my-4 w-100" id="myChart" width="900"

height="380"></canvas>
<h2>Section title</h2>
<div class="table-responsive">
<table class="table table-striped table-sm">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
<td>dolor</td>
<td>sit</td>
</tr>
<tr>
<td>1,002</td>
<td>amet</td>
<td>consectetur</td>
<td>adipiscing</td>
<td>elit</td>
</tr>
<tr>
<td>1,003</td>
<td>Integer</td>
<td>nec</td>
<td>odio</td>
<td>Praesent</td>
</tr>
<tr>
<td>1,003</td>
<td>libero</td>
<td>Sed</td>
<td>cursus</td>
<td>ante</td>
</tr>
<tr>
<td>1,004</td>
<td>dapibus</td>
<td>diam</td>
<td>Sed</td>
<td>nisi</td>
</tr>
<tr>
<td>1,005</td>
<td>Nulla</td>
<td>quis</td>
<td>sem</td>
<td>at</td>
70
</tr>
<tr>
<td>1,006</td>
<td>nibh</td>
<td>elementum</td>
<td>imperdiet</td>
<td>Duis</td>
</tr>
<tr>
<td>1,007</td>
<td>sagittis</td>
<td>ipsum</td>
<td>Praesent</td>
<td>mauris</td>
</tr>
<tr>
<td>1,008</td>
<td>Fusce</td>
<td>nec</td>
<td>tellus</td>
<td>sed</td>
</tr>
<tr>
<td>1,009</td>
<td>augue</td>
<td>semper</td>
<td>porta</td>
<td>Mauris</td>
</tr>
<tr>
<td>1,010</td>
<td>massa</td>
<td>Vestibulum</td>
<td>lacinia</td>
<td>arcu</td>
</tr>
<tr>
<td>1,011</td>
<td>eget</td>
<td>nulla</td>
<td>Class</td>
<td>aptent</td>
</tr>
<tr>
<td>1,012</td>
<td>taciti</td>
<td>sociosqu</td>
<td>ad</td>
<td>litora</td>
</tr>
<tr>
<td>1,013</td>
<td>torquent</td>
<td>per</td>
<td>conubia</td>
<td>nostra</td>
</tr>
<tr>
<td>1,014</td>
<td>per</td>
71
<td>inceptos</td>
<td>himenaeos</td>
<td>Curabitur</td>
</tr>
<tr>
<td>1,015</td>
<td>sodales</td>
<td>ligula</td>
<td>in</td>
<td>libero</td>
</tr>
</tbody>
</table>
</div>
</main>
</div>
</div>

<script
script>


<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min
.js"></script>
<script src="/ci/assets/dist/js/bootstrap.bundle.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.9.0/feather.min
.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></
script>
<script src="/ci/assets/js/dashboard.js"></script></body>
</html>
 Bagian header (merah) berisi skrip mulai baris awal, skrip navigasi, hingga
skrip judul konten akan dimasukkan ke file new_header.php.
 Sedangkan bagian konten (biru) akan disesuaikan dengan keperluan
(tidak diambil).
 Bagian footer (hijau) berisi penutup, dan script untuk mengambil eksternal
javascript akan dimasukkan ke file new_footer.php.
Sehingga untuk menampilkan sebuah halaman utuh, yang perlu dilakukan

adalah menampilkan tiga bagian tersebut sekaligus dalam sebuah fungsi.
Beriktu ini contoh untuk menampilkan halaman berita:

{
$data = array(
//'title' => 'My Title',
72
);
$this->parser->parse('new_header',$data);
$this->parser->parse('berita/view', $data);
$this->load->view('new_footer',$data);
}
Sehingga tampilan dari perintah tersebut adalah sebagai berikut:
C.3 Membuat library template

Sampai pada sub bab diatas (Multiple view), program sudah dapat dijalankan.
Akan tetapi untuk menampilkan sebuah view, perlu dipanggil 3 perintah (untuk
menampilkan header, konten, dan footer). Hal ini akan merepotkan jika ternyata
file template dibagi menjadi banyak bagian, misalnya header akan dibagi
menjadi dua atau tiga bagian lagi, menjadi header, sidebar, navbar.
Untuk meringkas cara diatas, dapat dibuat library baru yang bertugas
menampilkan data. Libarary baru dibuat pada folder application/libraries.
Nama file library adalah template.php (sesuai nama class). Berikut ini adalah
isi dari template.php:
<?php
class Template{
protected $_ci;
function __construct(){
$this->_ci = &get_instance();
$this->_ci->load->library('parser');
$this->_ci->parser->set_delimiters('{{','}}');
}
function view($content, $data = NULL){

73
$this->_ci->parser->parse('new_header',$data);
$this->_ci->parser->parse($content, $data);
$this->_ci->parser->parse('new_footer',$data);
}
}
Berikut ini adalah isi dari controller (berita) jika menggunakan library template.
<?php
{
redirect('login');
}
$this->load->library('template');
}

{

$this->template->view('berita/view', $data);
}
Dengan menggunakan libarary template, perintah untuk menampilkan halaman

dapat dilakukan dengan cukup satu perintah.
74
6 Web Desain
75

Buku Ajar Pemrograman Web Lanjut

Diunggah oleh

Hak Cipta:

Format Tersedia

Buku Ajar Pemrograman Web Lanjut

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Buku Ajar Pemrograman Web Lanjut

Diunggah oleh

Hak Cipta:

Format Tersedia

FRAMEWORK

Sugeng Widodo, M.Kom

A.Kerangka kerja CodeIgniter

CodeIgniter menggunakan pendekatan Model-View-Controller, untuk

Bagian Model digunakan untuk mengelola data, seperti mengambil data,

B.Cara kerja Kerangka Kerja CodeIgniter

Gambar 1.1 Alur Kerja Framework CodeIgniter 1

C.Mencari informasi pada user guide

Semua hal tentang penggunaan CodeIgniter telah disediakan dalam

CodeIgniter telah memberikan sebuah contoh class Controller. Class tersebut

class Welcome extends CI_Controller {

Dapat dilihat pada contoh controller tersebut, bahwa:

1. Nama Controller (disamping tulisan class) sama dengan nama file

class berita extends CI_Controller {

B.Menampilkan tulisan menggunakan View

Hasil dari perintah tersebut adalah sebagai berikut :

Berdasarkan pengalaman, cara ini akan lebih memudahkan dalam

B.1 Menampilkan beberapa view

B.2 Mengirim data ke view

class berita extends CI_Controller {

public function index()

$data['message'] = 'My Message';

C.Menampilkan hasil di Browser

Atau untuk hasil yang sama, dapat juga dituliskan

class Berita_model extends CI_Model {

public function get_last_ten_entries()

Pada contoh model diatas dapat dilihat bahwa :

1. Nama Model (disamping tulisan class) sama dengan nama file

D.1 Konfigurasi Database

a. Menggunakan perintah $this->load->database() didalam setiap function

class Berita_model extends CI_Model {

c. Menggunakan fasilitas autoload. Mengatur konfigurasi autoload yang ada

D.3 Mengaktifkan Model (Load Model)

Pada function dalam controller,

class Berita extends CI_Controller {

public function index()

atau pada constructor.

class Berita extends CI_Controller {

public function __construct()

Atau pada file application/config/autoload.php, baris terakhir

D.4 Query builder Class

$this->db->get('mytable', 10, 20) : untuk mengambil data dari tabel

$this->db->get_where('mytable', array('id' => $id), $limit,

Perintah lainnya adalah sebagai berikut :

Perintah tersebut diatas dapat digabungkan sesuai dengan kebutuhan.

Ketiga perintah diatas akan menghasilkan perintah query sebagai berikut :

foreach ($result as $row)

 result_array() : Method ini akan memberikan nilai array dari array,

foreach ($query->result_array() as $row)

 row_array() : Method ini akan memberikan satu data (record) dalam

E. Menampilkan data dari database

class berita extends CI_Controller {

public function index()

public function get($id = FALSE){

public function get_last_ten_entries()

foreach ($berita as $row)

1.3 Helper dan Library

CodeIgnitier telah menyediakan banyak helper :

A.Load Helper atau Library

B.Menggunakan Library (Table)