Futorial

Fu-styled tutorial
See also: Other Geeks@INDC
Konfigurasi Team Foundation Server 2010 (lanjutan)

Nah, sekarang saya sedang berada dalam network domain. Sudah saatnya melakukan konfigurasi Team Foundation Server, dan kali ini pasti sukses. Berikut adalah langkah-langkahnya:

1. Untuk memunculkan kembali window Team Foundation Server Configuration Center, buka Team Foundation Administration Console melalui menu Start > All Programs > Microsoft Team Foundation Server 2010 > Team Foundation Administration Console.

2. Akan muncul window Team Foundation Administration Console. Pada window ini, karena saya belum selesai melakukan konfigurasi, maka akan ada sebuah link menuju menu konfigurasi. Klik link Configure Installed Features.

image

3. Akan muncul window Team Foundation Server Configuration Center. Pada window ini, pilih wizard yang bertipe Basic kemudian klik tombol Start Wizard.

image

4. Selanjutnya, kita lakukan konfigurasi yang sama seperti pada post saya sebelumnya. Sampai akhirnya kita tiba pada halaman Readiness Checks yang tentunya kali ini tidak terdapat error. Pada halaman ini, klik tombol Configure.

image 

5. Tunggu sampai proses konfigurasi selesai…

image

6. Setelah selesai, klik tombol Next.

image

7. Jika proses konfiguasi selesai dengansukses, maka akan tampil halaman berikut:

image

Selamat! Anda siap menggunakan Team Foundation Server 2010!

Tunggu post saya selanjutnya tentang bagaimana membangun kolaborasi yang mantap pada Software Development Team dengan memanfaatkan fitur-fitur yang ada pada Team Foundation Server 2010. Stay Tuned!

Share this post: | | | |
Konfigurasi Team Foundation Server 2010

Okee… kita lanjut!

1. Setelah klik tombol Configure pada akhir proses instalasi TFS 2010, maka akan muncul window berikut:

image

2. Perhatikan bahwa ada beberapa pilihan wizard, yaitu Basic, Advanced, Application-Tier Only, dan Upgrade. Pada setiap wizard, terdapat informasi tentang apa tujuan wizard tersebut. Pilih wizard yang paling cocok dengan kebutuhan Anda. Pada kasus ini, saya pilih wizard yang Basic. Setelah itu, klik tombol Start Wizard.

3. Akan muncul halaman Welcome pada window Team Foundation Server Basic Configuration. Pada halaman ini, klik tombol Next.

image

4. Akan muncul halaman SQL Server Instance. Wizard ini tahu bahwa saya sudah punya SQL Server Express sehingga pilihan Use an existing SQL Server Instance secara otomatis sudah terpilih. Bagi Anda yang belum punya SQL Server Express, jangan khawatir, karena wizard ini akan menginstalkannya (lagi-lagi bahasa yang aneh) untuk Anda (yaitu dengan memilih pilihan Install SQL Server Express). Selanjutnya, klik tombol Next.

image

5. Akan muncul halaman Database. Pada halaman ini, tuliskan nama mesin Anda berikut nama instance dari SQL Server yang akan Anda gunakan sebagai database TFS. Mesin (komputer) saya bernama Lorien, dan instance SQL Server yang akan saya gunakan adalah SQLEXPRESS2008, maka dari itu saya tulis: LORIEN\SQLEXPRESS2008. Jika perlu, klik link bertuliskan Test yang berada di sebelah kanan isian. Setelah itu, klik tombol Next.

image

4. Akan muncul halaman Review. Pada halaman ini, kita diberikan informasi tentang apa saja settingan konfigurasi yang akan dilakukan oleh wizard ini. Klik tombol Next.

image

5.  Tunggu proses Readines Checks selesai..

image

6. Whooopps!! Ternyata ada yang Error. Apakah itu? Mari kita lihat apa yang menyebabkan error tersebut.

image

7. Wuah, ternyata penyebabnya adalah begini: mesin saya sudah join domain, sedangkan saat menulis tutorial ini, saya tidak sedang berada dalam network domain. Soo.. pilihannya ada 2, yaitu unjoin dari domain, atau ulangi proses ini ketika saya berada di dalam network domain. Saya pilih option yang ke-2. Jadiii.. saya lanjutkan di lain hari yah.. ketika saya berada di dalam network domain ;)

See ya! Always Stay Tuned!

Share this post: | | | |
Instalasi Team Foundation Server 2010 pada Windows Client

Sebelum saya jelaskan langkah-langkahnya, saya punya good news: TFS 2010 bisa diinstal di Windows 7, Vista atau XP, guys! Nggak perlu di Windows Server. Mantap bangat lahh..

Satu lagi hal yang sangat penting: Installation Guide. Saran saya: Sebaiknya kita jangan “sotoy”.. alias nekat nginstal-nginstal tanpa baca petunjuk yang disediakan. Tidak semua software dapat diinstal dengan beberapa klik sederhana. So.. biasakan download dulu Installation Guide-nya, kemudian baca baik-baik. Tidak perlu terburu-buru kok.

Download TFS 2010 Installation Guide di sini

Hmm, oke.. sekarang langkah-langkahnya:

1. Karena file TFS 2010 berbentuk ISO, maka butuh software tambahan untuk membaca ISO. Kita bisa gunakan Virtual Clone Drive atau Daemon Tools. Setelah punya software itu, mount ISO-nya TFS.

2. Di dalam drive “tambahan” setelah me-mount (aneh banget bahasanya) ISO, ada folder TFS-x64 dan TFS-x86. Pilih dan buka folder yang sesuai dengan mesin Anda. Saya pakai Windows 7 Ultimate x64, jadi saya buka folder TFS-x64.

3. Di dalam folder tersebut, double-click file yang bernama setup.exe. Kalau ada window User Account Control, klik tombol Yes tentunya. Setelah itu akan muncul window berikut

image

5. Tunggu sebentar.. Setelah selesai loading, klik tombol Next. Pada halaman di bawah ini, (silahkan baca license terms terlebih dahulu kemudian) pilih I have read and accept the license terms lalu klik tombol Next.

image

6. Pada halaman di bawah ini, pilih komponen yang Anda ingin install. Team Foundation Server adalah komponen utama TFS. Sedangkan Team Foundation Build Service merupakan komponen tambahan yang memungkinkan kita melakukan build secara terintegrasi (pada post yang akan datang, TFS Build akan saya bahas lebih dalam). Saya memilih untuk menginstal 2 komponen tersebut sehingga saya beri tanda centang 2 pilihan Team Foundation Server dan Team Foundation Build Service, kemudian saya klik tombol Install.

image

7. Tunggu beberapa saat.. silahkan membuat teh atau kopi untuk menemani Anda menunggu.

image

8. Weleh-weleeeehhh.. ternyata gampang sekali install TFS 2010. Beda jauuuuh banget experience-nya dibandingkan dengan instalasi TFS 2008 yang lumayan ribet..

9. Eh.. Ternyata sudah selesai..! Cepet juga yah.. nggak sempet bikin teh deh :D

image

10. Proses instalasi sudah selesai. Namun perjuangan belum berakhir. Kita harus melakukan konfigurasi terlebih dahulu agar TFS yang kita instal dapat berfungsi sesuai dengan kondisi sistem dan lingkungan kita. Dengan memastikan bahwa Anda memberi tanda centang pada pilihan Launch Team Foundation Server Configuration Tool, klik tombol Configure.

Cerita selanjutnya akan saya beberkan pada post saya selanjutnya (biar nggak kepanjangan.. hehe)

Stay Tuned..

Share this post: | | | |
Persiapan perang telah siap!

Akhirnyaaa, setelah 1 malam meninggalkan laptop di kampus dalam keadaan downloading, persiapan (tools alias software) untuk implementasi Application Lifecycle Management sudah tersedia dan siap pakai.

image

Nah, dengan bermodalkan senjata-senjata berat yang terdiri dari

  1. Team Foundation Server 2010 (download di sini)
  2. Team Explorer Everywhere 2010 (download di sini)
  3. Team Explorer 2010 (download di sini)
  4. Visual Studio Agents 2010 (download di sini)
  5. Visualization Modeling SDK (download di sini)
  6. Pex 2010 (download di sini)
  7. Visual Studio 2010 Ultimate (download trial di sini)

maka saya nyatakan kita siap berperang! Berperang melawan ribet dan susahnya melalui masa-masa pengembangan perangkat lunak secara team.

Untuk setiap peralatan, nanti akan ada post tersendiri. Langkah pertama tentunya adalah: Deployment (instalasi dan konfigurasi). Oke kalau begitu, post selanjutnya akan membahas tuntas tentang Deployment Team Foundation Server 2010.

Salam Perjuangan!

Share this post: | | | |
Welcoming new Microsoft Student Partners from University of Indonesia

CONGRATULATIONS

to our 5 new Microsoft Student Partners

Raufan Multahada Safari Gilang Bhagaskara Sonya Permata Putri Gilang Mentari Hamidy Enrico Budianto
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-


Microsoft Student Partners            Microsoft Innovation Center | Universitas Indonesia            Microsoft .NET
Share this post: | | | |
Menampilkan data pada GridView berdasarkan user yang sedang login

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:

  1. Anda punya database.
  2. 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.
  3. Anda membuat sebuah GridView.
  4. 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" />
  5. 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

image

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.

image

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.

image

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

image

Maka sekarang tampil Customer milik fuady.

image

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

image

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

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.

image

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.

image

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

Ehm.. kembali ke Futorial.

Misalnya saya isi dengan 5 pemain saja

image

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.

image

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…>

image

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

image

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

image

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

image

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

image

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

image

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”.

image

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.

image

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).

image

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.

image

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

image

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.

image

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

image

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?

image

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):

image

Nah, sekarang bisa Insert deh!

image

image

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

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:

  1. Jika Anda pernah menginstal SQL Server 2005 Management Studio Express, Anda harus meng-uninstall-nya terlebih dahulu.
  2. 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:

image

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:

image

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!

image

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

1. Klik tab Properties

image

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

image

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

image

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).

image

image

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

image

Semoga membantu,

-Fu-

Share this post: | | | |
Meng-encode video sekaligus membuat media player Silverlight

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

  1. Mungkin format video yang Anda punya tidak disupport oleh Silverlight
  2. 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.

image

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

image

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.

image

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.

image

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.

image

Setelah itu, klik tombol Encode image di window Items.

Tunggu sampai proses encoding selesai

image

Nahh.. ini hasilnya deh:

image

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

image 

Selamat mencoba!

Share this post: | | | |
Build dua Team Project yang saling berbagi Source Code

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…

image

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

image

Pilih MSF for Agile Software Development – v4.2

image

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

image

Pilih Create an empty source control folder

image

Klik tombol Finish

image

Tunggu sampai proses pembuatan Team Project selesai

image

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

image

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.

image

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.

image

Pilih menu File > New > Project…

image

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.

image

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

image

Di Solution Explorer, perhatikan akan ada tanda image 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\"

image

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…

image

Tulis Initial Check In sebagai Comment kemudian klik tombol Check In

image

Mapping Workspace antara Server dengan Local

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

image

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

image

Pilih Yes

image

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

image

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

image

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

image

Pada tab Project File, klik tombol Create

image

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.

image

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

image

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

image

Klik tombol OK. Akan muncul CompanyWebBuildManual di folder Builds.

image

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

image

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

image

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

image

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>
    <SolutionToBuild Include="$(SolutionRoot)\SharedLibrary\SharedLibrary.sln" />
    <SolutionToBuild Include="$(SolutionRoot)\CompanyWeb\CompanyWeb.sln" />
</ItemGroup>

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

<Target Name="BeforeGet">
    <DeleteWorkspaceTask TeamFoundationServerUrl="$(TeamFoundationServerUrl)"
        Name="$(WorkspaceName)" />
    <Exec
      WorkingDirectory="$(SolutionRoot)"
      Command="&quot;$(TfCommand)&quot; workspace /new $(WorkSpaceName) /server:$(TeamFoundationServerUrl)"/>
    <Exec
     WorkingDirectory="$(SolutionRoot)"
     Command="&quot;$(TfCommand)&quot; workfold /unmap /workspace:$(WorkSpaceName) &quot;$(SolutionRoot)&quot;"/>
    <Exec
      WorkingDirectory="$(SolutionRoot)"
      Command="&quot;$(TfCommand)&quot; workfold /map /workspace:$(WorkSpaceName) /server:$(TeamFoundationServerUrl) &quot;%(Map.Identity)&quot; &quot;%(Map.LocalPath)&quot;"/>
</Target>

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

image

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!

image

Horeeeee!!!

Referensi

Share this post: | | | |
Input data lewat Web Site, InfoPath, Excel

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…

image

Misalkan kita beri nama SatuData, kemudian klik tombol OK.

image

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

image

 

 

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.

image

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…

image

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.

image 

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 image . 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.

image

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

image

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…

image

 

 

 

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.

image

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…

image

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

 

 

 

 

image

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

image

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.

image

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

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.

image

Kalau berhasil, tabel Products kita sekarang ada satu record.

image

 

 

 

 

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

image

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.

image

 

 

 

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.

image

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.

image

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

image

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.

image 

Pilih Web Service pada pilihan Based on. Klik OK.

image

Pilih Submit data kemudian klik Next.

image

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.

image

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

image

Biarkan nama koneksi sebagai Main submit. Klik Finish.

image

 

 

 

 

 

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

image

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

image

 

 

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

image

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

image

 

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

image

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

image

Pilih Yes pada window Microsoft Office InfoPath Security Notice.

image

Yuk kita lihat hasilnya.

image

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.

image

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

image

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:

image

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.

image

 

 

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.

image

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

image

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

Selamat mencoba!

Share this post: | | | |
VPC TFS SP1 dan VSTS SP1

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

image

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.

image

Selamat mencoba…!

Share this post: | | | |
Meng-ekstrak teks dari gambar

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…

image

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

image

Pilih TIFF sebagai format

image

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…

image

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

image

Paste deh… tadaaaa..

image

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.

image

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.

image

 

 

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)

image

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..

image

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

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.

image

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:

  1. File yang di-reference adalah pdftotext.dll yang didapat dari hasil ekstrak WnvPdfToText.zip.
  2. Tidak perlu add file PDFParser.cs ke project.
  3. 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:

image

Hasilnya:

image

 

Hmm… mantapp!!

 

Sumber: http://www.winnovative-software.com/PdfToText.aspx
Share this post: | | | |
Meng-ekstrak teks dari file PDF

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

image

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).

image

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

image

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

image

 

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

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

image

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:

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

Berikut screen-shot nya…

Add reference

image

image

 

 

Add existing item

image

image

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

image

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.

image 

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.

image

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.

image

Klik tombol Ekstrak, maka inilah hasilnya:

image

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

image

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: | | | |
More Posts Next page »