Windows Azure – Menerapkan Data Relasi Antar Table pada Mobile Service

(1)

PRAKTIKUM

Basis Data

Pertemuan 12

17 Mei 2018

Windows Azure – Review, Autentikasi

Data dan Menerapkan Data Relasi

Antar Tabel Pada Mobile Service

(2)

(3)

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

BASIS DATA ASISTEN LABORATORIUM MATEMATIKA FMIPA UNPAD 2018

(4)

Kekurangan Microsoft Azure :

(5)

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.

(6)

(7)

Windows Azure – Autentikasi Data Pada Mobile

Service

2. Klik

Easy tables

→ klik

TodoItem

Windows Azure dan Mobile Data Service

(8)

3. Klik

Change permissions

→ ubah semua

Change permissions

(9)

Windows Azure – Autentikasi Data Pada Mobile

Service

4. Untuk membatasi data pada setiap pengguna, klik

Edit script

(10)

5. Setelah klik

Edit script

maka akan terbuka halaman baru, lalu

return context.execute();

});

table.read(function (context) {

context.query.where({ userId:

context.user.userId });

(11)

Windows Azure – Autentikasi Data Pada Mobile

Service

(12)

6. Untuk menghubungkan LIVE ID sebagai autentikasi pada

aplikasi, daftarkan aplikasi mobile service pada link

apps.dev.miscrosoft.com

(13)

Windows Azure – Autentikasi Data Pada Mobile

Service

8. Masukkan nama aplikasinya, lalu klik

Create

(14)

8. Masukkan

Home page URL

dengan link yang ada pada bagian

(15)

Windows Azure – Autentikasi Data Pada Mobile

Service

(16)

9. Buka

solution

yang sebelumnya telah di download pada Visual

Studio lalu tambahkan method berikut di

class

MainPage pada

file

MainPage.xaml.cs

(17)

Windows Azure – Autentikasi Data Pada Mobile

Service

(18)

10. Setelah itu, ubahlah method OnNavigatedTo pada

class

MainPage.xaml menjadi kode berikut

protected override async void OnNavigatedTo(NavigationEventArgs e) {

(19)

Windows Azure – Autentikasi Data Pada Mobile

Service

11. Jalankan aplikasi lalu simulasikan memasukan data tugas

dengan beberapa LIVE ID yang berbeda.

(20)

Berikut adalah contoh isi data pada table TodoItem yang telah

diisi dengan berbagai data dari berbagai akun LIVE ID yang

(21)

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.

(22)

Ada beberapa jenis relasi database, yaitu :

• _{Relasi One to One}

(23)

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

pembuatan table yang saling berelasi pada Azure Mobile

Service.

(24)

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

(25)

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.

(26)

4. Tambahkan kode berikut pada StandardStyle.xaml

(27)

Windows Azure – Menerapkan Data Relasi Antar

Table pada Mobile Service

(28)

(29)

Windows Azure – Menerapkan Data Relasi Antar

Table pada Mobile Service

</StackPanel>

<StackPanel Name="panelInputTugas" Grid.Row="1" Grid.Column="1" Orientation="Horizontal"

(30)

<Grid.ColumnDefnitions>

<Button Name="btnTambahTugas" Content="" FontFamily="Segoe UI Symbol" Grid.Column="1"

(31)

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">

Selamat datang. Kamu belum mendaftarkan mata kuliah kamu.

</TextBlock>

Untuk mendaftarkan mata kuliah, kamu dapat mengisi kolom isian di atas.

(32)

<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>

Untuk mendaftarkan tugas, kamu dapat mengisi kolom isian di atas.

(33)

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"

</StackPanel>

</DataTemplate>

(34)

</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>

<CheckBox Name="CheckBoxComplete" IsChecked="{Binding

Complete, Mode=TwoWay}" Checked="CheckBoxComplete_Checked" Content="{Binding NamaTugas}" Margin="10,5"

(35)

Windows Azure – Menerapkan Data Relasi Antar

Table pada Mobile Service

</StackPanel>

</DataTemplate>

</ListView.ItemTemplate> </ListView>

(36)

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; }

(37)

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; }

(38)

7. Tambahkan

variable

–

variable

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;

(39)

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

(40)

private void switchTugas() {

bool isTugasAvalaible = tugasItem.Count > 0;

noTask.Visibility = isTugasAvalaible ? Visibility.Collapsed : Visibility.Visible;

(41)

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

(42)

private async void RefreshMatkulItems() {

MobileServiceInvalidOperationException exception = null; try

{

matkulItem = await matkulTable.ToCollectionAsync(); }

catch (MobileServiceInvalidOperationException e) {

(43)

Windows Azure – Menerapkan Data Relasi Antar

Table pada Mobile Service

(44)

private async void InsertTugas(Tugas itemTugas) {

await tugasTable.InsertAsync(itemTugas); tugasItem.Add(itemTugas);

inputTugas.Text = null; switchTugas();

(45)

Windows Azure – Menerapkan Data Relasi Antar

Table pada Mobile Service

private async void RefreshTugasItems(int matkulid) {

(46)

catch (MobileServiceInvalidOperationException e) {

exception = e; }

if (exception != null) {

await new MessageDialog(exception.Message, "Gagal mengambil tugas").ShowAsync();

(47)

Windows Azure – Menerapkan Data Relasi Antar

Table pada Mobile Service

else

private async void UpdateCheckedTugasItem(Tugas itemTugas) {

await tugasTable.UpdateAsync(itemTugas); tugasItem.Remove(itemTugas);

(48)

private void CheckBoxComplete_Checked(object sender, RoutedEventArgs e)

{

CheckBox cb = (CheckBox)sender;

Tugas item = cb.DataContext as Tugas; UpdateCheckedTugasItem(item);

(49)

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)

{

(50)

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 };

(51)

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);

(52)

private void listViewMatkul_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

if (listViewMatkul.SelectedIndex > -1) {

panelInputTugas.Visibility = Visibility.Visible; MataKuliah selectedMatkul =

(MataKuliah)listViewMatkul.SelectedItem;

(53)

Windows Azure – Menerapkan Data Relasi Antar

Table pada Mobile Service

else

{

panelInputTugas.Visibility = Visibility.Collapsed; listViewTugas.Visibility = Visibility.Collapsed;

noTask.Visibility = Visibility.Collapsed; }

(54)

(55)

Ada pertanyaan?

(56)