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.

5
Universitas Kristen Petra
 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.

6
Universitas Kristen Petra
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.

7
Universitas Kristen Petra
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.

8
Universitas Kristen Petra
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

9
Universitas Kristen Petra
 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).

10
Universitas Kristen Petra
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
Berfungsi sebagai tanda pengenal alamat,
3 bit 001 bahwa alamat ini adalah sebuah alamat
IPv6 unicast global.
Berfungsi sebagai level tertinggi dalam
hierarki routing. TLA ID diatur oleh
Interet Assigned Name Authority (IANA),
Top Level Aggregation
13 bit yang mengalokasikannya ke dalam daftar
Identifier (TLA ID)
Internet registry, yang kemudian
mengalokasikan sebuah TLA ID ke
sebuah ISP global.
Direservasikan untuk penggunaan pada
8 bit Res masa yang akan dating (mungkin untuk
memperluas TLA ID dan NLA ID.
Next Level Aggregation Berfungsi sebagai tanda pengenal) site
24 bit
Identifier (NLA ID) customer tertentu.
Mengijinkan hingga 65536 (216) subnet
Site Level Aggregation
16 bit dalam sebuah situs individu. SLA ID
Identifier (SLA ID)
ditetapkan di dalam sebuah site. ISP tidak

11
Universitas Kristen Petra
 Tabel 2.1. Struktur Alamat Unicast Global pada IPv6 (sambungan)
dapat mengubah bagian alamat ini.
Berfungsi sebagai alamat dari sebuah
64 bit Interface ID 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

12
Universitas Kristen Petra
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

13
Universitas Kristen Petra
 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).

14
Universitas Kristen Petra
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
1111 Tanda pengenal bahwa alamat ini adalah alamat multicast
8 bit
1111 (FF).
Berfungsi sebagai tanda pengenal apakah alamat ini adalah
alamat transient atau bukan. Jika nilainya 0, maka bukan alamat
4 bit Flags transient. Alamat ini merujuk pada alamat multicast yang
ditetapkan secara permanen.
Berfungsi untuk mengindikasikan cakupan lalu lintas
4 bit Scope multicast, seperti interface-local, link-local, site-local,
organization-local, atau global.
Group
112 bit Berfungsi sebagai tanda pengenal group multicast.
ID

Sumber: Media Wiki (2011)

Gambar 2.5. Struktur alamat multicast

15
Universitas Kristen Petra
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.
s
n=2

n adalah address prefix yang didapatkan

16-(f+s)
i=2

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

16
Universitas Kristen Petra
 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
3 16-(f+s)
sebesar 8 (n = 2 ). Nilai tambah (i) adalah 0x400 (i = 2 = 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).

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

Gambar 2.6. Contoh penggunaan elemen canvas pada file html

17
Universitas Kristen Petra
 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.

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

18
Universitas Kristen Petra
 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.

19
Universitas Kristen Petra
 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

20
Universitas Kristen Petra
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

21
Universitas Kristen Petra
 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.

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

22
Universitas Kristen Petra
 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.

23
Universitas Kristen Petra
 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.

24
Universitas Kristen Petra
 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.

25
Universitas Kristen Petra
 Tambahkan baris berikut pada file yang akan menampilkan CKEditor.
Letakan dalam tag <head>.

 Untuk memanggil CKEditor gunakan class=”ckeditor” pada setiap tag

<textarea>.

26
Universitas Kristen Petra