UNIVERSITAS BINA NUSANTARA
Jurusan Teknik Informatika Skripsi Sarjana Komputer Semester Ganjil tahun 2005/2006
ANALISIS DAN PERANCANGAN
WEB COMMUNITY
BERBASIS INTERNET
PADA UKM BINA NUSANTARA ENGLISH CLUB
Jasin Tanuwijaya 0600610664
Indra 0600630685
Lenny Lestari 0600650592
Kelas / Kelompok : 07PGT / 07
Abstrak
Tujuan dari penulisan skripsi ini adalah menganalisis dan merancang suatu web
community untuk UKM Bina Nusantara English Club (BNEC). Dengan adanya web
community ini, diharapkan memudahkan BNEC untuk mensentralisasikan dan menyebarkan informasi. Selain itu, dengan adanya fitur-fitur yang menarik dan interaktif, para member BNEC akan dapat terus berhubungan satu sama lain, walaupun mereka telah lulus dan berstatus alumni. Metode penelitian yang digunakan antara lain metode analisis dengan observasi, penyebaran angket, dan wawancara. Metode kepustakaan, dan metode perancangan yang menggunakan Data Flow Diagram, dan State Transition Diagram. Dengan adanya web community ini, BNEC mempunyai suatu media tambahan untuk melakukan fungsi organisasionalnya. BNEC mempunyai suatu pusat informasi yang tersentralisasi, di mana semua anggota dan pihak luar bisa bebas mengakses. Dan juga, BNEC mempunyai suatu wadah untuk menjembatani komunikasi antara pengurus, seluruh anggota, dan alumni.
Kata kunci:
KATA PENGANTAR
Segala hormat, puji dan syukur kepada Allah Bapa yang Maha Kuasa atas kasih, penyertaan, serta kekuatan yang diberikan-Nya kepada penulis, sehingga dapat menyelesaikan penulisan dan penelitian skripsi yang berjudul : ANALISIS DAN
PERANCANGAN
WEB COMMUNITY
BERBASIS INTERNET PADA
UKM BINA NUSANTARA ENGLISH CLUB sebagai syarat menyelesaikan
jenjang studi Strata-1 di Universitas Bina Nusantara, Jakarta.
Dalam kesempatan ini penulis ingin mengucapkan terima kasih kepada:
1. Bapak Prof. Dr. Gerardus Polla, M.App.Sc., selaku Rektor Universitas Bina Nusantara, Jakarta.
2. Bapak Ir. Sablin Yusuf, M.Sc., M.comp.Sc., selaku Dekan Fakultas Ilmu Komputer Universitas Bina Nusantara
3. Bapak H.M. Subekti, BE, M.Sc., selaku Kepala Jurusan Teknik Informatika Universitas Bina Nusantara.
4. Bapak Drs. Romli, M.App.comp., selaku dosen pembimbing yang telah banyak memberikan bimbingan dalam penulisan skripsi dari awal hingga akhir.
5. Bapak Soni, S.Kom, MM, selaku mentor yang telah banyak membimbing dan memberikan masukan dalam penulisan skripsi ini dari awal hingga akhir.
6. Pimpinan dan rekan-rekan Bina Nusantara English Club yang telah banyak membantu dalam penulisan skripsi ini.
8. Saudara Efendi, S. Kom yang telah banyak membantu terutama dalam hal desain. 9. Sahabat-sahabat yang telah memberikan dukungan, semangat, dan doa.
Akhir kata, penulis berharap agar skripsi ini dapat bermanfaat bagi pembaca dan pihak-pihak yang membutuhkan, sehingga hasil yang diperoleh dapat lebih disempurnakan dan lebih berguna di masa mendatang.
Jakarta, Januari 2006
DAFTAR ISI
Halaman Judul Luar ... i
Halaman Judul Dalam ... ..ii
Halaman Persetujuan Hardcover ... iii
Halaman Pernyataan Dewan Penguji ... iv
Abstrak ... v
Kata Pengantar ... vi
Daftar Isi ... viii
Daftar Tabel ... xiii
Daftar Gambar... xvi
Daftar Lampiran ... xxiii
BAB 1 PENDAHULUAN...1
1.1 Latar Belakang ... 1
1.2 Ruang Lingkup... 2
1.3 Tujuan dan Manfaat ... 2
1.4 Metodologi ... 3
1.5 Sistematika Penulisan ... 4
BAB 2 LANDASAN TEORI...6
2.1 Internet ... 6
2.1.1 Sejarah Internet ... 6
2.1.2 Definisi Internet ... 7
2.2.1 Pengertian Protokol Internet ... 7
2.2.2 HTTP (Hyper Text Transfer Protocol) ... 7
2.2.3 Transmission Control Protocol / Internet Protocol ... 8
2.3 Teori Internet Service... 8
2.3.1 World Wide Web (WWW) ... 8
2.3.2 URL (Uniform Resource Locators) ... 9
2.3.3 HTML (Hyper Text Markup Language) ... 10
2.4 Pemrograman Internet... 11
2.4.1 PHP ... 11
2.4.2 Web Browser... 12
2.4.3 Web Server... 13
2.5 Definisi Web Community... 14
2.6 Interaksi Manusia dan Komputer ... 14
2.6.1 Sistem Interaktif ... 14
2.6.2 Pedoman untuk Merancang User Interface... 15
2.7 Rekayasa Piranti Lunak... 17
2.7.1 Definisi Rekayasa Piranti Lunak... 17
2.7.2 Model Rekayasa Piranti Lunak ... 19
2.8 Sistem Basis Data... 20
2.8.1 Pengertian Sistem Basis Data ... 20
2.8.2 Komponen-komponen Sistem Basis Data... 21
2.8.3 MySql... 22
2.9 Metode Pengumpulan Data ... 22
2.10.1 Data Flow Diagram (DFD) ... 25
2.10.2 State Transition Diagram (STD) ... 27
2.10.3 Entity Relationship Diagram (ERD)... 29
BAB 3 ANALISIS DAN PERANCANGAN...31
3.1 Analisis Sistem... 31
3.1.1 Gambaran Umum Organisasi... 31
3.1.1.1 Sejarah Singkat Organisasi ... 31
3.1.1.2 Visi dan Misi Organisasi... 32
3.1.1.3 Struktur Organisasi ... 33
3.1.1.4 Tugas dan Wewenang ... 34
3.1.2 Sistem yang Sedang Berjalan... 36
3.1.2.1 Gambaran Umum Sistem Penyebaran Informasi yang Sedang Berjalan ... 36
3.1.2.2 Analisa Permasalahan ... 37
3.1.2.2.1 Analisa Kuesioner ... 37
3.1.2.2.2 Hasil wawancara ... 48
3.1.2.3 Permasalahan yang Dihadapi ... 50
3.1.2.4 Usulan Pemecahan Masalah... 51
3.2 Rancangan Sistem yang Diusulkan... 53
3.2.1 Data Flow Diagram Sistem yang Diusulkan ... 53
3.2.1.1 Data Flow Diagram Konteks... 53
3.2.1.2 Data Flow Diagram Nol ... 55
3.2.1.5 Data Flow Diagram Rinci Proses
Manipulate Information... 58
3.2.2 Data Sistem ... 59
3.2.2.1 Spesifikasi Basis Data ... 59
3.2.2.2 Hubungan Antartabel ... 74
3.2.3 Perancangan Sistem ... 75
3.2.3.1 Struktur Menu ... 75
3.2.3.1.1 Struktur Menu Sebelum Login... 75
3.2.3.1.2 Struktur Menu Member Setelah Login ... 76
3.2.3.1.3 Struktur Menu Admin Setelah Login... 77
3.2.3.2 State Transition Diagram... 78
3.2.3.2.1 State Transition Diagram Sebelum Login ... 78
3.2.3.2.2 State Transition Diagram Member Setelah Login ... 79
3.2.3.2.3 State Transition Diagram Admin Setelah Login ... 80
3.2.4 Spesifikasi Modul ... 81
3.2.4.1 Spesifikasi Modul Nonmember ... 81
3.2.4.2 Spesifikasi Modul Member ... 82
3.2.4.3 Spesifikasi Modul Admin ... 88
3.2.5 Rancangan Layar... 98
3.2.5.1 Rancangan Layar Sebelum Login ... 98
3.2.5.2 Rancangan Layar Member Setelah Login ... 104
BAB 4 IMPLEMENTASI DAN EVALUASI...127
4.1 Spesifikasi Sistem ... 127
4.1.1 Spesifikasi Hardware... 127
4.1.1.1 Spesifikasi Hardware Server ... 127
4.1.1.2 Spesifikasi Hardware Client ... 127
4.1.2 Spesifikasi Software... 128
4.1.2.1 Spesifikasi Software Server ... 128
4.1.2.2 Spesifikasi Software Client ... 128
4.1.3 Sumber Daya Manusia yang Dibutuhkan ... 128
4.2 Prosedur Operasional ... 129
4.2.1 Prosedur Operasional Sebelum Login... 130
4.2.2 Prosedur Operasional Setelah Login... 145
4.2.3 Prosedur Operasional Admin Setelah Login... 159
4.3 Arsitektur Jaringan ... 179
4.4 Estimasi Biaya... 180
4.5 Evaluasi Sistem ... 180
4.5.1 Evaluasi AntarMuka Pemakai ... 180
4.5.2 Evaluasi Kuesioner ... 183
BAB 5 KESIMPULAN DAN SARAN ...188
5.1 Kesimpulan ... 188
5.2 Saran... 188
DAFTAR PUSTAKA ...190
DAFTAR TABEL
Tabel 3.1 Perincian jawaban pertama kuesioner untuk responden
nonpengurus ... 38 Tabel 3.2 Perincian jawaban pertama kuesioner untuk responden pengurus... 39 Tabel 3.3 Perincian jawaban pertanyaan nomor dua kuesioner untuk responden
nonpengurus ... 39 Tabel 3.4 Perincian jawaban pertanyaan nomor dua kuesioner untuk
responden pengurus... 40 Tabel 3.5 Perincian jawaban pertanyaan nomor ketiga kuesioner untuk
responden nonpengurus... 40 Tabel 3.6 Perincian jawaban pertanyaan nomor tiga kuesioner untuk
responden pengurus... 41 Tabel 3.7 Perincian jawaban pertanyaan nomor empat kuesioner untuk
responden nonpengurus... 42 Tabel 3.8 Perincian jawaban pertanyaan nomor empat kuesioner
untuk responden pengurus ... 42 Tabel 3.9 Perincian jawaban pertanyaan nomor lima kuesioner
untuk responden nonpengurus ... 43 Tabel 3.10 Perincian jawaban pertanyaan nomor lima kuesioner
untuk responden pengurus ... 43 Tabel 3.11 Perincian jawaban pertanyaan nomor enam kuesioner ... 44 Tabel 3.12 Perincian jawaban pertanyaan nomor tujuh kuesioner
Tabel 3.13 Perincian jawaban pertanyaan nomor tujuh kuesioner
untuk responden pengurus ... 45
Tabel 3.14 Perincian jawaban pertanyaan nomor delapan kuesioner untuk responden nonpengurus ... 46
Tabel 3.15 Perincian jawaban pertanyaan nomor delapan kuesioner untuk responden pengurus ... 46
Tabel 3.16 Perincian jawaban pertanyaan nomor sembilan kuesioner untuk responden nonpengurus ... 47
Tabel 3.17 Perincian jawaban pertanyaan nomor sembilan kuesioner untuk responden pengurus ... 47
Tabel 3.18 Tabel Awards ... 59
Tabel 3.19 Tabel Master_access_bulletin_board ... 60
Tabel 3.20 Tabel master_division ... 60
Tabel 3.21 Tabel Master_event... 61
Tabel 3.22 Tabel master_faq... 61
Tabel 3.23 Tabel Master_file_sharing ... 62
Tabel 3.24 Tabel Master_photo_album ... 62
Tabel 3.25 Tabel Master_polling_question... 63
Tabel 3.26 Tabel Master_position... 63
Tabel 3.27 Tabel Master_quote... 64
Tabel 3.28 Tabel Master_testi... 64
Tabel 3.29 Tabel Tabel_member ... 65
Tabel 3.30 Tabel Transaksi_announcement... 66
Tabel 3.32 Tabel Transaksi_bulletin_board_alumni... 67
Tabel 3.33 Tabel Transaksi_bulletin_board_member... 68
Tabel 3.34 Tabel Transaksi_bulletin_board_pengurus ... 68
Tabel 3.35 Tabel Transaksi_jadwal ... 69
Tabel 3.36 Tabel Transaksi_news... 69
Tabel 3.37 Tabel Transaksi_pesan ... 70
Tabel 3.38 Tabel Transaksi_polling... 70
Tabel 3.39 Tabel Transaksi_polling_comment... 71
Tabel 3.40 Tabel Master_major ... 71
Tabel 3.41 Tabel Master_polling_answer... 72
Tabel 3.42 Tabel Master_religion ... 72
Tabel 3.43 Tabel Master_status ... 72
Tabel 3.44 Tabel Transaksi_photo_album ... 73
Tabel 4.1 Perincian jawaban pertama kuesioner evaluasi... 184
Tabel 4.2 Perincian jawaban nomor dua kuesioner evaluasi ... 184
Tabel 4.3 Perincian jawaban nomor tiga kuesioner evaluasi ... 185
Tabel 4.4 Perincian jawaban nomor empat kuesioner evaluasi ... 185
Tabel 4.5 Perincian jawaban nomor lima kuesioner evaluasi ... 186
Tabel 4.6 Perincian jawaban nomor enam kuesioner evaluasi... 186
DAFTAR GAMBAR
Gambar 2.1 Linear Sequential Model... 19
Gambar 2.2 Information Flow Model... 26
Gambar 2.3 De Marco dan Yourdon Symbols... 26
Gambar 2.4 Simbol State... 28
Gambar 2.5 Simbol Transition State... 28
Gambar 3.1 Struktur Organisasi ... 33
Gambar 3.2 Pie chart jawaban pertanyaan nomor ketiga kuesioner untuk responden nonpengurus ... 41
Gambar 3.3 Pie chart jawaban pertanyaan nomor tiga kuesioner untuk responden pengurus ... 41
Gambar 3.4 Pie chart jawaban pertanyaan nomor lima kuesioner untuk responden nonpengurus ... 43
Gambar 3.5 Pie chart jawaban pertanyaan nomor lima kuesioner untuk responden pengurus ... 44
Gambar 3.6 Data Flow Diagram Konteks... 53
Gambar 3.7 Data Flow Diagram Nol ... 55
Gambar 3.8 Data Flow Diagram Rinci Proses Give Information... 56
Gambar 3.9 Data Flow Diagram Rinci Proses Interact in Community... 57
Gambar 3.10 Data Flow Diagram Rinci Proses Manipulate Information... 58
Gambar 3.11 Hubungan antartabel ... 74
Gambar 3.12 Struktur Menu Sebelum Login... 75
Gambar 3.14 Struktur Menu Admin Setelah Login... 77
Gambar 3.15 State Transition Diagram Sebelum Login ... 78
Gambar 3.16 State Transition Diagram Member Setelah Login ... 79
Gambar 3.17 State Transition Diagram Admin Setelah Login ... 80
Gambar 3.18 Rancangan Layar Index Sebelum Login ... 98
Gambar 3.19 Rancangan Layar Events... 99
Gambar 3.20 Rancangan Layar Committee... 99
Gambar 3.21 Rancangan Layar About Us... 100
Gambar 3.22 Rancangan Layar FAQ... 100
Gambar 3.23 Rancangan Layar Activities... 101
Gambar 3.24 Rancangan Layar News... 101
Gambar 3.25 Rancangan Layar Achievements... 102
Gambar 3.26 Rancangan Layar Testimonial... 102
Gambar 3.27 Rancangan Layar Contact Us... 103
Gambar 3.28 Rancangan Layar Index Setelah Login ... 104
Gambar 3.29 Rancangan Layar Profile... 105
Gambar 3.30 Rancangan Layar Edit Profile... 105
Gambar 3.31 Rancangan Layar Upload a Photo... 106
Gambar 3.32 Rancangan Layar Message... 106
Gambar 3.33 Rancangan Layar Send Message... 107
Gambar 3.34 Rancangan Layar Bulletin Board... 107
Gambar 3.35 Rancangan Layar Polling... 108
Gambar 3.36 Rancangan Layar Polling Detail... 108
Gambar 3.38 Rancangan Layar Announcement... 110
Gambar 3.39 Rancangan Layar View Friends: Thumbnail View... 110
Gambar 3.40 Rancangan Layar View Friends: Detail View... 111
Gambar 3.41 Rancangan Layar Friends Search Result: Thumbnail View... 111
Gambar 3.42 Rancangan Layar Friends Search Result: Detail View... 112
Gambar 3.43 Rancangan Layar Friends Profile... 112
Gambar 3.44 Rancangan Layar Photo Album... 113
Gambar 3.45 Rancangan Layar Photo Album Detail... 113
Gambar 3.46 Rancangan Layar File Sharing... 114
Gambar 3.47 Rancangan Layar Index Admin ... 115
Gambar 3.48 Rancangan Layar Admin Member... 115
Gambar 3.49 Rancangan Layar Add Member... 116
Gambar 3.50 Rancangan Layar Event Management... 116
Gambar 3.51 Rancangan Layar Add/Edit Event... 117
Gambar 3.52 Rancangan Layar News Management... 117
Gambar 3.53 Rancangan Layar Add/Edit News... 118
Gambar 3.54 Rancangan Layar Admin Achievement... 118
Gambar 3.55 Rancangan Layar Add/Edit Achievement... 119
Gambar 3.56 Rancangan Layar Admin Testimonial... 119
Gambar 3.57 Rancangan Layar View Testimonial... 120
Gambar 3.58 Rancangan Layar Admin Message... 120
Gambar 3.59 Rancangan Layar Admin Polling... 121
Gambar 3.60 Rancangan Layar Admin Announcement... 121
Gambar 3.62 Rancangan Layar Add/Edit Quote... 122
Gambar 3.63 Rancangan Layar Admin Contact... 123
Gambar 3.64 Rancangan Layar Admin Major... 123
Gambar 3.65 Rancangan Layar Admin Position... 124
Gambar 3.66 Rancangan Layar Admin Religion... 124
Gambar 3.67 Rancangan Layar Admin Status... 125
Gambar 3.68 Rancangan Layar Admin Division... 125
Gambar 3.69 Rancangan Layar Admin Vision and Mission... 126
Gambar 4.1 Diagram Pembagian Layar Web Community... 129
Gambar 4.2 Diagram Pembagian Site Management... 130
Gambar 4.3 Tampilan Halaman Home Sebelum Login... 131
Gambar 4.4 Tampilan Halaman Activities: Routine... 132
Gambar 4.5 Tampilan Halaman Activities: Non-routine... 133
Gambar 4.6 Tampilan Halaman Events: Upcoming... 134
Gambar 4.7 Tampilan Halaman Events: Portfolio... 135
Gambar 4.8 Tampilan Halaman Events: Others... 136
Gambar 4.9 Tampilan Halaman News... 137
Gambar 4.10 Tampilan Halaman Committee... 138
Gambar 4.11 Tampilan Halaman Achievements... 139
Gambar 4.12 Tampilan Halaman About Us: Now and in the Future... 140
Gambar 4.13 Tampilan Halaman AboutUs: Behind the History... 140
Gambar 4.14 Tampilan Halaman About Us: the Logo... 141
Gambar 4.15 Tampilan Halaman Testimonials... 142
Gambar 4.17 Tampilan Halaman Contact Us... 144
Gambar 4.18 Tampilan Halaman Forget Password... 144
Gambar 4.19 Tampilan Halaman Home setelah Login... 145
Gambar 4.20 Tampilan Halaman Profile... 146
Gambar 4.21 Tampilan Halaman Edit Profile... 147
Gambar 4.22 Tampilan Halaman Upload a Photo... 147
Gambar 4.23 Tampilan Halaman Inbox... 148
Gambar 4.24 Tampilan Halaman Read Message... 149
Gambar 4.25 Tampilan Halaman Send Message... 149
Gambar 4.26 Tampilan Halaman Announcement... 150
Gambar 4.27 Tampilan Halaman Bulletin Board... 151
Gambar 4.28 Tampilan Halaman Polling... 152
Gambar 4.29 Tampilan Halaman Add New Polling... 153
Gambar 4.30 Tampilan Halaman View Polling Detail... 154
Gambar 4.31 Tampilan Halaman View Voters... 154
Gambar 4.32 Tampilan Halaman View Friends: Thumbnail View... 155
Gambar 4.33 Tampilan Halaman View Friends: Detail View... 156
Gambar 4.34 Tampilan Halaman Photo Album... 157
Gambar 4.35 Tampilan Halaman Photo Album View Detail... 157
Gambar 4.36 Tampilan Halaman File Sharing... 158
Gambar 4.37 Tampilan Halaman Index dari Site Management... 159
Gambar 4.38 Tampilan Halaman Schedule Management... 160
Gambar 4.39 Tampilan Halaman Add Schedule... 160
Gambar 4.41 Tampilan Halaman Add/Edit Event... 161
Gambar 4.42 Tampilan Halaman News Management... 162
Gambar 4.43 Tampilan Halaman Add/Edit News... 162
Gambar 4.44 Tampilan Halaman Achievement Management... 163
Gambar 4.45 Tampilan Halaman Add/Edit Achievement... 163
Gambar 4.46 Tampilan Halaman Testimonial Management... 164
Gambar 4.47 Tampilan Halaman View Testimonial... 164
Gambar 4.48 Tampilan Halaman FAQ Management... 165
Gambar 4.49 Tampilan Halaman Add/Edit a FAQ... 165
Gambar 4.50 Tampilan Halaman Contacts Management... 166
Gambar 4.51 Tampilan Halaman Reply Contact... 166
Gambar 4.52 Tampilan Halaman Quotes Management... 167
Gambar 4.53 Tampilan Halaman Add/Edit Quote... 167
Gambar 4.54 Tampilan Halaman member management... 168
Gambar 4.55 Tampilan Halaman Add Multiple Member... 169
Gambar 4.56 Tampilan Halaman Add/Edit Member... 169
Gambar 4.57 Tampilan Halaman Message Management... 170
Gambar 4.58 Tampilan Halaman Announcement Management... 170
Gambar 4.59 Tampilan Halaman Bulletin Board Management... 171
Gambar 4.60 Tampilan Halaman Polling Management... 171
Gambar 4.61 Tampilan Halaman Photo Album Management... 172
Gambar 4.62 Tampilan Halaman File Sharing Management... 172
Gambar 4.63 Tampilan Halaman Major Management... 173
Gambar 4.65 Tampilan Halaman Position Management... 174
Gambar 4.66 Tampilan Halaman Add/Edit Position... 174
Gambar 4.67 Tampilan Halaman Religion Management... 175
Gambar 4.68 Tampilan Halaman Add/edit Religion... 175
Gambar 4.69 Tampilan Halaman Status Management... 176
Gambar 4.70 Tampilan Halaman Add/Edit Status... 176
Gambar 4.71 Tampilan Halaman Division Management... 177
Gambar 4.72 Tampilan Halaman Add/Edit Division... 177
Gambar 4.73 Tampilan Halaman Vision & Mission Management... 178
Gambar 4.74 Tampilan Halaman Edit Vision ... 178
Gambar 4.75 Tampilan Halaman Edit Mission ... 179
Gambar 4.76 Rancangan arsitektur jaringan ... 179
Gambar 4.77 Contoh Penggunaan Umpan Balik ... 181
Gambar 4.78 Contoh Dialog Keadaan Akhir ... 181
