Media Informatika, Vol. 4, No.

1, Juni 2006, 27-37 ISSN: 0854-4743

APLIKASI WEB DATA SPASIAL KEPENDUDUKAN INDONESIA DENGAN SCALABLE VECTOR GRAPHICS (SVG)
Yudha Widiatmoko, Fathul Wahid Jurusan Teknik Informatika, Fakultas Teknologi Industri, Universitas Islam Indonesia Jl. Kaliurang Km. 14 Yogyakarta 55501 Telp. (0274) 895287 ext. 122, Faks. (0274) 895007 ext. 148 E-mail: fathulwahid@fti.uii.ac.id ABSTRAK SVG merupakan format pemrograman baru yang dikembangkan khususnya di bidang grafik pada bidang Sistem Informasi Geografis (SIG). Dalam perkembangannya, SVG juga dapat dijadikan bahasa pemrograman untuk membangun situs yang menarik. SVG adalah singkatan dari Scalable Vector Graphics dan merupakan format file baru dalam web graphic untuk menampilkan grafik serta mendeskripsikan gambar 2 dimensi dalam pengembangan web yang berbasis XML (eXtensible Markup Language). Studi kasus yang dikembangkan adalah aplikasi data spasial kependudukan yang diimplementasikan kedalam web server apache menggunakan bahasa pemrograman PHP dan database MySQL. Kata kunci: Kependudukan, web grafik, data spasial. PENDAHULUAN Negara Indonesia secara astronomi terletak pada posisi 94 45 BT sampai 141 05 BT dan 6 08 LU sampai 11 15 LS, dimana untuk daerah khatulistiwa 1 ekivalen dengan 111 km, yaitu 7.700.000 Km2 dengan total wilayah darat 1.826.440 Km2 dan dibagi menjadi 33 propinsi. Sebagai Negara nomor 4 terbesar di dunia dengan jumlah penduduk pertengahan tahun 2003 sebesar 238.452.952 jiwa sehingga rata-rata setiap 1 Km2 di Indonesia dihuni sekitar 131 jiwa/Km2. Luasnya wilayah dan padatnya penduduk Indonesia akan dapat dengan mudah di monitor jika terdapat sistem untuk memonitoring secara berkala mengenai kepadatan penduduk di Indonesia. Maka dari itu perlu adanya sebuah sistem berbasis komputer yang mampu menangani informasi data kependudukan atau demografi. 2. RUMUSAN MASALAH Berdasarkan latar belakang di atas, maka rumusan masalah pada penelitian ini adalah bagaimana membangun sistem berbasis web sebagai penyedia informasi kependudukan yaitu data kepadatan penduduk dan informasi data spasial lainnya yang dapat diakses dengan cepat dan akurat. 1.

Media Informatika, Vol. 4, No. 1, Juni 2006, 27-37

27

BATASAN MASALAH Sistem hanya menangani informasi perubahan data penduduk yang meliputi data kepadatan penduduk, data angka kelahiran (natalitas), data angka kematian (mortalitas), data jenis kelamin, dan data warga Negara asing di Indonesia. b. Sistem dapat menampilkan informasi tentang data spasial, wilayah geografis, dan data kependudukan dalam lingkup sebatas wilayah propinsi dan kabupaten di Indonesia. c. Sistem menampilkan data kepadatan penduduk (demografi) yang divisualisasikan dalam bentuk peta wilayah Indonesia yang terbagi menjadi 33 propinsi. d. Peta geografis Indonesia dibuat dengan SVG (Scalable Vector Graphics). e. Sistem ini dirancang dan dibuat menggunakan bahasa pemrograman PHP dan MySQL sebagai database, serta web server apache. TUJUAN PENELITIAN Tujuan penelitian adalah membuat sistem yang dapat mempermudah dan mempercepat pencarian informasi yang dibutuhkan oleh pengguna (user) tentang data kependudukan beserta peta lokasi dari setiap propinsi di Indonesia secara realtime. 5. LANDASAN TEORI 5.1 Data Spasial Sistem Informasi Geografis Dalam Sistem Informasi Geografis (SIG) model data yang akan digunakan dari bentuk dunia nyata harus diimplementasikan ke dalam basisdata. Data ini dimasukkan ke dalam komputer yang kemudian memanipulasi objek dasar yang memiliki atribut geometri (entity spasial/entity geografis) (Prahasta, 2002a). Data spasial sendiri pada dasarnya mempunyai banyak pengertian, namun dapat disimpulkan bahwa data spasial adalah suatu entitas data dalam Sistem Informasi Geografis (SIG) yang dapat dikelola, dianalisa dan dapat memetakan informasi objek keruangan beserta data-data atributnya serta dapat disimpan di dalam database dan dapat ditampilkan kedalam suatu sistem yang terpadu sehingga dapat mendukung dalam pengambilan keputusan. Model data raster merupakan salah satu macam dari data spasial yang menampilkan, menempatkan, dan menyimpan data spasial dengan menggunakan struktur matriks atau piksel-piksel yang membentuk grid. Setiap piksel atau sel ini memiliki atribut sendiri, termasuk koordinat yang unik (disudut grid, dipusat grid ataupun ditempat lainnya). Akurasi model data ini sangat bergantung pada resolusi atau ukuran pikselnya di permukaan bumi. Entity spasial raster disimpan pada layer yang secara fungsionalitas direlasikan dengan unsur-unsur petanya. Sumber entity spasial raster bisa didapatkan dari citra satelit, radar, atau ketinggian digital. Sedangkan model data vektor menampilkan, menempatkan, dan menyimpan data spasial dengan menggunakan titik-titik, garis-garis atau kurva,
Widiatmoko & Wahid Aplikasi Web Data Spasial Kependudukan dengan SVG

3. a.

4.

28

atau poligon beserta atribut-atributnya. Bentuk-bentuk dasar representasi data spasial ini di dalam sistem model data vektor didefinisikan oleh sistem koordinat kartesian dua dimensi (X,Y). Di dalam model data spasial vektor, garis-garis atau kurva (busur atau arcs) merupakan sekumpulan titik-titik terurut yang saling berhubungan (Prahasta, 2002a). 5.2 Pengertian SVG (Scalable Vector Graphic) SVG adalah singkatan dari Scalable Vector Graphics dan merupakan format file baru dalam web graphic yang telah direkomendasikan oleh World Wide Web Consortium (W3C) untuk menampilkan grafik serta mendeskripsikan gambar 2 dimensi dalam pengembangan web yang berbasis XML (eXtensible Markup Language). Penyimpanan file SVG dilakukan dengan cara memberi nama ekstensinya dengan .svg (memakai huruf kecil semua), dan untuk menyimpan file SVG yang terkompresi memakai ekstensi .svgz (semua memakai huruf kecil). 5.3 Fungsi SVG Pada dasarnya, SVG dapat digunakan untuk membuat tiga jenis objek grafik, yaitu: path (terdiri dari garis lurus dan kurva), gambar, dan teks. Obyek graphical dapat di group-kan, diberi style, di transformasi ke dalam bentuk baru yang telah dirender. SVG dapat dibuat interaktif dan dinamis dengan cara manipulasi pada script-nya. SVG dapat mengkreasikan sebuah grafik yang terdiri dari banyak vektor yang berbeda-beda. Sebuah vektor pada dasarnya adalah garis yang menghubungkan dua titik (Januar, 2003). 6. PERANCANGAN SISTEM 6.1 Analisis Kebutuhan Input Perangkat lunak yang dibangun membutuhkan beberapa input yaitu: 1. Informasi dan berita terkini (newsflash) yang berhubungan dengan kependudukan. 2. Data otorisasi untuk administrator. 3. Kata kunci untuk pencarian berita yang diinginkan. 4. Buku tamu pengunjung. 5. Forum Interaksi. 6. Data-data kependudukan (demografi) Indonesia. 7. Galeri foto yang berisis data koleksi foto yang berkaitan dengan kependudukan. 6.2 Analisis Proses Pada perangkat lunak yang dibuat akan terjadi beberapa proses yaitu: 1. Proses otorisasi pada administrator. Pada proses ini digunakan oleh admistrator untuk melakukan entry atau masukkan kedalam sistem basisdata. 2. Proses edit basisdata oleh admin. Pada proses ini digunakan oleh admistrator untuk melakukan edit atau ubahan dalam sistem basisdata.

Media Informatika, Vol. 4, No. 1, Juni 2006, 27-37

29

3.

Proses hapus basisdata oleh admin. Pada proses ini digunakan oleh admistrator untuk melakukan delete atau penghapusan dalam sistem basisdata.

6.3 Analisis Output Output yang diharapkan yaitu antarmuka berbasis web yang dapat menampilkan berita-berita dan informasi kependudukan di Indonesia yang terdapat pada halaman utama dan menampilkan data-data kependudukan berdasarkan hasil input secara realtime pada antarmuka. 6.4 Diagram Konteks Desain sistem aplikasi data spasial kependudukan dimulai dari bentuk yang paling global yaitu diagram konteks, kemudian diagram konteks ini diturunkan sampai bentuk yang paling detail. Aliran data bersumber pada administrator, yang memasukkan dan mengubah semua informasi, berita maupun data, dan semua diproses akan ditampilkan ke dalam website meliputi informasi, berita dan data terbaru. Data dan berita ataupun informasi terbaru dari sistem yang ditampilkan secara detail adalah sesuai dengan permintaan atau request user. Gambar lengkapnya dapat dilihat pada Gambar 1.

