TA : Rancang Bangun Aplikasi Belajar Web Hacking Berbasis Jejaring Sosial (Facebook).

(1)

BERBASIS JEJARING SOSIAL PFACEBOOK)

TUGAS AKHIR

Nama : Rio Astamal

NIM : 06.41010.0094

Program : S1 (Strata Satu) Jurusan : Sistem Informasi

SEKOLAH TINGGI

MANAJEMEN INFORMATIKA & TEKNIK KOMPUTER SURABAYA


(2)

Halaman

ABSTRAK...vii

KATA PENGANTAR...viii

DAFTAR ISI...x

DAFTAR TABEL...xix

DAFTAR GAMBAR...xxiv

DAFTAR LAMPIRAN...xxxi

BAB I PENDAHULUAN...1

1.1. Latar Belakang...1

1.2. Perumusan Masalah...3

1.3. Pembatasan Masalah...3

1.4 Tujuan...4

1.5. Sistematika Penulisan...4

BAB II LANDASAN TEORI...8

2.1. Pengertian dan Tujuan Belajar...8

2.1.1. Tes Hasil Belajar...9

2.1.2. Penskoran...9

2.1.3. Pemberian Peringkat...9

2.2. Problem Based Learning...10

2.3. Simulation Based Learning...12

2.4. World Wide Web (Web)...15

2.4.1. URI (Uniform Resource Identifier)...16

2.4.2. Protokol HTTP...18

2.4.3. HTTP Method...20

2.4.4. HTTP Status Code...22

2.4.5. HTTP Authentication...24

2.5. HTML...31

2.5.1. HTML Form...33

2.5.2. Hyperlink...36

2.5.3. Frame...37


(3)

2.5.5. Entity Encoding...45

2.6. Aplikasi pada Sisi Server...47

2.7. Database...48

2.7.1. Structured Query Language...48

2.7.2. MySQL...49

2.8. Hacking...50

2.9. Ancaman Keamanan Web...51

2.10. SQL Injection...54

2.11. Platform Facebook...56

2.11.1. Facebook Login...58

2.11.2. Facebook Graph API...58

2.11.3. Facebook Open Graph...59

2.12. Metode Pengembangan...60

2.12.1. Pengembangan Perangkat Lunak Secara Agile...60

2.12.2. Agile Modeling...61

2.12.3. Agile Model-Driven Development (AMDD)...62

BAB III ANALISIS DAN PERANCANGAN SISTEM...72

3.1. Analisis Sistem...72

3.2. Perancangan Sistem...77

3.2.1. Envisioning...78

3.2.2. Iterasi Pemodelan...97

3.2.3. Model Storming dan Test-Driven Development (TDD)...97

3.3. Desain Penyusunan Misi...195

3.3.1. Desain Penyusunan Misi Tipe Basic Mission...196

3.3.2. Desain Penyusunan Misi Tipe Javascript Mission...199

3.3.3. Desain Penyusunan Misi Tipe Realistic Mission...202

3.4. Desain Uji Coba...205

3.4.1. Desain Uji Coba Ketangguhan Aplikasi...206

3.4.2. Desain Uji Coba Fungsi Aplikasi...209


(4)

4.1. Kebutuhan Sistem...225

4.1.2. Kebutuhan Perangkat Keras...225

4.1.3. Kebutuhan Perangkat Lunak...226

4.2. Pembuatan Program...227

4.3. Pemasangan Program...227

4.4. Implementasi Sistem...228

4.4.1. Output Unit Testing Class Model...228

4.4.2. Tampilan Halaman Beranda...238

4.4.2. Tampilan Halaman Login...239

4.4.3. Tampilan Halaman Login Dialog Facebook...240

4.4.4. Tampilan Halaman Dialog Otorisasi Aplikasi...240

4.4.5. Tampilan Halaman Mengelola Tipe Misi...241

4.4.6. Tampilan Halaman Mengelola Misi...242

4.4.7. Tampilan Halaman Mengelola Artikel...247

4.4.8. Tampilan Halaman Mengelola Media...251

4.4.9. Tampilan Halaman Daftar Pemain...252

4.4.10. Tampilan Halaman Sinkronisasi Skor Facebook...254

4.4.11. Tampilan Halaman Setting Aplikasi...255

4.4.12. Tampilan Halaman Learning Center...255

4.4.13. Tampilan Halaman Memilih Tipe Misi...257

4.4.14. Tampilan Halaman Menjelajah Misi...258

4.4.15. Tampilan Halaman Profil Pemain...264

4.5. Penyusunan Misi...265

4.5.1. Pemberian Poin per Misi...265

4.5.2. Algoritma Penciptaan Jawaban Misi...267

4.5.3. Penyusunan Misi Tipe Basic Mission...268

4.5.4. Penyusunan Misi Tipe Javascript Mission...278

4.5.5. Penyusunan Misi Tipe Realistic Mission...297

4.6. Evaluasi Sistem...319

4.6.1. Uji Coba Ketangguhan Aplikasi...319

4.6.2. Uji Coba Fungsi Aplikasi...322


(5)

5.1. Kesimpulan...339

5.2. Saran...340

DAFTAR PUSTAKA...341

LAMPIRAN...344


(6)

PENDAHULUAN

1.1. LatarBBelakang

Pengetahuan tentang ancaman-ancaman keamanan web adalah salah satu hal yang wajib diketahui seorang web developer. Tanpa pengetahuan tersebut, kemungkinan yang dapat muncul adalah aplikasi web yang dibangun berpotensi untuk memiliki celah keamanan. Dari hasil penelitian dan pengujian yang dilakukan oleh Stuttard (2011) pada tahun 2007 sampai dengan 2011 terhadap 100 lebih aplikasi web, ternyata masih banyak yang memiliki celah keamanan. Celah-celah keamanan yang ditemukan dan prosentasenya yaitu: Kesalahan Otentikasi (62%), Kesalahan Akses Kontrol (71%), SQL Injection (32%), Cross-site Scripting – XSS (94%), Kebocoran Informasi (78%), dan Cross-site Request Forgery – CSRF (92%).

Pengetahuan tentang celah-celah keamanan web tersebut sudah seharusnya dimiliki oleh seorang web developer. Pengetahuan yang minim tentang masalah tersebut dapat menyebabkan aplikasi yang dibuat rentan. Salah satu cara pengetahuan-pengetahuan tersebut dapat diperoleh adalah lewat membaca sebuah literatur semisal dari sebuah buku. Untuk menambah dan memperkuat pengetahuan web developer tentang celah-celah keamanan tersebut, maka diperlukan suatu pembelajaran tambahan.

Strategi pembelajaran yang dapat digunakan adalah problem-based learning (PBL) dikombinasikan dengan simulation-based learning (SBL), dimana celah-celah keamanan suatu aplikasi web direproduksi ke dalam lingkungan khusus yang telah disediakan untuk pembelajaran (simulator). Menurut Kelly


(7)

(2007) PBL mengharuskan pembelajar untuk menghubungkan secara mandiri konsep-konsep dan ide-ide dari pengetahuan yang dimiliki sebelumnya untuk menyelesaikan sebuah masalah. Menurut Davidovitch (2006) simulasi menciptakan pemikiran yang kritis dan strategis, kemampuan merencanakan dan berpikir strategis tidak mudah dikembangkan dan keuntungan dari simulasi adalah menyediakan alat untuk membantu masalah tersebut.

Untuk membuat sesuatu yang aman Council (2003) memaparkan bahwa perancang dapat “berpikir sebagai pencuri”, dimana mereka meletakkan diri mereka pada posisi pelanggar, antisipasi aksi mereka, ketahui tools yang mereka gunakan, pengetahuan dan kemampuan mereka dengan demikian dapat dikembangkan solusi yang dapat mencegah mereka tanpa membahayakan pengguna yang sah. Oleh karena itu, pada apikasi ini penulis menempatkan web developer sebagai hacker yang sedang mencari kelemahan pada suatu aplikasi web yang sudah disimulasikan.

Aplikasi yang akan penulis buat adalah sebuah aplikasi pembelajaran berbasis web yang didalamnya terdapat soal-soal yang menyangkut berbagai komponen teknologi web dan keamanannya. Setiap soal direpresentasikan oleh sebuah sub aplikasi yang didesain khusus untuk soal tersebut sesuai tujuan materi pembelajaran yang ingin dicapai. Untuk soal yang cukup kompleks maka soal tersebut dibuat dalam bentuk simulasi. Setiap soal yang berhasil diselesaikan maka pengguna akan mendapatkan poin. Semakin banyak poin yang diperoleh maka dapat diasumsikan pengetahuan web developer tersebut semakin baik.

Aplikasi ini menggunakan platform Facebook untuk proses autentikasi pengguna sehingga proses registrasi menjadi sederhana. Selain itu penggunaan


(8)

platform Facebook dimaksudkan untuk menambahkan fitur jejaring sosial dimana informasi-informasi dan aktivitas yang dilakukan pengguna pada aplikasi ini dapat dibagikan ke timeline Facebook pengguna.

Diharapkan dengan adanya Aplikasi Belajar Web Hacking Berbasis Jejaring Sosial (Facebook) ini para web developer terutama mereka yang pemula dapat memahami berbagai celah keamanan pada aplikasi web sehingga pada akhirnya mereka dapat membuat aplikasi yang lebih aman. Fitur jejaring sosial yang ada pada aplikasi diharapkan dapat memotivasi pengguna lain dalam dilingkaran pertemanan Facebook untuk mempelajari keamanan aplikasi berbasis web.

1.2. PerumusanBMasalah

Berdasarkan latar belakang diatas maka perumusan masalah untuk tugas akhir ini adalah sebagai berikut:

1. Bagaimana membangun strategi pembelajaran dan proses penskoran pada aplikasi belajar web hacking.

2. Bagaimana merancang dan membangun aplikasi belajar web hacking yang terintegrasi dengan jejaring sosial (Facebook).

1.3. PembatasanBMasalah

Pembatasan masalah untuk tugas akhir ini adalah sebagai berikut:

1. Aplikasi yang dibuat menggunakan bahasa pemrograman PHP 5.3, database server MySQL 5, web server Apache 2.2 dan sistem operasi Ubuntu 10.04. 2. Materi pembelajaran yang dimasukkan dalam aplikasi adalah seputar

Protokol HTTP, HTML, Javascript, Enkripsi dasar, dan celah-celah keamanan yaitu: melewati captcha, cracking MD5, dictionary-attack, dan


(9)

SQL Injection (pada MySQL 5).

3. Skor yang dihasilkan adalah skor mentah yang belum diolah menjadi sebuah skala penilaian.

4. Tidak ada batas waktu dalam pengerjaan semua soal yang ada.

5. Pemeringkatan didasarkan pada jumlah skor yang dihasilkan dan total waktu yang digunakan untuk menyelesaikan soal-soal.

6. Soal-soal dikelompokkan dalam tiga kategori yaitu: Basic Mission, Javascript Mission, dan Realistic Mission.

7. Pengguna harus memiliki akun Facebook untuk menggunakan aplikasi.

1.4 Tujuan

Berdasarkan perumusan masalah sebelumnya maka tujuan dari tugas akhir ini adalah sebagai berikut:

1. Menghasilkan strategi pembelajaran dan penskoran pada aplikasi belajar web hacking.

2. Menghasilkan aplikasi belajar web hacking yang terintegrasi dengan jejaring sosial (Facebook).

1.5. SistematikaBPenulisan

Untuk memudahkan di dalam memahami persoalan dan pembahasannya, maka penulisan sebagai berikut:

BABBI PENDAHULUAN

Pada bab ini dikemukakan hal-hal yang menjadi latar belakang, perumusan masalah, batasan masalah, tujuan yang ingin dicapai serta sistematika penulisan laporan tugas akhir ini.


(10)

BABBII LANDASANBTEORI

Bab ini membahas tentang penjabaran teori-teori yang menjadi dasar penelitian dan yang akan dijadikan sebagai acuan analisa dan pemecahan permasalahan yang dibahas dalam tugas akhir ini. Teori yang diterangkan diantaranya: Pengertian dan Tujuan Belajar, Simulation-Based Learning, Protokol HTTP, HTML, Javascript, MySQL, Hacking, SQL Injection, Platform Facebook, Agile Model Driven Development (AMDD) dan Test-Driven Development (TDD).

BABBIII ANALISIS DANBPERANCANGANBSISTEM

Bab ini membahas tentang bagaimana aplikasi dikembangkan menggunakan TDD dan AMDD. Langkah-langkah yang dibahas pada bab ini diantaranya: Analisis sistem dan pembuatan blok diagram, enviosining (perancangan awal sistem), iterasi pemodelan, model storming dan implementasi menggunakan TDD. Pada Enviosining dilakukan tahap: pemodelan kebutuhan awal dan pemodelan arsitektur awal. Pemodelan kebutuhan awal meliputi pembahasan tentang: usage model yaitu pembuatan user stories dan use case, domain model, dan user interface atau sketsa tampilan. Pada tahap iterasi pemodelan dibahas tentang jadwal iterasi yang akan dilakukan. Pembahasan setiap iterasi penulis letakkan pada tahap model storming dan implementasi via TDD. Dalam setiap iterasi pembahasan meliputi: pembuatan flow-of-event, sequence diagram, pembuatan class diagram, dan unit testing untuk


(11)

masing-masing class model. Selanjutnya dibahas tentang desain penyusunan dari ke-22 misi yang dibagi dalam tiga kategori yaitu Basic Mission, Javascript Mission dan Realistic Mission. Bagian akhir pada bab 3 meliputi pembahasan tentang desain uji coba aplikasi yaitu: desain uji coba ketangguhan aplikasi dan desain uji coba fungsi-fungsi aplikasi.

BABBIV IMPLEMENTASIBDANBEVALUASI

Pada bab ini dibahas tentang implementasi dari aplikasi yang dibuat secara keseluruhan serta melakukan pengujian terhadap aplikasi yang dibuat untuk mengetahui apakah aplikasi tersebut dapat menyelesaikan permasalahan yang dihadapi sesuai dengan tujuan yang diinginkan. Susunan penulisan pada bab 4 dimulai dengan pembahasan tentang kebutuhan dari sitem meliputi kebutuhan perangkat keras dan lunak. Dilanjutkan dengan pembahasan pembuatan program dan pemasangan program agar dapat diakses oleh pengguna. Pembahasan berikutnya adalah implementasi dari sistem, pembahasan dimulai dengan membahas output dari setiap unit test dari class model dan output dari fungsi-fungsi aplikasi. Berikutnya adalah pembahasan tentang setiap jawaban dari masing-masing misi yang telah disusun pada bab 3. Pembahasan terakhir meliputi hasil evaluasi sistem yang telah didesain pada bab 3.

BABBV PENUTUP


(12)

dan saran yang ada pada bab ini didapatkan dari hasil evaluasi aplikasi, sedangkan saran akan menjelaskan pengembangan aplikasi lebih lanjut.


(13)

LANDASANBTEORI

2.1. PengertianBdanBTujuanBBelajar

Belajar merupakan perubahan tingkah laku atau penampilan, dengan serangkaian kegiatan misalnya dengan membaca, mengamati, mendengarkan, meniru dan lain sebagainya. Juga belajar akan lebih baik, jika subjek belajar mengalami atau melakukannya, jadi tidak hanya bersifat verbalistik. Disamping definisi tersebut, ada beberapa pengertian lain dan cukup banyak, baik dilihat secara mikro maupun secara makro, dilihat dalam arti luas ataupun terbatas atau khusus. Dalam pengertian luas, belajar dapat diartikan sebagai kegiatan psiko-fisik menuju ke perkembangan pribadi seutuhnya. Kemudian dalam arti sempit, belajar dimaksudkan sebagai usaha penguasaan materi ilmu pengetahuan yang merupakan sebagian kegiatan menuju terbentuknya kepribadian seutuhnya. Relevan dengan ini, ada pengertian bahwa belajar adalah “penambahan pengetahuan”. (Sardiman, 2005)

Didalam belajar terdapat banyak faktor yang mempengaruhi, salah satunya adalah faktor psikologis. Ada beberapa faktor psikologis dalam belajar diantaranya: faktor motivasi, konsentrasi, reaksi pemahaman, orginasasi, dan ulangan. Selain itu masih ada faktor-faktor lain diantaranya: perhatian, minat, fantasi, faktor ingin tahu, dan sifat kreatif. (Sardiman, 2005)

Sehingga dapat diambil kesimpulan bahwa suatu pembelajaran harus dibuat menarik agar minat, motivasi dan sifat kreatif dari pembelajar dapat muncul yang pada akhirnya materi-materi ajar yang disampaikan dapat diterima dengan baik.


(14)

2.1.1. TesBHasilBBelajar

Menurut Purwanto (2008) tes hasil belajar atau achievement test adalah tes yang dipergunakan untuk menilai hasil-hasil pelajaran yang telah diberikan oleh guru kepada murid-muridnya, atau oleh dosen kepada mahasiswa, dalam jangka waktu tertentu. Dengan kata lain pemberian nilai oleh pengajar kepada pembelajar.

2.1.2. Penskoran

Menurut Purwanto (2008) penskoran adalah suatu proses perubahan jawaban-jawaban tes menjadi angka-angka. Angka-angka tersebut kemudian diubah menjadi nilai-nilai melalui suatu proses pengolahan tertentu. Penggunaan simbol untuk menyatakan nilai-nilai tersebut dapat berupa angka, seperti misalnya dengan rentangan 0 sampai 10, 0 sampai 100, dan ada pula yang berupa huruf A, B, C, D, dan E.

Purwanto (2008) menjelaskan bahwa terdapat perbedaan antara penskoran (scoring) dan penilaian (grading). Penskoran berarti proses pengubahan prestasi menjadi angka-angka, sedangkan dalam penilaian angka-angka tersebut diproses dalam hubungannya dengan kedudukan personal subjek ajar yang memperoleh angka-angka tersebut dalam skala tertentu. Misalnya skala tentang baik-buruk, bisa diterima atau tidak diterima, dinyatakan lulus atau tidak lulus.

2.1.3. PemberianBPeringkat

Menurut Silverius (1991) skor yang dipakai untuk membuat peringkat itu diurutkan mulai dari yang tertinggi hingga yang menurun sampai kepada yang terendah. Apabila terdapat skor yang sama, maka peringkatnya ditetapkan dengan


(15)

menjumlahkan angka peringkat berturut-turut sebanyak yang memiliki skor yang sama tersebut, lalu hasilnya dibagi dibagi dengan banyaknya yang memiliki skor sama tersebut. Contoh kedudukan skor dapat dilihat pada tabel 2.1.

Tabel 2.1. Kedudukan skor dalam peringkat

No.BUrut Skor Peringkat

1 93 1

2 89 3

3 89 3

4 89 3

5 71 5

Keterangan tabel diatas adalah skor 89 menempati urutan ke-2, ke-4 dan ke-3. Supaya adil, nomor urut mereka dijumlahkan yaitu 2 + 3 + 4 = 9, kemudian dibagi banyaknya yang memiliki skor tersebut dalam hal ini 3. Jadi diperoleh 9 : 3 = 3.

2.2. ProblemBBasedBLearning

Menurut Kelly (2007) Problem-based Learning (PBL) adalah sebuah metode yang pertama kali ditemukan pada bidang ilmu pengetahuan medis dan pertama kali diperkenalkan pada tahun 1969, kemudian menjadi populer di disiplin ilmu lain seperti pendidikan, psikologi, dan bisnis (Coombs and Eden, 2004) dan juga pada bidang ilmu sains (Bell et all., 2002).

Menurut Kelly (2007) problem-based learning menggeser fokus pendidikan dari yang berpusat pada guru ke pengajaran dan pembelajaran yang berpusat pada siswa, dimana siswa membangun sendiri suatu makna dengan menghubungkan konsep-konsep dan ide-ide dari pengetahuan yang didapat. Tan (2004) dalam Kelly (2007) mengungkapkan bahwa PBL merupakan pendekatan alternatif dalam pengajaran dan pembelajaran yang mengharuskan keterlibatan


(16)

pembelajar secara aktif. Lebih jauh lagi menurut Harlen (2006) dalam Kelly (2007) PBL dapat digambarkan dalam aspek lain yaitu konstruktivisme yaitu pembelajaran lewat interaksi sosial, yang memungkinkan siswa didik untuk mencerna ide orang lain dan dan menggunakannya untuk memahami suatu hal.

Menurut Tan (2004) dalam Kelly (2007) dengan menggunakan masalah pada dunia nyata daripada memfokuskan pada suatu konten, siswa diberikan kesempatan untuk benar-benar belajar bagaimana belajar. Secara prinsip menurut White (2002) dalam Kelly (2007) PBL membalik pendidikan tradisional dengan meletakkan masalah lebih dulu dan menggunakannya untuk memotivasi pembelajaran. Dengan menggunakan masalah pada dunia nyata, PBL dapat membuat siswa melihat relevansi yang biasa mereka lewatkan pada konteks lainnya. Tujuan utama dari PBL adalah siswa dapat belajar lebih baik, mengerti apa yang mereka pelajari, dan mengingat lebih lama dengan bekerja sama dalam sebuah kelompok.

Dalam PBL terdapat dua fokus utama untuk menciptakan permasalahan. Pertama, masalah harus membangkitkan konsep dan prinsip-prinsip yang relevan terhadap domain masalah. Karena itu, proses dimulai dengan mengidentifikasi konsep utama dan prinsip-prinsip yang harus siswa pelajari. Kedua, masalah tersebut harus “nyata”. Dua alasan kenapa harus nyata. Pertama, siswa diberikan kesempatan untuk menjelajah semua dimensi dari masalah yang mana pembuatan masalah yang kompleks yang terdiri dari berbagai informasi merupakan hal yang sangat sulit. Kedua, masalah yang nyata terindikasi lebih meningkatkan pembelajaran karena terdapat banyak terdapat kesamaan dari konteks masalah tersebut dengan dunia nyata. (Savery, 2001)


(17)

2.3. SimulationBBasedBLearning

Menurut Kneebel & Nestel (2005) dalam Grant (2007) simulation-based learning didefinisikan sebagai reproduksi dari sebagian aspek realita untuk dapat dimengerti dengan lebih baik, dimanipulasi atau memprediksi tingkah laku sebenarnya. Terminologi lain yang dikemukaan Gaba (2007) dalam Grant (2007) tentang simulasi diantaranya: Pengganti atau pembuatan ulang dari sebuah realita, suatu aktifitas yang menirukan realita, sebuah lingkungan yang dapat dikontrol, suatu pengalaman yang diarahkan, atau tugas yang interaktif.

