Workshop Microsoft Azure Web Apps

Pada hari jumat tanggal 22 Januari 2016 telah diadakan workshop dengan tema Microsoft Azure Web Apps. Workshop ini bertempat di Lab Komputer Lantai 4, Fakultas Teknologi Informasi UKDW. Workshop ini dihadiri kurang lebih 20 peserta yang kesemuanya adalah mahasiswa. Pada workshop ini dibahas beberapa topik seperti:

  • Bagaimana mengaktifkan Dreamspark for Azure untuk Mahasiswa.
  • Bagaimana membuat aplikasi ASP.NET MVC 6 dengan Visual Studio Code.
  • Bagaimana memasang aplikasi web pada layanan Azure App Services.
  • Bagaimana membuat database di cloud menggunakan SQL Azure.
  • Bagaimana mengintegrasikan Website dan database pada layanan Azure.

IMG_20160121_125936 

IMG_20160121_130145_HDR

 

IMG_20160121_131837

Azure Mobile Services–Menambahkan Script pada proses CRUD

Tutorial sebelumnya dapat dilihat pada tautan berikut: https://erickkurniawan.net/2015/12/19/azure-mobile-servicesmengupdate-data/

Anda juga dapat menambahkan script untuk mengubah atau memfilter data sebelum atau sesudah perintah CRUD dijalankan. Dengan script anda dapat bekerja dengan bermacam-macam objek data sebagai berikut :

  • Request : execute default operation
  • Query : filtering, paging, ordering
  • Table : CRUD operation dan query
  • MSSQL : Direct SQL Statement

Untuk mencoba menggunakan script ikuti langkah berikut :

Pada services yang sebelumnya anda buat buka menu DATA. Kemudian pilih table TodoItem.

image

Kemudian pilih menu SCRIPT, anda dapat menambahkan script ketika operasi insert, update, delete,dan read.

image

Disini perintah script yang dijalankan menggunakan nodejs, Sebagai contoh pada script tambahkan kode berikut :

image

Kemudian tekan Save, dan jalankan aplikasi TodoItem. Tambahkan record baru kedalam aplikasi anda.

image

Setelah anda tambahkan, coba lihat menu log untuk melihat log yang dituliskan ketika perintah insert dijalankan.

image

Maka anda dapat melihat log yang kita create ketika perintah insert di table TodoItem dijalankan.

image

Jika anda sudah menginstall azure cli maka anda juga dapat menggunakan command prompt untuk melihat list daftar mobile services dan script yang sudah anda buat.

image

image

Menambahkan Field baru dengan Script

Jika konfigurasi dynamic schema diaktifkan, maka kita akan dapat menambahkan field pada table secara dinamis (menggunakan script). Cara ini mirip dengan penggunaan entity framework code first.

image

Pada contoh dibawah ini akan ditunjukan bagaimana cara untuk menambahkkan field ‘DateCourseCreated’ secara dinamis dan menambahkan nilai kedalam field tersebut saat perintah insert dijalankan.

image

Menambahkan Field baru dengan Script

Jika konfigurasi dynamic schema diaktifkan, maka kita akan dapat menambahkan field pada table secara dinamis (menggunakan script). Cara ini mirip dengan penggunaan entity framework code first.

image

Pada contoh dibawah ini akan ditunjukan bagaimana cara untuk menambahkkan field ‘DateCourseCreated’ secara dinamis dan menambahkan nilai kedalam field tersebut saat perintah insert dijalankan.

image

Buka fiddler, kemudian tambahkan data baru kedalam table Courses.

image

Seletah itu jalankan method GET untuk melihat output JSON yang dikirimkan.

image

Dapat anda lihat bahwa disetiap record akan ada satu field baru dengan nama ‘DateCourseCreated’. Jika anda lihat pada struktur table, maka field tersebut juga sudah ditambahkan secara permanen.

image

 

Menggunakan Query Object pada SCRIPT

Anda juga dapat memanipulasi objek Query dengan menggunakan SCRIPT. Pada contoh dibawah ini akan ditunjukan bagaimana cara memanipulasi objek query.

image_thumb

Setelah script diatas disimpan, coba jalankan method GET untuk request data dengan menggunakan fiddler. Maka hasil output setelah objek query dimanipulasi adalah sebagai berikut:

image_thumb[1]

Dapat dilihat pada output bahwa data yang ditampilkan adalah data yang field ‘complete’ bernilai ‘false’.

Azure Mobile Services–Mengupdate Data

Tutorial ini akan membahas bagaimana cara mengupdate data table pada Azure Mobile Services.

Tutorial sebelumnya: https://erickkurniawan.net/2015/12/05/azure-mobile-services-menambahkan-data-baru-pada-table/

Untuk melakukan update data anda dapat menggunakan method PUT atau PATCH. Dengan menggunakan PATCH anda cukup mengirimkan field yang akan diupdate. Sebagai contoh kita akan mengupdate field ‘Complete’ menjadi ‘true’ dari data dengan id tertentu.

image

Jika anda lihat record setelah data diupdate adalah sebagai berikut :

image

Untuk mendelete data anda dapat menggunakan method DELETE.

image

Maka record tersebut akan didelete sehingga kita sudah tidak mempunyai record yg tersisa.

Tambahkan beberapa record lagi sebagai data contoh karena kita akan mencoba beberapa variasi query dapat dilakukan.

image

Kita dapat menggunakan sintaks ODATA untuk memfilter record sesuai dengan kebutuhan. Untuk menampilkan data yg field ‘Complete’ bernilai ‘true’ tambahkan sintaks berikut pada url.

https://cloudemiaams.azure-mobile.net/Tables/Courses?$filter=Complete eq true

image

Hasil query dalam format JSON adalah sebagai berikut :

image

Untuk contoh2 query pada ODATA dapat dilihat pada alamat berikut : http://www.odata.org/documentation/odata-version-2-0/uri-conventions/

Misal untuk mengurutkan data course berdasarkan title, anda dapat menggunakan keyword $orderby sebagai berikut:

image

PHP & MySQL dengan Layanan Azure Web Apps

Pada tutorial kali ini kita akan mencoba untuk membuat aplikasi web dengan menggunakan PHP dan MySQL kemudian memasang aplikasi tersebut pada layanan Azure Web App.

Untuk menjalankan tutorial yang akan kita buat pada bab ini, maka anda harus menginstal beberapa aplikasi sebagai berikut.

Membuat Database MySQL di Azure

1. Login kedalam azure portal.

2. Pilih new icon, kemudian pilih Data + Storage, kemudian MySQL Database.

3. Buat resource group baru, sebagai contoh ‘bmis489’.

4. Pilih tombol create, dan sekarang database MySQL sudah dapat digunakan.

image

image

image

1. Anda dapat melihat database properties. Kita akan menggunakan property tersebut ketika akan mengakses MySQL database dari server side script.

image

2. Setelah database dibuat, anda dapat melakukan pengaturan database cloud tersebut pada komputer lokal. Buka tool MySQL Workbench dan masukan informasi hostname, username, dan password. Click Pilih Connection button untuk memastikan bahwa koneksi anda lancar.

image

image

3. Buka MySQL Workbench, pada jendela query tambahkan script berikut, dan kemudian jalankan script untuk membuat tabel ‘registration_tbl’.

CREATE TABLE registration_tbl(id INT NOT NULL AUTO_INCREMENT, PRIMARY KEY(id), name VARCHAR(30), email VARCHAR(30), date DATE);

image

1. Anda dapat melihat tabel “registration_tbl” berhasil dibuat.

image

Membuat Aplikasi Web dengan PHP

1. Langkah selanjutnya adalah membuat aplikasi web.

2. Pilih New Icon, kemudian pilih Web + Mobile, kemudian pilih Web App.

3. Masukan nama untuk aplikasi web yang anda buat.

4. Pilih “bmis489” sebagai nama resource group.

5. Pilih tombol create.

image

6. Ketika aplikasi web sudah berhasil dibuat, anda akan melihat tampilan resource group. Pilih nama pada aplikasi web untuk melakukan konfigurasi.

image

1. Buka aplikasi GitHub Desktop pada komputer lokal.

image

1. Buat file PHP dengan nama “index.php” dengan editor favorit anda. Simpan pada folder “PHPOnAzure”.

2. Buka file “index.php” dan tambahkan script berikut untuk terbuhung dengan MySQL database pada layanan Azure, menampilkan data peserta, dan menambahkan peserta pada sistem.

<html>
<head>
<Title>Registration Form</Title>
<style type="text/css">
body { background-color: #fff; border-top: solid 10px #000;
color: #333; font-size: .85em; margin: 20; padding: 20;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
}
h1, h2, h3,{ color: #000; margin-bottom: 0; padding-bottom: 0; }
h1 { font-size: 2em; }
h2 { font-size: 1.75em; }
h3 { font-size: 1.2em; }
table { margin-top: 0.75em; }
th { font-size: 1.2em; text-align: left; border: none; padding-left: 0; }
td { padding: 0.25em 2em 0.25em 0em; border: 0 none; }
</style>
</head>
<body>
<h1>Register here!</h1>
<p>Fill in your name and email address, then click <strong>Submit</strong> to register.</p>
<form method="post" action="index.php">
Name <input type="text" name="name" id="name"/></br>
Email <input type="text" name="email" id="email"/></br>
<input type="submit" name="submit" value="Submit" />
</form>
<?php
// DB connection info
//TODO: Update the values for $host, $user, $pwd, and $db
//using the values you retrieved earlier from the portal.
$host = "us-cdbr-azure-west-c.cloudapp.net";
$user = "b411a3239c5914";
$pwd = "7aee971d";
$db = "acsm_ac58c273e12d294";

// Connect to database.
try {
$conn = new PDO( "mysql:host=$host;dbname=$db", $user, $pwd);
$conn->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );
}
catch(Exception $e){
die(var_dump($e));
}
// Insert registration info
if(!empty($_POST)) {
try {
$name = $_POST['name'];
$email = $_POST['email'];
$date = date("Y-m-d");
// Insert data
$sql_insert = "INSERT INTO registration_tbl (name, email, date)
VALUES (?,?,?)";
$stmt = $conn->prepare($sql_insert);
$stmt->bindValue(1, $name);
$stmt->bindValue(2, $email);
$stmt->bindValue(3, $date);
$stmt->execute();
}
catch(Exception $e) {
die(var_dump($e));
}
echo "<h3>Your're registered!</h3>";
}
// Retrieve data
$sql_select = "SELECT * FROM registration_tbl";
$stmt = $conn->query($sql_select);
$registrants = $stmt->fetchAll();
if(count($registrants) > 0) {
echo "<h2>People who are registered:</h2>";
echo "<table>";
echo "<tr><th>Name</th>";
echo "<th>Email</th>";
echo "<th>Date</th></tr>";
foreach($registrants as $registrant) {
echo "<tr><td>".$registrant['name']."</td>";
echo "<td>".$registrant['email']."</td>";
echo "<td>".$registrant['date']."</td></tr>";
}
echo "</table>";
} else {
echo "<h3>No one is currently registered.</h3>";
}
?>
</body>
</html>

1. Buka aplikasi GitHub Desktop, dan kemudian pilih tombol commit to master untuk melakukan aksi push scripts anda kedalam Git repository.

image

2. Pilih tombol sync pada pojok kanan atas untuk melakukan aksi push local changes ke master yang ada di remote server.

image

3. Kembali ke pengaturan aplikasi web pada Azure. Pilih “Continuous Deployment” untuk melakukan automate build, test, dan deploy aplikasi web yang telah dibuat ketika anda melakukan check-in ke GitHub.

image

4. Tambahkan akun GitHub anda, dan pilih kode anda pada code repository.

image

5. Setelah anda mempublish aplikasi anda, maka anda dapat mengedit kode dari aplikasi tersebut jika dibutuhkan, anda cukup melakukan code check-in pada akun GitHub anda, dan Azure akan mengambil kode anda secara otomatis kemudian mempublish kode anda. Untuk melihat aplikasi, anda dapat mengakses tautan berikut http://bmis489web.azurewebsites.net/index.php.

image

Azure Mobile Services – Menambahkan Data Baru pada Table

Tutorial ini akan membahas bagaimana cara menambahkan data baru pada Azure Mobile Services.

Tutorial sebelumnya dapat dilihat di: https://erickkurniawan.net/2015/11/14/azure-mobile-services-rest-services/

Untuk menambahkan table pada windows azure mobile services, sebenarnya anda tidak perlu menggunakan SQL Server Management studio atau fasilitas managed database di SQL Azure. Anda dapat menambahkan table lewat menu Mobile Services.

image

Pertama kita akan menambahkan table baru dengan nama ‘Courses’.

image

Secara default table yang kita buat akan memiliki empat column sebagai berikut :

image

Jika anda buka table tersebut di SQL Server Management studio, dapat dilihat bahwa column Id akan digunakan sebagai primary key.

image

Tambahkan 3 column baru dengan nama Title – string, Description- string, dan Complete – boolean.

image

Setelah menambahkan column tersebut, sekarang kita akan mencoba untuk menambahkan data kedalam table yang sudah kita buat menggunakan fiddler. Untuk menambahkan data kita akan menggunakan method POST.

image

Jika data berhasil ditambah maka akan muncul status kode ‘201 Created’.

image

Jika kita lihat data yang kita inputkan pada windows azure adalah sebagai berikut :

image

Tutorial selanjutnya akan membahas bagaimana cara untuk mengupdate data pada object Table di Azure Mobile Services.

Azure Mobile Services – REST Services

Pada tutorial kali ini kita akan membahas bagaimana cara mengakses REST service untuk mengambil data dari objek table di Azure Mobile Services.

Tutorial sebelumnya: https://erickkurniawan.net/2015/10/24/azure-mobile-services-bekerja-dengan-sql-azure/

Anda dapat mengakses table TodoItem yang sudah anda buat secara REST. Untuk mengakses table tersebut anda harus memeriksa permission dari table teersebut, caranya anda dapat memilih table TodoItem kemudian pilih menu ‘Permission’.

image

Agar semua orang dapat mengakses dan menquery data, anda harus mengubah pengaturan READ PERMISSION menjadi Everyone.

image

Setelah pengaturan selesai tekan SAVE, kemudian anda bisa mencoba untuk membaca data menggunakan REST. Pada browser tambahkan url berikut :

image

Maka anda dapat melihat bahwa data dengan format JSON yang berisi semua data dari table TodoItem akan ditampilkan.

Anda juga dapat menggunakan program seperti fiddler untuk mengakses REST services tersebut. Berikut contoh penggunaan fiddler.

image

Dapat dilihat file JSON yang akan dihasilkan sebagai berikut :

image

Cara seperti diatas dapat dilakukan namun kurang aman karena semua orang dapat mengakses table TodoItem secara REST. Coba anda kembalikan pengaturan READ PERMISSION menjadi ‘Anybody with the Application Key’.

image

Kemudian buka fiddler kembali, dan akses REST url seperti sebelumnya.

image

Sekarang pesannya adalah Unauthorized karena permission sudah dirubah, anda harus menambahkan application key untuk melakukan request. Untuk mendapatkan application key anda dapat memilih tombol MANAGE KEYS.

image

image

Copy application key, kemudian tambahkan application key tersebut ketika kita melakukan request ke server.

image

Setelah ditambahkan application key, maka anda dapat melihat bahwa request tersebut berhasil dan mengembalikan status 200.

image

Pada tutorial berikutnya akan dijelaskan bagaimana menambahkan table baru pada Azure Mobile Services.

Azure Mobile Services – Bekerja dengan SQL Azure

Pada tutorial ini akan dibahas pembuatan database SQL Azure untuk digunakan pada layanan Azure Mobile Services.

Tutorial sebelumnya : https://erickkurniawan.net/2015/10/10/azure-mobile-services-pengantar-dan-instalasi/

1. Pilih menu SQL Database pada dashboard, anda akan dapat melihat database CloudemiaAMS_db yang akan digunakan untuk menyimpan data.

2. Jika anda perhatikan maka Azure Mobile Services dan SQL Database yang sudah kita buat akan memiliki region yang sama.

image

3. Kemudian pilih azure mobile services yang sudah anda buat. Akan muncul beberapa menu seperti dashboard, data, api, scheduler, push, identity, configure, dll.

image

4. Pada dashboard kita dapat melihat limitasi dari services yang kita buat. Karena kita menggunakan versi gratis maka ada batasan pemanggilan API per hari, dan batasan devices yang mengakses per hari. Kita dapat melakukan scaling jika kebutuhan kita sudah melebihi batas yang ditentukan.

image

5. Untuk melakukan scaling, anda dapat melakukan pengaturan di menu SCALE.

image

Pada tutorial berikutnya akan dibahas bagaimana cara mengakses table yang ada di Azure Mobile Services agar dapat diakses sebagai REST services.