MEMBUAT WEBSITE PENJUALAN ONLINE E COMME
BAB IV
ANALISA DAN PEMBAHASAN
4.1 Analisa Sistem
Dalam membangun website menggunakan CMS Wordpress maka harus
dipersiapkan kebutuhan hardware dan software. Berikut adalah analisa
keutuhan perangkat keras dan perangkat lunak dalam menggunakan CMS
Wordpress
4.1.1 Analisa kebutuhan Perangkat Lunak
1. Windows 7
Windows
merupakan keluarga sistem operasi, windows sudah
merilis windows versi terbaru yaitu windows 10 dan juga sebelum
merilis windows 10 sudah merilis Windows 8.1, Window 8, Windows
7 dan dan masih banyak turunanya versi yang di keluarkan oleh
Microsoft.
2. Xampp
Xampp adalah perangkat lunak bebas yang mendukung
banyak sistem operasi dan kompilasi dari beberapa program fungsi
dari Xampp sendiri adalah sebagai server yang berdiri sendiri atau
yang di sebut localhost yang terdiri atas program Apache HTTP
Server, MySQL database, dan penerjemah bahasa yang di tulis dengan
bahasa pemprograman PHP dan Perl.
3. Google Chrome
Google Chrome adalah sebuah browser atau sebuah perambahan
web sumber terbuka yang di kembangkan oleh google dengan
menggunakan mesin rendering webkit dan proyek sumber terbukanya
sendiri di namakan chromium
32
33
4.1.2 Analisa kebutuhan Perangkat Keras
1. Core i5
Sebuat prosesor yang di keluarkan oleh intel Comporation
perusahaan yang didirikan pada tahun 1968 oleh Robert Noyce dan
Gordon Moore, prosesor pertama adalah prosesor 4004 prosesor dan
sampai sekarang sudah mencapai core i7.
2. Memori Ram 4 GB
RAM adalah sebuah tipe penyimpanan komputer yang isinya
dapat diakses dalam waktu yang tetap tidak memperdulikan letak
data tersebut dalam memori. Ini berlawanan dengan alat memori
urut, seperti tape magnetik, disk dan drum, di mana gerakan
mekanikal dari media penyimpanan memaksa komputer untuk
mengakses data secara berurutan.
3. Hardisk 80 Gb
Hardisk adalah media penyimpanan yang di desain untuk dapat di
gunakan menyimpan data kapasitas yang besar. Dan pada
pembuartan CMS wordpress ini juga memerlukan kapasitas
penyimpanan untuk menyimpan data data yang di perlukan dalam
pembuatan CMS wordpress.
4.1.3 Analisa Kebutuhan Fungsional
A. Fungional User :
1. Login
Disini Admin maupun user bisa login di website attamoda 8
tentunya dengan akun yang berbeda yang di mana admin
mengelola website dan user hanya bisa memesan produk dan
apabila user tidak memiliki akun maka user harus mendaftar
terlebih dahulu di form register.
2. Lihat Produk
Pada Fungsional Lihat Produk calon pembeli akan melihat semua
produk yang di jual di website attamoda8.
34
3. Pesan Produk
Fungsional Pesan produk setelah pelanggan memilih produk yang
di ingginkan maka selanjutnya akan mengisi biodata sesuai form
yang tersedia di website dan setelah mengisi biodata diri maupun
alamat yang jelas maka klik tombol pesan.
4. Pembayaran
Setelah memesan produk maka selanjunya proses pembayaran
yang dimana sebelum mengisi biodata diri sudah tertera no
rekening yang tujukan untuk pembayaran via transfer bank
B. Fungional Admin:
1. Login
Pada tahap ini sebelum Admin mengelola website admin harus
login terlebih dahulu dengan username dan password yang valid
sehingga admin bisa menggelola isi website.
2. Kelola Halaman Web
Admin disini bisa mengedit menambah dan menghapus post
maupun informasi tentang butik attamoda di website.
3. Manage Produk
Admin bisa mengedit, menambah dan menghapus produk yang
akan di jual di butik attamoda8 melalui website.
4. Manage Order
Admin di sini dapat menginformasikan apakah produk tersebut
sudah siap dikirim apa belum, dan tentu saja user harus
melakukan pembayaran via trasfer bank terlebih dahulu setelah
itu admin mengkonfirmasi produk tersebut untuk siap di kirim.
35
4.2 Perancangan Sistem
Dalam perancangan website Butik Attamoda8 penulis menggunakan alat
bantu perncangan yang terdapat di BAB III yaitu UML (Unified Modelling
Language). Dalam subbab ini terdapat beberapa diagram yang akan
menggambarkan sistem secara keseluruhan yaitu use case diagram, scenario
use case, activity diagram ,class diagram, dan sequence diagram.
4.2.1 UML (Unified Modelling Language)
1. Use Case Diagram
Gambar 4.1 Use Case Diagram Website
36
A. Skenario Use Case User
1. Skenario Use Case Lihat Produk
Nama Use Case
: Lihat Produk
Aktor
: User
Diskripsi
: Pada proses ini aktor melihat
produk yang posting oleh admin di
website.
Precondition
: Aktor bisa memilih produk yang di
Pilih.
Postcondition
: Setelah aktor memilih produk aktor
bisa memilih produk yang di pilih.
Tabel 4.1 Skenario Use Case Lihat Produk
Aktor
1. Aktor memilih menu
Sistem
shop
2. Sistem membuka menu
shop
3. Di halaman shop aktor bisa melihat produk dan juga jika
tertarik bisa memilih untuk di masukan di keranjang belanja
2. Skenario Use Case Pesan Produk
37
Nama Use Case
: Pesan Produk
Aktor
: User
Diskripsi
: Pada proses ini aktor setelah
melihat dan memilih produk
setelah itu aktor memesan produk
dengan mengisikan form yang
tersedia di website.
Precondition
: Aktor harus login terlebih dahulu
sebelum mengisikan form yang
tersedia di website untuk
melengkapi data saat pengiriman
produk.
Postcondition
: Setelah melengkapi data di form
website kemudian aktor di tujukan
untuk proses pembayaran.
Tabel 4.2 Skenario Use Case Pesan Produk
Aktor
1. Aktor memilih produk
Sistem
yang di pilih dari
halaman shop
2. Sistem menyimpan
produk di keranjang
belanja
3. Aktor bisa update jumlah
maupun jenis produk dan
jika sudah maka
checkout
38
Tabel 4.2 Skenario Use Case Pesan Produk (Lanjutan)
Aktor
Sistem
4. Pesanan di simpan
5. Kemudian aktor
mengisikan form yang
tersedia di website
6. Simpan data dan sistem
menampilkan langkah
selanjutnya yaitu pembayaran
via transfer bank.
6. Skenario Use Case Pembayaran
Nama Use Case
: Pembayaran
Aktor
: User
Diskripsi
: Pada proses ini aktor di tujukan
untuk proses pembayaran via
transfer bank
Precondition
: Aktor membayar produk sesuai
dengan nominal produk yang di
pilih pembayaran di lakukan via
transfer bank.
Postcondition
: Setelah melakukan proses
pembayaran aktor mendapat
konfirmasi dari admin bahwa order
kirim
Tabel 4.3 Skenario Use Case Pembayaran
39
Aktor
1. Aktor melakukan
Sistem
pembayaran lewat
transfer bank
2. Aktor melakukan
konfirmasi pembayaran
3. Admin menerima
konfirmasi pembayaran
4. Admin mengirim pesanan
aktor
5. Aktor menerima
pesanan
B. Skenario Use Case Admin
1. Skenario Use Case Manage Halaman web
Nama Use Case
: Manage halaman web
Aktor
: Admin
Diskripsi
: Aktor menginputkan postingan
tentang promo harga dan informasi
yang lain tentang promo butik.
Precondition
: Aktor menginputkan postingan
tentang butik attamoda8
Postcondition
: Setelah menginputkan data
kemudian data di posting dan aktor
dapat mengedit, menambah,
menghapus postingan
Tabel 4.4 Skenario Use Case Manage Halaman Web
Aktor
1. Aktor inputkan username
Sistem
40
dan password
2. Sistem memverifikasi
akun dan menampilkan
halaman dasboard
3. Aktor memilih menu
pages
4. Sistem menampilkan
halaman pages
5. Aktor memilih halaman
yang akan di edit, tambah
atau hapus dan save
6. Sistem menyimpan data
yang telah di update
2. Skenario Use Case Manage Produk
Nama Use Case
: Manage Produk
Aktor
: Admin
Diskripsi
: Aktor menginputkan produk
yaitu meliputi gambar, warna baju
ukuran, harga dan detail baju yang
akan di posting
Precondition
: Aktor menginputkan postingan
tentang data produk
Postcondition
: Setelah menginputkan data
kemudian data di posting dan aktor
dapat mengedit, menambah,
menghapus postingan.
Tabel 4.5 Skenario Use Case Manage Produk
Aktor
1. Aktor inputkan username
dan password
Sistem
41
2. Sistem memverifikasi
akun dan menampilkan
halaman dasboard
3. Aktor memilih menu
produk
4. Sistem menampilkan
halaman produk
5. Aktor memilih produk
yang akan di edit, tambah
atau hapus dan save
6. Sistem menyimpan data
yang telah di update
3. Skenario Use Case Manage Order
Nama Use Case
: Manage Order
Aktor
: Admin
Diskripsi
: Aktor mengelola order konsumen
Precondition
: Aktor mengkomfirmasi order
konsumen
Postcondition
: Setelah aktor mengkonfirmasi order
maka aktor mengkonfirmasi balik
kepada konsumen untuk
memberitahu bahwa barang siap
di kirim
Tabel 4.6 Skenario Use Case Manage Order
Aktor
1. Aktor inputkan username
Sistem
dan password
2. Sistem memverifikasi
akun dan menampilkan
halaman dasboard
3. Aktor memilih menu
42
Order
4. Sistem menampilkan
halaman Order
5. Aktor memilih status
barang masih dalam proses
atau siap kirim dengan
ketentuan status barang
yang di tuju
6. Sistem menyimpan data
yang telah di update
2.
Activity Diagram
A. Activity Diagram Admin
43
Gambar 4.2 Aktivity Diagram Admin
B. Aktivity Diagram User
44
Gambar 4.3 Aktivity Diagram User
3. Class Diagram
45
Gambar 4.4 Class Diagram
4. Sequence Diagram
2.1 Sequence Diagram Login user
46
Gambar 4.5 Sequence Diagram Login user
2.2 Sequence Diagram Lihat produk
Gambar 4.6 Sequence Diagram Lihat produk
2.3 Sequence Diagram Pesan produk
47
Gambar 4.7 Sequence Diagram Pesan Produk
2.4 Sequence Diagram Pembayaran
Gambar 4.8 Sequence Diagram Pembayaran
2.5 Sequence Diagram Login admin
48
Gambar 4.9 Sequence Diagram Login admin
2.6 Sequence Diagram Kelola Halaman Web
Gambar 4.10 Sequence Diagram Halaman Web
2.7 Sequence Diagram Manage produk
49
Gambar 4.11 Sequence Diagram Manage Produk
2.8 Sequence Diagram Manage Order
Gambar 4.12 Sequence Diagram Manage Order
4.3 Desain Antarmuka Website
50
Perancangan
tampilan
disesuaikan
berdasarkan
kebutuhan
dan
kemudahan. Tampilan untuk sistem dirancang semudah mungkin, berikut
adalah tampilan antarmuka website user dan admin.
4.3.1 Rancangan Tampilan User
A. Logo :
Gambar dari lambang Attamoda8.
B. Home :
Merupakan tampilan awal dari suatu website.
C. Shop :
Merupakan tampilan semua produk yang di tujukan untuk melihat
barang yang akan di beli calon pembeli, pembeli juga bisa memesan
produk di tampilan shop ini.
D. Cara Memesan Produk :
Merupakan tampilan tutorial untuk mengedukasi calon pembeli untuk
tidak binggung bagaimana cara berbelanja online di attamoda8.
E. Akun :
Merupakan tampilan untuk form masuk maupun form registrasi
kepada calon pembeli sebelum melakukan belanja di attamoda8.
F. Keranjang Belanja :
Merupakan wadah sebuah produk yang akan di beli oleh calon
pembeli yang selanjutnya akan di proses melalui checkout.
G. Gambar :
Menampilkan gambar beberapa pelayanan di butik Attamoda8.
51
LOGO
HOME
SHOP
HARGA
SPESIAL
CARA MEMESAN
PRODUK
AKUN
GAMBAR
Gambar 4.13 Rancangan Tampilan User
1.3.2 Rancangan Tampilan Admin
KERANJANG
BELANJA
52
A. Header Dashboard :
Pada bagian ini terdapat tool atau menu wordpress dan juga bisa
juga masuk ke website yang di kelola admin.
B. Tampilan Menu Dashboard :
Pada bagian ini admin bisa memilih menu-menu yang terdapat di
dashboard wordpress yang di tujukan untuk mengelola website
untuk tujuan tertentu.
C. Halaman Dashboard
Pada bagian halaman dashboard ini di tujukan untuk tampilan dari
sebuah dashboard untuk mengelola akun website.
Header Dashboard
Tampilan Menu
Dashboard
Halaman Dashboard
Gambar 4.14 Rancangan Tampilan Admin
4.4 Implementasi Halaman User
53
4.4.1 Halaman Home
Halaman home merupakan tampilan awal didalam suatu website.
Gambar 4.15 Halaman Home
4.4.2 Halaman Shop
54
Pada menu ini merupakan tampilan semua produk dari butik
attamoda8 dan bisa memesan produk dari attamoda8 lewat menu ini,
dan pada halaman shop ini juga calon pembeli bisa melihat lebih
detail tentang produk attamoda8 di antaranya calon pembeli bisa
memilih ukuran yang pas dengan ukuran badan, mengetahui bahan
baju dan juga bisa memberikan komentar dan bintang kualitas pada
halaman shop ini
Gambar 4.16 Halaman Shop
4.4.3 Halaman Harga Spesial
55
Pada menu ini umumnya memiliki fitur yang sama dengan halaman
shop, akan tetapi yang membedakan adalah memuat produk
attamoda8 dengan harga diskon sehingga calon pembeli bisa
memilih produk promo dari attamoda8 dari menu ini.
Gambar 4.17 Halaman Harga Spesial
4.4.4 Halaman Cara Memesan Produk
56
Pada halaman ini nantinya akan mengedukasikan kepada calon
pembeli untuk mengetahui bagaimana cara berbelanja di butik
attamoda8, dengan adanya halaman cara memesan produk ini
mengurangi rasa ragu akan pelangan akan toko online attamoda8 ini,
sekaligus juga mengetahui bagaimana langlah langkah untuk
memesan produk dari butik attamoda8.
Gambar 4.18 Halaman Cara Memesan Produk
4.4.5 Halaman Akun
57
Pada halaman ini ditampilakan form login dan regristrasi untuk
membuat akun baru bagi consumen yang mau melakukan transaksi
online di butik attamoda8, dengan melakukan proses registrasi akun
di attamoda8 calon pembeli akan lebih mudah mengakses atau
melakukan pembelian online.
Gambar 4.19 Halaman Akun
4.4.6 Halaman Keranjang Belanja
58
Pada halaman ini memuat produk yang di pilih consumen sebagai
calon produk yang akan di beli oleh consumen dan produk tersebut
berada di keranjang belanja.
Gambar 4.20 Halaman Keranjang Belanja
59
4.5 Implementasi Halaman Admin
Terdapat beberapa bagian penting yang perlu disiapkan untuk
membuat website dengan CMS Wordpress. Setiap bagian terdiri dari
beberapa macam kelompok item konfigurasi. Berikut ini adalah beberapa
bagian dalam Wordpress 4.1.1 :
4.5.1 Halaman Login
Untuk masuk ke bagian admin site ketikan URL alamat websitenya
dan tambahkan “/wp-admin” misalnya www.attamoda8.com/wpadmin tekan enter, kemudian akan muncul halaman login admin.
Gambar 4.21 Halaman Login Administrator
60
4.5.2 Menu Dashboard
Gambar 4.22 Menu Dashboard
Menu dashboard menampilkan berbagai informasi dari post dan page
yang telah kita buat, di dashboard ini admin bisa mengelola semua
perintah yang ada di dalam tool tersebut mulai menambah, mengedit,
menghapus, mengupdate semua bisa di lakukan di dashboard ini.
4.5.3 Menu Media
61
Gambar 4.23 Menu Media
A. Library, Menu untuk manajemen gambar, video, maupun file
suara yang telah di upload pada situs.
B. Add New, untuk menambah media baru biasanya dalam
bentuk format jpg, png, gif, 3gp, Mp3.
4.5.4
Menu Laman
Gambar 4.24 Menu Laman
62
A. Laman, menu untuk mengatur halaman statis pada situs.
Halaman ini berbeda dengan posting. Posting biasanya akan
muncul secara berurutan setiap anda melakukan penambahan
Pages
biasanyan
merupakan
halaman
tunggal
yang
dimunculkan dengan menggunakan menu-menu website.
B. Tambah baru, untuk menambah page baru.
4.5.5 Menu Woocomerce
Gambar 4.25 Menu Woocomerce
A. Pesanan, pada bagian tool ini untuk menampilkan order dari
konsumen yang memesan produk dari attamoda8
B. Laporan, pada tampilan ini kita akan mengetahui bagaimana
minat pelanggan dalam bentuk kurva dalam per hari sampai
per tahun bisa di lihat di sini
63
C. Pengaturan, dalam tool ini kita bisa mensetting yang
berhubungan dengan transaksi jual beli mulai dari registrasi
mengatur barang yang akan di jual email, shipping dan
masih bayak lagi yang bisa di setting di tool ini
D. Status sistem, bagian ini adalah kita bisa melihat dalam
pembuatan toko online ini memakai plugin apa aja dan dari
developer mana saja yang membuat plugin tersebut
E. Add-Ons, pada bagian ini kita bisa melihat kita bisa
mengunkakan jasa apa aja dalam melakukan bisnis online
ini di antaranya bisa di lihat di sini
4.5.6
Menu Produk
Gambar 4.26 Menu Produk
A. Produk, di halaman ini akan memuat tentang semua produk
yang di jual di attamoda8
B. Tambah Produk, Untuk menambahkan produk yang akan di
tampilkan di halaman belanja
C. Katagori, Untuk membuat halaman kategori produk baru
64
D. Tag, Untuk tags produk yang ingin di tampilkan
E. Kelas Pengiriman, untuk membuat kelas pengiriman
F. Atribut, Untuk membuat atribut tentang ukuran baju,warna
baju dan yang berhubungan dengan detai produk
4.5.7
Menu User
Gambar 4.28 Menu User
A. Semua Pengguna, Di halaman ini akan menampilkan semua
user yang telah terdaftar di website attamoda8 mulaidari
admin dan consumen terdapat di halaman ini .
B. Tambah Baru, Perintah add new ini admin bisa menambah
user consumen .
65
C. Profil Anda, menu untuk mengatur profil admin baik itu
mengatur foto profil, menganti alamat email admin maupun
password admin.
ANALISA DAN PEMBAHASAN
4.1 Analisa Sistem
Dalam membangun website menggunakan CMS Wordpress maka harus
dipersiapkan kebutuhan hardware dan software. Berikut adalah analisa
keutuhan perangkat keras dan perangkat lunak dalam menggunakan CMS
Wordpress
4.1.1 Analisa kebutuhan Perangkat Lunak
1. Windows 7
Windows
merupakan keluarga sistem operasi, windows sudah
merilis windows versi terbaru yaitu windows 10 dan juga sebelum
merilis windows 10 sudah merilis Windows 8.1, Window 8, Windows
7 dan dan masih banyak turunanya versi yang di keluarkan oleh
Microsoft.
2. Xampp
Xampp adalah perangkat lunak bebas yang mendukung
banyak sistem operasi dan kompilasi dari beberapa program fungsi
dari Xampp sendiri adalah sebagai server yang berdiri sendiri atau
yang di sebut localhost yang terdiri atas program Apache HTTP
Server, MySQL database, dan penerjemah bahasa yang di tulis dengan
bahasa pemprograman PHP dan Perl.
3. Google Chrome
Google Chrome adalah sebuah browser atau sebuah perambahan
web sumber terbuka yang di kembangkan oleh google dengan
menggunakan mesin rendering webkit dan proyek sumber terbukanya
sendiri di namakan chromium
32
33
4.1.2 Analisa kebutuhan Perangkat Keras
1. Core i5
Sebuat prosesor yang di keluarkan oleh intel Comporation
perusahaan yang didirikan pada tahun 1968 oleh Robert Noyce dan
Gordon Moore, prosesor pertama adalah prosesor 4004 prosesor dan
sampai sekarang sudah mencapai core i7.
2. Memori Ram 4 GB
RAM adalah sebuah tipe penyimpanan komputer yang isinya
dapat diakses dalam waktu yang tetap tidak memperdulikan letak
data tersebut dalam memori. Ini berlawanan dengan alat memori
urut, seperti tape magnetik, disk dan drum, di mana gerakan
mekanikal dari media penyimpanan memaksa komputer untuk
mengakses data secara berurutan.
3. Hardisk 80 Gb
Hardisk adalah media penyimpanan yang di desain untuk dapat di
gunakan menyimpan data kapasitas yang besar. Dan pada
pembuartan CMS wordpress ini juga memerlukan kapasitas
penyimpanan untuk menyimpan data data yang di perlukan dalam
pembuatan CMS wordpress.
4.1.3 Analisa Kebutuhan Fungsional
A. Fungional User :
1. Login
Disini Admin maupun user bisa login di website attamoda 8
tentunya dengan akun yang berbeda yang di mana admin
mengelola website dan user hanya bisa memesan produk dan
apabila user tidak memiliki akun maka user harus mendaftar
terlebih dahulu di form register.
2. Lihat Produk
Pada Fungsional Lihat Produk calon pembeli akan melihat semua
produk yang di jual di website attamoda8.
34
3. Pesan Produk
Fungsional Pesan produk setelah pelanggan memilih produk yang
di ingginkan maka selanjutnya akan mengisi biodata sesuai form
yang tersedia di website dan setelah mengisi biodata diri maupun
alamat yang jelas maka klik tombol pesan.
4. Pembayaran
Setelah memesan produk maka selanjunya proses pembayaran
yang dimana sebelum mengisi biodata diri sudah tertera no
rekening yang tujukan untuk pembayaran via transfer bank
B. Fungional Admin:
1. Login
Pada tahap ini sebelum Admin mengelola website admin harus
login terlebih dahulu dengan username dan password yang valid
sehingga admin bisa menggelola isi website.
2. Kelola Halaman Web
Admin disini bisa mengedit menambah dan menghapus post
maupun informasi tentang butik attamoda di website.
3. Manage Produk
Admin bisa mengedit, menambah dan menghapus produk yang
akan di jual di butik attamoda8 melalui website.
4. Manage Order
Admin di sini dapat menginformasikan apakah produk tersebut
sudah siap dikirim apa belum, dan tentu saja user harus
melakukan pembayaran via trasfer bank terlebih dahulu setelah
itu admin mengkonfirmasi produk tersebut untuk siap di kirim.
35
4.2 Perancangan Sistem
Dalam perancangan website Butik Attamoda8 penulis menggunakan alat
bantu perncangan yang terdapat di BAB III yaitu UML (Unified Modelling
Language). Dalam subbab ini terdapat beberapa diagram yang akan
menggambarkan sistem secara keseluruhan yaitu use case diagram, scenario
use case, activity diagram ,class diagram, dan sequence diagram.
4.2.1 UML (Unified Modelling Language)
1. Use Case Diagram
Gambar 4.1 Use Case Diagram Website
36
A. Skenario Use Case User
1. Skenario Use Case Lihat Produk
Nama Use Case
: Lihat Produk
Aktor
: User
Diskripsi
: Pada proses ini aktor melihat
produk yang posting oleh admin di
website.
Precondition
: Aktor bisa memilih produk yang di
Pilih.
Postcondition
: Setelah aktor memilih produk aktor
bisa memilih produk yang di pilih.
Tabel 4.1 Skenario Use Case Lihat Produk
Aktor
1. Aktor memilih menu
Sistem
shop
2. Sistem membuka menu
shop
3. Di halaman shop aktor bisa melihat produk dan juga jika
tertarik bisa memilih untuk di masukan di keranjang belanja
2. Skenario Use Case Pesan Produk
37
Nama Use Case
: Pesan Produk
Aktor
: User
Diskripsi
: Pada proses ini aktor setelah
melihat dan memilih produk
setelah itu aktor memesan produk
dengan mengisikan form yang
tersedia di website.
Precondition
: Aktor harus login terlebih dahulu
sebelum mengisikan form yang
tersedia di website untuk
melengkapi data saat pengiriman
produk.
Postcondition
: Setelah melengkapi data di form
website kemudian aktor di tujukan
untuk proses pembayaran.
Tabel 4.2 Skenario Use Case Pesan Produk
Aktor
1. Aktor memilih produk
Sistem
yang di pilih dari
halaman shop
2. Sistem menyimpan
produk di keranjang
belanja
3. Aktor bisa update jumlah
maupun jenis produk dan
jika sudah maka
checkout
38
Tabel 4.2 Skenario Use Case Pesan Produk (Lanjutan)
Aktor
Sistem
4. Pesanan di simpan
5. Kemudian aktor
mengisikan form yang
tersedia di website
6. Simpan data dan sistem
menampilkan langkah
selanjutnya yaitu pembayaran
via transfer bank.
6. Skenario Use Case Pembayaran
Nama Use Case
: Pembayaran
Aktor
: User
Diskripsi
: Pada proses ini aktor di tujukan
untuk proses pembayaran via
transfer bank
Precondition
: Aktor membayar produk sesuai
dengan nominal produk yang di
pilih pembayaran di lakukan via
transfer bank.
Postcondition
: Setelah melakukan proses
pembayaran aktor mendapat
konfirmasi dari admin bahwa order
kirim
Tabel 4.3 Skenario Use Case Pembayaran
39
Aktor
1. Aktor melakukan
Sistem
pembayaran lewat
transfer bank
2. Aktor melakukan
konfirmasi pembayaran
3. Admin menerima
konfirmasi pembayaran
4. Admin mengirim pesanan
aktor
5. Aktor menerima
pesanan
B. Skenario Use Case Admin
1. Skenario Use Case Manage Halaman web
Nama Use Case
: Manage halaman web
Aktor
: Admin
Diskripsi
: Aktor menginputkan postingan
tentang promo harga dan informasi
yang lain tentang promo butik.
Precondition
: Aktor menginputkan postingan
tentang butik attamoda8
Postcondition
: Setelah menginputkan data
kemudian data di posting dan aktor
dapat mengedit, menambah,
menghapus postingan
Tabel 4.4 Skenario Use Case Manage Halaman Web
Aktor
1. Aktor inputkan username
Sistem
40
dan password
2. Sistem memverifikasi
akun dan menampilkan
halaman dasboard
3. Aktor memilih menu
pages
4. Sistem menampilkan
halaman pages
5. Aktor memilih halaman
yang akan di edit, tambah
atau hapus dan save
6. Sistem menyimpan data
yang telah di update
2. Skenario Use Case Manage Produk
Nama Use Case
: Manage Produk
Aktor
: Admin
Diskripsi
: Aktor menginputkan produk
yaitu meliputi gambar, warna baju
ukuran, harga dan detail baju yang
akan di posting
Precondition
: Aktor menginputkan postingan
tentang data produk
Postcondition
: Setelah menginputkan data
kemudian data di posting dan aktor
dapat mengedit, menambah,
menghapus postingan.
Tabel 4.5 Skenario Use Case Manage Produk
Aktor
1. Aktor inputkan username
dan password
Sistem
41
2. Sistem memverifikasi
akun dan menampilkan
halaman dasboard
3. Aktor memilih menu
produk
4. Sistem menampilkan
halaman produk
5. Aktor memilih produk
yang akan di edit, tambah
atau hapus dan save
6. Sistem menyimpan data
yang telah di update
3. Skenario Use Case Manage Order
Nama Use Case
: Manage Order
Aktor
: Admin
Diskripsi
: Aktor mengelola order konsumen
Precondition
: Aktor mengkomfirmasi order
konsumen
Postcondition
: Setelah aktor mengkonfirmasi order
maka aktor mengkonfirmasi balik
kepada konsumen untuk
memberitahu bahwa barang siap
di kirim
Tabel 4.6 Skenario Use Case Manage Order
Aktor
1. Aktor inputkan username
Sistem
dan password
2. Sistem memverifikasi
akun dan menampilkan
halaman dasboard
3. Aktor memilih menu
42
Order
4. Sistem menampilkan
halaman Order
5. Aktor memilih status
barang masih dalam proses
atau siap kirim dengan
ketentuan status barang
yang di tuju
6. Sistem menyimpan data
yang telah di update
2.
Activity Diagram
A. Activity Diagram Admin
43
Gambar 4.2 Aktivity Diagram Admin
B. Aktivity Diagram User
44
Gambar 4.3 Aktivity Diagram User
3. Class Diagram
45
Gambar 4.4 Class Diagram
4. Sequence Diagram
2.1 Sequence Diagram Login user
46
Gambar 4.5 Sequence Diagram Login user
2.2 Sequence Diagram Lihat produk
Gambar 4.6 Sequence Diagram Lihat produk
2.3 Sequence Diagram Pesan produk
47
Gambar 4.7 Sequence Diagram Pesan Produk
2.4 Sequence Diagram Pembayaran
Gambar 4.8 Sequence Diagram Pembayaran
2.5 Sequence Diagram Login admin
48
Gambar 4.9 Sequence Diagram Login admin
2.6 Sequence Diagram Kelola Halaman Web
Gambar 4.10 Sequence Diagram Halaman Web
2.7 Sequence Diagram Manage produk
49
Gambar 4.11 Sequence Diagram Manage Produk
2.8 Sequence Diagram Manage Order
Gambar 4.12 Sequence Diagram Manage Order
4.3 Desain Antarmuka Website
50
Perancangan
tampilan
disesuaikan
berdasarkan
kebutuhan
dan
kemudahan. Tampilan untuk sistem dirancang semudah mungkin, berikut
adalah tampilan antarmuka website user dan admin.
4.3.1 Rancangan Tampilan User
A. Logo :
Gambar dari lambang Attamoda8.
B. Home :
Merupakan tampilan awal dari suatu website.
C. Shop :
Merupakan tampilan semua produk yang di tujukan untuk melihat
barang yang akan di beli calon pembeli, pembeli juga bisa memesan
produk di tampilan shop ini.
D. Cara Memesan Produk :
Merupakan tampilan tutorial untuk mengedukasi calon pembeli untuk
tidak binggung bagaimana cara berbelanja online di attamoda8.
E. Akun :
Merupakan tampilan untuk form masuk maupun form registrasi
kepada calon pembeli sebelum melakukan belanja di attamoda8.
F. Keranjang Belanja :
Merupakan wadah sebuah produk yang akan di beli oleh calon
pembeli yang selanjutnya akan di proses melalui checkout.
G. Gambar :
Menampilkan gambar beberapa pelayanan di butik Attamoda8.
51
LOGO
HOME
SHOP
HARGA
SPESIAL
CARA MEMESAN
PRODUK
AKUN
GAMBAR
Gambar 4.13 Rancangan Tampilan User
1.3.2 Rancangan Tampilan Admin
KERANJANG
BELANJA
52
A. Header Dashboard :
Pada bagian ini terdapat tool atau menu wordpress dan juga bisa
juga masuk ke website yang di kelola admin.
B. Tampilan Menu Dashboard :
Pada bagian ini admin bisa memilih menu-menu yang terdapat di
dashboard wordpress yang di tujukan untuk mengelola website
untuk tujuan tertentu.
C. Halaman Dashboard
Pada bagian halaman dashboard ini di tujukan untuk tampilan dari
sebuah dashboard untuk mengelola akun website.
Header Dashboard
Tampilan Menu
Dashboard
Halaman Dashboard
Gambar 4.14 Rancangan Tampilan Admin
4.4 Implementasi Halaman User
53
4.4.1 Halaman Home
Halaman home merupakan tampilan awal didalam suatu website.
Gambar 4.15 Halaman Home
4.4.2 Halaman Shop
54
Pada menu ini merupakan tampilan semua produk dari butik
attamoda8 dan bisa memesan produk dari attamoda8 lewat menu ini,
dan pada halaman shop ini juga calon pembeli bisa melihat lebih
detail tentang produk attamoda8 di antaranya calon pembeli bisa
memilih ukuran yang pas dengan ukuran badan, mengetahui bahan
baju dan juga bisa memberikan komentar dan bintang kualitas pada
halaman shop ini
Gambar 4.16 Halaman Shop
4.4.3 Halaman Harga Spesial
55
Pada menu ini umumnya memiliki fitur yang sama dengan halaman
shop, akan tetapi yang membedakan adalah memuat produk
attamoda8 dengan harga diskon sehingga calon pembeli bisa
memilih produk promo dari attamoda8 dari menu ini.
Gambar 4.17 Halaman Harga Spesial
4.4.4 Halaman Cara Memesan Produk
56
Pada halaman ini nantinya akan mengedukasikan kepada calon
pembeli untuk mengetahui bagaimana cara berbelanja di butik
attamoda8, dengan adanya halaman cara memesan produk ini
mengurangi rasa ragu akan pelangan akan toko online attamoda8 ini,
sekaligus juga mengetahui bagaimana langlah langkah untuk
memesan produk dari butik attamoda8.
Gambar 4.18 Halaman Cara Memesan Produk
4.4.5 Halaman Akun
57
Pada halaman ini ditampilakan form login dan regristrasi untuk
membuat akun baru bagi consumen yang mau melakukan transaksi
online di butik attamoda8, dengan melakukan proses registrasi akun
di attamoda8 calon pembeli akan lebih mudah mengakses atau
melakukan pembelian online.
Gambar 4.19 Halaman Akun
4.4.6 Halaman Keranjang Belanja
58
Pada halaman ini memuat produk yang di pilih consumen sebagai
calon produk yang akan di beli oleh consumen dan produk tersebut
berada di keranjang belanja.
Gambar 4.20 Halaman Keranjang Belanja
59
4.5 Implementasi Halaman Admin
Terdapat beberapa bagian penting yang perlu disiapkan untuk
membuat website dengan CMS Wordpress. Setiap bagian terdiri dari
beberapa macam kelompok item konfigurasi. Berikut ini adalah beberapa
bagian dalam Wordpress 4.1.1 :
4.5.1 Halaman Login
Untuk masuk ke bagian admin site ketikan URL alamat websitenya
dan tambahkan “/wp-admin” misalnya www.attamoda8.com/wpadmin tekan enter, kemudian akan muncul halaman login admin.
Gambar 4.21 Halaman Login Administrator
60
4.5.2 Menu Dashboard
Gambar 4.22 Menu Dashboard
Menu dashboard menampilkan berbagai informasi dari post dan page
yang telah kita buat, di dashboard ini admin bisa mengelola semua
perintah yang ada di dalam tool tersebut mulai menambah, mengedit,
menghapus, mengupdate semua bisa di lakukan di dashboard ini.
4.5.3 Menu Media
61
Gambar 4.23 Menu Media
A. Library, Menu untuk manajemen gambar, video, maupun file
suara yang telah di upload pada situs.
B. Add New, untuk menambah media baru biasanya dalam
bentuk format jpg, png, gif, 3gp, Mp3.
4.5.4
Menu Laman
Gambar 4.24 Menu Laman
62
A. Laman, menu untuk mengatur halaman statis pada situs.
Halaman ini berbeda dengan posting. Posting biasanya akan
muncul secara berurutan setiap anda melakukan penambahan
Pages
biasanyan
merupakan
halaman
tunggal
yang
dimunculkan dengan menggunakan menu-menu website.
B. Tambah baru, untuk menambah page baru.
4.5.5 Menu Woocomerce
Gambar 4.25 Menu Woocomerce
A. Pesanan, pada bagian tool ini untuk menampilkan order dari
konsumen yang memesan produk dari attamoda8
B. Laporan, pada tampilan ini kita akan mengetahui bagaimana
minat pelanggan dalam bentuk kurva dalam per hari sampai
per tahun bisa di lihat di sini
63
C. Pengaturan, dalam tool ini kita bisa mensetting yang
berhubungan dengan transaksi jual beli mulai dari registrasi
mengatur barang yang akan di jual email, shipping dan
masih bayak lagi yang bisa di setting di tool ini
D. Status sistem, bagian ini adalah kita bisa melihat dalam
pembuatan toko online ini memakai plugin apa aja dan dari
developer mana saja yang membuat plugin tersebut
E. Add-Ons, pada bagian ini kita bisa melihat kita bisa
mengunkakan jasa apa aja dalam melakukan bisnis online
ini di antaranya bisa di lihat di sini
4.5.6
Menu Produk
Gambar 4.26 Menu Produk
A. Produk, di halaman ini akan memuat tentang semua produk
yang di jual di attamoda8
B. Tambah Produk, Untuk menambahkan produk yang akan di
tampilkan di halaman belanja
C. Katagori, Untuk membuat halaman kategori produk baru
64
D. Tag, Untuk tags produk yang ingin di tampilkan
E. Kelas Pengiriman, untuk membuat kelas pengiriman
F. Atribut, Untuk membuat atribut tentang ukuran baju,warna
baju dan yang berhubungan dengan detai produk
4.5.7
Menu User
Gambar 4.28 Menu User
A. Semua Pengguna, Di halaman ini akan menampilkan semua
user yang telah terdaftar di website attamoda8 mulaidari
admin dan consumen terdapat di halaman ini .
B. Tambah Baru, Perintah add new ini admin bisa menambah
user consumen .
65
C. Profil Anda, menu untuk mengatur profil admin baik itu
mengatur foto profil, menganti alamat email admin maupun
password admin.