Actual Training

Buku VB 2010

cepat mahir VB

Setelah menunggu selama kurang lebih 6 bulan akhirnya buku saya Visual Basic 2010 sudah bisa naik cetak, buku yang mempunyai tebal 300 halaman ini diterbitkan oleh Penerbit Andi.

Buku ini berisi konsep dasar dan berbagai fitur terbaru yang ada di VB 2010 dan Visual Studio 2010. Buku ini juga menyertakan Studi Kasus diakhir bab sehingga pembaca diharapkan dapat mengimplementasikan materi yang sudah dipelajari di bab-bab sebelumnya dalam sebuah aplikasi yang nyata.

Beberapa Fitur yang dibahas pada buku ini adalah :

  • Fitur baru VS 2010.
  • Object Oriented Programming (OOP).
  • Windows Form.
  • Error Handling.
  • ADO.NET
  • LINQ (Language Integrated Query)
  • Entity Framework .
  • Report.
  • Studi Kasus (Simple POS).
Actual Training

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

Actual Training

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 VB → Silverlight for Windows Phone → Windows 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 References → Add 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

Actual Training

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

Actual Training

Windows Phone 7 Tutorial (VB) Part 1

Windows Phone 7 versi RTM sudah dirilis untuk ikut meramaikan pasar persaingan mobile phone yang saat ini didominasi oleh IPhone dan Android. Untuk para developer yang tertarik untuk mencoba mengembangkan aplikasi pada platform yang baru ini dapat mendownload developer tools versi RTM pada alamat : http://developer.windowsphone.com/.

Pada versi beta sebelumnya pembuatan aplikasi dengan Windows Phone hanya dapat menggunakan bahasa C# saja, namun pada tanggal 23 sept 2010 MS telah merilis versi VB dari Windows Phone 7 (Microsoft Visual Basic CTP for Windows Phone Developer Tools) ini merupakan berita yang sangat menggembirakan bagi VB developer yang sempat merasa frustasi dan dianak tirikan karena ada rumor yang mengatakan bahwa WP7 tidak mendukung bahasa VB. Ini juga merupakan bukti dari janji MS untuk menjadikan VB dan C# equal (co-evolution strategy). Anda dapat mendownload VB CTP for Windows Phone Developer tools di sini.

Pada tutorial berseri ini saya akan mencoba membuat beberapa contoh aplikasi WP7 menggunakan VB (kecuali XNA, karena saat ini VB belum mendukung aplikasi XNA di WP7). Tutorial kali ini berupa Hands On Labs yang dapat langsung dicoba untuk dibuat . 

Topik yang akan dibahas pada tutorial kali ini adalah :

  • Hello Windows Phone 7.
  • Aplikasi Silverlight dengan WP7.
  • REST Services dengan WP7.
  • WCF RIA Services dengan WP7.

Hello Windows Phone 7

Untuk membuat aplikasi menggunakan WP7 anda dapat mendownload Visual Studio Express for Windows Phone atau jika anda sudah memiliki VS 2010 Ultimate anda dapat menginstal developer tools. Anda dapat menjalankan aplikasi yang anda buat pada device emulator yang sudah disediakan. Pada tutorial dibawah ini saya menggunakan VS 2010 Ultimate.

Pada WP7 anda dapat membuat 2 macam aplikasi dengan platform yang berbeda yaitu Silverlight dan XNA. Silverlight digunakan untuk membuat kebanyakan aplikasi pada WP7 sedangkan XNA hanya dikhususkan untuk pembuatan aplikasi game.

Lab 1 (Membuat Aplikasi di WP7)

    • Buka Visual Studio 2010, anda dapat memilih VB atau C# (misal pada contoh dibawah ini saya memilih bahasa VB).
    • Pilih File – New Project – Silverlight for Windows Phone – Windows Phone Application – beri nama HelloWP7.

image

  • Pada solution explorer perhatikan file yang digenerate oleh Visual Studio.
    image
  • Penjelasan dari file-file tersebut adalah:

Item

Deskripsi

App.xaml / App.xaml.vb

Mendefinisikan entry point dari aplikasi, inisialisasi resources, dan mendefiniskan style dari user interface.

MainPage.xaml / MainPage.xaml.vb

Halaman utama yang berisi desain aplikasi.

ApplicationIcon.png

Icon untuk program yang anda buat yang akan ditampilkan pada application list.

Background.png

Icon yang ditampilkan di awal pada saat program dijalankan pertama kali.

MyProject\AppManifest.xml

Manifest file yang dibutuhkan untuk menggenerate application package.

MyProject\AssemblyInfo.vb

Mengandung nama dan versi metadata yang di embed pada general assembly.

MyProject\WMAppManifest.xml

Manifest file yang mengandung metadata spesifik yang berhubungan dengan Windows Phone Silverlight application, termasuk fitur spesifik yang hanya ada di Silverlight untuk Windows Phone

References folder

Berisi list library (assembly) yang menyediakan services dan functionality yang dibutuhkan untuk menjalankan aplikasi.
    • Secara default halaman yang akan dijalankan pertama kali adalah MainPage.xaml.
    • Double-click pada halaman MainPage.xaml pada Solution Explorer. Secara default anda dapat melihat tampilan design Windows Phone disisi kiri. Anda dapat menambahkan elemen baru seperti tombol, textbox dengan cara drag n drop kedalam tampilan design atau anda juga dapat menambahkan manual dengan mengetikan kode XAML.

image

    • Pada tampilan XAML cari Grid container dengan nama LayoutRoot. Jika anda pernah belajar layout menggunakan bahasa XAML di Silverlight atau WPF anda pasti familiar dengan kode berikut :
    <Grid x:Name="LayoutRoot" Background="Transparent">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
        </Grid>

    • Pada tag TitleGrid yang ada didalam LayoutRoot ubah teks yang akan ditampilkan sebagai title dan judul halaman dari aplikasi yang anda buat:
    <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="Hello WP7" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
    </StackPanel>

  • Dibawah ContentGrid tambahkan sebuah Grid lagi untuk menampilkan textblock yang akan berisi teks yang akan anda inputkan pada textbox diatas.
<Grid x:Name="ContentGrid" Grid.Row="1">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <TextBox Grid.Column="0" FontSize="{StaticResource PhoneFontSizeExtraLarge}" Name="txtMessage" Margin="20,20,10,20" />
    <Button Grid.Column="1" Name="btnClick" Content="Click Me" HorizontalAlignment="Right" Margin="10,20,20,20" Padding="4" Click="btnClick_Click" />
</Grid>

<Grid Grid.Row="2">
    <TextBlock Name="tbMessage" Style="{StaticResource PhoneTextNormalStyle}"
               Foreground="Orange" HorizontalAlignment="Stretch" TextWrapping="Wrap"
               TextAlignment="Center" FontWeight="Bold" />
</Grid>

    • Pada tampilan design, double-click pada button btnClick untuk menambahkan event handler. Maka otomatis Visual Studio akan menambahkan deklarasi event tersebut pada tag button.

image

  • Tulis kode berikut untuk menambahkan kode pada event click.
    Private Sub btnClick_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
        tbMessage.Text = txtMessage.Text
        txtMessage.Text = String.Empty
    End Sub

    • Sebelum menjalankan aplikasi anda dapat memilih target deployment dari aplikasi anda. Ada dua pilihan yaitu Windows Phone Emulator atau Windows Phone Device.

image

    • Jalankan aplikasi anda dengan menekan tombol F5. Maka Visual Studio akan memanggil Emulator menjalankan aplikasi anda.

image

    • Untuk menggunakan pc keyboard pada emulator anda dapat menekan tombol Pause/Break.
    • Jika anda ingin melakukan modifikasi aplikasi anda pada Visual Studio, anda tidak perlu untuk menutup emulator. Cukup modifikasi kemudian klik F5 lagi untuk mendeploy aplikasi yang baru.

Lab 2 (Menambahkan Halaman Error pada Aplikasi WP7)

Untuk menangkap error yang terjadi dan menampilkan error tersebut di halaman error anda dapat menambahkan kode berikut pada aplikasi anda.

    • Buka Project HelloWP 7 yang sudah anda buat sebelumnya.
    • Klik kanan pada project HelloWP7 → Add → New Item → pilih template Windows Phone Potrait Page beri nama ErrorPage.xaml

image

    • Tambahkan kode pada ErrorPage.xaml berikut
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!–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="tbTitle" Text="Windows Phone 7" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="tbErrorTitle" Text="Error Page" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>
        <!–ContentPanel – place additional content here–>
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Border BorderBrush="White">
                <TextBlock x:Name="tbError" TextWrapping="Wrap" Style="{StaticResource PhoneTextSmallStyle}"/>
            </Border>
        </Grid>
    </Grid>

    • Tekan F7 untuk membuka tampilan View Code, kemudian tambahkan kode berikut untuk menampilkan error:
Partial Public Class ErrorPage
    Inherits PhoneApplicationPage

    Public Shared Exception As Exception

    Public Sub New()
        InitializeComponent()
    End Sub

    Protected Overrides Sub OnNavigatedTo(ByVal e As System.Windows.Navigation.NavigationEventArgs)
        tbError.Text = Exception.ToString
    End Sub
End Class

    • Pada Solution Explorer klik kanan pada App.xaml dan pilih View Code.
    • Cari event Application_UnhandledException kemudian tambahkan kode berikut:
    Public Sub Application_UnhandledException(ByVal sender As Object, ByVal e As ApplicationUnhandledExceptionEventArgs) Handles Me.UnhandledException

        ' Show graphics profiling information while debugging.
        If Diagnostics.Debugger.IsAttached Then
            Diagnostics.Debugger.Break()
        Else
            e.Handled = True
            ErrorPage.Exception = e.ExceptionObject
            CType(RootVisual, PhoneApplicationFrame).Source = New Uri("/ErrorPage.xaml", UriKind.Relative)
        End If
    End Sub

    • Dengan menuliskan kode diatas maka jika terjadi kesalahan diluar eksepsi yang kita sediakan maka pesan kesalahan tersebut akan ditampilkan di halaman ErrorPage.xaml.
    • Tambahkan kode berikut pada event ButtonClick_Click di MainPage.xaml.
    Private Sub btnClick_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
        tbMessage.Text = txtMessage.Text
        'txtMessage.Text = String.Empty

        'kode yang menghasilkan pesan error
        Dim bil = 10 / CDbl(txtMessage.Text)
        tbMessage.Text = "Hasil : " & bil.ToString
    End Sub

    • Tekan Ctrl+F5 untuk menjalankan program tanpa proses debugging. Kemudian masukan nilai string kedalam textbox agar terjadi kesalahan akibat FormatException. Maka pesan kesalahan tersebut akan ditampilkan kedalam halaman ErrorPage.xaml.

image

Selamat mencoba, happy coding guys !

bersambung ke part 2….

Actual Training

ASP.NET Tips: Menambahkan Validasi Pada Saat Insert/Update Data (LinqDataSource)

Tips ini dibuat berdasarkan request dari Intan purnama sari yang bertanya bagaimana cara menambahkan validasi ketika proses insert/update misal: data sudah ada atau data yang akan ditambahkan ke database tidak boleh bernilai kosong (menggunakan LinqDataSource).

1. Buat Web Form dengan nama ValidasiInsert.aspx, kemudian tambahkan LinqDataSource dan DetailsView

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Valdiasi Insert</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:LinqDataSource ID="ldsKategori" runat="server" 
            ContextTypeName="MhsDataClassesDataContext" EnableInsert="True" 
            EntityTypeName="" oninserting="ldsKategori_Inserting" TableName="Kategoris">
        </asp:LinqDataSource>
        <asp:DetailsView ID="dvKategori" runat="server" Height="50px" 
            AutoGenerateRows="False" DataKeyNames="id_kat" DataSourceID="ldsKategori" 
            DefaultMode="Insert">
            <Fields>
                <asp:BoundField DataField="id_kat" HeaderText="id_kat" InsertVisible="False" 
                    ReadOnly="True" SortExpression="id_kat" />
                <asp:BoundField DataField="nama_kat" HeaderText="Nama Kategori" 
                    SortExpression="nama_kat" />
                <asp:CommandField ShowInsertButton="True" />
            </Fields>
        </asp:DetailsView>
        <br />
        <asp:Label ID="lblError" runat="server" ForeColor="Red" />
    </div>
    </form>
</body>
</html>

2. Tambahkan Kode pada event ldsKategori_Inserting untuk mengecek inputan pada saat perintah insert akan dijalankan.

 private MhsDataClassesDataContext db = new MhsDataClassesDataContext();
    protected void ldsKategori_Inserting(object sender, LinqDataSourceInsertEventArgs e)
    {

        //cek apakah data kosong atau tidak ditambahkan
        var objKategori = (Kategori)e.NewObject;
        if (string.IsNullOrEmpty(objKategori.nama_kat))
        {
            lblError.Text = "Nama Kategori harus diisi !";
            e.Cancel = true;
        }

        //cek apakah kategori sudah ada
        var cekKategori = (from k in db.Kategoris
                           where k.nama_kat == objKategori.nama_kat
                           select k.nama_kat).FirstOrDefault<string>();
        if (!string.IsNullOrEmpty(cekKategori))
        {
            lblError.Text = "Nama Kategori Sudah Ada..";
            e.Cancel = true;
        }
    }

image

Anda dapat mendownload contoh aplikasi diatas donwload disini.

Actual Training

ASP.NET Tips: Menambahkan Konfirmasi Delete Pada GridView

Tips ini dibuat berdasarkan request dari Intan purnama sari yang bertanya bagaimana cara menambahkan Konfirmasi ketika tombol delete pada GridView dipilih.

Untuk menambahkan konfirmasi delete pada GridView anda dapat membuat custom class yang mengoverride ButtonField yang ada pada GridView.

  1. Tambahkan Class dengan nama DeleteButton.cs pada web aplikasi anda. Buat class ini dalam namespace MyControl. tulis kode berikut: 
   1: using System;

   2: using System.Collections.Generic;

   3: using System.Linq;

   4: using System.Web;

   5: using System.Web.UI.WebControls;

   6:  

   7: /// <summary>

   8: /// Summary description for DeleteButton

   9: /// </summary>

  10:  

  11: namespace MyControl

  12: {

  13:     public class DeleteButton : ButtonField

  14:     {

  15:         private string confirmText = "Hapus Record Ini ?";

  16:         public string ConfirmText

  17:         {

  18:             get { return confirmText; }

  19:             set { confirmText = value; }

  20:         }

  21:  

  22:         public DeleteButton()

  23:         {

  24:             this.CommandName = "Delete";

  25:             this.Text = "Delete";

  26:         }

  27:  

  28:         public override void InitializeCell(DataControlFieldCell cell, DataControlCellType cellType, DataControlRowState rowState, int rowIndex)

  29:         {

  30:             base.InitializeCell(cell, cellType, rowState, rowIndex);

  31:             if (cellType == DataControlCellType.DataCell)

  32:             {

  33:                 WebControl button = (WebControl)cell.Controls[0];

  34:                 button.Attributes["onclick"] = string.Format("return confirm('{0}')", confirmText);

  35:             }

  36:         }

  37:  

  38:     }

  39: }

2.Kemudian anda dapat menambahkan custom control yang sudah dibuat kedalam GridView. Buat Web Form dengan nama KonfirmasiDelete.aspx. tulis kode berikut:

   1: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="KonfirmasiDelete.aspx.cs" Inherits="KonfirmasiDelete" %>

   2: <%@ Register TagPrefix="custom" Namespace="MyControl" %>

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

   4:  

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

   6: <head runat="server">

   7:     <title>Konfirmasi Delete</title>

   8: </head>

   9: <body>

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

  11:     <div>

  12:         <asp:LinqDataSource ID="ldsKategori" runat="server" 

  13:             ContextTypeName="MhsDataClassesDataContext" EnableDelete="True" 

  14:             EnableInsert="True" EnableUpdate="True" EntityTypeName="" TableName="Kategoris">

  15:         </asp:LinqDataSource>

  16:         <asp:GridView ID="gvKategori" runat="server" AutoGenerateColumns="False" 

  17:             DataKeyNames="id_kat" DataSourceID="ldsKategori">

  18:             <Columns>

  19:                

  20:                 <asp:BoundField DataField="id_kat" HeaderText="id_kat" InsertVisible="False" 

  21:                     ReadOnly="True" SortExpression="id_kat" />

  22:                 <asp:BoundField DataField="nama_kat" HeaderText="nama_kat" 

  23:                     SortExpression="nama_kat" />

  24:                  <custom:DeleteButton ConfirmText="Apakah anda yakin akan mendelete record ini?" />

  25:             </Columns>

  26:         </asp:GridView>

  27:     </div>

  28:     </form>

  29: </body>

  30: </html>

3.Jalankan aplikasi diatas, maka ketika anda mendelete data akan muncul konfirmasi delete.

image

Anda dapat mendownload sample code diatas, download disini

Actual Training

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 ^_^