4.2.3 Desain Antar Muka
Desain antarmuka dalam subbab ini membahas tentang desain untuk perangkat lunak, perangkat keras, jaringan, dan desain interface pengguna sebagai
berikut :
1. Antar Muka Perangkat Lunak
a. Kebutuhan perangkat Keras
1. Kapasitas Random Access Memory RAM 2024 MB. 2. Processor minimal Intel Core 2 Duo.
3. Harddisk minimal berkapasitas 320 Gb. 4. VGA Card 512 MB On Board.
5. Printer untuk mencetak data yang diperlukan. b. Kebutuhan perangkat Lunak
1. Sistem Operasi Microsoft Windows 7 Basic. 2. Google Chrome.
3. MySQL Database 5.6 4. XAMPP.
2. Desain Form a. Form Menu admin Penjualan
Form Menu Admin Penjualan berfungsi sebagai halaman utama yang
mencakup form master, form transaksi penjualan dan laporan yang bisa diakses oleh Admin Penjualan. Desain form menu admin Penjualan dapat
dilihat pada Gambar 4.18, Gambar 4.19 dan Gambar 4.20.
Gambar 4.18 Desain Form Menu Master Admin Penjualan
Gambar 4.19 Desain Form Transaksi Penjualan
Gambar 4.20 Desain Form Laporan
b. Form Menu Bagian Gudang Form
Menu Bagian Gudang berfungsi sebagai halaman utama untuk bagian gudang agar bisa mengakses menu yang ada. Desain form menu bagian
gudang dapat dilihat pada Gambar 4.21.
Gambar 4.21 Desain Form Menu Bagian Gudang c.
Form Login Admin Form
Login Admin berfungsi sebagai halaman login khusus admin untuk melakukan login ke aplikasi agar bisa mengakses menu admin sesuai hak
akses. Admin terdiri dari admin penjualan, bagian produksi dan bagian gudang. Menu untuk desain form login admin dapat dilihat pada Gambar
4.22.
Gambar 4.22 Desain Form Login Admin
d. Form Master Perangkat Komputer Form
Master Perangkat Komputer berfungsi untuk mengolah data-data perangkat komputer, seperti menyimpan dan mengubah. Desain form
master yang meliputi desain form input master perangkat komputer dan
desain form view master perangkat komputer dapat dilihat pada Gambar 4.23, dan Gambar 4.24.
Gambar 4.23 Desain Form Input Master Perangkat komputer
Gambar 4.24 Desain Form Master View Perangkat Komputer
e. Form Master Input Jenis Perangkat Komputer Form Master Input
Jenis Perangkat Komputer berfungsi untuk mengolah data jenis perangkat komputer, seperti menyimpan dan mengubah. Desain
form master yang meliputi desain form input master jenis perangkat
komputer dan desain form master view jenis perangkat komputer dapat dilihat pada Gambar 4.25, dan pada Gambar 4.26.
Gambar 4.25 Desain Form Master Input Jenis Perangkat komputer
Gambar 4.26 Desain Form Master View Jenis Perangkat Komputer
f. Form Master Input Persediaan Perangkat Komputer Form
Master Input Persediaan Perangkat Komputer berfungsi untuk mengolah data persediaan perangkat komputer, seperti menyimpan dan
mengubah. Desain form master yang meliputi desain form master input persediaan perangkat komputer dan desain form master view persediaan
perangkat komputer dapat dilihat pada Gambar 4.27, dan Gambar 4.28.
Gambar 4.27 Desain Form Master Input Persediaan Perangkat Komputer
Gambar 4.28 Desain Form Master View Persediaan Perangkat Komputer
g. Form View Pemesanan Perangkat Komputer Form
View Pemesanan Perangkat Komputer berfungsi untuk melihat data pemesanan perangkat komputer oleh pelanggan. Desain form master view
pemesanan persediaan perangkat komputer dapat dilihat pada Gambar 4.29.
Gambar 4.29 Desain Form Master View Pemesanan Perangkat Komputer
h. Form Detail Pemesanan Perangkat Komputer Form
Detail Pemesanan Perangkat Komputer berfungsi untuk melihat detail data pemesanan perangkat komputer oleh pelanggan. Desain form
Detail Pemesanan Perangkat Komputer dapat dilihat pada Gambar 4.30.
Gambar 4.30 Desain Form Detail Pemesanan Perangkat Komputer
i. Form Pembayaran DP Pelanggan Dan Konfirmasi Pembayaran DP Form
Pembayaran DP Pelanggan Dan Konfirmasi Pembayaran DP berfungsi untuk konfirmasi data pembayaran DP pelanggan. Desain form
pembayaran dan konfirmasi pembayaran DP pelanggan dapat dilihat pada Gambar 4.31.
Gambar 4.31 Desain Form Pembayaran Dan Konfirmasi Pembayaran DP Pelanggan
j. Form Pelunasan DP Dan Konfirmasi Pelunasan DP Pelanggan Form
Pelunasan DP dan Konfirmasi Pelunasan DP Pelanggan berfungsi untuk konfirmasi data pelunasan DP pelanggan. Desain form pelunasan DP
dan konfirmasi pelunasan DP pelanggan dapat dilihat pada Gambar 4.32.
Gambar 4.32 Desain Form Pelunasan DP Dan Konfirmasi Pelunasan DP Pelanggan
k. Form Status Pengiriman Form
Status Pengiriman berfungsi untuk melihat status pengiriman. Desain form
status pengiriman dapat dilihat pada Gambar 4.33.
Gambar 4.33 Desain Form Status Pengiriman
l. Form View Data Pelanggan Form View
Data Pelanggan berfungsi untuk melihat data pelanggan. Desain form View
Data Pelanggan dapat dilihat pada Gambar 4.34.
Gambar 4.34 Desain Form View Data Pelanggan
3. Desain Tampilan WEB
a. Desain Halaman Home Web Penjualan Perangkat Komputer Desain ini merupakan desain halaman utama aplikasi website penjualan
perangkat komputer. Berfungsi untuk pelanggan agar bisa mengetahui informasi katalog perangkat komputer yang dibutuhkan. Terdapat proses
pemesanan perangkat komputer yang masuk ke fitur keranjang belanja terlebih dahulu. Untuk bisa melakukan pemesanan, pelanggan harus
mendaftar terlebih dahulu. Desain Home Web Penjualan Perangkat Komputer dapat dilihat pada Gambar 4.35.
Gambar 4.35 Desain Halaman Home Web Penjualan Perangkat Komputer
b. Desain Form Login Pelanggan Form
Login Pelanggan berfungsi sebagai halaman login khusus pelanggan untuk melakukan login ke aplikasi agar melakukan transaksi pemesanan
perangkat komputer. Desain form Login Pelanggan dapat dilhat pada Gambar 4.36.
Gambar 4.36 Desain Form Login Pelanggan
c. Desain Form Pendaftaran Pelanggan Form
ini berfungsi untuk menampilkan form pengisian data pelanggan yang harus diisi pelanggan. Mencakup pembuatan username dan password
agar bisa digunakan untuk login ke aplikasi. Desain form Pendaftaran Pelanggan dapat dilihat pada Gambar 4.37.
Gambar 4.37 Desain Form Pendaftaran Pelanggan
d. Desain Halaman Detail Perangkat Komputer Desain ini merupakan desain halaman detail perangkat komputer. Halaman
ini akan terbuka jika pelanggan menekan gambar perangkat komputer yang ada di katalog perangkat komputer pada halaman Home Web Penjualan
Perangkat komputer. Berfungsi untuk pelanggan agar bisa mengetahui informasi perangkat komputer yang dibutuhkan. Di halaman ini, pelanggan
bisa menentukan jumlah perangkat komputer yang ingin dipesan dan juga
tersedia menu add to cart. Desain halaman detail perangkat komputer dapat dapat dilihat pada Gambar 4.38.
Gambar 4.38 Desain Halaman Detail Perangkat Komputer
e. Desain Halaman Keranjang Belanja Desain ini merupakan desain halaman keranjang belanja. Halaman ini akan
terbuka jika pelanggan menekan keranjang belanja yang ada pada halaman Home
Web Penjualan perangkat komputer. Berfungsi untuk pelanggan agar
bisa mengetahui informasi pemesanan perangkat komputer, harga dan total yang dipesan. Desain halaman keranjang belanja dapat dilihat pada Gambar
4.39.
Gambar 4.39 Desain Halaman Keranjang Belanja
f. Desain Halaman Detail Histori Pemesanan Perangkat Komputer Desain ini merupakan desain halaman detail histori pemesanan perangkat
komputer. Berfungsi untuk pelanggan agar bisa mengetahui informasi lebih detail mengenai histori pemesanan perangkat komputer yang sedang
dilakukan dan yang sudah dilakukan. Di halaman ini, pelanggan dapat mengkonfirmasi dan melihat status pembayaran DP dan pelunasan
pembayaran serta status pengiriman. Desain halaman detail histori pemesanan perangkat komputer dapat dilihat pada Gambar 4.40.
Gambar 4.40 Desain Halaman Detail Histori Pemesanan Perangkat Komputer
4. Desain Laporan a. Desain Form Laporan Penjualan Per Periode
Form ini berfungsi untuk admin penjualan agar dapat melihat informasi
penjualan perangkat komputer per periode. Admin penjualan dapat mencetak informasi penjualan perangkat komputer per periode melalui
menu ini. Desain form Laporan Penjualan Per Periode dapat dilihat pada Gambar 4.41.
Gambar 4.41 Desain Form Laporan Penjualan Per Periode
b. Desain Form Laporan Penjualan Perangkat Komputer Per Jenis Form
ini berfungsi untuk admin penjualan agar dapat melihat informasi penjualan perangkat komputer per jenis. Admin penjualan dapat mencetak
informasi penjualan perangkat komputer per jenis melalui menu ini. Desain form
Laporan Penjualan Per Jenis dapat dilihat pada Gambar 4.42.
Gambar 4.42 Desain Form Laporan Penjualan Perangkat Komputer Per Jenis
c. Desain Form Laporan Pembayaran DP Pelanggan Form
ini berfungsi untuk admin penjualan agar dapat melihat informasi pembayaran DP pelanggan. Admin penjualan dapat melihat informasi
pembayaran DP sesuai status pembayaran, yakni DP yang belum dibayar, DP yang belum dikonfirmasi admin penjualan, dan DP yang sudah lunas.
Admin penjualan dapat mencetak informasi pembayaran DP pelanggan melalui menu ini. Desain form Laporan Pembayaran DP Pelanggan dapat
dilihat pada Gambar 4.43.
Gambar 4.43 Desain Form Laporan Pembayaran DP Pelanggan
d. Desain Form Laporan Pelunasan Pembayaran Pelanggan Form
ini berfungsi untuk admin penjualan agar dapat melihat informasi pelunasan pembayaran yang dilakukan oleh pelanggan. Admin penjualan
dapat melihat informasi pelunasan pembayaran sesuai status pembayaran, yakni pembayaran yang belum lunas, pembayaran sudah dikonfirmasi
pelanggan, dan pembayaran yang sudah lunas. Admin penjualan dapat mencetak informasi pelunasan pembayaran pelanggan melalui menu ini.
Desain form Laporan Pelunasan Pembayaran Pelanggan dapat dilihat pada Gambar 4.44.
Gambar 4.44 Desain Form Laporan Pelunasan Pembayaran Pelanggan
e. Desain Form Laporan Persediaan Perangkat Komputer Form
ini berfungsi untuk bagian gudang agar dapat melihat informasi persediaan Perangkat komputer. Bagian gudang dapat mencetak informasi
laporan persediaan perangkat komputer melalui menu ini. Desain form Laporan Persediaan Perangkat Komputer dilihat pada Gambar 4.45.
Gambar 4.45 Desain Form Laporan Persediaan Perangkat Komputer
4.2.4 Desain Sistem
Pada desain sistem ini akan dibahas mengenai standar pemrograman yang akan dibuat, model fisik, dan desain evaluasi sistem.
a. Standar Pemrograman Bahasa pemrograman yang disarankankan adalah bahasa yang memiliki syarat
berikut: 1. Memiliki banyak sumber daya manusia yang ahli dalam bahasa
pemrograman web tertentu, sehingga pada saat terjadi masalah saat pengoperasian bisa diatasi dengan cepat dan mudah.
2. Mempunyai tampilan yang user friendly dan menarik sehingga bisa dengan mudah menyosialisasikannya kepada pengguna CV. Data Baru.
3. Program akhir berupa aplikasi web yang bersifat ringan dijalankan melalui web
browser. 4. Executable atau dapat langsung dijalankan.
Dalam hal ini disarankan untuk menggunakan bahasa pemrograman PHP dengan menggunakan Tools adobe dreamweaver dan sebagai Tools
database menggunakan MySQL. Karena bahasa pemrograman berbasis web yang digunakan termasuk user friendly, menarik, executable, dan ringan
untuk dijalankan. b. Model Fisik
1. Physical Data Model PDM Sebuah PDM menggambarkan secara detil konsep rancangan struktur basis
data yang dirancang untuk suatu program aplikasi. PDM merupakan hasil generate
dari CDM. Pada PDM tergambar jelas tabel-tabel penyusun basis
data beserta kolom-kolom yang terdapat pada tabel sebagaimana terlihat pada Gambar 4.46.
Gambar 4.46 PDM Analisis dan Perancangan Aplikasi Penjualan Perangkat Komputer
2. Struktur Database Seperti yang sudah dijelaskan di atas, PDM merupakan gambaran dari
struktur database. Tiap-tiap entitas dalam ERD akan digunakan sebagai tabel dalam database. Struktur database yang akan digunakan yaitu:
a. Pelanggan Nama Tabel
: Master Pelanggan Fungsi
: Untuk menyimpan data identitas dan user pelanggan untuk melakukan pemesanan perangkat komputer di
aplikasi. Primary Key
: ID_Pelanggan Foreign Key
: -
Tabel 4.23 Master Pelanggan
Field Name Type
Length Constraint Description
ID_Pelanggan Varchar
30 PK
ID Pelanggan.
Username Varchar
30 -
Username Pelanggan
untuk Login.
Password Varchar
30 -
Password Pelanggan
untuk Login.
Nama Depan Varchar
30 -
Nama Depan Pelanggan.
Nama Belakang Varchar
30 -
Nama Belakang
Pelanggan.
Tanggal Lahir Date
- -
Tanggal Lahir
Pelanggan.
Jenis Kelamin Varchar
10 -
Jenis Kelamin
Pelanggan.
Alamat Varchar
50 -
Alamat Pelanggan.
Field Name Type
Length Constraint Description
Email Varchar
30 -
Email Pelanggan.
No. Telepon Varchar
30 -
No. Telepon Pelanggan.
b. Admin Nama Tabel
: Master admin Fungsi
: Untuk menyimpan data identitas admin penjualan dan bagian gudang untuk mengelola data pemesanan
perangkat komputer di aplikasi. Primary Key
: ID_Admin Foreign Key
: -
Tabel 4.24 Master Admin
Field Name Type
Length Constraint
Description
ID_Admin Varchar
30 PK
ID Pelanggan.
Username Varchar
30 -
Username Admin untuk
Login.
Password Varchar
30 -
Password Admin untuk
Login.
Jabatan Varchar
30 -
Jabatan Admin
Sebagai Hak Akses
Nama Varchar
30 -
Nama Pegawai
Tanggal Lahir Date
- -
Tanggal Lahir
Pegawai.
Jenis Kelamin Varchar
10 -
Jenis Kelamin
Pegawai.
Alamat Varchar
50 -
Alamat Pegawai.
Field Name Type
Length Constraint
Description
Email Varchar
30 -
Email Pegawai.
No. Telepon Varchar
30 -
No. Telepon Pegawai.
c. Master Perangkat Komputer Nama Tabel
: Master Perangkat Komputer Fungsi
: Untuk menyimpan data perangkat komputer yang diinputkan oleh admin penjualan di aplikasi.
Primary Key : ID_Admin
Foreign Key :
ID ADMIN, ID JENIS PERANGKAT KOMPUTER, ID JUMLAH PERSEDIAAN PERANGKAT KOMPUTER
Tabel 4.25 Master Perangkat Komputer
Field Name Type
Length Constraint Description
ID_PERANGKAT_KOMPUTER
Varchar 30
PK
ID Komputer. ID ADMIN
Varchar 30
FK
ID Admin. ID JENIS PERANGKAT
KOMPUTER
Varchar 30
FK
ID JENIS PERANGKAT
KOMPUTER.
ID JUMLAH PERSEDIAAN PERANGKAT KOMPUTER
Integer -
FK
ID JUMLAH PERSEDIAAN
PERANGKAT KOMPUTER
Nama Varchar
30 -
Nama Perangkat
Komputer
Harga Integer
- -
Harga Perangkat
Komputer
Foto Varchar
200 -
Foto Perangkat
Komputer
Persediaan Integer
- -
Persediaan Perangkat
Komputer
Field Name Type
Length Constraint Description
Tipe Varchar
20 -
Tipe Perangkat
Komputer
d. Master Jenis Perangkat Komputer Nama Tabel
: Master Jenis Perangkat Komputer Fungsi
: Untuk menyimpan data jenis perangkat komputer yang diinputkan oleh admin penjualan di aplikasi.
Primary Key : ID_JENIS_PERANGKAT_KOMPUTER
Foreign Key :
ID ADMIN
Tabel 4.26 Master Jenis Perangkat Komputer
Field Name Type
Length Constraint Description
ID_JENIS_PERANGKAT_KOMPUTER
Varchar 30
PK
ID JENIS PERANGKAT
KOMPUTER.
ID ADMIN
Varchar 30
FK
ID Admin. Jumlah Persediaan
Integer -
-
Jumlah Persediaan
e. Master Persediaan Perangkat Komputer Nama Tabel : Master Persediaan Perangkat Komputer
Fungsi : Untuk menyimpan data persediaan perangkat komputer yang diinputkan oleh bagian gudang di aplikasi.
Primary Key : ID_JUMLAH_PERSEDIAAN_PERANGKAT_KOMPUTER
Foreign Key :
ID PERANGKAT KOMPUTER
Tabel 4.27 Master Persediaan Perangkat Komputer
Field Name Type
Length Constraint Description
ID_JUMLAH_PERSEDIAAN _PERANGKAT_KOMPUTER
Integer -
PK
ID JUMLAH PERSEDIAAN
PERANGKAT KOMPUTER.
ID ADMIN
Varchar 30
FK
ID Admin. Jumlah Persediaan
Integer -
-
Jumlah Persediaan
f. Transaksi Pemesanan Perangkat Komputer Nama Tabel : Transaksi Pemesanan Perangkat Komputer
Fungsi : Untuk menyimpan data transaksi pemesanan perangkat komputer yang dilakukan oleh pelanggan.
Primary Key : ID_TRX_PEMESANAN
Foreign Key : ID_PELANGGAN
Tabel 4.28 Transaksi Pemesanan Perangkat Komputer
Field Name Type
Length Constraint Description
ID_TRX_PEMESANAN
Varchar 30
PK
ID TRX PEMESANAN
ID_PELANGGAN
Varchar 30
FK
ID PELANGGAN
Tanggal
Date -
-
Tanggal Pemesanan
Status_Pembayaran
Varchar 50
-
Status Pembayaran
Jumlah_DP Integer
- -
Jumlah Pembayaran
DP
Status_DP Varchar
30 -
Status DP Tanggal_DP
Date -
- Tanggal DP
Total_Barang Integer
- -
Total Barang Total_Harga
Integer -
- Total Harga
Status_Lunas Varchar
30 -
Status Lunas
Field Name Type
Length Constraint Description
Tanggal_Lunas Date
- -
Tanggal Lunas
Status_Pengiriman Varchar
30 -
Status pengiriman
g. Detail Pemesanan Perangkat Komputer Nama Tabel : Detail Pemesanan Perangkat Komputer
Fungsi : Untuk menyimpan data transaksi pemesanan perangkat komputer yang dilakukan oleh pelanggan.
Primary Key : ID_DTL_PEMESANAN
Foreign Key : ID_TRX_PEMESANAN,
ID_PERANGKAT_KOMPUTER
Tabel 4.29 Detail Pemesanan Perangkat Komputer
Field Name Type
Length Constraint Description
ID_DTL_PEMESANAN
Varchar 30
PK
ID DTL PEMESANAN
ID_TRX_PELANGGAN
Varchar 30
FK
ID TRX PELANGGAN
ID_PERANGKAT_KOMPUTER
Date -
FK
ID PERANGKAT
KOMPUTER
Jumlah
Integer -
-
Jumlah Pemesanan
Harga Integer
- -
Harga perangkat
komputer
Jenis Varchar
10 -
Jenis perangkat
komputer
Foto Varchar
200 -
Foto Perangkat
Komputer
Status_Detail_Pemesanan Varchar
30 -
Status Detail Pemesanan
Field Name Type
Length Constraint Description
Keterangan_Status Varchar
100 -
Keterangan Status
h. Transaksi Keranjang Belanja Nama Tabel : Transaksi Keranjang Belanja
Fungsi : Untuk menyimpan data transaksi pemesanan ke keranjang belanja yang dilakukan oleh pelanggan.
Primary Key : ID_KERANJANG_BELANJA
Foreign Key : ID_PERANGKAT_KOMPUTER
Tabel 4.30 Transaksi Keranjang Belanja
Field Name Type
Length Constraint Description
ID_KERANJANG_BELANJA
Integer -
PK
ID KERANGJANG
BELANJA
ID_PERANGKAT_KOMPUTER
Varchar 30
FK
ID PERANGKAT
KOMPUTER
No Session
Varchar 32
-
No Session
Jumlah
Integer -
-
Jumlah Transaksi
keranjang belanja
4.3 Evaluasi Desain Sistem