Pembangunan Aplikasi E-Commerce Di Merdeka Handphone Square

" # "

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

" (

! )

)

!

" #$ !

" %

" "

&

& '

& "

, $ " $ % ,

- .'. .# " " /

0 $ 1 ! "* $ " 2

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

& - &9

& 0 .:$ )2

& / )&

& ; '.< 1: ) ))

),

) " $ $ $ 1 ),

) " $ $ .$ '* "# ' "# + " ),

) .$ '* "+* " "# ),

) & " $ $ "6 "# " $ $ )9

) & " 7 ."$% 8 # 1 )9

) ) " $ $ <* *% " ."5 *"#$ ." ,

) ) " $ $ "##*" ,

) ) & " $ $ "#! $ ,&

) ) " $ $ "#! *" ! ,&

) , " $ $ <* *% " *"#$ ." ,)

) , "6 "# " # 1 ." 33333333333 ,)

) , & "6 "# " .: # 13333333333 ,,

) ) "6 "# " " 1*! /2

) ) "6 "# " *! * "*

/-) /-) & "6 "# " " ( 6 /0

) ) & "6 "# " " 1*! "#*"+*"# //

) ) & & "6 "# " " 1*! 1< ;

) ) & ) "6 "# " " 1*! '1 " .!. 92 ) ) & , "6 "# " " 1*! '1 " ' ! 99

) ) & - "6 "# " " 1*! $$ # 2;

) ) ) "# " 1 " ! 2;

4

, 18 1 " $ ,

, &

, & 18 1 " $ $ $

, ) "#*+ " "#! *" ! ;

, , "#*+ " 8% 9

, , ! " . "#*+ " 8% 9

, , & $*$ " $ "#*+ " &&

, , ) $ 18* " $ "#*+ " 8% ,,

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.6 DFD Level 2 Proses 3.0 ... 46

Gambar 3.7 DFD Level 2 Proses 4.0 ... 47

Gambar 3.8 DFD Level 2 Proses 5.0 ... 48

Gambar 3.9 DFD Level 2 Proses 6.0 ... 48

Gambar 3.10 DFD Level 3 Proses 3.1 ... 48

Gambar 3.11 DFD Level 2 Proses 3.0 ... 49

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.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.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 Gambar 3.91 Jaringan Semantik Admin Toko ... 112

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.15 Pengujian form checkout ... 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 %

%

% " 4

" & '%

7 0 % ) * %

% % % %

( & '%

$ 0 %

$

$ #

0 % ) * )

! & '%

" % $ # '%

% ) *

%

% %

%

%

" !

% %

%

8 %

" % $% '%

' " %

! $ ) * %

"

# %

%

" ) ' '%

0 % %

&

( %

+ !

-. !

1

( *+,%

-( # ' *+,%

-$ ) $ !

# 9 : "! ! "

) *

( *+-%

-"! !

" %

4 4

$ #

! !

! #

" # )(-*

!

! " % #

%

#

"! ! # #

% # "

( ) *+,%

-)

#

*

$

)

*

!

)

!

*

'

"!

!

/ 4

7

4

'

!

4

!

%

!

'

"

! '

#

( " . /' ! *+,%

; 8 %

8 #

' !

8 % %

8/

! $ ) * "

7 &

<

! %

# !

$ 8' 8$ ' ' ' / = $ )$

% *

% 8

"

% $ ( ) 8

) 80 *

$ * % "

% ) 8# *

( ( *& + & *+,%

-> " $

& + " )

+ " ) !

%

! , 7

, 7

! !

#

( ) *

4

,

) ) ( *

+ , "

'

"

" #

# ! 4 /?0

@ % # " % #

! % =%% !

-.

!

. $ "

$ " !

" #

"

( 0 ) ' *+,%

-& % $ 8

' %

) * #

8 !

, !

" # #

% ) 0 ) * $

$

) *

(-2

# #

!

" %

.

$

( % ;"/ !

.

!

#

+ % ;"/ !

%

% !

!

!

%

) ( * $ ) (/ ' $

$ ) ( *

& '

) * ! 0 %

$ #

% !

( ) 0 * " !

%

$ 4

+ %

-1 ;6 ) / *

%

%

$ ) (/*

& %

( 4 %

! "

4 "

+ 4 ' %

- 1

) * ) " *

) * 4

$

! " !

"

4 4

4 /

" 4

0

% %

0 2 3 $&

0

% "

$

& ; ! ! );" *

0 $ "

! 0

"

( A % ! )A *

* *'

%

A % ! A !

" % 4

A

" " A

" %

+ 6 , C

0

! %

@70D 4

- 5 5 5 )555*

# % ! 0 %

4 ! ! 5 0 )5 0 % *

! % "

5 # 5

% ! % %

E % !

) * %

# )# * @ 5

#

. @ 4 6 ! , ! )@6,*

### %

@6, %

@6, %

1

E % !

5 5 5 $ # ! )

# * 0 ;E 7 !

4 5 4

", &FFG 4 8G F

8& &

1 3$ &

1 # ' 3$ &

) ! *

% #

%

/ #

1 ) ! --% 3$ &

& 3

!! &3

& H !!

( ' H 0

!!

+ ' )0 *

- 6 )0 *

( /

' ! @ 7 #I %

0 0

, !! %

0 !!

/

! % 7 ;

) 7 %

@ @ $ 6

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

/ G3&(+-.123F

;

#

! @ 4 ! !

! > #

7

@

$ 7

!! <

/ < / !

!!

% # %

!! %

% #

#

/ !! <

!! ! ;E

) * !

? 7 % )'

! *

& 4

@ % % ?

-! J& F. @ $

# ) %

*

<

-!!

!! ! 4 !! " / ;E @ ;

- !!

% J& F. @ $ !!

% "

? 7 # !!

& 4

< % #

;E / 0 ; //=@7 #

!! % %

# ;E #

!!

5 2 6

- %- 2 3 6 27 $

,

! "

& 4 !

4 !

( , % ) 4

/ 2

% %

+ , 4 %

$.

8 #

% #

# #

%

< # ) *

!

%

8 % $ #

) *

!

% ) *

8 # ! ) 6# ) 7

%

! "

$ " 0 %

-& " ) *

( ) *

+ ) *

- ) *

)% *

$

'

! %

9 &

-$ ! "

!

8 & #% 6 7

% #

! !

"

% ! #

% %

8 # %

$ %

" ) * '

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

&F12 ;

# ; >

, , /

! ? ; 5 &F2+

!

/ ?

! $

C

) " %*%*

$A$

) 2 * $A$ !

, $A$

!

$

!

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

' " '

% % % '

% " % "%

" % $

% " ' % !

!

%' :

% & <% %%& 6 < 7

% 9! 0 :

6 , % &FF.

#

% 4

! 4

4 ! #

! #

! #

4 ! K,

! K, #

!

# ! # 4

, 0 )

% ,

+ " " 0

, % "

* ,

, "

, " , "

)3 =2

# K,

! K , K,

K, % ! 7

0 ) 7 0* &F31 K,

% ! K, K,

K, #

K,

' % K,

K,

% "

!

K, ) ) & ( * ! 9 " " :

" 4

* > K,

# ### ### !

K, " 4 4 K,

4 ! K,

! K,

!D -G &G GGG 2

&GG ? K,

! K,

"

" K,

4 . K, .

K, " K,

" " K, & $ / L % 4 ( #

@ L

% 4

+ $

/ L

)

/ & ! L ! L

/ ( ! L ! L

L )! L *

*M

' 4 $ 5

$ 4

6 6 0 6 0 6 0 6 6

6 6 6 6 6 6 6 6 6

6 .

- !

0 L )! & ! ( * 4 )4 & 4 ( *

' 4 "

$ 56 7

8 56 7

! H4

' 4 " $ 56

7 8 56 7

1 %

$ L

L

2 " "

%

#

3 " %

# % % L

' 4 "

F 2 %

L ! ! & ! L

! L

' 4 "

$ 5 4

4 @

L ! ! & ! (

! L ! L

5 7

4 4

! @

L ! ! &

' 4 " $ 5

" 6, 7

$ $ /

5

, D , /

/ , /

) / *

(

, " ,

, , )555* ,

" + + 6 0 B

" < " "

" $ %

% ? , ) 9 ) ( * $

% "

"

0 $ # 4 / +

! # 4 ,

! 4 " "

" , !

! 4

# 4

$ # 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 bersangkutan.

& ' + ! , ! %

+

-" &

3.1.2.1Entity Relationship Diagram (ERD)

Perancangan database pada sistem ini dimaksudkan untuk mempermudah hubungan antara tabel dengan tabel lainnya. Perancangan database meliputi Entitas Relationship Diagram, kamus data, skema relasi, dan perancangan struktur file.

( ' ) *+

"

! *

/

* !

*

% !

# !

" /

0

!

" # (

! " ! 12 + 3 & 4

% , 5(+

" % (+6 &

%

Untuk spesifikasi komputer yang ada di Merdeka Handphone Square sudah 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.

, ( ' ) +

, &

-!

" "

!

' .

-, " & + /

Data Flow Diagram merupakan suatu media yang digunakan untuk

& ' 5 )8) - + ! + 6

' )8) - + ! ' 6

7 )8) - + ! 7 6

& ' : )8) - + ! 7 6

5 )8) - + ! 5 6

& ' ; )8) - + ! 9 6

: )8) - ' ! ' (

3 )8) - ' ! ' +

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

; )8) - ' ! ' '

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

(( )8) - ' ! ' 5

(+ )8) - ' ! ' 9

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

(' )8) - ' ! ' :

& ' (: )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

) !

- ( !

+

' !

$ % =

" *

1 ) % /

< 1 /

) *

- (

% % =

+

' %

3. $ ! ; 6

$ - * " ! 1 < * ) ! - ( ! +

4. $ ! (6 6

$ - % " ! 1 < ) ! - ( ! +

5. $ ! (( 6

$ -" ! 1 < ) ! - ( ! +

6. $ ! (+ 6

" !

1 % "

<

"

) !

- ( !

"

+ % " "

"

7. $ + (

$ 1

-"

1 ) )

< )

- (

8. $ + +

$ 2

"

1 ) )

< 1 1

1 )

- (

+

; $ 7 (

$ ! " 1 ) < 1 ) - ( +

10. $ 7 +

$ .

- (

+ "

'

11. $ 7 '

$ ) " 1 ) < ) ) - ( % + 1 ' %

12. $ 7 7

$ " 1 < 1 ) - ( ! + '

13. $ 9 (

$ - ! " * 1 ) < ) ) * - ( +

'

14. $ 9 +

$ - ! " * 1 ) < ) ) * - ( + '

15. $ 9 '

$ - ! * " * 1 ) < ) ) * - ( + '

16. $ ' ( (

$ * % " * 1 * < 1 ) * - ( * " + * ' 7

< 1 ) * - ( * + * ' 7

18. $ ' ( '

$ " * 1 ) < 1 ) - ( * " + * '

19. $ ' + (

$ * " * 1 * < 1 ) - ( * " + * '

20. $ ' + + $ . " * 1 > < 1 ) * - ( * + * '

21. $ ' + '

$ " * 1 ) < 1 ) * - ( * + * '

22. $ ' ' (

$ * " 1 * < 1 ) - ( * " + *

150

$ 0 &

E 3 " &

: > & &

% & &

F

& &

+ 4 44

3

F F& R 8 &R

)

% ) A B

Q

E : A %

2

% & # ) % ' %

=<>

%

& &

" C C&

$ 0 " "&

E 3 & &

: > & &

% & &

F

& &

+ 4 44

3

C C&R " "&R

)

A B )

151

F ) P & P Q

E :" A F

2

% & # ) % ' %

=<>

F

& &

" C C&

$ 0 " "&

E 3 & &

: > & &

% & &

F

& &

+ 4 44

3

C C&R " "&R

) P &

& # $

3 8 )

)

, A B

;

" 0

A B ;

!

"

#

$ #

! "!!

# $ %

&

& ' ( )* ( +

) ! ,-,-

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

1 0 1 ,

1 , 0 1 &

1 0 1 ) 3 4 #

5) 6 +