LAPORAN TUGAS AKHIR Perancangan Sistem Informasi Berbasis Website Di Sekolah Vokasi UMS (Menggunakan Microsoft Dreamwaver dan PhpMyAdmin).
LAPORAN TUGAS AKHIR
PERANCANGAN SISTEM INFORMASI BERBASIS WEBSITE
DI SEKOLAH VOKASI UMS
(Menggunakan Microsoft Dreamwaver dan PhpMyAdmin)
.
Diajukan Sebagai Syarat Memperoleh Gelar Sarjana Teknik
Jurusan Teknik Industry Fakultas Teknik
Universitas Muhammadiyah Surakarta
Disusun Oleh :
OLIYA
NIM: D 600 100 001
JURUSAN TEKNIK INDUSTRI FAKULTAS TEKNIK
UNIVERSITAS MUHAMMADIYAH SURAKARTA
2014
i
MOTTO:
“Pendidikan merupakan perlengkapan paling baik untuk hari tua”
(Aristoteles)
“Mereka berkata bahwa setiap orang membutuhkan tiga hal yang akan membuat berbahagia di dunia
ini, yaitu; seseorang untuk dicintai, sesuatu untuk dilakukan, dan sesuatu untuk diharapkan.”
(Tom Bodett)
“Bunga yang tidak akan layu sepanjang jaman adalah kebajikan”
(William Cowper)
Jadilah karang dilautan yang kuat dihantam ombak dan kerjakanlah hal yang bermanfaat untuk diri
sendiri dan orang lain, karena hidup hanyalah sekali. Ingat hanya pada Allah apapun dan di manapun
kita berada kepada Dia-lah tempat meminta dan memohon.
(Penulis)
Jenius adalah 1% inspirasi dan 99% keringat. Usaha lebih penting dari pada perencaan dan tidak ada
yang menggantikan kerja keras.
(Penulis)
v
PERSEMBAHAN
Laporan Tugas Akhir ini penulis persembahkan kepada:
1. Bapak dan ibu yang telah memberikan dukungan,
Do’a serta semangat untuk dapat menjadi orang yang
berhasil. Terimalah sujud dan baktiku kepadamu.
2. Kepada Yesi Kristianawati yang selalu ada di
sampingku disaat suka maupun duka.
3. Kepada sahabat sejatiku Kecuk Rachmanto, Bayu
Deni F., Sayidatun Nafisa, Dani Yunanto yang telah
menemani memberi motivasi.
4. Teman-teman angkatan 2010 yang selalu memberikan
semangat kepada saya.
5. Pembaca yang budiman.
vi
KATA PENGANTAR
Assalamu’alaikum Wr. Wb
Alhamdulillahhirobil’alamin, dengan mengucap puja dan puji syukur
kehadirat Allah SWT. Karena atas ridho dan hidayahNya, sehingga penulis dapat
menyelesaikan tugas
akhir dengan judul
”PERANCANGAN SISTEM
INFORMASI BERBASIS WEBSITE DI SEKOLAH VOKASI UMS
(Menggunakan Microsoft dreamwaver dan PhpMyAdmin)”.
Maksud dan tujuan penulisan Tugas Akhir ini adalah untuk memenuhi
persyaratan kelulusan program studi Strata 1 pada jurusan teknik industry di
Universitas Muhammadiyah Surakarta. Selain itu untuk membuat suatu wadah
informasi yang berguna untuk sekolah vokasi UMS.
Penulis merasa bahwa dalam menyusun laporan ini masih menemui
beberapa kesulitan dan hambatan, disamping itu juga menyadari bahwa penulisan
laporan ini masih jauh dari sempurna dan masih banyak kekurangan-kekurangan
lainnya, maka dari itu penulis mengharapkan kritik dan saran yang membangun
dari semua pihak.
Penulis mendapatkan banyak sekali do’a, bantuan dan dukungan dari
berbagai pihak dalam menyelesaikan Tugas Akhir ini. Atas berbagai bantuan dan
dukungan tersebut, pada kesempatan ini penulis menghaturkan terima kasih yang
sebesar-besarnya kepada:
Allah SWT, Tuhan sekaligus Pengatur Kehidupan yang telah memberikan
kesempatan bagi penulis untuk menyelesaikan Tugas Akhir hingga selesai.
Kedua orang tua, terutama ibu, yang tak henti-hentinya memberikan
semangat dan kasih sayang yang luar biasa kepada penulis.
Kakak dan Adik, Mas Fajar dan Dik Dian yang telah memberi semangat
serta do’a kepada penulis agar cepat selesai.
vii
Kepada pembimbing bapak Dr. Suranto, MM sekalu pembimbing 1 dan
bapak Muchlison Anis, ST.MM yang selalu memberikan masukan dan
motifasi pada saat pembuatan tugas akhir ini.
Penguji bapak Ratnanto Fitriadi, ST, MT selaku penguji 1 dan ibu Siti
Nandiroh, ST, M.Eng sebagai penguji 2 yang telah berkenan memberikan
waktunya untuk menguji tugas akhir.
Semua Bapak dan Ibu Dosen yang mengajar Jurusan Teknik Industri,
Universitas
Muhammadiyah
Surakarta
yang
telah
sabar
dalam
memberikan ilmu dan bantuan kepada penulis selama penulis berkuliah.
Kepada sahabat-sahabatku dari teknik industri UMS, terima kasih
dukungannya selama ini.
Dan berbagai pihak yang tidak dapat penulis sebutkan disini. Semoga
Tuhan Yang Maha Esa memberkati dan membalas semua kebaikan yang telah
dilakukan. Penulis menyadari masih banyak yang banyak dikembangkan pada
tugas akhir. Oleh karena itu penulis menerima setiap masukan dan kritik yang
diberikan. Semoga Tugas Akhir ini dapat memberikan manfaat.
Surakarta, Oktober 2014
Penulis
viii
DAFTAR ISI
HALAMAN JUDUL..................................................................................... i
HALAMAN PERSEMBAHAN ................................................................... ii
HALAMAN PERSETUJUAN ...................................................................... iii
PERNYATAAN ............................................................................................ iv
PERSEMBAHAN ......................................................................................... v
MOTTO ........................................................................................................ vi
KATA PENGANTAR .................................................................................. vii
DAFTAR ISI ................................................................................................. ix
DAFTAR TABEL ......................................................................................... xv
DAFTAR GAMBAR .................................................................................... xvi
DAFTAR LAMPIRAN ................................................................................. xix
ABSTRAKSI ................................................................................................ xx
BAB I
PENDAHULUAN
1.1
Latar Belakang ...................................................................... 1
1.2
Perumusan Masalah .............................................................. 3
1.3
Batasan Masalah.................................................................... 4
1.4
Tujuan ................................................................................... 4
1.5
Manfaat Penelitian ................................................................ 5
1.6
Sistematika Penulisan ........................................................... 6
ix
BAB II
LANDASAN TEORI
2.1
Konsep Dasar Sistem Informasi ............................................ 8
2.1.1. Konsep Dasar Data.................................................... 8
2.1.2. Konsep Dasar Sistem ................................................ 8
2.1.3. Konsep Dasar Informasi ............................................ 11
2.1.4. Konsep Dasar Sistem Informasi ................................ 13
2.1.5. Analisis Kebutuhan Sistem ....................................... 14
2.2
Desain Basis Data (database) .............................................. 17
2.2.1. Pengertian Database ................................................. 17
2.2.2. Tipe-tipe field database............................................. 29
2.2.3. Keuntungan Penggunaan Database .......................... 20
2.3
Basis dan MySQL ................................................................. 21
2.3.1. Pengertian Basis dan MySQL ................................... 21
2.3.2. Program dan teknik penghubung dalam MySQL......
................................................................................... 22
2.4
PHP (Hypertext Preprocessor) ............................................. 22
2.4.1. Pengertian PHP (Hypertext Preprocessor) ............... 22
2.4.2. Kelebihan PHP (Hypertext Preprocessor) ................ 24
2.5
Internet dan Website .............................................................. 25
2.5.1. Definisi Internet ........................................................ 25
2.5.2. Sejarah Internet ......................................................... 26
2.5.3. Definisi Website ........................................................ 28
2.6
Microsoft Dreamwaver 8 ...................................................... 29
x
2.6.1. Definisi Microsoft Dreamwaver 8 ............................ 29
2.6.2. Tampilan Microsoft dreamwaver .............................. 29
2.7
CSS (Cascoding Style Sheet) ................................................ 35
2.7.1. Definisi CSS .............................................................. 35
2.7.2. Keuntungan menggunakan CSS................................ 35
BAB III
2.8
XAMPP ................................................................................. 36
2.9
Tinjauan Pustaka ................................................................... 38
METODOLOGI PENELITIAN
3.1
Objek Penelitian .................................................................... 39
3.2
Prosedur Penelitian................................................................ 39
3.2.1. Perumusan masalah ................................................... 39
3.2.2. Batasan masalah ........................................................ 39
3.2.3. Tujuan ....................................................................... 40
3.3
Teknik Pengumpulan Data .................................................... 40
3.3.1. Data Primer ............................................................... 40
3.3.2. Data Sekunder ........................................................... 42
3.3.3. Studi Evaluasi Perbandingan..................................... 42
3.4
Identifikasi Kebutuhan Sistem .............................................. 43
3.4.1. Merancang diagram konteks (Context Diagram) ...... 43
3.4.2. Merancang Dekomposisi Proses ............................... 43
3.4.3. Merancang Data Flow Diagram (DFD) .................. 44
xi
3.4.4. Analisa website lama dengan perancangan website
baru............................................................................ 44
3.4.5. Perancangan sistem untuk Sekolah Vokasi UMS ..... 46
3.5
Bahan Dan Alat Penelitian .................................................... 48
3.5.1. Bahan......................................................................... 48
3.5.2. Alat ............................................................................ 48
3.6
Perancangan Sistem .............................................................. 49
3.6.1. Perancangan database ............................................... 49
3.6.2. Perancangan form ...................................................... 50
3.6.3. Perancangan report ................................................... 50
3.7
Perancangan Website ............................................................ 51
3.7.1. Pengelompokan struktur website............................... 51
3.7.2. Desain website........................................................... 51
3.7.3. Pengembangan dan pengujian website ...................... 52
3.8
Analisa Perancangan Sistem ................................................. 53
3.9
Publikasi Website .................................................................. 53
3.9.1. Registrasi dan pemilihan space hosting .................... 53
3.9.2. Upload website .......................................................... 53
3.9.3. Editing Script Data .................................................... 54
3.10 Kerangka Pemecahan Masalah ............................................. 55
BAB IV
METODOLOGI PENELITIAN
4.1
Perancangan Sistem .............................................................. 56
4.1.1. Context diagram ........................................................ 57
4.1.2. Dekomposisi Proses .................................................. 60
xii
4.1.3. Data Flow Diagram .................................................. 65
4.2
Pemilihan Aplikasi dan CMS Website .................................. 71
4.2.1. Dreamwaver .............................................................. 71
4.2.2. CMS website ............................................................. 72
4.3
Pembuatan Form ................................................................... 79
4.3.1. Home ......................................................................... 79
4.3.2. Profil.......................................................................... 79
4.3.3. Program ..................................................................... 80
4.3.4. Pendaftaran ................................................................ 81
4.3.5. Lulusan ...................................................................... 82
4.3.6. Kegiatan .................................................................... 83
4.3.7. Informasi Loker ......................................................... 85
4.3.8. Peta lokasi ................................................................. 85
4.3.9. Customer Service ...................................................... 86
4.3.10. Halaman login ........................................................... 86
4.3.11. Halaman admin ......................................................... 87
4.3.12. Halaman dosen .......................................................... 87
4.3.13. Halaman mahasiswa .................................................. 89
4.4
Perancangan database............................................................ 90
4.5
Pengujian Sistem ................................................................... 91
4.5.1. Pengujian Browser .................................................... 91
4.5.2. Pengujian Security Website ....................................... 93
1. Pengujian Captcha .............................................. 93
xiii
2. Pengujian Singkronisasi Database...................... 94
3. Pengujian dan pemilihan pada Domain............... 98
4.6
BAB V
Analisa Keseluruhan ............................................................. 98
KESIMPULAN DAN SARAN
5.1
Kesimpulan ........................................................................... 100
5.2
Saran ...................................................................................... 100
DAFTAR PUSTAKA ........................................................................................ 102
LAMPIRAN ....................................................................................................... 104
xiv
DAFTAR TABEL
Tabel 2.1 Simbol-Simbol DFD ........................................................................... 16
Tabel 2.2 Simbol-Simbol ERD ........................................................................... 16
Tabel 2.3 Tabel Sejarah Internet ......................................................................... 27
Tabel 2.4 Tinjauan Pustaka ................................................................................. 38
Tabel 4.1 Spesifikasi Proses Profil ..................................................................... 66
Tabel 4.2 Spesifikasi Proses Registrasi .............................................................. 67
Tabel 4.3 Spesifikasi Home ............................................................................... 67
Tabel 4.4 Spesifikasi Program ........................................................................... 68
Tabel 4.5 Spesifikasi pendaftaran ...................................................................... 68
Tabel 4.6 Spesifikasi Lulusan ............................................................................ 69
Tabel 4.7 Spesifikasi Kegiatan ........................................................................... 69
Tabel 4.8 Spesifikasi informasi loker ................................................................ 70
Tabel 4.9 Spesifikasi peta lokasi ........................................................................ 70
Tabel 4.10 Spesifikasi Customer service ........................................................... 71
xv
DAFTAR GAMBAR
Gambar 2.1 Proses Sistem ........................................................................................ 9
Gambar 2.2 DFD Level 0 .......................................................................................... 17
Gambar 2.3 Alur Database ....................................................................................... 18
Gambar 2.4 Alur Sistem Informasi ........................................................................... 19
Gambar 2.5 Script dalam PHP: (a) embedded script, (b) non embedded script ....... 24
Gambar 2.6 Fiture Microsoft Dreamwaver 8 ............................................................ 30
Gambar 2.7 Layar Dokumen Utama ......................................................................... 34
Gambar 2.8 Properties Panel Dreamwaver 8 ............................................................ 34
Gambar 3.1 Website Sekolah Vokasi saat ini ........................................................... 45
Gambar 3.2 Kerangka Diagram Alir Aspek Internal ................................................ 47
Gambar 3.3 Kerangka Diagram Alir Aspek Exteral ................................................. 48
Gambar 3.4 Desain Website Sekolah Vokasi UMS .................................................. 51
Gambar 3.5 Kerangka Pemecahan Masalah.............................................................. 55
Gambar 4.1 Context Diagram ................................................................................... 57
Gambar 4.2. Dekomposisi Proses Sistem Website Sekolah Vokasi UMS ................ 64
Gambar 4.3 Data Flow Diagram (DFD) .................................................................. 65
Gambar 4.4. Form Home .......................................................................................... 79
Gambar 4.5. Form Profil ........................................................................................... 79
Gambar 4.6. Form Program Alat Berat ..................................................................... 80
Gambar 4.7. Form Program Manufaktur .................................................................. 80
Gambar 4.8. Form Program Perbankan Syari’ah ...................................................... 81
Gambar 4.9. Form Program Animasi 3D .................................................................. 81
Gambar 4.10. Form Pendaftaran ............................................................................... 82
xvi
Gambar 4.11. Form Lulusan ..................................................................................... 82
Gambar 4.12. File Download .................................................................................... 83
Gambar 4.13. Form Kegiatan Wisudawan ................................................................ 83
Gambar 4.14. Form Kegiatan Pesantren ................................................................... 84
Gambar 4.15. Form Kegiatan 2014 .......................................................................... 84
Gambar 4.16. Form Kegiatan BINTALSIK ............................................................. 84
Gambar 4.17. Form Informasi Loker ........................................................................ 85
Gambar 4.18. Form Peta Lokasi ............................................................................... 85
Gambar 4.19. Form widget Customer service .......................................................... 86
Gambar 4.20. Form Login......................................................................................... 86
Gambar 4.21. Halaman Panel Admin ....................................................................... 87
Gambar 4.22. Halaman Panel Dosen (Mata Kuliah)................................................. 87
Gambar 4.23. Halaman Panel Dosen (Editor Berita Update) ................................... 88
Gambar 4.24. Halaman Panel Dosen (kelola galeri foto) ......................................... 88
Gambar 4.25. Halaman Panel Dosen (galeri foto) .................................................... 88
Gambar 4.26. Halaman Panel Mahasiswa (Input Mata Kuliah) ............................... 89
Gambar 4.27. Halaman Panel Mahasiswa (Input Tugas).......................................... 89
Gambar 4.28. Halaman Panel Mahasiswa (upload dan download tugas) ................. 90
Gambar 4.29 kumpulan database Sekolah Vokasi UMS ......................................... 90
Gambar 4.30. Pengujian di Mozila Firefox ............................................................... 91
Gambar 4.31. Pengujian di Google Chrome ............................................................. 92
Gambar 4.32. Pengujian di Internet Explorer ........................................................... 92
Gambar 4.33. Pengujian di Opramini pada Smart Phone ......................................... 93
Gambar 4.34. Pengujian Captcha ............................................................................. 94
Gambar 4.35. Pengujian Script database .................................................................. 94
xvii
Gambar 4.36. Pengujian Singkronisasi database Admin .......................................... 95
Gambar 4.37. Pengunjian Hubungan Pengunjung Website ...................................... 96
Gambar 4.39. Hasil Singkronisasi Untuk Dosen ...................................................... 97
Gambar 4.39. Hasil Singkronisasi Untuk Mahasiswa ............................................... 97
xviii
DAFTAR LAMPIRAN
LAMPIRAN 1 ........................................................................................................... 104
1. Tentang Sekolah Vokasi UMS ............................................................................ 105
2. Database website Sekolah Vokasi UMS............................................................. 114
LAMPIRAN 2 ........................................................................................................... 120
xix
ABSTRAKSI
Vokasi Universitas Muhammadiyah Surakarta adalah sekolah yang
bergerak dibidang pendidikan alat berat, bank syariah atau permesinan yang
menitik beratkan pada kemampuan mahasiswa secara langsung atau fieldskill.
Sekolah Vokasi Universitas Muhammadiyah Surakarta merupakan instansi swasta
yang memerlukan suatu wadah agar dapat menampung semua informasi dan dapat
dipaparkan pada masyarakat. Informasi yang telah dibuat oleh Vokasi Universitas
Muhammadiyah Surakarta adalah berbasis webside yang bertujuan untuk
memberikan informasi kepada masyarakat, pertanyaan atau database sendiri untuk
kalangan user atau karyawan dan pegawai. Semua interaksi antara user atau
karyawan dan pegawai sebagai tukar infomasi dengan fasilitas atau kebutuhan
masyarakat terhadap Vokasi Universitas Muhammadiyah Surakarta yang berupa
pendaftaran mahasiswa baru, data mahasiswa, lowongan pekerjaan dan kegiatankegiatan yang diadakan oleh Vokasi. Permasalahan yang ada terdapat pada
kelengkapan sistem yang belum fixed untuk dapat dibagikan oleh masyarakat dari
informasi secara langsung chatting dan pendataan secara langsung.
Oleh karena itu untuk mengatasi masalah sistem infomasi interaksi antara
user atau karyawan dan pegawai dengan masyarakat yang ada di Vokasi
Universitas Muhammadiyah Surakarta maka diperlukan “Perancangan Sistem
Informasi Berbasis Website Di Sekolah Vokasi Universitas Muhammadiyah
Surakarta (Menggunakan Microsoft Dreamwaver Dan PhpMyAdmin)”.
Kata Kunci: Microsoft Dreamwaver, PhpMyAdmin, Sekolah Vokasi
Universitas Muhammadiyah Surakarta, dan Sistem
informasi Manajemen
xx
PERANCANGAN SISTEM INFORMASI BERBASIS WEBSITE
DI SEKOLAH VOKASI UMS
(Menggunakan Microsoft Dreamwaver dan PhpMyAdmin)
.
Diajukan Sebagai Syarat Memperoleh Gelar Sarjana Teknik
Jurusan Teknik Industry Fakultas Teknik
Universitas Muhammadiyah Surakarta
Disusun Oleh :
OLIYA
NIM: D 600 100 001
JURUSAN TEKNIK INDUSTRI FAKULTAS TEKNIK
UNIVERSITAS MUHAMMADIYAH SURAKARTA
2014
i
MOTTO:
“Pendidikan merupakan perlengkapan paling baik untuk hari tua”
(Aristoteles)
“Mereka berkata bahwa setiap orang membutuhkan tiga hal yang akan membuat berbahagia di dunia
ini, yaitu; seseorang untuk dicintai, sesuatu untuk dilakukan, dan sesuatu untuk diharapkan.”
(Tom Bodett)
“Bunga yang tidak akan layu sepanjang jaman adalah kebajikan”
(William Cowper)
Jadilah karang dilautan yang kuat dihantam ombak dan kerjakanlah hal yang bermanfaat untuk diri
sendiri dan orang lain, karena hidup hanyalah sekali. Ingat hanya pada Allah apapun dan di manapun
kita berada kepada Dia-lah tempat meminta dan memohon.
(Penulis)
Jenius adalah 1% inspirasi dan 99% keringat. Usaha lebih penting dari pada perencaan dan tidak ada
yang menggantikan kerja keras.
(Penulis)
v
PERSEMBAHAN
Laporan Tugas Akhir ini penulis persembahkan kepada:
1. Bapak dan ibu yang telah memberikan dukungan,
Do’a serta semangat untuk dapat menjadi orang yang
berhasil. Terimalah sujud dan baktiku kepadamu.
2. Kepada Yesi Kristianawati yang selalu ada di
sampingku disaat suka maupun duka.
3. Kepada sahabat sejatiku Kecuk Rachmanto, Bayu
Deni F., Sayidatun Nafisa, Dani Yunanto yang telah
menemani memberi motivasi.
4. Teman-teman angkatan 2010 yang selalu memberikan
semangat kepada saya.
5. Pembaca yang budiman.
vi
KATA PENGANTAR
Assalamu’alaikum Wr. Wb
Alhamdulillahhirobil’alamin, dengan mengucap puja dan puji syukur
kehadirat Allah SWT. Karena atas ridho dan hidayahNya, sehingga penulis dapat
menyelesaikan tugas
akhir dengan judul
”PERANCANGAN SISTEM
INFORMASI BERBASIS WEBSITE DI SEKOLAH VOKASI UMS
(Menggunakan Microsoft dreamwaver dan PhpMyAdmin)”.
Maksud dan tujuan penulisan Tugas Akhir ini adalah untuk memenuhi
persyaratan kelulusan program studi Strata 1 pada jurusan teknik industry di
Universitas Muhammadiyah Surakarta. Selain itu untuk membuat suatu wadah
informasi yang berguna untuk sekolah vokasi UMS.
Penulis merasa bahwa dalam menyusun laporan ini masih menemui
beberapa kesulitan dan hambatan, disamping itu juga menyadari bahwa penulisan
laporan ini masih jauh dari sempurna dan masih banyak kekurangan-kekurangan
lainnya, maka dari itu penulis mengharapkan kritik dan saran yang membangun
dari semua pihak.
Penulis mendapatkan banyak sekali do’a, bantuan dan dukungan dari
berbagai pihak dalam menyelesaikan Tugas Akhir ini. Atas berbagai bantuan dan
dukungan tersebut, pada kesempatan ini penulis menghaturkan terima kasih yang
sebesar-besarnya kepada:
Allah SWT, Tuhan sekaligus Pengatur Kehidupan yang telah memberikan
kesempatan bagi penulis untuk menyelesaikan Tugas Akhir hingga selesai.
Kedua orang tua, terutama ibu, yang tak henti-hentinya memberikan
semangat dan kasih sayang yang luar biasa kepada penulis.
Kakak dan Adik, Mas Fajar dan Dik Dian yang telah memberi semangat
serta do’a kepada penulis agar cepat selesai.
vii
Kepada pembimbing bapak Dr. Suranto, MM sekalu pembimbing 1 dan
bapak Muchlison Anis, ST.MM yang selalu memberikan masukan dan
motifasi pada saat pembuatan tugas akhir ini.
Penguji bapak Ratnanto Fitriadi, ST, MT selaku penguji 1 dan ibu Siti
Nandiroh, ST, M.Eng sebagai penguji 2 yang telah berkenan memberikan
waktunya untuk menguji tugas akhir.
Semua Bapak dan Ibu Dosen yang mengajar Jurusan Teknik Industri,
Universitas
Muhammadiyah
Surakarta
yang
telah
sabar
dalam
memberikan ilmu dan bantuan kepada penulis selama penulis berkuliah.
Kepada sahabat-sahabatku dari teknik industri UMS, terima kasih
dukungannya selama ini.
Dan berbagai pihak yang tidak dapat penulis sebutkan disini. Semoga
Tuhan Yang Maha Esa memberkati dan membalas semua kebaikan yang telah
dilakukan. Penulis menyadari masih banyak yang banyak dikembangkan pada
tugas akhir. Oleh karena itu penulis menerima setiap masukan dan kritik yang
diberikan. Semoga Tugas Akhir ini dapat memberikan manfaat.
Surakarta, Oktober 2014
Penulis
viii
DAFTAR ISI
HALAMAN JUDUL..................................................................................... i
HALAMAN PERSEMBAHAN ................................................................... ii
HALAMAN PERSETUJUAN ...................................................................... iii
PERNYATAAN ............................................................................................ iv
PERSEMBAHAN ......................................................................................... v
MOTTO ........................................................................................................ vi
KATA PENGANTAR .................................................................................. vii
DAFTAR ISI ................................................................................................. ix
DAFTAR TABEL ......................................................................................... xv
DAFTAR GAMBAR .................................................................................... xvi
DAFTAR LAMPIRAN ................................................................................. xix
ABSTRAKSI ................................................................................................ xx
BAB I
PENDAHULUAN
1.1
Latar Belakang ...................................................................... 1
1.2
Perumusan Masalah .............................................................. 3
1.3
Batasan Masalah.................................................................... 4
1.4
Tujuan ................................................................................... 4
1.5
Manfaat Penelitian ................................................................ 5
1.6
Sistematika Penulisan ........................................................... 6
ix
BAB II
LANDASAN TEORI
2.1
Konsep Dasar Sistem Informasi ............................................ 8
2.1.1. Konsep Dasar Data.................................................... 8
2.1.2. Konsep Dasar Sistem ................................................ 8
2.1.3. Konsep Dasar Informasi ............................................ 11
2.1.4. Konsep Dasar Sistem Informasi ................................ 13
2.1.5. Analisis Kebutuhan Sistem ....................................... 14
2.2
Desain Basis Data (database) .............................................. 17
2.2.1. Pengertian Database ................................................. 17
2.2.2. Tipe-tipe field database............................................. 29
2.2.3. Keuntungan Penggunaan Database .......................... 20
2.3
Basis dan MySQL ................................................................. 21
2.3.1. Pengertian Basis dan MySQL ................................... 21
2.3.2. Program dan teknik penghubung dalam MySQL......
................................................................................... 22
2.4
PHP (Hypertext Preprocessor) ............................................. 22
2.4.1. Pengertian PHP (Hypertext Preprocessor) ............... 22
2.4.2. Kelebihan PHP (Hypertext Preprocessor) ................ 24
2.5
Internet dan Website .............................................................. 25
2.5.1. Definisi Internet ........................................................ 25
2.5.2. Sejarah Internet ......................................................... 26
2.5.3. Definisi Website ........................................................ 28
2.6
Microsoft Dreamwaver 8 ...................................................... 29
x
2.6.1. Definisi Microsoft Dreamwaver 8 ............................ 29
2.6.2. Tampilan Microsoft dreamwaver .............................. 29
2.7
CSS (Cascoding Style Sheet) ................................................ 35
2.7.1. Definisi CSS .............................................................. 35
2.7.2. Keuntungan menggunakan CSS................................ 35
BAB III
2.8
XAMPP ................................................................................. 36
2.9
Tinjauan Pustaka ................................................................... 38
METODOLOGI PENELITIAN
3.1
Objek Penelitian .................................................................... 39
3.2
Prosedur Penelitian................................................................ 39
3.2.1. Perumusan masalah ................................................... 39
3.2.2. Batasan masalah ........................................................ 39
3.2.3. Tujuan ....................................................................... 40
3.3
Teknik Pengumpulan Data .................................................... 40
3.3.1. Data Primer ............................................................... 40
3.3.2. Data Sekunder ........................................................... 42
3.3.3. Studi Evaluasi Perbandingan..................................... 42
3.4
Identifikasi Kebutuhan Sistem .............................................. 43
3.4.1. Merancang diagram konteks (Context Diagram) ...... 43
3.4.2. Merancang Dekomposisi Proses ............................... 43
3.4.3. Merancang Data Flow Diagram (DFD) .................. 44
xi
3.4.4. Analisa website lama dengan perancangan website
baru............................................................................ 44
3.4.5. Perancangan sistem untuk Sekolah Vokasi UMS ..... 46
3.5
Bahan Dan Alat Penelitian .................................................... 48
3.5.1. Bahan......................................................................... 48
3.5.2. Alat ............................................................................ 48
3.6
Perancangan Sistem .............................................................. 49
3.6.1. Perancangan database ............................................... 49
3.6.2. Perancangan form ...................................................... 50
3.6.3. Perancangan report ................................................... 50
3.7
Perancangan Website ............................................................ 51
3.7.1. Pengelompokan struktur website............................... 51
3.7.2. Desain website........................................................... 51
3.7.3. Pengembangan dan pengujian website ...................... 52
3.8
Analisa Perancangan Sistem ................................................. 53
3.9
Publikasi Website .................................................................. 53
3.9.1. Registrasi dan pemilihan space hosting .................... 53
3.9.2. Upload website .......................................................... 53
3.9.3. Editing Script Data .................................................... 54
3.10 Kerangka Pemecahan Masalah ............................................. 55
BAB IV
METODOLOGI PENELITIAN
4.1
Perancangan Sistem .............................................................. 56
4.1.1. Context diagram ........................................................ 57
4.1.2. Dekomposisi Proses .................................................. 60
xii
4.1.3. Data Flow Diagram .................................................. 65
4.2
Pemilihan Aplikasi dan CMS Website .................................. 71
4.2.1. Dreamwaver .............................................................. 71
4.2.2. CMS website ............................................................. 72
4.3
Pembuatan Form ................................................................... 79
4.3.1. Home ......................................................................... 79
4.3.2. Profil.......................................................................... 79
4.3.3. Program ..................................................................... 80
4.3.4. Pendaftaran ................................................................ 81
4.3.5. Lulusan ...................................................................... 82
4.3.6. Kegiatan .................................................................... 83
4.3.7. Informasi Loker ......................................................... 85
4.3.8. Peta lokasi ................................................................. 85
4.3.9. Customer Service ...................................................... 86
4.3.10. Halaman login ........................................................... 86
4.3.11. Halaman admin ......................................................... 87
4.3.12. Halaman dosen .......................................................... 87
4.3.13. Halaman mahasiswa .................................................. 89
4.4
Perancangan database............................................................ 90
4.5
Pengujian Sistem ................................................................... 91
4.5.1. Pengujian Browser .................................................... 91
4.5.2. Pengujian Security Website ....................................... 93
1. Pengujian Captcha .............................................. 93
xiii
2. Pengujian Singkronisasi Database...................... 94
3. Pengujian dan pemilihan pada Domain............... 98
4.6
BAB V
Analisa Keseluruhan ............................................................. 98
KESIMPULAN DAN SARAN
5.1
Kesimpulan ........................................................................... 100
5.2
Saran ...................................................................................... 100
DAFTAR PUSTAKA ........................................................................................ 102
LAMPIRAN ....................................................................................................... 104
xiv
DAFTAR TABEL
Tabel 2.1 Simbol-Simbol DFD ........................................................................... 16
Tabel 2.2 Simbol-Simbol ERD ........................................................................... 16
Tabel 2.3 Tabel Sejarah Internet ......................................................................... 27
Tabel 2.4 Tinjauan Pustaka ................................................................................. 38
Tabel 4.1 Spesifikasi Proses Profil ..................................................................... 66
Tabel 4.2 Spesifikasi Proses Registrasi .............................................................. 67
Tabel 4.3 Spesifikasi Home ............................................................................... 67
Tabel 4.4 Spesifikasi Program ........................................................................... 68
Tabel 4.5 Spesifikasi pendaftaran ...................................................................... 68
Tabel 4.6 Spesifikasi Lulusan ............................................................................ 69
Tabel 4.7 Spesifikasi Kegiatan ........................................................................... 69
Tabel 4.8 Spesifikasi informasi loker ................................................................ 70
Tabel 4.9 Spesifikasi peta lokasi ........................................................................ 70
Tabel 4.10 Spesifikasi Customer service ........................................................... 71
xv
DAFTAR GAMBAR
Gambar 2.1 Proses Sistem ........................................................................................ 9
Gambar 2.2 DFD Level 0 .......................................................................................... 17
Gambar 2.3 Alur Database ....................................................................................... 18
Gambar 2.4 Alur Sistem Informasi ........................................................................... 19
Gambar 2.5 Script dalam PHP: (a) embedded script, (b) non embedded script ....... 24
Gambar 2.6 Fiture Microsoft Dreamwaver 8 ............................................................ 30
Gambar 2.7 Layar Dokumen Utama ......................................................................... 34
Gambar 2.8 Properties Panel Dreamwaver 8 ............................................................ 34
Gambar 3.1 Website Sekolah Vokasi saat ini ........................................................... 45
Gambar 3.2 Kerangka Diagram Alir Aspek Internal ................................................ 47
Gambar 3.3 Kerangka Diagram Alir Aspek Exteral ................................................. 48
Gambar 3.4 Desain Website Sekolah Vokasi UMS .................................................. 51
Gambar 3.5 Kerangka Pemecahan Masalah.............................................................. 55
Gambar 4.1 Context Diagram ................................................................................... 57
Gambar 4.2. Dekomposisi Proses Sistem Website Sekolah Vokasi UMS ................ 64
Gambar 4.3 Data Flow Diagram (DFD) .................................................................. 65
Gambar 4.4. Form Home .......................................................................................... 79
Gambar 4.5. Form Profil ........................................................................................... 79
Gambar 4.6. Form Program Alat Berat ..................................................................... 80
Gambar 4.7. Form Program Manufaktur .................................................................. 80
Gambar 4.8. Form Program Perbankan Syari’ah ...................................................... 81
Gambar 4.9. Form Program Animasi 3D .................................................................. 81
Gambar 4.10. Form Pendaftaran ............................................................................... 82
xvi
Gambar 4.11. Form Lulusan ..................................................................................... 82
Gambar 4.12. File Download .................................................................................... 83
Gambar 4.13. Form Kegiatan Wisudawan ................................................................ 83
Gambar 4.14. Form Kegiatan Pesantren ................................................................... 84
Gambar 4.15. Form Kegiatan 2014 .......................................................................... 84
Gambar 4.16. Form Kegiatan BINTALSIK ............................................................. 84
Gambar 4.17. Form Informasi Loker ........................................................................ 85
Gambar 4.18. Form Peta Lokasi ............................................................................... 85
Gambar 4.19. Form widget Customer service .......................................................... 86
Gambar 4.20. Form Login......................................................................................... 86
Gambar 4.21. Halaman Panel Admin ....................................................................... 87
Gambar 4.22. Halaman Panel Dosen (Mata Kuliah)................................................. 87
Gambar 4.23. Halaman Panel Dosen (Editor Berita Update) ................................... 88
Gambar 4.24. Halaman Panel Dosen (kelola galeri foto) ......................................... 88
Gambar 4.25. Halaman Panel Dosen (galeri foto) .................................................... 88
Gambar 4.26. Halaman Panel Mahasiswa (Input Mata Kuliah) ............................... 89
Gambar 4.27. Halaman Panel Mahasiswa (Input Tugas).......................................... 89
Gambar 4.28. Halaman Panel Mahasiswa (upload dan download tugas) ................. 90
Gambar 4.29 kumpulan database Sekolah Vokasi UMS ......................................... 90
Gambar 4.30. Pengujian di Mozila Firefox ............................................................... 91
Gambar 4.31. Pengujian di Google Chrome ............................................................. 92
Gambar 4.32. Pengujian di Internet Explorer ........................................................... 92
Gambar 4.33. Pengujian di Opramini pada Smart Phone ......................................... 93
Gambar 4.34. Pengujian Captcha ............................................................................. 94
Gambar 4.35. Pengujian Script database .................................................................. 94
xvii
Gambar 4.36. Pengujian Singkronisasi database Admin .......................................... 95
Gambar 4.37. Pengunjian Hubungan Pengunjung Website ...................................... 96
Gambar 4.39. Hasil Singkronisasi Untuk Dosen ...................................................... 97
Gambar 4.39. Hasil Singkronisasi Untuk Mahasiswa ............................................... 97
xviii
DAFTAR LAMPIRAN
LAMPIRAN 1 ........................................................................................................... 104
1. Tentang Sekolah Vokasi UMS ............................................................................ 105
2. Database website Sekolah Vokasi UMS............................................................. 114
LAMPIRAN 2 ........................................................................................................... 120
xix
ABSTRAKSI
Vokasi Universitas Muhammadiyah Surakarta adalah sekolah yang
bergerak dibidang pendidikan alat berat, bank syariah atau permesinan yang
menitik beratkan pada kemampuan mahasiswa secara langsung atau fieldskill.
Sekolah Vokasi Universitas Muhammadiyah Surakarta merupakan instansi swasta
yang memerlukan suatu wadah agar dapat menampung semua informasi dan dapat
dipaparkan pada masyarakat. Informasi yang telah dibuat oleh Vokasi Universitas
Muhammadiyah Surakarta adalah berbasis webside yang bertujuan untuk
memberikan informasi kepada masyarakat, pertanyaan atau database sendiri untuk
kalangan user atau karyawan dan pegawai. Semua interaksi antara user atau
karyawan dan pegawai sebagai tukar infomasi dengan fasilitas atau kebutuhan
masyarakat terhadap Vokasi Universitas Muhammadiyah Surakarta yang berupa
pendaftaran mahasiswa baru, data mahasiswa, lowongan pekerjaan dan kegiatankegiatan yang diadakan oleh Vokasi. Permasalahan yang ada terdapat pada
kelengkapan sistem yang belum fixed untuk dapat dibagikan oleh masyarakat dari
informasi secara langsung chatting dan pendataan secara langsung.
Oleh karena itu untuk mengatasi masalah sistem infomasi interaksi antara
user atau karyawan dan pegawai dengan masyarakat yang ada di Vokasi
Universitas Muhammadiyah Surakarta maka diperlukan “Perancangan Sistem
Informasi Berbasis Website Di Sekolah Vokasi Universitas Muhammadiyah
Surakarta (Menggunakan Microsoft Dreamwaver Dan PhpMyAdmin)”.
Kata Kunci: Microsoft Dreamwaver, PhpMyAdmin, Sekolah Vokasi
Universitas Muhammadiyah Surakarta, dan Sistem
informasi Manajemen
xx