Wednesday, November 6, 2013

Menampilkan Report dengan MS Reporting Pada VB.NET (Versi Indonesia)

Tutorial ini membahas mengenai menampilkan report (menggunakan Microsoft Reporting) di VB.NET

Artikel ini adalah terjemahan dari versi bahasa Inggris (yang juga ditulis oleh penulis). Akan ada sedikit perbedaan, karena memang ada istilah dalam bahasa inggris yang sulit dicari padanannya dalam bahasa Indonesia, (lagian kalau sama persis kesannya kayak google translate abiezz)

Biasanya orang suka nanya "gimana sih cara menampilkan report di program", dan seringkali mereka menyebut suatu produk tertentu, yaitu Crystal Reports. Crystal Reports adalah yang paling sering digunakan (penulis sudah menggunakan Crystal Reports dari versi 8.5, dengan programnya pakai VB6). Namun sebenarnya banyak pilihan lain yang bisa digunakan, ada ActiveReports, XtraReports, dst.

Penulis pertama kali berkenalan dengan Microsoft Reporting itu adalah saat company di tempat penulis bekerja waktu itu menggunakan SQL Server Reporting Services 2005 sebagai standar dari pembuatan report. SQL Server Reporting Services ini adalah produk reporting andalan utama microsoft, yang jalannya server-side (ada Report Server sendiri). Namun demikian Microsoft juga menyediakan versi client side-nya yang disebut Microsoft Reporting.


Kalau pengalaman penulis sendiri sih, kalau tujuan akhir dari pembuatan reportnya adalah supaya bisa dieksport ke Excel dengan rapi, lebih gampang bikinnya pakai Microsoft Reporting daripada Crystal Reports, karena waktu desain-nya saja sudah dalam bentuk cell, dibandingkan dengan Crystal Reports yang free placement (dan kalau gak pas dikit antara field yang seharusnya 1 lajur, nanti jadinya cell yang berbeda di excel).

Mulai yuk.

Sebelumnya, kita bikin dulu contoh data untuk report kita. Kita di sini pakainya SQL Server/SQL Server Express. Nyalain dulu Management Studio-nya, kemudian bikin database baru, kasih nama "StudentsDB", setelah itu kita buat tabel baru, dengan nama "Students".

Kita bisa bikin pakai table designer atau pakai script ini :



 Create Table Students  
 (  
      StudentID             char(5)  
      ,StudentName          varchar(50)       
      ,BirthDate            datetime  
      ,Gender               varchar(6)  
 );  


Trus kita masukin data-data sample sedemikian, boleh manual atau pakai script ini :

 Insert Into Students(StudentID,StudentName,BirthDate,Gender)   
 Values ('S0001','Astrid','1986-05-20','Female')  
 Insert Into Students(StudentID,StudentName,BirthDate,Gender)   
 Values ('S0002','Betty','1989-03-10','Female')  
 Insert Into Students(StudentID,StudentName,BirthDate,Gender)   
 Values ('S0003','Cindy','1987-06-21','Female')  
 Insert Into Students(StudentID,StudentName,BirthDate,Gender)   
 Values ('S0004','Donald','2000-01-01','Male')  
 Insert Into Students(StudentID,StudentName,BirthDate,Gender)   
 Values ('S0005','Eric','1982-08-27','Male')  


Kalau data sudah tersedia, sekarang saatnya kita coba dulu. Kita mulai dari yang sederhana, yaitu data yang sudah diinput tadi akan kita tampilkan di DataGridView. Ini cuman memastikan saja kita bisa nyambung ke databasenya (Biar kalau error, gak bingung errornya apakah di reportnya atau bukan).

1. Nyalakan Visual Studio, bikin Project baru dengan Tipe Windows Forms Application. Beri nama "StudentsProject". Visual Studio akan membuat project baru, dan karena tipe projectnya adalah Windows Forms Application, maka akan dibuatkan form kosong dengan nama Form1

2. Dari Toolbox tarik datagridview, kasih nama 'dgvStudents'

3. Dari Toolbox juga, tarik satu button. Ganti namanya jadi 'btnLoad', textnya "Load".




4. Dobel klik  pada button tersebut supaya oleh Visual Studio dibuatkan prosedur event handlernya. Isi dengan coding di bawah. Oh ya, sebelumnya di paling atas ditambahkan Import dulu untuk System.Data.SQLClient.

Informasi koneksinya disesuaikan dengan komputer yang dipakai yah.

     Dim ServerName As String = ".\SQLExpress"  
     Dim DatabaseName As String = "dbStudents"  
     Dim UserID As String = "sa"  
     Dim Password As String = "abc@123"  
     Dim Conn As New SqlConnection _  
     ("Data Source=" & ServerName & ";Initial Catalog=" & DatabaseName & ";user id=" & UserID & ";password=" & Password)  
     Dim dt As New DataTable  
     Dim da As New SqlDataAdapter("Select StudentID,StudentName,BirthDate,Gender From Students", Conn)  
     da.Fill(dt)  
     dgvStudents.DataSource = dt  



5. Coba jalankan programnya, kalau tidak ada masalah, Datanya akan ditampilkan di gridview waktu kita klik 'Load'




Dah, itu cuman mastiin doang kalau kita bisa ngambil data dari databasenya. Seharusnya tidak perlu dijelaskan sih, cuman bikin koneksi, dan ambil datanya pakai dataadapter, ditampung di datatable dan datatablenya ditampilkan di datagridview.

Kita lanjutkan tutorial kita. Kita akan mendesain reportnya, tapi sebelumnya kita harus bikin dulu Dataset (yang strongly typed, maksudnya ada struktur/skemanya), supaya skema tersebut bisa digunakan oleh Visual Studio untuk desain reportnya.

6. Klik kanan pada nama project di Solution Explorer, pilih Add New Item, kemudian cari Dataset di Dialog* yang muncul (kalau di Visual Studio 2008, ada di dalam kategori 'Data'). Namanya biarkan saja DataSet1

* Catatan : Dialog itu apa yah padanannya dalam bahasa indonesia ? Ya udah lah kita pakai istilah itu saja, intinya form yang nongol itu loh. Kalau lagi muncul kita gak bisa akses form lain, itu istilahnya "Modal Dialog".

7. Visual Studio akan langsung menampilkan design view untuk DataSet1. Sekarang seharusnya kosong doang, dan ada tulisan yang menyatakan demikian. Klik kanan aja pada tempat yang kosong, dan pilih Add->Datatable




8. Ganti nama datatablenya jadi "Students", klik kanan untuk menambahkan kolom. Tambahkan semua kolom yang ada pada tabel Students. Khusus untuk BirthDate, tipe datanya tolong diganti jadi System.DateTime.



9. Klik kanan lagi pada nama project di solution explorer, pilih Add New Item, kali ini kita pilih "Report" (di Visual Studio 2008, adanya di dalam kategori "Report" juga). Beri nama RptStudents, dan pastikan ekstensionnya rdlc (kalau bukan, berarti salah pilih tipe Item).





10. Report Designer seharusnya muncul, dengan di sebelah kiri, ada window "DataSource", yang berisi Dataset1 dan Datatable Students yang sudah kita buat di langkah 7 & 8

11. Tarik komponen Table dari toolbox ke reportnya. Komponen Table ini adalah komponen yang digunakan untuk menampilkan data dalam bentuk tabular. Selain dari Table, ada juga List untuk bentuk list dan Matrix untuk tampilan CrossTab.




12. Tarik semua kolom dari datatable Students ke dalam table tersebut. Karena kurang, tambahkan 1 lagi dengan menselect salah satu kolom, klik kanan dan pilih "Add Column to the left/right".

Kalau kita lihat, setelah kita menambahkan kolom-kolom tersebut, sekarang kalau kita pilih tabelnya ("table1"), kita bisa lihat di property window, property DatasetName terisi "DataSet1_Students"

 



13. Tambahkan 1 kolom lagi ke kanan, yang kita pakai untuk menampilkan Age (umur). Data yang ada adalah BirthDate (tanggal lahir), jadi kita akan hitung dengan menggunakan function Datediff dan Today.

*Note: Kalau aplikasinya ada di komputer client dan databasenya ada di server, mendingan dihitungnya di database server pakai getdate(), karena perintah Today() ini akan diambil dari komputer client (tempat kita install program ini nantinya), yang tanggalnya bisa salah.

Klik kanan pada bagian detail di mana kita akan taruh kolom Age, pilih expression. Akan ada Dialog yang muncul

14. Isi dengan Formula

=DateDiff(DateInterval.Year,Fields!BirthDate.Value,Today())

Kita bisa lihat di bagian bawah dialog yang muncul, ada daftar perintah yang bisa dipakai. Sebagai contoh, kita bisa lihat ada DateDiff dan Today di Common Functions -> Date & Time, dan kita bisa pilih BirthDate dari kategori Fields(DataSet1_Students)






15. Tambahkan 1 kolom lagi, kali ini ke kiri. di detail-nya, klik kanan dan pilih expression juga. Kali ini isi dengan =RowNumber("table1") , ini untuk menampilkan nomor , dengan scope-nya (cakupan) adalah table1 (nama table kita)




16. Tambahkan border di tabelnya, pilih semua kolom dan baris yang ada di dalam, kemudian pilih tombol border di toolbar, pilih "all borders"




17. Sekarang kita ganti format kolom BirthDate jadi bentuk shortdate. Klik pada kolom BirthDate, dan di Property Window, isi properti Format dengan dd-MMM-yyyy






Untuk menampilkan report yang sudah kita buat, kita perlu menggunakan komponen "ReportViewer". Supaya programnya lebih rapi, kita akan pasang di Form lain.

18. Klik kanan pada nama project di solution explorer, pilih Add->Windows Form. Namanya biarkan saja tetap Form2. Property WindowState kita ganti jadi Maximized supaya nanti form itu muncul dengan kondisi ukuran penuh.

19. Pada design view Form2 tersebut, tarik komponen MicrosoftReportViewer. Properti Dock-nya kita ganti jadi Fill supaya komponen tersebut memenuhi formnya.



20. Kembali ke design view dari Form1, tambahkan button dari toolbox, beri nama btnShowReport, dengan teksnya adalah "Show Report".

21. Pada prosedur untuk event click dari btnShowReport itu, tambahkan koding di bawah. Sebelumnya kita tambahkan dulu Import untuk namespace Microsoft.Reporting.Winforms di paling atas.

 Imports Microsoft.Reporting.WinForms  

di dalam subprosedurnya :


     Dim ServerName As String = ".\SQLExpress"  
     Dim DatabaseName As String = "dbStudents"  
     Dim UserID As String = "sa"  
     Dim Password As String = "abc@123"  
     Dim Conn As New SqlConnection _  
     ("Data Source=" & ServerName & ";Initial Catalog=" & DatabaseName & ";user id=" & UserID & ";password=" & Password)  
     Dim dt As New DataTable  
     Dim da As New SqlDataAdapter("Select StudentID,StudentName,BirthDate,Gender From Students", Conn)  
     da.Fill(dt)  

     Dim DataSetName As String = "DataSet1"  
     Dim DataTableName As String = "Students"  
     Dim rds As New ReportDataSource(DataSetName & "_" & DataTableName, dt)  

     Dim ReportViewerForm As New Form2  
     ReportViewerForm.ReportViewer1.LocalReport.ReportEmbeddedResource = My.Application.Info.AssemblyName & ".RptStudents.rdlc"  
     ReportViewerForm.ReportViewer1.LocalReport.DataSources.Add(rds)  
     ReportViewerForm.ReportViewer1.RefreshReport()  
     ReportViewerForm.Show()  


Penjelasan

a. Bagian ini hanya membuat koneksi ke SQL Server, dan mengambil data dengan menggunakan dataadapter dari tabel Students di database ke datatable.

     Dim ServerName As String = ".\SQLExpress"  
     Dim DatabaseName As String = "dbStudents"  
     Dim UserID As String = "sa"  
     Dim Password As String = "abc@123"  
     Dim Conn As New SqlConnection _  
     ("Data Source=" & ServerName & ";Initial Catalog=" & DatabaseName & ";user id=" & UserID & ";password=" & Password)  
     Dim dt As New DataTable  
     Dim da As New SqlDataAdapter("Select StudentID,StudentName,BirthDate,Gender From Students", Conn)  
     da.Fill(dt)  


b. Kalau kita lihat kembali ke langkah 12, kita bisa melihat bahwa Reportnya mengharapkan "Dataset1_Students", dan itu yang kita lakukan sekarang, kita membuat objek ReportDataSource dengan nama "Dataset1_Students" dan isinya adalah datatable dt yang sudah kita isi di langkah sebelumnya.


     Dim DataSetName As String = "DataSet1"  
     Dim DataTableName As String = "Students"  
     Dim rds As New ReportDataSource(DataSetName & "_" & DataTableName, dt)  



c. Bagian ini adalah membuat instance dari Form2, menginstruksikan kepada ReportViewernya untuk memuat RptStudents.rdlc, dan menambahkan data source yang sudah kita buat sebelumnya. Di sini kita me-load RptStudents.rdlc sebagai embedded resource, yang artinya nanti akan dicompile bareng beserta exe-nya.


     Dim ReportViewerForm As New Form2  
     ReportViewerForm.ReportViewer1.LocalReport.ReportEmbeddedResource = My.Application.Info.AssemblyName & ".RptStudents.rdlc"  
     ReportViewerForm.ReportViewer1.LocalReport.DataSources.Add(rds)  
     ReportViewerForm.ReportViewer1.RefreshReport()  
     ReportViewerForm.Show()  


*Ada cara lain, yaitu dengan memperlakukannya sebagai resource eksternal, yaitu dengan mengikutsertakan file rdlc beserta programnya (untuk memperkecil file exe, diremove saja dari project biar gak ikut tercompile, kalau tidak ya akan tetap ada sebagai embedded resource), lalu kemudian di-load dengan menggunakan ReportViewerForm.ReportViewer1.LocalReport.LoadReportDefinition(stream)


22. Coba jalankan programnya, kalau tidak ada masalah, seharusnya ketika kita klik tombol Load Report, reportnya akan muncul.




Horee, kita sudah bisa menampilkan Report yang kita buat dengan Microsoft Reporting :)

Sebagai bonus, penulis akan menunjukkan cara untuk grouping dan menambahkan parameter ke dalam report.

23. Buka kembali Report Designer untuk RptStudents.rdlc, klik pada tabelnya, dan di bagian kiri dan atas akan muncul handle berwarna abu-abu. Klik kanan pada yang sebelah kiri dan klik Insert Group.




24. Pada dialog yang muncul, kita isi grouping expressionnya dengan Gender. Perhatikan bahwa nama groupnya adalah "table1_Group1", klik OK untuk melanjutkan.

25. Sekarang tabelnya akan bertambah 2 baris, itu adalah Group Header dan Group Footer.

26. Semua kolom di Group Header kita merge, demikian juga yang di Group Footer. Pasang expression sebagai berikut

Di Group Header :

    =Fields!Gender.Value & " Students"  

Di Group Footer :

 ="Number Of Students: " & Count(Fields!StudentID.Value,"table1_Group1")  








27. Coba jalankan lagi programnya. Kita bisa lihat bahwa sekarang studentsnya digrouping berdasarkan gender (gambar di bawah dipermanis sedikit dengan menghilangkan beberapa border yang tidak perlu.


Tips :
  • RowNumber bisa kita reset supaya untuk setiap group mulai dari 1 lagi dengan menggantinya menjadi =RowNumber("table1_Group1")
  • Kita bisa membuat header kolom berulang di setiap group dengan memindahkannya dari table header ke group header (tambahkan baris untuk group header dengan mengklik kanan pada group header yang sudah ada, dan pilih add row)


28. Sekarang kita coba tambahkan parameter. Pada main menu visual studio, klik Report -> Report Parameters

29. Pada dialog yang muncul, klik add untuk menambahkan parameter baru. Beri nama SampleParameter dan centang pada checkbox hidden, karena kita akan mengisi Parameter tersebut dari program.




30. Kembali ke report designer, tarik textbox dari toolbox dan taro di reportnya. Isi dengan expression

 =Parameters!SampleParameter.Value  






31. Pada prosedure event click dari tombol LoadReport, tambah koding ini sebelum ReportViewerForm.ReportViewer1.RefreshReport()


     Dim params(0) As ReportParameter  
     params(0) = New ReportParameter("SampleParameter", "This is a sample Parameter")  
     ReportViewerForm.ReportViewer1.LocalReport.SetParameters(params)  




32. Coba jalankan lagi programnya, sekarang seharusnya tulisan "This is a sample Parameter" akan muncul di reportnya.

Ok , sekian untuk tutorial singkat ini. Selamat mencoba !

No comments:

Post a Comment