Reyza

[Windows 8] : Where is my START button :)

Setelah mengunduh ISO Windows 8 Consumer Preview di http://windows.microsoft.com/en-US/windows-8/iso maka langkah berikutnya tentu saja menginstalnya. Dan kebetulan hanya punya keberanian install ini di VirtualBox, kebetulan di VirtualBox sudah ada pilihan untuk Windows 8.

Perlu 20GB ruang HD untuk jaga-jaga, karena akan digunakan untuk install VS 2011 Beta, masih belum yakin untuk install VS 2011 Beta di Windows 7, selain karena ada kabar tidak bisa ngoding Metro App Style bila itu dipaksakan :)

Hasilnya …

Antarmuka yang mungkin sudah pernah dilihat pada Windows 8 sebelumnya, untuk melihat antarmuka “klasik” dari Windows maka bisa mengaktifkan Desktop.

Dan …

Uups…tidak ada lagi tombol seperti ini pada area kiri bawah dari Windows 8, kemana? kemana? apakah salah alamat? Kemanakah tombol START sekarang dan bagaimana bentuknya?

Tombol START masih ada, caranya tinggal mengarahkan pointer mouse pada ujung kanan atas atau bawah, dan akan terlihat tombol-tombol seperti berikut ini.

Dapat dilihat tombol START yang telah berubah bentuk, seperti yang dipaparkan di http://windowsteamblog.com/windows/b/bloggingwindows/archive/2012/02/17/redesigning-the-windows-logo.aspx … “It’s a window… not a flag” :)

Tombol-tombol yang terdapat pada sisi kanan layar tersebut diantaranya adalah :

{Search}

Berikut adalah antarmuka yang akan ditampilkan ketika tombol Search dipilih.

Fasilitas ini memungkinkan kita mencari : App, Setting atau Files seperti yg terlihat di gambar di bawah ini.

Eh ternyata bukan itu saja…

Ketika yang dipilih adalah Internet Explorer, maka secara otomatis IE akan ditayangkan, dan ketika pada input dituliskan keyword yg diinginkan, maka secara otomatis akan dilakukan proses pencarian oleh BING dan hasilnya, dapat dilihat pada gambar di atas. Contoh lain ketika yang dipilih adalah Music.

Ketikan keyword dan… U2 dan masih banyak lagi hal baru di bagian Search ini :)

{Setting}

Sering kita melihat icon-icon kecil pada bagian kanan bawah, seperti icon status speaker, jaringan, batere dll. Sekarang hal-hal tersebut akan terlihat ketika Setting dipilih, dan akan dilihat seperti pada gambar berikut ini.

Di bagian ini juga terlihat tombol untuk Power, untuk Shutdown atau Restart.

Apalagi yang baru? … selebihnya hampir mirip dengan yang telah dinikmati pada Windows 8 sebelumnya, kecuali ada penambahan beberapa aplikasi baru dan ada aplikasi yang menghilang. Bila ada temuan baru, akan segera dilaporkan via blog ini.

Selanjutnya adalah cerita tentang hal-hal baru pada VS2011 Beta …

Selamat menikmati akhir pekan :)

Share this post: | | | |

VS2011 Beta, Windows 8 Consumer Preview, Windows Server 8 Beta … NOW!

Hari ini ada tiga ini….silakan :)

Share this post: | | | |

Visual Studio & Metro

Akhirnya ada sedikit penampakan lagi implementasi Metro UI di Visual Studio 2011. Berdasarkan posting di http://blogs.msdn.com/b/visualstudio/archive/2012/02/23/introducing-the-new-developer-experience.aspx dapat dilihat beberapa penampakan antarmuka dengan style Metro UI.

Berikut adalah beberapa contoh style Metro UI di Visual Studio :)

Icon bergaya Metro dapat dilihat, dan icon icon tool juga terlihat lebih minimalis dibanding versi Visual Studio versi sebelumnya.

Selain itu terdapat pilihan theme pada Visual Studio, The light dan The dark :)

Perubahan lain adalah pada penggunaan bevel, gradient dan shadow pada control-control yang terdapat pada form di antarmuka. Pada tampilan versi sebelumnya dapat dilihat seperti berikut :

maka pada Visual Studio 2011 akan dapat dilihat perubahan seperti berikut ini :

Menurut kabar Visual Studio 2011 versi Beta akan diumumkan hari ini , 29 Februari 2012 … Semoga segera bisa diunduh di tanggal yang hanya dapat ditemui sekali dalam 4 tahun :)

Share this post: | | | |

Windows Phone 7 Emulator Skin Switcher

Sesuai dengan title-nya maka post ini akan membahas hal sederhana dan ‘mungkin’ menyenangkan. Yaitu aplikasi kecil yang bermanfaat untuk mengganti skin pada emulator Windows Phone 7. Ada berbagai pilihan skin yang tersedia sesuai dengan merk ponsel pengguna OS Windows Phone 7 yang telah tersedia dipasaran, seperti terlihat pada gambar di bawah ini.

Untuk mendapatkan aplikasi ini dapat segera mengunduhnya di http://wp7emuskinswitcher.codeplex.com/

Selamat mencoba.

Share this post: | | | |

The Amazing Nokia Lumia Developer Day

Biar gambar yang berbicara

Share this post: | | | |

Building Backend Service for Mobile Application

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 :

1. Pembuatan Web Service.
2. Pemanfaatan Web Service pada Windows Phone.
3. Pembuatan WCF Data Service.
4. 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 :

1. Service.asmx
2. 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;

  10: using System.Windows.Media.Animation;

  11: using System.Windows.Shapes;

  12: using Microsoft.Phone.Controls;

  13:  

  14: using UnpasWP7.UnpasAkademikService;

  15:  

  16: namespace UnpasWP7

  17: {

  18:     public partial class MainPage : PhoneApplicationPage

  19:     {

  20:         // Constructor

  21:         public MainPage()

  22:         {

  23:             InitializeComponent();

  24:         }

  25:  

  26:         private void button1_Click(object sender, RoutedEventArgs e)

  27:         {

  28:             GetIPK(textBox_NIM.Text);

  29:             GetSKSAmbil(textBox_NIM.Text);

  30:         }

  31:  

  32:         private void GetIPK(string NIM)

  33:         {

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

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

  36:             proxy.GetIPKAsync(NIM);

  37:         }

  38:  

  39:         void proxy_GetIPKCompleted(object sender, UnpasAkademikService.GetIPKCompletedEventArgs e)

  40:         {

  41:             if (e.Error == null)

  42:             {

  43:                 textBlock_IPK.Text = e.Result;

  44:             }

  45:             else

  46:             {

  47:                 textBlock_IPK.Text = e.Error.Message;

  48:             }

  49:         }

  50:  

  51:         private void GetSKSAmbil(string NIM)

  52:         {

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

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

  55:             proxy.GetJumlahSKSAmbilAsync(NIM);

  56:         }

  57:  

  58:         void proxy_GetJumlahSKSAmbilCompleted(object sender, UnpasAkademikService.GetJumlahSKSAmbilCompletedEventArgs e)

  59:         {

  60:             if (e.Error == null)

  61:             {

  62:                 textBlock_SKS.Text = e.Result;

  63:             }

  64:             else

  65:             {

  66:                 textBlock_SKS.Text = e.Error.Message;

  67:             }

  68:         }

  69:     }

  70: }

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;

  10: using System.Windows.Media.Animation;

  11: using System.Windows.Shapes;

  12: using Microsoft.Phone.Controls;

  13:  

  14: using System.Data.Services.Client;

  15: using UnpasWP7WCF.UnpasWCF;

  16:  

  17: namespace UnpasWP7WCF

  18: {

  19:     public partial class MainPage : PhoneApplicationPage

  20:     {

  21:         private NORTHWNDEntities context;

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

  23:         private DataServiceCollection<Mahasiswa> mhs;

  24:  

  25:  

  26:         // Constructor

  27:         public MainPage()

  28:         {

  29:             InitializeComponent();

  30:         }

  31:  

  32:         private void button1_Click(object sender, RoutedEventArgs e)

  33:         {

  34:             context = new NORTHWNDEntities(northwindUri);

  35:             mhs = new DataServiceCollection<Mahasiswa>(context);

  36:  

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

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

  39:             {

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

  41:             }

  42:  

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

  44:             mhs.LoadAsync(query);

  45:  

  46:         }

  47:  

  48:         void mahasiswa_LoadCompleted(object sender, LoadCompletedEventArgs e)

  49:         {

  50:             if (e.Error == null)

  51:             {

  52:                 listBox1.ItemsSource = mhs;

  53:             }

  54:             else

  55:             {

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

  57:             }

  58:         }

  59:     }

  60: }

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?

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 :

1. Bobby Zulkarnaen, MVP dengan materi Windows Server 2008.
2. Puja Pramudya, MVP dengan materi Windows Phone Silverlight.
3. Andri Mirandi, Windows Phone with XNA Game Studio.
4. M Reza Faisal, MVP dengan materi How does Web Technology help Mobile App Development.
5. Billy Riantono, Introduction MSDNAA dan MSP Poltekpos.
6. 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

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!

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>

.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; }Dan berikut ini adalah hasilnya :

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>

   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" />

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>

.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; }Atribut tersebut dapat dilihat pada baris ke-3. Selain itu kita juga bisa menggunakan atribut TabStripPlacement untuk mengatur letak tab header yang diinginkan.

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

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 :

1. Berkembang bersama komunitas oleh Dani R. Taufani, MSP Leader Regional Jawa Barat.
2. Building Web Application with ASP.NET oleh M Reza Faisal.
3. Building Apps in Windows 8 oleh M. Yusuf, MSP.
4. 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 :

1. Control Standard pada ASP.NET.
2. Control Login.
3. Control Data.
4. Dynamic Data.
5. 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

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

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 :

1. Pendahuluan.
2. NET 3.5 & Visual Studio 2008.
3. Pengenalan C#.
4. ASP.NET.
5. ASP.NET dan Database.
6. Design Antarmuka.
7. Resource & Globalization.
8. Validasi.
9. ASP.NET Ajax dan Ajax Control Toolkit.
10. Membership, Profile dan Navigasi.
11. 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

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>

  10: <div class='post-info clearfix'>

  11: <p class='author alignleft'>

  12: Posted by

  13:  

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

  15: </p>

  16: <p class='comments alignright'>

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

  18: comments</a>

  19: </p>

  20: </div>

  21: <div class='post-content clearfix'>

  22: <p>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  42: </p>

  43: </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:     {

  10:         HtmlWeb web = new HtmlWeb();

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

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

  13:  

  14:         if (stasiunTVs != null)

  15:         {

  16:             ListItemCollection items = new ListItemCollection();

  17:  

  18:             foreach (var stasiunTv in stasiunTVs)

  19:             {

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

  21:  

  22:                 ListItem item = new ListItem();

  23:                 item.Text = stasiunTVArr[0];

  24:                 item.Value = stasiunTVArr[0];

  25:                 items.Add(item);

  26:             }

  27:  

  28:             DropDownList_StasinTV.DataSource = items;

  29:             DropDownList_StasinTV.DataTextField = "Text";

  30:             DropDownList_StasinTV.DataValueField = "Value";

  31:             DropDownList_StasinTV.DataBind();

  32:         }

  33:     }

  34: }

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>

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

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

  12:     </asp:ScriptManager>

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

  14:         <ContentTemplate>

  15:             <div>

  16:                 Pilih Stasiun TV :

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

  18:                 </asp:DropDownList>

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

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

  21:                 </asp:UpdateProgress>

  22:             </div>

  23:             <br />

  24:             <div>

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

  26:                 </asp:GridView>

  27:             </div>

  28:         </ContentTemplate>

  29:     </asp:UpdatePanel>

  30:     </form>

  31: </body>

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

  10:     {

  11:         if (!IsPostBack)

  12:         {

  13:             DropDownList_StasiunTV_DataBind();

  14:             GetJadwalTVFromWeb();

  15:         }

  16:     }

  17:  

  18:     protected void GetJadwalTVFromWeb()

  19:     {

  20:         HtmlWeb web = new HtmlWeb();

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

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

  23:  

  24:         if (data != null)

  25:         {

  26:             IList jadwalList = new ArrayList();

  27:  

  28:             foreach (var item in data)

  29:             {

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

  31:  

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

  33:                 {

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

  35:  

  36:                     foreach (var jadwal in dataJadwal)

  37:                     {

  38:                         JadwalTV jadwalTV = new JadwalTV();

  39:                         jadwalTV.Stasiun = stasiun[0];

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

  41:                         jadwalTV.NamaAcara = jadwal.Substring(14);

  42:                         jadwalList.Add(jadwalTV);

  43:                     }

  44:                 }

  45:             }

  46:  

  47:             GridView_Jadwal.DataSource = jadwalList;

  48:             GridView_Jadwal.DataBind();

  49:         }

  50:     }

  51:  

  52:     protected void DropDownList_StasiunTV_DataBind()

  53:     {

  54:         HtmlWeb web = new HtmlWeb();

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

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

  57:  

  58:         if (stasiunTVs != null)

  59:         {

  60:             ListItemCollection items = new ListItemCollection();

  61:  

  62:             foreach (var stasiunTv in stasiunTVs)

  63:             {

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

  65:  

  66:                 ListItem item = new ListItem();

  67:                 item.Text = stasiunTVArr[0];

  68:                 item.Value = stasiunTVArr[0];

  69:                 items.Add(item);

  70:             }

  71:  

  72:             DropDownList_StasinTV.DataSource = items;

  73:             DropDownList_StasinTV.DataTextField = "Text";

  74:             DropDownList_StasinTV.DataValueField = "Value";

  75:             DropDownList_StasinTV.DataBind();

  76:         }

  77:     }

  78:  

  79:     protected void DropDownList_StasinTV_SelectedIndexChanged(object sender, EventArgs e)

  80:     {

  81:         GetJadwalTVFromWeb();

  82:     }

  83: }

  84:  

  85: public class JadwalTV

  86: {

  87:     public string Stasiun { set; get; }

  88:     public string Waktu { set; get; }

  89:     public string NamaAcara { set; get; }

  90: }

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

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 :

1. User pemilih blog tinggal mengubah seluruh postingnya agar url gambar yang menggunakan domain www.hahahihi.com menjadi www.hihihaha.web.id :)
2. 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.
3. 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

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 ?

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

Kenapa perlu dipikirkan hal seperti di atas?

1. 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.
2. 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 :

1. Jika user MD menyimpan/update terlebih dahulu maka user IR akan menemui pesan kegagalan.
2. 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 :

1. Ketika tombol Edit diklik, ada yang berperan untuk “menampung” nilai original dari record yang dipilih.
2. 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: | | | |