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 Sistem
1. Aktor memilih menu
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 Sistem
1. Aktor memilih produk
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 Sistem
1. Aktor melakukan
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 Sistem
1. Aktor inputkan username
 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 Sistem
1. Aktor inputkan username
dan password
 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 Sistem
1. Aktor inputkan username
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 CARA MEMESAN AKUN KERANJANG

SPESIAL PRODUK BELANJA

GAMBAR

Gambar 4.13 Rancangan Tampilan User

1.3.2 Rancangan Tampilan Admin

 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/wp-
admin 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.