BAB IV

PERANCANGAN DAN IMPLEMENTASI

4.1 Tahap Perencanaan

Perencanaan merupakan tahap awal dalam perancangan dan pembuatan sebuah
sistem, hal ini bertujuan agar sistem yang dibuat tidak melenceng dari tujuan awal dibuatnya
sebuah sistem. Pada tahapan ini dilakukan perencanaan awal tentang sistem yang akan
dikembangkan meliputi konsep sistem serta pengumpulan informasi di toko Phijab.id yang
nantinya akan ditetapkan sebagai tujuan pembuatan dari website Phijab.id.

4.2 Tahap Analisis Sistem

Analisis sistem adalah langkah awal untuk membuat rancang bangun sebuah
website. Langkah pertama yang harus dilakukan adalah wawancara dan pengamatan secara
langsung oleh narasumber. Wawancara dilakukan terhadap bagian – bagian yang berkaitan
langsung dengan proses. Kegiatan pengamatan dilakukan dengan cara observasi langsung
ke lapangan untuk melihat proses yang ada, dengan mengetahui proses yang ada diharapkan
dapat membangun website sesuai dengan kebutuhan user. Hasil dari wawancara yang
dilakukan terhadap bagian-bagian yang berkaitan langsung dengan proses, digambarkan
oleh penganalisa melalui kegiatan – kegiatan yang dilakukan oleh owner Phijab.id. Pada
tahap menganalisa penulis mendapatkan beberapa permasalahan yang dapat diambil melalui
kegiatan – kegiatan owner saat melakukan proses penginputan data customer yang dilakukan
secara manual sehingga tidak terdapat internal kontrol yang baik dan juga laporan yang
dihasilkan kurang akurat. Langkah selanjutnya setelah penganalisaan masalah melalui
kegiatan – kegiatan tersebut adalah penganalisaan sistem baru dimulai dengan pembuatan
sistem flow.

4.2.1 Analisis Sistem Yang Sedang Berjalan

Sistem yang sedang berjalan pada toko Phijab.id awalnya penjualan Phijab hanya
menggunakan sistem manual seperti sistem pencatatan manual, COD ( Cash On Delievery)
dan pembukuan manual sehingga penjualan hanya bisa melayani pembeli yang berada di
sekitar wilayah Cikarang Timur dan penjual hanya dapat bertransaksi pada waktu tertentu.
Dapat dilihat pada gambar berikut.

1
Gambar 2. Alur Sistem yang Sedang Berjalan

2
 4.3 Tahap Perancangan Sistem
Tahapan perancangan sistem adalah tahapan untuk memberikan gambaran
mengenai aplikasi berbasis website yang akan dibuat. Pada tahap ini dilakukan beberapa
perancangan, diantaranya perancangan database, perancangan sistem secara umum, dan
perancangan sistem secara detail untuk mempermudah user dalam pemakaian (userfriendly).

4.3.1 Perancangan Basis Data

Perancangan basis data merupakan proses membuat desain yang akan mendukung
operasional dan tujuan perusahaan. Pemanfaatan basis data pada bidang perpustakaan
memungkinkan untuk dapat menyimpan data atau melakukan perubahan dan menampilkan
kembali data tersebut dengan cepat dan mudah. Perancangan basis data yang dilakukan pada
penelitian kali ini adalah menggunakan model Entity Relationship Diagram (ERD) dan
Spesifikasi Tabel sebagai berikut:

4.3.1.1 Entity Relationship Diagram (ERD)

Berikut merupakan tahap-tahap pembuatan Entity Relationship Diagram (ERD)
1. Menetapkan Entitas

Gambar 3. Menetapkan Entitas

2. Entitas Beratribut
a. Cart (Keranjang)

Gambar 4. Cart

3
b. Chat

Gambar 5. Chat

c. Order

Gambar 6. Order

4
d. Product

Gambar 7. Product

e. Product Type

Gambar 8. Product Type

f. User

Gambar 9. Customer

Gambar 10. Admin

5
 g. My Review

Gambar 11. My Review

3. ERD Gabungan

Gambar 12. ERD Gabungan

6
4.3.1.2 Spesifikasi Tabel
Berikut ini merupakan jabaran struktur field-field beserta keterangannya yang
diwakili oleh setiap table dapat di lihat pada table-tabel berikut :

Tabel 2 Cart

No Nama Field Tipe Panjang Not Nul Keterangan

1 id int 11 No Primary Key
2 user_id int 11 No
3 product_id Int 11 No
4 qty Int 11 No

Tabel 3 Chat

No Nama Field Tipe Panjang Not Nul Keterangan

1 id int 11 No Primary Key
2 sender_id int 11 No
3 receiver_id int 11 No
4 message text No
5 status tinyint 1 No
6 datesend timestamp No

Tabel 4 Order

No Nama Field Tipe Panjang Not Nul Keterangan

