Ahmad Masykur

Share your knowledge although one function!

About the author

Ahmad Masykur is a Software Architecture Engineer at PT. Freeport Indonesia Jakarta Indonesia.
In this blog, I share things of interest to me. Most topics are likely to be related to software development, but don't hold me to it.

Certificates



Awards


Powered by

Widget Prayer Time not found.

There is an error in XML document (4, 16278).X

Page List

Validators


Ahmad Masykur

ASP.NET Ajax Client Template | Select Command

ASP.NET Ajax client template juga memiliki fitur menarik yaitu select command sebagaimana GridView pada ASP.NET server control. Pada contoh post sebelumnya, saya telah tunjukkan bagaimana membuat sebuah client template pada sebuah table. Pada post kali ini saya akan buat baris pada table tersebut dapat dipilih dengan melakukan klik pada salah satu baris. Ada dua cara untuk melakukan hal ini, secara declarative dan imperative (JavaScript).

Object control DataView memiliki property selecteditemclass yang dapat diisi dengan class element yang dipilih. Property tersebut dapat diset secara declarative maupun imperative (JavaScript). Sebelum membuat DataView dapat dipilih, buat dulu class yang ditampilkan saat row terpilih. Class tersebut diberi nama selected-row

<style type="text/css"> .sys-template { display:none; visibility:hidden; } .selected-row { background: #ffff7f; color: Green; } </style>
Select Command secara Declarative

Untuk membuat DataView dapat dipilih secara declarative, tambahkan property sys:command="select" pada table row (TR) dan selecteditemclass property pada dataview seperti pada contoh berikut.

<tbody id="stockListView" class="sys-template" sys:attach="dataview" dataview:serviceuri="StockService.svc" dataview:query="GetStocks" dataview:selecteditemclass="selected-row"> <tr sys:command="select" style="cursor: pointer" > <td>{{Symbol}}</td> <td>{{Quote}}</td> <td>{{Change}}</td> <td>{{Day}}</td> <td>{{Time}}</td> </tr> </tbody>

Dengan hanya menambahkan property tersebut, sekarang table dapat dipilih (select) dan warna pada baris yang dipilih akan berubah.

Select Command secara Imperative

Penggunaan select command juga dapat dilakukan secara imperative dengan JavaScript. Perlakuannya sama antara declarative dan imperative. Pada cara imperative, row template ditambahkan attribute sys:command="select".

<tbody id="stockListView" class="sys-template"> <tr sys:command="select" style="cursor: pointer"> <td>{{Symbol}}</td> <td>{{Quote}}</td> <td>{{Change}}</td> <td>{{Day}}</td> <td>{{Time}}</td> </tr> </tbody>

Jangan lupa pada tag body juga ditambahkan namespace sys untuk supaya attribute sys dikenali dalam body html.

<body xmlns:sys="javascript:Sys">

Setelah semua attribute disiapkan, tinggal menambahkan property selectedItemClass pada object DataView.

var dataview = $create( Sys.UI.DataView, { serviceUri: "StockService.svc", query: "GetStocks", selectedItemClass: "selected-row" }, {}, {}, $get("stockListView") );

Tampilan baris yang dipilih akan seperti pada gambar di bawah

image

Dengan client template, pemprograman halaman html yang interactive menjadi lebih mudah.

Source-code contoh program ini dapat diunduh pada link di bawah.


Categories: ASP.NET AJAX
Permalink | Comments (11) | Post RSSRSS comment feed

ASP.NET Ajax Client Template | JavaScript Client Binding

Dari post sebelumnya, telah saya bahas mengenai ASP.NET Ajax 4.0 Client Template. Pada tulisan tersebut, saya bahas binding data tanpa koding javascript sedikitpun. Dengen client template memang sangat membatu dalam proses binding di sisi client. Binding tidak hanya bisa dilakukan secara declarative seperti pada post sebelumnya. Ada kalanya perlu dilakukan binding secara programming dengan JavaScript. Untuk melakukan binding dengan JavaScript, langkah persiapan yang dilakukan sama seperti pada declarative binding. Perbedaannya pada bagaimana cara membinding data dari datasource ke template.

Berikut saya jelaskan apa yang harus dilakukan untuk client binding dengan JavaScript. Kita asumsikan service dan template yang digunakan sama seperti pada post sebelumnya.

Pada halaman HTMl tidak perlu dideklarasikan XML namespace baru seperti pada metode declarative binding. Template masih tetap sama, hanya attribute sys:attach, dataview:serviceuri dan dataview:query tidak perlu ditulis lagi.

<body> <div> <table border="1"> <thead> <tr> <td>Symbol</td> <td>Quote</td> <td>Change</td> <td>Day</td> <td>Time</td> </tr> </thead> <tbody id="stockListView" class="sys-template"> <tr> <td>{{Symbol}}</td> <td>{{Quote}}</td> <td>{{Change}}</td> <td>{{Day}}</td> <td>{{Time}}</td> </tr> </tbody> </table> </div> </body>

Selanjutnya tinggal  buat binding data dengan JavaScript. Attribute sys:attach, dataview:serviceuri dan dataview:query yang sebelumnya ditulis di deklarasi tag, sekarang digantikan dengan JavaScript object.

<script type="text/javascript"> function pageLoad() { $create( Sys.UI.DataView, { serviceUri: "StockService.svc", query: "GetStocks" }, {}, {}, $get("stockListView") ); } </script>

Kita dapat melakukan binding kapan saja apakah setelah menekan tombol tertentu atau pada waktu pageLoad seperti contoh di atas. Contoh kode untuk client binding dengan JavaScript ini dapat diunduh dari link di bawah.


Categories: ASP.NET AJAX
Permalink | Comments (8) | Post RSSRSS comment feed

ASP.NET Ajax Client Template | Bener-bener Ajax

Masih menggunakan UpdatePanel untuk membuat halaman web "seakan-akan" mendukung Ajax? UpdatePanel bukan Ajax yang sebenarnya tapi hanya partial rendering saja. Terdapat dua jenis template ajax pada teknologi Microsoft. Pertama server side template yang dibungkus oleh UpdatePanel. Dan yang kedua adalah client side template yang terdapat pada ASP.NET Ajax 4.0 (saat ini masih preview 3). Dalam tulisan kali ini saya akan menunjukkan bagaimana mudahnya bikin ajax dengan client template ASP.NET Ajax 4.0.

Untuk membuat client template, yang dibutuhkan adalah.

  1. ASP.NET Ajax 4.0 Preview 3 (http://www.codeplex.com/aspnet)
  2. Ajax-Enabled WCF Service sebagai datasource
  3. Html page

Langkah langkah pembuatan ASP.NET Client Template.

Buat class StockInfo.cs
using System.Runtime.Serialization; namespace AjaxClientTemplate { [DataContract] public class StockInfo { [DataMember] public string Symbol { get; set; } [DataMember] public string Quote { get; set; } [DataMember] public string Change { get; set; } [DataMember] public string Day { get; set; } [DataMember] public string Time { get; set; } } }
Buat WCF Service

Buat Ajax-Enable WCF Service dengan add new item --> Ajax Enabled WCF Service dan ganti isinya dengan

using System.Collections.Generic; using System.Linq; using System.ServiceModel; using System.ServiceModel.Activation; namespace AjaxClientTemplate { [ServiceContract(Namespace = "contoh.com")] [AspNetCompatibilityRequirements( RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)] public class StockService { // Add [WebGet] attribute to use HTTP GET [OperationContract] public IEnumerable<StockInfo> GetStocks() { var stocks = new List<StockInfo> { new StockInfo { Symbol = "FCX", Quote = "Freeport McMoRan", Change = "3.72 (16.69%)", Day = "21.50 - 26.05", Time = "Nov 13" }, new StockInfo { Symbol = "YHOO", Quote = "Yahoo! Inc", Change = "0.81 (7.83%)", Day = "9.76 - 11.17", Time = "Nov 13" }, new StockInfo { Symbol = "GOOG", Quote = "Google Inc", Change = "21.08 (7.24%)", Day = "280.00 - 313.00", Time = "Nov 13" } }; return stocks.AsEnumerable(); } } }

 

Buat Halaman Html

Pada halaman html tambahkan MicrosoftAjax.js (atau MicrosoftAjax.debug.js untuk versi debug) pada project dengan add new existing item. File ini biasanya terdapat di C:\Program Files\Microsoft ASP.NET 3.5 Extensions\MicrosoftAjaxLibrary\System.Web.Extensions\3.6.0.0\3.6.20830.0

Tambahkan juga file MicrosoftAjaxTemplates.js (atau MicrosoftAjaxTemplates.debug.js untuk versi debug) yang didownload dari http://www.codeplex.com/aspnet. Pada halaman html referensikan kedua file javascript tersebut pada bagian header.

<script type="text/javascript" src="MicrosoftAjaxAdoNet.debug.js" ></script> <script type="text/javascript" src="MicrosoftAjaxTemplates.debug.js" ></script>

Buat style sys-template dengan style display: none untuk membuat template tidak ditampilkan sebelum di-bind.

<style type="text/css"> .sys-template { display:none; visibility:hidden; } </style>

Tambahkan beberapa namespace pada body tag.

<body xmlns:sys="javascript:Sys" xmlns:dataview="javascript:Sys.UI.DataView" sys:activate="*">

Terakhir buat template untuk menampilkan data.

<table border="1"> <thead> <tr> <td>Symbol</td> <td>Quote</td> <td>Change</td> <td>Day</td> <td>Time</td> </tr> </thead> <tbody id="stockListView" class="sys-template" sys:attach="dataview" dataview:serviceuri="StockService.svc" dataview:query="GetStocks"> <tr> <td>{{Symbol}}</td> <td>{{Quote}}</td> <td>{{Change}}</td> <td>{{Day}}</td> <td>{{Time}}</td> </tr> </tbody> </table>

Hasil akhir halaman tersebut seperti terlihat pada gambar berikut.

image

Dengan Web Development Helper dapat dilihat bahwa data yang dikirim dari server berupa JSON string, bukan html seperti pada UpdatePanel.

image

Dengan menggunakan ASP.NET Ajax client template, aplikasi jauh lebih cepat daripada UpdatePanel karena hanya data yang ditransmisikan antara client dan server. Ini ajax sebenarnya, bukan ajax bohong-bohongan dengan UpdatePanel.

Source-code contoh tersebut dapat diunduh dari link di bawah


Categories: ASP.NET AJAX
Permalink | Comments (7) | Post RSSRSS comment feed

Mengenal .NET Micro Framework

Microsoft .NET Micro Framework merupakan sebuah platform untuk membangun aplikasi di atas embedded system. Embedded system memiliki sumber daya hardware yang terbatas seperti memori dan prosesor yang sangat terbatas. Microsoft .NET Micro Framework menyediakan library untuk menangani semua sumber daya yang terbatas ini sehingga pemprograman dengan embedded device (atau lebih sering disebut sebagai microcontroller/microcomputer) lebih muudah.

Dahulu untuk memprogram microcontroller hanya bisa dilakukan dengan assembler atau C/C++ (walaupun ada yang porting ke Basic/Pascal) sehingga pengaturan IO dan memori harus dilakukan oleh programmer sendiri. Selain pengaturan memori, operasi perhitungan seperti perkalian, pembagian, floating point, dan operasi matematika lain harus diprogram secara manual. Semua pekerjaan tersebut kini telah dibantu dengan library yang telah tersedia dalam Microsoft .NET Micro Framework. Bahasa yang digunakan juga tidak lagi menggunakan assembler atau C/C++ melainkan menggunakan C# dengan IDE Visual Studio 2005/2008.

Microsoft .NET Micro Framework mengandung:

  • Footprint .NET yang lebih kecil (hanya membutuhkan RAM sekitar 300KB).
  • Class library .NET dibuat khusus untuk embedded application, termasuk class-class GUI dapat dimodelkan dengan Windows Presentation Foundation (tanpa WPF markup language).
  • Bootable CLR dapat dijalankan langsung di atas hardware tanpa sistem operasi.
  • Mendukung hardware yang umum dan interkoneksi (nonvolatile memory, GPIO, I2C, RS232, SPI).
  • Device driver yang teratur (managed) untuk perangkat yang terhubung melalui interkoneksi yang didukung.
  • Terintegrasi penuh dengan Visual Studio termasuk debugging kode yang berjalan di atas device.
  • Emulator yang dapat dikembangkan untuk menjalankan aplikasi di dalam Windows sebelum di-deploy ke device.

Arsitektur .NET Micro Framework dapat dilihat seperti gambar di bawah.

image

Terdapat dua komponen pembentuk Microsoft .NET Micro Framework yaitu: Bootable Runtime dan .NET Micro Framework CLR. Bootable runtime berfungsi sebagai OS dan driver-driver umum untuk mengakses hardware. Komponen .NET Micro Framework CLR berisi runtime yang sangat kecil, teroptimasi dan teratur di dalamnya terdapat library yang dapat digunakan dalam aplikasi embedded system seperti library timer, communication, garbage collector, system type, dll.

Tujuan utama dari CLR .NET Micro Framework adalah:

  • Ukuran yang sangat kecil
    • Dibuat dari awal lagi (bukan porting dari .NET framework yang sudah ada).
    • Berjalan tanpa OS (memiliki OS sendiri).
    • Runtime dan library disesuaikan dengan pengembangan embedded system.
  • Dapat dijalankan dari ROM atau memori flash.
  • Dioptimasikan untuk penggunaan energi yang efisien dalam penggunaan batere.
  • Relatif lebih mudah porting ke hardware lain karena aplikasi jalan di atas Hardware Abstraction Layer (HAL).

Informasi lebih lanjut mengenai embedded platform dapat dilihat di:


Permalink | Comments (22) | Post RSSRSS comment feed

Dare To Dream Different Challenge Preparation

Dari informasi blog pak Risman, From PDC 2008 | .NET Micro Framework, bahwa Microsoft telah mengeluarkan .NET Micro Framework 3.0. Dari blog tersebut juga saya dapat informasi mengenai kompetisi berhadiah 50.000 USD yaitu Microsoft Dare to Dream Different Challenge. Dengan pengalaman membuat berbagai macam modul microcontroller sewaktu kuliah di Teknik Elektro Undip Semarang, saya tertarik dengan tantangan ini. Saya bersama Zeddy Iskandar mencoba men-submit ide ke tim Dare to Dream Different Challenge dalam waktu dekat.

Tadi siang, saya telah menerima bingkisan Embedded Development Kit for the Microsoft .NET Micro Framework dari Mr Zeddy dan siap untuk di-explore.

Picture0019 Picture0021

Setelah download .NET Micro Framework 3.0 SDK, kini saya siap untuk membangun applikasi embedded system berbasis teknologi Microsoft .NET.

Semua informasi yang berhubungan dengan .NET Micro Framework ada di http://www.microsoft.com/netmf/default.mspx.


Permalink | Comments (7) | Post RSSRSS comment feed

ReSharper Berguna bagi Code-Reviewer

ReSharper, produk yang sangat membantu dalam meningkatkan produktivitas software developer. Dalam post kali ini saya akan share sedikit kemudahan ReSharper dalam membantu pekerjaan seorang code-reviewer.

Sebagai seorang code-reviewer di kantor, saya harus teliti dalam memeriksa kode program yang dibuat oleh programmer lain. Saya harus periksa algoritma baris demi baris yang digunakan apakah bisa menimbulkan bug sesudah naik di production (runtime exception). Dengan ReSharper, beberapa pekerjaan menjadi lebih mudah. Salah satu fitur yang sangat membantu dalam proses code-review adalah ReSharper dapat mendeteksi kemungkinan terjadinya runtime-exception.

image

Seperti terlihat pada gambar di atas, terdapat garis bawah biru pada code yang bisa menimbulkan runtime-exception. Sebagai code-reviewer, saya bisa segera memberitahukan ke developer untuk membetulkan code yang dibuat.

Semoga bermanfaat


Categories: ReSharper
Permalink | Comments (14) | Post RSSRSS comment feed