MYSQL Product listing grid - php

So i am trying to pull product data from a database and have it listed out in a nice grid. I have got everything to work and its layout is very nice apart from one issue, the image URL isnt pulling properly:
<?php
while ($row = mysql_fetch_array($query))
$rows[] = $row;
foreach ($rows as $row){
$etitle = $row['title'];
$eprice = $row['price'];
$eurl = $row['prod_url'];
$eimage = $row['image'];
echo ('<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-image" style="background-image: url("' . $eimage . '");">
<div class="card-image-rating">');
echo ('£' . $eprice);
echo ('
</div><!-- /.card-image-rating -->
</div><!-- /.card-image -->
<div class="card-content">
<h2><a href="' . $eurl . '">');
echo $etitle;
echo ('</a></h2>
</div><!-- /.card-content -->
<div class="card-actions">
<i class="md-icon">favorite</i>
Show More
</div><!-- /.card-actions -->
</div><!-- /.card -->
</div><!-- /.col-* -->');
} ?>
In the source code and on page everything look good apart from their being no image. The column in the database has a URL of the image location in it but in the source code it appears to be removing the / from the path.
Any help would be amazing.
Thanks,

Based on your script, I noticed something goes wrong
<div class="card-image" style="background-image: url("' . $eimage .'");">
you use double quotation marks in style section
your html will look like this
<div class="card-image" style="background-image: url(" ");">
which is shouldn't be like that.
you have to use Apostrophe inside style, since u use quotation mark for style
your html should like this
<div class="card-image" style="background-image: url(' ');">
here, an example for you
https://jsfiddle.net/have_full/kass6ukr/

Related

<pre> tag messing with UI

I returning my data to build a list group. All is fine but when the data contains <pre> tag it messes my display.
My list group as follows.
if (isset($BS_array)){
//Create a list group to show results
echo '<div class="list-group">';
foreach($BS_array as $result){
?>
<!-- Build list group -->
<div class="list-group-item list-group-item-action" aria-current="true">
<div class="d-flex w-100 justify-content-between">
<!-- Incident number goes here -->
<h5 style="cursor: pointer;" id="<?php echo $result['number']; ?>" onclick="getINCDetails(this.id)" class="mb-1"><?php echo $result['number']; ?></h5>
</div>
<!-- Description goes here -->
<p class="mb-1"><?php echo $result['description']; ?></p>
<small>
<?php
//List BS in INC card
echo $result['state'];
?>
</small>
</div>
<?php
}
echo '</div>';
}
?>
The way when all goes ok should be like this.
But at times, $result['description'], contains the word <pre>, which messes things up.
It will look like this.
How do I fix/circumvent this problem?
If you dont require html tags to actually work on the description just use htmlentities():
<?php echo htmlentities($result['description']); ?>
That will actually show instead of the browser considering it html tag.

Javascript not working in PHP foreach?

I'm using this code to get a maximum of text in a p tag. For one reason this code only runs on the first card in my foreach but not on the second.
Here you see the problem: https://gyazo.com/c3ef858fb233b21b31098fb1682a7ce4
Here is my javascript code:
<script>
function truncateText(selector, maxLength) {
var element = document.querySelector(selector),
truncated = element.innerText;
if (truncated.length > maxLength) {
truncated = truncated.substr(0,maxLength) + '...';
}
return truncated;
}
</script>
[PHP CODE]
<?php
$stmt = $conn->prepare("SELECT naam, prijs, beschrijving, id, image1 FROM salontafels");
$stmt->execute([]);
$rows = $stmt->fetchAll();
foreach ($rows as $row) : { ?>
<a class="formtitellink" href="productsalontafels.php?rowid=<?= $row['id'] ?>">
<?php } echo '
<div class="col-lg-4 col-md-6 mb-4">
<div class="card h-100">
<img class="card-img-top" src="data:image/jpeg;base64,' . base64_encode( $row['image1'] ) . '" />
<div class="card-body">
<h4 class="card-title">
' . $row['naam'] . '</a>
</h4><script> document.querySelector(\'p\').innerText = truncateText(\'p\', 100);</script>
<h5> Log in voor de prijs </h5>
<p class="card-text">' . $row['beschrijving'] . '</p>
</div>
<div class="card-footer">
<small class="text-muted">beschikbaar</small>
</div>
<!-- /.row -->
</div>
<!-- /.col-lg-9 -->
</div>'?>
Does anyone knows what is wrong?
Your problem is that document.querySelector('p') returns the first Element within the document that matches the specified selector. So it just returns the first p tag every time it's run.
This means that these two lines are your problem:
document.querySelector(\'p\').innerText = truncateText(\'p\', 100)
and
var element = document.querySelector(selector)
To fix it, you will need to select the specific element you're interested in each time
[If you want working code, rather than an answer to your question, I suggest just using substr($row['beschrijving'],0,100)]

PHP Undefined index in foreach loop makes no sense

This error makes no sense. Here is the code block and my explanation below.
<?php foreach($rows as $value): ?>
<?php echo $value['authorname'] . "<br />\n";?>
<?php echo $value['title'] . "<br />\n";?>
<?php echo $value['rating'] . "<br />\n";?>
<?php echo $value['imagelocation'] . "<br />\n";?>
<div class="block">
<div class="row">
<div class="col-md-4 col-md-8">
<div class="widget-block">
<input id="rate1" value="<?php echo $value['rating'];?>" type="number" class="rating" data-max="5" data-min="0" data-size="sm" data-show-clear="false" readOnly="readOnly">
<img class="img-responsive wow fadeInLeftBig animated" data-wow-duration="1.5s" src=<?php echo $value['$imagelocation'];?> alt=<?php echo $value['$authorname'];?>>
<br>
Buy this book
</div>
</div>
<div class="col-md-6 col-md-8">
<div class="section-sub-title">
<article class="section-title-body white">
<h1 class="head-title">Author: <span><?php echo $value['$authorname'];?> -</span> <?php echo $value['$title'];?></h1>
<span class="point-line hidden-xs hidden-sm"></span>
<p>
<?php echo $value['$review'];?>
</p>
</article>
</div>
</div>
</div>
</div>
<?php endforeach; ?>
The echo statements right after the start of the foreach loop prints out each variable fine. It isn't until we get down to the html that there are issues.
This code feeds an array of data from a DB then builds blocks of html code depending on the amount of data. In this case, I am pulling 8 records so this loop creates 8 copies of this code block. The thing that is frustrating is the variable "$rating" injects in all 8 blocks but none of the other variables do even though they print correctly on the page in the echo statements.
Maybe it is the data in the variable? For example as the code is parsed the first variable evaluated is $rating and works. The next one is the src property in the img tag $imagelocation and has an actual value of img\book_covers\TrueConviction.jpg
Are _ and . special characters and causing the issue? My return values would have _ . \ and spaces.
Thanks for any help.
I was right that it was the data IN the variables. The answer was urldecode. This solved my problems. I did this to all my variables.
$cleanauthorname = urldecode($value['authorname']);?>

Php search function displaying null

Hi guys so i am just using learning php for the first time and building my own site etc to try it out. I have a database of recipes. For each recipe it has a list of ingredients. Each recipe will have different amounts. So one will have 5, the other can have 3 etc. The problem with my code is. If someone searches for a recipe and they find it, it will return the ingredients but sometimes if it has more than the divs i put there it will give some null values back. Also i understand about the sql injections etc and the bad practice but i am just playing about with it first. I want to get it to work and then fix that part later :)
PHP:
<div class="panel panel-default">
<div class="panel-heading"><b>' . htmlentities($rN, ENT_QUOTES) . '</b></div>
</a>
}
?>
Now i am pretty sure in my white loop i am suppose to do an if statement after the div tags and say if the value == null then dont display but i have tried and nothing has worked so any help on this matter would be great
Thanks
Your HTML for ingredients seems be repeating, so you can resolve the empty <div> issue and short your code using a for loop and a if condition:
$output .= '<div class="panel panel-default">
(...)
<h3 class="media-heading">INGREDIENTS:</h3>';
for( $i=1; $i < 7; $i++ )
{
if( ${"rI$i"} )
{
$output .= '<div class="food-graph">
<span class="food-graph-title">' . htmlentities(${"rI$i"}, ENT_QUOTES) . '</span>
</div>';
}
}
$output .= ' (...) ';
If encountering null values is a problem, this will only print out the ingredients that your row contains.
while($row = mysql_fetch_array($query)) {
$rN = $row['recipeName'];
$i=1;
$recipes = '';
if (isset($row['recipe_ing'.$i]) {
while(isset($row['recipe_ing'.$i]) {
$value = htmlentities($row['recipe_ing'.$i], ENT_QUOTES);
$recipes .= <<< EOT
<div class="food-graph">
<span class="food-graph-title">$value</span>
</div>
EOT;
$i++;
}
$output .= <<< EOT
<div class="panel panel-default">
<div class="panel-heading"><b>' . htmlentities($rN, ENT_QUOTES) . '</b></div>
<div class="panel-body">
<div class="pull-left col-xs-12 col-sm-4">
<a href="#">
<img class="img-thumbnail img-responsive" src="Image/green.jpg">
</a>
<a class="btn btn-success btn-block btnrec" href="#">View Recipe</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="media-body">
<h3 class="media-heading">INGREDIENTS:</h3>
$recipes
</div>
</div>
</div>
</div>
<div class="panel-footer">Rating</div>
</div>
EOT;
}
}
EDIT: Also, i'm using Heredocs to set the strings. the lines with EOT; must have no whitespace or code in front of it. it must be at the start of the line. also no code may be on the same line behind it. Else, your documents will become a huge string.

while($query->fetch()) both working and not working

I'm working on a site which displays a blog and a photo gallery, which both get all their data from a MySQL-database using the same code (see below).
<?php
include_once("sql/db_connect.php");
$query1 = $db->prepare("SELECT post_id, title, body, img, timeposted FROM blogposts ORDER BY post_id DESC");
$query2 = $db->prepare("SELECT img_id, imgsrc FROM gallery ORDER BY img_id DESC");
$query1->execute();
$query2->execute();
$query1->bind_result($post_id, $title, $body, $img, $timeposted);
$query2->bind_result($img_id, $imgsrc);
?>
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<header>...</header>
<main>
<div class="container">
<div>
<!-- Choose between tabs -->
</div>
<div class="wrapper1">
<?php
while($query1->fetch()):
?>
<div class="w3-col s12 m6">
<div class="card w3-depth-1">
<div class="cardheader">
<?php echo $timeposted ?>
<span></span>
</div>
<div class="cardmain">
<div class="cardtext">
<h1><?php echo $title ?></h1>
<p><?php echo $body ?></p>
</div>
<?php
if($img !== "NOPE") {
echo "<img src='uploads/" . $img . "' class='blogimage' />";
}
?>
</div>
</div>
</div>
<?php endwhile?>
</div>
<div class="wrapper2">
<?php
while($query2->fetch()):
?>
<div class="w3-col s12 m6">
<?php echo "<img src='uploads/" . $imgsrc . "' class='galleryphoto' />"; ?>
</div>
<?php endwhile?>
</div>
</div>
</main>
<footer>...</footer>
</body>
The div "wrapper1" is used for the blog, "wrapper2" for the gallery and at the top of the page there is a button which lets you switch between views (using jQuery). So on default, wrapper1 is displayed, but on clicking the button it will switch to wrapper2.
Now, my problem: in wrapper1, all blogposts are displayed, but in wrapper2, none of the pictures stored in the database are displayed at all.
And, before you ask, yes, the table is actually called "gallery" and the values are actually called "img_id" and "imgsrc". I guess I've checked that about ten times already.
When I placed "echo 'Hello World';" before the second while loop, the page said Hello World, but when I placed it in the while loop, the page still didn't display anything; that said, it shouldn't be the jQuery, I guess.
I hope that anybody can point out what I'm doing wrong. Thanks in advance! If there's any additional data / code you need to have, I'd be happy to provide that.

Categories