Secara singkat Hamburger dalam Kindley (2002) mendefinisikan simulation-based learning sebagai “learning by doing” atau “belajar dengan praktek langsung”. Dalam simulasi, pembelajar memilih dan merakit berbagai pengalaman sebagai respon untuk pertanyataan atau rangsangan lain. Pada simulasi aturan secara umum bahwa subjek dapat juga dikatakan berhasil dengan mengkombinasikan berbagai aksi berbeda dalam urututan yang bervariasi selama hasil akhir yang diperoleh dapat diterima.

Menurut Kindley (2002) terdapat tiga komponen untuk proses simulasi yang baik yaitu:

1. Model yang dikembangkan atau storyline dari lingkungan yang baik, sehingga dapat memacu keluaran yang sukses.

2. Pengkondisian yang dapat menyebabkan pembelajar dapat melakukan kesalahan.

3. Mentor simulasi untuk pembelajar.

Salas & Burke (2002) dalam Grant (2007) menyarankan bahwa simulasi harus dirancang dengan sedemikian rupa sehingga meliputi fitur instruksional,


(18)

pemandu pengalaman, pengukuran performa, diagnosa feedback, dan kecocokan dengan lingkungan yang sedang disimulasi.

Menurut Kneenobe (2006) dalam Grant (2007) atribut dari simulasi yaitu: praktek yang berulang-ulang dalam lingkungan yang aman, panduan dari seoarang pakar jika diperlukan, relevansi dengan praktek klinis yang sebenarnya, belajar dengan yang lain (pembelajar) dalam sebuah konteks realita, dukungan lingkungan yang berorientasi pembelajar.

Kindley (2002) memaparkan tiga tipe tujuan yang ditawarkan oleh simulation-based learning yaitu:

1. Simulasi pembelajaran yang ditujukan untuk mengembangkan respon (response behaviour).

2. Simulasi pembelajaran yang ditujukan untuk membantu menentukan keputusan.

3. Simulasi pembelajaran yang ditujukan untuk membantu mengakses informasi dan fasilitas manajemen pengetahuan.

Davidovitch (2006) menilai bahwa pembelajaran menggunakan simulator memiliki beberapa keuntungan. Simulator dikarakterkan sebagai alat yang dapat menimbulkan pengalaman praktis dan penerimaan respon secara langsung dari sistem yang sedang dipelajari untuk merangsang pengguna membuat aksi dan keputusan.

Menurut Kindley (2002) beberapa tipe dari simulation-based learning yaitu:

1. Activity Simulations: Contohnya “bagaimana menerbangkan pesawat” atau “bagaimana mengoperasikan kendaraan ini”. Kunci simulasi ini ada pada


(19)

aktifitas pekerjaan yang lebih membutuhkan penanganan informasi secara ahli, pembuatan alasan atau keputusan, dan kemampuan motorik untuk dapat berhasil.

2. Soft Skill Simulations: Pada simulasi tipe ini objek bukan sebuah alat melainkan individu atau grup. Sebagai contoh sales training, customer service, dan kepelatihan.

3. Process Simulations: Bagaimana pengeboran kilang minyak? bagaimana membuat widgets? Itu merupakan salah contoh tipe simulasi jenis ini. Tipe ini umumnya memerlukan model dari proses sebagai dasar dari pengalaman belajar. Pembelajaran dimulai dengan mengikuti materi dan aksi pada materi melalui sebuah proses.

4. Business Simulations: Simulasi ini menargetkan masalah seperti strategi kompetitif atau keputusan finansial. Simulasi ini membantu pengguna untuk belajar bagaimana membuat keputusan dan akan mengilustrasikan hasil akhir dari pendekatan yang berbeda-beda dalam bentuk “bagaimana jika”.

5. Software Simulations: Ini merupakan tipe simulasi yang berhubungan dengan instruksional penggunaan teknologi khususnya software komputer. Contohnya adalah “Bagaimana menggunakan spreadsheet” atau “Bagaimana melakukan mail merge”.

6. Product Simulations: Simulasi ini merupakan review dari produk tertentu dengan maksud untuk lebih mengenalkan pembelajar dengan komponen dan fungsi-fungsinya.

7. Casual (Diagnostic) Simulations: Simulasi yang ditujukan untuk pencarian masalah, troubleshooting, dan analisa akar masalah untuk membantu


(20)

pembelajar mengembangkan solusi. Sebagai contoh dari industri elektronik dan pesawat terbang. Peralatan yang tidak berfungsi memerlukan penanganan yang memiliki ciri-ciri sendiri untuk memperbaikinya.

2.4. WorldBWideBWebB(Web)

Menurut W3C (2004) World Wide Web (lebih dikenal dengan istilah web atau www) adalah ruang informasi di mana hal-hal menarik, disebut sebagai sumber (resource), diidentifikasi oleh pengenal global yang disebut Uniform Resource Identifier (URI).

World Wide Web diciptakan oleh Tim Berners-Lee pada tahun 1989 yang saat itu adalah ilmuan dari CERN (Badan Riset Nuklir Eropa). Tim Berners-Lee juga mencipatakan HyperText Markup Language (HTML) sebuah teknologi untuk bertukar informasi melalui dokumen yang memiliki hypertext. Bersamaan dengan HTML, dia juga menciptakan protokol komunikasi yang digunakan untuk mengirim informasi melalui web, protokol tersebut disebut HyperText Transfer Protocol (HTTP). (Deitel, 2008)

Ilustrasi singkat bagaimana seorang user mengakses konten pada web adalah sebagai berikut.

1. User membuka web browser

2. User memasukkan alamat URL dari web yang ingin dikunjungi pada web browser, misal http://example.com/

3. Web Browser kemudian menghubungi server yang bertanggung jawab terhadap alamat google.com dengan mengirimkan HTTP request.

4. Server yang bertanggung jawab terhadap alamat google.com kemudian menjawab dengan mengirimkan HTTP response


(21)

5. Browser menerima respon dari server kemudian mengintepretasikan HTML yang diterima untuk ditampilkan kepada user.

Aplikasi berbasis web disusun atas beberapa komponen teknologi yang saling mendukung. Komponen-komponen tersebut diantaranya: URL, protokol HTTP, HTML, web browser dan web server.

2.4.1. URIB(UniformBResourceBIdentifier)

Menurut Berners-Lee (2005) Uniform Resource Identifier (URI) merupakan sebuah pengidentifikasi yang terdiri urutan karakter yang cocok dengan aturan-aturan tertentu yang digunakan untuk mengakses suatu resource.

Selain URI terdapat juga istilah Uniform Resource Locator (URL) dan Uniform Resource Name (URN). Banyak terdapat kebingungan tentang hal ini, secara sederhana URI dapat berupa URL atau juga dapat berupa URN. Analogi sederhananya URI diibaratkan sebuah mobil, dimana pada mobil terdapat kategori seperti sedan (URL) atau truk (URN). Jadi jika suatu URL valid maka URL tersebut dapat disebut juga URI yang valid. Hal yang sama berlaku untuk URN. Berikut ini adalah contoh beberapa URL.

1. http://www.ietf.org/rfc/rfc2396.txt 2. ftp://ftp.is.co.za/rfc/rfc1808.txt 3. https://www.example.com/ 4. mailto:johnsmith@example.com

5. http://en.wikipedia.org/wiki/Request_for_Comments#cite_note-6

Menurut Moats (1997) URN difungsikan sebagai media yang tetap, tidak terikat lokasi yang digunakan untuk pengidentifikasi resource. Skema URN dimaksudkan agar resource yang ditunjuk meskipun tidak ada atau sudah tidak


(22)

tersedia skema tersebut tetap unik secara global dan bersifat tetap. Berikut ini adalah beberapa contoh dari URN.

1. urn:isbn:0451450523

2. urn:sha1:YNCKHTQCWBTRNJIV4WNAE52SJUQCZO5C 3. urn:uuid:6e8bc430-9c3a-11d9-9669-0800200c9a66

Gambar 2.1. Bagian-bagian dari URL

Karena URN jarang digunakan pada aplikasi berbasis web, maka selanjutnya penulis menitikberatkan penjelasan hanya pada URL. Zalewski (2012) memaparkan 8 (delapan) komponen lengkap dalam sebuah URL seperti yang terlihat pada gambar 2.1.

Bagian-bagian URI antara nomor satu sampai dengan delapan memiliki dua sifat yaitu wajib dan pilihan. Tabel berikut menjelaskan bagian-bagian yang terdapat pada gambar 2.1.

Tabel 2.2. Bagian-bagian dan Keterangan dari URI

Nomor Keterangan Sifat

1 Nama protokol atau skema yang digunakan dan selalu diakhiri dengan titik dua, contoh http, https, mailto atau ftp. Nama protokol atau skema bersifat case-insensitive.

Wajib

2 // (double slash) indikator dari sebuah URL yang memiliki hirarki.

Pilihan 3 Data otentikasi yang berisi username dan password. Pilihan 4 Alamat server dari web yang ingin dibuka. Dapat berupa

hostname atau alamat IP.

Wajib 5 Nomor port yang digunakan oleh server. Untuk HTTP

standar yang digunakan adalah 80, sedangkan untuk HTTPS adalah 443.


(23)

Tabel 2.2. Bagian-bagian dan Keterangan dari URI

Nomor Keterangan Sifat

6 Alamat hirarki path UNIX ke resource yang akan dibuka. Wajib

7 Parameter Query String. Pilihan

8 Pengidentifikasi fragment, biasa digunakan untuk menunjuk bagian tertentu pada resource (jika resource berupa dokumen HTTP).

Pilihan

Terdapat beberapa karakter yang sudah dipesan (reserved) sehingga jika ingin digunakan pada sebuah URL maka perlu dilakukan URL encoding. URL encoding merupakan sebuah proses untuk mengubah karakter-karakter tertentu dengan tanda persen (%) diikuti dengan dua digit heksadesimal yang merepresentasikan nilai ASCII dari karakter tersebut. Karakter-karakter yang telah reserved pada URL yaitu: :, /, ?, #, [, ], dan @ . Sebagai contoh “/” memiliki nomor ASCII 47 (2F dalam heksadesimal) jadi hasil encoding karakter tersebut adalah %2F.

2.4.2. ProtokolBHTTP

Seperti yang telah dijelaskan sebelumnya bahwa protokol HTTP merupakan protokol yang digunakan untuk mengirimkan informasi melalui web. Versi paling mutakhir protokol HTTP adalah HTTP versi 1.1. Protokol ini distandardisasi dan dikembangkan oleh Internet Engineering Task Force (IETF) dan World Wide Web Consortium (W3C).

HTTP merupakan protokol yang berada pada sisi application layer. Untuk detail komunikasi antar jaringan HTTP menyerahkannya pada protokol TCP/IP. Sehingga dalam terminologi jaringan protokol HTTP berjalan diatas TCP, HTTP menggunakan TCP (Transmission Control Protocol ) untuk mengirimkan data dan TCP sendiri berjalan diatas layer IP (Internet Protocol). (Gourley, 2002)


(24)

Koneksi HTTP bersifat connectionless dan stateless. Connectionless berarti server tidak selalu menahan koneksi untuk setiap klien, dengan kata lain setelah selesai mengirimkan respon maka server akan langsung menutup koneksi. Kondisi ini menyebabkan HTTP menjadi stateless sehingga server selalu menganggap request yang datang dari klien sebagai request baru meskipun datang dari klien yang sama. Hal ini menyebabkan aplikasi berbasis web perlu mengimplementasikan session yang salah satunya memanfaatkan fitur HTTP Cookie.

Komunikasi antara klien dan server pada protokol HTTP dilakukan dengan menggunakan mode teks bukan dengan format biner. Sehingga hanya dengan utilitas seperti telnet sudah dapat dilakukan komunikasi dengan server. Berikut penulis contohkan bagaimana mengambil halaman utama dari website http://ianawww.vip.icann.org/ menggunakan telnet. Penulis menggunakan telnet pada sistem operasi Ubuntu Linux, namun perintah tersebut juga dapat digunakan pada hampir semua sistem operasi.

GET /domains/example mTTP/1.1 most: ianawww.vip.icann.org HTTP/1.1 200 OK

Date: Sat, 19 Jan 2013 02:29:01 GMT Server: Apache/2.2.3 (CentOS)

Last-Modified: Fri, 04 Jan 2013 01:17:22 GMT Vary: Accept-Encoding

Connection: close

Transfer-Encoding: chunked

Content-Type: text/html; charset=UTF-8 [--- Penulis potong sampai disini ---]

Pada perintah diatas penulis menginstruksikan telnet untuk melakukan koneksi ke ianawww.vip.icann.org pada port 80 (port umum untuk web server). Setelah koneksi terjadi penulis mengirimkan berturut-turut kombinasi karakter berikut:


(25)

1. “GET / HTTP/1.1” diikuti karakter CRLF (Carriage Return & Line Feed, pada keyboard umumnya dinamakan tombol Enter).

2. “Host: ianawww.vip.icann.org” diikuti dua kali CRLF.

3. Karena server telah menerima dua kali karakter CRLF (baris kosong) maka server berasumsi header yang dikirimkan klien telah selesai dan waktunya untuk membalas request tersebut berupa HTTP response. Hal tersebut terlihat ketika aplikasi telnet menampilkan string HTTP/1.1 200 OK yang merupakan suatu format HTTP response jika suatu resource tersedia.

2.4.3. HTTPBMethod

Menurut Gourley (2002) HTTP method merupakan suatu aksi yang dilakukan oleh klien kepada server agar melakukan sesuatu pada resource tertentu. Method yang umum digunakan adalah GET, POST, dan HEAD. Syntax penulisan pada HTTP method (dapat disebut juga request) adalah sebagai berikut: <method> <request-URL> <versi>

<header>

<request-body>

Sedangkan format untuk response (disebut juga HTTP response atau status-code) yang dikirimkan oleh server adalah sebagai berikut:

<versi> <status-code> <kalimat-status> <header>

<response-body>

Tabel 2.3 menunjukkan detail penjelasan format untuk syntax HTTP method sedangakn tabel 2.4 menunjukkan detail penjalasan untuk format respon yang dikirim server. Setiap pesan HTTP baik itu berupa request atau response selalu diawali dengan baris pembuka. Setiap request (HTTP Method) dapat dianalogikan mengatakan apa yang akan dilakukan kepada server sedangkan


(26)

analogi untuk response adalah selalu mengatakan apa yang telah terjadi pada server. Analogi tersebut tercermin dalam syntax komunikasi seperti yang tertera pada tabel 2.3 dan 2.4.

Tabel 2.3. Format HTTP Request

Bagian Keterangan

<method> Aksi yang akan dikirimkan dapat berupa GET, HEAD, POST, PUT, DELETE, TRACE, atau OPTIONS.

<request-URL> Path ke resource yang ingin diminta. Ditulis dengan format path absolut dengan diawali “/”.

<versi> Versi protokol HTTP yang digunakan. Saat ini versi yang paling banyak digunakan adalah HTTP 1.1. Sebelumnya juga terdapat HTTP versi 1.0 dan 0.9.

<header> Kosong atau lebih header tambahan, setiap header diawali dengan nama, diikuti titik dua (:), diikuti whitespace (pilihan), diikuti nilai header tersebut, diikuti karakter CRLF dan harus diakhiri karakter CRLF. Contohnya adalah sebagai berikut (Karakter [CRLF] dalam kenyataan tentu tidak terlihat):

