Friday, January 28, 2011

Bismillah. Alhamdulillah... Satu widget lagi telah selesai di buat untuk para sahabat setia Blogger Tune-Up. Widget ini kemudian diberi nama jToCTree yang merupakan kepanjangan dari jQuery Table of Content Treeview hasil kolaborasi/perpaduan framework jQuery, JSON Feed, dan jQuery Treeview plugin buatan Jörn Zaefferer[1]. Fungsinya sama dengan jenis Daftar Isi jQuery Accordion[2] yaitu untuk menampilkan semua data artikel kita sehingga proses pencarian artikel oleh para pembaca blog kita semakin mudah dan menarik.
jToCTree Versi 1.0 - Daftar Isi Folder Bercabang
Adapun ciri khas jToCTree versi 1.0 adalah sebagai berikut:
  • Tampilan mirip dengan Explorer pada komputer, ketika folder di klik maka isi folder akan ditampilkan
  • Folder diambil dari kategori/label artikel dan disusun secara ascending (dimulai dari A-Z)
  • Judul artikel dan alamat artikel ditampilkan secara otomatis tanpa harus kita masukan secara manual dan secara otomatis pula tersusun secara ascending
  • jToCTree tidak sama dengan dTree yang sempat booming beberapa saat yang lalu, karena dTree bekerja secara manual (data harus dimasukan sendiri oleh pemilik blog)
  • jToCTree menggunakan animasi slide yang akan menampilkan artikel pada saat kategori tertentu diklik
  • Dan silahkan telusuri keunggulan jToCTree
Jika sahabat blogger tertarik untuk menggunakan jToCTree ini ada beberapa hal yang perlu diketahui/disepakati, diantanya:
  • Blogger Tune-Up menghabiskan banyak waktu untuk membuat jToCTree ini, donasi atau apresiasi-nya akan sangat membantu Blogger Tune-Up untuk terus berkarya
  • jToCTree ini dibuat oleh seorang blogger newbie, maka jika anda merasa master (lebih hebat) dari Blogger Tune-Up, saya secara pribadi mohon ma'af yang sebesar-besarnya karena tidak mampu membuat sesuatu yang bagus buat anda yang sudah menjadi master blog
  • jToCTree ini bersifat gratis untuk digunakan pada blog siapapun tanpa harus membayar atau tukar guling dengan apapun
  • jToCTree diperbolehkan untuk di review pada blog siapapun dengan atau tanpa pemberitahuan ke Blogger Tune-Up, tetapi wajib memasukan link yang menuju blog Blogger Tune-Up pada artikel yang dibuat
  • Tidak diperbolehkan melakukan decompile/unpacking terhadap script code jToCTree dengan tujuan untuk membuang kredit link yang menuju ke blog Blogger Tune-Up
  • Jika ditemukan bug atau error mohon kesediaannya untuk memberitahukan Blogger Tune-Up melalui email, twitter, facebook atau media yang anda sukai
  • Jika tidak sepakat dengan hal diatas maka silahkan membuat sendiri sesuatu yang mirip dengan jToCTree atau yang lebih baik.
Beberapa hal yang harus diperhatikan sebelum menggunakan jToCTree, diantaranya:
  • Blogger Tune-Up tidak menyediakan URL untuk script jToCTree maka anda yang akan menggunakan silahkan upload sendiri pada hosting milik anda
  • Semua gambar pendukung jToCTree disediakan pada hosting Picasa, jadi jika anda ingin menggunakan sendiri gambar yang sesuai dengan selera silahkan upload pada hosting milik anda
  • jToCTree ini merupakan versi 1.0 maka ada kemungkinan akan diperbaiki pada hari-hari berikutnya
  • Let's begin for play...

Integrasi jToCTree Versi 1.0 pada Template Blog

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:
]]></b:skin>
Langkah 4
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 3:
/*  jToCTree  */
#judafistre {background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAWJugl3I/AAAAAAAAEBg/bY_3UzrECSg/d/bg5.gif) repeat-y scroll left center #E7F7FB;padding:5px;border:1px solid #339DC6; }
.branda { background: url(http://lh6.ggpht.com/_xcD4JK_dIjU/TUBMbWj8ZzI/AAAAAAAAEr4/iqyIQmaeqTc/d/blogger.png) 0px 4px no-repeat !important; }
.judafis { padding:0 0 0 4px; font-weight:bold;}
.treeview, .treeview ul { padding: 0;margin: 0;list-style: none;}
.treeview ul { background-color: transparent; margin-top: 4px;}
.treeview .hitarea { background: url(http://lh6.ggpht.com/_xcD4JK_dIjU/TUBMyDGBM0I/AAAAAAAAEsQ/b__wKvGpCLo/d/treeview-default.gif) -64px -25px no-repeat; height: 16px; width: 16px; margin-left: -16px; float: left; cursor: pointer;}
* html .hitarea { display: inline; float:none;}
.treeview li { margin: 0; padding: 3px 0pt 3px 16px;}
.treeview a.selected { background-color: #eee;}
#treecontrol { margin: 2px 0; display: none; }
.treeview .hover { color: red; cursor: pointer; }
.treeview li { background: url(http://lh3.ggpht.com/_xcD4JK_dIjU/TUBMyE2GQFI/AAAAAAAAEsU/8rb8Y7zjLQw/d/treeview-default-line.png) 0 0 no-repeat; }
.treeview li.collapsable, .treeview li.expandable { background-position: 0 -176px; }
.treeview .expandable-hitarea { background-position: -80px -3px; }
.treeview li.last { background-position: 0 -1766px }
.treeview li.lastCollapsable { background-position: 0 -111px }
.treeview li.lastExpandable { background-position: -32px -67px }
.treeview div.lastCollapsable-hitarea, .treeview div.lastExpandable-hitarea { background-position: 0; }
.treeview-black li { background-image: url(http://lh4.ggpht.com/_xcD4JK_dIjU/TUBMxfHyt7I/AAAAAAAAEsM/OQ8KPEkd4iI/d/treeview-black-line.png); }
.treeview-black .hitarea, .treeview-black li.lastCollapsable, .treeview-black li.lastExpandable { background-image: url(http://lh5.ggpht.com/_xcD4JK_dIjU/TUBMblX2uHI/AAAAAAAAEsI/qilKwCGDUas/d/treeview-black.gif); }
.filetree li { padding: 3px 0 2px 16px; }
.filetree span.folder, .filetree span.file { padding: 1px 0 1px 18px; display: block; }
.filetree span.folder { background: url(http://lh3.ggpht.com/_xcD4JK_dIjU/TUBMbqeQA4I/AAAAAAAAEsA/MxndTFShj-4/d/folder.gif) 0 0 no-repeat; }
.filetree li.expandable span.folder { background: url(http://lh4.ggpht.com/_xcD4JK_dIjU/TUBMbhMdwlI/AAAAAAAAEsE/9pe2zTo3i1U/d/folder-closed.gif) 0 0 no-repeat; }
.filetree span.file { background: url(http://lh4.ggpht.com/_xcD4JK_dIjU/TUBMbVyeYzI/AAAAAAAAEr8/pGIGq0amWFE/d/file.gif) 0 0 no-repeat; }
.filetree span.file a { text-decoration:none; }
Langkah 5
Cari kode dibawah ini:
</head>
Langkah 6
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 5:
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'/>
<script type='text/javascript' src='https://github.com/jzaefferer/jquery-treeview/raw/master/jquery.treeview.js'/>
<script type='text/javascript' src='http://henscripts.googlecode.com/svn/trunk/jquery.toc.treeview.js'/>
<script language='javascript'>//<![CDATA[
var judul = 'Daftar Isi'
function dafisjtoctree() {
$('#hitam').treeview({
animated: 'fast',
collapsed: true,
control: '#treecontrol'
});
}
$(document).ready(function() {
dafisjtoctree();
});
//]]></script>
Langkah 7
Simpan template dan lanjutkan membaca artikel...

Integrasi jToCTree Versi 1.0 pada Halaman atau Widget

Langkah 8
Buat suatu artikel dan pindahkan editor artikel pada mode edit HTML atau buatlah suatu widget dengan jenis HTML/JavaScript
Langkah 9
Masukan (copy paste) kode dibawah ini didalam artikel atau konten widget:
<div id="judafistre">
<div id="treecontrol">
<a title="Tutup semua folder" href="#"> Tutup</a> | <a title="Buka semua folder" href="#"> Buka</a> | <a title="Tombol buka tutup semua folder" href="#">Buka Tutup</a>
</div>
<script src="http://modification-blog.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=jtoctree"></script>
</div>
Langkah 10
Terbitkan artikel atau simpan widget dan preview...

Keterangan:
  • Lihat langkah 6 baris 1; buang satu baris tersebut jika blog anda telah memiliki framework jQuery
  • Lihat langkah 6 baris 3; upload-lah file tersebut yang tersedia pada source code yang sudah anda download dan ambil link file jtoctree-1.0.js menggantikan URL/jtoctree-1.0.js
  • Lihat langkah 6 baris 5; ubahlah kata 'Daftar Isi' dengan nama yang ingin anda gunakan
  • Lihat langkah 6 baris 8; ubahlah kata 'fast' dengan 'normal' jika ingin mengubah efek slide menjadi lebih lambat
  • Lihat langkah 6 baris 9; ubahlah kata true menjadi false jika ingin tampilan folder daftar isi langsung terbuka semua pada saat dilihat
  • Lihat langkah 6 baris 10; buanglah control: '#treecontrol' jika kita tidak ingin menampilkan link/tombol Tutup | Buka | Buka Tutup
  • Lihat langkah 9 baris 5; ubahlah alamat http://modification-blog.blogspot.com sesuai dengan alamat blog anda atau buang sekalian
Selamat mencoba dan semoga berhasil. Happy Blogging :)

Catatan kaki:
[1] Special thanks to Jörn Zaefferer for jQuery Treeview plugin
[2] Daftar Isi jQuery Accordion

Thursday, January 27, 2011

Bismillah. jPreCode Auto Width atau jQuery Pre Code Auto Width digunakan untuk menampilkan kode-kode bahasa pemrograman seperti HTML, XML, Javascript, CSS, C, C++, ASM, HEX, Visul Basic, Delphi, dan lain-lain pada artikel blog. Ketika pembaca mengarahkan pointer mouse ke area kode maka lebar area kode akan bertambah secara otomatis dan ketika pointer mouse meninggalkan area kode maka lebar area kode akan kembali seperti sebelumnya. Hal ini sangat bermanfaat bagi para blogger dan web desainer yang suka berbagi source code didalam artikel yang dibuatnya serta mempermudah para pembaca untuk membedakan antara artikel dengan source code.

Integrasi jPreCode Auto Width pada Template Blog

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:
]]></b:skin>
Langkah 4
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 3:
pre {
position:relative;
z-index:50;
background:#212121 url(precodebg1.gif) top left repeat;
border:1px solid #999;
color:#FFF; /* #000 untuk precodebg2 - #FFF untuk precodebg1 */
display:block;
font:13px/18px "Courier New",Courier,monospace;
margin:10px 0 20px;
overflow:auto;
padding:18px 10px 17px;
overflow-x:scroll;
width: 450px;
}
pre .infocode {
color: #999;
}
Langkah 5
Cari kode dibawah ini:
</head>
Langkah 6
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 5:
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function () {
$('pre').hover(function () {
$(this).stop().animate({
width: 820
}, 300).css({
'overflow-x': 'scroll'
})
}, function () {
$(this).stop().animate({
width: 450
}, 300).css({
'overflow-x': 'scroll'
})
});
});
</script>
Langkah 7
Simpan template dan lanjutkan membacanya...

Integrasi jPreCode Auto Width pada Artikel

Langkah 8
Buat suatu artikel dan masukan source code yang ingin disertakan, contoh seperti kode jQuery dibawah ini:
<script type="text/javascript">
$(document).ready(function(){

$('.acc_container').hide(); //sembunyikan atau tutup semua keranjang
$('.acc_trigger').css('cursor', 'pointer'); //ubah pointer mouse saat berada pada judul
$('.acc_trigger:first').addClass('active').next().show(); //Tambahkan class "active" untuk judul pertama, maka keranjang akan terbuka/aktif
$('.acc_trigger').click(function(){ //saat judul di klik
if( $(this).next().is(':hidden') ) { //keranjang berikutnya ditutup
$('.acc_trigger').removeClass('active').next().slideUp(); //Buang semua class "active" pada ".acc_trigger" dan berikan efek slide up untuk keranjang berikutnya
$(this).toggleClass('active').next().slideDown(); //Tambahkan class "active" pada ".acc_trigger" untuk judul (trigger) yang diklik dan tambahkan efek slide down pada keranjang berikutnya
}
return false; //kembali ke awal jika ada kesalahan
});

});
</script>
Langkah 9
Kemudian tambahkan/apitkan tag <pre></pre> pada kode diatas, sehingga seperti dibawah ini:
<pre>
<script type="text/javascript">
$(document).ready(function(){

$('.acc_container').hide(); //sembunyikan atau tutup semua keranjang
$('.acc_trigger').css('cursor', 'pointer'); //ubah pointer mouse saat berada pada judul
$('.acc_trigger:first').addClass('active').next().show(); //Tambahkan class "active" untuk judul pertama, maka keranjang akan terbuka/aktif
$('.acc_trigger').click(function(){ //saat judul di klik
if( $(this).next().is(':hidden') ) { //keranjang berikutnya ditutup
$('.acc_trigger').removeClass('active').next().slideUp(); //Buang semua class "active" pada ".acc_trigger" dan berikan efek slide up untuk keranjang berikutnya
$(this).toggleClass('active').next().slideDown(); //Tambahkan class "active" pada ".acc_trigger" untuk judul (trigger) yang diklik dan tambahkan efek slide down pada keranjang berikutnya
}
return false; //kembali ke awal jika ada kesalahan
});

});
</script>
</pre>
Catatan: Setiap source code yang ingin ditampilkan harus diapit oleh tag <pre></pre>
Langkah 10
Terbitkan artikel dan preview artikel anda...

Keterangan:
Perhatikan kode-kode (dari atas ke bawah) yang diblok pada langkah 4 dan langkah 6 :
  • background:#212121 url(URL/precodebg1.gif) top left repeat; : ubah warna background dan alamat gambar background sesuai keinginan anda. Download source code jPreCode Auto Width dan ekstrak file hasil download kemudian upload file gambar background tersebut. Terdapat dua pilihan warna background, precodebg1.gif untuk warna latar gelap dan precodebg2.gif untuk warna latar cerah.
  • color:#FFF; ubah nilai #FFF menjadi #000 agar warna huruf berubah dari putih menjadi hitam.
  • width: 450px; untuk mengatur lebar kode area sebelum pointer mouse masuk ke area kode. Nilai 450 harus sama dengan nilai 450 pada kode yang ada di langkah 6.
  • width: 820 adalah lebar area kode maksimal dalam pixel ketika pointer mouse berada di dalam area kode.
  • width: 450 adalah lebar area kode minimal dalam pixel ketika pointer mouse berada di luar area kode.

Untuk para master blog dan master web desainer mohon ma'af jika artikelnya terlalu katro dan atau ketinggalan jaman. Artikel ini tidak cocok untuk para master yang sudah banyak makan garam di dunia blogging code dan web code.
Selamat mencoba dan semoga berhasil. Happy Blogging :)

Tuesday, January 25, 2011

jQuery Accordion Versi 2

Posted by dav On 4:15 AM
Bismillah. Sebenarnya jQuery Accordion[1] pernah dibahas sebelumnya oleh Blogger Tune-Up tetapi karena banyaknya permintaan dari pembaca setia Blogger Tune-Up maka sekarang akan dibahas jQuery Accordion dengan jenis lainnya yang lebih sederhana dan sekaligus belajar tentang CSS (Cascading Style Sheet) dan penulisan script jQuery. Jenis ini merupakan jQuery Accordion yang di kembangkan oleh Soh Tanaka[2]. Seperti apa Simple jQuery Accordion Versi 2?

Skenario HTML

Kita akan membuat suatu wadah utama (class="container") yang terdiri dari 4 buah keranjang (class="acc_container") lagi didalamnya. Sedangkan masing-masing judul (h2) wadah (yang kemudian akan dibuat pemicu saat di klik) diberi class="acc_trigger". Maka perhatikan kode dibawah ini:
<div class="container">
<h2 class="acc_trigger">Web Design &amp; Development</h2>
<div class="acc_container">
<div class="block">
<h3>Need a Website?</h3>
<img src="img1.gif" alt="">
<p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. </p>
</div>
</div>
<h2 class="acc_trigger">Logo / Corporate Identity</h2>
<div class="acc_container">
<div class="block">
<h3>Need a Logo?</h3>
<img src="img2.gif" alt="">
<p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. </p>
</div>
</div>
<h2 class="acc_trigger">Seach Engine Optimization</h2>
<div class="acc_container">
<div class="block">
<h3>Need to be Heard?</h3>
<img src="img3.gif" alt="">
<p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. </p>
</div>
</div>
<h2 class="acc_trigger">eCommerce</h2>
<div class="acc_container">
<div class="block">
<h3>Have Product to Sell?</h3>
<img src="img4.gif" alt="">
<p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. </p>
</div>
</div>
</div>
Jangan dulu dilanjutkan membacanya jika skenario HTML diatas belum dipahami!!! (wuih pake tanda seru)

Skenario CSS

Dalam skenario ini tidak akan dijelaskan attribute CSS yang menyertainya, hanya akan dijelaksan garis besarnya saja. Perhatikan gambar dan skenario CSS dibawah ini:
  • .container berfungsi untuk membuat suatu wadah utama
  • h2.acc_trigger berfungsi untuk memberikan efek pada judul pada masing-masing keranjang (acc_container)
  • h2.acc_trigger:hover berfungsi untuk memberikan efek pada judul pada masing-masing keranjang (acc_container) saat mouse pointer berada pada judul tersebut
  • h2.acc_trigger.active berfungsi untuk memberikan efek pada judul pada masing-masing keranjang (acc_container) saat wadah sedang diaktifkan (ditampilkan)
  • .acc_container berfungsi untuk membuat keranjang yang berisi artikel dan gambar
  • .acc_container .block berfungsi untuk membatasi artikel dan gambar agar tidak terlalu dekan dengan wadahnya kecil (acc_container)
  • kode css selanjutnya silahkan diperlajari sendiri (kata guru tidak boleh semua diberikan, jadi harus ada PR-nya. Hehehehe...)
.container {
width: 500px;
margin: 0 auto;
padding: 10px;
}
h2.acc_trigger {
margin: 0 0 5px 0;
background: url(h2_trigger_a.gif) no-repeat;
height: 46px; line-height: 46px;
width: 500px;
font-size: 2em;
font-weight: normal;
float: left;
color: #fff;
display: block;
padding: 0 0 0 50px;
text-shadow: 1px 1px 0 #000;
}
h2.acc_trigger:hover {
color: #ccc;
}
h2.acc_trigger.active {
background-position: left bottom;
}
.acc_container {
margin: 0 0 5px; padding: 0;
overflow: hidden;
font-size: 1.2em;
width: 498px;
clear: both;
background: #f0f0f0;
border: 1px solid #d6d6d6;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.acc_container .block {
padding: 15px;
}
.acc_container .block p {
padding: 5px 0;
margin: 5px 0;
text-align:justify;
}
.acc_container h3 {
font: 2.5em normal Georgia, "Times New Roman", Times, serif;
margin: 0 0 10px;
padding: 0 0 5px 0;
border-bottom: 1px dashed #ccc;
}
.acc_container img {
float: left;
margin: 10px 15px 15px 0;
padding: 5px;
background: #ddd;
border: 1px solid #ccc;
}
Jangan dulu dilanjutkan membaca jika skenario CSS diatas belum dipahami!!! (tarik nafas dari hidung keluarkan dari mana sajalah)

Skenario jQuery

Sekarang menginjak ke kode jQuery-nya. Makanya disimpan terakhir karena ternyata kode jQuery-nya tidak terlalu rumit. Perhatikan kode dibawah ini dan keterangan yang menyertainya.
<script type="text/javascript">
$(document).ready(function(){
$('.acc_container').hide(); //sembunyikan atau tutup semua keranjang
$('.acc_trigger').css('cursor', 'pointer'); //ubah pointer mouse saat berada pada judul
$('.acc_trigger:first').addClass('active').next().show(); //Tambahkan class "active" untuk judul pertama, maka keranjang akan terbuka/aktif
$('.acc_trigger').click(function(){ //saat judul di klik
if( $(this).next().is(':hidden') ) { //keranjang berikutnya ditutup
$('.acc_trigger').removeClass('active').next().slideUp(); //Buang semua class "active" pada ".acc_trigger" dan berikan efek slide up untuk keranjang berikutnya
$(this).toggleClass('active').next().slideDown(); //Tambahkan class "active" pada ".acc_trigger" untuk judul (trigger) yang diklik dan tambahkan efek slide down pada keranjang berikutnya
}
return false; //kembali ke awal jika ada kesalahan
});
});
</script>
Jangan lupa untuk memasukan framework jQuery[3] diatas kode jQuery yang ada pada skenario jQuery
Selamat mencoba dan semoga berhasil. Jika pusing makan parasetamol ya... Happy Blogging :)

Catatan kaki:
[1] Memahami Efek jQuery Accordion
[2] Special thanks to Soh Tanaka with Simple Accordion with CSS & jQuery article
[3] Memahami dan Mengatasi Konflik Script jQuery

Tuesday, January 4, 2011

Tutorial VB.net Dasar 1

Posted by dav On 9:32 PM
Aregnoz Program - Vb. net adalah salah satu bahasa pemrograman tingkat tinggi yang lumayan mudah jika sudah terbiasa. Berikut ini kami sampaikan dasar-dasar dari vb.net.

1. Procedure Module dan Contohnya
Tempat menyimpan kode yang anda tuliskan atau untuk menempatkan bagian-bagian program yang memiliki fungsi berbeda di program VB.
contoh :
Public Module (nama module)
"kode program anda
End Module

2. Procedure Sub Rutin dan Contohnya
Merupakan blog perintah yang dijalankan sebagai tanggapan atas terbentuknya kejadian (event) dan tidak dapat mengembalikan nilai.
*contoh :
Sub
…blok perintah…
End sub
Atau
Sub (byred/byval var as tipe data)
… blok perintah…
End sub
Kode programnya:
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
Call pesan()
End Sub
Sub pesan()
MessageBox.Show("Jangan Lupa, " & "bayarlah pajak!!!", "PERHATIAN")
Exit Sub
MessageBox.Show("Pesan ini akan Hilang")
End Sub


3. Procedure Umum dan Contohnya
Digunakan untuk menghasilkan proses atau peringatan yang bisa dipakai oleh even-even procedure umum pada tubuh program .
*contoh :
Dim bil_1, bil_2 As Integer
Private Sub Button3_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button3.Click
bil_1 = 10
bil_2 = 200
MessageBox.Show(bil_1 + bil_2)
End Sub

4. Procedure Fungsi dan Contohnya
Merupakan blog perintah yang dijalankan dan dapat mengembalikan nilai. Dan perintah untuk mengembalikan nilai pada procedure fungsi adalah return. Umumnya peocedure fungsi digunakan untuk mengolah perhitungan suatu nilai
*contoh :
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
MessageBox.Show(hitung)
End Sub
Function hitung()
Dim a, b, c As Integer
a = 200 : b = 500
c = a + b
Return c
End Function

 

Password : effanbocahnoz