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
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 : terlebih dahulu di form register.
2. Lihat Produk
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
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
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
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
Tabel 4.2 Skenario Use Case Pesan Produk (Lanjutan)
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
Aktor Sistem 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
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
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
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
Gambar 4.2 Aktivity Diagram Admin
Gambar 4.3 Aktivity Diagram User
Gambar 4.4 Class Diagram
4. Sequence Diagram
Gambar 4.5 Sequence Diagram Login user
2.2 Sequence Diagram Lihat produk
Gambar 4.6 Sequence Diagram Lihat produk
Gambar 4.7 Sequence Diagram Pesan Produk
2.4 Sequence Diagram Pembayaran
Gambar 4.8 Sequence Diagram Pembayaran
Gambar 4.9 Sequence Diagram Login admin
2.6 Sequence Diagram Kelola Halaman Web
Gambar 4.10 Sequence Diagram Halaman Web
Gambar 4.11 Sequence Diagram Manage Produk
2.8 Sequence Diagram Manage Order
Gambar 4.12 Sequence Diagram Manage Order
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 :
Gambar 4.13 Rancangan Tampilan User
1.3.2 Rancangan Tampilan Admin
CARA MEMESAN PRODUK SHOP
HOME LOGO
GAMBAR
KERANJANG BELANJA HARGA
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.
Gambar 4.14 Rancangan Tampilan Admin 4.4 Implementasi Halaman User
Header Dashboard
Tampilan Menu Dashboard
4.4.1 Halaman Home
Halaman home merupakan tampilan awal didalam suatu website.
Gambar 4.15 Halaman Home
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
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
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
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
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.
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 www.attamoda8.com/wp-admin.
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.
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
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
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
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 .
