Untitled

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>A10 Family</title>
	<link rel="shortcut icon" href="/a10.ico" type="image/x-icon">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/dt-1.10.16/r-2.2.0/datatables.min.css"/>
	<link href="https://fonts.googleapis.com/css?family=Lemonada|Varela+Round" rel="stylesheet">

	<style type="text/css">
		.wraper {
			max-width: 900px;
			margin: 30px auto;
		}

		#linkfb {
			text-decoration: none;
		}

		.header {
		    font-size: 80px;
			text-align: center;
		    color: #428ccc;
		    transition: all 1.4s ease-in-out;
		    margin: 40px auto;
		}

		.header:hover {
			color: #ff0059;
			transform: rotateX(360deg) scale(1.3);
		}

		body {
			font-family: 'Varela Round', sans-serif;
		}

		#my-table {
		    border:8px double #428ccc;
		    border-collapse: collapse;
		    border-radius: 10px;
		}

		thead tr {
			background-color: #a9cae6;
			font-family: 'Lemonada', cursive;
		}

		tbody tr {
		    transition:font-size 0.5s;
		    background-color: #fff;
		}

		tbody tr:hover {
		    font-size: 1.15em;
			font-weight: 700;
			color: #ff0059;
		}

		#imgcover {
		    max-width: 900px;
		    border-radius: 10px;
		    box-shadow: 5px 5px 10px #428ccc;
		}

	</style>
</head>
<body>


<?php
$servername = "localhost";
$username = "id2858015_a10db";
$password = "a10db";
$database = "id2858015_a10db";

// Create connection
$conn = mysqli_connect($servername, $username, $password, $database);

// Check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}
// echo "Connected successfully";


$sql = "SELECT id, lastname, firstname, gender, birthday, phone, address from classinfo";
$result = mysqli_query($conn, $sql);
if(!$result){
	die( "Can't query data".mysqli_error($conn) );
}

if (mysqli_num_rows($result) > 0) {
	// 1. Tiêu đề bảng
	?>
	<!-- Mã HTML -->
<div class="wraper">
    <img src="https://scontent.fsgn2-2.fna.fbcdn.net/v/t31.0-8/17636894_625120654365431_3172362985629731171_o.jpg?oh=7c3d4246f578331bbfb88a008f1b3583&oe=5AA17326" id="imgcover">
    <a href="https://www.facebook.com/groups/207559346072681/" id="linkfb" data-toggle="tooltip" title="Bấm để vào Facebook Δ10 ҒΔMILΨ !"><h1 class="header">Δ10 ҒΔMILΨ</h1></a>
	<table class="table table-bordered" id="my-table">
		<thead>
			<tr>
				<th>#</th>
				<th>Last Name</th>
				<th>First Name</th>
				<th>Gender</th>
				<th>Birthday</th>
				<th>Address</th>
				<th>Phone</th>
			</tr>
		</thead>
		<tbody>
	<?php
    // 2. Các dòng dữ liệu
    while($row = mysqli_fetch_assoc($result)) {
        // Chuyển ngày sang dạng d-m-Y
    	$dob = date("d-m-Y", strtotime($row["birthday"]));

        echo "<tr>";
        	echo "<td>".$row["id"]."</td>";
        	echo "<td>".$row["lastname"]."</td>";
        	echo "<td>".$row["firstname"]."</td>";
        	echo "<td>".$row["gender"]."</td>";
        	echo "<td>".$row["birthday"]."</td>";
        	echo "<td>".$row["address"]."</td>";
        	echo "<td>".$row["phone"]."</td>";
        echo "</tr>";
    }
    // 3. Kết thúc bảng
    ?>
		<!-- Mã HTML -->
		</tbody>
	</table>
</div>
    <?php
} else {
    echo "0 results";
}

mysqli_close($conn);
?>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs/dt-1.10.16/r-2.2.0/datatables.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
	    // Sử dụng Datatable
		$('#my-table').DataTable({
			responsive: true
		});

		// Tooltip
		$('[data-toggle="tooltip"]').tooltip();
	});

	//Xóa watermark
	 $(document).ready(function(){
            $('body').find('img[src$="https://cloud.githubusercontent.com/assets/23024110/20663010/9968df22-b55e-11e6-941d-edbc894c2b78.png"]').parent().closest('a').closest('div').remove();
    });
</script>
</body>
</html>