Logika Pemrograman: Bab 5: Pemrograman C#.NET: Database dan Web

Wednesday, December 14, 2016

Bab 5: Pemrograman C#.NET: Database dan Web

Aplikasi Web Dengan Database

5.1 Mengenalkan Database Karate

Database yang akan digunakan pada contoh ke depan dinamakan dengan Karate (Karate.mdf), yang dirancang untuk keanggotaan dan penjadwalan kelas untuk sekolah bela diri. Sebuah tabel dengan nama Anggota memuat informasi tentang anggota-anggota, seperti nama depan, nama belakang, nomor telepon, dan seterusnya. Lihat Tabel 5.1.

Yang berelasi dengan tabel Anggota adalah tabel Pembayaran, yang ditampilkan pada Tabel 5.2. Ia menunjukkan pembayaran yang dilakukan oleh anggota. Setiap baris pada tabel Pembayaran memuat Id_Anggota yang mengidentifikasi anggota (dari tabel Anggota) yang melakukan pembayaran. Relasi ditunjukkan oleh diagram pada Gambar 5.1. Garis menghubungkan bidang ID pada tabel Anggota dengan bidang Id_Anggota pada tabel Pembayaran.

Tabel 5.1 Tabel Anggota dari database Karate

Tabel 5.2 Tabel Pembayaran

Gambar 5.1 Relasi antara tabel Anggota dan tabel Pembayaran

5.2 Kontrol GridView

Kontrol GridView menawarkan cara ideal dalam menampilkan sebuah tabel database dengan mengikatnya dengan suatu sumber data. Kontrol ini dapat dipakai untuk mengurutkan kolom, menyeleksi urutan kolom, dan memformat data di dalam kolom-kolom. Anda juga dapat mengedit, menyisipkan, dan memperbarui baris-baris database pada grid.

Kontrol GridView ditempatkan pada bagian Data dari jendela Toolbox pada Visual Studio. Salah satu contohnya ditunjukkan pada Design view pada Gambar 5.2. Ketika Anda mengklik smart tag, menu GridView Tasks akan dimunculkan, seperti pada Gambar 5.3. Anda dapat menggunakannya untuk menetapkan sejumlah properti grid dan melakukan koneksi ke suatu sumber data.

Kode XHTML untuk sebuah GridView adalah sederhana ketika ditampilkan pada Source view:

<asp:GridView

ID="GridView1"

runat="server">

</asp:GridView>

Gambar 5.2 Kontrol GridView pada Design view

Gambar 5.3 Menu GridView Tasks

Ada banyak properti dari kontrol GridView yang dapat dipakai untuk mengendalikan penyejajaran, warna, font, batas, dan seterusnya. Adalah mudah untuk memilih style AutoFormat dari jendela GridView Tasks. Pada Gambar 5.4, misalnya, Anda menyeleksi autoformat Ocenia, dimana heading kolom adalah dark blue (ditampilkan abu-abu pada buku yang dicetak). Setelah memilih format ini, kode XHTML untuk kontrol ini menjadi lebih kompleks:

<asp:GridView ID="GridView1" runat="server" BackColor="White"

BorderColor="#3366CC" BorderStyle="None" BorderWidth="1px"

CellPadding="4" Height="156px" Width="325px">

<HeaderStyle BackColor="#003399" Font-Bold="True"

ForeColor="#CCCCFF" />

<PagerStyle BackColor="#99CCCC" ForeColor="#003399"

HorizontalAlign="Left" />

<SelectedRowStyle BackColor="#009999" Font-Bold="True"

ForeColor="#CCFF99" />

</asp:GridView>

Anda dapat melihat dari kode ini bahwa pemformatan dilakukan menggunakan sejumlah tag seperti <FooterStyle> dan <HeaderStyle>. Banyak pengembang piranti lunak lebih memilih menciptakan kelas CSS terpisah untuk tiap tag ini agar membuat kode sumber lebih mudah dibaca.

Gambar 5.4 GridView, dengan autoformat Ocenia

Kontrol SqlDataSource

Ketika Anda menciptakan suatu koneksi ke sebuah database SQL Server pada Web form, Anda perlu menggunakan kontrol SqlDataSource. Ia ditempatkan pada Design view sebagai persegi-panjang abu-abu, dengan nama kontrol di dalamnya, seperti pada Gambar 5.5. Berikut adalah kode XHTML dari sebuah kontrol SqlDataSource yang menghubungkan ke database Karate:

<asp:SqlDataSource ID="SqlDataSource1"

runat="server" ConnectionString="<%$ ConnectionStrings:KarateConnectionString %>"

SelectCommand="SELECT * FROM [Anggota]">

</asp:SqlDataSource>

Gambar 5.5 Kontrol SqlDataSource pada mode Design

Tutorial 5.1: Menampilkan Tabel Anggota Karate Pada KontrolGridView

Pada tutorial ini, Anda akan menciptakan sebuah aplikasi yang menghubungkan ke database Karate dan menampilkan tabel Anggota pada suatu kontrol GridView. Contoh keluaran ketika aplikasi dijalankan ditampilkan pada Gambar 5.6.

Gambar 5.6 Menjalankan aplikasi Grid Anggota Karate

Langkah-Langkah Tutorial:

Langkah 1: Ciptakan sebuah situs Web kosong dengan nama Grid Anggota Karate.

Langkah 2: Tambahkan sebuah folder pada projek dengan nama App_Data.

Langkah 3: Pada jendela Windows Explorer, salin file database Karate.mdf ke folder App_Data.

Langkah 4: Pada Visual Studio, klik kanan pada folder App_Data dan pilih Refresh Folder dari menu yang muncul. (Nama file database akan ditampilkan).

Langkah 5: Tambahkan sebuah Web form dengan nama Default.aspx pada projek. Buka form ini pada Source view.

Langkah 6: Pada tag <head>, tetapkan judul menjadi Anggota Karate.

Langkah 7: Di dalam <form>, tambahkan heading level-dua berikut:

<h2>Tabel Anggota, Database Karate</h2> </form>

Langkah 8: Tambahkan kontrol GridView berikut (Anda bisa menggeret kontrol ini dari jendela Toolbox ke Design view):

<asp:GridView ID="dgvAnggota"

style="width:90%"

runat="server">

</asp:GridView>

Langkah 9: Pergi ke Design view, buka jendela GridView Tasks, dan pilih New Data Source di bawah entri Choose Data Source.

Langkah 10: Pada Data Source Configuration Wizard, pilih SQL Database, ubah nilai ID menjadi AnggotaDataSource, dan klik tombol OK untuk melanjutkan. Hal ini ditunjukkan pada Gambar 5.7.

Gambar 5.7 Jendela Data Source Configuration Wizard

Langkah 11: Pada langkah Choose Your Data Connection, klik New Connection, dan kemudian pilih file Karate.mdf. Hal ini ditampilkan pada Gambar 5.8. Klik tombol Next >.

Langkah 12: Pada langkah Save the Connection String, klik tombol Next untuk melanjutkan.

Langkah 13: Pada langkah Configure the Select Statement, pilih tabel Anggota, seperti ditunjukkan pada Gambar 5.9. Tempatkan sebuah centang pada kotak periksa di samping tiap kolom.

Langkah 14: Klik tombol ORDER BY…. Pada kotak dialog yang ditampilkan pada Gambar 5.10, urutkan berdasarkan kolom Nama_Belakang. Klik tombol OK untuk menutup kotak dialog.

Langkah 15: Kembali ke kotak dialog Configure the Select Statement, klik tombol Next, yang akan membawa Anda ke dialog Test Query. Klik tombol Test Query. Jika kolom-kolom yang ditampilkan sesuai dengan apa yang ditampilkan pada Gambar 5.11, klik tombol Finish untuk menutup jendela.

Gambar 5.8 Jendela Configure Data Source: Choose Your Data Connection

Gambar 5.9 Jendela Configure Data Source: Configure the Select Statement

Langkah 16: Klik smart tag pada GridView dan periksa opsi Enable Sorting.

Langkah 17: Pilih AutoFormat dari jendela GridView Tasks dan pilih format Ocenia.

Langkah 18: Simpan projek dan lihat Default.aspx pada browser. Anda akan melihat apa yang ditampilkan pada Gambar 5.6.

Gambar 5.10 Menambahkan klausa ORDER BY pada query

Gambar 5.11 Menguji query

Langkah 19: Urutkan setiap kolom dengan mengklik kepala kolom. Jika Anda mengklik kolom yang sama dua kali berturut-turut, kolom tersebut akan diurutkan dengan tatanan menurun.

Tutorial 5.2: Memformat Kolom Anggota Database Karate

Pada tutorial ini, Anda akan memformat salah satu kolom pada aplikasi Grid Anggota Karater. Anda juga akan memodifikasi kepala kolom dan mencaritahu apa yang terjadi ketika Anda secara salah menetapkan properti DataField dari sebuah kolom.

Langkah-Langkah Tutorial

Langkah 1: Buka situs Grid Anggota Karate.

Langkah 2: Pada Design view dari Default.aspx, pilih kontrol GridView dan buka jendela Properties.

Langkah 3: Pilih porperti Columns. Ini akan menyebabkan jendela Fields ditampilkan, seperti pada Gambar 5.12. Pada lis Selected fields, pilih Tanggal_Bergabung. Pada daftar properti untuk kolom ini, masukkan {0:d} ke dalam properti DataFormatString. Notasi {0:d} dikenal sebagai penspesifikasi format. Pada kasus ini, ia menetapkan format tanggal pendek.

Gambar 5.12 Memodifikasi kolom GridView

Langkah 4: Ekspansi entri-entri di bawah properti ItemStyle dari kolom Tanggal_Bergabung. Ubah subproperti HorizontalAlign menjadi Center. Klik tombol OK untuk menutup kotak dialog, seperti ditunjukkan pada Gambar 5.13.

Gambar 5.13 Memodifikasi subproperti HorizontalAlign menjadi Center

Langkah 5: Simpan form dan lihat pada browser. Amati bahwa tanggal sekarang diformat dengan format mm/dd/yyyy, dan nilai-nilai kolom sekarang disejajarkan ke tengah, seperti ditunjukkan pada Gambar 5.14.

Gambar 5.14 Kolom Tanggal_Bergabung sekarang diformat dengan tanggal pendek dan disejajarkan ke tengah

Langkah 6: Periksa kode sumber dari form dan cari kolom Tanggal_Bergabung. Perhatikan bahwa ia mencakup parameter DataFormatString yang telah baru saja Anda ciptakan:

<asp:BoundField

DataField="Tanggal_Bergabung"

HeaderText="Tanggal_Bergabung"

SortExpression="Tanggal_Bergabung"

DataFormatString="{0:d}">

Langkah 7: Pada kode sumber, ubah parameter HeaderText menjadi Tangga Bergabung dan simpan form. Ini hanya akan mengubah nama yang ditampilkan pada kepala kolom.

Gambar 5.15 Memodifikasi properti HeaderText

Langkah 8: Lihat halaman pada browser dan verifikasi perubahan yang ditampilkan, seperti ditunjukkan pada Gambar 5.15.

Langkah 9: Ubah properti DataField untuk kolom Tanggal_Bergabung menjadi TanggalBergabung. Ketika Anda menyimpan form dan melihat halaman pada browser, Anda akan melihat error seperti pada Gambar 5.16.

Gambar 5.16 Menggunakan nama pengikatan kolom yang salah

5.3 Menggunakan Kontrol DetailsView

Kontrol DetailsView dapat dipakai user untuk menambah, melihat, mengedit, dan menghapus baris-baris database. Jika Anda menghubungkannya ke sebuah kontrol DataSource, ia akan menampilkan satu tabel pada suatu waktu. Tidak ada pemrograman yang diperlukan. Microsoft telah bekerja keras untuk mengotomatisasi sebanyak mungkin pekerjaan, dan pengeditan tabel database merupakan salah satu pekerjaan itu sehingga mempermudah pekerjaan programer.

Kontrol DetailsView ditemukan pada bagian Data pada jendela Toolbox. Ketika Anda menempatkannya pada sebuah Web form, Anda menggunakan jendela DetailsView Tasks untuk melekatkannya ke suatu sumber data.

Properti-Properti dari Kontrol DetailsView

Properti DataSourceID dari kontrol DetailsView memuat sebuah referensi ke suatu kontrol DataSource pada form yang sama yang menyediakan koneksi database.

Setiap anggota dari koleksi Fields adalah sebuah objek BoundField. Sebagai contoh, pada kode XHTML berikut untuk sebuah kontrol DetailsView, BoundField menampilkan kolom database ID:

<asp:BoundField DataField="ID"

HeaderText="ID"

ReadOnly="True"

SortExpression="ID" />

Anda dapat menyeleksi link AutoFormat pada jendela DetailsView Taks untuk menyeleksi sejumlah format pustaka.

Properti DataKeyNames adalah sebuah koleksi yang memuat sejumlah string yang mengidentifikasi kolom-kolom dari sumber data yang membangun kunci primer.

Properti DefaultMode menyeleksi status awal dari kontrol ketika ia pertama kali menjadi visibel. Pengaturan defaultnya adalah ReadOnly, tetapi Anda dapat mengaturnya menjadi Edit atau Insert jika Anda ingin user memulai pengeditan atau penyisipan item dengan segera.

Pada Tutorial 5.3, Anda akan memperbarui tabel Anggota dari database Karate, menggunakan sebuah kontrol DetailsView.

Tutorial 5.3: Detil-Detil Anggota Karate

Pada tutorial ini, Anda akan menciptakan sebuah aplikasi yang dapat dipakai user untuk melihat, mengedit, menyisipkan, dan menghapus baris-baris di dalam tabel Anggota pada database Karate. Anda akan mengoneksikan kontrol DetailsView ke suatu SqlDataSource.

Gambar 5.17 menunjukkan aplikasi saat dijalankan. Kata Edit, Delete, dan New merupakan kontrol-kontrol LinkButton pustaka. Pada Gambar 5.18, user telah mengklik tombol New dan memasukkan data untuk seorang anggota baru. Ketika user mengklik tombol Insert, maka baris itu akan disimpan di dalam database. Jika user mencoba untuk menambahkan sebuah baris yang memiliki ID yang sama dengan sebuah ID yang telah ada di dalam tabel, maka halaman error akan ditampilkan. Ketika user mengklik tombol Edit, ia dapat memodifikasi hanya bidang-bidang anggota, seperti ditunjukkan pada Gambar 5.19. Ketika user mengklik tombol Update, perubahan pada rekaman akan disimpan ke dalam database.

Gambar 5.17 Kontrol DetailsView yang menunjukkan tabel Anggota saat aplikasi dijalankan

Gambar 5.18 Setelah user mengklik tombol New

Gambar 5.19 Setelah user mengklik tombol Edit

Langkah-Langkah Tutorial

Langkah 1: Ciptakanlah sebuah situs Web kosong dengan nama Detil Anggota Karate. Tambahkan sebuah folder dengan nama App_Data, dan tambahkan sebuah Web form dengan nama Default.aspx.

Langkah 2: Pada jendela Windows Explorer, salin file Karate.mdf ke folder App_Data.

Langkah 3: Ubah nilai <title> menjadi Detil Tabel Anggota.

Langkah 4: Pada baris pertama dari bagian <form>, sisipkan berikut:

<h2>Detil-Detil Tabel Anggota</h2>

Langkah 5: Tambahkan sebuah kontrol DetailsView pada halaman, dan tetapkan properti ID-nya menjadi dvTambahAnggota. Perlebar menjadi sekitar 300 piksel.

Langkah 6: Pada Design view, pilih smart tag di pojok kanan-atas dari kondrol dvTambahAnggota. Di bawah Choose Data Source, pilih New data source. Jendela Data Source Configuration Wizard akan ditampilkan, seperti ditunjukkan pada Gambar 5.20.

