N

You have arrived at the web home of Noah Brier. This is mostly an archive of over a decade of blogging and other writing. You can read more about me or get in touch. If you want more recent writing of mine, most of that is at my BrXnd marketing x AI newsletter and Why Is This Interesting?, a daily email for the intellectually omnivorous.

October, 2010

How to Build a Web App (for Non-Programmers)

A non-coder's guide to building web apps and understanding server-side languages like PHP.

Last Friday at a conference called Planningness I tried to do something I've been thinking about for awhile: Teach a bunch of non-coders how to make things on the internet. I'm not positive how successful it was, but it was fun and I figured I might as well share the presentation, code examples and general story here. (Disclaimer: I'm no programmer myself, so there is a definite possibility some of the stuff in here is incorrect. I did check things with a few programmers beforehand, however, so I'm pretty sure that's not the case.)

The story goes something like this (if you've been hanging around this site : A few years ago I heard about how Microsoft was interested in buying Yahoo! for an insane amount of money ($47 billion I believe). I said to myself, "what the hell is $47 billion? How am I even supposed to comprehend that?" And my self answered, "maybe you should build a site that shows you how many iPhones you could buy with that sort of cash." (This is a dramatization of the events.) Anyhow, I had played around with Wordpress setup and had looked at some PHP and so I figured I'd see if I could do it. I bought a domain and started Googling.

The first important thing to understand is that every web app, more or less, is just a form and a submit button. Think about it. Sometimes that button sends an email, or posts a Tweet, but it's still the same basic behavior: You capture some user input and do something with it when they hit a button. (Increasingly you capture it before they hit the button, but that's another lesson).

The first big barrier to understanding how to build this thing was how the hell you actually get something someone types into a form to another page so that you can do something with it. That's when I discovered HTTP GET. That's also when I realized that I already understood how GET works. That's because we are all familiar with it. GET is just a method of passing data between pages by using a URL. Put simple: Every time you call up any page on the web through a browser by typing in a URL you are making a GET call.

But there's also an even simpler way to explain GET: Go to Google and search for something. Seriously. Search for noah brier and then look at the URL. What you'll see will look something like this: http://www.google.com/search?source=ig&hl=en&rlz=&q=noah+brier (there may be some other stuff stuck in there as well). If we pull that apart and just focus on the part that matters we get: search?q=noah+brier. That, there, is the key to passing things between pages using GET. Essentially the elements break down like this:

  • search: The page that is processing the data
  • ?: Start of a query string
  • q=: Field name (basically every form element is given a name so that later, when you're doing stuff with the data, you can easily access it)
  • noah+brier: The query (whatever someone typed into the form field)

Once you understand that basic idea the next big question is how the hell do you get stuff down from the URL? It's sitting up there and you want to do something with it (whether it's a little math like How Much Does it Buy? or an incredibly complex operation like searching billions of search records on Google. To do that you need some sort of server-side language. The one I use in my presentation (and for my projects) is PHP. Every language has some simple syntax for getting at the stuff you've stored in the URL. In PHP's case that syntax looks like this:

Where field_name is replaced with whatever you named the field. So if you made a form like this:

Your PHP to grab the person's name on the page dosomething.php would look like this:

Anyway, I'm just repeating a lot of what's in there. Give it a try yourself. Go download MAMP or WAMP (which allows you to run PHP/MySQL locally) and start playing. I've even put together a little zip file with all the code samples. Have fun.

Oh, and one other important thing: The beauty of the internet is that it's most abundant resource is information on how to build the internet. Use that. When you want to know how to do something just Google it and try whatever code you get. See what happens. Learn that way. It's fun, I swear.

October 7, 2010
©
Noah Brier | Thanks for reading. | Don't fake the funk on a nasty dunk.