Agung Riyadi

Integrating jQuery and jQuery Cycle plugin into DotNetNuke

agung — Tue, 12 Aug 2008 05:18:00 GMT

In this tutorial, i will show you how to integrate jQuery and some jQuery plugin into DotNetNuke module. Why i'm doing this is because my client need some functionality about some effect like scroll left, scroll right, fade, etc. My client is also using a lot of images for their business.

Yes i can use ASP .NET AJAX Control Toolkit. The first release of my module is using Ajax Control Toolkit and nothing wrong with it. But when I saw the performance and flexibility, I think I should change to another framework. This is only my personal opinion. I love Ajax Control Toolkit and use them in many DNN project. But for this project, jQuery is the answer. jQuery provide me a lot of functionality that exactly I can use it with ease.

Ok. Let's try to integrate jQuery and jQuery Cycle plugin into DNN module.

A. Preparation

Make sure you have been installed DNN website in your machine. Let say your address is : http://localhost/dnn with C:\dnn is the root folder. Notice that it might be different with your path. So make it correct based your DNN path installation folder.
Open your Visual Studio 2008
Choose File --> Open Website...
Choose Local IIS
Choose localhost/dnn website. Wait a minute.
Show your Solution Explorer, then right click for http://localhost/dnn and choose Add New Project.
Choose ASP.NET Web Application, use AR_Promo as the name of the project. Or you can use different one. Remember, this is WAP model.
Choose Visual C# as a language for your project.
Don't forget to create your project inside C:\dnn\DesktopModules
Click OK.
Your project created.

B. Configuring

Delete Default.aspx and web.config file.
Right click on your project, then choose Properties.
Click Build tab, and change Output path into C:\dnn\bin (or use your bin DNN folder)
Click Save
Right click on your project again, then choose Add Reference...
Click Browse tab, then point to C:\dnn\bin
Choose DotNetNuke.dll and DotNetNuke.WebUtility.dll
After you add two references, select both of those files from References folder and change Copy Local into False for both from your Properties window..
Right click your AR_Promo module, then create new directory with name "script". This is a folder for placing jQuery, jQuery Cycle plugin and custom javascript file.
Right click again your AR_Promo module, then create new web user control. Name it "promo.ascx"

Your module will be like this in structure :

For Indonesian developer, you can read my free tutorial about creating DNN module here. Or maybe you can download all my tutorial for DNN here.

C. Download jQuery and jQuery Cycle plugin

Download jQuery javascript library here : http://jquery.com. Use newest version. Or you can directly download from here. The version is jquery-1.2.6.min.js. I use compressed one because it is smaller. The size is only 16kb. :) Nice !
Download jQuery cycle plugin here.

Choose jQuery Cycle Plugin - compressed (6 KB) and jQuery Cycle Plugin with all transition - compressed (12 KB). Why ? Because you have to 'taste' its plugin. :) Really, you will love it.
Put your downloadable files into C:\dnn\DesktopModules\AR_Promo\script. Or make it same with your own DNN path.
Your jQuery and jQuery cycle plugin is ready to use.

D. Integrating into DotNetNuke module

Open promo.ascx, and type this code below :

<style type="text/css">
.pics {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; OVERFLOW: hidden; WIDTH: 232px; PADDING-TOP: 0px; HEIGHT: 232px
}
.pics IMG {
    BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #ccc 1px solid; PADDING-LEFT: 15px; LEFT: 0px; PADDING-BOTTOM: 15px; BORDER-LEFT: #ccc 1px solid; WIDTH: 200px; PADDING-TOP: 15px; BORDER-BOTTOM: #ccc 1px solid; TOP: 0px; HEIGHT: 200px; BACKGROUND-COLOR: #eee
}
#slideshow { position: relative; width: 200px; margin: 35px; }
#controls { z-index: 1000; position: absolute; top: 0; left: 0; display: none;
    margin: 0; padding: 6px;
    width: 200px;
</style>
<div id="slideshow">
    <div id="controls">
        <span><a href="" mce_href="" id="prev">Prev</a></span>
        <span><a href="" mce_href="" id="next">Next</a></span>
    </div>
    <div id="slides" class="pics">
        <img src="/Portals/0/beach1.jpg" mce_src="/Portals/0/beach1.jpg" width="200" height="200" />
        <img src="/Portals/0/beach2.jpg" mce_src="/Portals/0/beach2.jpg" width="200" height="200" />
        <img src="/Portals/0/beach3.jpg" mce_src="/Portals/0/beach3.jpg" width="200" height="200" />
        <img src="/Portals/0/beach4.jpg" mce_src="/Portals/0/beach4.jpg" width="200" height="200" />
        <img src="/Portals/0/beach5.jpg" mce_src="/Portals/0/beach5.jpg" width="200" height="200" />
        <img src="/Portals/0/beach6.jpg" mce_src="/Portals/0/beach6.jpg" width="200" height="200" />
        <img src="/Portals/0/beach7.jpg" mce_src="/Portals/0/beach7.jpg" width="200" height="200" />
        <img src="/Portals/0/beach8.jpg" mce_src="/Portals/0/beach8.jpg" width="200" height="200" />
    </div>
</div>

Notes:
I use beach1.jpg, beach2.jpg, etc as a sample image. You can use it with your own. Just point to right location inside your DNN folder. Or you can use it just a simple text inside a <div> tag. Or any HTML element you want to add into your design. You can also construct your own based on dynamic processing inside code behind. It's just an HTML element, so please be creative! :)
Open your promo.ascx code behind
Inherit your promo class into DotNetNuke.Entities.Modules.PortalModuleBase
Type this code below inside your Page_Load method (i will explain it later):

if (! IsPostBack)
{
    Control oCSS = this.Page.FindControl("CSS");
    if (oCSS != null)
    {
        HtmlGenericControl jquery = new HtmlGenericControl("script");
        jquery.Attributes["language"] = "javascript";
        jquery.Attributes["type"] = "text/javascript";
        jquery.Attributes["src"] = this.ModulePath + "script/jquery-1.2.6.min.js";

oCSS.Controls.Add(jquery);

        HtmlGenericControl plugin = new HtmlGenericControl("script");
        plugin.Attributes["language"] = "javascript";
        plugin.Attributes["type"] = "text/javascript";
        plugin.Attributes["src"] = this.ModulePath + "script/jquery.cycle.all.js?v2.24";

oCSS.Controls.Add(plugin);

        HtmlGenericControl jrun = new HtmlGenericControl("script");
        jrun.Attributes["language"] = "javascript";
        jrun.Attributes["type"] = "text/javascript";
        jrun.Attributes["src"] = this.ModulePath + "script/jrun.js";

oCSS.Controls.Add(jrun);
}

}

As you see in the last line that i add a new file with name jrun.js. This is an external javascript file for calling jQuery and jQuery Cycle library. You have to create it. So, please add new Javascript file inside script folder. The code for jrun.js is like below :

jQuery(document).ready(function() {
    jQuery('#slideshow').hover(
        function() { jQuery('#controls').fadeIn(); },
        function() { jQuery('#controls').fadeOut(); }
    );
    jQuery('#slides').cycle({
        fx:     'scrollVert',
        speed:   600,
        random: 1,
        timeout: 3000,
        next:   '#next',
        prev:   '#prev'
    });
});
Build your module. Make sure there is no error when compiling.

Now, this is your folder structure :

E. Installing AR_Promo module into DotNetNuke website

Login as Host
Go to Host --> Module Definitions
Choose Create Module Definition
Add AR_Promo for Module Name, Folder Name, Friendly Name, and Description
Click Update
Add AR_Promo for New Definition textbox.
Click Add Definition link button.
Click Add Controls.
In Edit Module Control window, point to DesktopModules/AR_Promo/promo.ascx in Source dropdownlist.
Click Update.
Your module is ready in Module List at DNN Control Panel at the top.

F. Testing your module

Go to a page (Home or any page)
Drop your module onto Home page
Voila, your module is ready to go ! :)

Wait a second, then your image will scroll vertical with very nice effect.

Hover your mouse, then you will see Prev Next anchor floating. You can click to go next or previous. Nice effect too. :)

G. Explanation

Remember the code behind in promo.ascx.cs ? This is what happened.

Put your jQuery library, jQuery Cycle plugin, and jrun.js between <HEAD> tag. In normal ASP.NET, that's easy. But in DNN, you have to do some trick. In DNN, a placeholder was prepared to injected with some CSS file. You can open your Default.aspx in DNN root folder. Then see this line :

<html <%=xmlns%> <%=LanguageCode%>>
<head id="Head" runat="server">
     ...
     ...
    <asp:placeholder id="CSS" runat="server" />
</head>

So, since the id is CSS, then I could manually injected something AT placeholder control. First, I have to reference it manually. This is easy to solve by using this code :

Control oCSS = this.Page.FindControl("CSS");

And for injecting some control into oCSS object, I can use this code :

oCSS.Controls.Add(a_control);
Then I create HtmlGenericControl object as a container for all my external javascript files. Add some attributes, and point to my jquery library file inside script folder. ModulePath property is the easiest way to reference to your module path.

HtmlGenericControl jquery = new HtmlGenericControl("script");
jquery.Attributes["language"] = "javascript";
jquery.Attributes["type"] = "text/javascript";
jquery.Attributes["src"] = this.ModulePath + "script/jquery-1.2.6.min.js";

oCSS.Controls.Add(jquery);

I did it again for another external javascript file.

HtmlGenericControl plugin = new HtmlGenericControl("script");
plugin.Attributes["language"] = "javascript";
plugin.Attributes["type"] = "text/javascript";
plugin.Attributes["src"] = this.ModulePath + "script/jquery.cycle.all.js?v2.24";

oCSS.Controls.Add(plugin);

HtmlGenericControl jrun = new HtmlGenericControl("script");
jrun.Attributes["language"] = "javascript";
jrun.Attributes["type"] = "text/javascript";
jrun.Attributes["src"] = this.ModulePath + "script/jrun.js";

oCSS.Controls.Add(jrun);

Now you can play with jQuery and jQuery Cycle plugin nicely inside DotNetNuke module!

Happy jQuery-ing :)

Note: There a lot of transition effect that you can choose. Just read jQuery Cycle plugin documentation.

Share this post: | | | |

DotNetNuke: Hot or Not?

agung — Fri, 08 Aug 2008 04:00:43 GMT

It is time once again for voting to begin in the PacktPub Open Source CMS Awards. According to the Packt Publishing website:

The Packt Open Source Content Management System Award is designed to encourage, support, recognize and reward Open Source Content Management Systems (CMS) that have been selected by a panel of judges and visitors to www.PacktPub.com. Now entering its third year, the Award has established itself as an important measure for quality and the popularity of Open Source Content Management Systems.

So this is your chance to show your support for DotNetNuke and let your voices be heard. Not only will you have a chance to win an iPod Nano just for making a nomination, but you might also help DotNetNuke win one of the cash prizes for the winners. Even if you are not a sponsor or benefactor, this is a great way to help the project.

Originally posted by Joe Brinkman.

Share this post: | | | |

We have WISDOM :)

agung — Mon, 04 Aug 2008 11:08:46 GMT

Nice jargon, isn't it ?

Share this post: | | | |

First preview of ASP .NET AJAX 4 is available

agung — Tue, 22 Jul 2008 05:16:12 GMT

Dear folks,

ASP.Net team has just released the first preview of the ASP.NET AJAX 4.0 on CodePlex this morning. Do check out the below URL :.

ASP.NET AJAX 4.0 CodePlex Preview 1

http://www.codeplex.com/aspnet/Release/ProjectReleases.aspx?ReleaseId=15511

Have fun !

Share this post: | | | |

Dynamic Data Futures updated

agung — Mon, 30 Jun 2008 03:42:16 GMT

Folks, the ASP.NET Dynamic Data Team recently posted an updated to the Dynamic Data Futures project on Codeplex. It is an add-on to the Dynamic Data feature that contains a number of samples illustrating how to do more complicated things as well as preliminary versions of improvements and new elements that Microsoft planning for the next version (post-SP1).

Go there and download.

HTH

Share this post: | | | |

GCoE - DotNetNuke dan Windows Live Platform

agung — Thu, 26 Jun 2008 06:06:00 GMT

Hari ini, saya berkesempatan untuk mengisi training DotNetNuke dan Windows Live Platform kepada peserta yang kebanyakan adalah orang-orang pemerintahan dalam program Government Center of Excellence (GCoE) di kampus UI Depok. Dalam 2 hari ini yang akan saya bahas adalah sebagai berikut :

Pengenalan DotNetNuke (instalasi, konfigurasi, dan manajemen portal)
Pengenalan Windows Live Platform
Integrasi Windows Live Platform ke dalam DotNetNuke
DotNetNuke dan Sharepoint kolaborasi (DNN untuk public website, Sharepoint untuk intranet). Jadi, skenarionya adalah DNN akan consume informasi dari Sharepoint untuk dipublikasikan. :)

Kenapa saya sertakan adanya kolaborasi antara DNN dengan Sharepoint ? Hal ini karena memang program Government Center of Excellence yang detail acara dan materinya dapat dilihat disini, mengajarkan Sharepoint terlebih dahulu sebelumnya. Hari ini dan besok mereka akan saya perkenalkan dengan 'makhluk lain' yang tidak kalah menariknya dari Sharepoint, yakni DotNetNuke. Terus terang banyak peserta yang sama sekali belum mengetahui DNN. Ini kabar yang baik untuk memperkenalkan 'teman baru' ini kepada mereka. :)

Nah, sebagai penutup, alangkah lebih baiknya jika peserta juga mengetahui bahwa DNN dapat 'ngobrol' dengan Sharepoint dan DNN dapat mengkonsumsi informasi yang ada di dalam Sharepoint. Ini dapat diterapkan di lingkungan peserta sendiri.

Berikut ini adalah Sharepoint yang dibangun oleh rekan-rekan MIC UI kita. :) Saya ingin menampilkan Events dan Tasks yang ada di dalam List Sharepoint tersebut.

Dan berikut ini adalah bagaimana DNN dapat dengan mudah mengkonsumsi Events dan Tasks dari Sharepoint :

Dengan teknik ini, maka arsitektur Anda dapat menjadi sebagai berikut :

INTRANET, gunakan WSS 3.0 (free), kecuali jika menghendaki penggunaan MOSS 2007 dengan fungsionalitas yang lebih kaya dengan lisensi sesuai kebutuhan (tidak perlu internet connector).
INTERNET, gunakan DotNetNuke (free) untuk mengkonsumsi informasi dari Sharepoint. Dalam hal ini Anda tidak perlu mengeluarkan cost yang lebih besar dikarenakan DNN sudah mampu mengkonsumsi informasi object-object dari Sharepoint. Seandainya pun memerlukan dukungan third party module DNN, tentunya angkanya masih reasonable. Database yang digunakan bisa SQL Server 2005 Express Edition (free), kecuali jika ada pertimbangan kebutuhan data lebih besar maka disarankan menggunakan versi yang lebih tinggi.

Yang lebih menarik adalah menyaksikan wajah-wajah yang tidak berdosa ketika melihat ini dan berguman "waaaaahhhh.....! ternyata bisa ya !". Yup, memang bisa :)

Welcome to the DotNetNuke world my government's friends !

Share this post: | | | |

Test using Scribfire

agung — Fri, 20 Jun 2008 03:24:40 GMT

Test using Scribfire

Share this post: | | | |

Running DNN in multiple languages - Part 1

agung — Thu, 12 Jun 2008 04:28:45 GMT

For those who worked with DNN with multiple languages in a free way, this is the step by step for you :

Preparation

Install DNN in standard mode
Add your other language in Host --> Languages
Click on Home page (or other page), just for refresh
Install DSLocalizator module from this source.
Install ModuleLocalization and MLHTML from this source.
Drop DSLocalizator module from module list and put into Home page.
Install Hack from DSLocalizator module to move from Home page to Admin page.

Your site now ready to multilanguage.

Next, i will post about how to configure your website based on those free modules.

Stay tune !

Share this post: | | | |

Microsoft Source Analysis for C#

agung — Fri, 06 Jun 2008 06:22:19 GMT

Source Analysis, also known as StyleCop, analyzes C# source code to enforce a set of best practice style and consistency rules. It can be run from inside of Visual Studio or integrated into an MSBuild project.

You can download it here.

For more information about Microsoft Source Analysis for C#, see the Source Analysis blog at http://blogs.msdn.com/sourceanalysis .

More resources can be found here.

Share this post: | | | |

Semua Berawal Dari Mimpi

agung — Thu, 05 Jun 2008 07:42:00 GMT

"Semua berawal dari mimpi. Dan mimpi itu tidak akan terwujud jika kita hanya duduk diam tanpa melakukan sesuatu."

Ketika saya me-review apa yang saya rencanakan dahulu pada tahun 2007, saya teringat bahwa pada tanggal 13 Nopember 2007 (10 hari setelah ulang tahun), saya membuat sebuah rencana besar untuk diri saya yang saya tuangkan disini.

Setelah itu saya masih ingat betul bahwa feedback dan komentar berdatangan via email. Ada yang menyatakan dukungannya, ada juga yang meremehkan, rame kayak nano-nano (eh permen itu masih ada ngga ya ? ). :)

Tapi ketika hari ini saya coba review kembali, bahwa apa yang saya rencakan pada akhir tahun 2007 ternyata terlampaui ! Saya summary-kan dari rencana yang saya buat di tahun 2007 kemarin yakni :

1. Memantapkan diri untuk membentuk sebuah company yang 100% DotNetNuke based.

Hasil: Ya, Anda dapat melihat pada perusahaan ini. Fokus bisnisnya 100% berbasis DotNetNuke. Tiga tahun pertama tetap eksis dan semakin jelas positioningnya baik di lokal maupun global (lihat di bagian DotNetNuke Bronze sponsor). Hasil kerja kita selama 2 tahun pertama bahkan mendapat kehormatan untuk berada disini. Client-client kita juga tidak hanya dari Indonesia, tapi juga dari luar negeri seperti Belanda, Jerman, Australia, Perancis, bahkan Arab Saudi. :) Bahkan berkesempatan untuk mendapatkan penghargaan seperti disini.

2. Mengoptimalkan semua potensi diri, network, dan channel yang dimiliki untuk meraih lebih banyak client.

Hasil: Ya, secara pribadi itu adalah suatu keharusan. Di tahun 2007 saya berkesempatan keliling Indonesia karena DNN, demikian juga di tahun 2008 saya berkesempatan keliling Indonesia lagi karena DNN. :) Saya aktif pada komunitas DotNetNuke internasional dan berkesempatan untuk masuk pada news DotNetNuke international community mengenai event ini. Setiap harinya tidak lebih dari 10-20 email dari beragam kalangan baik lokal maupun luar yang menanyakan mengenai DotNetNuke. Termasuk bahkan PBB. Saya bahkan berkesempatan untuk satu meja sebagai pembicara dengan salah satu dedengkot IT Indonesia di event ini. Demikian juga pada event ini, saya berkesempatan duduk semeja sebagai pembicara dengan para dedengkot IT Indonesia lainnya. Ini sangat luar biasa buat saya. Selama ini kita hanya nonton beliau. Hadir juga palingan sebagai peserta. Tapi saya duduk satu meja, sharing bersama pada materi yang berbeda sesuai kapasitas kemampuan masing-masing. Saya sharingkan beberapa pengetahuan DNN saya disini, yang semoga menjadi pahala dan pengetahuan untuk orang lain. Aktivitas lainnya yang tidak dapat saya sebutkan satu persatu saya rangkum pada blog saya disini. Dari aktivitas-aktivitas tersebut, network dan channel saya dapatkan dan menjadi resource yang sangat berharga.

3. Membentuk team yang solid yang mumpuni di DotNetNuke

Hasil: Ya. Team yang saya bentuk, semuanya mumpuni di DotNetNuke. Spesialisasi pada teknologi ini. Baik dari sisi skinning, development, hingga core. Kami telah melakukan puluhan, bahkan ratusan kali instalasi DotNetNuke. Kami juga telah membuat puluhan skin untuk client, serta custom development sesuai kebutuhan client. Saya pribadi lebih suka dengan fresh graduate karena secara pemikiran, mereka lebih mudah untuk "dibentuk". Mereka saya ajarkan penerapan teknis dan langsung to the point dengan case study bagaimana implementasi DNN di level software development.

4. Membuka bisnis hosting DotNetNuke di Indonesia

Hasil: Ya. Saat ini saya sudah menjalin kerjasama dengan salah satu ISP yang cukup besar di Indonesia. Dan saya akan menjadi satu-satunya provider hosting DotNetNuke di Indonesia. Saya akan masuk ke pangsa pasar personal, pemerintah, UKM (usaha kecil menengah), dan enterprise baik dari sisi DNN personal web hosting, DNN services, DNN for government, DNN for school, DNN for small and medium industry, dan DNN for enterprise serta co-location DNN server. Stay tune :)

5. Menjalin kerjasama dengan institusi pendidikan untuk doing research pada aplikasi web, khususnya DotNetNuke dengan membentuk DotNetNuke Inovation Center (DNN INOCENT)

Hasil: Ya. Saat ini saya telah menjalin kerjasama dengan salah satu SMK IT di Jakarta untuk ini. Mereka akan menyiapkan sebuah lab yang khusus untuk materi DotNetNuke. Dan hasilnya akan kami publikasikan untuk umum. Ada banyak hal yang bisa dikerjakan di dalamnya seperti : kolaborasi antara DNN dengan Sharepoint, implementasi DNN pada lingkungan web farm, implementasi DNN pada lingkungan intranet, implementasi DNN pada skenario multi portal, implementasi DNN sebagai bisnis hostingan, optimasi DNN, dan sebagainya. Ada banyak hal yang bisa saya kerjakan.

Sungguh tidak disangka bahwa semuanya akhirnya bisa tercapai pada 6 bulan pertama. Padahal, target awalnya adalah pada akhir tahun ini. Tapi rupanya Allah SWT memberi kesempatan terlebih dahulu. Dan kesempatan ini tidak akan saya sia-siakan.

Itulah sekelumit sharing pribadi saya. Semoga bisa menjadi inspirasi untuk rekan-rekan lain di komunitas INDC ini. Jangan pernah menyerah, gunakan segala potensi diri pada jalan yang benar, maka jalanpun akan dibentangkan-Nya.

"Semua berawal dari mimpi. Dan mimpi itu tidak akan terwujud jika kita hanya duduk diam tanpa melakukan sesuatu."

Share this post: | | | |

DotNetNuke 4.8.3 released

agung — Mon, 02 Jun 2008 04:02:44 GMT

Yes, you can download it here.

And prepare for the next generation of DotNetNuke. In version 5.0 there are a lot of changes not only in the core itself, but also in paradigm.

Stay tune !

Share this post: | | | |

Navigasi pada DNN - You can rewrite your URL !

agung — Fri, 23 May 2008 04:41:00 GMT

Ya, judulnya provokatif banget. Tapi itulah kenyataannya. :)

Awalnya begini :

Kemudian dapat menjadi :

Menarik ya ? :) Bagaimana caranya ? Ikuti penjelasan saya.

Latar belakang saya membuat artikel ini adalah karena beberapa waktu yang lalu kebetulan saya ditunjukkan CMS milik klien yang akan di rewrite ulang ke dalam DNN. Ada fitur menarik pada CMS milik klien tersebut yakni bahwa setiap konten yang dia isi (berita atau artikel) dapat dibuatkan alamat URL untuk mengaksesnya sekehendak hati (defaultnya sih nama Title artikelnya). Jadi misalkan dia membuat artikel dengan judul "Test Article", maka URL untuk mengaksesnya dapat menjadi begini :

http://www.clientdomain.com/media/artikel_berita_testarticle.php

dari sebelumya begini :

http://www.clientdomain.com/media/artikel_berita_berita.php?id=5

Dan dengan fitur URL Manager yang dia punya, maka URL itu dapat diganti menjadi apapun yang dia inginkan. Ini menarik karena sepertinya fitur ini tidak dimiliki oleh DNN module :) Hm, tidak juga sih, diluar sana ada kok 3rd party module yang polanya seperti itu. Tapi rasa-rasanya gatal jika tidak membuat sendiri karena toh sepertinya fitur ini sudah tersedia di dalam DNN tetapi masih hidden feature kayaknya. ;)

Jadi, idenya adalah bagaimana membuat 2 buah module yakni :

URL Management Module, digunakan untuk mengatur penamaan URL pada modul Content Manager Module. Jadi, setiap kali client isi konten pada websitenya, URL-nya dapat dibuat sekehendak hati (defaultnya menggunakan Title jadi artikel)
Content Manager Module, digunakan sebagai repository untuk konten yang akan ditambahkan ke dalam website

Dan karena dua module ini sudah selesai saya buat dalam 2 hari, maka tidak ada salahnya saya berbagi dengan Anda bagaimana cara saya melakukan modifikasi dan rewrite URL di level modul. Mungkin akan berguna bagi Anda yang kebetulan berurusan dengan pembuatan modul pada DNN.

Sebelumnya saya akan berikan penjelasan singkat mengenai navigasi pada DNN.

Navigasi pada DNN ditangani oleh method NavigateUrl dan EditUrl pada kelas Globals (tepatnya ada di dalam namespace DotNetNuke.Common). Meskipun cukup untuk melakukan proses navigasi antar module control (navigasi antar .ascx di dalam satu modul), Anda dapat juga menggunakan cara lain untuk melakukan navigasi.

Masih ingat dengan fitur DNN yang disebut dengan FriendlyUrl ? Nah, kita akan memanfaatkan fitur tersebut pada kode kita sehingga Anda dapat menggunakan itu sebagai bagian dari proses navigasi pada modul DNN Anda. Ada 2(dua) keuntungan yang saya lihat dari teknik ini yakni sbb :

URL dapat Anda rewrite sekehendak hati Anda (tentunya dalam konteks yang masih masuk akal). Dan ini akan membuat informasi pada modul Anda bersifat SEO dan akan diindeks dengan baik dan dengan penamaan yang lebih manusiawi.
Nilai baliknya yang berupa string, dapat dilekatkan pada Hyperlink dan memungkinkan untuk navigasi antar modul dari satu halaman ke halaman lain.

Baiklah kita mulai saja.

Saya menggunakan pendekatan non-WAP dengan menggunakan bahasa Visual C#, artinya code behind tidak saya compile menjadi DLL tersendiri karena memang ini hanyalah POC (proof of concept) saja yang saya buat. Meski demikian, Anda dipersilahkan menggunakan pendekatan cara membuat modul yang Anda sukai. Dan karena ini menggunakan pendekatan non-WAP maka Anda perlu menambahkan sedikit pada web.config.

Pertama, buatlah sebuah modul baru dari instance DNN Anda. Saya memberi contoh dengan ContentManager module (karena ini kebetulan modul yang sedang saya buat untuk client saya dengan pendekatan URL dinamis dan berisi URL Manager untuk konten modul tersebut). Caranya :

Buka Visual Studio 2008 Anda, lalu arahkan pada website DNN Anda
Dari jendela Solution Explorer, klik kanan pada folder DesktopModules lalu pilih New Folder. Beri nama folder baru tersebut dengan ContentManager (atau apapun yang Anda inginkan)
Dari jendela yang sama (Solution Explorer), klik kanan pada folder App_Code lalu tambahkan folder baru dengan nama ContentManager. Ingat, saya menggunakan bahasa yang berbeda dengan project DNN, maka saya harus melakukan 2 hal tambahan yakni menambahkan folder baru pada folder App_Code dan saya menambahkan entri pada web.config
Bukalah web.config, lalu tambahkan entri baru pada tag <codeSubDirectories> dengan entri <add directoryName="ContentManager" />

Buatlah sebuah file bernama injector.ascx. Saya menggunakan teknik injeksi .ascx ke dalam DNN secara dinamis. Informasi lebih lanjut dapat Anda lihat pada artikel saya disini.

Tambahkan sebuah Web User Control ke dalamnya dengan nama injector.ascx. Saya menggunakan bahasa C#. Tunggulah beberapa saat hingga tampil pada Visual Studio 2008 Anda.
Masuklah ke dalam code behind file tersebut, lalu hapus semua kode di dalamnya dan gantilah dengan kode berikut ini :

using System;
using DotNetNuke.Entities.Modules;

public partial class DesktopModules_ContentManager_Injector : DotNetNuke.Entities.Modules.PortalModuleBase
{
private string mControlToLoad = string.Empty;

    protected void Page_Init(object sender, EventArgs e) {
        ReadQueryString();
        LoadControlType();
    }

protected void Page_Load(object sender, EventArgs e){ }

    private void LoadControlType() {
        PortalModuleBase pmb = (PortalModuleBase)LoadControl(mControlToLoad);
        if (pmb != null) {
            pmb.ModuleConfiguration = this.ModuleConfiguration;
            pmb.ID = System.IO.Path.GetFileNameWithoutExtension(mControlToLoad);
            plhControl.Controls.Add(pmb);
        }
    }

    private void ReadQueryString() {
        string qs = string.Empty;
        if (Request.QueryString["ctrl"] != null) {
            qs = Request.QueryString["ctrl"].ToString();
            switch (qs) {
                case "home":
                    mControlToLoad = "ucHome.ascx";
                    break;
                case "view":
                    mControlToLoad = "ucView.ascx";
                    break;
                default:
                    mControlToLoad = "ucHome.ascx";
                    break;
            }
        }
        else {
            mControlToLoad = "ucHome.ascx";
        }
    }
}

Nah, jika Anda lihat pada method ReadQueryString() maka Anda akan melihat pada saya menyiapkan dua file yang masing-masing bernama ucHome.ascx dan ucView.ascx. Fungsi dari file ini adalah sbb :

ucHome.ascx, sebagai file yang pertama kali akan diload oleh injector. Katakanlah sebagai mainpage dari module Anda yang berisi agregat dari artikel-artikel Anda. Agregat ini biasanya hanya judul artikel dan summary artikel. Pada halaman ini saya meletakkan dua buah kontrol yakni LinkButton1 dan Hyperlink1.
ucView.ascx, sebagai file yang saya asumsikan konten dari detail artikel. Pada halaman ini saya meletakkan sebuah LinkButton untuk kembali ke halaman utama

Beginilah desain dari halaman ucHome.ascx dan ucView.ascx :

Masuklah ke dalam code behind pada ucHome.ascx lalu gantilah semua kodenya dengan kode berikut ini (saya akan jelaskan kemudian):

using System;
using DotNetNuke.Entities.Modules;
using DotNetNuke.Common;
using DotNetNuke.Entities.Portals;

public partial class DesktopModules_ContentManager_ucHome : PortalModuleBase
{
    protected void Page_Load(object sender, EventArgs e) {
        if (!IsPostBack) {
            string usefriendly = DotNetNuke.Entities.Host.HostSettings.GetHostSetting("UseFriendlyUrls");
            if (usefriendly == "Y") {
                string strURL = Globals.ApplicationURL(PortalSettings.ActiveTab.TabID);
                PortalSettings settings = PortalController.GetCurrentPortalSettings();

strURL = strURL + "&ctrl=view";
string fullURL = Globals.FriendlyUrl(settings.ActiveTab, strURL, "SukaSukaKitaAjaNih.aspx", settings);

                lnk1.NavigateUrl = fullURL;
                lnk1.Text = "Test Article";
            }
        }
    }

    protected void lnkTest_Click(object sender, EventArgs e) {
        Response.Redirect(Globals.NavigateURL(PortalSettings.ActiveTab.TabID, "", "&ctrl=view"));
    }
}

Masuklah juga ke dalam code behind pada ucView.ascx lalu gantilah semua kodenya dengan kode berikut ini :

using System;
using DotNetNuke.Common;
using DotNetNuke.Entities.Modules;

public partial class DesktopModules_ContentManager_ucView : PortalModuleBase
{
protected void Page_Load(object sender, EventArgs e) {

    }
    protected void lnkReturn_Click(object sender, EventArgs e) {
        Response.Redirect(Globals.NavigateURL());
    }
}

Simpan semua perubahannya. Dan daftarkan module Anda ke dalam DotNetNuke. Caranya :

Login sebagai Host
Masuk ke menu Host --> Module Definitions
Dari jendela Edit Module Definitions, pilih Create Module Definitions. Lalu isikan masing-masingnya dengan informasi sebagai berikut :

Module Name : ContentManager
Folder Name : ContentManager
Friendly Name : ContentManager
Description : Content Manager module v1.0
Version : 01.00.00

Klik tombol Update.
Setelah itu isikan juga pada bagian New Definition dengan ContentManager. Klik Add Definition.
Tambahkan kontrol baru dengan cara klik link Add Control.
Dari jendela Edit Module Control, pilihlah DesktopModules/ContentManager/injector.ascx dari dropdown Source.
Klik tombol Update.

Module ContentManager Anda kini telah siap dan telah tersedia pada daftar modul di dalam Control Panel DNN. Tambahkan modul Anda ke dalam halaman Home seperti ini :

Kliklah pada "Test Articles" yang pertama. Lihatlah bahwa ucView.ascx akan di load dan ditampilkan. Perhatikan URL-nya sekarang :

Klik link Return untuk kembali ke halaman sebelumnya.

Sekarang klik pada "Test Articles" yang kedua. Lihat kembali bahwa ucView.ascx akan di load dan ditampilkan. Disinilah menariknya, lihatlah pada URL-nya sekarang :

Cool yah !

Triknya ada pada kode berikut ini :

protected void Page_Load(object sender, EventArgs e) {
if (!IsPostBack) {

            // Cek terlebih dahulu apakah fitur UseFriendlyUrls aktif dari menu
            // Host --> Host Settings. Nilai defaultnya selalu aktif.
            string usefriendly = DotNetNuke.Entities.Host.HostSettings.GetHostSetting("UseFriendlyUrls");

            // Jika Ya
            if (usefriendly == "Y") {
                // Dapatkan alamat aktif URL saat ini berdasarkan tab dimana module berada
                string strURL = Globals.ApplicationURL(PortalSettings.ActiveTab.TabID);

// Ambil nilai PortalSettings aktif saat ini untuk kita rewrite
PortalSettings settings = PortalController.GetCurrentPortalSettings();

                // Construct URL-nya dengan menambahkan parameter querystring yang
                // Anda butuhkan
                strURL = strURL + "&ctrl=view";

                // Ubah URL menggunakan FriendlyUrl untuk menggenerate yang baru
                // SukaSukaKitaAjaNih.aspx adalah penamaan yang dapat disesuaikan
                // dengan kebutuhan Anda
                string fullURL = Globals.FriendlyUrl(settings.ActiveTab, strURL, "SukaSukaKitaAjaNih.aspx", settings);

                // Lekatkan pada Hyperlink bernama lnk1
                lnk1.NavigateUrl = fullURL;
                lnk1.Text = "Test Article";
            }
        }

Nah, dengan cara ini sekarang module saya sudah dapat me-rewrite URL dengan kata apapun yang saya inginkan dan dengan demikian informasi dalam module sudah bersifat SEO-friendly.

Hope this help !

Share this post: | | | |

Windows Live Platform TTT birds-eye report

agung — Sat, 26 Apr 2008 03:39:08 GMT

Tak terasa training Windows Live Platform TTT (Train the Trainer) yang diselenggarakan sejak Rabu-Jumat tanggal 23-25 di Bangkok sudah selesai. Ada banyak hal yang saya dapatkan disini mengenai teknologi tersebut. Berikut ini saya jelaskan beberapa menurut pendapat saya pribadi dan kemungkinan implementasinya di Indonesia sebagai berikut :

Messenger Presence API, seperti yang digambarkan oleh Andri Yadi pada blognya disini. Anda tinggal meletakkan kode javascript yang ditentukan oleh API-nya ke dalam aplikasi ASP .NET Anda. Kemungkinkan untuk diimplementasikan di Indonesia sangat besar sebab ini hanya menampilkan status MSN Anda.
Messenger Agent, yakni memungkinkan untuk membuat BOT dari MSN untuk menjawab pertanyaan-pertanyaan secara otomatis. BOT ini dapat memangkas biaya seorang customer service sepertinya. :) Sebab interaksi chating dilakukan oleh user MSN yang memanggil dengan mesin, dan hasilnya dapat ditampilkan sebagai activities yang tampil disebelah kanan layar secara interaktif. Ini sangat menarik. Kemungkinan untuk diimplementasikan di Indonesia sangat besar.
Messenger Activities, seperti yang digambarkan oleh Risman Adnan pada blognya disini. Dan saya membuat sample activities yang menampilkan RSS dari blog INDC yang dapat dipilih berdasarkan karakteristik tertentu seperti username, tanggal blog, atau berdasarkan tag. Menarik sekali. Jika dikombinasikan dengan Messenger Agent, maka akan menghasilkan suatu interaksi yang sangat menarik seperti misalnya Anda dapat saja membuat aplikasi untuk remote e-training dimana melalui MSN Anda yang sedang aktif, Anda invite satu atau lebih teman Anda dan ketika teman-teman Anda sudah join pada percakapan MSN yang Anda buat, aplikasi activities Anda barulah di launch dan mereka dapat dipandu langkah demi langkah untuk belajar langsung secara interaktif dengan cara yang mudah dan murah. Kemungkinan untuk diimplementasikan di Indonesia sangat besar.
Silverlight streaming, meskipun namanya cukup menarik akan tetapi pada kenyataanya jika ini harus diimplementasikan di Indonesia akan kurang bijak mengingat semua video harus diupload pada server utama silverlight melalui mekanisme https. Dan karena servernya tidak berada di dalam jalur IIX, tentu Anda dapat bayangkan berapa lama Anda harus menyaksikan video secara lengkap. Kode dan caranya sangatlah mudah, akan tetapi hasil yang diinginkan sangatlah berbeda jika dilihat dari Indonesia. Ketika saya mencoba ini di Bangkok, secara infrastruktur memang sudah sangat memadai sehingga tidak ada masalah untuk silverlight streaming yang ditampilkan dengan cepat pada client. Jadi, kemungkinan untuk diterapkan di Indonesia belum maksimal. Kecuali untuk mereka yang memiliki bandwidth diatas rata-rata.
Messenger IM Control, ini sangat mudah dilakukan jika Anda ingin meletakkan Windows Live Messenger yang di embed ke dalam aplikasi ASP .NET Anda. Pendekatannya bisa menggunakan IFRAME, atau dengan Javascript. Anda dapat melihat contohnya pada blog saya yakni di sebelah kanan bawah dari halaman blog saya. Cara membuatnya dapat Anda lihat disini.
Live Search, memungkinkan Anda untuk mengintegrasikan pencarian dengan menggunakan Live Search API. Hal ini tidak begitu sulit sebab sebelumnya saya dan mungkin kebanyakan dari Anda pernah bermain dengan Google Search API. Kemungkinan untuk diimplementasikan di Indonesia sangat besar.
Live Spaces, memungkinkan Anda untuk mempunyai 'ruang maya' di internet untuk dijadikan sebagai blog atau personal web atau apa saja. SDK-nya memungkinkan untuk memanfaatkan Live Spaces dari custom aplikasi Anda. Menarik.
Live ID, saya masih melihat bahwa ini seperti pengganti dari Microsoft Passport yang dahulu sepertinya kurang begitu popular. Tetapi dengan Live ID, Anda dapat memanfaatkan fitur-fitur dan API-API lain di dalam Windows Live Platform. Ini adalah sesuatu yang menarik untuk dikaji. Menarik dan dapat diterapkan di Indonesia.
Live Data, memungkinkan Anda untuk share kontak dan informasi data-data yang ingin Anda bagi dan Anda akses darimanapun melalui internet. Anda dapat mengintegrasikan pada aplikasi Anda dengan sangat mudah. Menarik dan dapat diterapkan di Indonesia.

Demikian yang dapat saya informasikan pada kesempatan kali ini. Sebagai tambahan, saya sendiri telah mencoba hal-hal tersebut di atas untuk diimplementasikan pada DotNetNuke dan banyak inspirasi yang bisa saya dapatkan untuk menambahkan fitur-fitur baru di level modul.

Dan sepertinya tidak lama lagi kita akan share pengetahuan kita mengenai Windows Live Platform ini untuk teman-teman di Indonesia. Tunggu saja tanggal mainnya.

Salam dari Bangkok.

Share this post: | | | |

Hari 1 - Windows Live Platform Train-the-Trainer

agung — Thu, 24 Apr 2008 04:33:00 GMT

11.42

Ben Williams, trainer dari Microsoft Corp memberikan gambaran menyeluruh mengenai Windows Live Platform. Man, this guys almost know everything about Windows Live Platform ! Sangat menarik mengetahui bahwa ada banyak hal yang bisa dilakukan oleh .NET developer saat menggunakan Windows Live Platform diantaranya (sebenernya lebih banyak dari yang saya sebutkan ini) :

Integrasi dengan Windows Live Search
Integrasi dengan Windows Live Spaces
Integrasi dengan Virtual Earth
Integrasi dengan Silverlight Streaming
Integrasi dengan Windows Live Data
Integrasi dengan Windows Live ID
Integrasi dengan Windows Live Controls

Microsoft tampaknya sangat serius untuk menjadikan Windows Live Platform sebagai teknologi terkini yang akan datang. Banyak sekali fitur-fitur menarik di dalam Windows Live Platform yang akan sangat memudahkan .NET developer dalam bekerja dan mengintegrasikan sistem mereka dalam kesatuan online yang utuh. Meskipun kenyataannya tidak semua fitur akan digunakan oleh .NET developer, akan tetapi pemecahan modular dari masing-masing fitur ini akan sangat membantu Anda. Visi "Cloud" yang diusung oleh Microsoft terasa sangat kental setelah mendapatkan pencerahan mengenai platform ini. Satu hal yang bisa saya katakan adalah ... LUAR BIASA.

Hari pertama ini cukup menyenangkan bisa mengintegrasikan Windows Live Messenger pada blog ini. Anda dapat melihat pada bagian kanan dari blog saya dan dapat melakukan chating dengan saya saat saya aktif. Untuk chating, disarankan untuk menggunakan Windows Live ID sebab saya tidak mengaktifkan anonymous sender pada Windows Live Messenger saya. Kodenya sebenarnya sederhana, jika Anda klik kanan pada blog ini dan pilih View Source maka Anda akan mendapatkan tag IFRAME yang berisi parameter-parameter yang dibutuhkan. Ya, semudah itulah Anda menempelkan IM pada aplikasi ASP .NET Anda. Meski demikian, ada banyak pendekatan dan cara untuk melakukannya tidak hanya via IFRAME. Anda dapat menggunakan empat kemungkinan ini :

IFRAME
JavaScript
Windows Live Control
Custom C# code

Masing-masing dengan tingkat kesulitan yang semakin meninggi dari nomor 1 sampai dengan nomor 4. Saya gunakan dulu yang paling mudah sebab memang materi untuk yang nomor 2, 3, dan 4 belum dijelaskan. Dan akan dijelaskan setelah makan siang ini. Untuk langkah yang pertama, Anda dapat melihat tutorialnya disini. Anda dapat menerapkan pada blog Anda sekarang. Pastikan Anda telah membuat sebuah account Windows LiveID.

Hmm, tiba-tiba terlintas ide untuk membuat modul DotNetNuke yang menggunakan fitur ini. Sepertinya sangat menarik. :-)

So stay tune for the next blog.

Note:
Naren, Andri, dan Risman akan blogging dengan materi yang berbeda.

Share this post: | | | |

Going to Bangkok, Thailand

agung — Wed, 23 Apr 2008 03:29:00 GMT

Yes, we will be going to Bangkok for Windows Live Train the Trainer from 23-25 of April 2008. If you want to know our team, here they are :

Those people are my partner in crime !! :D

We will share our material after we go back to Indonesia. So stay tune !

Share this post: | | | |