I greatly underestimated the time required to complete the project, which is why I completed the components but was unable to tie them all together in the given time. With this being a project for my employer, I will continue to work on the project in coming weeks. At the moment my main focus at work is on another project, which is the implementation of a new version of our ERP system. After months of testing we went live with it today, which turned out to be relatively successful. My focus over the next week or 2 will be to fix some of the smaller problems, and to prepare for the exam in my other subject.

When I complete the work on the Image Organiser Application, I will post a final update here on the blog.

<?php

$imagetoresize = “imageorg/test.jpg”;
$imageresized = “imageorg/resized/test.jpg”;
$newdimension = “400″;
$newaxis = “w”;

list($currentwidth, $currentheight) = getimagesize($imagetoresize);

echo “width “, $currentwidth, “, height “, $currentheight, “<P>”;

if ($newaxis==”w”)
 $ratio=($newdimension/$currentwidth);
else
 $ratio=($newdimension/$currentheight);
echo “ratio “, $ratio, “<P>”;

$newwidth = $currentwidth * $ratio;
$newheight = $currentheight * $ratio;
echo “new width “, $newwidth, ” new height “, $newheight, “<P>”;

$outputfile = imagecreatetruecolor($newwidth, $newheight);
$inputfile = imagecreatefromjpeg($imagetoresize);

imagecopyresampled($outputfile, $inputfile, 0, 0, 0, 0, $newwidth, $newheight, $currentwidth, $currentheight);

imagejpeg($outputfile, $imageresized, 100);

echo $imagetoresize, ” resized to “, $newwidth, ” * “, $newheight, ” in output file “, $imageresized;
?>

After running this script, I can confirm that the file imageorg/resized/test.jpg was created. The screenshot below shows the value of the variables from the script after I deleted the file and re-run the script.

The next job is to tie all of the pieces together into one screen, and then debug after end user testing. Due to high priority projects at work, I was not able to arrange the testing during the course of this project.

References

PHP: getimagesize – Manual (2010). Retrieved 23rd May 2010 from http://php.net/manual/en/function.getimagesize.php

PHP: imagecopyresampled – Manual (2010). Retrieved 23rd May 2010 from http://php.net/manual/en/function.imagecopyresampled.php

<div id=”rename_form”> 
<form id=”rename” method=”POST” action=”imageorgrename.php”> 
    <input type=”text” name=”newfilename” id=”newfilename”> 
    <input type=”submit” value=”submit”> 
</form> 
</div> 

Now we will add a little spice in the way that we submit the form – AJAX is hot!

$(function(){
    $(“#rename”).submit(function(){
//        dataString = $(“#rename”).serialize();

        $.ajax({
        type: “POST”,
        url: “imageorgrename.php”,
        data: dataString,
        dataType: “json”,
        success: function(data) {
        }

        });

        return false;           

    });
});

This code submits the dataString I created previously (oldfilename, newfilename) using POST to the script imageorgrename.php using a dataType of JSON. JSON is the JavaScript Object Notation, a lightweight data interchange format that is language-independent. It uses name / value pairs known as objects and ordered lists of values known as arrays (JSON, n.d. paragraph 1-2). The result is returned without any page refresh. The application in use is shown below and on checking the imageorg folder, the file had been renamed.

References

JSON (n.d.). Retrieved 20th May 2010 from http://www.json.org/

My code for the DIV is below:

<div id=”form1″>
 <input name=”newfname” id=”newfname” type=”text”>
</div>

In my JQuery code I have the following:

var newfilename = $(“#newfname”).val();
alert(newfilename);

Now when I browse to http://localhost:8080/imageorgjq.html I get the screen below after typing a new filename for the first file.

I am not renaming the file yet. I need PHP to do this. I will determine where and how to do this in the next short post as I think it will be a 1 line call from my JQuery and 1 line of code in a PHP script.

References

Hope, C. (2010). How to Get and Set Form Element Values With JQuery. Retrieved 18th May 2010 from http://www.electrictoolbox.com/jquery-get-set-form-values/

<div id=”fname”>
Filename
</div>

The key to getting the filename is the attribute “href”, so I created the variable arrayval as below:

var arrayval = $(“#thumbnails a.active”).attr(“href”);

I had several failed attempts at getting this to work, so I added the line below to display the current value of “arrayval”, which resulted in a popup alert:

//alert(arrayval);

Once I was getting the correct value into my variable, I used the line below to write it to the DIV that I created earlier:

$(“#fname”).text(arrayval);

I was using the append function at first, which was adding the current filename to what was already in the DIV. I then found the forum posting by Daniel Papasian (2008) as referenced below, which contained the simple “text” function to replace the existing content of a DIV. Chris Hope’s “Electrictoolbox” website (2009) was also useful as it helped with being able to get the value of the current object.

In summary, the following are the 2 pieces of code I have added to imageorgjq.html:

var arrayval = $(“#thumbnails a.active”).attr(“href”);
//alert(arrayval);
$(“#fname”).text(arrayval);

<div id=”fname”>
Filename
</div>

The alert can be removed.

References

Papasian, D. (2008). Replace Text Inside a DIV Element. Retrieved 14th May 2010 from http://stackoverflow.com/questions/121817/replace-text-inside-a-div-element

Hope, C. (2009). Use append() to Add Text / HTML to an Element With JQuery. Retrieved 14th May 2010 from http://www.electrictoolbox.com/jquery-append-add-text-to-element/

I got a little lost and confused while trying to get the image import working with JQuery. Now that I have put that on the shelf for now and done a simple image import I have new focus to get on with displaying and modifying the image files.

I am now going to use HTML DIV’s to display the current image, the previous and next buttons, and the thumbnail images. The thumbnail images won’t be thumbnails in the usual sense. They will be the same size as the current image, but are used as a reference within the array of images.

The following code will be integrated into the application at a later time, after testing has been done.

<HTML>
<HEAD>
<script src=”jquery.js” type=”text/javascript”></script>
<script type=”text/javascript”>

$(document).ready(function(){
 // show the large version of this thumbnail
 $(“#thumbnails a”).click(function(e){
   
 // clear current active thumbnail
 $(“#imagetoedit”).attr(“src”, this.href);
 
 // mark this thumbnail as active
 var $thumbnails = $(this).siblings().removeClass(“active”);
 
 // setup next and previous buttons. we may not use previous
 //but set it up in case
 $(this).addClass(“active”);

 var arrayposition = $thumbnails.index(this);
 $(“#next”).attr(“disabled”, arrayposition==$thumbnails.length-1);
 $(“#prev”).attr(“disabled”, arrayposition==0);
 return false;
});

// next/prev buttons just click the next/prev thumb when enabled

$(“#prev”).click(function(){
  $(“#thumbnails a.active”).prev().click();
});

$(“#next”).click(function(){
 $(“#thumbnails a.active”).next().click();
});

// select the first thumbnail
$(“#thumbnails a:first”).click();
});
</script>
</HEAD>
<BODY>
<div>
  <img id=”imagetoedit” src=”imageorg/wk1-1.jpg”>
</div>
<div id=”nav”>
  <button id=”prev”>Prev</button>
  <button id=”next”>Next</button>
</div>
<div id=”thumbnails”>
  <a href=”imageorg/wk1-1.jpg”><img src=”imageorg/wk1-1.jpg”></a>
  <a href=”imageorg/wk2-1.jpg”><img src=”imageorg/wk2-1.jpg”></a>
  <a href=”imageorg/wk3-1.jpg”><img src=”imageorg/wk3-1.jpg”></a>
</div>
</BODY>
</HTML>

When I browse to http://localhost:8080/imageorgjq.html, I get the page below:

As you can see, the “thumbnail images are also being displayed. To fix this, I added the following line directly after $(document).ready(function(){

$(‘#thumbnails).hide();

On testing, this did hide the DIV as expected so we only see the active image on the screen along with the “Next” and “Prev” buttons. I am now starting to see significant savings in the amount of code I need to write by using JQuery.

References

.hide() – JQuery API (n.d.). Retrieved7th May 2010 from http://api.jquery.com/hide/

I have decided to go back to basics and start with a simple file upload script using a HTML form and PHP. I will then move onto displaying and renaming the images one at a time. If time permits, I will come back to the file upload problem. Otherwise I will have to fininsh this after the semester has finished, as it is afterall a work-related project.

I have created a new HTML file called imageorg.html with the code below:

<HTML>
 <form enctype=”multipart/form-data” action=”imageorgupload.php” method=”POST”>
  Select a file to upload: <input name=”uploaded” type=”file”>
  <br>
  <input type=”submit” value=”Import”>
 </form>
</HTML>

The form is processed by the PHP script as below:

<?php
 //Set the upload directory
 $imagesdir = “imageorg/”;
 $imagesdir = $imagesdir . basename( $_FILES['uploaded']['name']) ;
 //Get the filename
 $fname = $_FILES['uploaded']['name'];
 //Valid image extensions
 $validext = array(‘jpg’,'JPG’,'gif’,'GIF’,'bmp’,'BMP’,'tif’,'TIF’);
 //Get the file extension
 $fext = substr($_FILES['uploaded']['name'],-3);
 //Check for a valid image file
 if(!in_array($fext,$validext))
  die(‘Invalid File Type’);
 if(move_uploaded_file($_FILES['uploaded']['tmp_name'], $imagesdir))
  {
  echo “Image file “. basename( $_FILES['uploaded']['name']). ” uploaded successfully”;
  }
 else
  {
  echo “File not uploaded”;
 }
?>

The above code checks that the file is a valid image file and uploads it if the extension is “gif”, “jpg”, “bmp”, or “tif”. Next I will display the uploaded images one at a time.

In my work earlier this week I was able find files in a folder and subfolders and output their path to a DIV on the screen. Now I want to output those paths to the MySQL table “images” created earlier in the project. To do this, I created a MySQL login script called imageorguser.php with the code below:

<?php
$dbhost = ‘localhost’;
$dbuser = ‘username’;
$dbpass = ‘password’;

$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die (‘Error connecting to mysql’);

$dbname = ‘imageorg’;
mysql_select_db($dbname);
?>

I include these login details in findimages.php with the line of code below:

include(“imageorguser.php”);

2 new variables were added as below:

 $importcounter = 0;
 $importcount = 0;

importcounter is used at import time to advised the user onscreen how many images were imported. importcount is set in the table images as “1″ for each image file imported. This will be used later to determine how many images still need to be processed by “summing” this field.

The line below was added to process the slashes correctly when inserting records into the database:

$newfilestr = addslashes($newfilestr);

Finally, the line below does the actual insert of the fields inputfile, importtime, and importcount:

mysql_query(“INSERT INTO images(inputfile, importtime, importcount)”.”VALUES(‘$newfilestr’,'$importtime’,'$importcount’)”) or die(mysql_error());

The full code of findimages.php at its current state is shown below:

<?php
 include(“imageorguser.php”);
 //Directory to start from
 $userinput = $_POST["upload"];
 $importcounter = 0;
 $importcount = 0;
 $startdir = new RecursiveDirectoryIterator(“$userinput”);
 //Set Current Directory and find files
 $curdir = new RecursiveIteratorIterator($startdir, RecursiveIteratorIterator::SELF_FIRST);
 //set image file extensions that we want to search for
 $imgextensions = array(‘jpg’,'JPG’,'gif’,'GIF’,'png’,'PNG’,'bmp’,'BMP’);
 foreach ($curdir as $file) {
  //Replace backslashes in string with forward slashes to prevent PHP escape problems later
      $newfilestr = str_replace(‘\\’,'/’, $file);
  //Get the file extension for the current file
  $newfileext = substr($newfilestr, -3);
  //If the current file is a file that we want
  if (in_array($newfileext, $imgextensions)) {
   $newfilestr = addslashes($newfilestr);
       echo $newfilestr, ” “;
   $importtime = date(‘Y-m-d H:m:s’);
   echo $importtime, ” “;
   $importcount = 1;
   $importcounter++;
   echo $importcount, “<BR>”;
   mysql_query(“INSERT INTO images(inputfile, importtime, importcount)”.”VALUES(‘$newfilestr’,'$importtime’,'$importcount’)”) or die(mysql_error());
  }
 }
 echo “Files imported: “, $importcounter;
?>

When I type “C:\temp” into the form on fileupload.html and click on submit, the following is the output of running the query select * from imageorg.images; in MySQL Query Browser.

As you can see, 17 rows were fetched, which is the same number that we got previously, and the file paths look correct, so the new code has worked as expected.

Next we will display the images one at a time in the web browser.

AJAX makes a webpage intuitive, and applications in a web browser can behave like standalone applications. What I mean by this is that you can display and remove what you want, where you want, when you want without ever having to refresh your browser.

When I first started looking at JQuery I thought that it could be useful for certain functionality. Now that I am actually using it in this project I am seeing the benefits of greatly reduced coding, as JQuery does the fiddly bits for me.

I start today by creating some JavaScript in the file submitimageform.js as below:

$(document).ready(function() {
  $(function() {
  $(“.submit”).click(function() {
  var upload = $(“#upload”).val();
  var dataString = ‘upload=’+ upload;

  if(upload==”)
    {
    $(‘.success’).hide();
    $(‘.error’).show();
    }
  else
    {
    $.ajax({
      type: “POST”,
      url: “findimages.php”,
      data: dataString,
      success: function(html){
      $(“#output”).append(html);
      }
    });
  }
  return false;
  });
  });
});

Next I modified fileupload.html and added the following 2 lines to the HEAD section:

  <script type=”text/javascript” src=”jquery.js”></script>
  <script type=”text/javascript” language=”javascript” src=”submitimageform.js”></script>

This runs the jquery.js script to make JQuery functionality available, and then runs submitimageforms.js to perform required functions when certain actions occur within the page. The specific function within JQuery that we are calling is .ajax with parameters of type, url, data, and success.

I also added the code below to the DIV with the ID “output” to tell the script where to display the output of the PHP script.

   <span style=”display:none”> Please Enter Valid Data</span>
   <span style=”display:none”></span>

As you can see below, the form output is now displayed below the form without refreshing the page.

The references below were used for hints and clues on specific functionality during the process of coding this section of the project:

References

“Load a Page Without Refreshing”, 12:46AM, 8th December 2008. Posting by “acctman” . Retrieved 31st March 2010 from http://www.dynamicdrive.com/forums/archive/index.php/t-35337.html

Tamada, S. (2009). “Submit a Form Without Refreshing Page With JQuery and Ajax”. Retrieved 31st March 2010 from http://www.9lessons.info/2009/04/submit-form-jquery-and-ajax.html