How To Style Yii Pagination with Bootstrap

May 14
2013

Yii Framework + Pagination

I’m a big fan of the Yii Framework. I’ve been hacking on it since it released a few years ago, and it’s become one of my default frameworks for most my projects these days.

One nice feature you get out of the box, is a built-in Pagination class. However, the out of-the-box style doesn’t generally fit the projects I work on, which lately have used Twitter Bootstrap – which has a very nice pagination style.

For sake of completeness, here is example code you might include in a controller action that requires pagination and integrates with Yii’s Active Record methods:


function actionIndex(){
    $criteria=new CDbCriteria();
    $count=Article::model()->count($criteria);
    $pages=new CPagination($count);

    // results per page
    $pages->pageSize=10;
    $pages->applyLimit($criteria);
    $models=Article::model()->findAll($criteria);

    $this->render('index', array(
    'models' => $models,
        'pages' => $pages
    ));
}

And here is corresponding code for the view:

    <?php
    $this->widget('CLinkPager', array(
        'pages' => $pages,
    ))
    ?>

Pretty sweet huh? All of that, out of the box. Too bad it looks like this:

Yii pagination default look

It works… but it probably doesn’t match your project’s look and feel, and it’s just not bootstrap. Boo!

CLinkPager and Twitter Bootstrap

Ever wonder how to mesh Yii’s Pagination + Twitter Bootstrap’s styles? Gee, Me too!

I first googled around to see a quick way mesh the two, and was surprised to find that most examples try to extend CLinkPager widget. This didn’t seem right to me. Yii, is generally a pretty flexible when it comes to stylization and themes; I knew there must be a better way…

I dug into the CLinkPager class myself, and turns out, there is a much simpler way to make Yii’s pagination class styled like bootstrap, and it can be done entirely in the widget options in the view file, without extending anything. See the following:


<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">

<div class="pagination">
    <?php
    $this->widget('CLinkPager', array(
        'pages' => $pages,
        'header' => '',
        'nextPageLabel' => 'Next',
        'prevPageLabel' => 'Prev',
        'selectedPageCssClass' => 'active',
        'hiddenPageCssClass' => 'disabled',
        'htmlOptions' => array(
            'class' => '',
        )
    ))
    ?>
</div>

And wallah! It looks like this:

Yii Pagination using Twitter Bootstrap

Configure Widgets Globally

Now that we know how to style our CLinkPager widget with bootstrap, one realizes that repeating those options for a site that has pagination all over the place in a copy paste fashion is sub optimal. What if I need to change a style slightly for several places?

No worries. Yii offers the ability to globally configure widgets, and further override global configuration as needed for specific widgets.

First, setup your global widget configuration in your config/main.php:


return array(
    'components' => array(
        'widgetFactory' => array(
            'widgets' => array(
                'CLinkPager' => array(
                    'header' => '<div class="pagination pagination-centered">',
                    'footer' => '</div>',
                    'nextPageLabel' => 'Next',
                    'prevPageLabel' => 'Prev',
                    'selectedPageCssClass' => 'active',
                    'hiddenPageCssClass' => 'disabled',
                    'htmlOptions' => array(
                        'class' => '',
                    )
                )
            )
        ),
    ),
);

With that in your config, your pagination inherits the correct styles for bootstrap, and you need only include the following where you need pagination:


    <?php
    $this->widget('CLinkPager', array(
        'pages' => $pages,
    ))
    ?>

In the event that you need to over ride something for a specific pager, you can do so by setting the option for that widget instance, like so:


    <?php
    $this->widget('CLinkPager', array(
        'pages' => $pages,
        'header' => "<div class='pagination pagination-right'>",
    ))
    ?>

Not too shabby.

You can read up a bit more on global widget configuration, as well as take it one more step into “skinning” on the Yii website.

Hosted Bootstrap

Also, little tip, for small projects, I tend to use a hosted bootstrap JS/CSS include – makes throwing up an experimental project, that much faster.

League of Legends

Apr 11
2013

A friend turned me onto a new game, League of Legends. It’s a real time strategy (RTS) where you choose from any of over 100+ different characters, team up in groups of 3-5, and duke it out on interactive maps for territory. Games generally last 20-45 mins, and you are rewarded with in-game points to help level up your abilities. If anybody wants to play with me sometime, signup using the link below ( I get in-game points for referrals ), and hit me up, lets play!

Twig Syntax Highlighting with TextMate

Feb 18
2013

What is Twig?

Twig – The flexible, fast, and secure template language for PHP. Brought to you by Fabien Potencier, creator of the Symfony Framework.

What is TextMate?

TextMate is a general-purpose GUI text editor for Mac OS X created by Allan Odgaard. Notable features include declarative customizations, tabs for open documents, recordable macros, folding sections and snippets, shell integration, and an extensible bundle system.” — Wikipedia

What is cool that I’m sharing with you today?

A nice little Twig syntax highlighting bundle for TextMate, made by Andrew Fricke. You can checkout the code from Andrew’s Github Repo:

https://github.com/Anomareh/PHP-Twig.tmbundle

Steps to install the bundle on Mac OSX:

mkdir -p ~/Library/Application Support/TextMate/Bundles
cd ~/Library/Application Support/TextMate/Bundles
git clone https://github.com/Anomareh/PHP-Twig.tmbundle
osascript -e 'tell app "TextMate" to reload bundles'

Restart TextMate, and enjoy syntax highlighting of your .twig files!

TalkToTheManager – Every Cell Phone is a Comment Card

Mar 08
2012
Every cell phone is a comment card

Talk to the Manager - Every cell phone is a comment card

I know quite a few talented folks, another friend of mine just launched: TalkToTheManager.com.

I really think this has a lot of potential to kick off. You know those customer feedback cards in restaurants and hotels that you’re asked to fill out once in awhile? And every once in awhile you do? This takes that concept to the new century, using cell phones.

Imagine sitting in a restaurant, and the bathroom is just gross – you text anonymously to a number that you notice on a card laid out on the table, the feedback is sent to the owner, manager on staff, etc, instantly and anonymously. They can very quickly, either respond, or remedy the problem, or likely ( and hopefully in this scenario ), both. Now – it doesn’t have to be bad feedback, it can actually be good feedback too — ie: “Sally is a wonderful waitress, she really went above and beyond, thank you, we’ll be back”, etc.

It’s a great tool for businesses to dig down into what’s happening in their business. Particularly if the upper management is more removed, ie, chain owners.

I talked to a few businesses about this while I was out and about earlier this week, and sure enough, there was interest. I think a huge win for TalkToTheManager is if a hotel chain grabs this – then you are gold sir.

The service is $15/month for businesses, and free for end-users. Check it out. I wouldn’t be surprised if you see this somewhere sometime in the near future.

Nice job.

n3rds.com – Jobs for Programmers

Mar 08
2012
Jobs for Programmers

Jobs for Programmers

Two colleagues out of St Louis, Josh Anyan, and Chris DeGroat, recently created n3rds.com – a website for matching up tech industry jobs with candidates. They gave me a heads up, and I was pretty impressed – as I generally am by these two. I thought I’d give them a call out on my site in hopes to send them what little traffic I can muster. Here is a review:

n3rds.com aims to be low friction, my entire experience on the site was just a few minutes, here are some highlights:

  1. The login system is all via the linkedIn API ( how suitable ). This makes it super easy to sign up, and connect with the most relevant professional social network out there – NOT your facebook.
  2. You’re immediately asked a few questions about locale, skillsets, salary ranges that interest you.
  3. Next, your taken to a listing of matching jobs – where you can pick and choose what interests you and go from there.
  4. As new jobs that match your skills come into the system, you are notified. This is a nice way to keep a pulse on opportunities, without throwing your resume on the market.

n3rds.com launched a few days ago and is currently in beta. If you’re a recruiter or employer, head on over and toss up a few job postings. It’s free! If you’re a techie, might as well sign up – it’s pretty frictionless, and you never know where you’ll find the next big thing.

For the record: Chris DeGroat and Josh Anyan are rockstar developers, they knocked this product out in just a couple short weeks. Keep tabs on these guys.

Nice work gentlemen.

How to help fight the SOPA and PIPA Bills – Take Action!

Jan 18
2012
SOPA PIPA Image

North Korea was blacking out the internet before it was cool. Don't let it happen in the free world. Help take Action: https://www.google.com/landing/takeaction/

When the people fear their government, there is tyranny; when the government fears the people, there is liberty.” – Thomas Jefferson

Ok folks! This is the largest online protest in history, and for good cause. Two bills, that threaten internet freedom, are infront of Congress with alot of support, SOPA and PIPA. A quote from Google’s take action page:

Millions of Americans oppose SOPA and PIPA because these bills would censor the Internet and slow economic growth in the U.S.

Two bills before Congress, known as the Protect IP Act (PIPA) in the Senate and the Stop Online Piracy Act (SOPA) in the House, would censor the Web and impose harmful regulations on American business. Millions of Internet users and entrepreneurs already oppose SOPA and PIPA.

The Senate will begin voting on January 24th. Please let them know how you feel. Sign this petition urging Congress to vote NO on PIPA and SOPA before it is too late.

North Korea was blacking out the internet before it was cool.

Food for thought: Would you rather your children grow up in North Korea, or the free world? Better get on board folks.

Imagine a world ( not just an internet ) without places like Google, Yahoo, Wikipedia, craigslist, Facebook, Twitter, LinkedIn, eBay, AOL, Mozilla, Reddit, Tumblr, Etsy, ZyngaThese bills must be stopped dead in their tracks!

It’s EASY to TAKE ACTION!

I glued this post together rather quickly, please post in the comments other ways to help.

Yours truly,

In the market for a new country if this sh*t passes.

North America Wakfu Closed Beta Keys

Jun 28
2011

