Ferra Fernanda (43A87006150593) PDF

PEMROGRAMAN WEB II
MATERI PENDAHULUAN
Oleh :
Ferra Fernanda
43A87006150593
SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER
BANI SALEH
BEKASI
2018
KATA PENGANTAR
Segala puji dan syukur bagi Allah SWT yang telah memberikan
kemampuan, kekuatan, serta keberkahan baik waktu, tenaga, maupun pikiran kepada
penulis sehingga dapat menyelesaikan modul yang berjudul “PEMROGRAMAN
WEB II” tepat pada waktunya.
Dalam penyusunan makalah ini, penulis mengucapkan terima kasih yang
sebesar-besarnya kepada buku buku tentang komputer dan website tentang komputer
yang telah diberikan kemudahan kepada penulis dalam pengerjaan modul ini.
Penulis menyadari bahwa masih banyak kekurangan pada penulisan modul
ini. Maka dari itu, saran dan kritik yang membangun sangat penulis harapkan dari
pembaca sekalian. Penulis berharap semoga modul ini dapat bermanfaat bagi siapa saja
yang membacanya.
Bekasi, 07 Mei 2018
Penulis
i
DAFTAR ISI
Halaman
KATA PENGANTAR ............................................................................................. i
DAFTAR ISI ............................................................................................................ ii
PENDAHULUAN .................................................................................................... iii
1. Pengenalan.......................................................................................................... 1
- Pengenalan dan review background mahasiswa ......................................... 1
2. Pengenalan Dasar Array ..................................................................................... 2
3. Pengenalan Sintak Dasar Object Oriented Programming (OOP) ....................... 7
4. Demo Installasi CI .............................................................................................. 22
5. Pengenalan Arsitektur Codeigniter..................................................................... 24
6. Demo Tentang Konfigurasi CI ........................................................................... 26
7. Pengenalan Konfigurasi Database MySQL dengan CI ...................................... 28
8. Demo Tentang Penggunaan File, Image, Grafik, Pada CI ................................. 32
- File ............................................................................................................... 32
- Image ........................................................................................................... 46
- Grafik........................................................................................................... 52
9. Demo Tentang Penggunaan Script AJAX dan JQuery pada CI ......................... 58
10. Memberikan Demo Tentang Penggunaan Scrip AJAX dan JSON dalam CI .... 71
11. Penjelasan dan Konsep MVC ............................................................................. 81
12. Pengenalan Controller dari MVC ....................................................................... 84
13. Pengenalan View dari MVC............................................................................... 85
14. Pengenalan Model dari MVC ............................................................................. 88
15. MVC pada Framework ....................................................................................... 91
16. Penjelasan dan Praktikum Keamanan Data Pada CI .......................................... 94
17. Pengenalan Authentikasi & Autorisasi dari Login Hingga Hak Akses .............. 100
18. Pengenalan JQUERY EasyUI Pengenalan JQuery EasyUI ............................... 112
19. Membuat Report dan Excel pada Pemrograman Web ....................................... 131
DAFTAR PUSTAKA ............................................................................................. 140
ii
PENDAHULUAN
Teknologi semakin hari semakin berkembang. Salah satunya teknologi

informasi, banyak sekali bidang yang memanfaatkan teknologi Informasi. Tuntutan
kebutuhan akan informasi dan penggunaan komputer yang semakin banyak mendorong
terbentuknya sebuah jaringan komputer yang mampu melayani berbagai kebutuhan
tertentu.
Jaringan komputer kita kenal dengan nama internet. Internet bisa diakses
dan dimanfaatkan untuk berbagai keperluan, oleh siapa saja dan dimana saja, kapanpun
kita mau menggunakannya.Salah satunya adalah web, yang mampu menyediakan
informasi dalam bentuk teks, gambar, suara maupun gambar bergerak. Dengan
kemampuan sepeti ini, web menjadi sangat terkenal dan perkembangannya sangatlah
pesat.
Dengan terus berkembangnya roda perkembangan teknologi, web
berkembang menjadi alat bantu yang tidak hanya mampu menyediakan informasi,
namun juga mampu untuk mengolah informasi. Proses pengolahan informasi dengan
memanfaatkan teknologi web menyebabkan web menjadi media yang dinamis. Hal ini
membutuhkan sarana teknis yang yang menentukan. Sarana tersebut banyak bergantung
pada penggunaan perangkat lunak yang kuat, aman, terpercaya, dan cepat.
Pada kesempatan ini penulis akan membahas tentang bahasa pemrograman
HTML sebagai salah satu perangkat lunak yang turut menentukan dapat digunakannya
media web sebagai media pengolah informasi.
iii
1. Pengenalan
- Pengenalan dan review background mahasiswa
Ferra Fernanda, lahir di Bekasi pada

tanggal 01 Mei 1996. Anak kedua dari
dua bersaudara ini tinggal bersama kedua
orang tuanya di Jl. Kenangan 2 No.96
Kelurahan Jakasampurna Kecamatan
Bekasi Barat Kota Bekasi. Ia menempuh
pendidikan dimulai dari SD Negeri 3 Jakasampurna Bekasi Barat (lulus tahun
2008), melanjutkan ke SMP Negeri 4 Kota Bekasi (lulus tahun 2011),
kemudian melanjutkan ke SMK Negeri 1 Kota Bekasi dengan jurusan
Multimedia (lulus tahun 2014). Dan saat ini ia sedang melanjutkan
pendidikan di STMIK Bani Saleh Bekasi dengan program studi Teknik
Informatika.
Ia pernah melakukan praktek kerja di 3 perusahaan. Perusahaan pertama yang
ia jadikan tempat pelatihan adalah Kementrian Agama Kota Bekasi di bagian
pengurus jama’ah haji (Januari 2013), kemudian Intan Advertising atau yang
lebih sering dikenal dengan Intan Outdoor Promotion di bagian desain
Billboard (Maret 2013), dan terakhir ia melakukan praktek kerja di PT
Brilyan Trimatra Utama, sebuah perusahaan konsultan teknologi informasi
dengan keunggulan pada implementasi e-learning (Mei 2013). Selain
melanjutkan kuliah, saat ini ia juga aktif bekerja di perusahaan distributor
farmasi di daerah Bekasi Timur dengan posisi Admin fakturis sejak tahun
2015 sampai dengan saat ini.
1
2. Pengenalan Dasar Array
Array adalah jenis tipe data yang bisa dibilang unik, berbeda dengan tipe
data dasar lainnya seperti integer, string, dan lainnya. tipe data array dapat
menyimpan satu atau lebih data dalam variabel tunggal, sesuai dengan fungsinya,
tipe data array sangat berguna untuk menyimpan banyak data dalam satu variable.
Dalam bahasa pemrograman tipe data array manapun sebenarnya sama dalam segi
penggunaannya, yaitu dimana setiap elemen array memiliki masing-masing index
dapat berupa string atau integer, index array ini lah yang digunakan untuk
mengakses masing-masing nilai array yang berbeda.
Jenis-jenis tipe array di php

Ada beberapa jenis tipe array yang bisa digunakan, dalam definisinya semua jenis
sama saja adalah array, hanya cara penggunaannya saja yang berbeda, beberapa
jenis array yaitu: Numeric Array, Associative Array, dan Multidimensional
Array. Berikut ini masing-masing penjelasan singkat masing-masing jenis array:
1. Numeric Array
Numeric array merupakan jenis array dimana index elemen yang terdapat
didalamnya di definisikan dengan angka, biasanya index pertama dimulai
dengan angka “0” dan seterusnya.
2. Associative Array (array assosiatif)
Array associative berbeda dengan jenis array numeric, array jenis ini
mengdefinisikan index-nya menggunakan name atau nama untuk dapat
mengakses nilai dari elemen array tersebut.
3. Multidimensional Array
Array multidimensional adalah metode penyimpanan nilai data array lebih dari
satu array, ini artinya array didalam array, array multidimensi sangat berguna
untuk menyimpan nilai variabel dengan banyak data meskipun lebih sulit untuk
menggunakannya tetapi array jenis ini lebih efisien dalam pemakai karna
mampu menampung banyak data.
2
Contoh Penulisan Tipe Data Array Pada PHP
Selain teori diatas yang perlu kita ketahui adalah cara penulisan atau penggunaan
tipe data array yang akan ditunjukan melalui bahasa pemrograman web php, berikut
ini masing-masing contoh penulisannya.
Numeric Array
Seperti telah dikatakan diatas bahwa array numeric adalah array yang menggunaan
index dengan angka numeric untuk dapat mengakses nilainya, ada dua cara
penulisan array numeric ini.
Index Otomatis
Maksudnya index otomatis disini adalah penulisan array dengan tidak menetapkan
index atau kunci array, penulisan array dengan index otomatis ini dimulai dari nilai
index “0”.
<?php
1
2
$data = array('anggur', 'mangga', 'melon');
3
4
?>
5
atau:
<?php
1
2
$data[] = 'anggur';
3
$data[] = 'mangga';
4
$data[] = 'melon';
5
6
?>
7
Dari nilai array diatas untuk dapat melihat masing-masing index array dapat
menggunakan dua fungsi dasar PHP, yaitu menggunakan var_dump() atau print_r(),
disini penulis menggunakan print_r() untuk praktek tutorial ini, caranya adalah:
3
1 <?php
2
3 print_r($data);
4
5 ?>
Dari kode diatas maka akan menampilkan seperti gambar dibawah ini:
Index Manual
Maksud dari index manual adalah kebalik dari index otomatis, yaitu sebuah index
array yang nilainya ditentukan sendiri, contohnya:
1 <?php
2
3 $data[0] = 'anggur';
4 $data[1] = 'mangga';
5 $data[2] = 'melon';
6
7 ?>
4
Dalam index yang bisa ditentukan tersebut anda dapat bebas ingin memberi nilai
index sebagai kunci sesuai dengan keinginan anda, gunakan cara pertama untuk
dapat melihat tampilan array, yaitu dapat dengan menggunakan fungsi var_dump()
atau print_r().
Associative Array (array assosiatif)

Berbeda dengan array numeric, array associative ini indexnya ditentukan secara
manual, dapat berupa string atau angka dan hanya dengan menggunakan simbol
“=>” sebagai penunjuk nilai dari index. contohnya:
1 <?php
2
3 $data = array('buah1' => 'anggur', 'buah2' => 'mangga', 'buah3' => 'melon');
4
5 ?>
Mari kita lihat tampilan array associative ini dengan menggunakan print_r().
5
Multidimensional Array (array multidimensi)
Berbeda dengan contoh array-array sebelumnya, array multidimensi dapat
menampung lebih dari satu array didalam satu variabel, artinya array didalam array,
contohnya:
1 <?php
2
3 $data = array(
4 array('anggur', 'mangga', 'melon'),
5 array('jeruk', 'apel', 'jambu'),
6 array('nanas', 'pisang', 'pir')
7 );
8
9 ?>
Berikut ini adalah tampilan hasil dari array multidimensi.
Terlihat bahwa array multidimensional ini lebih kompleks penggunaannya, dimana

kita dapat menyimpan banyak data dalam satu variabel, namun lebih sulit manage
array jenis ini.
6
3. Pengenalan Sintak Dasar Object Oriented Programming (OOP)
OOP merupakan hal yang harus dipelajari untuk memahami Java lebih dalam.
Karena Java sendiri merupakan bahasa yang didesain untuk OOP.
Buktinya:
Saat kita membuat program pertama, kita diwajibkan menggunakan class.
class Hello {
public static void main(String[] args){
System.out.println("Hello World!");
}
}
OOP dikenal sebagai teknik pemrograman modern yang lebih efisien dan banyak
digunakan pada Framework.
OOP (Object Oriented Programming) atau dalam bahasa indonesia dikenal dengan
pemrograman berorientasikan objek (PBO) merupakan sebuah paradigma atau
teknik pemrograman yang berorientesikan Objek.
Pada OOP, Fungsi dan variabel dibungkus dalam sebuah objek atau class yang
dapat saling brinteraksi, sehingga membentuk sebuah program.
7
Variabel dalam objek akan menyimpan data dari objek. Sedangkan fungsi akan
menentukan operasinya.
Contoh objek dalam dunia nyata: Mobil, Burung, Drone, Meja, Pohon, dll.
------------------OBJEK
Drone
------------------Variabel/Atribut
energi = 100;
ketinggian = 200;
kecepatan = 29;
------------------Fungsi
terbang();
matikanMesin();
turun();
maju();
mundur();
belok();
------------------
Semua objek di dunia nyata yang memiliki sifat dan tingkah laku, bisa kita
representasikan dalam kode.
Kata kunci yang perlu diingat:
“Objek isinya data dan fungsi”
Class dan Object

Class adalah rancangan atau blue print dari sebuah objek. Sedangkan objek dalam
pemrograman adalah sebuah variabel yang merupakan instance dari Class. Instance
bisa diartikan sebagai wujud dari class. Class berisi definisi variabel dan fungsi
yang menggambarkan sebuah objek.
Dalam OOP:
- Variabel disebut atribut atau properti;
- Fungsi disebut method.
8
Contoh Class:
class NamaClass {
String atribut1;
String atribut2;
void namaMethod(){ ... }

void namaMethodLain(){ ... }
}
Lalu, Kita biasanya membuat objek (instance) seperti ini:
NamaClass namaObj = new NamaClass();
Kata kunci new berfungsi untuk membuat objek baru dari class tertentu.
Setelah membuat objek, kita bisa mengakses atribut dan method dari objek tersebut.
Contoh:
namaObj.namaMethod();
namaObj.atribut1;
Tanda titik (.) berfungsi untuk mengakses atribut dan method.
Contoh Program OOP

Silahkan buat project baru.
9
Isi nama project-nya dengan “BelajarOOP” dan jangan centang “Create Main
Class”.
10
Setelah itu, silahkan buat package baru. Klik kanan pada <default package>, lalu
pilih New->Java Package.
Isi nama package dengan “dasar”:
11
Setelah itu, di dalam package dasar, silahkan buat class baru bernamaPlayer.java.
Klik kanan pada package dasar lalu pilih New->Java Class. Setelah itu, isi
namanya dengan Player.java.
Silahkan tulis kode pada Player.java seperti ini:
package dasar;
public class Player {
// definisi atribut
String name;
int speed;
int healthPoin;
// definisi method run

void run(){
System.out.println(name +" is running...");
System.out.println("Speed: "+ speed);
}
// definisi method isDead untuk mengecek nilai kesehatan (healthPoin)

boolean isDead(){
if(healthPoin <= 0) return true;
return false;
}
Berikutnya, buat class baru lagi bernama Game.java dan isi kodenya seperti ini:
package dasar;
public class Game {
12
public static void main(String[] args){
// membuat objek player

Player petani = new Player();
// mengisi atribut player

petani.name = "Petani Kode";
petani.speed = 78;
petani.healthPoin = 100;
// menjalankan method
petani.run();
if(petani.isDead()){
System.out.println("Game Over!");
}
}
}
Coba eksekusi Game.java dengan klik kanan pada Game.java lalu pilih Run File.
Maka hasilnya:
13
Coba ganti nilai healthPoin menjadi 0.
petani.healthPoin = 0;
Setelah itu, coba eksekusi lagi:
Penjelasan :
Pertama-tama, kita membuat sebuah class dengan nama Player. Class ini
mendefinisikan objek Player dalam Game dengan atribut sebagai berikut:
• name adalah nama objek;
• speed adalah kecepatan;
• healthPoin adalah nilai kesehatan dari player, biasanya disingkat hp.
Lalu class Player memiliki method:
• run() untuk menggerakkan player;
14
• isDead() untuk mengecek kondisi kesehatan player. Method ini akan
mengembalikan nilai true apabila nilai hp lebih kecil atau sama dengan nol (0),
sebaliknya akan mengembalikan nilai false.
Berikutnya kita membuat objek baru dari class Player pada
class Game bernama petani.
// membuat objek player
Player petani = new Player();
Setelah itu mengisi atribut-atributny. Karena kalau tidak diisi akan

bernilai Null dan bisa menyebabkan NullPointerException.
Berikutnya kita coba modifikasi nilai hp menjadi nol.
Hasilnya, pesan Game Over! akan ditampilkan. Karena method isDead() akan
mengembalikan nilai true jika nilai hp kurang atau sama dengan nol.
15
Contoh Program OOP 2: Program Drone
Untuk praktek berikutnya, coba buat class Drone.
class Drone {
// atribut
int energi;
int ketinggian;
int kecepatan;
String merek;
// method
void terbang(){
energi--;
if(energi > 10){
// terbang berarti nilai ketinggian bertambah
ketinggian++;
System.out.println("Dorne terbang...");
} else {
System.out.println("Energi lemah: Drone nggak bisa terbang");
}
}
16
void matikanMesin(){
if(ketinggian > 0){
System.out.println("Mesin tidak bisa dimatikan karena sedang terbang");
} else {
System.out.println("Mesin dimatikan...");
}
}
void turun(){
// ketinggian berkurang, karena turun
ketinggian--;
energi--;
System.out.println("Drone turun");
}
void belok(){
energi--;
System.out.println("Drone belok");
// belok ke mana? perlu dicek :)
}
void maju(){
energi--;
System.out.println("Drone maju ke depan");
kecepatan++;
}
void maju(){
energi--;
System.out.println("Drone mundur");
kecepatan++;
17
}
}
Cara Menentukan Atribut dan Method dari Objek
Seperti yang sudah dijelaskan di awal. Objek memiliki data (atribut) dan operasi
(fungsi).
Kuncinya:
• Atribut itu seperti ciri-ciri dari objek.
• Method itu seperti tingkah laku atau operasi.
Contoh:
Misalkan kita ingin membuat class dari Senjata.
Apa ciri-ciri dari senjata atau data yang bisa dijadikan atribut?
• jumlah peluru
• jenis
• nama senjata
• berat
• warna
• dll
Lalu apa tingkah laku atau operasi (fungsi) yang bisa dilakukan?
• tembak()
• lempar()
• kurangiPeluru()
• reload()
• dll.
18
Maka class-nya bisa dibuat seperti ini:
class Senjata {
// atribut
String nama;
int jumlahPeluru;
// method
void tembak(){
//..
// setelah nembak, kurangi peluru
jumlahPeluru--;
}
void reload(){
//..
// kalau di-reload maka jumlah peluru diisi ulang
jumlahPeluru = 300;
}
}
19
Mengenal Class Diagram
Class Diagram adalah sebuah diagram yang menggambarkan hubungan

antar class. Class Diagram dapat kita buat dengan aplikasi perancangan (CASE),
seperti StarUML.
Sebuah class digambarkan dengan sebuah tabel 1 kolom dan 3 baris.

Baris pertama berisi nama class; Baris kedua berisi atribut; dan Baris ketiga berisi
method.
Selain itu, terdapat garis yang menggambarkan hubungan antar class.
20
Class Diagram biasanya digunakan oleh software engineer untuk merancang
software dengan paradigma OOP.
21
4. Demo Installasi CI
Beberapa hal yang harus disiapkan dalam praktek ini antara lain:
1. Program PHP sebagai bahasa pemrograman, karena Codeigniter ditulis
menggunakan bahasa pemrograman PHP.
2. Web Server, dalam hal ini saya menggunakan Apache sebagai web servernya.
3. Database, dalam hal ini MySQL
4. IDE (Editor), dalam hal menggunakan Dreamweaver.
5. Codeigniter, sebagai Framework yang dapat didownload.
6. Untuk program PHP-MySQL-Apache, sudah banyak package yang tinggal
install, artinya dengan satu kali install, dikomputer sudah terinstall tiga aplikasi
tersebut (PHP-MySQL-Apache). Misalnya WampServer, Xampp, dll
Langkah – langkah menginstall Framework Codeigniter :

1. Download program Codeigniter.
2. Unzip program Codeigniter (CI) dan simpan ke folder root server (ke folder
‘www’ kalau di wamp atau ‘htdocs’ atau ‘public_html’ tergantung package
PHP nya), kemudian rename (ubah) nama foldernya dari “CodeIgniter_2.1.3”
menjadi “codeigniter”, seperti pada gambar dibawah ini:
Menyimpan Root di Server

Dalam folder CI, terdiri dari 3 folder, “application”, “system” berisi library
atau kumpulan fungsi-fungsi dasar CI, dan “user_guide”.
3. Kalau sudah dicopy, akses “localhost/codeigniter”. Dan muncul seperti gambar
dibawah ini.
22
Tampilan Sukses Install CI
Pertama tentu akan membaca index.php di bawah folder codeigniter,
kemudian index.php tersebut akan membaca file yang ada di config, seperti
application/config/autoload.php yang akan me-load fungsi-fungsi sesuai
konfigurasi.
Selanjutnya akan membaca file application/coonfig/route.php yang akan
memetakan kemana file selanjutnya dibaca, pertama install controller yang
pertama kali dibaca adalah application/controller/welcome.php dan dari
controller tersebut akan di alihkan ke view di
application/views/wecome_message.php.
Konsep MVC pada Codeigniter, dalam hal ini M (model) belum ada,
sedangkan V (views) adalah “application/views/wecome_message.php” dan C
(controller) application/controller/welcome.php.
Konsep MVC
23
5. Pengenalan Arsitektur Codeigniter
Codeigniter adalah php framework yang awalnya ditulis oleh mas Rick Ellis,
pendiri dan CEO EllisLab.com, perusahaan yang mengembangkan codeigniter. Saat
ini, codeigniter dikembangkan oleh komunitas dan disebarkan ke seluruh dunia
dengan lisensi bebas
• Pada bagian Model berisi struktur data dari aplikasi. Biasanya pada class
Model ini berisi fungsi untuk retrieve, insert,edit ataupun menghapus data dari
database
• Pada bagian View berisi informasi yang akan ditampilkan ke user. Bisa juga
disebut layer presentasi
• Bagian Controller adalah sebagai penghubung antara Model dan View dan
juga sumber lain yang dibutuhkan ketika user request ke aplikasi
Kelebihan
• Mudah digunakan dan tidak memerlukan konfigurasi yang rumit
• Fungsi-fungsi pendukung yang cukup lengkap
• Mendkung PHP4 dan PHP5
• Mungkin merupakan Framework MVC paling populer dan paling banyak
digunakan
• Dokumentasi yang sangat bagus, friendly dan didukung oleh forum, wiki, dan
komunitas yang besar
Kekurangan
24
• Tidak mendukung AJAX, dan ORM
• Meyediakan dan memisahan file-file dalam MVC pattern, tapi masih
memberikan kebebasan user untuk melanggar aturan MVC
25
6. Demo Tentang Konfigurasi CI
Konfigurasi Dasar Pada Codeigniter

Berikut ini cara melakukan konfigurasi dasar pada codeigniter, hanya akan
melakukan perubahan pada file pada gambar dibawah ini:
autoload.php
 ubah file autoload.php terletak pada folder application/config/autoload.php .

pada bagian libraries tambahkan library ‘database’
$autoload['libraries'] = array('database');
 fungsi autoload yaitu untuk mengaktifkan library tanpa perlu memanggilnya

berulang.
Config.php
 Edit file config.php yang terletak pada folder application/config/config.php.

ada beberapa variabel yang akan kita ubah, diantaranya:
$config['base_url'] = '';
$config['index_page'] = '';
1. base_url isi dengan url project kita misal

http://localhost/contoh_tutorialpedia/
2. index_page bisa kita kosongkan saja atau isi dengan index.php
26
Routes.php
 ubah default controller routes.php terletak pada folder

application/config/routes.php. secara default controller akan terisi dengan nama
“welcome”.
$route['default_controller'] = "welcome";
1. ubah controller welcome sesuai dengan controller yang akan anda gunakan
nanti. Jangan dibiarkan kosong karena akan menyebabkan error.
Database.php
 pada file database.php ubah settingan berikut sesuai dengan milik anda
$db['default']['hostname'] = 'isi dengan host database';

$db['default']['username'] = 'username database';
$db['default']['password'] = 'password database';
$db['default']['database'] = 'nama database';
Jangan lupa untuk menyimpan kofigurasi pada setiap filenya.
27
7. Pengenalan Konfigurasi Database MySQL dengan CI
Sebelum megatur konfigurasi ada beberapa software yang kita butuhkan

diantaranya :
 Web server - dalam hal ini bisa menggunakan aplikasi xampp, yang
didalamnya sudah ada apache dan mysql
 Text Editor - aplikasi text editor ini banyak sekali, diantaranya : Sublime
Text, Notepad, Notepad ++, Adobe Dreamweaver, Atom, Dll. namun saya
akan menggunakan aplikasi Sublime Text.
Untuk mengatur konfigurasi codeigniter ke database mysql :

 Buka aplikasi text editor sublime text atau sejenisnya, klik menu File > Open
Folder > Pilih Direktori Folder Web ( contoh : c:/xampp/htdocs/ppdb/ )
> lalu klik Openmaka akan tampil direktori web codeigniter pada sebalah kiri
sublime text
 Buka file database.php terletak di application/config/database.php
 Cari kode berikut : hostname, username, password, database.
Script Koneksi di Codeigniter
$db['default'] = array(
'dsn' => '',
'hostname' => 'localhost',
'username' => '',
'password' => '',
28
'database' => '',
'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
);
Kita atur konfigurasi koneksi databasenya, menjadi :
'dsn' => '',
'username' => 'root',
'password' => '',
'database' => 'ppdb',
'dbprefix' => '',
'cachedir' => '',
29
'swap_pre' => '',
'encrypt' => FALSE,
);
Alhasil script yang kita rubah menjadi seperti ini
Script Koneksi pada Codeigniter
 Isi value hostname adalah "localhost", karena kita masih menjalankan web di
pc local saja. Isi value username adalah "root", root merupakan username dari
sql
Isi value password adalah (kosong), dikarenakan saya tidak menggunakan
password jadi tidak ada passwordnya isi value database adalah "ppdb", untuk
database sendiri bisa di sesuaikan. tergantung nama dari databasenya apa.
intinya dalam pengisian value ini disesuaikan dengan konfiguriasi instalasi
aplikasi pada komputer anda.
 Cek di web browser dengan memasukan url : http://localhost/ppdb/
jika tidak ada pesan error dan muncul welcome page codeigniter berati kita
telah berhasil mengoneksikan codeigniter ke database mysql
30
 Namun jikalau ada yang error seperti ini, maka dari konfigurasi database
codeigniter ada yang salah
31
8. Demo Tentang Penggunaan File, Image, Grafik, pada CI
Membuat upload file dengan codeigniter dan Ajax Jquery.

1) Persiapan
a. Framework Codeigniter (www.codeigniter.com)
Codeigniter merupakan framework php utama yang akan kita gunakan
pada tutorial kali ini. Jika anda belum memilikinya, silahkan download
di situs resminya: www.codeigniter.com
b. Bootstrap (www.getbootstrap.com)
Bootstrap merupakan framework untuk mempercantik user interface
(UI). Jika Anda belum memilikinya, silahkan download terlebih dahulu
di situs resminya: www.getbootstrap.com
c. Jquery (www.jquery.com)
Jquery merupakan framework javascript yang berfungsi untuk
membantu mempermudah dalam penulisan script berbasis AJAX.
Jika Anda belum memilikinya silahkan download di situs
resminya:www.jquery.com
2) Pembuatan struktur database
menggunakan mysql sebagai Database Management System (DBMS).
Buat sebuah database, disini saya membuat sebuah database dengan nama
db_upload. Jika Anda membuat database dengan nama yang sama itu lebih
baik. Silahkan eksekusi query berikut untuk membuat database:
CREATE DATABASE db_upload;
32
Query diatas akan menghasilkan sebuah database dengan namadb_upload.
Selanjutnya, Buat table dengan nama tbl_galeri dengan struktur seperti
gambar berikut:
Untuk membuat struktur table seperti gambar diatas,

Silahkan eksekusi query berikut:
CREATE TABLE tbl_galeri(
id INT(11) PRIMARY KEY AUTO_INCREMENT,
judul VARCHAR(50),
gambar VARCHAR(40)
)ENGINE=INNODB;
3) Installasi Codeigniter
Extract codeigniter yang sudah di download sebelumnya ke folder
www(jika menggunakan Wampserver) atau htdocs (jika
menggunakanXAMPP).
Karena saya menggunakan wampserver, jadi saya mengextract-nya di
c:/wamp/www/
Kemudian rename (ganti nama) project codeigniter Anda sesuai dengan
project Anda. Disini saya memberi nama ci_upload.
Seperti gambar berikut:
33
Buka folder ci_upload dan buat folder assets sejajar dengan folder
application dan system, kemudian sertakan file bootstrap dan jquerydidalam
folder assets.
Kemudian, Buat sebuah folder lagi didalam folder assets, dan beri nama
images. Folder images ini berfungsi untuk menampung file image yang di
upload nantinya. Sehingga terlihat struktur project kita seperti berikut:
Pada gambar diatas dapat dilihat, bahwa didalam folder assets terdapat
folder css, images, dan js.
Didalam folder css, terdapat file bootstrap.css
Didalam folder js, terdapat file bootstrap.js dan file jquery-3.2.1.js
4) Konfigurasi Codeigniter
Langkah selanjutnya adalah konfigurasi pada codeigniter.
Berikut beberapa file yang perlu Anda konfigurasi:
a. Autoload.php
Untuk melakukan konfigurasi pada file autoload.php, silahkan buka
folder:
ci_upload/application/config/autoload.php
seperti berikut gambar berikut:
34
Buka file autoload.php dengan text editor
Kemudian temukan kode berikut:
$autoload['libraries'] = array();
$autoload['helper'] = array();
Atur menjadi seperti berikut:
$autoload['helper'] = array('url');
b. Config.php
Untuk melakukan konfigurasi pada file config.php, silahkan buka
folder:
ci_upload/application/config/config.php
Buka file config.php dengan text editor, kemudian temukan kode

berikut:
$config['base_url'] = '';
35
$config['base_url'] = 'http://localhost/ci_upload/';
c. Database.php
Untuk melakukan konfigurasi pada file database.php, silahkan buka
folder:
ci_upload/application/config/database.php
Buka file database.php dengan text editor, kemudian temukan kode

berikut:
$active_group = 'default';
$query_builder = TRUE;
'dsn' => '',
'username' => '',
'password' => '',
'database' => '', //sesuaikan dengan database anda!
'dbprefix' => '',
36
'cachedir' => '',
'swap_pre' => '',
'encrypt' => FALSE,
);
'dsn' => '',
'password' => '',
'database' => 'db_upload', //sesuaikan dengan database anda!
'dbprefix' => '',
'cachedir' => '',
'swap_pre' => '',
'encrypt' => FALSE,
37
);
d. Membuat Controller
Controller bertugas sebagai jembatan antara model dan view.
Controller akan merespon HTTP request yang datang dari user (melalui
browser), dari request ini Controller akan menetukan apa yang harus
dilakukan. Mungkin terdengar sedikit rumit, tapi sebenarnya tidak.
Anda akan segera mengerti setalah mempraktekkan tutorial ini secara
keseluruhan. Controller ini, akan menghandle proses upload file ke
server dan mengirimkan value (nilai) yang dikirim ke model untuk di
simpan ke database.
Buat sebuah Controller dengan nama Upload.php
Dengan kode sebagai berikut:
<?php
class Upload extends CI_Controller{
function __construct(){
parent::__construct();
$this->load->model('m_upload');
function index(){
$this->load->view('v_upload');
}
function do_upload(){
$config['upload_path']="./assets/images";
38
$config['allowed_types']='gif|jpg|png';
$config['encrypt_name'] = TRUE;
$this->load->library('upload',$config);
if($this->upload->do_upload("file")){
$data = array('upload_data' => $this->upload->data());
$judul= $this->input->post('judul');
$image= $data['upload_data']['file_name'];
$result= $this->m_upload->simpan_upload($judul,$image);
echo json_decode($result);
}
}
}
Penjelasan Kode:
Pada controller Upload.php, terdapat 3 function.

Yaitu: function __construct(), function index(), dan function
do_upload().
1) Function __construct()
}
Function __construct(), berfungsi sebagai konstruktor.
Dimana setiap pemanggilan model, library, helper, atau apapun
yang dipanggil melalui function __construct(), maka akan siap
digunakan untuk setiap function di dalam suatu kelas.
Pada kasus diatas, Anda dapat melihat ada pemanggilan
modelm_upload pada function __construct().
39
Artinya, model m_upload siap digunakan untuk setiap function
dalam kelas Upload.
2) Function index()
function index(){
}
Function index, merupakan function yang di panggilan otomatis
saat disuatu file atau kelas di panggil.
Pada kasus ini, function index memanggil sebuah view dengan
namav_upload.
3) Function do_upload()
function do_upload(){
$config['upload_path']="./assets/images"; //path folder file
upload
$config['allowed_types']='gif|jpg|png'; //type file yang boleh di
upload
$config['encrypt_name'] = TRUE; //enkripsi file name upload
$this->load->library('upload',$config); //call library upload

if($this->upload->do_upload("file")){ //upload file
$data = array('upload_data' => $this->upload->data());
//ambil file name yang diupload
$judul= $this->input->post('judul'); //get judul image

$image= $data['upload_data']['file_name']; //set file name
ke variable image
$result= $this->m_upload-
>simpan_upload($judul,$image); //kirim value ke model
m_upload
echo json_decode($result);
}
40
}
Function do_upload ini merupakan function yang berfungsi untuk
menghandle proses upload file ke server, serta mengirimkan file
name ke model untuk proses penyimpanan data.
e. Membuat Model
Buat sebuah model dengan nama M_upload.php
Kemudian ketikkan kode berikut:
<?php
class M_upload extends CI_Model{
function simpan_upload($judul,$image){
$data = array(
'judul' => $judul,
'gambar' => $image
);
$result= $this->db->insert('tbl_galeri',$data);
return $result;
}
}
Pada model M_upload terdapat satu function. Yaitu
functionsimpan_upload.
Function ini berfungsi untuk menyimpan value yang dikirim dari
controller untuk disimpan ke database.
f. Membuat View
Buat sebuah view dengan nama v_upload.php
Kemudian ketikkan kode berikut:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>Upload dengan Codeigniter dan Ajax</title>
41
<link rel="stylesheet" type="text/css" href="<?php echo
base_url().'assets/css/bootstrap.css'?>">
</head>
<body>
<div class="container">
<div class="col-sm-4 col-md-offset-4">
<h4>Upload dengan Codeigniter dan Ajax</h4>
<form class="form-horizontal" id="submit">
<div class="form-group">
<input type="text" name="judul" class="form-
control" placeholder="Judul">
</div>
<input type="file" name="file">
</div>
<button class="btn btn-success" id="btn_upload"
type="submit">Upload</button>
</div>
</form>
</div>
</div>
<script type="text/javascript" src="<?php echo
base_url().'assets/js/jquery-3.2.1.js'?>"></script>
base_url().'assets/js/bootstrap.js'?>"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#submit').submit(function(e){
e.preventDefault();
42
$.ajax({
url:'<?php echo
base_url();?>index.php/upload/do_upload',
type:"post",
data:new FormData(this),
processData:false,
contentType:false,
cache:false,
async:false,
success: function(data){
alert("Upload Image Berhasil.");
}
});
});
});
</script>
</body>
</html>
View v_upload ini berfungsi untuk menampilkan sebuah form
untuk upload file. View ini juga berfungsi untuk melakukan
submit form file upload menggunakan AJAX. Jika diperhatikan
pada bagian script, terdapat fungsi Ajax. Seperti berikut:
$('#submit').submit(function(e){
e.preventDefault();
$.ajax({
url:'<?php echo
base_url();?>index.php/upload/do_upload', //URL submit
type:"post", //method Submit
data:new FormData(this), //penggunaan FormData
processData:false,
contentType:false,
cache:false,
43
async:false,
success: function(data){
alert("Upload Image Berhasil."); //alert jika
upload berhasil
}
});
});
Testing Program:
Buka bowser Anda, dan kunjungi url berikut:
http://localhost/ci_upload/index.php/upload
maka akan tampil form seperti gambar berikut:
Kemudian input judul, dan telusuri (browse) file image yang akan
di upload. Lalu, klik tombol upload. Jika berhasil maka akan
terlihat alert seperti gambar berikut:
Untuk meng-cek hasil file image yang di upload, silahkan buka

folderimages.
Seperti gambar berikut:
44
45
Image
Upload image dengan dropify menggunakan codeigniter
upload image dengan dropify style menggunakan codeigniter. Dropify
merupakan framework yang berisi file css dan javascript untuk memberikan
style pada input type file sekaligus mengizinkan user memilih image yang ingin
di upload dengan klik drag and drop. Sehingga interface yang dihasilkan lebih
user friendly.
Dropify membutuhkan jquery agar bisa digunakan. Oleh sebab itu juga
membutuhkan jquery. Selain jquery juga membutuhkan bootstrap memang tidak
wajib hanya untuk mempercantik tampilan form.
Pertama-tama download Dropify, Jquery, Bootstrap, dan Codeigniter.
Setelah mendownload file yang diperlukan, sekarang masuk ke coding.
1. Buat database dan tabel dengan mengeksekusi query berikut:

CREATE DATABASE db_upload;
USE db_upload;
CREATE TABLE tbl_galeri(
id INT PRIMARY KEY AUTO_INCREMENT,
judul VARCHAR(50),
gambar VARCHAR(40)
)ENGINE=INNODB;
2. Install codeigniter
Extract codeigniter ke www (jika menggunakan wampserver) atauhtdocs
(jika menggunakan XAMPP). Kemudian rename project codeigniter sesuai
dengan project. Disini penulis memberi nama ci_upload.
Setelah installasi, buat folder assets di dalam ci_upload. Lalu copykan file
dropify, bootstrap, dan jquery kedalam folder assets. Sehingga terlihat
struktur project kita seperti berikut:
aplication
assets
css
bootstrap.css
dropify
46
dropify.min.css
dropify.min.js
fonts
images
js
bootstrap.js
jquery.js
system
3. Konfigusai beberapa file berikut:

Buka application/config/autoload.php atur menjadi seperti berikut:
Buka application/config/config.php dan atur menjadi seperti berikut:
$config['base_url'] = 'http://localhost/ci_upload/';
Terakhir buka application/config/database.php
'dsn' => '',
'password' => '',
'database' => 'db_upload',
'dbprefix' => '',
'cachedir' => '',
47
'swap_pre' => '',
'encrypt' => FALSE,
);
4. Buat controller dengan nama Upload.php dengan coding sebagai berikut:
<?php
class Upload extends CI_Controller{
$this->load->library('upload');
}
function index(){
}
function upload_image(){
$config['upload_path'] = './assets/images/'; //path folder
$config['allowed_types'] = 'gif|jpg|png|jpeg|bmp'; //type yang dapat
diakses bisa anda sesuaikan
$config['encrypt_name'] = TRUE; //nama yang terupload nantinya
$this->upload->initialize($config);
if(!empty($_FILES['filefoto']['name']))
{
if ($this->upload->do_upload('filefoto'))
{
$gbr = $this->upload->data();
48
$gambar=$gbr['file_name']; //Mengambil file name dari gambar
yang diupload
$judul=strip_tags($this->input->post('judul'));
$this->m_upload->simpan_upload($judul,$gambar);
echo "Upload Berhasil";
}else{
echo "Gambar Gagal Upload. Gambar harus bertipe
gif|jpg|png|jpeg|bmp";
}
}else{
echo "Gagal, gambar belum di pilih";
}
}
}
5. Buat model dengan nama M_upload.php dengan coding sebagai berikut:
<?php
class M_upload extends CI_Model{
function simpan_upload($judul,$gambar){
$hasil=$this->db->query("INSERT INTO tbl_galeri(judul,gambar)
VALUES ('$judul','$gambar')");
return $hasil;
}
}
6. Buat View dengan nama v_upload.php dengan coding sebagai berikut:
<!DOCTYPE html>
<html lang="id">
<head>
<title>Upload dengan Dropify</title>
49
base_url().'assets/dropify/dropify.min.css'?>">
base_url().'assets/css/bootstrap.css'?>">
</head>
<body>
<div class="container">
<div class="col-sm-4 col-md-offset-4">
<h4>Upload Image dengan Dropify Master</h4>
<form class="form-horizontal" action="<?php echo
base_url().'index.php/upload/upload_image'?>" method="post"
enctype="multipart/form-data">
<input type="text" name="judul" class="form-control"
placeholder="Judul">
</div>
<input type="file" name="filefoto" class="dropify" data-
height="300">
</div>
<button class="btn btn-success"
type="submit">Simpan</button>
</div>
</form>
</div>
</div>
base_url().'assets/js/jquery.js'?>"></script>
base_url().'assets/js/bootstrap.js'?>"></script>
50
base_url().'assets/dropify/dropify.min.js'?>"></script>
$(document).ready(function(){
$('.dropify').dropify({
messages: {
default: 'Drag atau drop untuk memilih gambar',
replace: 'Ganti',
remove: 'Hapus',
error: 'error'
}
});
});
</script>
</body>
</html>
51
Grafik
Membuat grafik atau chart menggunakan codeigniter. Grafik atau chart
merupakan penyajian informasi dengan cara yang sangat menarik dan mudah
dipahami dari pada melihat report (laporan) yang memiliki teks yang kompleks
dan terkadang membosankan.
Chart atau grafik juga membantu mempermudah dalam memantau
progress suatu bisnis. Seperti peningkatan penjualan, trafik pengunjung suatu
website, dan lain sebagainya.
Untuk membuat chart atau grafik menggunakan codeigniter, kita
memerlukan semacam library atau plugin. Disini penulis menggunakanchart.js.
Chart.js merupakan library javascript yang sangat banyak digunakan oleh
developer web dalam mebuat grafik atau chart. Chart.js sangat mudah digunakan
dan mudah di cutomize. Sebelum masuk ke proses pembuatan ada beberapa hal
yang harus dipersiapkan yaitu codeigniter dan chart.js.
1. Buat database dan tabel dengan mengeksekusi query berikut:
CREATE DATABASE db_chart;
USE db_chart;
CREATE TABLE barang(

barang_id INT PRIMARY KEY AUTO_INCREMENT,
nama_barang VARCHAR(100),
merk VARCHAR(30),
stok INT
)ENGINE=INNODB;
2. Insert beberapa data dengan mengeksekusi query berikut:

INSERT INTO barang(nama_barang,merk,stok) VALUES
('Aqua 1','Aqua',20),
('Aqua 2','Aqua',10),
('Aqua 3','Aqua',30),
('Aqua 4','Aqua',40),
('Aqua 5','Aqua',5),
52
('Wardah 1','Wardah',10),
('Inez 1','Inez',10),
('Inez 2','Inez',30),
('VIva 1','Viva',30),
('Coca-Cola 1','Coca-cola',10),
('Coca-Cola 2','Coca-cola',10),
('Coca-Cola 3','Coca-cola',30);
3. Instalasi codeigniter
Extract codeigniter ke folder webserver anda. Extract ke folder www jika
anda menggunakan wampserver, extract ke folder htdocs jika anda
menggunakan xampp.
Setelah di-extract, rename (ganti nama) menjadi ci_chart. Kemudian
lakukan konfigurasi berikut:
Buka application/config/autoload.php atur menjadi seperti berikut:
Buka application/config/config.php dan atur menjadi seperti berikut:
$config['base_url'] = 'http://localhost/ci_chart/';
Terakhir buka application/config/database.php
'dsn' => '',
'password' => '',
'database' => 'db_chart',
53
'dbprefix' => '',
'cachedir' => '',
'swap_pre' => '',
'encrypt' => FALSE,
);
4. Buat folder dengan nama assets sejajar dengan folder applicationdan system.
Kemudian extract file chartjs master kedalam folder assets.Sehingga terlihat
struktur folder kita seperti berikut:
application
assets
Chartjs
Chart.min.js
system
5. Buat model dengan nama M_grafik.php dengan kode sebagai berikut:

<?php
class M_grafik extends CI_Model{
function get_data_stok(){
$query = $this->db->query("SELECT merk,SUM(stok) AS stok
FROM barang GROUP BY merk");
54
if($query->num_rows() > 0){
foreach($query->result() as $data){
$hasil[] = $data;
}
return $hasil;
}
}
}
6. Buat controller dengan nama Grafik.php dengan kode sebagai berikut:
<?php
class Grafik extends CI_Controller{
$this->load->model('m_grafik');
}
function index(){
$x['data']=$this->m_grafik->get_data_stok();
$this->load->view('v_grafik',$x);
}
}
7. Buat view dengan nama v_grafik.php dengan kode sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<title>Grafik Stok Barang</title>
<?php
foreach($data as $data){
$merk[] = $data->merk;
$stok[] = (float) $data->stok;
}
?>
55
</head>
<body>
<canvas id="canvas" width="1000" height="280"></canvas>


