commit to user
PEMBUATAN APLIKASI MOBILE WE BSITE M-COMME RCE UNTUK
BATIK SOLO
TUGAS AKHIR
Diajukan Untuk Memenuhi Salah Satu Syarat Untuk Mencapai Gelar Ahli Madya
Program Diploma III Teknik Informatika Fakultas Matematika Dan Ilmu
Pengetahuan Alam Universitas Sebelas Maret
Disusun Oleh :
PRISANTYA MAGHRIBI FRIDAYANA
NIM. M3209066
PROGRAM DIPLOMA III TEKNIK INFORMATIKA
FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM
UNIVERSITAS SEBELAS MARET
commit to user
commit to user
commit to user
iv
ABSTRACT
Prisantya Maghribi Fridayana. 2012. B UILDING M-COMME RCE MOBILE
WEB F OR SOLO BATIK. Diploma III Informatics Engineering Matematika and
Nature Science Faculty. Sebelas Maret University Surakarta. Juny 2012.
The number of mobile users, such a s mobile phone, sma rtphone or ta blet from yea r to yea r is increa se. Based on Effective Mea sure, in 2011 ther e a re a s much a s 61.88 percent of Internet users a ccess via mobile phones in Indonesia. This number is directly proportiona l to the needs of the Internet in accessing informa tion. These developments ha ve an impa ct on the commercia l sector by the a ppeara nce of a new term, m-commerce. Batik product itself was very fa milia r in commercia l a ctivities. Implementa tion of technology in batik ma rketing is expected to increase profits. Therefore, a s a n alterna tive m-commerce, especia lly mobile web, needed in ma rket batik product.
For the first step of ma king this a pplica tion is by designing requir ements through the SRS system and then designing UML (Use Ca se Dia gra m, Activity Diagra m, Cla ss Dia gra m a nd Sequence Diag ram). From the system design then continued designing data base a nd interface. The development of this mobile web a pplications is using CodeIgniter framework version 2.1.0 with progra mming language PHP version 5.3.1 a nd MySQL data ba se version 3.2.4.
The result of the applica tion m-commer ce, mobile web Solo ba tik such a s transaction a ctivity, a ccount setting, report a nd a ccessible via mobile. For the a dministra tor, there a re product ma nagement, shipping ma na gement, web informa tion ma na gement a nd order mana gement. For the ma nag er, it ca n received reports of tra nsa ctions in a specified period. In system, there is checking a bout the status of order. If in 3 da ys, no pa yment confirma tion, order a utomatica lly canceled and stock restored.
commit to user
v
ABSTRAK
Prisantya Maghribi Fridayana. 2012. PEMBUATAN APLIKASI MOBILE
WEB SITE M-COMME RCE UNTUK BATIK SOLO, Diploma III Teknik
Informatika, Fakultas Matematika dan Ilmu Pengetahuan Alam, Universitas Sebelas Maret Surakarta. Juni 2012.
Jumlah pengguna mobile, seperti handphone, sma rtphone ataupun tablet dari tahun ke tahun semakin meningkat. Berdasarkan Effective Mea sure, pada tahun 2011 sebanyak 61,88 persen dari pengguna Internet Indonesia mengakses melalui ponsel. Peningkatan ini berbanding lurus dengan kebutuhan internet untuk mengakses informasi. Perkembangan ini berdampak pada sektor komersial dengan munculnya istilah baru m-commerce. Produk batik sendiri sudah sangat familiar dalam kegiatan perdagangan. Penerapan teknologi dalam pemasaran batik diharapkan dapat meningkatkan keuntungan. Oleh karena itu, dibutuhkan alternatif implementasi teknologi m-commerce, khususnya mobile web dalam memasarkan produk batik.
Tahap awal pembuatan aplikasi ini dengan merancang kebutuhan sistem melalui SRS lalu kemudian perancangan UML (Use Ca se Diagra m, Activity
Diagra m, Cla ss Dia gram dan Sequence Diagra m). Dari perancangan sistem
tersebut kemudian dilanjutkan perancangan database dan desain interfa ce. Pembuatan aplikasi mobile web ini menggunakan fra mework CodeIgniter versi 2.1.0 dengan bahasa pemrograman PHP versi 5.3.1 dan data ba se MySQL versi 3.2.4.
Terbangunnya aplikasi mobile web m-commerce batik Solo meliputi kegiatan transaksi jual-beli, pengaturan a ccount dan dapat diakses melalui mobile. Untuk admin meliputi manajemen produk, pengiriman, informasi web dan manajemen pesanan. Untuk manajer, mendapat laporan kegiatan transaksi dalam kurun waktu tertentu. Pada sistem, terdapat pengecekan status order. Jika lebih dari 3 hari tidak terdapat konfirmasi pembayaran, maka pesanan otomatis dibatalkan dan stok dikembalikan.
commit to user
vi
HALAMAN MOTTO
Selesaikan apa yang sudah kamu mulai (Anonim)
Sesungguhnya di balik kesulitah itu ada kemudahan. Di
commit to user
vii
HALAMAN PERSEMBAHAN
Kupersemba hkan hasil jerih pa ya h ini untuk :
1. Ora ng tua -ku dan a dik terkasih ya ng sena ntia sa mendukung
dan menyema nga ti
(Terima kasih ya ng tiada terkira untuk ka lia n)
2. Kelua rga Besa r di Madiun da n di Sra gen yang tela h ba nya k
banya k membantu sela ma ini
(Terima Ka sih da n Semoga Alla h memba la s kebaika nnya )
3. Saha bat-sa ha ba tku sayongs @OGE (feni-zhie-via ni) yang
sela lu da n terus memberika n dukunga n penuh.
(Terima ka sih cinta , terima ka sih a ta s persaha bata n ma nisnya)
4. Tema n-tema n seperjua ngan di D3 TI 2009 ya ng tida k bisa
disebutka n satu per sa tu.
(Terima ka sih a ta s semua semanga t, ba ntua n da n
commit to user
viii
KATA PENGANTAR
Assa la mu’a laykum Wa rohma tullohi Wa ba roka tuh.
Bismilla hirrohma nirrohim, segala puji dan rasa syukur hanya penulis
panjatkan ke haribaan Alloh subha nahu wa ta’a la, yang telah melimpahkan segala
kemudahannya hingga akhirnya penulis mampu menyelesaikan Tugas Akhir dan
menulis laporannya tepat waktu.
Dalam pembuatan Tugas Akhir ini termasuk kegiatan pembuatan laporan,
penulis banyak mendapat bantuan dari berbagai pihak. Tanpa bantuan Alloh
subha nahu wa ta’a la melalui mereka niscaya pembuatan Tugas Akhir ini tidak
akan berjalan lancar. Untuk itu sampaikan rasa hormat dan menghaturkan rasa
terima kasih kepada:
1. YS. Palgunadi, selaku Ketua Program Diploma III Ilmu Komputer Fakultas
Matematika dan Ilmu Pengetahuan Alam Universitas Sebelas Maret Surakarta
2. Bapak Didiek S. Wiyono, selaku pembimbing, yang telah mengarahkan,
selalu memberikan semangat kepada penulis.
3. Mas Fery Kurniawan dan Mas Yudha S. yang membantu dalam penyediaan
data produk batik ini.
4. Keluarga penulis, yang telah memberikan dorongan dan segala dukungan
kepada penulis.
5. Teman-teman seperjuangan, para OGHE yang selalu menemani dan
mendukung setiap saat.
6. Serta, Teman-teman Teknik Informatika angkatan 2009, yang telah
menyediakan waktu untuk membagi ilmu dan gurauan mereka ketika penulis
memiliki permasalahan.
Namun tidak ada hal yang sempurna di dunia ini, oleh sebab itu penulis
memohon maaf apabila terdapat kekurangan yang dalam laporan Tugas Akhir ini.
Wa ssa lamu’a la ikum Wa rohmatullohi Wa barokatuh.
Surakarta, 07 Juni 2012
commit to user
ix
DAFTAR ISI
Halaman
HALAMAN JUDUL ... i
HALAMAN PERSETUJUAN ... ii
HALAMAN PENGESAHAN ... iii
ABSTRACT ... iv
HALAMAN ABSTRAK ... v
HALAMAN MOTTO ... iv
HALAMAN PERSEMBAHAN ... vii
KATA PENGANTAR ...viii
DAFTAR ISI ... ix
DAFTAR TABEL ... xiii
DAFTAR GAMBAR ... xv
BAB I PENDAHULUAN ... 1
1.1 Latar Belakang Masalah ... 1
1.2 Rumusan Masalah... 2
1.3 Batasan Masalah ... 2
1.4 Tujuan Dan Manfaat ... 2
1.5 Metodologi Penelitian ... 2
1.6 Sistematika Penulisan ... 3
BAB II LANDASARAN TEORI ... 4
2.1 E-Commerce ... 4
2.2 M-Commerce ... 4
2.3 Batik ... 5
2.3.1 Sejarah Perkembangan Batik ... 5
2.4 Fra mework CodeIgniter ... 6
2.4.1 Konsep MVC ... 6
2.4.2 Libra ry yang Digunakan ... 6
2.4.3 Helper yang Digunakan ... 7
2.5 UML... 8
commit to user
x
2.5.2 Activity Diagra m ... 9
2.5.3 Cla ss Dia gra m ... 11
2.5.4 Sequence Dia gra m ... 12
2.6 MySQL ... 14
2.7 CSS ... 14
2.8 XHTML-MP... 16
BAB III DESAIN DAN PERANCANGAN ... 19
3.1 Analisa Kebutuhan Sistem ... 19
3.1.1 Analisa Kebutuhan Software ... 19
3.2 Perancangan Sistem ... 19
3.2.1 SRS ... 19
3.2.2 Activity Diagra m ... 21
3.2.2.1 Activity Dia gram Login ... 21
3.2.2.2 Activity Dia gram Register ... 22
3.2.2.3 Activity Dia gram Insert Da ta ... 22
3.2.2.4 Activity Dia gram Upda te Data ... 23
3.2.2.5 Activity Dia gram Delete Data ... 23
3.2.2.6 Activity Dia gra m Order (Pembelia n)... 24
3.2.3 Use Ca se Diagra m ... 25
3.2.3.1 Definisi Aktor ... 25
3.2.3.2 Use Ca se Diagra m ... 25
3.2.4 Cla ss Dia gra m Ana lysis ... 28
3.2.4.1 Cla ss Dia gra m Ana lysis Customer ... 28
3.2.4.2 Cla ss Dia gra m Ana lysis Admin ... 28
3.2.5 Cla ss Dia gra m Design ... 29
3.2.5.1 Cla ss Dia gra m Design Customer ... 29
3.2.5.2 Cla ss Dia gra m Design Admin ... 37
3.2.6 Sequence Diagra m ... 49
3.2.6.1 Sequence Diagra m Login ... 49
3.2.6.2 Sequence Dia gra m Register ... 50
commit to user
xi
3.2.6.4 Sequence Diagra m Give Testimonia l ... 50
3.2.6.5 Sequence Dia gra m Add To Cart ... 51
3.2.6.6 Sequence Dia gra m View P roduct ... 51
3.2.6.7 Sequence Dia gra m Update Ca rt ... 51
3.2.6.8 Sequence Dia gra m Ca ncel Order ... 52
3.2.6.9 Sequence Dia gra m Add Product ... 52
3.2.6.10 Sequence Dia gram Add Destina tion ... 52
3.2.6.11 Sequence Dia gra m Check Out ... 53
3.2.6.12 Sequence Dia gra m Delete Product ... 53
3.2.6.13 Sequence Dia gra m Upda te Account ... 54
3.2.6.14 Sequence Dia gra m Update Informa tion... 54
3.2.6.15 Sequence Dia gra m Change Order Status... 55
3.2.6.16 Sequence Dia gra m View Order ... 55
3.2.6.17 Sequence Dia gra m Add Shipping P rice ... 56
3.2.6.18 Sequence Dia gra m Update Shipping ... 56
3.3 Perancangan Database ... 57
3.3.1 Skema Diagram... 57
3.3.2 Definisi Tabel ... 57
3.3.2.1 Tabel User ... 57
3.3.2.2 Tabel Kategori Produk ... 57
3.3.2.3 Tabel Produk ... 58
3.3.2.4 Tabel Gambar Produk ... 58
3.3.2.5 Tabel Member ... 59
3.3.2.6 Tabel Testimonial ... 59
3.3.2.7 Tabel Alamat ... 59
3.3.2.8 Tabel Provinsi ... 60
3.3.2.9 Tabel Kota ... 60
3.3.2.10 Tabel Kurir ... 60
3.3.2.11 Tabel Tarif ... 60
3.3.2.12 Tabel Pesanan ... 61
commit to user
xii
3.3.2.14 Tabel Infoweb ... 62
3.4 Perancangan Interface ... 62
3.4.1 Perancangan Interface Admin dan Manajer ... 62
3.4.2 Perancangan Interface Customer ... 62
BAB IV IMPLEMENTASI DAN ANALISA ... 63
4.1 Implementasi Sistem ... 63
4.1.1 Halaman Utama ... 63
4.1.2 Halaman Produk Per Kategori ... 64
4.1.3 Halaman Troli/Keranjang/Cart ... 64
4.1.4 Halaman Checkout ... 65
4.1.5 Halaman Setelah Checkout... 66
4.1.6 Halaman Account User ... 69
4.1.7 Halaman Home Admin... 70
4.1.8 Halaman Pengaturan Pesanan Admin ... 70
4.1.9 Halaman Pengaturan Pengiriman Admin ... 70
4.1.9 Halaman Home Manajer ... 71
4.1.9 Halaman Laporan Grafik Transaksi Manajer ... 71
4.2 Analisa ... 75
BAB V PENUTUP... 76
5.1 Kesimpulan ... 76
5.2 Saran ... 76
commit to user
xiii
DAFTAR TABEL
No
1. Simbol Use Ca se ... 8
2. Simbol Activity Diagra m ... 10
3. Simbol Cla ss Dia gra m ... 11
4. Simbol Sequence Dia gra m ... 12
5. Modul XHTML-MP yang digunakan ... 17
6. MIME dan DOCTYPES... 18
7. SRS Fungsional Customer... 19
8. SRS Fungsional Administrator ... 20
9. SRS Fungsional Manajer ... 20
10. SRS Non Fungsional ... 21
11. Definisi Aktor ... 25
12. Tabel Deskripsi Cla ss Bounda ry MainWra pper... 30
13. Tabel Deskripsi Cla ss Control Account ... 31
14. Tabel Deskripsi Cla ss Entity TMember ... 31
15. Tabel Deskripsi Cla ss Control Testimonia l ... 32
16. Tabel Deskripsi Cla ss Entity TTestimonia l ... 32
17. Tabel Deskripsi Cla ss Control Product ... 33
18. Tabel Deskripsi Cla ss Entity TTroduct ... 34
19. Tabel Deskripsi Cla ss Control Order ... 34
20. Tabel Deskripsi Cla ss Entity TO rder ... 35
21. Tabel Deskripsi Cla ss Entity TOrderDeta il ... 36
22. Tabel Deskripsi Cla ss Entity TShipping ... 36
23. Tabel Deskripsi Cla ss Bounda ry Main ... 38
24. Tabel Deskripsi Cla ss Control Admin ... 39
25. Tabel Deskripsi Cla ss Entity TAdmin ... 39
26. Tabel Deskripsi Cla ss Control Member ... 40
commit to user
xiv
28. Tabel Deskripsi Cla ss Control Testimonia lControl ... 41
29. Tabel Deskripsi Cla ss Entity TTestimonia l ... 41
30. Tabel Deskripsi Cla ss Control Informa tion ... 42
31. Tabel Deskripsi Cla ss Entity TInforma ion ... 42
32. Tabel Deskripsi Cla ss Control ProductControl ... 43
33. Tabel Deskripsi Cla ss Entity TProduct ... 43
34. Tabel Deskripsi Cla ss Control OrderControl ... 44
35. Tabel Deskripsi Cla ss Entity TOrder ... 45
36. Tabel Deskripsi Cla ss Entity TOrderDeta il ... 46
37. Tabel Deskripsi Cla ss Control ShippingControl ... 46
38. Tabel Deskripsi Cla ss Entity TShipping ... 47
39. Tabel Deskripsi Cla ss Entity TCourier ... 48
40. Tabel Deskripsi Cla ss Entity TDestina tion ... 48
41. Tabel User ... 57
42. Tabel Kategori Produk ... 58
43. Tabel Produk... 58
44. Tabel Gambar Produk ... 58
45. Tabel Member ... 59
46. Tabel Testimonial ... 59
47. Tabel Alamat ... 59
48. Tabel Provinsi ... 60
49. Tabel Kota ... 60
50. Tabel Kurir ... 60
51. Tabel Tarif ... 61
52. Tabel Pesanan ... 61
53. Tabel Detail Pesanan ... 61
commit to user
xv
DAFTAR GAMBAR
No
1. Alur Teknologi WAP ... 17
2. Alur Halaman Web WAP ... 17
3. Activity Diagra m Login ... 21
4. Activity Diagra m Register ... 22
5. Activity Diagra m Insert ... 22
6. Activity Diagra m Upda te Da ta ... 23
7. Activity Diagra m Delete Da ta ... 23
8. Activity Diagra m Order (Pembelian) ... 24
9. Use Ca se Diagra m User ... 25
10. Use Ca se Diagra m Cu stomer ... 26
11. Use Ca se Diagra m Mana jer ... 26
12. Use Ca se Diagra m Admin ... 27
13. Cla ss Dia gra m Ana lysis Customer ... 28
14. Cla ss Dia gra m Ana lysis Admin ... 28
15. Cla ss Dia gra m Design Customer ... 29
16. Cla ss Dia gra m Design Admin ... 37
17. Sequence Dia gra m Login Customer ... 49
18. Sequence Dia gra m Login Admin ... 49
19. Sequence Dia gra m Register ... 50
20. Sequence Dia gra m Update Account ... 50
21. Sequence Dia gra m Give Testimonia l ... 50
22. Sequence Dia gra m Add To Ca rt ... 51
23. Sequence Dia gram View P roduct ... 51
24. Sequence Dia gra m Update Ca rt ... 51
25. Sequence Dia gra m Ca ncel Order ... 52
26. Sequence Dia gra m Add P roduct... 52
commit to user
xvi
28. Sequence Dia gra m CheckOut ... 53
29. Sequence Dia gra m Delete Product ... 53
30. Sequence Dia gra m Update Product ... 54
31. Sequence Dia gra m Update Informa tion ... 54
32. Sequence Dia gra m Change Order Status ... 55
33. Sequence Dia gra m View Order ... 55
34. Sequence Dia gra m Add Shipping Price ... 56
35. Sequence Dia gra m Update Shipping ... 56
36. Skema Diagram... 57
37. Perancangan Interface Admin dan Manajer ... 62
38. Perancangan Interface Customer ... 62
39. Tampilan Halaman Utama ... 63
40. Tampilan Halaman Produk per Kategori ... 64
41. Halaman Troli/Keranjang/Cart ... 64
42. Halaman Login ... 65
43. Halaman CheckOut ... 65
44. Halaman Checkut Sukses ... 67
45. Halaman Account... 69
46. Halaman Home Admin... 70
47. Halaman Pengaturan Pesanan Admin ... 70
48. Halaman Pengaturan Pengiriman Admin ... 71
49. Halaman Manajer ... 71
50. Halaman Laporan Grafik Transaksi Manajer ... 72
51. Halaman Detail Order Manajer ... 72
commit to user
1
BAB I
PENDAHULUAN
1.1 Latar Belakang Masalah
Perkembangan bisnis dan teknologi pada saat ini mulai melirik pada
mobile device atau perangkat mobile. Masyarakat Indonesia sudah banyak
memiliki perangkat mobile, dimulai dari perangkat mobile low end hingga sma rt
phone yang kemampuannya hampir menyamai PC. (http://www.teknojurnal.com).
E-commerce kini mulai merambah pada mobile dan lebih dikenal dengan
istilah m-commerce. Secara prinsip, m-commerce hampir sama dengan
e-commerce yang membedakan hanya perangkat yang digunakan. M-e-commerce
sendiri mengalami perkembangan dengan munculnya berbagai jenis aplikasi
dengan basis mobile web atau mobile a pps.
Berdasarkan data dari Effective Measure, firma yang memiliki spesialisasi
dalam pengukuran statistik web, pada tahun 2011 sebanyak 61,88 persen dari
pengguna Internet Indonesia mengakses melalui ponsel. Sementara 38,12 persen
lainnya mengakses Internet bukan dari ponsel. Masih menggunakan data dari
Effective Measure, pengguna internet di Indonesia di tahun 2011 mencapai
39.100.000 orang (peringkat ke-8 di dunia). Jika mengacu pada data tersebut,
maka pengguna internet mobile di Indonesia adalah sekitar 24.195.080 orang.
Dengan data tersebut, maka penulis memilih untuk membuat aplikasi
m-commerce berbasis mobile web. Selain itu, jangkauan mobile web lebih luas
karena bisa diakses oleh berbagai platform ponsel melalui mobile browser.
Produk batik di Solo menjadi favorit baik oleh konsumen domestik
maupun luar negeri. Melihat perkembangan bisnis pada sektor mobile seperti yang
dijabarkan di atas, maka produk batik ini perlu dipasarkan juga secara mobile.
Sehingga bisa meningkatkan kegiatan transaksi untuk produk batik, lebih
fleksibel, lebih cepat dan lebih terjangkau. Hal ini sebagai alternatif implementasi
commit to user
Berdasarkan uraian diatas penulis bermaksud untuk membuat Tugas Akhir
dengan judul “Pembuatan Aplikasi Mobile Web M-Commerce untuk Toko Batik
Solo” .
1.2 Rumusan Masalah
Bagaimana membuat model dan implementasi m-commerce Toko Batik
Solo pada mobile web ?
1.3 Batasan Masalah
1. Aplikasi ini diakses melalui browser untuk mobile.
2. Aplikasi ini ditujukan untuk sisi user/customer dengan prinsip m-commer ce
seperti mengadakan transaksi pembelian batik, pembayaran, pengiriman dan
melihat katalog produk
3. Aplikasi web ini dibuat dengan menggunakan framework CodeIgniter,
data base MySQL dan CSS for mobile.
4. Wilayah transaksi berada di Indonesia dan pembayaran secara manual
5. Laporan Pada sisi manajer dalam bentuk grafik
1.4 Tujuan dan Manfaat
Tujuan dari pembuatan Tugas Akhir ini yaitu dapat membuat aplikasi
mobile web m-commer ce untuk Toko Batik Solo.
Manfaat dari pembuatan Tugas Akhir ini yaitu memberi kemudahan dalam
kegiatan transaksi untuk customer dan juga pemilik.
1.5 Metodologi Penelitian
Adapun tahap-tahap dalam melakukan perancangan dan pembuatan aplikasi
m-commerce pada mobile web ini antara lain sebagai berikut :
1. Studi pustaka, pada tahap ini dilakukan studi untuk memahami pemrograman
PHP khususnya fra mework CodeIgniter, CSS untuk mobile, XHTML-MP,
commit to user
2. Perencanaan sistem, pada tahap ini dilakukan perancangan sistem yang
meliputi: rancangan desain tampilan aplikasi, rancangan sistem dan rancangan
data base-nya.
3. Pembuatan aplikasi yang mencakup user/pengunjung, manajer dan admin.
4. Pengujian system. Pengujian dilakukan dengan browser mobile emulator
untuk menguji apakah aplikasi dapat berjalan dengan baik pada berbagai
platform mobile.
5. Penyusunan laporan, pada tahap ini dilakukan penyusunan laporan lengkap
dan detail tentang aplikasi yang dibuat.
1.6 Sistematika Penulisan
Sistematika yang digunakan dalam penulisan ini disusun dalam lima bab
meliputi :
BAB I Pendahuluan
Dalam bagian pendahuluan akan dijelaskan tentang latar belakang masalah,
batasan masalah, tujuan dan manfaat penelitian, metode penyelesaian masalah,
serta sistematika penulisan laporan.
BAB II Landasan Teori
Berisi teori yang mendasari penyusunan dan penulisan tugas akhir.
BAB III Desain dan Perancangan
Berisi tentang perancangan aplikasi meliputi perancangan sistem menggunakan
UML (Unified Modeling La ngua ge) dan perancangan data base menggunakan
Skema Diagra m.
BAB IV Implementasi dan Analisa
Memuat hasil dari analisis dan perancangan sistem yang ditampilkan dalam
bentuk aplikasi yang diharapkan.
BAB V Penutup
Merupakan bab terakhir yang memuat kesimpulan dari aplikasi ini secara
keseluruhan untuk diimplementasikan serta saran-saran yang diperlukan dalam
commit to user
4 BAB II
LANDASAN TEORI
2.1E -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.2M-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
commit to user
2.3Batik
Batik merupakan kain bergambar yg pembuatannya secara khusus
dengan menuliskan atau menerakan malam pada kain tersebut, kemudian
pengolahannya diproses dengan cara tertentu.
(http://kamusbahasaindonesia.org/batik)
2.3.1Sejarah 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.
commit to user
2.4Framework 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 html/xhtml 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
commit to user
- 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_hidden('nama', '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
commit to user
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-unit 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
commit to user
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
commit to user
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 sistem/user 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
commit to user
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
commit to user
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
commit to user
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 operasi/metode
yang ada pada objek yang
dibuat
1: masukkan
Pesan tipe send Menyatakan bahwa suatu
objek mengirimkan data
masukkan/informasi 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
commit to user
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
commit to user
a. Viewport
<metaname="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
commit to user
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.8XHTML-MP (Mobile Profile)
XHTML-MP adalah bahasa markup yang didefinisikan dalam WAP
2.0. Tujuan pembangunan XHTML-MP adalah menggabungkan teknologi
mobile browsing dan WWW. XHTML-MP merupakan superset dari
XHTML Basic, yang dibuat lebih sederhana dari XHTML 1.0 (versi XML
dari HTML 4.0). XHTML Basic dibangun untuk device yang lebih kecil dan
non computer, seperti mobile phone, PDA, pager, dan sejenisnya. (sumber:
commit to user
Gambar 2.1. Alur Teknologi WAP
Gambar 2.2. Alur Halaman Web WAP
Berikut merupakan modul-modul dalam XHTML-MP:
Tabel 2.5. Modul XHTML-MP yang digunakan
Module Element
Structure Body,head,html,title
Text H1,h2,h3,h4,h5,h6,span,strong,div
Hypertext a
list Li,ul,ol
presentation small,i,b
form Button,fieldset,form,input,label,legend,select,option,t
extarea
table Table,tr,td,tr
image img
commit to user
MIME
[image:34.595.146.504.159.506.2]Standar MIME dan DOCTYPE-nya dapat dilihat pada tabel di bawah ini:
Tabel 2.6. Tabel MIME dan DOCTYPE
Standard Preferred MIME type
DOCTYPE
XHTML MP 1.2 (last version)
Application/ Vnd.wap.xhtml+xml
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML
Mobile 1.2//EN”
“http://www.openmobilealliances.org/texh/DTD/xhtml-mobile12.dtd”>
XHTML 1.0
Application/ xhtml+xml
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml-trnsitional.dtd”>
HTML 4.0 Text/html <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional/./EN” “http://www.w3.org/TR/html4/loose.dtd”>
HTML 5.0 Text/html <!DOCTYPE html>
XHTML-MP Syntax Rules
XHTML menggunakan aturan syntax yang sama dengan XML.
Berikut beberapa aturan yang harus diperhatikan dalam XML maupun
XHTML:
· Case sensitive untuk semua nama elemen, tags, dan attribute. Untuk
XHTML-MP menggunakan huruf kecil (lower case)
- Tag harus ditutup dengan benar
- Nilai attribute (value) harus berada diantara “ atau ‘
- Tags harus disarangkan dengan benar. Contoh : <p><i>text</i></p>
- Empty tags harus dalam kondisi “self closing”, contoh: <br/>
Perlu pendefinisian doctype agar dapat dideteksi oleh browser.
Pendefinisian ini diletakkan sebelum tag hea d.
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
commit to user
19 BAB III
ANALISIS DAN PERANCANGAN SISTEM
3.1 Analisa Kebutuhan Sistem
3.1.1 Analisis Kebutuhan Software
1. Softwa re yang digunakan untuk membuat aplikasi m-commerce ini
sebagai berikut :
a. XAMPP versi 1.7.3 (MySQL versi 3.2.4, PHP versi 5.3.1)
b. Opera Mobile Emulator
c. Notepad++
d. Sistem Operasi Windows 7
e. Browser (Google Chrome, Mozilla)
f. Opera Mobile Emulator
2. Softwa re yang digunakan untuk menjalankan aplikasi m-commerce ini
pada klien yaitu mobile browser.
3.2 Perancangan Sistem
Pengembangan aplikasi berorientasi objek memerlukan beberapa tahapan
analisa yang harus dilalui, pada tahap ini dilakukan pemodelan menggunakan
UML. Untuk menggunakan UML ada beberapa hal yang dilakukan yaitu
membuat Activity Dia gra m, Use Ca se Dia gra m, Cla ss Diag ram dan
Sequence Dia gra m.
3.2.1SRS
Kebutuhan fungsional merupakan kebutuhan – kebutuhan yang
berhubungan dengan proses bisnis dari sistem yang dibuat. Dari analisa
[image:35.595.131.491.226.488.2]yang dilakukan, berikut tabel kebutuhan Fungsional untuk tiap aktor :
Tabel 3.1. SRS Fungsional Customer
Kode Deskripsi Kebutuhan Fungsional
SRS-MFP01 Customer mendaftar account
commit to user
SRS-MFP03 Customer melihat katalog produk
SRS-MFP04 Customer mengelola keranjang belanja
SRS-MFP05 Customer mengelola data account
SRS-MFP06 Customer melihat pesanan
[image:36.595.151.475.127.659.2]SRS-MFP07 Customer memberi testimonial
Tabel 3.2. SRS Fungsional Administrator
Kode Dekripsi Kebutuhan Fungsional
SRS-MFA01 Admin Login/Logout
SRS-MFA02 Admin mengelola data produk
SRS-MFA03 Admin mengelola data pesanan
SRS-MFA04 Admin mengelola biaya pengiriman
SRS-MFA05 Admin mengelola pesanan
SRS-MFA06 Admin mengelola data member/user
SRS-MFA07 Admin mengelola berita
SRS-MFA08 Admin mengelola pengiriman
Tabel 3.3. SRS Fungsional Manajer
Kode Deskripsi Kebutuhan Fungsional
SRS-MFM01 Manajer Login/Logout
SRS-MFM02 Manajer mengelola account
SRS-MFM03 Manajer melihat laporan produk best seller
SRS-MFM04 Manajer melihat laporan transaksi per bulan
SRS-MFM06
Manajer melihat laporan pesanan berdasarkan
status per bulan
SRS-MFM07 Manajer melihat laporan penjualan per kategori
Kebutuhan non fungsional berhubungan dengan interaksi antar user
dengan aplikasi yang dibuat. Dari hasil analisa yang dilakukan, berikut
commit to user
Tabel 3.4. SRS Non Fungsional
Kode Deskripsi Kebutuhan Non-fungsional
SRS-MNF01 Tampilan user-friendly (jelas, informatif dan menarik)
SRS-MNF02 Ukuran gambar produk menyesuaikan ukuran layar perangkat
SRS-MNF03 Report/Laporan dalam grafik
3.2.2Acitivity Diagram
Activity Diagram digunakan untuk menjabarkan kegiatan dalam
sistem, yang kemudian menjadi acuan kebutuhan sistem (Use Case) dan alur
sistem (Sequence Diagram). Berikut daftar Activity Diagram dalam sistem
ini :
3.2.2.1Activity Diagram Login
Gambar 3.1. Activity Diagram Login
Penjelasan :
Berikut alur login dari
user. Sistem akan
menampilkan Login Form
kemudian User mengisi.
Sistem mengirim data
tersebut untuk dicocokkan
pada database. Jika data
cocok, diarahkan ke halaman
account. Jika tidak,
dikembalikan ke Login
Form. Fill Form
View Login Form
Show Account Page Validasi
invalid
commit to user
3.2.2.2Activity Diagram Register
Gambar 3.2. Activity Diagram Register
Penjelasan :
User mengisi form
registrasi yang ditampilkan.
Form divalidasi, jika benar
ditampilkan pesan sukses,
jika salah ditampilkan pesan
error.
3.2.2.3Activity Diagram Insert Data
Gambar 3.3. Activity Diagram Insert
Penjelasan :
User mengisi form penambahan
data yang ditampilkan. Form
divalidasi, jika benar
ditampilkan pesan sukses, jika
salah ditampilkan pesan error. Choos e
Register Menu
Fill Form View Register
Form
View Suc cess Registration Info
Show Error Validation Validasi
invalid
valid
View List
View Insert Form
Input Dat a on Form
Validasi
View Succ ess Insert
commit to user
3.2.2.4Activity Diagram Update Data
Gambar 3.4. Activity Diagram Update Data
Penjelasan :
User mengisi form
pembaruan data yang
ditampilkan. Form
divalidasi, jika benar
ditampilkan pesan sukses,
jika salah ditampilkan pesan
error.
3.2.2.5Activity Diagram Delete Data
Gambar 3.5. Activity Diagram Delete Data
Penjelasan :
User mengisi form penghapusan
data yang ditampilkan. Form
divalidasi, jika benar ditampilkan
pesan sukses, jika salah
ditampilkan pesan error. V i e w L is t
V ie w U p d a t e F o r m
In p u t D a t a o n F o r m V a l id a s i
V i e w S u c c e s s U p d a t e V ie w D e t a il
In fo r m a ti o n
Admin
View List
View Confirmation Delete
View Success Update Choose To Delete
Data deleted no
yes
commit to user
3.2.2.6Activity Diagram Order (Pembelian)
Gambar 3.6. Activity Diagram Order (Pembelian)
Penjelasan :
User melihat produk dan menambahkan ke keranjang jika berminat.
Jika selesai menambahkan ke keranjang, user checkout lalu muncul total
bayar. User membayar pesanan di luar sistem dan konfirmasi di luar
sistem. Admin kemudian mengganti status pesanan hingga pengiriman.
Jika user sudah menerima pesanan, user mengganti status pesanan
menjadi Diterima. Manajer mendapat laporan. Browse Product
Buy Product
Input Information Get Total
Payment
Show Order
Receive Order Login
Already Login
Get Order Data
Check Us er Payment (Manually)
Cancel Order No Paid?
Process Order
Send Order
Get Report No
Yes
M an a g e r A d m i n
commit to user
3.2.3Use CaseDiagram
3.2.3.1Definisi Aktor
Dalam sistem terdapat 3 aktor yaitu admin, customer, manajer dengan
satu aktor generalisasi ketiganya yaitu user. Berikut deskripsinya:
Tabel 3.5. Definisi Aktor
No Aktor Deskripsi
1 User Melakukan kegiatan umum yang dilakukan
oleh ketiga aktor lainnya, seperti melihat katalog
produk, mendaftar sebagai pembeli, login/logout
dan sebagainya.
2 Admin Melakukan kegiatan pengaturan sistem dan
transaksi penjualan. Contoh kegiatan transaksi
CRUD untuk produk, pengaturan order, customer
dan testimonial.
3 Customer Melakukan kegiatan pembelian produk, login
setelah mendaftar dan pengaturan account dan
order history.
4 Manajer Melihat laporan penjualan untuk waktu tertentu.
3.2.3.2Diagram Use Case
Berikut diagram use case untuk aktor User :
Gambar 3.7. Use Ca se Diagra m User
Update Ac count
Manager
Admin Login
Manage Account <<include>>
View W eb Information Register
View Product Catalog Member
Logout
Search Product <<extend>> User
Logout
commit to user
Berikut diagram Use Case untuk aktor Customer :
Gambar 3.8. Use Ca se Diagra m Customer
Berikut diagram Use Case untuk aktor Manajer :
Gambar 3.9. Use Ca se Diagra m Mana jer
Update Shopping C Add to Shopping Cart
Cancel Order
View Shopping Cart
Checkout
<<extend>>
Choose Address
Choose Shipping Courier
View Order History
<<extend>>
Give Testimonial
Buy Product
<<extend>>
<<include>>
Login <<include>>
Member
<<include>>
<<include>>
<<include>>
View Trans action Report View Testimonial Report Manager
Login
View Mont hly Report
commit to user
Berikut diagram Use Case untuk aktor Admin :
Gambar 3.10. Use Case Dia gram Admin Update News Information
Update Payment Information
Update Contact Information Update Produc t
Update Courier
Update Destinat ion Area
Update Shipping Price Cancel Order
Delete Product
Change Order Stat us View Account User
View Product <<ex tend>>
<<extend>> Add Produc t
Update Information
<<extend>>
<<extend>> <<extend>>
Add Courier
Add Dest ination Area
View Courier View Order
<<ex tend>>
View Dest ination Area
VIew Shipping Price <<include>>
<<include>> Admin
<<extend>>
Delete Courier
Delet e Dest ination Area <<ex tend>>
<<ex tend>>
Delete Shipping Price
<<ex tend>> <<ex tend>> <<ex tend>>
commit to user
3.2.4 ClassDiagram Analysis
3.2.4.1Class Diagram Customer
Gambar 3.11. Class Diagram Analysis Customer
3.2.4.2Class Diagram Admin
Gambar 3.12. Class Diagram Analysis Admin
M a inW r a ppe r
Account
TM e m be r Login
Pr oduct
TPr oduct
Or de r
TOr de r
TOr de r De t a il Te st im onia l
TTe st im onia l
TShipping
Main Admin
Member
Product Control
ShippingControl
I nforma tion
Orde rControl
Te stimonialCont rol TAdmin
TMember
TTestimonial
TOrder TShipping
TOrde rDetail
TProduct TInformation
commit to user
3.2.5Class Diagram Design
3.2.5.1Class Diagram Customer
Gambar 3.13. Class Diagram Design Customer
Berikut ini adalah tabel yang berisi deskripsi dari cla ss-cla ss yang ada
pada aplikasi m-commer ce batik solo yang mana telah digambarkan pada
class diagram di atas.
M ainWrapp er
< <boundary >>
-uiRegister () -uiLogin() -uiManajemenA ccount( ) -uiTest imonial() -uiProduk () -uiCart () -uiCheckout () -uiOrder( ) Account
< <c ontrol> >
-ViewAccount ($id_member : Integer) -Updat eAccount($id_member: I nteger ) -c ek_login( email: String, password: St ring): Boolean -logout( )
TM em ber
< <ent it y> > -idMember : Int eger
-TanggalLahir : Dat e -J enisKelamin: String -TanggalDaf tar: Date -Email: St ring -Pas sword: Str ing -get Member( $id_member : Integer)
-s etMember ($id_member: I nteger, $tgl_lhr : Date, $jk: St ring, $tgl_dftr : Dat e, $email: String, $pass : St ring) -get AllMember()
Test im onial
< <cont rol>>
-A ddTestimonial($id_member: Int eger ) -ViewTest imonial($id_member: Integer)
TTest imonial
< <ent ity > > -id_tes timonial: Integer
-t gl_testimonial: date -id_member: Int eger -isi_t est imonial: Str ing -s tat us: String
-s etTest imonial( $id_t est i: Integer, $id_member : I nt eger, $t gl_testi: Date, $isi_t est i: Str ing) -get Testimonial( $id_member: Int eger )
Order
< <cont rol>>
-A ddtoCar t($id_pr oduk: Int eger , $jml: Integer) -Updat eCart( $id_produk: Integer) -Check out()
-ongkir ($ber at: Integer , $tar if : I nt eger) : Integer -addOrder ()
-c ancelOrder ($id_order : String) -ViewOr derHistory ($id_member: Int eger )
TOrder
< <ent ity > > -idOrder: St ring
-TanggalPesan: Date -Status: Integer -id_member: Int eger -Ongkir : Integer -Kur ir : Str ing -alamat: Str ing
-get MemberOrder ($id_member: I nt eger)
-s etOrder ($id_member: Int eger, $id_order : Integer , $tgl_pesan: Date, $stat us: Integer, $ongkir: I nteger, $alamat : St ring, $kur ir: Str ing) -get Or der( $idOrder: Str ing)
-s etOrder St atus($idOrder : String, $st atus: Integer) -get AllOrder ()
TOrderDet ail
< <ent ity > > -I dOrder: Integer
-idProduk: Integer -J umlah: Integer -Har ga: I nteger -Ber at: Integer
-s etOrder Det ail($idProduk: Integer , $idOrder : Integer , $jml: I nteger , $hr ga: Integer, $br t: I nteger ) -get Or derDet ail( $idOrder: I nt eger)
Product
< <cont rol>>
-ViewAllCategor i() -ViewProductByI D($id_pr oduk: I nteger ) -ViewProductByCategory( $id_kat egor i: Int eger)
TPro duct
< <ent ity > > -idProduk: Integer -NamaProduk: String -Har ga: I nteger -Stok: Integer -Ber at: Integer -GambarProduk: St ring -I d_Kategori: I nteger -get Categor y () -get Pr odukBy ID($id_pr oduk: I nt eger) -get AllProdukBy Categor y( $id_kategori: I nt eger) -get AllProduk()
-get Gambar perProduk( $idProduk : I nt eger)
-s etGambarProduk ($idProduk: I nteger , $gbr : String, $id_gbr : Int eger)
TShipping
< <ent it y> > -idShipping: Integer
-idKota: I nteger -idKurir: I nteger -Tar if _kg: Int eger
-get Tarif($idKot a: Int eger , $idKurir : Integer) -get AllShipping()
-get Shipping( $idShipping: Int eger)
commit to user
1. Class B oun dary MainWrapper
[image:46.595.169.504.180.597.2]Merupakan kelas yang menangani interfa ce/tampilan untuk Customer.
Tabel 3.6. Tabel Deskripsi Cla ss Bounda ry Ma inWrapper
Atribut
Nama Atribut Visibility Type
- - -
Method
Nama Method Fungsi
uiRegister () Digunakan untuk memanggil interface form
registrasi.
uiLogin () Digunakan untuk memanggil interface form
Login Customer.
uiManajemenAccount () Digunakan untuk memanggil interface
manajemen account customer yang login.
uiTestimonial() Digunakan untuk memanggil interface
testimonial
uiProduk() Digunakan untuk memanggil interface
produk
uiCart() Digunakan untuk memanggil interface
keranjang
uiCheckout() Digunakan untuk memanggil interface
checkout dari keranjang
uiOrder Digunakan untuk memanggil interface
daftar pesanan sebelumnya.
2. ClassControl Accou nt
Merupakan kelas control yang digunakan untuk mengontrol proses
pengelolaan account member pada sisi user, yang menghubungkan
commit to user
Tabel 3.7. Tabel Deskripsi Cla ss Control Account
Atribut
Nama Atribut Visibility Type
- - -
Method
Nama Method Fungsi
register() Digunakan untuk menambahkan
data anggota baru pada database
ViewAccount($id_member) Digunakan untuk mengambil
informasi account berdasarkan id
user yang login
UpdateAccount($id_member) Digunakan untuk memperbarui data
user pada database berdasarkan id
user yang login
Cek_login ($email, $password) Digunakan untuk mengecek
username dan password pada
database untuk mengakses halaman
account
Logout() Menghapus session yang digunakan
untuk login
3. ClassE ntity TMember
Merupakan kelas entity yang berisi data dari tabel member
Tabel 3.8. Tabel Deskripsi Cla ss Entity TMember
Atribut
Nama Atribut Visibilty Type
Id_member Private Integer
TanggalLahir Private Date
JenisKelamin Private String
TanggalDaftar Private Date
Email Private String
commit to user
Method
Nama Method Fungsi
setMember($id_member,
$tgl_lhr, $jk, $tgl_dftr,
$email, $pass)
Digunakan untuk menyimpan data
member dalam database
getMember($id_member) Digunakan untuk mengambil data
member berdasarkan id member
4. Class Control Testimonial
Merupakan kelas control yang digunakan untuk mengelola
testimonial pada member pada sisi user, yang menghubungkan kelas
boundary MainWrapper dengan kelas entity TTestimonial.
Tabel 3.9. Tabel Deskripsi Cla ss Control Testimonia l
Atribut
Nama Atribut Visibilty Type
- - -
Method
Nama Method Fungsi
AddTestimonial($id_member) Digunakan untuk menambahkan
testimonial berdasarkan id user yang
login
ViewTestimonial($id_member) Digunakan untuk menampilkan
testimonial berdasarkan id user yang
login
5. Class En tity TTestimonial
Merupakan kelas entity yang berisi data dari tabel testimonial
Tabel 3.10. Tabel Deskripsi Cla ss Entity TTestimonial
Atribut
Nama Atribut Visibilty Type
commit to user
Tgl_Testimonial Private Date
Id_Member Private Integer
Isi_Testimonial Private String
status Private String
Method
Nama Method Fungsi
setTestimonial($id_testi,
$tgl_testi, $id_member, $isi)
Digunakan untuk menyimpan data
testimonial dalam database
getTestimonial($id_member) Digunakan untuk mengambil data
testimonial berdasarkan id member
6. Class Control P roduct
Merupakan kelas control yang digunakan untuk menampilkan
daftar produk pada sisi user, yang menghubungkan kelas boundar y
MainWrapper dengan kelas entity TProduct.
Tabel 3.11. Tabel Deskripsi Cla ss Control Product
Atribut
Nama Atribut Visibilty Type
- - -
Method
Nama Method Fungsi
ViewAllCategory() Digunakan untuk menampilkan
keseluruhan data kategori
ViewProductByID($id_produk) Digunakan untuk menampilkan
informasi spesifik produk
ViewProductByCategory
($id_kategori)
Digunakan untuk menampilkan
produk per kategori
7. Class En tity TProdu ct
commit to user
Tabel 3.12. Tabel Deskripsi Cla ss Entity TProduct
Atribut
Nama Atribut Visibilty Type
Id_Produk Private Integer
NamaProduk Private String
Harga Private Integer
Stok Private Integer
Berat Private Integer
GambarProduk Private String
Id_Kategori Private Integer
Method
Nama Method Fungsi
getCategory() Digunakan untuk mengambil semua
data kategori dari database
getProdukByID($id_produk) Digunakan untuk mengambil informasi
produk berdasarkan id produk
getAllProdukByCategory
($id_kategori)
Digunakan untuk mengambil data
produk per kategori
8. Class Control Order
Merupakan kelas control yang digunakan untuk mengontrol
proses pemesanan produk pada sisi user, yang menghubungkan kelas
boundary MainWrapper dengan kelas entity TOrder, TOrderDetail dan
TShipping.
Tabel 3.13. Tabel Deskripsi Cla ss Control Order
Atribut
Nama Atribut Visibilty Type
- - -
Method
Nama Method Fungsi
AddtoCart($id_produk, $jml) Digunakan untuk menambahkan
produk ke keranjang
commit to user
keranjang
Checkout() Digunakan untuk menampilkan
halaman checkout. Terdapat
pengecekan apakah user telah login
atau belum
ongkir($berat, $tarif): Integer Untuk menghitung total ongkos
kirim dan mengembalikan nilai
bertipe integer
addOrder() Digunakan untuk menambahkan
pesanan dari form yang diisi user
cancelOrder($id_order) Digunakan untuk membatalkan
pesanan berdasarkan id pesanan
ViewOrderHistory($id_member) Digunakan untuk mengambil
history pemesanan berdasarkan id
user yang login
9. Class En tity TOrder
Merupakan kelas entity yang berisi data dari tabel order
Tabel 3.14. Tabel Deskripsi Cla ss Entity TOrder
Atribut
Nama Atribut Visibilty Type
Id_Order Private String
TanggalPesan Private Date
Status Private Integer
Id_Member Private Integer
Ongkir Private Integer
Kurir Private String
Alamat Private String
Method
Nama Method Fungsi
setOrder($id_order, $tgl_psn,
$stat, $ id_member ,$ongkir,
Digunakan untuk menyimpan data
commit to user
$kurir, $alamat)
getOrder($id_member) Digunakan untuk mengambil data
pesanan berdasarkan id member
10.Class En tity TOrderDetail
Merupakan kelas entity yang berisi data dari tabel detail_pesanan.
Tabel 3.15. Tabel Deskripsi Cla ss Entity TOrderDeta il
Atribut
Nama Atribut Visibilty Type
IdOrder Private Integer
IdProduk Private Integer
Jumlah Private Integer
Harga Private Integer
Berat Private Integer
Method
Nama Method Fungsi
setOrderDetail($idProduk,
$idOrder, $jml, $hrga, $brt)
Digunakan untuk menambahkan data
pesanan detail dengan idOrder
tergantung pada Entity TOrder
getOrderDetail($idOrder) Digunakan untuk mengambil data
pesanan detail berdasarkan idOrder
11.Class En tity TShipping
Merupakan kelas entity yang berisi data dari tabel tarif pengiriman
Tabel 3.16. Tabel Deskripsi Cla ss Entity TShipping
Atribut
Nama Atribut Visibilty Type
IdShipping Private Integer
IdKota Private Integer
IdKurir Private Integer
Tarif_k Private Integer
Method
commit to user
getTarif($idKota,$idKurir) Digunakan untuk mengambil data
shipping berdasarkan id kota dan id
kurir
3.2.5.2Class Diagram Admin
Gambar 3.14. Class Diagram Design Admin
Main
< <boundary > >
-uiManajemenPr oduct() -uiManajemenShipping() -uiManajemenMember () -uiManajemenInfor mation() -uiLogin( ) -uiManajemenAdmin( ) -uiManajemenTest imonial() -uiManajemenOr der() -uiManajemenDestination() Admin
< <cont rol> >
-cek_login($user name: St ring, $pas sword: String, $level: String) : Boolean -logout ()
-updateAdmin($id_user: Integer )
Member
< <cont rol>>
-ViewAllMember () -ViewMemberByI D($id_member: Int eger)
ProductContr ol
< <cont rol>>
-ViewAllProduct () -ViewPr oduct ByI D($idProduk: Int eger) -UpdateProduct( $idProduk : Integer ) -AddProduct () -DeletePr oduct ($idPr oduk: I nt eger) -AddGambar Produk($idProduk : I nteger ) -DeleteGambar Produk($idGambar : Int eger)
ShippingControl
< <cont rol>>
-AddShipping() -ViewShipping() -UpdateShipping($idShipping: Int eger) -DeleteShipping($idShipping: I nteger) -AddDestinat ion() -UpdateDestination($idKot a: I nteger) -DeleteDestinat ion($idKota: Integer ) -AddCour ier () -UpdateCourier ($idKurir: Integer) -DeleteCour ier( $idKurir: Integer )
I nformation
<< control> >
-UpdateInfor mation($jenis_info: Str ing) -ViewInformation( $jenis_inf o: St ring)
OrderControl
< <cont rol> >
-ViewAllOr der() -UpdateOrder(
