php image manipulation 1

[electricphp]

Is there a php script that allows you to visually arrange items in a database by dragging and dropping pictures of the items so they appear in the order you would want them to?

 

[vacunita]

No, but you do know there is no such thing as Order in a database right?

Items in a database have no pre set order, you get order by specifying parameters in your queries such the Order By clause etc...

But looking at stuff in a database has no order, and really doesn't need to have any order. Its all in how you extract that data.

Also what you are asking s more in the realm of a stand alone GUI App rather than a PHP interface. I mean it could be done web based with javascript (AJAX) and other stuff, but it be far easer to do as an APP in say Delhpi or Visual Basic Rather than web based and using PHP.





----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[electricphp]

There has to be some sort of web app that interfaces with the datbase, perhaps a combination of javascript and php, where when you drag a picture from one container to another it changes the id that the image is ordered by.

 

[AdaHacker]

Huh? Why does there have to be such an app? I've certainly never heard of one.

Doesn't seem especially practical either. If you need to set an arbitrary ordering for your images, it's probably easier to just do it statically in your templates. And if have enough images that it's not practical to do this in templates, it's probably not practical to do it by hand at all. Yeah, you could write an app to do what you're asking, but to me it seems like a lot more trouble than it would be worth.

 

[jpadie]

@electricphp
i've certainly seen functionality in the way that you describe. and i've even written some myself. but i'd never attach it to a database: in this case you're altering the presentation layer, not the data layer.

can you step back from your earlier comments, avoid using words like database and explain what you're trying to achieve? one of us may be able to direct you to the right solution if we understand your aims better.

 

[electricphp]

Wel basically I have 2 clients now that pretty much want the same thing for their dynamic e-commerce sites. They ask me: "Is there any way we can drag the pictures around and organize them the way we like to?" What do I say to that?

Yes, technically it's possible but it's a pain in the behind to program.

The way I imagine it, i would split the screen in 2, on the left side, I would have a result set of thumbnails, on the right side I would have the "virtual containers' say 3 x3, where I could drag and drop from the left hand side thumbnails. When the page fills up they would click on a next page link and so on.

 

[jpadie]

ok.

that's pretty straightforward. much more easily answered like this too.

add a new column to the database called oBy. it should be an int data type.

add an orderBy clause to your sql pointing at this new column

for the user interface i would simply have a grid of images (structured as a set of floated block elements most probably) and make each image drag/droppable within the grid. use the drop event to capture the new order of images and each time that there is a change send the new order to the webserver using ajax.

capture the incoming order in a script, parse it into a sensible set of usable data and update the database accordingly.

if you use something like mootools as a framework the interface elements would be only a hundred or so lines of code.

 

[electricphp]

ok thanks,

this is the stuff I need help with:

for the user interface i would simply have a grid of images (structured as a set of floated block elements most probably) and make each image drag/droppable within the grid. use the drop event to capture the new order of images and each time that there is a change send the new order to the webserver using ajax.

capture the incoming order in a script, parse it into a sensible set of usable data and update the database accordingly.

do you have any sample code for this, even if it's not identical, I wouldn't know where to begin

 

[jpadie]

i've coded stuff like this before and will certainly have some examples somewhere. i will look one out when i get to the office tomorrow.

how many images are we talking about, by the way?

 

[Foamcow]

You need to use Javascript to handle the drag/drop and build the interface.

The actions in the interface can, via AJAX, load PHP scripts that would update your oBy column in the database.

Assuming you know how to write PHP that can update a database table you shouldn't have a problem with that.

The drag/drop behaviour and Ajax can be handled using a Javascript framework such as the aforementioned MooTools or, my preference, jQuery. Using these frameworks greatly simplifies the process.

http://www.jquery.com

http://www.mootools.net

jQuery is my fave, but I will say that despite the documentation being superb, the jQuery UI documentation that handles the sort of things you will want to do is pretty much not there. Then again, it's so easy to pick up that you can probably work most stuff out without much bother.

There are loads of other Javascript frameworks out there too.

--
Tek-Tips Forums is Member Supported. Click Here to donate

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[electricphp]

jpadie,

maybe 100 images, it's an online store so they'll keep wanting to add products. Thanks for yor help

Foamcow, tahnks, I'll look into the javascript frameworks

 

[jpadie]

hi
i've put up a prototype for you (all) to play with at

http://tek-tips.rathercurious.net/dragndrop/index.php

note that the ordering is stored in a database but that i have not put in any intelligence to the UI that tests for other people's changes in the order. this is because i am assuming that the ordering will be an admin only function.

it may lead to unexpected results if more than one person is playing with the demo at the same time.

 

[electricphp]

I appreciate your effort, but I think there's a typo in the url. Can you please double check it and repost it? thanks

 

[jpadie]

am away from the office now. Try
tektips.rathercurious.net/dragndrop/index.php

 

[jpadie]

electricphp
Is my sample code what you were looking for? If not please have another go at explaining.

 

[electricphp]

Yes jpadie,

it looks like what I'm looking for. I haven't been able to work due to loss of electricity, but I will dig into this monday. I'm sure I will have a few questions. I appreciate all your help. I'll keep you posted.

 

[electricphp]

Ok, I got the first part of it to work so I'm able to query the database and move around the images, but I'm having some difficulty with updating the database.

I'm not using PDO because I don't know what it is so the data is accessed differently, but theoretically this should work.

here is my modified updateSortOrder.php

I'm just getting error updating the database when I move the images around. I'm not sure what the problem is and I can't really debug it because the php script is called by a javascript.

$query = "Update items set oid = ? where itemId = ?";
$stmt = $conn->prepare($query);

foreach($_POST['image'] as $imageID=>$order){
	$stmt->execute(array($order, $imageID));
	if (!($stmt)) {
		die ('error'); //can be anything accept OK
	}
}
echo 'OK';

 

[jpadie]

well, first off, why not just use PDO (a database abstraction layer)? your installation will most likely have it already enabled. just check out the php manual for instructions how to use this with mysql.

alternatively this code should work for native mysql

<?php
mysql_connect($hostname, $username, $password);
mysql_select_db($database);
$query = "Update images set imageOrder = '%s' where imageID = '%s'";
foreach($_POST['image'] as $imageID=>$order){
	$query =  sprintf($_query, mysql_real_escape_string($order), mysql_real_escape_string($imageID));
	mysql_query($query) or die(mysql_error());
}
echo 'OK';
?>

you can always debug ajax though - even the php aspects, if that's what you're using.

the easiest way is to use firebug, output php error messages to the browser and then take the response text and put it into console.log. alternatively write the error/debug output to a file.

 

[electricphp]

Now i am getting the error:

Warning: Invalid argument supplied for foreach()

for the line:

foreach($_POST['image'] as $imageID=>$order){


I actually created a page that submits to this script to try to debug this. the page just has a form on it like this:

<form id="form1" name="form1" method="post" action="updateSortOrder.php">
  <input name="image" type="hidden" id="image" value="3" />
  <input name="image" type="hidden" id="image" value="5" />
  <input type="submit" name="Submit" value="Submit" />
</form>

 

[jpadie]

first off there was a small error in the code. but that would not cause the problem.

<?php
mysql_connect($hostname, $username, $password);
mysql_select_db($database);
$_query = "Update images set imageOrder = '%s' where imageID = '%s'";
$result = mysql_query($query) or die
foreach($_POST['image'] as $imageID=>$order){
    $query =  sprintf($_query, mysql_real_escape_string($order), mysql_real_escape_string($imageID));
    mysql_query($query) or die(mysql_error());
}
echo 'OK';
?>

secondly, the problem you report is caused by basic html errors (or at least how posted html plays with php). you have named two controls the same thing and thus only the last will be received by php in a meaningful way (because it will overwrite the previous variables).

stick with the code i wrote for you. your debugging form will have no use in debugging the server side php as you are not providing input in the manner that the form expects. I've told you (above) how to debug ajax in a meaningful way. that's your best bet. you could always also change line 72 of dragdropreorder.js to the following

$('status').innerHTML = 'Error updating database:<br/>Error was  + rT';