Web Development Blog » PHP

Creating a Contact Form in jQuery Mobile and PHP

eisabai — Wed, 29 Jun 2011 06:39:11 +0000

This is a step-by-step tutorial on how to create a contact form in jQuery Mobile. I have also included complete php source code that can be used as a web service to send emails from your server.

Download

1. Create a folder structure
The first thing you need to do is create a folder structure where all your files will live. My folder structure is as follows:

- www
-- api
--- send.php
-- js
--- contact.js
-- css
--- contact.css
-- index.html

2. Copy and paste the following boilerplate template
This will go into index.html file that you’ve created. Note that we are including the Javascript and CSS files from the jQuery Mobile server. You can also download the latest version of jQuery Mobile from the website and include the local copy.



	
	Contact Us
	
	
	
	

 



	
		Contact Us
	


	
		
	


	
		Source code by Web Development Blog.  Check out tip & resources for Web Developers.

3. Add HTML form in the content area
Add the following code into

		
			Thank you.  Your message has been sent.  We will get back to you as soon as we can.
		
		
			* indicates Manadatory Field
			
				First Name*:
				
			
			
				Last Name:
				
			
			
				Email Address*:
				
			
			
				Mobile Number:
				
			
			
				State:*
					
			
			
				Message*:
				
			
			send feedback

4. Create a web service in PHP to send email
We have a folder called api and we will create a new file called send.php in the api folder. You will need to change the $recipient variable.

rn"; 

	$ip = $_SERVER['REMOTE_ADDR'];
	$httpref = $_SERVER['HTTP_REFERER'];
	$httpagent = $_SERVER['HTTP_USER_AGENT'];
	$today = date("F j, Y, g:i a");    

	$recipient = 'YOUREMAILADDRESS@DOMAIN.COM';
	$subject = 'Contact Form';
	$mailbody = "
First Name: $firstname
Last Name: $surname
Email: $email
Mobile Phone: $mobilephone
State: $state
Message: $message

IP: $ip
Browser info: $httpagent
Referral: $httpref
Sent: $today
";
	$result = 'success';

	if (mail($recipient, $subject, $mailbody, $header)) {
		echo json_encode($result);
	}
}
?>

5. Add Javascript code to handle form onsubmit
Create a file called contact.js with the following content and include it in your HTML file.

$('#send-feedback').live("click", function() {
	var url = 'api/send.php';
	var error = 0;
	var $contactpage = $(this).closest('.ui-page');
	var $contactform = $(this).closest('.contact-form');
	$('.required', $contactform).each(function (i) {
        if ($(this).val() === '') {
			error++;
        }
	}); // each
	if (error > 0) {
			alert('Please fill in all the mandatory fields. Mandatory fields are marked with an asterisk *.');
	} else {
		var firstname = $contactform.find('input[name="firstname"]').val();
		var surname = $contactform.find('input[name="surname"]').val();
		var state = $contactform.find('select[name="state"]').val();
		var mobilephone = $contactform.find('input[name="mobilephone"]').val();
		var email = $contactform.find('input[name="email"]').val();
		var message = $contactform.find('textarea[name="message"]').val();	

		//submit the form
		$.ajax({
			type: "GET",
			url: url,
			data: {firstname:firstname, surname:surname, state: state, mobilephone: mobilephone, email: email, message: message},
            success: function (data) {
				if (data == 'success') {
					// show thank you
					$contactpage.find('.contact-thankyou').show();
					$contactpage.find('.contact-form').hide();
				}  else {
					alert('Unable to send your message. Please try again.');
				}
			}
		}); //$.ajax

	}
	return false;
});

After completing all the above steps, you will have a fully functional contact form built using jQuery Mobile, HTML5, and PHP.

Download

Screenshot of Contact Form in jQuery Mobile

How to customise WordPress Admin Login page

eisabai — Mon, 10 May 2010 12:49:11 +0000

Here is a step-by-step tutorial on how to customise WordPress Login page for your website/blog. This tutorial will show you how to change the WordPress logo and link on the Login page without hacking the core code nor installing a plugin.

1. Copy and paste the following code into functions.php file of your current theme. If there is no functions.php in your current theme folder, create one.

';
    echo '';
    echo '';
}
add_action('login_head', 'custom_header');
?>

2. Create a folder called admin in your current theme folder. This is where you will put all your css, js and images for the custom Login page. I like to create a separate folder for admin css and images because it keeps things neat and clean.

3. Create a css file and name it login.css. You can give it any name you wish but remember to change it accordingly in custom_header() function in functions.php file of your current WordPress theme. In this css file, you will be putting CSS overrides for the WordPress login page. Mine looks like this:

#login h1 a {
	background: transparent url(images/logo.gif) no-repeat scroll 0 0;
	display: block;
	height: 66px;
	text-indent: -5000em;
	width: 386px;
}

#login {
	width: 368px;
}

The above code simply replaces the WordPress logo above the Login box with the custom logo I have in images folder and makes the width of the login box a bit wider. You can do many other things from this CSS file to customise your WordPress login page; for example, changing the background image, changing the text styles, changing the look and feel of buttons, etc.

4. Create a javascript file called login.js in admin folder of the current WordPress theme that you have created earlier. As with the css file, you can name it any thing you like, just as long as it matches the one used in custom_header() function. And because I have also included jQuery library from Google AJAX Libraries API, I can use jQuery methods to overwrite any event or perform new actions via login.js javascript. My login.js file looks like below:

$(document).ready(function(){
	$("#login h1 a").attr("href", "/");
});

The above code replaces the href attribute of the logo link via DOM. So rather than going to the WordPress website when someone clicks on the logo on Login page, it will go to the website’s homepage.

So, that’s it. 4 simple steps to customising your WordPress Admin Login page. If you are using WordPress as a CMS, it is a good idea to customise the Admin Login page to ensure that you get a similar user experience and look and feel for both the front end of the website and the backend. For your inspiration, have a look at this Flickr Group Pool featuring a collection of Custom WordPress Logins.

Display 5 latest posts in each category in WordPress

eisabai — Wed, 10 Mar 2010 12:34:24 +0000

To display 5 latest posts in each parent category of your WordPress blog, add the following code into the template that you want the result to appear. In our case, we added the following code into our 404 template page (404.php of current theme). Other places that you might want to display a list of posts by category are: 1) Footer, 2) WordPress Custom Archive Page, 3) WordPress Custom Search Page, 4) WordPress Landing Page and so on.

Screenshot of 404 page with a list of posts by category (Wide View)

Screenshot of 404 page with a list of posts by category (Narrow View)

WordPress PHP Code



 'name',
  'order' => 'ASC',
  'child_of' => 0
);

$categories =   get_categories($cat_args); 

foreach($categories as $category) {
    echo '';
    echo ' name ) . '" ' . '>' . $category->name.'';

     $post_args = array(
      'numberposts' => 5,
      'category' => $category->term_id
    );

    $posts = get_posts($post_args);

	foreach($posts as $post) {
	?>
		
	 name ) . '" ' . '>View all posts in ' . $category->name.'';
	echo '';
}
?>

CSS

#page-not-found dl {
width: 200px;
float: left;
padding: 0 18px 0 0;
height: 250px;
}

#page-not-found dt {
font-weight: bold;
font-size: 1.1em;
padding: 10px 0;
}

#page-not-found dt a {
color: #b0bf32;
}

#page-not-found dd.view-all {
border-top: 1px solid #c9c9c9;
font-size: 0.9em;
margin: 5px 0;
padding: 2px 0 0;
text-align: right;
}

#page-not-found dd.view-all a {
color: #999;
}

.page-end {
clear: both;
}

25 Most Dangerous Programming Errors

eisabai — Tue, 23 Feb 2010 04:51:36 +0000

