Here is a recap of the posts from this week.

Build a Twitter-like site with CodeIgniter and jQuery Part 2

5 PHP Frameworks you may not know about

Creating a basic iPad application

Related posts:

1. Posts from this week Here is a list of posts from this week if...
2. 10 Awesome jQuery Tutorials You Should Check Out jQuery is a great tool that everyone in web development...
3. Build a Twitter-like site with CodeIgniter and jQuery Part 2 Don't forget to check out part 1 if you have...

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

Don't forget to check out part 1 if you have no read it.

In the second part of this 5 part tutorial series on how to build a Twitter-like website, we will be creating a signup form so that users can register to our website.

We will be adding records to the database that we created in part 1 and creating validation rules to make sure that the user didn't put any invalid data into the form.

Change the base url

Navigate to ci_twitter->system->applications->config->config.php.
Change:

$config['base_url'] = "http://example.com/";

To the path to where CodeIgniter is. On my machine it would be:

$config['base_url'] = "http://tutorials:8888/ci_twitter/";

Create the controller

We need to create a main controller for things such as the home page, sign up page, login page, etc. Go to ci_twitter->system->application->controllers then in the controllers folder create a file called main.php.

Inside our main controller we now need to define the class and the functions inside it.

<?php
class main extends Controller {
 
	function index()
	{
		$this->load->view('main/index');
	}
 
	function signup()
	{
		$this->load->library('form_validation');
		$this->load->helper(array('form', 'url'));
		$this->load->view('main/signup');
	}
 
	function signin()
	{
		$this->load->library('form_validation');
		$this->load->helper('form');
		$this->load->view('main/signin');
	}
 
}
 
?>

If we were to go to http://localhost/ci_twitter/index.php/main/ then we will see a blank page.

Create the views

Before we can see anything we need to create a folder for the functions in our main controller. Go to ci_twitter->system->application->views. Inside the views folder create another folder called main. In the main folder we will create files for each function that we have in the main controller.

Create these files in the main folder we created:

• index.php
• signup.php
• signup_success.php
• signin.php

Go to index.php and enter Hello World. Now if you go to http://localhost/ci_twitter/index.php/main/ you will see Hello World.

The next thing to do is to add a form and text fields so that people can input data. For the sign up page the html is done in the signup.php view file. The validation and processing is done in the main controller inside the signup function.

Add the following code to the signup.php view:

<h2>Sign up</h2>
<?php
echo validation_errors();
echo form_open('main/signup');
?>
 
Full name: <input type="text" name="name" /> <br />
Username: <input type="text" name="username" /> <br />
Password: <input type="password" name="password" /> <br />
Email: <input type="text" name="email" /> <br />
<input type="submit" value="Create my account" name="create" />
 
</form>

Then add this inside signup_success.php:

Your account was created, <?php echo anchor('main/signin', 'login here'); ?>

This is all that we need to do for the sign up view for now. Validation rules is what we will do next in the main controller for sign up.

Validation

When doing form validation all of the validation takes place inside of the controller. For now we will set basic validation rules for each field within the form.

In the main controller replace the code for the signup function with:

	function signup()
	{
		$this->load->library('form_validation');
		$this->load->helper(array('form', 'url'));
 
		$this->form_validation->set_rules('name', 'Name', 'required|min_length[5]|max_length[50]|trim|xss_clean');
		$this->form_validation->set_rules('username', 'Username', 'required|min_length[5]|max_length[50]|trim|xss_clean');
		$this->form_validation->set_rules('password', 'Password', 'required|min_length[5]|max_length[50]|trim|xss_clean');
		$this->form_validation->set_rules('email', 'Email', 'required|min_length[5]|max_length[50]|valid_email');
 
		if($this->form_validation->run() == FALSE)
		{
			$this->load->view('main/signup');
		} else {
			$this->load->view('main/signup_success');
		}
 
	}

If you go to the sign up page now you should see that all the validation code works like it should. Now we will add a model so that we can add the user to the users table.

Create user model

Go to the model folder and create a file called User_model.php.

Insert this code into the model:

<?php
class User_model extends Model {
 
	function user_exists($username)
	{
		$this->db->select('username');
		$this->db->from('users');
		$this->db->where('user_username', $username);
		$result = $this->db->count_all_results();
		return $result;
	}
 
	function create_user($fullname, $username, $email, $password)
	{
		$data = array('user_fullname' => $fullname, 'user_username' => $username, 'user_email' => $email, 'user_password' => $password);
		$this->db->insert('users', $data);
	}
}
?>

Now we need to load the User_model in the controller.
Insert this code in the signup function:

$this->load->model('User_model');

We also need to add the user if the validation rules are passed:

$this->User_model->create_user($this->input->post('name'), $this->input->post('username'), $this->input->post('email'), $this->input->post('password'));
$this->load->view('main/signup_success');

Part 3

In part 3 we will be creating a login page and functionality so that people can post messages.

Download

Download

Related posts:

1. Build a Twitter-like site with CodeIgniter and jQuery This tutorial will be the first of a five part...
2. Adding security to CodeIgniter forms with a custom library class The class that we are going to create within CI...
3. Twitter-like pagination using CodeIgniter and jQuery If you use Twitter you'll notice that there is a...

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

Here is a list of posts from this week if you may have missed anything.

20 Stunning Wallpapers For Your Desktop

10 Awesome jQuery Tutorials You Should Check Out

10 Flash and Actionscript Tutorials for the Beginner

Cheat sheets: jQuery, MooTools, Prototype

Deep Linking with jQuery

Build a Twitter-like site with CodeIgniter and jQuery

Related posts:

1. Weekly Recap (14 Feb – 21 Feb) Here is a recap of the posts from this week....
2. 10 Awesome jQuery Tutorials You Should Check Out jQuery is a great tool that everyone in web development...
3. Build a Twitter-like site with CodeIgniter and jQuery This tutorial will be the first of a five part...

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

This tutorial will be the first of a five part series where we will built a social network site similar to Twitter from scratch. We will be using the CodeIgniter framework for the core of the website and jQuery for the effects. In this first part we will be configuring CodeIgniter to display everything correctly and we will also set up a database and connect to it.

Download and configure

Download the CodeIgniter framework from their website. We don't need to download anything for jQuery because we will be loading it directly from Google as it's quicker to load.

Once you have downloaded the latest version of CodeIgniter from their website, unzip it and copy the files to your public_html folder or equivalent. Rename the CodeIgniter folder to ci_twitter.

Now if you go to http://localhost/ci_twitter you should see something similar to the image below.

Database

We now need configure a database to connect to CodeIgniter so that we can use it to insert and retrieve information. Go to phpMyAdmin or whatever you use for MySQL databases. Create a database called ci_twitter.

CREATE DATABASE `ci_twitter` ;

For now we are only going to create a table for the users, in another part we will create other tables when we need them.

users table:

 CREATE TABLE `ci_twitter`.`users` (
`user_id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`user_fullname` VARCHAR( 50 ) NOT NULL ,
`user_username` VARCHAR( 50 ) NOT NULL ,
`user_email` VARCHAR( 50 ) NOT NULL ,
`user_password` VARCHAR( 50 ) NOT NULL ,
`user_protected_updates` TINYINT NOT NULL DEFAULT '0',
`user_location` VARCHAR( 50 ) NOT NULL ,
`user_web` VARCHAR( 50 ) NOT NULL ,
`user_bio` VARCHAR( 160 ) NOT NULL
) ENGINE = MYISAM

Configure CodeIgniter

Now that we have set up our database and have inserted a table we will configure CodeIgniter to connect to it.

Navigate to database.php by going to ci_twitter -> system -> application -> config -> database.php. From here enter the correct information for your database so that it connects.

We need to auto load the database library because we will be using it a lot.

Go to autoload.php in the same folder as database.php.

Change:

$autoload['libraries'] = array();

To:

$autoload['libraries'] = array('database');

The database library will now load every time without us having to put $this->load->library('database'); in every controller.

End of Part 1

This is the end of the first part of approximately five parts.

Part 2

Part 2 will be following tomorrow. In part 2 we will be creating a sign up so that we can add users to the database.

Download

You can download part one from here

Related posts:

1. Build a Twitter-like site with CodeIgniter and jQuery Part 2 Don't forget to check out part 1 if you have...
2. Twitter-like pagination using CodeIgniter and jQuery If you use Twitter you'll notice that there is a...
3. Twitter-like pagination using CakePHP and jQuery I have already done this tutorial with CodeIgniter and jQuery...

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

You can view a demo and download the resources for this tutorial at the bottom of the post.

Web 2.0 websites have a lot of Ajax functionality, some times when you load a new element of a page you may want the user to be able to click the back or forward button so that they can see the previously loaded content. One method to add this function to a website is to use the jQuery Address plugin with jQuery.

jQuery Address has 4 main methods; init, change, internalChange, externalChange. The init method is what is called when the plugin is initiated. The change method is called when the URL is changed, an element in the page is changed or either the forward or backward button is pressed. The change method has the combined functionality of internalChange and externalChange. The internalChange is only called when a hyperlink inside the page is clicked; externalChange is only called when the URL is changed or the backward or forward button is pressed.

To allow deep linking within your website the only two methods that are required is init and change, you can then use internalChange and externalChange wherever you may need them.

Getting it to work

The first thing that is required of course is that you download the file for jQuery Address. When you have done this copy the jquery.address-1.1.min.js file into the same location as your index.html file.

Now we include jQuery and the jQuery Address plugin, put this inside the head tags in your html file:

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.4.1");
</script>
<script src="jquery.address-1.1.min.js"></script>

The jQuery

The next thing that we're going to do is create a function that will be called when a hyperlink is clicked so that we know what file to load and where to load it. We will call this function loadURL(), it will take one parameter named url.

function loadURL(url) {
	    	console.log("loadURL: " + url);
	    	$("#area").load(url);
}

We have console.log so that when we open up Firebug in Firefox we know which page is being requested. This is useful for debugging if there are any faults with the requested page loading.

We now set the jQuery Address event handlers so we know when to deep link an element within the page.

$.address.init(function(event) {
	        console.log("init: " + $('[rel=address:' + event.value + ']').attr('href'));
}).change(function(event) {
	    	$("#area").load($('[rel=address:' + event.value + ']').attr('href'));
	    	console.log("change");
})

What this code does is retrieves the href attribute from a hyperlink by matching the rel to a hyperlink. We also log when it should have changed so we can see this in Firebug.

The last bit of jQuery that we do will check when a link has been pressed and then call the loadURL() function that we created before.

$('a').click(function(){
	    	loadURL($(this).attr('href'));
});

This is what the head of your file should look like:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>TheTutorialBlog.com : jQuery Deep Linking</title>
	<script src="http://www.google.com/jsapi"></script>
	<script type="text/javascript">
	google.load("jquery", "1.4.1");
	</script>
	<script src="jquery.address-1.1.min.js"></script>
 
 
	<script type="text/javascript">
	/*<![CDATA[*/
	$("document").ready(function(){
 
	    function loadURL(url) {
	    	console.log("loadURL: " + url);
	    	$("#area").load(url);
	    }
 
 
	    // Event handlers
	    $.address.init(function(event) {
	        console.log("init: " + $('[rel=address:' + event.value + ']').attr('href'));
	    }).change(function(event) {
	    	$("#area").load($('[rel=address:' + event.value + ']').attr('href'));
	    	console.log("change");
	    })
 
	    $('a').click(function(){
	    	loadURL($(this).attr('href'));
	    });
 
	    });
 
	/*]]>*/
	</script>
</head>

The HTML

The HTML for this is really basic stuff, we will create two hyperlinks that will load two separate files. We will also create a div element named area, this is where the files will be loaded.

<body>
 
 
	<a href="test1.html" rel="address:/test1">Test 1</a> <br />
	<a href="test2.html" rel="address:/test2">Test 2</a> <br /> <br /> <br />
 
	Load Area: <br />
	<div id="area"></div>
 
 
</body>

The name of the file that you want to load goes inside the href tag. You also need to include address:/ inside rel. This is how jQuery Address knows what hyperlinks you want to deep link.

Final words

I hope this tutorial has been useful, please feel free to leave a comment or ReTweet this tutorial on Twitter.

Demo and Download

Demo
Download

Related posts:

1. Build a Twitter-like site with CodeIgniter and jQuery Part 2 Don't forget to check out part 1 if you have...
2. Build a Twitter-like site with CodeIgniter and jQuery This tutorial will be the first of a five part...
3. PHP gallery with no page reloads using jQuery For this tutorial we will be using the ImgBrowz0r class...

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

Javascript frameworks like jQuery, MooTools and Prototype are being used by almost all developers in web design and web development, and if you're not using them you should be. Frameworks like these make building complex Javascript functionality into websites a breeze with only a few lines of code.

If you want to start using a framework but are not sure which one is for you then you are probably best starting off with jQuery as it is simple to understand yet powerful. You can also use frameworks together, check out my post here.

In this post you'll find cheat sheets that will be helpful to you as a reference when using one of these frameworks and you can't quite remember a function.

jQuery

MooTools

Prototype

Related posts:

1. Quick Tip: Resolving conflicting problems between jQuery and MooTools or any other Javascript library Recently I wrote quite a huge chunk of jQuery for...
2. Posts from this week Here is a list of posts from this week if...
3. 10 Awesome jQuery Tutorials You Should Check Out jQuery is a great tool that everyone in web development...

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

jQuery is a great tool that everyone in web development should be using to make the functionality of their websites better, it's easy of use and good documentation is what makes jQuery such a successful framework. Although the documentation is good there are still a lot of tutorials out there that you should check out.

1. Quick Tip: Resolving conflicting problems between jQuery and MooTools or any other Javascript library

2. Twitter-like pagination using CodeIgniter and jQuery

3. PHP gallery with no page reloads using jQuery

4. jQuery Dropdown Suggestions

5. Twitter-like pagination using CakePHP and jQuery

6. Create a Scrolling Menu with CSS and jQuery

7. jQuery and Google Maps Tutorial

8. How to Mimic the iGoogle Interface

9. jQuery Infinite Carousel

10. Create a Digg-style post sharing tool with jQuery

Related posts:

1. PHP gallery with no page reloads using jQuery For this tutorial we will be using the ImgBrowz0r class...
2. Build a Twitter-like site with CodeIgniter and jQuery This tutorial will be the first of a five part...
3. Twitter-like pagination using CodeIgniter and jQuery If you use Twitter you'll notice that there is a...

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

For this tutorial we are going to create a drop down box similar to the one on the Google homepage when you start typing.

The Markup

The first thing that we must do is create the markup HTML. We are also going to include a stylesheet called style.css, we will create the CSS further down the tutorial.

We need to create an input field and a DIV element, the DIV element is where the suggestions will be displayed.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>TheTutorialBlog.com - jQuery Dropdown Suggestions</title>
	<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
	<input type="text" name="suggestions" class="suggestionsinput" value="Search" />
	<div id="suggestions">
		Suggestions for <span class="searchterm"></span>...
	</div><!--suggestions-->
</body>
</html>

The CSS

Create a file called style.css in the same folder.

We are going to give the input field and suggestions DIV rounded corners of 5 pixels. We will also hide the suggestions DIV because it should only be visible when a user starts to type.

	body {
		background-color: #ccc;
	}
 
	.suggestionsinput {
		font-size: 36px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border: 1px solid #999;
		color: #999;
	}
 
	#suggestions {
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		width: 460px;
		background-color: #999;
		position: fixed;
		padding: 5px;
		visibility: hidden;
	}

The jQuery

Load the jQuery library from Google. Place this code below the include of the CSS file in your HTML file.

	<script src="http://www.google.com/jsapi"></script>
	<script type="text/javascript">
	google.load("jquery", "1.3.2");
	</script>

Below this code we will write our jQuery.

Check that the document is loaded.

	<script type="text/javascript">
	$(document).ready(function(){
 
		// Code goes here
 
	})
	</script>

When the page is loaded the input field will display "Search", when the user clicks on the input field we want it to be blank so that they can start searching without having to delete the word.

	// clear text from input
	$(".suggestionsinput").click(function(){
		if($(".suggestionsinput").val() == "Search")
		{
			$(".suggestionsinput").val("");
		}
	})

When the input field has been cleared the user will begin typing, we need to check to see if the user has started typing and if they have then we need to display the suggestions box.

	// check if key has been pressed
	$(".suggestionsinput").keyup(function(event){
		if($(".suggestionsinput").val() != "")
		{
			// make suggestions visible
			$("#suggestions").css('visibility', 'visible');
			$("#suggestions").hide();
			$("#suggestions").fadeIn('slow');
			$(".searchterm").text($(".suggestionsinput").val());
			// $("#suggestions").load('http://URL.to.load');
 
		} else {
			// hide suggestions
			$("#suggestions").fadeOut('slow', function(){
				$("#suggestions").css('visibility', 'hidden');
			});
 
		}
	})

In this tutorial we are only making the drop down box visible, to load an actual list of suggestions uncomment $("#suggestions").load('http://URL.to.load'); then specify a URL where your script is that will load your suggestions and return it to the user.

The HTML File

	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>TheTutorialBlog.com - jQuery Dropdown Suggestions</title>
		<link rel="stylesheet" href="style.css" type="text/css" />
		<script src="http://www.google.com/jsapi"></script>
		<script type="text/javascript">
		google.load("jquery", "1.3.2");
		</script>
 
		<script type="text/javascript">
		$(document).ready(function(){
 
			// clear text from input
			$(".suggestionsinput").click(function(){
				if($(".suggestionsinput").val() == "Search")
				{
					$(".suggestionsinput").val("");
				}
			})
 
			// check if key has been pressed
			$(".suggestionsinput").keyup(function(event){
				if($(".suggestionsinput").val() != "")
				{
					// make suggestions visible
					$("#suggestions").css('visibility', 'visible');
					$("#suggestions").hide();
					$("#suggestions").fadeIn('slow');
					$(".searchterm").text($(".suggestionsinput").val());
					// $("#suggestions").load('http://URL.to.load');
 
				} else {
					// hide suggestions
					$("#suggestions").fadeOut('slow', function(){
						$("#suggestions").css('visibility', 'hidden');
					});
 
				}
			})
 
 
 
 
		})
		</script>
	</head>
	<body>
		<input type="text" name="suggestions" class="suggestionsinput" value="Search" />
		<div id="suggestions">
			Suggestions for <span class="searchterm"></span>...
		</div><!--suggestions-->
	</body>
	</html>

The CSS File: style.css

body {
background-color: #ccc;
}

.suggestionsinput {
font-size: 36px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #999;
color: #999;
}

#suggestions {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
width: 460px;
background-color: #999;
position: fixed;
padding: 5px;
visibility: hidden;
}

Download/Demo

Download
Demo

Related posts:

1. Twitter-like pagination using CodeIgniter and jQuery If you use Twitter you'll notice that there is a...
2. Twitter-like pagination using CakePHP and jQuery I have already done this tutorial with CodeIgniter and jQuery...
3. Deep Linking with jQuery You can view a demo and download the resources for...

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