Workshop Cloud Essential–Azure Camp

Pada tanggal 18 Maret 2015, Microsoft Indonesia mengadakan acara Workshop Cloud Essential – Azure Camp yang dilaksanakan di Hotel Gumaya, Semarang. Acara ini ditujukan untuk IT Professional dan Developer yang tertarik untuk mempelajari lebih lanjut tentang pemanfaatan Microsoft Azure Cloud Platform di dunia Industri. Peserta datang dari berbagai kalangan seperti dunia Industri, UKM, dan Akademisi.

Pada kesempatan kali ini saya berkesempatan untuk membawakan topik Microsoft Azure yaitu:

  • Azure Web Sites : Microsoft Azure Websites is the fastest way to build for the Cloud providing a highly scalable enterprise-ready environment. In this talk, learn how Azure Websites enables you to build applications with your language/framework of choice and deploy with ease.
  • Azure Identity and Access : Azure identity focus on the way to integrate between existing application and proposed application through a single ID like Office 365 and Open ID
  • Azure IAAS: Azure IAAS focuses on a break practices to deploy and to manage the Virtual Machine in order to get higher scalability yet with lower investment
  • SQL Azure: SQL Azure covers a practical way to convert and migrate between SQL Server to SQL Azure and understanding the basic to manage a database on Azure and on premise.

Untuk materi pada workshop ini dapat diakses pada alamat berikut: http://1drv.ms/182VBoa

20150317_075404

20150317_075350

20150317_115617

20150317_115816

20150317_115909

Autentikasi Aplikasi ASP.NET MVC dengan Azure Active Directory

Pada tutorial ini akan dibahas bagaimana cara autentikasi dengan melakukan sign-in dari ASP.NET MVC menggunakan Azure AD (Active Directory). Beberapa tahapan yang akan kita lakukan adalah sebagai berikut:

  • Membuat akun pada Azure Active Directory
  • Membuat aplikasi ASP.NET MVC baru yang menggunakan Azure AD untuk autentikasi

 

Membuat Azure Active Directory

Langkah pertama yang harus dilakukan adalah membuat akun di Azure Active Directory.

image

Setelah anda berhasil membuat Azure Active Directory, tambahkan user yang akan digunakan untuk login kedalam aplikasi ASP.NET anda.

image

Tambahkan user baru kedalam Active Directory. Pada contoh dibawah ini akan ditambahkan user baru yaitu jovan@cloudemia.onmicrosoft.com

image

Tambahkan role dari user yang baru saja anda buat sebagai Global Administrator.

image

Kemudian anda dapat menggenerate password untuk user tersebut.

image

Anda dapat login sebagai user jovan dan mengganti password dengan login terlebih dahulu pada halaman berikut https://account.activedirectory.windowsazure.com/.

Membuat Aplikasi ASP.NET MVC

Buat project ASP.NET MVC, kemudian pilih tombol Change Authentication, kemudian pilih Organizational Account

image

image

Tambahkan domain Azure Active Directory anda pada isian Domain, dan pilih Access Level: Single Sogn On, Read derectory data.

image

Jika muncul halaman sign-in, anda dapat memasukan user Azure Active Directory anda.

image

Anda dapat mempublish aplikasi ASP.NET MVC yang anda buat ke Microsoft Azure Website.

image

image

image

Anda diharuskan melakukan login ke Azure AD terlebih dahulu sebelum dapat mengakses aplikasi web.

image

image

Create PHP Application on Microsoft Azure Website

This tutorial will show you how to use PHP language on Azure Website services. In this tutorial I use Azure Management Portal to create new Azure Website instance.

For create a PHP Website do the following step below:

1. You must login to Azure Website and create new azure website.

2. For create azure website choose click New button at the bottom of the page, after that choose Compute – Website – and Quick Create. Provide an URL or name for your azure website (must be unique). For example: AzureWebPHP.

3. Select East Asia for Region (choose the closest region with your users). Finally click button ‘Create Website’.

4. After creating azure website you can change the configuration option and link to other resources, e.g. database.

5. On your website management page, you can choose ‘Configure’. The configure tab has the following section, e.g. general tab that contains framework version (.NET, PHP, Java, Phyton), certificates (for SSL certificates), domain name (custom domain name), etc.

6. You can use webmatrix to edit and publish your PHP code. From Azure Website choose

7. After webmatrix opened, choose ‘Edit local copy’.

8. When prompted to download your site, choose ‘Yes install from the Template Gallery’.

9. From the available templates choose PHP, and then select ‘Empty Site’, and click ‘Next’.

10. Right click on AzureWebPHP node, and select ‘New File’.

11. You can type ‘PHP’ to the search box for searching PHP templates. Add ‘index.php’ to your project.

12. Open ‘index.php’ and write this following code.

13. Save file index.php. If you choose save button then your file will be saved automatically on azure website.

14. Choose ‘Run’ to open your PHP application on browser.

From the tutorial above you have seen it’s pretty simple to create PHP application on Azure Website.

FREE EBOOK Getting Started with Win8 & Azure Mobile Services

image

DOWNLOAD FREE EBOOK DISINI

Ebook ini berisi tutorial singkat untuk mempelajari pemrograman aplikasi mobile dengan Windows 8 (Javascript) dengan backend Azure Mobile services. Buku ini mempunyai jumlah halaman sebanyak 78 Hal, adapun daftar isi dari buku ini adalah :

Bab 1 – Pengantar Windows 8 & Azure Mobile Services   

  • Perkembangan Teknologi Mobile   
  • Menggunakan Touch pada Windows Store App   
  • Microsoft Azure   
  • Azure Mobile Services   
  • Apa yang harus dipersiapkan?   

BAB 2 – Membuat Aplikasi Windows Store Pertama Anda 

  • Membuat Aplikasi Pertama untuk ambil Gambar   
  • Mendeklarasikan Kapabilitas Aplikasi Anda   
  • Membuat Halaman HTML   
  • Menambahkan Style Sheet   
  • Menambahkan Javascript File   
  • WinJS dan JQuery   
  • Menggunakan JQuery pada Aplikasi Windows Store   

Bab 3 – Pengenalan WinJS   

  • Class, Object, dan Inheritance pada WinJS   
  • ECMAScript5   
  • Membuat Class   
  • Inheritance   
  • Mixins   
  • Penggunaan Namespace pada WinJS   
  • Membuat Namespace di WinJS   
  • Module Pattern pada WinJS   
  • Asynchronous Programming dengan Promises   
  • Menggunakan Promises di Windows Store   
  • Menggunakan then() atau done() ?   
  • Membuat Promises   
  • Mengambil DOM Elemen dengan Query Selector   
  • Contoh penggunaan query pada WinJS   
  • Mengambil Elemen Tunggal menggunakan method WinJS.Utilities.id()   
  • Menggunakan Method WinJS.Utilities.children()   
  • Pemangilan AJAX dengan fungsi xhr()   

Bab 4- Observable, Binding, dan Template   

  • Observable Pattern   
  • Membuat Observable Object  
  • Observable dengan Objek Kompleks   
  • Notifikasi yang Bertumpuk   
  • Melewatkan Notifikasi   
  • Bekerja dengan Koleksi Observable   
  • Declarative Data Binding   
  • Contoh Sederhana Declarative Data Binding   
  • Declarative Data Binding dan Observable   
  • Contoh Declarative Binding dan Observable   
  • Contoh Mengambil Data dari Form   
  • Contoh Data Binding menggunakan Navigation Template   
  • Contoh Declarative Binding dan WinJS Control   
  • Declarative Binding dan Binding Converter   
  • Menggunakan Template   
  • Membuat Simple Template   

Bab 5 – Windows Azure Mobile Services   

  • Memulai Membuat Azure Mobile Services   
  • Windows Store Client   
  • Mengakses REST Services dari Table di Mobile Services   
  • Menambahkan Data dan Table Baru pada Azure Mobile Services   
  • Menambahkan Script Pada Proses CRUD   
  • Menggunakan Objek Request pada Script   
  • Menambahkan Field baru dengan Script   
  • Menggunakan Query Object pada SCRIPT   

Bab 6 -Identity dengan Azure Mobile Services   

  • Membuat Twitter Identity Provider   
  • Membuat Facebook Identity Provider   
  • Menambahkan Restriction Permission pada Table   

Bab 7 – Menggunakan Push Notification

Menggunakan Azure BLOB Storage untuk menyimpan file

Saya sering menjumpai pertanyaan bagamana cara menyimpan image/file di Azure Website. Pada artikel ini saya ingin mencoba untuk menjawab pertanyaan tersebut, saya akan membuat sebuah aplikasi ASP.NET MVC yang mempunyai fasilitas untuk upload image. Aplikasi tersebut akan saya hosting di Windows Azure Website, dan file image akan disimpan pada Azure Storage.

1. Langkah pertama yang harus dilakukan adalah membuat azure storage baru pada windows azure.

image

2. Kemudian catat access keys yang nanti akan kita gunakan untuk menyimpan data ke azure storage.

image

3. Kemudian buat project ASP.NET MVC dengan nama ‘SampleWebBLOB’

4. Pada HomeController tambahkan satu action method baru dengan nama ‘ViewImage()’

   1: public ActionResult ViewImage()

   2: {

   3:     return View();

   4: }

 

5. Kemudian tambahkan view dengan nama ViewImage.cshtml untuk membuat form upload image

   1: <h2>Upload Gambar</h2>

   2:  

   3: <br />

   4: @using(Html.BeginForm("ImageUpload","Home",FormMethod.Post,

   5:     new{enctype="multipart/form-data"}))

   6: {

   7:     <div>Please Select Image to Upload :</div>

   8:     <input type="file" name="image"/><input type="submit" value="Upload Image"/>

   9: }

6. Tambahkan beberapa referensi library yang digunakan untuk upload ke BLOB storage.

image

7. Untuk proses upload file dan menambahkan ke BLOB storage di Windows Azure tambahkan action method baru pada HomeController.

   1: [HttpPost]

   2: public ActionResult ImageUpload()

   3: {

   4:     

   5:     var image = Request.Files["image"];

   6:     if(image==null)

   7:     {

   8:         ViewBag.UploadMessage = "Gagal upload image";

   9:     }

  10:     else

  11:     {

  12:         ViewBag.UploadMessage = string.Format("Berhasil upload {0}  dengan tipe {1} dan ukuran {2}",

  13:             image.FileName, image.ContentType, image.ContentLength);

  14:  

  15:         //bagian upload ke azure storage

  16:  

  17:         //koneksi

  18:         var storageAccount = CloudStorageAccount.Parse(

  19:             ConfigurationManager.ConnectionStrings["StorageConnection"].ConnectionString);

  20:  

  21:         //membuat container

  22:  

  23:         CloudBlobClient blobStorage = storageAccount.CreateCloudBlobClient();

  24:         CloudBlobContainer container = blobStorage.GetContainerReference("itemimage");

  25:         if(container.CreateIfNotExist())

  26:         {

  27:             var permission = container.GetPermissions();

  28:             permission.PublicAccess = BlobContainerPublicAccessType.Container;

  29:             container.SetPermissions(permission);

  30:         }

  31:  

  32:         //save image to the container

  33:         string uniqueBlobName = string.Format("itemimage/image_{0}{1}",

  34:             Guid.NewGuid().ToString(), Path.GetExtension(image.FileName));

  35:         CloudBlockBlob blob = blobStorage.GetBlockBlobReference(uniqueBlobName);

  36:         blob.Properties.ContentType = image.ContentType;

  37:         blob.UploadFromStream(image.InputStream);

  38:  

  39:         ViewBag.MyImage = blob.Uri.ToString();

  40:     }

  41:     

  42:     return View();

  43: }

 

8. Kemudian tambahkan web.config untuk connection string ke BLOB storage di Windows Azure.

image

9. Kemudian publish aplikasi tersebut ke Windows Azure (cara publish aplikasi ASP.NET MVC ke Windows azure dapat dibaca pada artikel saya berikut.)

10. Hasil dari aplikasi ini ketika sudah diupload ke Windows Azure.

image

11. Anda juga dapat melihat file gambar yang berhasil diupload pada container di azure storage.

image

image

Dari artikel diatas dapat disimpulkan bahwa cukup mudah untuk menyimpan file ke azure blob storage. Pada artikel selanjutnya akan dibahas bagaimana membuat web services REST dengan ASP.NET Web API dan kemudian memasangnya di Windows Azure.

Hosting ASP.NET MVC di Windows Azure (Part 2)

Pada artikel sebelumnya kita telah berhasil membuat project ASP.NET MVC kemudian memasang website tersebut pada Windows Azure. Pada artikel kali ini kita akan menggunakan Entity Framework Code First untuk membuat database di SQL Azure dan kemudian mengakses database tersebut dari Windows Azure.

1. Buka project ActualTraining yang sebelumnya sudah kita buat.

2. Kemudian kita akan menambahkan data baru yang akan ditampilkan. Sebagai contoh kita akan membuat database dengan ‘Course’ untuk menyimpan data mahasiswa.

3. Tambahkan class baru pada table model dengan nama ‘Course’.

public class Course { public int CourseID { get; set; } public string Title { get; set; } public string Description { get; set; } public decimal Prices { get; set; } }

4. Buat Controller baru dengan nama CourseController.

image

image

5. Tambahkan detail berikut pada controller yang anda buat. Jangan lupa untuk memilih model Course yang sudah anda buat sebelumnya, kemudian tambahkan juga class DataContext baru.

image

6. Kemudian pada file ActualTrainingContext tambahkan kode berikut untuk menambahkan data contoh.

public class ActualTrainingContextInitialize : DropCreateDatabaseIfModelChanges<ActualTrainingContext> { protected override void Seed(ActualTrainingContext context) { context.Courses.Add(new Course { Title = "C# Fundamental", Description = "Course ini berisi materi dasar pemrograman C#", Prices = 100000 }); context.Courses.Add(new Course { Title = "ASP.NET MVC", Description = "Course ini berisi materi tentang pemrograman Web berbasis ASP.NET MVC", Prices = 150000 }); } }

7. Tambahkan juga kode berikut pada file global.asax untuk membuat database ketika aplikasi pertama kali dijalankan.

protected void Application_Start() { ………………………………………… Database.SetInitializer<ActualTrainingContext>( new ActualTrainingContextInitializer()); }

8. Jalankan aplikasi anda, maka database akan dibuat secara otomatis.

image

9. Jika anda lihat pada solution explorer di aplikasi anda maka dapat dilihat bahwa ada database yang secara otomatis dibuat yaitu ActualTrainingContext-20140308233949.mdf

image

Membuat Database pada Windows Azure

1. Buka Windows Azure Management untuk membuat database baru.

2. Pilih SQL Database – NEW, untuk membuat database baru.

3. Masukan nama database, pilih new sql database server, dan masukan username dan password untuk mengakses database server tersebut.

image

4. Setelah database selesai dibuat maka hasilnya dapat dilihat pada gambar dibawah sebagai berikut.

image

5. Langkah selanjutnya adalah kita akan mengcopy connection string untuk melakukan koneksi dengan database yang sudah kita buat di windows azure.

image

6. Pada menu dashboard di database pilih ‘Show connection string’. Kemudian copy conn

image

7. Kemudian tambahkan konfigurasi connection string tersebut ke file web.config pada aplikasi anda.

image

8. Kemudian publish kembali aplikasi yang sudah anda buat ke Windows Azure (langkah untuk publish aplikasi ASP.NET MVC ke Windows Azure dapat dilihat pada artikel sebelumnya).

9. Setelah aplikasi anda berhasil dipublish di Windows Azure, coba untuk akses url http://<url_app_anda>/Course untuk menampilkan daftar Course.

image

Pada contoh diatas terlihat bahwa sangat mudah untuk membuat database (SQL Azure) di Windows Azure untuk dapat digunakan di aplikasi ASP.NET MVC anda. Selamat mencoba dan Happy Coding !!

 

 

 

Hosting ASP.NET MVC di Windows Azure (Part 1)

Pada artikel sebelumnya saya sudah menginformasikan bahwa kita dapat mendapatkan FREE hosting untuk 10 aplikasi Web Site di Windows Azure. Pada artikel kali ini saya akan membahas bagaimana cara membuat aplikasi ASP.NET MVC dan kemudian memasang aplikasi tersebut di Windows Azure.

Pertama buka Visual Studio 2013 Express for Web, jika anda belum punya, anda dapat mengunduh aplikasinya pada tautan berikut atau melalui Web Platform Installer.

image

Setelah instalasi selesai anda dapat menjalankan VS Express 2013 for Web. Berikut tampilan awal VS Express 2013.

image

Membuat Project ASP.NET MVC

1. Pilih File – New Project – Visual C# – Web – Visual Studio 2012 – ASP.NET MVC 4 – beri nama projectnya ActualTraining.

image

2. Pilih Internet Application, dan check pada pilihan ‘Create a unit test project’.

image

3. Pada solution explorer anda dapat melihat banyak file yang sudah secara otomatis di generate oleh Visual Studio ketika kita memilih template Internet Application.

4. Tekan F5 untuk mencoba menjalankan project yang sudah anda buat.

5. Anda dapat melakukan modifikasi template yang digunakan dengan cara merubah file _layout.cshtml yang ada pada folder View.

image

6. Hasil akhir setelah melakukan sedikit modifikasi pada layout adalah sebagai berikut.

image

Membuat Web Site Instance di Windows Azure

1. Login ke windows azure.

2. Klik pada Web Sites – NEW – Quick Create – beri nama sesuai keinginan anda. Nama ini akan digunakan sebagai nama domain dari aplikasi anda <nama>.azurewebsites.net. (pada contoh ini saya menggunakan nama Actual).

3. Pilih East Asia sebagai lokasi region. Ini adalah yang data center terdekat dengan lokasi pengguna aplikasi anda.

image

4. Kemudian pilih Create Website.

5. Tunggu sebentar karena Windows Azure akan membuatkan instance website baru untuk anda.

image

6. Setelah proses selesai maka anda dapat melihat nama domain dari aplikasi anda yaitu actual.azurewebsites.net.

7. Pilih website instance yang sudah kita buat yaitu Actual.

image

8. Kemudian pilih Dashboard. Pada menu pilih Download Publish Profile.

image

9. Simpan file setting hasil download ke komputer anda. (pada contoh ini saya mendapatkan file dengan nama Actual.azurewebsites.net.PublishSettings). file ini akan kita gunakan di Visual Studio untuk autentikasi ketika akan mengupload aplikasi yang kita buat ke Windows Azure.

10. Anda juga dapat melihat bahwa paket Web Site yang anda pilih adalah FREE pada menu SCALE.

image

Upload Project di Visual Studio ke Windows Azure

1. Buka project ActualTraining yang sebelumnya sudah anda buat.

2. Klik kanan pada Project, kemudian pilih Publish.

image

3. Kemudian pilih tombol Import.

image

4. Pilih publish profile yang telah anda download sebelumnya.

image

image

5. Kemudian tekan tombol Publish.

6. Setelah project web anda selesai dipublish ke windows azure, maka akan ditampilkan pada browser sebagai berikut. (url sesuai dengan nama domain yang kita pilih sebelumnya)

image

Jadi dengan langkah yang cukup sederhana dan cepat anda dapat membuat website, memilih nama domain dan publish aplikasi tersebut di Windows Azure.

Pada artikel selanjutnya akan dibahas bagaimana mengintegrasikan SQL Azure dan ASP.NET MVC, tetap ikuti blog series tentang Windows Azure ini.