Futorial

Welcoming new Microsoft Student Partners from University of Indonesia

2010-02-08T06:12:00Z

CONGRATULATIONS

to our 5 new Microsoft Student Partners


Raufan Multahada Safari	Gilang Bhagaskara	Sonya Permata Putri	Gilang Mentari Hamidy	Enrico Budianto

Microsoft Student Partners are students who passionate about technology, love to share their knowledge, and want to develop skills outside their field of study. They will become Technology Rock Stars on their campus and local community.

Microsoft Student Partners, often abbreviated as MSP, have direct connection to Microsoft through Microsoft's Academic Developer Advisor and usually become the spearhead in their community regarding the awareness and adoption of Microsoft – especially .NET – technology.

Here, in University of Indonesia, MSP will always be on the field together with Microsoft Innovation Center Universitas Indonesia (MIC UI), to explore and share knowledge of all Microsoft technologies that can be applied in courses, hobbies, and even professional works.

So, we really hope that we – MSP UI, MIC UI, and Fasilkom UI – can work together to build an environment in which people love to explore and share about technology.

Once again, let’s give standing ovation to our new 5 MSPs for the highly prestigious title which they bear.

-Fu-

Share this post: | | | |

Menampilkan data pada GridView berdasarkan user yang sedang login

2009-05-11T18:51:00Z

Teman-teman yang biasa menggunakan ASP.NET pasti sudah kenal baik dengan GridView. Control yang satu ini memang sangat memanjakan kita dalam pembuatan modul yang berurusan dengan menampilkan data, mengubah data, dan menghapus data.

Bagi teman-teman lain, yang baru mengenal ASP.NET, saya sarankan Anda sering-sering bermain dengan GridView (walaupun saya sarankan juga untuk jangan menggantungkan hidup Anda pada GridView). Seperti yang telah saya katakan tadi, GridView adalah sebuah komponen yang erat kaitannya dengan pengolahan data.

Pada dasarnya, kisah tampilnya data dari database ke layar browser adalah seperti ini:

Anda punya database.
Anda mengambil data dari database melalui query SELECT pada komponen SqlDataSource atau melalui ADO.NET kemudian disimpan di objek DataTable, atau bisa juga melalui LINQ kemudian disimpan di objek bertipe collection. Jika Anda tidak mau repot dengan code behind, Anda bisa membuat SqlDataSource di Web Form (file .aspx) langsung, seperti pada step-by-step yang akan saya sampaikan pada Futorial ini nanti.
Anda membuat sebuah GridView.

Pada GridView tersebut, Anda harus menentukan sumber data yang akan ditampilkan oleh si GridView. Jika Anda menggunakan objek dari code behind, maka Anda menggunakan properti DataSource.
Contoh:

var products = from eachProduct in database.Products select eachProduct;
GridViewProducts.DataSource = products;

Jika Anda menggunakan SqlDataSource, maka Anda menggunakan properti DataSourceID.
Contoh:

<asp:SqlDataSource ID="SqlDataSourceProducts" runat="server" SelectCommand="SELECT * FROM [Products]" ConnectionString="<%$ ConnectionStrings:MyConnectionString %>" />
<asp:GridView ID="GridViewProducts" runat="server" DataSourceID="SqlDataSourceProducts" />

Akhirnya data akan tampil di layar browser.

Studi Kasus

Sekarang kita kembali ke topik utama. Agar lebih memahami, saya sertakan skenario singkat. Kisahnya adalah seperti ini:

Skenario

Pada suatu perusahaan, ada beberapa Sales Person. Setiap Sales Person dibuatkan sebuah account pada web site yang akan dibangun, sehingga mereka bisa login dan logout. Pembuatan account ini adalah melalui ASP.NET Membership. Kemudian, perusahaan tersebut punya banyak Customer. Setiap satu Customer ditanganu oleh seorang Sales Person, namun seorang Sales Person bisa menangani beberapa Customer. Jadi hubungan mereka adalah One-To-Many.

Rencananya, kita akan membuat sebuah halaman web yang terdapat sebuah GridView yang menampilkan data Customer. Namun data Customer yang ditampilkan sesuai dengan siapa yang sedang login.

Data yang tersedia

Saya tidak akan menceritakan tentang ASP.NET Membership di Futorial ini. Jadi asumsi saya adalah, kita sudah mengatur konfigurasi ASP.NET sehingga menggunakan ASP.NET Membership. Pada ASP.NET Membership, kita buat dua account sebagai account Sales Person, misalnya fuady dan hidayat.

Kemudian, di database lain, kita buat sebuah tabel Customers untuk menyimpan data Customer. Beginilah data tabel Customers

Menampilkan data di halaman Default.aspx

Nah, sebagai awalan, kita coba tampilkan data tersebut di halaman Web dengan control GridView melalui SqlDataSource. Bukalah file Default.aspx, dan ubah sehingga menjadi seperti berikut:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridViewCustomers" runat="server"
            AutoGenerateColumns="true"
            DataKeyNames="ID"
            DataSourceID="SqlDataSourceCustomers"
            EmptyDataText="Tidak ada data customer.">
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSourceCustomers" runat="server"
            ConnectionString="<%$ ConnectionStrings:DatabaseConnectionString1 %>"
            ProviderName="<%$ ConnectionStrings:DatabaseConnectionString1.ProviderName %>"
            SelectCommand="SELECT * FROM [Customers]">
        </asp:SqlDataSource>
    </div>
    </form>
</body>
</html>

Sebenarnya Anda bisa melakukan sihir drag-and-drop. Silahkan lihat post saya sebelumnya untuk melakukan drag-and-drop.

Setelah itu, lihat hasilnya dengan menekan Ctrl+F5.

Nah, kalau dengan code di atas, siapapun yang sedang login, maka semua data Customer akan dapat melihatnya. Padahal kita ingin Customer yang ditampilkan adalah Customer yang berkaitan dengan Sales Person yang sedang melihat (yang sedang login).

Oke, untuk menyiapkan itu semua, kita buat sebuah Web Form bernama Login.aspx. Untuk memudahkan kita, namanya harus Login.aspx. Di Futorial ini, saya tidak sempat menjelaskan kenapa. Intinya adalah itu terkait dengan konfigurasi default dari ASP.NET Membership.

Membuat halaman Login.aspx

Ini adalah isi dari Login.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Login" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Login ID="Login1" runat="server">
        </asp:Login>
    </div>
    </form>
</body>
</html>

Sangat sederhana, yaitu sebuah control Login.

Mengubah halaman Default.aspx

Sekarang kembali beralih ke Default.aspx. Ubah code di dalamnya sehingga menjadi seperti berikut:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:LoginStatus ID="LoginStatus1" runat="server" />
        <br />
        <asp:GridView ID="GridViewCustomers" runat="server"
            AutoGenerateColumns="true"
            DataKeyNames="ID"
            DataSourceID="SqlDataSourceCustomers"
            EmptyDataText="Tidak ada data customer.">
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSourceCustomers" runat="server"
            ConnectionString="<%$ ConnectionStrings:DatabaseConnectionString1 %>"
            ProviderName="<%$ ConnectionStrings:DatabaseConnectionString1.ProviderName %>"
            SelectCommand="SELECT * FROM [Customers] WHERE ([SalesPersonUsername] = @SalesPersonUsername)">
            <SelectParameters>
                <asp:Parameter Name="SalesPersonUsername" Type="String" />
            </SelectParameters>
        </asp:SqlDataSource>
    </div>
    </form>
</body>
</html>

Saya menambahkan sebuah control LoginStatus, mengubah isi properti SelectCommand pada SqlDataSourceCustomers, dan menambahkan properti SelectParameters di SqlDataSourceCustomers.

Menambahkan code di Default.aspx.cs

Seperti yang dapat Anda lihat di atas, bahwa SqlDataSourceCustomers dapat menerima parameter SalesPersonUsername pada klausa WHERE. Untuk itu, kita isi parameter tersebut pada code behind. Ubahlah code di dalam Default.aspx.cs sehingga menjadi seperti berikut:

using System;

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        SqlDataSourceCustomers.SelectParameters["SalesPersonUsername"].DefaultValue = User.Identity.Name;
    }
}

Maksud dari code di atas adalah mengisi parameter SalesPersonUsername dengan username dari user yang sedang login, yaitu melalui properti name pada objek User.Identity.

Menguji hasil

Lihat hasilnya dengan menekan Ctrl+F5.

Klik tombol Login. Pada halaman Login.aspx, isi dengan username dan password yang benar, kemudian klik tombol “Log In”. Misalkan saya login sebagai fuady.

Maka sekarang tampil Customer milik fuady.

Di lain sisi, kalau saya login sebagai hidayatm yang tampil adalah Customer milik hidayat.

Nah, begitulah kira-kira.

Ringkasan

Saya bisa ringkas menjadi seperti berikut:

Untuk menampilkan data di SqlDataSource sesuai dengan user yang sedang login, GridView Anda harus menggunakan SelectCommand yang memiliki klausa WHERE serta memiliki SelectParameters yang merujuk pada kolom yang menyatakan username.

<asp:SqlDataSource ID="SqlDataSourceCustomers" runat="server"
    ConnectionString="<%$ ConnectionStrings:DatabaseConnectionString1 %>"
    ProviderName="<%$ ConnectionStrings:DatabaseConnectionString1.ProviderName %>"
    SelectCommand="SELECT * FROM [Customers] WHERE ([SalesPersonUsername] = @SalesPersonUsername)">
    <SelectParameters>
        <asp:Parameter Name="SalesPersonUsername" Type="String" />
    </SelectParameters>
</asp:SqlDataSource>

Setelah itu, Anda harus mengisi parameter tadi di code-behind dengan username si user yang sedang login.

SqlDataSourceCustomers.SelectParameters["SalesPersonUsername"].DefaultValue = User.Identity.Name;

Semoga bermanfaat,

-Fu-

Share this post: | | | |

Mengawinkan GridView dengan DetailsView

2009-05-10T18:45:00Z

Sambil menunggu AC Milan vs Juventus, saya iseng-iseng bikin Futorial yang ringan-ringan saja. Kali ini tentang penggunaan dua ASP.NET Control yang sudah sangat terkenal di dunia persilatan Web Programming, yaitu GridView dan DetailsView. Yaa.. mungkin teman-teman yang sudah berpengalaman telah sering melakukannya. Namun buat teman-teman pemula, semoga ini bermanfaat bagi Anda.

Pertama-tama, dengan menggunakan Visual Studio 2008 atau Visual Web Developer 2008 Express Edition, buatlah sebuah Web Site. Kita beri nama Web Site tersebut sebagai MilanClub.

Kalau mempraktekkan GridView dan DetailsView, kita nggak akan jauh-jauh dari database. Untuk kasus ini, buatlah sebuah database pada folder App_Data. Biarkan namanya sebagai Database.mdf.

Pada database tersebut, buatlah sebuah tabel yang berisi spesifikasi sebagai berikut

Nama Kolom	Tipe Data	Primary Key	Boleh Null
Number	int	Ya	Tidak
Name	varchar(50)	Bukan	Tidak
BirthDate	datetime	Bukan	Tidak

Simpan tabel tersebut dengan nama Players.

Isi data tabel Players dengan pemain-pemain sepakbola dari AC Milan. Saya ambil gambar di bawah ini dari halaman daftar pemain tim inti di situs resmi AC Milan.

Hohohoo.. pemainnya keren-keren semua.. mantap dahh..

Ehm.. kembali ke Futorial.

Misalnya saya isi dengan 5 pemain saja

Sekarang beralih ke halaman Default.aspx. Gunakan Design View atau Split View agar bisa melakukan sihir drag-and-drop. Nah, Anda bisa drag tabel Players dari Server Explorer (atau Database Explorer kalau di Visual Web Developer 2008 Express Edition) dan di-drop di visual design area. Otomatis Visual Studio akan membuatkan sebuah GridView (yang diberi ID GridView1) dan sebuah SqlDataSource (yang diberi ID SqlDataSource1) untuk Anda. Atur agar kita bisa melakukan Sorting, Paging, dan Selection pada GridView1.

Sekarang, masih dalam mode Design View ata SplitView, drag control DetailsView dari Toolbox ke visual design area. Biarkan ID DetailsView tersebut sebagai DetailsView1, dan lokasikan di bawah SqlDataSource1. Pada menu Choose Data Source, pilih <New data source…>

Pilih Database. Biarkan nama SqlDataSource sebagai SqlDataSource2. Klik tombol “OK”.

Pilih data connection yang sudah ada (gara-gara sebelumnya kita drag-and-drop tabel Players), yaitu DatabaseConnectionString1. Klik tombol “Next”.

Beri tanda centang pada pilihan *. Kemudian klik tombol “WHERE”.

Pada window “Add WHERE Clause”, pilih Number sebagai Column, = sebagai Operator, Control sebagai Source, dan GridView1 sebagai Control ID. Klik tombol “Add”.

Sebuah kondisi akan ditambahkan di WHERE clause (lihat panel bagian bawah). Klik tombol “OK”.

Kembali ke window “Configure Data Source – SqlDataSource2”. Sekarang klik tombol Advanced… Pilih Generate INSERT, UPDATE and DELETE statements serta Use optimistic concurrency. Klik tombol “OK”.

Kembali lagi ke window “Configure Data Source – SqlDataSource2”. Klik tombol “Next”. Setelah itu, klik tombol “Finish”.

Atur agar kita bisa melakukan Inserting, Editing, dan Deleting pada DetailsView1.

Simpan semua file dengan Ctrl+Shift+S. Jalankan web site dengan Ctrl+F5.

Pada saat pertama kali tampil, yang tampak hanya GridView1 saja. Karena kondisi WHERE pada DetailsView1 tidak terpenuhi (yaitu kita belum menekan link Select pada GridView1 sehingga nilai SelectedValue dari GridView1 masih null).

Selanjutnya, pilihlah salah satu pemain, misalnya Kaká. Pastinya setelah itu DetailsView1 akan tampak. Melalui DetailsView1, ubahlah namanya menja di Kaká Fu. Setelah Anda klik link Update, data yang di DetailsView1 menjadi Kaká Fu, namun kok yang di GridView1 masih Kaká. Ini berarti kita belum sinkronisasi antara kejadian yang ada di DetailsView1 untuk di-update juga ke GridView1.

Sekarang kita kembali ke Visual Studio. Tambahkan event handler ItemUpdated pada DetailsView1.

Rebind GridView1 pada method yang menjadi handler ketika data di DetailsView1 berhasil diubah.

protected void DetailsView1_ItemUpdated(object sender, DetailsViewUpdatedEventArgs e)
{
    GridView1.DataBind();
}

Nah, tadi kan selain bisa Editing, kita juga bisa Inserting dan Deleting. Maka dari itu, tambahkan event handler ItemInserted dan ItemDeleted, kemudian lakukan hal yang sama pada method yang menjadi handler ItemInserted dan ItemDeleted tersebut.

protected void DetailsView1_ItemInserted(object sender, DetailsViewInsertedEventArgs e)
{
    GridView1.DataBind();
}

protected void DetailsView1_ItemDeleted(object sender, DetailsViewDeletedEventArgs e)
{
    GridView1.DataBind();
}

Simpan semua file dengan Ctrl+Shift+S. Jalankan kembali web site dengan Ctrl+F5.

Kali ini ketika saya edit salah satu pemain, misalnya Pato, kemudiang klik link “Update”, maka informasi Name yang ada di GridView juga berubah.

Begitu juga ketika saya menambahkan pemain baru. Langsung terisi pada GridView1.

Semuanya nampak lancar-lancar saja… Tapi tunggu dulu… ingat kan, bahwa ketika pertama kali halaman tampil, DetailsView1 tidak tampak. Setelah kita pilih salah satu pemain di GridView1, barulah DetailsView1 tampak. Apa yang terjadi kalau di GridView1 tidak ada data pemain sama sekali? Ya kita tambahkan pemain baru melalui DetailsView1. LHO! Tapi kan DetailsView1 tidak tampak?

Nah, begini triknya.. Pada code behind, tambahkan saja method ini

protected void Page_PreRender(object sender, EventArgs e)
{
    if (GridView1.SelectedValue == null)
    {
        DetailsView1.ChangeMode(DetailsViewMode.Insert);
    }
    else
    {
        DetailsView1.ChangeMode(DetailsViewMode.ReadOnly);
    }
}

Jadi kalau tidak ada pemain yang sedang dipilih di GridView1, DetailsView1 akan berada dalam mode Insert. Kalau ada pemain yang dipilih, ya tampilkan data pemain tersebut. Ini contoh di mana tidak ada data pemain sama sekali di database (sehingga GridView1 juga jadi kosong):

Nah, sekarang bisa Insert deh!

Wah, tidak terasa sekarang AC Milan vs Juventus sudah kick-off. OK, selamat mencoba!

-Fu-

Share this post: | | | |

Mengatasi masalah permission pada SQL Server 2008 Reporting Services di Windows Vista

2009-05-09T19:52:23Z

Baru saja saya selesai menginstall SQL Server 2008 Express Edition with Advanced Services di Windows Vista saya. Semuanya berjalan lancar. Oh iya, sebelum mengarah pada permission, saya perlu ingatkan tentang hal-hal berikut sebelum menginstall SQL Server 2008 Express Edition with Advanced Services:

Jika Anda pernah menginstal SQL Server 2005 Management Studio Express, Anda harus meng-uninstall-nya terlebih dahulu.
Jika Anda di komputer Anda terdapat Visual Studio 2008, Anda harus menginstal Service Pack 1 for Visual Studio 2008 terlebih dahulu.

Kalau Anda sudah instal Service Pack 1 tapi kok si installer-nya masih protes, itu pasti karena Anda punya salah satu atau lebih dari Visual Studio 2008 Express Edition yang tanpa Service Pack 1. Kalau pada kasus saya, ternyata saya punya Visual Web Developer 2008 Express Edition. Saya uninstall software tersebut, dan akhirnya berhasil menginstal SQL Server 2008 Express Edition with Advanced Services.

Nah, setelah selesai menginstal (kalau pada kasus saya, saya menginstalnya dengan nama Instance SQLEXPRESS2008), saya coba buka web dari SQL Server Reporting Services di http://localhost/reports_SQLEXPRESS2008. Kemudian muncul tampilan ini:

Yang artinya saya tidak bisa melihat apa-apa selain link Home, Help, serta tulisan SQL Server Reporting Services dan Home. Ini sudah saya duga karena saya yakin account saya (yaitu Fuady) belum dianggap sebagai account yang berhak mengakses situs tersebut. Saya buktikan dengan mencoba membuka situs Report Server di http://localhost/reportserver_SQLEXPRESS2008. Ternyata benar dugaan saya:

Yaitu bahwa account saya tidak mendapatkan permission untuk mengakses Report Server. Nah, saya tidak kaget karena pernah mengalami ini sebelumnya. Ini memang wajar karena saya login sebagai Fuady, sedangkan Fuady bukanlah Administrator. Pada kasus sebelumnya, saya solve dengan menjalankan Internet Explorer sebagai Administrator, kemudian pergi ke alamat Reporting Services Manager (http://localhost/reports_SQLEXPRESS2008), klik tab Properties, kemudian pada menu Security, pilih New Role Assignment, masukkan username Anda pada text box “Group or user name:”, kemudian beri tanda centang pada pilihan Content Manager. Ternyata langkah tersebut sesuai dengan yang ada di TechNet: How to: Configure a Report Server for Local Administration on Windows Vista and Windows Server 2008.

Akan tetapi, kasus yang kali ini membuat saya kaget. Karena, walaupun saya menjalankan Internet Explorer sebagai Administrator, tab Properties tetap tidak muncul. Tampaknya IE saya tidak menganggap dirinya dijalankan oleh Administrator. Saya mencari-cari solusinya ke sana-sini namun tetap tidak ada jawabannya. Akhirnya muncul ide konyol: kenapa nggak coba pakai browser lain aja.

Akhirnya saya coba pakai browser lain, run as Administrator, kemudian pergi ke http://localhost/reports_SQLEXPRESS2008. Daaannn.. akhirnya muncul juga halaman yang saya harapkan!

Saya lakukan hal yang sama dengan kasus saya sebelumnya, yaitu:

1. Klik tab Properties

2. Pada menu Security (memang hanya satu menu sih..), pilih New Role Assignment

3. Masukkan username, kemudian pilih permission yang Anda inginkan. (Kalau saya, saya pilih semuanya saja biar aman ^_^). Kemudian klik tombol “OK”.

Dan kemudian saya buka Internet Explorer tanpa run as Administrator. Dan hasilnya, saya diakui sebagai account yang berhak mengakses Report Server (dengan memasukkan username dan password terlebih dahulu).

Catatan: jangan lupa masukkan alamat Report Server tersebut ke dalam Trusted Sites di Internet Explorer (klik Tools > Internet Options > Security > Trusted Sites > Sites)

Semoga membantu,

-Fu-

Share this post: | | | |

Meng-encode video sekaligus membuat media player Silverlight

2009-03-23T05:33:23Z

First of all, yang Anda punya sekarang tentunya video.. atau kalau nggak punya video, bisa download di http://videos.msn.com atau http://youtube.com

Nahh, begitu udah punya video, sekarang kita butuh tools untuk encode. Kenapa harus encode segala? Kenapa gak langsung pake aja? Hmm.. setidaknya ada 2 alasan, yaitu

Mungkin format video yang Anda punya tidak disupport oleh Silverlight
Mungkin video yang Anda punya berukuran terlalu besar dan High Definition sedangkan Anda ingin menampilkannya untuk streaming di web Anda.

Nah, maka dari itu, encoder yang kita akan gunakan adalah Expression Encoder. Anda bisa download trial-nya di sini: http://www.microsoft.com/downloads/details.aspx?FamilyId=A04DCC8C-9DB7-41CB-A27C-08CBEB0A01BA&displaylang=en dan service pack-nya di sini: http://www.microsoft.com/downloads/details.aspx?FamilyId=A29BE9F9-29E1-4E70-BF67-02D87D3E556E&displaylang=en

OK, sekarang tentang kita bahas tentang Expression Encoder.

Workspace

Di bagian atas, tentunya ada Menu Bar..
Bagian kiri atas yang gede itu tentunya window utama, tempat melihat video.
Bagian kiri bawah itu berisi keterangan item-item dari Media Content yang sedang kita kerjakan (window Items) dan log aktivitas apa saja yang sudah kita lakukan (window Activity Log).
Bagian kanan ada window Encode, Enhance, Metadata, dan Output.

First Experience

Untuk first experience ini, kita coba lakukan hal yang sangat sederhana aja, yaitu Import dan Encode. Klik tombol Import yang ada di bawah, atau pilih menu File > Import

Browse ke video yang akan Anda encode. (Kalau file ekstensi .flv nggak muncul, itu karena filternya. Maka dari itu ubah filternya menjadi All Files). Setelah itu, klik Open. Video yang Anda pilih akan muncul di window Items.

Nah, setelah itu, buka window Encode. Pilih profil encode yang Anda inginkan. Misalnya saya pilih Streaming 256k DSL. Tentunya ukuran video yang dihasilkan akan relatif kecil, dan gambarnya juga tidak tajam.

Buka window Output, kemudian pilih salah satu template untuk output. Kalau saya misalnya Console. Kalau Anda pilih yang none, maka hasilnya hanya video yang ter-encode saja, tidak ada player untuk Silverlight-nya.

Setelah itu, klik tombol Encode di window Items.

Tunggu sampai proses encoding selesai

Nahh.. ini hasilnya deh:

File video dan source code-nya ada di folder output kok

Selamat mencoba!

Share this post: | | | |

Build dua Team Project yang saling berbagi Source Code

2009-02-03T12:48:54Z

Huaahhh… ini kasus yang umum namun anehnya agak perlu sedikit effort untuk bisa berhasil. Kasus apa sih?

Oke.. jadi begini kawan-kawan. Pada umumnya, tim development di setiap perusahaan punya class library sendiri, komponen buatan mereka sendiri. Tentunya itu sangat wajar. Nah, di lain hari, ada proyek lain yang hendak memanfaatkan library yang dihasilkan. Kalau kita pakai Visual Studio seperti biasanya, ini bukanlah masalah. Tinggal Add Reference ke file .dll yang dihasilkan.. beres! Atau bisa juga Add Existing Project, kemudian Add Reference ke proyek yang baru saja di-add, itu juga beresss..!

Nah, yang ini bukanlah sekedar Viusal Studio saja, melainkan menggunakan Team Foundation Server, alias Source Code ada di server. Kalau pakai TFS dan build di local, itu memang masih tetap jalan. Namun kalau pakai TFS plus build di server dengan menggunakan TFS Team Build, ini baru masalah… Karena tentunya komposisi file di server dengan di local kan beda.. begitu kita build, akan ada error yang bilang bahwa blahblah.sln does not exist..

Okeh, kita langsung praktek aja deh. Saya jalankan skenario ini dengan menggunakan VPC lho ya.. kalau mau VPC nya, bisa di-download di sini. Atau kalau mau copy dari saya, silahkan datang ke kantor Microsoft Indonesia yah ^_^

Skenario

Perusahaan X membuat dua buah Team Project. Team Project yang pertama, yang diberi nama SharedLibrary, berisi library dan komponen yang nantinya akan digunakan pada aplikasi sebenarnya. Team Project yang ke dua, yang diberi nama CompanyWeb, berisi sebuah ASP.NET Web Application (ingat, Web Application, bukan Website!) yang akan menggunakan library yang dihasilkan oleh SharedLibrary.

Membuat Team Project SharedLibrary

Pertama-tama, buka Visual Studio (pastinya) kemudian pilih menu File > New > Team Project…

Akan muncul window New Team Project. Isi nama untuk Team Project dengan SharedLibrary

Pilih MSF for Agile Software Development – v4.2

Isi title untuk Team Project Portal dengan SharedLibrary dan description dengan SharedLibrary Team Portal

Pilih Create an empty source control folder

Klik tombol Finish

Tunggu sampai proses pembuatan Team Project selesai

Jika sudah selesai, uncheck pilihan Launch the process guidance kemudian klik tombol Close

Membuat Team Project CompanyWeb

Dengan cara yang sangat mirip dengan cara di atas, buatlah sebuah Team Project lagi, kali ini dengan nama CompanyWeb.

Setelah menyelesaikan langkah ini, kita akan punya folder SharedLibrary dan CompanyWeb di window Team Explorer.

Mengisi Team Project SharedLibrary

Saat ini, kedua Team Project masih kosong. Belum ada source code-nya. Untuk SharedLibrary, kita akan isi dengan sebuah project Class Library. Pertama-tama, pastikan bahwa kita dalam keadaan memilih SharedLibrary pada window TeamExplorer. Tandanya bahwa kita sedang memilih SharedLibrary adalah tulisan SharedLibrary akan di-bold.

Pilih menu File > New > Project…

Pilih Visual C# sebagai Project types, pilih Class Library sebagai Template, beri nama SharedLibrary, pilih C:\Futorial sebagai lokasi, beri tanda check pada pilihan Create directory for solution dan beri tanda check juga pada pilihan Add to Source Control. Klik tombol OK.

Pastikan bahwa Team Project yang terpilih adalah yang SharedLibrary. Klik tombol OK.

Di Solution Explorer, perhatikan akan ada tanda di file-file yang akan ditambahkan ke source code control.

Ganti nama file Class1.cs menjadi FuCalculator.cs. Ubah isinya menjadi seperti berikut

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace SharedLibrary
{
    public class FuCalculator
    {
        public int Tambah(int a, int b)
        {
            return a + b;
        }
    }
}

Simpan FuCalculator.cs. Klik kanan project SharedLibrary di Solution Explorer kemudian pilih Properties. Pilih menu Build Events, isi Post-build event command line dengan teks berikut: xcopy /Y /S "$(TargetPath)" "$(SolutionDir)\result\"

Simpan dengan Ctrl+S. Sekarang coba kita build secara local. Tekan Ctrl+Shift+B. Jika build berhasil, cek folder C:\Futorial\SharedLibrary\result yang seharusnya ada file SharedLibrary.dll di sana.

Setelah memastikan, check in file-file ini ke TFS. Caranya yaitu pada Solution Explorer, klik kanan Solution ‘SharedLibrary’ kemudian pilih Check In…

Tulis Initial Check In sebagai Comment kemudian klik tombol Check In

Mapping Workspace antara Server dengan Local

Double-click Source Control pada folder SharedLibrary yang ada di Team Explorer.

Sebenarnya folder SharedLibrary di dalam folder SharedLibrary sudah ada mappingnya di local, yaitu C:\Futorial\SharedLibrary. Namun justru folder parentnya, yaitu folder SharedLibrary belum di-map. Maka dari itu klik link Not Mapped, kemudian tulis C:\Futorial, kemudian klik tombol Change

Pilih Yes

Membuat Web Application untuk Team Project CompanyWeb

Tutup solusi yang sedang dibuka sekarang dengan menu File > Close Solution. Buat sebuah Web Application dengan menu File > New > Project…

Isi dengan pilihan-pilihan sesuai dengan gambar berikut

Klik kanan folder References pada Solution Explorer, kemudian pilih Add Reference…

Pilih tab Browse, kemudian pilih SharedLibrary.dll yang ada di folder C:\Futorial\SharedLibrary\result

Ganti code Default.aspx.cs menjadi seperti berikut

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace CompanyWeb
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Response.Write(new SharedLibrary.FuCalculator().Tambah(3, 7));
        }
    }
}

