Desiging your way to Implementation

Many young developer has a liking to solve a problem brute forcibly rather than solving it elegantly. From SDLC we know that Designing a system takes much time rather than implementing the system. Yet many developer just jumped into implementing the solution without designing the whole system in first place. Many developer design and develop at the same time without knowing the upcoming risks they may incur. A bad designed solution will not stay in the long run.

The brute force approach has a benefit. If a problem is small and does not required to be maintained in future then brute force approach save time. But whenever it is a long term project then the fruit of a good design starts to come. Good designed solutions always have a room for future improvement. The maintainability is one of the major benefits.

Though I am a very new developer but I have worked with some excellent senior people in my company. And I learned from them & also by participating in design phase of some solutions. Today I am gonna share my experience & thought on design with you -

1. Decoupled modules: While designing a solution always try to decouple the modules. decoupled modules can work independently. Which enables the developer to modify the specific module without worrying about the whole system. If someone to change an implementation within a module, he/she doesn't have to concern about the interactions with other modules.

2. Minimize the expose of Class implementation: Try to minimize the details of the class implementation. Because if you use too much implementation details of a class then changing the class will seriously increase development time. Say In one class A, we are using B's x property which is a integer type. Now for some requirement we need to change the property type from integer to char. In this scenario, if we previously used that statement 1000 times then we have to change the code manually in 1000 places.

3. Revise & Revise: Over and over revise your design to check if there is room for improvement and try to clear out the design flaws. The sooner you can cancel out the bugs the better and extensible solution you will make.

4. Do not think about implementation details when design, think about the requirement and solution: Well I think this is a common mistake we made while designing. Implementation depends on design. But while designing you should never think about implementation details. You should think about the requirement & solution while designing because you are trying to make the solution a better one not the implementation of a certain solution better.

5. Trade & Decisions: Design is somewhat making trades and decision. Choosing the better decision is a matter of requirement & situation. But never rule out a decision as bad because what is a bad decision in one context will be the best in another context. Choosing wisely the trade-offs will surely prove to be useful later.

I think that's about it. I am not in a position to defend that my concept about the design is totally right. But it is what I have learned from my seniors. If you think some of them are wrong, please feel free to comment. Because through decision may be I can improve my concept of designing.

Happy designing.

How CSS Box Model Works - Beginner

Well it has been may days since I wrote my last blog. I was busy with my work and it was very messy. It has crossed my mind several times to write a blog, but I couldn't find any luxury time to write one.

So, I have came up with a small topic regarding the CSS Box Model.

CSS box model is a model where you treat your every component as a box. Then you using these box (i,e your html element) and put it around the page to setup the layout. Well most of the beginner coder knows how the CSS box model works.

But still I think it might be good idea for those who didn't to know how the CSS box model actually works. So, that they can actually begin to understand the CSS positioning and styling by themselves.

Now let us see the box model

As you can see the HTML element is surrounded by Padding.
Padding is the space around the HTML element. In CSS tag you can use the Padding property as below

• padding:value;  [this will put free space equal to the value (say 3px) around the HTML element.]
• padding:val1 val2; [this syntax will set free space equal to val1 in up-down direction and val2 in left-right direction]
• padding-left:value; [to explicitly define the left padding value for the html element]
• padding-right:value; [to explicitly define the right padding value for the html element]
• padding-top:value; [to explicitly define the top padding value for the html element]
• padding-bottom:value; [to explicitly define the bottom padding value for the html element]

The Margin property is also like the padding property but unlike the padding free space, which cannot be filled with other elements, margin space can contain other elements.
You can think padding and the HTML element as a HTML element itself. But that is not necessarily true for the margin property.
Margin property will put up margin equal to the value you set in the margin property.
You can use many form of margin property and they all like padding property usage.

• margin:value;  [this will put margin space equal to the value (say 3px) around the HTML element.]
• margin:val1 val2; [this syntax will set margin space equal to val1 in up-down direction and val2 in left-right direction]
• margin-left:value; [to explicitly define the left margin value for the html element]
• margin-right:value; [to explicitly define the right margin value for the html element]
• margin-top:value; [to explicitly define the top margin value for the html element]
• margin-bottom:value; [to explicitly define the bottom margin value for the html element]

Now the offset is used to put the element into the right position and usually have four properties-

• left:value;
• right:value;
• bottom:value;
• top:value;

All of them takes a single value or percentage of the total width of the document on the screen (generally screen resolution).  They tells the browser about the elements to be placed according to the given offset value.

Very basic stuff discussed here, but I think if any one has clear idea how the model works they can understand how to place the element rightly.

One last point, different browser handles the box model differently. The model here I describe works best with firefox browser. There is only one big difference with the IE's box model is that, in IE's box model the padding isn't included in to the element itself. But in firefox (gecko to be more exact) box model consider padding as associated with the html element itself.

Thank you for reading the post. If you have any question, suggestion or anything, please leave a comment. Keep in touch.

PHP SQL Injection Prevention

The old school SQL Injection probably does not work in today's modern websites. But those who are new to PHP website development find themselves wondering around the web to learn to eliminate the SQL injection.

There is a very simple function in PHP to stop SQL injection. Consider We have a table :-
Table fake_customers
===============
id        name
--       ------
1          X
2          Y
3          Z

If we pass the ID by the get method the following code is prone to SQL injection -

$q = "select * from fake_customers where id = $id";

now what if we pass "1 and id>1" in the id parameter? Then the query will be like

$q = "select * from fake_customers where id = $id"; // select * from fake_customers where id = 1 and id>1 -- SQL injected !!!

A better approach is to use the mysql_real_escape_string() to escape the SQL escape characters.
here is the solution -

$q = sprintf("select * from fake_customers where id = %d", mysql_real_escape_string($id));

Pretty easy, isn't it?

For any suggestion or question, please leave a comment.