form to php script question

endersix

Hi All,

I've got a newb type question but didn't know which forum to post it in.

I'd like to use an HTML form to display an image. When the user clicks on the image in the catalog, I'd like to be able to open a page to display both the front and the back of the image in a generated html.

1) can I do this with PHP? Or, would I be able to do it more easily using Javascript or CGI?

2) I'd like to pass the base name of the file on submit (e.g. IMAGENAME). Then in whatever script, I'd need to construct the IMAGENAME_F.jpg and IMAGENAME_B.jpg and place them in and display the HTML.

Any sample code, examples I could learn from, or easier solutions would be appreciated. Thanks in advance for any help.

etully

There are at least a dozen ways to approach this. This is the most basic method and it's a good place to start.

First, you are going to need to show the "catalog" page. This is the page that shows all the thumbnails of the images that people can see. If your images aren't going to change often, then you might simply hardcode this page once and be done with it. If the images are going to change often, then you might have a database with all the image names.

So that we can do one thing at a time, let's assume that you are going to build your catalog once and not change it very often. In that case, your catalog page might show your thumbnails like this:

Of course, you really want those to be links to the next page. And you will want the next page to know which image they clicked on so you will embed a variable in the link. The variable gets passed to the next page so that the next page can read the variable's value and know which image was clicked. So your catalog page will really look more like this:

Notice that in all of those links, they all point to the same page (page2.php) but they are each passing a different value for the variable "x". Now the user can click any of those images that they want and "x" will have some value on the next page.

So then your script called "page2.php" will look like this:

<?php
// The next line receives the value of "x" and puts it into a PHP variable called $x
$x = $_REQUEST['x'];

// Now, we always validate the data to make sure the user didn't alter the data
if ($x < 1) { exit; } // This checks to see if X is less than one
if ($x > 4) { exit; } // This checks to see if X is greater than four
if (floor($x/10)*10 != $x) { exit; } // this checks to see if X is an integer

// If we got this far, then we know that $x is 1,2,3, or 4
// Now we can use that value to display the appropriate images

$filename1 = "front-" . $x . ".gif" ;
$filename2 = "back-" . $x . "gif" ;

print "Front: ";
print "<img src=\"images/$filename1\">";

print "Back: ";
print "<img src=\"images/$filename2\">";

This works because it assumes that you have named your files like this:

/thumbs/image1.gif
/thumbs/image2.gif
/thumbs/image3.gif
/thumbs/image4.gif
images/front-1.gif
images/back-1.gif
images/front-2.gif
images/back-2.gif
images/front-3.gif
images/back-3.gif
images/front-4.gif
images/back-4.gif

The basic gist of the script is that it takes the variable (X) and makes two filenames and then prints out some HTML with those filenames.

Of course, there are dozens of ways to improve this script but understanding this version is a good first step.

endersix

Thanks for the start. I'm sure I'll have another question, but at least I've got something to work with.

jmh09

I just wanted to say, I thought I knew a decent amount about this stuff, and I didn't know about manually passing variables like that. Thanks etully!

etully

np 🙂