BAB 2 LANDASAN TEORITIS. 2.1 Konsep Dasar Perancangan Peta Interaktif

Transkripsi

1 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 09 Maret 2013) 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

2 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 09 Maret 2013) 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 09 Maret 2013) 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

3 41 ketentuan yang berlaku (Surat Keputusan) (Sumber 09 Maret 2013) 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 09 Februari 2013) 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

4 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) 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

5 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, proses suatu simbol yang 5 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 10 sekumpulan langkah proses yang ditulis sebagai procedure

6 44 11 Simbol penyimpanan/storage pada komputer, 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 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

7 45 alamat yang digunakan untuk menemukan sebuah website pada dunia internet. Contoh: 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

8 HTML (HyperText Markup Language) 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) 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

9 47 case sensitive akan dijumpai pada dokumen web yang do hosting di dalam server yang berbasis *nix (keluarga sistem operasi UNIX) 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 <H1> dengan </H1>), 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 <p> b. Ganti baris line break dengan tag <br> c. Garis datar horizontal rule dengan tag <hr> d. List item dengan tag <li>

10 48 Secara umum suatu elemen dalam dokumen HTML yang dinyatakan dengan tagnya, dituliskan : <nama tag>_</nama tag>. 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 <html>, <head> dan <body> 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: <html> <head> informasi tentang dokumen HTML </head> <body> informasi yang ditampilkan dalam browser web

11 49 </body> </html> Setiap dokumen HTML harus diawali dengan menuliskan tag <html> dan tag </html> 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 <head> diawal, dan tag </head> 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 <title> dan diakhiri dengan </title>. Section atau elemen body ditandai dengan tag <body> diawal, dan tag </body> 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: <! contoh.html--> <html> <head> <title>halaman Contoh</title>

12 50 </head> <body> File ini merupakan file contoh<br> <b>ini untuk membuat huruf cetak tebal</b> </body> </html> Firefox: Hasil dokumen HTML yang ditampilkan didalam browser Mozilla Gambar 2.1 Dokumen HTML ditampilkan di browser Mozilla. (Kadir,2002) 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.

13 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.

14 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 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

15 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) 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 Skrip PHP Skrip PHP berkedudukan sebagai tag dalam bahasa HTML. Suatu skrip akan dikenali sebagai skrip PHP bila diapit oleh tanda: a. <?php?>

16 54 b. <?...?> c. <script language= PHP > </script> 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 <html> <head> <title> Menyisipkan PHP di dokumen HTML </title> </head> <body> Cara menyapa PHP dengan akrab:<br> <p> <?php Echo( Hallo PHP, apa kabar? );?> </body>

17 55 </html> b. contoh2.php <?php Echo( ini ditulis dengan skrip PHP!! );?> <html> <body> <br><hr> ini ditulis dengan HTML </body> </html> <?php Echo( <br>sekian );?> Gambar 2.2 Dokumen PHP ditampilkan di Browser Mozila

18 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

19 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.

20 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])

21 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).