Dev Tips | Become a Better Developer, One Tip at a Time. » Downloads http://dev-tips.com Become a Better Developer, One Tip at a Time. Sun, 07 Mar 2010 02:19:49 +0000 en hourly 1 http://wordpress.org/?v= Introducing Minerva – A Creative Portfolio Theme http://dev-tips.com/featured/introducing-minerva-a-creative-portfolio-theme http://dev-tips.com/featured/introducing-minerva-a-creative-portfolio-theme#comments Wed, 06 Jan 2010 04:52:43 +0000 Drew Douglass http://dev-tips.com/?p=762 Recently, I teamed up with very talented designer and personal friend Baz Deas to form a small and fun ThemeForest team. We came up with a name, DesignThirst, and have released our first premium HTML template on ThemeForest. Minerva, the name of the theme, is a premium and very fresh corporate/portfolio theme. Just check out some the features!

Introducing "Minerva"

Minerva is a fresh and clean site template that works great as a portfolio, personal, blog, or corporate site. Minerva comes packed with features and is ready to go out of the box. It even comes with a working AJAX & PHP contact form w/ spam protection!

Screenshots

Home Page

Footer

Contact Page

Blog Comments

Theme Features

  • Working AJAX & PHP Contact form.
  • Nice jQuery effects in the Footer and ‘Share This’ section.
  • Easy to use jQuery Slider in the header.
  • Custom Font Embedding with Cufon, falls back on awesome font stacks and still looks great.
  • 5 Different page types included.
  • Supported in all major browsers, including IE6!
  • Valid XHTML
  • Custom and in depth online and offline documentation and support.
  • Clean, elegant, and semantic code aids in good SEO .
  • Minimal use of images and creative use of sprites to save loading times.
  • Special attention paid to elements and typography, see demo page.

Demo, Documentation, & Support

http://designthirst.net/themes/minerva/ – Live Demo

http://designthirst.net/docs/minerva/ – Online Documentation

http://twitter.com/DesignThirst – DesignThirst on Twitter

Get Minerva now!

You can get Minerva right now, available exclusively through ThemeForest.

Feedback, Updates, and Feature Requests

If you didn't know, once you buy a theme on ThemeForest, you can download any updates made to that item for free at anytime! That said, we're about to release Minerva version 1.1 version 1.1 has been released!, which comes with some small enhancements, so no matter when you buy it, you'll forever have access to upgrades for free!

I'd love to hear any feedback or feature requests, let me know what you think!

]]> http://dev-tips.com/featured/introducing-minerva-a-creative-portfolio-theme/feed 2 How To Create Your First AJAX and PHP Contact Form http://dev-tips.com/featured/ajax-and-php-contact-form http://dev-tips.com/featured/ajax-and-php-contact-form#comments Mon, 02 Nov 2009 12:38:24 +0000 Drew Douglass http://dev-tips.com/?p=586 You've been to websites that use them, a nice little AJAX contact form. AJAX is a great way to submit data without a page refresh and is a great tool for certain elements of a website, such as a contact form. So how do we go about doing so? Today, we will take it step by step and build your first AJAX and PHP contact form. We'll be using jQuery and the popular email validation code found on google code (originally by AddedBytes) to help us out.


php_ajax_form

Live Demo

Ajax_Contact_Form (4130) - 5.68 KB

Folder Structure and Files

Here is a brief overview of how we will setup our folders and files. If you are following along, you can go ahead and create all of these now, we'll get to them all one by one.

Below is the folder structure and files contained within:

  • assets
    • css
      • style.css
    • js
      • ajax.js
    • php
      • contact-send.php
      • email-validator.php (will be downloaded and added later on)
    • index.html

HTML and Form Markup

Now we need our HTML and form markup. We will try to keep it relatively simple.

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>Your First AJAX and PHP Contact Form - Live Demo</title>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	<script type="text/javascript" src="assets/js/ajax.js"></script>
	<link rel="stylesheet" type='text/css' href='assets/css/style.css' media='screen' />
</head>

<body>
	<div id='wrap'>
		<div id='header'>
			<h1>Get in touch with us...</h1>
			<h2>Use the form below to try out the contact form.</h2>
		</div>

		<form method='post' action='./assets/php/contact-send.php'>
		<fieldset>
			<legend>Contact Us</legend>
			<label for='name'>Name (required)</label>
				<input id='form_name' type='text' name='name' value='' />
			<label for='email'>Email (required)</label>
				<input id='form_email' type='text' name='email' value='' />
			<label for='subject'>Subject</label>
				<input id='form_subject' type='text' name='subject' value='' />
			<label for='message'>Message (required)</label>
				<textarea id='form_message' rows='10' cols='40' name='message' value=''></textarea>

			<input id='form_submit' type='submit' name='submit' value='Submit' />

			<p class='hide' id='response'></p>

			<div class='hide'>
				<label for='spamCheck'>Do not fill out this field</label>
				<input name='spam_check' type='text' value='' />
			</div>
		</fieldset>
		</form>

	</div>
</body>
</html>

Everything above should look pretty standard, you'll notice we have a weird input and label towards the bottom of the form. We will be using this as a very basic spam check later on. More on that in a bit.

Also take note we are importing jQuery, our soon to be created ajax.js, and our style.css.

Styles

I'll leave the styles up to you, here is the bare minimum. The only thing we really need to make sure is that we hide anything inside the div class of hide. Notice we have still typed

Do not fill out this field

. We've done so in the very rare chance someone is surfing without CSS, they will know to leave the field blank.

style.css

#wrap {
	margin:0 auto;
	width:960px;
}
.hide {
	display: none;
}
label {
	display:block;
}
input {
	display:block;
}

The PHP Code

If you need to brush up on your php skills check out 5 more quality sites to help you become a php rockstar

A word about email validation

You will need to download a file before I go any further, you can download the google email validation script here.

Got it downloaded? Great! Name it email-validator.php and put it in your php folder you created.

Now, a word about email validation. It is tricky business to say the least. There are hundreds if not thousands of little tiny things to take into account. I recently wrote a blog post titled The right way to validate an email address with php. In hindsight, thhe technique used in that post certainly works, but isn't without it's draw backs. FILTER_VALIDATE_EMAIL has known bugs and only runs on newer versions of php, so this isn't an option for a lot of people.

Tired yet? Bare with me.

This is where the google code email validation script we downloaded comes in to play. It originally aired on the well known site AddedBytes.com. It has since grown in popularity so much that it has been moved to google code where it has received hundreds of contributions from members around the world, all with a goal to build a very solid and quick email validation system.

In short, the google email validation script kicks ass and we are going to use it.

Back to the main php code

Now is where we let the php do the heavy lifting. If you haven't already created your contact-send.php file, see the structure above and do so now.

I have left many comments in the code below, so be sure to read through them. I'll go through a few important bullet points after.

contact-send.php

Editors note: Please ignore any duplicate empty function calls below, this is a known bug of the syntax highlighting plugin. You can always download the source files if you have any confusion.

<?php
//Catch any errors while testing our script
//Remove when going live.
ini_set("display_errors", "1");
error_reporting(E_ALL); 

//Ensures no one loads page and does simple spam check.
if(isset($_POST['name']) && empty($_POST['spam_check']))
{
	//Include our email validator for later use
	require 'email-validator.php';
	$validator = new EmailAddressValidator();

	//Declare our $errors variable we will be using later to store any errors.
	$errors = array();

	//Setup our basic variables
	$input_name = strip_tags($_POST['name']);
	$input_email = strip_tags($_POST['email']);
	$input_subject = strip_tags($_POST['subject']);
	$input_message = strip_tags($_POST['message']);

	//We'll check and see if any of the required fields are empty.
	//We use an array to store the required fields.
	$required = array('Name field' => 'name', 'Email field' => 'email', 'Message field' => 'message');

	//Loops through each required $_POST value
	//Checks to ensure it is not empty.
	foreach($required as $key=>$value)
	{
		if(isset($_POST[$value]) && $_POST[$value] !== '')
		{
			continue;
		}
		else {
			$errors[] = $key . ' cannot be left blank';
		}
	}

	//Make sure the email is valid.
    if (!$validator->check_email_address($input_email)) {
           $errors[] = 'Email address is invalid.';
    }

	//Now check to see if there are any errors
	if(empty($errors))
	{

		//No errors, send mail using conditional to ensure it was sent.
		if(mail('fwdrew@gmail.com', "Message from $input_name - $input_subject", $input_message, "From: $input_email"))
		{
			echo 'Your email has been sent.';
		}
		else
		{
			echo 'There was a problem sending your email.';
		}

	}
	else
	{

		//Errors were found, output all errors to the user.
		echo implode('<br />', $errors);

	}
}
else
{
	die('Direct access to this page is not allowed.');
}

Read through the comments thoroughly, most of the code should explain itself.

A few notes:

  • On lines 4-5, we turn error reporting on, this is always a good idea when testing. Remove these lines before going live.
  • On line 8, we ensure that no one loads the page directly, but also do a spam check. When spam bots hit a form they usually fill out all HTML input fields, regardless if they are hidden with css or not. Bots also usually fill in every single input field in hopes of successfully submitting the form. We make sure this field is empty before proceeding. This is a small and basic but effective method against some spam.
  • Lines 11-12 we include and initiate our email validation object.
  • Lines 29-39 check for any empty fields that are required.
  • Line 41-43 Check to see if the email is valid

The rest should make sense.

Right now you have a complete and working contact form. Congratulations! However, we can make this even easier on the end user by using jQuery and a simple AJAX request. jQuery is a Javascript library that allows you to easily do all kinds of cool things, such as quick and easy font resizing and animation.

The jQuery/Javascript

Lets walk through the logic of what we want the jQuery code to do for us, before we start coding it. You'll find this will help you think things through and be more efficient.

  1. Include the jQuery library, we've done so in our head section of our HTML already.
  2. When the form is clicked, ensure that we return false.
  3. Setup our necessary variables holding our form values.
  4. Show the user that work is being done (e.g. Loading...).
  5. Make the AJAX request to our contact-send.php file with input fields as POST data.
  6. Grab the response from the php file, and display it under the form, in the response element we have in our HTML page

Again, I encourage you to go through each line of the code slowly, and read the comments.

ajax.js

$(function(){

	//Do what we need to when form is submitted.
	$('#form_submit').click(function(){

	//Setup any needed variables.
	var input_name = $('#form_name').val(),
		input_email = $('#form_email').val(),
		input_subject = $('#form_subject').val(),
		input_message = $('#form_message').val(),
		response_text = $('#response');
		//Hide any previous response text
		response_text.hide();

		//Change response text to 'loading...'
		response_text.html('Loading...').show();

		//Make AJAX request
		$.post('http://dev-tips.com/demo/ajax_contact_form/assets/php/contact-send.php', {name: input_name, email: input_email, subject: input_subject, message: input_message}, function(data){
			response_text.html(data);
		});

		//Cancel default action
		return false;
	});

});

Obviously, you will want to change the address/location on line 19 to wherever your file is. The rest should be self explanatory.

Works Without Javascript!

Keep in mind a small amount of users wont surf with JavaScript enabled. This means anytime you use AJAX or JavaScript, you need to think about what will happen if JS is disabled. In our case, if JS is disabled, the form will refresh, be validated by php, and send the email if necessary. No worries for us :)

Sit back and relax

If you've been following along this whole time, you can relax and get some bacon now, you've just built a complete AJAX and PHP contact form from scratch!

Comments? Questions? Suggestions? Let me know what you think in the comments section below. And be sure to check out the live demo and/or download all of the files used in this tutorial.

Live Demo

Ajax_Contact_Form (4130) - 5.68 KB

I love Chinese food!

If you found this useful or plan on using this code, will you consider making a donation? I really just want some chicken fried rice.


]]> http://dev-tips.com/featured/ajax-and-php-contact-form/feed 72 Link Nudge jQuery Plugin http://dev-tips.com/featured/link-nudge-jquery-plugin http://dev-tips.com/featured/link-nudge-jquery-plugin#comments Wed, 05 Aug 2009 21:06:02 +0000 Drew Douglass http://dev-tips.com/?p=499 I think it was David Walsh who first showed me the idea of link nudging using jQuery. You can see on the sidebar we also use this technique. I haven't seen a plugin made to do this yet (as it is really simple) so I figured this would be perfect for a quick jQuery plugin tutorial. You can download the plugin and/or view the demo below.

View Demo

jQuery Link Nudge Plugin (772) - 19.9 KB

Authors Note:This plugin has now been given the name of NudgeIt and has had a lot of new features added! Please see the two updates at the bottom of this page for more information.

The Plugin Javascript

Creating the plugin is simple and is as easy as creating any other jQuery plugin. I'll try to comment the source code some so you can get an idea of how it all works.

jQuery Link Nudge Plugin
Posted by DrewDouglass on August 5th, 2009
Plugin Source.

(function($){
               
                //Define the plugin, named 'linkNudge'
                $.fn.linkNudge = function(params){
                       
                        //set default parameters
                        params = $.extend({
                                padding: 20,
                                elapseTime: 300,
                                returnPadding: 0}, params);
                       
                        //Traverse every node passed
                        this.each(function(){
                               
                                //Define this as a single object
                                var $t = $(this);
                               
                                //Proceed to nudge on hover
                                $t.hover(function(){
                                        $t.stop().css('cursor', 'pointer').animate({paddingLeft: params.padding}, params.elapseTime);   
                                }, function(){
                                        $t.stop().animate({paddingLeft: params.returnPadding}, params.elapseTime);
                                });
                               
                        });
                       
                        return this;//Allow for chaining.
                };
       
        })(jQuery);

Usage

$(function(){
		$('ul li:even').linkNudge({
			elapseTime: 500
		}).css('list-style-type', 'circle');//Plugin allows for chaining, as seen with the css call.
	});

Documentation

