Web Development

Dr Derek Bridge
School of Computer Science & Information Technology
University College Cork

Lecture Objectives

learn the difference between absolute URLs and relative URLs
learn when to use absolute URLs and when to use relative URLs
learn how servers respond to various requests

Absolute URLs

Absolute URLs use absolute pathnames.

But they start at the document root, not the filesystem root.

Relative URLs

Relative URLs use relative pathnames.

They start at the directory that contains the current document.

The browser converts the relative URL into an absolute URL before sending a request to the server.

Web Servers

There are two main Web servers:
Apache
and
Microsoft Internet Information Server (IIS)
(and lots of ones that are more niche).

For concreteness, we'll look at the Apache Web Server.

The Apache Web Server

Apache is modular, and you decide which of its modules to install, e.g.
- mod_mime;
- mod_ssl.
You enable/disable and configure the modules that you have installed by placing directives into configuration files.
The main configuration file is called httpd.conf

`httpd.conf` Example


ServerName www.example.org
        
Listen 80

DocumentRoot "/var/www/html"

The ServerName directive specifies the hostname.
The Listen directive specifies the port that the server is listening on.
DocumentRoot is the directory that hosts all the web resources.

The `DocumentRoot`


ServerName www.example.org
        
Listen 80

DocumentRoot "/var/www/html"

By default, if a browser makes a request, the URL pathname is appended to the DocumentRoot pathname.
E.g. if a browser requests http://www.example.org/fish/guppies.html, the server will serve /var/www/html/fish/guppies.html

Example of Absolute URL

Assume the server's DocumentRoot is /var/www/html.
A browser sends a GET request for the following URL:
http://www.example.org/cats/persian.html
The server sends back /var/www/html/cats/persian.html

Example of Absolute URL

Similarly, if a browser sends a GET request for the following URL:
http://www.example.org/cats/manx.html
The server's response is a 404.

Example of Absolute URL

Similarly, if a browser sends a GET request for the following URL:
http://www.example.org/dogs/poodle.html
The server's response is a 404.

Example of a Relative URL

The browser has just fetched the following web page: http://www.example.org/cats/persian.html

The web page contains a hyperlink:
<a href="siamese.html>Siamese!</a>

The user clicks on this hyperlink.

So the browser sends a new request to http://www.example.org/cats/siamese.html

Example of a Relative URL

Again, the browser has just fetched the following:
http://www.example.org/cats/persian.html

The web page contains a hyperlink:
<a href="../fish/guppies.html>Guppies</a>

The user clicks on this hyperlink.

So the browser sends a new request to http://www.example.org/fish/guppies.html

Absolute and Relative URLs

Advice about how to write hyperlinks in web pages.

	Absolute URL	Relative URL
External link (i.e. on a different server)	scheme + hostname/IP address + absolute pathname	N/A
Internal link (i.e. on the same server)	scheme + hostname/IP address + absolute pathname	relative pathname
Internal link (i.e. on the same server)	absolute pathname	relative pathname

External Link Example

You want a link in siamese.html to the RTE news.

An external link, hence an absolute URL:
scheme + hostname + absolute pathname

<a href="https://www.rte.ie/news/index.html">RTE News</a>

Internal Link Example

You want a link in siamese.html to guppies.html

An internal link, hence three options.

either
<a href="http://www.example.org/fish/guppies.html">Click me</a>
or
<a href="/fish/guppies.html">Click me</a>
(N.B. The forward slash at the start.)
or
<a href="../fish/guppies.html">Click me</a>
(N.B. No forward slash at the start; no scheme, no host.)

Some Other Apache Directives

Some other common directives.

HTTP Response Status Codes

2XX	Success	e.g. 200 OK
3XX	Redirection	e.g. 301 Moved Permanently
4XX	Client error	e.g. 400 Bad Request e.g. 403 Forbidden e.g. 404 Not Found
5XX	Server error	e.g. 500 Internal Server Error

Error Pages

For client and server errors, some web developers like to serve customized error pages.

To do this, use an ErrorDocument directive in httpd.conf


<!DOCTYPE html>
<html>
<head>
    <title>404 error</title>
</head>
<body>
    <p>
        Oops!
    </p>
</body>
</html>


ServerName www.example.org
        
Listen 80

DocumentRoot "/var/www/html"

ErrorDocument 404 /errors/bad_url.html

Requests for Directories

If a browser requests a file, the server serves that file.

But what does a server do if a browser requests a directory?
E.g. http://www.example.org/fish/

It may return an error (usually 404).
It may return a default page, usually from the directory.
It may return a page that lists the contents of the directory.

Index Files

If a browser requests a directory, one option is for the server to return a default page.


ServerName www.example.org
        
Listen 80
        
DocumentRoot "/var/www/html"
        
DirectoryIndex index.html

If this is your httpd.conf, then Apache will serve you a file called index.html from the directory you requested.

Directory Listings

Another option is for the server to return a page that lists the contents of the directory.


ServerName www.example.org
        
Listen 80
        
DocumentRoot "/var/www/html"
        
<Directory />
    Options +Indexes
</Directory>

Here, Apache will serve you a list of the contents of the directory that you requested.

Be wary of setting things up in this way!

Example


ServerName www.example.org
        
Listen 80

DocumentRoot "/var/www/html"

DirectoryIndex index.html

<Directory />
    Options +Indexes
</Directory>

request
`http://www.example.org/`
response
`/var/www/html/index.html`

Example


ServerName www.example.org
        
Listen 80

DocumentRoot "/var/www/html"

DirectoryIndex index.html

<Directory />
    Options +Indexes
</Directory>

request
`http://www.example.org/fish/`
response
a listing of the contents of `fish`

Example


ServerName www.example.org
        
Listen 80

DocumentRoot "/var/www/html"

DirectoryIndex index.html

<Directory />
    Options +Indexes
</Directory>

request
`http://www.example.org/cats/`
response
`/var/www/html/cats/index.html`

Exercise

A filesystem:

The root / has two subdirectories, www and flowers. flowers contains the file rose.html. www contains a file called index.html and three subdirectories. The first of these three is trees, which contains index.html, oak.html and yew.html. The second subdirectory of www is images, which contains oak.png. The final subdirectory is errors, containing error.html.

An `httpd.conf` File


ServerName www.example.org
                
Listen 80
        
DocumentRoot "/www"
        
DirectoryIndex index.html

ErrorDocument 404 /errors/error.html

How Many Files?

How many files are hosted by this web server?

What Gets Served

Give the absolute pathnames of the files that will be served if a client requests the following URLs:

http://www.example.org/images/oak.png
http://www.example.org/trees/
http://www.example.org/
http://www.example.org/flowers/rose.html

Absolute URLs

Assume we are writing URLs for inclusion in /www/trees/oak.html, give the absolute URL for the files called:

yew.html
oak.png
index.html (the one in trees)
index.html (the one in www)

Relative URLs

Assume we are writing URLs for inclusion in /www/trees/oak.html, give the relative URL for the files called:

yew.html
oak.png
index.html (the one in trees)
index.html (the one in www)

Web Development

Lecture Objectives

Absolute URLs

Relative URLs

Web Servers

The Apache Web Server

httpd.conf Example

The DocumentRoot

Example of Absolute URL

Example of Absolute URL

Example of Absolute URL

Example of a Relative URL

Example of a Relative URL

Absolute and Relative URLs

External Link Example

Internal Link Example

Some Other Apache Directives

HTTP Response Status Codes

Error Pages

Requests for Directories

Index Files

Directory Listings

Example

Example

Example

Exercise

An httpd.conf File

How Many Files?

What Gets Served

Absolute URLs

Relative URLs

G'luck!

`httpd.conf` Example

The `DocumentRoot`

An `httpd.conf` File