Jump to content
TJ-Ariff

Kelab Pengaturcara@programming

Recommended Posts

wahhhh.... bagus nie..

tapi kenapa gambar yang ko post kan tu tak keluar...

Aikk.... tak nampak ker gambar, kalo tak nampak tu tandanya... nak kena belanja makan tu (cakap ala-ala macam P.Ramlee)... ngehehehe :D :D Orang lain nampak tak? :unsure:

Edited by LanoG

Share this post


Link to post
Share on other sites

Nampak la..ala yang gitu-gitu \ / \ / tu interface dia...

Bro TJ... :lol:

Share this post


Link to post
Share on other sites

Bagus LanoG.... sangat bagusssss.......

Baru nampak gambar n yer... semalam tak nampak pun...

Aku tak sempat lagi nak cuba.... banyak sangat kerja nie..

Edited by TJ-Ariff

Share this post


Link to post
Share on other sites

Nasib baik dah nampak.. :D

Tutorial selanjutnya akan menyusul kemudian nanti kalau ada masa terluang.

Okey... masa terluang dah ada sikit nie... sedia semua!

Visual BASIC 2008 Express Edition

Kategori: Grafik

MELUKIS CARTA BAR

LanoG (May 2008)

vb2008-00.png

Sekali lagi kita bertemu dalam ruangan kelab programming. Pada episod kali ini, kita akan mencungkil kebolehan grafik yang ada pada Visual BASIC 2008 Express Edition. Fungsi grafik sememangnya amat penting sekali dalam sesebuah bahasa pengaturcaraan, dan tidak terkecuali juga VB. Dengan adanya GDI+ (graphic device interface) dalam VB ini, kita mampu membina grafik yang menarik dan boleh dimuatkan dalam aplikasi yang kita bina. Baiklah, tanpa membuang masa lagi, kita mulakan dengan membina sebuah carta ringkas dengan beberapa fungsi grafik iaitu Point dan Rectange.

Mula2 buka VB 2008 Express anda dan buat satu projek baru.

tictactoe-02.png

Kemudian, kita perlu mengimport terlebih dahulu rujukan komponen .NET yang perlu digunakan dalam aplikasi kita ini iaitu System.Drawing yang perlu dalam grafik nanti. Caranya ialah dengan buka menu Projek > Add Reference. Tingkap berikut dipaparkan.

bar-0.png

Pilih dalam senarai berkenaan, System.Drawing dan tekan Ok.

Sekarang, kita akan mulakan langkah membina GUI untuk carta bar ringkas kita ini.

LANGKAH 1

Pergi ke Toolbar dan cari kawalan Label dan masukkan dalam Form kita.

bar-1.png

bersambung...

Edited by LanoX

Share this post


Link to post
Share on other sites

Masukkan label-label yang lain dan susun seperi ilustrasi berikut.

bar-2.png

Pastikan Text pada setiap Label ditukar (pergi ke Properties Window) dengan nama-nama seperti yang diilustrasikan di atas. Untuk membuat anggaran yang baik.. boleh gunakan kedudukan berikut untuk meletakkan setiap label. Sila lihat Location dalam Properties Window setiap label.

label Jan ..... 12, 55

label Feb ...... 12, 95

label Mar ..... 12, 135

label Apr ..... 12, 175

bar-3.png

LANGKAH 2

Selanjutnya, double-klik pada form kita ini dan anda akan dibawa ke bahagian Code View. Sekarang kita akan masukkan terlebih dahulu kod ini untuk mengimport komponen Drawing.

Imports System.Drawing
Imports System.Drawing.Drawing2D
Pastikan kedudukan kod tersebut berada diatas sekali iaitu sebelum baris Public Class Form1. Selanjutnya.. masukkan kod ini di dalam Public Class Form1..
Protected Overrides Sub OnPaint(ByVal pe As PaintEventArgs)
Dim g As Graphics = pe.Graphics

Dim pn As New Pen(Color.Black)
Dim pt1 As New Point(40, 50)
Dim pt2 As New Point(40, 210)
Dim pt3 As New Point(40, 210)
Dim pt4 As New Point(260, 210)

g.DrawLine(pn, pt1, pt2)
g.DrawLine(pn, pt3, pt4)

