Linked Up Design

This is a great redirect to use in PHP if you are using a
function or run an ajax where you need to get back
to the page you are loading information from.

<script type="text/javascript">
<!--
window.location = "http://www.example.com/";
//-->
</script>

If you are runing in to any trouble with your photos not showing up in Internet Explore there is a very easy fix for this:

1. Open up the photos in Photoshop.

2. Go to Images at the top of the program next to Edit.

3. Select Mode and change the mode to RBG. (More than likely your photo is set to CMYK).

4. Reupload the photos.

I ran in to this problem lately when I had to make a layout of a property which was created in Illustrator and then took the photo in Photoshop to convert the pictures to JPEG format so I could upload them for the website.

You will also run in to this if you are taking photos from a PDF that was used for printing a flyer or something of that sort. The distinct difference between print media and the internet is that print media is mainly done in a CMYK format and the internet is RGB format.

I have been working with a client that was looking to be able to display a group of pictures on their site. We originally where looking at a slide show type display which usually are a great display for a site but I really wanted to do something a bit different being that his type of site is pretty cookie cutter with regards what they are selling and only having so many possible designs.

I started to play around with Highslide which for some of you is a bit old school by now but do remember that I set this blog up as an educational blog, not promoting new products. You can go to http://www.linkedupdesign.net/test/ and see one there many types of Highslides there are.

You should also go to their site http://highslide.com/ and find one that works for you. I strongly suggest following their instructions and donating, this is open source and the designer made this as easy as buttering toast so support the cause.

Below you are going to find a very simple way to display multiple pictures using PHP and a MYSQL Database.

Please pay attention to the fact that I set this up to go along with another table that has form information that is being uploaded so the picture table is a completely different table. I have also set this up so the client can upload this through a CMS system so I have added a delete function to this which is embedded in to the picture display.

Because this is also being set up into an active edit page, there is no connection to the database so you will have to set that up for this to work. Here it is:

First this is to set up a new table with 2 columns “product_id_fk” varchar 32 and the second “image_path” varchar 64.

<?php
$id = $_GET['id'];

if(!empty($_GET['path']) && !empty($_GET['del'])) {
$path = $_GET['path'];
$query = “DELETE FROM image_relations WHERE image_path = ‘$path’”;
mysql_query($query) or die(mysql_error());
}

if(isset($_FILES['image_upload'])) {
$target_path = “uploads/”; //This is the name of the file on the server where the pictures are being uploaded to so you will need to set up this folder on your server with the correct path.
$rand = rand(10000,30000); //This puts a random number along with the $basename so you can add pictures with the same name without any display problems.
$basename = basename($_FILES['image_upload']['name']);
$file = $rand.”-”.$basename;
$target_path = $target_path . $file;
if (move_uploaded_file($_FILES['image_upload']['tmp_name'], $target_path)) {
$query = “INSERT INTO image_relations (product_id_fk,image_path) VALUES (‘$id’,'$file’)”;
mysql_query($query) or die(mysql_error());
echo “The file ” . $basename . ” has been uploaded”;
} else {
echo “<strong>There was an error uploading the file. Please try again.</strong><br />”;
echo $_FILES['image_upload']['name'];
}
}
?>

<br /><br />
<table width=”550″ align=”center”>
<tr>
<td width=”550″ align=”left” valign=”top”><hr />
<h4>Add image:</h4><br />
<form enctype=”multipart/form-data” method=”POST”>
image:
<input name=”image_upload” type=”file” />

<br />

<input type=”submit” value=”Upload”/>

</form>
<h4>Additional images:</h4>
Click Image to delete.

<?php
$a = 0;
echo “<table width=’450px’><tr>”;
$xyquery_2 = “SELECT image_path FROM image_relations WHERE product_id_fk = ‘$id’”; //This might have to be changed based on the second table you set up for the pictures
$xyresult_2 = mysql_query($xyquery_2) or die(mysql_error());
while ($path = mysql_fetch_array($xyresult_2)){
if($a > 3) //3 is a random number based on the size of the pictures I have set up and the size of the table that I set for the clients site.
{
$a = 0;
echo “</tr><tr>”;
}
//Display each record.
echo “<td bgcolor=’#ffffff’ colspan=’1′><a href=’(this is the page you are pulling the id from).php?id=$id&path=”.$path[0].”&del=1′><img src=’uploads/”.$path[0].”‘ width=’100px’ height=’100px’ ><br /></a></td>”;

$a++;
}
echo ‘</tr></table>’;
mysql_close();
?>

<br style=”clear:both;” />

</td></tr></table>
Save the page and use a <?php include_once(“additional_image”); ?> in the area that you want this to display on the CMS and to display this on a page you will need to have a connection to the database and call the database you are working with and then use the dispaly each record section. There is one change you will need to make so the delete function is removed which is below:

//Display each record.
echo “<td bgcolor=’#ffffff’ colspan=’1′><img src=’uploads/”.$path[0].”‘ width=’100px’ height=’100px’ ><br /></td>”;

$a++;
}
echo ‘</tr></table>’;
mysql_close();
?>

<br style=”clear:both;” />

</td></tr></table>

I basically took out the function to delete the picture. If you are having any trouble with this just let me know.

A client was looking for a CMS system for the site that I build for him. Part of this was to give my client the ability to upload pictures along with a descriptions of the cars that they are selling. The coding that I found earlier for this would upload a picture but would not carry along a description with it as well. So I had a thought, why can’t I upload a file to a folder along with uploading the file name and a description to a database and then reflect that back to a site using PHP.

Here is what I came up with:

1. First thing you will need to do is to set up your database with the tables that will reflect the form. Next create a new page called form.html adn set up your form giving it the action “add.php”. Then you will need to set up a folder in the directory that this file will be save in either locally or on your server’s file. This code will upload the picture to the above folder.

<?php

//This is the directory where images will be saved
$target = “uploads/”;
$target = $target . basename( $_FILES['uploadedfile']['name']);

2. Next you will need the code to upload information to your database. In this example, I am using a MySQL database:

//This gets all the other information from the form
$name=$_POST['name'];
$model=$_POST['model'];
$year=$_POST['year'];
$odometer=$_POST['odometer'];
$price=$_POST['price'];
$pic=($_FILES['uploadedfile']['name']);
$description=$_POST['description'];

mysql_connect(“www.mydatabase.com, “database name”, “password”) or die(mysql_error()) ;
mysql_select_db(“database”) or die(mysql_error()) ;

//Writes the information to the database
mysql_query(“INSERT INTO `sale` VALUES (‘$name’, ‘$model’, ‘$year’, ‘$odometer’, ‘$price’, ‘$pic’, ‘$description’)”) ;

3. Now the above will file this information on your database. This code has will reflect an error if the file did not go to the file on your server. Now for the rest of the code to send the photo to the file:

//Writes the photo to the server
if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target))
{

//Tells you if its all ok
echo “The file “. basename( $_FILES['uploadedfile']['name']). ” has been uploaded, and your information has been added to the directory”;
}
else {

//Gives and error if its not
echo “Sorry, there was a problem uploading your file.”;
}
?>

4. Save this file as add.php

5. Now here is the code for the display of what you just uploaded:

<?php
mysql_connect(“www.mydatabase.com, “database name”, “password”) or die(mysql_error()) ;
$data = mysql_query(“SELECT * FROM your table”) or die(mysql_error());?>

<?php $info = mysql_fetch_array( $data ); ?>

<?php do { ?>
<table width=”500″ border=”1″ cellspacing=”0″ cellpadding=”0″ align=”center”>
<tr>
<td>Photo</td>
<td>Make</td>
<td>Model</td>
<td>Year</td>
<td>Odometer</td>
<td>Price</td>
<td>Description</td>
</tr>
<tr>
<td><img src=”<?php echo “http://www.yourwebsite.com/uploads/”.$info['photo'] .”"; ?> ” alt=”" name=”" width=”100″ height=”90″ border=”1″ /></td>
<td><?php echo $info['name']; ?></td>
<td><?php echo $info['model']; ?></td>
<td><?php echo $info['year']; ?></td>
<td><?php echo $info['odometer']; ?></td>
<td><?php echo $info['price']; ?></td>
<td><?php echo $info['description']; ?></td>

</tr>
</table>
<?php } while ($info = mysql_fetch_assoc($data)); ?>

6. Save this as display.php. What I have in this coding is a repeat command that will show everything in the database so you can show all at the same time.

That should do it. Play with it and see if there are areas that can be improved upon and let me know.