skripsi pengembangan sistem informasi … · dengan model 3 dimensi menggunakan google earth (studi...
TRANSCRIPT
ii
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
iii
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,
Nuryasin, M.Kom
NIP. 197607152011011005
Pembimbing II,
Eri Rustamaji, MBA
NIP.
Mengetahui,
Ketua Program Studi Sistem Informasi
Fakultas Sains dan Teknologi
UIN Syarif Hidayatullah Jakarta
Nia Kumaladewi, MMSI
NIP: 197504122007102002
iv
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
Zainul Arham, M.SI
NIP.197407302007101002
Penguji II
Ir. Bakri La Katjong, MT, M.Kom
NIP. 470035164
Pembimbing I
Nuryasin, M,Kom
NIP. 197607152011011005
Pembimbing II
Eri Rustamaji, MBA
NIP.
Mengetahui,
Dekan Fakultas Sains dan Teknologi
Dr. Agus Salim, S.Ag., M.Si
NIP. 19720816 199903 1 003
Ketua Prodi Sistem Informasi
Nia Kumaladewi, MMSI
NIP: 197504122007102002
v
PERNYATAAN
DENGAN INI SAYA MENYATAKAN BAHWA SKRIPSI INI BENAR-
BENAR HASIL KARYA SAYA SENDIRI YANG BELUM PERNAH
DIAJUKAN SEBAGI SKRIPSI ATAU KARYA ILMIAH PADA PERGURUAN
TINGGI ATAU LEMBAGA MANAPUN.
Jakarta, Maret 2015
Firmansyah
1110093000061
vi
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)
vii
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.
viii
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 apa-
apanya. 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.
ix
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
x
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
xi
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
xii
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
xiii
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
6. 4.2.1.2 Activity Diagram ............................................... 86
7. 4.2.1.3 Class Diagram .................................................. 106
8. 4.2.1.4 Sequence Diagram ............................................ 108
9. 4.2.2 Logical Record Structure ............................................... 128
10. 4.2.3 Perancangan Database ................................................... 128
11. 4.2.4 Graphic User Interface .................................................. 136
12. 4.2.5 Rancangan Interface ...................................................... 138
13. 4.2.6 Implementasi .................................................................. 143
14. 4.2.6.1 Persiapan Sistem ............................................... 143
15. 4.2.6.2 Testing (Pengujian Sistem) ............................... 144
xiv
16. BAB V PENUTUP
5.1 Kesimpulan ................................................................................... 148
5.2 Saran ............................................................................................. 149
DAFTAR PUSTAKA
LAMPIRAN
xv
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
xvi
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
xvii
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
xviii
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
xix
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
xx
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
xxi
DAFTAR SIMBOL
SIMBOL USE-CASE MODEL DIAGRAMS
(Whitten et al, 2004)
Simbol Keterangan
Actor
Use case
Association
<<dependson>>
Depends on
<<uses>>
Uses (includes)
Inheritance
Actor1
-End1
*
-End2
*
«inherits»
xxii
SIMBOL CLASS DIAGRAM
(Whitten et al, 2004)
Simbol Keterangan
Class
1. class name
2. attributes
3. behaviors
Association
Generalization
Class 1
2
3
-End1
*
-End2
*
xxiii
SIMBOL SEQUENCE DIAGRAM
(Whitten et al, 2004)
Simbol Keterangan
Object
Lifeline
Messages
Behaviors (operations)
xxiv
SIMBOL ACTIVITY DIAGRAM
(Whitten et al, 2004)
Simbol Keterangan
Activity
Initiate Activities
Start of the Process
Termination of the
Process
Synchronization Bar
Decision Activity
1
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
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 buku-
buku 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.
9
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:
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 benda-
benda 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 menggunakan peta rupa bumi yang telah
disederhanakan sebagai dasar untuk meletakkan 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 efektif untuk berbagi (sharing) dan
mengkomunikasikan rancangan mereka dengan yang 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. Client-
side 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 gedung-
gedung, 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 bangunan-
bangunan 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)
35
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)
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
1
Eldy
Murtaza
Implementasi Pemodelan 3D
Di Kawasan Pelabuhan Ulee
Lheu
Dengan Menggunakan
Sketchup 2013 Dan Google
Earth
Sudah
menggunakan
Google Earth
sebagai map
dasar untuk
tampilannya
Hanya dapat
ditampilkan di
aplikasi
Google Earth,
tidak berbasis
web
39
2 Dewanto RA
Rancang Bangun Sistem
Informasi Geografis Wisata
Kuliner berbasis Web
dengan Google API
Sudah
menampilkan
map interaktif
dengan google
map
Tidak
memiliki
bentuk 3D
dari map
tersebut
3
I.G.N Willy,
D.G
Pratomo,
A.B.
Cahyono
Pembuatan Peta 3 Dimensi
Kampus Its
Sudah
memberikan
perbandingan
antara model
3D dengan
bangunan
aslinya
Belum
ditampilkan
dalam web
4
Komang
Setemen
Sistem Informasi Fasilitas
Kampus Undiksha Melalui
Pengembangan Peta
Interaktif Berbasis Web
Sudah
memberikan
tampilan yang
interaktif
kedapa user
dan sudah
berbasis web
Tampilan dari
peta masih
terlalu datar
dan kurang
menarik
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
Metode
Pengumpulan Data
Studi Pustaka
Kuesioner
Wawancara
Observasi
Studi Literatur
Sejenis
Foto Gedung
Informasi Gedung
Metode RAD
Requirement
Planning
Tujuan Perancangan
Sistem
Kebutuhan Sistem
Sistem Berjalan
Identifikasi Masalah
Sistem Usulan
Workshop Design
Perancangan Proses
Usecase Diagram dan
Narasi Usecase
Activity Diagram
Class Diagram
Sequence Diagram
Perancangan Database
Perancangan User
Interface
Implementation Persiapan Sistem Coding PHP
Javascript
HTML
Pengujuan Sistem
Black box testingKesimpulan dan Saran
Selesai
Analisis Masalah
Fitur – fitur Sistem
AJAX
Logical Record Structure
Gambar 3.4 Kerangka Penelitian
46
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.
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 mata kuliah untuk kepentingan tenaga
fungsional. Komposisi lengkapnya adalah 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 Agama, dan Ilmu Pendidikan
Masyarakat.
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
Bagian Umum
Bagian Organisasi,
Kepegawaian dan
Peraturan Perundang
- undangan
Kepala Biro
Administrasi
Umum dan
Kepegawaian
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 Administrasi Umum dan Kepegawaian
menyelenggarakan fungsi:
54
1. Pelaksanaan administrasi umum;
2. Pelaksanaan administrasi kepegawaian
3. Pelaksanaan administrasi organisasi dan
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
Website
3. Di upload ke website
Pengunjung
5. Memberikan Informasi
4. Melihat Peta Kampus
Staff Umum
1. Master Plan dikelola oleh staff umum
2. Master Plan di ubah
ke dalam bentuk PDF
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 dalam
pengembangan sistem informasi peta kampus berbasis web:
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
Admin
Kabir Umum
Database
Disimpan
PR Umum
Pengembang
Kabag umum Masyarakat
12345
12
20
8
9
6
10 1819
22
15
16
1314
7
11
17
23
21
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
1 Admin
Aktor yang bisa mengakses keseluruhan
yang ada di dalam sistem dan mengelola
peta kampus dan informasi.
2 Pengembang
Aktor yang membutuhkan informasi
seputar kampus dan mendownload data –
data yang diperlukan
60
3 Kabag Umum
Aktor yang dapat mengelola data gedung
dan informasi kegiatan yang diadakan
oleh kampus.
4 PR Umum
PR Umum adalah Pembantu Rektor
bagian umum yang dapat mengakses
menu validasi data
5 Kabir Umum
Kepala Biro umum adalah User yang
dapat mengakses menu validasi data.
6 Masyarakat
Masyarakat merupakan user yang dapat
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 Actor
1 Login Proses yang menggambarkan
kegiatan memasukkan
Pengunjungname dan password
untuk dapat mengakses sistem.
Admin, PR
umum, Kabir
umum, Kabag
umum,
pengembang
61
2 Mengelola
data gedung
Proses yang menggambarkan
kegiatan mengelola data informasi
mengenai fasilitas dari tiap gedung
yang ada di kampus.
Admin, Kabag
umum
3 Mengelola
data fakultas
Proses yang menggambarkan
kegiatan mengelola data informasi
mengenai fasilitas dari tiap
fakultas yang ada di kampus.
Admin, Kabag
umum
4 Mengelola
data Parkir
Proses yang menggambarkan
kegiatan mengelola data informasi
mengenai lokasi parkir di kampus
Admin, Kabag
umum
5 Mengelola
data
download
Proses yang menggambarkan
kegiatan mengelola data yang
dapat di download oleh
pengembang
Admin, Kabag
umum
6 Mengelola
User
Proses yang menggambarkan
kegiatan mengelola data user
Admin
7 Validasi Proses yang menggambarkan
kegiatan memvalidasi data dan
informasi gedung, fakultas, dan
parker
PR umum,
Kabir umum
8 Lihat Peta Proses yang menggambarkan PR umum,
62
kegiatan melihat peta kampus
untuk mendapatkan informasi
Kabir umum,
Masyarakat,
Pengembang
9 Mengelola
Berita
Proses yang menggambarkan
kegiatan mengelola kegiatan yang
akan ditampilkan di dalam sistem
Admin,
10 Lihat Berita Proses yang menggambarkan
kegiatan melihat berita kegiatan
yang diadakan oleh kampus
Pengembang,
Masyarakat
11 Lihat 3D
Model
Proses yang menggambarkan
kegiatan melihat model 3D dari
gedung – gedung kampus UIN
Jakarta
PR umum,
Kabir umum,
Pengembang,
Masyarakat
12 Mengelola
Link Terkait
Proses yang menggambarkan
kegiatan mengelola website apa
saja yang terkait di dalam sistem
Admin
13 Lihat Link
Terkait
Proses yang menggambarkan
kegiatan melihat link – link yang
terkait terhadap sistem
Pengembang,
Masyarakat
14 Mengelola
model 3D
Proses yang menggambarkan
kegiatan mengelola Link Model
3D yang akan dimasukan ke dalam
Admin
63
sistem.
15 Lihat tentang
kami
Proses yang menggambarkan
kegiatan melihat profil tentang
kampus
Pengembang,
Masyarakat
16 Lihat data
download
Proses yang menggambarkan
kegiatan melihat data yang dapat di
download oleh pengembang
Pengembang
17 Registrasi Proses yang menggambarkan
kegiatan user melakukan registrasi
agar dapat mengambil data
Pengembang
18 Download Proses yang menggambarkan
kegiatan user mendownload data
yang diperlukan
Pengembang
19 Logout Proses yang menggambarkan
kegiatan keluar dari sistem
Admin, PR
umum, Kabir
umum, Kabag
umum,
Pengembang
20 Mengelola
tentang kami
Proses yang menggambarkan
kegiatan mengelola profil tentang
UIN Jakarta
Admin
64
System
validasi
lihat peta
lihat data download
lihat berita
lihat link terkait
lihat tentang kami
login
logout
registrasi
download
<<extend>>
<<extend>>
Mengelola data parkir
mengelola data fakultas
mengelola data gedung
mengelola data download
mengelola 3D
mengelola user
mengelola berita
mengelola link terkait
mengelola tentang kami
<<include>>
<<include>>
<<include>>
<<include>>
<<include>>
<<include>>
<<include>>
lihat model 3D
PR Umum
Kabir Umum
Pengembang
Masyarakat
Kabag umum
Admin
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.
Tabel 4.3 Narasi Use Case “Login”
Use Case name Login
Use Case ID 1
Actor Admin, PR Umum, Kabir Umum, Kabag Umum, Pengembang
Description Use Case yang menggambarkan kegiatan aktor memasukkan
username dan password untuk dapat mengakses sistem
Pre-condition -
Pengunjung name dan Password
Typical course
of event
Actor action System response
1. Login 2. Masuk Halaman Login
3. Masukan username
dan Password
4. Klik ―Login‖ 5. Verifikasi
6. Menampilkan Pesan
66
Selamat datang
7. Menampilkan halaman
sesuai role pengguna
sistem
Alternate
course
1. Jika tidak sesuai dengan data Pengunjung maka sistem
akan menampilkan pesan kesalahan
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
of event 1. Klik ―Update
Data‖
2. Menampilkan data yang
akan di update
3. Update data
gedung
4. Klik ―Simpan‖ 5. Verifikasi
6. Data tersimpan ke database
Alternate
course
1 Hapus data, jika Pengunjung ingin menghapus data
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
of event
Actor action System response
1. Klik ―Update
Data‖
2. Menampilkan data yang
akan di update
3. Update data
fakultas
4. Klik ―Simpan‖ 5. Verifikasi
6. Data tersimpan ke database
Alternate
course
1 Hapus data, jika user ingin menghapus data
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
of event
Actor action System response
1. Klik ―Update
Data‖
2. Menampilkan data yang
akan di update
3. Update data
parkir
4. Klik ―Simpan‖ 5. Verifikasi
6. Data tersimpan ke database
Alternate
course
1 Hapus data, jika user ingin menghapus data
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
of event
Actor action System response
1. Klik ―Update
Data‖
2. Menampilkan data yang
akan di update
3. Update data
download
4. Klik ―Simpan‖ 5. Verifikasi
6. Data tersimpan ke database
Alternate
course
1 Hapus data, jika user ingin menghapus data
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
of event
Actor action System response
1. Klik ―Update
Data‖
2. Menampilkan data yang
akan di update
3. Update data user
4. Klik ―Simpan‖ 5. Verifikasi
6. Data tersimpan ke database
Alternate
course
1 Hapus data, jika user ingin menghapus data
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
of event
Actor action System response
1. Klik ―Home‖ 2. Sistem Menampilkan Peta
Kampus dalam Bentuk
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
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
of event
Actor action System response
1. Klik ―Kelola
Berita‖
2. Menampilkan List Berita
3. Update berita
4. Klik ―Simpan‖ 5. Verifikasi
6. Data tersimpan ke database
Alternate
course
1 Hapus data, jika Pengunjung ingin menghapus data
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
of event
Actor action System response
1. Klik ―Berita‖ 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 System response
1. Klik ―View 3D‖ 2. Menampilkan gedung
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
76
Description Use Case yang menggambarkan kegiatan mengelola link –
link yang terkait dalam web
Pre-condition -
-
Actor action System response
1. Klik ―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
course
1 Hapus data, jika Pengunjung ingin menghapus data
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
of event
Actor action System response
1. Klik ―Link
Terkait‖
2. Menampilkan halaman link
terkait
Alternate
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
of event
Actor action System response
1. Klik ―Input
Model‖
2. Menampilkan Form Input
Link
3. Memasukan Link
Model
4. Klik ―Simpan‖ 5. Verifikasi
6. Data tersimpan ke
database
Alternate
course
1 Hapus data, jika Pengunjung ingin menghapus data
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
79
Actor Pengembang dan Masyarakat
Description Use Case yang menggambarkan kegiatan melihat profil
tentang kampus dalam web
Pre-condition -
-
Typical course
of event
Actor action System response
1. Klik ―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
of event
Actor action System response
1. Klik ―Manage
Tentang Kami‖
2. Menampilkan Form
3. Edit Data
4. Klik ―Simpan‖ 5. Verifikasi
6. Data tersimpan ke database
Alternate
course
1 Hapus data, jika Pengunjung ingin menghapus data
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
of event
Actor action System response
1. Login 2. Menampilkan halaman
admin (PR Umum dan
Kabir Umum)
3. Memilih submenu
manage data.
4. Menampilkan data - data
5. Klik ―Edit‖ 6. Menampilkan Form Edit
7. Klik ―Y‖ pada
kolom aktif
8. Update validasi
Alternate
course
7. Pilih ―N‖ jika data tidak di validasi
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 System Response
1. Memilih menu ―Lihat
data‖
2. Menampilkan menu Login
3. Memilih menu
―Registrasi‖
4. Menampilkan form 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
events
Action Actor System Response
1. Memilih menu lihat
data
2. Menampilkan data
download
Alternate courses 2. Terdapat menu download jika ingin mendownload
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
of event
Actor action System response
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 System response
1. Memilih menu
―Logout‖
2. Keluar dari halaman Web
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
Masukan Username dan Password
Melakukan Log-in
Masuk Halaman Utama
Ya
Tidak
Data valid?
Start
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
Simpan
Data Tersimpan
Input
Mengisi form input data gedung
Lengkap
tidak lengkap
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
Simpan
Data Tersimpan
Input
Mengisi form input data fakultas
Lengkap
tidak lengkap
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
Simpan
Data Tersimpan
Input
Mengisi form input data parkir
Lengkap
tidak lengkap
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
Simpan
Data Tersimpan
Input
Mengisi form input data download
Lengkap
tidak lengkap
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
memilih home
menampilkan peta kampus
Start
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
edit hapus
tambah berita
simpan
Start
Finish
tambah
update berita
simpan berita
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
Memilih menu berita
Menampilkan berita
Start
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
Memilih View 3D
Melihat Model 3D
Start
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
Edit Delete
Tambah link terkait
Simpan link terkait
Simpan
Start
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
Memilih Link Terkait
Menampilkan Link Terkait
Start
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
Edit Delete
Tambah Link Model
Simpan Data
Simpan
Start
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
Memilih menu tentang kami
Menampilkan profil kampus
Start
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
Simpan
Edit
Batal
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
simpan
lengkap
tidak lengkap
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
memilih menu logout
Keluar dari sistem
Tidak
Ya
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
Kabir umum
Kabag umum
Pengembang
Gedung
Fakultas
Parkir
Peta
Masyarakat
Link terkait
Model 3D
Data Download
Tentang kami
Berita
Login
107
Users
+id_user+username+password+nama+email+no_telpon+level
+lihat()+edit()+tambah()
PR umum Kabir umum Admin Kabag umumpengembang masyarakat
Login
Peta
+id_peta+judul_peta
+lihat()+edit()+hapus()
parkir
+id_parkir+nama_parkir+lokasi_parkir+kapasitas+longitude+latitude
+tambah()+edit()+hapus()
Fakultas
+id_fakultas+nama_fakultas+fasilitas+no_telpon+website+longitude+latitude
+tambah()+edit()+hapus()
Gedung
+id_gedung+nama_gedung+fasilitas+longitude+latitude
+tambah()+edit()+hapus()
Data Download
+id_download+nama_data+data
+tambah()+edit()+hapus()
1
1..*
Model 3D
+id_model+nama_model+link_model
+tambah()+edit()+hapus()
Berita
+id_berita+judul_berita+isi_berita
+tambah()+edit()+hapus()
Link Terkait
+id_linkterkait+nama_linkterkait+gambar
+tambah()+edit()+hapus()
Tentang Kami
+id_tentangkami+judul+isi_tentangkami
+edit()+hapus()
1..*
1
1..*
1
1..*
1
1
1..*
1..*
1
1..*
1
1..*
1
1..*
1
1..*
1
1..*
1
1..*
1
1..*
1
1..*
1
1..*
1
1..*
1
1..*
1
Gambar 4.25 Class Diagram
108
4.2.1.4 Sequence Diagram
1. Login
: Aktor
interface user
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
: Aktor
interface gedung
1 : memilih menu input data gedung()
2 : menampilkan form input data gedung()
3 : input data gedung()
4 : simpan data gedung()
5 : data tersimpan()6 : menampilkan pesan berhasil()
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()12 : update data gedung()
13 : data terupdate()14 : menampilkan pesan sukses()
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
: Aktor
interface fakultas
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
: Aktor
interface parkir
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
: Aktor
interface data download
1 : memilih menu input data download()
2 : menampilkan form input data download()
3 : input data download()
4 : simpan data download()
5 : data tersimpan()6 : menampilkan pesan berhasil()
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()12 : update data download()
13 : data terupdate()14 : menampilkan pesan sukses()
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
: Aktor
interface model 3D
1 : memilih menu input data model()
2 : menampilkan form input data model()
3 : input data model()
4 : simpan data model()
5 : data tersimpan()6 : menampilkan pesan berhasil()
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()12 : update data model()
13 : data terupdate()14 : menampilkan pesan sukses()
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
: Aktor
interface user
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
: Aktor
interface peta
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
: Aktor
interface berita
1 : memilih menu input berita()
2 : menampilkan form input berita()
3 : input berita()
4 : simpan berita()
5 : data tersimpan()6 : menampilkan pesan berhasil()
7 : memilih menu manage berita()
8 : menampilkan berita()
9 : memilih edit berita()
10 : menampilkan form edit berita()
11 : edit berita()12 : update berita()
13 : data terupdate()14 : menampilkan pesan sukses()
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
: Aktor
interface berita
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
: Aktor
interface model 3D
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
: Aktor
interface link terkait
1 : memilih menu input link terkait()
2 : menampilkan form input link terkait()
3 : input link terkait()
4 : simpan link terkait()
5 : data tersimpan()6 : menampilkan pesan berhasil()
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()12 : update link terkait()
13 : data terupdate()14 : menampilkan pesan sukses()
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
: Aktor
interface link terkait
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
: Aktor
interface tentang kami
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
: Aktor
interface tentang kami
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.
123
16. Logout
: Aktor
logout
1 : pilih logout()
2 : proses logout()
3 : logout berhasil()
4 : menampilkan halaman utama()
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
: Aktor
interface user
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
: Aktor
interface data download
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
: Aktor
interface parkir gedung fakultas data download
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.
127
20. Download Data
: Aktor
interface data download login
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:
User
+id_user(PK)
berita
+id_berita(PK)
+id_user(FK)+id_gedung(FK)
model 3D
+id_model(PK)
+id_user(FK)
link terkait
+id_linkterkait(PK)
+id_user(FK)
tentang kami
+id_tentangkami(PK)
+id_user(FK)
data download
+id_download(PK)
+id_user(FK)
fakultas
+id_fakultas(PK)
+id_user(FK)
Parkir
+id_parkir(PK)
+id_user(FK)
gedung
+id_gedung(PK)
+id_user(FK)
Gambar 4.46 Logical Record Structure
4.2.3 Perancangan Database
a. Tabel akses database
Tabel 4.24 Tabel Akses Database
No Nama aktor
Nama Tabel
Gedung Berita Fakultas Model
3D
Link
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
No Nama aktor
Nama Tabel
Tentang
Kami
Data
Downlo
ad
User
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
No Nama Kolom
Tipe
Data
Panjang Keterangan
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 Keterangan
1 Id_Link INT 3 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
No Nama Kolom
Tipe
Data
Panjang Keterangan
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
No Nama Kolom
Tipe
Data
Panjang Keterangan
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_
parkir
Varchar 3 Jumlah batas 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 Keterangan
1 Id_download INT 2 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 Keterangan
1 Id_tentangka
mi
INT 2 Nomor id tentang
kami
2 Judul_tentan
gkami
Varchar 100 Judul tentang
kami
3 Isi_tentangka
mi
Text - Isi profil tentang
kami
4.2.4 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
Input Data
Fakultas
Input Data Parkir
Input Link Terkait
Input Berita
Kelola Data
Gedung
Kelola Data
Fakultas
Kelola Data Parkir
Kelola Link Terkait
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
Input Data
Fakultas
Input Data Parkir
Input Berita
Input Link Model
Kelola Data
Gedung
Kelola Data
Fakultas
Kelola Data Parkir
Kelola Berita
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 Tentang KamiData Download
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 Aksi Hasil yang Diharapkan Hasil
1. Login Input username dan
password yang benar
lalu klik Login
Masuk ke halaman admin
sesuai role pengguna dengan
username dan password yang
benar
Berhasil
2. Login Input username dan
password yang salah
lalu klik Login
Gagal masuk halaman Admin Berhasil
3. Menu kelola
data gedung
Klik Manage data
kemudian manage
gedung
Menampilkan data gedung
yang akan di edit atau di
hapus
Berhasil
4. Menu kelola
data Fakultas
Klik Manage data
kemudian manage
fakultas
Menampilkan data fakultas
yang akan di edit atau di
hapus
Berhasil
5. Menu kelola
data parkir
Klik Manage data
kemudian manage
parkir
Menampilkan data parkir
yang akan di edit atau di
hapus
Berhasil
6. Menu kelola
berita
Klik Manage data
kemudian manage
Menampilkan data berita
yang akan di edit atau di
Berhasil
146
berita hapus
7. Menu kelola
data download
Klik Manage Data
download
Menampilkan list data
download
Berhasil
8. Menu kelola
model
Klik Manage data
kemudian manage
model
Menampilkan data model
yang akan di edit atau di
hapus
Berhasil
9. Menu Validasi Klik manage data Menampilkan list data
gedung, fakultas, parkir, dan
data download
Berhasil
10. Menu kelola
tentang kami
Klik manage data
tentang kami
Menampilkan profil UIN
Jakarta
Berhasil
Tabel 4.35 Pengujian Sistem Public User
No. Unit program Aksi Hasil yang
Diharapkan
Hasil
1. Menu Home Klik Home Masuk halaman Home
dan Peta Kampus
Berhasil
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
Kami
Klik Tentang
Kami
Menampilkan profil
tentang UIN Jakarta
Berhasil
5. Menu Terkait Klik Terkait Menampilkan link
yang terkait dengan
UIN Jakarta
Berhasil
6. Menu Data
Download
Klik Data
Download
Menampilkan list data
download
Berhasil
7. Menu Registrasi Klik Menu Data
Download,
kemudian klik
Registrasi
Menampilkan Form
registrasi
Berhasil
8. Menu tentang kami Klik menu tentang
kami
Menampilkan profil
UIN Jakarta
Berhasil
148
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
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 APLIKASI INFORMASI SPBU
TERDEKAT BERBASIS ANDROID (STUDI KASUS: 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-sketchup-
free.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-sketchup-
bahasa.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 Jumlah Responden Presentase
Tidak Pernah 0 0%
Jarang 0 0%
Cukup Sering 20 100%
Sering 0 0%
Sangat Sering 0 0%
Total 20 100%
2. Apakah anda tahu semua lokasi fakultas dan fasilitas lainnya yang ada di UIN
Syarif Hidayatullah Jakarta?
Pilihan Jumlah Responden Presentase
Sangat Tidak Tahu 0 0%
Tidak Tahu 1 5%
Tahu 4 20%
Cukup Tahu 11 55%
Sangat Tahu 4 20%
Total 20 100%
3. Apakah anda pernah melihat peta kampus UIN atau menggunakan sistem peta
kampus untuk mencari lokasi fakultas di UIN Jakarta?
Pilihan Jumlah Responden Presentase
Tidak Pernah 8 40%
Pernah 3 15%
Cukup Pernah 8 40%
Sering 1 5%
Sangat Sering 0 0%
Total 20 100%
4. Menurut Anda, apakah informasi yang diberikan sudah cukup membantu
dalam memberikan informasi mengenai lokasi dan fasilitas UIN Jakarta?
Pilihan Jumlah Responden Presentase
Sangat Tidak Setuju 5 25%
Tidak Setuju 3 15%
Cukup Setuju 9 45%
Setuju 2 10%
Sangat Setuju 1 5%
Total 20 100%
5. Apakah sistem yang ada cukup mudah dan menarik untuk digunakan?
Pilihan Jumlah Responden Presentase
Sangat Tidak Setuju 5 25%
Tidak Setuju 7 35%
Cukup Setuju 3 15%
Setuju 3 15%
Sangat Setuju 2 10%
Total 20 100%
6. Apakah anda pernah menggunakan Google Maps atau Google Earth?
Pilihan Jumlah Responden Presentase
Tidak Pernah 1 5%
Pernah 1 5%
Cukup Pernah 4 20%
Sering 8 40%
Sangat Sering 6 30%
Total 20 100%
7. Menurut Anda apakah Google Maps dan Google Earth sangat menarik untuk
digunakan?
Pilihan Jumlah Responden Presentase
Sangat Tidak Menarik 0 0%
Tidak Menarik 0 0%
Cukup Menarik 4 20%
Menarik 5 25%
Sangat Menarik 11 55%
Total 20 100%
8. Apakah Anda pernah mengetahui atau mendengar tentang model bangunan 3D
(tiga dimensi)?
Pilihan Jumlah Responden Presentase
Sangat Tidak Pernah 1 5%
Tidak Pernah 5 25%
Cukup Pernah 4 20%
Pernah 8 40%
Sangat Pernah 2 10%
Total 20 100%
9. Pernahkah anda melihat model bangunan dengan 3D (tiga dimensi)?
Pilihan Jumlah Responden Presentase
Sangat Tidak Pernah 1 5%
Tidak Pernah 5 25%
Cukup Pernah 2 10%
Sering 10 50%
Sangat Sering 2 10%
Total 20 100%
10. Menurut Anda, apakah model 3D (tiga dimensi) cukup menarik untuk Anda?
Pilihan Jumlah Responden Presentase
Sangat Tidak Menarik 0 0%
Tidak Menarik 1 5%
Cukup Menarik 1 5%
Menarik 8 40%
Sangat Menarik 10 50%
Total 20 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 Jumlah Responden Presentase
Sangat Tidak Setuju 0 0%
Tidak Setuju 1 5%
Cukup Setuju 0 0%
Setuju 4 20%
Sangat Setuju 15 75%
Total 20 100%
TAMPILAN APLIKASI
PUBLIK (Masyarakat Dan Pengembang)
1. Halaman Utama
2. Model 3D
3. Berita
4. Tentang Kami
5. Data Download
6. Registrasi
7. List data download
ADMIN
8. Tampilan Admin
9. Input data fakultas
10. Input data download
11. Manage data user
12. Manage data gedung
13. Manage data download
KODE PROGRAM
<!DOCTYPE html PUBLIC "-
//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/
xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtm
l">
<script type="text/javascript"
src="jquery-1.7.1.min.js"></script>
<title>Peta Kampus UIN</title>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link
href="Admin/Style/awal_style.css"
rel="stylesheet" type="text/css" />
<link
href="Admin/Style/popup_style.css"
rel="stylesheet" type="text/css" />
</head>
<body>
<table width="100%" border="0"
cellspacing="0" cellpadding="0"
style="height:100%">
<tr>
<td align="center" valign="top">
<table width="100%" border="0"
cellspacing="0" cellpadding="0"
style="height:100%">
<tr>
<td height="30" align="left"
class="header">
<table width="100%" border="0"
cellspacing="0" cellpadding="0">
<tr>
<td width="671" height="10"
align="left"><img
src="Image/Header.jpg"/></td>
<td width="457"
align="right"><table width="100%"
border="0" cellspacing="1"
cellpadding="5">
<tr>
<td align="right"><span
class="text_1"></span></td>
</tr>
<tr>
<td align="right"><span
class="text_1"
id="jamku">selamat</span></td>
</tr>
<tr>
<td
align="right"> </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td height="5"
bgcolor="#003366"/>
</tr>
<tr>
<td height="10"
bgcolor="#0066FF"><table
width="100%" border="0"
cellpadding="2" cellspacing="0"
class="judul_subhal4">
<tr>
<td height="50"
align="center"><?php
require("master_menu.php"); ?></td>
<td align="right"> </td>
</tr>
</table></td>
</tr>
<tr>
<td>
<table width="100%" border="0"
cellpadding="10" cellspacing="10"
bgcolor="#0066FF"
style="height:100%">
<tr>
<td width="200"
align="center" valign="top"
bgcolor="#0066FF">
<table width="100%"
border="0" cellspacing="0"
cellpadding="0">
<tr>
<td
class="text_1">Terkini</td>
</tr>
<tr>
<td class="text_1"><table
width="100%" border="0"
cellspacing="0" cellpadding="0">
<tr>
<td><table width="100%"
border="0" cellspacing="2"
cellpadding="5">
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="700"
bgcolor="#0000FF"
id="boxiframe_1"> </td>
</tr>
</table></td>
<td align="center"
valign="top" bgcolor="#0066FF"
id="master_konten">
<table
width="100%" border="0"
cellspacing="0" cellpadding="0"
style="height:100%">
<tr>
<td height="107"
bgcolor="#0066FF" class="intro-
2"> </td>
</tr>
<tr>
<td id="target"><?php require
"Home.php" ?></td>
</tr>
</table>
</td>
</tr>
</table></td>
</tr>
<tr>
<td height="60"
bgcolor="#0033FF"><?php
require("Footer.php"); ?></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
<div id="popupContact"></div>
<div id="backgroundPopup"></div>
<?php require("load_java.php"); ?>
<script language="JavaScript"
type="text/javascript">
initialize();
</script>
<link
href="../Belajarweb2/Admin/Style/awa
l_style.css" rel="stylesheet"
type="text/css" />
<link rel="stylesheet" type="text/css"
href="Admin/modul/style.css" />
<script
src="https://maps.googleapis.com/map
s/api/js?v=3.exp&sensor=false&librari
es=places,drawing,weather,visualizatio
n,geometry&language=id,marker"></s
cript>
<script type="text/javascript"
src="jquery-1.4.3.min.js"></script>
<script type="text/javascript"
src="jquery-1.7.1.min.js"></script>
<script type="text/javascript"
src="http://geoxml3.googlecode.com/s
vn/branches/polys/geoxml3.js"></scrip
t>
<script type="text/javascript">
//inisialisasi variabel tampung
var peta;
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 jumlahx = new Array();
var sudahx = new Array();
var namastox = new Array();
var kodestox = new Array();
var alamatstox = new Array();
var namarkx = 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();
var rusakx = new Array();
var wsuccx = new Array();
var kosongx = new Array();
var idrkx = new Array();
var websitestox = new Array();
var beritax = new Array();
var fasilitasstox = new Array();
var fasilitasx = new Array();
var jmlbatasx = new Array();
var i;
var url;
var gambar_tanda;
//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);
var geoXml = new
geoXML3.parser(map: peta);
/** letak file kml */
geoXml.parse('UIN_JAKART
A.kml');
google.maps.event.addListener
(peta, "mousemove", function(pt)
var zoomLevel = peta.getZoom();
//var lat = FN_ROUND(
pt.latLng.lat(),3);
// lng = FN_ROUND(
pt.latLng.lng(),3);
document.getElementById("boxlatlon"
).innerHTML = 'Lat : ' +
pt.latLng.lat() + ', Lon : ' +
pt.latLng.lng() + ' / Zoom : ' +
zoomLevel;
);
google.maps.event.addListener(peta,'cl
ick',function(event)
//kasihtanda(event.latLng);
);
ambildatabase('awal');
$(document).ready(function()
$("#tombol_simpan").click(function()
var x = $("#x").val();
var y = $("#y").val();
var nama =
$("#nama").val();
var alamat =
$("#alamat").val();
var website =
$("#website").val();
//var kec =
$("#kec").val();
//var daerah =
$("#daerah").val();
//var jumlah =
$("#jumlah").val();
//var sudah =
$("#sudah").val();
$("#loading").show();
$.ajax(
url: "simpanperum.php",
data:
"x="+x+"&y="+y+"&nama="+nama+
"&alamat="+alamat+"&kec="+kec+"$
website="+website,
cache: false,
success: function(msg)
alert(msg);
$("#loading").hide();
$("#x").val("");
$("#y").val("");
$("#nama").val("");
$("#alamat").val("");
$("#website").val("");
//$("#kec").val("");
//$("#daerah").val("");
//$("#jumlah").val("");
//$("#sudah").val("");
ambildatabase('akhir');
);
);
$("#tutup").click(function()
$("#jendelainfo").fadeOut();
);
$("#tutup1").click(function()
$("#jendelainfo1").fadeOut();
);
$("#tutup2").click(function()
$("#jendelainfo2").fadeOut();
);
$("#tutup3").click(function()
$("#jendelainfo3").fadeOut();
);
);
function set_icon(jenisnya)
switch(jenisnya)
case "home":
gambar_tanda =
'icon/company.png';
break;
case "airport":
gambar_tanda =
'icon/airport.png';
break;
case "masjid":
gambar_tanda =
'icon/mosque.png';
break;
function ambildatabase(akhir)
if(akhir=="akhir")
url =
"ambildataperum.php?akhir=1";
else
url =
"ambildataperum.php?akhir=0";
$.ajax(
url: url,
dataType: 'json',
cache: false,
success: function(msg)
for(i=0;i<msg.wilayah.petak.length;i+
+)
namaperumx[i] =
msg.wilayah.petak[i].nama;
alamatx[i] =
msg.wilayah.petak[i].alamat;
websitex[i] =
msg.wilayah.petak[i].website;
beritax[i]
= msg.wilayah.petak[i].berita;
//daerahx[i] =
msg.wilayah.petak[i].daerah;
//jumlahx[i] =
msg.wilayah.petak[i].jumlah;
//sudahx[i] =
msg.wilayah.petak[i].sudah;
set_icon(msg.wilayah.petak[i].jenis);
var point = new
google.maps.LatLng(
parseFloat(msg.wilayah.petak[i].x),
parseFloat(msg.wilayah.petak[i].y));
tanda = new
google.maps.Marker(
position: point,
map: peta,
icon: 'icon/company2.png'
);
setinfo(tanda,i);
);
function ambildatasto(akhir)
if(akhir=="akhir")
url = "ambildatasto.php?akhir=1";
else
url = "ambildatasto.php?akhir=0";
$.ajax(
url: url,
dataType: 'json',
cache: false,
success: function(msg)
for(i=0;i<msg.wilayah.petak.length;i+
+)
namastox[i] =
msg.wilayah.petak[i].nama;
kodestox[i] =
msg.wilayah.petak[i].kode;
alamatstox[i] =
msg.wilayah.petak[i].alamat;
websitestox[i] =
msg.wilayah.petak[i].website;
fasilitasstox[i] =
msg.wilayah.petak[i].fasilitas;
set_icon(msg.wilayah.petak[i].jenis);
var point = new
google.maps.LatLng(
parseFloat(msg.wilayah.petak[i].x),
parseFloat(msg.wilayah.petak[i].y));
tanda = new
google.maps.Marker(
position: point,
map: peta,
icon: 'icon/office-
building-icon.png'
);
setinfosto(tanda,i);
);
function ambildatark(akhir)
if(akhir=="akhir")
url = "ambildatark.php?akhir=1";
else
url = "ambildatark.php?akhir=0";
$.ajax(
url: url,
dataType: 'json',
cache: false,
success: function(msg)
for(i=0;i<msg.wilayah.petak.length;i+
+)
namarkx[i] =
msg.wilayah.petak[i].nama;
alamatrkx[i] =
msg.wilayah.petak[i].alamat;
jmlbatasx[i] =
msg.wilayah.petak[i].jmlbatas;
set_icon(msg.wilayah.petak[i].jenis);
var point = new
google.maps.LatLng(
parseFloat(msg.wilayah.petak[i].x),
parseFloat(msg.wilayah.petak[i].y));
tanda = new
google.maps.Marker(
position: point,
map: peta,
icon: 'icon/rk.png'
);
setinfork(tanda,i);
);
function ambildatadp(akhir)
if(akhir=="akhir")
url = "ambildatadp.php?akhir=1";
else
url = "ambildatadp.php?akhir=0";
$.ajax(
url: url,
dataType: 'json',
cache: false,
success: function(msg)
for(i=0;i<msg.wilayah.petak.length;i+
+)
namadpx[i] =
msg.wilayah.petak[i].nama;
alamatx[i] =
msg.wilayah.petak[i].alamat;
kapasitasx[i] =
msg.wilayah.petak[i].kapasitas;
isix[i] =
msg.wilayah.petak[i].isi;
rusakx[i]
= msg.wilayah.petak[i].rusak;
wsuccx[i] =
msg.wilayah.petak[i].wsucc;
kosongx[i] =
msg.wilayah.petak[i].kosong;
idrkx[i]
= msg.wilayah.petak[i].idrk;
set_icon(msg.wilayah.petak[i].jenis);
var point = new
google.maps.LatLng(
parseFloat(msg.wilayah.petak[i].x),
parseFloat(msg.wilayah.petak[i].y));
tanda = new
google.maps.Marker(
position: point,
map: peta,
icon: 'icon/dp.png'
);
setinfodp(tanda,i);
);
function setjenis(jns)
jenis = jns;
function setinfosto(petak, nomor)
google.maps.event.addListener(petak,
'click', function()
$("#jendelainfo1").fadeIn();
$("#teksnamasto").html(namastox[no
mor]);
$("#teksalamatsto").html(alamatstox[n
omor]);
$("#tekskode").html(kodestox[
nomor]);
$("#tekswebsitesto").html(web
sitestox[nomor]);
$("#teksfasilitassto").html(fasil
itasstox[nomor]);
);
function setinfork(petak, nomor)
google.maps.event.addListener(petak,
'click', function()
$("#jendelainfo2").fadeIn();
$("#teksnamark").html(namarkx[nomo
r]);
$("#teksalamatrk").html(alamatrkx[no
mor]);
$("#teksjumlah").html(jmlbatas
x[nomor]);
);
function setinfodp(petak, nomor)
google.maps.event.addListener(petak,
'click', function()
$("#jendelainfo3").fadeIn();
$("#teksnamadp").html(namadpx[nom
or]);
$("#teksalamatdp").html(alamatdpx[no
mor]);
$("#tekskapasitas").html(kapas
itasx[nomor]);
$("#teksisi").html(isix[nomor])
;
$("#teksrusak").html(rusakx[no
mor]);
$("#tekswsucc").html(wsuccx[
nomor]);
$("#tekskosong").html(kosong
x[nomor]);
$("#teksidrk").html(idrkx[nomor]);
);
function setinfo(petak, nomor)
google.maps.event.addListener(petak,
'click', function()
$("#jendelainfo").fadeIn();
$("#teksnama").html(namaperumx[no
mor]);
$("#teksalamat").html(alamatx[nomor]
);
$("#tekswebsite").html(website
x[nomor]);
$("#tekskec").html(kecx[nomor]);
$("#teksdaerah").html(daerahx[
nomor]);
$("#teksjumlah").html(jumlahx
[nomor]);
$("#tekssudah").html(sudahx[n
omor]);
$("#teksberita").html(beritax[n
omor]);
);
</script>
<body onLoad="peta_awal()">
<table id="jendelainfo" border=1
cellpadding="4" cellspacing="0"
style="border-collapse: collapse"
bordercolor="#FFCC00" width="300"
height="136">
<tr>
<td><td width="248"
bgcolor="#000000"
height="19"><font color=white><span
id="teksnama"></span></font></td>
<td><td width="30"
bgcolor="#000000" height="19">
<p align="center"><font
color="#FFFFFF"><a
href="edit_perum.php"
target="_blank" value="perum"
onClick="set_icon(this.value)"><b><i
mg src="img/edit16x16.png"
/></b></a></font></td>
<td><td width="30"
bgcolor="#000000" height="19">
<p align="center"><font
color="#FFFFFF"><a
style="cursor:pointer"
id="tutup"><b>X</b></a></font></td
>
</tr>
<tr>
<td><td width="300"
bgcolor="#FFCC00" height="19"
valign="top" colspan="2"><p
align="center">Alamat : <span
id="teksalamat"></span></td>
</tr>
<tr>
<td><td width="300"
bgcolor="#FFCC00" height="19"
valign="top" colspan="2"><p
align="center">Website: <span
id="tekswebsite"></span></td>
</tr>
<tr>
<td><td width="300"
bgcolor="#FFCC00" height="19"
valign="top" colspan="2"><p
align="center">Berita: <span
id="teksberita"></span></td>
</tr>
</table>
<table id="jendelainfo1" border=1
cellpadding="4" cellspacing="0"
style="border-collapse: collapse"
bordercolor="#FFCC00" width="300"
height="136">
<tr>
<td><td width="248"
bgcolor="#000000"
height="19"><font color=white><span
id="teksnamasto"></span></font></td
>
<td><td width="30"
bgcolor="#000000" height="19">
<p align="center"><font
color="#FFFFFF"><a
href="edit_sto.html" target="_blank"
value="sto"
onClick="set_icon(this.value)"><b><i
mg
src="img/edit16x16.png"></b></a></f
ont></td>
<td><td width="30"
bgcolor="#000000" height="19">
<p align="center"><font
color="#FFFFFF"><a
style="cursor:pointer"
id="tutup1"><b>X</b></a></font></t
d>
</tr>
<tr>
<td><td width="300"
bgcolor="#FFCC00" height="19"
valign="top" colspan="2"><p
align="center">Lokasi : <span
id="teksalamatsto"></span></td>
</tr>
<tr>
<td><td width="300"
bgcolor="#FFCC00" height="19"
valign="top" colspan="2"><p
align="center">No Telpon : <span
id="tekskode"></span></td>
</tr>
<tr>
<td><td width="300"
bgcolor="#FFCC00" height="19"
valign="top" colspan="2"><p
align="center">Website : <span
id="tekswebsitesto"></span></td>
</tr>
<tr>
<td><td width="300"
bgcolor="#FFCC00" height="19"
valign="top" colspan="2"><p
align="center">Fasilitas : <span
id="teksfasilitassto"></span></td>
</tr>
</tr>
<tr>
</table>
<table id="jendelainfo2" border=1
cellpadding="4" cellspacing="0"
style="border-collapse: collapse"
bordercolor="#FFCC00" width="300"
height="136">
<tr>
<td><td width="248"
bgcolor="#000000"
height="19"><font color=white><span
id="teksnamark"></span></font></td
>
<td><td width="30"
bgcolor="#000000" height="19">
<p align="center"><font
color="#FFFFFF"><a
href="edit_rk.html" target="_blank"
value="rk"
onClick="set_icon(this.value)"><b><i
mg
src="img/edit16x16.png"></b></a></f
ont></td>
<td><td width="30"
bgcolor="#000000" height="19">
<p align="center"><font
color="#FFFFFF"><a
style="cursor:pointer"
id="tutup2"><b>X</b></a></font></t
d>
</tr>
<tr>
<td><td width="300"
bgcolor="#FFCC00" height="19"
valign="top" colspan="2"><p
align="center">Lokasi : <span
id="teksalamatrk"></span></td>
</tr>
<tr>
<td><td width="300"
bgcolor="#FFCC00" height="19"
valign="top" colspan="2"><p
align="center">Kapasistas : <span
id="teksjumlah"></span></td>
</tr>
</table>
<table id="jendelainfo3" border=1
cellpadding="4" cellspacing="0"
style="border-collapse: collapse"
bordercolor="#FFCC00" width="300"
height="136">
<tr>
<td><td width="248"
bgcolor="#000000"
height="19"><font color=white><span
id="teksnamadp"></span></font></td
>
<td><td width="30"
bgcolor="#000000" height="19">
<p align="center"><font
color="#FFFFFF"><a
href="edit_dp.html" target="_blank"
value="dp"
onClick="set_icon(this.value)"><b><i
mg
src="img/edit16x16.png"></b></a></f
ont></td>
<td><td width="30"
bgcolor="#000000" height="19">
<p align="center"><font
color="#FFFFFF"><a
style="cursor:pointer"
id="tutup3"><b>X</b></a></font></t
d>
</tr>
<tr>
<td><td width="300"
bgcolor="#FFCC00" height="19"
valign="top" colspan="2"><p
align="center">Alamat : <span
id="teksalamatdp"></span></td>
</tr>
<tr>
<td><td width="300"
bgcolor="#FFCC00" height="19"
valign="top" colspan="2"><p
align="center">Kapasitas : <span
id="tekskapasitas"></span></td>
</tr>
</table>
<table width="100%" border="0"
cellspacing="0" cellpadding="0"
style="height:100%">
<tr>
<td height="40" bgcolor="#993300"
class="judul_subhal3">
<table width="100%" border="0"
cellspacing="0" cellpadding="0">
<tr>
<td width="40"><img
src="Image/map.png" width="40"
height="42"/></td>
<td width="700">Peta Kampus
UIN Jakarta</td>
<td>
</td>
</tr>
</table></td>
</tr>
<tr>
<td>
<table width="100%"
border="0" cellspacing="0"
cellpadding="0"
style="height:100%">
<tr>
<td>
<table width="100%" border="0"
cellspacing="0" cellpadding="0">
<tr>
<td width="200" height="500"
bgcolor="#0033FF" class="text_2">
<table width="100%" border="0"
cellspacing="0" cellpadding="0"
align="center" style="height:100%">
<tr>
<td><table width="100%"
border="0" cellspacing="0"
cellpadding="0">
<tr>
<td bgcolor="#FFFFFF">
<table width="100%" border="0"
cellspacing="4" cellpadding="2">
<tr>
<td width="20"
bgcolor="#00CCFF"
class="text_1">Legenda</td>
</tr>
</table>
<table width="100%" border="0"
cellspacing="4" cellpadding="2">
<tr>
<td width="20"
bgcolor="#00CCFF"> </td>
<td
class="text_2"><p><strong>Kampus
Satu</strong></p></td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#99CCCC">
<table width="100%" border="0"
cellspacing="4" cellpadding="2">
<tr>
<td width="20"
bgcolor="#FF6666"> </td>
<td
class="text_2"><p><strong>Kampus
Dua</strong></p></td>
</tr>
<tr>
<td width="20"
background="icon/company2.png">&
nbsp;</td>
<td
class="text_2"><p><strong>Fasilitas
Gedung</strong></p></td>
</tr>
<tr>
<td width="20"
background="icon/office-building-
icon.png">
</td>
<td><button id="tombol_sto"
value="sto"
onClick="ambildatasto('awal')">Tamp
ilkan Fakultas</button></td>
</tr>
<tr>
<td width="20"
background="icon/rk.png"></td>
<td>
<button id="tombol_rk"
value="rk"
onClick="ambildatark('awal')">Tampil
kan Parkir</button>
</td>
</tr>
<tr>
<td width="20"></td>
<td><img
src="Image/compass-hi.png"
width="100" height="100">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="500">
</td>
</tr>
</table>
</td>
<td height="400"
id="petaku"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#000066"
class="redaksi_1"
id="boxlatlon"> </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
