BAB III ANALISIS DAN DESAIN SISTEM

(1)

BAB III

ANALISIS DAN DESAIN SISTEM

III.1. Analisis Masalah

Analisa masalah dilakukan guna mengetahui masalah-masalah yang terkait

didalam Sistem Informasi Tentang Pakaian Adat Dalam Pernikahan. Adapun

Sistem Informasi Tentang Pakaian Adat Dalam Pernikahan yang sedang berjalan

saat ini masih menggunakan sistem yang manual, yakni membuat buku yang

berisikan tentang Pakaian Adat Dalam Pernikahan dengan tujuan untuk dibaca

oleh masyarakat. Dengan sistem yang sedang berjalan saat ini, sistem tersebut

tidak dapat bekerja secara efisien dan efektif.

Sistem yang bekerja secara manual ini dapat menyebabkan kurangnya

pengetahuan tentang pakaian adat untuk masyarakat yang tidak membaca buku

tersebut. Untuk itu penulis membuat sebuah sistem baru yang sudah

terkomputerisasi untuk mempermudah masyarakat mengetahui informasi pakaian

adat dalam pernikahan dalam bentuk website secara online sehingga akses

penyampaian informasi dapat bekerja lebih efektif dan efisien.

III.2. Desain Sistem

Desain sistem pada penelitian ini menggunakan bahasa pemodelan UML

yang terdiri dari Use Case Diagram, Class Diagram, Activity Diagram dan

(2)

III.2.1. Use CaseDiagram

Adapun bentuk rancangan use case diagram yang akan dirancang adalah

seperti pada Gambar III.1 :

Gambar III.1 Use Case Diagram Pakaian Adat Pernikahan

III.2.2. Class Diagram

Rancangan kelas-kelas yang akan digunakan pada sistem yang akan

dirancang dapat dilihat pada gambar III.2 berikut : 27

(3)

Gambar III.2 Class Diagram

III.2.3. Activity Diagram

Proses yang telah digambarkan pada use case diagram di atas dijabarkan

dengan activity diagram :

1. Activity Diagram Data Login

Adapun activity diagram untuk melihat data form login sebagai berikut :

ADMIN SISTEM

Masukkan User Name dan Pasword

Cek User Name dan Password

Tampil Menu Pesan : user Name

dan Password Salah

Salah

Benar

(4)

2. Activity Diagram Melihat Suku

Aktivitas melihat informasi diterangkan dalam langkah-langkah state,

dimulai dari kegiatan mengklik menu Suku kemudian melihat informasi yang di

sajikan mengenai pakaian adat pernikahan yang ditunjukkan pada gambar III.4 :

ADMIN APLIKASI

Mulai

Baru

Input Data Suku Tampil Form Suku

Y Simpan ? Edit N Ubah Data Y Hapus Data N Simpan Y Batal N Data Dihapus

Gambar III.4 Activity Diagram Melihat Tentang Suku

3. Activity Diagram Melihat Pakaian Adat Pernikahan

Aktivitas melihat Pakaian Adat Pernikahan diterangkan dalam

langkah-langkah state, dimulai dari kegiatan mengklik menu artikel kemudian melihat

(5)

ADMIN APLIKASI

Mulai

Baru

Input Data Pakaian Adat Tampil Form Pakaian Adat

Gambar III. 5 Activity Diagram Melihat Pakaian Adat Pernikahan

4. Activity Diagram Melihat Artikel

Aktvitas Artikel diterangkan dalam langkah-langkah state, dimulai dari

dari kegiatan mengklik menu artikel kemudian melihat ditunjukkan pada gambar

III.6 berikut :

ADMIN APLIKASI

Mulai

Baru

Input Data Artikel Tampil Form Artikel

(6)

5. Activity Diagram Manajemen Admin

Aktivitas proses manajemen admin diterangkan dalam langkah-langkah

state yang ditunjukkan pada gambar III. 7 berikut :

ADMIN APLIKASI

Mulai

Baru

Input Data Manajemen admin Tampil Form Manajemen User

Gambar III. 7 Activity DiagramManajemen admin

III.2.4. Sequence Diagram

Rangkaian kegiatan pada setiap terjadi event sistem digambarkan pada

(7)

1. SequenceDiagram pada Halaman Login Ke Sistem

Serangkaian kegiatan saat terjadi event pada halaman Login dapat dilihat

pada gambar III.8 :

Gambar III.8 Sequence Diagram Halaman login

2. SequenceDiagram pada Halaman suku

Serangkaian kegiatan saat terjadi event pada halaman suku dapat dilihat pada

(8)

Gambar III.9 Sequence Diagram suku

3. SequenceDiagram pada Halaman pakaian adat pernikahan

Serangkaian kegiatan saat terjadi event pada halaman pakaian adat

pernikahan dapat dilihat pada gambar III.10 berikut :

Gambar III. 10 Sequence Diagram Halaman pakaian adat pernikahan

4. SequenceDiagram pada Halaman Artikel

Serangkaian kegiatan saat terjadi event pada halaman artikel dilihat pada

(9)

Gambar III.11 Sequence Diagram Halaman Artikel

5. SequenceDiagram pada Halaman Manajemen Admin

Serangkaian kegiatan saat terjadi event pada halaman manajemen user dapat

dilihat pada gambar III.12 berikut :

Gambar III.12 Sequence Diagram Halaman manajemen admin

6. SequenceDiagram pada Halaman User

Serangkaian kegiatan saat terjadi event pada halaman manajemen user dapa

(10)

Gambar III.13 Sequence Diagram Halaman User

III.3. Desain Basis Data III.3.1. Normalisasi

1. Bentuk tidak Normal dan Normal 1 (1NF)

Tidak normal Id Username Password kode Nama Asal Provinsi Suku Normal 1 (NF) Id* Username Password Kode* Nama Asal Provinsi Suku

Gambar III.14 Normalisasi Bentuk Tidak Normal dan Normal 1 (1NF)

(11)

Tabel Login Id* : int(10) Username :varchart (100) Password :varchart (200) Login() Kode* :varchart( 6) Nama :varchart (100) Asal :varchart (100) Provinsi :varchart (100) Tabel suku Kode* :varchart( 6) Nama :varchart (100) Suku :varchart (100) Provinsi :varchart (100)

Tabel pakaian adat

Simpan() Edit() Hapus() Simpan() Edit() Hhapus()

Gambar III.15 Normalisasi Bentuk Normal Tahap 2 (2NF)

3. Bentuk Normal Tahap 3 (3NF)

Tabel Login Id* : int(10) Username :varchart (100) Password :varchart (200) Login() Kode* :varchart( 6) Nama :varchart (100) Asal :varchart (100) Provinsi :varchart (100) Tabel suku Kode* :varchart( 6) Nama :varchart (100) Suku :varchart (100) Provinsi :varchart (100)

Tabel pakaian adat

Simpan() Edit() Hapus() Simpan() Edit() Hhapus()

Gambar III.16 Normalisasi Bentuk Normal Tahap 3 (3NF)

(12)

Setelah melakukan tahap normalisasi, maka tahap selanjutnya yang

dikerjakan yaitu merancang struktur tabel pada basis data sistem yang akan

dibuat, berikut ini merupakan rancangan struktur tabel tersebut :

1. Struktul Tabel Suku

Tabel Suku terdiri dari 5 kolom, yaitu kodesuku, namasuku, Asal, Struktur

tabelnya dapat dilihat pada Tabel III.1 dibawah ini :

Tabel III.1 Struktur Tabel Suku

Nama Tabel : tsuku

Kunci Primer : kodesuku

No. Nama Kolom Tipe Data Ukuran Primary Key

1. Kodesuku int 5 Ya

2. Namasuku varchar 50 -

3. Asal Varchar 100 -

4. Provinsi Varchar 50 -

2. Struktur Tabel Pakaian Adat

Tabel pakaian adat terdiri dari 6 kolom, yaitu kodepakaian, namapakaian,

sejarah, keterangan, kodesuku, gambar. Struktur tabelnya dapat dilihat pada Tabel

III.2 dibawah ini :

Tabel III.2 Struktur Tabel Pakaian Adat

Nama Tabel : tpakaianadat Kunci Primer : kodepakaian

No. Nama Kolom Tipe Data Ukuran Primary Key

1. Kodepakaian Varchar 5 Ya

(13)

3. Sejarah Text - -

4. Keterangan Text 100 -

5. Kodesuku Int 5 -

6. Gambar Varchar 50 -

3. Struktur Tabel Login

Tabel login terdiri dari 3 kolom, yaitu id_admin, username, password.

Struktur tabelnya dapat dilihat pada Tabel III.3 dibawah ini :

Tabel III.3 Struktur Tabel Login

Nama Tabel : tadmin

Kunci Primer : id

No. Nama Kolom Tipe Data Ukuran Primary Key 1. Id int 11 Ya 2. Username Varchar 30 - 3. Password Varchar 30 - 4. Nama Varchar 30 - 5. Jeniskelamin Varchar 9 - 6. Alamat Varchar 30 - 7. Telepon Varchar 30 - 8. Statususer Varchar 30 - 9. Gambar Varchar 30 -

4. Struktur Tabel Berita

Tabel berita terdiri dari 6 kolom, yaitu id, kategori, judul, isi, jam, gambar.

Struktur tabelnya dapat dilihat pada Tabel III.4 dibawah ini :

Nama Tabel : tberita

Kunci Primer : id

No. Nama Kolom Tipe Data Ukuran Primary Key

1. Id int 5 Ya

2. Kategori Varchar 10 -

3. Judul Text -

(14)

5. Jam Date -

6. Gambar Varchar 50 -

5. Struktur Tabel Pakaian Adat

Tabel pakaian adat terdiri dari 6 kolom, yaitu kodepakaian, namapakaian,

sejarah, keterangan, kodesuku, gambar. Struktur tabelnya dapat dilihat pada Tabel

III. 5 dibawah ini :

Nama Tabel : tpakaianadat Kunci Primer : kodepakaian

No. Nama Kolom Tipe Data Ukuran Primary Key

1. Kodepakaian Varchar 5 Ya 2. Namapakaian Varchar 50 - 3. Sejarah Text - - 4. Keterangan Text 100 - 5. Kodesuku Int 5 - 6. namasuku Varchar 50 - 7. asalsuku varchar 100 - 8. provinsi varchar 50 - 9 gambar varchar 50 -

III.3.3. Desain User Interface

Setelah melakukan tahap desain tabel, maka tahap selanjutnya yang

dikerjakan yaitu merancang desain user interface sistem yang akan dibuat, berikut

ini merupakan desain user interface tersebut :

III.3.3.1. DesainOutput

Berikut ini adalah rancangan tampilan desain yang akan dihasilkan oleh

(15)

1. Desain Halaman Home

Desain Halaman Home dapat dilihat pada gambar III.17 berikut :

Sistem Informasi Pakaian Adat Dalam Pernikahan

LOGIN ADMIN User Name Password INFORMASI Home Profil

Daftar Pakaian Adat

Judul : xxxxxxxx

Pakaian adat |Tanggal Hosting | Jam

Gambar Xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxx. Xxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxSelengkapnya Judul : xxxxxxxx

Pakaian adat|Tanggal Hosting | Jam

Xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

(16)

Gambar III.25 Desain Halaman Beranda

2. Desain Halaman Tentang Profil

Desain Halaman Profil dapat dilihat pada gambar III.18berikut:

Sistem Informasi Tentang Pakaian Adat Dalam Pernikahan

INFORMASI Home

Profil

Daftar Pakaian Adat

Pakaian Adat Gambar

(17)

Gambar III.18 Desain Halaman Tentang Profil

3. Desain Halaman Daftar Pakaian Adat

Desain Halaman Daftar Pakaian Adat dapat dilihat pada gambar III.19 berikut :

INFORMASI

Home

Profil

Judul : xxxxxxxx

Xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxx. Xxxxxxxxxxxxxxxxxxxxxx Gambar

(18)

Gambar III.29 Desain Halaman Daftar Budaya 6. Desain Halaman Login Admin

Desain Halaman Login Admin dapat dilihat pada gambar III.30 be

:

Gambar III.19 Desain Halaman Daftar Pakaian

III.3.3.2. Desain Input

Berikut ini adalah rancangan atau desain input sebagai antarmuka pengguna:

(19)

Desain Halaman Daftar Suku dapat dilihat pada gambar III.20 berikut :

Gambar III.20 Desain Halaman Daftar Suku

2. Desain Input suku

Desain Input suku dapat dilihat pada gambar III.21 berikut: Sistem Informasi Tentang Pakaian Adat Dalam Pernikahan

LOGIN ADMIN

Foto Admin Selamat Datang di Menu

Administrator Untuk xxxxxxx Suku Pakaian Adat Artikel Manajemen User Logout INFORMASI Home Profil

Daftar Pakaian Adat

KALENDER ARTIKEL  XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXX  XXXXXXXXXXXX XXXXXXXXXXXX XXXXX

Daftar Suku Di Indonesia

+

Kode Nama Asal Provinsi Proses

Edit-Hapus Edit-Hapus Edit-Hapus Edit-Hapus Edit-Hapus Edit-Hapus Edit-Hapus Edit-Hapus Edit-Hapus Edit-Hapus Edit-Hapus Edit-Hapus

Sistem Informasi Tentang Pakaian Adat Dalam Pernikahan Gambar

(20)

Gambar III.21 Desain Input Suku

3. Desain Halaman Daftar Pakaian Adat

LOGIN ADMIN

Daftar Pakaian Adat

KALENDER ARTIKEL  XXXXXXXXXXX XXXXXXXXXXX XXXXXXX  XXXXXXXXXXX XXXXX

FORM INPUT SUKU Nama Suku :

Asal :

(21)

Desain Halaman Daftar Pakaian Adat dapat dilihat pada gambar

III.22 berikut :

Gambar III.22 Desain Halaman Daftar Pakaian

LOGIN ADMIN

Fot o Admin Selamat Datang di Menu

Administrator Untuk xxxxxx Suku Pakaian Adat Artikel Manajemen User Logout INFORMASI Home Profil Daftar Pakaian KALENDER ARTIKEL  XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXX  XXXXXXXXXXXX XXXXXXXXXXXX XXXXX

Daftar Pakaian Adat

+

Kode Nama Suku Provinsi Proses

Edit-Hapus Edit-Hapus Edit-Hapus Edit-Hapus Edit-Hapus Edit-Hapus Edit-Hapus Edit-Hapus Edit-Hapus Edit-Hapus Edit-Hapus Edit-Hapus Gambar

(22)

4. Desain Input Pakaian Adat

Desain Input Pakaian Adat dapat dilihat pada gambar III.23 Berikut :

Gambar III.23 Desain Input Pakaian Adat

LOGIN ADMIN

Daftar Pakaian Adat

Form Input Pakaian Adat

Nama Pakaian Adat :

Sejarah : Keterangan : Nama Suku : Gambar : Telusuri Simpan Reset Gambar

(23)

5. Desain Halaman Artikel

Desain Halaman Artikel dapat dilihat pada gambar III.24

LOGIN ADMIN

Fot o Admin

Selamat Datang di Menu Administrator Untuk xxxxxxx Suku Pakaian Adat Artikel Manajemen User Logout INFORMASI Home Profil

Daftar Pakaian Adat

KALENDER ARTIKEL  XXXXXXXXXXX XXXXXXXXXXX XXXXXXXXX  XXXXXXXXXXX XXXXXXXXXXX XXXXX  XXXXXXXXXXX XXXXXXXXXXX DAFTAR BERITA

+

ID KATEGORI JUDUL ISI PROSES Edit-Hapus Edit-Hapus Edit-Hapus Edit-Hapus Edit-Hapus Edit-Hapus Edit-Hapus Edit-Hapus Edit-Hapus Edit-Hapus Edit-Hapus Edit-Hapus Gambar

(24)

Gambar III.24 Desain Halaman Daftar Berita

6. Desain Input Berita

Desain Input Berita dapat dilihat pada gambar III.25

LOGIN ADMIN

Daftar Pakaian Adat

FORM INPUT Berita Kategori Berita/Artikel : Judul Berita / Artikel : Isi Berita/Artikel : Foto : Telusuri Reset Simpan Gambar

(25)

Gambar III.25 Desain Input Berita

7. Desain Halaman Data Admin

Desain Halaman List Data Admin dapat dilihat pada gambar III.26

berikut :

Gambar III.35 Desain Halaman Tabel Budaya

LOGIN ADMIN

Administrator Untuk xxxxxxx Suku Pakaian Artikel Manajemen User Logout INFORMASI Home Profil

Daftar Pakaian Adat

KALENDER ARTIKEL  XXXXXXXXXXX XXXXXXXXXXX XXXXXXXXX  XXXXXXXXXXX XXXXXXXXXXX XXXXX  XXXXXXXXXXX DAFTAR ADMIN

+

ID NAMA ALAMAT TELP USER

NAME PASS

WORD PROSES

(26)

Gambar III.26. Desain Halaman Admin

8. Desain Input Admin

Desain Input Admin dapat dilihat pada gambar III. 27 berikut :

Gambar III.27. Desain Halaman Admin

LOGIN ADMIN

Administrator Untuk xxxxxxx Suku Pakaian Adat Artikel Manajemen User Logout INFORMASI Home Profil Daftar Pakaian KALENDER ARTIKEL  XXXXXXXXXXX XXXXXXXXXXX XXXXXXXXX  XXXXXXXXXXX XXXXXXXXXXX XXXXX  XXXXXXXXXXX

FORM INPUT ADMIN Nama : Jenis Kelamin : Alamat : Telepon : User Name : Password : Status User : Gambar : _Telusuri Simpan Reset Gambar

(27)