Karena akhir-akhir ini sering bermain dengan Graffiti CMS (yang sudah open source : http://graffiticms.codeplex.com/), maka tidak bisa dihindarkan untuk bermain dengan file ber-extension *.view. File ini hanya HTML ‘biasa’ yang menjadi layer viewer pada Graffiti CMS, memang file tersebut dapat dibuka oleh teks editor yang ada termasuk Visual Studio, akan tetapi mata akan melihat teks flat, tanpa warna dan tanpa intellisense seperti gambar di bawah ini.
Akan lebih baik bila file-file *.view dapat lebih hidup, berwarna dan ditemani oleh bantuan intellisense. Untuk mendapatkan itu semua cukup dengan memberikan sentuhan kepada Visual Studio agar mengenali extension *.view.
Caranya pilih Tool > Option pada menu, pilih bagian Text Editor > File Extension.
Sekarang tinggal daftarkan extension yang diinginkan, dalam kasus ini dipilih HTML Editor. Hasilnya…..
Note :
Posting ini hanya sebagai media catatan agar tidak lupa :)
Pada posting sebelumnya di sini, telah dicatat konfigurasi IIS7 sebagai rumah astoria pada Windows Vista atau Windows 7. Pada posting ini akan dicatat (agar tidak lupa) konfigurasi IIS7 pada Windows Server 2008 agar dapat digunakan sebagai rumah astoria.
Pertama, dengan memilih Control Panel > Programs > Turn Windows features on or off maka akan dibuka jendela Server Manager seperti gambar di bawah ini.
Kemudian pilih Add Features pada bagian Features Summary,
Selanjutnya akan dapat dilihat jendela seperti berikut ini.
Pada .NET Framework 3.0 Features (Installed) > WCF Activation cek pada bagian HTTP Activation. Kemudian klik Next. Maka dapat dilihat proses installasi seperti di bawah ini.
Setelah proses installasi berhasil, maka dapat dilihat terdapat tambahan item baru pada Handler Mappings yang ada pada IIS Manager.
IIS7 pada Windows Server 2008 siap digunakan.
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 :
- Accordion.
- HTMLEditor.
- Tab.
- Slider.
- 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 :
- Tab.
- Accordion.
- Dialog.
- Datepicker.
- Progressbar.
- 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 :
- Draggable.
- Dropable.
- Resizeable.
- Selectable.
- 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.
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.
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???
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.
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.
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…
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.
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.
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 :
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.
Note :
Cara di atas dilakukan pada template project Web Application dan berhasil, tetapi bila cara di atas dilakukan pada Web Site…hmm…gagal.
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.
Drag Chalk Widget pada area yang diinginkan, dapat dipilih Left Sidebar atau Right Sidebar. Kemudian klik Edit.
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.
{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.
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).
Anda dapat memulai mengisi posting dengan memilih menu Write.
Atau bermain-main dengan Site Option, mengubah-ubah tampilan dan widget pada menu Presentation, atau mengubah password admin pada menu User Management.
{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.
Ingin mengubah tampilan theme? Tinggal pilih Personalize. Maka tampilan seperti berikut akan dapat ditemui.
Dapat dilihat file-file yang dapat diedit via Control Panel milih Graffiti ini.
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.
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.
Ubah-ubah sedikit, maka dalam waktu tidak terlalu lama anda akan mempunyai theme graffiti yang baru.
{Widget}
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
Pada posting sebelumnya tentang Astoria di sini, saya menulis :
“Dari kasus di atas, kebetulan keluaran dari SP tersebut dapat diwakili oleh class model dari tabel Case. Bagamana kalau keluaran SP tidak dapat diwakili oleh tabel yang ada? Untuk jawabannya akan ditulis pada blog berikutnya, ketika saya bertemu dengan masalah tersebut :)”.
Pada posting ini akan dicatat cara menampung keluaran dari SP yang tidak terwakilkan oleh tabel (sebagai data class). Sebagai contoh dimiliki SP seperti berikut ini.
USE [MalaysiaIntegraDB]
GO
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
ALTER procedure [dbo].[GetStatisticJob]
AS
BEGIN
SELECT j.IDNName AS Type, Count(*) AS Value FROM Job j, WNI w
WHERE w.Negara='IDN' AND w.JobID=j.JobID
GROUP BY j.IDNName;
END
Selajutnya tinggal ‘menarik’ SP ini ke Method Pane pada area design dari LINQ to SQL. Pada SP di atas akan didapat hasil seperti berikut.
Untuk menampung nilai dari data tersebut maka pada area design pada LINQ to SQL dapat kita tambahkan sebuah Data Class dengan cara klik kanan pada area design tersebut, pilih Add dan kemudian pilih Class.
Pada Data Class tersebut tambahkan property-property dengan nama Type dan Value, seperti nama ‘field’ dari data yang dikeluarkan oleh SP di atas.
Perlu diperhatikan penggunaan tipe data dari masing-masing property yang telah dibuat.
Sebagai contoh, pada gambar di atas dapat dilihat property Value mempunyai type int(System.Int32).
Selanjutnya klik GetStatisticJob pada Method Pane, ubah nilai pada Return Type menjadi Statistic yang merupakan nama Data Class yang telah dibuat di atas.
Selanjutkan tinggal tambahkan file dari template ADO.NET Data Service dan ‘didalamnya’ bisa kita tambahkan method untuk mengakses method GetStatisticJob dengan cara seperti berikut.
[WebGet]
public IList<Statistic> GetStatisticJob()
{
DataClassesDataContext db = new DataClassesDataContext();
var query = db.GetStatisticJob();
IList<Statistic> statistic = query.ToList<Statistic>();
return statistic;
}
Kemudian kita bisa membuat web site baru untuk mencoba service ini. Berikut contoh cara menampilkan data service GetStatisticJob pada GridView.
// url service
string serverUrl = "http://localhost:1469/MSChart.Service/WebDataService.svc";
DataClassesDataContext ctx = new DataClassesDataContext(new Uri(serverUrl, UriKind.Absolute));
ctx.MergeOption = MergeOption.AppendOnly;
IEnumerable<Statistic> data = ctx.Execute<Statistic>(new Uri("GetStatisticJob", UriKind.Relative));
GridView1.DataSource = data;
GridView1.DataBind();
Dan dipastikan pesan error “Avoid “The closed type *** does not have a corresponding element settable property” error message” tidak akan ditemui.
Ah pasti bosen dengan acara tv yang diisi oleh reality show yang penuh dengan skenario.
Saat masih hangatnya acara kontes nyanyi ala AFI dan Indonensia Idol, sebagai sampingannya ada acara reality show mengenai rekaman kehidupan mereka disela-sela kompetisi. kemudian akhirnya diikuti acara-acara reality show yg makin tida bermutu...ada termehek2, ada relegi sampai take me out (... kok gw hapal nama acara2 tersebut ya??).
Apa tidak ada ide lain untuk membuat acara reality show yg bisa membangun semangat, yang bisa memberi inspirasi tanpa skenario, tanpa kebohongan dan tanpa dibuat2. Denger-denger (tm), nanti ada kerjasama antara pihak salah tv di Indonesia untuk meliput anak-anak Imagine Cup yang berjuang dikancah internasional. Kalau ini bisa jadi dibuat sebagai acara reality show, yang dapat memperlihatkan bagaimana anak-anak tersebut berjuang demi nama baik Indonesia...weeeew...alangkah menariknya. alangkah akan membuat penontonnya akan ikut terbakar melihat anak-anak muda berjuang...apalagi kalau sampai perjuangan mereka membuahkan hasil. api akan makin besar membakar para pemuda lain yang menontonnya.
Begitu juga para pejuang-pejuang muda lainnya, pejuang olimpiade fisika. mestinya ada stasiun tv yang mendampingi mereka berjuang, jadikan reality show, perlihatkan susahnya mereka berjuang, perlihatkan bagimana mereka memijit kepala yang pusing, perlihatkan tawa dan raut muka bangga mereka saat medali ada digenggaman tangan mereka.
Apa di Indonesia ini tidak ada produser waras yang mengangkat mereka untuk acara reality show yang bermutu?
*note : cuma lagi iseng menulis sesuatu yang tidak penting :)
Sebelumnya pernah bercerita tentang MS Chart di sana dan sini, sekarang mencoba lagi menggunakan MS Chart karena kebutuhan. Disini akan dicontohkan bagaimana menyuntik data ke control chart secara pemrograman.
Seperti biasa terlebih dahulu kita dapat menambahkan control MS Chart pada halaman ASPX.
<asp:Chart ID="Chart_Main" runat="server">
<Series>
<asp:Series Name="Series1">
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1">
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
Pada kontrol di atas dapat dilihat di dalam tag asp:Chart terdapat dua bagian (default) yaitu Series dan ChartAreas.
{ChartAreas}
Pada bagian ini kita dapat memberikan hal-hal untuk mempercantik tampilan chart agar sedap dipandang mata. Sebagai contoh di dalam bagian ini kita dapat memberikan ‘atribut’ seperti berikut.
<ChartAreas>
<asp:ChartArea Name="ChartArea1">
<Area3DStyle LightStyle="Realistic" Enable3D="true" IsClustered="true" />
</asp:ChartArea>
</ChartAreas>
Bisa dilihat pada contoh di atas, dengan menambahkan kode seperti pada baris ke-3 maka chat akan berbentuk 3D. Masih banyak hal-hal lain yang bisa ditambahkan pada bagian ChartAreas ini. Sebagai contoh yang lain pada bagian ini dapat ditambahkan atribut-atribut untuk memberikan style pada kedua axis pada chart seperti berikut ini.
<ChartAreas>
<asp:ChartArea Name="ChartArea1">
<Area3DStyle LightStyle="Realistic" Enable3D="true" IsClustered="true" />
<AxisY linecolor="64, 64, 64, 64" Title="Value" TitleFont="Verdana, 10pt, style=Bold">
<LabelStyle font="Verdana, 8.25pt, style=Bold" />
<MajorGrid linecolor="64, 64, 64, 64" />
</AxisY>
<AxisX linecolor="64, 64, 64, 64" Title="Occupation" TitleFont="Verdana, 10pt, style=Bold">
<LabelStyle font="Verdana, 8.25pt, style=Bold" />
<MajorGrid linecolor="64, 64, 64, 64" />
</AxisX>
</asp:ChartArea>
</ChartAreas>
{Series}
Bagian ini dapat dikatakan sebagai area tempat menampung atau menambahkan data, selain itu kita juga dapat menentukan bagaimana data akan ditampilkan.
<Series>
<asp:Series Name="Series1" ChartType="Column">
</asp:Series>
</Series>
Dapat dilihat pada contoh di atas data akan ditampilkan seperti nilai pada atribut ChartType. Untuk menambahkan data secara manual pada bagian Series dapat dilihat di
sini.
{Menyuntik Data pada Chart}
Berikut ini akan diberikan contoh untuk menyuntik data pada chart.
1: using System;
2:
3: public partial class Test_Default : System.Web.UI.Page
4: {
5: protected void Page_Load(object sender, EventArgs e)
6: {
7: Chart_Main_Databind();
8: }
9:
10: protected void Chart_Main_Databind()
11: {
12: string seriesName = "Pertama";
13: Random nilaiData = new Random();
14:
15: Chart_Main.Series.Clear();
16: Chart_Main.Series.Add(seriesName);
17:
18: for (int i = 1; i <= 5; i++)
19: {
20: string namaData = "Data " + i.ToString();
21:
22: Chart_Main.Series[seriesName].Points.AddXY(namaData, nilaiData.Next(100));
23: }
24: }
25: }
Dan hasilnya dapat dilihat pada gambar berikut ini.
Pada contoh di atas, kita dapat memperhatikan baris ke 16, dimana sebelum data diberikan terlebih dahulu adalah menambahkan ‘Series’ yang dapat dikatakan sebagai group dari data. Setelah itu pada baris ke 22 dapat dilihat bagaimana datamulai disuntikkan. Dan dapat dilihat hasilnya seperti pada gambar. pada axis X berisi nilai Data 1, Data 2 … Data 5. Sedangkan pada axis Y dapat dilihat nilai-nilai dari bilangan random.
Dari contoh di atas, diharapkan kita mempunyai bayangan apabila ingin memasukkan data dari database dengan cara yang sedikit membuat peluh keluar (pada posting berikutnya akan diperlihatkan cara menyuntik data dari datatable atau yang lainnya).
Contoh berikutnya adalah apabila terdapat lebih dari satu Series.
1: using System;
2:
3: public partial class Test_Default : System.Web.UI.Page
4: {
5: protected void Page_Load(object sender, EventArgs e)
6: {
7: Chart_Main_Databind();
8: }
9:
10: protected void Chart_Main_Databind()
11: {
12: Random nilaiData = new Random();
13:
14: Chart_Main.Series.Clear();
15:
16:
17: for (int i = 1; i <= 3; i++)
18: {
19: string seriesName = "Seri " + i.ToString();
20: Chart_Main.Series.Add(seriesName);
21:
22: for (int j = 1; j <= 5; j++)
23: {
24: string namaData = "Data " + j.ToString();
25:
26: Chart_Main.Series[seriesName].Points.AddXY(namaData, nilaiData.Next(100));
27: }
28: }
29: }
30: }
Dan hasilnya dapat dilihat seperti gambar berikut ini :
Pada contoh di atas dapat dilihat terdapat dua loop, loop untuk membuat Series kemudian di dalam loop tersebut terdapat loop untuk mengisikan data pada Series. Sehingga dapat kita lihat hasilnya seperti pada gambar di atas. Series pertama berwarna biru, series kedua berwarna orange sedangkan series terakhir berwarna merah.
{Legend}
Pada gambar di atas mungkin orang lain kesulitan untuk mengetahui arti dari setiap warna. Kita dapat memberikan keterangan dari setiap warna tersebut dengan menambahkan Legend sebagai keterangan. Untuk menambahkan Legend cukup dengan menambahkan bagian Legend seperti pada contoh berikut.
<asp:Chart ID="Chart_Main" Width="500" runat="server">
. . .
<Legends>
<asp:Legend Name="Legend1"></asp:Legend>
</Legends>
</asp:Chart>
Dan hasilnya akan dilihat pada gambar di bawah ini.
Sekian sekilas tentang MS Chart, saatnya untuk terlelap.
Ditulis supaya ingat dan mudah mencari bila nanti diperlukan.
Website berisi gambar-gambar indicator yang dapat digunakan di dalam control UpdateProgress.
http://mentalized.net/activity-indicators/
Kembali mencoba mencatat apa yang telah terjadi selama bersama Astoria.
Bagi developer yang menggunakan stored procedure pada LINQ to SQL dan selanjutnya akan menggunakan data context sebagai ‘sumber’ yang nanti ‘akan digunakan’ oleh Astoria maka kemungkinan akan bertemu dengan pesan kesalahan di atas.
{Mengeluarkan pesan error}
Pada bagian ini akan disebutkan langkah-langkah untuk membuat pesan error di atas keluar dan mencoba mencari tahu kenapa pesan error itu keluar.
Pertama, buat file DBML kemudian tambahkan stored procedure yang ingin digunakan, seperti yang terlihat di gambar di bawah ini.
Apa yang terjadi saat SP tersebut ditambahkan pada diagram DBML?
Seperti dilihat digambar, secara otomatis akan dibuatkan class yang akan menampung hasil dari SP tersebut. Field-field dari class tersebut adalah sesuai dengan field-field dari hasil keluaran SP.
Selanjutnya adalah menggunakan data context ini untuk digunakan oleh Astoria (ADO.NET Data Service), sekaligus menambahkan satu method untuk menampilkan hasil dari SP yang telah dibuat. Berikut adalah contoh dari kode pada Astoria.
1: using System;
2: using System.Data.Services;
3: using System.Collections.Generic;
4: using System.Linq;
5: using System.ServiceModel.Web;
6:
7: [System.ServiceModel.ServiceBehavior(IncludeExceptionDetailInFaults = true)]
8: public class KonsulDataService : DataService< KonsulDataClassesDataContext >
9: {
10: // This method is called only once to initialize service-wide policies.
11: public static void InitializeService(IDataServiceConfiguration config)
12: {
13: // TODO: set rules to indicate which entity sets and service operations are visible, updatable, etc.
14: // Examples:
15: config.SetEntitySetAccessRule("*", EntitySetRights.AllRead);
16: config.SetServiceOperationAccessRule("*", ServiceOperationRights.All);
17: config.UseVerboseErrors = true;
18: }
19:
20: [WebGet]
21: public IList<GetCasesByWNIIDResult> GetCasesByWNIID(string id)
22: {
23: long wniId = Convert.ToInt64(id);
24: KonsulDataClassesDataContext db = new KonsulDataClassesDataContext();
25: var query = db.GetCasesByWNIID(wniId);
26: IList<GetCasesByWNIIDResult> caseList = query.ToList<GetCasesByWNIIDResult>();
27:
28: return caseList;
29: }
30: }
Dari baris ke 20 dapat dilihat terdapat satu method baru untuk menjalankan SP dan ‘menyimpan’ hasilnya pada suatu List. Dengan memanggil url seperti (contoh) berikut ini pada address bar web browser maka akan ditampilkan data dari output SP tersebut seperti berikut ini.
1: <?xml version="1.0" encoding="utf-8" standalone="yes" ?>
2: - <GetCasesByWNIID xmlns="http://schemas.microsoft.com/ado/2007/08/dataservices">
3: - <element p2:type="GetCasesByWNIIDResult" xmlns:p2="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata">
4: <CasesID>SL5G080807170001</CasesID>
5: <CasesTypeID>BIRTH</CasesTypeID>
6: <ShortDescription>Aplikasi Akta/Keterangan Kelahiran</ShortDescription>
7: <LocationID p2:type="Edm.Int16">1</LocationID>
8: <CaseDate p2:type="Edm.DateTime">2008-08-07T17:26:39.03</CaseDate>
9: <WNICases p2:type="Edm.Int64">1</WNICases>
10: </element>
11: - <element p2:type="GetCasesByWNIIDResult" xmlns:p2="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata">
12: <CasesID xml:space="preserve">SL5G80730230002</CasesID>
13: <CasesTypeID>BIRTH</CasesTypeID>
14: <ShortDescription>Aplikasi Akta/Keterangan Kelahiran</ShortDescription>
15: <LocationID p2:type="Edm.Int16">1</LocationID>
16: <CaseDate p2:type="Edm.DateTime">2008-07-30T23:15:00.2</CaseDate>
17: <WNICases p2:type="Edm.Int64">1</WNICases>
18: </element>
19: </GetCasesByWNIID>
Dari data di atas, dapat terlihat terdapat dua item data (lebih dari satu). Maka secara logika, seharusnya saya dapat menampilkan data tersebut ke dalam suatu server control seperti GridView.
Untuk mensimulasikan proses menampilkan data dari Astoria pada GridView, dibuatlah solution dengan struktur project seperti pada gambar di bawah ini.
Avoid.Web berisi service dari Astoria. Sedangkan AvoidShowData.Web akan memiliki 1 halaman ASPX yang akan menampilkan data pada GridView. Tetapi terlebih dahulu akan ditambahkan service reference pada AvoidShowData.Web yang sumber servicenya adalah dari Avoid.Web (seperti yang terlihat pada gambar di bawah ini).
Dan hasilnya dapat dilihat pada gambar berikut ini.
Selanjutnya, setelah menambahkan control GridView pada file ASPX yang ada pada AvoidShowData.Web. Kemudian dapat ditambahkan beberapa baris kode untuk melakukan ‘koneksi’ ke Astoria, melakukan query untuk mengambil data dan mem-bind data tersebut ke GridView. Dan berikut adalah contoh isi dari file 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: using System.Data.Services.Client;
9:
10: using KonsulService;
11: using KonsulService.Konsul.Service;
12:
13: public partial class _Default : System.Web.UI.Page
14: {
15: protected void Page_Load(object sender, EventArgs e)
16: {
17: string serverUrl = "http://localhost:1479/Avoid.Web/KonsulDataService.svc";
18: string id = "1";
19: KonsulDataClassesDataContext ctx = new KonsulDataClassesDataContext(new Uri(serverUrl, UriKind.Absolute));
20: ctx.MergeOption = MergeOption.AppendOnly;
21:
22: List<GetCasesByWNIIDResult> data = ctx.Execute<GetCasesByWNIIDResult>(new Uri("GetCasesByWNIID?id='" + id + "'", UriKind.Relative)).ToList();
23:
24: GridView1.DataSource = data;
25: GridView1.DataBind();
26: }
27: }
Dapat dilihat pada baris ke 22, hasil dari ‘query’ akan disimpan ke dalam data bertipe List. Dan secara logika tipe data ini dapat digunakan sebagai sumber data GridView. Dan berikut dapat kita lihat hasil halaman ASPX setelah di view di browser.
Akhirnya “error yang diharapkan” keluar juga.
{Sebab keluarnya pesan kesalahan}
Dari contoh di atas, dapat dipastikan bahwa yang membuat pesan error ini keluar adalah penggunaan class GetCasesByWNIIDResult yang ada pada gambar kedua (di atas). Dari beberapa sumber hasil pencarian dengan ‘mesin pencarian terpercaya’ menyatakan bahwa class ‘auto generated’ pada film DBML ini mempunyai sifat yang hanya ‘sekali pakai’, dan tidak cocok digunakan sebagai ‘penampung’ data yang terdiri atas lebih dari satu record.
Apabila SP hanya mengeluarkan pasti 1 record saja, maka class di atas dapat digunakan.
** Sebab-sebab lain kenapa class ini tidak bisa menampung lebih dari 1 record masih dalam pencarian. Bila ada yang punya pengalaman dengan ini maka dapat menitipkan pesan pada kolom komentar di bawah ini.
{Solusi awal}
Karena adanya masalah tersebut di atas, ada satu solusi yang saya gunakan. Solusi ini bertujuan untuk mengindari penggunaan class ‘auto-generated’ tersebut di atas dan menggantikannya dengan class dari model tabel yang ada di database.
Sebelumnya kita lirik dulu isi dari SP GetCasesByWNIID di bawah ini.
ALTER procedure [dbo].[GetCasesByWNIID] @WNIID bigint
AS
BEGIN
SELECT
a.CasesID,
a.CasesTypeID,
a.ShortDescription,
a.LocationID,
a.CaseDate,
a.WNICases
FROM
Cases a
WHERE
a.WNICases=@WNIID
ORDER BY a.CaseDate DESC
END
Terlihat bawah SP ini menggunakan tabel Cases dan menampilkan field-field dari sebagian tabel tersebut. Maka oleh dari itu dapat ditambahkan tabel Cases ke dalam diagram DBML yang sudah ada. Seperti pada gambar di bawah ini.
Kemudian klik method representasi dari SP, dan pada area properties, di kolom Return Type dari Auto-generated type menjadi Case (model dari tabel yang baru saja ditambahkan).
Langkah selanjutkany mengubah seluruh penggunaan class GetCasesByWNIIDResult menjadi Case. Dan akhirnya ‘hasil query’ dari service Astoria dapat di-bind ke control GridView.
{Pertanyaan}
Dari kasus di atas, kebetulan keluaran dari SP tersebut dapat diwakili oleh class model dari tabel Case. Bagamana kalau keluaran SP tidak dapat diwakili oleh tabel yang ada? Untuk jawabannya akan ditulis pada blog berikutnya, ketika saya bertemu dengan masalah tersebut :)
Memang lebih enak memanggil Astoria dibandingkan ADO.NET Data Service, nama Astoria terdengar lebih sexy :)
Dalam beberapa bulan ini kebetulan sedang bekerja secara intens dengan Astoria. Karena kebanyakan hal yang dilakukan adalah hasil proses try-n-error (bukan hasil penelurusan dokumentasi dan konsep terlebih dahulu). Selama bekerja dengan Astoria ada beberapa yang menjadi catatan.
{Tipe Data pada Astoria}
Bila dimiliki tabel dengan field-field seperti berikut ini.
Maka apabila menggunakan LINQ to SQL, kita akan mendapati diagram seperti berikut.
Dari diagram di atas maka dapat dilihat bahwa:
- tipe data dari property Sex adalah char.
- tipe data dari property BirthHour adalah TimeSpan.
Apabila Astoria menggunakan class LINQ to SQL ini maka sudah dapat dipastikan ada di dapat error seperti berikut ini.
Hal ini disebabkan Astoria tidak men-support kedua tipe data tersebut. Apabila tetap ingin menggunakan class LINQ to SQL ini maka kedua property tersebut mesti diubah tipe datanya, yaitu :
- Mengubah tipe data char menjadi string.
- Mengubah tipe data TimeSpan menjadi DateTime.
Bila melirik ADO.NET Entity Data Model yang bisa dibilang sangat cocok bersanding dengan Astoria, maka dapat kita lihat bahwa tipe data yang cocok digunakan pada Astoria adalah sebagai berikut.
Mungkin ini adalah :
Mungkin ini sudah sering dilihat…tapi cuek saja, tetap di posting sebagai monumen bagi orang-orang yang berkutat di bidang software development.
Pada posting sebelumnya, saya terhenti saat ingin mengeksekusi function (hasil dari import stored procedure) yang mengembalikan nilai non-entity. Sepertinya harus membaca lebih banyak lagi tentang EDM dan Astoria. Bagi yang punya banyak pengalaman dengan EDM dan Astoria, silakan tinggalkan pencerahan pada komentar, untuk menunjukkan saya ke arah yang benar :)
Tapi kebutuhan akan perlukan mengeksekusi stored procedure yang sudah tersedia di database tetap harus diselesaikan. Oleh karena itu saya coba menggantikan EDMX dengan DBML milik LINQ to SQL.
Langkah sampai dapat memanggil stored procedure via web browser bisa dibilang singkat. Setelah sebuah file DBML dibuat, dari Server Explorer, misal digunakan databae Northwind, browse bagian Stored Procedure dan pilih salah satu (atau semua) stored procedure yang ada kemudian drag-n-drop ke area Method Pane, seperti yang dilihat pada gambar.
Dan pada kode item ADO.NET Data Server (misal WebDataService.cs) dapat dibuat seperti berikut ini.
1: using System;
2: using System.Data.Services;
3: using System.Collections.Generic;
4: using System.Linq;
5: using System.ServiceModel.Web;
6: using System.Collections;
7:
8: [System.ServiceModel.ServiceBehavior(IncludeExceptionDetailInFaults = true)]
9: public class WebDataService : DataService< DataClassesDataContext >
10: {
11: // This method is called only once to initialize service-wide policies.
12: public static void InitializeService(IDataServiceConfiguration config)
13: {
14: // TODO: set rules to indicate which entity sets and service operations are visible, updatable, etc.
15: // Examples:
16: config.SetEntitySetAccessRule("*", EntitySetRights.AllRead);
17: config.SetServiceOperationAccessRule("*", ServiceOperationRights.All);
18: config.UseVerboseErrors = true;
19: }
20:
21: [WebGet]
22: public List<Ten_Most_Expensive_ProductsResult> GetTopProducts()
23: {
24: DataClassesDataContext db = new DataClassesDataContext();
25: var query = db.Ten_Most_Expensive_Products();
26: return query.ToList();
27: }
28: }
Pada baris ke-22 dapat dilihat bagaimana method untuk menjalankan stored procedure yang ‘sudah menjadi’ method pada DBML. Dapat dilihat terdapat ‘tipe data’ baru dengan nama Ten_Monst_Expensive_ProductResult. Selanjutkan kita dapat memanggil method Ten_Most_Expensive_Products setelah sebuah instan dari data context dibuat. Setelah itu tinggal panggil ‘url’ seperti berikut ini pada web browser.
Contoh yang lain, kita bisa memanggil stored procedure CustOrderHist dengan parameter CustomerID sebagai input. Setelah stored procedure di drag ke Method Pane, sekarang tinggal ditambahkan method seperti berikut ini.
[WebGet]
public List<CustOrderHistResult> CustOrderHist(string customerID)
{
DataClassesDataContext db = new DataClassesDataContext();
var query = db.CustOrderHist(customerID);
return query.ToList();
}
Maka kita dapat memanggil method ini dengan cara berikut.
Posting selanjutnya akan didokumentasikan bagaimana mengkonsumsi ADO.NET Data Service dengan beberapa cara.
More Posts
Next page »