In your web hosting account, there is what you call the cPanel, short for Control Panel. This is where you will have access to everything you need to build your website and upload any necessary information and data. If you are a beginner to webhosting and cpanel use, then you should familiarize yourself with the cpanel before you start creating your website. This will allow you to be more efficient when it comes to making any changes to your site.

Designing, internet hosting, and managing a website can be a challenging course of for individuals who want such a web site, but have never earlier than hosted one on the Internet. To assist in this process, making it smoother, extra intuitive, and more accessible for the potential web site owner, a management panel program named cPanel (based mostly on Unix) is now provided by some internet hosts as part of the hosting package. This system is written and marketed by an organization of the same name.

cPanel has a number of different units of controls, all of that are usable by way of any normal net browser. The controls included are those for resellers (who're buying the website area from an information heart and re-renting it to finish users), directors, and precise web site owners. The controls make modifying and administering the web site far simpler by automating some processes, and offering a graphical management interface that is intuitive and easy to recollect, slightly than command or scripting prompts.

The cPanel program supports lots of the functions utilized in building and sustaining web sites, similar to MySQL, PHP, Apache, Perl, and Bind. It additionally incorporates e-mail functionalities like POP3, SMTP, and IMAP. There are additionally many add-ons which can be used to allow support of other functions for website construction and administration - though these add-ons have to be bought from the cPanel company, and aren't obtainable as free downloads as so many add-ons are.

Hosting with cPanel gives those who are not highly expert in web site management a transparent, simple, intuitive interface that makes their efforts much smoother and more successful. Velocity of internet hosting and maintaining the web site are each elevated drastically by cPanel, especially since it should reduce the variety of calls that must be made to technical support. The interface consists of tutorial movies for the extra complicated operations, in addition to an on-display screen assist function, providing you with higher independence from tech help folks and saving certainly one of your most worthy sources - time.

As you can see, your cPanel controls most of your website and you need to be able to manage it in effective way. There are many things like scripts and add-ons that you need to be aware of. This way, when you decide to make changes to anything on your website whether it be design or coding, you are efficient with your time instead of trying to look up how to do something in your cPanel account hosting provider.

---

Kirsten Ramsburg is a senior editor of Webhostingsearch.com.

Related posts:

1. Where to host your website? So you’ve successfully created a design for your website… the...

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.

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.

The class that we are going to create within CI will simply add a math question that the user will have to enter correctly to continue. This is useful to stop bots from mass submitting information to your forms.

The class we are going to write is only very short and simple, but it will give you an idea of how to create classes for your own projects.

Creating the new class

First of all we need to create the file for the class, navigate to libraries then create a file called math_question.php.

All we are going to do within this class is generate two random numbers that will be added together.

<?php
class math_question {
 
	function questionOne()
	{
		// generate a random number between 0 - 10
		$num = rand() % 10;
		return $num;
	}
 
	function questionTwo()
	{
		$num = rand() % 10;
		return $num;
	}
 
}

This is all we will be doing for the code within the class.

Using the class within a form

To use this class in our controller we load it like so:

$this->load->library('math_question');

We will also be using form validation and sessions to check if the user has entered the correct answer.

$this->load->library('form_validation');
$this->load->library('session');

We need to set questionOne and questionTwo in variables so we can assign them to a temporary flash session and because they will be passed into the view.

$questionOne = $this->math_question->questionOne();
$questionTwo = $this->math_question->questionTwo();
 
$this->session->set_flashdata('questionOne', $questionOne);
$this->session->set_flashdata('questionTwo', $questionTwo);
 
$data['math_question'] = "What is {$questionOne} + {$questionTwo}?";

To check that the answer that is wrote in is correct we use the callback method in our form validation to call a function that we create that will check the users input against the flash data.

This is how we set our form validation:

$this->form_validation->set_rules('math_question', 'Math Question', 'callback_math_question');

Then we check if the validation has been executed:

if($this->form_validation->run() == FALSE)
{
	$this->load->view('contact/form', $data);
 
}
else
{
	echo "success";
}

Now we need to create our function that is called upon validation of the form:

function math_question()
{
	$user_answer = $this->input->post('math_question');
	$questionOne = $this->session->flashdata('questionOne');
	$questionTwo = $this->session->flashdata('questionTwo');
 
	$correct_answer = $questionOne + $questionTwo;
 
	if($user_answer != $correct_answer)
	{
		$this->form_validation->set_message('math_question', 'Your answer to the math question was incorrect');
		return FALSE;
	} else {
		return TRUE;
	}
}

This will check if what the user has input is correct against a temporary flash session.

Here is all of the controller code in full:

<?php
class Contact extends Controller {
 
	function index()
	{
		$this->load->library('form_validation');
		$this->load->library('math_question');
		$this->load->library('session');
 
		$questionOne = $this->math_question->questionOne();
		$questionTwo = $this->math_question->questionTwo();
 
		$this->session->set_flashdata('questionOne', $questionOne);
		$this->session->set_flashdata('questionTwo', $questionTwo);
 
		$data['math_question'] = "What is {$questionOne} + {$questionTwo}?";
 
		$this->form_validation->set_rules('math_question', 'Math Question', 'callback_math_question');
 
 
		if($this->form_validation->run() == FALSE)
		{
			$this->load->view('contact/form', $data);
 
		}
		else
		{
			echo "success";
		}
	}
 
 
 
	function math_question()
	{
		$user_answer = $this->input->post('math_question');
		$questionOne = $this->session->flashdata('questionOne');
		$questionTwo = $this->session->flashdata('questionTwo');
 
		$correct_answer = $questionOne + $questionTwo;
 
		if($user_answer != $correct_answer)
		{
			$this->form_validation->set_message('math_question', 'Your answer to the math question was incorrect');
			return FALSE;
		} else {
			return TRUE;
		}
	}
 
}

Create the view

The last thing we need to do is create the view. Goto views and create a folder called contact, within that folder create a file called form.php.

Here is the code for form.php

<?php
echo validation_errors();
echo form_open('contact');
?>
Name: <input type="text" name="name" /> <br />
<?=$math_question?> <br />
Answer: <input type="text" name="math_question" /> <br />
<input type="submit" name="submit" value="Send!" />
<?php
echo form_close();
?>

On the first line we output the validation errors if there is any, on the second line we use the form helper to open the form tags and likewise for the bottom line where we close the form. $math_question is the variable that is passed in from the controller.

Post your thoughts

Let us know what you think of the tutorial and share your thoughts and contributions below in the comments.

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. 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.

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. Build a Twitter-like site with CodeIgniter and jQuery Part 2 Don't forget to check out part 1 if you have...
2. jQuery Dropdown Suggestions For this tutorial we are going to create a drop...
3. Adding security to CodeIgniter forms with a custom library class The class that we are going to create within CI...

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. Deep Linking with jQuery You can view a demo and download the resources for...
2. Build a Twitter-like site with CodeIgniter and jQuery This tutorial will be the first of a five part...
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.