<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment