Dokumen ini menjelaskan tentang model-view-controller (MVC) sebagai metode pengembangan aplikasi, serta membahas JSON sebagai format pertukaran data yang mudah dipahami, dibandingkan dengan XML. Selain itu, dijelaskan juga tentang AJAX sebagai teknik pemrograman web untuk interaksi asinkron, dan menguraikan CSRF sebagai tipe serangan di website. Terakhir, dokumen menjelaskan tentang WebSocket yang memungkinkan komunikasi dua arah antara server dan pengguna.

1. 1. Model-View-Controller atau MVC : sebuah metode untuk membuat sebuah aplikasi dengan
memisahkan data (Model) dari tampilan (View) dan cara bagaimana
memprosesnya (Controller). Dalam implementasinya
kebanyakan framework dalam aplikasi website adalah
berbasis arsitektur MVC. MVC memisahkan pengembangan aplikasi
berdasarkan komponen utama yang membangun sebuah aplikasi
seperti manipulasi data, antarmuka pengguna, dan bagian yang menjadi
kontrol dalam sebuah aplikasi web.
Contoh : CodeIgniter (CI)
Kelebihan : Fungsi-fungsi pendukung yang cukup lengkap
Mendukung PHP4 dan PHP5
Memakai konsep MVC (Model View Controller)
Performa dalam mengeksekusi sangat cepat
Dokumentasi lengkap, friendly dan didukung oleh forum, wiki, dan komunitas yang
besar.
Mudah dipelajari bagi pemula
Kekurangan : Tidak support AJAX dan ORM
Masih banyak kelonggaran dalam hal coding, misalnya penamaan file dan
membebaskan programmer untuk melanggar aturan MVC
Karena kelonggaran tersebut, CodeIgniter Tidak ditujukan untuk pembuatan web
dengan skala besar (enterprise) walaupun tersedia banyak library, karena
pengembangan akan semakin sulit dilakukan.

2. 2. JSON : format pertukaran data yang ringan, mudah dibaca dan ditulis oleh manusia, serta mudah
diterjemahkan dan dibuat (generate) oleh komputer. Format ini dibuat berdasarkan bagian dari
Bahasa Pemprograman JavaScript.JSON sama halnya dengan XML yaitu yang berfungsi
sebagai pembawa data atau sebagai pertukaran data antar client server. JSON dapat
digunakan di berbagai bahasa pemograman, dapat digunakan dalam bahasa
pemograman java, python, PHP, Ruby,java script dan lain-lain. Gaya/format JSON
sangatlah gampang dipahami, mengapa ? karena JSON masih menggunakan format-
format seperti halnya bahasa java, java script, c, c++ dan c# yaitu penggunaan pada
kurung kurawal, sehingga bagi programmer/deveplopert yang menguasai bahasa
pemograman java,java script,c,c++,c# akan lebih mudah memahami JSON terutama
dalam mengakses sebuah data dari JSON itu sendiri.
XML : Informasi yang terstruktur berisi kedua isi (kata-kata, gambar, dll) dan beberapa indikasi peran apa yang
dimainkan konten (misalnya, isi di bagian judul memiliki arti yang berbeda dari konten dalam sebuah
catatan kaki, yang berarti sesuatu yang berbeda dari konten dalam angka caption atau konten dalam
sebuah tabel database, dll). Hampir semua dokumen memiliki beberapa struktur (http://www.xml.com).

3. * Berikut ini contoh sebuah data yang direpresentasikan dengan format JSON.
{
“namaDpn” : “adli”,
“namaBlkg” : “abi”,
“alamat” : {
“Jalan” : “Jalan Garuda Sakti”,
“Kota” : “Pekanbaru”
},
“namaDpn” : [
“081261828***”,
“085267576***”
]
}

4. Contoh XML:
<?xml version="1.0" encoding="UTF-8"?>
<Resep nama="roti" waktu_persiapan="5 menit" waktu_masak="3 jam">
<judul>Roti tawar</judul>
<bahan jumlah="3" satuan="cangkir">tepung</bahan>
<bahan jumlah="0,25" satuan="ons">ragi</bahan>
<bahan jumlah="1,5" satuan="cangkir">air hangat</bahan>
<bahan jumlah="1" satuan="sendok teh">garam</bahan>
<Cara_membuat>
<langkah>Campur semua bahan dan uleni adonan sampai merata.</langkah>
<langkah>Tutup dengan kain lembap dan biarkan selama satu jam di ruangan yang hangat.</langkah>
<langkah>Ulangi lagi, letakkan di loyang dan panggang di oven.</langkah>
<langkah>Keluarkan, hidangkan</langkah>
</Cara_membuat>
</Resep>

5. Asynchronous JavaScript and XMLHTTP, atau disingkat AJaX : suatu teknik pemrograman berbasis web untuk menciptakan aplikasi
web interaktif. Tujuannya adalah untuk memindahkan sebagian besar
interaksi pada komputer web surfer, melakukan pertukaran data dengan
server di belakang layar, sehingga halaman web tidak harus dibaca ulang
secara keseluruhan setiap kali seorang pengguna melakukan perubahan.
Hal ini akan meningkatkan interaktivitas, kecepatan, dan usability.
Ajax merupakan kombinasi dari:
• DOM yang diakses dengan client side scripting language, seperti VBScript dan implementasi ECMAScript seperti JavaScript dan JScript,
untuk menampilkan secara dinamis dan berinteraksi dengan informasi yang ditampilkan
• Objek XMLHTTP dari Microsoft atau XMLHttpRequest yang lebih umum di implementasikan pada beberapa browser. Objek ini berguna
sebagai kendaraan pertukaran data asinkronus dengan web server. Pada beberapa framework AJAX, element HTML IFrame lebih dipilih
daripada XMLHTTP atau XMLHttpRequest untuk melakukan pertukaran data dengan web server.
• XML umumnya digunakan sebagai dokumen transfer, walaupun format lain juga memungkinkan, seperti HTML, plain text. XML
dianjurkan dalam pemakaian teknik AJaX karena kemudahan akses penanganannya dengan memakai DOM
• JSON dapat menjadi pilihan alternatif sebagai dokumen transfer, mengingat JSON adalah JavaScript itu sendiri sehingga
penanganannya lebih mudah
• Seperti halnya DHTML, LAMP, atau SPA, Ajax bukanlah teknologi spesifik, melainkan merupakan gabungan dari teknologi yang dipakai
bersamaan. Bahkan, teknologi turunan/komposit yang berdasarkan Ajax, seperti AFLAX sudah mulai bermunculan.

6. * CONTOH AJAX :
Source CodeSource Code
Script HTML : contoh_ajax_sederhana.html
<!DOCTYPE html>
<html>
<head>
<title>Contoh Ajax Sederhana</title>
<meta charset="UTF-8">
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onClick="loadXMLDoc()">Change Content</button>
</body>
</html>

7. 4. CSRF (Cross Site Request Forgery) : sebuah serangan pada website yang dieksekusi atas
wewenang korban, tanpa dikehendakinya.Penyerang
melakukan pemalsuan request yang berasal dari site yang
berbeda, tetapi dari sisi client tidak mengubah alamat IP
karena memang dieksekusi oleh korban. Penyerang
mengirimkan link atau halaman berisi request tersembunyi
pada pengguna (korban), yang dieksekusi oleh penggunan
tersebut ke website target.Website yang menyimpan cookies
(pengguna dapat kembali tanpa mengetikkan username dan
password) akan menarik perhatian menyerang untuk lebih
mengekplorasi fitur-fitur yang terdapat pada website setelah
login.

8. 5. Web Socket : sebuah protokol komunikasi dua arah yang dapat digunakan oleh browser. Jika
pada AJAX kita hanya dapat melakukan komunikasi satu arah dengan
mengirimkan request kepada server dan menunggu balasannya, maka
menggunakan WebSocket kita tidak hanya dapat mengirimkan request kepada
server, tetapi juga menerima data dari server tanpa harus mengirimkan
request terlebih dahulu. Hal ini berarti ketika menggunakan WebSocket
pengguna harus terus menerus terkoneksi dengan server, dan kita memerlukan
sebuah server khusus untuk dapat menjalankan aplikasi WebSocket dengan
benar.
Contoh komponen web socket :
• Socket.IO (JavaScript)
• SignalR (.Net)
• Jetty (JVM)
• EventMachine (Ruby)
• Tornado (Phyton)