Reyza

The Amazing Nokia Lumia Developer Day

reyza — Fri, 27 Jan 2012 12:15:21 GMT

Biar gambar yang berbicara

Share this post: | | | |

ASP.NET/IIS MVP Summit draft schedule

reyza — Thu, 26 Jan 2012 02:44:04 GMT

Ini dia jadwal kasar jika para MVP ASP.NET/IIS ngumpul di bulan February sampai Maret nanti …

Sayang disayang…Visa belum di approve

Share this post: | | | |

Building Backend Service for Mobile Application

reyza — Sun, 22 Jan 2012 12:13:39 GMT

Setelah minggu lalu mengisi materi pada Seminar Microsoft Technology Update 4.0 di auditorium Politeknik Pos Indonesia (How does Web Technology help Mobile App Development-) selanjutnya mendapat kesempatan kembali untuk mengisi acara pada acara Develop Our World with MUGI, Nokia.Ice dan Agate – “Menggenggam dan Membangun Dunia Luar dengan Imaginasi” tanggal 21 Januari 2012 di Universitas Pasundan, almamater sendiri :)

Pada kesempatan ini materi yang saya bawakan adalah Building Backend Service for Mobile Application.

Seminar ini diikuti oleh peserta dari mahasiswa Teknik Informatika Universtas Pasundan, mahasiswa lain dan SMK. Ada sekitar 100 mahasiswa yang hadir pada seminar ini.

Mirip dengan materi sebelumnya, pada kesempatan ini dibahas pembuatan layangan backend untuk support data pada aplikasi mobile. Ada beberapa demo yang diperlihatkan pada materi ini yaitu :

Pembuatan Web Service.
Pemanfaatan Web Service pada Windows Phone.
Pembuatan WCF Data Service.
Pemanfaatan WCF Data Service pada Windows Phone.

{Web Service}

Pada web site cukup tambahkan item Web Service sehingga dapat dilihat seperti berikut ini pada solution explorer.

Yaitu file :

Service.asmx
Service.cs pada folder App_Code.

Berikut adalah isi dari file Service.cs :

     using System;

    using System.Collections.Generic;

    using System.Linq;

    using System.Web;

    using System.Web.Services;

    using System.Data;

    using System.Data.SqlClient;

    [WebService(Namespace = "http://tempuri.org/")]

    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 

    // [System.Web.Script.Services.ScriptService]

    public class Service : System.Web.Services.WebService

    {

        public SqlConnection connection = new SqlConnection("Data Source=.;Initial Catalog=NORTHWND;Integrated Security=True;Pooling=False");

        public Service()

        {

            //Uncomment the following line if using designed components 

            //InitializeComponent(); 

        }

        [WebMethod]

        public string GetIPK(string NIM)

        {

            string ipk;

            // koneksi ke database

            // melakukan query untuk mendapatkan IPK 

            // dengan NIM yang dimasukkan

            ipk = "3,1";

            return ipk;

        }

        [WebMethod]

        public string GetJumlahSKSAmbil(string NIM)

        {

            string sks;

            // koneksi ke database

            // melakukan query untuk mendapatkan jumlah SKS mahasiswa 

            // dengan NIM yang dimasukkan

            sks = "111";

            return sks;

        }

        [WebMethod]

        public DataSet GetListMataKuliahAmbil(string NIM)

        {

            SqlDataAdapter adapter = new SqlDataAdapter(

              "SELECT KodeMK, NamaMK FROM MataKuliah WHERE NIM='" + NIM + "'", connection);

            DataSet mkDS = new DataSet();

            adapter.MissingSchemaAction = MissingSchemaAction.AddWithKey;

            adapter.Fill(mkDS, "MataKuliahAmbil");

            return mkDS;

        }

    }

Untuk “menjalankan” web service ini tinggal klik kanan pada Service.asmx kemudian pilih View in Browser maka akan dapat dilihat hal seperti berikut ini pada web browser.

Dan berikut adalah contoh output ketika method GetListMataKuliahAmbil dieksekusi, dapat dilihat output ini adalah format XML.

{Konsumsi Web Service pada Windows Phone}

Berikut ini adalah cara yang dapat dilakukan untuk mengkonsumsi web service pada Windows Phone. Ada beberapa langkah yang perlu dilakukan. Langkah pertama adalah dengan menambahkan Service Reference pada project Windows Phone, dengan cara klik kanan pada Reference, kemudian pilih Add Service Reference.

Kemudian pilih Service yang ada, pada kasus ini Service berada pada solution yang sama.

Maka akan dapat kita liat service dengan namespace sesuai isian.

Selanjutnya tinggal menambahkan item pada antarmuka, seperti pada gambar berikut ini.

Berikut adalah kode yang dibuat untuk membuat antarmuka seperti di atas.

    <phone:PhoneApplicationPage 

        x:Class="UnpasWP7.MainPage"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

        xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

        mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"

        FontFamily="{StaticResource PhoneFontFamilyNormal}"

        FontSize="{StaticResource PhoneFontSizeNormal}"

        Foreground="{StaticResource PhoneForegroundBrush}"

        SupportedOrientations="Portrait" Orientation="Portrait"

        shell:SystemTray.IsVisible="True">

        <!--LayoutRoot is the root grid where all page content is placed-->

        <Grid x:Name="LayoutRoot" Background="Transparent">

            <Grid.RowDefinitions>

                <RowDefinition Height="Auto"/>

                <RowDefinition Height="*"/>

            </Grid.RowDefinitions>

            <!--TitlePanel contains the name of the application and page title-->

            <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">

                <TextBlock x:Name="ApplicationTitle" Text="Universitas Pasundan" Style="{StaticResource PhoneTextNormalStyle}"/>

                <TextBlock x:Name="PageTitle" Text="Akademik" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

            </StackPanel>

            <!--ContentPanel - place additional content here-->

            <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

                <TextBox Height="72" HorizontalAlignment="Left" Margin="12,0,0,0" Name="textBox_NIM" Text="Isi NIM" VerticalAlignment="Top" Width="277" />

                <Button Content="Get Data" Height="72" HorizontalAlignment="Left" Margin="290,0,0,0" Name="button1" VerticalAlignment="Top" Width="160" Click="button1_Click" />

                <TextBlock Height="30" HorizontalAlignment="Left" Margin="26,116,0,0" Name="textBlock1" Text="IPK" VerticalAlignment="Top" Width="85" />

                <TextBlock Height="30" HorizontalAlignment="Left" Margin="168,116,0,0" Name="textBlock_IPK" Text="" VerticalAlignment="Top" />

                <TextBlock Height="30" HorizontalAlignment="Left" Margin="26,168,0,0" Name="textBlock3" Text="Sisa SKS" VerticalAlignment="Top" />

                <TextBlock Height="30" HorizontalAlignment="Left" Margin="168,168,0,0" Name="textBlock_SKS" Text="" VerticalAlignment="Top" />

            </Grid>

        </Grid>

    </phone:PhoneApplicationPage>

Ketika tombol “Get Data” di klik maka akan terjadi proses “konsumsi” web service. Berikut adalah isi dari file MainPage.xaml.cs yang terdapat method-method untuk melakukan pengambilan data via web service.

       1: using System;

       2: using System.Collections.Generic;

       3: using System.Linq;

       4: using System.Net;

       5: using System.Windows;

       6: using System.Windows.Controls;

       7: using System.Windows.Documents;

       8: using System.Windows.Input;

       9: using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using Microsoft.Phone.Controls;

  

using UnpasWP7.UnpasAkademikService;

  

namespace UnpasWP7

{

    public partial class MainPage : PhoneApplicationPage

    {

        // Constructor

        public MainPage()

        {

            InitializeComponent();

        }

  

        private void button1_Click(object sender, RoutedEventArgs e)

        {

            GetIPK(textBox_NIM.Text);

            GetSKSAmbil(textBox_NIM.Text);

        }

  

        private void GetIPK(string NIM)

        {

            UnpasAkademikService.ServiceSoapClient proxy = new UnpasAkademikService.ServiceSoapClient();

            proxy.GetIPKCompleted += new EventHandler<UnpasAkademikService.GetIPKCompletedEventArgs>(proxy_GetIPKCompleted);

            proxy.GetIPKAsync(NIM);

        }

  

        void proxy_GetIPKCompleted(object sender, UnpasAkademikService.GetIPKCompletedEventArgs e)

        {

            if (e.Error == null)

            {

                textBlock_IPK.Text = e.Result;

            }

            else

            {

                textBlock_IPK.Text = e.Error.Message;

            }

        }

  

        private void GetSKSAmbil(string NIM)

        {

            UnpasAkademikService.ServiceSoapClient proxy = new UnpasAkademikService.ServiceSoapClient();

            proxy.GetJumlahSKSAmbilCompleted += new EventHandler<UnpasAkademikService.GetJumlahSKSAmbilCompletedEventArgs>(proxy_GetJumlahSKSAmbilCompleted);

            proxy.GetJumlahSKSAmbilAsync(NIM);

        }

  

        void proxy_GetJumlahSKSAmbilCompleted(object sender, UnpasAkademikService.GetJumlahSKSAmbilCompletedEventArgs e)

        {

            if (e.Error == null)

            {

                textBlock_SKS.Text = e.Result;

            }

            else

            {

                textBlock_SKS.Text = e.Error.Message;

            }

        }

    }

}

Dan berikut adalah hasilnya :

{WCF Data Service}

Berikut adalah gambaran WCF Data Service, dari database, data access layer sampai menjadi layanan yang dapat digunakan baik itu oleh Windows Phone atau yang lainnya.

Setelah database telah siap, maka kita dapat membuat Data Access Layer. Pada kasus ini akan digunakan Entiry Framework. Caranya cukup dengan menambahkan item baru seperti berikut.

Kemudian kita akan dituntun dengan wizard seperti berikut.

Pilih Generate from Database.

Pilih database yang akan digunakan.

Pilih tabel-tabel yang diinginkan kemudian klik Finish, maka pada tambahan file dg extension EDMX pada solution explorer dan presentasi tabel dengan diagram seperti di bawah ini.

Selanjutnya adalah menambahkan item baru yaitu WCF Data Service.

Maka akan dapat tambahan 2 file pada project, seperti yang dapat dilihat pada gambar berikut ini.

Dan berikut adalah isi dari file UnpasWcfDataService.cs

       1: using System;

       2: using System.Data.Services;

       3: using System.Data.Services.Common;

       4: using System.Collections.Generic;

       5: using System.Linq;

       6: using System.ServiceModel.Web;

       7:  

       8: using NORTHWNDModel;

       9:  

      10: public class UnpasWcfDataService : DataService< NORTHWNDEntities >

      11: {

      12:     // This method is called only once to initialize service-wide policies.

      13:     public static void InitializeService(IDataServiceConfiguration config)

      14:     {

      15:         // TODO: set rules to indicate which entity sets and service operations are visible, updatable, etc.

      16:         // Examples:

      17:         config.SetEntitySetAccessRule("*", EntitySetRights.AllRead);

      18:         config.SetServiceOperationAccessRule("*", ServiceOperationRights.All);

      19:         

      20:     }

      21: }

Yang perlu diperhatikan adalah pada baris 10, yang akan berisi nama entities yang telah dibuat. Sedangkan baris ke 17 dan 18 adalah bagaimana hak aksesnya. Dan berikut adalah ouput dari file SVC ketika di View in Browser.

Dengan layanan ini kita dapat melakukan “query” langsung dengan cara mengetikkan pada address bar pada web browser, seperti berikut.

       1: http://localhost:1490/UnpasWCF/UnpasWcfDataService.svc/Mahasiswas

       2: http://localhost:1490/UnpasWCF/UnpasWcfDataService.svc/Mahasiswas('957100994')

       3: http://localhost:1490/UnpasWCF/UnpasWcfDataService.svc/Mahasiswas('957100994')/Nama

