Populate select menus with jQuery and Ajax

One of the most powerful jQuery function is the Ajax Suite. This example shows how-to populate a second select menu based on the option from the first select menu.

Just in case we have this select menu with the main categories:

<form>
	<label for="category">Choose: </label>
	<select id="category" name="category">
		<option value="fruit">Fruit</option>
		<option value="grain">Grains</option>
		<option value="vegetables">Vegetables</option>
	</select>
</form>

If someone has changed the value for this select menu, we want to show the equivalent menu inside the span element with the ID “subcat”. To do this we use this jQuery snippet that makes an Ajax request to a PHP file called “getSubCat.php”. After the select menu is changed a loading image will show up (in case of slow Internet connections), the PHP script is called and the sub-select menu becomes visible.

$(document).ready(function() {
	$('#category').change(function() {
		var category = $(this).val();
		$.ajax({
			type: 'GET',
			url: 'getSubCat.php',
			data: 'cat=' + category,
			dataType: 'html',
			beforeSend: function() {
				$('#subcat').html('<img src="loader.gif" alt="loading..." />');
			},
			success: function(response) {
				$('#subcat').html(response);
			}
		});
	});
});

The PHP code we are using for the file called getSubCat.php:

 array('Apples', 'Pears', 'Cherries', 'Oranges', 'Kiwis'),
	'grain' => array('Wheat', 'Corn'),
	'vegetables' => array('Tomatoes', 'Beans', 'Peas', 'Peperoni')
);
// use a database instead, this array is only some simple demo data
if (!empty($_GET['cat'])) {
	if (array_key_exists($_GET['cat'], $data)) {
		echo '
<select id="subselect" name="'.$_GET['cat'].'">';
		foreach ($data[$_GET['cat']] as $key =&gt; $val) {
			echo '
<option value="'.$key.'">'.$val.'</option>
 
';
		}
		echo '
	</select>
 
';
	} else {
		echo 'Array-key doesn\'t exist';
	}
} else {
	echo 'Invalid request';
}
?&gt;

This is a simple example on how you can use the Ajax function, the function has much more features which makes it a very flexible function.

Disable/enable the form submit button with jQuery

On pages with registration or order forms you like to treat the visitor to accept some terms of service before he/she can continue the form. A very nice function to do this is, to disable the submit button until the visitor has clicked some check box (like: Click here to accept the TOS). The following snippet will enable/disable the submit button after the check box is checked or not.

$('#accept').click(function() {
	if ($('#buybtn').is(':disabled')) {
    	$('#buybtn').removeAttr('disabled');
    } else {
    	$('#buybtn').attr('disabled', 'disabled');
    }
});

Together with this function, we use the following HTML for the submit button:

<input id="accept" name="accept" type="checkbox" value="y" /> I accept the conditions!
<input id="buybtn" disabled="disabled" name="Submit" type="submit" value="Send" />

Simple photo gallery with thumbnails

If you’re looking for a light-weight photo gallery function, this snippet is for you. The function works very simple: If the visitor has clicked a thumbnail the value from “href” attribute is passed to the “src” attribute from the bigger image. Thats all, check the jQuery code and of course the HTML example.

$("#thumbs a").click( function() {
	var changeSrc = $(this).attr("href");
	$("#detail").attr("src", changeSrc);
	return false;
});

<img id="detail" src="img/1.jpg" alt="big view" />
 
	<a href="img/1.jpg"><img src="thumbs/1.jpg" alt="thumb 1" /></a>
	<a href="img/2.jpg"><img src="thumbs/2.jpg" alt="thumb 2" /></a>
	<a href="img/3.jpg"><img src="thumbs/3.jpg" alt="thumb 3" /></a>

Show and hide HTML elements based on Radio selection

jQuery has great functions which show or hide HTML elements. This example is about to show some additional list based on a selection which is made by checking a radio button. The script checks first if “the” button is checked and shows the additional container, otherwise it hides the “this” container.

$('#payments input[type=radio]').click(function() {
	if ($('input[name=payment]:checked').val() == "creditcard") {
		$("#cards").show();
	} else {
		$("#cards").hide();
	}
});

The HTML snippet has a radio group and a DIV container which becomes visible when the radio with the value “creditcard” is checked.

<ul id="payments">
	<li>
<input id="creditcard" name="payment" type="radio" value="creditcard" /> Creditcard
<div id="cards">
			<label for="cctype">Choose one: </label>
<select id="cctype" name="cctype">
<option>...</option>
<option value="master">MasterCard</option>
<option value="visa">Visa</option>
<option value="amex">American Express</option>
</select></div></li>
	<li>
<input name="payment" type="radio" value="paypal" /> PayPal</li>
	<li>
<input name="payment" type="radio" value="wire" /> Wire/transfer</li>
</ul>

Count clicks for Google Analytics using jQuery

The last snippet is an easy way to count clicks from external links within a DIV container. Without the requirement to add additional Google Analytics code to your link elements, it’s possible to count those link clicks in Google Analytics.

$('#mylinks a[href^="http"]').click(function(){
 	pageTracker._trackPageview('/outgoing/'+ $(this).attr('href'));
});

This tiny function will count the links from a DIV container with the ID “mylinks” like:

	<a href="http://simpay.org/">PayPal Payments</a> | <a href="http://www.finalwebsites.com/web_hosting_promotion.php">Wordpress Hosting</a>

You can try all these function on this jQuery demo page, a download link is available on the same page. If you have any question or suggestions, please be my guest and use the comment form below.Similar Posts:

• Ajax requests using jQuery and PHP
• Your e-mail address hidden with jQuery?
• jQuery Contact form for your website

Social features provided by Google

Right these days there is an active discussion on how the Facebook “Like” function is able to manipulate the social rankings in Google. We think social media and Google Search are both important. Sure there are good social media features provided by Google, but they are not widely used. In this article we will explain how Google Reader, Google Sidewiki and YouTube can be used together with Facebook.

Your (Facebook) friends

Social media is based on having friends, without friends it’s not possible to interact and without interaction there is no fun. If you don’t like this, social media is not for you!

While Facebook is a network for all your friends (you know), it should be the place where you meet people with similar interests. Invite people (you didn’t know in person) based on their interests. For example if most of your discussions on Facebook are about Internet marketing, invite people which are interested in similar subjects. Why? If you share marketing related stuff people which are not interested in, they getting bored and will discontinue your friendship. Most of us having friends on other networks as well and many of them should be your friend on Facebook as well. So if your friends are interested in your voice on Facebook, they might be interested what you’re saying on other networks as well (and visa verca).

Collect interesting content and share it to your friends

Collecting content for your Facebook profile is easy, you can share interesting blogs from RSS feeds, websites you have discovered and YouTube videos you like. You can share every link from your browser using the Facebook “Share” tool (you can install a bookmarklet on your browser’s toolbar), but even if you’re logged in on Facebook you need to pass a CAPTCHA verification before your comment is posted.

Share the best RSS feed items using the Google Reader

Google Reader is a great tool to manage all your RSS subscriptions and for reading your feeds anywhere. This Google service is widely used by bloggers and you can subscribe to any RSS feed or just follow other Google Reader users if you like what they share. The tool provides a simple share button which will add your shared items on your own RSS feed/list. In the web version it’s also a great idea to pass a comment by your shared items. The feature is available in the mobile version too, but there it’s a buggy function (at least on a windows mobile phone). There is a very good Facebook application called RSS Graffiti, using this application, you can publish your Shared Items on Facebook just by importing the XML atom feed from Google Reader. The application has a lot of options for the way how you import your feeds (frequency, delay, filter, format, etc.).

Share your comments on YouTube on Facebook

YouTube is the Video website on the net, Facebook can host videos too, but there is no search or discover functionality. Make sure you have a YouTube account and create also a YouTube channel where you met friends too. There is a great social feature available in Youtube that makes it possible to share all videos and comments on Facebook as well. Here are the settings (My Account -> Activity Sharing):

On this screen you can choose which (YouTube) activities you like to share with your friends.

Comment and share websites using Google Sidewiki

Well the Google Sidewiki is not one of the famous service provided by Google, but there are some good points. All Google Sidewiki comments are published to your Google profile and this page has also an RSS feed. You can use the RSS feed together with the RSS Graffiti application to share your website comments with your friends.

While using these Google services you’re able to share links, comments and videos with both friend groups and you will save time as well. I read the most of my RSS feeds on my mobile phone and using Google Reader I’m able to “post” items to my Facebook profile. If needed I can read those article next I’m behind my notebook and my friends on Facebook can read them too.

Facebook for your blog or website

Adding the Facebook “Share” button to your website is very easy, but people need to identity first (to block SPAM). With all the discussions about the Facebook “Like” function these days, it seems like that Facebook doesn’t “like” the share tool very much. Using the ”Like” button, a Facebook user is able to share the link and is able to post a comment without leaving the page (check the “Like” feature on this page). To get this for 100% working you need to use XFBML version of this feature. We used the following instructions to get it working:

First create a new application on Facebook, access this page and enter the site name and URL. After this step is finished you should get a screen like this one:

Integrate the Like-Gadget in your WordPress theme

With the following information you’re able to prepare your website, we’re using WordPress for our example. Open your header.php template and replace your HTML opening tag with:

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml" <?php language_attributes(); ?>>

Now we need to add some meta information; The Facebook user ID is from your Facebook account. You can find that ID if you click your picture on your Facebook profile page. Copy/paste the application ID from the page where you created the application before. The image URL; You can use one standard image (logo) for all posts or use the thumbnails you’ve created for your blog posts (if you have done this). This is is how the image value should work, at the moment that this article is written it works random (Facebook is choosing an image from the page).

<meta property="fb:admins" content="FACEBOOKUSERID" />
<meta property="fb:app_id" content="YOUAPPLICATIONID" />
<?php if (is_single()) { ?>
<meta property="og:title" content="<?php single_post_title(); ?>" />
<meta property="og:type" content="article" />
<meta property="og:image" content="IMAGEURL" />
<meta property="og:url" content="<?php the_permalink(); ?>" />
<?php } ?>

The snippet above prepares the template to use a “Like” button on single post page. Now we need to open the footer.php template file and next add the code before the BODY closing tag:

<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
	FB.init({
		appId: "YOUAPPLICATIONID", status: true, cookie: true,
		xfbml: true
	});
};
(function() {
	var e = document.createElement('script'); e.async = true;
	e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
	document.getElementById('fb-root').appendChild(e);
}());
</script>

Don’t forget to add your application ID here as well. Now we are ready to add the “Like” button to your single.php template file.

<div class="fb_like" style="padding-bottom:5px;">
	<fb:like action='like' width="400" layout="standard" show_faces="false" colorscheme="light" />
</div>

I placed that code above the part where the WordPress function the_content() is used.

Conclusion

In this article we talked about how-to discover and share content to your friends, but don’t forget that too much content might be recognized by your friends as SPAM. Find the right balance, if you keep adding friends and you friend-count doesn’t go up, maybe the frequency for posting external content (links) is too high. The social media user like to interact, give your friends content they can talk about and don’t forget to talk back!
Adding Facebook gadgets to your website or blog can give your content new exposure and friends (fans). Just use them and if you think that they doesn’t work for you, it might be possible that your visitors are not on Facebook.Similar Posts:

• Social media services are more efficient these days
• Google Wave – Invitations and YouTube Gadget
• Blended search and the importance of varying your website’s marketing methods

Why should you pay using PayPal?

Even if you don’t have a PayPal account, you should process your credit card payment via the PayPal platform. This makes sense if you don’t know/trust the payment provider from the merchant where you want to buy something. What if this merchant doesn’t offer the PayPal option on his website? In most cases companies having a Paypal account, just ask the merchant, if he want to make a sale, he will offer this payment method as well.
PayPal is also great if you don’t like to show a merchant your credit card details. In several countries it’s possible to pay by PayPal in real-time even if you need to fund your account from your bank account. PayPal is also some kind of online wallet, for example if you sell something on eBay and you get paid via PayPal. Just keep that money in your account and use it for later purchases. If you buy something on eBay and you pay via PayPal, you get some buyer protection. If the seller doesn’t send you the goods your paid for and he can’t proof the successful shipment, Paypal will refund your money.

PayPal features for merchants

As a shop holder you should always offer PayPal payments. Using PayPal as payment option on your e-commerce site enables additional payment methods: MasterCard, VISA and many other cards (depends on the buyer’s country). Since the funding methods are different for different countries, PayPal payments are the solution to offer many payment options. Some PayPal payment options for your website are:

• Website Payments Standard – Add credit card processing to your site in about 15 minutes.
  Use this option if you don’t like to pay a monthly fee and if your PayPal check-out process must be simple and hosted on the PayPal website. Costs per transaction are low from 2.2% + $0.30.
• Website Payments Pro – An Internet merchant account and gateway in one.
  This service is similar to the products from most other payment providers and the costs are a monthly fee of $30 and the price for each transaction starts from 2.2% + $0.30.
• Payflow Payment Gateway – Process payments using your own Internet merchant account.
  A solution to use PayPal’s payment gateway (including PayPal payments). Note, the whole payment is processed on the PayPal site.

For all these payment options is an API system available.

Selected PayPal tools and services

Most of the PayPal features require some setup or you need to add some code (or button) on your website. What if you just need to send a payment request to someone (without knowing his PayPal address or you need just a link that someone can pay you with his credit card? For Microsoft Outlook users is on the PayPal website a plugin available which acts like a kind of wizard that creates the button code you can place into your email.

This wizard is a nice solution, but this button might be a problem if the html code gives the e-mail message a higher SPAM ranking.

SIMPAY offers functions where the PayPal payment request is created on-site in a pre-defined form and where the user can send a unique link via e-mail or an instant message system. It’s also possible to e-mail a payment request for recurring payments.

Another great service is FundRazr, they created, together with PayPal, a Facebook application which enables the user to setup a gadget that shows the “charity” and all related information. Other Facebook members will see the gadget on the wall from the fund raiser and are able to send him money via PayPal or they share the gadget on their own wall.

Similar Posts:

• Setting up an Internet shopping cart
• Easy payments using Paypal IPN
• Top your sales with Google Commerce Search

Don’t think it’s easy to pull a new hosting company from the ground. This market is very saturated and we suggest to start offering hosting services most of all to your existing customers only.

VPS hosting versus dedicated server hosting

These days it’s not necessary to have your own dedicated server, a good maintained VPS host is often much more reliable. If the VPS hosting platform is well managed, you don’t have to worry about the shared memory because the virtualization software is able to manage all the resources. Why do you need a dedicated server if a VPS is so powerful? You need your own server for special hardware configurations or if your provider doesn’t have a good VPS platform. While many VPS companies using the same machines, the risk of hardware failures is low because hardware replacements should be a peace of cake. A “special” dedicated or colocated server might be a serious risk, f.e if the motherboard replacement is not available. A VPS host is scalable and often much cheaper than a dedicated server.

Web Server Control Panel

Using a control panel, makes it easy to create or maintain all the web hosting accounts for your customers. Sure as a Linux expert you don’t need a CP, but if you core business is web development, a control panel might really help. There are many of them, most of them are commercial products, but there are also a a few open source projects which are available for free. In this blog post we suggest to use DirectAdmin, because this software is easy to use, the license is not very expensive and there is also a very powerful API system.

Installing DirectAdmin

After you got your VPS (or dedicated server) you’re ready to install the server software. Before you start the installation process check these DirectAdmin requirements. Most important is that your Linux server is not pre-installed with software like Apache, MySQL, PHP, FTP… check this warning from the DA website:

***Please do not install services such as Apache, PHP, MySQL, Ftp, Sendmail, etc., as we will do this for you. All we need is a CLEAN install of your operating system.***
We do not recommend installing DirectAdmin on an existing live production server.
DirectAdmin does not convert existing data upon install.

For most DirectAdmin hosts CentOS is the preferred Linux operating system. You need also a DirectAdmin license, ask your VPS hosting provider, he can offer the license for a low fee.

DirectAdmin installation resources:

• Getting Started with DirectAdmin: What kind of server do I need?
• DirectAdmin Installation Guide

The installation process is not part of this article. If you finished the installation part, you should check this DNS installation guide.

Creating hosting accounts

After the final re-boot and your DirectAdmin server is running, you’re able to setup hosting accounts for your customers. You can create them by yourself using the DA control panel or using the DirectAdmin API within your web application. Think about the following application process:

1. Customer has ordered a hosting accpunt from your website
2. The payment is cleared and a request is send the API system
3. Within DirectAdmin a hosting account is created
4. The customer gets the login and hosting accpunt details via e-mail

How far you’re using this features of DA depends on yourself. The DirectAdmin API is able to manage all functions you need. This way you’re able to create your own we application, without telling your customers that a control panel is used.

Access the DirectAdmin API system

The API documentation is very complete and easy to use even for less experienced developers. There is also a custom PHP class to access the API via a HTTP socket, download the code here.

Using this PHP class is very easy, the following code is used to fetch all the user accounts from a reseller/admin account:

include_once 'httpsocket.php';
$sock = new HTTPSocket;
$sock->connect('some.server.com', 2222); 
$sock->set_login('login', 'password');
$sock->query('/CMD_API_SHOW_USERS');
parse_str($sock->fetch_body(), $result);
print_r($result); // shows the result in the browser

Next we show how-to add a new user to an existing reseller account (the package named “default” is a pre-defined hosting package):

include_once 'httpsocket.php';
$sock = new HTTPSocket;
$sock->connect('some.server.com', 2222);
$sock->set_login('login', 'password');
$sock->query('/CMD_API_ACCOUNT_USER', array(
	'action' => 'create', 
	'add' => 'Submit', 
	'username' => 'abcuser', 
	'email' => 'mail@domain.com', 
	'passwd' => '123456', 
	'passwd2' => '123456', 
	'domain' => 'googles.com', 
	'package' => 'default', 
	'ip' => '123.123.123.123', 
	'notify' => 'yes')
);
parse_str($sock->fetch_body(), $result);
print_r($result); // shows the result in the browser

This API call is the same as creating a user from the web interface:

If you check all the API functions, you will see that it’s possible to create a 100% white labeled web application. Even if you don’t have that kind of web application, it’s very easy to create hosting accounts using the web interface on your DirectAdmin web server.

Similar Posts:

• How-to setup the DNS and name server for a DirectAdmin web server
• Create custom website backups using CRON
• Setting up an Internet shopping cart

If all of them have similar features, how do choose the right one?

Some important features

• Creating a mailing list takes a lot of time and might be essential for your e-mail marketing success. While collecting subscribers and sending e-mail messages, it’s important that as many messages as possible have to reach the subscribers mailbox. Bigger companies are more trusted and invest more time an money to prevent that their mail servers are getting black-listed.
• If your list is not very big (~1000 subscriber) and you don’t have a lot of campaigns, your partner should offer pre-paid plans. If you take a monthly plan, check that the maximum amount of subscribers is not to big.
• If you’re not able to create all the forms and templates, you need a service provider which offer these features out of the box. If you have an international list or campaigns, multiple languages should be supported.
• A better service provider let you follow strict usage policies. If you need to create campaigns for your existing list, check if the list is fully accepted (before you start customizing forms and templates). On the other side, if the service provider accept any kind of mailing list and or campaign, it might be possible that their mail servers are black-listed frequently.
• All services should offer double opt-in features for your subscriptions. Check if you are able to send an auto-respond message to your subscribers.

In the past year I was able to try three of the bigger services; iContact, MailChimp and CampaignMonitor. AWeber looks pretty good and earns a lot of trust and I’m sure you will not waste your time if you try them as well. They don’t offer a free trial, but at the moment while I’m writing this review they offer the first month for only $1 ($19 for the following months).

iContact – E-mail marketing simplified

I tried iContact first a year ago and actually it works as they offer the service on their website. You can open a trial account to setup your mailing list and templates/forms. If you want to import a bigger list you need to pay first. They offer only monthly plans, “pay as you go” options are not possible. They have all the features like other professional companies, but it looks to me they didn’t update their control panel for the last 3 years (the WYSIWYG editor is very ugly). Every mail message I send, got the iContact branding in the footer, which you can’t remove. I have the idea that they don’t have a strong usage policy because I got NEVER complains for high percentage of un-subscriptions, high bounce rates or complains. They offer a survey function (I never tried) and they support several 3rd party plugins (WordPress, Joomla, Drupal, SalesForce…)

MailChimp – Email Marketing and Email List Manager

MailChimp is the best service for a beginning mailing list, because they offer a free plan for lists with less than 500 subscribers. They offering great and easy to use tools for creating lists and campaigns. With a lot of 3rd party plugins (Facebook, SalesForce, Magento, Paypal and many more) they are one of the biggest email marketing partners. Using MailChimp you can go for monthly pricing or “pay as you go”. The last option is for people sending less frequently a newsletter to their members. Another features are: Custom responder messages, complete forms for your website, powerful API system (offering complete example code), Google Analytics integration, advanced reports and much more. They have a very strict policy on abusing their system, will say don’t use them for a mailing list you have bought somewhere on the Internet. Very unique is their affiliate scheme, if someone has joined MailChimp via your affiliate link and the user has upgraded to a paid account, both parties getting a $30 bonus (new user and the affiliate). You can’t turn this bonus into cash, but maybe is an opportunity to run your (bigger) mailing list for free.

CampaignMonitor – Email marketing software for web designers

The first thing you will notice after free trial sign-up is that you login into some kind of reseller area. With CampaignMonitor it’s possible to create mailing lists completely white-label (even for the user of the back-end). Against MailChimp the back-end has less features, but you’re able to create your campaigns with custom templates or using the premium templates offered by CampaignMonitor. They offer monthly and “pay as you go” plans and their usage policy is somewhere between the one from iContact and the policy from MailChimp. While their back-end is very modern and functional, they don’t offer enough features for lists in languages other than English. If you need to setup your list in a different language, you should try the API which is powerful as well.

If you start a new mailing list, most of the products or services should work for you, but if you need a provider for your existing list you need to test them first.
Similar Posts:

• Running a mailing list for increased traffic and sales
• Integrate your MailChimp Newsletter Subscription
• How-to choose a WordPress Hosting Provider

• 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:

<?php
$errorNum = (int)$_GET['err'];
$err_str = array(404=>'Not Found', 400=>'Bad Request', 401=>'Unauthorized', 403=>'Forbidden', 500=>'Internal Server Error');
echo '
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>'.$err_str[$errorNum].'</title>
</head>
<body>
<h1>An error occured: '.$err_str[$errorNum].'</h1>
 
<!-- place here your advertisement -->
 
<!-- place here your Google analytics code -->
</body>
</html>';
?>

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:

<?php
$errorNum = (int)$_GET['err'];
$err_str = array(404=>'Not Found', 400=>'Bad Request', 401=>'Unauthorized', 403=>'Forbidden', 500=>'Internal Server Error');
echo '
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>'.$err_str[$errorNum].'</title>
</head>
<body>
<h1>An error occured: '.$err_str[$errorNum].'</h1>
 
<form action="http://www.yourdomain.com/error.php" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="thisCodeIsProvidedByGoogleCSE" />
    <input type="hidden" name="cof" value="FORID:10" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="31" />
    <input type="submit" name="sa" value="Zoeken" />
  </div>
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script>
 
<div id="cse-search-results"></div>
<script type="text/javascript">
  var googleSearchIframeName = "cse-search-results";
  var googleSearchFormName = "cse-search-box";
  var googleSearchFrameWidth = 600;
  var googleSearchDomain = "www.google.com";
  var googleSearchPath = "/cse";
</script>
<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>';
 
if (empty($_GET['q'])) { // show the ad only if there is no search
	echo '
<!-- place here your advertisement -->';
} 
echo '
<!-- place here your Google analytics code -->
</body>
</html>';
?>

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:

• Top your sales with Google Commerce Search
• New Search Options but unrelated results in Google Blog Search
• Create custom backups from your website using cURL

Everyone will understand my next step: I started my search for a better backup solution!

Are online backup services the best solution?

Since my laptop has the Ubuntu operating system, I gave Ubuntu One a try. They offer 2GB of free backup space and since Ubuntu version 9.10 you need only to register an online account. That sounds easy right? Just put your backup data into the Ubuntu One directory and wait until the demon has uploaded all files. They offer great features too; synchronization between multiple PCs, sharing files with trusted contacts and there is  a web browser interface. They offer also a paid plan; 50GB storage for $10/month. Not so much actually, but maybe to much for a beta service. In my case Ubuntu One wasn’t the best solution for me. Uploading files took a lot of time and the demon/client needs a restart frequently.

Important: You need to trust your backup service provider!

There are more professional online backup services

There are many companies offering these services and they offering different packages for different needs. Since the synchronization features are very nice (think about how easy you can restore your data to a new computer) I searched  for services offering this features. A second requirement were multi-platform capabilities. The last one is very important because you never know where you need to work with your data. Maybe you need to switch from Linux to Windows or Mac. We tried the following 3 services, all of them offer 2GB of free backup space. So if you like, you can try them all for free.

Mozy – Home Edition

They offer unlimited space for a low monthly price: $4.95 (discounts for yearly payments are also available). Sounds great? It is, for Windows and Mac user. They backup after the first full backup only changed/new files and it’s easy to restore your data if you need that. A Mozy backup is a great “mirror” for your data, but doesn’t offer synchronization features for multiple computers. Mozy is a great solution if you have a lot of data (for example photos) and you need “only” a secure backup solution.

Dropbox

I’m sure most of you already know Dropbox, they offer all you need: online back, synchronization and file sharing. First 2GB of space are free and 50GB of backup space are only $9.99 a month. Check these features:

• File Sync
  • Sync files of any size or type.
  • Sync Windows, Mac and Linux computers.
  • Automatically syncs when new files or changes are detected.
  • Efficient sync – only the pieces of a file that changed (not the whole file) are synced.
• File Sharing
  • Shared folders allow several people to collaborate on a set of files.
  • A “Public” folder that lets you link directly to files in your Dropbox.
  • Control who is able to access shared folders.
  • Automatically create shareable online photo galleries from folders of photos in your Dropbox.
• Online Backup
  • Automatic backup of your files.
  • Undelete files and folders.
  • Restore previous versions of your files.
  • 30 days of undo history, with unlimited undo available as a paid option.

Dropbox is a great backup service for Windows, Linux and Mac users with a lot of features. They have also a great referral system, if you refer friends you get free backup space for your (free) account. Special is also that you’re able to share single files with other people, even if they are not a Dropbox user.

SpiderOak

The features for SpiderOak are almost the same compared to Dropbox, but their paid plan is much cheaper, only $10 / month for 100GB of backup space (discounts for yearly payments are also available). The service looks more safe, Encrypted (FAST) data transport and fully encrypted data storage. The company looks more professional to me, but this is only my personal opinion as an open source fanatic. They don’t offer single file sharing, but they offer file sharing functions for directories. There is one killer feature which Dropbox doesn’t have: Using Spideroak you’re able to backup/sync every directory from you hard-disk, while Dropbox has only one directory which is used for the backups.

Similar Posts:

• Sync Outlook and Google Apps on your mobile phone
• Tutorial: Create a zip file from folders on the fly
• Create custom website backups using CRON

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, '<em>Lorem ipsum dolor sit amet, consectetur adipiscing elit</em>. <br />
Vestibulum sagittis venenatis urna, in pellentesque ipsum pulvinar eu. In nec <a href="http://www.google.com/">nulla libero</a>, 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:

• Search for photos using PHP and the flickr API
• How-to create a Password Generator using PHP
• jQuery form plugin and PHP file uploads

Honestly I tried this before but without success, why? Because I missed one big point, this service is only available for premium accounts. In my case, I like to synchronize much more. As I mentioned before, I have a “personal” Google Apps account and a Windows mobile phone, but I’m using also a Microsoft Exchange account at the office, which I like to synchronize with my Windows mobile phone. The synchronization tool on the phone allows only one server and in fact I have two. But there is a possibility to arrange this.

Synchronize Microsoft Outlook with Google Apps

There is a Google Apps Sync tool to synchronize both accounts (Outlook and Google Apps) with each other including contacts, e-mail, tasks and the calendar. I tried that tool, but I don’t like to have a second Outlook profile for my personal stuff. 1-2 year ago there was already the Google Calendar Sync tool which is able to synchronize the Outlook calendar with the calendar from a Google Apps account. I needed to search the Google Calendar Documentation to find this tool back because Google doesn’t mention this tool anymore (the suggest the new sync tool instead). It works for Outlook 2003/2007 and with the latest version I’m able to synchronize my calendars in one or two ways:

In my case I want to show events from my Outlook calendar in my Google calendar; this is the one way synchronization (the 3rd option). I’m very surprised about the quality of this tool. I tested the following calendar updates, I made in Microsoft Outlook and all of them are updated to my Google calendar as well:

• Changing details from an existing item in the future
• Moving the item to another day
• Removing the item from the calendar
• Updating some items from the past

After the synchronization between Outlook and Google Apps is working we can start the synchronization between Google Apps and my Windows phone.

Synchronize Google Apps with Windows Mobile

Be sure you have a Google Apps Premium account and ActiveSync is available on your Windows mobile phone. Otherwise the synchronization will not work. Follow the instructions on how-to setup the Google Apps account for ActiveSync using these instructions. The screen-shots on that page might be different from them on your phone, but they should explain how-to setup the different options. I suggest to un-check the Contacts; in my case I use 20-30 contacts on my phone and have hundreds in my contact list on Google (you don’t wanna sync them all). After anything is done start the synchronization, but don’t forget that the synchronization process is done via the mobile Internet. If you don’t have a mobile Internet account it might be very expensive for you.

Similar Posts:

• Online Backup Service – Comparison
• Facebook tips for more efficiency and “fun”
• Create surveys with Google Forms

• Many shared hosting providers doesn’t allow to use the PHP mail() function for security reasons
• Your web application is more flexible if you use the Simple Message Transfer Protocol (SMTP). This way your e-mail function is not limited to the servers port or e-mail configuration anymore.
• SMTP is much more powerful and secure (using SSL)

In this article we will compare three of the bigger PHP projects which allow to send e-mail messages via SMTP, including attachments.

1. The Mail class included in the Zend Framework (http://framework.zend.com/)
2. Swift Mailer (http://swiftmailer.org/)
3. PHPMailer (http://phpmailer.worxware.com)

We reviewed these three PHP classes because they’re written for PHP5 and they are updated frequently. For our review we tried the provided examples and the documentation. We’re sure that all three classes are very powerful and offer many functions for almost every type of web application. Because this review should help the beginning PHP developer, this article is sho-case for a few functions only.

Our test case for this review

For our example we tested all three classes to send a plain text mail message with a single image attachment, using SMTP transport with authentication. Here is the good news; as a more experienced PHP user, I was able to use the provided examples within several minutes for each of the classes.

Zend Mail Class

ini_set('include_path', '.:/path2directory/ZendFramework/library/');
require_once 'Zend/Loader.php';
Zend_Loader::loadClass('Zend_Mail');
Zend_Loader::loadClass('Zend_Mail_Transport_Smtp');
 
$config = array('auth' => 'login', 
              'username' => 'smtpUser',
              'password' => 'smtpPassword');
 
$transport = new Zend_Mail_Transport_Smtp('smtp.server.com', $config);
$mail = new Zend_Mail();
$at = $mail->createAttachment(file_get_contents('path/logo.png'));
$at->filename = 'logo.png';                                  
$mail->setBodyText('This is the text inside the mail send by Zend_Mail using SMTP transport.');
$mail->setFrom('you@mail.com', 'Your Name');
$mail->addTo('contact@mailservice.us', 'Your friend');
$mail->setSubject('Mail Subject');
$mail->send($transport);

I don’t like the documentation from the Zend framework, you need to check many pages to get all the required code for the snippet above. You need to create a second object to send your message via SMTP. I’m missing the information on their site about how-to test the “send” function to create use a success or error message. Using the class is not very difficult, but installing the Zend Framework might be a hard job for the beginner. This class is a great solution for people already using the Zend Framework or where the the library is provided by the hosting provider.

Swift Mailer

require_once 'Swift/lib/swift_required.php';
 
$transport = Swift_SmtpTransport::newInstance('smtp.server.com', 25)
  ->setUsername('smtpUser')
  ->setPassword('smtpPassword');
 
$mailer = Swift_Mailer::newInstance($transport);
$message = Swift_Message::newInstance('Wonderful Subject')
  ->setFrom(array('you@mail.com' => 'Your Name'))
  ->setTo(array('contact@mailservice.us' => 'Your friend'))
  ->setBody('This is the text of the mail send by Swift using SMTP transport.');
$attachment = Swift_Attachment::newInstance(file_get_contents('path/logo.png'), 'logo.png');  
$message->attach($attachment);
$numSent = $mailer->send($message);
printf("Sent %d messages\n", $numSent);

The snippet looks similar to the code from the Zend mail class, but you have to create 4 different objects:

1. An object for the SMTP transport (Swift_SmtpTransport)
2. The object that will send the message (Swift_Mailer)
3. The message object for all mail parts (Swift_Message)
4. An object for the attachment (Swift_Attachment)

The configuration/installation is much easier than for the Zend Framework, just include one single file and you’re ready to use the class. If you like this OOP (Object Oriented Programming) style used in this class, this script might be for you.

PHPMailer

require_once 'PHPMailer5/class.phpmailer.php';
 
$mail = new PHPMailer();
$mail->IsSMTP(); 
$mail->Host = 'smtp.server.com';
$mail->Port = 25;
$mail->SMTPAuth = true;
$mail->Username = 'smtpUser';
$mail->Password = 'smtpPassword';
$mail->SetFrom('you@mail.com', 'Your Name');
$mail->AddAddress('contact@mailservice.us', 'Your friend');
$mail->Subject = 'PHPMailer Message';
$mail->Body = 'This e-mail is sent through PHPMailer.';
$mail->AddAttachment('path/logo.png', 'logo.png');
if(!$mail->Send()) {
  echo 'Mailer error: '.$mail->ErrorInfo;
} else {
  echo 'Message has been sent.';
}

The coding style from this example looks very different from the two others and some PHP developer would say this is not really OOP code. Right PHPMailer doesn’t have one file for each method and for the example above you need to upload only two files. I like the PHPMailer class because of all the information you get on the project’s website.

The three examples above should help you to make the decision which script will work the best for you. Check the links below for the documentation related to the snippets I have used in this artikel:

• http://framework.zend.com/manual/en/zend.mail.html
• http://swiftmailer.org/docs/introduction
• http://phpmailer.worxware.com/index.php?pg=examplebsmtp

Similar Posts:

• Sending e-mails via SMTP with PHPmailer and Gmail
• jQuery Contact form for your website
• Integrate your MailChimp Newsletter Subscription