Gambar 1. Diagram Konteks Sistem 6.5 Data Flow Diagram Level 1 Pada diagram arus data level 1 (DFD Level 1) terdiri dari delapan proses utama yaitu pada administrator memproses input data, edit data, hapus data oleh admin, input forum, buku tamu oleh pengunjung, proses lihat data bukutamu pengunjung beserta data demografi dan informasi berita lainnya dalam aplikasi. Secara keseluruhan DFD level 1 dapat dilihat pada Gambar 2.

30

Widiatmoko & Wahid Aplikasi Web Data Spasial Kependudukan dengan SVG

Gambar 2. DFD Level 1 6.6 Data Flow Diagram Level 2 Proses Data Demografi Pada proses diagram arus data level 2 proses data ini terdapat proses administrasi input, edit dan hapus pada data demografi yang terdiri dari demografi jumlah penduduk, mortalitas, natalitas dan WNA (warga negara asing) yang tinggal dan menetap di Indonesia dan data-data tersebut dapat dilihat oleh

Media Informatika, Vol. 4, No. 1, Juni 2006, 27-37

31

pengguna (user). Selengkapnya diagram arus data level 2 untuk proses data ini ditampilkan pada Gambar 3.

Gambar 3. DFD Level 2 Proses Data Demografi 7. HASIL DAN PEMBAHASAN Secara garis besar, perangkat lunak diimplementasikan pada dua lingkungan kerja (platform), yaitu lingkungan pengembangan dan lingkungan target (runtime) yang meliputi berbagai macam spesifikasi perangkat keras dan perangkat lunak yang dibutuhkan oleh sistem. 7.1 Lingkungan Pengembangan Untuk dapat melakukan pengembangan perangkat lunak dengan nyaman dan memadai, spesifikasi perangkat keras komputer juga harus diperhatikan. Berikut spesifikasi yang direkomendasikan: 1. Processor berbasis prosesor Intel atau AMD dengan minimum kecepatan 1 GHz atau lebih. 2. Kapasitas memori (RAM) 256 MB atau lebih. 3. Alokasi ruang harddisk 1 GB atau lebih. 4. Modem dengan kecepatan minimum 56 Kbps untuk melakukan akses ke internet atau perangkat Ethernet card (LAN card)
32 Widiatmoko & Wahid Aplikasi Web Data Spasial Kependudukan dengan SVG

5. 6. 7. 8. 9. 10.

Sistem operasi Microsoft Windows 2000 Profesional. Macromedia Dreamweaver MX 2005. Corel Draw 11 UltraEdit-32 10.20c Text Editor Adobe SVG Viewer 3.0.1 atau Corel SVG Viewer 2.05. Apache2Triad Webserver

7.2 Lingkungan Target Komputer pengguna (user) yang merupakan target device, harus memenuhi spesifikasi minimum sebagai berikut: 1. Processor berbasis Intel atau AMD dengan kecepatan 1 GHz atau lebih. 2. Kapasitas memori (RAM) 256 MB atau lebih. 3. Alokasi ruang harddisk 1 GB atau lebih. 4. Modem dengan kecepatan minimum 56 Kbps untuk melakukan akses ke internet atau perangkat Ethernet card (LAN card). 5. Sistem operasi Microsoft Windows 2000 Profesional atau lebih baik. 6. Web browser (Internet Explorer 7.0, Opera 8.0, dll), yang mendukung format SVG (Scalable Vector Graphics) 8. 1. IMPLEMENTASI SISTEM Proses implementasi secara umum melalui tahapan-tahapan sebagai berikut: Melakukan pemeriksaan pada seluruh perangkat keras (Hardware) yang digunakan untuk pembuatan aplikasi seperti personal computer (PC), modem, LAN card dan perangkat keras pendukung lainnya agar tidak muncul asumsiasumsi salah yang diakibatkan oleh kerusakan sebagian atau seluruh perangkat keras yang digunakan. Melakukan konfigurasi perangkat lunak (software) pada perangkat komputer maupun perangkat pendukung lainnya seperti instalasi dan konfigurasi web server apache dan instalasi SVG viewer pada komputer server lokal, dan instalasi dan konfigurasi driver perangkat lunak lainnya. Melakukan pengembangan aplikasi pada perangkat komputer dan menguji kinerja aplikasi tersebut menggunakan web server lokal.

2.

3.

Implementasi sistem lebih menitikberatkan pada tampilan antar muka dari halaman-halaman web. Format PHP yang digunakan adalah format perpaduan antara HTML yang ditambah dengan perintah PHP dimana format HTML yang digunakan adalah format standar yang dibuat dengan bantuan tool-tool seperti Macromedia Dreamweaver dan UltraEdit-32 untuk editing script. Untuk image dan grafis dibuat dengan menggunakan Adobe Photoshop, Corel Draw, dan Macromedia Fireworks agar tampilan agar lebih menarik. Implementasi sistem pada server lebih ditekankan pada aplikasi web yang langsung berhubungan dengan server, misalkan yaitu pada halaman berita (newsflash), Info halaman utama, menu admin dan menu user yang langsung berhubungan dengan database MySQL.

Media Informatika, Vol. 4, No. 1, Juni 2006, 27-37

33

8.1 Tampilan Halaman Utama (Beranda) Pada halaman utama tersedia beberapa menu dan fitur-fitur yang dapat dipergunakan. Pada header, menu beranda yang mengacu pada halaman indeks itu sendiri. Menu bukutamu untuk para pengunjung, yang bersedia mengisi dan memberikan sedikit pesan dan kesannya. Menu forum interaksi merupakan forum bahasan topik permasalahan yang hangat terjadi, serta para pengunjung dapat menanggapi suatu bahasan topik tersebut. Menu galeri foto berisi album foto yang behubungan dengan kependudukan di Indonesia. Dan yang paling utama pada menu peta demografi yang berisi data spasial demografi beserta dengan peta geografis indonesia. Pada menu beranda yang merupakan index.php terdapat output berupa tampilan informasi pada isi halaman utama dan berita (newsflash) yang telah dikelola oleh administrator. Dan pengunjung dapat melihat informasi dan beritaberita secara lebih detail, beserta daftar berita-berita yang lain yang dapat dilink. Lebih lengkapnya dapat dilihat pada Gambar 4.

Gambar 4. Halaman Utama Web 8.2 Tampilan Halaman Menu Control Panel Administrator Dan setelah seorang user berhasil mengakses atau login ke dalam control panel, maka username beserta password tersebut akan disimpan kedalam session di server, dan pada setiap halaman web pada control panel dilakukan pengecekan session, apakah sudah terdaftar atau belum session user tersebut pada server.

34

Widiatmoko & Wahid Aplikasi Web Data Spasial Kependudukan dengan SVG

Setelah user dapat login dengan benar dan telah tercatat pada session di server. Maka dia berhak untuk mengakses kontrol panel ,yakni halaman admin.php. Dimana disini terdapat menu-menu yang digunakan untuk menambah, mengubah ataupun menghapus data-data yang akan ditampilkan di website. Baik itu database, berita maupun isi dari halaman web itu sendiri. Lebih lengkapnya dapat dilihat pada Gambar 5.

Gambar 5. Halaman Menu Control Panel Administrator Menu-menu yang ada di kontrol panel administartor website ini adalah sebagai berikut: 1. Menu Admin, untuk merubah data user administrator. 2. Menu Content, untuk menambah, mengubah dan menghapus isi halaman utama. 3. Menu Buku tamu, untuk menambah, mengubah dan menghapus data buku tamu. 4. Menu Forum Diskusi, untuk menambah, mengubah dan menghapus data forum. 5. Menu Newsflash, untuk menambah, mengubah dan menghapus data isi berita.

Media Informatika, Vol. 4, No. 1, Juni 2006, 27-37

35

6. 7. 8. 9. 10. 11. 12. 13.

14.

15. 16.

17. 18.

Menu Aturan Kategori, untuk menambah, mengubah dan menghapus kategori data spasial berdasarkan aturan warnanya. Menu Propinsi, untuk menambah, mengubah dan menghapus nama propinsi Menu Kabupaten, untuk menambah, mengubah dan menghapus nama kabupaten berdasarkan propinsinya. Menu Label Nama,untukmemberikan label nama pada peta. Menu Legenda peta, untuk memberkan informasi dan keterangan legenda warna pada peta. Menu matriks Propinsi, untuk menambah, mengubah dan menghapus variabel matriks propinsi. Menu matriks Kabupaten, untuk menambah, mengubah dan menghapus variabel matriks kabupaten. Menu Data Spasial Demografi jumlah penduduk Propinsi, untuk menambah, mengubah dan menghapus data-data jumlah kepadatan penduduk propinsi di Indonesia Menu Data Spasial Demografi jumlah penduduk Kabupaten, untuk menambah, mengubah dan menghapus data-data jumlah kepadatan penduduk kabupaten di Indonesia Menu Data Spasial Natalitas Mortalitas Propinsi, untuk menambah, mengubah dan menghapus data-data kelahiran dan kematian propinsi di Indonesia Menu Data Spasial Natalitas Mortalitas Kabupaten, untuk menambah, mengubah dan menghapus data-data kelahiran dan kematian kabupaten di Indonesia Menu Data Spasial WNA Propinsi, untuk menambah, mengubah dan menghapus data-data warga negara asing propinsi di Indonesia Menu Data Spasial WNA Kabupaten, untuk menambah, mengubah dan menghapus data-data warga negara asing kabupaten di Indonesia.

SIMPULAN Setelah menyelesaikan pembuatan aplikasi data spasial kependudukan di Indonesia menggunakan SVG (Scalable Vector Graphics) berbasis web, dapat diambil beberapa kesimpulan sebagai berikut: 1. Implementasi teknologi SVG (Scalable Vector Graphics) hanya dapat digunakan pada browser yang telah memiliki kemampuan pembacaan dan mengolah format data SVG (Scalable Vector Graphics). 2. Teknologi SVG (Scalable Vector Graphics) dapat di aplikasikan secara langsung ke dalam bentuk web, dengan maupun tanpa didukung oleh bahasa pemrograman yang lain, seperti HTML, PHP maupun ASP. 3. Aplikasi Teknologi SVG (Scalable Vector Graphics) dapat dikembangkan lebih lanjut pada penggunaan aplikasi-aplikasi perangkat lunak dan berbagai studi kasus yang lain karena kelebihannya yang scalable yaitu tanpa merubah kualitasnya. 4. Dalam aplikasi yang umum SVG belum dikenal luas untuk membantu menampilkan suatu situs website selain bahasa pemrograman yang lain dan

9.

36

Widiatmoko & Wahid Aplikasi Web Data Spasial Kependudukan dengan SVG

baru dikembangkan serta dikenal dalam aplikasi yang berbau geografis saja seperti pemetaan topografi dan penyajian data geografis. 10. SARAN Beberapa saran untuk pengembangan aplikasi data spasial kependudukan di Indonesia menggunakan SVG (Scalable Vector Graphics) berbasis web selanjutnya sebagai berikut: 1. Sebagai sarana pembelajaran para siswa dan ahli dalam pengembangan lebih lanjut teknologi SVG (Scalable Vector Graphics). 2. Dikarenakannya keterbatasan studi masalah yang dibuat maka dalam aplikasi perangkat lunak yang dikembangkan hanya tediri dari beberapa fungsi atau fitur yang dijalankan, diharapkan pengembangan selanjutnya yaitu dapat memperbaiki dan menambah fungsi atau fitur-fitur keseluruhan yang terdapat dalam SVG (Scalable Vector Graphics). 3. Disarankan dan diharapkan dalam pengembangan selanjutnya dapat dikembangkan dan diperbaiki dalam hal variasi data-data spasial yang secara dinamis dapat diinputkan dengan berbagai macam data yang diproses didalam sistem sehingga dapat menjadi suatu sistem aplikasi perangkat lunak yang universal dan menghasilkan tampilan dalam format SVG (Scalable Vector Graphics) yang lebih kompleks. 4. Penggunaan SVG (Scalable Vector Graphics) masih terdapat banyak kekurangan dalam hal yaitu menyesuaikan diri dengan sistem yang berbeda-beda. Untuk pengembangan selanjutnya diperlukan upadate berupa tools ataupun plug-in dan berbagai macam perangkat lunak lainnya yang dapat di jalankan pada berbagai macam sistem yang ada. PUSTAKA Anonymous. (2005). SVG Tutorial. http://www.learnsvg.com/tutorials/ index.php, diakses tanggal 3 Agustus 2005. Jackson, Dean. (2005). ScalableVector Graphics (SVG) 1.1 Specification. http://www.w3.org/TR/2003/REC-SVG11-20030114/, diakses tanggal 3 Agustus 2005. Januar, A, M. (2005). Pengantar Scalable Vector Graphics (SVG). http://www.stund.uni-karlsruhe.de/~uwdn, diakses tanggal 4 Juli 2005. Prahasta, E. (2002a). Konsep-konsep Dasar Sistem Informasi Geografis. Bandung: Penerbit Informatika. Prahasta, E. (2002b). Sistem Informasi Geografis Tools dan Plug-ins. Bandung: Penerbit Informatika.

Media Informatika, Vol. 4, No. 1, Juni 2006, 27-37

37