BAB IV

PERANCANGAN SISTEM

4.1 Perancangan Prosedur

Pada bab sebelumnya dijelaskan mengenai sistem yang sedang

berjalan di CV.WATER’O menggunakan use case, selanjutnya pada bab ini

penulis akan menjelaskan mengenai sistem yang baru dengan menggunakan

sistem berbasis web.

4.2 Diagram Rancangan Sistem

Penulis membuat Diagram Rancangan sistem dengan menggunakan

sistem OOAD (Object Oriented Analysis and Design) yaitu menggunakan

UML (Unified Modeling Language) yang terdiri dari Use Case Diagram,

Class Diagram, Sequence Diagram dan Activity Diagram.

4.2.1 Use Case Diagram

Use Case Diagram adalah gambaran graphical dari beberapa atau

semua actor, use case, dan interaksi diantara komponen-komponen tersebut

yang memperkenalkan suatu sistem yang akan dibangun. Use Case diagram

menjelaskan manfaat sutau sistem jika dilihat menurut pandangan orang

yang berada di luar sistem. Diagram ini menunjukan fungsionalitas suatu

sistem atau kelas dan bagaimana sistem tersebut berinteraksi dengan dunia

luar. Berikut adalah model use case diagram pada website CV.WATER’O :

Gambar 4.1 Use Case

Keterangan :

1. Marketing untuk masuk kedalam sistem ini marketing dapat :

- Menambah dan merubah isi website CV.WATER’O untuk

mengupdatekan informasi terbaru

- Melihat, menghapus, edit data dari member (user).

2. User untuk masuk kedalam sistem ini user dapat :

- Melihat isi (informasi) website CV.WATER’O

- Mendaftarkan menjadi pelanggan CV.WATER’O.

4.2.2 Class Diagram

Class Diagram menggambarkan struktur sistem dari segi

pendefinisian kelas kelas yang akan dibuat untuk membangun sistem. Kelas

memiliki apa yang diebut atribut dan metode atau operasi.

Marketing User

Menambah & merubah Web

Melihat dan Entry Data

Entry Data (pelanggan)

Melihat Isi Website

Home

+Judul+Home

+Add Data Home ()+View Data Home ()+Edit Data Home ()

+Hapus Data Home()

Profile

+Judul+Profile

+Add Data Profile ()+View Data Profile ()+Edit Data Profile ()

+Hapus Data Home()

Sertifikat&Hasil LAb

+Judul+Sertifikat &Hasil Lab

+Add Data Sertikat&Hasil Lab()+View Data Sertikat&Hasil Lab ()+Edit Data Sertikat&Hasil Lab ()

+Hapus Data Sertikat&Hasil Lab ()

Product

+Judul+Product

+Add Data Product ()+View Data Product ()+Edit Data Product ()

+Hapus Data Product ()

Pengertian

+Judul+Pengertian

+Add Data Pengertian ()+View Data Pengertian ()+Edit Data Pengertian ()

+Hapus Data Pengertian ()

Proses

+Judul+Proses

+Add Data Proses ()+View Data Proses ()+Edit Data Proses ()

+Hapus Data Proses ()

Manfaat

+Judul+Manfaat

+Add Data Manfaat ()+View Data Manfaat ()+Edit Data Manfaat ()

+Hapus Data Manfaat ()

Contact

+Nama+Alamat

+ Telepon

+Add Data Contact ()+View Data Contact ()+Edit Data Contact ()+Hapus Data Contact

()

About

+Judul+About

+Add Data About ()+View Data Product ()

+Edit Data About ()+Hapus Data Product ()

Sejarah

+Judul+Sejarah

+Add Data Home ()+View Data Home ()+Edit Data Home ()

+Hapus Data Home()

Struktur Organisasi

+Judul+Struktur Organisasi (S.O)

+Add Data S.O ()+View Data S.O ()+Edit Data S.O ()

+Hapus Data S.O ()

Konsumen

Marketing

owner

kasirOwner

1,memesan 2. mencatat pemesanan

3 . merima pembayaran4. menambah dan merubah Website 5. lihat laporan keuangan

6 . melihat laporan

Gambar 4.2 Class Diagram

4.2.3 Sequence Diagram

Diagram Sekuence menggambarkan kelakuan/perilaku objek pada use

case dengan mendeskripsikan waktu hidup objek dan message yang

dikirimkan dan diterima antar objek. Untuk mengetahui objek-objek yang

terlibat dalam sebuah uce case beserta metode-metode yang dimiliki kelas

yang diinstansiasi menjadi objek itu.

Melihat Webiste

Isi data member

Tampil form input

(User ) (Sistem)

Simpan data dalam tabel

Konfirmasi simpan

Gambar 4.3 Sequence Diagram

4.2.4 Activity Input

Activity diagram di bawah menggambarkan proses input data

member yaitu, mulai user melihat webiste, lalu sistem akan menampilkan

form member yang harus diisi oleh user berdasarkan nama, alamat, dan

nomor telepon, sistem pun akan masuk ke dalam sistem dan disimpan, lalu

data member akan ditampilkan langsung di form pelanggan yang sudah

mendaftar.

4.2.5 Activity Input

Gambar 4.4 Diagram Input

Melihat Website

Menghubungi Perusahaan

Menampilkan Produk

(User ) (Marketing)

Memesan barang

Menerima telepon Konsumen

Mencatat Data yang dbutuhkan

Mengirimkan barangMembayar

Menerima pembayaranMenerima Kwitansi

Memberikan PesananMenerima barang

4.2.5 Activity Pemesanan Barang

Activity diagram di bawah menggambarkan proses pemesanan

barang yaitu, mulai user melihat website, lalu sistem akan menampilkan isi

website khususnya di produk, lalu user ingin memesan produk mereka

harus menelepon langsung sesuai dengan nomor telepon yang sudah ada di

menu contact, bagian marketing akan menerima telepon, dan mencatat

pemesanan, dan data lainnya seperti nama, alamat, dan nomor telepon yang

jelas, maka barang akan dikirimkan sesuai dengan alamat yang diberikan,

kemudian konsumen membayar langsung, dan barang diberikan.

Gambar 4.5 Activity Pemesanan Barang

Melihat Website

Menghubungi Perusahaan

Menampilkan Produk

(User ) (Marketing)

Memesan barang

Menerima telepon Konsumen

Mencatat Data yang dbutuhkan

Mengirimkan barangMembayar (transfer)

Menerima pembayaranMemberikan bukti pembayaran

Memberikan PesananMenerima barang

Gambar 4.5 Diagram Pemesanan Barang

4.2.6 Activity Pemesanan Barang (Transfer)

Activity diagram dibawah proses ini hampir sama dengan

pemesanan barang dengan pembayaran langsung, hanya saja sistem ini

pembayarannya lewat ATM (transfer).

Gambar 4.6 Diagram Pemesanan Barang (Transfer)

4.3 Rancangan Basis Data

4.3.5 Pembuatan Database

Setelah menginstall web server XAMPP, selanjutnya membuat

database di server MySQL dengan menggunakan PHP MyAdmin, pertama

buat nama untuk nama database tersebut, langkah selanjutnya jalankan

Servis Webserver dan MySql Servis, setelah semua dijalankanlangkah

selanjutnya buka web browser, ke alamat http://localhost/phpmyadmin/ dan

tampilan yang akan muncul:

Gambar 4.7 php myadmin

Berikut contoh langkah pembuatan database yang digunakan pada Sistem

Informasi CV.WATER’O:

a. Untuk membuat akun klik di Ciptakan database baru, dengan

menulis ‘member’ , kemudian klik ‘Ciptakan’

Gambar 4.8 ciptakan database baru

b. Kemudian akan ada pengisian database untuk member, kita klik di Nama

dengan ‘pelanggan’ dan Number of field ‘4’, Klik ‘GO’.

Gambar 4.9 ciptakan database member

c. Setelah itu akan muncul pengisian data untuk pengisian tabel apa saja

yang dibutuhkan. Untuk di tabel field isikan no, nama, alamat, telepon.

Untuk Jenis no menggunakan varchar dengan ukuran 200, nama

menggunakan jenis varchar dengan ukuran 300, alamat jenisnya varchar

dengan ukuran 300, dan telepon menggunakan jenis int dengan ukuran

200. Klik simpan di bawah kanan.

Gambar 4.10 pengisian data pelanggan

Tipe-tipe data yang sering digunakan adalah:

• INT, untuk menyatakan data berupa angka.

• VARCHAR, untuk menyatakan data berupa karakter atau string

• DATE, untuk menyatakan data berupa tanggal.

• TIME, untuk menyatakan data berupa waktu.

• TEXT, untuk menyatakan data berupa karakter dalam jumlah yang

banyak, misalnya untuk isi berita dan pesan.

d. Jika berhasil maka akan seperti gambar dibawah ini.

Gambar 4.11 Tampilan database pelanggan.

4.4 Implementasi Aplikasi

Perangkat keras yang digunakan dalam pembangunan sistem ini yaitu

sebuah Note Book yang digunakan sebagai Server beserta client. Berikut

spesifikasinya:

Processor Intel Core

Hardisk 500GB

Memory 2GB

Keyboard dan Mouse

Berikut adalah sistem informasi yang digunakan dalam proses perancangan

perangkat lunak ini:

Windows 7 Ultimate

PHP sebagai bahasa pemrograman web

MySQL sebagai database servernya

Macromedia Dreamweaver 8 sebagai editor

Star UML sebagai alat bantu desain pemodelan sistem UML

Microsoft word 2007 sebagai alat bantu pembuatan laporan

Home Profile

Sejarah

Struktur Oganisasi

Sertifikat & Hasil Lab

Product About

Pengertian

Proses

Manfaat

Contact

Corel Draw sebagai desain tampilan

Browser Mozilla Firefox sebagai lingkungan aplikasi.

4.5 Rancangan Halaman Website

Rancangan tampilan diperlukan secara mutlak didalam proses

pembuatan aplikasi halaman website karena bagian ini langsung

