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; background-color:#214183; }


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-PC\\ALIANDA;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; 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; background-color:#214183; }

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" runat="server"></asp:TextBox> </td> </tr> <tr> <td> TAHUN MASUK </td> <td> : </td> <td> <asp:TextBox ID="uiTxtTahunMasuk" runat="server"></asp:TextBox> </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" runat="server"></asp:TextBox> </td> </tr> <tr> <td> NAMA </td> <td> : </td> <td> <asp:TextBox ID="uiTXtNama" runat="server"></asp:TextBox> </td> </tr> <tr> <td> TAHUN MASUK </td>


41

<td> : </td> <td> <asp:TextBox ID="uiTxtTahunMasuk" runat="server"></asp:TextBox> </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

Education

Transcript of Belajar kilat asp.net