Perancangan Website Paduan Suara Mahasiswa Universitas Kristen Maranatha dengan Backup Database Otomatis.

(1)

iv

Universitas Kristen Maranatha

ABSTRACT

Now almost every fields and organizations already have a personal website to support the organization. Maranatha PSM is a student organization but has a large number of members. Unfortunately they do not have a special website that handles membership issues, dissemination of adequate information. Therefore, PSM Maranatha need a website but can answer the needs of the organization with regard to master data that can be accessed from anywhere. Research being done with looking for the source of the theory, and field visits.

(2)

v

ABSTRAK

Sekarang hampir setiap bidang dan organisai telah memiliki website pribadi untuk mendukung organisasinya. PSM Maranatha adalah organisasi kemahasiswaan namun memiliki anggota yang sangat banyak. Sayang mereka belum memiliki website khusus yang menangani permasalahan keanggotaan, penyebaran informasi yang memadai. Oleh sebab itu, PSM Maranatha membutuhkan website yang dapat menjawab kebutuhan organisasi yang berkenaan dengan master data yang dapat diakses darimana saja. Penelitian dilakukan denga mencari sumber teori, serta kunjungan lapangan.

(3)

vi

1.1 Latar Belakang Masalah ...1

1.2 Rumusan Masalah ...2

1.3 Tujuan ...3

1.4 Batasan Masalah ...4

1.5 Sumber Data ...4

1.6 Sistematika Penulisan ...5

BAB II ...6

DASAR TEORI...6

2.2.1. Flowchart ...6

2.2.2. ERD (Entity Relationship Diagram) ...7

2.2.3. DFD (Data Flow Diagram) ...8

2.2.4. Kamus Data ...10

BAB III ...17

ANALISA DAN PERMODELAN ...17

3.1 Entity Relationship Diagram ...18

3.2 Data Flow Diagram (DFD) ...19

3.2.1 DFD LEVEL 0 ...19

3.2.2 DFD LEVEL 1 ...20

3.2.3 DFD LEVEL 2 UNTUK MANAGE ANGGOTA ...21

3.2.4 DFD LEVEL 2 Untuk Manage Multimedia ...22

3.2.5 DFD Level 2 untuk Manage Artikel ...23

3.2.6 DFD Level 2 Untuk Manage Event Schedule ...24

3.2.7 DFD Level 3 untuk Manage Authorization ...25

3.3 PSPEC ...26

3.4 KAMUS DATA ...33

3.5 USER INTERFACE DESAIN...37

3.5.1 Rancangan User Interface Halaman Utama ...37

3.5.2 Rancangan User Interface Halaman Daftar (Anggota)...38

3.5.3 Rancangan User Interface Halaman Member (Admin) ...39

3.5.4 Rancangan User Interface Halaman Multimedia (Guest) ...40

3.5.5 Rancangan User Interface Halaman Multimedia (Member) ...41

3.5.6 Rancangan User Interface Halaman Multimedia (Admin) ...42

3.5.7 Rancangan User Interface Halaman Video (Guest)...43

(4)

vii

3.5.9 Rancangan User Interface Halaman Video (Admin) ...45

3.5.10 Rancangan User Interface Halaman Video Comment (Member) ...46

3.5.11 Rancangan User Interface Halaman Gambar (Member)...47

3.5.12 Rancangan User Interface Halaman Gambar (Admin) ...48

3.5.13 Rancangan User Interface Halaman komentar Gambar (Member) ...50

3.5.14 Rancangan User Interface Halaman Musik (Guest) ...51

3.5.15 Rancangan User Interface Halaman Musik (Member) ...52

3.5.16 Rancangan User Interface Halaman Musik (Admin) ...53

3.5.17 Rancangan User Interface Halaman Komentar Musik (Member) ...54

3.5.18 Rancangan User Interface Halaman Partitur (Member) ...55

3.5.19 Rancangan User Interface Halaman Partitur (Admin) ...56

3.5.20 Rancangan User Interface Halaman Komentar Partitur (Member) ...57

3.5.21 Rancangan User Interface Halaman Artikel (Guest) ...58

3.5.22 Rancangan User Interface Halaman Artikel (Member) ...59

3.5.23 Rancangan User Interface Halaman Artikel (Admin) ...60

3.5.24 Rancangan User Interface Halaman Komentar Artikel (Member) ...61

3.5.25 Rancangan User Interface Halaman Event (Guest) ...62

3.5.26 Rancangan User Interface Halaman Event (Member) ...63

3.5.27 Rancangan User Interface Halaman Event (Admin) ...64

3.5.28 Rancangan User Interface Halaman About us ...65

3.5.29 Rancangan User Interface Halaman Contat Us ...67

BAB IV ...68

PERANCANGAN DAN IMPLEMENTASI ...68

4.1 Halaman Utama...68

4.2 Halaman Member ...70

4.3 Halaman Video Admin ...71

4.4 Halaman Video Member ...72

4.5 Halaman Video Guest ...73

4.6 Halaman Picture Admin ...74

4.7 Halaman Picture Member ...75

4.8 Halaman Picture Guest ...76

4.9 Halaman Musik Admin ...78

4.10 Halaman Musik Member ...79

4.11 Halaman Musik Guest ...80

4.12 Halaman Partitur Admin ...81

4.13 Halaman Partitur Member ...82

4.14 Halaman Artikel Admin ...83

4.15 Halaman Artikel Member ...84

4.16 Halaman Artikel Guest ...86

4.17 Halaman Event Admin ...87

4.18 Halaman Event Member dan Guest...88

4.19 Halaman About Us ...89

4.20 Halaman Contact Us ...89

(5)

viii

PENGUJIAN ...90

5.1 Pengujian Bagian Login ...90

5.2 Pengujian Halaman Daftar Member ...91

5.3 Pengujian Halaman Video Admin...91

5.4 Pengujian Halaman Video Member ...92

5.5 Pengujian Halaman Video Guest ...93

5.6 Pengujian Halaman Picture Admin ...93

5.7 Pengujian Halaman Picture Member ...94

5.8 Pengujian Halaman Picture Guest...94

5.9 Pengujian Halaman Music Admin ...95

5.10 Pengujian Halaman Music Member...96

5.11 Pengujian Halaman Music Guest ...96

5.12 Pengujian Halaman Partitur Admin ...97

5.13 Pengujian Halaman Partitur Member ...97

5.14 Pengujian Halaman Artikel Admin ...98

5.15 Pengujian Halaman Artikel Member ...98

5.16 Pengujian Halaman Artikel Guest ...99

5.17 Pengujian Halaman Event Admin ...99

5.18 Pengujian Halaman Event Member ... 100

5.19 Pengujian Halaman Event Guest ... 100

DAFTAR PUSTAKA... 104

(6)

ix

Universitas Kristen Maranatha DAFTAR GAMBAR

Gambar 1.1 PSM Maranatha ...1

Gambar 2.1 Kardinalitas one-to-one ...7

Gambar 2.3 Kardinalitas one-to-many ...8

Gambar 2.4 Kardinalitas many-to-one ...8

Gambar 3.2 DFD Level 0 Website PSM Maranatha ...19

Gambar 3.3 DFD Level 1 Website PSM Maranatha ...20

Gambar 3.4 DFD Level 1 Manage Anggota Website PSM Maranatha ...21

Gambar 3.5 DFD Level 2 Manage Multimedia Website PSM Maranatha ...22

Gambar 3.6 DFD Level 2 Manage Artikel Website PSM Maranatha ...23

Gambar 3.7 DFD Level 2 Manage Event Schedule Website PSM Maranatha ...24

Gambar 3.8 DFD Level 3 Manage Authorization Website PSM Maranatha ...25

Gambar 3.9 Rancangan User Interface Halaman Utama ...37

Gambar 3.10 Rancangan User Interface Halaman Daftar ...38

Gambar 3.11 Rancangan User Interface Halaman Member (Admin) ...39

Gambar 3.12 Rancangan User Interface Halaman Mutimedia (Guest) ...40

Gambar 3.13 Rancangan User Interface Halaman Multimedia (Member) ...41

Gambar 3.15 Rancangan User Interface Halaman Video (Guest) ...43

Gambar 3.16 Rancangan User Interface Halaman Video (Member) ...44

Gambar 3.17 Rancangan User Interface Halaman Video (Admin)...45

Gambar 3.18 Rancangan User Interface Halaman Video Comment (Member dan Admin) ...47

Gambar 3.20 Rancangan User Interface Halaman Gambar (Admin) ...49

Gambar 3.21 Rancangan User Interface Halaman Komentar Gambar (Admin dan Member)...50

Gambar 3.22 Rancangan User Interface Halaman Musik (Guest) ...51

Gambar 3.23 Rancangan User Interface Halaman Musik (Member) ...52

Gambar 3.24 Rancangan User Interface Halaman Musik (Admin) ...53

Gambar 3.25 Rancangan User Interface Halaman Komentar Musik (Member) ...54

Gambar 3.26 Rancangan User Interface Halaman Partitur (Member) ...55

Gambar 3.27 Rancangan User Interface Halaman Parrrtitur (Admin) ...56

Gambar 3.28 Rancangan User Interface Halaman Komentar Partitur (Admin) ...58

Gambar 3.29 Rancangan User Interface Halaman Artikel (Guest) ...59

Gambar 3.30 Rancangan User Interface Halaman Artikel (Member) ...60

Gambar 3.31 Rancangan User Interface Halaman Artikel (Admin) ...61

Gambar 3.32 Rancangan User Interface Halaman Komentar Artikel (Member)...62

Gambar 3.33 Rancangan User Interface Halaman Event (Guest) ...63

Gambar 3.34 Rancangan User Interface Halaman Event (Member) ...64

Gambar 3.35 Rancangan User Interface Halaman Event (Admin) ...65

Gambar 3.36 Rancangan User Interface Halaman About Us ...66

Gambar 3.37 Rancangan User Interface Halaman Contact Us ...67

Gambar 4.1 Halaman Utama Website PSM Maranatha ...68

(7)

x

Gambar 4.3 Logout Website PSM Maranatha ...69

Gambar 4.4 Halaman Member Website PSM Maranatha ...70

Gambar 4.5 Halaman Daftar Member Website PSM Maranatha ...70

Gambar 4.6 Halaman Daftar Member Sukses ...71

Gambar 4.7 Halaman Daftar Halaman Video (Admin) ...71

Gambar 4.8 Halaman Daftar Halaman Video (Member) ...72

Gambar 4.9 Halaman Daftar Halaman Video (Guest) ...73

Gambar 4.10 Halaman Daftar Halaman Picture (Admin) ...74

Gambar 4.11 Halaman Daftar Halaman Picture (Member) ...75

Gambar 4.12 Halaman Daftar Halaman Picture (Guest) ...76

Gambar 4.13 Halaman Daftar Halaman Musik (Admin) ...78

Gambar 4.14 Halaman Daftar Halaman Musik (Member) ...79

Gambar 4.15 Halaman Daftar Halaman Musik (Guest) ...80

Gambar 4.16 Halaman Daftar Halaman Partitur (Admin) ...81

Gambar 4.17 Halaman Daftar Halaman Partitur (Member) ...82

Gambar 4.18 Halaman Daftar Halaman Artikel (Admin) ...83

Gambar 4.19 Halaman Daftar Artikel (Member) ...84

Gambar 4.20 Halaman comment Artikel (Member) ...85

Gambar 4.21 Halaman Daftar Artikel (Guest) ...86

Gambar 4.22 Halaman Daftar Event (Admin) ...87

Gambar 4.23 Halaman Daftar Event (Member dan Guest) ...88

Gambar 4.24 Halaman About Us (Admin, Member dan Guest) ...89

(8)

xi

DAFTAR TABEL

Tabel 2.1 Contoh PSPEC ...10

Tabel 2.2 Simbol Kamus Data ...11

Tabel 2.3 Contoh Kamus Data ...12

Tabel 3.1 PSPEC Proses Login ...26

Tabel 3.2 PSPEC Input Daftar Anggota ...26

Tabel 3.3 Update Daftar Anggota ...26

Tabel 3.4 Delete Daftar Anggota ...27

Tabel 3.5 Search Daftar Anggota ...27

Tabel 3.6 Input Authorization ...27

Tabel 3.7 Update Authorization...28

Tabel 3.8 Delete Authorization ...28

Tabel 3.9 Search Authorization...28

Tabel 3.10 Input Data Multimedia ...29

Tabel 3.11 Update Data Multimedia ...29

Tabel 3.12 Delete Data multimedia ...29

Tabel 3.13 Search Data multimedia ...30

Tabel 3.14 Input Data Artikel ...30

Tabel 3.15 Update Data Artikel ...31

Tabel 3.16 Delete Data artikel ...31

Tabel 3.17 Search Data artikel ...31

Tabel 3.18 Input Data event_schedule ...31

Tabel 3.19 Update Data Event_Schedule ...32

Tabel 3.20 Delete Data event_schedule ...32

Tabel 3.21 Search Data event_schedule ...33

Tabel 3.22 Data Login ...33

Tabel 3.23 Data Keanggotaan ...33

Tabel 3.24 Data Multimedia ...34

Tabel 3.25 Data Artikel ...34

Tabel 3.26 Data Event Schedule ...35

Tabel 3.27 Data Komentar ...35

Tabel 3.28 Data Testimonial ...36

Tabel 3.29 Data Pengunjung ...36

Tabel 5.1 Pengujian Bagian Login ...90

Tabel 5.2 Pengujian Halaman Daftar Member ...91

Tabel 5.3 Pengujian Halaman Video Admin ...91

Tabel 5.4 Pengujian Halaman Video Member ...92

Tabel 5.5 Pengujian Halaman Video Guest ...93

Tabel 5.6 Pengujian Halaman Picture Admin ...93

Tabel 5.7 Pengujian Halaman Picture Member ...94

Tabel 5.8 Pengujian Halaman Picture Guest ...94

Tabel 5.9 Pengujian Halaman Music Admin ...95

(9)

xii

Tabel 5.11 Pengujian Halaman Music Guest ...96

Tabel 5.12 Pengujian Halaman Partitur Admin ...97

Tabel 5.13 Pengujian Halaman Partitur Member ...97

Tabel 5.14 Pengujian Halaman Artikel Admin ...98

Tabel 5.15 Pengujian Halaman Artikel Member ...98

Tabel 5.16 Pengujian Halaman Artikel Guest ...99

Tabel 5.17 Pengujian Halaman Event Admin ...99

Tabel 5.18 Pengujian Halaman Event Member ... 100

(10)

1

BAB I

PENDAHULUAN

1.1 Latar Belakang Masalah

Paduan Suara Mahasiswa Universitas Kristen Maranatha merupakan salah satu unit kegiatan

mahasiswa yang ada di Universitas Kristen Maranatha. Berdiri sejak tahun 1983 Paduan Suara

Mahasiswa Universitas Kristen Maranatha telah memiliki pengalaman yang cukup banyak dalam dunia

musik klasik.

Gambar 1.1 PSM Maranatha

Dibawah arahan A.Bambang Jusana sebagai music director, pelatih sekaligus conductor PSM UKM telah

mengadakan berbagai konser diberbagai kota besar baik nasional maupun internasional. Setelah meraih

beberapa prestasi di tingkat nasional dan di tingkat internasional yang merupakan visi PSM UKM yakni

Recognized as The World Class Choir, PSM UKM tidak berhenti di sini saja. PSM UKM terus mengembangkan sayapnya dan terus berprestasi di dunia perpaduan suara Indonesia pada khususnya

dan pada tingkat Internasional pada umumnya. Beberapa prestasi diantaranya, tahun 2005 berhasil

(11)

2

PSM Maranatha kesulitan untuk mengumpulkan data alumni yang sudah berpuluh tahun lalu,

serta sulitnya menjalin komunikasi antar semua anggota disemua angkatan, pihak luar PSM Marantha

yang ingin mengetahui jadwal tampil dari PSM Maranatha, setelah konser ada kesulitan untuk

menyebarkan hasil rekaman audio, video maupun foto, komentar dari setiap performance, kurangnya sarana untuk berbagi informasi mengenai dunia musik klasik khususnya paduan suara, dan seringnya

menghabiskan banyak dana untuk foto copy partitur.

Oleh sebab itu Paduan Suara Mahasiswa Maranatha Membutuhkan website khusus untuk mengatasi

masalah- masalah tersebut. Akan dibuat website yang berisi fitur- fitur yang dapat membantu mengumpulkan alumni yang sudah berpuluh tahun lalu, menjalin komunikasi antar semua anggota

disemua angkatan, membantu pihak luar PSM Marantha yang ingin mengetahui jadwal tampil dari PSM

Maranatha, mempublish hasil rekaman audio, video maupun foto, mengetahui komentar dari setiap performance, meberikan sarana untuk berbagi informasi mengenai dunia musik klasik khususnya paduan suara lewat artikel musik klasik, dan partitur yang akan disimpan secara elektronik sehingga anggota dapat mendownload sendiri partiturnya dan PSM Maranatha dapat melakukan penghematan biaya dalam foto copy partitur.

1.2 Rumusan Masalah

Seperti kita ketahui diatas, banyak sekali Paduan Suara Mahasiswa di setiap univesitas

membutuhkan media komunikasi yang lebih khusus untuk mereka. Kebutuhan tersebut bila

dijabarkan adalah sebagai berikut:

1. Bagaimana semua anggota dari puluhan tahun yang lalu sampai saat ini masih lengkap

arsip data- datanya?

2. Bagaimana semua anggota dapat saling berkomunikasi dan menjalin hubungan baik dan

berinteraksi?

3. Bagaimana pihak luar yang tertarik dengan paduan suara mahasiswa tersebut(fans)

dapat melihat event terdekat dari paduan suara mahasiswa ini?

4. Bagaimana semua anggota dapat mengupload dan mengunduh foto, video, dan musik paduan suara?

5. Bagaimana semua anggota dan pengunjung biasa dapat saling menulis comment?

6. Bagaimana anggota dapat membaca artikel berkaitan dengan paduan suara kedalam

(12)

3

7. Bagaimana semua pengunjung dapat melakukan pencarian artikel yang ada di dalam

website?

8. Bagaimana anggota dapat mengupload partitur dari lagu yang akan dinyanyikan?

9. Bagaimana setiap anggota dapat mengetahui semua event yang berkaitan dengan jadwal latihan, jadwal acara kebersamaan, jadwal konser paduan suara lain, dan jadwal

kompetisi paduan suara?

1.3Tujuan

Tujuan Diadakannya Penelitian ini adalah untuk:

1. Membantu Paduan Suara Mahasiswa agar semua anggota dari puluhan tahun yang lalu

sampai saat ini masih lengkap arsip data- datanya

2. Membantu Paduan Suara Mahasiswa agar semua anggota dapat saling berkomunikasi dan

menjalin hubungan baik dan berinteraksi.

3. Membantu Paduan Suara Mahasiswa agar pihak luar yang tertarik dengan paduan suara

mahasiswa tersebut(fans) dapat melihat event terdekat dari paduan suara mahasiswa ini

4. Membantu Paduan Suara Mahasiswa agar semua Anggota Dapat mengupload dan

mengunduh foto, video, dan musik paduan suara.

5. Membantu Paduan Suara Mahasiswa agar semua anggota dan pengunjung biasa dapat

saling menulis comment.

6. Membantu Anggota dapat membaca artikel berkaitan dengan paduan suara kedalam

website.

7. Membantu Semua Pengunjung dapat melakukan pencarian artikel yang ada di dalam

website.

8. Membantu anggota dapat mengupload partitur dari lagu yang akan dinyanyikan.

9. Membantu setiap anggota dapat mengetahui semua event yang berkaitan dengan jadwal

latihan, jadwal acara kebersamaan, jadwal konser paduan suara lain, dan jadwal kompetisi

(13)

4

Universitas Kristen Maranatha 1.4Batasan Masalah

Dalam membangun aplikasi ini digunakan:

Hardware:

 Processor : Intel Pentium 4  Memory : 512MB RAM  Hard Disk : 120GB

Software:

 Operating sistem: Microsoft Windows XP Profesional Service Pack 3.

 Software developer: Adobe Photoshop, Adobe Flash, Adobe Firefox, Adobe Dreamweaver.  Database: MySQL.

Batasan Aplikasi yang dibuat adalah:

1. _{Pendaftaran seluruh anggota secara Online.}

2. _{Event Schedule berisikan event- event paduan suara dari berbagai paduan suara lain yang} akan tampil didalam kota(Bandung dan Jakarta), selain itu juga event interen seperti latihan,acara kebersamaan, syukuran, konser, dan acara penerimaan anggota baru.

3. _{Upload dan Download video, gambar,partitur, dan musik} 4. _{Comment room, untuk setiap anggota meninggalkan comment.} 5. Upload artikel

6. _{Pendaftaran Anggota Baru}

7. _{Backup database secara otomatis .}

8. _{Message untuk anggota dapat berkirim pesan}

9. Akan dirancangkan wesbite PHP tanpa hosting internet dengan menggunakan database

MySQL.

1.5Sumber Data

Akan dilakukan berbagai cara yang dapat mendukung suksesnya kerja praktek ini, diantaranya adalah:

 Observasi ke tempat penyimpanan inventaris, dan penyimpanan data manual.

(14)

5

Universitas Kristen Maranatha 1.6Sistematika Penulisan

Penulisan Karya ilmiah ini dibagi menjadi 5 bagian yang terpisah- pisah dalam beberapa

bab dan sub-bab.

Pada Bab I yang merupakan pendahuluan, akan dibahas mengenai latar belakang

permasalahan, tujuan serta manfaat dari penulisan karya ilmiah ini, selain itu juga dibahas

mengenai batasan masalah agar permasalahan yang dibahas memiliki fokus.

Pada Bab II akan dibahas mengenai teori- teori dasar yang mendasari penulisan karya

ilmiah ini seperti pengertian website, php, database mySQL dan lainnya

Pada Bab III akan dibahas mengenai analisa terhadap apa yang ada di organisasi

tersebut, serta perancangan aplikasi, tampilan, dan databasenya.

Pada Bab IV akan dibahas mengenai instalasi dan penerapan terhadap apa yang sudah di

rancang dan di analisis pada bab sebelumnya.

Pada Bab V merupakan pembahasan serta uji coba terhadap aplikasi yang sudah

dibuatkan.

(15)

103

BAB VI

KESIMPULAN DAN SARAN

Setelah menyelesaikan tugas akhir ini maka dapat ditarik kesimpulan dan

beberapa saran agar website ini dapat dikembangkan lebih baik.

6.1. Kesimpulan

Kesimpulan dari website Paduan Suara Mahasiswa ini adalah:

1. Aplikasi membantu agar anggota PSM Maranatha dapat mendaftarkan dirinya

secara Online sehingga data- data mereka dapat disimpan oleh pengurus.

2. Anggota PSM Maranatha dapat upload dan mengunduh foto, video, dan musik

paduan suara.

3. Pihak luar (diidentifikasi sebagai guest)yang tertarik dengan paduan suara

mahasiswa tersebut(fans) dapat melihat event terdekat dari paduan suara

mahasiswa ini.

4. Semua anggota PSM Maranatha dapat menulis komentar pada foto, video,

music, dan partitur yang diupload oleh admin.

5. Semua anggota dan orang luar dapat membaca artikel yang berkaitan dengan

paduan suara untuk menambah pengetahuan musik klasik mereka.

6. Semua anggota dapat melakukan mencarian terhadap multimedia, serta artikel

dan event yang di upload.

6.2 Saran

Saran yang dapat diberikan pada PSM Maranatha adalah,:

1. Adanya backup database yang langsung dikirimkan ke media penyimpanan

online agar lebih terjaga keamanan databasenya.

2. Adanya aplikasi pembaca partitur yang langung memutar audio partitur.

3. Penjualan online (tiket, souvernir) agar divisi fund raising dapat menjual

barang secara online.

4. Kalender terdapat gambar/foto dari acara atau foto dari member yang

(16)

104

DAFTAR PUSTAKA

Whitten JL, Lonnie D. Bentley, Kevin C.Dittman.(2005). Sistem Analysis

and Design Method.New York : Mc Graw Hill

Jogianto HM, Akt., MBA, Ph.D.(1995). Analisis dan Desain Sistem

Informasi : Pendekatan Terstruktur. Yogyakarta : Andi

Kadir, A. (2009). Dasar Perencanaan dan Implementasi Database

Relasional. Yogyakarta: Penerbit Andi.

Madcoms (2009). Langsung bisa membangun website professional