1 Aplikasi Web Menggunakan Pangkalan Data
Latihan 1: Menghubungkan pangkalan data dengan kawalan SqlDataSource
(a) Anda akan mempelajari menghubungkan pangkalan data dengan kawalan
SqlDataSource. Pangkalan data yang digunakan berjenis Microsoft SQL Server yang
bernama Database.mdf. Langkah pertama adalah heret dan lepas kawalan
SqlDataSource pada bahagian reka bentuk sistem. Setelah itu klik pada pautan Configure Data Source… (rujuk Rajah 1) Rajah 1 Memasukkan kawalan SqlDataSource pada reka bentuk sistem
(b) Setelah itu, anda perlu melaksanakan konfigurasi sumber data. Pada peringkat ini sila
klik butang New Connection… Kemudian klik pada butang Browse… untuk memilih lokasi dan fail pangkalan data yang akan digunakan. Sila masukkan nama pangkalan data iaitu
Database.mdf. Sekiranya anda ingin menguji penyambungan dengan pangkalan data,
klik pada butang Test Connection. Jika anda telah berpuashati dengan penyambungan
pangkalan data, klik butang OK (rujuk Rajah 2).
Rajah 2 Antara muka konfigurasi sumber data
(c) Langkah berikut yang perlu anda laksanakan adalah memilih jadual yang anda ingin
paparkan (rujuk Rajah 3). Pada bahagian How would you like to retrieve data from your database? sila klik pada butang radio Specify column from a table or view. Pada ruangan DropDownList, pilih nama jadual Pelajar. Sila pilih lajur NoMatrik, Nama dan KodKursus.
Pernyataan SELECT akan dijanakan secara automatik setelah anda klik pada lajur yang
dikehendaki. Sintaks SQL adalah SELECT [Nama], [NoMatrik], [KodKursus]
FROM [Pelajar]. Klik pada butang Next untuk meneruskan proses selanjutnya.
X Y X Y Z [ Rajah 3 Konfigurasi pernyataan Select (d) Seterusnya, Rajah 4 akan dipaparkan. Anda boleh menguji pertanyaan yang dihasilkan dengan klik pada butang Test Query. Sekiranya anda berpuashati klik pada butang Finish.
Selesai sudah cara untuk menghubungkan pangkalan data dengan sumber data iaitu
kawalan SqlDataSource.
Rajah 4 Antara muka untuk menguji pertanyaan
Latihan 2: Menggabungkan SqlDataSource dengan kawalan GridView
(a) Anda akan mempelajari menggabungkan SqlDataSource dengan kawalan GridView.
Latihan ini merupakan lanjutan daripada Latihan 1. Sila heret dan lepas ikon GridView seperti Rajah 5. Setelah itu pada bahagian GridView Tasks, pilih sumber data yang telah dihasilkan iaitu SqlDataSource1. Rajah 5 Kawalan GridView pada reka bentuk sistem (b) Setelah anda memilih sumber data, secara automatiknya jadual GridView akan berubah.
Jika sebelum anda memilih sumber data, nama lajur adalah Column0, Column1,
X
3 Column2. Setelah memilih sumber data nama lajur telah berubah kepada Nama, NoMatrik dan KodKursus (rujuk Rajah 6). Rajah 6 Antara muka untuk memilih sumber data (c) Sila klik pada ikon View in Browser untuk melihat data yang dipersembahkan di dalam
bentuk GridView (rujuk Rajah 7). Anda akan dapat melihat terdapat tiga lajur beserta
dengan datanya. Lajur yang dipaparkan adalah Nama, NoMatrik dan KodKursus. Data ini
dipanggil daripada pangkalan data menggunakan sumber data SqlDataSource dan
dipersembahkan di dalam bentuk GridView. Rajah 7 Paparan data menggunakan GridView (d) Terdapat ciri lain yang turut ditawarkan oleh GridView iaitu memaparkan muka surat,
mengisih data dan membuat pemilihan bagi satu baris. Bagi membolehkan ciri ini
dilaksanakan, klik pada kotak semak Enable Paging, Enable Sorting dan Enable Selection
pada bahagian GridViewTasks. Setelah anda klik butang semak, secara automatiknya
jadual GridView anda akan berubah berdasarkan ciri yang telah dipilih (rujuk Rajah 8). Rajah 8 Antara muka GridView Tasks (e) Simpan dan larikan semula atur cara yang dihasilkan. Anda akan dapati ketiga‐tiga ciri
tersebut wujud. Rekod yang dipaparkan adalah sebanyak 10 rekod dan terdapat dua
muka surat semuanya. Selain itu anda boleh mengisih data dengan klik sahaja pada
pautan nama lajur seperti Nama, NoMatrik dan KodKursus (rujuk Rajah 9). Sekiranya
anda klik Select, satu baris maklumat akan dipilih.
Rajah 9 Antara muka GridView
(f) Pengguna juga boleh memilih bentuk persembahan kawalan GridView supaya lebih
menarik dan kemas. Langkah untuk memilih persembahan adalah klik pada
GridViewTasks dan pilih pautan Autoformat. Setelah itu, paparan seperti Rajah 10 akan dipaparkan. Anda boleh memilih bentuk skema persembahan seperti Colourful, Classic dan Simple. Setelah anda memilih skema persembahan, klik butang OK.
5
Rajah 10 Pemilihan skema warna dan persembahan menggunakan AutoFormat
(g) Anda akan dapati hasil perlaksanaan pada GridView adalah sama seperti skema
persembahan yang telah anda pilih (rujuk Rajah 11). Klik pada ikon View in Browser untuk persembahan data pada pelayar web.
Rajah 11 Hasil perlaksanaan pemilihan skema warna dan persembahan
(h) Hasil perlaksanaan adalah seperti Rajah 12. Penampilan data anda kelihatan lebih
menarik dan professional dengan menggunakan skema persembahan.
Rajah 12 Antara muka GridView yang ditambah ciri skema persembahan
Latihan 3: Menghasilkan dua paparan berbeza tetapi menggunakan sumber data yang
sama
(a) Anda akan mempelajari cara untuk menghasilkan dua bentuk paparan yang berbeza
tetapi menggunakan sumber data yang sama. Hasilkan antara muka seperti Rajah 13 dan maklumat properties seperti Jadual 1. Gunakan sumber data iaitu SqlDataSource1 yang
sama seperti Latihan 1. Anda akan menggunakan kawalan DetailsView dan FormView
untuk memaparkan data yang diambil daripada SqlDataSource1. Rajah 13 Antara muka sumber data, DetailsView dan FormView Jadual 1 Maklumat properties untuk menghasilkan dua paparan berbeza tetapi berkongsi sumber data yang sama No Objek ID X SQLDataSource SqlDataSource1 Y DetailsView DVData Z FormView FormView1
(b) Setelah itu, gabungkan DetailsView dan FormView dengan SqlDataSource1. Caranya
adalah pilih SqlDataSource1 pada bahagian Choose Data Source. Selain itu, klik kotak
semak Enable Paging untuk DetailsView dan FormView. Hasil perlaksanaan adalah
seperti Rajah 14.
X
Y
7
Rajah 14 Antara muka setelah menggabungkan bentuk paparan dengan sumber data, DetailsView dan FormView
(c) Bagi memperkemaskan paparan persembahan, pilih skema persembahan Colourful
untuk DetailsView dan FormView. Hasilnya adalah seperti Rajah 15. Rajah 15 Menambah skema persembahan pada DetailsView dan FormView (d) Larikan atur cara tersebut, hasilnya seperti Rajah 16. Hasil perlaksanaan menunjukkan ASP.Net membenarkan persembahan data yang sama dalam dua bentuk laporan yang berbeza. Rajah 16 Hasil perlaksanaan DetailsView dan FormView
Latihan 4: Memaparkan data menggunakan BulletedList, CheckBoxList, DropDownList,
ListBox dan RadioButtonList
(a) Selain penggunaan kawalan seperti DetailsView, FormView dan GridView, data juga
boleh dipaparkan dengan menggunakan BulletedList, CheckBoxList, DropDownList,
ListBox dan RadioButtonList. Hasilkan antara muka seperti Rajah 17 dan maklumat properties seperti Jadual 2. Rajah 17 Antara muka untuk memaparkan data menggunakan BulletedList, CheckBoxList, DropDownList, ListBox dan RadioButtonList Z X Y [ ] \ Jadual 2 Maklumat properties untuk memaparkan data menggunakan BulletedList, CheckBoxList, DropDownList, ListBox dan RadioButtonList. No Objek ID X SQLDataSource DSSenarai Y BulletedList BLData Z CheckBoxList CBLData [ DropDownList DDLData \ ListBox LBData ] RadioButtonList RBLData
(b) Latihan ini masih lagi menggunakan pangkalan data Database.mdf. Data yang akan
digunakan pada latihan ini adalah dari jadual Kursus dan nama lajurnya adalah
NamaKursus. Pada konfigurasi sumber data, pilih nama jadual adalah Kursus dan Columns pula adalah NamaKursus (rujuk Rajah 18).
Rajah 18 Konfigurasi sumber data
(c) Setelah konfigurasi sumber data dilaksanakan, anda perlu memilih sumber data pada
BulletedList. Caranya adalah dengan klik pada BulletedList Tasks dan kemudiannya pilih Choose Data Source…(rujuk Rajah 19) Rajah 19 Antara muka untuk memilih sumber data menggunakan BulletedList (d) Rajah 20 akan dipaparkan, pilih sumber data yang akan digunakan iaitu SqlDataSource1. Pada DropDownList pilih NamaKursus bagi tujuan pemaparan dan nilai pada BulletedList. Klik butang OK sekiranya anda telah berpuashati dengan maklumat yang telah dipilih. X Y
9
Rajah 20 Konfigurasi sumber data untuk BulletedList
(e) Ulangi langkah yang sama bagi konfigurasi sumber data untuk kawalan lain seperti
CheckBoxList, DropDownList, ListBox dan RadioButtonList. Hasil perlaksanaan adalah
seperti Rajah 21. Setelah konfigurasi dilaksanakan maklumat pada kawalan telah
bertukar dari Unbound kepada Databound. Ini bermaksud kawalan telah dihubungkan dengan sumber data. Rajah 21 Kesemua senarai telah disambungkan dengan sumber data
(f) Larikan atur cara dan hasilnya adalah seperti Rajah 22. Maklumat Kursus dipaparkan
dalam bentuk BulletedList, CheckBoxList, ListBox, DropDownList dan RadioButtonList. Rajah 22 Memaparkan data di dalam bentuk BulletedList, CheckBoxList, DropDownList, ListBox dan RadioButtonList Latihan 5: Menggabungkan dua jadual di dalam kawalan ListView
(a) Latihan ini menunjukkan contoh memaparkan dua jadual berbeza di dalam kawalan
ListView. Kaedah untuk membina perhubungan antara jadual telah dihuraikan di dalam
Bab 8, Latihan 8.8. Anda akan menggunakan fail view yang telah dihasilkan iaitu
pelajarKursus. Fail pelajarKursus merupakan gabungan antara dua jadual iaitu Kursus dan Pelajar (rujuk Rajah 23). Lajur yang dipilih adalah Kursus.NamaKursus dan
Pelajar.Nama.
Rajah 23 Perhubungan antara dua jadual
(b) Hasilkan antara muka seperti Rajah 24. Latihan ini menggunakan sumber data
SqlDataSource dan paparannya pula menggunakan kawalan ListView.
Rajah 24 Antara muka SqlDataSource dan ListView
(c) Pangkalan data yang digunakan adalah Database.mdf. Pada bahagian konfigurasi
sumber data, pilih nama: pelajarKursus. Lajur yang digunakan adalah Nama dan
NamaKursus. Lajur Nama merupakan lajur yang terdapat pada jadual Pelajar manakala lajur NamaKursus dari jadual Kursus (rujuk Rajah 25). Rajah 25 Konfigurasi sumber data menggunakan SqlDataSource
(d) Setelah itu, hubungkan SQLDataSource dengan kawalan ListView. Caranya adalah klik
pada ListView Tasks dan pilih SqlDataSource1 pada ruangan Choose Data Source: (rujuk Rajah 26).
11 Rajah 26 Memilih sumber data pada ListView (e) Langkah berikutnya adalah melaksanakan konfigurasi ListView. Caranya adalah klik pada ListView Tasks dan kemudiannya pilih Configure ListView. Antara muka seperti Rajah 27
akan dipaparkan. Konfigurasi ListView digunakan untuk memilih bentuk persembahan
pada pelayar web. Pengguna boleh memilih kerangka yang diingini seperti Grid, Tiled,
Bullet List, Flow dan Single Row. Selain itu, konfigurasi ListView turut menawarkan warna
tema yang boleh digunakan seperti Colourful, Professional dan Blues. Sekiranya
pengguna ingin meletakkan muka surat pada laman web, klik pada kotak semak Enable Paging. Sila pilih Grid pada Select a Layout dan Colourful untuk Select a Style:, kemudian klik butang OK untuk meneruskan perlaksanaan. Rajah 27 Konfigurasi ListView
(f) Hasil perlaksanaan konfigurasi ListView adalah seperti Rajah 28. Maklumat Nama dan
NamaKursus akan dipaparkan di dalam bentuk Grid. Selain itu anda boleh melihat data pada muka surat lain dengan klik pada butang First, Previous, Next atau Last. Rajah 28 Hasil perlaksanaan konfigurasi ListView
(g) Larikan atur cara, hasilnya adalah seperti Rajah 29. Anda akan dapati data dari dua jadual berbeza dipaparkan di dalam jadual yang sama menggunakan ListView. Sekiranya
anda ingin melihat data berikutnya klik pada butang Next dan butang Last digunakan
untuk melihat muka surat terakhir. Rajah 29 Antara muka web yang menggabungkan jadual Kursus dan Pelajar
Latihan 6: Menggabungkan DropDownList dengan GridView
(a) Latihan ini akan menunjukkan cara untuk menggabungkan DropDownList dengan
GridView. Dua jadual digunakan di dalam latihan ini ialah Pelajar dan Kursus. Maklumat
berkenaan dengan Pelajar akan dihubungkan menggunakan sumber data DSPelajar
manakala jadual Kursus pula akan dihubungkan menggunakan sumber data DSKursus.
Hasilkan antara muka seperti Rajah 30 dan maklumat properties seperti Jadual 3. Rajah 30 Antara muka untuk menggabungkan DropDownList dan GridView Jadual 3 Maklumat properties untuk borang carian caklumat No Objek ID X SQLDataSource DSKursus Y DropDownList DDKodKursus Z SQLDataSource DSPelajar [ GridView GVPelajar Z X Y [
13
(b) Anda perlu laksanakan konfigurasi sumber data DSKursus. Pada pernyataan SQL taipkan
pernyataan SELECT DISTINCT NamaKursus, KodKursus FROM Kursus.
Pernyataan ini akan mempamer rekod yang unik untuk nama kursus dan kod kursus
(rujuk Rajah 31).
Rajah 31 Membina pernyataan SQL untuk DSKursus
(c) Setelah itu, hasilkan pula konfigurasi sumber data untuk DSPelajar. Pilih nama jadual Pelajar dan klik pada kotak semak untuk maklumat NoMatrik, Nama, Alamat dan NoTelefon (rujuk Rajah 32). Rajah 32 Konfigurasi sumber data yang melibatkan jadual Pelajar (d) Langkah berikutnya adalah klik pada butang Where untuk menambah pernyataan pada
klausa WHERE. Masukkan maklumat seperti Rajah 33. Setelah itu, klik pada butang Add
dan kemudiannya klik pada butang OK.
Rajah 33 Antara muka untuk menambahkan klausa WHERE pada
pernyataan SELECT
(e) Seterusnya, anda perlu hubungkan antara kawalan DropDownList dengan sumber data.
Pada bahagian DropDownList Tasks, klik Choose Data Source... Antara muka seperti
Rajah 34 akan dipaparkan. Pilih sumber data DSKursus, nama yang dipaparkan pada
DropDownlist sebagai NamaKursus manakala nilai pada DropDownlist adalah KodKursus. Rajah 34 Konfigurasi sumber data pada DropDownList (f) Langkah seterusnya hubungkan GridView dengan sumber data. Caranya adalah dengan klik pada GridView Tasks dan kemudiannya pilih DSPelajar (rujuk Rajah 35). Rajah 35 Menghubungkan sumber data dengan GridView (g) Larikan atur cara yang telah dihasilkan dan paparannya seperti Rajah 36. Setelah anda memilih nama kursus, maklumat pelajar yang berkaitan dengan kursus yang dipilih akan dipamerkan secara automatik.
15 Rajah 36 Hasil perlaksanaan gabungan DropDownList dengan GridView Latihan 7: Pencarian Maklumat Anda akan mempelajari cara untuk melaksanakan pencarian maklumat yang terdapat di dalam pangkalan data. Cara untuk melaksanakannya adalah seperti berikut: (a) Hasilkan antara muka seperti Rajah 37. Maklumat properties adalah seperti Jadual 4. Rajah 37 Antara muka untuk borang carian maklumat Jadual 4 Maklumat properties untuk borang carian maklumat No Objek ID Properties
X Label lblCarian Text="Carian Maklumat"
Y Textbox txtCari
Z Button btnCarian Text="Carian"
[ Label lblKeputusan Text="Keputusan"
\ GridView GVHasil EmptyDataText="Tiada Rekod"
Visible="False"
] SqlDataSource SqlDataSource1
(b) Anda akan menggunakan pangkalan data bernama Database.mdf. Maklumat view
yang digunakan adalah pelajarKursus. Pada bahagian lajur, sila klik kotak semak untuk Nama dan NamaKursus. Setelah itu klik butang WHERE (Rajah 38).
Z X Y [ \ ] Rajah 38 Konfigurasi sumber data
(c) Pada antara muka untuk menambah klausa WHERE, anda akan menggunakan klausa
LIKE. Penggunaan klausa LIKE membolehkan nilai yang terdapat pada txtCari
dibandingkan dengan nilai di dalam pangkalan data. Masukkan nama lajur sebagai
Nama, Operator adalah LIKE, manakala sumber adalah Control. Pada bahagian ControlID, klik pada txtCari. Setelah itu, klik pada butang Add. Maklumat berkenaan
dengan sintaks kemudiannya akan dipaparkan pada ruangan klausa WHERE. Selepas itu,
klik butang OK untuk meneruskan konfigurasi sumber data (rujuk Rajah 39).
Rajah 39 Antara muka untuk menambah klausa WHERE
(d) Pada pernyataan SELECT anda akan dapati terdapat penambahan klausa WHERE (rujuk
Rajah 40). Klik butang Next> untuk operasi seterusnya.
17
Rajah 40 Maklumat klausa WHERE ditambahkan pada pernyataan SELECT
(e) Anda boleh menguji pernyataan yang anda telah bina dengan klik pada butang Test
Query (rujuk Rajah 41). Rajah 41 Antara muka untuk pengujian pertanyaan (f) Langkah berikutnya adalah memilih sumber data pada kawalan GridView. Sumber data
yang digunakan adalah SqlDataSource1. Setelah itu klik pada kotak semak Enable
Paging, Enable Sorting dan Enable Selection (rujuk Rajah 42). Anda boleh menukar
warna dan bentuk penampilan untuk GridView dengan klik pada Autoformat. Sila
gunakan skema Classic dan kemudiannya klik OK.
Rajah 42 Menghubungkan GridView dengan sumber data
(g) Dwi‐klik butang Carian dan masukkan maklumat berikut. Kawalan GridView dan
lblKeputusan hanya akan dipaparkan setelah anda klik pada butang Carian. Protected Sub btnCarian_Click(ByVal sender As Object, ByVal
e As System.EventArgs) Handles btnCarian.Click GVHasil.Visible = True lblKeputusan.Visible = True End Sub (h) Larikan atur cara carian maklumat pada pelayar web. Antara muka seperti Rajah 55 akan dipaparkan. Masukkan “b” pada kotak teks setelah itu klik pada butang Carian. Rajah 43 Antara muka carian maklumat pada pelayar web
(i) Hasil perlaksanaan pencarian maklumat “b” adalah seperti Rajah 44. Anda boleh klik
pada pautan Select bagi membolehkan sesuatu baris dihitamkan. Selain itu, anda juga
boleh mengisih maklumat dengan klik pada pautan di tajuk laporan iaitu Nama dan
NamaKursus.
Rajah 44 Hasil perlaksanaan pencarian maklumat
(j) Sekiranya nilai yang dicari tidak dijumpai di dalam pangkalan data, maka teks Tiada Rekod akan dipaparkan (rujuk Rajah 45).
19
Rajah 45 Tiada rekod dijumpai pada pangkalan data
Latihan 8: Mengemaskini dan menghapuskan data menggunakan kawalan GridView
(a) Anda akan mempelajari kaedah untuk mengemaskini dan menghapuskan data
menggunakan kawalan GridView. Hasilkan antara muka seperti Rajah 46. Rajah 46 Antara muka untuk mengemaskini dan menghapuskan data (b) Anda boleh melaksanakan konfigurasi supaya proses pengemaskinian dan penghapusan
data dapat dijanakan secara automatik. Caranya adalah klik pada butang Advanced di
konfigurasi sumber data. Setelah itu, antara muka Advanced SQL Generation Options
akan dipaparkan. Tandakan kedua‐dua kotak semak supaya pernyataan SQL bagi fungsi
INSERT, UPDATE dan DELETE dapat dijanakan oleh sistem (rujuk Rajah 47). Seterusnya
klik pada butang OK.
Rajah 47 Antara muka setelah untuk menjanakan pernyataan INSERT, UPDATE
dan DELETE secara automatic
X Y
(c) Langkah seterusnya adalah menghubungkan GridView dengan sumber data. Pada
bahagian GridView Tasks, sila klik kotak semak Enable Editing dan Enable Deleting (rujuk Rajah 48). Rajah 48 Antara muka konfigurasi GridView Tasks (d) Rajah 49 menunjukkan antara muka setelah dihubungkan antara GridView dan sumber data. Anda juga boleh melihat pautan Edit dan Delete. Pautan Edit digunakan sekiranya
pengguna ingin membuat kemaskini terhadap sesuatu data. Pautan Delete pula
digunakan untuk menghapuskan data yang tidak dikehendaki. Rajah 49 Antara muka setelah dihubungkan GridView dengan sumber data serta membenarkan kemaskini dan menghapuskan data (e) Seterusnya, lihat hasil paparan maklumat pada pelayar web (rujuk Rajah 50). Sekiranya
anda ingin membuat kemaskini data, klik pada pautan Edit. Pengguna boleh
menghapuskan data dengan klik pada pautan Delete.
21
Rajah 50 Antara muka GridView yang mempunyai pautan Edit dan Delete
(f) Rajah 51 menunjukkan antara muka setelah pautan Edit diklik. Anda boleh menukar
maklumat berkaitan dengan nama dan kod kursus. Setelah data dikemaskini, klik pada pautan Update untuk menyimpan data terkini ke dalam pangkalan data.
