PERANCANGAN DAN PEMBUATAN WEBSITE SEBAGAI MEDIA INFORMASI PADA YAYASAN PONDOK PESANTREN HIDAYATULLAH LAPORAN TUGAS AKHIR Disusun Sebagai Salah Satu Syarat Untuk Menyelesaikan Pendidikan Program Diploma 3 oleh MINKA PRAYOGO SUKMA NIM : 1005102030 PROGRAM STUDI MANAJEMEN INFORMATIKA JURUSAN TEKNIK ELEKTRO POLITEKNIK NEGERI MEDAN MEDAN 2013 1
iii ABSTRAK Internet merupakan jaringan komputer global di seluruh dunia sebagai media komunikasi dan informasi modern yang dapat memberikan serta menampilkan berbagai informasi dan data kepada publik. Penyampaian informasi pada Yayasan Pondok Pesantren Hidayatullah masih sangat sederhana masyarakat hanya bisa datang langsung dan hanya bisa mengetahui dari cerita-cerita orang lain, membuat masyarakat dan para siswa kesulitan dalam mencari informasi tentang Yayasan Pondok Pesantren Hidayatullah dalam hal daftar santri, guru dan mata pelajaran. Pembangunan sistem ini menggunakan perangkat lunak Adobe Dreamweaver CS5, dan AppServ memiiki paket-paket aplikasi seperti Apache Web Server, PHP dan MySQL. Pada tugas akhir ini adalah untuk membangun website media informasi yang mampu memberikan pelayanan kepada masyarakat dan dapat diakses dimana saja dan kapan saja. Dari aplikasi yang dibangun menghasilkan informasi daftar guru, daftar santri, daftar mata pelajaran dan daftar nilai. Keyword : Internet, Adobe Dreamweaver CS5, AppServ, Apache Web Server, PHP, MySQL iii
iv KATA PENGANTAR Puji syukur penulis ucapkan kehadiran Allah SWT, yang masih memberikan kesehatan sehingga akhirnya Tugas Akhir ini berhasil diselesaikan dalam waktu yang ditetapkan. Laporan tugas akhir ini berjudul Perancangan Website Sebagai Media Informasi Pada Yayasan Pondok Pesantren Hidayatullah yang disusun sebagai syarat untuk menyelesaikan Program Pendidikan Diploma 3. Selama mengikuti pendidikan dan menyelesaikan laporan Tugas Akhir ini, penulis telah banyak mendapatkan bantuan dan dukungan serta doa dari berbagai pihak. Pada kesempatan ini penulis mengucapkan terima kasih dan penghargaan kepada : 1. M. Syahruddin, ST., MT, selaku Direktur Politeknik Negeri Medan 2. Ir. Rina Anugrahwaty, MT, selaku Ketua Jurusan Elektro Politeknik Negeri Medan 3. Roslina, M.I.T, selaku Kepala Program Studi Manajemen Informatika Politeknik Negeri Medan 4. Rahmad W Sembiring, M.Sc.IT, selaku dosen pembimbing dalam penyusunan laporan tugas akhir yang telah banyak memberikan petunjuk dan bimbingan, sehingga akhirnya penulis bisa menyelesaikan laporan tugas akhir ini dengan sebaik-baiknya. 5. Teristimewa kepada ayah dan ibu atas doa kedua orang tua segala sumber kehidupan saya yang telah membesarkan dan mendidik, yang memiliki peran iv
v yang amat penting dan tak terhingga, sehingga rasanya ucapan terima kasih ini tidaklah cukup untuk menggambarkan wujud penghargaan saya. 6. Rekan-rekan penulis, sesama mahasiswa Program Studi Manajemen Informatika dan semua pihak yang tidak dapat penulis sebutkan satu-persatu yang telah banyak membantu dan baik langsung maupun tidak langsung memberikan saran, pendapat, serta pandangan sehingga laporan tugas akhir ini dapat diselesaikan sebagaimana mestinya, semoga Allah SWT memberikan taufik dan hidayah-nya. Penulis menyadari sepenuhnya bahwa penulisan Tugas Akhir ini masih jauh dari kesempurnaan yang dikarenakan pengtahuan dan pengalaman yang dimiliki penulis masih sangat terbatas, baik secara penyajian, maupun bentuk isinya. Untuk itu penulis mengharapkan saran dan kritik dari berbagai pihak yang bersifat membangun. Penulis berharap semoga Tugas Akhir ini dapat berguna bagi semua pihak yang membacanya. Medan, 16 Agustus 2013 Penulis Minka Prayogo Sukma NIM. 1005102030 v
vi DAFTAR ISI LEMBAR PERSETUJUAN... III I LEMBAR PENGESAHAN... III ABSTRAK... III KATA PENGANTAR... IV DAFTAR ISI... VI DAFTAR GAMBAR... XII DAFTAR TABEL... XVII DAFTAR LAMPIRAN... XVIII BAB 1 PENDAHULUAN... 1 1.1 Latar Belakang... 1 1.2 Rumusan Masalah... 2 1.3 Batasan Masalah... 3 1.4 Tujuan... 3 1.5 Manfaat... 4 1.6 Metode Pelaksanaan... 4 1.7 Sistematik Penulisan... 5 BAB 2 TINJAUAN PUSTAKA... 8 2.1 Website... 8 2.2 Internet... 9 2.3 Media... 10 vi
vii 2.4 Informasi... 11 2.5 Media Informasi... 12 2.6 Rekayasa Perangkat Lunak... 13 2.6.1 Model pada Proses Pengembangan Perangkat Lunak... 13 2.7 Website Sebagai Perangkat Lunak... 16 2.8 Perangkat Lunak Pembangun Sistem... 16 2.8.1 Apache... 16 2.8.2 PHP... 17 2.8.2.1 Pengenalan PHP... 18 2.8.2.2 Menyisipkan Kode Program PHP... 20 2.8.2.3 Variabel dan Tipe Data... 22 2.8.2.4 Konstanta... 24 2.8.2.5 Operator... 24 2.8.3 MySQL... 27 2.8.4 Adobe Dreamweaver... 30 2.9 Perangkat dan Analisis Sistem... 30 2.9.1 Flowchart... 30 2.9.2 Data Flow Diagram... 32 2.9.3 Database... 35 2.9.4 Normalisasi... 35 2.9.5 Kamus Data... 38 2.10 PAH Profil... Yayasan Pondok Pesantren Hidayatullah 39 vii
viii 2.11 Visi dan Misi Yayasan Pondok Pesantren Hidayatullah... 40 2.11.1 Visi Pesantren... 40 2.11.2 Misi Pesantren... 41 BAB 3 ANALISIS DAN PERANCANGAN... 42 3.1 Analisa Sistem yang Berjalan.... 42 3.1.1 Input... 42 3.1.2 Proses... 42 3.1.3 Output... 43 3.2 Perancangan Sistem... 43 3.2.1 Diagram Konteks... 43 3.2.2 Data Flow Diagram... 45 3.3 Perancangan Database... 46 3.3.1 Kamus Data... 46 3.3.2 Normalisasi... 47 3.3.3 Struktur Tabel... 51 3.4 Relasi Antar Tabel... 59 3.5 Rancangan Output... 60 3.5.1 Rancangan Output Santri... 61 3.5.2 Rancangan Output Guru... 62 3.5.3 Rancangan Output Mata Pelajaran... 63 3.5.4 Rancangan Output Berita... 64 3.5.5 Perancangan Output Gallery... 65 viii
ix 3.5.6 Perancangan Output Buku Tamu... 66 3.5.7 Rancangan Output Kelas dan Output Semester... 67 3.5.8 Rancangan Output Nilai... 68 3.5.9 Rancangan Output Laporan Nilai... 69 3.6 Rancangan Input... 70 3.6.1 Rancangan Input Santri... 70 3.6.2 Rancangan Input Guru... 71 3.6.3 Rancangan Input Mata Pelajaran... 72 3.6.4 Rancangan Input Berita... 73 3.6.5 Rancangan Input Gallery... 74 3.6.6 Perancangan Input Buku Tamu... 75 3.6.7 Rancangan Input Kelas dan Semester... 76 3.6.8 Rancanan Input Nilai... 77 3.6.9 Rancangan Halaman Website... 78 3.6.10 Rancangan Ganti Password... 79 3.6.11 Rancangan Edit Identitas Guru... 80 3.7 Perancangan Struktur Web... 81 3.8 Rancangan Tampilan Website... 84 3.9 Algoritma Pemrograman... 91 BAB 4 HASIL DAN PEMBAHASAN... 109 4.1 Hasil Sistem yang Sudah Dibangun... 109 4.2 Tampilan Halaman Website... 109 ix
x 4.3 Pembahasan Sistem Informasi yang Dibangun... 136 4.3.1 Kelayakan teknis... 136 4.3.2 Kelayakan ekonomi... 136 4.3.3 Kelayakan sosial... 136 4.3.4 Kebutuhan operasional... 137 4.4 Kelebihan dan Kekurangan Sistem... 138 4.4.1 Kelebihan Sistem... 138 4.4.2 Kekurangan Sistem... 138 BAB 5 KESIMPULAN DAN SARAN... 140 5.1 Kesimpulan... 140 5.2 Saran... 141 DAFTAR PUSTAKA... 142 LAMPIRAN... 143 x
xi DAFTAR GAMBAR Gambar 2.1. Metode Water Fall... 15 Gambar 2.2 Tag <?php dan?>... 20 Gambar 2.3. Karakter Titik Koma ;... 20 Gambar 2.4. Baris Komentar... 21 Gambar 2.5. Perintah echo... 21 Gambar 2.6.: Contoh Variabel... 22 Gambar 2.7. Simbol Proses... 33 Gambar 2.8. Simbol Data Flow... 34 Gambar 2.9. Simbol Data Store... 34 Gambar 2.10. Simbol Data Source... 34 Gambar 3.1. Diagram Konteks... 44 Gambar 3.2. DFD Level 0 Media Informasi... 45 Gambar 3.3. Relasi Antar Tabel... 60 Gambar 3.4. Perancangan Output Daftar Santri... 61 Gambar 3.5. Perancangan Output Daftar Guru... 62 Gambar 3.6. Perancangan Output Daftar Mata Pelajaran... 63 Gambar 3.7. Perancangan Output Data Berita... 64 Gambar 3.8. Perancangan Output Gallery... 65 Gambar 3.9. Perancangan Output Buku Tamu... 66 Gambar 3.10. Rancangan Output Kelas... 67 Gambar 3.11. Rancangan Output Semester... 67 xi
xii Gambar 3.12. Perancangan Output Nilai... 68 Gambar 3.13. Rancangan Laporan Nilai Santri... 69 Gamabr 3.14. Perancangan Input Data Santri... 70 Gambar 3.15. Perancangan Input Guru... 71 Gambar 3.16. Perancangan Input Mata Pelajaran... 72 Gambar 3.17. Perancangan Input Data Berita Admin... 73 Gambar 3.18. Rancangan Input Data Berita Guru... 73 Gambar 3.19. Perancangan Input Data Gallery... 74 Gambar 3.20. Perancangan Input Buku Tamu... 75 Gambar 3.21. Rancangan Input Kelas... 76 Gambar 3.22. Rancangan Input Semester... 76 Gambar 3.23. Perancangan Input Nilai... 77 Gambar 3.24. Rancangan Halaman Website... 78 Gambar 3.25.Rancangan Ganti Password Admin... 79 Gambar 3.26. Rancangan Ganti Password Guru... 79 Gambar 3.27. Rancangan Edit Identitas Guru... 80 Gambar 3.28. Struktur Halaman Utama... 81 Gambar 3.29: Struktur Halaman Administrator... 82 Gambar 3.30. Struktur Halaman Dashboard Guru... 82 Gambar 3.31. Struktur Halaman Pimpinan... 83 Gambar 3.32. Struktur Halaman Santri... 83 Gambar 3.33. Rancangan Tampilan Halaman Depan Website... 84 Gambar 3.34. Rancangan Tampilan Halaman Login Administrator... 85 xii
xiii Gambar 3.35. Rancangan Tampilan Halaman Login Guru... 86 Gambar 3.36. Rancangan Tampilan Halaman Administrator... 87 Gambar 3.37. Rancangan Tampilan Halaman Dashboard Guru... 88 Gambar 3.38. Rancangan Tampilan Halaman Pimpinan... 89 Gambar 3.39. Rancangan Tampilan Halaman Santri... 90 Gambar 3.40. Flowchart Menu Utama... 91 Gambar 3.41. Flowchart Buku Tamu... 92 Gambar 3.42. Flowchart Form Login... 93 Gambar 3.43. Flowchart Menu Admin... 94 Gambar 3.44. Flowchart Olah Santri... 95 Gambar 3.45. Flowchart Olah Guru... 96 Gambar 3.46. Flowchart Olah Mata Pelajaran... 97 Gambar 3.47. Flowchart Olah Berita... 98 Gambar 3.48. Flowchart Olah Gallery... 99 Gambar 3.49. Flowchart Olah Halaman... 100 Gambar 3.50. Flowchart Olah Buku Tamu... 101 Gambar 3.51. Flowchart Ganti Password... 102 Gambar 3.52. Flowchart Olah Kelas... 103 Gambar 3.53. Flowchart Login Guru... 104 Gambar 3.54. Flowchart Menu Dashboard Guru... 105 Gambar 3.55. Flowchart Olah Nilai... 106 Gambar 3.56. Flowchart Olah Berita Guru... 107 Gambar 3.57. Flowchart Ganti Password... 108 xiii
xiv Gambar 3.58. Flowchart Edit Identitas... 108 Gambar 4.1. Tampilan Halaman Depan Website... 109 Gambar 4.2. Tampilan Halama Profil... 110 Gambar 4.3. Tampilan Halaman Tentang Santri... 110 Gambar 4.4. Tampilan Halaman Pengelola... 111 Gambar 4.5. Tampilan Halaman Data Guru... 111 Gambar 4.6. Tampilan Halaman Data Santri... 112 Gambar 4.7. Tampilan Halaman Kurikulum... 112 Gambar 4.8. Tampilan Halaman Tata Tertib Santri... 113 Gambar 4.9. Tampilan Halaman Berita... 114 Gambar 4.10. Tampilan Halaman Gallery... 115 Gambar 4.11. Tampilan Halaman Hubungi Kami... 116 Gambar 4.12.: Tampilan Halaman Login Administrator... 117 Gambar 4.13. Tampilan Halaman Administrator... 117 Gambar 4.14. Tampilan Halaman Input Data Santri... 118 Gambar 4.15. Tampilan Halaman Lihat Data Santri... 119 Gambar 4.16. Tampilan Halaman Nilai Santri... 119 Gambar 4.17. Tampilan Halaman Input Data Guru... 120 Gambar 4.18. Tampilan Halaman Lihat Data Guru... 121 Gambar 4.19. Tampilan Halaman Data Mata Pelajaran... 121 Gambar 4.20. Tampilan Halaman Lihat Data Mata Pelajaran... 122 Gambar 4.21. Tampilan Halaman Input Data Berita Admin... 123 Gambar 4.22. Tampilan Halaman Input Data Berita Guru... 123 xiv
xv Gambar 4.23. Tampilan Halaman Lihat Data Berita Admin... 124 Gambar 4.24. Tampilan Halaman Lihat Data Berita Guru... 124 Gambar 4.25. Tampilan Halaman Input Data Gallery... 125 Gambar 4.26. Tampilan Halaman Lihat Data Gallery... 126 Gambar 4.27. Tampilan Halaman Website... 127 Gambar 4.28. Tampilan Halaman Buku Tamu... 127 Gambar 4.29. Tampilan Halaman Input kelas... 128 Gambar 4.30. Tampilan Halaman Input Data Semester... 128 Gambar 4.31. Tampilan Halaman Ganti Password... 129 Gambar 4.32. Tampilan Halaman Login Guru... 129 Gambar 4.33. Tampilan Halaman Dashboard Guru... 130 Gambar 4.34. Tampilan Halaman Input Data Nilai... 130 Gambar 4.35. Tampilan Halaman Lihat Data Nilai... 131 Gambar 4.36. Tampilan Halaman Ganti Password... 131 Gambar 4.37. Tampilan Halaman Identitas... 132 Gambar 4.38. Tampilan Halaman Pimpinan... 132 Gambar 4.39. Tampilan Laporan Daftar Santri... 133 Gambar 4.40. Tampilan Halaman Laporan Daftar Guru... 133 Gambar 4.41. Tampilan Halaman Daftar Mata Pelajaran... 134 Gambar 4.42. Tampilan Halaman Laporan Nilai Santri... 134 Gambar 4.43. Tampilan Halaman Santri... 135 Gambar 4.44. Tampilan Halaman Lihat Nilai... 135 xv
xvi DAFTAR TABEL Tabel 2.1. Jenis Tipe Data... 23 Tabel 2.2. Operator Aritmatika... 24 Tabel 2.3. Operator Perbandingan... 25 Tabel 2.4. Operator Logika... 26 Tabel 2.5. Simbol-simbol Flowchart... 31 Tabel 3.1. Kamus Data... 46 Tabel 3.2. Bentuk UnNormal... 48 Tabel 3.3. Bentuk Normal Pertama (1 st NF)... 48 Tabel 3.4.Bentuk Normal Kedua 2 st NF... 49 Tabel 3.5. Bentuk Normal Ketiga (3 st NF)... 50 Tabel 3.6. User... 51 Tabel 3.7. Siswa... 52 Tabel 3.8. Guru... 53 Tabel 3.9. Mata Pelajaran... 54 Tabel 3.10. Mata Pelajaran Guru... 54 Tabel 3.11. Mapel Kelas... 55 Tabel 3.12. Kelas... 55 Tabel 3.13. Semester... 56 Tabel 3.14. Nilai... 56 Tabel 3.15. Galleries... 57 Tabel 3.16. Gallery Categories... 57 xvi
xvii Tabel 3.17. Pages... 58 Tabel 3.18. Post... 58 Tabel 3.19. Tamu... 59 xvii
xviii DAFTAR LAMPIRAN SURAT PERSETUJUAN JUDUL TUGAS AKHIR... 144 SURATPERMOHONAN PENGAJUAN JUDUL TUGAS AKHIR... 145 SURAT KETERSEDIAN DOSEN PEMBIMBING... 146 KARTU BIMBINGAN MAHASISWA... 147 FORMULIR BEBAS REVISI PENGUJI 1... 148 FORMULIR BEBAS REVISI PENGUJI 2... 149 LISTING PROGRAM... 150 xviii