Contoh Form Ganti Password

HARDAVID KENDA YOKI

SISTEM INFORMASI

BENGKULU, Juni 2011

Assalamualaikum.Wr.Wb

Pada Tutorial kali ini saya akan membahas bagaimana cara membuat aplikasi program Ganti Password menggunakan bahasa pemrograman Visual Basic dan MySql sebagai database-nya.  Sebelum kita mulai sebaiknya anda juga telah menginstal MySql Connector karena software ini dibutuhkan untuk menghubungkan Visual Basic dengan MySql.

Berikut ini gambaran tampilan aplikasi program yang telah jadi :

Langsung saja, sekarang ikuti petunjuk berikut ini:

1. Buatlah database Mysql menggunakan Xampp dengan ketentuan sebagai berikut:

(Jika anda belum mengetahui cara membuat database, silahkan pelajari dahulu tutorial saya tentang cara membuat database, lihat di kategori Database di blog ini).

Setelah database dibuat jangan lupa isikan dengan ketentuan sebagai berikut : User Id : Pengguna1,  Password : 11111 ; UserId : Pengguna2, Password : 22222

2. Buat pengaturan koneksi pada MySql Connector dengan ketentuan di berikut :

3. Nah, sekarang kita telah memiliki database dbPengguna dan Data Source Name CnnPengguna. Dua hal ini nantinya akan diperlukan dalam penulisan coding di Visual basic.

4. Sekarang buka lah visual basic anda kemudian tambahkan komponen ComboBox dari Microsoft Form 2.0 Object Library seperti gambar berikut.

5. Masukkan komponen-komponen berikut ini kedalam Form : 4 buah Label, 1 buah ComboBox dari Microsoft Form 2.0 Object Library, 2 buah TextBox dan 2 buah CommandButton. Susun dan atur seperti gambar di bawah ini.

6. Buka jendela properties kemudian buat pengaturan sebagai berikut :

7. Sehingga tampilan pada Form sebagai berikut :

8. Sekarang saatnya kita menulis Coding untuk Form yang kita buat, ketikkan Coding berikut pada halaman Coding.

Sub Form_Load()
Call BukaDatabase
cmbPgn.AddItem (“Pengguna1”)
cmbPgn.AddItem (“Pengguna2”)
End Sub

Private Sub cmdOk_Click()
Set RsPengguna = New ADODB.Recordset
RsPengguna.Open “SELECT * FROM Pengguna ” _
& ” WHERE UserId ='” & cmbPgn.Text & “‘” _
& ” AND PassId ='” & txtPassLm.Text & “‘”, _
KonekDb, adOpenDynamic, adLockBatchOptimistic

If RsPengguna.BOF Then
MsgBox “PASSWORD SALAH”, vbInformation + vbOKOnly, “Error”
cmbPgn.Text = “”
txtPassLm.Text = “”
txtPassBru.Text = “”
Else
Dim Pass As String
Dim User As String
Pass = txtPassBru.Text
User = cmbPgn.Text
SQL = “”
SQL = “UPDATE Pengguna SET ” _
& ” PassId='” & Pass & “‘” _
& ” WHERE UserId='” & User & “‘”
KonekDb.Execute SQL, , adCmdText
MsgBox “PASSWORD TELAH BERHASIL DIRUBAH”, vbInformation + vbOKOnly, “Error”
cmdOk.Caption = “TUTUP”
If cmdOk.Caption = “TUTUP” Then
Unload Me
End If
End If
End Sub

Seperti inilah tampilan Coding pada halaman Coding, lihat gambar berikut :

9. Sekarang tambahkan Module pada Project kita, caranya: Klik Project > Add Module

10. Kemudian ketikkan Coding berikut :

Option Explicit
Public KonekDb As New ADODB.Connection
Public RsPengguna As ADODB.Recordset
Public StrKonekDb As String
Public strSQL, SQL As String
Public Sub BukaDatabase()
Set KonekDb = New ADODB.Connection
StrKonekDb = “Provider=MSDASQL.1;Persist Security Info=False;Data Source=CnnPengguna”
On Error Resume Next
If KonekDb.State = adStateOpen Then
KonekDb.Close
Set KonekDb = New ADODB.Connection
KonekDb.Open StrKonekDb
Else
KonekDb.Open StrKonekDb
End If
If Err.Number <> 0 Then
MsgBox “GAGAL KONEKSI KE DATABASE”, vbOKOnly, “Kesalahan”
End
End If
End Sub

Seperti inilah tampilan coding pada halaman Module :


11. Sampai disini Project yang kita buat telah selesai, sekarang cobalah klik start untuk menjalankan program, sehingga tampilan seperti berikut ini :

