One day, while you’re organizing the content for your latest and greatest website, you may find yourself wishing for an automated way to fetch a description for some of that content.  Perhaps an image, too, to pull into a header or elsewhere on your page.  And since you’ve got 100 other things on your plate, you’d like this content to be implemented automatically, dynamically appearing on certain pages based on a few keywords.  For novice Web developers, this sounds impossible, I know.  But… it’s totally doable.

So off you go in search of good, usable, public content.  Before long you’ll probably realize it yourself, but I’ll save you an hour of digging with this quick pro tip: Wikipedia is your friend. The bottomless content at Wikipedia is a perfect match for what we want to do.  The caveat, though, is it’s so vast we might scrape the wrong content.  And especially if you’re automating a task like this, constantly looking over your shoulder to confirm the content would defeat the entire purpose.  So relying soley on the Wiki gremlins is not the best way to go.

Let’s take for example a Wiki search for a popular technology company, say, Apple.  For a Web-savvy person like yourself, a Wiki search for ‘Apple’ turns up what you probably expect: the entry for a scrumptious kind of fruit.  And as Web developers, we should be more astute in our search terms, but sometimes yes, well, there are those gremlins.

So… to cut the risk of unwanted fruit creeping onto your page, we’re going to combine a Wiki search with a Google search.

Following is the code for scraping the first paragraph and image of the entry from a page in Wikipedia.  As long as your keywords aren’t really crazy, this should get the job done!

Finally, make sure you don’t forget to credit Wikipedia on your page… and if you have any questions, drop us a line here any time!!

Here’s the code:

require  'hpricot'
require 'open-uri'

def fetch_description(query_item)
    page_title, uri_title = get_wiki_name(query_item)
    return get_wiki_description(page_title, uri_title)
end

def upload_photo(wiki_photo)
    begin
      base_uri = URI.parse(wiki_photo)
      uploaded_data = open(base_uri)
      def uploaded_data.original_filename; base_uri.path.split('/').last; end
      return uploaded_data.original_filename.blank? ? nil : uploaded_data
    rescue
      return nil
    end
end

#Method to fetch wiki page and strip first two

 Tags
