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
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”
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
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
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.
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