Dim rect1 As New Rectangle(50, 50, 80, 30)
Dim rect2 As New Rectangle(50, 90, 200, 30)
Dim rect3 As New Rectangle(50, 130, 160, 30)
Dim rect4 As New Rectangle(50, 170, 120, 30)

Dim aBrush As New LinearGradientBrush(rect1, Color.Green, Color.WhiteSmoke, LinearGradientMode.Vertical)
Dim bBrush As New LinearGradientBrush(rect2, Color.Purple, Color.WhiteSmoke, LinearGradientMode.Vertical)
Dim cBrush As New LinearGradientBrush(rect3, Color.DarkGoldenrod, Color.WhiteSmoke, LinearGradientMode.Vertical)
Dim dBrush As New LinearGradientBrush(rect4, Color.Salmon, Color.WhiteSmoke, LinearGradientMode.Vertical)

g.FillRectangle(aBrush, rect1)
g.FillRectangle(bBrush, rect2)
g.FillRectangle(cBrush, rect3)
g.FillRectangle(dBrush, rect4)

End Sub

Sekarang kita telah bersedia untuk menguji kod yang ada ini. Jika anda kaji kod diatas, terdapat penggunaan grafik yang tertentu seperti Pen, Point, Rectangle, LinerGradientBrush dan FillRectangle. Gabungan semua ini boleh digunakan membina sebuah carta bar yang menarik. Anda boleh integrasikan fungsi asas ini dengan pangkalan data dan sebagainya dan ini boleh menambah nilai aplikasi yang anda bina pada masa depan. Selain itu, GDI+ begitu meluas penggunaannya kerana komponen ini penting dalam menggerakkan fungsi grafik dalam VB misalnya perisian multimedia dan permainan.

bar-4.png

Carta Bar diatas menggambarkan laporan prestasi pelajar untuk tempoh 4 bulan pertama. Perhatikan bahawa saiz rectangle menjadi penentu kepada panjangnya bar berkenaan. Oleh itu, kita boleh menggunakan saiz horizontal untuk membezakan panjang bar berkenaan iaitu saiz 80, 200, 160 dan 120. Perhatikan juga bagaimana kita gunakan LinearGradientBrush untuk memberikan efek khas yang menarik pada bar berkenaan.

Sehingga berjumpa lagi di lain episod. Wassalam. :D

Edited by LanoX

Share this post


Link to post
Share on other sites

LanoG dah jadi LanoX .. ??? :P
huhu...tu LanoG updated version :D..

thanx LanoG/X...kita perlukan lebih tips and tricks :)...

kalu bole disentuh pasai subclassing lagi cun...

Edited by betik

Share this post


Link to post
Share on other sites

huhu...tu LanoG updated version :D..

thanx LanoG/X...kita perlukan lebih tips and tricks :)...

kalu bole disentuh pasai subclassing lagi cun...

aku rasa lagi baik tukar terus kepada Lano GX ... he he he :lol:

apa apa pun teruskanlah untuk menghidupkan Kelab nie..

nanti lepas nie aku nak Betik pulak bagi tutorial.. :blush:

Share this post


Link to post
Share on other sites

aku rasa lagi baik tukar terus kepada Lano GX ... he he he :lol:

apa apa pun teruskanlah untuk menghidupkan Kelab nie..

nanti lepas nie aku nak Betik pulak bagi tutorial.. :blush:

Huhuhu... "X" tu sesajer jer tukar nama sikit... ah'ha memang nak tunggu artikel tutorial dari en. Betik nie.. hahahaha :D

Share this post


Link to post
Share on other sites

go betik go...

tunjukkan kepoyoan ko..

haha... :lol:

Crazy_labelle taknak buat tutorial gak ker... hehehe. By the way.. kalau ada masa terluang hujung minggu nie, aku nak tambah artikel tutorial untuk kelab nie lah. Sekurang2nya projek2 kecik yang menarik untuk dicuba dan explore. Err... bro TJ masih busy lagi ker.. :D

Aku nak cadangkan, setiap tutorial diberi tajuk dan dalam kategori apa serta dalam bahasa apa... nie supaya senang nak rujuk nanti. Contoh kategori tutorial misalnya: Pangkalan Data, Permainan, Multimedia, Grafik, Internet, Networking dan sebagainya.

Edited by LanoX

Share this post


Link to post
Share on other sites

setuju2...

sbb skang ni ramai budak2 kecik

