BAB III ANALISA DAN PEMODELAN

(1)

vi

ABSTRAK

Sepuluh tahun terakhir ini internet dan situs menjadi sangat populer. Internet membuat perkembangan terhadap segala hal terutama komunikasi. “the Eden” yang merupakan salah satu grup band indie di Bandung – Indonesia yang memiliki penggemar cukup banyak adalah salah satu komunitas yang membutuhkan informasi secara cepat, tepat dan aktual. Dikarenakan kebutuhan informasi yang semakin meningkat, maka “the Eden” membutuhkan suatu sistem aplikasi berupa situs yang dapat menampung kebutuhan akan informasi dan sarana komunikasi dari seluruh penggemar. Melalui laporan ini akan diketahui bagaimana cara membuat keseluruhan aplikasi situs “the Eden”.

(2)

vii

DAFTAR ISI

LEMBAR PENGESAHAN ... ii LEMBAR PERNYATAAN PERSETUJUAN PUBLIKASI ILMIAH ... iii SURAT PERNYATAAN ORISINALITAS KARYA ... iv KATA PENGANTAR ... v ABSTRAK ... vi DAFTAR ISI ... vii DAFTAR GAMBAR ... ix DAFTAR TABEL ... xiii DAFTAR LAMPIRAN ... xvi BAB I PENDAHULUAN ... 1 1.1 Latar Belakang ... 1 1.2 Rumusan Masalah ... 1 1.3 Tujuan ... 1 1.4 Batasan Masalah ... 2 1.5 Sistematika Pembahasan ... .3 1.6 Time Schedule ... 4 BAB II DASAR TEORI ... 5 2.1 Internet... 5 2.2 HTML (Hyper Text Markup Language) ... 5 2.3 JavaScript ... 6 2.4 Basis Data ... 8 2.5 PHP dan MySQL ... 11 2.5.1 PHP: Hypertext Prepocessor ... 13 2.5.2 MySQL ... 14 BAB III ANALISA DAN PEMODELAN ... 15 3.1 Arsitektur Aplikasi Sistem ... 15 3.1.1 Topologi Jaringan ... 15 3.1.2 Disain Perangkat Lunak ... 16 3.1.2.1 Aliran Informasi pada Data Flow Diagram (DFD) ... 20 3.1.2.2 Kamus Data ... 23 3.1.2.3 Spesifikasi Proses ... 27 3.2 Diagram Relasi Entitas (ER‐Diagram) ... 39

(3)

viii 3.2.1 Tabel Relasi Entitas (ER‐Table) ... 40 3.2.2 Skema Relasi Entitas (ER‐Schema) ... 42 3.3 Web Map dan Tampilan ... 43 3.4 Perancangan User Interface ... 45 3.4.1 Halaman Utama “the Eden” ... 45 3.4.2 Halaman Setelah Login ... 49 3.4.3 Halaman Admin Panel ... 55 BAB IV PERANCANGAN DAN IMPLEMENTASI ... 64 4.1 Screenshot Aplikasi Pada Halaman Utama ... 64 4.2 Screenshot Aplikasi Pada Halaman Setelah Login ... 71 4.3 Screenshot Aplikasi Pada Halaman Administration Panel ... 84 BAB V PENGUJIAN ... 102 5.1 Rencana Pengujian Proses Sistem Terimplementasi ... 102 5.1.1 Pengujian Terhadap Tiap Proses ... 102 5.2.2 Pengujian Terhadap Pengguna ... 103 5.2 Laporan Hasil Evaluasi Aplikasi Produk ... 110 5.2.1 Evaluasi Perumusan Masalah ... 110 5.2.2 Evaluasi Tujuan ... 110 5.2.3 Evaluasi Aplikasi Produk ... 111 BAB VI KESIMPULAN DAN SARAN ... 114 6.1 Keterkaitan Kesimpulan dengan Hasil Evaluasi ... 114 6.2 Keterkaitan Saran dengan Hasil Evaluasi ... 114 DAFTAR PUSTAKA ... xvii

(4)

ix

DAFTAR GAMBAR

Gambar 2.1 PHP Usage for Apryl 2007 ... 11 Gambar 2.2 PHP on Internet ... 11 Gambar 3.1 Topologi Jaringan ... 15 Gambar 3.2 Diagram Konteks (DFD Level 0) ... 16 Gambar 3.3 Data Flow Diagram Level 1 ... 17 Gambar 3.4 Data Flow Diagram Level 2 Proses 7 (Login dan Lupa Password) ... 17 Gambar 3.5 Data Flow Diagram Level 3 Proses 7.1 (Verifikasi Login) ... 18 Gambar 3.6 Data Flow Diagram Level 4 Proses 7.1.3 (Pesan Pribadi) ... 18 Gambar 3.7 Data Flow Diagram Level 5 Proses 7.1.4 (Forum Diskusi) ... 19 Gambar 3.8 Data Flow Diagram Level 6 Proses 7.1.5 (Panel Anggota) ... 19 Gambar 3.9 Data Flow Diagram Level 7 Proses 7.1.6 (Panel Administrator) ... 20 Gambar 3.10 Diagram Relasi Entitas (ER‐Diagram) ... 39 Gambar 3.11 Skema Relasi Entitas (ER‐Schema) ... 42 Gambar 3.12 Web Map ... 43 Gambar 3.13 Struktur Tampilan Untuk Pengguna Tidak Login (Guest) ... 44 Gambar 3.14 Struktur Tampilan Untuk Anggota ... 44 Gambar 3.15 Struktur Tampilan Untuk Panel Admin ... 45 Gambar 3.16 Disain Halaman Utama ... 45 Gambar 3.17 Disain Halaman the Band... 46 Gambar 3.18 Disain Halaman Media Gallery ... 46 Gambar 3.19 Disain Halaman Guest Book ... 47 Gambar 3.20 Disain Halaman Register ... 47 Gambar 3.21 Disain Halaman Lupa Password (Masukan Username) ... 48 Gambar 3.22 Disain Halaman Lupa Password (Pertanyaan Rahasia) ... 48 Gambar 3.23 Disain Halaman Lupa Password (Masukan Password Baru) ... 48 Gambar 3.24 Disain Halaman Testament ... 49 Gambar 3.25 Disain Halaman Message Board (Daftar Topik) ... 49 Gambar 3.26 Disain Halaman Message Board (Buat Topik Baru) ... 50 Gambar 3.27 Disain Halaman Message Board (Lihat Pesan Topik)... 50 Gambar 3.28 Disain Halaman Message Board (Balas Pesan Topik) ... 50 Gambar 3.29 Disain Halaman Message Board (Moderate Topik) ... 51 Gambar 3.30 Disain Halaman Private Message (Utama) ... 51

(5)

x Gambar 3.31 Disain Halaman Private Message (Tulis Pesan) ... 51 Gambar 3.32 Disain Halaman Private Message (Daftar Pesan Keluar) ... 52 Gambar 3.33 Disain Halaman Private Message (Lihat Pesan Keluar) ... 52 Gambar 3.34 Disain Halaman Private Message (Daftar Pesan Masuk) ... 52 Gambar 3.35 Disain Halaman Private Message (Lihat Pesan Masuk) ... 53 Gambar 3.36 Disain Halaman User Control Panel (Utama) ... 53 Gambar 3.37 Disain Halaman User Control Panel (Ganti Email dan Password) ... 53 Gambar 3.38 Disain Halaman User Control Panel (Ganti Profil) ... 54 Gambar 3.39 Disain Halaman User Control Panel (Panel Aktifasi Keanggotaan) ... 54 Gambar 3.40 Disain Halaman User Control Panel (Panel Pengaturan Tingkat Keanggotaan) 54 Gambar 3.41 Disain Halaman User Control Panel (Panel Blokir Keanggotaan) ... 55 Gambar 3.42 Disain Halaman Order ... 55 Gambar 3.43 Disain Halaman Utama (Admin Index) ... 56 Gambar 3.44 Disain Halaman Site Admin (Set News) ... 56 Gambar 3.45 Disain Halaman Site Admin (Membuat Berita) ... 56 Gambar 3.46 Disain Halaman Site Admin (Mengubah Berita) ... 57 Gambar 3.47 Disain Halaman Site Admin (Set Music Gallery)... 57 Gambar 3.48 Disain Halaman Site Admin (Membuat Album Musik) ... 57 Gambar 3.49 Disain Halaman Site Admin (Mengubah Album Musik) ... 58 Gambar 3.50 Disain Halaman Site Admin (Meng‐upload Musik) ... 58 Gambar 3.51 Disain Halaman Site Admin (Mengubah Musik) ... 58 Gambar 3.52 Disain Halaman Site Admin (Set Photo Gallery) ... 59 Gambar 3.53 Disain Halaman Site Admin (Membuat Album Foto) ... 59 Gambar 3.54 Disain Halaman Site Admin (Mengubah Album Foto) ... 59 Gambar 3.55 Disain Halaman Site Admin (Meng‐upload Gambar) ... 60 Gambar 3.56 Disain Halaman Site Admin (Mengubah Gambar) ... 60 Gambar 3.57 Disain Halaman Site Admin (Print Order) ... 60 Gambar 3.58 Disain Halaman Site Admin (Print Preview) ... 61 Gambar 3.59 Disain Halaman Site Admin (Set Guest Book) ... 61 Gambar 3.60 Disain Halaman User Admin (Ban Control) ... 61 Gambar 3.61 Disain Halaman User Admin (Management) ... 62 Gambar 3.62 Disain Halaman User Admin (Permissions) ... 62 Gambar 3.63 Disain Halaman User Admin (Mengubah Tingkat Keanggotaan Dari Anggota) . 62 Gambar 3.64 Disain Halaman User Admin (Ranks) ... 63

(6)

xi Gambar 3.65 Disain Halaman User Admin (Menambah Grup Anggota) ... 63 Gambar 3.66 Disain Halaman User Admin (Mengubah Grup Anggota) ... 63 Gambar 4.1 Screenshot Halaman Utama (Home) ... 64 Gambar 4.2 Screenshot Halaman the Band ... 65 Gambar 4.3 Screenshot Halaman Media Gallery ... 66 Gambar 4.4 Screenshot Halaman Guest Book ... 67 Gambar 4.5 Screenshot Halaman Register ... 68 Gambar 4.6 Screenshot Halaman Lupa Password (Masukan Username) ... 69 Gambar 4.7 Screenshot Halaman Lupa Password (Pertanyaan Rahasia) ... 69 Gambar 4.8 Screenshot Halaman Lupa Password (Masukan Password Baru) ... 70 Gambar 4.9 Screenshot Halaman Testament ... 71 Gambar 4.10 Screenshot Halaman Message Board (Daftar Topik) ... 72 Gambar 4.11 Screenshot Halaman Message Board (Buat Topik Baru) ... 72 Gambar 4.12 Screenshot Halaman Message Board (Lihat Pesan Topik) ... 73 Gambar 4.13 Screenshot Halaman Message Board (Balas Pesan Topik) ... 73 Gambar 4.14 Screenshot Halaman Message Board (Moderate Topik) ... 74 Gambar 4.15 Screenshot Halaman Private Message (Utama) ... 75 Gambar 4.16 Screenshot Halaman Private Message (Tulis Pesan) ... 75 Gambar 4.17 Screenshot Halaman Private Message (Daftar Pesan Keluar) ... 76 Gambar 4.18 Screenshot Halaman Private Message (Lihat Pesan Keluar) ... 76 Gambar 4.19 Screenshot Halaman Private Message (Daftar Pesan Masuk) ... 77 Gambar 4.20 Screenshot Halaman Private Message (Lihat Pesan Masuk) ... 77 Gambar 4.21 Screenshot Halaman User Control Panel (Utama) ... 78 Gambar 4.22 Screenshot Halaman User Control Panel (Ganti Email dan Password) ... 79 Gambar 4.23 Screenshot Halaman User Control Panel (Ganti Profil) ... 79 Gambar 4.24 Screenshot Halaman User Control Panel (Panel Aktifasi Keanggotaan) ... 80 Gambar 4.25 Screenshot Halaman User Control Panel (Pengaturan Tingkat Keanggotaan) .. 80 Gambar 4.26 Screenshot Halaman User Control Panel (Panel Blokir Keanggotaan) ... 81 Gambar 4.27 Screenshot Halaman Order ... 81 Gambar 4.28 Screenshot Halaman Admin Utama (Admin Index) ... 84 Gambar 4.29 Screenshot Halaman Site Admin (Set News) ... 85 Gambar 4.30 Screenshot Halaman Site Admin (Membuat Berita) ... 85 Gambar 4.31 Screenshot Halaman Site Admin (Mengubah Berita) ... 86 Gambar 4.32 Screenshot Halaman Site Admin (Set Music Gallery) ... 87

(7)

xii Gambar 4.33 Screenshot Halaman Site Admin (Membuat Album musik) ... 87 Gambar 4.34 Screenshot Halaman Site Admin (Mengubah Album musik) ... 88 Gambar 4.35 Screenshot Halaman Site Admin (Meng‐upload Musik) ... 88 Gambar 4.36 Screenshot Halaman Site Admin (Mengubah Musik) ... 89 Gambar 4.37 Screenshot Halaman Site Admin (Set Photo Gallery) ... 90 Gambar 4.38 Screenshot Halaman Site Admin (Membuat Album Foto) ... 91 Gambar 4.39 Screenshot Halaman Site Admin (Mengubah Album foto) ... 91 Gambar 4.40 Screenshot Halaman Site Admin (Meng‐upload Gambar) ... 92 Gambar 4.41 Screenshot Halaman Site Admin (Mengubah Gambar) ... 92 Gambar 4.42 Screenshot Halaman Site Admin (Print Order) ... 94 Gambar 4.43 Screenshot Halaman Site Admin (Print Preview) ... 94 Gambar 4.44 Screenshot Halaman Site Admin (Set Guest Book) ... 95 Gambar 4.45 Screenshot Halaman User Admin (Ban Control) ... 96 Gambar 4.46 Screenshot Halaman User Admin (Management) ... 97 Gambar 4.47 Screenshot Halaman User Admin (Permissions) ... 98 Gambar 4.48 Screenshot Halaman User Admin (Mengubah Tingkat Keanggotaan Anggota) 98 Gambar 4.49 Screenshot Halaman User Admin (Ranks)... 99 Gambar 4.50 Screenshot Halaman User Admin (Menambah Grup Anggota) ... 100 Gambar 4.51 Screenshot Halaman User Admin (Mengubah Grup Anggota) ... 100 Gambar 5.1 Grafik Hasil Evaluasi Pengguna Terhadap Disain ... 112 Gambar 5.2 Grafik Hasil Evaluasi Pengguna Terhadap User Interface ... 112 Gambar 5.3 Grafik Hasil Evaluasi Pengguna Terhadap Informasi dan Komunikasi ... 113 Gambar 5.4 Grafik Hasil Evaluasi Pengguna Terhadap Sistim Pemesanan ... 113

(8)

xiii

DAFTAR TABEL

Tabel 1.1 Jadwal Rencana Kerja ... 4 Tabel 2.1 Kelebihan dan Kekurangan JavaScript ... 6 Tabel 2.2 Tabel Aritmatika... 10 Tabel 2.3 Operator Pembandingan ... 10 Tabel 2.4 Operator Logika ... 10 Tabel 2.5 Operator Karakter ... 10 Tabel 2.6 Tabel Perbandingan msSQL Server 2000 dengan MySQL ... 12 Tabel 3.1 Keterangan Aliran Informasi pada Data Flow Diagram (DFD) ... 20 Tabel 3.2 Kamus Data ... 23 Tabel 3.3 Proses Registrasi Menjadi Anggota ... 27 Tabel 3.4 Proses Mengisi Buku Tamu ... 27 Tabel 3.5 Proses Melihat Berita dan Acara ... 28 Tabel 3.6 Proses Melihat Galeri Foto ... 28 Tabel 3.7 Proses Melihat Galeri Musik ... 29 Tabel 3.8 Proses Melihat Profil Personil ... 29 Tabel 3.9 Proses Mengisi Testimonial ... 29 Tabel 3.10 Proses Memesan CD ... 30 Tabel 3.11 Proses Mengirim Pesan Pribadi ... 30 Tabel 3.12 Proses Membaca Pesan Pribadi ... 31 Tabel 3.13 Proses Membuat Topik Diskusi ... 31 Tabel 3.14 Proses Membalas Topik Diskusi ... 31 Tabel 3.15 Proses Moderate Topik Diskusi ... 32 Tabel 3.16 Proses Pengaturan Moderator Forum ... 32 Tabel 3.17 Proses Menejemen Keanggotaan ... 33 Tabel 3.18 Proses Ubah Profil Keanggotaan ... 33 Tabel 3.19 Proses Menejemen Berita ... 34 Tabel 3.20 Proses Menejemen Galeri Foto ... 34 Tabel 3.21 Proses Menejemen Galeri Musik ... 35 Tabel 3.22 Proses Menejemen Anggota ... 35 Tabel 3.23 Proses Menejemen Buku Tamu ... 36 Tabel 3.24 Proses Mencetak Pemesanan CD ... 36 Tabel 3.25 Proses Logout ... 36

(9)

xiv Tabel 3.26 Proses Verifikasi Lupa Password ... 37 Tabel 3.27 Proses Report ... 37 Tabel 3.28 Tabel eden_ranks ... 40 Tabel 3.29 Tabel eden_users ... 40 Tabel 3.30 Tabel eden_ban ... 40 Tabel 3.31 Tabel eden_news ... 40 Tabel 3.32 Tabel eden_musics_album ... 40 Tabel 3.33 Tabel eden_musics ... 40 Tabel 3.34 Tabel eden_photos_album ... 40 Tabel 3.35 Tabel eden_photos ... 41 Tabel 3.36 Tabel eden_orders ... 41 Tabel 3.37 Tabel eden_orders_item ... 41 Tabel 3.38 Tabel eden_privateMsg ... 41 Tabel 3.39 Tabel eden_forum_topics ... 41 Tabel 3.40 Tabel eden_forum_topics_post ... 41 Tabel 3.41 Tabel eden_guestbook ... 41 Tabel 5.1 Fungsionalitas Fungsi Aplikasi ... 103 Tabel 5.2 Test Case Form Login ... 104 Tabel 5.3 Test Case Form Guest Book... 104 Tabel 5.4 Test Case Form Register ... 104 Tabel 5.5 Test Case Form Testament ... 105 Tabel 5.6 Test Case Form Post New Topics ... 105 Tabel 5.7 Test Case Form Post Reply Topics ... 105 Tabel 5.8 Test Case Form Moderate Topics ... 105 Tabel 5.9 Test Case Form Edit Account ... 106 Tabel 5.10 Test Case Form Edit Profile ... 106 Tabel 5.11 Test Case Form Edit signature ... 106 Tabel 5.12 Test Case Form User CP (Rank Management) ... 107 Tabel 5.13 Test Case Form User CP (Ban Control) ... 107 Tabel 5.14 Test Case Form Compose New Message ... 107 Tabel 5.15 Test Case Form Admin Create News ... 107 Tabel 5.16 Test Case Form Admin Create New Music Album ... 108 Tabel 5.17 Test Case Form Admin Upload New Music File ... 108 Tabel 5.18 Test Case Form Admin Create New Photo Album ... 108

(10)

xv Tabel 5.19 Test Case Form Admin Upload New Photo Image ... 108 Tabel 5.20 Test Case Form Admin Search Order ... 109 Tabel 5.21 Test Case Form Admin Ban Control ... 109 Tabel 5.22 Test Case Form Admin Permissions ... 109 Tabel 5.23 Test Case Form Admin Create Ranks ... 109

(11)

xvi

DAFTAR LAMPIRAN

i. Questionnaire ... xviii ii. Source Code ... xxxviii iii. Data Penulis ... cdlxxiii