labs / tiddlers / content / labs / lab04 /

You will need to use the Linux desktop for this lab, so switch to that environment now if you are using your own computer.

There are 3 main ways of creating web sites:

  • Static --- Where all of the web pages are static in that they do not contain any dynamic elements --- all of the information is contained directly within the web pages. You create (or generate) an HTML file for each of your web pages and store them somewhere that the web server can find them. The web server does not need to do any work beyond loading the correct HTML file and sending it to the user's web browser.

  • Server-Side Rendering (SSR) --- Where you are creating a web application that has some pages that contain dynamic elements.

    An example would be a web page for displaying the details for a single product that your online shop sells. If we used a static web site then we would need to create an HTML file for each of the products that we sell. This would be a lot of work and would require a lot of ongoing work to keep the prices and stock quantities up to date and add/remove products as necessary.

    It would make much more sense to create a single web page that pulls the product details from a database. It would have place-holders for the dynamic parts of the page (such as the details for a specific product) that would be replaced by some code that the web server executes in response to a user requesting the page for a particular product.

    Since the code that provides the dynamic parts of the page is executed by the web server (or an application that the web server delegates to) then this method of creating dynamic web pages is called server-side rendering (SSR).

  • Client-Side Rendering (CSR) --- Where the page template, domain data, and dynamic code required to produce a dynamic web page are all sent to the web browser separately. The browser would run the code (which is generally JavaScript) which would merge the domain data with the page template to create the web page that the user sees.

    Since the code that produces the dynamic content is executed on the client-side (the client in this case is the user's web browser) then this method of creating dynamic web pages is called client-side rendering (CSR). This method also goes by the name AJAX --- Asynchronous JavaScript and XML.

SSR is the traditional way of creating dynamic web applications.

In recent years we have seen a large shift away from creating desktop applications in favour of creating equivalent web applications. This means that we are now creating web applications that are a lot more complex that need to serve a lot more users than what has been the case in the past. SSR is not really up to the task of creating these sort of applications (the web server and associated infrastructure becomes a significant bottleneck), so CSR is the way things are done now.

In this lab we will focus on static pages and SSR. Milestone 1 of the course project (which will be released soon) will be SSR, while milestone 2 will be CSR.

We will be creating a simple student management system for the Julienned school. The system should allow users to add the details for a new student and then view the details of all of the students that have been entered.

This lab will assume that you are familiar with lecture 24, so take a quick look at that lecture now if you haven't done so already.