Workshop Office 365 for Education

Pada tanggal 10 Maret 2015 telah diadakan workshop yang membahas penggunaan Office 365 untuk kebutuhan edukasi. Workshop ini merupakan kerja sama antara MIC, MS Edu, dan P4TK. Workshop ini dilangsungkan di gedung P4TK Matematika Yogyakarta, peserta pada workshop ini adalah guru-guru pengajar matemarika dari berbagai kota di indonesia. Pada workshop kali ini saya berkesempatan untuk membawakan beberapa topik yaitu:

  • Office 365 for Education, Microsoft Cloud Platform, & One Drive
  • 21 Century Learning Design
  • Digital Literacy
  • Teaching with Technology

    WP_20150310_08_45_32_Pro

    WP_20150310_17_44_03_Pro
    WP_20150310_08_45_08_Pro

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