I've made a whatsbetter.com style web page.

Miscellaneous and Personal Stuff I Must Share
1

Using PHP.

It is really just an experiment in learning PHP. The rating system isn’t the best.

Basically ever time you click on one of the images two things happen.

Two more random images are presented to you.

A record is created in a pairings table for the two previous images. The one that won gets its ‘won’ score incremented. The one that didn’t doesn’t.

I hope to build on it and improve the rating system (helpful suggestions are welcome) but I don’t forsee it becoming a full blown replacement for whatsbetter.com (in its original form) as there are probably massive copy write issues involved.
Silly arse: I forgot to include the link!
notails.com - photography - Isle of Man

2

I don’t see any images. I can still vote though.

3

Damnit. I should test on multiple browsers. It works in firefox.

4

Clever coding.

Inevitable critique: you could do with using a PHP thumbnailing routine to shrink the images - they’re feckin huge. Also all your animated stuff seems to be distorted - mashed up aspect ratio all over the shop. Would be good to see the top 10 too.

ETA: worked in Chrome from the UK.

5

I’m frantically trying to ‘fix’ it in ie so it’s probably going to keep breaking in different ways on different browsers as I try to fix it.

At the moment I’m trying the ‘auto’ css property for height, but it’s having no effect.

When I built it in firefox the aspect ratio on images and gifs was maintained.

ETA: I’ll probably work out how to do the thumbnailing tomorrow.

6

I don’t think “auto” works for height. It’s usually used for margin alignment.

If you specify only a single dimension, the other will automatically be in the correct ratio.

7

Apparently not in IE. That’s why it doesn’t work in IE.

8

Sorry, forgot to tell you what browser I am using. IE 8.

9

Advice:

You should not use URL GET parameters to record the votes for the images. A GET should never alter data in any way, because they can be bookmarked, copied-and-pasted, and crawled by robots.

So the proper way to do this is with a POST. But since you’re not using form inputs, you have to cheat a little to make the image links execute a form POST. The way you do that is by using some hidden inputs and a bit of Javascript.

Something like:



<script type="text/javascript">
function vote( winner, loser ) { 
    document.getElementById('winner').value = winner;
    document.getElementById('loser').value = loser;
    document.getElementById('voteform').submit();
}
</script>

<form method="POST" id="voteform">
<input id="winner" value="" type="hidden" />
<input id="loser" value="" type="hidden" />

<a href="javascript:vote( 1, 2 )"><img src="img1.jpg" /></a>
<a href="javascript:vote( 2, 1 )"><img src="img2.jpg" /></a>
</form>
10

Not your fault. Mine for not testing on multiple browsers. I should know better I’m the friggin website content manager for an international gambling website. :slight_smile:

11

Thanks, will try and incorporate that tomorrow.

12

Anyone got any experience with phpthumb? I’m having trouble getting it to work. the main site isn’t very helpful. I have uploaded it to my website and changed my urls acordingly…

src="…/phpThumb.php?<?=$file2?>&w=200"

(where file2 evaluates to the real valid filename)

but it doesn’t work.

I’ve tried several different things. Some produce a picture but it’s a picture of an error message saying ‘forbidden value’ in phpthum-config.php)

I’ve tried moving the phpthumb files around…

I first put them in public_html/phpthumb

then I moved them to the next folder down.

then I moved the files out of the ‘phpthumb’ folder into the root.

to no avail.

How the frigg do I use this thing?

13

I’m not familiar with it, but are you missing a bit of your query there? Shouldn’t it be file=<?filevar?>&w=200?

Also, what does your source spit out as the src when you load the page?

14

Until you get PHPthumb working, I can promise you that “img width=100% height = 100%” isn’t going to work. For a start the spaces meant that the height attribute aren’t going to be recognised. I’ve never seen a % used in an image either. Just leave out the height and width altogether and it will default to the image’s natural size.

15

I think I just misquoted my code, because here is the line…

<table width = 70% ><tr><td width= 50% ><a href=“whatsbetter.php?winner=<?=$random1?>&loser=<?=$random2?>”><img width=100% height = 100% src="…/phpThumb.php?=file<?=$file1?>&w=200" ></a></td><td width= 50% ><a href=“whatsbetter.php?winner=<?=$random2?>&loser=<?=$random1?>”><img width=100% height = 100% src="…/phpThumb.php?=file<?=$file2?>&w=200" ></a></td></tr></table>

this is what the php spits out…

<table width = 70% ><tr><td width= 50% ><a href=“whatsbetter.php?winner=5&loser=9”><img width=100% height = 100% src="…/phpThumb.php?=fileimages/nomming.gif&w=200" ></a></td><td width= 50% ><a href=“whatsbetter.php?winner=9&loser=5”><img width=100% height = 100% src="…/phpThumb.php?=fileimages/044_405_1164875529.jpg&w=200" ></a></td></tr></table>
aaaaand therein I see the problem! BRB

16

Right. I got it working. But anigifs don’t animate, and if anything the page loads slower.

17

Incorporated! Thanks very much for the code/help :slight_smile:

18

There was a bug. Have now fixed.

19

Another question for you fine expert people…

I have some upload code which I will add tomorrow. I find input sanitization to be a dark art so I have difficulty understanding the waffle about it. I have had the idea to ‘sanitize’ my uploader by adding the following to the filename input… “readonly=true”. It seems to work. I can pick a file but I can’t in any way edit the contents of the box.

My question is, could some unscrupulous person inject SQL by actually creating a file with a carefully designed filename (and also another file with the ‘valid’ filename so that the upload doesn’t break) such that he or she (probably he) could sucessfully inject sql into my database?

And another question… If I don’t place much value on the database or contents thereof does it really matter? Could an SQL injection do anything more than just mess with my DB?
And finally. Here’s my code. Much of it is someone else’s (downloaded off the internet). So you can peruse it and see if anything stands out as being wrong…



<?
if($_POST["action"] == "Upload Image")
{
unset($imagename);

if(!isset($_FILES) && isset($HTTP_POST_FILES))
$_FILES = $HTTP_POST_FILES;

if(!isset($_FILES['image_file']))
$error["image_file"] = "An image was not found.";
$imagename = basename($_FILES['image_file']['name']);
//echo $imagename;

if(empty($imagename))
$error["imagename"] = "The name of the image was not found.";

if(empty($error))
{
$newimage = "images/" . $imagename;
$result = @move_uploaded_file($_FILES['image_file']['tmp_name'], $newimage);
if(empty($result))
$error["result"] = "There was an error moving the uploaded file.";
$con = mysql_connect("localhost",<details removed from nosey or naughty people>);
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("notailsc_pairs", $con);

mysql_query("INSERT INTO pending (filename) VALUES ( '$newimage' )");

echo "INSERT INTO pending (filename) VALUES ( '$newimage' )";

mysql_close($con);

}

}

?>
<form method="POST" enctype="multipart/form-data" name="image_upload_form" action="<?$_SERVER["PHP_SELF"];?>">
<p><input type="file" name="image_file" readonly=true size="20"></p>
<p><input type="submit" value="Upload Image" name="action"></p>
</form>

<?
if(is_array($error))
{
while(list($key, $val) = each($error))
{
echo $val;
echo "<br>
";
}
}
?>

afterthought: As you may guess from the code, I have made this a ‘moderated’ upload. In other words the data goes into a table called ‘pending’ which I will check manually, and either approve or delete.

20

I’ve added the uploader. (it’s a small texted link underneath the main pictures)