digilib.uns.ac.id 14 BAB III DESAIN DAN PERANCANGAN 3.1 Deskripsi Data dan Perancangan Sistem Pada aplikasi Petshop online adalah penjualan yang menawarkan berbagai produk hewan peliharaan dan kebutuhan hewan peliharaan. Kebutuhan hewan peliharaan disini dijual seperti makanan hewan peliharaan dan vitamin, dan penjualan berbagai kategori hewan peliharaan seperti kucing, anjing, hamster,kura-kura dan lainya. Pengunjung melihat Petshop dan mendaftar sebagai member Mendadftar menjadi member ke sistem agar dapat melakukan pemesanan Seltelah itu pengunjung sudah menjadi member kalau sudah mendaftar Member login untuk melakukan transaksi Member memesan produk Admin menerima data konfirmasi dan akas segera mengirim produk yang dibeli Member melakukan konfirmasi pembayaran pada sistem Member melakukan transfer ke bank Keterangan: Gambar 3.1 Work Flow Diagram PetShop Online 1. Pengunjung dapat melihat produk di sistem aplikasi Petshop ini namun pengunjung tidak dapat melakukan pemesanan produk, karena jika ingin melakukan pemesanan pengunjung harus melakukan pendaftaran ke dalam sistem. 2. Pengunjung melakukan pendaftaran sebagai member pada sistem agar dapat melakukan transaksi pemesanan pada system.
digilib.uns.ac.id 15 3. Pengunjung sudah melakukan pendaftaran member maka pengunjung bisa melakukan transaksi pemesanan produk. 4. Pengunjung dapat login ke dalam sistem ini dengan menggunakan username dan password member. 5. Member sudah dapat melakukan transaksi pemesanan produk. 6. Selesai member melakukan pemesanan maka member harus melakukan pembayaran ke bank dengan nomor rekening yang sudah ada pada system. 7. Setelah member melakukan transfer kebank member dapat langsung melakukan konfirmasi bukti pembayaran bank dengan melakukan login dan melakukannya pada menu konfirmasi. 8. Setelah admin mendapat bukti pembayaran maka admin akan segera mengirim pesanan member. 3.1.1 Perancangan Sistem Peracangan sistem merupakan langkah awal untuk membuat sebuah sistem. PetShop ini diharapkan dapat membantu dalam kegiatan promosi dan pemasaran produk serta dapat menyampaikan informasi kepada konsumen secara online. PetShop online ini meliputi penyampaian informasi produk-produk hewan yang dipasarkan dan pemesanan produk dari toko hewan tersebut. 3.1.2 Analisa Kebutuhan Hardware Perangkat keras yang digunakan untuk membuat PetShop Online ini menggunakan Laptop dengan spesifikasi: 1. Proccesor Intel Core 2 Duo 2. Harddisk 320 GB 3. RAM 1GB 4. Mouse
digilib.uns.ac.id 16 3.1.3 Analisa Kebutuhan Software Perangkat lunak yang digunakan untuk membuat PetShop Online ini adalah: 1. Sistem Operasi : Windows 7 2. Editor Web : Macromedia Dreamweaver 3. Web Server :Apache, dengan bahasa pemrograman PHP dan menggunakan database MySQL. 4. Software Pendukung : Adobe Photoshop CS3, Macromedia Dreamweaver MX 2004, Microsoft Visio 2007, MS Acces 2007,XAMPP. 3.1.4 Perancangan Sistem a. Context Diagram (CD) Sistem dan prosedur pada PerShop Online dapat dilihat pada Context Diagram pada Gambar 3.2. Data kota Data pesanan Data konfirmasi Data memberi Data profil Data pesanan Admin Data kota Status pemesanan PetShop Online Lihat produk Lihat info Daftar member Data profil Data pesanan Member Pengunjung Gambar 3.2 Context Diagram PetShop Online Keterangan: 1. Admin mengelola semua data pada aplikasi PetShop Online ini 2. Admin mendapatkan hasil data. 3. Admin memperoleh data member dari sistem. 4. Admin memperoleh data pesanan dari sistem.
digilib.uns.ac.id 17 5. Pengunjung harus melakukan pendaftaran jika ingin melakukan transaksi. 6. Pengunjung memperoleh informasi segala produk dari sistem 7. Semua data yang diinputkan member akan tersimpan dalam sistem. 8. Member memperoleh verifikasi data diri dari sistem. 9. Member memasukkan data pemesanan produk yang akan dibeli. b. Data Flow Diagram DFD merupakan model yang menggambarkan sistem sebagai jaringan kerja antar fungsi yang saling berhubungan dengan aliran dan penyimpanan data atau database. Adapun gambar DFD level 0 dalam pembuatan PetShop Online dapat dilihat pada Gambar 3.3. 1.0 Admin Username password Konfirmasi login Login admin Username password Admin Pengunjung Daftar member baru 2.0 Registrasi member Data member baru Member Datta pesanan produk Member Daftar produk Daftar produk Data pesanan Data pesanan 3.0 Menejemen pemesanan Data pesanan Data pesanan Status pesan Pesanan Data info,produkkota Data info,produkkota Data profil 4.0 Data member Data member Data profil Menejemen member 5.0 Menejemen data Data kota Data kota Kota Data info Data info Info Data kategori Kategori Data kategori Gambar 3.3 DFD Level 0
digilib.uns.ac.id 18 Keterangan: 1. Admin melakukan login. Proses 1.0 Admin melakukan login dengan menggunakan username dan password agar admin dapat mengelola semua sistem aplikasi PetShop online ini. 2. User melakukan registrasi. Proses 2.0 adalah proses registrasi untuk mendaftarkan diri sebagai member agar dapat memesan produk. Karena user tidak dapat memesan produk apabila belum login sebagai member. 3. Member melakukan pemesanan Proses 3.0 adalah proses pemesanan yang dilakukan oleh member. Member memilih akan dipesan lalu mengisikan data pengiriman selanjutnya. Setelah itu member melakukan konfirmasi dan selanjutnya admin mengubah status pemesanan dan memproses pemesanan. 4. Menejemen member Proses 4.0 adalah proses Menejemen member yang dilakukan oleh member. Pada proses ini member dapat menggubah data profil mereka apabila diinginkan. 5. Manajemen data Proses 5.0 adalah proses memanajemen data yang berupa info,kategori hewan, kota produk produk, yang dilakukan oleh admin. a. DFD level 1 Manajemen Pemesanan Produk DFD level 1 proses manajemen pemesanan manajemen data pemesanan menggambarkan proses pemesanan dari member melihat produk sampai admin mengkonfirmasi atau mengubah status pemesanan.. Dapat dilihat pada Gambar 3.4.
digilib.uns.ac.id 19 Member Data pemesanan 3.1 Pilih produk hewan Produk Hewan Data pengiriman 3.2 Isi form pengiriman Data pemesanan produk Data pemesanan Data pemesanan Pesenan Data konfirmasi 3.3 Data konfirmasi Data konfirmasi Konfirmasi Transaksi Data konfirmasi Admin 3.4 Status pemesanan Status pemesanan Ubah status pengiriman Status pemesanan Status pemesanan Gambar 3.4 DFD Level 1 Manajemen Pemesanan Produk Keterangan: 1. Member melihat produk Proses 3.1 yaitu proses melihat produk. Proses ini dilakukan oleh member apabila ingin memesan produk lalu mengklik tombol beli pada produk.. 2. Member mengisi form pengiriman Proses 3.2 yaitu proses mengisi form pengiriman dilakukan oleh member. Member diharuskan mengisikan data pengiriman berupa nama tujuan, alamat tujuan serta kota setelah selesai memilih produk. 3. Konfirmasi Proses 3.3 yaitu proses konfirmasi yang dilakukan oleh member dan dilihat oleh admin. Setelah member mentransfer biaya pemesanan member melakukan konfirmasi dengan cara mengisikan data pada form konfirmasi. 4. Ubah Status pemesanan Proses 3.4 yaitu proses mengubah status pemesanan dilakukan oleh admin. Setelah member melakukan konfirmasi maka admin akan mengubah status pemesanan pada penyimpanan pesanan.
digilib.uns.ac.id 20 b. DFD level 1 Manajemen Data DFD level 1 proses manajemen data yaitu info, kategori, produk, dan kota menggambarkan proses admin melakukan manajemen data yang berhubungan dengan database PetShop ini. Dapat dilihat pada Gambar 3.5. Pengunjung Member Data kota, produk, kategori, info Data kota, produk, kategori, info Lihat data Lihat data 5.1 Tambah data 5.2 Data kategori Data kategori Data kota data Produk hewan Kategori Info Data kota, produk, kategori, info Edit data Kota Data kota Admin Data kota, produk kategori, info 5.3 Hapus data Data kota Data info Data kategori Gambar 3.5 DFD Level 1 Manajemen Data Keterangan: 1. Admin tambah info, kategori, produk, kota. Proses 5.1 yaitu proses tambah data info,kategori, produk dan kota yang dilakukan oleh admin. 2. Admin edit data info, kategori, produk, kota Proses 5.2 adalah proses edit data info, kategori, produk, kota dilakukan oleh admin. 3. Admin delete artikel Proses 5.3 adalah proses mendelete data info, kategori, produk, kota dilakukan oleh admin.
digilib.uns.ac.id 21 3.2 Analisa dan Perancangan Basis data 3.2.1 ERD (Entity Relationship Diagram) Adapun entity relationship diagram yang digunakan dapat dilihat pada Gambar 3.6. Jenis kelamin stok Nama_lengkap berat alamat Biaya Alamat_tujuan gambar email Namakota Tgl_pesan diskon telp Id_kota status Id_hewan blokir password username Id_member Kota 1 memiliki m Total_bayar Nama_tujuan Id_pesan bayar jumlah Id_detail deskripsi harga Nama_hewan Member 1 m 1 1 1 melakukan pemesanan memiliki Detail_pesan memiliki m 1 1 Hewa n m Id_konfirmasi Jml_byr memiliki 1 memiliki memiliki 1 Bank_asal konfirmasi m Id_complain Kategori nama Complain tanggal Id_kategori tgl isi Nama_kategori Atas_nama Rek_asal bukti Bank_tujuan Gambar 3.6 ERD (Entity Relationship Diagram)
digilib.uns.ac.id 22 3.2.2 Relationship Table Adapun relasi antar tabel yang digunakan dapat dilihat pada Gambar 3.7. Gambar 3.7 Relationship Table 3.2.2 Perancangan Tabel Database Pembuatan PetShop online ini menggunakan SQL sebagai bahasa standart yang digunakan untuk mengakses database. Adapun tabel yang digunakan adalah sebagai berikut: 1. Tabel Admin Tabel Admin digunakan untuk menyimpan data admin yang berupa username dan password untuk melakukan login ke dalam aplikasi PetShop Online ini. Struktur tabel admin digambarkan pada tabel 3.1. Tabel 3.1 Tabel admin. username varchar 20 Username admin (Primary Key) password varchar 50 Password admin 2. Tabel Info Tabel info digunakan untuk menyimpan data info dan menampilkannya pada halaman aplikasi PetShop. Selain itu, tabel info digunakan untuk
digilib.uns.ac.id 23 menambah info baru, dan juga mengedit atau menghapus info. Struktur tabel info digambarkan pada tabel 3.2. Tabel 3.2 Tabel info Id_info Integer 5 Id info (Primary Key) Info Varchar 30 Judul info Isi Text Deskripsi isi info 3. Tabel Member Tabel member digunakan untuk menyimpan data member yang akan membeli produk hewan. Data member meliputi data diri pribadi member. Struktur tabel member digambarkan pada tabel 3.3 Tabel 3.3 Tabel member Id_member Integer 5 Id member (Primary Key) Username Varchar 30 Username yang digunakan untuk member login. Password Varchar 50 Password yang digunakan untuk member login. Nama_lengkap Varchar 30 Nama lengkap member Alamat Varchar 50 Alamat member Jenis kelamin Enum L, P Gender member Email Varchar 50 Email member Emailstat Enum Y, N Sttus email Telp Varchar 20 No telepon member Blokir Enum Y, N Status blokir member 4. Tabel Kategori Tabel kategori digunakan untuk membedakan jenis-jenis hewan. Struktur tabel kategori digambarkan pada tabel 3.4
digilib.uns.ac.id 24 Tabel 3.4 Tabel Kategori Id_kategori Integer 5 Id kategori (Primary Key) Nama_kategori Varchar 30 Kategori produk hewan 5. Tabel Pemesanan Tabel pemesanan digunakan untuk menyimpan data-data apabila proses transaksi dan data member telah diisi dengan lengkap. Struktur tabel pemesanan digambarkan pada tabel 3.5. Tabel 3.5 Tabel Pemesanan Field Type Width keterangan Id_pesan Char 6 Id pemesanan (Primary Key) Id_member Integer 5 Id member (Foreign Key) Tgl_pesan Date Tanggal pemesan Nama_tujuan Varchar 30 Nama tujuan pesanan Alamat_tujuan Varchar 50 Alamat tujuan Id_kota Integer 5 Id kota (Foreign Key) Total_bayar Integer 10 Total pembelian Status Enum Prosess, Batal,Lunas, Selesai Status pemesanan 6. Tabel Produk Hewan Tabel hewan digunakan untuk menyimpan data produk hewan yang dijual pada PetShop Online. Struktur tabel hewan digambarkan pada tabel 3.6. Tabel 3.6 Tabel produk hewan Field Type Width keterangan Id_hewan Integer 5 Id produk (Primary Key) Id_kategori Integer 5 Id kategori hewan (Foreign Key) Nama_hewan Varchar 30 Nama produk
digilib.uns.ac.id 25 Deskripsi Text Keterangan tentang produk Harga Integer 10 Harga produk Gambar varchar 50 Gambar produk Diskon Integer 2 Diskon produk Berat Bigint 20 Berat produk Stok Integer 11 Stok produk 7. Tabel Kota Tabel kota digunakan untuk menyimpan databiaya. Struktur tabel kota digambarkan pada tabel 3.7. Tabel 3.7 Tabel kota Id_kota Char 5 Id kota (Primary Key) Namakota Varchar 20 Nama kota Biaya Integer 10 Ongkos kirim 8. Tabel Konfirmasi Tabel konfirmasi digunakan untuk menyimpan data konfirmasi member setelah melakukan transfer. Struktur tabel konfirmasi transfer digambarkan pada tabel 3.8. Tabel 3.8 Tabel konfirmasi Id_konfirmasi Char 10 Id konfirmasi pembayaran (Primary Key) Id_pesan Char 11 Id pemesanan (Foreign Key) Nama Varchar 30 Nama member Jml_byr Integer 10 Total pembayaran Bank_asal Varchar 20 Bank member Rek_asal Varchar 30 Rekening member Atas_nama Varchar commit 30 to user Atas nama rekening
digilib.uns.ac.id 26 Rek_tujuan Varchar 20 Rekening tujuan Tgl Date Waktu transfer Bukti Varchar 50 Bukti transfer 9. Tabel detail_pesan Tabel detail_pesan digunakan untuk menyimpan data detail pemesanan. Struktur tabel detail_pesan digambarkan pada tabel 3.9. Tabel 3.9 Tabel detail_pesan. Id_detail Integer 10 Id detail pemesanan (Primary Key) Id_pesan Char 6 Id pemesanan (Foreign Key) Id_hewan Integer 5 Id hewan (Foreign Key) Jumlah Integer 4 Jumlah produk per item Bayar Integer 10 Total bayar per item 10. Tabel Komplen Tabel Komplen digunakan untuk menyimpan data komplenan dari member tentang produk yang sudah dibeli. Struktur tabel komplen digambarkan pada tabel 3.10. Tabel 3.10 Tabel Komplen. Id_complain Integer 3 Id komplen pemesanan (Primary Key) Id_pesan Char 6 Id pemesanan (Foreign Key) Isi Text Isi dari komplenan pemesanan. Tanggal Date Tanggal komplen
digilib.uns.ac.id 27 3.3 Struktur dan Desain Program 3.1.1 Rancangan Halaman Index atau Halaman Utama Halaman Index adalah halaman utama yang ditampilkan saat pertaman kali sistem dijalankan pada web browser. Halaman ini digunakan untuk pengunjung dan member. Rancangan halaman utama dapat dilihat pada Gambar 3.8 MENUBAR HEADER CONTENT FOOTER Gambar 3.8 Rancangan Halaman Utama
digilib.uns.ac.id 28 3.1.2 Rancangan Halaman Login Admin Halaman Login Admin digunakan masuk login admin yang berisikan username dan password admin.rancangan halaman login admin dapat dilihat pada Gambar 3.9 LOGIN ADMIN USERNAME PASSWORD LOGIN Gambar 3.9 Login Admin 3.13 Rancangan Halaman Admin Halaman admin ini digunakan untuk memenejemen semua kegiatan yang ada di Petshop ini. Rancangan halaman admin dapat dilihat pada Gambar 3.10 MENUBAR CONTENT FOOTER Gambar 3.10 Rancangan Halaman Admin