39
BAB 2
LANDASAN TEORITIS
2.1 Konsep Dasar Perancangan Peta Interaktif
Suatu sistem adalah suatu jaringan kerja dari prosedur-prosedur yang saling berhubungan, berkumpul bersama-sama untuk melakukan suatu kegiatan atau untuk menyelesaikan suatu sasaran yang tertentu. Sedangkan informasi itu sendiri memiliki pengertian data yang diolah bentuk yang lebih berguna dan lebih berarti bagi yang menerimanya. Sumber dari informasi tersebut adalah data. (Sumber http://www.wikipedia.com 09 Maret 2013) .
2.1.1 Pengertian Peta
Peta adalah gambaran permukaan bumi pada bidang datar dengan skala tertentu melalui suatu sistem proyeksi. Peta bisa disajikan dalam berbagai cara yang berbeda, mulai dari peta konvensional yang tercetak hingga peta digital yang tampil di layar komputer. Istilah peta berasal dari bahasa Yunani mappa yang berarti taplak atau kain penutup meja. Namun secara umum pengertian peta adalah lembaran seluruh atau sebagian permukaan bumi pada bidang datar yang
Universitas Sumatera Utara
40
diperkecil dengan menggunakan skala tertentu. Sebuah peta adalah representasi dua dimensi dari suatu ruang tiga dimensi. Ilmu yang mempelajari pembuatan peta disebut kartografi. Banyak peta mempunyai skala, yang menentukan seberapa besar objek pada peta dalam keadaan yang sebenarnya. Kumpulan dari beberapa peta disebut atlas (Sumber http://www.wikipedia.com 09
Maret 2013) .
2.1.2 Pengertian Interaktif
Interaktif bersifat saling melakukan aksi; antar-hubungan; saling aktif; atau komputer yang berkaitan dengan dialog antara komputer dan terminal atau antara komputer dan computer (Sumber http://www.wikipedia.com 09
Maret 2013) .
2.1.3 Pengertian Peta Interaktif
Peta Interaktif adalah penyajian peta dengan media web yang mudah digunakan untuk memperoleh informasi spasial. Anda dapat memperoleh informasi spasial tentang kehutanan dengan mudah melalui internet cukup menggunakan browser yang tersedia.
Informasi Geografis yang ada di situs ini bersifat indikatif (umum) serta akan terus disempurnakan dan dilengkapi sesuai dengan perkembangan terakhir untuk meningkatkan keakurasian, ketepatan waktu dan kelengkapan data. Batas-batas yang disajikan tidak berkekuatan hukum, untuk tujuan dimaksud harus menggunakan data (peta) yang disahkan oleh pejabat yang berwenang sesuai
Universitas Sumatera Utara
41
ketentuan yang berlaku (Surat Keputusan) (Sumber http://www.wikipedia.com 09 Maret 2013) . . 2.2 Teknik Perancangan Basis Data
Prinsip utama dari basis data adalah pengaturan data/arsip dengan tujuan utamanya adalah kemudahan dan kecepatan dalam mengambil kembali data/arsip. Satu hal yang harus diperhatikan, bahwa basis data bukan hanya sekedar penyimpanan data secara elektronis (dengan bantuan komputer). Artinya, tidak semua bentuk penyimpanan data secara elektronis bisa disebut basis data. (Sumber http://www.scribd.com 09 Februari 2013).
2.2.1
Data Flow Diagram (DFD)
Data flow Diagram di sebut juga dengan diagram arus data sering digunakan untuk menggambarkan suatu sistem yang telah ada atau sistem baru yang akan dikembangkan secara logika tanpa mempertimbangkan lingkungan fisik dimana data tersebut tersimpan. Simbol-simbol DFD seperti tabel 2.1
Tabel 2.1 Simbol Data Flow Diagram (DFD) Simbol
Arti Kesatuan luar merupakan kesatuan luar sistem yang dapat berupa orang, organisasi, atau sistem lainnya yang berada dilingkungan luarnya yang akan
Universitas Sumatera Utara
42
memberi input atau menerima output dari sistem
mengatur diantara proses simpan data dan kesatuan luar arus data dapat berupa masukan untuk hasil dari proses. Entitas internal atau proses, dimana data masuk kealiran data keluar
Simbol ini merupakan simpanan dari data yang dapat berupa file, arsip, kotak, table acuan dan agenda (buku).
2.2.2
Bagan Alir (Flowchart)
Flowchart sering disebut juga dengan bagan alir. Flowchart atau bagan alir adalah sebagai suatu skema yang menggambarkan urutan kegiatan dari suatu program dari awal sampai akhir. Adapun simbol-simbol flowchart dapat dilihat pada tabel 2.2
Tabel 2.2 Simbol bagan alir (flowchart) No
Simbol
Fungsi Terminal, untuk memulai atau mengakhiri suatu
1
program
Universitas Sumatera Utara
43
Proses suatu simbol yang menunjukkan setiap 2
pengolahan yang dilakukan Input-output untuk memasukan data ataupun
3
menunjukan hasil dari suatu proses Decesion, suatu kondisi yang akan menghasilkan
4
beberapa kemungkinan jawaban atau pilihan Preparation,
5
proses
suatu
simbol
yang
menyediakan tempat-tempat pengolahan dalam storage Conector, suatu prosedure akan masuk atau
6
keluar melalui simbol ini dalam lembar yang sama Off-page Conector, merupakan simbol masuk
7
atau keluarnya suatu prosedure pada lembar kertas lainya Flow, arus dari pada prosedure yang dapat
8
dilakukan atas kebawah dan bawah keatas, dari kiri kekanan ataupun dari kanan kekiri Stored data, penyimpanan data secara sementara
9 Predifined process, untuk menyatakan sekumpulan langkah proses yang ditulis sebagai 10 procedure
Universitas Sumatera Utara
44
Simbol penyimpanan/storage pada komputer, 11 misalnya menyimpan database.
2.3 Pengertian Website
Website atau situs juga dapat diartikan sebagai kumpulan halaman yang menampilkan informasi data teks, data gambar diam atau gerak, data animasi, suara, video dan atau gabungan dari semuanya, baik yang bersifat statis maupun dinamis yang membentuk satu rangkaian bangunan yang saling terkait dimana masing-masing dihubungkan dengan jaringan-jaringan halaman (hyperlink). Bersifat statis apabila isi informasi website tetap, jarang berubah, dan isi informasinya searah hanya dari pemilik website. Bersifat dinamis apabila isi informasi website selalu berubah-ubah, dan isi informasinya interaktif dua arah berasal dari pemilik serta pengguna website. Contoh website statis adalah berisi profil perusahaan, sedangkan website dinamis adalah seperti Friendster, Multiply, dll. Dalam sisi pengembangannya, website statis hanya bisa diupdate oleh pemiliknya saja, sedangkan website dinamis bisa diupdate oleh pengguna maupun pemilik. (Sumber http://www.scribd.com 09 Februari 2013).
Untuk menyediakan sebuah website, maka kita harus menyediakan unsurunsur penunjangnya, seperti halnya Nama Domain atau biasa disebut dengan Domain Name atau URL adalah alamat unik di dunia internet yang digunakan untuk mengidentifikasi sebuah website, atau dengan kata lain domain name adalah
Universitas Sumatera Utara
45
alamat yang digunakan untuk menemukan sebuah website pada dunia internet. Contoh: http://www.nama situs.com. Nama domain diperjualbelikan secara bebas di internet dengan status sewa tahunan.
Nama Domain itu terbeli di salah satu penyedia jasa pendaftaran, maka pengguna disediakan sebuah kontrol panel untuk administrasinya. Jika pengguna lupa/tidak memperpanjang masa sewanya, maka nama domain itu akan di lepas lagi ketersediaannya untuk umum. Nama domain sendiri mempunyai identifikasi ekstensi/akhiran sesuai dengan kepentingan dan lokasi keberadaan website tersebut. Contoh nama domain ber-ekstensi internasional adalah com, net, org, info, biz, name, ws. Contoh nama domain ber-ekstensi lokasi Negara Indonesia adalah:
•
.co.id : Untuk Badan Usaha yang mempunyai badan hukum sah
•
.ac.id : Untuk Lembaga Pendidikan
•
.go.id : Khusus untuk Lembaga Pemerintahan Republik Indonesia
•
.mil.id : Khusus untuk Lembaga Militer Republik Indonesia
•
.or.id : Untuk segala macam organisasi yand tidak termasuk dalam kategori “ac.id”,”co.id”,”go.id”,”mil.id” dan lain lain
•
.war.net.id : untuk industri warung internet di Indonesia
•
.sch.id : khusus untuk Lembaga Pendidikan yang menyelenggarakan pendidikan seperti SD, SMP dan atau SMU
Universitas Sumatera Utara
46
2.4 HTML (HyperText Markup Language) 2.4.1 Dokumen HTML
Dokumen HTML adalah file teks murni yang dapat dibuat dengan editor teks sembarang. Dokumen ini dikenal dengan sebagai web page. Dokumen HTML merupakan dokumen yang disajikan dalam browser web surfer. Dokumen ini umumnya berisi informasi atau interface aplikasi di dalam internet.
Ada dua cara untuk membuat sebuah web page : dengan web editor (misalnya Macromedia Dreamweaver atau Microsoft Frontpage) atau dengan editor teks biasa (misalnya notepad atau editplus).
2.4.2 Penamaan Dokumen HTML
Penamaan dokumen HTML dapat dilakukan dengan memilih suatu nama, sembarang nama, kemudian menambahkan sebuah ekstensi “.htm” atau “.html” (tanda kutip tidak perlu dituliskan karena digunakan sebagai penjelas saja).
Ekstensi dokumen HTML yang menggunakan 3 karakter awalnya adalah untuk mengakomodasikan sistem penamaannya yang ada dalam sistem operasi DOS. Nama dokumen pada beberapa sistem operasi bersifat case sensitive (membedakan huruf besar dan huruf kecil). Nama dokumen yang sama tetapi dituliskan dengan case yang berbeda akan dianggap sebagai dokumen yang berbeda, misalnya dokumen.html akan berbeda dengan DOKUMEN.html. kasus
Universitas Sumatera Utara
47
case sensitive akan dijumpai pada dokumen web yang do hosting di dalam server yang berbasis *nix (keluarga sistem operasi UNIX).
2.4.3 Elemen Dan Tag HTML
Dokumen HTML disusun oleh elemen-elemen. “Elemen” merupakan istilah bagi komponen-komponen dasar pembentuk dokumen HTML. Untuk menandai berbagai elemen dalam suatu dokumen HTML, digunakan tag. Tag HTML terdiri atas sebuah kurung sudut kiri (<, tanda lebih kecil), sebuah nama tag, dan sebuah kurung sudut kanan (>, tanda lebih besar). Tag umumnya berpasangan (misalnya
dengan
), tag yang menjadi pasangan selalu diawali dengan karakter garis miring. Tag yang pertama menunjukkan tag awal yang berarti awal elemen, dan yang kedua menunjukkan tag akhir, berarti akhir elemen.
Nama elemen ditunjukkan dengan nama tag nya. Suatu elemen didalam dokumen HTML harus ditandai dengan penulisan tag nya berpasangan. Ada beberapa elemen yang tidak mengharuskan tag nya dituliskan secara berpasangan, elemen tersebut diantaranya adalah: a. Paragraf dengan tag
b. Ganti baris – line break dengan tag
c. Garis datar – horizontal rule dengan tag
d. List item dengan tag
Universitas Sumatera Utara
48
Secara umum suatu elemen dalam dokumen HTML yang dinyatakan dengan tagnya, dituliskan : _. Penulisan penamaan tag bebas, dapat menggunakan huruf besar, huruf kecil, ataupun campuran (tidak case sensitive). Tetapi untuk antisipasi pada standar penulisan tag, direkomendasikan untuk menuliskan tag dengan menggunakan huruf kecil semuanya.
Tag mark up ini digunakan sebenarnya memberi tahu browser web bagaimana memperlakukan atau menampilkan (memformat) halaman dokumen tersebut dalam browser.
Dalam membuat suatu dokumen HTML dibutuhkan elemen yang dinyatakan dengan tag , dan berikut tag-tag pasangannya. Setiap dokumen terdiri atas tag head dan body. Elemen head berisi teks yang sebenarnya yang tersusun dari link, grafik, paragraf dan elemen lainnya.
Secara umum dokumen dibagi menjadi dua section (bagian), yaitu section head dan section body. Sehingga setiap dokumen HTML harus mempunyai pola dasar sebagai berikut: …informasi tentang dokumen HTML …informasi yang ditampilkan dalam browser web
Universitas Sumatera Utara
49
Setiap dokumen HTML harus diawali dengan menuliskan tag dan tag diakhir dokumen. Tag ini menandai elemen HTML, yang berarti dokumen ini adalah dokumen HTML.
Dalam satu dokumen hanya ada satu elemen HTML. Section atau elemen head ditandai dengan tag diawal, dan tag di akhir. Section ini berisi informasi tentang dokumen HTMLnya. Minimal informasi yang dituliskan dalam elemen ini adalah judul dari dokumen, judul ini akan ditampilkan pada caption bar dari window browser, ditandai dengan menggunakan tag dan diakhiri dengan .
Section atau elemen body ditandai dengan tag diawal, dan tag diakhir. Section body merupakan elemen terbesar didalam dokumen HTML. Elemen ini berisi isi dokumen yang akan ditampilkan pada browser, meliputi paragraph, grafik, link, table, dan sebagainya.
Contoh penulisan suatu dokumen HTML sebagai berikut: Halaman Contoh
Universitas Sumatera Utara
50
File ini merupakan file contoh
Ini untuk membuat huruf cetak tebal
Hasil dokumen HTML yang ditampilkan didalam browser Mozilla Firefox:
Gambar 2.1 Dokumen HTML ditampilkan di browser Mozilla. (Kadir,2002)
2.4.4 CSS ( Cascading Style Sheet )
CSS mendefinisikan karakteristik tampilan ( warna, style, dan posisi ) suatu elemen pada dokumen HTML dalam bentuk property elemen tersebut. Pemisahan isi dengan tampilan yang dilakukan dengan penerapan CSS ini, memberikan kemungkinan penyusunan struktur suatu halaman HTML dengan lebih fleksibel. CSS merupakan bagian/subset dari DOM yang sangat berperan dalam HTML.
Universitas Sumatera Utara
51
Perbedaan implementasi antara Netscape dan Microsoft sehingga akhirnya W3C melakukan suatu standardisasi CSS. Pada awalnya, upaya standardisasi CSS dibagi dua, yaitu CSSI untuk pengaturan warna dan style, serta CSS-P untuk pengaturan posisi suatu elemen. CSS2 dari W3C selanjutnya menggabungkan kedua standar ini menjadi suatu standar yang meliputi semua setting tampilan suatu elemen halaman HTML.
Dalam spesifikasi CSS2, ada beberapa properti elemen dokumen yang berhubungan dengan posisi suatu elemen dihalaman browser. Property tersebut adalah: a. Posisition - ada dua pilihan untuk nilai properti ini, yaitu absolute dan relative. Setting absolute mengatur posisi elemen berdasarkan jarak terhadap ujung kiri-atas elemen parent-nya. Sedangkan setting absolute bekerja sesuai layout HTML biasa dimana posisinya ditentukan berdasarkan akhir elemen sebelumnya. b. Left dan Top – menentukan jarak kearah kanan dan ke bawah dari posisi awal elemen. Unitnya bisa dinyatakan dalam point (pt), pixel(px) atau unit standar CSS lainnya. c. Width dan Height – menentukan lebar dan tinggi elemen. Unitnya bisa dinyatakan dalam point(pt), pixel(px) atau unit standar CSS lainnya. d. Z-index – menentukan apakah suatu elemen ditampikan dilayar. Nilainya bisa visible (tampil) atau hidden (tersembunyi). e. Overflow – menentukan perilaku ruang penampung jika isinya melebihi batasnya. Ada tiga untuk nilai properti ini, yaitu clip, scroll, dan none.
Universitas Sumatera Utara
52
Setting clip berarti isi akan dipotong jika melebihi batas. Scroll akan memunculkan scrollbar pada container. Sedangkan none tidak akan melakukan apapun terhadap isi sehingga isi tersebut akan keluar dari ruang batasnya. f. Background-color atau Layer-background-color – menentukan warna dasar dari suatu elemen. Yang pertama berlaku untuk IE, sedangkan yang kedua berlaku untuk NS. g. Background-image atau Layer-background-image – menentukan gambar latar belakang dari suatu elemen. Yang pertama berlaku untuk IE, sedangkan yang kedua berlaku untuk NS.
2.4.5 JavaScript
JavaScript pertama kali muncul di Netscape 2.0 dan dikembangkan lebih lanjut pada Netscape 3.0. walaupun memiliki nama yang serupa. JavaScript sama sekali tidak berhubungan dengan Java.
Java adalah bahasa pemograman tingkat tinggi untuk membuat aplikasi cross-platform, sedangkan Java Script hanyalah scripting language yang terintegrasi dengan web browser untuk memberikan fleksibilitas tambahan bagi programmer untuk mengontrol elemen-elemen dalam halaman web.
Aplikasi JavaScript sebenarnya cukup luas, tetapi disini penulis menggunakan JavaScript dibatasi untuk DHTML, yaitu JavaScript yang
Universitas Sumatera Utara
53
digunakan untuk mengakses property, method, dan event handler yang disediakan oleh DOM dan CSS.
Property didefenisikan sebagai setting nilai suatu objek tertentu. Contohnya adalah warna suatu teks, action untuk suatu form, nama file untuk suatu gambar, dll. Method adalah fungsi-fungsi yang dapat diterapkan untuk suatu objek. Misalnya maximize untuk window. Event handler menspesifikasikan bagaimana suatu objek merespon terhadap suatu kejadian, misalnya suatu button di click, window di resize,dll. (kadir,2002).
2.5 Pengenalan PHP (HyperText Preprocessor) 2.5.1 Sejarah PHP
PHP merupakan salah satu bahasa pemograman web yang masih muda namun telah mengalami perkembangan yang cukup signifikan dan telah banyak digunakan oleh banyak user dalam membuat aplikasi web baik perseorangan maupun perusahaan.
2.5.2 Skrip PHP
Skrip PHP berkedudukan sebagai tag dalam bahasa HTML. Suatu skrip akan dikenali sebagai skrip PHP bila diapit oleh tanda: a.
Universitas Sumatera Utara
54
b. ..............?> c. <script language=”PHP”>……
Skrip yang dibuat dengan PHP disimpan dengan nama file dan diikuti dengan ekstensi *.php, misalnya : contoh.php. Bila skrip PHP diakses melalui computer lokal maka file PHP disimpan di folder htdocs di local web server. Sama halnya dengan penamaan dokumen HTML, pemberian nama dokumen yang sama tetapi dituliskan dengan case yang berbeda akan dianggap sebagai dokumen yang berbeda, misalnya contoh.php akan berbeda dengan CONTOH.php atau Contoh.php. Skrip PHP dapat disisipkan dibagian manapun dalam dokumen HTML, begitu pula sebaliknya skrip HTML dapat diletakkan diantara skrip PHP. Berikut ini contoh dari skrip PHP: a. contoh1.php Menyisipkan PHP di dokumen HTML Cara menyapa PHP dengan akrab:
Universitas Sumatera Utara
55
b. contoh2.php
ini ditulis dengan HTML sekian”); ?>
Gambar 2.2 Dokumen PHP ditampilkan di Browser Mozila
Universitas Sumatera Utara
56
2.5.3 Integrasi dengan Database
PHP yang digabungkan dengan database akan lebih berkekuatan jika digabungkan dengan database yang realible, gratis dan mudah diinstalasi. Terdapat dua jenis database yang memenuhi yaitu MySQL dan PostgreSQL. Kedua jenis database ini dipergunakan karena kinerja yang bagus dan untuk mengaksesnya.PHP mempunyai fungsi khusus. berikut ini daftar database yang didukung oleh PHP sampai versi 5:
Tabel 2.3 Daftar Database-Database Yang Didukung PHP No.
Nama Database
No.
Nama Database
1.
Adabas D
12.
Direct MS-SQL
2.
DBase
13.
MySQL
3.
Empress
14.
ODBC
4.
FilePro (read-only)
15.
Oracle (OC17 dan OC18)
5.
Hyperware
16.
Ovrimos
6.
IBM DB2
17.
PostgreSQL
7.
Informix
18.
SQLite
8.
Ingres
19.
Solid
9.
Interbase
20.
Sybase
10
Frontbase
21.
Velocis
11.
MSQL
22.
Unix dbm
Universitas Sumatera Utara
57
PHP mempunyai fungsi khusus untuk mengakses MySQL. Ada sekitar 48 fungsi yang didukung PHP dalam mengakses PHP dalam mengakses MySQL dalam membuat aplikasi. Adapun yang biasa digunakan diantaranya adalah : a. mysql_connect() fungsi mysql_connect adalah untuk menghubungkan PHP dengan database MySQL. Format fungsinya adalah: mysql_connect(string hostname, srting username, string password);
b. mysql_select_db setelah
terhubung
ke
database
MySQL
dengan
menggunakan
mysql_connect, langkah selanjutnya adalah memilih database yang akan digunakan. Fungsi mysql_select_db digunakan untuk memilih database. Format fungsinya adalah:
mysql_select_db(string database, koneksi)
koneksi ialah variable yang terhubung ke MySQL. Jika tidak mengisi variable koneksi maka koneksi yang terbuka saat itulah yang dianggap digunakan. Manfaat berbagai macam koneksi adalah bahwa dengan pilihan seperti itu maka dalam satu file dimungkinkan mengambil query dari 2 database sekaligus.
Universitas Sumatera Utara
58
c. mysql_query Dalam database MySQL, perintah untuk melakukan transaksi ialah perintah SQL. Sebutan untuk mengirim perintah SQL dinamakan query. Query memberi perintah kepada database untuk melakukan apa yang dikehendaki. Format fungsinya:
Int mysql_query(string query, int[link_identifier];
d. mysql_num_rows kegunaan dari fungsi ini adalah untuk menghitung jumlah baris yang dikenai oleh proses SQL.Format fungsinya adalah:
Int mysql_num_rows(int result);
e. mysql_fetch_array
Fungsi ini berkaitan dengan menampilkan data. Untuk menampilkan data, digunakan fungsi mysql_fetch_array. Dengan fungsi ini, haisl query ditampung dalam bentuk array. Format fungsinya adalah:
Array mysql_fetch_array(int result, int [result type])
Universitas Sumatera Utara
59
2.6 MySQL
MySQL merupakan salah satu perangkat lunak sistem pengelola basis data (Data Base Management System). MySQL juga dapat dikategorikan sebagai Relational Data Base Management System (RDBMS), karena dalam pembuatan basis data pada MySQL terdiri atas lajur horizontal dan lajur vertical. MySQL pada saat ini banyak digunakan oleh pemograman web untuk membangun situs yang memerlukan basis data sebagai data dan pengolahan data.(Syafii,2005).
Universitas Sumatera Utara