[Silex Framework] Make REST Web Service (2)

Melanjutkan postingan sebelumnya pada tautan https://sabitlabscode.wordpress.com/2016/05/07/silex-framework-make-rest-web-service-1/, kali ini saya akan memaparkan bagaimana membuat API untuk POST, PUT dan DELETE method (pada postingan sebelumnya telah dibahas API untuk GET method).

Apa sih beda antara GET, POST, PUT dan DELETE method ?

Penjelasan lengkapnya ada di https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html. Kalo males baca disana, singkatnya GET digunakan untuk operasi yang tidak merubah database/sistem, biasanya cuma nampilin data(view data detail, melihat list data, search, dll). Kalo POST digunakan untuk operasi yang merubah data (misal insert data baru ke dalam database server). Sedangkan PUT mirip dengan POST, tetapi PUT biasanya menyimpan informasi spesifik dari suatu data (misal kita ingin membuat operasi update data, kita biasanya punya info “id” data yang akan di update). Sedangkan DELETE dari namanya udah kelihatan biasa digunakan untuk operasi melakukan delete data, pada umumnya dia merubah data tetapi tidak melempar parameter ke dalam fungsi seperti POST dan PUT.

Sebelum melanjutkan project ini, siapa tahu nanti ada yang ga sukses mengikuti tutorial disni, anda dapat download code akhir dari project ini pada tautan berikut  https://github.com/sabithuraira/tutor_silex.  Sebelum lanjut perlu saya beritahukan bahwa nama tabel yang sebelumnya “menu_makanan” saya rubah menjadi “food_list”. Kemudian nama field pada tabel yang sebelumnya “nama” dan “harga”, saya rubah menjadi “name” dan “price”. Kok di rubah? biar orang yg ga ngerti bahasa Indonesia juga ngerti baca code dari github tadi.

Okey, sekarang mari kita lanjutkan…

Kita akan membuat sebuah perintah untuk insert data baru, masukkan code berikut :

//kita menggunakan POST
$app->post('/insert', function (Silex\Application $app, Request $request) {
    //mendefinisikan data "food_list" yang akan ditambahkan
    $data=array(
      'name' => $request->get('name'), 
      'price' => $request->get('price'),
    );

    //perintah insert data baru ke dalam tabel "food_list" dengan data yang
    //sudah dideklarasikan
    $app['db']->insert('food_list', $data);

     return $app->json("Success save data");
});

Pada code di atas terdapat petikan code “$request->get(‘name’)” maksud dari kode tersebut adalah bahwa fungsi akan mengambil sebuah nilai yang dilempar oleh client service dengan nama “name”. Misal kalo suatu saat anda membuat sebuah aplikasi android untuk insert data melalui API ini, maka aplikasi android anda harus melempar nilai bernama “name” dan “price”. Server akan menangkap kedua nilai tersebut untuk diolah kemudian.

Setelah proses insert data, sekarang kita akan membuat proses update data. Masukkan kode berikut :

$app->put('/update/{id}', function (Silex\Application $app, Request $request,$id) {
    //definisi data, sama dengan pada proses insert
    //nilai-nilai dari data diambil dari variabel yg dikirimkan oleh 
    //aplikasi client (dari aplikasi android pada penjelasan di atas)
    $data=array(
      'name' => $request->get('name'),
      'price' => $request->get('price'),
    );

     //perintah untuk melakukan update data pada tabel food_list,
     //dengan data yg sudah di masukkan dan yg di update data dengan id tertentu
     $app['db']->update('food_list', $data,array('id'=>$id));
     return $app->json("Success update data");
});

Code di atas adalah kode untuk melakukan update data melalui API, sebenarnya mirip dengan proses insert hanya saja kali ini kita memiliki informasi id dari data yang ingin diupdate.

Kemudian untuk proses delete data, masukkan kode berikut :

$app->delete(‘/delete/{id}’, function (Silex\Application $app, Request $request,$id) {
//perintah untuk menghapus data pada tabel “food_list” dengan id tertentu

$app[‘db’]->delete(‘food_list’, array(‘id’=>$id));
return $app->json(“Success delete data”);
});

Kode di atas lebih simpel karena hanya melempar suatu id kemudian menghapus data dengan id tersebut.

Dengan membuat fungsi untuk menghapus, maka kita sudah membuat contoh penerapan perintah dasar pada Rest API yaitu GET, POST, PUT dan DELETE. Kita juga sudah melihat contoh sederhana untuk melakukan operasi CRUD pada sebuah tabel. Sekarang masalahnya mungkin temen-temen merasa tidak bisa melakukan testing langsung output dari aplikasi yang kita buat. Ya, untuk dapat melihat secara langsung output dari aplikasi yang telah kita buat kita harus membuat langsung aplikasi client untuk mengkonsumsi REST API yang kita buat. Anda bisa membuat dengan aplikasi apapun, desktop app, mobile app, web app.. anda juga bebas menggunakan bahasa pemrograman apapun mau pake PHP, Java, C#, dll..

Gimana cara buat aplikasi client nya? Memang anda harus belajar lebih lanjut untuk memahami bagaimana cara membuat aplikasi clientnya. Pada postingan selanjutnya saya akan memaparkan tutorial membuat aplikasi client berbasis Android dengan Xamarin untuk mengkonsumsi REST API yang sudah kita buat pada postingan ini..

Selamat mencoba, happy coding😀

 

[Silex Framework] Make REST Web Service (1)

Okey, setelah kurang lebih 5 bulan nggak posting di blog ini, akhirnya dikasih waktu dan kesempatan kembali untuk membuat catatan disini. Kali ini saya akan menjabarkan cara membuat REST Web Service dengan menggunakan Silex Framework, kalo ada yang belum tahu tentang silex framework bisa dilihat di http://silex.sensiolabs.org/. Bisa dilihat pada webnya silex adalah “The PHP micro framework based on Symfony2 Components”, jadi komponen yang digunakan oleh Silex adalah dari Symfony2 yang dari kematangan sudah teruji dalam development aplikasi website. Terus kalo ga ngerti Symfony2 gimana? buat yang ga familiar dengan symfony2 tetap bisa pake kok (saya juga ga familiar dgn Symfony2).

Kenapa pake Silex? kenapa ga pake framework lain macam Yii, Laravel atau Symfony2 sekalian?. Saya ingin membuat sebuah sistem terpisah yang bertugas cuma untuk menangani web service saya. Jika menggunakan framework seperti Yii, Laravel atau symfony2 saya rasa terlalu kompleks dan ditakutkan mempengaruhi performance dari web service yang saya bangun. Pada tutorial selanjutnya mungkin saya akan posting cara mengkonsumsi web service yang kita buat dengan Android atau Xamarin.

Laravel juga punya micro framework yang namanya Lumen, kenapa ga pake itu? Hmm, keputusan pribadi sih. Setelah googling sana-sini, walau banyak perbedaan pendapat antar developer mana yang lebih baik, saya menetapkan dan lebih tertarik explore si Silex.

Pada tutorial ini saya ingin membuat sebuah API Web Service yang dapat mengeluarkan dan mengelola data daftar makanan+harganya. Pertama-tama mari buat sebuah database dan buatlah sebuah tabel berikut :

CREATE TABLE `menu_makanan` (
 `id` INT NOT NULL AUTO_INCREMENT ,
 `nama` VARCHAR(255) NULL ,
 `harga` DECIMAL(12,0) NULL ,
 PRIMARY KEY (`id`) );

Setelah itu inputlah beberapa contoh data, misal seperti gambar berikut :

Capture

Setelah selesai dengan database, sekarang donlot Silex Framework di http://silex.sensiolabs.org/download. Yang di download lebih baik yang “slim”. Ektrak file tersebut dan masukkan ke dalam web server anda (folder letak localhost anda). Rubah nama folder “silex” anda dengan nama project yang anda inginkan (saya memberi nama project dengan “tutor_silex”). Jangan lupa install composer, download di https://getcomposer.org/. Ini dapat digunakan untuk memudahkan anda mengupdate komponen2 pada aplikasi anda secara online melalui command composer.

Buka aplikasi hello world anda pada tautan berikut : http://localhost/tutor_silex/web/index.php/hello. Akan terlihat tampilan browser dengan tulisan “Hello!”.

Sekarang pada project anda silahkan buka file pada “web/index.php”. Berikut penjelasan kode pada file tersebut :

<?php
//kode ini mendefinisikan file pada vendor/autoload.php, 
//file ini adalah sumber induk untuk mengkonsumsi components pada silex/symfony2 component.
require_once __DIR__.'/../vendor/autoload.php';

$app = new Silex\Application();

//router "hello", mendefinisikan sebuah router yang dapat dipanggil browser
//pada contoh sebelumnya kita telah memanggil tautan yang menampilkan tulisan "Hello!"
//disinilah kode yang mengeksekusi hal tersebut.
$app->get('/hello', function () {
 return 'Hello!';
});

$app->run();

Kita akan menghubungkan aplikasi kita dengan database yang telah kita buat. Untuk mengubungkan aplikasi dengan database kita akan menggunakan doctrine dalam hal ini kita harus melakukan setting pada file “composer.json” yang ada pada aplikasi dan masukkan kode berikut :

{
  "require": {
     "silex/silex": "~1.1",
     "doctrine/dbal":"~2.2",
     "phpunit/phpunit": "4.5.*"
  }
}

Pada code di atas kita mendefinisikan doctrine dan phpunit agar dapat menghubungkan aplikasi dengan database. Doctrine dan phpunit saat ini belum ada pada aplikasi anda, untuk itu kita harus mengupdate komponen anda dengan menggunakan composer. Buka command prompt anda, cd (change direktori) ke direktori project anda. Kemudian update komponen anda dengan mengetikkan perintah “composer update” pada cmd anda. Tunggu hingga proses selesai.

Setelah selesai masukkan kode berikut pada web/index.php anda :

<?php
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;

require_once __DIR__.'/../vendor/autoload.php';

$app = new Silex\Application();

//mendefinisikan koneksi ke database
$app->register(new Silex\Provider\DoctrineServiceProvider(), array(
   'db.options' => array(
      'driver' => 'pdo_mysql',
      'host' => 'localhost',
      'dbname' => 'test',
      'user' => 'root',
      'password' => '',
    ),
));

$app->get('/hello', function () {
 return 'Hello!';
});

//route untuk menampilkan daftar semua makanan pada database
$app->get('/daftar', function (Silex\Application $app,Request $request)
{
   $result=array();
   //query database
   $sql = "SELECT * FROM menu_makanan";
   $stmt=$app['db']->query($sql);
   while($row=$stmt->fetch()){
       //format data yang akan ditampilkan
       $result[]=array(
          'id' =>$row['id'],
          'nama' =>$row['nama'],
          'harga' =>$row['harga'],
       );
    }
 
    return $app->json($result);
});

//route untuk menampilkan data makanan dengan id tertentu pada database
$app->get('/daftar/{id}', function (Silex\Application $app,Request $request,$id)
{
   $result=array();
   $sql = "SELECT * FROM menu_makanan WHERE id={$id}";

   $stmt=$app['db']->query($sql);
   while($row=$stmt->fetch()){
       $result[]=array(
           'id' =>$row['id'],
           'nama' =>$row['nama'],
           'harga' =>$row['harga'],
        );
    }
 
    return $app->json($result);
});

$app->run();

Buka browser anda, kemudian buka tautan “http://localhost/tutor_silex/web/index.php/daftar&#8221;, akan tampil data dalam format json seperti berikut :

[{"id":"1","nama":"Pempek Kapal Selam","harga":"10000"},
{"id":"2","nama":"Gado-gado","harga":"10000"},
{"id":"3","nama":"Nasi Uduk","harga":"7000"}]

Kemudian buka tautan “http://localhost/tutor_silex/web/index.php/daftar/2&#8221; (kita memberikan id spesifik dari data yang ingin ditampilkan) akan muncul data dengan format seperti berikut :

[{"id":"2","nama":"Gado-gado","harga":"10000"}]

Anda dapat mengkonsumsi API tersebut. Bisa menggunakan berbagai jenis platfom seperti android, PHP, Iphone, Windows Phone, dll..

Terus kalo mau buat operasi insert/update data sama delete, gimana caranya pake REST Web Service? Hmm, berhubung lagi capek ngetik, maka postingan untuk insert/update dan delete akan saya lanjutkan pada postingan selanjutnya.. terima kasih..

Happy coding😀

Pengenalan Pohon

Semester ini saya mendapatkan matakuliah baru dan kebetulan saya tidak pernah mendapatkan ilmunya ketika saya kuliah. Alhasil saya harus benar-benar menguasai sebelum saya mengajar dikelas. Matakuliahnya sangat menarik penuh dengan logika saya sangat suka tapi cukup kewalahan mencari materi. Ok mari kita mulai..

Pohon adalah struktur data yang secara bentuk menyerupai pohon. Hanya saja berbeda dengan dunia nyata pohon tumbuh ke atas tapi di struktur dari pohonnya tumbuh ke bawah. Pohon terdiri dari serangkaian simpul (node) yang saling terhubung. Sebuah pohon merepresentasikan sebuah hirarki atau tingkatan. Contoh pohon:

  1. Pohon Struktur Organisasi

mdp

2. Daftar isi sebuah bukudaspro

Banyak istilah-istilah umum yang perlu anda ketahui:

p1

Gambar 3. Contoh Pohon

  1. Induk (Parent)
    Node yang berada di atas node lain secara langsung. Contoh dari Gambar 3, 1 merupakan parent dari 2, 3 dan 4. Contoh lain 4 merupakan parent dari 7, 8 dan 9.
  2. Anak (Child)
    Node anak adalah node yang merupakan cabang langsung dari sebuah node. Contoh 2 adalah anak dari 1.
  3. Akar (root)
    Akar adalah node yang tidak memiliki induk atau node yang paling tinggi. Jika dilihat pada Gambar 3, maka rootnya adalah 1.
  4. Daun (leaf)
    Daun adalah node yang tidak memiliki anak. Seperti : 5, 6, 3, 7, 8, dan 9.
  5. Simpul dalam (internal node)
    Simpul dalam adalah simpul yang memiliki anak minimal 1. Seperti node 1, 2 dan 4.
  6. Simpul luar (external node)
    Simpul luar adalah simpul yang paling luar atau sama saja dengan daun. Seperti: 5, 6,3,7, 8 dan 9.
  7. Level
    Level adalah tingkatan yang ditinjau dari posisi akar. akar memiliki level 0. Untuk contoh pohon dapat dilihat pada Gambar 4.
  8. Tinggi (Height)
    Ketinggian adalah level tertinggi dari suatu pohon di tambah dengan 1. Maka ketinggian pohon pada Gambar 4 adalah 4 (level tertinggi+1).

    picture1

    Gambar 4. Contoh Pohon 2

  9. Derajat
    Derajat adalah jumlah anak maksimal yang boleh dimiliki oleh node. Dari Gambar 4 node T memiliki anak terbanyak yaitu 3. Maka derajat dari pohon tersebut adalah 3.

Binary Tree

Pohon biner adalah jenis pohon yang memiliki ke khasan, yaitu jumlah anak setiap simpul maksimal dibatasi dua buah saja.

1. Node

Pada dasarnya pohon biner sama saja dengan list hanya saja koneksinya lebih dari 1. Biasanya node  tree terdiri dari 2 bagian, data dan koneksi. Pada pohon biner terdapat koneksinya adalah koneksi kiri (anak kiri) dan koneksi kanan (anak kanan).

node

   Gambar 1. Representasi Node

  • Data adalah nilai yang disimpan didalam node dan biasanya tipe datanya adalah tipe data primitif.
  • Sedangkan L adalah koneksi yang menghubungkan dengan Node sebelah kiri.
  • dan R adalah koneksi yang menghubungkan dengan Node sebelah kanan.

Ada juga Node yang memiliki 3 koneksi, yaitu kanan, kiri dan parent.

Picture1

Gambar 2. Node dengan 3 koneksi

Parent adalah koneksi yang menghubungkan Node dengan Node orang tuanya. Sehingga anaknya bisa mengetahui data orang tuanya. Berbeda dengan Gambar 1, hanya orang tua yang mengenali anak tetapi tidak sebaliknya.

2. Pohon

Sebuah pohon harus memiliki akar atau root. Root dari sebuah pohon tidak boleh lepas karena root adalah pangkal dari sebuah pohon. Jika kita mengetahui pangkal sebuah pohon maka otomatis kita bisa menngunjungi semua node pada pohon tersebut.

Jenis-Jenis Binary Tree

  1. Full Binary Tree
    Pohon biner yang semua nodenya (kecuali leaf) pasti memiliki 2 anak dan tiap subtree memiliki tinggi pohon yang sama.
    Picture2
  2. Complete Binary Tree
    Pohon biner yang mirip dengan full binary tree tetapi tiap subtree memiliki selisih ketinggian minimal 1. Contoh tinggi pohon kiri 2 dan pohon kanan 1. maka selisihnya adalah 1. Jika selisih 1 maka pohon di bawah ini dapat diseput pohon complete.
    Picture3
  3. Skewed Binary Tree
    Pohon biner yang semua nodenya hanya memiliki 1 anak dan pohonnya condong. Misal condongnya ke kiri maka semua node hanya memiliki anak kiri semua begitu juga sebaliknya.
    Picture4

 

[ C# Windows10 ] About MVVM

Salah satu pattern yang digunakan dalam pengembangan aplikasi di Visual Studio 2015 adalah MVVM (Model View ViewModel).  Jika anda sudah akrab dengan konsep MVC, maka MVVM cukup mirip dengan MVC tetapi keduanya tetaplah pattern yang berbeda. Dalam MVC dan MVVM sama-sama mengenal “M” sebagai model dan “V” sebagai View dimana model adalah segala sesuatu yang berkaitan dengan data dan rule2 dalam data tersebut. Sedangkan View adalah segala sesuatu yang berkaitan dengan tampilan/user interface aplikasi anda. Pada MVC antara model dan view akan dihubungkan oleh “C” yaitu Controller dimana melalui controller inilah user akan melakukan permintaan/request (controller menjadi pintu awal) dan controller akan mengatur model apa yang akan dipanggil, fungsi apa yang akan dijalankan, hingga tampilan mana yang akan ditampilkan kepada user. Sedangkan pada MVVM model dan view akan dihubungkan melalui ViewModel tetapi pintu awal tetap terletak pada View. Pada MVVM ketika user membuat suatu permintaan/request maka yang pertama akan terbuka adalah View dimana View akan mengambil data yang ada pada model melalui perantara ViewModel yang telah menentukan data2 model mana saja yang akan ditampilkan beserta event2 yang akan dijalankan. Ilustrasi alur MVVM dapat dilihat pada gambar berikut :

Untuk memudahkan dalam memahami MVVM, berikut adalah contoh code C# pada Windows10 dengan MVVM. Pertama-tama buatlah sebuah model dengan nama “SoccerClub.cs” misal. Masukkan kode berikut :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace App1.Model
{
   public class SoccerClub
   {
      public string Name;
      public string Description;
   }
}

Code di atas mendefinisikan data “SoccerClub” yang berisi “Name” dan “Description”.

Saya akan membuat tampilan yang akan menampilkan Daftar dari nama2 SoccerClub beserta descriptionnya pada halaman saya. Dimana ketika di klik di salah satu item, maka sebuah textblock akan menulis keterangan item apa yang anda klik. Berikut tampilan akhir yang akan muncul pada aplikasi :

Capture

Sebelum membuat tampilan diatas dengan menggunakan ListView, pertama yang perlu kita buat adalah ViewModel. ViewModel yang dibuat harus memiliki data yang memuat data daftar SoccerClub dan sebuah event yang menjalankan sebuah proses ketika user melakukan klik pada setiap item. Buatlah sebuah class dengan nama “ExampleList.cs”, masukkan kode berikut :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Collections.ObjectModel;
using System.ComponentModel;
using Windows.UI.Xaml.Controls;
using App1.Model;

namespace App1.ViewModels
{
   public class ExampleList : INotifyPropertyChanged
   {
        public event PropertyChangedEventHandler PropertyChanged;
        //mengeset apabila ada variabel yang berubah, secara otomatis akan merubah pada view
        protected void NotifyPropertyChanged(String info)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(info));
            }
        }

        public string JustText = "Hai"; //variabel ini digunakan untuk text yang tampil pada           //bagian atas listview, untuk menampilkan keterangan
        //variabel ini digunakan untuk menyimpan daftar SoccerClub
        private ObservableCollection<SoccerClub> _listData = new ObservableCollection<SoccerClub>()
        {
             new SoccerClub { Name = "Barcelona", Description="Spain" },
             new SoccerClub { Name = "Real Madrid", Description="Spain" },
             new SoccerClub { Name = "Liverpool", Description="England" },
             new SoccerClub { Name = "Bayern Munich", Description="Germany" },
             new SoccerClub { Name = "A.C. Milan", Description="Italy" },
         };
         
         //mengembalikan nilai _listData
         public ObservableCollection<SoccerClub> ListData
         {
             get{ return _listData; }
         }
         
         // event ketika melakukan klik pada list
         public void ListData_ItemClick(object sender, ItemClickEventArgs e)
         {
            this.JustText = "You Click On " + (e.ClickedItem as Example).Name;
            NotifyPropertyChanged("JustText");
         }
    }
}

Kode diatas adalah kode pada ViewModel. Kode tersebut lah yang akan digunakan halaman View untuk menampilkan data apa saja yang akan ditampilkan. Sekarang pada halaman view anda, pada file xaml klik kanan pilih “View Code”. Masukkan code berikut pada class view anda :

public sealed partial class PageName : Page
 {
        //mendefinisikan ViewModel yang telah dibuat sebelumnya
        public ExampleList MyData;
        public PageName()
        {
            this.InitializeComponent();
            MyData = new ExampleList();
        }
 }

Kemudian pada code xaml anda, masukkan code berikut :

<Page
 x:Class="App1.Control.PageName"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:local="using:App1.Model"
 xmlns:viewmodel="using:App1.ViewModels"
 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 mc:Ignorable="d"
 >

  <UserControl.Resources>
    <DataTemplate x:Key="NavLinkItemTemplate" x:DataType="local:SoccerClub">
      <StackPanel Orientation="Horizontal" Margin="2,0,0,0" Background="#FFEEEEEE">
         <TextBlock Text="{x:Bind Name}" VerticalAlignment="Center"/>
         <TextBlock Text="{x:Bind Description}" Margin="24,0,0,0" FlowDirection="RightToLeft"/>
      </StackPanel>
   </DataTemplate>
 </UserControl.Resources>

  <Grid x:Name="LayoutRoot" Height="638">
     <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
     </Grid.RowDefinitions>
     <TextBlock Text="{x:Bind MyData.JustText, Mode=OneWay}" x:Name="PaneHeader" Margin="60,12,0,0" Style="{StaticResource BaseTextBlockStyle}"/>
     <ListView x:Name="NavLinksList" Margin="0,12,0,0" SelectionMode="None" Grid.Row="1" VerticalAlignment="Stretch" 
 ItemClick="{x:Bind MyData.ListData_ItemClick}" IsItemClickEnabled="True" 
 ItemsSource="{x:Bind MyData.ListData}" ItemTemplate="{StaticResource NavLinkItemTemplate}">
         <ListView.ItemContainerStyle>
             <Style TargetType="ListViewItem">
                 <Setter Property="HorizontalContentAlignment" Value="Stretch" />
             </Style>
         </ListView.ItemContainerStyle>
     </ListView>
   </Grid>
</Page>

Perlu diketahui, pada MVVM anda dapat menghubungkan sebuah control (misal textBlock, checkbox, dll) langsung ke sebuah variabel yang ada pada class view tersebut. Setelah control tersebut sudah terhubung, maka ketika variabelnya berubah secara otomatis nilai pada control tersebut juga berubah. Misal anda menghubungkan textBlock A dengan variabel nilai1. Ketika anda merubah isian nilai1, maka nilai textBlock A juga ikut berubah. Untuk menghubungkan antara sebuah control pada sebuah nilai, anda dapat menggunakan x:Bind pada windows10. Pada code view di atas, anda dapat melihat saya menghubungkan beberapa control untuk terhubung ke variabel yang ada pada classnya yaitu variabel “MyData”. Selain itu anda juga dapat memanggil even yang ada pada variabel MyData dari view anda.

Setelah membuat tampilan diatas dan menghubungkan beberapa control ke variabel yang sudah ditentukan, silahkan jalankan aplikasi anda. Selesai.. happy coding..

[ C# Windows10 ] Use SplitView With ListView

Untuk mempermudah pengelolaan menu pada SplitView, kita dapat menggunakan control ListView. Menyambung postingan sebelumnya di https://sabitlabscode.wordpress.com/2015/10/27/c-windows10-how-to-use-splitview-control/, berikut adalah contoh code implementasi SplitView dengan menggunakan ListView.

  • Masukkan kode berikut pada MainPage.xaml anda
<Page
   x:Class="App1.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:local="using:App1"
   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable="d">
 
 <!--menyimpan resource template-->
 <Page.Resources>
    <DataTemplate x:Key="NavLinkItemTemplate" x:DataType="local:NavLink">
       <StackPanel Orientation="Horizontal" Margin="2,0,0,0">
          <TextBlock FontFamily="Segoe MDL2 Assets" Text="{x:Bind Symbol}" VerticalAlignment=          "Center"/>
          <TextBlock Text="{x:Bind Label}" Margin="24,0,0,0" VerticalAlignment="Center"/>
       </StackPanel>
     </DataTemplate>
  </Page.Resources>

  <SplitView x:Name="FormSplitView" DisplayMode="CompactOverlay">
     <SplitView.Pane>
        <Grid>
           <Grid.RowDefinitions>
              <RowDefinition Height="Auto"/>
              <RowDefinition Height="*"/>
              <RowDefinition Height="Auto"/>
           </Grid.RowDefinitions>
           <Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content=""
           Width="50" Height="50" Background="Transparent" Click="HamburgerButton_Click"/>
           <TextBlock Text="MY APPS" x:Name="PaneHeader" Margin="60,12,0,0" Style="{StaticRes           ource BaseTextBlockStyle}"/>
          <!-- kode listview -->
          <ListView x:Name="NavLinksList" Margin="0,12,0,0" SelectionMode="None" Grid.Row="1"          VerticalAlignment="Stretch" ItemClick="NavLinksList_ItemClick" IsItemClickEnabled="          True" ItemsSource="{x:Bind NavLinks}" ItemTemplate="{StaticResource NavLinkItemTemp          late}"/>
       </Grid>
    </SplitView.Pane>

    <Grid>
        <Grid.RowDefinitions>
           <RowDefinition Height="Auto"/>
           <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <TextBlock Text="SPLITVIEW CONTENT" Margin="12,12,0,0" Style="{StaticResource BaseTex         tBlockStyle}"/>
        <TextBlock x:Name="content" Grid.Row="1" Margin="12,12,0,0" Style="{StaticResource Bo         dyTextBlockStyle}" />
    </Grid>
  </SplitView>
</Page>
  • Pada MainPage code, masukkan kode berikut :
public sealed partial class MainPage : Page
 {
    public SamplePage(Frame frame)
    {
       this.InitializeComponent();
       this.FormSplitView.Content = frame;
    }

    // definisi variabel daftar-daftar menu pada SplitView, 
    // Page1 dan Page2 adalah blank page yang telah dibuat pada postingan sebelumnya
    private ObservableCollection<NavLink> _navLinks = new ObservableCollection<NavLink>()
    {
       new NavLink() { Label = "List", Symbol = "" , Navigationpage=typeof(Page1) },
       new NavLink() { Label = "Alert", Symbol = "" , Navigationpage=typeof(Page1) },
       new NavLink() { Label = "Feedback", Symbol = "" , Navigationpage=typeof(Page2) },
    };

   public ObservableCollection<NavLink> NavLinks
   {
       get { return _navLinks; }
   }

   private void HamburgerButton_Click(object sender, RoutedEventArgs args)
   {
       FormSplitView.IsPaneOpen = !FormSplitView.IsPaneOpen;
   }

   //fungsi ketika melakukan klik pada menu
   private void NavLinksList_ItemClick(object sender, ItemClickEventArgs e)
   {
      if (FormSplitView.Content != null)
         ((Frame)FormSplitView.Content).Navigate((e.ClickedItem as NavLink).Navigationpage);
   }
 }

 //model menampilkan listview pada SplitView
 public class NavLink
 {
     public string Label { get; set; }
     public string Symbol { get; set; }
     public Type Navigationpage { get; set; }
 }

Silahkan jalankan program anda, tampilan aplikasi anda akan seperti berikut :

Capture3

Selesai, happy coding..

[C# Windows10] Use Character Map For Icon

Windows10 menyediakan sebuah opsi untuk menampilkan icon-icon sederhana pada aplikasi anda dengan menggunakan karakter yang ada pada Character Map. Dengan fitur ini anda tidak perlu repot memasukkan image untuk menghiasi interface aplikasi anda, cukup masukkan character pada Character Map dan aplikasi anda dapat memunculkan icon seperti gambar berikut :

Capture2

Untuk melihat jenis-jenis karakternya, silahkan buka Character Map dengan cara mengetikkannya pada menu start windows10 anda dan buka tools Character Map. Akan tampil halaman seperti berikut :

Capture

Pastikan anda memilih font “Segoe MDL2 Assets”, maka akan tampil kumpulan icon-icon seperti gambar di atas. Silahkan pilih salah satu icon yang ingin anda gunakan dan klik tombol “Select” jika anda ingin menggunakan icon tersebut. Kemudian pillih tombol “Copy” untuk mengambil karakter yang harus di salin ke dalam aplikasi anda. Anda dapat memasukkan copy-an karakter tadi ke dalam aplikasi anda. Sebagai contoh anda ingin memasukkan icon pada control “Button”, maka berikut contoh kode yang harus diketikkan :

<Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content=""
 Width="50" Height="50" Background="Transparent"/>

Pada code di atas anda menentukan jenis Font Family ke Segoe MDL2 Assets, kemudian karakter yang sudah di copy anda paste ke nilai “Content=”. Setelah itu aplikasi anda otomatis akan menampilkan karakter yang sudah anda pilih tadi..

Happy coding..

%d bloggers like this: