Web Design Wikiclass | Lecture / Overview of Web Technologies

A Web Design Lecture by Steven Choy

Overview: This lecture gives you an overview of web technologies you need to understand as a Web developer. It also gives you a real-time demonstration of every steps in launching a simple web-based application in a new domain. It also suggests Web developer's toolbox.

Domain Registrar, Name Server, and Web Hosting Machine

Domain Registrar and You

You register an Internet domain with a domain registrar.
You own that domain; you has control over where the domain directs.
Within the domain, you can create email address and sub-domains as many as you like.
The domain registrar keep your (as the owner) contact information.
You need to provide the name servers for the domain. You can change them anytime you like.
You interact with the domain registrar via a web-based system. You need to log in with a username and password.

Name Servers and You

Domain Name Servers are special computers accessible on the Internet that tell where a website is located.
You need to have name servers that store the mapping between your domain and IP address of your web hosting machine.
For example:

    stepwise.hk -> 111.91.237.166
    www.stepwise.hk -> 111.91.237.166

Since you are the owner of the domain, you have the authority to set the IP address of your domain.
If you purchase a DNS service and manage DNS records yourself,
- you need to know how to set up various records for your domain, and
- you interact with the system via a web-based system; You need to log in with a username and password.

Web Hosting Machine and You

A web hosting machine is a computer that
- runs the Web Server program (e.g. Apache),
- runs the database server program (e.g. MySQL server),
- stores various files for a website (e.g. HTML, CSS, JavaScript, images files),
- runs various programs (e.g. PHP scripts) as requested by the web server.
You interact with a web hosting machine with a remote shell and/or FTP program.

Web developer's Toolbox

Web authoring software: Simpe program editors like Notepad++ vs full-featured web development tools like Dreamweaver
Graphics software: GIMP, Photoshop, Fireworks
FTP software: FileZilla
Remote shell: Putty
Web browsers: All popular Web browsers
Browsers' plugins/addons for Web developers

Interaction between a Web browser and a Web server

What does a Web browser send to a Web server?

It sends HTTP request messages.
There are two main types of HTTP request messages: GET and POST
The structure of a HTTP request message using GET method:

The first section is Request line, which includes request method, path, and protocol version.

The second section is called HTTP headers. It contains name-value pairs that carry information about the browser and other request details.

The structure of a HTTP request message using POST method:

The first two sections are the same as a request using GET method.

The third section contains data that the browser intends to send to the Web server (e.g. upload images).

What does a Web browser receive from a Web server?

It receives HTTP response messages from a Web server.
A HTTP response message contains three sections:

The first section is called response line, which includes protocol version and response status code.

The second section is called HTTP headers. It contains name-value pairs that carry information about the response message.

The third section is the content that can be any type of data (e.g. HTML code, CSS code, JavaScript code, image, etc).

Web Servers

Popular Web server software: Apache, Microsoft IIS
It needs to know where to find the files/programs based on the URL it receives
Sample configuration code for Apache to know where to find files for different domains:

      <VirtualHost *:80>
         ServerName stepwise.hk
         ServerAlias www.stepwise.hk
         DocumentRoot /srv/www/stepwisehk/
      </VirtualHost>

      <VirtualHost *:80>
        ServerName findaway.hk
        ServerAlias www.findaway.hk
        DocumentRoot /srv/www/findawayhk/
      </VirtualHost>

Server-side programs/scripts

Many websites have some form of server-side programming.
Common server-side language include: PHP, ASP, Java, CodeFusion, Ruby on Rails, ASP.NET, Perl, Python
Example codes in PHP

This is the .php file in the server-side:

      <html>
      <head>
      <title>test</title>
      </head>
      <body>
      <h1>Today is: <?php echo date("F d, Y");?></h1>
      <p>Thank you!</p>
      </body>
      </html>

This is the resulting code sent by the server to the browser:

      <html>
      <head>
      <title>test</title>
      </head>
      <body>
      <h1>Today is: November 18, 2011</h1>
      <p>Thank you!</p>
      </body>
      </html>

Database Server

Common database include: MySQL, Access, SQL Server, Oracle

Summary and Demonstration

As a demonstration, we create a new domain for a simple web-based application like the following: http://tutorialzine.com/2010/08/ajax-suggest-vote-jquery-php-mysql/

The following are the necessary steps of launching a website.

Get your internet domain

You need to provide name servers for your domain.

Demo: how to modify a name servers

Get your name servers

Demo: how to add a new address record

Get your Web hosting machine

Demo: how to tell the Web server to server a new domain

PUt the files and programs into the Web server machine

Demo: use FTP software to upload files

Open a new database for the website

Demo: use PhpMyAdmin to create a new database

Demo: create tables in a database

Use web browsers to test your website

Thanks for Reading

If you would rather like to have this lecture note in printed format, please click the print action link in the top right corner.

If you find any problem in this lecture note, please feel free to tell Steven via steven [at] findaway.hk.