ASP.NET : Mengambil data dari database untuk ditampilkan menggunakan AJAX Control Toolkit – Auto Complete

Download Application Sample Download Data Sample

Model auto complete dapat kita lihat contohnya di halaman web Google. Ketika kita mau Search sesuatu melalui google, pada saat kita ketik suatu keyword, maka dibawah textbox tersebut akan muncul kata-kata yang sering digunakan oleh user yang terkait dengan keyword kita.

Di dalam aplikasi web menggunakan ASP.NET, kita dapat membuat model Auto Complete, menggunakan fasilitas yang disediakan oleh AJAX Control Toolkit, yakni Auto Complete Extender, namun kali ini saya akan mengkaitkan antara Auto Complete Extender dengan database. Software database yang saya pakai di contoh ini adalah MS-SQL Server 2005.

Di contoh ini, saya menggunakan tabel _PROVINSI yang terdiri dari 2 kolom, yakni ID_PROV dan NAMA_PROVINSI. Namun hanya kolom NAMA_PROVINSI saja yang akan digunakan di aplikasi ini. Anda bisa men-download sampel aplikasi yang pernah saya buat. Apabila Anda telah men-download sampelnya, ekstrak file ExcelSample.zip nya. Buat satu database baru di SQL Server, beri nama Lat_AutoComplete, dan import file excel tersebut ke dalam database ini.

Setelah Anda mempunyai database yang berisi tabel _PROVINSI, maka selanjutnya adalah membuat web site baru di VS2005 [File --> New --> Web Site…]

Di kotak dialog New Web Site, pilih ASP.NET Ajax-Enabled Web Site.

Langkah selanjutnya adalah :

1. buat folder baru didalamnya dengan nama : App_Code. Buat sebuah file Class baru di dalam folder App_Code ini, dan beri nama AutoComplete.vb.

Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Collections.Generic
Imports System.Web.SessionState

<WebService(Namespace:="AutoCompletes")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
<System.Web.Script.Services.ScriptService()> _

Public Class AutoComplete
Inherits System.Web.Services.WebService

<WebMethod(True)> _
Public Function GetCompletionList(ByVal prefixText As String) As String()

Dim items As New List(Of String)
Dim strquery As String = ""

strquery = "select * from _Provinsi where NAMA_PROVINSI like '" & prefixText & "%' "

Dim konstring As String = System.Configuration.ConfigurationManager.ConnectionStrings("conn").ConnectionString

Dim koneksi As Data.SqlClient.SqlConnection
Dim cmd As Data.SqlClient.SqlCommand

koneksi = New Data.SqlClient.SqlConnection(konstring)
cmd = New Data.SqlClient.SqlCommand(strquery, koneksi)

Try
koneksi.Open()
Dim dr As Data.SqlClient.SqlDataReader
dr = cmd.ExecuteReader

Do While dr.Read()
items.Add(dr.Item("NAMA_PROVINSI"))
Loop

Catch
End Try

Return items.ToArray()

End Function
End Class

2. Di file web.config, kita tambahkan script connectionstring untuk koneksi ke database.

<connectionStrings>
<remove name="conn"/>
	<add name="conn" connectionString="server=localhost;uid=sa;pwd=sa;database=Lat_AutoComplete"/>
</connectionStrings>

Taruh script tersebut diatas di dalam <configuration>… </configuration>

3. Selanjutnya adalah membuat sebuah file web service.

Beri nama file ini : AutoComplete.asmx, dan di dalamnya, ganti script-nya dengan :

<%@ WebService Language="VB" CodeBehind="~/App_Code/AutoComplete.vb" %>

4. buka file Default.aspx. Di dalam script <asp:ScriptManager ID=”ScriptManager1″ runat=”server”> tambahkan coding berikut :

<Services>
<asp:ServiceReference Path="AutoComplete.asmx" />
</Services>

5. Drag drop sebuah UpdatePanel yang ada di dalam toolbox AJAX Extensions

6. Drag drop juga sebuah TextBox dan AutoCompleteExtender, taruh di dalam UpdatePanel di atas.

Hasilnya adalah sebagai berikut :

7. Setting properti AutoCompleteExtender-nya adalah sebagai berikut :
- MinimumPrefixLength=”1″
- ServiceMethod=”GetCompletionList”
- ServicePath=”AutoComplete.asmx”
- TargetControlID=”TextBox1″

Kurang lebih, script di default.aspx adalah sbb :

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server" Enabled="true" Font-Names="Arial" Font-Size="10px" Visible="True" Width="200px"></asp:TextBox>
<cc1:AutoCompleteExtender ID="AutoComplete1" runat="server" MinimumPrefixLength="1" ServiceMethod="GetCompletionList" ServicePath="AutoComplete.asmx" TargetControlID="TextBox1"></cc1:AutoCompleteExtender>
</ContentTemplate>
</asp:UpdatePanel>

Coba running aplikasi tersebut, dan bila berhasil maka kurang lebih hasilnya akan seperti gambar di bawah ini :

Apabila diketik huruf ‘j’, maka akan muncul nama-nama propinsi yang ber-awalan ‘j’.

Apabila diketik kata ‘jawa’, maka yang muncul adalah nama-nama propinsi yang ber-awalan ‘jawa’

Happy coding…