Using Easily ASP.NET GridView

Merasa kesulitan untuk menggunakan coding di ASP.NET untuk fitur edit maupun delete? Kita bisa menggunakan function yang sudah disediakan, jadi tidak perlu mengcoding susah – susah untuk menjalankan fitur yang kita mau.

Untitled

Contohnya seperti gambar di atas.

Terdapat gridview yang menampilkan beberapa data, jika ingin mengedit, kita cukup mengklik button “Edit” yang terdapat di sisi kiri gridview.

Untitled2

Jika kita mengklik button “Edit”, maka tampilan grid akan berubah, selain primary key, kolom lainnya berubah menjadi seperti textbox, sehingga bisa kita ganti datanya. Jika sudah selesai maka tinggal mengklik button “Update”.

Cara untuk mengubah tampilan gridview seperti di atas cukup mudah :

1. Pada saat membuat tampilan, pada gridview terdapat panah kecil di pojok kanan atas, klik panah tersebut.

Untitled4

Setelah tanda panah diklik, maka akan muncul beberapa option, pilih yang <new data source …>

2. Setelah itu, akan muncul window baru seperti dibawah ini :

Untitled5

Pilih yang Database

3. Lanjutt…

Untitled6

Pilih connection string yang digunakan, next..

4.

Untitled7

Pilih tabel mana yang akan ditampilkan anda juga bisa menambahkan syntax where dan order by di query tabel anda, lalu klik button “Advance”…

5. Akan keluar window seperti dibawah ini

Untitled8

checklist keduanya untuk mengenerate secara otomatis. OK dan next…

6. Setelah itu test query dan finish…

7. Setelah selesai, checklist “Enable updating” dan “Enable Deleting” yang secara otomatis akan menambahkan kolom button edit dan delete pada gridview anda.

Untitledx

 

Paging Index Changing in ASP.NET

Protected Sub GridView1_PageIndexChanging(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewPageEventArgs) Handles GridView1.PageIndexChanging
GridView1.PageIndex = e.NewPageIndex
GridView1.DataSource = SqlDataSource1
GridView1.DataBind()
End Sub

Paging gridview event :

contoh3

Protected Sub GridView1_PageIndexChanging(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewPageEventArgs) Handles GridView1.PageIndexChanging

GridView1.PageIndex = e.NewPageIndex

GridView1.DataSource = SqlDataSource1

GridView1.DataBind()

End Sub

Row Deleting Event in ASP.NET

Protected Sub GridView1_RowDeleting(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewDeleteEventArgs) Handles GridView1.RowDeleting
Conn.ConnectionString = Connection1.ConnectionString
Dim cmd As New SqlCommand(“delete from [pengguna] where kode_pengguna='” & GridView1.DataKeys(e.RowIndex).Value.ToString() & “‘”, Conn)
Conn.Open()
cmd.ExecuteNonQuery()
GridView1.DataSource = SqlDataSource1
GridView1.DataBind()
Conn.Close()
End Sub

Row deleting di ASP.NET, jika ingin menggunakan button deleting pada gridview, tambahkan event RowDeleting pada gridview yang anda buat. Jangan lupa buat datakeys pada properties gridview. Lebih baik gunakan nama column sebagai datakeys untuk mempermudah…atau mungkin memang seharusnya nama kolom…hhahahha…maklum…sama-sama newbie banged nie… ūüėÄ

contoh2

Protected Sub GridView1_RowDeleting(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewDeleteEventArgs) Handles GridView1.RowDeleting

Conn.ConnectionString = Connection1.ConnectionString

Dim cmd As New SqlCommand(“delete from [pengguna] where kode_pengguna='” & GridView1.DataKeys(e.RowIndex).Value.ToString() & “‘”, Conn)

//GridView1.DataKeys(e.RowIndex).Value.ToString() digunakan untuk //mengambil value datakeys dari row yang dipilih

Conn.Open()

cmd.ExecuteNonQuery()

GridView1.DataSource = SqlDataSource1

GridView1.DataBind()

Conn.Close()

End Sub

Cara Menampilkan Data di Textbox Dari GridView

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Conn.ConnectionString = Connection1.ConnectionString
query = “select * from [pengguna]”
query2 = “select nama, alamat, no_telepon, role, tgl_masuk from [pengguna] where kode_pengguna='” & kodeEdit.SelectedValue.ToString() & “‘”
query3 = “select top(1) * from [pengguna]”
Dim cmd As New SqlCommand(query, Conn)
Dim cmd2 As New SqlCommand(query2, Conn)
Dim cmd3 As New SqlCommand(query3, Conn)
Dim tabel As New DataTable
Conn.Open()
dataReader = cmd.ExecuteReader()
tabel.Load(dataReader)
GridView1.DataSource = tabel
GridView1.DataBind()
dataReader3 = cmd3.ExecuteReader()
If dataReader3.Read() Then
namaEdit.Text = dataReader3(“nama”).ToString()
alamatEdit.Text = dataReader3(“alamat”).ToString()
tlpEdit.Text = dataReader3(“no_telepon”).ToString()
tglEdit.Text = Left(dataReader3(“tgl_masuk”).ToString(), 2)
blnEdit.Text = Mid(dataReader3(“tgl_masuk”).ToString(), 4, 2)
thnEdit.Text = Right(dataReader3(“tgl_masuk”).ToString(), 4)
roleEdit.Text = dataReader3(“role”).ToString()
End If
dataReader3.Close()
dataReader2 = cmd2.ExecuteReader()
If dataReader2.Read() Then
namaEdit.Text = dataReader2(“nama”).ToString()
alamatEdit.Text = dataReader2(“alamat”).ToString()
tlpEdit.Text = dataReader2(“no_telepon”).ToString()
tglEdit.Text = Left(dataReader2(“tgl_masuk”).ToString(), 2)
blnEdit.Text = Mid(dataReader2(“tgl_masuk”).ToString(), 4, 2)
thnEdit.Text = Right(dataReader2(“tgl_masuk”).ToString(), 4)
roleEdit.Text = dataReader2(“role”).ToString()
End If
dataReader.Close()
dataReader2.Close()
Conn.Close()
End Sub

Kemaren ini sempet bingung saat ingin mengoding untuk update di ASP.NET karena tidak tahu cara menampilkan data dari gridview ke textbox. Misal, ketika memilih id_user dari combobox, maka data seperti nama, alamat, telepon, email dan lainnya dapat ditampilkan di textbox yang sudah disediakan.

contoh

contoh

saat meload halaman tambahkan coding berikut :

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

Conn.ConnectionString = Connection1.ConnectionString

//query untuk gridview

query = “select * from [pengguna]”

//query untuk mengambil data sesuai dengan pilihan di combobox

query2 = “select nama, alamat, no_telepon, role, tgl_masuk from [pengguna] where kode_pengguna='” & kodeEdit.SelectedValue.ToString() & “‘”

//untuk menampilkan data pertama yang ada di combobox

query3 = “select top(1) * from [pengguna]”

Dim cmd As New SqlCommand(query, Conn)

Dim cmd2 As New SqlCommand(query2, Conn)

Dim cmd3 As New SqlCommand(query3, Conn)

Dim tabel As New DataTable

Conn.Open()

dataReader = cmd.ExecuteReader()

tabel.Load(dataReader)

GridView1.DataSource = tabel

GridView1.DataBind()

//ini untuk bagian memilih dari combobox

dataReader3 = cmd3.ExecuteReader()

//di cek isi dari query3

If dataReader3.Read() Then

//memasukkan data hasil query3 ke textbox

namaEdit.Text = dataReader3(“nama”).ToString()

alamatEdit.Text = dataReader3(“alamat”).ToString()

tlpEdit.Text = dataReader3(“no_telepon”).ToString()

tglEdit.Text = Left(dataReader3(“tgl_masuk”).ToString(), 2)

blnEdit.Text = Mid(dataReader3(“tgl_masuk”).ToString(), 4, 2)

thnEdit.Text = Right(dataReader3(“tgl_masuk”).ToString(), 4)

roleEdit.Text = dataReader3(“role”).ToString()

End If

dataReader3.Close()

//ini untuk menampilkan data pertama dari combobox saat di page load //pertama kali

dataReader2 = cmd2.ExecuteReader()

If dataReader2.Read() Then

namaEdit.Text = dataReader2(“nama”).ToString()

alamatEdit.Text = dataReader2(“alamat”).ToString()

tlpEdit.Text = dataReader2(“no_telepon”).ToString()

tglEdit.Text = Left(dataReader2(“tgl_masuk”).ToString(), 2)

blnEdit.Text = Mid(dataReader2(“tgl_masuk”).ToString(), 4, 2)

thnEdit.Text = Right(dataReader2(“tgl_masuk”).ToString(), 4)

roleEdit.Text = dataReader2(“role”).ToString()

End If

dataReader.Close()

dataReader2.Close()

Conn.Close()

End Sub

Menjalankan IIS dan XAMPP di Windows 7 Sekaligus

Windows 7 Professional nongol, uda seneng..langsung cari donlotannya…instal dah di komputerku tercinta. Berhubung semester ini lagi ngambil KP alias Kerja Praktek yang menggunakan ASP.NET, mau ga mau menggunakan IIS…jadi diaktifkan lah fitur IIS di windows 7 ku tercinta. IIS jalan dengan normal, sampai ahirnya di pertengahan semester ini, membutuhkan XAMPP, karena matakuliah Java Lanjut yang butuh konek database pake mysql.

Di installah sang XAMPP ke windows 7…jeng jeng…instalation service failed, port 80 and ssl 443 is used. Aaarrggghhh~~……..why???? ya iyalah pasti, soalnya port 80 nya kan dipake ama s IIS…jadi gimana donk?? Dicoba start service apache, putus terus, ga bisa start. ¬†Setelah strezz selama beberapa hari, ahirnya menemukan cara supaya IIS dan XAMPP bisa jalan bareng di windows 7..tinggal mengubah port yang digunakan saja.

Begini caranya :

1. cari C:\xampp\apache\conf\httpd.conf

Search for “Listen 80?, change to “Listen 8080?
Search for “ServerName localhost:80?, change to “ServerName localhost:8080?
C:\xampp\apache\conf\extra\httpd-ssl.conf
Search for “Listen 443?, change to “Listen 4499?
Search for ‚Äú<VirtualHost _default_:443>‚ÄĚ, change to ‚Äú<VirtualHost _default_:4499>‚ÄĚ
Search for “ServerName localhost:443?, change to “ServerName localhost:4499?
Then, you should be able to start Apache successfully through the XAMPP control panel.

nah, kita tinggal mengedit sedikit isi dari httpd.conf ini, buka pakai notepad lalu cari kata “Listen 80″ rubah menjadi ‚ÄúListen 8080”

cari juga ¬†‚ÄúServerName localhost:80″, rubah menjadi ‚ÄúServerName localhost:8080″

2. Selanjutnya, cari C:\xampp\apache\conf\extra\httpd-ssl.conf

edit juga menggunakan notepad, dan cari kata ‚ÄúListen 443″ rubah menjadi ‚ÄúListen 4499″

cari ‚Äú<VirtualHost _default_:443>‚ÄĚ, rubah menjadi ‚Äú<VirtualHost _default_:4499>‚ÄĚ

cari juga ‚ÄúServerName localhost:443″, rubah menjadi ‚ÄúServerName localhost:4499″

Selanjutnya, start service melalui XAMPP control panel. Jeng jeng…IIS bisa digunakan, phpmyadmin juga lancar…Jika ingin mengakses phpmyadmin lewat browser, jangan gunakan cara biasa, tapi ketik¬†http://localhost:8080/phpmyadmin/. Berhubung port yang digunakan sudah kita rubah, maka untuk memanggilnya tuliskan portnya.