Membuat WebApp dengan Microsoft Azure dan Github

Microsoft Azure adalah cloud service platform dari microsoft yang dapat digunakan untuk berbagai hal dalam bidang cloud computing seperti database, mobile backend, web apps, virtual machines, dan lain-lain.

Pada artikel kali ini kita akan membuat web app dan di-host ke azure. Ada dua cara untuk deploy web app ke azure, yaitu FTP dan Git. Artikel kali ini akan menunjukan bagaimana men-deploy-kan nya menggunakan Git.

Terlebih dahulu kita perlu membuat akun Github untuk menggunakan layanan Git dengan mengunjungi github.com. Klik sign up, isi data pada form yang tersedia lalu klik Create an account.

Pada langkah ini, pilih yang Free, lalu klik Finish sign up

Buka inbox email yang telah didaftarkan akun github, lalu verifikasi email tersebut

Langkah selanjutnya kita perlu menginstall Git Terminal pada laptop kita dengan mengunjungi link berikut git-scm.com lalu klik download.

Kembali ke web github tadi, buat repository baru dengan klik tombol New Repository. Kemudian masukkan nama repository yang kita inginkan, misalnya AzureWebApp lalu klik Create repository.

Selanjutnya kita akan menyimpan kode program yang kita buat ke github menggunakan git terminal. Buka git terminal(git bash) lalu ikuti langkah-langkah berikut ini:

Buat file index.php dengan isi sebagai berikut, lalu simpan pada folder anda

<?php 
   echo "Hello, Azure!";
?>

Buka lokasi code program disimpan pada CMD(misal disini saya simpan pada folder WebSaya), lalu ketik 

git config --global user.name “nickname”
git config --global user.email “email”

*nickname = username github anda

*email = email github anda

Selanjutnya lakukan inisialisasi pada repository

git init

Hubungkan dengan repository yang telah anda buat

git remote add origin https://github.com/azhary/AzureWebApp.git
git remote –v

*url repository bisa dilihat pada repository yang telah anda buat

Tambah semua file didalam folder dengan command

git add .

Commit dengan –m (message)

git commit –m “initial commit”

Selanjutnya push ke github

git push origin master

Setelah itu anda akan diminta untuk memasukkan username dan password.


Command Git 

git config
konfigurasi user pada saat pertama kali

git init
inisialisasi pertama kali pada folder project yang akan disimpan di github

git help
menampilkan command pada git

git status
menampilkan file yang telah diubah

git add
menambahkan file ke repository pada github

git commit
memberi tanda pada pada perubahan file

git branch
mengembangkan project pada masing-masing repository

git merge
menggabungkan semua project pada setiap contributor

git push
mengupdate perubahan code ke github

git pull
mengupdate code repositori local



Langkah selanjutnya kita akan membuat WebApp pada azure.

1. Terlebih dahulu login akun azure anda pada http://portal.azure.com/
2. Klik New, pilih Web + Mobile, masukkan nama Web App anda lalu klik Create

3. Tunggu hingga proses selesai
4. Setelah selesai, anda dapat membuka web anda dengan mengunjungi alamat namawebanda.azurewebsites.net

5. Kemudian kita akan menghubungkan Azure Web App dengan Github, caranya pada menu Web App pilih Setting -> Continuous Deployment -> Choose Source -> Github
6. Klik Authorization untuk menghubungkan ke akun Github anda
7. Setelah dihubungkan ke akun github, klik Choose Project lalu pilih repository anda, kemudian klik OK.

8. Setelah integrasi dengan akun github berhasil, lihat web anda

Setiap kita melakukan push otomatis Azure akan mengupdate project web kita.


Selanjutnya kita akan menghubungkan database MySQL dengan Azure.

1. Buka portal azure, lalu klik New -> Data + Storage -> MySQL Database. Isi nama database. Pada bagian Legal Terms klik OK untuk memberikan authorize pada Legal Terms. Kemudian klik Create
2. Setelah deployment database selesai, pada settings lalu lihat properties yang ada pada database tersebut.

Kita akan membutuhkan informasi mengenai HOSTNAME, DATABASE NAME, USERNAME, dan PASSWORD.

3. Kemudian kita akan membuat tabel pada database kita, buka http://www.phpmyadmin.co/ lalu login menggunakan hostname, username, dan password yang telah kita dapatkan tadi

4. Pada bagian kiri, klik pada database yang kita buat tadi. Lalu pilih SQL, kemudian ketik query berikut ini lalu klik Go

CREATE TABLE registration_tbl(id INT NOT NULL AUTO_INCREMENT, 

PRIMARY KEY(id), name VARCHAR(30), email VARCHAR(30), date DATE);

5. Pada folder kita, buat file baru dengan nama connect.php dengan isi sebagai berikut

<?php 
define("HOSTNAME", "hostname_database_anda");
define("USERNAME", "username_database_anda");
define("PASSWORD", "password_database_anda");
define("DBNAME", "nama_database_anda"); /* misalnya nama database saya db_azurems */

$conn = mysql_connect(HOSTNAME, USERNAME, PASSWORD)
  or die ("Error saat menghubungkan ke host database");
$db = mysql_select_db(DBNAME)
  or die ("Error saat menghubungkan ke database");
?>

6. Lalu ubah file index.php dengan isi sebagai berikut

<!DOCTYPE html>
<html>
<head>
 <title>Web App Sederhana</title>
</head>
<body>
 <form action="hello.php" method="POST">
  <div>
   <label for="nama">Nama</label>
   <input type="text" id="nama" name="nama"/>
  </div>
  <div>
   <label for="email">Email</label>
   <input type="email" id="email" name="email"/>
  </div>
  <div>
   <input type="submit" id="submit" name="submit"/>
  </div>
 </form>
</body>
</html>

7. Buat file baru dengan nama hello.php dengan isi sebagai berikut
<!DOCTYPE html>

<html>
<head>
    <title>Web App Sederhana</title>
</head>
<body>
    <?php
        include("connect.php");
        if (!empty($_POST)) {
            $nama = $_POST['nama'];
            $email = $_POST['email'];
            $date = date("Y-m-d");
            echo '<h1>Halo, ' . $nama . '!</h1>';
            echo 'Email : ' . $email;
            // Insert data
            $sql_insert = "INSERT INTO registration_tbl (name, email, date) VALUES ('$nama', '$email', '$date')";
            mysql_query($sql_insert) or die (mysql_error());
        }
        // Retrieve data
        $sql_select = "SELECT * FROM registration_tbl";
        $result = mysql_query($sql_select) or die (mysql_error());
        echo "<br><br>";
        echo "Data yang telah masuk :";
        echo "<br><br>";
        echo "<table border='1'>";
        echo "<tr><th>Nama</th>";
        echo "<th>Email</th>";
        echo "<th>Tanggal</th></tr>";
       
        while ($row = mysql_fetch_array($result)) {
            echo "<tr><td>".$row['name']."</td>";
            echo "<td>".$row['email']."</td>";
            echo "<td>".$row['date']."</td></tr>";
        }
        echo "</table>";
    ?>
</body>
</html>

8. Push lagi file-file tersebut lalu lihat perubahan yang terjadi pada web kita