To use the plugin, simply include the plugin and jQuery library on your page and make a call to the linkNudge function. You can include three optional parameters, as discussed below.

  1. padding - Allows you to set how far the link should be nudged. Defaults to 20px.
  2. elapseTime - The time, in milliseconds, over which the nudge should occur. Default to 300.
  3. returnPadding - Optional padding to return to when the element is no longer being hovered. Defaults to 0.

    4. Terms of Use

    You can't sell it. Otherwise, use it how you would like in your projects, a credit to this page in the notes or documentation would be appreciated. Donations even more so.

    View Demo

    jQuery Link Nudge Plugin (772) - 19.9 KB

    Feed Me

    If you have used or enjoy this plugin, I urge you to consider making a small donation so I can buy some Chinese food.


    Update:

    David Walsh has modified the flexibility of the plugin in a new post on his blog. I encourage all of you to give it a look and download and see how they differ. You can find Davids plugin on his website. Thanks for adding on to and improving the plugin David!

    Update Two!

    David and I have decided to collaborate on this plugin and host it on a GitHub so everyone can easily keep track of any updates or changes. We are now also calling the plugin, quite appropriately, NudgeIt.

    ]]> http://dev-tips.com/featured/link-nudge-jquery-plugin/feed 13 WordPress Plugin: Are You Sure? http://dev-tips.com/featured/wordpress-plugin-are-you-sure http://dev-tips.com/featured/wordpress-plugin-are-you-sure#comments Sun, 22 Feb 2009 08:26:55 +0000 Drew Douglass http://dev-tips.com/?p=208 Today we are releasing a new and very simple WordPress plugin we think you will all enjoy. The plugin is named Are You Sure? and it was created to prevent any accidental postings. If you have used WordPress for any amount of time, I am sure you have accidentally pressed the 'Publish' button before you were ready to publish. Sure, you can go back and change it, but chances are your RSS readers and anyone browsing the site already have seen it. Are You Sure? uses some simple Javascript when the Publish button is clicked and confirms that you do indeed wish to publish the current content. Read on to download and for instructions.

    Are You Sure? (1045) - 1.67 KB

    Features

    Upon clicking the 'Publish' or 'Update post/page' button, a simple Javascript box confirms that you wish to publish the current content. You may cancel the publishing and go back and continue editing.

    • Extremely small file size, less than 1.7 KB total.
    • Simple to use, just activate and your done.
    • Saves you from accidental posting.
    • Works on any 'Publish' button, including pages, posts, and quickpress.
    • Tested and Compatible with WordPress 2.7+

    Screenshot

    Are You Sure Plugin Screenshot

    Installation and Usage

    If you have never used a WordPress Plugin, you may consider reading the introduction to plugins on the WordPress Codex.

    • Upload the 'areyousure' folder to 'wp-content/plugins/' directory on your server.
    • Go to the plugins link in the WordPress sidebar in your WordPress admin panel.
    • Find the plugin and click activate.
    • Your done!

    Download

    Are You Sure? (1045) - 1.67 KB

    WP Version:Tested and working up to WP 2.9+
    Current Version: 1.0
    Download: Are You Sure? (1045) - 1.67 KB
    GitHub URL: http://github.com/DrewDouglass/Are-You-Sure-
    GitHub Clone: git://github.com/DrewDouglass/Are-You-Sure-.git

    Buy Me Some Chinese Food?

    If you enjoy this plugin and have found it helpful, I encourage you to consider making a donation of any amount. Donations keep me motivated and help cover a tiny percent of the time and costs that go into developing plugins for the WordPress Community


    Feedback and Requests

    We'd love to hear any feedback or requests you might have, let us know in the comments below! If you need support you can shoot us an email via our contact page. If you enjoy WordPress and WordPress plugins, you might also enjoy our article titled 'Use the twitter API to create a wordpress plugin'.

    ]]>     http://dev-tips.com/featured/wordpress-plugin-are-you-sure/feed 24     iBlog-A Free and Functional HTML and PHP Theme http://dev-tips.com/featured/iblog-a-free-and-functional-html-and-php-theme http://dev-tips.com/featured/iblog-a-free-and-functional-html-and-php-theme#comments Sat, 24 Jan 2009 02:55:02 +0000 Drew Douglass http://dev-tips.com/?p=118 I'm glad to release the first of many free themes to come on Dev-Tips. Every once in a while, we will release another free HTML or WordPress theme for you to use however you like. You cannot sell these themes or use them commercially without the permission of Dev-Tips.com. Other than that, enjoy them! Today, we will have a look at a fully functional HTML and PHP based theme called iBlog.

    Download iBlog (838) - 2.63 MB

    Introducing iBlog

    If you didn't already guess, iBlog was named and inspired by Apple, as are a lot of my designs. Call me a fanboy, I'm cool with that. Below you will find the screenshots, features, and a screencast going over the features and install.

    Home Page

    iBlog Screenshot

    Single/About Page

    iBlog Screenshot

    Image Gallery

    iBlog Screenshot

    Contact Message Fail

    iBlog Screenshot

    Contact Message Pass

    iBlog Screenshot

    iBlog Features

    • Font embedding via typeface.js
    • Twitter updates via JSON
    • Working php contact form with custom success and error messages
    • Lightbox effect on the image gallery
    • The "paper clip" is a seperate image, thus any image can be replaced under it.
    • Compatible with IE6+ FF 2+ Opera 9+, Safari 3.0+
    • Full psd file included.
    • Help file included that explains everything you need to know about setting up this theme.

    Important Note

    You need to be running PHP version 5 or higher for this to work properly. It may work in PHP 4, however, no support will be provided for those running PHP 4. Please upgrade.

    Live Preview

    You can view a live preview and all source code at the live preview page for iBlog.

    Usage

    You may use iBlog in any non-commercial way you wish. If you enjoy the theme, a link back to Dev-Tips is appreciated and helps keep us motivated to build more free themes!

    Download iBlog

    Download iBlog (838) - 2.63 MB

    Get Support

    Please read the help file thoroughly before requesting support. If you still need help, please contact us via the contact page with the subject of 'Theme Support'.

    Hosting

    You can get also get blog hosting over at WHS, if you don't already have a webhosting provider. They can help you find good options should you need it.

    Lastly, if you enjoyed this theme, let us know! We'd love to know what you think, and what you would like in the future.

    ]]>     http://dev-tips.com/featured/iblog-a-free-and-functional-html-and-php-theme/feed 12