Filling boostrap cards with data from a mySQL database

I am trying to fill bootstrap cards with data from a database. I am very close. I have the mainphp file called project.php

A file with a function called component to fill them, called component.php.

And a connectDB.php file, that connect the DB and extracts the information from a table.

I am aware this is alot of code so I highlighted 2 areas the problem is definitely in…Apologies if too much, I can remove the function if necessary as it works..

here is an extract from project.php

<?php
require_once('connect/connectDB.php');
require_once('component.php');




?>
<!doctype html>
<html lang="en">
  <head>

   <title>The Wild Music Shop</title>
   
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!--Font awesome-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    
    <!-- i have no idea why it won't link -->
    <!-- <link type="text/css" rel="stylesheet" href="myCSS/somecss.css"> -->
    <link rel="stylesheet" href="myCSS/somecss.css">

</head>
<body>

    <!-- the cards -->
    <div class = "container" id="thecards">
        <div class = "row text-center py-5">

//Definite problem here
             <?php
             $result = getData();
             while ($row = mysqli_fetch_assoc($result)){
                 component($row['InstName'], $row['Price'], $row['ProductImg'], $row['description']);
             }
            ?>  
            

        </div>

    </div>
</html>

JavaScript
​x
 
<?phprequire_once('connect/connectDB.php');require_once('component.php');​​​​?><!doctype html><html lang="en">  <head>​   <title>The Wild Music Shop</title>       <!-- Required meta tags -->    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    <!--Font awesome-->    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />    <!-- Bootstrap CSS -->    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">        <!-- i have no idea why it won't link -->    <!-- <link type="text/css" rel="stylesheet" href="myCSS/somecss.css"> -->    <link rel="stylesheet" href="myCSS/somecss.css">​</head><body>​    <!-- the cards -->    <div class = "container" id="thecards">        <div class = "row text-center py-5">​//Definite problem here             <?php             $result = getData();             while ($row = mysqli_fetch_assoc($result)){                 component($row['InstName'], $row['Price'], $row['ProductImg'], $row['description']);             }            ?>              ​        </div>​    </div></html>​

This component definitely works as I tested it

<?php

function component($pInstName, $pPrice, $pProductImg, $pdescription){
    $element = "
    
    <div class="col-md-3 col-sm-6 my-3 my-md-0">
                <form action="index.php" method="post">
                    <div class="card shadow">
                        <div>
                            <img src= $pProductImg" alt="Image1" class="img-fluid card-img-top">
                        </div>
                        <div class="card-body">
                            <h5 class="card-title">Our $pInstName</h5>
                            <h6>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                            </h6>
                            <p class="card-text">
                            $pdescription
                            </p>
                            <h5>
                               
                                <span class="price">$$pPrice</span>
                            </h5>
                            <button type="submit" class="btn btn-warning my-3" name="add">Add to Cart </button>
                             
                        </div>
                    </div>
                </form>
            </div>
    ";
    echo $element;
}
?>

JavaScript
 
