Windows Azure – Menerapkan Data Relasi Antar Table pada Mobile Service

  PRAKTIKUM Basis Data Pertemuan 12

17 Mei 2018

  Windows Azure – Review, Autentikasi Data dan Menerapkan Data Relasi Antar Tabel Pada Mobile Service

ASISTEN LABORATORIUM

  Microsoft Azure Aplikasi dari Microsoft© yang merupakan sebuah Cloud Platform feksibel dan terbuka yang memungkinkan penggunanya untuk cepat membuat, meluncurkan, dan mengatur aplikasi melintasi jaringan global dari pusat data yang diatur oleh Microsoft©.

  Microsoft Azure Kelebihan Microsoft Azure :

  • > Bisa menjalankan aplikasi dari berbagai jenis teknologi dan platform, diantaranya .NET (sebagai teknologi dari Microsoft), JAVA, dan juga PHP.
  • > Memiliki Virtual Machine terbaik saat ini
  • > Pilihan pengembangan aplikasi tidak terbatas
  • > Terbuka dan Fleksibel -> Data yang tersimpan pada cloud awet dan tahan lama

  Microsoft Azure Kekurangan Microsoft Azure :

  • > Harus terhubung dengan internet (Karena Microsoft Azure termasuk Cloud Platform untuk Cloud Computing)
  • > Data berada di Cloud

  Windows Azure – Autentikasi Data Pada Mobile Service Autentikasi Data : Autentikasi data pada mobile service merupakan ftur untuk memodifkasi aplikasi yang telah dibuat sebelumnya. Fitur autentikasi yang akan ditambahkan memungkinkan pengguna mempunyai databasenya secara pribadi atau dengan kata lain pengguna yang lain tidak dapat melihat ataupun merubah data tersebut.

  Windows Azure – Autentikasi Data Pada Mobile Service

1. Klik All resources → klik “nama” App Service nya

  Windows Azure – Autentikasi Data Pada Mobile Service

2. Klik Easy tables → klik TodoItem

  Scroll ke bawah

  Windows Azure – Autentikasi Data Pada Mobile Service

  3. Klik Change permissions → ubah semua Change permissions menjadi Authenticated access only → Save

  Windows Azure – Autentikasi Data Pada Mobile Service

4. Untuk membatasi data pada setiap pengguna, klik Edit script

  Windows Azure – Autentikasi Data Pada Mobile Service

  5. Setelah klik Edit script maka akan terbuka halaman baru, lalu ubahlah kode pada OPERATIONInsert” dan “Read” dan akan tersimpan secara otomatis table.insert(function (context) { context.item.userId = context.user.userId; return context.execute(); }); table.read(function (context) { context.query.where({ userId: context.user.userId }); return context.execute(); });

  Windows Azure – Autentikasi Data Pada Mobile Service

  Windows Azure – Autentikasi Data Pada Mobile Service

  6. Untuk menghubungkan LIVE ID sebagai autentikasi pada aplikasi, daftarkan aplikasi mobile service pada link apps.dev.miscrosoft.com

7. Pada halaman Live Developer, klik Add an app

  Windows Azure – Autentikasi Data Pada Mobile Service

8. Masukkan nama aplikasinya, lalu klik Create

  Windows Azure – Autentikasi Data Pada Mobile Service

8. Masukkan Home page URL dengan link yang ada pada bagian

  overwrite pada App service

  Windows Azure – Autentikasi Data Pada Mobile Service

  Windows Azure – Autentikasi Data Pada Mobile Service

  9. Buka solution yang sebelumnya telah di download pada Visual Studio lalu tambahkan method berikut di class MainPage pada file MainPage.xaml.cs private async System.Threading.Tasks.Task Authenticate() { while (App.MobileService.CurrentUser == null) { string message = null; try { await

App.MobileService.LoginAsync(MobileServiceAuthenticationProvider.MicrosoftAccount)

; message = String.Format("Berhasil masuk dengan ID = {0}", App.MobileService.CurrentUser.UserId); }

  Windows Azure – Autentikasi Data Pada Mobile Service catch (InvalidOperationException) { message = "Gagal masuk"; } MessageDialog dialog = new MessageDialog(message, "Status Login"); await dialog.ShowAsync(); } }

  Windows Azure – Autentikasi Data Pada Mobile Service

  10. Setelah itu, ubahlah method OnNavigatedTo pada class MainPage.xaml menjadi kode berikut protected override async void OnNavigatedTo(NavigationEventArgs e) { await Authenticate(); RefreshTodoItems(); }

  Windows Azure – Autentikasi Data Pada Mobile Service

11. Jalankan aplikasi lalu simulasikan memasukan data tugas dengan beberapa LIVE ID yang berbeda.

  Windows Azure – Autentikasi Data Pada Mobile Service Berikut adalah contoh isi data pada table TodoItem yang telah diisi dengan berbagai data dari berbagai akun LIVE ID yang berbeda

  Windows Azure – Menerapkan Data Relasi Antar Table pada Mobile Service Relasi antar tabel : Relasi Antar table adalah sesuatu yang sangat penting dalam sebuah aplikasi dan program. Teknik relasi data ada beberapa macam, misalnya dengan teknik normalisasi, teknik entity relationship dan sebagainya. Namun bagaimanapun tekniknya, relasi data bertujuan untuk menghemat memori dalam perancangan database dan juga menghindari adanya penginputan berulang dalam sebuah aplikasi.

  Windows Azure – Menerapkan Data Relasi Antar Table pada Mobile Service Ada beberapa jenis relasi database, yaitu :

  • Relasi One to One • Relasi One to Many dan Many to One • Relasi Many to Many

  Windows Azure – Menerapkan Data Relasi Antar Table pada Mobile Service Ketika memilih data dari beberapa tabel dengan relasi ini, kita akan menggunakan JOIN query. Ada beberapa jenis JOIN, yaitu :

  • Cross Joins • Natural Joins • Inner Joins • Left (Outer) Joins • Right (Outer) Joins Pada bagian ini akan dipaparkan tentang tahapan – tahapan

  Windows Azure – Menerapkan Data Relasi Antar Table pada Mobile Service

  1. Buatlah dua buah data table pada windows Azure dengan masing – masing nama table “MataKuliah” untuk menampung data mata kuliah dan table “Tugas” untuk menampung data keseluruhan tugas. Kedua table mempunyai keseluruhan permission “Only Authenticated Users”.

  Windows Azure – Menerapkan Data Relasi Antar Table pada Mobile Service

  

2. Setelah itu ubahlah SCRIPT “Read” dan SCRIPT “Insert” pada

kedua table dengan kode yang sama dengan table TodoItem sebelumnya.

  3. Pada project daftar tugas, import StandardStyle.xaml dengan cara menambahkan Basic Page ke dalam project. Basic Page yang telah ditambahkan ke dalam project dapat dihapus karena tidak akan dipergunakan.

  Windows Azure – Menerapkan Data Relasi Antar Table pada Mobile Service

4. Tambahkan kode berikut pada StandardStyle.xaml

  <Style x:Key="MediumText" TargetType="TextBlock" > <Setter Property="FontSize" Value="30" /> <Setter Property="FontFamily" Value="Segoe UI Light" /> <Setter Property="FontWeight" Value="Thin" /> <Setter Property="TextWrapping" Value="Wrap" /> </Style>

  Windows Azure – Menerapkan Data Relasi Antar Table pada Mobile Service

  <Style x:Key="ItemsListViewStyle" TargetType="ListView"> <Setter Property="ItemContainerStyle"> <Setter.Value> <Style TargetType="ListViewItem"> <Setter Property="HorizontalContentAlignment" Value="Stretch"/> </Style> </Setter.Value> </Setter> </Style>

  Windows Azure – Menerapkan Data Relasi Antar Table pada Mobile Service

5. Ubahlah keseluruhan isi Page pada MainPage.xaml menjadi kode berikut.

  <Grid Style="{StaticResource LayoutRootStyle}"> <Grid Margin="0,0,10,0"> <Grid.RowDefnitions> <RowDefnition Height="100"/> <RowDefnition Height="100"/> <RowDefnition Height="*"/> </Grid.RowDefnitions> <Grid.ColumnDefnitions> <ColumnDefnition x:Name="primaryColumn" Width="610" /> <ColumnDefnition Width="*"/>

  Windows Azure – Menerapkan Data Relasi Antar Table pada Mobile Service

  <TextBox Name="inputMatkul" Margin="5" MinWidth="400" Height="40"/> <Button Name="btnTambahMatkul" Click="btnTambahMatkul_Click" Content="" FontFamily="Segoe UI Symbol"/> </StackPanel> <StackPanel Name="panelInputTugas" Grid.Row="1" Grid.Column="1" Orientation="Horizontal" HorizontalAlignment="Center" Visibility="Collapsed"> <Grid VerticalAlignment="Bottom">

  Windows Azure – Menerapkan Data Relasi Antar Table pada Mobile Service

  <Grid.ColumnDefnitions> <ColumnDefnition Width="*" /> <ColumnDefnition Width="50"/> </Grid.ColumnDefnitions> <TextBox Name="inputTugas" Margin="5" MinWidth="500" Height="40" Grid.Column="0"/> <Button Name="btnTambahTugas" Content="" FontFamily="Segoe UI Symbol" Grid.Column="1" Click="btnTambahTugas_Click"/> </Grid>

  Windows Azure – Menerapkan Data Relasi Antar Table pada Mobile Service

  </StackPanel>   <StackPanel x:Name="noCategories" Grid.Column="0" Orientation="Vertical" Visibility="Visible" VerticalAlignment="Center" Margin="120,0,0,0" Grid.RowSpan="3"> <TextBlock Style="{StaticResource MediumText}" Margin="0,10,10,10"> Selamat datang. Kamu belum mendaftarkan mata kuliah kamu.

  </TextBlock> <TextBlock Style="{StaticResource MediumText}"

  Windows Azure – Menerapkan Data Relasi Antar Table pada Mobile Service

  <StackPanel x:Name="noTask" Grid.Column="1" Orientation="Vertical" Visibility="Collapsed" VerticalAlignment="Center" Grid.RowSpan="3"> <TextBlock Style="{StaticResource MediumText}" Margin="20,10,10,10"> Kamu belum mempunyai tugas.

  </TextBlock> <TextBlock Style="{StaticResource MediumText}" Margin="20,10,10,10"> Untuk mendaftarkan tugas, kamu dapat mengisi kolom isian di atas.

  Windows Azure – Menerapkan Data Relasi Antar Table pada Mobile Service

  <ListView x:Name="listViewMatkul" Grid.Row="2" Grid.Column="0" ItemsSource="{Binding MataKuliah}" Margin="120,0,0,0" SelectionMode="Single" Style="{StaticResource ItemsListViewStyle}" Visibility="Collapsed" SelectionChanged="listViewMatkul_SelectionChanged"> <ListView.ItemTemplate> <DataTemplate> <StackPanel Margin="20,20,20,10"> <TextBlock Style="{StaticResource MediumText}" Text="{Binding NamaMataKuliah}"/> </StackPanel>

  Windows Azure – Menerapkan Data Relasi Antar Table pada Mobile Service

  </ListView>   <ListView x:Name="listViewTugas" Grid.Row="2" Grid.Column="1" ItemsSource="{Binding Tugas}" Style="{StaticResource ItemsListViewStyle}" Visibility="Collapsed" Margin="50,0,0,0"> <ListView.ItemTemplate> <DataTemplate> <StackPanel Margin="20,20,20,10"> <CheckBox Name="CheckBoxComplete" IsChecked="{Binding Complete, Mode=TwoWay}" Checked="CheckBoxComplete_Checked" Content="{Binding NamaTugas}" Margin="10,5"

  Windows Azure – Menerapkan Data Relasi Antar Table pada Mobile Service

  </StackPanel> </DataTemplate> </ListView.ItemTemplate> </ListView> </Grid> </Grid>

  Windows Azure – Menerapkan Data Relasi Antar Table pada Mobile Service

6. Tambahkan kedua class berikut ke dalam MainPage.xaml.cs sebagai data model yang akan digunakan.

  public class Tugas { public int Id { get; set; }   [JsonProperty(PropertyName = "namatugas")] public string NamaTugas { get; set; }

  [JsonProperty(PropertyName = "complete")] public bool Complete { get; set; }

  Windows Azure – Menerapkan Data Relasi Antar Table pada Mobile Service

  [JsonProperty(PropertyName = "matakuliahid")] public int MataKuliahID { get; set; } }   public class MataKuliah { public int Id { get; set; }   [JsonProperty(PropertyName = "namamatkul")] public string NamaMataKuliah { get; set; } }

  Windows Azure – Menerapkan Data Relasi Antar Table pada Mobile Service

  7. Tambahkan variablevariable berikut sebagai pemetaan data model yang akan digunakan ke dalam class MainPage yang berada pada MainPage.xaml.cs

  public sealed partial class MainPage : Page { private MobileServiceCollection<Tugas, Tugas> tugasItem; private IMobileServiceTable<Tugas> tugasTable = App.MobileService.GetTable<Tugas>();   private MobileServiceCollection<MataKuliah, MataKuliah> matkulItem; private IMobileServiceTable<MataKuliah> matkulTable = App.MobileService.GetTable<MataKuliah>();

  Windows Azure – Menerapkan Data Relasi Antar Table pada Mobile Service

  8. Tambahkan method-method berikut ke dalam class MainPage yang berada pada MainPage.xaml.cs

  private void switchMatkul() { bool isMatkulAvalaible = matkulItem.Count > 0; noCategories.Visibility = isMatkulAvalaible ? Visibility.Collapsed : Visibility.Visible; listViewMatkul.Visibility = isMatkulAvalaible ? Visibility.Visible : Visibility.Collapsed; }

  Windows Azure – Menerapkan Data Relasi Antar Table pada Mobile Service

  private void switchTugas() { bool isTugasAvalaible = tugasItem.Count > 0; noTask.Visibility = isTugasAvalaible ? Visibility.Collapsed : Visibility.Visible; listViewTugas.Visibility = isTugasAvalaible ? Visibility.Visible : Visibility.Collapsed; }

  Windows Azure – Menerapkan Data Relasi Antar Table pada Mobile Service

  

9. Tambahkan method – method berikut sebagai operasi dasar

dari data model yang akan digunakan ke dalam class MainPage

yang berada pada MainPage.xaml.cs

  private async void InsertMatkul(MataKuliah itemMatkul) { await matkulTable.InsertAsync(itemMatkul); matkulItem.Add(itemMatkul); inputMatkul.Text = null; switchMatkul(); }

  Windows Azure – Menerapkan Data Relasi Antar Table pada Mobile Service

  private async void RefreshMatkulItems() { MobileServiceInvalidOperationException exception = null; try { matkulItem = await matkulTable.ToCollectionAsync(); } catch (MobileServiceInvalidOperationException e) { exception = e; }

  Windows Azure – Menerapkan Data Relasi Antar Table pada Mobile Service

  if (exception != null) { await new MessageDialog(exception.Message, "Gagal mengambil mata kuliah").ShowAsync();

  } else { listViewMatkul.ItemsSource = matkulItem; } switchMatkul(); }

  Windows Azure – Menerapkan Data Relasi Antar Table pada Mobile Service

  private async void InsertTugas(Tugas itemTugas) { await tugasTable.InsertAsync(itemTugas); tugasItem.Add(itemTugas); inputTugas.Text = null; switchTugas(); }

  Windows Azure – Menerapkan Data Relasi Antar Table pada Mobile Service

  private async void RefreshTugasItems(int matkulid) { MobileServiceInvalidOperationException exception = null; try

  { tugasItem = await tugasTable .Where(tugas => tugas.Complete == false && tugas.MataKuliahID == matkulid) .ToCollectionAsync(); }

  Windows Azure – Menerapkan Data Relasi Antar Table pada Mobile Service

  catch (MobileServiceInvalidOperationException e) { exception = e; } if (exception != null) { await new MessageDialog(exception.Message, "Gagal mengambil tugas").ShowAsync();

  }

  Windows Azure – Menerapkan Data Relasi Antar Table pada Mobile Service

  else { listViewTugas.ItemsSource = tugasItem; switchTugas(); } } private async void UpdateCheckedTugasItem(Tugas itemTugas) { await tugasTable.UpdateAsync(itemTugas); tugasItem.Remove(itemTugas); }

  Windows Azure – Menerapkan Data Relasi Antar Table pada Mobile Service

  private void CheckBoxComplete_Checked(object sender, RoutedEventArgs e) { CheckBox cb = (CheckBox)sender; Tugas item = cb.DataContext as Tugas; UpdateCheckedTugasItem(item); }

  Windows Azure – Menerapkan Data Relasi Antar Table pada Mobile Service

10. Ubahlah method OnNavigatedTo pada class MainPage yang berada pada MainPage.xaml.cs menjadi kode berikut.

  protected override async void OnNavigatedTo(NavigationEventArgs

  e) { await Authenticate(); RefreshMatkulItems(); }

  Windows Azure – Menerapkan Data Relasi Antar Table pada Mobile Service

  11. Tambahkan method – method berikut sebagai event yang akan digunakan ke dalam class MainPage yang berada pada MainPage.xaml.cs

  private void btnTambahMatkul_Click(object sender, RoutedEventArgs

  e) { var itemMatkul = new MataKuliah { NamaMataKuliah = inputMatkul.Text }; InsertMatkul(itemMatkul); }

  Windows Azure – Menerapkan Data Relasi Antar Table pada Mobile Service

  private void btnTambahTugas_Click(object sender, RoutedEventArgs

  e) { MataKuliah selectedMatkul = (MataKuliah)listViewMatkul.SelectedItem; var itemTugas = new Tugas { MataKuliahID = selectedMatkul.Id, NamaTugas = inputTugas.Text }; InsertTugas(itemTugas); }

  Windows Azure – Menerapkan Data Relasi Antar Table pada Mobile Service

  private void listViewMatkul_SelectionChanged(object sender, SelectionChangedEventArgs e) { if (listViewMatkul.SelectedIndex > -1) { panelInputTugas.Visibility = Visibility.Visible; MataKuliah selectedMatkul = (MataKuliah)listViewMatkul.SelectedItem; RefreshTugasItems(selectedMatkul.Id); }

  Windows Azure – Menerapkan Data Relasi Antar Table pada Mobile Service

  else { panelInputTugas.Visibility = Visibility.Collapsed; listViewTugas.Visibility = Visibility.Collapsed; noTask.Visibility = Visibility.Collapsed; } }

  Windows Azure – Menerapkan Data Relasi Antar Table pada Mobile Service

  

12. Jalankan aplikasi dan simulasikan pengisian data tugas dari

beberapa Live ID yang berbeda. Berikut adalah contoh tampilan aplikasi yang telah dibuat.

  Ada pertanyaan?

TERIMA KASIH

  ASISTEN LABORATORIUM MATEMATIKA FMIPA UNPAD 2018