School of Computing and Mathematics CSC-30025: Advance Web Technologies ASSESSED EXERCISE Page 1 of 6 Coursework Assessment: Design and Implement an Advanced Web Application This coursework comprises 100% of the Final Module Mark. Release date for this Assessment Exercise is Tuesday, 22nd March 2022, 00:00 midnight and the submission deadline for this work is Wednesday, 4th May 2022, 13:00. I. Introduction: Many bookstore companies are trying to reduce their cost by managing their online store to reduce their physical storage requirements, manage inventories efficiently and serve their customers better. Customers can reduce their visits to their showrooms, browse the products and make their ordering/choices efficiently. In this coursework assessment, you will need to develop a system to be used by customers/buyers and maintained by administrators (bookstore company staff). The website should be written using standards compliant HTML5 and CSS3 code and the use of templates and frameworks such as Bootstrap are allowed (but must be referenced in the code and report). However, be aware that marks can only be awarded for your own modifications to templates and frameworks. Your system should be responsive, adjusting intelligently to different display capabilities. Your work will be evaluated using the version of the Google Chrome Web browser in lab PCs available inside lab CSL3.104B (your usual practical classes). Remember that the demonstrators cannot write your assessment for you, but they can answer technical questions and point you in the right direction. Make sure to ask them/myself if you have any questions or problems during your lab sessions. Marking Scheme: You will need to develop the following functionalities, consider designing aspects, coding quality, bug free, consistency of presentation, and descriptive report as outlined below. The assessment will consider both comments in the codes and accompanying report. You will be called upon to demonstrate your work at a specific date and time. (a) Functionality Aspects and Implementation (65%), (b) Designing and Coding Aspects (15%) and (c) Description and Working Procedure Report (20%). Detailed mark distributions for each section are shown below as a percentage (%). II. Functionality Aspects and Implementation (This section total 65%): 1. The user should be able open the bookstore company webpage and browse all the available books purchase options. For example, the first drop-down menu should show two items: School books and Fictions. When: (1) School books is selected, it should populate second drop-down menu providing options to select one from a few available subject areas, such as: (1)(a) English, (1)(b) Maths and (1)(c) Science, School of Computing and Mathematics CSC-30025: Advance Web Technologies ASSESSED EXERCISE Page 2 of 6 and their corresponding pictures. Similarly, when: (2) Fictions is selected, it should populate second drop-down menu providing options to select one from a few categories available, such as: (2)(a) New arrivals, (2)(b) Love and (2)(c) Prize winners, and their corresponding pictures. All the items are priced differently. You should use efficient asynchronous JavaScript and XML (AJAX) for building the bookstore company webpage. Their information names, images and prices should be stored in table(s) belonging to one MySQL database. The website viewed by the customer should have register and login links/buttons for the user to register and login (more details in II.3 and II.5 below). (15%) 2. While designing the bookstore company website, search engine optimization aspects should be followed, where possible. (5%) 3. On the customer registration page, the user should register securely with Name, Phone number, Email ID (unique) and a Password. Validation of the email ID (such as abc@xyz.com) and phone number (such as XXXXXXXXXX (10 digits)) are required. Email ID is unique in the table (no two persons should have the same email ID). Security aspects such as: Cross-site scripting (XSS) attack, HTML entities and SQL injections should be taken care of. (10%) 4. During the time of registration, all these four personal information (Name, Phone number, Email ID and password) should be stored in the another MySQL table (database could be the same but a different table). (5%) 5. On the login page, existing users should be able to login with phone number and password and logout securely; authentication details are kept using the session variable. (5%) 6. Form processing (while registering) should validate all fields as the user performs the keystroke (i.e. live validation), using the React framework. For example, the name should only contain letters, the phone number should only have numbers, valid email address, etc. Any mistakes or errors, should prompt (an appropriate message to) the user immediately (while the user is typing). (10%) 7. Once successfully registered/logged in, the user should receive an appropriate message and be redirected to the bookstore company website (as described in II.1). Where the user should be able to select at least 1 book item and receive its pricing on the screen. Note that on the bookstore company webpage II.1, the user would be able to view the bookstore items and their prices, but they won’t be able to order. However, when successfully logged in / registered, they should be able to both view and submit an order. The ordered item should be stored in a new MySQL table, (can belong to the same database) with customer name, email ID, phone number, ordered item and their price. (10%) School of Computing and Mathematics CSC-30025: Advance Web Technologies ASSESSED EXERCISE Page 3 of 6 8. Finally, develop a REpresentional State Transfer (RESTful) web service for the Manager in the bookstore company to view the order placed item by item online by sending the order ID (over the web API, primary key in the table) stored in the ordered bookstore items table. (5%) III. Design and Coding Aspects (This section total 15%): 1. Design: Marks will be awarded for the navigation and user interface design and how they conform to standard usability and accessibility criteria. (10%) 2. Code Quality: Marks will awarded for appropriate code design, field types, commenting, modularization, bug free and quality. (5%) IV. Description and Working Procedure Report (This section total 20%): The report should comprise of: 1. Introduction: Information about the architecture of the site and an overview of the different components of the project. Include diagrams and figures where necessary (hand drawn are fine, include them in the document as pictures with captions). (3%) 2. Developed Architecture, Implementation Details and System Inputs and Outputs: A detailed description of the working procedure of your designed website (similar to a short software product manual). For example, mention your starting webpage, ways to view the information and then browse to which page and then to which page. This should have the working guidance (user guide) of your software. (15%) 3. Suggested Improvements and Conclusions: Suggested ways that your work could be improved. (2%) A task template is shown in Table 1 (to be included in the beginning of your report in addition to the above points IV.1 to IV.3): Table 1. Task template. Include this table in your report and provide details about each task. Comment on what you achieved, where you experienced problems and any parts you were unable to complete. Task Comments 1. Bookstore company webpage 2. Submit SQL files to generate the tables in the bookstore company 3. Login page 4. Registration page 5. Security aspects (preventing attacks) of the Registration and Login page School of Computing and Mathematics CSC-30025: Advance Web Technologies ASSESSED EXERCISE Page 4 of 6 6. Search engine optimization aspects in the bookstore company webpage 7. User Registration validation using React framework 8. Data management a) Customer registration table: b) Customer ordered table: 9. RESTful webservice for the bookstore company Manager 10. Any other information (remarks) You should focus your writing on the industry adaptation of web technologies and must not exceed 2000 words, including the title, references, figure, table captions and contents. The student id, the login details, a link to the live version of the website and the number of words MUST be provided at the beginning of the report. Reports will be marked according to the university’s marking scheme, available at https://www.keele.ac.uk/sas/academicservices/assessment/markingscheme. Sections: II (65%) + III (15%) + IV (20%) = 100%. What resources might I use to get started Ans: Laboratory CSL3.104 and CR010 PCs, University network and software. Module Leader & Contact: Bappaditya Mandal (Email: b.mandal@keele.ac.uk) Office: Colin Reeves CR36, Hours: Ask during any of the practical classes in CSL3.104 or by appointment via email or MS Teams chat. Module Learning Outcomes Assessed 1. Design and implement advanced modular multi-tier web applications. 2. Evaluate techniques to create distributed web applications. 3. Assess issues related to software architecture and web design patterns. 4. Apply appropriate user interface and user experience design techniques. 5. Assess and apply web security approaches. V. Things to submit (make sure that you) 1. Make a .txt text file named with your 8-digit student ID, for example “02915643.txt”, put the web link to your webpage. For example: http://www.teach.scam.keele.ac.uk/prin/your_username/folderName/ (Instead of http://localhost/02915643/) School of Computing and Mathematics CSC-30025: Advance Web Technologies ASSESSED EXERCISE Page 5 of 6 and save this link in the 02915643.txt text file. During your demonstration, the assessor would open this text file, go to the provided link, check your website and evaluate your coursework assessment. Before you submit, you must verify that your provided link is working within the University network (laboratory PCs). 2. You should use the assignment drop-box for this module on the KLE. Attach your written report as a PDF document. The zip file will include all the source code, above text file and the report in PDF file (e.g. 02915643.pdf). Please note that .zip is the only permitted format. Other archive formats such as .rar and .tgz are NOT acceptable and will not be marked. Name the zip file according to your 8-digit student ID (e.g. 02915643.zip). Please attach a single compressed (.zip) archive file of your website source code files (PHP, HTML, SQL and others), text file and report (.pdf file) and upload to the appropriate dropbox in the KLE before the date and time shown in the beginning of this document. VI. Advice and Tips 1. This assignment should be your own work and may need to be completed in your own time: just like the independent study time that you spend working on items of coursework for your other taught modules back at the University. You should not seek or request assistance from any code-sharing or code-development websites or companies. 2. Of course you are encouraged to refer to, and reuse as appropriate, any of the course materials that you have been provided with or developed earlier in your degree studies. However, if you make use of the published work of other scholars, authors or software developers you should ensure that this usage is clearly stated and properly acknowledged in your submitted material. You are responsible for ensuring that any discussion of ideas with other students does not transgress the guidelines provided in the School Handbook or the University’s guidelines. In particular, you should neither supply material to other students, or request it from others. Remember that you are responsible for keeping your work securely. 3. Help & Guidance: Remember that, while this is an individual element of assessment, you are strongly encouraged to obtain any technical support, help and guidance through the usual channels including: your CSC-30025 lecturers, tutors, teaching assistants and demonstrators. Absolutely no penalty is incurred by doing so. 4. Your implementation should be based around PHP, HTML5, JavaScript, CSS3, MySQL and the React JavaScript library. You should use the enhanced interactivity and advanced AJAX facilities. 5. When designing your website, take time to sketch out your ambition on paper first. Draw the pages and note how they link to each other. 6. Remember and apply the principles for interaction design that were presented in your previous years. 7. If necessary, you could use the images under creative commons licensed images (details here: https://en.wikipedia.org/wiki/Creative_Commons_license). Some example School of Computing and Mathematics CSC-30025: Advance Web Technologies ASSESSED EXERCISE Page 6 of 6 sample images can be searched here: https://wordpress.org/openverse/ referrer=creativecommons.org. 8. Build the structure of your site first, then go back and embellish the content and presentation later. 9. Think carefully about your chosen approach. Make sure it is open enough to allow you to develop an interesting argument in the report, but not so open that you can get lost trying to cover the details. 10. If you are citing the writing of others, try to capture why they made the point you are citing, as well as the simple fact that they did so. 11. Always proof-read your work carefully to check for spelling mistakes, grammar errors, and confusing ordering. Make sure your provided link, for example: http://www.teach.scam.keele.ac.uk/prin/your_username/folderName/ and save this link in the 02915643.txt text file is working. Give it a careful once-over before submission to ensure everything is in order. 12. Always revise all your codes and their functionalities. When you are happy about your developed codes and documentation then you should submit before the deadline.