def get_wiki_description(page_title, uri_title)
    url =  uri_title
    final_content = ""
    if url.size > 10
      buffer = Hpricot(open(url, "UserAgent" => "reader"+rand(10000).to_s).read)
      #Capture first two paragraphs of text
      content = buffer.search("//div[@id='content']").search("//div[@id='bodyContent']").search("//p")[0..2]

      #Remove the extra spaces and strip html tags from the fetched content
      content.each do |c|
        final_content+=c.inner_html.gsub(/< \/?[^>]*>/, '').gsub(/&#\d+;/,'').gsub(/\([^\)]+\)/,'').gsub(/\[[^\]]+\]/,'').gsub(/ +/,' ')+"\n"
      end
    end
    return final_content
end

#Method to get the link for wikipedia from google search results
def get_wiki_name(query_item)
    search_keywords = query_item.strip.gsub(/\s+/,'+')
    url = "http://www.google.com/search?q=#{search_keywords}+site%3Aen.wikipedia.org"
    begin
      doc = Hpricot(open(url, "UserAgent" => "reader"+rand(10000).to_s).read)
      result = doc.search("//div[@id='ires']").search("//li[@class='g']").first.search("//a").first unless doc
    rescue
      return '',''
    end
    if result
      return result.inner_html.gsub(/< \/?[^>]*>/,"").gsub(/./,""),result.attributes["href"]
    else
      return '',''
    end
end

wiki_description, wiki_photo = fetch_description("Apple")
upload_photo(wiki_photo)

And this is how it looks implemented live, in context:

• Google’s services are ubiquitous, and you’ve probably already got an account for say, Gmail, Docs, YouTube or Calendar.  So when you land on the Blogger homepage, all you need to do is enter your login info and off you go!  No registration required.
• It’s powered by Google, so there’s a better chance of placing high on search engine rankings.  From an SEO/SEM (search engine optimization / search engine marketing) point of view, that’s quite the big deal.
• Users can create multiple blogs.  For Web developers or designers with diverse portfolios it’s easier than ever to start your own blogging network.
• Blogger has a limited but respectable directory of templates with plenty of options for customization.  Inveterate tweakers should clear the afternoon.
• Users can create and configure their own templates for upload, or download an existing template, customize it, then re-upload and use it.
• Rather than keeping the off-the-shelf yourname.blogspot.com domain, users can register their own custom domain and point their Blogger page to that.

Sure enough, there are plenty of good reasons Blogger’s gained traction the past few years, but it’s become a hell of a crowded field and for anyone looking to grow their audience it’s increasingly hard to stand out.

The fact is, even if you’re posting killer, must-read content you’ve lost the lion’s share of readers before their first click with a page designed from a yawn-inducing Blogger template.

So besides great content, you’re going to want a template with distinctive design. Read on to follow this basic tutorial and create your own fresh Blogger template.

Create an HTML Template for Your Blog

Go to the Blogger homepage and log in with your Google info to create a new blog.  With or without a Google account the signup is pretty painless.

If you’re an existing user, you’ll also get the status of your current blogs.

Head to Layout and then Edit HTML

Developers love code, but sometimes even laymen want a peek under the hood.  If you’re up for it, just scroll down and click View Classic Template.

Keep in mind that Blogger can only use XML-formatted templates, so you’ll need to create a blank XML file on your hard drive as <Your Template name>.xml.

Now add the following code to your XML document:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>

Let’s start with the Blogger code to add a header element.

Generally, Blogger code starts with <b:

<b:include data='blog' name='all-head-content'/>

Now we’ll add the title of the blog and post:

<title><data:blog.pageTitle/></title>

Referencing the blog skin:

<b:skin>

And template details:

<![CDATA[/*
/* +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
Name: MacDevelopmentBits
Blogger template by Sourcebits Technologies
Author: Sourcebits Technologies
Author URL: http://www.sourcebits.com
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+- */

Now let’s hide the default navigation bar.

/*-- (Hiding the navbar) --*/
#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}

And add some custom CSS to stylize the blog.

/*-- (CSS for Blog ) --*/
body{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
color:#000000;
margin:0px;
padding:0px;
background:#dedede;
}

:focus {
outline: 0;
}

.clr{
clear:both;
}

.wrap{
margin:0 auto;
padding:0px;
min-width:1200px;
}

.head{
background:#cde3e4 url(your path to header image) repeat-x;
margin-top:-1px;
}

]]></b:skin>

If you don’t have a domain to host images then you can use Picasa, Flickr or any other image hosting services.  Just make sure that image viewing permissions are set to public.

To generate feeds and archives for your blog:

<script type='text/javascript'>

function rp(json){ document.write(&#39;&lt;ul&gt;&#39;);for(var i=0;i&lt;numposts;i++){document.write(&#39;&lt;li&gt;&#39;);var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k&lt;entry.link.length;k++){if(entry.link[k].rel==&#39;alternate&#39;){posturl=entry.link[k].href;break}}posttitle=posttitle.link(posturl);var readmorelink=&quot;(more)&quot;;readmorelink=readmorelink.link(posturl);var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]=&quot;Jan&quot;;monthnames[2]=&quot;Feb&quot;;monthnames[3]=&quot;Mar&quot;;monthnames[4]=&quot;Apr&quot;;monthnames[5]=&quot;May&quot;;monthnames[6]=&quot;Jun&quot;;monthnames[7]=&quot;Jul&quot;;monthnames[8]=&quot;Aug&quot;;monthnames[9]=&quot;Sep&quot;;monthnames[10]=&quot;Oct&quot;;monthnames[11]=&quot;Nov&quot;;monthnames[12]=&quot;Dec&quot;;if(&quot;content&quot;in entry){var postcontent=entry.content.$t}else if(&quot;summary&quot;in entry){var postcontent=entry.summary.$t}else var postcontent=&quot;&quot;;var re=/&lt;\S[^&gt;]*&gt;/g;postcontent=postcontent.replace(re,&quot;&quot;);document.write(posttitle);if(showpostdate==true)document.write(&#39; - &#39;+monthnames[parseInt(cdmonth,10)]+&#39; &#39;+cdday);if(showpostsummary==true){if(postcontent.length&lt;numchars){document.write(postcontent)}else{postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(&quot; &quot;);postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+&#39;...&#39;+readmorelink)}}document.write(&#39;&lt;/li&gt;&#39;)}document.write(&#39;&lt;/ul&gt;&#39;)}

var numposts = 5;
var showpostdate = false;
var showpostsummary = false;
var numchars = 40;

</script>

You can also insert external JavaScript files:

<script language='javascript' src='http://code.jquery.com/jquery-1.4.2.min.js' type='text/javascript'/>
<script type='text/javascript'>
//your code here
</script>

Now let’s replace the default Blogger favicon with a custom jobbie that suits our taste.

<link href='path to favicon' rel='shortcut icon' type='favicon'/>
</head>
<body>

Include your HTML code from the blog template created earlier and let’s add a widget to your header.

<b:section id='top35' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='MacDevelopmentBits (Header)' type='Header'>

<b:includable id='title'>
<A expr:href='data:blog.homepageUrl'><div class='logo'><data:title/></div></A>
</b:includable>

<b:includable id='description'>
<h1 class='slogan'><data:description/></h1> <!-- It fetches the description from basic settings page. -->
</b:includable>

<b:includable id='main'>
<div class='slogan1'>
<b:include name='title'/>
</div>
<b:include name='description'/>
</b:includable>

</b:widget>
</b:section>

Note that you can use multiple widgets in the template but they should have unique id= ‘Your Unique ID’ and maxwidgets=’No of widgets’

Now add navigation:

<b:include name='nextprev'/>

And the conditional statement to show/hide navigation is:

<b:if cond='data:newerPageUrl'>

<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>

</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>

</b:if>

And include feed links:

<b:include name='feedLinks'/>

To display content only on the main and archive pages, include this tag with your content:

<MainOrArchivePage>
<1-- Your Content for Home and Archive Page-->
</MainOrArchivePage>
</body>
</html>

Phew!  Almost there.  Now after saving the XML file, it’s time to upload to Blogger.

Back on the Layout tab, under Edit HTML, you’ll find:

After uploading, save the template so now you can edit the file online and preview changes as you go.

And feel free to experiment!  You can always hit the Clear Edits button to revert to the last saved version.

Let’s take a look at an outline of the page elements used in the template:

We can also place widgets with just a few clicks.

Clicking one of the Add a Gadget links drops you into a vast pool of Blogger and third party gadgets. Pick a gadget and add it by clicking the +, however many suit your needs.

And… VOILA!

Here’s a sample template we did up awhile ago with a basic but unique design, just FYI.

http://macdevelopmentbits.blogspot.com/

Feel free to drop us a line with any of your Blogger templating issues.  We’re happy to lend a hand. For that matter, we’re keen to discuss any Web development projects you’re interested in.  Get in touch any time!

Lots of compatibility issues occur when HTML developers deal with HTML-formatted emails generated using server side languages like PHP, PERL, JAVA, etc. in their projects.

From time to time you’ll find the odd gobbledygooked message in your Web-based email app, but generally speaking HTML-formatted messages render flawlessly on the Web.  On the other hand, desktop mail clients such as Outlook on Windows, Mail.app on OS X, and the rainbow flavors of desktop Linux (Ubuntu, Centos, and so on) routinely have rendering issues with HTML-based email.

Despite the incredible advances in modern software, why does this continue to happen?

The answer is quite simple: certain mail clients ignore certain HTML tags.  Now there’s no universal rule as to which ignores what, but the more you code the more you’ll learn, so for now let’s take a look at one case with Outlook.

For many users, email ‘stationery’ conjures up late 90s memories of Incredimail and a general, unsavory n00bishness.  But for marketing purposes a well-designed mail template, consisting of a stylish background image, thoughtful font selection, layout and copy equates to sales.  Perhaps thousands of people – from prospective clients to the media – will view mail on this template and associate it with your corporate brand, so perfection is key.

Now let’s focus on the background image.  Many HTML developers will begin by putting CSS styles in the header of the HTML email directly, or when that fails try working around the problem using div tags and inline CSS.  But either way the results are borked.  Why?  Because Outlook ignores the CSS property “background-image”.

After so much trial and error, the solution we finally decided on was a pure table-based layout with inline CSS – with the CSS being restricted to each individual table cell since Outlook does not ignore those.  We’ve found this not only renders properly in Outlook, but all the other major desktop and Web clients, too.

And here’s how good it can look.

For your reference, here are few examples of HTML tags that are compatible with almost all desktop and Web-based mail clients.

<table cellspacing="0" cellpadding="0" bgcolor="#6b6f7a">
    <tr>
        <td width="55" height="53" valign="top">
            <img src="http://domainname/media/mail/header_01.jpg" alt="" width="78" height="53" />
        </td>
        <td style="font-family: Arial,sans-serif;" width="546" bgcolor="#ffffff"></td>
        <td style="border-bottom: 1px solid #ffffff; padding: 0pt 15px; background-color: #b6d354; color: #ffffff; text-transform: uppercase; height: 43px; vertical-align: middle; font-size: 12px;"></td>
    </tr>
</table>

CSS style property -

word-wrap: break-all;

With the absence of a background tag, images can be used inside the

<table>

and

<td>

tags.

Happy HTML email  coding!!

Facebook APIs

Facebook provides both RESTFUL and Javascript APIs. A great number of client libraries are available for creating your web application, though Facebook provides official support for only a handful of them. We will be using Facebook’s official PHP 5 client and Javascript libraries.

FQL and XFBML

Before we look delve deeper into Facebook connect integration, let’s look at FQL and XFBML – the two essential components of the Facebook connect platform.

FQL (yes, Facebook Query Language!) allows you to query data from Facebook easily using a SQL like syntax. This can be a substitute to invoking specific API methods using the client library. As a quick example, if we want to retrieve the name of a particular user, we could do:

SELECT name FROM user WHERE uid=12345

Simple isn’t it? It’s important to note here that though FQL is very similar to SQL, it doesn’t fully conform to all aspects of SQL that you might come to expect. Take a look at the FQL documentation to find out about syntax support, and the various tables provided by FQL.

XFBML is a markup language provided by Facebook which allows you to embed Facebook based widgets and information into your page. By using XFBML tags, it’s much easier to embed information into the page, than having to query for it first (using FQL or an API call) and then displaying it in the application. For example, to display the user’s name, we do that simply by using the tag:

<fb:name uid="12345" />

With the basics out of the way, let’s get started on building a simple Facebook connect application using PHP.

Getting the API key

The very first thing you need to do when you are looking to make use of Facebook Connect is to apply for an API key. To get that, you need to sign in to the Facebook Developer app and create a profile for your web application.

Once you have chosen a name for your Facebook Connect application, and create the application, a profile will be created for your connect application within the Facebook Developer app. You can edit this profile to add in additional information about your application. Also, note that Facebook provides you with an API Key and a Secret, both of which you need to use while calling any FB Connect API method (for authenticating your request).

Although there are many fields, options and settions, you just need to provide Facebook with the URL of your Facebook Connect application, and you can get your application up and running! This can be done by clicking on the “Connect” link and filling in the “Connect URL” field:

When you are testing your application, it’s a good idea to place it under a sandbox such that only the developers have access to it. You can do that by going to “Advanced” tab and enabling the sandbox mode:

That’s it, we are ready to use Facebook Connect!

Creating the web app

Our sample Facebook Connect application will be really simple. Here’s the link to the demo (login using you FB account).

When the user visits the web app, we detect whether the user is already signed into Facebook. Facebook uses a single-on system – which means that if the user is alreadt signed into his Facebook account, we can detect that in our web application, and we can directly send the user along to the internal pages. In case the user is not logged in onto Facebook, we will give an overview of what our web application is about, and ask the user to login using Facebook Connect. Once the user is logged in, we will just display a list of his friends.

There are various ways of achieving this, but we will be using a mixture of XFBML, FQL and API calls to illustrate those concepts.

In our index.php, what we first need to do is to include the the official PHP client library for the REST API provided by Facebook. If you have not already download the PHP library, download it right here.

require_once 'facebook-platform/php/facebook.php';

The file facebook.php contains a class that we will be using to make all our Facebook API calls. As I have already mentioned, the API Key, and the Secret (which we obtained during the application registration above) are compulsory parameters for all API requests. So, for convenience, we can store this information on a config.php file, which we can include from all our application pages.

// config.php
// enter your application's API key and secret here:

$ApiKey = '12345667890';
$AppSecret = 'ABCDEFGHIJKLMNOPQRST';

Ok, with that out of the way, our next step is to initialise the Facebook class:

$facebook = new Facebook($ApiKey, $AppSecret);

If your $ApiKey and $AppSecret credentials match, we will subsequently be able to make calls to the Facebook API invoking the methods of the $facebook object. As we have discussed, we need to first check if the user is already logged into Facebook. We do that by checking the ‘user’ property of the $facebook object is set. If the user is logged in, $facebook->user will contain the logged in user’s Facebook ID.

if( !$facebook->user )
{
   // the user does NOT have a valid Facebook session
   // (i.e. not logged onto Facebook)
   // we will show some information about our app and ask the user
   // to login using FB connect:

   echo '<h2>Hey, this application will list all your friends on Facebook!
                But, you need to login using your Facebook account
                to continue!';
   echo '<fb:login-button onlogin="javascript:location.reload(true)">
           </fb:login-button>';
}
else {
   // show the user's list of friends (let's use FQL for this):

   $fqlQuery = "SELECT name FROM user WHERE uid IN (SELECT uid2 FROM
                       friend WHERE uid1 = $facebook->user)";
   $fbFriends = $facebook->api_client->fql_query($fqlQuery);

   if( $fbFriends == NULL )
   {
     echo "<p>Oh no, you don't have any friends on Facebook! </p>";
   }
   else {
     echo "<h3>Your friends are: </h3>";
     foreach ($fbFriends as $fbFriend)
     {
       echo $fbFriend['name'] . "<br />";
     }
   }
}

The above code block encompasses most of our simple application logic! It also goes to show how straightforward Facebook Connect really is, once you get the hang of it. We have used both FQL and XFBML in the code snippet. Let’s break it down and see what each code segment does.

echo '<fb:login-button onlogin="javascript:location.reload(true)">
               </fb:login-button>';

We are using XFBML above to render a Facebook connect login button for users who are not presently logged in. This button, when clicked, will open a pop-up window, which will allow the users to enter their Facebook credentials and log in.

Once they login, the current page will automatically refresh, and since the user has a valid Facebook session this time, $facebook->user will return the user’s Facebook ID. To enable XFBML, we need to include two Javascript snippets to be embedded onto the page:

<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/
                            FeatureLoader.js.php" type="text/javascript">
</script>

FeatureLoader.js.php is a lightweight file that helps bootstrap the rest of the Connect library. It’s required for any XFBML functionality, and must be placed before any other Facebook Connect scripts or API calls. We can either place it in the HEAD tag, or right after the BODY tag.

The other Javascript snippet that’s needed is:

<script type="text/javascript">
 FB_RequireFeatures(["XFBML"], function(){
 FB.Facebook.init("YOUR_API_KEY", "xd_receiver.htm");
 });
 </script>

This code snippet can be placed anywhere after the FeatureLoader.js.php. The snippet enables the use of XFBML. The file xd_receiver.htm creates a Cross Domain Communication Channel between third-party Web pages and Facebook pages. We need to create a xd_receiver.htm page with the following contents, and place it in the same directory as the main index.php file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Cross-Domain Receiver Page</title>
</head>
<body>
<script src="http://static.ak.connect.facebook.com
                   /js/api_lib/v0.4/XdCommReceiver.js?2"
              type="text/javascript">
</script>
</body>
</html>

For logged-in users, we use FQL to retrieve the user’s friends.

$fqlQuery = "SELECT name FROM user WHERE uid IN (SELECT uid2 FROM
                         friend WHERE uid1 = $user)";
$fbFriends = $facebook->api_client->fql_query($fqlQuery);

$fbFriends will return a NULL, if no result is found. If the query produces results, an array of resulting users is returned. We can traverse this associative array and retrieve the various properies which we have queried for. In our case we have only queried for ‘name’, so we can print the names as:

foreach ($fbFriends as $fbFriend)
{
    echo $fbFriend['name'] . "<br />";
}

Of course, we can retrieve lots of other details about the users (including a URL to a profile picture).

With that, we come to the end of our quick Facebook connect tutorial. Although our sample application is ridiculously simple in functionality, and we only scratched the basics of the Facebook Connect platform, Facebook Connect does allow developers to harness the full power of Facebook’s social features right from our application. You should check out the Facebook API documentation, and follow their development blog if you are serious about going for deeper levels of integration with Facebook.

You can download our demo files here.

Changing the default URL routing

As we have already seen, CI parses the URLs in the following format:

example.com/className/functionName/variable1/variable2

While this suits most of the times, sometimes we might want to tweak CI to handle things different. With a reference to the blog example we saw in the first part, say, we want to display the entries of a blog by accessing a URL along the lines of "example.com/post/postID". Here, we actually want the "postID" to be parsed as a variable rather than a function name.

CI allows us to make such tweaks by allowing us to write our own routing rules. These rules are defined in application/config/routes.php file in an associative array called $route . The key of the associative array will define the URI to be matched, and its corresponding value will be the destination URI to which the request to be routed to. Apart from providing two wildcard types ":num" (matches only number) and ":any" (matches any character), CI also allows you to use regular expressions to define the URI to be matched.

For example, to achieve the routing we discussed above, we simply do:

$route['post/(:num)'] = "post/show_post/$1";

The above rule routes any request to the URL "post/postID" (where postID is a number), to the standard CI URL "post/show_post/$1" where show_post is a function of the post controller class.

Graceful error handling

CodeIgniter allows you to generate custom error messages, which calls specific error templates.

CodeIgniter automatically shows a 404 error message for a missing controller. But, for generating a custom 404 error message for a missing page internally, we can do that by calling:

show_404('path_to_missing_page');

One place where you might be needing this is when you are serving images via a controller that parses the image ID passed as a paramter and fetches it from a secure storage to display it. The template for the 404 error page is found in application/errors/error_404.php file.

If you want a more generic error message, you can use the show_error function for that. We can specify both the error message, and the HTTP status code when we call this function. For example,

show_error('Hey, this is a 500 error message!', 500); 

The template for this error message is found in application/errors/error_general.php file.

Managing multiple applications

Although so far, we have used CI to handle just a single application, we can indeed have multiple applications using the same CI installation. To do this, we need to create a folder for each of our applications – currently our application resides within the "application" folder. So, say we have two applications called "app1" and "app2", we can structure the folders this way:

path_to_codeigniter/app1/
path_to_codeigniter/app2/ 

Copy the contents of the "application" folder (containing the views, controller, etc.) to these new folders. In addition, each of our application will need an "index.php" file that defines the path to the system and the application folders. So, we have to copy the "index.php" file from CI’s root folder to the app1 and app2 folders, and change the $system_folder and $application_folder variables to:

$system_folder = "../system"; 
$application_folder = "../app1";    // (use "../app2" for app2)

Caching

To achieve better performance, it’s important we use caching effectively. This is especially true for high traffic, content oriented websites. To reduce the strain on our server, CI allows us to serve a static version of a page. Caching can be enabled on a per-page basis. Once we have enabled caching for a page, the first time the page is loaded, a static version of the file will be stored in system/cache folder. On subsequent page refreshes, this static version of the page will be served.

To enable caching of a particular page, we simply call this function from a controller:

$this->output->cache($num_minutes); 

$num_minutes defines how long (in minutes) we want the cached page to be served. The function can be called from anywhere within your controller. One the $num_minutes has expired, a new version of the cached page will be written to the cache.

Benchmarking your application

If you are interested in measuring the performance of various parts of your application, CI’s benchmarking class will be handy. The benchmarking class is automatically loaded by CI. To calculate the elapsed time between two points, we simply do:

$this->benchmark->mark('time_start');  // start timing   

 //...all the code goes here... 

$this->benchmark->mark('time_end'); // end timing
echo $this->benchmark->elapsed_time('time_start', 'time_end'); 

To find out the total elapsed time, we can use the same elapsed_time function without any parameters:

echo $this->benchmark->elapsed_time();

Extending CI’s helper classes

CodeIgniter provides various helper classes, some of which we used in our to-do list application. To extend (redefining existing methods or adding new methods) a helper class, we have to create a file in the application/helpers folder with the exact name of the existing helper class (in the system/helpers folder), but prefixing it with a "MY_". So for e.g., if we want to extend the URL helper class (which is named url_helper.php), we have to create a file named "MY_url_helper.php" in the application/helpers folder.

Once we have done that, we can add either new methods to the file, or redefine an existing method (by using the same function name and parameters), which will then over-ride the default method defined in the helper class.

Beyond CodeIgniter - Kohana framework

Although CodeIgniter is an extremely agile and light-weighted framework, CI’s support for PHP 4 means that quite a few "hacks" were used to make it work in PHP4. With the emergence of PHP5, many of these hacks (such as for auto loading of classes), have become unnecessary as PHP5 supports them cleanly, out of the box. Kohana, which began as a fork of CodeIgniter, is a PHP framework built exclusively for PHP5. It is also an entirely community driver project (unlike CodeIgniter, which is managed by EllisLab). If you don’t need support for PHP4, you really should take a look at Kohana. It’s very similar to CodeIgniter, and you should not have too much trouble finding your feet in it.

With that, we come to the end of our three part series on CodeIgniter. If there is something I have left out, or was unclear about, please do mention them in the comments.

Okay, the first thing you have to do is to download and extract the latest build of CodeIgniter. Next, download the controllers, models and views that I have used in this sample todo list application. You should refer to these files as you read the tutorial. Here is the demo of the sample application (use “demo” as username and password).

Directory structure

All the files related to our application will be placed in the "system/application" folder:

As you can see, we have to place our controllers, views and models in their correspondng /controllers, /views and /models directories. Initially, we will have a sample controller (Welcome) in the /controllers directory, and its corresponding Welcome view in the /views directory. The model directory will be empty.

The /config directory consists of various files which will help us fine-tune the CI framework to our development environment. We will ignore the other directories in the /application directory for the time being.

Some basic configuration first

We need to modify some of the configuration files in the /config folder to set up the framework:

• database.php – this is where we will be filling up our database connectivity details. The file has ample comments to help you fill in all the necessary details correctly!
• config.php – we have to fill in the path to our CI root folder here in the variable: $config['base_url']
• autoload.php – this file allows us to autoload any libraries or helpers that CodeIgniter provides us so that they are available across the entire system. We will be using the session library and the url helper class, so initialise the $autoload['libraries'] and $autoload['helper'] variables to:
  
  • $autoload['libraries'] = array(‘database’,'session’);
  • $autoload['helper'] = array(‘url’);

By default, all CI URLs will have a ".index.php" included in them. E.g. example.com/index.php/blog/edit

To remove this, we can optionally place a .htaccess file in your CI root folder with the following content:

RewriteEngine on
RewriteCond $1 !^(index\.php|images|css|scripts|robots\.txt)
RewriteRule ^(.*)$ index.php/$1 [L] 

With the above rule in place, all requests other than those for index.php, images, css, scripts and robots.txt are treated as a request for your index.php file.

CodeIgniter session class

Before we go further, let’s have a brief review of CodeIgniter’s sessions class, which will be using in this application to keep track of the user’s session. CI’s session class can handle user session data stored using either cookies or in a database. CodeIgniter’s session class does not utilize native PHP sessions. To make use of the session class in our application, we must either initialize it in a controller’s constructor, or we have to auto-load it so that it will run in the background, and will be available for us across the entire system. To load the session class manually in the controller’s constructor, we do that by calling:

$this->load->library('session');

To auto-load the session class, we have to open the file "application/config/autoload.php" and add the item to the "autoload" array as I have mentioned in configuration step above.

Reading and writing data to the session class is a breeze! To write data to a user’s session, we simply do:

$this->session->set_userdata('some_variable', 'some_value'); 

And, to retrieve the data again, we just call:

$item = $this->session->userdata('item');

Apart from that, CI’s session class by default, provides us with the following information:

• user’s unique Session ID
• user’s IP Address
• user’s User Agent data (the first 50 characters of the browser data string)
• user’s "last activity" time stamp

Our application features:

With that, out of the way, let’s get started. Our to-do-list application will have the following "features":

• a simple user sign up and login system
• session management using CI’s session class
• a single to-do list which allows multiple users to add and delete items using AJAX

Database schema

Given the rather simple nature of our application, it’s not too difficult to identify what database tables we will be needing upfront. We will need two tables:

• users : stores the user id, username and the hashed password.
• items : stores the to-do list items and their attributes like item_id, user_id (ID of the user who created it)

CREATE TABLE IF NOT EXISTS `items` (
 `item_id` bigint(20) NOT NULL auto_increment,
 `user_id` bigint(20) NOT NULL,
 `item_text` varchar(255) NOT NULL, `is_done` int(11) NOT NULL,
 PRIMARY KEY  (`item_id`)
 ) ENGINE=MyISAM DEFAULT CHARSET=latin1; 

CREATE TABLE IF NOT EXISTS `users` (
 `user_id` bigint(20) NOT NULL auto_increment,
 `username` varchar(100) NOT NULL,
 `password` varchar(100) NOT NULL,
 PRIMARY KEY  (`user_id`)
 ) ENGINE=MyISAM DEFAULT CHARSET=latin1;

Setting up the above tables in the database which you have mentioned in your database.php configuration file above.

Here is a breakdown of all the controllers, views and model we will be needing for this application. I will explain the purpose of each of them, as we go about tackling them.

The login controller

The login controller first checks whether the user is already logged in – in which case, we simply redirect him to the dashboard. This, we do by checking whether the "logged_in" field exists in the user’s session data. We are using CI’s session class for this:

if( $this->session->userdata('logged_in') )	// user already logged in
{
	header("Location: " . base_url() . "index.php" );
	die();
}

The login controller serves two needs:

• render the login form initially for a user who wants to sign in to the system
• when the user submits the login form, authenticate the user and either redirect him to the dashboard or show an error message

When the controller is called, we can find out whether we should render the login form, or treat the request as a login form submission by checking for the POST variable ‘login’, which is the name of the "login" submit button in the login form.

if( $this->input->post('login') )
{
	// treat this as a login form submission
}

else {
	// render the login form
}

If it’s NOT a login form submission, we simply load the login_view defined in application/views/login_view.php. This file will render the login form.

On the other hand, if its is a login form submission, we first retrieve the username and password variable from the POST request. We then load the Users_model class, and use its validate() function to authenticate the user. If the user’s username and password match, his user_id field from the database is returned. Else, a -1 is returned. For a valid user, we initialise his session by:

$newdata = array(
 'user_id'  => $user_id,
 'username'  => $username,
 'logged_in' => TRUE
 );

 $this->session->set_userdata($newdata);

We then redirect him to the dashboard. If the username and password provided do not match, we load the login_view by passing a variable ‘$message’ that contains the error to be displayed.

The Dashboard

The welcome controller is the default controller for CodeIgniter. It will already be found in the /application/controllers directory, and this is the controller that will be called when you access our application’s URL directly without using any URL segments, as discussed in the previous article. Let us just make use of this controller for our application’s dashboard. Assuming the user has already logged in successfully, let’s build our application’s dashboard – the page the visitor first sees after logging in. In our case, it will be a page which will display a set of to-do items, and in addition, provide a way to enter a new to-do item or modify the done/not-done status of any existing item using AJAX. Here is the index() function of the welcome controller.

function index()
{

	if( !$this->session->userdata('logged_in') )	// user NOT logged in
	{
		header("Location: " . base_url() . "index.php/login" );
		die();
	} 

 	$this->load->model('items_model','items');
        $data['all_items'] =
$this->items->fetch_all_items($this->session->userdata('user_id'));
 	$this->load->view('dashboard_view',$data);
 }

The welcome controller will check whether the user is logged in (using the session data set earlier in the login controller). If the user is not logged in, or his session has expired, we will redirect him to the login page. The base_url() function belongs to the URL helper that we autoloaded in our configuration, and it returns the base URL of our application (including the "/" at the end of the URL). Otherwise, we will load the Items_model class which will be used to interact with the items table in the database. The fetch_all_items() function of the item_model class will fetch all the todo items of this particular logged in user from the "items" table. The only other thing to note here is that we are using the session class to retrieve the user id of the user that we have stored as session data when the user successfully logs in to the system.

function fetch_all_items($user_id)
{
  // fetch the to-do items of the user identified by $user_id:
  $query = $this->db->query("SELECT * FROM items WHERE user_id = $user_id");
  return $query->result();
} 

The index() function of the Welcome controller then loads the view "dashboard_view", defined in "dashboard_view.php" in the system/application/views directory. When the view is loaded, we are passing to it the todo items we fetched from the database using the Items_model class. The view then renders all the to-do items on the page.

dashboard_view.php links to an external stylesheet (todoapp.css) and a JavaScript file (todoapp.js). The AJAX functionality is defined in the JavaScript file. In our application, we are using AJAX to add a new todo item to the list, and also update the done/not-done status of any of the todo items. The function addNewItem() in the JavaScript file is bound to the click event of the "Add" button.

The addNewItem() function, when fired, makes an AJAX POST request to the "add" controller which will handle the addition of a new todo item. The add controller will return the ID field of the newly added todo item in the database. If the operation is a success (if the ID returned in not -1), we simply append the new todo item (along with a checkbox) to the bottom of the existing items. We also clear the text in the textfield.

The updateItem() function is bound to the click event on each of the checkboxes. When fired, it checks whether the checkbox that the user clicked is selected or not, and it sends this information to the "update" controller.

The add controller

In all the controllers, we will have to first check if the user is logged in, before we carry out any action. For a valid user, we retrieve the text of the new todo item to be added (from the POST variable sent to the script) using:

$this->input->post('item_text',TRUE)

The second parameter is set ‘TRUE’ to indicate that the input must be filtered to negate XSS (cross site scripting) attempts. XSS is a major problem faced by many web applications, and as a golden rule, any input which might potentially get rendered on the front end must be passed through an XSS filter that escapes/strips out the dangerous elements. As an added precaution we also check whether the todo item’s text is not empty, and if all is clear, we load the "Items_model" class once again, and call the add_item() function to add the todo item to the database. The add_item() function uses another handy function that CI provides, to escape the data by adding single quotes around the data:

$item_text = $this->db->escape($item_text);

The update controller

What the update controller does is similar to the add controller and also fairly straight forward. It simply retrieves the POST variables sent to it (the ID of the item which is to be updated, and its updated status). The update controller then loads the Items_model and invokes the update_item() function to peform the update.

The logout controller

The logout controller destroys the session data of the user, and then redirects him to the login page once again.

$this->session->sess_destroy();
header("Location: " . base_url() . "index.php/login" );

User registration

Finally, let’s get to the user registration, which is handled by The Register controller. First off, I should mention here that for the sake of simplicity, I have implemented a very simple registration form, with absolutely no spam control!

The Register controller is similar to the Login controller in that – it again serves both the purposes of rendering the registration form, and as well as handling the form submission. The register_view simply asks the user to pick a username and password. The <form>’s action attribute points to the URL of the register controller.

When the form is submitted, the Register controller first checks to see that both the username and password fields are not empty. It then loads the "Users_model" which handles all database operations concerned with the "Users" table. We will invoke the is_valid_username() of the Users_model to see whether the username that the user has chosen already exists (the function returns a -1 if no such username is found on the system). If it a username is indeed found (in which case the function will return the ID of the user), we will initialise a $message variable with the text "That username already exists." and load the register view again, by passing the $message variable for rendering.

if( $this->users->is_valid_username($this->db->escape($username)) != -1 )
{
	// username already exists
	$data['message'] = "That username already exists.";
}
...
$this->load->view('register_view', $data); 

If the user has chosen a non-existing username, then we go ahead and add the user to the database by calling the Users_model’s add_user() function, by passing the username and his hashed password. We are simply using a plain SHA1 hash here to store the password (which is again considered not secure enough without salting, but enough for our simple application). Once the user is added to the MySQL database, we use the nifty "mysql_insert_id()" PHP function to retrieve the auto increment ID field of the user row just added to the "users" table. After a successful account creation, we initialise the user’s session and redirect him to the dashboard, so the user can start using the application right away.

With that, we come to the end of this second part of CodeIgniter tutorial.

I am assuming that you are already familiar with the MVC pattern, so let’s briefly see how it applies to a typical CI application.

View – A view is simply the content which a user sees rendered on a any page. It can be either a full web page, or even code snippets like the header or the footer of a web page. The view’s primary aim is to render data on the screen, which will be passed to it by a controller.

Controller – A controller handles the actual application logic. It acts as an intermediate between the View (front end) and the Model (the data). The controller, typically fetches records from a database via a model class, and then passes it to a view for rendering.

Model – A model is concerned with reading and writing data to and from a data souce – in our case, a database. It essentially consists of functions which help you isolate database operations from your core application logic. In CodeIgniter, a model is not necessary, should you wish to manipulate the database from a controller itself.

The URL structure

One great thing about CodeIgniter is that it generates URLs which is search engine friedly and also extremely logical for programmers. Instead of using query strings (like index.php?action=display&id=223) to pass variables, it uses a very semantic segment based URL structure. By default, the CI URLs are parsed this way:

example.com/controller_class_name/function_name/ID1/ID2

As we can see, the first segment of the URL refers to the name of the controller class, the second part referring to the function in the controller that should be invoked, and the subsequent parts representing various parameter values that can be passed to the function. Having understood that, it’s a good time to see the structure of a controller class.

Let’s take a simple example of a blog. Let us say we want a page where we want to show the entries of a blog, we can have a controller "show" which will be defined this way:

class Show extends Controller {

	function index()
	{
		// access a model class to fetch all the blog posts
			...
		// invoke a view and pass to it the blog posts to render
	}
}

There are a couple of things to note here:

• all controller classes begin with a capital letter in CI – i.e Show
• we will be saving the above file as "show.php" – the file name is essentially the same as the class name, except that the class name’s first character has to be in capital case.
• the index() function will be the default function of the class – much like your main() function in a C program!
• you will access the above controller with the following URL: example.com/show/index or just example.com/show

Remember that the first segment refers to the controller name and the second segment refers to the function name. Since the index function is the default function for the controller, we can leave it out from the URL. We can add another function to the class, called entry – which will display a specific blog entry identified by an identifier:

function entry($entry_id)
{
	// access a model class to fetch the blog post with ID $entry_id
		...
	// invoke a view and pass to it the blog post to render
} 

Now, to display a particular blog entry, we access the URL: example.com/show/entry/123 , where the "123" is (say) the ID of the blog entry to be rendered. Pretty easy, right ?

Now, let’s define a CI model class. Continuing with the same blog example, let’s say that the name of the model class which will handle our blog entries is "Entry_model":

class Entry_model extends Model {

	function Entry_mode()
	{
		parent:Model();
	}

	function fetch_post($entry_id)
	{
		// do your database query and return the record...
	}
}

Now, to invoke the method fetch_post() from the controller, we do:

$this->load->model(Entry_model');
$blog_entry = $this->Entry_model->fetch_post($entry_id); 

Again, it’s very intuitive. We load the model class, and then, invoke a method from the model class which will return the blog entry record. The naming convention for the model class is the same as that for a controller – the class name should start with a capital letter. Thus, the above model class is called "Entry_model" and it will be defined in the file "entry_model.php".

Finally, let’s get to how CodeIgniter handles the View. As I have already stated above, CI is very flexible in how you want to define a view. A view can be a whole page, or page fragments like header, footer, navigation, sidebar etc. It’s always a good practise to logically break down the layout of a web page into a number of components, as it promotes code reusabilty.

As for now, for simplicity, let’s just say that our blog entry will be rendered using a single view. So, we will basically have a .php file that contains the structure (design) of the blog and which will display the blog entry that is passed to it from the controller through the form of variables. Let’s say our view (which display a blog entry) is called "entry_view.php":

<html>
<head>
<title>Showing a blog entry</title>
</head>
<body>

<?php
	echo "<h1>$entry_title</h1>";
	echo $entry_text;
?>

</body>
</html>

When we invoke the view from the controller, we will pass in the variables $entry_title and $entry_text. Here is how we invoke the view we have defined above from a controller:

$data['entry_title'] = "A blog post title";$data['entry_text'] = "Lorem ipsum dolor sit amet...";$this->load->view('entry_view', $data); 

I have shown a very simple example of how data is passed from the controller to a view above. The variables that will be used in the view are defined as elements of an associative array. To load a view, we call it by its filename – we don’t have to use ".php" extension unless we are using some other extension for the view files.

With that, I have covered the basic skeleton of a CI application. Stay tuned for the next article, in which I will walk you through on how to build a simple application using CodeIgniter, and also cover some more advanced concepts along the way!

However, I have often noticed that many people (unless they genuinely needed help), either back away from submitting their comments (when they are confronted by a large textarea on the contact page), or simply move away from the site as the contact page loads.

Today, let’s spice things up a bit by using jQuery to load a lightweight inline contact form. So, instead of loading a separate contact form page when the “contact us” link is clicked, we will just have a small textarea opens up dynamically right next to the link – so that the user can type his feedback and it can be submitted rightaway using AJAX. Our main aim here is to encourage more users to provide feedback and although I don’t have actual data to prove whether an inline form will be any more helpful, I have used it in a couple of places, and it did appear to bring in more casual feedback about the site, features etc. Ok, let’s get started. Here is the demo of how it will all look in the end.

Okay, first let’s have a hypothetical page in which we want to make use of the inline contact form. The call of action, is obviously the “We would love to hear your feedback” link, which has the id “a_inline_form”. Initially, this hyperlink will simply point to the default contact form page. We will have the inline form in a DIV with id “inline_form”, which will be hidden initially.

#inline_form {
		/* keep the inline form hidden initially */
		display: none;

		position: relative;
		padding: 10px;
		width: 260px;
	}

We will now use jQuery to “hijack” this link and fire our inline contact form into action:

 // toggle visibility of inline form when link is clicked
$("#a_inline_form").click( function() {

	$("#inline_form").toggle(200);

	$("#inline_form").css( "left", $("#a_inline_form").position().left +
                                                $("#a_inline_form").width() );

	$("#inline_form").css("top", "-40px");

	// get cursor to texarea, ready to receive keystrokes!
	$("#inlinecmt").focus();	

	// return false to prevent default link behaviour
	return false;
});

The above code is fairly self explanatory – I just want to describe how we are positioning the inline form. jQuery allows us to very easily retrieve the left offset position of an element (even when it’s not absolutely or relatively positioned!) using “$(elem).position().left” property.

In this example, I wanted to place the inline form right next to the comment link. To do that, we can simply set the “left” CSS property of the inline form to a value that’s the sum of the left offset of the feedback link and the width of the comment link – this will of course place the inline form right next to the feedback link. In addition, we also set the cursor focus to the inline form so that the textarea is ready to receive input right away.

We have a simple “ok” button underneath the textarea which will be used to submit the form. We will once again “hijack” the form submit event using jQuery and perform the form submission using AJAX. I have omitted the actual form submission and processing here.

$("#inline_form").submit( function() {

	// make your ajax POST call here...

	$("#a_inline_form").after('<span class="msg">Thanks for the comment!' +
                               '</span>');
	$("#inline_form").hide(200);

	setTimeout( '$(".msg").hide()', 2000);

	// return false to prevent default form submission behavior
	return false;
});

Now, once the AJAX call is successful, we need to notify that to the user and thank him for the feedback. I have chosen to do that by inserting a message right after the feedback link and hiding it (using setTimeout() ) after 2 seconds. Don’t forget to hide the inline form too. With that, our inline form is up and ready to go!

This is by no means a replacement for the traditional contact form, but it will be handy in places where one requires casual feedback from users. And as you would have already noticed, we have used JavaScript here unobtrusively – so in case the user has JavaScript disabled, the feedback link merely loads the default contact page.

The simplest way to simulate real time streaming of information is to poll the server every N seconds, and to display the information (if any). The number N will determine how real time the resulting stream of updates will look to a viewer. This model is simply called, polling. Now, polling is bad because it repeatedly connects and disconnects to the server, which when scaled across thousands of users, cause severe strain on your server. This problem becomes even more apparent in cases when the poller returns with empty data most of the times.

The jQuery snippet below polls the server every 3 seconds for new information and displays it in a simple alert box.

function callComplete(response) {
	alert("Response received is: "+response);
};

function connect() {
	// when the call completes, callComplete() will be called along with
	// the response returned
	$.post('/path/to/script.php', {}, callComplete, 'json');
};

$(document).ready( function() {
	setInterval(connect,3000);
}

Long polling

This technique is an optimisation of the traditional polling method. In long polling, once the client makes a connection with the server (via JavaScript), the server waits for the data requested by the client to become available. If it’s not immediately available, the server (being a PHP script for example) loops and sleeps. When the data is available, the server returns the data to the client and the connection closes. When this happens, the client again reconnects with the server (in the callback function of your original AJAX request).

This method is definitely an improvement over mindless polling, as we will avoid repeatedly opening and closing connections when data is not available for long periods of time. However, it is important to be aware of the server side technical limitations of long polling. Since connections might be kept alive for long durations of time, your web server must be capable of handling such large numbers of simultaneous connections. We talked about how certain light weight webservers outperformed Apache in this particular area in the last article.

Let’s look at a very simple jQuery/PHP long polling example:

function callComplete(response) {
	alert("Response received is: "+response);
	// reconnect to the server
	connect();
};

function connect() {
	// when the call completes, callComplete() will be called along with
	// the response returned
	$.post('/path/to/script.php', {}, callComplete, 'json');
};

$(document).ready( function() {
	connect();
}

In the PHP end, we do:

while(1) {

	$data = "some data fetched from the DB";

	// if we have new data, return it to the client
	if(!empty($data)) {
		echo json_encode($data);
		break;
	}

	sleep(3000);	// we sleep for 3s and check again for data
}

COMET streaming

COMET is a generic term that refers to the use a persistent HTTP connection for the web server to "push" data to the client as and when it arrives. If you have ever wondered how Gmail is able to notify you of a new email message seconds after it is sent, this is what they use to push the new email notifications to the front end.

However, as often is the case with JavaScript, the cross browser compatibility issues mean that a host of methods (targeting different browsers) are used to implement such an interaction. The upside is that these methods rely purely on JavaScript, and hence not dependent on any specific client side plugin. A detailed exploration of these different methods and their caveats is beyond the scope of this article, but let’s get a quick overview of these methods.

Hidden iframe technique: A hidden iframe html element is embedded onto the page, which points to the URL on the server which handles the persistent connection. The server will then push the data as it arrives to the iframe, using <script> tags. This content is then channeled to the parent window using JavaScript. This method is based on the fact that many browsers evaluate JavaScript chunks as they are received, even if the complete page has not finished loading yet. However this method is prone to cause the "loading" icon or status bar message to appear all the time (since we are using a persistent HTTP connection, the browsers tend to believe that the page is yet to finish loading fully).

XMLHttpRequest using Interactive readyState: This method is targetted towards Firefox, Safari and Chrome, which support the interactive readyState property of the XHR object, and fires events every time a chunk of data is received from the server.

Server-Sent events: This is a feature (from the WHATWG Web Applications 1.0 specification) supported by Opera since v9, using which we can push events from the server directly to the visitor’s browser. Refer to this article on how it’s used.

As you can see, it’s quite a mouthful, and hence implementing COMET streaming which works uniformly across all major browsers is not a task for the faint hearted (not forgetting that the webserver must also be able to handle a large number of persistent connection). The good news is that quite a lot of the hard work has already been done for you. There are various opensource COMET servers and client libraries which you can use to deploy a COMET application pretty safely. Here are a few of them for your exploration:

Orbited: "Orbited is an HTTP daemon that is optimized for long-lasting comet connections. Orbited allows you to write real-time web applications, such as a chat room or instant messaging client, without using any external plugins like Flash or Java. "

Cometd: "Cometd is a scalable HTTP-based event routing bus that uses a Ajax Push technology pattern known as Comet."

Meteor: "Meteor is an open source HTTP server, designed to offer developers a simple means of integrating streaming data into web applications without the need for page refreshes."

Comet Pi: This is a standalone JavaScript library which you can use to handle the various cross browser issues that COMET causes. You can use pi.comet with any serverside language.

There is of course no denying that Apache is indeed an old war horse, and an extremely robust and mature one at that. But, even as stable as Apache is, it has one main drawback – it occupies a large memory footprint due to its request-per-process model, and is therefore mediocre at handling multiple concurrent requests when you have a limited RAM. This can be a problem when you are starting out small, with a rented 256 MB VPS for your application. Even if you are a big player, light weight Apache alternatives can help increase the throughput of your servers. Youtube, for instance, was using Lighttpd, a light-weight web server to serve millions of videos everyday (prior to their acquisition by Google).

Ok enough digressing, let’s now take a look at some of the open source alternatives to Apache.

Lighttpd

Lighttpd, pronounced as Lighty, is a single threaded web server optimized for a large number of keep-alive connections, which is often a requirement for high traffic web applications. It was originally developed by the German programmer Jan Kneschke to solve the C10k problem (handle 10,000 parallel connections using a single server). Apart from Youtube as I have already mentioned, Wikipedia, Meebo and Sourceforge all use Lighttpd. Lighttpd is rich with features, and offers mod_rewrite (URL rewriting), FastCGI support, HTTP compression, amongst many other features. I was able to install and configure Lighttpd in a few minutes, and it is extremely light-weight (less than 1MB). I was able to get PHP/MySQL running in a couple of minutes, using the FastCGI interface.

One drawback, which I have seen repeatedly mentioned in many forums and blogs on the web (I could not verify these claims with my own tests), is that Lighttpd seems to suffer from memory leaks – which often required scheduled server restarts.

Nginx

Nginx, pronounced as Engine-X, is a web server originating from Russia, and is written by Igor Sysoev. Unlike Lighttpd, Nginx is not a single threaded webserver (it instead uses a single master process which delegates work to a small number of worker processes), but is another popular light weight web server alternative. It is supported by more than 20% of Russian virtual hosts, and is gaining lots of attention these days in other parts of the world too.

Nginx is excellent at serving static files and also supports reverse proxying. Like Lighttpd, I was able to get Nginx up and running in a few minutes. However, it does not come up with default FastCGI support – so getting PHP/MySQL working was a little tricky. It involves spawning a FastCGI process manually. I found this tutorial helpful.

Erlang based alternatives

Erlang is a concurrent programming language designed by Ericsson to support distributed, soft real time applications, which has been opensourced since 1998. I definitely want to write more about how scalable Erlang is, but this is not the article for that. So, let’s just say that Erlang is tailor-made for high demand applications which need to handle multiple concurrent connections – like a web server.

YAWS (Yet Another Web Server) and Mochiweb are two Erlang based web servers which I found to be highly scalable and light-weight.

A load test conducted matching Yaws against Apache found that Apache failed at 4,000 concurrent connections, while Yaws continued functioning with over 80,000 concurrent connections (source). I did have some trouble installing and configuring YAWS though. The documentation is scarce, to say the least.

Mochiweb is actually an Erlang library for building your own light-weight HTTP server. Don’t be put off by that statement! A simple server can be built with just a few lines of code. I installed and tested Mochiweb too, and I found it pretty easy. If you are interested, here is a tutorial which I found helpful.

So should you ditch Apache?

This decision depends on a number of factors. Like I have already stated, if you want to make the best out of the limited resources you have, then a light-weight web server is definitely advantageous. However, from my experience with playing with the above alternatives, if you do decide to go with one of them, you should be prepared to roughen it out. Poor documentation and support (the mailing lists and forums are generally helpful, but you can never completely rely on them when you are suddenly facing an issue in a production environment) could end up making things difficult for you. Don’t get me wrong, I am not saying that these servers are not production-ready yet (they are pretty stable), but there is always an off-chance you might just hit upon some snag. In that case, you probably have to roughen it out.

A reasonable choice would be to front Apache with one of these light weight web servers. In effect, you can use them for load balancing. Using reverse-proxying, you can handle the static files (like CSS and images) using a light weight web server, and route the dynamic requests to Apache.

So, in future, I hope you will consider an Apache alternative, should your needs be better satisfied by a light-er web server. If you have experience using any of the above alternatives, do share your views in the comments!

So, instead of looking for a pure AJAX solution, I decided to implement this functionality by using a combination of AJAX (for the localhost) and a traditional PHP POST request (for the web server). The trick here is to execute the AJAX call before the form is submitted – by catching the form submission event using JavaScript. Once the AJAX call is successful, we allow the default form submission to take place. In case there is an error with our AJAX call, we should stop the propogation of the traditional form submission too.

Ok, so let’s start off with a simple example – a no-frills form with a few fields.

<form method="post" id="webform" action="http://www.example.com/path/to/PHPscript.php">

<label for="firstname">first name:</label>
<input type="text" name="firstname" id="firstname" value="" />

<label for="lastname">last name:</label>
<input type="text" name="lastname" id="lastname" value="" />

<label for="email" id="l_email">email address:</label>
<input type="text" name="email" id="email" value="" />

<input type="submit" name="Submit" id="submit_butt" value="Submit" />
<input type="reset" />

</form>

When the above form is submitted as it is, the form contents will be sent to the PHP script in the webserver. As I mentioned earlier, what we need to do now is “catch” this form submission event and insert our AJAX call before that. Let’s see how we can do that now. We will be using jQuery for our JavaScript needs.

$(document).ready(function(){
$("#webform").submit( function()
{
var success = -1;

$.post("localScript.php",
{
firstname: $("#firstname").val(),
lastname: $("#lastname").val(),
email: $("#email").val()
},

function(response){

if(response.status == "0")
success = false;
else
success = true;

}, "json");

var d = new Date();
var t = d.getSeconds();

while(success==-1)
{
var d = new Date();
if(d.getSeconds() - t > 4)
{
success = false;
break;
}
}

return success;
});
});

We set-up an event handler using jQuery, which fires whenever the form is submitted. We then make an AJAX call to the localhost to submit the form contents. We have a callback function which checks the status of the AJAX call. In case, any error occurs on the localhost, an error code can be returned (in our case, the status value will be 0) and we have to stop the form submission by returning “false” from the event handler function. This will stop the default action of the submit button, i.e. it will prevent the HTTP form submission.

This is achieved using a hack. Since the script will not wait for the callback function to return, the next statement, i.e. the “return” statement will be executed immediately after the $.post() call is made to the server. However, we cannot return from the function without knowing whether the operation on the backend succeeded or not. Since, JavaScript does not natively have any sleep()-like function, we have to force our script to get into a blocked state using a while() loop. We then manually terminate the while loop if we did not hear back from the server within a “few” seconds. In our example we have defined the timeout to be 4 seconds. In case we don’t hear from the server within this time, we will terminate the form submission by returning a “false”. This elaborate hack is required to ensure that we do not proceed to the next stage without knowing what happened to the data we submitted to the localhost.

If everything goes well in the localhost, the contents of the form will be processed and stored in the localhost database by the PHP script we have called using AJAX. The submit event handler will then return “true”. This would in turn cause the form to be submitted to the PHP script on the remote server, as defined in the action attribute of the <form> tag. Once the form is submitted, the browser requests, and loads this PHP script. The PHP scripts recieves the form contents as POST variables and saves them (by perhaps, storing them in a database).

We are not done yet, though. We still have to send the user back to a page on the localhost once the PHP script has finished processing and storing the form contents. We do that by:

$redirect_url = "http://localhost/path/to/some/page";
header( 'Location: ' . $redirect_url );
exit;

It is important that the header() is called before any actual output is sent to the browser. For example, you should not have any echo statement, or raw HTML output before calling the header().

That’s about it! Now we are really done! In most cases, you will notice that this entire process is so slick that your user would hardly notice the redirection from the page on the webserver to the page on the localhost! I have put together a barebones HTML page containing the code fragments above, which you can download for your reference and use from here.

As a result of the already proven TYPO3 CMS, the upcoming 5th version of the system is bringing a solid PHP framework, which can be used apart from the whole system for developing applications of any kind.

The FLOW3 subsite stats, against what’s commonly seen out there, FLOW3 is not a pick’n'mix store of motley components. It’s a framework which helps you with the infrastructure of your application. Object Lifecycle Management, Package Management, Resource Management and Security are on his home field. Real business logic is left over to third-party packages.

All the most common features we can find in other PHP frameworks are going to be provided by FLOW3, like MVC architecture, Validation, Filters, Persistence Object Manager and much more.

Next week, I’ll post a getting started with a simple application and provide my personal review of this framework, which – OMHO – is going to rock!

The new website looks more attractive and organized. 10 minutes tour of new website can be found here. In contrast with the previous version, this new website uses rich content presentation, including JavaScript.

The website uses jQuery 1.3.2, a very known and popular JavaScript library, instead of pure JavaScript. This is very good news and a big leap towards streamlining the use of JavaScript frameworks, specially in case of jQuery. In addition of core jQuery framework, beta.w3.org also uses jQuery plugins (e.g.: http://malsup.com/jquery/cycle/), to enhance the user experience.

The biggest news of the day is w3.org beta website doesn’t render correctly in IE6. It’s supposed to be a strong argument for web developers in order to inspire and take initiative towards to stop exclusive coding to render their websites correctly in IE6.

You can check out the proposals we have already submmitted for review here:
* Zend Calendar.
* Zend Template.

Hope you’ll enjoy!

In PHP, the keyword “$this” is used as a self reference of a class and you can use it for calling and using these properties and methods as shown in the example bellow.

Create a file ClassOne.php with code bellow:
<?php

class ClassOne
{
    // this is a property of this class
    public $propertyOne;

    // When the ClassOne is instantiated, the first method called is
    // its constructor, which also is a method of the class
    public function __construct($argumentOne)
    {
        // this key word used here to assign
        // the argument to the class
        $this->propertyOne = $argumentOne;
    }

    // this is a method of the class
    function methodOne()
    {
        //this keyword also used here to use  the value of variable $var1
        return 'Method one print value for its '
             . ' property $propertyOne: ' . $this->propertyOne;
    }
}

In this class, we are also using the visibility declarations (public), which means whether the members are accessible on a subclass – we will discuss it later – or instance.
Another thing you must be curious about is the use of ‘->’. This is an object pointer and, on PHP, it’s used for accessing members inside an object.

Now, let’s test your class! Create another file, called use.php with the following code:
<?php

// include your class file
require_once 'ClassOne.php';

// Create an instance of your class
$classOneInstance = new ClassOne('Hello');

// And test it
print $classOneInstance->propertyOne . '<br />';
print $classOneInstance->methodOne();

- Note that in both files we’re not using the enclosing PHP tags (?>). Once they have only PHP code, it’s not needed and it’s also a good practice to avoid them on pure PHP files.

<?php

class Custom_Http_Request
{
    private $_url;
    private $_body;
    private $_method = 'POST';
    private $_headers = array();
    private $_response;
    private $_stream;

    public function __construct($url, $body)
    {
        if (empty($url) || empty($body)) {
            throw new Exception('Both URL and BODY are required '
                              . 'for fetching the request.');
        }

        $this->_url  = $url;
        $this->_body = $body;
    }

    public function setMethod($method)
    {
        if ('POST' == $method || 'GET' == $method) {
            $this->_method = $method;
            return $this;
        }

        throw new Exception('Invalid method set.');
    }

    public function addHeader(array $header)
    {
        if (!empty($header)) {
            $this->_headers[] = $header;
            return $this;
        }

        throw new Exception('The headers are empty.');
    }

    public function getMethod()
    {
        return $this->_method;
    }

    public function getBody()
    {
        return $this->_body;
    }

    public function getHeaders()
    {
        return $this->_headers;
    }

    public function getResponse()
    {
        if (is_null($this->_stream)) {
            $this->_openStream();
        }

        if (is_null($this->_response)) {
            $this->_response = @stream_get_contents($this->_stream);

            if (false === $this->_response) {
                throw new Exception('It is not possible to '
                                  . 'read from the response.');
            }
        }

        return $this->_response;
    }

    private function _assemble()
    {
        $params = array(
        	'http' => array(
        		'method'  => $this->_method,
        		'content' => $this->_body
            )
        );

        if (!empty($this->_headers)) {
            $params['http']['header'] = $this->_headers;
        }

        return stream_context_create($params);
    }

    private function _openStream()
    {
        $this->_stream = @fopen($this->_url, 'rb', false, $this->_assemble());

        if (!$this->_stream) {
            throw new Exception('It was not possible to '
                              . "connect to {$this->_url}.");
        }
    }
}

More on this in my next post.

Welcome to third and final part of my CSS primer.

Continuing from previous post ‘CSS Steady’ now I’ll tell you something about polishing the CSS. Following text will help in decision making during CSS coding.

ID vs Class Vs Tag Vs Pseudo selectors:

All CSS developers know this fact there are verity of CSS selectors, CSS rules can be applied by using any one or combination of available selectors. We can apply CSS rules by inline CSS as value of style attribute of HTML tags or internal CSS by using style tag, or we can go for external style sheet. Inline CSS is bad and must be avoided. Inline style declarations should be limited to for some run time CSS manipulation only.

In summery using external CSS is preferred way, Its success depends on use of inline or internal CSS, since in effectiveness of application of CSS rules hierarchy, inline CSS is topmost level after that comes internal CSS and external CSS comes bellow them.

Same way ‘id’ is above ‘class’ in hierarchy of effectiveness of CSS selectors. Id can’t be used more than once in a page (its preferred to use one id for same element throughout application not only withing page).

Rigid element’s CSS should be served by using ‘id’ CSS selectors, which will be used only once e.g. header, footer etc. Elements with dynamic nature having shared or inherited property with possible multiple occurrence need fetch CSS rules by ‘class’ selectors.

Use of ‘tag’ selectors can be decided by doing some research on default look and feel of elements of application. psudo CSS selectors can be used if backward compatibility with older browsers not needed.

Inheritance playes a great role in  in this that’s why planning is uttermost important. we should always keep in mind we are just contributing in development of some application which might have multiple developers hence coding must stick to requirements and standards of application so any one can understand and edit code of each other.

Modular CSS needs to be developed and all inherited properties needs to commented within CSS declaration so one don’t repeat same CSS again and selectors needs to named by some naming convention (e.g. prefixing every declaration by module).

Modules needs to be devised in such way so it remain plug and play if plugged in different application.

Resources:

following are some useful resources which might play great role to make a good CSS developer out of you.

• Make your markup clean
• Don’t fear to java script RIA is future. Jquery might be good place to start (and possibly end of search).
• Keep a tab on latest, fresh and trust worthy tips, tricks, trends, news etc related to web development.
• Get benefit and give benefit by being active part of revolution in web development. Join the wiki maintained by web developers for web developer from Google.
• Know more about standards, stick to them and force them upon you, make web development your passion and web standards your religion.

Above links are ocean on themselves and they carry more waves within if you want to explore more.

But my point is practice them, Its more important.

Ok guys hope you have enjoyed the article and will take benefit out of it.

Happy Web Development

Cheers

Personal Phishing ask for the Personal info ie. Address, email Id, Contact No.

Financial Phishing asks for Bank Details, Credit Card details and Third Party Money Transfer (Like: Paypal Inc, Yahoo! Wallet. etc) details.

Why? That’s the business. Sell it to advertisers and marketers or use it as E-Cash.

Intellectual Property Phishing is the Advance Phishing technique, which is the hot cakes for Phishermen / Hackers. Most of the people are not acquainted with this Phishing.

This Includes the Domain and Hosting Swap, Software Programs and Programming Codes Copy, Contents Piracy.

Threats:

• Domain and Hosting Swapping: Advance Hacking method to Control over Domain or Hosting.
• Copy the Source codes and Software and sell it as different Brand or Spread Piracy.
• Copy the content (Text and multimedia) Publish in other sites to move the Web Traffic and Rank High on Search Engine Result Pages (SERP)

Process:

• An email contains URL / Scripts, which search for the Log in details/ Account Credentials. Then forward the details to another Email and delete it from Outbox / Sent Mail Folder. In sort its like Filter Option in Gmail.
• Ask to log in to hosting or domain Control Panel from Phishing/Malicious website/ Software.
• Browser Add on/Scripts/Trojan worms/Spyware Cleaners to read the temp files or Cookies from Local machine.

Mission:

• Swap the Domain and Hosting. May use 301 or 302 Redirects or Publish Unrelated Content.
• Rank High on SERP as competitor.
• Divert the traffic from one site to other(s).
• Add Good Ranking / High Traffic Domains to Auctions or Bids.
• Down the server to get loss in Online Business.
• Get Money by Blackmailing.
• Claiming the Original Author of Scripts/Software/Content.
• Sells the Scripts/Software with other Brands.

Remedy:

• Check WHO IS of Domain.
• Check the Server Log Details.
• Check the Geographical IP Location.
• Consult with the Domain or Hosting Provider.
• Consult the World Intellectual Property Organization (WIPO).
• Check for Content Piracy.
• If you have Copyright then Lodge Complain Copyright US Govt. or Copyright Indian Govt.
• Discuss at Webmaster World.

Precautions:

• Change the Log in/ Account details regularly.
• Use strong password (case sensitive characters, symbols and numbers.)
• Avoid the OpenId Log in, as it is most vulnerable to Phishing.
• Never use Untrusted password manager to manage your passwords.
• VeriSign Personal Identity Portal is a secure password manager with browser recognition feature.
• Copyright your Important Contents/Codes/Scripts/Logo.
• Check for Content Piracy.
• Encrypt the Source Codes/Scripts.
• Copying source code may not be good, but it is much much easier than code it. Secure your valuable Applications.
• Never proceed to Transacts on Expired/Invalid Security Certificate Web Sites.

Modern Browser’s Behavior to Phishing/Malicious Web Site.

Modern Browsers except the Internet Explorer, Safari and Opera are stay neutral where FireFox and Google Chrome React Strongly.

Some Screenshots are here:

Internet Explorer 7:

Internet Explorer 8:

Safari 3:

Opera 9.6:

FireFox 3:

Google Chrome:

The code goes here -

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import flash.utils.clearInterval;
private var timeGap:Number = new Number();
private function doubleClick(event:MouseEvent):void {
clearInterval(timeGap);
//put your code here to be executed on double click
Alert.show("double click");
}
private function singleClick(event:MouseEvent):void {
clearInterval(timeGap);
timeGap = setInterval(otherClick, 250);
}
private function otherClick():void {
//put your code here to be executed on single click
Alert.show("first click");
clearInterval(timeGap);
}
]]>
</mx:Script>
<mx:Button label="click" x="134" y="94"
click="singleClick(event)"
doubleClickEnabled="true"
doubleClick="doubleClick(event)"/>
</mx:Application>

Now it’s the time to explain whats going on inside the code.
On single click and double click events I am invoking two different Alerts to just display a message,
In your case you can write any code which is to be executed on those click events.

On click, inside the singleClick( ) method, we will reset & initiate the timer which will call the
otherClick( ) method on complete. otherClick( ) method contains actual single Click code.

If doubleClick is not invoked, then the  timer completes and otherClick( ) method is executed.
But if doubleClick is invoked , it will call the doubleClick( ) method, where we will clear the
timer so the timer will not complete and execute the otherClick( ) method  and thus it will invoke the
doubleClick( ) method.

Here I am with second part of 3-part CSS primer.

In my previous post, I briefly described importance of planning and resetting CSS, some possible ‘Do’s and ‘Don’t’ s. I believe in outlining thing and let your mind fly in free space. My outline for CSS primer can be visualized by connecting following dots.

Object Oriented approach:

Adopting object-oriented philosophy is always beneficial for development…and CSS is no exception. How? I tell you. Object oriented approach in terms of CSS translates as knowing and taking advantage of parent-child relation in DOM and inheriting CSS rules, by designing CSS optimized way, less repeated and multiple times used code indicates more object oriented CSS.

Progressive Enhancement AKA Graceful degradation:

There is a term progressive enhancement, that is “incremental addition of elements”. Which means we should categorize content and content containers, parametrized by accessibility of content, covering target audience.

We should first care about, any content should not be missing which our target audience must get, by keeping in mind what would be possible access terminal for navigating the web page. e.g. PC, PDA etc. It includes low configured and not up to date browsers. Afterward one can enhance page by adding CSS and Javascript cylinders.

Categorization, flexibility and re-usability:

By thinking this way we can get mostly auto categorized content. From here we can start implementing re-usability. We can aaply progressive enhancement with CSS by dividing one big-fat-utf8 CSS into multiple CSS files. e.g. IE specific CSS and print CSS and also CSS responsible for particulars like color and typography css.

If project demands we can keep ‘themes’ too in mind. CSSZenGarden is extreme example of this. To implement this we should deeply think about DOM structure, basic skeleton X/HTML and naming of class/ids. naming of class/id should be content dependent, not on how its going to render or where its going to positioned.

Always try to minimize the unnecessary  tags. e.g. wrapping everything in a div or adding extra wrappers for display purpose only. I suggest to add extra divs to stylize things by Javascript in run time, e.g. rounded corners, or multiple background images, or its not always required to wrap ul and set of inks or img tags into any box level container like div…since CSS rules can be applied on any X/HTML element.

Use multiple class and loosely coupled classes massively.  Multiple classes help to increase re-usability.

example:
<span class="block fs20">Multiple class</span>

use of ‘!important’ keyword is very useful in case of using multiple class, where we might need to override few css rules. but ‘!important’ should be used carefully. Personally I prefer to use ‘!important’ with loosely coupled classes declared against inherited property.
e.g.: following will always work disregarding its position in CSS file against inherited bold property of font.

font-weight:normal !important;

Code Management:

Organize your code in properly commented grouped sections…e.g. header, body, navigation, footer etc.

here we know the importance of neutral class names. If naming of CSS classes will be accoring common template not according page wise us its easy to group related CSS.

example:

What if we name common right panel of web page ‘homecol’ without thinking too much? either we have to rename it on every page its appearing and duplicating same css to render it identicaly, or we have to use ‘homecol’ even in contact page.

After all…

Always try to understand any rendering issue, before throwing some random code to increase vertical length of your CSS file. Every browser supports CSS (If I am not wrong 90% identically) if application of CSS is pure and CSS rules are plugged in right socket. So think twice before re-searching on Google for some hacks to override something which might fill dirt on your accessible web page. Ya of course there are many of known bugs (e.g. IE6 PNG) but id doesn’t mean every issue, you are facing is a bug and you can’t overcome them until import some hack from Venus.

The last word before I end this second post from 3 part series on CSS, I want to say is…

Not every validated web page is accessible or ideal but every invalid web page is bad. So always try to validate. First by validating from validators and then by common sense, because technically a page with thousands of nested DIVs are valid. button stimulated out of div is valid. But question is… Is it really?

Think on it, till I am cooking third post CSS Go

The singleton pattern is a design pattern that is used to restrict instantiation of a class to one object. If you create the class as a singleton then no way to create more than one instance. But, you can get that single instance in any number of classes. So all the classes will share the same properties and behaviours of that singleton object.

How to implement the singleton pattern?

Implementation of a singleton pattern must satisfy the single instance and global access principles. It requires a mechanism to access the singleton class member without creating a class object and a mechanism to persist the value of class members among class objects. The singleton pattern is implemented by creating a class with a method that creates a new instance of the class if one does not exist. If an instance already exists, it simply returns a reference to that object. To make sure that the object cannot be instantiated any other way, the constructor is made protected (not private, because reuse and unit test could need to access the constructor). Note the distinction between a simple static instance of a class and a singleton: although a singleton can be implemented as a static instance, it can also be lazily constructed, requiring no memory or resources until needed. Another notable difference is that static member classes cannot implement an interface, unless that interface is simply a marker. So if the class has to realize a contract expressed by an interface, it really has to be a singleton.

The singleton pattern must be carefully constructed in multi-threaded applications. If two threads are to execute the creation method at the same time when a singleton does not yet exist, they both must check for an instance of the singleton and then only one should create the new one. If the programming language has concurrent processing capabilities the method should be constructed to execute as a mutually exclusive operation.
The classic solution to this problem is to use mutual exclusion on the class that indicates that the object is being instantiated.

How to implement the singleton pattern in Flex and ActionScript?

• Can we implement the singleton pattern in ActionScript? Why not? Ofcource we can.

• Is there any keyword named as singleton in Flex?. No.

• Can we declare the constructor as protected in Flex?. No. (ActionScript 3.0 will not support protected constructors)

• Can we declare the constructor as private in Flex?. No. (ActionScript 3.0 will not support private constructors)

• Then how can we implement the singleton pattern in Flex ? See the next line.

Steps to  implement the singleton pattern in Flex and ActionScript

Consider the MySingleTon class as a singleton class.

package {
	public class MySingleTon {   

    	// Single Instance of Our MySingleTon
		private static var instance:MySingleTon;

	    //DEFINE YOUR VARIABLES HERE
	    public function MySingleTon (enforcer:SingletonEnforcer)
	    {
	    	if (enforcer == null)
	    	{
                      throw new Error( "You Can Only Have One MySingleTon" );
			}
		}

		// Returns the Single Instance
		public static function getInstance() : MySingleTon
		{
			if (instance == null)
			{
				instance = new MySingleTon ( new SingletonEnforcer );
			}
			return instance;
		}
	}
}

// Utility Class to Deny Access to Constructor
class SingletonEnforcer {}

1). We should create one static variable. It will be called "instance" and it will be of type MySingleTon. This will be the variable where we will store our
one instance of our class.

2). Then we should create one constructor. The constructor takes one argument - "enforcer". You will notice that this "enforcer" has a type of "SingletonEnforcer"
which is defined directly after our class. Here is the logic behind that:

• When you put a class in an Actionscript file below the main class, it is only available to that class.

• If the constructor requires this argument – then only our main class can create an instance of itself, because we do not have access to the “SingletonEnforcer” class. Only the main class has this access.

• We will not access our class in the normal way by using the “new” statement because we can’t call the constructor. Once we get inside of the constructor, we have a few lines that make sure things work as planned. The “if” statement ensures that we had a valid “enforcer” passed in. If there wasn’t it throws an Error stating that “You Can Have Only One MySingleTon”.

Then we should create one static function named as getInstance. The “getInstance” function is how we will access our MySingleTon from our application. This function simply passes back the “instance” of the class. If it doesn’t exist yet, it creates it. We can now get the MySingleTon by using the following:

var mySingleTone:MySingleTon = MySingleTon.getInstance();. So you can share this single object in any number of classes.

Sometimes our flex application’s size becomes very large. Due to this, we are facing many problems such as bandwidth, network traffic and it will take more time to load. We have many ways to solve this problem such as

1. Do not embed the assets into the project.
2. Modules.

About Modules

Modules are the swf files which can be loaded and unloaded dynamically by an application. The user cannot run the modules independently in the browser or the flash player. But the user can share the modules in any number of applications.

Benifits of Modules

• Smaller initial download size of the SWF file.
• Shorter load time due to smaller SWF file size.
• Better encapsulation of related aspects of an application. For example, a “reporting” feature can be separated into a module that you can then work on independently.
• Any number of applications can share the modules.

Creating the Modules

To create the modules we should create seperate mxml or actionscript class and an application that uses the modules. We can create the modules in two ways, one is by using the mxml and by using the actionscript class.

Creating the modules by using the mxml

An MXML-based module file’s root tag should be <mx:Module>. Within this tag we can create all our child containers and components.Ofcource we can have our styles and scripts also. We should compile the modules using the mxmlc command-line compiler or the compiler built into Adobe Flex Builder. The swf file will be created after we compile the modules.

<?xml version="1.0" encoding="utf-8"?>
<!-- modules/MyModule.mxml -->
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300">
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
	        	[Bindable]
	        	public var expenses:ArrayCollection = new ArrayCollection([
	            		{Month:"Jan", Profit:2000, Expenses:1500},
		            	{Month:"Feb", Profit:1000, Expenses:200},
		           	{Month:"Mar", Profit:1500, Expenses:500},
	        	    	{Month:"April", Profit:2000, Expenses:600},
	            		{Month:"May", Profit:2500, Expenses:700},
		            	{Month:"June", Profit:3000, Expenses:500},
		            	{Month:"July", Profit:4000, Expenses:400}
	        	]);
		]]>
	</mx:Script>

	<mx:DataGrid dataProvider="{expenses}" >
		<mx:columns>
			<mx:DataGridColumn dataField="Month" headerText="Month" />
			<mx:DataGridColumn dataField="Profit" headerText="Proft" />
			<mx:DataGridColumn dataField="Expenses" headerText="Expenses" />
		</mx:columns>
	</mx:DataGrid>
</mx:Module>

Creating the modules by using ActionScript

To create a module in ActionScript, we should create a file that extends either the mx.modules.Module class or the mx.modules.ModuleBase class. Extending the Module class is the same as using the <mx:Module> tag in an MXML file. You should extend this class if your module interacts with the framework; this typically means that it adds objects to the display list or otherwise interacts with visible objects.

package modules{
    import mx.modules.ModuleBase;

    public class ArithmaticModule extends ModuleBase {

        public function ArithmaticModule () {

        }

        public function add(a:Number, b:Number):Number {
            return a + b;
        }

	public function subtract(a:Number, b:Number):Number {
            return a - b;
        }

	public function divide(a:Number, b:Number):Number {
            return a / b;
        }

	public function multiply(a:Number, b:Number):Number {
            return a * b;
        }
    }
}

Loading the modules

We can load the modules in our applications by using the <mx:ModuleLoader> mxml tag or mx.modules.ModuleLoader and mx.modules.ModuleManager ActionScript classes. Typically, we use one of the following techniques to load MXML-based modules:

• ModuleLoader : The ModuleLoader class provides the highest-level API for handling modules.
• ModuleManager : The ModuleManager class provides a lower-level API for handling modules than the ModuleLoader class does.

Using the ModuleLoader class to load modules

