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

CodeIngiter + jQuery=twitter
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

Bookmark and Share
Share and Enjoy:
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • email
  • FriendFeed
  • LinkedIn
  • Ping.fm
  • Tumblr
  • Twitter

No related posts.

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

, , , , , , , , , , , , , , , , , , ,

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

  1. Anil Kumar Panigrahi April 12, 2010 at 12:03 am #

    Hi,

    When will you post remaining parts, i am waiting to implement that in my domain ...

    Thank you for sharing till now.

  2. Unknown May 20, 2010 at 8:12 am #

    We are wait for your part 3 tutorial.
    We hope you should be complete other part as soon as possible.

    by the by, thanks for your tutorial

    Thanks
    Unknown.

  3. PRABHJEET May 28, 2010 at 12:51 am #

    waiting for 3rd part.......

  4. shivaraj June 6, 2010 at 11:42 am #

    Hi
    Your tutorials are the hotest topics in our college.We are all learning lot about web designing.Thank you for giving such tutorials which are helping us for buildingup our carrior and All are waiting for your remaining parts..

  5. Abdullah Al Mamun July 8, 2010 at 5:07 pm #

    This part is just awesome!
    Please keep up this series.
    When the third part will come?

  6. Wez Pyke July 8, 2010 at 5:34 pm #

    Very soon, I've already started work on it.

Leave a Reply