‘CONFIDENTIAL UT SCHOOL OF COMPUTING MZ SAVE acuity of engineering UNIVERSITI TEKNOLOGI MALAYSIA TEST 1 SEMESTER I 2021/2022 SUBJECT CODE —: SECJ 3303 / SCSJ 3303 SUBJECT NAME —: INTERNET PROGRAMMING YEAR/COURSE _: 2/3 (SECJ) TIME 8.00 pm — 11.00 pm (3 Hours) DATE/ DAY 114 DECEMBER 2021 (TUESDAY) INSTRUCTIONS TO THE STUDENTS: ‘© You are given 3 HOURS to complete the exam inclusive the submission of your answers. © Download the question: 8.00 ~8.15 pm (15 minutes) ‘© Answer the question & Interim submission: 8.15 — 10.45 pm (2 hours 30 minutes) ‘© Final answer submission: 10.45 — 11.00 pm (15 minutes) ‘* A candidate who is suspected of cheating in examinations is liable to disciplinary action including, (but not limited to) suspension or expulsion from the University. All materials and or devices which are found in violation of any examination rules and regulation will be confiscated, IMPORTANT NOTES: ‘+ All the COMMENT STATEMENTS in the submitted program WILL NOT BE EVALUATED. SUBMISSION PROCEDURE: +All file inthe project are required forthe submission and need to be compressed. + The compress fie shall be named as follows: Name_ matriesNo.zip (i.e. Aina Ali_ AI9ECOI8.2p). ‘© Submit the compress file via the UTM’s e-learning system.Questi ion [100 Marks] Preparation: sks: I i i 1- Open NetBeans and create a new Java Web project. 2- Name your project as SchoolStore, 3- From e-learning, download MidTermTest.zip; and unzip the file. 4. Copy the file index.html into Web Pages folder. 5- Copy the file updateProfile.btml into Web Pages folder. 6 Copy the file uniformOrder-html into Web Pages folder nO ie images folder in Web Pages folder. 8- Copy all images containing image files into images folder (Image files are Back to school,jpg, Set By.jpg, Set Girl,jpg and Set Shoes.jps.). 9 Figure 1 below shows the structure of the files in your Netbeans project explorer. Web Pages > 9) WEB-INF Y images [ei Back to schooljpg [es Set Boy.jpg [G) Set Girljpg [\ set shoes.jpg (@) index.hemt {2} uniformOrder. htm! [S)_updateProfile.htmi Figure 1: Structure of the prepared files in Netbeans project explorer. ‘Change the file index.htm! to JSP file and named as index,jsp and do the following tasks. Create a new JSP file and named as header jsp. In header,jsp, display text “Online Shopping Experience with Us. You have accessed this page for times (since last server reboot)”. Last access from .” The accessCounter is the counter of the page is being accessed by the use. While accessHost is referring to the remote host of the user Make the header jsp file include in index.jsp as a header of the page as shown in Figure 2.2 Complete the form data validation (use a client-side form validation) in the updateProfile.html and uniformOrder.htm! files to fulfill the specification in Table 1 (you can modify the type of the input fields and use HTMLS validation). Table 1: List of Input Fields and Specification. (Form: wpdateProfile.html INo[Field Name [Specification | iL [Full Name [Mandatory (not allow blank) | [Email Address Optional (allow blank) and use standard email Tormat._| 5 [Gender [Mandatory (not allow blank) | if [Delivery Address [Mandatory (not allow blank), (Form: wniformOrder.htmt INo|Field Name [Specification IL [Quantity [integer value, range between 0 fo 10, 3- Create a servlet (LoginServlet,java) and do the following tasks. i. Check the username and password entered in index,jsp (use a simple check where the valid usemame is “shopper” and the password is “shop 123”). You can input any number for the Phone Number field with the correct format. Refer to the Figure 2, ii, Ifthe login is valid, forward the user to uniformOrder.html, else redisplay the index.jsp with the error message “Invalid username or password. Please try again...” on top of the page and the font colour is red, Refer to the Figure 3 and Figure 4. iii, Write the servlet statements to add the following name value pair (refer Table 2) into session from the input entered in index. jsp. ‘Table 2: List of session names and session values Session name _ [Session value luser_name [shopper loi2-3456789 oF nunber phone_no with the correct format 4. Create a servlet (ProfileServlet java) and do the following task, i. Process the input from the updateProfile.html file and then display the profile information (response page) as shown in Figure 6. The display should include the session values from the index.jsp which are user_name and phone_no. fi, Create and add a cookie that store the delivery address value, entered by the user in updateProfile html. iii, Create “Back to Order” button that should return to uniformOrder. htm! file.ii Create a servlet (ProcessOrder.java) and do the following tasks. Process the customer's order that made through the uniformOrder.html. Refer to the sample outputs (Figure 7 — Figure 9) to test the correctness of your solution (please note that the RM value (price) has 2 (two) decimal points). Write the servlet statements to get the session and display the value of user_name session on top of the page. Then, delete the phone_no session Write the servlet statements to get the cookie and display the value of delivery address cookie on top of the page as shown in sample outputs of Figure 7 to Figure 9. Create “Home” button that should return to index. htm! file. ‘Table 3: Assessment criteria Trem Criteria Marks ‘A_[)___The program is able fo ran and completeness z 7) Using an appropriate structure forthe program = the code is properly indented and readability. 1 = _all the required header files are included. 1 B | Login process and page redirection (LoginServTet java) i) Got the params 3 ii) Login process 9 iit) Session 6 © _| Form data validation (updateProfile hal & uniformOnder himl) i) FullName 0s ii) Email Address Lo ill) Gender 0s iv) Delivery Address os ¥) Quantity 1s D_| Change HTML to JSP (index jsp, create and use header sp) Change index him to JSP file. 1 ii) Button referring tothe new JSP file. 1 iil) Display header file (reate file, content and display). 5 E__| Display profile info (ProfileServletjava) i) Get the parameters 6 ii) Display info 8 iil) Display session values 3 iv) Display button and process 1 ¥)_Create cookie to store delivery address 2 F__| Provess the order (ProcessOrderjava) i) Get the parameters and initialization n ii) Calculation correctness 2 iii) Display the output in table and display the total 1 iv) Display session name and invalidate session phone number 8 ¥y) Display button and process 1 vi) Get and display cookie delivery address 3 Total 100jOpping Experience wi [You have accessed this page for 1 times (since last server reboot), Last access from 127. Welcome to DAEBAK School Uniform Store Username Tom headersp Passware Phone No Eg one Figure 2: The display of index.jsp file and header jsp file.€ > © © rcanesceceoschocsioroginsenv Invalid username or password. Please try again. Welcome to DAEBAK School Uniform Store DAEBAK School Unitorm Store Figure 4: Display of the uniformOrder html for a valid user login.€ > © © lecathost:8080/Schoolstore/updateProtiehim Update Profile Full Name. John Doe Email Address John@gmailcom Gender : ® Male © Female Payment Type : (Online Banking Delivery Address ‘School of Computing, | Faculty of Engineering, Universiti Teknolog Mataysia ‘Shopping interests (you can choose more than one) (Collect comms fReceive [Free delivery pe Figure 5: Display of updateProfile him € > © © tocanost.8080/ScreastreProtieservt Welcome John Doe | sernName@eope > «Display session value of user_name Pontsct NoGiE3456785> ~~ Display session value of phone_no Fait john@gmsicom Pender: Mate povment Type: Onine Banking every Address: Schl of Computing, Facuityof Engineering, Univers Teknologi Malaysia (our shopping interests include: + Receive vouchers + Free delvery Figure 6: The display of response page from ProfileServiet java file.Sample Input #1 Sample Output #1 Figure 7: The display of sample input and output #1Sample Input #2 Sample Output #2 four Order Detail [ser Name: shopper otal Amount To Pay €@ME6.00_> Figure 8: The display of sample input and output #3Sample Input #3 Sample Output #3 four Order Detail Iser Name: shopper Pelivery address: School of Computing, Faculty of Engineering, Universiti Teknologi Malaysia Figure 9: The display of sample input and output #3. -END OF QUESTION: