PHP - shop - help

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Simsenomis
Forum Newbie
Posts: 5
Joined: Sat Jun 30, 2012 11:24 am

PHP - shop - help

Post by Simsenomis »

I've made a image gallery with thumbnails and pictures. The thumbnails are under the picture in a horizontal line - that's how I want it.
And I would like to make a simple PHP-shop out of it where you can select the products by clicking on the large images and not the thumbnails or there could be a button under the picture. Can one do that?

Here is the code - made in javascript:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>xhtml-test</title>
	<meta http-equiv="content-type" 
		content="text/html;charset=utf-8" />
  <style type="text/css"> 
   div {cursor:pointer} 
   div img {width:50px} 
   #vis img{width:500px} 
</style> 

</head>

<body onload=vis2();>
	<script type="text/javascript">
	function vis2() {
	document.getElementById('vis').innerHTML='<img src="blomstto.jpg" alt="billede2" />';
	}
	</script>
	
	
	<div id="vis"></div>
	<table>
		<tr>
			<td>
<div onclick="document.getElementById('vis').innerHTML=this.innerHTML" > 
   <img src="blomst.jpg" alt="billede1" /> 
</div> </td>
			<td>
<div onclick="document.getElementById('vis').innerHTML=this.innerHTML" > 
   <img src="blomstto.jpg" alt="billede2" />
</div> </td>
			<td>
<div onclick="document.getElementById('vis').innerHTML=this.innerHTML" > 
   <img src="gul_blomst.jpg" alt="billede3" /> 
</div>  </td>
		</tr>
	</table>



</body>
</html>
Last edited by califdon on Sat Jun 30, 2012 7:40 pm, edited 3 times in total.
Reason: Moderator moved topic to Javascript forum and added syntax=javascript tags to make code readable. Note to poster, please always do this.
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: PHP - shop - help

Post by califdon »

I moved your topic to Javascript, then realized that you are asking how to write a PHP script to achieve the functionality you described, even though there is no PHP code in the script that you showed.

As you have described it (or as I understand what you have described), there isn't any need to use PHP at all. If you are just dealing with user choices and display, that must all be done with Javascript, so your question should be "How do I write Javascript code to display a full-size image when the user clicks on the corresponding thumbnail, and then how do I know when the user has clicked on the full-size image?" If that is indeed your question, this is an HTML/Javascript question.

Briefly, you must write a Javascript function that requires an argument that relates to the name of the appropriate full-size image, and changes the src= attribute of the <img ... /> tag where you want the full-size image to appear and changes the onClick event of the full-size image to relate to the new content of the <img tag. The function you have there doesn't do that. There are a lot of ways that you might do that, depending on what you want to do next, but here's a rough idea, although I haven't tested it:

Code: Select all

...
function zoom(n)
{
   var fullsize = document.getElementById("full")
   fullsize.src = "product"+n+".jpg"
   fullsize.onClick = alert("User has chosen product"+n)
}
...
...
   <div id="full"><img src="" alt="" /></div>
   <table>
        <tr>
            <td>
                <div onclick="zoom(1);" >
                     <img src="product1-th.jpg" alt="billede1" />
               </div>
           </td>
            <td>
                <div onclick="zoom(2);" >
                     <img src="product2-th.jpg" alt="billede2" />
               </div>
           </td>
            <td>
                <div onclick="zoom(3);" >
                     <img src="product3-th.jpg" alt="billede3" />
               </div>
           </td>
       </tr>
    </table>
Of course, that's hard-coded, so in most cases you might want to draw your data from a database, so you could revise and add products without rewriting your script; that's where you would need PHP. Basically, the PHP would interact with the database and generate code similar to the above, based on data in the database. By the time the web page reaches the user, however, there is no way to tell if it was originally hard-coded or generated by PHP.

Also, you might not like the idea of naming all your product images "product25.jpg", etc. You would need to do something more complicated to use other filenames. And you would certainly want to send the user's choice back to the server and establish an order, collect payment, etc. These are not small projects. But the Javascript part of it, clicking on a thumbnail to display a full-size image, is illustrated by the above.
Simsenomis
Forum Newbie
Posts: 5
Joined: Sat Jun 30, 2012 11:24 am

Re: PHP - shop - help

Post by Simsenomis »

Thanks... well I just thought it could be smart to put javascript and php together. Make a imagegallery with shop function. I'm studying Multimediedesign and communication right now. And we need to make things in PHP.
I will try to use your code to see if it work..
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: PHP - shop - help

Post by califdon »

Simsenomis wrote:Thanks... well I just thought it could be smart to put javascript and php together. Make a imagegallery with shop function. I'm studying Multimediedesign and communication right now. And we need to make things in PHP.
I will try to use your code to see if it work..
PHP and Javascript are 2 insanely different kinds of languages. They can be used together, in the sense of handing data off from one to the other, but you need to establish a very firm concept: PHP executes on the server and is never seen by the browser (barring a coding error on your part), so it cannot possibly detect what the user is doing, while Javascript executes in the browser and has no access to server assets (except by requesting them from the server in an AJAX request). If you fix that concept in your mind, you'll avoid the confusion that beginners often have.
Simsenomis
Forum Newbie
Posts: 5
Joined: Sat Jun 30, 2012 11:24 am

Re: PHP - shop - help

Post by Simsenomis »

Yes
I'm a beginner actually... he he you can tell..
But I'm trying to understand the code. In this education well they want us to make good projects though we haven't learned enough. So we have to figure out for ourselves what to do...
But I know javascript runs on the client and PHP runs on the server.
Maybe if I made a PHP-shop with CSS and HTML and somehow make a gallery. And then use a Mysql database and make a admin page where I can input pictures/products instead of sessions and arrays. But I haven't learned that yet. I comes here on 3. semester. But I think I will try on my own...
Simsenomis
Forum Newbie
Posts: 5
Joined: Sat Jun 30, 2012 11:24 am

Re: PHP - shop - help

Post by Simsenomis »

Actually I'm not making it on my own for real. I have someone to help me. But it's difficult...
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: PHP - shop - help

Post by califdon »

Yes, it is difficult, but so is almost everything that is worth doing. Just hang in there and keep studying and practicing.

I'm not acquainted with the term "PHP shop", but I assume it means a website that offers retail products for sale. You can't do that without using PHP (or equivalent language, such as .NET for Microsoft server environments) because you have to store product information, customer information, sales transaction information, etc. in a database on your server. Absolutely the FIRST thing you must do is draw a diagram of what you need to do on the server, and what you need to do in the browser. That will show you what must be done with PHP on the server and what must be done with HTML and Javascript in the browser. Until you do that, it's impossible to start writing scripts.

Good luck with your studies.
Simsenomis
Forum Newbie
Posts: 5
Joined: Sat Jun 30, 2012 11:24 am

Re: PHP - shop - help

Post by Simsenomis »

Thanks...
Yes a shop is something where you can buy something from a catalogue...
something for sale as you replied.
Post Reply