Friday, December 24, 2010

Additional Parameters in ExtJs data store

Hello again.

This is my second blog on ExtJs. Recently I was working on a project where my responsibility was to create Data filters of ExtJs grid. There will be number of drop downs in tool bar of grid and user can select values in one or more drop downs. Also paging is enabled in grid. So user can select some filters and according to that data will be displayed in grid in different pages with default page size 25.














So how to do that? Because here filters are dynamic. user may or may not select values in drop downs. After user selected some filters it should be retained in all the events like next page,first page, first page,last page and refresh.

Here I was working with ExtJs Json Store. When josn store gets loaded and assigned to grid, all its configuration will be used in all grid events like next page etc. We can pass additional parameters to json store while using load and reload method.

store.reload({params:{start:0, limit:20, sort:'col1',dir:'DESC',param1:value1,param2:value2}}).

But here in this case this function is automatically called by grid when we click on next and previous buttons. So we don't have control to add additional parameters and values in reload function. One possible solution is to override ExtJs pagaing toolbar and defining our own events. But its some what difficult for beginners. We have one easy solution for this. Json Store has one more property called baseParams. It takes an array of parameter name and values. All the parameters defined in baseParams will be sent to server in each paging event of grid. So in case of our dyanmic filters all we have to do is to change grid baseParama when user selects some values from drop down. This we can do it drop down select event as follow.

select:{
fn:function(combo,record,index) {
grid.store.baseParams = {param1:value1,param2:value2};
grid.store.reload();
}
}
All the parameters sent to server by json store and on server side you can use those parameters to get the data and send it back to the application.

That's it and you have a real time dynamic filtering in your grid.




Thursday, December 16, 2010

Put Standard HTML controls inside ExtJs Grid Panel

Hello,

Since last three months I am working with ExtJs. I have some wonderful experience with ExtJs during this time. ExtJs is really a powerful JavaScript framework for rich user interface development. This is my first blog on ExtJs. I am going to publish more blogs on my experience with ExtJs.

Ok let's come to the point now. I was having requirement to put standard html controls like select box and check box inside ExtJs grid panel. Although ExtJs provides various controls like checkbox and combo box. But requirement was to use standard HTML controls.

ExtJs has another powerful control called editor grid panel. Here you can specify editor for each column like textbox and combo box etc. When user double clicks on row it goes to edit mode and all the editors are visible in respective columns.

But my requirement was to display controls without using editor grid panel. When user views the grid all the controls should be displayed to user. So how to achieve this?

ExtJs grid column defines a function called "renderer". It takes two arguments value and cell object. Value is the value of cell that is assigned by dataIndex property and cell object defines various property of cell. In this function you can write your code to generate the standard HTML controls. For example.

columns : [{
header: 'columnheader',
width: 25,
dataIndex : 'valueofcell',
renderer: function(value, cell)
{
return '<input type="checkbox" name="mycheckbox" />';
}
}]

This will add standard HTML check box to ExtJs grid panel. This is how you can add any other HTML controls inside the ExtJs grid panel columns.




Saturday, November 20, 2010

Mageto and SalesForce Synchronization

OK, guys I am back to blogging after long time.

This blog is about synchronizing Magento inventory with Saleforce. I have briefly mentioned what is saleforce in my previous blog. You can read it from here.

The requirement was to sync Magento Inventory to Salefroce. For the first time it should synchronize all the products form Magento to Salesforce and then it should synchronize only recently added and updated products to Magento. First of all we need to understand how we can have products in Saleforce. This information is missing in my previous blog so I am explaining here.

In Saleforce you can expose your organization data in form of Custom Objects. Its like your table in your database. When you define a custom object, in salesforce it defines a table. All the attributes of that object can be defined as column of that table. For example let's consider custom object product with few attributes like Product name, quantity etc. You can imagine that Force.com platform has created a table called product and with columns product name and quantity.

Once you have defined a custom object in Salesforce you can add number of products in it. So its like you have a table called product and you have number of rows in it. This is how you can define custom objects in Salesforce. Salesforce custom objects supports various data types like NUMBER, TEXT, LIST, MULTI SELECT, FORMULA and various other. You can enforce security on it by providing crate,read,modify access to group of users or specific user.

So this was the introduction about saleforce custom object, now lets go further.

Salesforce has some APIs using which third party can access the data inside the Salesforce platform. We have used this APIs in Magento. Those APIs are nothing but a web services. You have to download WSDL file from your salesforce account and using it you can connect to salesforce from third party.

For PHP toolkit is available that you can download from SalesForce. It defines all the classes and interface required to access salesforce data form PHP applications. You have to include some files from this toolkit and wsdl file into your PHP application. Following is the simple code snippet to authenticate user to access salesforce data.

$wsdl = 'your wsdl.wsdl';
$user = 'your username';
$pass = 'your password';
$token = 'security token';

$client = new SforcePartnerClient();
$client->createConnection($wsdl);
$client->login($user, $pass . $token);

if($client->login($user, $pass . $token))
echo "Connection Succcess";

Here security you have to generate from your salesforce account and username and password is of your salesforce account.

After successful authentication you can retrieve list of custom objects from salesfroce or you can add,update,delete custom objects in salesforce. For that various methods are defined in toolkit but we will focus on method UPSERT. This is the combination of insert and update. When you use this method, salesforce will update object its available or it will create new custom object.

For products in Magento we have to map each product attributes to custom object fields. Look at the following code snippet.

$fieldset['Title__c']=$name;
$fieldset['NAME']=$sku;
$fieldset['Unit_Weight__c']=$weight;
$fieldset['Supplier__c']=$supplier;
$fieldset['Warehouse_Location__c']=$warehouse;
$fieldset['Manufacturer__c']=$manufacturer;
$fieldset['External_Product_ID__c']=$pid;
$fieldset['Price__c']=$price;
$fieldset['Cost__c']=$cost;
$fieldset['Image_1_URL__c']=$imageurl;
$fieldset['Quantity__c']=$qty;
$sObject = new sObject();
$sObject->type = 'TDS__Product__c';
$sObject->fields = $fieldset;

$client->upsert("External_Product_ID__c", $sObject);

Here important field is External_Product_ID__c. Its like foreign key. When you want to access salesforce custom object from third party, you have to specify some field as a external which must have datatype Text,Auto number.

Using above code it will either update custom object in Salesforce with specified values if its available or it will create new one.

So this is how you can synchronize Magento products to salesforce. I hope that this blog helps you. Let me know if you have any questions for the same.





Saturday, September 25, 2010

Grid based layout on Magento product view page.
















Recently I got requirement to display product options in grid based layout on product view page for Magento. See the the image above. So the user can select particular combination from the available option. So I have started R & D on it and come up with solution that I will do it through JavaScript. Because here products were configurable products. So when product view page gets loaded, you have a JSON object with all the product options. It has all the things you want like product options,price of particular option, how many products available in options. Options may be dependent on each other like if size depends on color. This dependency is also mentioned in JSON object.

So I have used that JSON object to build this grid based layout. What you have to do is when your JSON object gets loaded, you can write JavaScript code to insert controls at runtime. In case of configurable products you have to write this code inside /product/view/type/options/configurable.phtml file. While in case of normal product where you have custom options , this code will be in options.phtml.

This is just the grid based layout on top of drop downs on product view page.Product option drop downs are hidden. When you select particular option from grid layout, the corresponding options in drop downs gets selected. So when user add product to basket product with particular options gets added in to basket.

I can not mention complete code over here.But this is the technique to design any required layout on product view page. If you need further help in this you can contact me.




Tuesday, September 14, 2010

Cloud Computing

I think everybody must have heard the word "CLOUD COMPUTING" now a days. So this blog is about little bit introduction about cloud computing and cloud computing platforms.

Wikipedia gives following definition of cloud computing.

"Cloud computing is internet-based computing, whereby shared resources, software, and information are provided to computers and other devices on demand, like the electricity grid."

That's a really good definition. Now a days cloud computing is the Buzz. Everybody is talking about it. Legends like Microsoft has invested heavily in cloud computing. So many companies are entering in to cloud computing business. CIOs/CTOs of any company want to bring Cloud Computing to their business. They are exploring options available for cloud computing platform. After cloud computing two new words are introduced.

SaaS: Software as a Service
PaaS: Platform as a Service

So what is this all about? Lets explore it in details. First of all lets talk about Cloud Computing. Why its been introduced? What was wrong with earlier approach? If you consider scenario before cloud computing , you have one server available. You use it for almost all your computing need. But the problem was CPU idle time. When server is busy with some request. It can not pay attention to other request. Also CPU is also in idle mode. What if we can utilize CPU idle time for other computing needs. But how we can do it? Then something called Virtualization is introduced. Yes this is the technology upon which cloud computing is built. My physical CPU is only one while I have more than one Virtual CPUs on top of it. Which can use my physical CPU. Virtual CPUs use almost all the real CPU cycle. Real CPU will never be in ideal mode.

So I have some hardware + software combinations which boost up my server performance. This is what is Virtualization. This is what is cloud computing. There are some large data centers in which bunch of servers are there. In those servers virtulazation is used so that each server can act as more than one server. This is the Magic of cloud computing.

Now lets talk about Cloud computing platforms available in market. There are various platforms available in market for cloud computing, but I will discuss about only two platform that I know.

As a former Microsoft .Net developer (although I am still passionate about .Net), first platform comes in my mind is Microsoft Windows Azure

Microsoft Windows Azure:

Microsoft definition for Windows Azure: "
The Windows Azure platform is a flexible cloud–computing platform that lets you focus on solving business problems and addressing customer needs."



Microsoft has invested heavily in data centers for Azure. Windows Azure is the platform using which one can develop cloud based application. If you want to develop .Net based application on local machine, you need certain things like .Net Framework,Sql Server, Windows server etc. This all provided by Windows Azure Platform in slightly different manner through App fabric, Sql Azure.

So in short It’s a platform for running Windows applications and storing their data in the cloud.

Its designed in a way that developer can develop cloud based application using various .Net supported languages like C#,VB.Net.

I will not go in more details as lots of stuff are available for windows azure on internet. Let's discuss the second cloud computing platform.

Salesforce:

Its a leading cloud platform now a days. Using it you can build your on demand internet application five time faster than any other app building platform. Its built on multi tenant architecture. It provides a very good interface to build business objects, and apps. Its service is composed of two main parts

1) appExchange Directory: market place to share your app
2) Force.com platform: This is the platform upon which applications are developed.

The language which is used to build the app is Apex Code. Force.com platform provides various features that makes easy to develop,maintain, publish and customize any app. Force.com platform have various features like multi tenancy that make its unique.

So this is the little bit introduction about cloud computing and cloud computing platforms. I will publish detailed blogs in future.








Wednesday, September 8, 2010

Magento:change product image from gallery image

This is some what different blog. While working on a Magento project I faced a little problem. I have uploaded products with image gallery and set product image,small image and thumbnail to last image of gallery images.

Now client told that I want first image to be displayed as main image. It was around 10,000+ products. So it was not possible to manually change all the products. So after wasting around two to three hours I got a solution.

If you carefully observe Magento database , it stores all the product related information in catalog_product_entity_varchar table. There you will fine rows with product images data. So what you have to do is you have to extract first image name from product images and update it to rest of the fields. Following is the query to get first image name from product gallery images.

SELECT entity_id,SUBSTRING( value, LOCATE( "/", value, 3 ) +1, IF( LOCATE( ";", SUBSTRING( value, LOCATE( "/", value, 3 ) +1 ) , 2 ) -1 <0, CHAR_LENGTH( value ) -15, LOCATE( ";", SUBSTRING( value, LOCATE( "/", value, 3 ) +1 ) , 2 ) -1 ) ) FROM catalog_product_entity_varchar WHERE `attribute_id` =83 and `entity_id` in (select entity_id from catalog_product_entity)

While using this query for your project you have to change this query because in my case following is the typical data of image gallery.

/productimages/67808_101_Y_3_8CT_A.jpg;/productimages/67808_101_Y_3_8CT_B.jpg;
/productimages/67808_101_Y_3_8CT_D.jpg;/productimages/67808_101_Y_3_8CT_E.jpg;
/productimages/67808_101_Y_3_8CT_Z.jpg;/productimages/67808_102P_W_3_8CT_A.jpg

So in query 15 is the character count of /productimages if you have some other path then use proper character count.

Also you don't need that If condition in query if your image gallery contain more than one image. In my case there were image galleries with only one image so I have to use that if condition.

Now lets move further. Using above query you will get first image name but still you have to update it. I found two ways to do it. First is using cursor and stored procedure to run this query and second is to use PHP script to write update query.

Hope this post helps you if you face same problem like me.
(Although it certainly worked for me, please take a backup of your table before trying this :) )

Saturday, August 28, 2010

Data Scraping Part-2

Here is second article on data scrapping. As I have mentioned in my previous blog that I was working on data scraping from Asp.Net MVC website. In that I have faced one more problem.

There was a field on the page which is visible to only logged in user. So first of all I have to create Asp.Net session by PHP cURL then I can request for the particular page. So how to do that. Following is the procedure for that.

First of all create a session through PHP cURL and then use that cURL request to get the restricted page. Following is the code for that.

$url = $this->login_url;
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt ($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_USERAGENT ,'Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.8) Gecko/20100722 Firefox/3.6.8');

curl_setopt($ch, CURLOPT_AUTOREFERER,1);

curl_setopt ($ch, CURLOPT_POSTFIELDS, 'userName='.urlencode($this->user).'&password='.urlencode($this->pass).'&rememberMe=true&rememberMe=false');

curl_setopt ($ch, CURLOPT_COOKIEJAR, 'cookie.txt');
curl_setopt ($ch, CURLOPT_COOKIEFILE, 'cookie.txt');
curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt ($ch, CURLOPT_FOLLOWLOCATION , 1);

In above code two things are new CURLOPT_USERAGENT ,CURLOPT_POSTFIELDS.

If you carefully see CURLOPT_POSTFIELDS there you can see some different data then normal post fields. Generally every login page has remember me options.

Another different thing is CURLOPT_USERAGENT. This is the information of browser and system from where the request is being sent.

How you can properly build these two fields? The option I have used is Live HTTP headers extension in Firefox. You can find it from this website http://livehttpheaders.mozdev.org/

Install it in your Firefox and then simply browse that the website for which you want to get the information. This extension will capture all the data of your browsed page. You can use it in your cURL request. Use it in above code and then use following code to get restricted information on the page.

curl_setopt($ch, CURLOPT_URL, $page_url);
curl_setopt ($ch, CURLOPT_POST, false);
$store = curl_exec ($ch);
curl_close ($ch);

Hope this helps.



Friday, August 13, 2010

Scrap data of Asp.Net MVC website using PHP cURL

Hello,

Last week I was working with data scraping project. I have to extract data of Asp.Net MVC website using PHP Curl. I guess everyone know about PHP cURL. Its library created by Daniel Stenberg, that allows you to connect and communicate to many different types of servers with many different types of protocols. More information you can get it from this link.

So basically following is the code snippet of how to use cURL with PHP for data scraping.

$ch = curl_init("http://www.example.com");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$pageData = curl_exec($ch);
curl_close($ch);

You will get complete page HTML+Data in $pageData variable. Now you can extract data from this variable using various PHP functions.

When you use cURL it is very easy to extract data of static page. What if we have dynamic page like Asp.Net page? For example you have a combo box on Asp.Net page so when you select some other option in combo box your Asp.Net page gets refreshed. The exact word is 'POST BACK'. Some code gets executed in code behind file of Asp.Net page and again page is constructed.

So how we can use PHP cURL for this. cURL supports various options for this like

curl_setopt($ch, CURLOPT_POSTFIELDS, $post_string);

Here you can give all the post fields like option selected in combo box. It will be & separated string. For Example

postfield1=value1&postfield2=value2&postfield3=value3

So you have to identify all the fields in Asp.Net page that gets posted. But what if you don't know anything about Asp.Net page. How you can identify all the necessary fields that gets posted on post back of Asp.Net page?

Well, I have used a tool called Fiddler web debugger. When you install Fiddler it will track all of your web sessions and it will give you all the data like headers, textview , WebForms , XML etc.
After installing Fiddler just browse through your Asp.Net website. Select various fields from combo box and do analysis of Fiddler data. You will get all the information about posted fields. Using this you can make your post string for cURL request and you can have all the data of Asp.Net website.


Saturday, August 7, 2010

Detect product page in Magento

Recently, we have faced a problem in a Magento project. We were implementing search functionality for products. User can enter product name choose a category and sub category to search. Now the problem was. This search box should only be displayed on category page and sub category page. On product page, it should not be visible. First we have tried to hide search box on a client side through JavaScript. However, there was an annoying flicker effect. Search box displayed for some time, and then it gets to hide. So we have decided to hide it from server side code. In Magento this search box is generated from.

Following file /app/design/frontend/base/default/template/catalogsearch/form.mini.phtml

We can hide it from this file. Now the challenge was to detect the product page. We have used following code for that.

$isProductPage=false;
if(Mage::registry('current_category'))
{
$cat=Mage::registry('current_category');
$catLevel=$cat->getLevel();$catId=$cat->getId();  $_id= Mage::app()->getRequest()->getParam('id', false);  if($_id!=$catId)//spacial condition for product page  {   $isProductPage=true;  }}


In case of category and sub category page$catId and $_id gives you thesame id. For product page $catId gives you id of productcategory while $_id gives you product id.

So this was thetrick to detectthe product page.


Thursday, July 22, 2010

Table Pivoting using ExtJs




















Hello,

Recently, I have completed a project in which I have implemented Table Pivoting using ExtJs.
Please refer the above image. Here data will be displayed in a tabular format. Data will be fetched using real time Ajax Request. Axe locations are also stored in a database. For example, here year and country are the horizontal axes and gender, and area are the vertical axes. Axe location will be fetched from a database. Data will be stored in JSON object and axes location will be stored in JavaScript array.

User has all the freedom of changing location of axes and swapping of axes as can be seen from image below. As user change location of axes data will be automatically reordered as per new format.
















Furthermore, user can swap one axe with any axes from horizontal or vertical locations. Data will be reordered as per new format.

















Furthermore, user can save new layout so next time when a user views this report save format will be applied to table. This component was built to support a business report application. Where a user can view reports in different formats. User can save preferences to a database.

This is implemented using ExtJs panel with a table layout. All the pivoting functions are depended on only three things.

1) Data which is stored in JSON object.
2) Vertical and horizontal axes array.
3) Value axes name.

Using above three variables and ExtJs panel this complete component has been built.
Well, I cannot display complete code here. However, I will explain certain functions here.

How table is created?

This was the first challenge for me when I started this project. Because this is the code which is going to be more crucial for all the functions. When you use table layout in ExtJs panel, first you have to specify a number of columns. After this when you add items to the panel ExtJs will automatically position to correct location. For example, if you specify totalcolumns=2 and add three items to the panel. First two items will be on row 0 and third item will be in row one column 0.

So total number of columns is calculated using a number of vertical axes and total number of values in horizontal axes. After this ExtJs panel object is created. First of all, values of horizontal axes and vertical axes will be added in panel. Following is the code for it.

panel.add({height:40,html:uniqueHorizontalAxesValues[i][2][j],colspan:totalcolspan});

panel.add({height:40,html:uniqueVerticalAxesValues[i][2][j],colspan:totalcolspan});

With this all the necessary controls are added. Change and Save layout button, Column to Row/Row to Column buttons, swap axes split button, etc.

After these all controls are added, data will be added to the table.

How swapping and pivoting function works?

This is quite simple. All we have to do is just change arrays of vertical and horizontal axes and regenerate the table. For example, if a user chose to swap gender with area. Just remove gender from array and place area instead of it and remove area from array and place gender instead of it.

This is how this component is implemented. This is a completely reusable component. User can add this to any website easily. All you need to do is supply necessary data.

Hope this post helps.