base_url().'assets/chartjs/chart.min.js'?>"></script>
<script>
var lineChartData = {
labels : <?php echo json_encode($merk);?>,
datasets : [
{
fillColor: "rgba(60,141,188,0.9)",
strokeColor: "rgba(60,141,188,0.8)",
pointColor: "#3b8bba",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(152,235,239,1)",
data : <?php echo json_encode($stok);?>
}
var myLine = new

Chart(document.getElementById("canvas").getContext("2d")).Line(lineCha
rtData);
56
</script>
</body>
</html>
8. Kunjungi URL berikut untuk mengecek aplikasi nya berjalan dengan baik.
http://localhost/ci_chart/index.php/grafik
57
9. Demo Tentang Penggunaan Script AJAX dan JQuery pada CI
AJAX adalah sebuah teknik pemrograman yang memungkinkan kita
melakukan pertukaran data dengan server di belakang layar, sehingga halaman web
tidak harus dipanggil ulang hanya untuk mengganti sebagian kecil dari isi halaman.
pada view :
<?=form_input('id_kategori','','id = "id_kategori"');?>
<script>
$.ajax({
type: "POST",
dataType: "json",
url : "<?=base_url().$this->base_form_url?>/get_id_kategori",
data: "&id_kategori="+$('#id_kategori').val(),
success : function(obj) {
if(obj) {
alert('ID Ditemukan');
}
else {
alert('Tidak Ada Data');
}
},
error : function(obj) {
$.loader('close');
alert('Gagal mengambil data!');
}
});
</script>
pada Controller :
tambahkan fungsi dibawah ini :
<?php
function get_id_kategori(){
$id = $this->input->post('id_kategori');
$data = $this->mdb->get_id_kategori($id);
58
$return = array_merge($data);
ech0 json_encode($return);
exit;
}
?>
pada model :
adapun pada model tambahkan kode di bawah ini :
<?php
function get_id_kategori($id){
$sql = "select * from makanan where id_kategori = ?";
$hasil = $this->db->query($sql, $id);
return $hasil->result();
}
?>
JQuery
Jquery AJax File Upload Codeigniter
Pertama, pastikan memiliki Codeigniter, jquery, dan script AjaxFileUpload yang

dapat di copy.
Buat sebuah database dan sebuah tabel dengan nama files.
CREATE TABLE `files` (
ìd` int NOT NULL AUTO_INCREMENT PRIMARY KEY,
`filename` varchar(255) NOT NULL,
`title` varchar(100) NOT NULL
);
1) Buat form upload
59
Pertama, kita perlu membuat form upload sebagai interface untuk upload file,
copy kode berikut dan simpan dengan nama upload.php
<!doctype html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></scrip
t>
<script src="<?php echo base_url()?>js/site.js"></script>
<script src="<?php echo base_url()?>js/ajaxfileupload.js"></script>
<link href="<?php echo base_url()?>css/style.css" rel="stylesheet" />
</head>
<body>
<h1>Upload File</h1>
<form method="post" action="" id="upload_file">
<label for="title">Title</label>
<input type="text" name="title" id="title" value="" />
<label for="userfile">File</label>
<input type="file" name="userfile" id="userfile" size="20" />
<input type="submit" name="submit" id="submit" />

</form>
<h2>Files</h2>
<div id="files"></div>
60
</body>
</html>
2) Buat controller
Buat sebuah controller sebagai jembatan antara file view dan model, copy
kode berikut, simpan dengan nama upload.php
class Upload extends CI_Controller
{
public function __construct()
{
$this->load->model('files_model');
$this->load->database();
$this->load->helper('url');
}
public function index()

{
$this->load->view('upload');
}
}
3) Buat Custom Javascript

Untuk menangani submit form pada view, kita buat sebuah file javascript
yang nantinya akan digunakan untuk memproses inputan dari pengguna.
Copy kode berikut dan simpan dengan nama site.js
$(function() {
$('#upload_file').submit(function(e) {
e.preventDefault();
$.ajaxFileUpload({
url :'./upload/upload_file/',
secureuri :false,
61
fileElementId :'userfile',
dataType : 'json',
data :{
'title' : $('#title').val()
},
success : function (data, status)
{
if(data.status != 'error')
{
$('#files').html('<p>Reloading files...</p>');
refresh_files();
$('#title').val('');
}
alert(data.msg);
}
});
return false;
});
});
Pada bagian ini kita membuat form handler dengan javascript pada sisi client
server, dan mengirimkan konten data via ajax. Jika tidak terjadi error, kita
refresh file list, clear title dan kita tampilkan alert respon.
4) Membuat fungsi untuk upload file

Controller
Untuk upload file, url yang akan digunakan adalah /upload/upload_file/, jadi
kita harus membuat method baru di controller upload, copy code berikut dan
tempatkan pada controller upload yang telah kita buat sebelumnya.
public function upload_file()
{
$status = "";
$msg = "";
62
$file_element_name = 'userfile';
if (empty($_POST['title']))
{
$status = "error";
$msg = "Please enter a title";
}
if ($status != "error")
{
$config['upload_path'] = './files/';
$config['allowed_types'] = 'gif|jpg|png|doc|txt';
$config['max_size'] = 1024 * 8;
$config['encrypt_name'] = TRUE;
$this->load->library('upload', $config);
if (!$this->upload->do_upload($file_element_name))
{
$status = 'error';
$msg = $this->upload->display_errors('', '');
}
else
{
$data = $this->upload->data();
$file_id = $this->files_model->insert_file($data['file_name'],
$_POST['title']);
if($file_id)
{
$status = "success";
$msg = "File successfully uploaded";
}
63
else
{
unlink($data['full_path']);
$status = "error";
$msg = "Something went wrong when saving the file, please try
again.";
}
}
@unlink($_FILES[$file_element_name]);
}
echo json_encode(array('status' => $status, 'msg' => $msg));
}
Kita buat pengecekan sederhana untuk memastikan apakah inputan title berisi
sebuah value atau tidak. Jika value title tidak kosong kita load librari upload
bawaan codeigniter.
Selanjutnya. kita coba upload file. Jika berhasil, kita simpan judul dan nama
file ke dalam databse.
Model
Sesuai dengan konsep MVC, kita buat sebuah model untuk menangani
fungsi-fungsi yang terkait dengan database. Copy kode berikut dan simpan
dengan nama files_model.php
class Files_Model extends CI_Model {
public function insert_file($filename, $title)

{
$data = array(
'filename' => $filename,
'title' => $title
);
$this->db->insert('files', $data);
return $this->db->insert_id();
64
}
}
Folder Upload
Selanjutnya kita buat folder untuk menampung file-file yang akan di upload
pada folder web root kita dengan nama files, pastikan folder tersebut dapat
diakses(writable) oleh server.
Tahap 5 Buat Daftar file upload
Buka file site.js yang telah kita buat sebelumnya, kemuadian masukkan kode
berikut:
function refresh_files()
{
$.get('./upload/files/')
.success(function (data){
$('#files').html(data);
});
}
fungsi ini akan memasukan data kedalam varibale file yang terdapat pada
view untuk menampilkan daftar file yang diupload, kita harus memanggil
fungsi ini pada awal ketika load halaman untuk menampilkan daftar file
upload. Untuk itu kita harus menempatkan fungsi ini pada
document.ready.function di bagian atas file.
refresh_files();
Controller
65
Untuk menampilkan daftar file upload, url yang akan digunakan adalah
/upload/files/, jadi kita harus membuat method baru di controller upload, copy
code berikut dan tempatkan pada controller upload yang telah kita buat
sebelumnya.
public function files()
{
$files = $this->files_model->get_files();
$this->load->view('files', array('files' => $files));
}
Model
Untuk retrieve data file upload dari database, kita buat fungsi get_files,
masukkan kode berikut ke dalam files_model.php yang telah kita buat
sebelumnya.
public function get_files()
{
return $this->db->select()
->from('files')
->get()
->result();
}
View
Kita perlu membuat view untuk menampilkan daftar file upload, buat file
baru dengan nama files.php, dan paste kode berikut:
<?php
if (isset($files) && count($files))
{
?>
<ul>
<?php
foreach ($files as $file)
{
?>
66
<li class="image_wrap">
<a href="#" class="delete_file_link" data-file_id="<?php echo
$file->id?>">Delete</a>
<strong><?php echo $file->title?></strong>
<br />
<?php echo $file->filename?>
</li>
<?php
}
?>
</ul>
</form>
<?php
}
else
{
?>
<p>No Files Uploaded</p>
<?php
}
?>
Melalui view ini kita akan menampilkan judul dan nama file masing-masing.
Kita juga menambahkan link untuk menghapus file, yang masing-masing
memiliki atribut ID dari file yang tersimpan dalam database.
Delete File
Untuk dapat menghapus file yang telh kita upload, kita buat fungsi baru untuk
menangani hal tersebut.
67
Javascript
Copy dan masukkan kode berikut pada document.ready.function:
$('.delete_file_link').live('click', function(e) {
e.preventDefault();
if (confirm('Are you sure you want to delete this file?'))
{
var link = $(this);
$.ajax({
url : './upload/delete_file/' + link.data('file_id'),
dataType : 'json',
success : function (data)
{
files = $(#files);
if (data.status === "success")
{
link.parents('li').fadeOut('fast', function() {
$(this).remove();
if (files.find('li').length == 0)
{
files.html('<p>No Files Uploaded</p>');
}
});
}
else
{
alert(data.msg);
}
}
});
}
});
68
Ketika link delete di click, kita tampilkan dialog konfirmasi penghapusan. Jika
konfirmasi ok maka kita panggil fungsi /upload/delete_file.
Controller
Seperti penjelasan diatas, url yang akan kita akses untuk menghapus file adalah
/upload/delete_file, jadi kita buat fungsi delete_file, masukkan kode berikut pada
controller upload.
public function delete_file($file_id)

{
if ($this->files_model->delete_file($file_id))
{
$status = 'success';
$msg = 'File successfully deleted';
}
else
{
$status = 'error';
$msg = 'Something went wrong when deleteing the file, please try again';
}
echo json_encode(array('status' => $status, 'msg' => $msg));
}
Model
Buka files_model.php dan masukkan kode berikut:
public function delete_file($file_id)
{
$file = $this->get_file($file_id);
if (!$this->db->where('id', $file_id)->delete('files'))
{
return FALSE;
}
unlink('./files/' . $file->filename);
69
return TRUE;
}
public function get_file($file_id)

{
return $this->db->select()
->from('files')
->where('id', $file_id)
->get()
->row();
}
Karena kita hanya mengirimkan ID, kita perlu untuk mendapatkan nama file, jadi
kita membuat metode baru untuk memuat file. Setelah dimuat, kita menghapus
record dan menghapus file dari server.
70
10. Memberikan Demo Tentang Penggunaan Script AJAX dan JSON
dalam CI
[CodeIgniter] Penggunaan Ajax Login pada CodeIgniter dan EasyUI
Kali ini akan sedikit memberikan contoh penggunaan atau pemakaian ajax
untuk proses login pada EasyUI dan CodeIgniter. Tentunya karena ini
menggunakan teknologi Ajax, sehingga untuk proses login dan logout tidak perlu
pindah halaman dan tidak berat pula. Sebab semua komunikasi data yang dikirim
dan diterima dalam bentuk JSON.
Sebelum memulai ke pembuatan kode, silahkan buat database dan table user
terlebih dahulu. Disini menggunakan database test dan membuat table dengan
struktur berikut:
CREATE TABLE IF NOT EXISTS `tbl_user` (

ìd` int(3) NOT NULL AUTO_INCREMENT,
`nama` varchar(100) NOT NULL,
ùsername` varchar(50) NOT NULL,
`password` varchar(32) NOT NULL,
PRIMARY KEY (ìd`),
UNIQUE KEY ùsername` (ùsername`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
INSERT INTO `tbl_user` (ìd`, `nama`, ùsername`, `password`) VALUES
(1, 'Dida Nurwanda', 'admin', '21232f297a57a5a743894a0e4a801fc3');
Jika pembuatan database sudah, selanjutnya siapkan project codeigniter baru dan
siapkan juga jquery dan jquery easyui. Jangan lupa atur konfigurasi databasenya.
Kemudian buka folder libraries dan buat library baru dengan nama Auth.php
<?php
class Auth {
public $core;
public function __construct() {
71
$this->core =& get_instance();
$this->core->load->library('session');
}
public function authenticate(CI_DB_result $query) {
$data = $query->row();
$this->core->session->set_userdata(array(
'id' => $data->id,
'logged_in' => TRUE
));
}
public function is_guest() {
if($this->core->session->userdata('logged_in') == TRUE) {
return FALSE;
}
return TRUE;
}
public function get_id() {
return $this->core->session->userdata('id');
}
public function logout() {
$this->core->session->sess_destroy();
}
}
Setelah itu buka controller dan edit file Welcome.php
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Welcome extends CI_Controller {
public function __construct() {
$this->load->helper('url');
$this->load->library('Auth');
72
$this->load->database();
}
public function index()
{
$this->load->view('index');
}
public function main()
{
$this->load->view('main');
}
public function login()
{
$this->load->view('login');
}
public function logout()
{
$this->auth->logout();
}
public function proses_login()
{
$this->output->set_content_type('application/json');
if (isset($_POST))
{
$this->db->where('username', $this->input->post('username'));
$this->db->where('password', md5($this->input->post('password')));
$db = $this->db->get('tbl_user');
if($db->num_rows() > 0) {
$this->auth->authenticate($db);
echo json_encode(array(
'success'=>true,
'auth_id'=>$this->auth->get_id()
));
73
} else {
echo json_encode(array('success'=>false));
}
}
}
}
Jika sudah, kita mulai pembuatan view. Buat file pada folder view dengan nama
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>EasyUI Ajax Login</title>
<link rel="stylesheet" href="<?php echo base_url('assets/themes/default/easyui.css');
?>" />
<link rel="stylesheet" href="<?php echo base_url('assets/themes/icon.css'); ?>" />
<script type="text/javascript" src="<?php echo base_url('assets/jquery.min.js');
?>"></script>
base_url('assets/jquery.easyui.min.js'); ?>"></script>
<style type="text/css">
.fill
{
background-color: #DFE8F6;
}
body
{
margin: 0;
padding: 0;
color: #555;
74
font: normal 10pt Arial,Helvetica,sans-serif;
background: #DFE8F6;
}
.header-view
{
padding-left: 10px;
color: #555;
}
</style>
</head>
<body class="easyui-layout">


<div region="north" class="fill header-view" style="height: 110px" border="false"
split="true">
<h1>CodeIgniter EasyUI</h1>
<h2>Implementasi Ajax Login pada CodeIgniter dan Easyui</h2>
</div>


<div region="west" class="fill" border="true" title="Navigation" style="width: 250px"
split="true">
<div class="easyui-accordion" fit="true" border="false" iconCls="icon-redo">
<div title="Menu 1" iconCls="icon-reload">
<ul class="easyui-tree">
<li><a href="javascript:void(0)" id="log">Logout</a></li>
<li>Child Menu 1</li>
</ul>
</div>
<div title="Menu 2" iconCls="icon-search">
75
</ul>
</div>
<div title="Menu 3" iconCls="icon-help">
</ul>
</div>
</div>
</div>


<div region="center" split="true" title="Main Content" id="content">
</div>


<div region="south" class="fill" style="height: 35px; padding: 5px;" split="true">
Copyright © 2014 - Dida Nurwanda
</div>
var AUTH_ID = '<?php echo $this->auth->get_id(); ?>';
jQuery(function($) {
if(AUTH_ID == '') {
show_login_view();
} else {
show_main_view();
76
}
$('#log').click(function() {
if (AUTH_ID != '') {
$.get('<?php echo site_url('welcome/logout'); ?>', [], function(e) {
show_login_view();
AUTH_ID = '';
});
}
});
});
function show_login_view() {
$('#log').html('Login');
$('#content').panel('refresh', '<?php echo site_url('welcome/login'); ?>');
}
function show_main_view() {
$('#log').html('Logout');
$('#content').panel('refresh', '<?php echo site_url('welcome/main'); ?>');
}
</script>
</body>
</html>
Atur path untuk jquery dan jquery easyui anda. Kemudian buat file login.php
<div style="padding: 13% 30%">
77
<div class="easyui-panel fill" style="width: 450px; height: 200px;" title="Login"
iconCls="icon-redo">
<form id="form-login" method="post" style="padding: 20px;" novalidate
onsubmit="return false">
<div class="form-item">
<label for="username">Username</label>
<br />
<input type="text" name="username" class="easyui-validatebox"
required="true" style="width: 100%" />
</div>
<label for="password">Password</label>
<br />
<input type="password" name="password" class="easyui-validatebox"
required="true" style="width: 100%" />
</div>
<br />
<a id="submit-login" class="easyui-linkbutton" iconCls="icon-
ok">Login</a>
</div>
</form>
</div>
</div>
$('#submit-login').click(function() {
$.post('<?php echo site_url('welcome/proses_login'); ?>', $('#form-
login').serialize(), function(e) {
if (e.success == true) {
AUTH_ID = e.auth_id;
show_main_view();
78
}
});
});
</script>
Buat juga file dengan nama main.php
<div id="main-content" class="easyui-tabs" data-options="fit:false,border:false"

style="padding:1px" >
<div title="Selamat Datang" data-options="iconCls: 'icon-filter'">
<h1>Selamat Datang</h1>
</div>
</div>
Untuk username dan password yaitu "admin"
79
80
11. Penjelasan Konsep MVC
Konsep Model View Controller
Model-View-Controller atau MVC adalah sebuah metode untuk

membuat sebuah aplikasi dengan memisahkan data (Model) dari tampilan (View)
dan cara bagaimana memprosesnya (Controller). Dalam implementasinya
kebanyakan framework dalam aplikasi website adalah berbasis arsitektur MVC.
MVC memisahkan pengembangan aplikasi berdasarkan komponen utama yang
membangun sebuah aplikasi seperti manipulasi data, antarmuka pengguna, dan
bagian yang menjadi kontrol dalam sebuah aplikasi web.
Bagian MVC
1. Model, Model mewakili struktur data. Biasanya model berisi fungsi-fungsi yang
membantu seseorang dalam pengelolaan basis data seperti memasukkan data ke
basis data, pembaruan data dan lain-lain.
2. Viewers, Viewers adalah bagian yang mengatur tampilan ke pengguna. Bisa di
katakan berupa halaman web.
3. Controller, Controller merupakan bagian yang menjembatani model dan view.
Controller berisi perintah-perintah yang berfungsi untuk memproses
suatu data dan mengirimkannya ke halaman web.
Dengan menggunakan metode MVC maka aplikasi akan lebih mudah untuk dirawat
dan dikembangkan. Untuk memahami metode pengembangan aplikasi
menggunakan MVC diperlukan pengetahuan tentang pemrograman berorientasi
objek (Object Oriented Programming).
81
Jenis – jenis MVC
• Server Side MVC, Server Side MVC biasa terjadi pada aplikasi web tradisional,
yang tidak melibatkan client sideseperti Javascript, Java applet, Flash, dan lain-
lain. Server Side MVC menyerahkan keseluruhan proses bisnis padaserver,
aplikasi pada sisi pengguna hanya dapat menerima. MVC jenis ini kadang-
kadang disebut juga dengan namaThin Client.
• Mixed Client Side and Server Side MVC, Pada Mixed Client Side and Server
Side MVC 1 client tidak menggunakan model sebagai jembatan untuk
melakukan komunikasi pada server, dibandingkan dengan Server Side MVC,
arsitektur ini memiliki tingkat kompleksitas yang lebih tinggi karena lebih
banyak komponen yang terlibat. Untuk selanjutnya arsitektur ini disebut, dengan
Mixed MVC 1. Pada Mixed Client Side and Server Side MVC 2, client
menggunakan model sebagai jembatan untuk melakukan komunikasi pada
server, dibandingkan dengan arsitektur MVC yang lain, arsitektur ini memiliki
tingkat kompleksitas yang paling tinggi karena lebih banyak komponen yang
terlibat, sehingga membutuhkansumber daya yang lebih besar pula. Untuk
selanjutnya arsitektur ini disebut dengan Mixed MVC 2.
• Rich Internet Application MVC, Application MVC Rich Internet Application
(RIA) disebut juga dengan nama Fat Client, merupakan aplikasi web yang
memiliki kemampuan dan fungsi hampir seperti aplikasi desktop. RIA pada sisi
client, memiliki mesin untuk mengambil data yang berada pada server, sehingga
pada client terdapat bagian MVC sendiri dan hanya membutuhkan bagian model
pada sisi server.
Jika dibutuhkan banyak langkah hanya untuk menampilkan satu halaman

web ketika menggunakan metode MVC, namun dengan penggunaan metode MVC
mendapatkan keuntungan ketika membuat kode program, yaitu setiap bagian
memiliki tanggung jawab masing-masing. Misalnya ingin mengubah query (databe)
maka langsung saja edit kode pada bagian Model. Misalnya mau merubah desain
tampilan pada web maka langsung menuju bagian view. Karena setiap bagian ada
yang bertanggun jawab maka hal seperti ini akan mempercepat dan mempermudah
pengembangan web.
82
Keuntungan membangun website dengan konsep MVC
 Menghasilkan modul yang kita inginkan menjadi cepat
 Pada konsep MVC kita menjumpai ORM (Object Relation Mapping) dengan
ORM kita tidak perlu repot dengan menuliskan syntax SQL yang spesifik
untuk database tertentu.
Kemudahan dalam melakukan pengubahan dilain waktu karena website lebih
terstruktur, sehingga mudah menemukan bagian yang ingin diubah.
83
12. Pengenalan Controller dari MVC
Model View Controller merupakan suatu konsep yang cukup populer dalam
pembangunan aplikasi web, berawal pada bahasa pemrograman Small Talk
(Wikipedia), MVC memisahkan pengembangan aplikasi berdasarkan komponen
utama yang membangun sebuah aplikasi seperti manipulasi data, user interface, dan
bagian yang menjadi kontrol aplikasi.
Controller, merupakan bagian yang mengatur hubungan antara bagian model dan
bagian view, controller berfungsi untuk menerima request dan data dari user
kemudian menentukan apa yang akan diproses oleh aplikasi.
Arsitektur MVC memiliki layer Controller. Layer ini menyediakan detail
alur program dan transisi layer, dan juga bertanggungjawab akan penampungan
events yang dibuat oleh user dari View dan melakukan update terhadap komponen
Model menggunakan data yang dimasukkan oleh user. Kelebihan dalam
penggunaan layer Controller secara terpisah : Pertama, dengan menggunakan
komponen terpisah untuk menampung detail dari transisi layer, komponen view
dapat didesain tanpa harus memperhatikan bagian lain secara berlebih. Hal ini
memudahkan team pengembang multiple interface bekerja secara terpisah dari yang
84
lain secara simultan. Interaksi antar komponen View terabstraksi dalam Controller.
Kedua, dengan menggunakan layer terpisah yang melakukan update terhadap
komponen Model, detail tersebut dihapus dari layer presentasi. Layer presentasi
kembali pada fungsi utamanya untuk menampilkan data kepada user. Detail tentang
bagaimana data dari user mengubah ketetapan aplikasi disembunyikan oleh
Controller. Hal ini memisahkan dengan jelas antara presentation logic dengan
business logic. Tidak dapat disimpulkan bahwa pola MVC hadir dengan kelebihan
– kelebihan tanpa ada efek samping. Pembagian aplikasi dalam 3 bagian terpisah
meningkatkan kompleksivitas. Pada aplikasi kecil yang tidak membutuhkan loose
coupling pada Model, hal ini dapat menjadi blok penghalang dalam penggunaan
pola ini. Bagaimanapun, yang terbaik adalah untuk meyakini bahwa sebuah aplikasi
umumnya dimulai dari aplikasi sederhana, dan berkembang menjadi sistem yang
kompleks., sehingga factor loose coupling harus selalu diutamakan dan
diperhatikan.
85
13. Pengenalan View dari MVC
View, merupakan bagian yang menangani presentation logic. Pada suatu

aplikasi web bagian ini biasanya berupa file template HTML, yang diatur oleh
controller. View berfungsi untuk menerima dan merepresentasikan data kepada
user. Bagian ini tidak memiliki akses langsung terhadap bagian model.
Hampir perkembangan mvc dalam dunia pemrograman adalah ,
perkembangan dimana setiap orang bisa belajar dan membuat program yang
enterprise (yang berbobot) tanpa harus mahir dan belajar bertahun-tahun atau pun
membutuhkan team work yang banyak. Konsep MVC tidak hanya di gunakan
dalam satu jenis program, bahkan sekarang bisa dikatakan hampir menyeluruh di
setiap jenis pemrograman, baik yang open source maupun yang berbayar.
Layer ini mengandung keseluruhan detail dari implementasi user interface.
Disini, komponen grafis menyediakan representasi proses internal aplikasi dan
menuntun alur interaksi user terhadap aplikasi. Tidak ada layer lain yang
berinteraksi dengan user, hanya View. Penggunaan layer View memiliki beberapa
kelebihan : Pertama, memudahkan pengabungan divisi desain dalam development
86
team. Divisi desain dapat berkonsentrasi pada style, look & feel, dan sebagainya,
dalam aplikasi tanpa harus memperhatikan lebih pada detail yang lain.
Dan juga, memiliki layer View yang terpisah memungkinkan ketersediaan
multiple interface dalam aplikasi. Jika inti dari aplikasi terletak pada bagian lain
(dalam Model), multiple interfaces dapat dibuat (Swing, Web, Console), secara
keseluruhan memiliki tampilan yang berbeda namun mengeksekusi komponen
Model sesuai fungsionalitas yang diharapkan.
87
14. Pengenalan Model dari MVC
Model, biasanya berhubungan langsung dengan database untuk
memanipulasi data (insert, update, delete, search), menangani validasi dari bagian
controller, namun tidak dapat berhubungan langsung dengan bagian view.
MVC memisahkan antara view (Tampilan web) dan model (data
pendukungnya) dan diantaranya ada controller yang menjembatani antara tampilan
dan data pendukungnya (database array atau semacamnya). Berbeda dengan
menggunakan cara standar dimana semua view, sistem logic, dan koneksi ke
databasenya berada didalam satu file php. yang mengakibatkan banyak mengetik
kode dan struktur file tidak karuan. Gambar dibawah adalah penggunnaan file dan
folder jika kita menggunakan cara lama. masalah seperti ini biasanya banyak dilalui
oleh programmer yang belum mengenal framework php.
MVC sendiri sebenarnya sangat mudah sekali dipelajari. namun sebelumnya

sampeyan sebaiknya mengenal OOP dulu (PHP berbasis Objek).
88
• User meminta request url :
Saat user memasukkan url, katakanlah "koperasi.com/anggota" itu berarti user
ingin melihat data anggota koperasi. kemudian
• Controller beraksi:
dijalankanlah controller anggota, tugas controller anggota ini adalah mengambil
data dari model anggota yang isinya data dari database misalnya. dan
menambahkannya di view anggota. Kemudian si controller tersebut
menampilkan si viewnya ke browser.
analogi
• Pak controller adalah pemilik dari perusahaan jasa lukis wajah, dia memiliki
anak buah: mas model dan mas view.
• Suatu hari seorang pelanggan (User) meminta untuk dilukis wajahnya.
• pelanggan tersebut meminta ke pak controller.
• Kemudian pak controller meminta mas model untuk mencari data wajahnya
(foto)
• setelah dapat foto dari mas model, pak controller ini pun bekerja melukis
wajahnya
• Setelah wajahnya sudah dilukis, lukisan tersebut diberikan ke mas view
• Mas view memberikannya ke pelanggan
89
Jadi :
Model : berisi fungsi fungsi untuk keperluan data, seperti CRUD database.
View : berisi kode html biasa dan beberapa php untuk menampilkan data.
Controller : Berisi fungsi-fungsi untuk memproses logic dan sistem dari web,
seperti : pemrosesan form, menampilkan view.
90
15. MVC pada Framework
ASP.NET MVC
ASP.NET mendukung pengembangan pada 3 model besar: Halaman Web, formulir
Web danMVC (Model View Controller). Kerangka ASP.NET MVC adalah
framework yang ringan, sangat diuji presentasi yang terintegrasi dengan
fitur ASP.NET yang ada, seperti halaman master, otentikasi, dll. Dalam .NET,
kerangka kerja ini didefinisikan dalam Majelis System.Web.Mvc. Versi terbaru dari
Framework MVC adalah 5.0. Kami menggunakan Visual Studio untuk membuat
ASP.NET MVC aplikasi yang dapat ditambahkan sebagai template dalam Visual
Studio.
ASP.NET MVC menyediakan fitur berikut:

 Ideal untuk mengembangkan aplikasi dengan skala besar / kompleks tapi tetap
ringan.
 Menyediakan kerangka extensible dan pluggable yang dapat dengan mudah
diganti dan disesuaikan. Misalnya, jika tidak ingin menggunakan built-in Razor
or ASPX View Engine, maka dapat menggunakan view mesin pihak ketiga
atau bahkan menyesuaikan yang sudah ada.
 Memanfaatkan desain berbasis komponen aplikasi dengan logis membagi
menjadi komponen Model, View dan Controller. Hal ini memungkinkan para
pengembang untuk mengelola kompleksitas proyek besar-besaran dan bekerja
pada komponen individual.
 Struktur MVC meningkatkan pembangunan berbasis tes dan testability aplikasi
karena semua komponen yang dapat dirancang dengan antar muka berbasis dan
91
diuji menggunakan mock objek. Maka Framework ASP.NET MVC sangat
ideal untuk proyek-proyek dengan tim besar pengembang web.
 Mendukung semua yang ada luas ASP.NET fungsionalitas seperti otorisasi dan
otentikasi, Master halaman, Data Binding, kontrol pengguna, keanggotaan,
ASP.NET Routing, dll.
 Tidak menggunakan konsep negara View (yang hadir dalam ASP.NET). Ini
membantu dalam membangun aplikasi yang ringan dan memberikan kontrol
penuh untuk para pengembang.
Dengan demikian, Anda dapat mempertimbangkan MVC Framework sebagai
kerangka besar dibangun di atas ASP.NET menyediakan set besar menambahkan
fungsionalitas dengan fokus pada pembangunan berbasis komponen dan pengujian.
MVC Framework - Arsitektur

Pada bagian atas, kita mempelajari aliran tingkat tinggi arsitektur MVC
Framework. Sekarang mari kita telah melihat bagaimana eksekusi
aplikasi MVC terjadi ketika permintaan tertentu dari klien.
Diagram alir MVC

Langkah-langkah aliran MVC
 Browser klien mengirimkan permintaan ke aplikasi MVC.
92
 Global.ascx menerima permintaan ini dan melakukan routing berdasarkan URL
permintaan masuk menggunakan Route Table, Route Data, Url Routing
Module dan Mvc Route Handler objek
 Operasi ini routing panggilan controller sesuai dan mengeksekusinya
menggunakan objek menggunakan metode IController Factory dan Mvc
Handler objek.
 Controller memproses data menggunakan Model dan memanggil metode yang
tepat menggunakan ControllerActionInvoker objek
Model diproses kemudian dilewatkan ke View yang pada gilirannya membuat
Keluaran terakhir.
93
16. Penjelasan dan Praktikum Keamanan Data Pada CI
Cara Melindungi Web dari Serangan XSS pada Framework CodeIgniter
XSS merupakan singkatan yang digunakan untuk istilah cross site scripting. XSS
merupakan salah satu jenis serangan injeksi code (code injection attack).
XSS dilakukan oleh penyerang dengan cara memasukkan kode HTML atau client
script code lainnya ke suatu situs. Serangan ini akan seolah-olah datang dari situs
tersebut. Akibat serangan ini antara lain penyerang dapat mem-bypass keamanan di
sisi klien, mendapatkan informasi sensitif, atau menyimpan aplikasi berbahaya.
Alasan singkatan yang digunakan XSS bukan CSS karena CSS sudah digunakan
untuk cascade style sheet.
Misalnya, Ada sebuah form dan di sana kita diminta untuk mengisi nama, nip, dan
jabatan. Akan tetapi, karena ada seorang yang usil. Dia tidak mengisi nama,
melainkan mengisi kode HTML dan Javascript. Maka yang akan tersimpan ke
dalam database adalah skrip di atas. Secara otomatis, ketika data ditampilkan,
browser akan mengekekusi skrip tersebut.
Itulah salah satu bentuk serangan XSS. Penyerang sangant leluasa memasukan
skrip ke website kita.
CodeIgniter sebenarnya sudah menyediakan fitur Global XSS Filtering.
Cara mengaktifkannya, tinggal mengganti nilai FALSE menjadi TRUE pada
application/config/config.php.
Dengan demikian, semua input dari pengguna atau penyerang akan dikonversi dulu
sebelum di simpan ke database. Akan tetapi fitur ini sudah tidak tersedia lagi.
The ‘global_xss_filtering’ setting is DEPRECATED and kept solely for backwards-
compatibility purposes. XSS escaping should be performed on output, not input!
– dokumentasi CI
Sepertinya pengembang CI sudah menyadari, kalau XSS itu masalah pada output,
bukan input.
Cara mengatasi XSS yang lain adalah dengan melakukan validasi input (xss_clean).
Namun, seperti yang disebutkan tadi. XSS masalah pada output bukan input.
94
Mau tidak mau, kita harus merubah dulu data yang akan ditampilkan agar tidak
dieksekusi oleh browser.
Misalnya seperti berikut ini.
echo htmlentities($data->nama, ENT_QUOTES, 'UTF-8');
fungsi htmlentities() akan merubah kode html menjadi bentuk yang tidak akan
dieksekusi.
Kita harus mengetik fungsi tersebut setiap mau menampilkan data. Karena terasa
cukup panjang, sebaiknya dijadikan helper.Buatlah sebuah helper pada direktori
application/helpers. Berikan nama xss_helper.php, kemudian isi kodenya seperti
berikut ini.
<?php
function cetak($str){
echo htmlentities($str, ENT_QUOTES, 'UTF-8');
}
Setelah itu,masukan helper ini ke dalam autoload. Buka,
application/config/autoload.php, kemudian tambahkan xss pada autoload helper.
/*
| -------------------------------------------------------------------
| Auto-load Helper Files
| -------------------------------------------------------------------
| Prototype:
|
| $autoload['helper'] = array('url', 'file');
*/
$autoload['helper'] = array('url','cookie','form','xss');
Sekarang fungsi echo, kita ganti dengan fungsi cetak().
Cara penggunaanya, tinggal kita panggil fungsi cetak() pada tempat atau view yang
mungkin bisa terkena XSS.
<?php foreach($pejabat as $pjb){?>
<tr>
95
<td><?php cetak($pjb->nama) ?></td>
<td><?php cetak($pjb->nip) ?></td>
<td><?php cetak($pjb->jabatan) ?></td>
</tr>
<?php } ?>
Maka, teks akan ditampilkan apa adanya, tidak lagi dieksekusi oleh browser.
Pengaturan CSRF Protection Codeigniter 3.0

CSRF (Cross-site Request Forgery) adalah salah satu jenis serangan keamanan web
untuk mendapatkan atau mengirim request yang dieksekusi atas wewenang korban,
tanpa dikehendakinya. Serangan CSRF dapat terjadi disebabkan karena tidak ada
mekanisme perlindungan token keamanan (request token) pada sebuah website,
sehingga penyerang dapat mengirim suatu request (misal: submit suatu form) secara
illegal yaitu tidak melalui form yang ada di website tersebut secara langsung. Jika
korban tidak berhati-hati, serangan CSRF dapat sukses dilakukan dengan memaksa
pengguna untuk melakukan permintaan mengubah data seperti profil pribadi,
alamat email, bahkan yang lebih berbahaya melakukan transaksi transfer dana.
Untuk itu penting sekali untuk menerapkan mekanisme perlindungan CSRF (CSRF
Protection) di website kita. Kali ini kita akan membahasPengaturan CSRF
Protection di aplikasi web berbasis Codeigniter 3.0. Mekanisme CSRF Protection
sebenarnya sudah ada di framework Codeigniter sejak versi 2.x.x, namun di versi
Codeigniter 3.0 terdapat beberapa pengaturan tambahan yang disediakan untuk
meningkatkan tingkat keamanan.
Konfigurasi
Untuk mengaktifkan CSRF Protection di Codeigniter 3.0 kita perlu mengubah
pengaturan di file /application/config/config.php
$config['csrf_protection'] = TRUE;
// SET TRUE UNTUK ENABLE CSRF PROTECTION
$config['csrf_token_name'] = 'csrf_test_name';
// NAMA CSRF TOKEN YANG AKAN DIGUNAKAN
$config['csrf_cookie_name'] = 'csrf_cookie_name';
96
// NAMA CSRF COOKIE YANG AKAN DIGUNAKAN
$config['csrf_expire'] = 7200;
// JANGKA WAKTU CSRF TOKEN EXPIRED (DALAM DETIK)
$config['csrf_regenerate'] = TRUE;
// JIKA TRUE MAKA CSRF TOKEN AKAN DI GENERATE ULANG UNTUK
SETIAP REQUEST
$config['csrf_exclude_uris'] = array();
// ARRAY BERISI LIST URI YANG TIDAK MENGGUNAKAN CSRF
PROTECTION
Pengaturan di atas adalah pengaturan CSRF Protection di Codeigniter 3.0. Terdapat

beberapa konfigurasi tambahan yang tidak ada di Codeigniter 2.x.x seperti
$config['csrf_regenerate'] dan$config['csrf_exclude_uris']. Dengan pengaturan
tambahan yang disediakan di Codeigniter 3.0 tersebut kita dapat dengan mudah
mengatur Action apa saja di Controller yang tidak perlu menerapkanCSRF
Protection, misalnya Action berupa AJAX. Serta tambahan konfigurasi
$config['csrf_regenerate'] yang memungkinkan CSRF Token digenerate ulang
untuk setiap request yang dilakukan, sehingga aplikasi menjadi lebih aman.
Form
Dengan mengaktifkan CSRF Protection di Codeigniter 3.0 kita perlu memodifikasi
form yang kita buat menggunakan form helper dari Codeigniter. Hal ini diperlukan
karena secara otomatis Codeigniter akan menambahkan input token pada setiap
form yang kita buat.
echo form_open(site_url('register/index'), array('class' => 'form-horizontal', 'role'
=> 'form');
.....
echo form_close();
Mungkin akan cukup merepotkan kalau harus mengubah form yang telah kita buat
menggunakan form helper. Alternatif lain yang bisa dilakukan adalah dengan
97
menambahkan satu buah input hidden yang berisi CSRF Token di setiap form yang
telah kita buat.
<form method="POST" action="<?=site_url('register/index')?>" class="form-

horizontal" role="form">
<input type="hidden" name="<?=$this->security->get_csrf_token_name();?>"
value="<?=$this->security->get_csrf_hash();?>" style="display: none">
....
</form>
AJAX Request
Dengan mengaktifkan CSRF Protection maka untuk semua POST request harus
menyertakan CSRF token agar request tersebut dinilai valid. Begitu juga untuk
request POST yang berupa AJAX. Ada dua cara yang dapat dilakukan untuk
mengatasi hal ini. Yang pertama kita bisa menambahkan action atau fungsi
controller yang berupa request AJAX ke dalam konfigurasi
$config['csrf_exclude_uris'] , sehingga CSRF Protection akan di hilangkan untuk
action atau fungsi tersebut. Yang kedua kita bisa menambahkan CSRF Token untuk
semua AJAX request POST yang akan kita lakukan. Jika AJAX request yang kita
lakukan menggunakan jquery, kita dapat menggunakan fungsi $.ajaxSetupuntuk
secara otomatis meynertakan CSRF Token di semua AJAX request yang kita
lakukan.
var csfrData = {};
csfrData['<?php echo $this->security->get_csrf_token_name(); ?>'] = '<?php echo
$this->security->get_csrf_hash(); ?>';
$.ajaxSetup({
data: csfrData
});
Atau kita juga bisa menambahkan CSRF Token satu persatu di AJAX request yang
kita lakukan.
$.ajax({
98
url: '<?php echo site_url("post/update") ?>',
type: 'POST',
dataType: 'json',
data: {
data: 'data',
<?php echo $this->security->get_csrf_token_name(); ?>: '<?php echo
$this->security->get_csrf_hash(); ?>'
},
});
99
17. Pengenalan Authentikasi & Autorisasi dari Login Hingga Hak
Akses
Otentikasi atau Authentication adalah proses mengkonfirmasi identitas dari

seseorang atau suatu benda. Misalkan pada saat pulang ke rumah dan mengetuk
pintu masuk, maka ibu Anda akan menanyakan siapa yang mengetuk pintu,
sebelum mempersilahkan Anda masuk.
Otorisasi atau Authorization adalah proses memberi izin seseorang atau
suatu benda untuk melakukan sesuatu. Contoh, setelah Anda dipersilahkan masuk,
maka Anda akan diizikan untuk duduk di ruang tamu, menonton tv, membaca
majalah di meja, masuk ke kamar tidur Anda. Namun tidak mengizinkan Anda
menggunakan laptop ayah Anda atau membuka kotak penyimpanan.
Proses otentikasi & otorisasi menyangkut 4 komponen penting.
1. Orang atau benda yang akan melakukan sesuatu dan dikonfirmasi
indentitasnya, dalam contoh di atas Anda sendiri;
2. Aksi yang dilakukan, misal membaca, menonton;
3. Benda yang dikenakan Aksi, misal tv, buku, kamar tidur;
4. Peran atau role dari orang di dalam sistem, misal peran Anda di rumah yaitu
sebagai Anak.
Perlu ditekankan di komponen terakhir peran. Pada saat Anda berdiri di depan pintu
rumah, saat mengetuk pintu, maka peran Anda adalah "TAMU" atau "GUEST".
Setelah ibu Anda mengkonfirmasi diri Anda dan mengizinkan Anda masuk ke
dalam rumah, maka peran Anda berubah menjadi "ANAK". Jika yang mengetuk
pintu ayah Anda maka setelah diizinkan masuk perannya berubah
dari "TAMU" ke "KEPALA KELUARGA". Peran inilah yang menentukan aksi
apa yang boleh Anda lakukan terhadap sebuah benda. Aksi Aksi apa saja yang bisa
Anda lakukan berdasarkan peran Anda sering disebut dengan hak akses.
Menyiapkan Tabel Database
Langkah pertama yang perlu dilakukan adalah membuat tabel yang akan digunakan
pada tutorial ini. Buatlah tabel dengan nama "user" seperti di bawah:
100
___________________________________________________________________
| kolom | tipe data | keterangan |
-----------------------------------------------------------------------
| user_id | varchar(40) | primary key |
-----------------------------------------------------------------------
| name | varchar(50) | |
-----------------------------------------------------------------------
| password | varchar(50) | |
-----------------------------------------------------------------------
| type | varchar(20) | mencatat tipe/peran user |
-----------------------------------------------------------------------
1. CREATE TABLE ùser` (

2. ùser_id` VARCHAR(40) NOT NULL ,
3. `name` VARCHAR(50) NULL ,
4. `password` VARCHAR(50) NULL ,
5. `type` VARCHAR(20) NULL ,
6. PRIMARY KEY (ùser_id`) )
7. DEFAULT CHARACTER SET = utf8
8. COLLATE = utf8_general_ci;
Perlu diperhatikan di tabel di atas ada satu kolom type, kolom type digunakan
untuk mencatat/menentukan peran pengguna setelah berhasil login.
Membatasi Hak Akses Pengguna Berdasarkan Tipe/Peranan (Otorisasi)
Pada bagian ini akan dimulai membuat kode php untuk membatasi hak akses.
Seperti dijelaskan di atas otentikasi & otorisasi menyangkut 4 komponen. Jika
dikaitkan dengan contoh kode di tutorial ini maka 4 komponen tersebut adalah
sebagai berikut:
1. Orang atau benda-> pengguna atau pengunjung website;
2. Aksi-> mengakses/menload/mengunjungi halaman web;
3. Benda-> halaman web, misal: index.php, login.php, admin.php;
101
4. Peran-> guest,admin,user ditentukan dari kolom type di tabel user.
File Konfigurasi
Pertama buat file config.php untuk menyimpan semua konfigurasi umum seperti
konfigurasi koneksi database.
1. <?php
2. if(!defined('__NOT_DIRECT')){
3. //mencegah akses langsung ke file ini
4. die('Akses langsung tidak diizinkan!');
5. }
6.
7. define('BASE_URL', '/tutorial/multi-login/');
8. //koneksi database
9. define('DB_HOST','localhost');
10. define('DB_USER','root');
11. define('DB_PASS', 'blah');
12. define('DB_NAME' ,'test');
Pada baris ke-2 sampai ke-5 digunakan untuk mencegah akses langsung ke file
config.php, file harus di-include oleh file lain dengan
mendifinisikan konstanta__NOT_DIRECT terlebih dahulu. Baris ke-7 adalah
bagian terpenting, mendifinisikan konstanta BASE_URL jika Anda mengakses
tutorial ini di browser seperti http://localhost/tutorial/multi-login/ maka
BASE_URL diisi dengan /tutorial/multi-login/. Jika http://localhost/multi-login/
maka isi BASE_URL dengan /multi-login/. Tinggal hilangkan localhost, lebih
mudahnya lagi jika Anda membuat tutorial ini di folder htdocs/tutorial/multi-login
maka isi BASE_URL dengan tutorial/multi-login. Baris selanjutnya adalah
mendefinisikan konstanta untuk koneksi ke database.
102
Konfigurasi Hak Akses Masing Masing Tipe User
Setelah selesai mendefinisikan konfigurasi global, selanjutnya adalah membuat file
konfigurasi hak akses masing masing tipe user, halaman web mana saja yang bisa
diakses setiap tipe user.
1. Pertama buat folder dengan nama "akses".
2. Di dalam folder akses buatlah 3 file, file admin.php untuk pengguna dengan
peran admin, file user.php untuk pengguna dengan peran user (user biasa), dan
file guest.php untuk pengguna dengan peran guest.
Masing masing file tersebut adalah sebagai berikut:
file admin.php
1. <?php
2. $__akses_config = array(
3. 'login.php',
4. 'logout.php',
5. 'admin/index.php',
6. 'admin/list-user.php',
7. 'admin/add-user.php',
8. 'admin/edit-user.php',
9. 'admin/delete-user.php',
10. 'admin/add-artikel.php',
11. 'admin/edit-artikel.php',
12. 'admin/list-artikel.php',
13. 'admin/delete-artikel.php',
14. 'index.php',
15. 'view-artikel.php'
16. );
file user.php
1. <?php
3. 'login.php',
103
4. 'logout.php',
5. 'admin/index.php',
6. 'admin/add-artikel.php',
7. 'admin/edit-artikel.php',
8. 'admin/list-artikel.php',
9. 'admin/delete-artikel.php',
10. 'index.php',
12. );
file guest.php
1. <?php
3. 'login.php',
4. 'logout.php',
5. 'register.php',
6. 'index.php',
8. );
Ketiga file di atas berisi satu variabel dengan nama $__akses_config dengan tipe
data array, variabel $__akses_config berisi data array dari halaman halaman mana
saja yang bisa diakses masing masing tipe user. Contoh admin boleh mengakses
halaman admin/list-user.php sedangkan user dan guest tidak bisa, kemudian semua
pengguna bisa mengakses halaman login.php. Jumlah file di folder akses tidak
terpaku hanya 3 buah, bisa ditambah sesuai dengan kebutuhan, sesuai dengan tipe
user yang diinginkan.
104
File Untuk Otorisasi User
Langkah selanjutnya adalah membuat file cek-akses.php. File ini digunakan untuk
menentukan apa peran pengguna dan halaman apa saja yang bisa dikunjungi.
Pertama mencegah akses langsung ke file cek-akses.php, file harus di-include oleh
file lain dengan mendifinisikan konstanta __NOT_DIRECT terlebih dahulu.
1. <?php
5. }
Kedua mengecek apakah user sudah login atau belum dan menentukan tipe/peran
pengguna.
6. // ....
7. session_start();
8. include_once
dirname(__FILE__).DIRECTORY_SEPARATOR.'config.php';
9. if(!isset($_SESSION['my_user_agent']) ||
($_SESSION['my_user_agent']!=md5($_SERVER['HTTP_USER_AGENT'])))
{
10. //user belum login
11. $__tipe_user = 'guest';
12. }else{
13. $__tipe_user = $_SESSION['tipe_user'];
14. }
Membuka session di baris ke-7, baris ke-8 meng-include file config.php yang telah
dibuat sebelumnya. Baris ke-9 sampai 14 mengecek apakah pengguna sudah login,
jika belum login maka tipenya adalah "guest" dan sebaliknya tipe user sesuai
dengan nilai $_SESSION['tipe_user'] (sesuai dengan nilai dari tabel user).
105
Catatan:
Berikut penjelasan beberapa fungsi yang mungkin baru Anda ketahui:
• DIRECTORY_SEPARATOR adalah konstanta yang berisi nilai 'pemisah
folder', di windows nilainya \ dan di linux /.
• __FILE__ adalah konstanta yang berisi nilai nama lengkap file beserta nama
foldernya misal, file cek-akses.php ada di folder C:\xampp\htdocs\multi-login
maka __FILE__ akan berisi C:\xampphtdocsmulti-logincek-akses.php.
• dirname fungsi untuk mendapatkan nama folder dari sebuah file atau folder,
dirname('C:\xampp\htdocs\multi-login\cek-akses.php'); akan menghasilkan
'C:\xampp\htdocs\multi-login'.
Ketiga meng-include salah satu file yang ada di folder akses yang dibuat
sebelumnya, sesuai dengan tipe pengguna yang diperoleh pada kode di atas. Jika
tipe pengguna guest maka include file akses/guest.php, jika admin maka include
file akses/admin.php
15. //.....
16. $aksesFilename =
dirname(__FILE__).DIRECTORY_SEPARATOR.'akses'.DIRECTORY_S
EPARATOR.$__tipe_user.'.php';
17. if(!file_exists($aksesFilename)){
18. die('Terjadi kesalahan sistem');
19. }
20. include $aksesFilename;
Keempat menentukan file yang sedang diakses oleh pengguna dan mengecek
apakah pengguna diperbolehkan mengakses file tersebut.
21. //.........
22. $arrayCurrentPath = explode('?',$_SERVER['REQUEST_URI']);
23. $currentPath = substr($arrayCurrentPath[0], strlen(BASE_URL));
24.
25. $allow = in_array($currentPath, $__akses_config);
106
Kelima jika pengguna tidak diizinkan dan pengguna belum login maka pengguna
dialihkan ke halaman login (baris 28 dan 29), sebaliknya ditampilkan text "Anda
tidak diizinkan mengakses halaman ini!" (baris 31).
26. //..........
27. if(!$allow){
28. if($__tipe_user == 'guest' && $currentPath != 'login.php'){
29. header("Location: ".BASE_URL.'login.php');
30. }else{
31. echo "Anda tidak diizinkan mengakses halaman ini!";
32. }
33. exit;
34. }
Setelah semua langkah di atas digabungkan maka file cek-akses.php akan seperti:
1. <?php
5. }
6.
7. session_start();
8.
9. require_once
dirname(__FILE__).DIRECTORY_SEPARATOR.'config.php';
10.
11. if(!isset($_SESSION['my_user_agent']) ||
($_SESSION['my_user_agent']!=md5($_SERVER['HTTP_USER_AGENT'])
)){
12. //user belum login
13. $__tipe_user = 'guest';
14. }else{
15. $__tipe_user = $_SESSION['tipe_user'];
107
16. }
17.
18. $aksesFilename =
dirname(__FILE__).DIRECTORY_SEPARATOR.'akses'.DIRECTORY_
SEPARATOR.$__tipe_user.'.php';
19. if(!file_exists($aksesFilename)){
20. die('Terjadi kesalahan sistem');
21. }
22. include $aksesFilename;
23.
24. $arrayCurrentPath = explode('?',$_SERVER['REQUEST_URI']);
25. $currentPath = substr($arrayCurrentPath[0], strlen(BASE_URL));
26.
27. $allow = in_array($currentPath, $__akses_config);
28.
29. if(!$allow){
30. if($__tipe_user == 'guest' && $currentPath != 'login.php'){
31. header("Location: ".BASE_URL.'login.php');
32. }else{
33. echo "Anda tidak diizinkan mengakses halaman ini!";
34. }
35. exit;
36. }
Otentikasi Pengguna
Setelah membuat skrip untuk otorisasi pengguna di atas, langkah selanjutnya
adalah membuat skrip untuk Otentikasi user.
File Login.php
Berikut adalah langkah langkah untuk membuat file login.php, langkah langkah
mengotentikasi pengguna.
108
Pertama mendefinisikan konstanta __NOT_DIRECT dan meng-include file cek-
akses.php
1. defined('__NOT_DIRECT') || define('__NOT_DIRECT',1);
2. include 'cek-akses.php';
Kedua cek apakah pengguna sudah menginput user_id & password dan menekan
tombol login, kemudian membuka koneksi ke database
3. //....
4. if($_POST){
5. mysql_connect(DB_HOST,DB_USER,DB_PASS);
6. mysql_select_db(DB_NAME);
Ketiga cek kebenaran user_id dan password yang diinput pengguna. Jika benar
buat 3 session $_SESSION['tipe_user'], $_SESSION['user_id'], dan
$_SESSION['my_user_agent'] dan alihkan pengguna ke halaman
admin/index.php. Sebaliknya jika user_id atau password salah tampilkan pesan
"ID User atau password salah!"
7. //..........
8. $userId = mysql_real_escape_string($_POST['user_id']);
9. $data = mysql_fetch_array(mysql_query("select * from user where
user_id='".$userId."'"));
10. if($data !== false && $data['password'] ==
md5($_POST['password'])){
11. //login berhasil
12. $_SESSION['tipe_user'] = $data['type'];
13. $_SESSION['user_id'] = $data['user_id'];
14. $_SESSION['my_user_agent'] =
md5($_SERVER['HTTP_USER_AGENT']);
15. header("Location: admin/index.php");
16. }else{
17. echo "ID User atau password salah!";
18. }
109
19. }?>
Keempat membuat form login

19. //.......
20. <form method="post" action="">
21. ID User: <input type="text" name="user_id"/>
22. Password: <input type="password" name="password"/>
23. <input type="submit" value="Login"/>
24. </form>
Jika digabungkan file login.php akan menjadi:

1. <?php
4. if($_POST){
5. mysql_connect(DB_HOST,DB_USER,DB_PASS);
6. mysql_select_db(DB_NAME);
7. $userId = mysql_real_escape_string($_POST['user_id']);
8. $data = mysql_fetch_array(mysql_query("select * from user where
user_id='".$userId."'"));
9. if($data !== false && $data['password'] == md5($_POST['password'])){
10. //login berhasil
11. $_SESSION['tipe_user'] = $data['type'];
12. $_SESSION['user_id'] = $data['user_id'];
13. $_SESSION['my_user_agent'] =
md5($_SERVER['HTTP_USER_AGENT']);
14. header("Location: admin/index.php");
15. }else{
16. echo "ID User atau password salah!";
17. }
18. }
19. ?>
110
20. <form method="post" action="">
21. ID User: <input type="text" name="user_id"/>
22. Password: <input type="password" name="password"/>
23. <input type="submit" value="Login"/>
24. </form>
Cara Menggunakan File cek-akses.php
Untuk menggunakan cek-akses.php sangat sederhana seperti
Sekarang buatlah folder admin dan file admin/index.php, admin/add-user.php dan
admin/add-artikel.php. Masing masing file ditambahkan kode di bawah di bagian
paling atas.
1. <?php
3. include '../cek-akses.php';
4. ?>
Uji Coba
Gunakanlah sql berikut untuk menambahkan user di tabel user
1. INSERT INTO USER (user_id, name, password, TYPE) VALUES
('admin1', 'Admin', md5('admin'), 'admin');
2. INSERT INTO USER (user_id, name, password, TYPE) VALUES ('test',
'Test', md5('123456'), 'user');
Sekarang akses dari browser http://localhost/multi-login/admin/index.php maka

Anda akan dialihkan ke halaman login. Masukkan user id test dan password
123456. Setelah berhasil login akses http://localhost/multi-login/admin/add-
user.php maka akan muncul text "Anda tidak diizinkan mengakses halaman ini!".
Dengan langkah yang sama coba login dengan admin dan password admin, lalu
akses http://localhost/multi-login/admin/add-user.php maka Anda akan
diperbolehkan mengaksesnya serta text "Anda tidak diizinkan mengakses halaman
ini!" akan hilang.
111
18. Pengenalan JQUERY EasyUI
Easy UI adalah plugin jquery yang dapat membantu kita dalam membangun
aplikasi berbasis web, terdapat banyak komponen yang sudah siap anda gunakan.
pada tutorial ini kita akan belajar membuat aplikasi CRUD sederhana dengan PHP
MySQL dan Jquery EasyUI.
Mempersiapkan Database
kita akan menggunakan database MySQL sebagai media untuk menyimpan data,
silahkan buat sebuah database baru dengan nama test, lalu buat sebuah tabel dengan
nama users dengan struktur seperti berikut :
Membuat Datagrid Untuk Menampilkan Data Pelanggan
Langkah selanjutnya kita akan membuat sebuah tabel dengan datagrid untuk
menampilkan data pelanggan.
Default
112
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Basic CRUD Application - jQuery EasyUI CRUD
6 Demo</title>
7 <link rel="stylesheet" type="text/css"
8 href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
10 href="http://www.jeasyui.com/easyui/themes/icon.css">
12 href="http://www.jeasyui.com/easyui/themes/color.css">
14 href="http://www.jeasyui.com/easyui/demo/demo.css">
15 <script type="text/javascript" src="http://code.jquery.com/jquery-
16 1.6.min.js"></script>
17 <script type="text/javascript"
18 src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
19 </head>
20 <body>
21 <h2>Basic CRUD Application</h2>
22 <p>Click the buttons on datagrid toolbar to do crud actions.</p>
23
24 <table id="dg" title="My Users" class="easyui-datagrid"
25 style="width:550px;height:250px"
26 url="get_users.php"
27 toolbar="#toolbar"
28 rownumbers="true" fitColumns="true" singleSelect="true">
29 <thead>
30 <tr>
31 <th field="firstname" width="50">First Name</th>
32 <th field="lastname" width="50">Last Name</th>
113
33 <th field="phone" width="50">Phone</th>
34 <th field="email" width="50">Email</th>
35 </tr>
36 </thead>
</table>
<div id="toolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-add"
plain="true" onclick="newUser()">New User</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit"
plain="true" onclick="editUser()">Edit User</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove"
plain="true" onclick="destroyUser()">Remove User</a>
</div>
</body>
</html>
selanjutnya buatlah sebuah file baru dengan nama conn.php yang akan menyimpan
script koneksi php ke database MySQL, berikut scriptnya :
Default
1
2 <?php
3 $conn = @mysql_connect('localhost','root','');
4 if (!$conn) {
5 die('Could not connect: ' . mysql_error());
6 }
7 mysql_select_db('test', $conn);
8
114
?>
lalu buat sebuah file baru dengan nama file get_users.php yang akan kita
gunakan untuk menggenerate data pelanggan dalam format Json, berikut adalah
script nya :
PHP
1 <?php
2 $page = isset($_POST['page']) ? intval($_POST['page']) : 1;
3 $rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10;
4 $offset = ($page-1)*$rows;
5 $result = array();
6
7 include 'conn.php';
8
9 $rs = mysql_query("select count(*) from pelanggan");
10 $row = mysql_fetch_row($rs);
11 $result["total"] = $row[0];
12 $rs = mysql_query("select * from pelanggan limit $offset,$rows");
13
14 $items = array();
15 while($row = mysql_fetch_object($rs)){
16 array_push($items, $row);
17 }
18 $result["rows"] = $items;
19
20 echo json_encode($result);
115
21
22 ?>
lalu silahkan akses proyek anda, jika berhasil maka akan muncul tampilan seperti
ini :
Membuat Form Untuk Input Dan Edit Data
sekarang kita lanjutnya dengan membuat sebuah form yang akan kita gunakan
sebagai interface untuk input dan update data. form ini nantinya akan muncul
sebagai pop up ketika diklik :
Default
1 <div id="dlg" class="easyui-dialog"

2 style="width:400px;height:280px;padding:10px 20px"
116
3 closed="true" buttons="#dlg-buttons">
4 <div class="ftitle">User Information</div>
5 <form id="fm" method="post" novalidate>
6 <div class="fitem">
7 <label>First Name:</label>
8 <input name="firstname" class="easyui-textbox"
9 required="true">
10 </div>
12 <label>Last Name:</label>
13 <input name="lastname" class="easyui-textbox"
14 required="true">
15 </div>
17 <label>Phone:</label>
18 <input name="phone" class="easyui-textbox">
19 </div>
21 <label>Email:</label>
22 <input name="email" class="easyui-textbox"
23 validType="email">
24 </div>
25 </form>
26 </div>
<div id="dlg-buttons">
<a href="javascript:void(0)" class="easyui-linkbutton c6"
iconCls="icon-ok" onclick="saveUser()" style="width:90px">Save</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-
cancel" onclick="javascript:$('#dlg').dialog('close')"
style="width:90px">Cancel</a>
</div>
117
Membuat Fungsi Untuk Memanggil Form
sampai pada tahap ini button untuk selanjutnya kita akan membuat fungsi untuk
menambah data baru belum bekerja, kita harus membuat sebuah perintah script
untuk mengtriger agar ketika button diklik maka akan memunculkan pop up form,
berikut script nya :
JavaScript
1 function newUser(){
2 $('#dlg').dialog('open').dialog('setTitle','New User');
3 $('#fm').form('clear');
4 url = 'save_user.php';
5 }
selanjutnya kita akan menulis script untuk menyimpan data yang di input ke
database, silahkan buat sebuah file dengan nama save_users.php dan tulis script
berikut :
Default
1 <?php
2
3 $firstname = htmlspecialchars($_REQUEST['firstname']);
4 $lastname = htmlspecialchars($_REQUEST['lastname']);
5 $phone = htmlspecialchars($_REQUEST['phone']);
6 $email = htmlspecialchars($_REQUEST['email']);
118
7
9
10 $sql = "insert into pelanggan(firstname,lastname,phone,email)
11 values('$firstname','$lastname','$phone','$email')";
12 $result = @mysql_query($sql);
13 if ($result){
14 echo json_encode(array(
15 'id' => mysql_insert_id(),
16 'firstname' => $firstname,
17 'lastname' => $lastname,
18 'phone' => $phone,
19 'email' => $email
20 ));
21 } else {
22 echo json_encode(array('errorMsg'=>'Some errors occured.'));
23 }
?>
ini :
119
selanjutnya kita akan masuk ke proses edit, dimana ketika users memilih salah
satu data dalam grid lalu klik button edit maka akan muncul form dengan
membawa data pelanggan yang dipilih :
JavaScript
1 var row = $('#dg').datagrid('getSelected');

2 if (row){
3 $('#dlg').dialog('open').dialog('setTitle','Edit User');
4 $('#fm').form('load',row);
5 url = 'update_user.php?id='+row.id;
6 }
lalu kita akan membuat file baru dengan nama update_user.php, file ini akan
menghadle jika ada request untuk menampilkan data pada form dan proses update
data, berikut script nya :
120
Default
<?php
$id = intval($_REQUEST['id']);
$firstname = htmlspecialchars($_REQUEST['firstname']);
$lastname = htmlspecialchars($_REQUEST['lastname']);
$phone = htmlspecialchars($_REQUEST['phone']);
$email = htmlspecialchars($_REQUEST['email']);
include 'conn.php';
$sql = "update pelanggan set

firstname='$firstname',lastname='$lastname',phone='$phone',email='$email'
where id=$id";
$result = @mysql_query($sql);
if ($result){
echo json_encode(array(
'id' => $id,
'firstname' => $firstname,
'lastname' => $lastname,
'phone' => $phone,
'email' => $email
));
} else {
echo json_encode(array('errorMsg'=>'Some errors occured.'));
}
?>
121
ini :
Menyimpan Data Pelanggan
Langkah selanjutnya kita akan membuat sebuah function javascript yang akan
bertugas menghandle perintah untuk menyimpan data pelanggan, function ini
akan dijalankan ketika pengguna melakukan klik pada button submit.
JavaScript
1 function saveUser(){
2 $('#fm').form('submit',{
3 url: url,
4 onSubmit: function(){
5 return $(this).form('validate');
6 },
7 success: function(result){
122
8 var result = eval('('+result+')');
9 if (result.errorMsg){
10 $.messager.show({
11 title: 'Error',
12 msg: result.errorMsg
13 });
14 } else {
15 $('#dlg').dialog('close'); // close the dialog
16 $('#dg').datagrid('reload'); // reload the user data
17 }
18 }
19 });
20 }
Fungsi Untuk Menghapus Data Pelanggan
selanjutnya kita akan membuat sebuah function javascript untuk menghadle jika
pengguna ingin menghapus data pelanggan, berikut script nya :
JavaScript
1 function destroyUser(){
3 if (row){
4 $.messager.confirm('Confirm','Are you sure you want to destroy this
5 user?',function(r){
6 if (r){
7 $.post('destroy_user.php',{id:row.id},function(result){
123
8 if (result.success){
10 } else {
11 $.messager.show({ // show error message
12 title: 'Error',
14 });
15 }
16 },'json');
17 }
18 });
19 }
}
selanjutnya kita akan membuat sebuah file baru dengan nama destroy_user.php
yang akan menghandle jika ada request untuk menghapus data, berikut ini script
nya :
Default
1 <?php
2
3 $id = intval($_REQUEST['id']);
4
6
7 $sql = "delete from pelanggan where id=$id";
8 $result = @mysql_query($sql);
9 if ($result){
124
10 echo json_encode(array('success'=>true));
11 } else {
12 echo json_encode(array('errorMsg'=>'Some errors occured.'));
13 }
14 ?>
Script Lengkap Untuk Index
Jika mungkin tadi anda masih bingung dengan potongan potongan script di atas,
maka sekarang saya menyertakan kesuluruhan dari script index nya :
Default
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Basic CRUD Application - jQuery EasyUI CRUD
6 Demo</title>
8 href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
10 href="http://www.jeasyui.com/easyui/themes/icon.css">
12 href="http://www.jeasyui.com/easyui/themes/color.css">
14 href="http://www.jeasyui.com/easyui/demo/demo.css">
15 <script type="text/javascript" src="http://code.jquery.com/jquery-
16 1.6.min.js"></script>
17 <script type="text/javascript"
125
18 src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
19 </head>
20 <body>
21 <h2>Basic CRUD Application</h2>
22 <p>Click the buttons on datagrid toolbar to do crud actions.</p>
23
24 <table id="dg" title="My Users" class="easyui-datagrid"
25 style="width:700px;height:250px"
26 url="get_users.php"
27 toolbar="#toolbar" pagination="true"
28 rownumbers="true" fitColumns="true"
29 singleSelect="true">
30 <thead>
31 <tr>
32 <th field="firstname" width="50">First
33 Name</th>
34 <th field="lastname" width="50">Last
35 Name</th>
36 <th field="phone" width="50">Phone</th>
37 <th field="email" width="50">Email</th>
38 </tr>
39 </thead>
40 </table>
41 <div id="toolbar">
42 <a href="javascript:void(0)" class="easyui-linkbutton"
43 iconCls="icon-add" plain="true" onclick="newUser()">New User</a>
45 iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>
47 iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove
48 User</a>
49 </div>
126
50
51 <div id="dlg" class="easyui-dialog"
52 style="width:400px;height:280px;padding:10px 20px"
53 closed="true" buttons="#dlg-buttons">
54 <div class="ftitle">User Information</div>
55 <form id="fm" method="post" novalidate>
57 <label>First Name:</label>
58 <input name="firstname" class="easyui-
59 textbox" required="true">
60 </div>
62 <label>Last Name:</label>
63 <input name="lastname" class="easyui-
64 textbox" required="true">
65 </div>
67 <label>Phone:</label>
68 <input name="phone" class="easyui-textbox">
69 </div>
71 <label>Email:</label>
72 <input name="email" class="easyui-textbox"
73 validType="email">
74 </div>
75 </form>
76 </div>
77 <div id="dlg-buttons">
78 <a href="javascript:void(0)" class="easyui-linkbutton c6"
79 iconCls="icon-ok" onclick="saveUser()" style="width:90px">Save</a>
81 iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')"
127
82 style="width:90px">Cancel</a>
83 </div>
84 <script type="text/javascript">
85 var url;
86 function newUser(){
87 $('#dlg').dialog('open').dialog('setTitle','New User');
88 $('#fm').form('clear');
89 url = 'save_user.php';
90 }
91 function editUser(){
93 if (row){
94 $('#dlg').dialog('open').dialog('setTitle','Edit
95 User');
96 $('#fm').form('load',row);
97 url = 'update_user.php?id='+row.id;
98 }
99 }
100 function saveUser(){
101 $('#fm').form('submit',{
102 url: url,
103 onSubmit: function(){
104 return $(this).form('validate');
105 },
106 success: function(result){
107 var result = eval('('+result+')');
108 if (result.errorMsg){
109 $.messager.show({
110 title: 'Error',
112 });
113 } else {
128
114 $('#dlg').dialog('close');
115 // close the dialog
116 $('#dg').datagrid('reload'); //
117 reload the user data
118 }
119 }
120 });
121 }
122 function destroyUser(){
124 if (row){
125 $.messager.confirm('Confirm','Are you sure you
126 want to destroy this user?',function(r){
127 if (r){
128
129 $.post('destroy_user.php',{id:row.id},function(result){
130 if (result.success){
131
133 } else {
134
135 $.messager.show({ // show error message
136 title:
137 'Error',
138 msg:
139 result.errorMsg
140 });
141 }
},'json');
}
});
}
129
}
</script>
<style type="text/css">
#fm{
margin:0;
padding:10px 30px;
}
.ftitle{
font-size:14px;
font-weight:bold;
padding:5px 0;
margin-bottom:10px;
border-bottom:1px solid #ccc;
}
.fitem{
margin-bottom:5px;
}
.fitem label{
display:inline-block;
width:80px;
}
.fitem input{
width:160px;
}
</style>
</body>
</html>
130
19.Membuat Report dan Excel pada Pemrograman Web
Dalam pembuatan sistem atau aplikasi berbasis web, seringkali diperlukan
laporan (report) untuk berbagai keperluan. Pada umumnya, laporan dapat disajikan
dalam 3 (tiga) bentuk yaitu laporan HTML, laporan bentuk PDF dan laporan
Excel atau Spreadsheet. Bentuk laporan HTML merupakan bentuk laporan yang
ditampilkan secara langsung di halaman web, dapat dibuat dengan perintah HTML
dan CSS. Sedangkan laporan dalam bentuk PDF, pada umumnya disajikan sebagai
format siap cetak atau siap disajikan. Tentang bagaimana membuat laporan PDF
dengan PHP, silahkah baca tutorial mengenai Step by Step membuat laporan PDF.
contoh laporan (report) dimana data diambil dari database MySQL.
Class untuk Membuat dan Menulis ke Excel

Untuk membuat maupun menulis file excel sebenarnya tidak terlalu sulit, karena
sudah cukup banyak tersedia library atau class yang dibuat khusus untuk
menangani membuat, menulis bahkan membaca file excel dan spreadsheet. Class
penanganan excel buatannya cukup singkat dan sederhana namun sudah sangat
cukup untuk memberikan gambaran bagaimana penanganan file excel dengan
menggunakan PHP.
Excel.class.php : Class Sederhana membuat file Excel
1. <?php
2. class Excel{
3.
4. /**
131
5. * set the header configuration
6. * @param $filename the xls file name
7. */
8. function setHeader($filename)
9. {
10. header("Pragma: public");
11. header("Expires: 0");
12. header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
13. header("Content-Type: application/force-download");
14. header("Content-Type: application/octet-stream");
15. header("Content-Type: application/download");;
16. header("Content-Disposition: attachment;filename=$filename");
17. header("Content-Transfer-Encoding: binary ");
18. }
19.
20. /**
21. * write the xls begin of file
22. */
23. function BOF() {
24. echo pack("ssssss", 0x809, 0x8, 0x0, 0x10, 0x0, 0x0);
25. return;
26. }
27.
28. /**
29. * write the xls end of file
30. */
31. function EOF() {
32. echo pack("ss", 0x0A, 0x00);
33. return;
34. }
35.
36. /**
132
37. * write a number
38. * @param $Row row to write $Value (first row is 0)
39. * @param $Col column to write $Value (first column is 0)
40. * @param $Value number value
41. */
42. function writeNumber($Row, $Col, $Value) {
43. echo pack("sssss", 0x203, 14, $Row, $Col, 0x0);
44. echo pack("d", $Value);
45. return;
46. }
47.
48. /**
49. * write a string label
50. * @param $Row row to write $Value (first row is 0)
51. * @param $Col column to write $Value (first column is 0)
52. * @param $Value string value
53. */
54. function writeLabel($Row, $Col, $Value) {
55. $L = strlen($Value);
56. echo pack("ssssss", 0x204, 8 + $L, $Row, $Col, 0x0, $L);
57. echo $Value;
58. return;
59. }
60. }
Pada class sederhana di atas terdapat beberapa fungsi. Fungsi pertama adalah
fungsi setHeader() di baris 13-23 yang berperan untuk mengatur header file
excel, termasuk nama file excel. Parameter dari fungsi ini adalah nama file excel.
Setelah fungsi setHeader(), terdapat fungsi BOF() dan EOF(), masing-masing
pada baris 28-31 dan 36-39. Kedua fungsi tersebut akan sebagai penanda awal dan
akhir file excel. Di dalamnya terdapat fungsi pack() yang merupakan fungsi PHP
untuk menghasilkan nilai biner berdasarkan format tertentu. Format fungsi pack
133
yang digunakan dalam class diatas antara lain “s” yang berarti signed-short dan
“d” yang berarti double. Selanjutnya untuk mengisikan data ke dalam cell di
excel, dibuatlah fungsiwriteNumber() dan writeLabel(). Fungsi writeNumber()
digunakan untuk menulis data bertipe numerik (angka) dan fungsi writeLabel()
untuk menulis data bertipe string (text). Kedua fungsi tersebut memiliki tiga
parameter yaitu $Row yang menunjukkan posisi baris cell, $Col yang
menunjukkan posisi kolom cell dan$Value yang merupakan nilai nilai yang akan
ditulis. Perlu diingat juga bahwa urutan baris dan kolom diawali dengan 0.
Membuat dan Menulis ke Excel

Program PHP berikut ini akan memberikan contoh sederhana dari penggunaan
class Excel sederhana di atas. Program akan membuat file excel dengan nama
“contoh-1.xls”. Pada cell yang pertama (Row=0, Col=0) diisi dengan text “NIM”,
pada cell kedua (Row=0, Col=1) diisi dengan text “1111500200” dan seterusnya.
contoh-1.php : Contoh sederhana pembuatan file excel
1. <?php
2. require_once "Excel.class.php";
3.
4. $excel = new Excel();
5. // Send Header
6. $excel->setHeader('contoh-1.xls');
7. $excel->BOF();
8.
9. $excel->writeLabel(0, 0, "NIM :");
10. $excel->writeLabel(0, 1, "1111500200");
11. $excel->writeLabel(1, 0, "NAMA :");
12. $excel->writeLabel(1, 1, "ACHMAD SOLICHIN");
13. $excel->writeLabel(2, 0, "NILAI :");
14. $excel->writeNumber(2, 1, 85);
15.
16. $excel->EOF();
134
17. exit();
18. ?>
Jika program di atas dijalankan maka akan terbuat sebuah file excel dengan
nama “contoh-1.xls” yang isinya kurang lebih sebagai berikut (dibuka dengan
LibreOffice 3) :
File Excel Hasil Contoh Program 1

Hasil dari program pertama di atas dapat dilihat secara langsung disini.
Membuat Laporan Excel dari Database MySQL

Untuk keperluan contoh kali ini, seperti biasanya, kita akan menggunakan tabel
sederhana berisi data mahasiswa (nama tabel=mahasiswa) dengan struktur
sebagai berikut:
FIELD TYPE LENGTH DESCRIPTION
Nim VARCHAR 10 NIM Mahasiswa
Nama VARCHAR 30 NAMA Mahasiswa
Alamat TEXT – Alamat Mahasiswa
135
Sebelum mencoba program di bawah ini, pastikan database dan tabel di atas
sudah dibuat di MySQL. Jangan lupa isikan beberapa contoh data ke dalam tabel
mahasiswa tersebut.
Sementara itu, untuk menangani koneksi dan pengambilan data dari database
MySQL, kita akan menggunakan fungsi mysqli yang merupakan fungsi mysql
yang telah ditingkatkan kemampuan dan performanya. Kita akan menggunakan
gaya penulisan mysqli dengan gaya object oriented. Saat ini, fungsi ini yang
sangat disarankan untuk digunakan, dibanding menggunakan fungsi mysql_*.
Berikut ini contoh program kedua untuk membuat laporan excel dari tabel
mahasiswa yang sudah dibuat sebelumnya.
contoh-2.php : Contoh Membuat Laporan Excel

dari Database MySQL
1. <?php
2. require_once "Excel.class.php";
3.
4. #koneksi ke mysql
5. $mysqli = new mysqli("localhost","root","qwerty","demo");
6. if ($mysqli->connect_error) {
7. die('Connect Error (' . $mysqli->connect_error . ') ');
8. }
9. #akhir koneksi
10.
11. #ambil data
12. $query = "SELECT nim, nama, alamat FROM mahasiswa";
13. $sql = $mysqli->query($query);
14. $arrmhs = array();
15. while ($row = $sql->fetch_assoc()) {
16. array_push($arrmhs, $row);
17. }
18. #akhir data
19.
136
20. $excel = new Excel();
21. #Send Header
22. $excel->setHeader('contoh-2.xls');
23. $excel->BOF();
24.
25. #header tabel
26. $excel->writeLabel(0, 0, "NIM");
27. $excel->writeLabel(0, 1, "NAMA");
28. $excel->writeLabel(0, 2, "ALAMAT");
29.
30. #isi data
31. $i = 1;
32. foreach ($arrmhs as $baris) {
33. $j = 0;
34. foreach ($baris as $value) {
35. $excel->writeLabel($i, $j, $value);
36. $j++;
37. }
38. $i++;
39. }
40.
41. $excel->EOF();
42.
43. exit();
44. ?>
Berikut penjelasan singkat dari program PHP di atas:

• Baris 2. Menyertakan class Excel yang disimpan dalam file
Excel.class.php menggunakan fungsi required_once.
• Baris 5. Membuat object mysqli dari class mysqli sekaligus melakukan
koneksi ke server MySQL dengan mengirimkan parameter namahost, user
mysql, password mysql dan nama database yang digunakan.
137
• Baris 6-8. Memeriksa sekaligus menampilkan pesan error jika ternyata
koneksi ke MySQL gagal dilakukan. Pesan error tersimpan dalam variabel
mysqli_error dari class mysqli.
• Baris 11-18. Pengambilan data dari tabel mahasiswa dan dikumpulkan ke
dalam variabel array $arrmhs. Fungsi array_push() digunakan untuk
memasukkan (push) setiap baris hasil query $row ke dalam array $arrmhs.
• Baris 22. Memanggil fungsi setHeader() dan memberikan nama file excel.
• Baris 25-28. Membuat header tabel di excel yang diletakkan di baris
pertama.
• Baris 30-39. Menuliskan data yang sudah tersimpan di array $arrmhs ke
dalam cell di excel dengan menggunakan perulangan foreach().
Hasil dari program kedua di atas dapat dilihat secara langsung
disini dimana kurang lebih hasil file excelnya sebagai berikut:
Tampilan File Excel Hasil Program 2
Berbagai Library Penanganan Excel Spreadsheet

Selain dengan class sederhana yang sudah dibahas di atas, terutama untuk
keperluan yang lebih kompleks, kita dapat menggunakan berbagai library PHP.
Library tersebut dapat ditemukan dengan mudah di internet. Berikut ini beberapa
library beserta review singkatnya:
1. PHP Excel (http://phpexcel.codeplex.com)
PHPExcel ini merupakan salah satu project open source yang didanai oleh
Microsoft. PHPExcel ini cukup tangguh dalam melakukan baca dan tulis ke
138
file excel baik dalam format .xls maupun .xlsx. Pada situs resminya,
disebutkan bahwa PHPExcel mendukung tipe file Excel (BIFF) .xls, Excel
2007 (OfficeOpenXML) .xlsx, CSV, Libre/OpenOffice Calc .ods,
Gnumeric, PDF dan HTML.
2. PEAR Excel Spreadsheet Writer (http://pear.php.net/)
Excel Spreadsheet Writer merupakan salah satu package dari PEAR (PHP
Extension and Application Repository), sebuah kumpulan ekstensi dan
library PHP. Package Excel Spreadsheet Writer sendiri sebenarnya memiliki
kemampuan cukup lengkap dalam hal penulisan file Excel, namun
sayangnya saat ini sudah tidak dikembangkan lagi. Library ini tidak bisa
untuk membaca file excel.
3. php-excel (https://code.google.com/p/php-excel/)
Library ini merupakan library sederhana yang dapat digunakan untuk meng-
ekspor data dari database ke file excel secara cepat. Tidak banyak fitur lain
yang ditawarkan oleh library ini, namun tidak ada salahnya Anda coba.
4. php-excel-reader (https://code.google.com/p/php-excel-reader/)
Dengan library PHP ini kita dapat membaca isi file excel (.xls) beserta
format-formatnya, kemudian menampilkannya menjadi format HTML.
Format dan isinya dapat dibaca dengan baik oleh library ini, sehingga sangat
cocok jika kita ingin membuat tampilan (preview) dari file excel yang sudah
ada.
139
DAFTAR PUSTAKA
Munandar, Aris.2016. Pengertian Tipe Data Array. Diakses dari :

https://bahasaweb.com/tipe-data-array-php/ . Pada 03 April 2018, pukul
22.03 WIB
Dian, Muhar. 2017. Belajar Java OOP: Memahami Konsep Dasar OOP (untuk Pemula).
Diakses dari : https://www.petanikode.com/java-oop/. Pada 08 April 2018,
pukul 22.35 WIB
Yurisa. 2012. Aritektur CodeIgniter. Diakses dari : http://michisage-

yumi.blogspot.co.id/2012/10/arsitektur-codeigniter.html. Pada 08 April
2018, pukul 23.10 WIB
Tanpa Nama. 2018. Konfigurasi Koneksi Database MySQL dan Codeigniter. Diakses dari :
https://www.koderumit.com/2017/07/konfigurasi-koneksi-database-
mysql-dan.html. Pada 14 April 2018, pukul 16.34 WIB
Ali. 2014. Konsep Dasar MVC (Model-View-Controller) dari PHP. Diakses dari :
https://situsali.com/konsep-dasar-mvc-model-view-controller-dari-php/.
Pada 15 April 2018, pukul 19.42 WIB
Christian, Ellyx. 2012. Sistem Login dengan Tipe User & Hak Akses Berbeda.
Diakses dari : http://www.myphptutorials.com/tutorials/674/sistem-login-
dengan-tipe-user-hak-akses-berbeda. Pada 22 April 2018, pukul 08.56
WIB
Akbar, Nuris. 2017. TUTORIAL CRUD PHP MYSQL DENGAN JQUERY EASYUI.
Diakses dari : https://belajarphp.net/tutorial-crud-php-mysql-dengan-
jquery-easyui/. Pada 24 April 2018, pukul 00.19 WIB
140
Solichin Achmad. 2013. MEMBUAT LAPORAN EXCEL DENGAN PHP. Diakses dari :
http://achmatim.net/2013/02/07/membuat-laporan-excel-dengan-php/.
Pada 26 April 2018, pukul 23.58 WIB
141

Ferra Fernanda (43A87006150593) PDF

Diunggah oleh

Informasi Dokumen

Judul Asli

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

Ferra Fernanda (43A87006150593) PDF

Diunggah oleh

Hak Cipta:

Format Tersedia

PEMROGRAMAN WEB II

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER

Bekasi, 07 Mei 2018

DAFTAR PUSTAKA ............................................................................................. 140

Teknologi semakin hari semakin berkembang. Salah satunya teknologi

Ferra Fernanda, lahir di Bekasi pada

Jenis-jenis tipe array di php

Associative Array (array assosiatif)

Berikut ini adalah tampilan hasil dari array multidimensi.

Terlihat bahwa array multidimensional ini lebih kompleks penggunaannya, dimana

Class dan Object

void namaMethod(){ ... }

Lalu, Kita biasanya membuat objek (instance) seperti ini:

NamaClass namaObj = new NamaClass();

Tanda titik (.) berfungsi untuk mengakses atribut dan method.

Contoh Program OOP

Isi nama package dengan “dasar”:

public class Player {

// definisi method run

// definisi method isDead untuk mengecek nilai kesehatan (healthPoin)

public class Game {

// membuat objek player

// mengisi atribut player

Setelah itu, coba eksekusi lagi:

Setelah itu mengisi atribut-atributny. Karena kalau tidak diisi akan

Berikutnya kita coba modifikasi nilai hp menjadi nol.

Cara Menentukan Atribut dan Method dari Objek

Class Diagram adalah sebuah diagram yang menggambarkan hubungan

Sebuah class digambarkan dengan sebuah tabel 1 kolom dan 3 baris.

Selain itu, terdapat garis yang menggambarkan hubungan antar class.

Langkah – langkah menginstall Framework Codeigniter :

Menyimpan Root di Server

Konfigurasi Dasar Pada Codeigniter

 ubah file autoload.php terletak pada folder application/config/autoload.php .

 fungsi autoload yaitu untuk mengaktifkan library tanpa perlu memanggilnya

 Edit file config.php yang terletak pada folder application/config/config.php.

1. base_url isi dengan url project kita misal

 ubah default controller routes.php terletak pada folder

$db['default']['hostname'] = 'isi dengan host database';

Sebelum megatur konfigurasi ada beberapa software yang kita butuhkan

Untuk mengatur konfigurasi codeigniter ke database mysql :

Script Koneksi di Codeigniter

Kita atur konfigurasi koneksi databasenya, menjadi :

Alhasil script yang kita rubah menjadi seperti ini

Script Koneksi pada Codeigniter

Membuat upload file dengan codeigniter dan Ajax Jquery.

Untuk membuat struktur table seperti gambar diatas,

Buka file config.php dengan text editor, kemudian temukan kode

Buka file database.php dengan text editor, kemudian temukan kode

Atur menjadi seperti berikut:

Pada controller Upload.php, terdapat 3 function.

$this->load->library('upload',$config); //call library upload

$judul= $this->input->post('judul'); //get judul image

Untuk meng-cek hasil file image yang di upload, silahkan buka

1. Buat database dan tabel dengan mengeksekusi query berikut:

3. Konfigusai beberapa file berikut:

CREATE TABLE barang(

2. Insert beberapa data dengan mengeksekusi query berikut:

5. Buat model dengan nama M_grafik.php dengan kode sebagai berikut:

<canvas id="canvas" width="1000" height="280"></canvas>

var myLine = new

Pertama, pastikan memiliki Codeigniter, jquery, dan script AjaxFileUpload yang