Pada baris 1, adalah cara untuk menampilkan data yang terdapat pada tabel mahasiswa.

Pada baris 2, adalah cara untuk menampilkan data mahasiwa yg nilai primary key-nya adalah 957100994.

Pada baris 3, adalah cara untuk menampilkan nilai nama dari mahasiswa dengan primary key 957100994.

Berikut adalah contoh dari keluaran baris ke-3 :

{Konsumsi WCF Data Service pada Windows Phone}

Langkah awal adalah dengan menambahkan Service Reference seperti yang telah dilakukan pada bahasan web service sebelumnya. Pada contoh aplikasi berikut adalah menampilkan daftar mahasiswa dan ada fitur pencarian berasarkan NIM.

Berikut adalah kode dari file MainPage.xaml :

    <phone:PhoneApplicationPage 

        x:Class="UnpasWP7WCF.MainPage"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

        xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

        mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"

        FontFamily="{StaticResource PhoneFontFamilyNormal}"

        FontSize="{StaticResource PhoneFontSizeNormal}"

        Foreground="{StaticResource PhoneForegroundBrush}"

        SupportedOrientations="Portrait" Orientation="Portrait"

        shell:SystemTray.IsVisible="True">

        <!--LayoutRoot is the root grid where all page content is placed-->

        <Grid x:Name="LayoutRoot" Background="Transparent">

            <Grid.RowDefinitions>

                <RowDefinition Height="Auto"/>

                <RowDefinition Height="*"/>

            </Grid.RowDefinitions>

            <!--TitlePanel contains the name of the application and page title-->

            <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">

                <TextBlock x:Name="ApplicationTitle" Text="WCF Data Service App" Style="{StaticResource PhoneTextNormalStyle}"/>

                <TextBlock x:Name="PageTitle" Text="Unpas" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

            </StackPanel>

            <!--ContentPanel - place additional content here-->

            <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

                <TextBox Height="72" HorizontalAlignment="Left" Margin="0,6,0,0" Name="textBox_NIM" VerticalAlignment="Top" Width="284" />

                <Button Content="View" Height="72" HorizontalAlignment="Left" Margin="290,6,0,0" Name="button1" VerticalAlignment="Top" Width="160" Click="button1_Click" />

                <ListBox Height="503" HorizontalAlignment="Left" Margin="10,84,0,0" Name="listBox1" VerticalAlignment="Top" Width="460" >

                    <ListBox.ItemTemplate>

                        <DataTemplate>

                            <StackPanel Margin="0,0,0,17" Width="432">

                                <TextBlock Text="{Binding Path=NIM}" TextWrapping="NoWrap" 

                                           Style="{StaticResource PhoneTextExtraLargeStyle}"/>

                                <TextBlock Text="{Binding Path=Nama}" TextWrapping="NoWrap" 

                                           Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>

                            </StackPanel>

                        </DataTemplate>

                    </ListBox.ItemTemplate>

                </ListBox>

            </Grid>

        </Grid>

    </phone:PhoneApplicationPage>

Dan berikut adalah kode dari file MainPage.xaml.cs :

       1: using System;

       2: using System.Collections.Generic;

       3: using System.Linq;

       4: using System.Net;

       5: using System.Windows;

       6: using System.Windows.Controls;

       7: using System.Windows.Documents;

       8: using System.Windows.Input;

       9: using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using Microsoft.Phone.Controls;

  

using System.Data.Services.Client;

using UnpasWP7WCF.UnpasWCF;

  

namespace UnpasWP7WCF

{

    public partial class MainPage : PhoneApplicationPage

    {

        private NORTHWNDEntities context;

        private readonly Uri northwindUri = new Uri("http://localhost:1490/UnpasWCF/UnpasWcfDataService.svc/");

        private DataServiceCollection<Mahasiswa> mhs;

  

  

        // Constructor

        public MainPage()

        {

            InitializeComponent();

        }

  

        private void button1_Click(object sender, RoutedEventArgs e)

        {

            context = new NORTHWNDEntities(northwindUri);

            mhs = new DataServiceCollection<Mahasiswa>(context);

  

            var query = from mahasiswa in context.Mahasiswas select mahasiswa;

            if (!string.IsNullOrEmpty(textBox_NIM.Text))

            {

                query = from mahasiswa in context.Mahasiswas where mahasiswa.NIM.Equals(textBox_NIM.Text) select mahasiswa;

            }

  

            mhs.LoadCompleted += new EventHandler<LoadCompletedEventArgs>(mahasiswa_LoadCompleted);

            mhs.LoadAsync(query);

  

        }

  

        void mahasiswa_LoadCompleted(object sender, LoadCompletedEventArgs e)

        {

            if (e.Error == null)

            {

                listBox1.ItemsSource = mhs;

            }

            else

            {

                MessageBox.Show(string.Format("An error has occurred: {0}", e.Error.Message));

            }

        }

    }

}

Pada baris ke-22 dapat dilihat terdapat alamat dari service yang akan di akses.

Berikut ini adalah hasil dari aplikasi sederhana ini :

Semoga posting ini bermanfaat, Selamat ber akhir pekan yang panjang, dan selamat merayakan Imlek

Share this post: | | | |

How does Web Technology help Mobile App Development?

reyza — Sun, 22 Jan 2012 07:19:00 GMT

Sabtu, Tanggal 14 Januari 2012 telah diadakan Seminar Microsoft Technology Update 4.0 di auditorium Politeknik Pos Indonesia. Pada seminar ini diisi oleh pembicara sebagai berikut :

Bobby Zulkarnaen, MVP dengan materi Windows Server 2008.
Puja Pramudya, MVP dengan materi Windows Phone Silverlight.
Andri Mirandi, Windows Phone with XNA Game Studio.
M Reza Faisal, MVP dengan materi How does Web Technology help Mobile App Development.
Billy Riantono, Introduction MSDNAA dan MSP Poltekpos.
Bambang F. Indarto, MVP dengan materi Office 2010.

Pada kesempatan ini saya membawakan materi dengan title “How does Web Technology help Mobile App Development?”.

Diterangkan bagaimana teknologi web dapat membantu untuk pembuatan aplikasi mobile, yaitu dengan menyiapkan layanan-layanan pada web server yang dapat diakses oleh aplikasi mobile. Adapun skenario yang dapat dilakukan adalah sebagai berikut :

Terdapat 3 demo yang diperlihatkan pada kesempatan ini yaitu :

{Web Service}

Pembuatan web service dengan bantuan Visual Studio dengan mudah dan cepat.

{WCF Data Service}

Selanjutnya juga didemokan pembuatan service dengan memanfaatkan WCF Data Service.

{Screen Scraping with HTML Agility Pack}

Yang terakhir adalah melakukan screen scaping dengan bantuan HTML Agility Pack dengan skenario sebagai berikut.

Saat ini HTML Agility Pack tersedia untuk media mobile dan lainnya. Untuk informasi lebih lanjut tentang HTML Agility Pack dapat berkunjung ke posting berikut ini Screen Scraping - “Mencuri” Data Website dengan Elegan.

Acara ini sendiri dihadiri oleh sekitar lebih 75 mahasiswa baik dari Politeknik Pos sendiri atau dari luar.

Share this post: | | | |

PHP Manager for IIS

reyza — Wed, 11 Jan 2012 16:36:08 GMT

Q : Kenapa harus bahas IIS?

A : Ini karena perkembangan status MVP yang awalnya ASP.NET / ASP –> ASP.NET (tanpa ASP, karena ASP classing mungkin dianggap sudah wafat) –> ASP.NET / IIS (ada tambahan kewajiban baru untuk “bisi” IIS juga).

Pertanyaan lain…

Q : Kenapa PHP ?

A : Karena memang platform ini banyak digunakan untuk mengembangkan aplikasi web saat ini. Dan platform ini terdapat pada platform berbasis UNIX maupun Windows.

Saat ini PHP dapat kita dampingkan dengan web server Apache, sering kita dengar XAMPP sebagai salah satu paket komplit dengan item Apache sebagai web server, MySQL sebagai database server, FileZilla sebagai ftp server dan Mercury sebagai mail server dengan control panel yang telah disiapkan XAMPP untuk melakukan kontrol item-item tersebut. Selain itu XAMPP memungkinkan pengguna memilih versi PHP yang diinginkan dengan mudah.

Pada posting ini akan kita coba PHP Manager for IIS yang diharapkan dapat membantu pengguna platform berbasis Windows untuk mengkonfigurasi PHP pada web server IIS dengan mudah. Untuk mendapatkan PHP Manager for IIS dapat dikunjungi http://phpmanager.codeplex.com/, sampai saat ini PHP Manager for IIS telah mencapai versi 1.2 dengan update terakhir pada tanggal 27 Juni 2011. Silakan pilih ingin menggunakan versi 32bit atau 64bit.

{PHP Setup}

Setelah file PHPManagerForIIS-1.2.0-x64.msi (64bit) diunduh dan diinstall maka silakan buka IIS Manager dari Administrative Tools dan diharapkan akan menemui fitur PHP Manager seperti pada gambar di bawah ini.

Dan berikut adalah antarmuka dari PHP Manager ini.

Pastikan IIS telah support CGI sebelum melakukan Langkah pertama yaitu melakukan register PHP. Klik Register new PHP version untuk menentukan lokasi dari file php-cgi.exe.

Kita dapat melakukan Register new PHP version lebih dari satu kali dengan versi PHP yang berbeda tentunya. Setelah proses register berhasil dilakukan maka secara otomatis link button pada antarmuka ini menjadi “hidup” dan dapat diklik. Begitu juga informasi mengenai versi PHP yang aktif juga ditampilkan, seperti pada gambar berikut ini.

Bila versi PHP yang diregister lebih dari satu maka dengan mudah kita dapat memilih versi mana yang ingin di aktifkan dengan memilih tombol Change PHP version.

Setelah PHP berhasil diregister maka untuk memastikan PHP telah “berjalan” dengan baik maka biasanya developer akan membuat file *.php dan menuliskan fungsi <? phpinfo(); ?> didalamnya. Dengan PHP Manager for IIS hal tersebut sudah difasilitasi dengan mengklik tombol Check phpinfo() dan hasilnya dapat dilihat langsung seperti berikut.

{PHP Settings}

Pada bagian ini terdapat setting yang berhubungan dengan php.ini dan setting pengelolaan log. Untuk mengelola atribut dan value pada php.ini dipermudah dengan bantuan fitur dengan mengklik tombol Manage all settings.

Atribut dan value yang kita dilihat di atas adalah berdasarkan file php.ini. Dengan fitur ini maka pengguna akan dengan mudah mengganti nilai atribut dengan mudah tanpa perlu mengedit file php.ini secara langsung.

Fitur lain adalah melakukan konfigurasi error reporting dengan cara yang dapat dilihat pada gambar di bawah ini.

{PHP Extensions}

Untuk mengelola extension pun sangat mudah. Pada fitur PHP Extensions ini pengguna akan dapat mudah melihat mana saja extension yang enabled dan mana yang disabled. Dan dengan mudah pula mengubah status extension yang diinginkan menjadi enabled atau sebaliknya dengan cara klik kanan pada extension yang diinginkan kemudian pilih status yang diinginkan.

Untuk menambah extension pun sangat mudah cukup dengan memilih tombol Add an extension, kemudian pilih lokasi fil e*.dll yang merupakan extension yang akan ditambahkan.

Mudah bukan? Selamat mencoba dan selamat berakhir pekan.

