Organizing Server Resources

Resource Types

A single web sites contains numerous types of resources that are fetched by web browsers and displayed on the screen. These include:

HyperText Markup Language (HTML) files
Cascading Style Sheet (CSS) files
Javascript (client side scripts) files
Image files (jpg, gif, png, svg)

Since a web site can contain hundreds and even thousands of resources, it is important to organize the files on the underlying file system.

Directory Structure

As mentioned in the previous lecture, when a user enters a URL in the search field of a browser, part of the URL string specifies a path to the particular resource that they would like displayed in the browser. Since we’re using an Apache web server and the server stores all of the resources in a hierarchal file system, then the path to a resource (if valid) will contains a list of subdirectories from the domain’s root directory (public_html) separated by slashes followed by an optional file name.

For example, on n0code.net I have the following directory structure:

.../public_html/
.../public_html/work/
.../public_html/work/teaching/
.../public_html/work/teaching/courses
.../public_html/work/teaching/courses/csci240/
.../public_html/work/service/
.../public_html/play/

Note that the ../ that proceeds public_html just indicates that although public_html is the root directory for the domain, it is not necessarily the root directory of the file system.

When designing the directory structure for my website I took into account the content that I wanted to display on my webpage. By organizing the directory structure in this way I allow users to go directly to the content that they are interested in. For example, if a user wants to see the course web page for CSCI-240, they enter the URL http://n0code.net/work/teaching/courses/csci240/ into their browser.

As mentioned earlier, if the path portion of the URL does not include a file name, the web server looks for a file named index.html or index.php. Therefore each subdirectory should have its own index.html file. A subdirectory may contain more than one html file as well. For example the csci240 directory contains a file named index.html as well as a file named student_sites.html which contains links to all of my students’ websites. A browser can load each of these file by specifying the name of the file at the end of the path portion of the URL:

Since we can have any number of html, css, image, and javascript files in a single directory, it is a good idea to organize the files in each directory by file type. For example, in my domain’s root directory I have the following subdirectories:

.../public_html/css/
.../public_html/javascript/
.../public_html/images/

I include in these subdirectories resources that are shared across my website. Notice that I do not create a separate subdirectory for html files like I do for the other types of files.

Creating Directories in WebStorm

To create a sub directory in WebStorm, simply right-click the directory for which you want to create a subdirectory (e.g. /public_html) and choose New -> Directory. Then enter the name of the subdirectory and press OK.

Although the steps above create a new directory on your local file system, they do not alter the file system on your server. To force your server to automatically create the subdirectory right-click on the new directory and press Upload to your-server where your-server is the name of your server.