Tekan Ctrl+F5 untuk build local dan memastikan hasilnya benar. Pada window Team Explorer, pastikan Team Project CompanyWeb sedang dalam keadaan terpilih. Kembali ke Solution Explorer, klik kanan Solution ‘CompanyWeb’, kemudian pilih Add Solution to Source Control. Setelah berhasil, klik kanan lagi Solution ‘CompanyWeb’, kemudian pilih Check In. Tulis Initial Check In sebagai Comment.

Membuat Build Definition untuk CompanyWeb

Beralih ke Team Explorer, pada klik kanan folder Builds di Team Project CompanyWeb, kemudian pilih New Build Definition…

Pada tab General, isi sesuai dengan gambar berikut

Pada tab Project File, klik tombol Create

Akan muncul window MSBuild Project File Creation Wizard. Check pilihan (Select All) kemudian klik Next dua kali hingga tombol Finish bisa di-klik. Klik tombol Finish.

Beralih ke tab Build Defaults. Klik tombol New pada pilihan Build Agent. Akan muncul window Build Agent Properties. Isi sesuai dengan gambar berikut.

Kembali ke tab Build Defaults. Isi pilihan Builds will be staged to the following share dengan \\tfsrtm08\drops

Klik tombol OK. Akan muncul CompanyWebBuildManual di folder Builds.

Melakukan Team Build pada Team Project CompanyWeb

Kita coba jalankan build yang telah kita buat pada langkah sebelumnya. Nantinya, build ini akan gagal. Klik kanan CompanyWebBuildManual kemudian pilih Queue New Build…

Klik tombol Queue

Akan muncul window Build Explorer. Tunggu sebentar, hasilnya akan terlihat bahwa proses build gagal. Hal ini karena project SharedLibrary tidak dikenali.

Membetulkan definisi dari CompanyWebBuildManual

Ubah definisi dari CompanyWebBuildManual secara manual. Caranya, ke window Source Control Explorer, kemudian pada Team Project CompanyWeb akan ada folder TeamBuildTypes (kalau belum muncul, klik tombol Refresh). Di dalam folder TeamBuildTypes akan ada folder CompanyWebBuildManual. Nahh, di dalam situ ada file TFSBuild.proj. Klik kanan file itu kemudian pilih Get Latest Version. Setelah itu, klik kanan lagi kemudian pilih Check Out for Edit…

Klik tombol Check Out

Klik kanan lagi file tersebut, kemudian pilih View. File tersebut akan dibuka di Visual Studio.

Di dalam tag PropertyGroup yang pertama, tambahkan code ini pada bagian akhir (sebelum tag penutup PropertyGroup)

<SkipInitializeWorkspace>true</SkipInitializeWorkspace>
<TfCommand>$(TeamBuildRefPath)\..\tf.exe</TfCommand>

Tambahkan tag berikut setelah tag penutup PropertyGroup

<ItemGroup>
    <Map Include="$/CompanyWeb">
        <LocalPath>$(SolutionRoot)\CompanyWeb</LocalPath>
    </Map>
    <Map Include="$/SharedLibrary">
        <LocalPath>$(SolutionRoot)\SharedLibrary</LocalPath>
    </Map>
</ItemGroup>

Simpan file tersebut. Kembali ke Source Control Explorer. Klik kanan file TFSBuild.proj kemudian pilih Check In Pending Changes…

Klik tombol Check In. Setelah itu, ke Team Explorer, kita masukkan lagi CompanyWebBuildManual ke antrian (klik kanan kemudian pilih Queue New Build).

Sekarang, hasilnya adalaaaahh: build kita sudah berhasil!

Horeeeee!!!

Referensi

Share this post: | | | |

Input data lewat Web Site, InfoPath, Excel

2009-01-13T13:33:00Z

Zaman sekarang udah canggih yah… Pusat data (baca: database) cukup satu, supaya data utuh, terorganisir, mudah dijaga, dan lain sebagainya. Tapi karena kecanggihan teknologi informasi, yang namanya mengakses data (retrieve, insert, edit, delete) bisa melalui berbagai cara (dan berbagai user interface tentunya). Bisa lewat web site, bisa lewat desktop application, bisa lewat SMS, daaaaaan lain sebagainya.

Nah, di Futorial kali ini, saya akan menunjukkan step-by-step untuk membuat tiga cara meng-input data ke satu database yang sama. Secara garis besar, kita akan membuat sebuah tabel di database, kemudian kita buat website dan web service, kemudian kita buat InfoPath Form, baru setelah itu kita buat Excel Workbook. Web service yang akan kita buat sebenarnya hanya pilihan saja, yaitu baik melalui InfoPath maupun Excel, nantinya akan memanggil fungsi di web service untuk input data. Sebenarnya bisa saja dari InfoPath atau Excel langsung tembak ke database. Namun alangkah baiknya jika ada “penengah” antara User Interface dengan database, salah satunya melalui Web Service.

Oke, tanpa banyak basa-basi, kita langsung saja.

Langkah 0 : Membuat database di SQL Server 2005 Express Edition

Di SQL Server Management Studio, expand database engine, klik kanan Databases, kemudian pilih New Database…

Misalkan kita beri nama SatuData, kemudian klik tombol OK.

Expand Databases, expand database SatuData. Klik kanan Tables, pilih New Table…

Berikut adalah spesifikasi untuk kolom-kolomnya:

Nama kolom	Tipe data	Keterangan
ID	int	Not Null, Primary Key, IsIdentity
Name	varchar(50)	Not Null
Price	money	Not Null
ProductionDate	datetime	Not Null
IsDiscontinued	bit	Not Null

Agar nilai kolom ID auto-increment, maka set properti IsIdentity menjadi Yes. Caranya, klik kiri kolom ID, kemudian di window Column Properties (ada di bagian bawah), expand pilihan Identity Specification. Ubah properti (Is Identity) menjadi Yes.

Simpan tabel ini sebagai tabel Products. Beginilah tampilan tabel Products di SQL Server Management Studio.

Nah, urusan bikin database sudah selesai sampai sini.

Langkah 0.5 : Membuat Blank Solution

Untuk keperluan proyek kecil-kecilan kita, kita buat sebuah blank Solution yang nantinya akan ada tiga buah project.

Buka Visual Studio, kemudian pilih File > New > Project…

