( 0 ^ (^ (^ 3. RANCANGAN SISTEM

(1)

Untuk membuat web site ensiklopedi budaya indonesia, langkah pertama yang dilakukan adalah perancangan sistem. Perancangan sistem ini meliputi perancangan struktur web, desain halaman, desain database dan visual modeling.

3.1. Struktur Web

Sebagai rancangan awal digambarkan struktur dari halaman-halaman yang akan ditampilkan. Diagram Struktur Web ditunjukkan pada gambar 3.1

©

1 1 1 1

13 14

T

0

5

0 0 0 0

(§0 ^ (^©(^

29 30 31 32 33 . 34

26 _____ 27 28

Gambar 3.1. Struktur Web

Keterangan mengenai struktur web pada gambar 3.1 ditunjukkan pada tabel keterangan (tabel 3.1). Kolom no menunjukkan no pada diagram, kolom nama halaman menunjukkan nama halaman sesuai dengan nomor, kolom keterangan isi menunjukkan keterangan dari halaman sesuai dengan nomor.

20

(2)

1 Home - Keterangan/abstraksi isi Web Menu masuk, administrator - Pilihan bahasa

2 Login - Administrator login dan password - Menu submit, ke home

3 Peta - Peta Indonesia

- Daftar propinsi

- Search area (untuk searching) - Menu ke home

4 Update - Menu input data, hapus data, rubah data, rubah password. Logout

5 Propinsi - Daftar suku

- Menu ke home, ke peta, detail suku

6 Input - Menu form input suku, form input pakaian, form input tarian, form input rumah, hapus Data, rubah data, rubah password, logout

- Default input suku

7 Rubah - Daftar suku

- Search area (untuk searching

- Menu detail suku, input data, hapus data, rubah password, logout

8 Hapus - Daftar suku

- Search area (imtuk searching)

- Multiple Deleting Checkbox (untuk hapus beberapa suku secara bersama)

- Menu detail suku, input data, rubah data, rubah password, logout

9 Rubah Password - Form rubah password

- Menu input data, hapus data, rubah data, logout

10 Suku - Informasi suku

- Menu lihat pakaian, lihat tarian, lihat rumah, ke peta, ke propinsi, ke home

11 Form input suku - Form input suku

- Menu form input pakaian, form input tarian, form input rumah, hapus data, rubah data, rubah password, logout

12 Form input pakaian - Form input pakaian

- Menu form input suku, form input tarian, form input rumah, hapus data, rubah data, rubah password, logout

13 Form input tarian - Form input tarian

- Menu form input suku, form input pakaian, form

input rumah, hapus data, rubah data, rubah

password, logout

(3)

14 Form input rumah - Form input rumah

- Menu form input suku, form input pakaian, form input rumah, hapus data, rubah data, rubah password, logout

15 Form rubah suku - Form rubah suku

- Menu rubah pakaian, rubah tarian, rubah rumah, rubah data, input data, hapus data, logout

16 Form hapus suku - Form hapus suku

- Menu hapus pakaian, hapus tarian, rubah rumah, rubah data, input data, hapus data, logout

17 Lihat pakaian - Daftar pakaian adat

- Menu detail pakaian, suku, lihat tarian, lihat rumah, ke peta, ke propinsi, ke home

18 Lihat tarian - Daftar tarian adat

- Menu detail tarian, suku, lihat pakaian, lihat rumah, ke peta, ke propinsi, ke home

19 Lihat rumah - Daftar rumah adat

- Menu detail rumah, suku, lihat tarian, lihat pakaian, ke peta, ke propinsi, ke home

20 Rubah pakaian - Daftar pakaian adat

- Menu rubah suku, rubah tarian, rubah rumah, rubah data, input data, hapus data, logout

21 Rubah tarian - Daftar tarian adat

- Menu rubah pakaian, rubah suku, rubah rumah, rubah data, input data, hapus data, logout

22 Rubah rumah - Daftar rumah adat

- Menu rubah pakaian, rubah tarian, rubah suku, rubah data, input data, hapus data, logout

23 Hapus pakaian - Daftar pakaian adat

- Menu hapus suku, hapus tarian, hapus rumah, rubah data, input data, hapus data, logout

24 Hapus tarian Daftar tarian adat

- Menu hapus suku, hapus suku, hapus rumah, rubah data, input data, hapus data, logout

25 Hapus rumah - Daftar rumah adat

- Menu hapus suku, hapus tarian, hapus suku, rubah data, input data, hapus data, logout

26 Lihat detail pakaian - Tnformasi pakaian adat - Menu lihat pakaian 27 Lihat detail tarian - Informasi tarian adat

- Menu lihat tarian 28 Lihat detail rumah - Informasi rumah adat

- Menu lihat rumah

(4)

29 Form rubah pakaian - Form rubah pakaian - Menu rubah pakaian 30 Form rubah tarian - Form rubah tarian

- Menu rubah tarian 31 Form rubah rumah - Form rubah rumah - Menu rubah rumah 1 32

i

Form hapus pakaian - Form hapus pakaian - Menu hapus pakaian

i

33 !

Form hapus tarian - Form hapus tarian - Menu hapus tarian

i

34 1 Form hapus rumah - Form hapus rumah - Menu hapus rumah

3.2. Desain Halaman

Desain halaman secara visual digambarkan pada gambar 3.2 sampai dengan gambar 3.13 berikut ini.

GAMBAR SELAMAT DATANG

& KETERANGAN WEB

MENU;

Pilihan bahasa Masuk

administyrator

Gambar 3.2. Rancangan Halaman Home

(5)

JUDUL & KETERANGAN HALAMAN

MENU LOGIN:

Input Username Input Password Submit

Batal

Gambar 3.3. Rancangan Halaman Login

JUDUL & KETERANGAN HALAMAN

GAMBAR SELAMAT DATANG ADMINISTRATOR

MENU ADMINISTRATOR

Input Data Rubah Data Hapus Data Rubah Password Logout

Gambar 3.4. Rancangan Halaman Update

(6)

JUDUL HALAMAN

FORM INPUT

Gambar 3.5. Rancangan Halaman Form Input

JUDUL HALAMAN ^MENU PENCARIAN ^& ^FASILITAS TIPS & KETERANGAN

DAFTAR SUKU YANG AKAN DIHAPUS (bisa penghapusan beberapa data sekaligus)

Gambar 3.6. Rancangan Halaman Hapus

(7)

JUDUL HALAMAN

KETERANGANDATA

Tombol hapus '

Gambar 3.7. Rancangan Halaman Form Hapus

JUDUL HALAMAN ^MENU PENCARIAN ^& ^FASELITAS TIPS & KETERANGAN

DAFTAR SUKU YANG AKAN DIRUBAH

Gambar 3.8. Rancangan Halaman Rubah

(8)

JUDUL HALAMAN

MENU : rubah suku, rubah pakaian, nibah tarian,

rubah rumah MENU ; rubah, hapus, input,

logout

FORM RUBAH

Gambar 3.9. Rancangan Halaman Form Rubah

Username Password Confirm Submit Batal

Gambar 3.10. Rancangan Halaman Rubah Password

(9)

TIPS & KETERANGAN

GAMBARPETA

DAFTARPROPINSI

Gambar 3.11. Rancangan Halaman Peta

JUDUL HALAMAN &

KETERANGAN

DAFTAR SUKU

Gambar 3.12. Rancangan Halaman Propinsi

(10)

JUDUL HALAMAN &

KETERANGAN

Gambar 3.13. Rancangan Halaman Informasi

3.3. Desain Database 3.3.1. label Awal

Keseluruhan data yang dikumpulkan yang meliputi data nama suku, narna propinsi, keterangan suku, nama pakaian adat, keterangan pakaian adat, gambar pakaian adat, nama tarian adat, keterangan tarian adat, gambar tarian adat, nama rumah adat, keterangan rumah adat, gambar rumah adat dapat ditabelkan seperti ditunjukkan pada tabel 3.2.

Tabel 3.2 Gambaran Tabel Awal

Nama Nama

K etSuku Pakaian

Suku Propinsi Nama Pakaian Ket Pakaian Gmb Pakaian

Pakaian

Nama Pakaian Ket Pakaian Gmb Pakaian

Rumah

Nama Rumah Ket Rumah Gmb Rumah

(11)

tabel yang tidak mengandung pengulangan group data, semua keys attribute sudah didefinisikan, semua attribute dependent pada primary key.

Dari definisi diatas karena tabel awal yang sudah ada belum memiliki primary key yang merupakan syarat untuk memenuhi Normalisasi bentuk Pertama, maka tabel yang akan digunakan (tabel 3.2) diubah dan diberikan atribut yang sesuai (primary key) agar memenuhi aturan dari bentuk normal pertama. Tabel yang jumlah field-nyz terlalu banyak dipecah menjadi beberapa tabel agar mudah melakukan akses ke tabel yang dimaksud. Gambaran dari hasil bentuk normal pertama adalah sebagai berikut:

Tabel 3.3 Suku INF

Field Atribut

NamaSuku Primary Key

Nama Propinsi Ket Suku

Tabel 3.4 Pakaian INF

Field Atribut

Nama Pakaian Primary Key Ket Pakaian

Gmb Pakaian

Tabel 3.5 1"arian INF

Field Atribut

Nama Tarian Primary Key Ket Tarian

Gmb Tarian

Tabel 3.6 Rumah INF

Field Atribut

Nama Rumah Primary Key

Ket Rumah

Gmb Rumah

(12)

adalah tabel sudah dalam bentuk nonnalisasi pertama, setiap field bukan kunci bergantung sepenuhnya pada kunci (primary key). Dengan kata lain, tidak ada non kunci yang bergantung pada sebagian komponen-komponen kunci.

Sesuai dengan aturan pada normal bentuk kedua, maka akan diubah sususan dari masing-masing field yang merupakan relasi dari tabel yang lain. Tabel yang merupakah tabel detail akan diberi sebuah field yang merupakan foreign key untuk menghubungkan tabel detail dengan tabel master. Hasil dari tabel normal bentuk pertama akan diubah sesuai dengan aturan yang ada pada nonnalisasi bentuk kedua, dan hasil normalisasi bentuk kedua adalah sebagai berikut:

Tabel 3.7 Suku2NF

Field Atribut

NamaSuku Primary Key

Nama Propinsi Ket Suku

Tabel 3.8 Pakaian 2NF

Field Atribut

Nama Pakaian Primary Key

Nama Suku Foreign Key

Ket Pakaian Gmb Pakaian

Tabel 3.91 'arian 2NF

Field Atribut

Nama Tarian Primary Key

Nama Suku Foreign Key

Ket Tarian Gmb Tarian

Tabel 3.10] lumah 2NF

Field Atribut

Nama Rumah Primary Key

Nama Suku Foreign Key

Ket Rumah

Gmb Rumah

(13)

digunakan dalam dua tabel dengan struktur yang sama. Masing-masing tabel akan menyimpan data dalam bahasa Inggris dan bahasa Indonesia. Untuk lebih mudah memahami sistem yang akan dibuat maka akan dijelaskan pada bagian Visual Modeling.

3.3.4. Entity Relationship Diagram (ERD)

Entity Relationship Diagram digunakan untuk menggambarkan hubungan atau relasi dari tabel-tabel yang sudah dinoraialisasikan di atas. Entity Relationship Diagram meliputi Conceptual Data Model yang menunjukkan hubungan antar tabel secara konsep (belum ditunjukkan field-field yang menghubungkan) dan Physical Data Model yang menampilkan hubungan antar tabel disertai dengan field-field yang menghubungkannya (foreign key).

Suku

<M>

mempunyai pakaian Nam aSuku <pi> A15

Ket.Suku T X T

Nam a_Propina A15

1

' "1...

Mama Suku <pi>

mempunyai tarian mempun rai rumah

ta ria n N a m a Ta ria n <pi> A15 Ket_Tarian T X T G m b _Ta ria n A50

<M>

Pakaian

Nama Pakaian <pi> A15 <M>

Ket_Pakalan T X T

Gmb_Pakaian A50

Nama Pakaian <pi>

N a m a Ta ria n <pi>

Rumah Nama Rumah <pl> A15

Ket_Rum ah T X T

G m b _R um ah A50

Nama Rumah <pl>

_ _ _ _ J

Gambar 3.14. Conceptual Data Model

(14)

Ket_Suku N O T E Nama_Propinsi CHAR(15)

FK TA R IA N M EM PUNY Al SUK U

Ket_Pakaian N O T E Gmb_Pakaian CHAR(50)

F K _R U M A H _M E M P U N Y A I_S U K U

Tarian

Nama Tarian CHAR(15) <p(e>

Nama Suku CHAR(15) <fk?

Ket_Tarian N O T E G m b_Tarian CHAR(50)

Rumah

Nama Rumah CHAR(15) <pk?>

Nama Suku CHAR(15) <fk>

Ket_Rumah N O T E Gm b_Rum ah CHAR(50)

Gambar 3.15. Physical Data Model

3.3.5. Data Flow Diagram (DFD)

Data Flow Diagram menggambarkan alur data yang digunakan dalam sistem.

Valiasi login & password

Login & password Rubah password

Update data

Pelayanan Web Site

V ,

Pencarian

Hasil pencarian

Pencarian

Administrator

^ Hasil pencarian

User

Gambar 3.16. Context Diagram

(15)

Gambar 3.17. Data Flow Diagram Level 0

3.4. Visual Modeling

Definisi dari Visual Modeling adalah cara berpikir mengenai suatu masalah menggunakan model yang terorganisasi dalam suatu ide-ide nyata. Pemodelan yang akan dilakukan dengan menggunakan bantuan software Rational Rose Enterprise Edition dan notasi yang digunakan berdasarkan standard The Unified Modeling Language (UML). Pemodelan ini meliputi pembuatan Use Case Diagram, Flaw event, Class Diagram, Relational Diagram, Collaboration Diagram, Sequence Diagram. Diagram-diagram tersebut menunjukkan relasi dan interaksi antar object yang ada dalam sistem. Selain itu dari diagram-diagram tersebut bisa diketahui bagaimana sistem dan actor (dalam hal ini user dan administrator') saling berhubungan secara langsung.

Actor yang terlibat dalam sistem ini adalah user dan administrator. User

berperan dalam melakukan searching dan administrator melakukan kegiatan

maintain data.

(16)

Administrator Login Maintain Data

M aintaining DataQ

Gambar 3,18. Use Case Diagram

3.4.2. Flow Event

Flow event untuk use case diagram (gambar 3.18) ditunjukkan pada tabel 3.2 di bawah ini. Flow event ditulis berdasarkan apa yang seharusnya dilakukan oleh sistem, bukan bagaimana sistem tersebut bekeqa. Flow event meliputi:

Tabel 3.11. Tabel Flow Event 1.0. Flow Events untuk Login

1.1. Preconditions

User harus memilih menu administrator saat di halaman “home”.

1.2. Main Flow

Event ini dimulai pada halaman “login”. User memasukkan user name dan password (E-1).

1.3. Alternative Flow

E-1 ; User name dan password salah. Use case dimulai lagi.

(17)

User name dan password yang dimasukkan pada “login” benar.

2.2. Main Flow

Administrator memilih menu untuk : Tambah data, Hapus data, Rubah data, Rubah Password, Logout

Jika Tambah data, S-1 : Input Data Jika Hapus data, S-2 ; Hapus Data Jika Rubah data, S-3 : Rubah Data

Jika Rubah password, S-4 : Rubah Password Jika Logout, S-5 : Logout

2.3. Subflows S-1 : Input Data

Setelah administrator melakukan pengisian data, sistem melakukan penyimpanan data(E-l).

S -2 ; Hapus Data

Sistem menghapus data-data yang dipilih oleh administrator.

S-3 : Rubah Data

Administrator melakukan perubahan terhadap data, sistem menyimpan perubahan yang dilakukan (E-1).

S-3 : Rubah Password

Administrator melakukan perubahan password yang ada S -4 : Logout

Administrator logout, kembali ke halaman login.

2.4. Alternative Flows

E-1 : Data yang diinputkan tidak valid, sistem menginformasikan bahwa data tidak valid.

3.0. Flow Events untuk Penelusuran Data Melalui Peta 3.1. Preconditions

User hams memilih menu masuk saat di halaman “home”.

3.2. Main Flow

Event ini dimulai pada halaman “peta”. User memilih propinsi dari gambar peta atau daftar propinsi yang ada. Setelah itu sistem akan menampilkan halaman “propinsi”. Pada halaman “propinsi” ini terdapat daftar suku-suku yang ada di propinsi sesuai dengan yang dipilih pada peta atau daftar propinsi yang ada pada halaman “peta” (E-1).

Jika ingin melihat keterangan suku, maka S-1 : keterangan suku Jika melihat propinsi lain, maka S-2 : pilih propinsi (halaman “peta”)

Jika ingin kembali ke home, maka S-3 : kembali ke home (halaman

“home”)

(18)

S-1 : Sistem menampilkan informasi mengenai suku yang sudah dipilih.

S-2 : Sistem menampil halaman “peta” . User bisa memilih lagi propinsi melalui peta maupun daftar propinsi yang tersedia.

S-3 : Sistem menampilkan halaman “home”. User kembali lagi dari awal.

3.4. Alternative flows

E-1 : Data suku tidak ada, tampil halaman “propinsi” yang berisi pesan bahwa data tidak ada.

4.0. Flow Events untuk Penelusuran Data Melalui Search 4.1. Preconditions

Use memilih kriteria pencarian. Kemudian memasukkan kata kunci.

4.2. Main Flow

Akan ditampilkan informasi sesuai dengan kriteria yang dipilih dan kata kunci yang dimasukkan (E-1).

4.3. Alternative flows

E-1 : Data suku tidak ada, tampil pesan yang menginformasikan bahwa data tidak ada.

3.4.3. Class Diagram dan Relational Diagram

Class diagram menunjukkan seluruh class yang ada dalam sistem.

Relational diagram menunjukkan relasi yang ada di antara class-class tersebut.

Diagram (gambar 3.19) di bawah ini menunjukkan seluruh Class yang ada dalam sistem dan sekaligus relasi yang teijadi di antara class-class tersebut.

Infofmasi pakaian adat

^ a m a pakaian

^>keterangan pakaian

^ i > n a m a s u k u g a m b a r pakaian

Oinpuf data pakaianQ

%ubah data pakaianQ

“^ p u s data p^aianQ Otampil infbnnasiO

0..n

0..n_

Infbnnasi tarian adat

^>namalarian l^e te ra n g a n tarign

^>nama suku 1 ^-gam bar tarian

^ n p u t data taiianO

<>aibah data tarianO

“^ a p u s data tarianO

“ta m p il intbmiasiO

j Inforniasi suku --- ----bitbrmasi aimati adat i

^>nama suku

^ a m a propinsi

^ e te r a n g a n suku

l^>nama rumah

^>keterangan rumali

^ a m a suku

^>ganit>ar suku

^n p u t data aimahO

<>nrt)ah data oimatiO

% a p u s data rumahO Otampil infcxtnasiO

‘^nput data sukuQ 1 0..n

^ b a t i data sukuQ

% a p u s data sukuQ

■^•tampil infomiasiO 1

Passvwitf

^ u s e r name iSbpassword

Oinput passwordO

^ l i d a t e passwordQ

Gambar 3.19. Class Diagram dan Relational Diagram

(19)

use case yang disvisun berdasarkan urutan waktu. Penggambaran object dan classes meliputi skenario dan urutan pertukaran informasi serta tugas antar object yang diperlukan untuk merealisasikan fungsi dari skenario tersebut.

Setiap object mempunyai masing-masing timeline yang direpresentasikan dengan garis putus-putus di bawahnya. Tugas dan informasi yang disampaikan antar object direpresentasikan dengan anak panah yang dimulai dari client (pengirim pesan) ke supplier (penerima pesan).

Sequence diagram yang akan dimodelkan adalah sequence diagram untuk login (gambar 3.37), sequence diagram untuk maintain data (gambar 3.38), sequence diagram imtuk searching melaiui peta (gambar 3.39), dan sequence diagram untuk searching melaiui search (gambar 3.40).

\

: V alida si u s e r :P a s s w o f d

1; Input p a 9 S W 0 fd () I 2 - ae» D a s s w o td O I

---° > ^ '3 ! validate p a s s w o rd ()

Gambar 3.20. Sequence Diagram untuk administrator login

(20)

H , J O

: Uixiale option jpput optioQ In»pnpasi

[

1 :d is p la y ( )

I , ^ ^

input data suku( j

4: input (jata pakaian()

S: Input data tarian( |)

6; it^ut 0ata rum aty)

7: n i> a h S t a s u k u ()

11: liapus

- > - 6 : n*ah data pakaian()

a rubah d ^ a t a ia n ()

jlf t mbah data lu m a K )

3 sukut 1

____ J.J12: tubah d ^ a p a k a i a ^ 13: tiapus c ata tarian()

Il4: hapushapus datarum ah()

->i

Gambar 3.21. Sequence Diagram untuk maintain data

o

rU s e r : Peta

] 1: pilih p ro p in s l()

L--- ---=■

. : . ln(i3niH3^isuKu infonn^i i^ a i a t t .;..lQ*m)as,IJiarian tn& o Tia jU im a iij adal

2; tampil informasi() '

... ... .. inSjim asin I

4: tam p il |nfoiTTiasK)

{ 5: tampil Informasi

Gambar 3.22. Sequence Diagram untuk searching melalui peta

(21)

...Usg ■■ S e a re h in q a rea : m ibcm asi pakaian : Infom iasi lu m a h a da l

1 :| S e t seatch'm g option|() |

2 : tam pil ln t> n n a s i( )l

3: tampil irjformasK)

I ^

14 : ta m p il ittlbfm asi(|)

T 5 ; tam|iit in f o m ia s i()

Gambar 3.23. Sequence Diagram untuk searching melalui search

3.4.5. Collaboration Diagram

Collaboration diagram menggambarkan interaksi antar object yang tersusun berdasarkan link antara masing-masing object tersebut. Collaboration diagram yang akan dimodelkan adalah collaboration diagram untuk login (gambar 3.41), collaboration diagram untuk maintain data (gambar 3.42), collaboration diagram xmtuk searching melalui peta (gambar 3.43), dan collaboration diagram untuk searching me\B\\xi search (gambar 3.44).

3 : validate p a s s v m r d ()

V. Input p a ss w o rtl() --- >

2 : get p a s s w o rd () '

--->

: Administrator : V a lld a s i u s e r ; P a s s v w )rd

Gambar 3.24. Collaboration Diagram untuk login

(22)

Gambar 3.25. Collaboration Diagram untuk maintain data

l:p i H h p r o p i n s ( ( )

--->

; U s e r

:P e t a

2 ; ta m p il in f e n n a s K )

3 : tam pil ln la m ia s i()

<---

: In lbnnasi pakaian adat

5: tam pil in fo rm a s K )

--->

: Infbiniasi s u k u : M b r m a s l o im a h adat

4 : ta m p il infom na sK )

: Informasi tartan adat

Gambar 3.26. Collaboration Diagram untuk searching melalui peta

(23)

: Irformasi tarian adat

4: tampil informasK) ^

1: Set searching option() ^ ^ 5; tampil infomiasi()

-—> --- >

; User Searching area : Wbntiasl tumah adat

' 3: tampil in1brmasi() V

2; tampil infbrmasi()

: Infannasi pakaian adat_______

: Infomtasi suku