BAB IV ANALISIS DAN PERANCANGAN

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 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.