1 SKRIPSI PENGEMBANGAN SISTEM INFORMASI VISUAL 3 DIMENSI BERBASIS WEB LOKASI INFRASTRUKTUR AKADEMIK (STUDI KASUS : UIN SYARIF HIDAYATULLAH JAKARTA) Sk...
SKRIPSI PENGEMBANGAN SISTEM INFORMASI VISUAL 3 DIMENSI BERBASIS WEB LOKASI INFRASTRUKTUR AKADEMIK (STUDI KASUS : UIN SYARIF HIDAYATULLAH JAKARTA) Skripsi Sebagai Salah Satu Syarat Untuk Memperoleh Gelar Sarjana Komputer Fakultas Sains dan Teknologi Universitas Syarif Hidayatullah Jakarta Oleh: FIRMANSYAH 1110093000061
PROGRAM STUDI SISTEM INFORMASI FAKULTAS SAINS DAN TEKNOLOGI UNIVERSITAS ISLAM NEGERI SYARIF HIDAYATULLAH JAKARTA 2015
ii
PENGEMBANGAN SISTEM INFORMASI VISUAL 3 DIMENSI BERBASIS WEB LOKASI INFRASTRUKTUR AKADEMIK (STUDI KASUS : UIN SYARIF HIDAYATULLAH JAKARTA) Skripsi Sebagai Salah Satu Syarat Untuk Memperoleh Gelar Sarjana Komputer Pada Fakultas Sains dan Teknologi Universitas Islam Negeri Syarif Hidayatullah Jakarta
Oleh: FIRMANSYAH 1110093000061
Menyetujui, Pembimbing I,
Pembimbing II,
Nuryasin, M.Kom NIP. 197607152011011005
Eri Rustamaji, MBA NIP.
Mengetahui, Ketua Program Studi Sistem Informasi Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta
Nia Kumaladewi, MMSI NIP: 197504122007102002
iii
PENGESAHAN UJIAN Skripsi yang berjudul “Pengembangan Sistem Informasi Visual 3 Dimensi Berbasis Web Lokasi Infrastruktur Akademik (Studi Kasus : UIN Syarif Hidayatullah Jakarta)” telah diuji dan dinyatakan lulus dalam sidang munaqosyah Fakultas Sains dan Teknologi pada hari Kamis, 26 Maret 2015. Skripsi ini telah diterima sebagai salah satu syarat untuk memperoleh gelar sarjana strata satu (S1) pada Program Studi Sistem Informasi. Menyetujui, Penguji I
Penguji II
Zainul Arham, M.SI
Ir. Bakri La Katjong, MT, M.Kom
NIP.197407302007101002
NIP. 470035164
Pembimbing I
Pembimbing II
Nuryasin, M,Kom NIP. 197607152011011005
Eri Rustamaji, MBA NIP. Mengetahui,
Dekan Fakultas Sains dan Teknologi
Ketua Prodi Sistem Informasi
Dr. Agus Salim, S.Ag., M.Si NIP. 19720816 199903 1 003
Nia Kumaladewi, MMSI NIP: 197504122007102002
iv
PERNYATAAN DENGAN INI SAYA MENYATAKAN BAHWA SKRIPSI INI BENARBENAR HASIL KARYA SAYA SENDIRI YANG BELUM PERNAH DIAJUKAN SEBAGI SKRIPSI ATAU KARYA ILMIAH PADA PERGURUAN TINGGI ATAU LEMBAGA MANAPUN.
Jakarta, Maret 2015
Firmansyah 1110093000061
v
ABSTRAK
Firmansyah (1110093000061), Pengembangan Sistem Informasi Visual 3 Dimensi Berbasis Web Lokasi Infrastruktur Akademik (Studi Kasus : Uin Syarif Hidayatullah
Jakarta)
(Dibawah
bimbingan
NURYASIN
dan
ERI
RUSTAMAJI) UIN Syarif Hidayatullah Jakarta merupakan salah satu universitas yang memiliki bangunan fisik yang cukup banyak. Tampilan informasi peta kampus yang digunakan masih ditampilkan dalam bentuk PDF dari master plan kampus. Jika sebuah gedung baru dibuat, maka untuk melakukan update informasi peta terbaru perlu melakukan perubahan bentuk master plan yang baru menjadi bentuk PDF kembali. Hal ini mengakibatkan lamanya proses update informasi peta kampus. Sistem informasi peta kampus berbasis web ini bertujuan untuk meningkatkan proses penyediaan dan penyebaran informasi mengenai lokasi gedung di kampus UIN Syarif Hidayattullah Jakarta. Peranan penting baik dari aplikasi maupun hasil analisis dari sebuah Sistem Informasi Peta Kampus dan model 3D adalah dapat menampilkan informasi yang lebih menarik dan mudah dipahami dengan interpretasi berupa gambar/peta serta visual model 3D itu sendiri. Sistem ini dikembangkan dengan metode berorientasi objek menggunakan pendekatan Rapid Application Development (RAD), tools Unified Modelling Language (UML) dan Sketchup sebagai tools untuk proses pembuatan model 3 dimensi. Hasil dari penelitian ini adalah sebuah sistem informasi peta kampus berbasis web dan model 3D dengan Google Earth di UIN Syarif Hidayatullah Jakarta yang dapat menampilkan lokasi – lokasi gedung dan fakultas, beserta informasi mengenai fasilitas - fasilitas yang ada di UIN Syarif Hidayattullah Jakarta dalam bentuk peta digital.
Kata kunci: UIN Jakarta, Sistem Informasi Peta Kampus, Google Earth, Google Maps API, Model 3D, Sketchup, Rapid Application Development (RAD), Unified Modelling Language (UML), V Bab + Daftar Pustaka + Daftar Tabel + Daftar Gambar + Daftar Simbol + Daftar Lampiran
Pustaka Acuan (22, 2003-2011)
vi
KATA PENGANTAR
Dengan mengucapkan puji dan syukur kehadirat Allah SWT yang telah memberikan rahmat dan hidayah-Nya sehingga penulis dapat menyelesaikan skripsi ini. Shalawat dan salam tak lupa tersirah untuk Nabi Muhammad SAW beserta keluarga dan sahabatnya. Aamiin. Skripsi yang berjudul “Sistem Informasi Peta Kampus Berbasis Web dengan Model 3 Dimensi Menggunakan Google Earth (Studi Kasus : UIN Syarif Hidayattullah Jakarta)” ini merupakan salah satu komponen penting dalam persyaratan untuk memperoleh gelar sarjana (S-1) pada bidang Sistem Informasi, Fakultas Sains dan Teknologi Universitas Islam Negeri Syarif Hidayatullah Jakarta. Dalam penyusunan laporan ini banyak sekali pihak yang terlibat yang membantu penulis sehingga skripsi ini dapat terselesaikan. Maka dengan rasa syukur serta hormat penulis mengucapkan terima kasih pada semua pihak yang telah memberikan bantuan, bimbingan, dan pengarahan serta dukungan moril dan materil. Oleh karena itu, dalam kesempatan ini penulis mengucapkan terima kasih yang sebesar-besarnya kepada : 1. Bapak. Dr. Agus Salim, M.Si selaku Dekan Fakultas Sains dan Teknologi Universitas Islam Negeri (UIN) Syarif Hidayatullah Jakarta. 2. Ibu Nia Kumaladewi, MMSI selaku Ketua Program Studi Sistem Informasi Fakultas Sains dan Teknologi Universitas Islam Negeri (UIN) Syarif Hidayatullah Jakarta.
vii
3. Bapak Nuryasin, M.Kom selaku pembimbing I dan Bapak Eri Rustamaji, MBA selaku pembimbing II yang secara bijaksana dan kooperatif telah memberikan bimbingan, ilmu, pengarahan, motivasi, dan semangat. 4. Bapak dan Ibu Dosen Fakultas Sains dan Teknologi yang telah memberikan ilmunya khususnya kepada penulis. 5. Bapak Muhammad Ali Meha, S.Sos selaku Pembimbing dari Biro Administrasi Umum dan Kepegawaian UIN Jakarta dan Pak Asep selaku kepala bagian ruang panel yang sudah membantu dalam mencarikan data data. 6. Semua Staf dan Karyawan/i Biro Administrasi Umum dan Kepegawaian yang telah banyak membantu penulis dalam pelaksanaan skripsi ini. 7.
Kedua Orangtua yang terus memberikan motivasi dan semangat untuk menyelesaikan skripsi ini. Kalian merupakan motivasi dan semangat terbesar dalam pembuatan skripsi ini, karena tanpa kalian penulis tidak akan ada apaapanya. Kalian mengajarkan banyak hal yang membuat penulis menjadi orang yang kuat sampai saat ini. Kalian selalu ada menemani disaat penulis membutuhkan bantuan.
8. Sistem Informasi B 2010 (Sibers). Kalian sahabat yang luar biasa baik dalam menuntut ilmu dalam bangku perkuliahan ataupun diluar perkuliahan. Semangat dan kebersamaan yang kita ukir selama ini tidak akan pernah penulis lupakan.
viii
9. Terimakasih juga kepada Nur Annisa Rahmi yang selama ini telah menemani serta memberikan dorongan, semangat, dan motivasi untuk giat mengerjakan skripsi ini. 10. Dan pihak-pihak yang terkait dan berjasa dalam proses pembuatan skripsi ini yang mungkin tidak dapat disebutkan satu persatu tanpa mengurangi rasa terima kasih sedikitpun dari penulis. Akhirnya penulis berharap semoga skripsi ini dapat menambah wawasan, serta berguna bagi penulis pada khususnya dan bagi pembaca pada umumnya.
Jakarta, Maret 2015
Penulis
ix
DAFTAR ISI HALAMAN JUDUL………………………………………………………….. ii LEMBAR PERSETUJUAN……………………………...………………….. iii PENGESAHAN UJIAN……………………..……………………………….. iv PERNYATAAN……………………..…………………….………………….. v ABSTRAK……………………..……………………..……………………….. vi KATA PENGANTAR……………………..………………………………….. vii DAFTAR ISI …………………...………………………..…………………….. x DAFTAR GAMBAR…………….…………………..………...………….….. xv DAFTAR TABEL…………………………………..…………………...….. xix DAFTAR SIMBOL…………………………………..…………………...….. xxi BAB I
PENDAHULUAN 1.1. Latar Belakang .......................................................................... 1 1.2. Rumusan Masalah ..................................................................... 3 1.3. Batasan Masalah ....................................................................... 4 1.4. Tujuan Penelitian ...................................................................... 4 1.5. Manfaat Penelitian .................................................................... 4 1.6. Metodologi Penelitian ............................................................... 5 1.6.1. Metode Pengumpulan Data ........................................... 5 1.6.2. Metode Pengembangan Sistem………………… …… 6 1.7. Sistematika Penulisan…………………………………………7
2. BAB II
LANDASAN TEORI 2.1. Sistem Informasi ....................................................................... 9 2.1.1. Definisi Sistem .............................................................. 9 2.1.2. Definisi Informasi ......................................................... 10
x
2.1.3. Definisi Sistem Informasi ............................................. 10 2.2. Visualisasi ................................................................................. 11 2.3. Peta ............................................................................................ 12 2.3.1. Pengertian Peta .............................................................. 12 2.3.2. Peta Tematik.................................................................. 13 2.4. Google Maps API ..................................................................... 13 2.5. Keyhole Markup Language (KML) .......................................... 15 2.5.1. Pengertian KML ............................................................ 15 2.5.2. Struktur Keyhole Markup Language ............................. 15 2.6. XML .......................................................................................... 16 2.7. UML .......................................................................................... 16 2.7.1. Definisi Unified Modeling Objek (UML) ..................... 16 2.7.2. Diagram UML ............................................................... 17 2.8. Desain 2 Dimensi ...................................................................... 21 2.9. Objek 3 Dimensi ....................................................................... 21 2.9.1. Kelebihan dan kekurangan media tiga dimensi………. 22 2.10. RAD .......................................................................................... 22 2.11. Web ........................................................................................... 24 2.12. Perangkat Lunak Penunjang...................................................... 24 2.12.1. PHP ............................................................................... 24 2.12.2. MySQL .......................................................................... 25 2.12.3. XAMPP ......................................................................... 25 2.12.4. Adobe Dreamweaver ..................................................... 25
xi
2.12.5. Sketchup ........................................................................ 26 2.12.5.1. Teknik Membuat Model 3 Dimensi Dengan Sketchup .......................................................... 27 2.11.6 Adobe PhotoShop .......................................................... 31 2.11.7 Google Earth .................................................................. 32 2.11.8 3D Warehouse ................................................................ 34 3. BAB III METODOLOGI PENELITIAN 3.1. Tempat dan Waktu Penelitian ................................................... 35 3.2. Lokasi Penelitian ....................................................................... 35 3.3. Bahan dan Perangkat Pendukung.............................................. 36 3.2.1 Bahan………………………………………………… ... .36 3.2.2 Perangkat Pendukung……………………………………36 3.4. Metode Penelitian ..................................................................... 37 3.3.1 Metode Pengumpulan Data .............................................. 37 3.3.2 Metode Pemodelan 3D ..................................................... 41 3.3.3 Metode Pengembangan Sistem ........................................ 42 3.3.3.1 Proses Perencanaan Syarat .................................. 42 3.3.3.2 Workshop Design ................................................ 42 3.3.3.3 Implementation .................................................... 44 3.5. Kerangka Penelitian .................................................................. 45 4. BAB IV PEMBAHASAN 4.1. Perencanaan Kebutuhan ............................................................ 46
xii
4.1.1. Tujuan Pengembangan Sistem ...................................... 46 4.1.2. Kebutuhan Sistem………………………..…………....47 4.1.2.1 Sejarah Singkat UIN ......................................... 47 4.1.2.2 Struktur Organisasi ........................................... 53 4.1.2.3 Identifikasi Kebutuhan Sistem .......................... 54 4.1.3 Sistem Berjalan………………………………..… ……55 4.1.4 Identifikasi Masalah.……………….…………..............56 4.1.4.1 Analisis Masalah ................................................. 56 4.1.5 Sistem Usulan…………………………………..............56 4.2. Workshop Design (Proses Desain)…………………………….59 4.2.1. Membuat Desain Model dengan Pemodelan Object Oriented......................................................................... 59 5.
4.2.1.1 Use Case Diagram dan Narasi Use Case ......... 59
DAFTAR GAMBAR Gambar 1.1 Grafik Penggunaan Google ........................................................ 3 Gambar 2.1 Struktur KML ............................................................................. 15 Gambar 2.2 Contoh Diagram Model Use Case ............................................. 18 Gambar 2.3 Contoh Model Class Diagram.................................................... 19 Gambar 2.4 Contoh Model Activity Diagram ................................................ 20 Gambar 2.5 Contoh Model Sequence Diagram ............................................. 21 Gambar 2.6 Tahapan Rapid Application Development .................................. 23 Gambar 2.7 Tampilan Awal Sketchup ........................................................... 26 Gambar 2.8 Add Location .............................................................................. 27 Gambar 2.9 Layer Dari Citra Google Earth ................................................... 28 Gambar 2.10 Rectangles................................................................................. 28 Gambar 2.11 Push/Pull .................................................................................. 29 Gambar 2.12 Import Foto ............................................................................... 29 Gambar 2.13 Position ..................................................................................... 30 Gambar 2.14 Atur Posisi Pin .......................................................................... 30 Gambar 2.15 Penyesuaian Bentuk Foto ......................................................... 30 Gambar 2.16 Hasil Penambahan Texture Foto.…………………………………. 31 Gambar 2.17 Hasil Akhir Model FST .......................................................... .. 31 Gambar 2.18 Tampilan Model 3 Dimensi Dalam Google Earth .................... 33 Gambar 3.1 Kampus satu UIN Jakarta ........................................................... 35 Gambar 3.2 Kampus dua UIN Jakarta ............................................................ 36 Gambar 3.3 Diagram Alir Tahap Pemodelan 3D ........................................... 41
xv
Gambar 3.4 Kerangka Penelitian .................................................................... 45 Gambar 4.1 Struktur Organisasi ..................................................................... 53 Gambar 4.2 Sistem Berjalan ........................................................................... 55 Gambar 4.3 Sistem Usulan ............................................................................. 57 Gambar 4.4 Use Case Diagram ..................................................................... 64 Gambar 4.5 Login Activity Diagram .............................................................. 86 Gambar 4.6 Activity Diagram Kelola Data Gedung....................................... 87 Gambar 4.7 Activity Diagram Kelola Data Fakultas ...................................... 88 Gambar 4.8 Activity Diagram Kelola Data Parkir ......................................... 89 Gambar 4.9 Activity Diagram Mengelola Data Download ............................ 90 Gambar 4.10 Activity Diagram Lihat Peta Kampus ....................................... 91 Gambar 4.11 Activity Diagram Kelola Berita ................................................ 92 Gambar 4.12 Activity Diagram Lihat Berita .................................................. 93 Gambar 4.13 Activity Diagram Lihat Model 3D ............................................ 94 Gambar 4.14 Activity Diagram Kelola Link Terkait ...................................... 95 Gambar 4.15 Activity Diagram Lihat Link Terkait ........................................ 96 Gambar 4.16 Activity Diagram Kelola Link Model 3D ................................. 97 Gambar 4.17 Activity Diagram Lihat Tentang Kami ..................................... 98 Gambar 4.18 Activity Diagram Mengelola Tentang Kami ............................ 99 Gambar 4.19 Activity Diagram Lihat Data Download ................................... 100 Gambar 4.20 Activity Diagram Download ..................................................... 101 Gambar 4.21 Activity Diagram Mengelola User ............................................ 102 Gambar 4.22 Activity Diagram Validasi ........................................................ 103
xvi
Gambar 4.23 Activity Diagram Registrasi ..................................................... 104 Gambar 4.24 Activity Diagram Logout .......................................................... 105 Gambar 4.25 Class Diagram .......................................................................... 107 Gambar 4.26 Login Sequence Diagram ......................................................... 108 Gambar 4.27 Kelola Data Gedung ................................................................. 109 Gambar 4.28 Kelola Data Fakultas ................................................................ 110 Gambar 4.29 Kelola Parkir ............................................................................. 111 Gambar 4.30 Mengelola Data Download ....................................................... 112 Gambar 4.31 Mengelola Data Model 3D ....................................................... 113 Gambar 4.32 Mengelola User ........................................................................ 114 Gambar 4.33 Lihat Peta Kampus.................................................................... 115 Gambar 4.34 Kelola Berita ............................................................................. 116 Gambar 4.35 Lihat Berita ............................................................................... 117 Gambar 4.36 Lihat Model 3D ........................................................................ 118 Gambar 4.37 Kelola Link Terkait .................................................................. 119 Gambar 4.38 Lihat Link Terkait ..................................................................... 120 Gambar 4.39 Mengelola Tentang Kami ......................................................... 121 Gambar 4.40 Lihat Tentang Kami .................................................................. 122 Gambar 4.41 Logout ....................................................................................... 123 Gambar 4.42 Sequence Diagram Registrasi ................................................... 124 Gambar 4.43 Lihat Data Download ............................................................... 125 Gambar 4.44 Validasi Data ............................................................................ 126 Gambar 4.45 Download Data ......................................................................... 127
xvii
Gambar 4.46 Logical Record Structure ......................................................... 128 Gambar 4.47 Struktur Menu Admin............................................................... 137 Gambar 4.48 Struktur Menu Kabag Umum ................................................... 137 Gambar 4.49 Struktur Menu Masyarakat ....................................................... 138 Gambar 4.50 Struktur Menu Pengembang ..................................................... 138 Gambar 4.51 Halaman Utama ........................................................................ 138 Gambar 4.52 Halaman Login ......................................................................... 139 Gambar 4.53 Halaman Registrasi ................................................................... 139 Gambar 4.54 Halaman Utama Admin ............................................................ 140 Gambar 4.55 Input Data Gedung ................................................................... 140 Gambar 4.56 Input Data Fakultas ................................................................... 141 Gambar 4.57 Input Parkir ............................................................................... 141 Gambar 4.58 Input Berita ............................................................................... 142 Gambar 4.59 Input Model .............................................................................. 142 Gambar 4.60 Manage Gedung ........................................................................ 143
xviii
DAFTAR TABEL Tabel 3.1 Tabel Studi Literatur Sejenis ........................................................... 38 Tabel 4.1 Identifikasi Aktor dan Use Case ..................................................... 59 Tabel 4.2 Daftar Diagram Use Case ............................................................... 60 Tabel 4.3 Narasi Use Case “Login” ................................................................ 65 Tabel 4.4 Narasi Use Case Mengelola data gedung........................................ 66 Tabel 4.5 Narasi Use Case Mengelola data fakultas ....................................... 67 Tabel 4.6 Narasi Use Case Mengelola parkir ................................................. 68 Tabel 4.7 Narasi Use Case Mengelola data download.................................... 70 Tabel 4.8 Narasi Use Case Mengelola user .................................................... 71 Tabel 4.9 Narasi Use Case Lihat Peta ............................................................. 72 Tabel 4.10 Narasi Use Case Mengelola Berita ............................................... 73 Tabel 4.11 Narasi Use Case Lihat Berita ........................................................ 74 Tabel 4.12 Narasi Use Case Lihat 3D Model ................................................. 75 Tabel 4.13 Narasi Use Case Mengelola Link Terkait ..................................... 76 Tabel 4.14 Narasi Use Case Lihat Link Terkait .............................................. 77 Tabel 4.15 Narasi Use Case Mengelola Model 3D ......................................... 78 Tabel 4.16 Narasi Use Case Lihat tentang kami ............................................. 79 Tabel 4.17 Narasi Use Case Mengelola tentang kami .................................... 80 Tabel 4.18 Narasi Use Case Validasi .............................................................. 81 Tabel 4.19 Narasi Use Case Registrasi ........................................................... 82 Tabel 4.20 Narasi Use Case Download ........................................................... 83 Tabel 4.21 Narasi Use Case Lihat Data Download ......................................... 84
xix
Tabel 4.22 Narasi Use Case Logout ................................................................ 85 Tabel 4.23 Daftar Objek Yang Diusulkan ....................................................... 106 Tabel 4.24 Tabel Akses Database ................................................................... 128 Tabel 4.25 Tabel User ..................................................................................... 130 Tabel 4.26 Tabel Gedung ................................................................................ 131 Tabel 4.27 Tabel Model 3D ........................................................................... 131 Tabel 4.28 Tabel Berita ................................................................................... 132 Tabel 4.29 Tabel Link Terkait ......................................................................... 133 Tabel 4.30 Tabel Fakultas ............................................................................... 133 Tabel 4.31 Tabel Parkir ................................................................................... 134 Tabel 4.32 Tabel Data Download.................................................................... 135 Tabel 4.33 Tabel Tentang Kami ...................................................................... 136 Tabel 4.34 Tabel Pengujian Sistem Admin, Kabag, Kabir, dan PR umum .... 145 Tabel 4.35 Pengujian Sistem Public User ....................................................... 146
xx
DAFTAR SIMBOL SIMBOL USE-CASE MODEL DIAGRAMS (Whitten et al, 2004) Simbol
Keterangan Actor
Actor1
Use case
-End1
Association
-End2
*
*
<<dependson>>
Depends on
<<uses>>
Uses (includes)
Inheritance «inherits»
xxi
SIMBOL CLASS DIAGRAM (Whitten et al, 2004)
Simbol
Keterangan Class 1. class name 1 2 3
Class
2. attributes 3. behaviors
-End1
*
Association
-End2
*
Generalization
xxii
SIMBOL SEQUENCE DIAGRAM (Whitten et al, 2004)
Simbol
Keterangan Object
Lifeline
Messages
Behaviors (operations)
xxiii
SIMBOL ACTIVITY DIAGRAM (Whitten et al, 2004) Simbol
Keterangan Activity
Initiate Activities
Start of the Process
Termination of the Process
Synchronization Bar
Decision Activity
xxiv
BAB 1 PENDAHULUAN 1.1 Latar Belakang Peta merupakan gambaran sebagian atau keseluruhan rupa bumi yang diperkecil ke dalam bidang datar dengan skala tertentu. Peta yang umumnya digunakan adalah peta tematik. Fungsi peta secara umum dikelompokkan menjadi empat bagian utama yaitu memperlihatkan posisi (baik horisontal maupun posisi vertikal dari suatu objek di permukan bumi), memperlihatkan ukuran, bentuk serta menghimpun dan menseleksi objek-objek tersebut. Untuk saat ini perkembangan teknologi di bidang pemetaan sudah sangat signifikan. Sudah banyak yang mengembangkan peta biasa menjadi peta digital baik dalam bentuk 2 dimensi maupun 3 dimensi. Berdasarkan survei yang telah dilakukan dengan melakukan wawancara dan penyebaran kuesioner kepada mahasiswa dan pengunjung UIN Jakarta, banyak diantara mereka merasa informasi yang ditampilkan kurang up to date. Selain itu ada pula permasalahan dari pihak penyedia informasi peta kampus, yaitu pada bagian Umum dan Kepegawaian akademik pusat. Hal ini diketahui berdasarkan hasil wawancara bahwa dalam visualnya, kampus UIN Jakarta hanya menampilkan PDF master plan kampus yang diterbitkan dibagian helpdesk.uinjkt.ac.id dalam website UIN Jakarta sebagai media informasi peta kampus. Jika sebuah gedung baru di buat, maka untuk melakukan update informasi peta terbaru perlu melakukan perubahan bentuk master plan yang
1
2
baru menjadi bentuk PDF kembali. Sehingga memerlukan waktu yang cukup lama untuk melakukan update peta terbaru. Hal ini terkait dengan UU No 28 tahun 2002 tentang bangunan gedung dan Peraturan Pemerintah RI No. 36 tahun 2005 mengenai pelaksanaan UU No 28 tahun 2002 pada pasal 96 tentang peran masyarakat sebagai pemantau dan penjaga ketertiban terkait bangunan gedung. Dan hal ini juga terkait dengan UU RI No 14 tahun 2008 tentang keterbukaan informasi publik dimana media informasi peta kampus perlu diterbitkan kepada publik. Melihat permasalahan tersebut, maka diperlukan suatu sistem informasi peta kampus yang dapat memudahkan untuk melakukan proses update peta dengan mudah tanpa harus merubah bentuk master plan ke dalam bentuk PDF. Selain itu, dengan adanya peta 3D kampus UIN Jakarta berbasis Google Earth, dapat memberikan informasi geografis serta visualisasi keadaan kampus secara 3 dimensi dapat menjadi media yang menarik dan menampilkan keadaan yang nyata. Berikut grafik penggunaan produk Google :
Gambar 1.1 Grafik Penggunaan Google (Sumber : http://www.idkeyword.com/search-engine-marketing/, 2015)
3
Dapat di lihat dari grafik tersebut bahwa sekitar 93% publik menggunakan Google dan 85% digunakan sebagai yang utama. Yahoo 64% digunakan secara umum dan 10% sebagai mainly used. Bing, 30% digunakan secara umum dan 2% sebagai mainly used. Maka dengan dibangunnya peta kampus berbasis web dengan Google Maps dan model 3D menggunakan Google Earth ini dapat menjadi suatu media informasi peta kampus yang interaktif dan diharapkan dapat membantu permasalahan yang ada. Berdasarkan penjabaran latar belakang ini, maka penulis tertarik untuk mengembangkan sistem informasi peta kampus pada UIN Jakarta dengan judul penelitian: “PENGEMBANGAN SISTEM INFORMASI VISUAL 3 DIMENSI BERBASIS WEB LOKASI INFRASTRUKTUR AKADEMIK (STUDI KASUS : UIN SYARIF HIDAYATULLAH JAKARTA)”
1.2 Rumusan Masalah Dari latar belakang di atas dapat dirumuskan masalah sebagai berikut: Bagaimana merancang dan membangun visualisasi model 3 dimensi kampus UIN Syarif Hidayatullah Jakarta serta informasi yang terkandung didalamnya dapat diakses oleh publik?
4
1.3 Batasan Masalah Batasan masalah dari tugas akhir ini adalah: 1. Pembuatan peta dengan objek 3 dimensi hanya pada fakultas wilayah kampus 1 dan kampus 2. 2. Proses pengolahan data menggunakan software Google Sketchup untuk memberikan penggambaran 3 dimensi dalam aspek kartografi. 3. Peta yang dihasilkan menggunakan Google Maps API. 4. Peta 3 dimensi ditampilkan dengan menggunakan Google Earth.
1.4 Tujuan Penelitian Tujuan yang ingin dicapai dari penelitian ini adalah membangun suatu sistem informasi peta kampus berbasis web dengan model 3 dimensi menggunakan Google Earth pada UIN Jakarta yang dapat menampilkan informasi yang interaktif dan up to date dengan Google Maps dan membantu pengunjung dan mahasiswa untuk mencari informasi mengenai kampus UIN Jakarta.
1.5 Manfaat Penelitian Penelitian ini diharapkan dapat bermanfaat bagi:
Universitas Penelitian ini diharapkan dapat menjadi sumbangan ilmu pengetahuan khususnya di bidang sistem informasi geografi dan 3D modeling.
5
Peneliti o Mengetahui kemampuan mahasiswa dalam memahami teori – teori yang diajarkan di bangku kuliah. o Mengetahui sejauh mana mahasiswa dapat menerapkan ilmunya dan sebagai bahan evaluasi.
Masyarakat o Dapat mengetahui wilayah UIN Jakarta serta bentuk dan model dari gedung – gedungnya o Dapat mengetahui lokasi gedung – gedung UIN Jakarta
1.6 Metodologi Penelitian 1.6.1 Metode Pengumpulan Data Dalam menyusun skripsi ini, peneliti berusaha mendapatkan serta mengumpulkan data yang lengkap guna menyusun karya ilmiah ini. Untuk mengumpulkan data dari sampel penelitian, dilakukan dengan metode tertentu sesuai dengan tujuannya. Ada berbagai metode yang telah kita kenal antara lain wawancara, observasi (pengamatan), kuesioner atau angket, dan dokumenter serta studi pustaka. Adapun metode yang peneliti gunakan dalam mendapatkan data-data adalah sebagai berikut: a. Penelitian Lapangan (Field Research)
6
Dalam hal ini penelitian dilakukan di lapangan untuk memperoleh informasi serta data yang diperlukan. Adapun teknik yang ditempuh adalah: 1. Observasi langsung ke objek penelitian guna memperoleh data atau gambaran serta keterangan terhadap sistem berjalan. 2. Interview atau wawancara, yaitu peneliti mengumpulkan data secara tatap muka langsung dengan mahasiswa/i UIN Jakarta guna mendapatkan data-data dan keterangan yang diperlukan. b. Penelitian Kepustakaan (Library Research) Pengumpulan data dan informasi dengan cara membaca bukubuku dan referensi dari internet yang dapat dijadikan acuan pembahasan dalam masalah ini. 1.6.2 Metode Pengembangan Sistem Metode yang digunakan dalam pengembangan sistem informasi peta kampus berbasis web ini adalah dengan strategi RAD (Rapid Application
Development)
yang
merupakan
suatu
pendekatan
berorientasi objek (Kendall, 2003). Ada tiga fase dalam RAD yaitu: a. Requirement Planning Dalam tahap ini akan diketahui apa saja yang menjadi kebutuhan sistem yaitu dengan mengidentifikasi kebutuhan informasi dan masalah yang dihadapi b. Workshop Design Mengidentifikasi solusi alternatif dan memilih solusi yang terbaik.
7
c. Implementation Sistem diimplementasikan (coding) ke dalam bentuk yang dimengerti oleh mesin yang diwujudkan dalam bentuk program atau unit program.
1.7 Sistematika Penulisan Skripsi ini terdiri dari lima bab yang disusun sedemikian rupa dengan materi pembahasan yang saling berhubungan dengan sistematika sebagai berikut: BAB I
PENDAHULUAN Bab ini akan diuraikan latar belakang, perumusan masalah, batasan masalah, tujuan dan manfaat penelitian, metodologi penelitian, dan sistematika penulisan.
BAB II
LANDASAN TEORI Dalam bab ini akan dijelaskan mengenai landasan teori yang relevan dengan permasalahan yang ada.
BAB III METODOLOGI PENELITIAN Bab ini akan diuraikan metodologi penelitian yang digunakan diantaranya metodologi pengumpulan data dan metodologi pengembangan sistem. BAB IV PEMBAHASAN Bab
ini
akan
diuraikan
dan
membahas
hasil
penelitian
pengembangan sistem informasi peta kampus berbasis web dengan
8
model 3D yang meliputi hasil wawancara, kuesioner, analisis, desain, implementasi, operasi, dan sistem pendukung. BAB V
PENUTUP Bab ini akan disajikan kesimpulan dan saran-saran yang penulis angkat berdasarkan pembahasan pada bab-bab sebelumnya.
BAB II LANDASAN TEORI 2.1 Sistem Informasi 2.1.1
Definisi Sistem Sistem adalah kumpulan elemen-elemen atau sumber daya yang saling berkaitan secara terpadu, terintegrasi dalam suatu hubungan tertentu, dan bertujuan untuk mencapai tujuan tertentu (Gondodiyoto, 2007). Sistem merupakan kumpulan dari komponen atau elemen-elemen atau subsistem-subsistem (Ladjamudin, 2005). “Sistem adalah kumpulan dari elemen-elemen yang berinteraksi untuk mencapai suatu tujuan tertentu” (Jogiyanto, 2005). Terdapat
dua
kelompok
pendekatan
di
dalam
mendefinisikan sistem, yaitu yang menekankan pada prosedurnya dan yang menekankan pada komponen atau elemennya (Jogiyanto, 2005). a. Pendekatan sistem yang lebih menekankan pada prosedur mendefinisikan sistem sebagai suatu jaringan kerja dari prosedur-prosedur yang saling berhubungan, berkumpul bersama-sama untuk melakukan suatu kegiatan atau menyelesaikan suatu sasaran tertentu. b. Pendekatan sistem yang lebih menekankan pada komponen atau elemennya mendefinisikan sistem sebagai berikut:
9
10
1. Sistem sebagai bagian-bagian yang saling berkaitan yang beroperasi bersama untuk mencapai beberapa sasaran atau maksud. 2. Sistem sebagai suatu komponen atau variabel yang terorganisir, saling berinteraksi, saling bergantung satu sama lain dan terpadu. 3. Sistem adalah sekelompok elemen yang terintegrasi dengan maksud yang sama untuk mencapai suatu tujuan. 4. Sistem sebagai seperangkat elemen-elemen yang terintegrasi dengan maksud yang sama untuk mencapai suatu tujuan bersama. 2.1.2
Definisi Informasi Informasi dapat didefinisikan sebagai hasil dari pengelolaan data dalam bentuk lebih berguna dan lebih berarti bagi penerimanya yang menggambarkan suatu kejadian nyata yang digunakan untuk pengambilan keputusan (Jogiyanto, 2005).
2.1.3
Definisi Sistem Informasi Sistem informasi adalah gabungan yang terorganisasi dari manusia, perangkat lunak, perangkat kelas, jaringan komunikasi dan
sumber
data
dalam
mengumpulkan,
mengubah,
dan
menyebarkan informasi dalam organisasi. Sistem informasi dapat di definisikan sebuah sistem dalam suatu organisasi yang
11
mempertemukan kebutuhan pengelolahan transaksi harian yang mendukung fungsi operasi organisasi yang bersifat manajerial dalam kegiatan startegi dari organisasi untuk menyediakan kepada pihak luar tertentu dengan informasi yang di perlukan untuk mengambil keputusan. 2.1 Visualisasi Visualisasi (visualization) adalah penampilan informasi yang bersifat komplek ke dalam bentuk visual (gambaran) (Chapman, 2004: 665). Secara umum, visualisasi dalam bentuk gambar baik yang bersifat abstrak ataupun nyata telah dikenal sejak awal dari peradaban manusia. Pada saat ini visualisasi telah berkembang dan banyak dipakai untuk keperluan ilmu pengetahuan, rekayasa, visualisasi desain produk, pendidikan, multimedia interaktif, kedokteran, dan lain-lain. Visual berhubungan erat dengan mata atau penglihatan. Menurut beberapa ahli, visual juga merupakan salah satu bagian dari aktivitas belajar dimana aktivitas belajar itu sendiri terdiri atas: somatis (belajar dengan bergerak dan berbuat), auditori (belajar dengan berbicara dan mendengar), intelektual (belajar dengan memecahkan masalah dan merenung), dan visual (belajar dengan cara melihat, mengamati, dan menggambarkan). Keempat aktivitas belajat tersebut harus dikuasai supaya proses belajar dapat berlangsung secara optimal. Berikut ini adalah beberapa pengertian dan definisi visual: 1.
Budiman Hakim
12
Visual adalah syarat mutlak untuk memperkenalkan sebuah brand pada konsumen 2.
Pujianto Visual adalah komponen yang terlihat pada saat aplikasi dijalankan
3.
Femi Olivia Visual
merupakan
salah
satu
cara
mengorganisasikan
pemikiran dan meningkatkan kemampuan berpikir dan komunikasi 4.
Agus Sachari Visual merupakan bagian penting dalam proses pembentukan dialog budaya
5.
Dendy Triadi, Addy Sukma Bharata Visual merupakan bagian iklan yang sering digunakan sebagai eye catcher
2.2 Peta 2.2.1
Pengertian Peta Peta adalah suatu representasi atau gambaran unsur-unsur atau kenampakan-kenampakan abstrak yang dipilih dari permukaan bumi, atau yang ada kaitanya dengan permukaan bumi atau bendabenda angkasa dan umumnya digambarkan pada suatu bidang datar dan diperkecil atau diskalakan (Hidayati, 2008). Dari definisi peta tersebut dapat ditarik kesimpulan bahwa peta merupakan :
13
1. Abstraksi obyek-obyek permukaan bumi dengan menggunakan simbol-simbol. 2. Simbol – simbol digambarkan pada bidang datar sehingga diperlukan proyeksi peta. 3. Obyek-obyek permukaan bumi tersebut diperkecil. 2.2.2
Peta Tematik Peta Tematik adalah peta yang menyajikan tema tertentu dan untuk kepentingan tertentu (land status, penduduk, transportasi dll.)
dengan
disederhanakan
menggunakan sebagai
dasar
peta
rupa
untuk
bumi
yang
meletakkan
telah
informasi
tematiknya. 2.3 Google Maps API Google Maps adalah layanan aplikasi dan teknologi peta berbasis web yang disediakan google secara gratis, termasuk didalamnya website Google Maps (http:i/maps.google.com), Google Ride Fonde, Google transit, dan peta yang disisipkan pada website lain melalui Google Maps API. Google Maps di buat dengan menggunakan kombinasi dari gambar peta, database, serta objek – objek interatif yang di buat dengan bahasa pemrograman HTML, javascript dan AJAX, serta beberapa bahasa pemrograman lainnya. Gambar – gambar yang muncul pada peta merupakan hasil komunikasi dengan database pada web server Google
14
untuk menampilkan gabungan dari potongan – potongan gambar yang di minta. Keseluruhan citra yang akan diintegrasikan ke dalam database google server, nantinya akan dapat dipanggil sesuai kebutuhan permintaan. Google juga menyedikan layanan Google Maps API yang memungkinkan para pengembang untuk menintegrasikan Google Maps ke dalam website masing – masing dengan menggunakan data point sendiri. API atau Application Programming Interface merupakan suatu dokumentasi yang terdiri dari interface, fungsi, kelas, struktur dan sebagainya untuk membangun sebuah perangkat lunak. Dengan adanya API ini, maka memudahkan programmer untuk “membongkar” suatu software untuk kemudian dapat dikembangkan atau diintegrasikan dengan perangkat lunak yang lain (Amri, M. Syaitul, 2011). API dapat dikatakan sebagai penghubung suatu aplikasi dengan aplikasi lainnya yang memungkinkan programmer menggunakan sistem function. Proses ini dikelola melalui operating system. Keunggulan dari API ini adalah memungkinkan suatu aplikasi dengan aplikasi lainnya dapat saling berhubungan dan berinteraksi. Bahasa pemrograman yang digunakan oleh Google Maps, yang terdiri dari HTML, Javascript dan AJAX serta XML, memungkinkan untuk menampilkan peta Google Maps di website lain.
15
2.4 Keyhole Markup Language (KML) 2.4.1 Pengertian KML KML adalah XML yang berfokus pada visualisasi geografis, termasuk anotasi peta dan citra. Visualisasi geografisnya mencakup tidak hanya penyajian data grafik di peta dunia tetapi juga dalam hal navigasi kendali dalam mengarahkan pengguna saat penggunaan peta. KML mempunyai suatu set terstruktur berupa tempat, gambar, polygon, model 3D, teks keterangan dan lain – lain untuk ditampilkan dalam Google Earth, Google Maps, dan mobile. Setiap tempat memiliki bujur dan lintang. Dari data XML inilah dapat dipetakan ke dalam Google Maps menjadi sebuah layer KML (Purvis, 2006). 1.4.2
Struktur Keyhole Markup Language (KML) Seperti yang sudah dijelaskan oleh Purvis (2006) secara umum, struktur penulisan file KML adalah sebagai berikut:
Gambar 2.1 Struktur KML
16
2.5 XML Extensible Markup Language (XML) adalah sebuah meta-language yang berarti ini adalah sebuah bahasa yang memperbolehkan pengembang untuk
membuat
bahasa
markup
(sebuah
bahasa
yang
mampu
mendeskripsikan data sebuah dokumen dan menampilkannya pada dokumen yang lainnya) sendiri. Tidak seperti HTML,
XML hanya
berfungsi sebagai penyimpan data, tidak menampilkannya. XML mengubah struktur data menjadi sebuah dokumen dalam bentuk teks, tujuannya adalah untuk mempercepat proses pertukaran maupun penyajian data di internet (Holzner, 2003). XML sendiri bisa digunakan untuk berbagai kebutuhan misal: membuat daftar buku pada sebuah perpustakaan, membuat daftar ikan di laut, selain itu juga XML bisa digunakan dalam pemrograman Google Maps sebagai data info window. XML dibuat oleh World Wide Web Consortium (W3C) dan telah dibakukan standarnya oleh Generalized Markup Language (SGML) pada 1998. 2.6 UML 2.6.1
Definisi Unified Modeling Language (UML) Unified Modeling Language (UML) adalah salah satu alat bantu yang sangat handal di dunia pengembangan sistem yang berorientasi obyek. Hal ini di sebabkan karena UML menyediakan bahasa pemodelan visual yang memungkinkan bagi pengembang sistem untuk membuat cetak biru atas visi mereka dalam bentuk
17
yang baku, mudah di mengerti, serta di lengkapi dengan mekanisme
yang
mengkomunikasikan
efektif
untuk
rancangan
berbagi
mereka
(sharing)
dengan
yang
dan lain
(Munawar, 2005). 2.6.2
Diagram UML Unified Modeling Language (UML) memiliki beberapa diagram diantaranya (Munawar, 2005): 1. Use Case Diagram Use case adalah deskripsi fungsi dari sebuah sistem dari perspektif
pengguna.
Use
case
bekerja
dengan
cara
mendeskripsikan tipikal interaksi antara user (pengguna) sebuah sistem dengan sistemnya sendiri melalui sebuah cerita bagaimana sebuah sistem di pakai. (Munawar, 2005) Dalam sebuah pembicaraan tentang use case, pengguna biasanya disebut dengan actor. Actor adalah sebuah peran yang bisa dimainkan oleh pengguna dalam interaksinya dengan sistem. Use case adalah alat bantu terbaik guna menstimulasi pengguna potensial untuk mengatakan tentang suatu sistem dari sudut pandangnya. Diagram use case mempunyai 3 notasi yang menunjukkan aspek dari sistem (Munawar, 2005): a.
Actor (Pengguna) yaitu abstraksi dari orang dan sistem lain yang mengaktifkan fungsi dari target sistem.
Actor
18
mewakili peran orang, sistem yang lain atau alat ketika berkomunikasi dengan use case. b.
Use Case adalah abstraksi dari interaksi antara sistem dan actor. Use case dibuat berdasarkan keperluan actor. Use Case harus merupakan “apa” yang dikerjakan software aplikasi,
bukan
“bagaimana”
software
aplikasi
mengerjakannya. Setiap use case harus diberi nama yang menyatakan apa hal yang dicapai dari hasil interaksinya dengan actor. c.
Relationship
(hubungan)
yaitu
hubungan
antara
actor/pelaku dengan use case dimana terjadi interaksi diantara mereka.
Gambar 2.2 Contoh Diagram Model Use Case (Munawar, 2005) 2. Class Diagram Class dalam notasi UML digambarkan dengan kotak. Nama class menggunakan huruf besar di awal kalimatnya dan
19
diletakkan di atas kotak. Bila class mempunyai nama yang terdiri dari 2 (dua) suku kata atau lebih, maka semua suku kata digabungkan tanpa spasi dengan huruf awal tiap suku kata menggunakan huruf besar. Atribute adalah property dari sebuah class. Attribute ini melukiskan batas nilai yang mungkin ada pada obyek dari class. Sebuah class mungkin mempunyai nol atau lebih attribute (Munawar, 2005). Operation adalah sesuatu yang bisa dilakukan oleh sebuah class atau yang anda (atau class
yang
lain)
dapat
lakukan
untuk
sebuah
class.
Responsibility adalah keterangan tentang apa yang akan dilakukan class yaitu apa yang akan dicapai oleh attribute dan operation (Munawar, 2005).
Gambar 2.3 Contoh Model Class Diagram (Munawar, 2005) 3. Activity Diagram Activity Diagram adalah teknik untuk mendeskripsikan logika procedural, proses bisnis dan aliran kerja dalam banyak kasus. Activity diagram mempunyai peran seperti halnya flowchart, akan tetapi perbedaannya dengan flowchart adalah
20
activity diagram bisa mendukung perilaku paralel sedangkan flowchart tidak bisa (Munawar, 2005).
Gambar 2.4 Contoh Model Activity Diagram (Munawar, 2005) 4. Sequence Diagram Sequence diagram digunakan untuk menggambarkan perilaku pada sebuah scenario. Diagram ini menunjukkan sejumlah contoh obyek dan message (pesan) yang diletakkan di antara obyek-obyek ini di dalam use case. Komponen utama sequence diagram terdiri atas obyek yang dituliskan dengan kotak segi empat bernama. Message diwakili oleh garis dengan tanda panah dan waktu yang ditunjukkan dengan progress vertical (Munawar, 2005).
21
Gambar 2.5 Contoh Model Sequence Diagram (Munawar, 2005) 2.7 Desain 2 dimensi Desain 2 dimensi adalah ruang yang hanya mengenal dua parameter dimensi, yaitu panjang dan lebar (Arief Ramadhan, S.Kom dkk, 2006). Dalam konsep 2 dimensi, kita tidak bisa mendapatkan dimensi ketebalan. Dalam 2 dimensi, kita akan mengenal dua sumbu koordinat atau axis, yaitu sumbu X dan sumbu Y. 2.8 Objek 3 dimensi Menurut (Arief Ramadhan, S.Kom dkk, 2006), berbeda dengan ruang desain 2 dimensi yang hanya mengenal 2 parameter yaitu panjang dan lebar, dalam konsep ruang 3 dimensi ini bisa mendapatkan dimensi ketebalan. Dalam ruang desain 3 dimensi akan mengenal tiga sumbu koordinat, yaitu sumbu X, sumbu Y, dan sumbu Z. Setiap fenomena terkait fisik (spasial) memiliki lokasi di dalam ruang. Akibatnya, model data yang lengkap juga harus mencakup dimensi penting yang ketiga (ruang 3 dimensi). Hal ini tentu saja juga berlaku bagi permukaan tanah, menara, sumur, bangunan, batas – batas,
22
alamat, bencana (gempa, tsunami, kebakaran), pembajakan dan atau perompakan, kejahatan, kecelakaan, dan peristiwa – peristiwa penting lainnya. 2.9.1
Kelebihan dan kekurangan media tiga dimensi Menurut Moedjiono (1992) kelebihan dari media visual tiga dimensi: 1. Memberikan pengalaman secara langsung 2. Penyajian secara konkrit dan menghindari verbalisme 3. Dapat menunjukkan objek secara utuh baik kontruksi maupun cara kerjanya 4. Dapat memperlihatkan struktur organisasi secara jelas 5. Dapat menunjukkan alur suatu proses secara jelas. Kelemahan media tiga dimensi yaitu: 1. Tidak bisa menjangkau sasaran dalam jumlah 2. Penyimpanannya memerlukan ruang yang besar dan perawatan yang rumit 3. Untuk membuat alat peraga ini membutuhkan biaya yang besar 4. Anak tuna netra sulit untuk membandingkannya
2.9 RAD Rapid Aplication Development adalah suatu pendekatan berorientasi obyek terhadap pengembangan sistem yang mencakup suatu metode pengembangan serta perangkat-perangakat lunak (Kendall, 2003).
23
Gambar 2.6 Tahapan Rapid Application Development (RAD) (Kendall, 2003)
Ada tiga fase dalam RAD yaitu (Kendall, 2003): 1. Requiretment Planning, Dalam fase ini, penganalisis dan pengguna bertemu untuk mengidentifikasikan tujuan-tujuan aplikasi atau sistem serta untuk mengidentifikasikan syarat-syarat informasi yang ditimbulkan dari tujuan-tujuan tersebut. 2. Design Workshop, yaitu Fase ini adalah fase untuk merancang dan memperbaiki yang bisa digambarkan sebagai workshop. Selama workshop Desain RAD, pengguna merespon working prototype yang ada dan penganalisis memperbaiki modul-modul yang dirancang berdasarkan respon pengguna. 3. Implementation, Dalam gambar 2.6 ditunjukan bahwa Anda dapat melihat bahwa penganalisis bekerja dengan para pengguna secara intens selama workshop untuk merancang aspek-aspek bisnis dan nonteknis dari perusahaan. Segera setelah aspek-aspek ini disetujui dan sistem dibangun dan disaring, sistem-sistem baru atau bagian
24
dari sistem diuji coba dan kemudian diperkenalkan kepada organisasi. 2.10 Web Aplikasi web adalah sebuah sistem informasi yang mendukung interaksi pengguna melalui antarmuka berbasis web. Fitur-fitur aplikasi web biasanya berupa data persistance, mendukung transaksi, dan komposisi halaman web dinamis yang dapat dipertimbangkan sebagai hibridisasi antara hipermedia dan sistem informasi. Aplikasi web adalah bagian dari client-side yang dapat dijalankan oleh browser web. Clientside mempunyai tanggung jawab untuk pengeksekusian proses bisnis. Interaksi web dibagi ke dalam tiga langkah (Simarmata, 2010), yaitu: 1. Permintaan Pengguna mengirimkan permintaan ke server web, biasanya via halaman web yang ditampilakan pada browser web. 2. Pemrosesan Server web menerima permintaan yang dikirimkan oleh pengguna kemudian memproses permintaan tersebut. 3. Jawaban Browser menampilkan hasil dari permintaan pada jendela browser. 2.11 Perangkat Lunak Penunjang 2.11.1 PHP (Personal Home Page) PHP adalah merupakan script untuk pemograman script web server-side, script yang membuat dokumen HTML secara on
25
the fly, dokumen HTML yang dihasilkan dari suatu aplikasi bukan dokumen HTML yang dibuat dengan menggunakan editor teks atau editor HTML (Sidik, 2004). 2.11.2 MySQL MySQL (My Structure Query Language) merupakan software database yang termasuk paling popular di lingkungan Linux, kepopuleran ini karena ditunjang performansi query dari database-nya yang saat itu bisa dikatakan paling cepat dan jarang bermasalah (Sidik, 2005). 2.11.3 XAMPP XAMPP merupakan suatu paket yang terdiri dari Apache, MySQL, PHP, dan Perl yang dapat digunakan untuk membantu proses instalasi produk tersebut (Sukarno, 2006). Berikut adalah kelebihan XAMPP (Sukarno, 2006): 1. XAMPP dapat berjalan pada operating system Linux dan Windows. Dan kemungkinan juga akan berjalan di Macintosh. 2. Mudah bagi programmer apabila ingin berganti versi PHP, cukup dengan melakukan switch versi. 3. Mudah dan cepat dalam proses instalasi. 2.11.4 Adobe Dreamweaver Adobe Dreamweaver adalah sebuah software web design yang menawarkan cara mendesain website dengan dua langkah sekaligus dalam satu waktu, yaitu mendesain dan memprogram.
26
Adobe Dreamweaver didukung dengan penggunaan CSS, XML, RSS, dan kemudahan-kemudahan lain yang diperlukan (M. Suyanto, 2003). 2.11.5 Sketchup Sketchup adalah sebuah software komputer untuk membuat model 3 Dimensi (3-D) atas benda-benda fisik seperti gedunggedung, peralatan rumah tangga, disain tata ruang dan sebagainya. Desain arsitektur merupakan salah satu aplikasi pemakaian SketchUp. Sebelum ada Google Building Maker, SketchUp adalah satu-satunya software yang dipakai untuk membuat bangunanbangunan 3-Dimensi yang dapat di lihat di Google Earth, (Harrynov, 2009). Berikut merupakan tampilan dari Sketchup:
Gambar 2.7 Tampilan Awal Sketchup
27
2.11.5.1
Teknik Membuat Model 3 Dimensi dengan Sketchup Berikut merupakan teknik bagaimana membuat model
bangunan 3 dimensi dengan sketchup dan menampilkannya ke dalam Google Earth : 1.
Pertama yang perlu dilakukan adalah menentukan lokasi, dengan cara pilih menu Add Location
, Add Location
berfungsi untuk mengambil layer melalui google earth.
Gambar 2.8 Add Location Seperti pada gambar di atas, mencari lokasi pada menu search dan crop citra google earth dengan menu select region. Maka hasilnya akan seperti gambar berikut.
28
Gambar 2.9 Layer Dari Citra Google Earth Setelah mendapatkan layer google earth, maka selanjutnya adalah memilih gedung mana yang akan dibangun ke dalam bentuk 3 dimensi. 2.
Jika sudah mendapat gedung yang diinginkan, selanjutnya adalah melakukan digitasi dengan tools Rectangles.
Gambar 2.10 Rectangles Kemudian gunakan tools Push/Pull untuk menampilkan efek 3 dimensi, dan hasilnya seperti gambar berikut.
29
Gambar 2.11 Push/Pull 3.
Kemudian menampilkan efek tembok dengan data foto yang telah di dapat sebelumnya. Teknik yang digunakan seperti melakukan overlay. Pilih file/import.. lalu pilih foto yang akan di olah, kemudian pilih Use as texture, dan tempel bagian yang diinginkan.
Gambar 2.12 Import Foto Sesuaikan dengan bentuk polygon tembok pada model, dengan cara klik kanan pada texture, pilih Texture/Position.
30
Gambar 2,13 Position Atur posisi pin yang berwarna kuning.
Gambar 2.14 Atur Posisi Pin
Gambar 2.15 Penyesuaian Bentuk Foto
31
Gambar 2.16 Hasil Penambahan Texture Foto
Gambar 2.17 Hasil Akhir Model FST 4. Jika sudah mendapat hasil yang diinginkan, selanjutnya export model menjadi KMZ file, tujuannya adalah agar dapat di lihat di dalam Google Earth. Dengan cara pilih file/export/3D Model. 5. Upload model tersebut ke 3dwarehouse. 2.11.6 Adobe Photoshop Adobe Photoshop, atau biasa disebut Photoshop, adalah perangkat lunak editor citra buatan Adobe Systems yang dikhususkan untuk pengeditan foto/gambar dan pembuatan efek. Perangkat lunak ini banyak digunakan oleh fotografer digital dan
32
perusahaan iklan sehingga dianggap sebagai pemimpin pasar (market leader) untuk perangkat lunak pengolah gambar/foto, dan, bersama Adobe Acrobat, dianggap sebagai produk terbaik yang pernah diproduksi oleh Adobe Systems. Versi kedelapan aplikasi ini disebut dengan nama Photoshop CS (Creative Suite), versi sembilan disebut Adobe Photoshop CS2, versi sepuluh disebut Adobe Photoshop CS3 , versi kesebelas adalah Adobe Photoshop CS4 , versi keduabelas adalah Adobe Photoshop CS5 , dan versi yang terakhir (ketigabelas) adalah Adobe Photoshop CS6. 2.11.7 Google Earth Google Earth merupakan sebuah program globe virtual yang sebenarnya disebut Earth Viewer dan dibuat oleh Keyhole, Inc. Program ini memetakan bumi dari superimposisi gambar yang dikumpulkan dari pemetaan satelit, fotografi udara dan globe GIS 3D. Tersedia dalam tiga lisensi berbeda: Google Earth, sebuah versi gratis dengan kemampuan terbatas; Google Earth Plus ($20), yang memiliki fitur tambahan; dan Google Earth Pro ($400 per tahun), yang digunakan untuk penggunaan komersial. Google Earth adalah sebuah layanan Geographical Information System yang menyediakan informasi mengenai peta dan seluk-beluknya. Salah satu keunggulan google earth adalah peta ini mencakup ke seluruh dunia (Zaki – 2010:1). Awalnya, Google Earth dibuat oleh sebuah perusahaan yang disebut
33
Keyhole.Inc. dan dinamai pertama kali dengan Earth Viewer 3D. Fiturnya saat itu masih sangat sederhana dan kemudian diakuisisi oleh Google pada tahun 2004 sejak itulah fiturnya mulai dilengkapi dan dipercanggih. Gambar peta dunia yang diperoleh oleh Google Earth diambil dari beberapa gabungan sumber seperti fotografi udara, gambar dari satelit dan dari olahan GIS (Geographical Information System). Google Earth juga disebut sebagai peta raksasa yang memudahkan bagi pengguna yang memakai program ini untuk melihat lokasi-lokasi diseluruh penjuru dunia. Google Earth ini tidak hanya sebagai peta saja tetapi juga memberikan informasi sedetil-detilnya mengenai bangunan-bangunan yang ada di dunia, dengan tampilan 3 Dimensinya. Berikut adalah gambar bangunan model 3D yang diakses melalui Google Earth :
Gambar 2.18 Tampilan Model 3 Dimensi Dalam Google Earth
34
2.11.8 3D Warehouse 3D Warehouse merupakan sebuah pustaka atau gudang model antar pengguna SketchUp, di mana dapat digunakan untuk berbagi model dengan pengguna lain. Model-model tersebut dapat diunduh untuk kemudian digunakan di Google SketchUp oleh pengguna lain atau digunakan di Google Earth.(Chandra, 2013)
BAB III METODOLOGI PENELITIAN 3.1 Tempat dan Waktu Penelitian Tempat Penelitian
: Biro Administrasi Umum dan Kepegawaian UIN Syarif Hidayatullah Jakarta, Jl. Ir. H. Juanda No.95, Ciputat, Tangerang Selatan
Waktu Penelitian
: Oktober 2014 – Januari 2015
3.2 Lokasi Penelitian Lokasi penelitian yang dipilih adalah UIN Syarif Hidayatullah Jakarta kampus 1 dan 2 yang beralamat di Jl. Ir. H. Juanda No. 95, Ciputat. Berikut adalah foto citra kampus 1 pada gambar 3.1 dan kampus 2 pada gambar 3.2 yang diambil dari Google Earth:
Gambar 3.1 Kampus satu UIN Jakarta (Google Earth) 35
36
Gambar 3.2 Kampus dua UIN Jakarta (Google Earth) 3.2 Bahan dan Perangkat Pendukung 3.2.1 Bahan Bahan
yang
dikumpulkan
untuk
digunakan
dalam
pembuatan aplikasi sistem informasi peta kampus berbasis web dengan 3D modeling adalah berupa foto – foto bangunan, data tinggi dan luas gedung, dan informasi terkait kampus. 3.2.2 Perangkat Pendukung Perangkat yang dipergunakan dalam penelitian ini adalah: 1. Perangkat Keras a. Intel(R) Core (TM) i3-2310M [email protected] b. Hardisk 750GB c. Memory 4GB d. VGA 2GB
37
e. Perangkat keras lainnya (Keyboard, Mouse dan lain-lain) 2. Perangkat Lunak a. Windows 7 Home Premium b. Microsoft Word 2010 c. Sketchup d. Google Earth e. Adobe Dreamweaver CS5 f. Notepad++ g. Adobe Photoshop h. XAMPP i. PHP MySQL j. Star UML k. Browser internet: Google Chrome 3.3 Metode Penelitian 3.3.1 Metode Pengumpulan Data Didalam penelitian ini penulis mengunakan 4 (empat) metode pengumpulan data. Metode yang dipilih berhubungan erat dengan prosedur yang ada, alat, dan juga desain penelitian yang akan digunakan. Dengan demikian untuk memperoleh data - data dan informasi sebagai informasi sebagai bahan penulisan tugas akhir. Adapun metode-metode yang digunakan adalah sebagai berikut :
38
A. Observasi Dalam melakukan penelitian ini, penulis melaksanakan pengamatan langsung ke lapangan untuk mengumpulkan data dan informasi. Pengamatan ini dilakukan untuk mengambil foto – foto gedung fakultas dari berbagai sudut yang nantinya akan diolah untuk pembuatan model 3D, sekaligus mencari informasi fasilitas apa saja yang ada dalam gedung tersebut. Observasi ini dilakukan di kampus 1 dan kampus 2 UIN Syarif Hidayatullah Jakarta. B. Studi Literatur dan Kepustakaan Dalam
tahapan
ini,
penulis
mencari,
menemukan,
mengetahui dan mempelajari dari studi literatur atau buku-buku pedoman yang berkaitan dengan tema penulisan tugas akhir ini. Berikut literatur sejenis pendukung skripsi ini: Tabel 3.1 Tabel Studi Literatur Sejenis No.
Peneliti
Judul Penelitian
Kelebihan
Kekurangan
Implementasi Pemodelan 3D
Sudah
Hanya dapat
Di Kawasan Pelabuhan Ulee
menggunakan
ditampilkan di
Eldy
Lheu
Google Earth
aplikasi
Murtaza
Dengan Menggunakan
sebagai map
Google Earth,
Sketchup 2013 Dan Google
dasar untuk
tidak berbasis
Earth
tampilannya
web
1
39
Sudah
Tidak
menampilkan
memiliki
map interaktif
bentuk 3D
dengan google
dari map
map
tersebut
Sudah
Belum
I.G.N Willy,
memberikan
ditampilkan
D.G
perbandingan
dalam web
Rancang Bangun Sistem Informasi Geografis Wisata 2
Dewanto RA Kuliner berbasis Web dengan Google API
3
Pratomo,
Pembuatan Peta 3 Dimensi
antara model
A.B.
Kampus Its
3D dengan
Cahyono
bangunan aslinya
Sistem Informasi Fasilitas Komang
Kampus Undiksha Melalui
Setemen
Pengembangan Peta
4
Interaktif Berbasis Web
Sudah
Tampilan dari
memberikan
peta masih
tampilan yang
terlalu datar
interaktif
dan kurang
kedapa user
menarik
dan sudah berbasis web
Dari perbandingan diatas, maka penulis mencoba membuat hal yang sama, hanya saja dengan tampilan yang lebih interaktif dengan menggunakan sarana website dan memberikan informasi
40
yang lebih up to date. Dengan memanfaatkan Google Earth untuk memberikan tampilan yang lebih menarik kepada user. C. Kuesioner Kegiatan menyebarkan kuesioner yang dilakukan oleh penulis adalah berkaitan dengan informasi apa saja yang dibutuhkan untuk sistem dan minat responden terhadap visual 3 dimensi. Penulis menyebarkan kuesioner kepada mahasiswa UIN Jakarta. Untuk penghitungan hasil dari penyebaran kuesioner ini menggunakan metode kualitatif. Untuk
pembuatan
pertanyaan
menggunakan
metode
tertutup, yaitu dengan menyediakan alternatif jawaban kepada responden dalam menjawab pertanyaan. Dalam penyediaan alternatif jawaban, penulis menggunakan metode skala Likert, yaitu bentuk jawaban pertanyaan dengan memberikan 5 pilihan. D. Wawancara Dalam tahap ini penulis melakukan wawancara untuk memperoleh
informasi
dengan
cara
mengajukan
beberapa
pertanyaan secara lisan untuk dijawab secara lisan pula oleh responden. Wawancara ini dilakukan kepada Bapak Jalul sebagai staff bagian umum dan Bapak Ali sebagai kepala biro umum administrasi dan kepegawaian rektorat UIN Jakarta. Teknik wawancara yang digunakan adalah dengan teknik tidak
terstruktur.
Wawancara
tidak
terstruktur
merupakan
41
wawancara yang bebas dan peneliti tidak menggunakan pedoman wawancara yang telah tersusun secara sistematis dan lengkap untuk pengumpulan datanya. Pedoman wawancara yang digunakan hanya berupa garis-garis besar permasalahan yang akan ditanyakan. Hal ini maksudkan agar memberikan suasana yang lebih nyaman antara penanya dan responden. Wawancara
ini
juga
dilakukan
terhadap
beberapa
mahasiswa UIN Jakarta. Wawancara ini menghasilkan fitur – fitur dan informasi apa saja yang diperlukan untuk ditampilkan kedalam sistem. 3.3.2 Metode Pemodelan 3D Adapun tahap-tahap dalam pembuatan pemodelan 3 dimensi ini di gambarkan dengan perancangan dari diagram berikut:
Pengumpulan data
Pemodelan 3D dengan Sketchup
Export 3D Google Earth
Simpan menjadi KML
Gambar 3.3 Diagram Alir Tahap Pemodelan 3D
42
3.3.3 Metode Pengembangan Sistem Rapid Application Development (RAD) merupakan salah satu metode prototyping Tahapan metode pengembangan sistem dengan rapid application development yang dilakukan adalah sebagai berikut. 3.3.3.1 Proses Perencanaan Syarat Dalam fase ini
penulis
melakukan beberapa kegiatan
diantaranya: 1. Mempelajari bagaimana membangun objek 3D 2. Menganalisa kebutuhan sistem 3. Data dan informasi mengenai gedung – gedung yang ada di UIN Jakarta 3.3.3.2 Workshop Desain Dalam proses ini penulis melakukan beberapa kegiatan diantaranya : 1. Perancangan Sistem 1.1 Merancang Spesifikasi Actor dan Usecase Disini penulis mengidentifikasikan actor dan use case yang akan di buat pada use case diagram. 1.2 Merancang Use Case Diagram Ditahap ini penulis mencoba untuk menangkap requirements aplikasi. 1.3 Merancang Narasi Use Case
43
Disini penulis mendeskripsikan use case yang telah dibuat pada use case diagram. 1.4 Merancang Activity Diagram Penulis membuat sebuah alur kerja dari satu aktivitas ke aktivitas lainnya. Tahap ini berguna ketika kita ingin
menjelaskan bagaimana perilaku dalam berbagai
use case berinteraksi. 1.5 Merancang Sequence Diagram Penulis menjelaskan interaksi objek yang disusun dalam suatu urutan waktu 2. Perancangan Database 2.1 Merancang Class diagram Penulis memvisualisasikan struktur kelas-kelas dari sistem dan memperlihatkan hubungan antar kelas dan penjelasan detail tiap-tiap kelas didalam model desain (dalam logical view) dari sistem. 2.2 Merancang Struktur data Penulis merancang data dengan memperlihatkan detail isi database pada sistem berupa record data. 3.3.3.3 Implementation 3.1 Implementation Workflow (Pengkodean)
44
Dalam
tahap
ini
sistem
dibangun
dengan
menggunakan bahasa pemrograman PHP dan basis data MySql. 3.2 Testing Application (Uji coba aplikasi) Dalam tahap ini penulis melakukan pengujian sistem dengan metode blackbox, dengan melakukan input data pada sistem dan melihat apakah outputnya sesuai dengan perancangan sistem yang dibangun. 3.4 Kerangka Penelitian Penulisan pengembangan sistem informasi peta kampus berbasis web dengan model 3 dimensi ini di susun melalui beberapa tahapan yang digambarkan pada gambar 3.4 berikut:
45
Mulai Studi Pustaka
Kuesioner
Metode Pengumpulan Data
Fitur – fitur Sistem Wawancara Foto Gedung Observasi Informasi Gedung Studi Literatur Sejenis
Requirement Planning
Tujuan Perancangan Sistem
Kebutuhan Sistem
Sistem Berjalan
Identifikasi Masalah
Metode RAD
Analisis Masalah
Sistem Usulan
Usecase Diagram dan Narasi Usecase
Perancangan Proses
Activity Diagram
Workshop Design Class Diagram Perancangan Database Sequence Diagram Perancangan User Interface
Implementation
Persiapan Sistem
Logical Record Structure
Coding
PHP
Javascript Pengujuan Sistem HTML Kesimpulan dan Saran
Black box testing AJAX
Selesai
Gambar 3.4 Kerangka Penelitian
BAB IV PEMBAHASAN Pada bab ini akan dijelaskan tahapan pengembangan sistem yang digunakan dalam penulisan skripsi. Dalam penelitian ini, menggunakan metode pengembangan sistem Rapid Application Development (RAD). 4.1 Perencanaan Kebutuhan Fase ini adalah fase dimana analyst sistem bertemu dengan Pengunjung untuk sama-sama mengidentifikasi tujuan, syarat-syarat dari kebutuhan sistem yang ditimbulkan atas tujuan sistem yang dirumuskan, serta mengidentifikasi masalah yang menjadi latar belakang dalam perancangan sistem. 4.1.1 Tujuan Pengembangan Sistem Berdasarkan permasalahan yang dikemukakan di atas, maka dapat dirumuskan tujuan dari pengembangan sistem adalah sebagai berikut: 1. Kemampuan sistem memberikan informasi mengenai fasilitas dan lokasi gedung – gedung di UIN Jakarta secara up to date. 2. Kemampuan sistem dalam menampilkan informasi gedung – gedung tersebut ke dalam bentuk tampilan
web dengan
menampilkan model 3 dimensi yang interaktif. 3. Kemampuan sistem dalam memvisualisasikan model 3D dengan tampilan yang menarik.
46
47
4.1.2 Kebutuhan Sistem Pada tahap ini, pengenalan terhadap instansi tempat peneliti melakukan riset sangat diperlukan. Dalam hal ini adalah gambaran dari kampus UIN Jakarta sebagai tempat melakukan riset, dimulai dengan mengetahui bagaimana profil UIN Jakarta, dilanjutkan dengan mengidentifikasi syarat-syarat dari kebutuhan sistem yang ditimbulkan atas tujuan sistem yang telah dirumuskan. 4.1.2.1 Sejarah Singkat UIN Sejalan dengan perkembangan STI yang semakin besar, pada 22 Maret 1948 nama STI diubah menjadi Universitas Islam Indonesia (UII) dengan penambahan fakultas-fakultas baru. Sampai dengan 1948, UII memiliki empat fakultas, yaitu (1) Fakultas Agama, (2) Fakultas Hukum,
(3)
Fakultas
Ekonomi,
dan
(4)
Fakultas
Pendidikan. Kebutuhan akan tenaga fungsional di Departemen Agama
menjadi
latar
belakang
penting
berdirinya
perguruan tinggi agama Islam. Untuk memenuhi kebutuhan tersebut,
Fakultas
Agama
UII
dipisahkan
dan
ditransformasikan menjadi Perguruan Tinggi Agama Islam Negeri (PTAIN) dan—sesuai dengan namanya—bersastus negeri.
48
Periode ADIA (1957-1960) ADIA didirikan pada 1 Juni 1957. Dengan pertimbangan UIN Syarif Hidayatullah Jakarta merupakan kelanjutan dari ADIA, hari jadi ADIA 1 Juni 1957 ditetapkan sebagai hari jadi atau Dies Natalis UIN Syarif Hidayatullah Jakarta. Sama seperti perguruan tinggi pada umumnya, masa studi di ADIA adalah 5 tahun yang terdiri dari tingkat semi akademi 3 tahun dan tingkat akademi 2 tahun. ADIA
memiliki
tiga
jurusan,
yaitu
Jurusan
Pendidikan Agama, Jurusan Bahasa Arab, dan Jurusan Da’wah wal Irsyad yang juga dikenal dengan Jurusan Khusus Imam Tentara. Komposisi kurikulum ADIA tidak jauh berbeda dengan kurikulum PTAIN dengan beberapa tambahan fungsional.
mata
kuliah
Komposisi
untuk
kepentingan
lengkapnya
adalah
tenaga Bahasa
Indonesia, Bahasa Arab, Bahasa Inggris, Bahasa Perancis, Bahasa Ibrani, Ilmu Keguruan, Ilmu Kebudayaan Umum dan Indonesia, Sejarah Kebudayaan Islam, Tafsir, Hadits, Musthalah Hadits, Fiqh, Ushul Fiqh, Tarikh Tasyri’ Islam, Ilmu Kalam/Mantiq, Ilmu Akhlaq/Tasawuf, Ilmu Fisafat, Ilmu
Perbandingan
Masyarakat.
Agama,
dan
Ilmu
Pendidikan
49
Periode Fakultas IAIN al-Jami’ah Yogyakarta (1960-1963) Meningkatnya jumlah mahasiswa dan meluasnya area of studies menuntut perluasan dan penambahan, baik dari segi kapasitas kelembagaan, fakultas dan jurusan maupun
komposisi
mata
kuliah.
Untuk
memenuhi
kebutuhan tersebut, ADIA di Jakarta dan PTAIN di Yogyakarta
diintegrasikan
menjadi
satu
lembaga
pendidikan tinggi agama Islam negeri. Integrasi terlaksana dengan keluarnya Peraturan Presiden Republik Indonesia No. 11 Tahun 1960 tertanggal 24 Agustus 1960 bertepatan dengan 2 Rabi’ul Awal 1380 Hijriyah. Peraturan Presiden RI tersebut sekaligus mengubah dan menetapkan perubahan nama dari PTAIN menjadi Institut Agama Islam Negeri (IAIN) al-Jami’ah al-Islamiyah al-Hukumiyah. IAIN With Wider Mandate Sebagai upaya untuk mengintegrasikan ilmu umum dan ilmu agama, lembaga ini mulai mengembangkan diri dengan konsep IAIN dengan mandat yang lebih luas (IAIN with Wider Mandate) menuju terbentuknya Universitas Islam Negeri Syarif Hidayatullah Jakarta.
Langkah
konversi ini mulai dengan dibukanya jurusan Psikologi dan Pendidikan Matematika pada Fakultas Tarbiyah, serta
50
Jurusan Ekonomi dan Perbankan Islam pada Fakultas Syari’ah pada tahun akademik 1998/1999. Untuk lebih memantapkan langkah konversi ini, pada 2000 dibuka Program Studi Agribisnis dan Teknik Informatika dan Program Studi Manajemen dan Akuntansi. Pada 2001 diresmikan Fakultas Psikologi dan Dirasat Islamiyah. Langkah perubahan bentuk IAIN menjadi UIN mendapat
rekomendasi
pemerintah
dengan
ditandatanganinya Surat Keputusan Bersama (SKB) antara Menteri Pendidikan Nasional RI Nomor 4/U/KB/2001 dan Menteri Agama RI Nomor 500/2001 tanggal 21 Nopember 2001.
Selanjutnya
melalui
suratnya
Nomor
088796/MPN/2001 tanggal 22 Nopember 2001, Direktur Jenderal
Pendidikan
Tinggi
Departemen
Pendidikan
Nasional memberikan rekomendasi dibukanya 12 program studi yang meliputi program studi ilmu sosial dan eksakta, yaitu Teknik Informatika, Sistem Informasi, Akuntansi, Manajemen,
Sosial
Ekonomi
Pertanian/Agribisnis,
Psikologi, Bahasa dan Sastra Inggris, Ilmu Perpustakaan, Matematika, Kimia, Fisika dan Biologi. Seiring dengan itu, rancangan Keputusan Presiden tentang Perubahan Bentuk IAIN menjadi UIN Syarif Hidayatullah Jakarta juga telah mendapat
rekomendasi
dan
pertimbangan
Menteri
51
Pendayagunaan Aparatur Negara RI dan Dirjen Anggaran Departemen Keuangan RI Nomor 02/M-PAN/1/2002 tanggal 9 Januari 2002 dan Nomor S-490/MK-2/2002 tanggal 14 Februari 2002. Rekomendasi ini merupakan dasar bagi keluarnya Keputusan Presiden Nomor 031 tanggal 20 Mei Tahun 2002 tentang Perubahan IAIN Syarif Hidayatullah Jakarta menjadi UIN Syarif Hidayatullah Jakarta. Periode UIN Syarif Hidayatullah Jakarta (Mulai 20 Mei 2002) Dengan keluarnya Keputusan Presiden Republik Indonesia Nomor 031 tanggal 20 Mei 2002 IAIN Syarif Hidayatullah Jakarta resmi berubah menjadi UIN Syarif Hidayatullah Jakarta. Peresmiannya dilakukan pada 8 Juni 2002. Satu langkah lagi UIN Syarif Hidayatullah Jakarta menambah fakultas yaitu Fakultas Kedokteran dan Ilmu Kesehatan (Program Studi Kesehatan Masyarakat) sesuai surat keputusan Menteri Pendidikan Nasional Nomor 1338/ D/T/2004 Tahun 2004 tanggal 12 April 2004 tentang ijin Penyelenggaraan Program Studi Kesehatan Masyarakat (S1) pada Universitas Islam Negeri dan Keputusan Direktur Jenderal
Kelembagaan
Agama
Islam
tentang
izin
penyelenggaraan Program Studi Kesehatan Masyarakat
52
Program Sarjana (S1) pada Universitas Islam Negeri (UIN) Syarif Hidayatullah Jakarta Nomor Dj.II/37/2004 tanggal 19 Mei 2004. Sebagai bentuk reintegrasi ilmu, UIN Syarif Hidayatullah Jakarta sejak tahun akademik 2002/2003 menetapkan nama-nama fakultas sebagai berikut: 1. Fakultas Ilmu Tarbiyah dan Keguruan 2. Fakultas Adab dan Humaniora 3. Fakultas Ushuluddin 4. Fakultas Syari’ah dan Hukum 5. Fakultas Ilmu Dakwah dan Ilmu Komunikasi 6. Fakultas Dirasat Islamiyah 7. Fakultas Psikologi 8. Fakultas Ekonomi dan Bisnis 9. Fakultas Sains dan Teknologi 10. Fakultas Kedokteran dan Ilmu Kesehatan 11. Fakultas Ilmu Sosial dan Ilmu Politik 12. Sekolah Pascasarjana Hingga tahun 2008 UIN Syarif Hidayatullah Jakarta terus berupaya menyiapkan peserta didiknya menjadi anggota masyarakat yang memiliki kemampuan akademik dan profesional yang dapat menerapkan, mengembangkan
53
dan atau menciptakan ilmu pengetahuan keagamaan dan ilmu ilmu terkait lainnya dalam arti yang seluas-luasnya. 4.1.2.2 Struktur Organisasi
Rektor
Pembantu Rektor Bidang Administrasi Umum
Kepala Biro Administrasi Umum dan Kepegawaian
Bagian Organisasi, Kepegawaian dan Peraturan Perundang - undangan
Bagian Umum
Gambar 4.1 Struktur Organisasi 1. Rektor dan Pembantu Rektor Rektor dan Pembantu Rektor adalah unsur pimpinan UIN Syarif Hidayatullah Jakarta. 2. Kepala Biro Admistrasi Umum dan Kepegawaian Biro
Administrasi
Umum
dan
Kepegawaian
mempunyai tugas memberikan layanan administrasi di bidang umum dan kepegawaian di lingkungan UIN Syarif Hidayatullah Jakarta. Biro
tatalaksana 4.1.2.3 Identifikasi kebutuhan sistem Mengidentifikasi
kebutuhan
sistem
merupakan
langkah pertama yang dilakukan dalam tahap perencanaan sistem. Kebutuhan adalah sebuah kondisi yang menuntut suatu hal untuk dipenuhi. Untuk itu dibuatlah suatu pengembangan sistem yang dapat memenuhi kebutuhan masyarakat. Dari hasil penelitian diperoleh kebutuhan yang diharapkan, diantaranya adalah: 1. Untuk masyarakat kebutuhan akan suatu sistem yang memberikan informasi terkini mengenai kampus terkait fasilitas, lokasi gedung – gedung kampus, dan informasi mengenai gedung – gedung kampus. 2. Untuk UIN Jakarta dapat memberikan informasi yang up to date terhadap masyarakat.
55
4.1.3
Sistem Berjalan Sistem berjalan pada UIN Jakarta saat memberikan informasi mengenai letak kampus dengan sistem web yang menampilkan denah atau master plan dalam bentuk PDF. Jadi masyarakat umum hanya bisa melihat letak atau lokasi gedung yang ingin dituju.
Master Plan Kampus 1. Master Plan dikelola oleh staff umum
2. Master Plan di ubah ke dalam bentuk PDF
Staff Umum 3. Di upload ke website
4. Melihat Peta Kampus
5. Memberikan Informasi
Pengunjung
Website
Gambar 4.2 Sistem Berjalan Kelemahan : 1. Peta yang dipublikasikan di dalam web masih dalam bentuk denah 2. Hanya dapat memberikan informasi letak – letak gedung yang ada di kampus 3. Kurang interaktif terhadap Pengunjung
56
Kelebihan : Sudah ditampilkan kedalam website, sehingga masyarakat dapat melihat peta melalui internet 4.1.4
Identifikasi masalah 4.1.4.1 Analisis Masalah Identifikasi masalah dilakukan pada sistem yang berjalan selama ini. Adapun hasil dari identifikasi adalah sebagai berikut: 1. Informasi yang ditampilkan hanya terbatas pada lokasi gedung, sehingga masyarakat hanya mengetahui letak gedung saja 2. Sistem yang ada masih menampilkan master plan kampus dalam bentuk PDF, sehingga kurang interaktif bagi masyarakat 3. Informasi kegiatan yang terkait untuk umum masih terbatas, karena informasi hanya tercapai pada internal saja
4.1.5
Sistem Usulan Solusi yang ditawarkan untuk sistem peta kampus ini adalah dengan mengembangankan peta kampus menjadi lebih interaktif dengan memanfaatkan Google Maps dan Google Earth. Berikut
adalah
fungsi
–
fungsi
yang
diusulkan
pengembangan sistem informasi peta kampus berbasis web:
dalam
57
1. Memberikan informasi yang up to date dari kegiatan yang ada di dalam kampus 2. Dapat memvisualisasikan bentuk dan rupa gedung dengan menggunakan model 3 dimensi 3. Adanya fungsi editing yang memungkinkan admin dalam mengelola dan memanipulasi peta 4. Menampilkan peta dengan platform google maps dan google earth yang interaktif dan menarik yang mudah digunakan
PR Umum 20 14 1312
Admin
22 23
1 2 3 4 5 6 7
8
Pengembang
21
15 16 17
9 19 10
Kabir Umum
18 11
Disimpan
Masyarakat
Kabag umum Database
Gambar 4.3 Sistem Usulan Keterangan : 1. Admin melakukan login 2. Admin mengelola data parkir 3. Admin mengelola data fakultas
58
4. Admin mengelola data gedung 5. Admin mengelola data download 6. Admin mengelola data 3 dimensi 7. Admin mengelola halaman web 8. Kabag umum mengelola data parkir 9. Kabag umum mengelola data fakultas 10. Kabag umum mengelola data gedung 11. Kabag umum mengelola data download 12. PR umum memvalidasi data 13. PR umum melihat peta 14. PR umum melihat model 3 dimensi 15. Kabir umum memvalidasi data 16. Kabir umum melihat peta 17. Kabir umum melihat model 3 dimensi 18. Masyarakat melihat peta 19. Masyarakat melihat model 3 dimensi 20. Pengembang melihat peta 21. Pengembang melihat model 3 dimensi 22. Pengembang melakukan registrasi 23. Pengembang mendownload data
59
4.2 Workshop Design (Proses Desain) Merupakan
tahap
lanjutan
dari
tahap
perencanaan
kebutuhan
(Requirements Planning), dimana dilakukan pengidentifikasian dari solusi alternatif yang ada dengan pemilihan solusi terbaik. Setelah itu, dilanjutkan dengan melakukan pemodelan proses bisnis dan desain pemrograman untuk data-data yang telah diperoleh yang nantinya akan dimodelkan dalam arsitektur informasi. Adapun tahapan yang dilakukan dalam proses desain ini diantaranya sebagai berikut: 4.2.1 Membuat Model Desain dengan Pemodelan Object Oriented 4.2.1.1 Use Case Diagram dan Narasi Use Case Use Case mendeskripsikan interaksi antara Aktor aplikasi Pengembangan Sistem Informasi Peta Kampus Berbasis web. Seperti dijelaskan pada Tabel 4.1 berikut: Tabel 4.1 Identifikasi Aktor dan Use Case No
Actor
Description Aktor yang bisa mengakses keseluruhan
1
Admin
yang ada di dalam sistem dan mengelola peta kampus dan informasi. Aktor
2
Pengembang
yang
membutuhkan
informasi
seputar kampus dan mendownload data – data yang diperlukan
60
Aktor yang dapat mengelola data gedung 3
Kabag Umum
dan informasi kegiatan yang diadakan oleh kampus. PR Umum adalah Pembantu Rektor
4
PR Umum
bagian umum yang dapat mengakses menu validasi data
Kepala Biro umum adalah User yang 5
Kabir Umum dapat mengakses menu validasi data.
Masyarakat merupakan user yang dapat 6
Masyarakat melihat informasi yang ada dalam sistem
Selanjutnya Tabel 4.2 dibawah ini akan memperlihatkan interaksi antar Aktor dengan sistem. Tabel 4.2 Daftar Diagram Use Case No
Use Case
Description
1
Login
Proses kegiatan
yang
Actor menggambarkan Admin,
PR
memasukkan umum, Kabir
Pengunjungname dan password umum, Kabag untuk dapat mengakses sistem.
umum, pengembang
61
2
Mengelola
Proses
yang
menggambarkan Admin, Kabag
data gedung
kegiatan mengelola data informasi umum mengenai fasilitas dari tiap gedung yang ada di kampus.
3
Mengelola
Proses
yang
data fakultas
kegiatan mengelola data informasi umum mengenai
menggambarkan Admin, Kabag
fasilitas
dari
tiap
fakultas yang ada di kampus. 4
Mengelola
Proses
yang
menggambarkan Admin, Kabag
data Parkir
kegiatan mengelola data informasi umum mengenai lokasi parkir di kampus
5
Mengelola
Proses
yang
data
kegiatan
mengelola
download
dapat
di
menggambarkan Admin, Kabag data
download
yang umum oleh
pengembang 6
7
Mengelola
Proses
yang
User
kegiatan mengelola data user
Validasi
Proses
yang
menggambarkan Admin
menggambarkan PR
umum,
kegiatan memvalidasi data dan Kabir umum informasi gedung, fakultas, dan parker 8
Lihat Peta
Proses
yang
menggambarkan PR
umum,
62
kegiatan
melihat
peta
kampus Kabir umum,
untuk mendapatkan informasi
Masyarakat, Pengembang
9
Mengelola
Proses
yang
menggambarkan Admin,
Berita
kegiatan mengelola kegiatan yang akan ditampilkan di dalam sistem
10
Lihat Berita
Proses
yang
menggambarkan Pengembang,
kegiatan melihat berita kegiatan Masyarakat yang diadakan oleh kampus 11
Lihat
3D Proses
yang
menggambarkan PR
umum,
kegiatan melihat model 3D dari Kabir umum,
Model
gedung – gedung kampus UIN Pengembang, Jakarta 12
Masyarakat
Mengelola
Proses
yang
menggambarkan Admin
Link Terkait
kegiatan mengelola website apa saja yang terkait di dalam sistem
13
Lihat
Link Proses
Terkait
yang
menggambarkan Pengembang,
kegiatan melihat link – link yang Masyarakat terkait terhadap sistem
14
Mengelola
Proses
yang
menggambarkan Admin
model 3D
kegiatan mengelola Link Model 3D yang akan dimasukan ke dalam
63
sistem. 15
Lihat tentang Proses
yang
menggambarkan Pengembang,
kegiatan melihat profil tentang Masyarakat
kami
kampus 16
Lihat
data Proses
download
yang
menggambarkan Pengembang
kegiatan melihat data yang dapat di download oleh pengembang
17
Registrasi
Proses
yang
menggambarkan Pengembang
kegiatan user melakukan registrasi agar dapat mengambil data 18
Download
Proses
yang
menggambarkan Pengembang
kegiatan user mendownload data yang diperlukan 19
Logout
Proses
yang
menggambarkan Admin,
kegiatan keluar dari sistem
PR
umum, Kabir umum, Kabag umum, Pengembang
20
Mengelola
Proses
yang
tentang kami
kegiatan mengelola profil tentang UIN Jakarta
menggambarkan Admin
64
System validasi PR Umum
<> Mengelola data parkir
<>
lihat peta
Kabag umum <>
<<extend>> Kabir Umum
mengelola data fakultas
<>
download
lihat model 3D
mengelola data gedung <>
lihat data download <<extend>>
mengelola data download <>
lihat berita registrasi Pengembang
mengelola 3D lihat link terkait
mengelola user
lihat tentang kami
Admin
mengelola berita
Masyarakat login <>
mengelola link terkait
logout mengelola tentang kami
Gambar 4.4 Use Case Diagram Keterangan Gambar: Dalam Use Case diagram, Aktor yang dapat menggunakan sistem ada 6 yaitu Admin, PR Umum, Kabir Umum, Kabag Umum, Pengembang, dan Masyarakat Aktor pertama adalah Admin yang setelah log in dapat mengakses semua yang ada dalam sistem. Aktor kedua adalah Kabag umum yang mengelola data parkir, fakultas, gedung, dan data download. Aktor ketiga adalah PR umum yang memvalidasi data. Aktor keempat adalah Kabir umum yang memvalidasi data.
65
Aktor kelima adalah pengembang merupakan pihak yang berkepentingan untuk mendownload data. Aktor keenam adalah masyarakat yang dapat melihat data yang diperlukan.
Use Case yang menggambarkan kegiatan aktor memasukkan username dan password untuk dapat mengakses sistem
Pre-condition
Pengunjung name dan Password
Typical course Actor action of event
1. Login
System response 2. Masuk Halaman Login
3. Masukan username dan Password 4. Klik ―Login‖
5. Verifikasi 6. Menampilkan
Pesan
66
Selamat datang 7. Menampilkan sesuai
role
halaman pengguna
sistem 1. Jika tidak sesuai dengan data Pengunjung maka sistem
Alternate
akan menampilkan pesan kesalahan
course
2. menampilkan kembali menu login pada halaman utama. conclusion
Aktor masuk kedalam sistem
Post condition
Menu utama
Tabel 4.4 Narasi Use Case Mengelola data gedung Use Case name
Mengelola data gedung
Use Case ID
2
Actor
Admin, Kabag Umum
Description
Use Case yang menggambarkan kegiatan mengelola data gedung – gedung yang di kampus UIN Jakarta
Pre-condition
Input data gedung Mengelola data gedung
Typical course Actor action
System response
67
1. Klik
of event
―Update
Data‖ 3. Update
2. Menampilkan data yang akan di update
data
gedung 4. Klik ―Simpan‖
5. Verifikasi 6. Data tersimpan ke database
Alternate
1 Hapus data, jika Pengunjung ingin menghapus data
course
4 klik ―Delete‖ 6 Data terhapus
conclusion
Data gedung berhasil di update
Post condition
-
Tabel 4.5 Narasi Use Case Mengelola data fakultas Use Case name
Mengelola data fakultas
Use Case ID
3
Actor
Admin dan Kabag Umum
Description
Use Case yang menggambarkan kegiatan mengelola data fakultas yang di kampus UIN Jakarta
Pre-condition
68
Kelola data fakultas Typical course Actor action of event
1. Klik
System response ―Update
Data‖ 3. Update
2. Menampilkan data yang akan di update
data
fakultas 4. Klik ―Simpan‖
5. Verifikasi 6. Data tersimpan ke database
Alternate
1 Hapus data, jika user ingin menghapus data
course
4 klik ―Delete‖ 6 Data terhapus
conclusion
Data fakultas berhasil di update
Post condition
-
Tabel 4.6 Narasi Use Case Mengelola parkir Use Case name
Mengelola Parkir
Use Case ID
4
Actor
Admin dan Kabag umum
Description
Use Case yang menggambarkan kegiatan mengelola data
69
lokasi parkir yang di kampus UIN Jakarta Pre-condition Kelola parkir Typical course Actor action of event
1. Klik
System response ―Update
Data‖ 3. Update
2. Menampilkan data yang akan di update
data
parkir 4. Klik ―Simpan‖
5. Verifikasi 6. Data tersimpan ke database
Alternate
1 Hapus data, jika user ingin menghapus data
course
4 klik ―Delete‖ 6 Data terhapus
conclusion
Data parkir berhasil di update
Post condition
-
Tabel 4.7 Narasi Use Case Mengelola Data Download Use Case name
Mengelola Data Download
Use Case ID
5
70
Actor
Admin dan Kabag umum
Description
Use Case yang menggambarkan kegiatan mengelola data – data yang dapat di download oleh pengembang
Pre-condition Mengelola Data Download Typical course Actor action of event
1. Klik
System response ―Update
Data‖ 3. Update
2. Menampilkan data yang akan di update
data
download 4. Klik ―Simpan‖
5. Verifikasi 6. Data tersimpan ke database
Alternate
1 Hapus data, jika user ingin menghapus data
course
4 klik ―Delete‖ 6 Data terhapus
conclusion
Data parkir berhasil di update
Post condition
-
71
Tabel 4.8 Narasi Use Case Mengelola User Use Case name
Mengelola user
Use Case ID
6
Actor
Admin
Description
Use Case yang menggambarkan kegiatan mengelola data user
Pre-condition Kelola data fakultas Typical course Actor action of event
1. Klik
System response ―Update
2. Menampilkan data yang
Data‖
akan di update
3. Update data user 4. Klik ―Simpan‖
5. Verifikasi 6. Data tersimpan ke database
Alternate
1 Hapus data, jika user ingin menghapus data
course
4 klik ―Delete‖ 6 Data terhapus
conclusion
Data fakultas berhasil di update
Post condition
-
72
Tabel 4.9 Narasi Use Case Lihat Peta Use Case name
Lihat Peta
Use Case ID
7
Actor
PR Umum, Kabir Umum, Pengembang, Masyarakat
Description
Use Case yang menggambarkan kegiatan melihat peta kampus
Pre-condition
-
Typical
course Actor action
System response
of event 1. Klik ―Home‖
2. Sistem Menampilkan Peta Kampus
dalam
Google Maps Alternate
-
course conclusion
Peta Kampus UIN Jakarta ditampilkan
Post condition
-
Tabel 4.10 Narasi Use Case Mengelola Berita Use Case name
Mengelola berita
Bentuk
73
Use Case ID
8
Actor
Admin
Description
Use Case yang menggambarkan kegiatan mengelola berita kegiatan yang ada di UIN Jakarta
Pre-condition
-
Typical course Actor action of event
1. Klik
System response ―Kelola
2. Menampilkan List Berita
Berita‖ 3. Update berita 4. Klik ―Simpan‖
5. Verifikasi 6. Data tersimpan ke database
Alternate
1 Hapus data, jika Pengunjung ingin menghapus data
course
4 klik ―Hapus‖ 6 Data terhapus
conclusion
Berita berhasil di update
Post condition
-
74
Tabel 4.11 Narasi Use Case Lihat Berita Use Case name
Lihat Berita
Use Case ID
9
Actor
Pengembang, Masyarakat
Description
Use Case yang menggambarkan kegiatan melihat berita kegiatan kampus
Pre-condition
-
Typical course Actor action of event
1. Klik ―Berita‖
System response 2. Menampilkan List Berita dalam bentuk tabel
Alternate
-
course conclusion
Berita kegiatan kampus ditampilkan
Post condition
-
Tabel 4.12 Narasi Use Case Lihat 3D Model Use Case name
Lihat 3D Model
75
Use Case ID
10
Actor
Admin, Pengunjung, Staff Umum
Description
Use Case yang menggambarkan kegiatan melihat model 3D gedung – gedung kampus UIN Jakarta -
Pre-condition
Actor action 1. Klik ―View 3D‖
System response 2. Menampilkan secara 3D
-
Alternate course conclusion
-
Post condition
-
Tabel 4.13 Narasi Use Case Mengelola Link Terkait Use Case name
Mengelola link terkait
Use Case ID
11
Actor
Admin
gedung
76
Description
Use Case yang menggambarkan kegiatan mengelola link – link yang terkait dalam web
Pre-condition
Actor action 1. Klik
System response ―Update
Link‖
2. Menampilkan
data
link
yang akan di update
3. Update data link 4. Klik ―Simpan‖
5. Verifikasi 6. Data tersimpan ke database
Alternate
1 Hapus data, jika Pengunjung ingin menghapus data
course
4 klik ―Delete‖ 6 Data terhapus
conclusion
Data link berhasil di update
Post condition
Tabel 4.14 Narasi Use Case Lihat Link Terkait
Use Case name
Lihat link terkait
Use Case ID
12
Actor
Pengembang dan Masyarakat
77
Description
Use Case yang menggambarkan kegiatan melihat link terkait dalam web
Pre-condition
-
Typical course Actor action of event
1. Klik
System response ―Link
Terkait‖
Alternate
2. Menampilkan halaman link terkait
-
course conclusion
-
Post condition
-
Tabel 4.15 Narasi Use Case Mengelola Model 3D Use Case name
Mengelola Model 3D
Use Case ID
13
Actor
Admin
Description
Use Case yang menggambarkan kegiatan memasukan link model dari 3dwarehouse
78
Pre-condition
-
Typical course Actor action of event
1. Klik
System response ―Input
Model‖
2. Menampilkan Form Input Link
3. Memasukan Link Model 4. Klik ―Simpan‖
5. Verifikasi 6. Data
tersimpan
database Alternate
1 Hapus data, jika Pengunjung ingin menghapus data
course
4 klik ―Delete‖ 6 Data terhapus
conclusion
Data berhasil dimasukan
Post condition
-
Tabel 4.16 Narasi Use Case Lihat Tentang Kami Use Case name
Lihat Tentang Kami
Use Case ID
14
ke
79
Actor
Pengembang dan Masyarakat
Description
Use Case yang menggambarkan kegiatan melihat profil tentang kampus dalam web
Pre-condition
-
Typical course Actor action of event
1. Klik
System response ―Tentang
Kami‖
2. Menampilkan
halaman
profil kampus
-
Alternate course conclusion
-
Post condition
-
Tabel 4.17 Narasi Use Case Mengelola Tentang Kami Use Case name
Mengelola Tentang Kami
Use Case ID
15
Actor
Admin
Description
Use Case yang menggambarkan kegiatan mengelola profil tentang UIN Jakarta
80
Pre-condition
-
Typical course Actor action of event
1. Klik
System response ―Manage
2. Menampilkan Form
Tentang Kami‖ 3. Edit Data 4. Klik ―Simpan‖
5. Verifikasi 6. Data tersimpan ke database
Alternate
1 Hapus data, jika Pengunjung ingin menghapus data
course
4 klik ―Delete‖ 6 Data terhapus
conclusion
Data berhasil dimasukan
Post condition
Tabel 4.18 Narasi Use Case Validasi
Use Case name
Validasi
Use Case ID
16
Actor
PR umum, Kabir umum
Description
Use Case yang menggambarkan proses validasi data
81
Pre-condition
Login -
Typical course Actor action of event
System response 2. Menampilkan
1. Login
halaman
admin (PR Umum dan Kabir Umum) 3. Memilih submenu
4. Menampilkan data - data
manage data. 5. Klik ―Edit‖ 7. Klik
―Y‖
6. Menampilkan Form Edit pada
8. Update validasi
kolom aktif 7. Pilih ―N‖ jika data tidak di validasi
Alternate course conclusion
Data berhasil dimasukan
Post condition
-
Tabel 4.19 Narasi Use Case Registrasi Use case Name
Registrasi
Use case Id
17
82
Actor
Pengembang
Description
Use Case ini menggambarkan proses registrasi user agar dapat melakukan transaksi data di dalam sistem
Pre condition
-
Trigger
-
Typical course of events
Actor Action 1. Memilih menu ―Lihat
System Response 2. Menampilkan menu Login
data‖ 3. Memilih menu
4. Menampilkan form registrasi
―Registrasi‖ 5. Mengisi form registrasi
6. Menyimpan ke dalam database
7. Klik ―Daftar‖ Alternate courses
4. Pengembang dapat langsung melakukan login, jika sudah melakukan pendaftaran akun sebelumnya
Conclusion
Pengembang melakukan registrasi
Post condition
-
83
Tabel 4.20 Narasi Use Case Download Use case Name
Download
Use case Id
18
Actor
Pengembang
Description
Use Case ini menggambarkan proses untuk melihat data download yang disediakan di website
Pre condition
-
Trigger
-
Typical course of
Action Actor
events
System Response
1. Memilih menu lihat 2. Menampilkan data data
download
2. Terdapat menu download jika ingin mendownload
Alternate courses
data Conclusion
Pengembang mendownload
Post condition
-
Tabel 4.21 Narasi Use Case Lihat Data Download Use Case name
Lihat Data
84
Use Case ID
19
Actor
Pengembang
Description
Use Case yang menggambarkan kegiatan melihat data download
Pre-condition
-
Typical
course Actor action
System response
of event 1. Klik ―Lihat Data‖
2. Sistem Menampilkan data – data download
Alternate
-
course conclusion
Data ditampilkan
Post condition
-
Tabel 4.22 Narasi Use Case Logout Use case Name
Logout
Use case Id
20
85
Actor
Admin, PR umum, Kabir umum, Kabag Umum
Description
Use case ini menggambarkan kegiatan keluar dari system
Pre condition
-
Trigger
-
Typical course of events
Action actor 1. Memilih menu
System response 2. Keluar dari halaman Web
―Logout‖ Alternate courses
-
Conclusion
Aktor telah keluar dari system
Post condition
-
86
4.2.1.2 Activity Diagram Berikut adalah beberapa diagram aktifitas yang terbentuk dari Use Case diagram yang sebelumnya telah di bahas. 1.
Login
Start
Masukan Username dan Password
Melakukan Log-in
Tidak
Data valid?
Ya Masuk Halaman Utama
Finish
Gambar 4.5 Login Activity Diagram Pada activity diagram gambar 4.5, menggambarkan kegiatan Actor yaitu Admin, Staff Umum, dan Staff Fakultas. Pertama yang dilakukan Actor adalah memasukan Username dan password kemudian Actor melakukan login lalu sistem akan memverifikasi data tersebut apakah valid atau tidak, apabila data tersebut valid maka Actor dapat masuk ke halaman utama dan apabila tidak valid maka actor harus mengulang kembali memasukan Username dan password.
87
2.
Mengelola data gedung
Update
Delete
Manipulasi Data Gedung
Input
Mengisi form input data gedung
tidak lengkap Simpan Lengkap
Data Tersimpan
Gambar 4.6 Activity Diagram Mengelola Data Gedung Pada activity diagram gambar 4.6, mengambarkan kegiatan Actor yaitu admin dan kabag umum, pertama yang dilakukan actor adalah melakukan manipulasi data dengan update ataupun delete data gedung yang sudah di input kemudian sistem akan menyimpan data secara otomatis ke dalam database.
88
3. Mengelola Data Fakultas
Update
Delete
Manipulasi Data Fakultas
Input
Mengisi form input data fakultas
tidak lengkap Simpan Lengkap
Data Tersimpan
Gambar 4.7 Activity Diagram Mengelola Data Fakultas Pada activity diagram gambar 4.7, menggambarkan Actor yaitu Admin dan Kabag umum dalam mengelola data fakultas, pertama Actor melakukan edit data dengan mengisi form dan delete data tersebut lalu Actor menyimpan hasil data yang sudah di manipulasi dan data tersebut dapat di tampilkan.
89
4. Mengelola Data Parkir
Update
Delete
Manipulasi Data Parkir
Input
Mengisi form input data parkir
tidak lengkap Simpan Lengkap
Data Tersimpan
Gambar 4.8 Activity Diagram Kelola Data Parkir Pada activity diagram gambar 4.8, menggambarkan Actor yaitu Admin dan Kabag umum dalam mengelola data lokasi parkir kampus, pertama Actor melakukan edit data dengan mengisi form dan delete data tersebut lalu Actor menyimpan hasil data yang sudah di manipulasi dan data tersebut dapat di tampilkan.
90
5. Mengelola Data Download
Update
Delete
Manipulasi Data Download
Input
Mengisi form input data download
tidak lengkap Simpan Lengkap
Data Tersimpan
Gambar 4.9 Activity Diagram Mengelola Data Download Pada activity diagram gambar 4.9, menggambarkan Actor yaitu Admin dan Kabag umum dalam mengelola data download, pertama Actor melakukan edit data dengan mengisi form dan delete data tersebut lalu Actor menyimpan hasil data yang sudah di manipulasi dan data tersebut dapat di tampilkan.
91
6. Lihat Peta
Start
memilih home
menampilkan peta kampus
Finish
Gambar 4.10 Activity Diagram Lihat Peta Pada gambar 4.10, menggambarkan Actor yaitu PR umum, Kabir Umum, pengembang, dan masyarakat memilih menu Home kemudian akan muncul sebuah peta Kampus UIN Syarif Hidayatullah Jakarta dan Pengunjung dapat melihat letak-letak gedung UIN yang di cari dengan bentuk persebaran titik dimana ketika di arahkan kursornya akan memberikan informasi fasilitas yang terdapat di dalam gedung tersebut.
92
7. Mengelola Berita
Start
tambah
edit
tambah berita
update berita
hapus
simpan berita
simpan
Finish
Gambar 4.11 Activity Diagram Kelola Berita Pada activity diagram gambar 4.11, menggambarkan Actor yaitu Admin dalam mengelola berita kegiatan kampus, pertama Actor melakukan edit data kegiatan dengan mengisi form kegiatan dan delete data tersebut lalu Actor menyimpan hasil data yang sudah di manipulasi dan data tersebut dapat di tampilkan.
93
8. Lihat Berita
Start
Memilih menu berita
Menampilkan berita
Finish
Gambar 4.12 Activity Diagram Lihat Berita Pada gambar 4.12, menggambarkan Actor yaitu Pengembang dan Masyarakat memilih menu berita kemudian akan ditampilkan list tabel berita kegiatan kampus.
94
9. Lihat Model 3D
Start
Memilih View 3D
Melihat Model 3D
Finish
Gambar 4.13 Activity Diagram Lihat Model 3D Pada gambar 4.13, menggambarkan Actor yaitu PR umum, Kabir umum, pengembang, dan masyarakat memilih menu lihat model 3D kemudian akan terlihat tampilan 3D gedung – gedung Kampus UIN Syarif Hidayatullah Jakarta dan Pengunjung dapat melihat model gedung UIN.
95
10. Mengelola Link Terkait
Start
Edit
Delete
Tambah link terkait
Simpan link terkait
Simpan
Finish
Gambar 4.14 Activity Diagram Mengelola Link Terkait Pada activity diagram gambar 4.14, menggambarkan Actor yaitu Admin dalam mengelola data link terkait, pertama Actor memilih edit link terkait dan delete data tersebut lalu Actor menyimpan hasil data yang sudah di manipulasi dan data tersebut dapat di tampilkan.
96
11. Lihat Link Terkait
Start
Memilih Link Terkait
Menampilkan Link Terkait
Finish
Gambar 4.15 Activity Diagram Lihat Link Terkait Pada gambar 4.15, menggambarkan Actor yaitu Pengembang dan Masyarakat memilih menu link terkait kemudian akan menampilkan list link terkait dengan kampus.
97
12. Mengelola Model 3D Start
Edit
Delete
Tambah Link Model
Simpan Data
Simpan
Finish
Gambar 4.16 Activity Diagram Mengelola Model 3D Pada activity diagram gambar 4.16, menggambarkan Actor yaitu Admin dalam mengelola data link Model 3 dimensi, pertama Actor memilih kelola link model dan delete atau add data tersebut lalu Actor menyimpan hasil data yang sudah di manipulasi dan data tersebut dapat di tampilkan.
98
13. Lihat Tentang Kami
Start
Memilih menu tentang kami
Menampilkan profil kampus
Finish
Gambar 4.17 Activity Diagram Lihat Tentang Kami Pada gambar 4.17, menggambarkan Actor yaitu Pengembang dan Masyarakat memilih menu tentang kami kemudian akan menampilkan profil tentang kampus.
99
14. Mengelola Tentang Kami
Update
Delete
Manipulasi Data Tentang Kami
Simpan
Data Tersimpan
Gambar 4.18 Activity Diagram Mengelola Tentang Kami Pada gambar 4.18, menggambarkan Actor yaitu Admin memilih menu manage tentang kami kemudian akan menampilkan profil tentang kampus dan memanipulasi data
100
15. Lihat Data Download
Memilih menu lihat data
Menampilkan data
Gambar 4.19 Activity Diagram Lihat Data Download Pada gambar 4.19, menggambarkan Actor yaitu Pengembang memilih menu lihat data kemudian akan menampilkan list data – data yang disediakan dalam web.
101
16. Download
memilih menu lihat data
memilih data yang akan di download
melakukan proses download
Gambar 4.20 Activity Diagram Download Pada gambar 4.20, menggambarkan Actor yaitu Pengembang memilih menu lihat data kemudian dapat mendownload data yang disediakan dalam web.
102
17. Mengelola user
Memilih manage user
Menampilkan data user
Melakukan edit data user
Batal Edit Simpan
Gambar 4.21 Activity Diagram Mengelola User Pada gambar 4.21, menggambarkan Actor yaitu Admin memilih menu manage user kemudian akan menampilkan data user yang akan di edit.
103
18. Validasi
Memilih menu data validasi
mengubah status data
simpan
Gambar 4.22 Activity Diagram Validasi Pada gambar 4.22, menggambarkan Actor yaitu PR umum dan Kabir umum memilih menu data validasi kemudian mengubah status data tersebut.
104
19. Registrasi
Memilih menu lihat data
klik registrasi
mengisi form registrasi
tidak lengkap
lengkap simpan
Gambar 4.23 Activity Diagram Registrasi Pada gambar 4.23, menggambarkan Actor yaitu Pengembang memilih menu lihat data kemudian memilih menu registrasi dan mengisi form data registrasi dengan tujuan dapat melihat data – data yang dapat di download.
105
20. Logout
Menampilkan halaman admin
Tidak
memilih menu logout
Ya Keluar dari sistem
Gambar 4.24 Activity Diagram Logout Pada gambar 4.24, menggambarkan Actor yaitu PR umum, Kabir umum, Kabag umum, Admin, dan Pengembang memilih menu logout kemudian keluar dari sistem.
106
4.2.1.3 Class Diagram Tabel 4.23 Daftar Objek Yang Diusulkan Proposed Objek List Admin PR umum
: Aktor 1 : Masukan username dan password() 2 : mengirim username dan password()
3 : validasi()
4 : menampilkan pesan proses login berhasil()
5 : menampilkan pesan proses login gagal()
Gambar 4.26 Login Sequence Diagram Diagram berurut Gambar 4.26, dimulai saat Actor yaitu Admin, PR umum, Kabir umum, Kabag umum, dan Pengembang memasukan Username dan password. Kemudian sistem akan melakukan baca data, bila Username dan password yang dimasukan salah maka sistem akan menampilkan pesan gagal, namun bila Username dan password yang dimasukan benar maka Actor akan dapat mengakses sistem dan sistem akan menampilkan halaman utama.
109
2. Mengelola Gedung
interface
gedung
: Aktor 1 : memilih menu input data gedung() 2 : menampilkan form input data gedung() 3 : input data gedung() 4 : simpan data gedung()
6 : menampilkan pesan berhasil()
5 : data tersimpan()
7 : memilih menu manage data gedung() 8 : menampilkan data gedung() 9 : memilih edit data gedung()
10 : menampilkan form edit data gedung() 11 : edit data gedung()
14 : menampilkan pesan sukses()
12 : update data gedung()
13 : data terupdate()
15 : memilih hapus data gedung() 16 : menghapus data gedung()
17 : data terhapus() 18 : menampilkan pesan sukses()
Gambar 4.27 Kelola Data Gedung Pada gambar 4.27, menjelaskan Actor yaitu Admin dan Kabag umum yang memilih kelola data gedung. Kemudian sistem cek data lalu akan menampilkan hasil pencarian. Lalu Actor akan melakukan input, Edit dan Delete data, sistem akan secara otomatis menyimpan perubahan.
110
3. Kelola Fakultas
fakultas
interface
: Aktor 1 : memilih menu input data fakultas() 2 : menampilkan form input data fakultas() 3 : input data fakultas() 4 : simpan data fakultas()
5 : data tersimpan()
6 : menampilkan pesan berhasil() 7 : memilih menu manage data fakultas() 8 : menampilkan data fakultas() 9 : memilih edit data fakultas()
10 : menampilkan form edit data fakultas() 11 : edit data fakultas()
12 : update data fakultas()
13 : data terupdate()
14 : menampilkan pesan sukses() 15 : memilih hapus data fakultas()
16 : menghapus data fakultas()
17 : data terhapus() 18 : menampilkan pesan sukses()
Gambar 4.28 Kelola Data Fakultas Pada gambar 4.28, menjelaskan Actor yaitu Admin dan Kabag umum yang memilih kelola data fakultas. Kemudian sistem cek data lalu akan menampilkan hasil pencarian. Lalu Actor akan melakukan Edit dan Delete data, sistem akan secara otomatis menyimpan perubahan.
111
4. Mengelola Parkir
interface
parkir
: Aktor 1 : memilih menu input data parkir() 2 : menampilkan form input data parkir() 3 : input data parkir() 4 : simpan data parkir()
5 : data tersimpan()
6 : menampilkan pesan berhasil() 7 : memilih menu manage data parkir() 8 : menampilkan data parkir() 9 : memilih edit data parkir()
10 : menampilkan form edit data parkir() 11 : edit data parkir()
12 : update data parkir()
13 : data terupdate()
14 : menampilkan pesan sukses() 15 : memilih hapus data parkir()
16 : menghapus data parkir()
17 : data terhapus() 18 : menampilkan pesan sukses()
Gambar 4.29 Mengelola Parkir Pada gambar 4.29, menjelaskan Actor yaitu Admin dan Kabag umum, yang memilih kelola data parkir. Kemudian sistem cek data lalu akan menampilkan hasil pencarian. Lalu Actor akan melakukan input, Edit dan Delete data, sistem akan secara otomatis menyimpan perubahan.
112
5. Mengelola Data Download data download
interface
: Aktor
1 : memilih menu input data download() 2 : menampilkan form input data download() 3 : input data download() 4 : simpan data download()
6 : menampilkan pesan berhasil()
5 : data tersimpan()
7 : memilih menu manage data download() 8 : menampilkan data download() 9 : memilih edit data download()
10 : menampilkan form edit data download() 11 : edit data download()
14 : menampilkan pesan sukses()
12 : update data download()
13 : data terupdate()
15 : memilih hapus data download() 16 : menghapus data download()
17 : data terhapus() 18 : menampilkan pesan sukses()
Gambar 4.30 Mengelola Data Download Pada gambar 4.30, menjelaskan Actor yaitu Admin dan Kabag umum, yang memilih kelola data download. Kemudian sistem cek data lalu akan menampilkan hasil pencarian. Lalu Actor akan melakukan input, Edit dan Delete data, sistem akan secara otomatis menyimpan perubahan.
113
6. Mengelola Model 3D model 3D
interface
: Aktor
1 : memilih menu input data model() 2 : menampilkan form input data model() 3 : input data model() 4 : simpan data model()
6 : menampilkan pesan berhasil()
5 : data tersimpan()
7 : memilih menu manage data model() 8 : menampilkan data model() 9 : memilih edit data model()
10 : menampilkan form edit data model() 11 : edit data model()
14 : menampilkan pesan sukses()
12 : update data model()
13 : data terupdate()
15 : memilih hapus data model() 16 : menghapus data model()
17 : data terhapus() 18 : menampilkan pesan sukses()
Gambar 4.31 Mengelola Data Model 3D Pada gambar 4.31, menjelaskan Actor yaitu Admin yang memilih kelola data model 3D. Kemudian sistem cek data lalu akan menampilkan hasil pencarian. Lalu Actor akan melakukan input, Edit dan Delete data, sistem akan secara otomatis menyimpan perubahan.
114
7. Mengelola User
interface
user
: Aktor 1 : memilih menu manage user()
2 : menampilkan data user() 3 : edit data user()
4 : update data user()
5 : data berhasil diupdate() 6 : menampilkan pesan sukses()
Gambar 4.32 Mengelola User Pada gambar 4.32, menjelaskan Actor yaitu Admin yang memilih kelola data user. Kemudian sistem cek data lalu akan menampilkan hasil pencarian. Lalu Actor akan melakukan edit data user, sistem akan secara otomatis menyimpan perubahan.
115
8. Lihat Peta
interface
peta
: Aktor 1 : pilih menu Home() 2 : kirim peta kampus()
3 : proses menampilkan peta()
4 : menampilkan peta kampus()
Gambar 4.33 Lihat Peta Kampus Diagram berurut Gambar 4.33, menjelaskan Actor PR umum, Kabir umum, Pengembang, dan Masyarakat yang memilih menu Home. Kemudian sistem akan menampilkan peta kampus 1 dan 2 yang berisikan informasi letak gedung – gedung, fakultas, dan lokasi parkir.
116
9. Mengelola Berita berita
interface
: Aktor
1 : memilih menu input berita() 2 : menampilkan form input berita() 3 : input berita() 4 : simpan berita()
6 : menampilkan pesan berhasil()
5 : data tersimpan()
7 : memilih menu manage berita() 8 : menampilkan berita() 9 : memilih edit berita()
10 : menampilkan form edit berita() 11 : edit berita()
14 : menampilkan pesan sukses()
12 : update berita()
13 : data terupdate()
15 : memilih hapus berita() 16 : menghapus berita()
17 : data terhapus() 18 : menampilkan pesan sukses()
Gambar 4.34 Kelola Berita Diagram berikut Gambar 4.34, menjelaskan Actor yaitu Admin melakukan Pengolahan berita kegiatan kampus di dalam sistem dan melakukan manipulasi data dengan tambah dan hapus berita kegiatan.
117
10. Lihat Berita
interface
berita
: Aktor 1 : pilih menu berita() 2 : kirim berita()
3 : proses menampilkan berita()
4 : menampilkan berita()
Gambar 4.35 Lihat Berita Diagram
berurut
Gambar
4.35,
menjelaskan
Actor
yaitu
Pengembang dan Masyarakat yang memilih menu berita. Kemudian sistem akan menampilkan list berita.
118
11. Lihat Model 3D
interface
model 3D
: Aktor 1 : pilih menu model 3D() 2 : kirim model 3D()
3 : proses menampilkan model 3D()
4 : menampilkan list model 3D()
Gambar 4.36 Lihat Model 3D Diagram berurut Gambar 4.36, menjelaskan Actor yaitu PR umum, Kabir umum, Pengembang, dan Masyarakat yang memilih menu view 3D. Kemudian sistem akan menampilkan peta kampus 1 dan 2 dengan model 3D menggunakan Google Earth.
119
12. Mengelola Link Terkait link terkait
interface
: Aktor
1 : memilih menu input link terkait() 2 : menampilkan form input link terkait() 3 : input link terkait() 4 : simpan link terkait()
6 : menampilkan pesan berhasil()
5 : data tersimpan()
7 : memilih menu manage link terkait() 8 : menampilkan link terkait() 9 : memilih edit link terkait()
10 : menampilkan form edit link terkait() 11 : edit link terkait()
14 : menampilkan pesan sukses()
12 : update link terkait()
13 : data terupdate()
15 : memilih hapus link terkait() 16 : menghapus link terkait()
17 : data terhapus() 18 : menampilkan pesan sukses()
Gambar 4.37 Kelola Link Terkait Diagram berikut Gambar 4.37, menjelaskan Actor yaitu Admin melakukan Pengolahan link – link terkait website kampus di dalam sistem dengan melakukan tambah, edit, dan hapus link terkait.
120
13. Lihat Link Terkait
interface
link terkait
: Aktor 1 : pilih menu link terkait() 2 : kirim link terkait()
3 : proses menampilkan link terkait()
4 : menampilkan list link terkait()
Gambar 4.38 Lihat Link Terkait Diagram
berurut
Gambar
4.38,
menjelaskan
Actor
yaitu
Pengembang, dan Masyarakat yang memilih link terkait. Kemudian sistem akan menampilkan alamat website yang berhubungan dengan kampus.
121
14. Mengelola Tentang Kami
tentang kami
interface : Aktor 1 : pilih menu manage tentang kami()
2 : menampilkan data tentang kami() 3 : edit tentang kami()
4 : update data tentang kami()
5 : data terupdate() 6 : menampilkan pesan sukses()
Gambar 4.39 Mengelola Tentang Kami Diagram berikut Gambar 4.39, menjelaskan Actor yaitu Admin melakukan pengolahan tentang kami di dalam sistem untuk ditampilkan di dalam sistem.
122
15. Lihat Tentang Kami
interface
tentang kami
: Aktor 1 : pilih menu tentang kami() 2 : kirim tentang kami()
3 : proses menampilkan tentang kami()
4 : menampilkan tentang kami()
Gambar 4.40 Lihat Tentang Kami Diagram
berurut
Gambar
4.40,
menjelaskan
Actor
yaitu
Pengembang dan Masyarakat yang memilih menu tentang kami. Kemudian sistem akan menampilkan profil kampus UIN Jakarta.
Gambar 4.41 Logout Gambar 4.41 merupakan diagram sequence logout,
yang
menggambarkan interaksi antara Admin dengan sistem untuk keluar dari halaman admin, untuk proses logout dapat dilakukan setelah semua proses yang diinginkan telah berjalan yaitu dengan cara memilih menu logout dan memilih button “logout”.
124
17. Registrasi
interface
user
: Aktor 1 : memilih menu download data()
2 : menampilkan halaman login() 3 : memilih menu registrasi() 4 : menampilkan form registrasi() 5 : mengisi form registrasi()
6 : menyimpan data()
7 : data tersimpan() 8 : menampilkan pesan sukses()
Gambar 4.42 Sequence Diagram Registrasi Gambar 4.42 merupakan diagram sequence Registrasi,
yang
menggambarkan interaksi antara pengembang dengan sistem untuk mendaftar menjadi member pengembang, untuk proses registrasi dapat dilakukan dengan memilih menu lihat data download lalu mengklik tombol registrasi.
125
18. Lihat Data Download
interface
data download
: Aktor 1 : pilih menu download data() 2 : kirim download data()
3 : proses menampilkan data download()
4 : menampilkan list data download()
Gambar 4.43 Lihat Data Download Diagram
berurut
Gambar
4.43,
menjelaskan
Actor
yaitu
Pengembang yang memilih data download. Kemudian sistem akan menampilkan list data download yang bisa di download oleh pengembang setelah melakukan registrasi.
126
19. Validasi
interface
parkir
gedung
fakultas
: Aktor 1 : memilih manage data()
2 : menampilkan list data() 3 : memilih data parkir()
4 : mengambil data parkir()
5 : mengirim data parkir() 6 : menampilkan data parkir() 7 : validasi data parkir()
8 : validasi data()
9 : data tervalidasi() 10 : memilih data gedung() 11 : mengambil data gedung()
12 : mengirim data gedung() 13 : menampilkan data gedung() 14 : validasi data gedung()
15 : validasi data()
16 : data tervalidasi() 17 : memilih data fakultas() 18 : mengambil data fakultas()
19 : mengirim data fakultas() 20 : menampilkan data fakultas() 21 : validasi data fakultas()
22 : validasi data()
23 : data tervalidasi() 24 : memilih data download() 25 : mengambil data download()
26 : mengirim data download() 27 : menampilkan data download() 28 : validasi data download()
29 : validasi data()
30 : data tervalidasi() 31 : menampilkan pesan sukses()
Gambar 4.44 Validasi Data Diagram berurut Gambar 4.44, menjelaskan Actor yaitu PR umum dan Kabir umum yang memilih manage data, kemudian melakukan edit data dan melakukan validasi data.
data download
127
20. Download Data
interface
data download
login
: Aktor 1 : memilih menu download data() 2 : mengambil data download()
3 : mengirim data download() 4 : menampilkan form login() 5 : melakukan login()
6 : proses login()
7 : login berhasil() 8 : menampilkan list data download() 9 : memilih data download()
10 : download data()
11 : data di download() 12 : menampilkan data download()
Gambar 4.45 Download Data Diagram
berurut
Gambar
4.45,
menjelaskan
Actor
yaitu
Pengembang yang memilih download data, kemudian melakukan login terlebih dahulu agar bisa mendownload data yang disediakan.
128
4.2.2
Logical Record Structure (LRS) Berdasarkan diagram class dapat dipetakan atribut-atributnya sebagai berikut: model 3D +id_model(PK)
link terkait
User
+id_user(FK)
+id_linkterkait(PK)
+id_user(PK)
+id_user(FK) berita +id_berita(PK) +id_user(FK) +id_gedung(FK)
gedung +id_gedung(PK) +id_user(FK)
data download
tentang kami
+id_fakultas(PK)
+id_parkir(PK)
+id_download(PK)
+id_tentangkami(PK)
+id_user(FK)
+id_user(FK)
+id_user(FK)
+id_user(FK)
Parkir
fakultas
Gambar 4.46 Logical Record Structure
4.2.3
Perancangan Database a. Tabel akses database Tabel 4.24 Tabel Akses Database Nama Tabel
No
Nama aktor
Gedung
Berita
Fakultas
Model
Link
3D
Terkait
Parkir
1
Admin
CRUD
CRUD
CRUD
CRUD
CRUD
CRUD
2
Kabag umum
CRUD
CRUD
CRUD
-
-
CRUD
3
PR umum
R
R
R
R
-
R
129
4
Kabir umum
R
R
R
R
-
R
5
Pengembang
R
R
R
R
R
R
6
Masyarakat
R
R
R
R
R
R
Nama Tabel
No
Nama aktor
Tentang
Data
Kami
Downlo
User
ad 1
Admin
CRUD
CRUD
CRUD
2
Kabag umum
-
CRUD
-
3
PR umum
-
R
-
4
Kabir umum
-
R
-
5
Pengembang
R
R
-
6
Masyarakat
R
R
-
Keterangan : C : Create
U : Update
D : Delete
R : Read
130
b. Struktur data 1) Tabel User Nama tabel
: User
Deskripsi
: berisi atribut dari tabel User
Primary key
: id_user
Tipe file
: Master Tabel 4.25 Tabel User
No
Nama Kolom
Tipe Data
Panjang
Keterangan
1
Id_user
INT
2
Nomor id user
2
Nama_user
Varchar
20
Nama user
3
Username
Varchar
20
Username user
4
Password
Varchar
20
Password user
5
Email
Varchar
30
Email user
6
Level
Varchar
20
Level user
2) Tabel gedung Nama tabel
: Gedung
Deskripsi
: berisi atribut dari tabel Gedung
Primary key
: id_gedung
Foreign key
: id_user
131
Tabel 4.26 Tabel Gedung Tipe No
Nama Kolom
Panjang
Keterangan
Data 1
Id_gedung
INT
2
Nomor id gedung
2
Nama
Varchar
50
Nama gedung
3
Alamat
Varchar
50
Alamat gedung
4
No_telpon
Varchar
20
Nomor telpon gedung
5
Fasilitas
Varchar
30
Fasilitas gedung
6
Email
Varchar
20
Email gedung
7
Lat
Double
Koordinat latitude gedung
8
Long
Double
Koordinat longitude gedung
3) Tabel Model 3D Nama tabel
: File Link Model
Deskripsi
: berisi atribut dari tabel Link Model
Primary key
: id_Link
Foreign key
: id_user Tabel 4.27 Tabel Model 3D
No
Nama Kolom
Tipe Data
Panjang
1
Id_Link
INT
3
Keterangan Nomor id link
132
2
Nama_Model
Varchar
20
Nama Model
3
Link_model
Varchar
100
Link Model
4) Tabel berita Nama tabel
: Berita
Deskripsi
: berisi atribut dari tabel berita
Primary key
: id_berita
Foreing key
: id_gedung, id_user Tabel 4.28 Tabel Berita
No
Nama Kolom
Tipe Data
Panjang
Keterangan
1
Id_berita
INT
11
Nomor id berita
2
Id_gedung
INT
11
Nomor id gedung
3
Judul_berita
Varchar
20
Judul berita
4
Tgl_berita
Date
-
Tanggal berita
5
Waktu_keg
Varchar
30
6
Keterangan
Varchar
50
Keterangan berita
5) Tabel link terkait Nama tabel
: Link
Deskripsi
: berisi atribut dari tabel Link
133
Primary key
: id_link
Foreign key
: id_user Tabel 4.29 Tabel Link Terkait
No
Nama Kolom
Tipe Data
Panjang
Keterangan
1
Id_link
INT
2
Nomor id link
2
Nama_link
Varchar
100
Nama link
3
url
Varchar
100
Alamat web
6) Tabel Fakultas Nama tabel
: Fakultas
Deskripsi
: berisi atribut dari tabel Fakultas
Primary key
: id_fakultas
Foreign key
: id_user Tabel 4.30 Tabel Fakultas Tipe
No
Nama Kolom
Panjang
Keterangan
Data 1
Id_Fakultas
INT
2
Nomor id fakultas
2
Nama_fakultas
Varchar
50
Nama Fakultas
3
Alamat
Varchar
50
Alamat fakultas
134
4
No_telpon
Varchar
20
Nomor telpon fakultas
5
Fasilitas
Varchar
30
Fasilitas fakultas
6
Email
Varchar
20
Email fakultas
7
Lat
Double
Koordinat latitude fakultas
8
Long
Double
Koordinat longitude fakultas
7) Tabel Parkir Nama tabel
: Parkir
Deskripsi
: berisi atribut dari tabel parkir
Primary key
: id_parkir
Foreign key
: id_user
Tabel 4.31 Tabel Parkir Tipe No
Nama Kolom
Panjang
Keterangan
Data 1
Id_parkir
INT
2
Nomor id parkir
2
Jenis_parkir
Varchar
50
Nama parkir
3
Lokasi_parkir
Varchar
50
Alamat parkir
135
4
Jumlah_batas_
Varchar
3
Jumlah batas parkir
parkir 5
Lat
Double
Koordinat latitude parkir
6
Long
Double
Koordinat longitude parkir
8) Tabel Data Download Nama tabel
: Data Download
Deskripsi
: berisi atribut dari tabel data download
Primary key
: id_download
Foreign key
: id_user
Tabel 4.32 Tabel Data Download No
Nama Kolom
Tipe Data
Panjang
1
Id_download
INT
2
Keterangan Nomor id data download
2
Nama_data
Varchar
100
Nama data
3
Data
Varchar
100
File data download
9) Tabel Tentang Kami Nama tabel
: Tentang Kami
Deskripsi
: berisi atribut dari tabel tentang kami
136
Primary key
: id_tentangkami
Foreign key
: id_user
Tabel 4.33 Tabel Tentang Kami No
Nama Kolom
Tipe Data
Panjang
1
Id_tentangka
INT
2
mi 2
Judul_tentan
Varchar
100
Isi_tentangka
Judul tentang kami
Text
-
mi
4.2.4
Nomor id tentang kami
gkami 3
Keterangan
Isi profil tentang kami
Graphic User Interface 1. Perancangan Struktur Menu Perancangan
struktur
menu
bertujuan
untuk
memberikan
rancangan struktur menu pada Sistem Informasi Peta Kampus Berbasis Web. Adapun struktur menu sistem ini antara lain :
137
a) Struktur Menu Admin Log in
Halaman Utama
Lihat Peta
Input Data
Kelola Data
Input Data Gedung
Kelola Data Gedung
Input Data Fakultas
Kelola Data Fakultas
Input Data Parkir
Kelola Data Parkir
Input Link Terkait
Kelola Link Terkait
Input Berita
Kelola Berita
Gambar 4.47 Struktur Menu Admin b) Struktur Menu Kabag Umum Log in
Halaman Utama
Lihat Peta
Input Data
Kelola Data
Input Data Gedung
Kelola Data Gedung
Input Data Fakultas
Kelola Data Fakultas
Input Data Parkir
Kelola Data Parkir
Input Berita
Kelola Berita
Input Link Model
Kelola Link Model
Gambar 4.48 Struktur Menu Kabag Umum
138
c) Struktur Menu Masyarakat Halaman Utama
Home
Model 3D
Berita
Terkait
Tentang Kami
Gambar 4.49 Struktur Menu Pengunjung d) Struktur Menu Pengembang Halaman Utama
Home
Model 3D
Berita
Terkait
Data Download
Tentang Kami
Gambar 4.50 Struktur Menu Pengembang 4.2.5
Rancangan Interface Desain layar sistem informasi peta kampus 3D terbagi menjadi dua tampilan yang berbeda. Pertama tampilan administrator yang dikelola oleh Biro Bagian Umum dan tampilan pengunjung yang bisa dilihat oleh pengunjung. a) Halaman Utama
Gambar 4.51 Halaman Utama
139
1. Halaman Login
Gambar 4.52 Halaman Login 2. Halaman Registrasi
Gambar 4.53 Halaman Registrasi
140
b) Halaman Admin, Kabag Umum 1. Halaman Utama
Gambar 4.54 Halaman Utama Admin 2. Menu Input Data Gedung
Gambar 4.55 Input Data Gedung
141
3. Menu Input Data Fakultas
Gambar 4.56 Input Data Fakultas 4. Menu Input Parkir
Gambar 4.57 Input Parkir
142
5. Menu Input Berita
Gambar 4.58 Input Berita 6. Menu Input Model
Gambar 4.59 Input Model
143
7. Menu Manage Gedung
Gambar 4.60 Manage Gedung 4.2.6
Implementasi 4.2.6.1 Persiapan Sistem Melakukan pengkodean aplikasi , dalam tahap ini sistem dibangun dengan menggunakan : 1. Bahasa Pemrograman Hypertext Preprocessor (PHP) 2. Perangkat Keras a. Intel(R) Core (TM) i3-2310M [email protected] b. Hardisk 750GB c. Memory 4GB d. VGA 2GB e. Perangkat keras lainnya (Keyboard, Mouse dan lain-lain) 3. Perangkat Lunak a. Windows 7/XP sebagai Sistem Operasi komputer
144
b. Google Maps API sebagai Map Server. c. SketchUp sebagai pengolah model 3 dimensi d. Google Earth sebagai wadah penampil model 3 dimensi e.
Macromedia Dreamweaver 8 sebagai text editor
f. XAMPP sebagai Local Server sebagai running localhost g. Paket XAMPP (MYSQL sebagai database server, PhpMyAdmin sebagai webserver). h. StarUML sebagai alat desain perancangan sistem dan database Browser internet: Mozilla Firefox, Google Chrome sebagai web browser untuk menjalankan aplikasi. 4.2.6.2 Pengujian sistem Setiap aplikasi tentunya memerlukan testing atau pengujian. Pengujian ini dimaksudkan agar aplikasi yang dibuat apakah sesuai dengan harapan atau tidak. Di samping itu, pengujian aplikasi dapat mengetahui seberapa besar error atau tingkat kesalahan pada aplikasi. Sehingga dapat dikoreksi ulang untuk meminimalkan tingkat kesalahan yang ada. Pengujian dilakukan dengan cara menjalankan aplikasi pada browser (Google chrome), melakukan input data yang diminta, menyimpan data dan mengecek output yang ditampilkan apakah sesuai dengan yang diharapkan atau tidak. Metode yang digunakan adalah metode Black Box. Pengujian dilakukan pada sisi admin dan pada sisi user Public
145
Tabel 4.34 Pengujian Sistem Admin, Kabag, Kabir, dan PR umum No. Unit program 1.
Login
Aksi
Hasil yang Diharapkan
Input username dan
Masuk ke halaman admin
password yang benar
sesuai role pengguna dengan
lalu klik Login
username dan password yang
Hasil Berhasil
benar 2.
Login
Input username dan
Gagal masuk halaman Admin
Berhasil
Berhasil
password yang salah lalu klik Login 3.
4.
5.
6.
Menu kelola
Klik Manage data
Menampilkan data gedung
data gedung
kemudian manage
yang akan di edit atau di
gedung
hapus
Menu kelola
Klik Manage data
Menampilkan data fakultas
data Fakultas
kemudian manage
yang akan di edit atau di
fakultas
hapus
Menu kelola
Klik Manage data
Menampilkan data parkir
data parkir
kemudian manage
yang akan di edit atau di
parkir
hapus
Menu kelola
Klik Manage data
Menampilkan data berita
berita
kemudian manage
yang akan di edit atau di
Berhasil
Berhasil
Berhasil
146
7.
8.
9.
berita
hapus
Menu kelola
Klik Manage Data
Menampilkan list data
data download
download
download
Menu kelola
Klik Manage data
Menampilkan data model
model
kemudian manage
yang akan di edit atau di
model
hapus
Klik manage data
Menampilkan list data
Menu Validasi
Berhasil
Berhasil
Berhasil
gedung, fakultas, parkir, dan data download 10.
Menu kelola
Klik manage data
Menampilkan profil UIN
tentang kami
tentang kami
Jakarta
Berhasil
Tabel 4.35 Pengujian Sistem Public User No.
Unit program
Aksi
Hasil yang
Hasil
Diharapkan 1.
Menu Home
Klik Home
Masuk halaman Home
Berhasil
dan Peta Kampus 2.
Menu Model
Klik Model 3D
Masuk halaman Link Model 3 Dimensi
Berhasil
147
3.
Menu Berita
Klik Berita
Masuk halaman berita
Berhasil
4.
Menu Tentang
Klik Tentang
Menampilkan profil
Berhasil
Kami
Kami
tentang UIN Jakarta
Menu Terkait
Klik Terkait
Menampilkan link
5.
Berhasil
yang terkait dengan UIN Jakarta 6.
7.
Menu Data
Klik Data
Menampilkan list data
Download
Download
download
Menu Registrasi
Klik Menu Data
Menampilkan Form
Download,
registrasi
Berhasil
Berhasil
kemudian klik Registrasi 8.
Menu tentang kami
Klik menu tentang
Menampilkan profil
kami
UIN Jakarta
Berhasil
BAB V KESIMPULAN DAN SARAN Pada bab ini berisikan kesimpulan dari penelitian yang telah dilakukan serta saran-saran yang bermanfaat bagi skripsi maupun pengembangan aplikasi ini. 5.1. Kesimpulan Dari pembahasan yang sudah diuraikan sebelumnya, maka dapat disimpulkan bahwa: 1. Visualisasi peta kampus UIN Syarif Hidayatullah Jakarta ini dibangun dengan menggunakan Google Maps sebagai Map Server dan sebagai tempat
pengolah
peta,
PHP
sebagai
bahasa
pemrograman,
Dreamweaver CS 5 sebagai text editor, dan MySql sebagai database sistem. 2. Sketchup digunakan sebagai tools untuk membuat model 3 dimensi dalam sebuah peta dan mengintergrasikannya ke dalam Google Earth yang juga dapat dijadikan sebuah sarana media informasi yang menarik. 3. Hasil dari penelitian ini adalah sebuah sistem informasi peta kampus berbasis web di UIN Jakarta yang dapat menampilkan lokasi – lokasi dan fasilitas gedung – gedung yang ada di UIN Jakarta dan sebuah peta
148
149
3 dimensi berbasis Google Earth yang dapat menampilkan visual peta kampus seperti nyata. 5.2. Saran Sistem yang dibangun masih memiliki kekurangan dan keterbatasan, oleh karena itu dapat dikembangkan oleh beberapa hal agar sekiranya menjadi lebih baik dan berguna, antara lain : 1. Diharapkan untuk penelitian lebih lanjut penerapan visualisasi 3 dimensi dikembangkan ke dalam website UIN Jakarta agar dapat diakses oleh pihak – pihak yang berkepentingan.
DAFTAR PUSTAKA Abdul Kadir. 2003. Pengenalan Sistem Informasi, Andi, Yogyakarta. Chandra Handi. 2013. SketchUp 2013 untuk orang awam. Maxikom, Palembang. Henky Prihatna. 2005. Kiat praktis menjadi web master professional. PT.Elexmedia komputindo. Jakarta. Holzner S. 2003. Sams Teach Yourself XML in 21 Days. United States of America (USA): Sams Publishing. Iqbal,
Mohamad.2013.PERANCANGAN TERDEKAT
BERBASIS
APLIKASI
ANDROID
INFORMASI
(STUDI
KASUS:
SPBU KOTA
TANGERANG). Jakarta : Universitas Islam Negeri Jogiyanto, HM. 2005. Analisis & Disain Sistem Informasi Pendekatan Terstruktur Teori dan Praktek Aplikasi Bisnis. Andi Offset, Yogyakarta. Kendall. 2010. Analisis dan perancangan sistem. Indeks, Jakarta. Kendall. 2008. Analisis dan perancangan sistem. Indeks, Jakarta. Munawar. 2005. Pemodelan Visual dengan UML. Graha Ilmu, Yogyakarta. Nugroho, Adi ST., MMSI. 2005. Konsep pengembangan sistem basis data.Informatika. Bandung.
Prahasta, E. (2009). Sistem Informasi Geografis Konsep- Konsep Dasar (Prespektif Geodesi dan Geomatika). Bandung: Informatika. Prahasta, Eddy. 2005. Konsep - Konsep Dasar Sistem Infomasi Geografis . Penerbit Informatika, Bandung. Prahasta, Eddy. 2007. Membangun Aplikasi Web-based GIS dengan MapServer. Penerbit Informatika, Bandung. Pressman, SR. 2004. Rekayasa Perangkat Lunak. Andi Offset, Yogyakarta. Purvis M, Sambells J, dan Turner C. 2006. Beginning Google Maps Applications with PHP and Ajax: From Novice to Professional. United States of America (USA): Apress. Simamarta. 2010. Rekayasa perangkat lunak. Andi Offset, Yogyakarta. Suratin.2012.PENGEMBANGAN APLIKASI PANTAUAN CURAH HUJAN BERBASIS SMARTPHONE. Jakarta : Universitas Islam Negeri. Turban Efraim, R Kelly Rainer jr, Richard E, Potter. 2006. Pengantar Teknologi Informasi. Salemba Infotek, Jakarta. Peranginangin, Kasiman. 2006. Aplikasi WEB dengan PHP dan MySQL, Yogyakarta: Andi.
Whitten. 2004. Metode desain dan analisis sistem Edisi ke 6. Andi Offset, Yogyakarta. ------------------------------------------Internet---------------------------------------------------Harrynov.2009.http://sketchuptutor.blogspot.com/2009/11/getting-to-know-sketchupfree.html. Di akses: 10 September 2014 http://ajipajriana48.blogspot.com/2013/09/pengertian-alat-dan-fungsi-fungsi-alat.html Di akses: 12 September 2014 http://tutorial-update.blogspot.com/2013/04/nama-dan-fungsi-tool-sketchupbahasa.html - di akses pada 14 Februari 2014
WAWANCARA Narasumber
: Bapak Jalul
Jabatan
: Staf Biro Administrasi Umum dan Kepegawaian
Penulis
: Firmansyah
Tanggal
: 8 Oktober 2014
Hasil Wawancara : Penulis
: Bagaimana informasi peta kampus yang sudah ditampilkan saat ini?
Narasumber
: Saat ini informasi yang ditampilkan masih dalam bentuk master plan. Seperti pada denah kampus yang ada di pintu utama dan denah dalam bentuk PDF yang ada dalam website.
Penulis
: Apakah informasi yang ditampilkan sudah cukup lengkap jika hanya menampilkan master plan dan denah saja?
Narasumber
: Masih kurang, karena hanya memperlihatkan lokasi – lokasi dari gedung – gedung yang ada di kampus saja tidak mencakup informasi yang lebih detail mengenai gedung tersebut.
Penulis
: Bagaimana cara untuk memperbaharui peta jika ada gedung baru yang akan di bangun?
Narasumber
: Jika ada gedung baru yang akan di bangun, maka kita akan memperbaharui denah yang lama dengan cara menggambar denah yang baru dan mengubahnya kembali dalam bentuk PDF untuk ditampilkan dalam website.
Penulis
: Apakah cara tersebut sudah cukup efektif?
Narasumber
: Menurut saya masih kurang efektif, karena memerlukan waktu yang sedikit lama untuk menggambar ulang denah kampus dan mengubahnya lagi menjadi PDF.
Penulis
: Bagaimana menurut bapak jika ada sistem informasi peta kampus berbasis web yang dapat memudahkan dalam update informasi peta kampus dan menampilkan objek gedung – gedung kampus secara 3 dimensi?
Narasumber
: Kami sangat senang, selain dapat memudahkan dalam memperbaharui peta kampus secara real time juga dapat mempermudah masyarakat mengetahui lokasi gedung, fakultas, serta fasilitas yang ada di kampus.
Penulis
: Jika saya ingin mengembangkan sistem dan membuat model 3 dimensi, apakah saya bisa mendapat data serta informasi mengenai peta, gedung, dan fakultas yang di kampus?
Narasumber
: Oh bisa sekali, nanti akan dibuatkan surat untuk kamu agar dapat diberi akses dalam mengambil data dan informasi yang diperlukan dari tiap gedung dan fakultas, dan untuk denahnya kamu bisa minta di ruang panel kampus.
HASIL KUISIONER 1. Apakah anda sering mengunjungi lokasi antar fakultas atau antar gedung yang ada di UIN Syarif Hidayatullah? Pilihan Tidak Pernah Jarang Cukup Sering Sering Sangat Sering Total
Jumlah Responden 0 0 20 0 0 20
Presentase 0% 0% 100% 0% 0% 100%
2. Apakah anda tahu semua lokasi fakultas dan fasilitas lainnya yang ada di UIN Syarif Hidayatullah Jakarta? Pilihan Sangat Tidak Tahu Tidak Tahu Tahu Cukup Tahu Sangat Tahu Total
Jumlah Responden 0 1 4 11 4 20
Presentase 0% 5% 20% 55% 20% 100%
3. Apakah anda pernah melihat peta kampus UIN atau menggunakan sistem peta kampus untuk mencari lokasi fakultas di UIN Jakarta? Pilihan Tidak Pernah Pernah Cukup Pernah Sering Sangat Sering Total
Jumlah Responden 8 3 8 1 0 20
Presentase 40% 15% 40% 5% 0% 100%
4. Menurut Anda, apakah informasi yang diberikan sudah cukup membantu dalam memberikan informasi mengenai lokasi dan fasilitas UIN Jakarta? Pilihan Sangat Tidak Setuju Tidak Setuju Cukup Setuju Setuju Sangat Setuju Total
Jumlah Responden 5 3 9 2 1 20
Presentase 25% 15% 45% 10% 5% 100%
5. Apakah sistem yang ada cukup mudah dan menarik untuk digunakan? Pilihan Sangat Tidak Setuju Tidak Setuju Cukup Setuju Setuju Sangat Setuju Total
Jumlah Responden 5 7 3 3 2 20
Presentase 25% 35% 15% 15% 10% 100%
6. Apakah anda pernah menggunakan Google Maps atau Google Earth? Pilihan Tidak Pernah Pernah Cukup Pernah Sering Sangat Sering Total
Jumlah Responden 1 1 4 8 6 20
Presentase 5% 5% 20% 40% 30% 100%
7. Menurut Anda apakah Google Maps dan Google Earth sangat menarik untuk digunakan? Pilihan Sangat Tidak Menarik Tidak Menarik Cukup Menarik Menarik Sangat Menarik Total
Jumlah Responden 0 0 4 5 11 20
Presentase 0% 0% 20% 25% 55% 100%
8. Apakah Anda pernah mengetahui atau mendengar tentang model bangunan 3D (tiga dimensi)? Pilihan Sangat Tidak Pernah Tidak Pernah Cukup Pernah Pernah Sangat Pernah Total
Jumlah Responden 1 5 4 8 2 20
Presentase 5% 25% 20% 40% 10% 100%
9. Pernahkah anda melihat model bangunan dengan 3D (tiga dimensi)? Pilihan Sangat Tidak Pernah Tidak Pernah Cukup Pernah Sering Sangat Sering Total
Jumlah Responden 1 5 2 10 2 20
Presentase 5% 25% 10% 50% 10% 100%
10. Menurut Anda, apakah model 3D (tiga dimensi) cukup menarik untuk Anda? Pilihan Sangat Tidak Menarik Tidak Menarik Cukup Menarik Menarik Sangat Menarik Total
Jumlah Responden 0 1 1 8 10 20
Presentase 0% 5% 5% 40% 50% 100%
11. Bagaimana pendapat Anda jika ada sistem layanan penyedia informasi kampus UIN Jakarta berbasis web dengan menggunakan Google Maps dan terdapat visual gedung kampus dengan model 3D (tiga dimensi)? Pilihan Sangat Tidak Setuju Tidak Setuju Cukup Setuju Setuju Sangat Setuju Total
Jumlah Responden 0 1 0 4 15 20
Presentase 0% 5% 0% 20% 75% 100%
TAMPILAN APLIKASI
PUBLIK (Masyarakat Dan Pengembang) 1. Halaman Utama
var pertama = 0; var jenis = "home"; var namaperumx = new Array(); var alamatx = new Array(); var kecx = new Array(); var websitex = new Array(); var daerahx = new Array();
var namastox = new Array(); var kodestox = new Array(); var alamatstox = new Array();
var alamatrkx = new Array(); var idstorkx = new Array(); var namadpx = new Array(); var alamatdpx = new Array(); var kapasitasx = new Array(); var isix = new Array();
<script type="text/javascript">
var rusakx = new Array(); var wsuccx = new Array();
//inisialisasi variabel tampung
var kosongx = new Array();
var peta;
var idrkx = new Array();
var websitestox = new Array(); var beritax = new Array();
/** letak file kml */
var fasilitasstox = new Array(); var fasilitasx = new Array();
geoXml.parse('UIN_JAKART A.kml');
var jmlbatasx = new Array(); google.maps.event.addListener (peta, "mousemove", function(pt)
var i; var url;
{ var gambar_tanda; var zoomLevel = peta.getZoom(); //load peta google maps function peta_awal(){ var kampus = new google.maps.LatLng(6.3087,106.757); var petaoption = { zoom: 16, scaleControl: true, center: kampus, mapTypeId: google.maps.MapTypeId.PETA }; peta = new google.maps.Map(document.getEleme ntById("petaku"),petaoption);
