Archive for the 'Tutorials' Category

How to integrate PHP, CSS, jQuery and reCAPTCHA into a contact form (with sample files)

Would you like to integrate a PHP Contact form with the authentication technology (to determine human or computer) from reCAPTCHA, and visual effect from jQuery within your website, just like how I have done it for tysoh.com? You can now download the source files  (View Demo) I have provided and follow the step-by-step walkthrough below:

recaptcha

1) Sign up for a reCAPTCHA account under: http://www.google.com/recaptcha, take note of the public and private keys generated for your account, you will need it later in order for the form to work properly.

2) Open the file – ‘contact_form.php‘. Under row 62, enter your reCAPTCHA public key here.

contact_form1

3) Open the file – ‘ajax.recaptcha.php‘. Under row 3 and 4, enter your reCAPTCHA public and private key here.

contact_form2

4) Open the file – ‘sendmail.php‘. Under row 3 and 5, enter your email address and email Subject title respectively.

contact_form3

4) Last but not least, upload all the files to your server, and point to the file at ‘contact_form.php‘, if everything is working fine, you should see the reCAPTCHA box appearing in the webpage. You can now start testing for the contact page.

5) If its still no good for you, you can proceed to edit the Cascading Style Sheet (CSS) under ‘style.css‘, to modify the look of the form to fit your website theme.

References:
http://jquery.com
http://www.google.com/recaptcha

Integrate Google Custom Search in your website using Two page Layout

I have started using Google Custom Search (Version 1) back in 2009, and until recently after re-launching tysoh.com, I have decided to give it a try for Version 2, however after trying it out for a while, I find that its still very difficult to use, the documentation provided is not clear enough, and I have to do many trial and error before getting to what I intended. Furthermore, many customisation options are still missing, for example the option to remove the google watermark logo, the option to change background colour for the Adsense Block, the option to move the search button to the next line. These are just some of the limitations I have encountered so far…

gsc_0

In case you haven’t heard about this service by Google. Custom Search Engine is a tailored search experience, built using Google’s core search technology, that prioritizes or restricts search results based on websites and pages you specify. Your Custom Search Engine can be tailored to reflect your point of view or area of expertise.

Nevertheless, if you are still interested to have GCS in your website, I have figured out a straight forward method called Two page layout, and below is the step-by-step guide to get your started:

1) Go to: www.google.com/cse/‎ and sign up for an account

2) Create a new Search Engine, and you will be brought to the screen below, just click on ‘Look and Feel’ link located on the left hand sidebar, and select Two page layout. Click on ‘Save and Get Code’ link below the page:
gsc_1

3) Copy and paste the following code into your web page where you wanted the search box to appear:

gsc_2

4) Click on the Search Results Details button located near the top of the page, and enter the URL of your desired search results page.

gsc_3

5) Last but not least, click Next to proceed to the next screen to get your code and paste it into your Search Results page, remember that the name of this Search Results page must be the same as the one you specify in Step 4.

gsc_4

6) If its not good enough, you might want to click on the ‘Customize’ tab and set the colour for the search box, search results page:

gsc_5

How to optimise your site for Retina Display – The fastest and most efficient way by CSS

Have been looking around on the web for some quick solution to this, and I know it should not include Javascript hacking or whatsoever, as this will include some additional checking by the browser, every time before the page is being loaded. After much testing, CSS approach is still the best future proof method.

My solution to this, is simply resize all your current images to twice the actual resolution you wanted to appear on-screen. For example, if your current image size is 200 x 400, just increase the resolution to 400 x 800, and use CSS coding to resize the image according to your desired size, following is some code snippet:

#header {
background-image:url(your_image_res_400_800.png);
background-size: 200px 400px;
}

If you are just using a simple img tag, below is the code:

<img src="your_image_res_400_800.png" width="200" height="400" />

The only minus point of using this method is that the page will not check whether the user screen is retina or not, it will just download the image in full resolution, and of course this will take up more bandwidth for the normal screen user, whom don’t even see any effect.

However, I don’t really see this a big problem, as more and more people are shifting to High Speed Broadband and even Fibre Optic. And more computers will quickly catch up with this “retina” effect. If you are still wondering whether to join the “retina” boat now, consider no more. You will be surprised at how good your site appear on high res display.

Travel to top