Sintaks ASP.NET. Objektif:

Sintaks ASP.NET Objektif: . Mengerti Konsep HT.MLControl dan Web Control

. .

Membuat Aplikasi dengan HTML Control dan Web Control Membuat Registrasi dengan HTML Control dan Web Control

r------if--

__n,..

..

3.1. HTML Server Control I-ffML server control adalah elemen - elemen I-ffML yang dapat diproses ole server. Pemrosesan ini dapat muncul sebelum mengirim webpage kepada user atoo mengirim web-page tersebut kembali pada server. Scmua HTML server control (atau dikenal sebagai I-ffML Control) terkait

elemen - clemen I-ITML. Dan juga properti dari I-ITML control sarna

kepada

seperti elemen HTML. Secara normal tag I-ITML seperti , , dan tidak diproses oleh server, tetapi langsung dikirimkan ke browser. Tujuan dari pemrosesan di server adalal1untuk dapat melakukan data binding (akses data), dapat diprograrn untuk merespon events, dan terutama control dapat dikompilasi sehingga akses terhadap control dapat lebih cepat. Untuk dapat mengubah I-ITMLControl menjadi HTML Server Control anda dapat mcnarnbahkan atribut runat = "server ". Selain itu anda dapat juga menarnbahkan atribut Id agar control dapat diprogram. Contohnya adalah sebagai berikut:
type

= "'text"

id

= "nama i.npuL"

:;i.ze

~ ''''40''

cunat

= "soever">

HTML Server Control dibagi menjadi dua kategori yaitu input dan container. I-ITML Sen'er Input Control tidak hams menggunakan tag penutup (lebih baik menggunakan tag penutup "f') dan memiliki atribut Name, Value, Type untuk dapat diprogram. I-ITML Server Container Control hams menggunakan tag penutup dan lidak memiliki atribut Name, Value,

Type

schingga untuk dapat mengaksesnya diperlukan properti InnerHtml, untuk karakter

spesial

diperlakukan sebagai

bagian dari

I-ITML dan tidak

ditampilkan di output akhir. Pada tabel 3.1 dan 3.2 menjelaskan tag I-ITML Server Control.

22

:..10...

~~

.'",.ti';.;:. ., . . .

,:"L... ;.

1..' ,l.L

; ,:....

;..-, . " ..: . ~,-.~ 1."_. " .: ",

,~.

Tabel 3.1 HTML Server Control IITML Control

Tag

HlmlAnchor



Hl..mlBullon

HlmlForm



Hlmllmage



Htmll npu18ullon



HlmlInpulButlon



HtmllnputBullon


HlmllnputChcckBox

mnat="server">

--------.-.-.------.------------------.

HtmlInpulFilc ------_.--------Ii tmlInputHiddcn



HlmllnputImagc



HlmiinpulRadioBullon


Hl..mlInpulTcxl

runat="scrvcr">



Ht..mIInputTcX1

<select runal="servcr">

HlmISclccl



HlmiTable



HlmlTablcCcli



Hl..mITablcCcll



Ht..mITabieRow

<br /> <br /> HlmITcxlArca<br /> <br /> Tabe13.2 Tag HTML Server Control Tag HTML <input><br /> <br /> Kategori Inpul<br /> <br /> HTML Server Control Hl..mlInputBullon<br /> <br /> Keterangan <inpul<br /> <br /> I<br /> <br /> lypc=bullon<br /> <br /> submit Ireset><br /> <br /> I<br /> <br /> Ht..mlInputChcckBox<br /> <br /> <input type=chcckbox><br /> <br /> Ht..mlInpulFilc<br /> <br /> <input typc=filc><br /> <br /> HtmlJnputHidden<br /> <br /> <input l)'Pe=hidden><br /> <br /> HlJr.!I:tputImagc<br /> <br /> <input type=imagc><br /> <br /> HtmI InputRadioB utlon<br /> <br /> <input lype=radio><br /> <br /> HlmlIl1pulTcxt<br /> <br /> <input typc=lcxl><br /> <br /> 23<br /> <br /> ",,:"-,;1:,__><br /> <br /> V' 1.7.:~'I.,<br /> <br /> ..;.:& _~I_~'''''~ov!<br /> <br /> i...!\01...~..~;.<br /> <br /> .'_1_-'<br /> <br /> ~...'-"~<br /> <br /> '<br /> <br /> <img><br /> <br /> Input<br /> <br /> HtmlImage<br /> <br /> Image<br /> <br /> <textaren><br /> <br /> Input<br /> <br /> HlmlTextArea<br /> <br /> Input<br /> <br /> text<br /> <br /> dcngan<br /> <br /> Multiline <a><br /> <br /> Container<br /> <br /> HlmlAnchor<br /> <br /> Anchor<br /> <br /> <button><br /> <br /> Container<br /> <br /> Hl1nlBuUon<br /> <br /> Format output dapat dicustom (hanya digwtakan di IE 4.0 keatas)<br /> <br /> <form><br /> <br /> Container<br /> <br /> HlmlForm<br /> <br /> Maksimal HlmlForm control per halaman.<br /> <br /> <table><br /> <br /> Container<br /> <br /> HlmlTable<br /> <br /> Tabcl yang berisi row dan cell<br /> <br /> <td><br /> <br /> Container<br /> <br /> HtmlTablcCell<br /> <br /> Table cell<br /> <br /> <tit><br /> <br /> Container<br /> <br /> HtmlTablcCell<br /> <br /> Table Header cell<br /> <br /> <tr><br /> <br /> Container<br /> <br /> Hl1nlTablcRow<br /> <br /> Table Row<br /> <br /> <select><br /> <br /> Container<br /> <br /> HtmlSelcct<br /> <br /> Menu Pull-down<br /> <br /> 3.2. Web Control ASP.NET telah menyediakan perluasan kemampuan yang melebihi HTML Server control dengan web server control. Web Server Control atau disebut juga ASP Server Control merupakan salah satu fasilitas yang sangat membantu dalam melakukan pemrograman aplikasi web Anda tidak akan mengerti kenapa kontrol form web (seperti diketahui dalam web control) tetap ada dan anda bisa mendapatkan elemen-elemen HfML yang dapat diproses ke dalam server. Proses ini dapat teJjadi sebelum pengiriman halaman web kepada penggtma dan atau ketika halaman dikirim kembali ke server. Tidak seperti kontrol-kontrol HfML, web control tidak selalu memetakan secara berkala ke dalam elemen HfML, juga sebuah properti web control tidak mirip ke penampilan atribut dari elemen HIML. Web control didefinisikan dalam namespace System. WebControls.<br /> <br /> Web. Ui.<br /> <br /> Form web mempunyai sedikit perbedaan atUfan atau<br /> <br /> ketetapan dari kontrol-kontrol HfML. Kontrol web semuanya mempunyai aturan awalan di depan namespace ASP setiap kontrol dalam names pace 24<br /> <br /> --- -- --.-<br /> <br /> I..."~,,,,,,~~'.,,~,,_,,,,-<br /> <br /> '.;':'.'<br /> <br /> System.<br /> <br /> Web. Ui. WebControls.<br /> <br /> ---.------<br /> <br /> 1.',_,<br /> <br /> ~_.,<br /> <br /> S~perti HTML<br /> <br /> membutuhkan pemasukan alribut RUNAT="Server"<br /> <br /> control,<br /> <br /> setiap<br /> <br /> tag<br /> <br /> dalam namespacenya.<br /> <br /> Andajuga akan memberikanseti.:lpID yang unik dari atribut web control,jadi demikian anda mempunyai jalan untuk mereferensikan suatu kendali dalam kode server-side. Anda dapat mensel atribut untuk web server untuk propcrti dari kontrol dan<br /> <br /> pengcndalian<br /> <br /> kejadian-kejadian.<br /> <br /> Pengaturan<br /> <br /> atribut<br /> <br /> seperti<br /> <br /> mengkonfigurasi bagaimana suatu kontrol akan terlihat dan berjalan seperti e1emen I-ITML dalam sebuah halaman web. Seperti dalam mengendalikan kejadian-kejadian, anda menilai kejadian seperti suatu atribut dalam sebuah web control. Ini mcmberikan anda kemampuan untuk memetakan kejadiankejadian dalam web control ke prosedur yang akan memproses kcjadian terscbut. Sebagai contoh, ketika bekerja dengan ASP: kontrol ImageButton, anda dapat menambahkan suatu atribut OnServerClickuntuk memetakan ke daIam sebuah fungsi yang dipanggil ketika pengguna mengklik tombol. Ketika bekeIja dengan web control, anda dapat menemukan bentuk dasar ketika anda sebelumnya bekeIja dengan dolllmen XML. Kebutuhan untuk penotasian lebih sarna dengan membangun dengan baik bentuk XML. Untuk semua kendaIi server HTML, anda seharusnya lebih yak in bahwa tagtag HTML lebih tertutup dan bersih. Pada tabel 3.3 menunjukkan nama class dari web control. Tabel3.3 Class Web Control Nama Class<br /> <br /> Keterangan<br /> <br /> AdRotator<br /> <br /> Untuk men-display rotating banner<br /> <br /> Button<br /> <br /> Men-generate tombol submit<br /> <br /> Calendar<br /> <br /> MenampiIkan kalendcr di web forms<br /> <br /> CheckBox<br /> <br /> MenampiIkan checkbox di web forms<br /> <br /> CheckBoxList<br /> <br /> Menampilkan group checkbox di web forms<br /> <br /> Compa:-cValidator<br /> <br /> Mcmvalidasi input user dcngan mcmbandingkannya dcngan nilai lain<br /> <br /> Custom Validator<br /> <br /> Memvalidasi input user dcngan menggunakan algoritma pilihan anda<br /> <br /> 25<br /> <br /> .<br /> <br /> .-:..:<br /> <br /> ,..~'.;:N4,..:...<br /> <br /> .<br /> <br /> ':~';II<br /> <br /> ;".\"!_,: ;...'_.. .1,'<br /> <br /> '....<br /> <br /> ).:I''''.!!-''t..~:~~,:.-<br /> <br /> ..i~'.,,1"~:.'..L..,,--,.-.<br /> <br /> DataGrid<br /> <br /> Menampilkan data di datagrid (tabular format)<br /> <br /> DataList<br /> <br /> Menampilkan daftar item dengan single kolom atau multi kolom<br /> <br /> DropDownLisl<br /> <br /> Men-generale daftar drop-down HTML<br /> <br /> HyperLink<br /> <br /> Men-generate hyperlink<br /> <br /> Image<br /> <br /> Mcnampilkan gambar di web form<br /> <br /> ImageButton<br /> <br /> Menampilkan gambae tombol button<br /> <br /> Label .------------.----. LillkBuUon<br /> <br /> Men-generate text field yang d.'pat diprogram<br /> <br /> _______.___._ _..... -_.___ _.__....._._._________..._______.._._._.. n._._____<br /> <br /> Men-generate hyperlinks yang post back ke server<br /> <br /> ListBox<br /> <br /> Men-generate HTML list box<br /> <br /> Literal<br /> <br /> Men-generate literal text di web fom1<br /> <br /> Panel<br /> <br /> Mcmbuat group daei control-control yang ada<br /> <br /> RadioButton<br /> <br /> Menampilkan radio button di web form<br /> <br /> RadioButtonList<br /> <br /> Menampilkan danae group eheck box<br /> <br /> RangeValidator<br /> <br /> Memastikan input user dengan nilai range yang dapat anda tcntukan<br /> <br /> .RegularExprcssionValidator<br /> <br /> Memvalidasi input user dengan regular expression<br /> <br /> Repealer<br /> <br /> Menampilkan item dalam simple list<br /> <br /> RequircdFieldValidator<br /> <br /> Memastikan input field tidak kosong<br /> <br /> Table<br /> <br /> Men-generate tabel HTML<br /> <br /> TextBox<br /> <br /> Men-generate field input text<br /> <br /> ValidationSummary<br /> <br /> Menampilkan rangkuman dari error validasi<br /> <br /> Xml<br /> <br /> Menampilkan dok-umenXML dan dokumen yang digenerate dari XML dcngan menggunakan XSLT<br /> <br /> 26<br /> <br /> -.<br /> <br /> ',:..'-1.~;<br /> <br /> ...-....-----<br /> <br /> ...,<br /> <br /> ~.",;.. :..<br /> <br /> -..----------<br /> <br /> . ,"~'...I..:..'",~....<br /> <br /> w_,.'-'.~.<br /> <br /> .';'\!j,,:.:...t."'~".'..j..~'..j,;.<br /> <br /> LAB GUIDE 1 MEMBUA T APLIKASI HTML SERVER CONTROL<br /> <br /> Anda dapat membuat tombol - tombol untuk melakukan berbagai hal dalam form HTML anda, untuk mengirim sebuah form dalam Web server atau untuk mercset isi dari form yang anda buat. Anda dapat menyediakan kemampuan untuk mengirim sebuah form dengan membuat sebuall tombol penerimaan «input<br /> <br /> TYPE="submit"»<br /> <br /> pOOaform anda. Untuk mcreset form anda dapat<br /> <br /> dilakukan dcngan menambahkan control «input<br /> <br /> TYPE="reset"»<br /> <br /> yang akan<br /> <br /> menampilkan tombol reset pada form HTML anda.<br /> <br /> Jika anda ingin memproses server-side HTML Form , anda dapat menggunakan<br /> <br /> control<br /> <br /> HTMLlnpul.<br /> <br /> Untuk<br /> <br /> mcmastikan<br /> <br /> bahwa<br /> <br /> kontrol<br /> <br /> HTMLInput mengirim form anda pada server, aturlah attribute TYPE menjadi<br /> <br /> Submit. Anda dapat menulis kode yang hanya menjalankan halaman form anda untuk dikirim ke server dengan mengimplementasikan event OnServerC/ick. Disini kita akan menciptakan sebuah halaman login sederhana untuk mengetes dari password stasis. Kita akan membuat dua type dari kotak tex1, satu untuk nama dan satu lagi untuk password. Lalu kita juga akan membuat dua tombol yaitu "submit" untuk mengetes password dan juga «reset" untuk merubah data yang telah kita isi. Langkah-langkahnya adalah sebagai berikut : 1. Buka editor anda (notepad atau editplus) 2.<br /> <br /> Ketikkan... <HlMl> <IffiAD> <SCRIPTLANGUAGE="CII"RUNAT="Scrvcr"> void SubmitDtn_CIick(objcctSource,EvcnlJ\rgse) { if (inputPassword. Value<br /> <br /> = "Iepkom")(<br /> <br /> spanMcssage.InncrHtmI="Passwordbcnar."; } else ( spanMcssagc.InncrIItml="Password<br /> <br /> salah mohon diulang. ";<br /> <br /> ) void RcsctBtn_Click(objcct Source, EvcntArgs e) { inputNllme.Valuc = u; inputPassword.Valuc = "";<br /> <br /> 27<br /> <br /> ''''\''-';'':~.<;'J,...:''w''''':;'U~".:U:,,;.'.'L.::i._t;'_.I''.'L\U.;''':<br /> <br /> H_;...:.'-i...: i..Jo.L..~;_""\;,...!I.I<br /> <br /> ;...;...,!:'~".~!"J:.I;,,~:.:.,~.<br /> <br /> } </SCRIP1> <JI-lEAD> <BODY> <FONT FACE ="Yerdana"> <H3>Sclamat Datang di LEPKOM GUNADARMA<1H3> Silahkan Login Nama dun Password. Anda dapat mcnuliskan "Icpkom" scbagai password tmtuk masuk scbagai Guest". <FORM RUNA T="Scrver"> EntcrNamc: <INPUT ID="inputNamc" TYPE="Tcxt" SIZE="40" RUNAT="Scrver"> <PI> Enter Password: <INPUT ID="inputPas.'>Word"TYPE="Password" SIZE="40" RUNA T="Scrver"> <PI> <INPUT TYPE="Submit" YALUE="Submit" OnScrvcrClick="SubmitI3ln _Click" RUNA T="Scrver"> <INPUT TYPE="Rcsct" OnScrvcrClick="RcsctBln_Click" RUNAT="Scrver"> <PI> <SPAN ID="spanMcssagc" stylc="color:rcd" RUNAT="Scrvcr"><lSPAN> </FORM> </FON"I> <lI30DY> <II ITML><br /> <br /> 3. Lalu simpan dengan nama htmlinputbutton.aspx pada virtual directory yaitu di \'Vwwrootpada folder lalihanl 4. Jalankan browser anda ketik hfflJ:///ocal/wsl//alihan/ /hlm/in/Julbuffol1.aspx 5. LaJu masukkan nama anda dan password 6. Ketikkan submit unluk mencoba password dan reset untuk merubah data 7. Jika anda benar maka broser anda akan menampilkan halaman web seperti ini:<br /> <br /> Selamat<br /> <br /> Datang<br /> <br /> dilEPKOM GUNADARMA<br /> <br /> Silahkan Login Nama dan Password. Anda dapat menullskan "Iepkom" sebagal password untuk masuk sebagal Guest". Enter Name:<br /> <br /> I<br /> <br /> Enter Password: Submit<br /> <br /> I<br /> <br /> I Reset I<br /> <br /> Gmnbur 3.1 Tnmpilan Output L(~in dcngun 111M!. Control 28<br /> <br /> -<br /> <br /> . ~;<br /> <br /> "__., ...;<br /> <br /> :I<br /> <br /> ~.,oI.l :.<br /> <br /> LAB GUIDE 2 MEMBUA T APLIKASI WEB CONTROL<br /> <br /> Anda<br /> <br /> dapat<br /> <br /> menggunakan<br /> <br /> TextBox<br /> <br /> dari<br /> <br /> web<br /> <br /> control<br /> <br /> untuk<br /> <br /> memungkinkanuser menulis informasi pada form. User dapat menuliskan bermacarn - macarn informasi sepcrti text, angka, dan tanggal. Anda dapal menggunakan<br /> <br /> bermacarn<br /> <br /> -<br /> <br /> macarn type dari text box, termasuk<br /> <br /> single text<br /> <br /> box, multiple text box, dan password text box. Anda dapal mcmbuat kontrol TextBox dengan menggunakan Tag <ASP: TEXTBOX / rel="nofollow">. Sarna seperli HfML dan Web conlrollainnya tulislah atribule<br /> <br /> RUNAT="Server".<br /> <br /> Tipe dari TextBox dapat anda spesifikasikan<br /> <br /> dengan mengatur atribute TEXIMODE , yang mempunyai nilai Sing/eLine. Mu/tip/eLine, dan Password. Disini kita akan membuat halarnan login sederhana unluk mengetes password statis, yang akan menarnpilkan sarna seperti yang telah kita buat pada LAB giude ], namun kali ini kita megunakan atribute Web control dalam menggunakannya. Langkah-langkahnya adalah sebagai berikut: 1. Buka text editor anda (notepad alau cditplus) 2. ketikkan...<br /> <br /> <I-ITMl> <HEAD> <SCRIPT LANGUAGE="C#" RUNA T="Scrvcr"> void SubmilBtn_Click(objecl Source, EvcnlArgs e) ( if(inputPassword.Text = "lcpkom"){ labclMessage.Tcx1="Password correct."~ } else { labclMessage.Text="That password is not correct."~ } void RcsclBtn_Click(object Source, EvcntArgs e) { inputName. Text<br /> <br /> = ""~<br /> <br /> inpulPassword.Text = ""~<br /> <br /> 29<br /> <br /> .<br /> <br /> 6..' ..~~.' ,<br /> <br /> C<br /> <br /> ."'<br /> <br /> ~<br /> <br /> ".1',<br /> <br /> </SCRIP1> </HEAD> <BODY> <FONT FACE ="Verdana"> <H3>Sclamat Datang di LEPKOM GUNADARMA<IID> Silahkan Login Nama dan Password. Anda dapat mcnuliskan "lcpkom" scbagai password Wltuk masuk scbagai Gucst. <FORM RUNAT="Scrver"> Enter Namc: <ASP:1EXT130X 1D="inputNamc" 1EX1MODE="SinglcLinc" TEXT="" WIDTH="200px" RUNA T="Scrver"/ rel="nofollow"> <BRI> Enter Password: <ASP:IEXl130X JD="inpulPassword" TEXTMODE="Password" TEXT="" WUYnI="200px" RUN AT="Scrver"1 rel="nofollow"> <PI> <ASP:13UTlUN OnClick="SuhmitlHn_Click" TEXT="Suhmit" RUNAT="Scrvcr"/ rel="nofollow"> <ASP:13UTIUN OnClick="Rcscll3tn_Click" 'mXT="Rcsct" RUNAT="&:rvcr"/ rel="nofollow"> <PI> <ASP:LAI3EL 1D="labclMcssagc" stylc="color:rcd" RUNA T="Scrver"1 rel="nofollow"> </FORM> </FON1> <lI30DY> <lHTML><br /> <br /> 3. Lalu anda simpan file ini dengan nama asptextbox.aspx pada direk10ri virtual anda yaitu wwwroot pada folder latihanl 4. Jalankan browser anda ketik<br /> <br /> http://localhost//atihanJ/asptextbox.aspx<br /> <br /> Lalu masukkan nama anda dan password 5. Ketikkan submit untuk mencoba password dan reset untuk hap us data 6. Jika anda benar maka browser anda akan menarnpilkan halaman web ini I' lilirtJflJr.mI~~r.tUiToTi1~T.:!\'.I.':""'" a':fm,~'Ir.':r.;.i2~~~f~:~;<br /> <br /> .~<br /> <br /> tdt ~<br /> <br /> f.-<br /> <br /> _ l~.~<br /> <br /> ~~r~,"-:!Q!J]~! '''_~._liJf Ad<hss ~J"tp:IJb:~_II"""exlbox.__<br /> <br /> Selamat<br /> <br /> :<br /> <br /> :<br /> <br /> ..J.PJ~<br /> <br /> '::':~-===I"<br /> <br /> '~_'''"'':'.J.I.:O.~<br /> <br /> [i/'..!l .::.I~Go .<br /> <br /> Iu.b-, I<br /> <br /> ..:J<br /> <br /> Datang di LEPKOH GUNADARHA<br /> <br /> SIla/1kan login Nama dan Password. Anda dapet lTIenuliskan "Iepkom" 5ebaoal pes!;word lrItli< masli< !;cbagal Guest. Enter Nome: 1.,i.l.n lepkom<br /> <br /> Enter Password: 1--1 I Subm~ I R<br /> <br /> I<br /> <br /> Password Bellar!<br /> <br /> Gambar 3.2 Login password dcngan Web Control 30<br /> <br /> </div> </div> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form role="form" method="post" action="https://adoc.pub/report/sintaks-aspnet-objektif" style="border: none;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Report "Sintaks ASP.NET. Objektif:"</h4> </div> <div class="modal-body"> <div class="form-group"> <label>Your name</label> <input type="text" name="name" required="required" class="form-control" /> </div> <div class="form-group"> <label>Email</label> <input type="email" name="email" required="required" class="form-control" /> </div> <div class="form-group"> <label>Reason</label> <select name="reason" required="required" class="form-control"> <option value="">-Select Reason-</option> <option value="pornographic" selected="selected">Pornographic</option> <option value="defamatory">Defamatory</option> <option value="illegal">Illegal/Unlawful</option> <option value="spam">Spam</option> <option value="others">Other Terms Of Service Violation</option> <option value="copyright">File a copyright complaint</option> </select> </div> <div class="form-group"> <label>Description</label> <textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;">