Bab 11. Soal & Penyelesaian Visual Basic .NET

Bekerja Dengan Database

Kasus 126: Menciptakan Sebuah File Database (.mdf) dan Table

Langkah 1: Ciptakan sebuah Windows Forms Application yang baru dengan nama Menciptakan Database Movie.

Langkah 2: Pada Jendela Solution Explorer, klik-kanan pada nama projek dan pilih Add, kemudian pilih New Item.... Jendela dialog Add New Item – Menciptakan Database Movie akan ditampilkan seperti pada gambar berikut.

Langkah 3: Pada grup Common Items di panel kiri pada jendela dialog, pilih Data. Kemudian pilih Service-based Database dari dafta yang ada, dan ketikkan Movie.mdf pada kotak masukan Name di sisi bawah jendela.

Langkah 4: Selanjutnya, jendela Data Source Configuration Wizard akan ditampilkan, seperti ditunjukkan pada gambar berikut. Karena Anda belum siap dalam melakukan koneksi, klik pada tombol Cancel untuk menutup wizard. Database Anda akan disimpan.

Langkah 5: Perhatikan bahwa file database Movie.mdf telah muncul pada jendela Solution Explorer. Klik-ganda pada file tersebut. Jendela Server Explorer akan muncul, yang memuat Movie.mdf  dan beberapa subfolder, seperti ditunjukkan pada gambar berikut.

Langkah 6: Pada jendela Server Explorer, klik-kanan pada ikon folder Tables dan pilih Add New Table dari menu pop-up. Panel database table designer akan muncul pada area pengeditan.

Langkah 7: Masukkan kolom-kolom untuk tabel Film, seperti ditunjukkan pada gambar beriku.

Langkah 8: Verifikasi bahwa ikon kunci kecil muncul di sisi kiri bidang IdFilm. Jika tidak, klik-kanan pada kolom di sisi kiri nama IdFilm, dan pilih Set Primary Key. Sebuah ikon kunci kecil akan muncul di samping bidang tersebut.

Langkah 9: Ketika kolom IdFile masih diseleksi, ekspansi panel sebelah bawah pada jendela sehingga Anda dapat melihat kode T-SQL yang mendefinisikan tabel. Modifikasilah baris pertama sehingga menjadi:

CREATE TABLE [dbo].[Film]

Baris ini menyatakan bahwa Anda ingin menciptakan sebuah tabel dengan nama Film.

Langkah 10: Modifikasilah baris yang diawali dengan [IdFilm] sehingga menjadi:

[IdFilm] INT IDENTITY(1000,1) NOT NULL PRIMARY KEY,

Katakunci IDENTITY berarti bahwa sebuah nilai IdFilm akan dibangkitkan secara otomatis setiap kali Anda menyisipkan sebuah baris pada tabel ini. Notasi (1000,1) berarti bahwa nilai IdFilm yang pertama adalah 1000, dan setiap nilai baru, ketika baris baru ditambahkan pada tabel, akan ditambah dengan 1.

Langkah 11: Klik tombol Update ( ) di pojok kiri-atas pada jendela editor. Dialog Preview Database Updates akan muncul, seperti ditampilkan pada gambar berikut.

Klik pada tombol Update Database untuk memastikan bahwa Anda ingin menambahkan tabel Film pada database. Setelah Anda melakukannya, pesan konfirmasi akan muncul pada panel bawah, seperti ditampilkan pada gambar berikut. Tutup jendela table designer. Selanjutnya, Anda akan menambahkan beberapa baris pada tabel.

Langkah 12: Pada jendela Server Explorer, klik-ganda pada folder Tables untuk mengekspansinya, kemudian klik-kanan pada tabel Film pada jendela Server Explorer dan pilih Show Table Data dari menu pop-up, seperti ditampilkan pada gambar berikut.

Langkah 13: Tambahkan data tabel berikut, diawali pada baris kedua. Jangan masukkan nilai pada kolom IdFilm, karena database akan menciptakan nilainya secara otomatis. Perhatikan gambar berikut.

Langkah 14: Setelah mengisi baris terakhir, klik mouse pada sembarang baris di atasnya. Hal itu akan menyimpan semua entri data Anda. Tutup editor tabel. Anda selesai.

Kasus 127: Menampilkan Tabel Database pada Kontrol DataGridView

Langkah 1: Ciptakan sebuah projek Windows Forms Application yang baru dengan nama FormMovie.

Langkah  2: Tetapkan properti Text pada Form1 menjadi Tabel Movie.

Langkah 3: Simpan projek Anda dengan memilih Save All dari menu File.

Langkah 4: Geret kontrol DataGridView dari grup Data pada jendela Toolbox ke form. Pada jendela Properties, tetapkan properti Dock dari kontrol DataGridView menjadi Fill.

Langkah 5: Pada kontrol DataGridView, klik anak panah kecil (yang dikenal dengan smart tag) yang menunjuk ke arah pojok kanan dari DataGridView. Jendela DataGridView Tasks akan ditampilkan seperti pada gambar berikut.

Klik pada anak panah yang ada di samping Choose Data Source. Pada kotak dialog yang muncul (ditampilkan pada gambar berikut), klik Add Project Data Source.

Langkah 7: Ketika Data Source Configuration Wizard ditampilkan, pilih ikon Database dan klik tombol Next.

Langkah 8: Selanjutnya, wizard tersebut meminta Anda untuk memilih sebuah model database, seperti ditunjukkan pada gambar berikut. Pastikan bahwa model Dataset yang Anda pilih. Pilih tombol Next untuk melanjutkan.

Langkah 9: Selanjutnya, wizard akan meminta Anda untuk memilih koneksi data Anda, seperti ditampilkan pada gambar berikut. Jika Anda telah menciptakan koneksi data sebelumnya, Anda dapat memilih salah satu dari drop-down list. Karena ini merupakan koneksi data Anda yang pertama, klik pada tombol New Connection.

Langkah 10:  Jendela Add Connection akan ditampilkan seperti pada gambar berikut. Pastikan bahwa Microsoft SQL Database File (SqlClient) ditetapkan sebagai Data Source.

Selanjutnya, klik tombol Browse..., seperti ditunjukkan pada gambar. Navigasi ke file database yang telah Anda buat sebelumnya pada bab ini.

