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.
18
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
b.
NO. NAMA FIELD TIPE
PANJANG KETERANGAN
1
ID_User
INT
5
2
Gambar
VARCHAR 255
-
3
Username
VARCHAR 20
-
4
Password
VARCHAR 6
-
5
Nama_Lengkap VARCHAR 100
PK
-
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
c.
NO.
NAMA FIELD TIPE
PANJANG
KETERANGAN
1
ID_Tentang
INT
5
PK
2
Tentang
TEXT -
-
3
Visi
TEXT -
-
4
Misi
TEXT -
-
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
d.
NO.
NAMA FIELD
TIPE
PANJANG KETERANGAN
1
ID_PRO_CAT
INT
5
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
Tabel Pesan Nama tabel
: Pesan
PK
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
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.
yang
pengguna
harus
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.
