Before beginning it is always a best practice and safe to back up your database irrespective of any platform you are working on. This is the golden rule that would save you when things go wrong.

So now lets dive into issues that is specific to the Magento platform that one may face during the migration of development environment to that of production.

Copying all the files

Copy all the folders and files in the Magento root directory and make sure you don’t copy the cache files under “Var” folder to the production environment.

Environment configuration

The production server must be configured with all php libraries that the development environment uses and your development code uses.

Permission settings

Make sure the permission settings used is same as the development environment, unless your development environment permission settings doesn’t comply to the security.

so as a rule of thumb it is always a good practice to set your development environment with necessary permission levels, keeping security in mind. Avoid setting permission mode to “777″ when its not needed.

Configuring the database

Import the database that you backed up to the production environment. If you have used a different a database name or db credentials for production environment, you need to configure the connection settings in the /app/etc/local.xml file.

        
                    
                    
                    
                    
                    1
          

Setting up the site domain

You have to execute the following query in order to setup the database to point to the production environment.

   UPDATE core_config_data SET value = 'http://productionserver.com/' WHERE config_id IN (11,12);

This step is very important in setting up the production environment for Magento. Failing to do this, may result in redirection to your development server.

Delete Test Data

Delete all the test data from the system by deleting them from the admin panel. To delete the test orders that you placed in the development environment follow this tutorial .

Reindex the data

Go to the admin panel. Click on the “Index Management” under “System”. Select all rows and reindex data.

Refresh Statistics

Click “Report/Refresh Statistics” and select all rows to refresh the statistics. Select “Refresh Lifetime Statistics” and click submit.

Switch off test mode

Make sure you disable the test mode for your payment gateway in the system.

The above said steps should help your Magento site published live.

Remember it is always a good idea to backup your db as it will delete all the details regarding the test sales you made.

DELETE FROM `sales_flat_order`;

TRUNCATE TABLE `sales_flat_invoice`;
TRUNCATE TABLE `sales_flat_invoice_comment`;
TRUNCATE TABLE `sales_flat_invoice_grid`;
TRUNCATE TABLE `sales_flat_invoice_item`;
TRUNCATE TABLE `sales_flat_order`;
TRUNCATE TABLE `sales_flat_order_address`;
TRUNCATE TABLE `sales_flat_order_grid`;
TRUNCATE TABLE `sales_flat_order_item`;
TRUNCATE TABLE `sales_flat_order_payment`;
TRUNCATE TABLE `sales_flat_order_status_history`;
TRUNCATE TABLE `sales_flat_shipment`;
TRUNCATE TABLE `sales_flat_shipment_comment`;
TRUNCATE TABLE `sales_flat_shipment_grid`;
TRUNCATE TABLE `sales_flat_shipment_item`;
TRUNCATE TABLE `sales_flat_shipment_track`;
TRUNCATE TABLE `sales_payment_transaction`; 

What is Cross Page Postback?

In Asp.Net world a Cross Page Postback refers to passing form data from one web page to another. In Asp.Net this is handled differently when compared to classic Asp or any other server side languages. In this tutorial let us see how a static Asp.Net control and dynamic Asp.Net controls are handled in a Cross Page Postback.

Asp.Net controls are nothing but the form elements and dynamic Asp.Net controls here, I mean the controls that are created on the fly during runtime.

Step 1:

First we create a source page front end with static form control. We will add a text box control and button to the form. By default the PostBackUrl property of the button is assigned to the same page. Since we are dealing with cross page postback, we assign it to Target.aspx page.

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Source.aspx.cs" Inherits="WebApplication1.Source" %>


 
 

Step 2:

Now we need to get the form data in the Target.aspx page. Let us first design the front end for the Target.aspx page.

<%@ Page Title="About Us" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Target.aspx.cs" Inherits="WebApplication1.Target"  %>
<%@ PreviousPageType VirtualPath="~/Source.aspx" %>


    

        Target Page
    

    

        

    
    
   

In the above snippet you can see a PreviousPageType directive with virtual path set to Source.aspx . This is how the target page knows, from where the cross page postback comes from.

Step 3:

In this step we write some c# code inside the page load event for the target page to retrieve the value from the source page. Let us see how to do it.

  protected void Page_Load(object sender, EventArgs e)
  {
     if (this.PreviousPage.IsCrossPagePostBack)
     {
      HtmlGenericControl br = new HtmlGenericControl("br");
      ContentPlaceHolder con = (ContentPlaceHolder)this.PreviousPage.Master.FindControl("MainContent");
      TextBox txt1 = (TextBox)con.FindControl("TextBox1");
      Label1.Text = txt1.Text;
      /*Dynamic controls code to follow*/
      }
   }

In the above snippet we first check the if PreviousPage has sent a Cross Page Postback, if yes then we get the placeholder control called “MainContent” in the master page. We find the textbox control in the previous page using its ID, “TextBox1″. The value of the TextBox1 can be retrieved using the Text property.

Step 4:

Now let us see how to retrieve the values for the dynamic controls in the target page. So lets add some c# code to the page load event of the Source page to create the dynamic controls on the fly.

 protected void Page_Load(object sender, EventArgs e)
 {

     ListItem lst1 = new ListItem("Item1", "CheckBox1 is Checked");

     ListItem lst2 = new ListItem("Item2", "CheckBox2 is Checked");

     CheckBoxList1.Items.Add(lst1);
     CheckBoxList1.Items.Add(lst2);

     ListItem lst3 = new ListItem("Item1", "RadioButton1 is Checked");

     ListItem lst4 = new ListItem("Item2", "RadioButton2 is Checked");

     RadioButtonList1.Items.Add(lst3);
     RadioButtonList1.Items.Add(lst4);

 }

In the snippet above a checkbox list and radio button list is created during the runtime, when the source page is loaded.

Step 5:

The target page can retrieve the values from the dynamic control as follows,

protected void Page_Load(object sender, EventArgs e)
{

   if (this.PreviousPage.IsCrossPagePostBack)
   {
      HtmlGenericControl br = new HtmlGenericControl("br");
      ContentPlaceHolder con = (ContentPlaceHolder)this.PreviousPage.Master.FindControl("MainContent");
      TextBox txt1 = (TextBox)con.FindControl("TextBox1");
      Label1.Text = txt1.Text;
      CheckBoxList ck1 = (CheckBoxList)con.FindControl("CheckBoxList1");
      foreach(ListItem item in ck1.Items)
      {
          if (item.Selected)
          {
           Label lbl = new Label();
           lbl.Text = item.Value;
           LabelHolder.Controls.Add(br);
           LabelHolder.Controls.Add(lbl);
          }
     }
     RadioButtonList rbtn1 = (RadioButtonList)con.FindControl("RadioButtonList1");
     foreach (ListItem item in rbtn1.Items)
     {
       if (item.Selected)
       {
         Label lbl = new Label();
         lbl.Text = item.Value;
         LabelHolder.Controls.Add(br);
         LabelHolder.Controls.Add(lbl);
         break;
       }        
    }
 }

In the above snippet we check for the selected items from the ckecboxbox list control and radiobutton list control. The value is retrieved from the list item and assigned to the labels that are created during the runtime.

Border Radius

-moz-border-radius-topleft: 12px;
-moz-border-radius-topright: 12px;
-moz-border-radius-bottomright: 12px;
-moz-border-radius-bottomleft: 12px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
border-bottom-left-radius: 12px;  

Compatibility

: 3.0 +

: 4.0 +

: 3.1 +

: 9 +

: 10.5 +

Box Resize

resize: both;/*other options : horizontal, vertical */
overflow: auto;

Compatibility

: 4.0 +

: 3.1 +

Box Shadow

-webkit-box-shadow: 2px 3px 4px #0d0c0d;
-moz-box-shadow: 2px 3px 4px #0d0c0d;
box-shadow: 2px 3px 4px #0d0c0d; 

Compatibility

: 3.5 +

: 4.0 +

: 3.1 +

: 10.5 +

Box Sizing

/*content-box by default */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; 

Compatibility

: 1.0 +

: 0.2 +

: 3.0 +

: 8 +

: 7 +

Font Face

To know more about bullet-proof concept by Paul Irish for font-face and its usage click here.

@font-face {
font-family: 'Garamond';
src: url('Garamond.eot');
src: local('☺'),
url('Garamond.woff') format('woff'),
url('Garamond.ttf') format('truetype');
}

Compatibility

: 3.5 +

: 4.0 +

: 3.2 +

: 9 +

: 10.1 +

Gradients

background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e));

Compatibility

: 3.6 +

: 4.0 +

: 4.0 +

Multiple Columns

-moz-column-count: 2;
-moz-column-gap: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
column-count: 2;
column-gap: 20px;

Compatibility

: 3.0 +

: 4.0 +

: 3.1 +

Outline

outline: 10px solid #302b30;
outline-offset: 20px; 

Compatibility

: 3.0 +

: 4.0 +

: 3.1 +

: 9 +

: 10.5 +

RGBA

background-color: rgba(200, 250, 130, 0.7);
color: rgba(200, 250, 130, 0.7);

Compatibility

: 3.0 +

: 4.0 +

: 3.1 +

: 10.0 +

Text Shadow

text-shadow: 2px 2px 4px #1f021f;
filter: dropshadow(color=#1f021f, offx=2, offy=2);

Compatibility

: 3.5 +

: 4.0 +

: 4.0 +

: 9.6 +

Transform

-moz-transform: scale(1) rotate(5deg) translate(20px, 20px) skew(5deg, 5deg);
-webkit-transform: scale(1) rotate(5deg) translate(20px, 20px) skew(5deg, 5deg);
-o-transform: scale(1) rotate(5deg) translate(20px, 20px) skew(5deg, 5deg);
-ms-transform: scale(1) rotate(5deg) translate(20px, 20px) skew(5deg, 5deg);
transform: scale(1) rotate(5deg) translate(20px, 20px) skew(5deg, 5deg);

Compatibility

: 3.5 +

: 3.0 +

: 3.2 +

: 10.5 +

Transition

-webkit-transition: all 10s ease-in;
-moz-transition: all 10s ease-in;
-o-transition: all 10s ease-in;
transition: all 10s ease-in;

Compatibility

: 4.0 +

: 3.0 +

: 3.2 +

: 10.5 +

I needed a simple and easy to use plugin for disabling or enabling wordpress users. Surprisingly I didn’t find any plugins that disable or enable wordpress users.

This situation could arise due to various reasons. So I came up with a plugin that does the work for me.

I made this plugin available to everyone. Feel free to use it.

NOTE: This plugin does not disable the admin user.

Screen Shots:

Change Log:

1.0.0

* Initial Release

1.0.1

* Bug Fix for updates

1.1.0

* Added new feature for disabling/enabling new users by default

1.1.1

* Added new feature for disabling/enabling anonymous users by default

2.0.0

* Added search function and pagination (by Digg style) .

2.1.0

* Bug fix and compatible with WP 3.5.1.

What is Ajax ?

AJAX is a technology that kept evolving from java applet days. It was notably used in web development when Google started deploying it in Gmail and Google maps extensively.

AJAX stands for Asynchronous Javascript and XML. As the name suggests the request from the end user is made asynchronously to the server. The requests and responses for the ajax is in XML format.

A request that is sent asynchronously from a browser to the server and receives the response in an async mode, doesn’t require you to refresh the page to display the results on the page. In other words, the user doesn’t realize when the request is been sent and the response is received back.

Now let us see an example of ajax using Jquery.

Ajax in Jquery

Jquery provides a very powerful library for ajax operations. As part of this tutorial, we will see how to edit the contents of the table and store that in the database using php and jquery. Remember we will be performing the inline edits asynchronously.

Step 1:

Let us start with building a database. Create a test database and load some test data.

Next we need to connect to database from our php code. Let me call this php file config.php and make sure you don’t give public access to it, as you will be storing all your DB credentials in this file.

define('DBHOST','YOUR HOST');
define('DBUSER','USERNAME');
define('DBPASS','PASSWORD');
define('DBNAME','DBNAME');
/*code to follow*/

Step 2:

Now you can test your database connection and write a function to retrieve the contents from the test db you created in step1.

$conn = mysql_connect(DBHOST,DBUSER,DBPASS);
mysql_select_db(DBNAME,$conn);

function get_data()
{
	
	$sql = "select * from TABLENAME";
	
	$rs = mysql_query($sql);
	
	return $rs;
}

Step 3:

Let us build the HTML to display the contents in a table we just retrieved from db in step 2. I marked the class of the td element that I want to edit to say ‘edit’ followed by its tag and row number in the db for updating the respective record in db.

    
No
    
Name
    
Description
    
Price



'.$rows['id'].'
        
'.$rows['name'].'
        
'.$rows['description'].'
        
'.$rows['price'].'

Step 4:

Now the table can be styled.

body
{
	margin:0;
	padding:0;
	background:#f4f4f4;
}

h1{margin:80px auto 0;width:288px}

table
{
	margin:100px auto;
	width:500px;
	border:1px solid #646464;
	position:relative;
}

tr,td
{
	text-align:center;
	border: 1px solid #ccc;
}

tr
{
	background:#99F;
}

.heading{background:#ccc;}

.alt
{
	background:#C4C4FF;
}

Step 5:

So now we have come to the javascript portion of the tutorial that adds ajax to your table you built. I want to make the td element editable when a ‘click’ event is triggered on it. The javascript that is used for making it an editable item is below,

$('td.edit').click(function(){
$(this).addClass('ajax');
$(this).html('');										
$('#editbox').focus();
});

Step 6:

We also want the editable items to be switched around as we move clicking on other td elements. So I added a script that switches the ajax class among the editable elements. We can add this script to the click event function. Now the above code looks like this,

$('td.edit').click(function(){
							 
 $('.ajax').html($('.ajax input').val());
 $('.ajax').removeClass('ajax');

 $(this).addClass('ajax');
 $(this).html('');
										
$('#editbox').focus();								        
  
} );

Step 7:

Next we want the edits made to be passed on to the server to store it in DB. I want that to happen when user presses Enter key. How can that be achieved? First we have to check if a user has pressed Enter key and next if it is Enter key pressed on that particular editable element, we have to pass the value entered by the user to our server side code to handle the data storage.

$('td.edit').keydown(function(event){
    if(event.which == 13)
   { 
      $.ajax({    type: "POST",
      url:"config.php",
      data: //To be discussed in next step,
      success: function(data){
	   $('.ajax').html($('.ajax input').val());
	    $('.ajax').removeClass('ajax');
       }});
    }
								  
});

The above javascript tells the browser to look for the keydown event and if it is triggered it will check if the keypressed is ‘Enter key’ ( Enter key value ’13′). Once it passes the check it calls the ‘config.php’ (server-side code). Note it uses the POST method for the call.

On a successful callback the success function gets executed. I want to make the editable area back to the regular td element. So we will be again removing the ‘ajax’ class for that td element and pass the value of the editable box to the td element.

Step 8:

In the above step you would have noticed ‘data’ key value pair. We will discuss how we are going to construct the data that will be sent as request to the config.php .

In Step 3, I have mentioned that editable td elements will be marked with their corresponding tag (table column name) and row number of the table. We are going to use that to pass as data to server-side along with the edited value.

so now the above code looks like this with complete data construction.

$('td.edit').keydown(function(event){
	 arr = $(this).attr('class').split( " " );
	 if(event.which == 13)
	 { 
		$.ajax({    type: "POST",
			        url:"config.php",
				data: "value="+$('.ajax input').val()+
                                        "&rownum="+arr[2]+"&field="+arr[1],
				success: function(data){
					 $('.ajax').html($('.ajax input').val());
				         $('.ajax').removeClass('ajax');
			}});
		}
								  
	});

Step 9:

We have to write the function to handle the data that have been sent in the above step. Also this function will be called only if the data have been received from the browser.

//check if the data is received from the browser
//and calls the update function
if(isset($_POST['rownum']))
{
	update_data($_POST['field'],$_POST['value'],$_POST['rownum']);
}
/*php code*/
function update_data($field, $data, $rownum)
{

	
	$sql = "update TABLENAME set ".$field." = '".$data."' where id = ".$rownum;
	
	mysql_query($sql) or die("Couldn't connect to db");
	
	
}

So now your config.php should looks like this

define('DBHOST','YOUR HOST');
define('DBUSER','USERNAME');
define('DBPASS','PASSWORD');
define('DBNAME','DBNAME');

$conn = mysql_connect(DBHOST,DBUSER,DBPASS);
	
mysql_select_db(DBNAME,$conn);

if(isset($_POST['rownum']))
{
	update_data($_POST['field'],$_POST['value'],$_POST['rownum']);
}


function get_data()
{
	
	$sql = "select * from TABLENAME";
	
	$rs = mysql_query($sql);
	
	return $rs;
}

function update_data($field, $data, $rownum)
{

	
	$sql = "update TABLENAME set ".$field." = '".$data."' where id = ".$rownum;
	
	mysql_query($sql) or die("Couldn't connect to db");
	
	
}

Step 10:

Finally, I want to add the ‘blur’ event to the editable box, so that the editable box disappears when the focus is blurred out from it.

$('#editbox').live('blur',function(){
		$('.ajax').html($('.ajax input').val());
		$('.ajax').removeClass('ajax');
});

Note:
The above script uses ‘live’ keyword to bind the ‘blur’ event to the editable box, because the ‘editbox’ element is a dynamic one. It is been added dynamically when you click on any editable td element.

This completes the tutorial. Hope you enjoyed this tutorial and if you liked this tutorial consider sharing it.

Here are some of the examples from JsFiddle.

I will walk you through how to create a floating toolbar for your website in this post using jquery. The floating toolbar sticks to page, even when user scrolls the page.

All utilities or links that you need to show to the user can be placed in the toolbar. The user can access the utilities without having them to leave the current section where user is in.

Well, enough about me describing the floating toolbar, let us see it in action.

Step 1:

First I am going to start with the HTML,

        
Move Up
   	

             
Twitter
            
Facebook
            
buzz
	    
reddit
            
Sharethis
        
   

Step 2:

Next, lets add some styles to the HTML,

  body
  {
      background:#ccc;
      min-height: 1000px;
      margin: 0;
      padding: 0;
  }

  
  a{color:#fff;}
  
  #toolbar{
      background:url(toolbar.png) no-repeat center center; 
     margin: 0 auto; 
     height:35px;
     position:fixed;
     bottom:0;
     width:100%
  }
  
  .moveup{position:fixed;top:0;}
  
  .movedown{position:fixed;bottom:0;}
  
  
  #move{
    color:#333;
    float:right;
    font-size:11px;
    position:static;
    width:70px;
    font-weight:bold;
  }
  
  #move:hover{
      cursor:pointer;
  }
  
  #socialmedia{margin: 0 auto; width:450px;}
  
  #twitter,#facebook,#buzz,#reddit,#sharethis
  {
      float:left;
      padding:5px 20px;
  }

Step 3:

Now we have added the styles to the HTML, to bring the floating toolbar to life lets add javascript to it.

Once the page loads, after a while we want the toolbar to go transparent, with some nice animation effect.

      $('#toolbar').animate({opacity:0.1},{duration: 'slow', queue: false});

Step 4:

When you move the mouse over the page, the toolbar should be highlighted, lets set the opacity to 1 if mousemove event is triggered on the page.

      $(this).mousemove(function(event){
            $('#toolbar').animate({opacity: 1},{duration: 'slow', queue: false});
    });

Step 5:

I want to bring back the opacity to 0.1, if there is a idle period or inactivity. To find the inactivity over the page, let us write a small javascript function. I have used two global variables here, one for calculating the time elapsed by user inactivity and the other variable is to set the time interval.

      var elapsedtime = 0;
      var time;
   
      //Function to calculate idle time

    $.fn.Idle = function(){
    return this.each(function(){
        
        var interval  = 2 //set 2 seconds max timeout
        
        time = setInterval(function(){
                  elapsedtime++;
                  if(elapsedtime == interval)
                    $('#toolbar').animate({opacity:0.1},{duration: 'slow', queue: false},'easeout');
        },2000);
                            

     });
    
   };
   

You can also use a jquery plugin to find idle time on your page. The following are the famous idle timer plugins,

