(Отредактировано) Как заставить мою сетку загрузочных карточек элементов Treeseed 5 отображаться в моем php-файле после

(Отредактировано) Как заставить мою сетку загрузочных карточек элементов Treeseed 5 отображаться в моем php-файле после ⇐ Php

1 сообщение • Страница 1 из 1

Anonymous

(Отредактировано) Как заставить мою сетку загрузочных карточек элементов Treeseed 5 отображаться в моем php-файле после

Цитата

Сообщение Anonymous » 19 сен 2024, 20:09

Я пытаюсь отобразить макет сетки HTML в файле php с именем Gardenshop.php. Внутри контейнера сетки должны находиться элементы сетки в виде карточек Bootstrap 5, которые создаются динамически. Контейнер сетки (a) имеет класс .items-wrapper.
На стороне MySQL я использую Sequelize с таблицей Treeseeds.
Я использую PDO (PHP) Data Object) в файле с именем shopconnect.php, чтобы установить соединение с моей базой данных и запросить данные обратно с помощью запросов выбора MySQL, как обычно.
//shopconnect.php

Код: Выделить всё

$host = "127.0.0.1";
$db = "database"
$user = "user";
$pass = "password";
$charset = "utf8mb4";

$datasourcestr =  "mysql:host=$host;dbname=$db;charset=$charset";
$options = [
PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
PDO::ATTR_EMULATE_PREPARES   => false,
];
$pdo = new PDO($datasourcestr, $user, $pass, $options);

$sql1 = "SELECT * FROM suppliers";
$sql2 = "SELECT * FROM treeseeds";

$supplierNameData = $pdo->query($sql1)->fetchAll();
$treeSeedData = $pdo->query($sql2)->fetchAll();

$treeSuppliers = [];

function filterOutSuppliers($parentArr,$childDataArr,$candidateArr){
foreach($parentArr as $parentRow)
{
foreach($childDataArr as $childRow){
if(($parentRow["id"]  $childRow["supplierId"]) === 0 ){
array_push($candidateArr, $parentRow["supplierName"]);
}else{
continue;
}

}
}
return $candidateArr;
}

$treeSuppliers = filterOutSuppliers($supplierNameData,$treeSeedData,$treeSuppliers);

$supplierIds = [];
foreach($supplierNameData as $row1) {
array_push($supplierIds,$row1["id"]);
}

$supplierIdStrs = implode(',', $supplierIds);

$treeSeedQuery = "SELECT * FROM `treeseeds` WHERE supplierId in ($supplierIdStrs)";
$treeSeedDataOut = $pdo->query($treeSeedQuery);

$treeSeedArr = [];

do {
$treeSeedArr = $treeSeedDataOut->fetchAll();
} while ($treeSeedDataOut->nextRowset() && $treeSeedDataOut->columnCount());

$domDoc = new DOMDocument();

function generateTreeCard(){
$topicDiv = $GLOBALS['domDoc']->createElement('div');
$topicDiv->setAttribute('class','tree-card'); //tree-card div is to be appended to the container mt-3
return $topicDiv; //USED IN LOOP BELOW
}

function generateCardBody(){
$cardBody = $GLOBALS['domDoc']->createElement('div');
$cardBody->setAttribute('class','card-body');
return $cardBody;  //DONE ALREADY APPENDED TO TREECARD BELOW IN THE LOOP
}

function addheaderH4Text($value){
$cardTitle = $GLOBALS['domDoc']->createElement('h4',$value);body
$cardTitle->setAttribute('class','card-title');//needs to be appended on to card body
return $cardTitle; //ALREADY DONE IN THE LOOP BELOW
}

function generateListElements($key,$value){
$resultItem = "";
switch($key){
case "commonName":
$resultItem = $GLOBALS['domDoc']->createElement('li',"$key : $value");
break;
case "speciesName":
$resultItem = $GLOBALS['domDoc']->createElement('li',"$key : $value");
break;
case "family":
$resultItem = $GLOBALS['domDoc']->createElement('li',"$key : $value");
break;
case "seedcostInclVAT":
$resultItem = $GLOBALS['domDoc']->createElement('li',"$key : $value");
break;
case "quantityInStock":
$resultItem = $GLOBALS['domDoc']->createElement('li',"$key : $value");
break;
case "seedNumberPerPack":
$resultItem = $GLOBALS['domDoc']->createElement('li',"$key : $value");
break;
case "colour":
$resultItem = $GLOBALS['domDoc']->createElement('li',"$key : $value");
break;
case "hardiness":
$resultItem = $GLOBALS['domDoc']->createElement('li',"$key : $value");
break;
case "soilType":
$resultItem = $GLOBALS['domDoc']->createElement('li',"$key : $value");
break;
case "soilAcidity":
$resultItem = $GLOBALS['domDoc']->createElement('li',"$key : $value");
break;
case "description":
$resultItem = $GLOBALS['domDoc']->createElement('li',"$key : $value");
break;
}
return $resultItem;  //needs to be appended to the productInfoList variable [list]
}

