pembuatan aplikasi mobile website m-commerce untuk …/pembuatan... · pembuatan aplikasi mobile...

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

PEMBUATAN APLIKASI MOBILE WEBSITE M-COMMERCE 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

2012


commit to user

ii


commit to user

iii


commit to user

iv

ABSTRACT

Prisantya Maghribi Fridayana. 2012. BUILDING M-COMMERCE MOBILE WEB FOR SOLO BATIK. Diploma III Informatics Engineering Matematika and Nature Science Faculty. Sebelas Maret University Surakarta. Juny 2012.

The number of mobile users, such as mobile phone, smartphone or tablet from year to year is increase. Based on Effective Measure, in 2011 there are as much as 61.88 percent of Internet users access via mobile phones in Indonesia. This number is directly proportional to the needs of the Internet in accessing information. These developments have an impact on the commercial sector by the appearance of a new term, m-commerce. Batik product itself was very familiar in commercial activities. Implementation of technology in batik marketing is expected to increase profits. Therefore, as an alternative m-commerce, especially mobile web, needed in market batik product.

For the first step of making this application is by designing requirements through the SRS system and then designing UML (Use Case Diagram, Activity Diagram, Class Diagram and Sequence Diagram). From the system design then continued designing database and interface. The development of this mobile web applications is using CodeIgniter framework version 2.1.0 with programming language PHP version 5.3.1 and MySQL database version 3.2.4.

The result of the application m-commerce, mobile web Solo batik such as transaction activity, account setting, report and accessible via mobile. For the administrator, there are product management, shipping management, web information management and order management. For the manager, it can received reports of transactions in a specified period. In system, there is checking about the status of order. If in 3 days, no payment confirmation, order automatically canceled and stock restored.

Keyword : Online Store, M-Commerce, Mobile Web, framework CodeIgniter, Batik Solo.


commit to user

v

ABSTRAK

Prisantya Maghribi Fridayana. 2012. PEMBUATAN APLIKASI MOBILE WEBSITE M-COMMERCE UNTUK BATIK SOLO, Diploma III Teknik Informatika, Fakultas Matematika dan Ilmu Pengetahuan Alam, Universitas Sebelas Maret Surakarta. Juni 2012.

Jumlah pengguna mobile, seperti handphone, smartphone ataupun tablet dari tahun ke tahun semakin meningkat. Berdasarkan Effective Measure, 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 Case Diagram, Activity Diagram, Class Diagram dan Sequence Diagram). Dari perancangan sistem tersebut kemudian dilanjutkan perancangan database dan desain interface. Pembuatan aplikasi mobile web ini menggunakan framework CodeIgniter versi 2.1.0 dengan bahasa pemrograman PHP versi 5.3.1 dan database MySQL versi 3.2.4.

Terbangunnya aplikasi mobile web m-commerce batik Solo meliputi kegiatan transaksi jual-beli, pengaturan account 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.

Kata Kunci : Aplikasi toko online, M-Commerce, Mobile Web, framework CodeIgniter, Batik Solo


commit to user

vi

HALAMAN MOTTO

Selesaikan apa yang sudah kamu mulai (Anonim)

Sesungguhnya di balik kesulitah itu ada kemudahan. Di

balik kesulitan itu ada kemudahan. (QS: Al-Insyirah 5-6)


commit to user

vii

HALAMAN PERSEMBAHAN

Kupersembahkan hasil jerih payah ini untuk :

1. Orang tua-ku dan adik terkasih yang senantiasa mendukung

dan menyemangati

(Terima kasih yang tiada terkira untuk kalian)

2. Keluarga Besar di Madiun dan di Sragen yang telah banyak

banyak membantu selama ini

(Terima Kasih dan Semoga Allah membalas kebaikannya)

3. Sahabat-sahabatku sayongs @OGE (feni-zhie-viani) yang

selalu dan terus memberikan dukungan penuh.

(Terimakasih cinta, terima kasih atas persahabatan manisnya)

4. Teman-teman seperjuangan di D3 TI 2009 yang tidak bisa

disebutkan satu per satu.

(Terimakasih atas semua semangat, bantuan dan

kebersamaannya)


commit to user

viii

KATA PENGANTAR

Assalamu’alaykum Warohmatullohi Wabarokatuh.

Bismillahirrohmanirrohim, segala puji dan rasa syukur hanya penulis

panjatkan ke haribaan Alloh subhanahu wa ta’ala, 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

subhanahu wa ta’ala 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.

Wassalamu’alaikum Warohmatullohi Wabarokatuh.

Surakarta, 07 Juni 2012

Penulis


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 Framework CodeIgniter .................................................................. 6

2.4.1 Konsep MVC .......................................................................... 6

2.4.2 Library yang Digunakan ......................................................... 6

2.4.3 Helper yang Digunakan .......................................................... 7

2.5 UML................................................................................................ 8

2.5.1 Use Case Diagram ................................................................. 8


commit to user

x

2.5.2 Activity Diagram .................................................................... 9

2.5.3 Class Diagram ....................................................................... 11

2.5.4 Sequence Diagram ................................................................. 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 Diagram ..................................................................... 21

3.2.2.1 Activity Diagram Login ............................................... 21

3.2.2.2 Activity Diagram Register ........................................... 22

3.2.2.3 Activity Diagram Insert Data ...................................... 22

3.2.2.4 Activity Diagram Update Data .................................... 23

3.2.2.5 Activity Diagram Delete Data ..................................... 23

3.2.2.6 Activity Diagram Order (Pembelian)........................... 24

3.2.3 Use Case Diagram .................................................................. 25

3.2.3.1 Definisi Aktor ............................................................. 25

3.2.3.2 Use Case Diagram ...................................................... 25

3.2.4 Class Diagram Analysis .......................................................... 28

3.2.4.1 Class Diagram Analysis Customer .............................. 28

3.2.4.2 Class Diagram Analysis Admin ................................... 28

3.2.5 Class Diagram Design ............................................................ 29

3.2.5.1 Class Diagram Design Customer ................................ 29

3.2.5.2 Class Diagram Design Admin ..................................... 37

3.2.6 Sequence Diagram .................................................................. 49

3.2.6.1 Sequence Diagram Login ............................................ 49

3.2.6.2 Sequence Diagram Register ........................................ 50

3.2.6.3 Sequence Diagram Update Account ............................ 50


commit to user

xi

3.2.6.4 Sequence Diagram Give Testimonial ........................... 50

3.2.6.5 Sequence Diagram Add To Cart .................................. 51

3.2.6.6 Sequence Diagram View Product ................................ 51

3.2.6.7 Sequence Diagram Update Cart .................................. 51

3.2.6.8 Sequence Diagram Cancel Order ................................ 52

3.2.6.9 Sequence Diagram Add Product .................................. 52

3.2.6.10 Sequence Diagram Add Destination .......................... 52

3.2.6.11 Sequence Diagram Check Out ................................... 53

3.2.6.12 Sequence Diagram Delete Product ............................ 53

3.2.6.13 Sequence Diagram Update Account .......................... 54

3.2.6.14 Sequence Diagram Update Information..................... 54

3.2.6.15 Sequence Diagram Change Order Status................... 55

3.2.6.16 Sequence Diagram View Order ................................. 55

3.2.6.17 Sequence Diagram Add Shipping Price ..................... 56

3.2.6.18 Sequence Diagram 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

3.3.2.13 Tabel Detail 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

DAFTAR PUSTAKA ........................................................................................ 77


commit to user

xiii

DAFTAR TABEL

No

1. Simbol Use Case ......................................................................................... 8

2. Simbol Activity Diagram ............................................................................. 10

3. Simbol Class Diagram ................................................................................ 11

4. Simbol Sequence Diagram ......................................................................... 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 Class Boundary MainWrapper........................................... 30

13. Tabel Deskripsi Class Control Account ....................................................... 31

14. Tabel Deskripsi Class Entity TMember ....................................................... 31

15. Tabel Deskripsi Class Control Testimonial ................................................. 32

16. Tabel Deskripsi Class Entity TTestimonial .................................................. 32

17. Tabel Deskripsi Class Control Product ....................................................... 33

18. Tabel Deskripsi Class Entity TTroduct ........................................................ 34

19. Tabel Deskripsi Class Control Order .......................................................... 34

20. Tabel Deskripsi Class Entity TOrder ........................................................... 35

21. Tabel Deskripsi Class Entity TOrderDetail ................................................. 36

22. Tabel Deskripsi Class Entity TShipping ...................................................... 36

23. Tabel Deskripsi Class Boundary Main ........................................................ 38

24. Tabel Deskripsi Class Control Admin ......................................................... 39

25. Tabel Deskripsi Class Entity TAdmin .......................................................... 39

26. Tabel Deskripsi Class Control Member ....................................................... 40

27. Tabel Deskripsi Class Entity TMember ....................................................... 40


commit to user

xiv

28. Tabel Deskripsi Class Control TestimonialControl ..................................... 41

29. Tabel Deskripsi Class Entity TTestimonial .................................................. 41

30. Tabel Deskripsi Class Control Information ................................................. 42

31. Tabel Deskripsi Class Entity TInformaion ................................................... 42

32. Tabel Deskripsi Class Control ProductControl ........................................... 43

33. Tabel Deskripsi Class Entity TProduct ........................................................ 43

34. Tabel Deskripsi Class Control OrderControl .............................................. 44

35. Tabel Deskripsi Class Entity TOrder ........................................................... 45

36. Tabel Deskripsi Class Entity TOrderDetail ................................................. 46

37. Tabel Deskripsi Class Control ShippingControl .......................................... 46

38. Tabel Deskripsi Class Entity TShipping ...................................................... 47

39. Tabel Deskripsi Class Entity TCourier ........................................................ 48

40. Tabel Deskripsi Class Entity TDestination .................................................. 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

54. Tabel Infoweb ............................................................................................. 62


commit to user

xv

DAFTAR GAMBAR

No

1. Alur Teknologi WAP .................................................................................. 17

2. Alur Halaman Web WAP ............................................................................ 17

3. Activity Diagram Login ............................................................................... 21

4. Activity Diagram Register ........................................................................... 22

5. Activity Diagram Insert ............................................................................... 22

6. Activity Diagram Update Data .................................................................... 23

7. Activity Diagram Delete Data ..................................................................... 23

8. Activity Diagram Order (Pembelian) ........................................................... 24

9. Use Case Diagram User ............................................................................. 25

10. Use Case Diagram Customer ...................................................................... 26

11. Use Case Diagram Manajer ........................................................................ 26

12. Use Case Diagram Admin ........................................................................... 27

13. Class Diagram Analysis Customer .............................................................. 28

14. Class Diagram Analysis Admin ................................................................... 28

15. Class Diagram Design Customer ................................................................ 29

16. Class Diagram Design Admin ..................................................................... 37

17. Sequence Diagram Login Customer ............................................................ 49

18. Sequence Diagram Login Admin ................................................................. 49

19. Sequence Diagram Register ........................................................................ 50

20. Sequence Diagram Update Account ............................................................ 50

21. Sequence Diagram Give Testimonial ........................................................... 50

22. Sequence Diagram Add To Cart .................................................................. 51

23. Sequence Diagram View Product ................................................................ 51

24. Sequence Diagram Update Cart .................................................................. 51

25. Sequence Diagram Cancel Order ................................................................ 52

26. Sequence Diagram Add Product.................................................................. 52

27. Sequence Diagram Add Destination ............................................................ 52


commit to user

xvi

28. Sequence Diagram CheckOut ...................................................................... 53

29. Sequence Diagram Delete Product .............................................................. 53

30. Sequence Diagram Update Product ............................................................ 54

31. Sequence Diagram Update Information ...................................................... 54

32. Sequence Diagram Change Order Status .................................................... 55

33. Sequence Diagram View Order ................................................................... 55

34. Sequence Diagram Add Shipping Price ....................................................... 56

35. Sequence Diagram 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 smart

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-commerce

sendiri mengalami perkembangan dengan munculnya berbagai jenis aplikasi

dengan basis mobile web atau mobile apps.

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

teknologi dalam pemasaran produk Batik Solo.


commit to user

2

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-commerce

seperti mengadakan transaksi pembelian batik, pembayaran, pengiriman dan

melihat katalog produk

3. Aplikasi web ini dibuat dengan menggunakan framework CodeIgniter,

database 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-commerce 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 framework CodeIgniter, CSS untuk mobile, XHTML-MP,

UML dan m-commerce itu sendiri.


commit to user

3

2. Perencanaan sistem, pada tahap ini dilakukan perancangan sistem yang

meliputi: rancangan desain tampilan aplikasi, rancangan sistem dan rancangan

database-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 Language) dan perancangan database menggunakan

Skema Diagram.

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

pengembangan sistem ini lebih lanjut.


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 market 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, smart card maupun perangkat mobile.

Pada umumnya, perangkat end user yang digunakan pada proses m-

Commerce adalah sebagai berikut:

Handphone

Smart Phone

PDA

Tablet

Setiap perangkat memiliki karakteristik yang berbeda-beda sehingga

dapat mempengaruhi tingkat penggunaannya aplikasi/sistem 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.org/batik)

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 library 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-commerce 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_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

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 case diagram merupakan pemodelan untuk kelakuan (behavior)

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 case 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 case 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 case.

Asosiasi /

association

Komunikasi antara aktor dan use

case atau use case memiliki interaksi

dengan aktor.

<< extend >>

Ekstensi / extend Relasi use case 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 case tambahan

memiliki nama depan yang sama

denga use case yang ditambahkan.

Generalisasi /

generalization

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 case tambahan ke sebuah

use case dimana use case yang

ditambahkan memerlukan use case

ini untuk menjalankan fungsinya

atau sebagai syarat dijalankan use

case ini.

2.5.2 Activity Diagram

Diagram aktivitas atau activity diagram 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 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


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

Class diagram 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


Kelas Merupakan kelas pada struktur

sistem yang terdiri dari atribut

dan method.

Antarmuka /

interface

Sama dengan konsep interface

dalam pemrograman

berorientasi objek

Asosiasi /

association

Relasi antar kelas dengan

makna umum, asosiasi

biasanya juga disertai dengan

multiplicity.

Asosiasi berarah /

directed

association


makna kelas yang satu

digunakan oleh kelas yang

lain, asosiasi biasanya juga

disertai dengan multiplicity.

Generalisasi /

generalization


makna generalisasi-spesialisasi

(umum-khusus)

Kebergantungan /

Dependency


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 case

dengan mendeskripsikan waktu hidup objek dan message yang dikirimkan

dan diterima antar objek. Oleh karena itu untuk menggambarkan diagram

sekuen maka harus diketahui objek-objek yang terlibat dalam sebuah use

case 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


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 call 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

nama objek : nama kelas


commit to user

14

2.6 MySQL

MySQL database merupakan database 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 (Data Definition Language)

DDL adalah bahasa-bahasa SQL yang digunakan untuk membuat,

memanipulasi atau menghapus schema yang ada di dalam database.

b) DML (Data Manipulation Language)

DML adalah bahasa-bahasa SQL yang digunakan untuk memanipulasi

data di dalam database.

c) DCL (Data Control Language)

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 media="Screen" href="styles.css" type="text/css"

rel="stylesheet" />

commit to user

16

Diikuti dengan

<link media="handheld, only screen and (max-width: 480px), only screen

and (max-device-width: 480px)" href="mobile.css" type="text/css"

rel="stylesheet" />