1 id int 11 No Primary Key
2 order_no varchar 14 No
3 order_date datetime No
4 order_user_id int No
5 metode_pembayaran varchar 50 No
6 order_status varchar 20 No
7 order_total int 11 No
8 order_remark text No
9 order_norek varchar 25 Yes
10 order_nama varchar 50 Yes
11 order_jumlah float 10,2 Yes
12 order_bukti text Yes

7
Tabel 5 Product

No Nama Field Tipe Panjang Not Nul Keterangan

1 Id int 11 No Primary Key
2 product_sku varchar 14 No
3 product_type_id int 11 No
4 product_name varchar 50 No
5 product_price float 10,2 No
6 product_desc text No
7 product_stock int 11 No
8 product_tumb1 text No
9 product_tumb2 text No

Tabel 6 Product Type

No Nama Field Tipe Panjang Not Nul Keterangan

1 id int 11 No Primary Key
2 product_type varchar 30 No

Tabel 7 User

No Nama Field Tipe Panjang Not Nul Keterangan

1 id bigint 20 No Primary Key
2 name varchar 25 No
3 email varchar 25 No
4 email_verifed_at timestamp Yes
5 password varchar 25 No
6 level varchar 25 No
7 no_hp varchar 15 Yes
8 alamat text Yes
9 status int 11 No
10 remember_token varchar 100 Yes
11 created_at timestamp Yes
12 update_at timestamp Yes

Tabel 8 My Review

No Nama Field Tipe Panjang Not Nul Keterangan

1 id int 11 No Primary Key
2 order_id int 11 No
3 bintang int 11 No
4 review text No
5 user_id int 11 No

8
4.3.2 Perancangan Sistem Secara Umum
Perancangan sistem secara umum bertujuan untuk memberikan gambaran umum
kepada user tentang sistem yang baru. Rancangan ini mendeskripsikan Aplikasi Penjualan
Phijab.id Berbasis Web dengan menggunakan Data Flow Diagram, dan Flowchart Sistem.

4.3.2.1 Data Flow Diagram (DFD)

DFD adalah reprensentasi grafik yang menggambarkan aliran informasi dan
transformasi informasi yang diaplikasikan sebagai data yang mengalir dari masukan
(input) dan keluaran (Output). (Rosa A, 2016)

1. DFD Level 0

Gambar 13. DFD Level 0

2. DFD Level 1

Gambar 14. DFD Level 1

9
4.3.2.2 Flowchart Sistem
Flowchart merupakan kumpulan dari notasi diagram simbolik yang
menunjukkan aliran data dan urutan operasi dalam sistem. Bagan alir (flowchart) merupakan
metode teknik analisis yang dipergunakan untuk mendeskripsikan sejumlah aspek dari
sistem informasi secara jelas, ringkas, dan logis. Berikut merupakan flowchart dari aplikasi
penjualan Phijab.id.

1. Flowchart Admin

Gambar 15. Flowchart Admin

10
2. Flowchart Customer

Gambar 16. Flowchart Customer

11
4.3.3 Perancangan Sistem Secara Detail
Tahap perancangan sistem secara detail dilakukan untuk memberikan gambaran
secara detail kepada user tentang sistem yang akan dibuat. Terdiri dari beberapa bagian yang
mana tiap bagian merupakan gambaran fitur-fitur aplikasi yang akan direalisasikan.
Berikut adalah beberapa fitur tersebut.

1. Halaman Login dan Register

Pada bagian login terdapat tampilan untuk customer dan admin untuk mengakses
website dengan cara menginputkan email dan passwordnya masing-masing.
Sedangkan untuk bagian register berguna untuk customer baru yang belum memiliki
akun dan ingin berbelanja di website supaya bisa membuat akun guna mengakses
website.

Gambar 17. Login dan Register

2. Halaman Dashboard
Pada halaman dashboard terdapat fitur produk, keranjang, chat login serta banner yang
menampilkan promosi produk dari Phijab.id.

Gambar18. Dashboard

12
3. Halaman Product
Halaman ini bertujuan untuk mendeskripsikan produk yang akan di pasarkan, terdiri
dari foto produk, harga produk, ukuran, warna serta material yang digunakan untuk
membuat produk. Pada tombol search berguna untuk mencari produk berdasarkan
kategorinya yang terdiri dari jenis dan ukuran produk.

Gambar 19. Product

4. Halaman Detail Product

Halaman ini bertujuan untuk mendeskripsikan produk yang akan di pasarkan, terdiri
dari foto produk, harga produk, ukuran, warna serta material yang digunakan untuk
membuat produk. Pada halaman ini,customer dapat memilih warna yang tersedia.

Gambar 20. Detail Product

13
5. Cart (Keranjang Belanja)
Pada keranjang berlanja berisikan barang-barang yang ingin dibeli oleh customer.
Fitur ini terletak disebelah kanan atas yang akan muncul apabila customer telah
melakukan login dan memasukka barang ke dalam keranjang.

Gambar 21. Cart

6. Halaman Chat
Berguna untuk customer menanyakan stok yang tersedia dan info lain yang akan
dijawab langsung oleh admin. Fitur chat dibuat untuk meminimalisir miskomunikasi.

Gambar 22. Chat

14
7. Halaman Customer
Pada halaman customer hanya akan muncul apabila customer telah melakukan login
yang mana pada halaman tersebut terdapat table yang berisikan nomor transaksi,
tanggal transaksi, status pemesanan, total serta tombol upload untuk mengupload bukti
transfer.

Gambar 23. Customer

8. Halaman Payment Confirmation

Halaman payment confirmation adalah halaman lanjutan yang terdapat pada halaman
customer yang berguna untuk mengupload bukti pembayaran transfer. Apabila
customer telah mengupload bukti transfer maka admin akan mengubah status
pemesanan.

Gambar 24. Payment Confirmation

15
9. Halaman Add Product
Halaman add product hanya dapat diakses oleh admin dan berguna untuk admin
menambahkan produk-produk terbaru dari Phijab.id.

Gambar 25. Add Product

10. Halaman List Product

Halaman list product berguna untuk admin menginputkan produk yang akan dijual dan
munjul di halaman produk. Selain itu halaman ini juga berguna untuk memantau
berapa banyak produk yang telah terpasang di halaman produk yang dapat dilihat
langsung oleh customer.

Gambar 26. List Product

16
11. Halaman Product Type
Halaman product type berguna untuk admin menambahkan, mengupdate dan
menghapus kategori yang berguna untuk membedakan tipe dan jenis produk.

Gambar 27. Type Product

12. Halaman Order

Halaman pesanan ini hanya dapat diakses oleh admin karena halaman pesanan berguna
untuk mengubah status pemesanan customer apabila customer telah mengupload bukti
transfer. Halaman pemesanan juga terdapat fitur print pdf yang berguna untuk
mencetak data penjualan supaya tidak hilang.

Gambar 28. Order

17
13. Halaman Confirm Order
Halaman pesanan ini hanya dapat diakses oleh admin karena halaman pesanan berguna
untuk mengubah status pemesanan customer apabila customer telah mengupload bukti
transfer. Halaman pemesanan juga terdapat fitur print pdf yang berguna untuk
mencetak data penjualan supaya tidak hilang.

Gambar 29. Confirm Order

14. Halaman Konfirmasi Status Pesanan

Pada halaman ini admin dapat mengubah status pemesanan dari pesanan diproses
menjadi pesanan dikirim, pesanan dibatalkan atau pesanan diterima. Apabila pesanan
dibatalkan maka customer bisa mengajukan refund dana dengan cara chat admin dan
akan diproses 2x24 jam namun apabila pesanan telah diterima oleh customer maka
selanjutnya customer bisa melakukan pengisian pada halaman review.

Gambar 30. Konfirmasi Status Pesanan

18
15. Halaman My Review
Halaman ini dapat diakses oleh admin dan customer, halaman ini berguna untuk
menilai produk dengan memberi bintang setelah customer telah menyelesaikan
pembelian, cutomer juga dapat berkomentar terkait material produk karena hal itu
berguna untuk meningkatkan kualitas produk.

Gambar 31. My Review

4.4 Tahap Proses Implementasi

Tahap implementasi adalah tahap penerapan sekaligus pengujian bagi sistem baru
serta merupakan tahap dimana aplikasi siap dioperasikan pada keadaan yang sebenarnya,
efektifitas sistem baru akan diketahui secara pasti, juga untuk semua kelebihan dan
kekurangan sistem dan aplikasi program. Tahap implementasi aplikasi penjualan Phijab.id
dilakukan dengan menggunakan database MySQL dan Notepad++.

4.4.1 Tahap Implementasi Basis Data Menggunakan Database MySQL

Pada tahap pembuatan basis data aplikasi penjuala Phijab.id berbasis web ini
menggunalan MySQL sebagai database dan XAMPP sebagai webserver penulis memilih
XAMPP karena XAMPP memiliki kapasitas yang cukup besar yaitu 60.000 tabel dengan
jumlah catatan 5.000.000. selain itu keamanan data yang input lebih terjamin. Berikut adalah
tampilan pemakaian XAMPP.

19
1. Untuk mengaktifkan XAMPP hanya perlu menekan start hingga tulisannya berubah
menjadi stop yang terdapat dibarisan Actions

Gambar 32. XAMPP

2. Selanjutnya yang harus dilakukan adalah membuka web browser lalu menuliskan
localhost/phpmyadmin, maka otomatis halaman phpmyadmin akan muncul. Lalu
untuk membuat database bisa dilakukan dengan memilih menu database dan
menginputkan nama database appedes dan meimilih tombol create.

Gambar 33. Table Localhost

20
3. Setelah selesai membuat database pada tahap perancangan maka akan terbuat
sebuah database. Pada aplikasi penjualan Phijab.id yang terdiri dari komponen
yang dapat dilihat pada gambar 32

Gambar 34. Create Database

4.4.2 Tahap Implementasi Aplikasi Menggunakan Notepad++

Dalam proses implementasi pembuatan aplikasi penjualan Phijab.id
pengaplikasiannya adalah menggunakan Notepad++. Berikut adalah tampilan sekilas dari
Notepad++

Gambar 35. Notepad++

21