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.

Are you having a virus scan every time you are booted into Windows and the scan is showing hundreds of infections? Are you having a pop up next to the clock telling you that your system is infected and you need to download their antivirus software to clean it? Is there the phrase “Virus Alert” next to your system clock? You are probably having Micro Antivirus 2009, Antivirus 2008 XP, or something with a similar name installed on your system. Whatever the name is, these are all fake warnings and they pretty much act in the same way. They pretend they are legitimate virus scanners and try to trick you into paying them.

Disable Startup Services

To get rid of these infections, the first step is to prevent them from starting up. You can control startup program and services in System Configuration.

1. Click the Start button, and click Run…
2. In the Run box, type msconfig and press OK.
3. The System Configuration box comes up, click on the Services tab.
4. Check “Hide all Microsoft services”.
5. In the remaining list of services, uncheck all entries.
6. Click on the Startup tab.
7. Uncheck all entries and click OK.
8. Restart your computer

Once you restarted your computer, your system should be in a more functional state. If not, then you can always boot into safe mode.

Malwarebytes’ Anti-Malware

The next step is to scan your system with an antivirus program. However, I have tried using popular commercial scanners such as Kaspersky and NOD32. But neither of them can completely remove this type of infections. The most effective scanner dealing with this type of infections is Malwarebytes’ Anti-Malware. I have used it on a number of systems and it removed the infections successfully and fixed the registries. Some infections would disable your task manager, display properties, and remove the Run, My Computer, and other items in your Start menu. Malwarebytes can revert these change automatically in the registry.

1. Download Malwarebytes’ Anti-Malware software from their website.
2. Install it on your computer.
3. Once it starts up, just perform a quick scan.
4. Once the scan is done, click on “view results”.
5. Then click on remove.

After the scan, you can now restart your computer to see if you are still getting the fake infection warnings. You may also want to try scanning your computer with NOD32 or Kaspersky at this time for viruses that Malwarebytes couldn’t catch. In the end, you can enable your startup services again in System Configuration.

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.

The theories and practical skills nowadays in web designing is quite different from what I started with 10 years ago. Today I am going to talk about sometime that’s surprisingly not being changed much. Let’s look at a picture below:

Familiar, right? Yes, we can still see a lot of this style login form around this infinite triple-w world. I won’t say it’s a bad thing, but since the space on your page is very limited and valuable (unless you don’t have contents to put on. ). How about we want to save some space? However we can’t just delete the “username” and “password” label in front or else you will lose your users the other day when you wake up.

So what’s the alternate option? Well, let’s play some CSS and basic mouse action.

We can see an example before we get started. Let’s look at Apple’s MobileMe website.

It’s a good idea that show the users what those text fields are using the text fields themselves. The following code here are showing that if there is nothing input by the user in the text field, it will have a gray initial value, that’s, “Gray Text” in my example. Once the user click in the text field and ready to type in their own value, the “Gray Text” will disappear and replaced by what the user type in. However, if the user suddenly decide to move out before the type in anything and click somewhere else on the website, the text field will be given back the value “Gray Text”.

<html>
<head>
<style type=”text/css”>
.gray_font {color:#666;}
.black_font {color:#000;}
</style>
</head>
<body>
<input type=”text” class=”gray_font” value=”Gray Text” onclick=”if(this.value==’Gray Text’){this.value=”;this.className=’black_font’}” onblur=”if(this.value==”){this.value=’Gray Text’;this.className=’gray_font’}” />
</body>
</html>

What do you think? This is just an simple example. Use your creativity, you can probably use an image as your background.

I am here to share some tips on photoshop today, to be specific, I will share how to make a silk ribbon like shape that is used a lot in website design.

1. Create a blank document. I created a 500 px by 500 px one, but it doesn’t really matter.

2. Use Pen Tool to create two paths. Then you need to create a new layer then use these two paths to have a stroke. Like this:

3. Deselect the path and select the layer where your stroke is. Then choose “Edit” in the tool bar and choose “Define Brush Preset”.

4. Name your brush preset and remember it since we are going to need it soon.

5. Delete the layer you have your stoke on. Create a layer and fill with black. (This is just personal preference. )

Click the Brush tool box on the right panel.

Set your brush setting similar to what I did above. (I hope you will get similar outputs. ).

Finally, you can use your brush to play around, here is what I get.

If you have any good suggestions, please let me know and I can update this tutorial based on feedbacks.

Photoshop tutorial by Rockia @ SimpleClix.net