SQL Lite dan REST Service

Pada modul ini akan dibahas bagaimana bekerja dengan media penyimpanan lokal berupa database yaitu SQL Lite untuk menyimpan persistance data pada perangkat Android. Modul ini juga akan membahas bagaimana cara untuk bekerja dengan REST Services pada aplikasi backend.

Bekerja dengan SQL Lite

Pada subbab berikut akan dibahas bagaimana cara untuk menyimpan data secara lokal menggunakan database SQLite. Contoh aplikasi yang akan dibuat adalah aplikasi untuk menyimpan dan memanipulasi data Pegawai.

Practice #5.1 Membuat Aplikasi Daftar Pegawai dengan SQLite

1. Buat Xamarin Form solution dengan nama SampleSQLite.

2. Kemudian tambahkan library SQLite.Net-PCL pada semua project agar dapat menggunakan SQLite.

3. Klik kanan pada solution 'SampleSQLite'. Kemudian pilih NuGET package dan tambahkan paket SQLite.Net-PCL pada project portable, dan droid.

4. Pada project portable SampleSQLite tambahkan kode c# berikut untuk membuat objek interface yang digunakan untuk membuat method koneksi.


using SQLite.Net; 
 

namespace SampleSQLite 
{ 

    public interface ISQLIte 
{ 

        SQLiteConnection GetConnection(); 
} 

}

5. Pada project Droid, buat class dengan nama SqliteService.cs dan tambahkan kode berikut untuk membuat db sqlite baru:


using System; 

using Xamarin.Forms; 

using SampleSQLite.Droid; 
using System.IO; 

[assembly: Dependency(typeof(SqliteService))] 
using SampleSQLite; 
 

    public class SqliteService : ISQLIte 
namespace SampleSQLite.Droid 
{ 
{ 

        public SQLite.Net.SQLiteConnection GetConnection() 
        public SqliteService() { } 
    { 

            string documentsPath =  
            var sqliteFilename = "Pegawai.db3"; 

            var path = Path.Combine(documentsPath, sqliteFilename); 
                   Environment.GetFolderPath(Environment.SpecialFolder.Personal);  
            Console.WriteLine(path); 

            var plat = new SQLite.Net.Platform.XamarinAndroid.SQLitePlatformAndroid(); 
            if (!File.Exists(path)) File.Create(path); 
            var conn = new SQLite.Net.SQLiteConnection(plat, path); 
            return conn; 
    } 
} 

}

6. Pada kode diatas kita akan membuat file database lokal dengan nama Pegawai.db3. File database tersebut akan disimpan kedalam folder pada device android anda yaitu pada folder /data/data/[your.package.name]/files.

7. Pada project portable tambahkan class dengan nama Employee.cs yang akan digunakan untuk menyimpan data pegawai pada database SQLite.


using SQLite.Net.Attributes; 
using System; 
 

    public class Employee 
namespace SampleSQLite 
{ 
{ 

        public long EmpId { get; set; } 
    [PrimaryKey, AutoIncrement] 
    [NotNull] 

        public string Designation { get; set; } 
        public string EmpName { get; set; } 
        public string Department { get; set; } 

} 
        public string Qualification { get; set; } 

}

8. Keyword PrimaryKey menandakan bahwa field EmpId adalah primary key. Autoincrement menunjukan bahwa kode EmpId akan digenerate otomatis oleh SQLite secara berurutan.

9. Pada project portable tambahkan juga class dengan nama DataAccess.cs. Kemudian tambahkan kode berikut:


using SQLite.Net; 

using System.Collections.Generic; 
using Xamarin.Forms; 
 

    public class DataAccess 
namespace SampleSQLite 
{ 
{ 

        public DataAccess() 
        SQLiteConnection dbConn; 
    { 

        dbConn = DependencyService.Get<ISQLIte>().GetConnection(); 
        dbConn.CreateTable<Employee>(); 
    } 
 
        public List<Employee> GetAllEmployees() 
    { 

        public int SaveEmployee(Employee aEmployee) 
            return dbConn.Query<Employee>("Select * From [Employee]"); 
    } 
 
    { 
            return dbConn.Insert(aEmployee); 
    } 
 

            return dbConn.Update(aEmployee); 
        public int DeleteEmployee(Employee aEmployee) 
    { 
            return dbConn.Delete(aEmployee); 
    } 
 
        public int EditEmployee(Employee aEmployee) 
    { 
    } 
} 

}

10.Kode diatas adalah kode yang digunakan untuk membuat table baru dan perintah untuk CRUD (Create, Read, Update, Delete).

11. Pada project portable tambahkan juga kode berikut pada file App.xaml.cs.


namespace SampleSQLite 
{ 

    public partial class App : Application 
{ 
        private static DataAccess dbUtils; 

        InitializeComponent(); 
        public App() 
    { 

    } 
            MainPage = new NavigationPage(new ManageEmployee()); 
 

                if (dbUtils == null) 
        public static DataAccess DBUtils 
    { 
            get 
        { 
            { 

    } 
                dbUtils = new DataAccess(); 
            } 
                return dbUtils; 
        } 
} 

}

12. Class tersebut adalah class yang akan dijalankan untuk pertama kali ketika aplikasi tersebut dijalankan.

13. Untuk menampilkan data pegawai, buat halaman xaml baru dengan nama ManageEmployee.xaml. Kemudian 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="SampleSQLite.ManageEmployee"> 

<ListView x:Name="lstData" HasUnevenRows="false" Header="Header Value" Footer="Footer" ItemSelected="OnSelection" > 
  <StackLayout> 
  <ListView.HeaderTemplate> 
    <DataTemplate> 

      <StackLayout Orientation="Horizontal" BackgroundColor="Blue" Padding="5,5,5,5"> 
        <Label Text="Name" FontSize="Medium" FontAttributes="Bold" TextColor="White"/> 

        <Label Text="Department" FontSize="Medium" FontAttributes="Bold" TextColor="White"/> 
        <Label Text="Designation" FontSize="Medium" FontAttributes="Bold" TextColor="White"/> 
      </StackLayout> 
    </DataTemplate> 
  </ListView.HeaderTemplate> 

          <Label Text="{Binding EmpName}" FontSize="Medium" /> 
  <ListView.ItemTemplate> 
    <DataTemplate> 
      <ViewCell> 
        <StackLayout Orientation="Horizontal" Padding="5,5,5,5"> 

    </DataTemplate> 
          <Label Text="{Binding Designation}" FontSize="Medium" /> 
          <Label Text="{Binding Department}" FontSize="Medium" /> 
        </StackLayout> 
      </ViewCell> 

        <Button Text="Add New Employee" Clicked="OnNewClicked" /> 
  </ListView.ItemTemplate> 
  <ListView.FooterTemplate> 
    <DataTemplate> 
      <StackLayout Orientation="Horizontal" Padding="5,5,5,5"> 
      </StackLayout> 
    </DataTemplate> 

</ContentPage> 
  </ListView.FooterTemplate> 
</ListView> 

  </StackLayout>

14. Pada kode xaml diatas ditambahkan sebuah kontrol ListView untuk menampilkan data yang akan diambil dari media penyimpanan lokal SQLIte.

15. Pada file ManageEmployee.xaml.cs tambahkan kode berikut.


namespace SampleSQLite 
{ 

    public partial class ManageEmployee : ContentPage 
{ 
        public ManageEmployee() 
    { 

            var vList = App.DBUtils.GetAllEmployees(); 
        InitializeComponent(); 
        lstData.ItemsSource = vList; 

        void OnSelection(object sender, SelectedItemChangedEventArgs e) 
    } 
 
    { 
            if (e.SelectedItem == null) 
        { 

            var vSelUser = (Employee)e.SelectedItem; 
                return; 
        } 

        public void OnNewClicked(object sender, EventArgs args) 
        Navigation.PushAsync(new ShowEmployee(vSelUser)); 
    } 
 
    { 

} 
        Navigation.PushAsync(new AddEmployee()); 
    } 

}

16. Kode diatas digunakan untuk menampilkan data pegawai yang diambil dari media penyimpanan lokal dan juga menangani event untuk memilih data yang ada pada kontrol ListView untuk ditampilkan detailnya.

17. Untuk menangani penambahan data pegawai baru, buat halaman xaml baru dengan nama AddEmployee.xaml. Kemudian tambahkan kode xaml 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="SampleSQLite.AddEmployee"> 
  <StackLayout> 

  <TableRoot> 
<TableView Intent="Settings" BackgroundColor="White"> 
    <TableSection Title="Add New Employee"> 

     <EntryCell x:Name="txtDesign" Label="Designation" Keyboard="Text" /> 
     <EntryCell x:Name="txtEmpName" Label="Employee Name" Keyboard="Text" /> 
     <EntryCell x:Name="txtDepartment" Label="Department" Keyboard="Text" /> 

         <OnPlatform x:TypeArguments="Thickness" iOS="10,0" WinPhone="0,15,0,0" /> 
     <EntryCell x:Name="txtQualification" Label="Qualification" Keyboard="Text" /> 
      <ViewCell> 
        <ContentView Padding="0,0"> 
          <ContentView.Padding> 
          </ContentView.Padding> 
          <ContentView.Content> 

  </StackLayout> 
            <Button BackgroundColor="#fd6d6d" Text="Save" TextColor="White" Clicked="OnSaveClicked" /> 
          </ContentView.Content> 
        </ContentView> 
      </ViewCell> 
    </TableSection> 
  </TableRoot> 
</TableView> 

</ContentPage>

18. Kemudian tambahka kode pada file AddEmployee.xaml.cs sebagai berikut.


using Xamarin.Forms; 
 

namespace SampleSQLite 
{ 

    public partial class AddEmployee : ContentPage 
{ 
        public AddEmployee() 
    { 

        public void OnSaveClicked(object sender, EventArgs args) 
        InitializeComponent(); 
    } 
 
    { 

            EmpName = txtEmpName.Text, 
            var vEmployee = new Employee() 
        { 

            Qualification = txtQualification.Text 
            Department = txtDepartment.Text, 
            Designation = txtDesign.Text, 
        }; 

        Navigation.PushAsync(new ManageEmployee()); 
            App.DBUtils.SaveEmployee(vEmployee); 
    } 
} 

}

19. Untuk menampilkan halaman detail pegawai per record, tambahkan halaman xaml dengan nama ShowEmployee.xaml. Halaman ini juga memiliki tombol edit dan delete record.


<?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="SampleSQLite.ShowEmpolyee"> 
  <StackLayout> 

    <RowDefinition Height="*"/> 
<Grid> 
  <Grid.RowDefinitions> 
    <RowDefinition Height="*"/> 

    <RowDefinition Height="*"/> 
    <RowDefinition Height="*"/> 
    <RowDefinition Height="*"/> 
    <RowDefinition Height="*"/> 

    <ColumnDefinition Width="10"/> 
    <RowDefinition Height="*"/> 
  </Grid.RowDefinitions> 
 
  <Grid.ColumnDefinitions> 
    <ColumnDefinition Width="*"/> 

   <Label Grid.Row ="0" Grid.Column="0" Grid.ColumnSpan="2" Text="Employee Details" /> 
    <ColumnDefinition Width="*"/> 
    <ColumnDefinition Width="10"/> 
  </Grid.ColumnDefinitions> 
 
  <Label Grid.Row ="1" Grid.Column="1" Text="Name" /> 

  <Label Grid.Row="2" Grid.Column="2" Text ="{Binding Designation}"/> 
  <Label Grid.Row="1" Grid.Column="2" Text ="{Binding EmpName}" /> 
  <Label Grid.Row ="2" Grid.Column="1" Text="Designation" /> 
  <Label Grid.Row ="3" Grid.Column="1" Text="Department" /> 

     <Button Grid.Row ="5" Grid.Column="1" Text="Edit Details" Clicked="OnEditClicked" /> 
  <Label Grid.Row="3" Grid.Column="2" Text ="{Binding Department}"/> 
  <Label Grid.Row ="4" Grid.Column="1" Text="Qualification" /> 
  <Label Grid.Row="4" Grid.Column="2" Text ="{Binding Qualification}" /> 

</ContentPage> 
  <Button Grid.Row="5" Grid.Column="2" Text="Delete" Clicked="OnDeleteClicked" /> 
</Grid> 

  </StackLayout>

20. Kemudian tambahkan kode berikut pada file ShowEmployee.xaml.cs.


namespace SampleSQLite 
{ 

    public partial class ShowEmpolyee : ContentPage 
{ 
        Employee mSelEmployee; 

    { 
        public ShowEmployee(Employee aSelectedEmp) 
        InitializeComponent(); 

        public void OnEditClicked(object sender, EventArgs args) 
        mSelEmployee = aSelectedEmp; 
        BindingContext = mSelEmployee; 
    } 
 
    { 

        public async void OnDeleteClicked(object sender, EventArgs args) 
        Navigation.PushAsync(new EditEmployee(mSelEmployee)); 
    } 
    { 

        { 
            bool accepted = await DisplayAlert("Konfirmasi", "Apakah anda yakin untuk mendelete data ?", "Yes", "No"); 
            if (accepted) 

} 
                App.DBUtils.DeleteEmployee(mSelEmployee); 
        } 
            await Navigation.PushAsync(new ManageEmployee()); 
    } 

}

21. Terakhir tambahkan halaman xaml untuk mengedit data dengan nama EditEmployee.xaml. Kemudian 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="SampleSQLite.EditEmployee"> 
  <StackLayout> 

  <TableRoot> 
<TableView Intent="Settings" BackgroundColor="White"> 
    <TableSection Title="Edit Employee"> 

      <EntryCell x:Name="txtDesign" Label="Designation" Text ="{Binding Designation}" Keyboard="Text" /> 
      <EntryCell x:Name="txtEmpName" Label="Employee Name" Text ="{Binding EmpName}" Keyboard="Text" /> 

      <EntryCell x:Name="txtQualification" Label="Qualification" Text ="{Binding Qualification}" Keyboard="Text" /> 
      <EntryCell x:Name="txtDepartment" Label="Department" Text ="{Binding Department}" Keyboard="Text" /> 
      <ViewCell> 
        <ContentView Padding="0,0"> 
          <ContentView.Padding> 

            <Button BackgroundColor="#fd6d6d" Text="Save" TextColor="White" Clicked="OnSaveClicked" /> 
         <OnPlatform x:TypeArguments="Thickness" iOS="10,0" WinPhone="0,15,0,0" /> 
          </ContentView.Padding> 
          <ContentView.Content> 
          </ContentView.Content> 
        </ContentView> 
      </ViewCell> 
    </TableSection> 
  </TableRoot> 
</TableView> 

</ContentPage> 

  </StackLayout>

22. Tambahkan kode untuk mengedit data pada file EditEmployee.xaml.cs dibawah ini.


namespace SampleSQLite 
{ 

    public partial class EditEmployee : ContentPage 
{ 
        Employee mSelEmployee; 

    { 
        public EditEmployee(Employee aSelectedEmp) 
        InitializeComponent(); 

        public void OnSaveClicked(object sender, EventArgs args) 
        mSelEmployee = aSelectedEmp; 
        BindingContext = mSelEmployee; 
    } 
 
    { 

        mSelEmployee.Designation = txtDesign.Text; 
        mSelEmployee.EmpName = txtEmpName.Text; 
        mSelEmployee.Department = txtDepartment.Text; 

        Navigation.PushAsync(new ManageEmployee()); 
        mSelEmployee.Qualification = txtQualification.Text; 
            App.DBUtils.EditEmployee(mSelEmployee); 
    } 
} 

}

23. Tekan tombol F5 untuk menjalankan program pada Android Emulator.

Menggunakan REST Services pada Xamarin Forms

Pada contoh dibawah ini REST Services yang dibangun menggunakan framework ASP.NET Web API yang sudah dipasang pada layanan komputasi awan Microsoft Azure.

Adapun alamat dari REST Service yang digunakan: http://actservices.azurewebsites.net/api/TodoItem/

Untuk pengecekan apakah Web Services tersebut dapat berjalan, anda dapat menggunakan tool Fiddler. Anda dapat mengunduh tools fiddler secara gratis pada tautan berikut ini https://www.telerik.com/download/fiddler.

#Practice 5.2 Mengakses REST Services Menggunakan Fiddler.

1. Langkah pertama yang akan dilakukan adalah melakukan percobaan untuk mengakses contoh backend services yang sudah tersedia.

2. Buka tools fiddler, kemudian arahkan ke tab Composer. Pilih method GET untuk mengambil dari dari REST Services, kemudian tambahkan alamat berikut http://actservices.azurewebsites.net/api/TodoItem/. Kemudian tekan tombol Execute.

3. Pada jendela bagian kiri akan ditampilkan hasil-nya. Status yang tertera adalah 200 OK yang menunjukan bahwa request ke server berhasil.

4. Data JSON yang dikembalikan dapat dilihat pada gambar dibawah ini.

#Practice 5.3 Mengakses REST Services dari Xamarin Forms.

1. Buat project Xamarin Forms baru dengan nama TodoREST.

2. Klik kanan pada solution kemudian pilih Manage Nuget Package for Solution. Kemudian tambahkan library Microsoft.Bcl.Build, Microsoft.Net.Http, dan Newtonsoft.Json.

3. Pada project Portable, tambahkan folder dengan nama Models. Kemudian tambahkan class dengan nama TodoItem.cs. Class ini akan digunakan untuk membuat objek yang dapat menampung data dari REST Services. Tambahkan kode c# berikut:


namespace TodoREST 
{ 

public class TodoItem 
{ 

public string ID { get; set; } 
public string Name { get; set; } 

public bool Done { get; set; } 
public string Notes { get; set; } 
} 

}

4. Pada project portable, tambahkan juga class dengan nama Constants.cs untuk menyimpan alamat url dari REST Services.


public static class Constants 
{ 

public static string RestUrl =  

       "http://actservices.azurewebsites.net/api/TodoItem/{0}"; 

}

5. Pada project portable, tambahkan foder dengan nama Data. Kemudian pada folder tersebut tambahkan interface baru dengan nama IRestService.cs. Interface ini berisi method-method yang akan digunakan untuk menampilkan, menambahkan, mengedit, dan mendelete data.


using System.Threading.Tasks; 
using TodoREST.Models; 

    public interface IRestService 
namespace TodoREST.Data 
{ 
{ 

        Task<List<TodoItem>> RefreshDataAsync(); 
        Task SaveTodoItemAsync(TodoItem item, bool isNewItem); 

} 
        Task DeleteTodoItemAsync(string id); 

}

6. Pada folder Data, tambahkan class dengan nama RestServices.cs. Class ini digunakan untuk mengakses REST Services menggunakan class HttpClient dan menampung datanya kedalam objek koleksi yang sudah disediakan.


using System; 

using System.Collections.Generic; 
using System.Diagnostics; 

using System.Net.Http.Headers; 
using System.Net.Http; 
using System.Text; 

using Newtonsoft.Json; 
using System.Threading.Tasks; 
using TodoREST.Data; 
 

{ 
namespace TodoREST.Data 
{ 
    public class RestService : IRestService 

        public List<TodoItem> Items { get; private set; } 
        HttpClient client; 
 
        public RestService() 
    { 

        public async Task<List<TodoItem>> RefreshDataAsync() 
        client = new HttpClient(); 
        client.MaxResponseContentBufferSize = 256000; 
    } 
 

            var uri = new Uri(string.Format(Constants.RestUrl, string.Empty)); 
    { 
        Items = new List<TodoItem>(); 
 
            try 
        { 

                if (response.IsSuccessStatusCode) 
                var response = await client.GetAsync(uri); 
            { 

                Items = JsonConvert.DeserializeObject<List<TodoItem>>(content); 
                    var content = await response.Content.ReadAsStringAsync(); 
            } 
        } 
            catch (Exception ex) 
        { 

        public async Task SaveTodoItemAsync(TodoItem item, bool isNewItem = false) 
                Debug.WriteLine(@"Kesalahan {0}", ex.Message); 
        } 
 
            return Items; 
    } 
 
    { 
            var uriPost = new Uri(string.Format(Constants.RestUrl, string.Empty)); 

                var content = new StringContent(json, Encoding.UTF8, "application/json"); 
            var uriPut = new Uri(string.Format(Constants.RestUrl, item.ID)); 
            try 
        { 
                var json = JsonConvert.SerializeObject(item); 
 
                HttpResponseMessage response = null; 
                if (isNewItem) 
            { 

                    Debug.WriteLine(@"TodoItem berhasil disimpan."); 
                response = await client.PostAsync(uriPost, content); 
            } 
                else 
            { 
                response = await client.PutAsync(uriPut, content); 
            } 
 
                if (response.IsSuccessStatusCode) 
            { 
            } 
 
        } 
            catch (Exception ex) 

                if (response.IsSuccessStatusCode) 
        { 
                Debug.WriteLine(@"Kesalahan {0}", ex.Message); 
        } 
    } 
 
        public async Task DeleteTodoItemAsync(string id) 
    { 
            var uri = new Uri(string.Format(Constants.RestUrl, id)); 
 
            try 
        { 
                var response = await client.DeleteAsync(uri); 
 
            { 

} 
                    Debug.WriteLine(@"TodoItem berhasil didelete."); 
            } 
 
        } 
            catch (Exception ex) 
        { 
                Debug.WriteLine(@"Kesalahan {0}", ex.Message); 
        } 
    } 

}

7. Class diatas berisi method-method untuk mengakses REST Services yang digunakan untuk menampilkan, menambah, mengedit, dan mendelete data.

8. Pada folder Data, tambahkan class dengan nama TodoItemManager.cs. Class ini berfungsi untuk memanggil method pada class RestServices.cs.


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

namespace TodoREST.Data 
using TodoREST.Models; 
 
{ 

        IRestService restService; 
    public class TodoItemManager 
{ 
 

        restService = service; 
        public TodoItemManager(IRestService service) 
    { 
    } 
 

            return restService.RefreshDataAsync(); 
        public Task<List<TodoItem>> GetTasksAsync() 
    { 
    } 
 

            return restService.SaveTodoItemAsync(item, isNewItem); 
        public Task SaveTaskAsync(TodoItem item, bool isNewItem = false) 
    { 
    } 
 
        public Task DeleteTaskAsync(TodoItem item) 

} 
    { 
            return restService.DeleteTodoItemAsync(item.ID); 
    } 

}

9. Langkah selanjutnya adalah menampilkan data yang sudah diambil dari REST Services. Untuk itu pada project portable buat folder baru dengan nama Views.

10. Pada folder Views tambahkan halaman xaml dengan nama TodoListPage.xaml. Halaman ini digunakan untuk menampilkan informasi todolist pada kontrol ListView.


<?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="TodoREST.Views.TodoListPage" Title="Todo"> 
<ContentPage.ToolbarItems> 
<ToolbarItem Text="+" Clicked="OnAddItemClicked"> 
<ToolbarItem.Icon> 

<ListView x:Name="listView" ItemSelected="OnItemSelected"> 
<OnPlatform x:TypeArguments="FileImageSource" Android="plus.png" /> 
</ToolbarItem.Icon> 
</ToolbarItem> 
</ContentPage.ToolbarItems> 
<ContentPage.Content> 

<Label Text="{Binding Name}" VerticalTextAlignment="Center" /> 
<ListView.ItemTemplate> 
<DataTemplate> 
<ViewCell> 
<StackLayout Padding="20,0,0,0" HorizontalOptions="StartAndExpand" Orientation="Horizontal"> 

</ContentPage> 
<Image Source="check.png" IsVisible="{Binding Done}" /> 
</StackLayout> 
</ViewCell> 
</DataTemplate> 
</ListView.ItemTemplate> 
</ListView> 

</ContentPage.Content>

11. Tambahkan gambar plus.png dan icon.png pada project Droid (folder Resources\drawable). Dengan klik kanan pada drawable > Add > Existing Item... > kemudian cari gambar icon

12. Kemudian tambahkan kode berikut pada file TodoListPage.xaml.cs.


using Xamarin.Forms; 
 

namespace TodoREST.Views
{ 

    public partial class TodoListPage : ContentPage 
{ 
        bool alertShown = false; 
 

        InitializeComponent(); 
        public TodoListPage() 
    { 
    } 
 

            base.OnAppearing(); 
        protected async override void OnAppearing() 
    { 

        void OnAddItemClicked(object sender, EventArgs e) 
        listView.ItemsSource = await App.TodoManager.GetTasksAsync(); 
    } 
 
    { 
            var todoItem = new TodoItem() 

        todoPage.BindingContext = todoItem; 
        { 
            ID = Guid.NewGuid().ToString() 
        }; 
            var todoPage = new TodoItemPage(true); 

            var todoItem = e.SelectedItem as TodoItem; 
        Navigation.PushAsync(todoPage); 
    } 
 
        void OnItemSelected(object sender, SelectedItemChangedEventArgs e) 
    { 

}  
            var todoPage = new TodoItemPage(); 
        todoPage.BindingContext = todoItem; 
        Navigation.PushAsync(todoPage); 
    } 

}

13. Kode diatas berisi method yang digunakan untuk menampilkan data todo list kedalam kontrol ListView, dan menambahkan event ketika list tersebut dipilih.

14. Tambahkan halaman xaml baru dengan nama TodoItemPage.xaml. Halaman ini digunakan untuk menampilkan detail todo, mengedit, dan mendelete data.


<?xml version="1.0" encoding="UTF-8"?> 

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  

<ContentPage.Content> 
 x:Class="TodoREST.TodoItemPage"  
 Title="Todo"> 

<Entry x:Name="nameEntry" Text="{Binding Path=Name}" Placeholder="task name" /> 
<StackLayout VerticalOptions="StartAndExpand"> 
<Label Text="Name" /> 
<Label Text="Notes" /> 

<Switch x:Name="doneSwitch" IsToggled="{Binding Path=Done}" /> 
<Entry x:Name="notesEntry" Text="{Binding Path=Notes}" /> 
<Label Text="Done" /> 
<Button Text="Save" Clicked="OnSaveActivated" /> 

</ContentPage> 
<Button Text="Delete" Clicked="OnDeleteActivated" /> 
<Button Text="Cancel" Clicked="OnCancelActivated" /> 
</StackLayout> 

</ContentPage.Content>

15. Tambahkan kode berikut pada file TodoItemPage.xaml.cs.


using System; 

using TodoREST.Models; 
using Xamarin.Forms; 
 

    public partial class TodoItemPage : ContentPage 
namespace TodoREST 
{ 
{ 

        public TodoItemPage(bool isNew = false) 
        bool isNewItem; 
 
    { 

            isNewItem = isNew; 
        InitializeComponent(); 
    } 
 

    { 
        async void OnSaveActivated(object sender, EventArgs e) 

            await App.TodoManager.SaveTaskAsync(todoItem, isNewItem); 
            var todoItem = (TodoItem)BindingContext; 
            await Navigation.PopAsync(); 
    } 
 

            var todoItem = (TodoItem)BindingContext; 
        async void OnDeleteActivated(object sender, EventArgs e) 
    { 
            await App.TodoManager.DeleteTaskAsync(todoItem); 

} 
            await Navigation.PopAsync(); 
    } 
 
        void OnCancelActivated(object sender, EventArgs e) 
    { 
        Navigation.PopAsync(); 
    } 

}

16. Langkat terakhir tambahkan kode berikut pada file App.xaml.cs pada project portable.


using TodoREST.Data; 
using Xamarin.Forms; 

public class App : Application 
     
{ 

        public static TodoItemManager TodoManager { get; private set; } 
 
 
        public App() 
    { 

            MainPage = new NavigationPage(new TodoListPage()); 
        TodoManager = new TodoItemManager(new RestService()); 
    } 

}

17. Tekan tombol F5 untuk menjalankan aplikasi pada emulator Android.

Share From Me ~

Cari Blog Ini