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 2.8 XAMPP... 36 2.9 Tinjauan Pustaka... 38 BAB III 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 Analisa Keseluruhan... 98 BAB V 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