Home » Internet » Web Design

Deciphering Website Design - WebProgramming, Databases & AJAX

Aug 17, 2007
Unlike Javascript, web programming languages are full fledged programming languages. They are also known as server-side programming languages because a server translates the code and then returns the necessary information back to the browser in HTML format. So if you ever see webpages ending in .php or .cfm or .aspx in your address bar then that page was created using a web programming language.

How does a web programming language work though?
Well we first talked about HTML, which is just static data - meaning that the information on the webpage doesn't change unless someone manually changes it. With a web programming though every time a web programming language loads it can bring back new information directly from say a database. Let's say you're a web programmer and you want to display dynamic information on the webpage by bringing something from the database, maybe the most recent member that joined your website. Let's assume you have a small database, we'll talk more about database in the next section, and it stores the name and email addresses of the members that have signed up to your newsletter.

A web programmer will start with a webpage similar to a normal html/xhtml webpage. They'll then add code on the page using the programming language and change the name of file to something like NewMembersName.cfm instead of NewMembersName.html. They'll then upload the file to their website host, just like you would upload a normal html file. But in this case it will work a bit differently. Normally when an HTML file is requested the server just sends all the information to your browser and your browser displays it for you, that's why HTML is static. In the case of a web programming language, the process works a little differently.

If you request example.com/newmembersname.cfm then the server will first parse through the code on that page, and then once it's found the newest member from the database it will display that information where the programmer originally wanted it placed on the webpage.

Then once it's finished the webpage is sent back to your browser. And since the information that it sends to your browser is only the pure html you're browser can easily display it correctly. This is why it's called Server Side Programming because it doesn't matter whether your browser supports Coldfusion MX, PHP or other languages because it's the server's job to decipher that programming language and turn it into HTML that you're browser can easily understand.

If you tried to upload a newmembersname.php file to a server that didn't support that programming language then the server wouldn't know what to do with that file and it would just allow you to download the file normally, along with the code that the programmer used. But since the server, atleast in this scenario, does support Coldfusion MX it wouldn't display any of that code to you, only the parsed HTML.

When I first saw a dynamic page I used to wonder what makes this page so special, the code looks just like HTML. Well that's because it is HTML it's just that the server had already translated the web programming language that was part of the .cfm page and turned it into HTML that you're browser can easily understand.

Viola, and that is how a Web Programming / Server Side languages work. You'll find commonly used web programming such as PHP, ColdFusion MX, and ASP.NET. Php is free and open source and you can usually see it in action for files ending with .php extensions. Coldfusion was originally developed by Allaire which was then acquired by Macromedia, which is now part of Adobe Systems. Yes the same company that created Adobe Photoshop and the PDF file format. ASP.Net is part of the Microsoft .NET framework. I'm a big fan of Coldfusion MX, so you'll have to believe me when I say ColdFusion MX is the best in this galaxy, unless you think I might be a bit biased. Oh well.

Allright you've gotten this far, might as well read up on how databases fit into the whole schema of things. Actually the concept of database is fairly easy to understand. It's used to store information. I mean just think about it, without a database how would Hotmail verify you're password, how would MySpace remember the comments that you left on your friend's myspace page which you wish you hadn't when you were drunk.. Moving on. That's because it was stored on a database. There are several different databases. You've proabably heard of Microsoft SQL Server, Oracle, MySQL which is opensource and free database, and also Microsoft Access.

To speed things along let's just assume that you've created a database and also a few tables to store information in. One of the tables is to store email addresses for your visitor, maybe another one for your blog, and maybe another one for your members area account information.

How would you communicate with the database though? Good news, there is a standard language in place that is used to communicate with databases. It's known as SQL Query Language, not to be confused with SQL Server. SQL, Structured Query Language, is not a programming language, it's a computer language that's used by almost all major databases which allows you to write queries that can be run to access and manage the data stored on your database. You can write a query that brings back the newest record for the newest member. The database will execute the query and bring back that information for you.

What if you have specific information that you want to search for, like a book on Amazon.com. Your web programming language will take the information which you entered into the search box on the webpage and then once you click go it will take what you entered and combine it with the SQL query and send it off to the database to let the database try and find that book. Once the database finds the book it brings that back and the web programming language will display it accordingly.

You can also use SQL for searching for information, adding new information, updating information, deleting information and other advanced queries. I say advanced because if you want to store tons and tons of data and manage it correctly then you'll need to work with a RDBMS, a Relational Database Management System.

Why RDBMS? Well let's say you went to Amazon.com and you bought a book. The Amazon database creates a record and then remembers that you bought this book. But what if you decided to buy 2 or 5 books, would it make 5 additional accounts with your names and address along for each of the 5 different books that you bought. NO.

Relational Databases are used in such cases to decrease redundancy ie: get rid of repetitive information. An RDBMS database is designed so that the tables are tied, related, to each other and they know how to manage information correctly.

In this case they'll have a table for your account and another table which keeps a track of all Amazon products. Now in realtiy I'm sure Amazon has more then just two tables infact an RDBMS system can often take up dozens and dozens of tables to help increase efficiency, and help reduce redundant information.

There you have it. Now you know how the website development technologies work and how they all fit in together. For more about Website Development visit a resource that is number one of my list of bookmarks: w3schools.com. Here are some links that you might also like:
Wikipedia CSS - en.wikipedia.org/wiki/Cascading_Style_Sheets

So what's next. If you're interested in furthering your skills then I would suggest learning more about AJAX. Ajax is not a language. It's actually a methodology which combines several technologies that are already available and combines them in such a way that it makes AJAX websites appear dynamic, almost like the software installed on your computer. In normal web page you would type in the name of a book. Once you press enter, the webpage forwards that information which is sent to server-side programming language which then adds it to an SQL query to search the database for that book. Once you're on the next page that information is displayed on that page.

BUT with AJAX once you press enter the AJAX takes over. The DHTML detects your click, calls on the javascript, which uses DOM - Document object model to access the information you entered. The Javascript then sends that information to a web programming page. The webprogramming language, which ever one you decide to use, checks to see if that books is available in the database. If the book is there then that information is sent back to the browser. The Javascript, using XMLHttp, detects that the information has arrived and then uses DOM to show the information back onto the webpage without the webpage ever refreshing. The effect are pretty amazing.

I'm sure as the web evolves we'll see more and more amazing technologies. If you're interested in keeping up-to-date with these technologies then I would recommend subscribing to some of top newsletters in the industry - CNet, ZDNet, SitePoint, and Lockergnome.

About the Author
Sam runs http://www.WebsiteDesignHouston.net, a Houston based Website Development firm which helps entrepreneurs and businesses establish their online presence. For more information visit http://www.WebsiteDesignHouston.net or if you're interested in seeing Ajax In Action click here.
Please Rate:
(Average: Not rated)
Views: 490
Print Email Share
Article Categories