Video Tutorial ASP Core Part 1–Controller

Pada video tutorial kali ini dibahas cara untuk membuat project ASP Core baru. Tools yang digunakan adalah .NET Core SDK versi 2.2 dan Visual Studio Code.

Setelah membuat project akan dijelaskan cara menambahkan MVC library dan cara untuk membuat Controller.

Posted in Uncategorized | Tagged | Leave a comment

Xamarin Forms with Prism – Tabbed Page with Prism

Pada contoh dibawah ini akan ditunjukan cara menggunakan Tabbed Page dengan menggunakan Prism.

Tambahkan view baru dengan nama PrismTabbedPage.xaml.

image

Kemudian untuk menambahkan halaman yang akan ditampilkan pada TabbedPage, tambahkan kode xaml berikut ini:

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
            prism:ViewModelLocator.AutowireViewModel="True"
            x:Class="ContohPrism.Views.PrismTabbedPage"
            xmlns:local="clr-namespace:ContohPrism.Views" Title="Tabbed Page">
    <TabbedPage.Children>
        <local:CalculatorPage Title="Calculator" />
        <local:ListArtikelPage Title="Artikel" />
    </TabbedPage.Children>
</TabbedPage>

Jangan lupa untuk meregister halaman yang akan ditampilkan pada App.xaml.cs.

        protected override async void OnInitialized()
        {
            InitializeComponent();
            await NavigationService.NavigateAsync("PrismTabbedPage");
        }

        protected override void RegisterTypes(IContainerRegistry containerRegistry)
        {
            containerRegistry.RegisterForNavigation<NavigationPage>();
            containerRegistry.RegisterForNavigation<CalculatorPage, CalculatorPageViewModel>();
            containerRegistry.RegisterForNavigation<ListArtikelPage, ListArtikelPageViewModel>();
            containerRegistry.RegisterForNavigation<PrismTabbedPage, PrismTabbedPageViewModel>();
        }

Tampilan halaman TabbedPage dapat dilihat pada gambar berikut ini:

image

Posted in Xamarin Forms, Xamarin Forms with Prism | Tagged , | Leave a comment

Xamarin Forms with Prism–Master Page

Pada blog kali ini akan dibahas cara menggunakan Master Page dengan menggunakan Prism Framework.

Untuk membuat Master Page langkah pertama pada folder Views tambahkan Prism MasterDetailPage dengan nama PrismMasterDetailPage.

image

Kemudian pada PrismMasterDetailPage.xaml tambahkan kode xaml berikut ini:

<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
                  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                  xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
                  prism:ViewModelLocator.AutowireViewModel="True"
                  x:Class="ContohPrism.Views.PrismMasterDetailPage">

    <MasterDetailPage.Master>
        <ContentPage Title="Menu">
            <StackLayout Padding="20">
                <!-- TODO: // Update the Layout and add some real menu items  -->
                <Button Text="List Artikel" Command="{Binding NavigateCommand}" CommandParameter="PrismMasterDetailPage/NavigationPage/ListArtikelPage" />
                <Button Text="Calculator" Command="{Binding NavigateCommand}" CommandParameter="PrismMasterDetailPage/NavigationPage/CalculatorPage" />
            </StackLayout>
        </ContentPage>
    </MasterDetailPage.Master>
</MasterDetailPage>

Halaman ini adalah halaman utama dari master page yang akan berisi menu dan halaman detail yang akan ditampilkan.

Dua button yang ada di dalam stacklayout akan berisi menu navigasi ke halaman yang lain. Perhatikan bahwa untuk navigasi ke halaman lain digunakan alamat halaman yang lengkap yang terdiri dari {Nama master page}/NavigationPage/{nama halaman yang dituju}.

Kemudian pada file PrismMasterDetailPageViewModel.cs tambahkan kode berikut untuk menangani event handler ketika button navigasi pada menu dipilih.

	public class PrismMasterDetailPageViewModel : ViewModelBase
	{
        private INavigationService _navigationService;
        public PrismMasterDetailPageViewModel(INavigationService navigationService)
            : base(navigationService)
        {
            _navigationService = navigationService;
            NavigateCommand = new DelegateCommand<string>(NavigateAsync);
        }

        private async void NavigateAsync(string page)
        {
            await _navigationService.NavigateAsync(new Uri(page, UriKind.Relative));
        }

        public DelegateCommand<string> NavigateCommand { get; set; }

    }

Method NavigationAsync digunakan untuk navigasi menu ke url halaman yang diinginkan.