yg x beberape terel sgt n blur2 lg

nak carik info tambahan kat sini...

sila lah beri panduan kpd kami.. huhu...

Crazy_labelle taknak buat tutorial gak ker... hehehe

boleh2.. tutorial bagaimana nak menjaga kasut dgn betulll.. ekeke.. :lol:

Share this post


Link to post
Share on other sites

boleh2.. tutorial bagaimana nak menjaga kasut dgn betulll.. ekeke.. :lol:

Nie pun boleh sebab dalam kategori tutorial jugak. Tapi kena letak kat bahagian Hobby and Living lah.. hahahaha.

Visual BASIC 2008 Express Edition

Kategori: Multimedia

PEMAIN MUZIK RINGKAS

LanoG (May 2008)

vb2008-00.png

Bertemu lagi kita dalam episod seterusnya tutorial dalam pengaturcaraan VB 2008 Express Edition. Sekarang kita akan mengikuti tutorial 'express' yang hanya memerlukan beberapa baris code sahaja. Selebihnya hanya bermain dengan drag & drop sahaja... hahaha. Ini adalah untuk memudahkan kita memahami akan gunakan alatan yang dah namanya visual, sudah tentulah kita nak buat secara visual jugak kan. Projek seterusnya kali ini ialah membina pemain muzik melalui komponen Media Player dalam komputer kita. Kita akan masukkan komponen sedia ada ini untuk membolehkan program kita memainkan muzik yang kita suka.... :D Tanpa membuang masa lagi, kita mulakan sekarang... dengan membuka satu projek baru seperti biasa.

tictactoe-02.png

Langkah 1

Kita perlu menggunakan komponen COM iaitu komponen sedia ada dalam Windows. Oleh itu, kawalan MediaPlayer boleh diperolehi dalam bahagian ini. Caranya, pergi ke menu Tools > Choose ToolBox Items

mp-01.png

Tetingkap berikut akan dipaparkan untuk anda memilih. Pilih tab COM, dan scroll ke bawah untuk memilih Windows Media Player.

mp-02.png

Selepas itu, tandakan pilihan Windows Media Player dan klik Ok.

bersambung...

Edited by LanoX

Share this post


Link to post
Share on other sites

Berikutnya, halakan cursor anda ke dalam Form sedia ada dan tarik dan letakkan dalam kedudukan sesuai seperti berikut.

mp-03.png

Kemudian, ambil kawalan Button dari toolbar dan letakkan dalam Form berkenaan seperti berikut. Jangan lupa ubah label nama butang berkenaan kepada Buka Fail. Anda boleh ubah dalam Properties.

mp-04.png

Langkah 2

Seterusnya kita akan masukkan kawalan Open File Dialog iaitu kawalan yang akan membolehkan kita menggunakan dialog untuk mencari fail pilihan nanti. Ini amat penting supaya kita boleh memilih fail lagu mana yang ingin dimainkan nanti. Caranya ialah dengan pergi ke toolbox dan tarik kawlan OpenFileDialog ke dalam Form.

mp-05.png

Kawalan ini akan ditandakan pada bahagian bawah IDE kita seperti berikut.

mp-06.png

Klik pada OpenFileDialog berkenaan dan pergi ke Properties. Dalam properties, anda cuba cari Filter dan masukkan teks berikut disebelahnya..... All files (*.*)|*.*

Langkah 3

Pergi kembali ke Form dan double-klik pada butang "Pilih Fail". Anda akan memasuki view code.... seterusnya masukkan kod berikut selepas Public Class Form1.

    Private Sub Button1_Click_1(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles_
 Button1.Click
        OpenFileDialog1.ShowDialog()
        AxWindowsMediaPlayer1.URL = OpenFileDialog1.FileName
    End Sub

Tujuan kod diatas ialah untuk membolehkan paparan tetingkap Open File Dialog apabila pengguna menekan butang kawalan Buka Fail dan seterusnya boleh memilih lagu dalam mana-mana folder dalam komputer mereka.

bersambung...

Edited by LanoX

Share this post


Link to post
Share on other sites

Ok.. sekarang masa untuk menguji Pemain Muzik Ringkas kita ini. Cuba tekan butang Run dan mulalah gunakan program ringkas ini. Buka fail dengan klik pada butang "Buka File" dan pilih lagu kesukaan anda dalam folder masing2.. dalam kes ini, saya akan pilih lagu dari kumpulan Green Day.. hehehehe :D

mp-08.png

mp-09.png

So, anda boleh layan lagu2 kegemaran anda sambil belajar programming... hehehe. Sekian dahulu daripada saya, dan sememangnya aplikasi multimedia yang lebih komplek memerlukan lagi banyak coding dan pengubahsuaian. Tutorial ringkas ini hanyalah untuk memberi sedikit pengenalan bagaimana satu langkah yang mudah membolehkan kita menghasilkan aplikasi yang seronok untuk dibangunkan. Berjumpa lagi dalam tutorial akan datang.... Majulah Programming Untuk Semua! :D

Edited by LanoX

Share this post


Link to post
Share on other sites

wahhh... baru ajer aku terfikir nak suruh ko buat tutorial berkenaan dengan media player.. ko dah buat dulu...

huhuhuh.. :)

kalau macam tu, bole guna untuk buat karaoke nie... :lol:

Share this post


Link to post
Share on other sites

wahhh... baru ajer aku terfikir nak suruh ko buat tutorial berkenaan dengan media player.. ko dah buat dulu...

huhuhuh.. :)

kalau macam tu, bole guna untuk buat karaoke nie... :lol:

Hehehe... buleh jer nak karaoke. Cakap pasal karaoke nie... dah lebih 3 tahun aku tak berkaraoke. Lama dah tak test suara nie... dulu selalu gak ler karaoke dan ingatkan buleh ler masuk AF nanti.. kekekeke. :lol:

Share this post


Link to post
Share on other sites
Visual BASIC 2008 Express Edition
Kategori: Internet


MEMBINA MINI WEB BROWSER

LanoG (May 2008)

vb2008-00.png


Salam bahagia, dan bertemu kembali kita dalam siri tutorial dalam VB 2008 Express Edition. Dalam episod kali ini, kita akan menyingkap satu lagi kelebihan yang ada dalam bahasa ini iaitu fungsi browser. Kita sedia maklum bahawa terdapat pelbagai jenis web browser yang terdapat pada hari ini misalnya Internet Explorer, Firefox, Opera, Netscape Navigator, Safari dan sebagainya. Namun begitu, apa kata kita membuat sendiri web browser dengan nama kita sendiri dan sudah tentu projek ringkas ini amat menarik untuk dibuat. Seperti biasa, pendekatan kita ialah untuk mengurangkan coding... jadi dalam tutorial ini, banyak ditunjukkan langkah2 yang perlukan beserta ilustrasi.

Tanpa membuang masa, mari kita memulakan tutorial ini.. :D

Buka VB 2008 Express Edition, dan seperti biasa buat satu projek baru dan sebuah Form akan dipaparkan dalam Design IDE anda.

tictactoe-02.png

LANGKAH 1

Besarkan Form1 berkenaan sedikit supaya boleh muat sebuah laman web yang biasa didalamnya nanti. Selepas itu, pergi ke Toolbox dan cari kawalan WebBrowser didalamnya.

browser-01.png

Kemudian tarik ke bahagian Form1 dan letakkan browser berkenaan. Kita dapati kawalan browser melekat pada keseluruhan Form1, oleh itu.. kita perlu enablekan "docking" kepada container. Caranya ialah dengan klik pada tanda arrow kecil disudut atas-kanan Form1 yang menunjukkan Web Browser Task... pilih "Undock in Parent Container" seperti berikut.

browser-08.png

bersambung... Edited by LanoX

Share this post


Link to post
Share on other sites

LANGKAH 2

Adjust saiz browser anda dan berikan sedikit ruang di bahagian atas suapaya kawalan lain boleh dimasukkan kemudian. Sekarang kita dah ada kawalan Browser dalam Form1 ini seperti berikut.

browser-02.png

Kemudian, masukkan kawalan TextBox ke dalam Form1 berkenaan dengan memilih kawalan TextBox dari Toolbox.

browser-03.png

Selain TextBox, masukkan juga kawalan Button yang biasa dari Toolbox dan susun seperti dalam ilustrasi berikut.

browser-04.png

LANGKAH 3

Ubah nama setiap Button berkenaan kepada berikut supaya mudah untuk kita mengawal browser web ini nanti. Cara nak ubah pergi ke Properties dan ubah Text dengan nama2 yang diberikan berikut.

