hinata4zzahra/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>



	<!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>