3 most recent blogs

3 most recent blogs http://www.rorguru.com/rss 3 most recent blogs en-gb http://creativecommons.org/licenses/by/2.0/3MostRecentBlogshttp://feedburner.google.com Thu, 19 Feb 2009 01:39:00 -0700 PayPal Integration <font face="arial,helvetica,sans-serif" size="2">The trend of today’s global web market is to develop the e-commerce based web application. For the development of e-Commerce web application, we are using very small & easy to use plugin like PayPalSDK. The use of this plugin is very simple and even budding rails developer can use it.<br />        Just download it from Paypal Developer center and follow the guidelines in that document. Within 3-4 hours, we can integrate paypal in our application.<br />        For live PayPal account, we have to change following user credentials in “profile.rb” in PayPalSDK plugin:<br /><br />       <u><strong> Sample code for “profile.rb”</strong></u><br /><br />        @@credentials ={"USER" => "xxxxxxxxxx", "PWD" => "xxxxxxxxxx", "SIGNATURE"=>"xxxxxxxxxxxxxxxxxxxxxxx" } <br />        # endpoint of PayPal server against which call will be made.   <br />        @@endpoints = {"SERVER" => "xxxxxxxxxxxxxxxxx", "SERVICE" => "/nvp/"}<br />        # Proxy information of the client environment.   <br />        @@proxy_info = {"USE_PROXY" => false, "ADDRESS" => nil, "PORT" => nil, "USER" => nil, "PASSWORD" => nil }<br />        # Information needed for tracking purposes.   <br />        @@client_info = { "VERSION" => "3.0", "SOURCE" => "PayPalRubySDKV1.2.0"</font> <h2></h2> <p></p><img src="http://feeds.feedburner.com/~r/3MostRecentBlogs/~4/cY1WeYyknfU" height="1" width="1"/> http://feedproxy.google.com/~r/3MostRecentBlogs/~3/cY1WeYyknfU/>        http://www.rorguru.com/<font face="arial,helvetica,sans-serif" size="2">The trend of today’s global web market is to develop the e-commerce based web application. For the development of e-Commerce web application, we are using very small & easy to use plugin like PayPalSDK. The use of this plugin is very simple and even budding rails developer can use it.<br />        Just download it from Paypal Developer center and follow the guidelines in that document. Within 3-4 hours, we can integrate paypal in our application.<br />        For live PayPal account, we have to change following user credentials in “profile.rb” in PayPalSDK plugin:<br /><br />       <u><strong> Sample code for “profile.rb”</strong></u><br /><br />        @@credentials ={"USER" => "xxxxxxxxxx", "PWD" => "xxxxxxxxxx", "SIGNATURE"=>"xxxxxxxxxxxxxxxxxxxxxxx" } <br />        # endpoint of PayPal server against which call will be made.   <br />        @@endpoints = {"SERVER" => "xxxxxxxxxxxxxxxxx", "SERVICE" => "/nvp/"}<br />        # Proxy information of the client environment.   <br />        @@proxy_info = {"USE_PROXY" => false, "ADDRESS" => nil, "PORT" => nil, "USER" => nil, "PASSWORD" => nil }<br />        # Information needed for tracking purposes.   <br />        @@client_info = { "VERSION" => "3.0", "SOURCE" => "PayPalRubySDKV1.2.0"</font> Wed, 11 Feb 2009 07:33:00 -0700 Twitter API integration <font face="arial,helvetica,sans-serif" size="2">We are vastly using API integration for different purposes in our application. We did several API integration like Basecamp API integration,Twitter API integration.<br />        We used Twitter API integration in ruzuku.com. In Twitter API integration, we can send data from our website to twitter and retrieve data from twitter website to our application by authenticating the user.<br /><br />        Sample Code for Retrieving data in Twitter:<br /><br /><br />        @user = User.find(xxxx)<br />        client = Twitter::Client.new(:login = 'xxxx', :password = 'xxxxxxx')<br />        @tweets = client.timeline_for(:user, :id = xxxx)<br />        //* In @tweets, we got values in hash    *//<br />        @tweets.each do |tweet|<br />        //*  In tweet, we can get a single record*//<br />        //*  Now we can get the data of a particular attributes like this*//<br />        @progress_tweet.twitterid = tweet.user.screen_name<br />        end<br /><br /><br />        Sample Code for sending data in Twitter:<br /><br />       #==============================================#<br />        client.message(:post, ‘messages’, id)<br /><br />       #==============================================#</font> <h2></h2> <p></p><img src="http://feeds.feedburner.com/~r/3MostRecentBlogs/~4/sh3Y9ljjYK4" height="1" width="1"/> http://feedproxy.google.com/~r/3MostRecentBlogs/~3/sh3Y9ljjYK4/>        client = Twitter::Client.new(:login = &http://www.rorguru.com/<font face="arial,helvetica,sans-serif" size="2">We are vastly using API integration for different purposes in our application. We did several API integration like Basecamp API integration,Twitter API integration.<br />        We used Twitter API integration in ruzuku.com. In Twitter API integration, we can send data from our website to twitter and retrieve data from twitter website to our application by authenticating the user.<br /><br />        Sample Code for Retrieving data in Twitter:<br /><br /><br />        @user = User.find(xxxx)<br />        client = Twitter::Client.new(:login = 'xxxx', :password = 'xxxxxxx')<br />        @tweets = client.timeline_for(:user, :id = xxxx)<br />        //* In @tweets, we got values in hash    *//<br />        @tweets.each do |tweet|<br />        //*  In tweet, we can get a single record*//<br />        //*  Now we can get the data of a particular attributes like this*//<br />        @progress_tweet.twitterid = tweet.user.screen_name<br />        end<br /><br /><br />        Sample Code for sending data in Twitter:<br /><br />       #==============================================#<br />        client.message(:post, ‘messages’, id)<br /><br />       #==============================================#</font> Wed, 11 Feb 2009 07:10:00 -0700 How to use ExtJS Grid with Rails <p><font face="arial,helvetica,sans-serif" size="2">ExtJS has become one of the most popular JavaScript frameworks available till date. It is an extensive JavaScript library with numerous components like windows, trees, layout and forms. All of these components not only look stunning but also closely resemble with desktop applications. One of the most exciting feature of this framework is native support for other popular JavaScript libraries like Prototype, Scriptaculous and Jquery. With Prototype being the default choice for many of the Rails projects, ExtJS components can be easily integrated without any additional requirements.<br /><br />    Among the various components provided by ExtJS, Grid is certainly one of the most powerful thing to use with extensive data handling features like remote sorting and pagination with inbuilt AJAX support. The Grid component can handle various data types starting from basic array to xml and json.<br /><br /><br />    Here is an example of using the Grid component with Rails. We will create a page that displays a list of employees in a Grid. At the very begining we need to download the latest ExtJS (2.02) from http://www.extjs.com/download and extract the zip file to organize the dowloaded files inside our rails project folder structure. We will use the following structure to organize ExtJS specific files:</font></p><p><font face="arial,helvetica,sans-serif" size="2">     *       ext-2.0.2/resources/images/default<br />      to /public/images<br /><br />    *       ext-2.0.2/resources/css/ext-all.css<br />      to /public/stylesheets/<br /><br />    *      ext-2.0.2/ext-prototype-adapter.js<br />      to /public/javascripts/ext<br /><br />    *      ext-2.0.2/ext-all-debug.js<br />      to /public/javascripts/ext/ (for production environment it is recomended to use<br />      ext-all.js  which is the compressed version of ext-all-debug.js).<br /><br />   <br /><br />    So now we should include the necessary files inside application.html.erb file to be able to access it:</font></p><p><font face="arial,helvetica,sans-serif" size="2"><br />    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML<br />    4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><br /><br />    <html><br /><br />  <br />    <head><br /><br />        <meta http-equiv="Content-Type"<br />    content="text/html; charset=iso-8859-1" /><br /><br />        <title></title><br /><br />        <%= stylesheet_link_tag 'ext-all.css' %><br /><br />        <%= javascript_include_tag<br />    "prototype", "scriptaculous", "effects",<br />    "ext-prototype-adapter", "ext-all-debug",<br />    "application" %><br /><br />  <br />    </head><br /><br />  <br />    <body><br /><br />        <%= yield %><br /><br />  <br />    </body><br /><br /><br />    </html><br />  <br /><br />    Now the next step is to prepare the view template (employees/employees.html.erb) where we are going to show the Grid with the list of employee data. Here we will place a div element with id “employee-grid” that will be used as the underlying element of the Grid component.<br /><br />    <div id="employee-grid"></div><br /><br /><br />    Next we will write some JavaScript code to setup and render the Grid component. We will write this code inside the application.js within the Ext.onReady block, so that the Grid initializes during the page load time. In this code, first we create an Ext.data.Store object to serve as a client side data store. In the Store object we create an Ext.data.HttpProxy to bind the url to fetch the data from the server. We will use JsonReader for reading the data sent back by the server as JSON string. We will also configure the Grid with its inbuilt capabilities of remote sorting and paging.<br /><br /><br />    Finally we create the Grid, rendering within the page and call the load method of the Store object to perform initial data load.<br /><br />    JavaScript code: application.js<br /><br />    Ext.onReady(function(){<br /><br />    // create the Data Store<br /><br />    var store = new Ext.data.Store({<br /><br />        proxy: new Ext.data.HttpProxy({<br /><br />            url: '/employees',<br /><br />            method: 'GET'<br /><br />        }),<br /><br /> <br />      // create reader that reads the<br />    Employee records<br /><br />        reader: new Ext.data.JsonReader({<br /><br />            root: 'employees',<br /><br />            totalProperty: 'total',<br /><br />            id: 'id',<br /><br />            fields: [<br /><br />                'last_name', 'first_name', 'department', 'designation'<br /><br />            ]<br /><br />        }),<br /><br />         // turn on remote sorting<br /><br />        remoteSort: true<br /><br />    });<br /><br />    store.setDefaultSort('last_name', 'asc');<br /><br /><br />    // the column model has information about grid columns<br /><br />    // dataIndex maps the column to the specific data<br />    field in<br /><br />    // the data store<br /><br />    var cm = new Ext.grid.ColumnModel([{         <br /><br />           header: "Last Name",<br /><br />           dataIndex: 'last_name',<br /><br />           width: 150<br /><br />        },{<br /><br />           header: "First Name",<br /><br />           dataIndex: 'first_name',<br /><br />           width: 150<br /><br />        },{<br /><br />           header: "Department",<br /><br />           dataIndex: 'department',<br /><br />           width: 150<br /><br />        },{<br /><br />           header: "Designation",<br /><br />           dataIndex: 'designation',<br /><br />           width: 150<br /><br />        }]);<br /> <br /><br />    // by default columns are sortable<br /><br />    cm.defaultSortable = true;<br /><br /><br />    var grid = new Ext.grid.GridPanel({<br /><br />        el:'employee-grid',<br /><br />        width:700,<br /><br />        height:500,<br /><br />        title:'Employee Records',<br /><br />        store: store,<br /><br />        cm: cm,<br /><br />        trackMouseOver:false,<br /><br />        sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn}),<br /><br />        loadMask: true,<br /><br />        viewConfig: {<br /><br />            forceFit:true /*to auto expand the size of the columns to fit the grid width and prevent horizontal scrolling*/<br /><br />        },<br /><br />        bbar: new Ext.PagingToolbar({<br /><br />            pageSize: 20,<br /><br />            store: store,<br /><br />            displayInfo: true,<br /><br />            displayMsg: 'Displaying records {0} - {1} of<br />    {2}',<br /><br />            emptyMsg: "No records to display"<br /><br />        })<br /><br />    });<br /><br /><br />    // render it<br /><br />    grid.render();<br /><br /><br />    // trigger the data store load<br /><br />    store.load({params:{start:0, limit:25}});<br /><br />    });<br /><br />    Now we have to write the backend code to actually serve the data to the Grid component. For this purpose we will create a scaffold called employees with REST based actions. As we have used '/employees' for the data store with 'GET'method, Rails will automatically route this to '/employees/index' action. To interact with the database table we will also create a model class named Employee.<br /><br />    The backend code will be pretty much simple as usual. We will fetch records form the table via the Employee model class and return it to the front end as a JSON string. Rails has in-built support for JSON, so we do not require to do anything extra for it. We also need to take care of the remote sorting on the backend as the Ext Grid component passes the following four params when a Grid header is clicked: start, limit,sort,dir. Also for pagination, we will use 'will_paginate' plugin, as from version 2.0, Rails has dropped its inbuilt pagination support.<br /><br />    Controller Code: employees_controller.rb<br /><br /><br />    def index<br /> <br />    start = (params[:start] || 0).to_i<br /> <br />    size = (params[:limit] || 20).to_i<br /> <br />    page = ((start/size).to_i) + 1<br /> <br />    sort =<br />    "#{params[:sort]} #{params[:dir]}" || "id asc"<br /><br /><br />      @employees = Employee.find(:all,<br /><br />        :page => page,<br /><br />        :per_page => size,<br />   <br />        :order => sort<br /> <br />    )<br /><br /> <br />    rtndata = {}<br /> <br />    rtndata[:total] = @employees.total_entries<br /> <br />    rtndata[:employees] = @employees.collect {|e| {<br /><br />        :id => e.id,<br /><br />        :last_name => e.last_name,<br /><br />        :first_name => e.first_name,<br /><br />        :department => e.department,<br /><br />        :designation => e.designation<br /> <br />    }}<br />  <br />    respond_to do |format|   <br />  <br />    format.json  { render :json => rtndata.to_json }<br /><br />      end<br /><br />    end<br /><br /><br />    Thats it! These are the basic steps needed to integrate the Ext Grid component with Rails backend.</font></p> <h2></h2> <p></p><img src="http://feeds.feedburner.com/~r/3MostRecentBlogs/~4/SQiy-zNLPkE" height="1" width="1"/> http://feedproxy.google.com/~r/3MostRecentBlogs/~3/SQiy-zNLPkE/>        <%= stylesheet_link_tag &http://www.rorguru.com/<p><font face="arial,helvetica,sans-serif" size="2">ExtJS has become one of the most popular JavaScript frameworks available till date. It is an extensive JavaScript library with numerous components like windows, trees, layout and forms. All of these components not only look stunning but also closely resemble with desktop applications. One of the most exciting feature of this framework is native support for other popular JavaScript libraries like Prototype, Scriptaculous and Jquery. With Prototype being the default choice for many of the Rails projects, ExtJS components can be easily integrated without any additional requirements.<br /><br />    Among the various components provided by ExtJS, Grid is certainly one of the most powerful thing to use with extensive data handling features like remote sorting and pagination with inbuilt AJAX support. The Grid component can handle various data types starting from basic array to xml and json.<br /><br /><br />    Here is an example of using the Grid component with Rails. We will create a page that displays a list of employees in a Grid. At the very begining we need to download the latest ExtJS (2.02) from http://www.extjs.com/download and extract the zip file to organize the dowloaded files inside our rails project folder structure. We will use the following structure to organize ExtJS specific files:</font></p><p><font face="arial,helvetica,sans-serif" size="2">     *       ext-2.0.2/resources/images/default<br />      to /public/images<br /><br />    *       ext-2.0.2/resources/css/ext-all.css<br />      to /public/stylesheets/<br /><br />    *      ext-2.0.2/ext-prototype-adapter.js<br />      to /public/javascripts/ext<br /><br />    *      ext-2.0.2/ext-all-debug.js<br />      to /public/javascripts/ext/ (for production environment it is recomended to use<br />      ext-all.js  which is the compressed version of ext-all-debug.js).<br /><br />   <br /><br />    So now we should include the necessary files inside application.html.erb file to be able to access it:</font></p><p><font face="arial,helvetica,sans-serif" size="2"><br />    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML<br />    4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><br /><br />    <html><br /><br />  <br />    <head><br /><br />        <meta http-equiv="Content-Type"<br />    content="text/html; charset=iso-8859-1" /><br /><br />        <title></title><br /><br />        <%= stylesheet_link_tag 'ext-all.css' %><br /><br />        <%= javascript_include_tag<br />    "prototype", "scriptaculous", "effects",<br />    "ext-prototype-adapter", "ext-all-debug",<br />    "application" %><br /><br />  <br />    </head><br /><br />  <br />    <body><br /><br />        <%= yield %><br /><br />  <br />    </body><br /><br /><br />    </html><br />  <br /><br />    Now the next step is to prepare the view template (employees/employees.html.erb) where we are going to show the Grid with the list of employee data. Here we will place a div element with id “employee-grid” that will be used as the underlying element of the Grid component.<br /><br />    <div id="employee-grid"></div><br /><br /><br />    Next we will write some JavaScript code to setup and render the Grid component. We will write this code inside the application.js within the Ext.onReady block, so that the Grid initializes during the page load time. In this code, first we create an Ext.data.Store object to serve as a client side data store. In the Store object we create an Ext.data.HttpProxy to bind the url to fetch the data from the server. We will use JsonReader for reading the data sent back by the server as JSON string. We will also configure the Grid with its inbuilt capabilities of remote sorting and paging.<br /><br /><br />    Finally we create the Grid, rendering within the page and call the load method of the Store object to perform initial data load.<br /><br />    JavaScript code: application.js<br /><br />    Ext.onReady(function(){<br /><br />    // create the Data Store<br /><br />    var store = new Ext.data.Store({<br /><br />        proxy: new Ext.data.HttpProxy({<br /><br />            url: '/employees',<br /><br />            method: 'GET'<br /><br />        }),<br /><br /> <br />      // create reader that reads the<br />    Employee records<br /><br />        reader: new Ext.data.JsonReader({<br /><br />            root: 'employees',<br /><br />            totalProperty: 'total',<br /><br />            id: 'id',<br /><br />            fields: [<br /><br />                'last_name', 'first_name', 'department', 'designation'<br /><br />            ]<br /><br />        }),<br /><br />         // turn on remote sorting<br /><br />        remoteSort: true<br /><br />    });<br /><br />    store.setDefaultSort('last_name', 'asc');<br /><br /><br />    // the column model has information about grid columns<br /><br />    // dataIndex maps the column to the specific data<br />    field in<br /><br />    // the data store<br /><br />    var cm = new Ext.grid.ColumnModel([{         <br /><br />           header: "Last Name",<br /><br />           dataIndex: 'last_name',<br /><br />           width: 150<br /><br />        },{<br /><br />           header: "First Name",<br /><br />           dataIndex: 'first_name',<br /><br />           width: 150<br /><br />        },{<br /><br />           header: "Department",<br /><br />           dataIndex: 'department',<br /><br />           width: 150<br /><br />        },{<br /><br />           header: "Designation",<br /><br />           dataIndex: 'designation',<br /><br />           width: 150<br /><br />        }]);<br /> <br /><br />    // by default columns are sortable<br /><br />    cm.defaultSortable = true;<br /><br /><br />    var grid = new Ext.grid.GridPanel({<br /><br />        el:'employee-grid',<br /><br />        width:700,<br /><br />        height:500,<br /><br />        title:'Employee Records',<br /><br />        store: store,<br /><br />        cm: cm,<br /><br />        trackMouseOver:false,<br /><br />        sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn}),<br /><br />        loadMask: true,<br /><br />        viewConfig: {<br /><br />            forceFit:true /*to auto expand the size of the columns to fit the grid width and prevent horizontal scrolling*/<br /><br />        },<br /><br />        bbar: new Ext.PagingToolbar({<br /><br />            pageSize: 20,<br /><br />            store: store,<br /><br />            displayInfo: true,<br /><br />            displayMsg: 'Displaying records {0} - {1} of<br />    {2}',<br /><br />            emptyMsg: "No records to display"<br /><br />        })<br /><br />    });<br /><br /><br />    // render it<br /><br />    grid.render();<br /><br /><br />    // trigger the data store load<br /><br />    store.load({params:{start:0, limit:25}});<br /><br />    });<br /><br />    Now we have to write the backend code to actually serve the data to the Grid component. For this purpose we will create a scaffold called employees with REST based actions. As we have used '/employees' for the data store with 'GET'method, Rails will automatically route this to '/employees/index' action. To interact with the database table we will also create a model class named Employee.<br /><br />    The backend code will be pretty much simple as usual. We will fetch records form the table via the Employee model class and return it to the front end as a JSON string. Rails has in-built support for JSON, so we do not require to do anything extra for it. We also need to take care of the remote sorting on the backend as the Ext Grid component passes the following four params when a Grid header is clicked: start, limit,sort,dir. Also for pagination, we will use 'will_paginate' plugin, as from version 2.0, Rails has dropped its inbuilt pagination support.<br /><br />    Controller Code: employees_controller.rb<br /><br /><br />    def index<br /> <br />    start = (params[:start] || 0).to_i<br /> <br />    size = (params[:limit] || 20).to_i<br /> <br />    page = ((start/size).to_i) + 1<br /> <br />    sort =<br />    "#{params[:sort]} #{params[:dir]}" || "id asc"<br /><br /><br />      @employees = Employee.find(:all,<br /><br />        :page => page,<br /><br />        :per_page => size,<br />   <br />        :order => sort<br /> <br />    )<br /><br /> <br />    rtndata = {}<br /> <br />    rtndata[:total] = @employees.total_entries<br /> <br />    rtndata[:employees] = @employees.collect {|e| {<br /><br />        :id => e.id,<br /><br />        :last_name => e.last_name,<br /><br />        :first_name => e.first_name,<br /><br />        :department => e.department,<br /><br />        :designation => e.designation<br /> <br />    }}<br />  <br />    respond_to do |format|   <br />  <br />    format.json  { render :json => rtndata.to_json }<br /><br />      end<br /><br />    end<br /><br /><br />    Thats it! These are the basic steps needed to integrate the Ext Grid component with Rails backend.</font></p>