18

BAB IV

ANALISIS DAN PERANCANGAN

4.1 Analisa Sistem

Dari hasil survey dan observasi, maka dapat diketahui sistem apa yang

akan dibutuhkan oleh UD. Panca Usaha untuk mengatasi permasalahan yang ada.

Analisa kebutuhan sistem diambil berdasarkan data yang diperoleh pada saat

wawancara ke bagian pemasaran.

4.2 Prosedur Penelitian

Dalam perancangan sistem informasi ini menggunakan pemodelan

sistem antara lain Use Case Diagram, Activity Diagram, dan Class Diagram

sesuai dengan analisa kebutuhan dan rancangan sistem.

Tahapan yang dilakukan dalam mendesain dan membuat sistem informasi

berbasis object-oriented adalah sebagai berikut:

a. Membuat Use Case Diagram sistem informasi yang menggambarkan

hubungan anatara aktor dengan sistem.

b. Membuat Activity Diagram yang menggambarkan logika prosedural,

proses bisnis, dan jalur kerja dari use case yang telah di tampilkan

sebelumnya.

c. Membuat Class Diagram yang menggabarkan hubungan objek-objek yang

diggunakan dalam sistem ini.

19

4.3 USE CASE

Pada gambar use case diagram sistem informasi berbasis web ini

dijelaskan proses-proses yang terjadi didalam sistem yang dibuat:

Gambar 4. 1 Use Case Diagram Berbasis Web

Dari gambar use case diagram diatas terdapat dua aktor yang terlibat di

dalam sistem. Kedua aktor tersebut masing-masing berperan sebagai admin dan

customer. customer bertindak sebagai orang yang dapat melakukan aktifitas

seperti melihat informasi dari website company profile mulai dari melihat info

produk, profil perusahaan, dan mengirim pesan. Admin sistem adalah pihak yang

bertanggung jawab atas maintenance data master pada sistem. Pada gambar use

case diagram diatas juga terdapat sembilan use case yaitu:

20

a. Lihat Info Produk

Merupakan halaman dari company profile yang dlihat oleh customer

yang berisi informasi produk UD. Panca Usaha.

b. Lihat Profil Perusahaan

Menampilkan halaman profile perusahaan dari UD. Panca Usaha mulai

dari profil perusahaan, Visi dan Misi maupun informasi lainnya.

c. Menulis Pesan

Menampilkan halaman kontak dari UD. Panca Usaha beserta kolom

message.

d. Input Tentang Perusahaan

Menampilkan halaman input tentang perusahaan dari UD. Panca Usaha .

e. Input Produk

Menampilkan halaman maintenance data product.

f. Lihat Pesan

Menampilkan halaman maintenance kumpulan pesan dari customer.

g. Input User

Menampilkan halaman maintenance data user.

4.4 Activity Diagram

Acitivty Diagram merupakan tahapan setelah pembuatan use case, pada

tahap ini penulis menggambarkan alur proses yang terjadi di sistem.

21

4.4.1 Diagram Aktivitas Input Tentang Perusahaan

Activity diagram maintenance input tentang perusahaan digunakan oleh

admin untuk menambah atau menghapus data tentang perusahaan yang ada di

perusahaan.

Gambar 4. 2 Activity Diagram Input Tentang Perusahaan

4.4.2 Diagram Aktivitas Input User

Activity diagram input admin digunakan oleh admin untuk menambah

atau menghapus admin yang berhak memaintenance data pada company profile.

22

Gambar 4. 3 Activity Diagram Input User

4.4.3 Diagram Aktivitas Input Produk

Activity diagram maintenance saran digunakan oleh user untuk

menambah atau menghapus data produk yang ada di perusahaan yang berada pada

menu master produk.

23

Gambar 4. 4 Activity Diagram Input Produk

4.4.4 Diagram Aktivitas Mengirim Pesan

Activity diagram mengirim pesan berasal dari customer memilih tab

contact yang berisi informasi kontak yang ada pada UD. Panca Usaha dan form

input pesan yang dapat di isi sebagai komunikasi antara customer dengan admin.

24

Gambar 4. 5 Activity Diagram Mengirim Pesan

4.4.5 Diagram Aktivitas Lihat Produk

Activity diagram info produk berawal dari guest yang mebuka website

company profile UD. Panca Usaha dan sistem akan menampilkan website dengan

halaman product.

Gambar 4. 6 Activity Diagram Lihat Product Category

25

4.4.6 Diagram Aktivitas Lihat Tentang Perusahaan

Activity diagram lihat profile perusahaan berasal dari customer memilih

menu bar yaitu menu about yang berisi mulai tentang perusahaan, visi dan misi.

Gambar 4. 7 Activity Diagram View Profile Company

4.4.7 Diagram Aktivitas Lihat Pesan

Activity diagram Lihat pesan berasal dari admin memilih menu bar yaitu

menu Lihat Pesan, yang kemudian admin bisa melihat tiap pesan yang masuk.

26

Gambar 4. 8 Activity Diagram Lihat Pesan

4.5 Class Diagram

Class diagram data production menggambarkan hubungan antara

beberapa class yang terdapat dalam satu package data production

4.5.1 Class Diagram Product

Gambar 4. 9 Class Diagram Data Product

Class diagram data produk menggambarkan hubungan antara beberapa

class yang terdapat dalam satu package data produk.

27

4.5.2 Class Diagram Profile

Gambar 4. 10 Class Diagram Profile Perusahaan

Class diagram data alumni menggambarkan hubungan antara beberapa

class yang terdapat dalam satu package data alumni.

4.5.3 Class Diagram User

Gambar 4. 11 Class Diagram Data User

Class diagram data user menggambarkan hubungan antara beberapa class

yang terdapat dalam satu package data user.

28

4.6 Struktur Tabel

Perancangan tabel yang akan digunakan berdasarkan class diagram yang

telah dibuat adalah sebagai berikut:

a. Tabel User

Nama tabel : User

Fungsi : Menyimpan data User

Primary Key : ID_User

Foreign Key : -

Tabel 4. 1 Struktur Data Tabel User

NO. NAMA FIELD TIPE PANJANG KETERANGAN

1 ID_User INT 5 PK

2 Gambar VARCHAR 255 -

3 Username VARCHAR 20 -

4 Password VARCHAR 6 -

5 Nama_Lengkap VARCHAR 100 -

b. Tabel Tentang Perusahaan

Nama tabel : tentang_perusahaan

Fungsi : Menyimpan data Tentang Perusahaan

Primary Key : ID_Tentang

Foreign Key : -

29

Tabel 4. 2 Struktur Data Tabel Tentang Perusahaan

NO. NAMA FIELD TIPE PANJANG KETERANGAN

1 ID_Tentang INT 5 PK

2 Tentang TEXT - -

3 Visi TEXT - -

4 Misi TEXT - -

c. Tabel Product Category

Nama tabel : Product_Category

Fungsi : Menyimpan data Produk

Primary Key : ID_PRO_CAT

Foreign Key : -

Tabel 4. 3 Struktur Data Tabel Product Category

NO. NAMA FIELD TIPE PANJANG KETERANGAN

1 ID_PRO_CAT INT 5 PK

2 NAMA_PRO_CAT VARCHAR 100 -

3 GAMBAR VARCHAR 255 -

4 KETERANGAN VARCHAR 255 -

5 KEMASAN VARCHAR 255 -

6 UKURAN VARCHAR 10 -

7 RASA VARCHAR 255

d. Tabel Pesan

Nama tabel : Pesan

30

Fungsi : Menyimpan data Pesan

Primary Key : ID_ Pesan

Foreign Key : -

Tabel 4. 4 Struktur Data Tabel Pesan

NO. NAMA FIELD TIPE PANJANG KETERANGAN

1 ID_ PESAN INT 5 PK

2 First_Name VARCHAR 100 -

3 Last_Name VARCHAR 100 -

4 Email VARCHAR 100 -

5 Subject VARCHAR 100 -

6 message TEXT - -

4.7 Kebutuhan Sistem

Kebutuhan sistem yang digunakan pada website company profile UD.

Panca Usaha meliputi kebutuhan perangkat keras (hardware) dan perangkat lunak

(software).

4.7.1 Perangkat Keras

Berikut minimal perangkat keras yang pengguna harus

mempersiapkan spesifikasi sebagai berikut:

a. Processor Intel Dual Core Minimal 1,5GHz.

b. RAM minimal 512MB, disarankan 1/2GB.

c. Kapasitas hardisk minimum 500GB.

d. VGA ONBOARD/AMD RADEON 512MB.

e. Keyboard.

31

f. Mouse atau device yang kompetibel.

g. Drive CD ROM atau DVD.

h. Peralatan jaringan (Ethernet Card, Kabel UTP, Modem dan Switch atau

Hub).

4.7.2 Perangkat Lunak

Berikut perangkat lunak yang bisa digunakan, yaitu:

a. OS Windows/Linux/Mac OS.

b. Google Crome/Mozilla/InternetExplorer.

c. XAMPP

d. Notepad++

4.8 Hasil Implementasi

Hasil implementasi ini dilakukan dengan tujuan menjelaskan penggunaan

aplikasi company profile berbasis web kepada masing-masing pengguna sesuai

dengan fungsi-fungsi yang dilakukannya. Adapun penjelasannya penggunaan

aplikasi company profile antara Admin dan guest sebagai berikut:

a. Tampilan Login admin

32

Gambar 4. 12 Tampilan Form Login

b. Tampilan admin Input Product Category

Gambar 4. 13 Tampilan Admin Input Product Category

33

Pada tampilan form admin input product category berisi nama produk,

keterangan, kemasan, ukuran, dan gambar product.

c. Tampilan admin Edit Product

Gambar 4. 14 Tampilan Admin Edit Product

Pada tampilan form admin Edit product category berisi nama produk,

keterangan, kemasan, ukuran, dan gambar product.

d. Tampilan admin Edit Tentang Perusahaan

34

Gambar 4. 15 Tampilan Admin Edit Tentang Perusahaan

Pada tampilan form admin Edit tentang perusahaan berisi tentang

perusahaan, visi, dan misi perusahaan.

e. Tampilan admin Input User

35

Gambar 4. 16 Tampilan Admin Input User

Pada tampilan form admin Input User berisi nama lengkap, username,

dan password, dan gambar.

f. Tampilan admin Edit User

Gambar 4. 17 Tampilan Admin Edit User

Pada tampilan form admin Edit User berisi nama lengkap, username, dan

password, dan gambar.

g. Tampilan admin View & Delete Product

36

Gambar 4. 18 Tampilan Admin View & Delete Product Category

Pada tampilan form admin Edit product catgory View & Delete Product

berisi list nama produk, keterangan, kemasan, ukuran, gambar product, dan Action

button edit & delete.

h. Tampilan admin View & Delete User

Gambar 4. 19 Tampilan Admin View & Delete User

Pada tampilan form admin Edit User View & Delete Product berisi list

nama lengkap, username, password, gambar, dan Action button edit & delete.

i. Tampilan admin Vew About

37

Gambar 4. 20 Tampilan Admin View About

Pada tampilan form admin View & Edit About berisi tentang perusahaan,

visi, misi, dan Action button edit.

j. Tampilan admin View & Delete Message

Gambar 4. 21 Tampilan Admin View & Delete Messages

Pada tampilan form admin View & Delete Message berisi first name, last

name, email, subject, messages, dan Action button edit.

k. Tampilan Home

38

Gambar 4. 22 Tampilan Home

Tampilan Home merupakan halaman awal dari web company profile.

l. Tampilan About

Gambar 4. 23 Tampilan About

Tampilan About merupakan halaman yang berisi identitas/tentang

perusahaan, visi, dan misi perusahaan.

m. Tampilan Product

39

Gambar 4. 24 Tampilan Product

Tampilan Product merupakan halaman yang berisi kategori produk yang

dijual oleh perusahaan.

n. Tampilan Contact

Gambar 4. 25 Tampilan Contact

Pada halaman contact pengunjung, pengunjung bisa melakukan interaksi

dengan admin dengan menggunakan form message yang tersedia, dengan syarat

harus mengisi kolom first name, last name, email, subject, message.