12. Kemudian Cobalah pilih Pengguna1 untuk User, pada kotak isian Password lama masukkan 11111 (karena password untuk saat ini 11111 seperti yang telah kita isikan pada database pada langkah diatas di tutorial ini), kemudian masukkan Password Baru yaitu 33333 lalu klik tombol KONFIRMASI. Jika Password lama yang anda masukkan benar maka akan keluar pernyataan PASSWORD TELAH BERHASIL DIRUBAH, untuk memastikannya cobalah buka database, lihatlah password pada database untuk Pengguna1 telah berubah menjadi 33333. Namun jika Password lama yang anda masukkan salah maka keluar pernyataan PASSWORD SALAH.

Sampai disini tutorial saya kali ini jika terdapat kekurangan pada aplikasi program yang saya buat ini, saya mohon masukannya.

Selamat Berkreativitas

 

Contoh Pembuatan Database MySql Dengan Xampp

HARDAVID KENDA YOKI

SISTEM INFORMASI

BENGKULU, JUNI 2011

Assalamualaikum.Wr.Wb

Di tutorial kali ini saya akan coba membahas bagaimana cara pembuatan Database MySql menggunakan fasilitas Xampp. Pada contoh ini Database nya masih sangat sederhana, sehingga mudah di mengerti oleh mereka yang masih pemula. Untuk pengembangannya silahkan anda coba berkreativitas sendiri dan bagi yang mahir saya sangat mengharapkan saran dan masukannya, demi kemajuan bersama…

Gambaran umumnya sebagai berikut, Database nya akan saya beri nama Nilai Mahasiswa yang mempunyai 3 tabel yaitu : DtMahasiswa, DtMataKuliah dan Nilai.

Langsung saja kita mulai

1. Buka Xampp dengan cara klik kanan pada shortcut Xampp kemudian klik Open.

2. Klik tombol Start pada Apache, kemudian klik tombol Start pada MySql.

3. Pastikan Apache dan MySql dalam keadaan Running.

4. Buka Internet Explorer dengan cara klik start. Atau boleh juga menggunakan Browser lain.

5. Klik shortcut Internet Explorer.

6. Sekarang kita telah masuk ketampilan halaman muka Microsoft Internet Explorer. Selanjutnya masukkan alamat berikut ke kolom Address : http://localhost/phpmyadmin

7. Klik Go.

8. Gambar berikut ini adalah tampilan halaman muka Xampp.

9. Sekarang kita telah siap untuk membuat Database. Langkah pertama yang harus dilakukan adalah memberi nama pada database kita. Pada tutorial ini nama Databasenya adalah NilaiMahasiswa. Caranya pada kolom Create new database ketik NilaiMahasiswa kemudian klik tombol Create disampingnya.

10. Perhatikan, sekarang database NilaiMahasiswa telah dibuat/tercipta.

11. Setelah nama database selesai dibuat sekarang saatnya kita membuat tabel-tabel yang akan dibutuhkan. Seperti yang saya jelaskan sebelumnya database yang kita buat mempunyai 3 tabel, yaitu DtMahasiswa, DtMataKuliah dan Nilai. Untuk langkah pertama kita membuat tabel DtMahasiswa terlebih dahulu, caranya Ketik DtMahasiswa pada kolom Name (Karena Nama tabel adalah DtMahasiswa), dan 4 pada kolom Number of fields (Karena fields yang akan dibuat berjumlah 4), lalu klik Go

12. Lengkapi dengan ketentuan berikut:
Field : NPM, Type : VARCHAR, Length/Values : 10
 Field : NamaMhs, Type : VARCHAR, Length/Values : 20
 Field : JKlmn, Type : VARCHAR, Length/Values : 10
Field : Alamat, Type : VARCHAR, Length/Values : 30

Seperti terlihat pada gambar berikut ini.

13. Jadikan NPM sebagai Primary Key, dengan cara klik pilihan pada Index kemudian klik Primary

14. Selanjutnya Klik tombol Save untuk menyimpan tabel.

15. Sekarang tabel DtMahasiswa telah selesai dibuat dan perhatikan NPM menjadi Primary Key( ditandai dengan adanya garis bawah).

16. Selanjutnya kita membuat tabel DtMataKuliah dengan cara Klik
Database : NilaiMahasiswa

17. Seperti cara pembuatan tabel DtMahasiswa, pada pembuatan tabel DtMataKuliah caranya pun sama yaitu pada Name ketik DtMataKuliah dengan Number of fields 3, kemudian klik Go

18. Lengkapi dengan ketentuan berikut.
Field : KodeMK, Type : VARCHAR, Length/Values : 5, Index : PRIMARY

