Dynamic and interactive web pages

Dynamic and interactive web pages

Learning Outcomes:

• Understand the difference between server-side and client-side technologies.
• Describe the characteristics of client-side scripting.
• Create interactive menus upon user selection.
• Students should be able to create interactive user selection, such as the 2-level interdependent select list, pull down menu and click-to-expand menu.
• Validate and manipulate input data.
• Students should be able to check text data, numeric data, required input, length of input, manipulate radio buttons and check boxes and valid values for all input data. They should also be able to perform simple computations to create quizzes and simple mathematics games.
• Retrieve and save client information.
• For example, the use of Cookies for collection of user information.

Server-side scripting

• Server-side scripting is essentially programs that run on the server. In the context of dynamic web pages, the server receives data from the client and process the data with the programs on the server.
• Example of server-side scripting: PHP
• Example of its use: 
• Validate the password provided by client
• Counter (number of visitors - use server-side scripting or external service provider)
• Features (compared with client-side scripting):
• codes hidden from client (program security)
• increase loading to server (potentially slower server response)

Client-side scripting

• Client-side scripting means the client runs the scripts provided by the server. The browser is responsible for running the scripts.
• Example of client-side scripting: JavaScript
• Example of its use: check whether the inputted data is number
• Features (compared with server-side scripting):
• Codes is visble to client
• Reduced loading to server (the loading is shifted to client)

Further reading:

https://www.ionos.com/digitalguide/websites/web-development/server-side-and-client-side-scripting-the-differences/

Interactive menus – JavaScript required

• 2-level interdependent select list as an example.
• When the first list is selected, the corresponding second list will be shown. The data in the corresponding second list could already by stored in the html document or retrieved from the server, as stated in the html document. This could potentially reduce server loading as only partial list is downloaded from the server.

Retrieve and save client information - cookies

• Cookies is a text file stored on the computer when you visit some websites.
• Examples of its uses:
• Identify users
• Personalize the web site with your preference
• Shopping cart function – save your selected item so that you can pay for all the items once you completed your shopping, or to pay it next time.

Further reading:

https://www.allaboutcookies.org/cookies/

https://www.scientificamerican.com/page/use-of-cookies/