1. Copyright 2004 Monash University IMS5401 Web-based Systems Development Topic 2: Elements of the Web (g) Interactivity

2. Copyright 2004 Monash University 2 Agenda 1. ‘Normal’ user-program interactivity 2. Web-interactivity 3. Client-side interactivity 4. Server-side interactivity 5. Making interactivity easier 6. Implications for web developers

3. Copyright 2004 Monash University 3 Elements of the Web THE WEB Connecting computers Digital representation of documents Display and organisation of documents Linking documents

4. Copyright 2004 Monash University 4 1. ‘Normal’ computer system interactivity We are used to computer systems which are designed to receive input from us as users and provide output as required Eg automatic teller machine, reservation system, etc System has a programmed interface which changes in response to our input, and which allows us to enter queries or data for storage

5. Copyright 2004 Monash University 5 Interactivity in a ‘normal’ system Database User Interface (prompts user for input - query or new data for database; Displays output) User (makes query or provides input to database) New data/ query details Response to query Input Output

6. Copyright 2004 Monash University 6 Programming and interactivity in ‘normal’ systems User(client) creates connection to host machine (server) on which programme is running Connection remains ‘live’ while user session is running User is prompted by programme and provides input which the programme accepts and responds to Programmimg languages enable an extremely wide range of types of user input and machine response

7. Copyright 2004 Monash University 7 Dynamic web site content and user input: Web Page Database User Prompt for input User input Up-dated database content to display User input to up-date database 2. Web Interactivity: What we would like

8. Copyright 2004 Monash University 8 Problems with interactivity in web-based systems The web was designed as a system which provided pages of information to a user - static, not dynamic HTTP establishes no on-going connection between the client machine and the server machine Requests for information by the client and responses and information from the server are passed separately and independently from one another Interactivity is much harder to achieve - restricted and more messy

9. Copyright 2004 Monash University 9 Web Interactivity: Two types Client-side interactivity: designed to change the appearance or behaviour of the web page in response to the user’s input (ie left-hand side of earlier diagram) Server-side interactivity: designed to enable a user’s input to be taken by web page and sent back to the server web site to be used as input to another program running on the server (ie right hand side of earlier diagram) In both cases the interaction is done via scripts (a form of programming language)

10. Copyright 2004 Monash University 10 3. Client-side interactivity Used to modify the way in which a page is displayed to the user The script which does the work is embedded in the web page HTML There is a variety of HTML tags which allow you to use scripts in various ways to get different effects Interface features commonly created using scripts include mouse roll-overs, animation, creation of dialogue boxes to accept user input and modify the way a page or its elements is displayed, etc

11. Copyright 2004 Monash University 11 Scripting languages for client- side interactivity The original was Java Script (note, nothing to do with the Java programming language!) ECMAscript is a W3C ‘standard’ for scripting, based around Java script The Java programming language can be used to create applets, which are small programs embedded in the web page HTML - same effect as Java Script Java Script can be run by the browser; Java applets need the Java plug-in to run them

12. Copyright 2004 Monash University 12 More fun with the marketplace Netscape developed the first version of Java Script for the Netscape browser Microsoft followed a couple of years later with their own version, called J Script for the IE browser The two languages are similar, but not identical to each other NOR to the W3C ‘standard’ ECMAscript! More problems for web page developers who want their page to work the same in any browser!

13. Copyright 2004 Monash University 13 4. Server-side interactivity Used when we want to enable a user to enter information on a web page and send it as input to a program running on the server (eg a database program) Any system which is using the web as its interface, must use a server-side script to get the user input to the main program and send a reply. For example: any system which stores transaction details (order, payment, etc) in a database on the server; any web interface set up to enable a user to interact with a system (eg a web-based user query of the Monash library catalogue)

14. Copyright 2004 Monash University 14 Server-side scripts and CGI (Common Gateway Interface) CGI is a protocol for enabling exchange of data between a web page and a program running on the server CGI scripts run on the server. They are activated by user input to a web page form A CGI script can provide web form input data to another program running on the server (eg a database) It can also accept data from a program on the server and provide it to the web page Perl is the most popular scripting language for writing CGI scripts (but can also use VB, C++, etc)

15. Copyright 2004 Monash University 15 Cookies: An example of a messy way of achieving server-side interactivity A cookie is a Java script file which a server sends you with the web page The cookie is stored by your browser; sometimes temporarily and sometimes permanently (or until you remove it) The cookie stores information about the user computer or user input to the web page When the browser asks for another page from that server, the information in the cookie gets sent to the server along with the request for the page

16. Copyright 2004 Monash University 16 Using cookies: A simple example Say you buy something from Amazon.com Amazon records your details and the details of your purchase in its sales database Amazon puts a cookie on your machine with your customer details in it Next time you ask your browser to get you the Amazon web site, the browser gets your customer number from the cookie and sends it back to a CGI script on the Amazon server The CGI script then checks who you are on the customer database and sends your buying history details back to the web page to be displayed

17. Copyright 2004 Monash University 17 5. Making interactivity easier (?!) Building either client-side or server-side interactivity needed programming skills to write the scripts Programming languages were not well-structured to deal with web interactivity needs A range of scripting languages were developed and new scripting capabilities built into HTML, new plug-ins for browsers, etc Now we have many different options for writing scripts - Microsoft’s Active Server Pages, PHP, Perl, Python, etc etc …. Very confusing!

18. Copyright 2004 Monash University 18 Making interactivity easier (?!) As with writing HTML, products have also been developed to generate scripts for database interactivity, so you don’t have to program However, these products apparently generate code like HTML generators generate HTML - yes, it’s there, but does it work? … and with what browsers? Therefore, texts still recommend you write it yourself, or at least patch it yourself

19. Copyright 2004 Monash University 19 6. Implications for web developers The web is not well designed for dealing with interactivity (which is the main feature of most traditional IS, and is an essential feature of most commercial environments!) It can be done, but it’s messy, inefficient and limited in flexibility (compared to ‘normal’ system connectivity and interactivity) It requires significant technical skills (programming, etc) which are not easily learned (unlike HTML, for example) Products which make it easier are coming, but they still fall well short of making it easy