In my home page, I have a search bar with a button at the top of my page and I displayed all my songs using their title from my database underneath that.
The search bar is working fine since every song title I typed, it took me to the correct detail page.
I'm just wondering how can I also click on the song title and take me to each song detail page.
Home page
<?php
require_once '../config.php';
$sql = 'SELECT title FROM song ORDER BY title ASC;';
$stmt = $conn->prepare($sql);
$stmt->execute(['title' => $title]);
// fetch all rows
$songTitle = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>
//Search bar
<form action="chord/details.php" method="post" class="p-3">
<div class="input-group">
<input type="text" name="search" id="search" class="form-control form-control-lg rounded-0 border-primary width =250px;" placeholder="Search..." autocomplete="off" required>
<div class="input-group-append">
<input type="submit" name="submit" value="Search" class="btn btn-primary rounded-right">
</div>
</div>
</form>
// Here I display all my songs from the database using their title
<?php
foreach ($songTitle as $song) {
// I'm not sure how to modify here.
echo "<a href='chord/details.php'>{$song['title']} <br> </a>";
} ?>
Details page
//This is working fine with Search Bar
<?php
require_once '../config.php';
if (isset($_POST['submit'])) {
$title = $_POST['search'];
$sql = 'SELECT * FROM song WHERE title = :title';
$stmt = $conn->prepare($sql);
$stmt->execute(['title' => $title]);
$row = $stmt->fetch();
} else {
header('location: .');
exit();
}
?>
//Display the song lyrics here
<div>Original Key: <?= ucfirst($row['chord']) ?></div><br>
<pre data-key=<?= ucfirst($row['chord']) ?> id="pre">
<?= ucfirst($row['lyrics']) ?>
</pre>