Build an Awesome Status Board: New Premium Tutorial
plus

Build an Awesome Status Board: New Premium Tutorial

on Mar 24th 2010 with 42 comments
Tutorial Details
  • Difficulty: Advanced
  • Format: Tutorial and Screencast
  • Technologies: JavaScript, HTML, CSS, PHP
Download Source Files

When Panic unveiled their status panel to the world, I was both impressed and inspired. In today’s in depth Premium tutorial and screencast, I’ll show you how to built a similar status board! Help give back to Nettuts+ by joining our Premium program.


Final Product

Join Net Premium

NETTUTS+ Screencasts and Bonus Tutorials

For those unfamiliar, the family of TUTS sites runs a premium membership service. For $19 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Psdtuts+, Aetuts+, Audiotuts+, and Vectortuts+! For the price of a pizza, you’ll learn from some of the best minds in the business. Join today!

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm a Canadian web developer, a staff writer at Nettuts+, and the author of the Rockable Press eBook Getting Good With Git. I prefer JavaScript and Ruby. Soon, I'll be doing some writing on my personal site; of course, you can follow me on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://twitter.com/xrommelx xRommelx

    awesome!!!
    dowloading
    1st!!!

    • http://www.jeffadams.co.uk Jeff Adams

      Dude, no-one cares if you are first.

      • http://twitter.com/xrommelx xRommelx

        get a life man!!!

      • http://laranz.com lawrence77

        u cares and reply his comment :D

      • Tim

        I hate people who do that…but secretly i would do it if i ever had the chance

    • bill

      agreed. this “first!” bullshit is ridiculous. what are you, 12?

  • salman

    i think author should have explained the article/project a bit more and its highlights or perhaps demo would have helped me to understand what it is about and may be i would have bought nettuts+

    • Stuff

      A demo? So you can look into the source code and copy it without becoming a premium member?

      • Justin St. Germain

        its php, you cant just copy the source code and expect it to work, lol.

    • http://www.woony.be woony

      Yeah ,
      I feel the same way, I’m still waiting to buy me a tuts+ account, till something is really worth it. this might be but I can’t really figure out what it’s about. How do you insert how far along you are? And is there explanation on the graphs?

  • http://www.nbsilanke.com hookah

    I tried to think so, but I found it was not as the same in the actual process. As you mentioned, I still have doubts, but really thank you for sharing!

  • http://www.jeffadams.co.uk Jeff Adams

    I agree a little with the comment above – I appreciate you can’t give it away, but a little more description about what is in the tutorial woulod be nice.

    I see it uses Flot graphs which I am now wondering whether it gets hooked up in the tutorial – if so I am sold :-)

  • http://johnathanbarrett.me Johnathan

    Looks like fun, Would have liked to do it this evening when I’m in from school but got super important client work on :(

  • Tom Van Assche

    What framework is used for this? If any…

  • Lars

    Really awesome tutorial!

    However I would like to have seen some nice graphics via webkit like the Panic Status Board!

    Also and more important, as a Plus member I would like to be able to DOWNLOAD the screencast. Just ONE accidental click while viewing, and I have to start all over and try to find where ever it stopped.

    Please, please make it downloadable.

    Thanks for a fantastic tutorial!

    - Lars

  • http://andrewburgess.posterous.com Andrew Burgess
    Author

    Hi Guys,

    Thanks for your interest in the tutorial; the schedule is coming in from a Google Calendar feed; the project data is coming in from a database; we don’t make any front end to adjusting your projects status. Of course, the tweets are coming in from Twitter. The analytics chart is random data; pulling that in from an analytics app like Google Analytics would be a tut in itself.

    HTH

    • http://www.jeffadams.co.uk Jeff Adams

      Thanks for this – still an awesome tutorial, well worthy of a plus membership in my opinion.

      I don’t know about anyone else, but I’d really love a tutorial on database driven FLOT graphs because that’s one area I just can’t get my head around.

  • http://sonergonul.com/blog Soner Gönül

    I think that will be very useful

  • http://www.jordanwalker.net Jordan Walker

    Looks interesting.

  • Rohan Mehta

    LOL! You left the title as “Generating PDF files with PHP”, your previous tut.

    I like the tutorial, well written :-)

  • http://spotdex.com Davidmoreen

    Wooh this looks really cool!

  • http://www.manocreative.com/ Manuel Pineault

    Nice! I see you got inspired like I did when seeing the Panic status board. Now I need to implement this system with Fogbugz (what my company uses to keep track of projects). I was once a plus member and now I might have to become a plus member again :)

    Thanks for this tutorial.

  • George

    Andrew – great work – and many things in this that are quite useful. I would say that given the length of this tut that you might want to provide something that is basically a Table of Contents equivalent… which speaks more to the approaches you use for each part.

    For example: ” In the first 20 minutes, I will show you how to:
    Build the overall structure (and what was used …)

    In the second ~ 20 minutes, I’ll be
    building each part, using jQuery* to…

    and Finally we’ll be
    Hooking it up, using…

    This approach will allow folks to navigate to the part that interests them quickly. I’d say the other thing to speed things along is skipping over the typing as much as possible.. if it is repetitive, just explain what you are adding, then stop recording and finish the typing and then turn the recording back on when you are finished with that section..

    Still enjoyed it – and took notes on what was being talked about at each point…

    Thanks

    • http://andrewburgess.posterous.com Andrew Burgess
      Author

      Thanks for the pointers; glad you enjoyed it!

    • Tobias Jurga

      But remember that not everybody is that advanced as you are – I like the fact that he doesnt skip the typing, not that I need it but, i can build it parallel in my coda while listenin and watchin :P but that’s just me

  • http://www.25thingsdesign.com Devin

    awww… I just went to download it and my tuts+ membership expired.

  • http://www.cssview.com Andrew Conlan

    Really liking this idea, we have boards like this in the office, but it’s time to make them pretty :D

  • http://www.dynamicpalette.com Chris Seckler

    I don’t see what the big deal is on this Panic Status Board. Has anyone seen it in action? All I can find are some images of it online. For all I know, it’s just a photoshop design!

    • Kevin

      They can’t show us there board. It’s for staff only, talking about some project they keep secret for the moment.

    • SM

      Panic is a reputable software developer that has been around for a while. I seriously doubt they would post a blog entry regarding a photoshop design. Since the information is proprietary, they cant be expected to post a video or similar of it in action. It is obviously for internal use. There are several other copycat projects that were inspired by Panics solution and a few have videos. Just check some of the links in the comments to the Panic blog entry.

      Nice tutorial OP. Very useful. :)

  • http://mixcyber.com JohnSmith

    nice post…very useful…:)

  • http://www.nextgenwebmedia.com Grant

    If I have a question about this tutorial (which I’ve already downloaded as a member), where can I ask it? I don’t want to post code here…

  • http://NullFearLabs.com Will Smidlein

    So uh…. am I missing something? Why is the index.php file missing so much?

  • http://www.highergroundstudio.com Kyle King

    Has anyone been able to get the ‘projects’ area to work? Yes I did setup a mysql, populated it, and add my mysql connections to statboard.php. All I keep getting is:

    Fatal error: Call to a member function query() on a non-object in (myfiles) on line 19.

    Line 19 being $result = $sql->query(“SELECT * FROM project_status”);

    I am new to creating php mysql direct database connects but feel there is something wrong with this part of the tut. Everything else works perfect. I just don’t like how there is commented html on the index.php file that fakes the ‘projects’ area.

  • Carlos White

    The calendar is lousy, it works off of an xml feed and it only works in order of date posted, as opposed to showing the next few events/meetings. It is currently showing 4 items from last year.

    Not worth the price of subscription, if you are thinking of paying in order to get access the files for this tutorial, DON’T DO IT!!!

  • http://www.kevinjmay.com Kevin May

    Sort of like Carlos White said… bit disappointed with the calendar. I couldn’t get it to show my recent agenda items, and it looks like you’d have to delete your calendar events just to get the statusboard to show the newer ones. Plus I’m also getting a comma after the date when its only 1 number for the date (example: it shows 4/1 ,). Not sure how to fix either of those problems yet.

  • http://www.hlpipefittings.com pipe fittings

    Lots of Good information in your posting, I bookmarked your blog post so I can visit again in the near future, Cheers!

  • http://www.obdsvs.com tacho universal

    Nice and useful tips as for me! Thanks for sharing! Yo seem to be a really professional!

  • http://www.nb-nc.com Grinding machine

    A wonderful article. In my life, I have never seen a man be so selfless in helping others around him to get along and get working.

  • http://johnsfoofoo.multiply.com/journal Julio Wygant

    Hi there. would seem to be an issue with the first url you presented : it returns a 404 Please check my site at Pressure Cooker Cookbook And Pressure Cooker Cookbook

  • http://www.ebetclub.com gclub

    Hey there would you mind sharing which blog platform you’re working with? I’m planning to start my own blog in the near future but I’m having a difficult time making a decision between BlogEngine/Wordpress/B2evolution and Drupal. The reason I ask is because your design and style seems different then most blogs and I’m looking for something unique. P.S Apologies for getting off-topic but I had to ask!

  • tilkshick

    Il vostro parere, è il tuo parere