So, I just wrote about Dofus last night, a game I’ve been enjoying for close to a year, and mentioned it’s sequel, Wakfu. Shortly after, I decided to check up on progress of the sequel. It’s in a closed beta in North America right now, and likely won’t be released to the public for quite some time. In my excitement though, I thought I’d search around and see if I could get involved in the beta – surely a contest was giving out beta keys?

A brief search turned no avail, so I posted to the Wakfu forums, and somebody got in touch with me by the next morning. They recommended I go to http://www.fileplanet.com/promotions/wakfu/ which was still giving out beta keys for North America.

Sure enough, I had to signup for a free fileplanet account ( no big deal ), and had my beta key in a few minutes, success!

I’ve yet to dive deep, but I’m already very much enjoying the improvements. This is going to be good, I can tell. Below is the official game trailer featuring cinematic and actual game play! Enjoy!

If anybody wants to try out the beta with me – shoot me a message!

Dofus – Game of My Year + Strategy

Jun 28
2011

So, all my friends seem involved in all these new, graphically intense, state of the art games. I’ve been lingering back a little in games that perhaps come off a little more “old school”. I can’t help it. Super Nintendo was my favorite system, I gravitate towards the look and feel.

Now for the game I’ve been pecking away at for the last year, Dofus – a MMORPG that hits the spot nicely for me. The game was started in France where it’s hugely popular, and later translated to many languages – including, of course, English. I read somewhere that there are 10 million players worldwide. A sequel ( that looks excellent ) is currently in closed beta: Wakfu

Like the previous game I wrote about, World War for the Android, Dofus offers to me a game that I don’t have to intensely keep up with to play. I peck at it. Every so often I’ll log in, fight a few monsters, mine some ore, setup shop, and logout.

Not having a lot of time to level my character via fighting monsters for hours on end, I’ve found particular enjoyment experimenting with the logged out dynamics of the game with the game’s market. For the last several months, I’ve been creating monopolies in the game, which gets my rocks on some level or another ha, ie:

Monopoly Strategy #1:

Buy out all the dungeon keys to Gobball dungeon in the main town centers from all the key makers, then sit at the dungeon entrance and sell them for 3x’s the price. When others try to copy the strategy and undercut my price, I’ll buy out all their merchandise and up my prices. This is an aspect of the game that can be done very casually, by only requiring I occasionally login for a few mins every few days steadily watching my in-game fortune grow and monitoring the market for other trends where I can jump in for an easy win. Kinda like playing stocks ha.

Haha, nerdy I know.

Anyways, if anybody out there decides to give the game a shot, drop me a message – I play on server “Solar”.

Life in Pittsburgh during the G20 Summit

Sep 24
2009
Troopers in Lawrenceville

Troopers in Lawrenceville

What a strange day! This may be a tad ignorant, but I really don’t know what the G20 is truly all about. I’ve only caught bits and pieces from other people – needless to say, it’s a big event. The office is just a few blocks from the convention center where the meetings are being held, and there are more cops, S.W.A.T. teams, and state troopers marching the streets than a small army.

Driving around, we’ve been behind vehicles tagged “diplomat” more than once, hit a few road blocks, and she had the unfortunate event of protesters banging on the car down Penn Avenue. I’ve caught rumors of tear gas being used, our office building was on lock down towards the end of the day, and on the way home the radio said President Obama was making an appearance in Oakland, just around the area we were staying for the last 2 months!

So, WTF is going on?! Ha… something good better come out of this ( aside of the awesome food Lockerz provided today to keep it’s employees safe during lunch ). We had to drive through Wilkensburg to get home, and that’s just no treat – cab driver once told us that Wilkensburg doesn’t get city funding, so it’s falling apart… crack whores calling out to their suga daddies – no lie. Though, given my ignorance to the world changing event downtown, perhaps I’m no better, ha.

Attached is a picture Drew Zhrodague‘s mom took on her way for coffee.

PHP Microtime Tutorial

Aug 28
2009

Every once in awhile one has to write a script that is concerned with execution time. Consider the following snippet that utilizes epoch seconds to calculate execution time:

$start_time = microtime(true);
usleep(200000);  // sleep 2 seconds
$end_time = microtime(true);

echo 'Execution time:  ' . ($end_time - $start_time) . "\n";

Pretty straight forward and has many useful applications. By using built in php functions, `microtime` and `usleep`, it’s easy to benchmark operations, and even set time limits on operations. Consider the next snippet which will halt execution after 30 seconds:

$max_execution_time = 30;
$start_time = microtime(true);

while (1) {
    if ((microtime(true) - $start_time) > $max_execution_time)) {
        break;
    }

    //Do something
} 

One more clever application, is to pace your scripts. Such may be useful when concerned with load:

while (1) {
     usleep(10000);  // sleep 1/10th of a second
    //Send a request... query a DB... do something
} 

You can do quite a bit with these two functions. It never hurts to read up on microtime, and usleep. Enjoy!

Visit Other Sites!

Find me on other sites...

Archives

All entries, chronologically...

Pages List

General info about this site...