Reyza

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

Public

May 2009 - Posts

Adding Fields in Community Server’s Create & Edit User Form

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 :

_31-01

 

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.

_31-02

Salah satu permintaan yang biasa kami temui adalah penambahan field untuk menyimpan informasi tambahan untuk User, contohnya seperti pada form registrasi di bawah ini :

_31-03

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 :)

Share this post: | | | |
Posted: May 31 2009, 07:18 AM by reyza | with no comments
Filed under:
VS2010 & Silverlight, Look Ma..now, we can choose Silverlight version!

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…

multi-targeting

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.

Share this post: | | | |
Posted: May 23 2009, 05:32 AM by reyza | with 1 comment(s)
Filed under: