Devit!

CodeIgniter is a great little PHP framework that allows you to rapidly build MVC web applications. Without getting too far into Model View Controller ideology, this post will explain how to extend CodeIgniter’s Controller class to achieve site-wide authentication checks.

Not long after starting your fancy new webapp, you will start to realize that putting

if (!isset($_SESSION['isloggedin'])) {
  redirect('/login');
}

in every single controller function is very tedious.

You can create an extension of the Controller class and put the common code in there. Here’s how.

Create a file in /system/application/libraries called MY_Controller.php. The name of this file is important. If the prefix “MY_” doesn’t do it for you, go into /system/application/config/config.php and change

$config['subclass_prefix'] = 'MY_';

to whatever you want. Don’t change the “Controller” part though! You can also extend Models and Helpers.

Start with the following code in MY_Controller.php:

class Authenticated_Controller extends Controller {
  function Authenticated_Controller() {
    parent::Controller();
    session_start();
    if (!isset($_SESSION['isloggedin'])) {
      redirect('/login');
    }
  }
}

Go ahead and add any common controller functions to this class. Feel free to change “Authenticated_Controller” to whatever you want. You can also have multiple Controller extensions in this file.

Note: If you only have one controller extension, it is standard to name your class MY_Controller (rather than Authenticated_Controller).

Important Note: If you find yourself creating a bunch of controller extensions, take a step back and consider what you are doing. Is your extension being used by only one controller? If so, just put your code in that controller’s constructor.

Now it’s time to start using your new controller extension!

In every controller that requires authentication (don’t do this for your login controller!) rather than the traditional

class Manage extends Controller { ...

use this instead:

class Manage extends Authenticated_Controller { ...

Do you have CodeIgniter controller extensions that could be useful to others? Let us know in the comments.

Compost is an easy web-based way to grow consensus with your designs. Upload designs and allow your clients to annotate, rate and discuss. Easily revise comps based on feedback and get approval.

Compost is currently in version 0.8beta. Coming-soon features include email notifications, project searching, and an iPhone application.

Compost is free software, released under GPLv3. You have the freedom to:

• - use the software for any purpose
• - change the software to suit your needs
• - share the software with your friends and neighbours
• - share the changes you make

Getting Started

You can download the latest version of Compost here. Follow the README instructions to get Compost up and running in seconds.

If you have any suggestions or problems, be sure to drop us a line.

Compost Versus Alternatives

Compost differs from most feedback systems in that it is completely free and open source. Here is a chart that compares some popular feedback systems to Compost.

Participate

If you’re handy with PHP, jQuery and Code Igniter we encourage you to become a committer! Help us move Compost forward and give back to the open source community.

To get started, visit the project at Google Code – there you can familiarize yourself with the issues, checkout the source code and browse changes. You will need to be a member of the project to commit any changes – to become a member, send an email to gavin.blair at rtraction.com and I’ll add you as a committer.

If you’re not a coder you can still help out by testing Compost and providing feedback.

Coming Soon

Very soon Compost will have an iPhone app, drag-and-drop design ordering, and email notification options. What features would you like to see in Compost? Leave a comment below or at our feedback site.

I really enjoy using CCK to define custom content types and it is usually does the trick all on its own. However, sometimes I need to get the field data out in some other way. This example retrieves CCK select options and returns them as an associative array, which can then be used in a custom form or elsewhere.

function _module_events_types_array() {
	$query = "SELECT global_settings
		FROM {content_node_field} AS cnt
		WHERE cnt.field_name = 'field_meeting_type'";

	$queryResult = db_query($query);

	while ($meeting_types = db_fetch_object($queryResult)) {
		$meetings = unserialize($meeting_types->global_settings);
	}
	$meeting_list = explode("\n", $meetings['allowed_values']);
	$meeting_array = array("" => "All Meeting Types");
	foreach($meeting_list as $meeting_type)
	{
		$meeting = explode("|", $meeting_type);
		$meeting_array = array_merge($meeting_array,
			array($meeting[0]=>$meeting[1]));
	}

	return $meeting_array;
}

I’m not a huge fan of flash components.  I’ve run into too many instances of incompatibilities between version and components themselves.  However the ScrollPane component is just too useful to pass up.  The thought of having to build my own basic UI components also seems like a waste of time.

This article is being written because the documentation on this component is not spectacular and can be quite ambiguous to the new actionscript programmer. I ran into trouble in the methodology of how ScrollPane wants you to work.

Normally the addChild method is used to embed one MovieClip in another.  That was the method I assumed would work for the scrollpane.  However after getting the error “Error #2006: The supplied index is out of bounds.” I realized that was not how it worked.

To simplify, use:

scrollPaneInstance.source = movieClipContainer;

NOT:

scrollPaneInstance.addChild(movieClipContainer);

Due to the fact I’m not a huge fan of the components that come with Flash I’m wondering if anyone has found any other ScrollPane type components that are lightweight and open source. TweenLite is an example of a lightweight alternative to the built in flash library for tweening.

When you post an article of any type on the web, it seems almost mandatory that you include “Tweet This!” and “Post to Facebook” links. Of course, you can get plugins that create sharing links automatically for most blog software (Sociable for Wordpress (this is what we use); Service Links for Drupal; Sexy Social Bookmark for Blogger; I could go on), and they usually cover more networks than Twitter and Facebook. However, some circumstances require a more do-it-yourself approach.

Adding “Share on Twitter” and “Post to Facebook” functionality to your web application is a snap! In this post you will learn:

• -How to prefill a tweet for your user
• -How to let your users share a link on Facebook, including page thumbnails and description
• -How to harness the power of bit.ly’s API for short URLs and click tracking

Share on Twitter

Use the following code to create a “Share on Twitter” link:

<a href="http://twitter.com/home?status=Add Sharing to Your Webapps - http://www.rtraction.com/blog/devit/add-sharing-to-your-webapps" target="_blank">Share on Twitter</a>

Share on Twitter

That was easy! Try replacing your link text with a Twitter button:

<a href="http://twitter.com/home?status=Add Sharing to Your Webapps -http://www.rtraction.com/blog/devit/add-sharing-to-your-webapps" target="_blank"><img src="shareontwitter.png" alt="Share on Twitter" /></a>

Twitter can’t make it much easier than that! When the user clicks on your button, they are brought to their familiar Twitter timeline, with the next tweet prefilled for them.

Facebook Share Link

Use the following code to create a “Post to Facebook” link:

<a href="http://facebook.com/sharer.php?u=http://www.rtraction.com/blog/devit/add-sharing-to-your-webapps" target="_blank">Post to Facebook</a>

Post to Facebook

Too easy! Now replace the text with a nifty Facebook button:

<a href="http://facebook.com/sharer.php?u=http://www.rtraction.com/blog/devit/add-sharing-to-your-webapps" target="_blank"><img src="posttofacebook.png" alt="Post to Facebook" /></a>

When the user clicks on your “Post to Facebook” button, a new window pops up, prompting them to share the link. The user can optionally update their Facebook status while they are at it.

What about Page Thumbnails?

That looks pretty good, but it could use a little more flair. Facebook attempts to add a thumbnail and a description to your link. Facebook scours your page for <img> tags, and uses those for thumbnail options, in the order that they appear on the page. If you want a screenshot of part of your webapp to be the first choice, you’ll have to put the following code near the top (before any other <img> tags) of your page:

<img src="screenshot.jpg" style="display: none" alt="" />

This will not be visible to users due to the inline CSS, but Facebook will pick it up.

What about Page Description?

Facebook uses the page’s meta description. Make sure the following code is present in the header of your page, between <head> and </head>:

<meta name="description" content="rtraction - Add Sharing to Your Webapps - Twitter and Facebook sharing links are a snap to build!" />

Now your Facebook share is complete with a thumbnail and description.

Shortened URLs with Bit.ly

Bit.ly’s API makes it easy to dynamically create shortened URLs. A big advantage of this is that you can make use Bit.ly’s click tracking.

You can learn how to use the Bit.ly API on your own, or use an existing library. There is a DLL file for .NET projects to use Bit.ly. This is untested by us, but the Hashbangcode Bit.ly PHP Class looks like a promising PHP solution. Let us know in the comments if you have tried this library!

If you have any other tips for creating share links, let us know in the comments.

Today the rTraction team is wearing blue beanies (or toques as we call them here in Canada) to raise awareness about web standards.

Why are we wearing toques inside and sharing the pictures with the world – risking overheating, ridicule and Gavin’s hathead?

In an industry that thrives on creativity and thinking “outside the box”, why are we so excited about defining the box?

Because we love to make cool stuff.

The web is an ecology of people, communities, ideas, websites and applications. Standards are common language that connects each denizen making the system stronger, richer and able to evolve.

To a user, open web standards make our systems ‘just work’. To a web developer they free us from the limitations of the technology and let us focus on all the cool things we can do with it.

Open web standards make our websites and applications intuitive. They make sure that our cool stuff can reach the most people as quickly and easily as possible no matter their platform, location or browser.

They lower the barrier of entry, enabling more people to create content, inspiration and innovation.

We’ve all experienced what happens without familiar standards. Stuck on channel 3, the radio playing loudly, Desperate Housewives recording over family videos, the clock flashes 12:00…12:00….12:00….

The less time we spend worrying about compatibility, accessibility and extensibility, the more time we can spend making web apps that are leaner, meaner and cooler.

So today, we wear our beanies with pride and support the standards that let us and all developers and designers fill the web with cool stuff.

Join the movement!

Facebook: http://www.facebook.com/dwws

Twitter: http://twitter.com/BlueBeanieDay or search #bbd09

Flickr: http://www.flickr.com/groups/bluebeanieday2009

YouTube: http://www.youtube.com/watch?v=v4G2hgioLFk

Learn more about Web Standards

http://www.opera.com/company/education/curriculum/

http://webstandardsgroup.org/resources/

http://www.webstandards.org/learn/

Drupal and Wordpress are two essential tools in any web developer’s backpack. Both open source content management systems allow the developer to rapidly design and build fully functional websites, however each has its own benefits for you and your client. Here are six questions to consider when deciding which one to use for a project.

Read the rest of this entry »

We recently had the opportunity to put a cool visual technique to use: Parallax. According to Wikipedia, Parallax scrolling is a “pseudo-3D technique, [where] background images move by the ‘camera’ slower than foreground images, creating an illusion of depth in a 2D video game and adding to the immersion” [Parallax Scrolling on Wikipedia].

To see the effect in action, check out 1000 Acts of Kindness.

jQuery and the plugin ScrollTo were both used, along with several transparent PNG layers. By making “close” layers scroll faster than “far away” ones, a 3D feel was introduced to the page.

How it Works

For each layer we have a <div class=”layer”> element that has the following CSS properties:

.layer {

 height: 100%;

 width: 100%;

 overflow: hidden;

 position: absolute;

 top: 0;

}

.layer div {

 width: 10000px;

}

Each layer element has a <div> inside of it that has a transparent PNG background image, a forced height (the height of the image), and a really big width (as shown in the snippet above).

If we didn’t have the “overflow: hidden” on the containers, you would see scrollbars on the bottom of the page. Using this CSS property we hide the scrollbars, and later we will use the jQuery plugin ScrollTo to automatically scroll each layer.

For each layer I assign four distances, one for each “slide”. Closer layers have more difference between each distance, and far away layers only move a little. The following table shows the distances for each layer.

Layer
1st slide
2nd slide
3rd Slide
4th Slide




#clouds4
20
100
200
300


#clouds3
20
150
300
450


#clouds2
20
200
400
600


#clouds1
20
250
500
750


#fartrees
20
300
600
900


#neartrees
20
800
1600
2400

When the time comes (the user clicks on the “next slide” arrow), each layer is scrolled:

$("#clouds4").scrollTo(x, 500);

“x” is the distance determined by the table above, depending on what slide we are going to. The second parameter is how many milliseconds the animation will take.

Warning

Internet Explorer (even IE8!) renders transparent PNG’s differently than other browsers, and therefore the animation is a little choppy. To overcome this, I removed all overlapping layers in IE using conditional tags. That means that IE users won’t get the full effect, but the site is still usable, and there is still some parallax animation happening. For IE6 (yes, we still make sure our sites work in that dusty old thing) I replace the transparent PNG images with transparent GIFs.

For more information and a full tutorial on parallax scrolling, check out Anthony Comben’s post Create a Funky Parallax Background Effect Using jQuery on ThemeForest.

If you have any parallax scrolling projects, we’d love to check them out! Let us know in the comments.

Building on our experiences over the years we’ve developed a list of key tasks required to complete prior to developers writing a single line of code. We hope these tips will save you some time on your next project.

1. Review everything

When it comes to any project its important to review all the material that your sales team and project manager are handing you.  Make sure you take the time to sit in a quiet area and read through all of the material making notes as you go.

2. Ask Questions

Following up on the first task its very important to ask lots of questions.  Even if the answers to every question is a simple yes, never underestimate the importance of asking questions and clarifying your understanding of functionality.

3. Review proposed technology

Anytime someone makes a decision to use a specific technology to solve a problem its always useful to review the technology proposed and ensure there are no missed opportunities.  More often then not the person who is recommended the technology is doing so on tried and true past project successes.  This however does not mean that new cutting edge technology wouldn’t be a better fit.

4. Talk with your development team

Even if you deployed every piece of functionality on previous projects it’s important to talk through what your going to be doing at a high level with your development team.  It’s especially important to discuss functionality you’ve never deployed such as a twitter feed or other new technology solutions. Someone more often then not has a good idea to save you time, or recently solved a very time consuming problem with one of the technologies you’ll be deploying.

5. Plan your attack

Take the time to sit in a quiet area, think about how you’ll be developing this solution and then write it down!  We can’t stress this enough as to how important it is to document what will be done first, second and so on.  On top of that it’s important to have this information available to your project manager, after all he’s going to want reassurance you can hit and deliver on the clients time lines.  Try using a gantt chart to create your plan as this is a simple yet effective way to dip your toes into this process.

6. Review your plan

Remember that even if you’ve spent two hours or six hours planning out what you’ll be developing first and second and what you’ll be developing last it’s important to review this with the project manager.  They’ll be able to provide necessary feedback on concerns about client expectations and potentially bottlenecks you may not have considered.

7. Comp out functionality

At this point you should already have a design for your application however this design won’t illustrate every piece of functionality, and it’s not important to illustrate how a simple page will look before you get started.  Any functionality that isn’t 100% cut and dry should be laid out.  You can do this by hand, with many free layout tools or simply work with a designer to create rough composites that you can show to the client for sign-off.

8. Review everything with a team member

Take the time to review your plan and comps with another developer.  It’s always easier to have a mistake or suggestion pointed out to you know before your 50% down the project.  Have the other developer review your plan, your comps and talk him through everything so he understands what’s going to be developed without reading all of the information for the entire project.

9. Use pseudocode

Unless you’re the only developer in the world that doesn’t make mistakes or logic errors then this step is essentially for success.  Layout your functionality in pseudocode being as detailed as possible.  Overtime you’ll learn where details need to be very specific and where they can be a little less detailed.  This process will help you stop logic problems within your code every single time.

10. Start coding!

By putting some planning upfront you’ve just saved yourself lots pain and suffering moving forward.

Good luck – we hope this will save you some time and ensure things move smoothly for you on your next development project. Please share any tips you have for improving the development process in the comments.

When deploying a .NET web application with Crystal Reports you will need to install the appropriate crystal reports library on the server to use any reports you’ve built.

I recently ran into an issue where Crystal Reports Images (images in a report) would not show up on a new Windows 2003 Server.  After extensive web research with no solution in sight I decided to try to solve the problem on my own.

Note:  If you’re having problems with the images in the header bar (BusinessObjects toolbar) then please see this site below:
- http://www.gutgames.com/post/Crystal-Reports2c-issues2c-and-fixes.aspx
- or simply google “toolbar images for crystal reports not showing up”

To resolve my error I went into the Web Server(IIS) manager and performed the following steps:

1) Clicked on ‘My Website’ where I was using crystal reports
2) Clicked on ‘Handler Mappings’
3) On the right side under ‘Actions’ I selected ‘Add Managed Handler’
4) Request Path: CrystalImageHandler.aspx
5) Type: CrystalDecisions.Web.CrystalImageHandler, CrystalDecisions…….
6) Crystal Reports Image Handler
7) Press OK
Success!

I was able to track down this issue by looking at the URL for non-working images.  All pointed to the following:
http://www.MySite/CrystalImageHandler.aspx?*****useless info******

As you can see, the system is trying to access a handler to read out images specified in the report.

I hope this solution can save you hours of potentially wasted time and frustration.