Nick Brown - Web Dude

EasyUp - Simple File Uploads

c.nicholas.brown@gmail.com (Nick Brown) — Sat, 09 Jan 2010 11:00:00 PST

If you're working with PHP (or any server side language), you've probably constructed a script to upload files at some point or another, especially if you are constantly developing tools to assist people with no knowledge of code or basic FTP to manage files. You also might be searching for a way to accomplish this for the first time. In either case, let's see if we can't make your job easier.

There are no lack of PHP uploader classes out there, so let's not pretend this is groundbreaking. The problem is a lot of those classes are extremely bloated and difficult to either learn the basics from or adapt to your program's specific needs.

File handling is also one of the best places to implement some simple OOP to make this oft-used functionality reusable. If your eyes darted nervously and your cursor went for that back button as soon as you read OOP, fear not, you can easily find all of the tools to build a procedural file uploader here.

Cut to the Chase

Our class, affectionately called easyUp until someone inevitably informs me the name is already in use, is a pared down, easy to read, and easy to implement class:

class fileDir {
  private $fileInfo;
  private $fileLocation;
  private $error;
  private $direct;
  
  function __construct($dir){
	  $this->direct = $_SERVER['DOCUMENT_ROOT'].$dir;
	  if(!is_dir($this->direct)){
		  die('Supplied directory is not valid: '.$this->direct);	
	  }
  }
  function upload($theFile){
	  $this->fileInfo = $theFile;
	  $this->fileLocation = $this->direct . $this->fileInfo['name'];
	   if(!file_exists($this->fileLocation)){
		if(move_uploaded_file($this->fileInfo['tmp_name'], $this->fileLocation)){
			return 'File was successfully uploaded';
		} else {
			return 'File could not be uploaded';
			$this->error = "Error: File could not be uploaded.\n";
			$this->error .= 'Here is some more debugging info:';
			$this->error .= print_r($_FILES);	
		}
	  } else {
		  return 'File by this name already exists';	
	  }
  }
  function overwrite($theFile){
	  $this->fileInfo = $theFile;
	  $this->fileLocation = $this->direct . $this->fileInfo['name'];
	  if(file_exists($this->fileLocation)){
		  $this->delete($this->fileInfo['name']);
	  }
	  return $this->upload($this->fileInfo);
  }
  function location(){
	  return $this->fileLocation;	
  }
  function fileName(){
	  return $this->fileInfo['name'];
  }
  function delete($fileName){
	  $this->fileLocation = $this->direct.$fileName;
	  if(is_file($this->fileLocation)){
		unlink($this->fileLocation);
		return 'Your file was successfully deleted';
	  } else {
		return 'No such file exists: '.$this->fileLocation;	
	  }
  }
  function reportError(){
	  return $this->error;	
  }
}

For some the class may be self-explanatory, but no worries if not. Before we can create file manipulation magic, we need some HTML.

The HTML

Nothing unusual here. A form that submits to the same page with a single browse for file input and a submit button. In addition to the HTML file, we're going to need a folder on the server to house our files. Here, we'll be using a directory called myUploads.

The Implementation

if(isset($_POST['mySubmit'])){
  include 'easyUp.php';
  $up = new fileDir('/myUploads/');
	
  $up->upload($_FILES['myFile']);
}

First we set up an if statement to see if our form was submitted, and then set include our neatly packaged class inside the if statement. After that we create a new object and set it to a variable name. This can be whatever you'd like, but we're going to go with $up this time. When the object is created, we're going to let it know which directory we're working with. The path is always taken from the root directory, so for our myUploads folder, we simply pass in /myUploads/. You can also get more organized with a subfolder such as /myUploads/images/.

Next we just need to call the upload() method, and direct it to the name of our file in the $_FILES array. In this case: $_FILES['myFile']. You may repeat this step for as many files as you'd like, simply changing the file name:

$up->upload($_FILES['myFile2']);

That's it. Fire it up and start uploading files to your server.

Deleting a file is just as easy.

include 'easyUp.php';
$up = new fileDir('/myUploads/');
	
$up->delete('myPic.jpg');

This will delete a jpeg named myPic.jpg from the /myUploads/ directory. Keep in mind that you will receive an error if you try to upload a file where one already exists with the same name. In this situation, use the overwrite() method instead of upload() to replace the old one.

Finally, location() and fileName() retrieve information about the last file uploaded.

if(isset($_POST['mySubmit'])){
  include 'easyUp.php';
  $up = new fileDir('/myUploads/');
	
  $up->upload($_FILES['myFile']);

  echo $up->location();
  // outputs: yourServersAbsolutePath/myUploads/
  
  echo $up->fileName();
  // outputs: myPic.jpg if our last uploaded file was named myPic.jpg.
}

That's all for now. Upload to your heart's content or use this as a base model for tweaking your own upload class. If you do find something useful to add, leave me a comment.

Easy jQuery Form Values

c.nicholas.brown@gmail.com (Nick Brown) — Thu, 03 Dec 2009 11:00:00 PST

Been hectic as hell around here, but I still need to make time to post new content. There are always ways to improve and refactor your code, and this should help. You've probably seen some pretty bloated and static ways to grab form values for use in Ajax, and if you're still grabbing each value individually, it's time to step it up.

Edit: Received some valuable criticism from a reader (Mike T.) and altered my post accordingly. Thanks for the comments!

You've seen values retrieved using something similar to:

var name = $('#myForm input[name="userName"]').val();
var website = $('#myForm input[name="website"]').val();
var comment = $('#myForm textarea[name="comment"]').val();

This is almost acceptable if you're only grabbing one or two values, but beyond that it's cumbersome and sloppy. It only gets worse if you're assigning arbitrary id's to each input.

Instead, use the .serialize() function to grab all of your values any time you want to retrieve form information for an Ajax call. This function will take all of your input names and values and format them for the server. Keep in mind for elements such as radios and checkboxes that serialize will grab only the :selected and or :checked items.

The HTML

<!DOCTYPE html>
<html>
<head>
	<title>Grabbing Form Values</title>
</head>
<body>

<form id="myForm">
    <input type="text" name="firstName" />
    <br />
    <input type="text" name="lastName" />
    <br />
    <input type="radio" name="receiveEmail" value="yes" />  
    <input type="radio" name="receiveEmail" value="no" />
    <br />
    <textarea name="comments"></textarea>
    <br />
    <input type="submit" value="Submit" />
</form>

</body>
</html>

Now we can use the function to retrieve our form info and send it off.

The Usage

function sendForm(){ // Your Ajax function for sending info
  var formInfo = $('#myForm').serialize(); // Grab form values
  $.post('_myPHP.php', // Use .post() for your Ajax call
        formInfo,
        function(data){
          // Do something on successful return
        }
  ); 
}

Obviously there is a lot more you can do here such as validating your info or attaching the function directly to a .submit() call, but this should get the ball rolling in the right direction.

Love it? Hate it? Leave a comment.

Quit Being a Nightmare Client

c.nicholas.brown@gmail.com (Nick Brown) — Thu, 15 Oct 2009 12:00:00 PDT

Alright clients, I'm calling you out. No not all of you, just most of you.

With the recent scarcity of money and jobs in many industries worldwide The economy blows and many of you in charge of teams or projects are switching to contract / freelance workers to complete those projects. Or you may just be contracting people as a way to test them out before you offer them a full-time position.

Either way, I'm here to prepare you.

Many of you have never worked with a freelancer before and it shows. This causes frustration for both you and the freelancers, and while it can be avoided with some communication, the business world moves quickly and there is rarely time for proper dialogue. Going in educated benefits everyone. The web is my business, so while all of these points apply to the web, most can be applied to any freelance work.

What you can expect

Pay a higher rate - you are not paying for medical insurance, retirement funds, social security, sick days, vacation days, or facilities for them to work in. Expect to spend some of that money.

Sign a contract - these protect freelancers and clients. I'm not saying you're a bad person, freelancers just want to prevent getting intentionally (or otherwise) screwed. If you see a clause in a contract you find ridiculous, ask. Chances are there is a very real world (and very unfortunate) example of why it exists.

Answer some questions - I always start clients off with a questionnaire, even if I'm going to repeat them in our first meeting. Answer the questions. They allow everyone to identify goals and create a plan for getting there and you may find that some concepts take shape more easily on paper.

Ask some questions - If you need answers, ask. I never mind answering client questions because they generally prevent future misunderstandings. Assumptions are one thing when you have a solid understanding of what's going on. They are quite another when you are in unfamiliar territory.

Do some homework - I'll be honest, this one is personal. There's a difference between hiring someone to create a physical book for you and write a story for you. Websites are closer to creating a book than writing it, and most freelancers will require most if not all of your content (text, images, video) to be provided up front. You may think, "well that's stupid, I'm paying them, why does it matter if they have my content or not." The answer is because hounding you for your content is about as much fun as being hounded.

Bottom Line

Freelancers aren't perfect either, but knowing these facts ahead of time can get you past a lot of basic problems.

Most freelancers are happy to reduce rates for return customers who were easy to work with the first time around, so if you're saying "I don't care about making friends, it's business," keep the dollar signs in mind.

Steam: Rags to Riches

c.nicholas.brown@gmail.com (Nick Brown) — Sat, 15 Aug 2009 12:00:00 PDT

I find it's almost unheard of nowadays for a digital product to overcome a poor launch. There's a number of reasons for this, not the least of which is bad word-of-mouth mixed with the incredible rate at which said information travels. The product is crushed before it has time to right itself. Maybe it's a good thing: survival of the fittest, etc, but I'd like to see some underdogs come out on top occasionally. And the one product I've seen do just that is Valve's Steam client.

Steam is a combination of

messaging service
community forums
online store
content delivery system
and game management client

There are also controversial elements of DRM here but that's not the focus, so I'm willing to overlook it.

Failure to Launch

Steam came on the scene in 2003 and most people, myself included, thought it was a cumbersome piece of crap. It wasn't the first product of its kind and it didn't even outperform it's peers when it released. I was annoyed at requiring a persistent internet connection to enjoy my content as well as the ridiculous advertisements that appeared constantly.

Present day Steam is top of its class and a pleasure to use. Some of the basic services like the messaging system and community features are nothing revolutionary, but they work well. It's the online store and the content delivery system that make Steam shine.

Having worked in advertising I find myself painfully aware of being sold something. On the rare occasions that I do get an advertisement from Steam I more often than not end up purchasing the product. Their sales usually allow you to play a game free over the weekend and buy it on Monday for 40%-75% off. Most of these are older games that I would have forgotten about or indie games that don't get much media coverage. I usually find myself half-heartedly annoyed that Valve is so good at selling games, even if it isn't theirs.

The Digital Age

Steam also allows you to access digital copies of the game at any time. For those that insist on hard-copies, this is often a deal-breaker, and while physical copies have their advantages, I enjoy being able to buy a new computer and queue game downloads and installations. Because few things suck more than sitting at the computer, watching endless progress bars and 'Insert Next CD' popups.

I'm thrilled that diligently revamping digital products still pays off and I hope other companies can emulate this. Between offering hefty discounts and providing a more viable outlet for indie game developers, Steam has kept me and many others coming back for more.

jQuery Modal Window

c.nicholas.brown@gmail.com (Nick Brown) — Sat, 14 Mar 2009 12:00:00 PDT

I've been using the Prototype JavaScript library for a while now, but in the interest of learning something new I decided to explore jQuery as well. I went through some fantastic jQuery tutorials available at ThemeForest.net as well as some traditional reading, but I didn't have a large project to really put the library to the test.

Until I started working on this website that is. I will spare you the obligatory pros & cons of two JavaScript libraries post and will just say that both have their uses, but that's not what this is about.

While working on the new website I decided to use a script I had previously worked with for creating a modal window used to contain my contact form. The problem was that the script I had used previously was written for the Prototype library and I was too far invested in jQuery in this project to turn around just for this one script. I looked around for a compatible version of the modal window but without any luck. Finally I decided to look into modifying it to run off the jQuery library.

The original script was a modified version of the very popular Lightbox JS by Lokesh Dhakar. My version simply converts it for use with jQuery.

If you're interested in using this script I would recommend following the steps for the original and simply swapping in my JavaScript file. I'm tempted to write my own tutorial for the entire process of setting up the modal window but at the moment other projects take precedence.

Resources:

CMS Implementation

c.nicholas.brown@gmail.com (Nick Brown) — Wed, 11 Mar 2009 12:00:00 PDT

Mmmmm. Tastes like content management. Since the site launched I've been tweaking various sections that I thought needed some extra attention. One of these areas was the CMS, which was functional but ugly. There wasn't a lot of motivation in the beginning to make my own CMS look terribly attractive. Sure I'll invest the time if the project is for a client, but what do I care if I'm looking at generic form fields on a white background?

I'm hoping having a fully developed system backing the site will help keep me motivated to update it with new content. And for some added encouragement I'm integrating the Google Analytics API, because nothing helps motivate like pie charts!

All in all I'm really happy with the way it's coming together and I look forward to being able to implement features to help maintain the site. It's really nice to be designing a CMS to fit just my own needs for once instead of clients or co-workers.

Website Launch!

c.nicholas.brown@gmail.com (Nick Brown) — Mon, 09 Mar 2009 12:00:00 PDT

My website was a miserable pile of yuck. Alright well that's not entirely true, it was just mostly a pile of yuck. Essentially when I created the first version of this site I received feedback from a wide spectrum of professionals who encouraged me to create the e-quivalent of a generic printed resume. The site itself was well done, but it was bland and didn't show off any personality, which made me hate it a little more every time I looked at it.

I've had a lot of people tell me over the past few months what an online portfolio or any website that shows off your work should and shouldn't be. No - it should be what I want it to be. End of story. All that being said, I'm launching version two which I'm already much happier with. I'm thrilled to finally get to show some personality here.

For interested parties: the website was written using the jQuery library with a PHP backing. I considered implementing WordPress for a while, but then decided I wanted to replicate (and improve upon) the WP experience using my own code. As of right now I'm just cleaning up the design of the content management system. I normally don't spend a lot of time making CMS's attractive, but I'm hoping it will help motivate me to update the site. In addition I've implemented a couple API's that I've been experimenting with over the previous weeks and am enjoying immensely.

I'm hoping to keep myself on a schedule for writing new posts, but looking at my projects for the next month it looks bleak at the moment. I'm considering writing about a recent script conversion I did for the site, but we'll see how that turns out.