AJAX (Asynchronous JavaScript XML) pada ASP vs ASP.NET
Pernah seseorang menanyakan kepada saya. Pertanyaannya begini.
"Saya punya database di sql Server, lalu saya membuat program web base interface
dengan HTML, lalu saya akan melakukan validasi field pada form interface saya. Saya mau program dapat melakukan validasi apakah data customer dengan kode c001 sudah ada di database sql server atau belum?".
Lalu ia mencoba menggunakan validasi pada file ASP.NET (.aspx). Proses yang dilakukan ini tentunya berjalan pada sisi server.
Urutan proses nya adalah pertama membuat koneksi data menggunakan ADO.NET ke SQL Server 2005, lalu dilakukan pencarian data customer dengan kode "c001" di database sql server tersebut. Apabila datanya ketemu, lalu kode di .aspx membuat label peringatan "data sudah ada!" (Ini semua terjadi di sisi server).
Setelah kode di proses di server, lalu .aspx melakukan Auto Postback lalu merespon ke client (respon diterima dalam format HTML).
Apa yang terjadi? traffic bolak-balik dari komputer user (client
) ke server (web server) jadi berulang-ulang dan ini sama dengan pemborosan bandwith serta proses menuggu server yang terasa lambat.
Apa pemecahannya?
JavaScript atau pun VBScript adalah script yang sudah biasa dipakai pada sisi client, dalam pemrograman web.
Demi kesederhanaan logika berpikir, saya akan memecahkan masalah ini dengan Visual Basic 6, ASP, JavaScript dan XML (tidak menggunakan ASP.NET).
Mari kita bandingkan mana yang lebih cepat proses yang berjalan di komputer client, dibandingkan dengan proses yang berjalan di Server yang terletak jauh di luar negeri, luarnya lagi (he....).
Tentunya jauh lebih cepat proses yang berjalan di komputer kita sendiri (sisi client).
Di sinilah script client (JavaScript / VBScript) sebagai pemroses dan XML berperan sebagai data.
Kita dapat mengambil data langsung dari SQL Server, kirim ke client dalam bentuk XML, lalu lakukan validasi dengan JavaScript (JavaScript atau VBScript bisa dipakai) .
Bagaimana Caranya?
Cara menngakses data di sisi server dengan ADO atau pun ADO.NET dengan hasil XML streaming sudah pernah saya ceritakan pada halaman-halaman terdahulu (ini sama dengan mengambil data di sisi server), di sini kita lanjutkan dengan cara melakukan XMLStreaming lalu di bawa ke sisi client. XML Streaming tadi dimasukkan ke dalam XML DOM. Dengan XMLDOM dapat dengan mudah dilakukan validasi data (jelas semuanya ini berjalan di sisi client).
Langkah-langkah nya adalah sbb:
1. Membuat Stored Procedure di dari SQL sever yang dapat menghasil kan XML
CREATE PROCEDURE SP_CUST_XML
@KDCUST VARCHAR(5)
AS
SELECT KdCust,NmCust FROM CUSTOMER
WHERE KdCust = @KDCUST
FOR XML AUTO
GO
stored procedur ini akan menghasilkan XML Streaming
2. Menangkap XML Streamming dengan kode VB6, ADO & XML Object
Yang akan kita lakukan di sini adalah membuat project DLL Visual Basic 6.
Hasil akhir dari project ini adalah membuat ActiveX DLL (XMLStreaming.dll) yang dipergunakan untuk menagkap data XML String dari SQL Server yang dapat di muat melaluli panggilan halaman ASP.
Buatlah project baru pada visual basic 6 dengan type project ActiveX-DLL (lihat pada bab sebelumnya jika anda belum memahami bagaimana cara melakukannya) Lalu copy kode di bawah beri nama XMLStream, lalu tambahkan class ke project tersebut dengan nama CXMLStream. Jika sudah selesai, seharusnya project anda akan tampak seperti gambar berikut (klik di sini untuk melihat gambar).
Option Explicit
Private oApplication As Application
Private oRequest As Request
Private oResponse As Response
Private oServer As Server
Private oSession As Session
Private oPage As Object
Public Sub OnStartPage(oSC As ScriptingContext)
Set oApplication = oSC.Application
Set oRequest = oSC.Request
Set oResponse = oSC.Response
Set oSession = oSC.Session
End Sub
Public Sub OnEndPage()
Set oApplication = Nothing
Set oRequest = Nothing
Set oResponse = Nothing
Set oSession = Nothing
End Sub
Public Sub WriteXMLStream(Page As Object, sKdCust, sConn)
Dim oConn As New ADODB.Connection
Dim oXML As MSXML.DOMDocument
Set oXML = New MSXML.DOMDocument
Dim ocmd As New ADODB.Command
Dim oPar1 As ADODB.Parameter
oConn.Open sConn
ocmd.ActiveConnection = oConn
ocmd.CommandText = "SP_CUST_XML"
ocmd.CommandType = adCmdStoredProc
Set oPar1 = ocmd.CreateParameter("@KDCUST", adVarChar, adParamInput, 1000, sKdCust)
ocmd.Parameters.Append oPar1
ocmd.Properties("Output stream") = oXML
ocmd.Execute , , &H400 '&H400 = adExecuteStream
oResponse.Write oXML.xml
Set ocmd = Nothing
Set oXML = Nothing
Set oConn = Nothing
End Sub
Kode di atas adalah kode yang murni dibuat dengan visual basic 6.
Seperti pada bab sebelumnya, kode di atas mengambil object ASP. Gunanya agar kode ini nanti dapat dijalankan pada halaman ASP.
Sedangkan object MSXML.DOMDocument dipakai untuk menampung object XML DOM.
Compile project tersebut dengan nama XMLStream.dll (klik di sini untuk melihat gambar). Setelah visual basic berhasil membuat file XMLStream.dll, anda harus mendaftarkannya ke windows registry melalui DOS Prompt. Caranya ketik regsvr32 xmlstream.dll (klik di sini untuk melihat gambar). Apabila berhasil maka di layar akan terlihat seperti gambar beriut ini (klik disini).
Pendaftaran XMLStream.dll telah berhasil kita lakukan, sekarang kita bisa memanggil object XMLSTream dari halaman ASP. Caranya ketik kode di bawah ini:
<% Response.ContentType = "text/xml" %>
<!-- #include file="adovbs.inc" -->
<%
sConn = "Provider=SQLOLEDB.1;Persist Security Info=False;User ID=sa;Initial Catalog=myData;Data Source=."
skdcust = Request.QueryString("kdcust")
dim oXMLData
set oXMLData = server.CreateObject("XMLStream.CXMLStream")
oXMLData.WriteXMLStream me,skdcust,sConn
%>
Simpan dengan nama file getcust.asp. Jangan dijalankan dulu file getcust.asp di browser, karena untuk dapat berjalan, file getcust.asp tersebut harus diberi parameter skdcust. Parameter skodecust ini nantinya diperoleh dari file getcust.htm. buat kode seperti di bawah ini:
3. Menggunakan Object XMLHTTP sebagai penampung respose XML
<HTML>
<HEAD>
<TITLE></TITLE>
<script>
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
function getcust() {
skdcust = document.frmCust.txtKdCust.value;
xmlhttp.open("GET", "getcust.asp?kdcust="+skdcust, true);
xmlhttp.onreadystatechange = responseAjax;
xmlhttp.send (null);
}
function responseAjax() {
if(xmlhttp.readyState == 4){
if(xmlhttp.status == 200){
alert ("xmlhttp.ResponseText="+xmlhttp.ResponseText);
}else{
alert("An error has occurred: " + xmlhttp.statusText);
}
}
}
</script>
</HEAD>
<BODY>
<form name="frmCust">
kdcust
<INPUT id=txtKdCust> <INPUT id=btnCari type=button value=Cari onClick="getcust()">
</form>
</BODY>
</HTML>
Tampilan kode diatas sangat sederhana (prinsipnya mengirim parameter kdcust contoh: 'c001') ke halaman getcust.asp lalu menampung hasil pengolahan data dalam bentuk XML (klik di sini untuk melihat gambar). Jika file getcust.htm anda jalankan, lalu isi kdcust dengan c001, kemudian klik tombol cari. Jika kode anda berjalan dengan baik, seharusnya anda mendapatkan hasil query customer seperti gambar berikut ini (klik di sini untuk melihat gambar).
Sampai di sini, misi kita telah berjalan dengan baik.
Anda telah berhasil mendapatkan data dari server ke client dalam bentuk XML. Klik di sini untuk mendownload kode.
Mari kita review kembali bagaimana dari awal kita membuat kode ini berjalan melalui proses yang panjang dan memakai campuran ASP & Visual Basic 6. Kode XMLStream dicompile menjadi XMLStream.dll lalu di daftarkan ke registry, kemudian dipanggil melaluli kode asp.
Tentunya hal ini membutuhkan waktu dan pekerjaan mendebug program yang kita menjadi lebih sulit.
Bagi saya, orang yang biasa dengan Visual Basic 6, mendebug code lebih mudah saya lakukan dengan Visual Basic, sedangkan dengan Visual Interdev terasa lebih sulit mendebug code.
Nanti akan saya tunjukkan bagaimana pekerjaan ini dapat lebih disederhanakan dengan teknologi .NET nya microsoft (ASP.NET).
Pada ASP.NET pekerjaan yang dilakukan oleh ASP dengan pekerjaan yang dibuat dengan Visual Basic 6 disatukan, sehingga pekerjaan develop aplikasi menjadi lebih singkat.
Mendebug code web base (pemrograman web) di ASP.NET sama mudahnya dengan mendebug code pada Visual Basic 6 jika dibandingkan dengan Visual Interdev 6.
Melakukan semuanya dengan ASP.NET
Seperti yang telah saya sebutkan di atas saya akan memprogram code yang hasilnya sama dengan yang di atas
dengan teknologi ASP.NET.
Di sini saya tidak lagi menuliskan stored procedure nya SQL, maupun memperlihatkan hasilnya karena akan sama dengan program yang sebelumnya.
Perbedaanya terletak ada Tool yang digunakan maupun teknologi yang dipakai. Pemrograman sebelumnya memakai Visual Strudio 6 (Visual Basic 6 -> ActiveXDLL dan Visual Interdev 6 -> asp). Sekarang saya akan melakukan pekerjaan yang sama dengan hasil yang sama pula, tetapi memakai teknologi yang berbeda (di sini saya akan menggunakan Visual Studio 2005 -> ASP.NET).
1. Menangkap XML Streamming ASP.NET & ADO.NET Object
Tambahkan class baru pada project WEB, beri nama CXMLStream.vb, lalu buat kode seperti di bawah ini:
Imports Microsoft.VisualBasic
Imports System.Data.SqlClient
Public Class CXMLStream
Public Function getXMLStream(ByVal sKdCust As String) As String
Dim oConn As New SqlConnection("Data Source=.;Initial Catalog=myData;User ID=sa")
Dim oCmd As New SqlCommand
Dim oPar1 As New SqlParameter
oConn.Open()
oCmd.Connection = oConn
oCmd.CommandText = "SP_CUST_XML"
oCmd.CommandType = Data.CommandType.StoredProcedure
With oPar1
.ParameterName = "@KDCUST"
.Direction = Data.ParameterDirection.Input
.DbType = Data.DbType.String
.Size = 1000
.Value = sKdCust
End With
oCmd.Parameters.Add(oPar1)
Dim oRdr As SqlDataReader = oCmd.ExecuteReader()
oRdr.Read()
Dim sXML As String = oRdr.GetString(0).ToString
Return sXML
End Function
End Class
Keterangan:
Kode ini akan memanggil stored procedur dan menyiman hasilnya sebagai string XML.
2. Memberikan Response XML
Tambahkan WEBForm pada project lalu berinama XMLStream.aspx.
Ketik kode seperti di bawah ini:
<%
Response.ContentType = "text/xml"
Dim sKdCust = Request.QueryString("kdcust")
Dim oSt As New CXMLStream
Dim sXML As String = oSt.getXMLStream(sKdCust)
Response.Write(sXML)
%>
Kode ini nantinya akan menerima parameter kdcust dari halaman getcust.aspx.
Kemudian memanggil Class XMLStream untuk mendaparkan string XML, lalu memberikan response sebagai XML ke Client. XML ini nanti akan ditangkap oleh XMLHTTP pada halaman getcust.aspx.
3. Memberikan Parameter dan mengirim permintaan XMLHTTTP dan menampung XML Stream
Kode di bawh ini adalah kode pada halaman getCust.aspx.
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="getCust.aspx.vb" Inherits="getCust" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script>
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
function getcust() {
skdcust = txtKdCust.value;
xmlhttp.open("GET", "XMLStream.aspx?kdcust="+skdcust, true);
xmlhttp.onreadystatechange = responseAjax;
xmlhttp.send (null);
}
function responseAjax() {
if(xmlhttp.readyState == 4){
if(xmlhttp.status == 200){
alert ("xmlhttp.ResponseText="+xmlhttp.ResponseText);
}else{
alert("An error has occurred: " + xmlhttp.statusText);
}
}
}
</script>
</head>
<body>
KdCust:
<input id="txtKdCust" type="text" />
<input id="BtnCari" type="button" value="cari" onclick="return getcust()"/>
</body>
</html>
Keterangan:
Script yang dipakai sama dengan script pada waktu pembahasan asp. Yang perlu diperhatikan di sini adalah saya tidak memakai kontrol input aspx yang berjalan di server, saya memakai kontrol HTML.
Hal ini disebabkan oleh karena kontrol HTML biasa lebih mudah diterapkan dengan Script yang berjalan di Client beserta object XMLHTTP dari pada kontrol aspx yang berjalan di server (klik di sini untuk mendowload kode).
Kesimpulan:
Sekali lagi kita telah melakukan pekerjaan yang sama dengan hasil yang sama, cara yang
hampir sama, teknologi yang berbeda (ASP & ASP.NET) namun vendor microsoft yang sama, tentunya hal ini jangan sampai mengacaukan pandangan logika kita.
Jika anda programmer visual basic 6 ataupun Visual Interdev 6 anda dapat memandang ASP.NET dari sudut pandang yang sama, ketika anda memandang teknologi pendahulunya.
Dengan demikian anda dimudahkan dengan kesederhanaan berpikir terhadap teknologi yang anda kuasai selama ini dan tentunya menjadi lebih produktif dengan kemudahan fasilitas-fasilitas baru teknologi .NET tanpa mengubah pandangan logika anda.
Bukankah mempelajari teknologi yang sama sekali baru cukup melelahkan dan membutuhkan waktu yang panjang?
Jadi lebih baik anda mempergunakan sesuatu yang anda kuasai selama ini lalu mencari penerapannya pada teknologi yang baru.
Mudah-mudahan dengan demikian anda menjadi tembus pandang dengan visual basic 6, VB.NET, asp & ASP.NET. Dan ini akan membuat anda lebih produktif lagi. salam!
|
