MAKALAH WEB PROGRAMMING PENJUALAN KUE ONLINE
Dibuat oleh :
), ', 4, 0, 7, *,
-u.ti"u. /ai Er2$a%umia".2ah 5e"iel Ma"alu Rahma!i Ab!ullah Ro#ai E%a O%ta8i2a!i
NIM : )')00)10 NIM : )')00)*3 NIM : )')006'6 NIM : )')0'4*) NIM : )')0'4** NIM : )')4)607
Kela. )',7D,)'
Program tu!i Ma"a#eme" I"$ormati%a A%a!emi Ma"a#eme" I"$ormati%a !a" Kom&uter Bi"a ara"a I"$ormati%a Ja%arta '()*
KA+A PENGAN+AR
i
Dengan mengucap puji syukur kehadirat Tuhan yang Maha Esa, karena atas rahmat rahmat dan hidayah-Nya kami selaku anggota anggota kelompok kelompok dapat menyelesaikan menyelesaikan tugas makalah web programming ini untuk memenuhi syarat nilai pengganti UA mata kuliah web programming! Dalam makalah yang kami buat ini, kami mendapatkan judul "MA#A$A% &E' ()*+)AMMN+ ()*+)AMMN+ (ENUA$AN #UE *N$NE.! Dengan segala kerendahan hati kami sebagai anggota kelompok, menyadari bahwa penulisan di dalam makalah ini masih jauh dari kesempurnaan dan tidak luput dari dari kesa kesala laha han! n! %al %al ini ini meng mengin inga gatt kema kemamp mpua uan n dan dan peng pengal alam aman an kami kami sert sertaa pengetahuan yang kami miliki sangat terbatas untuk menghasilkan karya tulis yang baik! *leh karena itu saran dan kritik yang membangun dari semua pihak sangat k ami harapkan! (enulisan makalah ini tidak akan terwujud tanpa bantuan dari beberapa pihak, yaitu kepada kedua orang tua kami tercinta yang telah mengi/inkan kami meluangkan waktu kami untuk belajar kelompok, Dosen kami 'apak )isang (risaltomo yang telah telah membim membimbin bing g kami kami dalam dalam menyel menyelesa esaika ikan n makala makalah h ini dengan dengan sempur sempurna! na! emoga emoga Tuhan Tuhan yang yang Maha Maha Esa senant senantias iasaa membal membalas as kebaika kebaikan n atas atas bantuan bantuannya nya kepada kami! akarta,
0123
(enulis
DA5+AR DA5+AR II %alaman udul #ata #ata (enga (engant ntar ar !!!! !!!!!! !!!! !!!!! !!!!! !!!! !!!! !!!!! !!!!! !!!! !!!! !!!!! !!!!! !!!! !!!! !!!!! !!!!! !!!! !!!! !!!! !!!!! !!!!! !!!! !!!! !!!!! !!!!! !!!! !!!! !!!!! !!!!! !!!! !!!! !!!!! !!!!! !!!! !!!! !!!!! !!!!! !!!! !!!! !!!! !! Da4tar Da4tar si si !!!!!!! !!!!!!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!! !!!!! 'ab 'ab (END (ENDA% A%U$ U$UA UAN N !!!! !!!!!! !!!!! !!!!! !!!! !!!! !!!!! !!!!! !!!! !!!! !!!!! !!!!! !!!! !!!! !!!!! !!!!! !!!! !!!! !!!!! !!!!! !!!! !!!! !!!!! !!!!! !!!! !!!! !!!!! !!!!! !!!! !!!! !!!! !!!!! !!!!! !!!! !!!! !!!! 2!2! $atar $atar 'elaka 'elakang ng !!!!!! !!!!!!!!!! !!!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!! !!!!! 2!0! Maksud Maksud dan Tujua Tujuan n !!!!!! !!!!!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!! !!!!! 2!5! Metode Metode (eneli (enelitia tian n !!!!!!! !!!!!!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!! !!! 2!6! )uang )uang $ingkup $ingkup !!!!!! !!!!!!!!!! !!!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!! !!!!! ii
ii iii iii 2 2 0 5 5
'ab (EM'A% (EM'A%AA AAN N !!!!!! !!!!!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!! !!! 0!2! 0!2! Anal Analis isis is kebut kebutuha uhan n !!!! !!!!!! !!!! !!!!! !!!!! !!!! !!!! !!!!! !!!!! !!!! !!!! !!!!! !!!!! !!!! !!!! !!!!! !!!!! !!!! !!!! !!!!! !!!!! !!!! !!!! !!!!! !!!!! !!!! !!!! !!!! !!!!! !!!!! !!!! !!!! !!!! 0!0! (eranc (erancanga angan n (era (erangk ngkat at $unak $unak !!!!!!! !!!!!!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!! !!!!! !! 0!0!2 0!0!2!! )anca )ancang ngan an Antar Antar Muka !!!!! !!!!!!! !!!! !!!! !!!!! !!!!! !!!! !!!! !!!!! !!!!! !!!! !!!! !!!!! !!!!! !!!! !!!! !!!!! !!!!! !!!! !!!! !!!!! !!!!! !!!! !!!! !!!! !! 0!0!0 0!0!0!! )anca )ancang ngan an trukt truktur ur Na9igas Na9igasii !!!!! !!!!!!! !!!! !!!! !!!!! !!!!! !!!! !!!! !!!!! !!!!! !!!! !!!! !!!!! !!!!! !!!! !!!! !!!!! !!!!! !!!! !!!! !!!! !! 0!0!5 0!0!5!! )ancan )ancanga gan n 'asis 'asis Dat Dataa :E)D :E)D,, $), $), pesi pesi4i 4ika kasi si ;ile ;ile<< !!!! !!!!!!! !!!!! !!!! !!!! !!!! 0!5! mplem mplement entasi asi dan (enguj (engujian ian !!!!!!! !!!!!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!! !!!!! 'ab (ENUTU( (ENUTU( !!!!!! !!!!!!!!! !!!!!!! !!!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!! !!! 5!2! #esimp #esimpula ulan n !!!!!!! !!!!!!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!! !!! 5!0! aran aran !!!!!!! !!!!!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!!! !!!!!!! !!!!!! !!!!!
iii
7 7 8 8 21 26 07 0= 0= 0=
BAB I PENDAHULUAN ),),
Latar Be Bela%a"g emakin berkembangnya selera masyarakat sebagai salah satu bagian
dari kebutuhan, kue juga kini menjadi trend 4ashion terbaru! Umumnya cara pemasaran dan penjualan produknya masih secara kon9ensional! (enjualan yang dilakukan hanya sebatas pada toko yang mereka miliki, dampak dari penjualan seperti ini adalah produk yang dijual terbatas pada pelanggan tertentu saja! elain itu kurang tersedianya waktu pelanggan untuk datang melihat produk baru yang di sediakan! Disamping itu saat ini juga sudah banyak peminat kue di indonesia, sehi sehing ngga ga deng dengan an send sendir irin inya ya juml jumlah ah pemb pembel elii kue kue juga juga akan akan sema semaki kin n meni mening ngka kat! t! Denga Dengan n adany adanyaa
pelu peluan ang g
pengg penggun unaan aan tekn teknol olog ogii
in4o in4orm rmas asii
khusus khususnya nya intern internet et untuk untuk pelaku pelaku bisnis bisnis penjua penjualan lan kue, kue, maka maka diperl diperluka ukan n sebua sebuah h dukun dukunga gan n sist sistem em atau atau aplik aplikas asii yang yang nant nantin inya ya dapat dapat menga mengata tasi si permasalahan yang ada, sehingga berdasarkan hal tersebut penulis tertarik untu untuk k mengu mengusu sulk lkan an sebu sebuah ah sist sistem em berba berbasi siss web web yang yang nanti nantiny nyaa dapa dapatt diimplementasikan oleh pembisnis kue! (erkembangan e-commerce pada saat ini juga dapat menjadi sesuatu yang yang menj menjan anji jika kan! n! %al %al ini ini dapat dapat dili diliha hatt dari dari 4akt 4aktor or kian kian berta bertamb mbahn ahnya ya pengguna internet! Electronic commerce :E->ommerce< merupakan salah satu meto metode de bisn bisnis is mela melalu luii inte intern rnet et!! Denga Dengan n meng menggun gunak akan an meto metode de ini ini para para pengunjung atau calon pembeli dapat mengetahui in4o mengenai produk secara secara detail kapanpun kapanpun dan dimanapun! 'aik itu seperti seperti harga, harga, model, warna, ukuran, ukuran, dan sebagainya! elain itu, transaksi tetap dapat berjalan tanpa harus mendatangi lokasi penjualan!
1
hop >ake *nline merupakan usaha dagang yang bergerak di bidang penjualan kue ku e berbagai macam jenis! Dalam proses penjualannya, hop >ake *nli *nline ne suda sudah h mene menera rapk pkan an sist sistem em onlin onlinee kese keselu luru ruha han n dan dan suda sudah h tida tidak k memak emakai ai siste istem m
o44l o44liine seper eperti ti bel beli
di toko oko
atau atau baya bayarr
dite ditem mpat! pat!
(engembangan (engembangan aplikasi aplikasi berbasis berbasis web ini akan penulis sajikan sajikan dalam bentuk bentuk makalah dengan judul "MA#A$A% &E' ()*+)AMMN+ (ENUA$AN #UE *N$NE.! ),',
Ma%.u! !a" +u#ua" Maksu ksud dari ari
pembuatan
makalah
ini
adal dalah
untuk
adalah
meng mengem emba bangk ngkan an sist sistem em pema pemasa sara ran n di era era glob global al denga dengan n meng menggu gunak nakan an website sebagai salah satu cara memperluas dan mempermudah konsumen dalam dalam proses proses penjua penjualan lan dan pemasa pemasaran ran serta serta dapat dapat mengon mengontro troll pengola pengolaan an transaksi penjualan! Tujuan dari pembuatan makalah ini adalah untuk memenuhi salah satu kelulu kelulusan san mata mata kuliah kuliah (eranca (erancanga ngan n web sebaga sebagaii penggant penggantii Ujian Ujian Akhir Akhir
),4,
emester :UA< Meto!e Pe"elitia" Metode yang kami gunakan adalah ? 2! tud tudii (us (ustaka taka (enc (encar aria ian n
in4o in4orm rmas asii
meto metodo dolo logi gi stud studii
pust pustak akaa
ini ini
deng dengan an
membaca dari website-website yang membahas tentang perancangan web 0! tud tudii $ite $itera ratu tur r Metode ini bertujuan untuk mencari literature yang berisi teori-teori yang berkaitan dengan masalah yang akan dibahas! Dalam hal ini penulis melakukan pencarian serta pembelajaran dari berbagai macam literatur dan dokumen yang berkaitan dengan website e-commerce! ),0,
Rua"g Li"g%u& 2
'erdasarkan uraian diaatas, maka ruang lingkup penulis di batasi pada ? 2! (engelolaan transaksi penjualan a! #atalog produk b! New produk 0! (emesanan! a! >ara pemesanan b! (roses (engiriman 5! (embayaran! a! Trans4er melalui bank b! #on4irmasi pembayaran c! %istory pembayaran! d! tatus barang @ status pengiriman! e! %istory pemesanan
3
BAB II PEMBAHAAN ',), ',), A"al A"ali. i.i. i. Ke Kebu butu tuha ha" "
Analisa Analisa kebutuhan kebutuhan adalah mengidenti4ikasi mengidenti4ikasi kebutuhan yang diperoleh diperoleh berdasarkan kebutuhan pengguna dan kebutuhan sistem! 2!
Anal Analis isis is #eb #ebut utuh uhan an (eng (enggu guna na (engguna yang akan menggunakan web ini tediri dari tiga bagian yaitu admin, pelanggan dan pengunjung, dengan asumsi pengguna yang sudah terbiasa menggunakan web, sebagai berikut ? a!
Admin Admin adalah bagian pengguna sistem yang memiliki hak akses lebi lebih h diba diband ndin ingk gkan an deng dengan an pela pelangg nggan an dan dan pengu pengunj njun ung, g, denga dengan n karakteristik sebagai berikut ? 2< Mempun Mempunyai yai kema kemampu mpuan an dasar dasar di bidang bidang komput komputer er!! 0< (em (emaham ahaman an yang yang cuku cukup p unt untuk menge engellola ola dala dalam m web web ser serta memiliki pengetahuan tentang internet! 5< Memaha Memahami mi pelaya pelayanan nan transa transaksi ksi pembe pembelia lian n secara secara langsun langsung g yang terjadi di hop >ake *nline 6< Memil Memiliki iki pengal pengalama aman n lebih lama lama dlam mengguna menggunakan kan komput komputer er!!
b!
(elanggan (elanggan adalah bagian pengguna sistem yang memiliki batasan hak akses, dengan karakteristik sebagai berikut ? 2<
Memp Mempuny unyai ai kem kemam ampu puan an dasa dasarr dibi dibida dang ng komp komput uter er!!
0<
Mampu
mengop goperasi asikan kan
browsing di internet!
4
komputer
dan dan
dap dapat
melakuka ukan
c!
(engunjung (engu (engunj njun ung g adal adalah ah bagia bagian n pengg pengguna una sist sistem em yang yang memi memili liki ki batasan hak akses, dengan karakteristik sebagai berikut ? 2<
Mempuny Mempunyai ai kemam kemampuan puan dasa dasarr dibid dibidang ang komp kompute uterr!
0<
Mam Mampu mengo engope pera rassikan ikan komp komput uter er dan dan dapa dapatt mel melakuk akukan an browsing di internet!
'erdas 'erdasark arkan an karakt karakteri eristi stik k data data diatas diatas,, penggun penggunaa yang yang ada di setiap setiap bagian pada umumnya sudah bisa mengoperasikan komputer, dapat dilihat bahwa seti setiap ap peng penggun gunaa mini minima mall dapat dapat mela melakuk kukan an brow browsi sing ng di inte intern rnet et dan dan dapa dapatt menge mengert rtii tent tentan ang g e-co e-comm mmer erce ce penj penjua uala lan n kue, kue, dili diliha hatt dari dari lata latarr bela belaka kang ng pendidikan dan pengalaman yang lebih lama dalam menggunakan komputer! komputer!
0! Anal Analis isis is #ebut #ebutuh uhan an ist istem em (erangkat lunak :o4tware< yag kami pakai dalam pembuatan web ini adalah sebagai berikut ? a!
#ompu ompute terr Terse ersedi diaa istem *perasi
?
&indows 21
o4t o4twa ware re
?
AM( AM(((-& &in50 in50B Bersi ersi 2!C! 2!C!2, 2, Adob Adobee Drea Dreamw mwea ea9e 9err >3, >3, Mo/ila ;ore4o
b!
#omputer yang disarankan istem *perasi
? &indows ows ( atau &indows ows 8
o4tware
? ampp-win50 9ersi 2!8!8, Adobe Dreamwea9er >5, +oogle >hrome, Adobe (hotoshop >5
5
','
Pera"9 a"9a"ga" ga" Pe Pera"g% "g%at Lu Lu"a%
',', ',',) )
Ra"9 Ra"9a" a"ga ga" " A"ta A"tarr Mu% Mu%a a
Menjelaskan rancangan antar muka :inter4ace< yang terdapat pada web ecommerce pada hop >ake *nline! a!
)anc )ancan anga gan n Anta Antarm rmuk ukaa $og $ogin in Admi Admin n
Username ? +ambar
(assword ?
Logi" Gambar II,), Ra"9a"ga" A"tarmu%a Logi" A!mi"
b! )ancangan Antarmuka %alaman Admin
A!mi"i.trator Me"u
Mai" o"te"t
Gambar II, ' Ra"9a"ga" a"tarmu%a Halama" A!mi"
a! 'erisikan 'erisikan Menu pada pada halaman admin admin setelah setelah melakukan melakukan login! b! Main >ontent, disinilah nantinya semua halaman yang ada pada inter4ace admin ditampilkan berdasarkan menu yang dipilih!
6
c! )ancang )ancangan an Antarm Antarmuka uka %alama %alaman n User User
'LOGO eranda
Tentang #ami
(roduk
>ara (emesanan
#ontak
$ogo HOP AKE ONLINE
lider
(roduk
+ambar !0 )ancangan Antarmuka %alaman User ;ooter
Gambar II,4 Ra"9a"ga" A"tar mu%a halama" u.er
',', ',',' '
tru tru%t %tur ur Na; Na;ig iga. a.ii
7
earch
Menurut (rihatna :0117?72< "truktur Na9igasi adalah susunan menu atau hirarki dari suatu situs yang menggambarkan isi dari setiap halaman dan halaman dan link atau na9igasi tiap halaman pada situs web.! trukt truktur ur na9igas na9igasii dapat dapat di golongk golongkan an menuru menurutt kebutuh kebutuhan an objek, objek, kemud kemudaha ahan n pema pemaka kaia ian n dan dan kemu kemuda daha han n memb membua uatn tnyay yayan ang g berpen berpenga garu ruh h terhadap waktu pembuatan situs web! 'entuk dasar dari struktur na9igasi adalah sebagai berikut? 1.Linier (satu alur) Linear (satu alur < merupakan merupakan struktur struktur yang yang hanya mempunyai mempunyai satu rangk rangkai aian an seri serita ta yang yang berur berurut ut!! Deng Dengan an kata kata lain lain stru strukt ktur ur ini ini hany hanyaa menamp menampilk ilkan an satu satu demi demi satu satu tampil tampilan an layar layar secara secara beruru berurutt menuru menurutt urut urutan annya nya!! ala alah h satu satu terp terpen enti ting ng dari dari stru strukt ktur ur ini ini adala adalah h tida tidak k di perkenankan terjadinya percabangan!
umber : Prihat"a <'((7:7)= Gambar II,0 tu%tur Na;iga.i Linier
0! Hierarchical Hierarchical :hirarki< :hirarki< truktur Hi Hierarchi
:ber :berca caba bang ng
perc percab aban anga gan n
untu untuk k
menampilkan menampilkan data berdasarkan berdasarkan kriteria kriteria tertentu! tertentu! Tampilan Tampilan pada menu pertama akan disebut sebagai Master Page :halaman :halaman utama kesatu<, halama halaman n pertam pertamaa ini akan akan mempuny mempunyai ai halama halaman n percab percabanga angan n yang di sebut Slave Pag Page :hal :halam aman an pendu pendukun kung< g
pendukung dipilih atau diakti4kan , maka tampilan tersebut akan bernama Master Page :halaman utama kedua<, dan seterusnya! ang terpenting dari struktur penjejakan ini tidak diperkenankan tampilan secara linier !
umber : Prihat"a <'((7:7)= Gambar II,7 tru%tur Na;iga.i Hierarchical
5! Non Liner :Tidak :Tidak berurut< tru trukt ktur ur penj penjej ejak akan an Non Liner :tidak :tidak beruru berurut< t< merupa merupakan kan pegembangan dipe diperk rken enan anka kan n
dari
strukur
memb membua uatt
penjejakan Liner. Liner.
penj penjej ejak akan an
(ada (ada
berc bercab aban ang! g!
str strukt uktur
(ema (emaka kaii
ini
beba bebass
menelusuri website menelusuri website tanpa di batasi oleh suatu rute dimana control na9igasi na9igasi dapat mengakses mengakses ke semua halaman manapun! (ercabangan (ercabangan yang di buat pada struktur Non Linear ini berbeda dengan percabangan yang di buat pada struktur Hirarchi. Hirarchi. #arana #arana pada percab percabanga angan n Non Non Line Linear ar ini walaupu walaupun n dapat dapat percab percabang angan, an, tetapi tetapi tiap-t tiap-tiap iap tampil tampilan an mempun mempunyai yai kedudukan yang sama tidak ada Master ada Master Page dan Page dan Slave Page! Page! 9
umber: Prihat"a <'((7:7)= Gambar II,* Stuktur Non Linear
4.
Composite (campuran) Composite Composite (campuran) (campuran) atau isebut isebut !uga stru"tur pen!e!a"an beba bebass meru merupa pa"a "an n gabu gabung ngan an dari dari ketiga ketiga strukt struktur ur sebelu sebelumny mnyaa yaitu yaitu Linear Non , Non Linear ,dan Hirarchi Hirarchi!! ika ika suatu suatu tampil tampilam am membut membutuhka uhkan n percabangan,
maka
dapat
dibuat
percabangan,
dan
bila
dalam
percabangan tersebut terdapat suatu tampilan yang sama kedudukannya maka dapaat dibuat struktur Linear Linear dalam percabangan tersebut! (engguna peta penjejakan bergantung kepada kebutuhan dan tujuan dari web dari web yang yang hendak di buat! emakin kompleks peta penjejakan yang digunakan, maka semakin sulit pembuatan page dari peta dari peta penjejakan penjejakan tersebut!
10
umber: Prihat"a <'((7:7)= Gamabar II,6 Struktur Navigasi Composite
',',4
Ra"9a"g Ra"9a"ga" a" Ba.i. Ba.i. Data LR> LR> &e &e.i$i .i$i%a.i %a.i 5ile= 5ile= a,
E"ti E" tit2 t2 Rel Relat atio io". ".hi hi& & Diag Diagra ram m
(erancangan basis data menghasilkan pemetaan tabel-tabel yang digambarkan dengan Entity )elationship Diagram :E)D<
11
Gambar II,3 ERD tru9ture b, LR
12
Gambar II,1 LR tru9ture 9, &e.i &e.i$i $i%a %a.i .i 5il 5ilee
2! Tabel abel Admi Admin n
13
No
5iel!
Je"i.
Pa"#a"g
Ketera"ga"
E%.tra
2
username
Barchar
71
(rimary #ey
Auto ncrement
0 5 6 7 3 8
(assword namaFlengkap email noFtelp le9el blokir
Barchar Barchar Barchar Barchar Barchar Enum
71 211 211 01 01 :,N<
pesi4ikasi Tabel Admin Nama 4ile ? Admin Nama database ? shopcake!sGl Akronim ? Admin ;ungsi ? Tempat Tempat penyimpanan data admin Tipe 4ile ? ;ile Master *rganisasi ;ile ? nde Guencial Aksi ;ile ? )andom Media ? %ardisk (anjang )ecord ? 271 #unci ;ield ? username o4tware ? MysGl
0! Table Hubungin No
5iel!
Je"i.
Pa"#a"g
Ketera"ga"
E%.tra
2
idFhubungin
nt
7
(rimary #ey
Auto ncrement
0 5 6 7
idFkustomer subjek pesan tanggal
nt Barchar Tet Date
7 211
pesi4ikasi Tabel %ubungin Nama 4ile ? %ubungin Nama database ? shopcake!sGl Akronim ? %ubungin ;ungsi ? Tempat Tempat penyimpanan data hubungin Tipe 4ile ? ;ile Master *rganisasi ;ile ? nde Guencial Aksi ;ile ? )andom Media ? %ardisk (anjang )ecord ? 251 #unci ;ield ? idFhubungin 14
o4tware
?
MysGl
5! Tabel abel #ate #atego gori ri No
5iel!
Je"i.
Pa"#a"g
Ketera"ga"
E%.tra
2
idFkategori
nt
7
(rimary #ey
Auto ncrement
0
namaFkategori
Barchar
211
pesi4ikasi Tabel #ategori Nama 4ile ? #ategori Nama database ? shopcake!sGl Akronim ? #ategori ;ungsi ? Tempat Tempat penyimpanan data kategori Tipe 4ile ? ;ile Master *rganisasi ;ile ? nde Guencial Aksi ;ile ? )andom Media ? %ardisk (anjang )ecord ? 211 #unci ;ild ? idFkategori o4tware ? MysGl
6! Tabel #ota No
5iel!
Je"i.
Pa"#a"g
Ketera"ga"
E%.tra
2
idFkota
nt
5
(rimary #ey
Auto ncrement
0 5
namaFkota ongkosFkirim
Barchar nt
211 21
pesi4ikasi Tabel kota Nama 4ile ? Nama database ? Akronim ? ;ungsi ? Tipe 4ile ? *rganisasi ;ile ? Aksi ;ile ? Media ? (anjang )ecord ? #unci ;ild ?
#ota shopcake!sGl #ota Tempat Tempat penyimpanan data kota ;ile Master nde Guencial )andom %ardisk 221 idFkota 15
o4tware
?
MysGl
7! Tabel Kustomer Kustome r No
5iel!
Je"i.
Pa"#a"g
Ketera"ga"
E%.tra
2
idFkustomer
nt
7
(rimary #ey
Auto ncrement
0 5 6 7 3 8
password namaFlengkap alamat email telepon idFkota
Barchar Barchar Tet Barchar Barchar nt
71 211 211 01 5
pesi4ikasi Tabel #ustumer Nama 4ile ? #ustomer Nama database ? shopcake!sGl Akronim ? #ustomer ;ungsi ? Tempat Tempat penyimpanan data kustomer Tipe 4ile ? ;ile Master *rganisasi ;ile ? nde Guencial Aksi ;ile ? )andom Media ? %ardisk (anjang )ecord ? 271 #unci ;ild ? idFkustomer o4tware ? MysGl
Mo ul 3! Tabel Moul
No
5iel!
Je"i.
Pa"#a"g
Ketera"ga"
E%.tra
2
idFmodul
nt
7
(rimary #ey
Auto ncrement
0 5
staticFcontent gambar
Tet Barchar
71 211
pesi4ikasi Tabel Modul Nama 4ile ? Nama database ? Akronim ? ;ungsi ? Tipe 4ile ? *rganisasi ;ile ? Aksi ;ile ? Media ?
Modul shopcake!sGl Modul Tempat Tempat penyimpanan data modul ;ile Master nde Guencial )andom %ardisk 16
(anjang )ecord #unci ;ild o4tware
? ? ?
221 idFmodul MysGl
O rers 8! Tabel Orers
No
5iel!
Je"i.
Pa"#a"g
Ketera"ga"
E%.tra
2
idForders
nt
7
(rimary #ey
Auto ncrement
0 5 6 7
statusForders tglForders jamForders idFkustomer
Barchar Date Time nt
71
7
pesi4ikasi Tabel *rders Nama 4ile ? *rders Nama database ? shopcake!sGl Akronim ? *rders ;ungsi ? Tempat Tempat penyimpanan data orders Tipe 4ile ? ;ile Master *rganisasi ;ile ? nde Guencial Aksi ;ile ? )andom Media ? %ardisk (anjang )ecord ? 251 #unci ;ild ? idForders o4tware ? MysGl C! Tabel Orers !etail No
5iel!
Je"i.
Pa"#a"g
Ketera"ga"
2
idForders
nt
7
(rimary #ey
0 5
idFproduk jumlah
nt nt
7 7
(rimary #ey
pesi4ikasi Tabel Tabel *rders Detail Nama 4ile ? *rdersFdetail Nama database ? shopcake!sGl Akronim ? *rdersFdetail ;ungsi ? Tempat Tempat penyimpanan data ordersFdetail Tipe 4ile ? ;ile Master *rganisasi ;ile ? nde Guencial Aksi ;ile ? )andom Media ? %ardisk (anjang )ecord ? 221 #unci ;ild ? idForders, idFproduk 17
E%.tra
o4tware
?
MysGl
=! Tabel Orers Tem" No
5iel!
Je"i.
Pa"#a"g
Ketera"ga"
E%.tra
2
idFordersFtemp
nt
7
(rimary #ey
Auto ncrement
0 5 6 7 3 8
idFproduk idFsession umlah tglFordersFtemp jamFordersFtemp stokFtemp
nt Barchar nt Date Time nt
7 211
(rimary #ey
7
pesi4ikasi Tabel *rders Temp Nama 4ile ? *rdersFtemp Nama database ? shopcake!sGl Akronim ? *rdersFtemp ;ungsi ? Tempat Tempat penyimpanan data ordersFtemp Tipe 4ile ? ;ile Master *rganisasi ;ile ? nde Guencial Aksi ;ile ? )andom Media ? %ardisk (anjang )ecord ? 271 #unci ;ild ? idFordersFtemp, idFproduk o4tware ? MysGl
21! Tabel #rou$ No
5iel!
Je"i.
Pa"#a"g
Ketera"ga"
E%.tra
2
idFproduk
nt
7
(rimary #ey
Auto ncrement
0 5 6 7 3 8 C = 21 22
idFkategori nt 7 namaFproduk Barchar 211 Deskripsi Tet harga nt 01 stok nt 7 berat Decimal 7, 0 tglFmasuk Date gambar Barchar 211 Dibeli nt 7 Diskon nt 7 pesi4ikasi Tabel *rders Temp Nama 4ile ? (roduk Nama database ? shopcake!sGl 18
Akronim ;ungsi Tipe 4ile *rganisasi ;ile Aksi ;ile Media (anjang )ecord #unci ;ild o4tware
? ? ? ? ? ? ? ? ?
(roduk Tempat Tempat penyimpanan data (roduk ;ile Master nde Guencial )andom %ardisk 0C1 idFproduk MysGl
',4, ',4, Im&l Im&lem eme" e"ta. ta.ii !a" !a" Pe"g Pe"gu#i u#ia" a" Im&leme"ta. i
a! b!
mpl mplem ement entas asii )anca )ancang ngan an Anta Antarr Muka Muka mplementasi rancangan antar muka web E->ommerce pada hop >ake *nline berdasarkan hasil rancangan antar muka! 2! %ala %alama man n $ogin $ogin Admi Admin n Admini Administr strato atorr harus harus melakuk melakukan an login login terleb terlebih ih dahulu dahulu untuk untuk dapat dapat menggunakan modul-modul yang tersedia! ika login berhasil, maka menuenu-me menu nu
yang yang sesu sesuai ai deng dengan an
kat kategor egorii
ditampilkan!
Gambar II,)( Halama" Logi" A!mi"
19
user user ter tersebu sebutt
akan akan
0! %al %alaman aman Adm Admin %alaman admin berisi modul-modul yang digunakan oleh admin untuk mengel mengelola ola konten konten websit website, e, halama halaman n ini akan tampil tampil setela setelah h admin admin melakukan proses login pada halaman login admin!
Gambar II,)) Halama" A!mi"
5! %alaman Us User %alama %alaman n user user berisi berisi tentan tentang g semua semua in4orm in4ormasi asi mengen mengenai ai perusa perusahaa haan n termaksud juga in4ormasi tentang produk yang dijual! (roses pemesanan produk dilakukan pada halaman user!
20
Gambar II,') Halama" U.er
Pe"gu#ia"
(enguj (engujian ian terhada terhadap p progra program m yang dibuat dibuat menggu menggunaka nakan n blackb blackbo o testing yang 4okus terhadap proses masukan dan keluaran program! a! (engu (enguji jian an terh terhad adap ap 4orm 4orm logi login n Tabel hasil "engu%ian bla&$bo' tes(ng )alam login
No
%e"ario Pe"gu#ia"
2!
Username da dan password tidak diisi kemudian klik tombol login Mengetikkan Username dan password tidak diisi atau kosong kemudian klik tombol login Username ame tidak dak diisi :kosong< dan password diisi kemudian klik tombol login Mengetikkan salah satu kondisi salah pada username atau
0!
5!
6!
+e?t 9a 9a.e
Ha.il 2a"g !ihara&%a"
Ha.il &e"gu#ia"
Ke.im&ula"
User Usernam namee ? ist istem em akan akan ("osong) menolak (assword ? akses user ("osong) Username ? ist istem em akan akan (#min) menolak (assword ? akses user ("osong)
esuai harapan
Balid
esuai harapan
Balid
Username ? ($osong) (assword ? : #min< #min<
ist istem em akan akan menolak akses user
esuai harapan
Balid
Username ? : #min< #min< (assword ?
ist istem em akan akan menolak akses user
esuai harapan
Balid
21
password kemudian klik tombol login 7!
: passwor) passwor) - salah salah
Username ? : #min< #min< Mengetikkan %benar username dan (assword ? password dengan data : #min< #min< yang benar kemudian %benar klik tombol login
istem menerima aks akses logi ogin dan kemudian langsung menampilkan menu utama
esuai harapan
BAB III PENU+UP
4,),
Ke.im&ula" Dari pembahasan makalah yang telah kami susun, penulis mencoba
menyimpulkan pokok pembahasan yang ada, adapun kesimpulannya adalah sebagai berikut? 2! &eb E->o E->omm mmer erce ce hop hop >ake >ake *nli *nline ne dibu dibuat at deng dengan an meng menggu guna naka kan n o4tware ampp win-50 Bersi Bersi 2!C!2 dan Dreamwea9er >3 0! etela etelah h dilaku dilakukan kan pengujian pengujian dan testing testing program, program, sistem sistem yang terdapat terdapat didalam &eb E->ommerce hop >ake *nline dapat berjalan dengan baik tanpa terjadi error! error! 5! Deng Dengan an meng menggu guna naka kan n sara sarana na sist sistem em in4o in4orm rmas asii onli online ne,, bisn bisnis is dapa dapatt berjalan dengan mudah dan perkembangan bisnis dapat berkembang lebih cepat!
22
Balid
23
