Reyza

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

Public

November 2009 - Posts

jQuery UI - Interactions

Bagi web developer yang menggunakan ASP.NET, dan bekerja dengan ASP.NET Ajax mungkin juga mengenal Ajax Control Toolkit (ACT).  ACT digunakan di atas ASP.NET, artinya ACT tidak dapat hidup tanpa ASP.NET Ajax.  Pada ACT terdapat control-control yang interaktif seperti :

  1. Accordion.
  2. HTMLEditor.
  3. Tab.
  4. Slider.
  5. Dan lain-lain.

Seperti ACT, begitu pula jQuery UI.  jQuery UI harus digunakan di atas jQuery, karena jQuery UI merupakan library interaksi, efek dan widget-widget seperti control-control yang ada pada ACT.  Artinya pada jQuery UI akan dapat ditemui widget seperti :

  1. Tab.
  2. Accordion.
  3. Dialog.
  4. Datepicker.
  5. Progressbar.
  6. Dan lain-lain.

Paket library jQuery UI dapat diunduh di http://jqueryui.com.  Setelah mengunduh paket library tersebut dan mengekstraknya, maka akan didapati file-file berekstension JS yang dapat digunakan untuk membuat widget yang diinginkan atau memanfaatkan fitur interaksi dan efek.

Pada ebook yang dapat di-download di : http://geeks.netindonesia.net/files/folders/ebook/entry183363.aspx akan dibahas sedikit mengenai jQuery UI, khusus membahas fitur interaksi. Fitur interaksi jQuery UI ini terdiri atas :

  1. Draggable.
  2. Dropable.
  3. Resizeable.
  4. Selectable.
  5. Sortable.

Bahasan ini terdiri dari 28 halaman yang telah digabung ke dalam ebook ASP.NET & jQuery. Selanjutnya akan ditambahkan bahasan Widget dan Effect untuk menuntaskan bahasan Bab III, jQuery UI pada ebook ini.

Semoga bahasan jQuery UI – Interaksi ini bermanfaat sambil menikmati sate selama weekend ini.

Share this post: | | | |
Posted: Nov 28 2009, 03:22 PM by reyza | with no comments
Filed under: ,
Windows 7 & DSLR

Ada yang bilang Windows 7 cepet.

Ada yang bilang Windows 7 = Kelebihan Windows XP + Kelebihan Windows Vista.

Tapi yang pasti ada hal yang tidak ditemui pada Windows sebelumnya…yaitu kemampuan Windows 7 mengenali perangkat lain yang melekat pada dirinya. Sebagai contoh DSLR Nikon D5000, Windows 7 dapat dengan baik mengenali perangkat ini dari merk, tipe, sisa batere dari perangkat, space yang masih tersedia, gambar serta logo.

Selain itu Windows 7 mengelompokkan aplikasi-aplikasi yang dapat digunakan atau yang cocok dan berhubungan dengan perangkat ini.

d5000

Bukan hanya pengenalan perangkat saja, Windows 7 juga dapat berinteraksi dengan baik dengan perangkat ini. Windows 7 memberikan fasilitas Browse file untuk melihat secara langsung file-file yang berada di dalam media penyimpanan perangkat ini.  Windows 7 juga memberikan fasilitas Import pictures and videos untuk menyalin semua file media ke dalam komputer dengan mudah dan dapat pula memberikan tag sebelum proses import dilakukan.

So..tunggu apalagi segera upgrade sistem operasi anda ke Mac OS X Snow Leopard. Loh???

image

Share this post: | | | |
Posted: Nov 10 2009, 08:16 PM by reyza | with 5 comment(s)
Filed under:
ASP.NET 4.0 Web Form & URL Routing

Kesan pertama saat installasi adalah, kenceeeng…ngga sampai 3 putaran di meja Poker, proses installasi sudah kelar dilakukan. Eh ternyata setelah dicek baru kelar proses installasi .NET FX 4.0 Beta doang, setelah itu mesin melakukan restart dan proses installasi diteruskan.

image

Total space yang diperlukan bila dipilih opsi Full Install adalah 5,5 GB (kurang lebih), maka langkah paling paling cepat dan gampang untuk menguranginya adalah dengan menghilangkan centang pada checkbox Visual C++ dan space yang diperlukan akan segera turun sebesar 1,5GB.

image

Setelah proses intallasi selesai, maka terlebih dahulu langsung menjalakan VS2008. Loh? VS2008? Sekedar memastikan semua solusi dari semua project berjalan dengan aman, nyaman dan benar tanpa kurang suatu apapun. Hasilnya, aman…artinya memang benar VS2008 & VS2010 dapat saling berdampingan tanpa mengganggu.

Setelah menjalan VS2010 Ultimate, pertanya yang dilakukan adalah membuat Solution kemudian menambahkan 1 Web Project (ASP.NET Web Application) ke dalamnya, dan…

image

Secara otomatis VS2010 akan lebih memanjakan, lebih manja lagi dibandingkan yang dilakukan oleh VS2008. Karena seperti yang dilihat pada Solution Explorer di atas, telah dibuatkan MasterPage, script jQuery di dalam folder Script, css pada folder Styles, folder Account yang berisi halaman untuk untuk mengubah password, login dan register user. Serta telah dibuatkan konfigurasi membership, profile dan roleManager pada Web.config seperti berikut.

<membership>
<providers>
<clear/>
<add name="AspNetSqlMembershipProvider" type="System.Web.Security.SqlMembershipProvider" connectionStringName="ApplicationServices"
enablePasswordRetrieval="false" enablePasswordReset="true" requiresQuestionAndAnswer="false" requiresUniqueEmail="false"
maxInvalidPasswordAttempts="5" minRequiredPasswordLength="6" minRequiredNonalphanumericCharacters="0" passwordAttemptWindow="10"
applicationName="/" />
</providers>
</membership>

<profile>
<providers>
<clear/>
<add name="AspNetSqlProfileProvider" type="System.Web.Profile.SqlProfileProvider" connectionStringName="ApplicationServices" applicationName="/"/>
</providers>
</profile>

<roleManager enabled="false">
<providers>
<clear/>
<add name="AspNetSqlRoleProvider" type="System.Web.Security.SqlRoleProvider" connectionStringName="ApplicationServices" applicationName="/" />
<add name="AspNetWindowsTokenRoleProvider" type="System.Web.Security.WindowsTokenRoleProvider" applicationName="/" />
</providers>
</roleManager>

Dengan melakukan ‘View in Browser’ maka segera kita melihat antarmuka berikut ini.

image

Format seperti di atas tidak hanya akan diberikan oleh VS2010 bila menggunakan template project Web Application tetapi juga ketika digunakan template Web Site.

Web.config pada ASP.NET 4 ini juga terlihat lebih ramping dan singkat, seperti yang telah ditulis oleh Ahmad Masykur di sini.

{Web Form & URL Routing}

Hal baru lainnya adalah kemampuan Web Form menggunakan URL Routing yang lebih mudah seperti layaknya ASP.NET MVC.

Seperti halnya ASP.NET MVC, kita dapat ‘mendaftarkan’ mapping antara nama URL ‘bohongan’ dengan nama file fisik yang akan diakses oleh url tersebut.  Kita dapat menambahkan method seperti di bawah ini pada Global.asax.cs (pada Web Application).

   1: using System;
   2: using System.Collections.Generic;
   3: using System.Linq;
   4: using System.Web;
   5: using System.Web.Security;
   6: using System.Web.SessionState;
   7:  
   8: namespace WebApplication1
   9: {
  10:     public class Global : System.Web.HttpApplication
  11:     {
  12:         void RegisterRoutes(System.Web.Routing.RouteCollection routes)
  13:         {
  14:             routes.MapPageRoute("about", "AboutMe", "~/About.aspx");
  15:  
  16:         }
  17:  
  18:         void Application_Start(object sender, EventArgs e)
  19:         {
  20:             // Code that runs on application startup
  21:             RegisterRoutes(System.Web.Routing.RouteTable.Routes);
  22:         }
  23:     }
  24: }

Dapat dilihat pada baris 13, adalah cara untuk untuk mendaftarkan routing. Terdapat 3 parameter yang diisikan,

  • parameter pertama berisi nilai “about”, yang menjadi nama dari routing ini.
  • parameter kedua adalah URL ‘bohongan’ yang nanti akan dipanggil pada address bar untuk memanggil file About.aspx.
  • parameter ketiga adalah nama file fisik yang ingin di akses.

image

Kita juga dapat mengkonfigurasi agar routing ini dapat mengirimkan parameter. Dibawah ini contoh pengganti baris ke 14 apabila ingin dimasukkan parameter ke dalam URL ‘bohongan’.

   1: void RegisterRoutes(System.Web.Routing.RouteCollection routes)
   2: {
   3:     routes.MapPageRoute("about", "AboutMe/", "~/About.aspx");
   4:     routes.MapPageRoute("about-param", "AboutMe/{nilai}", "~/About.aspx");
   5: }

Dengan contoh di atas kita dapat menuliskan seperti cara pada gambar di atas, atau dengan cara pada gambar di bawah ini :

image

Untuk menangkap nilai dari parameter tersebut dapat menggunakan contoh di bawah ini.

About.aspx

<%@ Page Title="About Us" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="About.aspx.cs" Inherits="WebApplication1.About" %>


<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>
About
</h2>
<p>
Put content here.<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</p>
</asp:Content>

About.aspx.cs

   1: using System;
   2: using System.Collections.Generic;
   3: using System.Linq;
   4: using System.Web;
   5: using System.Web.UI;
   6: using System.Web.UI.WebControls;
   7:  
   8: namespace WebApplication1
   9: {
  10:     public partial class About : System.Web.UI.Page
  11:     {
  12:         protected void Page_Load(object sender, EventArgs e)
  13:         {
  14:             string nilai = Page.RouteData.Values["nilai"] as string;
  15:  
  16:             Label1.Text = nilai;
  17:         }
  18:     }
  19: }

Pada file About.aspx.cs, di baris 14 dapat dilihat cara untuk mengambil nilai parameter yang ditulis pada address bar.

image

Note :

Cara di atas dilakukan pada template project Web Application dan berhasil, tetapi bila cara di atas dilakukan pada Web Site…hmm…gagal.

Share this post: | | | |
Posted: Nov 10 2009, 10:27 AM by reyza | with 3 comment(s)
Filed under: ,
Graffiti, Play with Chalk

Chalk adalah widget pada Graffiti yang dapat digunakan sebagai wadah untuk menulis ‘apa-pun-juga’, termasuk dapat dituliskan juga kode-kode ‘NVelocity’ didalamnya. Untuk menambahkan widget Chalk ini maka cukup dengan mengakses Control Panel > Presentation > Widgets. Pilih Chalk Widget pada bagian Available Widget.

image

Drag Chalk Widget pada area yang diinginkan, dapat dipilih Left Sidebar atau Right Sidebar. Kemudian klik Edit.

image

Berikut contoh kode-kode NVelocity yang dapat dituliskan pada body Chalk.

#set($allCategories = $data.Categories())

<ul>
#foreach($category in $allCategories)
<li>
<a href="$category.Url">$category.Name</a>
#if($category.HasChildren)
<ul>
#foreach($cat in $category.Children)
<li style="padding-left:13px;"><a href="$cat.Url">$cat.Name ($cat.PostCount)</a></li>
#end
</ul>
#end
</li>
#end
</ul>

Kode di atas adalah contoh kode untuk menampilkan daftar Category beserta anak Category-nya (sebenarnya tujuan posting ini adalah untuk mencatat kode di atas agar tidak lupa).

Klik tombol Update dan hasilnya dapat dilihat pada halaman public seperti berikut ini.

image

Share this post: | | | |
Posted: Nov 03 2009, 11:51 PM by reyza | with no comments
Filed under: ,
Graffiti, installing..theming..enjoying

{Judulnya maksa}

{Installasi}

Kebetulan hari ini menginstall CMS Graffiti untuk keperluan pribadi. Graffiti dapat menggunakan beberapa tipe database yaitu Access, VistaDB, MySQL dan SQL Server, secara default database yang digunakan adalah VistaDB.

Bila kebetulan anda pengguna layanan hosting di Erudeye (promosi dulu ah), yang sudah support ASP.NET sampai versi 3.5 SP1 (walau untuk meninstall Graffiti tidak perlu versi tersebut) dan SQL Server 2008 sebagai database yang disediakan, maka tidak ada salahnya mengganti VistaDB dengan SQL Server.

Caranya sangat mudah, setelah DB dan User untuk mengakses DB dibuat maka buat schema dengan script Graffiti_SQL_Schema.sql dan setelah itu masukkan data user dengan mengeksekusi script Graffiti_SQL_Data.sql.

Modifikasi file Web.config untuk menyesuaikan connection string. Akses domain anda dan pastikan tampilan seperti ini anda dapatkan pada layar komputer.

image

Tetapi saya pastikan anda tidak akan melihat persis seperti gambar di atas, karena data masih kosong, jadi belum ada menu atau posting. Anda dapat memulai mengisi CMS ini dengan ‘menu’ dan posting dengan masuk ke halaman login (http://domain-anda/graffiti/graffiti-admin) dengan user admin dan password yang dapat anda lihat pada file Web.config (seperti yang dilihat pada gambar di bawah ini).

image

Anda dapat memulai mengisi posting dengan memilih menu Write.

image

Atau bermain-main dengan Site Option, mengubah-ubah tampilan dan widget pada menu Presentation, atau mengubah password admin pada menu User Management.

image

{Theme}

Membuat theme pada graffiti adalah hal yang sangat mudah. Anda cukup berjalan ke folder files/themes/, pada folder tersebut dapat dilihat terdapat 1 theme dengan nama default. copy dan paste folder kemudian rename dengan nama yang diinginkan. Tidak ada file *.config yang harus diubah, cukup ubah gambar preview.png dengan screenshot theme anda.

Setelah itu tinggal masuk ke Control Panel > Presentation > Themes, dan pilih theme yang baru saja dibuat.

image

Ingin mengubah tampilan theme? Tinggal pilih Personalize. Maka tampilan seperti berikut akan dapat ditemui.

image

Dapat dilihat file-file yang dapat diedit via Control Panel milih Graffiti ini.

image

De ja vu dengan tampilan seperti di atas ? Bagi penggemar Wordpress, mungkin tampilan di atas sudah tidak asing lagi.

Graffiti menggunakan NVelocity sebagai presentation layer, dapat dilihat pada file-file *.view di atas. 

  • layout.view adalah ‘master page’.
  • index.view adalah layout halaman utama (default.aspx kalau di dunia asp.net).
  • post.view adalah layout untuk semua halaman posting.

Graffiti mempunyai kemampuan untuk meng-override tampilan suatu halaman berdasarkan category dan posting yang diakses. Misalnya dibuat category blog (lihat nilai Link Name pada gambar di bawah ini) maka untuk mengubah tampilan cukup dengan membuat blog.view.  Untuk tampilan setiap posting pada category blog dapat dibuatkan file blog.post.view.

image

Selain berdasarkan category, dapat juga berdasarkan salah satu posting dengan cara buat nama file dengan extension view sesuai dengan Name seperti pada gambar di bawah ini. Pada gambar di bawah Name dari suatu posting adalah contact-us, maka dapat dilihat terdapat contact-us.view untuk meng-override tampilan dari posting tersebut.

image

Ubah-ubah sedikit, maka dalam waktu tidak terlalu lama anda akan mempunyai theme graffiti yang baru.

{Widget}

image

Graffiti cukup banyak menyediakan widget yang dapat langsung digunakan. Pada posting selanjutkan akan dicoba bagaimana membuat untaian2 kode untuk membuat widget sendiri, atau chalk atau bahkan plug-in sebagai extension pada Graffiti.

 

Sampai jumpa

Share this post: | | | |
Posted: Nov 02 2009, 11:47 PM by reyza | with 1 comment(s)
Filed under: ,