ejlp12/SamplePage.php

## dbinfo.inc
<?php

// Ubah data ini sesuai dengan parameter database
define('DB_SERVER', 'db_instance_endpoint');
define('DB_USERNAME', 'admin');
define('DB_PASSWORD', 'masterpassword');
define('DB_DATABASE', 'sample');

?>

## index.html
<!DOCTYPE html>
<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <style>
h1 {
  font-family: 'Roboto', sans-serif;
}

.center {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.text {
  margin-top: 30px;
  font-family: 'Roboto', sans-serif;
}

.basic_button {
  font-family: 'Roboto', sans-serif;
  font-size: large;
  margin-top: 30px;
  width: 300px;
  height: 45px;
  border-radius: 4px;
  background-color: #44AAB5
}
    </style>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script type="text/javascript">
$(document).ready(function() {
  $("#weather_button").click(function(e) {
    console.log(e)
    e.preventDefault();
    $.ajax({
      type: "POST",
      data: 'json',
      url: 'https://api.openweathermap.org/data/2.5/weather?q=Makassar,id&appid=539756b83366c299af98e440614ce980&units=metric',
      success: function(result) {
        console.log(result)
        $( ".city-name" ).text("City: " + result.name);
        $(".weather-temp").text("Temp: " + (result.main && result.main.temp));
        $(".weather-humidity").text("Temp: " + (result.main && result.main.humidity))
        $(".description").text("Description: " + (result.weather && result.weather[0] && result.weather[0].description))
      },
      error: function(result) {
        console.log('error', result)
        $(".error").text(result.error)
      }
    });
  });
})
    </script>
  </head>
  <body>
    <div class='center'>
      <h1>
        Hello World!
      </h1>
      <button id='weather_button' class='basic_button'>
        Get my Weather
      </button>
      <div class='error'>
      </div>

      <div class='weather'>
          <div class='city-name text'>
          </div>
          <div class='weather-temp text'>
          </div>
          <div class='weather-humidity text'>
          </div>
          <div class='description text'>
          </div>
      </div>
    </div>
  </body>
</html>

## SamplePage.php

<?php include "dbinfo.inc"; ?>
<html>
<body>
<h1>Sample page</h1>
<?php

  /* Connect to MySQL and select the database. */
  $connection = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD);

  if (mysqli_connect_errno()) echo "Failed to connect to MySQL: " . mysqli_connect_error();

  $database = mysqli_select_db($connection, DB_DATABASE);

  /* Ensure that the EMPLOYEES table exists. */
  VerifyEmployeesTable($connection, DB_DATABASE);

  /* If input fields are populated, add a row to the EMPLOYEES table. */
  $employee_name = htmlentities($_POST['NAME']);
  $employee_address = htmlentities($_POST['ADDRESS']);

  if (strlen($employee_name) || strlen($employee_address)) {
    AddEmployee($connection, $employee_name, $employee_address);
  }
?>

<!-- Input form -->
<form action="<?PHP echo $_SERVER['SCRIPT_NAME'] ?>" method="POST">
  <table border="0">
    <tr>
      <td>NAME</td>
      <td>ADDRESS</td>
    </tr>
    <tr>
      <td>
        <input type="text" name="NAME" maxlength="45" size="30" />
      </td>
      <td>
        <input type="text" name="ADDRESS" maxlength="90" size="60" />
      </td>
      <td>
        <input type="submit" value="Add Data" />
      </td>
    </tr>
  </table>
</form>

<!-- Display table data. -->
<table border="1" cellpadding="2" cellspacing="2">
  <tr>
    <td>ID</td>
    <td>NAME</td>
    <td>ADDRESS</td>
  </tr>

<?php

$result = mysqli_query($connection, "SELECT * FROM EMPLOYEES");

while($query_data = mysqli_fetch_row($result)) {
  echo "<tr>";
  echo "<td>",$query_data[0], "</td>",
       "<td>",$query_data[1], "</td>",
       "<td>",$query_data[2], "</td>";
  echo "</tr>";
}
?>

</table>

<!-- Clean up. -->
<?php

  mysqli_free_result($result);
  mysqli_close($connection);

?>

</body>
</html>


<?php

/* Add an employee to the table. */
function AddEmployee($connection, $name, $address) {
   $n = mysqli_real_escape_string($connection, $name);
   $a = mysqli_real_escape_string($connection, $address);

   $query = "INSERT INTO EMPLOYEES (NAME, ADDRESS) VALUES ('$n', '$a');";

   if(!mysqli_query($connection, $query)) echo("<p>Error adding employee data.</p>");
}

/* Check whether the table exists and, if not, create it. */
function VerifyEmployeesTable($connection, $dbName) {
  if(!TableExists("EMPLOYEES", $connection, $dbName))
  {
     $query = "CREATE TABLE EMPLOYEES (
         ID int(11) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
         NAME VARCHAR(45),
         ADDRESS VARCHAR(90)
       )";

     if(!mysqli_query($connection, $query)) echo("<p>Error creating table.</p>");
  }
}

/* Check for the existence of a table. */
function TableExists($tableName, $connection, $dbName) {
  $t = mysqli_real_escape_string($connection, $tableName);
  $d = mysqli_real_escape_string($connection, $dbName);

  $checktable = mysqli_query($connection,
      "SELECT TABLE_NAME FROM information_schema.TABLES WHERE TABLE_NAME = '$t' AND TABLE_SCHEMA = '$d'");

  if(mysqli_num_rows($checktable) > 0) return true;

  return false;
}
?>
	<?php

	// Ubah data ini sesuai dengan parameter database
	define('DB_SERVER', 'db_instance_endpoint');
	define('DB_USERNAME', 'admin');
	define('DB_PASSWORD', 'masterpassword');
	define('DB_DATABASE', 'sample');

	?>
	<!DOCTYPE html>
	<html>
	<head>
	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
	<style>
	h1 {
	font-family: 'Roboto', sans-serif;
	}

	.center {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	}

	.text {
	margin-top: 30px;
	font-family: 'Roboto', sans-serif;
	}

	.basic_button {
	font-family: 'Roboto', sans-serif;
	font-size: large;
	margin-top: 30px;
	width: 300px;
	height: 45px;
	border-radius: 4px;
	background-color: #44AAB5
	}
	</style>
	<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
	<script type="text/javascript">
	$(document).ready(function() {
	$("#weather_button").click(function(e) {
	console.log(e)
	e.preventDefault();
	$.ajax({
	type: "POST",
	data: 'json',
	url: 'https://api.openweathermap.org/data/2.5/weather?q=Makassar,id&appid=539756b83366c299af98e440614ce980&units=metric',
	success: function(result) {
	console.log(result)
	$( ".city-name" ).text("City: " + result.name);
	$(".weather-temp").text("Temp: " + (result.main && result.main.temp));
	$(".weather-humidity").text("Temp: " + (result.main && result.main.humidity))
	$(".description").text("Description: " + (result.weather && result.weather[0] && result.weather[0].description))
	},
	error: function(result) {
	console.log('error', result)
	$(".error").text(result.error)
	}
	});
	});
	})
	</script>
	</head>
	<body>
	<div class='center'>
	<h1>
	Hello World!
	</h1>
	<button id='weather_button' class='basic_button'>
	Get my Weather
	</button>
	<div class='error'>
	</div>

	<div class='weather'>
	<div class='city-name text'>
	</div>
	<div class='weather-temp text'>
	</div>
	<div class='weather-humidity text'>
	</div>
	<div class='description text'>
	</div>
	</div>
	</div>
	</body>
	</html>

	<?php include "dbinfo.inc"; ?>
	<html>
	<body>
	<h1>Sample page</h1>
	<?php

	/* Connect to MySQL and select the database. */
	$connection = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD);

	if (mysqli_connect_errno()) echo "Failed to connect to MySQL: " . mysqli_connect_error();

	$database = mysqli_select_db($connection, DB_DATABASE);

	/* Ensure that the EMPLOYEES table exists. */
	VerifyEmployeesTable($connection, DB_DATABASE);

	/* If input fields are populated, add a row to the EMPLOYEES table. */
	$employee_name = htmlentities($_POST['NAME']);
	$employee_address = htmlentities($_POST['ADDRESS']);

	if (strlen($employee_name) \|\| strlen($employee_address)) {
	AddEmployee($connection, $employee_name, $employee_address);
	}
	?>

	<!-- Input form -->
	<form action="<?PHP echo $_SERVER['SCRIPT_NAME'] ?>" method="POST">
	<table border="0">
	<tr>
	<td>NAME</td>
	<td>ADDRESS</td>
	</tr>
	<tr>
	<td>
	<input type="text" name="NAME" maxlength="45" size="30" />
	</td>
	<td>
	<input type="text" name="ADDRESS" maxlength="90" size="60" />
	</td>
	<td>
	<input type="submit" value="Add Data" />
	</td>
	</tr>
	</table>
	</form>

	<!-- Display table data. -->
	<table border="1" cellpadding="2" cellspacing="2">
	<tr>
	<td>ID</td>
	<td>NAME</td>
	<td>ADDRESS</td>
	</tr>

	<?php

	$result = mysqli_query($connection, "SELECT * FROM EMPLOYEES");

	while($query_data = mysqli_fetch_row($result)) {
	echo "<tr>";
	echo "<td>",$query_data[0], "</td>",
	"<td>",$query_data[1], "</td>",
	"<td>",$query_data[2], "</td>";
	echo "</tr>";
	}
	?>

	</table>

	<!-- Clean up. -->
	<?php

	mysqli_free_result($result);
	mysqli_close($connection);

	?>

	</body>
	</html>


	<?php

	/* Add an employee to the table. */
	function AddEmployee($connection, $name, $address) {
	$n = mysqli_real_escape_string($connection, $name);
	$a = mysqli_real_escape_string($connection, $address);

	$query = "INSERT INTO EMPLOYEES (NAME, ADDRESS) VALUES ('$n', '$a');";

	if(!mysqli_query($connection, $query)) echo("<p>Error adding employee data.</p>");
	}

	/* Check whether the table exists and, if not, create it. */
	function VerifyEmployeesTable($connection, $dbName) {
	if(!TableExists("EMPLOYEES", $connection, $dbName))
	{
	$query = "CREATE TABLE EMPLOYEES (
	ID int(11) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
	NAME VARCHAR(45),
	ADDRESS VARCHAR(90)
	)";

	if(!mysqli_query($connection, $query)) echo("<p>Error creating table.</p>");
	}
	}

	/* Check for the existence of a table. */
	function TableExists($tableName, $connection, $dbName) {
	$t = mysqli_real_escape_string($connection, $tableName);
	$d = mysqli_real_escape_string($connection, $dbName);

	$checktable = mysqli_query($connection,
	"SELECT TABLE_NAME FROM information_schema.TABLES WHERE TABLE_NAME = '$t' AND TABLE_SCHEMA = '$d'");

	if(mysqli_num_rows($checktable) > 0) return true;

	return false;
	}
	?>