What is SQL Injection?

SQL Injection is the process when someone executes one or more SQL statements in your database without your knowledge to harm the data in your database. In this technique, someone exploits a security vulnerability in database application layer. This happens often when you ask for input(s) from the user and they add extra SQL statement(s) with the valid input. We can illustrate this situation with two cases (1) user inputs are incorrectly filtered or (2) user submitted data is not strongly typed and one ore more of the inputs is executed unexpectedly.

This is possible because the user can submit any input and you may have no or weak user submitted input filtering coding, you can execute one more statements in your database at a time.
For example,
Case 1:

Executing one statement at a time is OK.

<?php
	$sqlStatement = “SELECT * FROM customers where username=‘james’;“;
?>

Case 2:

Executing more than one statement at a time is also OK.

<?php
	$sqlStatement = “DROP TABLE users; UPDATE customers SET age=0; DELETE FROM customers where id>0;”;
?>

Now an intruder can combine Case 1 and Case 2, run all the queries at a time and then delete the users table and harmfully update the customers table.

As a result, a successful SQL Injection occurs and harms the database information.

Reasons behind SQL Injection

In the following situations, SQL Injection happens.

• Incorrectly filtered escape characters
• Incorrect type handling
• Vulnerabilities inside the database server
• Conditional Errors

Case 1: Incorrectly filtered escape characters

You have a module that asks for user’s email address to send a temporary password to her email address when she forgets her password. So, the usual SQL query will be like this in this case:

<?php
	$sqlStatement = “SELECT * FROM users WHERE username = ‘” + $username + “‘ AND email = ‘” + $email + “‘ “;
?>

But an intruder can extent this statement if they set the value for the $email variable in this way and delete the user table:

user@hostname.com’; DROP TABLE users; SELECT * FROM customers WHERE name LIKE ‘%

As a result, the final statement is something like:

<?php
	$sqlStatement = “SELECT * FROM users WHERE username = ‘james’ AND email = ‘user@hostname.com’; DROP TABLE users; SELECT * FROM customers WHERE name LIKE ‘%’“;
?>

So, you see the intruder is deleting the users table easily. And as a result, you lose your users table and your system crashes since no user will be able to log in from now on. If you do not have a database backup, you loose everything.

Case 2: Incorrect type handling

Sometimes you definitely know the type of data. For example, the age of a customer is a numeric value, gender of a user as male or female, total amount of bill as double value.

<?php
	$sqlStatement = “SELECT * FROM customers WHERE age = “ + $ageValue + “;“;
?>

Now what if someone submits the $ageValue value as 20; DROP TABLE users

The resulting sql is:

<?php
	$sqlStatement = “SELECT * FROM customers WHERE age = 20; DROP TABLE users;“;
?>

You know for sure that the value of will be always an integer. If you do not check if the value is really an integer, the intruder can add one or more statements with the value of $ageValue variable and harm your database.

Case 3: Vulnerabilities inside the database server

Although some people think that they can avoid SQL Injection just by using mysql_real_escape_string() function in PHP, they are wrong unfortunately. Built-in functions supplied with language package to work on database is sometimes vulnerable to database and thus are not successful to avoid the attack all the times.

Case 4: Conditional Responses

Using SQL Injection the user can easily bypass the sign in or log in process in your system. Let us give an example:

<?php
	$sqlStatement = “SELECT * FROM users WHERE username = ‘james’ AND password = ’secret’ OR 1=1;“;
?>

Now you know satisfying only one condition is enough to enter the system. The condition OR 1=1 is always true. Thus, the intruder can fool the log in system.

SQL Injection Prevention and/or Protection

These are the techniques for preventing SQL Injection:

1. Use Parameterized Query
2. Use Stored Procedure whenever applicable
3. Apply Regular expression to discard invalid inputs
4. Write and use Quote blocking  function
5. Hide detailed error messages from the user
6. Create a database user with less privileged role
7. Set the limitation for maximum value in your HTML form

1. Use Parameterized Query

Rather than directly supplying the values in the SQL statement, let us supply the values in parameterized way as follows:

<?php
	$db_connection = new mysqli(“localhost”, “user”, “pass”, “db”);
	$statement = $db_connection->prepare(“SELECT * FROM customers WHERE id = ?“);
	$statement->bind_param(“i”, $id);
	$statement->execute();
?>

“i” stands for integer type
“d” stands for double type
“s” stands for string type
“b” stands for a blob and will be send in packets

2. Use Stored Procedure whenever applicable

Using stored procedures can help your to reduce the attack risk too.

<?php
	$sqlStatement = ”
		CREATE PROCEDURE HUGEORDER
		(
			id INT ,
			quantity INT,
			price DECIMAL(6,2)
		)
		BEGIN
			DECLARE discount_percent DECIMAL(6,2);
			DECLARE discounted_price DECIMAL(6,2);
			SET discount_percent  =  10;
			SET discounted_price = price – discount_percent/100*price;
			IF quantity > 500 THEN
				SET discounted_price = discounted_price - 0.25 * quantity;
			END  IF;
			UPDATE fashion_products
			SET product_price = discounted_price WHERE product_id = id;
			Select * from fashion_products;
		END;
	“;
?>

3. Apply Regular expression to discard invalid inputs

Regular expression is very powerful process to find out the validity of the inputs. We can check whether the input is given in proper format. For example, here we validate data for a valid numeric value for customer age and reject any chance for SQL Injection.

<?php
	if(!eregi(“^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$”, $email))
	{
		echo ‘INVALID Email Address!‘;
		return;
	}
?>

You can also user the built in PHP is_array(), is_bool(), is_double(), is_float(), is_int(), is_integer(), is_integer() etc functions to check if the user provided information is in proper format.

4. Write and use Quote blocking  function

If you are using PHP, mysql_real_escape_string function for each and every user given inputs. For example,

<?php
	$username = mysql_real_escape_string($username, $ dbLink);
?>

This is a very powerful built-in PHP function and will stop SQL Injection in most of the cases. I have used it for long time and found it performing great. You can try to inject SQL after you use the mysql_real_escape_string function and test if you can succeed any way. This powerful function rejects the possibility of many clever techniques used by the intruders.

5. Hide detailed error messages from the user

First of all avoid using the built-in MySQL mysql_error() function. The clever intruder can guess many things from the error message and sometimes the error message may show the connection parameters. Using mysql_error() function is good at development stage. But avoid or clean it when you run it in the real server for users or visitors.

The second thing is stop error reporting in PHP. This is simple and one line code.

<?php
	// Turn off all error reporting
	error_reporting(0);
?>

The third thing is better you give a customized error message. See an example:

<?php
	if(!mysql_query($statement))
	{
		echo ‘We are sorry BUT The server is not responding. Please try again later.’;
	}
?>

As a result, the user will not know what the error is and how it is. He will also not get any accidentally disclosed crucial information such as database name, table name, username etc.

6. Create a database user with less privileged role

In most cases, you will notice that the visitors do not need to delete or update any information. Think of a music selling site. The user can request for data (which is SELECT query) and make their orders (which are INSERT query). Even sometimes the SELECT operation is just OK in many sites.

So, create different users with different privileges. For admin grant all the permissions. But for a general visitor, grant only limited permission. For example, I am creating, two connection string for two users.

<?php
	$visitorDbLink = mysql_connect(‘host’, ‘general_user’, ‘general_user_pass’);
	$visitorDbLink = mysql_connect(‘host’, ‘admin_user’, ‘admin_pass’);
?>

And now we can user the $visitorDbLink link for regulating information connecting with the visitors and will use the $visitorDbLink link only for the administrator.

7. Set the limitation for maximum value in your HTML form

We can set that the username cannot be more than 10 chars. Try to use the “maxlength” property for HTML form. An example is like this:

	<input name="username" type="text" id="username" maxlength="10" />

As a result, possibility of attack by intruder somewhat goes down since he cannot input enough harmful SQL statement input. But it is not very helpful though and the user can bypass this creating his own form and submitting the custom form.

8. Using a PHP Framework

If you are using a PHP framework like CodeIgniter or CakePHP, the framework will protect you at maximum level from SQL injection. Complain of SQL Injection after using a PHP framework is rare and I did not hear even one still now.

This kind of frameworks are Open Source, very matured and strong nowadays and they do each and everything possible such as from input filtering to URL rewrite. Learning them is easy although it take some time. You can get books and other online materials about this PHP frameworks.

If you are an advanced PHP coder or developer, my suggestion is you better code using a PHP framework you like.

These are all I know about SQL Injection.

Thanks for reading.

Hello!

My subject of this post is about the total number of parameters we send as input from a form or any other way and optimizing the parameter passing. If we have many forms and many input fields in each form, it is often painful to set or order value of GET, POST or other variables one by one.

Passing all POST variables as function parameter in one array

Let us see the following HTML form that has ten fields.

<form action="feedback.php" method="post" enctype="multipart/form-data" name="feedbackForm" id="feedbackForm">
	<label for="name">Name</label>
	<input type="text" name="name" id="name" />
	<br />
	<label for="address">Address</label>
	<input type="text" name="address" id="address" />
	<br />
	<label for="phone">Phone</label>
	<input type="text" name="phone" id="phone" />
	<br />
	<label for="fax">Fax</label>
	<input type="text" name="fax" id="fax" />
	<br />
	<label for="email">Email</label>
	<input type="text" name="email" id="email" />
	<br />
	<label for="website">Website</label>
	<input type="text" name="website" id="website" />
	<br />
	<label for="message">Message</label>
	<textarea name="message" id="message" cols="45" rows="5"></textarea>
	<br />
	<input type="submit" name="submit" id="submit" value="Submit" />
</form>

Now if we want to call a function passing all the input fields, it will look like this:

<?php
	saveFeedback($_POST[‘name’], $_POST[‘address’], $_POST[‘phone’], $_POST[‘fax’], $_POST[‘email’], $_POST[‘website’], $_POST[‘message’]);
?>

But does it look good or anything comfortable? I know most coder will be bored doing this. When I was a newcomer to PHP programming, I used to do this kind of programming. But there is no reason to do coding like this as we have extremely simple solution.

Fortunately we can pass a whole array as function parameter value. This is how:

Function calling:

<?php
	saveFeedback($_POST);
?>

Or the Object Oriented Programming style:

<?php
	$myObject = new MyClassName();
	$myObject->saveFeedback($_POST);
?>

Easy and comfortable. Huh?

Getting the values inside the function definition:

<?php
	function saveFeedback($inputArray)
	{
		$myName    = $inputArray[‘name’];
		$myAddress = $inputArray[‘address’];
		$myPhone   = $inputArray[‘phone’];
		$myFax     = $inputArray[‘fax’];
		$myEmail   = $inputArray[‘email’];
		$myWebsite = $inputArray[‘website’];
		$myMessage = $inputArray[‘message’];
		// Rest of the coding for this function
	}
?>

Simple. Right?

You can also print all the input values inside your function you want for debugging or any other purpose as like this:

<?php
	function saveFeedback($inputArray)
	{
		var_dump($inputArray);
	}
?>

Passing all GET variables as function parameter in one array

Suppose that here is your link:
http://www.example.com/products.php?type=cap&max_price=1000&min_price=100&material=leather

You can pass all the GET variables to a function such as ‘filterKeys’ in this case simply this way:

<?php
	filterKeys($_GET);
?>

Or the Object Oriented Programming style:

<?php
	$myObject = new MyClassName();
	$myObject->filterKeys($_GET);
?>

And here is how you get them:

<?php
	function filterKeys($inputArray)
	{
		$productType      = $inputArray[‘type’];
		$productMaxPrice  = $inputArray[‘max_price’];
		$productMinPrice  = $inputArray[‘min_price’];
		$productMaterial  = $inputArray[‘material’];
	}
?>

This is just like the way used for the POST method.

You can print the input values inside your function anytime you want for debugging or any other purpose like this:

<?php
	function filterKeys($inputArray)
	{
		var_dump($inputArray);
	}
?>

Although REQUEST method will work similarly, I suggest you not using this for avoiding any future confusion and also for the sake of keeping your coding more readable for other developers.

Special Case: File

Actually when you send a file, it contains several data and $_FILES is an array itself. So, the following values come directly to your script without any extra attention:

<?php
	$_FILES[‘fileName’][‘name’]
	$_FILES[‘fileName’][‘type’]
	$_FILES[‘fileName’][’size’]
	$_FILES[‘fileName’][‘tmp_name’]
	$_FILES[‘fileName’][‘error’]
?>

So, you can use them directly in your script.

Taking another Special Case in Consideration: Setting default input values

Sometimes you may need to set a default value to one or more parameters. For example:

<?php
	function saveClientInformation($age=25, gender=‘Male’)
	{
	}
?>

You can define array and scalar inputs altogether as like this:

<?php
	function saveClientInformation($postInputArray, $getInputArray, $age=25, gender=‘Male’)
	{
	}
?>

Next you can pass array and scalar inputs altogether as like this:

<?php
	function saveClientInformation($_POST, $_GET, 35, ‘Male’);
?>

So, why should you code like this? Because this will increase efficiency, save some time and make your code clean looking.

Thanks for reading.

Many times in many sites, you have of course seen round or circular corners. Developers often use round corners to give the site more attractive and professional look. When I was new to web development and trying to figure out how to make the tables’ corners round or circular or oval, I thought it must be a very tough task. Because I was searching solution in Google.com and all the solutions I found was either tough or I could not like. Ha ha. Later I found my own way. But I am sure many developers are using this already.

Here I share my easy and simple way:

Round Corner in DIV:

Step One: Creating a colorful table in Adobe Photoshop, Illustrator or any other tool

I have used Adobe Illustrator’s Rounded Rectangle Tool to create a round corner image. Then I saved it as ‘Save for web’, JPG format and in maximum image resolution. Here is the orange color round corner image:

Step Two: Separating the top and bottom

Now I cut 20 pixels from the top of the rounded image and I name it as ’round-top.jpg’. Here it is:

It is 260 pixels in width and 20 pixels in height.

Next I cut 20 pixels from the bottom of the rounded image and I name it as ’round-bottom.jpg’. Here it is:

It is 260 pixels in width and 20 pixels in height.

Step Three: Setting the top

Here is the CSS code:

#topDiv
{
	background:url(images/round-top.jpg) left top no-repeat;
	width:260px; height:20px;
}

And here is the HTML code:

	<div id="topDiv"></div>

Step Four: Setting the mid section

In the mid section we are going to place another DIV and we will put our text, image or any other content inside it. Here is the CSS code:

#middleDiv
{
	background:#FF6801; width:240px; height:100%; padding:0px 10px 0px 10px;
}

Notice that although the width of other DIVs is 260 pixels, this DIV has only 240 pixels. That means 20 pixels smaller than other DIVs. This is because we are giving 10 pixels padding in left and 10 pixels padding in right. This total 20 pixels padding will be added with our 240 pixels and make the DIV size looking like a 260 pixel DIV.

And here is the HTML code:

<div id="middleDiv">
    	This is a line to show how it is going with the content.<br /><br />
        This my another line of content.
    </div>

Step Five: Setting the bottom

Here is the CSS code:

#bottomDiv
{
	background:url(images/round-bottom.jpg) left bottom no-repeat;
	width:260px; height:20px;
}

And here is the HTML code:

    <div id=“bottomDiv”></div>

Step Six: Code altogether

If we put all code together, it will look like this:

Here is the CSS code:

<style type=“text/css”>
#topDiv
{
	background:url(images/round-top.jpg) left top no-repeat;
	width:260px; height:20px;
}
#middleDiv
{
	background:#FF6801; width:240px; height:100%; padding:0px 10px 0px 10px;
}
#bottomDiv
{
	background:url(images/round-bottom.jpg) left bottom no-repeat;
	width:260px; height:20px;
}
</style>

And here is the HTML code:

<body>
    <div id="topDiv"></div>
    <div id="middleDiv">
    	This is a line to show how it is going with the content.<br /><br />
        This my another line of content.
    </div>
    <div id="bottomDiv"></div>
</body>

And that’s it!

You can see the demo here: Demo of rounded corner in DIV
I suggest you visiting this link, opening the source code and taking a look.

Round Corner in Table:

Step One: Creating a colorful table in Adobe Photoshop, Illustrator or any other tool

Just follow the same as Step One of the Round Corner in DIV section above.

Step Two: Separating the head and bottom

Just follow the same as Step Two of the Round Corner in DIV section above.

Step Three: Setting the table tag

Here is the CSS code:

.roundTable
{
	width:260px; border:0px;
}

Notice that we have set the table widht to 260 pixels that is equal to our top and bottom images’ width. We do not need to mention the table width to any other place.

And here is the HTML code:

	<table border="0" cellpadding="0" cellspacing="0" class="roundTable">

Step Four: Setting the top

We simply set the TD background to ’round-top.jpg’ and set its height equals to the ’round-top.jpg’ image which is 20 pixels.

Here is the CSS code:

.topTD
{
	background:url(images/round-top.jpg) left top no-repeat;
	height:20px;
}

And here is the HTML code:

	<tr>
		<td class="topTD">&nbsp;</td>
	</tr>

Step Five: Setting the middle section for the content

We simply keep 10 pixels padding in both left and right side and set the background.

Here is the CSS code:

.middleTD
{
	background:#FF6801; padding:0px 10px 0px 10px;
}

And here is the HTML code:

	<tr>
		<td class="middleTD">
			This is a line to show how it is going with the content.<br /><br />
			This my another line of content.
		</td>
	</tr>

Step Six: Setting the bottom

We simply set the TD background to ’round-bottom.jpg’ and set its height equals to the ’round-bottom.jpg’ image which is 20 pixels.

Here is the CSS code:

.bottomTD
{
	background:url(images/round-bottom.jpg) left bottom no-repeat;
	height:20px;
}

And here is the HTML code:

	<tr>
		<td class="bottomTD">&nbsp;</td>
	</tr>

Step Seven: Code altogether

Here is the CSS code:

<style type=“text/css”>
.roundTable
{
	width:260px; border:0px;
}
.topTD
{
	background:url(images/round-top.jpg) left top no-repeat;
	height:20px;
}
.middleTD
{
	background:#FF6801; padding:0px 10px 0px 10px;
}
.bottomTD
{
	background:url(images/round-bottom.jpg) left bottom no-repeat;
	height:20px;
}
</style>

And here is the HTML code:

<body>
	<table border="0" cellpadding="0" cellspacing="0" class="roundTable">
		<tr>
			<td class="topTD">&nbsp;</td>
		</tr>
		<tr>
			<td class="middleTD">
				This is a line to show how it is going with the content.<br /><br />
				This my another line of content.
			</td>
		</tr>
		<tr>
			<td class="bottomTD">&nbsp;</td>
		</tr>
	</table>
</body>

And that’s it!

You can see the demo here: Demo of rounded corner in TABLE
I suggest you visiting this link, opening the source code and taking a look.

By the way, nowadays I am no more using tables. Rather I have shifted to table-less CSS based DIV style design. And I feel very comfortable using this technique in my DIV structured design.

You can download sample code from here:
Source Code for Round image corner in HTML & CSS using Table or DIV

Thanks for reading.

When I was new to wordpress theme development, I faced a common problem that many others might have faced. That is adding or linking or integrating a static or custom page in your wordpress site. It is very possible that you may prefer to keep one of your page or file linked as the following:

http://www.yoursitename.com/products.php

Sometimes this kind of requirement arrive that you have no other option but to do it.

But you know this kind of link will not directly appear in your wordpress blog or site because of the unique linking structure of wordpress. Most probably you will get a 404 error i.e. file not found error. So, if you want to link directly, you need to follow a simple trick. This trick is simple, small and intereting.

If you want to add and link your custom or static pages, follow these steps and you will get smooth result:

Step One: Changing the header of the php file

In this article, we will add a php file products.php in our wordpress blog. So, please create your products.php file.  Now open you products.php file and add the following two lines at the top of the file and save your file.

<?php
	define(‘WP_USE_THEMES’, false);
	require(‘./wp-blog-header.php’);
?>

Remember, these lines will be the topmost lines in your products.php file. OK? See below how I added.

