Tutorials

Making a Server Side Image Cache in PHP

Tagged:  

Yesterday, I wrote about an application that I wrote called scovry and I mentioned that in writing the application I used a lot of caching. This included caching of images from an external thumbnail service server.

I thought that I would post the code that I am using to do this and quickly go over how it works. This code might be useful to any application that loads images from another server, to lessen the dependency on the other server. Below is the code that caches the images.

<?php
$imageurl =urldecode( $_GET['imageurl']);

$cachefile = 'caching_folder/'.urlencode($imageurl).'.jpg';
$cachetime = 604800;
// Serve from the cache if it is younger than $cachetime
if (file_exists($cachefile) && time() - $cachetime < filemtime($cachefile)) {
    header("Content-type: image/jpeg");
    readfile($cachefile);
    exit;
}
ob_start(); // Start the output buffer

$imginfo = getimagesize($imageurl);
header("Content-type: image/jpeg");
readfile($remoteImage);

// Cache the output to a file
$fp = fopen($cachefile, 'wb');
fwrite($fp, ob_get_contents());
fclose($fp);
ob_end_flush(); // Send the output to the browser
?>

The above code is used like an image proxy, but it adds the benefit of doing the image caching. So, the first thing to notice is that in my application the imageurl variable that is passed in through the url query string is an encoded url, so we decode it. This variable will hold the url encoded url of the image that we want to load. You may also notice that this code assumes that the image is a JPEG image, because that is what I was always going to be dealing with. So, if you use this code, you may need to add code to handle other image types.

The next import variable is the $cachetime as it sets how long (in seconds) the image will be cached before the cache is refreshed. The if statement checks if it should load the image on disk. The important part here is that it sets the document header content type to be an image and then loads the image using the readfile() method.

Now If the file does not exist or if it needs to be re-cached it loads the file from the server and writes it to the output buffer. Once again the document header content type is set to an image value and it gets the file via the readfile() method. In addition to this it writes the file to disk using the fopen() and fwrite() methods.

That is basically all there is to it. You can take a look at it in action by checking out scovry.

jQuery Dialog Box Tutorial

Tagged:  

Recently on a coding project for my day job I had a requirement to display a dialog box to confirm that when someone clicked a cancel link that they meant to do the cancel action. The dialog box was on a page that built a list of links with multiple cancel links, each with a different url. Since we are using jQuery and since I didn't want a browser dialog box to display I decided to use the jQuery dialog box.

Since I am a firm believer in the first rule of programming (never re-write something that has already been written) I did a quick Google search and found a good example of the jQuery dialog box for when a form is submitted at jensbits.com. The code was close to what I wanted to do, but not exactly. So, I took the code and modified it to work for me.

Below is the portion of the jQuery code that I changed from the code in the jensbits.com post.


$(function(){
// jQuery UI Dialog

$('#dialog').dialog({
autoOpen: false,
width: 400,
modal: true,
resizable: false,
buttons: {
"Yes": function() {
$(this).dialog("close");
$(location).attr('href',$(this).dialog('option', 'anchor'));
return true;
},
"No": function() {
$(this).dialog("close");
return false;
}
}
});

$('.closebutton').click(function(){
$('#dialog').dialog('option', 'anchor', $(this).attr('href'));
$('#dialog').dialog('open');
return false;
});
});

My first modification was to have the dialog open when someone clicks on a link that has a closebutton class assigned to it. I also attached an anchor option to the dialog box that holds the href attribute value of the link.


$('.closebutton').click(function(){
$('#dialog').dialog('option', 'anchor', $(this).attr('href'));
$('#dialog').dialog('open');
return false;
});

The below code shows the setup of the buttons and the major change is that the "Yes" button sets the location attribute to the anchor option value that we set in the code above.


buttons: {
"Yes": function() {
$(this).dialog("close");
$(location).attr('href',$(this).dialog('option', 'anchor'));
return true;
},
"No": function() {
$(this).dialog("close");
return false;
}
}

Below is the code in the body of the html that sets up the links and the dialog box. Notice that each link has the class set to closebutton.


<a id="closebutton1" href="http://ocell.us" class="closebutton">Close</a><br />
<a id="closebutton2" href="http://wastingtimegames.com" class="closebutton">Close</a><br />
<a id="closebutton3" href="http://theporscheguys.com" class="closebutton">Close</a>
<div id="dialog" title="Cancel"><p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 0 0;"></span> Are you sure you want to do that?</p><p>
If you are sure, click Yes.</p><p>If not click No.<p></div>

You can see the full demo code here. It is a text file for easy code viewing, but you can save it to your computer if you want to see it in action.

GWT's UI overhaul - Video Tutorial

Tagged:  

This week's tutorial is about the Google's GWT. If you are a Java developer and have never used GWT for your Ajax, then you may want to take a look at GWT for your Ajax needs. This particular tutorial talks about the new UI improvements over the past year.


Video Tutorial of the Week - Ajax Progress Bar

Tagged:  

One common issue with Ajax applications is that the browsers progress bar does not show when data is being loaded in the background. The solution to this is to display a progress bar on the page where it makes sense to let the user know what is happening. So, this week's video tutorial will show you how to add a progress bar using ASP.NET(but the principles applies to other languages as well).


jQuery CSS and Effects - Video Tutorial of the Week

Tagged:  

This week's video tutorial is about creating effects using jQuery and CSS. jQuery is one of the best Ajax libraries available and if you want to learn more about it, then this tutorial will help.


Ajax Drag and Drop Shoping Cart Tutorial - Video

Tagged:  

This is the first of what will be a weekly tutorial video. This week's video is about creating a drag and drop shopping cart system. You can watch the video below.


Ajax File Upload Tutorial

Tagged:  

As you are writing an Ajax application, you may want to allow users to upload files through an Ajax form. The folks over at AnyExample.com have put together a good tutorial on the subject. The tutorial uses PHP for the back end, but the principal is the same for any server side language.

Below is an excerpt from the tutorial.

How IFRAME file uploading works?

  • There is a simple <form... which contains only <input type="file" ... > field.
    Target for this form is a hidden IFRAME (with "display: none;" CSS style) and
    OnChange event for the file field is set to JavaScript function which checks file extension (optional for this example, but
    very useful in general) and submits form.
  • Special part of the script (marked FILEFRAME, see comments) saves file upload, checks for uploading errors and outputs JavaScript code to that
    hidden IFRAME.
    The javascript code uses parent.window.document object, which allows to modify parent document (visible page, which users is viewing).
    It sets filename value and enables submit button on the other form using getElementById method.
  • The other form has 'description' text-field and hidden field 'filename'. User may fill 'description' field while file is uploading.
    When file uploading is finished, user press submit and "file information" page is generated (based on filename from hidden field and user's
    file description).

Possible drawback of this method is file garbage: files are uploaded even if user does not press submit button. You may need to write 'garbage file
collector' which will delete any unused file.

This example stores all uploaded file in filesystem folder. You need to specify it at the beginning of script, see variables $upload_dir and
$web_upload_dir. There is fail-checking which checks whether it is possible to write create files in upload directory.

We use following functions in this example:

PHP

  • move_uploaded_file - move file uploaded to web server
  • fopen - open file
  • fwrite - write to opened file
  • fclose - close file
  • str_replace - replace one substring by another
  • filesize - returns file size in bytes
  • filemtime - returns file modification time

You can read the full post here.

Compress JavaScript with Gzip

I found interesting tutorial today about using JavaScript with Gzip:

The main problem when we are using ajax framework is because of their big size. Of course, it will extremely slow down the sites load time. For example, if we use the standard jQuery, it’s almost 100Kb. It’s even more if we use the complete Prototype and Scriptaculous that will cost around 150Kb.Compress JavaScript with Gzip | Ajax Tutorial, Nov 2008

Read the whole tutorial here.

New Web design tool & Themes

The new Point & Click web design tool - the Control & Theme Designer - presents a ground breaking simple, intuitive developer/designer interface to creating advanced, customized, and creative customer-facing Web user interfaces (UIs) without any need to code in HTML and CSS.
The new tool will allow to easily create custom themes for Visual WebGui applications or download complete themes. New themes created by Gizmox that would give your Visual WebGui application familiar, cool looks are going to be available for download. Here are some examples of the themes that you should expect to see when 6.4 Preview is released demonstrated by screenshots of the same control with a different theme each time.
Mac Theme:
dialogbox with Mac Theme

Google Analytics Theme:
Google Analytics Theme
dialogbox with Google Analytics Theme
 
Gmail Theme:
Gmail Theme
dialogbox with Gmail Theme

Facebook Theme:
Facebook Theme
dialogbox with Facebook Theme

Vista Theme:
Vista Theme
dialogbox with Vista Theme

XP Theme:
XP Theme
dialogbox with XP Theme
Black Theme:
Black Theme

You can also get more information through the following resources:

 

Designing custom controls with the innovative visual Web design tools

The visual Control & Theme Designer web design tools introduced in version Visual WebGui 6.4 version allows to create cool new designs and themes and also custom controls. The new 'how to' tutorial shows how simple it is to create a Visual WebGui custom control with the new designer tool.

This 'How to' is divided into two parts whereas the first part demonstrates the creation of the programmatic part of the water mark text box control and the second part shows how to add the design time of the control.

View the full tutorial here:
Design Visual WebGui custom controls with the new Control & Theme Designer

Syndicate content