ASP.NET dan Waktu Solat Malaysia

 

Secara logiknya, mungkin saya tidak perlu menerangkan apakah itu waktu solat? Jadi, saya teruskan kepada focus untuk memaparkan waktu solat lokasi di Malaysia yang dicapai dari laman web JAKIM pada aplikasi web ASP.NET.

Why state the obvious, eh?

Saya akan menggunakan terus data yang dicapai dari laman web JAKIM. Jadi, berbeza dengan melakukan perkiraan melalui titik koordinat, kebanyakan dari kita mungkin lebih selesa menggunakan data yang sedia ada dari JAKIM, melalui format XML. Orang kata lebih yakin, kan?

Apakah itu XML?

XML bukan sejenis makanan tapi ia merupakan format bahasa; Extensible Markup Language merupakan bahasa yang digunakan bagi membolehkan transaksi data diantara dua aplikasi berbeza – supaya kedua-dua aplikasi tersebut faham petukaran data. Walaupun dengan kewujudan beberapa cara lagi seperti JSON, XML merupakan antara yang agak terkenal dan mudah digunakan.

XML kebiasaannya mempunyai tag dan elemen yang mewakili nilai data. Kebiasaanya, kita menggunakan XML dalam suapan RSS.

Mungkin anda boleh analogikan XML seperti Bahasa Melayu, yang menjadi lingua franca dalam zaman kesultanan Melayu Melaka. Orang Melayu cakap Melayu, para pedagang pun cakap Melayu. Dua-dua pihak faham dan komunikasi berjaya.

Anda boleh baca lebih banyak mengenai XML di Wikipedia.

Mendapatkan XML Waktu Solat

Untuk mendapatkan XML Waktu Solat Malaysia, anda boleh ke laman web ini. Seterusnya, pada bahagian Takwim Solat, pilih lokasi atau zon. Untuk artikel ini, gunakan zon Kuala Lumpur.

Klik pada ruangan XML untuk mendapatkan kod XML. Sekarang, anda akan melihat Kod XML. Salin URL ke dalam Notepad untuk kita gunakan nanti. Sebagai contoh, URL untuk kod XML Waktu Solat Kuala Lumpur ialah http://www2.e-solat.gov.my/xml/today/?zon=SGR03 dimana parameter SGR03 mewakili kod kawasan.

Anda boleh melihat senarai kod kawasan dari laman web tadi.

Implementasi ASP.NET

Dalam artikel ini, saya menggunakan Visual Studio 2012 Professional, tapi berdasarkan pengalaman, komponen yang digunakan telah wujud sejak versi 2005 lagi.

Terdapat 3 peringkat dalam proses ini iaitu mencipta fail ASP.NET Web Form, Menghubungkan XML Data Source dan Memaparkan Data.

Mencipta ASP.NET Web Form

Paling asas, mulakan dengan cipta satu web form baru, dan simpan sebagai Default.aspx. Sekarang anda akan melihat paparan Source dimana ia memaparkan kod ASP.NET dan juga HTML. Salah satu kelebihan Visual Studio ialah kita boleh menjimatkan masa dengan fungsi drag and drop untuk komponen asas.

Mencipta dan Menghubungkan XML Data Source

Pilih XML Data Source dari toolbox, dan letak diantara dalam ruangan tag. Pada tetingkap Propeties anda perlu memasukkan beberapa data seperti sumber XML dan juga XPath untuk membolehkan ASP.NET membaca fail XML Waktu Solat dengan betul.

Pada ruangan DataFile : nyatakan URL kod yang telah disalin kedalam Notepad manakala XPath, anda perlu melihat struktur file XML tersebut atau menggunakan XPath Generator. Untuk struktur XML Waktu Solat ini, nyatakan XPath sebagai  rss/channel/item. Anda sepatutnya mendapat paparan dibawah dalam ruangan Properties.

Sekarang, anda telah Berjaya menghubungkan ASP.NET dan fail XML Waktu Solat JAKIM. Seterusnya, cara-cara untuk memaparkan fail data dari XML tersebut.

Memaparkan Waktu Solat

Memaparkan data dari XML agak mudah sebenarnya kerana ianya memerlukan kod asas HTML dan juga ASP.NET. Terdapat dua komponen yang anda boleh pilih sebagai cara untuk memaparkan data iaitu:

Repeater

Anda membuat jadual dan lajur untuk memaparkan data. Kelebihan ialah anda boleh konfigurasi jadual (atau apa jua tag HTML) mengikut kesesuaian laman web anda seperti meletakkan table header dan footer.

Grid View

Grid View merupakan jadual yang disediakan oleh komponen dan ianya sedikit sukar sekiranya anda ingin melakukan sebarang pengubahsuaian. Tapi lebih mudah dan cepat.

Untuk artikel ini, saya akan menggunakan Grid View kerana lebih mudah dan cepat untuk disiapkan. Saya juga tidak perlukan sebarang ubahsuai CSS jadi boleh menggunakan rekabentuk lalai yang tersedia dalam ASP.NET Data Grid.

Sekarang, drag-and-drop komponen Grid View dari Toolbox dan seterusnya pada ruangan Propeties, pilih XMLDataSource1 (atau apa juga nama data source yang anda buat tadi). Sekarang, diantara kod <asp:GridView></asp:GridView>, letakkan kod dibawah:

<Columns>
<asp:TemplateField HeaderText="Waktu">
<ItemTemplate>
<%#XPath("title")%></a>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Masa">
<ItemTemplate>
<%#XPath("description")%></a>
</ItemTemplate>
</asp:TemplateField>
</Columns>

Okay, sekarang saya akan menerangkan kod yang disalin ini. Dalam Grid View, anda boleh menambah beberapa jenis ruangan (field). Untuk Waktu Solat, anda boleh menggunakan <TemplateField> untuk menambah ruangan yang mana data dari XML akan dipaparkan secara dinamik.

Fail XML mempunyai beberapa tag elemen yang mana mengikut data masing-masing. Untuk kod seperti <%#XPath(“”)%> ia membolehkan anda memaparkan elemen untuk tag elemen yang dipilih. Dalam artikel ini, title dan description dipilih untuk mendapatkan waktu solat.

Baiklah, sekarang jika anda telah salin kod diatas, tekan F5 untuk menguji aplikasi, sekiranya anda mengikut kod yang diletakkan, paparan dibawah akan keluar pada pelayar web anda.

Selain dari menggunakan format biasa untuk Grid View tersebut, anda juga boleh memilih untuk menggunakan beberapa format paparan mengikut warna dan tema pilihan anda.

Sebagai contoh, dibawah adalah paparan sekiranya anda menggunakan tema format Professional dan meletakkan teks sebelum Grid View.

Baiklah, anda telah pun Berjaya menghubungkan dan memaparkan waktu solat mengikut zon statik Kuala Lumpur. Ini bermakna setiap kali aplikasi web anda dijalankan, pelayan akan mendapatkan XML Waktu Solat dari laman web JAKIM untuk dipaparkan dalam aplikasi web.

Tambahan Lain

Apa yang saya tunjukkan dalam artikel ini adalah asas sahaja khususnya mendapatkan data dalam format XML dan XPath untuk dipaparkan dalam ASP.NET. Terdapat beberapa perkara anda boleh lakukan untuk menambah baik antaranya:

  1. Menyediakan pilihan lokasi berdasarkan senarai Drop Down dan AutoPostBack untuk setiap Bandar-Bandar di Malaysia. Anda boleh menyediakan pilihan kepada mengguna untuk memilih kawasan (sebagai contoh: Jitra, Kedah) dan sistem akan memaparkan semula waktu solat untuk kawasan tersebut. Komponen yang terlibat adalah DropDownList, ScriptManager dan juga UpdatePanel.
  2. Menerangkan (highlight) Waktu Solat mengikut waktu sebenar. Sebagai contoh, jika aplikasi web dijalankan pada waktu antara 1.26 tengah hari hingga 4.48 petang, waktu Zohor akan dihighlight.
  3. Memaparkan hanya Waktu Imsak dan Maghrib sahaja (sesuai untuk bulan puasa). Anda boleh gunakan XPath filter untuk menyaring elemen.

Itu antara tambahan lain yang dicadangkan untuk aplikasi web ASP.NET ini. Baiklah, itu sahaja untuk artikel ASP.NET dan Waktu Solat ini.

Klik disini untuk muat turun keseluruhan kod sumber ASP.NET dan Waktu Solat.

Kredit: Gambar interior oleh Google.

Komen telah ditutup