Bermain dengan Form pada Microsoft Webmatrix

1

altPada ebook saya Panduan Dasar Microsoft WebMatrix telah dijelaskan dasar-dasar penggunaan webmatrix dari mulai membuat laman web sederhana sampai dinamis. Kali ini saya mencoba bermain dengan form pada WebMatrix.

Disini saya mencoba membuat form sederhana diantaranya menampilkan hasil inputan dan validasi form.

Langkah pertama tentu anda harus buat form terlebih dahulu. Buat sebuah file pada situs anda dengan nama form.cshtml. Bagian ini telah saya bahas pada ebook WebMatrix saya.

form5

Jika anda malas coding, silahkan copy paste saja. Senyum dengan lidah terjulur

<!DOCTYPE html>
&lt;html lang=<span class="str">&quot;en&quot;</span>&gt;
 &lt;head&gt;
 &lt;meta charset=<span class="str">&quot;utf-8&quot;</span> /&gt;
 &lt;title&gt;Bermain dengan Form&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;form method=<span class="str">&quot;post&quot;</span> action=<span class="str">&quot;&quot;</span>&gt;
 &lt;fieldset&gt;
 &lt;legend&gt;Input Nilai Mahasiswa&lt;/legend&gt;
 &lt;div&gt;
 &lt;label <span class="kwrd">for</span>=<span class="str">&quot;nim&quot;</span>&gt;NIM:&lt;/label&gt;
 &lt;input type=<span class="str">&quot;text&quot;</span> name=<span class="str">&quot;nim&quot;</span> <span class="kwrd">value</span>=<span class="str">&quot;&quot;</span> /&gt;
 &lt;/div&gt;
 &lt;div&gt;
 &lt;label <span class="kwrd">for</span>=<span class="str">&quot;nama&quot;</span>&gt;Nama:&lt;/label&gt;
 &lt;input type=<span class="str">&quot;text&quot;</span> name=<span class="str">&quot;nama&quot;</span> <span class="kwrd">value</span>=<span class="str">&quot;&quot;</span> /&gt;
 &lt;/div&gt;
 &lt;div&gt;
 &lt;label <span class="kwrd">for</span>=<span class="str">&quot;NilaiUAS&quot;</span>&gt;Nilai UAS:&lt;/label&gt;
 &lt;input type=<span class="str">&quot;text&quot;</span> name=<span class="str">&quot;NilaiUAS&quot;</span> <span class="kwrd">value</span>=<span class="str">&quot;&quot;</span> /&gt;
 &lt;/div&gt;
 &lt;div&gt;
 &lt;label&gt;&amp;nbsp;&lt;/label&gt;
 &lt;input type=<span class="str">&quot;submit&quot;</span> <span class="kwrd">value</span>=<span class="str">&quot;Tambah Data&quot;</span> <span class="kwrd">class</span>=<span class="str">&quot;submit&quot;</span> /&gt;
 &lt;/div&gt;
 &lt;/fieldset&gt;
 &lt;/form&gt;
 &lt;/body&gt;
&lt;/html&gt;

Ketika di runing akan tampil sebuah form sederhana.

form1

Sekarang kita coba menampilkan hasil inputan. Masukan baris kode dibawah ini:

 @{
&#160;
 <span class="kwrd">if</span> (IsPost) {
&#160;
 <span class="kwrd">int</span> nim = Request[<span class="str">&quot;nim&quot;</span>];
&#160;
 <span class="kwrd">string</span> nama = Request[<span class="str">&quot;nama&quot;</span>];
&#160;
 <span class="kwrd">int</span> nilaiuas = Request[<span class="str">&quot;nilaiuas&quot;</span>].AsInt();
&#160;
 &lt;text&gt;
&#160;
 Data yang Anda input: &lt;br /&gt;
&#160;
 NIM : @nim &lt;br /&gt;
&#160;
 Nama : @nama &lt;br /&gt;
&#160;
 Nilai UAS : @nilaiuas &lt;br /&gt;
&#160;
 &lt;/text&gt;
&#160;
 }
&#160;
 }
&#160;

Perhatikan juga dalam pemilihan tipe data yang akan anda gunakan, pada sintak di atas terdapat tipe data integer dan string. Sesuaikan dengan kebutuhan anda.

Ketika diinputkan maka akan tampil sebagai berikut:

form2

Validasi Form

Validasi form berfungsi untuk mengecek apabila ada form yang salah input dan memberikan notifikasi pada pengguna bagian mana yang salah.

Replace kode sebelumnya dengan baris kode berikut ini:

@{
&#160;
 <span class="kwrd">if</span> (IsPost) {
&#160;
 var errors = <span class="kwrd">false</span>;
&#160;
 var nim = Request[<span class="str">&quot;nim&quot;</span>];
&#160;
 <span class="kwrd">if</span> (nim.IsEmpty()) {
&#160;
 errors = <span class="kwrd">true</span>;
&#160;
 @:NIM Harus Diisi dan Harus Angka.&lt;br /&gt;
&#160;
 }
&#160;
 var nama = Request[<span class="str">&quot;nama&quot;</span>];
&#160;
 <span class="kwrd">if</span> (nama.IsEmpty()) {
&#160;
 errors = <span class="kwrd">true</span>;
&#160;
 @:Nama Harus Diisi.&lt;br /&gt;
&#160;
 }
&#160;
 var nilaiuas = 0;
&#160;
 <span class="kwrd">if</span> (Request[<span class="str">&quot;nilaiuas&quot;</span>].IsInt()) {
&#160;
 nilaiuas = Request[<span class="str">&quot;nilaiuas&quot;</span>].AsInt();
&#160;
 } <span class="kwrd">else</span> {
&#160;
 errors = <span class="kwrd">true</span>;
&#160;
 @:Nilai harus berupa angka.&lt;br /&gt;
&#160;
 }
&#160;
 <span class="kwrd">if</span> (errors == <span class="kwrd">false</span>) {
&#160;
 &lt;text&gt;
&#160;
 Data yang Anda input: &lt;br /&gt;
&#160;
 NIM: @nim &lt;br /&gt;
&#160;
 Nama: @nama &lt;br /&gt;
&#160;
 Nilai UAS: @nilaiuas &lt;br /&gt;
&#160;
 &lt;/text&gt;
&#160;
 } }
&#160;
 }
&#160;

Ketika terjadi kesalahan maka akan tampil notifikasi bahwa data yang diinput tidak valid.

form3

Mengembalikan Nilai Form Setelah Post

Ketika kita sedang menginput data dengan banyak form dan ada satu form yang salah, secara default nilai pada form tersebut akan hilang. Antisipasinya adalah tetap menampilkan nilai form setelah kita post.

Caranya sangat mudah, anca cukup menambahkan perintah @Request[“namavariabel”] pada value.

&lt;form method=<span class="str">&quot;post&quot;</span> action=<span class="str">&quot;&quot;</span>&gt;
&#160;
 &lt;fieldset&gt;
&#160;
 &lt;legend&gt;Input Nilai Mahasiswa&lt;/legend&gt;
&#160;
 &lt;div&gt;
&#160;
 &lt;label <span class="kwrd">for</span>=<span class="str">&quot;nim&quot;</span>&gt;NIM:&lt;/label&gt;
&#160;
 &lt;input type=<span class="str">&quot;text&quot;</span> name=<span class="str">&quot;nim&quot;</span> <span class="kwrd">value</span>=<span class="str">&quot;@Request[&quot;</span>nim<span class="str">&quot;]&quot;</span> /&gt;
&#160;
 &lt;/div&gt;
&#160;
 &lt;div&gt;
&#160;
 &lt;label <span class="kwrd">for</span>=<span class="str">&quot;nama&quot;</span>&gt;Nama:&lt;/label&gt;
&#160;
 &lt;input type=<span class="str">&quot;text&quot;</span> name=<span class="str">&quot;nama&quot;</span> <span class="kwrd">value</span>=<span class="str">&quot;@Request[&quot;</span>nama<span class="str">&quot;]&quot;</span> /&gt;
&#160;
 &lt;/div&gt;
&#160;
 &lt;div&gt;
&#160;
 &lt;label <span class="kwrd">for</span>=<span class="str">&quot;NilaiUAS&quot;</span>&gt;Nilai UAS:&lt;/label&gt;
&#160;
 &lt;input type=<span class="str">&quot;text&quot;</span> name=<span class="str">&quot;NilaiUAS&quot;</span> <span class="kwrd">value</span>=<span class="str">&quot;@Request[&quot;</span>nilaiuas<span class="str">&quot;]&quot;</span> /&gt;
&#160;
 &lt;/div&gt;
&#160;
 &lt;div&gt;
&#160;
 &lt;label&gt;&amp;nbsp;&lt;/label&gt;
&#160;
 &lt;input type=<span class="str">&quot;submit&quot;</span> <span class="kwrd">value</span>=<span class="str">&quot;Tambah Data&quot;</span> <span class="kwrd">class</span>=<span class="str">&quot;submit&quot;</span> /&gt;
&#160;
 &lt;/div&gt;
&#160;
 &lt;/fieldset&gt;
&#160;
 &lt;/form&gt;
&#160;

Berikut hasilnya :

form4

Semoga bermanfaat. Punk

alt

Discussion1 Comment

Leave a Reply