Share this post: | | | |

[ASP.NET] The latest Release of AJAX Control Toolkit is November 2011!

reyza — Wed, 11 Jan 2012 16:33:05 GMT

Setelah sekian lama akhirnya AJAX Control Toolkit kembali hadir dengan update terbaru dengan beberapa fitur baru dan perbaikan fitur yang telah ada. Sebelum membahas fitur-fitur tersebut, berikut adalah beberapa informasi yang mungkin diperlukan pagi rekan yang baru saja memulai menggunakan AJAX Control Toolkit yang biasa disingkat dengan ACT.

{Dimana…dimana…dimana…}

Q : Dimana mendapat ACT?

A : Silakan berkunjung ke alamat berikut : http://ajaxcontroltoolkit.codeplex.com

Jangan khawatir terdapat ACT untuk .NET 4.0 dan .NET 3.5.

{Bagaimana…bagaimana…bagaimana}

Bagaimana cara menggunakannya? Satu hal yang harus diingat, tempat projectnya adalah bertipe website atau webapplication. Jangan gunakan library ini untuk template project Silverlight, WP7 atau WPF. Pada contoh di bawah ini saya akan menggunakan template project Web Site. Setelah sebuah Web Site dibuat jangan lupa juga untuk menambahkan ASP.NET Folder –> Bin sebagai rumah dari AjaxControlToolkit.dll yang didapat dari link download di atas.

Setelah itu tinggal tambahkan “sesuatu” pada web.config agar pada halaman ASPX control-control ACT dapat langsung dinikmati tanpa perlu pendaftaran prefix pada setiap halaman. Berikut adalah baris-baris yang dapat ditambahkan :

   1:  <pages>

   2:    <controls>

   3:      <add tagPrefix="ajaxToolkit" namespace="AjaxControlToolkit" assembly="AjaxControlToolkit"/>

   4:    </controls>

   5:  </pages>

Contoh di atas adalah untuk web.config pada ASP.NET 4.0, sedangkan pada ASP.NET 3.5 biasanya cukup menambahkan baris ke-3 saja.

{Hello World dengan ACT}

Sekarang kita akan membuktikan bawah ACT sudah dapat digunakan dengan lancar pada halaman ASPX. Pembutikan pertama adalah sudah terlihat intelisense seperti ini pada editor ASPX.

Selanjutkan kita gunakan satu control dan kita lihat apakah bisa terlihat saat page ASPX di publish pada web browser, berikut contoh dari control ACT yang digunakan, mudah dan menyenangkan, yaitu Twitter Control :)

   1:  <body>

   2:      <form id="form1" runat="server">

   3:      <div>

   4:          <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">

   5:          </ajaxToolkit:ToolkitScriptManager>

   6:          <ajaxtoolkit:twitter ScreenName="mrezafaisal" Mode="Profile" runat="server"></ajaxtoolkit:twitter>

   7:      </div>

   8:      </form>

   9:  </body>

Gampang bukan?

{Fitur baru dan belum pernah dibahas}

Control Twitter di atas adalah control yang baru saya penulis lihat setelah melihat sample dari ACT (maklum sudah lama cek fitur terbaru ACT). Fitur-fitur baru dan baru dilihat lainnya adalah :

Gravatar (baru liat).
Baloon Popup (update November 2011).
Penambahan kemampuan pada control Tabs (update November 2011).

Gravatar

Gravatar adalah “Globally Recognized Avatar” dari gravatar.com yang fungsinya untuk menampilkan icon avatar pada halaman website. Penggunaannya sederhana dan mudah cukup seperti berikut.

   1:  <body>

   2:      <form id="form1" runat="server">

   3:      <div>

   4:          <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">

   5:          </ajaxToolkit:ToolkitScriptManager>

   6:          <ajaxToolkit:Gravatar ID="Gravatar1" Email="reza.faisal@gmail.com" Size="100" Rating="R" runat="server" />

   7:      </div>

   8:      </form>

   9:  </body>

Bila email kita sudah terdaftar dan sudah memiliki icon avatar maka secara otomatis akan dapat dilihat icon avatar tersebut.

Baloon Popup

Berikut adalah control baru yang bisa ditemui pada ACT update bulan November 2011 ini. Control ini berfungsi untuk memberikan keterangan pada control input ASP.NET saat mouse berada pada control tersebut seperti pada gambar berikut ini.

Untuk membuat hal ini terjadi kita perlu 2 kontrol pendahuluan, yaitu control Textbox sebagai control yang akan diberika keterangan dengan Baloon Popup, dan control Panel sebagai control yang untuk menulis pesan. Berikut adalah contohnya :

   1:  <body>

   2:      <form id="form1" runat="server">

   3:      <div>

   4:          <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">

   5:          </ajaxToolkit:ToolkitScriptManager>

6:

   7:          <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

8:

   9:          <asp:Panel ID="Panel1" runat="server">

  10:              Ini text box.

  11:          </asp:Panel>

12:

  13:      </div>

  14:      </form>

  15:  </body>

Setelah kedua control tersebut ada, maka kita tinggal tambahkan control Baloon Popup seperti berikut ini :

   1:  <ajaxToolkit:BalloonPopupExtender ID="BalloonPopupExtender1"

   2:  TargetControlID="TextBox1"

   3:  BalloonPopupControlID="Panel1"

   4:  Position="BottomRight"

   5:  BalloonStyle="Rectangle"

   6:  BalloonSize="Small"

   7:  UseShadow="true"

   8:  DisplayOnMouseOver="true"

   9:  DisplayOnClick="true"

  10:  runat="server" />

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

Yang perlu diperhatikan adalah pada baris ke-2 yang menunjuk ID dari control Textbox yang akan diberi keterangan, dan pada baris ke-3 yaitu panel yang akan ditampilkan sebagai pesan dalam bentuk balon. Kemudian ada 3 style balon yang dapat digunakan yaitu Rectangle, Cloud dan Custom jika ingin bentuk yang lain. Sedangkan pada baris ke-8 dan ke-9 adalah prilaku yang ditentukan untuk membuat pesan dimunculkan.

Tabs

Ada 3 hal baru yang akan kita temui pada control Tabs, yaitu :

Tab Vertikal.
Loading content tab ketika tab diaktifkan.
Mengaktifkan tab dengan menggunakan navigasi dari keyboard.

Untuk menggunakan fitur tambahan pertama cukup dengan menggunakan atribut UserVerticalStripPlacement seperti contoh berikut :

   1:  <ajaxToolkit:TabContainer ID="TabContainer1"

   2:      Height="100"

   3:      UseVerticalStripPlacement="true"

   4:      runat="server">

   5:      <ajaxToolkit:TabPanel runat="server">

   6:          <HeaderTemplate>Tab 1</HeaderTemplate>

   7:          <ContentTemplate>Isi tab 1</ContentTemplate>

   8:      </ajaxToolkit:TabPanel>

   9:      <ajaxToolkit:TabPanel runat="server">

  10:          <HeaderTemplate>Tab 2</HeaderTemplate>

  11:          <ContentTemplate>Isi tab 2</ContentTemplate>

  12:      </ajaxToolkit:TabPanel>

  13:  </ajaxToolkit:TabContainer>

Untuk fitur load content on demand atau ketika tab diaktifkan dapat dilihat pada contoh di bawah ini.

   1:  <ajaxToolkit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" Height="128px"

   2:      Width="332px" OnDemand="true">

   3:      <ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="Tab 1" OnDemandMode="None">

   4:          <ContentTemplate>

   5:              <%= DateTime.Now.ToString("T") %>

   6:          </ContentTemplate>

   7:      </ajaxToolkit:TabPanel>

   8:      <ajaxToolkit:TabPanel runat="server" HeaderText="Tab 2" ID="TabPanel2" OnDemandMode="Once">

   9:          <ContentTemplate>

  10:              <%= DateTime.Now.ToString("T") %>

  11:          </ContentTemplate>

  12:      </ajaxToolkit:TabPanel>

  13:      <ajaxToolkit:TabPanel ID="TabPanel3" runat="server" HeaderText="Tab 3" OnDemandMode="Always">

  14:          <ContentTemplate>

  15:              <%= DateTime.Now.ToString("T") %>

  16:          </ContentTemplate>

  17:      </ajaxToolkit:TabPanel>

  18:  </ajaxToolkit:TabContainer>.csharpcode, .csharpcode pre
{
	font-size: small;
	color: black;
	font-family: consolas, "Courier New", courier, monospace;
	background-color: #ffffff;
	/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt 
{
	background-color: #f4f4f4;
	width: 100%;
	margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Untuk menggunakan fitur ini maka cukup gunakan atribut OnDemand=”true” seperti pada baris ke-2. Pada contoh di atas terdapat 3 tab seperti berikut :

Pada masing-masing tab terdapat penggunaan atribut OnDemandMode, dengan nilai berikut :

None, mode ini digunakan apabila kita ingin content tidak mengikutin “aturan OnDemand” artinya content dari tab ini akan dirender saat halaman pertama kali diload.
Once, pada tab kedua digunakan nilai OnDemandMode=”Once” artinya content dari tab ini hanya sekali saja dirender saat tab diaktifkan (content belum dirender saat halaman pertama kali diload).
Always, tab ketiga ini memungkinkan content selalu dirender bila tab diaktifkan.

Agar semakin jelas bisa dilihat hasilnya di bawah ini.

Ini adalah nilai pada content tab 1 ketika halaman pertama kali di load. Kemudian kita mengaktifkan tab ke-2, dipastikan nilai jam pada content tab ini akan berbeda dan lebih baru dari tab ke-1.

Begitu juga tab ke-3 akan lebih baru lagi jika dibanding dengan tab ke-1 dan ke-2. Bedanya tab ke-1 dan ke-2 contentnya tidak akan berubah lagi, sedangkan tab ke-3 akan terus berubah saat tab tersebut diaktifkan.

Selanjutnya adalah fitur navigasi tab dengan keyboard, dengan menggunakan tombol panah kiri kanan atau HOME dan END.

Sekian dahulu bahasan tentang ACT, semoga ada manfaatnya.

Share this post: | | | |

Seminar dan Pelatihan Teknologi Informasi di Majalengka

reyza — Fri, 18 Nov 2011 12:29:08 GMT

Ini posting yang sangat terlambat, karena berbagai kesibukan dan terpaan smash berkali-kali maka laporan kegiatan di Majalengka ini baru bisa ditulis sekarang :)

Acara dihelat tanggal 29 Oktober 2011, dan diikuti oleh lebih 100 siswa dan siswi SMK Negeri 1 Lemahsugih, Majalengka. Dengan materi :

Berkembang bersama komunitas oleh Dani R. Taufani, MSP Leader Regional Jawa Barat.
Building Web Application with ASP.NET oleh M Reza Faisal.
Building Apps in Windows 8 oleh M. Yusuf, MSP.
Building Windows Phone 7 Apps oleh Billy Riantono, MSP.

Berikut adalah beberapa laporan pandangan mata saat acara berlangsung.

Building Web Application with ASP.NET oleh M Reza Faisal.

Demo pembuatan program yang dilakukan langsung oleh peserta, untuk membuktikan bahwa membuat aplikasi web sangat mudah dilakukan dengan ASP.NET dan VS2010.

Dany yang tengah mempersiapkan slide setelah didera prahara perjalangan selama 3 jam bandung-majalengka.

Peserta yang mengikuti acara ini.

Sedangkan berikut adalah materi yang saya berikan saat acara ini dihelat.

Demo yang dilakukan adalah :

Control Standard pada ASP.NET.
Control Login.
Control Data.
Dynamic Data.
Navigation.

Untuk slide lengkapnya dapat dilihat di bawah ini.

Sekian laporan kegiatan kali ini. Selamat berakhir pekan.

Share this post: | | | |

Windows 8 : Si Hijau yang ramping

reyza — Sun, 18 Sep 2011 06:22:00 GMT

ISO Windows 8 edisi developer telah dapat diunduh dan diinstall pada mesin yang diinginkan (http://msdn.microsoft.com/en-us/windows/home/). Ada beberapa edisi yang bisa kita unduh, sesuai dengan keperluan, dan yang lebih penting adalah sesuai dengan bandwidth yang ada miliki :)

Ada 3 'versi' ISO yang dapat kita download sesuai dengan ukurannya :

4,8GB, Windows Developer Preview 64-bit yang didalamnya telah berisi developer tool. Adapun developer tool tersebut adalah Visual Studio 2011 Express Edition yang didalamnya 'hanya' berisi template untuk pengembangan app di Windows 8.
3,6GB, Windows Developer Preview 64-bit tanpa tool developer.
2,8GB, Windows Developer Preview 32-bit.

Nah silakan dipilih sesuai keperluan anda, terlebih lagi bandwidth anda di http://msdn.microsoft.com/en-us/windows/home/ :)

Disini akan digunakan Windows Developer Preview 64-bit with developer tool, maklum bandwidth lagi bersahabat. Untuk installasi sengaja dilakuan di atas VM, dan kebetulan VM yang dipilih adalah VMware Fusion 4 di atas mesin Mac gw :) Awalnya ingin menggunakan Parallel Desktop, tapi ada sedikit kegagalan 'masalah lisensi' :) Proses installasi berjalan lancar dan cepat, tidak sampai menghabiskan waktu 15 menit (ingin bilang sekitar 10menit, tapi kawatir di anggap lebay). Ini kesan pertama yang baik, kalau sebelumnya bersama Windows 7, waktu installnya lumayan lama 20-30 menit.

