Belajar kilat asp.net

Universitas Nasional PASIM
12 Juli
2014
CORETAN BELAJAR KILAT
ASP.NET
Tutorial
Oleh : Dona Alianda

12 Juli 2014 CORETAN BELAJAR KILAT ASP.NET
1
KATA PENGANTAR
ASP.NET merupakan framework untuk membangun aplikasi web yang
dikembangkan oleh Microsoft. Awalnya, teknologi .NET adalah penerus
ASP yang juga merupakan produk software dari Microsoft.ASP dan .NET
Bersama-sama menyediakan platform untuk para pengembang untuk
merancang dan mengembangkan situs web dinamis dan web portal. ASP
menawarkan kecepatan yang lebih cepat untuk dapat memuat halaman
web.
Rekan-rekan sekalian diharapkan memiliki referensi lainnya tentang .NET
lainnya yang dapat mendukung dalam berlatih dan mempelajari lebih dalam
tentang asp.net
Penyusun,

2
A. HTML Page, CSS dan Javascript di Ms.Visual
Studio 2010
Untuk pembelajaran pertama kita akan menerapkan / membuat file
HTML dan menggunakan CSS dan JAVASCRIPT di dalamnya
menggunakan IDE Microsoft Visual Studio.
Berikut langkah-langkahnya :
1. Buka Microsoft Visual Studio
2. Klik File -> New -> Project

3
3. Berikan nama project dan tentukan destinasi folder dimana project
tersebut akan disimpan, penulis memberikan nama project
“BelajarASPNet”
4. Klik OK jika sudah melakukan langkah no.3, dan project akan ter-create
dengan file utama default.aspx. Yang perlu diketahui di dalam membuat

4
project website dengan ASP.Net secara otomatis IDE akan membuat file-
file utamanya berekstensi .aspx dan .aspx.cs. Penjelasan singkatnya, file
dengan ekstensi .aspx merupakan file untuk mendasain UI (User
Interface). Sedangkan file berekstensi .aspx.cs merupakan file untuk
membuat proses, validasi dan yang lainnya.
5. Klik kanan pada project -> Add -> NewItem
6. Tambahkan file HTML Page, berikan nama index.htm

5
7. Tambahkan 5 div pada file HTML yang sudah dibuat sebelumnya
8. Untuk mempercantik tampilannya, kita akan tambahkan CSS.
Sebenarnya ada beberapa cara menambahkan CSS pada file HTML di
Visual Studio, tapi kali ini kita akan menggunakan cara best practice /
sesuai dengan kebiasaanya.
9. Kembali klik kanan pada project -> Add -> New Item
10. Tambahkan file Style Sheet , kemudian berikan nama style.css

6
11. Di file style.css tambahkan css seperti di bawah :
.cssMain
{
margin:auto;
width:1200px;
}
.cssHeader
{
height:150px;
background-color:#214183;
}
.cssMenuKiri
{
float :left;
width: 30%;
height:400px;
background-color:#B8CBE2;
}
.cssMenuKanan
{
float:left;
width:70%;
background-color:#B5C7DE;
height:400px;
background-color:#CCCCFF;
}
.cssFooter
{
margin-top:400px;
width:100%;
height:50px;
}

7
12. Kemudian panggil css yang sudah dibuat sesuai dengan kegunnaan div
nya. Misal: div untuk header tambahkan .cssHeader, begitupun yang
lainnya.
13. Cara untuk melakukan langkah 12, drag file style.css ke file index.htm
dan letakkan di bawah tag <head></head>
14. Hasil dari langkah 13 akan seperti ini :
15. Panggil setiap fungsi css pada setiap div yang sudah disesuaikan namanya.
Karena kita menggunakan .(dot) pada setiap awal fungsi di css, maka cara
memanggil di div nya menggunakan class=”nama fungsi css”. Dan ketika kalian

8
mengetik CLASS di dalam tag pembuka div (<div class= >) semua fungsi css pada
file style.css akan otomatis tersuggest.
16. Setelah itu lihatlah hasilnya, klik kanan pada file index.HTM di solution
explorer, kemudian pilih view in browser. Dan hasilnya akan seperti berikut.
17. Sebagai catatan, bahwa hal tadi bisa kita lakukan tidak hanya pada file .HTM
tetapi bisa juga pada file .ASPX.
18. Untuk selebihnya kalian dapat mengexplore sendiri fungsi-fungsi yang ada di css
atau javascript.
19. Baik untuk mencoba JAVACRIPT kita akan buat function sederhana untuk memanggil
alert. Letakkan function berikut kembali di bawah tag <head>

9
<script type="text/javascript">
function TesJavascript() {
alert('Hello World');
}
</script>
20. Kemudia dari toolbox drag input button dan letakkan di antara tag <div> untuk
menu kiri.
21. Untuk melihat hasilnya, sama, klik kanan pada file index.Htm di solution
explorer kemudian pilih view in browser, maka hasilnya ketika di klik button
nya akan tampil sebagai berikut :

10
22. Itulah tutorial singkat membuat file html sexerhana di Ms.Visual Studio.
Baik dari sini kita akan membuat program CRUD sederhana dengan menggunakan
bawaan Framework.Net 3.5.

11
B.CRUD sederhana menggunakan fungsi bawaan
.NetFramework 3.5
Untuk pembelajaran kedua kita akan membuat program CRUD
sederhana dengan dibantu fungsi bawaan dari .Net Framework 3.5 dan
stored procedure di SQL Server 2008. Berikut langkah-langkahnya
(dengan asumsi sudah pernah menggunakan database SQL Server) :
1. Buka Microsoft SQL Server Management Studio 2008
2. Kemudian klik kanan pada database -> New Database
3. Berikan nama database dengan nama “pegawaiDB”
4. Tambahkan table baru seperti gambar berikut :

12
5. Kemudian buka jendela baru untuk membuat stored procedure untuk
INSERT, UPDATE, dan DELETE. Ikuti script di bawah :
- SP untuk INSERT
CREATE PROCEDURE SP_INSERT_PEGAWAI
@nip varchar(20),
@nama varchar(50),
@tahunMasuk varchar(10)
AS
BEGIN
INSERT INTO
MST_PEGAWAI(NIP,Nama,Tahun_Masuk)VALUES(@nip,@nama,@tahunMasuk)
END
Blok script di atas kemudia execute.
6. Lakukan hal yang sama pada langkah untuk membuat stored procedure
Update dan Delete.
- SP untuk UPDATE
CREATE PROCEDURE SP_UPDATE_PEGAWAI
@nip varchar(20),
@nama varchar(50),
@tahunMasuk varchar(10)
AS
BEGIN
UPDATE MST_PEGAWAI SET Nama=@nama, Tahun_Masuk=@tahunMasuk
WHERE NIP=@nip
END

13
- SP untuk DELETE
CREATE PROCEDURE SP_DELETE_PEGAWAI
@nip varchar(20)
AS
BEGIN
DELETE FROM MST_PEGAWAI WHERE NIP=@nip
END
7.Setelah database selsai disiapkan, coba insert beberapa data terhadap
table pegawai dari query.
8. Setelah database, table dan data sudah disiapkan baru kita melangkah
membuat aplikasinya. Aplikasi website yang kita buat akan
menggunakan bahasa pemograman c# dengan .Net Framework 3.5.
Untuk mempercepat langkah, kita gunakan solution yang sudah ada
yang tadi kita buat dengan nama BelajarASPNet.
9.Dalam solution tersebut sudah tercreate default.aspx kita buat design
yang sederhana tambahkan table dari toolbox tinggal didrag
10.Tambahkan control dari toolbox, 3 textbox, untuk NIP, Nama dan Tahun
Masuk. Setiap control jangan lupa diberi nama ID berawalan ui-.
Misalkan untuk textbox nip, ID-nya uiTxtNIP dst. UI berarti User Interface

14
11.Tambahkan control dari toolbox, 1 button untuk simpan data, 1 button
untuk reset data, 1 label message menampilkan informasi bila terjadi
error dan 1 gridview untuk menampilkan data. Kurang lebih designnya
seperti berikut :

15
12. Masih bermain di file default.aspx. sekarang masih pada design, klik
pada gridview. Nanti akan muncul tanda panah kecil, kemudian pilih
data source -> pilih new datasource .
13. Pilih SQL Database , kemudia berikan nama pada ID datasourcenya,
sdcGV.

16
14. Klik OK -> klik button NEW CONNECTION -> pilih SERVER NAME -> pilih
DATABASE yang digunakan. Kemudian klik button TEST CONNECTION.
15. Setelah itu klik next->next sampai berujung pada tombol finish,
kemudian klik tombol finish.

17
16. Kemudian klik kanan pada file default.aspx -> pilih set as start page ->
running (F5). Maka jika berhasil akan tampil data sebagai berikut :
17. Masih bermain di gridview untuk menampilkan data, untuk memberikan
paging klik pada gridview, kemudian lihat di properties, cari AllowPaging,
set AllowPaging menjadi TRUE

18
18. Kemnudian untuk membatasi setiap halamannya, silahkan tambahkan
PAGESIZE=”5” pada gridview berarti setiap halaman akan menampilkan
5 data.
19. Kemudian running kembali, maka tampilanya akan menjadi seperti
berikut :

19
20.Gimana gampangkan ???  . Masih semangat ?
21. Kita lanjutkan, nah sekarang kita, akan buat connction string dan
perintah untuk menyimpan data. Sekarang buka default.aspx.cs-nya.
Jangan lupa namespace di atasnya kasih seperti berikut
using System.Data.SqlClient;
using System.Data;
22. Tambahkan method untuk mendapatkan koneksi. Seperti di bawah :
protected void getConnection()
{
string conStr = "Data Source=SONY-PCALIANDA;Initial
Catalog=pegawaiDB;Integrated Security=True";
conn = new SqlConnection(conStr);
conn.Open();
}
23. Untuk mengisi constr lakukan langkah-langkah seperti dibawah :
24. Setelah koneksi selesai dibuat lanjutkan dengan membuat method
SimpanData, seperti dibawah :
protected void simpanData()
{
getConnection();
SqlCommand cmd = new SqlCommand();
cmd.Connection = conn;
cmd.CommandType = CommandType.StoredProcedure;

20
cmd.CommandText = "SP_INSERT_PEGAWAI";
cmd.Parameters.AddWithValue("@nip", uiTxtNIP.Text);
cmd.Parameters.AddWithValue("@nama", uiTXtNama.Text);
cmd.Parameters.AddWithValue("@tahunMasuk", uiTxtTahunMasuk.Text);
try
{
cmd.ExecuteNonQuery();
uiGridviewPegawai.DataBind();
}
catch (Exception ex)
{
throw ex;
}
}
Penjelasan :
- Getconnection : memanggil method Getconnection untuk
mengkoneksikan aplikasi ke database.
- Ada 4 command yang utama ketika menjalankan kueri / perintah
yaitu : cmd.connection untuk mengambil constring dalam keadaan
ckoneksi terbuka, cmd.commandtype untuk medekalarasikan
perintah yang kita gunakan apakah menggunakan object, query atau
stored procedure atau yang lainnya, cmd.commandtext untuk
memanggil fungsi / perintah / stored procedure yang sudah dibuat,
biasanya nama ini harus sama dengan nama fungsinya,
cmd.parameters.addwithvalue untuk menambhakan parameter jika
ada.
25.Kemudian kembali ke default.aspx, kemudian double klik button simpan,
nanti omatis akan masuk ke default.aspx.cs –nya dan tambahkan
perintah -> simpanData() pada saat button simpan di klik.
protected void uiBtnSimpan_Click(object sender, EventArgs e)
{
simpanData();
}
Kemudian buat juga method untuk mereset data dan panggil ketika data
telah tersimpan dan ketika button reset diklik
protected void resetData()
{
uiTXtNama.Text = "";
uiTXtNama.Text = "";
uiTxtTahunMasuk.Text = "";
}
protected void uiBtnReset_Click(object sender, EventArgs e)
{
resetData();

21
}
26. Setelah menampilkan dan menyimpan data selesai kita lanjut ke update
dan delete data. Caranya sangat sederhana karena kita idbantu dengan
,Net framework 3.5
27. Kembali ke default.aspx, klik di gridviewnya , klik tanda panah kecil,
kemudian edit coloumn . tambahkan commandfield, edit dan delete
seperti berikut :
28.Tambahkan perintah update dan delete di bawah selectCommand
seperti berikut dan jangan lupa juga untuk menambahkan parameter
yang digunakan pada command update / delete di bawahnya
DeleteCommand seperti berikut :

22
29.Silahkan kembali running dan coba lakukan UPDATE dan DELETE.
30.cukup sampai itu tentang CRUD sederhana menggunakan bawaannya
.NetFramework, untuk masuk ke best practice-nya, dan menambahkan
validasi lainnya kita akan bahas di pertemuan ke 3 “CUSTOM CRUD SESUAI
BEST PRACTICE MICROSOFT”

23
C.Menerapkan “Best Practice CRUD” Sesuai “Best
Practice Microsoft”
Untuk pembelajaran kedua kita akan membuat program CRUD yang
lebih rapi, lebih terkonsep dan lebih tepat karena standard pengerjaan
diambil sesuai modul dari MSDN atau Microsoft.
1. Buka Microsoft Visual Studio -> New Project -> Pilih ASP.Net Web
Application -> Beri nama project “StandardCRUD” -> Tentukan
destination folder sebagai penyimpanan project -> klik OK. Kita
memulai dengan project baru dengan asumsi masih menggunakan
database pegawai dan satu table yang sudah dibuat sebelumnya.
2. Jida sudah ter-create, Buat 3 folder yaitu folder “BusinessLogic”,
“DataAccess” dan “UserInterface”, dengan cara klik kanan pada
project di solution explorer -> Add -> New Folder
Penjelasan Singkat : folder “BusinessLogic” digunakan untuk
meyimpan perintah-perintah yang menjalankan query atau proses
untuk aplikasi tersebut. Kemudian folder “DataAccess” digunakan
untuk menyetting connection string, query dan semua yang ada
hubungannya dengan database. Folder yang ketiga yaitu

24
“UserInterface”. Folder ini digunakan untuk memanggil semua
perintah yang telah dibuat di BusinessLogic dan tentunya
menerapkan beberapa validasi yang dibutuhkan ketika berhubungan
dengan UI.
3. Di folder UserInteface, klik kanan -> Add -> New Item -> pilih Master
Page -> berikan nama SiteMaster.master -> klik Add
Penjelasan singkat : Site Master ini digunakan sebagai site utama /
site induk / page induk yang akan membungkus site lain di dalamnya.
Atau kalau yang sudah tidak asing dengan pemograman desktop, site
master ini sama halnya dengan MDI parent.
3 folder baru

25
4. Di folder UserInterface tambahkan files css, klik kanan -> add -> new
item -> pilih file style sheet -> berikan nama style.css -> klik add
5. Di file style.css tambahkan script berikut :
.cssMain
{
margin:auto;

26
width:1200px;
}
.cssHeader
{
height:150px;
}
.cssMenuKiri
{
float :left;
width: 30%;
height:400px;
background-color:#B8CBE2;
}
.cssMenuKanan
{
float:left;
width:70%;
background-color:#B5C7DE;
height:400px;
background-color:#CCCCFF;
}
.cssFooter
{
margin-top:400px;
width:100%;
height:50px;
}
6. Kembali ke file SiteMaster.Master , drag file style.css di bawah tag
<head> -> tambahkan script berikut di bawah tag
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
<div class="cssMain">
<div class="cssHeader">
</div>
<div class="cssMenuKiri">
</div>
<div class="cssMenuKanan">
</div>
<div class="cssFooter">
</div>
</div>

27
7. Di antara tag div menu kiri , dari toolbox -> expand navigation -> drag
menu
8. Edit item pada menu -> klik tanda panah kecil di menu -> klik link edit
menu items
Klik design jika sudah
menambahkan menu

28
9. Add root item dengan nama “Pegawai” -> add child item dengan
nama “View Pegawai” , “Detail Pegawai” , “Reporting Pegawai” -> klik
OK.
10.Masih di folder user interface, klik kanan -> add -> new item -> pilih
web form -> berikan nama “ViewPegawai.aspx” -> klik add

29
11.Jika sudah menambahkan navigasi, klik kanan pada file
ViewPegawai.aspx -> pilih set as start page
12. Diantara div menu kanan tambahkan script berikut :
<asp:ContentPlaceHolder ID="contentKanan" runat="server">
</asp:ContentPlaceHolder>
Kembali klik
source

30
Penjelasan singkat : script di atas adalah sebagai iframe untuk
webform yang akan dipanggil
13. Sekarang buka file ViewPegawai.aspx -> ketikkan “Masterpagefile=”
nanti akan tersuggest nama master page yang dituju, seperti berikut :
14. Kemudian delete bagian yang diblok seperti di bawah :

31
15.Kemudian tambahkan script seperti berikut :
<asp:Content ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ContentPlaceHolderID="contentKanan" runat="server">
</asp:Content>
Tujuan ditambahnkannya script di atas adalah agar file
ViewPegawai.aspx memiliki header dan kerangka / design yang sama
dengan SiteMaster.master. Artinya, nantinya setiap web form akan
kita tambahkan script seperti di atas, agar setiap ganti page / ganti
form, header dan kerangka master akan tetap terbawa. Dan perlu
diketahui, ContentPlaceHolderID=”head” dan
ContentPlaceHolderID=”contentKanan” itu akan tersuggest secara
sendirinya , karena content place holder tersebut diambil dari
SiteMaster.master
16.Diantara tag <asp:content ContentPlaceHolderID=”contentKanan”>
tambahkan table, dan control berupa 3 textbox untuk NIP,Nama dan
Tahun masuk dan 2 button untuk simpan dan reset serta satu label
untuk informasi. Copy dan Paste script di bawah :
<table width="100%">
<tr>
<td>

32
 NIP
</td>
<td>
 :
</td>
<td>
 <asp:TextBox ID="uiTxtNIP"
runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
 NAMA
</td>
<td>
 :
</td>
<td>
 <asp:TextBox ID="uiTXtNama"
</td>
</tr>
<tr>
<td>
 TAHUN MASUK
</td>
<td>
 :
</td>
<td>
 <asp:TextBox ID="uiTxtTahunMasuk"
</td>
</tr>
<tr>
<td>
 
</td>
<td>
 
</td>
<td>
 <asp:Button ID="uiBtnCari"
runat="server" Text="Cari" />
</td>
</tr>
<tr>
<td>
 
</td>
<td>
 
</td>
<td>
 
<asp:GridView ID="uiGvPegawai" runat="server"
AutoGenerateColumns="False"
DataKeyNames="NIP" EnableModelValidation="True">
<Columns>
<asp:TemplateField HeaderText="No.">
<ItemTemplate>

33
<%#Container.DataItemIndex+1 %>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="NIP" HeaderText="NIP"
ReadOnly="True"
/>
<asp:BoundField DataField="Nama"
HeaderText="Nama"/>
<asp:BoundField DataField="Tahun_Masuk"
HeaderText="Tahun Masuk"
/>
</Columns>
</asp:GridView>
</td>
</tr>
</table>
Maka klik design untuk melihat tampilannya, akan menjadi seperti
berikut :
17.Kembali ke data file SiteMaster.Master dan lihat dalam bentuk
design. Pada menu klik kanan dan edit menu items

34
18. Klik pada child menu View Pegawai -> klik NavigateURL pada properties ->
arahkan pada folder UserInterface -> pilih ViewPegawai.aspx -> klik OK .
Perhatikan langkah-langkah gambar di bawah :
19.Klik kanan pada file ViewPegawai.aspx di solution explorer dan pilih
set as start page dan coba running (F5), maka hasilnya akan seperti
berikut :
Langkah 1
Langkah 2
Langkah 3 Langkah 4
Langkah 5

35
20. Jika sudah seperti tampilan di atas, kita akan buat dataset di folder
data access, dataset inilah yang nantinya yang menghubungkan
aplikasi terhadap database. Klik kanan pada folder DataAccess -> Add
-> New Items -> pilih Data -> pilih DataSet -> beri nama
“dsPegawai.cs” -> klik Add

36
21.Kemudian tambahkan tableadapter dari toolbox -> buka toolbox ->
klik & drag table adapater -> klik button New Connection -> pilih
server name untuk terhubung ke database SQL server -> pilih
database pegawai yang sudah dibuat sebelumnya -> klik OK -> klik
button next 3x -> klik query builder masukkan query seperti berikut :
SELECT NIP, Nama, Tahun_Masuk
FROM MST_PEGAWAI
WHERE (NIP = @nip OR
@nip = '' OR
@nip IS NULL) AND (Nama LIKE '%' + @nama + '%' OR
@nama = '' OR
@nama IS NULL) AND (Tahun_Masuk = @tahun OR
@tahun = '' OR
@tahun IS NULL)
Penjelasan singkat : Tujuan dari query di atas adalah untuk
menampilkan data berdasarkan NIP atau yang mengandung unsur
Nama yang ada di table atau berdasarkan Tahun Masuk bahkan jika
semua where condition tidak diisi sekalipun data akan tetap tampil
secara keseluruhan.
Klik next -> method name berikan nama
“FillPegawaiBySearchCriteria” -> klik next -> klik finish.
22. Buka ViewPegawai.aspx.cs tambahkan method GetDataPegawai
seperti berikut :

37
23.Kemudian panggil method GetDataPegawai saat event Page_Load
dan event uiBtnCari_Click. Perhatikan gambar berikut :
Penjelasan “PENTING !!!” : kenapa method “GetDataPegawai” dipanggil ketika
event “PageLoad”. Itu agar, ketika page / halaman “ViewPegawai” dipanggil
maka langsung akan menampilkan data keseluruhan dari database. Lantas
Parameter untuk
melakukan pencarian
Datatable
untuk
menampu
ng data
dari table
adapter
Table adapter untuk
mengambil data dari table di
database
Untuk
mengeksesku
si method
berisi kueri
untuk
menampilkan
data
Untuk
menampilkan
data ke
gridview
Method
GetDataPegawai

38
kenapa method “GetDataPegwai” ada diantara kondisi “!isposback”. Seperti
diketahui bahwa dalam aplikasi berbasis website, setiap pemanggilan page itu
dilakukan refresh / reload / postback page secara keseluruhan. Mungkin dalam
kasus ini tidak akan terlihat perbedaaan penggunaan !Ispostback / tidak,
karena default halaman untuk “ViewPegawai.aspx” itu tetap menampilkan
seluruh data pegawai baik mau di refresh atau tidak. Tapi kita analogikan jika
yang dipanggil itu method “CallX” yang berisi “ x = 1+2;” namun di public kita
deklarasikan “int x=1;” dan di “Page_Load” dipanggil method “CallX” maka
hasilnya “nilai x tidak akan menjadi 3” melainkan “nilai x = 1” itu dikarenakan
ASP.Net me-refresh semua halaman termasuk content di dalamnya termasuk
nilai X yang akan dikembalikan ke nilai defaulnta yaitu 1. Beda halnya ketika
dalam pemanggilnya , method “CallX” diapit kondisi “!IsPostBack” maka
ASP.Net hanya akan merefresh halaman yang tidak ada dalam kondisi
“!IsPostBack” . Jadi yang ada dalam kondisi “!IsPostBack” tidak akan ikut
direfresh.
24. Kemudian kita akan tambahkan paging namun sedikit berbeda
penambahan paging dengan CRUD dibantu .Net Framework.
Buka file ViewPegawai.aspx -> klik gridview -> pada properties set
AllowPaging menjadi TRUE -> di dalam, tag “<asp:gridview”
tambahkan PageSize=”5” ini untuk membatasi jumlah data per-
halaman -> kembali ke properties -> buka tab event pada properties -
> cari event “PageIndexChanging” -> double klik pada event tersebut
-> tambahkan script berikut :
uiGvPegawai.PageIndex = e.NewPageIndex;
GetDataPegawai(uiTxtNIP.Text, uiTXtNama.Text, uiTxtTahunMasuk.Text);
Script tersebut di baris pertama untuk meng-handling event ketika
pindah page. Kemudian di baris kedua untuk memanggil data setelah
pindah halaman. Kemudian running kembali untuk mencoba paging.