Pada titik ini, Anda dapat mengklik tombol Test Connection dan menunggu kotak pesan yang mengatakan “Test connection succeeded”. Pesan ini mengindikasikan bahwa Anda telah berhasil terhubung dengan file database Movie.mdf. Klik tombol OK untuk menutup jendela Add Connection.

Langkah 11: Anda akan kembali ke jendela Data Source Configuration Wizard, yang sekarang menunjukkan nama koneksi sebagai Movie.mdf. Klik tombol Next untuk melanjutkan.

Langkah 12: Selanjutnya, wizard akan menanyakan apakah Anda akan menyimpan sebuah string koneksi bernama pada file konfigurasi aplikasi, seperti ditunjukkan pada gambar berikut. Hal ini baik karena ini berarti bahwa aplikasi akan mengingat lokasi dari database, dan Anda dapat menggunakannya pada form lain nanti. Anda bisa mengubah nama string koneksi tersebut.

Langkah 13: Selanjutnya, Anda diminta untuk memilih objek-objek database yang ingin Anda cantumkan pada dataset Anda. Ekspansi entri di bawah Tables, dan centang kotak di samping Film, seperti ditunjukkan pada gambar berikut.

Klik tombol Finish untuk menyelesaikan wizard. Jika jendela DataGridView masih muncul di samping kontrol DataGridView, Anda hanya perlu mengklik mouse di  dalam grid untuk menyembunyikannya.

Langkah 14: Anda akan melihat kepala-kepala kolom pada kontrol DataGridView (ditampilkan pada gambar berikut).

Langkah 15: Simpan dan jalankan aplikasi. Anda akan melihat semua baris dari tabel Movie, seperti ditunjukkan pada gambar berikut. Sekarang Anda dapat bereksperimen sedikit ketika aplikasi sedang dijalankan:

·         Ubah ukuran form, dan perhatikan bahwa grid akan mengekspansi dan berkontraksi di sepanjang form.

·         Pilih baris pada grid dengan mengklik tombol di sisi kiri.

·         Pilih baris secara bersamaan dengan menekan kunci Ctrl atau Shift dengan menekan tombol-tombol di sisi kiri.

·         Modifikasi sembarang sel dengan mengklik mouse di dalam sel dan mengetikkan data baru.

Kasus 128: Mengurutkan dan Memperbarui Tabel

Langkah 1: Buka FormMovie yang telah Anda ciptakan.

Langkah 2: Jalankan aplikasi.

Langkah 3: Saat ini, baris-baris terurut menaik berdasarkan IdFilm. Klik kepala kolom Judul dan amati bahwa grid tersebut terurut menaik berdasarkan Judul, seperti terlihat pada gambar berikut.

Langkah 4: Klik kepala kolom Judul kembali dan amati bahwa baris-baris terurut menurun.

Langkah 5: Selanjutnya, Anda akan menghapus sebuah baris dari grid. Klik tombol di sebelah kiri grid. Keseluruhan baris akan terseleksi, seperti tampak pada gambar berikut. Tekan kunci Delete dan amati bahwa baris tersebut telah terhapus dari dataset, bukan dari database. Ingat bahwa baris yang Anda hapus, karena ketika Anda menjalankan kembali program, Anda akan mengamati bahwa baris yang terhapus masih ada.

Langkah 6: Selanjutnya, Anda akan menyisipkan sebuah baris ke dalam grid. Masukkan Maleficient, Angelina Jolie, 2014. Gambar berikut menunjukkan bahwa baris baru telah ditambahkan pada tabel. Tekan Enter untuk menyimpan.

Langkah 7: Pada jendela Designer, amati bahwa terdapat tiga komponen yang ditempatkan pada tray komponen oleh Visual Studio ketika Anda menambahkan koneksi ke tabel Movie.

·         MovieDataSet merupakan objek dataset yang memuat data tabel dalam memori dan melewatkan data tersebut kepada kontrol DataGridView.

·         FilmTableAdapter merupakan objek TableAdapter yang mengambil data dari database untuk ditempatkan pada program Anda. Objek ini memuat sebuah perintah (SQL Query) yang menetapkan data mana yang akan dipilih dari tabel. Secara default, semua baris dan kolom diseleksi.

·         FilmBindingSource merupakan objek BindingSource yang menghubungkan program Anda ke database.

Langkah 9: Buka jendela Code dan amati bahwa statemen pada Form1_Load memberitahu table adapter untuk mengisi dataset:

Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load

    'TODO: This line of code loads data into

    ‘the 'MovieDataSet.Film' table. You can move, or remove it, as needed.

    Me.FilmTableAdapter.Fill(Me.MovieDataSet.Film)

End Sub

Metode Fill dari TableAdapter membuka koneksi database, membaca data dari database ke dalam datase, dan menutup koneksi.

Kasus 129: Mengikat DataGridView pada Tabel Film

Pada kasus ini, Anda akan menambahkan sebuah sumber data baru pada aplikasi Anda. Kemudian Anda akan mengikat sumber data tersebut pada kontrol DataGridView dan memberitahu Visual Studio untuk menciptakan sebuah tool strip dengan tombol-tombol sehingga pengguna dapat menavigasi, menyisipkan, menghapus, dan menyimpan database.

Langkah 1: Ciptakan sebuah projek Windows Forms Application dengan nama Menciptakan Movie Databound.

Langkah 2: Dari menu VIEW, pilih Other Windows, dan kemudian pilih Data Sources. Ini akan memunculkan jendela Data Sources.

Langkah 3: Pada jendela Data Sources, klik link Add New Data Source.

Langkah 4: Ulangi langkah 7-14 pada kasus 124 untuk memilih database Movie.mdf.

Langkah 5: Pada langkah Choose Your Database dari jendela Data Source Configuration Wizard (gambar berikut), pilih tabel Film dan namai dataset tersebut dengan MovieDataSet. Klik tombol Finish.

Langkah 6: Geret nama tabel Film dari jendela Data Source ke dalam form. Perhatikan bagaimana Visual Studio menambahkan kendali DataGridView dan kendali ToolStrip pada form. Kontrol ToolStrip memuat tombol-tombol sehingga pengguna dapat melakukan operasi-operasi pada data dari kontrol DataGridView.

Langkah 7: Tetapkan properti Dock dari kontrol DataGridView menjadi Fill, sehingga ia mengisi semua sisi dari form.

Langkah 8: Simpan projek dan jalankan aplikasi. Anda akan melihat keluaran yang sama dengan kasus sebelumnya.

Langkah 9: Awalnya, bidang IdFilm merupakan rekaman data yang diseleksi. Klik tombol-tombol panah pada toolbar Navigation dan perhatikan bahwa batang seleksi berpindah dari satu rekaman ke rekaman yang lain. Eksperimen dengan tombol toolbar yang lain untuk melihat dampaknya. Modifikasi salah satu baris dengan mengklik tombol Add new dan delete untuk mengamati perubahan. Klik tombol Save Data pada toolbar. Pada mode design, Anda dapat mengklik-ganda tombol tersebut untuk memeriksa Click handler-nya dan bagaimana perubahan disimpan ke dalam database.

Kasus 130: Mengikat Kontrol Individu pada Tabel Film

Pada kasus ini, Anda akan memilih opsi Details pada jendela Data Source sehingga Anda dapat mengikat kontrol individu pada bidang tertentu dari tabel Film.

Langkah 1: Ciptakan sebuah projek Windows Forms Application dengan nama Menciptakan Movie Detil.

Langkah 2: Dari menu VIEW, pilih Other Windows, dan kemudian pilih Data Sources. Ini akan memunculkan jendela Data Sources.

Langkah 3: Pada jendela Data Sources, klik link Add New Data Source.

Langkah 4: Ulangi langkah 7-14 pada kasus 125 untuk memilih database Movie.mdf.

Langkah 5: Pada langkah Choose Your Database dari jendela Data Source Configuration Wizard (gambar berikut), pilih tabel Film dan namai dataset tersebut dengan MovieDataSet. Klik tombol Finish.

Langkah 6: Geret bidang Judul dari jendela Data Source ke dalam form. Ketika Anda melakukannya, Anda akan melihat kontrol TextBox muncul pada form dengan sebuah label di sisi kirinya. Perhatikan bagaimana Visual Studio menambahkan kendali DataGridView dan kendali ToolStrip pada form. Kontrol ToolStrip memuat tombol-tombol sehingga pengguna dapat melakukan operasi-operasi pada data dari kontrol DataGridView. Anda akan melihat kontrol ToolStrip pada form.

Langkah 7: Simpan projek dan jalankan aplikasi. Anda akan melihat keluaran yang sama dengan kasus sebelumnya.

Langkah 8: Hentikan aplikasi.

Langkah 9: Geret kolom-kolom lainnya dari tabel Film ke dalam form. Anda bisa menata-ulang urutannya, mengekspansi bidang tertentu, dan lainnya. Perhatikan gambar berikut.

Kasus 131: Menampilkan Judul Movie pada Kontrol ListBox

Langkah 1: Ciptakan sebuah projek Windows Forms Application dengan nama Manampilkan Judul Movie.

Langkah 2: Dari menu VIEW, pilih Other Windows, dan kemudian pilih Data Sources. Ini akan memunculkan jendela Data Sources.

Langkah 3: Pada jendela Data Sources, klik link Add New Data Source.

Langkah 4: Ulangi langkah 7-14 pada kasus 125 untuk memilih database Movie.mdf.

Langkah 5: Pada langkah Choose Your Database dari jendela Data Source Configuration Wizard (gambar berikut), pilih tabel Film dan namai dataset tersebut dengan MovieDataSet. Klik tombol Finish.

Langkah 6: Tambahkan sebuah kontrol ListBox pada form dan namai dengan listJudul.

Langkah 7: Tambahkan sebuah Label tepat di atas kotak list dan tetapkan properti Text-nya dengan Daftar Judul Movie.

Langkah 8: Klik pada kotak list dan klik tanda panah di samping properti DataSource pada jendela Properties. Ekspansi grup Other Data Sources, ekspansi Project Data Sources, ekspansi MovieDataSet, dan pilih Film. Perhatikan gambar berikut.

Perhatikan bahwa Visual Studio secara otomatis menambahkan tiga komponen pada tray komponen.

Langkah 9: Tetapkan properti DisplayMember menjadi Judul.

Langkah 10: Simpan dan jalankan aplikasi. Kotak list akan memuat nama-nama judul, seperti ditunjukkan pada gambar berikut.

Langkah 11: Selanjutnya, Anda akan menambahkan sebuah kontrol data-bound TextBox pada form yang menampilkan sutradara tiap judul film tersebut. Untuk melakukannya, ekspansi tabel Film pada jendela Data Sources dan kemudian gunakan mouse untuk menggeret bidang Sutradara dari jendela Data Source ke dalam form.

Langkah 12: Simpan dan jalankan program. Ketika Anda mengklik salah satu judul movie, perhatikan bagaimana kontrol TextBox tersebut menampilkan nama sutradara terkait.

Langkah 13: Geret bidang-bidang lain dan amati hasilnya.

Kasus 132: Menyisipkan Pembayaran Anggota Tari

Pada kasus ini, Anda akan menuliskan sebuah program yang menyisipkan baris-baris baru pada tabel Pembayaran dari database Tari.

Langkah 1: Ciptakanlah database Tari dengan tabel Anggota dan tabel Pembayaran, seperti tertampil pada gambar berikut.

Langkah 2: Ciptakanlah sebuah projek Windows Forms Application dengan nama Sisip Pembayaran Tari.

Langkah 3: Pada jendela Data Sources, tambahkan sebuah sumber data baru dengan nama TariDataSet, yang menggunakan tabel Pembayaran dari database Tari. Tekan tombol Yes ketika Visual Studio menanyakan apakah Anda menginginkan database disalin ke direktori projek.

Langkah 4: Tambahkan tiga kotak teks pada form dengan label-label yang sesuai. Satu dinamai dengan teksIDAnggota, satu lagi dengan nama teksTanggal, dan kotak teks ketiga dengan nama teksJumlah. Tetapkan properti Text dari form menjadi Sisip Pembayaran Tari.

Langkah 5: Tambahkan sebuah kontrol Button pada form, dan tetapkan namanya dengan tombolSisip. Tetapkan properti Text-nya menjadi Sisip Pembayaran. Perhatikan gambar berikut sebagai panduan.

Langkah 6: Tambahkan sebuah kontrol DataGridView dan tetapkan properti-propertinya sebagai berikut: Name = dgvPembayaran; BorderStyle = None; BackgroundColor = Control; ReadOnly = True; RowHeadersVisible = False; Anchor = Top, Bottom, Left, Right. Properti ReadOnly mencegah agar pengguna tidak membuat perubah pada data grid selama aplikasi sedang berjalan.

Langkah 7: Klik smart tag pada grid (tanda panah di pojok kanan atas grid) untuk menampilkan jendela DataGridView Tasks. Tetapkan sumber datanya menjadi tabel Pembayaran dari TariDataSet.

Langkah 8: Pilih properti Column dari grid, yang akan membuka jendela Edit Columns, dan hapus kolom ID. Gambar berikut menunjukkan jendela Edit Columns setelah kolom ID dihapus.

Langkah 9: Masih pada jendela Edit Columns, pilih kolom ID_Anggota, dan buka properti DefaultCellStyle pada kotak list di sebelah kanan, seperti ditunjukkan pada gambar berikut.

Langkah 10: Pada jendela CellStyle Builder, tetapkan properti-properti berikut: Alignment = MiddleCenter; ForeColor = Blue. Klik tombol OK untuk menutup jendela.

Langkah 11: Pada jendela Edit Columns, pilih kolom Jumlah dan buka properti DefaultCellStyle-nya.

Langkah 12: Buka properti Format-nya dan pilih Numeric.

Langkah 13: Klik tombol OK untuk menutup jendela CellStyle Builder.

Langkah 14: Eksperimen dengan ketiga kolom, mengubah warna dan format sesuka Anda. Ketika selesai, klik tombol OK untuk menutup jendela Edit Columns.

Langkah 15: Simpan dan jalankan program. Anda akan melihat daftar pembayaran pada grid. Hentikan program.

Langkah 16: Selanjutnya, Anda akan menambahkan kode pada tombol Sisip Pembayaran sehingga program dapat menyimpan pembayaran yang baru. Pada mode Design, klik-ganda tombol Sisip Pembayaran. Tambahkan kode berikut pada Click event handler pada tombol:

Private Sub tombolSisip_Click(sender As Object, e As EventArgs)

Handles tombolSisip.Click

    Try

        Me.PembayaranTableAdapter.Insert(CShort(teksIDAnggota.Text),

        CDate(teksTanggal.Text), CDec(teksJumlah.Text))

        Me.PembayaranTableAdapter.Fill(TariDataSet.Pembayaran)

    Catch ex As Exception

        MessageBox.Show(ex.Message, "Masukan Data Error")

    End Try

End Sub

Kode yang Anda tambahkan memanggil metode Insert dari TableAdapter, melewatkan kepada metode tersebut nilai-nilai dari ketiga kolom yang ingin Anda tambahkan: ID_Anggota, Tanggal, dan Jumlah. Setiap kolom harus dikonversi menjadi sebuah tipe yang cocok dengan tipe kolom dataset. Kemudian, metode Fill dipanggil sehingga Anda dapat melihat pembayaran baru pada grid.

Langkah 17: Tambahkan baris-baris kode berikut pada Form1_Load event handler:

Langkah 18: Simpan dan jalankan aplikasi. Tambahkan sebuah pembayaran baru, menggunakan nilai ID_Anggota 1 sampai 10. Verifikasi bahwa pembayaran Anda muncul pada grid setelah tombol Sisip Pembayaran ditekan. Pembayaran ini akan tersimpan pada database.

Langkah 19: Tambahkan sebuah pembayaran yang menggunakan format tanggal tak-valid atau nilai tak-numerik untuk jumlah. Ketika Anda mengklik tombol Sisip Pembayaran, amati bahwa pesan error akan ditampilkan.

Langkah 20: Akhiri aplikasi.

Kasus 133: Memfilter Baris Tabel Pembayaran

Pada kasus ini, Anda akan menciptakan sebuah query yang mengubah baris-baris tabel Pembayaran pada suatu kontrol DataGridView.

Langkah 1: Ciptakanlah sebuah projek Windows Forms Application dengan nama Query Pembayaran Tari.

Langkah 3: Pada jendela Data Sources, tambahkan sebuah sumber data baru dengan nama TariDataSet, yang menggunakan tabel Pembayaran dari database Tari. Tekan tombol Yes ketika Visual Studio menanyakan apakah Anda menginginkan database disalin ke direktori projek.

Langkah 4: Pilih kontrol DataGridView pada jendela Designer dan tetapkan properti Dock-nya menjadi None. Tetapkan properti Anchor dari kontrol DataGridView sehingga memenuhi keempat sisi.

Langkah 5: Geret tabel Pembayaran dari jendela Data Sources ke form. Klik-kanan pada kontrol PembayaranTableAdapter pada component tray, dan pilih Add Query dari menu pop-up.

Langkah 6: Pada jendela Search Criteria Builder, namai query dengan Jumlah. Cantumkan teks berikut:

SELECT ID, ID_Anggota, Tanggal_Pembayaran, Jumlah

FROM dbo.Pembayaran

WHERE Jumlah > 450000

Langkah 7: Klik tombol OK untuk menyimpan query. Simpan projek dan jalankan aplikasi. Klik tombol Jumlah dan amati bahwa hanya jumlah pembayaran yang lebih dari 450000 yang akan ditampilkan. Hentikan program dan kembali ke mode Design.

Langkah 8: Dimisalkan Anda telah mengklik tombol Jumlah, tetapi ingin kembali menampilkan semua baris pada tabel. Anda perlu menambahkan query lain untuk melakukannya. Untuk melakukannya, klik-kanan pada kontrol PembayaranTableAdapter, dan pilih Add Query.

Langkah 9: Pada jendela Search Criteria Builder, namai query dengan Semua_Baris, dan tetap pertahankan teks query yang telah ada. Klik OK untuk menutup jendela. Perhatikan tool strip kedua muncul pada form, seperti ditampilkan pada gambar berikut.

Langkah 10: Jalankan program dan klik kedua tombol query. Amati apa yang terjadi.

Kasus 134: Aplikasi Manajer Sekolah Tari

Menciptakan form utama aplikasi manajer sekolah tari

Pada bagian ini, Anda akan menciptakan sebuah form utama yang akan ditampilkan ketika aplikasi Manajer Sekolah Tari dijalankan.

Langkah 1: Ciptakan sebuah Windows Forms Application yang baru dengan nama Manajer Sekolah Tari.

Langkah 2: Ubah nama Form1.vb menjadi FormUtama.vb pada jendela Solution Explorer.

Langkah 3: Buka form dan tetapkan properti Size.Width menjadi 530 dan properti Size.Height menjadi 320.

Langkah 4: Sisipkan sebuah kontrol Label  ke dalam form dan tetapkan properti Text-nya menjadi Sekolah Tari Rakyat.

Langkah 5: Tambahkan sebuah kontrol MenuStrip pada form yang memuat nama-nama menu File, Keanggotaan, dan Pembayaran. Pada menu File, sisipkan submenu Keluar. Pada menu Keanggotaan, sisipkan tiga submenu: Daftar Semua Anggota, Cari Anggota, dan Tambah Anggota Baru. Pada menu Pembayaran, sisipkan satu submenu: Semua Anggota. Perhatikan gambar berikut.

Langkah 6: Simpan projek.

Menambahkan fungsi Keanggotaan / Daftar Semua Anggota

Pada bagian ini, Anda akan membuat aplikasi Manajer Sekolah Tari untuk mencantumkan semua anggotanya.

Langkah 1: Buka projek Manajer Sekolah Tari, jika masih belum dibuka. Buka FormUtama pada jendela Designer.

Langkah 2: Tambahkan sebuah form baru pada projek dengan nama FormSemuaAnggota.vb. Tata-ulang ukuran form sehingga sesuai. Tetapkan properti Text-nya menjadi Semua Anggota.

Langkah 3: Buka FormUtama pada jendela Designer. Klik-ganda pada item Keanggotaan/Daftar Semua Anggota dan sisipkan kode berikut pada event handlernya:

Private Sub DaftarSemuaToolStripMenuItem_Click(sender As Object, e As EventArgs)

Handles DaftarSemuaToolStripMenuItem.Click

    ' Menciptakan instans dari FormSemuaAnggota

    Dim formSemuaAnggota As New FormSemuaAnggota

    ' Menampilkan form

    formSemuaAnggota.ShowDialog()

End Sub

Langkah 4: Pada jendela Data Sources, tambahkan sebuah sumber data baru yang menghubungkan ke tabel Keanggotaan pada database Tari. Namai dataset dengan SemuaAnggotaDataSet. Klik Yes untuk menyalin file database ke projek.

Langkah 5: Pada FormSemuaAnggota, tempatkan kontrol DataGridView dan namai dengan dgvAnggota. Tetapkan properti Dock-nya menjadi Fill. Tetapkan properti BackgroundColor menjadi Control. Tetapkan properti BorderStyle-nya menjadi None.

Langkah 6: Klik tanda panah smart tag di pojok kanan-atas dari dgvAnggota, yang akan menampilkan jendela DataGridView Tasks, seperti ditampilkan pada gambar berikut. Pada drop-down list Choose Data Source, pilih tabel Anggota dari SemuaAnggotaDataSet. Hilangkan centang-centang pada jendela Tasks sehingga hanya Enable Editing yang dicentang.

Langkah 7: Tambahkan sebuah menu File pada form FormSemuaAnggota, dengan dua submenu: Simpan dan Tutup. Pada Click handler dari item submenu Tutup, sisipkan statemen Me.Close(). Sisipkan statemen berikut pada Click handler untuk item submen Simpan:

Me.AnggotaTableAdapter.Update(Me.AllMembersDataSet.Members)

Langkah 8: Simpan projek dan jalankan aplikasi. Dari menu FormUtama, pilih Keanggotaan/Daftar Semua Anggota. Anda akan melihat daftar anggota. Lakukan eksperimen dengan memodifikasi salah satu baris grid dan pilih Simpan dari menu File. Kemudian, tutup form SemuaAnggota dan buka kembali untuk memverifikasi bahwa perubahan yang Anda lakukan telah tersimpan.

Langkah 9: Hentikan program dan kembali ke mode Design.

Menambahkan fungsi Keanggotaan / Tambah Anggota Baru

Pada bagian ini, Anda akan membuat aplikasi Manajer Sekolah Tari untuk menambah anggota baru.

Langkah 1: Buka projek Manajer Sekolah Tari, jika masih belum dibuka. Buka FormUtama pada jendela Designer.

Langkah 2: Tambahkan sebuah form baru pada projek dengan nama FormTambahAnggota.vb. Tata-ulang ukuran form sehingga sesuai. Tetapkan properti Text-nya menjadi Tambah Anggota Baru.

Langkah 3: Buka FormUtama pada jendela Designer. Klik-ganda pada item Keanggotaan/Tambah Anggota Baru dan sisipkan kode berikut pada event handlernya:

Private Sub TambahAnggotaBaruToolStripMenuItem_Click(sender As Object, e As EventArgs)

Handles TambahAnggotaBaruToolStripMenuItem.Click

    ' Menciptakan sebuah instans dari FormTambahAnggota

    Dim formTambahAnggota As New FormTambahAnggota

    ' Menampilkan form

    formTambahAnggota.ShowDialog()

End Sub

Langkah 4: Buka FormTambahAnggota pada Design view. Kemudian, pada jendela Data Sources, cari lokasi tabel Anggota di bawah entri SemuaAnggotaDataSet. Klik di samping tabel Anggota pada jendela pada jendela Data Sources dan pilih Details. Kemudian geret tabel tersebut pada form. Ini akan menciptakan beberapa kontrol data-bound. Sejajarkan kontrol-kontrol tersebut jika diperlukan.

Langkah 5: Hapus komponen AnggotaBindingNavigator dari component tray. Ini akan menyebabkan ToolStrip (di bawah menu) hilang. Anda tidak membutuhkannya. Tambahkan sebuah kontrol MenuStrip pada form.

Langkah 6: Tambahkan sebuah menu File pada kontrol MenuStrip dan sisipkan dua item submenu: Simpan dan Tutup, dan Tutup tanpa Simpan. Klik-ganda pada item Simpan dan Tutup dan sisipkan statemen-statemen berikut pada event handler-nya:

Private Sub SimpanDanTutupToolStripMenuItem_Click(sender As Object, e As EventArgs) Handles SimpanDanTutupToolStripMenuItem.Click

    Try

        Me.AnggotaBindingSource.EndEdit()

        Me.AnggotaTableAdapter.Update(SemuaAnggotaDataSet.Anggota)

        Me.Close()

    Catch ex As Exception

        MessageBox.Show(Me, "Error: " & ex.Message, "Simpan",

        MessageBoxButtons.OK, MessageBoxIcon.Warning)

    End Try

End Sub

Langkah 7: Ganti isi dari event handler FormTambahAnggota_Load dengan kode berikut:

Private Sub FormTambahAnggota_Load(sender As Object, e As EventArgs)

Handles MyBase.Load

    Me.AnggotaBindingSource.AddNew()

End Sub

Langkah 8: Klik-ganda pada item submenu Tutup tanpa Simpan dan sisipkan statemen berikut pada event handler-nya:

Private Sub TutupTanpaSimpanToolStripMenuItem_Click(sender As Object, e As EventArgs)

Handles TutupTanpaSimpanToolStripMenuItem.Click

    Me.AnggotaBindingSource.CancelEdit()

    Me.Close()

End Sub

Langkah 9: Simpan projek dan jalankan aplikasi. Klik pada submenu Keanggotaan/Tambah Anggota Baru dan tambahkan anggota baru. Amati apa yang terjadi.

Langkah 10: Hentikan program.

Menambahkan fungsi Keanggotaan/Cari Anggota

Pada kasus ini, Anda akan menambahkan sebuah form sehingga pengguna dapat melakukan pencarian anggota berdasarkan nama belakang. Anda akan menggunakan pencocokan string parsial, sehingga jika pengguna tidak mengetahui nama belakang secara persis, ia dapat melihat daftar nama anggota yang hampir sama.

Langkah 1: Buka projek Manajer Sekolah Tari, jika masih belum dibuka. Buka FormUtama pada jendela Designer.

Langkah 2: Tambahkan sebuah form baru pada projek dengan nama FormCariAnggota.vb. Tata-ulang ukuran form sehingga sesuai. Tetapkan properti Text-nya menjadi Cari Anggota Berdasarkan Nama Belakang.

Langkah 3: Buka FormUtama pada jendela Designer. Klik-ganda pada item Keanggotaan/Cari Anggota dan sisipkan kode berikut pada event handlernya:

Private Sub CariAnggotaToolStripMenuItem_Click(sender As Object, e As EventArgs) Handles CariAnggotaToolStripMenuItem.Click

    ' Menciptakan sebuah instans dari FormCariAnggota

    Dim formCariAnggota As New FormCariAnggota

    ' Menampilkan form

    formCariAnggota.ShowDialog()

End Sub

Langkah 4: Tambahkan sebuah kontrol MenuStrip pada form FormCariAnggota dan ciptakan sebuah menu File dengan satu item: Tutup. Pada Click handler dari item submenu tersebut, sisipkan statemen Me.Close().

Langkah 5: Tambahkan sebuah label, sebuah kotak teks dengan nama teksNamaBelakang, dan sebuah tombol dengan nama tombolCari pada form. Perhatikan gambar berikut sebagai panduan.

Langkah 6: Tambahkan sebuah dataset baru bernama CariAnggotaDataSet, yang menggunakan tabel Anggota.

Langkah 7: Selanjutnya, Anda akan memodifikasi CariAnggotaDataSet dengan menambahkan sebuah parameter query sehingga program dapat melakukan pencarian berdasarkan nama belakang. Pada jendela Solution Explorer, klik-ganda untuk membuka jendela designer untuk CariAnggotaDataSet.xsd. Klik-kanan pada entri dengan label Fill, GetData(), dan pilih Configure dari menu pop-up. Ubah teks query berikut, dan klik tombol Finish:

SELECT ID, Nama_Belakang, Nama_Depan, Telepon, Tanggal_Bergabung

FROM dbo.Anggota

WHERE (Nama_Belakang LIKE @Nama_Belakang + '%')

Langkah 8: Kembali ke FormCariAnggota, tempatkan sebuah kontrol DataGridView pada form dan namai dengan dgvAnggota. Tetapkan properti-propertinya sebagai berikut: BackgroundColor = Control; BorderStyle = None; Anchor = Top, Bottom, Left, Right; RowHeadersVisible = False.

Langkah 9: Klik smart tag di pojok kanan-atas grid, yang akan menampilkan jendela DataGridView Tasks. Pilih tabel Anggota pada CariAnggotaDataSet, seperti pada gambar. Hilangkan centang pada semua kotak periksa.

Langkah 10: Selanjutnya, Anda akan menambahkan sebuah pemanggilan terhadap metode Fill di dalam event handler untuk tombol yang mengaktivasi pencarian. Klik-ganda pada tombol Cari dan sisipkan kode berikut pada event handler-nya:

Private Sub tombolCari_Click(sender As Object, e As EventArgs)

Handles tombolCari.Click

    ' Melakukan pencarian nama belakang

    Me.AnggotaTableAdapter.Fill(Me.CariAnggotaDataSet.Anggota, teksNamaBelakang.Text)

End Sub

Langkah 11: pada Design view untuk form FormCariAnggota, pilih form dengan mouse dan tetapkan properti AcceptButton menjadi tombolCari.

Langkah 12: Hapus sembarang statemen yang ada pada Load event handler untuk FormCariAnggota.

Langkah 13: Simpan dan jalankan aplikasi.

Menambahkan fungsi Pembayaran/Semua Anggota

Pada kasus ini, Anda akan menciptakan sebuah dataset dengan menggabungkan dua tabel: Anggotan dan Pembayaran. Dataset tersebut akan ditampilkan pada sebuah grid.

Langkah 1: Buka projek Manajer Sekolah Tari, jika masih belum dibuka. Buka FormUtama pada jendela Designer.

Langkah 2: Tambahkan sebuah form baru pada projek dengan nama FormSemuaPembayaran.vb. Tata-ulang ukuran form sehingga sesuai. Tetapkan properti Text-nya menjadi Pembayaran Oleh Semua Anggota.

Langkah 3: Buka FormUtama pada jendela Designer. Klik-ganda pada item Pembayaran/Semua Anggota dan sisipkan kode berikut pada event handlernya:

Private Sub SemuaAnggotaToolStripMenuItem_Click(sender As Object, e As EventArgs) Handles SemuaAnggotaToolStripMenuItem.Click

    ' Menciptakan sebuah instans dari FormSemuaPembayaran

    Dim formSemuaPembayaran As New FormSemuaPembayaran

    ' Menampilkan form

    formSemuaPembayaran.ShowDialog()

End Sub

Langkah 4: Kembali ke form FormSemuaPembayaran, tambahkan sebuah kontrol MenuStrip dan ciptakan sebuah menu File dan satu item submenu: Tutup. Pada Click event handler, sisipkan statemen Me.Close().

Langkah 5: Pilih Add New Data Source dari menu Data. Tambahkan sebuah sumber data baru yang menggunakan koneksi database Tari. Pilih tabel Pembayaran, dan namai dataset dengan SemuaPembayaranDataSet. Setelah sumber data diciptakan, klik-ganda pada file SemuaPembayaranDataSet.xsd pada jendela Solution Explorer. Sekarang, pada jendela DataSet Designer, klik-kanan pada entri Fill, GetData(), dan pilih Configure dari menu pop-up.

Langkah 6: Pada jendela TableAdapter Configuration Wizard yang mengatakan Enter a SQL Statement, klik tombol Query Builer.

Langkah 7: Tambahkan tabel Anggota pada Query Builder dengan mengklik-kanan di dalam panel atas, dan memilih Add Table. Jendela Add Table akan muncul. Pilih tabel Anggota dan klik Add. Klik Close untuk menutup jendela Add Table. Setelah menambahkan tabel Anggota, sebuah garis akan muncul di antara dua tabel, seperti ditampilkan pada gambar berikut. Garis ini, dengan sebuah diamond di tengah-tengah, mengindikasikan bahwa kolom ID_Anggota pada tabel Pembayaran berelasi dengan kolom ID pada tabel Anggota.

Langkah 8: Hapus semua centang dari kotak-kotak teks di samping nama-nama kolom pada panel atas. Kemudian centang-ulang bidang-bidang berikut, secara berurutan: Nama_Balakang, Nama_Depan, Tanggal_Pembayaran, dan Jumlah.

Langkah 9: Pada kolom Sort Type pada panel grid, pilih Ascending pada baris Nama_Belakang.

Langkah 10: Klik tombol Execute Query; daftar nama dan pembayaran akan muncul pada panel bawah, seperti ditampilkan pada gambar berikut.

Langkah 11: Klik tombol OK untuk menutup Query Builder, dan klik tombol Finish untuk menyimpan perubahan pada dataset. Simpan projek Anda dan tutup jendela designer untuk SemuaPembayaranDataSet.

Langkah 12: Tempatkan sebuah kontrol DataGridView pada SemuaPembayaranForm dan namai dengan dgvPembayaran. Tetapkan properti-propertinya sebagai berikut: BackgroundColor = Control; BorderStyle = None; Dock = Fill; RowHeadersVisible = False.

Langkah 13: Buka jendela DataGridView Tasks. Untuk Data Source, pilih tabel Pembayaran dari SemuaPembayaranDataSet. Hapuskan centang pada semua kotak periksa.

Langkah 14: Simpan projek dan jalankan aplikasi.

Kasus 135: Menampilkan Website Tabel Anggota Tari pada GridView

Pada kasus ini, Anda akan menciptakan sebuah koneksi ke database Tari, dan menampilkan tabel Anggota pada sebuah kontrol GridView. Anda akan melakukan beberapa konfigurasi pada tampilan grid.

Langkah 1: Ciptakanlah sebuah Web site kosong dengan nama GridAnggota. Tambahkan sebuah Web form baru dengan nama Default.aspx pada projek.

Langkah 2: Klik-kanan pada nama projek pada jendela Solution Explorer, dan klik New Folder pada menu pop-up. Namai folder tersebut dengan App_Data.

Langkah 3: Buka jendela Windows Explorer dan salin file Tari.mdf.

Langkah 4: Pada jendela Solution Explorer, klik-kanan pada nama projek dan pilih Refresh Folder. Kemudian ekspansi entri di bawah App_Data dan cari nama file Tari.mdf, seperti ditampilkan pada gambar berikut.

Langkah 5: Pada jendela Design view dari form Default.aspx, pilih DOCUMENT pada jendela Properties dan tetapkan properti Title-nya menjadi Daftar Anggota Tari.

Langkah 6: Pada baris pertama dari halaman Web (pada Design view) ketikkkan Tabel Anggota dari Database Tari. Tetapkan block style menjadi Heading 2, dan tekan ENTER di akhir baris.

Langkah 7: Tempatkan sebuah kontrol GridView pada form. Anda dapat menemukannya pada bagian Data dari jendela Toolbox. Geret sampai properti Width sama dengan 640 piksel. Properti Heightnya dibiarkan kosong.

Langkah 8: Klik smart tag pada grid, buka kotak dialog GridView Tasks. Pilih <New data source ...> dari list Choose Data Source DropDown. Perhatikan gambar berikut.

Langkah 9: Pada jendela Data Source Configuration Wizard, pilih Database, ubah ID menjadi TariDataSource, dan klik tombol OK. Perhatikan gambar berikut.

Langkah 10: Langkah berikutnya pada wizard adalah Choose Your Data Connection. Klik tombol New Connection. Ketika jendela Add Connection muncul, seperti ditampilkan pada gambar berikut, pastikan bidang Data Source ditetapkan menjadi Microsoft SQL Server Database File (SqlClient).

Langkah 11: Untuk entri nama file, klik tombol Browse, pilih folder App_Data, pilih Tari.mdf, dan klik tombol Open. Kemudian, klik tombol OK untuk menutup dialog Add Connection. Ketika Anda kembali ke jendela dengan pesan Choose Your Data Connection, klik tombol Next. Ketika sebuah jendela muncul dengan pesan Save the Application Connection String to the Application Configuration File, klik tombol Next.

Langkah 12: Anda akan diminta untuk mengkonfigurasi statemen SELECT yang membaca baris dan kolom dari database. Dari list Name, pilih tabel Anggota, seperti ditampilkan pada gambar berikut.

Langkah 13: Centang kolom-kolom berikut secara berurutan: ID, Nama_Belakang, Nama_Depan, Telepon, dan Tanggal_Bergabung.

Langkah 14: Klik tombol ORDER BY.... Pada kotak dialog berikut, urutkan kolom Nama_Belakang. Klik OK untuk menutup kotak dialog.

Langkah 15: Kembalik ke kotak dialog Configure the Select Statemen, klik tombol Next, yang mengarahkan Anda ke kotak dialog Test Query. Klik tombol Test Query. Jika kolom-kolom yang ditampilkan sama dengan pada gambar berikut, klik tombol Finish untuk menutup jendela.

Langkah 16: Klik smart tag dari GridView kembali dan centang kotak periksa Enable Sorting.

Langkah 17: Simpan dan jalankan aplikasi Web. Isi dari jendela penjelajah Web akan tampak seperti pada gambar berikut.

Langkah 18: Lakukan eksperimen dengan mengurutkan kolom-kolom dengan cara mengklik tiap kepala kolom. Jika Anda mengklik kolom yang sama dua kali, maka hal itu akan membalikkan pengurutan. Tutup penjelajah Web untuk mengakhiri aplikasi.

Langkah 19: Selanjutnya, Anda akan memformat kolom Tanggal_Bergabung. Pilih grid dengan mouse. Pada jendela Properties, klik properti Columns, yang memunculkan kotak dialog Fields. Pada kotak di sebelah kiri-bawah, pilih Tanggal_Bergabung. Pada daftar properti untuk kolom ini, masukkan {0:d} ke dalam properti DataFormatString, seperti ditunjukkan pada gambar berikut. {0:d} dikenal dengan format specifier. Pada kasus ini, format tersebut menekankan format short date.

Langkah 20: Selanjutnya, Anda akan menetapkan sebuah properti yang akan menyejajarkan ke tengah nilai-nilai pada kolom Tanggal_Bergabung. Ekspansi entri-entri di bawah kolom properti ItemStyle (terakhir pada daftar properti BoundField pada jendela dialog Fields). Ubah subproperti Horizontal-Align menjadi Center. Klik tombol OK untuk menutup kotak dialog. Perhatikan gambar berikut.

Langkah 21: Simpan dan jalankan aplikasi. Keluaran akan sama seperti pada gambar berikut.

Langkah 22: Tutup penjelajah Web untuk mengakhiri program.

Kasus 136: Memperbarui Website Tabel Anggota Tari pada DetailsView

Pada kasus ini, Anda akan menuliskan sebuah aplikasi agar pengguna dapat melihat, mengedit, menyisipkan, dan menghapus baris-baris pada tabel Anggota dalam database Tari. Anda akan menciptakan sebuah kontrol SqlDataSource dan melekatkannya pada kontrol DetailsView.

Langkah 1: Ciptakan sebuah situs Web kosong dengan nama Anggota Tari Details. Tambahkan item-item berikut pada projek:

·         Sebuah Web form dengan nama Default.aspx

·         Sebuah folder dengan nama App_Data

Langkah 2: Salin file database Tari.mdf ke dalam folder projek App_Data.

Langkah 3: Klik-kanan pada mana projek pada jendela Solution Explorer dan pilih Refresh Folder. Verifikasi bahwa Tari.mdf muncul di bawah entri App_Data.

Langkah 4: Pada Design view dari Default.aspx, pilih DOCUMENT pada jendela Properties, dan pilih properti Title-nya menjadi Tabel Anggota Details.

Langkah 5: Pada baris pertama pada halaman Web, sisipkan Tabel Anggota Details, dan tetapkan Block Style Heading 2. Kemudian, tekan ENTER untuk ke baris berikutnya.

Langkah 6: Tambahkan sebuah kontrol DetailsView pada halaman, dan tetapkan properti ID-nya dengan dvwTambahAnggota. Pastikan bahwa properti Height-nya tetap kosong.

Langkah 7: Simpan projek. Perhatikan gambar berikut. Selanjutnya, Anda akan menambahkan sebuah sumber data pada projek.

Langkah 8: Pilih smart tag yang ada di pojok kanan-atas dari dvwTambahAnggota. Dari Choose Data Source, pilih <New data source ...>. Pilih Database, dan namai sumber data tersebut dengan AnggotaDataSource, seperti ditampilkan berikut. Klik tombol OK untuk melanjutkan.

Langkah 9: Sama seperti kasus sebelumnya, ciptakan sebuah koneksi ke file Tari.mdf pada folder projek App_Data, seperti terlihat pada gambar berikut.

Langkah 10: Ketika jendela dengan judul Save Connection String to the Application Configuration File muncul, klik tombol Next. Perhatikan gambar.

Langkah 11: Pada jendela berikutnya, pilih semua kolom pada tabel Anggota, dan urutkan baris berdasarkan Nama_Belakang dengan urutan menaik. Ketik Anda kembali ke jendela dengan judul Configure the Select Statemen, klik tombol Advanced. Perhatikan gambar berikut.

Langkah 12: Pada kotak dialog Advanced SQL Generation Options, pilih opsi Generate INSERT, UPDATE, and DELETE statements, seperti ditunjukkan pada gambar berikut. Klik tombol OK, kemudian klik tombol Next.

Langkah 13: Klik tombol Test Query untuk menguji query yang telah dilakukan, seperti terlihat pada gambar berikut.

Langkah 14: Klik tombol Finish untuk menutup jendela Configure Data Source. Kembali ke menu smart tag untuk dvwTambahAnggota, centang kotak teks untuk mengaktifkan Inserting, Editing, dan Deleting. Perhatikan gambar berikut.

Langkah 15: Simpan dan jalankan aplikasi. Berikut merupakan keluaran yang ditampilkan saat aplikasi dijalankan:

Langkah 16: Klik tombol Edit, ubah nilai-nilai pada salah satu bidang, dan klik tombol Update. Anda akan melihat bahwa nilai bidang tersebut telah berubah. Perhatikan gambar berikut.

Langkah 17: Tutup jendela penjelajah Web dan kembali ke Design view untuk memperbaiki sedikit tampilan dari DetailView. Tetapkan properti BorderWidth menjadi 0px (lebar 0 piksel). Selanjutnya, pilih properti Fields, yang akan memunculkan kotak dialog Fields, seperti pada gambar berikut.

Langkah 18: Pada kotak dialog Fields, pilih bidang Tanggal_Bergabung pada kotak list kiri-bawah. Kemudian pada kotak list kanan, tetapkan properti DataFormatString menjadi {0:d}.

Langkah 19: Selanjutnya, Anda akan mengubah urutan bidang sedikit. Pilih bidang Nama_ Belakang pada kotak list kiri-bawah, dan gunakan pada di sisi kanan kotak tersebut untuk memindahkan bidang Nama_Belakang di atas bidang Telepon.

Langkah 20: Klik OK untuk menutup kotak dialog Fields. Selanjutnya, tetapkan properti GridLines menjadi None.

Langkah 21: Simpan dan jalankan aplikasi. Perhatikan perbedaan keluaran yang ada.