Arsitektur Sistem Deployment Diagram Keterangan Component Dan Deployment Diagram Analisis Kebutuhan Fungsional

3.1.5.5.3 Use Case Diagram

Gambar III.5 Use case diagram

3.1.5.5.4 Skenario Use Case

Berdasarkan use case diagram di atas maka dibuatlah skenario dari tiap proses yang ada pada use case diagram tersebut. Pada tabel III.4 menggambarkan skenario proses penyajian info sejarah Saung Angklung Udjo. Tabel III.4 Skenario use case proses penyajian info sejarah Saung Angklung Udjo Nama Use Case : Penyajian Info Sejarah Saung Angklung Udjo Skenario : Aksi Pengunjung Respon Sistem Database Skenario Normal 1. Masuk aplikasi 2. Memilih info Saung Angklung Udjo 3. Memilih sejarah Saung Angklung Udjo 4. Menyediakan Data Untuk Web Service 5. Mengambil data ke database 6. Data hasil parsing 7. Mengecek ketersediaan koneksi internet 8. Menampilkan data hasil parsing sejarah Saung Angklung Udjo 9. Memilih sejarah berdasar judul konten 10. Menampilkan data sejarah Saung Angklung Udjo berdasar judul konten Skenario Alternatif : Tidak Tersedia Koneksi Internet 1. Masuk aplikasi 2. Memilih info Saung Angklung Udjo 3. Memilih sejarah Saung Angklung Udjo 4. Menyediakan Data Untuk Web Service 5. Mengambil data ke database 6. Data hasil parsing 7. Mengecek ketersediaan koneksi internet 8. Tidak menampilkan data hasil parsing sejarah Saung Angklung Udjo 9. Mengatur koneksi internet 10. Mengecek ketersediaan koneksi internet 11. Menampilkan data hasil parsing sejarah Saung Angklung Udjo 12. Memilih sejarah berdasar judul konten 13. Menampilkan data sejarah Saung Angklung Udjo berdasar judul konten Pada tabel III.5 menggambarkan skenario proses penyajian info event Saung Angklung Udjo. Tabel III.5 Skenario use case proses penyajian info event Saung Angklung Udjo Nama Use Case : Penyajian Info Event Saung Angklung Udjo Skenario : Aksi Pengunjung Respon Sistem Database Skenario Normal 1. Masuk aplikasi 2. Memilih info Saung Angklung Udjo 3. Memilih event Saung Angklung Udjo 4. Menyediakan Data Untuk Web Service 5. Mengambil data ke database 6. Data hasil parsing 7. Mengecek ketersediaan koneksi internet 8. Menampilkan data hasil parsing event Saung Angklung Udjo 9. Memilih event berdasar judul konten 10. Menampilkan data event Saung Angklung Udjo berdasar judul konten Skenario Alternatif : Tidak Tersedia Koneksi Internet 1. Masuk aplikasi 2. Memilih info Saung Angklung Udjo 3. Memilih event Saung Angklung Udjo 4. Menyediakan Data Untuk Web Service 5. Mengambil data ke database 6. Data hasil parsing 7. Mengecek ketersediaan koneksi internet 8. Tidak menampilkan data hasil parsing event Saung Angklung Udjo 9. Mengatur koneksi internet 10. Mengecek ketersediaan koneksi internet 11. Menampilkan data hasil parsing event Saung Angklung Udjo 12. Memilih event berdasar judul konten 13. Menampilkan data event Saung Angklung Udjo berdasar judul konten Pada tabel III.6 menggambarkan skenario proses penyajian info suvenir Saung Angklung Udjo. Tabel III.6 Skenario use case proses penyajian info suvenir Saung Angklung Udjo Nama Use Case : Penyajian Info Souvenir Saung Angklung Udjo Skenario : Aksi Pengunjung Respon Sistem Database Skenario Normal 1. Masuk aplikasi 2. Memilih info Saung Angklung Udjo 3. Memilih Info Suvenir 4. Menyediakan Data Untuk Web Service 5. Mengambil data ke database 6. Data hasil parsing 7. Mengecek ketersediaan koneksi internet 8. Menampilkan data hasil parsing info suvenir 9. Memilih info suvenir berdasar judul konten 10. Menampilkan data info suvenir berdasar judul konten Skenario Alternatif : Tidak Tersedia Koneksi Internet 1. Masuk aplikasi 2. Memilih info Saung Angklung Udjo 3. Memilih info suvenir 4. Menyediakan Data Untuk Web Service 5. Mengambil data ke database 6. Data hasil parsing 7. Mengecek ketersediaan koneksi internet 8. Tidak menampilkan data hasil parsing info suvenir 9. Mengatur koneksi internet 10. Mengecek ketersediaan koneksi internet 11. Menampilkan data hasil parsing info suvenir 12. Memilih info suvenir berdasar judul konten 13. Menampilkan data info suvenir berdasar judul konten Pada tabel III.7 menggambarkan skenario proses penyajian info brosur Saung Angklung Udjo. Tabel III.7 Skenario use case proses penyajian info brosur Saung Angklung Udjo Nama Use Case : Penyajian Info Brosur Saung Angklung Udjo Skenario : Aksi Pengunjung Respon Sistem Database Skenario Normal 1. Masuk aplikasi 2. Memilih info Saung Angklung Udjo 3. Memilih info brosur 4. Menyediakan Data Untuk Web Service 5. Mengambil data ke database 6. Data hasil parsing 7. Mengecek ketersediaan koneksi internet 8. Menampilkan data hasil parsing info brosur 9. Memilih brosur 10. Mengunduh file brosur yang dipilih Skenario Alternatif : Tidak Tersedia Koneksi Internet 1. Masuk aplikasi 2. Memilih info Saung Angklung Udjo 3. Memilih info brosur 4. Menyediakan Data Untuk Web Service 5. Mengambil data ke database 6. Data hasil parsing 7. Mengecek ketersediaan koneksi internet 8. Tidak menampilkan data hasil parsing info brosur 9. Mengatur koneksi internet 10. Mengecek ketersediaan koneksi internet 11. Menampilkan data hasil parsing info brosur 12. Memilih info brosur 13. Mengunduh file brosur yang dipilih Pada tabel III.8 menggambarkan skenario proses penyajian info link Saung Angklung Udjo. Tabel III.8 Skenario use case proses penyajian info link Saung Angklung Udjo Nama Use Case : Penyajian Info Link Saung Angklung Udjo Skenario : Aksi Pengunjung Respon Sistem Database Skenario Normal 1. Masuk aplikasi 2. Memilih info Saung Angklung Udjo 3. Memilih Info Link 4. Menyediakan Data Untuk Web Service 5. Mengambil data ke database 6. Data hasil parsing 7. Mengecek ketersediaan koneksi internet 8. Menampilkan data hasil parsing info link 9. Memilih info link 10. Menampilkan data info link Skenario Alternatif : Tidak Tersedia Koneksi Internet 1. Masuk aplikasi 2. Memilih info Saung Angklung Udjo 3. Memilih info link 4. Menyediakan Data Untuk Web Service 5. Mengambil data ke database 6. Data hasil parsing 7. Mengecek ketersediaan koneksi internet 8. Tidak menampilkan data hasil parsing info link 9. Mengatur koneksi internet 10. Mengecek ketersediaan koneksi internet 11. Menampilkan data hasil parsing info link 12. Memilih info link 13. Menampilkan data info link Pada tabel III.9 menggambarkan skenario proses penyajian info sejarah angklung. Tabel III.9 Skenario use case proses penyajian info sejarah angklung Nama Use Case : Penyajian Info Sejarah Angklung Skenario : Aksi Pengunjung Respon Sistem Database Skenario Normal 1. Masuk aplikasi 2. Memilih info Angklung 3. Memilih Sejarah Angklung 4. Menyediakan Data Untuk Web Service 5. Mengambil data ke database 6. Data hasil parsing 7. Mengecek ketersediaan koneksi internet 8. Menampilkan data hasil parsing info sejarah angklung 9. Memilih info sejarah angklung berdasar judul konten 10. Menampilkan data info sejarah angklung berdasar judul konten Skenario Alternatif : Tidak Tersedia Koneksi Internet 1. Masuk aplikasi 2. Memilih info Angklung 3. Memilih info sejarah angklung 4. Menyediakan Data Untuk Web Service 5. Mengambil data ke database 6. Data hasil parsing 7. Mengecek ketersediaan koneksi internet 8. Tidak menampilkan data hasil parsing info sejarah angklung 9. Mengatur koneksi internet 10. Mengecek ketersediaan koneksi internet 11. Menampilkan data hasil parsing info sejarah angklung 12. Memilih info sejarah angklung berdasar judul konten 13. Menampilkan data info sejarah angklung berdasar judul konten Pada tabel III.10 menggambarkan skenario proses penyajian info karakter angklung. Tabel III.10 Skenario use case proses penyajian info karakter angklung Nama Use Case : Penyajian Info Karakter Angklung Skenario : Aksi Pengunjung Respon Sistem Database Skenario Normal 1. Masuk aplikasi 2. Memilih info Angklung 3. Memilih Info karakter angklung 4. Menyediakan Data Untuk Web Service 5. Mengambil data ke database 6. Data hasil parsing 7. Mengecek ketersediaan koneksi internet 8. Menampilkan data hasil parsing info karakter angklung 9. Memilih info karakter angklung berdasar judul konten 10. Menampilkan data info karakter angklung berdasar judul konten Skenario Alternatif : Tidak Tersedia Koneksi Internet 1. Masuk aplikasi 2. Memilih info karakter Angklung 3. Memilih info karakter angklung 4. Menyediakan Data Untuk Web Service 5. Mengambil data ke database 6. Data hasil parsing 7. Mengecek ketersediaan koneksi internet 8. Tidak menampilkan data hasil parsing info karakter angklung 9. Mengatur koneksi internet 10. Mengecek ketersediaan koneksi internet 11. Menampilkan data hasil parsing info karakter angklung 12. Memilih info karakter angklung berdasar judul konten 13. Menampilkan data info karakter angklung berdasar judul konten Pada tabel III.11 menggambarkan skenario proses penyajian info unit angklung. Tabel III.11 Skenario use case proses penyajian info unit angklung Nama Use Case : Penyajian Info Unit Angklung Skenario : Aksi Pengunjung Respon Sistem Database Skenario Normal 1. Masuk aplikasi 2. Memilih info Angklung 3. Memilih Info unit angklung 4. Menyediakan Data Untuk Web Service 5. Mengambil data ke database 6. Data hasil parsing 7. Mengecek ketersediaan koneksi internet 8. Menampilkan data hasil parsing info unit angklung 9. Memilih info unit angklung berdasar judul konten 10. Menampilkan data info unit angklung berdasar judul konten Skenario Alternatif : Tidak Tersedia Koneksi Internet 1. Masuk aplikasi 2. Memilih info Angklung 3. Memilih info unit angklung 4. Menyediakan Data Untuk Web Service 5. Mengambil data ke database 6. Data hasil parsing 7. Mengecek ketersediaan koneksi internet 8. Tidak menampilkan data hasil parsing info unit angklung 9. Mengatur koneksi internet 10. Mengecek ketersediaan koneksi internet 11. Menampilkan data hasil parsing info unit angklung 12. Memilih info unit angklung berdasar judul konten 13. Menampilkan data info unit angklung berdasar judul konten Pada tabel III.12 menggambarkan skenario proses penyajian info unit arumba. Tabel III.12 Skenario use case proses penyajian info unit arumba Nama Use Case : Penyajian Info Unit Arumba Skenario : Aksi Pengunjung Respon Sistem Database Skenario Normal 1. Masuk aplikasi 2. Memilih info Angklung 3. Memilih Info unit arumba 4. Menyediakan Data Untuk Web Service 5. Mengambil data ke database 6. Data hasil parsing 7. Mengecek ketersediaan koneksi internet 8. Menampilkan data hasil parsing info unit arumba 9. Memilih info unit arumba berdasar judul konten 10. Menampilkan data info unit arumba berdasar judul konten Skenario Alternatif : Tidak Tersedia Koneksi Internet 1. Masuk aplikasi 2. Memilih info Angklung 3. Memilih info unit arumba 4. Menyediakan Data Untuk Web Service 5. Mengambil data ke database 6. Data hasil parsing 7. Mengecek ketersediaan koneksi internet 8. Tidak menampilkan data hasil parsing info unit arumba 9. Mengatur koneksi internet 10. Mengecek ketersediaan koneksi internet 11. Menampilkan data hasil parsing info unit arumba 12. Memilih info unit arumba berdasar judul konten 13. Menampilkan data info unit arumba berdasar judul konten Pada tabel III.13 menggambarkan skenario proses memanggil file suara. Tabel III.13 Skenario use case proses memanggil file suara Nama Use Case : Pemanggilan File Suara Skenario : Aksi Aktor Pengunjung Respon Sistem Skenario Normal 1. Masuk aplikasi 2. Memilih simulasi angklung 3. Memainkan simulasi angklung 4. Memanggil file suara berdasar pilihan nada dasar Pada tabel III.14 menggambarkan skenario proses penyajian info bantuan. Tabel III.14 Skenario use case proses penyajian info bantuan Nama Use Case : Penyajian Info Bantuan Skenario : Aksi Aktor Pengunjung Respon Sistem Skenario Normal 1. Masuk aplikasi 2. Menampilkan bantuan mengenai yang harus tersedia untuk mendukung aplikasi 3. Melihat bantuan mengenai yang harus tersedia untuk mendukung aplikasi Pada tabel III.15 menggambarkan skenario proses ambil data hasil parsing. Tabel III.15 Skenario use case proses ambil data hasil parsing Nama Use Case : Pengambilan Data Hasil Parsing Skenario : Aksi Database Respon Sistem Skenario Normal 1. Menyediakan data untuk web service 2. Mengecek koneksi ke library method 3. Mengakses method 4. Memilih method 5. Eksekusi query di dalam method 6. Mengecek ketersediaan data di database, sesuai dengan query yang dieksekusi 7. Menyediakan data hasil parsing berdasar method yang terpilih

3.1.5.5.5 Activity Diagram

Activity Diagram merupakan gambaran workflow aliran kerja atau aktivitas dari sebuah sistem atau proses bisnis. Yang perlu diperhatikan disini adalah bahwa activity diagram menggambarkan aktivitas sistem bukan apa yang dilakukan oleh aktor.

3.1.5.5.5.1 Activity Diagram Penyajian Info History Saung Angklung Udjo

Gambar III.6 Activity Penyjian Info History Saung Angklung Udjo

3.1.5.5.5.2 Activity Diagram Penyajian Info Event Saung Angklung Udjo

Gambar III.7 Activity Penyajian Info Event Saung Angklung Udjo

3.1.5.5.5.3 Activity Diagram Penyajian Info Souvenir

Gambar III.8 Activity Penyajian Info Suvenir

3.1.5.5.5.4 Activity Diagram Penyajian Info Brosur

Gambar III.9 Activity Penyajian Info Brosur

3.1.5.5.5.5 Activity Diagram Penyajian Info Link

Gambar III.10 Activity Penyajian Info Link

3.1.5.5.5.6 Activity Diagram Penyajian Info History Angklung

Gambar III.11 Activity Penyajian Info History Angklung

3.1.5.5.5.7 Activity Diagram Penyajian Info Character Angklung

Gambar III.12 Activity Penyajian Info Karakter Angklung

3.1.5.5.5.8 Activity Diagram Penyajian Info Unit Angklung

Gambar III.13 Activity Penyajian Info Unit Angklung

3.1.5.5.5.9 Activity Diagram Penyajian Info Unit Arumba

Gambar III.14 Activity Penyajian Info Unit Arumba

3.1.5.5.5.10 Activity Diagram Pemanggilan File Suara

Gambar III.15 Activity Pemanggilan File Suara

3.1.5.5.5.11 Activity Diagram Penyajian Info Bantuan

Gambar III.16 Activity Penyajian Info Bantuan

3.1.5.5.5.12 Activity Diagram Pengambilan Data Hasil Parsing

Gambar III.17 Activity Pengambilan Data Hasil Parsing

3.1.5.5.6 Sequence Diagram

Merupakan bentuk dari interaction diagram, menggambarkan interaksi antar objek di dalam dan di sekitar sistem berupa Message yang di gambarkan terhadap waktu. Masing – masing objek termasuk actor memiliki line vertikal, message digambarkan garis berpanah dari satu objek ke objek lainnya, dan activation bar menunjukan lamanya eksekusi sebuah proses. Sebuah sequence diagram, secara khusus menjabarkan behavior sebuah skenario tunggal. Diagram tersebut menunjukkan sejumlah objek contoh dan pesan – pesan yang melewati objek – objek ini di dalam use case. Berikut ini adalah sequence diagram dari sistem yang akan dibangun.

3.1.5.5.6.1 Sequence Diagram Penyajian Sejarah Saung Angklung Udjo

Gambar III.18 Sequence Diagram Penyajian Sejarah Saung Angklung Udjo

3.1.5.5.6.2 Sequence Diagram Penyajian Event Saung Angklung Udjo

Gambar III.19 Sequence Diagram Penyajian Event Saung Angklung Udjo

3.1.5.5.6.3 Sequence Diagram Penyajian Info Suvenir

Gambar III.20 Sequence Diagram Penyajian Info Suvenir

3.1.5.5.6.4 Sequence Diagram Penyajian Info Brosur

Gambar III.21 Sequence Diagram Penyajian Info Brosur

3.1.5.5.6.5 Sequence Diagram Penyajian Info Link

Gambar III.22 Sequence Diagram Penyajian Info Link

3.1.5.5.6.6 Sequence Diagram Penyajian Info Sejarah Angklung

Gambar III.23 Sequence Diagram Penyajian Info Sejarah Angklung

3.1.5.5.6.7 Sequence Diagram Penyajian Info Karakter Angklung

Gambar III.24 Sequence Diagram Penyajian Info Karakter Angklung

3.1.5.5.6.8 Sequence Diagram Penyajian Info Unit Angklung

Gambar III.25 Sequence Diagram Penyajian Info Unit Angklung

3.1.5.5.6.9 Sequence Diagram Penyajian Info Unit Arumba

Gambar III.26 Sequence Diagram Penyajian Info Unit Arumba

3.1.5.5.6.10 Sequence Diagram Pemanggilan File Suara

Gambar III.27 Sequence Diagram Pemanggilan File Suara

3.1.5.5.6.11 Sequence Diagram Penyajian Info Bantuan

Gambar III.28 Sequence Diagram Penyajian Info Bantuan

3.1.5.5.7 Class Diagram

Class diagram menggambarkan struktur dan deskripsi class beserta hubungan satu sama lain seperti Asosiasi, Generalisasi dan lain sebagainya. Dalam gambar III.29 di bawah ini di gambarkan hubungan antar class yang terjadi pada sistem yang akan dibangun. 104 +time +onCreate +onClick +panggilHelp -splash -button : mWeb -button : mHisAngklung -button : mAngklung -button : ivhelp MainMenu +onClick -button : mButtonA -button : mButtonC -button : mButtonD -button : mButtonF -button : mButtonG VirtualAngklung +onCreate +onClick +onOptionsItemSelected -button : mHistory -button : mEvent -button : mSouvenir -button : mBrosur -button : mLink WebUdjo +onCreate +onClick +onOptionsSelectedItem -mHistoryAngklung -mCharacter -mUAngklung -mArumba IndexAngklung +onCreate +spinSelectedListener +onItemSelected +content +setup_fill_cb_history +OpenHttpConnection +getData +onOptionsItemSelected +url -sjudul_spin -spinner : spin_judulHistoris -textview : txtJudulHistoris -textview : txtContentHistoris -textview : txtJudulContent -arr_judul -arr_id -spin_item_position -InternetCheck HistoryAngklung +onCreate +spinSelectedListener +onItemSelected +content +setup_fill_cb_history +OpenHttpConnection +getData +onOptionsItemSelected +url -sjudul_spin -spinner : spin_judulHistoris -textview : txtJudulHistoris -textview : txtContentHistoris -textview : txtJudulContent -arr_judul -arr_id -spin_item_position -InternetCheck History +onCreate +onOptionsItemSelected -textview -InternetCheck Brosur +onCreate +OpenHttpConnection +DownloadImage +onOptionsItemSelected -textview -InternetCheck Link +onCreate +spinSelectedListener +onItemSelected +content +setup_fill_cb_history +OpenHttpConnection +getData +onOptionsItemSelected +url -sjudul_spin -spinner : spin_judulHistoris -textview : txtJudulHistoris -textview : txtContentHistoris -textview : txtJudulContent -arr_judul -arr_id -spin_item_position -InternetCheck Event +onCreate +spinSelectedListener +onItemSelected +content +setup_fill_cb_history +OpenHttpConnection +getData +onOptionsItemSelected +DownloadImage +url -sjudul_spin -spinner : spin_judulHistoris -textview : txtJudulHistoris -textview : txtContentHistoris -textview : txtJudulContent -imageview : img -arr_judul -arr_id -spin_item_position -InternetCheck Souvenir +onCreate +spinSelectedListener +onItemSelected +content +setup_fill_cb_history +OpenHttpConnection +getData +onOptionsItemSelected +url -sjudul_spin -spinner : spin_judulHistoris -textview : txtJudulHistoris -textview : txtContentHistoris -textview : txtJudulContent -arr_judul -arr_id -spin_item_position -InternetCheck CharacterAngklung +onCreate +spinSelectedListener +onItemSelected +content +setup_fill_cb_history +OpenHttpConnection +getData +onOptionsItemSelected +url -sjudul_spin -spinner : spin_judulHistoris -textview : txtJudulHistoris -textview : txtContentHistoris -textview : txtJudulContent -arr_judul -arr_id -spin_item_position -InternetCheck UnitAngklung +onCreate +spinSelectedListener +onItemSelected +content +setup_fill_cb_history +OpenHttpConnection +getData +onOptionsItemSelected +url -sjudul_spin -spinner : spin_judulHistoris -textview : txtJudulHistoris -textview : txtContentHistoris -textview : txtJudulContent -arr_judul -arr_id -spin_item_position -InternetCheck UnitArumba +onCreate +onClick +playSound -button : Sol button : Sol -button : Sel button : Sel -button : La button : La -button : Sa button : Sa -button : Si button : Si -button : Do button : Do -button : Di button : Di -button : Re button : Re -button : Ri button : Ri -button : Mi button : Mi -button : Fa button : Fa -button : Fi button : Fi -button : Sol -sound : angklung_g1 -sound : angklung_gis1 -sound : angklung_a1 -sound : angklung_ais1 -sound : angklung_b1 -sound : angklung_c1 -sound : angklung_cis1 -sound : angklung_d1 -sound : angklung_dis1 -sound : angklung_e1 -sound : angklung_f1 -sound : angklung_fis1 -sound : angklung_g2 -sound : angklung_gis2 -sound : angklung_a2 -sound : angklung_ais2 -sound : angklung_b2 -sound : angklung_c2 -sound : angklung_cis2 -sound : angklung_d2 -sound : angklung_dis2 -sound : angklung_e2 -sound : angklung_f2 -sound : angklung_fis2 -sound : angklung_g3 NadaDasarC +onCreate +onClick +playSound -button : Sol button : Sol -button : Sel button : Sel -button : La button : La -button : Sa button : Sa -button : Si button : Si -button : Do button : Do -button : Di button : Di -button : Re button : Re -button : Ri button : Ri -button : Mi button : Mi -button : Fa button : Fa -button : Fi button : Fi -button : Sol -sound : angklung_a1 -sound : angklung_ais1 -sound : angklung_b1 -sound : angklung_c1 -sound : angklung_cis1 -sound : angklung_d1 -sound : angklung_dis1 -sound : angklung_e1 -sound : angklung_f1 -sound : angklung_fis1 -sound : angklung_g2 -sound : angklung_gis2 -sound : angklung_a2 -sound : angklung_ais2 -sound : angklung_b2 -sound : angklung_c2 -sound : angklung_cis2 -sound : angklung_d2 -sound : angklung_dis2 -sound : angklung_e2 -sound : angklung_f2 -sound : angklung_fis2 -sound : angklung_g3 -sound : angklung_gis3 -sound : angklung_a3 NadaDasarD +onCreate +onClick +playSound -button : Sol button : Sol -button : Sel button : Sel -button : La button : La -button : Sa button : Sa -button : Si button : Si -button : Do button : Do -button : Di button : Di -button : Re button : Re -button : Ri button : Ri -button : Mi button : Mi -button : Fa button : Fa -button : Fi button : Fi -button : Sol -sound : angklung_c -sound : angklung_cis -sound : angklung_d -sound : angklung_dis -sound : angklung_e -sound : angklung_f -sound : angklung_fis -sound : angklung_g1 -sound : angklung_gis1 -sound : angklung_a1 -sound : angklung_ais1 -sound : angklung_b1 -sound : angklung_c1 -sound : angklung_cis1 -sound : angklung_d1 -sound : angklung_dis1 -sound : angklung_e1 -sound : angklung_f1 -sound : angklung_fis1 -sound : angklung_g2 -sound : angklung_gis2 -sound : angklung_a2 -sound : angklung_ais2 -sound : angklung_b2 -sound : angklung_c2 NadaDasarF +onCreate +onClick +playSound -button : Sol button : Sol -button : Sel button : Sel -button : La button : La -button : Sa button : Sa -button : Si button : Si -button : Do button : Do -button : Di button : Di -button : Re button : Re -button : Ri button : Ri -button : Mi button : Mi -button : Fa button : Fa -button : Fi button : Fi -button : Sol -sound : angklung_d -sound : angklung_dis -sound : angklung_e -sound : angklung_f -sound : angklung_fis -sound : angklung_g1 -sound : angklung_gis1 -sound : angklung_a1 -sound : angklung_ais1 -sound : angklung_b1 -sound : angklung_c1 -sound : angklung_cis1 -sound : angklung_d1 -sound : angklung_dis1 -sound : angklung_e1 -sound : angklung_f1 -sound : angklung_fis1 -sound : angklung_g2 -sound : angklung_gis2 -sound : angklung_a2 -sound : angklung_ais2 -sound : angklung_b2 -sound : angklung_c2 -sound : angklung_cis2 -sound : angklung_d2 NadaDasarG +onCreate +onClick +playSound -button : Sol button : Sol -button : Sel button : Sel -button : La button : La -button : Sa button : Sa -button : Si button : Si -button : Do button : Do -button : Di button : Di -button : Re button : Re -button : Ri button : Ri -button : Mi button : Mi -button : Fa button : Fa -button : Fi button : Fi -button : Sol -sound : angklung_e -sound : angklung_f -sound : angklung_fis -sound : angklung_g1 -sound : angklung_gis1 -sound : angklung_a1 -sound : angklung_ais1 -sound : angklung_b1 -sound : angklung_c1 -sound : angklung_cis1 -sound : angklung_d1 -sound : angklung_dis1 -sound : angklung_e1 -sound : angklung_f1 -sound : angklung_fis1 -sound : angklung_g2 -sound : angklung_gis2 -sound : angklung_a2 -sound : angklung_ais2 -sound : angklung_b2 -sound : angklung_c2 -sound : angklung_cis2 -sound : angklung_d2 -sound : angklung_dis2 -sound : angklung_e2 NadaDasarA +__construct +get_sjudul +get_sjudul2 +get_sjudul3 +get_sjudul4 +get_sjudul5 +get_sjudul6 content 1 1.. 1 1.. 1 1.. 1 1.. 1 1.. 1 1.. 1 1.. 1 1.. 1 1.. 1 1.. 1 1.. 1 1.. 1.. 1 1 1.. 1 1.. 1 1.. 1 1.. +__construct +get_sjudul +get_sjudul2 +get_sjudul3 +get_sjudul4 +get_sjudul5 +get_sjudul6 +koneksi_db -Mhistory -Mhistoryangklung -Mwp_eventscalendar_main -Msouvenir -Mcharacter -Muangklung -Marumba content 1.. 1 1 1.. 1.. 1 1 1.. 1 1.. 1.. 1 1.. 1 1.. 1 Gambar III.29 Class diagram 3.2 Perancangan 3.2.1 Perancangan Struktur Tabel Tabel-tabel yang terdapat dalam basis data yang digunakan dalam sistem ini adalah sebagai berikut :

1. Tabel Event

Tabel ini adalah perancangan untuk tabel event yang akan digunakan pada pembangunan sistem. Struktur tabel event adalah sebagai berikut : Tabel III.16 Tabel Event No Nama Field Tipe Ukuran Kunci Keterangan 1 Id Mediumint 9 Auto increment Primary Key 2 eventTitle Varchar 255 3 eventDescription Text 4 eventLocation Varchar 255 5 eventLinkout Varchar 255 6 eventStartDate Date 7 eventStartTime Time 8 eventEndDate Date 9 eventEndTime Time 10 accessLevel Varchar 255 11 posted Mediumint 9

2. Tabel History Saung Angklung Udjo

Tabel ini adalah perancangan untuk tabel sejarah Saung Angklung Udjo yang akan digunakan untuk menampung data sejarah Saung Angklung Udjo. Struktur tabel History Saung Angklung Udjo adalah sebagai berikut: Tabel III.17 Tabel History Saung Angklung Udjo No Nama Field Tipe Ukuran Kunci Keterangan 1 id_history Integer 10 Auto increment Primary Key 2 judul Varchar 255 3 content Text 4 isactive Char 1

3. Tabel History Angklung

Tabel ini adalah perancangan untuk tabel sejarah angklung yang akan digunakan untuk menampung data sejarah angklung. Struktur tabel History Angklung adalah sebagai berikut: Tabel III.18 Tabel History Angklung No Nama Field Tipe Ukuran Kunci Keterangan 1 idHistoryAngklung Integer 5 Auto increment Primary Key 2 judulHistory Varchar 255 3 contentHistory Text 4 isActive Char 1

4. Tabel Souvenir

Tabel ini adalah perancangan untuk tabel souvenir yang akan digunakan untuk menampung data souvenir. Struktur tabel souvenir adalah sebagai berikut: Tabel III.19 Tabel Souvenir No Nama Field Tipe Ukuran Kunci Keterangan 1 idSouvenir Integer 5 Auto increment Primary Key 2 judulSouvenir Text 3 content Text 4 isactive Char 1

5. Tabel Character Angklung

Tabel ini adalah perancangan untuk tabel character angklung yang akan digunakan untuk menampung data character angklung. Struktur tabel character angklung adalah sebagai berikut: Tabel III.20 Tabel Character Angklung No Nama Field Tipe Ukuran Kunci Keterangan 1 id_character Integer 10 Auto increment Primary Key 2 Judul Varchar 255 3 Content Text 4 Isactive Char 1

6. Tabel Unit Angklung

Tabel ini adalah perancangan untuk tabel unit angklung yang akan digunakan untuk menampung data unit angklung. Struktur tabel unit angklung adalah sebagai berikut: Tabel III.21 Tabel Unit Angklung No Nama Field Tipe Ukuran Kunci Keterangan 1 id_uangklung Integer 10 Auto increment Primary Key 2 judul Varchar 255 3 content Text 4 isactive Char 1

7. Tabel Unit Arumba

Tabel ini adalah perancangan untuk tabel unit arumba yang akan digunakan untuk menampung data unit arumba. Struktur tabel unit arumba adalah sebagai berikut: Tabel III.22 Tabel Unit Arumba No Nama Field Tipe Ukuran Kunci Keterangan 1 id_arumba Integer 10 Auto increment Primary Key 2 judul Varchar 255 3 content Text 4 isactive Char 1

3.2.2 Perancangan Antarmuka

T01 Dialog [X] Image Splash Loading Navigasi : Keterangan : 1. Warna Tampilan : Abu-abu Hijau