Setelah klik OK, nanti di window Solution Explorer (biasanya ada di kanan, short-cut nya Ctrl+Alt+L) akan ada sebuah Solution tanpa ada project apapun.

Dalam solution ini, kita butuh koneksi ke database yang telah kita buat pada langkah sebelumnya. Caranya, pada window Server Explorer (Ctrl+Alt+S), klik icon . Akan muncul window Add Connection. Isi server name dengan instance database kita (dalam hal ini saya pakai SQL Server Express), dan isi Select or enter a database name dengan SatuData (nama database yang telah kita buat sebelumnya). Klik OK untuk connect.

Kalau berhasil, di window Server Explorer akan muncul database SatuData.

Selanjutnya, kita akan membuat web site sebagai salah satu cara menginput data.

Langkah 1 : Membuat ASP.NET Dynamic Data Web Site

Di window Solution Explorer, klik kanan Solution ‘SatuDataTigaCara’, kemudian pilih Add > New Web Site…

Pilih ASP.NET Dynamic Data Web Site. Pilih C# sebagai Labguage, dan beri nama web site yang akan kita buat ini sebagai WebSiteCaraPertama dengan mengganti path di sebelah kiri tombol Browse…

Setelah itu, klik tombol OK.

Setelah itu, akan muncul web site WebSiteCaraPertama di Solution Explorer. Klik kanan web site tersebut (root-nya yang di-klik kanan), kemudian pilih Add New Item…

Pilih LINQ to SQL Classes sebagai template dan beri nama sebagai SatuData.dbml. Klik Add.

Klik Yes agar file SatuData.dbml ini ditempatkan di folder khusus bernama App_Code.

Secara visual, file SatuData.dbml akan terbagi menjadi dua Pane. Pane yang kiri untuk menempatkan Tables dan Views di database untuk akhirnya akan dibuatkan Class untuk masing-masing Table dan View. Pane yang kanan untuk menempatkan Stored Procedures untuk akhirnya akan dibuatkan Method untuk masing-masing Stored Procedure.

Dari Server Explorer, drag-and-drop tabel Products ke Pane yang kiri. Simpan file ini dengan Ctrl+S atau klik icon .

Buka file Global.asax. Uncomment code pada baris ke 17, dan ganti menjadi seperti berikut:

model.RegisterContext(typeof(SatuDataDataContext), new ContextConfiguration() { ScaffoldAllTables = true });

Klik kanan Default.aspx, kemudian pilih View in Browser. Yup, kita telah selesai membuat web site. di halaman depan web site ini, klik link Products, akan tampil isi tabel Products (yang saat ini tentunya belum ada isinya). Klik link Insert new item untuk mengisi tabel Products. Isi dengan data berikut, kemudian klik tombol Insert.

Kalau berhasil, tabel Products kita sekarang ada satu record.

Dan ini benar-benar ter-insert ke database lho. Coba aja cek lagi ke SQL Server Management Studio kalo nggak percaya.

Nah, cara pertama sudah selesai. Sekarang kita beralih ke cara ke-2. Namun sebelum itu, kita buat sebuah penengah, yaitu si Web Service.

Langkah 1.5 : Membuat Web Service untuk insert new product

Kembali ke Visual Studio. Di window Solution Explorer, klik kanan root website kita, kemudian pilih Add New Item… Pilih Web Service sebagai template. Beri nama InsertNewProductWebService.asmx.

Ganti method HelloWorld menjadi seperti berikut

[WebMethod]
public void InsertNewProduct(string name, decimal price, DateTime productionDate, bool isDiscontinued)
{
    Product produkBaru = new Product();
    produkBaru.Name = name;
    produkBaru.Price = price;
    produkBaru.ProductionDate = productionDate;
    produkBaru.IsDiscontinued = isDiscontinued;

    SatuDataDataContext database = new SatuDataDataContext();
    database.Products.InsertOnSubmit(produkBaru);
    database.SubmitChanges();
}

Sekarang, di window Solution Explorer, klik kiri root web site. Perhatikan window Properties. Ganti nilai pada properti Use dynamic ports menjadi False.

Hal ini dilakukan agar port dari web site ini statis (tidak ganti-ganti), sehingga pemanggil web service ini nggak perlu khawatir akan lokasi web service ini. Kalau dinamis, bisa saja port nya ganti, sehingga begitu ingin memanggil fungsi InsertNewProduct, terjadi error karena ya jelas.. lha wong alamatnya bisa gonta-ganti.

Oke, sekarang kita coba apakah fungsi di web service kita sudah berjalan. Klik kanan InsertNewProductWebService.asmx, kemudian pilih View in Browser. Klik link InsertNewProduct. Isi dengan data berikut, kemudian klik tombol Invoke.

Cek apakah data yang kita kirim barusan telah masuk ke database. Kalau berhasil, pasti masuk.

OK, selanjutnya baru benar-benar langkah ke dua, yaitu melalui InfoPath.

Langkah 2 : Membuat form di InfoPath melalui Visual Studio

Klik kanan solution ‘SatuDataTigaCara’ kita, kemudian pilih New Project. Pilih Office di Project types, dan pilih InfoPath 2007 Form Template sebagai Templates. Beri nama sebagai InfoPathFormTemplateCaraKedua, kemudian klik tombol OK.

Pilih Web Service pada pilihan Based on. Klik OK.

Pilih Submit data kemudian klik Next.

Masukkan lokasi web service yang tadi kita buat (bisa diperoleh dari aksi klik kanan View in Browser file asmx yang tadi). Jangan lupa tambahkan string ?WSDL setelah huruf x pada asmx. Klik Next.

Pilih sebuah fungsi (memang hanya ada satu yang kita buat). Klik Next.

Biarkan nama koneksi sebagai Main submit. Klik Finish.

Setelah project dibuatkan. Pilih menu View > Data Source. Akan muncul window Data Source.

Drag-and-drop grup tns:InsertNewProduct ke area “Drag data fields here”. Pilih Controls in Layout Table.

Ganti tulisan “Click to add a title” menjadi Insert new product. Drag-and-drop sebuah button dari toolbox.

Klik kanan Button tersebut, kemudian pilih Button Properties… Pada window Button Properties, ganti properti Action menjadi Submit kemudian klik tombol OK.

Selesai! Yuk kita coba hasilnya. Di window Solution Explorer, klik kanan proyek InfoPathFormTemplateCaraKedua, kemudian pilih Set as StartUp Project. Setelah itu, tekan Ctrl+F5.

Sebuah form InfoPath akan terbuka. Isi data seperti berikut, kemudian klik tombol Submit.

Pilih Yes pada window Microsoft Office InfoPath Security Notice.

Yuk kita lihat hasilnya.

Nahh, dengan begini, input data lewat InfoPath udah beres. Sekarang mari kita coba pakai Excel.

Langkah 3 : Membuat Excel Workbook melalui Visual Studio

Dengan cara yang nyaris sama dengan cara membuat form InfoPath, kita buat Excel Workbook. Klik kanan Solution ‘SatuDataTigaCara’ kemudian pilih Add > New Project… Pilih Office sebagai Project types dan Excel 2007 Workbook sebagai Templates. Beri nama ExcelWorkbookCaraKetiga kemudian klik tombol OK.

Biarkan nama file Excel sebagai ExcelWorkbookCaraKetiga dan format xlsx. Klik OK.

Nahh.. sekarang Excel ada di dalam Visual Studio. Di Excel ini, kita bisa tambahkan control yang dimiliki oleh Windows Form, sepert TextBox, Button, DateTimePicker, CheckBox, dan lain sebagainya. Sekarang, ubah tampilan isi Excel tersebut menjadi seperti berikut:

Saya telah menambahkan beberapa tulisan dan beberapa control, yaitu

Control	Name	Keterangan
TextBox	textBoxPrice	Kosongkan isi properti Text
DateTimePicker	dateTimePickerProductionDate
CheckBox	checkBoxDiscontinued
Button	buttonSubmit	Ganti isi properti Text menjadi Submit

Sebelum otak-atik lebih lanjut, kita add service reference ke Web Service. Caranya, klik kanan project ExcelWorkbookCaraKetiga, kemudian pilih Add Service Reference… Tuliskan alamat web service yang telah kita buat (atau bisa juga melalui tombol Discover), kemudian expand Services hingga menemukan service InsertNewProductWebService. Ubah Namespace menjadi InsertNewProductServiceReference kemudian klik OK.

Kembali ke Excel yang ada di Visual Studio. Double-click buttonSubmit. Kita akan beralih ke “code behind”. Perlu diketahui bahwa dalam kasus ini, kita akan meng-insert sebuah record ke tabel product di mana datanya diisi melalui Excel. Kolom Name didapat melalui sebuah Cell (yaitu C3), kolom Price didapat dari textBoxPrice, kolom ProductionDate didapat dari dateTimePickerProductionDate, kolom IsDiscontinued didapat dari checkBoxDiscontinued.

Ubah isi method buttonSubmit_Click menjadi seperti berikut:

private void buttonSubmit_Click(object sender, EventArgs e)
{
Excel.Range rangeStart = Application.ActiveCell;
Excel.Worksheet worksheet = rangeStart.Parent as Excel.Worksheet;

    string name = worksheet.get_Range("C3", "C3").Value2.ToString();
    decimal price = Convert.ToDecimal(textBoxPrice.Text);
    DateTime productionDate = dateTimePickerProductionDate.Value;
    bool isDiscontinued = checkBoxDiscontinued.Checked;

InsertNewProductServiceReference.InsertNewProductWebServiceSoapClient service = new ExcelWorkbookCaraKetiga.InsertNewProductServiceReference.InsertNewProductWebServiceSoapClient();
service.InsertNewProduct(name, price, productionDate, isDiscontinued);

MessageBox.Show("Insert new product succeed");
}

Finish! Untuk mencobanya,pada window Solution Explorer, klik kanan proyek ExcelWorkbookCaraKetiga, kemudian pilih Set as StartUp Project. Setelah itu, tekan Ctrl+F5. Sebuah file Excel akan terbuka. Isi dengan data berikut, kemudian klik tombol Submit.

Sekarang kita lihat hasilnyaaa… Tadaaaaa…. sukses besar!!!

Huuffhhh… panjang juga yah post saya yang satu ini… :D

Selamat mencoba!

Share this post: | | | |

VPC TFS SP1 dan VSTS SP1

2009-01-12T03:52:27Z

VPC TFS + VSTS yang dikeluarkan oleh Microsoft pada bulan Maret telah expired pada 31 Desember 2008. Untuk itu, Microsoft mengeluarkan VPC yang baru, yang akan expired 31 Desember 2009.

Silahkan download di sini: http://www.microsoft.com/DownLoads/details.aspx?familyid=C7A809D8-8C9F-439F-8147-948BC6957812&displaylang=en

Atau.. sebentar lagi Mas Wely akan download ke server INDC sehingga cukup meringankan beban kita dalam men-download.

Di VPC ini, sesuai dengan judulnya, baik TFS maupun VSTS nya sudah Service Pack 1.

Selamat mencoba…!

Share this post: | | | |

Meng-ekstrak teks dari gambar

2009-01-09T12:23:00Z

Ada beberapa cara untuk meng-ekstrak teks dari gambar. Yang jelas, memang gak ada kelas OCR (Optical Character Recognition) di .NET sehingga kita butuh bantuan 3rd party tools. Saat ini yang baru saya coba adalah dengan menggunakan COM object dari Office 2007, yaitu Microsoft Office Document Imaging. Wahhh, jangan-jangan pada belum tahu nih, kalo Microsoft Office itu juga udah ada OCR nya..?

Oke, sebelum meng-ekstrak gambar, tentunya kita harus punya gambarnya dulu. Nah, saya membuat gambar dengan menggunakan Expression Design. Seperti ini…

Block semua objek, kemudian klik kanan, lalu pilih Export…

Pilih TIFF sebagai format

Tentukan nama file (kalau saya misalnya jadi Fuady.tif) dan lokasi file (kalau saya misalkan di C:\Temp) Klik tombol Export All.

Nahh, sekarang kita udah punya gambar.

Oke, pertama-tama, kita pakai Microsoft Office OneNote 2007, kita bisa ambil teks dari gambar. Caranya sangat sederhana. Buka OneNote, kemudian pilih menu Insert > Pictures > From Files…

Pilih gambar yang baru saja kita buat (Fuady.tif). Klik kanan gambar tersebut, kemudian pilih “Copy Text From Picture…”

Paste deh… tadaaaa..

Ehm.. intinya sih bukan ini.. karena yang mau saya lakukan itu adalah dari C#. So, kita bisa pakai objek COM yang terdapat pada Microsoft Office, yaitu Microsoft Office Document Imaging (MODI). MODI ini akan ada kalau kita pilih ketika install Office lho ya.. jadi gak secara otomatis ada. Ketika install Office, jangan lupa pilih komponen Microsoft Office Document Imaging untuk diinstall juga.

Bagi yang belum terinstall, toh kan kita bisa Add or Remove Features. Double-click aja file instalasinya (setup.exe) trus klik tombol continue, trus baru kita pilih komponen Microsoft Office Document Imaging untuk diinstall.

Oke, setelah terinstall, akan ada COM object yang bisa kita add di aplikasi kita. Contohnya, kita buat aplikasi WPF (yang tampilannya sengaja saya samakan dengan aplikasi di post saya sebelumnya) yang akan memanfaatkan COM bernama MODI ini.

Di aplikasi WPF ini, kita add reference ke MODI (klik kanan di Solution Explorer, kemudian pilih COM, lalu cari Microsoft Office Document Imaging 12.0 Type Library)

Nah, di Window1.xaml.cs, kita import namespace MODI

using MODI;

Kemudian masih di file yang sama, Window1.xaml.cs, isi method Button_Click dengan code ini

Document md = new Document();
md.Create(@"C:\Temp\Fuady.tif");
md.OCR(MODI.MiLANGUAGES.miLANG_ENGLISH, true, true);

MODI.Image image = (MODI.Image)md.Images[0];
MODI.Layout layout = image.Layout;

for (int j = 0; j < layout.Words.Count; j++)
{
    // Get this word and deal with it.
    MODI.Word word = (MODI.Word)layout.Words[j];
    textBlockResult.Text += "\n" + word.Text;
}

md.Close(false);

Coba kita tes yahh..

Yess!!! Berhasil…!!! Selamat mencoba :)

Sumber: Using The Office 2007 OCR Component in C#

Share this post: | | | |

Meng-ekstrak teks dari file PDF menggunakan library dari Winnovative

2009-01-09T10:12:00Z

Pertama-tama, kunjungi halaman http://www.winnovative-software.com/download.aspx. Di situ, scroll down ke bawah sampai pada produk PDF to Text Coverter 2.0.

Simpan license key nya (misalkan disimpan di file txt atau di OneNote supaya gampang nyarinya), kemudian klik link “Continue Download”. Anda akan mendapatkan sebuah file zip bernama WnvPdfToText.zip. Ekstrak file tersebut.

Nah, dengan cara yang hampir sama dengan cara pada post saya sebelumnya, kita buat sebuah aplikasi WPF. Perbedaannya adalah:

File yang di-reference adalah pdftotext.dll yang didapat dari hasil ekstrak WnvPdfToText.zip.
Tidak perlu add file PDFParser.cs ke project.
Tidak perlu add file pdf (Source.pdf) ke project. Namun kita harus tahu lokasi file pdf nya, misalnya di C:\Temp\Source.pdf

Nahhh, pada intinya adalah, kita import namespae Winnovative

using Winnovative;

Kemudian isi method Button_Click dengan code seperti berikut:

PdfToTextConverter pdfToTextConverter = new PdfToTextConverter();

pdfToTextConverter.Layout = TextLayout.OriginalLayout;
pdfToTextConverter.AddHtmlMetaTags = false;

//License key didapat dari website Winnovative
pdfToTextConverter.LicenseKey = @"WXJoeWtseWhpaWl5a3dpeWlhd2lrd2tpaWA=";

string extractedText = pdfToTextConverter.ConvertToText(@"C:\Temp\Source.pdf");
textBlockResult.Text = extractedText;

Kali ini hasilnya jauh lebih baik, kalau file pdf mengandung gambar, maka pengambilan teks tetap berhasil, dan gambar akan di-ignore oleh extractor.

Sumbernya:

Hasilnya:

Hmm… mantapp!!

Sumber: http://www.winnovative-software.com/PdfToText.aspx

Share this post: | | | |

Meng-ekstrak teks dari file PDF

2009-01-09T08:31:00Z

Misalkan kita punya file PDF (bernama Source.pdf) seperti ini

Nah, kemudian kita mau ambil isi teksnya. Ada library yang free (namun tidak sempurna, nanti akan saya beritahu alasannya) yang bisa mengambil teks dari pdf kemudian menyimpannya dalam file txt. Library tersebut bisa di-download di http://www.codeproject.com/KB/cs/PDFToText.aspx. Di halaman tersebut, download baik source files maupun demo project.

Setelah download, ekstrak dua file zip tersebut. Di dalam PDFToText_bin.zip, ada file itextsharp.dll dan SharpZipLib.dll. Nah, dua file ini yang akan kita jadikan reference ke project kita. Kemudian di dalam PDFToText_src.zip, ada file PDFParser.cs yang nanti akan kita add (existing item) ke project kita.

Oke, sekarang ke contoh project. Misalkan kita buat sebuah aplikasi WPF (pertama-tama dengan menggunakan Ekspression Blend, tentunya).

Buatlah sebuah Button dan sebuah TextBlock pada Window1 (di dalam LayoutRoot).

Percantiklah tampilan (mohon maklum kalau tampilan yang saya buat nggak cantik ya..)

Kemudian, klik kiri di tombol Ekstrak, setelah itu di window Properties, klik icon Events

Di pilihan Events, double-click text box di sebelah Click.

Sekarang kita beralih ke Visual Studio (yang terbuka secara otomatis gara-gara kita double-click tadi). Nah, sebelum ngapa-ngapain di Visual Studio, lakukan langkah-langkah berikut:

Add reference ke itextsharp.dll dan SharpZipLib.dll yang ada di dalam PDFToText_bin.zip.
Add existing item ke file PDFParser.cs yang ada di dalam PDFToText_src.zip.
Add existing item ke file pdf yang akan kita ekstrak isinya, yaitu Source.pdf.

Berikut screen-shot nya…

Add reference

Add existing item

Nahh, kalau step-step tadi udah selesai, berarti di Solution Explorer akan tampil seperti ini:

Gunakan cara yang sama untuk menambahkan file Source.pdf. Namun, agar file Source.pdf ter-copy secara otomatis ke folder bin\Debug, maka kita harus memilih “Copy always” pada pilihan Copy to Output Directory. Caranya, klik kiri Source.pdf yang ada di Solution Explorer, kemudian di window Properties, set properti Copy to Output Directory menjadi Copy Always.

Setelah itu, buka Window1.xaml. TextBlock kita belum punya nama. Beri nama TextBlock kita dengan textBlockResult. Caranya, klik kiri TextBlock kemudian isi property Name di window Properties.

Oke.. sekarang kita menuju code. Buka Window1.xaml.cs (sebenernya udah kebuka dari tadi sih..). Pertama-tama, kita import dulu namespace System.IO dan PdfToText.

using System.IO;
using PdfToText;

Di dalam handler-nya button click, atau dengan kata lain di method Button_Click yang dibuatin dari sananya, tuliskan code berikut:

//Ekstrak isi teks di Source.pdf kemudian menyimpannya dalam Result.txt

PDFParser pdfParser = new PDFParser();
pdfParser.ExtractText("Source.pdf", "Result.txt");

//Supaya teks di dalam Result.txt tertulis di text block

TextReader reader = new StreamReader("Result.txt");
textBlockResult.Text = reader.ReadLine();

Nahh, coba sekarang kita test hasilnya.

Klik tombol Ekstrak, maka inilah hasilnya:

Nahh… hasilnya bagus kalau kebetulan teksnya sederhana. Kalau agak rumit.. misalnya isi pdf nya seperti ini:

Maka, tidak ada teks yang berhasil diambil barang sehuruf pun..

Ada yang punya solusinya?

Sumber: http://www.codeproject.com/KB/cs/PDFToText.aspx

Share this post: | | | |

Settingan awal untuk memulai proyek dengan TFS (Security settings for TFS, WSS, and SQL Server Reporting Services)

2008-07-31T15:04:40Z

Yak, post ini kembali merupakan kisah lanjutan dari sebuah software house bernama Milanello yang baru saja akan memulai sebuah software development, yaitu proyek yang diberi nama LegaCalcio0809. Bagi yang bingung tentang post ini, silahkan tengok-tengok di post saya sebelumnya:

Nah, pada episode sebelumnya (halahh...), admin TFS telah membuatkan sebuah Team Project baru untuk tim Milanello. Nah, setelah Team Project dibuat, janganlah dulu langsung memulai proyek, karena tentunya ada beberapa pengaturan yang terkait dengan masalah keamanan (security). Artinya, kita harus menentukan siapa-siapa saja, user dan group mana saja yang bisa berkontribusi di Team Project ini. Dan bukan hanya TFS lho yang harus kita "amankan", melainkan juga portal di Windows SharePoint Services dan SQL Server Reporting Services.

Oke, tanpa banyak teori, kita lanjut ke praktek aja yah!

Langkah 1: Mengamankan TFS.

Pada Windows Server 2003 yang ada di VPC, bukalah Visual Studio 2008. Cek apakah proyek LegaCalcio0809 sudah muncul di Team Explorer. Jika belum muncul, klik lambang atau bisa juga klik kanan nama server (GANDALF), kemudian pilih Add Existing Team Project. Pada window Connect to Team Foundation Server, beri tanda pada check box LegaCalcio0809, kemudian klik tombol OK. Setelah itu, tentunya proyek LegaCalcio0809 akan muncul di Team Explorer. Nah, klik kanan proyek LegaCalcio0809, kemudian pilih Team Project Settings > Group Membership...

Kik ganda group yang bernama [LegaCalcio0809]\Contributors. Akan muncul window Properties untuk group tersebut. Kita akan menambahkan lima group yang telah dibuat sebelumnya ke dalam group Contributors ini. Caranya yaitu dengan memilih radio button Windows User or Group, kemudian klik tombol Add...

Setelah itu akan muncul window Select Users or Groups. Ketikkan group-group berikut:

LegaCalcio0809ProjectManager; LegaCalcio0809Architect; LegaCalio0809DatabaseAdministrator; LegaCalcio0809Developer; LegaCalcio0809Tester;

Untuk lebih meyakinkan, klik tombol Check Names. Setelah itu, klik tombol OK.

Pastikan bahwa lima group tersebut termasuk dalam member dari group Contributors. Setelah itu, klik tombol OK.

Klik tombol Close. Dengan ini, Team Project LegaCalcio0809 bisa diakses oleh account-account yang berada dalam group LegaCalcio0809ProjectManager, LegaCalcio0809Architect, LegaCalio0809DatabaseAdministrator, LegaCalcio0809Developer, dan LegaCalcio0809Tester yang tentunya berisi 10 anggota tim Milanello.

Langkah 2: Mengamankan WSS.

Masih di Team Explorer, klik kanan proyek LegaCalcio0809, kemudian pilih Show Project Portal...

Secara otomatis, Visual Studio akan membuka Internet Explorer (atau mungkin browser lainnya, tergantung settingan kita di Visual Studio), yang membuka situs portal dari proyek LegaCalcio0809. Pada halaman utama portal ini, klik Site Actions yang berada di kanan atas, kemudian pilih Site Settings.

Setelah itu, Anda akan dibawa ke halaman Site Settings. Perhatikan bahwa terdapat kolom Users and Permissions. Klik link bertuliskan People and groups.

Pada halaman People and Groups, klik New, kemudian pilih Add Users

Isi textbox Users/Groups dengan group-group sebagai berikut:

LegaCalcio0809ProjectManager; LegaCalcio0809Architect; LegaCalcio0809DatabaseAdministrator; LegaCalcio0809Developer; LegaCalcio0809Tester;

Pada pilihan Give user permission directly, beri tanda pada check box Contribute. Setelah itu, klik tombol OK.

Setelah menunggu sesaat, WSS kembali ke halaman Permissions dan sekarang telah berisi group-group yang baru saja kita tambahkan. Yups! WSS sudah aman dan bisa digunakan oleh group LegaCalcio0809ProjectManager, LegaCalcio0809Architect, LegaCalio0809DatabaseAdministrator, LegaCalcio0809Developer, dan LegaCalcio0809Tester yang tentunya berisi 10 anggota tim Milanello.

Langkah 3: Mengamankan SQL Server Reporting Services

Begitu terintegrasinya TFS dengan WSS dan SQL Server, sehingga setiap Team Project telah dibuatkan report-reportnya dengan memanfaatkan teknologi Reporting Services milik SQL Server (dalam kasus ini SQL Server 2005). Nah, untuk masalah report, kita juga perlu membuat akses dan pengamanan sehingga tidak sembarang orang bisa melihat report, tidak sembarang orang bisa membuat report dan mengedit report. Langsung daaah...

Pada Team Explorer, di proyek LegaCalcio0809, terdapat folder Reports. Nah, klik kanan folder Reports, kemudian pilih Show Report Site...

Secara otomatis, Visual Studio akan membuka Internet Explorer yang sedang membuka halaman report untuk proyek LegaCalcio0809. Pada halaman tersebut, klik menu Properties (terletak di kiri atas, di sebelah menu Contents).

Nah, Anda akan dibawa ke halaman Properties. Pada halaman ini, klik link Security yang berada di panel kiri.

Setelah itu, pilih menu bertuliskan Edit Item Security

Klik New Role Assignment

Perhatikan dengan seksama pilihan-pilihan yang ada, karena ini akan menentukan group apa bisa melakukan apa. Dalam kasus ini, saya memberikan tanda pada check box Publisher untuk lima group, yaitu LegaCalcio0809ProjectManager, LegaCalcio0809Architect, LegaCalio0809DatabaseAdministrator, LegaCalcio0809Developer, dan LegaCalcio0809Tester. Sayangnya, kita harus melakukannya satu persatu.

Setelah lima group tersebut ditambahkan, maka tentunya halaman Security pada Reporting Services untuk LegaCalcio0809 akan tampil seperti berikut

Nahh... dengan ini, kita telah menyiapkan sistem akses dan keamanan untuk SQL Server Reporting Services dan melengkapi persiapan untuk akhirnya memulai proyek LegaCalcio0809. Pada post selanjutnya, kita akan memulai proyek dengan menjadi Project Manager. See you!

Share this post: | | | |

Membuat proyek pertama di TFS

2008-07-30T13:17:30Z

Post ini merupakan lanjutan dari post sebelumnya yang menjelaskan tentang persiapan administrasi di Windows Server sebelum menggunakan TFS sebagai tools dalam melaksanakan software development. Pada post ini, kita akan membuat sebuah Team Project. Team Project berbeda dengan Solution dan Project yang biasa kita buat dengan Visual Studio. Team Project adalah sebuah software development project, bukan application project atau web project. Pada Team Project tidak terdapat file-file C#, VB, ASP.NET, melainkan terdapat Work Items, Documents, Reports, Builds, dan Source Control. Untuk lebih jelasnya, maka kita coba saja langsung membuat sebuah Team Project.

Untuk membuat Team Project, Anda bisa melakukannya di client, bukan di server. Contohnya, saya melakukannya di Vista saya. Asalkan di Vista saya terinstall Visual Studio Team Explorer, maka saya bisa membuat sebuah Team Project. Team Explorer bisa dibilang merupakan add-in untuk Visual Studio, di mana ia mengkonsumsi web service-web service yang dibuat oleh TFS, sehingga bisa berkomunikasi dengan TFS. Visual Studio Team Explorer bisa di-download di sini. Setelah saya install Team Explorer, saya bisa membuka window Team Explorer pada Visual Studio saya. Buka Visual Studio, kemudian pada menu View, pilih Team Explorer. Saya biasanya menempatkannya di tempat yang sama dengan Solution Explorer dan Server Explorer.

Selain window Team Explorer, ada menu baru yang ditambahkan, yaitu New Team Project yang ditujukan untuk membuat Team Project. Pada menu File, pilih New Team Project... Akan muncul window Connect to Team Foundation Server. Pilih server yang diinstall TFS, kemudian klik OK.

Ketikkan username dan password admin TFS, kemudian klik OK.

Akan muncul wizard untuk membuat Team Project. Ketikkan LegaCalcio0809 sebagai nama proyek, kemudian klik Next.

Pilih MSF for Agile Software Development - v4.2 sebagai process template. MSF for Agile cocok untuk tim development yang jumlah anggotanya relatif sedikit, misalnya 5 - 10. Atau bahkan bisa saja hingga 3 orang. MSF for CMMI cocok untuk tim yang jumlah anggotanya banyak. Pilih MSF for Agile, kemudian klik Next.

Tulsikan deskripsi proyek, kemudian klik Next.

Jika ini adalah proyek baru, pilih Create an empty source control folder. Jika proyek yang akan dibuat merupakan percabangan dari proyek yang ada, pilih Create a new source control branch. Jika belum ingin menggunakan source control, pilih Do not create a source control folder at this time. Untuk kasus ini, pilih Create an empty source control folder, kemudian klik Next.

Pada window selanjutnya, klik Finish.

Tunggu sampai pembuatan Team Project selesai.

Setelah selesai, beri tanda pada check box Launch the process guidance for more information about running team project, kemudian klik Close.

Process guidance yang dimaksud di-host di server dan merupakan web yang dibangun di atas WSS, sehingga perlu koneksi ke server lagi untuk memperoleh hak masuk di WSS.

Setelah login, Visual Studio akan membuka internal Web Browser yang sedang memperlihatkan halaman home dari website process guidance.

Kemudian, pada Team Explorer akan muncul Team Project yang baru saja dibuat, yakni LegaCalcio0809.

Selamat! Anda telah membuat Team Project pertama Anda! Tunggu post saya selanjutnya yah...

Share this post: | | | |

Darren, Ugghhhh... lucunyaaa!!!

2008-07-30T12:36:38Z

Kalo ke rumah Z pada saat-saat begini, pasti asyik banget! Coz ada Darren, yang imutnya minta ampun! Hehee... dia itu seneng banget sama orang lain, jadi gak nangis kalo digendong, atau diajak bercanda. Malah doyan. Apalagi pas gua deketin sama laptop, langsung deh pegang-pegang keyboard sama mouse. Udah gitu, ada bakat juga jadi foto model.

Beda banget antara yang terawat dengan yang sangat terawat.. (hihiii.. ngeles)

Pipinya minta dicubiiiittt

Lagi diledekin juga masih cute...!

Hmmmffhhh... jadi pengeeenn....!

Sooonyaaaaa..... (lho???)

Darren, nanti kalo dah bisa berdiri dan lari, pokoknya gua jadiin pemain sepakbola yang jago abis yah! No one can run as fast as you! No one can pass as accurate as you!

Share this post: | | | |

Persiapan menggunakan TFS

2008-07-30T10:33:14Z

Langkah 1: Membuat user-user untuk anggota tim software development

Post ini merupakan lanjutan dari post sebelumnya, sehingga environment yang saya gunakan pada post ini adalah hasil dari proses instalasi TFS pada post sebelumnya. Nah, setelah TFS berhasil diinstal, cerita selanjutnya adalah kita akan melakukan suatu software development dengan memanfaatkan TFS. Hal itu masih beberapa langkah di depan, karena sebelumnya kita harus menyiapkan terlebih dahulu. Supaya terlihat sebagai sebuah kisah (walaupun khayalan), ada baiknya saya menghadirkan sebuah software house fiktif yang berisi orang-orang yang juga fiktif. Jika ada kesamaan nama, tempat, dan hal lainnya, ya sebagian memang disengaja karena saya merupakan penggemar. Hehe...

Alkisah ada sebuah software house bernama Milanello, yang berisi anggota sebagai berikut:

Carlo Ancelotti
Mauro Tassotti
Paolo Maldini
Allessandro Nesta
Andrea Pirlo
Ricardo Kaka
Clarence Seedorf
Filippo Inzaghi
Ronaldinho Gaucho
Alexandre Pato

Nah, untuk itu, kita buat dulu account untuk mereka. Sebaiknya kita buat account di Active Directory. Namun karena saya menggunakan Single Server Deployment ketika menginstal TFS, dan TFS tidak bisa diinstal di server yang memiliki role sebagai domain controller, sehingga di sini saya hanya menggunakan account biasa, bukan Active Directory. Untuk membuat account di Windows Server 2003, klik Start > Administrative tools > Computer Management.

Nanti akan muncul window Computer Management. Pada window ini, expand folder Local Users and Groups, kemudian klik folder Users sehingga tampil user-user yang ada din Windows Server 2003 ini. Kita akan buatkan account untuk setiap anggota Milanello. Caranya adalah dengan klik kanan di folder Users, kemudian pilih New User...

Nah, buatkan account untuk setiap user. Agar nantinya tidak merepotkan, pilih check box Password never expires. Dalam kasus ini, saya membuat account berikut

Carlo Ancelotti : ancelotti
Mauro Tassotti : tassotti
Paolo Maldini : maldini
Allessandro Nesta : nesta
Andrea Pirlo : pirlo
Ricardo Kaka : kaka
Clarence Seedorf : seedorf
Filippo Inzaghi : inzaghi
Ronaldinho Gaucho : ronaldinho
Alexandre Pato : pato

Langkah 2: Membuat group-group untuk sebuah proyek

Setelah semua account dibuat, kita akan membuat beberapa buah group sesuai dengan peran yang ada pada suatu project. Ya, group dibuat berdasarkan proyek yang hendak dikerjakan. Misalnya, Milanello akan mengerjakan sebuah proyek besar yang diberi nama LegaCalcio0809. Untuk itu, admin TFS sebaiknya menyediakan group-group yang khusus ditujukan untuk proyek ini. Jika di kemudian hari ada proyek yang berbeda, admin TFS juga sebaiknya menyediakan group yang berbeda. Kenapa? Karena mungkin saja di suatu proyek, seseorang berperan sebagai developer, tapi di proyek lain ia berperan sebagai tester. Dengan demikian, pembuatan group memang ditujukan untuk setiap proyek. Oke, kita mulai dengan proyek pertama, yaitu LegaCalsio0809. Untuk proyek ini, kita akan membuat lima buah group, yaitu untuk peran Project Manager, Architect, Developer, Database Administrator, dan Tester. Cara membuat group mirip dengan membuat user. Klik kanan folder Groups, kemudian pilih New Group...

Dalam kasus ini, saya membuat group-group sebagai berikut:

LegaCalcio0809ProjectManager, anggota: ancelotti, tassotti
LegaCalcio0809Architect, anggota: pirlo, kaka
LegaCalcio0809Developer, anggota: seedorf, ronaldinho
LegaCalcio0809DatabaseAdministrator, anggota: maldini, nesta
LegaCalcio0809Tester, anggota: inzaghi, pato

Untuk menambah anggota, pada saat membuat group, klik tombol Add...

Pada window Select Users, tulis username yang menjadi anggota dari group tersebut. Pisahkan username satu dengan lainnya dengan titik koma.

Jika ingin memastikan apakah username yang dimasukkan sudah benar, klik Check Names. Jika sudah, klik tombol OK.

Kembali ke window New Group yang kali ini sudah tertera dua username yang menjadi anggota dari group tersebut. Klik tombol Create untuk membuat group ini.

Lakukan berulang kali hingga lengkap menjadi lima buah group. Dengan demikian, untuk urusan administrasi, persiapan untuk nantinya menggunakan TFS dan VSTS bisa dibilang sudah selesai. Selamat mencoba!

Share this post: | | | |