<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title> &#187; Internet</title>
	<atom:link href="http://www.andisun.com/tag/internet/feed" rel="self" type="application/rss+xml" />
	<link>http://www.andisun.com</link>
	<description></description>
	<lastBuildDate>Tue, 30 Mar 2010 02:20:46 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Overview AJAX (Asynchronus JavaScript and XML)</title>
		<link>http://www.andisun.com/jurnal/overview-ajax-asynchronus-javascript-and-xml</link>
		<comments>http://www.andisun.com/jurnal/overview-ajax-asynchronus-javascript-and-xml#comments</comments>
		<pubDate>Tue, 15 Sep 2009 22:05:00 +0000</pubDate>
		<dc:creator>myandisun</dc:creator>
				<category><![CDATA[Jurnal]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[Asynchronus]]></category>
		<category><![CDATA[Internet]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[XML]]></category>

		<guid isPermaLink="false">http://www.andisun.com/?p=481</guid>
		<description><![CDATA[AJAX is not a new programming language, but a technique for creating better, faster, and more interactive web applications. With AJAX, your JavaScript can communicate directly with the server, using the JavaScript XMLHttpRequest object. With this object, your JavaScript can trade data with a web server, without reloading the page. AJAX uses asynchronous data transfer (HTTP requests) between the browser and the web server, allowing web pages to request small bits of information from the server instead of whole pages. The AJAX technique makes Internet applications smaller, faster and more user-friendly. Web applications have many benefits over desktop applications; they can reach a larger audience, they are easier to install and support, and easier to develop. However, Internet applications are not always as "rich" and user-friendly as traditional desktop applications. With AJAX, Internet applications can be made richer and more user-friendly.]]></description>
			<content:encoded><![CDATA[<p>by: Andi Sunyoto</p>
<p style="text-align: center;"><strong>Abstraksi</strong></p>
<p style="text-align: center;"><em>AJAX is not a new programming language, but a technique for creating better, faster, and more interactive web applications. With AJAX, your JavaScript can communicate directly with the server, using the JavaScript XMLHttpRequest object. With this object, your JavaScript can trade data with a web server, without reloading the page. AJAX uses asynchronous data transfer (HTTP requests) between the browser and the web server, allowing web pages to request small bits of information from the server instead of whole pages. The AJAX technique makes Internet applications smaller, faster and more user-friendly. Web applications have many benefits over desktop applications; they can reach a larger audience, they are easier to install and support, and easier to develop. However, Internet applications are not always as &#8220;rich&#8221; and user-friendly as traditional desktop applications. With AJAX, Internet applications can be made richer and more user-friendly.</em></p>
<p><em> </em></p>
<p>Key Word: AJAX, Internet, JavaScript, XML, Asynchronus</p>
<h1>1      Pengenalan AJAX</h1>
<p>AJAX diperkenalkan oleh Jesse James Garret dari Adaptive Path pada tahun 2005. Ia mendeskripsikan bagaimana mengembangkan web yang berbeda dengan metode tradisional. Ia mempublikasikan sebuah artikel yang berjudul <em>“AJAX: A New Approach to Web Applications”</em>. Pada artikelnya, Garret yakin bahwa aplikasi web dapat menutup jurang pemisah antara web dan aplikasi desktop.</p>
<p>Pengembangan web secara tradisional bekerja secara <em>synchronously</em><em>,</em> antara aplikasi dan server, setiap kali melakukan link atau melakukan operasi “submit” pada form. Caranya, browser mengirim data ke server, server merespons dan seluruh halaman akan di refresh.</p>
<p>Aplikasi web yang bekerja dengan AJAX bekerja secara <em>asynchronously</em>, yang berarti mengirim dan menerima data dari user ke server tanpa perlu me-load kembali seluruh halaman, melainkan hanya melakukan penggantian pada bagian web yang hendak diubah. Penggunaan AJAX mulai popular ketika digunakan oleh Google pada tahun 2005.</p>
<p>AJAX bukanlah bahasa pemrograman baru, tetapi merupakan teknik baru penggunaan standar yang telah ada. Dengan AJAX kita dapat menjadi lebih baik, cepat dan menambah unsur user-friendly dan interaktif pada aplikasi web kita. AJAX berbasiskan pada JavaScript dan request HTTP.</p>
<p>AJAX berbasiskan standar terbuka seperti:</p>
<ul>
<li>JavaScript</li>
<li>XML</li>
<li>HTML/XHTML</li>
<li>CSS</li>
</ul>
<p>Dengan menggunakan JavaScript AJAX dapat mengirim dan menerima data antara web server dan web browser. Teknik yang dimiliki AJAX akan bergantian bertukar data dan mere-load ulang seluruh halaman.</p>
<p>Dengan demikian, untuk mempelajari AJAX, harus dipahami pula konsep standar di atas. AJAX di-support sebagian besar browser popular sehingga aplikasi AJAX adalah aplikasi <em>cross-platform</em> dan <em>cross-browser</em>.</p>
<p>Melalui AJAX, JavaScript dapat dikomunikasikan secara langsung dengan server menggunakan obyek JavaScript XMLHttpRequest. Obyek JavaScript ini dapat men-<em>trade</em> data sebuah web server tanpa harus me-<em>reload</em> <em>(refresh</em><em>)</em> halaman web.</p>
<p>AJAX menggunakan <em>asynchronouse</em> data transfer (pada HTTP request) antara browser dan web server, yang memperbolehkan halaman web me-request bit yang kecil atau seluruh informasi dari server. Teknik AJAX membuat aplikasi internet menjadi kecil, cepat dan lebih user-friendly.</p>
<p>AJAX adalah aplikasi web yang lebih baik. Aplikasi web menambah keuntungan dibanding aplikasi desktop:</p>
<ul>
<li>Dapat  menjangkau pengguna yang luas</li>
<li>Mudah diinstal</li>
<li>Mudah dikembangkan</li>
<li>Mudah dipelihara</li>
</ul>
<p>Seperti yang kita ketahui, aplikasi internet tidak selalu susah dan user friendly seperti aplikasi dekstop. Dengan AJAX aplikasi internet semakin kecil, cepat dan mudah digunakan.</p>
<h1>2      Model-Model Web</h1>
<h2>2.1    Model Tradisional</h2>
<p>Yang dimaksud dengan model tradisional di sini adalah model yang sering digunakan tanpa AJAX. Pertama, browser membuat sebuah HTTP request dikirim ke server, misalnya /index.html.</p>
<div id="attachment_482" class="wp-caption aligncenter" style="width: 445px"><a href="http://www.andisun.com/wp-content/uploads/2009/09/ajax_arsitektur_model_tradisional.png"><img class="size-full wp-image-482" title="ajax_arsitektur_model_tradisional" src="http://www.andisun.com/wp-content/uploads/2009/09/ajax_arsitektur_model_tradisional.png" alt="Arsitektur model tradisional" width="435" height="137" /></a><p class="wp-caption-text">Arsitektur model tradisional</p></div>
<p>Pada model ini, server mengirimkan response berisi seluruh halaman termasuk header, logo, navigasi, footer, dll. Ketika mengklik next maka akan menampilkan halaman baru lagi (artinya, header, logo, footer, navigasi dikirim ulang) dan seterusnya akan mengirimkan data halaman baru lagi setiap diminta request dari user.</p>
<p>Halaman seperti ini tidak masalah ketika data yang ditampilkan tidak memerlukan response yang cepat. Namun, akan menjadi masalah jika user menginginkan response yang cepat, misalnya ketika dipilih <em>drop-down</em> tertentu maka data yang ditampilkan berubah menurut nilai dari <em>drop-down</em>.</p>
<p><span id="more-481"></span></p>
<h2>2.2    Model AJAX</h2>
<p>Perlu diingat, AJAX akan berkomunikasi dengan server tanpa harus me-refresh semua halaman. Konsep ini berbeda dengan aplikasi web sistem tradisional. Dalam model AJAX, aksi dari sisi klien dibagi menjadi dua bagian, yaitu layer user interface dan layer AJAX.</p>
<div id="attachment_483" class="wp-caption aligncenter" style="width: 445px"><a href="http://www.andisun.com/wp-content/uploads/2009/09/ajax_arsitektur_model_ajax.png"><img class="size-full wp-image-483" title="ajax_arsitektur_model_ajax" src="http://www.andisun.com/wp-content/uploads/2009/09/ajax_arsitektur_model_ajax.png" alt="Arsitektur model AJAX" width="435" height="114" /></a><p class="wp-caption-text">Arsitektur model AJAX</p></div>
<p>Ketika user mengklik sebuah link atau mengirimkan sebuah form maka input tersebut akan ditangani oleh layer AJAX dan diinteraksikan dengan server, kemudian meng-update user interface (UI). Jadi, dalam AJAX, interaksi UI secara logika terpisah dengan interaksi jaringan.</p>
<p>Pendekatan yang digunakan AJAX adalah bagaimana mengirimkan jumlah data yang kecil dari dan ke server atas request dari user. Model aplikasi web tradisional di mana browser akan merespons sendiri atas inisialisasi request, memproses request dari web server. Dalam AJAX terdapat layer yang diberi nama “AJAX engine” untuk menangani komunikasi. “AJAX Engine” adalah sebuah obyek JavaScript atau function yang dipanggil ketika informasi diperlukan dari server.</p>
<p>Proses yang dilakukan mesin AJAX <em>(AJAX Engine</em><em>)</em><em> </em><em>adalah </em>menerima respons dari server, melakukan parsing data dan melakukan sedikit perubahan untuk keperluan menampilkan informasi. Oleh karena proses mengirimkan sedikit informasi, jika dibanding dengan model aplikasi web tradisional maka user interface di-update lebih cepat dan user mampu melakukan pekerjaannya dengan cepat.</p>
<p>Beberapa poin penting untuk menggambarkan AJAX:</p>
<ul>
<li>Layer AJAX tidak memerlukan komunikasi dengan server (contohnya untuk validasi form karena dapat ditangani sepenuhnya oleh <em>client-side</em>).</li>
<li>Oleh karena request antara layer AJAX dan server berupa bagian kecil dari informasi (tidak komplit satu halaman) maka sering digunakan untuk interaksi dengan database sehingga waktu render dan waktu pengiriman menjadi pendek.</li>
<li>Layer UI secara langsung tergantung pada respons server sehingga user dapat melanjutkan interaksi dengan sebuah halaman selama aktivitas dikerjakan di background <em>(</em><em>background process</em><em>)</em><em>.</em> Berarti, untuk beberapa interaksi, waktu tunggu user hampir tidak ada.</li>
<li>Komunikasi antarhalaman dan server tidak selama memerlukan AJAX untuk mengubah perubahan UI. Contoh, beberapa aplikasi menggunakan AJAX  untuk notifikasi dengan halaman, tetapi tidak melakukan apa pun terhadap response dari server.</li>
</ul>
<h1>3      Teknologi di Balik AJAX</h1>
<p>Teknologi AJAX di dalamnya meliputi beberapa komponen, yaitu:</p>
<div id="attachment_484" class="wp-caption aligncenter" style="width: 306px"><a href="http://www.andisun.com/wp-content/uploads/2009/09/ajax_teknologi_dibawah_ajax.png"><img class="size-full wp-image-484" title="ajax_teknologi_dibawah_ajax" src="http://www.andisun.com/wp-content/uploads/2009/09/ajax_teknologi_dibawah_ajax.png" alt="Teknologi dibalik AJAX" width="296" height="285" /></a><p class="wp-caption-text">Teknologi dibalik AJAX</p></div>
<ul>
<li>XHTML <em>(</em><em>Extensible HyperText Markup Language</em><em>)</em><em> </em>adalah bahasa markup seperti HTML, tetapi dengan gaya bahasa lebih baik. XHTML digunakan membuat halaman web dan dokumen-dokumen lain yang dapat ditampilkan dalam browser. XHTML merupakan standard internasional dengan spesifikasi yang ditetapkan oleh W3C <em>(</em><em>World Wide Web Consortium</em><em>)</em><em>.</em> Versi terakhir saat tulisan ini dibuat adalah HTML 2.0.</li>
<li>CSS <em>(</em><em>Cascading Style Sheets</em><em>)</em> adalah sebuah mekanisme sederhana untuk memberikan style (seperti font, warna, jarak spasi, dll) kepada dokumen web yang ditulis dalam HTML atau XML (termasuk beberapa variasi bahasa XML seperti XHTML dan SVG).</li>
<li>JavaScript adalah bahasa scripting kecil, ringan, berorientasi-objek dan lintas platform. JavaScript tidak dapat berjalan dengan baik sebagai bahasa mandiri, melainkan dirancang untuk ditanamkan pada produk.</li>
<li>DOM <em>(</em><em>Document Object Model</em><em>)</em> adalah sebuah API <em>(</em><em>Application Program Interface</em><em>)</em> untuk dokumen HTML dan XML. DOM menyediakan representasi dokumen secara terstruktur, dimungkinkan untuk  mengubah isi dan presentasi visual. Pada dasarnya, DOM menghubungkan halaman web dengan script atau bahasa pemrograman.</li>
<li>XML <em>(</em><em>Extensible Markup Language</em><em>)</em><em> </em>adalah bahasa markup untuk keperluan umum yang disarankan oleh W3C untuk membuat dokumen markup keperluan khusus. Keperluan utama XML adalah untuk pertukaran data antarsistem yang beraneka ragam.</li>
<li>XSLT <em>(</em><em>Extensible Stylesheet Language Transformations</em><em>)</em> adalah sebuah bahasa berbasis-XML untuk transformasi dokumen XML. Walaupun proses merujuk pada transformasi, dokumen asli tidak berubah melainkan dokumen XML baru dibuat dengan basis isi dokumen yang sudah ada. XSLT biasanya digunakan untuk mengubah skema XML ke halaman web atau dokumen PDF.</li>
<li>Objek XMLHttpRequest berkemampuan melakukan pertukaran data secara asinkron dengan web server. AJAX menggunakan obyek XMLHttpRequest untuk melakukan pertukaran data dengan web server.</li>
<li>JSON <em>(JavaScript Object Notation</em><em>)</em> yaitu format pertukaran data komputer yang ringan dan mudah. Keuntungan JSON dibandingkan dengan XML adalah pada proses penerjemahan data menggunakan Javascript. Javascript dapat menerjemahkan JSON menggunakan built-in procedure eval().</li>
</ul>
<p>Dalam kenyataannya, semua teknologi dapat digunakan untuk AJAX, tetapi hanya tiga yang dibutuhkan: HTML/XHTML, DOM dan JavaScript. XHTML ternyata diperlukan untuk menampilkan informasi, sedangkan DOM diperlukan untuk halaman XHTML tanpa di-reload ulang.</p>
<p>JavaScript dibutuhkan untuk komunikasi <em>client-server</em><em>, sementara</em> manipulasi DOM untuk meng-update halaman web. Teknologi lain digunakan agar AJAX lebih bagus, tetapi bukan merupakan hal yang pokok. Untuk pembuatan aplikasi agar lebih <em>powerful</em> maka AJAX dapat digabung dengan aplikasi <em>server-side programming</em> seperti PHP, ASP, Java servlet atau .NET.</p>
<h1>4      Pengguna AJAX</h1>
<p>Beberapa web komersial sudah menggunakan teknologi AJAX untuk menaikkan pelayanan terhadap user. Berikut beberapa contoh web yang menggunakan AJAX.</p>
<ul>
<li>Google Suggest: <a href="http://www.google.com/webhp?complete=1" target="_blank">http://www.google.com/webhp?complete=1</a></li>
<li>Gmail: <a href="http://www.gmail.com" target="_blank">http://www.gmail.com</a></li>
<li>Google Maps: <a href="http://maps.google.com" target="_blank">http://maps.google.com</a></li>
<li>Yahoo! News: <a href="http://news.yahoo.com" target="_blank">http://news.yahoo.com</a></li>
<li>Bitflux Blog: <a href="http://blog.bitflux.ch" target="_blank">http://blog.bitflux.ch</a></li>
<li>dll</li>
</ul>
<h1>5      Keistimewaan AJAX</h1>
<p>AJAX sebagai sebagai teknik pemrograman baru memiliki beberapa keistimewaan. Keistimewaan AJAX antara lain:</p>
<ul>
<li>Membuat permintaan kepada server tanpa memuat kembali <em>(</em><em>reload</em><em>)</em><em> </em>halaman.</li>
<li>Mengurai <em>(</em><em>parse</em><em>)</em> dan bekerja dengan dokumen XML dan atau JSON.</li>
<li>Data yang dikirim sedikit sehingga menghemat bandwidth dan  mempercepat koneksi.</li>
<li>Proses dilakukan di belakang layar.</li>
<li>Banyak didukung oleh browser-browser modern yang popular.</li>
<li>Aplikasi yang dibangun semakin interaktif dan dinamis.</li>
</ul>
<p>Penggunaan AJAX akan mendatangkan beberapa keuntungan. Keuntungan tersebut antara lain.</p>
<ul>
<li><em>High Interactivity</em>: Aplikasi AJAX lebih interaktif dibanding dengan aplikasi web konvensional.</li>
<li><em>High Usability</em>: Update data tidak me-reload keseluruhan halaman, melainkan hanya yang relevan.</li>
<li><em>High Speed</em>: Aplikasi AJAX lebih cepat dibanding dengan aplikasi web konvensional</li>
</ul>
<h1>6      Contoh penerapan AJAX</h1>
<p>Berikut contoh penerapan AJAX. Pada penerapan ini ada dua file yang dibutuhkan, yaitu file HTML dan file PHP. Isi file JavaScript adalah sebagai berikut (time.html):</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p481code1'); return false;">View Code</a> HTML</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p4811"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
</pre></td><td class="code" id="p481code1"><pre class="html" style="font-family:monospace;">&lt;html&gt;
&lt;body&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
function AJAXFunction()
  {
  var xmlHttp;
  try
    {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
  catch (e)
    {
    // Internet Explorer
    try
      {
      xmlHttp=new ActiveXObject(&quot;Msxml2.XMLHTTP&quot;);
      }
    catch (e)
      {
      try
        {
        xmlHttp=new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;);
        }
      catch (e)
        {
        alert(&quot;Your browser does not support AJAX!&quot;);
        return false;
        }
      }
    }
    xmlHttp.onreadystatechange=function()
      {
      if(xmlHttp.readyState==4)
        {
        document.myForm.time.value=xmlHttp.responseText;
        }
      }
    xmlHttp.open(&quot;GET&quot;,&quot;time.php&quot;,true);
    xmlHttp.send(null);
  }
&lt;/script&gt;
&nbsp;
&lt;form name=&quot;myForm&quot;&gt;
&nbsp;
Name: &lt;input type=&quot;text&quot;
&nbsp;
onkeyup=&quot;AJAXFunction();&quot; name=&quot;username&quot; /&gt;
&nbsp;
Time: &lt;input type=&quot;text&quot; name=&quot;time&quot; /&gt;
&nbsp;
&lt;/form&gt;
&nbsp;
&lt;/body&gt;
&lt;/html&gt;</pre></td></tr></table></div>

<p>Sebelum menjalankan skrip di atas, perlu disiapkan dahulu skrip server side-nya. Skripnya adalah sebagai berikut (time.php):</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p481code2'); return false;">View Code</a> PHP</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p4812"><td class="line_numbers"><pre>1
2
3
</pre></td><td class="code" id="p481code2"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?</span>
<span style="color: #b1b100;">echo</span> <a href="http://www.php.net/date"><span style="color: #990000;">date</span></a><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'H:m:s'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">?&gt;</span></pre></td></tr></table></div>

<p>Jalankan file “time.htm”, kemudian ketikkan username. Dengan demikian, setiap mengetikkan huruf di user name, jam langsung ter-update. Output program ketika dijalankan adalah sebagai berikut:</p>
<div id="attachment_485" class="wp-caption aligncenter" style="width: 416px"><a href="http://www.andisun.com/wp-content/uploads/2009/09/tampilan_time_with_ajax.png"><img class="size-full wp-image-485" title="tampilan_time_with_ajax" src="http://www.andisun.com/wp-content/uploads/2009/09/tampilan_time_with_ajax.png" alt="Tampilan aplikasi jam dengan AJAX" width="406" height="165" /></a><p class="wp-caption-text">Tampilan aplikasi jam dengan AJAX</p></div>
<h1>7      Daftar Pustaka</h1>
<ul>
<li>Sunyoto, Andi., “<a href="http://www.andisun.com/buku/ajax-membangun-web-dengan-teknologi-asynchronous-javascript-dan-xml">AJAX: Membangun Web dengan Teknologi Asynchronouse JavaScript &amp; XML</a>”., Penerbit Andi., 2007</li>
<li>Castagnetto, Jesus., et.al., &#8220;Profesional PHP Programming&#8221;, Wrox Press, 1999.</li>
<li>Dubois, Paul., &#8220;MySQL: The Definitive Guide to Using, Programming, and Administering MySQL 4.1 and 5.0 Third Edition, 2005.</li>
<li>Eichorn, Joshua., &#8220;Understanding AJAX: Using JavaScript to Create Rich Internet Applications&#8221;, Prentice Hall, 2006.</li>
<li>Heilmann, Christian., &#8220;Beginning JavaScript with DOM Scripting and Ajax: From Novice to Professional&#8221;, Apress, 2006.</li>
<li>Langerstrom, Randles, Larry., &#8220;Programming the Web using XHTML and JavaScript&#8221;, McGraw-Hill, 2003.</li>
<li>W3Schools, &#8220;Learn PHP, Learn AJAX, Learn XML, Learn JavaScript, Learn XML and XHTML DOM, Learn MySQL&#8221;, www.w3schools.com, 2007.</li>
<li>Woychowsky, Edmond., &#8220;Ajax: Creating Web Pages with Asynchronous JavaScript and XML&#8221;, Prentice Hall, 2006.</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.andisun.com/jurnal/overview-ajax-asynchronus-javascript-and-xml/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Konsistensi dan Validasi Data Pada Halaman Web</title>
		<link>http://www.andisun.com/jurnal/konsistensi-dan-validasi-data-pada-halaman-web-2</link>
		<comments>http://www.andisun.com/jurnal/konsistensi-dan-validasi-data-pada-halaman-web-2#comments</comments>
		<pubDate>Wed, 15 Jul 2009 05:57:09 +0000</pubDate>
		<dc:creator>myandisun</dc:creator>
				<category><![CDATA[Jurnal]]></category>
		<category><![CDATA[client]]></category>
		<category><![CDATA[database]]></category>
		<category><![CDATA[Form]]></category>
		<category><![CDATA[Internet]]></category>
		<category><![CDATA[server]]></category>
		<category><![CDATA[validasi]]></category>
		<category><![CDATA[web]]></category>

		<guid isPermaLink="false">http://www.andisun.com/?p=127</guid>
		<description><![CDATA[Oleh: Andi Sunyoto
Abstraksi
Apa yang terjadi jika pada halaman form Anda ada kesalahan pemasukan data atau pengiriman berulang oleh user ke server ? Jika itu adalah masalah Anda maka validasi form adalah jawabannya. Dengan adanya validasi data yang di kirim ke server kita cek dulu kebenarannya.
Kata Kunci: validasi, form, web, klient, server
Pendahuluan
Validasi merupakan proses pengecekan masukan [...]]]></description>
			<content:encoded><![CDATA[<p>Oleh: Andi Sunyoto</p>
<h2>Abstraksi</h2>
<p>Apa yang terjadi jika pada halaman <em>form</em> Anda ada kesalahan pemasukan data atau pengiriman berulang oleh <em>user</em> ke <em>server </em>? Jika itu adalah masalah Anda maka validasi <em>form </em>adalah jawabannya. Dengan adanya validasi data yang di kirim ke <em>server </em>kita cek dulu kebenarannya.</p>
<p><strong>Kata Kunci: </strong>validasi, form, web, klient, server</p>
<h2>Pendahuluan</h2>
<p>Validasi merupakan proses pengecekan masukan yang dari sebuah <em>form </em>sebelum data tersebut diterima dan diolah untuk keperluan selanjutnya. Hal tersebut dilakukan agar tidak terjadi kesalahan proses karena input tidak sesuai yang tipe data yang dinginkan, inkonsistensi data dan duplikasi data.</p>
<p>Sebelum kita membahas tentang Validasi lebih jauh kita akan membahas dua teknik dalam menulis skrip dalam pemrograman internet yaitu, <em>Server-side</em> dan <em>Client Side</em></p>
<p>Yang membedakan antara kedua adalah tempat dimana skrip diproses. Pada <em>side server,</em> proses dilakukan di <em>web server</em>, sedangkan klien <em>(web browser)</em> hanya menerima hasil dalam bentuk HTML. Contoh skrip <em>server side</em> adalah CGI/Perl, Active Server Pages (ASP) dan Java Server Pages (JSP). Pada <em>client side</em> proses dilakukan di <em>web browser</em>. <em>Client side</em> biasanya banyak digunakan untuk hal-hal yang membutuhkan banyak interaktif user dan menggunakan jenis informasi yang pasti dan seragam. Contoh skrip Client Side adalah JavaScript, DHTML.</p>
<p>Walaupun seakan-akan keduanya kontradiksi, tapi mereka saling melengkapi. Di sini pihak programmer dituntut untuk bisa menentukan kapan mereka menggunakan <em>server side,</em> <em>client side</em> atau kapan menggabungnya. <em>Server side</em> biasanya digunakan untuk memproses segala sesuatu yang berhubungan dengan server, seperti environmental dari server, memanipulasi data dalam database.</p>
<p>Pada pembahasan kali ini kita akan membahas validasi diaplikasi berbasis Web <em>(Web Base Aplication)</em>. Skrip yang menjadi acuan adalah ASP( Active Server Pages) yang selanjutnya penulis sebut ASP. Hal yang penting untuk Web developer adalah mengedepankan dan memprediksi apa yang akan dilakukan oleh user dana apakah mereka merasa sulit dengan aplikasi kita. Jika Anda pernah membuat aplikasi dengan ASP yang menggunakan form, dan ada user mengirim response ada keganjilan terjadi: data terkirim dua kali, data tidak komplit atau user melaporakan form tidak tertampil secara baik. Pada tulisan ini kita akan membahas masalah-masalh tentang validasi.</p>
<p><span id="more-127"></span></p>
<h2>Pembahasan</h2>
<h2>a. Validasi <em>TextBox</em> masukan</h2>
<p>Validasi ini mengecek nilai yang kita inputkan pada sebuah <em>form </em>masukan.</p>
<ol>
<li>Validasi      cek data pada <em>form </em>kosong atau tidak</li>
<li>Validasi      tipe data yang diminta sama atau tidak</li>
<li>Validasi      spesial karakter.</li>
<li>Validasi      range</li>
</ol>
<h2>b. Validasi proses database</h2>
<ol>
<li>Validasi      untuk pemasukan dalam database.</li>
<li>Validasi      data dalam database harus isi atau tidak</li>
<li>Validasi      penghapusan dan pengeditan data yang ensyaratkan data harus ada</li>
</ol>
<h2>c. Validasi pengiriman berulang pada Halaman Web</h2>
<h2>Proses Validasi</h2>
<p>Validasi yang tersebut diatas dapat dilakukan Server dan klien.</p>
<p>Kelebihan dan kelemahan proses.</p>
<p><strong>1. Proses      di server (<em>Server Side)</em></strong></p>
<p>Kelebihan terdapat kepastian proses validasi akan dilaksanakan karena proses server tidak tergantung pada browser yang dipakai. Dapat melakukan validasi proses yang pada <em>Aplication Layer</em> (<em>Web Server</em>) dan <em>Database Layer</em>.</p>
<p>Kelemahan pada proses ini memerlukan waktu yang lama karena data harus dikirim ke server terlebih dulu dan di kirim kon kembali konfirmasinya ke browser</p>
<p><strong>2. Proses      Klien (<em>Client Side</em>)</strong></p>
<p>Kelebihan proses di klien adalah proses yang tergolong lebih cepat di banding proses di server. Karena program di eksekusi di client.</p>
<p>Kelemahannya adalah tidak bisa validasi sampai proses database hanya proses pada <em>presentation layer.</em>.</p>
<p><strong> </strong></p>
<p><strong>Solusi Validasi</strong></p>
<p><strong>a. Validasi Text Box</strong></p>
<p>Pada validasi ini sebagian bisa kita lakukan dengan dua model yang itu validasi di klien dan <em>server</em>.<strong> </strong></p>
<p><strong>1. Cek      data isi atau tidak</strong></p>
<p>Proses ini dapat dilakukan di klien maupun di server. Contoh kode programnya:</p>
<p>Proses diserver dengan ASP.</p>
<pre>&lt;%
nim = request(“data”)
If nim = “” Then
. . . ‘tampilkan pesan data belum diisi
Else
. . . ‘proses selanjutnya valid
End If
%&gt;</pre>
<p>Proses di klien dengan bahasa pemrograman JavaScript.</p>
<pre>&lt;Script language="javascript"&gt;
&lt;!-- Begin
function periksa(frm){
 var err = "";
 if (frm.data.value.length&lt;1)err+="- Data Belum Diisi !\n";
 if (err!=""){alert(\n"+err\n" + “Silakan
 &lt;b&gt;Anda &lt;/b&gt; Cek Lagi !");
 window.event.returnValue = false;
 return (false);
 }else {
 frm.submit();}
}
// End --&gt;
&lt;/script&gt;

&lt;Html&gt;
 &lt;Head&gt;&lt;/Head&gt;
 &lt;Body&gt;
 &lt;input type="submit" value="TAMBAH"
 &lt;name="action" onclick="periksa(this.form)"&gt;
&lt;/Body&gt;
&lt;/Html&gt;</pre>
<p>2.<strong> Validasi      tipe data yang diminta sama atau tidak</strong></p>
<p>Masukan dari <em>user </em>sering ada kesalahan sebagai contoh untuk mengisi jumlah haruslah tipe data <em>Numeric</em>. Berikut contoh kode program untuk mengecek masukan apakah bertipe <em>Numeric</em>.</p>
<p>Contoh kode program dengan ASP</p>
<pre>&lt;%
If IsNumeric(Request("jumlah")) Then
... 'proses selanjutnya
Else
... 'pesan salah data bukan numeric
End If
%&gt;</pre>
<p>3.<strong> Validasi      spesial karakter</strong></p>
<p>Validasi ini memungkinkan mengecek apakah dalam suatu masukan ada karakter tertentu yang dinginkan. Sebagai contoh sederhana adalah masukan berupa alamat e-mail yang membutuhkan tanda “@”. Berikut contoh programnya.</p>
<p>Contoh kode program dengan ASP</p>
<pre>&lt;%
datacek = Request("data")
If IntStr(1,datacek,"@") = 0 Then
. . . 'proses validasi benar
Else
. . . 'pesan salah
End If
%&gt;</pre>
<p>4.  <strong>Validasi      data dengan range tertentu.</strong></p>
<p>Misalnya dalam stok data yang dimasukkan harus &gt;=0.</p>
<p>Contoh kode program dengan ASP</p>
<pre>&lt;%
stok = Request(“data”)
If stok &lt; 0 Then
. . . ‘pesan data yang dimasukkan salah
Else
. . . ‘proses jika validasi benar
End If
%&gt;</pre>
<h2><strong>d. Validasi pada database</strong></h2>
<p>Untuk bisa melakukan validasi database request dari klien harus di kirim ke server diolah dan kemudian respon dikirim kembali ke klien.<strong> </strong></p>
<p><strong>1. Validasi      untuk pemasukan dalam database.</strong></p>
<p>Validasi ini untuk menghindari adanya duplikasi data dalam sebuah database.</p>
<p>Berikut potongan kode program untuk validasi dengan ASP.</p>
<pre>&lt;%
. . .
sql = “select * from mhs where nim=’” &amp; txtnim &amp; “’”
Set rs = conn.execute(sql)
If rs.eof Then
. . .’data belum ada proses selanjutnya
Else
. . .’pesan data sudah ada
End If
%&gt;</pre>
<p>2.  <strong>Validasi      data dalam database harus isi atau tidak</strong></p>
<p>Validasi ini bisa kita gabung dengan validasi yang jalan di klien, dengan cek form telah diisi atau belum.</p>
<p>3.  <strong>Validasi      penghapusan dan pengeditan data yang ensyaratkan data harus ada.</strong></p>
<p>Pada proses penghapusan dan edit data data harus sudah ada dalam database. Berikut contoh program denagn ASP.</p>
<pre>&lt;%
. . .
sql = “select * from mhs where nim=’” &amp; txtnim &amp; “’”
Set rs = conn.execute(sql)
If rs.eof Then
. . .’data tidak ada
Else
. . .’proses jika validasi benar
End If
%&gt;</pre>
<h2>c. Validasi duplikasi pengiriman data</h2>
<p>Secara kebetulan pengiriman data berulang sering terjadi, dan itu akan menimbulkan masalah untuk pengoahan data selanjutnya. Idealnya user asuk ke form dalam sebuah Web site, mengisi <em>form </em>yang telah disediakan dan klik men-<em>submit </em>ke server untuk diproses di server dan mengirim kembali ke user sebagai konfirmasi dari respon yang dikirimnya.</p>
<p>Bagaimana jika user klik tombol <em>Back</em> pada <em>Browser </em>dan tanpa disengaja mengirim data yang sama ? Jika anda tidak mengantisipasi hal tersebut data akan dikirim dan diolah diserver berulang. Untuk mengantisipasi kesalahan terkirim dua kali ke server, Anda dapat memuat validasi cek dengan server side untuk memastikan bahwa user mengetahui dia mengirim data dua kali.</p>
<p>Cara yang pertama adalh untuk memastikan user tidak mengirim informasi yang sama dua kali, kita memerlukan indikasi bahwa data sudah diterima olah server. Cara yang tepat adalah kita menggunakan <em>session variabel</em>. Anda dapat mendefinisikan variabel session dengan Session(“submiited”) diinisialisasi False untuk pertama kali dan pernyataan True jika user sudah mengirim datanya. Pesan ketika data dikirim dua kali.</p>
<p>Halaman ASP yang untuk membuat form dan mencek data yang sudah terkirim (form.asp) Potongan kode program untuk situasi ini adalh sebagi berikut sebagai berikut:</p>
<pre>...
&lt;% If Session(“submitted”) Then %&gt;
&lt;!—- ada pesan warning --&gt;
...
&lt;% Else %&gt;
&lt;-- kode menampilkan form --&gt;
...
&lt;% End If %&gt;
...</pre>
<p>Di halaman yang menerima pesan kode program adalah sebagi berikut:</p>
<p>Anda mengirim informasi:</p>
<pre>&lt;p&gt;
&lt;%=request(“data”)%&gt;
&lt;%Session(“submitted”) = True%&gt;</pre>
<p>Cara kedua jika form memerlukan banyak data sebagai masukan lebih baik anda memotong untuk kerperluan menjadi form yang lebih kecil, yang mamandu user memulai sesuatu langkah demi langkah tanpa harus menunggu lama untuk meload <em>control</em> atau halaman pengisian yang banyak. Lebih dari itu jika ada data yang tidak perlu dimasukkan maka tidak usah ditampilkan, misalnya tanggal sekarang , jam sekarang, karena bisa siambil dari server.</p>
<p>Untuk mencegah masalah tersebut, anda dapat meset status data yang dimasukkan. Status dapat menggunakan <em>session variabel </em>apakah record tersebut sudah dimasukkan user atau belum.</p>
<p>Ini bisa menggunakan <em>Session</em> bertipe <em>Boolean </em>untuk masing-masing <em>form</em> dalam <em>multi-step form</em>. Variabel bernilai False jika diasosiasikan form belum diproses dan True adalah sebaliknya.</p>
<p>Contoh kedua tentang aplikasi untuk download biasanya dibagi menjadi dua langkah yaitu: <em>form </em>pertama memmerlukan konfirmasi <em>username</em> dan form kedua menampilkan ComboBox berisi daftar item tergantung user yang disediakan.</p>
<p>Form pertama mempunyai session variabel requested1, dan requested2 untuk form yang kedua. Ketika user mengirim form pertama (form1.asp) session variabel requested1 diset dengan True:</p>
<pre>&lt;Form Method=”post” Action=”form2.asp”&gt;
Your Name:
&lt;Input Type=”text” Name=”name”&gt;
&lt;p&gt;
&lt;Input Type=”submit” Value=”Submit”&gt;
&lt;Input Type=”reset” Value=”Cancel”&gt;
&lt;/Form&gt;
&lt;%
Session(“requested1”)=True
%&gt;</pre>
<p>Ini akan mencek dan memutuskan apakah masukan sudah cukup atau belum. Tentu saja, ketika user sebelum user masuk ke request yang kedua (form2.asp) harus cek dulu form ayng dikirim pada form sebelumnya.</p>
<p>Jika reques pada form1.asp True, form kedua akan di kirim ke browser dan session veriabel requesed2 di set True. Nilai False pada session variabel berarti <em>user</em> mencoba mengakses langsung ke form yang kedua, sehingga browser langsung dipindahkan ke form pertama.</p>
<p>Kode program untuk form yang kedua adalah sebagai berikut:</p>
<pre>&lt;% If Session(“requested1”) Then %&gt;
&lt;Html&gt;
&lt;Head&gt;
&lt;/Head&gt;
&lt;Body&gt;
. . . ‘kode program untuk form kedua
&lt;% Session(“requested2”) True
Else
Response.Redirect “form1.asp”
End If %&gt;
&lt;/Body&gt;
&lt;/Html&gt;</pre>
<p>Catatan, tes pada variabel session requested1 harus dilaksanakan sebelum Tag &lt;Html&gt; untuk mengijinkan kemungkinan redirect. Dalam kenyataan bahwa redirect adalah instruksi browser dan hal tersebut tampak pada HTTP header sebelum kode HTML.</p>
<h2>Kesimpulan</h2>
<p>Teknik validasi merupakan upaya agar data yang dimasukkan sesuai dengan keinginan programmer, agar pengolahan selanjutnya tidak terjadi masalah. Teknik-teknik diatas untuk situasi tertentu. Masing-masing teknik menyelesaikan satu masalah yang spesifik, sehingga masalah kemungkinan digabung juga ada, dan mungkin kita tidak hanya menggunakan dua Session Variabel tapi bisa lebih. Teknik menggabungkan pengecekan di server dan di klien adalah yang terbaik, karena untuk bisa menutupi kelemahan masing-masing teknik.</p>
<h2><strong>Daftar Pustaka</strong></h2>
<ul>
<li>Alex, Homer. Sussman, Dave. Francis, Brian. 1999. Profesional Active Server Pages 3.0. Wrox Press Ltd.</li>
<li>www.asptoday.com</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.andisun.com/jurnal/konsistensi-dan-validasi-data-pada-halaman-web-2/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
