Bekraf Developer Day 2017–Palembang, Sumsel

Pada tanggal 9 – 10 July 2017 telah dilaksanakan acara Bekraf Developer Day 2017 di Hotel Novotel Palembang, Sumatera Selatan.  

Acara ini diselenggarakan atas kerjasama Badan Ekonomi Kreatif (BEKRAF) dan Dicoding dengan dukungan Asosiasi Game Indonesia, Codepolitan, Dicoding Elite,  Google, Google Developer Expert, IBM Indonesia, Intel Innovator, Komunitas ID-Android, Microsoft Indonesia, Samsung Developer Warrior, Samsung Indonesia, dan perusahaan-perusahaan teknologi di Indonesia.

Tema acara ini adalah: Membangun Kemandirian Bangsa Melalui Teknologi Digital

Pada acara ini peserta akan mendapatkan update teknis dari para praktisi yang telah sukses dalam pengembangan aplikasi, web, game, dan Internet of Things yang dikemas dalam sesi inspirasi, workshop/Masterclass, live coding, dan talkshow.

Situs resmi untuk pendaftaran acara ini dapat diakses pada laman berikut: https://www.dicoding.com/events/706

Pada acara ini saya diberi kesempatan untuk berbagi ilmu dengan rekan-rekan developer dari seluruh Indonesia untuk membawakan materi Master Class Workshop dengan judul Membangun Aplikasi Multiplatform dengan Xamarin.

Berikut ini adalah beberapa dokumentasi dari acara tersebut:

WhatsApp Image 2017-07-13 at 14.08.47(1)WhatsApp Image 2017-07-13 at 14.08.47WhatsApp Image 2017-07-13 at 14.09.52WhatsApp Image 2017-07-13 at 14.09.54

Global Azure Bootcamp 2017–Yogyakarta

Pada tanggal 22 April 2017, telah diselenggarakan acara Global Azure Bootcamp 2017 – Yogyakarta, yang bertempat di Jogja Digital Valley (JDV).

Acara ini mempunyai tema Cloud for Yogyakarta. Pada acara ini juga dibahas bagaimana cara pengembangan aplikasi mobile menggunakan Xamarin Platform dengan Azure Backend.

Adapun pembicara pada acara ini adalah:

  1. Ridi Ferdiana – Microsoft MVP Visual Studio
  2. Erick Kurniawan – Microsoft MVP Windows Azure

WP_20170422_08_50_22_Pro

WP_20170422_08_59_46_Pro

WP_20170422_09_09_32_Pro

Eventbrite link: https://www.eventbrite.com/e/azure-as-digital-transformation-platform-to-preserve-tourism-and-culture-tickets-33298949053

FREE EBook–Pengenalan Azure Web Apps

12527819_10153838977016182_2146359183_n

FREE E-Book ini berisi penjelasan dan tutorial singkat tentang penggunaan layanan komputasi awan menggunakan platform Microsoft Azure terutama Azure Web Apps dan Mobile Services. Diharapkan setelah membaca e-book ini pembaca dapat lebih memahami apa itu platform Microsoft Azure, serta dapat membuat aplikasi berbasis web yang dipasang pada layanan Microsoft Azure Web Apps.

Buku ini memiliki tebal 72 halaman dengan daftar isi sebagai berikut :

  • BAB 1 Pengenalan Azure Website / Azure App Services. 1
    • Azure Website / Azure Web App. 2
    • Azure Mobile Services. 2
  • Bab 2 – Medaftar Akun Azure dan Memasang Web CMS pada Layanan Azure Web Apps. 4
    • Bagaimana Memperoleh Akun Microsoft Azure?. 4
    • Memasang Aplikasi CMS Open Source di Azure. 5
    • Langkah 1: Membuat MySQL Database. 5
    • Langkah 2: Memasang WordPress pada layanan Azure Web. 7
  • Bab 3 – PHP & MySQL dengan Layanan Azure Web Apps. 10
    • Membuat Database MySQL di Azure. 10
    • Membuat Aplikasi Web dengan PHP. 14
  • Bab 4 – ASP.NET MVC & Microsoft Azure. 22
    • Membuat Project ASP.NET MVC. 22
    • Membuat Web Site Instance di Windows Azure. 24
    • Upload Project di Visual Studio ke Microsoft Azure. 26
    • Menggunakan SQL Azure dan ASP.NET MVC. 29
    • Membuat Database pada Windows Azure. 31
    • Autentikasi Aplikasi ASP.NET MVC dengan Azure Active Directory. 34
    • Membuat Azure Active Directory. 34
  • Bab 5 – Windows Azure Mobile Services. 41
    • Memulai Membuat Azure Mobile Services. 41
    • Windows Store Client. 45
    • Mengakses REST Services dari Table di Mobile Services. 50
    • Menambahkan Data dan Table Baru pada Azure Mobile Services. 53
    • Menambahkan Script Pada Proses CRUD.. 58
    • Menggunakan Objek Request pada Script. 60
    • Menambahkan Field baru dengan Script. 62
    • Menggunakan Query Object pada SCRIPT. 64
  • Bab 6 -Identity dengan Azure Mobile Services. 66
    • Membuat Twitter Identity Provider. 66
    • Membuat Facebook Identity Provider. 69
    • Menambahkan Restriction Permission pada Table. 70
  • Bab 7 – Menggunakan Push Notification. 72

Anda dapat mendownload e-book ini pada tautan berikut: http://tinyurl.com/bukuazurewebapp

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 Table Storage dengan ASP.NET MVC (Part 2)

Pada bagian 1 kita sudah membahas apa itu Azure Table Storage dan bagaimana cara membuat Storage Account pada layanan Azure. Selanjutnya kita akan membuat ASP.NET MVC Project yang dapat terhubung dengan layanan Storage Account yang sudah kita buat, kemudian menambahkan data pada Storage Account berupa Azure Table dan Azure Blob. Azure Table digunakan untuk menyimpan data standard yang bertipe string/number (selain blob). Azure Blob digunakan untuk menyimpan data blob seperti file image, video, pdf, dan format lain yang biasanya mempunyai ukuran relatif besar.

Membuat Project ASP.NET MVC

Buka Visual Studio 2015 kemudian buat ASP.NET MVC Project baru dengan nama  SampleTableStorage. Kemudian pada folder model tambahkan interface baru dengan nama ITableOperations.cs. Method pada interface ini akan diimplementasikan pada method selanjutnya.

using Microsoft.WindowsAzure.Storage;
using Microsoft.WindowsAzure.Storage.Table;
using System.Collections.Generic;
using System.Configuration;
using System;

namespace SampleTableStorage.Models
{
    public interface ITableOperations
    {
        void CreateEntity(StorageEntity entity);
        List<StorageEntity> GetEntities(string filter);
        StorageEntity GetEntity(string partitionKey,string rowKey);
    } 
}

Masih pada folder Model, tambahkan class StorageEntity.cs. Class ini digunakan untuk mendefinisikan data model yang akan dibuat pada Azure Table. Class ini berisi definisi dari field-field yang akan dibuat pada Azure Table.

using Microsoft.WindowsAzure.Storage.Table;
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;

namespace SampleTableStorage.Models
{
    public class StorageEntity : TableEntity
    {
        public StorageEntity()
        { }

        public StorageEntity(int storageId,string city)
        {
            this.RowKey = storageId.ToString();
            this.PartitionKey = city;
        }

        public string StorageId { get; set; }
        public string Size { get; set; }
        public string Environment { get; set; }
        public decimal PriceDay { get; set; }
        public decimal PriceMonth { get; set; }
        public string Space { get; set; }
        public string Access { get; set; }
        public string Description { get; set; }

        [Required(ErrorMessage = "Title Required !")]
        public string Title { get; set; }
        public string Address { get; set; }
        public string City { get; set; }
        public string State { get; set; }
        public string ZipCode { get; set; }
        public string Picture { get; set; }
        public double Length { get; set; }
        public double Height { get; set; }
        public string Phone { get; set; }

    }
}

Setelah membuat TableEntity, maka langkah selanjutnya adalah menambahkan operasi-operasi yang akan dilakukan di Table Storage seperti membuat dan mengambil data pada Azure Table. Pada folder Model, tambahkan class dengan nama TableOperations.cs.

Untuk bekerja dengan Storage Account yang ada di Azure anda harus menambahkan string koneksi pada project anda. Anda dapat mengambil string koneksi tersebut pada portal Azure.

image

kemudian tambahkan string koneksi tersebut pada file konfirgurasi di web.config

<appSettings>
  <add key="webpages:Version" value="3.0.0.0" />
  <add key="webpages:Enabled" value="false" />
  <add key="ClientValidationEnabled" value="true" />
  <add key="UnobtrusiveJavaScriptEnabled" value="true" />
  <add key="keepStorage" value="DefaultEndpointsProtocol=https;AccountName=keepstorage;AccountKey=<key anda>;BlobEndpoint=https://keepstorage.blob.core.windows.net/;TableEndpoint=https://keepstorage.table.core.windows.net/;QueueEndpoint=https://keepstorage.queue.core.windows.net/;FileEndpoint=https://keepstorage.file.core.windows.net/" />
</appSettings>

Setelah string koneksi ditambahkan, anda dapat menggunakan string koneksi tersebut pada aplikasi anda untuk terhubung dengan Storage Account yang ada pada layanan Azure.

using Microsoft.WindowsAzure.Storage;
using Microsoft.WindowsAzure.Storage.Table;
using System.Collections.Generic;
using System.Configuration;
using System;
using System.Linq;

namespace SampleTableStorage.Models
{
    public class TableOperations : ITableOperations
    {
        CloudStorageAccount storageAccount;
        CloudTableClient tableClient;

        public TableOperations()
        {
            storageAccount = CloudStorageAccount.Parse(ConfigurationManager.AppSettings["keepStorage"].ToString());
            tableClient = storageAccount.CreateCloudTableClient();

            CloudTable table = tableClient.GetTableReference("keepstorage");
            table.CreateIfNotExists();
        }
        public void CreateEntity(StorageEntity entity)
        {
            CloudTable table = tableClient.GetTableReference("keepstorage");
            TableOperation insertOperation = TableOperation.Insert(entity);
            table.Execute(insertOperation);
        }

        public List<StorageEntity> GetEntities(string filter)
        {
            //List<StorageEntity> storages = new List<StorageEntity>();
            CloudTable table = tableClient.GetTableReference("keepstorage");

            List<StorageEntity> query = (from entity in table.CreateQuery<StorageEntity>()
                                               where entity.PartitionKey == "City"
                                               select entity).ToList();

            return query;
        }

        public StorageEntity GetEntity(string partitionKey, string rowKey)
        {
            StorageEntity entity = null;
            CloudTable table = tableClient.GetTableReference("keepstorage");
            entity = (from e in table.CreateQuery<StorageEntity>()
                      where e.PartitionKey == partitionKey && e.RowKey == rowKey
                      select e).FirstOrDefault();

            return entity;
        }
    }
}

Tambahkan juga class dengan nama BlobOperations.cs. Class ini akan digunakan untuk membuat dan menambahkan file blob kedalam objek Azure Blob pada Storage Account.

using System;
using System.Web;

using Microsoft.WindowsAzure.Storage;
using Microsoft.WindowsAzure.Storage.Blob;
using System.Configuration;
using System.Threading.Tasks;
using System.IO;


namespace SampleTableStorage.Models
{
    
    public class BlobOperations
    {
        private static CloudBlobContainer storageBlobContainer;

        public BlobOperations()
        {
            var storageAccount = CloudStorageAccount.Parse(ConfigurationManager.AppSettings["keepStorage"].ToString());
            CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();

            storageBlobContainer = blobClient.GetContainerReference("blobkeepstorage");
            storageBlobContainer.CreateIfNotExists();
        }

        public CloudBlockBlob UploadBlob(HttpPostedFileBase storagePicFile)
        {
            string blobName = Guid.NewGuid().ToString() + Path.GetExtension(storagePicFile.FileName);

            CloudBlockBlob storageBlob = storageBlobContainer.GetBlockBlobReference(blobName);
            using (var fs = storagePicFile.InputStream)
            {
                storageBlob.UploadFromStream(fs);
            }

            return storageBlob;
        }
    }
}

 

Kemudian langkah selanjutnya adalah membuat controller  dengan nama StorageListController.cs. Pada controller ini kita akan menambahkan method yang digunakan untuk menambahkan data ke Azure Table dan Azure Blob.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

using SampleTableStorage.Models;
using System.Threading.Tasks;
using Microsoft.WindowsAzure.Storage.Blob;

namespace SampleTableStorage.Controllers
{
    public class StorageListController : Controller
    {
        BlobOperations blobOperations;
        TableOperations tableOperations;
               
        public StorageListController()
        {
            blobOperations = new BlobOperations();
            tableOperations = new TableOperations();
        }
        // GET: StorageList
        public ActionResult Index()
        {
            var storages = tableOperations.GetEntities("Spokane");
            return View(storages);
        }

        public ActionResult Create()
        {
            var objStorage = new StorageEntity();
            //objStorage.StorageId = Guid.NewGuid().ToString();
            objStorage.City = "Spokane";
            ViewBag.Environment = new SelectList(new List<string>() {
                "Outdoor","Indoor"
            });
            ViewBag.Access = new SelectList(new List<string>()
            {
                "Limited","Anytime"
            });

            return View();
        }

        [HttpPost]
        public ActionResult Create(StorageEntity obj,HttpPostedFileBase Picture)
        {
            //upload file to blob
            CloudBlockBlob storageBlob = null;
            if(Picture != null && Picture.ContentLength !=0)
            {
                storageBlob = blobOperations.UploadBlob(Picture);
                obj.Picture = storageBlob.Uri.ToString();
            }

            obj.City = "Spokane";
            obj.RowKey = Guid.NewGuid().ToString();
            obj.PartitionKey = obj.City;
            tableOperations.CreateEntity(obj);

            return RedirectToAction("Index","Home");
        }

    }
}

Setelah membuat controller maka untuk membuat form input yang akan kita gunakan untuk menambahkan data ke Azure Table anda dapat menambahkan view dengan nama Create.cshtml berikut.

@model SampleTableStorage.Models.StorageEntity

@{
    ViewBag.Title = "Create";
}

@using (Html.BeginForm("Create","StorageList",FormMethod.Post, 
    new { enctype = "multipart/form-data" }))
{
    @Html.AntiForgeryToken()
    
    

Storage Entity


@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.LabelFor(model => model.Size, htmlAttributes: new { @class = "control-label col-md-2" })
@Html.EditorFor(model => model.Size, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Size, "", new { @class = "text-danger" })
</div>
@Html.LabelFor(model => model.Environment, htmlAttributes: new { @class = "control-label col-md-2" })
@Html.DropDownListFor(model=>model.Environment, (IEnumerable)ViewBag.Environment,new { @class = "form-control" }) @Html.ValidationMessageFor(model => model.Environment, "", new { @class = "text-danger" })
</div>
@Html.LabelFor(model => model.PriceDay, htmlAttributes: new { @class = "control-label col-md-2" })
@Html.EditorFor(model => model.PriceDay, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.PriceDay, "", new { @class = "text-danger" })
</div>
@Html.LabelFor(model => model.PriceMonth, htmlAttributes: new { @class = "control-label col-md-2" })
@Html.EditorFor(model => model.PriceMonth, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.PriceMonth, "", new { @class = "text-danger" })
</div>
@Html.LabelFor(model => model.Space, htmlAttributes: new { @class = "control-label col-md-2" })
@Html.EditorFor(model => model.Space, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Space, "", new { @class = "text-danger" })
</div>
@Html.LabelFor(model => model.Access, htmlAttributes: new { @class = "control-label col-md-2" })
@Html.DropDownListFor(model => model.Access, (IEnumerable)ViewBag.Access ,new { @class = "form-control" }) @Html.ValidationMessageFor(model => model.Access, "", new { @class = "text-danger" })
</div>
@Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-2" })
@Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })
</div>
@Html.LabelFor(model => model.Title, htmlAttributes: new { @class = "control-label col-md-2" })
@Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Title, "", new { @class = "text-danger" })
</div>
@Html.LabelFor(model => model.Address, htmlAttributes: new { @class = "control-label col-md-2" })
@Html.EditorFor(model => model.Address, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Address, "", new { @class = "text-danger" })
</div>
@Html.LabelFor(model => model.City, htmlAttributes: new { @class = "control-label col-md-2" })
@Html.EditorFor(model => model.City, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.City, "", new { @class = "text-danger" })
</div>
@Html.LabelFor(model => model.State, htmlAttributes: new { @class = "control-label col-md-2" })
@Html.EditorFor(model => model.State, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.State, "", new { @class = "text-danger" })
</div>
@Html.LabelFor(model => model.ZipCode, htmlAttributes: new { @class = "control-label col-md-2" })
@Html.EditorFor(model => model.ZipCode, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.ZipCode, "", new { @class = "text-danger" })
</div>
@Html.LabelFor(model => model.Picture, htmlAttributes: new { @class = "control-label col-md-2" })
@Html.ValidationMessageFor(model => model.Picture, "", new { @class = "text-danger" })
</div>
@Html.LabelFor(model => model.Length, htmlAttributes: new { @class = "control-label col-md-2" })
@Html.EditorFor(model => model.Length, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Length, "", new { @class = "text-danger" })
</div>
@Html.LabelFor(model => model.Height, htmlAttributes: new { @class = "control-label col-md-2" })
@Html.EditorFor(model => model.Height, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Height, "", new { @class = "text-danger" })
</div>
@Html.LabelFor(model => model.Phone, htmlAttributes: new { @class = "control-label col-md-2" })
@Html.EditorFor(model => model.Phone, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Phone, "", new { @class = "text-danger" })
</div>
</div> </div> }
@Html.ActionLink("Back to List", "Index")

Setelah itu anda dapat mencoba menjalankan aplikasi ini dan memasukan data kedalam Azure Table dan Azure Blob

image

Setelah berhasil anda dapat melihat isi dari Azure Table dan Azure Blob yang sudah anda buat di Visual Studio 2015 Cloud Explorer.

image

image

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