A colorful Tab control with Twitter Bootstrap

JS Bin


This requires more cleanup, though.
For more tab styles:
http://tympanus.net/Development/TabStylesInspiration/

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

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

Konami Code : Fun way to show up some secret information (!!)

"The Konami Code, known in Japan as the Konami Command(コナミコマンド Konami Komando), is a cheat code that appears in many Konami video games, although the code also appears in some non-Konami games."

To get more information you can check the best of the bests information source wikipedia pages. And to get more interested seeing who else on the web are utilizing this fun way to publish (!!) information please visit : http://konamicodesites.com/ [you have to try the Konami Code to get the list though :| ]
I thought why not I secretly embed my information into whatever I develop. So there came the jQuery solution for it. I basically merged two of the plugins from jQuery.
There are a number of Konami code plugins online - you can grab any of them - But make sure that the one you are trying works for all browser [the browser compatibility as they say :P I found couple of them not compatible to some browsers] . Following are couple of them that you can check :

• http://www.gethifi.com/blog/konami-code-jquery-plugin-pointlessly-easy
• https://github.com/davidcoallier/jquery-konami
• http://www.trovster.com/lab/plugins/cheat-code/

And then to show up the information nicely I have plugged in the jQuery notification plugin jNotify

BTW, I'm gonna submit my code soon [sorry I don have a clean copy of my work right now :S] Till then stay tuned and help thyself :P

iGoogle like interface using CodeIgniter and jQuery

I was asked to develop an interface that would look like iGoogle webtop. And as always do I instantly started googling and this post is the result of what I got and what I lastly went for.
I googled and I got some solutions already there :

1. Picok : Which I got hectic to configure and modify [as I was in hurry I din check it very well thought but I think it has some potential]
2. jPolite : I loved this solution but thought might be little tricky to implement the back end.I strongly suggest if you have some time please look at this solution.

But finally I actually decided to go with a simpler solution starting from an interface developed utilizing jQuery and creating a Codeigniter back end for it.

How to create the UI, you will get the complete article from net.tuts+  . However, to get the Codeigniter version you can download it from the following location. I am telling you the implementation is not a rocket science so far, but I have a plan to extend it and may be will create a complete opensource project some day.

Till then wait or Download and start one by yourself :)

Please comment some other opensource reference if you got any.