3.2 Perancangan Sistem
Pada bagian perancangan ini, penulis melengkapi dengan rancangan user interface, yang menjadi acuan dalam implementasi dengan menggunakan bahasa pemrograman
PHP. Tujuan dari perancangan adalah untuk membuat gambaran – gambaran sistem
yang akan dibangun dan memudahkan dalam pembangunan sistem.
3.2.1 Use Case Diagram
Diagram use case merupakan diagram yang memodelkan aspek perilaku sistem. Masing-masing diagram use case memiliki aktor, use case dan hubungannya. Pada
sistem transaksi online aktor dibagi menjadi dua bagian: User dan Admin. User merupakan pengguna yang telah melakukan registrasi pada sistem sedangkan admin
adalah orang yang mengendalikan sistem seperti menambah produk,menghapus produk, dan lain
– lain.
Sistem Transaksi Online
User Login
Register Search Produk
Kategori
Lihat Sub Kategori Produk
Pesan Tambah Pesanan
CheckOut «extends»
«extends» «extends»
Include
Include
Gambar 3.2 Use Case Diagram
Universitas Sumatera Utara
3.2.2 Use Case Spesifikasi
Spesifikasi use case memberikan gambaran lengkap spesifikasi tekstual pada use case. Spesifikasi use case sistem transaksi online dilakukan berdasarkan kasus yang ada
pada use case diagram yang telah digambarkan pada gambar diatas. Berikut adalah tabel spesifikasi setiap use case:
Tabel 3.1 Use case spesifikasi Lihat Kategori dan Sub kategori produk
1. Use case : Lihat Kategori dan Sub kategori Produk
User Lihat Sub Kategori
Produk «uses»
Penjelasan Singkat
Use case ini digunakan oleh user untuk melihat sub kategori produk
Kondisi awal User tidak harus login terlebih dahulu ke dalam sistem
Karakteristik Tindakan dan eksekusi tergantung dari permintaan pengguna
Skenario flow of events
Skenario Dasar Basic Flow :
a. Use case ini akan dimulai ketika user membuka halaman
web e-commerce.
b. User
memilih menu ‘Sub kategori produk’.
c. Kemudian sistem menampilkan jenis-jenis produk yang
tersimpan pada database. Kondisi akhir
User dapat melihat detail tentang produk seperti harga, gambar, beserta Id produk.
Universitas Sumatera Utara
Tabel 3.2
Use case spesifikasi User login
2. Use case : User login
User Login
«uses»
Penjelasan Singkat
Use case ini digunakan oleh user untuk login kedalam sistem dengan memasukkan user id dalam hal ini adalah alamat
email dan password.
Kondisi awal User tidak harus login terlebih dahulu ke dalam sistem
Karakteristik Tindakan dan eksekusi tergantung dari permintaan pengguna
Skenario flow of events
Skenario Dasar Basic Flow :
a. Use case ini dimulai ketika user membuka e-commerce
dan pada halaman awal web terdapat menu Login. b. Selanjutnya user mengisi User Id dan password.
c. Kemudian user
akan menekan tombol ‘Login’
Kondisi akhir User akan masuk ke dalam sistem
Tabel 3.3 Use case spesifikasi User Register
3. Use case : User Register
User Registrasi
«uses»
Penjelasan Singkat
Use case ini digunakan oleh user untuk melakukan registrasi ke dalam sistem sebagai user baru.
Universitas Sumatera Utara
Kondisi awal User tidak harus login terlebih dahulu ke dalam sistem
Karakteristik Tindakan dan eksekusi tergantung dari permintaan pengguna
Skenario flow of events
Skenario Dasar Basic Flow :
a. Use case ini dimulai ketika user mengklik menu ‘buat
user baru’. b. Selanjutnya user mengisi form registrasi.
c. Kemudian user akan mendaftarkan aplikasi registrasi
dengan menekan tombol ‘Register’.
Kondisi akhir User sudah memiliki account dilengkapi dengan user id dan
password.
Tabel 3.4
Use case spesifikasi User Search Produk
4. Use case : User Search Produk
User Search
«uses»
Penjelasan Singkat
Use case ini digunakan oleh user untuk pencarian sebuah produk.
Kondisi awal User tidak harus login terlebih dahulu ke dalam sistem
Karakteristik Tindakan dan eksekusi tergantung dari permintaan pengguna
Skenario flow of events
Skenario Dasar Basic Flow :
a. Use case ini dimulai ketika user mengklik menu
‘search’.
b. Selanjutnya akan tampil hasil pencarian yang diambil
dari database.
Kondisi akhir User akan mendapatkan produk yang dicari beserta detail
produk yang dicari.
Universitas Sumatera Utara
Tabel 3.5
Use case spesifikasi User Pesan Produk
5. Use case : User Pesan Produk
Pesan Produk
User Sub Kategori Produk
«extends»
Penjelasan Singkat
Use case ini digunakan oleh user untuk melakukan pemesanan produk
Kondisi awal User harus login terlebih dahulu ke dalam sistem agar dapat
melakukan pemesanan produk Karakteristik
Tindakan dan eksekusi tergantung dari permintaan pengguna
Skenario flow of events
Skenario Dasar Basic Flow :
a. User
memilih menu ‘Sub kategori produk’.
b. Kemudian sistem menampilkan jenis-jenis produk yang
tersimpan pada database.
c. Setelah produk ditampilkan maka user dapat melakukan
pemesanan. Kondisi akhir
User dapat melakukan pemesanan seluruh produk yang ditampilkan pada web e-commerce.
Tabel 3.6 Use case spesifikasi User Tambah Pesanan Produk
6. Use case : User Tambah Pesanan Produk
Tambah Pesanan
User Sub Kategori Produk
«extends»
Penjelasan Singkat
Use case ini digunakan oleh user untuk menambah pemesanan produk.
Universitas Sumatera Utara
Kondisi awal User harus login terlebih dahulu ke dalam sistem agar dapat
melakukan pemesanan produk Karakteristik
Tindakan dan eksekusi tergantung dari permintaan pengguna
Skenario flow of events
Skenario Dasar Basic Flow :
a. User
memilih menu ‘Sub kategori produk’.
b. Kemudian sistem menampilkan jenis-jenis produk yang
tersimpan pada database.
c. Setelah produk ditampilkan maka user dapat melakukan
pemesanan.
d. Selanjutnya user dapat menambah pesanan produk
dengan melakukan pemilihan produk kembali. Kondisi akhir
User dapat menambah pesanan sesuai kebutuhannya.
Tabel 3.7 Use case spesifikasi User CheckOut
7. Use case : User CheckOut
CheckOut User
Sub Kategori Produk «extends»
Login
Penjelasan Singkat
Use case ini digunakan oleh user untuk melakukan CheckOut
Kondisi awal User harus login terlebih dahulu ke dalam sistem agar dapat
melakukan pemesanan produk Karakteristik
Tindakan dan eksekusi tergantung dari permintaan pengguna
Skenario flow of events
Skenario Dasar Basic Flow :
a. User
memilih menu ‘Sub kategori produk’.
b. Kemudian sistem menampilkan jenis-jenis produk yang
tersimpan pada database.
c. Setelah produk ditampilkan maka user dapat melakukan
pemesanan.
d. Setelah pemesanan dilakukan maka dilanjutkan pada
proses CheckOut.
Universitas Sumatera Utara
e. Pada proses CheckOut dibutuhkan Nomor kartu kredit
yang valid agar pengiriman pemesanan dapat dilakukan. Apabila tidak valid maka pemesanan tidak dapat
dikirim.
Kondisi akhir User akan mendapatkan laporan data pesanan.
3.2.3 Perancangan Menu Utama Home
Halaman ini merupakan halaman awal yang akan dijumpai oleh pengunjung ketika pertama kali membuka sistem. Halaman menu utama menampilkan form login, menu-
menu yang ada pada sistem, kategori produk, dan sub kategori produk. Perancangan
menu utama dapat dilihat pada gambar 3.3.
Gambar 3.3 Menu Utama Home
Judul Header Home New Info Call Center About Us Search Product Kritik Saran Login Admin
user ID Anda User ID
Password
MAIN PROGRAM
Buat User Baru Lupa Passwrod
Karegori Produk Login
Sub Jenis Produk Daftar Pesanan
Universitas Sumatera Utara
3.2.4 Perancangan Form Cari Produk
Halaman ini dibuat untuk mencari sebuah produk didalam sistem yang akan dirancang. Kata yang dicari merupakan kata yang ada di dalam database, adapun
gambarnya dapat dilihat pada gambar 3.4.
Gambar 3.4 Cari Produk
3.2.5 Perancangan Form Register
Halaman ini dibuat untuk membuat user baru di dalam sistem yang akan dirancang. Seorang user baru harus terlebih dahulu registrasi agar bisa melanjutkan transaksi
adapun gambarnya dapat dilihat pada gambar 3.5.
Judul Header Home New Info Call Center About Us Search Product Kritik Saran Login Admin
Isi user ID Anda
Hasil Pencarian
User ID Password
Nama Produk : xxxxxxxxxx Keterangan : xxxxxxxxxxxxxxxxxxx
Buat User Baru Lupa Passwrod
Harga :xxxxxxxxxx Jumlah Karegari Produk
Nama Produk : xxxxxxxxx Keterangan : xxxxxxxxxxxxxxxxxxxx
Harga : xxxxxxxxx Jumlah Login
Sub Jenis Produk Daftar Pesanan
Add To Cart
Add To Cart
Universitas Sumatera Utara
Gambar 3.5 Form Register
3.2.6 Perancangan Form Jenis Produk
Halaman ini dibuat untuk menampilkan produk dari sebuah kategori, adapun gambarnya dapat dilihat pada gambar 3.6.
Gambar 3.6 Form Jenis Produk yang dijual
Judul Header Home New Info Call Center About Us Search Product Kritik Saran Login Admin
Isi user ID Anda BUAT USER BARU User ID
Password Buat User Baru
Lupa Passwrod Karegari Produk
Login
Sub Jenis Produk Daftarpesanan
E-mail Untuk ID :
Password :
Nama :
Alamat :
Tgl Lahir :
Telp :
Register
Universitas Sumatera Utara
3.2.7 Perancangan Form Daftar Pesanan
Halaman ini dibuat untuk menampilkan daftar pesanan. Pada halaman ini user dapat menambah dan menghapus produk sesuai dengan kebutuhan. adapun gambarnya dapat
dilihat pada gambar 3.7.
Gambar 3.7 Form Daftar Pesanan
3.2.8 Perancangan Form Check Out
Halaman ini dibuat untuk melakukan check out atas barang yang telah dipesan. Setelah seorang user telah selesai meng-order barang pesanan maka tahap yang paling
akhir adalah proses check out. Pada tahap ini akan ditampilkan daftar pesanan yang dilengkapi dengan harga produk, gambar produk, dan total harga. Selanjutnya sistem
akan meminta nomor kartu kredit, telepon, dan alamat seperti yang terlihat pada gambar 3.8.
Universitas Sumatera Utara
DATA DETAIL PEMESANAN Alamat :
No. Telp :
Kode Pos:
No. Kartu Kredit :
[ Cek Kartu ] [ Cancel ]
[ KIRIM PESANAN ] Gambar 3.8 Form Check Out
3.2.9 Perancangan Form Menu Administrator
Menu Administrator berfungsi untuk melakukan proses terhadap perubahan data produk seperti, tambah produk , hapus, ubah dan lain sebagainya. Perancangan menu
administrator yang akan dirancang yaitu :
1. Menu Administrator Berikut ini akan ditampilkan menu administrator seperti yang terlihat pada
gambar 3.9. Informasi :
a. Status Kartu : …………
b. Nomor Kartu : …………
c. Pemilik Kartu : …………
d. Nama Bank : …………
e. Jenis Kartu : …………
Universitas Sumatera Utara
Gambar 3.10 : Rancangan Layar Home Administrator
Gambar 3.9 Menu Administrator
2. Form Tambah Kategori Halaman ini dibuat untuk memasukkan kategori produk, adapun gambarnya
dapat dilihat pada gambar 3.10.
Gambar 3.10 Form Tambah Kategori
3. Form Tambah Sub Kategori Halaman ini dibuat untuk menambah sub kategori produk, adapun gambarnya
dapat dilihat pada gambar 3.11.
TAMBAH KATEGORI
Nama Kategori :
Keterangan :
Gambar :
Browse Simpan
MENU ADMINISTRATOR
Isi Berita Data Pesanan
Kategori
Tambah Kategori Ubah Kategori
Hapus Kategori Cetak Kategori
Sub Kategori
Tambah Sub Kategori Ubah Sub Kategori
Hapus Sub Kategori Cetak Sub Kategori
Data Produk
Tambah Produk Ubah Produk
Hapus Produk Cetak Produk
Universitas Sumatera Utara
Gambar 3.11 Form Tambah Sub Kategori
4. Form Tambah Produk Halaman ini dibuat untuk menambah data produk, adapun gambarnya dapat
dilihat pada gambar 3.12.
Gambar 3.12 Form Tambah Produk
5. Laporan Data Pesanan Laporan data pesanan merupakan laporan yang berisikan data- data pesanan
yang dilengkapi dengan no produk, kategori produk, sub kategori produk, nama produk, jumlah pesanan, dan total pesanan. Adapun data- data yang
TAMBAH KATEGORI
Nama Kategori :
Nama Sub Kategori :
Nama Produk :
Harga :
Gambar Produk :
Browse
Simpan
TAMBAH SUB KATEGORI
Nama Kategori :
Nama Sub Kategori :
Simpan Sub Kategori
Universitas Sumatera Utara
dibutuhkan sistem dalam pengiriman barang pesanan yaitu id customer, email, nama, alamat, dan nomor telepon. Laporan data pesanan dapat dilihat pada
tabel 3.8.
Tabel 3.8 LAPORAN DATA PESANAN NO
Kategori Sub
Kategori Nama
Produk Jumlah
Pesan Total
Pesanan
3.3 Diagram Konteks