commit to user
4
BAB II LANDASAN TEORI
2.1
E -commerce
Menurut Laudon Laudon 1998,
E-Commerce
adalah suatu proses membeli dan menjual produk-produk secara elektronik oleh konsumen dan
dari perusahaan ke perusahaan dengan computer sebagai perantara transaksi bisnis.
Tujuan suatu perusahaan menggunakan sistim
E-Commerce
adalah dengan
menggunakan
E-Commerce
maka perusahaan
dapat lebih
meningkatkan keuntungannya. Manfaat dalam menggunakan
E-Commerce
dalam suatu perusahaan sebagai sistem transaksi adalah:
a. Dapat meningkatkan
ma rket exposure
pangsa pasar. b.
Melebarkan jangkauan global reach. c.
Meningkatkan customer loyalty. d.
Meningkatkan supply management.
2.2 M-Commerce
M-Commerce
merupakan proses transaksi yang dilakukan dengan menggunakan perangkat
mobile
.
M-Commerce
merupakan subset dari
e- Commerce
, yang didefinisikan sebagai proses transaksi yang dilakukan secara elektronik,baik melalui
internet, sma rt ca rd
maupun perangkat
mobile
. Pada umumnya, perangkat
end user
yang digunakan pada proses
m- Commerce
adalah sebagai berikut:
Ha ndphone Smart Phone
PDA Ta blet
Setiap perangkat memiliki karakteristik yang berbeda-beda sehingga dapat mempengaruhi tingkat penggunaannya aplikasisistem
m-commerce
.
commit to user
5
2.3 Batik
Batik merupakan kain bergambar yg pembuatannya secara khusus dengan menuliskan atau menerakan malam pada kain tersebut, kemudian
pengolahannya diproses
dengan cara
tertentu. http:kamusbahasaindonesia.orgbatik
2.3.1 Sejarah Pemasaran Batik
Pada mulanya membatik hanya dikerjakan oleh putri-putri keluarga keraton di Jawa. Kegiatan membatik ini pada mulanya dikatakan sebagai
kegiatan spiritual yang membutuhkan konsentrasi, kesabaran, dan pembersihan pikiran melalui doa-doa. Dengan demikian, hanya perempuan
yang berstatus tinggi yang seharusnya membuat batik itu. Sampai akhir abad ke-19, produksi batik dan penggunaannya telah diberlakukan di kalangan
kerajaan sebagai pakaian resmi. Masyarakat terdekat yang pertama kali memproduksi batik adalah
masyarakat Kauman yang bekerja sebagai abdi dalem pamethakan keraton, istri mereka pada umumnya melakukan kegiatan membatik sebagai
pekerjaan sambilan di rumah. Hasil dari kerajinan itu ditampung oleh beberapa orang yang dianggap dapat menjualkannya. Ternyata kerajinan
batik itu justru mengalami kemajuan yang pesat sehingga muncullah pengusaha batik.
Pada tahun 1900 , pedagang batik di Kauman yang terkenal dan kaya adalah Kyai H. Abubakar dan Nyai H. Saleh. Dari pendapatannya sebagai
pedagang kaya itu, mereka dapat menyekolahkan anaknya hingga ke Mekkah. Mulai pada tahun 1910, di Yogyakarta bermunculan pengusaha-
pengusaha batik, misalnya seperti “Batik Handel” seperti tersebut di atas. Hingga akhirnya produk batik pun menyebar ke seluruh Indonesia.
commit to user
6
2.4 Framework CodeIgniter
CodeIgniter merupakan sebuah framework yang digunakan untuk membuat sebuah aplikasi berbasis web yang disusun menggunakan bahasa
PHP. Didalamnya terdapat bermacam-macam
libra ry
dan
helper
yang mempermudah dalam pengembangan aplikasi. Riyanto, 2011
2.4.1 Konsep MVC
Dalam konteks Codeigniter dan aplikasi web, penerapan konsep MVC mengakibatkan kode program dapat dibagi menjadi tiga kategori, yaitu :
a. Model. Kode program berupa OOP class yang digunakan untuk
memanipulasi database. b.
View. Berupa template htmlxhtml atau php untuk menampilkan data pada browser.
c. Controller. Kode program berupa OOP class yang digunakan untuk
mengontrol aliran aplikasi sebagai pengontrol Model dan View.
2.4.2 Library CodeIgniter yang digunakan
Library CodeIgniter berisi kumpulan class dengan berbagai method yang biasa dipakai oleh programmer PHP.
Untuk pemanggilan library, format perintahnya :
this-load-library‘ , contoh : this-load-library‘cart’;
Dan ketika akan digunakan, format perintahnya :
this- -
contoh: this-cart-total
Dalam pembuatan aplikasi
m-commer ce
ini, library yang digunakan : -
Autoload : Digunakan untuk me-load secara otomatis class-class dalam CodeIgniter, bisa library, helper ataupun model.
- Config : library config diinisialisasi secara otomatis oleh sistem.
Digunakan untuk menerima informasi mengenai konfigurasi sistem. -
Database : library database sangat handal, dilengkapi dengan berbagai method untuk manipulasi database.
- File Uploading : library ini untuk melakukan upload file dengan fitur
validasi
commit to user
7
- Pagination : digunakan untuk membuat pagination dari hasil query.
Dapat diatur beberapa record yang ingin ditampilkan dalam satu halaman.
- Session : digunakan untuk memaintain state seorang user. Library ini
tidak menggunakan session milik PHP, tetapi menghasilkan data untuk session sendiri.
- User Agent : digunakan untuk mengidentifikasi browser, mobile
device atau robot misalnya milik serach engine yang berkunjung ke situs Anda.
- Form Validation : sebuah class yang berguna untuk memvalidasi input
form. -
Cart : library yang mengenai transaksi komersial
e-commerce
, namun hanya bagian keranjang belanja, tidak sampai proses
checkout
shipping, pembayaran, dan sebagainya.
2.4.3 Helper yang digunakan
Tidak seperti libraries, helper bukanlah kode program OOP, tetapi kode prosedural. Tiap helper berisi satu atau beberapa fungsi, tiap fungsi
fokus untuk mengerjakan tugas tertentu. Fungsi-fungsi tersebut tidak saling tergantung.
Untuk pemanggilan library, format perintahnya :
this-load-helper‘ , contoh : this-load-helper‘ ’;
Dan ketika akan digunakan langsung memanggil fungsinya, contoh:
Echo form_hiddennama, john’; - input type=”hidden” name=”nama” value=”john”
Helper yang digunakan : -
FusionCharts : helper untuk membuat grafik -
Form : helper yang digunakan untuk membuat form html. -
URL : helper yang menangani URL. Contohnya fungsi base_url untuk mendapat nilai base URL dan anchor untuk membuat link.
commit to user
8
2.5 UML
Unified Modeling Language UML adalah spesifikasi OMG yang paling digunakan, dan cara dunia memodelkan, tidak hanya aplikasi struktur,
perilaku, dan arsitektur, tapi juga proses bisnis dan struktur data. http:uml.org
2.5.1 Use Case Diagram
Use ca se
diagram merupakan pemodelan untuk kelakuan
beha vior
sistem informasi yang akan dibuat.
Use case
mendeskripsikan sebuah interaksi antara satu atau lebih aktor dengan sistem informasi yang akan
dibuat. Ada dua hal utama pada
use ca se
yaitu pendefinisian apa yang disebut aktor dan
use case.
1. Aktor merupakan orang, proses, atau sistem lain yang berinteraksi dengan
sistem informasi yang akan dibuat di luar sistem informasi yang akan dibuat itu sendiri, jadi walaupun simbol dari aktor adalah gambar orang,
tapi aktor belum tentu merupakan orang. 2.
Use ca se
merupakan fungsionalitas yang disediakan sistem sebagai unit- unit yang saling bertukar pesan antarunit atau aktor.
Berikut adalah simbol-simbol yang ada pada diagram
use case
:
Tabel 2.1 Simbol
Use Case
Simbol Nama
Keterangan
Nama Aktor
Aktor
Aktor Orang, proses atau sistem lain yang
berinteraksi dengan sistem informasi yang akan dibuat di luar sistem
informasi yang akan dibuat itu sendiri, jadi walaupun simbol dari
aktor adalah gambar orang, tapi aktor belum tentu merupakan orang;
biasanya dinyatakan menggunakan kata benda di awal frase nama aktor.
Use Case Fungsional yang disediakan sistem
sebagai unit-unit yang saling
Nama use case
commit to user
9
bertukar pesan antarunit atau aktor; biasanya dinyatakan dengan
menggunakan kata kerja di awal frases nama
use ca se.
Asosiasi
a ssocia tion
Komunikasi antara aktor dan
use ca se
atau use case memiliki interaksi dengan aktor.
extend Ekstensi
extend
Relasi
use ca se
tambahan ke sebuah
use case
dimana
use case
yang ditambahkan dapat berdiri sendiri
walau tanpa
use case
tambahan itu; mirip dengan prinsip
inheritance
pada pemrograman berorientasi objek; biasanya
use ca se
tambahan memiliki nama depan yang sama
denga
use ca se
yang ditambahkan. Generalisasi
genera liza tion
Hubungan generalisasi dn spesifikasi umum -khusus antara
dua buah
use case
dimana fungsi yang satu adalah fungsi yang lebih
umum dari lainnya.
include
Include
Relasi
use ca se
tambahan ke sebuah
use case
dimana
use case
yang ditambahkan memerlukan
use ca se
ini untuk menjalankan fungsinya atau sebagai syarat dijalankan
use ca se
ini.
2.5.2 Activity Diagram
Diagram aktivitas atau
a ctivity dia gra m
menggambarkan workflow atau aktivitas dari sebuah sistem atau proses bisnis. Yang perlu
diperhatikan disini bahwa diagram aktivitas menggambarkan aktivitas
commit to user
10
sistem bukan apa yang dilakukan actor, jadi aktivitas yang dapat dilakukan sistem.
Diagram aktivitas juga banyak digunakan untuk mendefinisikan hal-hal berikut:
1. Rancangan proses bisnis dimana setiap urutan aktivitas yang
digambarkan merupakan proses bisnis sistem yang didefinisikan. 2.
Urutan atau pengelompokkan tampilan dari sistemuser
interface
dimana setiap aktivitas dianggap memiliki sebuah rancangan antarmuka tampilan
3. Rancangan pengujian dimana setiap aktivitas dianggap memerlukan
sebuah pengujian yang perlu didefinisikan kasus ujinya. Berikut simbol-simbol yang ada pada diagram aktivitas :
Tabel 2.2 Simbol
Activity Diagram
Simbol Nama
Keterangan
Status Awal Status awal aktivitas sistem,
sebuah diagram aktivitas memiliki sebuah status awal
Aktivitas Aktivitas yang dilakukan
system, aktivitas biasanya diawali dengan kata kerja
Percabangan
decision
Asosiasi percabangan dimana jika ada pilihan aktivitas lebih
dari satu Penggabungan
join
Asosiasi penggabungan dimana lebih dari satu
aktivitas digabungkan menjadi satu
Status akhir Status ahir aktivitas sistem,
sebuah diagram aktivitas memiliki sebuah status akhir
Aktivitas
commit to user
11
2.5.3 Class Diagram
Cla ss dia gra m
atau diagram kelas merupakan suatu diagram yang menggambarkan struktur sistem dari segi pendefinisian kelas-kelas yang
akan dibuat untuk membangun sistem. Kelas meiliki apa yang disebut atribut dan metode atau operasi.
1. Atribut merupakan variable-variabel yang dimiliki oleh suatu kelas.
2. Operasi atau metode adalah fungsi-fungsi yang dimiliki oleh suatu
kelas.
Tabel 2.3 Simbol
Class Diagram
Simbol Nama
Keterangan
Kelas Merupakan kelas pada struktur
sistem yang terdiri dari atribut dan method.
Antarmuka
interfa ce
Sama dengan konsep
interfa ce
dalam pemrograman berorientasi objek
Asosiasi
a ssocia tion
Relasi antar kelas dengan makna umum, asosiasi
biasanya juga disertai dengan
multiplicity.
Asosiasi berarah
directed a ssocia tion
Relasi antar kelas dengan makna kelas yang satu
digunakan oleh kelas yang lain, asosiasi biasanya juga
disertai dengan
multiplicity.
Generalisasi
genera liza tion
Relasi antar kelas dengan makna generalisasi-spesialisasi
umum-khusus Kebergantungan
Dependency
Relasi antar kelas dengan makna kebergantungan antar
kelas Agregasi
Relasi antar kelas dengan
commit to user
12
aggregation makna semua-bagian whole-
part
2.5.4 Sequence Diagram
Diagram sekuen menggambarkan kelakuan objek pada
use ca se
dengan mendeskripsikan waktu hidup objek dan
messa ge
yang dikirimkan dan diterima antar objek. Oleh karena itu untuk menggambarkan diagram
sekuen maka harus diketahui objek-objek yang terlibat dalam sebuah
use ca se
beserta metode-metode yang dimiliki kelas yang diinstansiasi menjadi objek itu.
Banyaknya diagram sekuen yang harus digambar adalah sebanyak pendefinisian
use case
yang memiliki proses sendiri atau yang penting semua
use case
yang telah didefinisikan interaksi jalannya pesan sudah dicakup pada diagram sekuen sehingga semakin banyak
use case
yang didefinisikan maka diagram sekuen yang harus dibuat juga semakin
banyak. Berikut adalah simbol-simbol yang ada pada diagram sekuen :
Tabel 2.4 Simbol
Sequence Diagram
Simbol Nama
Keterangan
Nama Aktor
Aktor
Aktor Orang, proses atau sistem lain
yang berinteraksi dengan sistem informasi yang akan
dibuat di luar sistem informasi yang akan dibuat itu sendiri,
jadi walaupun simbol dari aktor adalah gambar orang,
tapi aktor belum tentu merupakan orang; biasanya
dinyatakan menggunakan kata benda di awal frase nama aktor
Garis hidup
lifeline
Menyatakan kehidupan suatu objek
commit to user
13
Objek Menyatakan objek yang
berinteraksi pesan Waktu aktif
Menyatakan objek dalam keadaan aktif dan berinteraksi
pesan create
Pesan tipe
create
Menyatakan suatu objek membuat objek lain, arah
panah mengarah pada objek yang dibuat
1: nama method Pesan tipe
ca ll
Menyatakan suatu objek memanggil operasimetode
yang ada pada objek yang dibuat
1: masukkan Pesan tipe
send
Menyatakan bahwa suatu objek mengirimkan data
masukkaninformasi ke objek lainnya, arah panah mengarah
ke objek yang dikirim
1: keluaran Pesan tipe
return
Menyatakan bahwa suatu objek yang telah menjalankan
suatu operasi yang menghasilkan suatu kembalian
ke objek tertentu, arah panah mengarah pada objek yang
menerima kembalian X
Pesan tipe
destroy
Menyatakan akhir hidup suatu objek
nama objek : nama kelas
commit to user
14
2.6 MySQL
MySQL database merupakan
data ba se open source
dengan performa yang tinggi, realibilitas yang tinggi dan mudah dalam penggunaan. Itu juga
merupakan database pilihan untuk generasi baru dari aplikasi yang dibangun pada LAMP Linux, Apache, MySQL, PHP Perl Python. sumber :
http:mysql.com Pada dasarnya, bahasa
query
SQL secara garis besar dabat dibagi menjadi tiga bagian :
a DDL
Da ta Definition La ngua ge
DDL adalah bahasa-bahasa SQL yang digunakan untuk membuat, memanipulasi atau menghapus
schema
yang ada di dalam
data base
. b
DML
Da ta Ma nipula tion La ngua ge
DML adalah bahasa-bahasa SQL yang digunakan untuk memanipulasi data di dalam
data base
. c
DCL
Da ta Control La ngua ge
DCL adalah bahsa-bahasa SQL yang digunakan untuk mengatur user MySQL.
2.7 CSS
CSS merupakan singkatan dari
Cascading Style Sheet.
Kegunaannya adalah untuk mengatur tampilan dokumen HTML, contohnya seperti
pengaturan jarak antar baris, teks, warna dan format border bahakan penampilan file gambar.
CSS dikembangkan oleh W3C, organisasi yang mengembangkan teknologi internet. Tujuannya tak lain untuk mempermudah proses penataan
web. Perlu diinga, CSS hanyalah berupa kumpulan script yang tujuannya bukan untuk mengantikan HTML, melainkan pelengkap agar dokumen
HTML bisa tampil lebih cantik dan dinamis. Untuk penggunaan CSS pada mobile device, ada beberapa konfigurasi
tambahan agar halaman bisa menyesuaikan lebar device. Hal-hal yang ditambahkan yaitu sebagai berikut :
commit to user
15
a. Viewport
meta name=viewport content=width=device-width, initial-scale=1.0,
maximum-scale=2.0, user-scalable=yes
1 Width
Kebanyakan browser di ponsel akan menampilkan gambaran seluruh halaman jika tidak disertakan perintah lebar di bidang konten.
Tapi agar lebih baik dan lebih dekat sampai melihat halaman web Anda, Anda perlu mengatur viewport dengan lebar perangkat. Karena
saat ini perangkat mobile memiliki lebar yang berbeda-beda. Cukup: lebar = perangkat-lebar.
2 Initial-scale
Secara umum, nilai initial-scale bernilai 1. Ini adalah zoom in zoom outskala. Pada 1, ukuran font akan menjadi yang paling pas
untuk pengguna. Namun jika 2, akan terlihat halaman diperbesar terlalu dekat.
3 Maximun-scale
Pengaturan ini membatasi seberapa jauh sebuah halaman dapat diperbesar masuk saya telah menemukan bahwa membiarkan zoom
pengguna dalam minimal 2 kali yang baik kalau-kalau ada sesuatu seperti formulir isian dan mereka salah eja kata dan ingin
menempatkan kursor dalam tempat tertentu mengetik ulang.
4 User-scalable
Awalnya nilai untuk user-scalable 0 dan 1 tetapi saat ini lebih efektif
menggunakan yes
or no.
Juga beberapa
website merekomendasikan memisahkan pilihan dengan semi-colon;, tetapi
untuk kompatibilitas dengan perangkat yang paling Anda harus menggunakan koma.
b. Stylesheet
link me dia
=Sc reen
href
=style s.c ss
type
=te xt c ss
re l
=style she e t
commit to user
16
Diikuti dengan
link me dia=
hand held , o nly sc re e n and max-width: 480p x, o nly sc re e n a nd ma x-d evic e -width: 480p x
href=
mo bile .c ss
type =
text c ss
re l=
style she e t
Diikuti juga dengan
- - [if IEMobile] link
re l
=style she e t
type
=te xt c ss
hre f
=mo bile .c ss
me dia
=sc re e n
[endif]- -
Baris pertama di atas adalah untuk memuat stylesheet default untuk browser desktop. Sayangnya tanpa melompat melalui banyak rintangan,
browser mobile juga akan memuat stylesheet ini seperti yang ditunjukkan pada baris 1 di atas. Jadi kedua stylesheet diload pada mobile tetapi
stylesheet untuk browser desktop ditimpa dengan beberapa pengaturan di styles.css sehingga lebar, mengapung dan menu terlihat semua diformat
dengan benar untuk perangkat mobile.
1 Handheld
Digunakan untuk meload stylesheet pada handphone lawas.
2 only screen and max-device-width: 480px
max-device-width digunakan untuk membatasi nilai lebar perangkat maksimal untuk stylesheet yang digunakan.
2.8 XHTML-MP