Pembangunan Aplikasi Web Menggunakan ASP.Net: 2. Aplikasi Web Menggunakan Pangkalan Data

Transkripsi

1 Pembangunan Aplikasi Web Menggunakan ASP.Net: 1 Pembangunan Aplikasi Web Menggunakan ASP.Net: 2 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 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. (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 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 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. 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,

2 Pembangunan Aplikasi Web Menggunakan ASP.Net: 3 Pembangunan Aplikasi Web Menggunakan ASP.Net: 4 Column2. Setelah memilih sumber data nama lajur telah berubah kepada Nama, NoMatrik dan KodKursus (rujuk Rajah 6). Rajah 8 Antara muka GridView Tasks 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. (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 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). (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.

3 Pembangunan Aplikasi Web Menggunakan ASP.Net: 5 Pembangunan Aplikasi Web Menggunakan ASP.Net: 6 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 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 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. Jadual 1 Maklumat properties untuk menghasilkan dua paparan berbeza tetapi berkongsi sumber data yang sama No Objek ID SQLDataSource SqlDataSource1 DetailsView DVData 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.

4 Pembangunan Aplikasi Web Menggunakan ASP.Net: 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. Pembangunan Aplikasi Web Menggunakan ASP.Net: 8 Jadual 2 Maklumat properties untuk memaparkan data menggunakan BulletedList, CheckBoxList, DropDownList, ListBox dan RadioButtonList. No Objek ID SQLDataSource DSSenarai BulletedList BLData 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 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 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) (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 19 Antara muka untuk memilih sumber data menggunakan BulletedList Rajah 17 Antara muka untuk memaparkan data menggunakan BulletedList, CheckBoxList, DropDownList, ListBox dan RadioButtonList (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.

5 Pembangunan Aplikasi Web Menggunakan ASP.Net: 9 Pembangunan Aplikasi Web Menggunakan ASP.Net: 10 (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 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 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 Rajah 21 Kesemua senarai telah disambungkan dengan sumber data (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). (f) Larikan atur cara dan hasilnya adalah seperti Rajah 22. Maklumat Kursus dipaparkan dalam bentuk BulletedList, CheckBoxList, ListBox, DropDownList dan RadioButtonList. Rajah 25 Konfigurasi sumber data menggunakan SqlDataSource Rajah 22 Memaparkan data di dalam bentuk BulletedList, CheckBoxList, DropDownList, ListBox dan RadioButtonList (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). Latihan 5: Menggabungkan dua jadual di dalam kawalan ListView

6 Pembangunan Aplikasi Web Menggunakan ASP.Net: 11 Pembangunan Aplikasi Web Menggunakan ASP.Net: 12 anda ingin melihat data berikutnya klik pada butang Next dan butang Last digunakan untuk melihat muka surat terakhir. 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 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 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 30 Antara muka untuk menggabungkan DropDownList dan GridView 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 Jadual 3 Maklumat properties untuk borang carian caklumat No Objek ID SQLDataSource DSKursus DropDownList DDKodKursus SQLDataSource DSPelajar GridView GVPelajar

7 Pembangunan Aplikasi Web Menggunakan ASP.Net: 13 Pembangunan Aplikasi Web Menggunakan ASP.Net: 14 (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 33 Antara muka untuk menambahkan klausa WHERE pada pernyataan SELECT Rajah 31 Membina pernyataan SQL untuk DSKursus (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. (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 34 Konfigurasi sumber data pada DropDownList Rajah 32 Konfigurasi sumber data yang melibatkan jadual Pelajar (f) Langkah seterusnya hubungkan GridView dengan sumber data. Caranya adalah dengan klik pada GridView Tasks dan kemudiannya pilih DSPelajar (rujuk Rajah 35). (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 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.

8 Pembangunan Aplikasi Web Menggunakan ASP.Net: 15 Pembangunan Aplikasi Web Menggunakan ASP.Net: 16 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 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 37 Antara muka untuk borang carian maklumat Jadual 4 Maklumat properties untuk borang carian maklumat No Objek ID Properties Label lblcarian Text="Carian Maklumat" Textbox txtcari Button btncarian Text="Carian" Label lblkeputusan Text="Keputusan" 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. 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).

9 Pembangunan Aplikasi Web Menggunakan ASP.Net: 17 Pembangunan Aplikasi Web Menggunakan ASP.Net: 18 (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 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 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 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 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). Rajah 42 Menghubungkan GridView dengan sumber data

10 Pembangunan Aplikasi Web Menggunakan ASP.Net: 19 Pembangunan Aplikasi Web Menggunakan ASP.Net: 20 (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 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 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 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 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. Rajah 47 Antara muka setelah untuk menjanakan pernyataan INSERT, UPDATE dan DELETE secara automatic

11 Pembangunan Aplikasi Web Menggunakan ASP.Net: 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. Rajah 51 Antara muka untuk mengemaskini data menggunakan GridView