WebML
merupakan metodologi perancangan web generasi ke-tiga yang di gagaskan pada
tahun 1998 oleh para pioner yang bekerja di dalam bidang hypermedia dan desain web. Seperti HDM (Garzetto ,1992) dan RMM
(Isakowitz, 1995). Tujuan dari dikembangkanya WebML adalah untuk membantu
merancang dan mengimplementasikan data-intensive
Web aplication (Ceri, 2002) yang
didefinisikan sebagai situs web untuk mengakses dan memelihara sejumlah besar
data tersteruktur yang pada umunya disimpan dalam sebuah Database Management System (DBMS) seperti situs penjualan online
atau e-commerce, website kelembagaan baik swasta ataupun publik, perpusatakaan
digital, situs komunitas dll.
WebML adalah
sebuah bahasa visual untuk menentukan struktur dari sebuah aplikasi web
termasuk didalamnya proses organisai dan penyajian konten web tersebut kedalam
format hypertext (Ceri , 2002). Dalam gambar berikut adalah pase dalam perancangan
web dengan menggunakan WEBML.
Gambar Konsep pengembangan
dengan
metode WEBML
Di dalam proses Data-Desaign
dalam gambar diatas diturunkan menjadi gambaran sebagai mana terdapat pada gambar berikut:
Catatan ini dikutip dari Google Developer (2009) yang merupakan langkah dasar untuk membangun sebuah aplikasi maps yang generate melalui bahasa pemrograman PHP dan Mysql.
Membangun Tabel Lokasi
Ketika kita membangun sebuah table di dalam Mysql yang ditujukan untuk pengembangan Google maps aplication kita harus memperhatikan beberapa aspek yakni dengen menyediakan kolom lat (latitude dalam bahasa indonesia berarti garis lintang) dan long (longitude berarti garis bujur), kita dapat menspesifikasikan atribut tersebut sebagai float dengan ukuran (10,6). Itu berarti terdapat angka sebanyak 6 digit setelah desimal (tanda titik digunakan sebagai pengganti koma). Dan maksimal 4 digit sebelum desimal sebagai contoh -123.456789 derajat. Tabel tersebut juga harus memiliki idsebagai atribut yang didefinisikan sebagai primary key, dan juga atribut yang digunakan untuk menjelaskan tipe atau jenis tempat sebagai contoh restoran dan bar. Berikut adalah tampilan database melalui antarmuka yang terdapat dalam PhpMyadmin sebagimana tanpak pada gambar 2.5 ,
Gambar Membuat Tabel Dengan Menentukan parameter atribut (developer.google.com,2007)
Jika tidak memiliki akses pada phpMyadmin maka dapat menggunakan script berikut pada mysql commands,
CREATE TABLE `markers` ( `id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY , `name` VARCHAR( 60 ) NOT NULL , `address` VARCHAR( 80 ) NOT NULL , `lat` FLOAT( 10, 6 ) NOT NULL , `lng` FLOAT( 10, 6 ) NOT NULL , `type` VARCHAR( 30 ) NOT NULL ) ENGINE = MYISAM ;
Mengisi Data Kedalam Tabel
Setelah membuat tabel ,maka waktunya untuk mengisinya dengan data. Berikut adalah 10 sample data tempat di Seatlle yang telah tersedia dibawah ini kita dapat mengimport kedalam tabel dengan beberapa jenis format, termasuk dengan menggunakan CSV(comma-sparated values). Microsoft Excel dan google Spreedsheet adalah salah satu aplikasi yang dapat melakukan eksport kedalam format CSV, sehingga akan lebih mudah melakukan exporting dan importing dari data dalam spreedsheets kedalam Mysql melalui format CSV.
Pada titik ini kita harus membuat tabel marker yang berisi sample data. dan menulis beberapa stament PHP untuk mengexport data dalam tabel MySQL kedalam XML yang dapat dipanggil melalui asynchronous javascript dikenal sebagai AJAX. (Google Developer, 2013). Pertama kita harus memasukan script berisi informasi koneksi kedalam file terpisah, hal ini pada umunya dilakukan untuk menjaga kerahasiaan informasi yang tidak ingin dibagikan.berikut contohnya:
Proses parsing Mysql dengan menggunakan Echo pada PHP
Ketika menggunakan fungsi echo dalam melakukan conversi data dari Mysql ke XML , anda membutuhkan sebuah function yang berfungsi untuk mengencode beberapa special entities karakter seperti (<,>,”,’) agar lebih bersahabat dengan XML.
Dalam PHP, ketika pertama kali melakukan koneksi kedalam database maka kita akan mengeksekusi sebuah statmen SELECT * (‘*’ bermakna memilih semua) query yang berada dalam tabel marker . lalu mencetak (echo out) parent node marker kedalam XML, dan mengulangi sisanya sehingga semua baris dieksekusi. Untuk setiap baris didalam tabel (setiap lokasi), kita membutuhkan sebuah function untuk melakukan parsing terhadap setiap special entities seperti yang terdapat pada alamat lokasi dan menutupnya dengan menggunakan tag marker (Google Developer, 2013).Script php yang dimaksudkan adalah seperti berikut (phpsqlajax_genxml.php):
// Membuka koneksi $connection=mysql_connect (localhost, $username, $password); if (!$connection) { die('Not connected : ' . mysql_error()); }
// Set database yang aktif $db_selected = mysql_select_db($database, $connection); if (!$db_selected) { die ('Can\'t use db : ' . mysql_error()); }
// Memilih semua baris pada tabel marker $query = "SELECT * FROM markers WHERE 1"; $result = mysql_query($query); if (!$result) { die('Invalid query: ' . mysql_error()); }
header("Content-type: text/xml");
// Memulai XML dengan mencetak parent marker echo '<markers>';
// Melakukan pengulangan untuk setiap node dibawah parent marker while ($row = @mysql_fetch_assoc($result)){ // Menambahkan kedalam XML echo '<marker '; echo 'name="' . parseToXML($row['name']) . '" '; echo 'address="' . parseToXML($row['address']) . '" '; echo 'lat="' . $row['lat'] . '" '; echo 'lng="' . $row['lng'] . '" '; echo 'type="' . $row['type'] . '" '; echo '/>'; }
// End XML echo '</markers>';
?>
Mengecek XML yang Dihasilkan Panggil file phpsqlajax_genxml.php kedalam broswer untuk mengecek apakah hasil parsing sudah valid. berikut adalah merupakan hasil cetak XML yang valid .
Membangun Maps Ketika hasil XML valid dan bekerja, maka langkah selanjutnya adalah membuat maps dengan menggunakan javascript sesuai dengan keperluan user. Dibawah ini adalah contoh script berikut hasilnya :
<!DOCTYPE html > <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
function load() { var map = new google.maps.Map(document.getElementById("map"), { center: new google.maps.LatLng(47.6145, -122.3418), zoom: 13, mapTypeId: 'roadmap' }); var infoWindow = new google.maps.InfoWindow;
// Rubah nama ini sesuai sengan script php yg menghasilkan script XML downloadUrl("phpsqlajax_genxml.php", function(data) { var xml = data.responseXML; var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var name = markers[i].getAttribute("name"); var address = markers[i].getAttribute("address"); var type = markers[i].getAttribute("type"); var point = new google.maps.LatLng( parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); var html = "<b>" + name + "</b> <br/>" + address; var icon = customIcons[type] || {}; var marker = new google.maps.Marker({ map: map, position: point, icon: icon.icon, shadow: icon.shadow }); bindInfoWindow(marker, map, infoWindow, html);
} }); } function bindInfoWindow(marker, map, infoWindow, html) { google.maps.event.addListener(marker, 'click', function() { infoWindow.setContent(html); infoWindow.open(map, marker); }); } function downloadUrl(url, callback) { var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest; request.onreadystatechange = function() { if (request.readyState == 4) { request.onreadystatechange = doNothing; callback(request, request.status); } }; request.open('GET', url, true); request.send(null); } function doNothing() {} //]]> </script> </head> <body onload="load()"> <div id="map" style="width: 500px; height: 300px"></div> </body> </html>
Sebelum kita membahas mengenai diagram kelas mari kita fahami mengenai perbedaan antara kelas dan objek hal ini dimaksudkan agar menghindari kesalahfahaman karena seringkali dalam beberapa materi lain kelas disebutkan sebagai objek itu sendiri. Kelas merupakan blueprint dari object, kelas adalah konsep yang membentuk sebuah object jika dianalogikan maka relevan dengan pernyatan bahwa object “Mobil Ferrari” pada dasarnya adalah termasuk kedalam kelas “mobil” perhatikan diagram berikut:
dalam bahasa java jika kita ingin membangun sebuah objek berdasarkan kelas tertentu maka sebagai berikut :
NamaKelas object = new NamaKelas;
Atau jika disesuaikan dengan kasus diatas menjadi :
Mobil ferarri = new Mobil; // relevan dengan pernyataan buatlah sebuah objek baru dengan nama Ferarri dari kelas Mobil.
Dalam rekayasa perangkat lunak, diagram kelas didalam Unified Modeling Language (UML) adalah jenis diagram struktur statis yang menggambarkan struktur dari suatu sistem dengan menunjukkan kelas sistem, atribut, operasi atau metode, dan hubungan antara kelas.
Sebuah kelas digambarkan sebagai kotak dengan tiga level yakni:
1.Pada bagian atas judul dicetak tebal dengan text rata tengah dengan huruf pertama kapital,
2.Pada bagian tengah atribut dicetak rata kiri dengan hurup pertama non kapital dilengkapi dengan tipe data;
3.Pada bagian bawah adalah metode yang digunakan dalam kelas diakhiri dengan kurung kurawal.
lambang (+/-/#) pada kelas menggambarkan aksesibilitas dari atribut atau metode hal ini senada dengan konsep enkapsulasi dimana:
·(+) bermakna public sehingga atribut/metode dapat diakses secara langsung dari luar kelas.
·(-) bermakna private dimana kelas/atribut hanya bisa diakses oleh metode didalam kelas itu sendiri dan
·(#) bermakna protected dimana kelas/atribut hanya bisa diakses oleh kelas yang berada dalam package yang sama atau subclass dari kelas itu sendiri.
Ada berbagai macam jenis relasi dalam diagram kelas yakni:
1.Asosiasi ini mewakili hubungan statis antara dua kelas bersama dengan multiplisitas. Misalnya seorang karyawan dapat memiliki satu alamat utama, tetapi dapat memiliki beberapa nomor ponsel.
Asosiasi bisa searah (ditunjukkan oleh panah di salah satu ujung) atau dua arah (ditunjukkan oleh panah pada kedua ujung). Multiplisitas mendefinisikan berapa banyak objek yang terlibat berikut ini merupakan table dali jenis multiplisitas berikut contohnya:
·(0..1)tidak ada atau satu objek .Contoh : Sebuah kursi penerbangan dapat memiliki atau satu penumpang saja.
·(1) --Tepat satu objek .Contoh:satu order hanya dapat memiliki satu pelanggan.
·(0 .. *) atau (*) -- Nol atau lebih objek .Contoh:kelas A dapat memiliki nol atau lebih siswa.
·(1 .. *) Satu atau lebih objek (setidaknya satu). Contoh: pesawat dapat memiliki satu atau lebih penumpang.
2.Generalisasi Properti ini merupakan fitur warisan dari konsep berorientasi objek. Dimana child mewarisi atribut dan method dari parentnya namun disisi lain mengalami penambahan atau modifikasi didalam java dikenal sebagai override.
3.Realisasi merupakan relasi yang terjadi antara class dan interface. Dimana interface merupakan media penghubungdianalogikan sebagai sebuah port .
4.Dependensi merupakan relasi dimana sebuah class membutuhkan class lainnya untuk dapat berjalan dalam hal ini dapat berbentuk parameter object yang dieksekusi dalam method class lainnya
5.Agregasi merupakan relasi dimana sebuah class merupakan bagian utuh dari class lainya sering digambarkan dengan kata “has a” berarti memiliki contoh sekolah memiliki murid .
6.Komposisi sama halnya dengan agregasi dimana suatu class merupakan bagian utuh dari class lainya namun pada hal ini satu bagian class tersebut akan sangat bergantung pada keberadaan class lainya. Contoh Sebuah perusahaan memiliki pekerja yang diikat dalam sebuah kontrak dan apabila perusahaan tersebut bangkrut maka secara otomatis keberadaan pekerja tidak dibutuhkan lagi.
