Reyza

tenang, senang, sederhana
See also: Other Geeks@INDC

Public

April 2009 - Posts

ASP.NET Translator Control with Google AJAX Language API

Jangan tertipu oleh judulnya, tidak ada langkah-langkah yang akan mengotori tangan anda untuk bermain dengan Google AJA Language API. Tapi kita coba lakukan dengan hal yang lebih mudah atau bahkah sangat mudah untuk menterjemahkan suatu kata atau kalimat dari bahasa Inggris ke bahasa yang diinginkan.

Langkah pertama yang mesti dilakukan adalah dengan menyuruh web browser berkunjung ke alamat berikut ini : http://googlelanguage.codeplex.com.

Pada alamat tersebut dapat ditemui dua file yang akan berguna, yaitu :

  • GoogleLanguage.WebControls.dll, yang merupakan library yg dapat digunakan sebagai ‘alat’ yang dapat digunakan sebagai ‘penterjemah’.
  • GoogleLanguage.zip, contoh web application dari penggunaan GoogleLanguage.WebControls.dll.

Setelah developer membuat suatu proyek web entah itu web site atau web application, dan telah menambahkan GoogleLanguage.WebControls.dll sebagai reference, maka selanjutnya adalah membuat sebuah file ASPX dan kemudian tambahkan baris berikut :

<%@ Register Assembly="GoogleLanguage.WebControls" Namespace="GoogleLanguage.WebControls" TagPrefix="glc" %>

 

Sehingga secara keseluruhan dapat dilihat kode dari file ASPX seperti ini :

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="GoogleLanguage.WebControls" Namespace="GoogleLanguage.WebControls" TagPrefix="glc" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
    </form>
</body>
</html>

Ada dua control yang dapat digunakan, yaitu :

  • Literal.
  • Translator.

Contoh penggunaan control Literal dapat dilihat pad contoh berikut ini :

<p><glc:Literal ID="Literal1" runat="server" Text="How are you?" DestinationLanguage="HINDI" /></p>
<p><glc:Literal ID="Literal2" runat="server" Text="I am fine." DestinationLanguage="HINDI" /></p>
<p><glc:Literal ID="Literal3" runat="server" Text="Enjoy your dinner." DestinationLanguage="HINDI" /></p>
<p><glc:Literal ID="Literal4" runat="server" Text="I love music!" DestinationLanguage="HINDI" /></p>
<p><glc:Literal ID="Literal5" runat="server" Text="Do you like music too?" DestinationLanguage="HINDI" /></p>

Dan hasilnya adalah seperti berikut :

01

Pada control Literal yang digunakan, akan terjadi proses penterjemahan text dari nilai atribut Text dengan tujuan bahasa sesuai dengan nilai dari atribut DestinationLanguage.

Ada banyak pilihan DestinationLanguage yang dapat digunakan, sebagai contoh dapat dilihat pada gambar berikut :

02

Note : Contoh ini akan sangat berguna bagi anda-anda yang bekerja dengan bos yang berasal dari negeri India :)

Dan berikut adalah contoh penggunaan control Translator :

<p>
    <asp:TextBox ID="TextBox2" runat="server" TextMode="MultiLine" Text="How are you? I am fine. Enjoy your dinner." />
    <glc:Translator ID="Translator3" runat="server" TargetControlID="TextBox2" DestinationLanguage="GREEK" />
</p>
<p>
    <asp:Button ID="Button1" runat="server" Text="Hello World" />
    <glc:Translator ID="Translator4" runat="server" TargetControlID="Button1" DestinationLanguage="SPANISH" />
</p>
<p>
    <asp:CheckBox ID="CheckBox1" runat="server" Text="Make sure you eat your breakfast" />
    <glc:Translator ID="Translator5" runat="server" TargetControlID="CheckBox1" DestinationLanguage="HINDI" />
</p>

 

 

 

Pada contoh di atas, fungsi control Translator akan mengubah text pada suatu control (pada contoh di atas adalah control Label1) menjadi text dengan bahasa yang diinginkan, sesuai dengan nilai DestinationLanguage.

 

Selamat mencoba dan selamat menikmati liburan.

Share this post: | | | |
Posted: Apr 18 2009, 12:48 PM by reyza | with 1 comment(s)
Filed under:
Silverlight 3.0’s friendly URL & SEO

Pada posting sebelumnya sudah ada perkenalan dengan Navigation Framework pada Silverlight 3.0. Pada posting tersebut dapat dilihat penggunaan Navigation Framework sebagai menu utama. Pada framework tersebut dapat dilihat setiap aksi dilakukan pada control hyperlink atau control yang berhubungan dengan menu akan mempunyai pengaruh mengubah URL pada address bar yang ada pada browser. Framework ini juga memungkinkan developer untuk melakukan manipulasi URL sehingga mudah terbaca.

Ceritanya akan ditampilkan daftar siswa dan kemudian user dapat memilih salah satu dari data tersebut untuk menampilkan detail dari siswa tersebut.

Dari kasus tersebut maka langkah-langkah yang dilakukan adalah sebagai berikut :

{Membuat Project Silverlight Navigation Project}

Membuat project Silverlight dengan menggunakan template Silverlight Navigation Project.

01

{Manipulasi URL}

Bila kita jalankan project ini dan kita perhatikan alamat pada address bar, maka dapat kita ketahui bawah URL tersebut memberikan alamat asli dari setiap Page.  Maka kita bisa melakukan manipulasi URL ini dengan menambahkan baris berikut pada App.xaml.

<Application.Resources>
. 
. 
.
    <navigation:UriMapper x:Key="uriMapper">
        <navigation:UriMapping Uri="Home" MappedUri="/Views/HomePage.xaml" />
        <navigation:UriMapping Uri="About" MappedUri="/Views/AboutPage.xaml" />
    </navigation:UriMapper>
. 
. 
.
</Application.Resources>

Selanjutkan modifikasi file MainPage.xaml dan ubah bagian berikut ini :

<Button Click="NavButton_Click" Tag="/Views/HomePage.xaml" Content="home" 
        Style="{StaticResource PageLinkStyle}"/>
<Button Click="NavButton_Click" Tag="/Views/AboutPage.xaml" Content="about" 
        Style="{StaticResource PageLinkStyle}"/>

Menjadi seperti berikut :

<Button Click="NavButton_Click" Tag="Home" Content="home" 
        Style="{StaticResource PageLinkStyle}"/>
<Button Click="NavButton_Click" Tag="About" Content="about" 
        Style="{StaticResource PageLinkStyle}"/>

Hasilnya dapat dilihat dari URL pada address bar.

{Menyiapkan Data}

Langkah selajutnya menyiapkan class model dan akses “data” tersebut.

namespace SilverlightNavSEO.Models
{
    public class Student
    {
        public string NIM { set; get; }
        public string Name { set; get; }
        public string Address { set; get; }
    }
}

Dan dimiliki class untuk mengakses data seperti berikut :

using System.Collections.Generic;
using System.Linq;
 
namespace SilverlightNavSEO.Models
{
    public class StudentsDAO
    {
        public List<Student> GetAll()
        {
            List<Student> students = new List<Student>();
            students.Add(new Student() { NIM = "10297028", Name = "Reza", Address = "Indonesia" });
            students.Add(new Student() { NIM = "10296029", Name = "Houari", Address = "Korea" });
            students.Add(new Student() { NIM = "10298028", Name = "Meru", Address = "Indonesia" });
 
            return students;
        }
 
        public Student Get(string NIM)
        {
            var student = from c in GetAll()
                          where c.NIM == NIM
                          select c;
 
            return student.First();
        }
    }
}

Pada contoh di atas terdapat 2 method yaitu :

  • GetAll, yang mempunyai fungsi untuk mengambil seluruh data.
  • Get, yang berfungsi untuk mengambil nilai satu data yang dipilih berdasarkan NIM.

Untuk menampilkan “data” tersebut cukup dengan memodifikasi file HomePage.xaml dan HomePage.xaml.cs seperti baris kode berikut :

<navigation:Page x:Class="SilverlightNavSEO.HomePage" 
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           Title="HomePage Page">
    <Grid x:Name="LayoutRoot" Background="White">
        <ItemsControl x:Name="StudentList">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <HyperlinkButton Content="{Binding NIM}" Tag="{Binding NIM}" Click="HyperlinkButton_Click"/>
                        <TextBlock Text="{Binding Name}" />
                    </StackPanel>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</navigation:Page>

Baris kode file HomePage.xaml.cs :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Navigation;
using SilverlightNavSEO.Models;
 
namespace SilverlightNavSEO
{
    public partial class HomePage : Page
    {
        public HomePage()
        {
            InitializeComponent();
            StudentsDAO s = new StudentsDAO();
            StudentList.ItemsSource = s.GetAll();
        }
 
        // Executes when the user navigates to this page.
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
 
        }
 
        private void HyperlinkButton_Click(object sender, RoutedEventArgs e)
        {
            HyperlinkButton hb = sender as HyperlinkButton;
            string nim = Convert.ToString(hb.Tag);
 
            this.NavigationService.Navigate(new Uri(string.Format( "Student/{0}", nim), UriKind.Relative));
        }
 
    }
}

Setelah proses Build dan “View in Browser” dapat kita lihat hasil seperti berikut ini :

 02

Selanjutnya akan dibuat fungsi yang memungkinkan user untuk mengklik NIM dan melihat detail data berdasarkan NIM yang dipilih. Detail dari data Student ini akan ditampilkan dalam suatu Page baru.

Berikut adalah langkah untuk membuat Page baru : Klik kanan pada folder Views yang terdapat pada project Silverlight dan pilih Add New Item, pada jendela Add New Item pilih Silverlight Page dan berikan nama StudentDetail.xaml :

Dan berikut baris kode pada file StudentDetail.xaml :

<navigation:Page x:Class="SilverlightNavSEO.Views.StudentDetail" 
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           Title="StudentDetail Page">
    <Grid x:Name="LayoutRoot" Background="White">
        <StackPanel x:Name="StudentDetail" Orientation="Vertical">
            <TextBlock x:Name="NIM" Text="{Binding NIM}"/>
            <TextBlock x:Name="Name" Text="{Binding Name}"/>
            <TextBlock x:Name="Address" Text="{Binding Address}"/>
        </StackPanel>
    </Grid>
</navigation:Page>

Kode file StudentDetail.xaml.cs :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Navigation;
 
using SilverlightNavSEO.Models;
 
namespace SilverlightNavSEO
{
    public partial class StudentDetail : Page
    {
        public StudentDetail()
        {
            InitializeComponent();
            Loaded += new RoutedEventHandler(StudentDetail_Loaded);
        }
 
        void StudentDetail_Loaded(object sender, RoutedEventArgs e)
        {
            StudentsDAO studentDAO = new StudentsDAO();
            Student student = studentDAO.Get(Convert.ToString(this.NavigationContext.QueryString["nim"]));
            this.DataContext = student;
        }
 
        // Executes when the user navigates to this page.
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            
        }
 
    }
}

Medaftarkan Page StudenDetail.xaml pada App.xaml sehingga menjadi berikut :

<navigation:UriMapper x:Key="uriMapper">
    <navigation:UriMapping Uri="Home" MappedUri="/Views/HomePage.xaml" />
    <navigation:UriMapping Uri="About" MappedUri="/Views/AboutPage.xaml" />
    <navigation:UriMapping Uri="Student/{nim}" MappedUri="/Views/StudentDetail.xaml?nim={nim}" />
</navigation:UriMapper>

Dari konfigurasi URL di atas maka kita dapat

04

URL di atas lebih manusiawi dan ‘mudah’ untuk diingat oleh user. Selain itu dengan URL seperti itu juga akan sangat bermafaat untuk SEO. Semoga bermanfaat.

{Catatan}

Pada file StudentDetail.xaml.cs kita temui baris kode berikut :

void StudentDetail_Loaded(object sender, RoutedEventArgs e)
{
     StudentsDAO studentDAO = new StudentsDAO();
     Student student = studentDAO.Get(Convert.ToString(this.NavigationContext.QueryString["nim"]));
     this.DataContext = student;
}

Method StudentDetail_Loaded di daftarkan pada constructor class StudentDetail dengan maksud untuk mendaftarkan method ini sebagai method yg dipanggil oleh event Loaded.

Tetapi bagi yang tidak ingin mendaftarkan pada event Loaded, maka ketiga baris dari isi method StudentDetail_Loader ini dapat diletakan pada method OnNavigatedTo seperti dibawah ini :

// Executes when the user navigates to this page.
protected override void OnNavigatedTo(NavigationEventArgs e)
{
    StudentsDAO studentDAO = new StudentsDAO();
    Student student = studentDAO.Get(Convert.ToString(this.NavigationContext.QueryString["nim"]));
    this.DataContext = student;
}

Selamat mencoba dan silakan unduh source program di atas dengan menusukkan mouse anda ke url di bawah ini :)

Share this post: | | | |
Posted: Apr 06 2009, 07:46 PM by reyza | with 2 comment(s)
Filed under: