Membuat JSON dengan PHP dan MySQL di Azure

Dipublikasi pada Januari 16, 2018 oleh aryansarizqi

Hi, disini saya ingin berbagi tentang cara membuat JSON dengan PHP dan MySQL di Microsoft Azure. Pertama saya akan menjelaskan apa itu JSON ?

JSON  (JavaScript Object Nation) merupakan format pertukaran data ringan, mudah dibaca dan ditulis oleh manusia, serta mudah diterjemahkan dan dibuat (generate) oleh komputer. Jadi, JSON mempunyai fungsi yang sama dengan XML tetapi mempunyai kelebihan seperti lebih ringkas, cepat dan mudah dibaca, untuk lebih lengkapnya tentang JSON bisa akses disini.

Azure merupakan teknologi cloud computing dan infrastruktur yang disediakan oleh Microsoft. Fitur Azure yang disediakan sangat lengkap seperti bisa deploy hosting website dengan PHP dan MySQL.

Pertama yang dibutuhkan untuk membuat JSON di azure. Pastikan sudah mempunyai akun Azure dan menginstall Winscp, Jika belum membuat akun azure, khususnya statusnya masih pelajar / mahasiswa bisa menggunakan Microsoft Imagine, Untuk mengaktifkan cukup menggunakan Email kampus / Universitas masing – masing. Setelah itu untuk mengaktifkan Azure Student, bisa mengikuti dengan tutorial ini Aktivasi Microsoft Imagine menggunakan Verification Code dan Bagaimana mengaktifkan Azure dari Microsoft Imagine?

Jika sudah melakukan aktivasi Azure, silahkan login ke portal Azure.

Kemudian jika telah selesai login akun Azure, klik new di dashboard lalu ketik di pencarian Web App + MySQL.dashboard

Pilih Web+ MySQL yang atas sendiri lalu Create seperti dibawah ini

createwebapp

Lalu buat nama service azure dengan nama yang belum digunakan, database provider pilih MySQL in App, Setelah itu klik Create.

createazure

Membuat Database MySQL

Sekarang saya akan menjelaskan sedikit tentang database, apa itu Database?

Database merupakan kumpulan informasi yang disimpan di dalam komputer secara sistematik sehingga dapat diperiksa menggunakan suatu program komputer untuk memperoleh informasi dari basis data tersebut. Perangkat lunak yang digunakan untuk mengelola dan memanggil kueri (query) basis data disebut sistem manajemen basis data (database management system, DBMS). MySQL merupakan salah satu jenis DBMS yang sering digunakan para developer untuk mengembangkan sebuah website.

Jika sudah selesai proses build service, pilih nama service yang telah dibuat. Disini yang buat contoh tadi tidak sama namanya karena saya sudah membuat dengan nama buildapiwebservice.

successbuildservice

Pada dashboard service yang telah dibuat akan menampilkan beberapa informasi seperti url, FTP username, FTP Hostname yang akan digunakan di winscp untuk login ke directory file untuk akses hosting PHP.

dashboardapi

Sebelum melakukan mengakses masuk ke phpMyAdmin, silahkan mengatur ulang password di menu Deployment -> Deployment credentials. Mengatur password ini juga digunakan untuk login ftp di winscp dengan password tersebut.

deploymentcredential

Cari menu dashboard MySQL in App di settings, lalu pastikan MySQL in App dalam kondisi On, Lalu klik Manage di pojok atas kiri untuk mengakses phpMyAdmin.

MySQLInApp

Setelah berhasil masuk akses ke phpMyAdmin, masuk ke database localdb lalu buat tabel dan kolom, tetapi disini saya akan import database yang telah dibuat.

dbphpmyadmin

Setelah berhasil import database, maka bisa dicek hasil tabel dan kolom yang telah dibuat.

tabelkolom

Membuat JSON dengan PHP di Azure

Sebelum melakukan deploy di Azure, pastikan sudah menginstall WinSCP.

Saya menjelaskan sedikit tentang WinSCP, apa itu WinSCP?

WinSCP merupakan sebuah alat untuk transfer, upload dan download file melalui protokol SFTP atau FTP dan secure shell (SSH), di WinSCP juga dapat mengedit isi file, mengubah dan menghapus file.

Sebelum melakukan deploy PHP di Azure, pastikan service Azure sudah berjalan, bisa di cek melalui nama url service yang terletak pojok kanan atas, bisa di cek di overview disini.

dashboardapi

Pastikan Azure sudah berjalan dengan lancar tanpa down seperti dibawah ini, untuk mengeceknya saya membuka url https://buildapiwebservice.azurewebsites.net/.

azurerunning

Jika Azure sudah berjalan lancar, sekarang buka aplikasi WinSCP dan lakukan login seperti dibawah ini, untuk melakukan login membutuhkan FTP hostname, FTP deployment Username dan Password yang telah dibuat di Deployment Credentials.

loginwinscp

Jika sukses login, maka tampilannya seperti gambar dibawah ini.

successlogin

Untuk melakukan deploy php, silahkan akses directory /site/wwwroot seperti dibawah ini, untuk membuat file baru yaitu klik kanan -> new -> file, lalu kasih nama file yang akan dibuat. Di gambar dibawah ini saya sudah membuat 2 dua file yaitu koneksi.php  dan api_harga.php. Untuk lebih detailnya saya akan bahas satu – satu file tersebut.

filewinscp

Disini saya akan menjelaskan file koneksi.php, dengan code dibawah ini :

koneksi

<?php
$dbhost = “”;
$dbname = “”;
$dbusername = “”;
$dbpassword = “”;

foreach ($_SERVER as $key => $value) {
if (strpos($key, “MYSQLCONNSTR_localdb”) !== 0) {
continue;
}

//Mengambil nilai dari variabel value yang merupakan data dari $_SERVER
$dbhost = preg_replace(“/^.*Data Source=(.+?);.*$/”, “\\1”, $value);
$dbname = preg_replace(“/^.*Database=(.+?);.*$/”, “\\1”, $value);
$dbusername = preg_replace(“/^.*User Id=(.+?);.*$/”, “\\1”, $value);
$dbpassword = preg_replace(“/^.*Password=(.+?)$/”, “\\1”, $value);
}

//membuat koneksi
$conn = mysqli_connect($dbhost,$dbusername,$dbpassword,$dbname);

//mengecek jika mysql tidak bisa connect
if (!$conn) {
echo “Error: Unable to connect to MySQL.” . PHP_EOL;
echo “Debugging errno: ” . mysqli_connect_errno() . PHP_EOL;
echo “Debugging error: ” . mysqli_connect_error() . PHP_EOL;
exit;
}
?>

Keterangan:

$dbhost = digunakan untuk mengambil nama host dari server yang merupakan Data Source atau disebut localhostnya,

$dbname = digunakan untuk mengambil nama database dari server, sebenernya bisa manual di isi database yang akan dipanggil, tapi ini default berdasarkan nama database localdb.

$dbusername = digunakan untuk mengambil nilai username dari server, untuk mengetahui nilai username bisa langsung dengan print atau echo $dbusername;

$dbpassword = digunakan untuk mengambil nilai password dari server, untuk mengetahui nilai password bisa langsung dengan print atau echo $dbpassword;

$conn = digunakan untuk menyambungkan koneksi mysql dengan parameter host, username, password, database;

Dalam kondisi pengecekan statement variabel $conn, jika gagal dalam menyambungkan database maka ada pesan error dari MySQL. 

Ada yang perlu diperhatikan dalam code tersebut terdapat MYSQLCONNSTR_localdb yang merupakan VARIABEL LINGKUNGAN yang artinya database tersebut tidak dapat diakses secara langsung, maka dari itu anda dapat mendapatkan host, database, username, database di file D:\home\data\mysql\MYSQLCONNSTR_localdb.ini. Untuk lebih jelasnya bisa dilihat gambar dibawah ini.

MYSQL_CONNSTR

Selanjutnya saya akan membahas file api_json.php, yang digunakan untuk mengambil data dari database dan mengubah data tersebut ke JSON.

api_harga

<?php

include ‘koneksi.php’;
$myArray = array();

if ($result = mysqli_query($conn, “SELECT * FROM harga”))  {

while($row = mysqli_fetch_assoc($result)) {

header(‘content-type:application/json’);

$myArray[] = $row;

}

echo json_encode($myArray);

}

mysqli_close($conn);

?>

Keterangan :

include ‘koneksi.php’ = memanggil file koneksi.php atau istilahnya menggabungkan file koneksi.php dengan api_harga.php.

$myArray = membuat variabel array() digunakan untuk hasil dari query dengan jumlah lebih dari 1 baris maka perlu array dalam objek tersebut.

$result = digunakan untuk query mengambil semua nilai tabel harga, setelah melakukan query data tersebut ditampung dalam variabel $row;

$row = digunakan untuk melakukan  pemanggilan fungsi mysqli_fetch_assoc dengan parameter $result, variabel $row melakukan looping sebanyak data dalam parameter query $result.

header(‘content-type:application/json’);  = digunakan untuk memberi tahu browser bahwa data dalam bentuk format json.

Terakhir variabel $myArray menampung nilai dari variabel $row yang telah di looping.

Setelah itu mencetak dengan hasil json_encode($myArray), fungsi json_encode dimana mengubah hasil array dalam bentuk JSON.

Setelah selesai memproses JSON, terdapat fungsi mysqli_close($conn) digunakan untuk menutup koneksi MySQL bahwa proses sudah selesai.

Hasil akhir JSON yang telah saya buat tampilan sebagai berikut :

api_hargajson

 

Source code bisa di download disini

Sekian dari penjelasan saya, mohon maaf bila ada kekurangan atau kesalahan dalam menjelaskan. Bisa memberi masukan atau komentar dibawah ini. Semoga bermanfaat..

Terimakasih..

Referensi :

https://id.wikipedia.org/

Dipublikasi di Azure | Tag , , | Meninggalkan komentar

Belajar Membuat Aplikasi Multi-Platform dengan Teknologi Xamarin dan Azure

Dipublikasi pada Juni 5, 2017 oleh aryansarizqi

Hello guys !

Selamat datang kembali di blog saya, perkenalkan nama saya Rizqi Aryansa yang saat ini sedang menempuh pendidikan di Universitas Brawijaya jurusan Informatika.

Kali ini saya akan berbagi tentang bagaimana cara membuat aplikasi Multi-Platform Mobile dengan menggunakan teknologi Xamarin dan Azure..

Tahukah anda? Selama ini anda menggunakan smartphone hanya sebatas sebagai pengguna saja. Apakah anda tidak ingin untuk mencoba membuat aplikasi keren hasil karya sendiri? Tentu anda bangga bisa membuat aplikasi yang terpasang di smartphone anda sendiri bukan?

Bagaimana sih caranya? eitss.. tunggu dulu, untuk lebih detailnya nanti akan saya bahas satu per satu.

Mungkin dari sebagian anda sudah ada yang pernah membuat aplikasi mobile dengan Android Studio,  lantas apa sih kelebihan membuat aplikasi dengan teknologi Xamarin?

Apa Itu Xamarin?

Xamarin adalah sebuah platform pengembangan aplikasi mobile dari Microsoft. Yups, mungkin anda sering mendengarkan produk Microsoft seperti Operating System (OS) Windows dan Office yang anda pakai dalam sehari – hari di pc anda. Tetapi, Microsoft juga mengembangkan sebuah platform Xamarin untuk anda yang ingin membuat Aplikasi Mobile. Apalagi, Xamarin tidak hanya diperuntukkan untuk Platform OS Windows Desktop dan Windows Phone saja. Namun, anda juga bisa membuat aplikasi Multi-Platform di perangkat Android dan IOS. Xamarin menggunakan bahasa pemrograman C#, sedangkan sebagian anda yang pernah menggunakan android studio familiar dengan bahasa pemrograman Java. Tenang, anda tidak perlu khawatir karena bahasa pemrograman C# dan Java mempunyai kemiripan dari penulisan syntax. Sungguh keren bukan ? Anda tidak perlu lagi menginstall banyak software untuk tiap platform mobile. Cukup anda menginstall Visual Studio 2017 Community dan Xamarin di pc anda.

Sebelum menginstall Xamarin, pastikan pc anda memenuhi kualifikasi sebagai berikut :

  1. Minimum Operating System Windows 7, 8.1, 10 dan Mac OS X El Capitan (10.11)
  2. Minimum space Harddisk PC anda mempunyai sekitar kurang lebih 40gb
  3. Minimum RAM disarankan sekitar 4gb

Pada saat install visual studio pilih custom Mobile development with .NET Xamarin seperti contoh gambar dibawah ini

Setelah selesai menginstall Visual Studio 2017 dan Xamarin, anda bisa memulai membuat dan menjalankan project aplikasi xamarin.

Memulai dan Menjalankan Project Aplikasi Xamarin

Langkah – langkah untuk memulai membuat project xamarin form sebagai berikut :

  1. Buka visual studio 2017 lalu buat new project Cross Platform App, contohnya dengan nama yang saya buat yaitu EduFabel, lalu klik OK.
    12. Kemudian akan muncul pop up New Cross Platform App pilih template Blank App dan pilih UI Technology Xamarin.Forms, lalu klik OK.2

Setelah project berhasil dibuat maka anda akan melihat tampilan solution explorer pada Visual Studio 2017 yang berisi project sebagai berikut :

  • Xamarin Forms: Project utama yang bisa dishared ke beberapa platform secara otomatis.
  • Android : Project untuk platform Android.
  • IOS : Project untuk platform IOS.

    3

Langkah – langkah Menjalankan Project Aplikasi Xamarin di Platform Android ada 2 cara yaitu :

  • Emulator
    Untuk menjalankan Project Aplikasi Xamarin di Platform Android, anda dapat menggunakan tools Visual Studio Emulator for Android atau menggunakan Android Emulator Manager (AVD). Jika belum tersedia di Visual Studio, anda dapat melakukan download di link berikut https://www.visualstudio.com/vs/msft-android-emulator/.Cara menjalankan Visual Studio Emulator for Android, anda dapat memilih di menu  Tools -> Visual Studio for Android.

    Selanjutnya anda dapat memilih tipe dari emulator dan sistem operasi android yang akan dijalankan. Dalam contoh ini menggunakan emulator dengan sistem operasi Android Kitkat (4.4) dengan ukuran device 5″.

    Image

    Untuk menjalankan project aplikasi Android, pastikan anda merubah target pada project solution explorer. Klik kanan pada solution project -> Pilih properties -> Single Startup project -> Android.

    5

  • Device Android anda
    Pastikan device anda USB debugging telah aktif, langkah – langkah mengaktifkan USB Debugging, contohnya pada device samsung sebagai berikut. Masuk ke settings -> About Device -> Ketuk Build number 10 kali -> Muncul Developer Options -> Centang USB Debugging.

Screenshot_2017-06-04-13-47-11[1]

Setelah itu jalankan aplikasi anda di visual studio, klik tombol play di device anda atau tekan tombol F5 di keyboard pc anda.

6

Setelah sukses menjalankan aplikasi di visual studio, maka akan muncul tampilan di device atau emulator anda seperti gambar dibawah ini

Image

Langkah – langkah Menjalankan Project Aplikasi Xamarin di Platform IOS  yaitu:

Pertama, pastikan di startup project anda mengarahkan ke project IOS. Klik kanan pada solution expolorer -> Pilih properties -> Single Startup project -> IOS.

Kedua, kemudian untuk menjalankan aplikasi pada platform IOS anda membutuhkan PC Mac. Cara terkoneksi dengan PC Mac, pilih tools -> IOS -> Xamarin Mac Agent.

Image

Setelah itu akan muncul tampilan sebagai berikut:
Image

Untuk dapat terinstall aplikasinya di platform IOS, harap diperhatikan beberapa hal yaitu:

  • Komputer Mac yang menjalankan OS X Yosemite (10.10) atau versi yang lebih tinggi.

  • Xamarin Studio 5.10 atau versi yang lebih tinggi.

  • Xamarin.iOS SDK.

  • Apple’s Xcode(7+) IDE dan iOS SDK.

 

Bagaimana dengan Pengenalan Teknologi Xamarin? cukup menarik bukan?

Setelah ini, saya akan membahas tentang User Interface (UI), membuat Navigasi di Xamarin Forms, menambahkan layanan Azure dan menampilkan data di ListView, dan cara membuat APK pada Xamarin juga disertai dengan penjelasan singkat contoh project yang telah saya buat yaitu Edufabel (Aplikasi Layanan Pesan Les Privat Disabilitas).

Okeeey kita lanjut aja ke pembahasan selanjutnya ya guys..

Bagaimana cara membuat User Interface (UI) Xamarin Forms ?

Dalam User Interface (UI) terdapat 3 komponen yang anda perlu ketahui yaitu:

  1. Page: Halaman yang terdiri dari komponen layout dan view. Beberapa contoh page yaitu: ContentPage, MasterDetailPage, NavigationPage, TabbedPage, dan CarouselPage.
  2. Views: Komponen yang berfungsi sebagai kontrol interaktif pada Page. Berikut beberapa contoh jenis view yaitu : Label, Image, Button, BoxView, ListView, Entry, Editor, Picker, DatePicker, TimePicker, Stepper, Slider, Switch, dan Activity.
  3. Layout : Tatak letak yang digunakan untuk mengatur posisi kontrol view atau layout lain. Berikut beberapa macam layout pada xamarin forms yaitu: StackLayout, AbsoluteLayout, RelativeLayout, dan Grid.

Baik.. diatas merupakan penjelasan singkat mengenai komponen User Interface (UI) pada xamarin form, Selanjutnya saya akan membahas Implementasi User Interface di project yang telah saya buat yaitu Membuat Form Login dan Form Register Siswa Edufabel yang meliputi komponen StackLayout, ScrollView dan Grid, Label, Image, Button, Picker dan Entry.

  • StackLayout : digunakan mengatur layout secara horizontal atau vertikal.
  • ScrollView :  untuk memuat suatu halaman agar ditampilkan secara penuh dengan scrollbar di pojok kanan halaman.
  • Grid : membantu ukuran view lebih responsif dengan ukuran yang ditentukan.
  • Label :  biasanya digunakan menampilkan teks.
  • Image : menampilkan sebuah gambar.
  • Button : digunakan untuk melakukan sebuah aksi.
  • Picker : mirip dengan combobox yang menampilkan sebuah pilihan list.
  • Entry : sebuah input pengguna dengan menggunakan keyboard.

 

Membuat Form Login EduFabel

Pertama, tambahkan halaman baru dengan nama LoginPage.xaml pada project portable. Kemudian tambahkan kode xaml 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"
 x:Class="EduFabel.LoginPage"
 BackgroundColor="Red">


 <ContentPage.Content>
 <ScrollView>
 <Grid x:Name="gvUser">
 <StackLayout>
 <StackLayout HorizontalOptions="CenterAndExpand" Margin="0,30,0,0">
 <Label Text="Selamat Datang di Edufabel!" 
 TextColor="White" HorizontalOptions="Center" FontAttributes="Bold" FontSize="Medium" />
 <Label Text="Aplikasi Layanan Pesan Les Privat Disabilitas" HorizontalOptions="Center"
 TextColor="White" />
 <Image Source="logoedufabel.png" Margin="0,10,0,0" HeightRequest="100" WidthRequest="100" HorizontalOptions="Center" />
 </StackLayout>
 <StackLayout VerticalOptions="StartAndExpand" BackgroundColor="White" Margin="30,15,30,40" Padding="40,25,40,5">
 <Label Text="LOGIN" Margin="0,0,0,10" TextColor="Red" FontAttributes="Bold" FontSize="Large" 
 HorizontalOptions="CenterAndExpand" />
 <Label Text="Email" />
 <Entry x:Name="emailEntry" Placeholder="Email" Keyboard="Email" />
 <Label Text="Password" />
 <Entry x:Name="passwordEntry" Placeholder="Password" IsPassword="true" />
 <Grid>
 <Grid.ColumnDefinitions>
 <ColumnDefinition Width="5*" />
 <ColumnDefinition Width="5*"/>
 </Grid.ColumnDefinitions>
 <Button x:Name="btnLogin" Text="LOGIN SISWA" Clicked="OnLoginButtonClicked" FontSize="Small" 
 FontAttributes="Bold" TextColor="White" BackgroundColor="Red" HorizontalOptions="Fill"
 HeightRequest="55" Grid.Column="0" >
 </Button>
 <Button x:Name="btnLoginGuru" Text="LOGIN GURU" FontSize="Small" Clicked="OnLoginGuruClicked"
 VerticalOptions="Fill" Grid.Column="1" HorizontalOptions="Fill"
 FontAttributes="Bold" TextColor="White" BackgroundColor="MediumVioletRed" HeightRequest="55">
 </Button>
 </Grid>
 <Label x:Name="messageLabel" />
 <Label x:Name="lblSignUp" Text="BELUM PUNYA AKUN?" FontAttributes="Bold" TextColor="Red" 
 FontSize="Small" HorizontalOptions="CenterAndExpand" />

</StackLayout>

</StackLayout>
 </Grid>
 </ScrollView>
 </ContentPage.Content>
</ContentPage>

Hasil tampilan ketika project LoginPage.xaml dijalankan dapat dilihat pada gambar berikut:

Screenshot_2017-06-05-07-58-53[1]

Membuat Form Register EduFabel

Pertama, tambahkan halaman baru dengan nama SignUpPage.xaml pada project portable. Kemudian tambahkan kode xaml 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:local="clr-namespace:EduFabel;"
 x:Class="EduFabel.SignUpPage"
 Title="Sign Up Siswa"
 BackgroundColor="Red">

<ContentPage.Content>
 <ScrollView>
 <Grid x:Name="gvUser">
 <StackLayout>
 <StackLayout HorizontalOptions="CenterAndExpand" Margin="0,30,0,0">
 <Label Text="Halaman Pendaftaran Siswa EduFabel!" 
 TextColor="White" HorizontalOptions="Center" FontAttributes="Bold" FontSize="Medium" />
 <Label Text="Silahkan Register terlebih dahulu!" 
 HorizontalOptions="Center"
 TextColor="White" FontSize="Small" />
 </StackLayout>

<StackLayout HorizontalOptions="CenterAndExpand" Margin="0,25,0,0">
 <Label Text="DAFTAR SEBAGAI GURU" x:Name="lblGuru"
 HorizontalOptions="Center" FontAttributes="Bold"
 TextColor="Red" BackgroundColor="White" FontSize="Medium" />
 </StackLayout>
 <StackLayout VerticalOptions="StartAndExpand" BackgroundColor="White" 
 Margin="30,25,30,30" Padding="40,25,40,5">
 <Label Text="REGISTER SISWA" Margin="0,0,0,10" TextColor="Red" FontAttributes="Bold" 
 FontSize="Large" HorizontalOptions="CenterAndExpand" />

<Label Text="Nama Lengkap" />
 <Entry x:Name="namalengkapEntry" Keyboard="Text" Placeholder="Nama Lengkap" />
 <Label Text="Email" />
 <Entry x:Name="emailEntry" Placeholder="Email" Keyboard="Email" />
 <Label Text="Jenis Kelamin" />
 <Picker Title="Pilih Jenis Kelamin"
 x:Name="jeniskelaminEntry" VerticalOptions="Center">
 <Picker.Items>
 <x:String>Laki-laki</x:String>
 <x:String>Perempuan</x:String>
 </Picker.Items>
 </Picker>

<Label Text="Jenis Disablitas" />
 <Picker Title="Pilih Jenis Disabilitas"
 x:Name="jenisdifabelEntry" VerticalOptions="Center">
 <Picker.Items>
 <x:String>Tunanetra</x:String>
 <x:String>Tunarungu</x:String>
 <x:String>Tunadaksa</x:String>
 <x:String>Tunalaras</x:String>
 <x:String>Tunagrahita</x:String>
 <x:String>Tunadaksa</x:String>
 <x:String>Tunaganda</x:String>
 </Picker.Items>
 </Picker>

<Label Text="Kelas" />
 <Picker Title="Pilih Kelas" 
 x:Name="kelasEntry" VerticalOptions="Center">
 <Picker.Items>
 <x:String>Kelas TK/PAUD</x:String>
 <x:String>Kelas I</x:String>
 <x:String>Kelas II</x:String>
 <x:String>Kelas III</x:String>
 <x:String>Kelas IV</x:String>
 <x:String>Kelas V</x:String>
 <x:String>Kelas VI</x:String>
 <x:String>Kelas VII</x:String>
 <x:String>Kelas VIII</x:String>
 <x:String>Kelas IX</x:String>
 <x:String>Kelas X</x:String>
 <x:String>Kelas XI IPA</x:String>
 <x:String>Kelas XI IPS</x:String>
 <x:String>Kelas XII IPA</x:String>
<x:String>Kelas XII IPS</x:String>
 <x:String>Diploma</x:String>
 <x:String>S1</x:String>
 <x:String>S2</x:String>
 <x:String>S3</x:String>
 <x:String>Umum</x:String>
 </Picker.Items>
 </Picker>

<Label Text="Nomor Handphone" />
 <Entry x:Name="nohpEntry" Keyboard="Telephone" Placeholder="NO HP" />
 <Label Text="Password" />
 <Entry x:Name="passwordEntry" IsPassword="true" Placeholder="Password" />
 <Button BorderRadius="50" Text="Sign Up" Clicked="OnSignUpButtonClicked" 
 FontSize="Small" FontAttributes="Bold" TextColor="White" BackgroundColor="Red" 
 HeightRequest="55"/>
 <Label x:Name="messageLabel" />

<Label x:Name="lblLogin" Text="SUDAH PUNYA AKUN?" FontAttributes="Bold" TextColor="Red" 
 FontSize="Small" HorizontalOptions="CenterAndExpand" />

</StackLayout>
 </StackLayout>
 </Grid>
 </ScrollView>
 </ContentPage.Content>
</ContentPage>

Hasil tampilan ketika project SignUpPage.xaml dijalankan dapat dilihat pada gambar berikut:

Screenshot_2017-06-05-07-59-03[1]

Bagaimana ? membuat User Interface sangat menarik bukan ? tetap simak terus ya guys.. masih ada lagi  hal menarik yang harus dicoba pada aplikasi anda..

Membuat Navigasi di Xamarin Forms

Navigasi digunakan memudahkan pengguna pindah antar halaman. Fitur Navigasi meliputi yaitu menu, tap icon, tombol, tabs, dan list items.

Ada beberapa jenis navigasi yang dapat digunakan, diantaranya yaitu :

  • Hierarchical
  • Modal
  • Drill-down
  • Navigation drawer
  • Tab Pages
  • Springboard
  • Carousel
  • Master Pages

Seperti pembahasan sebelumnya, Selanjutnya saya akan membahas Implementasi Navigasi  di project yang telah saya buat yaitu Membuat Menu Page dan Account Page yang meliputi komponen Master Pages dan Tab Page.

  • Master Pages : Navigasi menu yang letaknya sebelah kiri halaman dan sebelah kanan yang berisi konten halaman
  • Tab Pages: Kumpulan halaman yang dijadikan pada satu halaman dengan pindah halaman tanpa muat ulang lagi

 

Membuat Menu Page Siswa EduFabel

Pertama, tambahkan halaman baru atau sudah ada dengan nama MainPage.xaml pada project portable. Kemudian tambahkan kode xaml berikut:

<?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:local="clr-namespace:EduFabel;" 
 x:Class="EduFabel.MainPage">
 <MasterDetailPage.Master>
 <local:MasterPage x:Name="masterPage" />
 </MasterDetailPage.Master>
 <MasterDetailPage.Detail>
 <NavigationPage>
 <x:Arguments>
 <local:OrderPage />
 </x:Arguments>
 </NavigationPage>
 </MasterDetailPage.Detail>
</MasterDetailPage>

Keterangan :

*Argument yang di dalamnya terdapat local:OrderPage berfungsi sebagai jika halaman dijalankan maka yang tampil pertama kali halaman OrderPage.

Kedua, membuat class MasterPageItem.cs digunakan untuk berisi data dari menu yang akan ditampilkan. tambahkan sebuah class MasterPageItem.cs pada folder Models pada project portable.

*Jika belum membuat folder Models, buat terlebih dahulu folder Models pada project portable.

public class MasterPageItem 
{ 
public string Title { get; set; } 
public string IconSource { get; set; } 
public Type TargetType { get; set; } 
}

Ketiga, pada MainPage.cs tambahkan kode berikut ini.

public partial class MainPage : MasterDetailPage 
{ 
public MainPage () 
{ 
InitializeComponent (); 
masterPage.ListView.ItemSelected += OnItemSelected; 
} 
 
void OnItemSelected (object sender, SelectedItemChangedEventArgs e) 
{ 
var item = e.SelectedItem as MasterPageItem; 
if (item != null) { 
Detail = new NavigationPage ((Page)Activator.CreateInstance (item.TargetType)); 
masterPage.ListView.SelectedItem = null; 
IsPresented = false; 
} 
} 
}

Keempat, Buat halaman xaml dengan nama MasterPage.xaml di project portable untuk menampilkan daftar menu.

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
 x:Class="EduFabel.MasterPage"
 xmlns:local="clr-namespace:EduFabel;"
 Title="Siswa Page">
 <ContentPage.Content>
 <StackLayout BackgroundColor="#af0000">
 <StackLayout Orientation="Horizontal" Margin="30,30,0,15" 
 HorizontalOptions="StartAndExpand" >
 <Image Source="account.png" Aspect="AspectFit" />
 <Label x:Name="lblUser" FontSize="18" FontAttributes="Bold"
 VerticalTextAlignment="Center" Margin="10,0,0,0" TextColor="White" />
 </StackLayout>
 <ListView x:Name="listView" ItemsSource="{Binding ListItems}"
 SeparatorVisibility="None" HasUnevenRows="True">
 <ListView.ItemTemplate>
 <DataTemplate>
 <ViewCell>
 <StackLayout Orientation="Horizontal" Margin="30,15,0,15" 
 HorizontalOptions="StartAndExpand" >
 <Image Source="{Binding IconSource}" Aspect="AspectFit" />
 <Label Text="{Binding Title}" FontSize="16"
 VerticalTextAlignment="Center" Margin="10,0,0,0" TextColor="White" />
 </StackLayout>
 </ViewCell>
 </DataTemplate>
 </ListView.ItemTemplate>
 </ListView>
 </StackLayout>
 </ContentPage.Content>
</ContentPage>

Kelima, tambahkan item kontrol ListView dan Label untuk menampilkan menu. kemudian pada MasterPage.xaml.cs tambahkan kode berikut:

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

using Xamarin.Forms;
using Xamarin.Forms.Xaml;
using EduFabel.Models;

namespace EduFabel
{
 [XamlCompilation(XamlCompilationOptions.Compile)]
 public partial class MasterPage : ContentPage
 {
 public ListView ListView { get { return listView; } }
 public static string sessionEmail { get; set; }

public MasterPage()
 {
 InitializeComponent();

var masterPageItems = new List<MasterPageItem>();

masterPageItems.Add(new MasterPageItem
 {
 Title = "Order",
 IconSource = "order.png",
 TargetType = typeof(OrderPage)
 });
 masterPageItems.Add(new MasterPageItem
 {
 Title = "History",
 IconSource = "history.png",
 TargetType = typeof(HistorySiswaPage)
 });

masterPageItems.Add(new MasterPageItem
 {
 Title = "List Guru",
 IconSource = "guru.png",
 TargetType = typeof(ListGuruPage)
 });

masterPageItems.Add(new MasterPageItem
 {
 Title = "Account",
 IconSource = "settings.png",
 TargetType = typeof(AccountSiswaPage)
 });

masterPageItems.Add(new MasterPageItem
 {
 Title = "Logout",
 IconSource = "logout.png",
 TargetType = typeof(LoginPage)
 });

listView.ItemsSource = masterPageItems;
 }


 }
}

Untuk menambahkan icon file berupa .png. anda dapat menaruh file project Android pada folder Resources\drawable. File yang dibutuhkan pada project di atas seperti order.png, guru.png, settings.png, guru.png.

Jika terdapat error warna merah pada OrderPage, HistorySiswaPage, ListGuruPage, AccountSiswaPage. Karena halaman tersebut belum dibuat. Setelah itu akan membuat halaman tersebut satu per satu.

Keenam, Buat halaman xaml dengan nama OrderPage.Xaml untuk menampilkan halaman order dengan 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" 
 x:Class="EduFabel.OrderPage"
 xmlns:local="clr-namespace:EduFabel;"
 Title="Order Guru"
BackgroundColor="#e5e5e5">
 <ContentPage.Content>
 <ScrollView>
 <StackLayout BackgroundColor="White" Orientation="Vertical" VerticalOptions="FillAndExpand"
 Margin="10,10,10,10" Padding="20,20,20,20" HeightRequest="760" WidthRequest="500" >
 <Label Text="Pesan Guru Les Privat
" FontAttributes="Bold" TextColor="Black"
 FontSize="Large" HorizontalOptions="CenterAndExpand" />
 <Grid x:Name="gvOrder">
 <Grid.ColumnDefinitions>
 <ColumnDefinition Width="3*" />
 <ColumnDefinition Width="0.5*" />
 <ColumnDefinition Width="6.5*"/>
 </Grid.ColumnDefinitions>
 <Grid.RowDefinitions>
 <RowDefinition Height="Auto"/>
 <RowDefinition Height="Auto"/>
 <RowDefinition Height="Auto"/>
 <RowDefinition Height="Auto"/>
 <RowDefinition Height="Auto"/>
 <RowDefinition Height="Auto"/>
 <RowDefinition Height="Auto"/>
 <RowDefinition Height="Auto"/>
 <RowDefinition Height="Auto"/>
 <RowDefinition Height="Auto"/>
 <RowDefinition Height="Auto"/>
 <RowDefinition Height="Auto"/>
 </Grid.RowDefinitions>

<Label Text="Nama Lengkap" FontSize="14" TextColor="Black" />
 <Label Text=":" FontSize="14" TextColor="Black" Grid.Row="0" Grid.Column="1" />
 <Entry x:Name="namalengkapEntry" Keyboard="Text" Grid.Row="0" Grid.Column="2"
 Placeholder="Nama Lengkap" />

<Label Text="Jenis Disablitas" FontSize="14" TextColor="Black" Grid.Row="1" Grid.Column="0" />
 <Label Text=":" FontSize="14" TextColor="Black" Grid.Row="1" Grid.Column="1" />
 <Picker Title="Pilih Jenis Disabilitas" Grid.Row="1" Grid.Column="2"
 x:Name="jenisdifabelEntry" VerticalOptions="Center">
 <Picker.Items>
 <x:String>Tunanetra</x:String>
 <x:String>Tunarungu</x:String>
 <x:String>Tunadaksa</x:String>
 <x:String>Tunalaras</x:String>
 <x:String>Tunagrahita</x:String>
 <x:String>Tunadaksa</x:String>
 <x:String>Tunaganda</x:String>
 </Picker.Items>
 </Picker>
 <Label Text="Nomor Handphone" FontSize="14" TextColor="Black" Grid.Row="2" 
 Grid.Column="0" />
 <Label Text=":" FontSize="14" TextColor="Black" Grid.Row="2" Grid.Column="1" />
 <Entry x:Name="nohpEntry" Keyboard="Telephone" Grid.Row="2" 
 Grid.Column="2" Placeholder="No HP" />

<Label Text="Alamat" FontSize="14" TextColor="Black" Grid.Row="3" 
 Grid.Column="0" />
 <Label Text=":" FontSize="14" TextColor="Black" Grid.Row="3" Grid.Column="1" />
 <Entry x:Name="alamatEntry" Grid.Row="3" 
 Grid.Column="2" Placeholder="Alamat" Keyboard="Text" />


 <Label Text="Kota" TextColor="Black" FontSize="14" Grid.Row="4" 
 Grid.Column="0" />
 <Label Text=":" FontSize="14" TextColor="Black" Grid.Row="4" Grid.Column="1" />
 <Entry x:Name="kotaEntry" Grid.Row="4" 
 Grid.Column="2" Placeholder="Kota" Keyboard="Text" />

<Label Text="Kelas" Grid.Row="5" FontSize="14"
 Grid.Column="0" TextColor="Black" />
 <Label Text=":" FontSize="14" TextColor="Black" Grid.Row="5" Grid.Column="1" />
 <Picker Title="Pilih Kelas" Grid.Row="5" 
 Grid.Column="2"
 x:Name="kelasEntry" VerticalOptions="Center">
 <Picker.Items>
 <x:String>Kelas TK/PAUD</x:String>
 <x:String>Kelas I</x:String>
 <x:String>Kelas II</x:String>
 <x:String>Kelas III</x:String>
 <x:String>Kelas IV</x:String>
 <x:String>Kelas V</x:String>
 <x:String>Kelas VI</x:String>
 <x:String>Kelas VII</x:String>
 <x:String>Kelas VIII</x:String>
 <x:String>Kelas IX</x:String>
 <x:String>Kelas X</x:String>
 <x:String>Kelas XI IPA</x:String>
 <x:String>Kelas XI IPS</x:String>
 <x:String>Kelas XII IPA</x:String>
 <x:String>Kelas XII IPS</x:String>
 <x:String>Diploma</x:String>
 <x:String>S1</x:String>
 <x:String>S2</x:String>
 <x:String>S3</x:String>
 <x:String>Umum</x:String>
 </Picker.Items>
 </Picker>

<Label Text="Mata Pelajaran" FontSize="14" TextColor="Black" Grid.Row="6" 
 Grid.Column="0" />
 <Label Text=":" FontSize="14" TextColor="Black" Grid.Row="6" Grid.Column="1" />
 <Picker Title="Pilih Mata Pelajaran" Grid.Row="6" Grid.Column="2"
 x:Name="mapelEntry" VerticalOptions="Center">
 <Picker.Items>
 <x:String>Matematika</x:String>
 <x:String>Bahasa Inggris</x:String>
 <x:String>Bahasa Indonesia</x:String>
 <x:String>IPA</x:String>
 <x:String>IPS</x:String>
 <x:String>Biologi</x:String>
 <x:String>Fisika</x:String>
 <x:String>Kimia</x:String>
 <x:String>Ekonomi</x:String>
 <x:String>Geografi</x:String>
 <x:String>Sejarah</x:String>
 <x:String>PKN</x:String>
 </Picker.Items>
 </Picker>

<Label Text="Mulai Belajar" FontSize="14" TextColor="Black" Grid.Row="7" 
 Grid.Column="0" />
 <Label Text=":" FontSize="14" TextColor="Black" Grid.Row="7" Grid.Column="1" />
 <DatePicker x:Name="mulaibelajarEntry" Grid.Row="7" Grid.Column="2"
 VerticalOptions="CenterAndExpand" MinimumDate="01/01/1990"
 MaximumDate="12/31/2030" />

<Label Text="Jumlah Jam" FontSize="14" TextColor="Black" Grid.Row="8" 
 Grid.Column="0" />
 <Label Text=":" FontSize="14" TextColor="Black" Grid.Row="8" Grid.Column="1" />
 <Entry x:Name="jumlahjamEntry" Grid.Row="8" 
 Grid.Column="2" Keyboard="Numeric" Placeholder="Jumlah Jam" />

<Label Text="Email Guru" TextColor="Black" FontSize="14" Grid.Row="9" 
 Grid.Column="0" />
 <Label Text=":" FontSize="14" TextColor="Black" Grid.Row="9" Grid.Column="1" />
 <Picker x:Name="guruEntry" Grid.Row="9" 
 Grid.Column="2" ItemDisplayBinding="{Binding Email}" Title="Pilih Email Guru" 
 />

</Grid>
 <Button Margin="0,10,0,0" Text="KIRIM" Clicked="OnOrderButtonClicked"
 FontSize="Small" FontAttributes="Bold" TextColor="White" BackgroundColor="Red" 
 />
 <Label Text="*Tarif Les Privat Rp 30.000 / Jam" TextColor="Red" FontAttributes="Bold" />
 <Label x:Name="messageLabel" />
 </StackLayout>
 </ScrollView>
 </ContentPage.Content>
</ContentPage>

Ketujuh, Buat halaman xaml dengan nama HistorySiswaPage.Xaml untuk menampilkan halaman history order siswa dengan 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" 
 x:Class="EduFabel.HistorySiswaPage" 
 Title="History">
 <ContentPage.Content>
 <Grid x:Name="gvAccount">
 <ActivityIndicator 
 HorizontalOptions="Center" 
 VerticalOptions="Center" 
 IsVisible="False" 
 IsEnabled="True" 
 x:Name="syncIndicator"/>
 <ScrollView>
 <StackLayout Margin="30,10,30,10">

<ListView x:Name="listViewHistorySiswa" ItemTapped="ListView_OnItemTapped"
 IsPullToRefreshEnabled="True" Refreshing="ListView_OnRefreshing"
 RowHeight="100">
 <ListView.ItemTemplate>
 <DataTemplate>
 <ViewCell>

<Grid x:Name="gvAccount">
 <Grid.ColumnDefinitions>
 <ColumnDefinition Width="4*" />
 <ColumnDefinition Width="4*" />
 <ColumnDefinition Width="2*"/>
 </Grid.ColumnDefinitions>
 <Grid.RowDefinitions>
 <RowDefinition Height="Auto"/>
 <RowDefinition Height="Auto"/>
 <RowDefinition Height="Auto"/>

</Grid.RowDefinitions>

<Label HorizontalOptions="Start" TextColor="Red" FontSize="14" 
 FontAttributes="Bold" VerticalTextAlignment="Center" Grid.Row="0" Grid.Column="0"
 Text="{Binding Guru}"/>
 <Label HorizontalOptions="Start" FontSize="12" TextColor="Black" 
 VerticalTextAlignment="Center" Grid.Row="1" 
 Grid.Column="0"
 Text="{Binding Mapel}"/>
 <Label HorizontalOptions="Start" TextColor="Red" FontSize="14" FontAttributes="Bold" Grid.Row="0" 
 Grid.Column="1" VerticalTextAlignment="Center"
 Text="{Binding Mulaibelajar}"/>
 <Label HorizontalOptions="Start" FontSize="12" TextColor="Black" 
 VerticalTextAlignment="Center" Grid.Row="1" 
 Grid.Column="1"
 Text="{Binding Jumlahbayar}"/>
 <Image HorizontalOptions="End" Aspect="AspectFit" VerticalOptions="CenterAndExpand"
 Source="status.png" IsVisible="{Binding Status}" Grid.Row="1" 
 Grid.Column="2" />
 </Grid>
 </ViewCell>
 </DataTemplate>
 </ListView.ItemTemplate>
 </ListView>
 </StackLayout>
 </ScrollView>
 </Grid>
 </ContentPage.Content>
</ContentPage>

Kedelepan, Buat halaman xaml dengan nama ListGuruPage.Xaml untuk menampilkan halaman daftar guru dengan 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"
 x:Class="EduFabel.ListGuruPage"
 xmlns:local="clr-namespace:EduFabel;"
 Title="List Guru">

<ContentPage.Content>
 <Grid x:Name="gvAccount">
 <ActivityIndicator 
 HorizontalOptions="Center" 
 VerticalOptions="Center" 
 IsVisible="False" 
 IsEnabled="True" 
 x:Name="syncIndicator"/>
 <ScrollView>
 <StackLayout Margin="30,10,30,10">

<ListView x:Name="listViewListGuru" ItemTapped="ListView_OnItemTapped"
 IsPullToRefreshEnabled="True" Refreshing="ListView_OnRefreshing" RowHeight="100">
 <ListView.ItemTemplate>
 <DataTemplate>
 <ViewCell>

<Grid x:Name="gvAccount">
 <Grid.ColumnDefinitions>
 <ColumnDefinition Width="3.5*" />
 <ColumnDefinition Width="3.5*" />
 <ColumnDefinition Width="3*"/>
 </Grid.ColumnDefinitions>
 <Grid.RowDefinitions>
 <RowDefinition Height="Auto"/>
 <RowDefinition Height="Auto"/>
 <RowDefinition Height="Auto"/>

</Grid.RowDefinitions>
 <Label HorizontalOptions="Start" TextColor="Red" FontSize="14" 
 FontAttributes="Bold" VerticalTextAlignment="Center" Grid.Row="0" Grid.Column="0"
 Text="{Binding Namalengkap}"/>
 <Label HorizontalOptions="Start" FontSize="12" TextColor="Black" Grid.Row="1" 
 Grid.Column="0"
 VerticalTextAlignment="Center"
 Text="{Binding Nohp}"/>
 
 <Label HorizontalOptions="Start" TextColor="Red" FontSize="14" FontAttributes="Bold" VerticalTextAlignment="Center"
 Text="{Binding Kota}" Grid.Row="0" Grid.Column="1" />
 <Label HorizontalOptions="Start" FontSize="12" TextColor="Black" 
 VerticalTextAlignment="Center" Grid.Row="1" 
 Grid.Column="1"
 Text="{Binding Email}"/>


 <Label HorizontalOptions="Start" FontSize="14" TextColor="Black" Grid.Row="0" 
 Grid.Column="2"
 VerticalOptions="CenterAndExpand" VerticalTextAlignment="Center"
 Text="{Binding Mapel}"/>
 </Grid>
 </ViewCell>
 </DataTemplate>
 </ListView.ItemTemplate>
 </ListView>
 </StackLayout>
 </ScrollView>
 </Grid>
 </ContentPage.Content>

</ContentPage>

Kesembilan, Buat halaman xaml dengan nama AccountSiswaPage.Xaml untuk menampilkan halaman Akun Siswa dengan 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"
 x:Class="EduFabel.AccountSiswaPage" 
 Title="Detail Akun"
 BackgroundColor="#e5e5e5">
 <ContentPage.Content>
 <Grid x:Name="gvAccount">

<ScrollView>
 <StackLayout BackgroundColor="White" HorizontalOptions="StartAndExpand" Orientation="Vertical"
 Margin="10,10,10,10" Padding="20,20,20,20" HeightRequest="760" WidthRequest="600" >
 <Label Text="Ubah Detail Akun
" FontAttributes="Bold" TextColor="Black" 
 FontSize="Large" HorizontalOptions="CenterAndExpand" />
 <ActivityIndicator 
 HorizontalOptions="Center" 
 VerticalOptions="Center" 
 IsVisible="False" 
 IsEnabled="True" 
 x:Name="syncIndicator"/>
 <ListView x:Name="listViewAccountSiswa" ItemTapped="ListView_OnItemTapped" RowHeight="760" 
 SeparatorVisibility="None"
 IsPullToRefreshEnabled="True" Refreshing="ListView_OnRefreshing">

<ListView.ItemTemplate>
 <DataTemplate>
 <ViewCell>

<Grid x:Name="gvAccount">
 <Grid.ColumnDefinitions>
 <ColumnDefinition Width="4.5*" />
 <ColumnDefinition Width="0.5*" />
 <ColumnDefinition Width="5*"/>
 </Grid.ColumnDefinitions>
 <Grid.RowDefinitions>
 <RowDefinition Height="40"/>
 <RowDefinition Height="40"/>
 <RowDefinition Height="40"/>
 <RowDefinition Height="40"/>
 <RowDefinition Height="40"/>
 <RowDefinition Height="40"/>
 <RowDefinition Height="40"/>
 <RowDefinition Height="40"/>
 <RowDefinition Height="40"/>
 <RowDefinition Height="40"/>
 <RowDefinition Height="40"/>

</Grid.RowDefinitions>

<Label Text="Nama Lengkap" HorizontalOptions="Start"
 FontSize="14" FontAttributes="Bold" TextColor="Red">
 </Label>
 <Label Text=":" FontSize="Medium" TextColor="Black" Grid.Row="0" Grid.Column="1" />
 <Label HorizontalOptions="Start" Grid.Row="0" Grid.Column="2"
 Text="{Binding Namalengkap}" FontSize="14" TextColor="Black" />

<Label Text="Jenis Kelamin" HorizontalOptions="Start" Grid.Row="1" 
 Grid.Column="0" FontSize="14" FontAttributes="Bold" TextColor="Red">
 </Label>
 <Label Text=":" FontSize="Medium" TextColor="Black" Grid.Row="1" Grid.Column="1" />
 <Label HorizontalOptions="Start" Grid.Row="1" Grid.Column="2"
 Text="{Binding Jeniskelamin}" FontSize="14" TextColor="Black" />

<Label Text="Jenis Difabel" HorizontalOptions="Start" Grid.Row="2" 
 Grid.Column="0" FontSize="14" FontAttributes="Bold" TextColor="Red">
 </Label>
 <Label Text=":" FontSize="Medium" TextColor="Black" Grid.Row="2" Grid.Column="1" />
 <Label HorizontalOptions="Start" Grid.Row="2" Grid.Column="2"
 Text="{Binding Jenisdifabel}" FontSize="14" TextColor="Black" />

<Label Text="No HP" HorizontalOptions="Start" Grid.Row="3" Grid.Column="0"
 FontSize="14" FontAttributes="Bold" TextColor="Red">
 </Label>
 <Label Text=":" FontSize="Medium" TextColor="Black" Grid.Row="3" Grid.Column="1" />
 <Label HorizontalOptions="Start" Grid.Row="3" Grid.Column="2"
 Text="{Binding Nohp}" FontSize="14" TextColor="Black" />

<Label Text="Email" HorizontalOptions="Start" Grid.Row="4" Grid.Column="0"
 FontSize="14" FontAttributes="Bold" TextColor="Red">
 </Label>
 <Label Text=":" FontSize="Medium" TextColor="Black" Grid.Row="4" Grid.Column="1" />
 <Label HorizontalOptions="Start" Text="{Binding Email}" Grid.Row="4" Grid.Column="2"
 FontSize="14" TextColor="Black" />

<Label Text="Alamat" HorizontalOptions="Start" Grid.Row="5" Grid.Column="0"
 FontSize="14" FontAttributes="Bold" TextColor="Red">
 </Label>
 <Label Text=":" FontSize="Medium" TextColor="Black" Grid.Row="5" Grid.Column="1" />
 <Label HorizontalOptions="Start" Grid.Row="5" Grid.Column="2"
 Text="{Binding Alamat}" FontSize="14" TextColor="Black" />

<Label Text="Provinsi" HorizontalOptions="Start" Grid.Row="6" Grid.Column="0"
 FontSize="14" FontAttributes="Bold" TextColor="Red">
 </Label>
 <Label Text=":" FontSize="Medium" TextColor="Black" Grid.Row="6" Grid.Column="1" />
 <Label HorizontalOptions="Start" Grid.Row="6" Grid.Column="2"
 Text="{Binding Provinsi}" FontSize="14" TextColor="Black" />

<Label Text="Kota" HorizontalOptions="Start" Grid.Row="7" Grid.Column="0"
 FontSize="14" FontAttributes="Bold" TextColor="Red">
 </Label>
 <Label Text=":" FontSize="Medium" TextColor="Black" Grid.Row="7" Grid.Column="1" />
 <Label HorizontalOptions="Start" Grid.Row="7" Grid.Column="2"
 Text="{Binding Kota}" FontSize="14" TextColor="Black" />

<Label Text="Kelas" HorizontalOptions="Start" Grid.Row="8" Grid.Column="0"
 FontSize="14" FontAttributes="Bold" TextColor="Red">
 </Label>
 <Label Text=":" FontSize="Medium" TextColor="Black" Grid.Row="8" Grid.Column="1" />
 <Label HorizontalOptions="Start" Grid.Row="8" Grid.Column="2"
 Text="{Binding Kelas}" FontSize="14" TextColor="Black" />

<Label Text="Sekolah atau Instansi" HorizontalOptions="Start" Grid.Row="9" Grid.Column="0"
 FontSize="14" FontAttributes="Bold" TextColor="Red">
 </Label>
 <Label Text=":" FontSize="Medium" TextColor="Black" Grid.Row="9" Grid.Column="1" />
 <Label HorizontalOptions="Start" Grid.Row="9" Grid.Column="2"
 Text="{Binding Sekolah}" FontSize="14" TextColor="Black" />
 </Grid>

</ViewCell>
 </DataTemplate>
 </ListView.ItemTemplate>
 </ListView>
 </StackLayout>
 </ScrollView>
 </Grid>
 </ContentPage.Content>
</ContentPage>

 

Setelah selesai buat beberapa halaman pada master page, sekarang tambahkan kode berikut pada file App.cs untuk menjalankan halaman MainPage ketika applikasi dijalankan pertama kali.

public App () 
{ 
MainPage = new EduFabel.MainPage(); 
}

Tekan F5 atau Jalankan pada device anda. hasil tampilan ketika project MainPage.xaml dijalankan dapat dilihat pada gambar berikut:

Screenshot_2017-06-05-11-32-55[1]

 

Membuat Account Siswa Page EduFabel

Pertama, Tambahkan halaman xaml dengan nama TabAcountPage.xml. Kemudian tambahkan kode berikut dibawah 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:local="clr-namespace:EduFabel;"
 x:Class="EduFabel.TabAccountPage"
 Title="Account">
 <local:UpdateDetailAkunPage />
 <local:UbahPasswordSiswaPage />

</TabbedPage>

Kedua, Pada file class TabAccountPage.xaml.cs tambahkan kode berikut dibawah ini.

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

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace EduFabel
{
 [XamlCompilation(XamlCompilationOptions.Compile)]
 public partial class TabAccountPage : TabbedPage
 {
 public TabAccountPage()
 {
 InitializeComponent();


 }
 }
}

Ketiga, Tambahkan halaman xaml dengan nama UpdateDetailAkunPage.xaml. kemudian tambahkan kode berikut ini:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
 x:Class="EduFabel.UpdateDetailAkunPage"
 xmlns:local="clr-namespace:EduFabel;"
 Title="Ubah Detail Akun">
 <Grid x:Name="gvUbahAkun">
 <ScrollView>
 <StackLayout VerticalOptions="FillAndExpand" Orientation="Vertical" 
 HorizontalOptions="FillAndExpand" 
 Padding="20,10,20,5">

<Label Text="
Nama Lengkap" />
 <Entry x:Name="namalengkapEntry" Text="{Binding Namalengkap}" Keyboard="Text" Placeholder="Nama Lengkap" />

<Label Text="Jenis Kelamin" />
 <Picker Title="Pilih Jenis Kelamin" SelectedItem="{Binding Jeniskelamin, Mode=TwoWay}"
 x:Name="jeniskelaminEntry" VerticalOptions="Center">
 <Picker.Items>
 <x:String>Laki-laki</x:String>
 <x:String>Perempuan</x:String>
 </Picker.Items>
 </Picker>

<Label Text="Jenis Disablitas" />

<Picker Title="Pilih Kelas" SelectedItem="{Binding Jenisdifabel, Mode=TwoWay}"
 x:Name="jenisdifabelEntry" VerticalOptions="Center">
 <Picker.Items>
 <x:String>Tunanetra</x:String>
 <x:String>Tunarungu</x:String>
 <x:String>Tunadaksa</x:String>
 <x:String>Tunalaras</x:String>
 <x:String>Tunagrahita</x:String>
 <x:String>Tunadaksa</x:String>
 <x:String>Tunaganda</x:String>
 </Picker.Items>
 </Picker>

<Label Text="Nomor Handphone" />
 <Entry x:Name="nohpEntry" Text="{Binding Nohp}" Keyboard="Telephone" Placeholder="NO HP" />

<Label Text="Alamat" />
 <Entry x:Name="alamatEntry" Text="{Binding Alamat}" Placeholder="Alamat" Keyboard="Text" />

<Label Text="Provinsi" />
 <Entry x:Name="provinsiEntry" Text="{Binding Provinsi}" Placeholder="Provinsi" Keyboard="Text" />

<Label Text="Kota" />
 <Entry x:Name="kotaEntry" Text="{Binding Kota}" Placeholder="Kota" Keyboard="Text" />

<Label Text="Kelas" />

<Picker Title="Pilih Kelas" SelectedItem="{Binding Kelas, Mode=TwoWay}"
 x:Name="kelasEntry" VerticalOptions="Center">
 <Picker.Items>
 <x:String>Kelas TK/PAUD</x:String>
 <x:String>Kelas I</x:String>
 <x:String>Kelas II</x:String>
 <x:String>Kelas III</x:String>
 <x:String>Kelas IV</x:String>
 <x:String>Kelas V</x:String>
 <x:String>Kelas VI</x:String>
 <x:String>Kelas VII</x:String>
 <x:String>Kelas VIII</x:String>
 <x:String>Kelas IX</x:String>
 <x:String>Kelas X</x:String>
 <x:String>Kelas XI IPA</x:String>
 <x:String>Kelas XI IPS</x:String>
 <x:String>Kelas XII IPA</x:String>
 <x:String>Kelas XII IPS</x:String>
 <x:String>Diploma</x:String>
 <x:String>S1</x:String>
 <x:String>S2</x:String>
 <x:String>S3</x:String>
 <x:String>Umum</x:String>
 </Picker.Items>
 </Picker>

<Label Text="Sekolah atau Institusi" />
 <Entry x:Name="sekolahEntry" Text="{Binding Sekolah}" Placeholder="Sekolah atau Institusi" />

<Button BorderRadius="50" Text="Save" 
 FontSize="Small" FontAttributes="Bold" TextColor="White" BackgroundColor="Red" 
 HeightRequest="55"/>
 <Label x:Name="messageLabel" />

</StackLayout>
 </ScrollView>
 </Grid>
</ContentPage>

Keempat, Tambahkan halaman xaml dengan nama UpdatePasswordSiswaPage.xaml. kemudian tambahkan kode berikut ini:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
 x:Class="EduFabel.UbahPasswordSiswaPage"
 Title="Ubah Password"
 >
 <ContentPage.Content>
 <Grid x:Name="gvUser">
 <ScrollView>
 <StackLayout VerticalOptions="StartAndExpand"
 Padding="20,10,20,5">
 <Label Text="
Password Baru" />
 <Entry x:Name="passwordEntry" 
 Placeholder="Masukkan Password Baru" Text="{Binding Password}" IsPassword="True" />

<Label Text="Ulang Password Baru" />
 <Entry x:Name="repasswordEntry" IsPassword="True" 
 Placeholder="Masukkan Ulang Password Baru" Keyboard="Text" />

<Button BorderRadius="50" Text="Save"
 FontSize="Small" FontAttributes="Bold" TextColor="White" BackgroundColor="Red" 
 HeightRequest="55"/>
 <Label x:Name="messageLabel" />

</StackLayout>
 </ScrollView>
 </Grid>
 </ContentPage.Content>
</ContentPage>

 

Setelah selesai buat beberapa halaman pada tab page, sekarang tambahkan kode berikut pada file App.cs untuk menjalankan halaman TabAccountPage ketika applikasi dijalankan pertama kali.

public App () 
{ 
MainPage = new EduFabel.TabAccountPage(); 
}

Tekan F5 atau Jalankan pada device anda. hasil tampilan ketika project TabAccountPage.xaml dijalankan dapat dilihat pada gambar berikut:

Screenshot_2017-06-05-12-46-09[1]

Yups, pembahasan singkat diatas merupakan bagian dari User InterFace (UI) meliputi Navigasi Master Page dan Tab Page yang berfungsi pengguna melakukan pindah antar halaman. Jadi, anda sudah tahu kan bagaimana menghubungkan antar halaman menjadi interaktif? Okay, Semoga anda bisa mencobanya di project lain..

Azure Mobile App

Baik.. sebelumnya tadi sudah membahas bagian UI (User Interface) biasa disebut juga dengan Front End, dalam pembahasan selanjutnya saya akan membahas bagian Back end. Fungsi Back end digunakan bagaimana mengelola data atau melakukan aksi seperti menyimpan, mengupdate, mengambil data, dan menghapus. Bagi kalian kesulitan memanage back end secara manual, anda tidak perlu khawatir karena Microsoft menyediakan layanan Azure Mobile App dikhususkan untuk para pengembang aplikasi mobile yang bekerja dengan data.

Jadi, Azure Mobile App merupakan layanan backend services untuk mendukung aplikasi mobile berbasis infrastruktur cloud. Fitur yang disediakan meliputi Easy Table, Autentikasi, Push Services, dan juga kemampuan sinkronisasi secara offline (offline data sysnc). Cukup lengkap bukan ? Pasti anda tidak rugi dong memakai produknya Microsoft Azure 🙂 Karena Azure mengutamakan layanan kualitas keamanan mulai back up data hinga recovery manager.

Bagaimana Menggunakan Layanan Azure Mobile ?

Pastikan anda sudah mempunyai account microsoft, jika belum silahkan register disini.

Selanjutnya, pastikan anda sudah mempunyai code Microsoft Imagine, untuk langkah -langkah mengaktifkan anda bisa melihat di link berikut : aktivasi microsoft imagine dengan menggunakan verification code dan Bagaimana mengaktifkan azure dari microsoft imagine.

  1. Masuk ke dalam portal Microsoft Azure (portal.azure.com). Kemudian pilih layanan Mobile Apps Quickstart.
  2. Tekan tombol Create untuk membuat layanan Mobile Apps Quickstart. 
  3. Input nama Services, saya menggunakan nama edudifabel sesuai project yang saya buat. (anda tidak dapat menggunakan nama yang sudah digunakan)
  4. Pilih Subscription Microsoft Imagine / Dreamspark
  5. Buat Resource Group seperti Xamarin digunakan untuk mengelompokkan layanan yang ada di azure
  6. Pilih Location App Service (Southest Asia)
  7. Pilih tombol Create untuk membuat layanan
    azure1
  8. Setelah berhasil membuat layanan tersebut, masuk Mobile App. Kemudian pilih fitur yaitu Easy tables untuk membuat table.
  9. Kemudian create table Order
    order

  10. Untuk membuat kolom Order, Pilih Manage Schema kemudian Add a column.
    kolom1

 

Setelah selesai membuat Table dan Kolom, anda bisa menghubungan Project Xamarin dengan Azure.

 

Bagaimana Project Xamarin terhubung dengan Azure Mobile (dengan menampilkan listview) ?

Pastikan Package Microsoft Azure Mobile Client dan Newtonsoft Json sudah terinstall di project anda.

Pada contoh project yang telah saya buat yaitu EduFabel (Aplikasi Layanan Pesan Les Privat Disabilitas). Pembahasan kali ini mengambil beberapa contoh project pada halaman class OrderPage dan ListGuruPage. Pada halaman class ListGuruPage menggunakan kontrol interaktif ListView untuk menampilkan data daftar guru.

  1. Pertama Buat Class Barang pada project portable yang sesuai nama tabel di Easy Table di Azure. Kemudian tambahkan kode sebagai berikut: 
    using System;
using System.Collections.Generic;
using System.Text;
using System.Linq;
using Microsoft.WindowsAzure.MobileServices;
using Newtonsoft.Json;

namespace EduFabel.Models
{
 public class Order
 {
 private string _id;
 [JsonProperty(PropertyName = "id")]
 public string Id
 {
 get { return _id; }
 set { _id = value; }
 }

 private string _namalengkap;
 [JsonProperty(PropertyName = "namalengkap")]
 public string Namalengkap
 {
 get { return _namalengkap; }
 set { _namalengkap = value; }
 }

 private string _nohp;
 [JsonProperty(PropertyName = "nohp")]
 public string Nohp
 {
 get { return _nohp; }
 set { _nohp = value; }
 }

 private string _jenisdifabel;
 [JsonProperty(PropertyName = "jenisdifabel")]
 public string Jenisdifabel
 {
 get { return _jenisdifabel; }
 set { _jenisdifabel = value; }
 }

 private string _email;
 [JsonProperty(PropertyName = "email")]
 public string Email
 {
 get { return _email; }
 set { _email = value; }
 }

 private string _alamat;
 [JsonProperty(PropertyName = "alamat")]
 public string Alamat
 {
 get { return _alamat; }
 set { _alamat = value; }
 }

 private string _kota;
 [JsonProperty(PropertyName = "kota")]
 public string Kota
 {
 get { return _kota; }
 set { _kota = value; }
 }

 private string _kelas;
 [JsonProperty(PropertyName = "kelas")]
 public string Kelas
 {
 get { return _kelas; }
 set { _kelas = value; }
 }

 private string _mapel;
 [JsonProperty(PropertyName = "mapel")]
 public string Mapel
 {
 get { return _mapel; }
 set { _mapel = value; }
 }

 private string _guru;
 [JsonProperty(PropertyName = "guru")]
 public string Guru
 {
 get { return _guru; }
 set { _guru = value; }
 }

 private string _jumlahjam;
 [JsonProperty(PropertyName = "jumlahjam")]
 public string Jumlahjam
 {
 get { return _jumlahjam; }
 set { _jumlahjam = value; }
 }

 private string _mulaibelajar;
 [JsonProperty(PropertyName = "mulaibelajar")]
 public string Mulaibelajar
 {
 get { return _mulaibelajar; }
 set { _mulaibelajar = value; }
 }

 private string _jumlahbayar;
 [JsonProperty(PropertyName = "jumlahbayar")]
 public string Jumlahbayar
 {
 get { return _jumlahbayar; }
 set { _jumlahbayar = value; }
 }

 private bool _status;
 [JsonProperty(PropertyName = "status")]
 public bool Status
 {
 get { return _status; }
 set { _status = value; }
 }

 [Version]
 public string Version { get; set; }
 }
}
  2. Kemudian buat koneksi dengan nama constrants.cs yang digunakan untuk menyimpan url dari web service azure yang diakses dari mobile apps. 
    using System;
using System.Collections.Generic;
using System.Text;
using System.Linq;

namespace EduFabel
{
 public static class Constants
 {
 public static string ApplicationURL = @"https://edudifabel.azurewebsites.net";
 }
}
  3. Tambahkan class OrderManager.cs pada project portable, tambahkan method digunakan untuk mengambil data, menambah, mengupdate, dan menghapus data dari Mobile App services. 
    using System;
using System.Collections.Generic;
using System.Text;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.WindowsAzure.MobileServices;
using System.Diagnostics;
using System.Collections.ObjectModel;
using EduFabel;

namespace EduFabel.Models
{
 public class OrderManager
 {
 private IMobileServiceTable<Order> _orderTable;

 public OrderManager()
 {
 var client = new MobileServiceClient(Constants.ApplicationURL);
 _orderTable = client.GetTable<Order>();
 }

 public async Task<ObservableCollection<Order>> GetOrderGuruAsync(string sessionEmail)
 {
 try
 {
 IEnumerable<Order> orders = await _orderTable.Where(t => t.Guru == sessionEmail)
 .ToEnumerableAsync();
 return new ObservableCollection<Order>(orders);
 }
 catch (MobileServiceInvalidOperationException msioe)
 {
 Debug.WriteLine("@Invalid sync operation: {0}", msioe.Message);
 }
 catch (Exception e)
 {
 Debug.WriteLine(@"Sync error: {0}", e.Message);
 }
 return null;
 }

 public async Task<ObservableCollection<Order>> GetOrderSiswaAsync(string sessionEmail)
 {
 try
 {
 IEnumerable<Order> orders = await _orderTable.Where(t => t.Email == sessionEmail)
 .ToEnumerableAsync();
 return new ObservableCollection<Order>(orders);
 }
 catch (MobileServiceInvalidOperationException msioe)
 {
 Debug.WriteLine("@Invalid sync operation: {0}", msioe.Message);
 }
 catch (Exception e)
 {
 Debug.WriteLine(@"Sync error: {0}", e.Message);
 }
 return null;
 }

 public async Task SaveTaskAsync(Order order)
 {
 if (order.Id == null)
 {
 await _orderTable.InsertAsync(order);
 }
 else
 {
 await _orderTable.UpdateAsync(order);
 }
 }

 public async Task DeleteTaskAsync(Order order)
 {
 if (order.Id != null)
 {
 await _orderTable.DeleteAsync(order);
 }
 }
 }
}
  4. Tambahkan class dengan nama ActivityIndicatorScope.cs. Class ini digunakan untuk memuat ulang pada saat aplikasi mengambil data dari services. 
    using System;
using System.Threading.Tasks; 
using Xamarin.Forms; 
 
namespace SampleMobileAzure 
{ 
    public class ActivityIndicatorScope : IDisposable 
    { 
        private bool _showIndicator; 
        private ActivityIndicator _indicator; 
        private Task _indicatorDelay; 
 
        public ActivityIndicatorScope(ActivityIndicator indicator, bool showIndicator) 
        { 
            _indicator = indicator; 
            _showIndicator = showIndicator; 
 
            if (showIndicator) 
            { 
                _indicatorDelay = Task.Delay(2000); 
                SetIndicatorActivity(true); 
            } 
            else 
            { 
                _indicatorDelay = Task.FromResult(0); 
            } 
        } 
        private void SetIndicatorActivity(bool isActive) 
        { 
            _indicator.IsVisible = isActive; 
            _indicator.IsRunning = isActive; 
        } 
 
        public void Dispose() 
        { 
            if (_showIndicator) 
            { 
                _indicatorDelay.ContinueWith(t => SetIndicatorActivity(false), 
                    TaskScheduler.FromCurrentSynchronizationContext()); 
            } 
        } 
    } 
}
  5. Tambahkan halaman xaml dengan nama OrderPage.xaml pada project portable  beserta kode berikut dibawah ini. Halaman ini digunakan untuk menambah input data order guru. 
    <?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
 x:Class="EduFabel.OrderPage"
 xmlns:local="clr-namespace:EduFabel;"
 Title="Order Guru"
BackgroundColor="#e5e5e5">
 <ContentPage.Content>
 <ScrollView>
 <StackLayout BackgroundColor="White" Orientation="Vertical" VerticalOptions="FillAndExpand"
 Margin="10,10,10,10" Padding="20,20,20,20" HeightRequest="760" WidthRequest="500" >
 <Label Text="Pesan Guru Les Privat
" FontAttributes="Bold" TextColor="Black"
 FontSize="Large" HorizontalOptions="CenterAndExpand" />
 <Grid x:Name="gvOrder">
 <Grid.ColumnDefinitions>
 <ColumnDefinition Width="3*" />
 <ColumnDefinition Width="0.5*" />
 <ColumnDefinition Width="6.5*"/>
 </Grid.ColumnDefinitions>
 <Grid.RowDefinitions>
 <RowDefinition Height="Auto"/>
 <RowDefinition Height="Auto"/>
 <RowDefinition Height="Auto"/>
 <RowDefinition Height="Auto"/>
 <RowDefinition Height="Auto"/>
 <RowDefinition Height="Auto"/>
 <RowDefinition Height="Auto"/>
 <RowDefinition Height="Auto"/>
 <RowDefinition Height="Auto"/>
 <RowDefinition Height="Auto"/>
 <RowDefinition Height="Auto"/>
 <RowDefinition Height="Auto"/>
 </Grid.RowDefinitions>

 <Label Text="Nama Lengkap" FontSize="14" TextColor="Black" />
 <Label Text=":" FontSize="14" TextColor="Black" Grid.Row="0" Grid.Column="1" />
 <Entry x:Name="namalengkapEntry" Keyboard="Text" Grid.Row="0" Grid.Column="2"
 Placeholder="Nama Lengkap" />

 <Label Text="Jenis Disablitas" FontSize="14" TextColor="Black" Grid.Row="1" Grid.Column="0" />
 <Label Text=":" FontSize="14" TextColor="Black" Grid.Row="1" Grid.Column="1" />
 <Picker Title="Pilih Jenis Disabilitas" Grid.Row="1" Grid.Column="2"
 x:Name="jenisdifabelEntry" VerticalOptions="Center">
 <Picker.Items>
 <x:String>Tunanetra</x:String>
 <x:String>Tunarungu</x:String>
 <x:String>Tunadaksa</x:String>
 <x:String>Tunalaras</x:String>
 <x:String>Tunagrahita</x:String>
 <x:String>Tunadaksa</x:String>
 <x:String>Tunaganda</x:String>
 </Picker.Items>
 </Picker>
 <Label Text="Nomor Handphone" FontSize="14" TextColor="Black" Grid.Row="2" 
 Grid.Column="0" />
 <Label Text=":" FontSize="14" TextColor="Black" Grid.Row="2" Grid.Column="1" />
 <Entry x:Name="nohpEntry" Keyboard="Telephone" Grid.Row="2" 
 Grid.Column="2" Placeholder="No HP" />

 <Label Text="Alamat" FontSize="14" TextColor="Black" Grid.Row="3" 
 Grid.Column="0" />
 <Label Text=":" FontSize="14" TextColor="Black" Grid.Row="3" Grid.Column="1" />
 <Entry x:Name="alamatEntry" Grid.Row="3" 
 Grid.Column="2" Placeholder="Alamat" Keyboard="Text" />


 <Label Text="Kota" TextColor="Black" FontSize="14" Grid.Row="4" 
 Grid.Column="0" />
 <Label Text=":" FontSize="14" TextColor="Black" Grid.Row="4" Grid.Column="1" />
 <Entry x:Name="kotaEntry" Grid.Row="4" 
 Grid.Column="2" Placeholder="Kota" Keyboard="Text" />

 <Label Text="Kelas" Grid.Row="5" FontSize="14"
 Grid.Column="0" TextColor="Black" />
 <Label Text=":" FontSize="14" TextColor="Black" Grid.Row="5" Grid.Column="1" />
 <Picker Title="Pilih Kelas" Grid.Row="5" 
 Grid.Column="2"
 x:Name="kelasEntry" VerticalOptions="Center">
 <Picker.Items>
 <x:String>Kelas TK/PAUD</x:String>
 <x:String>Kelas I</x:String>
 <x:String>Kelas II</x:String>
 <x:String>Kelas III</x:String>
 <x:String>Kelas IV</x:String>
 <x:String>Kelas V</x:String>
 <x:String>Kelas VI</x:String>
 <x:String>Kelas VII</x:String>
 <x:String>Kelas VIII</x:String>
 <x:String>Kelas IX</x:String>
 <x:String>Kelas X</x:String>
 <x:String>Kelas XI IPA</x:String>
 <x:String>Kelas XI IPS</x:String>
 <x:String>Kelas XII IPA</x:String>
 <x:String>Kelas XII IPS</x:String>
 <x:String>Diploma</x:String>
 <x:String>S1</x:String>
 <x:String>S2</x:String>
 <x:String>S3</x:String>
 <x:String>Umum</x:String>
 </Picker.Items>
 </Picker>

 <Label Text="Mata Pelajaran" FontSize="14" TextColor="Black" Grid.Row="6" 
 Grid.Column="0" />
 <Label Text=":" FontSize="14" TextColor="Black" Grid.Row="6" Grid.Column="1" />
 <Picker Title="Pilih Mata Pelajaran" Grid.Row="6" Grid.Column="2"
 x:Name="mapelEntry" VerticalOptions="Center">
 <Picker.Items>
 <x:String>Matematika</x:String>
 <x:String>Bahasa Inggris</x:String>
 <x:String>Bahasa Indonesia</x:String>
 <x:String>IPA</x:String>
 <x:String>IPS</x:String>
 <x:String>Biologi</x:String>
 <x:String>Fisika</x:String>
 <x:String>Kimia</x:String>
 <x:String>Ekonomi</x:String>
 <x:String>Geografi</x:String>
 <x:String>Sejarah</x:String>
 <x:String>PKN</x:String>
 </Picker.Items>
 </Picker>

 <Label Text="Mulai Belajar" FontSize="14" TextColor="Black" Grid.Row="7" 
 Grid.Column="0" />
 <Label Text=":" FontSize="14" TextColor="Black" Grid.Row="7" Grid.Column="1" />
 <DatePicker x:Name="mulaibelajarEntry" Grid.Row="7" Grid.Column="2"
 VerticalOptions="CenterAndExpand" MinimumDate="01/01/1990"
 MaximumDate="12/31/2030" />

 <Label Text="Jumlah Jam" FontSize="14" TextColor="Black" Grid.Row="8" 
 Grid.Column="0" />
 <Label Text=":" FontSize="14" TextColor="Black" Grid.Row="8" Grid.Column="1" />
 <Entry x:Name="jumlahjamEntry" Grid.Row="8" 
 Grid.Column="2" Keyboard="Numeric" Placeholder="Jumlah Jam" />

 <Label Text="Email Guru" TextColor="Black" FontSize="14" Grid.Row="9" 
 Grid.Column="0" />
 <Label Text=":" FontSize="14" TextColor="Black" Grid.Row="9" Grid.Column="1" />
 <Picker x:Name="guruEntry" Grid.Row="9" 
 Grid.Column="2" ItemDisplayBinding="{Binding Email}" Title="Pilih Email Guru" 
 />

 

 </Grid>
 <Button Margin="0,10,0,0" Text="KIRIM" Clicked="OnOrderButtonClicked"
 FontSize="Small" FontAttributes="Bold" TextColor="White" BackgroundColor="Red" 
 />
 <Label Text="*Tarif Les Privat Rp 30.000 / Jam" TextColor="Red" FontAttributes="Bold" />
 <Label x:Name="messageLabel" />
 </StackLayout>
 </ScrollView>
 </ContentPage.Content>
</ContentPage>
  6. Kemudian tambahkan kode c# pada file OrderPage.xaml.cs untuk menambah input data order guru 
    using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;
using EduFabel.Models;

namespace EduFabel
{

 [XamlCompilation(XamlCompilationOptions.Compile)]
 public partial class OrderPage : ContentPage
 {
 private OrderManager _orderManager = new OrderManager();
 private GuruManager _guruManager = new GuruManager();
 private UserManager _userManager = new UserManager();
 public static string sessionEmail { get; set; }


 public OrderPage()
 {
 InitializeComponent();
 }

 protected override async void OnAppearing()
 {
 base.OnAppearing();
 await RefreshItems();
 }

 private async Task RefreshItems()
 {
 guruEntry.ItemsSource = await _guruManager.GetAllGuruAsync();
 namalengkapEntry.Text = await _userManager.GetNamaUserAsync(sessionEmail);

 }

 private void ClearAll()
 {
 foreach (var ctr in gvOrder.Children)
 {
 if (ctr is Entry)
 {
 var item = ctr as Entry;
 item.Text = string.Empty;
 }
 }
 }

 private async void OnOrderButtonClicked(object sender, EventArgs e)
 {
 int tarif = 30000;
 int jam = Convert.ToInt32(jumlahjamEntry.Text);

 var order = new Order()
 {
 Namalengkap = namalengkapEntry.Text,
 Email = sessionEmail,
 Jenisdifabel = Convert.ToString(jenisdifabelEntry.SelectedItem),
 Nohp = Convert.ToString(nohpEntry.Text),
 Alamat = alamatEntry.Text,
 Kota = kotaEntry.Text,
 Kelas = Convert.ToString(kelasEntry.SelectedItem),
 Mapel = Convert.ToString(mapelEntry.SelectedItem),
 Guru = Convert.ToString(guruEntry.Items[guruEntry.SelectedIndex]),
 Jumlahjam = jumlahjamEntry.Text,
 Mulaibelajar = mulaibelajarEntry.Date.ToString("dd-MM-yyyy"),
 Jumlahbayar = Convert.ToString(tarif * jam)
 };

 var orderSucceeded = AreDetailsValid(order);
 if (orderSucceeded)
 {
 var rootPage = Navigation.NavigationStack.FirstOrDefault();
 if (rootPage != null)
 {
 await _orderManager.SaveTaskAsync(order);
 ClearAll();
 await DisplayAlert("Success", "Pesan Guru Privat telah berhasil !", "OK");
 Navigation.InsertPageBefore(new HistorySiswaPage(), Navigation.NavigationStack.First());
 await Navigation.PopToRootAsync();
 }
 }
 else
 {
 messageLabel.Text = "Order gagal, Field harap diisi semua!";
 }
 }

 bool AreDetailsValid(Order order)
 {
 return (!string.IsNullOrWhiteSpace(order.Namalengkap) && !string.IsNullOrWhiteSpace(order.Jenisdifabel) && !string.IsNullOrWhiteSpace(order.Jenisdifabel) && !string.IsNullOrWhiteSpace(order.Nohp) && !string.IsNullOrWhiteSpace(order.Alamat) && !string.IsNullOrWhiteSpace(order.Kota) && !string.IsNullOrWhiteSpace(order.Mapel) && !string.IsNullOrWhiteSpace(order.Guru) && !string.IsNullOrWhiteSpace(order.Jumlahjam) && !string.IsNullOrWhiteSpace(order.Mulaibelajar) && !string.IsNullOrWhiteSpace(order.Guru) && !string.IsNullOrWhiteSpace(order.Email) && order.Email.Contains("@"));
 }
 }
}
  7. Tambahkan halaman xaml baru dengan nama ListGuruPage.xaml. Beserta kode berikut dibawah ini. Halaman tersebut digunakan untuk menampilkan data order guru pada kontrol Listview.
  8. <?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
 x:Class="EduFabel.ListGuruPage"
 xmlns:local="clr-namespace:EduFabel;"
 Title="List Guru">

 <ContentPage.Content>
 <Grid x:Name="gvAccount">
 <ActivityIndicator 
 HorizontalOptions="Center" 
 VerticalOptions="Center" 
 IsVisible="False" 
 IsEnabled="True" 
 x:Name="syncIndicator"/>
 <ScrollView>
 <StackLayout Margin="30,10,30,10">

 <ListView x:Name="listViewListGuru" ItemTapped="ListView_OnItemTapped"
 IsPullToRefreshEnabled="True" Refreshing="ListView_OnRefreshing" RowHeight="100">
 <ListView.ItemTemplate>
 <DataTemplate>
 <ViewCell>

 <Grid x:Name="gvAccount">
 <Grid.ColumnDefinitions>
 <ColumnDefinition Width="3.5*" />
 <ColumnDefinition Width="3.5*" />
 <ColumnDefinition Width="3*"/>
 </Grid.ColumnDefinitions>
 <Grid.RowDefinitions>
 <RowDefinition Height="Auto"/>
 <RowDefinition Height="Auto"/>
 <RowDefinition Height="Auto"/>

 </Grid.RowDefinitions>
 <Label HorizontalOptions="Start" TextColor="Red" FontSize="14" 
 FontAttributes="Bold" VerticalTextAlignment="Center" Grid.Row="0" Grid.Column="0"
 Text="{Binding Namalengkap}"/>
 <Label HorizontalOptions="Start" FontSize="12" TextColor="Black" Grid.Row="1" 
 Grid.Column="0"
 VerticalTextAlignment="Center"
 Text="{Binding Nohp}"/>
 
 <Label HorizontalOptions="Start" TextColor="Red" FontSize="14" FontAttributes="Bold" VerticalTextAlignment="Center"
 Text="{Binding Kota}" Grid.Row="0" Grid.Column="1" />
 <Label HorizontalOptions="Start" FontSize="12" TextColor="Black" 
 VerticalTextAlignment="Center" Grid.Row="1" 
 Grid.Column="1"
 Text="{Binding Email}"/>


 <Label HorizontalOptions="Start" FontSize="14" TextColor="Black" Grid.Row="0" 
 Grid.Column="2"
 VerticalOptions="CenterAndExpand" VerticalTextAlignment="Center"
 Text="{Binding Mapel}"/>
 </Grid>
 </ViewCell>
 </DataTemplate>
 </ListView.ItemTemplate>
 </ListView>
 </StackLayout>
 </ScrollView>
 </Grid>
 </ContentPage.Content>

</ContentPage>

Kemudian tambahkan kode c# pada file ListGuruPage.xaml.cs.

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

using Xamarin.Forms;
using Xamarin.Forms.Xaml;
using EduFabel.Models;

namespace EduFabel
{
 [XamlCompilation(XamlCompilationOptions.Compile)]
 public partial class ListGuruPage : ContentPage
 {
 private GuruManager _guruManager = new GuruManager();
 public ListGuruPage()
 {
 InitializeComponent();
 }

 protected override async void OnAppearing()
 {
 base.OnAppearing();
 await RefreshItems(true);
 }


 private async Task RefreshItems(bool showActivityIndicator)
 {
 using (var scope = new ActivityIndicatorScope(syncIndicator, showActivityIndicator))
 {
 listViewListGuru.ItemsSource = await _guruManager.GetAllGuruAsync();
 }
 }

 private async void ListView_OnItemTapped(object sender, ItemTappedEventArgs e)
 {
 DetailListGuruPage ListGuruPage = new DetailListGuruPage();

 Guru item = (Guru)e.Item;
 ListGuruPage.BindingContext = item;
 ((ListView)sender).SelectedItem = null;
 await Navigation.PushAsync(ListGuruPage);
 }

 private async void ListView_OnRefreshing(object sender, EventArgs e)
 {
 var list = (ListView)sender;
 Exception error = null;
 try
 {
 await RefreshItems(false);
 }
 catch (Exception ex)
 {
 error = ex;
 }
 finally
 {
 list.EndRefresh();
 }

 if (error != null)
 {
 await DisplayAlert("Refresh Error !", "Couldn't refresh data (" + error.Message + ")", "OK");
 }
 }
 }
}


Hasil tampilan ketika project OrderPage.xaml dijalankan dapat dilihat pada gambar berikut:
Screenshot_2017-06-05-11-33-25[1]

Hasil tampilan ketika project ListGuruPage.xaml dijalankan dapat dilihat pada gambar berikut:
Screenshot_2017-06-05-16-50-45[1]


Bagaimana dengan pembahasan diatas ? cukup mudah bukan ? Semoga anda bisa mencoba yaa di project anda sendiri. Mulai mengkombinasikan User Interface Xamarin Forms hingga menghubungkan dengan Azure. Semoga anda menjadi pengembang aplikasi mobile yang hebatt. Lantas, Apakah cukup hanya sampai ini ?

Ohh tentu tidakk, pasti aplikasi anda buat ingin dong dicoba semua orang yaa kan? apalagi nanti publish di play store ? Pasti Jadi kebanggan sendiri kalau aplikasinya dicoba semua orang. Untuk pembahasan selanjutnya bagaimana membuat file .apk di Xamarin Forms ?

Bagaimana sih membuat file APK pada Xamarin Forms?

Langkah – langkah membuat file .apk sebagai berikut:

  1. Klik kanan pada project Android, kemudian pilih Android Manifesft.
  2. Lengkapi informasi dari aplikasi anda, seperti gambar dibawah ini:
    androidmanifest
  3. Kemudian Save file EduFabel.Android.
  4. Pada tampilan Android Options – Linker – Pilih SDK Assembly only. Pengaturan ini bertujuan hanya file sdk yang diperlukan saja yang akan ditambahkan pada file .apk.
    androidoptions
  5. Kemudian Klik kanan pada project Android, Pilih Archive.
    Archive
  6. Setelah selesai menyiapkan file .apk, silahkan pilih tombol Distribute untuk mendistribusikan .apk yang akan dibuat. Pilih Ad Hoc untuk mendistribusikan .apk tanpa melalui google play.

    Distribute
    Adhoc

  7. Kemudian anda akan diminta membuat sertifikat Android Keystore, masukan data yang dibutuhkan seperti gambar dibawah ini, tekan tombol Create.
    androidkeystore
  8. Setelah proses signing identity pada aplikasi yang anda buat, pilih file Edufabel lalu klik tombol Save As.
    signing
  9. Beri nama file .apk misalnya EduFabel.apk
    saveas
  10. Kemudian anda akan diminta masukkan password yang anda buat di Android keystore.
    SignPassword
  11. Terakhir anda bisa cek di folder masing – masing pada saat penyimpanan file .apk

 

Bagaimana dengan pembahasan diatas guys? Apakah anda tertarik untuk mencoba?

Tunggu apa lagi ??  Segera siapkan Xamarin dan Azure di PC anda sekarang juga.

Sekian dari saya, semoga sharing kali ini bermanfaat ya guys..

Bila ada pertanyaan, silahkan comment di post ini atau bisa juga email saya : rizqi.aryansa@gmail.com


Terimakasih yaa guyss..

Regards

 

Rizqi Aryansa

Dipublikasi di Uncategorized | 1 Komentar

Tentang Google Android

Dipublikasi pada Februari 13, 2011 oleh aryansarizqi

Android Inc.
Google pernah menawari Steve jobs menjadi CEO Google tetapi Steve jobs menolaknya karena dia sudah sangat sibuk dan keasikan dengan Apple Inc .
Seandainya Steve jobs menjadi CEO Google mungkin tidak akan ada OS Android dan Iphone .
Pendiri Google yang bernama Sergey Brin dan Larry Page, telah Memilih Eric Schmidt dengan tepat, dia telah mengambil banyak keputusan baik seperti membeli Android Inc. yang dijadikan Platform Smartphone yang terlaris dan OS Ponsel Pintar Terpopuler sekarang ini yang bernama OS Android bahkan OS ini menjadi Competitor/Pesaing Blackberry,Iphone, OS Windows phone .
Awalnya Android Inc. Ini Perusahaan Start up milik Andy Rubin yang dibeli dengan diam-diam oleh CEO Google dibeli dengan harga US$ 50 Juta atau sekitar 450 miliar Rupiah Pada tahun 2005 .
Inilah Nama versi Android yang berupa kata makanan penutup :
1. Android versi 1.1
2. Android versi 1.5 (Cupcake)
2. Android versi 1.6 (Donut)
3. Android versi 2.1 (Eclair)
4. Android versi 2.2 (Froyo)
5. Android versi 2.3 (Gingerbread)
6. Android versi 3.0 (Honeycomb)
7. Android versi 4.0 Ice Cream)
Selengkapnya di Wikipedia .
Android bukanlah Nama Vendor Ponsel tetapi Operation System untuk telepon selular yang berbasis linux yang menyediakan platform terbuka (open source) bagi para pengembang buat
menciptakan aplikasi mereka sendiri
untuk digunakan oleh bermacam peranti bergerak Kemudian untuk mengembangkan Android dibentuklah Open Handset Alliance konsorsium dari 34 perusahaan
peranti keras, peranti lunak, dan telekomunikasi, termasuk Google, HTC, Samsung, Sonyericsson, LG, Intel, Motorola, Qualcomm, T- Mobile, dan Nvidia .
Maaf, Nokia tidak tercantum karena Nokia masih percaya dengan OS Symbian dan tidak menggunakan OS Android.
Yang paling di unggulkan di Android yaitu Marketnya yang mencapai sekitar 100.000 Applikasi tetapi Android masih kalah dengan Iphone appstore yang mencapai sekitar 250.000 Applikasi tetapi Blackberry masih kalah dengan Android hanya mencapai sekitar kurang lebih 5.000 Applikasi dan Applikasi di Android Market banyak yang gratis daripada yang berbayar.
Dan Android memberikan tiap-tiap vendor ponsel, mendapatkan kebebasan dalam mengatur UI/Interface-nya sendiri dan juga bisa pakai UI-nya Android sendiri dan tergantung vendor-vendor yang memakai UI/interface atau diberi kebebasan oleh Android untuk memilih UI/Interface masing-masing tidak seperti windows phone. OS Windows Phone tidak memberikan Kebebasan/keleluasan vendor-vendor ponsel untuk menentukan pilihan Interrface hanya diatur sendiri oleh Windows Phone jadi Vendor ponsel hanya menerima hasilnya saja .
kompetisi sesama android sekarang ini luar biasa. walaupun kompetisinya sangat sengit, tidak ada sama sekali permusuhan sesama vendor yang memakai android. Karena slogan Google “dont be evil” akan selalu ditanamkan google pada vendor-vendor ponsel yang
menggunakan sistem Android ini .

Steve Jobs
Markas Google Android
CEO Google
HTC Google Nexus One
Android Market
Dipublikasi di Uncategorized | 1 Komentar

Hello world!

Dipublikasi pada Februari 13, 2011 oleh aryansarizqi

Welcome to WordPress.com. This is your first post. Edit or delete it and start blogging!

Dipublikasi di Uncategorized | 1 Komentar