39
25. Setelah berhasil membuat halaman View Pegawai , selanjutnya kita
akan menambahkan web form Detail Pegawai.
Klik kanan di folder UserInterface -> pilih add -> add new items ->
pilih web form -> beri nama “DetailPegawai.aspx” -> klik add
26. Seperti biasa hapus bagian yang di blok seperti gambar di bawah :

40
27. Kemudian tambhakan master page file pada tag paling atas
28. Kemudian tambahkan script berikut :
<asp:Content ContentPlaceHolderID="head" runat="server"></asp:Content>
<asp:Content ContentPlaceHolderID="contentKanan" runat="server">
<table>
<tr>
<td>
 NIP
</td>
<td>
 :
</td>
<td>
 <asp:TextBox ID="uiTxtNIP"
</td>
</tr>
<tr>
<td>
 NAMA
</td>
<td>
 :
</td>
<td>
 <asp:TextBox ID="uiTXtNama"
</td>
</tr>
<tr>
<td>
 TAHUN MASUK
</td>

41
<td>
 :
</td>
<td>
 <asp:TextBox ID="uiTxtTahunMasuk"
</td>
</tr>
<tr>
<td>
 
</td>
<td>
 
</td>
<td>
 <asp:Button ID="uiBtnSimpan" runat="server"
Text="Simpan"/>
  <asp:Button ID="uiBtnREset" runat="server"
Text="Reset"/>
</td>
</tr>
</table>
</asp:Content>
29. Buka file DetailPegawai.aspx.cs , Kemudian tambahkan method
SimpanDataPegawai seperti berikut :
30. Masih di file DetailPegawai.aspx.cs, tambahkan juga method
UbahDataPegawai dan HapusDataPegawai, seperti berikut :

42
31. Sekarang kita akan tambahkan query untuk menampilkan data ke
control ketika akan mengubah atau menghapus data. Buka dataset
dsPegawai.xsd -> klik kanan di MST_PEGAWAITableAdapter -> add
query -> klik button next 2x -> klik button query builder ->
tambahkan query berikut : -> “SELECT * FROM MST_PEGAWAI

43
WHERE NIP=@NIP” -> Klik button OK -> klik button next -> berikan
nama method name “FillPegawaiByNIP” -> klik next -> klik finish
32. Kembali ke file DetailPegawai.aspx.cs , tambahkan method
“GetDataPegawaiToControl” untuk memanggil query yang sudah kita
buat di langkah 31. Buat seperti digambar berikut :
33. Buka file ViewPegawai.aspx, tambahkan link button edit dan hapus
pada gridview dengan cara : klik pada gridview -> klik tanda panah
kecil pada gridview -> edit column -> tambahkan “ButtonField”
dengan double klik atau klik button Add -> pada properties untuk text
beri nama “Edit” untuk CommandName berinama “editDataPegawai”
-> lakukan hal yang sama ketika menambahkan buttonfield untuk
hapus -> klik OK

44
34. Karena kita akan “melempar” nilai NIP ketika mengklik link button
edit / hapus, maka field NIP di gridview perlu dikonversi ke dalam
bentuk label agar dapat dipanggil di UI. Ikuti langkah berikut :
Klik pada gridview -> klik edit column -> pada bagian selected fields,
klik NIP -> klik button bertuliskan “Convert this into templatefield”
35. Setelah itu beri nama untuk label NIP tadi menjadi “uiLblNIP”
1. Klik
NIP
2.Klik link ini

45
36. Kemudian di properties gridview, buka tab untuk event gridview ->
cari evet “RowCommand” -> double klik pada event itu
37. Pada evet RowCommand di file ViewPegawai.aspx.cs , tambahkan
script untuk melempar query string nilai dari NIP seperti berikut :
Ubah namanya
menjadi uiLblNIP
Double klik
disni

46
protected void uiGvPegawai_RowCommand(object sender, GridViewCommandEventArgs
e)
{
if (e.CommandName == "editDataPegawai")
{
Label uiLblNIP =
(Label)uiGvPegawai.Rows[int.Parse(e.CommandArgument.ToString())].FindControl("uiLblNIP
");
string nip = uiLblNIP.Text;
string state = "edit";
Response.Redirect(string.Format("DetailPegawai.aspx?state={0}&nip={1}",state,nip));
}
else if (e.CommandName == "hapusDataPegawai")
{
Label uiLblNIP =
(Label)uiGvPegawai.Rows[int.Parse(e.CommandArgument.ToString())].FindControl("uiLblNIP
");
string nip = uiLblNIP.Text;
string state = "hapus";
Response.Redirect(string.Format("DetailPegawai.aspx?state={0}&nip={1}", state, nip));
}
}
38. Karena nilai NIP yang dilempar akan di tangkap di file
DetailPegawai.aspx.cs untuk ditampilkan di control, maka tambahkan
script berikut di event Page_Load pad file DetailPegawai.aspx.cs
untuk menangkap query string dari file ViewPegawai.aspx.cs :
private string act
{
get { return ViewState["act"].ToString(); }
set { ViewState["act"] = value; }
}
protected void Page_Load(object sender, EventArgs e)
{
string nip = Request.QueryString["nip"];
string state = Request.QueryString["state"];
if (!IsPostBack)
{
if (!string.IsNullOrEmpty(nip) && state == "edit")
{
act = "ubah";
GetDataPegawaiToControl(nip);
uiTxtNIP.Enabled = false;
uiBtnREset.Visible = false;
uiBtnSimpan.Text = "Ubah";
}
else if (!string.IsNullOrEmpty(nip) && state == "hapus")
{
act = "hapus";
GetDataPegawaiToControl(nip);
uiTxtNIP.Enabled = false;
uiTXtNama.Enabled = false;
uiTxtTahunMasuk.Enabled = false;

47
uiBtnREset.Visible = false;
uiBtnSimpan.Text = "Hapus";
}
else
{
act = "tambah";
}
}
}
39. Kemudian di event button uiBtnSimpan_Click tambahkan script dan
kondisi seperti berikut :
protected void uiBtnSimpan_Click(object sender, EventArgs e)
{
if (act == "tambah")
{
SimpanDataPegawai(uiTxtNIP.Text, uiTXtNama.Text,
uiTxtTahunMasuk.Text);
}
else if (act == "ubah")
{
UbahDataPegawai(uiTxtNIP.Text, uiTXtNama.Text,
uiTxtTahunMasuk.Text);
Response.Redirect("ViewPegawai.aspx");
}
else
{
HapusDataPegawai(uiTxtNIP.Text);
Response.Redirect("ViewPegawai.aspx");
}
}
40.Selanjutnya panggil file DetailPegawai.aspx ketika memilih menu
Detail Pegawai, ikuti langkah-langkah berikut :
Buka file SiteMaster.Master -> klik tab design -> klik menu -> klik
tanda panah kecil pada menu -> klik edit menu items -> spand menu
pegawai -> klik menu Detail Pegawai -> klik folder UserInterface ->
pilih DetailPegawai.aspx -> klik OK

48

Belajar kilat asp.net

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Similar to Belajar kilat asp.net

Similar to Belajar kilat asp.net (20)

Recently uploaded

Recently uploaded (20)

Belajar kilat asp.net