2. DASAR TEORI
2.1 IP Address
IP Address adalah singkatan dari Internet Protocol Address. IP address digunakan sebagai alat identifikasi untuk tiap komputer dalam jaringan Internet berbasis TCP/IP. IP address berisi deretan angka biner. IP versi 4 (IPv4) menggunakan deretan angka biner sepanjang 32-bit. Sedangkan IP versi 6 (IPv6) menggunakan deretan angka biner sepanjang 128-bit.
IP address memiliki dua fungsi. Selain sebagai alat identifikasi host atau antarmuka jaringan, juga sebagai alamat lokasi jaringan. Fungsi IP address sebagai alamat lokasi jaringan dapat diilustrasikan sebagai sebuah nama untuk mempermudah mengingat kata daripada mengingat deretan angka yang menunjuk pada suatu website, sebuah alamat untuk mengetahui di mana website tersebut, dan juga sebuah rute agar dapat mencapai alamat tersebut.
Pada awalnya para pembuat sistem IP address menggunakan bilangan sepanjang 32-bit. Tetapi karena semakin tinggi tingkat pertumbuhan jumlah dan kapasitas Internet, maka menyebabkan dibutuhkan sistem pengalamat yang lebih besar. Sistem pengalamatan tersebut dikenal sebagai IPv6 dan diperkenalkan sejak tahun 1995.
2.2 Internet Protocol Version 6 (IPv6)
Perkembangan Internet yang sangat besar menyebabkan sistem pengalamatan dengan menggunakan IPv4 menjadi habis dan memerlukan sebuah protokol baru untuk Internet. Sejak tahun 1991, IETF (Internet Engineering Task Force) memutuskan bahwa sistem pengalamatan dengan IPv4 telah abis dan pada tahun 1994, IETF memperkenalkan sistem pengalamatan dengan next generation IP address (IPng) atau IPv6.
Beberapa hal yang ditingkatan pada IPv6 adalah address space menjadi 128-bit dari 32-bit, stateless autoconfiguration yang berarti tidak perlu konfigurasi IP address untuk end system, ukuran header menjadi 40 octets (IPv4 hanya 20 octets), tidak ada triangular routing dan tidak ada broadcast.
Gambar 2.1. Perbedaan IPv4 dan IPv6
Pada gambar 2.1 dapat dilihat bahwa IPv4 mempunyai 10 basic header field (version, IHL, type of service, total length, identification, flags, fragment offset, time to live, protocol, dan header checksum) sedangan IPv6 hanya mempunyai 6 basic header field dengan satu field baru, yaitu flow label.
Format header pada protocol IPv4:
a. Version
Version ini berisi angka 4 yang menunjukan versi pada IPv4. Sedangkan pada IPv6 berisi angka 6. Ukuran field ini 4 bit.
b. IHL
Internet Header Length merupakan panjang header Internet (dalam 32 bit) dan mengarah ke permulaan data. Ukuran field ini 4 bit.
c. Tipe of Service
Mengindikasi layanan (service) yang diharapkan oleh paket yang bersangkutan, melintasi router-router internetwork IPv4. Size field ini 8 bit, yang terdiri atas bit-bit untuk prioritas, waktu delay, keluaran, dan karakteristik-karakteristik reliabilitas.
d. Total Length
Mengindikasikan panjang total paket IPv4 (IPv4 header + IPv4 payload), dan tidak memasukkan “framing” link-layer. Ukuran dari field ini adalah 16 bit.
e. Identification
Mengindikasi nilai yang ditetapkan pengirim paket untuk membantu reassembly fragment datagram. Ukuran dari field ini adalah 16 bit.
f. Flags
Mengidentifikasi flag-flag untuk proses fragmentasi. Size field ini 3 bit, tetapi hanya 2 bit yang ditetapkan untuk penggunaan saat ini. Terdapat dua flag, satu untuk menetapkan apakah paket IPv4 difragmentasikan dan satu untuk menetapkan apakah terdapat banyak fragmen untuk mengikuti fragmen ini.
g. Fragment Offset
Digunakan untuk mengindikasikan posisi fragmen, relative terhadap payload IPv4 original. Ukuran field ini 13 bit.
h. Time To Live (TTL)
Mengindikasikan jumlah link maksimum di mana paket IPv4 dapat berjalan sebelum dibuang. TTL originalnya digunakan sebagai hitungan waktu di mana router IPv4 menetapkan besar waktu yang dibutuhkan (dalam detik) untuk mengantarkan paket.
i. Protocol
Mengidentifikasi protocol layer lebih-tinggi (upper-layer protocol). Ukuran field ini 8 bit. Field protocol digunakan untuk “demultiplex” paket IPv4 ke protocol upper-layer.
j. Header Checksum
Memberikan kapabiliti checksum (pengecekan eror-eror), tetapi dalam header IPv4 saja. Payload IPv4 tidak dimasukkan dalam kalkulasi checksum, karena biasanya memiliki checksum tersendiri. Setiap paket-paket IPv4 akan memeriksa checksum dan dengan sendirinya membuang paket jika pemeriksaan checksum gagal. Saat sebuah router memforward paket, ia harus menurunkan nilai TTL. Oleh karena itu header checksum dihitung ulang pada setiap hop di sepanjang sumber dan tujuan.
k. Source Address
Ukuran dari field ini adalah 32 bit. Field ini digunakan untu menyimpan IP address (IPv4 address) host pengirim.
l. Destination Address
Ukuran dari field ini adalah 32 bit. Field ini digunakan untu menyimpan IP address (IPv4 address) host tujuan.
m. Option
Field ini digunakan untuk menyimpan satu atau lebih opsi IPv4. Size field ini adalah multiple 32 bit. Jika opsi-opsi tersebut tidak genap menggunakan 32 bit, opsi-opsi pelapis harus ditambahkan sehingga header genap memiliki blok-blok 4 byte, yang dapat diindikasikan oleh field Internet Header Length (IHL).
n. Padding
Jika kurang dari batas minimum, yaitu 46 bytes, maka ditambah bit 0 sesuai ukuran data hingga mencapai batas minimum. (Rafiudin, 2005, p. 27).
Format header pada protokol IPv6 : a. Version
Mempunyai besar yang sama seperti version pada IPv4, yaitu 4-bit. Version ini berisi angka 6 yang menunjukan versi pada IPv6. Sedangkan pada IPv4 berisi angka 4.
b. Traffic class
Memiliki ukuran yang sama dengan type of service (ToS) pada IPv4. Header berukuran 8-bit ini memberi tanda packet dengan traffic class yang digunakan pada differentiated services (DiffServ). Fungi pada header ini sama untuk IPv6 dan IPv4.
c. Flow label
Merupakan header baru dengan ukuran field 20-bit. Header ini menandakan sebuah aliran untuk IP packets. Header ini dapat digunakan untuk teknik multilayer switching dan mempercepat packet-switching.
d. Payload length
16-bit field yang sejenis dengan total length field pada IPv4.
e. Next header
Berukuran 8-bit yang menunjuk pada tipe informasi yang dapat berupa transport-layer packet (TCP atau UDP). Next header field merupakan field yang serupa dengan protocol field pada header IPv4.
f. Hop limit
Merupakan header yang menentukan maximum jumlah hops yang dikirim oleh IP packet. Header ini berukuran 8-bit dan serupa dengan time to live (TTL) field pada IPv4.
g. Source address
Field ini mempunyai besar 16 octets atau 128-bits yang menunjuk pada alamat asal (source) dari packet.
h. Destination address
Menunjuk pada alamat tujuan (destination) dari packet. Field ini berukuran 16 octets atau 128-bits. (Rafiudin, 2005, p. 28).
Sebuah jaringan IPv6 dapat dihubungkan dengan jaringan IPv4 dengan bantuan router yang dapat melewatkan paket dengan format berbeda. Paket IPv6 akan dibungkus sehingga dapat dipahami oleh router maupun host yang belum mendukung IPv6. Kasus semacam ini sering disebut tunneling IPv6 over IPv4 (IPv6 over IPv4).
2.2.1. IPv6 Addressing
IPv6 mempunyai panjang alamat 128-bit. Sehingga jumlah alamat ada sebanyak 2128 = 3,4x1038 alamat. Format notation pada IPv6 menggunakan colon hexadecimal. Setiap colon terdiri dari 16-bit fields. Dan 16-bit tersebut dikonversi ke 4 digit angka hexadesimal.
Gambar 2.2. Contoh IPv6 addressing
Pengurangan nilai nol pada IPv6 addressing hanya dapat dilakukan 1 kali. Misalnya, pada alamat IPv6 FE08:0000:0000:002A:0000:0000:0000:0000, group of zeroes dari alamat tersebut menjadi FE08:0:0:2A:0:0:0:0, sehingga double colons hanya digunakan pada group of zeroes dengan total angka nol terbanyak. Pengalamatan tersebut menjadi FE08:0:0:2A::. (Sofana, 2012, p. 203).
2.2.2. Format Penulisan IPv6
Ada 3 cara atau format penulisan IPv6 address, yaitu : a. Preferred
Merupakan cara formal, yaitu menggunakan 8 segmen bilangan heksadesimal yang masing-masing dipisahkan oleh colon atau symbol “:”. Contoh:
2001:A008:0000:1234:9977:0AC1:0000:2334.
b. Compressed
Format penulisan ini banyak digunakan untuk kasus-kasus IP address yang beberapa segmennya menggunakan sejumlah bilangan 0 (nol). Penulisan kompresi sederetan 0 untuk sebuah IP address hanya boleh dilakukan satu kali, tidak boleh lebih.
c. Mixed
Format ini banyak digunakan pada lingkungan gabungan IPv4 dan IPv6, alamat dapat didefinikasn dalam format x:x:x:x:x:x:d.d.d.d. Terdapat 6 segmen bilangan heksadesimal sepanjang 16-bit (x) yang dipisahkan oleh “:”, dan 4 segmen bilangan decimal sepanjang 8-bit (d) yang dipisahkan oleh “.”.
Istilah yang diberikan untuk jenis alamat ini adalah IPv4-compatible IPv6 address. Tetapi jika lingkungan IPv4 tidak mendukung IPv6, maka format penulisan IP address menjadi berbeda. Alamat IPv4 direpresntasikan dalam bentuk lain yang disebut IPv4-mapped IPv6 address. Formant IPv4-mapped IPv6 address adalah x:x:x:x:x:FFFF:d.d.d.d. (Sofana, 2012, pp. 202-206).
2.2.3. IPv6 Addressing Model
Secara garis besar model dari pengalamatan IPv6 terdiri dari pengalamatan unicast, anycast, dan multicast.
2.2.3.1. Unicast
Alamat unicast merupakan jenis IP address yang digunakan untuk identifikasi sebuah interface saja. Paket yang dikirimkan hanya akan diterima oleh sebuah interface yang menggunakan alamat tersebut. Secara umum, unicast address pada IPv6 berfungsi sama dengan unicast address pada IPv4.
Alamat unicast dibagi menjadi beberapa jenis :
a. Alamat unicast global. Alamat ini mirip dengan alamat publik pada IPv4.
Seperti alamat publik pada IPv4 yang dapat secara global dirujuk oleh host- host di Internet dengan menggunakan proses routing, alamat IPv6 juga mengimplementasikan hal yang serupa. Struktur alamat IPv6 unicast global terbagi menjadi topologi tiga level (Public, Site, dan Node). Global unicast address dapat dikenali jika bit-bit awal adalah 001. Prefix yang digunakan oleh alamat ini adalah 2000::/3. (Sofana, 2012, p. 210).
Tabel 2.1. Struktur Alamat Unicast Global pada IPv6
Panjang Field Keterangan
3 bit 001
Berfungsi sebagai tanda pengenal alamat, bahwa alamat ini adalah sebuah alamat IPv6 unicast global.
13 bit Top Level Aggregation Identifier (TLA ID)
Berfungsi sebagai level tertinggi dalam hierarki routing. TLA ID diatur oleh Interet Assigned Name Authority (IANA), yang mengalokasikannya ke dalam daftar Internet registry, yang kemudian
mengalokasikan sebuah TLA ID ke sebuah ISP global.
8 bit Res
Direservasikan untuk penggunaan pada masa yang akan dating (mungkin untuk memperluas TLA ID dan NLA ID.
24 bit Next Level Aggregation Identifier (NLA ID)
Berfungsi sebagai tanda pengenal) site customer tertentu.
16 bit Site Level Aggregation Identifier (SLA ID)
Mengijinkan hingga 65536 (216) subnet dalam sebuah situs individu. SLA ID ditetapkan di dalam sebuah site. ISP tidak
Tabel 2.1. Struktur Alamat Unicast Global pada IPv6 (sambungan) dapat mengubah bagian alamat ini.
64 bit Interface ID
Berfungsi sebagai alamat dari sebuah node dalam subnet yang spesifik (yang ditentukan oleh SLA ID).
Sumber: (Sofana, 2012, p. 214)
Gambar 2.3. Struktur alamat unicast global
b. Alamat unicast link-local merupakan jenis address yang mengijinkan sebuah komputer dapat berkomunikasi dengan komputer lainnya dalam satu subnet.
Alamat ini mirip dengan konfigurasi APIPA (Automatic Private Internet Protocol Addressing) dalam sistem operasi Microsoft Windows XP ke atas.
Host-host yang berada di dalam subnet yang sama akan menggunakan alamat- alamat ini secara otomatis agar dapat berkomunikasi. Alamat ini juga memiliki fungsi resolusi alamat, yang disebut dengan Neighbor Discovery.
IPv6 link-local dapat diketahui dari 10 bit awal yang diatur 1111 1110 10.
Prefix yang digunakan oleh unicast link-local adalah FE80::/10 dan 64-bit interface identifier. (Sofana, 2012, p. 209).
Gambar 2.4. Struktur alamat unicast link-local
c. Alamat unicast site-local mirip dengan alamat privat pada IPv4. Ruang lingkup dari sebuah alamat terdapat pada intranetwork dalam sebuah site milik sebuah organisasi. Penggunaan alamat unicast global dan unicast site-local dalam sebuah jaringan adalah mungkin. Alamat site-local dapat dikenali jika bit-bit awalnya adalah 1111111011. Prefix yang digunakan oleh alamat ini adalah FEC0::/10. Alamat unicast site-local masih digunakan untuk tes lab.
(Sofana, 2012, p. 209).
d. Alamat unicast unspecified
Alamat unicast unspecified adalah alamat yang belum ditentukan oleh seorang administrator atau tidak menemukan sebuah DHCP Server untuk meminta alamat. Alamat ini sama dengan alamat IPv4 yang belum ditentukan, yaitu 0.0.0.0. Nilai alamat ini sama dengan alamat pada IPv6 0:0:0:0:0:0:0:0 atau disingkat dua titik dua (::). Unicast unspecified address tidak boleh digunakan untuk identifikasi interface apa pun (baik riil maupun virtual interface).
Alamat jenis ini tidak boleh diberikan sebagai alamat tujuan dari paket yang akan dikirim atau dalam header routing. (Sofana, 2012, p. 210).
e. Alamat unicast loopback
Alamat unicast loopback adalah alamat yang digunakan untuk mekanisme interprocess communication (IPC) dalam sebuah host. Dalam IPv4 alamat loopback adalah 127.0.0.1. Sedangkan pada IPv6 adalah 0:0:0:0:0:0:0:1 atau ::1. Alamat ini hanya dapat diberikan pada virtual interface dan tidak boleh digunakan untuk identifikasi interface fisik (riil). Loopback address tidak boleh digunakan sebagai alamat asal dari paket yang dikirimkan dan tidak dapat di-forward oleh router. (Sofana, 2012, p. 211).
f. Alamat unicast 6to4
Adalah alamat yang digunakan oleh dua host IPv4 dan IPv6 dalam Internet IPv4 agar dapat saling berkomunikasi. Alamat ini sering digunakan sebagai pengganti alamat publik IPv4. Alamat ini aslinya menggunakan prefix alamat 2002::/16 dengan tambahan 32-bit dari alamat IPv4 dengan format
2002:WWXX:YYZZ::/48, di mana WWXX dan YYZZ adalah representasi dalam notasi colon-decimal format dari notasi dotted-decimal format w.x.y.z dari alamat publik IPv4. Meskipun demikian, alamat ini sering ditulis dalam format IPv6 unicast global address 2002:WWXX:YYZZ:SLA ID:Interface ID. Contohnya adalah jika diketahui alamat IPv4 157.60.90.123, jika diterjemahkan menjadi IPv6 address adalah 2002:9D3C:5B7B::/48. (Sofana, 2012, p. 211).
g. Alamat unicast ISATAP
Merupakan alamat yang digunakan oleh dua host IPv4 dan IPv6 dalam sebuah Internet IPv4 agar dapat saling berkomunikasi. Alamat ini menggabungkan prefiks alamat unicast link-local, alamat unicast site-local atau alamat unicast global yang berukuran 64-bit dengan 32-bit ISATAP Identifier (0000:5EFE), lalu diikuti 32-bit alamat IPv4 yang dimiliki oleh interface atau sebuah host.
Prefiks yang digunakan dalam alamat ini dinamakan dengan subnet prefix.
Alamat ISATAP dapat menangani alamat privat IPv4 dan alamat publik IPv4.
(Sofana, 2012, p. 212).
2.2.3.2. Anycast
Alamat anycast pada IPv6 mirip dengan alamat anycast dalam IPv4.
Alamat anycast pada IPv6 diimplementasikan dengan cara yang lebih efisien dibandingkan dengan IPv4. Alamat anycast digunakan oleh Internet Service Provider (ISP) yang memiliki banyak klien. Alamat anycast menggunakan ruang alamat unicast tetapi memiliki fungsi yang berbeda dari alamat unicast.
IPv6 menggunakan alamat anycast untuk mengidentifikasi beberapa interface yang berbeda. IPv6 akan menyampaikan paket-paket yang dialamatkan ke sebuah alamat anycast ke interface terdekat yang dikenali oleh alamat tersebut.
Alamat anycast menyampaikan paket kepada salah satu dari banyak penerima.
(Sofana, 2012, p. 213).
2.2.3.3. Multicast
Alamat multicast IPv6 sama seperti alamat multicast pada IPv4.
Multicast address digunakan untuk identifikasi sekumpulan interface. Paket yang dikirim ke multicast address akan diterima oleh semua interface yang menggunakan alamat tersebut. Prefiks alamat yang digunakan oleh alamat multicast adalah FF00::/8. Oktet kedua dari struktur alamat multicast yang berukuran 8-bit berisi flags dan scope dari multicast address. Alamat multicast adalah FF00:: sampai FF0F:: dipesan secara permanen. (Sofana, 2012, p. 208).
Tabel 2.2. Struktur Alamat Multicast pada IPv6
Panjang Field Keterangan
8 bit 1111 1111
Tanda pengenal bahwa alamat ini adalah alamat multicast (FF).
4 bit Flags
Berfungsi sebagai tanda pengenal apakah alamat ini adalah alamat transient atau bukan. Jika nilainya 0, maka bukan alamat transient. Alamat ini merujuk pada alamat multicast yang ditetapkan secara permanen.
4 bit Scope
Berfungsi untuk mengindikasikan cakupan lalu lintas multicast, seperti interface-local, link-local, site-local, organization-local, atau global.
112 bit Group
ID Berfungsi sebagai tanda pengenal group multicast.
Sumber: Media Wiki (2011)
Gambar 2.5. Struktur alamat multicast
2.2.4. Perhitungan Prefix Length pada IPv6
Sama seperti IPv4, pengalamatan IPv6 dapat dibagi dengen menggunakan high-order bit order bit yang belum memiliki nilai tetap untuk membuat prefix alamat yang disubnet. Proses ini digunakan untuk meringkas tingkat dalam hirarkhi pengelamatan (dengan prefix yang kurang dari 64) atau untuk menentukan subnet tertentu atau network segment (dengan panjang prefix 64). Proses subnetting pada IPv4 berbeda dengan proses subnetting (prefix length) pada IPv6. Perbedaan tersebut terletak pada pendefinisian host ID pada alamat.
Pada IPv4, host ID didapat dari berbagai panjang tergantung pada skema subnetting, Untuk IPv6 host ID adalah interface ID dari alamat unicast IPv6 dan selalu berukuran 64 bit.
Proses prefix length ini diasumsikan bahwa prefix length dilakukan dengan membagi 16 bit address space dari subnet ID menggunakan high-order bit dalam subnet ID. Proses prefix length pada IPv6 adalah sebagai berikut :
Berdasarkan pada s (jumlah yang ditentukan untuk perhitungan prefix length), m (prefix length dari alamat yang akan disubnet), dan F (nilai heksadesimal dari subnet yang akan disubnet), lakukan perhitungan:
f = m – 48
f adalah bit dari subnet ID yang sudah fix.
n = 2s
n adalah address prefix yang didapatkan i = 216-(f+s)
i adalah nilai tambahan antara tiap ID subnet baru berturut-turut (dalam bentuk heksadesimal).
Buat tabel dua kolom dengan n baris. Kolom pertama diisi degan prefix number yang dimulai dengan 1. Dan kolom kedua diisi dengan alamat baru setelah proses subnet.
Pada baris pertama, berdasarkan F, nilai heksadesimal dari subnet ID yang disubnet, siapkan address prefix yang disubnet menjadi 48-bit prefix:F::/l.
Baris berikutnya isikan dengan 48-bit prefix:F + i::/l.
Ulangi langkah sebelumnya hingga tabel komplit (sejumlah n).
Contohnya, lakukan perhitungan prefix length untuk global address 2001:DB8:0:C000::/51 sebanyak 3 bit. Dari contoh tersebut didapat F = 0xC000, s = 3, dan f = 51 – 48 = 3. Sehingga akan didapat hasil subnet yang akan didapat sebesar 8 (n = 23). Nilai tambah (i) adalah 0x400 (i = 216-(f+s) = 1024 = 0x400).
Prefix baru yang didapat adalah 54 (l = 48+3+3). (Davies, 2008, p. 70).
2.3 HTML5
HTML (HyperText Markup Language) merupakan bahasa pemrograman terstruktur yang dikembangkan untuk berbagi informasi melalui Internet. HTML terus dikembangkan agar dapat menampilkan lebih banyak konten selain teks dan gambar, seperti menu interaktif, suara, video, dan lain-lain. Pada tahun 2004, beberapa anggota W3C (world wide web consortium) mendirikan sebuah kelompok baru bernama WHATWG (Web Hypertext Application Technology Working Group) untuk mengembangkan HTML5. (Jayan, 2012, p. 1).
HTML5 adalah versi kelima dari HTML yang masih dalam pengembangan. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru yang mudah dibaca oleh manusia ataupun mesin.
Untuk menambah keluwesan pemformatan, pada HTML5 telah dispesifikasikan pengkodean application programming interfaces (APIs).
Beberapa API terbaru pada HTML5 antara lain :
Elemen canvas, sebagai mode untuk menggambar object dua dimensi (2D).
Gambar 2.6. Contoh penggunaan elemen canvas pada file html
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid
#000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
</body>
</html>
Dengan tag <canvas>, area tersebut dapat digunakan untuk menggambar grafik secara dinamis menggunakan JavaScript. Contohnya seperti shape lingkaran, garis diagonal, hingga grafik 3 dimensi.
Drag and Drop, API dapat digunaan untuk memindahkan sesuatu dengan cara men-drag dan meletakkannya pada tempat yang dituju.
Gambar 2.7. Contoh penggunaan drag and drop pada file html
Drag and drop merupakan fitur standar pada aplikasi komputer saat ini, di mana user mengambil suatu objek lalu menarik objek tersebut ke lokasi tujuan.
Fitur drag and drop tidak didukung oleh browser Opera dan Safari 5.1.2.
(w3school.com, 2013).
2.4 Depth First Search
Depth first search adalah sebuah teknik pencarian dengan menelusuri titik yang terdalam dari sebuah tree. Teknik ini mengunjungi seluruh leaf pada tree yang ada terlebih dahulu tanpa melihat bobot yang ada pada masing-masing leaf. Setelah leaf pada bagian tertentu telah dikunjungi dan belum mendapatkan goal, maka akan dilakukan backtracking menuju leaf lainnya yang belum dikunjungi. (Russell & Norvig, 2003, pp. 75-79).
<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) { ev.preventDefault(); } function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data)); }
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">
</body>
</html>
Gambar 2.8. Depth First Search
Sebagai contoh, seperti pada gambar di atas jika ingin mencari jalan dari A ke F dengan menggunakan depth first search langkah-langkahnya adalah sebagai berikut :
1. Pertama dimulai dengan titik A, dengan menggunakan tiga istilah yaitu list_visited, neighbor dan S. List_visited menyatakan titik yang pernah dilalui, neighbor menyatakan titik yang berhubungan dengan titik sekarang, sedangkan S menyatakan titik antara start vertex dan end vertex.
Gambar 2.9. Titik A
list_visited : A neighbor : <kosong>
S : A
2. Pertama penelusuran dilakukan dengan mengecek titik A, terdapat 2 titik yang berhubungan dengan titik A. Titik tersebut adalah titik B dan C.
Gambar 2.10. Neighbor titik A
list_visited : A neighbor : B, C S : A
3. Penelusuran dilanjutkan dengan titik B dan mengecek apakah B adalah F. Jika bukan maka dilakukan penelusuran terhadap titik B. Titik D dan E merupakan titik yang berhubungan dengan B.
Gambar 2.11. Neighbor titik D dan E
list_visited : A, B neighbor : D, E S : A, B
4. Kemudian dilakukan pengecekan terhadap titik D dan masih belum dapat menemukan titik F.
list_visited : A, B, D neighbor : <kosong>
S : A, B, D
5. Dilanjutkan dengan titik E. Titik E terdapat 2 cabang baru yaitu F dan G.
Gambar 2.12. Neighbor titik F dan G
list_visited : A, B, D, E neighbor : F, G
S : A, B, E
6. Pada penelusuran berikutnya ternyata didapatkan titik F. Maka pencarian dihentikan.
Gambar 2.13. Titik F ditemukan
list_visited : A, B, D, E, F neighbor : <kosong>
S : A, B, E, F
Teknik ini dapat diimplementasikan menggunakan tree search dengan antrian last in first out (LIFO) atau menggunakan fungsi rekursif. Depth first search memiliki persyaratan memori yang sederhana. Teknik ini hanya perlu menyimpan titik yang dijelajahi dan juga titik yang belum dijelajahi. Setelah dijelajahi maka titik tersebut dihapus dari memori.
Psedeucode Depth First Search dijelaskan pada Gambar 2.24.
Gambar 2.14. Psedeucode Depth First Search
2.5 KineticJS
Saat ini sudah banyak tersedia library JavaScript yang dapat dimanfaatkan untuk menggambar objek. Salah satu library tersebut adalah KineticJS. KineticJS berisi sekumpulan library, method, event dan prosedur yang khusus digunakan untuk menggambar objek dua dimensi.
Secara umum KineticJS sudah menyediakan objek-objek dasar seperti gambar garis, persegi, lingkaran, elips, poligon, dan lain-lain. Library KineticJS dapat diunduh di www.kineticjs.com.
Untuk menggambar objek diperlukan deklarasi “stage” dan “layer”.
Stage mengacu pada bidang gambar secara keseluruhan. Dengan kata lain, semua objek yang digambar berada di atas area stage. Sedagkan layer mengacu pada lapisan di mana sebuah objek digambar. Layer bermanfaat jika banyak objek yang digambar. Contoh deklarasi stage dan layer dapat dilihat pada Gambar 2.15.
s.createStack()
dfs( v:StartVertex, z:EndVertex ) { mark v as visited
s.push(v)
if ( v == z ){
print s.elements() return
}
for (each vertex u adjacent to v) if( ! visited(u) ) {
dfs(u,z) s.pop(u) }
s.pop(v) }
Gambar 2.15. Deklarasi stage dan layer
2.6 JQuery
JQuery adalah sebuah JavaScript library yang khusus digunakan untuk mengubah dokumen halaman dengan cepat. (Benedetti & Cranley, 2011, p. 5).
JQuery pertama kali dirilis oleh John Resig pada tahun 2006. Dalam perkembangannya, JQuery mampu membuat penulisan coding jadi lebih ringkas dan menghasilkan interaksi yang lebih halus. (Franklin, 2013, p. 15).
JQuery memungkinkan untuk mengubah tampilan, lokasi, atau tindakan sebuah element pada halaman website. JQuery code memberikan element teks dan gambar pada halaman website dengan berbagai efek khusus seperti:
Hide : menyembunyikan element pada halaman website.
Show : menampilkan sebuah element pada halaman website jika element dalam keadaan hide.
sildeDown : slide ke bawah sebuah element pada halaman website.
sildeUp : slide ke atas sebuah element pada halaman website.
Animate : animasi sebuah element dalam arah tertentu. (Beighley, 2010, p. 9).
Dalam jQuery dan JavaScript, “click” disebut sebagai suatu event.
Sebuah event adalah mekanisme yang memungkinkan untuk menjalankan sepotong code ketika sesuatu terjadi pada halaman web. Code yang akan dijalankan adalah fungsi, dan fungsi tersebut memungkinkan untuk membuat jQuery lebih efisien dan dapat digunakan kembali. Gambar berikut menjelaskan bagaimana event “click” bekerja.
Gambar 2.16. Cara kerja event ”click” pada jQuery Sumber : (Benedetti & Cranley, 2011, p. 79)
Event listeners adalah cara browser memperhatikan apa yang dilakukan seseorang pada halaman web, kemudian memberitahu JavaScript jika perlu melakukan sesuatu atau tidak. JavaScript memberikan cara paling mudah untuk menambahkan event listeners ke setiap element pada halaman web, sehingga pengguna tidak lagi hanya mengeklik link dan button.
Gambar 2.17. Cara kerja event listener Sumber : (Benedetti & Cranley, 2011, p. 80)
2.7 CKEditor
CKEditor adalah sebuah text editor HTML yang siap untuk digunakan dan dirancang untuk menyederhanakan pembuatan konten web. CKEditor adalah sebuah editor WYSIWYG (What You See Is What You Get) yang membawa fitur pengolah kata umum langsung ke halaman web. CKEditor adalah sebuah aplikasi open source, yang artinya dapat diubah dengan cara apapun seperti yang diinginkan. (Knabben, 2013).
Langkah-langkah untuk menggunakan CKEditor pada sebuah halaman PHP : (Stack Exchange Inc., 2013)
Download file CKEditor. (http://ckeditor.com/download)
Ekstrak file hasil download pada folder website.
Tambahkan baris berikut pada file yang akan menampilkan CKEditor.
Letakan dalam tag <head>.
Untuk memanggil CKEditor gunakan class=”ckeditor” pada setiap tag
<textarea>.
