RXMESH
RXMESH

Reputation: 286

How to filter multiple categories and show it's posts/articles PHP

I have created a page that shows all the posts that are under a single category i.e. if i click on the category Music i will get all the Articles that are connected with Music category.

But my goal is to create a filtering option that can filter out certain categories and only show all the posts that are connected to the categories you have filtered i.e. i'll have a bunch of categories with checkboxes behind it and if i check Music and Games and submit the form i want to see all posts under music and games.

Here's the code i'm using to show all posts under 1 single category.

<?php require('includes/config.php'); 

$catID = ($_GET['id']);
$catName = ($_GET ['cat']);



?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>XS</title>
    <link rel="stylesheet" href="style/normalize.css">
    <link rel="stylesheet" href="style/main.css">
</head>
<body>

    <div id="wrapper">

        <h1>XS <span style="color:blue;"> >> </span> <span><?php echo $catName); ?></span> </h1>

        <hr />

        <div class="grid">

        <?php
            try {
                $stmt = "SELECT * FROM blog_posts NATURAL JOIN blog_posts_categories WHERE catID = $catID";

                $query = $db->prepare($stmt);
                $query->execute();

                $numrows = $query->rowCount();
                if($numrows > 0){

                    while($row = $query->fetch()){
                        echo '<ol class="thumb-grid group">';
                            echo '<li>';
                                echo '<a href="viewpost.php?id='.$row['postID'].'">';
                                    echo '<img src="scripts/t.php?src='.$row['postImage'].'&w=236&h=236&q=95" alt="'.$row['postTitle'].'" title="'.$row['postTitle'].'" />';
                                echo '</a>';
                            echo '</li>';
                        echo '</ol>';
                    }

                }

            } catch(PDOException $e) {
                echo $e->getMessage();
            }
        ?>


        </div>

    </div>


</body>
</html>

So i started out with the form but it's not quite good since it only sends out the category names and not the corresponding category id.

<form action="c.php" method="get">
  <fieldset>
    <legend>Filter Categories</legend>
    <p>
      <label><input type="checkbox" name="cat[]" value="Music"/> Music</label>
      <label><input type="checkbox" name="cat[]" value="Games"/> Games</label>
      <label><input type="checkbox" name="cat[]" value="Tech"/> Tech</label>
    </p>
  </fieldset>
  <button type="submit">Filter</button>
  <button type="reset">Reset</button>
</form>

Here´s my database structure:

blog_posts table

postID int, primary, auto increment.

postTitle varchar

postCont text

blog_categories table

catID int, primary, auto increment.

catName varchar

blog_posts_categories table

postID int

catID int


Database content:

blog_posts

postID  |  postTitle  | postCont

  1          Post1       Cont1
  2          Post2       Cont2
  3          Post3       Cont3
  4          Post4       Cont4
  5          Post5       Cont5

blog_categories

catID   |   catName

  1          Music
  2          Games
  3        Technology

blog_posts_categories

postID  |  catID

  1          1
  1          2
  1          3
  2          2
  3          3
  4          1
  4          2
  5          2
  5          3

Upvotes: 1

Views: 8538

Answers (4)

sakthivel.s
sakthivel.s

Reputation: 16

   <script>
 function paginateScroll() {
$('html, body').animate({
   scrollTop: $(".topheader").offset().top
}, 100);
console.log('pagination button clicked'); //remove after test
$(".paginate_button").unbind('click', paginateScroll);
$(".paginate_button").bind('click', paginateScroll);
}
paginateScroll();  
</script>

Upvotes: 0

sakthivel.s
sakthivel.s

Reputation: 16

<script>
$("#example1").DataTable({
  "pageLength": 9,
  "lengthChange": false,
  "bFilter": false,
  "bInfo": false,
  "bAutoWidth": false
});
$('#example2').DataTable({
  "paging": true,
  "lengthChange": false,
  "searching": false,
  "ordering": true,
  "info": true,
  "autoWidth": false
});

Upvotes: 0

sakthivel.s
sakthivel.s

Reputation: 16

   <?php 
      $query = "SELECT * FROM `name` WHERE `status` = '1' ";
      if(isset($_GET['catname'])){
          $cat1 = $_GET['catname'];
        $query .= " AND `category` = '$cat1' ";
      }
      $query .= " ORDER BY `ptid` DESC ";

      $result = mysql_query($query);
      $nums = mysql_num_rows($result);
      if($nums > 0){
        while($rows = mysql_fetch_row($result,MYSQL_ASSOC)){
          $ptid_dec = $rows['ptid'];
          $mult = '987694929';
          $ptid = $ptid_dec*$mult;
          $productname = $rows['productname'];
          $productimage = $rows['productimage'];
          $description = $rows['description'];
   ?>

        <?php echo $productimage; ?>" 
        <div class="caption">
          <a href="admin/<?php echo $productimage; ?>" target="_blank"><h4 class="center listdesign"><strong><?php echo $productname; ?></strong></h4></a>


    <?php } } ?>

Upvotes: 0

didierc
didierc

Reputation: 14740

The form content

Replace your checkboxes values with the actual category id, and put the category name in the tag inner text content:

<input type="checkbox" name="cat[]" value="<?php echo $row['catID'];?>"/><?php echo $row['catName'];?></input>

You can get that data out of the DB (the blog_categories table) and do a simple loop on the rows of the result set.

The table display

Now you should get an array in $_GET["cat"] of all the selected category ids; you just need to implode it with comma as a separator, and put it in your query, replacing WHERE catID = $catID" with WHERE catID IN ($catID)". Don't forget to sanitize your request data first (by checking that the values are integers).

Lastly, you might want to update your table display by adding the category the post belongs to in an extra column, or sort your data by category, and have sub tables for each category. This is left as an exercise.

Upvotes: 2

Related Questions