I recently got a Google Wave invite and it is awesome. I will probably receive invites to Google Wave soon so if you would like an invite leave your email below using scr.im and I will invite as many commenters as I can.

Related posts:

1. PHP Class for Google Maps API A few days ago I was developing a website for...

Related posts brought to you by Yet Another Related Posts Plugin.

View full tutorial

In the last episode we added AJAX functionality to a paginated list of products. Instead of acting as normal HTML links, the paginated links had click events added to them via unobtrusive JavaScript so that when clicked they made an AJAX request that updated the main content of the page with a new page of products.

Problems With AJAX

Because we’re using AJAX to update the page the URL doesn’t change when a new page of products is loaded. This means that if we reload the page, or bookmark it and return to it later, the first page of products will be shown no matter what page of products we were on. Another consequence of using AJAX is that changing the page of links we’re viewing doesn’t add the previous page to the browser’s history, so we can’t use the back and forward buttons to move through the pages we’ve just viewed.

So there are disadvantages to our AJAX approach; how can we work around them? That’s what we’ll show you in this episode. Be warned that this episode will be more about JavaScript than Ruby on Rails as the issues we’ll be dealing with are on the client-side.

There are a number of JavaScript libraries we could use to solve this problem. One of the oldest is reallysimplehistory, available on Google code. There is also Yahoo’s Browser History Manager. Yahoo have a number of JavaScript libraries available so it’s worth a look. Another option is Asual’s SWFAddress, which works with Flash as well as JavaScript.

All of the libraries mentioned above work with plain JavaScript, but as we’re using jQuery in our application it would be better if we could find one designed to work with that. Asual, mentioned above, have released a plugin called jQuery Address that would work, but instead we’re going to use a different one called jQuery URL Utils plugin. This plugin has a lot of functionality despite its small size (less than 4KB minified) and comes with good documentation.

Continue reading full tutorial...

Related posts:

1. 10 CakePHP Tutorials You Should Read There are a number of frameworks available for PHP such...
2. Easily and effectively display images with FancyBox FancyBox is a plugin for jQuery that allows you to...

Related posts brought to you by Yet Another Related Posts Plugin.

Ruby on Rails is a framework for Ruby that has became increasingly popular over the last few years. The difference between a framework and a language is a language is used for compiling code whereas a framework is built on top of a language to allow for a more rapid development process.

Ruby on Rails uses the MVC (Model-View-Controller) pattern to keep code clean and organized. CakePHP is a great framework for PHP that replicates how Ruby on Rails works, the only difference being is it uses PHP and not Ruby so the code looks a lot different although some of the functions are named the same.

When learning a new language it is always best to give it your full attention for at least a week or two, because you will probably end up back where you started and not learning much more than you already knew. When using a language, frameworks, API's, etc, it is also recommended to refer to the documentation from time to time so that if you run into a bug it is more stress-free to solve.

If you are running Mac OS X then both Ruby and Rails are pre-installed. Windows and Linux users will have to download them.

Ruby on Rails Examples and Tutorials

Due to the popularity that Rails has gained lately there are a huge amount of new Ruby on Rails examples and tutorials floating around the internet.

The Rails Guides

The Rails guide provides a lot of detailed information about how the framework works and how to get the most out of it. There are discussions from different database types as well as ActiveRecord and how to create forms on the fly with minimal effort.

This guide will teach you all the basics that you need to know about the framework and describe exactly how the MVC pattern works. ActiveRecord is a class that is used within Rails so that you only have to write certain commands and they will work with all the databases that Rails supports, this will save you a lot of time if you ever switch database in the future because you will not need to alter anything. You can find out more about ActiveRecord on RailsGuide here.

Nettuts

Nettuts has to be one of the best blogs available for writing tutorials on just about anything web related. From CodeIgniter to Ruby on Rails: A Conversion is a great article for developers that have experience with CodeIgniter and would love to give Ruby on Rails a try.