Gambar 5.20 Jendela DetailsView Tasks

Langkah 7: Namai sumber data sebagai AnggotaDataSource dan lakukan koneksi ke file database Karate.mdf, seperti ditunjukkan pada Gambar 5.21. Pilih semua kolom dari tabel Anggota. Urutkan baris berdasarkan Nama_Belakang dengan tatanan menaik, seperti ditunjukkan pada Gambar 5.22.

Gambar 5.21 Melakukan koneksi ke database Karate.mdf

Gambar 5.22 Memilih semua kolom pada tabel Anggota dan menetapkan pengurutan menaik berdasarkan kolom Nama_Belakang

Langkah 8: Sebelum pindah ke jendela berikutnya, klik tombol Advanced. Pada jendela Advanced SQL Generation Options, pilih opsi Generate INSERT, UPDATE, dan DELETE statements, seperti ditunjukkan pada Gambar 5.23. Klik tombol OK, dan kemudian klik tombol Next.

Langkah 9: Klik tombol Finish untuk menutup jendela Configure Data Source. Kembali ke Design view dari form, buka menu Tasks dari dvTambahAnggota dan pilih kotak periksa untuk penyisipan, pengeditan, dan penghapusan. Form sekarang akan ditampilkan pada Design view, seperti pada Gambar 5.24. Perhatikan bahwa kontrol sekarang mencakup tiga buah kontrol LinkButton dengan nama Edit, Delete, dan New.

Gambar 5.23 Pada jendela Advanced SQL Generation Options, opsi Generate INSERT, UPDATE, dan DELETE statements diklik

Gambar 5.24 Kontrol DetailsView pada mode design

Langkah 10: Simpan form dan lihat halaman pada browser. Ia akan ditampilkan seperti pada Gambar 5.25.

Gambar 5.25 Aplikasi Detil Anggota Karate saat dijalankan

Langkah 11: Pilih grid pada Design view dan buka properti Fields. (Atau, Anda dapat menyeleksi Edit Fields dari menu Tasks dari kontrol). Pada jendela Fields, pilih bidang Tanggal_Bergabung dan tetapkan properti DataFormatString menjadi {0:d}, untuk menetapkan penspesifikasi format tanggal pendek, seperti ditunjukkan pada Gambar 5.26.

Gambar 5.26 Menetapkan penspesifikasi format tanggal pendek: {0:d}

Langkah 12: Simpan form dan lihat halaman pada browser. Format bidang Tanggal_Bergabung akan menjadi pendek.

Langkah 13: Pada jendela Tasks untuk kontrol, pilih AutoFormat, dan pilih Classic, seperti ditunjukkan pada Gambar 5.27.

Gambar 5.27 Menetapkan AutoFormat menjadi Classic

Selanjutnya, Anda akan menguji kontrol dengan menyisipkan, mengedit, dan menghapus anggota. Semua perubahan yang Anda buat akan permanen.

Langkah 14: Lihat form pada browser dan klik tombol New. Bidang-bidang akan jelas terlihat. Masukkan data berikut: 14, Bakri, Erik, 234-2211, 3/1/2016, seperti ditunjukkan pada Gambar 5.28. Kemudian klik tombol Insert. Tampilan sekarang menunjukkan anggota yang telah Anda sisipkan, seperti ditunjukkan pada Gambar 5.29.

Gambar 5.28 Penyisipan data anggota baru

Gambar 5.29 Hasil penyisipan anggota baru ditampilkan

Gambar 5.30 Penyisipan anggota baru dengan ID yang telah ada akan mengakibatkan error karena melanggar kekangan kunci primer

Langkah 15: Coba menyisipkan rekaman kedua, menggunakan nomor ID yang sama. Anda akan melihat pesan error yang mengatakan bahwa perubahan yang Anda minta tidak berhasil, seperti ditunjukkan pada Gambar 5.30. Klik tombol Back, ubah ID menjadi 15, dan klik tombol Insert.

Langkah 16: Klik tombol Delete. Rekaman yang Anda sisipkan akan terhapus, dan orang pertama di dalam tabel (Chandra Rico) akan ditampilkan.

Langkah 17: Klik tombol Edit, ubah salah satu bidang kecuali ID, dan klik tombol Update. Perubahan akan disimpan ke dalam database.

Tutorial 5.4: Memilih Anggota Berdasarkan ID

Pada tutorial ini, Anda akan menambahkan sebuah query terparameterisasi pada properti SelectCommand dari kontrol SqlDataSource dari aplikasi Detil Anggota Karate. User akan dapat mengedit sembarang baris dari tabel. Ketika aplikasi dijalankan (lihat Gambar 5.31), user diminta untuk memasukkan nomor ID anggota. Ketika ia melakukannya dan mengklik tombol Go, anggota yang diminta akan ditampilkan, seperti ditunjukkan pada Gambar 5.32.

Gambar 5.31 Saat aplikasi dijalankan, user akan memasukkan sebuah nomor ID

Gambar 5.32 Menampilkan anggota dengan ID = 1

Langkah-Langkah Tutorial

Langkah 1: Jika belum dibuka, buka situs Web Detil Anggota Karate.

Langkah 2: Tepat di bawah kontrol DetailsView, sisipkan teks: Pilih ID untuk melihat.

Langkah 3: Sisipkan sebuah kontrol TextBox di sisi kanan teks. Tetapkan properti ID menjadi teksCariId.

