2. Electronic Commerce COMP3210 Bonus Session : Report Card Application Dr. Paul Walcott Department of Computer Science, Mathematics and Physics University of the West Indies, Cave Hill Campus Barbados The Department of Computer Science Mathematics and Physics, University of the West Indies, Cave Hill Campus, Barbados © 2007 Dr. Paul Walcott

3. Session Objectives Create a simple report card application Using JavaScript and XHTML 1.0 Create test requirements and test cases for the report card application Evaluate the quality of the report card application by applying these tests

4. Report Card Application Requirements The report card application allows: A user to enter a mark for a given course Marks for the three courses, COMP1130, COMP2145 and COMP3210 to be added to the report card

5. Report Card Application Question ? How would you design the user interface?

6. Report Card Application Cont’d User Interface Design The user interface design for the report card is illustrated below:

7. Report Card Application Cont’d User Interface Design Cont’d The picklist contains the course names COMP1130, COMP2145 and COMP3210 The Mark text box is used to enter the course mark When the update button is clicked: The mark is added to the report card and The corresponding course name and mark are displayed

8. Report Card Application Cont’d User Interface Design Cont’d If the mark entered is less than 0 or greater than 100 then the following popup window appears:

9. Report Card Application Question ? What do you think is a possible test requirement?

10. Report Card Application Cont’d Test Requirements Ensure that marks can be entered for each of the three courses and that these marks are displayed correctly on the report card Ensure that the exception message is displayed when erroneous input is entered Ensure that the report card application works correctly in multiple browsers (e.g. Internet Explorer, Netscape and Opera)

11. Report Card Application Cont’d Test Requirements Ensure that the markup produced is valid XHTML 1.0

12. Report Card Application Question ? Can you create at least one test case? Remember that test cases comprise of a pre- condition, a test and a post-condition

13. Report Card Application Cont’d Test Cases Only some of the possible test cases will be included in these notes It is left as an exercise for the reader to ensure that the list of test cases is complete and comprehensive

14. Report Card Application Cont’d Test Case #1 Precondition: The web browser window is open Test: Enter reportcard.html as the URL address Postcondition: The report card application web page is displayed

15. Report Card Application Cont’d Test Case #2 Precondition: Select the COMP1130 course and enter a mark of 65 Test: Click the Update button Postcondition: The following report card is displayed

16. Report Card Application Cont’d Test Case #3: Prompt() Method Bug Precondition: Select the COMP1130 course and enter a mark of 09 Test: Click the Update button Postcondition: The following report card is displayed

17. Report Card Application Cont’d Test Case #4 Precondition: Test #2 has been run Test: Select the COMP1130 course from the picklist, enter a mark of 55, then Click the Update button Postcondition: The following report card is displayed

18. Report Card Application Cont’d Test Case #5 Precondition: Test #2 has been run Test: Select the COMP3210 course from the picklist, enter a mark of 75, then Click the Update button Postcondition: The following report card is displayed

19. Report Card Application Cont’d Test Case #6: Boundary Conditions Precondition: Select the COMP1130 course and enter a mark of 0 Test: Click the Update button Postcondition: The following report card is displayed

20. Report Card Application Cont’d Test Case #7: Boundary Conditions Precondition: Select the COMP1130 course and enter a mark of 100 Test: Click the Update button Postcondition: The following report card is displayed

21. Report Card Application Cont’d Test Case #8: Boundary Conditions Precondition: Select the COMP1130 course and enter a mark of 101 Test: Click the Update button Postcondition: The following report card is displayed

22. Report Card Application Cont’d Test Case #9: Exception Precondition: Select the COMP1130 course and enter a mark of -1 Test: Click the Update button Postcondition: The following is displayed

23. Report Card Application Cont’d Test Case #10: Exception Precondition: Select the COMP1130 course and leave the mark blank Test: Click the Update button Postcondition: The following is displayed

24. Report Card Application Cont’d Test Case #11: Exception Precondition: Select the COMP1130 course and enter a mark of “abdf” Test: Click the Update button Postcondition: The following is displayed

25. Report Card Application Cont’d Other important test cases include: testing on multiple browsers Using the validator at http://validator.w3.org to determine whether all of the markup written is valid XHTML 1.0http://validator.w3.org Inputting floating point numbers rather than integers

26. Report Card Application Cont’d Building the Application In order to build the application: An XHTML 1.0 page must be created which includes the form illustrated in the design A stylesheet is required for: The “Report Card” text The report card The mark text box The submit button

27. Report Card Application Cont’d Building the Application (Cont’d) In order to build the application JavaScript functions will be used to: Update the report card table Display the table Clear the Mark text box An array data structure will be used to hold the course marks

28. Report Card Application Cont’d Building the Application (Cont’d) Let us build the application!