Dani R Taufani

Free Ebook Membuat Konten E-learning dengan Microsoft LCDS

2011-02-27T15:42:54Z

Puji syukur, pada penghujung bulan Februari ini kembali muncul ebook terbaru dari kami. Tak lupa penulis berterima kasih kepada Tuhan Yang Maha Esa, karena atas tuntunan dan kasih-Nya penulis mampu menyelesaikan ebook dengan judul Membuat Konten E-learning dengan Microsoft
Learning Content Development System (LCDS) .

Dalam ebook ini membahas mengenai sebuah tool (kakas) yang dapat digunakan oleh user awam untuk memudahkan dalam pembuatan konten pembelajaran yang interaktif dan komunikatif yakni Microsoft Learning Content Development System (LCDS). Ebook juga dilengkapi gambar-gambar dari penggunaan tool dan penjelasan komponen-komponen dalam tool LCDS yang dapat memudahkan Anda dalam mencoba dan mengimplementasikannya. Ebook ini sangat cocok bagi Anda para pengajar yang menginginkan sebuah solusi untuk membuat konten pembelajaran dan kemudian menyampaikannya ke siswa Anda.

Jika terdapat saran dan koreksi yang membangun untuk ebook ini, Anda dapat mengirimkan email kepada kami di dani[at]mugi.or.id.

Akhir kata, kami berterima kasih kepada semua pihak yang telah membantu kami, khususnya bagi rekan-rekan MSP dan MUGI Bandung. Terima kasih juga kepada para pembaca yang telah mengunduh ebook ini kemudian menyempatkan waktu untuk membacanya.

Download http://mugi.or.id/media/p/7744.aspx

Mirror Download http://bit.ly/EbookLCDS

Dukungan HTML5 pada Internet Explorer 9 Beta

2010-12-28T23:27:26Z

Microsoft pada tahun 2010 ini telah bersiap untuk mempersiapkan browser terbarunya yakni Internet Explorer 9. Sebagai browser modern dan jika kita amati perkembangan teknologi web yang ada sekarang, tentu IE9 juga sangat aware akan permasalahan ini. IE9 pada dasarnya adalah perkembangan HTML5 compliance yang telah ada pada versi Internet Explorer 8 dan menambahkan fitur-fitur terbaru yang terdapat pada HTML5 Working Draft.

Komitmen terhadap Web Standart

Hadirnya HTML5, CSS3, SVG, DOM L2 merupakan wujud nyata bahwa IE9 mengimplementasikan teknologi web terbaru yang disusun oleh World Wide Web Consortium (W3C).

Microsoft juga menyediakan portal referensi IE9 Beta Guide for Developers dan juga yang baru-baru ini dilaunching HTML5 Labs yang saat ini sudah ada dua prototipe yang tersedia, yakni Web Sockets dan IndexedDB, dua bagian HTML5 yang belum sepenuhnya rampung disempurnakan.

Dari hal itu, kita bisa melihat komitmen Microsoft untuk mengikuti standart paling up-to-date, meskipun jika dengan mengikuti standart terbaru akan sering terjadi beberapa perubahan karena progress spefikasi yang terus berkembang.

NOTE Perlu untuk diingat, sampai pada blog ini diposting HTML5 specification masih dalam tahap Working Draft. Untuk informasi lebih lanjut silahkan menyimak spesifikasi HTML5 working draft.

Sebelumnya, pada versi Internet Explorer 8 juga telah memperkenalkan beberapa fitur dan spesifikasi HTML5 Working Draft, seperti:

DOM Storage, merupakan bagian dari spesifikasi Web Storage specification
AJAX Navigation, implementasinya pada window.location.hash property dan pada onhashchange event, yang mana keduanya merupakan bagian dari History Traversal HTML5 specification
Cross-document messaging, implementasinya pada postMessage method dan pada onmessage event, yang mana keduanya juga merupakan bagian dari HTML5 Web Messaging module

Berikut ini merupakan fitur-fitur terbaru yang telah ditanam pada IE9 :

Element <video> dan <audio> untuk membuat konten web multimedia.
Elemen <canvas> yang memungkinkan untuk membuat animasi.
Selection interface, IE9 telah mendukung penuh DOM L2 Range
Intropabilitas HTML parsing
Dukungan DOM API & DOM Improvement
Scaling Vector Graphics (SVG)

Selain goodies diatas masih banyak fitur-fitur terbaru yang terdapat pada IE9. Anda sebagai developer juga dapat mencicipi IE9 engine pada Internet Explorer Test Drive yang sekarang telah sampai pada versi Platform Preview 7. Dan bagi anda para pengguna, juga telah tersedia Internet Explorer 9 Beta.

Validasi pada Form dengan ASP.NET Validation Control

2010-12-08T05:16:59Z

Pada artikel sebelumnya mengenai pembuatan Mail Form atau Contact Form secara sederhana,terkadang user salah memasukkan nama email atau format email tidak sesuai, ada nama yang menggunakan angka dimana hal itu tidak kita kehendaki dan mungkin ada field/kolom pada form yang terlewati atau tidak terisi. Hal-hal yang tidak kita inginkan pada form dapat kita validasi menggunakan ASP.NET Form Validation dimana di Visual Studio telah menyediakan control-control-nya, seperti berikut.

Langkah pertama unduh solution dari project Mail Form disini. Berikutnya kita tambahkan control ValidationSummary. Control ini nantinya akan memunculkan pesan-pesan ketika terjadi kesalahan saat kita melakukan pengisian form.

   1: <asp:ValidationSummary ID="ValidationSummary" runat="server" CssClass="error"

   2:     DisplayMode="BulletList" ForeColor="" HeaderText="Any something wrong on:" />

Berikutnya kita mempunyai policy bahwa pada field Name dan Email required atau tidak boleh kosong untuk itu gunakan control RequiredFieldValidator.

   1: <asp:RequiredFieldValidator ID="reqName"  runat="server" ControlToValidate="txtName"

   2:     ErrorMessage="Field Name" CssClass="form-required"><span class="required-field">Required</span>

   3: </asp:RequiredFieldValidator>

Perhatikan bahwa code diatas terdapat properti ControlToValidate yang berfungsi menentukan ID dari control apa yang akan dilakukan validasi. Lakukan juga pada field Email.

Selanjutnya pada field email kita dapat menggunakan control RegularExpressionValidator. Control ini berguna untuk memvalidasi struktur email yang diketikkan oleh user. Seperti kita tahu pada email harus terdapat “@” dan “.” Jika anda belum paham mengenai Regular Expression (RegEx) anda dapat mengunjungi referensi berikut.

Pada properti ValidationExpression klik tombol … maka akan muncul window Regular Expression Editor dan pilih Internet e-mail address.

   1: <asp:RegularExpressionValidator ID="RegExEmail" runat="server"

   2:     ErrorMessage="Field Email" ControlToValidate="txtEmail"

   3:     ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"

   4:     Display="Dynamic"><span class="required-field">Your email not valid</span>

   5: </asp:RegularExpressionValidator>

Properti Display=”Dynamic” berguna ketika dalam satu control terdapat multi validation, nantinya ketika validator memunculkan message error maka lokasinya akan berpindah mendekati ke control yang kita validasikan.

