This is a guide to hopefully help in your learning how to program for the web, split into parts. I am going to discuss how the web works, how to make a simple page and understand what is happening when it’s requested. Later, we will learn how to style the page (CSS), how to manipulate the page (using Javascript) and how to do some server-side programming (PHP and MySQL).

I’ll keep it as short as possible

Here is something you will likely hear: the web is a client-server model. “What is a client?”, you may ask. “What is a server?”, you may follow up. Well, they are computers, not much different from the one you are sitting at. You, looking at the page through your browser, are the client; my computer (the server) is running some free software called Apache, allowing me to share this content with you.

Buildings have addresses, so do computers. Your computer’s internet address is called an IP (Internet Protocol) address and it uniquely identifies your computer online. It is in the format 123.123.123.123 (where the number 123 could be any number between 0 and 255). With your IP address, I can see if your computer is online (as long as it’s not specially configured to hide) using a program called ping. If you were running Apache, like I am, I could see files that you were serving using your IP address. Google’s IP address is 74.125.67.100, try going to http://74.125.67.100. That is exactly the same as going to http://google.com, because that is one of their server’s IP address. Domain names (like google.com, whitehouse.gov or unitedway.org) are a system setup to simplify the requests that clients have to make. It would be a pain to try and remember 74.125.67.100, rather than google.com; I think of it like saying: “we’re located right next to the huge statue you can see from miles away” rather than 241123 West 53rd Street or 63.23211 latitude by -71.343219 longitude. There are several (but not quite as many as you would think) DNS (Domain Name Servers) Servers. By the way, I realize DNS Server is redundant. Regardless, these servers purpose is to map your requests to domain names to the corresponding IP address, kind of like phone operators did in the days of yore. You say “google.com”, it says “74.125.67.100″. Have I made that abundantly clear?

Requesting files

When the server receives a request, it looks for the requested file and transmits the content of that file to your computer. Many requests are implied; for instance, http://www.google.com/ is not a file, it is just an address. The file you are actually viewing is http://www.google.com/index.html (or http://74.125.67.100/index.html). There is nothing magical about this. It’s important to realize that this is really not much different than looking at “My Documents\synergy.docx”, it is just a regular old file that is in a folder. Regarding index.html: server software, like Apache, is setup to show specific files if none are requested, if a non-existent file is requested or if a file you are not authorized to view is requested. There is no doubt that you have been served a 404 (resource not found) page before, and maybe even a 403 (access denied), let’s not forget the dreaded 500 (internal server error).

The HTTP Protocol

HTTP (Hyper Text Transfer Protocol) is the protocol that web browsers and web servers use to communicate with each other over the Internet. It is used by web browsers and web servers to talk to one another. Clients (web browsers) send requests to web servers for web elements such as web pages and images. After the request is processed by a server, the connection between client and server across the Internet is disconnected. A new connection must be made for each request. Most protocols are connection oriented, meaning that the two computers communicating with each other keep the connection open over the Internet.

Summary of a Request

When you type a URL into a web browser, this is what happens:

1. Type a URL in (domain or IP address), domain names get checked against DNS
2. The web browser connects to the server and sends an HTTP request for a file.
3. The server receives the request and checks for the requested page. If the page exists, the server sends it. If the server cannot find the requested page, it will send an HTTP 404 error message.
4. The web browser receives the page back and the connection is closed.
5. The browser then parses through the page and looks for other page elements it needs to complete the web page. These usually include images, javascript files, css files, flash, etc.
6. For each element needed, the browser makes additional connections and HTTP requests to the server for each element.
7. When the browser has finished loading all images, flash, etc. the page will be completely loaded in the browser window.

The web browser then renders HTML markup into fancy looking webpages (like this one). In summary, a lot of things are going on behind the scenes of the web; though it seems quite complex, it is really quite simple to understand. We will cover HTML in our next article.

Thanks for reading!

var input_count = 0;

$(document).ready(function(){
	$.each($('input'), function(index, value){
		input_count++;
	});
	console.log("Number of inputs:  %i",  input_count);//use Firebug, not alert() !
});

Iterating Over Text Inputs

There is a problem with the above code, any input elements (including buttons) are going to be iterated over, so let’s use a more specific selector to only retrieve input elements of type “text”

...

$.each($('input[type="text"]'), function(index, value){

...

Required Elements

Okay, now we can iterate over our text inputs. So, where to go from here? Do we check that each item has a value? What if some items aren’t required? The easiest way I’ve found to do this is to use a class on required items (I usually call it “required” (creative, huh?)).

...
<form action="" method="POST" id="login_form">
	<dl>
	  <dt>
		<dd>Username <span class="req">*</span></dd>
		<dd><input type="text" name="username" class="required" maxlength="7" /></dd>
		<dd>Password <span class="req">*</span></dd>
		<dd><input type="text" name="password" class="required" maxlength="7" /></dd>
		<dd>Favorite Color<dd>
		<dd><input type="text" name="username" /></dd>
		<dd>Finish</dd>
		<dd><input type="submit" name="submit" /></dd>
	  </dt>
	</dl>
</form>
...

Now we can check which fields are required and cancel form submission if they are empty. Getting rid of our input counter variable, here is the new code

$(document).ready(function(){
	$('#login_form').submit(function(){//add an onsubmit event handler to our form
		var blank_fields = false;//initialize a generic error detector
		$.each($('input[type="text"]'), function(index, value){
			var t = $(this);//limit the number of new jQuery objects created
			if(t.hasClass('required')){//we know it is required
				if(t.val() == "" || t.val() === undefined){
					console.error('%s can not be blank', t.attr('name'));
					blank_fields = true;
				}
			}
		});
		return !blank_fields;//if there are no blank fields, submit
	});
});

That is a mouthful, but it is actually quite simple. When our form is submitted, we iterate over each input item to see if it is required. If it’s required, check to see if it is empty, if it is empty, return false (cancelling form submission).

Now, there are a couple errors with the code above. For one, it is checking all form inputs (not just the one in our form), so if we had multiple forms on the page, both with required elements, this would fail. Also, being able to check more specific criteria would be nice. We will limit our iteration to input items that are of type text and are descendants of the target form. Let’s also add a maxlength attribute to a form field to ensure that it is within the set character length:

$(document).ready(function(){
	$('#login_form').submit(function(){
		var blank_fields = false;
		var length_error = false;//check for length errors
		$.each($('#login_form input[type="text"]'), function(index, value){//limit input elements to those within the form
			var t = $(this);
			if(t.hasClass('required')){
				if(t.val() == "" || t.val() === undefined){//check if it's empty
					console.error('%s can not be blank', t.attr('name'));
					blank_fields = true;
				}
				if(t.attr('maxlength') !== undefined){//if maxlength attribute is present in the current element
					if(t.val().length > t.attr('maxlength')){//check string length against given maxlength
						console.error('%s is too long: %i chars', t.attr('name'), t.val().length);
						length_error = true;
					}
				}
			}
		});
		return !(blank_fields || length_error);//if there are no blank fields and no length errors, submit
	});
});

Okay, now we are getting somewhere. This could be used as is, but it doesn’t provide very friendly error messages (they have to have Firebug installed to know what the errors are). Let’s wrap up our code so far into a jQuery function and provide some more useful errors. I’ve commented changes to the code, but it is mostly the same.

$.fn.validate = function(options){
	/*
	* Define the default error message tag and styling, allow this to be overridden
	*/
	var defaults = {
		 formTag: 'div',
		 color: '#8A1F11',
		 border: '2px solid #FBC2C4',
		 errorBG: '#FBE3E4 0 0',
		 marginBottom:'1em',
		 padding:'0.8em',
		 width: $(this).width()
	 };
	var o = $.extend(defaults, options);

	/*
	* Private method creates error element
	*/
	function genError(msg){
		var err = $(document.createElement(o.formTag));//create an error element
		err.css('border', 		 o.border)
		   .css('background', 	 o.errorBG)
		   .css('margin-bottom', o.marginBottom)
		   .css('padding', 		 o.padding)
		   .css('color', 		 o.color)
		   .css('width', 		 o.width);//Apply css style rules to the error
		err.html(msg);//insert the error message into the element
		return err;
	}

	/*
	* Our slightly modified form validation
	*/
	$(this).submit(function(){//now uses $(this) reference as the method is applied to the form selector
		var blank_fields = false;//initialize a generic error detector
		var length_error = false;
		//now we use $(this).find('input[type="text"]') to locate our forms child elements
		$.each($(this).find('input[type="text"]'), function(index, value){
			var t = $(this);
			if(t.hasClass('required')){
				if(t.val() == "" || t.val() === undefined){
					//instead of logging error, create a new element and append it to the input elements parent
					errormsg = genError(t.attr('name') + ' can not be blank')
					t.parent().append(errormsg);
					blank_fields = true;
				}
				if(t.attr('maxlength') !== undefined){
					if(t.val().length > t.attr('maxlength')){
						//same as above but more concise
						t.parent().append(genError(t.attr('name') + ' is too long'));
						length_error = true;
					}
				}
			}
		});
		return !(blank_fields || length_error);
	});
}

Usage:

$(document).ready(function(){
	$('#login_form').validate({color:'#000'});
});