19. Untuk field yang ke 2, Lengkapi dengan ketentuan berikut.
Field : NamaMK, Type : VARCHAR, Length/Values : 20

20. Untuk field yang ke 3, lengkapi dengan ketentuan berikut.
Field : SKS, Type : INT,  Length/Values : 1

21. Setelah selesai klik tombol Save untuk menyimpan tabel.

22. Sekarang tabel DtMataKuliah telah selesai dibuat. Perhatikan KodeMK sebagai Primary Key (ditandai dengan garis bawah).

23. Langkah berikutnya kita membuat tabel yang ke 3 yaitu tabel Nilai caranya klik Database : NilaiMahasiswa

24. Isi dengan Ketentuan sebagai berikut. Pada Name ketikkan Nilai dengan Number of fields 3, lalu klik tombol Go

25. Untuk field ke 1, lengkapi dengan ketentuan berikut.
Field : NPM, Type : VARCHAR, Length/Values : 10

26. Untuk field ke 2, lengkapi dengan ketentuan berikut.
Field : KodeMK, Type : VARCHAR, Length/Values : 5

27. Untuk field ke 3, lengkapi dengan ketentuan berikut.
Field : NilaiAngka, Type : INT Length/Values : 3

28. Klik tombol Save untuk menyimpan.

29. Tabel Nilai telah selesai dibuat.

30. Sampai disini Database NilaiMahasiswa telah selesai dibuat. Untuk memastikan bahwa Database NilaiMahasiswa telah tersimpan, cobalah buka drive C pada komputer anda, lalu klik xampp > mysql > data. Perhatikan folder dengan nama NilaiMahasiswa telah ada.

Demikian tutorial saya kali ini semoga bermanfaat.

LAMPIRAN :

Aplikasi Program Pemutar Musik

HARDAVID KENDAYOKI

SISTEM INFORMASI

BENGKULU, JUNI 2011

Assalamualaikum.Wr.Wb

Apakah anda pernah menggunakan Winamp? Saya yakin aplikasi program ini sudah tidak asing lagi bagi anda pecinta musik. Yup, Winamp merupakan software yang biasa digunakan untuk memutar/ memainkan musik/ Audio. Namun terfikirkah oleh anda bagaimana cara pembuatannya ???

Nah, pada tutorial kali ini saya akan mencoba membahas bagaimana cara pembuatan aplikasi program pemutar musik seperti Winamp menggunakan bahasa pemrograman Visual basic 6.0, namun masih sederhana. Dan saya harap sedikitnya anda telah mengenal dasar pemrograman menggunakan bahasa pemrograman Visual basic (Untuk panduan pembelajaran dasar pemrograman Visual basic 6.0, anda dapat membaca tulisan saya lainnnya).

Gambar dibawah ini merupakan tampilan aplikasi program pemutar musik kita setelah jadi.

Tidak sabar lagi? Mari kita mulai…..

Ikuti langkah-langkah berikut ini :

1. Buka/ jalankan Visual basic 6.0 anda sehingga tampil seperti gambar dibawah ini, pastikan Standard EXE terpilih, kemudian klik Open.

2. Setelah anda meng-Klik tombol Open maka tampil Stage seperti dibawah ini, disinilah semua pengaturan pembuatan program akan dilakukan, baik desain, coding dan lain sebagainya.

3. Pada Tutorial kali ini kita membutuhkan komponen tambahan yaitu : MMControl dan CommonDialog. Untuk memunculkannya, klik Project > Components, seperti yang ditunjukkan pada gambar dibawah ini :

4. Beri tanda centang pada kotak centangan Microsoft Common Dialog Control 6.0 dan Microsoft Multimedia Control 6.0

5. Klik tombol Apply kemudian klik OK/Close

6. Sekarang perhatikan Microsoft Common Dialog Control 6.0 dan Microsoft Multimedia Control 6.0

Telah tampil di kelompok komponen.

7. Sekarang kita kembali ke Form. Atur lebar dan tinggi Form sehingga ukurannya diperkirakan seperti gambar di bawah ini:

8. Masukkan/ tambahkan beberapa komponen yang dibutuhkan kedalam area Form. Komponen yang dibutuhkan yaitu: 1 buah Label, 4 buah CommandButton, 1 buah MMControl dan 1 buah CommonDialog. Hasilnya seperti gambar dibawah ini.

9. Sekarang masuklah kejendela Properties untuk melakukan pengaturan.

10. Aturlah semua objek dan komponen dengan ketentuan sebagai berikut:

11. Gambar dibawah ini adalah tampilan Form setelah selesai dilakukan pengaturan di jendela Properties. (Perhatian : pada saat program dijalankan MMControl dan CommonDialog tidak akan tampil)

12. Sekarang waktunya untuk menuliskan Coding yang berfungsi sebagai perintah, agar aplikasi program yang kita buat bisa digunakan. Caranya Klik View > Code

13. Lalu ketikkan Coding di bawah ini pada halaman Coding

Private Sub cmdCari_Click()

On Error Resume Next

BukaFile.Filter = “MP3|*.mp3|”

BukaFile.ShowOpen

Mmc.FileName = BukaFile.FileName

Mmc.Command = “close”

Mmc.Command = “open”

lblLagu.Caption = BukaFile.FileTitle

End Sub

Private Sub cmdKeluar_Click()

End

End Sub

Private Sub cmdPlay_Click()

Mmc.Command = “seek”

Mmc.Command = “play”

End Sub

Private Sub cmdStop_Click()

Mmc.Command = “seek”

Mmc.Command = “stop”

End Sub

14. dibawah ini tampilan halaman Coding setelah diisi dengan Coding diatas.

15. Sekarang Audio Player anda telah jadi, cobalah klik Start untuk menjalankan program.

16. Cobalah masukkan lagu dengan cara klik tombol CARI (Perhatian : jenis File yang diterima berformat MP3), setelah lagu masuk, klik tombol PLAY untuk memainkan/ memutar lagu, jika ingin berhenti klik tombol STOP, jika ingin menutup program klik tombol KELUAR. Bagaimana mudah bukan..???

Sekarang andapun bisa memperindah tampilan aplikasi program Audio Player anda, cobalah berkreasi dengan desain. Gambar dibawah ini merupakan contoh tampilan Audio Player yang telah diberi sentuhan desain. Saya yakin anda juga bisa…

SELAMAT BERKREATIVITAS!!!

Teknik Frame By Frame

HARDAVID KENDAYOKI
SISTEM INFORMASI
BENGKULU, JUNI 2011

Assalamualaikum Wr.Wb

Pada kesempatan kali ini saya saya akan mencoba membahas bagaimana cara pembuatan animasi menggunakan Macromedia Flash 8 dengan teknik Frame By Frame. Intinya animasi akan terbentuk dari perubahan setiap gambar dalam setiap frame. Sebelum melanjutkan tutorial ini sebaiknya anda telah mempelajari dasar-dasar menggunakan Macromedia flash 8, karena dalam pembahasan ini saya tidak membahas hal-hal dasar tentang Macromedia flash 8 dan saya anggap anda telah mengetahui hal dasar tentang Macromedia flash 8.

Pada tutorial kali ini dibutuhkan 4 buah objek gambar. Gambar terserah anda yang terpenting masing-masing objek gambar mempunyai perbedaan antara satu dengan lainnya (Pada Tutorial ini perhatikan bahwa setiap objek gambar mempunyai perbedaan pada sayapnya). Dari setiap perbedaan masing-masing gambar inilah nantinya akan tercipta sebuah animasi.

t fbf 1

Oke, tidak usah berlama2, sekarang marilah kita mulai pembuatan animasi menggunakan teknik Frame By Frame
1. Buka aplikasi Macromedia Flash 8 anda sehingga tampilan seperti berikut ini :

2. Klik File > Import > Import to Stage (Tujuannya untuk meng-import gambar yang dibutuhkan).

3. Pilih file gambar yang akan di import, dalam tutorial ini file yang saya butuhkan bernama Kumbang1 dengan format PNG, kemudian klik Open.

4. Perhatikan bahwa file gambar yang diimport telah masuk kedalam Stage/Kanvas Macromedia Flash 8.

5. Klik kanan pada objek gambar kemudian pilih Break Apart (Tujuannya untuk memecah gambar sehingga menjadi format bmp, agar bisa dipotong-potong sesuai keinginan). Karena Pada Tutorial ini saya membutuhkan 4 buah gambar pada kolom kedua, sedangkan gambar lainnya tidak akan saya butuhkan.

6. Klik/pilih Free Transform Tool, kemudian blok pada kelompok gambar yang tidak dibutuhkan, lalu tekan tombol Delete pada keyboard.

7. Perhatikan sekarang kelompok gambar pada kolom pertama telah terhapus.

8. Lakukan hal yang sama untuk menghapus gambar pada kelompok gambar di kolom ketiga dan keempat, sehingga yang tersisa hanya kelompok gambar pada kolom kedua, karena gambar inilah yang akan saya butuhkan dalam pembuatan animasi di tutorial ini.

