Categories
Apache Web Server Tutorials & Tips Content / SEO Tips & Tutorials PHP Tips & Tutorials

How to build a php query string without question mark

As a result of the spreading SEO awareness and how Google works, it is always recommended to use as less dynamic URLs as possible for your site. If one must, try using as less variables in the dynamic URL as possible.

A dynamic URL is one with a question mark that passes dynamic variables to the script in the form of http://www.somesite.com/somescript.php?var1=value1&var2=value2. It’s not only ugly but also does no good in terms of search engine optimization. So how can we build php query strings without question mark so that search engines would treat them as static URLs?

Let’s take somesite.com for example. We are going to build a query string that works exactly like http://www.somesite.com/somescript.php?var1=value1&var2=value2 but without the question mark. To make this happen, you need to tamper with .htaccess at the document root of this domain. Add the following rewrite rules:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule ^/somescript.php/(.+)-(.+)_(.+)-(.+)$ /somescript.php?$1=$2&$3=$4

We have used a bit of regular expressions which you can get more information about at here.

With the rewrite rule we have come up with, the apache server then redirects all incoming requests in the form of /somescript.php/a-1_b-2 to /somescript.php?a=1&b=2, successfully rewriting the URLs from dynamic ones to static ones. Then you can use the new rewritten URL on your site and visitors and search engine crawlers would only know about the rewritten ones instead of the real ones.

For more information about how you can play with rewrite rules, visit the apache mod_rewrite document.

Categories
JavaScript Tips & Tutorials

Using JavaScript to refresh and reload an iframe on main page

<iframe></iframe> is useful in many aspects. There are times when you want to refresh the content of an iframe and reload the page in it, without refreshing that of the main page, and it can be achieved with a tiny property of iframe, src.

Let’s say you have an iframe of captcha that enables the user to refresh it and serves different security code every time.

<iframe name="security-code" id="security-code" src="/gen-captcha-image.php"></iframe> 
  

<a href="javascript:refreshCaptcha();">Refresh for new code!</a>

refreshCaptcha() looks like this:

<script type="text/javascript">
	function refreshCaptcha () {
		var code = document.getElementById('security-code');
		code.src = code.src; // that is the essence here
	}
</script>
Categories
CSS & HTML Tips JavaScript Tips & Tutorials

Check for file size with JavaScript before uploading

File uploading is a rather common feature of interactive sites. As all servers come with a limit on the size of the file being uploaded, it would be a usability blessing for users if web developers can implement a logic to check for the file size before uploading, informing the user if the size of the file exceeds the max allowed.

At the server side, it’s easy to weigh the file in bytes, with PHP, ASP or JSP. However it would be waste of resources if one can only check the size of the file that has already been uploaded because there’s no point to it if he is trying to inform the user if the file is too large.

So can this be done on the client side?

Internet Explorer

Yes, but partially and indecently. JavaScript is built with client safety in mind thus given no clearance to access client file system, falling unable to get the size of any chosen file. VBScript, on the other hand, can return the size of any client file with the help of ActiveX Object, the Microsoft proprietary scripting API.

Consider the code below:

<html>
<head>
<script>
function getSize()
{
	var myFSO = new ActiveXObject("Scripting.FileSystemObject");
	var filepath = document.upload.file.value;
	var thefile = myFSO.getFile(filepath);
	var size = thefile.size;
	alert(size + " bytes");
}
</script>
</head>
<body>
<form name="upload">
<input type="file" name="file">
<input type="button" value="Size?" onClick="getSize();">
</form>
</body>
</html>

Rather gross and obselete code with regard to modern front end coding standards, though it does the job. Run it on IE, select a file and click “Size?”, the browser alerts with the size of the file.

file size got by javascript

For IE, it’s the only way I know as of now that successfully checks the size of a given file completely on client side.

Firefox, Chrome, Opera, Safari, etc.

Now from hell to heaven, it’s much more doable than you may think. And it should be this way. For a file upload control like this:

<input type="file" id="myFile" />

With jQuery and the HTML5 File API specification implemented, you can use this simple snippet to access file properties such as size:

//binds to onchange event of your input field
$('#myFile').bind('change', function() {
	alert(this.files[0].size);
});

Thanks to Felipe Sabino for this solution.