Training ASP.NET Web API dan Android

Pada tanggal 12-17 januari 2015 telah diselenggarakan pelatihan inhouse dengan materi ASP.NET Web API dan Android. Peserta pelatihan ini adalah PT.Sanata System yang merupakan software house yang fokus pada pengembangan aplikasi untuk sistem informasi rumah sakit.

Pelatihan ini membahas bagaimana cara mengembangkan REST web services sebagai backend dan kemudian diakses oleh beberapa client yang berbeda seperti aplikasi Desktop, Web, dan aplikasi Mobile berbasis Android.

20150112_14314520150116_170605

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

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 → AddNew 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….

ASP.NET MVC Hands On Labs (Part4 – JQuery)

Tutorial ini adalah sambungan dari Hands On Labs ASP.NET MVC Part1, Part2, Part3

JQuery adalah javascript framework yang saat ini paling popular dan banyak digunakan, karena selain penggunaannya yang relatif mudah JQuery juga menyediakan plugin yang sangat banyak dan dapat digunakan secara “free”. JQuery juga disupport oleh komunitas yang sangat besar dan aktif.
JQuery scara default sudah ditambahkan kedalam ASP.NET MVC Project, letaknya didalam folder “script”.

image 

Saat ini JQuery sudah mencapai versi 1.4, anda dapat mendownload JQuery Plugin di http://jquery.com/plugin/ untuk mendownload plugin-plugin yang disediakan.
Pada contoh kali ini kit akan menggunakan salah satu plugin dari JQuery yaitu “JQuery UI Calendar” untuk menambahkan date picker calendar kedalam program ASP.NET MVC diatas. Pada HOL ini kita menggunakan JQuery 1.3.2.

1.  Untuk menambahkan JQuery UI tambahkan library berikut pada folder “script”

image

2.  Kemudian tambahkan pula css dan image pada folder “content” 

image

3.  Kemudian buat “Partial View”. Partial View adalah bagian View yang dapat digunakan pada View yang lain (mirip Web User Control pada Web Form).
4.  Klik kanan pada folder “Home” didalam folder “Views”. Pilih “Add View” – check “Create Partial View (.ascx)” beri nama “VUCDateTime.ascx”. tulis kode berikut:

<link href="../../Content/smoothness/ui.all.css" rel="stylesheet" 

type="text/css" /> 

    <script src="../../Scripts/jquery-1.3.2.min.js" 

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

    <script src="../../Scripts/jqueryUI/ui.core.js" 

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

    <script src="../../Scripts/jqueryUI/ui.datepicker.js" 

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

    <script type="text/javascript"> 

        $(document).ready(function() { 

            $("#BuyDate").datepicker({ 

                showOn: 'button', 

                buttonImage: '../../Content/calendar.gif', 

                buttonImageOnly: true 

            }); 

        }); 

    </script> 

5.  Kode diatas berisi kode JQuery yang digunakan untuk menampilkan date picker.

6.  Tambahkan Partial View yang sudah dibuat kedalam  View Create dan View Edit.

<% Html.RenderPartial("VUCDateTime"); %> 

7.  Maka ketika anda menjalankan Create atau Edit View anda dapat menggunakan date picker yang sudah anda buat.

image 

Sekian tutorial dari saya, semoga dapat membantu teman-teman yang ingin mencoba menggunakan framework ASP.NET MVC

ASP.NET MVC Hands On Labs (Part3 – Membuat View)

Tutorial ini adalah sambungan dari Hands On Labs ASP.NET MVC Part1, Part2

Membuat View

View Berisi HTML Markup dan View Logic, digunakan untuk menampilkan isi dari Model.

View Index

1.  Pertama kita akan membuat View yang digunakan untuk menampilkan seluruh Product kedalam table. View ini akan dijalankan pertama kali ketika kita menjalankan aplikasi

2.  Anda dapat membuat View dengan cara manual tapi dengan editor VS 2008 anda dapat menggunakan fitur yang mirip “scaffold” untuk membuat View dengan cara cepat.

3.  Masuk ke halaman Controller, kemudian klik kanan di bagian ActionResult “Index” – pilih “Add View”

image

4.  Pada tampilan “Add View”, View name akan secara otomatis sesuai dengan nama ActionResult di Controllernya, check pada “Create a strongly typed view” kemudian pilih “ComputerStore.Models.Product”. Pada View Content pilih “Details”, jangan lupa juga untuk check pada pilihan “Select Master Page” untuk menggunakan Master Page yang sudah tersedia.

