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

Advertisements

About Erick Kurniawan

IT Trainer, Consultant, & Microsoft Azure MVP Actual Training (http://actual-training.com)
This entry was posted in Azure App Services, Azure Mobile Services, Cloud & Mobile, Microsoft Azure, PHP & Azure and tagged , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s