<?php
	define(‘WP_USE_THEMES’, false);
	require(‘./wp-blog-header.php’);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Our Products</title>
</head>
<!– Other lines of coding –>

Why are we adding these two lines? Because we are telling wordpress that this file will not use wordpress themes and we are going to link it in a different way. So, wordpress do not force to link in its usual way.

Step Two: Saving in the public_html or root folder

Now upload it in the wordpress installation directory so that it looks like:

http://www.yoursitename.com/products.php

Done? Great!

Step Three: Linking the products.php file in a usual way

Now in the code of any wordpress file where you want to link your products.php file, keep the html linking as usual or what we say relative linking. For example, in the contact us page, I am creating such a link in the body section:

<a href="http://www.tanzilo.com/wp-admin/products.php">Our Products</a>

And yes! We are done!
Test now if it works for you.

Thus, you can add any number of pages in your wordperss site. I do not know exactly when you may need to link this way. I had to do it time to time depending on the client’s project requirement.

Thus, you can also protect your pages from permalink (dot)htaccess in wordpress.

Thanks for reading.

Hello!

Recently I am working in a wordpress project where I am converting a total static site to wordpress site. What I do is: (1) from the static pages, I am taking the static text and creating a new wordpress page for each static page. (2) fetching the page content/text by page id and (3) showing them wherever I want.

I have written a function and now I can fetch the content of any page or one more pages just by the page id.

<?php
	if(!function_exists(‘getPageContent’))
	{
		function getPageContent($pageId)
		{
			if(!is_numeric($pageId))
			{
				return;
			}
			global $wpdb;
			$sql_query = ‘SELECT DISTINCT * FROM ‘ . $wpdb->posts .
			‘ WHERE ‘ . $wpdb->posts . ‘.ID=‘ . $pageId;
			$posts = $wpdb->get_results($sql_query);
			if(!empty($posts))
			{
				foreach($posts as $post)
				{
					return nl2br($post->post_content);
				}
			}
		}
	}
?>

I am using this function to fetch several page data and show them in one page. In the static site, there are several section with different designs. The client want edit each section using wordpress. So, if there are three different sections, I am creating three individual pages for this single page. Next, I am just fetching the content of the three pages by calling my method three times with different parameters and showing the output in one page.

For exampe,

<div id="income_tax">
	<?php echo getPageContent(6); ?>
</div>
<div id="tax_advise">
	<?php echo getPageContent(7); ?>
</div>
<div id="yearly_return">
	<?php echo getPageContent(8); ?>
</div>

Thus, I am just shifting all text and/or content of the static site to wordpress so that the client can edit the site himself. I think this is a simple way or technique if you want to convert your static page to dynamic wordpress site.

You can also customize this one as per your need. For example, you may only need to fetch the page title.

<?php
	if(!function_exists(‘getPageTitle’))
	{
		function getPageTitle($pageId)
		{
			if(!is_numeric($pageId))
			{
				return;
			}
			global $wpdb;
			$sql_query = ‘SELECT DISTINCT * FROM ‘ . $wpdb->posts .
			‘ WHERE ‘ . $wpdb->posts . ‘.ID=‘ . $pageId;
			$posts = $wpdb->get_results($sql_query);
			if(!empty($posts))
			{
				foreach($posts as $post)
				{
					return nl2br($post->post_title);
				}
			}
		}
	}
?>

You can not only get the page content, but also the post content if you set the value of the “$pageId” equals any post id. You know you can see the page or post id from the admin panel.

By the way,
I have put my functions in the functions.php file so that I can access it from anywhere. I suggest you following the same way i.e. writing all your custom functions in the functions.php file.

Thank you for reading.

Hello Folks,

You know the web design has already transferred from the table based design to tableless design. This does not you will never use tables. What it means that using table in building website structure is getting rare. But why do people go for tableless design? Although there are many reasons, the most important reason is you save a lots of bandwidth by coding cleaner and fewer lines. Tableless web design is fun too!

But I must admit that it is a very easy tutorial for anyone. My target audience is those who are new to website design and wish to start designing in tableless format.

If you do not understand the whole article at the first time, my suggestion is you read it again.

OK. Let us start. Here we go:

2 Column tableless page design

Step One: A 2 column complete page coding

First take a look at the page code below. You can see the output here: 2 Column Page Output

I suggest you go to this output page, open the source code and take a look for a better indent view.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>2 Column CSS Example</title>
<style type=”text/css”>

BODY
{
margin:0px; padding:0px; text-align:center;
font-family:Arial, Helvetica, sans-serif; font-size:12px;
}
P
{
margin:0px; padding:17px 0px 0px 0px;
color:#CCCCCC;
}
H1
{
margin:0px; padding:25px 0px 0px 0px;
font-family:Arial, Helvetica, sans-serif; font-size:20px;
color:#FFFFFF;
}
UL
{
margin:0px; padding:0px;
}
LI
{
list-style:none; padding:5px 0px 0px 20px;
}
LI A
{
color:#CCCCCC; text-decoration:none;
}
LI A:hover
{
color:#FFFFFF; text-decoration:underline;
}
#pageText
{
padding:15px 0px 0px 20px;
}
#container
{
width:775px; margin:0 auto;
}
#header
{
width:100%; height:100px; background:#990000;
}
#content
{
clear:both;
}
#leftColumn
{
width:275px; height:300px; background:#000000;
text-align:left;
float:left;
}
#rightColumn
{
width:500px; height:300px; background:#003300;
text-align:left; color:#CCCCCC;
float:left;
}
#footer
{
width:100%; height:50px; background:#330033;
clear:both;
}

</style>
</head>

<body>

<!– CONTAINER starts here –>
<div id=”container”>

<!– HEADER starts here –>
<div id=”header”>
<h1>2 Column CSS Example</h1>
<p>Sub Title</p>
</div>
<!– HEADER ends here –>

<!– PAGE CONTENT starts here –>
<div id=”content”>

<!– LEFT COLUMN starts here –>
<div id=”leftColumn”>

<!– LEFT MENU starts here –>
<ul>
<li><a href=”#”>This is the first navigation link</a></li>
<li><a href=”#”>This is the second navigation link</a></li>
<li><a href=”#”>This is the third navigation link</a></li>
<li><a href=”#”>This is the fourth navigation link</a></li>
<li><a href=”#”>This is the fifth navigation link</a></li>
</ul>
<!– LEFT MENU ends here –>

</div>
<!– LEFT COLUMN ends here –>

<!– RIGHT COLUMN starts here –>
<div id=”rightColumn”>
<div id=”pageText”>Your page content goes here.</div>
</div>
<!– RIGHT COLUMN ends here –>

</div>
<!– PAGE CONTENT ends here –>

<!– FOOTER starts here –>
<div id=”footer”>
<p>Copyright © 2008. Tanzilo Insido PHPo MySQLo</p>
</div>
<!– FOOTER ends here –>

</div>
<!– CONTAINER starts here –>

</body>
</html>

In the following steps, I am going to clarify what I have done and how.

Step One: The CONTAINER div is holding the whole page content

First of all, please note that we have kept all our content elements inside a container DIV element:

<div id=”container”>
</div>

And here is the CSS for this section:

#container
{
width:775px; margin:0 auto;
}

Notice that this is a fixed width design of 775 pixels and the part margin:0 auto; sets the content area in the page center alignment.

Step Two: The HEADER AND FOOTER

Now we have three main areas inside our container div and there they are:

<div id=”header”></div>
<div id=”content”></div>
<div id=”footer”></div>

In the header div section, we only put a two line text and in the footer div section, we put just the copyright information.

Here is the CSS for header div:

#header
{
width:100%; height:100px; background:#990000;
}

Note that we are clearly specifying the width and height of the header section. Sometimes you may find that this section is not appearing. It may happen if you do not mention the values for height and/or width clearly.

And here is the CSS for footer div:

#footer
{
width:100%; height:50px; background:#330033;
clear:both;
}

We clearly specified the values for height and width again. But specially notice the clear:both; part. Why do we write this line? Because we are using floating feature. When we use clear:both;for a div area, it floats left by default and does not mess up with any other div area.

Simple. Huh?

Step Three: The CONTENT div

We have put our two columns in the content div:

<div id=”content”></div>

And here is the CSS for content div:

#content
{
clear:both;
}

Notice that we are using clear:both; coding to avoid any mess up with the header. If you do not clear your div, it will automatically try to be positioned side by side with the preceeding div (provided it gets enough space there).

Step Four: The two columns in the CONTENT div

Inside our content div element, we have two div element and those are leftColumn div and rightColumn div.

<div id=”leftColumn”></div>
<div id=”rightColumn”></div>

Here is the CSS for leftColumn div:

#leftColumn
{
width:275px; height:300px; background:#000000;
text-align:left;
float:left;
}

And here is the CSS for the rightColumn div:

#rightColumn
{
width:500px; height:300px; background:#003300;
text-align:left; color:#CCCCCC;
float:left;
}

You specially need to notice the following two things

1. We are using float feature for both of them and floating both of them to left.
2. Add the witdh of the leftColumn and rightColumn and that is 775 pixels (225 px + 500 px) that is exactly equal to the width of our container div (775 px).

What I am trying to say is: when you float two DIVs to the same direction (i.e. left in our case), they take position side by side as like two columns. But the total width of both of them must be equal to or less than the width of the div they are positioned.

Step five: Putting something in the left and right columns

We assign some text in the left and right columns and thus we are done.

3 Column tableless page design

Step One: A 3 column complete page coding

First take a look at the page code below. You can see the output here: 3 Column Page Output

I suggest you go to this output page, open the source code and take a look for a better indent view.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>3 Column CSS Example</title>
<style type=”text/css”>

BODY
{
margin:0px; padding:0px; text-align:center;
font-family:Arial, Helvetica, sans-serif; font-size:12px;
}
P
{
margin:0px; padding:17px 0px 0px 0px;
color:#CCCCCC;
}
H1
{
margin:0px; padding:25px 0px 0px 0px;
font-family:Arial, Helvetica, sans-serif; font-size:20px;
color:#FFFFFF;
}
UL
{
margin:0px; padding:0px;
}
LI
{
list-style:none; padding:5px 0px 0px 20px;
}
LI A
{
color:#CCCCCC; text-decoration:none;
}
LI A:hover
{
color:#FFFFFF; text-decoration:underline;
}
#pageText
{
padding:15px 0px 0px 20px;
}
#container
{
width:775px; margin:0 auto;
}
#header
{
width:100%; height:100px; background:#990000;
}
#content
{
clear:both;
}
#leftColumn
{
width:200px; height:300px; background:#000000;
text-align:left;
float:left;
}
#middleColumn
{
width:375px; height:300px; background:#FFFFFF;
text-align:left; color:#000000;
float:left;
}
#rightColumn
{
width:200px; height:300px; background:#003300;
text-align:left; color:#CCCCCC;
float:left;
}
#footer
{
width:100%; height:50px; background:#330033;
clear:both;
}

</style>
</head>

<body>

<!– CONTAINER starts here –>
<div id=”container”>

<!– HEADER starts here –>
<div id=”header”>
<h1>3 Column CSS Example</h1>
<p>Sub Title</p>
</div>
<!– HEADER ends here –>

<!– PAGE CONTENT starts here –>
<div id=”content”>

<!– LEFT COLUMN starts here –>
<div id=”leftColumn”>

<!– LEFT MENU starts here –>
<ul>
<li><a href=”#”>This is the first navigation link</a></li>
<li><a href=”#”>This is the second navigation link</a></li>
<li><a href=”#”>This is the third navigation link</a></li>
<li><a href=”#”>This is the fourth navigation link</a></li>
<li><a href=”#”>This is the fifth navigation link</a></li>
</ul>
<!– LEFT MENU ends here –>

</div>
<!– LEFT COLUMN ends here –>

<!– MIDDLE COLUMN starts here –>
<div id=”middleColumn”>
<div id=”pageText”>Your page content goes here.</div>
</div>
<!– MIDDLE COLUMN ends here –>

<!– RIGHT COLUMN starts here –>
<div id=”rightColumn”>
<div id=”pageText”>Your right column content goes here.</div>
</div>
<!– RIGHT COLUMN ends here –>

</div>
<!– PAGE CONTENT ends here –>

<!– FOOTER starts here –>
<div id=”footer”>
<p>Copyright © 2008. Tanzilo Insido PHPo MySQLo</p>
</div>
<!– FOOTER ends here –>

</div>
<!– CONTAINER ends here –>

</body>
</html>

Explanation for the 3 column design:

When you understand 2 column design, it is very easy to understand the three column design too since they are very similar. Everything else are as they were but now we have three columns in the content div:

<div id=”leftColumn”></div>
<div id=”middleColumn”></div>
<div id=”rightColumn”></div>

Left column CSS:

#leftColumn
{
width:200px; height:300px; background:#000000;
text-align:left;
float:left;
}

Middle column CSS:

#middleColumn
{
width:375px; height:300px; background:#FFFFFF;
text-align:left; color:#000000;
float:left;
}

Right column CSS:

#rightColumn
{
width:200px; height:300px; background:#003300;
text-align:left; color:#CCCCCC;
float:left;
}

Well. Notice that (1) we are floating them all to the left direction to keep them side by side in column style and (2) the total width of all the three columns is (200 px + 375 px + 200 px) or 757 pixels which is exactly equal to the width of the container div (775 pixels).

#container
{
width:775px; margin:0 auto;
}

Thus, you can make as many columns as you want. But make sure the total width of all your columns is smaller than or equal to the available space (width).

I tries my best to keep this post as easy as possible. If you are not clear or do not understand the whole article at the first reading, I suggest you giving a second reading.

Thanks for reading.

Hello!

Recently a Canadian client of mine told me to look at an interesting wordpress problem. I regularly develop wordpress theme for him. He is a great artisitic designer of wordpress theme and I code theme to HTML & CSS. Whatever, my client told me that he wants to password protect a sub-directory “download”. He has done it from cPanel. He also created a user and permitted that user in that sub-directory. But it was not working.

Befoer I start, I want to clear that in this case wordpress was installed in root directory. One more thing is in this post i cannot write “.” and “htaccess” together. May be this is a security issue. If I write “.” and “htaccess” together, the post is not saved and I get a 404 error. So, I have written (dot)htaccess instead. Again, (dot)htpasswds instead of “.” and “htpasswds” together.

So I logged in to the cPanel to check what is happening actually. I found that whenever you password protect a sub-directory from cPanel, a new (dot)htaccess file will be created in that sub-directory. And the content of the (dot)htaccess file is less or more like as follows:

AuthType Basic AuthName “Authorized Area!”
AuthUserFile “/home/ftpusername/(dot)htpasswds/public_html/download/passwd”
require valid-user

And your password that you set from the cPanel will be encrypted and saved in a file (dot)htpasswds in the AuthUserFile location.

If this was not a wordpress site or it was a wordpress site (but custom Permalink not used; rather the Default used), you should not face problem in most cases. But when you use customized Permalink in wordpress to create beautiful links and try to protect a password, the password protection from cPanel does not work!

