very new to PHP to please bear with.
As you can see from my snippet of code I am simply displaying product information one line under each other then repeating the loop using while. This then obviously displays my relevant data in just one column, one under each other.
while ($row = mysqli_fetch_row($result)){
echo "<img src=\"images/album1.jpg\"/><br>"; //this will eventually show the product image
echo "$row[1] <br>"; //this shows the product name
echo "<strong>£$row[2]</strong><br>"; //this shows the product price
}
How would I go about creating a grid view, for example using columns to display my data? I presume it would be some kind of loop to be added and maybe using tables to display my data?
Any help is greatly appreciated.
you can dot this by creating div and float that div to left this will create grid view
while ($row = mysqli_fetch_row($result)){
echo "<div class='container'>";
echo "<img src=\"images/album1.jpg\"/><br>"; //this will eventually show the product image
echo "$row[1] <br>"; //this shows the product name
echo "<strong>£$row[2]</strong><br>"; //this shows the product price
echo "</div>";
}
and css
.container{
float:left;
}
you can
also set the max height and width of div
Related
I am trying to link a MySQL DB to an SVG image to dynamically change the SVG elements with Raphael JS.
I have a MySQL DB where I query using PHP and display the results in table form to an html page: (The script below works and displays the username and a picture only when the condition of the timestamp is met.)
<?php
mysql_connect("","","");
mysql_select_db("");
$res=mysql_query("select username, picture from 'table' WHERE status > UNIX_TIMESTAMP(NOW()) - 300");
echo "<table>";
if (!$res) {
die("Query to show fields failed");
}
$fields_num = mysql_num_fields($res);
echo "<h1>Table:Status</h1>";
echo "<table border='1'><tr>";
for($i=0; $i<$fields_num; $i++)
{
$field = mysql_fetch_field($res);
echo "<td>{$field->name}</td>";
}
echo "</tr>\n";
while($row=mysql_fetch_array($res))
{
echo "<tr>";
echo "<td>"; echo $row["username"]; echo "</td>";
echo "<td>"; ?> <img src=" <?php echo $row["picture"]; ?>" height="50">
<?php
How can I take the similar concept above of displaying the results in table form to an SVG image where the SVG elements will change/update only when the query condition is met?
Here is my sample SVG image with 5 elements:
<polygon fill="#B2B2B2" points="150.3,8.8 203.8,31.7 169.8,91.4 133.4,75.8 "/>
<circle id="circleT3" circle fill="#FFFFFF" cx="163.1" cy="53.6" r="7.3"/>
<circle id="circle3_1" circle fill="#CCCCCC" cx="184.5" cy="82.4" r="7.3"/>
<circle id="circle3_5" circle fill="#CCCCCC" cx="136.6" cy="27.2" r="7.3"/>
<circle id="circle3_4" circle fill="#CCCCCC" cx="166.4" cy="7.3" r="7.3"/>
Can someone point me to some sample code or tutorial? Or is there a better way to do this? Thanks.
EDIT:
In MySQL DB I have a column for username, password and timestamp. When a user logs into webpage the timestamp updates. The PHP code above is used to query who has logged within 5 minutes ago from current time.
What I would like to do with this information with SVGs is create a graphical representation of the login.
So each username will have their own SVG element (a circle) associated with them and when they log in/out, that SVG element (code above) will change color.
Right now I do not know how to link the username with my SVG elements so the SVG element will dynamically update like my table I query from MySQL when the timestamp changes.
The answer will depend on further information that isn't really available until the rest is written.
You could combine Snap (to modify existing inline SVG or create it) or Raphael (to create new SVG only, you can't use it to modify inline SVG), or another SVG library of choice (eg svg.js or jquery.svg maybe).
Assuming you already have something to use on the page, that is showing the logged in user, you could do something like in pseudocode...
loop user;
if( document.getElementById( userId ) ) Snap('#' + userId + '_image').attr({ fill: 'green' });
(The svg reference may be the same as the circles, but somewhere you would need some type of lookup to know which circle is which userid)
This assumes the svg is on the page. If its not, you could create it with
paper.circle(x,y,r).attr({ fill: 'green' });
If you want it dynamic (so status changes without a refresh), you may need to tie ajax calls to get status from the mysql db, but if you already have a user name displaying on the page, I'm assuming that is already taken care of.
I have successfully update the svg element color to when the user logs in, the corresponding circle will change color. So I have my svg code from illustrator. I then put in this script in my php file:
window.onload = function () {
if(document.body.innerHTML.toString().indexOf('username') > -1){
circle1_1.setAttribute("fill", "yellow");
};
};
Whenever a user logs in, the info is populated on the table in the html from the MYSQL query and the script looks to see if that username is on the page and if it is, change color of SVG element.
So it basically links the SVG element to any value/variable.
Not the prettiest code or logic out there but for anyone else doing something similar, enjoy.
I am trying to get my image to display when clicked via the link. However when I click on the link it finds the image id as displayed in the url link ok but does not display any image. Can you please help?
<?php
//sets up thisPage
$pageSize=10;
if (isset($_POST["thisPage"])) $thisPage=$_POST["thisPage"];
else $thisPage=1;
//selects all distinct expenses that have been uploaded
$dbQuery="SELECT * FROM images WHERE user_id = '$userID' ";
$dbResult=mysqli_query($db_connection, $dbQuery) or die(mysqli_error($db_connection));
echo "<table cellspacing=\"5\" class=\"recordsTableBG\"> <thead
class=\"recordsTableHeader\">";
echo '<tr> <th>ID</th><th>Amount</th><th>Description</th><th>Filename</th>
<th>Project ID</th><th>Status</th></tr></thead>';
echo '<tr class="alternateRowColor">';
'<tr>';
while ($dbRow=mysqli_fetch_array($dbResult)){
echo "<img src = 'uploaded/$image' width = '200' height = '200'>";
// display row with expense
echo '<td>'. $dbRow['id'] .'</td>';
echo '<td>'. $dbRow['user_id']. '</td>';
echo '<td><a href='.$_SERVER['PHP_SELF'].'?imageid='.$dbRow['id'].'>
Click here to view image</a></td>';
}
echo "</table>";
echo "</form>";
?>
<!-- add submitt button
close form -->
</div>
You have a mixture of two approaches going on here, and that's where the confusion lies.
First, notice your
<img src='uploaded/$image' width = '200' height = '200'>
The browser is going to see something like
<img src='uploaded/picture_of_cat.jpg' width='200' height='200'>
and render a 200px by 200px image of a cat. I'm assuming that's your thumbnail. (As an aside, I notice that it's not enclosed in <td></td> even though it's in the table row).
In another part of the table, you have
<a href='.$_SERVER['PHP_SELF'].'?imageid='.$dbRow['id'].'>Click here to view image</a>
which is going to render as something like
<a href='http://example.com/index.php?imageid=1234'>Click here to view image</a>
When the user clicks that link, it's going to make a GET request to the server with imageid equal to 1234. What is the server going to do with that imageid? In the code you've posted, nothing.
You have two choices:
if you want to keep the link as it is, you'll have to write some code that will take the imageid value, find the appropriate image, and return it to the browser as image data - that means setting the appropriate headers and sending the data back as binary data.
the simpler way to do it would be to replace the URL in the link with the same one you have in your <img> tag - when the user clicks on it, the server will just return the image.
I have an image gallery displaying all photos from my file directory with php. I have defined what type of file to use etc but the main line of code is as below:
echo '<img src="'.$dir.'/'.$file.'" alt="'.$file.'" width="600px" />';
I know by changing the width=" " above I can alter how many images I have in a row but if i had a drop-down box, with options stating how many columns i want the photos displayed in and a button to refresh the page to show the columns option i have selected.
So for example: I select a drop down option "15 columns" and hit the refresh button, the page should then refresh and the images be redisplayed in columns of 15. How would i go about this?
You should be using HTML Tables for it. Anyhow here is how you should do it.
$allowed_per_line = $_GET['columns'];
$counter = 0;
while($image = fetch...) {
$counter++;
echo "<img src='{$dir}/{$file}' alt='{$file}' />";
if($counter==$allowed_per_line) {
echo '<br />';
$counter=0;
}
}
I got a bunch of images (225 in total). Example of their names:
4n27e.png
4n28e.png
4n29e.png
4n30e.png
5n12e.png
5n25e.png
5n26e.png
5n27e.png
5n28e.png
I need to form one big picture out of all these images. For example first line of images would be 4n27e (2nd image 4n28e, 3rd image 4n29e and so on). Second line of images would start from 5n12e (2nd image 5n25e and so on). What methods do i need to search for to solve this?
Note: i need to do this only with php and maybe some javascript.
Test case for logic, you can replace the echo with an img tag, and /or use div.
<?php
$images=array();
$images[]="4n27e.png";
$images[]="4n28e.png";
$images[]="4n29e.png";
$images[]="4n30e.png";
$images[]="5n12e.png";
$images[]="5n25e.png";
$images[]="5n26e.png";
$images[]="5n27e.png";
$images[]="5n28e.png";
echo "<table border='1'>";
$oldIndex=0;
$row=1;
foreach($images as $image)
{
if(substr($image,0,1)!=$oldIndex)
{
if($row>1){echo "</tr>";}
echo "<tr>";
$oldIndex=substr($image,0,1);
$row++;
}
echo "<td>$image</td>";
}
echo "</table>";
?>
I have been working on a project but I have reached a point where I am stuck. I have a database that contains the the working status of some mahcines. The values for the status go from 1-5. I need to be able to display a different image for each machine in a webpage based off of the value that appears in the database for that Mahcine. I am drawing a big blank on how to do this. Im using a MySQL DB and everything is written in PHP.
Basically it this. If a machine has a status value of 1 then it shows a green image. If the value is 2 then it would be yellow and so on. . .
Hope you guys can help
You can try something like this:
// your mysql select, wich contains the machine data.
$query = mysql_query("select the data about machines...");
// you iterate on the result set and fetch each row to $data
while($data = mysql_fetch_array($query))
{
switch($data['machine'])
{
case "machine type 1": // you can put integer values here as well, like case 1:
echo '<img src="first_machine.jpg" alt = "first machine" />'
break;
case "machine type 2":
echo '<img src="second_machine.jpg" alt = "second machine" />'
break;
default: // undefinied
echo '<img src = "undefinied.jpg" alt = "undefinied" />'
}
}
Don't use the img tag, instead create a div for which you apply a style class same as the machine status value
<div class="machine status<?php echo $status;?>" ></div>
now in your css,
.status1{
background-image:url(red.jpg);
}
.status2{
background-image:url(green.jpg);
}
.status3{
background-image:url(jpg.jpg);
}
.machine{
width:50px;
height:50px;
}
Ok you can't display multiple images within a image/jpeg page...
You're telling the browser that the page is image/jpeg (in other words, the page is AN IMAGE) but you're echoing out multiple image data
You should rather use the gallery page to show all images like this:
<?php
// $images = result from database of all image rows
foreach ($images as $img) echo '<img src="img.php?id='.$img["id"].'">';
?>
and in img.php:
// Load the image data for id in $_GET['id'];
header("Content-type: image/jpeg");
echo $data;