Diikuti juga dengan



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 (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:

http://openmobilealliance.org)


commit to user

17

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

Meta information meta

commit to user

18

MIME

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 : text

- Empty tags harus dalam kondisi “self closing”, contoh: 

Perlu pendefinisian doctype agar dapat dideteksi oleh browser.

Pendefinisian ini diletakkan sebelum tag head.

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"

"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">


commit to user

19

BAB III

ANALISIS DAN PERANCANGAN SISTEM

3.1 Analisa Kebutuhan Sistem

3.1.1 Analisis Kebutuhan Software

1. Software 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. Software 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 Diagram, Use Case Diagram, Class Diagram dan

Sequence Diagram.

3.2.1 SRS

Kebutuhan fungsional merupakan kebutuhan – kebutuhan yang

berhubungan dengan proses bisnis dari sistem yang dibuat. Dari analisa

yang dilakukan, berikut tabel kebutuhan Fungsional untuk tiap aktor :

Tabel 3.1. SRS Fungsional Customer

Kode Deskripsi Kebutuhan Fungsional

SRS-MFP01 Customer mendaftar account

SRS-MFP02 Customer dapat login/logout


commit to user

20

SRS-MFP03 Customer melihat katalog produk

SRS-MFP04 Customer mengelola keranjang belanja

SRS-MFP05 Customer mengelola data account

SRS-MFP06 Customer melihat pesanan

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

daftar kebutuhan non-fungsional dalam sistem yang dibuat.


commit to user

21

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.2 Acitivity 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.1 Activity 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

valid


commit to user

22

3.2.2.2 Activity 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.3 Activity 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.

Choose Register Menu

Fill Form

View Register Form

View Success Registration Info

Show Error Validation

Validasi

invalid

valid

View List

View Insert Form

Input Data on Form

Validasi

View Success Insert

Admin


commit to user

23

3.2.2.4 Activity 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.5 Activity 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 iew L is t

V iew U pdat e F orm

Inp ut D at a on F orm

V al ida s i

V iew S uc c e s s U pdat e

V iew D et ail In form ation

Admin

View List

View Confirmation Delete

View Success Update

Choose To Delete

Data deleted

no

yes

Admin


commit to user

24

3.2.2.6 Activity 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 User Payment (Manually)

Cancel Order Paid?No

Process Order

Send Order

Get Report

No

Yes

M an a g e rA d m i nU s e r

commit to user

25

3.2.3 Use Case Diagram

3.2.3.1 Definisi 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.2 Diagram Use Case

Berikut diagram use case untuk aktor User :

Gambar 3.7. Use Case Diagram User

Update Account

Manager

AdminLogin

Manage Account

<<include>>

View Web InformationRegister

View Product CatalogMember

Logout

Search Product

<<extend>>

User

Logout

<<extend>>

commit to user

26

Berikut diagram Use Case untuk aktor Customer :

Gambar 3.8. Use Case Diagram Customer

Berikut diagram Use Case untuk aktor Manajer :

Gambar 3.9. Use Case Diagram Manajer

Update Shopping Cart

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 Transaction Report

View Testimonial ReportManager

Login

View Monthly Report

View Daily Report

<<extend>>

commit to user

27

Berikut diagram Use Case untuk aktor Admin :

Gambar 3.10. Use Case Diagram Admin

Update News Information

Update Payment Information

Update Contact Information

Update Product

Update Courier

Update Destination Area

Update Shipping Price

Cancel Order

Delete Product

Change Order StatusView Account User

View Product

<<extend>>

<<extend>>

Add Product

Update Information

<<extend>>

<<extend>>

<<extend>>

Add Courier

Add Destination Area

View Courier

View Order

<<extend>>

View Destination Area

VIew Shipping Price

<<include>>

<<include>>

Admin<<extend>>

Delete Courier

Delete Destination Area

<<extend>>

<<extend>>

Delete Shipping Price

<<extend>>

<<extend>>

<<extend>>

<<extend>>


commit to user

28

3.2.4 Class Diagram Analysis

3.2.4.1 Class Diagram Customer

Gambar 3.11. Class Diagram Analysis Customer

3.2.4.2 Class Diagram Admin

Gambar 3.12. Class Diagram Analysis Admin

MainWrapper

Account

TMember

Login

Product

TProduct

Order

TOrder

TOrderDetail

Testimonial

TTestimonial

TShipping

Main

Admin

Member

ProductControl

ShippingControl

Information

OrderControl

TestimonialControl

TAdmin

TMember

TTestimonial

TOrder

TShipping

TOrderDetail

TProductTInformation

TDestination

TCourier

commit to user

29

3.2.5 Class Diagram Design

3.2.5.1 Class Diagram Customer

Gambar 3.13. Class Diagram Design Customer

Berikut ini adalah tabel yang berisi deskripsi dari class-class yang ada

pada aplikasi m-commerce batik solo yang mana telah digambarkan pada

class diagram di atas.

MainWrapp er<<boundary>>

-uiRegister()-uiLogin()-uiManajemenAccount()-uiTest imonial()-uiProduk()-uiCart()-uiCheckout()-uiOrder()

Account<<control>>

-ViewAccount($id_member: Integer)-UpdateAccount($id_member: Integer)-cek_login(email: String, password: String): Boolean-logout()

TMem ber<<ent ity>>

-idMember: Integer-TanggalLahir: Date-J enisKelamin: String-TanggalDaf tar: Date-Email: String-Pas sword: String

-getMember($id_member: Integer)-s etMember($id_member: Integer, $tgl_lhr: Date, $jk: String, $tgl_dftr: Date, $email: String, $pass : String)-getAllMember()

Tes tim onial<<control>>

-AddTestimonial($id_member: Integer)-ViewTest imonial($id_member: Integer)

TTes timonial<<ent ity>>

-id_tes timonial: Integer-tgl_testimonial: date-id_member: Integer-isi_test imonial: String-s tatus: String

-s etTest imonial($id_test i: Integer, $id_member: Integer, $tgl_testi: Date, $isi_test i: String)-getTestimonial($id_member: Integer)

Order<<control>>

-AddtoCart($id_produk: Integer, $jml: Integer)-UpdateCart($id_produk: Integer)-Checkout()-ongkir($berat: Integer, $tarif : Integer): Integer-addOrder()-cancelOrder($id_order: String)-ViewOrderHistory($id_member: Integer)

TOrder<<ent ity>>

-idOrder: String-TanggalPesan: Date-Status: Integer-id_member: Integer-Ongkir: Integer-Kurir: String-alamat: String

-getMemberOrder($id_member: Integer)-s etOrder($id_member: Integer, $id_order: Integer, $tgl_pesan: Date, $status: Integer, $ongkir: Integer, $alamat: String, $kurir: String)-getOrder($idOrder: String)-s etOrderStatus($idOrder: String, $status: Integer)-getAllOrder()

TOrderDetail<<ent ity>>

-IdOrder: Integer-idProduk: Integer-J umlah: Integer-Harga: Integer-Berat: Integer

-s etOrderDetail($idProduk: Integer, $idOrder: Integer, $jml: Integer, $hrga: Integer, $brt: Integer)-getOrderDetail($idOrder: Integer)

Product<<control>>

-ViewAllCategori()-ViewProductByID($id_produk: Integer)-ViewProductByCategory($id_kategori: Integer)

TPro duct<<ent ity>>

-idProduk: Integer-NamaProduk: String-Harga: Integer-Stok: Integer-Berat: Integer-GambarProduk: String-Id_Kategori: Integer

-getCategory()-getProdukByID($id_produk: Integer)-getAllProdukByCategory($id_kategori: Integer)-getAllProduk()-getGambarperProduk($idProduk: Integer)-s etGambarProduk($idProduk: Integer, $gbr: String, $id_gbr: Integer)

TShipping<<ent ity>>

-idShipping: Integer-idKota: Integer-idKurir: Integer-Tarif_kg: Integer

-getTarif($idKota: Integer, $idKurir: Integer)-getAllShipping()-getShipping($idShipping: Integer)-s etShipping($idShipping: Integer, $idKota: Integer, $idKurir: Integer, $Tarif : Integer)


commit to user

30

1. Class Boundary MainWrapper

Merupakan kelas yang menangani interface/tampilan untuk Customer.

Tabel 3.6. Tabel Deskripsi Class Boundary MainWrapper

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. Class Control Account

Merupakan kelas control yang digunakan untuk mengontrol proses

pengelolaan account member pada sisi user, yang menghubungkan

kelas boundary MainWrapper dengan kelas entity TMember.


commit to user

31

Tabel 3.7. Tabel Deskripsi Class 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. Class Entity TMember

Merupakan kelas entity yang berisi data dari tabel member

Tabel 3.8. Tabel Deskripsi Class Entity TMember

Atribut

Nama Atribut Visibilty Type

Id_member Private Integer TanggalLahir Private Date JenisKelamin Private String TanggalDaftar Private Date Email Private String Password Private String


commit to user

32

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 Class Control Testimonial

Atribut


- - - Method

Nama Method Fungsi

AddTestimonial($id_member) Digunakan untuk menambahkan

testimonial berdasarkan id user yang

login

ViewTestimonial($id_member) Digunakan untuk menampilkan


login

5. Class Entity TTestimonial

Merupakan kelas entity yang berisi data dari tabel testimonial

Tabel 3.10. Tabel Deskripsi Class Entity TTestimonial

Atribut


Id_Testimonial Private Integer


commit to user

33

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)


testimonial dalam database

getTestimonial($id_member) Digunakan untuk mengambil data

testimonial berdasarkan id member

6. Class Control Product

Merupakan kelas control yang digunakan untuk menampilkan

daftar produk pada sisi user, yang menghubungkan kelas boundary

MainWrapper dengan kelas entity TProduct.

Tabel 3.11. Tabel Deskripsi Class Control Product

Atribut


- - - 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 Entity TProduct

Merupakan kelas entity yang berisi data dari tabel produk


commit to user

34

Tabel 3.12. Tabel Deskripsi Class Entity TProduct

Atribut


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 Class Control Order

Atribut


- - - Method

Nama Method Fungsi

AddtoCart($id_produk, $jml) Digunakan untuk menambahkan

produk ke keranjang

UpdateCart($id_produk) Digunakan untuk memperbarui


commit to user

35

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 Entity TOrder

Merupakan kelas entity yang berisi data dari tabel order

Tabel 3.14. Tabel Deskripsi Class Entity TOrder

Atribut


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,


pesanan dalam database


commit to user

36

$kurir, $alamat)

getOrder($id_member) Digunakan untuk mengambil data

pesanan berdasarkan id member

10. Class Entity TOrderDetail

Merupakan kelas entity yang berisi data dari tabel detail_pesanan.

Tabel 3.15. Tabel Deskripsi Class Entity TOrderDetail

Atribut


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 Entity TShipping

Merupakan kelas entity yang berisi data dari tabel tarif pengiriman

Tabel 3.16. Tabel Deskripsi Class Entity TShipping

Atribut


IdShipping Private Integer IdKota Private Integer IdKurir Private Integer Tarif_k Private Integer Method

Nama Method Fungsi

commit to user

37

getTarif($idKota,$idKurir) Digunakan untuk mengambil data

shipping berdasarkan id kota dan id

kurir

3.2.5.2 Class Diagram Admin

Gambar 3.14. Class Diagram Design Admin

Main<<boundary>>

-uiManajemenProduct()-uiManajemenShipping()-uiManajemenMember()-uiManajemenInformation()-uiLogin()-uiManajemenAdmin()-uiManajemenTest imonial()-uiManajemenOrder()-uiManajemenDestination()

Admin<<control>>

-cek_login($username: String, $pas sword: String, $level: String): Boolean-logout()-updateAdmin($id_user: Integer)

Member<<control>>

-ViewAllMember()-ViewMemberByID($id_member: Integer)

ProductControl<<control>>

-ViewAllProduct()-ViewProductByID($idProduk: Integer)-UpdateProduct($idProduk: Integer)-AddProduct()-DeleteProduct($idProduk: Integer)-AddGambarProduk($idProduk: Integer)-DeleteGambarProduk($idGambar: Integer)

ShippingControl<<control>>