Langkah 4: Sisipkan sebuah kontrol Button di sisi kanan dari TextBox. Tetapkan properti-properti berikut: ID = tombolGo, Text = Go. Selanjutnya, Anda akan memodifikasi query pada kontrol SqlDataSource dengan menambahkan sebuah parameter query. Parameter itu akan diikat ke kontrol TextBox yang telah Anda tambahkan.

Langkah 5: Klik smart tag dari kontrol AnggotaDataSource dan pilih Configure Data Source.

Langkah 6: Klik tombol Next, pertahankan koneksi yang sama.

Langkah 7: Pada panel Configure the Select Statement, tabel dan kolom-kolom diseleksi, seperti ditunjukkan pada Gambar 5.33.

Gambar 5.33 Mengkonfigurasi statemen Select

Gambar 5.34 Menambahkan sebuah klausa WHERE dengan sebuah parameter query

Langkah 8: Klik tombol WHERE. Jendela Add WHERE Clause akan ditampilkan.

Langkah 9: Pilih kolom ID, dan pilih Control pada list dengan judul Source. Pilih teksCariId dari list dengan label Control ID. Nilai-nilai form akan ditampilkan seperti pada Gambar 5.34.

Langkah 10: Klik tombol Add. Sebuah entri baru akan ditampilkan pada kotak di bawah jendela, seperti ditunjukkan pada Gambar 5.35.

Gambar 5.35 Sebuah parameter query ditambahkan

Langkah 11: Klik tombol OK untuk menutup jendela, yang membawa Anda kembali ke jendela Configure the Select Statement.

Langkah 12: Klik tombol Next, dan klik tombol Finish.

Langkah 13: Simpan halaman dan lihat pada browser.

Langkah 14: Masukkan sebuah ID pada kotak teks dan klik tombol Go. Kontrol DetailsView akan diisi dengan data anggota yang dicari. Lakukan beberapa eksperimen yang berbeda.

Lihat Kode Sumber Halaman Web

Baris berikut pada kode sumber halaman Web memuat properti SelectCommand dari kontrol SqlDataSource. Ia menggunakan sebuah parameter query @ID:

SelectCommand="SELECT [ID], [Nama_Belakang], [Nama_Depan], [Telepon],

[Tanggal_Bergabung] FROM [Anggota] WHERE ([ID] = @ID)

ORDER BY [Nama_Belakang]"

Adalah menarik untuk melihat bagaimana ID yang dimasukkan ke dalam kotak teks oleh user ditugaskan kepada parameter query SQL pada saat aplikasi dijalankan. Kontrol SqlDataSource memiliki sebuah koleksi SelectParameters, yang ke dalamnya Anda telah menyisipkan sebuah objek ControlParameter:

<asp:ControlParameter

ControlID="teksCariId"

Name="ID"

PropertyName="Text"

Type="Int32" />

</SelectParameters>

ControlParameter telah diciptakan ketika Anda menetapkan ControlID, seperti ditunjukkan pada Gambar 5.35. Pada gambar, properti ControlID ditugaskan kepada teksCariId, nama dari kontrol TextBox yang memuat ID yang dimasukkan oleh user. Pada saat aplikasi dijalankan, server Web akan mencari nilai ControlID dan menggunakannya untuk mendapatkan isi dari kotak teks teksCariId dan menempatkan nilai itu ke dalam parameter query.

5.4 Berinteraksi Dengan Kontrol GridView

Kontrol GridView sangat mudah untuk digunakan dalam menampilkan data. Tetapi ia juga sebuah kontrol yang sangat kaya, dengan banyak properti dan kapabilitas. Seringkali, user ingin berinteraksi dengan kontrol dan melakukan operasi-operasi pada data grid. User bisa saja ingin memilih satu atau lebih baris, menghapus baris, mengedit, dan menyisipkan baris baru. Pada bagian ini, Anda akan mempelajari kegunaan dari tombol-tombol perintah pada GridView. Anda juga akan belajar bagaimana sebuah kontrol SqlDataSource dapat menggunakan informasi seleksi grid untuk memfilter data.

Gambar 5.36 Menciptakan tabel Kuliah

Gambar 5.37 Data tabel Kuliah

Database Kampus.mdf

Pada bagian ini, Anda akan menggunakan sebuah database dengan nama Kampus.mdf, yang memuat sejumlah matakuliah, data mahasiswa, dan sebuah tabel yang menjejak daftar mahasiswa pada matakuliah-matakuliah. Pertama, Anda akan menampilkan tabel Kuliah dari database ini, yang memuat kolom-kolom berikut (IdMtKuliah menjadi kunci primer), yang ditunjukkan pada Gambar 5.36 dan Gambar 5.37.

Selanjutnya, Anda akan menggunakan tabel Mahasiswa, yang memuat kolom-kolom berikut (IdMahasiswa sebagai kunci primer), yang ditunjukkan pada Gambar 5.38 dan Gambar 5.39.

Gambar 5.38 Menciptakan tabel Mahasiswa

Gambar 5.39 Data tabel Mahasiswa

Gambar 5.40 Menciptakan tabel Pendaftaran

Terakhir, Anda akan menggunakan tabel Pendaftaran yang menjejak mahasiswa mana yang telah mendaftarkan matakuliah mana, seperti ditunjukkan pada Gambar 5.40 dan Gambar 5.41.

Gambar 5.41 Data tabel Pendaftaran

Ketiga tabel memuat relasi seperti ditunjukkan pada Gambar 5.42. Relasai one-to-many ada antara tabel Kuliah dan tabel Pendaftaran. Relasi one-to-many lain ada antara tabel Mahasiswa dan tabel Pendaftara.

Gambar 5.42 Relasi di dalam database Kampus

Menyisipkan Tombol Perintah Pada GridView

Gambar 5.43 menunjukkan sebuah Web form pada mode Design dengan kontrol GridView dan SqlDataSource. Kontrol SqlDataSource melakukan koneksi ke tabel Kuliah di dalam file database Kampus.mdf. Kontrol LinkButtons di sisi kiri grid secara otomatis dihasilkan ketika Anda menyeleksi opsi Enable Selection, Enable Editing, dan Enable Deleting pada jendela GridView Tasks. Tombol-tombol ini secara kolektif dikenal sebagai perintah-perintah GridView. Skema warna yang Anda lihat pada Gambar adalah warna yang dihasilkan oleh pemilihan AutoFormat pada jendela GridView Tasks.

Ketika user mengklik tombol Delete pada kontrol GridView, baris terkait akan terhapus dari database. Tidak ada DataSet di dalam memori. Ketika user mengklik tombol Edit, maka grid akan menampilkan template pengeditan yang memuat kontrol-kontrol TextBox, seperti ditunjukkan pada Gambar 5.44. Setelah melakukan perubahan, user mengklik tombol Update untuk menyimpannya, atau mengklik tombol Cancel untuk mengabaikannya.

Gambar 5.43 Web form dengan kontrol GridView dan SqlDataSource, pada Design view

SARAN: Ketika Anda membuka jendela Configure Data Source, Anda dapat mengklik tombol Advanced untuk menghasilkan query-query yang menggabungkan sejumlah tabel. Tabel yang digunakan pada sumber data harus memiliki kunci primer sebelum Anda dapat menghasilkan query Insert, Delete, dan Update.

Gambar 5.44 Kontrol GridView dalam mode Edit

Gambar 5.45 Mengganti teks pada link teks dari Cancel, Delete, Edit, dan Update

Anda dapat mengubah tampilan dan operasi-operasi dari kontrol GridView dengan mengubah link teks dari Cancel, Delete, Edit, dan Update. Untuk melakukannya, edit properti Columns, pilih kolom CommandField, dan ubah properti CancelText, DeleteText, EditText, dan UpdateText, seperti ditunjukkan pada Gambar 5.45.

Anda juga dapat menggunakan tombol gambar untuk melakukan operasi-operasi pada tiap baris grid. Pada Gambar 5.46, misalnya, Anda menetapkan ButtonType = Image, dan menugaskan nama file citra kepada properti DeleteImageUrl, EditImageUrl, dan SelectImageUrl.

Gambar 5.46 GridView menggunakan tombol-tombol citra

Tutorial 5.5: Menampilkan Tabel Kuliah Pada Sebuah GridView

Langkah-Langkah Tutorial

Langkah 1: Ciptakanlah sebuah situs Web ASP.NET kosong dengan nama GridButton Kampus.

Langkah 2: Tambahkan sebuah form dengan nama Default.aspx pada projek.

Langkah 3: Ciptakan sebuah folder App_Data.

Langkah 4: Salin file database Kampus.mdf ke folder App_Data.

Langkah 5: Tekan tombol Refresh pada jendela Solution Explorer.

Langkah 6: Pada Source view dari Default.aspx, ubah tag <body> menjadi:

Langkah 7: Sisipkan sebuah kontrol GridView pada form dan namai dengan dgvKuliah.

Langkah 8: Pada jendela GridView Tasks, ciptakan suatu sumber data dengan nama KuliahDataSource. Ia akan menghubungkan ke tabel Kuliah pada database Kampus.mdf. Urutkan kolom berdasarkan IdMtKuliah.

Langkah 9: Ketika menciptakan sumber data, klik tombol Advanced. Pilih opsi untuk menciptakan statemen INSERT, UPDATE, dan DELETE. Selesaikan konfigurasi DataSource.

Amati dan periksa SqlDataSource pada Source view:

<asp:SqlDataSource ID="KuliahDataSource" runat="server"

ConnectionString="<%$ ConnectionStrings:KampusConnectionString %>"

DeleteCommand="DELETE FROM [Kuliah] WHERE [IdMtKuliah] = @IdMtKuliah"

InsertCommand="INSERT INTO [Kuliah] ([IdMtKuliah], [TahunSem],

[Kredit], [NomorKuliah]) VALUES (@IdMtKuliah, @TahunSem,

@Kredit, @NomorKuliah)"

SelectCommand="SELECT [IdMtKuliah], [TahunSem], [Kredit],

[NomorKuliah] FROM [Kuliah] ORDER BY [IdMtKuliah]"

UpdateCommand="UPDATE [Kuliah] SET [TahunSem] = @TahunSem,

[Kredit] = @Kredit, [NomorKuliah] = @NomorKuliah

WHERE [IdMtKuliah] = @IdMtKuliah">

</asp:SqlDataSource>

Pada definisi DataSource, perhatikan empat objek perintah: DeleteCommand, InsertCommand, SelectCommand, dan UpdateCommand. Masing-masing objek adalah sebuah query SQL yang dieksekusi ketika diaktivasi oleh sebuah kontrol yang dilekatkan pada sumber data ini. Kontrol GridView dihubungkan dengan sumber data itu, sehingga perintah-perinta ini akan dieksekusi ketika grid diisi (SelectCommand), ketika user mengklik tombol Delete (DeleteCommand), dan seterusnya.

Langkah 10: Seleksi grid dan verifikasi bahwa properti DataKeyNames ditetapkan menjadi IdMtKuliah.

Langkah 11: Pilih properti Columns dari grid dan sejajarkan ke tengah tiap kolom, menggunakan properti ItemStyle dari tiap kolom.

Langkah 12: Pilih smart tag dari grid dan aktifkan opsi Selection, Editing, dan Deleting.

Langkah 13: Simpan projek dan jalankan aplikasi. Ia akan menampilkan sejumlah matakuliah. Lakukan eksperiman dengan penyeleksian, pengeditan, dan penghapusan baris. Pada Tutorial 5.6, Anda akan mengganti perintah grid dengan tombol grafikal.

Tutorial 5.6: Menggunakan Tombol Perintah Grafikal Pada Grid Kuliah

Pada tutorial ini, Anda akan melanjutkan aplikasi GridButton Kampus dengan memakai ikon untuk tombol Edit, Delete, Select, Update, dan Cancel pada kontrol GridView.

Langkah-Langkah Tutorial

Langkah 1: Buka situs Web GridButton Kampus.

Langkah 2: Salin file-file berikut ke folder projek Anda: cancel.gif, delete.gif, edit.gif, select.gif, dan update.gif.

Langkah 3: Tekan tombol Refresh pada jendela Solution Explorer.

Langkah 4: Pilih GridView pada Design view dan buka jendela GridView Tasks. Pilih Edit Columns.

Langkah 5: Pada jendela Fields, pilih CommandField dari kotak Selected fields (di pojok kiri bawah dari jendela).

Langkah 6: Tetapkan properti ButtonType menjadi Image. Tetapkan properti-properti berikut:

CancelImageUrl menjadi cancel.gif, DeleteImageUrl menjadi delete.gif, EditImageUrl menjadi edit.gif, SelectImageUrl mendjadi select.gif, dan UpdateImageUrl menjadi update.gif.

Langkah 7: Simpan form dan lihat pada browser. Verifikasi bahwa ikon-ikon ditampilkan seperti pada Gambar 5.47.

Gambar 5.47 GridView dengan tombol-tombol citra

Langkah 8: Klik ikon Delete dan verifikasi bahwa baris terkait terhapus.

Langkah 9: Klik ikon Select dan verifikasi bahwa baris terkait terseleksi.

Langkah 10: Klik ikon Edit dan verivikasi bahwa tanda centang dan X merah ditampilkan, seperti ditunjukkan pada Gambar 5.48.

Gambar 5.48 Mengedit sebuah baris pada GridView

Tutorial 5.7: Menampilkan Pendaftaran Kelas

Ketika user menyeleksi sebuah baris pada kontrol GridView, Anda dapat menuliskan kode untuk mencaritahu baris mana yang diseleksi. Kemudian Anda dapat menggunakan informasi itu untuk memfilter baris-baris pada grid kedua. Pada tutorial ini, Anda akan menampilkan pendaftaran kelas pada sebuah kontrol GridView yang diisi dari tabel-tabel di dalam database Kampus. Tabel Kuliah memuat sejumlah matakuliah yang ditawarkan oleh kampus, dan tabel Mahasiswa memuat sejumlah mahasiswa, dan tabel Pendaftaran menunjukkan mahasiswa mana yang telah mendaftarkan ke matakuliah mana. Baris-baris contoh dari tabel Pendaftaran ditunjukkan pada Gambar 5.49.

Aplikasi menunjukkan sejumlah kelas perkuliahan ketika aplikasi dijalankan (Gambar 5.50). Ketika user menyeleksi sebuah kelas, kontrol GridView lain akan menampilkan sejumlah mahasiswa yang terdaftar pada kelas itu, yang diurutkan berdasarkan nama belakang dan nama depan. Salah satu contoh keluaran ditampilkan pada Gambar 5.51.

Gambar 5.49 Contoh data tabel Pendaftaran

Gambar 5.50 Saat aplikasi dijalankan, sejumlah kelas perkuliahan ditampilkan

Gambar 5.51 Menampilkan pendaftaran kelas untuk kelas yang diseleksi

Langkah Persiapan

Buka file web.config pada projek GridButton Kampus dan periksa string koneksi database. Properti AttachDbFileName harus sama dengan |DirektoriData|\Kampus.mdf.

Langkah-Langkah Tutorial

Langkah 1: Salin situs Web GridButton Kampus dan ganti namanya menjadi Pendaftaran Kelas Kampus.

Langkah 2: Sisipkan baris pada Source view dari form, tepat di bawah kontrol SqlDataSource:

Langkah 3: Pergi ke Design view dan sisipkan kontrol SqlDataSource lain pada form. Namai dengan PendaftaranDataSource. Gunakan koneksi yang ada ke file database Kampus. Konfigurasi sumber data sehingga ia menggabungkan tabel Kuliah, Pendaftaran, dan Mahasiswa. Berikut adalah query-nya:

SELECT Mahasiswa.IdMahasiswa, Mahasiswa.NamaDepan,

Mahasiswa.NamaBelakang, Mahasiswa.Ipk

FROM Pendaftaran INNER JOIN

Mahasiswa ON Pendaftaran.IdMahasiswa = Mahasiswa.IdMahasiswa

WHERE Pendaftaran.IdMtKuliah = @IdMtKuliah)

ORDER BY Mahasiswa.NamaBelakang, Mahasiswa.NamaDepan

Gambar 5.52 Perangkat Query Builder untuk menguji query

Anda dapat menggunakan perangkat Query Builder untuk menciptakan query ini, seperti ditunjukkan pada Gambar 5.52. Pada langkah Define Parameters (ditunjukkan pada Gambar 5.53), pilih Control sebagai sumber parameter dan pilih dgvKuliah sebagai ControlID. Ini akan memastikan bahwa parameter query SQL akan diisi saat aplikasi dijalankan dengan ID matakuliah yang diseleksi oleh user pada kontrol dgvKuliah. Perhatikan bahwa properti SelectedValue telah diseleksi secara otomatis oleh Visual Studio.

Gambar 5.53 Mendefinisikan parameter query

Langkah 4: Setelah menyimpan sumber data, kembali ke Source view dan varifikasi bahwa PendaftaranDataSource didefinisikan seperti ini:

<asp:SqlDataSource ID="PendaftaranDataSource" runat="server"

ConnectionString="<%$ ConnectionStrings:KampusConnectionString %>"

SelectCommand="SELECT Mahasiswa.IdMahasiswa,

Mahasiswa.NamaDepan, Mahasiswa.NamaBelakang, Mahasiswa.Ipk

FROM Pendaftaran INNER JOIN Mahasiswa ON

Pendaftaran.IdMahasiswa = Mahasiswa.IdMahasiswa

WHERE (Pendaftaran.IdMtKuliah = @IdMtKuliah)

ORDER BY Mahasiswa.NamaBelakang, Mahasiswa.NamaDepan">

<asp:ControlParameter ControlID="dgvKuliah"

Name="IdMtKuliah"

PropertyName="SelectedValue" />

</SelectParameters>

</asp:SqlDataSource>

Langkah 5: Simpan halaman dan lihat pada browser. Klik ikon tanda centang di samping setiap matakuliah pada grid, dan amati bahwa grid bawah akan ditampilkan dengan sejumlah mahasiswa yang terdaftar pada matakuliah tersebut.

Tutorial 5.8: Menampilkan Pendaftaran Kelas Pada Halaman Terpisah

Pada tutorial ini, Anda akan memodifikasi aplikasi Pendaftaran Kelas Kampus. User akan memilih sebuah kelas pada kontrol GridView pada saat aplikasi dijalankan seperti ditunjukkan pada Gambar 5.54 dan klik sebuah link untuk melanjutkan. Kemudian browser akan menavigasi ke halaman Web kedua, seperti ditunjukkan pada Gambar 5.55.

Gambar 5.54 User memilih sebuah matakuliah dan mengklik link untuk melihat daftar mahasiswa yang terdaftar untuk matakuliah tersebut

Gambar 5.55 Daftar mahasiswa yang terdaftar pada matakuliah tertentu ditampilkan pada halaman kedua

Langkah-Langkah Tutorial

Langkah 1: Tutup Visual Studio, buat salinan dari aplikasi Pendaftaran Kelas Kampus, dan ganti nama salinan itu dengan Pendaftaran Kelas Kampus 2.

Langkah 2: Tambahkan sebuah Web form dengan nama TampilDaftar.aspx pada situs Web. Buka form pada Design view.

Langkah 3: Pindahkan kontrol dgvKelas pada Default.aspx ke TampilDaftar.aspx.

Langkah 4: Pindahkan kontrol PendaftaranDataSource

Langkah 5: Pada Source view, modifikasi bagian SelectParameters dari kontrol PendaftaranDataSource menjadi seperti ini:

<asp:QueryStringParameter

Name="IdMtKuliah"

QueryStringField="ID" />

</SelectParameters>

Langkah 6: Pindahkan heading berikut dari Default.aspx ke TampilDaftar.aspx.

<h3>Pendaftaran Kelas:</h3>

Langkah 7: Tambahkan pemecah paragraf dan kontrol LinkButton di bawah Default.aspx:

<p />

<asp:LinkButton ID="btnTampilPendaftaran"

runat="server" O

nClick="btnTampilPendaftaran_Click">Tampilkan Pendaftaran Kelas Terseleksi

</asp:LinkButton>

Langkah 8: Pada file kode-belakang dari halaman yang sama, ciptakanlah sebuah event handler Click untuk kontrol tombolTampilPendaftaran sehingga user dapat menavigasi ke halaman TampilDaftar.aspx:

protected void btnTampilPendaftaran_Click(object sender, EventArgs e)

{

Response.Redirect("TampilDaftar.aspx?ID=" + dgvKuliah.SelectedValue.ToString());

}

Perhatikan bahwa statemen itu melewatkan sebuah string query (?ID) kepada halaman baru, yang membaca nilai IdMtKuliah dari properti SelectedValue dari grid.

Langkah 9: Simpan halaman dan lihat Default.aspx pada browser. Pilih sebuah matakuliah pada grid dan klik link untuk melihat daftar mahasiswa yang terdaftar untuk kuliah tersebut.

Logika Pemrograman

Wednesday, December 14, 2016

Bab 5: Pemrograman C#.NET: Database dan Web

No comments:

Post a Comment

About Me