Berikut final source code-nya.

       1: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="DemoEmailForm._Default" %>

       2:  

       3: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

       4: <html xmlns="http://www.w3.org/1999/xhtml">

       5: <head runat="server">

       6:     <title>Email Form</title>

       7:     <link href="css/screen.css" rel="stylesheet" type="text/css" />

       8: </head>

       9: <body>

    <div class="container">

        <h2>Contact Me</h2>

        <form id="form1" runat="server">

        <div class="span-12">

        <asp:Panel CssClass="success" ID="pnlSuccess" runat="server" Visible="false">

                Your email was sent succesfully.

        </asp:Panel>

        <asp:Panel CssClass="error" ID="pnlError" runat="server" Visible="false">

                <p>Your email was not send due to an error.</p>

                <p>Error Message: <asp:Literal ID="ltErrorMessage" runat="server" /></p>

        </asp:Panel>

            <asp:ValidationSummary ID="ValidationSummary" runat="server" CssClass="error" 

                DisplayMode="BulletList" ForeColor="" HeaderText="Any something wrong on:" />

            <p>

                <asp:Label ID="lblName" AssociatedControlID="txtName" runat="server" Text="Name"></asp:Label><br />

                <asp:TextBox ID="txtName" CssClass="text" runat="server"></asp:TextBox>

                <asp:RequiredFieldValidator ID="reqName"  runat="server" ControlToValidate="txtName" 

                    ErrorMessage="Field Name" CssClass="form-required"><span class="required-field">Required</span></asp:RequiredFieldValidator>

            </p>

            <p>

                <asp:Label ID="lblEmail" AssociatedControlID="txtEmail" runat="server" Text="Email"></asp:Label><br />

                <asp:TextBox ID="txtEmail" CssClass="text" runat="server"></asp:TextBox> 

                <asp:RequiredFieldValidator ID="reqEmail"  runat="server" ControlToValidate="txtEmail" 

                    ErrorMessage="Field Email" CssClass="form-required" Display="Dynamic"><span class="required-field">Required</span></asp:RequiredFieldValidator>

                <asp:RegularExpressionValidator ID="RegExEmail" runat="server" 

                    ErrorMessage="Field Email" ControlToValidate="txtEmail" 

                    ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" 

                    Display="Dynamic"><span class="required-field">Your email not valid</span></asp:RegularExpressionValidator></p>

            <p>

                <asp:Label ID="lblMessage" AssociatedControlID="txtMessage" runat="server" Text="Message"></asp:Label><br />

                <asp:TextBox ID="txtMessage" runat="server" TextMode="MultiLine"></asp:TextBox></p>

            <asp:Button ID="btnSubmit" runat="server" Text="Send Message" OnClick="btnSubmit_Click" />

        </div>

        </form>

    </div>

</body>

</html>

Conclusion

Jika kita perhatikan, validasi yang dilakukan oleh validation control berjalan pada client side. Dengan menggunakan validation control yang dirender di server dan kemudian menghasilkan javascript code. Hal ini sangat memudahkan kita, terutama bagi developer yang belum terlalu memahami mengenai javascript. Untuk lebih memahami mengenai ASP.NET Validation Contol dapat menyimak dua tautan berikut:

---
Follow @danitaufani untuk mendapatkan update blog ini. Happy coding!

IE9: Seamless with Windows 7

2010-12-02T05:12:08Z

Internet Explorer 9 mengenalkan fitur terbaru bernama Pinned Sites dan Add to Start Menu, yang dapat berinteraksi dengan Windows 7. Ini membuat web aplikasi yang kita buat layaknya aplikasi dekstop. User dapat menambahkan website favoritnya ke Start Menu ataupun mem-pin ke taskbar. Tidak hanya itu, pada web yang telah kita add ke start menu atau di-pin ke taskbar dapat memberikan jump list seperti akses cepat ke halaman web (navigasi), melihat update/notifikasi terbaru dan lain-lain.

Add Website to Start Menu & Pin to Taskbar

Nah, untuk itu pada tutorial kali ini saya akan membahas pemanfaatan fitur Add/Pin site. Langkah pertama, saya telah mempunyai template Blog HTML 5. Anda juga dapat menggunakan template page website HTML versi sebelumnya.

Browser Support

Berikutnya buat sebuah function javascript yang akan mendeteksi apakah browser tersebut support fitur Pinned sites.

   1: function testSiteMode()

   2: {

   3:     try {

   4:         if (window.external.msIsSiteMode()) {

   5:             location.href = startPage;

   6:         }

   7:     }

   8:     catch(ex) {

   9:         alert("Site Mode is not supported.");

  10:         return;

  11:     }

  12: }

  13: window.onload = testSiteMode;

Pada code diatas akan bernilai TRUE jika browser mensupport feature pinned sites dan bernilai FALSE jika browser tidak mendukung fitur pinned site dan kemudian akan memunculkan alert. Function diatas dapat dimodifikasi, ambil contoh dari situs Channel 9, jika browser support maka akan ada label/text yang akan memberitahu kalau user dapat memanfaatkan fitur Pinned Sites. Sebaliknya jika tidak mensupport dapat menampilkan informasi untuk segera mendownload IE9.

Jika anda ingin melakukan Add to Start Menu, langkahnya tekan Alt, pilih Add site to Start Menu. Berikut contoh ketika saya melakukan Add to Start Menu pada Bing.com

Nah, pada tutorial bagian pertama ini kita akan membuat fitur Add pada website kita. Setelah kita menambahkan browser detection, kita bisa membuat tombol untuk mempermudah melakukan Add to Start Menu.

   1: <!-- Button/Link Add to Start Menu -->

   2:     <button onclick="addWebApp()" title="Click to add this webpage to your Windows Start menu.">

   3:     Launch in Site Mode

   4:     </button>

   5: <!-- END Button/Link Add to Start Menu –>

Adding to Start Menu

itu tambahkan function pada javascript untuk meng-handle ketika tombol tersebut di click.

   1: <script type="text/javascript" charset="utf-8">

   2:     function addWebApp() {

   3:     try {

   4:         window.external.msAddSiteMode();

   5:     }

   6:     catch(ex) {

   7:          alert("Site Mode is not supported.");

   8:         return;

   9:     }

  10: }

  11: window.onload = function() {

  12:     document.addEventListener('mssitemodeinstalled', function() {

  13:         alert("Site Mode shortcut installed sucessfully.");

  14:     }, false);

  15: }

  16: </script>

Pada function addWebApp tersebut hampir mirip dengan function untuk melakukan browser detection yang ada diatas.

Meta Elements

Langkah selanjutnya kita tambahkan beberapa meta element, seperti berikut.

       1: <meta name="application-name" content="Silverblog"/>

       2: <meta name="msapplication-tooltip" content="Start the page in Site Mode"/>

       3: <meta name="msapplication-starturl" content="http://localhost/_Project/silverblog/"/>

       4: <meta name="msapplication-window" content="width=800;height=600"/>

       5: <meta name="msapplication-navbutton-color" content="black"/>

       6: <META name="msapplication-task" content="name=Styles;action-uri=http://localhost/_Project/silverblog/styles.html;icon-uri=http://localhost/_Project/silverblog/ico/Nanosuit HD - Apple Dark Gel.ico"/>

       7: <META name="msapplication-task" content="name=About;action-uri=http://localhost/_Project/silverblog/about.html;icon-uri=http://localhost/_Project/silverblog/ico/Nanosuit HD - 3Ds max.ico"/>

       8: <META name="msapplication-task" content="name=Contact;action-uri=http://localhost/_Project/silverblog/contact.html;icon-uri=http://localhost/_Project/silverblog/ico/Nanosuit HD - Vista 2.ico"/>

Tambahkan favicon untuk mempercantik tampilan, favicon ini juga yang nantinya akan muncul pada Start Menu dan Taskbar.

       1: <!-- Favicon -->

       2: <LINK rel="shortcut icon" type=image/x-icon href="http://localhost/_Project/silverblog/ico/Finder.ico">

       3: <LINK rel=icon type=image/ico href="./Finder.ico">

       4: <!-- END Favicon -->

Name	Content
application-name	Nama web aplikasi kita, jika tidak ada akan menggunakan title pada page web.
msapplication-tooltip	Opsional teks yang ditampilkan sebagai tooltip ketika penunjuk mouse di atas ikon shortcut pinned site pada menu Start Windows.
msapplication-starturl	Url/alamat yang akan dibuka ketika kita melakukan Add Site to Start Menu.
msapplication-navbutton-color	Warna pada nav button Back & Forward
msapplication-window	Ukuran window dari situs yang ditambahkan ke Start Menu. width=N (minimum 800) height=N (minimum 600)
msapplication-task	Task dapat berisi maksimal lima item. name=STR (string) action-uri=URI icon-uri=URI

Pada contoh diatas saya menggunakan 3 application task, About, Contact dan Styles. Save dan Add to Start Menu.

Jika kita lihat pada Taskbar dan lakukan klik kanan juga akan menampilkan seperti berikut.

Item Category

Berikutnya kita akan menambahkan Jump List Category beserta item-itemnya. Pada contoh kali ini saya akan membuat category Recent Posts.

       1: function AddJumpList() {

       2:     window.external.msSiteModeCreateJumplist('Recent Posts');

       3:     window.external.msSiteModeAddJumpListItem('The Future of HTML 5', '/_Project/silverblog/#', '/_Project/silverblog/ico/iChat - NanoPlastic.ico');

       4:     window.external.msSiteModeAddJumpListItem('CSS3 Sneek Peek ', '/_Project/silverblog/#', '/_Project/silverblog/ico/iChat - NanoPlastic.ico');

       5:     window.external.msSiteModeAddJumpListItem('Build Canvas from Scratch', '/_Project/silverblog/#', '/_Project/silverblog/ico/iChat - NanoPlastic.ico');

       6:     window.external.msSiteModeShowJumplist();

       7: }

msSiteModeCreateJumplist – Membuat sebuah Jumplist
msSiteModeAddJumplistItem – Menambahkan item ke Jumplist
msSiteModeShowJumplist – tampilkan Jumplist
msSiteModeClearJumplist – clear/bersihkan Jumplist

Panggil function diatas ketika webpage mendukung Add/Pin Site.

   1: if (window.external.msIsSiteMode()) {

   2:       AddJumpList();

   3:   }

Conclusion

IE9 merupakan browser modern yang mengadopsi teknologi dan web standart terkini seperti HTML5, CSS3, ECMAScript, SVG dan lain-lain. Tentunya dengan kolaborasi dengan Windows 7, browser ini akan punya tempat tersendiri bagi para penggunanya.

FYI, Anda dapat membuat HTML 5 website dan page templates di Visual Studio 2010 yang dipostkan oleh Rey Bango. Follow @danitaufani untuk mendapat update terbaru blog ini.

Happy Coding!

Code Snippets in Visual Studio 2010

2010-11-29T03:09:59Z

Visual Studio 2010 memberikan kemudahan untuk memasukkan block atau potongan code ke editor window. Hal ini sangat membantu kita ketika kita malas untuk melakukan coding secara manual dan berulang-ulang, kita dapat dengan mudah memasukan code yang kita butuhkan secara instan. Di VS2008 memasukkan code snippets sangat lah rumit dan kita bisa menggunakan aplikasi pihak ketiga untuk memudahkannya.

Pada VS2010 snippet memiliki dua jenis yakni Expansion Snippets yang dimasukkan pada posisi kursor dan SurroundsWith yang akan membungkus code yang ada. Secara default, VS2010 telah menyediakan code snippet, kita melihat snippet-snippet yang ada di C:\Users\<UserName>\Documents\Visual Studio 2010\Code Snippets\

Membuat Custom Snippet

1. Langkah pertama kita membuat XML File, simpan dengan nama favicon.snippet pastikan ekstensi filenya .snippet

2. Klik kanan, pilih Insert Snippet, pilih Snippet.

3. Maka akan mengenerate code berikut.

   1: <CodeSnippet Format="1.0.0" xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">

   2:   <Header>

   3:     <Title>title</Title>

   4:     <Author>author</Author>

   5:     <Shortcut>shortcut</Shortcut>

   6:     <Description>description</Description>

   7:     <SnippetTypes>

   8:       <SnippetType>SurroundsWith</SnippetType>

   9:       <SnippetType>Expansion</SnippetType>

  10:     </SnippetTypes>

  11:   </Header>

  12:   <Snippet>

  13:     <Declarations>

  14:       <Literal>

  15:         <ID>name</ID>

  16:         <Default>value</Default>

  17:       </Literal>

  18:     </Declarations>

  19:     <Code Language="XML">

  20:       <![CDATA[<test>

  21:       <name>$name$</name>

  22:       $selected$ $end$</test>]]>

  23:     </Code>

  24:   </Snippet>

  25: </CodeSnippet>

Delete tag <SnippetType>SurroundsWith</SnippetType> karena kita akan membuat snippet jenis Expansion.

4. Ganti Title menjadi "Favicon", Shortcut menjadi “faviconAdd" dan Description menjadi "Add favicon image".

5. Tag Literal memungkinkan kita untuk menentukan nilai-nilai yang dapat diedit . Pada snippet, saya ingin memungkinkan user untuk mengubah lokasi atau nama file favicon. Tag ID adalah nama dari nilai yang dapat diedit sehingga kita mengubahnya menjadi “favicon". Tag Default menentukan nilai default untuk bidang yang dapat diedit.

6. Terakhir kita ubah language-nya menjadi “HTML”.

   1: <Code Language="HTML">

   2:       <![CDATA[

   3:         <link rel="shortcut icon" href="$favicon$" />

   4:         ]]>

   5:     </Code>

Berikut snippet code nya.

   1: <?xml version="1.0" encoding="utf-8"?>

   2: <CodeSnippet Format="1.0.0" xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">

   3:   <Header>

   4:     <Title>Favicon</Title>

   5:     <Author>Dani</Author>

   6:     <Shortcut>faviconAdd</Shortcut>

   7:     <Description>Add favicon image</Description>

   8:     <SnippetTypes>

   9:       <SnippetType>Expansion</SnippetType>

  10:     </SnippetTypes>

  11:   </Header>

  12:   <Snippet>

  13:     <Declarations>

  14:       <Literal>

  15:         <ID>Favicon</ID>

  16:         <Default>favicon.ico</Default>

  17:       </Literal>

  18:     </Declarations>

  19:     <Code Language="HTML">

  20:       <![CDATA[

  21:     <link rel="shortcut icon" href="$Favicon$" />

  22:       ]]>

  23:     </Code>

  24:   </Snippet>

  25: </CodeSnippet>

Load snippet ke VS

Untuk meload snippet, kita bisa menggunakan salah satu cara.

1. Copy favicon.snippet file yang ada pada C:\Users\<UserName>\Documents\Visual Studio 2010\Code Snippets\ ke folder snippet didalam Solution Project anda.

2.Cara kedua, anda klik menu Tools pilih Code Snippets Manager. Kemudian pilih Import.

Menggunakan Code Snippets

Anda dapat menggunakan Snippets Code dengan menekan Ctrl K + X atau klik kanan Insert Snippet.

Follow @danitaufani on twitter

How to Build Search BlogPost with ASP.NET

2010-11-11T02:36:31Z

Pada tutorial ini akan memandu anda dalam membuat search form pada sebuah blog. Dimana search form ini berguna untuk mencari artikel-artikel yang sesuai dengan keyword yang kita inginkan.

Pada tahap pertama kita membuat sebuah database “Blog” yang sederhana, kemudian buat sebuah table yang terdiri dari 3 buah column/field: BlogId (int - Auto Increment), BlogTitle (nvarchar(MAX))dan BlogContent (nvarchar(300))simpan dengan nama Blog.

Setelah membuat table, kita akan mengisi nilai dari column-column yang kita buat tadi. Sebagai contoh saya mengisikan data seperti berikut.

Tambahkan LinQ to SQL untuk koneksi datanya.

Berikutnya kita beralih ke page Default.aspx untuk membuat tampilannya. Tambahkan heading, satu textbox dan satu button seperti berikut.

   1: <h1>Search</h1>

   2:         <asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>

   3:         <asp:Button ID="btnSubmit"

   4:             runat="server" Text="Search" onclick="btnSubmit_Click" />

Pada kode diatas terdapat event onclick="btnSubmit_Click" Anda dapat membuatnya dengan melakukan double klik pada button Search dalam tampilan split atau design. Tambahkan Data Control ListView untuk menampilkan hasil dari pencarian.

   1: <asp:ListView ID="lvBlog" runat="server">

   2:             <LayoutTemplate>

   3:                 <asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>

   4:             </LayoutTemplate>

   5:             <ItemTemplate>

   6:                 <h1><%#Eval("BlogTitle") %></h1>

   7:                 <p><%#Eval("BlogContent") %></p>

   8:             </ItemTemplate>

   9:             </asp:ListView>

Pada baris ke-6 dan ke-7 untuk membinding data dari value yang ada pada table yakni value dari column BlogTitle dan BlogContent. Berikutnya kita beralih ke code behind, buat DataSource dan DataBind pada menthod btnSubmit_Click.

   1: BlogDataContext db = new BlogDataContext();

2:

   3:             var Blog = from b in db.Blogs

   4:                        where b.BlogContent.Contains(txtSearch.Text.Trim()) ||

   5:                        b.BlogTitle.Contains(txtSearch.Text.Trim())

   6:                        select b;

7:

   8:             lvBlog.DataSource = Blog;

   9:             lvBlog.DataBind();

Pada DataSource diatas (baris 3-6) akan membandingkan antara value yang ada pada column table(BlogContent dan BlogTitle) dengan value yang ada pada txtSearch. Jika sudah, klik Start Debugging(F5). Jika kita mencari dengan keyword “ASP.NET” maka akan muncul seperti berikut.

Dalam kenyataannya, jika kita melakukan pencarian maka akan diberikan link judul artikel tersebut, link tersebut akan menuju pada detail artikel. Untuk itu kita membuat sebuah page baru bernama Entry.aspx

Pada Entry.aspx tambahkan ListView untuk menampilkan data.

   1: <asp:ListView ID="lvBlogEntry" runat="server">

   2:             <LayoutTemplate>

   3:                 <asp:PlaceHolder ID="itemPlaceHolder" runat="server"></asp:PlaceHolder>

   4:             </LayoutTemplate>

   5:             <ItemTemplate>

   6:                 <h1><%#Eval("BlogTitle") %></h1>

   7:                 <p><%#Eval("BlogContent") %></p>

   8:             </ItemTemplate>

   9:         </asp:ListView>

Berikutnya kita buka Entry.aspx.cs lalu buat sebuah DataSource seperti berikut pada method Page_Load.

   1: BlogDataContext db = new BlogDataContext();

   2:            int TheQueryString = Convert.ToInt32(Request.QueryString["BlogID"]);

   3:            var Blog = from p in db.Blogs

   4:                       where p.BlogID == TheQueryString

   5:                       select p;

6:

   7:            lvBlogEntry.DataSource = Blog;

   8:            lvBlogEntry.DataBind();

Kemudian edit ListView pada Default.aspx seperti berikut.

   1: <asp:ListView ID="lvBlog" runat="server">

   2:     <LayoutTemplate>

   3:         <asp:PlaceHolder ID="itemPlaceHolder" runat="server"></asp:PlaceHolder>

   4:     </LayoutTemplate>

   5:     <ItemTemplate>

   6:         <asp:HyperLink ID="lnkPost" Text='<%#Eval("BlogTitle") %>' runat="server" NavigateUrl='<%#Eval("BlogID", "Entry.aspx?BlogID={0}") %>'></asp:HyperLink>

   7:     </ItemTemplate>

   8: </asp:ListView>

Dapat kita lihat pada ItemTemplate terdapat control Hyperlink yang akan menampilkan judul dan link url dengan masking Entry.aspx?BlogId={BlogId}. Jika sudah Start Debugging (F5).

Jika kita klik link tersebut akan muncul seperti ini.

Untuk membuat tampilan blog kita semakin dinamis, selanjutnya kita bisa menambahkan fitur AJAX Control.

   1: <asp:ScriptManager ID="ScrMng" runat="server">

   2:         </asp:ScriptManager>

   3:         <asp:UpdateProgress ID="UptPgs" runat="server" DisplayAfter="500">

   4:         <ProgressTemplate>

   5:             <img src="Images/loading.gif" alt="Please Wait!" />

   6:         </ProgressTemplate>

   7:         </asp:UpdateProgress>

   8:             <asp:UpdatePanel ID="UptPnl" runat="server">

   9:             <Triggers>

  10:                 <asp:AsyncPostBackTrigger ControlID="btnSubmit" />

  11:             </Triggers>

  12:             <ContentTemplate>

  13:         <asp:ListView ID="lvBlog" runat="server">

  14:             <LayoutTemplate>

  15:                 <asp:PlaceHolder ID="itemPlaceHolder" runat="server"></asp:PlaceHolder>

  16:             </LayoutTemplate>

  17:             <ItemTemplate>

  18:                 <asp:HyperLink ID="lnkPost" Text='<%#Eval("BlogTitle") %>' runat="server" NavigateUrl='<%#Eval("BlogID", "Entry.aspx?BlogID={0}") %>'></asp:HyperLink>

  19:             </ItemTemplate>

  20:         </asp:ListView>

  21:         </ContentTemplate>

  22:      </asp:UpdatePanel>

Kode diatas terdapat 3 komponen utama dalam AJAX Controls seperti ScriptManager, ProgressTemplate dan UpdatePanel. ScriptManager berfungsi untuk mengatur client script pada halaman web yang menggunakan AJAX. Kita harus menempatkan sebuah ScriptManager pada setiap halaman web kita jika kita ingin menggunakan AJAX. Pada UpdateProgress kita memberikan value 500 atau sama dengan 500 milisecond (0.5 detik) pada properties DisplayAfter. Jangan lupa untuk Add image loading.gif ke dalam solution kita. Pada UpdatePanel terdapat dua komponen yakni Triggers dan ContentTemplate. Triggers berfungsi untuk mengeksekusi ketika sebuah event terjadi. ContentTemplate merupakan bagian yang akan ditampilkan atau mengalami perubahan.

Add reference System.Threading , reference ini berisi class-class kontrol thread pada Default.aspx.cs

   1: using System.Threading;

Berikutnya tambahkan Thread.Sleep

   1: Thread.Sleep(1000);

Pada kode diatas berfungsi sebagai waktu untuk meng-overload data dengan satuan milisecond. Jika sudah, Start Debugging (F5). Anda bisa mengganti value yang dibutuhkan untuk meload data dari ListView dengan mengubah value

Conclusion

Secara sederhana tutorial ini memberikan gambaran bagaimana membuat search form pada web, untuk berikutnya bisa dikembangkan lebih jauh dengan parameter-parameter pencarian yang kompleks. untuk itu anda dapat bermain-main dengan syntax LinqToSql. Ebook dalam bahasa indonesia juga telah tersedia disini. Untuk referensi mengenai ASP.NET AJAX bisa disimak disini.

Source code tutorial ini dapat anda download disini. Follow @danitaufani untuk mendapatkan update dari blog ini.

Happy coding guys!

Simple Mail Form Using ASP.NET

2010-10-25T16:09:22Z

Hampir disetiap website terdapat page Contact atau Hubungi Kami, fungsinya dari page ini adalah memudahkan visitor untuk menghubungi si pemilik website. Metode yang sering digunakan adalah dengan mengirimkan email melalui contact form yang telah disediakan. Well, pada artikel ini kita akan membuat simple Mail Form using ASP.NET C#.

Langkah pertama kita membuat tampilannya. Terdapat 3 label, Name, Subject dan Message, 3 textbox dan 1 button.

   1: <asp:Label ID="lblName" AssociatedControlID="txtName" runat="server" Text="Name"></asp:Label>

   2: <asp:TextBox ID="txtName" runat="server"></asp:TextBox>

   3: <asp:Label ID="lblSubject" AssociatedControlID="txtSubject" runat="server" Text="Subject"></asp:Label>

   4: <asp:TextBox ID="txtSubject" runat="server"></asp:TextBox>

   5: <asp:Label ID="lblMessage" AssociatedControlID="txtMessage" runat="server" Text="Message"></asp:Label>

   6: <asp:TextBox ID="txtMessage" runat="server" TextMode="MultiLine"></asp:TextBox>

   7: <asp:Button ID="btnSubmit" runat="server" Text="Send Message"

   8:     onclick="btnSubmit_Click" />

Pada line 8, kita menambahkan method btnSubmit_Click dengan event onclick. Setelah kita membuat tampilannya, langkah berikutnya adalah menambahkan reference

using System.Net.Mail;

Namespace ini berisi class-class content dari mail message, referensi lengkapnya ada disini.

Tambahkan code berikut pada method btnSubmit_Click

   1: protected void btnSubmit_Click(object sender, EventArgs e)

   2:         {

   3:             MailMessage email = new MailMessage()

   4:             {

   5:                 Subject = "Email form Demo Contact Form",

   6:                 Body = txtMessage.Text,

   7:                 IsBodyHtml = false,

   8:                 From = new MailAddress(txtEmail.Text, txtName.Text)

   9:             };

10:

  11:         }

Pada constructor MailMessage terdapat constructor MailAddress mempunyai 3 pilihan untuk menampilkan string address (alamat email), string address, string displayName dan pilihan ketiga displayNameEncoding. Pada contoh diatas kita memakai untuk menampilkan alamat email dan nama pengirimnya. Berikutnya kita membuat collection yang berisi alamat email yang akan dituju.

   1: email.To.Add(new MailAddress("email@email.com", "Name Email"));

2:

   3: SmtpClient server = new SmtpClient();

   4: server.EnableSsl = true;

   5: server.Send(email);

Pada baris ke 3-4 kita memanggil method Send untuk mengirimkan email. Tahap selanjutnya, permasalahan muncul ketika kita mengirimkan email. SmtpClient diatas tidak memuat object-object pada smtp server seperti Host, Port, Credential dll. Untuk itu kita perlu mensetting pada Web.config

   1: <system.net>

   2:     <mailSettings>

   3:       <smtp>

   4:         <network port="" host="" userName="" password="" />

   5:       </smtp>

   6:     </mailSettings>

   7:   </system.net>

Isikan port, host, username dan password sesuai dengan settingan smtp server anda. Selanjutnya, Run(F5) dan test untuk mengirimkan email.

Ok, permasalahan berikutnya ketika kita telah mengirimkan email/menekan button Send, user tidak tahu apakah emailnya terkirim atau tidak. Sesuai dengan prinsip usability kita menambahkan delivery status.

   1: <asp:Panel CssClass="success" ID="pnlSuccess" runat="server" Visible="false">

   2:     <p>Your email was sent succesfully.</p>

   3: </asp:Panel>

   4: <asp:Panel CssClass="error" ID="pnlError" runat="server" Visible="false">

   5:     <p>Your email was not send due to an error.</p>

   6:     <p>Error Message: <asp:Literal ID="ltErrorMessage" runat="server" /></p>

   7: </asp:Panel>

Pada code behind, tambahkan method clearForm

   1: private void clearForm()

   2:        {

   3:            foreach (Control control in form1.Controls)

   4:            {

   5:                if (control is TextBox)

   6:                {

   7:                    TextBox textbox = control as TextBox;

   8:                    textbox.Text = String.Empty;

   9:                }

  10:            }

  11:        }

Edit code method btnSubmit_Click seperti berikut.

   1: try

   2: {

   3:     MailMessage email = new MailMessage()

   4:     {

   5:         Subject = "Email form Demo Contact Form",

   6:         Body = txtMessage.Text,

   7:         IsBodyHtml = false,

   8:         From = new MailAddress(txtEmail.Text, txtName.Text)

   9:     };

10:

  11:     email.To.Add(new MailAddress("email@email.com", "Name Email"));

12:

  13:     SmtpClient server = new SmtpClient();

  14:     server.EnableSsl = true;

  15:     server.Send(email);

16:

  17:     pnlSuccess.Visible = true;

  18:     clearForm();

  19: }

  20: catch (Exception ex)

  21: {

  22:     pnlError.Visible = true;

  23:     ltErrorMessage.Text = ex.Message;

  24: }

Pada code diatas terdapat exception handling untuk mendapatkan pesan error dan juga setelah mengirimkan email akan menampilkan pnlSuccess & invoke method clearForm. Jika terdapat error maka akan menampilkan seperti ini.

Dan jika email yang kita kirimkan terkirim akan menampilkan seperti ini.

Summary

Referensi mengenai penggunaan System.Net.Mail Namespace dapat anda temukan juga di MSDN http://msdn.microsoft.com/en-us/library/system.net.mail.aspx

Source code tutorial ini dapat anda download disini. Follow @danitaufani untuk mendapatkan update dari blog ini.

Happy coding!

jQuery UI on ASP.NET

2010-09-23T13:00:38Z

Jika sebelumnya kita sudah tidak asing dengan Javascript Framework seperti jQuery, Mootools, ExtJS atau yang lainnya, pada artikel ini kita akan membahas tentang jQuery UI. jQuery UI merupakan pengembangan dari jQuery yang memudahkan kita untuk membuat UI (User Interface) web yang interaktif dengan berbagai fitur dan theme.

Untuk menggunakan jQuery UI anda dapat mendownload library-nya di http://jqueryui.com. jQuery UI mendukung beberapa fitur menarik diantaranya :

Interactions	Widget	Effect
Draggable	Accordion	Blind	Highlight
Droppable	Dialog	Bounce	Pulsate
Resizable	Slider	Clip	Scale
Selectable	Tab	Drop	Shake
Sortable	DatePicker	Explode	Slide
	ProgressBar	Fold	Transfer

Sekarang kita akan membahas penggunaan salah satu widget jQuery UI DatePicker pada ASP.NET.

1. Tambahkan library jQuery yang telah disediakan ketika kita membuat project baru.

   1: <head runat="server">

   2:     <title>Menggunakan jQuery UI DatePicker pada ASP.NET</title>

   3:     <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

   4:     <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>

   5: </head>

2. Tambahkan library jQuery UI + CSS + Image yang telah anda download dengan melakukan Add Existing Item.

   1: <link href="Style/jquery-ui-1.8.4.custom.css" rel="stylesheet" type="text/css" />

   2: <script src="Scripts/jquery.ui.core.js" type="text/javascript"></script>

   3: <script src="Scripts/jquery.ui.datepicker.js" type="text/javascript"></script>

Make sure solution project anda sebagai berikut.

3. Berikutnya kita dapat menggunakan textbox Html control maupun server control. Pada contoh ini kita menggunakan textbox server control.

   1: <asp:TextBox ID="txtDatePicker" CssClass="datepicker" runat="server"></asp:TextBox>

4. Tambahkan kode berikut pada <head>, kemudian Run(F5).

   1: <script type="text/javascript">

   2:         $(function () {

   3:             $(".datepicker").datepicker();

   4:         });

   5:     </script>

Kita juga dapat mengkostumasinya dengan animasi, mengganti format tanggalnya, interaksinya, dll. Anda dapat menyimak dokumentasinya lebih lanjut pada http://jqueryui.com/demos/datepicker/

   1: <script type="text/javascript">

   2:         $(function () {

   3:             $(".datepicker").datepicker({

   4:                 dateFormat: 'dd-MM-yy',

   5:                 showOn: 'button',

   6:                 buttonImage: 'images/calendar.png',

   7:                 buttonImageOnly: true,

   8:                 showAnim: 'slideDown'

   9:             });

  10:         });

  11:     </script>

Summary

Dengan penggunaan jQuery UI menyediakan berbagai interaksi, widget, animasi yang memudahkan kita untuk membuat UI yang interaktif. Microsoft juga menyediakan Microsoft Ajax Content Delivery Network (CDN) yang dapat digunakan secara gratis, jadi anda tidak perlu repot-repot untuk mengupload library code jQuery UI, anda dapat menyimaknya disini.

Source code tutorial ini dapat anda download disini!

P.S: In addition to blogging, I have recently been using Twitter to-do quick posts and share links. You can follow me on Twitter @danitaufani

Using Repeater Control ASP.NET

2010-08-29T17:37:44Z

Pada Visual Studio telah tersedia pada toolbox tab Data control. Pada Data control berisi control-control yang dapat kita gunakan untuk menampilkan, menambah, mengedit, mengupdate & menghapus data.

Pada tutorial ini kita akan membahas mengenai Repeater control. Repeater control memungkinkan Anda untuk membuat template, template tersebut digunakan untuk menentukan letak content-nya. Berikut template-template yang terdapat pada repeater control:

ItemTemplate - Digunakan untuk element yang dirender sekali per baris data.
AlternatingItemTemplate – Digunakan untuk element yang dirender setiap baris data lainnya. Hal ini memungkinkan Anda untuk warna background alternatif, misalnya.
HeaderTemplate – Digunakan untuk element yang ingin dirender satu kali sebelum bagian ItemTemplate Anda.
FooterTemplate – Digunakan untuk element yang ingin dirender sekali setelah bagian ItemTemplate Anda.
SeperatorTemplate – Digunakan untuk memisahkan setiap baris, seperti line break atau horisontal line.

Selanjutnya kita akan mencoba membuat repeater control di ASP.NET. Sebelumnya kita harus menyiapkan data yang akan ditampilkan ke website dan juga DataSource-nya. Untuk datasource tersedia beberapa pilihan sepert AccessDataSource, EntityDataSource, LinqDataSource, ObjectDataSource,SqlDataSource, SiteMapDataSource dan XmldataSource.

Pada tutorial ini saya menggunakan database Mahasiswa dan LINQ to SQL untuk datasource-nya.

Tambahkan LinqDataSource kedalam file aspx.

   1: <asp:LinqDataSource ID="dsMahasiswa" runat="server">

   2:         </asp:LinqDataSource>

Setelah Database dan Datasource tersedia, tambahkan code berikut.

   1: <asp:Repeater ID="rptMahasiswa" runat="server">

   2:             <HeaderTemplate>

   3:                 <table cellpadding="2" cellspacing="0" border="1">

   4:                     <tr>

   5:                         <th>

   6:                             NIM

   7:                         </th>

   8:                         <th>

   9:                             Nama

  10:                         </th>

  11:                         <th>

  12:                             Alamat

  13:                         </th>

  14:                         <th>

  15:                             Kelas

  16:                         </th>

  17:                     </tr>

  18:             </HeaderTemplate>

  19:             <ItemTemplate>

  20:                 <tr>

  21:                     <td>

  22:                         <%# DataBinder.Eval(Container.DataItem, "NIM") %>

  23:                     </td>

  24:                     <td>

  25:                         <%# DataBinder.Eval(Container.DataItem, "Nama") %>

  26:                     </td>

  27:                     <td>

  28:                         <%# DataBinder.Eval(Container.DataItem, "Alamat") %>

  29:                     </td>

  30:                     <td>

  31:                         <%# DataBinder.Eval(Container.DataItem, "Kelas") %>

  32:                     </td>

  33:                 </tr>

  34:             </ItemTemplate>

  35:             <FooterTemplate>

  36:                 </table>

  37:             </FooterTemplate>

Pada code behind tambahkan code berikut. Saya menggunakan OrderBy untuk mengurutkan data berdasarkan NIM.

   1: protected void Page_Load(object sender, EventArgs e)

   2:         {

   3:             MahasiswaDataContext db = new MahasiswaDataContext();

   4:             rptMahasiswa.DataSource = db.Mahasiswas.OrderBy(n => n.NIM);

   5:             rptMahasiswa.DataBind();

   6:         }

Jika sudah, klik Start Debugging (F5), maka akan menghasilkan seperti berikut.

Selain cara diatas kita juga bisa merender data dengan langkah-langkah berikut.

1. Tambahkan Import directive namespace

   1: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="DemoRepeaterControl._Default" %>

   2: <%@ Import Namespace="DemoRepeaterControl" %>

2. Ubah code ItemTemplate, seperti berikut.

   1: <ItemTemplate>

   2:                 <tr>

   3:                     <td>

   4:                        <%# ((Mahasiswa)Container.DataItem).NIM %>

   5:                     </td>

   6:                     <td>

   7:                        <%# ((Mahasiswa)Container.DataItem).Nama %>

   8:                     </td>

   9:                     <td>

  10:                        <%# ((Mahasiswa)Container.DataItem).Alamat %>

  11:                     </td>

  12:                     <td>

  13:                        <%# ((Mahasiswa)Container.DataItem).Kelas %>

  14:                     </td>

  15:                 </tr>

  16:             </ItemTemplate>

Jika sudah, klik Start Debugging (F5), untuk melihat hasilnya.

Bagaimana jika kita ingin menampilkan data itemnya dengan menggunakan Literal control?

1. Pertama kita tambahkan literal controlnya.

   1: <ItemTemplate>

   2:                 <tr>

   3:                     <td>

   4:                      <asp:Literal ID="ltrNim" runat="server"></asp:Literal>

   5:                     </td>

   6:                     <td>

   7:                      <asp:Literal ID="ltrNama" runat="server"></asp:Literal>

   8:                     </td>

   9:                     <td>

  10:                       <asp:Literal ID="ltrAlamat" runat="server"></asp:Literal>

  11:                     </td>

  12:                     <td>

  13:                      <asp:Literal ID="ltrKelas" runat="server"></asp:Literal>

  14:                     </td>

  15:                 </tr>

  16:             </ItemTemplate>

2. Kemudian buat sebuah event ItemDataBound pada repeater.

   1: <asp:Repeater ID="rptMahasiswa" runat="server"

   2:            onitemdatabound="rptMahasiswa_ItemDataBound">

3. Tambahkan method berikut pada code behind anda.

   1: protected void rptMahasiswa_ItemDataBound(object sender, RepeaterItemEventArgs e)

   2:        {

   3:            Literal ltrNim = e.Item.FindControl("ltrNim") as Literal;

   4:            Literal ltrNama = e.Item.FindControl("ltrNama") as Literal;

   5:            Literal ltrAlamat = e.Item.FindControl("ltrAlamat") as Literal;

   6:            Literal ltrKelas = e.Item.FindControl("ltrKelas") as Literal;

7:

   8:            if (ltrNim is Literal)

   9:            {

  10:                Mahasiswa mhs = e.Item.DataItem as Mahasiswa;

11:

  12:                ltrNim.Text = mhs.NIM;

  13:                ltrNama.Text = mhs.Nama;

  14:                ltrAlamat.Text = mhs.Alamat;

  15:                ltrKelas.Text = mhs.Kelas;

  16:            }

  17:        }

Anda juga dapat menambahkan AlternatingItemTemplate seperti berikut.

   1: <AlternatingItemTemplate>

   2:                <tr style="background-color:Gray">

   3:                    <td>

   4:                        <asp:Literal ID="ltrNim" runat="server"></asp:Literal>

   5:                    </td>

   6:                    <td>

   7:                     <asp:Literal ID="ltrNama" runat="server"></asp:Literal>

   8:                    </td>

   9:                    <td>

  10:                      <asp:Literal ID="ltrAlamat" runat="server"></asp:Literal>

  11:                    </td>

  12:                    <td>

  13:                     <asp:Literal ID="ltrKelas" runat="server"></asp:Literal>

  14:                    </td>

  15:                </tr>

  16:            </AlternatingItemTemplate>

Juga dengan menambahkan SeperatorTemplate seperti berikut.

   1: <SeparatorTemplate>

   2:                 <tr>

   3:                     <td colspan="4">

   4:                         &nbsp;

   5:                     </td>

   6:                 </tr>

   7:             </SeparatorTemplate>

Summary

Referensi mengenai penggunaan repeater control dapat anda temukan juga di MSDN http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.repeater.aspx

Source code tutorial ini dapat anda download di http://www.mediafire.com/?s7bdav1yf4f0bbi

P.S: In addition to blogging, I have recently been using Twitter to-do quick posts and share links. You can follow me on Twitter @danitaufani

Introducing Microsoft Learning Development System (LCDS) Part 2

2010-07-17T04:54:55Z

Pada artikel sebelumnya kita telah mengetahui apa itu Microsoft LCDS pada artikel berikut ini kita akan membahas 3 Template yang ada pada LCDS, untuk penjelasan mengenai template lainnya anda dapat menyimak disini

Read

Pada template Read terdapat beberapa pilihan yang sangat berguna untuk membuat content e-learning yang bersifat pasif (berisi text, picture dan tabel)maupun untuk menciptakan pengalaman belajar secara interaktif (multiple choice, essay, question dan true false).

Introduction

Template Introduce adalah template yang mempunyai beberapa fungsi. Pada template ini dapat digunakan untuk overview modul, perkenalan pelajaran, atau halaman topik. Anda dapat menempatkan komponen-komponen berikut.

Komponen	Deskripsi
Picture	Untuk menambahkan gambar.
VOE Caption / Alt Text	Deskripsi singkat mengenai gambar.
Heading	Judul paragraf atau pokok bahasan
Paragraf	Dapat berisi penjabaran dari pokok bahasan.
Audio	Untuk menambahkan audio.
Transcript	Transkrip rekaman.

Text and Picture

Template Text and Picture dapat digunakan untuk membuat content yang berisikan paragraf-paragraf dan gambar. Pada template ini terdapat komponen-komponen sebagai berikut.

Komponen	Deskripsi
Picture	Untuk menambahkan gambar.
Alt Text	Deskripsi singkat mengenai gambar.
Paragraf	Dapat berisi penjabaran dari pokok bahasan.

Tabel

Template Tabel berguna untuk membuat content berupa tabel, pada template ini terdiri dari komponen-komponen sebagai berikut.

Komponen	Deskripsi
Paragraf	Dapat berisi penjabaran dari pokok bahasan.
Tabel
- Column Title	Judul kolom
- Picture	Untuk menambahkan gambar kedalam kolom
- Alt Text	Deskripsi singkat mengenai gambar
- Text	Berisi detail deskripsi

Click Table

Template Click Tabel digunakan untuk menjelaskan dasar-dasar, menunjukkan perbandingan, dan menyampaikan fakta-fakta seperti definisi. Klik item pada kolom kiri dan konten terkait akan ditampilkan pada kolom lainnya. Kolom ketiga adalah opsional dan biasanya digunakan untuk grafis/gambar saja. Komponen-komponen yang terdapat pada template ini sama dengan template tabel.

Multiple Choice

Soal pilihan ganda adalah salah satu pilihan penilaian yang tersedia dalam LCD (Learning Content Development). Multiple Choice template mendukung hingga 10 pertanyaan, dan hanya 1 jawaban yang benar per pertanyaan. Pelajar dihadapkan dengan satu pertanyaan pada satu waktu, dan dapat menavigasi ke pertanyaan-pertanyaan lainnya dengan menggunakan nomor pertanyaan di bagian atas halaman. Pelajar mendapatkan feedback segera setelah selesai dari setiap pertanyaan, berdasarkan jawaban yang dipilih.

Untuk tiap pertanyaan, setelah jawaban telah disubmit, peserta didik tidak diijinkan untuk merevisi atau mengirimkan kembali jawaban mereka. Untuk kursus yang disediakan di sebuah LMS (Learning Management System), jawaban secara otomatis akan dilacak dan dinilai pada LMS. Komponen-komponen yang terdapat pada template multiple choice sebagai berikut :

Komponen	Deskripsi
Question	Berisi pertanyaan yang diajukan.
Answer	Pilihan jawaban yang ditampilkan
Feedback	Pesan yang muncul ketika pelajar mensubmit jawabanya.
Correct Answer	Jawaban yang benar. (Kunci jawaban)

True False

Item True/False adalah salah satu pilihan penilaian yang tersedia dalam LCD. True False template mendukung hingga 10 peryataan benar / salah, serta feedback untuk kedua pilihan jawaban. Pelajar dihadapkan dengan satu pernyataan sekaligus, dan dapat menavigasi ke laporan lainnya dengan menggunakan nomor item di bagian atas halaman. Pelajar mendapatkan feedback segera setelah mengirimkan jawaban mereka untuk setiap pernyataan. Setelah jawaban disubmit, pelajar tidak dapat mengubah jawaban mereka dan tidak dapat mengirimkannya kembali.

Komponen-komponen yang terdapat pada template True False sebagai berikut :

Komponen	Deskripsi
Statement	Berisi peryataan yang bernilai benar atau salah.
Feedback (for correct answer)	Pesan yang muncul ketika pelajar mensubmit jawaban yang benar.
Feedback (for incorrect answer)	Pesan yang muncul ketika pelajar mensubmit jawaban yang salah.
Correct Answer	Jawaban yang benar. (Kunci jawaban)

Essay Question

Essay Question adalah salah satu pilihan penilaian yang tersedia dalam LCD. Tentu saja Anda harus host di sebuah LMS jika Anda berencana untuk menggunakan jenis penilaian ini. LMS adalah tempat pengiriman jawaban, kemudian disimpan untuk diperiksa dan dinilai oleh instruktur.

Essay Question template mendukung satu pertanyaan esai. Pelajar dihadapkan dengan pertanyaan esai dan jawaban maksimal berjumlah 250 karakter (termasuk spasi). Setelah jawaban disubmit, pelajar tidak dapat mengubah jawaban mereka dan tidak dapat mengirimkannya kembali.

Komponen yang terdapat pada template Essay Question sebagai berikut :

Komponen	Deskripsi
Question	Berisi pertanyaan yang diajukan.

Glossary

Glosari template dapat digunakan sebagai tempat definisi istilah yang digunakan dalam kursus tersebut. Seringkali istilah glossary sama digunakan di seluruh kurikulum.

Cara membuat glosarium

1. Masukkan istilah dalam komponen Glossary, format dengan huruf tebal dan kemudian tekan ENTER untuk memulai sebuah paragraf baru.

2. Pada paragraf baru, masukkan definisi untuk istilah di atasnya.

3. Lanjutkan menambahkan istilah dan definisi sampai glossary selesai.

4. Kemudian klik Save.

Show Hide

Dengan Show Hide template, Anda dapat menggabungkan gambar di kiri dengan teks di sebelah kanan, termasuk "Show/Hide" teks. Show Hide teks terdiri dari link yang dapat diklik dengan teks yang sesuai, ketika pengguna mengklik judul maka akan menampilkan teks deskripsi, jika pengguna mengklik kembali judul tersebut maka deskripsi teks akan disembunyikan. Klik Show All untuk menampilkan semua deskripsi teks.

Try

Simulation

Simulasi menggabungkan screen capture dan animasi untuk menciptakan pengalaman menggunakan software komputer tanpa pengguna benar-benar menggunakan atau mempunyai perangkat lunak. Software simulasi menyediakan pelajar dengan praktek melaksanakan proses atau kegiatan dalam aplikasi perangkat lunak.

Catatan : Untuk template ini tidak akan dibahas secara mendetail

Lab Scenario / Offline

Template ini akan memungkinkan penulis memberikan informasi latar belakang tekstual untuk laboratorium yang dilakukan siswa secara offline. Meskipun template dipilih secara terpisah, tetapi masih identik dengan Teks / Grafis template. Komponen-komponen yang ada pada template ini sama dengan template Text and Picture.

Classroom

Text, Picture & Table

Dengan Text, Picture & Table template, Anda dapat menggabungkan gambar, teks paragraf, dan tabel (sampai dengan 3 kolom dan 10 baris) dalam satu subject tunggal. Selain itu, template ini memungkinkan Anda untuk menambahkan setting tambahan teks, gambar, dan kombinasi tabel (hingga totalnya 16) untuk ditampilkan dalam topik yang sama kemudian peserta didik dapat mengakses topik tambahan tersebut.

Follow me on twitter @danitaufani

Introducing Microsoft Learning Development System (LCDS) Part 1

2010-07-17T04:35:12Z

Microsoft menyediakan Learning Content Development System (LCDS) yang merupakan perangkat gratis yang memungkinkan kita untuk menciptakan konten pembelajaran yang berkualitas tinggi, interaktif dan dapat diakses secara online. LCDS memungkinkan setiap orang dalam komunitas atau organisasi tertentu untuk menerbitkan e-learning dengan menggunakan LCDS secara mudah dengan konten yang dapat disesuaikan, interaktif activity, kuis, games, ujian, animasi, demo, dan multimedia lainnya.

Step by step creating content on LCDS

Apa yang baru di versi LCDS 2.5?

E-learning dibuat kompatibel dengan Firefox 3.5.9 dan Firefox 3.6.3.
Microsoft Silverlight 4 Media Player untuk animasi yang meliputi closed captioning.
Peningkatan aksesibilitas keyboard dan untuk tile game, adventure interactivity, dan Voice of the Expert element.
Authoring LCDS dan e-learning dibuat sepenuhnya kompatibel dengan Microsoft Silverlight 4.0.

Rilis versi terbaru dari LCDS kompatibel dengan sistem operasi 64-bit dan dengan Microsoft Silverlight 4.0. Anda akan menemukan fitur inovatif, seperti kemampuan untuk menggunakan animasi dengan captioning tertutup. Anda dapat mendownload versi 2.5 disini

Ketika content e-learning anda telah selesai anda dapat mempublish di Web atau di Learning Management System. Anda dapat mendownload sampel-sampel course disini sebagai referensi.

Follow me on Twitter @danitaufani

How to use Microsoft Expression Encoder 4 Screen Capture

2010-07-15T08:25:17Z

Pada Expression Studio 4 family, terdapat salah satu tool untuk membuat video dimana video yang dihasilkan berasal dari screen capture. Video screen capture sering kita gunakan dalam membuat video tutorial/panduan. Untuk itu tentunya kita harus menginstall Expression Studio 4, bagi Anda yang belum mempunyainya Anda dapat menggunakan versi trialnya disini.

Pada tampilan awal pada Encoder 4 Screen Clipping terlihat intuitif dan sederhana.

	Tombol toogle Mic, dimana kita bisa meng-enable-kan atau merekam dan juga mendisable recording audio dari microphone
	Tombol tombol webcam, dimana kita bisa menambahkan input video dari webcam, supaya video yang kita buat lebih interaktif.
	Pada tombol ini akan menampilkan option-option saat kita melakukan recording. (*Options)
	Tombol ini akan menampilkan lokasi penyimpanan video.
	Tombol disamping merupakan tombol untuk melakukan start/stop recording.

*Options

1. Tab Screen

Frame Rate: Untuk pilihan standart kita bisa memilih 25 fps.

Bitrate: Untuk menentukan jumlah bit yang dikirim dalam setiap detiknya, default-nya 30000 kbps.

Quality (1-100) : Untuk menentukan kualitas video screen capture.

2. Camera

Pada tab ini kita dapat meng-include-kan input video yang berasal dari WebCam ke dalam screen cliping untuk membuat sebuah tutorial yang lebih interaktif.

3. Audio

Pada tab ini kita dapat meng-include-kan input audio yang berasal dari Microphone, Digital Audio dan Speakers ke dalam screen cliping untuk membuat sebuah tutorial yang lebih interaktif.

4. Hotkey

Hotkey atau Shortcut akan sangat berguna untuk mempermudah proses recording, jika kita tidak ingin aktifitas kita saat melakukan stop/pause ter-capture, kita dapat menggunakan fungsi hotkey ini. Hotkey/shortcut tersebut juga dapat kita atur sesuai dengan keinginan.

5. Other

Pada tab ini tersedia pengaturan-pengaturan seperti :

6. Help

Anda dapat menggunakan help sebagai panduan penggunaan.

Klik button OK jika semua pengaturan telah selesai dan tekan tombol Record. Berikutnya kita diarahkan untuk memilih area yang akan kita record.

Jika kita perhatikan pada window Select Region, kita bisa meng-costumize size atau full screen. Untuk mulai record klik tombol Record, maka proses recording akan dimulai.

Ketika proses recording telah selesai, kita menggunakan hotkey atau menggunakan tombol stop record. Maka akan memunculkan window berikut.

Ditombol bawah terdapat tombol Send to Encoder untuk mengirimkan video hasil capturing ke Encoder 4.

P.S: Materi Encoder 4 akan saya publish di artikel berikutnya, so stay tune on this channel!

Follow me on Twitter @danitaufani

Video Introducing OneNote 2010 Part 2

2010-07-13T03:53:00Z

Pada video ini merupakan sekuel dari video pertama, di edisi kedua ini saya menjelaskan tentang fungsi OneNote 2010 dan OneNote for student dan juga fitur-fitur seperti screen clipping, insert audio &video.

“Mohon maaf kalau kualitas videonya masih berantakan”

(Please visit the site to view this media)

Follow @danitaufani untuk mendapatkan info terupdate mengenai blog ini!

Cool stuff in PowerPoint 2010 : Shape Combine

2010-07-02T02:31:17Z

Did u know ? Pada Powerpoint 2010 ada banyak command yang tidak ditampilkan by default pada ribbon, seperti hidden feature yang beberapa feature tersebut sangat berguna untuk editing presentasi Anda. Anda dapat menambahkan hidden command ke Quick Access Toolbar (tempat yang bagus untuk menambahkan command yang sering digunakan) atau ingin menaruhnya pada Ribbon dengan memilih Costumize Ribbon. Langkah-langkahnya sebagai berikut :

File > PowerPoint Option > Costumize Ribbon atau Quick Access Toolbar > Command Not in the Ribbon > Pilih command yang ingin ditampilkan. Dan salah satu feature kesayangan saya adalah Shape Combine.

Untuk lebih jelasnya mengenai feature shape combine, silahkan menyimak artikel ini. Artikel singkat ini mudah-mudahan bermanfaat !

Share your notebook to Windows Live Skydrive directly

2010-06-23T12:12:15Z

Selagi masih hangat-hangatnya release final Office Web Apps, kali ini saya akan membahas tentang kemudahan upload notebook yang ada pada Microsoft OneNote 2010. Sebelumnya, jika anda belum menginstall office 2010, anda masih dapat mencicipi keindahan versi betanya. Memang keluarga office 2010 memanjakan kita untuk menshare secara langsung dari Office 2010.

Ok, untuk itu kita buka OneNote 2010, dan klik ribbon menu File. Pada backstage menu terdapat tab Share. Perhatikan pada No. 3. Ya, kita tidak perlu repot untuk membuka browser sign-in ke skydrive dan kemudian mengupload-nya.

Dan ketika notebook kita sudah berada di skydrive kita bisa mengeditnya berbagi ke teman-teman anda dan masih ada lagi, kita dapat mensinkronisasikan notebook yang ada pada Desktop kita dengan yang di skydrive.

Follow me @danitaufani for update my blog post!