How The Internet Works

Technology Diagram
SERVER SENDS THE RESULTS OF THE PHP/ASP CODE BACK
<—–
RESULT IS SENT BACK TO PHP/ASP CODE FOR PROCESSING

<—–

CLIENT: BROWSER WEB SERVER DATABASE SERVER
—->

BROWSER SAYS: GIMME ______ PAGE AND THE USER FILLED IN ______ FORM ELEMENTS

—->

PHP/ASP CODE SENDS QUERIES THE DATABASE SERVER TO LOOKUP USER ACCOUNTS OR STORE INFORMATION

WEB SERVER INTERPRETS OUTPUT WEB SERVERS: APACHE IS THE MOST COMMON ONE FOR LINUX AND INTERNET INFORMATION SERVER FOR WINDOWS
HTML/CSS/JAVASCRIPT

FLASH

JAVA APPLETS

PHP/ASP CODE MAY BE EXECUTED HERE, OTHERWISE FILES MAY SQL IS USED TO COMMUNICATE BETWEEN PHP/ASP AND MYSQL/SSQL MYSQL/MSSQL – DATABASE SERVERS

Above, one can see that the browser sends requests to the server. The server then either returns the request immediately or, if it is PHP/ASP or other “server side” languages, reads and “parses” the “code.” The PHP/ASP code may connect to a database server such as MSSQL or MySQL and send a request using SQL. The server then sends back a response. When the PHP/ASP is done, it sends back HTML/CSS/Javascript code (generally). The browser receives it and displays it for the user. Below are a list of key vocabulary terms.


Client-Side Languages
Client side languages are executes on the clients’ browser. This means HTML, CSS, and Javascript, generally, though Flash and Java applets are also executed on the client. Below is an explanation of each.

HTML

HTML, Hyper-text markup language, was given its name because it allowed for people to “link up” different “pages.” It is a “markup” language because it “marks up” things. In other words, it describes information; generally, it describes how information is organized on the computer screen. HTML is the foundation of describing how we contents is to be displayed and interpreted on a webpage.

XML
XML, Extensible Markup Language, is a “general” language that is similar to HTML but can describe any type of information (not just HTML). It can be a pain to work with, but it is MUCH easier than proprietary file formats like, say, Microsoft Office! When sending data between different programming languages (say, PHP and ASP and Javascript), XML is a great way to do this.

XHTML
HTML was not “uniform.” Each browser interpreted things differently. The solution was SUPPOSED to be XHTML. By using XML and CSS to describe HTML, the theory was that all browsers could talk the same language and display things identically. The reality? It was a huge pain in the butt… Internet Explorer, the most common web browser, failed to do XHTML right. XHTML failed, but generally speaking you should try and have things done according to “XHTML” standards, but NOT AT THE EXPENSE OF COMPLETING WITHIN BUDGET.

CSS

CSS, cascading stylesheets, is an “add-on” to HTML. HTML does not allow you to specify “specifics” very well. For example, if I want to set the colors of the scrollbar in a web browser, there exists no way to do this in HTML. CSS, however, has allowed this to be done. Additionally, I can make a change throughout the entire document with CSS, such as making all table borders disappear by default.

Javascript

HTML didn’t allow things to move. The solution? Well, one of the solutions was javascript. Javascript can “change” html after the page loads. For example, in a dropdown menu, javascript can be set to be run when someone moves their mouse over an element, it shows the menu. When they click on a menu item, it goes to another page. It can do things like verify that fields have decent information, popup new windows, or popup “are you sure you want to?” prompts. Ask your programmers… they’ll explain what it does. Keep in mind that Javascript is run on the client, not the server, so you STILL MUST VERIFY THAT ALL DATA ENTERED IS CLEAN using a server-side language. For example, I once had a client who had a Captcha system (one of those “type in the word from the image below” things) written in javascript… was useless when spammers wrote programs that would automatically spider through pages, find web forms, and post junk data. The spiders don’t execute javascript code, thus the Captcha was ABSOLUTELY USELESS. We got a few hundred to fix that 😀

Java

Java was invented as compiled-interpreted language. What this means, in short, is that java code will run on any operating system that has Java installed: Windows, Linux, or even Mac. Java, however, takes a long time to load, is EXTREMELY time consuming to program, and requires a very high level of expertise to know how to use (compared to PHP/HTML, for example). Flash has replaced Java on websites, though Java does creep up for uploading large files, though you can often times find pre-made java tools that you can have a programmer sort of “plugin” to the site. For video sites, build on top of something that is already out there such as clipshare that ALREADY HAS THIS BUILT FOR YOU. Java is also used occassionally on the server end in a technology called JSP (Java server pages) much as PHP would be used, but it failed… not many people use it anymore.

Flash

Have you ever seen the Lion King? That was done in Adobe Flash. Flash has, in the past few years, become more powerful than Java in many respects (when it relates to web pages, at least). It is highly media intensive and supports communications with web servers directly (bypassing the browser). Whenever you have a site that needs a lot of “movement”, flash will be involved. Contact your team member who is a flash expert for advice on this. Oftentimes, you can use a CMS but just modify the template so that a flash item is put at the top of the page in the place of, say, a large image banner.


Web Server Programs
Web Servers are computer programs. They sit and wait for incoming requests from a client. When a client connects, the client sends a request. The request contains what domain it is for, what page it wants, and any “form” information that is needed.

Apache Web Server
Linux Web Servers are very common and Apache Web Server is the most used web server on a Linux system. It is 100% free and can handle millions of requests per second, depending on how powerful your server is, of course. There are other web servers, but this is the most common.

Internet Information Server
Windows web servers are the second most common type of web server. The “Internet Information Server” web server is provided with professional versions of windows and windows server addition. Generally speaking, if you want to run ASP/MSSQL, you will need a windows web host and they most likely will have Internet Information Server.


Server-Side Programming Languages
Most websites use server side programming these days. For example, you login to Facebook. What language do you think does all the processing to decide what to display on the page? What language decides how it is displayed? What language figures out that it needs to query up the database server, look up your login information, and log you in? Server-Side languages do this.

PHP
PHP has been around for awhile. All of the new “upstart” companies have done their work in PHP. Youtube, Myspace, and Facebook, to name a few. Why? Because it is totally free, easy to learn, and has a HUGE COMMUNITY OF DEVELOPERS. Our entire business model is built around this language.

ASP
Perhaps the second most common server-side language today is ASP. ASP, or Active Server Pages, is a language that was created by Microsoft and allows automation. Aside from Microsoft’s own sites, few major “upstart” companies have grown off from this technology. It requires a Microsoft server license on all of your servers and it requires that you use Microsoft technologies for everything, thus tripling your costs across the board.

Others
Just about any programming language has been adapted by someone for server side coding. The most notable are Perl, Ruby, and Java (JSP). I used to do it in C++ when I was a kid and had too much time on my hands (as did Ebay when they first started out, I think). Those listed here are about 98% of the server side scripting.


Database Server
Database servers store information. They allow you to get access to that information fast and to do all kinds of cool searches on it. For example, if I have a list of 100,000 companies in a plain text file and I wrote a php program to search through it, it could take 20 to 30 seconds. If I send that over to mysql running on an optimized server, it could take just about .1 seconds… obviously, much better.

MySQL
This software is a lot like MsSQL, but totally free. PHP, out of box, integrates with MySQL completely. Combined with PhpMyAdmin (and other tools), a programmer can add/remove tables and otherwise manage the database very easily.

MsSQL
This software is a lot like MySQL, but made by Microsoft and rather expensive. It has a few more features than MySQL, but most projects won’t take advantage of those so they don’t matter anyways.


Browser Comparison
Every browser seems to do things differently these days. Below are a description of the major browsers and how they compare

Internet Explorer
Internet Explorer was created by Microsoft therefore it sucks. It is NOT standards compliant and each different version seems to display things different. It, until recently, had not had an “auto-update” feature thus there are lots of people out there still using IE6 and that IE6 does not do CSS right. This means that you can’t rely on all of the CSS features and will need to develop sites with tables instead of just css. Your programmers will know what that means.

Firefox
Firefox is a great, standards-compliant browser. Through its partnership with google, it has become the second most popular browser out there and the #1 choice among programmers. It has a ton of add-ons and mows your lawn while you’re not busy.

Opera/Safari
They both, for the most part, are “standards compliant” meaning they display XHTML how it is supposed to be displayed. If it works in firefox, it will work in these 99% of the time.


CPanel
Finally, CPanel is a tool you will most likely run into in the course of your work. On most reputable Linux servers, you are given a Cpanel account. Through this account, you can manage mysql databases, php settings, files, ftp accounts, mail accounts, etc. You can give the cpanel password to trusted programmers. When you have to terminate someone, change all ftp and cpanel passwords.


FTP
FTP, or File Transfer Protocol, is a method sending files between a client (the programmer) and a server (the web server, generally). My personal favorite FTP client is File-Zilla Client. When a programmer wants to access a server, he generally wants an FTP Account or a CPanel account or both.


Cookies
Cookies are simply a way to store data between page loads. For example, lets say that you login to a site and then you want to remember what user is logged in. Generally, a PHP programmer will have PHP tell the browser to save a cookie with the person’s username/password and/or session information. This way, when they click on a link to go to another page in the site, the browser will send the cookie contents to the web server and the php script can validate the session and know that the user is logged in.


More Reading
There are several topics not covered in this article in any way that are important to learn and become familiar with if you wish to continue your studies:

  1. DNS – How domain names work.
  2. Protocols – What underlying “methods of communication” that the browsers are using (namely, HTTP, HTTPS, and TCP/IP)

  • Share/Bookmark



4 Comments

Seems to be an excellent and personable overview of the technology and process involved in the web. I think it might also be appropriate for you to mention DNS, at least in passing, as this is a vital, but almost unheard of part of the internet’s “plumbing”. Also, it might be appropriate to give brief mention of the low level protocols upon which the web is built, namely TCP/UDP and HTTP, which rests on top of TCP. I doubt much detail would be needed, but I do think these low-level parts of the web would make a small, valuable contribution to this overview.

Those are great points, but in my experience (having trained people in this before), the concept of “layers” to the internet tends not to make sense to many people beginning in the IT field, so I chose to stick to the “topmost” layers as much as possible. Great point, though!

True. Perhaps a link for those who were curious? Also, a small error I just found: I believe Twitter is actually built on the Ruby on Rails framework, not on PHP.

Leave a Reply

Your email address will not be published. Required fields are marked *