But do you know why? Here is the reason: in the root directory you installed wordpress and here there is a (dot)htaccess file. The settings in this file and the (dot)htaccess in your sub-directory (for example root_directory/download/(dot)htaccess) do not smoothly match with each other with since you are using Permalink plug-in to customize your URLs.

So, when you try to go to: http://www.yoursitename.com/download wordpress think that it is a post or page!

Wordpress think this because you have enables permalink and this is quite correct and logical. But you know your download sub-directory is not a post but a folder/directory in the root folder. So, you need to do something so that wordpress does not confuse the following link as a post or page.
http://www.yoursitename.com/download

Here is the solution:
1. Open the (dot)htaccess file in http://www.yoursitename.com/(dot)htaccess
2. Find out the line # BEGIN WordPress
3. Just before this, add the following three lines:
# To bypass download directory
ErrorDocument 401 /%{REQUEST_URI}/myerror.html
ErrorDocument 403 /%{REQUEST_URI}/myerror.html
4. Save the (dot)htaccess file and upload in your root or installation directory.

Now go to http://www.yoursitename.com/download and check if it works. If everything is OK, you should get a prompt asking for a username and password that you set from the cPanel.

Here is my example:
Sub-directory download password protected: http://www.tanzilo.com/download
Permalink smoothly working: http://www.tanzilo.com/2008/10/18/password-protect-sub-directory-in-wordpress-by-htaccess/

Or you may install a shopping cart in location as in:
http://www.yoursitename.com/shop

This should work smoothly too as you see my example here:
http://tanzilo.com/shop

Although there is an application/software in the shop sub-directory, wordpress no more thinks it a post or page!

Thus, you can set (dot)htaccess, password protected sub-directory (i.e. /download/) and any other sub-directory (i.e. /shop/) in such a way that they will be living in happiness in the same home!

The last interesting thing is this solution is sometimes helpful in Drupal and in some other applications where (dot)htaccess and URL rewriting code do not fit together.

Thanks for reading.

Hey Guys,

I am a Freelance Web Developer and my main tools are PHP & MySQL. Few days ago, I got a Chinese project where I had to develop a Real Estate site in Chinese language. You know we often build websites in English and Databases are in English too. So, the default configuration in MySQL works fine everytime.

But when it comes a language other than English, many people do not know what to do. Well. When I started the project, I did not even know that the default MySQL settings will not work for the Chinese language. So, I started searching for a stable solution where my program will support any language for adding, updating and searching data from the MySQL database.

And Yeah.
I found it!

OK.

Let us see the solution now.
It is very very simple.

Step One: SET THE CHARSET TO UTF-8 IN THE HEAD SECTION

First of all, the browser needs to know that you are going to display or use Unicode in this page. So, go to your <HEAD></HEAD> section and set the charset to utf-8. So, the browser will be able to show the Unicode text without any error and smoothly. You can also copy and paste the line below:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Step Two: CREATING THE DATABASE

When you create your (a) Database and (b) any Table in the database, set the Collation of both of them to utf8_unicode_ci and you know it is very easy if you are using phpMyAdmin.

Step Three: DATABASE INITIALIZATION

When you initialize the database connection, please add the “extra lines”

<?php
	define(‘HOSTNAME’, ‘localhost’);
	define(‘USERNAME’, ‘database_user_name’);
	define(‘PASSWORD’, ‘database_password’);
	define(‘DATABASE’, ‘database_name’);
	$dbLink = mysql_connect(HOSTNAME, USERNAME, PASSWORD);
	mysql_query(“SET character_set_results=utf8″, $dbLink);
	mb_language(‘uni’);
	mb_internal_encoding(‘UTF-8‘);
	mysql_select_db(DATABASE, $dbLink);
	mysql_query(“set names ‘utf8′“,$dbLink);
?>

But why are you adding the extra lines? Because you are letting the database know what kind of input you are going to work with soon.

Step Four: INSERTING INPUTS/DATA IN THE DATABASE

<?php
	mysql_query(“SET character_set_client=utf8″, $dbLink);
	mysql_query(“SET character_set_connection=utf8″, $dbLink);
	$sql_query = “INSERT INTO
	TABLE_NAME(field_name_one, field_name_two)
	VALUES(‘field_value_one’, ‘field_value_two’)“;
	mysql_query($sql_query, $dbLink);
?>

Why are you adding the first two lines for? Because the database should know what kind of data is going to be stored.

Step Five: UPDATING INPUTS/DATA IN THE DATABASE

<?php
	mysql_query(“SET character_set_client=utf8″, $dbLink);
	mysql_query(“SET character_set_connection=utf8″, $dbLink);
	$sql_query = “UPDATE TABLE_NAME
	SET field_name_one=‘field_value_one’, field_name_two=‘field_value_two’
	WHERE id=‘$id’; “;
	mysql_query($sql_query, $dbLink);
?>

So, you are adding the extra two lines before you run your query string as you are playing with Unicode.

Step Six: SEARCHING DATA FROM THE DATABASE

<?php
	mysql_query(“SET character_set_results=utf8″, $dbLink);
	$sql_query = “SELECT * FROM TABLE_NAME WHERE id=