Trying to populating bootstrap pills with contents from database

Question

i'm new to web development; I have been trying to populate bootstrap pills dynamically from the database, generating the pill itself and also the content dynamically. So far only the Pills are being generated but the contents don't seem to be generated. The pills are meant to display contents that are individual pdf files obtained from the database sorted based on the category matching the pill being iterated in the while loop. Here is my code. Thanks.

//HTML Bootstrap
<div class="row bd-sidebar">
            <div class="col-2 border-right">
                <h3 class="pl-2">Categories</h3><hr>
              <div class="nav flex-column nav-pills overflow-auto" id="v-nav-tab" role="tablist" aria-orientation="vertical">
             <?php include_once '.assets/_server/category_data.php'; ?>
             <?php echo $category_menu; ?>
<div class="col-10">
              <div class="tab-content" id="v-pills-tabContent">
             <?php echo $category_content;?>
    </div>
   </div>
  </div>
 </div>
</div>

//category_data.php

<?php

include_once("dbConfig.php");
$query = "SELECT * FROM `categories` GROUP BY  `categoryName` ";                                            
$categoryResult = mysqli_query($link, $query); 
$category_menu = "";
$category_content = "";
$count = 0;
while($row = mysqli_fetch_array($categoryResult)){
        $value =  $row['categoryId'];
        $categoryName = $row['categoryName'];
    if($count == 0){
        $category_menu .= '
        <a class="nav-link active" id="v-pills-'.$value.'-tab" data-toggle="pill" href="#v-pills-'.$value.'" role="tab" aria-controls="v-pills-'.$value.' aria-selected="false">'.$categoryName.'</a>
        ';
        $category_content .= '
        <div class="tab-pane fade show active" id="v-pills-'.$value.'" role="tabpanel" aria-labelledby="v-pills-'.$value.'-tab">   
        <div class="row"> 
        ';
    }else{
        $category_menu .= '
        <a class="nav-link" id="v-pills-'.$value.'-tab" data-toggle="pill" href="#v-pills-'.$value.'" role="tab" aria-controls="v-pills-'.$value.' aria-selected="false">'.$categoryName.'</a>
        ';
        $category_content .= '
        <div class="tab-pane fade" id="v-pills-'.$value.'" role="tabpanel" aria-labelledby="v-pills-'.$value.'-tab">
        <div class="row">
        ';
    }
    $content_query = "SELECT * FROM `books` WHERE `categoryId` = '.$value.' GROUP BY `file_name`";                                            
    $content_result = mysqli_query($link, $content_query);
    while($sub_row = mysqli_fetch_array($content_result)){
        $category_content .= '
        </div>
            <div class="col-1">
                <a class="material text-secondary text-decoration-none" href=".assets/pdf.js/web/viewer.html?file=materials/'.$sub_row['file_name'].'" data-toggle="tooltip" data-delay="300" data-animation="" data-html="true" title="'.$sub_row['file_name'].'">
                    <div class="mycard justify-content-center" style="width: 7rem;">
                        <img style="width: 70px; height: 70px;" src="img/book-thumbs/pdf_ico.png" class="mx-auto d-block" alt="pdf thumbnail">;
                            <div class="bookcardTitle">
                                <p class="text-center" id="bookcardTitle">'.$sub_row['file_name'].'</p>
                            </div>
                    </div>
                </a>
            </div>
        ';
    }
    $category_content .= '<div style="clear:both"></div></div></div>';
    $count++;
}
?>

score 1 · Answer 1 · answered Apr 13 '20 at 17:34

The immediate error in your code is the $content_query line:

$content_query = "SELECT * FROM `books` WHERE `categoryId` = '.$value.' GROUP BY `file_name`";

The string is quoted with double quotes but the $value part is surrounded by single quotes. The solution would be to replace the quotes:

$content_query = "SELECT * FROM `books` WHERE `categoryId` = ".$value." GROUP BY `file_name`";

You can see how the syntax highlight shows the error.

