Web Mapping Mapfile Chameleon 1.

Gambar 3.58 Tampilan Tabel Fuk Non Spasial

3.5 Web Mapping

Webmapping adalah proses menampilkan peta spasial ke dalam internet. Proses webmapping menggunakan software ms4w yaitu software mapserver yang dikhususkan bagi sistem operasi windows dan menggunakan chameleon sebagai framework nya. Hal pertama ialah menginstall ms4w. Software ini dapat di download di http:mapserver.gis.umn.edudo wnload , aplikasi ini dapat di download dalam versi lengkap paket sudah termasuk aplikasi apache webserver, php, chameleon, pgsql, gmap seperti file ms4w_1.5.5.zip atau ms4w_1.0.1.zip maupun file tunggal hanya aplikasi ms4w- nya saja seperti file ms4w-4.4.0- win32-php4.3.7.zip. Ms4w yang digunakan pada pengembangan ini adalah ms4w_2.2.7.zip. 1. Untuk meng-install ms4w ekstrak file ms4w_2.2.7.zip pada direktori C:\ sehingga menjadi C:\ms4w, setelah itu double-click pada apache- install.bat untuk instalasi aplikasi web servernya. Ekstrak semua file zip dari modul yang ada ke drive C:\ chameleon_ms4w-2.0.zip dan file .zip lainnya. Modul-modul itu akan secara otomatis tersimpan pada C:\ms4w\apps 2. Untuk memeriksa hasil instalasi jalankan webbrowser IE, firefox, opera atau aplikasi webbrowser lainnya dengan mengetikkan http:localhost Kita dapat menggunakan program Apache Monitor untuk mengontrol web server Apache dengan lebih mudah. Jalankan program ApacheMonitor.exe pada direktori C:\ms4w\Apache\bin klik kanan lalu pilih Create Shortcut.

3.6 Mapfile

Mapfile digunakan untuk menampilkan data spasial yaitu peta Jakarta Selatan yang telah didigitasi bersama dengan file- file .shp lainnya. Jika ingin menggunaken template dalam penyajiannya, buat template dalam format htmhtml template.html. Di dalam WEB tambahkan baris TEMPLATE.

3.7 Chameleon 1.

Web Desain a. Perancangan web Perancangan web adalah merancang tampilan dari tiap halaman web dan fungsi-fungsi yang akan ditampilkan. Fungsi yang tersedia yaitu fungsi daftar, login, search, tambah data, edit data dan hapusdelete data. Rangkaian perancangan layar pada web secara berurut disusun sebagaimana terlihat pada gambar-gambar di bawah ini. • Rancangan layar Home SUKU DINAS KESEHATAN MASYARAKAT JAKARTA SELA Gambar 3.59 Tampilan layar Home • Rancangan layar Profil Gambar 3.60 Tampilan layar Profil • Rancangan layar Peta FUK Gambar 3.61 Tampilan layar Peta FUK • Rancangan layar Info FUK SUKU DINAS KESEHATAN MASYARAKAT JAKARTA SELATAN DAFTAR MENU Daftar Sub Menu Profil FOOTER Profil Jakarta Selatan Profil Bag. Tata Usaha Sudin Kemas Profil Kecamatan Jakarta Selatan search Berita JUDUL PETA Legenda Update Peta Utama Peta Referen Skala X, Y Zoom In Zoom Ou Full Exte Recente Drag Query SUKU DINAS KESEHATAN MASYARAKAT JAKARTA SELATAN DAFTAR MENU FOOTER Info FUK search Berita Gambar 3.62 Tampilan layar Info FUK • Rancangan layar Saran Gambar 3.63 Tampilan layar Saran • Rancangan layar Admin Gambar 3.64 Tampilan layar Admin • Rancangan layar User Gambar 3.65 Tampilan layar User • Rancangan layar Admin Saran Gambar 3.66 Tampilan layar Admin Saran • Rancangan layar Tambah Saran SUKU DINAS KESEHATAN MASYARAKAT JAKARTA SELATAN DAFTAR MENU FOOTER Silahkan Masukkan Saran dan Informasi yang Anda miliki search Berita Nama Asal Tanggal dd-mm-yyyy Saran Ok Batal SUKU DINAS KESEHATAN MASYARAKAT JAKARTA SELATAN DAFTAR MENU FOOTER Ini adalah halaman khusus bagi admin Silahkan masukkan data yang telah Anda miliki search Berita USERNAME PASSWORD Masuk SUKU DINAS KESEHATAN MASYARAKAT JAKARTA Home User Saran Galeri Laporan Keluar User Tambah User Berikut ini adalah daftar admin yang terdaftar No Nama Password 2 3 yuli admin yuli admin1 Hapus Hapus SUKU DINAS KESEHATAN MASYARAKAT JAKARTA Home User Saran Galeri Laporan Keluar Saran Tambah Saran Saran Tanggal Hapus Hapus SUKU DINAS KESEHATAN MASYARAKAT JAKARTA SELATAN Home User Saran Galeri Laporan Keluar Saran Nama Asal Tanggal dd-mm-yyyy Saran Ok Batal Gambar 3.67 Tampilan layar Tambah Saran • Rancangan layar Laporan Gambar 3.68 Tampilan layar Laporan b. Pembuatan web Dalam hal pembuatan web menggunakan software Macromedia Dreamweaver MX, berikut adalah tampilan jendela Macromedia Dreamweaver MX saat pertama kali digunakan. Gambar 3.69 Tampilan Macromedia Dreamweaver MX • Membuat halaman web pertama 1. Dari menu File pilih New. Insert Bar Document Tool Bar Coding Tag Property Inspector Design SUKU DINAS KESEHATAN MASYARAKAT JAKARTA SELATAN LAPORAN SARAN Jl. Radio I No. 8 Kebayoran Baru Telp. 021 7395287, 021 7395344, Fax. 021 7251373 Periode Nama : Asal : Saran : Status : Bagian : Keterangan : Status = Apakah saran ditolak, dipertimbangkan atau diterima Bagian = Ke bagiandepartemen mana saran itu akan diteruskan Mengetahui, Kepala SUDIN KEMAS Nama : Asal : Saran : Status : Bagian : 2. Tentukan title, warna background dan link untuk halaman web Anda. Dari menu Modify, pilih Page Properties. Untuk mengganti warna background dan link, klik pada icon . Sedangkan untuk mengganti background image, klik pada tombol Browse. Gambar 3.70 Tampilan Page Properties • Title = title atau judul halaman web • Background image = image yang digunakan sebagai background • Text = warna teks • Links, Visited Links, Active Links = warna link 3. Untuk mengakhiri klik tombol OK. 4. Supaya aman simpan dulu file tersebut dengan mengklik menu File - Save. • Membuat tabel Langkah ini sangat penting untuk dicermati karena hampir semua halaman web memakai tabel. Kita tidak akan dapat membuat halaman web yang warna-warni tanpa unsur tabel. Anda juga tidak dapat membuat halaman web seperti halaman yang sedang Anda baca ini tanpa tabel. Untuk membuat dan memodifikasi tabel pada Dreamweaver caranya adalah sebagai berikut : 1. Dari menu Insert, pilih Table. Atau tekan Ctrl + Alt + I. Gambar 3.71 Tampilan Insert Table Rows Jumlah baris ColumnsJumlah kolom Width Lebar tabel yang bisa dinyatakan dalam persen maupun dalam pixel Border Ukuran border tabel 2. Hasilnya adalah seperti gambar di bawah ini. Gambar 3.72 Tampilan hasil pembuatan tabel 3. Untuk mengganti warna backgroun d pada tabel, letakkan pointer mouse pada cell kolom atau baris - -pada gambar di bawah ditandai dengan tanda silang warna merah-- yang akan Anda ganti warnanya lalu klik icon yang terletak pada Properties. Untuk mengganti warna backgroun d lebih dari satu baris atau kolom drag pointer mouse dari cell yang satu ke cell selanjutny a. Gambar 3.73 Tampilan Color Properties

3.8 Tahap Pengoperasian Sistem