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>
>Solution :
You can use the get HTTP method to send the id of the song to the details.php page and query to the database on that id.
change the query on the Home page like below:
$sql = 'SELECT id , title FROM song ORDER BY title ASC;';
Then change the code on the Home page like below:
// Here I display all my songs from the database using their title
<?php
foreach ($songTitle as $song) {
echo "<a href='chord/details.php?id={$song['id']}'>{$song['title']} <br> </a>";
} ?>
And change the detail.php like below:
//This is working fine with Search Bar
<?php
require_once '../config.php';
if(isset($_POST['submit']) OR isset($_GET['id'])){
$condition = "";
$value = "";
if(isset($_GET['id']) and !empty($_GET['id'])){
$condition = "id = :value";
$value = $_GET['id'];
}
else if(isset($_POST['submit']) and !empty($_POST['submit'])){
$condition = "title = :value";
$value = $_POST['submit'];
}
$sql = 'SELECT * FROM song WHERE ' . $condition;
$stmt = $conn->prepare($sql);
$stmt->execute(['value' => $value]);
$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>
It’s also a good idea to use LIKE for searching in the title like below:
if(isset($_POST['submit']) and !empty($_POST['submit'])){
$condition = "title LIKE :value";
$value = "%". $_POST['submit']. "%";
}