How to Build Search BlogPost with ASP.NET

Pada tutorial ini akan memandu anda dalam membuat search form pada sebuah blog. Dimana search form ini berguna untuk mencari artikel-artikel yang sesuai dengan keyword yang kita inginkan.

Pada tahap pertama kita membuat sebuah database “Blog” yang sederhana, kemudian buat sebuah table yang terdiri dari 3 buah column/field: BlogId (int - Auto Increment), BlogTitle (nvarchar(MAX))dan BlogContent (nvarchar(300))simpan dengan nama Blog.

Capture

Setelah membuat table, kita akan mengisi nilai dari column-column yang kita buat tadi. Sebagai contoh saya mengisikan data seperti berikut.

Capture

Tambahkan LinQ to SQL untuk koneksi datanya.

Capture

Berikutnya kita beralih ke page Default.aspx untuk membuat tampilannya. Tambahkan heading, satu textbox dan satu button seperti berikut.

   1: <h1>Search</h1>
   2:         <asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
   3:         <asp:Button ID="btnSubmit"
   4:             runat="server" Text="Search" onclick="btnSubmit_Click" />

Pada kode diatas terdapat event onclick="btnSubmit_Click" Anda dapat membuatnya dengan melakukan double klik pada button Search dalam tampilan split atau design. Tambahkan Data Control ListView untuk menampilkan hasil dari pencarian.

   1: <asp:ListView ID="lvBlog" runat="server">
   2:             <LayoutTemplate>
   3:                 <asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
   4:             </LayoutTemplate>
   5:             <ItemTemplate>
   6:                 <h1><%#Eval("BlogTitle") %></h1>
   7:                 <p><%#Eval("BlogContent") %></p>
   8:             </ItemTemplate>
   9:             </asp:ListView>

Pada baris ke-6 dan ke-7 untuk membinding data dari value yang ada pada table yakni value dari column BlogTitle dan BlogContent. Berikutnya kita beralih ke code behind, buat DataSource dan DataBind pada menthod btnSubmit_Click.

   1: BlogDataContext db = new BlogDataContext();
   2:  
   3:             var Blog = from b in db.Blogs
   4:                        where b.BlogContent.Contains(txtSearch.Text.Trim()) ||
   5:                        b.BlogTitle.Contains(txtSearch.Text.Trim())
   6:                        select b;
   7:  
   8:             lvBlog.DataSource = Blog;
   9:             lvBlog.DataBind();

Pada DataSource diatas (baris 3-6) akan membandingkan antara value yang ada pada column table(BlogContent dan BlogTitle) dengan value yang ada pada txtSearch. Jika sudah, klik Start Debugging(F5). Jika kita mencari dengan keyword “ASP.NET” maka akan muncul seperti berikut.

Capture

Dalam kenyataannya, jika kita melakukan pencarian maka akan diberikan link judul artikel tersebut, link tersebut akan menuju pada detail artikel. Untuk itu kita membuat sebuah page baru bernama Entry.aspx

Capture

Pada Entry.aspx tambahkan ListView untuk menampilkan data.

   1: <asp:ListView ID="lvBlogEntry" runat="server">
   2:             <LayoutTemplate>
   3:                 <asp:PlaceHolder ID="itemPlaceHolder" runat="server"></asp:PlaceHolder>
   4:             </LayoutTemplate>
   5:             <ItemTemplate>
   6:                 <h1><%#Eval("BlogTitle") %></h1>
   7:                 <p><%#Eval("BlogContent") %></p>
   8:             </ItemTemplate>
   9:         </asp:ListView>
Berikutnya kita buka Entry.aspx.cs lalu buat sebuah DataSource seperti berikut pada method Page_Load
   1: BlogDataContext db = new BlogDataContext();
   2:            int TheQueryString = Convert.ToInt32(Request.QueryString["BlogID"]);
   3:            var Blog = from p in db.Blogs
   4:                       where p.BlogID == TheQueryString
   5:                       select p;
   6:  
   7:            lvBlogEntry.DataSource = Blog;
   8:            lvBlogEntry.DataBind();
Kemudian edit ListView pada Default.aspx seperti berikut.
   1: <asp:ListView ID="lvBlog" runat="server">
   2:     <LayoutTemplate>
   3:         <asp:PlaceHolder ID="itemPlaceHolder" runat="server"></asp:PlaceHolder>
   4:     </LayoutTemplate>
   5:     <ItemTemplate>
   6:         <asp:HyperLink ID="lnkPost" Text='<%#Eval("BlogTitle") %>' runat="server" NavigateUrl='<%#Eval("BlogID", "Entry.aspx?BlogID={0}") %>'></asp:HyperLink>
   7:     </ItemTemplate>
   8: </asp:ListView>        

Dapat kita lihat pada ItemTemplate terdapat control Hyperlink yang akan menampilkan judul dan link url dengan masking Entry.aspx?BlogId={BlogId}. Jika sudah Start Debugging (F5).

Capture

Jika kita klik link tersebut akan muncul seperti ini.

Capture

Untuk membuat tampilan blog kita semakin dinamis, selanjutnya kita bisa menambahkan fitur AJAX Control.

   1: <asp:ScriptManager ID="ScrMng" runat="server">
   2:         </asp:ScriptManager>
   3:         <asp:UpdateProgress ID="UptPgs" runat="server" DisplayAfter="500">
   4:         <ProgressTemplate>
   5:             <img src="Images/loading.gif" alt="Please Wait!" />            
   6:         </ProgressTemplate>
   7:         </asp:UpdateProgress>
   8:             <asp:UpdatePanel ID="UptPnl" runat="server">
   9:             <Triggers>
  10:                 <asp:AsyncPostBackTrigger ControlID="btnSubmit" />
  11:             </Triggers>
  12:             <ContentTemplate>
  13:         <asp:ListView ID="lvBlog" runat="server">
  14:             <LayoutTemplate>
  15:                 <asp:PlaceHolder ID="itemPlaceHolder" runat="server"></asp:PlaceHolder>
  16:             </LayoutTemplate>
  17:             <ItemTemplate>
  18:                 <asp:HyperLink ID="lnkPost" Text='<%#Eval("BlogTitle") %>' runat="server" NavigateUrl='<%#Eval("BlogID", "Entry.aspx?BlogID={0}") %>'></asp:HyperLink>
  19:             </ItemTemplate>
  20:         </asp:ListView>        
  21:         </ContentTemplate>
  22:      </asp:UpdatePanel>

Kode diatas terdapat 3 komponen utama dalam AJAX Controls seperti ScriptManager, ProgressTemplate dan UpdatePanel. ScriptManager berfungsi untuk mengatur client script pada halaman web yang menggunakan AJAX. Kita harus menempatkan sebuah ScriptManager pada setiap halaman web kita jika kita ingin menggunakan AJAX. Pada UpdateProgress kita memberikan value 500  atau sama dengan 500 milisecond (0.5 detik) pada properties DisplayAfter. Jangan lupa untuk Add image loading.gif ke dalam solution kita. Pada UpdatePanel terdapat dua komponen yakni Triggers dan ContentTemplate. Triggers berfungsi untuk mengeksekusi ketika sebuah event terjadi. ContentTemplate merupakan bagian yang akan ditampilkan atau mengalami perubahan.

Add reference System.Threading , reference ini berisi class-class kontrol thread pada Default.aspx.cs

   1: using System.Threading;

Berikutnya tambahkan Thread.Sleep

   1: Thread.Sleep(1000);

Pada kode diatas berfungsi sebagai waktu untuk meng-overload data dengan satuan milisecond. Jika sudah, Start Debugging (F5).  Anda bisa mengganti value yang dibutuhkan untuk meload data dari ListView dengan mengubah value

Untitled 

Conclusion

Secara sederhana tutorial ini memberikan gambaran bagaimana membuat search form pada web, untuk berikutnya bisa dikembangkan lebih jauh dengan parameter-parameter pencarian yang kompleks. untuk itu anda dapat bermain-main dengan syntax LinqToSql. Ebook dalam bahasa indonesia juga telah tersedia disini. Untuk referensi mengenai ASP.NET AJAX bisa disimak disini.

Source code tutorial ini dapat anda download disini. Follow @danitaufani untuk mendapatkan update dari blog ini.

Happy coding guys!


Posted Nov 11 2010, 09:36 AM by Dani R Taufani

Comments

Recap: Seminar Charity at STMIK Sumedang - Microsoft and You wrote Recap: Seminar Charity at STMIK Sumedang - Microsoft and You
on 11-11-2010 10:28

Pingback from  Recap: Seminar Charity at STMIK Sumedang - Microsoft and You