Web Development Blog » Tutorials

404 Errors: Report, monetize and analyse

Olaf — Mon, 14 Jun 2010 04:57:00 +0000

After your websites getting more pages and links, the chance that a visitor will follow a dead link to your site exists. If a visitor is trying to access a page on your site, the server will report (normally) a 404 error. The response is by default some unfriendly page with some spare information about the error which let most visitors stop visiting your site. But using the 404 error the right way, you the site owner can collect important information like:

Of course the broken link or URL
The HTTP_REFERER information where the dead link is available
How often people try to access the bad URL

Using the right tools you’re able to turn 404 errors into a powerful resource:

Provide a site search feature and let people search what they are looking
Add advertisements to your error page and start earning money
Learn about what people like to see on your site

In this tutorial we will show you how-to:

Create a dynamic error page using the Google Site search and Adsense content ads
Setup Google analytics to track 404 errors using a filter
Set the site search feature with Google Analytics to collect the search queries from your visitor

Error reporting page

With the Apache webserver it’s possible to use custom directives for your error script, place this code into your .htaccess file (place the file into the site root):
ErrorDocument 400 /error.php?err=400 ErrorDocument 401 /error.php?err=401 ErrorDocument 403 /error.php?err=403 ErrorDocument 404 /error.php?err=404 ErrorDocument 500 /error.php?err=500
We use for the custom error script the most common HTTP errors.
Next we need to create a PHP script called error.php which can handle the different errors:


$errorNum = (int)$_GET['err'];
$err_str = array(404=>'Not Found', 400=>'Bad Request', 401=>'Unauthorized', 403=>'Forbidden', 500=>'Internal Server Error');
echo '



'</span><span style="color: #339933;">.</span><span style="color: #000088;">$err_str</span><span style="color: #009900;">[</span><span style="color: #000088;">$errorNum</span><span style="color: #009900;">]</span><span style="color: #339933;">.</span><span style="color: #0000ff;">'


An error occured: '.$err_str[$errorNum].'
 

 


';
?>

This script will show the different errors and also some advertisement if you add the ad code. Don’t forget to add the GA code snippet.

Track dead links in Google Analytics

In case of a 404 error the page title on this custom error page will be “Not Found”. We use the page title as a filter in Google Analytics to track the page views. Create a new profile for the site you’re working on and add this filter:

Adding Google Site Search to your 404 error page

If you haven’t done yet, create a Google site search for your website. Add only your own website to the list of searched sites and don’t search the entire web. Add your Google Adsense ID (section “Make Money”) and head to the section “Look and feel” and select the option Iframe. Choose a style for the search form / result and maybe you like to customize the style. Push now the button “Get code” (or enter the section “Get code” from the sidebar) and enter there the URL from your error page.
Copy / paste the code for the search form and the results into the body section from your error page. Your completed page will look like:


$errorNum = (int)$_GET['err'];
$err_str = array(404=>'Not Found', 400=>'Bad Request', 401=>'Unauthorized', 403=>'Forbidden', 500=>'Internal Server Error');
echo '



'</span><span style="color: #339933;">.</span><span style="color: #000088;">$err_str</span><span style="color: #009900;">[</span><span style="color: #000088;">$errorNum</span><span style="color: #009900;">]</span><span style="color: #339933;">.</span><span style="color: #0000ff;">'


An error occured: '.$err_str[$errorNum].'
 

  
    
    
    
    
    
  


 


';
 
if (empty($_GET['q'])) { // show the ad only if there is no search
	echo '
';
} 
echo '


';
?>

We placed the add code also into some IF clause, because there should not be another Google Adsense advertisement beside the Google ads from the result page.

Enable site search tracking in Google Analytics

The code for the error page is complete and we move to the last step: Tracking the site search queries from the error page. To do this we need to go in Google Analytics to the profile we created for the error page and click Edit (twice), check the setting Do Track Site Search, enter a “q” as the “Query Parameter” and click Safe Changes.

This error page is very basic and you need add your sites web template to make it complete. If you like this tutorial and you have used the code on your own site please share the URL to your new or updated error page. Even if you don’t like to use the code from this page, we advice to track the errors and also the site search queries from your visitors. If you have questions or comments please post them below.
Similar Posts:

Create PDF documents Online with TCPDF

Olaf — Thu, 27 May 2010 17:50:26 +0000

Many web applications using PDF documents for invoices, contracts and many other doc types. There are a few PHP classes which are able to create PDF documents online, one of them is TCPDF. This tutorial is about how-to use the TCPDF class while creating a simple invoice document. If you like to take a sneak peak on the result, check this website which generates the PDF Invoice document on the fly.

Why TCPDF and not some other PHP class?

TCPDF is based on the FPDF class, a very stable project written for PHP4. Since several years has TCPDF much more features than FPDF and is written for PHP5 (there is also a PHP4 version). The TCPDF has also some great documentation and of course examples for all important PDF jobs like:
WriteHTML and RTL support, Multiple columns, JavaScript and Forms, Bookmarks (Table of Content), Multicell complex alignment, Barcodes, Set PDF viewer display preferences, EPS/AI vectorial images and many more.

The Zend Framework has some PDF class too…

Yes right, the first plan was to write this tutorial about the Zend Framework, but after writing a few rows of code I’ve noticed that the PDF Class is missing some important functions, like the MultiCell, which is used to wrap multiple rows of text. It’s a required function which was suggested as the Zend_Pdf_Cell 2 years ago and didn’t find the way to the core version until now. I like the Zend Framework a lot but not for creating PDF documents, the PDF class is much too limited.

Okay let’s start the tutorial:

In this tutorial we create a PDF invoice including header logo, the invoice rows, an information box and some footer row.
In our code we include some PHP files, next we’ve created a small class extension to have a custom header/footer and some handy method which creates a text box.

require_once('tcpdf/config/lang/eng.php');
require_once('tcpdf/tcpdf.php');
 
class MYPDF extends TCPDF {
	public function Header() {
		$this->setJPEGQuality(90);
		$this->Image('logo.png', 120, 10, 75, 0, 'PNG', 'http://www.finalwebsites.com');
 
	}
	public function Footer() {
		$this->SetY(-15);
		$this->SetFont(PDF_FONT_NAME_MAIN, 'I', 8);
		$this->Cell(0, 10, 'finalwebsites.com - PHP Script Resource, PHP classes and code for web developer', 0, false, 'C');
	}
	public function CreateTextBox($textval, $x = 0, $y, $width = 0, $height = 10, $fontsize = 10, $fontstyle = '', $align = 'L') {
		$this->SetXY($x+20, $y); // 20 = margin left
		$this->SetFont(PDF_FONT_NAME_MAIN, $fontstyle, $fontsize);
		$this->Cell($width, $height, $textval, 0, false, $align);
	}
}

The header method has only two functions, one sets the image quality and the second will place an image (including hyperlink) on a defined place (x=120, Y=10, width=75). All coordinates are measured in Millimeters and the height for the image is calculated by the script. Inside the footer method we’re using some basic TCPDF methods to define the position, the font/style and the cell with the footer text. The third method (CreateTextBox) is just a group of TCPDF functions which makes it easier to place some text box into the PDF document. Note, the constant variable PDF_FONT_NAME_MAIN is defined inside the TCPDF config file, which is located inside the config directory.

The invoice header

The following code will create a TCPDF object with default values, the PDF meta data gets defined (author, title, etc.), a page is added and the invoice header with information is created using our custom text box method.

// create a PDF object
$pdf = new MYPDF(PDF_PAGE_ORIENTATION, PDF_UNIT, PDF_PAGE_FORMAT, true, 'UTF-8', false);
 
// set document (meta) information
$pdf->SetCreator(PDF_CREATOR);
$pdf->SetAuthor('Olaf Lederer');
$pdf->SetTitle('TCPDF Example');
$pdf->SetSubject('TCPDF Tutorial');
$pdf->SetKeywords('TCPDF, PDF, example, tutorial');
 
// add a page
$pdf->AddPage();
 
// create address box
$pdf->CreateTextBox('Customer name Inc.', 0, 55, 80, 10, 10, 'B');
$pdf->CreateTextBox('Mr. Tom Cat', 0, 60, 80, 10, 10);
$pdf->CreateTextBox('Street address', 0, 65, 80, 10, 10);
$pdf->CreateTextBox('Zip, city name', 0, 70, 80, 10, 10);
 
// invoice title / number
$pdf->CreateTextBox('Invoice #201012345', 0, 90, 120, 20, 16);
 
// date, order ref
$pdf->CreateTextBox('Date: '.date('Y-m-d'), 0, 100, 0, 10, 10, '', 'R');
$pdf->CreateTextBox('Order ref.: #6765765', 0, 105, 0, 10, 10, '', 'R');

Invoice Rows

Now we create the information about the products we like put into the PDF invoice. First we create some headers and than we use a foreach loop to output our $orders array.

// list headers
$pdf->CreateTextBox('Quantity', 0, 120, 20, 10, 10, 'B', 'C');
$pdf->CreateTextBox('Product or service', 20, 120, 90, 10, 10, 'B');
$pdf->CreateTextBox('Price', 110, 120, 30, 10, 10, 'B', 'R');
$pdf->CreateTextBox('Amount', 140, 120, 30, 10, 10, 'B', 'R');
 
$pdf->Line(20, 129, 195, 129);
 
// some example data
$orders[] = array('quant' => 5, 'descr' => '.com domain registration', 'price' => 9.95);
$orders[] = array('quant' => 3, 'descr' => '.net domain name renewal', 'price' => 11.95);
$orders[] = array('quant' => 1, 'descr' => 'SSL certificate 256-Byte encryption', 'price' => 99.95);
$orders[] = array('quant' => 1, 'descr' => '25GB VPS Hosting, 200GB Bandwidth', 'price' => 19.95);
 
$currY = 128;
$total = 0;
foreach ($orders as $row) {
	$pdf->CreateTextBox($row['quant'], 0, $currY, 20, 10, 10, '', 'C');
	$pdf->CreateTextBox($row['descr'], 20, $currY, 90, 10, 10, '');
	$pdf->CreateTextBox('$'.$row['price'], 110, $currY, 30, 10, 10, '', 'R');
	$amount = $row['quant']*$row['price'];
	$pdf->CreateTextBox('$'.$amount, 140, $currY, 30, 10, 10, '', 'R');
	$currY = $currY+5;
	$total = $total+$amount;
}
$pdf->Line(20, $currY+4, 195, $currY+4);

After the headers and after the list of invoice items we create a line. Inside the loop, we use the variable $currY to raise the Y coordinate by 5 for each new row. The row amount is calculated by PHP and also the total amount is raised inside the foreach loop.

Invoice footer and information

First we create a total row using the value from the variable $total we created before. After that row we have a MultiCell which can hold the payment conditions or just some other information. You can use HTML code in this cell as well, for example a link to your terms and conditions.

// output the total row
$pdf->CreateTextBox('Total', 20, $currY+5, 135, 10, 10, 'B', 'R');
$pdf->CreateTextBox('$'.number_format($total, 2, '.', ''), 140, $currY+5, 30, 10, 10, 'B', 'R');
 
// some payment instructions or information
$pdf->setXY(20, $currY+30);
$pdf->SetFont(PDF_FONT_NAME_MAIN, '', 10);
$pdf->MultiCell(175, 10, 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

Vestibulum sagittis venenatis urna, in pellentesque ipsum pulvinar eu. In nec nulla libero, eu sagittis diam. Aenean egestas pharetra urna, et tristique metus egestas nec. Aliquam erat volutpat. Fusce pretium dapibus tellus.', 0, 'L', 0, 1, '', '', true, null, true);
 
//Close and output PDF document
$pdf->Output('test.pdf', 'F');

At the end we call the output method which will safe the created PDF under the name test.pdf and sends the document to the browser.

This is just an example to show how easy it is to create PDF files online. Before you start your own PDF scripts, check all the TCPDF examples to get an idea how-to use the different methods.

Similar Posts:

Best methods to optimize JPEG images for websites

Olaf — Mon, 22 Mar 2010 06:53:01 +0000

While Internet connections becoming faster and faster, it’s still important to keep your website as fast as possible. One of the “slow” parts of your website are the images. In this article we show several ways to down-size the JPEG images for your website.

If you design your website should use some compression for your photos, banners and many other web elements. You favorite image editor should have some function to down-size your images. For this article we compare 4 ways to compress our example photo (file-size 393KB):

Adobe Photoshop

If you use the “Save for web…” function it’s possible to create a web optimized version from your image that is small enough and has a quality which is good enough for the Internet. In our example we used the preset “High Quality” which is equal to 60% quality. The result is a smaller file with a file-size of 95KB.

Adobe Fireworks

Fireworks is my favorite web image editor because of the unique feature to have bitmap and vector elements in a single file. We did an export with 80% quality and the compressed version has a file-size of 85KB.

GIMP (free Image Editor)

Both Adobe products are not free and are only available for Wndows or Mac. If you need a free editor you should try Gimp, an Image editor which many functions like the other commercial products mentioned before. The editor has also a “Safe for web” function and we used and 86% quality for our export file which becomes a size of 87KB. If you use GIMP to down-size your photos from your digital camera you should check the option “Strip EXIF”, removing the photo’s meta data will make the file smaller for another ~10KB.

ImageMagick (command line tools)

The last option is a tool we used via the command line. Using the following command the file is down-sized using an 80% quality (file size after conversion is 89KB):

convert original_100.jpg -quality 80 imagemagick_80.jpg

Sure this method works different from the other methods but the good point is that you can use this code in your PHP scripts or just from the command line of your web server.

Original image and compressed copies

Check the images below and note that the quality for the compressed images (file 2-5) is very similar.

The results after compression is very similar and the file size is between 85KB (fireworks) and 95KB (Photoshop). If you’re looking to down-size another 5-10%, you should try Smush.it a free service from Yahoo. They offer a tool which is able to optimize your images for 5-10% smaller file size without to lower the grade of quality.

Optimize your JPEG images with ImageMagick and PHP

If you need to optimize the images for your existing website, the following code might be useful:


$dir = '/home/some_directory/'; // the directory with your files
$compr = 80; // the quality precentage
if ($handle = opendir($dir)) {
	while (false !== ($file = readdir($handle))) {
		$path = $dir.$file;
		if (is_file($path)) {
			$ext = pathinfo($path, PATHINFO_EXTENSION);
			if (preg_match('/^(jpg|jpeg)$/i', $ext)) {
				exec(sprintf('convert %s -quality %d %s', $path, $compr, $path));
			} 
		}
	}
	closedir($handle);
}
?>

Just enter the path to the the directory you like to optimize safe the code as a PHP script and execute the file from the command line of browser. Note only the JPEG files are getting compressed.

Optimize your images top make them load faster, but be careful don’t compress them too much. Similar Posts:

Your e-mail address hidden with jQuery?

Olaf — Thu, 25 Feb 2010 17:35:17 +0000

Last week we published an article with different methods to hide e-mail addresses on websites. Because of several comments with suggestions on how-to solve this problem, we provide this week a solution which is “from these days” and more powerful.

Based on the idea if you don’t show an address, a spambot can’t see it, we use in our example a simple Ajax call (using jQuery) and show a tiny box with some friendly message including the link with e-mail address.
DEMO: We used the code from this tutorial on the this page.

How does it work?

First we need to create a simple php file that holds the content and the e-mail address, we use json_encode to make the string less readable:


// change the two vars below
$email = 'user@mail.com';
$html = 'Please contact us by e-mail: %%mAdr%%


Close';
 
$eparts = explode('@', $email);
$data = array('ename'=>$eparts[0], 'dom'=>$eparts[1], 'htmlcode'=>$html);
echo json_encode($data);
?>

Don’t forget to block that file in your robots.txt file!

Now we need a function that will load the external content into the current page using an Ajax request.

$(document).ready(function() { 	
	$("#clickme").live('click', function() { 
    	$.ajax({
	  		url: 'glink.html',
                        dataType: 'json',
	  		success: function(data) {
				var adr = data.ename + '@' + data.domain;
	  			var newdata = data.htmlcode.replace(/%%mAdr%%/g, adr); 
				$('span#ajaxresp').html(newdata).slideDown('slow');
				return false; 				
	  		}
	  	});
	});	
	$("#hideme").live('click', function () { 	
		$("span#ajaxresp").html('').slideUp('slow');
		return false; 
	});
});

jQuery code in detail

A visitor has clicked the element with the ID “clickme” and the Ajax request for the file “glink.php” is done. On “success” parse the html string with the two other json pairs and add the result to the SPAN element with ID “ajaxresp” is filled with the response from the external file and the box will slide down. To make the elements from the Ajax content accessible, we use “live()” events instead of the “regular” click event.
The visitor need to click the element with ID “hideme” to slide an empty “Ajax box” back to the original position.

Additional we give our dynamic email box some style using CSS:

span#ajaxresp {
	margin: 5px 0;
	text-align: center;
	padding:10px;
	display: none;
	border:2px solid #CCCCCC;
	background-color:#EDECEB;
}

The following code holds the “contact” link which is using the click event and the small container where the Ajax response data is placed.

<a href="javascript:void(0);" id="clickme">Contact</a><span id="ajaxresp">

If your visitor has clicked this “contact” link the following box appears:

If you have the jQuery and CSS code in external files, it’s possible to use the function on all your pages. The best thing is that the loaded box has also room for a personal message for your visitor. It’s just a simple solution without the need of building a contact form. This was the third article of a series with solutions on how-to add the contact information to your article or website.

Similar Posts:

E-mail links, protective solutions against SPAM

Olaf — Mon, 15 Feb 2010 21:14:38 +0000

If you place your e-mail address somewhere visible on your website, it will be only a matter of time until your e-mail account will get more and more spam messages. There are lots of spam bots checking the Internet for email addresses on regular websites, forums, blog and mailing lists. Once caught by some spam bot your mailbox is in need of a strong spam filter or sometimes it might be better to use a new e-mail address.

In this article we show you different ways, how you’re able to show your e-mail address to human visitors and hide it for spam bots.

Don’t forget, the solutions mentioned in this article are not a total protection against spam. If you share your e-mail address online, the chance that your e-mail address get on a spammer’s list is big. We advice that if you need to share an e-mail address with your websites’s visitor, to not use your personal e-mail address.

With each solution we give a review for:

Integration: Is this function easy to integrate even for a less experienced webmaster.
Protection: Is the e-mail address protected against spam bots.
User friendly: Is the solution easy to use for a website’s visitor

The simple solution, an image from your e-mail address

Just providing image version is very simple and easy. Open your image editor, create a small image from your email address and upload the image to your website.

After this you’re able to place that address in to the HTML, just on that place where you need it. It’s safe for your e-mail address and it’s simple to use that image in your website document or CMS. There is one big issue with this solution: The visitor has to type over your e-mail address to his e-mail program.

Hide the @ symbol

There are different ways to hide the format of an e-mail address. Hoe does this work? Changing the format of some email address or just hiding parts from the e-mail address makes it more difficult for spam bots to find them. For example:

user@email.com
user at email dot com

While the first one is very webmaster friendly, it’s not be the best protection for your e-mail address. The second example is used very often because this “faked” address is easy to add to your content. Both formats are recognized by smarter spam bots.

Hide your e-mail address using PHP

The following example will convert the string of some e-mail adress into unicode values:

function convert_email_adr($email) {
    $pieces = str_split(trim($email));
    $new_mail = '';
    foreach ($pieces as $val) {
        $new_mail .= '&#'.ord($val).';';
    }
    return $new_mail;
}

Use this function in your web page like:

 echo convert_email_adr('user@email.com'); ?>

The output in your html is like:

user@email.com

This way the e-mail address is visible to the visitor like normal. Using this format for a mailto: link will open a new window from the visitor’s e-mail program. There might be a few spam bots which are able to read this format as well.

Some JavaScript solution

The last solution is very similar to the PHP snippet and requires similar handling to add some email link to your website. Place the following function into your HTML document or include the code as an external JS file:

<script type="text/javascript">
function create_mail(naam, domain, tld, label) {
    var mail;
    mail += '+ 'ma' + 'il' + 'to:' + naam;
    mail += '@' + mail + domain '.' + tld;
    mail += '">' + label + '<' + '/a>';
    document.write(mail);
}
script>

Use this code inside the website content:

<script type="text/javascript">create_mail("user", "email", "com", "e-mail");script>

This method is very protective against spam bots, but will not work if JavaScript is disabled in the visitors browser. On the other site this code is very flexible and easy to use.

You see there are many different ways to add your e-mail address to your website without to expose the it to spam bots. If you search Google you will find much more examples, some of them are safe and some of them might have a better usability. If you don’t like to show your email address you should use a contact form on your website. If you know some great and easy function to hide an e-mail address in HTML code, please post it below. If you like this article please share the link on twitter or facebook, thanks.Similar Posts:

Google Custom Search in a Lightbox!

Olaf — Fri, 05 Feb 2010 08:42:33 +0000

There are several tutorials on the Internet on how-to integrate the Google Custom search in your website, but the results are not very attractive. The older iframe version doesn’t fit perfectly in most of our templates and the style for ads and results doesn’t look good in the past. A few month Google has released some nice new features:

Custom search element placements
Custom styles and themes using CSS
Promotions, set your own premium results for specific search queries
A new AJAX powered CSE using the Google AJAX API loader

With all these new features the CSE (Custom Search Engine) becomes very attractive to use it on your own site as site search. In this tutorial we show you how-to add the custom search feature to you site using jQuery, the Thickbox plugin and the AJAX API provided by Google. To do this a result page is not necessary anymore, we show only a search box somewhere on a particular website.

Including the Google API, jQuery and the Thickbox plugin

First include the following rows to your page HEAD, you need to add them on every page where you like to show the search box.

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<link rel="stylesheet" href="thickbox.css" type="text/css" />
<script type="text/javascript" src="thickbox.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi?key=YOURAPYKEY"></script>

To use the Google API you need to register an API key for your website, request a key here.

HTML code for the search box

Below the simple HTML code for the search form and the container for the results. Place both somewhere on your webpage.

<div id="searchcont">
	<label for="query_input">Search Query: </label>
	<input type="text" id="query_input" />
	<input type="button" value="ok" id="searchbtn" />
</div>
<div id="resultcont">
	<div id="title" style="visibility:hidden;"><a href="#">Close</a></div>
	<div id="results"></div>
</div>

jQuery code snippet

The following JS code will load the Google API and if the user has clicked the search button the customSearchControl is initiated, the Thickbox is called, the title inside the Thickbox becomes visible, the result element is prepared and at last the input element value is executed for the search query. Add this code in your page’s HEAD surrounded by some script tags.

google.load('search', '1');
$(document).ready(function() {
	$("#searchbtn").click(function () {
		var customSearchControl = new google.search.CustomSearchControl('UNIQUE_CSE_ID');
		tb_show("", "#TB_inline?height=480&width=800&inlineId=resultcont&modal=true");
		$('#title').css("visibility", "visible");   
		var drawOptions = new google.search.DrawOptions();
		customSearchControl.draw(document.getElementById("results"), drawOptions);
		customSearchControl.execute(document.getElementById("query_input").value);
	});
	$("#title a").click(function () {
		tb_remove();
		$('#title').css("visibility", "hidden");   
		$("#results").hide();
	});
});

The other click event is used to hide the Thickbox, the event will hide the title and hides also the results. The last action is needed because we show an inline element, if we don’t hide the content the results are still visible after the Thickbox is closed.

That’s all, simple or not? The code above needs of course some styling. I used a slightly modified version for my network site search on this blog. If you search for “wordpress” you see the “promotion” feature I mentioned above.

Similar Posts:

Ajax requests using jQuery and PHP

Olaf — Thu, 24 Dec 2009 06:17:52 +0000

Our last tutorial about the flickr API was an example on how-to search the flickr photo database for images using some short PHP code. This time we will use parts from the past tutorial together with some jQuery Ajax requests to show our photo search result without reloading the web page.

jQuery’s Ajax implementation

One of the most powerful jQuery functions is the Ajax function. The function provides enough options to make your XMLHttpRequest flexible enough to define;

what type of response you need like to handle in your Ajax application (XML, JSON, HTML, script or text)
an option about what the script need to do before the request is send (validations, set a pre-loading image, etc.)
What to do after the request and response are successful
and options like the request URL (f.e. your PHP script), the time-out value and more. Check the jQuery page for all available options.

The Ajax powered flickr image search

In this tutorial we will create a PHP script that will search the flickr database for posted values using the flickr API. On the client site we will use some simple HTML search form and some easy to understand jQuery Ajax code to handle the requests. If you like to test this tutorial code your should try our flickr Ajax search demo.

HTML search form

For this tutorial we create a simple form with only one search field and a button. Below the form we have a DIV container with ID result as placeholder for the images. Inside the header we need to include the latest jQuery library, download a copy from the jQuery website if you haven’t done yet.

<form>
	<div>
		<label>Enter keyword</label>
		<input type="text" name="search" id="search" value="" />
		<input type="button" name="submit" id="searchBtn" value="Search" />
	</div>					
</form>
<div id="result"></div>

jQuery Ajax functions

We use a click event to process the search if the user had clicked the forms button. Before we post the request to our PHP file getFlickr.php, we perform a test for the search field. If there is no search string we return to the document with an error message. Otherwise we send the posted value to our script for further processing. If the response is successful, we pass the data to our target container with the ID result.

$(document).ready(function(){
	$('#searchBtn').click(function() { 
		var searchVal = $('#search').val();
		$.ajax({
			type: 'GET',
			url: 'getFlickr.php',
			data: 'search=' + searchVal,
			dataType: 'html',
			beforeSend: function() {
				$('#result').html('');
				if(!searchVal[0]) {
					$('#result').html('Please enter a keyword as search value.
');   	
					return false;
				} 	
			},
			success: function(response) {
				$('#result').html(response);
				tb_init('a.thickbox');
			}
		});
	});
});

PHP code for the flickr API

the following PHP snippet is based on the flickr API tutorial from the last. If you need information about the API methods, please check the previous tutorial.


class Flickr { 
	private $apiKey = 'YOUR_API_KEY'; 
	public function __construct() {
	} 
	public function search($query = null) { 
		$search = 'http://flickr.com/services/rest/?method=flickr.photos.search&api_key=' . $this->apiKey . '&text=' . urlencode($query) . '&per_page=12&format=php_serial'; 
		$result = file_get_contents($search); 
		$result = unserialize($result); 
		return $result; 
	} 
}
 
if (!empty($_GET['search'])) {
	$Flickr = new Flickr; 
	$data = $Flickr->search(stripslashes($_GET['search'])); 
	$html = '';
	if (!empty($data['photos']['total'])) {
		$html = 'Total '.$data['photos']['total'].' photo(s) for this keyword.
';	
		foreach($data['photos']['photo'] as $photo) { 
			$html .=  '
			 . $photo["farm"] . '.static.flickr.com/' . $photo["server"] . '/' . $photo["id"] . '_' . $photo["secret"] . '_s.jpg" alt="" />'; 
		}
	} else {
		$html = 'There are no photos for this keyword.
';
	}
	echo $html;
}
?>

In this script we accept only the ~~POST~~ GET values from the HTML form we have created. If the ~~post~~ GET var is empty we stop the script and shoot some default error, because the field validation was already done on the client side. Next we query the flickr API for the search value and if we have a positive result (getting some photos) we use a foreach loop to create the HTML code for the thumbnails (note the _s at the end of the image file name) At the end we echo the response in HTML format. Save this script under the getFlickr.php

If everything works fine and your search has returned some photos, you script should looks like this:

If you need more control on how your form and result should work, check the jQuery documentation. Maybe you like to use more animation effects for the results.
Similar Posts:

Search for photos using PHP and the flickr API

Olaf — Fri, 18 Dec 2009 22:25:33 +0000

This PHP tutorial will show how to create a simple PHP class to search the flickr site for some photos. To get the data we use the flickr API to run a simple search and return the results in a serialized array.

We will be using the php function "file_get_contents" to receive data from flickr. The data which we will receive will be a serialized PHP array which means all we need to do is unserialize the array and we will easily be able to use the data returned. As an alternative we can use a cURL function to get the data, for example if the function "file_get_contents" is not allowed on your web host.

API Authentication

The API methods we use in this tutorial doesn’t require any authentication, but we need to use an API key. Get your API key on the flickr web application site (You need an Yahoo account to login).

Provide some information about your application:

and obtain your personal flickr API key and secret (We need only the key in this tutorial)

Flickr PHP Class

First we create the class structure for our class, we define a private variable for the "API key", a class constructor and the function that will search later for the images.

class Flickr { 
	private $apiKey = 'YOUR API KEY HERE'; 
 
	public function __construct() {
	} 
 
	public function search($query = null) { 
	} 
}

The API method we will be using is "flickr.photos.search", which has a number of possible parameters. We are able to search by tags, full text, tell the API which user to search for, the minimum date it a photo was uploaded and many more. You can find a list of the parameters in the flickr documentation.

So we’re going to run a full text search and limit the number of results to 50.

 
	public function search($query = null) { 
		$search = 'http://flickr.com/services/rest/?method=flickr.photos.search&api_key=' . $this->apiKey . '&text=' . urlencode($query) . '&per_page=50&format=php_serial';
		$result = file_get_contents($search); 
		$result = unserialize($result); 
	}

Notice at the end of $search we have "format=php_serial" other available response formats are rest, xml-rpc, soap and json.

The data which will be stored in the variable $result is a serialized array, so simply unserialize it and return the data. Find below the complete class code and store the code in a file named "flickr.php"

class Flickr { 
	private $apiKey = 'YOUR API KEY HERE'; 
 
	public function __construct() {
	} 
 
	public function search($query = null) { 
		$search = 'http://flickr.com/services/rest/?method=flickr.photos.search&api_key=' . $this->apiKey . '&text=' . urlencode($query) . '&per_page=50&format=php_serial'; 
		$result = file_get_contents($search); 
		$result = unserialize($result); 
		return $result; 
	} 
}

How-to use our PHP class

Create a new PHP script file and add this code:

require_once('flickr.php'); 
$Flickr = new Flickr; 
$data = $Flickr->search('design inspiration'); 
foreach($data['photos']['photo'] as $photo) { 
	// the image URL becomes somthing like 
	// http://farm{farm-id}.static.flickr.com/{server-id}/{id}_{secret}.jpg  
	echo ' . $photo["farm"] . '.static.flickr.com/' . $photo["server"] . '/' . $photo["id"] . '_' . $photo["secret"] . '.jpg">'; 
}

This file simply includes the flickr class we wrote, creates a new instance of the class, runs a search for "design inspiration" and finally loops through the returned data and sends the output to the browser.

Similar Posts:

Create custom reCAPTCHA images using their API

Olaf — Mon, 07 Dec 2009 08:12:28 +0000

If you need to spam protect your contact, comment or any other public form you should think about using a CAPTCHA image. A CAPTCHA image is an image with a random text which spam bots can’t read. The visitor need to enter that text into a form field and only if there is a match the form get processed.

Try a search for “CAPTCHA image” on Google and you will find a lot of scripts, some of them are powerful and some of them are not very effective. I’m using reCAPTCHA since several years, their challenge image is very effective and safe and if people can’t read it they can listen to an audio file.

I’m sure you have seen this image before, this is the challenge image you get with their default configuration. if you don’t like this huge RED image (like me) you need a custom theme. The good news is they offer a very powerful API system for the client side and also for the server side. In this tutorial we use some jQuery code together with the reCAPTCHA ajax library to generate the challenge images. The validation process is done by a PHP script that use a simple cURL function to submit the request and response to the reCAPTCHA server to test the submitted match. We use also the jQuery form plugin to process the form fields and client side validation.

If you like to see how it looks like check this custom CAPTCHA theme demo page.

reCAPTCHA client side script

Before we start we need to register a domain name at the reCAPTCHA website to receive a public and private key. To create a custom challenge image the Ajax way, we need to include the external file recaptcha_ajax.js and we use the following JavaScript code:

var RecaptchaOptions = {
	theme : 'custom'
};
Recaptcha.create('your public key', 'recaptcha_image', RecaptchaOptions);
Recaptcha.focus_response_field();

There is only one option required for this custom function, check this link if you like to set more options.
Next we need a small HTML snippet to show the challenge image:

<div id="recaptcha_image"></div>
<p>
	<input type="text" name="recaptcha_response_field" id="recaptcha_response_field" size="30" />
	<input type="submit" value="Submit" id="submit_button" /> 
</p>

To get this working you need to create a form text field with the name and ID recaptcha_response_field, use the same ID name of the target DIV container as you used in the JavaScript function. Using both snippets in used in a HTML page will generate a neutral CAPTCHA image like:

The current code doesn’t process our CAPTCHA validation script. We do this using jQuery and the jQuery form plugin. In this tutorial we do not explain how the plugin works, we did that already in this jQuery form plugin tutorial. In the next JavaScript snippet we check if the text field is not empty and if there is a response we hide the form and show the response in the DIV container output.

$(document).ready(function() { 
	var options = { 
        target:        '#output',   // target element(s) to be updated with server response 
        beforeSubmit:  showRequest,  // pre-submit callback 
        success:       showResponse,  // post-submit callback 
        url:       'recaptcha.php'  // override for form's 'action' attribute 
    }; 
    $('#myform').submit(function() { 
        $(this).ajaxSubmit(options); 
        return false; 
    });
	var RecaptchaOptions = {
		theme : 'custom'
	};
 	Recaptcha.create('your public key', 'recaptcha_image', RecaptchaOptions);
}); 
// pre-submit callback 
function showRequest(formData, jqForm, options) { 
	var resp_field = $('input[name=recaptcha_response_field]').fieldValue();
	if (!resp_field[0]) { 
		alert('You need to enter the validation string.'); 
		return false; 
	} 
} 
// post-submit callback 
function showResponse(responseText, statusText)  { 
    if (statusText == 'success' && responseText != '') {
    	$('#formcont').html(''); 
	} else {
		alert('Error while processing your request\nPlease try it again on a later moment.'); 
	}
}

Server side validation script

Next we need to create a PHP script called recaptcha.php that will validate the entered text from our CAPTCHA image.

if (!empty($_POST['recaptcha_response_field'])) {
	$answer = trim(stripslashes($_POST['recaptcha_response_field']));
	$postData['challenge'] = $_POST['recaptcha_challenge_field'];	
	$postData['response'] = urlencode($answer);
	$postData['remoteip'] = $_SERVER['REMOTE_ADDR'];
	$postData['privatekey'] = 'your private key';
	$ch = curl_init("http://api-verify.recaptcha.net/verify");
	curl_setopt($ch, CURLOPT_POSTFIELDS, $postData);
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
	$data = curl_exec($ch);
	curl_close($ch);
	$response = explode(PHP_EOL, $data);
	if ($response[0] == 'true') {
		echo 'Success, you may proceed!';
	} else {
		echo 'Error, please try again.';
		// check the API documentation for detailed error reports
	}
}

In this script we create a post array for the cURL function and post all the data to the reCAPTCHA API URL. Note all used variables are required, the post variable recaptcha_challenge_field is generated by the client API. The value for the challenge entry need to be encoded before we can post that value to the reCAPTCHA API. After we received the response we split the string and check if the first part is equal to true and output a success or error message which is presented in the target DIV container.

If you like to use this script on your own website feel free to download the script on our PHP script forum.Similar Posts:

How-to create a Password Generator using PHP

Olaf — Sun, 22 Nov 2009 15:54:50 +0000

Do you need a password generator function for your user registration application or do you have to write a script in PHP? Than is this PHP tutorial for you. The function in this guide is flexible enough to use it during the user registration process or for a password recovery function. The generated password from this function is so safe as you which: Generate alpha-numerical password combined with capital character or with special signs or characters. All used character are based on the number from the ASCII table.

In this tutorial we will explain all the important code, find the complete function at the begin of this tutorial. We used the tutorial code also for our Google Gadget, you can try it just by adding the gadget to your iGoogle start page.

The PHP code for the function

function create_password($pw_length = 8, $use_caps = true, $use_numeric = true, $use_specials = true) {
	$caps = array();
	$numbers = array();
	$num_specials = 0;
	$reg_length = $pw_length;
	$pws = array();
	for ($ch = 97; $ch <= 122; $ch++) $chars[] = $ch; // create a-z
	if ($use_caps) for ($ca = 65; $ca <= 90; $ca++) $caps[] = $ca; // create A-Z
	if ($use_numeric) for ($nu = 48; $nu <= 57; $nu++) $numbers[] = $nu; // create 0-9
	$all = array_merge($chars, $caps, $numbers);
	if ($use_specials) {
		$reg_length =  ceil($pw_length*0.75);
		$num_specials = $pw_length - $reg_length;
		if ($num_specials > 5) $num_specials = 5;
		for ($si = 33; $si <= 47; $si++) $signs[] = $si;
		$rs_keys = array_rand($signs, $num_specials);	
		foreach ($rs_keys as $rs) {
			$pws[] = chr($signs[$rs]);
		}
	} 
	$rand_keys = array_rand($all, $reg_length);
	foreach ($rand_keys as $rand) {
		$pw[] = chr($all[$rand]);
	}	
	$compl = array_merge($pw, $pws);	
	shuffle($compl);
	return implode('', $compl);
}

We create a for loop to build our arrays with characters, while the default characters are always included, we use if statements to include the capital or numeric characters.

	for ($ch = 97; $ch <= 122; $ch++) $chars[] = $ch; // create a-z
	if ($use_caps) for ($ca = 65; $ca <= 90; $ca++) $caps[] = $ca; // create A-Z
	if ($use_numeric) for ($nu = 48; $nu <= 57; $nu++) $numbers[] = $nu; // create 0-9

After this, we merge the three arrays together into one array called $all:

	$all = array_merge($chars, $caps, $numbers);

If the function is configured to use special characters, we use 25% from the password length for these characters. Next we check the number of used special character, if we reach 5 of them (based on the 25% from the password length) we replace the value with 5.

		$reg_length =  ceil($pw_length*0.75);
		$num_specials = $pw_length - $reg_length;
		if ($num_specials > 5) $num_specials = 5;

As before we use a for loop to create the array with special characters. We use the array_rand function to create another array with random keys and the foreach loop will add the values to the array $pws.

		for ($si = 33; $si <= 47; $si++) $signs[] = $si;
		$rs_keys = array_rand($signs, $num_specials);
		foreach ($rs_keys as $rs) {
			$pws[] = chr($signs[$rs]);
		}

With the same method as for the special characters we will build the array $pw using the alpha-numerical array.

	$rand_keys = array_rand($all, $reg_length);
	foreach ($rand_keys as $rand) {
		$pw[] = chr($all[$rand]);
	}

The next code will merge the two password arrays and after we used the function shuffle before the password is returned as a string (using the implode function).

	$compl = array_merge($pw, $pws);	
	shuffle($compl);
	return implode('', $compl);

With function it’s very easy to create a random password in your application, just use it this way:

$password = create_password(12, false, true, false); // creates 12 character alpha-numeric password

What do you think what could be better? Maybe we can segment the amount of numbers or capitals? If you like to use less different characters, just decrease the numbers inside the for loops. Use this ASCII table as your reference. Please post your comments below or open a thread on our PHP forum at finalwebsites.com.

Similar Posts: