How to Prevent Facebook and Google from Tracking You Online

These days it’s impossible to casually surf the web and avoid sites that use tools from Facebook, Twitter, Google, and others that make the experience more social and immersive.  Still, with privacy issues at the forefront of technology news, it is worth noting that many of these social media tools make your e-life more convenient at a price – they track your behavior.

In most cases, this isn’t at bad as it sounds. Google tracks your search and browsing history with cookies to deliver more relevant advertisements to your favorite pages. Facebook performs similar tracking of your social behavior to gain a better sense of your browsing habits as it builds tools for its users.

The troublesome part of third-party tracking of your daily surfing is that there are many things companies can do with this information that isn’t so beneficial to its userbase; after all, they needs to make their money somewhere. Imagine a scenario where your personal searches and browsing habits were sold to advertisers or used against you – the possibilities are nearly endless.

Note: For more information on cookies and third-party tracking, refer to this Lifehacker post which does a decent job of explaining some facts and myths.

End Third-Party Data Collection

A former Google engineer, Brian Kennish, developed an open-source browser add-on called Disconnect to avoid such possibilities as he began to learn more and more about cookies, third-party tracking, and Internet privacy while working at the Big G.

Disconnect is available as both Chrome and Safari browser add-ons and unobtrusively stymies third-party tracking scripts from major data gatherers like Google, Facebook, Yahoo!, Twitter, and Digg. The function is pretty simple: Disconnect blocks tracker scripts from collecting information from you, such as Facebook ‘Like’ buttons or those pesky auto-login sites, and de-personalizes your searches on Google.

While it’s true that Google has the option to turn off your Search History, it can do what it pleases with your search habits. Disconnect is a good way of staying logged in to your social media accounts without needing to worry that your sudden interest in “red spots on my inner thigh” will come back to haunt you.

The browser add-on is easy to install and shows you with a counter how many scripts were blocked from collecting personal data. It is also easy to disable and re-enable (just click the big icon of your choice) should you decide that you want to re-Tweet, Digg, or ‘Like’ something on your favorite sites.

Seven blocked scripts during a visit to

I hope that one day the internet will become a place where the big social players such as Google and Facebook won’t be able to collect information about you unless they expressly ask your permission, but until that day comes Disconnect has you covered.

As a side note, Mr. Kennish forfeited his golden ticket job with Google to work on this passion project, so he must be serious about it. He was kind enough to keep this project open-source, so should he be forced to abandon it surely another developer would pick up the slack. With any luck, protection for third-party tracking is here to stay.

A Return to Old-School Gaming: Emulators and Retro Games

Mechner used video of his little brother to help create his animations in Prince of Persia.

Back in the early ’90s things were different and, in some ways, better. MC Hammer was lighting up MTV with inflatable pants, Compuserve 3.25″ diskettes were confusing households across the US, and my family’s 66 MHz Pentium PC was a $3500 fiery hellbeast that made the Pentagon as nervous as current-day Wikileaks.

And the video games…

Before the gaming behemoths swallowed up the industry during the console wars, many games were developed by small groups of programmers that emphasized gameplay and challenging puzzles over graphics. Heck, the original Prince of Persia (1989) was developed by a single guy, Jordan Mechner, who carefully crafted a game that required a keen sense of timing, problem-solving ability, and patience…because approximately 0% of this game was passable on the first attempt.

You’ll try. You’ll fail.

I miss those days, sitting in my basement with my brother playing our NES and SNES, trying to get past that ridiculous ‘speeder’ level in Battle Toads (seriously, I’ve never played a game that went from ‘easy’ to ‘impossible’ as quickly as Battle Toads). Final Fantasy, Tetris, SimTower, StarFox! I want them back!

There are a few ways you can once again enjoy these classic games, so dust off that Power Glove and your favorite Zubaz, things are about to get retro.

Retro Gaming Repositories

Praise the Lord for basement-dwelling nerds that love their retro gaming. Two of my favorite places on the internet are RGB Classic Games and Liberated Games, which are sites devoted to the free legal distribution of retro games from DOS, Windows, and even a few from OS/2. If you’re looking for titles including the original Grand Theft Auto, Wolfenstein 3D, Age of Empires (1 and 2), and Duke Nukem (1 through 3D), you’re in luck.

It’s not all fun and games though – this software isn’t always a piece of cake to get working on modern computers. With some titles you’ll have to install in Compatibility Mode to get them to work on Windows 7. When I was installing SimTower the other day, I had to ensure that it was running as “Windows XP compatible”. I guess you take the bad with the good.

To complicate things a bit more, some titles absolutely will not run on a 64-bit operating system. To help ease the stress of geeks around the world, Microsoft offers the freely downloadable Windows Virtual PC which can be run within the Windows 7 environment, and effectively emulates a 32-bit version of Windows XP. This can be a hefty download, but if you absolutely NEED to get in a round of the original Command & Conquer, a few hundred megabyte download won’t hold a candle to your turbo-nerd resolve.

Pro-tip: Before downloading your favorite classic titles, make sure that it is legal to download the game.

Console Emulators and ROMs

Try again…maybe prop it on its side with a book? There we go, that’s better. Ah crap, try blowing in it again.

Remember that trick with the NES where you’d take out the cartridge, blow into it, blow into the console, and then suddenly it would work? First of all, who invented that trick, and how did everybody find out about it? Second, wasn’t that Blinking Gray Screen Of Failure (BGSOF) depressing?

NES enthusiasts have helped to turn the system into something more reliable (and less susceptible to stray popcorn seeds) that can be played within your Windows or OS X environment. It’s pretty simple–people have written programs that essentially act as the console, and you can download “ROMS” which are the cartridges, single files that can be played by the emulator.

What are some popular emulators? For Windows 7 I use Nestopia (NES emulator) and ZSNES (SNES emulator). I’ve had great success with these programs, and very few problems. Some nice features include a built-in Game Genie (remember? That thing that destroyed your console two decades ago?) and the ability to interface with pretty much any USB gamepad ($10-30, depending on quality).

Have a Mac? No problem. Nestopia was originally developed for OS X and I’ve heard good things about  BSNES (SNES emulator for OS X).

Happy Days are here to stay

Modern games like Halo and Starcraft 2 are great, and a lot of fun because they offer fantastic multiplayer options that just weren’t available in years past. However, sometimes you just want to kick back and enjoy some 8-bit graphics and mono sound. If you’re compelled to indulge your inner child gamer, don’t fret…your options abound.

Happy gaming, geek,  and don’t forget:

↑, ↑, ↓, ↓, ←, →, ←, →, B, A, start.

Stay connected & save: 6 tips for padding your bank account in the New Year

With the New Year just around the corner, saving money seems to be on the minds of many people. Being a graduate student, I am not among these people, because Academia pays huge sums of money for almost zero work.

Let’s be serious, I’m broke, and I need to save some dough.  New Years is just the time to start padding my savings account and cutting my costs.

I had an interesting conversation recently with my friend Brianna that went something like this…

Brian: “Bri, buy me pizza.”
Brianna: “Buy it yourself.”
Brian:  “I can’t. I don’t have any money.”

I think this exchange goes a long way in describing my need to slash some expenses. I spent the rest of my evening making a plan for January 1st that will dig me out of my financial sinkhole. The only rule is that I don’t want to live like a monk—I need some entertainment and, of course, Internet access.

So where do I plan to make the cuts? *Straps on helmet* Come with me.

1.  Choose your connection—Mobile Device vs. Cable Internet

At the moment I have a cell phone with Internet access as well as high-speed cable Internet access in my apartment. I’ve got to face the facts…I can’t afford both. Your situation may differ, but I personally don’t use my mobile device for much other than convenient email and the occasional Tweet, so my choice is obvious, sack the data plan on my phone.

However, if you’re the kind of person that doesn’t need super bandwidth at home, you may opt for a data plan that allows you to tether your computer and phone. There’s a swanky deal that will save you $40 or better. In my case, by shedding the data plan on my mobile device (and downgrading my anytime minutes), I’ll be saving $45. Cha-ching.

Worried about losing your ability to text? Fear not. Gmail and Google Voice allow you to SMS your contacts from your PC.

Pro-tip:  If you require mobile device Internet and Email access for work, ask your employer if they would be receptive to a co-pay plan. Some of my friends have had success with this.

2.  Choose your entertainment

Entertainment overload can be surprisingly stressful.  I have an Xbox Live subscription, Netflix, an enhanced Cable package, and I’ve been toying with the notion of Hulu Plus. Seriously, there aren’t enough hours in the day to enjoy each of these in the way the creators intended, so why cut yourself short?

I have a pile of Xbox 360 games still in the cellophane (including Dragon Age, ARGH!) so there is no question that I’ll be ditching my Live subscription. With all the free TV and movies available on Hulu and Netflix, is there really any reason for me to have enhanced Cable that I don’t watch?

By dropping Xbox Live and ditching my cable package (aside from internet), I’ll be saving $41 per month. Huzzah!

3.  Join a food co-op

After looking over my monthly expenses, I was shocked to see how much I spent on food. Between going out to eat and spending a small fortune at my local coffee house, my monthly food bill was approaching $450 each month.

I wept. I swore. I found an alternative.

Local food co-ops will help you pinch your pennies by providing you with a place to buy bulk commodities, such as grains, rice, soup mix, and basically any other dry food you can imagine. Bring your own container and taste the savings. Better yet, many co-ops offer year-round selections of local produce, such as tomatoes, potatoes, cucumbers, and so on. You know what that means? You’ll be forced to be healthier and more attractive as you save money. The nerve of these people.

Most co-op purchased fruits and vegetables are organic. Organic?! Khaaaaaaaaaaaaaaaaaaaaaaan!!

The co-op in my city costs $100 to join, but it is a fee that will be refunded when you leave the co-op. Plus, it gives you part ownership of the co-op. Pretty good deal. Aside from the initial cost, my new carefully planned food budget has slashed my culinary deviance by $150. Yeah, that’s right. You don’t like that–do ya, gut?

4.  Park the car. Leave it parked.

I drive too much. You drive too much. We as Americans (and some Europeans) drive too much.

We pay tax dollars to support a public transit system that we almost never use. At the moment I spend $75 on gas each month (3 tanks). As a student, I get free access to all city buses. Also, during the summer I’ll be riding my bike and hopefully getting some sun on this dreadfully pasty skin of mine.

My goal is to cut out one tank of gas each month, and I think that’s very conservative–a savings of at least $25 each month. Bazinga!

Pro-tip: Driving less will save on regular car maintenance, like oil changes. On a related note, don’t be tempted to skimp on car maintenance, as you already know deep down that it will bite you in the ass eventually.

5.  Save power AND quarters—a laundry tip

Some people may think this is silly, but take a second and think about your laundry. How many loads do you do in a month? How much electricity does it eat up to dry them? Or worse—how many quarters?

My parents recently purchased a drying rack to accompany their washer, and between the two of them, they save $6 each month on electricity. Pretty cool! I did some thinking and realized that I probably spend more than that each month in quarters drying my clothes at the laundromat. For shame!

A friend was quick to inform me that letting your clothes hang dry is a good way to increase their lifespan. That’s $6 per month in savings, and probably more. Let it rain!

6.  Ice those credit cards and make a friggin’ budget

We’ve been hearing this forever, but few of us actually do it. The average American has over $8,000 in credit card debt with an average APR of 14.4%. No need to bust out those calculators, that’s over $1100 that we hand over each year…

Studies have shown that people who stick to a monthly budget and limit their credit card usage usually pay off their credit card debt within 18 months. Are you up for the challenge? I am, because I’m tired of paying for Citi-branded Corvettes.

Head over to Google Docs and grab some of their pre-made Budget templates and tailor it to your own expenses. Then, set up an account at Mint to closely monitor your spending and upcoming bills. We can’t fail, amigo.

As an average American, a clean credit card balance means a savings of $96 per month. Bonzai!


If I follow my plan closely, I’ll be saving $363 each month. That’s $4356 in a year! My friends, that’s a lot of cheddar. What could you do with that kind of cash? A mattress of dollar bills, perhaps?

With a little discipline, the savings from these small lifestyle adjustments will alter the course of my ‘pizza’ conversation by this same time next year.

Brian: “Bri, buy me pizza. Psych! I’ll buy it myself…With real money. And guess what—you don’t get any. Ok, you can have ONE PIECE…but I get to choose the toppings. And I’m taking the toppings off your piece.”

Sorry, Bri, the wealthier Brian is insufferable.

Happy savings, and happy holidays, everybody.

How To: Make a CSS background slideshow with jQuery

If jQuery has one strength, it’s the library’s fantastic ability to manipulate HTML objects. Built into the library are easy to use methods for moving objects, adjusting CSS and tag attributes, changing visibility of anything on the page, and many more. To sweeten the deal, jQuery includes animation effects that allow you to transition any object from one state to another in an aesthetic way that only takes a line or two of code.

With these ideas in mind, it’s a small wonder that many jQuery plugins were developed with the intention of easily introducing pretty slideshows to display and rotate series of images. However, if you look around long enough, you’ll be facing a frustrating truth—almost none of these slideshow plugins utilize the idea of rotating CSS backgrounds.

Right now you may be telling yourself, “Self, using rotating CSS backgrounds instead of image tags for a jQuery slideshow is a bad idea.” Well, surprise, this article is a dream within a dream within a dream to convince you of the opposite. When you wake up, you’ll have a changed mind, and better yet, you’ll think it was your idea.

Best practices in HTML, CSS, and Javascript

Let’s have an honest discussion about HTML markup and Javascript. As CSS became a dominant force in shaping the appearance of valid HTML in the 2004 and on, it became more important to structure markup in a meaningful way. Using tables for layout has gone the way of the dinosaurs, DIV overload is now taboo, and designers are utilizing more intelligent information structure in their markup. Somewhere in all this sanity, jQuery has made us a little bit crazy.

“Look how easy it easy to create an image slider for my page’s mast head!”

“But Brian, isn’t it foolish to make a mast head’s appearance reliant on an image tag rather than CSS?”

“Shut up, Self, just look at these animation effects. It’s so easy!”

“But Brian, what if you have 10 different images for a single mast head and jQuery doesn’t load properly or the user has Javascript disabled? Your page is going to look really funny with 10 versions of your mast head all displayed at the same time.”

“…screw those users…”

“This is not good practice, Brian.”

“But… but…”


You get the idea. It’s not a good idea to use an image tag slider unless you’re looking for an alternative way of displaying structured content, such as a photo gallery. However, many designers use these convenient image sliders to display graphics better suited for CSS background use. Slackers.

Fear not, you can have your cake and eat it, too. All you need is jQuery and a bit of know-how. I’m here to provide the know-how, good buddy. Let’s do this—high five!

Creating an CSS background slider with jQuery

Step 1: Markup

We’ll start with the HTML markup and CSS. Our example will be a typical mast head that is of a fixed width and height in the body of the page:

As always, we’ll include the jQuery library and provide a space for our Javascript code in the head of the page:

The line of code $(document).ready(function(){}) is a way of telling your page to execute commands after the page has finished loading. Our script will go inside, just to be sure that our code doesn’t try to manipulate HTML objects that have not yet loaded.

Step 2: Preloading Images

One pitfall of dynamic CSS backgrounds is that when a background image is changed, the user will notice a ‘flicker’ as the new background is loaded on the page. We can avoid unintended visual discrepancies by preloading the images before the background-changing code that is executed.

var imgArr = new Array( // relative paths of images

var preloadArr = new Array();
var i;

/* preload images */
for(i=0; i < imgArr.length; i++){
 preloadArr[i] = new Image();
 preloadArr[i].src = imgArr[i];

Let’s break it down. First, we create an array that holds the relative paths to each image file that we want to include in our rotation. Next, we create another array which will hold Image objects. A Javascript Image object is a symbol of an HTML image element, and once you declare its source, it is cached by the browser. We can then create a loop that goes through our ‘relative path’ array and creates an Image object representing each image we want in our rotation. The source is assigned for each Image object, and viola, our CSS background images are preloaded and cached.

Step 3: Dynamic CSS changes and animation

All that’s left is to take our preloaded CSS background images and rotate them one at a time over a set interval. This can be accomplished with a small amount of code:

var currImg = 1;
var intID = setInterval(changeImg, 6000);

/* image rotator */
function changeImg(){
 $('#mast-head').animate({opacity: 0}, 1000, function(){
 $(this).css('background','url(' + preloadArr[currImg++%preloadArr.length].src +') top center no-repeat');
 }).animate({opacity: 1}, 1000);

There isn’t a lot of code, but there is a lot going on here. First, we set a variable that will map which image in the ‘preloaded’ array is being displayed. Next, we set the interval at which our changeImg() function is executed. Remember, Javascript measures time in milliseconds, so our argument of 6000 is equal to 6 seconds.

Finally, we create the changeImg() function that will change the CSS background image of the element we dictate while animating the process.  The logic is to use jQuery’s animate() method to transition from one CSS state to another over a set amount of time. In our case, we’re changing the opacity to 0 over a 1 second period. Then, we change the background image of the #mast-head element with jQuery’s css() function and a bit of fancy array element selection. At the end, we again use animate() to bring the element’s opacity back to 1. Essentially—fade out, change background, fade in. Neato!

Here’s how your final script will look:

True to form, this jQuery demo has a lot of things happening in a small amount of space.  Use this portable little script for any number of projects, and remember, only use an image tag slider if it makes sense to do so! In many cases, dynamic CSS background changes are best practice. Check out this script in action.

Until next time, amigos, happy programming.


How to Perform Age Verification with jQuery and Cookies (mmm, cookies)

End of the line, kiddies.

If you’re a freelance developer, chances are good that you’ll encounter a situation where you’ll have to make some content “off limits” to the kids. In most cases, such as with alcohol-related material, this is required by law. So, how do you do it? Well, if you’re using jQuery, the answer is “easily.”

The first thing that may jump to your mind is that Javascript is not fail-safe. This is true; all a user needs to do is disable Javascript in his or her browser, and any sort of Javascript-based security measure is rendered useless. Luckily, legal requirements for online age verification recognize this and acknowledge that it is entirely (at least for now) dependent on the honor of the user. However, if your particular situation requires a verification system that is a bit more robust, consider using sessions which are supported in both ASP and PHP.

In this example, I will illustrate a scenario where the user is prompted with the question “Are you at least 18 years of age?” Of course, this tutorial can be extended to prompt the user for specific birth dates. For this tutorial, you will need:

I’m going to let you download those as I go grab a coffee. Are we ready? OK, let’s roll.

Before anything else, we’ll need to create two pages: one will be the “verification” page while the other will represent every page that has an age restriction in place. In both pages we’ll need to include a relative link to the two jQuery files that will be handling the cookies. Look at the snippet below and copy/paste it within the region of each page.

As with most jQuery solutions, you’ll need to add a

Let’s start off with the “content” pages that are presumably age restricted. The script is actually quite simple. If a cookie is set that indicates the viewer is of legal age, nothing happens. Otherwise, the viewer is redirected to a “verification” page, and the intended page is stored as a URL variable. Nothing too complicated there.

if ($.cookie('is_legal') == "yes") {
} else {
 document.location = "[pathtofile]/verify.php?redirect=http://";

Let’s move on to the “verification” page. In this example, the user will be presented a “yes/no” question about their age. If they are of appropriate age, they click “yes” and are redirected to the page they intended to view. If they click “no”, they are redirected to a Google Images search for “puppies.” Isn’t that cute?

The trick here is that the “verification” page will need to be able to tell which page the user is intending to view. In some cases, the user may be clicking a link to a blog post, and then the age verification screen rudely interrupts his or her experience. When users verify their age, they want to be redirected back to the page they wanted to see, not just the homepage! So how do we accomplish this?

 $.cookie('is_legal', 'yes', { expires: 1, path: '/', domain: '' });

 document.location = "";

 document.location = "";

We’ve set an ID to the “yes” button, which evokes some processing logic when it is clicked. Immediately a cookie is set named “is_legal” and the value “yes” is assigned to it. The other parameters dictate that the cookie will expire in 1 day, will be stored locally in the root of the cookie folder on the user’s machine, and is valid for the entire domain. For a more thorough explanation of jQuery Cookie’s parameters, check out the documentation.

You may be thinking “Hey, what’s the deal with the PHP stuff?” Well, PHP is very good at extracting URL variables, which we set on the “content” page. If you don’t have access to PHP on your server, you can do the same thing with Javascript, it’s just a little more involved (see a snippet). Our script determines if a redirect location was set and sends the user to the appropriate page.

That’s it—follow these steps and you’ll be keeping kids out of your age-restricted pages in no time. Well, that probably isn’t true, but you WILL be abiding by the law as a website administrator. For a look at this script in action, it is the current implementation at

Happy programming!

Want to Create a Web Application? Use CakePHP for Rapid, Secure Development

So you’ve got a sweet idea for a web application—great, let’s get to work! You’ll need a basic GUI, some sort of user registration, a templating system, logic processing, error handlers, form verification, AJAX processing, and… woah, this is adding up in a hurry. At what point do you get to start making the app itself?

What you need is a framework that will accelerate your app development by offering an easy way to employ common components to a site and the flexibility to quickly add custom logic.  This is where CakePHP enters the stage.

CakePHP is a PHP framework that simplifies the way you do programming. What do I mean by “framework”? This concept is best explained by making a comparison with traditional application scripts: a typical PHP script starts at the top and proceeds to the bottom while utilizing included classes to create objects and processes the intended logic. An error in your syntax ruins everything, and you need to manually code database connections and other activities not native to the language.

However, in a framework, you simply extend existing (and rigorously tested) libraries. For instance, CakePHP has the ability to “scaffold” a database table, where you simply provide a line code describing the table, and poof—the framework will display a basic interface for inserting, updating, and deleting records. No, really, it’s that easy… and that just skims the surface of CakePHP features.

So, the question really boils down to this: Why should you waste your time learning to use CakePHP? I’ll give you three solid reasons.

Faster development

You may or may not have any appreciation for online dating sites, but I think we can all agree that it would be a complex project if we had to build one from scratch. Ever heard of Mingle2? Yeah, me neither, but it’s a dating site that boasts 100,000+ users and was made with CakePHP in 66 hours. 66 hours. Let’s put this in perspective—this man started and finished production of a large scale social network in less time than it took me to beat Final Fantasy 7 the first time through. Impressive? You decide.

CakePHP shaves a lot of time off your typical coding assignments by letting you create a few lines of code that utilize the backbone libraries built into the framework. Do you need your application to send email? No problem. Do you want to verify a form to make sure the user is entering a credit card number? CakePHP has you covered. Need to interact easily with a mySQL database (or others)? Easy shmeasy.

On a lesser note, the package is a piece of cake to install. (See what I did there?)

Structure, security, and scalability

These are all pretty broad topics, but I’ll keep the description concise—CakePHP’s Model-View-Controller system (MVC for short) changes the way you program by establishing conventions that will simplify the creation of your app. In essence, the Model dictates how your app will interact with the database and the Controller will process this information in a way you dictate, finally delivering it to the View for display to the user. Consequent to this structure, the application has better access to data objects, files are shorter and better organized, and since we rely on CakePHP convention and library files, the app tends to be properly positioned for scalability.

For a much more detailed look at the way CakePHP processes an app, glance below on the left.  Next to that is how most app processing paradigms look. Sad, right? I know, I’m embarrassed, too.

Let’s not forget that security in app development is often sorely neglected. Fortunately, CakePHP protects forgetful programmers by offering protection from database injections and AJAX vulnerabilities. Did I mention the built-in regular expressions? If you’re like me, those will save your butt more than once.

It’s PHP

This may seem like a minor point, but think about it—PHP is supported on nearly every hosted server on Earth (20 million domains utilized PHP in 2007). PHP is also a freely distributed packaged that integrates perfectly with free server software such as Apache. Can you think of a better environment for developing an application with a limited budget? Don’t say McDonald’s Playland. Don’t you dare say it.

CakePHP also allows you to inexpensively and easily switch your current PHP practice to a rapid deployment framework. Not many things are more depressing (or expensive) than telling your team of PHP developers that they need to abandon their expertise to shift focus to a different language. With CakePHP, it probably won’t be necessary.


CakePHP will improve your app development experience in a lot of ways, but guess what—it isn’t the only PHP framework in town. Other frameworks such as Zend and Symphony have had great success and, like CakePHP, are robust options with large support communities. You may consider adopting Symphony if you prefer XML for designing databases, and you may hold a preference for Zend (which is more like a collection of libraries than a true framework) if you require tight integration with other platforms such as Facebook or Google APIs. Of course, there are even more than just these options from which you can choose.

Hopefully this brief summary of CakePHP was enough to convince you of the benefits of developing within a framework. Sure, ground-up development has its uses, but when developing a large, scalable app why reinvent the wheel? Hasten the process with a framework while improving organization and security. To whet your appetite with more details concerning CakePHP, visit their forums and have a look at their online book to better weigh your options.

Click here to see some sites developed in CakePHP., Mozilla Firefox Add-ons, and Yale Daily News are among them!

Join the growing community of CakePHP developers and see what all the fuss is about. Sorry, I mean, “see about what all the fuss is”. That doesn’t seem right, but you get the picture. Happy programming!

Image credit: Nathan Eal Photography, Paul Downey

Create your own Apache, MySQL, and PHP testing server with WAMP

PHP, MySQL, and Apache have become prominent ingredients in small and large website alike. After all, they are free, robust, and they each have a large community of supporters from which to troubleshoot. However, unless you have a server on which to develop your application, you won’t be able to enjoy these platforms or the, “Hey! Look what I did!” sense of satisfaction inherent to web app development. Many of us don’t have access to a hosted server with these components installed, so how do we go about setting up a local server on our personal PCs?

Many developers will argue that the best way to create a testing server is to install these packages individually from each organization’s homepage (here, here, and here), since it is the only way to be completely certain of the packages’ configurations. In that sense, I agree, but there are a number of pre-packaged installers that will get you to basically the same destination while alleviating most of the headaches that oftentimes go hand-in-hand with manual installation.

Some popular PHP/MySQL/Apache bundles include:

For the purposes of this guide, I will be using WAMP Server 2.0i which, at the time of this post,  includes Apache 2.2.11MySQL 5.1.36, and PHP 5.3.0.

To setup a testing server on your PC, you will need:

The installation dialog (shown below) is pretty straightforward. You will be asked for a location to which you will install the PHP, MySQL, and Apache directories. While the location you choose doesn’t particularly matter, I chose to save it to C:\wamp simply because it allows for easy access of the configuration from a command prompt, should that become necessary.

Installation completes fairly inconspicuously, and you’re left with a WAMP shortcut on your Desktop, as well as a tiny gauge-looking icon on your Taskbar.

The control panel (shown below) is a major convenience that makes WAMP such a joy – you can access most worthwhile aspects of your server configuration without messing around in the guts of your configuration directories. The server can be stopped, started, and restarted from this panel, and many options for each component can be modified.

Right off the bat you’ll want to designate the directory that Apache uses as the root directory for your server. This can be done by editing the httpd.conf file, as shown below.

Within the Apache configuration file, httpd.conf, you’ll want to look for two lines of code – one that begins DocumentRoot and one that begins >. In an unaltered configuration file, you’ll find these on lines 178 and 205, as shown below. The DocumentRoot property tells Apache where to find your site files and can be left as is, or changed to something more convenient. I have my site folder set to a directory within my Dropbox. Be mindful that you only use forward slashes, or Apache will get confused and download in its pants.

The same location used for DocumentRoot should be pasted into the line below it (line 205 in the picture). Save the file (File > Save) and close the document.

WAMP offers a convenient way of showing which modules are activated in your configuration in the Apache modules menu. I should note that by default the rewrite_module (often used to beautify URLs) is not activated. Many PHP programs, such as WordPress and CakePHP rely on this module, so it may be worth your while to activate it.

Similar to the Apache configuration menu, PHP settings and extensions can be modified in the WAMP control panel. By default, many commonly used extensions are not activated, including Curl. Simply go through the list of extensions in the PHP extensions folder of the control panel and select the ones you wish to use. You can also directly access the php.ini configuration file from this folder, if necessary.

Now that the server is configured, you may want to make a test file to see if everything is working properly. We’ll call our test file test.php and we’ll place it in the site folder (root) designated in the httpd.conf file I referenced earlier. Your test.php file should contain the following code:

Save your file, go to your WAMP control panel, and select Restart All Services. Wait just a few seconds for the server to reset (which employs all of the changes we made) and direct your browser to http://localhost/test.php . If your configuration is working properly, you will see a page outlining your PHP configuration, which indicates that both Apache and PHP are working properly (below).

Finally, to test that MySQL is working properly, direct your browser to http://localhost/phpmyadmin (the administrative area for your databases). If you see the page below without errors, you are ready to roll. Note that by default the root password is left blank. If you plan to have your MySQL configuration remotely accessible, you can change and add users in the user table in the mysql database.

So there you have it – This local server configuration will allow you to develop rich applications without the fuss and corruption of constantly FTP-ing files to your hosted server. WAMP simplifies the process of installing and maintaining services for your local testing server. Enjoy!