This Blog

Syndication

News

Awards

Microsoft MVP Logo
Grab this badge here!

Certificates

Transcript ID#: 6724122
Brainbench ASP.NET Certificate
 
Brainbench ASP.NET 2.0 Certificate
 
Brainbench .NET Framework 2.0 Certificate

Ahmad Masykur

var myObject = { "languages" : [ "C#", "VB.NET", "ASP.NET", "Javascript", "SDCC", "Assembler" ] }; //

October 2007 - Posts

  • Select Paged Records

    ASP.NET memiliki kontrol yang dapat digunakan untuk menampilkan data halaman demi halaman. Hal ini kelihatan sangat bagus tapi perlu dilihat di balik ini kerja SQL Server dan traffic jaringan antara SQL Server dan server web juga tinggi. Akhirnya response time ke client juga lama jika jumlah data sangat besar.

    Berikut ini sedikit trik untuk meminimalkan proses pembacaan records di SQL Server dan meminimalkan data yang ditransmisikan dari SQL Server ke server web. Dalam contoh berikut digunakan database contoh dari MS SQL Server 2000 yaitu tabel Customers di database Nortwind.

    CREATE PROCEDURE [dbo].[GetCustomers]
        @PageSize int,
        @PageIndex int
    AS
    
        DECLARE @PageLowerBound int
        DECLARE @PageUpperBound int
    
        -- Set the page bounds
        SET @PageLowerBound = @PageSize * @PageIndex
        SET @PageUpperBound = @PageLowerBound + @PageSize + 1
    
        CREATE TABLE #PageIndex 
        (
            IndexID    int IDENTITY (1, 1) NOT NULL,
            CustomerID nchar(5) COLLATE database_default
        )
    
        INSERT INTO #PageIndex (CustomerID)
        SELECT dbo.Customers.CustomerID FROM dbo.Customers 
            ORDER BY CompanyName
    
        SELECT dbo.Customers.*
            FROM dbo.Customers
            INNER JOIN #PageIndex PageIndex
                ON dbo.Customers.CustomerID = PageIndex.CustomerID
            WHERE PageIndex.IndexID         > @PageLowerBound	
                AND PageIndex.IndexID       < @PageUpperBound	
            ORDER BY
                PageIndex.IndexID	
    
        SELECT COUNT(*) as TotalRecords
            FROM #PageIndex

    Pada contoh di atas digunakan tabel Customers yang memiliki primary key CustomerID sehingga temporary table berisi dua column (IndexID dan CustomerID). IndexID harus auto increment (identity) sehingga didapat indeks yang urut. Jika primary key tabel yang diambil lebih dari satu column atau berasal dari query yang kompleks dengan key lebih dari satu column, maka temporary table juga harus berisi columns yang digunakan sebagai key tersebut.

    Berikutnya adalah select semua key dari tabel yang akan diambil dan hasilnya dimasukkan ke dalam temporary table yang sudah dibuat. Perhatikan bahwa pernyataan INSERT INTO dengan menyebutkan nama column kecuali column IndexID. Pernyataan ini akan melakukan insert key dan IndexID diisi dengan identity insert (nomor urut record).

    Selanjutnya, pernyataan select yang sebenarnya yaitu mengambil record dari tabel Customers. Pernyataan ini mengambil record tabel Customers  dengan filter berupa nomor IndexID dengan range nilai tertentu yang merupakan hasil INNER JOIN terhadap temporary table #PageIndex.

    Terakhir adalah mengambil jumlah record sebenarnya yang ada dalam tabel Customers.

    Contoh berikut adalah proses pemanggilan dan pembacaan stored procedure di atas menggunakan C# pada console application.

    SqlConnection conn = new SqlConnection(connectionString);
    SqlCommand cmd = new SqlCommand("GetCustomers", conn);
    cmd.CommandType = CommandType.StoredProcedure;
    cmd.Parameters.Add(new SqlParameter("@PageSize", 10));
    cmd.Parameters.Add(new SqlParameter("@PageIndex", 3));
    conn.Open();
    SqlDataReader dr = cmd.ExecuteReader();
    while (dr.Read())
    {
        Console.WriteLine("CompanyName : {0}", dr["CompanyName"]);
    }
    dr.NextResult();
    if (dr.Read())
    {
        Console.WriteLine("Total records {0}", dr["TotalRecords"]);
        
    }
    dr.Close();
    conn.Close();

    Pada kode di atas, pertama buat SqlConnection ke database. Set nilai connectionString sesuai dengan database yang digunakan. Selanjutnya buat SqlCommand berupa perintah call stored procedure dengan dua parameter @PageSize=10 dan @PageIndex=3. Berikutnya open connection dan baca record dengan SqlDataReader. Karena terdapat dua recordset yang dihasilkan oleh stored procedure, panggil method NextResult() untuk membaca recordset berikutnya. Dan dilanjutkan dengan pembacaan recordset berikutnya dengan method Read().

    Hasil keluaran dari kode di atas adalah sebagai berikut.

    CompanyName : Godos Cocina Típica
    CompanyName : Gourmet Lanchonetes
    CompanyName : Great Lakes Food Market
    CompanyName : GROSELLA-Restaurante
    CompanyName : Hanari Carnes
    CompanyName : HILARION-Abastos
    CompanyName : Hungry Coyote Import Store
    CompanyName : Hungry Owl All-Night Grocers
    CompanyName : Island Trading
    CompanyName : Königlich Essen
    Total records 91

    Dengan query seperti ini akan sangat membantu meningkatkan response time saat menampilkan bagian data dalam jumlah besar.

    Share this post: | | | |
    Posted Oct 23 2007, 04:55 PM by cahnom with no comments
    Filed under:
  • VB6 Untuk Enterprise application?

    Beberapa menit yang lalu, saya agak sedikit kaget dan sedikit heran. Ada apa gerangan? Sudah lebih dari 3 tahun (sebelum di Epson) tidak menulis program menggunakan Visual Basic 6 atau yang lebih rendah. Kali ini, saya diminta install SAP yang baru dibeli oleh Epson. Begitu lihat window instalasi saya agak kaget karena installer-nya meregister runtime VB5 ke komputer saya.

    Software sekelas SAP masih menggunakan VB5?

    Share this post: | | | |
    Posted Oct 19 2007, 11:43 AM by cahnom with 2 comment(s)
    Filed under:
  • Langkah-langkah Pembuatan Project Microsoft Silverlight 1.0 Bagian 2

    Pada bagian sebelumnya telah saya jelaskan bagaimana persiapan dan pembuatan plug-in silverlight sederhana. Pada bagian ini akan saja jelaskan bagaimana menggambar objek dalam Canvas. Silverlight mendukung vektor grafik dasar seperti elemen Ellipse, kotak (Rectangle), garis (Line), Polyline, Polygon, dan Path. Secara keseluruhan elemen-elemen tersebut disebut sebagai elemen bentuk (shape).

    Bentuk Dasar

    Bentuk dasar pada Silverlight ada tiga macam yaitu Ellipse, Rectangle dan Line.

    Ellipse merupakan bentuk lingkaran (oval atau bulat) yang memiliki diameter vertikal dan horizontal. Diameter vertical diset melalui property Height dan diameter horizontal diset melalui property Width.

    Rectangle adalah bentuk kotak (segi empat) dengan tinggi dan lebar diset melalui property Height dan Width. Selain itu Rectangle juga memiliki property RadiusX dan RadiusY untuk membuat masing-masing sudut menjadi tumpul (rounded corner).

    Berbeda dengan kedua bentuk sebelumnya, Line tidak memiliki property Height dan Width. Untuk menggambar garis dengan Line, terdapat propery X1, X2, Y1 dan Y2 sebagai koordinat awal (X1, Y1) dan akhir (X2, Y2) garis.

    Contoh XAML berikut digunakan untuk menggambar Ellipse, Rectangle dan Line dalam satu Canvas.

    <Canvas 
        xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
      <Ellipse Height="200" Width="200" Canvas.Left="30" Canvas.Top="30" 
        Stroke="Black" StrokeThickness="10" Fill="SlateBlue"/> 
      <Rectangle Height="100" Width="100" Canvas.Left="5" Canvas.Top="5"
        RadiusX="30" RadiusY="15" 
        Stroke="Black" StrokeThickness="10" Fill="SlateBlue"/> 
      <Line X1="280" Y1="10" X2="10" Y2="280" 
        Stroke="black" StrokeThickness="5"/> 
    </Canvas> 
    

    Hasil XAML di atas, Ellipse dengan ukuran 200x200 digambar di Canvas pada posisi (30, 30). Rectangle dengan ukuran 100x100 dan sudut dibulatkan sejauh 30 untuk sumbu X dan 15 untuk sumbu Y. Hasilnya masing-masing sudut tampak tidak runcing. Sedang pada penggambaran garis (Line), Line dimulai dari koordinat (280, 10) dan berakhir di koordinat (10, 280) akan tampil seperti gambar di bawah

    Selanjutnya saya akan bahas bentuk dasar lain yaitu Polygon, Polyline dan Path. Polygon adalah kumpulan garis yang saling menyambung dengan titik awal menyambung ke titik akhir (tertutup). Polyline sama dengan Polygon, hanya saja titik awal tidak harus menyambung dengan titik akhir (terbuka). Berikut ini contoh perbedaan antara Polygon dan Polyline.

    <Canvas 
        xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
      <Polyline Points="150, 150 150, 250 250, 250 250, 150"
        Stroke="Black" StrokeThickness="10"/> 
      <Polygon Points="10,10 10,110 110,110 110,10" 
        Stroke="Black" StrokeThickness="10" Fill="LightBlue"/>
    </Canvas>
    

    Pada contoh di atas, gambar Polyline dengan titik koordinat berturut-turut di (150, 150), (150, 250), (250, 250), (250, 150). Sedangkan pada Polygon gambar dengan dimensi yang sama namun posisinya berbeda yaitu pada titik koordinat (10, 10), (10, 110), (110, 110), (110, 10). Keduanya memiliki empat titik koordinat yang ditarik garis antar titik-titik tersebut. perbedaannya pada Polyline titik akhir tidak disambungkan dengan titik awal, pada Polygon titik akhir disambungkan ke titik awal membangun garis yang tertutup.

    Bentuk dasar lainnya adalah Path. Berbeda dengan bentuk dasar lainnya, Path tidak menggunakan koordinat secara langsung untuk menggambar di Canvas. Path menggunakan atribut Data untuk merepresentasikan apa yang akan digambar. Path dapat digunakan untuk menggambar bentuk yang kompleks termasuk kurva dan bagian ellips (arcs). Berikut merubakan beberapa contoh bentuk yang dibuat dengan Path.

    <Canvas
       xmlns="http://schemas.microsoft.com/client/2007"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
      <Path Data="M25,5 L29.11,19.34 
          44.02,18.82 31.66,27.16 
          36.76,41.18 25,32
          13.24,41.18 18.34,27.16
          5.98,18.82 20.89,19.34z"
          Stroke="Black" Fill="Gold"
          Canvas.Left="10" Canvas.Top="10" />
    
      <Path Data="M 10,100 C 10,300 300,-200 250,100z"
          Stroke="Red" Fill="Orange"
          Canvas.Left="10" Canvas.Top="10" />
          
      <Path Data="M 0,200 L100,200 50,50z"
          Stroke="Black" Fill="Gray"
          Canvas.Left="150" Canvas.Top="70" />
      
    </Canvas>

    Pada contoh di atas, digambar tiga buah Path. Yang pertama Path dimulai dari koordinat 25,5 (M25,5 berarti pointer Move to [pindah ke] koordinat 25,5) dilanjutkan dengan menggambar garis (Line) dari koordinat sebelumnya (25,5) ke koordinat (29.11, 19.34). Berikutnya dilanjutkan dengan menggambar garis ke koordinat (44.02, 18.82) dan seterusnya sampai ke garis terakhir yang diakhiri dengan tanda "z". Path berikutnya menggambar dari koordinat (10, 100) dilanjutkan dengan kurva (Curve). Kurva memiliki tiga buah atribut yaitu koordinat awal, koordinat kedua dan koordinat terakhir. Path terakhir berupa gambar sederhana yang terbentuk dari tiga koordinat membentuk segitiga.

    Menggambar Path dengan Kuas (Brush)

    Kebanyakan bentuk terdiri dari dua buah bagian, pertama adalah garis tepi (Stroke) dan kedua adalah isi (Fill) yang berada di dalam garis tepi. Garis tepi dan isi dapat diset melalui property Stroke dan Fill. Berikut ini adalah ilustrasi dari garis tepi dan isi dari sebuah persegi.

    Tidak semua bentuk memiliki property Stroke dan Fill. Line hanya memiliki property Stroke tapi tidak memiliki Fill. Penambahan property Fill pada Line tidak ada rpengaruhnya.

    Shape dan Stroke dapat digambar menggunakan Brush. Brush adalah sebuah kuas yang digunakan untuk menggambar objek. Brush dapat berupa warna tunggal (Solid Color), Gradien, Gambar/Foto atau Video.

    Menggambar dengan Warna Tunggal

    Kuas yang paling sederhana adalah warna tunggal (solid brush). Untuk menggambar dengan kuas ini, digunakan property SolidColorBrush. Property ini dapat berisi nama warna (dalam Bahasa Inggris) seperti "Black", "Green", "Yellow", dan lainnya atau menggunakan notasi warna 6 atau 8 digit heksadesimal.

    Format notasi warna heksadesinal adalah #aarrggbb, dimana:

    • aa adalah nilai tembus pandang (transparansi) dari 0 sampai ff, 0=tembus pandang dan FF=tidak tembus pandang. Jika nilai aa tidak disebutkan (6 digit heksadesimal), maka nilai aa akan diset menjadi ff.
    • rr adalah nilai warna merah dari 0 sampai ff
    • gg adalah nilai warna hijau dari 0 sampai ff
    • bb adalah nilai warna biru dari 0 sampai ff

    Sebagai contoh, #0033ff menghasilkan warna . Dan #77ff0000 menghasilkan warna . Berikut contoh untuk set warna dalam beberapa cara.

    <Canvas
        xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
        
      <Ellipse Height="90" Width="90" Canvas.Left="10" Canvas.Top="10"
          Fill="black"/> <!-- SolidColorBrush by color name. -->
          
      <Ellipse Height="90" Width="90" Canvas.Left="110" Canvas.Top="10"
          Fill="#000000"/> <!-- SolidColorBrush by 6-digit hexadecimal notation. -->
          
      <Ellipse Height="90" Width="90" Canvas.Left="10" Canvas.Top="110"
          Fill="#ff000000"/> <!-- SolidColorBrush by 8-digit hexadecimal notation. -->
          
      <Ellipse Height="90" Width="90" Canvas.Left="110" Canvas.Top="110">
        <Ellipse.Fill>
        
          <!-- SolidColorBrush by object element syntax. -->
          <SolidColorBrush Color="Black"/>
        </Ellipse.Fill>
      </Ellipse>
    </Canvas>

    Pada contoh di atas terdapat empat ellipse dengan warna hitam. Keempat ellipse tersebut diwarnai menggunakan empat macam cara yaitu dengan menyebut nama warna secara langsung (black), menggunakan notasi heksadesimal (#000000), menggunakan notasi heksadesimal 8-digit (#ff000000) dan menggunakan element SolidColorBrush. Kode di atas akan tampil seperti gambar di bawah.

    Menggambar gradasi warna dengan LinearGradientBrush dan RadialGradientBrush

    Gradasi warna linier dapat dibuat dengan LinearGradientBrush dan gradasi warna radial dapat dibuat dengan RadialGradientBrush. Keduanya memiliki satu atau lebih warna pada titik tertentu yang menandakan transisi warna yang akan digambar pada titik tersebut. LinearGradiantBrush secara default menggambar gradasi warna diagonal dari pojok kiri atas sampai pojok kanan bawah.  Sedangkan pada RadialGradientBrush secara default berpusat pada tengah sebuah objek.

    Perhatikan contoh berikut.

    <Canvas
       xmlns="http://schemas.microsoft.com/client/2007"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
      
      <!-- Linear gradients -->
      <Rectangle Width="140" Height="70" Canvas.Left="10" Canvas.Top="10">
        <Rectangle.Fill>
          <LinearGradientBrush>
            <GradientStop Color="Yellow" Offset="0.0" />
            <GradientStop Color="Red" Offset="0.25" />
            <GradientStop Color="Blue" Offset="0.75" />
            <GradientStop Color="LimeGreen" Offset="1.0" />
          </LinearGradientBrush>
        </Rectangle.Fill>
      </Rectangle>
      
      <Rectangle Width="140" Height="70" Canvas.Left="155" Canvas.Top="10">
        <Rectangle.Fill>
          <LinearGradientBrush  StartPoint="0,0" EndPoint="1,0">
            <GradientStop Color="Yellow" Offset="0.0" />
            <GradientStop Color="Red" Offset="0.25" />
            <GradientStop Color="Blue" Offset="0.75" />
            <GradientStop Color="LimeGreen" Offset="1.0" />
          </LinearGradientBrush>
        </Rectangle.Fill>
      </Rectangle>
      
      <!-- Radial gradients -->
      <Rectangle Width="140" Height="70" Canvas.Left="10" Canvas.Top="110">
        <Rectangle.Fill>
          <RadialGradientBrush>
            <GradientStop Color="Yellow" Offset="0.0" />
            <GradientStop Color="Red" Offset="0.25" />
            <GradientStop Color="Blue" Offset="0.75" />
            <GradientStop Color="LimeGreen" Offset="1.0" />
          </RadialGradientBrush>
        </Rectangle.Fill>
      </Rectangle>
      
      <Rectangle Width="140" Height="70" Canvas.Left="155" Canvas.Top="110">
        <Rectangle.Fill>
          <RadialGradientBrush GradientOrigin="1,0">
            <GradientStop Color="Yellow" Offset="0.0" />
            <GradientStop Color="Red" Offset="0.25" />
            <GradientStop Color="Blue" Offset="0.75" />
            <GradientStop Color="LimeGreen" Offset="1.0" />
          </RadialGradientBrush>
        </Rectangle.Fill>
      </Rectangle>
    </Canvas>

    Dalam contoh XAML di atas, digambar empat buah persegi panjang dengan dua LinearGradientBrush dan dua RadialGradientBrush. Masing-masing persegi panjang memiliki GradientStop yang sama yaitu warna "Yellow" pada offset 0.0, warna "Red" pada offset 0.25, warna "Blue" pada offset 0.75 dan warna "LimeGreen" pada offset 1.0.

    Persegi panjang pertama dan kedua menggunakan LinearGradientBrush, yang pertama menggunakan StartPoint dan EndPoint default (StartPoint="0,0"; EndPoint="1,1") sedangkan satunya menggunakan StartPoint="0,0" (pojok kiri atas) dan EndPoint="1,0" (pojok kanan atas).

    Persegi panjang ketiga dan keempat menggunakan RadialGradientBrush, yang pertama menggunakan GradientOrigin default (di tengah objek) dan lainnya mengguankan GradientOrigin="1,0" yaitu pada sudut kanan atas.

    Catatan: Pada GradientBrush offset bernilai antara 0 sampai 1 dengan nilai 0 berada di titik awal (StartPoint) dan nilai 1 berada di titik akhir (EndPoint). StartPoint dan EndPoint memiliki nilai koordinat x,y dengan nilai x dan y antara 0 sampai 1.

    Hasil keluaran XAML di atas dapat dilihat pada gambar berikut.

    Untuk lebih memahami bagaimana gradient digambar, berikut ilustrasi yang menggambarkan gradient pada contoh sebelumnya.

    Catatan: Gradient juga dapat digunakan untuk menggambar garis tepi (Stroke).

    Menggambar image dengan ImageBrush

    Selain gradient, terdapat ImageBrush yang digunakan untuk mengisi bentuk objek (Shape) dengan sebuah image (gambar/foto). Secara default objek image akan diisikan memenuhi keseluruhan bagian pada objek. Property Stretch juga dapat digunakan untuk menentukan bagaimana sebuah image akan ditempatkan di dalam objek.

    Lihat contoh XAML berikut.

    <Canvas Width="300" Height="300"
       xmlns="http://schemas.microsoft.com/client/2007"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       Background="White">
      
      <Rectangle Height="180" Width="90" Canvas.Left="10" Canvas.Top="10"
          Stroke="Black" StrokeThickness="1">
        <Rectangle.Fill>
          <ImageBrush ImageSource="star.png"/>
        </Rectangle.Fill>
      </Rectangle>
      
      <Rectangle Height="180" Width="90" Canvas.Left="110" Canvas.Top="10"
          Stroke="Black" StrokeThickness="1">
        <Rectangle.Fill>
          <ImageBrush ImageSource="star.png" Stretch="Uniform"/>
        </Rectangle.Fill>
      </Rectangle>
    </Canvas>

     

    Contoh XAML di atas akan menghasilkan tampilan seperti gambar berikut.

    Dari contoh di atas, ImageBrush (image asli seperti gambar di bawah) pertama memenuhi semua area pada persegi panjang. Pada ImageBrush yang kedua property Stretch diisi dengan Uniform sehingga image akan ditarik dengan skala yang sama antar panjang dan lebar pada objek tempat dia digambar.

    Share this post: | | | |
  • Shalat Sunah Rajin tapi Tidak Shalat Wajib?

    Lebaran sebentar lagi...

    Selama sebulan penuh umah Islam di Indonesia menyambut dengan rasa senang. Anak-anak maupun Bapak dan Ibuknya anak-anak berangkat ke masjid untuk shalat berjamaah. Tiap malam tarawih dan tadarus bersama. Begitulah suasana yang ada di kota santri, kota kelahiran saya.

    Tahun ini, saya hidup di kota yang sangat keras. Sangat jauh berbeda dengan kehidupan di kampung halaman. Banyak orang tidak berpuasa, banyak orang tidak shalat. Di bulan ramadhan, Alhamdulillah sebagian dari mereka masih punya iman walaupun sebiji kurma. Sebagaian dari mereka menunaikan shalat tarawih dengan senang hati. Paling tidak masih mau menunaikan shalat (walaupun hanya shalat sunah tarawih, yang wajib masih ditinggalkan).

    Dari tahun ke tahun, hampir setiap umat Islam pada tanggal 1 Syawal berbondong-bondong ke Masjid, ada yang ke lapangan untuk menunaikan shalat "Idul Fitri. Apakah dia saat Ramadhan puasa atau tidak, apakah sebelumnya rajin shalat 5 waktu atau tidak. Pada tanggal 1 Syawal mereka rajin berangkat menunaikan Shalat 'Idul Fitri.

    Begitulah kenyataan yang terjadi di Indonesia. "Banyak orang rajin shalat sunah tapi lalai akan shalat wajib" Bagaimana nih Pak Ustadz?

    Share this post: | | | |
  • Langkah-langkah Pembuatan Project Microsoft Silverlight 1.0 Bagian 1

    Microsoft Silverlight, sebuah Rich Interactive Application (RIA) keluaran Microsoft (atau dapat dibilang Flash-nya Microsoft) dapat ditulis cukup menggunakan teks editor Notepad karena semua berbasis teks dan tidak perlu di-compile menjadi file biner sebagaimana Adobe Flash.  Sebelum memulai pembuatan, ada beberapa hal yang perlu dipersiapkan.

    1. Silverlight plug-ins. Silverlight plug-in yang akan menampilkan objek Silverlight di browser. Silverlight plug-ins dapat didownload di sini.
    2. Sebuah halaman HTML. Halaman HTML ini digunakan sebagai tempat untuk menampilkan Silverlight.
    3. File silverlight.js yang terdapat di dalam Microsoft Silverlight 1.0 Software Development Kit (SDK)
    4. Piranti lunak teks editor. Dapat juga menggunakan Notepad. Anda juga bisa menggunakan Visual Web Developer 2008 Express (VWD) untuk lebih memudahkan penulisan.

    Berikut langkah-langkah untuk membuat project Silverlight yang pertama.

    Langkah 1. Tambahkan referensi script ke halaman HTML

    Tambahkan referensi script silverlight.js ke dalam halaman HTML seperti contoh kode berikut:

    <script type="text/javascript" src="Silverlight.js"></script>

    Tempatkan baris kode di atas di dalam tag <head>. Secara lengkap halaman HTML dapat dilihat pada kode di bawah.

    <!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" xml:lang="en">
    <head>   <title>A Sample HTML page</title>      <script type="text/javascript" src="Silverlight.js">     </script> </head> <body> </body> </html>

    Langkah 2. Buat element HTML div sebagai host object Silverlight

    Selanjutnya, buat element HTML <div> di dalam tag <body> yang digunakan sebagai host (tempat/rumah) plug-in Silverlight.

    <!-- Tempat object Silverlight akan ditampilkan -->
    <div id="mySLPluginHost">
    </div>

    Anda dapat merubah ID <div> di atas sesuai dengan keinginan. Jika anda akan memasang plug-in silverlight lebih dari satu dalam satu halaman, ulangi langkah tersebut sebanyak plug-in silverlight yang akan dibuat. ID dari <div> harus unik, tidak boleh ada yang sama dalam satu halaman.

    Berikutnya buat blok script untuk melakukan inisialisasi plug-in silverlight. Script ini harus ditempatkan setelah tag <div>.

    <script type="text/javascript">
        // ambil element div yang dibuat pada langkah sebelumnya.
        var parentElement = 
            document.getElementById("mySLPluginHost");
        // fungsi berikut untuk membuat plug-in Silverlight.
        createMySLPlugin();
    </script>

    Jika Anda membuat plug-in Silverlight lebih dari satu dalam satu halaman, ulangi langkah tersebut untuk masing-masing plug-in Silverlight. Pastikan nama masing-masing fungsi untuk masing-masing plug-in Silverlight adalah unik atau dapat juga menggunakan satu fungsi dengan parameter nama host masing-masing plug-in silverlight.

    Langkah 3. Buat fungsi inisialisasi instance plug-in Silverlight

    Fungsi ceateMySLPlugin untuk inisialisasi instance plug-in silverlight dapat dilihat dalam kode berikut.

    function createMySLPlugin() { Silverlight.createObject( "myxaml.xaml", // File XAML yang digunakan. parentElement, // Referensi DOM ke tag <div> yang digunakan sebagai rumah. "mySLPlugin",            // ID plug-in yang unik. { // Berikut property per-instance silverlight. width:'300', // Lebar area plug-in dalam piksel. height:'300', // Tinggi area plug-in dalam piksel. inplaceInstallPrompt:false, // Akan menampilkan pesan jika terdapat versi yang tidak sama. background:'#D6D6D6', // Warna latar belakang plug-in. isWindowless:'false', // Menampilkan plug-in dalam mode tanpa window. framerate:'24', // Nilai maksimal FrameRate. version:'1.0' // Versi Silverlight yang digunakan. }, { onError:null, // Nama fungsi penangangan event OnError. onLoad:null // Nama fungsi penangangan event OnLoad
    }, null); // Nama fungsi penanganan event Context. }

    Nama fungsi tersebut harus unik untuk masing-masing plug-in atau dapat menggunakan satu fungsi dengan parameter sebagai berikut.

    function createSLPlugin(xamlfile, parentEl, pluginID) { Silverlight.createObject( xamlfile, // File XAML yang digunakan. parentEl, // Referensi DOM ke tag <div> yang digunakan sebagai rumah. pluginID,           // ID plug-in yang unik. { // Berikut property per-instance silverlight. width:'300', // Lebar area plug-in dalam piksel. height:'300', // Tinggi area plug-in dalam piksel. inplaceInstallPrompt:false, // Akan menampilkan pesan jika terdapat versi yang tidak sama. background:'#D6D6D6', // Warna latar belakang plug-in. isWindowless:'false', // Menampilkan plug-in dalam mode tanpa window. framerate:'24', // Nilai maksimal FrameRate. version:'1.0' // Versi Silverlight yang digunakan. }, { onError:null, // Nama fungsi penangangan event OnError. onLoad:null // Nama fungsi penangangan event OnLoad
    }, null); // Nama fungsi penanganan event Context. }

    Script di atas mengandung parameter yang dapat diatur sesuai dengan keinginan seperti lebar, tinggi, warna latar belakang plug-in, dll. Script di atas dapat dimasukkan ke dalam file HTML atau dipisahkan ke dalam file .js dengan referensi ke file tersebut. Untuk menambahkan script tersebut sebagai referensi file .js, dapat dilakukan seperti pada langkah 1 dengan merubah atribut src menjadi nama file script. Dalam contoh ini, script di atas disimpan dalam file create-sl.js.

    Secara keseluruhan, halaman HTML pada contoh ini adalah sebagai berikut.

    <!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" xml:lang="en">
      <head>     <title>A Sample HTML page</title>     <script type="text/javascript" src="Silverlight.js" />     <script type="text/javascript" src="create-sl.js" />   </head>
      <body>     <!-- Tempat object Silverlight akan ditampilkan -->     <div id="mySLPluginHost">     </div>     <script type="text/javascript">       // ambil element div yang dibuat pada langkah sebelumnya.       var parentElement =             document.getElementById("mySLPluginHost");       // fungsi berikut untuk membuat plug-in Silverlight.       createMySLPlugin();     </script>
      </body> </html>

     

    Langkah 4. Buat file isi Silverlight

    Silverlight menggunakan Extensible Application Markup Language (XAML) untuk membuat tampilan di layar. Seperti pada tahap sebelumnya file XAML disimpan dengan nama myxaml.xaml. File XAML dimulai dengan tag <Canvas> yang berisi atribut xmlns sebagai deklarasi namespace silverlight bersama dengan atribut xmlns:x sebagai deklarasi namespace XAML.

    <Canvas 
       xmlns="http://schemas.microsoft.com/client/2007"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    </Canvas>

    File XAML minimal terdiri dari satu buah canvas yang digunakan sebagai penampung objek lain. Canvas dapat berisi satu atau lebih Canvas lain di dalamnya.

    Selanjutnya mari kita gambar sebuah lingkaran di dalam Canvas dengan tag <Ellipse> sebagai berikut.

    <Canvas
       xmlns="http://schemas.microsoft.com/client/2007"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
        
      <Ellipse 
         Height="200" Width="200"
         Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />
    </Canvas>

    Pada contoh di atas, tag <Ellipse> memiliki atribut Height dan Width yang merupakan tinggi dan lebar lingkaran, atribut Stroke dan StokeThickness merupakan warna dan tebal garis tepi, dan Fill adalah warna isi dari lingkaran. Hasil keluaran XAML tersebut dapat dilihat seperti gambar berikut.

    Objek Canvas

    Canvas adalah objek untuk menampung objek lain. Canvas juga digunakan untuk menempatkan objek pada posisi tertentu. Pada contoh sebelumnya, sudah ditunjugkkan bagaimana menambahkan sebuah objek ke dalam Canvas. Selanjutnya akan dijelaskan bagaimana mengatur sebuah objek yang ada di dalam Canvas.

    Objek di dalam Canvas normalnya akan ditempatkan di koordinat X,Y=0,0 dengan titik 0,0 berada di sudut kiri atas dan nilai positif untuk sumbu X adalah ke kanan dan ke bawah untuk sumbu Y. Untuk menempatkan objek pada posisi tertentu relatif terhadap Canvas tempat objek tersebut diletakkan, digunakan atribut Canvas.Left untuk sumbu X dan Canvas.Top untuk sumbu Y.  Sebagai contoh, lingkaran pada contoh sebelumnya diberikan atribut Canvas.Left="30" dan Canvas.Top="30" seperti kode di bawah.

    <Canvas
        xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
      <Ellipse 
          Canvas.Left="30" Canvas.Top="30" 
          Height="200" Width="200"
          Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />
    </Canvas>

    Hasil keluaran XAML tersebut di atas adalah sebagai berikut.

    Gambar berikut sebagai ilustrasi untuk menerangkan sistem koordinat Canvas dan posisi ellipse dari contoh sebelumnya.

    Urutan Tumpukan Objek 

    Objek dalam Canvas bisa saling tumpang tindih. Objek yang ditulis terlebih dahulu akan diletakkan paling bawah dan objek selanjutnya diletakkan di atas objek sebelumnya. Contoh berikut terdapat tiga buah lingkaran yang dengan warna silver, DeepSkyBlue dan Lime. Ketiga objek akan saling tumpang tindih berdasarkan urutan penulisannya.

    <Canvas
        xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
      
      <Ellipse 
          Canvas.Left="5" Canvas.Top="5" 
          Height="200" Width="200"
          Stroke="Black" StrokeThickness="10" Fill="Silver" />
          
      <Ellipse 
          Canvas.Left="50" Canvas.Top="50" 
          Height="200" Width="200"
          Stroke="Black" StrokeThickness="10" Fill="DeepSkyBlue" />
    
      <Ellipse 
          Canvas.Left="95" Canvas.Top="95" 
          Height="200" Width="200"
          Stroke="Black" StrokeThickness="10" Fill="Lime" />
    
    </Canvas>

    Hasil dari XAML di atas akan tampil seperti pada gambar berikut.

    Untuk merubah urutan tumpukan objek dapat dilakukan dengan set property Canvas.ZIndex. Index paling kecil akan ditempatkan di lapisan lebih bawah dibandingkan dengan index yang lebih besar. Contoh XAML berikut ditunjukkan bagaimana cara mengatur susunan tumpukan objek menggunakan ZIndex.

    <Canvas
        xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
      <Ellipse 
          Canvas.ZIndex="3"
          Canvas.Left="5" Canvas.Top="5" 
          Height="200" Width="200"
          Stroke="Black" StrokeThickness="10" Fill="Silver" />
    
      <Ellipse 
          Canvas.ZIndex="2"
          Canvas.Left="50" Canvas.Top="50" 
          Height="200" Width="200"
          Stroke="Black" StrokeThickness="10" Fill="DeepSkyBlue" />
      <Ellipse 
          Canvas.ZIndex="1"
          Canvas.Left="95" Canvas.Top="95" 
          Height="200" Width="200"
          Stroke="Black" StrokeThickness="10" Fill="Lime" />
    
    </Canvas>

    Hasil dari XAML di atas akan tampil seperti pada gambar berikut.

    Ukuran Canvas

    Ukuran Canvas lebar dan tinggi dapat diatur dengan mengeset property Canvas.Width dan Canvas.Height. Ukuran Canvas default adalah lebar 0 dan tinggi 0. Jika objek yang ada dalam Canvas lebih melebihi batas Canvas, objek tersebut tidak dipotong melainkan menyembul ke luar Canvas. Contoh berikut ditunjukkan bagaimana lingkaran (warna SlateBlue) dengan ukuran 200 x 200 yang letaknya di koordinat 30,30 di dalam Canvas (warna LimeGreen) dengan ukuran 200 x 200 digambar.

    <Canvas
       xmlns="http://schemas.microsoft.com/client/2007"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       Width="200" Height="200"
       Background="LimeGreen">
        
      <Ellipse 
        Canvas.Left="30" Canvas.Top="30" 
        Height="200" Width="200"
        Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />
    </Canvas>
    

    Hasil dari XAML di atas akan tampil seperti pada gambar berikut.

    Canvas di dalam Canvas

    Canvas dapat berisi satu atau lebih Canvas lainnya. Canvas yang ada di dalam Canvas adalah sama seperti objek lainnya. Contoh berikut dibuat Canvas yang di dalamnya terdapat satu Canvas lain.

    <Canvas
        xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
      <Canvas Height="50" Width="50" 
          Canvas.Left="30" Canvas.Top="30" Background="blue"/> <Canvas Height="50" Width="50"
          Canvas.Left="130" Canvas.Top="30" Background="red"/> </Canvas>

    Pada kode di atas, akar (root) Canvas berisi dua Canvas lainnya dengan warna blue dan red. Canvas dengan warna blue berada di koordinat 30, 30 sedangkan Canvas dengan warna red berada di koordinat 130, 30. Hasil dari XAML di atas akan tampil seperti pada gambar berikut.

    Semoga tulisan ini bisa bermanfaat bagi yang mau memulai belajar Silverlight. Jika ada pertanyaan atau saran silakan tulis komentar di bawah.

    Share this post: | | | |
  • Silverlight for Real LOB Application

    Silverlight merupakan RIA (Rich Interactive Application) yang sangat tangguh. Tidak hanya dapat digunakan untuk animasi namun lebih dari itu, dengan kombinasi Silverlight dan ASP.NET AJAX, dapat juga digunakan dalam dunia bisnis secara nyata.

    Saya buat beberapa aplikasi pendukung SAP untuk PT. Indonesia Epson Industry menggunakan teknologi ASP.NET AJAX,  Silverlight dan ExtJs (www.extjs.com). ASP.NET AJAX digunakan untuk komunikasi antara browser dengan ASp.NET Webservice, Silverlight untuk presentation yang ringan dan interaktif sedangkan ExtJs digunakan untuk membuat UI yang menarik. Kombinasi ketiga teknologi tersebut menghasilkan aplikasi yang ringan, interaktif dan menarik untuk dilihat. Berikut adalah screenshoot salah satu halaman aplikasi intranet yang saya buat untuk Epson.

     Silverlight Charting

    Dulunya untuk membuat charting di ASP.NET saya gunakan GDI+ yang digenerate oleh ASP.NET generic http handler. Ternyata cara tersebut tidak bisa fleksibel. Akhirnya saya coba untuk beralih menggunakan Silverlight dan ternyata sungguh menakjubkan. Chart yang dibikin dengan Silverlight dapat tampilkan dengan cepat dan "interaktif" 

    Walaupun hanya berbekal Visual Studio 2008 Express (Beta 2), saya bisa menyelesaikan beberapa modul aplikasi yang dibutuhkan dengan cepat. Rencana semua aplikasi yang ada di Epson akan saya buat dengan ASP.NET AJAX dan Silverlight. Setelah melihat hasil aplikasi yang dibikin menggunakan Silverlight ini, semoga tahun depan Epson menganggarkan untuk membeli Visual Studio 2008 sehingga teknologi .NET 3.5 dapat sepenuhnya dimanfaatkan dengan baik.

    Saatnya mendalami .NET 3.5 nih.....

    Share this post: | | | |