Button1 ---> Carian (digunakan untuk membukan web berdasarkan URL yang ditaip dalam textbox nanti)

Button2 ---> Putera.com (laman web ini dibuka jika tekan butang berkenaan, seperti Home)

Button3 ---> Segarkan (ialah fungsi refresh)

Button4 ---> Undur (ialah fungsi Back atau kembali ke belakang)

Button5 ---> Depan (ialah fungsi Forward atau kembali ke hadapan)

Button6 ---> Henti (ialah fungsi Stop atau berhenti)

browser-05.png

bersambung...

Edited by LanoX

Share this post


Link to post
Share on other sites

LANGKAH 4

Sekarang kita akan memasukkan kod satu persatu dalam View Code mode. Untuk memasukkan kod, kita akan double-klik pada setiap kawalan yang ada. Ikuti langkah-langkah berikutnya.

1. Double-klik pada butang Carian dan masukkan kod berikut.

        Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles_
 Button1.Click
        WebBrowser1.Navigate(TextBox1.Text)
    End Sub
Kembali semula ke Design Mode. 2. Double-klik pada butang Putera.com dan masukkan kod berikut.
    Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles_
 Button2.Click
        WebBrowser1.Navigate("http://forum.putera.com")
    End Sub
kembali semula ke Design mode. 3. Double-klik pada butang Segarkan dan masukkan kod berikut.
    Private Sub Button3_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles_
 Button3.Click
        WebBrowser1.Refresh()
    End Sub
kembali semula ke Design mode. 4. Double-klik pada butang Undur dan masukkan kod berikut.
    Private Sub Button3_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles_
 Button3.Click
        WebBrowser1.GoBack()
    End Sub
Kembali semula ke Design Mode. 5. Double-klik pada butang Depan dan masukkan kod berikut.
    Private Sub Button5_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles_
 Button5.Click
        WebBrowser1.GoForward()
    End Sub
Kembali semula ke Design Mode. 6. Double-klik pada butang Henti dan masukkan kod berikut.
    Private Sub Button6_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles_
 Button6.Click
        WebBrowser1.Stop()
    End Sub

Sekarang kita sudah selepas memasukkan kod ke dalam setiap butang kawalan sama seperti yang ada dalam browser2 biasa. Untuk menguji browser mini kita ini, cuba klik pada butang RUN dan jalankan aplikasi ini. Apabila aplikasi bermula, ujian pertama ialah dengan klik pada butang Putera.com iaitu kawalan seolah2 Home iaitu kita setkan laman web putera.com sebagai web yang kerap kita masuk dengan memudahkan carian hanya klik pada satu butang sahaja.

browser-06.png

Selanjutnya, kita uji pula dengan menaip URL ke dalam textbox yang disediakan, kemudian kita tekan butang Carian untuk melayari lokasi yang diingini. Dalam contoh ini, saya akan taip URL... www.google.com

browser-07.png

Kita telah selesai membina satu aplikasi browser yang ringkas. Kita boleh customizekan apa sahaja fungsi yang kita ingini dan jadikan ini pilihan peribadi... selain tidak lagi perlu bergantung hanya kepada browser2 yang lain. Cuba dan ubahsuai browser ini dan pastikan sambungan internet anda berfungsi... :D Sekian sahaja untuk kali ini... diharap kita akan berjumpa lagi dalam tutorial akan datang. Selamat maju jaya... :lol:

Edited by LanoX

Share this post


Link to post
Share on other sites

huhu....baguih LanoG/X...thanks...

//aku kalu wat tutrial kompom xde org paham...bahasa berterabur :D...maklom la, bahsa Turki je aku reti :D...

Share this post


Link to post
Share on other sites

selamat datang nizam... boleh ler share apa2 yang patut :D nampaknya makin bertambah ramai ahli-ahli kelab programming nie. Lagi ramai lagi bagus kan, pastu buleh ler buat persatuan... hahahaha :)

huhu....baguih LanoG/X...thanks...

//aku kalu wat tutrial kompom xde org paham...bahasa berterabur :D...maklom la, bahsa Turki je aku reti :D...

Bahasa apa pun tak kisah, en. betik.... ramai yang paham bahasa Turki kat sini.. hehehe. Yang penting kita share maklumat dan pengetahuan walaupun sedikit. :blush:

Edited by LanoX

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...