Membuat Web Form Microsoft ASP .NETAchmad BasukiBandung, 27 Nop 2004

Tujuan

Membuat Web Form Menggunakan Server Controls

Apa Web Form Berekstensi .aspx Mempunyai page attributes Mempunyai body attributes Mempunyai form attributes

Page Attributes Language Codebehind Smart Navigation

Body Attributes Page layout

Flow Layout Grid Layout

Form Attributes Method

Get Post

Runat

Membuat Web Form Aplikasi baru ASP .NET membuat defaut

Web From yaitu WebForm1.aspx Membuat Web Form yang lain dalam aplikasi dapat dilakukan dengan click kanan pada project dan pilih add Item atau pilih add Web From ASP .NET mampu meng-upgrade HTML yang sudah ada menjadi Web Form

Project 3

Buka Start Page dengan menutup semua project yang sedang aktif. Pilih New Project. Pilih ASP .NET Project dan tulis direktorynya di http://localhost/MyProject2 Setelah muncul halaman project, perhatikan ada satu file aspx (Web Form) yaitu WebForm1.aspx Ubah nama WebForm1.aspx menjadi default.aspx Drag dan drop Label dari toolbox, ketikkan pada property text, Selamat Datang Clik kanan pada form pilih view in Browser.

Menambahkan Web Form Baru dalam Aplikasi Web ASP.NET

Click kanan pada project dan pilih Add Item Pilih Web Form dan beri nama WebForm2.aspx, tekan OK Perhatikan pada Solution Explorer akan ditambahkan WebForm2.aspx dan halaman editor menjadi kosong yang menunjuk pada design dari WebForm2.aspx

Meng-upgrade HTML Menjadi Web From

Buatlah file HTML dengan menggunakan Microsoft Frontpage atau editor yang lain. Ketikkan HTML tag berikut: Anda telah membuat HTML Click disini untuk membuka YAHOO

Simpan dalam file \My Documents\buka.html

Click kanan pada project dan pilih Add Existing Item, click all Files (*.*). Pilih file HTML yang sudah dibuat, file HTML My Documents\buka.html dan tekan Open Perhatikan pada Solution Explorer, dalam project ditambahkan buka.html Rename menjadi buka.aspx dan akan ada konfirmasi apakah akan diubah menjadi Web Form, pilih Yes. Halaman HTML sudah menjadi Web Form. Hal ini yang dikatakan bahwa ASP .NET masih bersinergi dengan ASP.

Server Control Apa Server Control Macam-macam Server control Menyimpan View State HTML Server Control Web Server Control Memilih Appropriate Control

Apa Server Control

Runat=server

Event terjadi di server View state tersimpan

Mempunyai fungsional built-in Model object umum

Semua mempunyai attribute Id dan Text

HTML dibuat secara spesifik sesuai dengan browsernya

Macam-macam Server Control HTML server control Web server control

Intrinsic control Validation control Rich control List-bound control Internet Explorer web control

Menyimpan View State Hidden ViewState control of name-value

pair stored in Web Form

Secara default, adjustable pada Web

Form dan control level

Konversi HTML Control Ke Server ControlHTML control bekerja di client, sehingga untuk tidak mempunyai event di server Untuk mengubah menjadi server control maka perlu ditambahkan runat=server dengan dua cara:

Menuliskan secara langsung ke script HTMLnya pada editor HTML atau Click kanan control yang dimaksud, dan pilih Run at server

HTML Server Control

Berdasarkan pada elemen-elemen HTML Berada pada namespace System.Web.UI.HTMLControls

Web Server Control

Berada pada namespace System.Web.UI.Web Controls

Control Syntax Text to display HTML hasil setelah generate

Perbedaan HTML Server Control dan Web Server Control

HTML Server Control Model pemrograman HTML Bekerja dalam HTML yang sudah ada Akan berinteraksi dengan client-script dan serverscript Membutuhkan bandwith yang terbatas

Web Server Control Model pemrograman Visual Basic atau C# Menulis program yang dapat digunakan oleh semua browser Bila dibutuhkan fungsifungsi yang spesifik seperti kalender Membutuhkan bandwith yang besar

Project 4Menggunakan Web/HTML Server Control

Buka Microsoft Visual Studio .NET dan buat project baru Pilih ASP .NET Web Application dan ketikkan direktorynya di http://localhost/MyProject4 Click WebForm1.aspx Pada toolbox, pilih Web Form: kemudian drag and drop komponen-komponen Label, TextBox, Calendar dan Button. Pada Button isi properti teks dengan Web Button Pada toolbox, pilih HTML: kemudian pilih komponen Button, dan isi properti text dengan HTML Button Letakkan sesuai dengan tampilan berikut:

Pilih view HTML dan perhatikan hasilnya seperti gambar sebelah kanan. Perintah untuk Web server control dimulai dengan tag