Membuat Dialog Konfirmasi dengan JQuery UI
Sepulang kerja dan sehabis makan sambil menghilangkan dahaga, waktunya untuk berbagi ilmu. š
Mungkin banyak diantara kita sudah tidak asing alias sudah terbiasa apabila ingin membuat konfirmasi entah itu action delete dan lain sebagainya dengan script confirm() pada javascript. Kalau ada yg belum pernah menggunakannya, tampilannya kira2 seperti ini :
Tampilannya kurang menarik bukan? (setidaknya bagi saya :)). Nah, bagaimana kalau tampilan konfirmasinya seperti ini :
Menarik bukan?? Hehe….
Ingin tau bagaimana cara membuatnya??
Tampilan tersebut merupakan salah satu hasil dari penggunaan fasilitas JQuery UI. Lalu, apa itu JQuery UI? Sebelum berlanjut ke JQuery UI, kita perlu mengenal apa itu JQuery. Jquery merupakan library javascript yg memberikan kemudahan untuk kita dalam menyusun dan menulis secript javascript. Dengan menggunakan JQuery, kita tidak perlu menulis panjang script javascript yg ingin kita pakai dan dengan kemudahan yg ada di dalamnya, diberikan juga fungsi2 yg akan sering kita gunakan dalam kegiatan programming. JQuery ini merupakan library javascript yg powerfull (terutama lisensinya yg gratis :D) dan telah digunakan oleh banyak web perusahaan2 besar (salah satunya tools mysql : phpmyadmin). Lalu, apa itu JQuery UI? JQuery UI adalah salah satu bundle untuk low-level abstraction jQuery library untuk kebutuhan interaksi dan efek. Didalamnya terdapat fasilitas untuk memperindah tampilan web dengan tema2 dan warna cantik yg dapat kita atur dengan mudah. Dengan JQuery UI ini kita akan memperindah dialog konfirmasi kita menjadi semakin menarik. Tanpa panjang lebar lagi, langsung kita praktekkan pembuatannya. Namun sebelumnya, kita harus mengunduh JQuery UI terlebih dahulu. Kita atur tema yg kita pilih terlebih dahulu, saya menggunakan tema Start. Dapat didownload pada link berikut : http://jqueryui.com/themeroller/ (Tenang aja, Jquery sudah ada di dalam bundlenya).
Setelah JQuery UI didownload, kita buka project baru. Namun, saya akan menggunakan project pada tulisan saya yg “Membuat Kelas DataAccess untuk mengeksekusi StoredĀ Procedure“. Masukkan semua folder js dan css yg ada pada folder JQuery UI ke dalam project kita hingga susunan Solution seperti berikut :
Tambahkan Command Select dan satu buah tombol hingga tampilan menjadi berikut :
Masukkan DataKeyNames : NoInduk pada gridview dan masukkan sourcecode pada WebForm1.aspx.cs sehingga menjadi seperti berikut :
[sourcecode language=”csharp”]</p>
<p style="text-align: justify;">using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
namespace DataAccess
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
SqlDataReader dr = null;
DataTable dt = new DataTable();
Library.DataAccess oDataAccess = new Library.DataAccess();
dr = oDataAccess.ExecuteSP("siswa", "sp_GetDataSiswa");
GridView1.DataSource = null;
GridView1.DataBind();
if (dr != null && dr.HasRows)
{
GridView1.DataSource = dr;
GridView1.DataBind();
}
Button1.Attributes.Add("onclick", "return Confirm();");
}
protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
{
GridViewRow row = GridView1.SelectedRow;
Session["NoInduk"] = GridView1.DataKeys[row.RowIndex].Value.ToString();
}
protected void Button1_Click(object sender, EventArgs e)
{
Library.DataAccess oDataAccess = new Library.DataAccess();
oDataAccess.Delete("siswa", "tblSiswa", "NoInduk=’" + Session["NoInduk"].ToString() + "’");
}
}
}</p>
<p style="text-align: justify;">[/sourcecode]
Kemudian masukkan sourcecode pada file WebForm1.aspx sehingga menjadi seperti berikut :
[sourcecode language=”javascript”]</p>
<p style="text-align: justify;"><%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="DataAccess.WebForm1" %>
<!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></title>
<link rel="stylesheet" href="css/start/jquery-ui-1.10.4.custom.css" />
<script type="text/javascript" language="javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery-ui-1.10.4.custom.js"></script>
<script type="text/javascript">
$(function () {
$("#dialog-confirm").dialog({
autoOpen: false,
resizable: false,
height: 300,
modal: true,
buttons: {
"Yes": function () {
<%=this.Page.ClientScript.GetPostBackEventReference(new PostBackOptions(this.Button1))%>;
$(this).dialog("close");
},
"No": function () {
$(this).dialog("close");
}
}
});
});
function Confirm() {
$("#dialog-confirm").dialog("open");
return false;
}
</script>
</head>
<body>
<div id="dialog-confirm" title="Konfirmasi Hapus Data">
<p>
<span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
Apakah anda yakin data ini ingin dihapus?</p>
</div>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" DataKeyNames="NoInduk" OnSelectedIndexChanged="GridView1_SelectedIndexChanged">
<Columns>
<asp:CommandField ShowSelectButton="True" />
</Columns>
</asp:GridView>
</div>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Hapus" />
</form>
</body>
</html>
[/sourcecode]
Bila benar, setelah selesai akan tampil halaman seperti berikut saat tombol hapus ditekan :
Demikian dulu tulisan dari saya, sudah malam juga ternyata,hehe….
Untuk source code, dapat diambil di link berikut :
http://www.4shared.com/zip/Hc1iFlpWba/JQueryUI.html