<?php​function component($pInstName, $pPrice, $pProductImg, $pdescription){    $element = "        <div class="col-md-3 col-sm-6 my-3 my-md-0">                <form action="index.php" method="post">                    <div class="card shadow">                        <div>                            <img src= $pProductImg" alt="Image1" class="img-fluid card-img-top">                        </div>                        <div class="card-body">                            <h5 class="card-title">Our $pInstName</h5>                            <h6>                                <i class="fas fa-star"></i>                                <i class="fas fa-star"></i>                                <i class="fas fa-star"></i>                                <i class="fas fa-star"></i>                                <i class="far fa-star"></i>                            </h6>                            <p class="card-text">                            $pdescription                            </p>                            <h5>                                                               <span class="price">$$pPrice</span>                            </h5>                            <button type="submit" class="btn btn-warning my-3" name="add">Add to Cart </button>                                                     </div>                    </div>                </form>            </div>    ";    echo $element;}?>​

and finally here is the connectDB.php

<?php


        //Create a database connection
        $dbhost = "localhost";
        $dbuser = "root";
        $dbpassword = "";
        $dbname = "g00398295";

        $connection = mysqli_connect($dbhost,$dbuser,$dbpassword,$dbname);
        
        //Test if connection occoured
        if(mysqli_connect_errno()){
            die("DB connection failed: " .
                mysqli_connect_error() .
                    " (" . mysqli_connect_errno() . ")"
                    );
        }

        if (!$connection)
            {
                die('Could not connect: ' . mysqli_error());
            }
            
            $sql = "select * from Instruments where itemno = 1; ";
            
            $result = mysqli_query($connection,$sql);
            $row=mysqli_fetch_assoc($result);
            
            echo "Pls work".$row['InstName'];
            
            mysqli_close($connection);
            //get product from Database
//Definite problem here
        function getData(){
            $sql = "select * from $this->tablename";

            $result = mysqli_query($this->con,$sql);
            if(mysqli_num_rows($result) > 0){
                return $result;
            }

        }

?>

JavaScript
 
<?php​​        //Create a database connection        $dbhost = "localhost";        $dbuser = "root";        $dbpassword = "";        $dbname = "g00398295";​        $connection = mysqli_connect($dbhost,$dbuser,$dbpassword,$dbname);                //Test if connection occoured        if(mysqli_connect_errno()){            die("DB connection failed: " .                mysqli_connect_error() .                    " (" . mysqli_connect_errno() . ")"                    );        }​        if (!$connection)            {                die('Could not connect: ' . mysqli_error());            }                        $sql = "select * from Instruments where itemno = 1; ";                        $result = mysqli_query($connection,$sql);            $row=mysqli_fetch_assoc($result);                        echo "Pls work".$row['InstName'];                        mysqli_close($connection);            //get product from Database//Definite problem here        function getData(){            $sql = "select * from $this->tablename";​            $result = mysqli_query($this->con,$sql);            if(mysqli_num_rows($result) > 0){                return $result;            }​        }​?>​

I am awar the problem is somewhere in the connection step. I am very new to php in general and have been at this very long, I would appreciate help!

Answer

You have a function getData() that has "$this->table". Dont copy paste the codes without understanding what it does.

Clean up your connectDB.php:

<?php
    //Create a database connection
    $dbhost     = "localhost";
    $dbuser     = "root";
    $dbpassword = "";
    $dbname     = "g00398295";

    $connection = mysqli_connect($dbhost, $dbuser, $dbpassword, $dbname);
        
    //Test if connection occoured
    if(mysqli_connect_errno()){
        die("DB connection failed: " .
            mysqli_connect_error() .
            " (" . mysqli_connect_errno() . ")"
        );
    }
?>

JavaScript
 
<?php    //Create a database connection    $dbhost     = "localhost";    $dbuser     = "root";    $dbpassword = "";    $dbname     = "g00398295";​    $connection = mysqli_connect($dbhost, $dbuser, $dbpassword, $dbname);            //Test if connection occoured    if(mysqli_connect_errno()){        die("DB connection failed: " .            mysqli_connect_error() .            " (" . mysqli_connect_errno() . ")"        );    }?>​

In project.php:

<div class = "row text-center py-5">
    //Definite problem here
    <?php
        $sql = "select * from Instruments where itemno = 1; ";
 
        $result = mysqli_query($connection,$sql);
        while ($row = mysqli_fetch_assoc($result)){
            component($row['InstName'], $row['Price'], $row['ProductImg'], $row['description']);
        }
    ?>  
</div>

JavaScript
 
<div class = "row text-center py-5">    //Definite problem here    <?php        $sql = "select * from Instruments where itemno = 1; ";         $result = mysqli_query($connection,$sql);        while ($row = mysqli_fetch_assoc($result)){            component($row['InstName'], $row['Price'], $row['ProductImg'], $row['description']);        }    ?>  </div>​

Advertisement

Answer