$outerContainer = $domDoc->createElement('div');
$outerContainer->setAttribute('class','items-wrapper');

$productInfoList = $domDoc->createElement('ul');
$listElementResult = "";

$imgCollectorArr = [];
$h4Text = "";
$cardBody = "";
$treeCard = "";
$treeImage1 = "";
$infoParagraph = "";
$cardContainer = "";

***ISSUE IS IN THE NESTED FOREACH LOOP HERE ****
foreach($treeSeedArr as $key => $value){
$infoParagraph = generateInfoText(); //Just to display "Information:"
foreach($value as $key1 => $value1){
echo $key1 . " has a value of " . $value1 .  "
";  //***TEST
if($key1 === 'commonName'){
$h4Text = addheaderH4Text($value1); //GENERATE h4 text line'
$cardBody = generateCardBody()->appendChild($h4Text)->appendChild($infoParagraph);
}
if($key1 !== 'id' && $key1 !== 'treeImage1' && $key1 !== 'treeImage2' && $key1 !== 'treeImage3'){
$listElementResult = generateListElements($key1,$value1); // the bullet pointed list of properties
$productInfoList->appendChild($listElementResult);//this is the  tag
}
if($key1 === 'treeImage1' && !(is_null($value["treeImage1"]))){

if(array_key_exists("treeImage2",$value) && !(is_null($value["treeImage2"]))){
$imgCollectorArr["treeImage1"] = $value[$key1];
continue; //if a treeseed has more at least 2 images
}
$treeImage1 = generatetreeImage1($value1); //this is if a treeseed only has one image
$treeCard = generateTreeCard()->appendChild($treeImage1)->appendChild($cardBody);
}

if($key1 === 'treeImage2' && !(is_null($value["treeImage2"]))){
if(array_key_exists("treeImage3",$value) && !(is_null($value["treeImage3"]))){
$imgCollectorArr["treeImage2"] = $value[$key1];
continue; //if a treeseed has 3 images instead of 2
}
//design what happens when there are 2 images
$slideBox1 = $domDoc->createElement('div');
$slideBox1->setAttribute('class','mySlides fade');
$countText1 = $domDoc->createElement('div','1 / 2');
$countText1->setAttribute('class','numbertext');
$slideBox1->appendChild($countText1);
$firstImg = $domDoc->createElement('img');
$firstImg->setAttribute('style','width:100%');
$firstImg->setAttribute('src',$imgCollectorArr["treeImage1"]);
$slideBox1->appendChild($firstImg);

$slideBox2 = $domDoc->createElement('div');
$slideBox2->setAttribute('class','mySlides fade');
$countText2 = $domDoc->createElement('div','2 / 2');
$countText2->setAttribute('class','numbertext');
$slideBox2->appendChild($countText2);
$secondImg = $domDoc->createElement('img');
$secondImg->setAttribute('style','width:100%');
$secondImg->setAttribute('src',"$value1");
$slideBox2->appendChild($secondImg);
$treeCard->appendChild($slideBox1);
$treeCard->appendChild($slideBox2);

//attach on to treecard
$previousLink = $domDoc->createElement('a','❮');
$previousLink->setAttribute('class','prev');
$previousLInk->setAttribute('onclick','plusSlides(-1)');

$forwardLink = $domDoc->createElement('a','❯');
$forwardLink->setAttribute('class','next');
$forwardLInk->setAttribute('onclick','plusSlides(1)');
$treeCard->appendChild($previousLink);
$treeCard->appendChild($forwardLink);

//dots/circles
$dotCircleBox1 = $domDoc->createElement('div');
$dotCircleBox1->setAttribute('style','text-align:center');
$dotSpanA = $domDoc->createElement('span');
$dotSpanA->setAttribute('class','dot');
$dotSpanA->setAttribute('onclick','currentSlide(1)');

$dotSpanB = $domDoc->createElement('span');
$dotSpanB->setAttribute('class','dot');
$dotSpanB->setAttribute('onclick','currentSlide(2)');

$dotCircleBox1->appendChild($dotSpanA);
$dotCircleBox1->appendChild($dotSpanB);
$treeCard->appendChild($dotCircleBox1);
}

if($key1 === 'treeImage3' &&  !(is_null($value[$key1]))){
$slideBoxA = $domDoc->createElement('div');
$slideBoxA->setAttribute('class','mySlides fade');
$countTextA = $domDoc->createElement('div','1 / 3');
$countTextA->setAttribute('class','numbertext');
$slideBox1->appendChild($countTextA);
$firstImg = $domDoc->createElement('img');
$firstImg->setAttribute('style','width:100%');
$firstImg->setAttribute('src',$imgCollectorArr["treeImage1"]);
$slideBoxA->appendChild($firstImg);

$slideBoxB = $domDoc->createElement('div');
$slideBoxB->setAttribute('class','mySlides fade');
$countTextB = $domDoc->createElement('div','2 / 3');
$countTextB->setAttribute('class','numbertext');
$slideBoxB->appendChild($countTextB);
$secondImg = $domDoc->createElement('img');
$secondImg->setAttribute('style','width:100%');
$secondImg->setAttribute('src',$imgCollectorArr["treeImage2"]);
$slideBoxB->appendChild($secondImg);

$slideBoxC = $domDoc->createElement('div');
$slideBoxC->setAttribute('class','mySlides fade');
$countTextC = $domDoc->createElement('div','3 / 3');
$countTextC->setAttribute('class','numbertext');
$slideBoxC->appendChild($countTextB);
$thirdImg = $domDoc->createElement('img');
$thirdImg->setAttribute('style','width:100%');
$thirdImg->setAttribute('src',$value1);
$slideBoxC->appendChild($thirdImg);

$treeCard->appendChild($slideBoxA);
$treeCard->appendChild($slideBoxB);
$treeCard->appendChild($slideBoxC);

$previousLink = $domDoc->createElement('a','❮');
$previousLink->setAttribute('class','prev');
$previousLInk->setAttribute('onclick','plusSlides(-1)');

$forwardLink = $domDoc->createElement('a','❯');
$forwardLink->setAttribute('class','next');
$forwardLInk->setAttribute('onclick','plusSlides(1)');

$treeCard->appendChild($previousLink);
$treeCard->appendChild($forwardLink);

//dots/circles
$dotCircleBox2 = $domDoc->createElement('div');
$dotCircleBox2->setAttribute('style','text-align:center');
$dotSpan1 = $domDoc->createElement('span');
$dotSpan1->setAttribute('class','dot');
$dotSpan1->setAttribute('onclick','currentSlide(1)');

$dotSpan2 = $domDoc->createElement('span');
$dotSpan2->setAttribute('class','dot');
$dotSpan2->setAttribute('onclick','currentSlide(2)');

$dotSpan3 = $domDoc->createElement('span');
$dotSpan3->setAttribute('class','dot');
$dotSpan3->setAttribute('onclick','currentSlide(3)');

$dotCircleBox2->appendChild($dotSpan1);
$dotCircleBox2->appendChild($dotSpan2);
$dotCircleBox2->appendChild($dotSpan3); //FORGOT TO APPEND THESE??
$treeCard->appendChild($dotCircleBox2);

}
}
$cardBody->appendChild($productInfoList);
$treeCard->appendChild($cardBody);
//for the forward and backwards arrow heads
$cardContainer = $domDoc->createElement('div');//needs to be appended to items-wrapper
if(!(is_null($value["treeImage2"])) || !(is_null($value["treeImage3"]))){
$cardContainer->setAttribute('class','container mt-3 slides-container');
}else{
$cardContainer->setAttribute('class','container mt-3');
}

$cardContainer->appendChild($treeCard);
$outerContainer->appendChild($cardContainer);
}
$domDoc->appendChild($outerContainer);
$htmlString = $domDoc->saveHTML();
echo $htmlString;

//slidelogic.js

Код: Выделить всё

let slideIndex  = 1;

showSlides(slideIndex);

//Next/previous controls
function plusSlides(slideNum){
showSlides(slideIndex += slideNum);
}

// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}

function showSlides(number){
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");

if(number > slides.length){
slideIndex = 1;
}

if(number < 1){
slideIndex = slides.length;
}
for (i = 0; i < slides.length;  i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";

}

function currentSlide(number){
displaySlides(slideIndex = number)
}

Затем я импортирую приведенный выше файл JavaScript (slidelogic.js) и shopconnect.php в Gardenshop.php
//gardenshop.php

Код: Выделить всё






[*]







SPROUTY'S GARDENING SHOP

[url=./homepage.html][i][/i]Back To Homepage[/url]
[*][i][/i]
[/list]





Contains Stainless Steel:&nbsp
FSC (Forest Stewardship Council) certified:&nbsp
In Stock:&nbsp



In Stock:&nbsp
Weight (grams):&nbsp
Price:&nbsp
FSC (Forest Stewardship Council) certified:&nbsp



In Stock:&nbsp
Litres (Capacity):&nbsp
Price:&nbsp



In Stock:&nbsp
Soil Type:&nbsp
chalk
sand
loam
clay

Soil Acidity:&nbsp
acid
alkaline
neutral

Hardiness:&nbsp
hardy
tender
hardy/half-hardy

Price:&nbsp




In Stock:&nbsp
Is Biodegradable:&nbsp
Litres (Capacity):&nbsp
Price:&nbsp

Есть файл Gardenshop.css, который я включил с помощью тега в Gardenshop.php.
Я попробовал свой код, приведенный выше, через XAMMP (рендеринг php Gardenshop.php с использованием Apache)
Я получаю следующий результат на изображении ниже. Я хотел бы знать, как заставить карты начальной загрузки 5 динамически отображаться в сетке. Динамически в том смысле, что мне не нужно жестко кодировать элементы сетки; если я хочу добавить больше данных о семенах деревьев в свою базу данных, я могу это сделать, а затем, когда веб-страница Gardenshop.php будет загружена (через локальный хост в моем браузере), она автоматически отобразит правильное количество элементов сетки (карточек).
Изображение Gardenshop.php, когда я перехожу на локальный хост и конкретную страницу с помощью XAMPP](https://i.sstatic.net/0bk8E7lC.png)

Подробнее здесь: https://stackoverflow.com/questions/790 ... r-within-m

1726765762

Anonymous

Я пытаюсь отобразить макет сетки HTML в файле php с именем Gardenshop.php. Внутри контейнера сетки должны находиться элементы сетки в виде карточек Bootstrap 5, которые создаются динамически.  Контейнер сетки (a) имеет класс .items-wrapper.
На стороне MySQL я использую Sequelize с таблицей Treeseeds.
Я использую PDO (PHP) Data Object) в файле с именем shopconnect.php, чтобы установить соединение с моей базой данных и запросить данные обратно с помощью запросов выбора MySQL, как обычно.
//shopconnect.php
[code]$host = "127.0.0.1";
$db = "database"
$user = "user";
$pass = "password";
$charset = "utf8mb4";

$datasourcestr =  "mysql:host=$host;dbname=$db;charset=$charset";
$options = [
PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
PDO::ATTR_EMULATE_PREPARES   => false,
];
$pdo = new PDO($datasourcestr, $user, $pass, $options);

$sql1 = "SELECT * FROM suppliers";
$sql2 = "SELECT * FROM treeseeds";

$supplierNameData = $pdo->query($sql1)->fetchAll();
$treeSeedData = $pdo->query($sql2)->fetchAll();

$treeSuppliers = [];

function filterOutSuppliers($parentArr,$childDataArr,$candidateArr){
foreach($parentArr as $parentRow)
{
foreach($childDataArr as $childRow){
if(($parentRow["id"]  $childRow["supplierId"]) === 0 ){
array_push($candidateArr, $parentRow["supplierName"]);
}else{
continue;
}

}
}
return $candidateArr;
}

$treeSuppliers = filterOutSuppliers($supplierNameData,$treeSeedData,$treeSuppliers);

$supplierIds = [];
foreach($supplierNameData as $row1) {
array_push($supplierIds,$row1["id"]);
}

$supplierIdStrs = implode(',', $supplierIds);

$treeSeedQuery = "SELECT * FROM `treeseeds` WHERE supplierId in ($supplierIdStrs)";
$treeSeedDataOut = $pdo->query($treeSeedQuery);

$treeSeedArr = [];

do {
$treeSeedArr = $treeSeedDataOut->fetchAll();
} while ($treeSeedDataOut->nextRowset() && $treeSeedDataOut->columnCount());

$domDoc = new DOMDocument();

function generateTreeCard(){
$topicDiv = $GLOBALS['domDoc']->createElement('div');
$topicDiv->setAttribute('class','tree-card'); //tree-card div is to be appended to the container mt-3
return $topicDiv; //USED IN LOOP BELOW
}

function generateCardBody(){
$cardBody = $GLOBALS['domDoc']->createElement('div');
$cardBody->setAttribute('class','card-body');
return $cardBody;  //DONE ALREADY APPENDED TO TREECARD BELOW IN THE LOOP
}

function addheaderH4Text($value){
$cardTitle = $GLOBALS['domDoc']->createElement('h4',$value);body
$cardTitle->setAttribute('class','card-title');//needs to be appended on to card body
return $cardTitle; //ALREADY DONE IN THE LOOP BELOW
}

function generateListElements($key,$value){
$resultItem = "";
switch($key){
case "commonName":
$resultItem = $GLOBALS['domDoc']->createElement('li',"$key : $value");
break;
case "speciesName":
$resultItem = $GLOBALS['domDoc']->createElement('li',"$key : $value");
break;
case "family":
$resultItem = $GLOBALS['domDoc']->createElement('li',"$key : $value");
break;
case "seedcostInclVAT":
$resultItem = $GLOBALS['domDoc']->createElement('li',"$key : $value");
break;
case "quantityInStock":
$resultItem = $GLOBALS['domDoc']->createElement('li',"$key : $value");
break;
case "seedNumberPerPack":
$resultItem = $GLOBALS['domDoc']->createElement('li',"$key : $value");
break;
case "colour":
$resultItem = $GLOBALS['domDoc']->createElement('li',"$key : $value");
break;
case "hardiness":
$resultItem = $GLOBALS['domDoc']->createElement('li',"$key : $value");
break;
case "soilType":
$resultItem = $GLOBALS['domDoc']->createElement('li',"$key : $value");
break;
case "soilAcidity":
$resultItem = $GLOBALS['domDoc']->createElement('li',"$key : $value");
break;
case "description":
$resultItem = $GLOBALS['domDoc']->createElement('li',"$key : $value");
break;
}
return $resultItem;  //needs to be appended to the productInfoList variable [list]
}

$outerContainer = $domDoc->createElement('div');
$outerContainer->setAttribute('class','items-wrapper');

$productInfoList = $domDoc->createElement('ul');
$listElementResult = "";

$imgCollectorArr = [];
$h4Text = "";
$cardBody = "";
$treeCard = "";
$treeImage1 = "";
$infoParagraph = "";
$cardContainer = "";

***ISSUE IS IN THE NESTED FOREACH LOOP HERE ****
foreach($treeSeedArr as $key => $value){
$infoParagraph = generateInfoText(); //Just to display "Information:"
foreach($value as $key1 => $value1){
echo $key1 . " has a value of " . $value1 .  "
";  //***TEST
if($key1 === 'commonName'){
$h4Text = addheaderH4Text($value1); //GENERATE h4 text line'
$cardBody = generateCardBody()->appendChild($h4Text)->appendChild($infoParagraph);
}
if($key1 !== 'id' && $key1 !== 'treeImage1' && $key1 !== 'treeImage2' && $key1 !== 'treeImage3'){
$listElementResult = generateListElements($key1,$value1); // the bullet pointed list of properties
$productInfoList->appendChild($listElementResult);//this is the  tag
}
if($key1 === 'treeImage1' && !(is_null($value["treeImage1"]))){

if(array_key_exists("treeImage2",$value) && !(is_null($value["treeImage2"]))){
$imgCollectorArr["treeImage1"] = $value[$key1];
continue; //if a treeseed has more at least 2 images
}
$treeImage1 = generatetreeImage1($value1); //this is if a treeseed only has one image
$treeCard = generateTreeCard()->appendChild($treeImage1)->appendChild($cardBody);
}

if($key1 === 'treeImage2' && !(is_null($value["treeImage2"]))){
if(array_key_exists("treeImage3",$value) && !(is_null($value["treeImage3"]))){
$imgCollectorArr["treeImage2"] = $value[$key1];
continue; //if a treeseed has 3 images instead of 2
}
//design what happens when there are 2 images
$slideBox1 = $domDoc->createElement('div');
$slideBox1->setAttribute('class','mySlides fade');
$countText1 = $domDoc->createElement('div','1 / 2');
$countText1->setAttribute('class','numbertext');
$slideBox1->appendChild($countText1);
$firstImg = $domDoc->createElement('img');
$firstImg->setAttribute('style','width:100%');
$firstImg->setAttribute('src',$imgCollectorArr["treeImage1"]);
$slideBox1->appendChild($firstImg);

$slideBox2 = $domDoc->createElement('div');
$slideBox2->setAttribute('class','mySlides fade');
$countText2 = $domDoc->createElement('div','2 / 2');
$countText2->setAttribute('class','numbertext');
$slideBox2->appendChild($countText2);
$secondImg = $domDoc->createElement('img');
$secondImg->setAttribute('style','width:100%');
$secondImg->setAttribute('src',"$value1");
$slideBox2->appendChild($secondImg);
$treeCard->appendChild($slideBox1);
$treeCard->appendChild($slideBox2);

//attach on to treecard
$previousLink = $domDoc->createElement('a','❮');
$previousLink->setAttribute('class','prev');
$previousLInk->setAttribute('onclick','plusSlides(-1)');

$forwardLink = $domDoc->createElement('a','❯');
$forwardLink->setAttribute('class','next');
$forwardLInk->setAttribute('onclick','plusSlides(1)');
$treeCard->appendChild($previousLink);
$treeCard->appendChild($forwardLink);

//dots/circles
$dotCircleBox1 = $domDoc->createElement('div');
$dotCircleBox1->setAttribute('style','text-align:center');
$dotSpanA = $domDoc->createElement('span');
$dotSpanA->setAttribute('class','dot');
$dotSpanA->setAttribute('onclick','currentSlide(1)');

$dotSpanB = $domDoc->createElement('span');
$dotSpanB->setAttribute('class','dot');
$dotSpanB->setAttribute('onclick','currentSlide(2)');

$dotCircleBox1->appendChild($dotSpanA);
$dotCircleBox1->appendChild($dotSpanB);
$treeCard->appendChild($dotCircleBox1);
}

if($key1 === 'treeImage3' &&  !(is_null($value[$key1]))){
$slideBoxA = $domDoc->createElement('div');
$slideBoxA->setAttribute('class','mySlides fade');
$countTextA = $domDoc->createElement('div','1 / 3');
$countTextA->setAttribute('class','numbertext');
$slideBox1->appendChild($countTextA);
$firstImg = $domDoc->createElement('img');
$firstImg->setAttribute('style','width:100%');
$firstImg->setAttribute('src',$imgCollectorArr["treeImage1"]);
$slideBoxA->appendChild($firstImg);

$slideBoxB = $domDoc->createElement('div');
$slideBoxB->setAttribute('class','mySlides fade');
$countTextB = $domDoc->createElement('div','2 / 3');
$countTextB->setAttribute('class','numbertext');
$slideBoxB->appendChild($countTextB);
$secondImg = $domDoc->createElement('img');
$secondImg->setAttribute('style','width:100%');
$secondImg->setAttribute('src',$imgCollectorArr["treeImage2"]);
$slideBoxB->appendChild($secondImg);

$slideBoxC = $domDoc->createElement('div');
$slideBoxC->setAttribute('class','mySlides fade');
$countTextC = $domDoc->createElement('div','3 / 3');
$countTextC->setAttribute('class','numbertext');
$slideBoxC->appendChild($countTextB);
$thirdImg = $domDoc->createElement('img');
$thirdImg->setAttribute('style','width:100%');
$thirdImg->setAttribute('src',$value1);
$slideBoxC->appendChild($thirdImg);

$treeCard->appendChild($slideBoxA);
$treeCard->appendChild($slideBoxB);
$treeCard->appendChild($slideBoxC);

$previousLink = $domDoc->createElement('a','❮');
$previousLink->setAttribute('class','prev');
$previousLInk->setAttribute('onclick','plusSlides(-1)');

$forwardLink = $domDoc->createElement('a','❯');
$forwardLink->setAttribute('class','next');
$forwardLInk->setAttribute('onclick','plusSlides(1)');

$treeCard->appendChild($previousLink);
$treeCard->appendChild($forwardLink);

//dots/circles
$dotCircleBox2 = $domDoc->createElement('div');
$dotCircleBox2->setAttribute('style','text-align:center');
$dotSpan1 = $domDoc->createElement('span');
$dotSpan1->setAttribute('class','dot');
$dotSpan1->setAttribute('onclick','currentSlide(1)');

$dotSpan2 = $domDoc->createElement('span');
$dotSpan2->setAttribute('class','dot');
$dotSpan2->setAttribute('onclick','currentSlide(2)');

$dotSpan3 = $domDoc->createElement('span');
$dotSpan3->setAttribute('class','dot');
$dotSpan3->setAttribute('onclick','currentSlide(3)');

$dotCircleBox2->appendChild($dotSpan1);
$dotCircleBox2->appendChild($dotSpan2);
$dotCircleBox2->appendChild($dotSpan3); //FORGOT TO APPEND THESE??
$treeCard->appendChild($dotCircleBox2);

}
}
$cardBody->appendChild($productInfoList);
$treeCard->appendChild($cardBody);
//for the forward and backwards arrow heads
$cardContainer = $domDoc->createElement('div');//needs to be appended to items-wrapper
if(!(is_null($value["treeImage2"])) || !(is_null($value["treeImage3"]))){
$cardContainer->setAttribute('class','container mt-3 slides-container');
}else{
$cardContainer->setAttribute('class','container mt-3');
}

$cardContainer->appendChild($treeCard);
$outerContainer->appendChild($cardContainer);
}
$domDoc->appendChild($outerContainer);
$htmlString = $domDoc->saveHTML();
echo $htmlString;

[/code]
//slidelogic.js
[code]let slideIndex  = 1;

showSlides(slideIndex);

//Next/previous controls
function plusSlides(slideNum){
showSlides(slideIndex += slideNum);
}

// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}

function showSlides(number){
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");

if(number > slides.length){
slideIndex = 1;
}

if(number < 1){
slideIndex = slides.length;
}
for (i = 0; i < slides.length;  i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";

}

function currentSlide(number){
displaySlides(slideIndex = number)
}

[/code]
Затем я импортирую приведенный выше файл JavaScript (slidelogic.js) и shopconnect.php в Gardenshop.php
//gardenshop.php
[code]





[*]







SPROUTY'S GARDENING SHOP

[url=./homepage.html][i][/i]Back To Homepage[/url]
[*][i][/i]
[/list]





Contains Stainless Steel:&nbsp
FSC (Forest Stewardship Council) certified:&nbsp
In Stock:&nbsp



In Stock:&nbsp
Weight (grams):&nbsp
Price:&nbsp
FSC (Forest Stewardship Council) certified:&nbsp



In Stock:&nbsp
Litres (Capacity):&nbsp
Price:&nbsp



In Stock:&nbsp
Soil Type:&nbsp
chalk
sand
loam
clay

Soil Acidity:&nbsp
acid
alkaline
neutral

Hardiness:&nbsp
hardy
tender
hardy/half-hardy

Price:&nbsp




In Stock:&nbsp
Is Biodegradable:&nbsp
Litres (Capacity):&nbsp
Price:&nbsp










[/code]
Есть файл Gardenshop.css, который я включил с помощью тега в Gardenshop.php.
Я попробовал свой код, приведенный выше, через XAMMP (рендеринг php Gardenshop.php с использованием Apache)
Я получаю следующий результат на изображении ниже. Я хотел бы знать, как заставить карты начальной загрузки 5 динамически отображаться в сетке. Динамически в том смысле, что мне не нужно жестко кодировать элементы сетки; если я хочу добавить больше данных о семенах деревьев в свою базу данных, я могу это сделать, а затем, когда веб-страница Gardenshop.php будет загружена (через локальный хост в моем браузере), она автоматически отобразит правильное количество элементов сетки (карточек).
Изображение Gardenshop.php, когда я перехожу на локальный хост и конкретную страницу с помощью XAMPP](https://i.sstatic.net/0bk8E7lC.png) 

Подробнее здесь: [url]https://stackoverflow.com/questions/79003461/editedhow-to-get-my-grid-of-bootstrap-5-treeseed-item-cards-to-render-within-m[/url]