Accept: text/html, */*[CRLF]

Accept-Encoding: gzip, deflate[CRLF] [CRLF]

<request-body> Data yang dikiriman ke server. Umumnya hanya digunakan untuk method POST.

Tabel 2.4. Format HTTP Response

Bagian Keterangan

<versi> Versi protokol HTTP yang digunakan.

<status-code> Kode status dari respon HTTP. Kode yang umum adalah 200, 301, 302, 401, 403 atau 404.

<header> Format header sama dengan request. Contoh header response adalah sebagai berikut:

Content-Type: image/jpeg[CRLF] Content-Encoding: gzip[CRLF] Content-Length: 1234[CRLF] [CRLF]

<string-status> String status yang ditampilkan bervariasi dan berhubungan juga dengan status-code. Sebagai contoh jika status-code-nya adalah 200 kalimat status yang ditampilkan adalah


(27)

Tabel 2.4. Format HTTP Response

Bagian Keterangan

“OK”, bila status-code-nya adalah 404 maka string status yang ditampilkan adalah “Not Found”.

<response-body> Resource yang diminta oleh klien. Untuk method tertentu seperti HEAD maka tidak ada response-body yang dikirimkan.

Pada gambar 2.2 penulis contohkan proses HTTP POST yang dikirimkan pada server dengan alamat URL /login.php pada sebuah domain dengan nama example.com. Pada gambar tersebut baik proses request ataupun response selalu diawali oleh baris pembuka seperti yang ditandai dengan nomor 1.

2.4.4. HTTPBStatusBCode

Pada protokol HTTP setiap response yang dikirim oleh server pasti memiliki status-code. Fielding (1999) menjabarkan pembagian status-code untuk response seperti ditunjukkan pada tabel 2.5.

Tabel 2.5. Pembagian Status-Code

Kode Keterangan

1xx

Informational

Berisi status kode sementara untuk response. Diterapkan mulai HTTP versi 1.1.

2xx Successful

Berisi status yang menandakan bahwa request dari klien berhasil diterima dan dimengerti.

Gambar 2.2 Contoh proses HTTP POST POST /login.php HTTP/1.1

Host: example.com

username=root&password=toor&submit=Login

HTTP/1.1 200 OK

Content-type: text/html Content-Length: 35

<h2>Wrong password, Get out!!!</h2> response request ❶ ❷ ❸ ❶ ❷ ❸ ❹


(28)

Tabel 2.5. Pembagian Status-Code

Kode Keterangan

3xx

Redirection

Berisi status yang menandakan bahwa user agent (web browser) perlu melakukan aksi lebih lanjut untuk menuntaskan request.

4xx

klien Error

Berisi status yang menandakan bahwa request dari klien tidak dimengerti oleh server atau klien tidak berhak mengakses resource yang dituju.

5xx

Server Error

Berisi status yang menandakan bahwa server mengerti request yang dikirim klien tetapi server tidak dapat memprosesnya karena suatu kesalahan tertentu pada sisi server.

Jika dipetakan secara menyeluruh maka jumlah HTTP status-code tersebut cukup banyak. Namun dalam kenyataannya hanya beberapa saja yang sering digunakan. Kode-kode status yang sering digunakan diataranya dapat dilihat pada tabel 2.6.

Tabel 2.6. Daftar HTTP Status-Code yang sering digunakan.

Kode Keterangan

200 OK Menandakan bahwa request berhasil.

206 Partial Content Menandakan server mendukung pengambilan resource melalui GET secara tidak penuh (partial). klien harus menyertakan header bernama Range untuk menentukan berapa dan mulai dari mana bytes yang ingin diambil. Aplikasi-aplikasi download-manager umumnya bergantung pada fitur ini.

301 Moved Permanently Menandakan bahwa URL yang diminta telah dipindah secara permanen request pada masa datang selayaknya menggunakan URL baru yang telah diberikan server pada header Location. 302 Found Menandakan bahwa URL yang diminta

dipindahkan secara sementara ke URL baru yang diberikan server pada header Location.

304 Not Modified Menandakan bahwa resource yang diminta klien lewat proses GET belum mengalami perubahan sejak akses sebelumnya. Jadi klien (web browser) seharusnya cukup mengambil resource tersebut dari cache internal.


(29)

Tabel 2.6. Daftar HTTP Status-Code yang sering digunakan.

Kode Keterangan

400 Bad Request Menandakan bahwa request yang dikirim tidak dimengerti oleh server.

401 Unauthorized Menandakan bahwa resource yang ingin diambil memerlukan proses otentikasi. Server harus memberikan tambahan header bernama WWW-Authenticate dalam responnya.

403 Forbidden Menandakan bahwa server mengerti request yang diminta tapi tidak dapat memenuhinya. Hal ini dapat terjadi karena beberapa hal salah satunya yaitu masalah file permission disisi server.

404 Not Found Menandakan bahwa URL dari resource yang diminta oleh klien tidak ditemukan oleh server. 500 Internal Server

Error Menandakan bahwa terjadi suatu kesalahan padasisi server sehingga tidak dapat memenuhi request dari

502 Bad Gateway Menandakan bahwa terjadi kesalahan saat server utama meneruskan request ke upstream server. Hal ini terjadi jika server utama berfungsi sebagai proxy atau gateway.

503 Service Unavailable Menandakan bahwa server tidak dapat memenuhi request dari klien karena mengalami overload atau sedang server sedang dalam masa perawatan. 2.4.5. HTTPBAuthentication

Untuk melindungi resource tertentu pada server dari pihak yang tidak berkepentingan maka diperlukan mekanisme tertentu yang disebut HTTP Authentication. Menurut Franks (1999) HTTP Authentication merupakan mekanisme otentikasi sederhana yang digunakan server untuk menguji klien dengan cara meminta klien untuk memberikan informasi otentikasi. Terdapat dua mode otentikasi yaitu: Basic Authentication dan Digest Authentication. Alur kerja untuk keduanya sama yaitu sebagai berikut:

1. Klien (Web Browser) mengirimkan request ke URL yang diproteksi.


(30)

dengan tambahan header WWW-Authenticate.

3. Web Browser menampilkan window dialog untuk memasukkan username dan password.

4. Web Browser mengirimkan username dan password yang dienkripsi ke dalam header Authorization.

5. Server mengambil data otentikasi yang ada pada header Authorization dan kemudian mencocokkan dengan database internal server.

6. Jika otentikasi berhasil maka server akan merespon dengan status-code 200 OK, sedangkan jika salah maka server kembali menampilkan 401 Unauthorized.

A. BasicBAuthentication

Basic Authentication merupakan model otentikasi yang mengharuskan klien untuk mengirimkan username dan password untuk setiap realm. String yang diberikan oleh server untuk mengidentifikasi resource yang diproteksi itulah yang disebut dengan realm. (Franks, 1999)

Username dan password yang dikirim oleh klien harus dipisahkan dengan karakter titik dua ":" dan dikirim dalam bentuk string Base64. Sebagai contoh jika username adalah “stikom” dan password adalah “surabaya” maka susunannya adalah “stikom:surabaya”. Bentuk Base64 dari string tersebut adalah “c3Rpa29tOnN1cmFiYXlh”. Sehingga untuk setiap request yang memerlukan otorisasi klien wajib menyertakan header berikut:

Authorization: Basic c3Rpa29tOnN1cmFiYXlh

Berikut penulis ilustrasikan proses bagaimana mengakses sebuah resource pada URL http://example.com/top-secret/list.txt yang diproteksi menggunakan


(31)

mekanisme HTTP Basic Authentication. Username dan Password yang digunakan adalah “mib:universe”.

1. Klien melakukan request tanpa otorisasi. GET /top-secret/list.txt HTTP/1.1 Host: example.com

2. Server merespon dengan status-code 401 Unauthorized dan memberitahu klien bahwa mekanisme yang digunakan adalah Basic Authentication.

HTTP/1.1 401 Unauthorized

WWW-Authenticate: Basic realm="MIB Top Secret List" Content-Type: text/html

Content-Length: 1234

[--Pesan error dari server ditampilkan disini--] 3. klien melakukan request ulang dengan data otorisasi.

GET /top-secret/list.txt HTTP/1.1 Host: example.com

Authorization: Basic bWliOnVuaXZlcnNl 4. Server merespon dengan status-code 200 OK.

HTTP/1.1 200 OK

Content-Type: text/plain Content-Length: 1234 [--Isi dari file--]

B. DigestBAuthentication

Pada basic authentication informasi otorisasi dikirim menggunakan teks biasa yang di-encode menggunakan Base64, sehingga orang lain dalam jaringan yang dilalui paket tersebut dapat melihat isi dari username dan password hanya dengan melakukan proses decode isi dari header Authorization. Digest authentication mencoba untuk memecahkan masalah ini, pada model otentikasi digest kombinasi yang digunakan tidak hanya username dan password tetapi juga suatu nilai yang disebut nonce. Kombinasi string pada digest authentication


(32)

dienkripsi menggunakan algoritma enkripsi satu arah MD5. Sehingga nilai dari string enkripsi tersebut tidak dapat didekripsi. (Franks, 1999)

Selain ketiga kombinasi tersebut untuk menghasilkan string MD5 checksum yang benar maka diperlukan beberapa kombinasi lain untuk digabungkan dengan kombinasi sebelumnya. Franks (1999) memaparkan dalam RFC 2617 tentang cara bagaimana suatu MD5 checksum untuk digest authentication dihasilkan. Langkah-langkahnya adalah sebagai berikut.

1. Hasilkan MD5 hash dari kombinasi "username:realm:password". Masukkan hash tersebut kedalam A1.

2. Hasilkan MD5 hash dari kombinasi "HTTP Method:URL". Masukkan hash

tersebut kedalam A2.

3. Hasilkan MD5 hash dari kombinasi "A1:nonce:nc:cnonce:qop:A2" Masukkan hash tersebut kedalam nilai response.

Keterangan dari berbagai kombinasi nilai tersebut diatas dapat dilihat pada tabel 2.7.

Tabel 2.7. Keterangan kombinasi pada digest authentication

Kode Keterangan

username Nama pengguna yang digunakan oleh user.

realm String yang diberikan oleh server untuk mengidentifikasi resource yang diproteksi.

password Kata kunci yang digunakan oleh user.

HTTP Method Tipe request yang digunakan, contoh GET atau POST. URL Alamat URL dari resource yang diproteksi. Contoh

/private/secret.txt.

nonce String unik yang dihasilkan server setiap menampilkan response 401 Unauthorized.

nc (nonce-count) Nomor heksadesimal untuk menghitung jumlah request yang telah dilakukan, contoh nc=00000001.


(33)

Tabel 2.7. Keterangan kombinasi pada digest authentication

Kode Keterangan

baik oleh server atau klien untuk menghindari plaintext choosen attack.

Berikut penulis ilustrasikan bagaimana proses digest authentication pada resouce dengan alamat URL http://example.com/area51/doc.txt. Username dan password yang digunakan masing-masing adalah “ufo” dan “moon”.

1. Klien melakukan request tanpa otorisasi. GET /area51/doc.txt HTTP/1.1 Host: example.com

2. Server merespon dengan status-code 401 Unauthorized dan memberitahu klien bahwa mekanisme yang digunakan adalah Digest Authentication. HTTP/1.1 401 Unauthorized

WWW-Authenticate: Digest realm="Digest Auth Test", qop="auth",

nonce="1f36b89738b2483cc107bc32b59bb626", opaque="ea9420fab6ff939b0e0a65bb597737ff" Content-Type: text/html

Content-Length: 1234

[--Pesan error dari server ditampilkan disini--] 3. Klien melakukan request ulang dengan data otorisasi.

GET /top-secret/list.txt HTTP/1.1 Host: example.com

Authorization: Digest username="ufo",

realm="Digest Auth Test",

nonce="1f36b89738b2483cc107bc32b59bb626", uri="/private/", response="a22b45564fdf003e687cc72adde50bcc", opaque="ea9420fab6ff939b0e0a65bb597737ff", qop=auth, nc=00000001, cnonce="32157b05c0d22c8b"

4. Jika hasil kalkulasi checksum yang dihasilkan server sama dengan nilai yang ada pada response, maka server merespon dengan status-code 200 OK. HTTP/1.1 200 OK

Content-Type: text/plain Content-Length: 1234


(34)

[--Isi dari file--]

HTTP authentication bukanlah solusi untuk membuat sebuah aplikasi yang benar-benar aman. Karena pada kenyatannya semua header dan body dari paket HTTP tersebut dapat dilihat ketika melintasi suatu jaringan.

Secara umum metode ini sangat jarang digunakan pada aplikasi yang diperuntukkan kepada publik (internet). Model otentikasi ini banyak digunakan pada lingkungan organisasi yang hanya memanfaatkan jaringan intranet. (Stuttard, 2011).

2.3.6. HTTPS

Protokol HTTP menggunakan TCP biasa untuk melakukan mekanisme pengiriman, yang berarti tidak terenkripsi dan oleh karena itu rawan untuk disabotase oleh penyerang. HTTPS pada dasarnya adalah protokol yang berada pada aplication layer sama dengan HTTP namun ia dilewatkan melalui mekanisme pengiriman yang aman yaitu Secure Socket Layer (SSL). Mekanisme ini melindungi privasi dan integritas data yang dilewatkan melalui jaringan, sehingga mengurangi resiko kemungkian terjadinya interception attack. Sebagai catatan mekanisme SSL telah digantikan oleh yang lebih baru disebut Transport Layer Security (TLS). (Stuttard, 2011)

HTTPS merupakan mekanisme yang paling umum digunakan untuk mengamankan HTTP. HTTPS pertama kali diperkenalkan oleh perusahaan Netscape Corporation dan saat ini telah didukung oleh semua web browser dan server. Untuk mengakses halaman web yang menggunakan protokol HTTPS maka cara penulisan skemanya diawali dengan https:// bukan http://. Sebagai contoh https://www.example.com/. Ketika menggunakan HTTPS semua data pada request


(35)

dan response dienkripsi sebelum data tersebut dikirimkan ke jaringan. HTTPS bekerja dengan menyediakan sebuah metode pengiriman kriptografi pada susunan security layer. (Gourley, 2002)

Gambar 2.3. Susunan layer HTTP dan HTTPS (Gourley, 2002)

2.3.7. HTTPBCookie

HTTP Cookie bukan merupakan bagian dari standar protokol HTTP yang distandardisasi pada dokumen RFC 2616, tapi cookie merupakan salah satu protokol tambahan yang sangat penting dalam eksistensi web. Cookie memperbolehkan server untuk mengirimkan informasi singkat dengan format “name=value” kepada web browser melalui header “Set-Cookie” dan untuk mendapatkan informasi itu kembali server mengharapkan web browser mengirimkan ulang dengan nama header “Cookie”. Cookie merupakan cara yang paling populer untuk melacak session dan otentikasi user pada aplikasi berbasis web. (Zalewski, 2012).

Berikut ini adalah contoh header yang dikirimkan oleh server. Set-Cookie: session_id=b61ec238558b59c3eaf7bb870b850df5

Sedangkan contoh dibawah ini adalah header cookie yang dikirimkan klien kepada server.


(36)

Cookie: session_id=b61ec238558b59c3eaf7bb870b850df5

Stuttard (2011) memaparkan selain nilai aktual, sebuah cookie juga dapat membawa atribut tambahan yang sifatnya pilihan. Atribut tambahan (tabel 2.8) ini digunakan untuk memberitahu web browser bagaimana memperlakukan cookie yang dikirim.

Tabel 2.8. Atribut tambahan pada cookie Atribut Keterangan

expires Tanggal dimana sebuah cookie masih dianggap valid. Jika nilai ini digunakan akan menyebabkan web browser menyimpan cookie ke sebuah penyimpanan permanen dan akan digunakan ketika setiap ada request sampai masa expires tiba. Contoh penggunaan expires: expires=Tue, 15 Jan 2013 21:47:38 GMT

domain Nama domain (atau sub domain) yang valid untuk cookie. Ini harus sama atau masih satu sub dengan domain parent asal dari cookie yang diterima. Contoh penggunaan domain:

domain=example.com domain=.example.com domain=foo.example.com

path URL path yang valid untuk cookie. Contoh penggunaan path: path=/

path=/member

secure Jika atribut ini dipakai maka cookie hanya boleh dikirimkan lewat jalur HTTPS bukan HTTP.

HttpOnly Jika atribut ini dipakai maka cookie tidak dapat diakses lewat client-side script seperti javascript.

Berikut contoh lengkap susunan dari sebuah cookie yang dikirm oleh server. Set-Cookie: SID=123abc; domain=.foo.com; path=/; expires=Wed, 13-Jan-2021 22:23:01 GMT; secure; HttpOnly

2.5. HTML

Menurut Raggett (1999) HTML (HyperText Markup Language) merupakan bahasa yang digunakan untuk melakukan publikasi halaman dalam World Wide


(37)

Web.

HTML versi paling terakhir adalah HTML 4.01. W3C sebagai organisasi yang melakukan standardisasi HTML menyertakan alternatif bahasa lain yaitu XHTML. XHTML merupakan reformulasi HTML yang disesuaikan dengan pola penulisan XML. Semua fitur yang ada pada HTML 4.01 juga didukung oleh XHTML. (Kennedy, 2006).

Untuk melakukan format tampilan pada halaman HTML harus dipergunakan aturan khusus disebut tag. Tag memberitahu web browser bagaimana menampilkan atau memperlakukan informasi yang ada dalam tag tersebut. (Kennedy, 2006).

Gambar 2.4. Contoh sederhana halaman HTML

Berikut contoh sebuah halaman HTML sederhana dengan penggunaan beberapa tag untuk melakukan format penulisan. Output dari contoh penggunaan tag-tag HTML dibawah ini ditunjukkan oleh gambar 2.4.


(38)

<head><title>Sejarah STIKOM</title></head> <body>

<h1>Sejarah STIKOM</h1>

<img src="gambar/stikom.png" alt="logo stikom" align="left" style="margin: 0 20px 10px 0;" /><p>Di tengah kesibukan derap Pembangunan Nasional, kedudukan informasi semakin penting. Hasil suatu pembangunan sangat ditentukan oleh materi informasi yang dimiliki oleh suatu negara. Kemajuan yang dicitakan oleh suatu pembangunan akan lebih mudah dicapai dengan <strong>kelengkapan informasi</strong>.</p>

</body> </html>

2.5.1. HTMLBForm

Tujuan HTML form adalah untuk untuk mengirimkan data yang diinputkan pengguna kepada server pemroses. Menurut Kennedy (2006), form terdiri dari satu atau lebih input teks, tombol, multiple-choice checkbox, combobox, dan image map, semua diletakkan didalam tag <form>. Komponen dari form ditunjukkan pada tabel 2.9.

Tabel 2.9. Komponen pada tag <form>

Komponen Keterangan

Tag pembuka <form>

Atribut accept, action, charset, class, dir, enctype, id, lang, method, name, onClick, onDblClick, onKeyDown, onKeyPress, Atribut onKeyUp, onMouseDown, onMouseMove, onMouseOut,

onMouseOver, onMouseUp, onReset, onSubmit, style, target, title

Isi Tag-tag yang digunakan untuk mendapatkan input dari pengguna.

Tag penutup </form>

Digunakan pada Blok <body></body>

Dua atribut yang paling sering digunakan pada tag pembuka form adalah atribut action dan method. Menurut Kennedy (2006), atribut action digunakan untuk menentukan URL dari aplikasi pada sisi server yang akan menerima dan memproses data yang ada pada form. Contoh sebuah atribut action adalah sebagai


(39)

berikut.

<form action="http://example.com/login.php"> ...

</form>

Nilai dari atribut action dapat berupa URL lengkap dengan protokol dan domain (http://example.com) atau berupa URL relatif tanpa protokol dan domain.

Atribut berikutnya yang juga penting adalah atribut method. Atribut ini digunakan untuk menentukan metode yang digunakan web browser dalam mengirimkan data kepada server pemroses. Terdapat dua metode pada atribut method yaitu: GET dan POST. Jika atribut method tidak dituliskan maka web browser akan menggunakan metode GET. Berikut contoh penggunaan atribut method. (Kennedy, 2006)

<form action="http://example.com/login.php" method="POST"> ...

</form>

Sebuah form tidak akan berguna tanpa ada inputan data didalamnya. Untuk menambahkan inputan data digunakan beberapa tag lain. Tag yang peruntukannya digunakan didalam form adalah tag <input>, <select>, <option>, <button> dan <textarea>. Dari beberapa tag tersebut tag <input> adalah yang paling sering digunakan. Tabel 2.10 menunjukkan komponen penyusun dari tag <input>.

Tabel 2.10. Komponen pada tag <input>

Komponen Keterangan

Tag pembuka <input>

Atribut accept, accesskey, align, alt, border , checked, class, dir, disabled, id, lang, maxlength, name, notab , onBlur, onChange, onClick, onDblClick, onFocus, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onSelect, size, src, tabindex, taborder , title, type, usemap, value

Isi Tidak ada


(40)

Tabel 2.10. Komponen pada tag <input>

Komponen Keterangan

Digunakan pada Blok <form></form>

Sebuah tag input dapat direpresentasikan secara berbeda-beda ketika ditampilkan pada web browser. Hal tersebut tergantung nilai dari atribut type, dimana atribut ini menentukan tipe atau fungsi dari suatu input. Macam-macam nilai dari tag input yaitu: text, password, radio, checkbox, button, submit, image, reset dan hidden. Berikut contoh penggunaan tag input untuk membuat sebuah form login, output dari contoh berikut dapat dilihat pada gambar 2.5.

<h2>Login</h2>

<form action="http://example.com/login.php" method="post"> <label for="uname">Username</label><br/>

<input type="text" name="uname" id="uname" /><br/> <label for="upass">Username</label><br/>

<input type="password" name="upass" id="upass" /><br/> <input type="submit" name="btnlogin" id="btnlogin" value="LOGIN" />

</form>

Gambar 2.5. Contoh penggunaan tag input pada form

Dari contoh diatas ketika user menekan tombol LOGIN maka web browser akan mengirim HTTP request bertipe POST kepada server. Menekan tombol tersebut sama halnya dengan mengirim sebuah HTTP request seperti berikut (diasumsikan password yang diketik adalah “surabaya”).


(41)

POST /login.php HTTP/1.1<CRLF> Host: example.com<CRLF>

Content-Type: application/x-www-form-urlencoded<CRLF> Content-Length: 42<CRLF>

<CRLF>

uname=stikom&upass=surabaya&btnlogin=LOGIN<CRLF><CRLF>

Dapat dilihat bahwa data inputan yang dikirimkan oleh web browser dalam bentuk teks biasa sehingga orang lain yang memiliki akses terhadap jaringan yang dilalui dapat dengan mudah melihat isi dari data yang dikirimkan. Karena itulah diciptakan protokol HTTPS agar komunikasi antara pengguna dan server tidak bisa dilihat secara langsung karena terenkripsi.

Jika pada contoh sebelumnya method diubah dari POST menjadi GET maka inilah HTTP request yang dikirimkan oleh web browser.

GET /login.php?uname=stikom&upass=surabaya&btnlogin=LOGIN HTTP/1.1<CRLF>

Host: example.com<CRLF><CRLF>

Pada metode GET data yang dikirimkan akan ditambahkan pada URL ditandai dengan adanya tanda tanya '?'. Menurut Robinson (2004) data setelah tanda '?' disebut variabel pencari dan dimasukkan kedalam environment variable bernama QUERY_STRING. Aplikasi pada sisi server dapat mengambil data yang dikirim lewat environment variable tersebut.

2.5.2. Hyperlink

Hyperlink atau sering disebut link, merupakan fitur yang digunakan untuk dapat berpindah dari satu bagian ke bagian lain dalam halaman itu sendiri, ke halaman lain dalam satu koleksi lokal, atau halaman lain yang ada di internet. Hyperlink atau disebut juga anchor ditandai dengan tag <a>. (Kennedy, 2006).

Tabel 2.11. Komponen pada tag anchor

Komponen Keterangan


(42)

Tabel 2.11. Komponen pada tag anchor

Komponen Keterangan

Atribut accesskey, charset, class, coords, dir, HRef, hreflang, id, lang, name, onBlur, onClick, onDblClick, onFocus, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, rel, rev, shape, style, tabindex, target, title, type

Isi Tag-tag yang dapat digunakan untuk presentasi ke user. Diantaranya: <span>, <label>, <img>, dan <div>.

Tag penutup </a> Digunakan pada Blok teks

Atribut yang utama pada tag link adalah href, dimana atribut ini berisi URL tujuan ketika link tersebut diklik. Berikut contoh potongan kode penggunaan tag anchor. Output dari potongan kode dibawah ini dapat dilihat pada gambar 2.6. <a href="http://www.stikom.com">Masuk web STIKOM Surabaya</a><br/> <p>Klik logo Google untuk ke google.com (New Window).</p>

<a href="http://www.google.com"><img src="gambar/google.png" /></a>

<p>Klik logo Yahoo untuk ke yahoo.com.</p>

<a href="http://www.google.com"><img src="gambar/yahoo.png" /></a>

Gambar 2.6. Contoh penggunaan hyperlink

2.5.3. Frame


(43)

memperbolehkan isi dari suatu halaman HTML untuk ditampilkan dalam area kotak, secara singkat dapat disebut menempelkan halaman lain. Web browser modern mendukung beberapa penggunaan tag frame namun yang paling umum digunakan adalah inline frame atau iframe. Contoh penggunaan tag iframe adalah sebagai berikut.

<iframe src="http://example.com/"></iframe>

Kennedy (2006) menjelaskan beberapa komponen-komponen iframe seperti yang tertera pada tabel 2.12.

Tabel 2.12. Komponen pada tag iframe

Komponen Keterangan

Tag pembuka <iframe>

Atribut align, class, frameborder, height, id, longdesc, marginheight, marginwidth, name, scrolling, src, style, title, width

Isi Tidak ada.

Tag penutup </iframe> Digunakan pada Blok body


(44)

Berikut penulis contohkan penggunaan iframe dimana halaman yang ditempelkan dari website yang beralamat di http://www.stikom.edu/. Gambar 2.7 menunjukkan output dari contoh yang dimaksud.

<html>

<head><title>iframe stikom.edu</title></head> <body>

<h1>Menempelkan www.stikom.edu</h1>

<iframe src="http://www.stikom.edu" border="0" width="100%" height="100%"></iframe>

</body> </html>

2.5.4. Javascript

Javascript adalah sebuah bahasa scripting yang dapat menggunakan fitur-fitur yang ada pada web browser. Javascript dapat dipanggil pada sebuah halaman lewat suatu kode blok atau sebagai statemen tunggal yang dilampirkan pada tag-tag tertentu. Web browser yang mendukung penggunaan javascript akan melakukan interpretasi dan sebuah aksi atas statemen javascript yang diberikan untuk melakukan berbagai hal diantaranya: menambahkan suatu tampilan pada halaman, mengontrol tampilan, validasi dan manipulasi elemen form, dan melakukan hal-hal komputasi umum. (Kennedy, 2006).

Javascript dapat dijalankan dengan beberapa cara diantanya adalah melalui tag <script></script>. Daftar komponen-komponen pada tag script ditunjukkan pada tabel 2.13.

<script>

// ini adalah code javascript alert('Hello World');

</script>

Cara yang lain adalah dengan menyertakan event handler langsung pada tag tertentu. Daftar event handler untuk javascript dan tag yang pendukungnya ditunjukkan pada Tabel 2.14.


(45)

<button onclick="alert('Hello World');">Click Me</button>

Tabel 2.13. Komponen-komponen pada tag script

Komponen Keterangan

Tag pembuka <script>

Atribut charset, defer, language, src, type Tag penutup </script>

Isi Kode yang dijalankan Digunakan pada head, body

Tabel 2.14. Event Handler

Event Tag

onAbort <img>

onBlur <a>, <area>, <body>, <button>, <frameset>, <input>, <label>, <select>, <textarea>

onChange <input>, <select>, <textarea> onClick Hampir semua tag

onDblClick Hampir semua tag onError <img>

onFocus <a>, <area>, <body>, <button>, <frameset>, <input>, <label>, <select>, <textarea>

onKeyDown Hampir semua tag onKeyPress Hampir semua tag onKeyUp Hampir semua tag

onLoad <body>, <frameset>, <img> onMouseDown Hampir semua tag

onMouseMove Hampir semua tag onMouseOut Hampir semua tag onMouseOver Hampir semua tag onMouseUp Hampir semua tag onReset <form>

onSelect <input>, <textarea> onSubmit <form>


(46)

A. VariabelBpadaBJavascript

Menurut McFarlan (2012) varibel merupakan suatu cara untuk menyimpan informasi untuk dapat dimanipulasi dan digunakan pada beberapa waktu kemudian. Untuk mendeklarasikan variabel digunakan kata kunci var. Berikut contoh deklarasi variabel pada javascript.

var kampus;

kampus = "STIKOM";

// atau langsung mengisi nilai var kampus = "STIKOM";

McFarland (2012) juga menjelaskan bahwa terdapat tiga tipe data dasar pada javascript yaitu number, string, dan boolean. Javascript tidak memiliki cara khusus untuk mendeklarasikan masing-masing tipe data. Semua pendeklarasian menggunakan kata kunci var.

B. FungsiBpadaBJavascript

Fungsi pada javascript merupakan sekumpulan langkah-langkah pemrogaman yang disiapkan diawal script. Sekumpulan langkah-langkah pemrogaman tersebut tidak dijalankan ketika dibuat, tetapi disimpan pada memori web browser dan baru akan dijalankan ketika langkah-langkah tersebut dipanggil. (McFarland, 2012)

Javascript mengenal dua tipe fungsi yaitu fungsi built-in dan fungsi custom. Fungsi built-in merupakan fungsi-fungsi yang sudah disediakan oleh web browser dan untuk menggunakannya dapat langsung dipanggil. Beberapa fungsi built-in diantaranya: alert, prompt dan isNaN.

Fungsi custom merupakan suatu fungsi yang dibuat sendiri oleh developer dan tidak tersedia secara langsung pada web browser. Contoh fungsi yang dibuat


(47)

sendiri adalah sebagai berikut. Gambar 2.8 menunjukkan ketika fungsi ucapkan_salam dipanggil.

<script>

function ucapkan_salam(nama) {

alert('Halo ' + nama + ', apa kabar?'); }

// panggil fungsi untuk menjalankan ucapkan_salam('Mahasiswa');

</script>

Gambar 2.8. Contoh pemanggilan fungsi

C. DocumentBObjectBModelB(DOM)

Menurut Zalewski (2012) Document Object Model (DOM) merupakan sebuah susunan tree yang berisi semua elemen HTML, metode-metode spesifik dari tag tersebut dan propertinya (disebut juga atribut), dan data CSS. Perhatikan kode HTML berikut.

<html>

<head>Surabaya dan Yogyakarta</head> <body>

<h2>Surabaya</h2>

<p id="desc_surabaya">Kota Surabaya adalah ibukota Provinsi Jawa Timur, Indonesia.</p>

<h2>Yogyakara</h2>

<p id="desc_yogyakarta">Kota Yogyakarta adalah salah satu kota besar di Pulau Jawa.</p>

<p>

<a href="#" onclick="ganti_deskripsi('surabaya', 'Kota Pahlawan');">Ganti Surabaya</a><br/>

<a href="#" onclick="ganti_deskripsi('yogyakarta', 'Kota Gudeg');">Ganti Yogyakarta</a><br/>

<a href="#" onclick="kembali_awal();">Kembali Awal</a> </p>


(48)

// global variabel yang digunakan pada fungsi kembali_awal var surabaya_awal =

document.getElementById('desc_surabaya').innerHTML; var yogyakarta_awal =

document.getElementById('desc_yogyakarta').innerHTML;

// pencarian berdasarkan ID

function ganti_deskripsi(kota, deskripsi_baru) {

var keterangan_kota = document.getElementById('desc_' + kota);

// ganti keterangan kota

keterangan_kota.innerHTML = deskripsi_baru;

// ganti warna dan tebal if (kota == 'surabaya') {

keterangan_kota.style.color = 'red'; } else {

keterangan_kota.style.color = 'green'; }

keterangan_kota.style.fontWeight = 'bold'; }

// fungsi untuk mengembalikan deskripsi ke awal function kembali_awal() {

var surabaya = document.getElementById('desc_surabaya'); var yogyakarta = document.getElementById('desc_yogyakarta');

// kembalikan deskripsi awal

surabaya.innerHTML = surabaya_awal; yogyakarta.innerHTML = yogyakarta_awal;

// kembalikan style awal surabaya.style.color = ''; surabaya.style.fontWeight = ''; yogyakarta.style.color = ''; yogyakarta.style.fontWeight = ''; }

</script> </body> </html>

Javascript menyediakan beberapa cara dalam mengakses elemen dalam DOM. Pada contoh potongan kode diatas penulis menggunakan sebuah method dengan nama getElementById untuk mengakses sebuah element dalam struktur DOM. Setelah referensi obyek dari elemen didapat penulis dengan bebas dapat mengubah isi dan properti dari elemen tersebut. Dalam contoh diperlihatkan ketika tombol link “Ganti Surabaya” atau “Ganti Yogyakarta” diklik maka isi dan warna dari tulisan berubah. Gambar 2.9 menunjukkan output yang dimaksud.


(49)

Gambar 2.9. Contoh manipulasi DOM dengan Javascript

Method getElementById bukan satu-satunya cara dalam mengakses DOM. Terdapat beberapa method untuk mengakses DOM diantaranya ditunjukkan pada tabel 15.

Tabel 15. Metode mengakses elemen pada DOM

Method Keterangan

document.getElementById Parameter: Atribut ID dari tag Output: Single element

document.getElementsByTagName Parameter: Nama tag Output: array of element document.body.children Parameter: Index dari elemen

Output: single atau array of element document.atribut_dari_name Parameter: Atribut name dari tag


(50)

Tabel 15. Metode mengakses elemen pada DOM

Method Keterangan

Output: single atau array of element Hanya berlaku pada tag <form>, <img>, <embed>, <object>, dan <applet>.

2.5.5. EntityBEncoding

Menurut Zalewski (2012) entity encoding adalah suatu cara untuk memperbolehkan penggunaan karakter-karakter secara aman dengan menambahkan skema prefix ampersand (&) dan diakhiri dengan tanda titik koma. Terdapat beberapa nama entitas yang sudah disediakan oleh spesifikasi HTML untuk menggantikan karakter-karakter tertentu yang telah dipakai HTML sebagai struktur kode. Beberapa entitas tersebut diantaranya adalah:

1. &gt; menggantikan tanda lebih besar (>) 2. &lt; menggantikan tanda lebih kecil (<) 3. &quot; menggantikan tanda petik dua (")

Entity encoding menjadi penting karena jika karakter-karakter terentu tidak diubah entitasnya maka dapat mengacaukan struktur halaman HTML yang dibangun. Perhatikan contoh berikut.

<img src="logo/einstein.png" title="Einsten Mengatakan: "Imagination is more important than knowledge."" alt="Einstein Quote" />

Potongan kode HTML diatas tidak valid karena, HTML parser dalam hal ini web browser menganggap setelah title="Einsten Mengatakan: " adalah properti yaitu Imagination, is, important, than, knowledge. Sedangkan properti-properti tersebut sebenarnya tidak ada dalam definisi HTML atau skema DTD


(51)

yang dibuat. Entity encoding mengatasi masalah tersebut dengan mengganti petik dua dengan nama entitas &quot;

<img src="logo/einstein.png" title="Einsten Mengatakan: &quot;Imagination is more important than knowledge.&quot;" alt="Einstein Quote" />

Selain entitas nama juga dimungkinkan memasukkan entitas karakter ASCII atau karakter Unicode dengan notasi &#nomor. Nomor dapat berupa bentuk angka desimal atau heksadesimal jika ditambahkan dengan prefix 'x'. Berikut beberapa contoh penggunaan notasi tersebut.

1. &#58; menggantikan tanda titik dua 2. &#40; menggantikan tanda kurung buka 3. &#40; menggantikan tanda kurung tutup

Bagi attacker karakter-karakter tersebut dapat digunakan untuk memasukkan suatu perintah yang tidak dikehendaki oleh developer. Perhatikan contoh berikut.

<a href="javascript&#58;alert&#40;1&#41;&#59;"></a>

Contoh potongan kode diatas ekuivalen sama dengan kode berikut. <a href="javascript:alert(1)"></a>

Selain pada tag HTML, perlu diperhatikan juga masalah encoding pada javascript. Karena menurut Zalewski (2012) javascript mendukung karakter encoding berbasis backslashes yang dapat digunakan untuk melakukan escaping pada tanda petik, HTML markup, dan masalah lain yang berhubungan dengan penyisipan teks. Beberapa cara untuk memasukkan karakter encoding pada javascript adalah dengan notasi dalam petik \nomor. Dimana nomor dapat berupa bilangan oktal, heksadesimal, atau 16-bit heksadesimal. Berikut beberapa contoh encoding javascript menggunakan penomoran heksadesimal.


(52)

1. '\x41' menggantikan karakter 'A' (ASCII 65) 2. '\x22' menggantikan karakter petik dua (ASCII 34) 3. '\x3A' menggantikan karakter titik dua (ASCII 58)

2.6. AplikasiBpadaBSisiBServer

Pada aplikasi berbasis web sekarang ini masih terdapat banyak konten statik. Namun, sebagian besar isi yang disajikan kepada pengguna sebenarnya dihasilkan secara dinamis. Ketika pengguna mengirim request pada sebuah konten dinamis, server merespon dengan membuatnya saat itu juga (on-the-fly) dan setiap pengguna mungkin menerima respon yang berbeda-beda.

Ketika web browser dari pengguna melakukan request pada sebuah konten dinamis, normalnya web browser tidak hanya meminta salinan dari resource tersebut. Secara umum, web browser juga mengirim berbagai parameter bersama request tersebut. Parameter-parameter ini, memungkinkan aplikasi pada sisi server untuk menghasilkan konten yang sesuai dikhusukan untuk masing-masing pengguna secara unik.

Seperti perangkat lunak pada umumnya, aplikasi berbasis web juga menggunakan berbagai macam teknologi pada sisi server untuk mendukung fungsionalitasnya beberapa diantaranya:

1. Bahasa Scritping seperti PHP, VBScript (ASP) dan Perl. 2. Platform aplikasi web seperti ASP.NET dan Java. 3. Web server seperti Apache, IIS dan Netscape Enterprise. 4. Database server seperti MS-SQL, Oracle dan MySQL.

5. Dan komponen backend lain seperti filesystem, web service berbasis SOAP dan directory service.


(53)

(Stuttard, 2011) 2.7. Database

Database adalah suatu koleksi yang terdiri dari data tetap yang digunakan oleh sistem aplikasi dan diatur oleh sebuah database management system (DBMS). DBMS dapat juga disebut database server adalah sebuah kumpulan program yang memperbolehkan pengguna untuk membuat dan mengelola database. (Van der Lans, 2007)

2.7.1. StructuredBQueryBLanguage

Menurut van der Lans (2007) Structured Query Language (SQL) adalah perintah yang digunakan untuk memformulasikan statemen-statemen yang diproses oleh sebuah database server. Suatu statemen SQL terdiri dari kumpulan klausa-klausa SQL tertentu. Tabel 2.16 menunjukkan beberapa klausa SQL yang umum digunakan.

Tabel 2.16. Klausa-klausa umum SQL Statemen Keterangan

SELECT Digunakan untuk mendapatkan data dari tabel.

UPDATE Digunakan untuk mengubah nilai pada suatu baris pada tabel. DELETE Digunakan untuk menghapus suatu baris pada tabel.

FROM Digunakan untuk memilih tabel yang menjadi target dari statemen (Umumnya SELECT dan DELETE).

WHERE Digunakan untuk membatasi hasil dari suatu statemen.

ORDER BY Digunakan untuk mengurutkan hasil dari statemen SELECT berdasarkan kolom tertentu.

GROUP BY Digunakan untuk mengelompokkan hasil statemen SELECT berdasarkan kolom tertentu.

JOIN Digunakan untuk memilih lebih dari satu tabel yang akan menjadi target dari statemen. Bentuk lain dari join adalah LEFT JOIN, INNER JOIN, dan RIGHT JOIN.

UNION Digunakan untuk menggabungkan hasil dari dua atau lebih statemen SELECT.


(54)

Gambar 2.10. Contoh struktur tabel

Berikut contoh perintah SQL yang digunakan untuk mendapatkan nomor pinjaman, nama peminjam, nama buku, tanggal pinjam, dan tanggal kembali berdasarkan struktur tabel pada gambar 2.10.

SELECT pjn.id_pinjaman, mhs.nama_mahasiswa, bk.nama_buku, pjn.tgl_pinjam, pnj.tgl_kembali

FROM pinjaman pjn LEFT JOIN mahasiswa mhs ON mhs.nim=pjn.nim LEFT JOIN buku bk ON bk.id_buku=pjn.id_buku

ORDER BY pjn.tgl_kembali

2.7.2. MySQL

MySQL merupakan database server yang bersifat open source. MySQL salah satu elemen utama dalam susunan perangkat lunak yang sering disebut dengan istilah LAMP yaitu Linux, Apache, MySQL, PHP/Python/Perl yang banyak digunakan untuk pengembangan aplikasi berbasis web. (Oracle, 2012)

Untuk melakukan proteksi data, MySQL menyediakan sistem hak akses yang dapat digunakan untuk membatasi akses seorang pengguna hanya terbatas pada semua database (user privilege), database tertentu (database privilege), tabel


(55)

tertentu (table privilege) atau kolom tertentu saja (column privilege). Hampir sama dengan database server lain pengaturan hak akses menggunakan perintah GRANT dan REVOKE. (Van der Lans, 2007)

Gambar 2.11. MySQL dalam arsitektur aplikasi web

Pada MySQL terdapat sebuah tabel istimewa bernama INFORMATION_SCHEMA. Tabel tersebut memberikan akses ke database metadata. Metadata merupakan “data tentang sebuah data”, seperti nama database dan tabel, tipe data dari kolom, atau informasi hak akses. INFORMATION_SCHEMA adalah metadata dari database, tempat untuk menyimpan semua informasi tentang database lain yang dikelola oleh MySQL server. (Oracle, 2012)

2.8. Hacking

Hacker adalah suatu istilah untuk orang atau kelompok yang menulis kode program dan juga yang mengeksploitasi kelemahannya. Meskipun dua kelompok ini memiliki tujuan yang berbeda namun keduanya menggunakan cara yang mirip untuk memecahkan masalah. Suatu proses yang dilakukan hacker untuk menemukan sebuah solusi atas masalah dengan cara yang cerdas dan diluar intuisi inilah yang disebut dengan istilah hacking. (Erickson, 2008)


(56)

Sehingga dalam web hacking semua proses yang melibatkan bagaimana sebuah halaman website terbentuk dan bekerja dapat dimanfaatkan oleh hacker untuk dieksploitasi. Hal-hal yang dapat dieksploitasi oleh hacker pada web sangat banyak beberapa diantaranya meliputi mekanisme input data, lalu lintas traffic jaringan, database server, web server, protokol HTTP, kelemahan pada web browser dan tentu saja celah keamanan pada aplikasi web itu sendiri.

2.9. AncamanBKeamananBWeb

Masalah utama yang mengancam aplikasi berbasis web adalah klien dapat mengirim berbagai macam input. Hal ini dikarenakan klien berada diluar kontrol dari aplikasi. Sebuah aplikasi harus menganggap semua input yang dikirimkan klien adalah berbahaya. Untuk itu perlu dilakukan berbagai cara agar attacker tidak dapat memasukkan input yang berbahaya yang dapat menyebabkan aplikasi dapat diambil alih. Masalah utama tentang input tersebut muncul karena beberapa hal diantaranya:

1. Pengguna dapat dengan mudah melakukan interfensi pada setiap data yang dikirimkan antara klien dan server, termasuk parameter request (query string), cookie, HTTP header. Setiap kontrol security yang diterapkan pada sisi klien (web browser) contohnya validasi input, dapat dengan mudah dilalui.

2. Pengguna dapat mengirimkan request dalam berbagai urutan dan dapat mengirimkan berbagai parameter dari yang aplikasi inginkan. Asumsi yang dibuat developer tentang bagaimana pengguna seharusnya mengirimkan data ke aplikasi dapat dijadikan sebuah celah.


(1)

338 Dilihat dari sisi poin, rata-rata yang dipmrolmh pmmain untuk katmgori Basic Mission adalah 35,7 poin, kmmudian Javascript Mission 74,4 poin dan Realistic Mission 61,6 poin. Dmngan dmmikian prosmntasm pmrolmhan poin olmh pmmain pada katmgori Basic Mission adalah 23,8%, katmgori Javascript Mission 49,6% dan Realistic Mission 8,8%.


(2)

KESIMPULANBDANBSARAN

5.1. Kesimpulan

Setelah dilakukan uji coba dan evaluasi pada Aplikasi Belajar Web Hacking ini, maka dapat diambil kesimpulan sebagai berikut:

1. Aplikasi dapat menyajikan berbagai misi (soal) sebanyak 22 misi dengan total poin (skor) 1000 yang meliputi materi tentang Protokol HTTP, SQL Injection pada MySQL 5, Javascript, kelemahan password, enkripsi, dictionary attack dan kemampuan membuat script. Misi-misi terbagi dalam tiga kategori yaitu Basic Mission dengan 7 misi (150 poin), Javascript Mission dengan 8 misi (150 poin), dan Realistic Mission dengan 7 misi (700 poin). Prosentase penyelesaian misi dari tiap-tiap kategori dan rata-rata perolehan poin dari 10 web developer yang diuji adalah Basic Mission 34,28% (35,7 poin), Javascript Mission 58,75% (74,4 poin) dan Realistic Mission 22,85% (61,6 poin). Dengan demikian aplikasi dapat digunakan untuk mengevaluasi kemampuan web developer melalui serangkaian misi dan pemberian poin dimana setelah dilakukan pengujian prosentase tingkat penyelesaian web developer cukup rendah untuk kategori Basic Mission dan Realistic Mission yaitu dibawah 50%.

2. Berdasarkan hasil uji coba, didapatkan bahwa aplikasi dapat terintegrasi dengan jejaring sosial Facebook dimana aktifitas yang dilakukan pada aplikasi dapat terlihat pada akun Facebook pengguna. Hal tersebut terindikasi ketika proses otentikasi dimana pengguna hanya memerlukan akun Facebook untuk dapat terotentikasi, kemudian ketika pengguna berhasil


(3)

340 menyelesaikan misi dan saat pengguna berhasil menyalip perolehan skor dari pengguna lain, aktifitas-aktifitas tersebut terlihat pada akun Facebook pengguna.

5.2. Saran

Saran yang dapat diberikan untuk pengembangan aplikasi lebih lanjut adalah sebagai berikut:

1. Pemberian status tingkatan atas pencapaian yang dilakukan pengguna pada aplikasi. Sebagai contoh status tingkatan yang dapat diberikan adalah “Hacker”, “Newbie”, dan “Script Kiddie”. Salah satu cara untuk membuat status tingkatan dapat dilihat berdasarkan skor yang diperoleh atau berdasarkan materi penyusun soal-soal yang diselesaikan.

2. Materi pembelajaran keamanan aplikasi berbasis web yang dapat ditambahkan pada aplikasi adalah tentang Cross-site Scripting (XSS) dan Cross-site Request Forgery (CSRF). Dimana aplikasi harus dapat mensimulasikan hubungan antara tiga objek yaitu penyerang, korban, dan server.


(4)

Amblmr, Scott W. 2011. Introduction to Test Driven Development (TDD). http://www.agilmdata.org/mssays/tdd.html, diaksms 04 Juni 2012.

Amblmr, Scott W. 2012. Agile Model Driven Development (AMDD): The Key to Scaling Agile Software Development. http://www.agilmmodmling.com/mssays/amdd.htm, diaksms 10 Oktobmr 2012.

Bmrnmrs-Lmm, T., mt al. 2005. Uniform Resource Identifier (URI): Generic Syntax. http://www.rfc-mditor.org/rfc/rfc3986.txt, diaksms 30 Marmt 2012.

Council, Dmsign. 2003. Think Thief: A Designer’s Guide To Designing Out Crime. http://www.dmsigncouncil.org.uk/Docummnts/Docummnts/Publications/Th ink%20Thimf_Dmsign_Council.pdf, diaksms 10 Oktobmr 2012.

Davidovitch, L., Parush A., Shtub, A. 2006. Simulation-based Learning in Engineering Education: Performance and Transfer in Learning Project Management. http://www.jmm.org/2006/octobmr/6.pdf, diaksms 09 Nopmmbmr 2012.

Dmitml P.J., Dmitml H.M. 2008. Internet & World Wide Web : How To Program, Fourth Edition . Pmarson Education, Inc: Nmw Jmrsmy.

Erickson, Jon. 2008. Hacking: The Art Of Exploitation, 2nd Edition. No Starch Prmss, Inc: San Fransisco.

Facmbook. 2012. Platform.

http://nmwsroom.fb.com/contmnt/dmfault.aspx?NmwsArmaId=137, diaksms 01 juni 2012.

Facmbook. 2012. Key Facts.

http://nmwsroom.fb.com/contmnt/dmfault.aspx?NmwsArmaId=22, diaksms 01 juni 2012.

Fimlding, R., mt al. 1999. Hypertext Transfer Protocol -- HTTP/1.1. http://www.imtf.org/rfc/rfc2616.txt, diaksms 04 April 2012.

Franks, J., mt al. 1999. HTTP Authentication: Basic and Digest Access Authentication. http://www.imtf.org/rfc/rfc2616.txt, diaksms 04 April 2012.

Gourlmy, David and Totty, Brian. 2002. HTTP: The Definitive Guide. O’Rmilly Mmdia, Inc: Smbastopol.

Grant, Moira M., Davis, Kurt H. 2007. Simulation-Based Learning In Medical


(5)

342 Laboratory Education.

http://csmls.org/csmls/mmdia/docummnts/publications/rmports/csmls_simu lations_final_rmport.pdf, diaksms 10 Nopmmbmr 2012.

Kindlmy, Randall. 2002. The Power of Simulation-based e-Learning (SIMBEL). http://www.mlmarningguild.com/pdf/2/091702DES-H.pdf, diaksms 15 Nopmmbmr 2012.

Kmlly, Orla C. and Finlayson, Odilla E. 2007. Providing solutions through problem-based learning for the undergraduate 1st year chemistry laboratory . http://www.rsc.org/imagms/Kmlly%20final_tcm18-94355.pdf, diaksms 09 Marmt 2013.

Kmnnmdy, Bill., Musciano, Chuck. 2006. HTML & XHTML: The Definitive Guide, 6th Edition. O’Rmilly Mmdia, Inc: Smbastopol.

Moats, R. 1997. URN Syntax. http://www.rfc-mditor.org/rfc/rfc2141.txt, diaksms 31 Marmt 2012.

McFarland, David Sawymr. 2012. Javascript & jQuery: the missing manual. O’Rmilly Mmdia, Inc: Smbastopol.

Oraclm. 2012. About MySQL. http://www.mysql.com/about/, diaksms 21 Mmi 2012. Oraclm. 2012. Chapter 19 INFORMATION_SCHEMA Tables.

http://dmv.mysql.com/doc/rmfman/5.0/mn/information-schmma.html, diaksms 21 Mmi 2012.

OWASP. 2011. SQL Injection. https://www.owasp.org/indmx.php/SQL_Injmction, diaksms 28 Mmi 2012.

Purwanto, M. Ngalim. 2008. Prinsip-prinsip dan Teknik Evaluasi Pengajaran. Rmmaja Rosdakarya: Bandung.

Sadirman, A.M. 2005. Interaksi dan Motivasi Belajar-Mengajar. Rajagrafindo Pmrsada: Jakarta.

Savmry, John R. & Duffy, Thomas. 2001. Problem Based Learning: An instructional model and its constructivist framework.

http://www.pblmarning.com/uploads/4/7/9/6/4796041/problmm_basmd_lma rning_an_instructional_modml_and_its_constructivist_frammwork.pdf, diaksms 09 Marmt 2013.

Stuttard, Dafydd and Pinto, Marcus. 2011. The Web Application Hacker’s Handbook: Finding and Exploiting Security Flaws, Second Edition. John Wilmy & Sons, Inc: Indianapolis.


(6)

Boston.

Zalmwski, Michal. 2012. The Tangled Web: A Guide To Securing Modern Web Applications . No Starch Prmss, Inc. San Fransisco.