Tutorial membuat Aplikasi Web “Faktabahasa Club Open Registration” menggunakan Microsoft Visual Studio 2008





Halo sobat semuanya,

Saya membuat aplikasi web sederhana "Faktabahasa Club Open Registration" menggunakan Microsoft Visual Studio 2008. Aplikasi ini merupakan aplikasi pendaftaran untuk menjadi anggota dari suatu club atau komunitas yang bernama Faktabahasa. Berikut saya screenshoot-kan tampilan akhirnya :


Mari kita mulai,

1. Klik Start (logo Windows yang ada di pojok kiri bawah)



2. Klik All Programs



3. Pilih Folder Microsoft Visual Studio 2008 lalu pilih aplikasi Microsoft Visual Studio 2008



4. Akan muncul tampilan program Microsoft Visual Studio 2008



5. Klik File > New > Web Site…



6. Pilih ASP.NET Web Site, Isi nama Web Site yang akan di buat, kemudian klik button “OK”



7. Maka akan muncul tampilan seperti berikut ini :


8. Pindah ke view “Design”




9. Tampilannya akan seperti ini :



10. Pada jendela Toolbox, double klik “Label”



11. Pada jendela Properties, ganti Text menjadi “Faktabahasa Club Open Registration”



12. Setelah itu, kembali ke view “Source”



13. Kemudian tambahkan tag <center></center> seperti gambar berikut


14. Mari pindah lagi ke view “Design”


15. Langkah selanjutnya, kita akan membuat table agar tampilan interfacenya lebih teratur. Klik Table > Insert Table.


16. Masukan nilai “9” pada Rows dan “2” pada Columns. Kemudian klik OK



17. Berikut adalah tampilan setelah table di buat



18. Mari buat label pada sisi kiri table. Pada jendela Toolbox, double klik “Label”.



19. Ganti Label pada kolom text menjadi “Full Name”


20. Lakukan langkah tersebut, dan buat seperti gambar dibawah ini



21. Langkah selanjutnya, buatlah textbox pada kolom table sebelah kanan Full Name

22. Pada jendela Toolbox double klik TextBox



23. Kemudian pada jendela Properties, isikan “txtFullname” pada kolom ID


24. Lakukan langkah tersebut dan buatlah masing-masing textbox di sebelah kanan label yang kita buat tadi. Kecuali “Birthday” dan “Sex” yang mana sebelah kanannya di kosongkan saja (Nanti akan kita buat khusus/ berbeda). Masing-masing textbox secara urut saya beri nama txtFullName, txtAddress, txtUnSc, txtEmail, txtPhone, txtLanguages, dan txtPurpose. Jika sudah dibuat, tampilannya akan terlihat seperti ini :



25. Pilih textbox “Address”, klik view “Source”, kemudian tambahkan script berikut ini



26. Lakukan hal yang sama pada textbox “What’s your purpose to be the part of this club”

27. Setelah itu, klik pada table sebelah kanan Birthday



28. Pada jendela Toolbox, pilih “DropDownList”



29. Pada jendela Properties, beri nama ID-nya menjadi “ddTgl”


30. Lakukan langkah yang sama di sebelah kanan DropDownList “ddTgl”, beri nama ID-nya menjadi “ddBln”, buat lagi DropDownList di sebelah kanan ddBln, beri nama ID-nya menjadi “ddThn”.

31.  Setelah di buat, tampilannya akan menjadi seperti ini :



32. Langkah selanjutnya double klik default.aspx.vb pada yang berada di sisi kanan aplikasi Visual Studio 2008



33. Pilih form1



34. Lalu pada (Declarations) pilih Load



35. Isikan script berikut ini


36. Langkah selanjutnya klik table sebelah kanan Sex, pada view Design



37. Pada jendela Toolbox, pilih “RadioButtonList”



38. Pilih Edit Items

39. Klik Add, isi kolom Text dengan “Male”


40. Klik Add lagi, isi kolom Text dengan “Female”, Kemudian klik button “OK”


41. Maka tampilannya akan menjadi vertical seperti ini



42. Untuk merubah tampilan radiobutton agar horizontal, dengan cara menambahkan script RepeatDirection=”Horizontal” pada view source seperti di bawah ini



43. Maka tampilan radiobutton yang tadinya vertikal akan berubah menjadi horizontal


44. Langkah selanjutnya adalah buat label yang berisi tentang apa saja persyaratan yang diharuskan untuk mengikuti club ini, Anda bisa mengikuti contoh yang saya buat pada gambar di bawah ini



45. Setelah itu, buatlah checkbox yang bertuliskan “Saya sudah membaca persyaratan” yang diletakan dibawah label persyaratan, tulis nama ID-nya menjadi “cbYa”, berikan underline, atur posisinya menjadi center, Pada jendela Properties ganti nilai False pada AutoPostBack menjadi “True”



46. Tampilannya seperti ini



47. Dibawah checkbox tersebut tambahkan button “Submit” dengan ID “btnSubmit”. Atur button tersebut agar center. Pada jendela Properties ganti nilai True pada Enabled menjadi “False”



48. Langkah selanjutnya setelah button terbuat, double klik pada checkbox “cbYa”



49. Masukan script berikut ini



50. Selanjutnya double klik button “Submit” pada view Design.



51. Masukan script ini didalamnya



52. OK selesai

53. Langkah selanjutnya, melihat aplikasi kita ini berjalan di browser. Caranya adalah klik kanan pada Default.aspx, kemudian pilih View in Browser



54. Berikut adalah tampilan pada browser



55. Mari kita coba isi, disini kita dapat melihat bahwa tombol Submit tidak muncul (tidak enable). Untuk memunculkannya, dengan cara centang checkbox tersebut.



56. Baru setelah itu, kita dapat meng-klik tombol Submit



57. Setelah klik tombol Submit, akan ada MessageBox yang memberitahukan bahwa form registrasi kita sudah terkirim



Berikut ini adalah tampilan design keseluruhan Aplikasi Web ini (Klik pada gambar untuk memperbesar)





Source Code 1# (Klik pada gambar untuk memperbesar)


Source Code 2# (ASP.NET)



Saya sediakan juga pdf yang bisa sobat download disini

Budayakan blogwalking dan komentarnya ya sob :)

Perhatian!!Jika sobat ingin copy-paste tutorial ini mohon disertakan sumber dari url saya.

0 komentar:

Posting Komentar

 

Blogroll

Penawaran Menarik