image

5.  Maka secara otomatis Visual Studio akan mengcreate View berdasarkan Model yang anda gunakan.

<h2>Product Details</h2>

    <table>

        <tr>

            <th></th>

            <th>Id</th>

            <th>Name</th>

            <th>Description</th>

            <th>Price</th>

            <th>Qty</th>

            <th>BuyDate</th>

        </tr>

 

    <% foreach (var item in Model) { %>

    

        <tr>

            <td>

                <%= Html.ActionLink("Edit", "Edit", new { id = item.Id })%> |

                <%= Html.ActionLink("Delete", "Delete", new { id = item.Id })%>

            </td>

            <td>

                <%= Html.Encode(item.Id) %>

            </td>

            <td>

                <%= Html.Encode(item.Name) %>

            </td>

            <td>

                <%= Html.Encode(item.Description) %>

            </td>

            <td>

                <%= Html.Encode(String.Format("{0:F}", item.Price)) %>

            </td>

            <td>

                <%= Html.Encode(item.Qty) %>

            </td>

            <td>

                <%= Html.Encode(String.Format("{0:d}", item.BuyDate)) %>

            </td>

        </tr>

    <% } %>

    </table>

    <p>

        <%= Html.ActionLink("Create New", "Create") %>

    </p>

6.  Jika program dijalankan maka di halaman pertama “Home/Index” akan ditampilkan list Product sebagai berikut.

image

View Create

1.  Sekarang kita akan membuat View untuk Create / Insert data, caranya sama dengan cara yang sudah kita lakukan untuk membuat Index View diatas.

2.  Masuk ke HomeController.cs, Klik kanan pada ActionResult “Create” – kemudian pilih ‘Add View’ – check “Create a strongly-typed view” – pada View Content pilih “Create”.

image

3.  Maka secara otomatis VS akan membuatkan View yang berisi form untuk insert data Product, beserta validasinya.

<h2>Insert Product</h2>

 

    <%= Html.ValidationSummary("Create was unsuccessful. Please correct the errors and try again.") %>

 

    <% using (Html.BeginForm()) {%>

 

        <fieldset>

            <legend>Product Fields</legend>

            <p>

                <label for="Name">Name:</label>

                <%= Html.TextBox("Name") %>

                <%= Html.ValidationMessage("Name", "*") %>

            </p>

            <p>

                <label for="Description">Description:</label>

                <%= Html.TextArea("Description") %>

                <%= Html.ValidationMessage("Description", "*") %>

            </p>

            <p>

                <label for="Price">Price:</label>

                <%= Html.TextBox("Price") %>

                <%= Html.ValidationMessage("Price", "*") %>

            </p>

            <p>

                <label for="Qty">Qty:</label>

                <%= Html.TextBox("Qty") %>

                <%= Html.ValidationMessage("Qty", "*") %>

            </p>

            <p>

                <label for="BuyDate">BuyDate:</label>

                <%= Html.TextBox("BuyDate") %>

                <%= Html.ValidationMessage("BuyDate", "*") %>

            </p>

            <p>

                <input type="submit" value="Create" />

            </p>

        </fieldset>

 

    <% } %>

 

    <div>

        <%=Html.ActionLink("Back to List", "Index") %>

    </div>

image

 

View Edit

1.  Langkah selanjutnya buat View untuk menangani Edit data Product. 
2.  Masuk ke HomeController.cs, kemudian klik kanan pada ActionResult “Edit” – pilih “Add View” – check pada “Create a strongly-typed view” – pada  View Content pilih “Edit”.

image

3.  Secara otomatis Visual Studio akan membuatkan Form untuk edit data pada View Edit.

<h2>Edit Product</h2>

 

   <%= Html.ValidationSummary("Edit was unsuccessful. Please correct the errors and try again.") %>

 

   <% using (Html.BeginForm()) {%>

 

       <fieldset>

           <legend>Product Fields</legend>

           <p>

               <label for="Id">Id:</label>

               <%= Html.TextBox("Id", Model.Id, new { @readonly="true" })%>

               <%= Html.ValidationMessage("Id", "*") %>

           </p>

           <p>

               <label for="Name">Name:</label>

               <%= Html.TextBox("Name", Model.Name) %>

               <%= Html.ValidationMessage("Name", "*") %>

           </p>

           <p>

               <label for="Description">Description:</label>

               <%= Html.TextBox("Description", Model.Description) %>

               <%= Html.ValidationMessage("Description", "*") %>

           </p>

           <p>

               <label for="Price">Price:</label>

               <%= Html.TextBox("Price", String.Format("{0:F}", Model.Price)) %>

               <%= Html.ValidationMessage("Price", "*") %>

           </p>

           <p>

               <label for="Qty">Qty:</label>

               <%= Html.TextBox("Qty", Model.Qty) %>

               <%= Html.ValidationMessage("Qty", "*") %>

           </p>

           <p>

               <label for="BuyDate">BuyDate:</label>

               <%= Html.TextBox("BuyDate", String.Format("{0:d}", Model.BuyDate)) %>

               <%= Html.ValidationMessage("BuyDate", "*") %>

           </p>

           <p>

               <input type="submit" value="Save" />

           </p>

       </fieldset>

 

   <% } %>

 

   <div>

       <%=Html.ActionLink("Back to List", "Index") %>

   </div>

image

View Delete

1.  Terakhir buat View untuk menangani proses Delete data.

2.  Masuk ke HomeController.cs, klik kana pada ActionResult “Delete” – pilih “Add View” – kemudian check “Create a strongly-typed view” – pada View Content pilih “Empty”.

image

3.  Tuliskan kode berikut pada Delete View.

<h2>Delete Confirmation</h2>

    <div> 

       <p>Please confirm you want to deleted Product :  

       <i> <%=Html.Encode(Model.Name) %>? </i> </p> 

   </div> 

    

   <% using (Html.BeginForm()) { %> 

       <input name="confirmButton" type="submit" value="Delete" />         

   <% } %> 

4.  Kemudian buat juga Deleted View untuk menampilkan konfirmasi bahwa data sudah berhasil didelete.

<h2>Product Deleted</h2>

   <div> 

       <p>Your product was successfully deleted.</p> 

   </div> 

   <div> 

       <p><a href="/Home">Click for view Product</a></p> 

   </div>

image

Tutorial selanjutnya adalah menambahkan JQuery kedalam aplikasi ASP.NET MVC

Fitur VB9 (LINQ Query)

Halo ini adalah posting kesepuluh saya tentang fitur dari VB9
tentang LINQ Query. LINQ (Language Integrated Query) adalah fitur yang
mensupport sintaks query pada general purpose programming language,
anda dapat melakukan query ke berbagai sumber data seperti object,
Database, XML, dll. Mungkin anda sudah sering melihat kode-kode LINQ di
C#, nah kali ini saya akan mencoba mencontohkan versi VB-nya :)

anda dapat melihat posting saya sebelumnya:

LINQ to Object / LINQ to Memory

Misal anda akan mengambil data dari object Array, anda dapat menuliskan kode:

Dim nilai() = {12, 34, 56, 11, 45, 66}
Dim query = From n In nilai _
            Where n Mod 2 = 0 _
            Select n
For Each bil In query
    Console.WriteLine(bil)
Next

query diatas akan mengembalikan bilangan yang genap, anda dapat menuliskannya dalam bentuk Lambda sebagai berikut:

Dim query = nilai.Where(Function(x) x Mod 2 = 0).Select(Function(x) x)
For Each bil In query
    Console.WriteLine(bil)
Next

Object yang dapat diquery dengan LINQ harus bertipe IEnumerable(Of
T), Select() dan Where() adalah Extension Method yang ditambahkan ke
IEnumerable(Of T), asal dari Select() dan Where() sebenarnya dari
System.Linq.Enumerable, aslinya anda dapat menuliskan:

Dim query = Enumerable.Select(Enumerable.Where(nilai, Function(x) x Mod 2 = 0), Function(x) x)
For Each bil In query
    Console.WriteLine(bil)
Next

LINQ to SQL

Selain query ke object, anda dapat juga melakukan query ke database
SQL Server, menggunakan OR Mapping tools yang bernama LINQ to SQL. ORM
digunakan untuk mapping dari database relational ke object. Misal anda
mempunyai database dengan nama MhsDb, kemudian dalam database tersebut
terdapat satu table dengan nama Mahasiswa dan fields berikut (nim
char(8) primary key, nama varchar(50), dan ipk float).

Pertama buat class dengan nama Mahasiswa.vb, kemudian mapping table Mahasiswa kedalam class:

Imports System.Data.Linq.Mapping
<Table(Name:="dbo.Mahasiswa")> _
Public Class Mahasiswa
    Private _nim As String
    <Column(IsPrimaryKey:=True)> _
    Public Property Nim() As String
        Get
            Return _nim
        End Get
        Set(ByVal value As String)
            _nim = value
        End Set
    End Property

    Private _nama As String
    <Column()> _
    Public Property Nama() As String
        Get
            Return _nama
        End Get
        Set(ByVal value As String)
            _nama = value
        End Set
    End Property

    Private _ipk As Single
    <Column()> _
    Public Property Ipk() As Double
        Get
            Return _ipk
        End Get
        Set(ByVal value As Double)
            _ipk = value
        End Set
    End Property
End Class

Anda dapat juga melakukan mapping secara otomatis menggunakan fasilitas “LINQ to SQL Class” atau “SQL Metal”.

Untuk mengakses data menggunakan LINQ to SQL kita harus membuat
object DataContext terlebih dahulu, kemudian ambil table yang akan kita
query

Imports System.Data
Imports System.Linq
Imports System.Data.Linq

Sub Main()

        Dim strConn = "Data Source=.\SQLEXPRESS;Integrated Security=SSPI;Initial Catalog=MhsDb;"
        Dim db As New DataContext(strConn)
        Dim tMahasiswa = db.GetTable(Of Mahasiswa)()

        Dim query = From m In tMahasiswa _
                    Select m

        For Each mhs In query
            Console.WriteLine(mhs.Nim & " " & mhs.Nama & " " & mhs.Ipk)
        Next
End Sub

LINQ Query Operator

Beberapa operator LINQ yang dapat digunakan adalah:

From : source dari query yang akan digunakan

From <tampung> [As<type>] In <source>

  • tampung berisi variable tampung yang akan digunakan dalam query
  • type berisi tipe data dari tampung (tapi tidak harus
    disebutkan karena vb akan secara otomatis menggunakan local type
    inference untuk menentukan tipenya). biasanya dapat berupa
    IEnumerable(Of T) atau IQueryable(Of T)
  • source berisi referensi ke object source, dapat berupa in-memory collection atau IQueryable(Of T) object

Select : mendefinisikan projection clause dalam query

Select <projection>

  • projection dapat berisi expression yang mengembalikan satu object,
    dapat juga berupa tampung dari From clause, atau object yang lebih
    kompleks.

[alias = ] <column>

  • anda juga dapat mendefinisikan alias (sifatnya optional),
    mengindikasikan nama dari property yang akan digenerate oleh anonymous
    type yang mewakili projection.
  • column mengacu ke fields atau property pada tampung, tapi dapat juga berupa expression yang lebih kompleks

Contoh:

'mencetak 9 8 7 6 5 4
Dim bil = From i In New Integer() {9, 8, 7, 6, 5, 4} Select i
For Each i In bil
    Console.WriteLine(i)
Next

'menghasilkan anonymous type {Dobel=2,Tripel=3},{Dobel=4,Tripel=6}
Dim bil2 = From i In New Integer() {1, 2} Select Dobel = 2 * i, Tripel = 3 * i
For Each i In bil2
    Console.WriteLine(i.Dobel & " " & i.Tripel)
Next

Order By : digunakan untuk mengurutkan hasil query

Order By <ordering> [Ascending] [Descending]

  • ordering berisi expression key yang digunakan untuk proses pengurutan

Contoh:

Dim mhs() = {New With {.Nim = "22081234", .IPK = 3.2}, _
             New With {.Nim = "23081235", .IPK = 3.5}, _
             New With {.Nim = "23081231", .IPK = 2.5}}
Dim query = From m In mhs Order By m.Nim Acending Order By m.IPK Select m.Nim, m.IPK
For Each m In query
    Console.WriteLine(m.Nim & " " & m.IPK)
Next

Distinct : melakukan filter terhadap nilai yang terduplikasi dari query

Contoh:

'menghasilkan 1 2 3 4
Dim bil = From i In New Integer() {1, 1, 1, 2, 3, 4} Select i Distinct
For Each b In bil
   Console.Write(b & " ")
Next

Skip dan Take: untuk memfilter range dari nilai hasil query

Take<number> : poisisi
Skip <number> : banyak nilai yang diambil

Contoh:

'menghasilkan 5,6 (ambil dari posisi ke 4 sebanyak 2 nilai)
Dim bil = From i In New Integer() {1, 2, 3, 4, 5, 6, 7, 8, 9, 10} _
          Select i Skip (4) Take (2)
For Each b In bil
    Console.Write(b & " ")
Next

Aggregate : digunakan untuk operasi aggregation, contoh agregation

  • Count
  • Sum
  • Min
  • Max
  • Average

Aggregate <tampung> In <source> Into <aggregation list>

Contoh:

'penggunaan Sum
Dim tot = Aggregate i In (From i In New Integer() {1, 2, 3, 4, 5, 6} Select i) Into Total = Sum()
Console.WriteLine(tot)
'penggunaan Count
Dim jml = Aggregate i In (From i In New Integer() {1, 2, 3, 4, 5, 6} Select i) Into Jumlah = Count()
Console.WriteLine(jml)
'penggunaan Min
Dim min = Aggregate i In (From i In New Integer() {1, 2, 3, 4, 5, 6} Select i) Into Minimal = Min()
Console.WriteLine(min)
'penggunaan Average
Dim rata = Aggregate i In (From i In New Integer() {1, 2, 3, 4, 5, 6} Select i) Into Minimal = Average()
Console.WriteLine(rata)

Grouping : digunakan untuk membuat group berdasarkan group expression yang dibuat

Group By <key> Into Aggregate

Contoh:

Dim mhs() = {New With {.Nim = "22081234", .Jurusan = "TI", .IPK = 3.2}, _
             New With {.Nim = "23081235", .Jurusan = "SI", .IPK = 3.5}, _
             New With {.Nim = "23081231", .Jurusan = "SI", .IPK = 2.5}}
Dim query = From m In mhs Group By m.Jurusan Into Anggota = Group
For Each jur In query
   Console.WriteLine(jur.Jurusan)
   For Each m In jur.Anggota
       Console.WriteLine("- NIM :" & m.Nim & " IPK :" & m.IPK)
   Next
Next

Join : menggabungkan multiple source bersama berdasarkan kondisi join tertentu

Join <tampung> In <source> On <key1> equals <key2> and ….

Dim mhs() = {New With {.Nim = "22081234", .Jurusan = "TI", .IPK = 3.2}, _
             New With {.Nim = "23081235", .Jurusan = "SI", .IPK = 3.5}, _
             New With {.Nim = "23081231", .Jurusan = "SI", .IPK = 2.5}}

Dim kul() = {New With {.Kode = "IM2043", .Nama = "Web Database"}, _
             New With {.Kode = "IM2033", .Nama = "Rekayasa Web"}}

Dim ambil() = {New With {.Id = 1, .Kode = "IM2043", .Nim = "22081234"}, _
               New With {.Id = 2, .Kode = "IM2033", .Nim = "23081235"}, _
               New With {.Id = 3, .Kode = "IM2043", .Nim = "23081231"}}

Dim query = From m In mhs _
           Join a In ambil On m.Nim Equals a.Nim _
           Join k In kul On a.Kode Equals k.Kode _
           Select m.Nim, k.Nama

For Each hsl In query
       Console.WriteLine("Mahasiswa dengan Nim : " & hsl.Nim & " mengambil Matakuliah : " & hsl.Nama)
Next

demikian beberapa contoh penggunaan LINQ Query di VB9, untuk
contoh-contoh lebih detail tentang penggunaan LINQ (VB) akan dibahas di
posting2 selanjutnya, viva VB :)

Fitur VB9 (Lambda Expression)

Halo, setelah lama absen posting tentang VB kangen juga untuk
membahas fitur-fitur baru VB :), posting ini adalah posting kesembilan
saya tentang fitur dari VB9 yaitu Lambda Expression, Mungkin anda sudah
sering menggunakan Lambda Expression di C# 3.0, pada posting kali ini
akan ditunjukan juga beberapa perbedaan fitur di VB dan C#. 

anda dapat melihat posting saya sebelumnya:

Lambda Expression adalah istilah yang diambil dari functional
programming, Lambda Expression digunakan untuk memudahkan anda membuat
fungsi/method. contoh penulisan Lambda Expression

Function (e) e + 1

fungsi diatas mempunyai satu parameter e, dan mengembalikan e+1.

Untuk menunjukan penggunaan Lambda Expression pada VB, maka sebagai
contoh saya akan membuat array berisi integer dan memfilter yang
nilainya > 6 dengan Lambda Expression

Sub Main()
Dim arrBil() = {4, 5, 7, 9, 12, 3, 2}
Dim filter = arrBil.Where(Function(b) b > 5)
For Each i In filter
Console.WriteLine(i)
Next
End Sub

Lambda Expression dan Delegates

Lambda Expression dapat digunakan untuk mempermudah penggunaan delegates di VB. Tanpa Lambda anda dapat menuliskan:

'deklarasi delegates
Public Delegate Function UbahInt(ByVal x As Integer) As Integer

'buat fungsi yang akan ditunjuk oleh delegates
Function Gandakan(ByVal x As Integer) As Integer
Return x * 2
End Function

Kemudian buat instance delegates sebagai berikut

Sub Main()
Dim mydel As UbahInt = New UbahInt(AddressOf Gandakan)
Console.WriteLine("{0}", mydel(5))
End Sub

Maka program diatas akan mencetak 10.

Dengan menggunakan Lambda Expression anda dapat menuliskan :

Public Delegate Function UbahInt(ByVal x As Integer) As Integer
Sub Main()
Dim mydel As UbahInt = Function(x) x * 2
Console.WriteLine(mydel(5))
End Sub

Program diatas juga akan mencetak 10 sama dengan sebelumnya, tapi
dengan menggunakan Lambda Expression penambahan method menjadi lebih
mudah :)

Menggunakan Lambda dengan Dua Parameter

Anda juga dapat menggunakan Lambda dengan dua parameter, cara penulisannya:

'delegates dengan dua parameter
Public Delegate Function Kali(ByVal x As Integer, ByVal y As Integer) As Integer

'mencetak 5*6=30
Sub Main()
Dim mydel = Function(x, y) x * y
Console.WriteLine(mydel(5, 6))
End Sub

Anda juga dapat menggunakan Select() extension method dengan Lambda
Expression yang mempunyai dua parameter, parameter pertama untuk nilai
sedangkan parameter kedua untuk index

Dim nama() = {"erick", "wely", "sony", "ridi"}
Dim filter = nama.Select(Function(x, i) "Nama ke " + i.ToString() + " : " + x)
For Each i In filter
Console.WriteLine(i)
Next

jika program dijalankan akan mencetak:

image  

Statement Lambda Expression

VB9 belum mendukung Statement Lambda Expression seperti yang ada
pada C# 3.0, VB akan mensupport fitur ini pada versi VB10. Jika
menggunakan Statement Lambda Expression di C# anda dapat menuliskan:

//menggunakan Statement Lamda pada C# 
string[] nama = new[] { "erick","wely","sony","ridi","eriawan" };

foreach (string n in nama.Where(
x => {
if (x.Contains("eri"))
return true;
else
return false;
}
))

Console.WriteLine(n);

dengan VB9 anda dapat menghasilkan output yang sama dengan menuliskan kode sebagai berikut:

Function CekNama(ByVal nama As String)
If nama.Contains("eri") Then
Return True
Else
Return False
End If
End Function

Sub Main()
Dim nama() = {"erick", "wely", "sony", "eriawan"}
Dim filter = nama.Where(Function(x) CekNama(x))
For Each n In filter
Console.WriteLine(n)
Next
End Sub

maka akan dicetak output:

image 

happy coding ^_^

Validasi Inputan (C# dan VB.NET)

Kadang kita butuh untuk memvalidasi atau membatasi inputan yang dimasukan oleh user, berikut adalah cara sederhana untuk membatasi inputan agar inputan yang dimasukan hanya bisa berupa angka saja (tidak bisa berupa huruf).

Untuk menangani validasi tersebut buat method berikut

 

(C# version)

private void ValidateInputNumeric(Object sender,KeyPressEventArgs e)
        {
            TextBox t;
            if (sender.GetType() is TextBox)
            {
                t = (TextBox)sender;
                if (t.Name == txtHarga.Name || t.Name == txtStok.Name)
                {
                    if (!Char.IsNumber(e.KeyChar) && e.KeyChar!=(char)8)
                    {
                        e.Handled = true;
                    }
                }
            }
        }

 

(VB version)

Private Sub ValidInputNumeric(ByVal sender As Object, _
    ByVal e As KeyPressEventArgs) Handles txtStok.KeyPress, txtHarga.KeyPress
        Dim t As TextBox
        If sender.GetType() Is GetType(TextBox) Then
            t = CType(sender, TextBox)
            If t.Name = txtHarga.Name Or t.Name = txtStok.Name Then
                If Not Char.IsNumber(e.KeyChar) And _
                e.KeyChar <> vbBack Then
                    e.Handled = True
                End If
            End If
        End If
    End Sub

 

kemudian tambahkan method yang sudah kita buat diatas kedalam event keypress di control yang akan divalidasi (misal: textbox)

 image

 

masukan pada event keypress

image