T0 Judul Institutional Repository | Satya Wacana Christian University: Perancangan Website Gereja GKI Soka Salatiga
PERANCANGAN WEBSITE
GEREJA GKI SOKA SALATIGA
Diajukan kepada
Fakultas Teknologi Informasi
untuk memperoleh gelar Ahli Madya Komputer
Disusun Oleh :
Stefanus Hasudungan Putra Jaya Tampubolon
562010022
PROGRAM STUDI DIPLOMA TEKNIK INFORMATIKA
FAKULTAS TEKNOLOGI INFORMASI
UNIVERSITAS KRISTEN SATYA WACANA
SALATIGA
2015
PERANCANGAN WEBSITE
GEREJA GKI SOKA SALATIGA
TUGAS AKHIR
Disusun Oleh :
Stefanus Hasudungan Putra Jaya Tampubolon
562010022
PROGRAM STUDI DIPLOMA TEKNIK INFORMATIKA
FAKULTAS TEKNOLOGI INFORMASI
UNIVERSITAS KRISTEN SATYA WACANA
SALATIGA
2015
ii
iii
iv
v
KATA PENGANTAR
Puji syukur penulis panjatkan kepada Tuhan Yesus atas
bimbingan, hikmat, dan perlindungan kepada penulis selama
penulis menyusun Tugas Akhir. Penyusunan Tugas Akhir adalah
untuk memenuhi kewajiban akademik dan menjadi salah satu
syarat
kelulusan
pada
Program
Studi
Diploma
Teknik
Informatika Fakultas Teknologi Informasi Universitas Kristen
Satya Wacana.
Tidak sedikit kandala, dan halangan yang penulis hadapi
selama penyusunan Tugas Akhir ini, namun berkat doa,
bimbingan dan dukungan dari berbagai pihak akhirnya Tugas
Akhir ini dapat terselesaikan.
Laporan ini dapat terselesaikan dengan baik berkat doa,
bimbingan, bantuan, dan dukungan dari berbagai pihak. Oleh
karena itu, pada kesempatan kali ini penulis ingin mengucapkan
terimakasih kepada :
1. Bapak Prof. Dr. John Titaley, selaku Rektor
Universitas Kristen Satya Wacana Salatiga.
2. Bapak Dr. Dharmaputra Taludangga Palekahelu,
S.Pd., M.Pd., selaku Dekan Fakultas Teknologi
Informasi, Universitas Kristen Satya Wacana Salatiga.
3. Bapak Sri Winarso Martyas Edi, S.Kom., M.Cs.
selaku
Ketua
Informatika,
Program
Fakultas
Studi
Diploma
Teknologi
Teknik
Informasi,
Universitas Kristen Satya Wacana Salatiga, sekaligus
vi
selaku
pembimbing
kerja
praktek,
yang
telah
memberikan saran atas laporan dan kerja praktek.
4. Dosen
pengajar
Fakultas
Teknologi
Informasi
Diploma Teknik Informatika, Bapak Drs. Prihanto
Ngesti Basuki, M.Kom., Bapak Felix David, S.Kom,
Bapak Teguh Wahyono, S.Kom., M.Cs.
5. Para dosen, beserta staf pengajar atas bimbingan dan
ilmu yang selama ini sudah diberikan kepada penulis
sebagai bekal dalam menjalankan kerja praktek.
6. Pendeta dan seluruh staff GKI Soka Salatiga yang
telah memberikan kesempatan bagi penulis untuk
menyusun dan merancang Tugas Akhir ini.
7. Ayah dan Ibu serta keluarga tercinta yang telah
memberikan dukungan dan kasih sayang baik secara
moril maupun materiil sehingga penulis dapat
melaksanakan kerja praktek dengan baik.
8. Rekan-rekan Diploma Teknik Informatika angkatan
2010, terimakasih untuk segala dukungan doa dan
semangat yang telah diberikan kepada penulis.
9. Pihak – pihak lain yang tidak dapat penulis sebutkan
satu per satu yang telah memberikan dukungan dan
bantuan selama ini.
Penulis menyadari bahwa penulisan Tugas Akhir ini jauh
dari sempurna, oleh karena itu kritik dan saran yang
membangun
sangatlah
vii
penulis
harapkan
demi
penyempurnaan Tugas Akhir ini. Akhir kata penulis
berharap agar laporan ini dapat bermanfaat di kemudian
hari. Tuhan memberkati.
Salatiga, 7 Agustus 2015
Penulis
viii
DAFTAR ISI
Halaman Cover ......................................................................... i
Halaman Judul ......................................................................... ii
Lembar Pengesahan ................................................................ iii
Pernyataan Bebas Plagiasi ...................................................... iv
Pernyataan Persetujuan Publikasi ........................................... v
Kata Pengantar ........................................................................ vi
Daftar Isi .................................................................................. ix
Daftar Tabel ............................................................................ xii
Daftar Gambar ......................................................................... xiii
Daftar Lampiran ...................................................................... xv
Bab I. Pendahuluan .................................................................. 1
1.1 Latar Belakang ........................................................ 1
1.2 Batasan Masalah ..................................................... 2
1.3 Rumusan Masalah ................................................. 2
1.4 Tujuan pembuatan Aplikasi .................................... 3
1.4.1 Tujuan Umum .............................................. 3
1.4.2. Tujuan Khusus ............................................ 3
1.5 Metode Penelitian ................................................... 4
1.5.1. Metode Pengumpulan Data ......................... 4
Bab. II Tinjauan Pustaka .......................................................... 6
2.1. Internet ................................................................... 6
2.2. Hypertext Markup Language (HTML) .................. 7
2.3. Hypertext Preprocessor (PHP) ............................... 8
2.4. Web Server ............................................................. 10
ix
2.5. Database MySQL ................................................... 11
2.6. (Cascading Style Sheet) CSS ................................. 12
2.7. Java Script .............................................................. 14
Bab III. Perancangan Sistem .................................................... 16
3.1 Deskripsi Sistem ..................................................... 16
3.2 Spesifikasi Sistem ................................................... 16
3.2.1. Perangkat Lunak .......................................... 16
3.2.2. Perangkat Keras ........................................... 17
3.3. Perancangan Sistem ............................................... 17
3.3.1. Kamus Data.................................................. 17
3.3.2. Tabel ............................................................ 19
3.3.3. Perancangan Front-end ................................ 22
3.3.4. Perancangan Back office (Halaman Admin) 31
3.3.5. Perancangan Jaringan .................................. 38
3.3.6. Diagram Aliran Data .................................... 39
Bab IV. Hasil dan Analisis ....................................................... 44
4.1. Implementasi Sistem .............................................. 44
4.1.1. Homepage Utama ........................................ 44
4.1.2. Halaman Front-end ...................................... 46
4.1.3. Halaman Back-office (Administrator) .......... 51
4.2.Hasil Pengujian ....................................................... 56
4.3. Analisa Sistem........................................................ 57
Bab V. Kesimpulan dan Saran ................................................ 58
5.1. Kesimpulan ............................................................ 58
5.2. Saran ....................................................................... 58
x
DAFTAR PUSTAKA ............................................................. 60
LAMPIRAN
xi
DAFTAR TABEL
Tabel 3.1. Tabel galeri ............................................................. 19
Tabel 3.2. Tabel komentarwarta............................................... 19
Tabel 3.3. Tabel kontak ............................................................ 20
Tabel 3.4. Tabel renungan ........................................................ 20
Tabel 3.5. Tabel user ................................................................ 20
Tabel 3.6. Tabel warta .............................................................. 21
xii
DAFTAR GAMBAR
Gambar 2.1. Cara Kerja Internet .............................................. 6
Gambar 3.1. Rancangan Homepage Awal ............................... 22
Gambar 3.2. Rancangan Halaman Tentang.............................. 23
Gambar 3.3. Rancangan Halaman Warta ................................. 25
Gambar 3.4. Rancangan Halaman Detil Warta ........................ 26
Gambar 3.5. Rancangan Halaman Renungan .......................... 28
Gambar 3.6. Rancangan Halaman Kontak ............................... 29
Gambar 3.7. Rancangan Halaman Dashboard Administrator .. 31
Gambar 3.8. Rancangan Halaman Daftar Warta
Administrator ..................................................... 32
Gambar 3.9. Rancangan Halaman Input Warta
Administrator ..................................................... 33
Gambar 3.10. Rancangan Halaman Daftar Renungan
Administrator ..................................................... 34
Gambar 3.11. Rancangan Halaman Input Renungan
Administrator ..................................................... 35
Gambar 3.12. Rancangan Halaman Daftar Buku Tamu .......... 36
Gambar 3.13. Rancangan Halaman Detil Buku Tamu ............. 37
Gambar 3.14. Jaringan Semantik User ..................................... 38
Gambar 3.15. Jaringan Semantik Admin ................................. 39
Gambar 3.16. Diagram Aliran Data Tampil & Komentar Warta
User .................................................................... 39
Gambar 3.17. Diagram Aliran Data Tampil Renungan ........... 40
Gambar 3.18. Diagram Aliran Data Input Buku Tamu ............ 40
xiii
Gambar 3.19. Diagram Aliran Data Input Output
Warta Admin ...................................................... 41
Gambar 3.20. Diagram Aliran Data Input Output Renungan
Admin................................................................. 42
Gambar 3.21. Diagram Aliran Data Input Output Manajemen
Buku Tamu........................................................... 42
Gambar 4.1. Tampilan Homepage Awal ................................. 45
Gambar 4.2. Tampilan Halaman Tentang ................................ 46
Gambar 4.3. Tampilan Halaman Warta ................................... 47
Gambar 4.4. Tampilan Halaman Detil Warta .......................... 48
Gambar 4.5. Tampilan Halaman Detil Warta .......................... 49
Gambar 4.6. Tampilan Halaman Detil Warta .......................... 50
Gambar 4.7. Tampilan Halaman Login Admin........................ 51
Gambar 4.8. Tampilan Halaman Dashboard Admin ............... 52
Gambar 4.9. Tampilan Halaman Daftar Warta ........................ 53
Gambar 4.10. Tampilan Halaman Input Warta ........................ 53
Gambar 4.11. Tampilan Halaman Daftar Renungan ................ 54
Gambar 4.12. Tampilan Halaman Input Renungan ................. 55
Gambar 4.13. Tampilan Halaman Daftar Buku Tamu ............. 55
Gambar 4.14. Tampilan Halaman Detil Buku Tamu ............... 56
xiv
DAFTAR LAMPIRAN
Lampiran 1.1. Listing Code
xv
GEREJA GKI SOKA SALATIGA
Diajukan kepada
Fakultas Teknologi Informasi
untuk memperoleh gelar Ahli Madya Komputer
Disusun Oleh :
Stefanus Hasudungan Putra Jaya Tampubolon
562010022
PROGRAM STUDI DIPLOMA TEKNIK INFORMATIKA
FAKULTAS TEKNOLOGI INFORMASI
UNIVERSITAS KRISTEN SATYA WACANA
SALATIGA
2015
PERANCANGAN WEBSITE
GEREJA GKI SOKA SALATIGA
TUGAS AKHIR
Disusun Oleh :
Stefanus Hasudungan Putra Jaya Tampubolon
562010022
PROGRAM STUDI DIPLOMA TEKNIK INFORMATIKA
FAKULTAS TEKNOLOGI INFORMASI
UNIVERSITAS KRISTEN SATYA WACANA
SALATIGA
2015
ii
iii
iv
v
KATA PENGANTAR
Puji syukur penulis panjatkan kepada Tuhan Yesus atas
bimbingan, hikmat, dan perlindungan kepada penulis selama
penulis menyusun Tugas Akhir. Penyusunan Tugas Akhir adalah
untuk memenuhi kewajiban akademik dan menjadi salah satu
syarat
kelulusan
pada
Program
Studi
Diploma
Teknik
Informatika Fakultas Teknologi Informasi Universitas Kristen
Satya Wacana.
Tidak sedikit kandala, dan halangan yang penulis hadapi
selama penyusunan Tugas Akhir ini, namun berkat doa,
bimbingan dan dukungan dari berbagai pihak akhirnya Tugas
Akhir ini dapat terselesaikan.
Laporan ini dapat terselesaikan dengan baik berkat doa,
bimbingan, bantuan, dan dukungan dari berbagai pihak. Oleh
karena itu, pada kesempatan kali ini penulis ingin mengucapkan
terimakasih kepada :
1. Bapak Prof. Dr. John Titaley, selaku Rektor
Universitas Kristen Satya Wacana Salatiga.
2. Bapak Dr. Dharmaputra Taludangga Palekahelu,
S.Pd., M.Pd., selaku Dekan Fakultas Teknologi
Informasi, Universitas Kristen Satya Wacana Salatiga.
3. Bapak Sri Winarso Martyas Edi, S.Kom., M.Cs.
selaku
Ketua
Informatika,
Program
Fakultas
Studi
Diploma
Teknologi
Teknik
Informasi,
Universitas Kristen Satya Wacana Salatiga, sekaligus
vi
selaku
pembimbing
kerja
praktek,
yang
telah
memberikan saran atas laporan dan kerja praktek.
4. Dosen
pengajar
Fakultas
Teknologi
Informasi
Diploma Teknik Informatika, Bapak Drs. Prihanto
Ngesti Basuki, M.Kom., Bapak Felix David, S.Kom,
Bapak Teguh Wahyono, S.Kom., M.Cs.
5. Para dosen, beserta staf pengajar atas bimbingan dan
ilmu yang selama ini sudah diberikan kepada penulis
sebagai bekal dalam menjalankan kerja praktek.
6. Pendeta dan seluruh staff GKI Soka Salatiga yang
telah memberikan kesempatan bagi penulis untuk
menyusun dan merancang Tugas Akhir ini.
7. Ayah dan Ibu serta keluarga tercinta yang telah
memberikan dukungan dan kasih sayang baik secara
moril maupun materiil sehingga penulis dapat
melaksanakan kerja praktek dengan baik.
8. Rekan-rekan Diploma Teknik Informatika angkatan
2010, terimakasih untuk segala dukungan doa dan
semangat yang telah diberikan kepada penulis.
9. Pihak – pihak lain yang tidak dapat penulis sebutkan
satu per satu yang telah memberikan dukungan dan
bantuan selama ini.
Penulis menyadari bahwa penulisan Tugas Akhir ini jauh
dari sempurna, oleh karena itu kritik dan saran yang
membangun
sangatlah
vii
penulis
harapkan
demi
penyempurnaan Tugas Akhir ini. Akhir kata penulis
berharap agar laporan ini dapat bermanfaat di kemudian
hari. Tuhan memberkati.
Salatiga, 7 Agustus 2015
Penulis
viii
DAFTAR ISI
Halaman Cover ......................................................................... i
Halaman Judul ......................................................................... ii
Lembar Pengesahan ................................................................ iii
Pernyataan Bebas Plagiasi ...................................................... iv
Pernyataan Persetujuan Publikasi ........................................... v
Kata Pengantar ........................................................................ vi
Daftar Isi .................................................................................. ix
Daftar Tabel ............................................................................ xii
Daftar Gambar ......................................................................... xiii
Daftar Lampiran ...................................................................... xv
Bab I. Pendahuluan .................................................................. 1
1.1 Latar Belakang ........................................................ 1
1.2 Batasan Masalah ..................................................... 2
1.3 Rumusan Masalah ................................................. 2
1.4 Tujuan pembuatan Aplikasi .................................... 3
1.4.1 Tujuan Umum .............................................. 3
1.4.2. Tujuan Khusus ............................................ 3
1.5 Metode Penelitian ................................................... 4
1.5.1. Metode Pengumpulan Data ......................... 4
Bab. II Tinjauan Pustaka .......................................................... 6
2.1. Internet ................................................................... 6
2.2. Hypertext Markup Language (HTML) .................. 7
2.3. Hypertext Preprocessor (PHP) ............................... 8
2.4. Web Server ............................................................. 10
ix
2.5. Database MySQL ................................................... 11
2.6. (Cascading Style Sheet) CSS ................................. 12
2.7. Java Script .............................................................. 14
Bab III. Perancangan Sistem .................................................... 16
3.1 Deskripsi Sistem ..................................................... 16
3.2 Spesifikasi Sistem ................................................... 16
3.2.1. Perangkat Lunak .......................................... 16
3.2.2. Perangkat Keras ........................................... 17
3.3. Perancangan Sistem ............................................... 17
3.3.1. Kamus Data.................................................. 17
3.3.2. Tabel ............................................................ 19
3.3.3. Perancangan Front-end ................................ 22
3.3.4. Perancangan Back office (Halaman Admin) 31
3.3.5. Perancangan Jaringan .................................. 38
3.3.6. Diagram Aliran Data .................................... 39
Bab IV. Hasil dan Analisis ....................................................... 44
4.1. Implementasi Sistem .............................................. 44
4.1.1. Homepage Utama ........................................ 44
4.1.2. Halaman Front-end ...................................... 46
4.1.3. Halaman Back-office (Administrator) .......... 51
4.2.Hasil Pengujian ....................................................... 56
4.3. Analisa Sistem........................................................ 57
Bab V. Kesimpulan dan Saran ................................................ 58
5.1. Kesimpulan ............................................................ 58
5.2. Saran ....................................................................... 58
x
DAFTAR PUSTAKA ............................................................. 60
LAMPIRAN
xi
DAFTAR TABEL
Tabel 3.1. Tabel galeri ............................................................. 19
Tabel 3.2. Tabel komentarwarta............................................... 19
Tabel 3.3. Tabel kontak ............................................................ 20
Tabel 3.4. Tabel renungan ........................................................ 20
Tabel 3.5. Tabel user ................................................................ 20
Tabel 3.6. Tabel warta .............................................................. 21
xii
DAFTAR GAMBAR
Gambar 2.1. Cara Kerja Internet .............................................. 6
Gambar 3.1. Rancangan Homepage Awal ............................... 22
Gambar 3.2. Rancangan Halaman Tentang.............................. 23
Gambar 3.3. Rancangan Halaman Warta ................................. 25
Gambar 3.4. Rancangan Halaman Detil Warta ........................ 26
Gambar 3.5. Rancangan Halaman Renungan .......................... 28
Gambar 3.6. Rancangan Halaman Kontak ............................... 29
Gambar 3.7. Rancangan Halaman Dashboard Administrator .. 31
Gambar 3.8. Rancangan Halaman Daftar Warta
Administrator ..................................................... 32
Gambar 3.9. Rancangan Halaman Input Warta
Administrator ..................................................... 33
Gambar 3.10. Rancangan Halaman Daftar Renungan
Administrator ..................................................... 34
Gambar 3.11. Rancangan Halaman Input Renungan
Administrator ..................................................... 35
Gambar 3.12. Rancangan Halaman Daftar Buku Tamu .......... 36
Gambar 3.13. Rancangan Halaman Detil Buku Tamu ............. 37
Gambar 3.14. Jaringan Semantik User ..................................... 38
Gambar 3.15. Jaringan Semantik Admin ................................. 39
Gambar 3.16. Diagram Aliran Data Tampil & Komentar Warta
User .................................................................... 39
Gambar 3.17. Diagram Aliran Data Tampil Renungan ........... 40
Gambar 3.18. Diagram Aliran Data Input Buku Tamu ............ 40
xiii
Gambar 3.19. Diagram Aliran Data Input Output
Warta Admin ...................................................... 41
Gambar 3.20. Diagram Aliran Data Input Output Renungan
Admin................................................................. 42
Gambar 3.21. Diagram Aliran Data Input Output Manajemen
Buku Tamu........................................................... 42
Gambar 4.1. Tampilan Homepage Awal ................................. 45
Gambar 4.2. Tampilan Halaman Tentang ................................ 46
Gambar 4.3. Tampilan Halaman Warta ................................... 47
Gambar 4.4. Tampilan Halaman Detil Warta .......................... 48
Gambar 4.5. Tampilan Halaman Detil Warta .......................... 49
Gambar 4.6. Tampilan Halaman Detil Warta .......................... 50
Gambar 4.7. Tampilan Halaman Login Admin........................ 51
Gambar 4.8. Tampilan Halaman Dashboard Admin ............... 52
Gambar 4.9. Tampilan Halaman Daftar Warta ........................ 53
Gambar 4.10. Tampilan Halaman Input Warta ........................ 53
Gambar 4.11. Tampilan Halaman Daftar Renungan ................ 54
Gambar 4.12. Tampilan Halaman Input Renungan ................. 55
Gambar 4.13. Tampilan Halaman Daftar Buku Tamu ............. 55
Gambar 4.14. Tampilan Halaman Detil Buku Tamu ............... 56
xiv
DAFTAR LAMPIRAN
Lampiran 1.1. Listing Code
xv