lesson 4 membuat web form microsoft asp net
TRANSCRIPT
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