membuat web Konversi nilai mata uang sederhana

Pendahuluan

Pada Pertemuan Kali ini kita akan mencoba membuat web Konversi nilai mata uang sederhana , diharapkan pembaca sudah mengerti HTML dasar sebelum masuk ke pertemuan ini agar tidak mengalami kesusahan dalam menganalisa material yang ada. Selama ini kita hanya browsing dan menggunakan website dan tak terpikir di benak kita bagaimana website sendiri itu bekerja , apa yang dia lakukan , dan terkadang banyak temporary file yang ada pada drive kita tanpa kita sadari , banyak sekali yang web dapat lakukan bukan hanya sekedar menampilkan data dan informasi tetapi juga dapat untuk men-transfer file , remote computer dan banyak hal lainnya yang dapat di lakukan oleh sebuah web .

Isi

Seperti kita ketahui saat kita sebagai Client mencoba untuk mengakses sebuah web sepertiwww.suryodesign.asia, tanpa sadari kita sudah melakukan request kepada server dan nantinya server merespon request kita dan akan menampilkan web itu pada sisi kita dengan output HTML, kita akan merequest pada WebServer yaitu IIS yang kita gunakan pada ASP.Net sebagai WebServer yang menampung website , IIS akan memeriksa apakah website ini ada dan terdaftar ada direktori yang kita miliki dan kemudian akan meresponse semua request yang ada . request ini sendiri dapat dibatas dengan penggunaan webconfig yang telah kita pelajari pada pertemuan sebelumnya .

Gambaran simple Web Request :

Kemudian kita akan mencoba untuk membuat design HTML di dalam form kita yang nantinya akan kita gunakan sebagai User Interface, berikut adalah gambaran dari HTML Class :

Disini saya tidak akan mengulangi lagi HTML secara mendalam tapi saya hanya akan memberikan contoh dasar mengenai beberapa komponen yang terdapat pada ASP.Net seperti Textbox , gunakan dan modifikasi textbox sesuai dengan yang anda butuhkan , anda dapat melihat ada textbox HTML dan textbox ASP.Net seperti berikut :

Textbox ASP.Net : 

<asp:TextBox ID=”txtNama” runat=”server”></asp:TextBox>

Textboxt yang kita ubah style nya :

<asp:TextBox ID=”txtNama” runat=”server” BackColor=”Wheat” BorderColor=”Coral”Font-Bold=”true” Font-Italic=”true” ForeColor=”HotPink” ></asp:TextBox>

Di sini ada jenis ASP.Net Textbox dan HTML Textbox , jangan sampai salah dalam memilih , berikut source dari HTML Textbox

<input id=”Text1″ type=”text” class=”style2″ />

Kita dapat membuat Div untuk mengelompokkan atau meng-Group suatu komponen yang ada.

<div></div>

Dan kita dapat customize div tersebut menjadi lebih indah seperti berikut :

Hal ini dapat dilakukan hanya dengan mengganti beberapa atribut yang dimiliki oleh DIV sendiri seperti berikut :

<div style=”background-color: Gray; font-family:Verdana; font-size : 14px; border-right:2px solid; border-left:2px solid; border-bottom:1px solid; border-top:1px solid;padding-right:auto; padding-left: 10px; padding-top:auto; padding-bottom:auto”

class=”style3″ >

banyak property yang bisa kita gunakan , salah satunya adalah Style untuk mengubah semua properties yang dimiliki oleh Div itu sendiri , seperti background-color ( untuk mengubah warna background ) , font-family(untuk mengubah jenis font ) , font-size(mengubah size font) , border-top(mengubah border sisi atas ) , padding-left(mengubah jarak dalam ) dan masih banyak properties yang dapat kita gunakan untuk mempercantik tampilan web yang kita miliki.

Sekarang kita akan mencoba Men-Design Page Sederhana dengan memanfaatkan beberapa komponen berikut :

· Textbox(asp:Textbox)

· Input(Submit)

· Label

· Select

Dan disini kita akan memakai beberapa property HTML seperti style DIV untuk memperindah design , pergunakan komponen di atas kemudian design seperti berikut :

Setelah selesai proses design maka sekarang kita akan mencoba untuk mengerjakan CodeBehind pada halaman Default.aspx.cs , double klik halaman Codefile. Dan anda akan melihat di sisi atas beberapa namespace bawaan yang berada pada codeFile secara default yang kita miliki :

using System;

using System.Configuration;

using System.Data;

using System.Linq;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.HtmlControls;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Xml.Linq;

Setelah kita analisa beberapa komponen di atas , nanti kedepannya kita akan menggunakan MessageBox.Show yang terdapat pada Class System.Windows.Form maka tambahkan namespace berikut pada web anda :

using System.Windows.Forms;

Atau anda juga dapat menambahkan melalu reference , dan hal ini tidak perlu dilakukan lagi bila anda sudah melakukan seperti di atas .Berikut adalah Step By Step untuk add reference :

1.Klik kanan kemudian pilih Refrences pada Solution Explorer dan kemudian pilih add Reference , kemudian akan muncul list assemblies yang terdaftar pada visual studio

2.pada Add Reference window , pilih komponen yang ingin anda gunakan , bila komponen tersebut tidak terdaftar pada computer , kita mesti browser file tersebut dengan klik browse tab dan cari DLL file pada directory yang ada

3.Setelah memilih reference yang kita kehendaki , klik ok untuk add reference pada web application yang kita miliki .

Setelah selesai design halaman web , sekarang saatnya kita untuk membuat CodeBehind pada halaman Default.aspx.cs , Code ketika halaman di Load :

protected void Page_Load(object sender, EventArgs e)

{

if (this.IsPostBack == false)

{

selectMataUang.Items.Add(new ListItem( “Rupiah”,“12000″));

selectMataUang.Items.Add(new ListItem( “Euro”, “1.3″));

}

if (ViewState["selamatdatang"] == null)

{

MessageBox.Show(“Selamat Datang Di ASP.Net”, “Welcome”);

}

ViewState["selamatdatang"] = “OK”;

Label1.Text = “Websiteku :” + System.Environment.NewLine +ConfigurationManager.AppSettings["suryodesign website"] + “<br> Blogku : “ +ConfigurationManager.AppSettings["suryodesign blog"];

}

Dapat di lihat di atas ada viewState berguna untuk menyimpan suatu nilai , viewState ini berada pada sisi Client , dan juga dapat di setting TimeOut nya , perbedaan ViewState danSession yang paling mendasar adalah ViewState hanya dapat di gunakan pada 1 halaman saja dan tidak dapat diakses oleh halaman lain , sedangkan Session selama session itu masih aktif dan belum di hapus dapat digunakan di seluruh halaman , sedangkanConfigurationManager.AppSetting kita gunakan untuk mengambil nilai key [suryodesign website] dari webconfig ., dan ada juga IsPostBack yang berfungsi untuk memeriksa apakah ada kejadian / aksi pada komponen Select pada sisi client.

Kemudian kita pada sisi Behind Code buatlah sebuah fungsi untuk konversi mata uang :

protected void convertMataUang(Object sender, EventArgs e)

{

//try kita gunakan untuk meletakkan code dan

//menghandlenya ke dalam catch bila ada kesalahan

try

{

//mengambil nilai dari list item berdasarkan indexnya

ListItem item = selectMataUang.Items[selectMataUang.SelectedIndex];

//input tidak boleh kosong

if (txtDollar.Text == “”)

{

MessageBox.Show(“Uang tidak boleh kosong”);

//break code

return;

}

//convert nilai dari item menjadi decimal

decimal konversi = decimal.Parse(item.Value);

//convert nilai dari hasil kali textbox inputan dengan nilai konversi

decimal rupiah = decimal.Parse(txtDollar.Text) * konversi;

//inner text kita gunakan untuk memunculkan text di dalam DIV pada HTML

tampilkanDisini.InnerText = “Jumlahnya dalam rupiah adalah : “ + rupiah.ToString();

}

//menangkap kesalahan

catch (Exception)

{

MessageBox.Show(“Tidak boleh mengandung huruf”);

//break code

return;

}
}

Fungsi convertMataUang tersebut akan kita panggil pada button submit seperti berikut :

<input id=”Submit1″ type=”submit” value=”Convert ” runat=”server”

onserverclick=”convertMataUang” class=”style8″ />

Yup selesai sudah Latihan ke 3 ini , mungkin agak sedikit membingungkan , tapi saya akan share sourceCode nya pada www.suryodesign.asia/freedownload agar anda tidak mengalami kebingungan dan memudahkan anda dalam mempelajari materi ASP.Net ini . berikut adalah hasil akhirnya :

Penutup

Bagi Anda yang belum pernah mengenal tentang konsep web dan pengenalan HTML dasar atau belum terbiasa menggunakan Tools untuk membuat website mungkin akan terasa bingung pada awalnya , dibutuhkan banyak belajar pada awalnya dan sering-seringlah bertapa untuk lebih mengenal mengenai ASP.Net ini , nanti ke depannya kita akan mempelajari JavaScript dan konsep koneksi dengan menggunakan ADO.Net dan juga Ajax.

sumber : http://suryodesign.wordpress.com