Happy Sunday
Teman – teman..
Salam hangat
untuk kita semua, semoga selalu sehat & dalam lindungan tuhan yang maha
esa.
Hari ini saya
akan memberikan tutorial CRUD(Create, Read, Update, Delete) dengan ASP.NET melanjutkan
tutorial kemarin tentang Login dengan ASP.Net dan SQL Server.
Baiklah
langsung saja, seperti biasa saya asumsikan teman-teman sudah bisa
mengoperasikan Visual Studio dan SQL Server yaa. Disini saya memakai IDE
kesayangan saya Microsoft Visual Studio 2010 dan Database Enginenya Microsoft
SQL Server 2008R2.
1. Step Awal, teman
– teman buat dulu databasenya yaa, bebas namanya. Atau pakai database yang
sudah ada juga tak mengapa J.
Disini saya memakai nama ‘cevest’ sebagai database nya dan nama table nya ‘kejuruan’.
Cekidot
Atau teman –
teman bisa menuliskan query dibawah ini pada text editor:
create table
kejuruan(
kd_kejuruan char(10) not null,
nama_kejuruan varchar(50)
not null,
constraint
pk_kejuruan primary key(kd_kejuruan)
)
2. Tahap
Selanjutnya kita main ditampilan dulu yaa. teman – teman buka Visual Studio
nya, buat project baru atau pakai project yang sudah ada. Create New Item >
Pilih Web Form >
Jika Sudah,
teman – teman ketikkan script dibawah ini didalam form <form> DISINI !!</form>
<div id="window">
<div class="isi">
<div class="judul">
DATA KEJURUAN
</div>
<%--MaxLength
= 4 maksudnya adalah pembatasan pada penulisan, jadi hanya bisa menginputkan 4
huruf atau angka pada field text--%>
<p>KODE KEJURUAN</p><asp:TextBox ID="txtkode"
runat="server"
MaxLength=4 />
<p>NAMA KEJURUAN</p><asp:TextBox ID="txtnama"
runat="server"
/><br />
<asp:Button ID="btnsimpan" runat="server" Text="Save" CssClass="button" />
<asp:Button ID="btnreset" runat="server" Text="Reset" CssClass="button" />
</div>
<div class="isi">
<p>
<%--DataKeysNames
digunakan sebagai pengenal table, bisa pakai salah satu nama kolom yang ada
didalam tabel--%>
<asp:GridView ID="gvkejuruan" runat="server" AutoGenerateColumns="false" Width="480px" DataKeyNames="kd_kejuruan">
<Columns>
<asp:TemplateField HeaderText="KODE KEJURUAN ">
<ItemTemplate>
<%--Nama yang berada didalam kutip harus sama dengan nama
kolom di database, jika tidak maka akan error--%>
<asp:Label ID="lblid" runat="server" Text='<%# Bind("kd_kejuruan") %>'/>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="NAMA KEJURUAN">
<ItemTemplate>
<%--Nama yang berada didalam kutip harus sama dengan nama
kolom di database, jika tidak maka akan error--%>
<asp:TextBox ID="txtNAMA" runat="server" Text='<%# Bind("nama_kejuruan") %>' />
</ItemTemplate>
</asp:TemplateField>
<%--CommandField
adalah kolom perintah, dan ShowDeleteButton atau yang lainnya adalah tools
bawaan Visual Studio--%>
<asp:CommandField ShowDeleteButton="true" HeaderText="delete" />
<asp:CommandField ShowEditButton="true" HeaderText="edit" />
</Columns>
</asp:GridView>
</p>
</div>
</div>
Jika sudah hasilnya
akan seperti ini gambar dibawah ini :
Lanjut
ketahap selanjutnya?. Santai aja, seduh secangkir kopi dlu buat nemenin
ngoding. Hahaha
3. Next
Step, kita buat CSS external nya yaa. Disini IDE milik saya sudah tersematkan CSS3.
Temen temen kalau mau bisa sedot disini. Langsung install aja. Dan Di
restart Visual Studio nya.
Cekidot,
create new item pilih stylesheet.css :
Jika sudah,
ketikkan atau Copas saja (biar gak cape ngetik) script css dibawah ini:
body
{
background-color:
#dae3d6;
font-size: .80em;
font-family:
"Helvetica Neue", "Lucida Grande", "Segoe
UI", Arial, Helvetica, Verdana, Sans-Serif;
margin: 0px;
padding: 0px;
color: #696969;
}
#window
{
width:500px;
margin: 10px auto;
padding: 10px;
box-shadow: 10px;
border-radius:
5px;
background-color:
#fff;
height: 450px;
font-family:
"Helvetica Neue", "Lucida Grande", "Segoe
UI", Arial, Helvetica, Verdana, Sans-Serif;
}
.isi
{
background-color:
#fff;
border-radius:
5px;
box-shadow: 0 0 3px #666666;
height: 200px;
border-width:
1px;
padding: 10px;
margin-bottom:
5px;
}
.judul
{
padding: 5px;
font: 22px verdana;
color: #fff;
background: rgb(20, 80, 120);
}
input[type=text], textarea
{
width: 300px;
padding: 5px;
margin-bottom:
10px;
background: #fff;
border: 1px solid #ccc;
border-radius:
10px;
-webkit-border-radius:
10px;
-moz-border-radius:
10px;
color: #000000;
font: 90% verdana;
}
input[type=text]
{
height: 15px;
}
textarea
{
height: 15px;
}
input[type=text]: focus, textarea: focus
{
box-shadow: 0 0 3px #fe0000;
-webkit-box-shadow:
0 0 3px #fe0000;
-moz-box-shadow:
0 0 3px #fe0000;
font: 90% verdana;
}
.button
{
padding: 5px;
margin-bottom:
5px;
background: #cccccc;
border: 1px solid #666;
border-radius:
5px;
-webkit-border-radius:
5px;
-moz-border-radius:
5px;
color: #000;
float: left;
font:90% verdana;
text-decoration:
none;
margin-left:
2px;
}
.button:hover
{
background-color:
#fe0000;
color: #fff;
}
Gak perlu
pakai keterangan keknya temen – temen udah pada paham yaa :D
Jika Sudah di
Save jangan lupa. Lalu kita temple script ini di form yang sudah kita buat
tadi. Buat link penghubung, letakkan diatas </head>.
Naah disitu
naro nya yaa.. jangan salah kamar.. hehehe. Hasilnya pasti jadi begini.
Kalau masih ada yang tidak sama,
yaa coba diperiksa lagi. Siapa tau ada yang kurang hurufnya. Atau kurang
perhatiannya.. eeh :D
Selanjutnya, teman – teman buat
file koneksi nya. Masih di IDE kesayangan kita, Create New Item > Pilih
Class.vb. Penamaan bebas yaa:
Lalu
di Editor, ketikkan Script dibawah ini.
'Memanggil
Library bawaan Visual Studio
Imports
Microsoft.VisualBasic
Imports
System.Data
Imports
System.Data.SqlClient
Imports
System.Data.OleDb
Public Class Class_koneksi
Public
strsql As String
Public
sqlcon As SqlClient.SqlConnection 'script
koneksi
Public
sqlcommand As New
SqlClient.SqlCommand 'script perintah
query SQL
Public
reader As SqlClient.SqlDataReader 'script
pembaca perintah query SQL
Public
dataadapter As New
SqlClient.SqlDataAdapter(sqlcommand)
Public
dataset As New DataSet
Public
datatabel As New
DataTable
'Keyword koneksi
database yang menggunakan sistem autentikasi admin login
'nama database
saya cevest, sesuaikan dengan teman - teman yaa. dan SQL saya memakai sistem
autentikasi admin Login
'dengan user
ID="sa" dan password "1234567"
Public Sub koneksi()
sqlcon = New
SqlConnection("server=(local);database='cevest';user
ID=sa;password=1234567")
End Sub
'ini adalah
keyword koneksi database tanpa sistem login admin
Public Sub sqlkoneksi()
sqlcon = New
SqlConnection("server=(local);database='latihan1';Trusted_Connection=True;")
End Sub
End Class
Semoga
cukup jelas yaa, dan tidak ada kendala sampai disini.
Selanjutnya,
klik kanan pada Text Editor Form utama > Pilih View Code untuk membuka code
behind.
Jika sudah maka akan
tampil text editor baru berbahasa vb. Ketikkan Script dibawah ini, perhatikan
event ID dan deklarasinya. Jangan diketik semua atau asal copas aja. Contohnya
seperti: btnsimpan_Click, gvkejuruan_RowCancelingEdit, gvkejuruan_RowDeleting.
Itu semua bisa Kamu buka dengan cara:
Ini adalah
event – event ID nya.
Ini deklarasinya.
Dipilih sesuai
kebutuhan dan fungsi nya yaa.:
Partial Class POLTEK_Kejuruan
Inherits
System.Web.UI.Page
Dim kon As New Class_koneksi
'Pemanggilan Class koneksi yang sudah dibuat
sebelumnya
'Protected Sub
Messagebox(ByVal msg As String)
' Dim lbl As New Label
' lbl.Text = "<script
language='javascript'>" & Environment.NewLine & _
'
"window.alert('" + msg + "')</script>"
' Page.Controls.Add(lbl)
'End Sub
Protected Sub viewkejuruan()
With
kon
.sqlcon.Open()
.sqlcommand.Connection = .sqlcon
.sqlcommand.CommandText = "SELECT * FROM kejuruan" '<<kejuruan adalah nama tabel di database, nama harus
identik.
.reader = .sqlcommand.ExecuteReader
gvkejuruan.DataSource = .reader
gvkejuruan.DataBind()
.reader.Close()
.sqlcon.Close()
txtkode.Focus()
End With
End Sub
Protected Sub Page_Load(sender As
Object, e As
System.EventArgs) Handles
Me.Load
kon.koneksi()
If Not IsPostBack = True
Then
viewkejuruan()
End If
End Sub
Protected Sub btnsimpan_Click(sender As
Object, e As
System.EventArgs) Handles
btnsimpan.Click
'dibawah ini
adalah script button simpan
Dim
kode As String
= txtkode.Text 'pembuatan
variabel kode dan nama
Dim nama
As String =
txtnama.Text
Try
kon.koneksi()
kon.sqlcon.Open()
kon.sqlcommand.Connection =
kon.sqlcon
kon.sqlcommand.CommandText = "INSERT INTO
kejuruan(kd_kejuruan,nama_kejuruan)" _
& "VALUES('"
& kode & "', '" & nama
& "')" 'variabel diatas
dipakai pada perintah query ini
kon.reader =
kon.sqlcommand.ExecuteReader
kon.sqlcon.Close()
txtkode.Text = ""
txtnama.Text = ""
viewkejuruan()
Catch
ex As Exception
'Messagebox(Err.Description)
End Try
End Sub
Protected Sub gvkejuruan_RowCancelingEdit(sender As Object, e As System.Web.UI.WebControls.GridViewCancelEditEventArgs)
Handles gvkejuruan.RowCancelingEdit
'dibawah ini
adalah script Cancel Edit
gvkejuruan.EditIndex = -1
viewkejuruan()
End Sub
Protected Sub gvkejuruan_RowDeleting(sender As Object, e As System.Web.UI.WebControls.GridViewDeleteEventArgs)
Handles gvkejuruan.RowDeleting
'dibawah ini
adalah script delete
Try
Dim
kode As String
= DirectCast(gvkejuruan.Rows(e.RowIndex).FindControl("lblid"), Label).Text
With
kon
.sqlcon.Open()
.sqlcommand.Connection =
.sqlcon
.sqlcommand.CommandText = "DELETE FROM kejuruan WHERE kd_kejuruan = '"
& Trim(kode) & "'" 'kd_kejuruan
adalah primary key pada tabel
.reader =
.sqlcommand.ExecuteReader
.reader.Close()
.sqlcon.Close()
viewkejuruan()
End
With
Catch
ex As Exception
'Messagebox(Err.Description)
End Try
End Sub
Protected Sub gvkejuruan_RowEditing(sender As Object, e As System.Web.UI.WebControls.GridViewEditEventArgs)
Handles gvkejuruan.RowEditing
'dibawah ini
adalah Script Edit
gvkejuruan.EditIndex = e.NewEditIndex
viewkejuruan()
End Sub
Protected Sub gvkejuruan_RowUpdating(sender As Object, e As System.Web.UI.WebControls.GridViewUpdateEventArgs)
Handles gvkejuruan.RowUpdating
'dibawah Ini
adalah Script Update
Dim
kode As String
= DirectCast(gvkejuruan.Rows(e.RowIndex).FindControl("lblid"), Label).Text
Dim
nama As TextBox
= DirectCast(gvkejuruan.Rows(e.RowIndex).FindControl("txtNAMA"), TextBox)
Try
With
kon
.sqlcon.Open()
.sqlcommand.Connection =
.sqlcon
.sqlcommand.CommandText = "UPDATE kejuruan SET nama_kejuruan = '"
& Trim(nama.Text) & "' WHERE
kd_kejuruan = '" & Trim(kode) & "'"
.reader =
.sqlcommand.ExecuteReader
.reader.Close()
.sqlcon.Close()
gvkejuruan.EditIndex = -1
viewkejuruan()
End
With
Catch
ex As Exception
'Messagebox(Err.Description)
End Try
End Sub
Protected Sub btnreset_Click(sender As
Object, e As
System.EventArgs) Handles
btnreset.Click
'dibawah ini
adalah script button Reset
txtkode.Text = ""
txtnama.Text = ""
txtkode.Focus()
End Sub
End Class
Abaikan saja
tulisan berwarna hijau atau yang diawali dengan kutip 1, karena itu adalah
komentar.
100% work.
Jika Sudah
Selesai maka hasilnya akan seperti ini.
Tampilan saat
Edit seperti ini. Contoh Saja:
Berhasil
disimpan ke Database:
Naah, Data
berhasil tersimpan di database. Perintah Delete juga pasti bisa. Tapi tidak ada
pesan Yes or No pada saat Klik Delete. Mungkin teman – teman bisa
mengembangkannya supaya lebih keren. Silahkan dimodif saja programnya masing –
masing.
Jaga Terus
semangat kalian dalam Belajar. Jika ditekuni pasti berhasil.
Semoga
bermanfaat dan terima kasih sudah mampir ke Blog saya. Semoga yang mampir
kemari dimudahkan Rejeki nya.. Amin. Sampai ketemu pada kesempatan selanjutnya J
0 komentar:
Posting Komentar