-AddShipping()-ViewShipping()-UpdateShipping($idShipping: Integer)-DeleteShipping($idShipping: Integer)-AddDestinat ion()-UpdateDestination($idKota: Integer)-DeleteDestinat ion($idKota: Integer)-AddCourier()-UpdateCourier($idKurir: Integer)-DeleteCourier($idKurir: Integer)

Information<<control>>

-UpdateInformation($jenis_info: String)-ViewInformation($jenis_info: String)

OrderControl<<control>>

-ViewAllOrder()-UpdateOrder($idOrder: Integer)-ViewOrderByID($idOrder: Integer)-CancelOrder($idOrder: Integer)-ongkir($berat: Integer, $tarif : Integer): Integer

TestimonialControl<<control>>

-ViewAllTest imonial()-verifikasi($idTesti: Integer)-ViewTestimonialByID($idTest i: Integer)

TAdmin<<ent ity>>

-id_user: Integer-username: String-password: String-level_user: String

-setAdmin($username: String, $pass: String, $level: String)-getAdmin()

TMember<<entity>>

-idMember: Integer-TanggalLahir: Date-JenisKelamin: String-TanggalDaftar: Date-Email: String-Password: String

-getMember($id_member: Integer)-setMember($id_member: Integer, $tgl_lhr: Date, $jk: String, $tgl_df tr: Date, $email: String, $pass: String)-getAllMember()

TProduct<<entity>>

-idProduk: Integer-NamaProduk: String-Harga: Integer-Stok: Integer-Berat: Integer-GambarProduk: String-Id_Kategori: Integer

-getCategory()-getProdukByID($id_produk: Integer)-getA llProdukByCategory($id_kategori: Integer)-getA llProduk()-getGambarperProduk($idProduk: Integer)-setGambarProduk($idProduk: Integer, $gbr: String, $id_gbr: Integer)

TOrderDetail<<ent ity>>

-IdOrder: Integer-idProduk: Integer-Jumlah: Integer-Harga: Integer-Berat: Integer

-setOrderDetail($idProduk: Integer, $idOrder: Integer, $jml: Integer, $hrga: Integer, $brt: Integer)-getOrderDetail($idOrder: Integer)

TTestimonial<<ent ity>>

-id_test imonial: Integer-tgl_tes timonial: date-id_member: Integer-isi_testimonial: String-status: String

-setTestimonial($id_test i: Integer, $id_member: Integer, $tgl_test i: Date, $isi_testi: String)-getTes timonial($id_member: Integer)

TInformation<<entity>>

-jenis_info: String-isi_informasi: String-gambar: String

-setInformation($jenis: String, $isi: String, $gbr: String)-getInformat ion($jenis: String)

TShipping<<ent ity>>

-idShipping: Integer-idKota: Integer-idKurir: Integer-Tarif_kg: Integer

-getTarif($idKota: Integer, $idKurir: Integer)-getAllShipping()-getShipping($idShipping: Integer)-setShipping($idShipping: Integer, $idKota: Integer, $idKurir: Integer, $Tarif: Integer)

TOrder<<entity>>

-idOrder: String-TanggalPesan: Date-Status: Integer-id_member: Integer-Ongkir: Integer-Kurir: String-alamat: String

-getMemberOrder($id_member: Integer)-setOrder($id_member: Integer, $id_order: Integer, $tgl_pesan: Date, $status: Integer, $ongkir: Integer, $alamat: String, $kurir: String)-getOrder($idOrder: String)-setOrderStatus($idOrder: String, $status: Integer)-getAllOrder()

TDestination<<ent ity>>

-idKota: Integer-kota: String-provinsi: String

-setDestination($idKota: Integer, $kota: String, $prov: String)-getDestinat ion()

TCourier<<entity>>

-nama_kurir: String-gambar_logo: String-idKurir: Integer

-s etCourier($idKurir: Integer, $logo: String, $nama: String)-getCourier()


commit to user

38

1. Class Boundary Main

Merupakan kelas yang menangani interface/tampilan untuk Admin.

Tabel 3.17. Tabel Deskripsi Class Boundary Main

Atribut


- - - Method

Nama Method Fungsi

uiManajemenProduct() Digunakan untuk memanggil interface

manajemen produk

uiManajemenShipping() Digunakan untuk memanggil interface

manajemen pengiriman

uiManajemenMember() Digunakan untuk memanggil interface

manajemen member

uiManajemenInformation() Digunakan untuk memanggil interface

manajemen informasi web

uiManajemenAdmin() Digunakan untuk memanggil interface

manajemen admin

uiManajemenTestimonial() Digunakan untuk memanggil interface

manajemen testimonial dari member

uiManajemenOrder() Digunakan untuk memanggil interface

manajemen pesanan

uiManajemenDestination Digunakan untuk memanggil interface

manajemen tujuan pengiriman

uiLogin() Digunakan untuk memanggil interface

login

2. Class Control Admin


mengelola data admin, yang menghubungkan kelas boundary Main

dengan kelas entity TAdmin.


commit to user

39

Tabel 3.20. Tabel Deskripsi Class Control Admin

Atribut


- - - Method

Nama Method Fungsi

Cek_login($username,

$pass,$level)

Untuk mengecek username, password

dan level pada database apakah telah

sesuai atau belum. Nilai kembalian

boolean

Logout() Untuk menghapus session yang

digunakan untuk mengakses halaman

admin

updateAdmin($id_user) Memperbarui data admin dengan

parameter id User

3. Class Entity TAdmin

Merupakan kelas entity yang berisi data dari tabel user.

Tabel 3.21. Tabel Deskripsi Class Entity TAdmin

Atribut


Id_user Private Integer Username Private String Password Private String Level_User Private String Method

Nama Method Fungsi

setAdmin($username, $pass,

$level)


admin

getAdmin() Digunakan untuk memanggil data

admin


commit to user

40

4. Class Control Member


daftar member pada sisi admin, yang menghubungkan kelas boundary

Main dengan kelas entity TMember.

Tabel 3.22. Tabel Deskripsi Class Control Member

Atribut


- - - Method

Nama Method Fungsi

ViewAllMember() Digunakan untuk menampilkan

seluruh data member

ViewMemberByID($id_member) Digunakan untuk menampilkan

informasi per member

5. Class Entity TMember

Merupakan kelas entity yang berisi data dari tabel member

Tabel 3.23. Tabel Deskripsi Class Entity TMember

Atribut


Id_member Private Integer TanggalLahir Private Date JenisKelamin Private String TanggalDaftar Private Date Email Private String Password Private String Method

Nama Method Fungsi

getMember($id_member) Digunakan untuk mengambil data

member dengan parameter id member

getAllMember() Digunakan untuk mengambil seluruh

data member


commit to user

41

6. Class Control TestimonialControl


daftar produk pada sisi user, yang menghubungkan kelas boundary

Main dengan kelas entity TTestimonial.

Tabel 3.24. Tabel Deskripsi Class Control TestimonialControl

Atribut


- - - Method

Nama Method Fungsi

ViewAllTestimonial() Digunakan untuk menampilkan

seluruh data testimonial

Verifikasi(idTesti) Digunakan untuk memverifikasi

testimonial per id testimonial

ViewTestimonialByID($idTesti) Digunakan untuk menampilkan

testimonial dengan parameter id

testimonial

7. Class Entity TTestimonial

Merupakan kelas entity yang berisi data dari tabel testimonial.

Tabel 3.25. Tabel Deskripsi Class Entity TTestimonial

Atribut


- - - 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


commit to user

42

8. Class Control Information

Merupakan kelas control yang digunakan untuk mengelola data

informasi web pada sisi admin, yang menghubungkan kelas boundary

Main dengan kelas entity TInformation.

Tabel 3.26. Tabel Deskripsi Class Control Information

Atribut


- - - Method

Nama Method Fungsi

AddTestimonial($id_member) Digunakan untuk menambahkan


login

ViewTestimonial($id_member) Digunakan untuk menampilkan


login

9. Class Entity TInformation

Merupakan kelas entity yang berisi data dari tabel info_web.

Tabel 3.27. Tabel Deskripsi Class Entity TInformaion

Atribut


Jenis_info Private String Isi_informasi Private String Gambar Private String Method

Nama Method Fungsi

setInformation($jenis, $isi,

$gbr)


informasi ke database

getInformation($jenis) Digunakan untuk mengambil data

informasi berdasarkan jenis info


commit to user

43

10. Class Control ProductControl

Merupakan kelas control yang digunakan untuk mengelola data

produk pada sisi admin, yang menghubungkan kelas boundary Main

dengan kelas entity TProduct.

Tabel 3.28. Tabel Deskripsi Class Control ProductControl

Atribut


- - - Method

Nama Method Fungsi

ViewAllProduct() Digunakan untuk menampilkan

informasi seluruh produk

ViewProductByID($idProduk) Digunakan untuk menampilkan

informasi satu produk

UpdateProduct($idProduk) Digunakan untuk memperbarui

satu data produk

AddProduct() Digunakan untuk menambahkan

data produk baru

DeleteProduct($idProduk) Digunakan untuk menghapus satu

data produk

AddGambarProduk($idProduk) Digunakan untuk menambah

gambar produk per produk

DeleteGambarProduk($idGambar) Digunakan untuk menghapus satu

gambar produk

11. Class Entity TProduct

Merupakan kelas entity yang berisi data dari tabel produk

Tabel 3.29. Tabel Deskripsi Class Entity TProduct

Atribut


Id_Produk Private Integer


commit to user

44

NamaProduk Private String Harga Private Integer Stok Private Integer Berat Private Integer GambarProduk Private String Id_Kategori Private Integer Method

Nama Method Fungsi

getAllProduk() Digunakan untuk mengambil

informasi seluruh produk

getProdukByID($id_produk) Digunakan untuk mengambil

informasi satu produk

getGambarProduk($idProduk) Digunakan untuk mengambil data

gambar per produk

setGambarProduk($idProduk,

$gbr, $id_gbr)


gambar

12. Class Control OrderControl

Merupakan kelas control yang digunakan untuk mengelola daftar

pesanan pada sisi admin, yang menghubungkan kelas boundary Main

dengan kelas entity TOrder, TOrderDetail dan TShipping.

Tabel 3.30. Tabel Deskripsi Class Control OrderControl

Atribut


- - - Method

Nama Method Fungsi

ViewAllOrder() Digunakan untuk menampilkan data

seluruh pesanan

UpdateOrder($idOrder) Digunakan untuk memperbarui data

pesanan per id order

ViewOrderByID($idOrder) Digunakan untuk menampilkan detail


commit to user

45


CancelOrder($idOrder) Digunakan untuk membatalkan


ongkir($berat, $tarif): Integer Untuk menghitung total ongkos kirim

dan mengembalikan nilai bertipe

integer

13. Class Entity TOrder

Merupakan kelas entity yang berisi data dari tabel pesanan

Tabel 3.31. Tabel Deskripsi Class Entity TOrder

Atribut


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

getOrder($idOrder) Digunakan untuk mengambil data


getAllOrder() Digunakan untuk mengambil seluruh

data pesanan

setOrderStatus($idOrder,

$status)

Digunakan untuk memperbarui status

pesanan berdasarkan id Order

setOrder($id_order, $tgl_psn,

$stat, $ id_member ,$ongkir,

$kurir, $alamat)


pesanan dalam database


commit to user

46

14. Class Entity TOrderDetail

Merupakan kelas entity yang berisi data dari tabel detail pesanan.

Tabel 3.32. Tabel Deskripsi Class Entity TOrderDetail

Atribut


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 memperbarui data


getOrderDetail($idOrder) Digunakan untuk mengambil data


15. Class Control ShippingControl

Merupakan kelas control yang digunakan untuk mengeloal data

pengiriman (tarif, area tujuan dan kurir) pada sisi admin, yang

menghubungkan kelas boundary Main dengan kelas entity TShipping,

TDestination dan TCourier.

Tabel 3.33. Tabel Deskripsi Class Control ShippingControl

Atribut


- - - Method

Nama Method Fungsi

AddShipping() Digunakan untuk menambahkan

informasi pengiriman baru.

ViewShipping() Digunakan untuk menampilkan daftar

pengiriman


commit to user

47

UpdateShipping($idShipping) Digunakan untuk memperbarui

informasi pengiriman berdasarkan id

pengiriman

DeleteShipping($idShipping) Digunakan untuk menghapus data

pengiriman berdasarkan id pengiriman

AddDestination() Digunakan untuk menambahkan area

tujuan pengiriman

UpdateDestination($idKota) Digunakan untuk memperbarui area

tujuan pengiriman berdasarkan id area

tujuan

DeleteDestination($idKota) Digunakan untuk menghapus area

tujuan berdasarkan id area tujuan

AddCourier() Digunakan untuk menambahkan kurir

UpdateCourier($idKurir) Digunakan untuk memperbarui data

kurir berdasarkan id kurir

DeleteCourier($idKurir) Digunakan untuk menghapus data

kurir berdasarkan id kurir

16. Class Entity TShipping

Merupakan kelas entity yang berisi data dari tabel tarif pengiriman

Tabel 3.34. Tabel Deskripsi Class Entity TShipping

Atribut


IdShipping Private Integer IdKota Private Integer IdKurir Private Integer Tarif_k Private Integer Method

Nama Method Fungsi

getTarif($idKota,$idKurir) Digunakan untuk mengambil data

shipping berdasarkan id kota dan id


commit to user

48

kurir

getAllShipping() Digunakan untuk mengambil seluruh

data pengiriman

getShipping($idShipping) Digunakan untuk mengambil data

pengiriman berdasarkan id

pengiriman

setShipping($idShipping,

$idKota, $idKurir, $tarif)


pengiriman

17. Class Entity TCourier

Merupakan kelas entity yang berisi data dari tabel kurir

Tabel 3.35. Tabel Deskripsi Class Entity TCourier

Atribut


idKurir Private Integer Gambar_Logo Private String NamaKurir Private String Method

Nama Method Fungsi

setCourier($idKurir, $logo,

$nama)


kurir pada database

getCourier() Digunakan untuk mengambil data

kurir pada database

18. Class Entity TDestination

Merupakan kelas entity yang berisi data dari tabel kota dan provinsi

Tabel 3.36. Tabel Deskripsi Class Entity TDestination

Atribut


IdKota Private Integer Kota Private String Provinsi Private String

commit to user

49

Method

Nama Method Fungsi

setDestination($idKota, $kota,

$prov)


area tujuan pada database

getDestination() Digunakan untuk mengambil data

area tujuan pada database

3.2.6 Sequence Diagram

3.2.6.1 Sequence Diagram Login

a) Login Customer

Gambar 3.15. Sequence Diagram Login Customer

b) Login Admin

Gambar 3.16. Sequence Diagram Login Admin

: Customer

: MainWrapper<<boundary>>

: TMember<<entity>>

: Login<<control>>

1 : uiLogin()

2 : data Login

3 : cek_login()4 : getMember()

5 : true/false6 : showMessage()

7 : message

: Customer


: TMember<<entity>>

: Login<<control>>

1 : uiLogin()

23 : data Login

4 : cek_login()5 : getMember()

6 : t rue/false7 : showMessage()

8 : message

commit to user

50

3.2.6.2 Sequence Diagram Register

Gambar 3.17. Sequence Diagram Register

3.2.6.3 Sequence Diagram Update Account

Gambar 3.18. Sequence Diagram Update Account

3.2.6.4 Sequence Diagram Give Testimonial

Gambar 3.19. Sequence Diagram Give Testimonial

: C u stome r

: M a inW ra ppe r< >

: A ccoun t< < c ontro l> >

: T Memb er< < e nt ity > >

1 : u iR eg iste r()

2

3 : d a taR egiste r

4 : v a lida s iFo rm()5 : s e tMem ber()

6 : u iR egiste r()

7 : s howMes sage ()

8 : m essag e

: Customer

: MainW rapper<<boundary>>

: Account<<control>>

: TMember<<entity>>

1 : uiManajemenAccount()2 : selectDataByID()

3 : getMember()

4 : Data Member5

6 : tampilan form

7 : Data Account Baru8 : UpdateAccount()

9 : setMember()

10 : uiManajemenAccount()

11 : showMessage()12 : message

: Customer


: Testimonial<<control>>

: TTestimonial<<entity>>

1 : uiTestimonial()

23 : data Testimonial

4 : TambahTestimonial()

5 : validasi()

6 : setTestimonial()

7 : uiTestimonial()

commit to user

51

3.2.6.5 Sequence Diagram Add To Cart

Gambar 3.20. Sequence Diagram Add To Cart

3.2.6.6 Sequence Diagram View Product

Gambar 3.21. Sequence Diagram View Product

3.2.6.7 Sequence Diagram Update Cart

Gambar 3.22. Sequence Diagram Update Cart

: Customer

: MainW rapper<<boundary>>

: Order<<control>>

1 : uiProduk()

2 : tampilan produk

3 : Jumlah Item4 : setDataCart()

5 : UpdateCart()

6 : uiCart()

7 : data Cart

: Customer


: Product<<control>>

: TProduct<<entity>>

1 : uiProduk()2 : ViewAllProduct()

3 : getAllProduk()

4 : query data produk

5 : uiProduk()

6 : Data Produk

7 : Produk Spesifik()8 : ViewProductByID()

9 : getProdukByID()

10 : query data produk

11 : uiProduk()12 : Data Produk Spesifik

: Customer


: Order<<co ntrol>>

1 : uiCart()2 : ShowCart()

3 : data cart4 : Data Cart

5 : Data Cart Baru

6 : UpdateCart()

7 : data cart8 : Data Cart Baru

commit to user

52

3.2.6.8 Sequence Diagram Cancel Order

Gambar 3.23. Sequence Diagram Cancel Order

3.2.6.9 Sequence Diagram Add Product

Gambar 3.24. Sequence Diagram Add Product

3.2.6.10 Sequence Diagram Add Destination

Gambar 3.26. Sequence Diagram Add Destination

: Customer


: Order<<control>>

: TOrder<<entity>>

1 : uiOrder()2 : ViewOrder()

3 : getOrder()

4 : data order56 : Data Order

7 : Confirm Batal Order8 : cancelOrder()

9 : setOrder()

10 : uiOrder()


: Admin

: Main<<boundary>>

: ProductControl<<control>>


1 : uiManajemenProduct()

2 : tampilan Form3 : Data Produk

4 : AddProduct()5 : setProduct()


7 : ShowMessage()

8 : message

: Admin

: Main<<boundary>>

: ShippingControl<<control>>

: TDestination<<entity>>

1 : uiManajemenDest ination()

2 : tampilan ui

3 : Data Baru4 : AddDestination()

5 : setDestination()

6 : uiManajemenDest ination()

7 : ShowMessage()8 : message

commit to user

53

3.2.6.11 Sequence Diagram CheckOut

Gambar 3.25. Sequence Diagram CheckOut

3.2.6.12 Sequence Diagram Delete Product

Gambar 3.28. Sequence Diagram Delete Product

: Customer

: MainWrapper<<bounda ry> >

: O rde r<<control>>

: TOrderDetail<<ent ity >>

: TOrder<<ent ity >>

: TShipping<<ent ity >>

: TMember<<ent ity >>

: TProduct<<ent ity >>

1 : uiCheckout()2 : ShowCart()

3 : getAddress()

4 : data alama t

5 : getShipping()

6 : data sh ipping

7 : getProdukBy ID()

8 : da ta produk

910 : tampilan checkout

11 : Da ta Address, Kurir 12 : setDataCheckout()13 : getShipping()

14 : da ta shipping

15 : setTotal()

1617 : tota l

18 : Confirm19 : addOrder()

20 : setOrde r()

21 : setOrde rDe tail()

22 : uiCheckout()

23 : showMessage()

24 : message

: Admin

: Main<<boundary>>

: ProductControl<<control>>



2 : ui Product

3 : Data yang akan dihapus4 : ViewProductByID()

5 : getProdukByID()

6 : data ProdukByID7 : uiManajemenProduct()

89

10 : Konfirmasi Hapus11 : DeleteProduct()

12 : setProduct()

commit to user

54

3.2.6.13 Sequence Diagram Update Product

Gambar 3.27. Sequence Diagram Update Product

3.2.6.14 Sequence Diagram Update Information

Gambar 3.29. Sequence Diagram Update Information

: Admin

: Main<<boundary>>

: ProductCont rol<<control>>



2 : tampilan ui

3 : ID Produk yang akan dibuah4 : ViewProductByID()

5 : getProdukByID()

6 : data produkByID


8 : Query Data Produk9 : Data Produk

10 : Data Produk Baru11 : UpdateProduct()

12 : setProduct()


14 : ShowMessage()15 : Message

: Admin

: Main<<boundary>>

: Information<<control>>

: TInformat ion<<entity>>

1 : uiManajemenInformation()

2 : ViewInformation()3 : getInformation()

4 : data Informasi5 : uiManajemenInformation()

67 : ui Informasi

8 : Data Baru9 : UpdateInformation()

10 : setInformation()

11 : uiManajemenInformation()

12 : ShowMessage()13

commit to user

55

3.2.6.15 Sequence Diagram Change Order Status

Gambar 3.30. Sequence Diagram Change Order Status

3.2.6.16 Sequence Diagram View Order

Gambar 3.31. Sequence Diagram View Order

: Admin

: Main<<boundary>>

: OrderControl<<control>>

: TOrder<<entity>>

: TOrderDetail<<entity>>

1 : uiManajemenOrder()

2 : ui Order

3 : Data Order yg akan diubah

4 : ViewOrderByID() 5 : getOrder()

6 : data Order7 : getOrderDetail()

8 : data OrderDetail9

10 : Data Order

11 : Status Baru

12 : UpdateOrder()13 : setOrder()

14 : uiManajemenOrder()


: A dmin

: Ma in< <boundary>>

: Orde rC ontrol<< control>>

: TO rder< <ent ity >>

: TOrderDeta il<<ent ity> >

: TProduct< <ent ity >>

: TShipping<<ent ity> >

1 : uiManajemenO rder()

2 : ui Orde r3 : O rder

4 : ViewA llOrder()

5 : viewO rderBy Time()

6 : ViewOrde rListBy Status()

7 : getOrder()

8 : data Orde r

9 : getOrde rDetail()

10 : da ta O rderDetail

11 : ge tProdukByID()

12 : da ta ProdukByID

13 : ge tShipp ing()

14 : da ta Shipping

15 : uiMana jemenOrde r()

commit to user

56

3.2.6.17 Sequence Diagram Add Shipping Price

Gambar 3.32. Sequence Diagram Add Shipping Price

3.2.6.18 Sequence Diagram Update Shipping

Gambar 3.33. Sequence Diagram Update Shipping

: Admin

: Main<<boundary>>



: TShipping<<entity>>

: TCourier<<entity>>

1 : getDestination()

2 : data destination3 : getCourier()

4 : data courier5 : uiManajemenShipping()6 : ui Shipping

7 : Data Shipping Baru8 : AddShipping()

9 : Validasi()

10 : setShipping()

11 : uiManajemenShipping()

12 : ShowMessage()

13 : Message

: Admin

: Main<<boundary>>


: TShipping<<entity>>


: TCourier<<entity>>

1 : uiManajemenShipping()2 : ViewShipping()

3 : getShipping()

4 : data Shipping5 : getDest ination()

6 : data Destination7 : getCourier()

8 : data Courier

910 : Data Shipping

11 : Data baru

12 : UpdateShipping()

13 : setShipping()

14 : uiManajemenShipping()

15 : ShowMessage()

16 : Message


commit to user

57

3.3 Perancangan Database

3.3.1 Skema Database

Gambar 3.34. Skema Database

3.3.2 Definisi Tabel

3.3.2.1 Tabel User

Digunakan untuk menyimpan data login admin dan manajer.

Tabel 3.37. Tabel User

Nama

Field

Tipe Data Keterangan

Id_user Tinyint(2) Kode unik user, Primary Key

username Varchar(10) Username untuk login

Password Varchar(30) Password untuk login

Level_user Enum(‘admin’,’manajer’) Level user untuk login

3.3.2.2 Tabel Kategori Produk

Digunakan untuk menyimpan data kategori produk.


commit to user

58

Tabel 3.38. Tabel Kategori Produk

Nama Field Tipe Data Keterangan

Id_kategori Tinyint(2) Kode unik kategori, Primary Key

Nama_kategori Varchar(20) Nama kategori produk

deskripsi text Deskripsi keterangan kategori produk

3.3.2.3 Tabel Produk

Digunakan untuk menyimpan data produk.

Tabel 3.39. Tabel Produk


id_produk Int(5) Kode unik produk, Primary Key

nama_produk Varchar(35) Nama produk

Harga Int(6) Harga produk

Stok Smallint(3) Stok produk

Berat_gr Smallint(6) Berat produk dalam gram

Ket Text Keterangan detail produk

Id_kategori Tinyint(2) Kode unik kategori

Tgl_upload Date Tanggal produk dipasang

3.3.2.4 Tabel Gambar Produk

Digunakan untuk menyimpan gambar produk.

Tabel 3.40. Tabel Gambar Produk


id_gambar Smallint(5) Kode unik gambar, primary key

Gambar Varchar(20) Nama file gambar

Thumb Varchar(20) Nama file thumb

Default Enum(‘1’,’0’) Status sebagai gambar default

Id_produk Int(5) Kode unik produk


commit to user

59

3.3.2.5 Tabel Member

Digunakan untuk menyimpan data member.

Tabel 3.41. Tabel Member


Id_member Int(5) Kode unik member, primary key

Tgl_lahir date Tanggal lahir member

Email Varchar(30) Email member

Jk Enum(‘L’,’P’) Jenis Kelamin Member

Tgl_daftar Date Tanggal daftar Member

Password Varchar(30) Password Member Login

3.3.2.6 Tabel Testimonial

Digunakan untuk menyimpan data testimonial member.

Tabel 3.42. Tabel Testimonial


id_testimonial Int(5) Kode unik testimonial, primary key

Id_member Int(5) Kode unik member

Tgl_testimonial Date Tanggal testimonial diberikan

Isi_testimonial Text Isi Testimonial

3.3.2.7 Tabel Alamat

Digunakan untuk menyimpan data alamat.

Tabel 3.43. Tabel Alamat


Id_alamat Int(5) Kode unik alamat

Nama_penerima Varchar(35) Nama penerima pesanan

Alamat Text Alamat penerima pesanan

Kota Varchar(35) Kota penerima pesanan

Provinsi Varchar(35) Provinsi Penerima Pesanan

Kodepos Int(5) Kodepos Penerima Pesanan


commit to user

60

No_telp Varchar(13) No Telepon Penerima Pesanan

email_penerima Varchar(30) Email Penerima Pesanan

Id_member Int(5) Kode Unik Member

3.3.2.8 Tabel Provinsi

Digunakan untuk menyimpan data provinsi.

Tabel 3.44. Tabel Provinsi


Id_provinsi Smallint(3) Kode Unik Provinsi, primary key

Nama_provinsi Varchar(30) Nama provinsi

3.3.2.9 Tabel Kota

Digunakan untuk menyimpan data kota.

Tabel 3.45. Tabel Kota


Id_kota Smallint(5) Kode unik kota

Nama_kota Varchar(30) Nama Kota

Id_provinsi Smallint(3) Kode Unik Provinsi

3.3.2.10 Tabel Kurir

Digunakan untuk menyimpan data kurir.

Tabel 3.46. Tabel Kurir


Id_kurir Tinyint(1) Kode unik kurir, primary key

Nama_kurir Varchar(15) Nama kurir

logo Varchar(15) Logo Kurir

3.3.2.11 Tabel Tarif

Digunakan untuk menyimpan data tarif.


commit to user

61

Tabel 3.47. Tabel Tarif


id_tarif Int(5) Kode Unik Tarif, primary key

Id_kurir TinyInt(1) Kode unik kurir

Id_kota SmallInt(5) Kode Unik Kota

Harga_kg Int(6) Tarif Pengiriman per Kg

3.3.2.12 Tabel Pesanan

Digunakan untuk menyimpan data pesanan.

Tabel 3.48. Tabel Pesanan


Id_pesanan Varchar(11) Kode unik pesanan, primary key

Tgl_pesan Date Tanggal pesanan

Status Enum(‘1’,’2’,’3’,

’4’,’5’)

1: Belum Dibayar, 2:Diproses,

3:Terkirim, 4:Diterima, 5:Batal

Id_member Int(5) Kode unik member

Id_kurir Tinyint(3) Kode unik kurir

ongkir Mediumint(6) Biaya ongkos kirim berdasarkan

alamat yang dipilih

Id_alamat int(4) Kode unik alamat

No_resi Varchar(25) Nomor resi pengiriman

Tgl_kirim Date Tanggal pengiriman barang

3.3.2.13 Tabel Detail Pesanan

Digunakan untuk menyimpan data pesanan detail.

Tabel 3.49. Tabel Detail Pesanan


Id_pesanan Varchar(11) Kode unik detail pesanan, primary key

Id_produk Int(5) Kode unik produk

Jml Tinyint(2) Jumlah produk yang dibeli

harga Int(6) harga per produk

berat Smallint(4) Berat Per Produk


commit to user

62

3.3.2.14 Tabel Infoweb

Digunakan untuk menyimpan data informasi web.

Tabel 3.50. Tabel Infoweb


Id_info Tinyint(2) Kode unik Informasi Web

Jenis_info Varchar(15) Jenis Informasi

Isi_info Text Isi Informasi

Gbr_info Varchar(20) Gambar Informasi

3.4 Perancangan Interface

3.4.1 Perancangan Interface Admin dan Manajer

Gambar 3.35. Perancangan Interface Admin

3.4.2 Perancangan Interface Customer

Gambar 3.36. Perancangan Interface Customer


commit to user 63

BAB IV

IMPLEMENTASI DAN EVALUASI SISTEM

4.1 Implementasi Sistem

Aplikasi ini merupakan aplikasi web yang dijalankan pada mobile

browser sehingga berbasis client-server. Pada aplikasi ini terdapat tiga

halaman, yaitu halaman User/Customer, halaman Admin dan halaman

Manajer.

4.1.1 Halaman Utama

Halaman utama adalah halaman yang dapat diakses oleh user tanpa

harus login terlebih dahulu. Di mobile tampilan yang baik adalah yang

minimalis dan cepat di-load. Oleh karena itu, menu yang ada hanya yang

penting dengan navigator yang mudah dijangkau. Berikut tampilan

halaman depan :

Gambar 4.1. Tampilan Halaman Utama


commit to user

64

4.1.2 Halaman Produk per Kategori

Pada halaman ini menampilkan daftar produk per kategori yang

dipilih dari halaman Utama. Informasi produk yang ditampilkan hanya

nama produk, harga produk dan input-an untuk dimasukkan ke

keranjang/troli.

Gambar 4.2. Tampilan Halaman Produk per Kategori

4.1.3 Halaman Troli/Keranjang/Cart

Halaman yang berisi informasi pada troli/keranjang yang dipilih dari

menu keranjang di atas. Tombol Update untuk memperbarui jumlah item

dalam keranjang. Tombol Lanjut untuk mengarah ke halaman Check Out.

Gambar 4.3. Halaman Troli/Keranjang/Cart


commit to user

65

4.1.4 Halaman Checkout

Pada halaman Checkout, terdapat pengecekan session, apakah user

sudah login atau belum. Jika belum diarahkan ke halaman login, Jika sudah

ditampilkan halaman Checkout. Berisi mengenai informasi pesanan dan

informasi alamat pengiriman yang nantinya memilih kurir pengiriman

sehingga diketahui total pembayaran.

Gambar 4.4 Halaman Login

Gambar 4.5 Halaman Checkout setelah login

Script untuk halaman Checkout (Gambar 4.4 dan 4.5)

- Pada Controller katalog :

public function order() {

$login=$this->session->userdata('log_in');

$data['id_member']=$login['id'] ;

Mengecek apakah user telah login. Jika sudah menampilkan daftar pesanan dan alamat. Jika

belum, diarahkan ke halaman login.


commit to user

66

if (!$login) {

redirect ('mobile/user/login', 'refresh');

} else {

$this->data->alamat = $this->member->get_alamat($data['id_member']);

$data = $this->member->get_alamat($data['id_member']);

$this->data->kurir=$this->order_m->get_ship();

$this->data->content='mobile/order';

$this->load->view('mobile/user_view',$this->data); } }

- Pada Model Member dan order_m

Mengambil data alamat member yang login dari database

function get_alamat($id_member) {

$this->db->from('alamat');

$this->db->join('kota','kota.id_kota=alamat.kota');

$this->db->join('provinsi','provinsi.id_provinsi=alamat.provinsi');

$this->db->where('id_member',$id_member);

$query=$this->db->get()->result();

if($query) return $query;

else return false; }

Mengambil data kurir dari database

function get_ship() {

$query=$this->db->get('kurir');

return $query->result(); }

4.1.5 Halaman Setelah Checkout

Berisi informasi setelah checkout, seperti total ongkos kirim dari alamat

yang dipilih sebelumnya, total pembelian produk, total pembayaran dan

bank tujuan transfer.


commit to user

67

Gambar 4.6. Halaman Checkout Sukses

Ketika pesanan ditambahkan, otomatis akan mengurangi stok dalam

database untuk produk yang dipesan, menghitung tarif ongkos kirim

berdasarkan kurir dan alamat yang dipilih dan membuat order

Script untuk gambar 4. :

- Pada Controller Katalog :

public function add_order() {

$login=$this->session->userdata('log_in');

$id_member=$login['id'] ;

$tgl_pesan = date("Y-m-d");

$status='1';

$id_alamat=$this->input->post('alamat');

$total=$this->input->post('total');

$berat=$this->input->post('berat');

$jasa=$this->input->post('jasa');

$almt = $this->member->get_alamat_det($id_alamat);

$idkota=$almt->kota;

$tarif=$this->shipping_m->find_tarif($idkota,$jasa);

$akhir=$this->order_m->get_last_order();

$tgl=substr($akhir->id_pesanan,0,8);

$id=substr($akhir->id_pesanan,8);

Menentukan id pesanan berdasarkan id pesanan terakhir. Jika belum ada, maka id pesanan

sama dengan 1, jika ada, id pesanan terakhir ditambah 1.

if ($tgl==date('Ymd')) $id=$id+1; else $id=1;

$id_pesanan=date('Ymd').$id;


commit to user

68

Menghitung biaya pengiriman berdasarkan parameter berat dan tarif per kg

$ongkir= $this->hitung_ongkir($berat,$tarif->harga_kg);

$total2=$total+$ongkir;

Menambahkan ke database ke tabel pesanan

$data=array("id_pesanan"=>$id_pesanan,"tgl_pesan"=>$tgl_pesan,"status"=>$status,

"id_member"=>$id_member, “id_alamat"=>$id_alamat, "id_kurir"=>$tarif->id_kurir,

"ongkir"=>$tarif->harga_kg);

$query=$this->order_m->tmbh_order($data);

$id=$this->input->post('id_produk');

$qty=$this->input->post('qty');

if ($query) {

Menambahkan pesanan pada keranjang ke database tabel detail pesanan. Karena berjenis

array dan lebih dari satu, maka digunakan perulangan.

foreach($this->cart->contents() as $items){

$data=$this->produk_m->get_product($items['id']);

$tot_brt=$items['weight']*$items['qty'];

$data=array("id_pesanan"=>$id_pesanan, "id_produk"=>$items['id'],

"jml"=>$items['qty'], "harga"=>$data->harga, "berat"=>$data->berat_gr);

$query2=$this->order_m->insert_detail($data);

$stok=($items['stok']-$items['qty']);

$data=array('stok'=>$stok);

$this->produk_m->update($items['id'], $data); }

if ($query2) {

Jika sukses menyimpan, mengirimkan nilai total pembayaran pada halaman selanjutnya.

$this->cart->destroy();

$this->data->idpesanan=$id_pesanan;

$this->data->tot_harga=$total;

$this->data->total=$total2;

$this->data->ongkir = $ongkir;

$this->data->content='mobile/order_done';

$this->load->view('mobile/user_view',$this->data); }

else { $this->data->content='mobile/order_error';

this->load->view('mobile/user_view',$this->data); }

} else { $this->data->content='mobile/order_error';

this->load->view('mobile/user_view',$this->data); } }

commit to user

69

Fungsi untuk menghitung biaya pengiriman

function hitung_ongkir($berat, $tarif) {

$brt=($berat%1000);

if ($brt >0 ) {

if ($berat < 1000) {

$brt = 1;

$ongkir=($tarif*$brt); }

else {

$bulat=$berat-$brt;

$ongkir=($tarif*(($bulat/1000)+1)); }

} else {

$brt=($berat/1000);

$ongkir=($tarif*$brt); }

return $ongkir; }

- Pada Model order_m :

function tmbh_order($data=array()) {

if ($this->db->insert('pesanan',$data) ) return true;

return false; }

function insert_detail($data=array()) {

if ($this->db->insert('detail_pesanan',$data)) return true;

return false; }

4.1.6 Halaman Account User

Berisi daftar menu pengaturan account setelah user login.

Gambar 4.7. Halaman Account


commit to user

70

4.1.7 Halaman Home Admin

Halaman Home berisi informasi umum setelah admin login.

Gambar 4.8. Halaman Home Admin

4.1.8 Halaman Pengaturan Pesanan Admin

Pada halaman ini berisi informasi mengenai semua pesanan. Untuk

status dibatalkan dan diterima, tidak ada aksi yang ditampilkan karena

pesanan sudah selesai dan tidak bisa diubah. Untuk status Sudah Dibayar,

hanya ada aksi edit dan tidak bisa dibatalkan. Sedang status Belum Dibayar,

aksi yang ditampilkan edit dan cancel untuk membatalkan.

Gambar 4.9. Halaman Pengaturan Pesanan Admin

4.1.9 Halaman Pengaturan Pengiriman Admin

Halaman ini berisi 4 sub kategori yaitu, kota, provinsi, kurir dan tarif.

Ketika memasukkan tarif, memilih kurir dan kota lalu menentukan tarif.


commit to user

71

Gambar 4.10. Halaman Pengaturan Pengiriman Admin

4.1.10 Halaman Home Manajer

Halaman Home berisi informasi umum setelah admin login.

Gambar 4.11. Halaman Home Manajer

4.1.11 Halaman Laporan Grafik Transaksi Manajer

Berisi gambar grafik untuk jumlah per status pada bulan ini. Manajer

bisa melihat daftar pesanan dengan filter status. Detail pesanan bisa dilihat

dengan mengklik id pesanan.


commit to user

72

Gambar 4.12. Halaman Laporan Grafik Transaksi Manajer

Halaman detail order menampilkan secara detail isi pesanan tetapi

manajer tidak dapat mengubahnya.

Gambar 4. Halaman Detail Order Manajer


commit to user

73

Script program untuk menampilkan halaman grafik transaksi per status (

Gambar 4. ) :

- Pada Controller Laporan

function trx() {

Jika Tombol submit pada proses menampilkan data pesanan per status

if ($_POST) {

$data=$this->order_m->lap_by_status($this->input->post('status'));

if ($data) {

$this->table->set_heading('No Pesanan','Tanggal Pesan','Email User','Total','Status');

foreach ($data as $q) {

$ongkir = $this->hitung_ongkir($q->tot_berat, $q->ongkir);

$total=$q->subtotal + $ongkir;

$this->table->add_row(anchor('manajer/laporan/detail_pesanan/'.$q->id_pesanan,

$q->id_pesanan), $q->tgl_pesan,$q->email,$total,$q->nama_status);

}

$this->table->set_template($this->tmpl);

$this->data->tabel=$this->table->generate();

} else

$this->data->tabel="Tidak ada Pesanan dengan status yang dimaksud";

}

$this->data->stok = $this->grafik_trx();

$this->data->stat=$this->order_m->get_status();

$this->data->tengah='manajer/tengah/trx';

$this->load->view('manajer/manajer', $this->data); }

Fungsi menampilkan grafik menggunakan library fusion chart

function grafik_trx() {

$graph_swfFile = $this->config->item('base_url').'public/Charts/FCF_Column2D.swf' ;

$graph_caption = 'Grafik Transaksi per status Bulan Ini' ;

$graph_title = 'Stok per Kategori Hari ini' ;

$graph_width = 450 ;

$graph_height = 250 ;

$data=$this->grafik->grafik_status();

$i=0;

foreach ($data as $y) {

$yrrData[$i][1] = $y->nama_status;

$yrrData[$i][2] = $y->jml;

$i++; }

commit to user

74

$strXML = "<graph caption='".$graph_caption."' formatNumberScale='0'

decimalPrecision='0'>";

foreach ($yrrData as $yrSubData) {

$strXML .= "<set name='" . $yrSubData[1] . "' value='" . $yrSubData[2] . "'

color='".getFCColor()."' />"; }

$strXML .= "</graph>";

$chart2=renderChart($graph_swfFile, $graph_title, $strXML, "div" , $graph_width,

$graph_height);

return $chart2; }

- Pada Model Grafik dan Order_m

function grafik_status() {

$query=$this->db->query("select *,count(*) as jml from pesanan inner join ket_status on

ket_status.id_status = pesanan.status where tgl_pesan Like '%-".date('m')."-%' group

by status");

return $query->result(); }

function get_status() {

return $this->db->get('ket_status')->result(); }

Query untuk menampilkan daftar pesanan berdasarkan status yang dipilih

function lap_by_status($status) {

$this->db->select('pesanan.id_pesanan, tgl_pesan, email,nama_status, (select

sum(jml*harga) as subtotal from detail_pesanan where

detail_pesanan.id_pesanan = pesanan.id_pesanan) as subtotal, (select

sum(jml*berat) as subtotal from detail_pesanan where detail_pesanan.id_pesanan

= pesanan.id_pesanan) as tot_berat, ongkir');

$this->db->from('pesanan');

$this->db->join('member','member.id_member=pesanan.id_member');

$this->db->join('kurir','kurir.id_kurir = pesanan.id_kurir');

$this->db->join('alamat','alamat.id_alamat = pesanan.id_alamat');

$this->db->join('ket_status','ket_status.id_status=pesanan.status');

$this->db->join('detail_pesanan','detail_pesanan.id_pesanan=pesanan.id_pesanan');

$this->db->where('status',$status);

return $this->db->get()->result(); }


commit to user

75

4.2 Analisa

Ketika halaman utama diakses, terdapat pengecekan device. Jika

dibuka melalui browser PC, maka diarahkan ke halaman web desktop,

namun jika melalui browser mobile, maka diarahkan ke halaman web

mobile.

User melihat katalog produk tidak perlu autentikasi login. Tetapi

ketika checkout dibutuhkan autentikasi login, hanya yang terdaftar yang bisa

checkout. Untuk halaman Admin dan Manajer juga dibutuhkan autentikasi.

Penetapan biaya pengiriman berdasarkan kota dari alamat yang

dipilih, jasa pengiriman (kurir) yang dipilih dan berat pesanan secara

keseluruhan. Untuk berat pesanan, jika lebih, maka dibulatkan ke atas,

contoh: berat 1,5 kg dihitung 2 kg.

Selain itu, terdapat kemungkinan bahwa member yang memesan tidak

segera membayar padahal ketika pesanan dikirim ke sistem, stok produk

sudah berkurang sesuai jumlah pada pesanan. Untuk mengatasi hal ini,

terdapat pengecekan status dengan tanggal pemesanan dan tanggal hari ini.

Jika lebih dari 3 hari, maka sistem akan mengubah secara otomatis status

pesanan dibatalkan dan stok dikembalikan. Untuk status dibatalkan yang

diubah oleh admin, stok juga dikembalikan.

Penambahan validasi form pada inputan ke keranjang agar inputan

hanya angka dan bukan huruf, jumlah produk yang dibeli tidak melebihi

stok yang tersedia.

Tampilan pada web mobile minimalis, tidak terlalu banyak gambar

dan lebar tampilan disesuaikan lebar perangkat.

Dari analisa di atas, telah diterapkan pada aplikasi mobile web dan

berjalan dengan baik.


commit to user 76

BAB V

PENUTUP

5.1 Kesimpulan

Berdasarkan penelitian dan pembahasan yang telah dipaparkan

sebelumnya, maka dapat diambil kesimpulan sebagai berikut :

1. Telah dibangun aplikasi m-commerce mobile web untuk Batik Solo

menggunakan framework CodeIgniter dan database MySQL.

2. Aplikasi ini digunakan untuk tiga user : customer, admin dan manajer.

Aplikasi mobile web digunakan untuk sisi customer, sedang admin dan

manajer menggunakan web desktop.

3. Terdapat tiga aktor : customer, admin dan manajer

4. Pada aplikasi m-commerce ini terdapat 15 tabel dalam database

5. Pada aplikasi m-commerce ini terdapat 6 status pesanan

6. Terdapat pengecekan status order untuk memperbarui stok

7. Aplikasi ini telah diujicobakan pada opera mobile emulator dan berjalan

lancar

8. Aplikasi ini untuk menangani kegiatan transaksi jual beli produk Batik

5.2 Saran

Berdasarkan kesimpulan di atas, diperoleh beberapa saran untuk

pengembangan aplikasi lebih lanjut, yaitu :

1. Customer dapat memberikan komentar atau review mengenai suatu produk

2. Terdapat tambahan atribut dan warna untuk tiap produk

3. Terdapat variasi filter untuk tampilan data pesanan dan produk

4. Update otomatis status dijalankan sistem pada waktu tertentu.

pembuatan aplikasi mobile website m-commerce untuk …/pembuatan... · pembuatan aplikasi mobile...

Documents