Reyza

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

Public

June 2008 - Posts

Revelation of purpose

We're not here because we're free.

We're here because we're not free.

There's no escaping reason, no denying purpose, because as we know, without purpose, we would not exist.

 

It is purpose that created us.

Purpose that connects us.

Purpose that pulls us.

That guide us.

That drive us.

It is purpose that defines.

Purpose that binds us.

 

We're here to take from you what you tried to take from us: PURPOSE.

Share this post: | | | |
FusionCharts, Free Chart Component

Kemaren sudah ada cerita tentang Visifire di sini, komponen chart yang memanfaatkan Silverlight sehingga sehingga chart yang ditampilkan terlihat indah dengan tayangan animasi, dan gratis. Sekarang Visifire sudah mencapai versi 1.0.13 Beta dan sudah support Silverlight 2 Beta 2. Visifire, termasuk komponen chart yang adil dan tidak pandang teknologi...ASP.NET ok...JSP...oke...PHP juga bisa. Hal ini karena sumber data dan pendefinisian antarmuka menggunakan data format XML.

Tetapi mungkin ada yang masih kawatir dengan Silverlight yang masih kurang populer, maka dapat menggunakan komponen chart lain yang menggunakan teknologi yang lebih populer yaitu FusionCharts yang menggunakan Adobe Flash. Free? Iya....Bisa untuk ASP.NET, JSP, PHP? Iya juga...karena sumber data dan pendefinisian antarmuka menggunakan format XML seperti Visifire.

Capture

Sebelum menulis kode-kode pada ASP.NET, kita lihat dulu tipe-tipe chart apa saja yang disediakan oleh FusionCharts.

geek1 geek2

geek3  geek5

Seperti pada gambar, ada beberapa feature yang juga dimiliki oleh Visifire yaitu :

  • Line.
  • Bar.
  • Pie.
  • Area.
  • Doughnut.

Tipe-tipe chart di atas dapat dipresentasikan dalam 2D dan 3D. Nilai tambah dari FusionCharts adalah tipe chart seperti Candlestick chart yang biasa digunakan untuk presentasi data Financial, Funnel chart dan juga Gantt chart untuk keperluan pembuatan aplikasi yang berhubungan dengan Project Management {hmm....cocok untuk project pembuatan Telco Provider - Project Management ntar...}.

geek4 geek6

geek7

{Menggambar Chart dengan C#}

Sekarang masuk ke langkah apa yang mesti dilakukan apabila ingin menggunakan FusionCharts pada ASP.NET.

Langkah pertama tentu saja perlu web project entah itu berupa Website atau Web Application.

geek8

Setelah itu tambahakan Bin (ASP.NET Folder) pada Website dan tambahkan FusionCharts.dll pada direktori tersebut. Dimana mendapatkan FusionCharts.dll? Bila sudah download FusionChartsFree.zip di sini, maka FusionCharts.dll dapat ditemui disitu. Kemudian buat direktori Shared/FusionCharts dan tambahkan file-file seperti pada gambar.

geek9

{Icon file flash beda dengan biasanya karena install IrvanView}

File-file SWF pada Shared/FusionCharts ibaratnya berfungsi sebagai template chart dan datanya tinggal disuntik dari Data.xml.

Selain itu juga tambahkan Data.xml pada direktori Data (awalnya disimpan di dalam App_Data, tapi entah kenapa data dianggap tidak ada, sepertinya karena sifat dari App_Data yang tidak dapat diakses begitu saja dari sisi client) yang akan menjadi sample data untuk chart nanti, dengan isi seperti berikut :

<graph caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' decimalPrecision='0' formatNumberScale='0'>
<set name='Jan' value='462' color='AFD8F8' />
<set name='Feb' value='857' color='F6BD0F' />
<set name='Mar' value='671' color='8BBA00' />
<set name='Apr' value='494' color='FF8E46' />
<set name='May' value='761' color='008E8E' />
<set name='Jun' value='960' color='D64646' />
<set name='Jul' value='629' color='8E468E' />
<set name='Aug' value='622' color='588526' />
<set name='Sep' value='376' color='B3AA00' />
<set name='Oct' value='494' color='008ED6' />
<set name='Nov' value='761' color='9D080D' />
<set name='Dec' value='960' color='A186BE' />
</graph>

Selanjutkan ... menulis code pada ASPX seperti berikut :

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Import Namespace="InfoSoftGlobal" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>FusionCharts...Yuuk</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <%
        Response.Write(FusionCharts.RenderChartHTML("Shared/FusionCharts/FCF_Column3D.swf", "Data/Data.xml", "", "myFirst", "600", "300", true));
    %>
    </div>
    </form>
</body>
</html>

Perhatikan pada halaman ini perlu ditambahkan baris berikut :

<%@ Import Namespace="InfoSoftGlobal" %>

Hasilnya seperti berikut :

geek10

Bagaimana bila ingin mendapatkan chart dengan data yang secara programmatically atau dari database? Intinya adalah cukup dengan membuat string dengan format seperti yang ada pada file Data.xml. Sebagai contoh bisa dilihat dari kode yang ada pada contoh-contoh pada FusionChartsFree.zip ini.

Untuk file ASPX :

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="BasicDataXML.aspx.cs" Inherits="BasicExample_BasicDataXML" %>

<HTML>
<HEAD>
    <TITLE>
    FusionCharts Free - Simple Column 3D Chart using dataXML method
    </TITLE>    
</HEAD>
<BODY>
      <%= CreateCharts() %>
</BODY>
</HTML>
Dengan isi BasicDataXML.aspx.cs seperti berikut :
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using InfoSoftGlobal;

public partial class BasicExample_BasicDataXML : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    public string CreateCharts() {
        string strXML;
        strXML = "";
        strXML += "<graph caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' decimalPrecision='0' formatNumberScale='0'>";
        strXML += "<set name='Jan' value='462' color='AFD8F8' />";
        strXML += "<set name='Feb' value='857' color='F6BD0F' />";
        strXML += "<set name='Mar' value='671' color='8BBA00' />";
        strXML += "<set name='Apr' value='494' color='FF8E46'/>";
        strXML += "<set name='May' value='761' color='008E8E'/>";
        strXML += "<set name='Jun' value='960' color='D64646'/>";
        strXML += "<set name='Jul' value='629' color='8E468E'/>";
        strXML += "<set name='Aug' value='622' color='588526'/>";
        strXML += "<set name='Sep' value='376' color='B3AA00'/>";
        strXML += "<set name='Oct' value='494' color='008ED6'/>";
        strXML += "<set name='Nov' value='761' color='9D080D'/>";
        strXML += "<set name='Dec' value='960' color='A186BE'/>";
        strXML += "</graph>";

        return FusionCharts.RenderChartHTML("Shared/FusionCharts/FCF_Column3D.swf", "", strXML, "myNext", "600", "300", false);

    }
}

Perhatikan pada file CS ini perlu ditambahkan baris berikut :

using InfoSoftGlobal;

{Menggambar Chart dengan Javascript}

Berikut contoh penggunaan Javascript untuk menggambar chart :

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <script src="Shared/FusionCharts/FusionCharts.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        var strXML = "<graph caption='Montly Revenue' showNames='1'><set name='KS' value='32' color='AFD8F8'/><set name='Non-KS' value='16' color='F6BD0F'/></graph>";
        function updateChart(chartSWF){
            var chart1 = new FusionCharts(chartSWF, "chart1Id", "400", "300", "0", "0"); 
            chart1.setDataXML(strXML);
            chart1.render("chart1div");
         }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
       <div id="chart1div">
        FusionCharts
       </div>
       <script language="javascript" type="text/javascript"> 
          var chart1 = new FusionCharts("Shared/FusionCharts/FCF_Column3D.swf", "chart1Id", "400", "300", "0", "0");
          chart1.setDataXML(strXML);
          chart1.render("chart1div");
       </script>
    </div>
    </form>
</body>
</html>

Hasilnya :

geek11

Selamat mencoba :)

Share this post: | | | |
Silverlight 2 Beta 2, Duplex Communication

Sudah hampir 3 hari Silverlight 2 Beta 2 di-release. Untuk mengetahui lebih banyak bisa klik disini dan disini dan tentu aja di Silverlight.net.

Untuk men-download Silverlight Chainer sebesar 84MB yang lengkap dengan SDK, Runtime dan tool untuk VS 2008 bisa klik disini, sedangkan yang hanya ingin runtime-nya saja bisa mengunjungi link ini.

Ada beberapa feature-feature baru yang menarik buat saya pribadi, tetapi yang paling menarik adalah :

{Duplex Communication}

Feature ini memungkinkan server melakukan push data (Server Push). Artinya teknologi seperti yang dimiliki oleh Lightstreamer dan Comet bukan angan-angan lagi (angan-angan karena males bikin, angan-angan karena males pakai Lightstreamer yang berbayar dan Comet yang mesti menggunakan Apache), karena Silverlight sudah memberikannya. Apa fungsinya fasilitas ini nantinya?

Pertama bila saya ingin membuat aplikasi Chatting, tidak perlu lagi mengakali dengan menggunakan control Timer pada ASP.NET Ajax untuk meng-update UpdatePanel yang ujung-ujungnya mesti request ke server juga. Kasus lain, feature ini dapat dijadikan untuk membantu aplikasi yang berfungsi untuk monitoring seperti monitoring equipment atau sensor dan juga kasus stock ticker atau trader application.

Feature ini akan bergantung dengan WCF. Tunggu saja (kalau sempat) akan saya ulas feature ini beserta contoh kasus.

{REST & ADO.NET Data Services}

Bagi yang sudah pernah dengar Astoria (codename untuk ADO.NET Data Service) maka pada Silverlight 2 Beta 2 sudah support untuk mengkonsumsinya. Walau pada versi sebelumnya hal ini juga bisa dilakukan.

{Server Side Playlist}

Pada versi sebelumnya hanya mendukung client-side playlist maka pada Beta 2, sudah ada dukungan untuk server-side playlist. Tentu saja ini sangat erat kaitannya dengan feature Media pada Silverlight.

{Tab Control}

Ini adalah control baru yang dapat ditemui pada Silverlight 2 Beta 2.

Dan masih ada beberapa lagi feature yang menarik, tetapi tetap...yang paling menarik buat saya adalah feature Duplex Communication. Feature yang menarik dan layak dicoba. Saat ini Silverlight Chainer masih dalam tahap download baru 8%, maklum bandwidth cuma 12Kbps maksimal :)

Lalu bagaimana dengan Visifire's Silverlight Chart?

logo_visifire

Tenang, Visifire sudah support dengan Silverlight 2 Beta 2, beritanya dapat dibaca disini.

Sekarang ada yang baru pada Visifire's Silverlight Chart, selain untuk Webpage, yang baru adalah komponen untuk support Silverlight Application. Semuanya bisa di download disini.

Sudah saatnyakah menggunakan Silverlight 2 pada aplikasi kita? Saat Silverlight 2 Beta 1 keluar (bahkan sejak Silverlight 1.0) saya sudah menggunakannya pada aplikasi produksi. Bagi yang masih menimbang-nimbang untuk menggunakan Silverlight 2 Beta 2 pada aplikasi produksi mungkin bisa membaca kutipan Om ScottGu berikut :

"Silverlight 2 Beta2 supports a go-live license that allows you to start using and deploying Silverlight 2 for commercial applications. There will be some API changes between Beta2 and the final release, so you should expect that applications you write with Beta2 will need to make some updates when the final release comes out.  But we think that these changes will be straight-forward and relatively easy, and that you can begin planning and starting commercial projects now."

 

Selamat mencoba.

{menunggu download selesai dulu mode : on}

Capture

Share this post: | | | |
AutoMedia Module Improvement

Sedikit ada hubungannya pada posting sebelumnya yang ada di sini.

Dengan membuka penggunaan tag-tag : object, param, embed akan memungkinkan meng-embed konten seperti SoapBox, YouTube, SlideShare dan lain-lain termasuk konten dari Tube-Tube lain dari daerah abu-abu pada blog atau forum. Untuk meminimalisasi kebebasan yang tidak terkendali ini dapat dilakukan dengan membuat module kecil pada Community Server yang berfungsi untuk meng-embed konten dari site tertentu (hanya tertentu saja, misalnya hanya dari YouTube dan SoapBox saja). Module ini juga akan memudahkan dan mempersingkat user untuk menuliskan sintaks untuk menambahkan konten yang diinginkan.

{CS Module : AutoMedia}

Saat ini telah dikenal CSModule dengan nama AutoMedia yang dibuat oleh Gary McPherson yang dapat ditemui di sini. Dengan menggunakan custom module ini memungkin untuk meng-embed media dengan format asx,avi,wma,wmv,mpg,mov,mp4,flv,ra,ram,rpm,rv,mov,3gp,swf. Caranya? Cukup dengan menggunakan sintaks seperti berikut :

Capture

Sintaks di atas dapat ditulis pada editor posting blog dan forum. Bila anda yang membuat webcast atau mempunyai video yang menarik yang senada dengan tema Geeks Portal ini maka dapat anda melakukan cara di atas untuk men-share-nya.

Selain itu juga dapat meng-embed video dari SoapBox dan YouTube dengan sintaks berikut ini :

geek2

contohnya seperti video YouTube di bawah ini :

http://www.youtube.com/v/knQKdhGmL8s <p><a href="http://www.youtube.com/v/knQKdhGmL8s" target="_blank">http://www.youtube.com/v/knQKdhGmL8s</a></p>

View original media here: http://www.youtube.com/watch?v=knQKdhGmL8s

{Slide from SlideShare.net}

SlideShare adalahwebsite dengan layanan upload slide Power Point (Open Office dan PDF juga bisa) dan menampilkannya dengan memanfaatkan Flash, jadi tidak perlu menginstall Power Point bila ingin melihat slide tersebut, terlebih selama sudah terinstall plugin Flash pada browser, maka sistem operasi bukan menjadi hambatan lagi (walaupun ada Wine atau CrossOver di Linux untuk menginstall aplikasi Windows pada Linux).

Sayangnya module AutoMedia belum support untuk meng-embed ini ke posting blog atau forum, walaupun saya kira di awal dapat menggunakan tag media dengan type swf. Begitu juga dengan memanfaatkan perubahan konfigurasi pada communityserver.config. Jadi solusi yang paling mungkin, paling mudah dan paling singkat adalah dengan mengedit CSModule AutoMedia agar bisa support untuk embed slide dari SlideShare.

Langkah yang pertama dilakukan adalah membuat Class Library Project dengan class seperti berikut :

using System;
using System.Collections;
using System.Collections.Specialized;
using System.Configuration;
using System.Text;
using System.Text.RegularExpressions;
using System.Web;
using System.Xml;
using CommunityServer.Components;
using CommunityServer.Blogs.Components;
using CSMVPs.Components;

namespace INDC.Geeks.CSModules.Reyza
{
    public class AutoMediaImprovement : ICSModule
    {
      . . . .  
     }
}

artinya project ini akan membutuhkan reference seperti pada gambar berikut ini :

geek3

Karena kode untuk meng-embed slide dari SlideShare.net seperti ini :

geek4

maka perlu untuk support keperluan itu perlu ditambah kode seperti berikut :

switch (plugin)

{
   case "slideshare":
     objectTag.Tags.Add(new Parameter("movie", url));
     objectTag.Tags.Add(new Parameter("allowFullScreen", "true"));
     objectTag.Tags.Add(new Parameter("allowScriptAccess", "always"));
     Tag childTag = new Tag("embed");
     childTag.Parameters.Add("height", height);
     childTag.Parameters.Add("width", width);
     childTag.Parameters.Add("allowscriptaccess", "always");
     childTag.Parameters.Add("allowfullscreen", "true");
     childTag.Parameters.Add("src", url);
     childTag.Parameters.Add("type", "application/x-shockwave-flash");
     objectTag.Tags.Add(childTag);
     break;
   default:
     return fallbackString;

}

Lakukan kompilasi dan CSMVPs.Components.dll dan INDC.Geeks.CSModules.Reyza.dll siap di-deploy ke CS Site. Selanjutnya adalah mengupdate communityserver.config untuk menambahkan baris berikut di antara tag <CSModules> :

<add name="AutoMediaImprovement"
    type="INDC.Geeks.CSModules.Reyza.AutoMediaImprovement, INDC.Geeks.CSModules.Reyza"
    height="350"
    width="425"
    applicationTypes="Forum,Weblog,ContentManagement"
    defaultMessage="&lt;p&gt;&lt;b&gt;View original media here:&lt;/b&gt; &lt;a href=&quot;{0}&quot; title=&quot;{1} media URL&quot;&gt;{0}&lt;/a&gt;&lt;/p&gt;"
    syndicationMessage="[Go to the site to view embedded media]">
    <plugins>
        <plugin name="SlideShare" extensions="slide" />
    </plugins>
</add>

atau bila tidak ingin mengedit file communityserver.config cukup buat file communityserver_override.config dengan kode baris seperti berikut :

<?xml version="1.0"?>
<Overrides>
  <Override xpath = "/CommunityServer/CSModules" mode="add">
    <add name="AutoMediaImprovement"
        type="INDC.Geeks.CSModules.Reyza.AutoMediaImprovement, INDC.Geeks.CSModules.Reyza"
        height="350"
        width="425"
        applicationTypes="Forum,Weblog,ContentManagement"
        defaultMessage="&lt;p&gt;&lt;b&gt;View original media here:&lt;/b&gt; &lt;a href=&quot;{0}&quot; title=&quot;{1} media URL&quot;&gt;{0}&lt;/a&gt;&lt;/p&gt;"
        syndicationMessage="[Go to the site to view embedded media]">
        <plugins>
            <plugin name="SlideShare" extensions="slide" />
        </plugins>
    </add>
  </Override>
</Overrides>

Sekarang untuk menggunakannya tinggal menggunakan sintaks seperti berikut :

geek5

Hasilnya bisa dilihat pada link berikut : http://getinspiredhere.net/blogs/marketers/archive/2008/06/07/digital-advertising-trends.aspx

geek6

Semoga feature ini akan segera dinikmati di Geeks Portal, sehingga teman-teman yang punya slide hasil presentasi, msdn day dan lain-lain dapat di-share dan dinikmati secara online :)

Share this post: | | | |
Content Scrubbing with HtmlScrubber

Pernah menggunakan TinyMCE atau FCKEditor? Atau memasukkan kalimat-kalimat 'aneh' seperti tag HTML pada inputan pada halaman web form? Dijamin ketika suatu request dilakukan ASP.NET akan melindungi dirinya sendiri dan akan mengeluarkan pesan 'error' yang seperti berikut :

Capture

Gambar di atas contoh saat disuatu TextBox dimasukkan nilai dalam berupa tag HTML. Nilai dari inputan ditolak karena berpotensial menimbulkan 'bencana' :) Kalau begini artinya akan merepotkan kalau TextBox akan disulap menjadi Rich Text Editor dengan menggunakan TinyMCE atau FCK Editor.

Cara yang paling gampang untuk mengijinkan user memberikan tag HTML atau 'nilai-nilai' berbahaya lainnya cukup dengan memberikan nilai true pada property ValidateRequest yang ada paga Page directive.

Capture1

Dengan melakukan cara di atas sekarang TextBox sudah bebas dimasukkan 'apa saja' termasuk kode berbahaya. Semoga posting ini berguna, selamat mencoba dan menempuh bahaya. :)

Uuups...bukan itu inti dari posting ini.

. . .

Rich Text Editor saat ini bukan barang baru, kita akan melihatnya pada saat menulis email di Yahoo Mail, GMail, CMS seperti DNN, blog dan forum engine seperti Community Server dan lain-lain. Tetapi tentu saja hal-hal yang tidak diinginkan harus ditanggulagi, dengan melakukan pemeriksaan setiap nilai dimasukkan. Pada Community Server tersebutlah suatu nama perlindungan yaitu HtmlScrubber.

Perlindungan ini akan memastikan tag-tag HTML apa saja yang dapat disimpan atau ditampilkan. Tag-tag yang boleh disimpan atau ditampilkan disimpan pada suatu daftar yang disimpan pada file communityserver.config. Berikut adalah sintaks yang digunakan untuk mendaftarkan tag-tag yang dibolehkan.

<MarkUp>
    <globalAttributes>
        <class enable = "true" />
        <style enable = "true" />
        <align enable = "true" />
        <id enable = "true" />
    </globalAttributes>
  <selfContained>
      <br />
      <img />
      <input />
      <link />
      <meta />
      <base />
      <hr />
  </selfContained>
    <html>
        <h1 />
        <h2 />
        <h3 />
        <h4 />
        <h5 />
        <h6 />
        <h7 />
        <strong />
        <em />
        <u />
        <b />
        <i />
        <strike />
        <sub />
        <sup />
        <font size = "true" color = "true" face = "true" />
        <blockquote dir = "true" />
        <ul />
        <ol start="true" />
        <li />
        <p dir = "true" />
        <address />
        <div />
        <hr />
        <br />
        <a href = "true" title = "true" name = "true" target= "true" rel = "true" />
        <span />
        <img src = "true" alt = "true" title = "true" border = "true" width = "true" height = "true" hspace = "true" />
        <table cellpadding = "true" cellspacing = "true" bgcolor = "true" />
        <th />
        <td rowspan = "true" colspan = "true" />
        <tr />
        <pre />
        <code />
        <xmp />
        <lecut />
    </html>
  </MarkUp>

Keterangan :

Diantara <globalAttributes> . . . </globalAttributes>, adalah property pada HTML yang boleh ditambahkan pada tag HTML. Sebagai contoh bila anda mengetikkan tag berikut :

<div class="TestClass" id="TestContainer" align="center" style="font-size:13px" bgcolor="red">
</div>

Maka dapat dipastikan baris tersebut akan disimpan menjadi sebagai berikut :

<div class="TestClass" id="TestContainer" align="center" style="font-size:13px">
</div>

Ini dikarenakan property yang dibolehkan pada tag HTML hanya class, id, align dan style. Sedangkan bgcolor tidak termasuk didalamnya sehingga secara otomatis akan dihilangkan.

Diantara <selfContained> . . . </selfContained>, adalah tag-tag yang akan secara otomatis dimodifikasi sesuai dengan aturan yang baku. Sebagai contoh ketika dituliskan tag :

<br>, <hr>

maka HtmlScrubber akan mengubahnya menjadi :

<br/>, <hr/>

Kemudian di antara <html> . . . </html> adalah daftar tag dan property yang dibolehkan untuk ditambahkan, artinya dapat dipastikan ketika tag-tag seperti berikut ditambahkan,

 capture-thumb

maka ada ada tag-tag yang akan dihilangkan, seperti tag <object>, <param>, <embed>. Bila ingin ketiga tag ini dapat disimpan maka pada <html> . . . </html> perlu ditambahkan baris seperti berikut :

<object style = "true" height = "true" width = "true" />
<param name = "true" value = "true" />
<embed src = "true" type = "true" allowscriptaccess = "true" allowfullscreen = "true" width = "true" height = "true" />

Artinya kita bisa menambahkan tag <object> dengan property yang diijinkan adalah style, height dan width.

Dengan cara diatas maka dapat di-embed (salah satunya) konten Flash apapun dari alamat manapun pada posting blog (tetapi juga berakibat pada posting forum, gallery dan file juga). Artinya siap2 saja akan banyak konten yang baik (baca : putih) sampai konten yang remang-remang (baca : abu-abu).

Sampai saat ini saya belum tahu apakah hal seperti HtmlScrubber ini juga dimiliki oleh ASP.NET? Harus melakukan eksplorasi terlebih dahulu. Bila ada yang tahu tentang hal yang seperti ini pada ASP.NET, mungkin bisa drop comment atau lebih baik lagi posting blog untuk share pengalaman (biar ngga cape nyari di jagad maya) :)

Ini akhir dari cerita tentang HtmlScrubber yang ada pada Community Server. Mungkin teman-teman yang memegang 'barang' lain seperti DNN, Blog Engine .NET dapat bercerita tentang hal yang serupa dengan HtmlScrubber ini.

Share this post: | | | |
Four months in the bunker

Karena belum ada ide untuk menulis blog teknikal di Geeks, jadi sekarang menulis content narsis dan cerita dulu aja. Kalau mau protes silakan tinggalkan pesan di bawah.

Awal Februari 2008 adalah waktu untuk melakukan istirahat & hibernate diri sendiri dengan cara melepaskan diri dari DyCode, karena memang penurunan kemampuan dan inovasi sampai ketitik nol. Sekarang sudah bulan Juni artinya sudah 4 bulan berada di dalam bunker. Apakah selama 4 bulan ini hibernate dan istirahat sudah cukup untuk mengembalikan kemampuan dan inovasi kembali? Apakah selama 4 bulan ini ada hal penting yang sudah dilakukan.

Mungkin bisa dilihat dengan isi blog gw di Geeks ini,

geeks1

Terlihat? Dilihat dari judulnya, sepertinya isi blog ini tidak ada yang penting selama bulan April sampai akhir Mei :)

{Februari}

Kerja ringan dari DyCode, cuma melakukan support maintenance dan publish website Compare, yang akhirnya tayang juga di :

http://www.microsoft.com/indonesia/compare/windowsserver/Default.aspx

geeks2

Seperti biasa ada serpihan teknologi Silverlight pada website ini untuk animasi dan video.

{Maret}

hmm.....hitam...gelap...

{April}

hmm...juga masih hitam...gelap...dengan sedikit merah...

{Mei}

masih hitam...gelap....sedikit merah dan juga ada orange dan biru.

{Juni}

Awal bulan ini mulai berpikir apakah hibernate dan istirahat sudah cukup dilakukan? Jawabnya? Istirahat selama 4 bulan ini belum maksimal, malah bisa dibilang niat istirahat yang sudah direncanakan tidak terjadi. Sering berhayal kalau cukup 1 pekerjaan yang jalan sampai selesai kemudian dilanjutkan 1 pekerjaan lainnya....tetapi yang terjadi masih sepeti dahulu...3 pekerjaan berjalan secara paralel dengan deadline ketat. Selain pekerjaan ini juga kegiatan bantu-bantu di community yang menyenangkan.

Berikut summary yang terjadi selama 4 bulan di bunker (yang semestinya untuk istirahat).

{Theme CS2007 dan fasilitas baru untuk WSS-ID dan Geeks Portal}

geeks3

Design yang keren dari temannya bos Naren, akhirnya WSS-ID mempunyai wajah baru (minus animasi Silverlight, belum dibuatin. Masih hutang integrasi dengan Live ID juga) dengan fasilitas video player dengan Silverlight Media Player dan juga integrasi video pada YouTube dan SoapBox. Fasilitas share blog post ke Facebook, Del.Icio.Us dan lain-lain. Begitu juga pada Geeks Portal, sekarang mempunyai muka baru dengan fasilitas yang mirip dengan WSS-ID.

geeks4

{Solusi Community Server untuk US dan Singapore}

Community Server, "semahal apapun diri lo, gue tetap akan setia dengan lo" :)

Community Server 2008 - Turf Monster - US

Belum seminggu Community Server 2008 release, dapat kiriman email dari pengelola portal Turf Monster ke account Mic mendapat tawaran membuat Theme dan sedikit custom module yang mengharuskan menyentuh Community Server 2008 SDK.

geeks5

Status theme untuk Turf Monster ini telah selesai dan sekarang lagi membuat solusi lanjutan untuk portal ini, yaitu integrasi Classified Starter Kit pada Community Server 2008. Kerjaan limpahan karena developer dari India tidak menghasilkan apa-apa walau sudah ditunggu selama sebulan. (Sekarang tidak perlu minder lagi sama developer-developer India dari segi kemampuan, kecuali kemampuan menari diantara pepohonan dan rerumputan). Setelah integrasi ini selesai maka Turf Monster siap go live dengan Community Server 2008.

Community Server 2007 - Microsoft Advertising - Singapore

Selanjutnya adalah pesanan Om Geert Desager (Trade Marketing Manager Southeast Asia Microsoft Advertising). Lagi-lagi email via email Mic atas promosi MCA di beberapa orang-orang di Microsoft Singapore, tidak lupa juga promosi oleh Naren... I love this community.

geeks6

Solusi ini menggunakan Community Server 2007 dengan tambahan integrasi video dan share posting blog seperti yang ada pada WSS-ID dan Geeks Portal. Selain itu juga terdapat modul baru untuk Event Management, thanks to De_Joker yang telah membantu untuk membuat modul ini. Yang disayangkan adalah designnya yang kurang maksimal, sangat disayangkan untuk website milik sebuah divisi advertising.

Statusnya telah selesai dan sudah bersandar di server co-location yang ada di Singapore dengan spesifikasi Intel Core 2 Quad 2,4GHz, memory 4GB, Hardisk 512GB dengan sistem operasi Windows Server 2003 dan SQL Server 2005 Enterprise Edition.

 geeks7

User admin dan password untuk remote desktop sudah ditangan dan akan terus ditangan (bukan dikepala, karena sering lupa), ada yang ingin nitip hosting? :)

Untuk mengunjungi bisa klik Get Insprired Here (ups..ngga bisa diklik ya? ntar aja ya kalau sudah rame, sekarang masih kosong karena baru minggu ini akan diumumkan).

{3 Bulan di dalam kegelapan}

Hanya membuat solusi dengan Community Server? Tentu tidak. Seperti waktu-waktu terdahulu pasti ada aplikasi aneh (padahal simple dan lebih banyak CRUD doang) yang dibuat dengan mengadopsi teknologi terbaru, kali ini dengan mengusung ASP.NET 3.5, LINQ, Silverlight dan AspMap.

Ceritanya begini...

Provider telekomunikasi (seperti Telkomsel, Mobile8 dll) pasti mempunyai BTS dan Repeater yang tersebar di banyak tempat baik itu diluar atau di dalam gedung untuk melayani pelanggannya. Salah satu provider telekomunikasi yang terkemuka hampir memiliki 2000 BTS yang tersebar di pulau Jawa. Masing-masing BTS harus dikunjungi secara periodik untuk memeriksa kerja equipment yang terbagi atas RBS dan CME. Kunjungan ke tiap BTS atau Repeater akan dilakukan oleh pihak lain sebagai tenaga outsource dari sang provider telekomunikasi.

Pemantauan kunjungan oleh pihak outsource ini sangat sulit begitu juga laporan hasil kunjungan saat ini sulit untuk diketahui oleh pihak provider telekomunikasi. Masalah lain adalah status alat-alat pada BTS hanya dapat diketahui dengan kunjungan, walaupun kadang sudah terdapat sensor-sensor pada alat-alat yang ngetem di BTS atau Repeater. Hal ini kadang membuat tidak diketahuinya masalah dilapangan secara cepat.

Oleh karena itu perlu dibuat sistem untuk menyelesaikan masalah itu (atau malah menambah masalah ya?), fungsinya :

  • Mencatat kunjungan ke BTS atau Repeater oleh pihak outsource sehingga dapat langsung diketahui oleh pihak provider telekomunikasi, dari status alat-alat yang ada sampai foto-foto keadaan sebelum dan setelah kunjungan.
  • Alarm dari setiap site BTS dan Repeater bila terjadi error atau suatu nilai ambang terlewati. Alarm ini akan memberikan pesan ke sistem ini dan juga sms ke orang yang bertanggung jawab atas BTS atau Repeater. Selain itu user dapat juga melakukan permintaan keadaan suatu  BTS atau Repeater dengan hanya dengan mengirimkan sms atau memanfaatkan fungsi yang telah disediakan pada sistem ini.

geeks8 geeks9

Sebagai pemanis juga terdapat fasilitas untuk melihat data BTS dan Repeater secara visual dalam peta.

geeks10

Niatnya menggunakan Google Map atau Virtual Earth (begitu juga yang pernah dibilang oleh salah satu bos salah satu provider CDMA kepada saya, "kenapa ngga pakai Google Map saja, lebih cantik dipandang mata dan lebih lengkap), sayang bila menggunakan kedua benda itu para developer mesti selalu terkoneksi ke internet, belum cukup bandwidth dan dana sampai kesitu...kecuali ada yg berminat untuk mendanai...hehehe.

Fasilitas lainnya adalah chat engine untuk komunikasi antara pihak provider telekomunikasi dengan pihak outsource untuk koordinasi bila terjadi alarm pada hasil kunjungan atau karena alarm dari sensor.

Layanan yang lain dari sistem ini adalah Drive Test,yaitu operasi untuk memeriksa kelayakan sinyal di area tertentu dengan cara mengambil data sinyal dengan sensor sambil mengendarai mobil (makanya disebut Drive Test) hasilnya akan ditampilkan secara visual seperti gambar di bawah ini. Kekuatan sinyal akan ditandai dengan warna.

geeks11 geeks12

Coba kalau data ini bisa kami tampilkan di atas Google Map or Virtual Map...pasti akan lebih menarik.

Apakah ini aplikasi pesanan provider telekomunikasi atau produk yang akan dijual ke provider-provider telekomunikasi? Kita lakukan cara yang lebih pintar yaitu dijadikan sebagai aplikasi berbasis layanan. Tapi itu bukan urusan gw saat ini :)

Thanks buat teman-teman yang sudah terlibat atas pembangunan sistem ini, Om Rully Yulian dan Sanjaya (jagoan Javascript, AJAX dan juga System Architect pembangunan sistem di Kabupaten Sragen). Sekarang saatnya menyempurnakan sistem ini.

Haaaaah....4 bulan yang melelahkan ternyata. Gw kira akan menjadi 4 bulan yang menyenangkan dengan jalan-jalan keliling Batam, Jawa, Bali dan Kalimantan.

Keterangan : {3 Bulan di dalam kegelapan} = warna dasar aplikasi ini adalah hitam, warna netral untuk provider telekomunikasi (eeeh...ternyata ada Three yang mengusung warna dominan hitam)

{Apa selanjutnya?}

Karena sudah ada pegangan hasil pekerjaan dengan Microsoft Singapore artinya sudah bisa kontak lagi ke Microsoft Vietnam, semoga belum terlambat. Mulai mengurus menjadi partnert Telligent untuk memberikan service pembuatan theme dan pembuatan custom module.

Menghidupkan Community Server Themes, untuk membagi-bagikan theme gratis sekaligus pamer kemampuan (dengan memajang theme dan module yang sudah dibuat) kepada dunia kalau ada team Indonesia yang mampu membuatkan theme dan custom module Community Server.

Mencoba instalasi WSS dan MOSS untuk integrasi dengan Community Server 2008.

Mau kursus bahasa Inggris biar ngomongnya ngga nyampah lagi...hehehe.

{Stttt...rahasia}

Semakin mahal harga lisensi Community Server semakin mendekati itu juga harga yang harus dibayar untuk solusi dengan Community Server, entah itu pembuatan theme atau custom module. Dan gw ngga perlu pusing dengan lisensi, karena mereka pasti sudah mengantongi itu. Kalau di Indonesia pasti akan bilang "sialan..mahal banget!!", kalau diluar sana pasti akan bilang "Ok, I agree with you"....sekarang gw yang bilang "Sialan....kok langsung setuju sih, ternyata kemurahan toh".

{In The Bunker}

Namanya juga dalam bunker, fasilitas seadanya....cuma ada seperti pada gambar di bawah ini. Sampai saat ini, semua kolaborasi pekerjaan dilakuan dengan Yahoo Messanger dan Email. Begitu juga koordinasi dengan client yang berada diluar negeri, semuanya via email. Mau nelp? mahal booooooss.

bunker

{Narsis...}

Kalau dianggap posting narsis, jangan sungkan untuk tulis komentar di bawah ini :) atau kirim via email ke Chocolove Mic atau langsung datang ke :

leaf it 300

Leaf IT Inc. kantor virtual anak-anak UPK :)

{Janji, mulai besok baru mulai menulis posting-posting teknikal lagi}

Share this post: | | | |