Windows Phone 7 VB Tutorial (WP7 with WCF REST Services)

Pada tutorial kali ini kita akan membuat WCF REST Services sederhana yang dapat di-consume oleh aplikasi WP7.

 

Creating WCF REST Services

1. Pertama kita akan membuat REST Services sederhana. Caranya buat empty Web Site.

2. File → New → Web Site → ASP.NET Empty Web Site → beri nama SimpleREST.

image

3. Klik kanan pada project → Add → New Item → pilih WCF Services → beri nama Service1.svc.

image

4. Buka web.config kemudian tambahkan tag berikut pada <system.serviceModel>

<system.serviceModel>
    <behaviors>
        <serviceBehaviors>
            <behavior name="">
                <serviceMetadata httpGetEnabled="true" />
                <serviceDebug includeExceptionDetailInFaults="false" />
            </behavior>
        </serviceBehaviors>
    </behaviors>
    <serviceHostingEnvironment multipleSiteBindingsEnabled="true" />
</system.serviceModel>

5. Klik kanan pada Service1.svc kemudian pilih View Markup.

image

6. Kemudian tambahkan file konfigurasi berikut

<%@ ServiceHost Language="VB" Debug="true" Service="SimpleREST.Service1" CodeBehind="Service1.svc.vb"
Factory="System.ServiceModel.Activation.WebServiceHostFactory" %>

7.Definisikan kontrak service yang akan anda buat pada file IService1.vb

Imports System
Imports System.ServiceModel
Imports System.ServiceModel.Web
Imports System.Runtime.Serialization
Imports System.Text
Imports System.Collections.Generic
Imports System.Linq

' NOTE: You can use the "Rename" command on the context menu to change the interface name "IService1" in both code and config file together.
<ServiceContract()>
Public Interface IService1

    <OperationContract()>
    <WebGet(UriTemplate:="GetData/{a}", RequestFormat:=WebMessageFormat.Xml,
            ResponseFormat:=ServiceModel.Web.WebMessageFormat.Xml,
            BodyStyle:=ServiceModel.Web.WebMessageBodyStyle.Bare)>
    Function GetData(ByVal a As String) As String

End Interface

8. Kemudian definisikan method service yang akan anda buat pada file Service1.svc.vb. Buat sebuah method dengan nama GetData() yang akan mengembalikan nilai bertipe string.

Public Class Service1
    Implements IService1

    Public Function GetData(ByVal a As String) As String Implements IService1.GetData
        Return String.Format("Hello {0} this message from REST Services", a)
    End Function

End Class

9.Jalankan service yang sudah anda buat dengan cara klik kanan pada ‘Service1.svc’ kemudian pilih View in browser.

10.Lengkapi urlnya sebagai berikut untuk memanggil service dengan nama GetData yang sudah anda buat.

http://localhost:2531/Service1.svc/GetData/Erick

image

11. Service1.svc adalah nama service, GetData adalah nama method, dan ‘Erick’ adalah nilai dari parameter. Hasil dari pemanggilan service diatas adalah:

image

Cara Pemanggilan Service dari WP7

Setelah selesai membuat REST service yang akan diconsume, sekarang kita akan membuat aplikasi client pada Windows Phone 7 yang digunakan untuk mengakses service tersebut.

1. Buat project Silverlight for Windows Phone 7 dengan nama WP7RestConsume.

image

2. Tambahkan beberapa textbox, textblock dan tombol kedalam tampilan design sebagai berikut:

image

<!–ContentPanel – place additional content here–>
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <TextBlock Height="30" HorizontalAlignment="Left" Margin="35,25,0,0" Name="TextBlock1" Text="Parameter :" VerticalAlignment="Top" />
    <TextBox Height="72" HorizontalAlignment="Left" Margin="142,6,0,0" Name="ParameterTextBox" Text="" VerticalAlignment="Top" Width="308" />
    <Button Content="Call Rest Service" Height="72" HorizontalAlignment="Left" Margin="148,66,0,0" Name="CallRestButton" VerticalAlignment="Top" Width="241" />
    <TextBlock Height="30" HorizontalAlignment="Left" Margin="72,152,0,0" Name="TextBlock2" Text="Result :" VerticalAlignment="Top" />
    <TextBlock Height="123" HorizontalAlignment="Left" Margin="148,152,0,0" Name="ResultTextBlock" Text="" VerticalAlignment="Top" Width="302" TextWrapping="Wrap" FontSize="28" />
</Grid>

3. Tambahkan referensi System.Runtime.Serialization.

image

4. Double click pada tombol CallRestButton, kemudian tambahkan kode berikut untuk mengambil nilai yang dikembalikan dari service.

Imports System.Runtime.Serialization

Partial Public Class MainPage
    Inherits PhoneApplicationPage

    ' Constructor
    Public Sub New()
        InitializeComponent()
    End Sub

    Private Sub CallRestButton_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles CallRestButton.Click
        Dim proxy As New WebClient
        Dim strUri = String.Format("http://localhost:2531/Service1.svc/GetData/{0}",
                                   ParameterTextBox.Text)
        AddHandler proxy.OpenReadCompleted, AddressOf proxy_OpenReadCompleted
        proxy.OpenReadAsync(New Uri(strUri))
    End Sub

    Private Sub proxy_OpenReadCompleted(ByVal sender As Object, ByVal e As OpenReadCompletedEventArgs)
        Dim sr As New DataContractSerializer(GetType(String))
        Dim strResult = sr.ReadObject(e.Result).ToString
        ResultTextBlock.Text = strResult
    End Sub

End Class

5. Pastikan bahwa sebelum anda menjalankan program services harus sudah jalan. Sesuaikan url pada program dengan url services yang anda jalankan.

6. Tekan F5 untuk menjalankan programnya.

image

Windows Phone 7 VB Tutorial (Consuming REST Services)

Windows Phone 7 secara default tidak mendukung penyimpanan data pada local database (seperti SQL CE atau SQLite), jadi jika anda ingin bekerja dengan data di WP7 anda dapat mengkonsumsi data tersebut dari Cloud yang berupa services.

Aplikasi yang akan kita buat pada tutorial kali ini yaitu SimpleTwitterClient yang akan mengkonsumsi data dari services yang disediakan oleh Twitter.

Simple Twitter Client

1. Buka Visual Studio 2010.

2. Pilih bahasa VBSilverlight for Windows PhoneWindows Phone Application → beri nama SimpleTwitterClient.

image

3. Pada MainPage.xaml tampilan XAML Editor, tambahkan kode xaml berikut untuk mengganti ApplicationTitle.

<!–TitlePanel contains the name of the application and page title–>
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
    <TextBlock x:Name="ApplicationTitle" Text="Windows Phone 7 App" Style="{StaticResource PhoneTextNormalStyle}"/>
    <TextBlock x:Name="PageTitle" Text="Twitter Client" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>

    

4. Dari menu toolbox tambahkan textbox, button, dan listbox control.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <TextBox Height="72" HorizontalAlignment="Left" Margin="0,6,0,0" Name="UserNameTextBox" Text="" VerticalAlignment="Top" Width="316" />
    <Button Content="Lookup" Height="72" HorizontalAlignment="Left" Margin="296,6,0,0" Name="LookupButton" VerticalAlignment="Top" Width="160" />
    <ListBox Height="517" HorizontalAlignment="Left" Margin="12,84,0,0" Name="MessageListBox" VerticalAlignment="Top" Width="438" />
</Grid>

image

5. Double click pada button LookupButton untuk menambahkan kode berikut

Private Sub LookupButton_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles LookupButton.Click
    Dim wc As New WebClient
    AddHandler wc.DownloadStringCompleted, AddressOf wc_DownloadStringCompleted
    Dim strUri = String.Format("http://api.twitter.com/1/statuses/user_timeline.xml?screen_name={0}",
                               UserNameTextBox.Text)
    wc.DownloadStringAsync(New Uri(strUri))
End Sub

6. Class WebClient digunakan untuk mengambil services yang disediakan oleh twitter. Pada kode diatas kita mengambil informasi message dari user tertentu. Jika anda jalankan link dari REST services twitter yang ada diatas misal ketikan url berikut : http://api.twitter.com/1/statuses/user_timeline.xml?screen_name=erickkurniawan

image

7. Maka services yang anda panggil akan menghasilkan output berupa dokumen xml seperti gambar diatas. Dokumen tersebut berupa informasi posting dari user ‘erickkurniawan’.

8. Untuk mengakses dokumen XML tersebut dari WP7 kita akan menggunakan LINQ to XML. LINQ to XML akan memudahkan anda untuk memanipulasi dokumen XML.

9. Untuk dapat menggunakan LINQ to XML anda harus menambahkan referensi System.Xml.Linq kedalam aplikasi yang anda buat.

10. Pada solution explorer klik kanan pada ReferencesAdd Reference → tambahkan System.Xml.Linq.

image

image

11. Tambahkan kode untuk menggunakan namespace System.Xml.Linq.

Imports System.Xml.Linq

12. Pada contoh program ini kita akan mengambil beberapa informasi yang akan ditampilkan yaitu Message, Username, dan ImageSource. Untuk kebutuhan tersebut buat class baru dengan nama TwitterItem.vb.

image

Class TwitterItem
    Public Property UserName As String
    Public Property Message As String
    Public Property ImageSource As String
End Class

13. Tambahkan kode pada event wc_DownloadStringCompleted untuk mengambil data yang kita inginkan dari dokumen XML hasil kembalian twitter services.

Private Sub wc_DownloadStringCompleted(ByVal sender As Object, ByVal e As DownloadStringCompletedEventArgs)
    If Not e.Error Is Nothing Then Exit Sub

    Dim xmlTweet = XElement.Parse(e.Result)
    MessageListBox.ItemsSource = From tweet In xmlTweet…<status>
                                      Select New TwitterItem With {
                                          .UserName = tweet.<user>.<screen_name>.Value,
                                          .Message = tweet.<text>.Value,
                                          .ImageSource = tweet.<user>.<profile_image_url>.Value
                                      }
End Sub

14. Pada MainPage.xaml, bagian MessageListBox tambahkan kode berikut

          <ListBox Height="517" HorizontalAlignment="Left" Margin="12,84,0,0" Name="MessageListBox"
                   VerticalAlignment="Top" Width="438">
              <ListBox.ItemTemplate>
                  <DataTemplate>
                      <StackPanel Orientation="Horizontal" Height="132">
                          <Image Source="{Binding ImageSource}" Height="72" Width="72" VerticalAlignment="Top" Margin="0,8,8,0"/>
                          <StackPanel Width="370">
                                <TextBlock Text="{Binding Message}"Foreground="Orange" FontSize="24" TextWrapping="Wrap" />
                                <TextBlock Text="{Binding UserName}"TextWrapping="Wrap" FontSize="22" />
                          </StackPanel>
                      </StackPanel>
                  </DataTemplate>
              </ListBox.ItemTemplate>
          </ListBox>

15. Tekan F5 untuk mendeploy program kedalam WP7 emulator dan menjalankannya, output dari program dapat dilihat pada gambar dibawah ini.

image

Windows Phone 7 Tutorial (VB) Part 2

Simple WP7 Silverlight Application

Pada tutorial kali ini akan dibahas pembuatan aplikasi-aplikasi yang sederhana menggunakan Silverlight for Windows Phone 7. Adapun aplikasi yang akan dibuat adalah :

  • Simple Web Browser
  • Simple Image Viewer
  • Simple Media Player

Simple Web Browser

Pada tutorial kali ini kita akan membuat sebuah Web Browser sederhana dengan menggunakan Windows Phone 7 Silverlight Application.

    • Buat project Silverlight for Windows Phone dengan nama SimpleWebBrowser.
    • Ubah ApplicationTitle dan PageTitle sebagai berikut:
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
    <TextBlock x:Name="ApplicationTitle" Text="Windows Phone 7" Style="{StaticResource PhoneTextNormalStyle}"/>
    <TextBlock x:Name="PageTitle" Text="Web Browser" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>

    • Tambahkan textbox dengan nama BrowserTextBox.
    • Tambahkan button dengan nama BrowserButton
    • Tambahkan web browser control dengan nama MyWebBrowser.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <TextBox Height="72" HorizontalAlignment="Left" Margin="6,6,0,0" Name="BrowserTextBox" Text="" VerticalAlignment="Top" Width="290" />
    <Button Content="Browse" Height="72" HorizontalAlignment="Left" Margin="290,6,0,0" Name="BrowserButton" VerticalAlignment="Top" Width="160" />
    <phone:WebBrowser HorizontalAlignment="Left" Margin="12,84,0,0" Name="MyWebBrowser" VerticalAlignment="Top" Width="438" Height="517" />
</Grid>

    • Double click pada tombol BrowserButton kemudian tambahkan kode berikut:
Private Sub BrowseButton_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles BrowserButton.Click
    Dim webUri As New Uri(BrowserTextBox.Text, UriKind.Absolute)
    If Not webUri Is Nothing Then
        MyWebBrowser.Navigate(webUri)
    End If
End Sub

    • Jalankan aplikasi pada emulator dengan menekan tombol F5, kemudian tulis alamat url pada textbox.

image

 

Simple Image Viewer

Pada tutorial kali ini kita akan membuat sebuah aplikasi image viewer sederhana menggunakan Silverlight App di Windows Phone 7.

    • Buat project Silverlight for Windows Phone baru dengan nama SimpleImageViewer.
    • Pada langkah selanjutnya kita akan membuat struktur data yang digunakan untuk menyimpan data image yang akan ditampilkan.
    • Klik kanan pada Project di solution explorer → Add → New Item → pilih Code File → beri nama Gambar.vb.

image

  • Tambahkan kode berikut kedalam Gambar.vb
Public Class Gambar
    Public Property FileName As String
    Public Property FileGambar As ImageSource
End Class

    • Pada MainPage.xaml tambahkan listBox kedalam ContentPanel, beri nama GambarListBox.
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <ListBox Height="595" HorizontalAlignment="Left" Margin="12,6,0,0" Name="GambarListBox" VerticalAlignment="Top" Width="438">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Image Width="150" Stretch="Uniform"
                               HorizontalAlignment="Center"
                               Source="{Binding FileGambar}" />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>

    • Klik kanan pada project – pilih Add – New Folder – beri nama images untuk folder yang dibuat.
    • Klik kanan pada folder images – pilih Add – Existing Item – tambahkan 4 file image, kemudian ubah nama file image menjadi berurutan untuk memudahkan pemanggilan.

image

    • Pada MainPage.xaml.vb tambahkan dua method yang akan digunakan untuk mengambil gambar yang ada pada folder images dan memasukannya kedalam object collection untuk ditampilkan dalam list.
Private Function GetGambar(ByVal fileName As String) As ImageSource
    Return New BitmapImage(New Uri(String.Format("images/{0}", fileName),
                                   UriKind.Relative))
End Function

Private Function GetGambars() As ObservableCollection(Of Gambar)
    Dim lstGambar As New ObservableCollection(Of Gambar) From {
        New Gambar With {.FileGambar = GetGambar("1.jpg"), .FileName = "1.jpg"},
        New Gambar With {.FileGambar = GetGambar("2.jpg"), .FileName = "2.jpg"},
        New Gambar With {.FileGambar = GetGambar("3.jpg"), .FileName = "3.jpg"},
        New Gambar With {.FileGambar = GetGambar("4.jpg"), .FileName = "4.jpg"}
    }
    Return lstGambar
End Function

' Constructor
Public Sub New()
    InitializeComponent()
    GambarListBox.ItemsSource = GetGambars()
End Sub

    • Tekan F5 untuk menjalankan aplikasi pada emulator.

image

Simple Media Player

Pada tutorial kali ini kita akan membuat sebuah program media player sederhana untuk memainkan file video pada Windows Phone 7.

    • Buat project Silverlight for Windows Phone dengan nama SimpleMediaPlayer.
    • Tambahkan sebuah button dan media element control kedalam MainPage.xaml.
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <Button Content="Play" Height="72" HorizontalAlignment="Left" Margin="143,6,0,0" Name="PlayButton" VerticalAlignment="Top" Width="160" />
        <MediaElement Height="517" HorizontalAlignment="Left" Margin="12,84,0,0" Name="MyMediaElement" VerticalAlignment="Top" Width="438" />
    </Grid>

    • Tambahkan file .wmv kedalam aplikasi anda. Klik kanan pada project – pilih Add – Existing File – masukan file .wmv (misal Wildlife.wmv).
    • Tambahkan kode berikut pada event PlayButton_Click untuk menjalankan file video tersebut.
Private Sub PlayButton_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles PlayButton.Click
    MyMediaElement.Source = New Uri("Wildlife.wmv", UriKind.Relative)
    MyMediaElement.Play()
End Sub

  • Tekan F5 untuk menjalankan aplikasi yang anda buat pada emulator.

image

ASP.NET Tips: Primary Key Validation

Posting ini dibuat berdasarkan request dari Dewi Thursina yang mengirimkan email berikut:

pertama saya inggin berterima kasih kepada mas erick, karna buku asp.net 3,5
sangat membantu saya dalam pembuatan TA saya, tapi mas saya mau tanya mengenai
bab 4 validation control, gmna cara jika kita menginsert satu data mis: tabel
kategori dengan id_kat kita insert dengan primary key yang sama, sehingga ada
pesan bahwa id_kat tersebut telah ada,,
terima kasih atas perhatiaanya, saya sangat mengharapkan bantuaan,,di tunggu
mas…^___^

Untuk menangkap error yang dikarenakan duplikasi terhadap Primary Key yang ada pada table anda dapat menggunakan 2 cara yaitu:

  • Tangkap Error pada saat event Inserted di SqlDataSource Control
  • Menggunakan Try..Catch Exception saat menjalankan perintah insert() di SqlDataSource control

Pertama Buat database contoh dengan nama “SampleDb.mdf”, buat table “Mahasiswa” berikut:

image 

Isikan beberapa data sample kedalam table tersebut:

image

Untuk cara yang pertama, buat WebForm baru dengan nama “WithSqlDataSource.aspx”, masukan SqlDataSource dan DetailsView.

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

    <div>

        <asp:SqlDataSource ID="sdsMahasiswa" runat="server" 

            ConnectionString="<%$ ConnectionStrings:SampleConnectionString %>" 

            DeleteCommand="DELETE FROM [mahasiswa] WHERE [nim] = @nim" 

            InsertCommand="INSERT INTO [mahasiswa] ([nim], [nama]) VALUES (@nim, @nama)" 

            SelectCommand="SELECT [nim], [nama] FROM [mahasiswa]" 

            UpdateCommand="UPDATE [mahasiswa] SET [nama] = @nama WHERE [nim] = @nim" 

            oninserted="sdsMahasiswa_Inserted">

            <DeleteParameters>

                <asp:Parameter Name="nim" Type="String" />

            </DeleteParameters>

            <InsertParameters>

                <asp:Parameter Name="nim" Type="String" />

                <asp:Parameter Name="nama" Type="String" />

            </InsertParameters>

            <UpdateParameters>

                <asp:Parameter Name="nama" Type="String" />

                <asp:Parameter Name="nim" Type="String" />

            </UpdateParameters>

        </asp:SqlDataSource>

    </div>

    <asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False" 

        DataKeyNames="nim" DataSourceID="sdsMahasiswa" DefaultMode="Insert" 

        Height="50px" style="margin-right: 0px" Width="125px">

        <Fields>

            <asp:BoundField DataField="nim" HeaderText="nim" ReadOnly="True" 

                SortExpression="nim" />

            <asp:BoundField DataField="nama" HeaderText="nama" SortExpression="nama" />

            <asp:CommandField ShowInsertButton="True" />

        </Fields>

    </asp:DetailsView>

    <asp:Literal runat="server" ID="ltKeterangan" />

    </form>

Kemudian tambahkan kode berikut pada event Inserted di SqlDataSource

protected void sdsMahasiswa_Inserted(object sender, SqlDataSourceStatusEventArgs e)

   {

       if (e.Exception != null)

       {

           ltKeterangan.Text = e.Exception.Message;

           e.ExceptionHandled = true;

       }

   }

Jika dimasukan data yang sama

image

Untuk cara yang kedua, buat WebForm dengan nama “Specific.aspx” kemudian tambahkan sqldatasource, textbox, dan button kedalam halaman

<fieldset>

        Nim :<br />

        <asp:TextBox runat="server" ID="txtNim" /><br /><br />

        Nama :<br />

        <asp:TextBox runat="server" ID="txtNama" /><br /><br />

        <asp:Button runat="server" ID="btnSubmit" Text="Submit" 

            onclick="btnSubmit_Click" />

        <hr />

        <asp:Label ID="lblKet" runat="server" EnableViewState="false" />

 

         <asp:SqlDataSource ID="sdsMahasiswa" runat="server" 

            ConnectionString="<%$ ConnectionStrings:SampleConnectionString %>" 

            DeleteCommand="DELETE FROM [mahasiswa] WHERE [nim] = @nim" 

            InsertCommand="INSERT INTO [mahasiswa] ([nim], [nama]) VALUES (@nim, @nama)" 

            SelectCommand="SELECT [nim], [nama] FROM [mahasiswa]" 

            UpdateCommand="UPDATE [mahasiswa] SET [nama] = @nama WHERE [nim] = @nim">

            <DeleteParameters>

                <asp:Parameter Name="nim" Type="String" />

            </DeleteParameters>

            <InsertParameters>

                <asp:Parameter Name="nim" Type="String" />

                <asp:Parameter Name="nama" Type="String" />

            </InsertParameters>

            <UpdateParameters>

                <asp:Parameter Name="nama" Type="String" />

                <asp:Parameter Name="nim" Type="String" />

            </UpdateParameters>

        </asp:SqlDataSource>

    </fieldset>

Pada saat tombol Submit ditekan tambahkan kode berikut:

protected void btnSubmit_Click(object sender, EventArgs e)

   {

       try

       {

           sdsMahasiswa.InsertParameters[0].DefaultValue = txtNim.Text;

           sdsMahasiswa.InsertParameters[1].DefaultValue = txtNama.Text;

           sdsMahasiswa.Insert();

           lblKet.Text = "Data berhasil ditambah";

       }

       catch (System.Data.SqlClient.SqlException sEx)

       {

           if (sEx.Number == 2627)

               lblKet.Text = "Error : Nim Sudah ada masukan yang lain";

           else

               lblKet.Text = "Error :" + sEx.Message;

       }

   }

Untuk mengetahui error secara spesifik (karena error yang mungkin terjadi banyak) maka kita bisa menggunakan try catch pada saat perintah insert() dijalankan. jika terjadi duplikasi PK maka akan terjadi eksepsi dengan error number “2627” (Untuk error yang lain nomornya berbeda). Jika anda sudah tahu number errornya maka anda dapat menambahkan pesan spesifik untuk error itu.

kode dari sample diatas dapat didownload disini.

Semoga Membantu, Happy Coding ^_^

Buku ASP.NET 3.5 (NEW !!)

image

Judul : ASP.NET 3.5 untuk Aplikasi Web Interaktif
Penulis : Erick Kurniawan
Tahun : 2010
Penerbit : Penerbit Andi
Hal : 260
Sinopsis :

Buku ini berisi teknik dan cara praktis yang disertai dengan contoh yang akan menuntun anda untuk membangun aplikasi web dinamis menggunakan framework ASP.NET 3.5 dan bahasa C# secara bertahap.

Buku ini memiliki penjelasan yang terstruktur mengenai fitur-fitur ASP.NET seperti Server Control, Theme, Membership, ADO.NET, Data Binding, Master Page, Validation, dan Data Bound control.

Buku juga ini juga membahas fitur-fitur baru yang ada pada ASP.NET 3.5 dan C# 3.0 seperti

  • LINQ (Language Integrated Query) dan LinqDataSource yang akan memudahkan anda bekerja dengan data seperti melakukan query ke object collection, database, atau xml.
  • ListView dan DataPager yang merupakan control baru pada ASP.NET 3.5 yang sangat fleksible untuk menampilkan dan melakukan paging pada data.
  • ASP.NET AJAX dan AJAX Control Toolkit untuk menambahkan interaktifitas dan performa aplikasi web anda.
  beli disini

Seri Tutorial : ASP.NET dengan JQuery (Part 3)

Tutorial ini adalah sambungan dari Tutorial “ASP.NET dengan JQuery” : Part1, Part2

Pada bagian ketiga ini akan dibahas beberapa topik yaitu:

  • JQuery UI
  • JQuery Plugin

JQuery UI

Jika anda pernah menggunakan Ajax Control Toolkit pada ASP.NET AJAX maka anda tentu sudah familiar dengan control-control seperti Accordion, DateTimePicker, HTMLEditor, dll. JQuery juga mempunyai JQuery UI yang juga memiliki widget/control yang serupa dengan ACT, bahkan mungkin lebih banyak dan bervariasi. Untuk menggunakan JQuery UI anda dapat mendownload library-nya di http://jqueryui.com. JQuery UI mendukung beberapa fitur menarik diantaranya :

Interactions

  • Draggable
  • Droppable
  • Resizable
  • Selectable
  • Sortable

Widget

  • Accordion
  • Dialog
  • Slider
  • Tab
  • DatePicker
  • ProgressBar

Effect

  • Blind
  • Bounce
  • Clip
  • Drop
  • Explode
  • Fold
  • Highlight
  • Pulsate
  • Scale
  • Shake
  • Slide
  • Transfer

 

Fitur Draggable

Dengan menggunakan JQuery UI anda dapat menambahkan fitur draggable kedalam aplikasi anda.

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

<head runat="server">

    <title>Menggunakan JQuery UI Draggable</title>

    <script src="lib/jquery-1.3.2.js" type="text/javascript"></script>

    <script src="lib/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>

    <script src="lib/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>   

 

    <script language="javascript" type="text/javascript"> 

        $(document).ready(function() { 

            $("#drag").draggable();

        }); 

    </script> 

    

    <style type="text/css"> 

        #drag  

        {  

            width:150px; 

            height:150px; 

            border:solid 2px #000; 

            padding:15px; 

            color:White; 

            font-weight:bold;

            background-color:Blue; 

        } 

    </style> 

</head>

<body>

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

    <div id="drag"> 

        <p>Drag saya dunk !!</p> 

    </div> 

    </form>

</body>

</html>

 

Fitur Dropable

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

<head runat="server">

    <title>Dropable Feature</title>

    

    <script src="lib/jquery-1.3.2.js" type="text/javascript"></script>

    <script src="lib/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>

    <script src="lib/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>

 

    <link href="lib/themes/base/ui.all.css" rel="stylesheet" type="text/css" />

    

    <script language="javascript" type="text/javascript">

        $(document).ready(function() {

            $("#drag").draggable();

            $("#drop").droppable({

                drop: function() {

                    $(this).find('p').html('Dropped!');

                }

            });

        }); 

    </script> 

    

      <style type="text/css"> 

        #drag  

        {  

            width:150px; 

            height:150px; 

            border:solid 2px #000; 

            padding:15px; 

            color:White; 

            font-weight:bold;

            background-color:Blue; 

        } 

        #drop 

        {  

            width:400px; 

            height:400px; 

            border:solid 2px #000; 

            padding:15px; 

            color:White; 

            font-weight:bold;

            background-color:Red; 

        } 

    </style> 

</head>

<body>

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

    <div id="drag"> 

        <p>Drag saya dunk !</p> 

    </div> 

     

    <div id="drop"> 

        <p>Drop ke saya</p> 

    </div>

    </form>

</body>

</html>

 

Tab Widget

Anda juga dapat menambahkan tab dengan menggunakan JQueryUI.

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

<head runat="server">

    <title>Membuat Tab</title>

    <link href="lib/themes/base/ui.all.css" rel="stylesheet" type="text/css" />

    

    <script src="lib/jquery-1.3.2.js" type="text/javascript"></script>

    <script src="lib/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>

    <script src="lib/ui/ui.core.js" type="text/javascript"></script>

    <script src="lib/ui/ui.tabs.js" type="text/javascript"></script>

    

    <script type="text/javascript">

        $(function() {

            $("#tabs").tabs();

        });

    </script>

    

</head>

<body>

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

    <div id="tabs">

    <ul>

        <li><a href="#tabs-1">Tab 1</a></li>

        <li><a href="#tabs-2">Tab 2</a></li>

        <li><a href="#tabs-3">Tab 3</a></li>

    </ul>

    <div id="tabs-1">

        <p>Bla bla bla bla bla</p>

    </div>

    <div id="tabs-2">

        <p>Bla bla bla bla…</p>

    </div>

    <div id="tabs-3">

        <p>bla bla bla</p>

    </div>

</div>

    </form>

</body>

</html>

 

Accordion Widget

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

<head runat="server">

    <title>Menggunakan Accordion</title>

    <link href="lib/themes/base/ui.all.css" rel="stylesheet" type="text/css" />

    

    <script src="lib/jquery-1.3.2.js" type="text/javascript"></script>

    <script src="lib/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>

    <script src="lib/ui/ui.core.js" type="text/javascript"></script>

    <script src="lib/ui/ui.accordion.js" type="text/javascript"></script>

    

    <script type="text/javascript">

    $(function() {

        $("#accordion").accordion();

    });

    </script>

</head>

<body>

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

    <div id="accordion">

    <h3><a href="#">Section 1</a></h3>

    <div>

        <p>

        JQuery adalah Open Source Javascript Framework atau Javascript Library yang membantu kita sebagai developer untuk bekerja dengan menggunakan javascript secara lebih mudah, cepat, dan efisien

        </p>

    </div>

    <h3><a href="#">Section 2</a></h3>

    <div>

        <p>

        JQuery adalah Open Source Javascript Framework atau Javascript Library yang membantu kita sebagai developer untuk bekerja dengan menggunakan javascript secara lebih mudah, cepat, dan efisien

        </p>

    </div>

    <h3><a href="#">Section 3</a></h3>

    <div>

        <p>

        JQuery adalah Open Source Javascript Framework atau Javascript Library yang membantu kita sebagai developer untuk bekerja dengan menggunakan javascript secara lebih mudah, cepat, dan efisien

        </p>

        <ul>

            <li>List item one</li>

            <li>List item two</li>

            <li>List item three</li>

        </ul>

    </div>

    <h3><a href="#">Section 4</a></h3>

    <div>

        <p>

        JQuery adalah Open Source Javascript Framework atau Javascript Library yang membantu kita sebagai developer untuk bekerja dengan menggunakan javascript secara lebih mudah, cepat, dan efisien

        </p>

        <p>

        JQuery adalah Open Source Javascript Framework atau Javascript Library yang membantu kita sebagai developer untuk bekerja dengan menggunakan javascript secara lebih mudah, cepat, dan efisien

        </p>

    </div>

</div>

</div>

    </form>

</body>

</html>

 

DatePicker Widget

DatePicker widget dapat digunakan untuk memilih tanggal yang diinginkan.

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

<head runat="server">

    <title>Menggunakan DatePicker Widget</title>

    <link href="lib/themes/base/ui.all.css" rel="stylesheet" type="text/css" />

    

    <script src="lib/jquery-1.3.2.js" type="text/javascript"></script>

    <script src="lib/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>

    <script src="lib/ui/ui.core.js" type="text/javascript"></script>

    <script src="lib/ui/ui.datepicker.js" type="text/javascript"></script>

    

    <script type="text/javascript">

        $(function() {

            $("#datepicker").datepicker();

        });

    </script>

</head>

<body>

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

    <div>

    <p>Date: <input type="text" id="datepicker"></p>

    </div>

    </form>

</body>

</html>

 

JQuery Plugin

Selain menggunakan JQueryUI anda juga dapat mendownload berbagai macam plugin yang dapat anda gunakan pada aplikasi anda tanpa harus membuat dari awal. Plugin yang disediakan dapat didownload dan digunakan secara gratis. Anda dapat mengunjungi alamat berikut untuk mendownload JQuery Plugin http://plugins.jquery.com/.

Menggunakan Form Validator Plugin

Anda juga dapat melakukan validasi untuk inputan dengan menggunakan salah satu plugin gratis yang disediakan oleh JQuery.

Untuk menggunakan validation plugin copykan folder ‘formValidator’ kedalam folder ‘lib’ pada website anda, kemudian tulis kode berikut.

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

<head runat="server">

    <title>Menggunakan Validation Plugin</title>

    <link href="lib/formValidator/css/template.css" rel="stylesheet" type="text/css" />

    <link href="lib/formValidator/css/validationEngine.jquery.css" rel="stylesheet" type="text/css" />

    

    <script src="lib/jquery-1.3.2.js" type="text/javascript"></script>

    <script src="lib/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>

 

    <script src="lib/formValidator/js/jquery.validationEngine-en.js" type="text/javascript"></script>

    <script src="lib/formValidator/js/jquery.validationEngine.js" type="text/javascript"></script>

 

    <script type="text/javascript">

        $(function() {

            $("#form1").validationEngine();

        });

    </script>

</head>

<body>

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

    <div>

    <h2>Menggunakan Validation Plugin</h2>

    <fieldset>

        <legend>User informations</legend>

                <label>

                    <span>First name</span>

                    <asp:TextBox  CssClass="validate[required,custom[onlyLetter],length[0,100]] text-input" ID="firstname" runat="server" />

                </label><br />

                <label>

                    <span>Last name</span>

                    <asp:TextBox  CssClass="validate[required,custom[onlyLetter],length[0,100]] text-input" ID="TextBox1" runat="server" />

                </label><br />

                <label>

                    <span>Date : (format YYYY-MM-DD)</span>

                    <asp:TextBox CssClass="validate[required,custom[date]] text-input" ID="date" runat="server" />

                </label><br />

                <label>

                    <span>Age : </span>

                    <asp:TextBox  CssClass="validate[required,custom[onlyNumber],length[0,3]] text-input" ID="age" runat="server" />

                </label><br />

                <label>

                    <span>Telephone : </span>

                    <asp:TextBox CssClass="validate[required,custom[telephone]] text-input" ID="telephone" runat="server" />

                </label><br />

               

    </fieldset>

    <fieldset>

                <legend>Password</legend>

                <label>

                    <span>Password : </span>

                    <asp:TextBox CssClass="validate[required,length[6,11]] text-input" ID="password" runat="server" />

                </label><br />

                <label>

                    <span>Confirm password : </span>

                    <asp:TextBox  CssClass="validate[required,confirm[password]] text-input" ID="password2" runat="server" />

                </label>

            </fieldset>

             <asp:Button ID="btnSubmit" runat="server" Text="Submit" />

    </div>

    </form>

</body>

</html>

Seri Tutorial : ASP.NET dengan JQuery (Part2)

Tutorial ini adalah sambungan dari Tutorial “ASP.NET dengan JQuery” : Part1

Pada Bagian yang kedua akan dibahas beberapa topik yaitu:

  • Mengambil nilai dari HTML Control
  • Menggunakan JQuery pada MasterPage
  • AJAX dengan JQuery pada Aplikasi ASP.NET

Mengambil nilai dari HTML Control dengan JQuery

1. Buat ‘web form’ baru dengan nama SimpleCalculator.aspx

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

<head runat="server">

    <title>Simple Calculator</title>

    <script src="lib/jquery-1.3.2.js" type="text/javascript"></script>

    <script src="lib/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>

    

    <script type="text/javascript" language="javascript">

        function Calculate() {

            var bil1 = $("#txtBil1").val();

            var bil2 = $("#txtBil2").val();

            var hasil = parseInt(bil1) + parseInt(bil2);

            alert("Hasilnya :" + hasil);

        }

 

        $(document).ready(function() {

            $("#btnProses").click(function() {

                Calculate();

            });

        });

    </script>

</head>

<body>

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

    <div>

        Bilangan 1 :<br />

        <asp:TextBox ID="txtBil1" runat="server"></asp:TextBox><br /><br />

        Bilangan 2 :<br />

        <asp:TextBox ID="txtBil2" runat="server"></asp:TextBox><br /><br />

        <asp:Button ID="btnProses" runat="server" Text="Proses" />

    </div>

    </form>

</body>

</html>

 

Menggunakan JQuery pada MasterPage

Jika anda pernah menggunakan ASP.NET Web Form, maka anda pasti pernah menggunakan Masster Page. Server Control yang terdapat pada Master Page ketika ditampilkan di browser maka nilai id-nya akan berbeda dengan nama id pada server control-nya.

Contoh anda memiliki server control yang ada dalam master page sebagai berikut:

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

  <asp:Label ID="lblNama" runat="server" Text="Erick Kurniawan" /><br />

  <asp:TextBox ID="txtNama" runat="server" Text="Erick Kurniawan" />

</asp:Content>

Sesudah diproses oleh server dan dikirimkan ke browser maka hasilnya:
<span id="ctl00_ContentPlaceHolder1_lblNama">Erick Kurniawan</span><br />

<input name="ctl00$ContentPlaceHolder1$txtNama" type="text" id="ctl00_ContentPlaceHolder1_txtNama" />

Dapat dilihat bahwa nilai id yang dihasilkan mendapatkan tambahan ‘ctl00_ContentPlaceHolder1_’ jika dibandingkan dengan nilai id pada server control. Untuk mengakses control yang ada dalam master page anda dapat menggunakan cara berikut:

<script type="text/javascript" language="javascript">

      var nama = $('#<%=txtNama.ClientID%>').val();

      alert("Nama anda :" + nama);

</script>

Menggunakan JQuery AJAX di ASP.NET

JQuery mendukung interaksi berbasis AJAX menggunakan JSON Communication. JSON (Javascript Object Notation) adalah format standar yang digunakan untuk pertukaran data pada AJAX. JQuery mendukung dua metode pengiriman data menggunakan GET dan POST.

Buat halaman dengan nama JqueryAjax.aspx, kemudian tulis kode berikut:

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

<head runat="server">

    <title>JQuery AJAX</title>

    <script src="lib/jquery-1.3.2.js" type="text/javascript"></script>

    <script src="lib/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>

    

    <script type="text/javascript">

        $(function() {

 

            $("#txtTiketGet").change(function() {

                $("#Error1").html("");

                var ticketsReq = $("#txtTiketGet").val();

                $.get("CekTiket.aspx", function(result) {

                    var ticketsavailable = parseInt(result);

                    if (ticketsReq > ticketsavailable) {

                        $("#Error1").html("Hanya " + ticketsavailable + " yang tersedia!");

                    }

                });

            });

 

 

            $("#txtTiketPOST").change(function() {

                $("#Error2").html("");

                var ticketsReq = $("#txtTiketPOST").val();

                $.post("CekTiketPOST.aspx", { TicReq: ticketsReq }, function(result) {

                    if (result != "") {

                        $("#Error2").html(result);

                    }

                });

            });

 

        });

    </script>

</head>

<body>

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

    <div>

    Waktu Load :<asp:Label ID="lblDate" runat="server"></asp:Label><br /><br />

    <strong>By GET</strong><br />

    Jumlah Pembelian Tiket :<asp:TextBox ID="txtTiketGet" runat="server"></asp:TextBox>

    <div id="Error1" style="color:Red;"></div> 

    </div>

    <br />

    <strong>By POST</strong><br />

    Jumlah Pembelian Tiket :<asp:TextBox ID="txtTiketPOST" runat="server"></asp:TextBox>

    <div id="Error2" style="color:Red;"></div> 

    </form>

</body>

</html>

Kemudian buat web form dengan nama CekTiket.aspx untuk menangani request menggunakan method GET. Tulis kode sebagai berikut:

protected void Page_Load(object sender, EventArgs e)

{

        int JmlTiket = 12;

        Response.Write(JmlTiket.ToString());

        Response.End();

}

Buat juga web form dengan nama CekTiketPOST.aspx untuk menangani request menggunakan method POST. Tulis kode sebagai berikut:

protected void Page_Load(object sender, EventArgs e)

{

        string ticReq = Request["TicReq"];

        int tics = int.Parse(ticReq);

        int jmlTiket = 5;

 

        if (tics > jmlTiket)

        {

            Response.Write("Hanya " + jmlTiket.ToString() + " yang tersedia!");

            Response.End();

        }

}

Pada tutorial selanjutnya kita akan membahas penggunaan JQuery UI (bersambung ke part3)..

Seri Tutorial : ASP.NET dengan JQuery (Part1)

Pada tutorial kali ini saya akan membahas integrasi Framework JQuery dengan ASP.NET Web Form. 

Apa itu Jquery ?

JQuery adalah Open Source Javascript Framework atau Javascript Library yang membantu kita sebagai developer untuk bekerja dengan menggunakan javascript secara lebih mudah, cepat, dan efisien. JQuery mempunyai semboyan yaitu ‘Write Less Do More’, maksudnya dengan mengunakan JQuery maka penulisan program akan menjadi lebih singkat daripada membuat javascript dari awal.

Bagaimana Menggunakan JQuery pada ASP.NET

Untuk menggunakan JQuery anda dapat mendownload Library JQuery pada http://jquery.com. Saat ini versi terbaru dari JQuery adalah 1.4. Ada 2 macam Library JQuery yang dapat didownload yaitu :

  • jquery-1.3.2.js: Library ini lebih ditujukan untuk fase development. File ini berisi kode javascipt yang tidak terkompres sehingga ukuran filenya lebih besar. Karena tidak terkompres maka lebih mudah bagi developer untuk membaca dan mempelajari fungsi-fungsi JQuery.
  • jquery-1.3.2.min.js : Library ini lebih ditujukan untuk fase production. Jadi library tipe ini sudah dicompile / dikompres sehingga ukurannya menjadi kecil, tapi sudah tidak bisa dibaca lagi.
  • Visual Studio 2008 SP1 juga mendukung ‘intellisense’ untuk mengetikan kode-kode JQuery untuk menambahkan fasilitas ini pada Visual Studio anda harus menambahkan file jquery-1.3.2-vsdoc2.js yang juga dapat anda downlod pada http://jquery.com.

 

Menggunakan JQuery Pertama Kali pada Visual Studio

1. Buat website baru dengan memilih File → New Website → ASP.NET Website, kemudian beri nama ‘LatihanJQuery1’.

2. Tambahkan folder ‘lib’ kedalam aplikasi anda, kemudian tambahkan pula library jquery-1.3.2.js dan jquery-1.3.2.min.js.

3. Tulis kode berikut pada tag <head> untuk menambahkan library JQuery:

<script src="lib/jquery-1.3.2.js" type="text/javascript"></script>

<script src="lib/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

4. Kemudian tambahkan definisi css pada tag <head>

<style type="text/css">

        .cobaClass {

            text-align:center;    

            color:Red; }

</style>

 

5. Tambahkan juga kode berikut pada tag <body> :

<div>old content</div>

<script type="text/javascript">

     jQuery('div').hide();

     jQuery('div').text('new content');

     jQuery('div').addClass("cobaClass");

     jQuery('div').show();

     //$('div').addClass("cobaClass");

</script>

 

6. JQuery juga dapat dituliskan menggunakan ‘chaining’ sehingga tidak perlu mengulang penulisan sintaks.

$('div').hide().text("New Content").addClass("cobaClass").show();

Fungsi $JQuery() atau $()

Fungsi $() merupakan bagian dari JQuery Core yang mempunyai beberapa kegunaan yaitu:

· Selector Elemen

· Menambahkan elemen secara ‘on-the-fly’

· Menggantikan fungsi $(document).ready();

Contoh untuk menambahkan elemen secara ‘on-the-fly’ pada DOM.

<head runat="server">

    <title>Latihan Selector</title>

    <script src="lib/jquery-1.3.2.js" type="text/javascript"></script>

    <script src="lib/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>

    <script type="text/javascript" language="javascript">

$(function() {

            $("<p style='color:blue;'>Hello World !!</p><br/>").appendTo("body");

            $("Masukan Nama :<input type='text' /><br/>").appendTo("p");

        });    

    </script>

</head>

<body>

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

    <div></div>

    </form>

</body>

 

Anda juga dapat menambahkan element kedalam DOM dengan mentrigger event yang disediakan pada control tertentu.

<head runat="server">

    <title>Menggunakan Selector 2</title>

    <script src="lib/jquery-1.3.2.js" type="text/javascript"></script>

    <script src="lib/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>

    <script type="text/javascript" language="javascript">

        function TambahKomentar() 

        {

            var komentar = $("#txtKomentar").val();

            $("<p>" + komentar + "</p><hr/>").insertAfter("h2");

            $("#txtKomentar").val("");

        }

 

        $(function() {

            $("#btnTambah").click(function() {

                TambahKomentar();

            })

        });

    </script>

</head>

<body>

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

    <div>

        Masukan Komentar Anda :<br />

        <asp:TextBox ID="txtKomentar" runat="server" />

        <input type="button" value="btnTambah" id="btnTambah" /> <br />

        <h2>Komentar</h2>

    </div>

    </form>

</body>

 
Bersambung ke tutorial selanjutnya..