Pembangunan Aplikasi E-Commerce Di Merdeka Handphone Square

" # "

# $#"#% & ' # $&'#%

" (

! )

)

&'&'(&&&

!

" #$ !

" %

" "

&

& '

& "

, $ " $ % ,

- .'. .# " " /

0 $ 1 ! "* $ " 2

& "+ * " 1*1 *$ % "

- $ 18* " -2

- & "

ix

Gambar 1.1 Metode Waterfall ... 10

Gambar 2.1 Struktur Organisasi ... 13

Gambar 3.1 Prosedure Penjualan Barang Di Setiap Toko ... 36

Gambar 3.2 Prosedure Rekapitulasi Penjualan ... 38

Gambar 3.3 ERD Aplikasi E-commerce _{Merdeka Handphone Square ... 40}

Gambar 3.4 DFD Level 1Aplikasi E-Commerce _{Merdeka Handphone Square ... 45}

Gambar 3.5 DFD Level 2 Proses 2.0 ... 46

Gambar 3.12 DFD Level 3Proses 3.3 ... 49

Gambar 3.13 DFD Level3 Proses 3.4 ... 50

Gambar 3.14 DFD Level 3 Proses 3.5 ... 50

Gambar 3.15 DFD Level 3 Proses 3.6 ... 51

Gambar 3.16 DFD Level 3 Proses 3.7 ... 51

Gambar 3.17 DFD Level 3 Proses 3.0 ... 52

x

Gambar 3.21 Struktur menu pengunjung ... 76

Gambar 3.22 Struktur Menu Member ... 77

Gambar 3.23 Struktur Menu Admin Toko ... 77

Gambar 3.24 Struktur Menu Merdeka ... 78

Gambar 3.25 Home ... 79

Gambar 3.26 Shop Detail ... 79

Gambar 3.27 Find Product ... 80

Gambar 3.28 Register ... 80

Gambar 3.29 About Us ... 81

Gambar 3.30 Lupa Password... 81

Gambar 3.31 Cara Pembayaran ... 82

Gambar 3.32 Ongkos Kirim ... 82

Gambar 3.33 Menu Utama ... 83

Gambar 3.34 Shop Details ... 83

Gambar 3.35 Hasil Pencarian ... 84

Gambar 3.36 Register ... 84

Gambar 3.37 About Us ... 85

Gambar 3.38 Login ... 85

Gambar 3.39 Lupa Password... 86

xi

Gambar 3.44 Profile ... 88

Gambar 3.45 Ganti Password ... 89

Gambar 3.46 Lihat History... 89

Gambar 3.47 Konfirmasi Pembayaran ... 90

Gambar 3.48 Detail History ... 90

Gambar 3.49 Checkout ... 92

Gambar 3.50 Selesai ... 92

Gambar 3.51 Login Admin Merdeka ... 92

Gambar 3.52 Menu Utama ... 92

Gambar 3.53 Konfigurasi Website ... 93

Gambar 3.54 Kelola Toko ... 94

Gambar 3.55 Admin Toko ... 94

Gambar 3.56 Kelola Provinsi ... 94

Gambar 3.57 Kelola Toko ... 95

Gambar 3.58 Kelola Ongkos Kirim ... 95

Gambar 3.59 Tambah Toko ... 96

Gambar 3.60 Edit Toko ... 96

Gambar 3.61 Tambah Admin Toko ... 97

Gambar 3.62 Edit Admin Toko ... 97

xii

Gambar 3.67 Tambah Ongkos Kirim ... 100

Gambar 3.68 Edit Ongkos Kirim ... 100

Gambar 3.69 Login Admin Toko ... 101

Gambar 3.70 Menu Utama Admin Toko ... 101

Gambar 3.71 Konfigurasi Website ... 102

Gambar 3.72 Kelola Administrator ... 102

Gambar 3.73 Kelola kategori ... 103

Gambar 3.74 Kelola Barang ... 103

Gambar 3.75 Kelola Rekening ... 104

Gambar 3.76 Kelola Data Transaksi ... 104

Gambar 3.77 Laporan Penjualan Harian ... 105

Gambar 3.78 Laporan Penjualan Bulanan ... 105

Gambar 3.79 Laporan Penjualan Tahunan ... 106

Gambar 3.80 Tambah Kategori ... 106

Gambar 3.81 Edit Kategori ... 107

Gambar 3.82 Tambah Barang ... 107

Gambar 3.83 Edit Barang ... 108

Gambar 3.84 Tambah Rekening ... 108

Gambar 3.85 Edit Rekening ... 109

xiii

Gambar 3.90 jaringan Semantik Admin Merdeka ... 111

xiv

Tabel 3.2 Kamus Data... 67

Tabel 3.3 Tabel Admin ... 72

Tabel 3.4 Tabel Category ... 72

Tabel 3.5 Tabel Commodity ... 72

Tabel 3.6 Tabel Detailpembelian ... 73

Tabel 3.7 Tabel nota ... 73

Tabel 3.8 Tabel customer ... 74

Tabel 3.9 Tabel nota ... 74

Tabel 3.10 Tabel shops ... 74

Tabel 3.11 Tabel provinsi ... 75

Tabel 3.12 Tabel kota ... 75

Tabel 3.13 Tabel ongkoskirim ... 75

Tabel 4.1 Implementasi antar muka ... 119

Tabel 4.2 Skenario pengujian aplikasi member ... 121

Tabel 4.3 Skenario pengujian aplikasi operator ... 122

Tabel 4.4 Skenario pengujian aplikasi administrator ... 123

Tabel 4.5 Pengujian Registrasi member ... 124

Tabel 4.6 Pengujian login member ... 125

Tabel 4.7 Pengujian logout ... 126

Tabel 4.8 Pengujian ubah profil member ... 127

xv

Tabel 4.13 Pengujian meu shopping cart ... 130

Tabel 4.14 Pengujian form pengiriman ... 130

Tabel 4.15 Pengujian formcheckout ... 131

Tabel 4.16 Pengujian form konfirmasi pembayaran ... 131

Tabel 4.17 Pengujian menu history ... 132

Tabel 4.18 Pengujian login administrator ... 132

Tabel 4.19 Pengujian data operator ... 133

Tabel 4.20 Pengujian tambah operator ... 134

Tabel 4.21 Pengujian login operator ... 134

Tabel 4.22 Pengujian data pengiriman ... 135

Tabel 4.23 Pengujian tambah pengiriman ... 136

Tabel 4.24 Pengujian data provinsi... 137

Tabel 4.25 Pengujian tambah provinsi ... 138

Tabel 4.26 Pengujian lihat kota ... 139

Tabel 4.27 Pengujian tambah kota ... 139

Tabel 4.28 Pengujian lihat kategori ... 140

Tabel 4.29 Pengujian tambah kategori ... 141

Tabel 4.30 Pengujian lihat produk ... 142

Tabel 4.31 Pengujian tambah produk ... 143

Tabel 4.32 Pengujian lihat member ... 144

xvi

Tabel 4.37 Hasil pengujian kuesioner soal nomor 4 ... 149

Tabel 4.38 Hasil pengujian kuesioner soal nomor 5 ... 150

Tabel 4.39 Hasil pengujian kuesioner soal nomor 6 ... 150

" "

" "

! #

%

! #

%

!

&

" !

& "

( "

)

#

$ % !

'

* #

!

)

'

-.& /- . & ( 0

-.&

%#

#12

* # #

)

" "

"

! 3

,

+ 1 / ! !

&

1

! 1

" 1

4 # +

!

5

6

7

!

8 " )

91 ( , '4

# # ( , ' 8

! + ! ( $ $

&:& / 0

;<& / 0

$ 2

+

' (

" 3

! "

&

& ' ' ' # # #

& # $ $ %

)

#

% !

= ! / 0

# !

" / 0 !

! . (

# !

& ' $ ( $

)

! " 3

" "

" / 0

%

#

"

)

#

(

"

! !

" #

! "

#

/

0

> $

!

?

+ * %

# @

* * * * *

" !

"

!

! %

/ &:&0

/ ;<& 0

, * - +

!

, % * *

!

" # $ !

!

"

"

! #

% $ #

"

"

$ #

!

% " %

"

& '

' "

" !

%

!

( ) *

"

) *

+ , , ) *

,

%

,

- ) *

"

. ) *

# ) * ) *

/

/

0 %

1 ' ) *

' ) * %

2 ) *

3 ) *

) * ) *

!

& '

%

& % ) *

% ) *

" ! % %

! %

( % ) *

+ % ) ! *

) ! *

0 "

- % )! *

) *

! !

!

" 4 !

) ! % " *

% $ # # '%

#

$ % "% "

% " ) ! *

'%

0 % %

$

% %

0 %

% $

"

% $ %

& '%

' %

) *

0 % "

% !

5 ) *

0 % 0 %

%

! 6 4 ) *

0 % % 4

% " 4

" & '%

7 0 % ) * %

% % % %

( & '%

$ 0 %

$

$ #

0 % ) * )

! & '%

" % $ # '%

% ) *

%

%

%

%

%

" !

% %

%

8 %

" % $% '%

' " %

" %

! $ ) *

%

"

# %

%

" ) ' '%

0 % %

&

( %

+ !

-. !

1

( *+,%

-( # ' *+,%

-$ ) $ !

# 9 : "! !

"

) *

( *+-%

-"! !

" %

4

4

$ #

! !

! #

" # )(-*

!

! " % #

%

. / ) *

! 4

% ) 0 ) *

$

$

) *

(-2

# #

!

" %

.

$

( % ;"/ !

.

!

#

+ % ;"/ !

%

% !

!

!

%

( 1 + *+,%

-$

) ( * $ ) (/ ' $

$ ) ( *

& '

) * ! 0 %

$ #

%

!

( ) 0 * " !

%

$ 4

+ %

-1 ;6 ) / *

%

%

$ ) (/*

& %

( 4 %

! "

4 "

+ 4 ' %

- 1

) * ) " *

) * 4

$

! "

!

"

4 4

4 /

" 4

% !

$ @6, % %

1

E % !

5 5 5 $ # ! )

# * 0 ;E 7 !

4 5 4

", &FFG 4 8G F

8& &

1 3$ &

1 # ' 3$ &

) ! *

% #

%

/

1 ) ! --% 3$ &

/ G(&222... G(&"222...

/ G3&(+-.123F

;

, # ,

& 4

!

4

!

( , % ) 4

/ 2

% %

+ , 4 %

$.

8 #

% #

# #

%

< # ) *

!

%

8 % $ #

) *

!

% ) *

8 # ! ) 6# ) 7

%

! "

$ " 0 %

-& " ) *

( ) *

+ ) *

- ) *

)% *

$

8 # .&%: # 6#.#7

&F12 ;

# ; >

, , /

! ? ; 5 &F2+

!

/ ?

! $

C

) " %*%*

$A$

) 2 * $A$ !

, $A$

!

$

!

; , ) 0 *

0

% !

E

$ )% * "*

%

! ) *

%

% %

$ )% *

$

8 " * 3 ; & % $ # 6*;#7

; 6 $ ;"6 ! %

$

@ % "

%

; " ; 6 $

& ; ); *

;"6

;

;

) # *

( 6 )6 *

;"6

6

!

+

! %

- '

'

$

!

= 6 )&"&*

0

! " % ; & % $

= 6 )&"7*

>

! = 6 )7"&*

@

! 0 ) 3 % ; & % $

6 )7"7*

! 1 ) 3 % ) 3 ; & % $

. 3 )' ! *

% !

3

" ) ) ! * ) ) ! *

8 ( # 6 7

' " '

% % % '

% " % "%

" % $

@ L ! &H4 & ! (H4 ( #

! H4

' 4 " $ 56

7 8 56 7

1 %

$ L

L

2 " "

%

#

3 " %

# % % L

' 4 "

F 2 %

$ # 4 " $ # 4

" "

% "% 6 % , / < 4 !

< 4 ! ) *

B < 4 ! D , !

# 4 # 4 ,

, %

# 4 %

,

# 4

'

4 ! ) )

34 !

!

!

" ! "

# "

$

%

(

" # $ ! %

1. Penjual mengumpulkan nota pembelian yang dilakukan setiap harinya

2. Penjual akan membuat laporan rekapitulasi penjualan harian dengan form

yang telah disediakan.

3. Form yang telah diisi lalu akan diberikan kepada pemilik toko yang

& ' + ! , !

%

+

-" &

3.1.2.1 Entity Relationship Diagram (ERD)

Perancangan database pada sistem ini dimaksudkan untuk mempermudah hubungan antara tabel dengan tabel lainnya. Perancangan database meliputi Entitas

( ' ) *+

"

! *

/

* !

*

% !

# !

"

/

0

!

" # ( sangat mencukupi, hanya saja perlu adanya akses internet agar transaksi dapat berjalan maksimal karena dilakukan secara on-line serta memudahkan dalam pengolahan

database yang disimpan di server dan printer standar untuk mencetak rekapitulasi penjualan.

# #

Sistem Operasi yang digunakan di Merdeka Handphone Square adalah Windows XP sehingga sudah sangat mencukupi untuk dapat menjalankan perangkat lunak yang

akan dibagun. Adapaun perangakat lunak yang dibutuhkan dalam pembangunan aplikasi ini adalah :

1. Wamp server sebagai Web Server

2. PHP yang digunakan untuk membangun aplikasi ini

3. Macromedia Dreamweaver 8 sebagai editor PHP.

5. Untuk web browser agar dapat mengakses aplikasi ini dapat digunakan Microsoft

Internet Explorer, Mozilla Firefox.

, ( ' ) +

, &

-!

" "

!

' .

-, " & + /

informasi pemesanan dan penjualan yang diusulkan terdiri dari beberapa bagian, berikut

+ )8) - + ! + 6

& ' 5 )8) - + ! + 6

' )8) - + ! ' 6

7 )8) - + ! 7 6

& ' : )8) - + ! 7 6

5 )8) - + ! 5 6

9 )8) - + ! 9 6

& ' ; )8) - + ! 9 6

: )8) - ' ! ' (

3 )8) - ' ! ' +

& ' (( )8) - + ! ' 6

; )8) - ' ! ' '

(6 )8) - ' ! ' 7

& ' (' )8) - ' ! ' 7

(( )8) - ' ! ' 5

(+ )8) - ' ! ' 9

& ' (5 )8) - ' ! ' 9

(' )8) - ' ! ' :

(7 )8) - ' ! ' 3

& ' (: )8) - ' ! ' 6

(5 )8) - ' ! ' ;

(9 )8) - ' ! ' (6

& ' (; )8) - ' ! ' (6

, $ 1 #

Spesifikasi proses digunakan untuk menggambarkan proses model aliran yang terdapat pada DFD. Spesifikasi proses dari gambaran DFD diatas akan dijelaskan pada

tabel dibawah ini :

* 6 ( !

$ ! %

1. $ ! ( 6

$ ,

" !

1 )

< 1

) !

- ( !

+

' !

" &

Perancangan basis data adalah menciptakan atau merancang kumpulan data

yang terhubung dan tersimpan secara bersama – sama.

" #

& ' +6

" & # '

Tabel-tabel yang terdapat dalam basis data yang digunakan dalam sistem ini

adalah sebagai berikut

Tabel ini adalah perancangan untuk tabel admin merdeka yang akan digunakan

pada pembangunan sistem. Struktur tabel admin merdeka adalah sebagai berikut :

* 6 ' *

! " #

! " #

2. Tabel category

* 6 7 * 0

$

%

&

! ' " #

3. Tabel commodity

* 6 5 * 0

(

! ' " #

4. Tabel detailpembelian

* 6 9 * )

&

&

nama_pemesan_nota (

alamat_pemesan_nota kodepos_pemesan_nota email_pemesan_nota telp_pemesan_nota jenis_pembayaran status_pembayaran status_pengiriman harga_ongkos_kirim nama_bank_nota no_rekening_nota no_resi_nota id_rekening id_shops id_customer

$

varchar(100) varchar(20) Enum Enum Enum double varchar(100) varchar(100) varchar(50) integer

6. Tabel Customer

# ) )

7. Tabel rekening

* 6 ; *

&

& &

& &

! ' " #

8. Tabel shops

* 6 (6 *

*

9. Tabel Provinsi

* 6 (( *

10. Tabel Kota

&

! '

#

11. Tabel OngkosKirim

* 6 (' *

* &

! ' #

12. Tabel Jenis Pengiriman

$ *

& #

Interface atau antar muka merupakan tampilan dari suau program aplikasi yang berperan sebagai media komunikasi yang digunakan sebagai sarana berdialog antara program dengan user. Sistem yang akan dibangun diharapkan menyediakan interface

yang mudah dipahami dan digunakan oleh user.

& #

1. Struktur Menu Pengunjung

& ' +(

& ' ++

3. Struktur Menu Admin Toko

& ' +' *

4. Struktur Menu Admin merdeka

& ' +7

" & 1 &

Perancangan interface untuk aplikasi E-Commerce di merdeka handphone square adalah sebagai berikut :

3.3.2.1 Perancangan Antarmuka Pengunjung

1. Perancangan Antarmuka Home

& ' +5

& ' +9 )

3. Perancangan Antarmuka Find Product

& ' +: 8 ! "

& ' +3 ,

5. Perancangan Antarmuka About Us

& ' +; >

& ' '6 - ! /

7. Perancangan Antarmuka Cara Pembayaran

& ' '( 0 !

& ' '+ < %

3.2.2.1 Perancangan Antarmuka Member

( ! " > E F

& ' '' >

& ' '7 )

' ! " ! "

& ' '5 ! "

& ' '9 ,

5 ! " >

& ' ': >

-& ' '3

-: ! " - ! /

& ' '; - ! /

& ' 76 ) *

; ! " 0 !

& ' 7( 0 !

& ' 7+ < %

& ' 7' 0

(+ ! " !

& ' 77 !

& ' 75 & ! /

(7 ! "

-& ' 79

& ' 7: % !

(9 ! " )

& ' 73 )

& ' 7; 0 "

(3 ! "

& ' 56

( ! "

-& ' 5(

-+ ! " >

& ' 5+ >

& ' 5' % =

7 ! " % *

& ' 57 % *

& ' 55 *

9 ! " % !

& ' 59 % !

& ' 5: % *

3 ! " % < %

& ' 53 % < %

& ' 5; * *

(6 ! " . *

& ' 96 . *

& ' 9( * *

(+ ! " . *

& ' 9+ . *

& ' 9' * !

(7 ! " . !

& ' 97 . !

& ' 95 * %

(9 ! " . %

& ' 99 . %

& ' 9: * < %

(3 ! " . < %

& ' 93 . < %

( ! " - *

& ' 9; - *

+ ! " > *

& ' :6 > *

& ' :( % =

7 ! " %

& ' :+ %

& ' :' %

9 ! " %

& ' :7 %

& ' :5 % ,

3 ! " % ) *

& ' :9 % ) *

& ' :: - !

(6 ! " - !

& ' :3 - !

& ' :; - ! *

(+ ! " * %

& ' 36 * %

& ' 3( . %

(7 ! " *

& ' 3+ *

& ' 3' .

(9 ! " * ,

& ' 37 * ,

& ' 35 . ,

(3 ! " ) *

& ' 39 ) *

& ' 3:

2 #

Aliran dari menu-menu yang ada di program akan dijelaskan pada gambar berikut :

( # !

& ' 33 !

& ' 3;

' #

& ' ;6

112 !"

" #

$ %& #

' ( ) ! * + , - . &

! " # $

"%

M-0 5

)

-)

) &%&F&C

0

+ A B

P

A B

;

)

" +

-8

) &

' ;

P

A B

' A

B 3 8

7 8 9: ; 44<

& &

" C C&

& &

+ 4 44

3

C C&R 8 " "&R

" ) ;

& &

+ 4 44

& &

3

& &

$ 0 &

E 3 " &

: > & &

% & &

F

& &

+ 4 44

& &

" C C&

& &

+ 4 44

3

C C&R " "&R

)

A B )

F ) P & P Q

& &

" C C&

& &

+ 4 44

3

C C&R " "&R

#

$ #

& ' ( )* ( +

) ! ,-,-

-!.-""/ 0 1 2 $ )

1 0 1 ,

1 , 0 1 &

1 0 1 ) 3 4 #

5) 6 +