9. Sekarang kita akan memotong kelompok gambar yang ada untuk dijadikan empat buah gambar, caranya klik Free Transform Tool, lalu blok pada gambar pertama

10. Klik kanan pada objek gambar kemudian pilih Convert to Symbol.

11. Ganti Name menjadi gambar1, Type Movie clip kemudian klik oke, atau boleh juga dijadikan Type Graphic.

12. Perhatikan sekarang gambar telah masuk kedalam Library, dengan Name : gambar1 dan Type : Movie clip. (Jika Library tidak muncul, cobalah klik Window kemudian klik Library lalu klik tanda panah kecil di sebelah kanan Stage/Kanvas).

13. Lakukan hal yang sama untuk objek gambar berikutnya, sehingga didalam Library terdapat 4 objek gambar masing masing dengan Name : gambar1, gambar2, gambar3, gambar4 dan masing-masing berType : Movie clip.

14. Blok gambar2, gambar3, gambar4 pada Stage/Kanvas kemudian tekan tombol Delete pada Keyboard, jangan khawatir gambar yang telah anda buat tidak akan hilang karena semuanya telah tersimpan dalam Library.

15. Perhatikan di Stage/Kanvas anda sekarang hanya tersisa gambar1. Selanjutnya drag gambar1 pada Stage/Kanvas lalu posisikan pada tengah Stage/Kanvas, lalu klik kanan pada Stage/Kanvas lalu pilih Rulers (Tujuannya untuk mengaktifkan garis bantu yan dibutuhkan dalam pengaturan penempatan setiap objek gambar).

16. Perhatikan bahwa sekarang fasilitas Rulers telah diaktifkan. Sekarang klik pada sisi atas Rulers kemudian drag sampai ke posisi objek gambar. Lakukan hal yang sama pada sisi kiri Rulers. (Jangan khawatir karena garis bantu ini nantinya tidak akan terlihat/muncul pada animasi).

17. Sampai batas ini Frame 1 telah terisi dengan gambar1, sekarang buatlah frame 2 dan isikan dengan gambar 2, caranya klik kanan pada frame 2 lalu pilih Insert Blank Key Frame.

18. Perhatikan, sekarang frame 2 telah berhasil di buat, dan gambar1 pada Stage/Kanvas menghilang (Sebenarnya gambar1 pada Stage tidak hilang, namun karena posisi sekarang pada frame 2 makanya gambar1 tidak terlihat).

19. Selanjutnya kita akan mengisi Stage/Kanvas pada frame 2 dengan gambar2. Caranya buka Library, kemudian drag gambar2 pada area Stage/Kanvas dan posisikan persis seperti gambar1 sebelumnya (Inilah fungsi Rulers yang telah di disinggung tadi).

20. Sekarang buatlah Frame 3 seperti langkah sebelumnya dan tempatkan gambar3 pada Stage di Frame 3, lanjutkan dengan Frame 4 sehingga akhirnya setiap masing-masing Stage pada Frame berisi, yaitu gambar1 ditempatkan pada Stage di Frame 1, gambar2 ditempatkan pada Stage di Frame 2, gambar3 ditempatkan pada Stage di Frame 3 dan gambar4 ditempatkan pada Stage di Frame 4.

21. Hingga disini sebenarnya animasi yang anda buat telah selesai, cobalah lihat hasil animasi yang anda buat dengan menekan tombol Ctrl + Enter pada Keyboard anda. Bagaimana sudah jadi kan???. Namun animasi yang anda buat saat ini tidak akan bisa dijalankan pada Komputer/PC yang tidak Mempunyai aplikasi program Macromedia Flash. Agar bisa dijalankan pada Komputer/PC yang tidak mempunyai aplikasi program Macromedia Flash maka file animasi anda harus berextensi/Format EXE, Caranya Klik File lalu pilih Publih Settings..

22. beri centangan pada kotak centangan Windows Projector (EXE), kemudian klik icon Folder disamping kanan.

23. Simpan animasi pada Drive dan Folder yang anda inginkan lalu beri nama File dan klik Save (Pada tutorial ini saya menyimpan di Drive D dengan Nama Folder KREASI_KU dan File nya saya beri nama Kumbang)

24. Setelah File tersimpan, klik tombol Publish lalu klik tombol OK.

25. Perhatikan sekarang File Kumbang.EXE telah selesai di buat, cobalah klik 2 kali untuk menjalankannya.

26. Sampai disini animasi dengan teknik Frame By Frame telah selesai di buat, cobalah berkreasi dengan animasi lainnya. Oya demi kemajuan bersama silahkan beri masukan, kritik dan sarannya, Oke… SELAMAT BERKREATIVITAS.