Bertemu Telligent Community pertama kali, mengingatkan pertemuan dengan Community Server 2007 setelah sebelumnya bersama Community Server 2.1. Perbedaan yang gampang dilihat dari ‘installer’ Telligent Community adalah struktur direktori dan aturan pembuatan Theme. Sekilas aturan pembuatan Theme pada Telligent Community ‘seperti’ mendekati Graffiti.
Dari sisi teknologi, Telligent Community sudah menggunakan .NET 3.5, jadi bagi pihak ingin menggunakan produk ini, harap dipastikan komputer atau tempat hosting telah menggunakan .NET FX 3.5.
Saat Telligent Community berhasil di-‘install’ dan tayang pada web browser ada beberapa hal yang langsung terlihat perbedaannya bila dibandingkan dengan Community Server. Yang langsung terlihat adalah tidak adanya navigasi utama seperti versi sebelumnya. Tidak ada navigasi Blogs, Forums dan Downloads (pada versi Community Server 2007) atau tidak ada Blogs, Forums, Media, Groups, Wikis (pada versi Community Server 2008).
Seperti dilihat antarmuka Telligent Community akan seperti berikut ini.
Pada navigasi utama, admin dibebaskan untuk meletakkan apa saja. Admin dapat meletakkan fitur Blog, Forum, Media, Wiki bahkan halaman article (fitur Articles dapat disamakan dengan fitur Page pada Wordpress).
Setiap halaman pada Telligent Community dapat di cutomize baik dari segi layout tata letak dan fitur-fitur yang ingin ditampilkan. Fitur-fitur yang ingin ditampilkan ini akan disebut sebagai Widget.
Pada gambar berikut ini dapat dilihat terdapat menu pada halaman setelah user login.
Dengan mengklik “Enter Edit Mode” atau “Customize” maka akan dilihat antarmuka untuk mengubah layout.
Dan berikut antarmuka untuk menambah Widget pada halaman yang sedang di customize.
Widget dapat di drag-n-drop pada lokasi yang diinginkan pada area yang diinginkan. Hal seperti ini jadi mengingatkan cara pengaturan Module pada DotNetNuke.
Seperti yang telah disebutkan pada posting sebelumnya, bahwa “widget yang dulu hanya berada pada sidebar saja, sekarang widget dapat diletakkan dimana saja”. Widget pada Telligent Community akan bisa dibandingkan atau disamakan dengan Module pada DotNetNuke (DNN). Artinya bila nanti ingin menambah fitur baru pada Telligent Community, maka cukup buat Widget dan tinggal login sebagai admin untuk meletakkan widget tersebut pada area yang diinginkan pada halaman.
{Control Panel}
Antarmuka pada Control Panel tidak berbeda jauh dengan versi sebelumnya, tetap dari segi fitu terdapat banyak perkembangan. Yang menarik adalah fitur Membership Administration. Admin dapat menambahkan field-field tambahan untuk user yang dapat dilihat pada saat registrasi atau diedit oleh user tersebut saat dihalaman user profile.
Sekian waktu 13 menit untuk melihat Telligent Community, pada kesempatan berikutnya akan dicoba membahas tata cara membuat theme pada Telligent Community.
Berikut tampilan halaman Profile pada Telligent Community :
Sepertinya Facebook jadi kiblat untuk dicontek para pembuat produk aplikasi untuk komunitas. Terlihat pada “skrin-sut” di atas, terdapat fitur untuk menuliskan status user pada halaman profile.
Artinya siap2 saja ada status seperti berikut :
- Rully R lagi ngajar MOC-1313
- Agus Suhanto lagi ngetem di ‘Ngopi Doeloe’
- Wely lagi mengejar-ngejar professor di NTU
- Agus Kurniawan menyeruput kopi hitam sambil menulis paper
- Lutfie lagi jalan-jalan di bukit bintang
- etc
Cuma tulisan ringat, selamat menunaikan libur akhir pekan.
Sekarang dipastikan nama Community Server tidak akan di dengar lagi…
Domain communityserver.com dipastikan hanya akan domain tanpa isi yang bertugas me-redirect ke alamat lain…
Sekarang nama Community Server akan berubah menjadi Telligent Community dengan beberapa perubahan baik dari sisi teknologi dan fungsi. Berikut beberapa hal yang ada dan tiada setelah Community Server berganti nama dengan Telligent Community.
- Fitur Enterprise Search menggunakan Lucene berbasis Java base Solr, hmm…jadi bila ingin menggunakan fitur ini pastikan Java & Tomcat terinstal. Apakah ini tanda-tanda campur tangan IBM di Telligent (pernah ada berita IBM ‘membeli’ Telligent…beberapa waktu yang lalu…CMIIW) dengan “merekomendasikan” teknologi Java pada produk Telligent? Siap2 Community Server –> Telligent Community tidak menggunakan .NET lagi, tapi Java :) {khayalan tingkat tinggi}.
- Community Server SDK –> jangan berharap bakal ada Telligent Community SDK. walaupun dijanjikan Telligent Community akan lebih gampang dikostumisasi, tapi saya yakin tetap akan lebih bebas melakukan kostumisasi bila SDK (source code) ada di tangan. Jangan-jangan sengaja SDK (source code) tidak dibuka biar tidak ketahuan kalau Telligent Community sudah ditulis dengan Java :)
- Fitur Widget yang pada CS hanya berada pada sidebar, sekarang widget dapat berada diposisi mana saja dalam suatu halaman. Sepertinya Telligent Community juga akan berfungsi sebagai CMS sehingga banyak fitur-fitur CMS yang akan dapat ditemui pada TC.
- Akan ada Theme baru dengan nama Fiji, dan theme Hawaii yang merupakan theme default pada Community Server sudah tidak dapat digunakan lagi pada Telligent Community.
- Fitur Group & Categories, hmm…Categories, sepertinya fitur baru nih. Sepertinya fitur ini mirip dengan fitur yang kami buat dengan nama Classified, Kalau benar, artinya modul Classified akan mati tak terjual lagi :)
- Terdapat fitur tambahan pada pengelolaan Profile user, admin akan mempunyai kemudahan untuk menambah field-field pada data profile user. Hm..ini juga salah satu item yang biasanya dikenakan biaya ketika client ingin menambahkan field tambahan pada data profile user :)
- Terdapat tambahan fitur pada Wiki yang masih dirahasiakan.
Apakah nanti akan ada Telligent Community Express Edition?
Ingin mencoba dan merasakan Telligent Community, silakan unduh di sini.
I’m not Community Server Developer Anymore, I’m Telligent Community Developer now.
Informasi detail : http://www.componentart.com/community/competition2009/
{Semoga kali ini tidak salah posting lagi seperti kemaren}
Menjiplak judul dari blognya om Rully di sini, dengan judul yang mirip tetapi isinya yang berbeda. Hari ini, tanggal 21 Juni 2009 diadakan event Microsoft Technology Update di Politeknik Banjarmasin. Acara ini dibuka untuk umum dan dihadiri kurang lebih 250-an peserta yang terdiri atas mahasiswa, professional di bidang IT dan dosen.
Politeknik Banjarmasin adalah politeknik negeri yang ada di Banjarmasin, berita yang menggembirakan dari Politeknik Ini adalah team robotik mereka menjadi juara nasional untuk kategori Design Terbaik.
Suatu saat, sepertinya akan menarik apabila diadakan event yang serupa dengan materi yang lebih menarik seperti :
- Robot Programming dengan Robotik Studio.
- Game Development dengan XNA.
Pada event kali ini ada 3 materi yang disampaikan (tidak bisa banyak-banyak kaya di MUGI Bandung euy…orang yang jadi pembicara cuma sedikit…hehehe). Berikut sedikit oleh-oleh hasil capture saat event ini berlangsung :
{Perkenalan MUGI, oleh Suherman}
Suherman adalah praktisi IT yang bekerja di PDAM (perusahaan daerah air minum) Bandarmasih. Di tempat beliau bekerja menggunakan teknologi Microsoft untuk mendukung proses bisnis-nya. Teknologi yang digunakan diantaranya SQL Server 2008, FoxPro, ASP.NET 3.5 dan aplikasi-aplikasi Windows Mobile yang digunakan untuk mempermudah pencatatan yang dilakukan oleh para teknisi mereka di lapangan.
{Having Fun in Sunday with ASP.NET & Silverlight, oleh Reza}
Materi yang disampaikan adalah meliputi perkenalan ASP.NET & Silverlight dan memperkenalkan tool-tool gratis untuk membangun aplikasi web dengan ASP.NET & Silverlight seperti Visual Web Development, SQL Server 2008 Express Edition, Deep Zoom Composer, Blend 3 Preview.
{Windows 7 RC Sneak Peek, oleh Suherman}
Materi diantaranya adalah feature terbaru pada Windows 7 yaitu XP Mode (hmmm……IE6…IE6…), selain itu juga materi tentang IE8 yang meliputi : Web Slice dan Web Accelerator.
{Develop Mobile Application with Visual Studio, oleh Ferry Adhitya Kurniawan}
Seperti Suherman, Ferry adalah pegawai di PDAM Bandarmasih yang karyanya adalah membuat aplikasi dengan Windows Mobile yang digunakan oleh para teknisi di PDAM Bandarmasih untuk mencatat hasil kerja mereka di lapangan. Data-data yang dicatat dilapangan akan disimpan ke server yang mereka miliki dikantor, hal ini sangat membantu menghemat tenaga dan waktu.
{Audience}
{Panitia}
{Goodies}
{Terima Kasih}
Terima kasih buat Panitia di Politeknik Banjarmasin yang telah mengadakan acara ini. Terima kasih buat teman-teman di Microsoft Indonesia yang telah memberi bantuan sehingga event ini bisa lebih semarak.
Bukan rahasia lagi untuk membuat Silverlight Deep Zoom seperti Hard Rock Memorabilia atau Obama Deep Zoom cukup dengan menggunakan Deep Zoom Composer (walau tentunya untuk kasus Hard Rock Memorabilia terdapat code tambahan).
Pada Hard Rock Memorabilia, dapat kita lihat gambar-gambar dikelompokkan berdasarkan artis-artisnya, sehingga ketika user mengklik menu nama artis yang berada pada sisi kiri, maka secara otomatis gambar-gambar akan difilter berdasarkan artis yang dipilih.
Tulisan ringan kali ini akan membuat hal yang mirip seperti di atas dengan menggunakan Deep Zoom Composer dan Visual Studio 2008.
Pertama akan dibuat Silverlight Deep Zoom sederhana dengan menggunakan Deep Zoom Composer. Seperti telah diketahui bahwa untuk membuat Silverlight Deep Zoom diperlukan 3 langkah, yaitu :
Import, untuk mengimport gambar yang akan digunakan.
Compose, mengatur tata letak gambar. Kita cukup men-drag-n-drop gambar-gambar untuk disusun sesuai selera.
Pada contoh misalnya sudah disusun 4 gambar, kita bisa mengelompokkan ke empat gambar tersebut dengan memberikan nilai Tag yang sama (liat lingkaran merah). Bila setiap gambar unik, maka kita dapat memberikan nilai Tag yang unik juga untuk setiap gambar.
Setelah Proses “Compose” selesai, langkah yang terakhir adalah Export.
Pilih tab Silverlight Export, dan klik tombol Export, maka akan di dapati kotak opsi berikut :
Bila tidak sabar untuk mencoba hasil gamba-gambar yang bisa di zoom-in dan zoom-out, maka bisa langsung diklik Preview in Browser, tetapi karena kita akan sedikit mengotori tangan dengan pekerjaan penulisan code (kalau ada), maka kita bisa memilih View Project Folder.
Mari kita tengok sejenak apa yg ada di dalam Project Folder, kita akan mendapati dua folder yaitu : DeepZoomProject & DeepZoomProjectWeb. Gambar dan informasi tag-tag yang telah diberikan pada gambar-gambar sebelumnya disimpan pada project DeepZoomProjectWeb pada folder ClientBin > GeneratedImages.
Pada folder yg ada di atas, tersimpan gambar-gambar yg telah tepotong-potong. Sedangkan pada file Metadata.xml terdapat informasi yang menyimpan nilai tag pada setiap gambar. Berikut ini contoh isi dari file Metadata.xml.
<Image>
<FileName>C:\Users\M Reza Faisal\Documents\Expression\Deep Zoom Composer Projects\ModelsDeepZoom\source images\endlesslines.jpg</FileName>
<x>0.139386243187913</x>
<y>0</y>
<Width>0.116093376118841</Width>
<Height>0.247035362002187</Height>
<ZOrder>2</ZOrder>
<Tag>Esta</Tag>
</Image>
<Image>
<FileName>C:\Users\M Reza Faisal\Documents\Expression\Deep Zoom Composer Projects\ModelsDeepZoom\source images\freedom.jpg</FileName>
<x>0</x>
<y>0.278272556100677</y>
<Width>0.131690525415852</Width>
<Height>0.295775325012466</Height>
<ZOrder>3</ZOrder>
<Tag>Esta</Tag>
</Image>
Langkah selanjutnya adalah dengan mengunduh solution DeepZoomMetadata berikut ini. Ada beberapa file yang telah dimodifikasi pada solution ini agar bisa digunakan pada SL 3.0 Beta 1 (dan semoga juga bisa digunakan pada SL 2.0 RTW) karena sebelumnya solution ini didapat saat SL 2.0 masih dalam versi Beta 2.
Setelah file di atas diunduh, dan dibuka dengan VS2008 atau Visual Web Developer, maka dapat dilihat solution explorer seperti berikut :
Kalau diperhatikan, pada folder ClientBin tidak ditemukan folder GeneratedImages, sebagai gantinya kita cukup copy folder GeneratedImages dari olahan Deep Zoom Composer, kemudian paste folder tersebut ke folder ClientBin via VS2008 (yang telah dilingkari merah). Build solution dan pilih DeepZoomMetadataTestPage.html untuk “di view in browser”. Dan hasilnya akan bisa dilihat seperti pada gambar berikut ini.
Saat Salah satu nilai pada ListBox dipilih, misalnya Esta maka hanya gambar-gambar dengan tag Esta saja yang akan ditampilkan.
Selamat mencoba dan selamat menikmati akhir pekan…dengan ngoding, belajar dan bekerja :)
Tulisan ini dibuat untuk mendokumentasikan apa yang telah dikerjakan agar tidak lupa, sehingga bila ditemui hal yang serupa maka akan gampang membuat kembali (note : tip untuk orang pelupa seperti saya).
Sabtu kemarin dihabiskan dengan menulis untaian code Chameleon agar bisa berkolaborasi membentuk sebuah theme Community Server. Theme yang unik, yang sesuai dengan permintaan. Maka jadilah sebuat theme dengan antarmuka seperti berikut ini :
Theme yang nanti akan digunakan oleh website dengan alamat http://ifernet.info/, IFERNET atau International Fire & Emergency Responder Network merupakan website komunikasi yang akan men-share berita, tips serta informasi lain yang akan ditangani oleh modul Classified yang telah kami buat. Ini merupakan website Community Server kedua yang menggunakan modul Classified setelah Turfmonster. Modul Classified merupakan implementasi ASP.NET Classified Starter Kit pada Community Server.
Salah satu permintaan yang biasa kami temui adalah penambahan field untuk menyimpan informasi tambahan untuk User, contohnya seperti pada form registrasi di bawah ini :
Dapat dilihat terdapat tambahan informasi user pada form, yaitu :
- IFERNET Member Number.
- ORI Number (FBI, NLETS, or IFERNET Assigned).
- Department.
- Assignment.
- Rank.
- dan lain-lain.
Untuk menambahkan informasi di atas pada database dan juga untuk membuat antarmukanya, kita memerlukan Community Server SDK (source code) untuk mengubah beberapa class dan antarmuka. Community Server SDK dapat diunduh di : http://get.communityserver.com/download/moredownloads.aspx.
Informasi-informasi di atas dapat ditambahkan tanpa harus menambahkan field baru pada table, karena konsep yang digunakan oleh Community Server sama seperti yang biasa digunakan pada ASP.NET yaitu menggunakan Profile.
Untuk menambahkan informasi pada user maka langkah-langkah yang harus diikuti adalah sebagai berikut :
{Menambahkan informasi yang akan ditambahkan pada web.config}
Informasi tambahan pada user ini harus didaftarkan pada file web.config seperti berikut ini :
1: . . .
2: <profile defaultProvider="CommunityServerSqlProvider" enabled="true" >
3: <providers>
4: . . .
5: </providers>
6:
7: <properties>
8: <add name = "commonName" type = "string" />
9: <add name = "birthdate" type = "DateTime" />
10: . . .
11: <add name = "firstName" type = "string" />
12: <add name = "lastName" type = "string" />
13: <add name = "memberNumber" type = "string" />
14: <add name = "oriNumber" type = "string" />
15: <add name = "contactCell" type = "string" />
16: <add name = "contactPhone" type = "string" />
17: <add name = "department" type = "string" />
18: <add name = "stationNumber" type = "string" />
19: <add name = "stationPhone" type = "string" />
20: <add name = "stationAddress" type = "string" />
21: <add name = "latitude" type = "string" />
22: <add name = "longitude" type = "string" />
23: <add name = "badgeHelmetNumber" type = "string" />
24: <add name = "assignment" type = "string" />
25: <add name = "rank" type = "string" />
26: <add name = "supervisorName" type = "string" />
27: <add name = "supervisorPhone" type = "string" />
28: </properties>
29: </profile>
30: . . .
Dimulai pada baris ke 11, dapat dilihat tambahan informasi baru yang akan disimpan.
{Mendaftarkan informasi tambahan sebagai extend data pada communityserver.config}
Langkah selanjutnya adalah mendaftarkan informasti tambahan tersebut sebagai extend data dengan tata-cara penulisan seperti berikut :
1: . . .
2: <ExtendedUserData>
3: <add name = "firstName" type = "string" />
4: <add name = "lastName" type = "string" />
5: <add name = "memberNumber" type = "string" />
6: <add name = "oriNumber" type = "string" />
7: <add name = "contactCell" type = "string" />
8: <add name = "contactPhone" type = "string" />
9: <add name = "department" type = "string" />
10: <add name = "stationNumber" type = "string" />
11: <add name = "stationPhone" type = "string" />
12: <add name = "stationAddress" type = "string" />
13: <add name = "latitude" type = "string" />
14: <add name = "longitude" type = "string" />
15: <add name = "badgeHelmetNumber" type = "string" />
16: <add name = "assignment" type = "string" />
17: <add name = "rank" type = "string" />
18: <add name = "supervisorName" type = "string" />
19: <add name = "supervisorPhone" type = "string" />
20: </ExtendedUserData>
21: . . .
{Modifikasi class Profile}
Class Profile ini disimpan pada file Profile.cs yang berada pada project CommunityServer.Components pada CS SDK Solution. Pada web.config telah ditambahkan beberapa data, salah satunya adalah ORINumber. Maka pada Profile.cs kita perlu tambahkan Field ini sebagai contoh kode seperti berikut ini :
1: /// <summary>
2: /// ORINumber
3: /// </summary>
4: public String ORINumber
5: {
6: get { return GetString("oriNumber"); }
7: set { Set("oriNumber", value); }
8: }
pada Field di atas digunakan dua method tambahan yaitu :
Set, method ini merupakan method milik class Profile yang berfungsi untuk ‘menyimpan’ data oriNumber. Berikut adalah isi dari method Set ini :
1: /// <summary>
2: /// Providers write access to the internal SettingsPropertyValueCollection. If ReadOnly mode = true,
3: /// the data will not be saved. (if in debug mode, an exception will be thrown)
4: /// </summary>
5: /// <param name="key">Data Key</param>
6: /// <param name="obj">Data Value</param>
7: protected void Set(string key, object obj)
8: {
9: if(!IsReadOnly)
10: profilebase.SetPropertyValue(key,obj);
11: else
12: {
13: #if DEBUG
14: throw new Exception("Profile Object is in readonly mode. Data can not be updated");
15: #endif
16: }
17: }
GetString, selain method GetString juga terdapat method GetInt dan yang lainnya. Method untuk mengambil data ini disesuaikan dengan tipe datanya. Berikut adalah isi dari method GetString :
1: /// <summary>
2: /// Provides read access to the internal SettingsPropertyValueCollection.
3: /// </summary>
4: /// <param name="key"></param>
5: /// <returns></returns>
6: protected string GetString(string key)
7: {
8: string s = GetObject(key) as string;
9: return s == null ? string.Empty : s;
10: }
{Mengedit Class CreateUserForm}
Class ini disimpan pada file CreateUserForm.cs yang berada pada project CommunityServer.Controls. Misalnya ingin menambahkan informasi oriNumber, maka ada beberapa hal yang akan dilakukan yaitu menambahkan kode seperti berikut ini :
1: namespace CommunityServer.Controls
2: {
3:
4: /// <summary>
5: /// Form control that implements support for creating/registering a new user.
6: /// </summary>
7: public class CreateUserForm : WrappedFormBase
8: {
9: . . .
10: TextBox ORINumberTextBox;
11: . . .
12: /// <summary>
13: /// Gets or sets ORI Number <see cref="T:System.Web.UI.WebControls.TextBox" /> id.
14: /// </summary>
15: /// <value>ORINumber <see cref="T:System.Web.UI.WebControls.TextBox" /> id.</value>
16: public string ORINumberTextBoxId
17: {
18: get { return (string)(ViewState["ORINumberTextBoxId"] ?? ""); }
19: set { ViewState["ORINumberTextBoxId"] = value; }
20: }
21:
22: protected override void AttachChildControls()
23: {
24: . . .
25: ORINumberTextBox = CSControlUtility.Instance().FindControl(this, this.ORINumberTextBoxId) as TextBox;
26: . . .
27: }
28:
29: protected virtual void SaveAdditionalProfileData(User user)
30: {
31: . . .
32: if (ORINumberTextBox != null)
33: user.Profile.ORINumber = ORINumberTextBox.Text;
34: . . .
35: }
36: }
37: }
{Menggunakan pada createuser.aspx}
File createuser.aspx terdapat pada folder Themes/[nama theme]/User.
Apa yang telah kita lakukan pada langkah di atas berfungsi untuk menambahkan penanganan kontrol input oleh control CreateUserForm. Setelah kode di atas ditambahkan dan solution telah dibuild, maka berikut ini cara menggunakannya pada form create user pada file createuser.aspx.
1: <CSControl:CreateUserForm runat="server"
2: CreateButtonId="CreateAccount"
3: UserNameTextBoxId="Username"
4: . . .
5: ORINumberTextBoxId="ORINumber"
6: . . .
7: >
8: <FormTemplate>
9: <asp:TextBox ID="ORINumber" MaxLength="64" runat="server" columns="55" Height="17" />
10: </FormTemplate>
11: </CSControl:CreateUserForm>
Bila diperhatikan baris ke-5 dan baris ke-9, maka ID dari control TextBox sama dengan nilai pada ORINumberTextBoxId. Sedangkan nilai ORINumberTextBoxId sendiri muncul dengan melihat kode pada class CreateUserForm pada baris ke-16.
File CreateUserForm.cs dan createuser.aspx berfungsi untuk proses registrasi user, sedangkan untuk preses edit profile user maka langkah dan file yang harus dimodifikasi adalah seperti berikut ini.
{Modifikasi Class EditUserForm}
Class EditUserForm disimpan pada file EditUserForm.cs pada project CommunityServer.Controls. Kode berikut ini dapat memberikan contoh kode yang harus ditambahkan pada file EditUserForm.cs.
1: namespace CommunityServer.Controls
2: {
3: /// <summary>
4: /// Form control implementing support for editing an existing user.
5: /// </summary>
6: public class EditUserForm : WrappedFormBase, IDataItemsContainer
7: {
8: . . .
9: TextBox ORINumberTextBox;
10: . . .
11: /// <summary>
12: /// Gets or sets ORI Number <see cref="T:System.Web.UI.WebControls.TextBox" /> id.
13: /// </summary>
14: /// <value>ORINumber <see cref="T:System.Web.UI.WebControls.TextBox" /> id.</value>
15: public string ORINumberTextBoxId
16: {
17: get { return (string)(ViewState["ORINumberTextBoxId"] ?? ""); }
18: set { ViewState["ORINumberTextBoxId"] = value; }
19: }
20: . . .
21:
22: protected override void AttachChildControls()
23: {
24: . . .
25: ORINumberTextBox = CSControlUtility.Instance().FindControl(this, this.ORINumberTextBoxId) as TextBox;
26: . . .
27: }
28: . . .
29:
30: public override void DataBind()
31: {
32: . . .
33: if (!Page.IsPostBack)
34: {
35: . . .
36: if (ORINumberTextBox != null)
37: this.ORINumberTextBox.Text = userToEdit.Profile.ORINumber;
38: . . .
39: }
40: }
41: . . .
42:
43: void SubmitButton_Click(object sender, EventArgs e)
44: {
45: . . .
46: if (ORINumberTextBox != null)
47: userToEdit.Profile.ORINumber = ORINumberTextBox.Text;
48: . . .
49: }
50: }
51: }
{Modifikasi control EditUserForm pada file edituser.aspx}
File edituser.aspx terdapat pada folder Themes/[nama theme]/User.
Berikut ini contoh kode yang digunakan pada control EditUserForm.
1: <CSControl:EditUserForm ID="EditUserForm1" runat="server"
2: . . .
3: UsernameTextBoxId=""
4: . . .
5: SubmitButtonId="UpdateButtonBottom"
6: . . .
7: ORINumberTextBoxId="ORINumber"
8: . . .
9: >
10: <FormTemplate>
11: <asp:TextBox id="ORINumber" MaxLength="64" runat="server" columns="32" Height="17" />
12: </FormTemplate>
13: </CSControl:EditUserForm>
Selanjutnya adalah cara untuk menampilkan data-data tersebut. Untuk menampilkan data tersebut dapat digunakan control CSControl:UserProfileData dengan cara penggunaan seperti berikut ini :
1: <CSControl:UserProfileData Property="ORINumber" runat="server" />
Selamat menunaikan liburan anda :)
Sekarang sepertinya lagi “trend” ngobrolin VS2010 (2 tahun sebelum kiamat…kata Mama Loreng). Pada VS2008, ada hal yang menyebalkan ketika hidup anda berdekatan dengan Silverlight, yaitu anda harus setia dengan 1 versi Silverlight saja (dalam hal ini adalah Silverlight 2.0 atau Silverlight 3.0 Beta). Tetapi dengan VS2010, anda diberikan fasilitas untuk menduakan hati anda, yang artinya VS2010 memiliki fitur multi-targeting untuk membuat project Silverlight, mau membuat project dengan versi Silverlight 2.0 bisa, mau membuat project dengan versi Silverlight 3.0 Beta hayuuu….Bebas!!
Urutan installasi yang harus dilakukan adalah :
- Tentu saja harus install VS2010 terlebih dahulu.
- Dilanjutkan dengan Silverlight 2.0 SDK.
- Kemudian instal istri muda yaitu Silverlight 3.0 Beta SDK.
- Yang terakhir adalah menginstall Silverlight 3.0 Beta runtime. Lalu bagaimana dengan Silverlight 2.0 runtime? tentu saja tidak perlu, karena Silverlight 3.0 Beta runtime juga akan menangani content dengan versi Silverlight 2.0.
Dan…
Yes and No…artinya anda akan berteriak Yeeeeeeeeeees ketika melihat hal baru dan akan membantu, dan akan berteriak Nooooooooooo ketika ada hal yang tidak bisa dilakukan oleh VS2010.
Yeeeeees : kalau di VS2008 pada bagian design kita hanya bisa melihat hasil XAML yang telah kita ketikkan pada bagian editor. Sekarang, control-control dapat kita drag-drop pada bagian design. Selamat tinggal Blend? (saya harap begitu).
Noooooo : hmm….tidak tega untuk menuliskannya, silakan coba sendiri saja, yang pasti hal yang saya senangi di Silverlight 3.0 Beta tidak jalan, gara-gara tidak bisa install Silverlight 3.0 Beta Tool.
Have a nice weekend.
Jangan tertipu oleh judulnya, tidak ada langkah-langkah yang akan mengotori tangan anda untuk bermain dengan Google AJA Language API. Tapi kita coba lakukan dengan hal yang lebih mudah atau bahkah sangat mudah untuk menterjemahkan suatu kata atau kalimat dari bahasa Inggris ke bahasa yang diinginkan.
Langkah pertama yang mesti dilakukan adalah dengan menyuruh web browser berkunjung ke alamat berikut ini : http://googlelanguage.codeplex.com.
Pada alamat tersebut dapat ditemui dua file yang akan berguna, yaitu :
- GoogleLanguage.WebControls.dll, yang merupakan library yg dapat digunakan sebagai ‘alat’ yang dapat digunakan sebagai ‘penterjemah’.
- GoogleLanguage.zip, contoh web application dari penggunaan GoogleLanguage.WebControls.dll.
Setelah developer membuat suatu proyek web entah itu web site atau web application, dan telah menambahkan GoogleLanguage.WebControls.dll sebagai reference, maka selanjutnya adalah membuat sebuah file ASPX dan kemudian tambahkan baris berikut :
<%@ Register Assembly="GoogleLanguage.WebControls" Namespace="GoogleLanguage.WebControls" TagPrefix="glc" %>
Sehingga secara keseluruhan dapat dilihat kode dari file ASPX seperti ini :
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="GoogleLanguage.WebControls" Namespace="GoogleLanguage.WebControls" TagPrefix="glc" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
Ada dua control yang dapat digunakan, yaitu :
Contoh penggunaan control Literal dapat dilihat pad contoh berikut ini :
<p><glc:Literal ID="Literal1" runat="server" Text="How are you?" DestinationLanguage="HINDI" /></p>
<p><glc:Literal ID="Literal2" runat="server" Text="I am fine." DestinationLanguage="HINDI" /></p>
<p><glc:Literal ID="Literal3" runat="server" Text="Enjoy your dinner." DestinationLanguage="HINDI" /></p>
<p><glc:Literal ID="Literal4" runat="server" Text="I love music!" DestinationLanguage="HINDI" /></p>
<p><glc:Literal ID="Literal5" runat="server" Text="Do you like music too?" DestinationLanguage="HINDI" /></p>
Dan hasilnya adalah seperti berikut :
Pada control Literal yang digunakan, akan terjadi proses penterjemahan text dari nilai atribut Text dengan tujuan bahasa sesuai dengan nilai dari atribut DestinationLanguage.
Ada banyak pilihan DestinationLanguage yang dapat digunakan, sebagai contoh dapat dilihat pada gambar berikut :
Note : Contoh ini akan sangat berguna bagi anda-anda yang bekerja dengan bos yang berasal dari negeri India :)
Dan berikut adalah contoh penggunaan control Translator :
<p>
<asp:TextBox ID="TextBox2" runat="server" TextMode="MultiLine" Text="How are you? I am fine. Enjoy your dinner." />
<glc:Translator ID="Translator3" runat="server" TargetControlID="TextBox2" DestinationLanguage="GREEK" />
</p>
<p>
<asp:Button ID="Button1" runat="server" Text="Hello World" />
<glc:Translator ID="Translator4" runat="server" TargetControlID="Button1" DestinationLanguage="SPANISH" />
</p>
<p>
<asp:CheckBox ID="CheckBox1" runat="server" Text="Make sure you eat your breakfast" />
<glc:Translator ID="Translator5" runat="server" TargetControlID="CheckBox1" DestinationLanguage="HINDI" />
</p>
Pada contoh di atas, fungsi control Translator akan mengubah text pada suatu control (pada contoh di atas adalah control Label1) menjadi text dengan bahasa yang diinginkan, sesuai dengan nilai DestinationLanguage.
Selamat mencoba dan selamat menikmati liburan.
Pada posting sebelumnya sudah ada perkenalan dengan Navigation Framework pada Silverlight 3.0. Pada posting tersebut dapat dilihat penggunaan Navigation Framework sebagai menu utama. Pada framework tersebut dapat dilihat setiap aksi dilakukan pada control hyperlink atau control yang berhubungan dengan menu akan mempunyai pengaruh mengubah URL pada address bar yang ada pada browser. Framework ini juga memungkinkan developer untuk melakukan manipulasi URL sehingga mudah terbaca.
Ceritanya akan ditampilkan daftar siswa dan kemudian user dapat memilih salah satu dari data tersebut untuk menampilkan detail dari siswa tersebut.
Dari kasus tersebut maka langkah-langkah yang dilakukan adalah sebagai berikut :
{Membuat Project Silverlight Navigation Project}
Membuat project Silverlight dengan menggunakan template Silverlight Navigation Project.
{Manipulasi URL}
Bila kita jalankan project ini dan kita perhatikan alamat pada address bar, maka dapat kita ketahui bawah URL tersebut memberikan alamat asli dari setiap Page. Maka kita bisa melakukan manipulasi URL ini dengan menambahkan baris berikut pada App.xaml.
<Application.Resources>
.
.
.
<navigation:UriMapper x:Key="uriMapper">
<navigation:UriMapping Uri="Home" MappedUri="/Views/HomePage.xaml" />
<navigation:UriMapping Uri="About" MappedUri="/Views/AboutPage.xaml" />
</navigation:UriMapper>
.
.
.
</Application.Resources>
Selanjutkan modifikasi file MainPage.xaml dan ubah bagian berikut ini :
<Button Click="NavButton_Click" Tag="/Views/HomePage.xaml" Content="home"
Style="{StaticResource PageLinkStyle}"/>
<Button Click="NavButton_Click" Tag="/Views/AboutPage.xaml" Content="about"
Style="{StaticResource PageLinkStyle}"/>
Menjadi seperti berikut :
<Button Click="NavButton_Click" Tag="Home" Content="home"
Style="{StaticResource PageLinkStyle}"/>
<Button Click="NavButton_Click" Tag="About" Content="about"
Style="{StaticResource PageLinkStyle}"/>
Hasilnya dapat dilihat dari URL pada address bar.
{Menyiapkan Data}
Langkah selajutnya menyiapkan class model dan akses “data” tersebut.
namespace SilverlightNavSEO.Models
{
public class Student
{
public string NIM { set; get; }
public string Name { set; get; }
public string Address { set; get; }
}
}
Dan dimiliki class untuk mengakses data seperti berikut :
using System.Collections.Generic;
using System.Linq;
namespace SilverlightNavSEO.Models
{
public class StudentsDAO
{
public List<Student> GetAll()
{
List<Student> students = new List<Student>();
students.Add(new Student() { NIM = "10297028", Name = "Reza", Address = "Indonesia" });
students.Add(new Student() { NIM = "10296029", Name = "Houari", Address = "Korea" });
students.Add(new Student() { NIM = "10298028", Name = "Meru", Address = "Indonesia" });
return students;
}
public Student Get(string NIM)
{
var student = from c in GetAll()
where c.NIM == NIM
select c;
return student.First();
}
}
}
Pada contoh di atas terdapat 2 method yaitu :
- GetAll, yang mempunyai fungsi untuk mengambil seluruh data.
- Get, yang berfungsi untuk mengambil nilai satu data yang dipilih berdasarkan NIM.
Untuk menampilkan “data” tersebut cukup dengan memodifikasi file HomePage.xaml dan HomePage.xaml.cs seperti baris kode berikut :
<navigation:Page x:Class="SilverlightNavSEO.HomePage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
Title="HomePage Page">
<Grid x:Name="LayoutRoot" Background="White">
<ItemsControl x:Name="StudentList">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<HyperlinkButton Content="{Binding NIM}" Tag="{Binding NIM}" Click="HyperlinkButton_Click"/>
<TextBlock Text="{Binding Name}" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</navigation:Page>
Baris kode file HomePage.xaml.cs :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Navigation;
using SilverlightNavSEO.Models;
namespace SilverlightNavSEO
{
public partial class HomePage : Page
{
public HomePage()
{
InitializeComponent();
StudentsDAO s = new StudentsDAO();
StudentList.ItemsSource = s.GetAll();
}
// Executes when the user navigates to this page.
protected override void OnNavigatedTo(NavigationEventArgs e)
{
}
private void HyperlinkButton_Click(object sender, RoutedEventArgs e)
{
HyperlinkButton hb = sender as HyperlinkButton;
string nim = Convert.ToString(hb.Tag);
this.NavigationService.Navigate(new Uri(string.Format( "Student/{0}", nim), UriKind.Relative));
}
}
}
Setelah proses Build dan “View in Browser” dapat kita lihat hasil seperti berikut ini :
Selanjutnya akan dibuat fungsi yang memungkinkan user untuk mengklik NIM dan melihat detail data berdasarkan NIM yang dipilih. Detail dari data Student ini akan ditampilkan dalam suatu Page baru.
Berikut adalah langkah untuk membuat Page baru : Klik kanan pada folder Views yang terdapat pada project Silverlight dan pilih Add New Item, pada jendela Add New Item pilih Silverlight Page dan berikan nama StudentDetail.xaml :
Dan berikut baris kode pada file StudentDetail.xaml :
<navigation:Page x:Class="SilverlightNavSEO.Views.StudentDetail"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
Title="StudentDetail Page">
<Grid x:Name="LayoutRoot" Background="White">
<StackPanel x:Name="StudentDetail" Orientation="Vertical">
<TextBlock x:Name="NIM" Text="{Binding NIM}"/>
<TextBlock x:Name="Name" Text="{Binding Name}"/>
<TextBlock x:Name="Address" Text="{Binding Address}"/>
</StackPanel>
</Grid>
</navigation:Page>
Kode file StudentDetail.xaml.cs :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Navigation;
using SilverlightNavSEO.Models;
namespace SilverlightNavSEO
{
public partial class StudentDetail : Page
{
public StudentDetail()
{
InitializeComponent();
Loaded += new RoutedEventHandler(StudentDetail_Loaded);
}
void StudentDetail_Loaded(object sender, RoutedEventArgs e)
{
StudentsDAO studentDAO = new StudentsDAO();
Student student = studentDAO.Get(Convert.ToString(this.NavigationContext.QueryString["nim"]));
this.DataContext = student;
}
// Executes when the user navigates to this page.
protected override void OnNavigatedTo(NavigationEventArgs e)
{
}
}
}
Medaftarkan Page StudenDetail.xaml pada App.xaml sehingga menjadi berikut :
<navigation:UriMapper x:Key="uriMapper">
<navigation:UriMapping Uri="Home" MappedUri="/Views/HomePage.xaml" />
<navigation:UriMapping Uri="About" MappedUri="/Views/AboutPage.xaml" />
<navigation:UriMapping Uri="Student/{nim}" MappedUri="/Views/StudentDetail.xaml?nim={nim}" />
</navigation:UriMapper>
Dari konfigurasi URL di atas maka kita dapat
URL di atas lebih manusiawi dan ‘mudah’ untuk diingat oleh user. Selain itu dengan URL seperti itu juga akan sangat bermafaat untuk SEO. Semoga bermanfaat.
{Catatan}
Pada file StudentDetail.xaml.cs kita temui baris kode berikut :
void StudentDetail_Loaded(object sender, RoutedEventArgs e)
{
StudentsDAO studentDAO = new StudentsDAO();
Student student = studentDAO.Get(Convert.ToString(this.NavigationContext.QueryString["nim"]));
this.DataContext = student;
}
Method StudentDetail_Loaded di daftarkan pada constructor class StudentDetail dengan maksud untuk mendaftarkan method ini sebagai method yg dipanggil oleh event Loaded.
Tetapi bagi yang tidak ingin mendaftarkan pada event Loaded, maka ketiga baris dari isi method StudentDetail_Loader ini dapat diletakan pada method OnNavigatedTo seperti dibawah ini :
// Executes when the user navigates to this page.
protected override void OnNavigatedTo(NavigationEventArgs e)
{
StudentsDAO studentDAO = new StudentsDAO();
Student student = studentDAO.Get(Convert.ToString(this.NavigationContext.QueryString["nim"]));
this.DataContext = student;
}
Selamat mencoba dan silakan unduh source program di atas dengan menusukkan mouse anda ke url di bawah ini :)
Welcome to the Microsoft Web Platform Installer 2.0 Beta.
Kalimat tersebut merupakan kalimat yang akan ditemui pada bagian atas dari jendela Microsoft Web Platform Installer 2.0 Beta yang bisa diunduh di http://www.microsoft.com/web/downloads/platform.aspx.
Apa saja yang ditawarkan oleh barang ini :
Atau untuk lebih jelasnya silakan download : ini. Jalankan dan beberapa saat kemudian dapat dilihat jendela berikut :
Seperti yang dilihat pada gambar, dengan satu installer berukuran 1MB, maka kita akan menikmati beberapa barang-barang terkenal di dunia maya, seperti :
- BlogEngine.NET.
- DasBlog.
- SubText.
- WordPress : the best blog engine :)
Atau engine CMS seperti :
- Drupal.
- DNN.
- SilverStrive CMS.
- Umbraco.
Tentu saja setelah itu dibutuhkan kesabaran, karena adan ada proses download dan installasi apa yang telah kita pilih tersebut. Dan tentu saja perlu hal-hal lain yg bersesuai dengan barang-barang yang telah dipilih. Sebagai contoh, ketika memilih WordPress maka diperlukan database MySQL untuk media penyimpanan.
Selamat Nge-WEB!!!
Dua tool ini merupakan 2 tool ada lucu, lucu karena ukurannya yang besar.
Weew…aplikasi yang besar, artinya akan penuh feature-feature baru dibanding versi (Blend) sebelumnya yang tidak sampai 50MB. Tapi setelah proses instalasi dan sampai dibagian ini :
Maka dapat dilihat ‘Space Required’ hanya 75MB. Sisanya ? Ternyata didalam pake installer tersebut ditemui file sebesar 237MB, yaitu .NET Framework 3.5 SP1. hm hm…sabar sabar sabar. Ah sudah lah…lupakan apa yang sudah terlihat di atas.
Sebagai web designer atau web developer, maka antarmuka yang dibuat harus dapat dilihat dengan baik dan benar pada beberapa browser-browser benar, sebut saja seperti :
- Firefox.
- Internet Explorer.
- Safari.
- Opera.
Firefox, Safari atau Opera sepertinya tidak terlalu bermasalah. Yang jadi masalah adalah Internet Explorer, karena seperti diketahui ada 3 versi Internet Explorer yang hidup saat ini yaitu :
Yang sering membuat pusing adalah IE6 yang unik dan mempunyai karakteristik yang berbeda dibanding adik-adiknya. IE6 sering bermasalah dengan margin & padding pada CSS. Sampai-sampai seorang teman sering berucap :
“Kapan IE6 punah ?”
Pengguna IE6 sampai saat ini dapat dikatakan banyak, oleh karena itu tidak dapat begitu saja mereka tidak diperdulikan. Yang jadi masalah adalah pada satu komputer tidak dapat diinstall IE dengan beda versi. Oleh karena itu sering kali setelah sebuah halaman web berhasil dibuat dan di cek pada Firefox dan IE7/IE8…mesti berusah lagi untuk mencari teman yang masih menggunakan IE6 atau apabila halaman-halaman web sudah ditempatkan disalah satu hosting maka dapat digunakan bantuan dari http://browsershots.org/ untuk memeriksanya.
Nah, sekarang ada tool baru yang merupakan bagian dari Expression Web, yaitu Super Preview for Internet Explorer. Tool ini memungkinkan untuk memeriksa suatu halaman web dengan beberapa browser, termasuk IE6.
.png)
Tidak perlu lagi untuk berlari-lari mencari teman yang menggunakan IE6, cukup install Super Preview dan bersiap untuk melihat keanehan pada mode IE6 :)
Note :
“Kapan IE6 punah?”
{Sekali-sekali posting ngga penting di blog ini}
Begini jadinya kalau para developer, IT Pro dan trainer hidup di bandung…Kerjanya santai, duduk di tempat makan, ngobrol-ngobrol…kemudian dilanjutkan ngobrol serius.
Ada bos hosting (eRUDeYe), ada bos Efindo, ada bos-bos MCT dan bos-bos lainnya yang lagi santai.
Memang bos-bos yang SUPER!!
Turfmonster adalah portal olahraga di luar Indonesia (entah di US entah dimana, jarang tanya-tanya kalau dapat kerjaan Community Server) yang awalnya tidak menggunakan Community Server, dan di pertengahan 2008 mereka memutuskan untuk menggunakan Community Server 2008.
Awalnya pekerjaan ini hanya berupa pembuatan Theme dengan tampilan yang agak unik, sehingga mesti melakukan pengubahan kode pada source code Community Server agar mendapatkan hasil yang diinginkan oleh sang empunya Turfmonster, yang hasilnya bisa dilihat di http://www.turfmonster.com/. Seperti biasa, theme hanya dikerjakan dalam waktu singkat (seperti biasa).
Setelah selesai, project dilanjutkan dengan pembuatan modul tambahan, modul yang mempunyai fungsi mirip ASP.NET Classified. Teknologi yang digunakan pada modul ini adalah :
Nama modul ini disebut Classified, yang terdiri atas bagian yang dapat dilihat oleh user umum.
Dan bagian yang dapat dilihat oleh administrator.
Masa development modul ini diselesaikan sesuai jadwal sekitar 1 bulan.
Sampai akhirnya proses migrasi data dari portal yang lama ke Community Server 2008 yang dilakukan oleh sang empunya portal. Waktu yang diperlukan untuk ini terbilang lama, sampai akhirnya mesti upgrade beberapa theme dan modul yang kami buat sampai mencapai CS 2008.5 SP1 sekarang ini.
Tetapi akhirnya bulan ini Tuftmonster berhasil online juga……lega :)
More Posts
Next page »