berhubungan dengan user.

4.5.5 Rancangan Site Map

Pada saat pengguna membuka situs ini maka halaman Home yang

akan muncul pertama kali.

Gambar 4.12 Site Map

Button

Banner B.

C. Content

FooterE.

4.5.6 Perancangan Halaman Website

Gambar 4.13 Rancangan Halaman Website

Keterangan :

A : Terdapat 5 Button / Tombol, yaitu : Home, Profile, Product, About,

Contact.

B : Berisikan banner mengenai CV.WATER’O

C : konten dihalaman ini berisikan profil perusahaan dan struktur

Organisasi. Konten di halaman Product berisi produk-produk

penjualan di CV.WATER’O. Konten halaman About berisi tentang

pengertian, proses dan manfaat mengenai penggunaan air R.O dan

UV. Konten di halaman Contact berisi informasi mengenai alamat,

nomor telepon, hal-hal lain yang berkaitan dengan cara menghubungi

perusahaan ini, dan form data member.

E : berisikan Alamat Email CV.WATER’O.

4.5.7 Kerangka Website

4.1.4.1 Home

Isi dari halaman Home adalah Button, Banner, dan pada bagian

content terdapat sekilas pandang mengenai perusahaan. Tujuannya adalah

agar memudahkan seseorang yang membuka halaman muka website untuk

memahami isi dari website ini.

4.1.4.2 Profile

Untuk bagian Button dan Banner seperti sudah dibahas sebelumnya,

Button dan Banner selalu statis hanya dibagian content yang berubah. Pada

profile terdapat sejarah dari berdiri perusahaan, struktur organisasi, dan

surat-surat seperti surat sertifikat dan hasil lab yang menyangkut biodata

perusahaan.

4.1.4.3 Product

Berisikan produk / barang-barang yang dijual di perusahaan.

4.1.4.4 About

Pada About terdapat pengertian R.O dan UV, proses R.O dan UV,

dan manfaat mengenai penggunaan air minum R.O dan UV.

4.1.4.5 Contact

Terdapat alamat, nomor telepon, email, dan informasi mengenai

cara menguhungi perusahaan dan form data member.

4.6 Perancangan Halaman Website

1. Buka aplikasi Dreamweaver. Kemudia di ‘Creat New’ pilih PHP.

Gambar 4.14 Tampilan utama dreamweaver

2. Untuk tampilan di atas saya letakkan Button / Tombol yang berisikan

Home, Profile, Product, About, dan Contact.

Gambar 4.15 Button

3. Untuk Banner sebelumnya sudah mendesainya lewat Corel Draw, yang

hasilnya langsung di masukan ke dalam dreamweaver.

Gambar 4.16 Tampilan Banner

4. Sebelum mengisi ke content kita lebih baiknya menyimpan data ini

dengan cara. Klik File kemudian Save, atau dengan cara Control+S.

Penyimpanan folder yaitu di Localdisk (C) , XAMPP, lalu di simpan di

folder htdocs kemudia kita membuat folder agar data yang disimpan

tidak berantakan. Contoh pertama dengan nama home dengan format

php.

5. Untuk content dibagian ini mengenai isian dari Home, Profile, Product,

About, dan Contact. Contoh dibawah adalah contoh isi dari home.

Gambar 4.17 Content Website

6. Untuk melihat hasil, setalah XAMPP aktif, kemudian ke browser

dengan mengetik localhost/web’watero3/home.php maka tampilan

website pada home sperti gambar dibawah.

Gambar 4.18 Tampilan Home Website CV.WATER’O

7. Untuk tata cara Button, dan Banner lainnya sama dengan yang lain

hanya saja beda content, berikut tampilan website di Profile yaitu

Sejarah, Struktur Organisasi dan Sertifikat dan Hasil Laboratorium yang

bersangkutan dengan perusahaan CV.WATER’O.

Gambar 4.19 Tampilan Website Sejarah CV.WATER’O

Gambar 4.20 Tampilan Struktur Organisasi CV.WATER’O

Gambar 4.21 Tampilan Sertifikat dan Hasil Laboratorium CV.WATER’O

8. Berikut tampilan website di Product yaitu produk-produk apa saja yang

dijual di perusahaan CV.WATER’O.

Gambar 4.22 Tampilan Website Produk CV.WATER’O

9. Berikut tampilan website di About yaitu Pengertian R.O dan UV, Proses

R.O dan UV, dan Manfaat R.O dan UV.

Gambar 4.23 Tampilan Website Pengertian R.O dan UV

Gambar 4.24 Tampilan Website Proses R.O dan UV

Gambar 4.25 Tampilan Website Manfaat R.O dan UV

10. Dibagian Contact ini didalamnya ada form untuk yang ingin menjadi

pelanggan di CV.WATER’O.

Gambar 4.26 Tampilan Website pada Contact.

Gambar 4.27 Form pada Content Contact.

11. Jika data telah disimpan maka akan muncul di Form Daftar Pelanggan

Gambar 4.28 Form Daftar Pelanggan CV.WATER’O