• Paul Irish’s Idle Timer Plugin
• Werk’s Nap Plugin

So now if you have inactivity for 2 seconds, the toolbar starts fading out.

Step 6:

I want the toolbar not to fade out when I have mouse over the toolbar. But right now it fades out after 2 seconds. For that I have written one more function,

     $.fn.toolbar = function(){
    
      return this.each(function(){
                             
        $('#toolbar').mousemove(function(event){
            window.clearInterval(time);
            $('#toolbar').animate({opacity: 1},{duration: 'slow', queue: false});
        });
        
        $('#toolbar').mouseout(function(event){
            elapsedtime = 0;
            $(this).Idle();
            $('#toolbar').animate({opacity:0.1},{duration: 'slow', queue: false});
        });
    });
    
  };

Step 7:

It would be nice to have the toolbar highlighted when we scroll the page. That’s right, this gives us the complete floating toolbar. The javascript that does the trick is below,

     $(window).scroll(function(){
     
     elapsedtime = 0;
     
     $('#toolbar').animate({opacity: 1},{duration: 'slow', queue: false});
      
     });

Step 8:

Now what is next? Lets allow the user to move the toolbar either top or bottom according to their convenience. Here is the script that toggles the toolbar.

      $('#move').toggle(function(){
			$('#toolbar').removeClass('movedown');
			$('#toolbar').addClass('moveup');
			$(this).html('Move Down');
			$(this).css('top',35);
	},function(){
			$('#toolbar').removeClass('moveup');	
			$('#toolbar').addClass('movedown');
			$(this).html('Move Up');
			$(this).css('top',-12);
	});

Step 9:

We can integrate all the code pieces now and this is how it looks,

  /*CSS Starts*/
  body
  {
      background:#ccc;
      min-height: 1000px;
      margin: 0;
      padding: 0;
  }

  
  a{color:#fff;}
  
  #toolbar{
      background:url(toolbar.png) no-repeat center center; 
      margin: 0 auto; 
      height:35px;
      position:fixed;
      bottom:0;
      width:100%
  }
  
  .moveup{position:fixed;top:0;}
  
  .movedown{position:fixed;bottom:0;}
  
  
  #move{
    color:#333;
    float:right;
    font-size:11px;
    position:relative;
    top:-12px;
    right: 218px;
    width:70px;
    font-weight:bold;
  }
  
  #move:hover{
      cursor:pointer;
  }
  
  #socialmedia{margin: 0 auto; width:450px;}
  
  #twitter,#facebook,#buzz,#reddit,#sharethis
  {
      float:left;
      padding:5px 20px;
  }
/*CSS Ends*/
 

/*Javascript Starts */


var elapsedtime = 0;
var time;

$.fn.Idle = function(){
    return this.each(function(){
        
        var interval  = 2 //set 2 seconds max timeout
        
        time = setInterval(function(){
                  elapsedtime++;
                  if(elapsedtime == interval)
                    $('#toolbar').animate({opacity:0.1},
                   {duration: 'slow', queue: false},'easeout');
        },2000);
                            

    });
    
};


$.fn.toolbar = function(){
    
    return this.each(function(){
                             
        $('#toolbar').mousemove(function(event){
            window.clearInterval(time);
            $('#toolbar').animate({opacity: 1},
               {duration: 'slow', queue: false});
        });
        
        $('#toolbar').mouseout(function(event){
            elapsedtime = 0;
            $(this).Idle();
            $('#toolbar').animate({opacity:0.1},
                {duration: 'slow', queue: false});
        });
    });
    
};

                        
            

$(window).scroll(function(){
     
     elapsedtime = 0;
     
     $('#toolbar').animate({opacity: 1},
           {duration: 'slow', queue: false});
      
});



$(function(){    
    
    $(this).Idle();
    
    $('#toolbar').animate({opacity:0.1},
           {duration: 'slow', queue: false});
    
    $(this).mousemove(function(event){
            elapsedtime = 0;
            $('#toolbar').animate({opacity: 1},
               {duration: 'slow', queue: false});
    });
    
    $('#toolbar').toolbar();
    
    $('#move').toggle(function(){
            $('#toolbar').removeClass('movedown');
            $('#toolbar').addClass('moveup');
            $(this).html('Move Down');
            $(this).css('top',35);
    },function(){
            $('#toolbar').removeClass('moveup');    
            $('#toolbar').addClass('movedown');
            $(this).html('Move Up');
            $(this).css('top',-12);
    });
    
});
/*Javascript Ends*/

   

        
Move Up
           

            
Twitter
            
Facebook
            
buzz
            
reddit
            
Sharethis
        
   

Hope you enjoyed this tutorial. If you have any comments or feedback, please use the form below for your voice to be heard.

So what is special about HTML 5 along with CSS3 and where does it stand out from their previous versions? The following features added to HTML 5 will definitely give you the answer.

1. Doctype declaration:

With older HTML versions the doctype declaration was a verbose one. I have been working on html almost every day, but still I don’t know the full doctype declaration that is used above <html> tag, atleast with me. But with HTML 5 it just requires <!DOCTYPE html> and it is case insensitive.

2. New Element tags

There are a number new element tags added to HTML 5.

An example comprising of some of the above tags

<header>Welcome to HTML5 Era</header>
<article>
 <hgroup>
  <h1>Music</h1>
  <h2>Trance - a genre of music</h2>
 </hgroup>
<details>
 <summary>Details about Trance</summary>
 <p>Nation of origin: abc</p>
 <p> History: Lposem seu edum ...</p>
 <p>I like trance music</p>
</details>
<figure>
 <img src="demo.jpg" alt="demo">
 <figcaption>Demo Image</figcaption>
</figure>
 <section>
  <h1>Techno Fusion</h1>
  <p>Music fusion with techno beats</p>
   <meter min="0" max="100" value="75">Percentage</meter>
   <mark>Like</mark>
 </section>
 <section>
  <h1>Electronica</h1>
  <p>Not a trance, but a variation of techno</p>
  <meter min="0" max="100" value="75">Percentage</meter>
  <mark>Like</mark>
 </section>
</article>
</footer><time>Jul 04, 2010</time></footer>

3. New Input types

The following is a list of new input types,

4. New Attributes

5. How to check the support of HTML5 features in your browsers?

“Modernizr” is a script that is released under MIT license. The latest stable version is 1.5 . It supports the ability to check most of the features of HTML 5.

• Download the script from here
• Include the script in your head tag
• Check for the support in your browser as given below.

 
if (Modernizr.XYZ) {

// XYZ feature of HTML 5 is supported

} else {

//XYZ feature of HTML 5 is not supported by your browser.
//Implement Fallback approach
}

For more information on how to check for the support for different HTML 5 features, click here .

6. How to accommodate cross browsers?

Google chrome frame is an ideal solution to support more HTML 5 features in cross browsers, especially  IE browsers. It also accelerates the execution time for javascript used in your web pages. Chrome frame is still in beta version lacking support for some of the features of HTML 5. To get started with chrome frame follow the link here.

7. What is next?

HTML 5 has created lot of expectations and of course raised more questions among web application developers. But importantly re-thinking the way the traditional web development practices were followed. Retrospecting the practices that were followed with web development approach, HTML 5 has taken web development into a new different level. Now the CSS role among  html elements is getting refined.

HTML 5 also created a new sensation in rich media web applications and the way content is delivered. This is a whole new perspective of HTML 5 delivering  rich media content with fallback approach to support different browsers and target all users. Kaltura is one, that embraced HTML 5 and came up with rich media content delivery network with fall back approach for HTML 5. For more information on Kaltura click here.

This is an overview of HTML 5 features for those who are ready to move from HTML 4 to HTML 5. I have not covered advanced topics of HTML 5 here.

Do you have anything to share about HTML 5 ? Post your comments below.

Introduction:

MVC stands for Model View Controller. Those of you not familiar with MVC, it is a software design pattern. Basically it aims with separation of concern. Each component in your website architecture model has to do what it exactly needs to do.

For instance, your database connection class has to connect to the database and handle the connection state. It should not do any other work apart from the connection establishment to your DB. The bottom line is your components should not be over loaded.

M – Model (Represents the Database)

V – View (Represents the HTML/CSS – Front End)

C - Controller (Represents the middle component that bridges Model and View). Controllers are used for rendering the views.

More information on the MVC pattern can be found here

Code Igniter Framework:

Code Igniter framework follows MVC pattern. The objective of this tutorial is to understand MVC in Code Igniter Framework. The prerequisite for this tutorial is Object Oriented Programming in PHP. I walk you through an example of how to create an subscribers list and manage them, in Code Igniter.

Step 1:

Download the latest stable version of Code Igniter from here

Step 2:

Extract the downloaded package to your root directory of your site. Now the directory structure should like the following,

<root directory>
——->system
——->user_guide
——->index.php
——->license.txt

Step 3:

Now its time to set up your website environment. Look for “application” folder inside “system” folder. Copy that folder and place it under root directory,

<root directory>
——->application
——->system
——->user_guide
——->index.php
——->license.txt

Change the following in /application/config/config.php and remove the index.php, so that it is not displayed in the url.

$config['base_url']	= "YOUR SERVER URL";
$config['index_page'] = "";//Remove Index.php

Step 4:

If you have removed the index.php in the above step follow step 4 otherwise proceed to step 5. Add an .htaccess file with the following contents to your root directory.  These rewrite rules tell the server how to handle the removed index.php

RewriteEngine On
RewriteCond %{REQUEST_URI} ^system.*
RewriteRule ^(.*)$ /index.php/$1 [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]

Step 5:

To set up your home page of the site look for the /application/config/routes.php and change the following line,

$route['default_controller'] = "YOUR DEFAULT CONTROLLER";//Controller handling home page

Step 6:

Final step in setting up your website environment is assign database to your application. Change the following db variables in /application/config/database.php

$db['default']['hostname'] = "YOUR DB HOST NAME";
$db['default']['username'] = "YOUR DB USER NAME";
$db['default']['password'] = "YOUR DB PASSWORD";
$db['default']['database'] = "YOUR DATABASE NAME";

Remember, you should not set public access to this file in your server, as your db information will be available to others.  So make sure database.php is not accessible from outside the server.

Step 7:

Now we will be seeing an example application created using the code igniter framework. The features of the example are

• allows user to subscribe
• store subscriber information in the db
• admin access subscribers information and send email to the subscribers.

Let us first start with creating a database for our application. We need a table for storing a subscribers information and a table for storing admin user information.

Fill in your admin user information in the “panelowner” table. We will be using MD5 hash for the password field, so make sure you apply md5 to your password field in phpMyadmin.

Step 8:

To begin with one should know that controllers file should be placed under controllers folder of your application directory and so as with view files in “view” folder and model files in “model” folder. Create a controller called “subscribe” for the subscriber front end. Call the model that will be used for the subscribe in the constructor and load the form helper class of Code Igniter(CI). This is where CI becomes very handy and more powerful. The form validation becomes very easy by using form_validation library. The function “feed” uses the form validation class provided by CI.

class Subscribe extends Controller {
	
	function Subscribe()
	{
		parent::Controller();
		$this->load->helper('form');
		$this->load->model('subscribe_model');
	}
/*..... code to follow .......*/

function feed()
{
     ........Code..........
     //Load Form Validation Library
     $this->load->library('form_validation');
     /*..... code to follow.......*/
}

To set and check the validation rules, the code is below. The rule can be specifed as ‘email’, ‘Email’, ‘trim|required|valid_email|xss_clean’ where email is the post field name, Email is the string used when error is displayed, required denotes a required field,valid_email checks for if the email is of the correct format, xss_clean and trim is used for the pruning the data.

	
    //Set Validation Rules
    $this->form_validation->set_rules(......rules......);
		
    //Run the Form Validation
    if ($this->form_validation->run() == TRUE)
    {
           /*..... do something if validation passes.......*/
    }
 

Step 9:

Create a view for the controller subscriber. Let us name the file as subscriber.php and place it in view folder of the application directory. Using form helper method “form_open” we can create a form as below and “subscribe/feed” is the action url for the form where “subscribe” denotes the controller name and “feed” denotes method name available in that controller. By default “form_open” uses POST method. The validation errors can be displayed using “validation_errors” method.

if (function_exists('validation_errors') && validation_errors())
{
	/*HTML Code*/
	echo validation_errors();
	/*HTML Code*/
}

       /*HTML Code*/
	 echo form_open('subscribe/feed'); 
        /*HTMl to follow*/

Step 10:

Create a model file named “subscriber_model.php” and place it under model folder of the application. Note that model filename should end as xxxx_model.php. First call the base class and load the database library provided by CI in the constructor. “subscribe_model.php” stores the subscriber’s email in the db.

class Subscribe_model extends Model{
	function Subscribe_model()
	{
		//Load base classess
		parent::Model();
		$this->load->database();
	}
      /*.....Code to follow......*/
      $data = array('email' => $email); 
     $result = $this->db->insert('subscribers',$data);
     /*......Code to follow.......*/
}

Step 11:

Similarly the admin panel is also built. The admin panel has two views. One for the login screen and other for managing the subscribers. So as I said before each view has their corresponding controllers and models.
The login session is created in the controller once the credentials match against the information in the database. The session is cleared when the admin logs out.

Load the session library provided by CI.

function Admin()
{
      parent::Controller();
      $this->load->library('session');
      $this->load->helper('form');
      $this->load->model('admin_model');
}

/*Session created if admin user credential match */
if($result)
{
	 //Set Admin User Seesion
	 $this->session->set_userdata(array('userid'=>$result[0]->id));
	 //Get Subscribers List
	 $result = $this->admin_model->get_subscribers();
	 //Call Manage
	 $this->manage_list($result,'Logged in successfully');
}

/*Session data cleared once admin user logs out*/
function logout()
{
	 //Clear Admin User Seesion
	 $this->session->set_userdata(array('userid'=>''));
	 $data['message'] = "Logged out successfully";
	 //Load Views
	 $this->load->view('adminheader');
	 $this->load->view('admin',$data);
	 $this->load->view('footer');
}

Note:
I have used email class library provided by CI for sending emails to the subscribers.

function send_mail()
{
        //Load email library
	$this->load->library('email');
       /*Code to follow*/
       
	//Prepare Email 
	$this->email->from('admin@demo.com', 'Admin');
	$this->email->subject('Subscriber Demo');
	$this->email->message($emailMessage);
	foreach($result as $iterator)
	{
		$this->email->to($iterator->email);
		$this->email->send();
	}
     /*Code to follow*/

}

There is bug in the email class that comes with CI package. To fix the bug go to /system/library/Email.php . On line number :938 look for the following code,

if ($this->protocol == 'mail')
{
	$this->_subject = $this->_headers['Subject'];
	unset($this->_headers['Subject']);
}

change it to

if ($this->protocol == 'mail')
{
	if (array_key_exists('Subject', $this->_headers))
	{
		$this->_subject = $this->_headers['Subject'];
		unset($this->_headers['Subject']);
	}
}

Hope this tutorial will be a good starting point to learn more about Code Igniter framework.