Anda di halaman 1dari 35

BAB 6

Teknik Codeigniter

Wah.. sampai juga nih kita sampai pada bahasan Teknik Codeigniter.. teknik-
teknik ini penulis pilah-pilih dari yang paling sering digunakan oleh para
pembuat program, diantaranya ada Pagination, Validation, Teknik Pencarian
Data, Upload File, Captcha, Membuat File PDF, dan masih ada lagi..
mungkin lebih tepatnya mirip seperti pada pembahasan serial buku CakePHP
yang pernah ditulis oleh penulis, hanya saja yang ini lebih difokuskan pada 1
buku. Jadi, langsung tancap gan ke sub bab pembahasan yang pertama, yaitu
Pagination.

6.1 Teknik Pagination


Pagination jika dalam bahasa Indonesianya dapat diartikan sebagai suatu teknik
yang digunakan untuk melakukan proses/pengaturan halaman. Tujuannya apa?
Tujuannya adalah untuk membatasi penampilan data/record per halaman.
Teknik Pagination ini 100% sangat dibutuhkan.. jika tidak ada pagination,
wah… dijamin deh keburu males orang baca informasinya… karena data akan
ditampilkan full dari atas ke bawah (scroll).. nah, bagaimana jika pertanyaannya
ada ribuan data yang terkandung pada suatu halaman web?.. wuihh.. tak usah
dijawab lagi deh kayanya..
Dengan adanya teknik pagination (paging), data yang ditampilkan bisa kita atur,
misalnya menampilkan 10 data per halaman, jika ingin melihat data
selanjutnya? Tinggal di Next saja.. lihat contohnya pada gambar 6.1.