As you can see in the table below, Cross-Site Scripting, SQL Injection and Buffer overflows are three most common and serious programming errors that result in vulnerabilities. This list was published recently on 17 February 2010.

Rank	Name
[1]	Failure to Preserve Web Page Structure ('Cross-site Scripting')
[2]	Improper Sanitization of Special Elements used in an SQL Command ('SQL Injection')
[3]	Buffer Copy without Checking Size of Input ('Classic Buffer Overflow')
[4]	Cross-Site Request Forgery (CSRF)
[5]	Improper Access Control (Authorization)
[6]	Reliance on Untrusted Inputs in a Security Decision
[7]	Improper Limitation of a Pathname to a Restricted Directory ('Path Traversal')
[8]	Unrestricted Upload of File with Dangerous Type
[9]	Improper Sanitization of Special Elements used in an OS Command ('OS Command Injection')
[10]	Missing Encryption of Sensitive Data
[11]	Use of Hard-coded Credentials
[12]	Buffer Access with Incorrect Length Value
[13]	Improper Control of Filename for Include/Require Statement in PHP Program ('PHP File Inclusion')
[14]	Improper Validation of Array Index
[15]	Improper Check for Unusual or Exceptional Conditions
[16]	Information Exposure Through an Error Message
[17]	Integer Overflow or Wraparound
[18]	Incorrect Calculation of Buffer Size
[19]	Missing Authentication for Critical Function
[20]	Download of Code Without Integrity Check
[21]	Incorrect Permission Assignment for Critical Resource
[22]	Allocation of Resources Without Limits or Throttling
[23]	URL Redirection to Untrusted Site ('Open Redirect')
[24]	Use of a Broken or Risky Cryptographic Algorithm
[25]	Race Condition

Source: 2010 CWE/SANS Top 25 Most Dangerous Programming Errors

Book Review: Drupal 6 Content Administration

eisabai — Thu, 13 Aug 2009 03:17:57 +0000

I have just finished reading Drupal 6 Content Administration by J. Ayen Green. It has 8 chapters (196 pages) in total but the writing style is very simple and easy to understand that I finished it quite quickly.

This book is mainly for content editors who have not used Drupal before and want to know how to run a website built on Drupal. It will also come in handy for project managers who want to find out if Drupal is suitable for their website and what skills are required to manage a website built on Drupal. But it’s not for professional Drupal users and developers because they would probably already knew most of the topics covered in the book.

Pros:

Uses an example site with screenshots, which helps you understand how Drupal is used in a real-life website
Explains many Drupal lingo and their usages in a clear and concise manner
Shows different ways that content administrators may use to take more control of the website rather than just creating and editing content

Cons:

As mentioned, this book is not for professional Drupal users and developers because the book mostly covers the basics of running a Drupal website
Some chapters, in particular Chapter 4 Advanced Content Editing, requires technical and coding knowledge which most content producers do not have

My Quick Overview
Read the full Table of Contents at the Publisher’s website.

Chapter 1 – 3 – Introduction to Drupal and some basics to get you started.

Chapter 4 – Cover technical details. For advanced content editors with HTML and coding knowledge.

Chapter 5 – Talks about how to set up Taxonomy, tag cloud and friendly URLs. My favourite chapter of the book because it is specific to Drupal and I believe most producers will find this useful.

Chapter 6 – Covers Rich Content Types. It shows how powerful Drupal is by giving content producers more control to manage the website. Another favourite chapter of mine!

Chapter 7 – Gives a comprehensive example of roles and permissions you can create. It also shows how easy it is to block a certain user from certain areas of the website.

Chapter 8 – Explains three ways to create content outside Drupal environment.

Appendix A is a bonus chapter which explains the steps involved in installing a Drupal website. Being a technical person, I find it quite useful but it’s probably too technical for most content producers.

Overall, I find this book an easy read covering basics of content creation and maintenance for a Drupal website which the target audience will find useful.

Display a download dialog for pdf in PHP

eisabai — Tue, 30 Jun 2009 03:15:41 +0000

In order to display a download dialog for pdf file rather than opening it in the browser, we can put the following snippet of code in a php file and name the file download.php.

The path to the pdf file is specified in $filename variable. You can also pass filename as a parameter in the URL but you will need to check for Cross Site Scripting (XSS) and various script injection attempts if you decide to get the filename from the URL paramater.

  $filename = '/path/to/your/file/download.pdf';
  header("Pragma: public");
  header("Expires: 0");
  header("Pragma: no-cache");
  header("Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0");
  header("Content-Type: application/force-download");
  header("Content-Type: application/octet-stream");
  header("Content-Type: application/download");
  header('Content-disposition: attachment; filename=' . basename($filename));
  header("Content-Type: application/pdf");
  header("Content-Transfer-Encoding: binary");
  header('Content-Length: ' . filesize($filename));
  @readfile($filename);
  exit(0);

Building a real estate website using WordPress

eisabai — Wed, 27 May 2009 05:37:21 +0000

One of our latest projects at Anansi Web Development was to build a real estate website with a simple CMS. And I thought, rather than building something from the scratch, why don’t we use WordPress as a CMS and add necessary functionalities. And therefore, here are the steps involved in building a real estate website using WordPress.

1. Install WordPress
Download the latest WordPress software from WordPress website and install it on your development server/ local machine.

2. Develop the backend
This step is more about enhancing the existing WordPress admin rather than building a custom bespoke CMS. Our goal here is to make the backend as simple as possible for the content admin who will be looking after the website and uploading listings on a day-to-day basis. There are 2 real estate plugins available for WordPress, however, data required for Australia Real Estate listing and US Real Estate listing are significantly different, which means it is impossible to use those plugins for our project without modifying a lot of code. Therefore, we decided to build our own in WordPress. We referred to Standard Real Estate XML Format for Australia – REAXML1 to get the structure of a standard real estate listing data.

3. Install necessary plugins
Rather than reinventing the wheel, we installed the following plugins on the website.
Lightbox Gallery
Post Gallery
WP-ContactForm
All in One SEO Pack

4. Develop the frontend
As we have the designs from our client, the next step is to develop the frontend for the WordPress real estate website. Using the design mocks, we look at how each page looks like and how various real estate information will be displayed to the users of the website. The good thing about WordPress is that you can basically have a different look and feel for every single page on the website using Template. In our case, we needed 5 templates; homepage template, listings category template (for Properties for Sale and Properties for Lease), listing template (for listing pages), page template (for the rest of the content like Our Team, Contact Us, Privacy Policy, etc) and default template (for fallback and any other pages).

5. Test, deploy, release
The last and final step of building a Real Estate website (or any other website, for that matter) is test, deploy and release. Here, we tested the website by populating content and property listings into the database via the WordPress admin, viewing the site on a few different browsers, and ensuring that everything works and displays as expected. We then deployed the website onto the live server, tested some more and made it available to the general public.

The final result
I have to say it saves us a lot of time using WordPress as a CMS compared to building a custom application and we were able to deliver the website with a complete CMS (using WordPress) at a very low cost within a week. Many features, such as RSS, Search, Login, Registration, etc are already available in WordPress. It also aligns with our overall development objectives as we are a big fan of using open source technologies. And it works perfectly in this case because our client is already familiar with WordPress and he was able to step into uploading content and listings with minimal training.

If you are trying to build a similar real estate website in WordPress, have a look at Elegant Real Estate WordPress Theme. It comes with built in basic real estate listing filtering, featured slider banner, admin options to control settings and PSD file to customise the theme design if required.

If you are interested in hiring us to build a real estate website in WordPress, please contact us to obtain a quote.

My list of essential Drupal modules

eisabai — Wed, 07 Jan 2009 00:07:24 +0000

After setting up and configuring Drupal for a few websites, I have managed to compile a list of common/essential modules that I install for most websites. And here they are – my list of essential Drupal modules:

Core – optional

Contact - Enables the use of both personal and site-wide contact forms.

PHP filter - Allows embedded PHP code/snippets to be evaluated.

Search - Enables site-wide keyword searching.

Poll – Allows your site to capture votes on different topics in the form of multiple choice questions.

Taxonomy - Enables the categorization of content.

Image

Image – Allows uploading, resizing and viewing of images.

Image assist – This module allows users to upload and insert inline images into posts. It automatically generates an Add image link under the textarea fields of your choice.

Image Gallery – Allows sorting and displaying of image galleries based on categories.

Others

SEO

Meta tags – Allows users to add meta tags, eg keywords or description.

Pathauto – Provides a mechanism for modules to automatically generate aliases for the content they manage.

Token – Provides a shared API for replacement of textual placeholders with actual data.

WYSIWYG HTML Editor

FCKeditor – Enables the usage of FCKeditor (WYSIWYG) instead of plain text fields.

Spam Control

CAPTCHAM – Base CAPTCHA module for adding challenges to arbitrary forms.

reCAPTCHA – Uses the reCAPTCHA web service to improve the CAPTCHA system.

Email a friend

Forward - Forward this page module

Technorati Tags: drupal, modules, cms, content management system, web development

15 useful cheat sheets for web developers

eisabai — Sun, 09 Nov 2008 13:49:45 +0000

The followings are useful cheat sheets for web developers who need to refer to certain syntax and code quickly and easily. They are printer-friendly so you can print them out and stick them on your wall like posters. For those who want a little more than cheat sheets, check our our recommended web development books for a list of books on Mobile Web Development, CSS, Javascript & AJAX and API & Web Services.

The Web Developer’s SEO Cheat Sheet

PHP Cheat Sheet

MySQL Cheat Sheet

jQuery 1.2 Cheatsheet

Really Simple Syndication (RSS) Cheat Sheet

Unix/Linux Command Reference

xHTML Cheat Sheet

Microformats Cheat Sheet

vi Editor Cheat Sheet

CSS Cheat Sheet

CSS Shorthand Cheat Sheet

mod_rewrite Cheat Sheet

Mozilla Firefox Cheat Sheet

Dreamweaver Quick Reference, Adobe Dreamweaver CS3 Cheat Sheet

Drupal Theme Developer’s Cheat Sheet

Technorati Tags: cheatsheets, cheat sheets, pdf, web developers, web development

Enabling gd image library in PHP (Windows)

eisabai — Tue, 21 Oct 2008 00:26:19 +0000

1. Uncomment the following line in php.ini. php.ini file is located in the main directory of your PHP installation, for example: C:\PHP\php.ini.

;extension=php_gd2.dll

2. Make sure you have php_gd2.dll file in the extensions directory. The extension directory of my PHP installation is C:\PHP\ext. Look for the directive “extension_dir” in php.ini file to get the exact location of your extensions directory.

3. Run php.exe from your PHP installation directory.

3.1. If you don’t have the dll file, you will have a similiar error message as below:

Unknown(): Unable to load dynamic library 'C:\PHP\ext\php_gd2.dll' - The specified module could not be found.

Download the appropriate Windows Binaries from the Official PHP Website Downloads page and copy the required extension into your php extension directory.

4. Restart Apache server.

Technorati Tags: troubleshooting, gd library, php, configuration, apache

Web Development Blog » PHP

Creating a Contact Form in jQuery Mobile and PHP

Download

Contact Us

Download

How to customise WordPress Admin Login page

Display 5 latest posts in each category in WordPress

25 Most Dangerous Programming Errors

Book Review: Drupal 6 Content Administration

Display a download dialog for pdf in PHP

Building a real estate website using WordPress

My list of essential Drupal modules

Core – optional

Image

Others

SEO

Menu

WYSIWYG HTML Editor

Spam Control

Email a friend

15 useful cheat sheets for web developers

Enabling gd image library in PHP (Windows)