BAB I INSTALASI DAN DASAR PHP

A.

Konsep Apache, PHP, MySQL 1. Apache Apache sudah berkembang sejak versi pertamanya.Untuk pembuatan aplikasi ini, Saya menggunakanApache versi 2.5.8.Apache bersifat open source, artinya setiap orang boleh menggunakannya, mengambil dan bahkan mengubah kode programnya. Tugas utama apache adalah menghasilkan halaman web yang benar kepada peminta, berdasarkan kode PHP yang dituliskan oleh pembuat halaman web.Jika diperlukan juga berdasarkan kode PHP yang dituliskan, maka dapat saja suatu database diakses terlebih dahulu (misalnya dalam MySQL) untuk mendukung halaman web yang dihasilkan. 2. PHP Bahasa pemrograman PHP (PHP Hypertext Preprocessor) adalah bahasa pemrograman yang bekerja dalam sebuah webserver.Script-script PHP dibuat harus tersimpan dalam sebuah server dan dieksekusi atau diproses dalam server tersebut. Dengan menggunakan PHP, sebuah website akan lebih interaktif dan dinamis. Berikut beberapa keunggulan yang dimiliki program PHP, sebagai berikut: PHP bersifat free atau gratis. Beberapa server seperti Apache, Microsoft IIS, PWS, AOLserver, phttpd, fhttpd, dan Xitami mampu menjalankan PHP. Tingkat akses PHP lebih cepat serta memiliki tingkat keamanan yang tinggi. Beberapa database yang sudah ada, baik yang bersifat free/gratis ataupun komersial sangat mendukung akses PHP, di antaranya MySQL, PosgreSQL, mSQL, Informix, dan MicrosoftSQL server. PHP mampu berjalan di Linux sebagai platform system operasi utama bagi PHP, tetapi dapat juga berjalan di FreeBSD, Unix, Solaris, Windows, dan yang lainnya. 3. MySQL Penyimpanan data yang fleksibe dan cepat aksesnya sangat dibutuhkan dalam sebuah website yang interaktif dan dinamis.Database sendiri berfungsi sebagai penampung data yang Anda inputkan melalui form website.Selain itu juga di balik dengan menampilkan data yang tersimpan dalam database ke dalam halaman website. Jenis database yang sangat popular adan digunakan pada banyak website di internet sebagai bank data adalah MySQL. MySQL menggunakan SQL dan bersifat gratis, selain itu MySQL dapat berjalan di berbagai platform, antara lain Linux, Windows, dan sebagainya. Sebagai contoh, jika Anda memberikan fasilitas kepada pengunjung website untuk mengisi sebiah form buku tamu, maka Anda dapat menampung data dalam

buku tamu tersebut dalam sebuah database. Contoh lain adalah jika Anda ingin menampilkan artikel yang dinamis dan mudah untuk di update, Anda dapat menyimpan artikel dalam sebuah database dan menampilkannya dalam halaman web. MySQL dapat digunakan untuk membuat dan mengola database beserta isinya.Kita dapat memanfaatkan MySQL untuk menambahkan, mengubah dan menghapus data yang berada dalam database.MySQL merupakan sisitem manajemen database yang bersifat at relational. Artinya data-data yang dikelola dalam database akan diletakkan pada beberapa tabel yang terpisah sehingga manipulasi data akan menjadi jauh lebih cepat. MySQL dapat digunakan untuk mengelola database mulai dari yang kecil sampai dengan yang sangat besar.MySQL juga dapat menjalankan perintahperintah Structured Query Language (SQL) untuk mengelola database-database yang ada di dalamnya.Hingga kini, MySQL sudah berkembang hingga versi 5. MySQL 5 sudah mendukung trigger untuk memudahkan pengelolaan tabel dalam database. B. CodeIgniter dan jQuery 1. CodeIgniter CodeIgniter (selanjutnya disebut CI) adalah sebuah framework yang digunakan untuk membuat sebuah aplikasi berbasis web yang disusun dengan menggunakan bahasa PHP.Di dalam CI ini terdapat beberapa macam kelas yang berbentuk library dan helper yang berfungsi untuk membantu pemrograman dalam mengembangkan aplikasinya.CI sangat mudah dipelajari oleh seorang pemrogram web pemula sekalipun.Alasannya, karena CI mempunyai file dokumentasi yang sangat memadai untuk menjelaskan setiap fungsi yang ada pada library dan helper. File dokumentasi ini disertakan secara langsung pada saat Anda mengunduh paket framework CI. Seperti halnya PHP, CI juga bersifat free opensource software di mana setiap orang berhak menggunakannya tanpa harus dikenai biaya lisensi. Saat ini, banyak sekali pegembang yang telah menggunakan CI sebagai framework untuk menyusun aplikasi berbasis web.Terdapat banyak forum serta milis (mailing list) yang membahas penggunaan CI dalam berbagai macam kasus pemrograman.Anda juga bisa mengunduh dan mempelajari plug-in yang telah dibuat oleh para pengembang di seluruh dunia melalui WIKI yang disediakan oleh para pengembang CI itu sendiri. Kelebihan framework CodeIgniter, yaitu: a. Berukuran kecil b. Sangat cepat c. Sederhana (simple) d. Bisa langsung digunakan e. Bisa dikombinasikan dengan beberapa aplikasi dengan cara yang sangat mudah. f. Kode program rapi 2. jQuery jQuery adalah javascript library, jQuery mempunyai semboyan write less, do more. jQuerydirancang untuk memperingkas kode-kode javascript.

JQuery adalah javascript library yang cepat dan ringan untuk menangani dokumen HTML, menangani event, membuat animasi dan interakasi ajax. JQuery dirancang untuk mengubah cara anda menulis javascript. Sebelum anda memulai mempelajari jQuery, anda harus mempunyai pengetahuan dasar mengenai HTML, CSS dan Javascript.Library jQuery mempunyai kemampuan: Kemudahan mengakses elemen-elemen HTML. Memanipulasi elemen HTML. Memanipulasi CSS. Penanganan event HTML. Efek-efek javascript dan animasi. Modifikasi HTML DOM. AJAX. Menyederhanakan kode javascript lainnya. Kemudian untuk memulai mempelajari jQuery, anda harus mendownload jquery.js dari situs http://www.jquery.com. Setiap anda menulis kode javascript dengan menggunakan jquery, jangan lupa untuk memasukan file jquery.js kedalam kode javascript anda, seperti berikut:
<script type="text/javascript" src="jquery.js"></script>

C.

Tool yang Dipakai 1. XAMPP Kepanjangan dari XAMPP yaiut Apache, PHP, MySQL dan phpMyAdmin. XAMPP merupakan tool yang menyediakan paket perangkat lunak ke dalam satu buah paket.Dengan menginstall XAMPP maka tidak perlu lagi melakukan instalasi dan konfigurasi web server Apache (v2.0.54), PHP (v5.0.4) dan MySQL (v4.1.12) secara manual. XAMPP akan menginstalasi dan mengkonfigurasikannya secara otomatisuntuk anda.

Gambar 1.Logo XAMPP

Anda bisa mendapatkan file XAMPP di http://apachefriend.org. Anda dapat memilih berbagai versi XAMPP sesuai kebutuhan Anda, tentu disesuaikan dengan OS yang Anda gunakan. 2. Notepad ++ Notepad++ adalah standar programmer editor. Sebenarnya selain notepad++, juga masih banyak editor yang lain. Anda boleh saja menggunakan sembarang editor, namun disarankan editor yang dipakai adalah editor yang mempunyai 3 fitur utama yaitu Syntax Higlighting, Code Folding dan Line

Numbering. Notepad++ dipakai untuk editing file secara cepat (missal, Bugfix) atau mengedit satu dua baris yang error.

Gambar 2.Logo Notepad++

3.

Aptana IDE Aptana IDE adalah IDE untuk membuat program berbasis Web.anda boleh saja memakai DreamWeaver , namun saya sendiri memilih Aptana IDE mengingat IDE ini besifat open source, mampu bejalan di banyak Platform (Windows, Linux, Mac) dan GRATIS. Namun hal yang paling penting dengan adanya ide adalah adanya project manajement.

Gambar 3.Logo Aptana IDE

Kelebihan utama dari Aptana di banding dreamweaver atau editor notepad++ adalah kemampuannya untuk memformat code sekaligus mengecek kesalahan syntax langsung di editor. 4. Google Chrome Google chrome di pakai untuk mentesting website. Boleh saja menggunakan browser lain, justru yang disarankan, kita mencoba di setiap browser untuk memastikan tampilan dan aplikasi yang kita buat berjalan dengan benar. Namun Google Chrome mempunyai kelebihan karena sederhana dan adanya fitur Developer tool yang canggih( penjelasan lebih lanjut di praktik). PHPMyAdmin Pengelolaan database dengan MYSQL harus dilakukan dengan mengetikkan baris-baris perintah yang sesuai (command line) untuk setiap maksud tertentu.Jika anda ingin membuat database, ketikkan baris perintah yang sesuai untuk membuat database.Jika kita ingin menghapus tabel, ketikkan baris perintah yang sesuai untuk menghapus tabel.Hal tersebut tentu cukup menyulitkan karena kita harus hafal dan mengetikkan perintahnya satu persatu. Banyak sekali perangkat lunak yang dapat dimanfaatkan untuk mengelola data base dalam MySQL, salah satunya adalah phpMyAdmin. Dengan phpMyAdmin kita dapat membuat tabel, mengisi data dan lain-lain dengan mudah

5.

tanpa harus hafal perintahnya. Untuk mengaktifkan phpMyAdmin langkahlangkahnya adalah : yang pertama setelah XAMP kita terinstall, kita harus mengaktifkan web server Apache dan MySQL dari control panel XAMPP. Yang kedua, jalankan browser kesayangan Anda (IE, Mozilla Firefox atau Opera) lalu ketikkan alamat web berikut : http://localhost/phpmyadmin/ pada address bar lalu tekan Enter. Langkah ketiga apabila telah nampak interface (tampilan antar muka) phpMyAdmin anda bisa memulainya dengan mengetikkan nama database, nama tabel dan seterusnya. D. Instalasi Paket XAMPP dan CodeIginter 1. Instalasi Paket XAMPP Untuk membuat sebuah aplikasi berbasis web dengan menggunakan bahasa PHP, tentu saja diperlukan sebuah server web dan interpreter PHP. Server tidak harus sebuah komputer khusus dengan kinerja tinggi dan berukuran sangat besar, tetapi bisa dibuat dari PC yang mempunyai fungsi selayaknya sebuah web server, yaitu dengan menginstal paket XAMPP. Untuk memulai instalasi, masuklah ke folder berisi file installer XAMPP. Selanjutnya, ikuti penjelasan langkah instalasi berikut ini: 1) Klik ganda (double clicked) file xampp-win32-1.7.3.exe sampai muncul jendela utama instalasi. 2) Tentukan direktori induk lokasi instalasi, dengan cara menekan tombol [Browse] atau biarkan sesuai default (c:\xampp\). 3) Ketika direktori sudah ditentukan, lakukan instalasi dengan cara klik tombol [Install]. 4) Proses ekstrak data ke folder instalasi. 5) Setelah proses ekstrak data instalasi selesai maka akan ditampilkan command prompt untuk membuat shortcuts pada strart menu atau desktop. Jika diinginkan, ketik Y dan tekan tombol [Enter]. 6) Selanjutnya akan ditampilkan lagi konfirmasi mengenai lokasi (path) instalasi XAMPP. Bila sudah benar, ketik Y dan tekan tombol [Enter]. 7) Berikutnya, Anda akan ditanya apakah XAMPP dibuat portable dengan tanpa label drive. Ketik N dan tekan tombol [Enter]. 8) Setelah muncul informasi XAMPP is ready to use., langsung tekan tombol [Enter]. 9) Demikian juga bila muncul pesan tentang pengaturan TIMEZONE pada file php.ini dan my.ini, abaikan saja dan tekan tombol [Enter]. 10) Terakhir, bila muncul beberapa menu informasi, ketik X dan tekan tombol [Enter]. 11) Instalasi paket XAMPP selesai. 2. Instalasi CodeIgniter Untuk mulai menggunakan CI, yang pertama kali harus dilakukan adalah mengunduh file sumber dari situs resmi CodeIgniter, yaitu http://codeigniter.com/dowloads. Di sini Saya menggunakan CI versi 2.0.2, tetapi di halaman pengunduhan juga disediakan daftar arsip CI versi sebelumnya. Sebenarnya tidak ada cara khusus untuk menginstal CI dalam server local berbasis XAMPP. Karena XAMPP sudah memenuhi semua yang dibutuhkan oleh CI, yang perlu Anda lakukan adalah sebagai berikut:

Ekstrak file *.zip CI yang berhasil Anda unduh. Copy folder hasil ekstraksi ke direktori kerja XAMPP, yaitu C:/xampp/htdocs/.

Setelah dua langkah tersebut selesai dilakukan maka CI siap digunakan.Untuk menguji apakah mesin CI sudah berjalan dengan baik di server loka Anda, coba akses halaman http://localhost/codeigniter sampai Anda mendapatkan tampilan seperti gambar berikut ini.

Gambar 4.Halaman awal CI

Bagi pemula, CI juga menyertakan dokumentasi dalam file unduhannya. File dokumentasi tersebut diletakkan di dalam folder user_guide. Untuk membaca dokumentasi tersebut, Anda dapat mengaksesnya melalui alamat http://localhost/codeigniter/user_guide. Di halaman tersebut, Anda dapat menemukan referensi lengkap tentang CI, mulai dari konsep MVC, API, petunjuk instalasi, kebutuhan system, hingga cara penulisan dokumentasi. Anda dapat mengakses semua isi dari dokumentasi ini dengan cepat melalui kumpulan tautan (link) yang muncul bila Anda mengklik tombol [Table of Contents] yang berada di bagian atas halaman (lihat Gambar 5).

Gambar 5.Halaman daftar kelas CI

Anda juga bisa memilih salah satu tautan referensi yang ingin dibaca. Anda tidak perlu khawatir kehilangan referensi tautan ini karena tombol [Table of Contents] ini akan muncul di setiap halaman yang Anda buka, hal ini akan mempermudah Anda dalam mempelajarari CI.

BAB II ALUR KERJA DAN RANCANGAN DATABASE APLIKASI E-COMMERCE

A.

Spesifikasi Sistem yang akan Dibangun Berikut adalah spesifikasi atau kemampuan dari program aplikasi yang akan dibangun: 1. Terdiri dari dua aplikasi utama, yaitu halaman publik dan admin. 2. Halaman publik merupakan halaman yang dapat diakses oleh user (pengunjung website). Pada halaman ini tersedia berbagai fitur untuk melakukan registrasi user, login user, mengubah akun login user, mengisi dan mengubah data profil user, melihat riwayat belanja yang pernah dilakukan user, dan halaman pembelian produk secara on-line (seperti menu daftar produk, keranjang belanja, dan halaman checkout). Untuk bisa melakukan proses pembelian atau pemesanan produk, user harus melakukan registrasi terlebih dahulu. 3. Aplikasi admin digunakan untuk melakukan manipulasi (inser, update, dan delete) seluruh data yang ada (data kategori, produk, dan user), menangani data order dari pengunjung, dan pembuatan laporan riwayat belanja masing-masing user. Halaman ini hanya dapat diakses oleh user yang login sebagai admin. Perancangan Sistem Aplikasi Sebagaimana yang telah dijelaskan sebelumnya, aplikasi yang dibangun terdiri dari dua bagian utama, yaitu halaman admin (panel administrasi) dan halaman public (halaman untuk pengunjung).Masing-masing halaman ini memiliki direktori kerja berbeda sehingga pengaksesan dengan browser melalui URL yang berbeda pula. Dalam implementasinya, halaman admin digunakan oleh seorang administrator website atau orang yang ditunjuk sebagai admin website. Aplikasi admin digunakan untuk melakukan berbagai proses transaksi, seperti manipulasi data master, penanganan data order dari pengunjung, dan pembuatan laporan riwayat belanja masing-masing user. Hal ini sangat berbeda dengan halaman publik.Halaman publik digunakan oleh pengguna umum (pengunjung website), yaitu untuk melakukan transaksi pembelian produk secara on-line.Berikut adalah alur kerja dan penjelasan dari masing-masing halaman admin dan publik. 1. Alur Kerja Halaman Admin Beberapa hal yang dapat mengenai alur kerja halaman admin adalah sebagai berikut: a. Pertama kali user mengakses halaman admin, akan disuguhkan form login yang terdiri dari dua kolom, yaitu username dan password. b. Data login ini selanjutnya dicocokkan dengan data pengguna yang ada di dalam database. c. Setelah proses login sukses, user dapat mengoperasikan aplikasi admin. Operasi yang dimaksud meliputi menampilkan data (view), menambahkan

