Rabu, 12 Oktober 2011

Membuat Laporan data Dalam bentuk PDF dengan menggunakan Asp.Net C#


Sebelum kita membuat laporan tersebut kita sudah memiliki database di SqlServer 2008 R2 yang sudah berisi table yang nantinya akan kita buat laporan Pdf
Langsung saja kita buka VisualStudio 2008 pilih Asp.Net web application .untuk Name kita missal saja ReportPdf dan Location penyimpanan kita tentukan terserah kita
 
2.Setelah berhasil kemudian kita klik kanan untuk ReportPdfnya dan pilih add NewExiting –Web FormControl-Berinama ReportPdf.
3.Kemudian Akan Tampil ReportPdf.ascx dan ReportPdf.ascx.cs.Untuk ReportPdf.ascx kita masukan coding seperti di bawah ini:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ReportPDF.ascx.cs" Inherits="ReportPDF.ReportPDF" %>

 <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
 <style type="text/css">
        .pdfButton
        {
            color: White;
            border: 0;
            height: 48px;
            background: url('imagesadvertisement/PDF-Logo.jpg') no-repeat center;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript" language="javascript">
        function requestStart(sender, args)
        {
            if (args.get_eventTarget().indexOf("DownloadPDF") > 0)
                args.set_enableAjax(false);
        }
    </script>
   
<telerik:RadGrid ID="RadGrid1" runat="server" GridLines="None" DataSourceID="SqlDataSource1"
        AllowSorting="true" Skin="Black" Width="745px" AllowPaging="True" OnItemCreated="RadGrid1_ItemCreated"
        OnItemCommand="RadGrid1_ItemCommand" AutoGenerateColumns="False">
        <ExportSettings IgnorePaging="true" OpenInNewWindow="true">
            <Pdf PageHeight="510mm" PageWidth="297mm" PageTitle="MyFamily"
                PageBottomMargin="20mm" PageTopMargin="20mm" PageLeftMargin="20mm" PageRightMargin="20mm" />
        </ExportSettings>
        <MasterTableView CommandItemDisplay="Top" DataSourceID="SqlDataSource1" DataKeyNames="ID"
            PageSize="4">
            <PagerStyle Mode="NumericPages" />
            <CommandItemTemplate>
<asp:Button ID="DownloadPDF" runat="server" Width="100%" CommandName="ExportToPdf" Text="AdobePdf"
CssClass="pdfButton" />
<asp:Image ID="Image1" runat="server" ImageUrl="/DesktopModules/imagesadvertisement/PDF-Logo.jpg" AlternateText="MyFamily"
Width="745px" Height ="90px" />
            </CommandItemTemplate>
            <Columns>
           
                <telerik:GridBoundColumn DataField="Nama"  ReadOnly="True"
                    SortExpression="Nama" UniqueName="Nama" HeaderText="Nama" HeaderStyle-Font-Size ="Small" >
                </telerik:GridBoundColumn>
               
                <telerik:GridTemplateColumn DataField="Alamat" HeaderText="Alamat" SortExpression="Alamat"
                    UniqueName="Alamat">
                    <ItemTemplate>
                     <center>  <table style="width: 170px;" >
                            <colgroup>
                                <col />
                            </colgroup>
                            <tr align="center">
                                <td>
                                    <asp:Label ID="Label1" runat="server" Text='<%# Eval("Nama") %>' Style="font-size: 12px;
                                        color:White    ; font-weight: normal ;" />
                                </td>
                            </tr>
                            <tr align="center">
                                <td>
                                    <asp:Label ID="Label2" runat="server" Text='<%# Eval("Alamat") %>'
                                        Style="font-size: 12px;  color:White   ;font-weight: normal ;" />
                                </td>
                            </tr>
                        </table></center>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
              
                <telerik:GridTemplateColumn HeaderText="Image" SortExpression="ID" UniqueName="Image">
                    <ItemTemplate>
                        <asp:Image ID="SushiImage" runat="server" ImageUrl='<%#  Eval("Foto") %>'
                            AlternateText="Sushi image" Width="50px" Height="50px" Style="border: 1px solid #000000;" />
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
            </Columns>
        </MasterTableView>
        <HeaderStyle HorizontalAlign="Center" Font-Size="8px" />
        <ItemStyle HorizontalAlign="Center" Font-Names="Arial Unicode MS" Font-Size="8px"
            ForeColor="#eeeeee" />
        <AlternatingItemStyle HorizontalAlign="Center" Font-Names="Arial Unicode MS" Font-Size="8px"
            ForeColor="#000000" />
    </telerik:RadGrid>
     <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:SiteSqlServer %>"
        SelectCommand="SELECT * FROM DataFoto"></asp:SqlDataSource>




4.Pada ReportPdf.ascx.cs kita imputkan coding seperti berikut ini:

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using Telerik.Web.UI;
using DotNetNuke.Entities.Modules;

namespace ReportPDF
{
    public partial class ReportPDF : PortalModuleBase
    {
        bool isPdfExport = false;
        protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
        {
            if (e.CommandName == RadGrid.ExportToPdfCommandName)
                isPdfExport = true;
        }

        protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
        {
            if (isPdfExport)
                FormatGridItem(e.Item);
        }

        protected void FormatGridItem(GridItem item)
        {
            item.Style["color"] = "#eeeeee";

            if (item is GridDataItem)
            {
                item.Style["vertical-align"] = "middle";
                item.Style["text-align"] = "center";
            }

            switch (item.ItemType) //Mimic RadGrid appearance for the exported PDF file
            {
                case GridItemType.Item: item.Style["background-color"] = "#46474f"; break;
                case GridItemType.AlternatingItem: item.Style["background-color"] = "#494949"; break;
                case GridItemType.Header: item.Style["background-color"] = "#494949"; break;
                case GridItemType.CommandItem: item.Style["background-color"] = "#46474f"; break;
            }

            if (item is GridCommandItem)
            {
                item.PrepareItemStyle(); //needed to span the image over the CommandItem cells
            }
        }
    }
}






5..Setelah selesai dan kita build  tidak ada error maka kita running untuk melihat hasilnya dengan menggunakan DotnetNuke dan  hasilnya seperti dibawah ini:


6.Dan untuk menampilkan laporan dalam bentuk Pdf kita klik pada bagian Top (AdobePdf) dan hasilnya seperti berikut ini:













Telerik RadlistView Asp.Net C# Image


Menampilkan  Gambar di Asp.net C# dari Sqlserver 2008 R2 dengan menggunakan RadlistView
Sebelumnya kita sudah memiliki table yang berisi gambar di SqlServer2008R2
Mari kita langsung aja ke buka visual studio 2008 dan pilih  new project –pilih Asp.net Web Aplication berinama pada Name ReportDataImage dan Location untuk tempat penyimpanan ya
 
Setelah itu kita pada project nya kita klik kanan dan pilih add new exsiting dan pilih web form control dan berinama ReportDataImage kita dan secara otomatis akan terdapat tiga tetapi kita bekerja hanya pada ReportDataImage.ascx dan ReportDataImage.ascx.cs

 
Untuk ReportDataImage.ascx beri coding seperti berikut ini:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ReportDataImage.ascx.cs" Inherits="ReportDataImage.ReportDataImage" %>
  
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <style type="text/css">
  
   .details
{
    width: 100%;
    height: 90%;
}
.details ul
{
    list-style-image: none;
    list-style-type: none;
    margin: 0;
    padding: 10px;
}
.details ul label
{
    font-weight: bold;
}
.photo-container
{
    padding: 10px;
    width: 120px;
    float: left;
}
.data-container
{
    height: 90%;
    width: auto;
}
</style>
   <telerik:RadListView ID="RadListView1" runat="server" DataSourceID="SqlDataSource2"
            ItemPlaceholderID="ListViewContainer">
            <LayoutTemplate>
                <asp:PlaceHolder runat="server" id="ListViewContainer" />
            </LayoutTemplate>
            <ItemTemplate>
                <fieldset style="float: left; width: 350px; height: 150px;">
                    <legend><b> Name</b>:
                        <%#Eval("Name")%></legend>
                    <div class="details">
                        <div class="photo-container">
                            <telerik:RadBinaryImage runat="server" ID="RadBinaryImage1" DataValue='<%#Eval("Data") %>'
                                AutoAdjustImageControlSize="false" Width="90px" Height="110px" ToolTip='<%#Eval("Name", "Data of {0}") %>'
                                AlternateText='<%#Eval("Name", "Data of {0}") %>' />
                        </div>
                        <div class="data-container">
                            <ul>
                                <li>
                                    <label>
                                         Name:</label>
                                    <%#Eval("Name")%>
                                </li>
                                <li>
                                    <label>
                                        Description:</label>
                                    <%#Eval("Description")%>
                                </li>
                                
                              
                            </ul>
                        </div>
                    </div>
                </fieldset>
            </ItemTemplate>
        </telerik:RadListView>
         <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:SiteSqlServer %>"
            ProviderName="<%$ ConnectionStrings:SiteSqlServer.ProviderName %>"
            SelectCommand="SELECT TOP 6 * FROM [Images]"></asp:SqlDataSource>



Dan untuk ReportDataImage.ascx.cs kita beri Coding seperti berikut ini

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using DotNetNuke.Entities.Modules;

namespace ReportDataImage
{
    public partial class ReportDataImage :PortalModuleBase
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }
    }
}

Setelah itu kita run dengan menggunakan DotnetNuke dengan cara CreateModules dan hasilnya adalah seperi pada gambar di bawah ini
 Sekian Terimakasih!