Twitter Bootstrapping resources

As I am kinda addicted with Twitter bootstrap. I have almost got a habit to bookmark all the resources that enriches Twitter Bootstrap. In this post I will continue putting the resource links I get useful.

• The Twitter Bootstrap : The main Twitter Bootstrap project. They have released new version since I last posted my solution for Multilevel Dropdown menu for Twitter Bootstarp.
• Free Gallery of Twitter Bootstrap code snippets: Its an amazing open platform to share code snippets utilizing Twitter Bootstrap.
• Toggle buttons : Somebody posted some wonderful variations of toggle buttons here.
• jQuery UI Bootstrap : This is basically implementation of jQuery UI to look like Twitter Bootstrap - a jQuery UI Theme. Therefore, its actually nothing to do Twitter Bootstrap but thought jQuery addicts (as I am :P) might want to give it a look.
• Inline/In-place editing : This is an awesome plugin that utilizes Twitter Bootstrap, jQuery UI and jQuery to make in place editing cooler.
• Win 8 Metro: This is an implementation of Win 8 Metro look using Twitter Bootstrap - good for creating nice looking dash boards..
• Bootstrap for Asp.Net MVC3 application: I have created a Asp.Net MVC3 application template to get going with Asp.Net MVC3 and Twitter Bootstrap. There are other variations online. But I wanted to make the layouts as it comes with the Bootstrap and maintain the updates synced with the Bootstrap updates.
• Bootstrap for Asp.Net MVC4: A beautiful article to configure Visual Studio 2010 to work with Twitter Bootstrap and Asp.Net MVC4.
• Bootstrap hero: A big list of twitter bootstrap resources ranging from hacks and tips to frameworks and mockup creators.
• Bootstrap Wizard: A wonderful Step-By-Step wizard tool utilizing Bootstrap. 

Open source framework for responsive UI

Its not worth to develop your UI for your PC browser and then again for your Mobile devices and then again for Tabs. What we need is grab a Responsive UI Framework to get going - you develop for your PC and rest are taken care of.
Here I am listing all the responsive UI frameworks that I thought I might check.

• Twitter Bootstrap: I kinda liked and it seems many are rushing to use it as the original developers are from Twitter. But the thing is I felt couple of things are still missing (at least until I am writing this post); Like I was expecting a file input control. However, I got managed the file input control from another source. You can check it here
• Kickstrap: Its a fork of Twitter Bootstrap plus themes, enhancements, and other goodies.Worth checking.
• Zurb Foundation: Yet to check. But seems its quite promising.
• Gumby Framework: Seems quite up to date for getting started instantly.Including psd seems makes it more options in design. 
• Kendo UI:  Its a complete UI framework including almost all the elements/ controls needed to get start.
• Skeleton: I think its the first of the kind - to me it is not that appealing - din dig deep though ;)

Multilevel Dropdown menu for Twitter Bootstarp

Twitter Bootstarp is an excellent responsive UI framework to start your web application. But it seems they are yet to implement a multilevel Dropdown menu. I was googling for it and got couple of solutions and finally came up with my fork :

Update : this was done for twitter bootstrap 2

Pivot Tables

For some reporting started working on some pivot tables. To me these tables are one of those initial rich data visualization formats.
What is it ? :
"In SQL, a pivot table is a set of data that is transformed from a collection of separate rows to a collection of columns. In relational databases, such as Microsoft SQL Server, Oracle and MySQL, pivot tables can be used to simplify extensive data in order to make it easier to read and understand. To create a pivot table, an aggregate is used against a set of data to distribute multiple rows of a single column into a single row with multiple columns. This essentially pivots the result set sideways."

How to :

-Pivot by Aggregated Case Statement

By using an aggregate function (SUM, AVG, MIN, MAX) around a case statement in a SQL query, we are able to achieve the same result as the PIVOT function with less work.

- Sample data: To better understand a pivot table, an example of some sales data is listed here. Copy the following into Microsoft SQL Server Management Studio to try out the examples.

Create table PivotTestTable
(CustName varchar(8),
Item_Type varchar(8),
Item_Amount numeric(6,2))

insert into #PivotTestTable
select 'Jason', 'Computer', 435.34
union
select 'Jason', 'Software', 243.54
union
select 'Jason', 'Monitor', 158.23
union
select 'Alison', 'Computer', 345.89
union
select 'Alison', 'Software', 78.78
union
select 'Alison', 'Monitor', 123.45

- UnPivoted data : When the temp table, #PivotTestTable, is queried, the result is the following.

CustName Item_Type Item_Amount
-------- --------- -----------
Alison Computer 345.89Alison Monitor 123.45
Alison Software 78.78Jason Computer 435.34
Jason Monitor 158.23Jason Software 243.54

As you can see, the result set shows two customers, Alison and Jason, who have purchased three different types of items. There are six rows of data for two customers. If we wanted to see the data in a single row per customer, we would use a pivot table to achieve the desired result.

- Pivoted data : Try the following query and see how the output looks now:

SELECT
CustName as Total_Sales_By_Cust,
sum(case Item_Type when 'Computer' then Item_Amount end) as Computer,
sum(case Item_Type when 'Monitor' then Item_Amount end) as Monitor,
sum(case Item_Type when 'Software' then Item_Amount end) as Software
FROM PivotTestTable
GROUP BY CustName

Or the same can be done as :

SELECT
CustName as Total_Sales_By_Cust,
sum(Item_Type = 'Computer') as Computer,
sum(Item_Type = 'Monitor' ) as Monitor,
sum(Item_Type ='Software' ) as Software
FROM PivotTestTable
GROUP BY CustName

Or you can even COUNT instead of SUM

Currently I am only playing with the SQL to generate the pivot tables; But yeah, there are couple of JS library that you can utilize to play with the Pivot tables on the fly on the client :) :

1. Pivot.js
2. jQuery.pivot

Reference:

• http://www.ehow.com/about_5336679_pivot-table-sql.html
• http://dev.mysql.com/tech-resources/articles/wizard/print_version.html
• http://forums.mysql.com/read.php?52,527105,527163

Continuous Integration environment with svn on linux

On my previous post I wrote a way I used to create a CI environment that'd export the entire application to a web location after each commit. I was working then for windows. Now, I have created a setup for Linux - with addition this time the post-commit will only update those files that are actually committed. Following is the post-commit script I got on Stackoverflow:

Reference:

• http://stackoverflow.com/questions/446518/using-svn-post-commit-hook-to-update-only-files-that-have-been-commited
• You can check another neat tool that does similar automation using php : svn2web

php redirect losing sessions on Chrome/IE issue resolved

My new CodeIgniter app was working beautifully locally - everything's just fine. But when I uploaded to the demo location online - I found I can't login !! After debugging it is discovered - after checking the user credentials and setting the sessions when I was redirecting to the dashboard the user- session was getting lost !

Started with googling for a while and following is the link I got people were suggesting couple of fixes :

http://codeigniter.com/forums/viewthread/178904/

Unfortunately, this din solve my issue. I was still getting lost sessions. And finally, [I don remember where I saw someone was suggesting to check the server time] I checked my server time and yes, it was certainly not right - around 5 hours late from the time as it was supposed to be. Fixed the time with the following command [as it was a linux box] :

date +%T -s "10:13:13"

Then, tried login again and bingo - it is working cool.

Reference:

1. Linux commands to set dates and time

PHP SOAP client to consume JAX-WS

For couple of days I was googling and researching for a descent solution to my problem to access and consume the services exposed over a JAX-WS from my php application. Actually, I have to write a client so that I can save data from my php application (A subscriber application info management system for the telco company I am working for) to IN database where I have to do so over a JAX-WS interface.
Usually, I woud've followed my previous post. But it din work in this case- the problem and a basic setup is I got from the following location:
http://www.lampjunkie.com/2010/03/get-phps-soapclient-to-speak-with-javas-jax-ws/
But that either din resolve my problem entirely; as my JAX-WS needs a BASIC HTTP AUTHENTICATION to access it. So, following was my solution :

Note:
From php manual I must quote that you must set uri and location directives while invoking webservice with wsdl.I mean when you create the SoapClient object.

Now, that is how I retrieved data from the web service. Next, I will try to save the data and will share how I do it.

Reference:

1. php manual for soap client. A must read with care of the all the options.
2. soapUI. A must have tool while working with soap - to easy analyze things.
3. wsf/php. A framework for php to easily play with enterprise level web services. I will write my experience with it some other time.

jQuery Datatables plugin and Codeigniter

Just got an work around for the jQuery datatables wrapper [IgnitedDatatables] and made it working on a project to load huge data. As I din get any neat info I had to dig little deep both into datatables plugin and the wrapper and finally made a work around for me. Here in this post I am basically sharing my experience along with keeping records of what and how I did :)
The js I am using on the view to create the datatable and load using ajax is as follow [don try to run on jsFiddle 'cz it has lots of garbage- will clean it up :| ] :


Code on the controller:


And finally the model:


I will write in details on it - how I actually worked on later on this post.
Tips:

1. For the callback function for the wrapper to work you need to create a helper file where you need to put all the callback functions.
2. As the wrapper somewhat works as the model should work I have called and made use of it in my model class.

Reference:

1. jQuery Datatables plugin api
2. Server side data processing using Datatables plugin
3. IgnitedDatatables function reference; and Method Chaining example
4. Example usage code for the IgnitedDatatables library [independent of Codeigniter]
5. Sample MySql Database [Sakila :)]

Dynamically add a group of fields using jQuery

Its not a so tough thing, tough. Just wanted to keep a record and add a tip :) Following is the code I am using:

Note:
I was facing a problem, when the groups of fields grows  more then the view area for each click to create the window jumps to the top of the page; To resolve, to remain where I was creating the new fields I just added one line return false as the last line of the click even.
Instead of remaining the same place if you want to scroll to some where else you can use the following jQuery plugin:
scrollTo

Manipulating Auto Increment values in MySql

1. Set the MySql variables auto_increment_increment and auto_increment_offset variables.
2. Play with the Auto_Increment in Information schema.

To start with an AUTO_INCREMENT value other than 1, you can set that value with CREATE TABLE or ALTER TABLE, like this:

ALTER TABLE tbl AUTO_INCREMENT = 100;

Note:It is not possible to confine the effects of these two variables to a single table, and thus they do not take the place of the sequences offered by some other database management systems; these variables control the behavior of all AUTO_INCREMENT columns in all tables on the MySQL server. If the global value of either variable is set, its effects persist until the global value is changed or overridden by setting the session value, or until mysqld is restarted. If the local value is set, the new value affects AUTO_INCREMENT columns for all tables into which new rows are inserted by the current user for the duration of the session, unless the values are changed during that session.