Pada file App.xaml.cs jangan lupa untuk mendaftarkan halaman master page dan halaman yang akan diakses dari master page.

        protected override async void OnInitialized()
        {
            InitializeComponent();
            await NavigationService.NavigateAsync("PrismMasterDetailPage/NavigationPage/CalculatorPage");
        }

        protected override void RegisterTypes(IContainerRegistry containerRegistry)
        {
            containerRegistry.RegisterForNavigation<NavigationPage>();
            containerRegistry.RegisterForNavigation<MainPage, MainPageViewModel>();
            containerRegistry.RegisterForNavigation<AboutPage, AboutPageViewModel>();
            containerRegistry.RegisterForNavigation<SampleDelegateCommandPage, SampleDelegateCommandPageViewModel>();
            containerRegistry.RegisterForNavigation<CalculatorPage, CalculatorPageViewModel>();
            containerRegistry.RegisterForNavigation<ListArtikelPage, ListArtikelPageViewModel>();
            containerRegistry.RegisterForNavigation<PrismMasterDetailPage, PrismMasterDetailPageViewModel>();
        }

Untuk melihat hasilnya jalankan aplikasi ini pada android emulator.

image

Menambahkan Master Detail Options

Interface master detail option dapat digunakan jika anda menghendaki navigation menu tidak otomatis tertutup ketika salah satu tombol navigasi dipilih. Untuk hal tersebut anda dapat merubah nilai properti IsPresentedAfterNavigation menjadi true.

    public partial class PrismMasterDetailPage : MasterDetailPage,IMasterDetailPageOptions
    {
        public PrismMasterDetailPage()
        {
            InitializeComponent();
        }

        public bool IsPresentedAfterNavigation
        {
            get { return true; }
        }
    }
Posted in Uncategorized | Tagged , | Leave a comment

Akses PostgreSQL Database pada Azure VM

Pada tutorial kali ini akan dibahas cara untuk mengakses database PostgreSQL yang dipasang pada Azure VM dengan sistem operasi Windows Server 2016.

Setelah database PostgreSQL terpasang pada Windows Server 2016, langkah selanjutnya adalah membuka port 5432 pada Azure VM dan pengaturan firewall pada Windows Server 2016.

Pada Azure VM masuk ke menu Networking, kemudian tambahkan pengaturan berikut pada inbound port role.

image

Setelah ditambahkan maka port 5432 sudah ada pada daftar port yang diijinkan untuk diakses

image

Kemudian masuk kedalam Windows Server 2016 pada Azure VM, dan akses menu Windows Firewall dan Advanced Sercurity, kemudian tambahkan juga port 5432.

Pada inbound role – New Role

image

image

image

image

Masukan nama kemudian tekan tombol Finish.

image

Langkah terakhir adalah mengakses file pg_hba yang ada pada folder C:\Program Files\PostgreSQL\11\data. Kemudian tambahkan pengaturan berikut pada akhir file

hostnossl    all          all            0.0.0.0/0  trust

image

Kemudian restart postgresql services, dan silahkan akses database server dari aplikasi pgadmin4. seharusnya anda sudah dapat mengakses database server tersebut.

Posted in Uncategorized | Tagged , , , | Leave a comment

Free E-Book: Seri Belajar Data Science: Pengenalan Azure Machine Learning Studio

image

Buku ini adalah panduan yang dapat digunakan untuk mengenal Azure Machine Learning Studio ini. Buku ini memperkenalkan modul-modul yang dapat digunakan untuk memproses data dengan bermacam fungsi-fungsi statistik dan algoritma machine learning. Tidak diperlukan skill coding bahasa R atau Python karena semua modul dapat digunakan dengan cara drag-and-drop saja.

Buku ini juga memberikan contoh-contoh kasus seperti klasifikasi, regresi, clustering sampai contoh kasus text mining data dari Twitter. Dan juga contoh pembuatan custom modul dengan bahasa pemrograman R. Tidak hanya itu, buku ini juga memberikan contoh pembuatan aplikasi client untuk mengakses Azure ML web service dengan aplikasi web, aplikasi desktop dan aplikasi mobile Android.

Untuk tau lebih detail tentang buku ini dapat diunduh pada link dibawah ini:

https://www.researchgate.net/publication/330184412_Seri_Belajar_Data_Science_Pengenalan_Azure_Machine_Learning_Studio

Posted in Azure Machine Learning | Tagged | Leave a comment

Xamarin Forms MVVM : ListView dengan Menggunakan Prism

Pada bab ini akan dijelaskan bagaimana cara membinding data kedalam ListView dengan menggunakan framewrok Prism.

Pertama pada project CobaPrism yang sudah dibuat pada tutorial sebelumnya, tambahkan view dengan nama ListArtikelPage.xaml

image

Untuk membuat model yang akan di tampilkan pada ListArtikelPage, buat folder dengan nama Models. Pada folder Models tambahkan clas dengan nama Artikel.cs

    public class Artikel
    {
        public int ArtikelID { get; set; }
        public string Judul { get; set; }
        public string Deskripsi { get; set; }
    } 

Setelah View dibuat maka file ViewModel juga otomatis akan dibuat. Tambahkan file ListArtikelPageViewModel.cs.

    public class ListArtikelPageViewModel : ViewModelBase
    {
        public ListArtikelPageViewModel(INavigationService navigationService)
            : base(navigationService)
        {
            Title = "Main Page";
            _listArtikel = new List<Artikel>
            {
                new Artikel{ArtikelID=1,Judul="Pemrograman CSharp",Deskripsi="Deskripsi Buku Pemrograman CSharp"},
                new Artikel{ArtikelID=2,Judul="ASP.NET Core 2.1",Deskripsi="Deskripsi Buku Pemrogaman ASP.NET Core 2.1"},
                new Artikel{ArtikelID=3,Judul="Xamarin Forms",Deskripsi="Deskripsi Buku Xamarin Forms"}
            };
        }

        private List<Artikel> _listArtikel;
        public List<Artikel> ListArtikel
        {
            get { return _listArtikel; }
            set { SetProperty(ref _listArtikel, value); }
        }
    }

Pada file diatas dapat dilihat bahwa ListArtikel bertipe collection of Artikel. Data pada ListArtikel akan ditampilkan pada ListView. Pada ListArtikelPage.xaml, tambahkan kode berikut:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             prism:ViewModelLocator.AutowireViewModel="True"
             x:Class="ContohPrism.Views.ListArtikelPage" Title="{Binding Title}">
    <StackLayout>
        <ListView ItemsSource="{Binding ListArtikel}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Judul}" Detail="{Binding Deskripsi}" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

Jika program dijalankan maka akan ditampilkan data List Artikel pada ListView.

image

    public class Artikel
    {
        public int ArtikelID { get; set; }
        public string Judul { get; set; }
        public string Deskripsi { get; set; }
    } 
Posted in Xamarin, Xamarin Forms | Tagged | Leave a comment

Xamarin Forms MVVM Prism : Menggunakan EventToCommand Behaviour

ListView tidak memiliki properti command, sehingga untuk menangani event handler (ItemTapped) pada saat item dipilih harus menggunakan EventToCommandBehaviour.

Untuk menggunakan EventToCommand Behaviour, tambahkan kode berikut pada view ListArtikelPage.xaml

    <StackLayout>
        <ListView ItemsSource="{Binding ListArtikel}">
            <ListView.Behaviors>
                <b:EventToCommandBehavior EventName="ItemTapped"
                                          Command="{Binding ItemTappedCommand}"
                                          EventArgsConverter="{StaticResource itemTappedEventArgsConverter}" />
            </ListView.Behaviors>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Judul}" Detail="{Binding Deskripsi}" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>

Penambahan EventToCommandBehaviour ditujukan untuk membinding event ItemTapped pada ListView. Ini dikarenakan ListView tidak memiliki properti Command.

Untuk mengambil nilai kembalian dari event handler yang dibinding maka harus dibuat objek converter. Pada solution explorer tambahkan folder dengan nama Converters, kemudian tambahkan file baru dengan nama ItemTappedEventArgsConverter.cs. Tambahkan kode sebagai berikut:

    public class ItemTappedEventArgsConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            var itemTappedEventArgs = value as ItemTappedEventArgs;
            if (itemTappedEventArgs == null)
            {
                throw new ArgumentException("Kembalian diharapkan berupa Item Tapped", nameof(value));
            }
            return itemTappedEventArgs.Item;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

Kemudian pada ListArtikelPageViewModel.cs tambahkan method yang digunakan untuk menangani event ItemTapped.

    public class ListArtikelPageViewModel : ViewModelBase
    {
----------------------------------------------

        public Artikel ItemSelected { get; set; }

        public DelegateCommand<Artikel> _itemTappedCommand;
        public DelegateCommand<Artikel> ItemTappedCommand =>
            _itemTappedCommand ?? (_itemTappedCommand = new DelegateCommand<Artikel>(ExecuteTtemTappedCommand));

        private void ExecuteTtemTappedCommand(Artikel obj)
        {
            ItemSelected = obj;
            _dialogService.DisplayAlertAsync("Keterangan", $"Judul: {obj.Judul}", "OK");
        }
    }

Method ExecuteItemTappedCommand juga digunakan untuk mengambil parameter objek yang dikirimkan dari Item Tapped, data yang diambil berupa data objek dari ListView.

Berikut adalah tampilan ketika memilih salah satu item pada ListView.

image

Posted in Xamarin, Xamarin Forms | Tagged , | Leave a comment