But there's a deeper problem here regarding sql injection. You should not concatenate values obtained from somewhere else in a query. Please see this question: How can I prevent SQL injection in PHP? and this website: https://phpdelusions.net/sql_injection for more information.

Thanks a bunch! the contents were finally displayed but yet scattered across the entire page. It doesn't hide them even when categories are selected. @solarc — abelamos, Apr 13 '20 at 18:13
Thanks ... I've got it working perfectly, my error was parsing the content as pills not as pill contents — abelamos, Apr 14 '20 at 10:04

score 0 · Answer 2 · answered Apr 14 '20 at 10:07

<?php

include_once("dbConfig.php");
$query = "SELECT * FROM `categories` GROUP BY  `categoryName` ";                                            
$categoryResult = mysqli_query($link, $query); 
$category_menu = "";
$category_content = "";
$count = 0;
while($row = mysqli_fetch_array($categoryResult)){
        $value =  $row['categoryId'];
        $categoryName = $row['categoryName'];
    if($count == 0){
        $category_menu .= '
        <a class="nav-link " id="v-pills-'.$value.'-tab" data-toggle="pill" href="#v-pills-'.$value.'" role="tab" aria-controls="v-pills-'.$value.' aria-selected="false">'.$categoryName.'</a>
        ';
        $category_content .= '
        <div class="tab-pane fade " id="v-pills-'.$value.'" role="tabpanel" aria-labelledby="v-pills-'.$value.'-tab">   
                    <div class="nav justify-content-center navbar-light bg-light"> 
                        <form class="form-inline v-pills-search" action="">
                            <input class="form-control rounded-pill mr-2" type="search" name="query" id="book_query" placeholder="Search...">
                            <button class="btn rounded-pill btn-outline-primary my-2 my-sm-0" type="submit"><i class="fas fa-search"></i></button>
                        </form>
                    </div> 
        <div class="row"> 
        ';
    }else{
        $category_menu .= '
        <a class="nav-link" id="v-pills-'.$value.'-tab" data-toggle="pill" href="#v-pills-'.$value.'" role="tab" aria-controls="v-pills-'.$value.' aria-selected="false">'.$categoryName.'</a>
        ';
        $category_content .= '
        <div class="tab-pane fade" id="v-pills-'.$value.'" role="tabpanel" aria-labelledby="v-pills-'.$value.'-tab">
                    <div class="nav justify-content-center navbar-light bg-light"> 
                        <form class="form-inline v-pills-search" action="">
                            <input class="form-control rounded-pill mr-2" type="search" name="query" id="book_query" placeholder="Search...">
                            <button class="btn rounded-pill btn-outline-primary my-2 my-sm-0" type="submit"><i class="fas fa-search"></i></button>
                        </form>
                    </div> 
        <div class="row">
        ';
    }
    $content_query = "SELECT * FROM `books` WHERE `categoryId` = '".$row['categoryId']."' GROUP BY `file_name`";                                            
    $content_result = mysqli_query($link, $content_query);
    if(mysqli_num_rows($content_result) < 0) {
        $conRow_html .= '<br>No items found in this category!';
    } 
    while($sub_row = mysqli_fetch_array($content_result)){
        $category_content .= '

            <div class="col-1 mr-4">
                <a class="material text-secondary text-decoration-none" href=".assets/pdf.js/web/viewer.html?file=materials/'.$sub_row['file_name'].'" data-toggle="tooltip" data-delay="0" data-animation="true" data-html="true" title="'.$sub_row['file_name'].'">
                    <div class="mycard justify-content-center" style="width: 7rem;">
                        <img style="width: 70px; height: 70px;" src="img/book-thumbs/pdf_ico.png" class="mx-auto d-block" alt="pdf thumbnail">
                            <div class="bookcardTitle">
                                <p class="text-center book_name" id="bookcardTitle">'.$sub_row['file_name'].'</p>
                            </div>
                    </div>
                </a>
            </div>
        ';
    }
    $category_content .= '<div class="clear:both"></div></div></div>';
    $count++;
}
?>

Trying to populating bootstrap pills with contents from database

2 Answers2