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

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

• 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

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

• 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

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:

<?php
$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:

• Image manipulations with Imagemagick
• Upload images for usage in TinyMCE
• Tutorial: FTP Upload via cURL

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:

<?php
// change the two vars below
$email = 'user@mail.com';
$html = 'Please contact us by e-mail: <a href="mailto:%%mAdr%%">%%mAdr%%</a><br /><br />
<a href="javascript:void(0);" id="hideme">Close</a>';
 
$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:

• 5 Useful jQuery Snippets for your Website
• jQuery Contact form for your website
• E-mail links, protective solutions against SPAM

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:

1. user@email.com
2. 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:

<?php 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 += '<a href="' + 'ma' + 'il' + 'to:' + naam;
    mail += '&#64;' + 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:

• jQuery Contact form for your website
• Your e-mail address hidden with jQuery?
• PayPal Payment Tools: Information and Resources

In this tutorial we show how to create a modern contact form that is linked by a simple text link and opens in a fancy Lightbox where all form handling, including reCAPTCHA validations, are processed by PHP and the jQuery Ajax function. After the form submission was successful we are using the PHP Class script PHPMailer to send the message via SMTP.

Previous Tutorials we have used for this application

Create custom reCAPTCHA images using their API
We use the reCAPTCHA API to create a user validation image to protect the form against spam attacks.

Sending e-mails via SMTP with PHPmailer and Gmail
We send e-mail messages using the PHPmailer script via SMTP, the mail function from this previous tutorial is the base for this tutorial as well.

Next we use the Ajax function from jQuery to send the form variables to our PHP e-mail script. This tutorial describes how-to to use all the functions in one application, please check the other tutorials if you need more information. We will not explain the code for PHPMailer and reCAPTCHA in this tutorial. You need an API key for the reCAPTCHA service.

Thickbox jQuery Plugin

We use the Thickbox plugin for this tutorial because we think that this plugin is easy to use and very flexible. If you visit the Thickbox website you will notice some “warning” from the developer, he says that he doesn’t continue the development. If you don’t like to use the Thickbox plugin you need to use one of the other Lightbox plugins available on the Internet. Since the application is not related to the Thickbox plugin, it should be easy to use that code with most other Lightbox scripts as well.

Contact form

This page is used to collect the users input, will validate the input on the client side and will post the data to the PHP e-mail script. Create a file with this code and call it contact-form.html

<html>
<head>
<title>Contact form</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://api.recaptcha.net/js/recaptcha_ajax.js"></script>
<script type="text/javascript">

Next we have the jQuery script block for the form validations, Ajax form submission and the code to request the challenge image from the reCAPTCHA API.

After the document is loaded the reCAPTCHA images is added. If the user has clicked the button #submit_button the Ajax function is called with:

• Options like the PHP e-mail script,
• the form data,
• the data type JSON,
• a pre-submit handler for the form field validations
• and a success handler that put the response into the #output container.

$(document).ready(function() { 	
	var RecaptchaOptions = { theme : 'custom' };
 	Recaptcha.create('your public key', 'recaptcha_image', RecaptchaOptions);
 	Recaptcha.focus_response_field();
	$('#submit_button').click(function() { 
		$.ajax({
			type: 'POST',
			url: 'email.php',
			data: $('form#myform').serialize(),
			dataType: 'json',
			beforeSend: function() {
				var resp_field = $('#recaptcha_response_field').val();
				var name = $('#name').val();
				var email = $('#email').val();
				var message = $('#message').val();
				if (!resp_field[0] || !name[0] || !email[0] || !message[0]) { 
					$('#output').html('All fields are required');
					return false; 
				}
				emailpat = /^([a-z0-9])+([\.a-z0-9_-])*@([a-z0-9])+(\.[a-z0-9_-]+)+$/i;
				if (!emailpat.test(email)) {
					$('#output').html('The e-mail address is not valid.'); 
					return false;
				}
			},
			success: function(response) {
				if (response.status == 'success') {
					$('#formcont').html();
				}
				$('#output').html(response.errmessage);
			}
		});
	});
});

The form has just a few fields for name, e-mail address and message. Note the container with the ID recaptcha_image, this DIV element holds the reCAPTCHA challenge image.

</script>
</head>
<body>
	<h1>Contact form</h1>
	<div id="formcont">				
		<form id="myform">
			<p>
				<label for="naam">Name:</label>
				<input type="text" name="name" id="name" size="30" />
			</p>
			<p>
				<label for="email">E-mail:</label>
				<input type="text" name="email" id="email" size="30" />
			</p>
			<p>
				<label for="message">Message:</label>
				<textarea rows="5" cols="30" name="message" id="message"></textarea>
			</p>
			<div id="recaptcha_image"></div>
			<p>
				<input type="text" name="recaptcha_response_field" id="recaptcha_response_field" size="20" />
				<input type="button" value="Submit" id="submit_button" /> 
			</p>
		</form>
	</div>
	<div id="output"></div>
</body>
</html>

PHP e-mail script

So far the client side code, now we need an email script called email.php with following functions:

• One that validates the submitted reCAPTCHA answer against the API,
• has some basic validations on the server side (empty fields)
• sends the e-mail message using the PHPmailer class,
• and responds (echo) the message in JSON format.

<?php
require_once('PHPMailer/class.phpmailer.php');
$resp['status'] = 'error';
$resp['errmessage'] = '';
 
if (!empty($_POST)) {
	if (!empty($_POST['email']) && !empty($_POST['message']) && !empty($_POST['name']) && !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') {
			$mail = new PHPMailer();
			$mail->IsSMTP(); // enable SMTP
			$mail->SMTPDebug = 0;  // debugging: 1 = errors and messages, 2 = messages only
			$mail->SMTPAuth = true;  // authentication enabled
			$mail->SMTPSecure = 'ssl'; // secure transfer enabled REQUIRED for Gmail
			$mail->Host = 'smtp.gmail.com';
			$mail->Port = 465; 
			$mail->Username = 'you at gmail dot com';
			$mail->Password = 'your gmail password';      
			$mail->SetFrom('you@website.com'); 
			$mail->Body = 'Name: '.$_POST['name'] . PHP_EOL . 
				'E-mail: ' . $_POST['email'] . PHP_EOL . PHP_EOL . 
				'Message:' . PHP_EOL . $_POST['message'];
			$mail->Subject = 'Some message from your site';
			$mail->AddAddress('Igetthe@mail.com');
			if (!$mail->Send()) {
				$resp['errmessage'] = 'Mail error: '.$mail->ErrorInfo;
				$resp['status'] = 'success';
			} else {
				$resp['errmessage'] = 'Message submitted succesfully!';
			}
		} else {
			if ($response[1] == 'incorrect-captcha-sol') {
				$resp['errmessage'] = 'The entered text from the Captcha image is wrong.';
			} else {
				$resp['errmessage'] = 'Can\'t validate the Captcha image.';
			}
		}
	} else {
		$resp['errmessage'] = 'Missing required fields!';
	}
} 
echo json_encode($resp);
?>

How-to use it on your website?

if you have finished both files you can use them on your site, upload the two created files, the jQuery library, the Thickbox plugin files and the PHPmailer class (if you don’t have those files on your server). Double check all the paths and add the jQuery library and the Thickbox plugin files to the page header from that page, where you like to place one or more Contact links:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="thickbox.js"></script>
<link href="thickbox.css" rel="stylesheet" type="text/css" />

You don’t need to add more jQuery code because the code is already included in the Thickbox plugin file. Use the following code for each link:

<a href="contact-form.html?TB_iframe=true&height=480&width=640" class="thickbox">Contact</a>

That’s all, if you have any questions please post them below. At the moment there is no demo but you can download the example code here.

Similar Posts:

• jQuery form plugin and PHP file uploads
• Create custom reCAPTCHA images using their API
• Ajax requests using jQuery and PHP

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('<img src="loading.gif" alt="loading..." />');
				if(!searchVal[0]) {
					$('#result').html('<p>Please enter a keyword as search value.</p>');   	
					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.

<?php
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 = '<p>Total '.$data['photos']['total'].' photo(s) for this keyword.</p>';	
		foreach($data['photos']['photo'] as $photo) { 
			$html .=  '
			<img src="http://farm' . $photo["farm"] . '.static.flickr.com/' . $photo["server"] . '/' . $photo["id"] . '_' . $photo["secret"] . '_s.jpg" alt="" />'; 
		}
	} else {
		$html = '<p>There are no photos for this keyword.</p>';
	}
	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:

• Create custom reCAPTCHA images using their API
• jQuery Contact form for your website
• jQuery form plugin and PHP file uploads