UNIVERSITI TEKNOLOGI MALAYSIA

FACULTY OF SCIENCE COMPUTER AND INFORMATION SYSTEMS

SYSTEM DEVELOPMENT TECHNOLOGY

(SCD 3723)

REPORT ASP.net Reporting

PREPARED FOR DR. MOHD SHAHIZAN OTHMAN

PREPARED BY
IZYAN ANIS BINTI MAHZAN AC100275 890723-14-5834 izyan.anis@yahoo.com 010-4022210 HAFIZAH BINTI DRAHMAN AC100274 880807-52-5210 fizpeace@yahoo.com 016-8823421

Latiahan 1 Menghasilkan laporan menggunakan Microsoft ReportViewer 1. Bina fail baru yang bernama Default.aspx. Kemudian, pada Toolbox > Reporting, tarik dan lepas kawalan Microsoft ReportViewer ke dalam bahagian reka bentuk.

2. Seterusnya adalah mereka bentuk laporan baru dengan klik pada ReportViewer Tasks. Setelah itu, klik pada pautan Design a new report. Antara muka Choose Your Data Connection akan dipaparkan. Nama pangkalan data yang digunakan iaitu Database.mdf akan dipaparkan pada bahagian DropDownList.

3. Untuk membuat sambungan baru, klik pada butang New Connection seterusnya Nex t> untuk meneruskan proses penghasilan laporan. Setelah itu, klik pada kotak semak Yes, save the connection as: dan masukkan nama sambungan sebagai DatabaseConnectionString. Kemudian, klik pada butang Next >.

4. Antara muka Choose Your Database Objects akan dipaparkan. Klik pada kotak semak Pelajar dan PelajarSetData pada kotak teks DataSet name: seterusnya klik pada butang Next >.

5. Sumber data yang digunakan iaitu PelajarSetData akan dipaparkan pada DropDownList dan begitu juga pada Available datasets:, Pelajar akan dipaparkan. Kemudian, klik pada butang Next>.

6. Atribut yang ingin dipaparkan pada jadual boleh direka bentuk dengan tarik dan lepas atribut bernama NoMatrik, Nama, Alamat dan NoTelefon pada kotak teks Values: seterusnya klik pada butang Next > untuk meneruskan operasi seterusnya.

7. Antara muka pemilihan reka letak jadual akan dipaparkan. Reka letak jadual sudah pun dipilih. Klik pada butang Next >.

8. Berikutnya antara muka pemilihan gaya persembahan jadual akan dipaparkan. Klik pada gaya persembahan Slate dan kemudiannya klik pada butang Next >.

9. Hasil perlaksanaan laporan boleh dilihat seperti dibawah:

10. Imej boleh dimasukkan pada laporan dengan memasukan kawalan image pada bahagian Page Header. Setelah itu, pada Image Properties, masukan logoutm pada bahagian Usethis image:.

11. Setelah itu, tambahkan teks Laporan Pelajar di bahagian Page Header dan tambahkan juga garisan di bawah imej. Pada bahagian Body pula tambahkan teks Tahun 2010 sebelum jadual. Antara muka yang dihasilkan adalah seperti berikut.

12. Seterusnya kembali kepada Form. Klik pada kawalan ReportViewer dan pilih laporan bertajuk Report1.rdlc. Ini akan menyebabkan fail laporan digabungkan dengan ReportViewer.

Kemudian, larikan atur cara dan hasulnya adalah seperti berikut:

Latihan 2 : Memaparkan laporan berdasarkan carian maklumat menggunakan kawalan TextBox 1. Bina fail baru bernama frmCarianRV.aspx. Setelah itu, masukkan kawalan TextBox, Button, Report Viewer dan SqlDataSource pada ruangan Design.

2. Seterusnya, pilih sambungan data yang akan digunakan iaitu DatabaseConnectionString. Kemudian, klik pada butang Next >.

3. Setelah itu, konfigur penyataan SQL yang akan digunakan seperti berikut:

4. Klik pada butang Next > seterusnya kembali pada frmCarianRV.aspx. Setelah itu, klik pada kawalan ReportViewer dan pilih laporan bertajuk Report1.rdlc. Kemudian, klik pada Choose Data Sources. Pada bahagian Data Source Instance, pilih SqlDataSource1 dan klik pada butang OK.

5. Berikutnya sintaks dimasukkan pada bahagian Page Load. Sintaks tersebut bertujuan untuk menyegarkan semula kawalan Report Viewer. Berikut adalah sintaks tersebut:

6. Setelah itu, masukkan pula sintaks pada butang kawalan Cari. Sintaks ini bertujuan menyegarkan semula ReportViewer dan dapat dilihat oleh pengguna. Sintaksnya adalah seperti berikut.

7. Akhir sekali, larikan atur cara pada pelayar web.

Latihan 3 : Memaparkan laporan berdasarkan pilihan kawalan DropDownList 1. Bina webform baru dan namakan fail tersebut sebagai frmDDL.aspx. hasilkan antaramuka seperti gambarajah di bawah.
1 2 3

4 5

No 1 2 3 4 5

Kawalan DropDownList SqlDataSource ReportViewer SqlDataSource ScriptManager

ID DDLKursus dsKursus ReportViewer1 dsLaporan ScriptManager

2. Klik pada ReportViewer anda. Pada ruang ReportViewer task di bahagian hujung kanan anda, pilih opsyen Design a New Report. Tetingkap Report Viewer Wizard akan muncul di hadapan anda. Sebelum anda mereka bentuk Report anda, anda akan terlebih dahulu diminta untuk mengkonfigurasikan Data Source pada tetingkap Data Source Configuration Wizard.

3. Pilih database anda dan tetapkannya sebagai ConnectionString. Seterusnya klik Next hingga anda diminta untuk menetapkan table untuk dipaparkan di dalam Report Viewer anda. Pilih coloumn Pelajar dari Table database anda seperti di bawah dan namakan DataSet Name anda sebagai PelajarDataSet.

4. Seterusnya, pada tetingkap Report Wizard, klik Next. Anda akan diminta untuk menetapkan field bagi maklumat dalam Report Viewer anda. Masukkan kesemua field dalam ruang Available Fields ke ruang Values seperti gambarajah di bawah dan terus klik Next hingga ke bahagian Style. Pilih Style Ocean dan seterusnya klik Finish. Jadual Report anda kini selesai.

5. Masukkan gambar dan ubah suai reka bentuk Report Viewer anda seperti di bawah.

6. Kini, anda dikehendaki untuk menetapkan kod pada fail frmDDL.aspx anda. Anda dikehendaki menetapkan SqlDataSource anda. Pada dsKursus, hubungkan dengan coloumn Kursus. Manakala bagi dsLaporan, hubungkannya dengan coloumn Pelajar dan masukkan clause WHERE. Kod aturcara dsKursus dan dsLaporan anda adalah seperti berikut.
<asp:SqlDataSource ID="dsKursus" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM [Kursus]"> </asp:SqlDataSource>

<asp:SqlDataSource ID="dsLaporan" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM [Pelajar] WHERE ([KodKursus] = @KodKursus)"> <SelectParameters> <asp:ControlParameter ControlID="ddlKursus" Name="KodKursus" PropertyName="SelectedValue" Type="String" /> </SelectParameters> </asp:SqlDataSource>

7. Pada ReportViewer1, konfigurasikan dengan dsLaporan anda. Klik ReportViewer1 > Configure Data Source > dsLaporan.

8. Seterusnya, pada fail frmDDL.aspx.vb masukkan kod untuk ddlKursus seperti berikut.
Partial Class frmDDL Inherits System.Web.UI.Page Protected Sub ddlKursus_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles ddlKursus.SelectedIndexChanged ReportViewer1.LocalReport.Refresh() End Sub End Class

9. Seterusnya semak kod untuk ddlKursus pada fail frmDDL.aspx anda. Pastikan anda menetapkan nilai Autopostback sebagai True. Contoh kod aturcara bagi ddlKursus adalah seperti di bawah.
<asp:DropDownList ID="ddlKursus" runat="server" DataSourceID="dsKursus" DataTextField="KodKursus" DataValueField="KodKursus" AutoPostBack="true"> </asp:DropDownList>

10. Simpan fail anda dan larikan menggunakan web browser anda. Paparan output adalah seperti berikut.

Latihan 4 :Menghasilkan carta pada Laporan

1. Mulakan dengan membina fail baru dan namakan fail tersebut sebagai frmCarta.aspx. Ambil ikon Report Viewer dan letakkan pada bahagian body form anda. Hasilkan antaramuka bagi frmCarta.aspx seperti berikut.
1

2 3 4

No 1 2 3 4

Kawalan Report Viewer Script Manager SQL Data Source Object Data Source

ID ReportViewer1 ScriptManager1 SqlDataSource1 ObjectDataSource1

2. Seterusnya, bina Report bagi carta anda. Klik Add New Item > Report. Ikuti langkah 3-5 untuk membina DataSet baru bagi Staff. Pilih data bagi staff seperti yang di bawah.

3. Seterusnya, klik pada ikon Chart pada ruangan Report Items anda dan masukkannya ke dalam ruangan Report anda. Anda boleh tetapkan sendiri jenis carta yang ingin anda gunakan. Di sini, anda akan menggunakan 4 jenis carta yang berbeza untuk memaparkan gaji dan jawatan bagi staff menggunakan Carta Palang, Carta Pai, Carta Garis dan Cart Buih. 4. Masukkan maklumat yang hendak dipaprkan seperti beikut.

5. Pada ruang A, masukkan maklumat Gaji dan B masukkan maklumat Jawatan. Ulangi perkara yang sama bagi semua Carta Pai, Carta Garis dan Carta Buih. 6. Seterusnya, tetapkan Data Source anda. Klik pada SqlDataSource1 dan pilih Configure Data Source. Pilih maklumat coloumn Staff dan klik untuk memaparkan maklumat jawatan dan gaji sahaja seperti di bawah. Klik Next dan seterusnya klik Finish.

7. Seterusnya, anda perlu mengkofigurasikan Object Datasource anda. Klik pada ObjectDatasource1, pilih Configure Data Source dan pilih

StaffDataSetAdapters.StaffTableAdapters. Klik Next dan seterusnya Finish seperti gamabarajah di bawah.

8.

Seterusnya, konfigurasikan Report Viewer anda dengan Data Source anda.

Pilih ObjectDataSource1 sebagai Data Source Instance anda.

9. Simpan maklumat anda pada fail frmCarta.aspx dan larikan pada web browser anda. Output adalah seperti berikut.