Kali ini akan diceritakan pengalaman setelah berkenalan dengan Windows 8 selama beberapa hari secara default, tanpa custom konfigurasi.

{Antarmuka}
Berikut adalah antarmuka Windows 8 saat desktop dilock.

Untuk unlock cukup dengan mengeser layar ke atas, pengalaman seperti bersama Windows Phone 7 dan saat layar lock terbuka kita akan bertemu dengan form login warna hijau. Warna yang menyejukkan. Pada layar ini terdapat daftar user yang dapat dipilih sebagai user untuk login. Dan pada sisi kanan bawah terdapat tombol untuk melakukan shutdown dan restart.

Setelah login berhasil maka mata kita akan bertemu dengan antarmuka Metro, ala Windows Phone 7 :)

Tidak ada tombol logo "Windows" lagi di sisi kiri bawah, walau keberadaannya tidak benar-benar menghilang. Ada dua tipe aplikasi yang mempunyai antarmuka yang berbeda, maksudnya ada tipe aplikasi yang saat jalan mempunyai antarmuka seperti pada Windows Phone 7 dan bergaya Metro. Selain itu juga ada juga aplikasi yang ketika jalan seperti layaknya antarmuka yang sering kita temu pada versi Windows sebelumnya.

Sebagai contoh bila dijalankan Internet Explorer dari layar Metro, maka akan prilaku dan antarmuka seperti aplikasi pada Windows Phone 7, kalau tidak percaya bisa lihat pada gambar berikut :) Tidak ada tab untuk membuka halaman baru seperti pada Internet Explorer yang sering kita temui, seperti pada gambar di bawah ini.

Internet Explorer di bawah ini dijalankan dari shortcut yang terdapat pada Desktop.

Antarmuka Desktop akan membuat kita terkenang pada antarmuka Windows 7 atau sebelumnya, seperti gambar di atas. Ada tombol "Windows" pada sisi kiri bawah, tapi fungsinya akan berbeda dengan tombol yang sebelumnya telah kita kenal. Kalau tombol itu diklik kita akan diantarkan pada halaman Metro utama.

Sebagai informasi Internet Explorer yang terdapat pada Windows 8 adalah Internet Explorer 10, jadi wajar saat membuka Flickr, masih belum dianggap sebagai Internet Explorer :)

Pada

{Tipe Aplikasi}
Seperti yang telah disebutkan di atas, ada dua tipe aplikasi (ini masih menurut penerawangan penulis). Aplikasi Metro (ala Windows Phone 7) kalau dijalankan prilakunya memang berbeda dari segi life cycle. Aplikasinya hidup "hanya saat ada dilayar saja", tp kalau kita berganti layar maka kehidupannya akan berhenti. Aplikasi ini juga tidak akan terlihat saat kita menekan tombol "ALT+Tab" untuk berpindah ke aplikasi yang sedang jalan.

Untuk aplikasi non Aplikasi Metro, maka ketika dijalankan akan berpindah ke desktop dan aplikasi tersebut akan dapat dilihat saat tombol "ALT+Tab" ditekan. Berikut adalah beberapa shortcut aplikasi tipe ini yang dapat kita temui pada layar utama Metro. Berikut adalah beberapa aplikasi yang akan berpindah ke desktop saat dijalankan (kecuali Store, Control Panel dan //build/).

#ralat

Setelah dicoba lagi, ternyata aplikasi Metro style ini sifatnya tidak seperti yang telah ditulis di atas. Sifat dan life cycle aplikasi metro style ini juga seperti app pada umumnya. Artinya baik app metro style atau yang bukan dapat dilihat di daftar multitasking saat tombol ALT+Tab ditekan. Dan aplikasi metro style tetap dapat hidup walau dia sudah tidak ditampilkan dilayar, dan dengan memilih aplikasi tersebut di daftar saat tombol ALT+Tab maka aplikasi tersebut akan ditampilkan kembali :)

{Aplikasi}
Pada Windows 8, kita akan mendapatkan aplikasi Metro yang biasa kita gunakan sehari-hari. Seperti aplikasi untuk social network seperti Socialite untuk koneksi ke Facebook atau Tweet@rama untuk koneksi ke Twitter. Juga ada picstream untuk koneksi ke Flickr. Berikut adlah antarmuka dari Socialite.

Selain itu jug terdapat game atau aplikasi entertainment yang lain seperti berikut ini.

Ada beberapa aplikasi yang menarik, salah satunya adalah memories, your life book, aplikasi untuk mengelola/album gambar/video. Pada platform lain pasti sudah perah bertemu aplikasi sejenis :)

Sepertinya sekian dulu laporan pandangan mata hasil pertemuan dengan Windows 8. Selamat mencoba dan selamat berakhir pekan.

Share this post: | | | |

Re-cover : Membangun Aplikasi Web dengan Mudah dan Cepat

reyza — Wed, 08 Jun 2011 06:45:00 GMT

Ebook ini bukan ebook baru, tapi hanya melewati proses recover, penggantian judul yang sebelumnya adalah Hand on Lab : ASP.NET dan juga re-upload karena link terdahulu mengalami kecelakaan sehingga filenya juga ikut ikut lenyap :)

Cover ebook ini bertuliskan ASP.NET 4.0, karena memang diniatkan ada perubahan dari edisi terdahulu yang masih membahas ASP.NET 3.5, tetapi ternyata belum selesai seluruhnya. Jadi pada ebook ini ada sedikit membahas VS2010 dan ASP.NET 4.0 (sangat sedikit) dan tentunya pembahasan sama persis pada edisi sebelumnya.

Bagi yang baru melihat ebook ini mungkin berikut adalah informasi jika dilihat dari daftar isi ebook ini :

Pendahuluan.
NET 3.5 & Visual Studio 2008.
Pengenalan C#.
ASP.NET.
ASP.NET dan Database.
Design Antarmuka.
Resource & Globalization.
Validasi.
ASP.NET Ajax dan Ajax Control Toolkit.
Membership, Profile dan Navigasi.
Reporting, khusus untuk materi Reporting ditulis oleh saudar Iman Harmaen.

Ebook ini awalnya adalah modul pelatihan yang saya gunakan untuk training para developer ASP.NET. Sehingga isinya sesuai dengan langkah-langkah yang biasa ditemui pada suatu training/pelatihan pemrograman.

Ebook ini bisa di download di sini (Geeks Portal) atau di sini (Live).

Semoga berguna.

Share this post: | | | |

Screen Scraping : “Mencuri” Data Website dengan Elegan

reyza — Fri, 03 Jun 2011 14:45:30 GMT

Pada sebuah event komunitas gw mendengar istilah “mencuri” dari untuk menggantikan kata kerja “mengambil” data pada suatu site di internet. Seperti “mencuri” pada umumnya ada dua cara yang bisa digunakan, yaitu :

1. Dengan Otot.

2. Dengan Otak.

Di internet kita dapat melihat data dapat diakses dengan mudah dengan browser, dan berikut ini contoh data yang mungkin kita lihat.

Atau seperti berikut :

Untuk aksi pencurian dengan otot maka langkahnya sangat gampang, cukup lakukan aksi blok data kemudian copy dan paste ke tempat yang diinginkan. Misalnya pada notepad, kemudian masih dengan bantuan otot, lakukan pembersihan data untuk mengambil item-item yang diperlukan. Misal pada contoh gambar di atas, item yang penting untuk diambil seperti RCTI, 01 Juni 2011 dan nama acara TV dan jam tayangnya. Sedangkan pada data gambar di atas, maka yang diperlukan selain data yang berhubungan dengan gambar juga gambarnya sendiri. Untuk mendapatkan gambarnya maka cukup perintahkan otot untuk melakukan aksi klik kanan dan save as image bersangkutan, satu per satu :) Setelah data tersebut di dapatkan maka tinggal lakukan yg diinginkan, masih menggunakan otot, mungkin bisa dilanjutkan dengan menyalin data tersebut ke database.

Kalau otot-otot telah cape, maka bisa dipikirkan untuk mencuri dengan cara yang lebih elegan dan dan otot tidak perlu digunakan lagi (agar kalori tetap stabil dan gemuk tetap bertahan). Salah satu caranya adalah dengan melakukan Screen Scraping.

Screen Scraping, apa sih itu?

Mungkin paparan ini akan “sedikit” menjawab. Sebagai contoh data dari acara TV di atas tidak lain adalah bagian dari sebuah halaman HTML, dan kira-kira berikut adalah kode HTML dari potongan data di atas.

        1: <div class='post' id='post'>

       2: <a name='4306621538310684552'></a>

       3: <h2 class='title'>

       4: <a href='http://www.televisi-indonesia.com/2011/06/rcti-rabu-01-juni-2011.html'>RCTI, Rabu 01 Juni 2011</a>

       5: </h2>

       6: <div class='post-date'>

       7: <p>

       8: </p>

       9: </div>

<div class='post-info clearfix'>

<p class='author alignleft'>

Posted by

  

<span class='fn'>akbarri</span>

</p>

<p class='comments alignright'>

<a class='comments' href='http://www.televisi-indonesia.com/2011/06/rcti-rabu-01-juni-2011.html#comments' onclick=''>0

comments</a>

</p>

</div>

<div class='post-content clearfix'>

<p>

00:30 - 02:30 BOM:POLICE STORY 4<br />

02:30 - 03:00 SEPUTAR INDONESIA MALAM<br />

03:00 - 04:00 HIGHLIGHT UEFA CHAMPIONS LEAGUE<br />

04:00 - 04:30 ASSALAMU'ALAIKUM USTADZ<br />

04:30 - 06:00 SEPUTAR INDONESIA PAGI<br />

06:00 - 07:30 GO SPOT<br />07:30 - 11:00 DAHSYAT<br />

11:00 - 12:00 INFOTAINMENT INTENS<br />

12:00 - 12:30 SEPUTAR INDONESIA SIANG<br />

12:30 - 13:00 SEPUTAR PERISTIWA<br />

13:00 - 15:00 SINEMA SIANG: CINTA HIGIENIS<br />

15:00 - 16:00 CEK & RICEK<br />

16:00 - 17:00 BEDAH RUMAH<br />

17:00 - 17:30 SEPUTAR INDONESIA<br />

17:30 - 18:30 SILET<br />

18:30 - 19:30 MEGA SINETRON:PUTRI YANG DITUKAR<br />

19:30 - 21:00 MEGA SINETRON: ANUGERAH<br />

21:00 - 22:30 MEGA SINETRON : KASIH DAN CINTA<br />

22:30 - 00:30 MEGA SINEMA : PENGAMEN CINTA KACANGAN

<div style='clear: both;'></div>

</p>

</div>

Dapat dilihat bawah data berada di dalam tag div dengan atribut class= post dan id=post yang terlihat pada baris ke-1 dan di akhiri pada baris ke-42. Sedangkan pada baris ke-3 sampai baris ke-5 dapat dilihat title dari data tersebut yang berisi “RCTI, Rabu 01 Juni 2011”. Sedangkan data acara TV-nya berada diantara tag div dengan atribut class=’post-content clearfix’.

Nah salah satu dari banyak aksi Screen Scraping adalah mengambil data berdasarkan tag HTML dengan aturan sesuai identitas yang telah disebutkan di atas atau yang diinginkan. Atribut seperti nama pada atribut class atau pada atribut id dapat dijadikan penanda untuk menemukan data yang diinginkan.

Jadi bisa diartikan Screen Scraping adalah teknik yang dapat digunakan untuk “mengekstrak” data yang diinginkan pada suatu halaman web (HTML), walau tentunya ada fungsi lain dari Screen Scraping. CMIIW.

Di posting ini akan dicoba melakuan Screen Scraping dengan class library yang sudah ada dan menampilkan hasilnya pada suatu halaman web yang akan kita buat sendiri. Class library yang akan digunakan adalah Html Agility Pack yang dapat ditemui disini http://htmlagilitypack.codeplex.com. Setelah HtmlAgilityPack.1.4.0.zip diekstrak maka akan ditemui tiga file berikut.

Sekarang cukup lakukan penyalinan file .dll dan .xml ke folder Bin pada Web Site Project seperti berikut :

Pada gambar di atas dapat dilihat kedua file tersebut berada pada project AcaraTV.

Selanjutnya akan kita buat sebuah halaman untuk mengambil 1 posting yang ada disuatu web yg berisi daftar acara TV. Berikut kira-kira contoh yang dapat kita tulis.

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

       2:  

       3: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

       4:  

       5: <html xmlns="http://www.w3.org/1999/xhtml">

       6: <head runat="server">

       7:     <title></title>

       8: </head>

       9: <body>

      10:     <form id="form1" runat="server">

      11:     <div>

      12:         <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

      13:     </div>

      14:     </form>

      15: </body>

      16: </html>

Pada baris ke-12 dapat dilihat terdapat kontrol Label yang akan digunakan untuk menampilkan data curian ini :)

Dan pada file Default.aspx.cs

       1: using System;

       2:  

       3: using HtmlAgilityPack;

       4:  

       5: public partial class _Default : System.Web.UI.Page

       6: {

       7:     protected void Page_Load(object sender, EventArgs e)

       8:     {

       9:         HtmlWeb web = new HtmlWeb();

      10:         HtmlDocument doc = web.Load("http://www.televisi-indonesia.com");

      11:         var name = doc.DocumentNode.SelectSingleNode("//div[@id='post']").InnerHtml;

      12:         Label1.Text = name;

      13:     }

      14: }

Pada baris ke-3 dapat dilihat pendaftaran namespace HtmlAgilityPack agar class-class didalamnya dapat digunakan. Class dari namespace ini yang digunakan adalah HtmlWeb dan HtmlDocument. Pada baris ke-10 dapat dilihat bagaimana cara untuk “menunjuk” site atau page sebagai rumah target pencurian. Sedangkan pada baris-11 adalah cara untuk melakukan pencurian barang yang diinginkan, dapat dilihat bagaimana cara menunjuk area div dengan atribut id=post di baris ini. Selanjutnya pada baris ke-12 cara paling sederhana untuk menampilkan hasil curian :)

Kira-kira berikut hasilnya.

Hm, terlihat masih “kotor” karena terdapat “link-link” yang tidak enak dipandang mata dan tidak diperlukan. Kita akan coba untuk mengambil “RCTI, Kamis 02 Juni 2011” saja tanpa bisa dilik dan data jadwal acara saja. Untuk itu maka gw akan coba ganti beberapa baris kode sebelumnya dengan seperti di bawah ini.

       1: <asp:Label ID="Label_StasiunTV" runat="server" Text="Label"></asp:Label>

       2: <br />

       3: <asp:Label ID="Label_DaftarAcara" runat="server" Text="Label"></asp:Label>

Untuk mengisi kedua kontrol tersebut maka dapat dilakukan dengan cara berikut.

       1: using System;

       2:  

       3: using HtmlAgilityPack;

       4:  

       5: public partial class _Default : System.Web.UI.Page

       6: {

       7:     protected void Page_Load(object sender, EventArgs e)

       8:     {

       9:         HtmlWeb web = new HtmlWeb();

      10:         HtmlDocument doc = web.Load("http://www.televisi-indonesia.com");

      11:         var stasiunTV = doc.DocumentNode.SelectSingleNode("//div[@id='post']//h2[@class='title']//a").InnerHtml;

      12:         var daftarAcara = doc.DocumentNode.SelectSingleNode("//div[@id='post']//div[@class='post-content clearfix']//p").InnerHtml;

      13:  

      14:         Label_StasiunTV.Text = stasiunTV;

      15:         Label_DaftarAcara.Text = daftarAcara;

      16:     }

      17: }

Dan berikut hasilnya :

Aaah lumayan rapi sekarang. Pada baris ke-11 kita dapati pola seperti berikut “//div[@id='post']//h2[@class='title']//a” yang artinya kira akan mengambil sesuatu yang berada pada :

1. Diantara tag a (<a>…</a>)

2. Dimana tag a tersebut berada di dalam tag h2 dengan atribut class=title (<h2 class=’title’><a>…</a></h2>).

3. Yang mana tag h2 tersebut berada di dalam tag div dengan atribut id=post (<div id=’post’><h2 class=’title’><a>…</a></h2></div>).

Begitu juga untuk baris ke-12.

Kalau di atas dicontohkan hanya berfungsi untuk mengambil 1 item pada 1 area saja, sekarang kita akan coba untuk mengambil lebih dari 1 item pada area yang mempunyai pola yang sama. Perlu diketahui bahwa pada halaman site tersebut tidak hanya ada data jadwal dari stasiun RCTI saja tapi juga ada dari stasiun lain. Dan setiap data dari stasiun lain tersebut ditulis dengan cara yang sama seperti data pada stasiun RCTI.

Berikut adalah halaman dari website yang menampilkan jadwal TV di Indonesia.

Contoh berikut akan menampilkan daftar stasiun TV, yang didapat dari title pada posting di web tersebut. Daftar stasiun TV ini nanti akan ditampilkan pada kontrol DropDownList. Berikut contoh kode-nya.

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

       2:  

       3: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

       4:  

       5: <html xmlns="http://www.w3.org/1999/xhtml">

       6: <head runat="server">

       7:     <title></title>

       8: </head>

       9: <body>

      10:     <form id="form1" runat="server">

      11:     <div>

      12:         <asp:DropDownList ID="DropDownList_StasinTV" runat="server">

      13:         </asp:DropDownList>

      14:     </div>

      15:     </form>

      16: </body>

      17: </html>

Dan berikut.

       1: using System;

       2: using System.Web.UI.WebControls;

       3:  

       4: using HtmlAgilityPack;

       5:  

       6: public partial class StasiunTV : System.Web.UI.Page

       7: {

       8:     protected void Page_Load(object sender, EventArgs e)

       9:     {

        HtmlWeb web = new HtmlWeb();

        HtmlDocument doc = web.Load("http://www.televisi-indonesia.com");

        var stasiunTVs = doc.DocumentNode.SelectNodes("//div[@id='post']//h2[@class='title']//a");

  

        if (stasiunTVs != null)

        {

            ListItemCollection items = new ListItemCollection();

  

            foreach (var stasiunTv in stasiunTVs)

            {

                string[] stasiunTVArr = stasiunTv.InnerText.Split(',');

  

                ListItem item = new ListItem();

                item.Text = stasiunTVArr[0];

                item.Value = stasiunTVArr[0];

                items.Add(item);

            }

  

            DropDownList_StasinTV.DataSource = items;

            DropDownList_StasinTV.DataTextField = "Text";

            DropDownList_StasinTV.DataValueField = "Value";

            DropDownList_StasinTV.DataBind();

        }

    }

}

Perbedaan dengan contoh sebelumnya adalah pada baris ke-12. Disini kita gunakan method SelectNodes untuk mengambil koleksi dari node yang ditentukan. Dengan begitu kita dapat “mencuri” banyak item sekaligus dengan sekali tepukan :) Setelah itu hasilnya akan ditampung pada ListItemCollection yang nanti akan di-bind ke DropDownList. Hasilnya bisa dilihat seperti gambar berikut ini.

Contoh selanjutnya adalah akan menampilkan daftar jadwal acara berdasarkan stasiun TV yang dipilih. Jadwal acara akan ditampilkan pada kontrol GridView. Berikut kodenya.

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

       2:  

       3: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

       4:  

       5: <html xmlns="http://www.w3.org/1999/xhtml">

       6: <head runat="server">

       7:     <title></title>

       8: </head>

       9: <body>

    <form id="form1" runat="server">

    <asp:ScriptManager ID="ScriptManager1" runat="server">

    </asp:ScriptManager>

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">

        <ContentTemplate>

            <div>

                Pilih Stasiun TV :

                <asp:DropDownList ID="DropDownList_StasinTV" runat="server" AutoPostBack="True" onselectedindexchanged="DropDownList_StasinTV_SelectedIndexChanged">

                </asp:DropDownList>

                <asp:UpdateProgress ID="UpdateProgress1" runat="server">

                <ProgressTemplate>Sedang mengambil data...</ProgressTemplate>

                </asp:UpdateProgress>

            </div>

            <br />

            <div>

                <asp:GridView ID="GridView_Jadwal" runat="server">

                </asp:GridView>

            </div>

        </ContentTemplate>

    </asp:UpdatePanel>

    </form>

</body>

</html>

Dan ini :

       1: using System;

       2: using System.Web.UI.WebControls;

       3:  

       4: using HtmlAgilityPack;

       5: using System.Collections;

       6:  

       7: public partial class StasiunTV : System.Web.UI.Page

       8: {

       9:     protected void Page_Load(object sender, EventArgs e)

    {

        if (!IsPostBack)

        {

            DropDownList_StasiunTV_DataBind();

            GetJadwalTVFromWeb();

        }

    }

  

    protected void GetJadwalTVFromWeb()

    {

        HtmlWeb web = new HtmlWeb();

        HtmlDocument doc = web.Load("http://www.televisi-indonesia.com");

        var data = doc.DocumentNode.SelectNodes("//div[@id='post']");

  

        if (data != null)

        {

            IList jadwalList = new ArrayList();

  

            foreach (var item in data)

            {

                string[] stasiun = item.SelectSingleNode("h2[@class='title']//a").InnerText.Split(',');

  

                if (stasiun[0].Equals(DropDownList_StasinTV.SelectedValue))

                {

                    string[] dataJadwal = item.SelectSingleNode("div[@class='post-content clearfix']//p").InnerHtml.Replace("<br>", "#").Split('#');

  

                    foreach (var jadwal in dataJadwal)

                    {

                        JadwalTV jadwalTV = new JadwalTV();

                        jadwalTV.Stasiun = stasiun[0];

                        jadwalTV.Waktu = jadwal.Substring(0, 14);

                        jadwalTV.NamaAcara = jadwal.Substring(14);

                        jadwalList.Add(jadwalTV);

                    }

                }

            }

  

            GridView_Jadwal.DataSource = jadwalList;

            GridView_Jadwal.DataBind();

        }

    }

  

    protected void DropDownList_StasiunTV_DataBind()

    {

        HtmlWeb web = new HtmlWeb();

        HtmlDocument doc = web.Load("http://www.televisi-indonesia.com");

        var stasiunTVs = doc.DocumentNode.SelectNodes("//div[@id='post']//h2[@class='title']//a");

  

        if (stasiunTVs != null)

        {

            ListItemCollection items = new ListItemCollection();

  

            foreach (var stasiunTv in stasiunTVs)

            {

                string[] stasiunTVArr = stasiunTv.InnerText.Split(',');

  

                ListItem item = new ListItem();

                item.Text = stasiunTVArr[0];

                item.Value = stasiunTVArr[0];

                items.Add(item);

            }

  

            DropDownList_StasinTV.DataSource = items;

            DropDownList_StasinTV.DataTextField = "Text";

            DropDownList_StasinTV.DataValueField = "Value";

            DropDownList_StasinTV.DataBind();

        }

    }

  

    protected void DropDownList_StasinTV_SelectedIndexChanged(object sender, EventArgs e)

    {

        GetJadwalTVFromWeb();

    }

}

  

public class JadwalTV

{

    public string Stasiun { set; get; }

    public string Waktu { set; get; }

    public string NamaAcara { set; get; }

}

Dan berikut hasilnya :

Implikasi

Pada paparan di atas hanya mencontohkan bagaimana menggunakan salah satu teknik Screen Scraping untuk mengambil data pada suatu halaman web. Data yang dapat diambil dapat ditampilkan secara langsung seperti cara di atas atau disimpan pada database dan dipublish dengan menggunakan berbagai macam nama seperti Web Service, OData atau WCF Data Service sehingga nanti dapat dikonsumsi dan dimanfaatkan oleh client seperti Silverlight atau Windows Phone 7 bahkan Symbian atau iOS. Bagian ini akan di bahas pada posting berikutnya, dengan implementasi pembuatan aplikasi mobile Jadwal Televisi Indonesia :)

Selamat menikmati liburan panjang, bagi yang mengalaminya.

Share this post: | | | |

Memperbaiki “Kesalahan” SRC pada tag IMG dengan jQuery

reyza — Mon, 30 May 2011 15:24:00 GMT

Windows Live Writer sepertinya sudah menjadi tool yang lazim digunakan untuk menulis blog dan mempublish. Kenapa? karena kemudahannya tentu saja, menulis bisa kapan saja tanpa perlu terkoneksi dengan internet terlebih dahulu, menulis sangat gampang segampang menulis di MS Word, insert gambar pun juga sangat mudah karena gambar yang “ditempelkan” pada tulisan langsung terupload ke site.

Misal site tersebut mempunyai domain “www.hahahihi.com” maka gambar yang telah disisipkan pada posting akan diubah menjadi tag HTML seperti berikut ini.

     <img src="http://www.hahahihi.com/blog/reyza/gambar123.jpg" alt="gambar" />

Dari contoh diatas dapat dilihat bahwa gambar yang disisipkan akan mempunyai lokasi yang absolute berdasarkan domain site tersebut. Tidak akan menjadi masalah bila domain site tersebut akan selalu www.hahahihi.com, bagaimana bila ternyata domain tersebut berubah menjadi www.hihihaha.web.id ? Bila hal ini terjadi, dipastikan gambar pada setiap posting blog akan menghilang, karena tidak menemukan lagi domain www.hahahihi.com.

Solusinya ada 3 cara :

User pemilih blog tinggal mengubah seluruh postingnya agar url gambar yang menggunakan domain www.hahahihi.com menjadi www.hihihaha.web.id :)
Membuat script SQL untuk masuk ke setiap record pada tabel untuk menyimpan posting blog dan bermain-main regex dan kemudian mengubah www.hahahihi.com yang ada pada tag IMG menjadi www.hihihaha.web.id.
Membuat script javascript dengan bantuan jQuery untuk mengubah www.hahahihi.com yang ada pada tag IMG menjadi www.hihihaha.web.id pada setiap halaman posting yang diakses oleh pengunjung.

Sepertinya cara ketiga lebih elegant dan lebih manusiawi, karena tidak perlu melakukan banyak pekerjaan susah dan mungkin beresiko terhadapat kesehatan data yang telah tersimpan. Cukup tiga langkah untuk membuat hal ini menjadi kenyataan :

1. Download class library jQuery dari http://jquery.com/.

2. Kemudian “daftarkan” lokasi file yang telah didownload pada langkah pertama.

<script src="http://www.hihihaha.web.id/script/jquery-1.4.1.min.js" type="text/javascript"></script>

3. Selanjutnya tinggal tambahkan baris berikut ini.

       1: $(document).ready(function() {

       2:     $("img[src^='http://www.hahahihi.com']")

       3:     .each(function() {

       4:         this.src = this.src.replace(/^http:\/\/www\.hahahihi\.com/, "http://hihihaha.web.id");

       5:     });

       6: });

Pada baris ke-1, berfungsi agar aksi didalamnya dilakukan setelah setelah content posting telah terload sempurna.

Pada baris ke-2, melakukan pengambilan seluruh objek elemen img, tetapi dengan filter bahwa hanya objek img dengan atribut yang mempunyai nilai awal http://www.hahahihi.com saja. Setelah semua objek didapat maka tinggal melakukan replace nilai pada atribut SRC agar http://www.hahahihi.com menjadi http://hihihaha.web.id seperti yang terlihat pada baris ke-4.

Share this post: | | | |

{Linq to SQL - Optimistic Concurrency} on ASP.NET

reyza — Wed, 06 Apr 2011 14:20:03 GMT

Misalnya seorang user, sebut saja berinisial MD sedang mengakses halaman berikut :

Begitu juga dengan user lain yang berinisial IR, mengkases halaman yang sama dan sedang mengedit record yang saja juga.

Bila hal tersebut di atas terjadi, dan saat salah satu user melakukan proses Update, kira apa yang terjadi ?

apakah data akan diupdate sesuai dengan user yang terakhir melakukan proses update?
apakah user yang mengklik duluan yang akan berhasil mengupdate data, sedangkan user yang kemudian mengupdate akan melakukan kegagalan?
ataukah, data akan di-merge antara data dari kedua user tersebut?

Kenapa perlu dipikirkan hal seperti di atas?

Jika kasus 1 yang dianut, maka hanya user yang terakhir yang tahu akan kebenaran data yang user tersebut inputkan telah disimpan. Sedangkan user sebelumnya akan tenang-tenang saja dan merasa data yang telah dia inputkan telah masuk, padahal data tersebut sudah terubah oleh user terakhir. Secara logika mungkin benar, tetapi secara etika terhadap user pengguna mungkin kurang, karena user sebelum yang terakhir jadi korban…korban “tenang-tenang saja” padahal data dia telah berubah.
Sedangkan kasus kedua atau ketiga mungkin akan lebih manusiawi.

Tapi pada posting ini hanya akan dibahas kasus kedua saja, yang lebih dikenal dengan Optimistic Concurrency. Bila digunakan kebetulan digunakan teknologi Linq to SQL maka secara default akan digunakan metode Optimistic Concurrency, artinya jika satu record diakses bersamaan oleh MD dan IR maka :

Jika user MD menyimpan/update terlebih dahulu maka user IR akan menemui pesan kegagalan.
Jika user IR yang melakukan proses penyimpanan/update terlebih dahulu maka user MD akan menemui kegagalan saat menyimpan.

Berikut adalah contoh sederhana halaman yang berisi daftar data dan form inline editing pada GridView.

        1: <asp:LinqDataSource ID="LinqDataSource1" runat="server" 

       2:     ContextTypeName="DataClassesDataContext" EnableDelete="True" 

       3:     EnableInsert="True" EnableUpdate="True" EntityTypeName="" TableName="REF_AXLEs">

       4: </asp:LinqDataSource>

       5:     

       6: <br />

       7: <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 

       8:     DataKeyNames="AXLE_CODE" DataSourceID="LinqDataSource1" AllowPaging="True">

       9:     <Columns>

      10:         <asp:CommandField ShowEditButton="True" />

      11:         <asp:BoundField DataField="AXLE_CODE" HeaderText="AXLE_CODE" ReadOnly="True" SortExpression="AXLE_CODE" />

      12:         <asp:BoundField DataField="DESCRIPTION" HeaderText="DESCRIPTION" SortExpression="DESCRIPTION" />

      13:     </Columns>

      14: </asp:GridView>

Cara menguji kebenaran bahwa Linq to SQL dapat dilakukan dengan skenario seperti berikut :

Cukup gunakan 1 browser dengan dua tab yang berbeda untuk mengakses 1 halaman.

Pada tab 1, klik Edit pada AXLE_CODE=4, begitu juga pada tab 2.

Kemudian pada Tab 1 ubah data pada kolom Description klik tombol Update, proses Update berhasil.

Pada Tab 2, ubah data pada kolom Description kemudian klik tombol Update, proses gagal.

Dan berikut adalah contoh pesan kegagalan yang akan didapatkan oleh user yang kemudian menyimpan/update setelah user pertama melakukan update. Dapat dilihat terdapat pesan kegagalan karena kolom telah berubah atau tidak ditemukan.

Sebenarnya apa sih yang terjadi ketika proses update jika menggunakan Linq to SQL (atau “sejenisnya”) ? Berikut kira yang terjadi jika diterangkan secara sederhana :

Ketika tombol Edit diklik, ada yang berperan untuk “menampung” nilai original dari record yang dipilih.
Saat proses penyimpanan/update nilai original tersebut akan dibandingkan dengan data yang ada di database, jika nilai original dari field yang kita ubah berbeda dengan nilai yang ada di database, maka artinya ada yang telah mengubah nilai tersebut, maka akan dilemparkan pesan kegagalan.

Kasus di atas menggunakan control LinqDataSource dan GridView dengan inline editing. Bagaimana bila kasusnya dilakukan semi-manual seperti kasus di bawah ini.

Ketika link Detail pada suatu record dipilih, maka sebenarnya yang dipanggil adalah event OnSelectedIndexChanged dari GridView, dan pada event handlernya dilakukan pengisian nilai pada control-control seperti TextBox, DropDownList berdasarkan record yang dipilih, seperti pada gambar di bawah ini. Untuk menyimpan nilai original record dapat memanfaatkan Session seperti berikut :

       1: string id = Convert.ToString(GridView_Main.SelectedValue);

       2: REF_AXLE item = repository.Get<REF_AXLE>(id);

       3: Session["REF_AXLE"] = item;

Baris ke-2 adalah cara untuk “menangkap object” dr record yang dipilih, dan baris ke-3 adalah cara untuk menyimpan objek tersebut ke dalam Session.

Jika tombol Update (ImageButton), maka akan dieksekusi event handler OnClick dari ImageButton tersebut. Pada event handler ini yang dilakuan adalah mengambil kembali nilai pada Session.

       1: REF_AXLE originalitem = (REF_AXLE)Session["REF_AXLE"];

Kemudian menampung nilai yang akan diupdate pada objek :

       1: REF_AXLE item = new REF_AXLE();

       2:             

       3: item.AXLE_CODE = TextBox_FormCode.Text;

       4: item.DESCRIPTION = TextBox_FormName.Text;

Selanjutkan tinggal attach seperti berikut :

       1: DataAccessObject db = new DataAccessObject();

       2: db.DataContext.REF_AXLEs.Attach(item, originalitem);

       3: db.DataContext.SubmitChanges();

Baris ke-1 adalah class buatan sendiri, bukan default ada. Intinya adalah pada baris ke-2, ada proses attach dengan menggunakan dua objek, yaitu objek original dan objek dengan nilai untuk update. Hal ini memastikan Optimistic Concurrency masih berjalan.

#DokumentasiAgarTidakLupa

Share this post: | | | |

ASP.NET : Using RoleManager and Profile in different way

reyza — Sun, 03 Apr 2011 12:23:10 GMT

Sejak ASP.NET 2.0 telah dikenal fitur Membership, RoleManager dan Profile, karena fitur lama jadi tidak perlu di jelaskan secara detail, karena dipastikan sudah pada tahu kalau :

Membership berfungsi membantu untuk mengelola user.
RoleManager berfungsi membantu untuk role dari user.
Profile berfungsi untuk menambah atribut pada user, seperti alamat, organisasi kerja dan lain-lain.

Sedangkan untuk membuat menu telah disediakan Sitemap yang dapat terintegrasi dengan fitur di atas. Menu pada Sitemap dapat juga dapat berkerja sama dengan RoleManager, sehingga memungkinkan penampakan item-item pada menu dapat diatur sesuai dengan role dari user yang sedang login. Untuk membuat mereka bekerjasama pun sangat mudah, pada file *.sitemap cukup tambahkan atribut Roles pada suatu item menu, dan berikan nama role yang dapat mengakses item menu tersebut.

User memungkinkan dapat memiliki lebih dari role, sehingga ….

Jika pada Sitemap diatur item menu A, B, C adalah untuk role User,
Sedangkan item menu D, E, F, G adalah untuk role Admin,

Maka ketika seorang user memiliki role User dan Admin, secara otomatis akan ditampilkan item menu A, B, C, D, E, F, G.

Tetapi untuk sebagian orang mungkin ingin memiliki cara yang berbeda dengan cara di atas, sebagian orang mungkin ingin menggunakan cara penanganan seperti berikut :

User dapat memiliki lebih dari satu role, misal role yang telah didaftarkan adalah A, B, C dan D. Maka seorang user dapat memiliki role {A dan B} dari {A, B, C dan D}.
Setelah user login, terlebih dahulu user tersebut dapat memilih role yang ingin digunakan, role yang dapat dipilih adalah role yang telah didaftarkan ke user tersebut saja, dalam kasus ini adalah role {A dan B} saja.
Item-item menu yang ditampilkan akan sesuai dengan role yang dipilih.

Untuk membuat permintaan tersebut terlaksana maka perlu dilakukan langkah-langkah di bawah ini.

{Memanfaatkan Profile sebagai media penyimpanan role dari user}

Normalnya, role yang dimiliki oleh user disimpan pada tabel aspnet_UsersInRoles, bila user mempunyai lebih dari 1 role, misalnya 3 role, maka akan ditemui 3 record pada tabel ini. Dengan informasi itulah menu dirender berdasarkan role dari user yang sedang login. Karena yang diinginkan hanya 1 role saja yang aktif berdasarkan pilihan user tersebut setelah login, maka tabel ini hanya akan berisi 1 role saja, yaitu role yang dipilih oleh user tersebut.

Tetapi karena user masih mungkin memiliki lebih dari maka perlu media penyimpanan lain, oleh karena itu dapat memanfaatkan Profile untuk kebutuhan ini. Untuk keperluan itu perlu ditambahkan 1 atribut untuk menyimpan data role-role tersebut. Penambahan atribut ini cukup dilakukan pada file web.config, dan tambahkan kode seperti paga baris ke-7.

        1: <profile>

       2:     <providers>

       3:         <clear/>

       4:         <add name="AspNetSqlProfileProvider" connectionStringName="HOREHOREUserConnString" applicationName="HOREHORE" type="System.Web.Profile.SqlProfileProvider, System.Web, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"/>

       5:     </providers>

       6:     <properties>

       7:     <add name="Groups" type="System.String" serializeAs="String" allowAnonymous="false" defaultValue="" readOnly="false"/>

       8:     . . .

       9:     </properties>

      10: </profile>

Data role yang disimpan pada atribut Groups di Profile akan dipisahkan oleh tanda koma (,). sehingga bila user punya role A dan B maka data yang disimpan pada atribut ini adalah A,B.

Misalnya role yang tersedia ditampilkan pada checkboxlist, maka penyimpanan role dari role yang dipilih pada checkboxlist dapat dilakukan dengan cara berikut :

       1: string roles = String.Empty;

       2: ProfileCommon profileCommon = Profile.GetProfile(userName);

       3:  

       4: for (int i = 0; i < CheckBoxList_FormRoles.Items.Count; i++)

       5: {

       6:     if (CheckBoxList_FormRoles.Items.Selected)

       7:     {

       8:         if (!String.IsNullOrEmpty(roles)) roles += ",";

       9:         roles += CheckBoxList_FormRoles.Items.Value;

      10:     }

      11:     CheckBoxList_FormRoles.Items.Selected = false;

      12: }

      13: profileCommon.Groups = roles;

      14: profileCommon.Save();

{Menampilkan role yang ingin digunakan}

Setelah data telah siap, maka dapat dibuat skenario ketika user telah sukses login maka user akan ditampilkan role user yang disimpan pada Profile dan dapat dipilih seperti berikut ini.

Pada gambar di atas, dapat diketahui user tersebut mempunyai 4 role yang disimpan pada Profile, dan 1 role yang aktif yang disimpan pada tabel aspnet_UsersInRoles yaitu role Administrator (terlihat status = Active).

Untuk menampilkan 4 role yang disimpan pada Profile tersebut, cukup buat GridView dan load datanya dengan cara seperti berikut ini :

       1: IList roles = new ArrayList();

       2: string username = HttpContext.Current.User.Identity.Name;

       3: ProfileCommon profileCommon = Profile.GetProfile(username);

       4: string rolesStr = profileCommon.Groups;

       5:  

       6: if (!String.IsNullOrEmpty(rolesStr))

       7: {

       8:     string[] roleArr = rolesStr.Split(',');

       9:     foreach (string role in roleArr)

      10:     {

      11:         CaltrisRoles item = new CaltrisRoles();

      12:         item.ROLENAME = role;

      13:         roles.Add(item);

      14:     }

      15: }

      16:  

      17: GridView_Roles.DataSource = roles;

      18: GridView_Roles.DataBind();

Dapat dilihat pada gambar di atas, terdapat LinkButton Select pada kolom Action. Fungsi LinkButton itu ketika dipilih/diklik adalah menyimpan data role yang dipilih ke dalam tabel aspnet_UsersInRoles sesuai dengan user yang melakukan aksi tersebut. Namun sebelumnya dipastikan terlebih dahulu data role dari user tersebut harus dihapus. Hal ini untuk memastikan data role yang disimpan untuk seorang user hanya SATU saja.

Cara untuk melakukan kebutuhan di atas dapat dilihat dari kode di bawah ini :

       1: string username = HttpContext.Current.User.Identity.Name;

       2: string selectedRole = Convert.ToString(GridView_Roles.SelectedValue);

       3: String[] roles = Roles.GetRolesForUser(username);

       4:  

       5: // remove role pada DB

       6: foreach (string role in roles)

       7: {

       8:     if (Roles.IsUserInRole(username, role))

       9:     {

      10:         Roles.RemoveUserFromRole(username, role);

      11:     }

      12: }

      13:  

      14: // insert role yang dipilih user pada GridView ke dalam DB

      15: Roles.AddUserToRole(username, selectedRole);

{Bukti}

Sebagai bukti dapat dilihat pada gambar berikut ini :

Pada gambar di atas role yang aktif adalah Administrator, maka dapat dilihat menu yang dimiliki oleh user tersebut. Dan berikut ini adalah ketika role FUEL yang aktif.

Sangat mudah bukan…terima kasih telah membaca, silakan kembali menikmati akhir weekend ini

Share this post: | | | |

ASP.NET : Fake Windows Authentication

reyza — Fri, 21 Jan 2011 16:05:28 GMT

Patrick Jane : Hallo, Ada apa John? Deploymentnya sukses & lancar?

Red John : Ada beberapa issue nih mas bos, ternyata mereka ingin menggunakan smart card untuk login komputer dan ingin setelah login komputer otomatis juga login ke aplikasi yang kita buat. Padahal kita sekarang kita cuma melakukan authentication dengan menggunakan form login.

Patrick Jane : Bukannya gampang tuh untuk menyelesaikan masalah tersebut. Tujuh menit juga sudah kelar.

{Real Windows Authentication}

Pada ASP.NET sangat mudah untuk mengubah proses authentication dari Form (menggunakan form login) ke bentuk Windows (menggunakan windows logon), yaitu cukup mengedit file web.config dan mengganti kode berikut :

     <authentication mode="Forms">

Menjadi seperti berikut :

    <authentication mode="Windows">

Dan dalam sekejap, windows logon menjadi proses authentication pada aplikasi web. Tetapi bagaimana kalau aplikasi web terdahulu tersebut telah menggunakan Role Manager untuk mengelola role dari user, dimana role tersebut terkait dengan Sitemap yang digunakan untuk membuatan menu. Seperti yang telah kita ketahui, Sitemap adalah “sumber data” yang menampilkan menu dengan menggunakan kontrol Menu ataupun TreeView. Item-item menu yang akan ditampilkan akan sesuai dengan role yang dimiliki oleh user yang telah login. Aplikasi lama tersebut juga memanfaatkan Profile untuk mengelola data tambahan untuk user. Apakah ketika mode authentication diganti menjadi “Windows” akan berdampak pada Role dan Profile yang telah digunakan?

Misalkan nama user yang disimpan pada sistem sebelumnya adalah NAMAUSER, sedangkan bila menggunakan authentication mode Windows maka nama user login yang ditangkap adalah [NAMADOMAIN]\NAMAUSER. Walaupun proses authentication berhasil dilewati, tetapi karena perbedaan nama user login tersebut membuat user yang telah login tidak mendapatkan Role dan Profile. Otomatis user tersebut menjadi kehilangan item-item menu yang sesuai dengan rolenya atau data profile tambahan.

{Fake Windows Authentication}

Agar data user, role dan profile masih bisa digunakan tanpa harus melakukan perubahan yang berarti kode-kode yang ada pada aplikasi web yang telah ada. Logikanya adalah sesuai dengan langkah-langkah berikut ini :

Mendapatkan user logon window.
Mencocokan nilai user logon tersebut dengan data Membership pada aplikasi lama.
Bila cocok maka secara otomastis user akan “diloginkan” tanpa harus memasukkan username dan password pada form login.

Dengan cara ini mode authentication yang digunakan adalah Form.

    <authentication mode="Forms">

Untuk mendapatkan user login windows dapat menggunakan kode berikut :

    string logonUser = Request.ServerVariables["LOGON_USER"];

Dengan kode di atas, maka nilai pada logonUser akan seperti berikut [NAMA_DOMAIN]\nama_user. Artinya kita cukup mengambil nama_user yang dapat dilakukan dengan cara berikut :

    if (!String.IsNullOrEmpty(logonUser))

    {

        string[] logonUserArr = logonUser.Split('\\');

        username = logonUserArr[logonUserArr.Length - 1];

        . . .

    }

Sekarang kita sudah punya nilai “nama_user” yang ditampung di dalam variable username. Selanjutnya tinggal memeriksa keberadaan username tersebut ke data Membership dengan cara berikut “kasar” seperti berikut ini :

       1: MembershipUser userObj = Membership.GetUser(username);

       2:  

       3: if (userObj != null)

       4: {

       5:     FormsAuthentication.RedirectFromLoginPage(username, true);

       6: }

       7: else

       8: {

       9:     Response.Redirect("~/Public/MessagePage.aspx");

      10: }

Pada baris pertama dapat dilihat cara untuk mengambil data user sesuai nilai username yang telah didapat, kemudian jika user tersebut ditemukan pada data Membership maka secara otomatis kita bisa “me-login-kan” user tersebut dengan cara seperti pada baris ke-5.

Dan Semi/Fake Windows Authentication pun dapat digunakan seperti layaknya Real WIndows Authentication.

#selamat-menikmati-akhir-pekan

Share this post: | | | |

Dynamic Data : Create Simple CRUD Page in Seconds

reyza — Tue, 18 Jan 2011 04:25:48 GMT

Dynamic Data untuk membuat form CRUD untuk banyak tabel dalam sekejap bukan barang baru lagi, tapi apakah benar Dynamic Data bisa memberikan apa yang diinginkan baik itu dari sisi kesesuaian antarmuka dan hal-hal lainnya ?

Sebelum pertanyaan itu terjawab ada baiknya memperlihatkan secara singkat bagaimana Dynamic Data membantu mempercepat pekerjaan developer untuk membuat halaman sederhana dengan fungsi CRUD (Create Retrieve Update Delete).

Pada gambar di atas digunakan Web Application Template untuk membuat “Aplikasi yang memanfaatkan Dynamic Data”, walau tidak menutup kemungkinan untuk menggunakan “Web Site Template”. Untuk “sumber data” dapat digunakan Linq to SQL dan Entity Framework, seperti yang terlihat pada gambar di atas. Pada contoh ini akan digunakan Linq to SQL.

Selanjutnya menambahkan “sumber data” dengan membuat LINQ to SQL Classes, dengan nama Northwind.dbml.

Selanjutnya tinggal membuat koneksi ke database via Server Explorer yang ada di Visual Studio, dan “tarik” tabel-tabel yang diinginkan ke Northwind.dbml.

Langkah terakhir adalah memodifikasi file Global.asax.cs untuk menentukan “sumber data” yang digunakan, dengan cara “meng-uncomment” baris berikut :

      
    DefaultModel.RegisterContext(typeof(YourDataContextType), new ContextConfiguration() { ScaffoldAllTables = false });

Kemudian mengubah nilai “YourDataContextType” dengan nama data context yang sesuai dengan yang telah didefinisikan pada Northwind.dbml, yaitu NorthwindDataContext, dan mengubah nilai ScaffoldAllTables menjadi True, artinya nanti kita akan mempunyai halaman CRUD untuk semua “tabel” yang sudah didaftarkan pada Northwind.dbml.

     
    DefaultModel.RegisterContext(typeof(NorthwindDataContext), new ContextConfiguration() { ScaffoldAllTables = true });

Build, dan View in Browser, hasilnya bisa dilihat seperti gambar di bawah ini :

Secara “otomatis” kita sudah punya halaman untuk melihat data dalam bentuk Grid dan form untuk insert/update data sesuai dengan struktur tabel yang ada. Form lumayan pintar melakukan penyesuaian, misalnya tabel mempunyai relasi maka “ada kemungkinan” input-an akan berbentuk dropdownlist. Apabila field memiliki sifat “not null” maka secara otomatis memberikan validasi dengan control RequiredFieldValidator dan banyak lain hal-hal lain yang “dibuatkan secara otomatis”.

Apakah “Default” yang dibuat oleh Dynamic Data sudah cukup? Bagaimana apabila ada keinginan seperti berikut ini :

Saya sudah membuat web app dengan menggunakan template Web Site, dan sudah banyak halaman yang telah dibuat, tetapi setelah mendapatkan informasi tentang Dynamic Data, ada keinginan menggunakannya untuk mengelola data master yang memang fungsionalitasnya cuma CRUD, apakah mungkin Dynamic Data digabungkan dengan web app yang sudah ada?
Karena saya sudah punya web app, saya ingin antarmuka halaman yang menggunakan Dynamic Data mempunyai tampilan yang senada. Begitu juga dengan keragaman URL untuk mengakses halaman. Apakah bisa?
Saya menggunakan LINQ to SQL, yang didalamnya sudah didaftarkan seluruh tabel untuk keperluan aplikasi, saya ingin menggunakan Dynamic Data tapi hanya ingin “tabel-tabel” tertentu saja yang akan dikelola dengan Dynamic Data, apakah hal itu mungkin?

Baiklah kita coba temukan jawabannya satu per satu.

{Dynamic Data Web Site + Existing My Web App}

Sebelumnya kita perhatikan dahulu item-item apa saja yang terdapat pada template ASP.NET Dynamic Data Linq to SQL Web Site.

Terdapat beberapa hal penting dari Solution Explorer yang dilihat digambar, yaitu folder DynamicData, Global.asax dan web.config. Maka langkah pertama untuk menambahkan “kemampuan Dynamic Data” pada website yang kita miliki maka copy folder Dynamic Data beserta isinya ke web app yang sudah ada. Kemudian copy juga file Global.asax ke root folder dari web app.

Maka kira-kira akan terlihat seperti gambar berikut :

Selanjutnya menyesuaikan isi web.config pada Existing My Web App agar mempunyai “kemampuan Dynamic Data” dengan menambahkan hal-hal berikut ini :

    <compilation debug="true">

        <assemblies>

            . . .

            <!-- Dynamic Data-Start -->

            <add assembly="System.Web.Abstractions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>

            <add assembly="System.Web.Routing, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>

            <add assembly="System.ComponentModel.DataAnnotations, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>

            <add assembly="System.Web.DynamicData, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>

            <add assembly="System.Data.Linq, Version=3.5.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/>

            <!-- Dynamic Data-End -->

            . . .

        </assemblies>

    </compilation>

Kemudian…

    <pages theme="Ehem">

        <controls>

            . . .

            <!-- Dynamic Data-Start -->

            <add tagPrefix="asp" namespace="System.Web.DynamicData" assembly="System.Web.DynamicData, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>

            <add tagPrefix="rsweb" namespace="Microsoft.Reporting.WebForms" assembly="Microsoft.ReportViewer.WebForms, Version=9.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A"/>

            <!-- Dynamic Data-End -->

        </controls>

    </pages>

Kemudian…

    <httpModules>

       . . .

       <!-- Dynamic Data-Start -->

       <add name="UrlRoutingModule" type="System.Web.Routing.UrlRoutingModule, System.Web.Routing, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>

       <!-- Dynamic Data-End -->

    </httpModules>

Kemudian …

    <system.webServer>

        . . .

        <modules>

            . . .

            <!-- Dynamic Data-Start -->

            <remove name="UrlRoutingModule"/>

            <add name="UrlRoutingModule" type="System.Web.Routing.UrlRoutingModule, System.Web.Routing, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>

            <!-- Dynamic Data-End -->

        </modules>

        . . .

    </system.webServer>

Sekarang modifikasi web.config sudah selesai, dan dilanjutkan dengan penyesuaian pada file Global.asax untuk menentukan Class DataContext seperti yang telah dijelaskan di atas.

Selain itu juga dapat dilakukan penyesuaian URL akses dengan cara seperti berikut :

       1: routes.Add(new DynamicDataRoute("Setup/{table}.aspx")

       2: {

       3:     Action = PageAction.List,

       4:     ViewName = "ListDetails",

       5:     Model = model

       6: });

Pada baris ke-1 adalah cara untuk menentukan cara akses halaman CRUD untuk tabel yang diinginkan, misalnya ingin mengakses halaman CRUD untuk tabel Pegawai, maka kita dapat menuliskannya seperti berikut http://domain/Setup/Pegawai.aspx. Bila nama tabelnya adalah Hasil_Penjualan, maka kita dapat mengaksesnya dengan mengakses URL http://domain/Setup/Hasil_Penjualan.aspx. Pada kode di atas dapat juga untuk menentukan Page Template yang ingin digunakan. Pada contoh di atas akan digunakan ListDetails.aspx sebagai Page Template.

Page Template ini dapat kita temukan di folder DynamicData\PageTemplates, seperti pada gambar.

Pada file ListDetail.aspx, dapat kita tentukan MasterPage yang digunakan oleh “Existing My Web App” sehingga antarmuka halaman Dynamic Data akan sesuai dengan halaman-halaman yang sudah ada. Dan berikut antarmuka dari halaman DynamicData yang telah dipermak baik dari penggunaan MasterPage dan juga CSS.

Sangat gampang!

{Menentukan Tabel yang ingin dikelola dengan halaman Dynamic Data}

Bila dalam LINQ to SQL Classes terdapat banyak “class yang menjadi representasi tabel pada database”, tetapi tidak semua yang akan dikelola dengan halaman Dynamic Data, maka kita bisa menentukan “tabel” mana saja yang ingin dikelola dengan cara berikut ini.

Langkah pertama membuat nilai atribut ScaffoldAllTables pada file Global.asax bernilai false.

       1:  

       2: DefaultModel.RegisterContext(typeof(NorthwindDataContext), new ContextConfiguration() { ScaffoldAllTables = false });

       3:

Dari kode di atas maka tidak semua tabel yang dikelola oleh halaman Dynamic Data, kita harus menentukan sendiri tabel mana saja yang ingin dikelola. Misalnya kita ingin mengelola tabel Category dan Territory saja maka yang pertama kita lakukan adalah membuat file class dengan isi seperti berikut ini.

       1: using System;

       2: using System.Collections.Generic;

       3: using System.Linq;

       4: using System.Web;

       5:  

       6: using System.ComponentModel.DataAnnotations;

       7:  

       8: namespace WebApplication1

       9: {

      10:     [ScaffoldTable(true)]

      11:     public partial class Category { }

      12:  

      13:     [ScaffoldTable(true)]

      14:     public partial class Territory { }

      15: }

Dari kode di atas baris 10 dan baris 13 dapat dilihat bagaimana menentukan agar “tabel” Category dan Territory “didaftarkan” agar agar bisa dikelola dengan menambahkan atribut [ScaffoldTable(true)], dan jangan lupa untuk menggunakan NameSpace System.ComponentModel.DataAnnotations, agar kedua baris tersebut tidak “digarisbawahi”.

Selamat mencoba bagi yang memerlukan, semoga berguna.

Share this post: | | | |

Reyza

The Amazing Nokia Lumia Developer Day

ASP.NET/IIS *MVP Summit* draft schedule

Building Backend Service for Mobile Application

How does Web Technology help Mobile App Development?

PHP Manager for IIS

[ASP.NET] The latest Release of AJAX Control Toolkit is November 2011!

Seminar dan Pelatihan Teknologi Informasi di Majalengka

Windows 8 : Si Hijau yang ramping

Re-cover : Membangun Aplikasi Web dengan Mudah dan Cepat

Screen Scraping : “Mencuri” Data Website dengan Elegan

Memperbaiki “Kesalahan” SRC pada tag IMG dengan jQuery

{Linq to SQL - Optimistic Concurrency} on ASP.NET

ASP.NET : Using RoleManager and Profile in different way

ASP.NET : Fake Windows Authentication

Dynamic Data : Create Simple CRUD Page in Seconds

ASP.NET/IIS MVP Summit draft schedule