We can use the ModuleLoader class to load module in an application or other module. The easiest way to do this in an MXML application is to use the <mx:ModuleLoader> tag. We set the value of the url property to point to the location of the module’s SWF file. The following example loads the module when the application first starts:

<?xml version="1.0"?>
<!-- modules/MySimplestModuleLoader.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:ModuleLoader url="MyModule.swf"/>
</mx:Application>

We can change when the module loads by setting the value of the url property at some other time, such as in response to an event. Setting the target URL of a ModuleLoader triggers a call to the loadModule() method. This occurs when we first create a ModuleLoader with the url property set. It also occurs if we change the value of that property. If we set the value of the url property to an empty string (“”), the ModuleLoader unloads the current module.

Using the ModuleManager class to load modules

You can use the ModuleManager class to load the module. This technique is less abstract than using the <mx:ModuleLoader> tag, but it does provide you with greater control over how and when the module is loaded. To use the ModuleManager to load a module in ActionScript, you first get a reference to the module’s IModuleInfo interface by using the ModuleManager getModule() method. You then call the interface’s load() method. Finally, you use the factory property of the interface to call the create() method and cast the return value as the module’s class.

The IModuleInfo class’s load() method optionally takes an ApplicationDomain and a SecurityDomain as arguments. If you do not specify either of these, then the module is loaded into a new child domain. The following example shell application loads the ColumnChartModule.swf file and then adds it to the display list so that it appears when the application starts:

<?xml version="1.0"?>
<!-- modules/ModuleLoaderApp.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()">
    <mx:Script>
        <![CDATA[
        import mx.events.ModuleEvent;
        import mx.modules.ModuleManager;
        import mx.modules.IModuleInfo;

        public var info:IModuleInfo;

        private function initApp():void {
            info = ModuleManager.getModule("MyModule.swf");
            info.addEventListener(ModuleEvent.READY, modEventHandler);           

            // Load the module into memory. Calling load() makes the
            // IFlexModuleFactory available. You can then get an
            // instance of the class using the factory's create()
            // method.
            info.load();
        }

        private function modEventHandler(e:ModuleEvent):void {
            // Add an instance of the module's class to the
            // display list.
            vb1.addChild(info.factory.create() as ColumnChartModule);
        }
        ]]>
    </mx:Script>

    <mx:VBox id="vb1"/>

</mx:Application>

Note: MXML-based modules can load other modules. Those modules can load other modules, and so on.

Unloading the Modules

We can unload the modelues in two ways:

1. If we set the value of the url property to an empty string (“”), the ModuleLoader unloads the current module.

2. Calling the unloadModule() method of the ModuleLoader instance.
public function removeModule(m:ModuleLoader):void {
m.unloadModule();
}

Modular applications best practices

By default, a module is loaded into a child domain of the current application domain. You can specify a different application domain by using the applicationDomain property of the ModuleLoader class. Because a module is loaded into a child domain, it owns class definitions that are not in the main application’s domain. For example, the first module to load the PopUpManager class becomes the owner of the PopUpManager class for the entire application because it registers the manager with the SingletonManager. If another module later tries to use the PopUpManager, Adobe ® Flash® Player throws an exception.

The solution is to ensure that managers such as PopUpManager and DragManager and any other shared services are defined by the main application (or loaded late into the shell’s application domain). When you promote one of those classes to the shell, the class can then be used by all modules. Typically, this is done by adding the following to a script block:

import mx.managers.PopUpManager;
import mx.managers.DragManager;
private var popUpManager:PopUpManager;
private var dragManager:DragManager;

This technique also applies to components. The module that first uses the component owns that component’s class definition in its domain. As a result, if another module tries to use a component that has already been used by another module, its definition will not match the existing definition. To avoid a mismatch of component definitions, create an instance of the component in the main application. The result is that the definition of the component is owned by the main application and can be used by modules in any child domain.

Because a Flex module must be in the same security domain as the application (SWF) that loads it, when you’re using modules in an AIR application any module SWF must be located in the same directory as the main application SWF or one of its subdirectories, which ensures that like the main application SWF, the module SWF is in the AIR application security sandbox.

One way to verify this is to ensure that a relative URL for the module’s location doesn’t require “../” (“up one level”) notation to navigate outside the application directory or one of its subdirectories.

• It’s not how much and what you know; but what you can do with what you know, which’s important.

• Ability to implement Polymorphism, Inheritance, private, public namespaces, static methods etc is no guarantee you are a good OO developer.

• OOP is useless if you don’t use it to create good software design (architecture).

• Using packages, classes, etc does not guarantee good software design.

• When designing your software, think of it as an electronic device you are designing.

• Sketch out the ‘electronic device’. Label the different components, list their functionalities.

• Stay hungry, stay foolish.

That’s it for today. I hope you are blessed with more knowledge, and the ability to make the best use of them.  Adios!

We can divide the pureMVC as:

• Facade & Core
• Controller & Commands
• Model & Proxies
• View & Mediators
• Observers & Notifications

Steps to follow in PureMVC

1. Main application should call the facade.startup(this). Here facade is the singletone instance of ApplicationFacade class.

2. ApplicationFacade

• Singleton class.
• It extedns the org.puremvc.as3.patterns.facade.Facade.
• It implements org.puremvc.as3.interfaces.IFacade .
• Should override the initializeController() method.
• It defines static constants for Notification names.
• Initializes the Commands used to access and notify the Commands, Mediators and Proxies.

3. MacroCommand(s)

• It extends the org.puremvc.as3.patterns.command.MacroCommand.
• It implements the org.puremvc.as3.interfaces.ICommand.
• Should override the initializeMacroCommand() method.
• Executes the SimpleCommands and MacroCommands.
• User can registerand retrieve the Mediators and Proxies.

4. SimpleCommand(s)

• It extends the org.puremvc.as3.patterns.command.SimpleCommand.
• It implements org.puremvc.as3.interfaces.ICommand.
• Should override the execute( note:INotification ) method.
• User can register and retrieve the Mediators and proxies.

5. Mediator(s)

• It extends the org.puremvc.as3.patterns.mediator.Mediator.
• It implements the org.puremvc.as3.interfaces.IMediator.
• Should override the listNotificationInterests() and handleNotification( note:INotification ) methods    to listen to the notifications.
• Registers the mediators and proxies.
• User can retrieve the Mediators and proxies.
• User can register the notifications.
• Listens for the notifications from other Mediators, Proxies and commands.
• Listens for the events from the component.
• Sends the notifications to other mediators.

6. Proxy(ies)

• It extends org.puremvc.as3.patterns.proxy.Proxy.
• It implents the interface org.puremvc.as3.interfaces.IProxy.
• User can send the notifications.
• Used to access the Delegates and datas.

7. Component(s)

• Views of our application.
• Every component should have its own Mediator. One Mediator per Component.
• Dispatches the event. So the mediator can listen for that events.

Observers

PureMVC applications may run in environments without access to Flash’s Event and EventDispatcher classes, so the framework implements an Observer notification scheme for communication between the Core MVC actors and other parts of the system in a loosely-coupled way. No need to create instance for the Observers and notificatios. These are inbuilt things in the pureMVC.

Notifications
PureMVC implements the Observer pattern so that the Core actors and their collaborators can communicate in a loosely-coupled way, and without platform dependency.

Not simply a replacement for Events, Notifications operate in a fundamentally different way, and work synergistically with Events to produce extremely reusable View Components that need not even know that they are coupled to a PureMVC system at all if engineered properly.

Events are dispatched from Flash display objects that implement the IEventDispatcher interface. The Event is ‘bubbled’ up the display hierarchy, allowing the parent object to handle the Event, or the parent’s parent, etc.

Notifications are sent by the Facade and Proxies; listened for and sent by Mediators; mapped to and sent by Commands. It is a publish/subscribe mechanism whereby many Observers may receive and act upon the same Notification.

WorkFlow of the PureMVC framework

• MainApplication should startup the pureMVC framework by calling the ApplicationFacade(Facade)’s startup method.
• ApplicationFacade Registers the Commands,Mediators and Proxies.
• User can retrieve the Mediators and Proxies in the  ApplicationFacade.
• Two commands are there: MacroCommand and SimpleCommand.
• MacroCommand registers other commands, Mediators and Proxies.
• SimpleCommand registers the Mediators and Proxies.
• Both the Macro and Simple Commands can be used to retrieve the Mediators and Proxies.
• User can send notifications from both the Macro and Simple commands.
• Mediators registers the component with the PureMVC.
• Mediators will listen for the events and notifications.
• Mediators will listen for the events dispatched from the Components.
• Mediators will listen for the notifications sent from the other  Mediators, Proxies and Commands.

In order to extract maximum pulp from CSS fruit there are few things needs to keep in mind. Although rule of thumb is efficiency is directly proportional to experience but I’ll point out few options 3-part post series See, Yes! Yes! – READY,  See, Yes! Yes! – STEADY and See, Yes! Yes! – GO. which can help novice CSS developers to take right diversions.

All of following points are optional and one can modify them according to needs and/or simply drop the idea.

Big Picture:

Planning is a must for mid or big projects…for small projects one can instantly start coding.

While coding for new design, web designer must analyze the design mock-up and slice the design by keeping in mind the facts which are resultant of observation and guideline of website/blog/web application.

e.g.

• What portion of design mock can be translated by using CSS rules instead of image?
• Whether background is repeating? Design is fixed width or liquid?
• What element of design is going to change dimension dynamically?
• Re-usability issues needs to be addressed so back-end developer (if any) don’t face any difficulty to plug reusable components.
• Sliced images need to save as optimized for  web, as PNG if element is using alpha transparency and if it uses square shape without tranparency JPG images work better in most cases.

CSS Reset:

Purpose of using CSS Reset is to neutralize default rendering of browser, in order to equalize rendering of web page across different browsers.

Its entirly optional for web developers whether to use one or not. Even if Web Designer is very keen to use one, s/he must consider the big picture where the CSS is going to be used (including some future prediction).

In few cases i prefer not to use CSS reset as in Blogs where content is generated by user and web designer don’t have exact control over X/HTML tags.
Following is my reset.css. I have cooked this starter dish by borrowing some spices from here and few from experience.

/* Common CSS and CSS reset Start */
html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
vertical-align: baseline;
font-family: inherit;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
outline: 0;
padding: 0;
margin: 0;
border: 0;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/*links*/
a{
text-decoration:none;
}
a:hover{
text-decoration:none;
}
/*List*/
ol, ul {
list-style: none;
}
/* tables still need cellspacing="0" in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
font-weight: normal;
text-align: left;
}
/* Common Display Rules*/
.block{
display:block;
}
.none{
display:none;
}
.inline{
display:inline;
}
.clear{
clear:both;
}
.relative{
position:relative;
}
.absolute{
position:absolute;
}
.floatleft{
float:left;
}
.floatright{
float:right;
}
.center_div{
margin:0 auto;
}
.bold{
font-weight:700;
}
.normal{
font-weight:normal !important;
}
.underline, .underline:hover{
text-decoration:underline;
}
/* Headings*/
h1, h2, h3, h4, h5, h6{
font-family:Arial, HelveticaNeue, Helvetica, sans-serif;
font-weight:700;
}
h1{
font-size:18px;
}
h2{
font-size:17px;
}
h3{
font-size:16px;
}
h4{
font-size:14px;
}
h5{
font-size:15px;
}
h6{
font-size:13px;
}
/* Font Size */
.fs8{
font-size:8px;
}
.fs9{
font-size:9px;
}
.fs10{
font-size:10px;
}
.fs11{
font-size:11px;
}
.fs12{
font-size:12px;
}
.fs13{
font-size:13px;
}
.fs14{
font-size:14px;
}
.fs15{
font-size:15px;
}
.fs16{
font-size:16px;
}
.fs17{
font-size:17px;
}
.fs18{
font-size:18px;
}
.fs19{
font-size:19px;
}
.fs20{
font-size:20px;
}
.fs21{
font-size:21px;
}
.fs22{
font-size:22px;
}
.fs23{
font-size:23px;
}
.fs24{
font-size:24px;
}
.fs25{
font-size:25px;
}
.fs26{
font-size:26px;
}
.fs27{
font-size:27px;
}
.fs28{
font-size:28px;
}
.fs29{
font-size:29px;
}
.fs30{
font-size:30px;
}
/* Remove Inherited Style*/
.no_margin{
margin:0 !important;
}
.no_padding{
padding:0 !important;
}
.no_border{
border:none !important;
}
.no_dec{
text-decoration:none !important;
}
/* Common CSS and CSS reset End */

Hmm…I think its a good breakfast.

So guys allow me to take a break…I’ll be digging further into CSS mine very soon on my next post See, Yes! Yes! – STEADY .

• A rich Internet application (RIA) is a Web application designed to deliver the same features and functions normally associated with deskop applications.

• RIAs typically form a stateful client application with a separate services layer on the backend.

• Run in a web browser, or do not require software installation

• Run locally in a secure environment called a sandbox

• Installation footprint is smaller — overhead for updating and distributing the application is trivial, or significantly reduced compared to a desktop or OS native application

• Updates/upgrades to new versions can be automatic or transparent to the end user

• Users can use the application from any computer with an internet connection

• Many tools exist to allow off-line use of applications, such as Adobe AIR, Google Gears, Curl, and other technologies

• Most RIA techologies allow the user experience to be consistent, regardless of what operating system the client uses.

• Web-based applications are generally less prone to viral infection than running an actual executable

• Open source framework used to develop the RIAs

• Highly productive development

• Created applications run across all browsers and desktops

• Highly maintainable and scalable solutions

• Flex is Flash based

• Flex gives powerful environment for data-driven apps using Actionscript and MXML

• Flex has no timeline

• Flex is 100% code based solution

• Flex can be used in parallel with Flash

• 2 languages    ▫ MXML    ▫ ActionScript 3

• Flex  Builder IDE

• Compilers, Debuggers and profilers

• Rich Component Library

• Flex Builder IDE

• Wide range of communication   ▫ HTTPService    ▫ WebService   ▫ RemoteObject

• Web Services Introspection – Generate code from WSDL and enables code hinting

• Data Wizards – Generating both server and client code

To align data in a tabular structure we can use a common table using the HTML tags <table>, <tr>, <td> nonetheless we all know that by using that we are violating the latest web standards, right?But hold on for a second. I’m just going to introduce you a hot new way to code it using nothing else than div tags with the great CSS3 and the data will appear just like a table. Believe, that’s true!

Here is an example:


<!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=iso-8859-1" />
<title>Some Page</title>
<style type="text/css">
.table {
display: table;
width:100%;
}
.row {
display: table-row;
width:100%;
}
.cell {
display: table-cell;
border: 1px solid blue;
padding: 1em;
width: 33%;
}
.element1 {
background:#0099FF;
}
.element2 {
background:#00FF99;
}
.element3 {
background:#FFFF99;
}
</style>
</head>
<body>
<div class="table">
<div class="row">
<div class="cell element1">
<p><strong>Web Development </strong></p>
<p>PHP &amp; MySQL<br />
Ruby on Rails<br />
ActionScript 3.0 / Flash / Flex / Adobe Integrated Runtime<br />
Amazon Web Services<br />
Zend Framework<br />
JavaScript / AJAX<br />
XHTML &amp; CSS Scripting<br />
Content Management System</p>
</div>
<div class="cell element2"><p><strong>Windows Development</strong></p></div>
<div class="cell element3"><p><strong>Mac &amp; iPhone Development</strong></p></div>
</div>
</div>
</body>
</html>

Screen shots:

Firefox 3

Google Chrome

Internet Explorer 8

Opera 9.5

Safari 3

Internet Explorer7

Working Principle:
The display property specifies a range of table-related values to make elements display and behave as they were table elements.

The new available display values for drawing tables are:
table to make the element behave like a table element
table-row to make the element behave like a table row (tr) element
table-cell to make the element behave like a table cell (td) element
table-row-group to make the element behave like a table body row group (tbody) element
table-header-group to make the element behave like a table header row group (thead) element
table-footer-group to make the element behave like a table footer row group (tfoot) element
table-caption to make the element behave like a table caption element
table-column to make the element behave like a table column (col) element
table-column-group to make the element behave like a table column group (colgroup) element

The table element in HTML is a semantic structure: it describes what data is. Therefore, you should only use the table element if the data you are marking up is tabular – for example, a table of financial information.

On the other hand, table value of the display property is simply an indication of how something should look in the browser – it has no semantic meaning. Using a table element for your layout tells the browser, “This data is tabular.”

Also we have to take care of, not to use display: table; property on a bunch of div elements when the data needs to be present in tabular format. Else simply avoid to use this property.

The main advantages on using this new structure are:

• Place the data in tabular manner without violating the latest web standards.
• No need of specify the cellpadding="0" cellspacing="0".
• No need to make the border="0".
• No need to make the margin and padding 0 of table, tr, td.
• Print the page in tabular format without wired.
• No need to specify the height, as the content added it will automatically adjust the height of the row and columns with specified background.

As we’re not living in Wonderland, we also have some disadvantages, as follow:

• Only latest browsers support this property.
• Mainly IE 7, IE6 are not supporting this property. They show the data in wired manner.

The solution would be to use this property only when we are going to develop a website for latest browsers and just ignoring the older versions. But as the statistics shows, most of the users still using IE6 and IE7.

To implement this in realistic world won’t be feasible to use CSS3’s advanced layout features for at least 4 or 5 years, once users need to upgrade themselves from the stone age of Internet to our beautiful high-tech development world.

The article was written by Andrew Stellman and you can read it at Head First Labs in the address http://www.oreillynet.com/headfirst/blog/2008/09/how_to_hold_a_more_effective_c.html.

Enjoy!

What is SSL?

SSL (Secure Socket Layer) is a protocol used for secure data transfer. This is done by using private keys and certificates. A private key is used to encrypt the data which you are sending and the server can only decrypt this data with the private key available with it, A certificate is used to authentic yourself before proceeding.

So we need two things to make our website secure for online transactions. In this article i will explain how to generate a private key with open-ssl and apache, how to generate a certificate request from CA (Certificate Authority). How to configure your server to respond for ssl requests.

We use Apache 2, Debian Linux, Openssl for this article.

First step is to install Apache:

Go to console mode

aptitude install apache2

next install openssl to generate keys and certificates or certificate requests

aptitude install openssl


next generate certificate request and key using openssl

openssl req -new -nodes -keyout myserver.key -out myserver.csr

Here you want to fill up some details like Country code, State, City, Company name, the most important thing is common name, it must be same as your website name (suppose you website is www.sourcebits.com then the common name must be sourcebits.com)

this will generate two files in your directory one is a private key file (myserver.key) and another one is certificate request file (myserver.csr)

Now you need to get a certificate from some certificate vendors most popular vendors are verisign and comodo.
Comodo is providing a free trail certificate which is valid for 3 months. (Comodo Free Trail)
After getting the certificates you want to enable ssl module in apache and configure it

a2enmod ssl
vi /etc/apache2/sites-available/default

<VirtualHost *:443>
ServerName policeagenda
DocumentRoot /var/www/
SSLEngine On
SSLCertificateFile /etc/apache2/ssl/sourcebits.cert
SSLCertificateKeyFile /etc/apache2/ssl/sourcebits.key

<Directory />
Options Indexes FollowSymLinks
AllowOverride All
Order deny,allow
Allow from all
</Directory>
</VirtualHost>

Then restart your server /etc/init.d/apache2 restart

We all know that a default http request will be sent port 80, in the same way a default https request will be forwarded to 443 so we are configuring the server for 443 port.

You are done now access your website with https://myserver.com

If you face any problems you want to check this things first

Whether the server is hearing port 443 or not to find this type lsof -i tcp:443

Next check whether your port 443 is forwarded or not. If you face any new problems other than this please post a comment and we will try to solve it.

To start a personal website we need following things

1. A Domain Name (A name to represent your website like www.sourcebits.com)

2. A Web Hosting Space (To store your webpages online)

3. Templates (To create a rocking webdesign)

4. A WYSIWYG (What You See Is What You Get) editor (To edit your html pages)

So i will tell you how to get all this and how much it cost for you…

Domain: You can get a domain from number of sellers and resellers but its better to go with a good company which is recognized and direct seller. Because we need a good and easy domain control panel to maintain it. A domain name will cost you around $10 or less depending on the seller.

I suggest name.com as it is giving for around $7 per year. And you also get google apps configuration with the domains purchased here.(More on Google APPS). Another large domain seller is goDaddy.com which offers different prices for different domains. Check the offers before buying a domain there.

You can get the domain name registered immediately when you done the payment. you can check whether it is registered or not at who.is website.

Hosting: Hosting is a vast topic to discuss here so we dedicated one post to choose the best hosting for your needs.

But for a personal website i suggest you to go for a linux hosting with cPanel control panel which is very easy to maintain. It costs you around $12 per year if you buy from 3ix.com.

You can also go for a free hosting providers but they are not reliable. One other alternative is Google APPS which is free.

Once you buy the hosting you need to change the DNS in the domain control panel to link your domain name with the space. Your hosting provider will give you the list of name servers to update in the DNS. To avoid this configuration i suggest you to buy both hosting and domain name from same company.

Templates: A template is nothing but a definition of look and feel of your website. Choosing a good template will attract the users to your website. you can find free templates and premium templates from internet, just choose any one of it depending upon your budget..

You will get some free templates if you buy hosting from 3ix. Also you can find free templates in the following websites

http://www.freetemplatesonline.com

http://templatenavigator.com/template.php

Free personal templates

you can get a large collection of premium templates at http://www.templatemonster.com

HTML Editor: Once you got the templates you need to customize it. Some templates need photoshop image editor to customize it but its too costly to buy photoshop so go for gimp.

After you customized the templates next step is to edit the content which you are going to put in the website. This needs knowledge of HTML but don`t worry we have number of WYSIWYG editors by using this we can create web pages just like creating a word document in MS-WORD. Of course MS-WORD is also a web page designer but it is not preferred to use MS-WORD as it will insert lost of unnecessary code in your pages and don`t go for Frontpage too, it will do the same thing.

The Best WYSIWYG is Dream-Weaver which you need to purchase from Adobe. It costs you around $399. Which is too costly. So i prefer Amaya

Design as many pages as you want and keep it in a folder…

Next Step is too upload the pages into your hosting space this is done by using FTP. There are number of FTP Clients one of them is core FTP. By using that you can transfer all your files into server and make your website live.

Now invite friends to visit your new website…

Generally if you search for a hosting provider you will find different plans starting from $1 per month to $100 per month or even more, single service with different prices.Then

Which Hosting service should i buy?

A big question for a person who is going to start a new website and the answer is also not so simple it involves lots of technical things in it to choose the best one.

But i dont want to confuse you with many technical things i will give a brief introduction to different factors which effect the price of the hosting.

There are different types of web hosting services available in market

Shared hosting: This is most common hosting used by number of websites. In this type you will get a share a single server hardware resources with others clients. In this type the software maintaince and upgradation is maintained by the hosting provider only. You don’t have the control over the server but you have full control over your website using some control panel softwares like cPanel or Plex. There are many more factors which decide the price of your shared hosting which is explained in detailes below.

Usefull for Small and Medium Sites and Email domains, Can be used as backup server for your data or main server

Virtual private server hosting: This is same like a shared hosting but acts like a Dedicated Host, you have control over the server also.

Usefull for Websites which needs complete control over server and its resources, To run web applications without adversely affecting other clients or not affected by other clients

Dedicated Hosting: This is just like taking a computer for lease, you don`t share any resources with any one. This is mainly useful for large web applications with heavy traffic. This hosting server needs some person with knowledge on OS and Remote day to day maintaince of servers. It takes some time to setup also contains setup fee.

Managed Web Hosting: This is just like a dedicated server but it also provides additional functionalities like reporting and monitoring, load balancing, security, setup, system administration and software updates. Which reduces your server maintainces charge.

Server Co-Location: This is nothing but building your own server and placing it in the data center of a provider. This requires most efficient persons to maintain your server.

Any Hosting service again have different prices depending upon the following factors

1. Hosting Space: This is the space provided for you to place your website. Normally this space ranges from 1GB or less to 1TB or more…

For a normal website 1GB is more than enough as we can store more thousands of pages in 1GB.

Sites containing more photos or videos want to go for more space. Now a days space is not so costly and it wont effect much on the final price.

2. Contract period: Many Hosting providers will give you a option to buy for 6 months to 5 years. If you buy for more period the cost decreases. But if you are choosing the new service provider dont go for too long contracts as it may be problem if the support is not so good.

3. OS Type: Mainly you have two OS options one is linux hosting and second one is windows hosting. As windows is not a free OS obviously a server with windows will cost little bit more than linux. For hosting .NET applications it is mandatory to go for windows hosting, Others can choose linux hosting, you dont need much technical knowledge on linux to run a website on linux as it is maintained by your service provider.

4. Monthly Bandwidth: This is major thing which many people ignore to consider and which will add unforseen costs to your budget. . Many Service providers restrict your monthly data transfer. Some providers will charge you extra as you crossed the limit and some will block your site. Be careful before choosing this to avoid add unforeseen costs to your budget.

Some hosting providers will give you 10GB of space but only 30GB of monthly bandwidth which will make your web space useless

5. Database Support: You need a database when you are going for a dynamic website with programming, if your are going with a static designer based website you just skip this.

Many service providers will provide MySQL database as it is free and stable. But they limit the number of allowed databases. So check with your developer with this issues.

If you want MSSQL or ORACLE database servers then you want spend some more dollars to get it.

6. Sub-Domains: subdomain is a domain that is part of a larger domain. Ex: mail.google.com

Some providers will restrict the number of subdomains you can create but this is not a major thing to consider as most provider will provide more than 10, which is more than enough.

Note: Remember sub-domain is differ from addon domain addon domain will give you a chance to host different websites in a single hosting service and share the available resources.

7. Softwares Installed: This is also a crucial thing to consider before choosing a hosting server because if you are going for a shared hosting you cant install softwares after you brought the hosting account so check once again whether all the required softwares are installed with you service provider. This may effect your cost.

So i think now you can choose a better hosting service provider by analysing the above factors please give comments on different hosting providers so that it is usefull for other in choosing the best hosting in no time.

But what about the design? No, no… I don’t mean that design where you place the squares and circles in their places, draw lines, beautiful backgrounds and all those kind of stuff. I’m talking about Software Design. Design in terms of objects. Which objects to use, how and when to use, how the hierarchy would look like, which object should extend which object, when to encapsulate, when not.

It’s very common for developers to misunderstand Object-Oriented Programming with its basis concept (abstraction, inheritance, encapsulation, polymorphism, interfaces). Only because you know how to extend a class doesn’t mean that you really understand Object-Oriented Programming. It’s quite more than this.

First, let’s start with Design Patterns. Design Patterns are proven reusable solutions to solve a software design problem that other developers already faced before you. It’s not a kind of pre-cooked cake, where you just need to put in your heater for some time to get it done, but a description or template for how to solve a problem that can be used in many different situations (Yeah! Now, we’re starting talking about OOP).

To be a great OOP developer, this is the prior thing to know: Design Patterns will take you in another level of development principles, well designed applications and the truly implementation of Object-Oriented Programming. You’ll be able to understand each property of the OOP concept and how to correctly apply it in a way to improve the quality of your application design and, consequently, of your software. More than that, you’ll be able to use most of your objects in your future projects, saving time of development.

Once you went through the Design Patterns and you already know all about Design Principles, it’s time to understand the needs of your customer. What?! Did You think it was just plan a good design, put objects in place and write some code?? No way! How are you going to do that if you don’t even know what your customer expects from your software? Talking about that, do you even have a customer? Here is where the Object-Oriented Analysis and Design (OOA&D) comes in place! The first thing you need to start developing a software is the customer, even if the customer is yourself! The software starts with your customer’s great idea! Before getting into design and code, you need to collect their idea and try to deeply comprehend it to make it to become a great software that does exactly what your customer expects it does. To accomplish this, you need to apply some OOA&D techniques.

Ohh! You already have a customer! So, start collecting requirements! A requirements list is one of the most important artifacts on software development. It represents all the expectation of what the software should do and all the requirements are provided by not anybody else than your customer (that person that is going to afford your hours of development). A requirement is a statement that identifies a necessary attribute, capability, characteristic, or quality of a system in order for it to have value and utility to a user ^[1].

With your requirements in hands, you can develop all other artifacts to develop your software, like Use Cases, Sequence Diagrams, Class Diagrams, Database Diagrams, define estimates and costs and divide the requirements in tasks to be assigned to everybody involved in the software development.

After having your well-designed software and your code written it’s time to test! Yes, test it before your customer does it and realizes that some functionality is not working properly (Hmm… a bug! Or a few of them??). There are some test techniques that can avoid these situations and provide reliable reports that prove that a particular functionality is working fine. One and the most known of them is the Unit Testing. Unit Testing is a method of testing that verifies if individual units of your source code are working properly. The most popular programming languages have Unit Testing frameworks to help you testing your software, standardized by the ANSI/IEEE Std 1008-1987 ^[2].

Now you have all this powerful knowledge in hands, you can say loud to everyone hears you: “Yes, I’m a GREAT OOP Developer!”

After going through the principles of OOP, Design Patterns and OOA&D, you’re ready to design, develop and deliver really GREAT software and make your customers happy, providing exactly what they want at the time they want and with a budget that they can afford.

Very good books that can help you to acquire this knowledge are the Head First series ^[3] (Head First Software Development, Head First Object-Oriented Analysis & Design and Head First Design Patterns), the famous Design Patterns – Elements of Reusable Object-Oriented Software ^[4] and Effective Requirements Practices ^[1].