5. fetch table

## 5. fetch table


<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
    /* Set height of the grid so .sidenav can be 100% (adjust if needed) */
    .row.content {height: 450px}

    /* Set gray background color and 100% height */
    .sidenav {
      background-color: #f1f1f1;
      height: 250px;
			margin-left: 15px;
			margin-top: 15px;
    }

    /* Set black background color, white text and some padding */
    footer {
      background-color: #007399;
      color: white;
      padding: 15px;
			text-align: center;
    }

		header {
      background-color: #007399;
      color: white;
			text-align: center;
			height: 135px;
			padding-top: 25px;
			font-size: 50px;
    }

    /* On small screens, set height to 'auto' for sidenav and grid */
    @media screen and (max-width: 767px) {
      .sidenav {
        height: inherit;
        padding: 15px;
      }
      .row.content {height: 450px;}
    }
  </style>
</head>
<body>

<div class="container-fluid">
	<header class="container-fluid">
		<p>This is header</p>
	</header>

  <div class="row content">
    <div class="col-sm-3 sidenav">
      <h4>sidebar</h4>
      <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#section1">nav 1</a></li>
        <li><a href="#section2">nav 2</a></li>
        <li><a href="#section3">nav 3</a></li>
        <li><a href="#section3">nav 4</a></li>
      </ul><br>

    </div>

    <div class="col-sm-7">
      <h4><small>this is body</small></h4>
			<table class="table">
    <thead>
      <tr>
        <th>post title</th>
        <th>created by</th>
        <th>coment</th>
      </tr>
    </thead>
    <tbody>

      <?php
      //membuat koneksi ke database
        $host = 'localhost';
        $user = 'root';
        $password = '';
        $database = 'db_blog';

        $conn=new mysqli($host, $user, $password, $database);
        if ($conn->connect_error) {
          die("Connection failed: " . $conn->connect_error);
        }
      // Perintah untuk menampilkan data
      $queri="select post.title, user.username, coment.coment from post, user, coment where
      post.createdby=user.id and post.id_post=coment.postid " ;  //menampikan SEMUA data dari tabel siswa
      $result = $conn->query($queri);

      if ($result->num_rows > 0) {
    // output data of each row
    while($row = $result->fetch_assoc()) {
        echo "<tr><td>". $row["title"]. " </td> " . "<td>".$row["username"]. "</td> " ."<td>"
        . $row["coment"]. "</td></tr>";
    }
} else {
    echo "0 results";
}
$conn->close();
       ?>


    </tbody>
  </table>

    </div>
  </div>
</div>

<footer class="container-fluid">
  <p>Footer Text</p>
</footer>

</body>
</html>