I am trying to create a grid container that will dynamically display bootstrap cards of treeseed items that I added to MySQL database.The items should be displayed on the shop portion of a webpage I am making for arboretum I can make a connection to the database and get data back but from the moment I included DOMDocument elements within the code I have not got the expected output.
//shopconnect.php
$domDoc = new DOMDocument();
function generateTreeCard(){
// global $domDoc;
$topicDiv = $GLOBALS['domDoc']->createElement('div');
$topicDiv->setAttribute('class','tree-card'); //tree-card div is to be appended to the container mt-3
return $topicDiv; //DONE ALREADY AT END OF THE 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);//needs to be appended on to card body
$cardTitle->setAttribute('class','card-title');//needs to be appended on to card body
return $cardTitle; //ALREADY DONE IN THE LOOP BELOW
}
function generateInfoText(){
$information = $GLOBALS['domDoc']->createElement('p','Information:');
$information->setAttribute('class','info-text:');
return $information; //DONE ALREADY IN LOOP BELOW VIA INFO PARAGRAPH VARIABLE
}
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 <ul>
}
$outerContainer = $domDoc->createElement('div');
$outerContainer->setAttribute('class','items-wrapper');
$productInfoList = $domDoc->createElement('ul');
$listElementResult = "";
$imgCollectorArr = [];
$h4Text = "";
$cardBody = "";
$treeCard = "";
$treeImage1 = "";
$infoParagraph = "";
$cardContainer = "";
portion of code causing issues (shown below) is the nested foreach loop. I am using the functions above to create the DOM elements necessary to build the bootstrap cards (items) dynamically.
foreach($treeSeedArr as $key => $value){
$infoParagraph = generateInfoText(); //Just to display "Information:"
foreach($value as $key1 => $value1){
echo $key1 . " has a value of " . $value1 . "<br/>";
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 <ul> 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);
$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;
//gardenshop.php (I require once shopconnect.php)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Jacob">
<link rel="stylesheet" href="./gardenshop.css">
<link rel="icon" href="../tree_icon.png">
<script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- <script src="./slidelogic.js"></script> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<header>
<div class="img-container"></div>
<section class="shop-header"><h1>SPROUTY'S GARDENING SHOP</h1></section>
<ul class="header-grp">
<li class="header-item"><a id="back-link" href="./homepage.html"><i id="header-arrow" class="fa-solid fa-arrow-left-long"></i>Back To Homepage</a></li>
<li class="header-item"><i class="fa-solid fa-cart-shopping"></i></li>
</ul>
</header>
<main>
<div class="f-container">
<div class="box-1">
<dl>
<dt class="inline-dt">Contains Stainless Steel</dt>: <input type="checkbox" class="filter-checkbox" id="tool_stainlessstl" name="tool_stainlessstl"/>
<dt class="inline-dt">FSC (Forest Stewardship Council) certified</dt>: <input type="checkbox" class="filter-checkbox" id="tool_fsc_cert" name="tool_fsc_cert"/>
<dt class="inline-dt">In Stock</dt>: <input type="checkbox" class="filter-checkbox" id="tool_stock" name="tool_stock"/>
</dl>
</div>
<div class="box-2">
<dl>
<dt class="inline-dt">In Stock</dt>: <input type="checkbox" class="filter-checkbox" id="giftcard_stock" name="giftcard_stock"/>
<dt class="inline-dt">Weight (grams)</dt>: <input type="range" min="0" max="50" id="giftcard_weight" name="giftcard_weight"/>
<dt class="inline-dt">Price</dt>: <input type="range" min="0" max="30" step="0.01" id="giftcard_price" name="giftcard_price"/>
<dt class="inline-dt">FSC (Forest Stewardship Council) certified</dt>: <input type="checkbox" class="filter-checkbox" id="giftcard_fsc_cert" name="giftcard_fsc_cert"/>
</dl>
</div>
<div class="box-3">
<dl>
<dt class="inline-dt">In Stock</dt>: <input type="checkbox" class="filter-checkbox" id="fertiliser_stock" name="fertiliser_stock"/>
<dt class="inline-dt">Litres (Capacity)</dt>: <input type="range" min="10" max="60" id="fertiliser_capacity" name="fertiliser_capacity"/>
<dt class="inline-dt">Price</dt>: <input type="range" min="0" max="20" step="0.01" id="fertiliser_price" name="fertiliser_price"/>
</dl>
</div>
<div class="box-4">
<dl>
<dt class="inline-dt">In Stock</dt>: <input type="checkbox" id="treeseed_stock" name="treeseed_stock"/>
<dt class="inline-dt">Soil Type</dt>: <select name="soiltypes" id="soiltypes">
<option value="chalk">chalk</option>
<option value="sand">sand</option>
<option value="loam">loam</option>
<option value="clay">clay</option>
</select>
<dt class="inline-dt">Soil Acidity</dt>: <select name="soilacidity" id="soilacidity">
<option value="acid">acid</option>
<option value="alkaline">alkaline</option>
<option value="neutral">neutral</option>
</select>
<dt class="inline-dt">Hardiness</dt>: <select name="hardiness" id="hardiness">
<option value="hardy">hardy</option>
<option value="tender">tender</option>
<option value="hardy/half-hardy">hardy/half-hardy</option>
</select>
<dt class="inline-dt">Price</dt>: <input type="range" min="0" max="4" step="0.01" id="treeseed_price" name="treeseed_price"/>
</dl>
</div>
<div class="box-5">
<dl>
<dt class="inline-dt">In Stock</dt>: <input type="checkbox" id="compost_stock" name="compost_stock"/>
<dt class="inline-dt">Is Biodegradable</dt>: <input type="checkbox" class="filter-checkbox" id="compost_degradable" name="compost_degradable"/>
<dt class="inline-dt">Litres (Capacity)</dt>: <span><input type="range" min="0" max="280" id="compost_capacity" name="compost_capacity"/>
<dt class="inline-dt">Price</dt>: <input type="range" min="0" max="20" step="0.01" id="compost_price" name="compost_price"/>
</dl>
</div>
</div>
<?php require_once './shopconnect.php'; ?>
<script type="text/javascript" src="./slidelogic.js"></script>
</main>
</body>
</html>
I added conditional if statements inside the nested foreach loops to create bootstrap cards that could hold a standalone treeimage or more than one treeimage in which case each card would have a slideshow.
Unfortunately the output is the following and the console in my Chrome browser shows no errors:
