What will we use it for?

It’s quite neat as it can be used for a whole variety of tasks – anything that you would like to change the content of with a neat transition.
For this tutorial though I’m going to use it to make an effect that I thought of a while ago – to deal with responses from an AJAX form submission.

How to do it

Unlike most of my other tutorials on ProgTuts I’m going to use jQuery to handle the AJAX side of things because we need to have that package included to use the Flip extension anyway. The form I’m going to use is going to be really very simple – it will just send a name and age and the corresponding action page will just display them. Of course, this tutorial isn’t about making an AJAX form; it’s about making the Flip style the transaction between form and action page.

There are a variety of procedures to put together to make a nice effect but the one I’m going to go with is this:
Send Form -> Show Loading -> FLIP -> Show results

For a more detailed form that would need more time in the action page (such as a login form) I would probably do a flip between sending the form and showing the loading image – to avoid a messy set of transitions call the flip to the loading image before sending the AJAX call.

What code is needed?

Not all that much!
First we need to make sure all our javascript is loaded, as well as our stylesheet. The stylesheet is pretty flexible but can be easily messed up so I’ll mention that a wee bit later, but for the moment we’ll just link it all in the head section of the page:

<link rel="stylesheet" href="style.css" type="text/css" media="screen" title="Style">
<script src=”http://www.google.com/jsapi” />
<script type="text/javascript">
  // Load jQuery
  google.load("jquery", "1");	
</script>
<script type="text/javascript" src="jquery-ui.js” />
<script type="text/javascript" src="jquery.flip.js” />

Note here that I’m using the Google javascript API to load jQuery – this is an incredibly useful tool so I recommend you read into it and use it! It’s also important to make sure the jquery.flip file is linked last.

Next, in the body section of the page we need our code for the form; as I said I’m just going to make a very simple form and just set the action attribute to call a javascript function. We will store this inside a div which we will call flipBox – this is the div that will actually be flipped by the jQuery plugin.

<div id="flipBox" class="flipBox">
	<form id="flip" class="flip" name="flip" action="javascript: send();">
		<label for="name">Name: </label><br />
		<input type="text" id="name" class="textbox" name="name" /><br />
		<label for="age">Age: </label><br />
		<input type="text" id="age" class="textbox" name="age" /><br />
		<input type="submit" id="submit" name="submit" class="button" value="Send" />
	</form>
</div>

The last thing we need on this page is the actual javascript!

<script type="text/javascript">
	function send()
	{
		$.ajax({
			type: "POST",
			url: "action.php",
			data: $("#flip").serialize(),
			beforeSend: function()
			{
				// Display something when the AJAX is loading.  This could be an image or just ext...
				$('#submit').innerHTML = "Loading...";
			},
			success: function(html)
			{
				var response = html || "No response text";					
				$("#flipBox").flip({
					direction: 'lr',
					color: '#00FF33',
					speed: 400,
					content: response
				});
			},
		        error: function()
			{
				// Display something when the AJAX fails.  This could be an image or just text...
				$("#flipBox").flip({ direction: 'tb', color: '#FF0000', content:"Failed to load page correctly!" }); 
			}
		});
	}
</script>

The code here is fairly standard for a javascript library ajax call so I won’t go into too much detail, but the important part comes in the success section:

$("#flipBox").flip({
	direction: 'lr',
	color: '#00FF33',
	speed: 400,
	content: response
});

This is the section that is needed to actually flip our div.
It’s quite straightforward – “#flipBox” is our div containing the form, so we’re calling the flip() function on it and giving that function a few arguments:

• direction: ‘lr’ – flip from left to right (alternatives are rl, tb, bt…try no prizes for working out what they mean…)
• color: ‘#00FF33’ – change the colour of the div to the given colour. This is a nice was to show success or failure and just a general status change.
• speed: 400 – specifies how many milliseconds it takes to carry out the flip.
• content: response – sets the content of the div to the response variable we made the line above this section.

You can see that I’ve also made a different style of flip if there is an error in the AJAX call.
And that’s pretty much it. Easy!
There are some other attributes etc. available which you can explore on the Flip homepage but those are the most important imho.

The final thing we need to do is make our page for the AJAX function to call – some simple PHP for that one:

<?php
	if(!empty($_POST['name']) && !empty($_POST['age']))
	{
		?>
		The name supplied is: <?=$_POST['name'];?><br />
		The age supplied is: <?=$_POST['age'];?>
		<?php
	}
	else
	{
		?>
		You didn't fill in the form....
		<?php
	}
?>

Obviously not complex, but neither is this example

Styling

As promised, I’ll try and describe a little bit about the styling.
The code I’ve used is this:

#flipBox {
	width: 500px;
	height: 200px;
	margin: 0 auto;
	background-color: #999999;
	color: #fff;
	font-weight: bold;
	font-size: 24px;
}
 
	#flipBox > * {
		padding: 15px;
	}

In real terms you won’t need much more than that. I haven’t tried it with floated layouts but I would guess it doesn’t work – maybe if anyone tries it they can post a comment up telling me of it’s success or failure.
The one thing that I’ve found doesn’t work is the min-height or min-width attributes – this messes up the transition of it flipping so I recommend you avoid it.

I’ll add anything I find about the styling to this section, but as I said before it is pretty flexible, just try to avoid restricting sizes and it should work perfectly.

Conclusion

Dynamic changes are commonplace in websites these days, so make them visually effective! The only thing I’d say is that personally I’d hate it if my entire webpage flipped. It might be appealing the first 2 or 3 times but would get old fast! Try to only do it with small sections which are changing on user input (such as a form!). Also try and keep the speed pretty fast; I don’t like waiting and neither do most of your site visitors.
For such a simple little piece of additional code, using the jQuery Flip plugin really is a nice way of adding a little extra to your forms.

As always, leave any comments and I’ll try and reply and if you have any discussion or whatever, head on over to the forum and share your thoughts and skills.

View the Demo Download the ZIP file

Related Posts

• AJAX and Google Integrated Search
• Javascript: JQuery Tabs
• Create a Parallax Website Header
• AJAX Image Gallery
• Creating a CMS Website Layout using Ext JS

Intoduction

To do this simple trick we are going to use three things:

• Feedburner Awareness API (which you don’t need to activate for this)
• cURL (should be enabled on most servers)
• PHP 5 (to read the XML we need a PHP5+ function)

I’m assuming here you have a Feedburner account with an active feed.

The PHP

So onto the php.

<?php
$feeduri = "progtuts"; //The bit that comes after http://feeds.feedburner.com/
//This is the old Feedburner url
//$url = "http://api.feedburner.com/awareness/1.0/GetFeedData?uri=". $feeduri;
//This is the new Google Feedburner url
$url="https://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=". $feeduri;
$ch = curl_init(); //Use cURL
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); //Return data rather then echo it
curl_setopt($ch, CURLOPT_URL, $url); //Pass in our url
$data = curl_exec($ch);
curl_close($ch);
$xml = new SimpleXMLElement($data); //Read the returned XML
$count = $xml->feed->entry['circulation']; //Get our subscriber count
?>

Thats it. Very simple. All we are doing here is using cURL to retrieve the XML output by the Feedburner API and convert it into a php variable. You can now use $count however you want.

Conclusion

To see an example of this view the demo below. I hope you find this little trick useful.

View the Demo

Related Posts

• AJAX and Google Integrated Search
• PHP Automatically Create Thumbnail Images
• AJAX Image Gallery
• PHP Login System
• PHP Optimization Tips

What will we need?

Chances are most of you are reading this using a tabbed browser so you know how useful such a thing is, and fortunately a tabbed section on your webpage is just a few simple lines of code away using the hugely popular JQuery framework.

Fortunately, this is a simple one – we just need the JQuery framework file and the JQuery UI javascript files. The UI downloader allows you to choose the features you want, so for this part I have just downloaded the tabs section. You also need some knowledge of CSS so you can style the tabs to look right.

Now we have what we need, let’s get started.

How to begin

The first thing we need to import the javascript files into your HTML file. The following code should be in the section of your html file.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="jquery-tabs.js"></script>

The next thing to do is be able to notify the script when the document is loaded; the page elements need to exist in order to change them into tabbed form.

<script>
$(document).ready(function()
{
	$("#tabs > ul").tabs(); // Note ‘#tabs’ refers to the div container storing the tab information.
});
</script>

Quite simply, this will be fired once the rest of the file has loaded up. Note that I am using the $(id) notation to select items from the document which is functionality provided by jquery. This is the only piece of javascript we will be using – it really is that easy!

We’re now ready to start adding content.

How to make the tabs

The tabs will be held within a div container, so we need to make that – note that it has the same name as we specified in our javascript in the previous section (in this case we used ‘#tabs’ so our div will have the id ‘tabs’). We list our tab headers and actions in an unordered list element.

Here’s an example:

<div id="tabs" class="tabs">
<ul>
	<li><a href="target"><span>One</span></a></li>
	<li><a href="target"><span>Two</span></a></li>
</ul>
</div>

Now, there are various ways to put data into each tab. Firstly, we can insert data from another div on the page – to do this we just make the link point to the id of the div. An alternative method is to use AJAX to put the contents of another file into a tab – to do this we just make the link point to the file and JQuery will do the rest, it’s really really easy!

Here’s our updated example, with one link pointing to a div containing some content on the same page, and the other pointing to another page:

<div id="tabs" class="tabs">
<ul>
	<li><a href="#example"><span>Example</span></a></li>
	<li><a href="another_file.html"><span>Another File</span></a></li>
</ul>
        <div id="example">
        Some Example Text
        </div>
</div>

Note here that I’ve made the example div within the tabs div.

Our other file (another_file.html) can contain anything including Javascript:

<p>This is text in another file</p>

That’s all the HTML we need, it’s that simple and once you’ve put it all down, pretty intuitive too!

Styling the tabs

It might be a little confusing, but we don’t actually specify the css titles for the page elements, but here are the ones we need to style, and exactly what they do. The easiest way to learn how the styles affect the layout is probably to download the sample code, run it and then change the styles to see what changes on screen – this is where you’ll need your CSS skills!
As a bit of a helper, here is the way the code will actually be displayed in the browser, courtesy of the JQuery UI Documentation:

<ul class="ui-tabs-nav">
	<li class="ui-tabs-selected"><a href="#fragment-1"></a></li>
	<li class="ui-tabs-unselect"><a href="#fragment-2"></a></li>
	<li class="ui-tabs-disabled"><a href="#fragment-3"></a></li>
</ul>
<div id="fragment-1" class="ui-tabs-panel"></div>
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide"></div>
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide"></div>

• li – The main reason we need to style this element is to tell it to be vertical (tab headers stacked on top of each other) or horizontal (tab headers side by side).
• .ui-tabs-nav – This is the section containing the tab headers – it is the full width or height of the entire tabbed pane so I would tend to find it best to simple style this to have the same background as the main page.
• .ui-tabs-selected – This is (as you would expect) the class that styles the currently selected tab header.
• .ui-tabs-unselect – This doesn’t actually do much – I don’t even bother applying styling to it. Leave a comment if you have a good use for it.
• .ui-tabs-disabled – This styles a disabled tab header.
• .ui-tabs-panel – This is the actual panel which displays the contents of the tab section.
• .ui-tabs-hide – This is to style the tabs that aren’t shown at the time – the minimum it must contain is ‘display: none;’.

Okay, so that’s the basic elements and if you only style those then I assure you it won’t look very good. Each tab header is a link, therefore we should style the links – this lets us style unselected tabs differently from selected tabs. To do this, we style the .ui-tabs-nav a element. This will be overridden by the .ui-tabs-selected element meaning we can show them both differently. That may all sound a little overly-confusing and cryptic, but in reality it’s straightforward – have a look at the sample code (style.css) and it should make sense. I’ve styled the demo to include a few effects I think look good and commented those to point them out.

Conclusion

JQuery tabs are very useful things to have on a webpage that contains a lot of content that needs organised. There is a fair amount more that you can do with them than I have shown here (the FAQ section in the Documentation is an excellent place to start) but hopefully I’ve given you the push forward to get you into producing your own effective interfaces!
JQuery really is an excellent framework and has a lot of really excellent applications so if you’re serious about adding javascript to your web applications I highly recommend you have a look through the documentation.

View the Demo Download the ZIP file

Related Posts

• AJAX and Google Integrated Search
• Create a Parallax Website Header
• AJAX Image Gallery
• Creating a CMS Website Layout using Ext JS
• Javascript: JQuery Flip

“What does this have to do with me?” you might be asking. Well we would like to encourage you to contribute your own tutorials to ProgTuts. There are several advantages to doing this. Not only can you contribute to the community and get your work shown on the site, but you will also get a lot of exposure and link to your site (remember we get thousands of views per month).

So if you are interested in helping us make this site fantastic and want your own work to appear on a high profile website such as ProgTuts, then head over to our contribute page for all the information you need. We hope to be hearing from you soon.

Related Posts

• Introducing ProgTuts New Look
• Forum Launch!
• News and Updates
• Tutorial Suggestions/Requests
• Launch!

Preperation

There is quite a lot of code in this tutorial so I am only going to cover the essential bits. To see the full code either go to the demo and “view source” to see how it was done or download the ZIP file with the source code. Anyway lets get started. First off some preperation.

• Download the latest version of the jQuery javascript library.
• Since we are integrating an AJAX Google search you will need to sign up for a Google AJAX Search API Key.

Don’t worry thats all we need.

1) The HTML

Now in the HTML head include our new javascript files. The jQuery file and a file imported from Google to power the Google search.

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script src="http://www.google.com/jsapi?key=YOURAPIKEY" type="text/javascript"></script>

Remember to place your API key in there. The main content of the HTML file should be as follows:

<div id="searchbox">
    <h1>Want to find something?</h1>
    <input type="text" id="search" value="Search..." autocomplete="off" />
    <div id="resultbox" style="display:none;">
        <div class="siteheader"></div>
        <div id="sitesearch"></div>
        <div class="googleheader"></div>
        <div id="googlesearch"></div>
    </div>
</div>
<div id="footer">
    Copyright &copy; 2008 My Company Inc
</div>

So what do we have here. Basically an input box (note no form tags) with an id and a value and the “autocomplete” parameter set to “off”. This is to stop the standard autocomplete box showing when you type stuff into the box. We then have a “resultbox” div (which is initially hidden) with 4 other divs. As you can see each type of search has 2 divs: a header and body div. If you were wanting to add other types of search here (like a yahoo search for instance) you can just add more divs as needed. And last but not least a footer (which is not required but I liked it). Not too complex huh.

2) The Javascript

Now this is where the fun starts. In your page head just after you have included the two javascript files add the following:

<script language="Javascript" type="text/javascript">
//<![CDATA[
google.load("search", "1");
 
$(document).ready(function() {
	$("#search").blur(function () {
		if($(this).val() == ""){
			$(this).val("Search...");
			$("#resultbox").css("display", "none"); 
		}
	});
 
	$("#search").focus(function () {
		if ($(this).val() == "Search...") {
			$(this).val("");
		}
	});
 
	$("#search").keyup(function () {
		$("#resultbox").css("display", ""); 
		$("#footer").css("display", "none");
		$(".siteheader").html('<img src="images/loading.gif" width="16" height="16" style="margin-right:8px; vertical-align:-15%;" />Loading Results from Site...');
		$(".googleheader").html('<img src="images/loading.gif" width="16" height="16" style="margin-right:8px; vertical-align:-15%;" />Loading Results from Google...');
 
		/* === Site Search === */
		$.ajax({ 
			method: "get",
			url: "sitesearch.php",
			success: function(html){  
				$(".siteheader").html('Results from Site:');
				$("#sitesearch").html(html); 
			}
		});
 
		/* === Google Search === */
		var sc = new GSearchControl();
 
		sc.addSearcher(new GwebSearch());
		sc.addSearcher(new GvideoSearch());
		sc.addSearcher(new GblogSearch());
		sc.addSearcher(new GnewsSearch());
 
		var drawOptions = new GdrawOptions();
		drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED);
 
		var foo;
		sc.setSearchCompleteCallback(foo, function(){
			$(".googleheader").html('Results from Google:');
		});
 
		sc.setNoResultsString(GSearchControl.NO_RESULTS_DEFAULT_STRING);
 
	    sc.draw(document.getElementById("googlesearch"), drawOptions);
		sc.execute(document.getElementById("search").value);
		/* === End Search === */
 
		if($(this).val() == ""){
			$("#resultbox").slideUp(700, function(){
				$("#footer").css("display", "");
			});
		}
	});
});
//]]>
</script>

“Wow” I hear you saying. Don’t worry I will explain what all of this does, but before I do I recommend you read through the code a few times and get a feel for it as it will help you understand it when I explain it.

Ok lets start off simple. The first line loads the Google search.

google.load("search", "1");

The next bit of code controls how the search box itself works. Basically if the search is blurred (ie you are not using it) and there is nothing in the box then it makes the value of the search box “Search…” and hides the result box. Simply resetting it. If you focus the search box, however, and the value is “Search…” it hides the word “Search…”.

$("#search").blur(function () {
    if($(this).val() == ""){
        $(this).val("Search...");
        $("#resultbox").css("display", "none"); 
    }
});
 
$("#search").focus(function () {
    if ($(this).val() == "Search...") {
        $(this).val("");
    }
});

The next part is defining the keyup event. What we are doing here is every time you release a key we are going to update the search. “Why not keydown?” I hear you ask. Well if you use keydown it will search the last value you entered and not the current one. Try it out to see what I mean.

$("#search").keyup(function () {
//...
});

So a few things need to happen once we have triggered the keyup event. Frist we need to display the resultbox div. Second, in this example, I hide the footer but if you don’t have the footer then miss this bit out. Third we set the HTML in our siteheader and google header divs. Basically this is just a loading image with some loading text.

$("#resultbox").css("display", ""); 
$("#footer").css("display", "none");
$(".siteheader").html('<img src="images/loading.gif" width="16" height="16" style="margin-right:8px; vertical-align:-15%;" />Loading Results from Site...');
$(".googleheader").html('<img src="images/loading.gif" width="16" height="16" style="margin-right:8px; vertical-align:-15%;" />Loading Results from Google...');

Next we are going to actually do our site search. This is simply an AJAX request (using jQuery of course) to a file called “sitesearch.php”. In this example our sitesearch.php file returns dummy data but in the real world this would search your website database and return the results. I’m not going into this in this tutorial as that is a tutorial in itself. Once the request is complete we update the siteheader and sitesearch divs with the appropriate content.

/* === Site Search === */
$.ajax({ 
    method: "get",
    url: "sitesearch.php",
    success: function(html){  
        $(".siteheader").html('Results from Site:');
        $("#sitesearch").html(html); 
    }
});

The next thing we need to do is the actual Google search. I wont go into this in too much detail as you can read Google’s own documentation to see what options there are.

• Create a new “GSearchControl”.
• Add different types of searches to the control. Its up to you what you want to include here.
• Set the “drawOptions” to Tabbed.
• Set our “searchCompleteCallback”. In here we just set the googleheader div to show appropriate content.
• Set the “NoResultsString” to default and set which element to draw our results to (the googlesearch div).
• Finally execute the search using the value from the search box

/* === Google Search === */
var sc = new GSearchControl();
 
sc.addSearcher(new GwebSearch());
sc.addSearcher(new GvideoSearch());
sc.addSearcher(new GblogSearch());
sc.addSearcher(new GnewsSearch());
 
var drawOptions = new GdrawOptions();
drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED);
 
var foo;
sc.setSearchCompleteCallback(foo, function(){
    $(".googleheader").html('Results from Google:');
});
sc.setNoResultsString(GSearchControl.NO_RESULTS_DEFAULT_STRING);
 
sc.draw(document.getElementById("googlesearch"), drawOptions);
sc.execute(document.getElementById("search").value);

The final part of our javascript code is some cleaning up. Simply if you delete all the characters in the search box we will close the result box (using some jQuery animation) and show the footer.

if($(this).val() == ""){
    $("#resultbox").slideUp(700, function(){
        $("#footer").css("display", "");
    });
}

And thats our javascript. I’ll let you take a break before we move on.

3) The CSS

I’m not going to say to much about the CSS as most of it is just standard styling. There is nothing fancy happening. There are a few style hacks for the google search but that’s about it. The main part of the CSS file looks like the following:

#searchbox {
	margin:0 auto;
	background:url(images/back.png) no-repeat top; 
	width:700px; 
	height:200px; 	
	margin-top:100px;
	padding:40px 0px 0px 40px;
	color:#fff;
}
#resultbox {
	border: 3px solid #999;
	background:#fff;
	padding:15px;
	width:620px;
	margin-top:5px;
	margin-bottom:10px;
	color:#000;
}
#footer {
	margin:0 auto;
	width:700px; 
	color:#999;
	padding-left:40px;
	margin-top:-25px;
}	
 
input {
	font-family:Georgia;
	font-weight:bold;
	font-style:italic;
	padding:10px;
	font-size:20px;
	border: 3px solid #ccc;
	width:630px;
}
 
input:focus,
textarea:focus,
select:focus {
  border: 3px solid #999;
}
 
#googlesearch, #sitesearch {
	margin-left:20px;
}
 
.googleheader, .siteheader {
	font-size:18px;
	font-family:Georgia;
	font-weight:bold;
	font-style:italic;
	margin:20px 0px;
	border-bottom:1px solid #ccc;
	color:#666;
}
.siteheader {
	margin-top:5px;
}
 
/* Google Style Hacks */
.gsc-search-box, .gsc-configLabelCell {
	display:none;
}
.gsc-control {
	width:100%;
}
 
.gsc-tabHeader {
	padding:3px 8px 5px 8px;
}
.gsc-tabhActive {
	border-top:2px solid #666 !important;
}
.gsc-tabhInactive {
}
 
/* Link Colour */
#resultbox a, .gs-title, .gs-title b {
	font-size:13px;
	font-weight:bold;
	color:#2253AA !important;
}
.gs-visibleUrl, .gs-visibleUrl-short {
	color:#666 !important;
}

To see the full CSS file download the source code.

Conclusion

And that is us. We have created an AJAX search with an Integrated Google Search to really help our users find what they are looking for. As always this is very flexible and this tutorial is only an example of what you can do. Let me know if you come up with any creative alternatives and post them in the comments.

View the Demo Download the ZIP file

Related Posts

• AJAX Image Gallery
• Creating a CMS Website Layout using Ext JS
• Javascript: JQuery Tabs
• Create a Parallax Website Header
• Create an Email Form using AJAX

A what file?

A .htacces file. A .htaccess file is used by Apache (ie not Windows hosting) to define certain rules for the directory you place it in and all sub directories. Some things you should know about a .htaccess file are:

• It is relatively powerful. You can really mess up a website if you do something wrong with this file.
• Due to the fact it is a file extension and doesn’t have a file name you can’t create one directly in Windows. In this case I would advise creating a text file (such as htaccess.txt), uploading it to the server and then using your ftp, or other, program to rename the file to .htaccess.
• Some ftp programs hide these files on the server. Usually they have an option to “show hidden files”. Make sure this is ticked so you can see the file.

Custom Error Pages

So lets get to it. Have you ever been on a website and got that annoying “Page Cannot be Found” message, otherwise known as a 404 error? Well you can change that and all other error pages by doing the following:

ErrorDocument 400 /errors/badrequest.html
ErrorDocument 401 /errors/authreqd.html
ErrorDocument 403 /errors/forbid.html
ErrorDocument 404 /errors/notfound.html
ErrorDocument 500 /errors/serverr.html
# Or you can do:
ErrorDocument 404 http://progtuts.info/en/404.html
# Or even...
ErrorDocument 401 "Hold the phone! You're not a <a href="member.html">member</a>. You can't see this page"

Pretty simple eh!

Password Protect Directories

This is another common thing people do. If you want to restrict access to directories but don’t want to faff about making your own HTML form authentication then you can use .htaccess combined with a .htpasswd file.

.htpasswd

anmadno41:cFwiw18lMik6I

This is quite simple. Just as username and password. The password is encrypted, however, but don’t worry as there is a neat online tool to help with this.

.htaccess

AuthName "Restricted Area" 
AuthType Basic 
AuthUserFile /home/mysite/.htpasswd 
AuthGroupFile /dev/null 
require valid-user

Again this isn’t too hard. AuthName can be anything you want. Its just a name given to the restricted area. AuthType Basic just means we are using basic HTTP authentication. AuthUserFile is the full server path to your .htpasswd file, note this is not a url. The final line just means that any valid user can access the directory. You could change this to require user anmadno41 to limit it to certain users.

Redirects

Redirects with .htaccess are pretty simple.

Redirect /old/oldfile.html http://yoursite.com/new/newfile.html

Here is a cool trick though. Say you want to work on a new deisgn for your website but don’t want visitors to see it. You could just password protect it as above, or you could redirect visitors to an update page explaining you are updating the website while still allowing you to access the files.

order deny,allow
deny from all
allow from 12.34.56.78
 
ErrorDocument 403 /maintenance.html
 
<Files maintenance.html>
allow from all
</Files>

This would redirect all visitors to maintenance.html while allowing your IP to access the files. Remember to change 12.34.56.78 and maintenance.html to your own IP and file.

Protecting Files and Directories

Say you want to restrict access to certain files (such as logs and dat files) that normally could be downloaded by accessing them through the browser. You can do the following:

<Files ~ "\.(log|dat)$">
deny from all
</Files>

Or what if you don’t have empty index.html pages in your directories but want to stop people for browsing your directories.

Options All -Indexes
# Or maybe only hide certain files:
IndexIgnore *.gif *.jpg

Force Downloading of Files

Here is a cool trick. Have you ever had a problem visitors streaming your media files instead of downloading them. You can force them to download the files by changing the MIME types to octet-stream.

AddType application/octet-stream .avi 
AddType application/octet-stream .mpg
AddType application/octet-stream .mov
AddType application/octet-stream .mp3
AddType application/octet-stream .wma
AddType application/octet-stream .pdf

Preventing Hot Linking of Images

Say you run a site with loads of images and you don’t want people “hot-linking” to your images and stealing your bandwidth. You can use a simple bit of code to prevent that:

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?mysite.com/.*$ [NC]
RewriteRule \.(gif|jpg|png)$ - [F]

Remember to change mysite.com to your own website. Note that this technique can also be used to protect hot linking of other files such as Javascript and CSS files by adding the file extensions to the rewrite rule (eg RewriteRule \.(gif|jpg|png|js|css)$ - [F]).

Nice/Clean Url’s

So you’ve got this url that looks something like
http://www.mysite.com/index.php?page=blog
and you want it to look more like
http://www.mysite.com/blog/
So how do we do that?

RewriteEngine On
RewriteRule ^([a-zA-Z0-9]+)$ index.php?page=$1
RewriteRule ^([a-zA-Z0-9]+)/$ index.php?page=$1

Using the .htaccess file and some regular expressions we can make a clean url. I’m not going to explain regular expressions here as that is a whole other topic but what this code basically does it take the last part of the clean url (/blog/) and redirect it to index.php?page=blog without actually showing the messy url. Great!

Conclusion

So there you have it. The anatomy of a .htaccess file. Hopefully this will help all you webmasters, as it helped me, to discover the advantages of using a .htaccess file on your website. For further reading why not check out:
Comprehensive Guide to .htaccess
.htaccess Tips and Tricks

Related Posts

• No Related Posts

Do we need special packages?

None that don’t already come in the Java build that you are using. We will be drawing the image onto the Graphics object in a JPanel. The Graphics object is from the AWT library and the JPanel is from the Swing library – simply import java.awt.*; and import javax.swing.*;
To make our lives simple we are going to take advantage of the Object Oriented nature of Java so that we are Manipulating objects and then drawing them to screen – this helps to separate logic from view and if you’ve already read my MVC with Java tutorial, you’ll realise that means we are going to do this using the Model View Controller architecture. If you don’t know what that is or haven’t really used it before, go and have a read now because I will assume in this tutorial that you are an MVC whizz-kid.

So, let’s get started!

What are we making?

A really simple example of animated 2D graphics is a Mouse-Trail application – a fading coloured line follows the mouse wherever it goes. This example is really simple and is only intended to get you familiar with the idea, and get you thinking about what you can create yourself. It is created by ticking a timer and at each tick taking the old mouse position and the new mouse position and creating a line between them. The fading part is done by then manipulating that line object – no need for fancy tricks or filters!
We are going to have quite a few classes, but most of them are only really to fulfil the MVC requirement which may seem a bit like overkill for this example, but will soon come into its own for a more detailed project.

• Model.java – This is the model, it stores details of all the lines in the drawing and sends notifications to the observers.
• View.java – This is the UI – in this case incredibly simple as it just makes a frame and puts a customised JPanel (canvas.java) in it. It is an observer to Model and will repaint the canvas. It also deals with the Timer.
• Controller.java – Unlike the MVC tutorial we actually have something for the controller to do here; it deals with working out the position of the mouse and telling the model.
• Canvas.java – This is where things are drawn! It extends JPanel and re-writes the repaint methods.
• Line.java – This is a line object, which stores where it should be stored and the transparency level.

Show us the code!

I’ll start off with the Line class because it is the building block that we need.

private int x1, y1, x2, y2;
private float transparency;
private Color colour;
private Model model;

These are the variables we will need. We store the start and end points as integers because this is what the Graphics object will draw a line with – floats and doubles etc. are useless to it.
The value of the transparency is stored as a float as it will be a ‘percentage’ of 1. I’ve also included a Color variable which will allow you to alter the colour that the line is drawn in. Finally, there is a Model variable so that the Line knows where it is being stored – this will also allow it to remove itself from the Model once it has full transparency (i.e. can’t be seen!).

public Line(int nx1, int ny1, int nx2, int ny2, Color c, Model m)
{
	x1 = nx1;
	y1 = ny1;
	x2 = nx2;
	y2 = ny2;
	transparency = 1;
	colour = c;
	model = m;
}

This is the constructor – nothing fancy, just setting all the variables to those given and setting the transparency to 1.
The rest of this class is given up to Get and Set methods which I won’t bother writing into the tutorial, but obviously they are in the sample code at the bottom of the page. The only one which is altered from the standard return method is the setTransparency method.

public void setTransparency(float transparency) 
{
	this.transparency = transparency;
	if(this.transparency<=0)
	{
		model.remove(this);
		return;
	}
}

This method sets the value and then checks if the transparency has gone equal to or below 0. If it has, it removes itself from the model containing it.

Next we will look at the Canvas class because it is what draws the lines.

private View parent;

This is the only variable we need for this class because it is very simple. If you are going to implement some custom Double Buffering, you will need to have a few more variables but that is outside of the scope of this tutorial.

public Canvas(View v)
{
	super();
	parent = v;
}

There is only a very simple constructor, just calling the super constructor and setting our only variable to the one given.

public void paint(Graphics g)
{	
	Graphics2D canvas = (Graphics2D)g;
	canvas.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
 
	Dimension d = getSize();
	g.setColor(Color.black);
	g.fillRect(0, 0, d.width, d.height);
	Vector<Line> lines = parent.getLines();
	for(int i=0; i<lines.size(); i++)
	{
		canvas.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER, lines.elementAt(i).getTransparency()));
		canvas.setColor(lines.elementAt(i).getColour());
		canvas.setStroke(new BasicStroke(3, BasicStroke.CAP_ROUND, BasicStroke.JOIN_ROUND));
		canvas.drawLine(lines.elementAt(i).getX1(), lines.elementAt(i).getY1(), lines.elementAt(i).getX2(), lines.elementAt(i).getY2());
lines.elementAt(i).setTransparency((float)(lines.elementAt(i).getTransparency()-0.02));
	}
}

This is the all-new paint method which will over-write the native one. Its job is very simple – draw a big black rectangle over the whole screen, then draw each line in the Model. We cast the Graphics object to a Graphics2D object to allow us to use Transparency and alter the stroke (thickness and style). We then make the changes we want to and then use the drawline method to draw it! Finally, we change the transparency of the line by a pre-set amount.

Next up we’ll make the Model class so that the View and the Controller will have something to communicate with.

private Vector<Line> lines;

This is the only variable in the Model and is just a container to store the Line objects. I have used a Vector but you can use anything you like as long as the size isn’t too constrictive – an array is bad because it really needs the size to be specified at the beginning.

public Model()
{
	lines = new Vector<Line>();
}

A simple constructor is all that is needed, and it just initializes our container for Lines.

public void update()
{
	this.setChanged();
	this.notifyObservers(lines);
}

This is the update method that is required for the class to fulfil its purpose as an Observable in the MVC architecture. It just sends the lines container to any observers.

public void remove(Line l)
{
	if(lines.contains(l))
		lines.remove(l);
}
 
public void add(int x1, int y1, int x2, int y2, Color c)
{
	lines.add(new Line(x1, y1, x2, y2, c, this));
}

These are the remaining methods in the class and deal with creating and removing lines. They are fairly self explanatory, and the only item of note is that the remove method ensures that the given line exists to avoid any errors.

Now that we have the Model we can create the Controller which sends all the information about the mouse location to the Model. It implements Observer so that it can be an observer to the Model.

public class Controller implements Observer, ActionListener, MouseMotionListener

This is the class declaration line, and as shown we implement Observer, ActionListener and MouseMotionListener. You may also wish to implement some others, for example a KeyListener or a MouseListener.

private Model model;
private int prevx, prevy;

The variables we need for the Controller are an instance of the Model so that data about events can be sent, and also the ‘old’ positions of the mouse in order to create start and end points for the line.

public Controller(Model m)
{
model = m;
	model.addObserver(this); // Register this class with the Model.
	prevx = -1;
	prevy = -1;
}

Again this is a very simple constructor, where the Model is set to the one given, and registers this Controller as being an observer. We also set the previous mouse values to -1 as this is an impossible number for the screen position to register and we can identify the first movement. If we didn’t do this, we would start off with a big ugly line from the top right corner (0, 0) to where the mouse is.

There are several methods we need to allow us to have the implementations of the class (Observer etc.) but most of them aren’t used. For this example we are only going to use ActionPerformed() and MouseMoved()

public void actionPerformed(ActionEvent e) 
{
	model.update();
}

Basically this method will be fired every time the timer in the View ticks, so all we want to do is update the model.

public void mouseMoved(MouseEvent arg0) 
{
	if(prevx>-1 && prevy>-1)
	{
		model.add(prevx, prevy, arg0.getX()-7, arg0.getY()-25, Color.GREEN);
	}
	prevx = arg0.getX()-7;
	prevy = arg0.getY()-25;
}

This is the section where we work out where the mouse is on the screen. As you will see we have the condition for checking our first-move values (prevx and prevy are set to -1 before the first move and changed after it). I’m also making a slight adjustment to the location of -7 on the x value and -25 on the y value to make it look like the line is being drawn from the tip of the mouse pointer. If you are using a different pointer, you may need to alter these values.

That’s the Controller done, so let’s move on to the final class – the View.

public class View extends JFrame implements Observer

In the class declaration we simply extend JFrame and implement Observer to allow this class to hold and show a JPanel as well as register as an observer to the Model.

private Model model;
private Controller controller;
private Canvas canvas;
private Vector<Line> lines;

The variables we need are basically just instances of everything else. We need a Model to register with, a Controller to deal with Timer ticks, a Canvas to show everything on and a Vector of lines to store the update from the Model for the Canvas to get a hold of and display.

public View(Model m)
{
	super("Mouse Trail Tutorial"); // Properly instatiate the Superclass JFrame.
	MakeThis(); // Set up the GUI stuff.
	model = m;
	model.addObserver(this); // Register this class with the Model
	controller = new Controller(model); // Make the Controller using the same Model
	Timer timer = new Timer(10, controller); // Make the timer use the Controller
	timer.start(); // ...and start it
	lines = new Vector<Line>();
	this.addMouseMotionListener(controller);
}

A fairly detailed constructor for the View, but it is fairly simple and is just about registering this with everything else and starting the Timer. Note that I’m adding the MouseMotionListener available through the Controller to the View instead of the Canvas – strictly it should be the Canvas but as we are only showing the Canvas it’s a bit neater to do it this way. There will be no difference to how it shows, it is just slightly less efficient if you were to have other objects in the Frame.

public void MakeThis()
{
	canvas = new Canvas(this);
	this.getContentPane().add(canvas);
	this.pack();
	this.setVisible(true);
	this.setLocation(250, 250);
	this.setSize(500, 500);
 
	this.addWindowListener(new WindowAdapter() 
	{
		public void windowClosing(WindowEvent e) 
		{
			System.exit(0);
		}
	});
}

This is a fairly straightforward method to create and show the View. It initiates the Canvas variable to be linked with this View, then adds it to the contentPane and sets the size and location of the View. It also sets the View to be visible and adds a window listener to close it properly when the ‘x’ at the corner of the screen is clicked.

public void update(Observable arg0, Object arg1)
{
	if(arg1!=null)
	{
		try
		{
			Vector<Line> temp = (Vector<Line>)arg1;
			lines = temp;
			canvas.repaint();
		}
		catch(Exception e)
		{
			System.out.println("Error; Invalid update object");
		}
	}
}

The update method is required to allow the View to be an observer, and this allows the Model to send data to it on update.
In this example, the data being sent is a Vector of Line objects so we attempt to parse the Vector from the update Object and then tell the Canvas to repaint using the new lines.

And that’s it, done!

Conclusion

Today we’ve made a very simple example that is very probably useless to you at this point in time, but it does introduce a few key concepts of making 2D Graphics in Java – in particular the idea of using objects to represent items on the drawing which can then be individually modified, and also using the Graphics2D object to give a bit more freedom in the techniques you can achieve.
If you are wondering what the point is in learning this kind of stuff, I’ve used these basic concepts to create a 2D graphics engine driving a full and extended version of Asteroids, an extension of the 2D graphics engine to produce a 3D mesh with Fractal composition, and a separate project to create a detailed and rather graphics-happy extension of Pinball.

I hope you’ve enjoyed reading this and it’s inspired you to try and create something of your own. I’d love to hear of any projects you use these concepts for!

Remember to head over to our forum if you have any problems or just want to talk about everything Programming!

Download the ZIP file

Related Posts

• Model View Controller with Java

The Files

So first of all we will need some javascript files:

• Download jQuery
• Download jParallax

There I told you this was simple. Next…

The Images

Before we do anymore its a good idea to create the images we will use in our header. You can have as many layers as you want but in this example we will use four images:

• Sky
• Sun
• Grass
• Tree

If you don’t know what I’m on about (or you don’t know what the Parallax effect is) have a look at this wikipedia article and you’ll see what I mean. So once we have our images then lets do some HTMLing.

The HTML

The HTML is where most of the work is done. I tell a bit of a lie here because most of the work is done by jParallax, but it is done automatically so we don’t really need to worry about it. So the HTML should look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery.jparallax.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<title>Parallax Website Header</title>
<script type="text/javascript">
jQuery(document).ready(function(){
	jQuery('#parallax').jparallax({});
});
</script>
</head>
<body>
 
<div id="parallax">
	<div style="width: 700px; height: 300px;">
		<img alt="" src="images/0_day.png"/>
	</div>
	<div style="width: 750px; height: 280px;">
		<img style="position:absolute; top:0px; left:350px;" alt="" src="images/1_sun.png"/>
	</div>
	<div style="width: 700px; height: 250px;">
		<img style="position:absolute; top:200px; left:0px;" alt="" src="images/2_grass.png"/>
	</div>
	<div style="width: 900px; height: 260px;">
		<img style="position:absolute; top:100px; left:150px;" alt="" src="images/3_tree.png"/>
	</div>
	<div style="width: 900px; height: 260px;">
		<img style="position:absolute; top:100px; right:150px;" alt="" src="images/3_tree.png"/>
	</div>
	<div style="width: 800px; height: 250px;">
		<h1 style="position:absolute; top:100px; right:355px;">My Site</h1>
	</div>
</div>
 
</body>
</html>

Pretty simple yeh? So what’s happening here.

• First off we include our javascript files that we downloaded. Remember to include the jParallax file after the jQuery file.
• Then we call our only bit of javascript. Just one function that initializes the jParallax on a specified div (in this case #parallax). Note you can pass in options here but we are just going to keep it simple and use the default options.
• Inside our parallax div we specify our layers. In this case each layer is a div but it could be a li or just an img. The important thing to note is the styles of the images and divs. This is what controls the feel of the parallax when it is active. Unfortunately there is no set scheme to calculate the sizes. Just play around with them until you get something that looks good.

And that’s that really. Obviously in this example we have put in some text as an example but anything could go inside the divs. Be creative.

The CSS

The CSS is almost too simple to mention but I will anyway. All we need to do is define the styles for #parallax.

#parallax {
	background:#ccc; 
	position:absolute; 
	overflow:hidden;
	width:700px; 
	height:300px; 
}

Important things to remeber about the CSS are:

• Height and width for each child must be explicitly set via CSS. jParallax also automatically gives each child position:absolute in order to start moving them around, so there’s no need to set it manually.
• The parallaxed element itself needs to have position:relative or position:absolute specified or the children will move relative to the document rather than the viewport!

Conclusion

So there you have it. A simple parallax website header. This example is relatively simple but if you use your imagination I’m sure you could come up with some cool ideas. If you do why not tell us about them in the comments below.

View the Demo Download the ZIP file

Related Posts

• AJAX and Google Integrated Search
• Javascript: JQuery Tabs
• Pure CSS Accordion Menu
• Creating a CMS Website Layout using Ext JS
• Javascript: JQuery Flip

I hope this new look will benefit everyone.

Related Posts

• Write For ProgTuts
• Forum Launch!
• News and Updates
• Tutorial Suggestions/Requests
• Launch!

What do we need?

Well, you need a page with a form containing a file field and a page to actually upload the file and make the thumbnail out of it. We will be using the PHP GD library which will need to be part of your PHP installation. In more recent versions of PHP I think it is included as standard. The library contains a load of image manipulation tools and I would highly recommend you have a look through it to see what other effects you can achieve.

Before we start, I have to highlight the fact that this tool should not be openly available to the public unless it has extremely tight security measures on what can be uploaded. We will be making a form which uploads files directly to your server which means rogue files could fill your server with junk or much worse compromise its security. Making it public is done at your own risk!

How do we do it?

Well, the form is really simple – a standard form using POST method and having an input of type ‘file’. For this project I’m also going to include a text input for the image name, but you don’t have to. The only different bit is that the form has to have ‘enctype=”multipart/form-data”’ as one of its fields in order to handle the file correctly.

<form enctype="multipart/form-data" action="upload.php" method="POST">
	What would you like to call the image?: <input type="text" name="image_name" id="image_name" />
	<br />
	What caption should the image have?: <input type="text" name="image_caption" id="image_caption" />
	<br />
	<input type="hidden" name="MAX_FILE_SIZE" value="3000000" />
	Pick an Image from your computer: <input name="user_image" type="file" />
	<br />
	<input type="submit" value="Upload" />
</form>

I’ve included the hidden field MAX_FILE_SIZE, but this is a really primitive form of checking the file size and is easily circumvented – you need to carry out proper checks in the next file…

The next bit is to take the file that we will get from that form and upload it to the server.

When a file is sent to another page, it is stored in one of the PHP global arrays called $_FILES. This array is kind of built in to PHP in the same way as $_GET or $_POST so you don’t need to initialize it. It is an associative array, so you can access more information about the file such as the filename, size, type etc. as well as its temporary location. When a file is uploaded, it is first put into a temporary location so that you can work out if it should be kept or thrown away. This tutorial is fairly simple and so I only have a very minor check to see if I don’t want it – I check the size and type:

// At this point you should check the size and type of the file supplied by the application.  Obviously because we are dealing with images here, the supplied file should
// be an image type.  I am restricting it to .jpeg but you will probably want to check more.
if($_FILES['user_image']['type'] == "image/jpeg" && $_FILES['user_image']['size'] < 3000000)
{
	// … accept the file
}
else
{
	// The file was the wrong format or size
?>
	<p>Error processing file.  It is the wrong format (.jpeg only) or too big.</p>
<?php
}

So, assuming that we want to keep the file, we now need to start doing some prep work for its new home on our server.

// The file supplied is valid...Set up some variables for the location and name of the file.
$target_folder = 'images/'; // This is the folder to which the images will be saved
$upload_image = $target_folder.basename($_FILES['user_image']['name']); // The new file location

This just sets up the target directory for the images to be stored in, and also the exact filename of the new image.
Now that we know where it’s going to go to, we use the move_uploaded_file PHP function to move the file from its temporary location into the newly specified home.

if(move_uploaded_file($_FILES['user_image']['tmp_name'], $upload_image)) 
{
	// Successful move…now do the image manipulation
}
else
{
	// There was a problem with the file and it wasn't moved to the server.
?>
	<p>Error processing file.  It may be too large.</p>
	<?php
}

You can see here we try to move the file from its temporary location (tmp_name) to its new location ($upload_image).

In this example, I am asking the user to specify the name of the file and also a caption for the file. Because of this, I need to get these variables and sanitize them:

include("mysql.php"); // Include the mysql file so that we can strip SQL from the variables (And we need the SQL connection later...)
 
// The following 2 variables depend on what was requested in the form - if it was only the image itself, they are unnecessary.
$newname = mysql_real_escape_string(strip_tags($_POST['image_name'])); // Get the supplied image name and sanitize it
$caption = mysql_real_escape_string(strip_tags($_POST['image_caption'])); // Get the supplied caption and sanitize it
 
// The following 2 variables specify the planned names for the 2 images (actual and thumbnail).  In this example, I specify .jpg as the extension, but if you are
// allowing multiple file extensions you may need to extend this to deal with the possibilities.
$thumbnail = $target_folder.$newname."_thumbnail.jpg"; // Set the thumbnail name
$actual = $target_folder.$newname.".jpg"; // Set the actual image name

…it’s all just about variable manipulation and this kind of thing will very likely vary from any product you build.

The next section is where we actually produce the new image in thumbnail size using some of the functions from the GD library.

// Get new sizes
list($width, $height) = getimagesize($upload_image);
$newwidth = 150; // This can be a set value or a percentage of original size ($width)
$newheight = 150; // This can be a set value or a percentage of original size ($height)
 
// Load the images
$thumb = imagecreatetruecolor($newwidth, $newheight);
$source = imagecreatefromjpeg($upload_image);
 
// Resize the $thumb image.
imagecopyresized($thumb, $source, 0, 0, 0, 0, $newwidth, $newheight, $width, $height);
 
// Save the new file to the location specified by $thumbnail
imagejpeg($thumb, $thumbnail, 100);

The functions are fairly self-explanatory, but basically what we do is get all the sizes we need (original dimensions and new dimensions), then use the imagecreatetruecolor function to create the thumbnail ‘canvas’ using the new sizes, and load the existing image (the big one we just uploaded) using imagecreatefromjpeg. Note that this function relies on use of a jpeg…you need to use other functions such as imagecreatefromgif to handle other file types. Our final 2 stages are to copy the $source image to the $thumb image using the imagecopyresized function, then ‘print’ the $thumb image to the server using the imagejpeg function (again, for other file types use the relevant function).

Because I am wanting to specify my own name for the image, I will now rename the original:

rename($upload_image, $actual);

The last thing to do now is to put the details into the database. I am using the same database format I described for the AJAX Image Gallery tutorial which this tutorial ties in with.

if(mysql_query("INSERT INTO images (caption, thumbnail, actual) VALUES('".$caption."', '".$thumbnail."', '".$actual."')"))
{
	// ...it did work properly.  Tell the user and do anything else you particularly feel like doing.
	?>
	<p>Image Successfully uploaded!<br />Actual image: <?=$actual;?><br />Thumbnail image: <?=$thumbnail;?><br />Caption: <?=$caption;?></p>
	<?php
}
else
{
	// ...it didn't work properly.  Unlink (delete) the actual and thumbnail files and then notify the user.
	unlink($actual);
	unlink($thumbnail);
	?>
	<p>There was an error storing your image in the database.  All traces of it on the server have been deleted.</p>
	<?php
}

What we do here is evaluate the success of the SQL query. If it is successful, you can do whatever you feel like doing! Otherwise, it’s a good idea to unlink (delete) the 2 images we have just spent so long making so that they aren’t in the way for future requests.

That’s it! All the code we need is right there.

In order to use it, you have to take care that both the form and the uploading script are password protected because of their ability to put stuff on your server. Make sure that you make the target directory the right place for the gallery to find them otherwise you’ll spend ages trying to find the images knowing that you had uploaded them but not knowing where they’ve gone!

Conclusion

With a pretty short and fairly simple script we can completely automate the process of making a thumbnail when uploading an image for use in a gallery. This is a really handy thing to do because it saves the gallery having to load up a big file, only to show it as a small file.

Of course, this tutorial has also shown how to upload any file, you just have to modify the requirements for the file and change what you do with the file once you have it (after all, you don’t want to try and resize a document file do you?).

I hope this has been of use to you and you can tie it in to any projects you are working with that require thumbnails – hopefully it will make things much easier!

Remember to pop over to the forum to talk to us about web related stuff, get help with some code or just a general chat.

Download the ZIP file

Related Posts

• AJAX and Google Integrated Search
• AJAX Image Gallery
• PHP Login System
• Create an Email Form using AJAX
• Plain Text Feedburner (Google Version) Subscriber Count [Updated]