Gambar 6.1. Contoh Pagination (Sumber: http://www.agussaputra.com)


Untuk membahas teknik ini, kita gunakan saja file controller ckomentar.php
yang pernah kita buat sebelumnya pada bab 5, dengan tujuan agar meringkas
pembahasan.

1
Ubah pada function index() nya menjadi seperti skrip yang tercetak tebal
berikut berikut :

<?php
Class Ckomentar extends Controller {

function index() {
$this->load->library('pagination');
$this->table->set_heading('Nomor', 'Nama', 'URL',
'Komentar');

$config['base_url'] =
'http://localhost/codeigniter/index.php/ckomentar/index';
$config['total_rows'] = $this->db->get('komentar')->
num_rows();
$config['per_page'] = 5;
$config['num_links'] = 20;
$this->pagination->initialize($config);
$data['hasil'] =
$this->db->get('komentar', $config['per_page'], $this-
>uri->segment(3));
$this->load->view('vkomentar', $data);
}

// skrip function selanjutnya


}
?>

Penjelasan Kode :
 $this->load->library('pagination'); , skrip untuk me-load
library pagination. Fungsi paging yang sudah disediakan oleh
Codeigniter.
 $this->table->set_heading('Nomor', 'Nama', 'URL',
'Komentar'); , untuk membuat heading kolom tabel. Dapat Andabaca
kembali pada pembahasan Penanganan Tabel.
 $config['base_url'] = 'http://localhost/codeigniter/
index.php/ckomentar/index'; , berfungsi untuk membuat base url
untuk halaman pagination.
 $config['total_rows'] = $this->db->get('komentar')->
num_rows(); , skrip untuk mengambil data/record dari tabel komentar,
kemudian dilakukan perhitungan jumlah data {num_rows()} yang
terdapat dalam tabel tersebut.
 $config['per_page'] = 5; , untuk membatasi jumlah yang
ditampilkan pada setiap halamannya.

2
 $config['num_links'] = 20; , skrip untuk menampilkan berapa
jumlah link yang ingin ditampilkan.
 $this->pagination->initialize($config); , skrip untuk
menginiliasisasikan pengaturan config yang telah ditentukan
sebelumnya.
 $data['hasil'] = $this->db->get('komentar',
$config['per_page'], $this->uri->segment(3)); , skrip membuat
variabel $data, dimana didalamnya mengangung nilai array dari
pengambilan seluruh data dari tabel komentar {$this->db->
get('komentar'}, kemudian dibatasi jumlah penampilan per halaman
{$config['per_page']}.
 $this->load->view('vkomentar', $data); , skrip untuk me-load
file view bernama vkomentar.php dimana didalamnya telah
mengandung nilai ($data) yang siap untuk ditampilkan pada file view
tersebut.

Tahap selanjutnya adalah buka kembali file view bernama vkomentar.php


yang pernah kita buat, kemudian ubah skripnya menjadi seperti berikut :

<html>
<head>
<title> View Latihan 1 </title>
</head>
<body>
<h3> <?php echo anchor('ckomentar/tambahdata', 'Tambah data'); ?>
</h3>
<?php
if (empty ($hasil)) {
echo "Tidak ada data";
}
else {
?>

<?php echo $this->table->generate($hasil); ?>

<?php echo $this->pagination->create_links(); ?>


<?php
}
?>
</body>
</html>

Penjelasan Kode :

3
 <?php echo $this->table->generate($hasil); ?> , skrip untuk
men-generate nilai array $hasil ke dalam bentuk tabel. Baca kembali
pada Penanganan Tabel.
 <?php echo $this->pagination->create_links(); ?> , skrip untuk
menciptakan link halaman, yang telah disesuaikan dengan banyak nya
data dalam tabel komentar.

Buka kembali web browser Anda dan lakukan refresh/reload pada url
http://localhost/codeigniter/index.php/ckomentar. dan lihat hasilnya akan terlihat
seperti pada gambar 6.2.

Gambar 6.2. Hasil Pagination

6.2 Teknik Validation


Teknik Validation berfungsi untuk memvalidasi semua data yang tidak sesuai
dengan aturan main sistem yang telah ditentukan. Misalnya menginputkan data
kosong, maka sistem akan memberi validasi bahwa Anda harus diminta untuk
mengisi inputan tersebut.
Dalam kasus ini, kembali kita menggunakan file yang telah dibuat sebelumnya,
yaitu validasi untuk form tambah komentar. disini kita akan membuatkan
validasi untuk setiap inputan kosong.. jadi intinya, kita harus menginput semua
kolom yang tersedia untuk menyimpan sebuah komentar.. caranya mudah kok..

4
Buka kembali file controller ckomentar.php, kemudian lakukan sedikit
perubahan pada function tambahdata() berikut :

// skrip sebelumnya
function tambahdata() {

$this->load->library('form_validation');
$this->form_validation->set_rules('nama', 'Nama', 'required');
$this->form_validation->set_rules('url', 'Url', 'required');
$this->form_validation->set_rules('pesan', 'Pesan', 'required');

if ($this->form_validation->run() == TRUE) {

if ($this->input->post('submit')) {
$this->load->model('mkomentar');
$this->mkomentar->tambah();
redirect('ckomentar/index');
}
}

$this->load->view('tambahkomentar');
}
// skrip sesudahnya

Penjelasan Kode :
 $this->load->library('form_validation'); , skrip untuk me-load
library form_validation, yang sudah disediakan oleh Codeigniter untuk
memvalidasi inputan.
 $this->form_validation->set_rules('nama', 'Nama',
'required'); , merupakan skrip untuk men-setting rules (aturan)
untuk proses validasi form. Pada skrip tersebut kita menggunakan
required, yang artinya validasi untuk menangkal inputan kosong, jadi
pesan akan ditampilkan jika kita tidak memasukkan data pada form
text nama, url, dan juga pesan.
Disamping required, ada beberapa macam validasi yang dapat Anda
gunakan, diantaranya : min_length, matches, max_length,
exact_length, isset, dan sebagainya.
 if ($this->form_validation->run() == TRUE) , jika proses
validasi bernilai TRUE, maka akan dilakukan sesi selanjutnya, yaitu
proses penyimpanan data.
 , skrip untuk me-load file
$this->load->view('tambahkomentar');
view bernama tambahkomentar.php guna interface untuk tambah
komentar/data.

5
Langkahb selanjutnya adalah buka file view tambahkomentar.php yang
pernah dibuat sebelumnya, kemudian tambahkan skrip seperti yang tercetak
tebal berikut :
<html>
<head>
<title> Menambah Data </title>
</head>
<body>

<h3> Tambah Data </h3>

<?php echo form_open('ckomentar/tambahdata'); ?>

<table>
<tr valign="top">
<td> Nama </td>
<td> : </td>
<td> <?php echo form_input('nama'); ?> <?php echo
form_error('nama'); ?> </td>
</tr>
<tr valign="top">
<td> Url </td>
<td> : </td>
<td> <?php echo form_input('url'); ?> <?php echo
form_error('url'); ?> </td>
</tr>
<tr valign="top">
<td> Pesan </td>
<td> : </td>
<td> <?php echo form_textarea('pesan'); ?> <?php echo
form_error('pesan'); ?> </td>
</tr>
<tr>
<td> <?php echo form_submit('submit', 'Submit',
'id="submit"'); ?> </td>
</tr>
</table>
<?php echo form_close(); ?>

</body>
</html>

Penjelasan Kode :
 <?php echo form_error('nama'); ?> , merupakan skrip untuk
memberikan informasi error untuk tiap field, yaitu nama, begitu juga
dengan url dan pesan.

Buka web browser pada url


http://localhost/codeigniter/index.php/ckomentar/tambahdata, kemudian lakukan

6
penginputan kosong (tidak diisi), dan klik tombol Submit, maka hasilnya akan
terlihat seperti pada gambar 6.3.

Gambar 6.3. Validasi Inputan Kosong


Kita juga dapat melakukan perangkuman terhadap penampilan pesannya (jika
Anda tidak menginginkan penampilan validasi pada tiap field), yaitu
menggunakan validation_errors(); caranya dengan mengubah file view
tambahkomentar.php menjadi seperti berikut :

<html>
<head>
<title> Menambah Data </title>
</head>
<body>

<h3> Tambah Data </h3>

<?php echo validation_errors(); ?>


<?php echo form_open('ckomentar/tambahdata'); ?>

<table>
<tr valign="top">
<td> Nama </td>
<td> : </td>
<td> <?php echo form_input('nama'); ?> </td>

7
</tr>
<tr valign="top">
<td> Url </td>
<td> : </td>
<td> <?php echo form_input('url'); ?> </td>
</tr>
<tr valign="top">
<td> Pesan </td>
<td> : </td>
<td> <?php echo form_textarea('pesan'); ?> </td>
</tr>
<tr>
<td> <?php echo form_submit('submit', 'Submit',
'id="submit"'); ?> </td>
</tr>
</table>
<?php echo form_close(); ?>

</body>
</html>

Dan lihat hasilnya pada gambar 6.4. dari penggunaan perintah


validation_errors() tersebut.

Gambar 6.4. Menggunakan fungsi validation_erros()

8
6.3 Teknik Scaffolding
Mungkin ini merupakan teknik yang paling jarang dibahas pada buku-buku
Codeingiter yang telah beredar dipasaran.. mungkin karena menganggap teknik
ini dipandang sebelah mata dan tidak diperlukan.. Teknik Scaffolding
merupakan suatu kemampuan untuk membuat simulasi aplikasi CRUD
(Create, Read, Update, Delete) yang dapat berfungsi untuk menganalisa
konten pada saat pertama kali ditampilkan. Atau dapat diserderhakan,
digunakan sebagai fungsi yang dapat menuntun developer dalam
menciptakan suatu aplikasi CRUD.
Untuk membuat teknik ini, setidaknya kita perlu mengkonfigurasikan kembali
file routes.php yang terdapat dalam folder system/application/config.
Oleh sebab itu, buka file tersebut dan lakukan konfigurasi pada skrip berikut :

$route['scaffolding_trigger'] = "agus";

Kata “agus” merupakan kata yang akan dipakai pada url untuk menampilkan
halaman/teknik scaffolding.
Buka kembali file controller ckomentar.php yang pernah kita buat, kemudian
tambahkan function berikut :

function ckomentar() {
parent::Controller();
$this->load->scaffolding('komentar');
}

Penjelasan Kode :
$this->load->scaffolding('komentar');, merupakan skrip untuk me-load
dan men-generate tabel komentar menjadi teknik CRUD menggunakan
scaffolding.

Cukup mudah bukan?.. tak ada 1 halaman (buku) lagi buatnya. Untuk
mengaksesnya buka web browser dengan mengetikkan url
http://localhost/codeigniter/index.php/ckomentar/agus, dan lihat hasilnya seperti
pada gambar 6.5.
Susunannya sangat rapih bukan?.. itulah kehebatan Teknik Scaffolding, bisa
membuatkan operasi sebanyak itu dalam waktu yang sangat singkat. Coba

9
bandingkan jika Anda membuatkan operasi CRUD secara manual, pasti
memakan banyak skrip dan coding.

Gambar 6.5. Hasil Teknik Scaffolding


Silahkan telusuri setiap fungsi yang tersedia.. cukup di-klik saja kok.. 

6.4 Teknik Pencarian Data


Pencarian data sangat diperlukan dalam dunia web. Karena apa? Karena
kebutuhan akan penampilan informasi yang cepat!.. dalam mencari satu data
dari sekumpulan infomasi/data yang jumlahnya ribuan, akan membuat kepala
kita keriting tujuh keliling.. benar tidak gan?  ya benar atuh.. namun kepala
kita tidak akan keriting kok kalo kita memakai cara dari penggunaan Teknik ini..
mau tahu caranya?.. yukk.. penulis akan membahas melalui 2 versi yang
berbeda, yaitu Teknik Pencarian Data Biasa (standar) dan juga Teknik
Pencarian Data berdasarkan Field tertentu.

6.4.1 Teknik Pencarian Data Biasa (Standar)


Maksud dari sub bab ini adalah teknik hanya dengan mengandalkan 1 field saja..
kita akan tetap menggunakan tabel komentar sebagai acuan.

10
Buka file model mkomentar.php dalam folder system/application/models,
dan tambahkan skrip function cari() berikut :

<?php
class Mkomentar extends Model {

// skrip function sebelumnya

function cari() {
$keyword = $this->input->post('cari');
$this->db->like('nama', $keyword);
$query = $this->db->get('komentar');
return $query->result();
}
}
?>

Penjelasan Kode :
 function cari() , skrip untuk deklarasi menciptakan function
bernama cari.
 $keyword = $this->input->post('cari'); , skrip untuk membuat
variabel $keyword yang didalamnya mengandung parameter POST
dari form. Dalam PHP Classic dapat disamakan dengan kode :

$keyword = $_POST[‘cari’];

 $this->db->like('nama', $keyword); , skrip untuk memfilter


berdasarkan data yang mengadung nilai yang dikirimkan $keyword
terhadap field nama (baca kembali sub Penanganan Database).
 $query = $this->db->get('komentar'); , untuk mengambil seluruh
data dari tabel komentar berdasarkan kondisi yang telah
difilter/ditentukan pada keyword pencarian data.
 return $query->result(); , skrip untuk mengembalikan nilai
$query.

Buka kembali file controller ckomentar.php kemudian tambahkan function


caridata() berikut :

<?php
Class Ckomentar extends Controller {

// skrip function sebelumnya

function caridata() {

11
error_reporting(0);
if ($this->input->post('submit')) {
$this->load->model('mkomentar');
$data['hasil'] = $this->mkomentar->cari();
}
$this->load->view('formcari', $data);
}
}
?>

Penjelasan Kode :
 function caridata() , deklarasi skrip untuk menciptakan function
bernama caridata.
 error_reporting(0); , skrip untuk mengabaikan seluruh error yang
terjadi pada halaman web, sehingga error tersebut tidak akan
ditampilkan.
 if ($this->input->post('submit')) { , jika submit
dikirimkan/diklik dari form, maka akan dilanjutkan sesi berikutnya.
 $this->load->model('mkomentar'); , skrip untuk me-load file
model mkomentar.
 $data['hasil'] = $this->mkomentar->cari(); , skrip untuk
memanggil function cari() yang terdapat dalam class model
mkomentar, kemudian menampungnya dalam suatu variabel bernama
$data.

 $this->load->view('formcari', $data); , merupakan skrip untuk


me-load file view formcari.php dimana didalamnya mengandung nilai
array $data yang dihasilkan dari proses pencarian.

Karena pada skrip di-load file bernama formcari, maka kita buatkan file
bernama formcari.php dan letakkan dalam folder system/application/views,
adapun isi skripnya sebagai berikut :

<html>
<head>
<title> Teknik Pencarian Data Standar </title>
</head>
<body>

<center>
<?php echo form_open('ckomentar/caridata'); ?>
Keyword : <?php echo form_input('cari'); ?>
<?php echo form_submit('submit', 'Cari', 'id="submit"'); ?>
<?php echo form_close(); ?>

12
<?php
if (empty($hasil)) {
echo "Tidak ada data";
}
else {
?>
<h3> Cari </h3>
<table border=1>
<tr>
<th> Id </th>
<th> Nama </th>
<th> Url </th>
<th> Pesan </th>
</tr>
<?php foreach($hasil as $row): ?>

<tr>
<td> <?php echo $row->id; ?> </td>
<td> <?php echo $row->nama; ?> </td>
<td> <?php echo $row->url; ?> </td>
<td> <?php echo $row->pesan; ?> </td>
</tr>
<?php endforeach; ?>
</table>
<?php
}
?>
</center>

</body>
</html>

Untuk penjelasan masing-masing kode, dapat Anda baca pada penjelasan kode
file view sebelum-sebelumnya.
Oke.. langsung saja Anda buka web browser dengan mengetikkan url
http://localhost/codeigniter/index.php/ckomentar/caridata, maka hasilnya akan
terlihat seperti pada gambar 6.6. lalu silahkan isikan keyword yang ingin dicari
kemudian klik tombol Cari, maka hasilnya akan terlihat pada gambar 6.7.

13
Gambar 6.6. Form Caridata

Gambar 6.7. Hasil skrip caridata

6.4.2 Teknik Pencarian Data berdasarkan Field


Tertentu
Ada kalanya pencarian data hanya mengandalkan 1 field saja tidak cukup.
Karena yang namanya manusia pasti lupa/tidak ingat bahkan tidak tahu keyword
pencarian dapat terjadi. Oleh sebab itu, kita gunakan alternatif lainnya, agar
apabila si pengguna lupa nama pencarian, dapat menggunakan keyword yang
lainnya berdasarkan field yang dipilih.
Cara ini sangat jitu sekali pada pencarian Buku / Produk lainnya. Penulis ambil
pada contoh Buku.. Buku itu kan banyak sekali, penulis jamin dan yakin 100%,
Anda tidak akan bisa mengingat seluruh judul buku yang jumlahnya ratusan
juta/milyar bukan?.. tapi Anda pasti bisa mencari judul yang Anda inginkan
dengan melalui pencarian berdasarkan Nomor ISBN..
Sama, kita akan membuat Teknik Pencarian seperti itu, namun disini kita akan
tetap menggunakan tabel komentar, hanya saja kita tambahkan option fieldnya.
Buka kembali file model mkomentar.php, lalu tambahkan dan ubah skripnya
menjadi seperti skrip yang tercetak tebal :

function cari() {
$field = $this->input->post('field');
$keyword = $this->input->post('cari');
$this->db->like($field, $keyword);
$query = $this->db->get('komentar');

14
return $query->result();
}

Intinya nih, pada skrip tersebut kita membuat suatu variabel bernama $field,
yang merupakan penampung parameter POST untuk kategori field.
Sedangkan pada skrip $this->db->like($field, $keyword); , kita ubah yang
sebelumnya field “nama” menjadi $field, sehingga metode pencariannya dapat
bersifat dinamis sesuai field pencarian yang dipilih.
Buka file view formcari.php dan lakukan perubahan seperti skrip berikut :

<center>

<?php echo form_open('ckomentar/caridata'); ?>


Cari berdasarkan :
<?php
$options = array(
'id' => 'id',
'nama' => 'nama',
'url' => 'url',
'pesan' => 'pesan'
);
echo form_dropdown('field', $options);
echo form_input('cari');
echo form_submit('submit', 'Cari', 'id="submit"');
echo form_close();
?>
// skrip selanjutnya

Lakukan refresh/reload pada web browser. Dan lihatlah kali ini tampilannya
sudah berubah. Silahkan lakukan pencarian sesuai dengan field yang Anda
inginkan. Lihat gambar 6.8.

15
Gambar 6.8. Hasil skrip caridata berdasarkan field tertentu

6.5 Upload File


Upload file atau lebih kental dalam bahasa Indonesianya disebut Unggah Data,
merupakan proses pemindahan data dari komputer satu ke komputer lain.
Data disini dapat berupa macam-macam, misalnya Gambar, Video, PDF,
Musik, Dokumen, dan lain sebagainya.
Disini kita akan mencoba untuk mempraktekkan cara untuk membuatkan proses
upload file/data, dalam studi kasus meng-upload file kemudian menyusunnya
dalam bentuk suatu Web Gallery. Yuk ikuti langkah-langkahnya.. 
Buatlah satu buah tabel baru dalam database latihanci. Beri nama tabel tersebut
dengan nama tabel upload dan isikan dengan 3 field. Adapun spesifikasi field-
nya sebagai berikut :
Field Type Length PrimaryKey Autoincreamen
id INT 11 * *t
nama Varchar 50
gambar TEXT

Langkah pertama yang harus kita tempuh adalah membuka file autoload.php
yang terdapat dalam folder system/application/config. Kemudian tambahkan
helper file seperti berikut :

$autoload['helper'] = array('url', 'html', 'form', 'file');

Membuat File Model :


Seperti yang sering penulis katakana, bahwa langkah pertama dalam pengerjaan
bermula dari membuat file model.
Buatlah file model dengan nama mupload.php dan letakkan dalam folder
system/application/models. Adapun skripnya sebagai berikut :

1. <?php
2. class Mupload extends Model {
3. var $gallerypath;
4. var $gallery_path_url;
5.
6. function Mupload(){
7. parent::Model();

16
8. $this->gallerypath = realpath(APPPATH .
'../gambar');
9. $this->gallery_path_url =
base_url().'system/gambar/';
10. }
11.
12. function do_upload() {
13. $konfigurasi = array(
14. 'allowed_types' =>'jpg|jpeg|gif|png|bmp',
15. 'upload_path' => $this->gallerypath
16. );
17. $this->load->library('upload', $konfigurasi);
18. $this->upload->do_upload();
19. $datafile = $this->upload->data();
20.
21. $konfigurasi = array(
22. 'source_image' => $datafile['full_path'],
23. 'new_image' => $this->gallerypath .
'/thumbnails',
24. 'maintain_ration' => true,
25. 'width' => 160,
26. 'height' =>120
27. );
28.
29. $this->load->library('image_lib', $konfigurasi);
30. $this->image_lib->resize();
31. $nama = $this->input->post('nama');
32. $userfile = $_FILES['userfile']['name'];
33. $data = array(
34. 'nama' => $nama,
35. 'gambar' => $userfile
36. );
37. $this->db->insert('upload', $data);
38. }
39.
40. function ambil() {
41. $files = scandir($this->gallerypath);
42. $files = array_diff($files,
array('.','..','thumbnails'));
43.
44. $ambil = $this->db->get('upload');
45. if ($ambil->num_rows() > 0) {
46. foreach ($ambil->result() as $data) {
47. $hasil[] = $data;
48. }
49. return $hasil;
50. }
51. }
52. }
53. ?>

Penjelasan Kode :
 Pada baris ke-2, skrip untuk deklarasi menciptakan class model
Mupload.

17
 Pada baris ke-3 {var $gallerypath;}, merupakan skrip untuk
membuat variabel $gallerypath yang berguna untuk menampung
alamat folder gambar yang berada di root proyek.
 Pada baris ke-5, sama halnya dengan baris ke-4.
 Pada baris ke-8, skrip untuk men-set $gallerypath yang didefinisikan
untuk alamat folder gambar.
 Pada baris ke-9, sama halnya seperti pada baris 8, hanya saja kita set
sebagai url gambar.
 Pada baris ke-12, skrip deklarasi untuk membuat function do_upload
yang digunakan untuk fungsi upload file.
 Pada baris ke-13 s/d 16, skrip untuk mengatur bahwa hanya file
gambar berformat jpg|jpeg|gif|png|bmp yang hanya dijinkan upload.
 Pada baris ke-17, kesemua aturan tersebut dimasukkan kedalam library
upload yang digunakan untuk meng-upload file ke website.
 Pada baris ke-18, merupakan proses eksekusi upload.
 Pada baris ke-19, mengambil data gambar yang berhasil diupload,
kemudian dimasukkan ke dalam variabel $datafile.
 Pada baris 21 s/d 27, skrip untuk men-set aturan-aturan gambar dalam
thumbnail.
 Pada baris ke-29, skrip untuk me-load library image_lib yang
didalamnya telah mengandung konfigurasi yang telah kita tentukan.
 Pada baris ke-30, proses eksekusi resize gambar.
 Pada baris ke-31 s/d 38, proses penyimpanan data ke dalam tabel
upload, dimana datanya didapatkan dari form yang dikirimkan.
 Pada baris ke-40 s/d 51, merupakan skrip untuk proses menampilkan
seluruh data ke halaman web.

Membuat File Controller :


Tahap berikutnya adalah membuat file controller bernama cupload.php dan
simpan dalam folder system/application/controllers, kemudian tuliskan skrip
berikut :

1. <?php
2. class Cupload extends Controller {

18
3.
4. function index() {
5. $this->load->model('mupload');
6. if ($this->input->post('upload')) {
7.
8.
9. $this->mupload->do_upload();
10. }
11. $data['hasil'] = $this->mupload->ambil();
12. $this->load->view('vupload', $data);
13. }
14. }
15. ?>

Penjelasan Kode :
 Pada baris ke-2, merupakan skrip deklarasi untuk membuat class
controller Cupload.
 Pada baris ke-4, skrip untuk menciptakan function index. Function ini
yang akan diakses pertama kali pada saat pemanggilan class Cupload.
 Pada baris ke-5, skrip untuk me-load file model bernama
mupload.php.
 Pada baris ke-6, jika id Upload dikirimkan dari form, maka akan
dilakukan sesi selanjutnya.
 Pada baris ke-9, skrip untuk memanggil function do_upload() yang
terdapat dalam class model mupload. Disinilah proses upload dan
penyimpanan terjadi.
 Pada baris ke-11, memanggil function ambil dalam class model
mupload, dimana function tersebut mengandung seluruh data yang
difilter. Nilai data ini dimasukkan dalam variabel $data.
 Pada baris ke-12, skrip untuk me-load file view bernama vupload.php
dimana didalamnya telah terkandung $data yang berisi record yang
siap untuk ditampilkan pada file view tersebut.

Membuat File View :


Akhirnya kita sampai kepada tahap view. Buatlah file view dengan nama
vupload.php dan letakkan dalam folder system/application/views, kemudian
isikan file dengan skrip berikut :

<html>
<head>
<title> Teknik Upload </title>

19
<link rel="stylesheet" href="<?php echo
base_url();?>system/css/gallery.css" type="text/css">
</head>

<body>
<p> &nbsp; </p>
<div align="center">

<ul class="gallery">
<h2> Web Gallery </h2>
<?php if (isset($hasil) && count($hasil)):
foreach($hasil as $row):
?>
<li> <a href="<?php echo base_url();?>system/gambar/<?php echo
$row->gambar;?>"/>
<em> <?php echo $row->nama; ?> </em>
<img src="<?php echo base_url();?>system/gambar/thumbnails/<?php
echo $row->gambar;?>"/></a>
</li>
<?php endforeach;?>
<?php else :?>

<h4> Upload File </h4>


<?php endif; ?>

<?php
echo form_open_multipart('cupload');
echo form_input('nama');
echo form_upload('userfile');
echo form_submit('upload','Upload');
echo form_close();
?>
</ul></div>
</body>
</div>
</html>

Pada skrip view tersebut telah terkandung sebuah file CSS. Agar tampilannya
lebih menarik.. file CSSnya bernama gallery.css. agar lebih ringkas, langsung
saja kita buat file CSS-nya.
1. Buat folder baru bernama css didalam folder system.(untuk
menyimpan file CSS)
2. Buat folder baru bernama gambar didalam folder system (untuk
menyimpan gambar yang telah diupload).
3. Buat folder baru bernama thumbnails didalam folder gambar yang
telah dibuat tersebut (untuk menyimpan gambar hasil resize).
Dari hasil pembuatan folder tersebut dapat dilihat struktur nya seperti pada
gambar 6.9.

20
Gambar 6.9. Folder CSS dan Gambar
Buat file CSS bernama gallery.css dan simpan dalam folder css yang telah
dibuat, isi file nya sebagai berikut :

body {
margin: 0 auto;
padding: 0;
width: 607px;
font: 70%/140% Arial, Helvetica, sans-serif;
}

img {
border: none;
}

.gallery {
list-style: none;
margin: 0;
padding: 0;
}

.gallery li {
padding: 10px;
margin: 0;
float: left;
position: relative;

21
width: 180px;
height: 130px;
}

.gallery li:hover img {


border-color: #000;
}

.gallery img {
background: #fff;
border: solid 1px #888;
padding: 5px;
}

.gallery em {
background: #fff url(images/grey-gradient.gif) repeat-y;
color: #000;
font-style: normal;
padding: 2px 10px;
display: block;
position: absolute;
top: 110px;
left: 9px;
border: 1px solid #999;
border-left-color: #888;
}

.gallery a {
text-decoration: none;
}

.gallery a:hover em {
background: #ffdb01 url(images/orange-gradient.gif)
repeat-y;
border-color: #c25b08;
}

Akhirnya selesai juga gan.. banyak juga ya skripnya.. tapi jangan sampai salah
ketik ya..  jika tak ingin direpotkan, hasil pembuatan upload file telah penulis
sertakan kok pada CD terlampir..
Buka web browser Anda dengan mengetikkan url
http://localhost/codeigniter/index.php/cupload, maka hasilnya akan tampil
seperti pada gambar 6.10. Silahkan lakuka upload File.
Jika file telah Anda upload (minimal 6), maka hasil akhirnya akan terlihat
seperti pada gambar 6.11.

22
Gambar 6.10. Upload file

Gambar 6.11. Hasil Web Gallery

23
6.6 Captcha
Captcha merupakan salah satu dari penanganan security untuk mencegah
apakah inputan data tersebut dilakukan oleh manusia atau program. Kode
Captcha ditandai oleh adanya permintaan memasukkan kode gambar acak ke
dalam suatu inputan, dan biasanya ini paling sering didapati pada suatu form
pendaftaran, komentar, maupun toko online.
Codeigniter, memiliki pengaturan Captcha bawaan yang dapat kita gunakan.
Untuk membuatkan teknik ini, terlebih dahulu kita buat sebuah tabel bernama
captcha didalam database latihanci. Isikan dengan jumlah field 4, berikut
spesifikasinya :
Field Type Length PrimaryKey Autoincreamen
captcha_id INT 11 * *t
captcha_time INT 10
ip_address Varchar 16
word Varchar 20

Buatlah file model dengan nama mcaptcha.php dan simpan dalam folder
system/application/models. Adapun skripnya sebagai berikut :

1. <?php
2. class Mcaptcha extends Model {
3.
4. function createcaptcha() {
5. $this->load->plugin('captcha');
6. $vals = array(
7. 'img_path' => './captcha/',
8. 'img_url' => base_url().'captcha/'
9. );
10. $cap = create_captcha($vals);
11. $data = array(
12. 'captcha_id' => NULL,
13. 'captcha_time' => $cap['time'],
14. 'ip_address' => $this->input-> ip_address(),
15. 'word' => $cap['word']
16. );
17. $query = $this->db->insert_string('captcha',
$data);
18. $this->db->query($query);
19. return $cap;
20. }
21. }
22. ?>

Penjelasan Kode :

24
 Pada baris ke-2, merupakan skrip untuk deklarasi menciptakan class
model Mcaptcha.
 Pada baris ke-4 {function createcaptcha()}, merupakan perintah
untuk membuat function createcaptcha, function ini digunakan
untuk menciptakan kode-kode captcha.
 Pada baris ke-5, untuk me-load plugin captcha.
 Pada baris ke-7 {'img_path' => './captcha/'}, kode ini
digunakan untuk menuju ke folder captcha.
 Pada baris ke-8 {'img_url' => base_url().'captcha/'}, sama
halnya pada baris ke-7.
 Pada baris ke-10 {$cap = create_captcha($vals);}, untuk men-
create kode captcha dan akan disimpan dalam folder captcha yang
telah ditentukan.
 Pada baris ke-11 s/d 16, skrip untuk membuat variabel array bernama
$data, dimana didalamnya mengandung nilai yang siap untuk
disimpan dalam database.
 Pada baris ke-17 s/d 18, proses penyimpanan ke dalam tabel captcha
berdasarkan data yang telah mengandung nilai.
 Pada baris ke-19, untuk mengembalikan nilai variabel $cap.

Buatlah file controller dengan nama ccaptcha.php dan simpan dalam folder
system/application/controllers. Kemudian isikan skrip berikut :

1. <?php
2. class Ccaptcha extends Controller {
3.
4. function buatcaptcha() {
5. $this->load->model('mcaptcha');
6. $data['captcha'] = $this->mcaptcha-
>createcaptcha();
7. $this->load->view('vcaptcha', $data);
8. }
9. }
10. ?>

Penjelasan Kode :
 Pada baris ke-2, merupakan deklarasi untuk menciptakan class
controller Ccaptcha.

25
 Pada baris ke-4, skrip untuk membuat function buatcaptcha, yang
digunakan untuk menampilkan kode captcha pada halaman web.
 Pada baris ke-5, skrip untuk me-load file model bernama
mcaptcha.php.
 Pada baris ke-6, skrip untuk memanggil/mengakses function
createcaptcha dalam class model mcaptcha, kemudian dimasukkan
dalam variabel $data.
 Pada baris ke-7, skrip untuk me-load file view bernama vcaptcha.php
dimana didalamnya mengandung $data, yang berisi nilai-nilai captcha.

Sebagai user interface pada halaman web, kita buat file view bernama
vcaptcha.php sesuai dengan file yang di-load pada skrip controller. Simpan file
vcaptcha.php tersebut dalam folder system/application/views. Adapun
skripnya sebagai berikut :

<?php
echo '<form action="validasi" method="POST">';
echo $captcha['image'].'<br><br>';
?>
Silahkan masukkan kode sesuai kode diatas : <br>
<?php
echo '<input type="text" size="22" name="captcha">';
echo '<input type="submit" value="Kirim">';
echo '</form>';
?>

Cukup simple bukan?.. $capctha[‘image’] merupakan skrip untuk


menampilkan kode gambar captcha.
Pada tag form, terlihat actionnya diarahkan kepada validasi. Untuk itu, buka
kembali file controller ccaptcha.php lalu tambahkan function validasi berikut :

<?php
class Ccaptcha extends Controller {

function buatcaptcha() {
$this->load->model('mcaptcha');
$data['captcha'] = $this->mcaptcha->createcaptcha();
$this->load->view('vcaptcha', $data);
}

function validasi() {
$captcha = $_POST['captcha'];

if($captcha!=""){
$this->load->model('mcaptcha');

26
$benar = $this->mcaptcha-
>captchabenar($_POST['captcha']);
if($benar){
$data['pesan'] = "Sukses! Captcha Benar.";
}
else {
$data['pesan'] = 'Gagal! Captcha Salah';
}
}
else {
$data['pesan'] = 'Captcha belum diisi!';
}

$this->load->view('hasil',$data);
}
}
?>

Penjelasan Kode :
 function validasi() , merupakan skrip untuk membuat function
validasi.
 $captcha = $_POST['captcha']; , membuat variabel $captcha
dimana didalamnya mengandung parameter POST dari form.
 if($captcha!=""){ , jika kode captcha yang dimasukkan tidak
kosong, maka akan dilakukan sesi selanjutnya.
 $this->load->model('mcaptcha'); , skrip untuk me-load file model
bernama mcaptcha.php.
 $benar = $this->mcaptcha->captchabenar($_POST['captcha']);
, skrip untuk mengirimkan parameter $_POST['captcha'] kepada
function captchabenar dalam class model mcaptcha. Hasil dari
pengiriman tersebut kemudian ditampung dalam variabel $benar.
 if($benar){ , jika $benar valid maka akan dilakukan sesi selanjutnya.

 $data['pesan'] = "Sukses! Captcha Benar."; , untuk menampung


kalimat “Sukses! Captcha benar.” Bila kode yang dimasukkan valid.
 $this->load->view('hasil',$data); , untuk me-load file view
bernama hasil.php dimana didalam mengandung $data, yaitu berupa
pesan-pesan.

Pada skrip tersebut, terlihat adanya permintaan pemanggilan function


captchabenar dalam class model mcaptcha (padahal kita belum membuat

27
function tersebut).. oleh karena itu, buka kembali file model mcaptcha.php
kemudian tambahkan function captchabenar berikut :

function captchabenar($captcha) {
$expiration = time()-7200;
$this->db->query("DELETE FROM captcha WHERE captcha_time <
".$expiration);
$sql = "SELECT COUNT(*) AS count FROM captcha WHERE word =
? AND ip_address = ? AND captcha_time > ?";
$binds = array($captcha, $this->input->ip_address(),
$expiration);
$query = $this->db->query($sql, $binds);
$row = $query->row();

if ($row->count == 0) {
return false;
}
return true;
}

Dan langkah paling terkahir juga kita buat file view bernama hasil.php dan
letakkan dalam folder system/application/views. Kemudian tuliskan skrip
berikut:

<?php
echo $pesan;
?>

Oh iya ada yang kelupaan, jangan lupa juga ya buat folder baru dengan nama
captcha didalam project Anda yang digunakan untuk menampung file-file
gambar dari kode captcha tersebut. lihat gambar 6.12.

Gambar 6.12. Buat folder captcha

28
Untuk melihat hasilnya, silahkan buka web browser Anda dengan mengetikkan
url http://localhost/codeigniter/index.php/ccaptcha/buatcaptcha, akan
menampilkan hasil seperti pada gambar 6.13. kemudian tuliskan kode seperti
yang tertampil pada halaman web. Setelah di-klik tombol Kirim maka akan
menampilkan pesan seperti pada gambar 6.14.

Gambar 6.13. captcha

Gambar 6.14. penulisan kode captcha benar

6.7 Membuat File PDF


Penyajian suatu laporan harus familiar bagi siapa saja yang menggunakannya..
ga perlu ribet-ribet, yang penting rapih dan mudah dibaca.. untuk itulah disini
penulis akan membeberkan teknik membuat File PDF menggunakan
Codeigniter.. terkadang banyak pemula yang pusing untuk urusan ini. Tapi
tenang saja.. jika Anda mengikuti langkah demi langkah seperti yang
diinstruksikan penulis.. pasti jalan kok.. dengan catatan, jangan ada yang salah
ketik ya..

29
Yukk tancap..
Banyak plugin-plugin library yang tersebar dan tersedia, seperti library PDF,
Anda pasti pernah mendengarkan istilah, seperti ezPdf, FPDF, dompdf, dan
sebagainya. Itu merupakan bantuan pihak ke-tiga untuk diintegrasikan ke dalam
kode PHP apabila Anda menginginkan suatu laporan dalam bentuk PDF.
Namun dari banyaknya library yang tersedia, pilihan penulis jatuh pada library
ezPdf. Mengapa?.. karena menurut penulis, library ini, merupakan yang paling
mudah untuk dipelajari dan cukup ringan juga..
Untuk mendapatkan library ezPdf, dapat Anda download untuk mendapatkan
versi terbaru pada url http://www.ros.co.nz/pdf. (untuk memudahkan Anda,
penulis telah menyertakannya pada CD terlampir, yaitu folder library ezPdf.
Sebenarnya jika Anda menggunakan server Xampp.. library ini sudah tersedia
kok, dan dapat Anda temukan pada folder xampp/php/PEAR.
Salah satu syarat untuk menjalankan file PDF, tentu saja computer Anda harus
terinstal software pembaca PDF, misalnya Adobe Acrobat.
Pada CD terlampir (Folder library ezPdf), Anda akan menemukan 2 file
(class.pdf.php dan cezpdf.php) dan 1 folder (fonts).
1. Copykan folder fonts tersebut ke dalam folder proyek Anda. lihat gambar
6.15.

Gambar 6.15. folder fonts ditempatkan

30
2. Copykan file class.pdf.php dan cezpdf.php ke dalam folder
system/application/libraries. Lihat gambar 6.16.

Gambar 6.16. file cezpdf dan class.pdf ditempatkan


3. Buka file cezpdf.php kemudian ubah sedikit skrip berikut :
Semula :

include_once('class.pdf.php');

Ubah menjadi :

include_once(APPPATH . 'libraries/class.pdf.php');

4. Buatlah file controller dengan nama conpdf.php dan simpan dalam folder
system/application/controllers. Adapun skripnya sebagai berikut :

<?php
Class Conpdf extends Controller {

function index(){
$this->load->library('cezpdf');
$this->cezpdf->addText(250, 820, 16,'<b> Daftar Alumni
</b>');
$data = array(
array(
'No' => 1,
'Nim' => '2007101002',
'Nama' => 'Agus Saputra, A.Md.',
'JK' => 'L',

31
'Prodi' => 'D3',
'Jurusan' => 'Manajemen Informatika'),
array(
'No' => 2,
'Nim' => '2007101015',
'Nama' => 'Feni Agustin, A.Md.',
'JK' => 'P',
'Prodi' => 'D3',
'Jurusan' => 'Manajemen Informatika'),
array(
'No' => 3,
'Nim' => '2007101016',
'Nama' => 'Fredi Sutejo, A.Md.',
'JK' => 'L',
'Prodi' => 'D3',
'Jurusan' => 'Manajemen Informatika'),
array(
'No' => 4,
'Nim' => '2007101020',
'Nama' => 'Helmi Dita Gumilar, A.Md.',
'JK' => 'L',
'Prodi' => 'D3',
'Jurusan' => 'Manajemen Informatika'),
array(
'No'=> 5,
'Nim' => '2007101021',
'Nama' => 'Nathanael Kurniawan, S.Kom.',
'JK' => 'L',
'Prodi' => 'S1',
'Jurusan' => 'Sistem Informasi')
);
$this->cezpdf->ezTable($data);
$this->cezpdf->ezStartPageNumbers(320, 15, 8);
$this->cezpdf->ezStream();
}
}
?>

Penjelasan Kode :
 Class Conpdf extends Controller , skrip deklarasi untuk
menciptakan class controller Conpdf.
 function index() , perintah untuk membuat function index.

 $this->load->library('cezpdf'); , skrip untuk me-load library


cezpdf.php.
 $this->cezpdf->addText(250, 820, 16,'<b> Daftar Alumni
</b>'); , sktip untuk menambahkan teks pada dokumen PDF, dengan
margin sisi yang telah ditentukan dan berhuruf cetak tebal <b> dengan
kalimat Daftar Alumni.

32
 Pembuka $data hingga penutup. Skrip untuk membuat variabel $data
dimana didalamnya mengandung record-record yang siap untuk
ditampilkan pada dokumen PDF.
 $this->cezpdf->ezTable($data); , untuk men-generate $data ke
dalam bentuk tabel.
 $this->cezpdf->ezStartPageNumbers(320, 15, 8); , skrip untuk
memberi penomoran halaman.

Buka web browser Anda dengan mengetikkan url


http://localhost/codeigniter/index.php/conpdf. maka akan terbuka sebuah
dokumen pdf seperti pada gambar 6.17.

Gambar 6.17. Hasil skrip conpdf.php

6.8 Force Download


Berbeda dengan teknik Upload yang pernah kita kerjakan, Forece Download
merupakan suatu proses pemindahan / pengunggahan dari komputer lain ke
komputer milik kita sendiri.
Disini penulis, tetap menggunakan file controller cupload.php yang pernah kita
buat sebelumnya untuk membuat download. Buka file tersebut, kemudian
tambahkan skrip function download berikut :

function download($gambar){
$this->load->helper('download');
$data = file_get_contents("./system/gambar/".$gambar);

33
$nama = 'images1.jpg';
force_download($nama, $data);
}

Penjelasan Kode :
 function download($gambar) , skrip untuk membuat function
download dimana terkandung penangkapan variabel bernama $gambar
yang ditangkap dari halaman web.
 $this->load->helper('download'); , skrip me-load helper
download.
 $data = file_get_contents("./system/gambar/".$gambar); ,
skrip untuk mendapatkan file gambar sesuai dengan nama gambar
yang ditangkap.
 $nama = 'images1.jpg'; , membuat variabel $nama dimana
mengandung nama images1.jpg.
 force_download($nama, $data); , eksekusi download, dimana nama
file telah direname menjadi kalimat yang terkandung dalam $nama.

Buka file view bernama vupload.php dan ubah pada skrip yang tercetak tebal
berikut :

<li> <a href="cupload/download/<?php echo $row->gambar;?>"/>


<em> <?php echo $row->nama; ?> </em>
<img src="<?php echo base_url();?>system/gambar/thumbnails/<?php
echo $row->gambar;?>"/></a>
</li>

Buka web browser Anda dan ketikkan url


http://localhost/codeigniter/index.php/cupload. kemudian klik salah satu gambar
yang tersedia, maka hasilnya akan seperti pada gambar 6.18.

34
Gambar 6.18. Hasil force download

35

Anda mungkin juga menyukai