使用计数器和不同数据重新加载页面的一般原则

The website I need to implement is for a simple user study: On a page there are some images shown, the user rearranges them to a certain order, hits the 'next' button and then the same page is shown again, just with different images, which the user rearranges again. The process is repeated until a certain page count is reached.

Which images to show, comes from a mysql database and the user arrangements for each page need to be stored in the database as well. I have decent code for the database communication and logic of the image arrangements in php. The ordering functionality of the images works nicely with javascript and jquery.

What is completely throwing me off now, is bringing it all together and the 'save and reload the page with different images' mechanism. Of course I found loads of information on the internet but I just can't bring it together (I am a noob with javascript and that stuff is seriously making my head hurt).

My question:

• How do I implement a page, with a page counter, which is increased when I press a button; pressing the button also triggers sending the data to php for putting it in the database and also reloads/updates the page with a different image selection based on the page counter to re-start the process.

I would be most greatful for all: from explaining the general principles to specific code examples. I just need to make this thing work :). Thanks!

1. You need a < form method=POST > tag which wrapps all your images
2. For each image you need a < input type="hidden" > tag which stores the image id. This tag must be resorted with the images as well.
3. Resorting must change the position in the DOM
4. you need a submit button as well
5. On server side you can access the submitted data with $_POST variable in same sorting as in the DOM
6. You can count the number pages in $_SESSION variable or send the counter as GET variable with the page url

This is only a short overview, i hope this helps you.