Programming Tips By Omar AlBadri

Better Php Caching

Omar — Tue, 19 Feb 2008 23:36:00 GMT

I read many interesting articles on caching that all do the job. The problem I have with most of the techniques is that they do not show you how to implement caching for High Traffic sites. Let look at what caching is first What is Caching? Most web sites...(read more)

Data Integration using a MultiThreading Kernel

Omar — Tue, 05 Feb 2008 18:39:00 GMT

Sometimes you have a problem where two incompatable system, (such as a POS/ Cash Register) , needs to integrate with a new software systems (such as a new website) data. The issue is that the POS system is the Master of Inventroy (MOI) and needs to update...(read more)

Cross Browser Development Tips and Tricks

Omar — Wed, 23 Jan 2008 16:59:00 GMT

IE6! IE7! Safari! Opera! FireFox! OH MY!!! Developing for today multiple browsers can be a nightmare. In this article I go over some tips and some general guidelines on how to make Cross Browser Development as easy as possible.

Overview

If we look at the market share of today's browsers for the last year we get something like this:

IE	Internet Explorer
Fx	Firefox
Moz	The Mozilla Suite (Gecko, Netscape)
S	Safari
O	Opera

Browser Statistics Month by Month

2007	IE7	IE6	IE5	Fx	Moz	S	O
December	21.0%	33.2%	1.7%	36.3%	1.4%	1.7%	1.4%
November	20.8%	33.6%	1.6%	36.3%	1.2%	1.8%	1.6%
October	20.7%	34.5%	1.5%	36.0%	1.3%	1.7%	1.6%
September	20.8%	34.9%	1.5%	35.4%	1.2%	1.6%	1.5%
August	20.5%	35.7%	1.5%	34.9%	1.3%	1.5%	1.7%
July	20.1%	36.9%	1.5%	34.5%	1.4%	1.5%	1.9%
June	19.7%	37.3%	1.5%	34.0%	1.4%	1.5%	1.8%
May	19.2%	38.1%	1.6%	33.7%	1.3%	1.5%	1.7%
April	19.1%	38.4%	1.7%	32.9%	1.3%	1.5%	1.6%
March	18.0%	38.7%	2.0%	31.8%	1.3%	1.6%	1.6%
February	16.4%	39.8%	2.5%	31.2%	1.4%	1.7%	1.5%
January	13.3%	42.3%	3.0%	31.0%	1.5%	1.7%	1.5%

A couple of things that we can conclude from this chart:

IE 6 is still the number one browser(avg over 12 months)
We can ignore Opera and Mozilla as there market share is either decreasing or staying at the low end
IE7 is gaining ground
FireFox is getting hugely popular
While Safari is not that large of a market share Mac users are begining to embrace it AND a windows version was just released.

So how does one begin development when there are so many browsers out there?

Here are some tips some rules and some hacks that can make you life easier:

1. Download the Latest Version of Firefox, Safari and Upgrade to IE7.

On your development system you should have the latest FireFox, Safari(for Mac users) and IE7. IE7 is going to get the most complaints from developers but it is essential that you upgrade because IE7 is gaining ground and IE6 is slowly dying(yay!!). Having these three browsers(plus I will show a way to get IE6 on your machine too, more on that later) will make sure that you see is what over 90% or more of the internet will also see.

2. Download Microsoft Virtual PC for IE6 Development

Like I said before, you can work with both IE7 and IE6 on the same system its just that you have to run IE6 on a virtual PC. Luckily for us Microsoft offers a free version of virtual PC that represent Windows Xp with IE6 running on it. Downloading and installing that will allow you to have IE7 on your main environment and IE6 via virtual PC!! Click on the link below to get Virtual PC. Click on the screen shot to see IE6 and IE7 working side by side:

Get Microsoft Virtual PC

3. Download Firebug(FireFox) and Web Developer(FireFox) and IE Developer Toolbar(IE6 and IE7)

Firebug is the most important add on because it allows you to adjust the css live then change your templates as you make changes. IE Developer Toolbar allows you to inspect elements in IE7 and IE6 but you can not make live edits. Still they will Greatly help you in solving CSS and alignment issues.
Get them Here:
Web Developer(FF)
FireBug(FF)
IE Developer Toolbar

4. Always Develop for FireFox/Safari First...

Firefox has the greatest amount of tools to develop with. Safari will render almost exactly like Firefox so developing for one should be compatible with the other. The second reason is that there are plenty of Hacks and workarounds for IE that are not available for FireFox.

5. ... Then Develop for IE6 and IE7

After you finish developing for FF you can now begin your IE6 and IE7 development. I suggest you start with IE7 then IE6. The reason being is that IE6 will run slowly in the Virtual PC so you only want to make final adjustments using...

6. Use Conditional statement for IE6 and IE7

After you completed your developement in FireFox and you bring up your page in IE6/7 you should notice some style differences. Using Conditional statements to load other CSS stylesheet for IE7/6 will keep your CSS valid and since conditional statements only work in IE, it will isolate IE. To do this add a second and third Stylesheet called IE7.css and IE6.css and load them after you main stylesheet.. In these style sheets you should overwrite any style that are not working in Firefox. Here is how the Stylesheet should be set up in your<head> tag

<head>
<link rel="stylesheet" type="text/css" href="StyleSheet.css" />


</head>

7. Only use hacks as a last resort ... and if you do use them separate them out

There comes a point where the clock is ticking and you need the website done yesterday. While I don't condone using hacks some times it is a necessity to get something to work in all browser. If you do use hacks follow these two rules

Separate the hacks from the main styling

Use cascading hacks and label them

For example you have a class called table width. In Firefox it looks good but in IE7 its too wide and in IE 6 its too short. Here is a diagram of how the hacks work.

Since you coded for FireFox you should not need to hack it.

If you want a style to only be seen by IE7 and IE6 place a # in front of the style

For IE6 only place a _ in front of the style.

So if your main styling code for a class tablewidth looks like his:

.tablewidth
{
       color:black;
       padding:0px 5px 3px 2px;
       width:532px;
}

remove the problematic style and create a new section below the original:

.tablewidth
{
       color:black;
       padding:0px 5px 3px 2px;

}

/*Hacks for tablewidth class*/

.tablewidth
{
   width:532px; /*Firefox/Safari will read this*/
#width:530px; /*IE7 and IE6 can only see this */
   _width:520; /*Only IE6 can read this */
}

Coding the style sheets in this way will make you code much more readable and make you hacks easier to find and remove if you solve the problem or rework using conditional statements

I hope you find this article useful, please feel free to leave me comments and questions

Top 5 programming languages you should know in 2008

Omar — Tue, 15 Jan 2008 20:16:00 GMT

Programming languages, run the web. I am always asked "Which programming language is the best to learn?" to which I counter " If you only know one, then your in serious trouble." This got me thinking on what programming languages should a programmer know to maximize his talent and marketability. Below is the top five languages that every programmer should know:

5. Ruby on Rails

Why you should learn it: Cause it is the future. If you want to build a website writing only 8 lines of code Ruby on Rails(RoR) is the language for you. There has always been talk of Object Oriented Programming(OOP) and Ruby on Rails is OOP in its purest form.
Why it is number 5: Cause it is still in infancy and it does not have a debugger or a true IDE. Also its has a STEEP learning curve and its hard to understand how each component is put together
Resources: Top 12 Ruby on Rails Tutorials

4. MYSQL/Microsoft SQL(T-SQL)

Why you should learn it: Static pages are dead. Almost any reputable site has a database as a back end. The abilty to program Stored Procedures as well as simple task as creating a table, is a MUST if you are to be a complete programmer. Whether its Sql Server or MySql it is imperative that you learn a Structured Query Language.
Why it is number 4: In some cases you can get by, by not knowing a SQL language, in some companies they have dedicated Database programmer who will do the work for you. In general,especially in 08' you need to know how some database programming.
Resources: Top Tutorial on Mysql, Tutorial on MS Sql

3. JavaScript/AJAX

Why you should learn it: Ajax (Asynchronous JavaScript and XML) is the new buzz word in the industry. Why I included JavaScript also is you can not do one with out knowing the other. Ajax in essence is a technique of updating "regions" on a web page instead of updating the page on a post back. Ajax is the future of web and every programmer should learn it for 2008
Why it is number 3: Cause you cant program a web page in Ajax/JavaScript alone(at least not yet). You still need a underling technology that the web page runs on(LAMP,ASP.NET, etc). Ajax is still a great tool/method to create cool effects and functionality.
Resources:Tutorial on AJAX,Tutorial on Javascript

2. PHP

Why you should learn it: The old master, PHP (which surprisingly stand for Personal Home Page) is still going strong. PHP in association with LAMP(Linux Apache MySql PHP) is a effective cheap and efficient way to program websites. You can have a entire infrastructure built of free cheap software. Many reputable businesses and large companies are now adopting LAMP as a standard. Not only that there is a wealth of CMS and Community orientated software that are available only for PHP(Drupal,Joombla). There are many availiable free library and a wealth of info avaliable for PHP.
Why it is number 2: Lack of standardization. Ask 4 different PHP programmer of a way to accomplish as task, and you might get 5 different answers. While debuggers and IDE's do exist lack, of standardization hurts the technology. Overall you can create cheap,
Resources:PHP Tutorial

1. C#

Why you should learn it: Quite simple it simple, powerfully and extensible. Its IDE(Visual Studio 2008) is second to none. You can easily create both web applications and windows application with out learning a new language. Integrating with any database is easy and there are plenty of libraries and systems (Community Server) that use C#. Used in conjunction with ASP.Net C# can preform any task that any other languages can do WITH a better and usable interface.
Why it is Number 1: Quite frankly its the easiest most extensible language out there. Some would say C# is nothing but a next generation VB. I disagree I think it is the next generation of C++ which was universally loved. C# programmers also tend to make the most in the job market.
Resources: C# Tutorials

So take some time this year and learn something new. For me my goal is to improve my PHP skills. Please feel free to comment or email me with any questions.

Adding a Confirm Javascript PopUp with a image to a ASP.NET GridView AND Update the database

Omar — Thu, 10 Jan 2008 04:45:00 GMT

After hours of searching thru pages and pages of code I could not find a single example of code that did exactly what I wanted. Here is the scenario:

I want a GridView in Asp.net to display a image that will fire some Javascript confirming that I want to delete the row. If I press OK the a Asp.net function will fire that will delete the user. If I click cancel nothing will happen.

So for everybody looking for this code I am going to show you EXACTLY how to do it step by step:

Setting up the GridView Control

1. Create a new web site in Asp.net(or use a existing one) and drop in your Gridview Control

2. Click on the Task icon and set up your datasource( in this example I am using the Northwind Database and accessing the customers table)

3. Add a Command field. I moved mine to the top.

4. Set the "Show Delete Button" to true

5. Press OK ( you can also set Show CancelButton to True) Now we need to setup a bounding event.

6.Right Click on the GridView Control and choose Properties

7. Click on the Events button(the lighting bolt) and double click on the "RowDataBound" event

Now we are set up for code

Lets overview what we want. Want some Javascript to be called with a OK and Cancel button and we want some sort of image representing the delete button. First we are going to find the delete control, and second we are going to cast it as a LinkButton(I will explain why shortly) and third we are going to add some JavaScript to confirm that we want to delete a customer:

1. You should now be in the Code behind page and at the Function:protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) if not press F7 and find the function

2. First we find the control, then we cast it to a link button and then we use the "OnClientClick" property of the link button to set the JavaScript. Finally we use the "Text" property to add a image to the link button: Here is the code

if (e.Row.RowType == DataControlRowType.DataRow)
{
LinkButton deleteButton = (LinkButton)e.Row.Cells[0].Controls[2]; //<-- we are casting control 2 my delete control link to a LinkButton
deleteButton.OnClientClick = return confirm('Delete this Record (" + ((DataControlFieldCell)e.Row.Cells[2]).Text + ")?')"; // <-- here we add the javascript on the onclick event

deleteButton.Text = "<img src=\"icon_delete.gif\"/>"; //<-- finally we add the image to the text element

}

3. If we compile and run the code and look at the source we have the basis of what we want:

<table cellspacing="0" rules="all" border="1" id="GridView1" style="border-collapse:collapse;">
  <tr>
   <td><a href="doPostBack('GridView1','Edit$0')">Edit</a> <a onclick="return confirm('Delete this Record (Alfreds Futterkiste)?');" href="doPostBack('GridView1','Delete$0')"><img src="icon_delete.gif"/></a></td><td>ALFKI</td><td>Alfreds Futterkiste</td><td>Maria Anders</td><td>Sales Representative</td><td>Obere Str. 57</td><td>Berlin</td><td> </td><td>12209</td><td>Germany</td><td>030-0074321</td><td>030-0076545</td>
  </tr>

In the browser it looks like this:

We now have a image button that pulls this up when clicked

Updating the database

We have a Confirm delete pop up but now we need to have a way to update the database when the user presses "OK" and do nothing if the user presses "Cancel

1. Let go back to the Gridview and right click on it and select properties and go to the event tab again

2.. Now Double click on the "RowCommand" Event

3. Now we need to find the row that was clicked and what command was called (NOTE: Remember I have a Cancel button as well as a delete button so it is useful to know what command was pressed) Here is the simple code:

protected void GridView1_RowCommand1(object sender, GridViewCommandEventArgs e)
{
// get the row index stored in the CommandArgument property
int index = Convert.ToInt32(e.CommandArgument);
// find the command to execute
string command = e.CommandName;
if (command == "Delete")
{
//call delete function
}

}

4. Now you can write your delete code

Now you might ask "What happens if cancel is pressed?" remember we have a return on the Javascript so if it returns "false" or cancel the RowCommand Event will never fire.

I hope this post is helpful, please leave any comment or questions.

Update: I added the code in the downloads page if you want to review the project. Get if from here