SimpleClix Studio

As the demand for web application is increasing, a lot of web applications are getting more complicated.? So it is time to split the task into multiple tasks, so it will greatly increase the usability.

However, with the security in mind, how can we avoid people using javascript or url injection to avoid skipping steps?

Today, I am going to share my experience with you.

The most simple way to keep track of what step the user is on is to use a hidden field locally, such as:

<input type=’hidden’ name=’current_step’ value=’1′/> <!– the user is on step one–>

However, the above method has a big security issue.? User can use javascript to change the hidden feild to other numbers to skip the current step.

Let’s move the keep tracking variable to the server, and don’t use any local hidden field.

So, we can use a session variable to keep track of the steps:

$_SESSION['step'] = 1;

With the above method, the user cannot change the session variable.? However, there is still a problem.? If the user click the back button to go back to the previous steps, and change the previous validated information, and then continue with the current step.

So, what is the best way to achieve the goal securely?

Let’s try to combine both local and server to keep tracking of the steps.

so let’s create a session variable on the server side, such as $_SESSION['step'], and create a hidden field such as <input type=’hidden’ name=’step’ value=’1′/>

Sample code:

$cur_step = 1;

$post_cur_step = ($_POST['cur_step'] == “”)? 1:(int)$_POST['cur_step'];

/*step logic*/
if(!isset($_SESSION['step']) || $post_cur_step < 1) $cur_step = $_SESSION['step'] = 1;
else if($post_cur_step >= $_SESSION['step']) $cur_step = $_SESSION['step'];
else if($post_cur_step < $_SESSION['step']) $cur_step = $_SESSION['step'] = $post_cur_step;

Let’s explain the code above.

First we get the step data from the local form from POST variable.

And then we create the session variable ’step’ and set it to 1 or the first step.

1. In case, the user try to modify the hidden field to skip the step, the logic can force the user going back to the current step.

2. In case, the user clicks the back button to go back to the previous steps, then the logic above can detect it, and set the $_SESSION['step'] to the previous step.

Now we fix the skipping step problems, but how can we have some control of the steps on the server side, such as when there is any errors detected during the session, and have to force the user going back to previous steps.? So, how can we control it?

It is actually easy, we can change the $_SESSION['step'] to point to any previous step number, then the logic will force the user going back to the previous step.

This is just one of the many methods, if you find any problems or have a better solution, please post it here, and share with others.

A lot of New Web Developers usually rewrite all the CSS when they need to redesign or update the current web template, and that is really not efficient at all.? So, how can we minimize the amount of time that have to be spent on the CSS?? The answer is simple.? Make your css reusable. But how?

Now, we start from the basic CSS elements.

.bold{

font-weight: bold;

}

.underline

{

text-decoration: underline;

}

and so on…

So whenever you want to make your text bold or underline you can do

<span class=’bold’>bold this</span> OR <span class=’underline’>underline this</span>

So far, it is still the basic, and nothing is really exciting right?

Ok, let’s make it a little bit complicate by introducing the multiple class names.

Now, suppose you want to make your text bold and underline.

Usually you would do

.bold_and_underline

{

text-decoration: underline;

font-weight: bold;

}

then finally apply it to the html tag like this <span class=’bold_and_underline’>bold, underline</span>.

If you are going to mix and match different css properties to the html element, you will end up with write a lot of css properties, and a lot of them just keep repeating.

By using multiple class name, now you can make your life a little bit easier.

You can do this:

<span class=’bold underline’>bold and underline</span>

If you want to apply more properties to the HTML Tag, you can always mix and match of your basic css properties by using the multiple class names.

And I would recommend you to make your class names more meaningful, so you can remember it when you apply it to your html tags.

However, this is not the end yet, and we can even go further with the classes.

A lot of web template will have a lot of <div> containers with css properties, such as, float: left, margin: 0, padding: 0;

Now, let’s set this up in css.

.container

{

margin: 0;

padding: 0;

float: left;

}

and assume we have two div tags, such as

<div class=’container big_box’></div>

<div class=’container small_box’></div>

And now, let’s see the properties of the big box and small box,

.big_box

{

width: 300px;

height: 400px;

}

.small_box

{

width: 100px;

height: 100px;

}

Now, you can see that it save you from writing the margin, padding, float properties repeatedly.

Without the multiple “class names”, you will have to do this:

.big_box

{

width: 300px;

height: 400px;

margin: 0;

padding: 0;

float: left;

}

.small_box

{

width: 100px;

height: 100px;

margin: 0;

padding: 0;

float: left;

}

Finally, the multiple “class names” is compatible with IE6,7, firefox, opera, another other major browsers, so you can feel safe to use it for your projects.

Good luck.