Perancangan Sistem Implementasi Algoritma Luhn untuk Otentikasi Nomor Kartu Kredit pada Sistem Transaksi Online

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