B.

d.

data (insert), mengunggah dan mengolah data gambar (image) produk, memperbarui data (update), dan menghapus data (delete) sesuai kebutuhan. Demi keamanan data, apabila aplikasi admin tidak dipakai, user harus melakukan logout.

2.

Alur Kerja Halaman Publik Beberapa hal yang dapat dijelaskan alur kerja halaman public adalah sebagai berikut: a. Pertama kali mengakses halaman public, user dapat mengakses bagian daftar produk untuk melihat produk apa saja yang dijual dan informasi lain tentang produk, seperti spesifikasi dan harga. b. Untuk bisa melakukan transaksi pembelian atau pemesanan (order), user harus melakukan registrasi terlebih dahulu. c. Setelah login berhasil, user bisa memperbarui data login dan mengisi/memperbaraui data profilnya. d. Untuk melakukan pembelian, user tinggal mengklik tombol [Add to Cart] yang berada di sebelah kanan daftar produk yang diinginkan. Untuk memperbarui kuantitas produk yang akan dibeli, user dapat mengetikkan jumlah kuantitas sesuai keinginan dan klik lagi tombol [Add to Cart]. e. Klik tombol [Check Out] yang ada pada bagian keranjang belanja untuk masuk ke halaman check out. Pada halaman ini, Anda dapat menghapus atau memperbarui kuantitas produk yang akan dibeli. Untuk menghapus, masukkan angka 0 (nol) pada kolom kuantitas, kemudian klik tombol [Update Keranjang Belanja]. Untuk memperbarui masukkan kuantitas (lebih dari nol) masing-masing produk, lalu klik tombol [Update Keranjang Belanja]. Bila ingin membatalkan semuanya, klik tombol [Hapus Isi] yang ada di bagian Keranjang Belanja. f. Untuk melanjutkan proses pembelian produk, klik tombol [Lanjut] yang ada di halaman check out, kemudian isikan data alamat pengiriman dan klik tombol [Pesan Sekarang]. g. Lakukan transfer uang sejumlah biaya transaksinya, kemudian kirim softcopy bukti transfer Anda melalui e-mail yang telah ditentukan dan barang akan segera dikirim ke alamat sesuai dengan alamat yang Anda kirimkan saat transaksi. h. User juga bisa mengakses halaman record yang menampilkan daftar produk pada saja yang pernah dibeli, lengkap dengan informasi waktu dan nilai transaksinya. i. Untuk tujuan keamanan, apabila proses transaksi selesai, user harus melakukan logout.

C.

Perancangan Database Proses perancangan database merupakan tahap penting agar sistem yang dikembangkan efisien dalam penggunaan ruang penyimpanan, pengaksesan data, terjaminnya integrasi data, dan mudah dalam melakukan manipulasi. Bahasan mengenai rancangan database dalam buku ini meliputi pendefinisian object data, rancangan database dan tabel, dan membuat relasi antartabel yang terbentuk. 1. Mendefinisikan Object Data

Sebelum merancangan sebuah database dan memprogram aplikasi, perlu ditetapkan data apa saja yang dibutuhkan dan apa saja yang dihasilkan oleh sistem yang akan dibangun. Secara umum, berikut adalah data minimal yang dibutuhkan aplikasi E-Commerce. a. Administrasi Pengguna. Pengguna adalah manusia yang secara langsung terlibat dengan program aplikasi, yaitu administrator dan pengunjung. Admnistrasi yang dimaksud adalah yang berhubungan dengan fleksibilias pengguna terhadap system aplikasi, seperti Edit Password (untuk data login user), Edit Profil, dan Role (untuk mennentukan aktif tidaknya user dan menentukan status user, sebagai admin atau user biasa). b. Data Master. Data ini terdiri dari data utama aplikasi e-commerce, yaitu Kategori, Produk, dan User. c. Data Transaksi. Transaksi yang dimaksud adalah pembelian atau pemesanan (order) yang dilakukan oleh pengunjung. 2. Merancang Database dan Tabel Kali ini akan digunakan database MySQL yang sudah terdapat di dalam paket XAMPP. Anda bisa menggunakan PHPMyAdmin sebagai antarmuka pengelolaan database MySQL, yaitu dengan mengakses alamat http://localhost/phpmyadmin. Langkah berikutnya adalah membuat database dengan namacodeigniter. Setelah database tercipta, selanjutnya Anda buat beberapa tabel yang dibutuhkan. Berikut ini disajikan daftar struktur tabel lengkap dengan fungsi dan keterangannya yang akan digunakan pada aplikasi ecommerce. a. Tabel Foto Produk Foto produk yang dimaksud adalah gambar yang digunakan untuk merepresentasikan produk yang akan dijual secara on-line. Data foto produk akan disimpan dalam tabel yang bernama foto_produk dengan struktur sebagai berikut:
Tabel 1.Struktur tabel foto_produk

b.

Tabel Kategori Kategori dalam hal ini adalah jenis produk, tujuannya agar produk dapat dikelompokkan berdasarkan jenis atau kategori tertentu. Data kategori akan disimpan dalam tabel yang bernama kategori dengan struktur sebagai berikut:
Tabel 2. Struktur tabel kategori

c.

Tabel Option Option dalam hal ini adalah data opsional aplikasi e-commercer. Data yang dimaksud berupa nama situs, slogan. Dan kata sambutan yang muncul di halaman depan pada halaman public. Data option akan disimpan dalam tabel yang bernama option dengan struktur sebagai berikut:
Tabel 3. Strukrut tabel option

d.

Tabel Order Order dalam hal ini adalah pemesanan atau pembelian produsk secara online. Tabel ini digunakan untuk menyimpan data order dari sisi prosesnya. Data order akan disimpan dalam tabel yang bernama order dengan struktur sebagai berikut:
Tabel 4. Struktur tabel order

e.

Tabel Order Data Order data adalah detail order dari sisi produknya. Dengan kata lain, tabel ini digunakan untuk menyimpan daftar produk dan kuantitas produk yang dipesan. Order data akan disimpan dalam tebal yang bernama order_data dengan struktur sebagai berikut:
Tabel 5. Struktur tabel order_data

f.

Tabel Produk Produk adalah komoditas jual itu sendiri. Dengan kata lain, produk adalah barang yang akan dijual secara on-line. Data produk akan disimpan dalam tabel yang bernama produk dengan struktur sebagai berikut:
Tabel 6. Struktur tabel produk

g.

Tabel User User adalah administrator aplikasi e-commerce atau juga pengunjung biasa. Data user akan disimpan dalam tabel yang bernama user dengan struktur sebagai berikut:
Tabel 7. Struktur tabel user

h.

Tabel User Data User data adalah data profil pengguna (baik administrator maupun user). User data akan disimpan dalam tabel yang bernama user_data dengan struktur sebagai berikut:

Tabel 8. Struktur tabel user_data

BAB III PEMBUATAN APLIKASI E-COMMERCE MENGGUNAKAN CODEIGNITER DAN JQUERY

Pada bab ini, akan membahas langkah-langkah pembuatan aplikasi e-commerce, mulai dari persiapan folder kerja aplikasi, sampai dengan proses coding. A. Mempersiapkan Folder Kerja Aplikasi Berikut adalah susunan direktori yang akan dalam membuat aplikasi ecommerce menggunakan framework CI.

Gambar 6.Folder kerja aplikasi e-commerce

Susunan direktori yang akan digunakan agak sedikit berbeda dengan susunan direktori yang terdapat pada CI. Dari sini dapat dilihat bahwa ada tiga folder tambahan yang nantinya digunakan untuk menyimpan file-file aplikasi dengan peran dan fungsi tertentu. Ketiga folder tambahan yang dimaksud adalah: asset, digunakan untuk menyimpan file-file asset berupa CSS, JavaScript, dan images yang digunakan oleh halaman admin. template, digunakan untuk menyimpan file template/desain untuk halman public. Rencananya, aplikasi ini memang akan mempunyai kemampuan untuk menggunakan template sehingga memungkinkan desainer membuat sendiri berbagai macam tampilan (theme) untuk toko on-line ini. Uploads, digunakan untuk menampung file-file hasil unggahan, seperti file foto produk dan thumbnail-nya. B. Konfigurasi Dasar Sebelum menggunakan CI, ada beberapa pengaturan atau konfigurasi yang harus dilakukan. Dalam studi kasus kali ini akan dilakukan beberapa konfigurasi, diantaranya: 1. Konfigurasi File config.php Pada file ini, yang perlu dilakukan konfigurasi adalah penentuan base URL aplikasi. Konfigurasi ini akan banyak digunakan dalam pendeklarasian base_url().

$config['base_url']

= 'http://localhost/codeigniter/';

2.

Konfigurasi File database.php Konfigurasi ini mutlak dibutuhkan karena ke depan akan dibangun aplikasi dengan dukungan database. Berikut adalah beberapa konfigurasi file tersebut:
$db['default']['hostname'] $db['default']['username'] $db['default']['password'] $db['default']['database'] $db['default']['dbdriver'] $db['default']['dbprefix'] $db['default']['pconnect'] $db['default']['db_debug'] $db['default']['cache_on'] $db['default']['cachedir'] $db['default']['char_set'] $db['default']['dbcollat'] $db['default']['swap_pre'] $db['default']['autoinit'] $db['default']['stricton'] = = = = = = = = = = = = = = = 'localhost'; 'root'; ''; 'codeigniter'; 'mysql'; ''; TRUE; TRUE; FALSE; ''; 'utf8'; 'utf8_general_ci'; ''; TRUE; FALSE;

3.

Konfigurasi File autoload.php Konfigurasi ini berfungsi untuk memanggil berbagai pustaka ( library), helper, dan config yang akan digunakan secara umum sehingga tidak perlu memanggil pustaka tersebut secara berulang-ulang pada controller yang akan dibuat nanti. Konfigurasi pertama adalah autoload untuk pustaka-pustaka berikut:
$autoload['libraries'] = array('database','session','parser','cart','template','autentif ikasi');

Konfigurasi autoload berikutnya adalah helper dengan baris kode berikut:

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

Konfigurasi yang terakhir adalah autoload untuk file config dengan baris kode seperti berikut:
$autoload['config'] = array('config_store');

Untuk config ini akan dibuat sebuah file config khusus yang digunakan untuk menampung berbagai macam konfigurasi yang dibutuhkan oleh aplikasi ecommerce yang akan dibuat nanti. 4. Konfigurasi File config_store.php File ini merupakan sebuah file yang menampung atau mencatat konfigurasi yang akan dibutuhkan oleh aplikasi e-commerce yang akan dibuat.Di sini ada dua macam konfigurasi, yaitu konfigurasi tentang lokasi folder asset dan konfigurasi lokasi folder template.
$config['template_base'] = 'template/'; $config['asset_base'] = 'asset/';

Kedua konfigurasi ini dibutuhkan oleh pustaka templates yang akan dibuat nanti. C. Membuat File MY_Model.php CI mengizinkan para pengembang untuk melakukan extend terhadap coreclass yang ada di CI. Untuk membuat kelas turunan (extends class), cara penulisannya adalah dengan membuat file menggunakan aturan penamaan sebagai berikut:
MY(atau prefix lain sesuai dengan file konfigurasi)_Model(nama core class yang akan di-extends).php

Kali ini akan dibuat kelas turunan dari kelas model dengan tujuan untuk meringkas kebutuhan fungsi CRUD (Create, Read, Update, Delete) secara umum. Berikut adalah penggalan kode dalam file MY_Model.php:
class MY_Model extends CI_Model { private $table; private $pk; public function __construct() { parent::__construct(); } public function set_table($table = '',$pk ='') { $this->table = $table; $this->pk = $pk; return $this; } public function get_all(){ return $this->_get()->result(); } public function get_array(){ return $this->_get()->result_array(); } public function get($id = '0') { $this->db->where($this->pk,$id); return $this->_get()->row(); } public function get_by($param) { if (is_array($param)) { $this->db->where($param); return $this->_get()->row(); } return FALSE; } public function get_many_by($param) { if (is_array($param)) { $this->db->where($param); return $this->get_all(); } return FALSE; } public function insert($data = array()) {

$this->db->where($param); return $this->get_all(); } return FALSE; } public function insert($data = array()) { if($this->db->insert($this->table,$data)) { return $this->db->insert_id(); } return false; } public function delete($id = 0) { if ($this->db->delete($this->table,array($this->pk => $id))) { return true; } return false; } public function update($id = 0 ,$data = array()) { $this->db->where(array($this->pk => $id)); if ($this->db->update($this->table,$data)){ return true; } return false; } public function update_by($where = array(), $data = array()) { $this->db->where($where); if ($this->db->update($this->table,$data)){ return true; } return false; } protected function _get() { return $this->db->get($this->table); } }

Untuk dapat menggunakan kode di atas, caranya cama dengan saat menggunakan core Model. Berikut adalah contoh pemanggilan method yang ada dalam file MY_Model.php.

class Ketegori_m extends MY_Model { public function __construct(){ parent::__construct(); parent::set_table(kategori,id_kategori); } }

D.

Membuat Pustaka autentifikasi.php CI memungkinkan membuat pustaka sendiri dan dapat dengan mudah diintegrasikan dengan pustaka core CI. Langkah yang perlu dilakukan hanyalah membuat sebuah file kelas PHP dan meletakkannya di dalam folder codeigniter/application/libraries/. Salah satu pustaka yang akan dibuat kali ini adalah pustaka yang digunakan untuk pengenalan autentifikasi. Pustaka ini menurut rencana akan mempunyai beberapa fungsi, diantaranya: Proses login atau autentifikasi dengan disertai penyimpanan data session. Proses logout. Penambahan data pengguna (user) baru. Perubahan data pengguna yang sudah ada. Pengecekkan status login. Pengecekka level atau user role. Dan fungsi autentifikasi lainnya. Pustaka ini menggunakan sebuah tabel di dalam database.Tabel yang digunakan adalah tabel user.Pustaka ini juga memerlukan sebuah model untuk melakukan interaksi data dengan database. Model tersebut di beri nama user_m.php yang akan disipan di dalam folder codeigniter/application/model/. Berikut adalah potongan baris program dari file model user_m.php:
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); class User_m extends MY_Model { public function __construct(){ parent::__construct(); parent::set_table('user','id_user'); } public function get_by_username($username) { if($query = parent::get_by(array('username'=>$username))){ if ($query->id_user != NULL) return $query; } return false; } public function cek_username($username,$self = FALSE){ if($data = parent::get_by(array('username'=>$username))){ if($self){ return $data->id_user; }else{ return false; } } return true;

return $data->id_user; }else{ return false; } } return true; } public function hapus($id) { if(parent::delete($id)) { if($this->db->table_exists('user_data')){ $this->db->where(array('user_id'=>$id)); $this->db->delete('user_data'); } return true; } return false; } } ?>

Disini dapat dilihat bahwa model tersebut sangat sederhana. Hal ini dikarenakan semua fungsi dasar CRUD sudak dicakup oleh file MY_Model.php yang merupakan parent dari kelas ini. Model ini mempunyai dua fungsi (method) spesifik, yaitu: Fungsi get_by_username() Fungsi ini digunakan untuk mencari data berdasarkan parameter fungsi berupa string username. Fungsi cek_username() Fungsi ini digunakan untuk mendeteksi apakah username yang disebutkan dalam parameter sudah pernah digunakan atau belum. Setelah itu pembuatan pustaka autentifikasi.php, berikut baris kode pada pustaka tersebut:
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); define('STATUS_ACTIVATED', '1'); define('STATUS_NOT_ACTIVATED', '0'); define('ALLOW', '1'); define('NOT_ALLOW', '0'); Class Autentifikasi { private $ci; private $error = array(); public function __construct() { $this->ci = & get_instance(); $this->ci->load->model('user_m'); } public function login($username,$password) { if ((strlen($username) > 0) AND (strlen($password) > 0)) { if ($user = $this->ci->user_m->get_by_username($username)) { if ($user->password == md5($password)) { $this->ci->session->set_userdata(array(

public function login($username,$password) { if ((strlen($username) > 0) AND (strlen($password) > 0)) { if ($user = $this->ci->user_m->get_by_username($username)) { if ($user->password == md5($password)) { $this->ci->session->set_userdata(array( 'user_id' => $user->id_user, 'username' => $user->username, 'status' => ($user->status == 1) ? STATUS_ACTIVATED : STATUS_NOT_ACTIVATED, 'level' => $user->level, )); if($user->status == 0){ $this->error = (array('status'=>'Status belum aktif')); } else { return true; } } $this->error = array('password'=>'Password Keliru'); } $this->error = array('login'=>'Login Tidak Benar'); } return FALSE; } public function logout() { $this->ci->session->set_userdata(array('user_id' => '', 'username' => '', 'status' => '', 'level' => '')); $this->ci->session->sess_destroy(); } public function tambah($username,$email,$password,$level) { $data = array( 'username'=>$username, 'email'=>$email, 'password'=>md5($password), 'level'=>$level ); if($this->ci->user_m->cek_username($username)){ if($this->ci->user_m->insert($data)){ return true; } } return false; } public function ubah($id,$username,$email,$password,$level){ $data = array( 'username'=>$username, 'email'=>$email, 'password'=>md5($password), 'level'=>$level, ); if($this->ci->user_m->cek_username($username,TRUE) == $id){ if($this->ci->user_m->update($id,$data)){

public function ubah($id,$username,$email,$password,$level){ $data = array( 'username'=>$username, 'email'=>$email, 'password'=>md5($password), 'level'=>$level, ); if($this->ci->user_m->cek_username($username,TRUE) == $id){ if($this->ci->user_m->update($id,$data)){ return true; } } return false; } public function sudah_login($activated = TRUE) { return $this->ci->session->userdata('status') === ($activated ? STATUS_ACTIVATED : STATUS_NOT_ACTIVATED); } public function role($level = array()) { foreach ($level as $key=>$val){ $status = $this->ci->session->userdata('level') == $val ? ALLOW : NOT_ALLOW; if ($status == 1){break;} } return $status; }

} ?>

Pustaka autentifikasi.php merupakan contoh pustaka pustaka buatan sendiri (user defined library). Secara umum, masih sangat sederhana.Ketika menggunakan pustaka ini, controller tidak perlu melakukan enkripsi apapun terhadap password yang diberikan melalui view. Semua proses mulai dari enkripsi, pencocokan data, sampai input session, dilakukan oleh pustaka ini. E. Membuta Pustaka template.php Tujuan pembuatan pustaka ini adalah agar pengguna dapat dengan mudah mengganti tampilan toko on-line. Hal ini sangat umum diterapkan di hamper semua CMS ang mungkin sudah banyak Anda kenal. Meski demikian, template yang akan dibuat untuk aplikasi ini harus tetap mengikuti kaidah yang telah ditentukan. Pustaka ini merupakan kelas turunan (extends) dari pustakan parser yang merupakan pustakan bawaan CI. Pustaka ini akan membuat data yang diumpan ke view tidak langsung ditampilkan. Tetapi akan diteruskan ke file template.php yang telah ditunjuk sebelumnya. Untuk lebih jelasnya, perhatikan potongan baris kode yang ada dalam pustaka template.php berikut:

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); class Template extends CI_Parser { private $ci; private $name; private $path; private $base; private $default = 'default'; private $css_folder = 'css'; private $js_folder = 'js'; private $delimiter = array(); private $metadata = array('judul'=>'title','metadata'=>''); private $script = array(); private $parsial = array(); private $prepdata = array(); public function __construct(){ $this->ci =& get_instance(); $this->path = $this->ci->config->item('template_base'); $this->base = $this->path.$this->default.'/'; //$this->metadata['metadata'] = array(); } //USE ON ADMIN AS AN OPTION TO USE ASSET THAN TEMPLATE public function use_asset() { $this->path = $this->base = $this->ci->config>item('asset_base'); return $this; } public function get_metadata() { $output = ''; foreach ($this->script as $key => $val){ $output .= $val; } return $output; } public function get_judul() { return $this->metadata['judul']; }

public function set_template($name = 'default') { $this->base = $this->path.$name.'/'; $this->name = $name; return $this; } public function set_judul($judul = 'title') { $this->metadata['judul'] = $judul; return $this; } public function set_css($folder='',$file = ''){ if(func_num_args() < 2) { $folder = ''; $file = func_get_arg(0);

$this->metadata['judul'] = $judul; return $this; } public function set_css($folder='',$file = ''){ if(func_num_args() < 2) { $folder = ''; $file = func_get_arg(0); } else { $folder = $folder.'/'; } $pre = '<link href="'; $pre .= base_url().$this->base.$this>css_folder.'/'.$folder; $end = '" rel="stylesheet" >'; $this->_delimiter($pre,$end); $this->_set_asset($file,'css'); return $this; } public function set_js($folder = '',$file = '') { if(func_num_args() < 2) { $folder = ''; $file = func_get_arg(0); } else { $folder = $folder.'/'; } $pre = '<script type="text/javascript" src="'; $pre .= base_url().$this->base.$this>js_folder.'/'.$folder; $end = '"></script>'; $this->_delimiter($pre,$end); $this->_set_asset($file,'js'); return $this; } public function set_parsial ($location = '', $view = '', $data = '') { if($location != '' && $data != '') { $this->parsial[$location] = array ($location.'_data'=>$this->ci->load->view($view,$data,TRUE)); } return $this; } //DELETEABLE public function view_config(){ echo $this->base; } private function _cek_file(){ if(!file_exists($this->base)){ show_error('File template dengan nama "<b>'.$this-

//DELETEABLE public function view_config(){ echo $this->base; } private function _cek_file(){ if(!file_exists($this->base)){ show_error('File template dengan nama "<b>'.$this>name.'</b>" tidak dapat ditemukan'); } } public function render($view, $data, $state = FALSE){ $this->_cek_file(); $this->prepdata['body'] = $this->ci->load>view($view,$data,TRUE) ; $this->ci->load->_ci_view_path = $this->base; foreach ($this->parsial as $key => $val) { $this->prepdata[$key] = parent::parse($key,$val,TRUE); } $this->metadata['metadata'] = $this->get_metadata(); //print_r($this->parsial); parent::parse('header',$this->metadata,FALSE); parent::parse('page', $this->prepdata, FALSE); parent::parse('footer', $data, FALSE); } private function _set_asset($file,$ext) { $hasil = array(); if(is_array($file)) { foreach($file as $key => $filename) { $hasil[] = $this>delimiter['awal'].$filename.'.'.$ext.$this->delimiter['akhir']; } } else { $hasil[] = $this>delimiter['awal'].$file.'.'.$ext.$this->delimiter['akhir']; } $this->script = array_merge($this->script,$hasil); } private function _delimiter($awal='',$akhir=''){ $this->delimiter['awal']=$awal; $this->delimiter['akhir']=$akhir; } } ?>

Pustaka template ini digunakan secara langsung pada saat aplikasi dijalankan.Hal ini dikarenakan, baik halaman admin maupun public, keduanya menggunakan pustaka ini.Meskipun pada halaman admin tidak secara langsung menggunakan template, tetapi pustaka ini mempunyai fungsi (method) untuk memanggil asset yang nantinya digunakan oleh halaman admin. F. Membuat File MY_Controller.php MY_Controller ini dibuat sebagai extends dari core Controller. Rencananya, MY_Controller ini digunakan untuk halaman admin. MY_Controller akan melakukan proses autentifikasi secara otomatis (pengecekan status login) sehingga setiap controller yang meng-extends MY_Controller secara langsung akan mengecek status login. Di dalam MY_Controller terdapat sebuah fungsi yang memudahkan pengembang dalam membuat view, baik dalam bentuk halaman maupun modal.
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); class MY_Controller extends CI_Controller { private $default_view ; private $judul = 'admin ' ; public function __construct(){ parent::__construct(); if (!$this->autentifikasi->sudah_login()) redirect (site_url('login')); if (!$this->autentifikasi->role(array('admin'))) redirect (site_url('login')); $this->default_view = $this->load->_ci_view_path; $this->load->_ci_view_path = $this->default_view.'admin/'; $this->template->use_asset(); } public function default_meta() { $this->template>set_css(array('reset','main','2col','style','mystyle','colorbox')) >set_js(array('jquery','switcher','toggle','ui.core','ui.tabs','jqu ery.colorbox.min')) ->set_judul($this->judul); return $this; } public function set_judul($judul = '') { $this->judul = $this->judul.'| '.$judul; return $this; } protected function _view($view,$data) { $this->load->view('header',$data); $this->load->view('topmenu',$data); $this->load->view('sidebar',$data); $this->load->view($view,$data); $this->load->view('bottom',$data); $this->load->view('footer',$data); }

$this->load->view('topmenu',$data); $this->load->view('sidebar',$data); $this->load->view($view,$data); $this->load->view('bottom',$data); $this->load->view('footer',$data); } protected function _modal($view,$data) { $this->load->view('header',$data); $this->load->view($view,$data); $this->load->view('footer',$data); } } ?>

G.

Mempersiapkan Template Halaman Publik Untuk memnuat halaman publik, dibutuhkan sebuah desain halaman web yang terdiri dari file HTML dan CSS. Pada studi kasus kali ini, akan digunaa template yang sudah siap pakai. Anda tinggal mengunduh (donwload), modifikasi sesuai kebutuhan dan menggunakannya. Dalam hal ini, dipilih template palmtreess yang bisa diunduh di http://www.freecsstemplates.org/ secara gratis, bebas biaya lisensi.

Gambar 7.Halaman utama template palmtrees

H.

Mempersiapkan Template Halaman Admin Sama halnya dengan halaman publik, halaman admin juga akan menggunakan template yang sudah siap pakai yang bebas biaya lisensi. Pada studi kasus kali ini akan digunakan template adminiziolite yang dapat diunduh di http://www.adminizio.com/. Gambar 8 berikut ini merupakan tampilan standar halaman template adminiziolite.

Gambar 8. Halaman utama template adminiziolite

Sebenarnya terdapat banyak sekali template halaman admin yang dapat di unduh dan gunakan secara bebas. Dari sekian banyak pilihan, template ini mempunyai beberapa kelebihan disbanding lainnya, di antaranya: Sudah mendukung penggunaan pustaka JQuery. Tampilan yang relative menarik dan user friendly. Tersedia beberapa desain CSS yang menanrik untuk beberapa jenis tag HTML, mulai dari form, lits, dan heading. Sudah termasuk desain notifikasi yang beraneka ragam untuk berbagai fungsi. Tersedia contoh penggunaan komponen tab yang bisa langsung digunakan. Tersedia contoh penggunaan menu hierarki. Lain dengan halaman public yang menggunakan metode template dan penggunaan tag { }. Pada halaman ini akan digunakan pemanggilan view secara konvensional. Hal ini dimaksudkan agar bisa dijadikan perbandingan antara metode template dengan metode konvensional (bawaan CI).Selain itu, halaman admin juga dirasa kurang begitu perlu untuk dilakukan perubahan tampilan (theme) dalam jangka waktu yang relative singkat. Meski demikian, akan tetap dilakukan modifikasi terhadap file file original adminiziolite sehingga akan memudahkan dalam mengembangkan aplikasi, khususnya pada bagian antarmuka. I. Mempersiapkan Halaman Login Halaman login merupakan salah satu komponen penting dari sebuah aplikasi berbasis web yang menerapkan system multiuser.Halaman login dapat diartikan sebagai jembatan antara halaman publik dan halaman admin atau dapat pula diartikan sebagai pintu masuk ke halaman admin. Halaman login juga bisa diartikan seagai studi awal yang sederhana dalam pembuatan halaman web dengan menggunakan CI, mulai dari mempersiapkan controller, model, hingga penggunaan view.

Gambar 9. Halaman login

BAB IV PEMBUATAN ROUTES HALAMAN ADMIN

A.

Mempersiapkan Routes Halaman Admin Di dalam CI terdapat salah satu fasilitas yang cukup luar biasa, yaitu routing. Routing ini akan menerjemahkan URL yang terdapat di address bar sesuai dengan role yang di tulis pada file route.php yang terdapat di dalam folder codeigniter/application/config/. Dengan menggunakan fasilitas ini, kita dapat memanipulasi susunan direktori dan URL yang digunakan, terutama pada bagian controller.Untuk lebih jelas, perhatikan susunan direktori pada grup controller admin berikut ini.

Gambar 10.Struktur direktori controller halaman admin

B.

Membut Halaman Admin Kategori Sebelum memulai Model, View, dan Controller untuk admin kategori, ada baiknya membuat beberapa rancangan dari kebutuhan kategori yang akan dibuat. Menurut rencana, system kategori yang akan dibuat mempunyai kemampuan sebagai berikut: Kategori disusun secara hierarki menggunakan model parent dan child. System kategori dapat men-generate daftar kategori HTML secara hierarki. Setiap kategori hanya memiliki satu buah parent atau tidak sama sekali. Kategori dapat diaktifkan atau dinonaktifkan sementara. Setiap kategori yang dinonaktifkan, secara tidak langsung akan membuat kategori di bawahnya (child) juga akan terlihat tidak aktif. Berikut ini tahapan-tahapan dalam membuat halaman admin kategori: Membuat Model kategori_m.php File model kategori_m.php ini hanya akan mempunyai beberapa fungsi spesifik. Hal ini dikarenakan semua method CRUS dasr sudah dideklarasikan di dalam MY_Model.php yang merupakan parent dari model ini.
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); class Kategori_m extends MY_Model { private $prefix = array();

1.

private $tabel_produk = 'produk'; public $kategori = array(); public $kategori_menu = ''; public $kategori_menu_list = ''; public function __construct(){ parent::__construct(); parent::set_table('kategori','id_kategori'); self::get_kategori(); self::get_kategori_menu(); $this->kategori_menu_list >kategori_menu.'</ul>'; } public function hapus($id = 0) { if($data = parent::get($id)) { if(parent::update_by(array('parent'=>$id),array('parent' $data->parent))) { $this->update_produk($id,$data->parent); parent::delete($id); return true; } return false; } return false; } private function update_produk($old = 0,$new = 0) { $this->db->where(array('kategori_id'=>$old)); $this->db->update('produk',array('kategori_id'=>$new)); } private function get_kategori($find_child = FALSE,$parent_id = '0') { if($find_child == FALSE){ $older = parent::get_many_by(array('parent'=>'0')); foreach ($older as $parent) { $this->kategori[] = array ( 'id_kategori' =>$parent->id_kategori, 'kode_kategori' =>$parent>kode_kategori, 'nama_kategori' =>$parent>nama_kategori, 'deskripsi' =>$parent>deskripsi, 'parent' =>$parent>parent, 'status' =>$parent>status, 'ori_name' =>$parent>nama_kategori ); $this->get_kategori(TRUE,$parent->id_kategori); array_shift($this->prefix); } }else{ array_push($this->prefix,'-- '); if(parent::get_many_by(array('parent'=>$parent_id))) => = '<ul>'.$this-

{ $child parent::get_many_by(array('parent'=>$parent_id)); =

foreach ($child as $item) { $this->kategori[] = array ( 'id_kategori' =>$item->id_kategori, 'kode_kategori' =>$item>kode_kategori, 'nama_kategori' =>implode('',$this->prefix).$item->nama_kategori, 'deskripsi' =>$item>deskripsi, 'parent' =>$item>parent, 'status' =>$item>status, 'ori_name' =>$item>nama_kategori ); $this->get_kategori(TRUE,$item->id_kategori); array_shift($this->prefix); } } } } private function get_kategori_menu($find_child = FALSE,$parent_id = '0') { if($find_child == FALSE){ $older = parent::get_many_by(array('parent'=>'0','status'=>'1')); foreach ($older as $parent) { $this->kategori_menu .= '<li>'.anchor(site_url('/produk/'.$parent->url), $parent>nama_kategori); $this->get_kategori_menu(TRUE,$parent>id_kategori); $this->kategori_menu .= '</li>'; } }else{ if(parent::get_many_by(array('parent'=>$parent_id))) { $this->kategori_menu .= '<ul>'; $child = parent::get_many_by(array('parent'=>$parent_id,'status'=>'1')); foreach ($child as $item) { $this->kategori_menu .= '<li>'.anchor(site_url('/produk/'.$item->url), $item>nama_kategori); $this->get_kategori_menu(TRUE,$item>id_kategori); $this->kategori_menu .= '</li>'; } $this->kategori_menu .= '</ul>'; } } } }

Kelas kategori_m ketika pertama kali dimuat, secara langsung akan mengisi dua buah variable, yaitu $kategori dan $kategori_menu_list, dengan daftar kategori produk yang disusun secara hierarki. Ketika dipanggil, variable $kategori akan berisi array kategori yang disusun urut berdasarkan urutan parent, dan pada field Nama Kategori telah mengalami modifikasi, yaitu penambahan prefix --. Implementasinya digunakan dalam halaman Kategori Produk pada halaman admin sebagaimana yang ditunjukkan pada Gambar 11 (a).

Gambar 11.(a) Daftar Kategori Produk (halaman admin) dan (b) Menu Kategori Produk (halaman publik)

Sedangkan untuk variabel $kategori_menu_list menghasilkan daftar kategori produk yang disusun secara berdasarkan parent dengan menggunakan tag HTML <ul></ul> (unordered list) lengkap dengan link URL untuk masing-masing kategori. Implementasinya dapat dilihat pada menu Kategori Produk pada halaman publik, seperti yang ditunjukkan pada Gambar 11 (b). 2. Membuat View Admin Kategori Ada dua macam view yang akan digunakan pada admin kategori, yaitu list.php (yang menanpilkan tabel daftar kategori) dan form.php (berupa form untuk penambahan dan perubahan data kategori). View pada form ini berbentuk modal yang akan dipanggil dengan menggunakan plugin jquery colorbox. Berikut ini merupakan kode program yang ada di dalam file view list.php.
<h1><?php echo $judul ?></h1> <div id="menu" class="box"> <ul class="box f-right"> <li><a href="<?php echo site_url('admin/kategori/tambah') ?>" id="add"><span><strong>Tambah Kategori</strong></span></a></li>

</ul> </div> <h3 class="tit">Kategori Produk</h3> <table> <tr> <th>Nama Kategori</th> <th>Kode</th> <th>Deskripsi</th> <th>Status</th> <th>Action</th> </tr> <?php $i=0; foreach ($kategori as $key => $val): ?> <tr <?php echo $i%2 == 0 ? 'class="bg"' : '';

?>>

<td><?php echo $val['nama_kategori']; ?></td> <td><?php echo $val['kode_kategori']; ?></td> <td><?php echo $val['deskripsi']; ?></td> <td><?php echo $val['status'] == 1 ? anchor(uri_string().'/aktifasi/'.$val['id_kategori'].'/0','Aktif' , 'class="active"') : anchor(uri_string().'/aktifasi/'.$val['id_kategori'].'/1','Tidak Aktif', 'class="no-active"'); ?></td> <td> <?php echo anchor(uri_string().'/hapus/'.$val['id_kategori'],'Hapus')?> | <?php echo anchor(uri_string().'/ubah/'.$val['id_kategori'],'Ubah','class="u bah"')?> </td> </tr> <?php $i++; endforeach; ?> </table> <script type="text/javascript"> jQuery(function($) { $("#add, .ubah").colorbox({ width:"400", height:"500", iframe:true, onClosed:function(){ location.reload(); } }); }); </script>

Gambar 12 berikut ini merupakan tampilan halaman yang dihasilkan oleh view list.php.

Gambar 12. Halaman admin kategori (file view list.php)

C.

Membuat Halaman Admin Produk Pada bagian ini, secara tidak lansung juga akan menguji kemampuan pustaka template yang telah dibuat sebelumnya. Kali ini akan dibuat sebuah halaman produk yang memiliki beberapa spesifikasi sebagai berikut: Produk disusun berdasarkan kategori. Terdapat control stok dan aktivasi produk. Produk bisa memiliki lebih dari satu foto. Berikut proses dan tahapan pembuatan halaman admin produk: Membuat Model produk_m.php Pada kelas produk_m ini terdapat dua macam kelompok kecil yang dibagi menurut fungsi kode.Kelompok pertama digunakan untuk menangani data pada tabel produk, sedangkan kelompok kedua digunakan untuk menangani tabel foto_produk. Mempersiapkan Pustaka JCrop untuk Mengolah Gambar Pustaka JCrop merupakan pustaka yang dibangun berdasarkan plugin Jcrop untuk JQuery yang dimodifikasi sedemkian rupa agar dapat bekerja dalam platform CI.Pustaka ini dikembangkan oleh pengembang CI asal Indonesia. Pustaka ini memiliki tiga buah file, yaitu: jcrop.php, merupakan file pustaka CI. jcrop.css, merupakan file CSS untuk jcrop. jcrop.js, merupakah file JavaScript yang dibutuhkan pustaka ini. Pustaka ini membutuhkan JQuery untuk menjalankannya.Pada studi kasus kali ini, digunakan JQuery 1.5 yang sudah terintegrasi pada halaman admin melalui MY_Controller. 3. Membuat View untuk Halaman Admin Produk

1.

2.

Halaman admin produk ini memiliki lebih banyak file view disbanding halaman kategori. Hal ini dikarenakan halaman admin produk menangani pendataan produk sekaligus melakukan manajemen foto dari masing-masing data produk. Untuk membuat halam admin produk ini, akan digunakan empat buah file view sebagai berikut: list.php, untuk menampilkan ubah data produk. detil.php, digunakan pada halaman ubah data produk. form.php, berfungsi dalam pembuatan halaman modal untuk penambahan data produk baru. gambar.php, digunakan dalam pembuatan halaman upload dan olah gambar untuk data foto produk.

Gambar 13. Halaman admin produk

D.

Membuat Halaman Admin User Berikut adalah fitur-fitur yang akan ditanamkan pada bagian manajemen user kali ini: Terdapat halaman untuk melihat daftar user yang sudah terdaftar. Form pengiriman dan perubahan profil untuk alamat pengiriman. Form perubahan username, password, dan level user. Halaman record belanja masing-masin user. Fitur mengaktifkan dan menonaktfikan user. 1. Mempersiapkan Model user_m Pustaka ini membutuhkan sebuah model untuk membentuk prototype data yang diambil atau dimasukkan ke dalam database.Pada halaman ini admin user ini, kita masih dapat menggunakan model ini. <?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class User_m extends MY_Model { public function __construct(){ parent::__construct(); parent::set_table('user','id_user'); } public function get_by_username($username) { if($query parent::get_by(array('username'=>$username))){ if ($query->id_user != NULL) return $query; } return false; } =

public function cek_username($username,$self = FALSE){ if($data = parent::get_by(array('username'=>$username))){ if($self){ return $data->id_user; }else{ return false; } } return true; } public function hapus($id) { if(parent::delete($id)) { if($this->db->table_exists('user_data')){ $this->db->where(array('user_id'=>$id)); $this->db->delete('user_data'); } return true; } return false; } } ?>

2.

Mempersiapkan Model order_m.php Kali ini dibutuhkan satu model lagi yang akan digunakan untuk membantu melacak data order yang telah dilakukan oleh tiap-tiap user.
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); class Order_m extends MY_Model { public function __construct(){ parent::__construct(); parent::set_table('order','id_order'); } public function insert($data = array(), $cart = array()) {

if(parent::insert($data)){ $id = $this->db->insert_id(); foreach ($cart as $item){ $detail = array( 'order_id'=>$id, 'produk_id'=>$item['id'], 'kuantitas'=>$item['qty'], 'subtotal'=>$item['subtotal']); $this->db->insert('order_data',$detail); } return true; } return false; } public function get_record($id = 0,$get_user = FALSE) { $this->db->where($id); if ($get_user){ $this->db->join('user_data','user_data.user_id order.user_id'); } $data = parent::get_array(); foreach ($data as $key=>$val){ $this->db>where(array('order_id'=>$val['id_order'])); $this->db->join('produk','produk.id_produk order_data.produk_id');

$detail = $this->db->get('order_data')>result_array(); $data[$key]['detail'] = $detail; switch($data[$key]['status_order']) { case '0': $data[$key]['status_order_text'] style="color:red;">Data belum diproses</div>'; continue; case '1': $data[$key]['status_order_text'] style="color:orange;">Data sedang diproses</div>'; continue; case '2': $data[$key]['status_order_text'] style="color:blue;">Barang sedang dikirim</div>'; continue; case '3': $data[$key]['status_order_text'] style="color:green;">Selesai</div>'; continue; } } return $data; }

'<div

'<div

'<div

'<div

public function get_laporan(){ $this->db->join('user','user.id_user=order.user_id'); $this->db>join('user_data','user_data.user_id=user.id_user'); $data = parent::get_array();

foreach ($data as $key=>$val){ $this->db>where(array('order_id'=>$val['id_order'])); $this->db->join('produk','produk.id_produk = order_data.produk_id'); $detail = $this->db->get('order_data')>result_array(); $data[$key]['detail'] = $detail; switch($data[$key]['status_order']) { case '0': $data[$key]['status_order_text'] style="color:red;">Data belum diproses</div>'; continue; case '1': $data[$key]['status_order_text'] style="color:orange;">Data sedang diproses</div>'; continue; case '2': $data[$key]['status_order_text'] style="color:blue;">Barang sedang dikirim</div>'; continue; case '3': $data[$key]['status_order_text'] style="color:green;">Selesai</div>'; continue; } } return $data; } } ?>

'<div

'<div

'<div

'<div

Dalam halaman admin user ini, hanya akan membutuhkan satu method saja dari model ini, yaitu get_record(). 3. Mempersiapkan View untuk Admin User Berikut adalah file view yang dibutuhkan: list.php, digunakan untuk menampilkan daftar user yang sudah terdaftar. record.php, digunakan untuk menampilkan daftar record belanjang masingmasing user. form_edit.php, digunakan mengubah data login user. form_register.php, digunakan untuk menambah user baru. form_profile.php, digunakan untuk memperbarui profil user.

Gambar 14. Tampilan view list.php

4.

Membuat Controller Admin User Setelah model dimiliki dan view yang dibutuhkan juga sudah tersedia, langkah selanjutanya adalah membuat controller untuk mengatur alur program pada halaman admin user. Berikut bagian dari controller admin user: 1. Fungsi controller __construct() dan index() 2. Fungsi controller tambah() 3. Fungsi controller ubah() 4. Fungsi controller profile() 5. Fungsi controller Melihat record belanja 6. Fungsi controller Melihat detail record dan mengubah status pesanan 7. Fungsi controller hapus() 8. Fungsi controller aktifasi()

E.

Membuat Halaman Admin Pelaporan Diantara halaman admin yang telah dibuat, mungkin halaman admin pelaporan inilah yang paling sederhana. Pada halaman ini akan ditampilkan data rekaman aktivitas belanja dari setiap user yang telah terdaftar. 1. Mempersiapkan Model order_m.php Model order_m sudah pernah digunakan sebelumnya pada bagian admin user. Mempersiapkan View Admin Pelaporan Halaman admin pelaporan ini hany membutuhkan dua buah file view, yaitu list.php dan detail.php. File list.php digunakan untuk memperlihatkan daftar order yang pernah dibuat oleh setiap user.
<h1><?php echo $judul ?></h1> <div id="menu" class="box"> <ul class="box f-right"> </ul> </div> <h3 class="tit">Riwayat Belanja</h3> <?php if ($laporan == array()): ?> <div class="note-cart">Belum ada record belanja untuk user ini</div> <?php else: ?> <table class="user-record" cellspacing="0" cellpadding="3px"> <tr> <th>Order ID</th>

2.

<th>Tanggal Belanja</th> <th>Jumlah Item</th> <th>Total Belanja</th> <th>Status</th> </tr> <?php foreach ($laporan as $item): ?> <tr> <td><?php echo anchor(uri_string().'/detail/'.$item['id_order'], $item['id_order'].' Detail', 'class="active" id="detail"') ?></td> <td><?php echo $item['tanggal_masuk']; ?></td> <td><?php echo $item['total_item']; ?></td> <td> Rp. <?php echo $this->cart>format_number($item['total_biaya']); ?></td> <td><?php echo $item['status_order_text']; ?></td> </tr> <tr> <td></td> <td colspan="4"><b>Nama Client :: </b><?php echo $item['nama_depan'].' '.$item['nama_belakang']; ?></td> </tr> <?php foreach($item['detail'] as $detail): ?> <tr> <td></td> <td><?php echo $detail['nama_produk']; ?></td> <td><?php echo $detail['kuantitas']; ?></td> <td>Rp. <?php echo $this->cart>format_number($detail['subtotal']); ?></td> <td></td> </tr> <tr> <td colspan="5" style="background-color: #8FBBEF;"></td> </tr> <?php endforeach; ?> <?php endforeach; ?> </table> <?php endif; ?> <script type="text/javascript"> jQuery(function($) { $(".active").colorbox({ width:"500", height:"500", iframe:true, onClosed:function(){ location.reload(); } }); }); </script>

3.

Membuat Controller Halaman Admin Pelaporan Untuk controller halaman admin pelaporan sangat sederhana, yaitu hanya terdapat fungsi __construct(), index(), dan detail(). Berikut adalah kode lengkap file controller laporan.php:
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); class Laporan extends MY_Controller { private $judul = 'Laporan'; public function __construct() { parent::__construct();

parent::set_judul($this->judul); parent::default_meta(); $this->load->model('order_m'); $this->data->metadata = $this->template->get_metadata(); $this->data->judul = $this->template->get_judul(); } public function index(){ $this->data->laporan = $this->order_m->get_laporan(); parent::_view('laporan/list',$this->data); } public function detail($id = 0) { if ($this->input->post('submit')){ $this->order_m>update_by(array('id_order'=>$id),array('status_order'=>$this>input->post('status'))); $this->data->sukses = 'Data berhasil diperbaharui'; } else { $this->data->detail = $this->order_m>get_record(array('id_order'=>$id),true); } parent::_modal('laporan/detail',$this->data); } }

F.

Membuat Halaman Admin Pengaturan Tahap berikutnya adalah membuat halaman admin terakhir, yaitu halaman admin pengaturan. Halaman ini juga dibuat dengan cara yang sangat sederhana. Kebutuhan halaman ini adalah dapat mengisikan opsi pengaturan untuk situs dan menyimpannya dalam database. Berikut tahap pembuatan model pada halaman admin pengaturan: 1. Membuat Model option_m.php 2. Membuat View untuk Halaman Admin Pengaturan 3. Membuat Controller untuk Halaman Admin Pengaturan

BAB V

PEMBUATAN ROUTES HALAMAN PUBLIK

A.

Mempersiapkan Routes Halaman Publik Kali ini kembali menggunakan routes. Tujuannya bukan untuk menyembunyikan folder sebenarnya, tetapi lebih ditujukan untuk mempercantik URL yang akan muncul di address bar. Baris routes yang ditambahkan adalah:
$route[produk/(:any)/(:any)] = store/produk/$2; $route[produk/(:any)] = store/kategori/$1;

Routing di atas mempunyai fungsi sebagai berikut: Setiap URL dengan ciri segmen pertama berupa produk dan diikuti segmen kedua dengan nilai apa pun, akan di-routingi ke controller store dengan method kategori() dengan parameter yang nilainya sama dengan nilai pada segmen dua dari URL. Apabila segmen pertama URL berupa produk dan diikuti oleh segmen kedua dan ketiga dengan nilai apa pun maka eksekusi program akan di-routing ke controller store dengan method produk() dan nilai parameter sama dengan nilai yang terdapat pada URL segmen ketiga.

Setelah menggunakan fungsi routing ini, diharapkan untuk mengakses halaman kategori cukup mengetikkan URL berikut:
http://localhost/codeigniter/index.php/url_kategori

Dan, untuk mengakses halaman single produk cukup dengan mengetikkan alamat URL berikut:
http://localhost/codeigniter/index.php/url_kategori/url_produk

B.

Membuat Halaman Publik Produk Halaman publik produk (halaman store) merupakan presentasi dari aplikasi ecommerce. Untuk itu, akan dibuat halaman store ini sehingga mempunyai fungsi selayaknya aplikasi e-commerce meski hanya bertaraf sederhana. Berikut adalah fungsi yang akan dicakup oleh controller store: Menampilkan daftar produk dari setiap kategori sesuai dengan link kategori yang dituju. Menampilkan data produk pada sebuah halaman single product di mana terdapat tombol untuk memasukkan barang ke keranjang belanja. Menampilkan halaman check out. Menampilkan haaman ordre disertai form alamat pengiriman. Memiliki fasilitas control terhadap keranjang belanja. Berikut tahapan pembuatan halaman publik produk: Mempersiapkan Parsial View untuk Top Menu Mempersiapkan Parsial View untuk Sidebar Menu Mempersiapkan View Halaman Depan

1. 2. 3.

4. 5. 6. 7. 8. C.

Mempersiapkan View Halaman Kategori Mempersiapkan View Produk Mempersiapkan View untuk Halaman Checkout Mempersiapkan View Halaman Order Membuat Controller untuk Halaman Store

Membuat Halaman Publik User Pada halaman ini digunakan untuk proses login, register atau pendaftaran, perubahan data login, record, dan profile. Beberapa view yang menyusun halaman atau controller user berikut ini. 1. Membuat View user_login.php 2. Membuat View register.php 3. Membuat View profile.php 4. Membuat View edit.php 5. Membuat View record.php 6. Membuat Controller untuk Halaman Publik User