The author of the article, Dan Harper creates a shout box using CodeIgniter and then an almost identical version with Ruby on Rails. This is a really good article for understanding how Ruby on Rails functions.

If for any reason you need to build a forum from scratch using Rails and need some help, then you can with Building a Forum From Scratch with Ruby on Rails.

If you just need to build a user authentication system using Rails, nettuts also have a great tutorial for beginners: Getting Started With Restful Authentication in Rails

Railscasts

Railscasts is a great podcast that any Rails developer should watch. The podcast is recorded by Ryan Bates, a Rails developer with good experience of the framework.

There is a new podcast posted almost every week with new and interesting techniques. Even the most advanced Rails developers are sure to learn a thing or two from this podcast with the wide range of areas that are covered.

A great tutorial that has been posted on Railscast lately that will be helpful to all beginners is Pagination with Ajax. With this tutorial you will learn how to include the jQuery javascript library inside of a rails webpage. You then learn how to use the will_paginate plugin for rails and because you are using jQuery as well the page will not refresh and results will appear almost instantly.

Feed Parsing

RSS feeds have became an increasingly popular format on the internet over the last few years, and if you are going to create a web 2.0 site of any kind then you will most likely want to be dealing with RSS feeds to allow readers to keep up to date. In this Railscast tutorial, Ryan uses the Feedzirra rails plugin to parse feeds and then output the data retrieved.

Official Rails website

On the official website of Rails there are a lot of links to screencasts that show you how to create a blog in 15 minutes.

The blog isn't anything to the standards of Wordpress but it is still functional and impressive for 15 minutes work. You will also find links to other screencasts that record Ruby on Rails examples and tutorials.

Good-tutorials

Good-tutorials now has a section on their website for Ruby on Rails tutorials. The tutorials vary from beginner to expert. If you have written a tutorial on Ruby on Rails this is a great way to drive traffic to your website.

Most of the Rails tutorials posted on websites will be submitted here so you will find a lot of useful articles and they are ordered into sub categories as well so that you can find exactly what tutorial you are looking for. If you sign up for an account on Good-tutorials you can also save your favourites if you want to remember them for later viewing.

Discussion

What websites have you found helpful on your way to learning Ruby on Rails? Let us know in the comments below.

Related posts:

1. 10 CakePHP Tutorials You Should Read There are a number of frameworks available for PHP such...
2. New Tutorials? What kind of new tutorials would you like to see...
3. Boosting traffic to your website with submission websites There are many ways of getting traffic to your website...

Related posts brought to you by Yet Another Related Posts Plugin.

This is my screencast for the Nettuts/Screenr screencast competition. I feel as though I rushed it because I had to do it under 5 minutes but I hope you learn a thing or two from it.

Source Files

Related posts:

1. PHP Contact Form Every website needs a way of contacting the people behind...
2. PHP Class for Google Maps API A few days ago I was developing a website for...

Related posts brought to you by Yet Another Related Posts Plugin.

FancyBox is a plugin for jQuery that allows you to easily display images in the same window with a simple yet effective code. The plugin takes no time to set up and all that is required is that you include the jQuery javascript library within the pages that you are using the FancyBox plugin on.

Features:

• Display single images
• Create image galleries
• Display iFrame
• Execute Ajax
• Include Flash, movies or audio files

Using FancyBox

First of all we need to link to the jQuery and FancyBox file after we have downloaded.

<script type="text/javascript" src="path-to-file/jquery.js"></script>
<script type="text/javascript" src="path-to-file/jquery.fancybox.js"></script>

Next we add the stylesheet that is included with FancyBox:

<link rel="stylesheet" href="path-to-file/fancybox.css" type="text/css" media="screen">

Then to link to an image we simply set the id of an image to "single_image":

<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>

All that is left to do is execute the jQuery code when the DOM is loaded.

$(document).ready(function() {
 
    $("a#single_image").fancybox();
 
}

That is all the code that is needed to display a single image. To learn how to do things such as ajax calls, view the documentation for FancyBox here.

Other lightbox alternatives

Is there another lightbox alternative that you have used that you would like to share with all the readers? Post a comment below.

Related posts:

1. ASCIICasts: AJAX History and Bookmarks View full tutorial In the last episode we added AJAX...
2. 10 CakePHP Tutorials You Should Read There are a number of frameworks available for PHP such...
3. jQuery #1 Learn how to use the animate function within the jQuery...

Related posts brought to you by Yet Another Related Posts Plugin.

Every website needs a way of contacting the people behind it and putting an email on a page is not such a good idea; because bots can easily pick up this email address and send spam to it. This is where a contact form comes in very useful because people can send you messages but do not get your email address.

For a contact form the first thing that we need to do is to create a form using HTML so that they can input their information and message that they are going to send.

<form action="send_message.php" method="POST">
	Name: <input type="text" name="name"> <br />
	Email: <input type="text" name="email"> <br />
	Message: <textarea name="message"></textarea> <br />
	<input type="submit" name="send_message" value="Send!">
</form>

When the press send it will then go to a page called send_message.php. This page will grab the information that they input and send it to an email address using the mail() function in PHP.

<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
 
$to = 'your_address@your_email.com';
$subject = "New message from $name";
 
mail($to, $subject, $message, "From: $email");
echo "Message sent";
?>

We need to check that the sender of the message is human so we will add a simple math question to the bottom of our form.

<?php
 
	$num_one = rand() % 10;
	$num_two = rand() & 10;
	$final_num = $num_one + $num_two;
	$_SESSION['answer'] = $final_num;
	echo $num_one . ' + ' . $num_two . ' = ';
	?>
    <input type="text" name="answer" /> <br />

Don't forget to add

<?php
session_start();
?>

To the top of the page or we will get errors.

Now we check to see if they have entered information into every field and that the answer to the math question is correct, if it is the message will be sent otherwise an error will be returned.

All the code for the form is:

<?php
session_start();
?>
<form action="send_message.php" method="POST">
	Name: <input type="text" name="name"> <br />
	Email: <input type="text" name="email"> <br />
	Message: <textarea name="message"></textarea> <br />
    <?php
 
	$num_one = rand() % 10;
	$num_two = rand() & 10;
	$final_num = $num_one + $num_two;
	$_SESSION['answer'] = $final_num;
	echo $num_one . ' + ' . $num_two . ' = ';
	?>
    <input type="text" name="answer" /> <br />
	<input type="submit" name="send_message" value="Send!">
</form>

All the code for error checking and sending the message is:

<?php
session_start();
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$user_answer = $_POST['answer'];
$real_answer = $_SESSION['answer'];
 
$to = 'your_address@your_email.com';
$subject = "New message from $name";
 
if(empty($name) OR empty($email) OR empty($message)) {
	echo "Fill in all fields.";
} elseif($user_answer != $real_answer) {
	echo "Math question was incorrect, please try again";
} else {
	mail($to, $subject, $message, "From: $email");
	echo "Message sent";
}
?>

You can download the source code for this tutorial here.

Please leave your comments and suggestions below for this tutorial.

Related posts:

1. PHP Class for Google Maps API A few days ago I was developing a website for...
2. Creating a Wordpress plugin The plugin that I'm going to show you how to...

Related posts brought to you by Yet Another Related Posts Plugin.

A few days ago I was developing a website for a client. They required that there be a map showing where addresses are that were retrieved from a database. I have never properly looked at the Google Maps API before because I have never needed to use it; so for the first time I looked at it and gave it a try. Then after playing around with it for a bit i realised that reverse geocoding was needed to convert the address into latitude and longitude figures.

Because I was programming this website in PHP I thought I would have a look around for a PHP class to see if there was a quicker way of doing this. Luckily enough I found a PHP class called PHP GoogleMapAPI. It took me a few minutes to read through the documentation for this class but it was so straight forward and simple. All in all it takes only 6 lines of code using this class to create a google map and locate it to an address; because it does all the other work for you that you don't need to know about if you're not going to be programming Google Maps every day of your life.

Implementing Google Maps on your website

The first thing you need to do is go to the website and download the class. Then copy it into the directory where you keep your classes stored on your server.

When you have downloaded the class, it then needs to be included in the file that we want to show the map in. At the top of your file insert the code below.

<?php
require('GoogleMapAPI.class.php');
$map = new GoogleMapAPI('map');
 
// enter YOUR Google Map Key
$map->setAPIKey('YOURGOOGLEMAPKEY');
 
$map->addMarkerByAddress('621 N 48th St # 6 Lincoln NE 68502','Our Address','<b>Our Address</b>');
 
<body onload="onLoad()">
 
    <?php $map->printMap(); ?>
 
</body>

What we are doing here is including the class with the require function in PHP. If the class fails to be included then the rest of the page will stop executing.
We then create a new instance of the class and then we insert.

If you have a Google Maps API key then insert it where it says 'YOURGOOGLEMAPKEY'. If you do not have one you can get one from here.

The function below adds a marker to the address you would like and centers it. This function takes 3 parameters; the address, a title and html.

$map->addMarkerByAddress();

We then need to include the onLoad function so that it knows to load the map on this page.

The last function that we add is

<?php $map->printMap(); ?>

Wherever you insert this function is where the map will be displayed on the page.

Let us know

I hope this tutorial has been useful and you have learned something new from it. Feel free to post a comment below and share your experience with this class or the Google Maps API.

Related posts:

1. Google Wave invite I recently got a Google Wave invite and it is...
2. Creating a Wordpress plugin The plugin that I'm going to show you how to...
3. PHP Contact Form Every website needs a way of contacting the people behind...

Related posts brought to you by Yet Another Related Posts Plugin.

There are a number of frameworks available for PHP such as CodeIgnitor, Zend, Symfony, Kohana and many more. In this article you will find tutorials that I have found on the web that will help PHP programmers that are new to the MVC pattern or CakePHP.

CakePHP is an amazing framework if you know how to use it, but the documentation for CakePHP is quite badly written and can cause confusion for new users. Here are a few links to try and make life easier for new and experienced CakePHP users.

1. Validation with CakePHP
2. Theming with CakePHP
3. Getting started quickly with Scriptaculous effects
4. Drag 'n drop tutorial with the CakePHP 1.2 Ajax helper, Prototype framework and Scriptaculous library
5. Secure CakePHP via Sessions & Magic (Login / Logout)
6. CakePHP ACL Tutorial
7. CakePHP Bake - Baking Models, Controllers and Views the CakePHP 1.2 Way
8. Cascading Dynamic Meta Tags and Page Titles in CakePHP 1.2
9. jQuery image upload & crop
10. Uploader - Plugin

Related posts:

1. Best Websites For Ruby On Rails Examples and Tutorials Ruby on Rails is a framework for Ruby that has...
2. ASCIICasts: AJAX History and Bookmarks View full tutorial In the last episode we added AJAX...

Related posts brought to you by Yet Another Related Posts Plugin.

Create a form that requires the user to enter both a username and password. If the username field or password field is left blank then a message will be displayed.

Related posts:

1. jQuery #1 Learn how to use the animate function within the jQuery...
2. PHP Contact Form Every website needs a way of contacting the people behind...

Related posts brought to you by Yet Another Related Posts Plugin.

Learn how to use the animate function within the jQuery library to create an effect similar to the table of contents for the table of contents on codeigniter.com.

Blip.tv Link

Click to play

Related posts:

1. jQuery Form Validation Create a form that requires the user to enter both...
2. Easily and effectively display images with FancyBox FancyBox is a plugin for jQuery that allows you to...
3. Creating a Wordpress plugin The plugin that I'm going to show you how to...

Related posts brought to you by Yet Another Related Posts Plugin.