Reyza

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

Public

January 2009 - Posts

ASP.NET U jQuery = RIAnimation

ASP.NET, teknologi ini bukan barang baru lagi buat telinga atau buat jari-jari ini, karena hampir setiap hari jari-jari ini merakit baris demi baris untuk membangun suatu aplikasi aplikasi sederhana :)

jQuery, 'framework' Javascript ini juga bukan barang baru lagi dan malah semakin berkembang saja. jQuery mempunyai banyak fungsi dan salah satunya untuk mempercantik antarmuka halaman website. Salah satu 'komponen' jQuery yang dapat kita gunakan untuk keperluan ini adalah jQuery UI, dengan ini kita dapat membuat antarmuka yang interaktif, salah satunya animasi.

jQuery UI telah membuat pembuatan animasi menjadi lebih mudah. Apa ada yang lebih mudah lagi? Jawabnya adalah dengan menggunakan RIAnimation. Sebagai bekal kita dapat mendownload salah satu dari 3 file berikut ini :

Untuk melihat secara langsung tanpa merepotkan diri animasi-animasi yang ditawarkan RIAnimation maka dapat mengunjungi link berikut ini.

Lalu bagaimana mana cara kita memulainya, membuat animasi sederhana dengan menggunakan RIAnimation?

Seperti biasa selalu ada cara sederhana, setelah mengunduh HMM.RIAnimation3.5.zip atau HMM.RIAnimation.zip maka kita akan bertemu dengan HHM.RIAnimation.dll. Kita cukup menambahkan file tersebut ke dalam direktori Bin pada Website atau menambahkan sebagai reference pada Web Application.

Kemudian menambahkan baris berikut ini :

<%@ Register Assembly="HHM.RIAnimation" 
    Namespace="HHM.RIAnimation" 
    TagPrefix="hhm" %>

Setelah itu kita dapat menggunakan baris-baris berikut ini :

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Panel ID="PnlAnimations" runat="server">
<asp:UpdatePanel ID="uPnlViewer" runat="server">
<ContentTemplate>
<asp:Panel ID="PnlViewer" runat="server" CssClass="viewpane">
<asp:Panel ID="PnlAnimation" runat="server">
<asp:Image ID="ImgIcon" runat="server"
ImageUrl="~/Images/IconRIAnimation256.png"
AlternateText="" />
</asp:Panel>

<asp:Button ID="BtnAnimation" runat="server"
Text="Show Animation" />
<asp:Button ID="BtnReset" runat="server" Text="Reset" />
</asp:Panel>

<hhm:RIAnimator ID="RIAnimation" runat="server"
TriggerControlID="BtnAnimation"
TargetControlID="PnlAnimation"
TriggerEvent="Click"
AutoPostBack="false"
Animation="CloseHorizontally">
</hhm:RIAnimator>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>

Dari contoh di atas maka dapat kita lihat kontrol RIAnimation, dan berikut adalah sedikit keterangan mengenai atribut dari kontrol ini :

  • TargetControlID, adalah atribut yang berisi ID dari panel area animasi.
  • TriggerControlID, adalah atribut yang berisi ID kontrol yang akan mentrigger animasi untuk berjalan.
  • Animation, adalah nilai tipe animasi yang akan digunakan.

Dalam contoh di atas, animasinya hanya menggerakkan gambar dengan tipe animasi CloseHorizontally. Apakah animasi ini hanya untuk gambar saja? Tentu tidak. Kita bisa membuat animasi Gridview, TreeView, Form dan lain-lain, asalkan kontrol-kontrol tersebut berada pada panel yang menjadi area animasi.

Dengan menggunakan RIAnimation mungkin kita bisa membuat aplikasi web yang dibuat akan tampil lebih cantik. Semoga bermanfaat.

Have a nice weekend.

Share this post: | | | |
Posted: Jan 31 2009, 05:51 PM by reyza | with 2 comment(s) |
Filed under: , ,
Hostip.Info, server "iseng" untuk mengetahui lokasi anda

Mari kita bisa berkenalan dengan domain dengan nama Hostip.Info.  Website ini mempunyai service untuk memberikan informasi kota, negara serta latitude & longitute lokasi terserbut berdasarkan IP adrress. Selain itu kita juga mendapatkan informasi berupa gambar bendera negara. Bagaimana bila IP address komputer kita tidak dikenali atau tidak terdaftar? Ya cukup daftarkan saja ke website ini, ngga perlu repot toh, karena memang cara mendaftarkannya tidak membuat repot atau menaikkan kadar adrenalin kita :)

Kita juga dapat memanfaatkan service server untuk memeriksa IP adrress yang menakses website kita, karena Hostip.Infor mempunyai API yang dapat digunakan, keterangan lengkapnya ada di sini. Dan berikut informasi yang dapat kita gunakan, yaitu :

Untuk mengambil informasi kode negara kita dapat menggunakan URL ini : http://api.hostip.info/country.php. Bila ingin mengambil informasi negara beserta kota maka dapat digunakan url berikut http://api.hostip.info/get_html.php?ip=12.215.42.19&position=true, hasilnya seperti berikut :

Country: UNITED STATES (US)
City: Sugar Grove, IL

Berikut ini adalah url yang akan mengembalikan nilai nama negara, kota dan nilai latitude & longitude : http://api.hostip.info/get_html.php?ip=114.58.75.181&position=true, hasilnya akan seperti berikut ini :

Country: INDONESIA (ID)
City: Banjarmasin
Latitude: -3.3333
Longitude: 114.583

Bila ingin mendapatkan data berupa XML agar mudah untuk diolah maka dapat menggunakan url berikut ini http://api.hostip.info/?ip=114.58.75.181 hasilnya dapat dilihat pada kode XML di bawah ini.

Capture

Selain informasi berupa text maka kita dapat mendapatkan image bendera negara dengan menggunakan url berikut : http://api.hostip.info/flag.php?ip=12.215.42.19 atau http://api.hostip.info/flag.php.

Sekarang mari kita bermain dengan API dari HostIp.info dengan ASP.NET.

Untuk membaca dan mengambil data yang kita perlukan dari output berupa XML tersebut, cukup menggunakan baris kode seperti di bawah ini :

using (var webclient = new System.Net.WebClient())
{
    data = webclient.DownloadString(String.Format("http://api.hostip.info/?ip={0}&position=true", ipaddress));
}

var xmlResponse = System.Xml.Linq.XDocument.Parse(data);
var gml = (System.Xml.Linq.XNamespace)"http://www.opengis.net/gml";
var ns = (System.Xml.Linq.XNamespace)"http://www.hostip.info/api";

try
{
    var location = (from x in xmlResponse.Descendants(ns + "Hostip")
                    select new
                    {
                        CountryCode = x.Element(ns + "countryAbbrev").Value,
                        CountryName = x.Element(ns + "countryName").Value,
                        Latitude = float.Parse(x.Descendants(gml + "coordinates").Single().Value.Split(',')[0]),
                        Longitude = float.Parse(x.Descendants(gml + "coordinates").Single().Value.Split(',')[1]),
                        Name = x.Element(gml + "name").Value
                    }).SingleOrDefault();
}
catch (NullReferenceException)
{
}

Dengan kode sederhana di atas maka kita dapat mendapatkan nilai-nilai dari output XML tersebut dengan cukup mengambil nilai "field-field" dari query di atas, maka nilai-nilai tersebut dapat ditempatkan pada kontrol-kontrol seperti label, sebagai contoh dapat dilihat kode di bawah ini :

Label_Country_Value.Text = location.CountryName + " (" + location.CountryCode + ")";
Label_City_Value.Text = location.Name;
Label_Latitude_Value.Text = location.Latitude.ToString();
Label_Longitude_Value.Text = location.Longitude.ToString();

Hasilnya bisa dilihat pada gambar sederhana dibawah ini :
Capture

Pada form di atas menggunakan ASP.NET Ajax yang sederhana, jadi kontrol-kontrol server server TextBox, Button dan Label di atas berada di dalam UpdatePanel. Tujuannya tentu saja untuk menampilkan hasil aksi dari event button Get Data secara asynchronous.

Mari kita lanjutkan permainan ini, dari data tersebut di atas kita mempunyai data koordinat (latitude dan longitude). Artinya kita bisa memanfaatkan data tersebut untuk menampilkan lokasi kita pada peta dunia dengan bantuan Virtual Earth.

Hasil akhir yang ingin dihasilkan adalah seperti pada gambar di bawah ini :

Capture

Idenya adalah, user memasukkan IP Address pada TextBox, kemudian tombol Get Data ditekan, maka akan ada proses pada server untuk mengambil nilai data lokasi dan menampilkannya secara asynchronous. Setelah itu ada proses pada sisi client untuk mengambil data latitude dan longitude dari label yang ada dilayar. Setelah data didapat proses dilanjutkan untuk mengambar peta dengan bantuan Virtual Earth dengan koordinat titik pusat adalah nilai latitude dan longitude yang telah didapat sebelumnya.

Sebelumnya mari kita coba dulu untuk menggambar secara sederhana peta dengan memanfaatkan Virtual Earth.

Lakah pertama adalah tambahkan baris berikut ini :

<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2">
</script>

Selanjutkan tambahkan area untuk menggambar peta, area ini tentu saya harus berada di dalam tag body. Berikut adalah contoh tag yang digunakan untuk membuat area gambar.

<div id="DrawingArea" style="position:relative;width:500px; height:500px;"></div>

Selanjutnya kita membutuhkan suatu fungsi untuk menggambar peta pada area tersebut, cukup dengan menambahkan baris-baris seperti berikut ini :

<script type="text/javascript">      
var map = null;
function GetMap()
{
 map = new VEMap('DrawingArea');
 map.LoadMap();
}
</script>

Dalam dilihat pada kode di atas, pada area gambar kita melihat tag div dengan id=DrawingArea dan pada fungsi GetMap terdapat fungsi VEMap dengan parameter yang berisi nilai DrawingArea juga.

Berikut ini baris yang digunakan untuk menggunakan latitude dan longitute tertentu yang akan digunakan sebagai titik pusat gambar pada area gambar.

map = new VEMap('DrawingArea');
map.LoadMap(new VELatLong(-3.3333, 114.583), 9, 'r', false);

Pada baris kedua dapat dilihat bagaimana cara untuk memberikan nilai latitude dan longitude.

Selanjutnya adalah memodifikasi webform yang telah kita buat sebelumnya. Pertama adalah membuat tambahan event pada Button Get Data.

<asp:Button ID="Button_GetData" 
    OnClientClick="ShowMyMap()" 
    runat="server" 
    Text="Get Data" 
    ValidationGroup="DefaultGroup" 
    onclick="Button_GetData_Click" />

Event yang ditambahkan adalah OnClientClick yang berfungsi untuk memanggil fungsi javascript ShowMyMap(). Dan berikut adalah isi dari fungsi ShowMyMap() :

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

<script type="text/javascript">
    var map = null;
    
    function ShowMyMap() {
        var textBoxIP = $get("TextBox_IP");

        if (textBoxIP.value != "") {
            var prm = Sys.WebForms.PageRequestManager.getInstance();
            prm.add_endRequest(EndRequest); 
        }
    }

    function EndRequest(sender, args) {
        latitude = $get("HiddenField_Latitude_Value");
        longitude = $get("HiddenField_Longitude_Value");
        
        map = new VEMap('myMap');
        map.LoadMap(new VELatLong(parseFloat(longitude.value), parseFloat(latitude.value)), 9, 'r', false);
    }
</script>

Fungsi javascript di atas sengaja diletakkan di bawah tag ScriptManager agar dapat menggunakan kemudahan-kemudahan yang dimiliki oleh ASP.NET Ajax di sisi client. seperti yang dilihat dapat dilihat $get yang penggantikan fungsi document.GetElementById.

Pada fungsi ShowMyMap ditambahkan baris yang berfungsi untuk memeriksa status proses pada sisi server ketika selesai.

prm.add_endRequest(EndRequest); 

Ketika proses telah selesai maka secara otomatis akan memanggil fungsi EndRequest yang berisi untuk mengambil nilai latitude dan longitude kemudian menggambar peta pada area yang telah disediakan.

Simple dan sederhan, semoga bermanfaat.

Note : Solution dari project ini dapat diunduh pada url di bawah ini.

Share this post: | | | |
Posted: Jan 26 2009, 10:25 PM by reyza | with 3 comment(s)
Filed under: ,
Mengenang mereka berdua

Ceritanya waktu itu masih mahasiswa yang lagi ada proyek buat virtual lab fisika dari dosen, dan kebetulan saat itu ada dua teknologi yang akan digunakan yaitu VRML atau Java. Kebetulan saat itu di Gramedia sedang diskon 50% untuk kedua buku di bawah ini.

_java_11 _vrml

Dan saat lagi beres-beres ternyata buku itu masih ada....ck ck ck.....serasa kembali ke jaman "Mac Gyver", "Knight Rider", "Aneka Ria Safari", "Selekta Pop" dan "Ria Jenaka".

Untung melihat buku ini :

 _multicore _f#

Jadi serasa kembali ke jaman "Number", "24", "Heroes", "House" dan "Supernatural".

Share this post: | | | |
Ingin ujian MCTS, MCPD atau MCITP dengan harga lebih murah?

Bingung ingin ambil ujian MCTS, MCPD atau MCITP tapi duit kurang ? Apakah kekurangan tersebut 10% dari total biaya ujian? Jangan putus aja, selalu ada jalan. Caranya cukup mudah, yaitu :

  • Kunjungi website berikut ini : http://www.learnandcertify.com/Request.aspx.
  • Setelah itu masukkan promotion code berikut ini : IDE93E81.
  • Seperti biasa, ikuti petunjuk berikutnya sampai mendapatkan kode voucher.
  • Setelah mendapatkan kode voucher yang menjadi kode diskon anda, anda tinggal berkunjung ke trainer center yang bekerja sama dengan Prometric atau VUE. Setelah sampai di trainer center tersebut tanyakan terlebih dahulu apakah anda dapat mendapatkan diskon dengan kode voucer yang telah anda dapatkan sebelumnya.

Note :

  • Gunakan promotion code tersebut sebelum tanggal 31 Maret 2009.
  • Tanggal akhir ujian adalah 31 Mei 2009.
  • Kode voucher hanya berlaku di Indonesia.
  • Bila di ujian pertama anda gagal, jangan kawatir anda mempunyai kesempatan untuk ujian kembali dengan gratis atau bahasa kerennya "Second Shot".

 

Share this post: | | | |