0

From a database like this

  [                   POSTS                 ]
  |  id  |     title    |    part1    |    part2    |    part3    |
  |------|--------------|-------------|-------------|-------------|
  |  1   |      ST1     |   storyp1   |   storyp1   |   storyp1   |
  |  2   |      ST2     |   storyp2   |   storyp2   |   storyp2   |
  |  3   |      ST3     |   storyp3   |   storyp3   |   storyp3   |
  |  4   |      ST4     |   storyp4   |   storyp4   |   storyp4   |
  __________________________________________

How can i separate a page into 3 pieces to be shown when clicking on a button?

<?php
$query = "SELECT * FROM posts WHERE id = :id";
 $stmt = $conn->prepare($sqlFetch);
    $stmt->execute([':id' => $id]);
    $row = $stmt->fetch()
      $title = $row['title'];
      $part1 = $row['part1'];
      $part1 = $row['part2'];
      $part1 = $row['part3'];
?>


    <body>
        <h1 class="title">
            <?php echo $title; ?>
        </h1>
        <button>part1</button>
        <button>part2</button>
        <button>part3</button>

        <div class="part1">
            <?php echo $part1; ?>
        </div>
        <div class="part2">
            <?php echo $part2; ?>
        </div>
        <div class="part3">
            <?php echo $part3; ?>
        </div>
    </body>

I thought about using CSS display: none; but couldn't figure out how to trigger the buttons, Is there a possible way to use PHP to do that? I thought about Radio buttons too But i guess it is not the optimal way.

Calibur Victorious
  • 628
  • 1
  • 5
  • 17

1 Answers1

0

I think this will help you: Create first GetData.php

<?php
$q = ($_GET['q']);
include_once 'DbConnection.php'; //This is your connection
$Query = "SELECT * FROM posts WHERE id='$q'";
$Result = mysqli_query($Link, $Query);
while ($Rows = mysqli_fetch_assoc($Result))
{
$title = $Rows['title'];
$part1 = $Rows['part1'];
$part2 = $Rows['part2'];
$part3 = $Rows['part3'];
echo "<div class='part1'>$part1</div>";
echo "<div class='part2'>$part2</div>";
echo "<div class='part3'>$part3</div>";
}
?>

Now create index.php

<html>
<head><title>Show the result</title>
<script>
function ShowResult(str)
{
    if (str == "") {
        return;
    }
    if (window.XMLHttpRequest) {
        xmlhttp=new XMLHttpRequest();
    } else {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("DisplayData").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","GetData.php?q="+str,true);
    xmlhttp.send();
}
</script>
</head>
<body>
<div>
<input type="text" id="txtSearch" onkeyup="ShowResult(this.value); onblur="ShowResult(this.value);"/>
<div>
<div id="DisplayData"></div>
</body>
</html>

If you want to do it by Button event so, you need the form that transfer id and return the data from server. If you need that also comment or inbox me.