BAB 4. PERANCANGAN 4.1.Perancangan UML 4.1.1 Use Case Use case diagram merupakan model untuk mendeskripsikan hubunganhubungan yang terjadi antar aktor dengan aktivitas yang terdapat pada sistem, yaitu pelanggan dan penjual. Untuk gambar use case diagram website ini dapat dilihat pada Gambar 4-1. Gambar 4-1 Use Case Diagram Website Pada gambar diatas menjelaskan bahwa pelanggan melakukan pemasanan dengan cara mengisi form pemesanan dan melakukan transfer pembayaran maupun Down Payment (DP) dan penjual harus melakukan login terlebih dahulu untuk mengelola website dan untuk mengetahui pesanan. Setelah penjual selesai mengecek pesanan dan dinyatakan berhasil penjual akan menyiapkan barang dan mengunjungi kerumah pelanggan untuk menerapkan konsep aquascape yang diinginkan pelanggan. Tabel 4-1 Skenario Use Case melihat web Nama Use Case Lihat Web Aktor Pelanggan, Penjual Deskripsi Singkat Pelanggan dapat melihat menu website (beranda, produk, cara pemesanan, tentang kami) pada tampilan awal website, sedangkan penjual juga dapat melihat menu yang sama seperti pelanggan tetapi ada menu login untuk penjual agar dapat melihat menu (kelola admin, kelola produk, kelola buku tamu). 35
Skenario 1. Membuka website 2. Sistem menampilkan menu web 3. Pelanggan dan Penjual dapat melihat tampilan web 4. Penjual melakukan login untuk mengelola website Nama Use Case Aktor Deskripsi Singkat Skenario Tabel 4-2 Skenario Use Case pelanggan melihat dan memesan produk Lihat Produk Pelanggan Pelanggan dapat melihat bermacam-macam produk aquascape serta dapat memesan dengan cara mengisi form pemesanan dan melakukan pembayaran dengan mentrasfer ke bank secara manual 1. Membuka menu produk 2. Sistem menampilkan menu produk 3. Pelanggan dapat melihat dan mengklik produk untuk memesan produk 4. Pelanggan mengisi form pemesanan dan melakukan pembayaran Nama Use Case Aktor Deskripsi Singkat Skenario Tabel 4-3 Skenario Use Case penjual mengelola admin login Penjual Penjual dapat mengelola website dengan cara login terlebih dahulu 1. Melakukan login admin 2. Sistem menampilkan menu admin 3. Penjual dapat mengelola admin, produk, pemesanan dan buku tamu Tabel 4-4 Skenario Use Case penjual melihat, mengelola produk & pesanan Nama Use Case Kelola Produk Aktor Penjual Deskripsi Singkat Penjual dapat melihat dan mengelola (tambah, ubah, hapus) produk dengan cara login admin terlebih dahulu, jika pemesanan dinyatakan berhasil penjual akan menyiapkan barang dan mengunjungi rumah pelanggan untuk menerapkan aquascape yang diinginkan pelanggan Skenario 1. Melakukan login admin 36
2. Sistem menampilkan menu login admin 3. Penjual dapat melihat dan mengelola (tambah, ubah, hapus) produk Tabel 4-5 Skenario Use Case penjual menyiapkan barang&kerumah pelanggan Nama Use Case Menyiapkan barang dan kerumah pelanggan Aktor Penjual Deskripsi Singkat Setelah pemesanan dan pembayaran pelanggan berhasih, si penjual akan menyiapkan barang dan mengunjungi rumah pelanggan untuk menerapkan aquascape yang diinginkan pelanggan Skenario 1. Pelanggan mengisi form pemesanan dan melakakun pembayaran 2. Penjual menyiapkan barang untuk penerapan aquascape 3. Penjual akan mengunjungi rumah pelanggan untuk menerapkan aquascape yang diinginkan pelanggan 4.1.2 Diagram activity Activity diagram menggambarkan berbagai aliran aktivitas dalam sistem yang dirancang, bagaimana masing-masing fungsionalitas bekerja dan bagaimana fungsionlitas berakhir. Activity diagram memodelkan eventevent yang terjadi pada use case. Berikut activity diagram yang menjelaskan interaksi antara penjual dan pelanggan. Untuk gambar ativity diagram aplikasi ini dapat dilihat pada gambar 4-2. Gambar 4-2 Activity Diagram Penjual 37
Pada diagram activity diatas penjual terlebih dahulu melakukan login admin jika valid maka sistem akan menampilkan menu admin dan jika tidak valid maka sistem akan mengembalikan ke login admin, dalam menu admin penjual dapat melakukan tambah, ubah dan hapus admin, menu produk penjual dapat tambah, ubah dan hapus produk, menu pemesanan penjual dapat melihat pesanan yang diinginkan oleh pelanggan dan dapat menghapusnya. Jika penjual ingin mengelola website (kelola admin, produk dan pemesanan) perubahan tersebut akan disimpan dalam database. Gambar 4-3 Activity Diagram Pelanggan Pada diagram activity diatas pelanggan dapat melihat halaman beranda, produk, cara pemesanan, dan tentang kami. Pada menu produk jika pelanggan ingin memesan produk pelanggan bisa mengisi formulir pemesanan dengan cara mengklik produk mana yang diinginkan dan akan muncul menu form pemesanan, form pemesanan yang sudah diisi pelanggan akan disimpan ke dalam database. 38
4.2. Perancagan Basis Data 4.2.1 E-R-D Entity diagram merupakan diagram yang menggambarkan hubungan antara entitas dalam sistem website yang ditunjukkan pada gambar 4-4 : Gambar 4-3 ER Diagram Pemesanan Produk Pada diagram ER diatas dijelaskan bahwa untuk memesan produk pelanggan harus mengisi form pemesanan yang akan disimpan ke database yang nantinya akan dilakukan pengecekkan oleh penjual dengan cara login terlebih dahulu. 4.2.2 Struktur Tabel Berikut Struktur tabel dalam pengolahan data pada website ini adalah sebagai berikut : 1. Rancangan Tabel Admin Pada rancangan ini merupakan rancangan tabel yang mencatat kegiatan dari admin pada website. Tabel 4-6 Spesifikasi Tabel Admin No Elemen Data Akronim Type Panjang Keterangan 1 Id_Admin id_admin int 10 Primary Key Auto_increment 2 Nama Admin name varchar 50-39
3 Email Admin email varchar 50-4 Username Admin username varchar 50-5 Password Admin password varchar 50-6 Updated User updated timestamp - - 2. Rancangan Tabel Produk Pada rancangan ini merupakan rancangan tabel yang mencatat kegiatan dari produk pada website. Tabel 4-7 Spesifikasi Tabel Produk No Elemen Data Akronim Type Panjang Keterangan 1 Id Produk id_produk int 10 Primary Key Auto_increment 2 Nama Produk judul_produk varchar 50-3 Isi Produk isi_produk text - - 4 Updated Produk Updated timestamp - - 3. Rancangan Tabel Pemesanan Pada rancangan ini merupakan rancangan tabel yang mencatat kegiatan dari pemesanan pada website. Tabel 4-8 Spesifikasi Tabel Pemesanan No Elemen Data Akronim Type Panjang Keterangan 1 Id_Pemesanan id_pemesanan int 10 Primary Key Auto_increment 2 Nama Pemesan nama_pemesan varchar 30-3 Tlp / Hp Pemesan telp_pemesan int 15-4 Email Pemesan email_pemesan varchar 30-5 Alamat Pemesan alamat_pemesan varchar 200-6 Kota Pemesan kota_pemesan varchar 30-7 Kodepos Pemesan kodepos_pemesan int 10-8 Pesan Pemesan pesan text - - 9 Tanggal Pemesanan tanggal_pemesanan timestamp - - 10 Id Produk id_produk int 10 Foreign key 40
4.2.3 Struktur Navigasi Struktur Navigasi pada gambar dibawah ini adalah struktur navigasi campuran yang digunakan oleh penulis pada perancangan pembuatan situs website. Struktur tersebut menggambarkan proses kerja dari situs website yang penulis buat. 1. Struktur Navigasi Keseluruhan 2. Struktur Navigasi Penjual Gambar 4-4 Struktur Navigasi Keseluruhan 3. Struktur Navigasi Pelanggan Gambar 4-5 Struktur Navigasi Penjual Gambar 4-6 Struktur Navigasi Pelanggan 41
4.2.4 Rancangan Interface Pada rancangan website ini penulis membuat bentuk keluaran atau rancangan tampilan dari halaman-halaman situs. a. Halaman Beranda Halaman ini merupakan halaman yang akan pertama kali tampil, ketika website pertama kali diakses. Halaman Beranda akan dirancang cukup kompleks karena akan ada link untuk ke semua halaman. Halaman ini berisi beberapa koleksi foto berjalan dan artikel. Gambar 4-7 Rancangan Halaman Beranda b. Halaman Produk Halaman ini berisikan koleksi gambar gambar produk, untuk pemesanan klik gambar dan akan muncul pengisiian form pemesanan yang kemudian diisi oleh pelanggan untuk pemesanan. Gambar 4-8 Rancangan Halaman Produk 42
c. Halaman Form Pemesanan Halaman ini muncul ketika gambar di halaman produk diklik, dan pelanggan mengisi form pemesanan untuk melakukan pemesanan produk. Gambar 4-9 Rancangan Halaman Form Pemesanan d. Halaman Cara Pemesanan Halaman ini berisikan informasi bagaimana cara pemesanan di website. Gambar 4-10 Rancangan Halaman Cara Pemesanan 43
e. Halaman Tentang Kami Halaman ini berisikan tentang informasi toko seperti alamat, no tlp/hp dan jam buka toko. Gambar 4-11 Rancangan Halaman Tentang Kami f. Halaman Login Halaman ini berisikan untuk penjual login admin. Gambar 4-12 Rancangan Halaman Login 44
4.2.5 Flowchart 1. Perancangan Flowchart Website a. Flowchart Halaman Beranda Gambar 4-13 Flowchart Halaman Beranda b. Flowchart Halaman Produk Gambar 4-14 Flowchart Halaman Produk 45
c. Flowchart Halaman Login Gambar 4-15 Flowchart Halaman Login d. Flowchart Halaman Beranda Penjual Gambar 4-16 Flowchart Halaman Beranda Penjual e. Flowchart Halaman Tambah Admin Gambar 4-17 Flowchart Tambah Admin 46
f. Flowchart Halaman Ubah/Hapus Admin Gambar 4-18 Flowchart Ubah/Hapus Admin g. Flowchart Halaman Tambah Produk Gambar 4-19 Flowchart Tambah Produk h. Flowchart Halaman Ubah/Hapus Produk Gambar 4-20 Flowchart Ubah/Hapus Produk 47
i. Flowchart Halaman Pemesanan Gambar 4-21 Flowchart Halaman Pemesanan 48