Untitled

<?php
$db_host = 'localhost'; // Server Name
$db_user = 'root'; // Username
$db_pass = ''; // Password
$db_name = 'songs'; // Database Name

$conn = mysqli_connect($db_host, $db_user, $db_pass, $db_name);
if (!$conn) {
	die ('Failed to connect to MySQL: ' . mysqli_connect_error());
}

if (isset($_POST['keyword'])) {
	// Filter
	$keyword = trim ($_POST['keyword']);

	// Select statement
	$sql = "SELECT * FROM songs WHERE name LIKE '%$keyword%'";
} else {
	$sql = 'SELECT *
			FROM songs';
}

$query = mysqli_query($conn, $sql);

if (!$query) {
	die ('SQL Error: ' . mysqli_error($conn));
}
?>
<html>
<head>
	<title>Listening History</title>
	<style type="text/css">
		body {
			font-size: 15px;
			color: #343d44;
			font-family: "segoe-ui", "open-sans", tahoma, arial;
			padding: 0;
			margin: 0;
		}

		/* Search */
		input[type=button], input[type=submit], input[type=reset] {
			background-color: #508abb;
			font-family: "Lucida Sans Unicode", "Lucida Grande", "Segoe Ui";
			font-size: 16px;
			border: none;
			color: white;
			padding: 10px 22px;
			text-decoration: none;
			margin: 4px 2px;
			cursor: pointer;
		}

		input[type=text] {
			background-color: #508abb;
			color: white;
			font-family: "Lucida Sans Unicode", "Lucida Grande", "Segoe Ui";
			font-size: 16px;
			background-position: 10px 10px;
			background-repeat: no-repeat;
		}

		table {
			margin: auto;
			font-family: "Lucida Sans Unicode", "Lucida Grande", "Segoe Ui";
			font-size: 12px;
		}

		h1 {
			margin: 25px auto 0;
			text-align: center;
			text-transform: uppercase;
			font-size: 17px;
		}

		table td {
			transition: all .5s;
		}

		/* Table */
		.data-table {
			border-collapse: collapse;
			font-size: 14px;
			min-width: 537px;
		}

		.data-table th,
		.data-table td {
			border: 1px solid #e1edff;
			padding: 7px 17px;
		}
		.data-table caption {
			margin: 7px;
		}

		/* Table Header */
		.data-table thead th {
			background-color: #508abb;
			color: #FFFFFF;
			border-color: #6ea1cc !important;
			text-transform: uppercase;
		}

		/* Table Body */
		.data-table tbody td {
			color: #353535;
		}
		.data-table tbody td:first-child,
		.data-table tbody td:nth-child(4),
		.data-table tbody td:last-child {
			text-align: right;
		}

		.data-table tbody tr:nth-child(odd) td {
			background-color: #f4fbff;
		}
		.data-table tbody tr:hover td {
			background-color: #ffffa2;
			border-color: #ffff0f;
		}

		/* Table Footer */
		.data-table tfoot th {
			background-color: #e5f5ff;
			text-align: right;
		}
		.data-table tfoot th:first-child {
			text-align: left;
		}
		.data-table tbody td:empty
		{
			background-color: #ffcccc;
		}
	</style>
</head>
<body>
	<h1>Songs</h1>
	<table class="data-table">
		<caption class="title">Song Listening History</caption>
		<thead>
			<center>
			<form action="<?php echo $_SERVER['PHP_SELF']?>" method="post">
			<input type="text" name="keyword">
			<input type="submit" name="search" value="Search">
			</center>
			<tr>
				<th>ID</th>
				<th>NAME</th>
				<th>ARTIST</th>
				<th>ALBUM</th>
				<th>DURATION</th>
			</tr>
		</thead>
		<tbody>
		<?php
		$id 	= 1;
		$total 	= 0;
		while ($row = mysqli_fetch_array($query))
		{
			$duration  = $row['duration'] == 0 ? '' : number_format($row['duration']);
			echo '<tr>
					<td>'.$id.'</td>
					<td>'.$row['name'].'</td>
					<td>'.$row['artist'].'</td>
					<td>'.$row['album'].'</td>
					<td>'.$row['duration'].'</td>
				</tr>';
			$id++;
		}
		?>
		</tbody>
	</table>
</body>
</html>