Instructions
User Manual:
Open the PDF directly: View PDF 
.
Page Count: 9
| Download | |
| Open PDF In Browser | View PDF |
CM1102 - Coursework 3 Cardiff School of Computer Science and Informa5cs Coursework Assessment Pro-forma Module Code: CM1102 Module Title: Web Applica1ons Lecturer: Dr Natasha Edwards Assessment Title: Online Shop Assessment Number: 3 Date Set: 18th February 2019 Submission Date and Time: by 9:30 am on Friday, 22nd March 2019 Return Date: 24th April 2019 This assignment is worth 40% of the total marks available for this module. The penalty for late or non-submission is an award of zero marks. Your submission must include the official Coursework Submission Cover sheet, which can be found here: hSps://docs.cs.cf.ac.uk/downloads/coursework/Coversheet.pdf Submission Instruc:ons You will need to submit your coursework to THREE locations: 1. Learning Central; 2. GitLab; 3. OpenShift. 1. Submission to Learning Central The following files need to be submitted via Learning Central: No. Description Type Name 1 Cover sheet Compulsory One PDF (.pdf) file*.pdf 2 Website files in a single zip file Compulsory One ZIP (.zip) file *_report.pdf 3 Plain README text file Compulsory One .txt file *_README.txt *replace with your student number WITHOUT the leading 'c' More specifically: ‣ No. 2 "Website files in a single zip file": ✴ must be a single .zip archive that includes the complete source code of your website, with the same structure as needed for deployment on OpenShift server, including all required assets such as images. –1– CM1102 - Coursework 3 ‣ No. 3 "Plain README text file" must include: ✴ your student number and name; ✴ e-mail address; ✴ URL of your website on OpenShift server; ✴ full (40 characters) CHECKSUM of your last commit you performed on your repository on GitLab. This will be used to check the timestamp of the latest commit/ changes in your repository. Note: no changes are allowed after the submission deadline! Non compliance with this requirement, i.e. working on the coursework after the deadline, may be penalised and may result in an award of zero marks. ➡ ✴ Instructions on how to access the checksum of your last commit on GitLab are found in Appendix A. list of advanced features/ additional functionality you implemented and want to be marked. Note: if you implemented some feature you consider as "exceptional attention to security and safety" or "exceptional attention to aesthetics and information content", please explain why you consider these to be "exceptional" and why they should attract extra marks. 2. Submission to GitLab (https://gitlab.cs.cf.ac.uk/) Share your GitLab repository with Natasha Edwards as follows: ‣ Go to: Settings > Members > Select members to invite ‣ search for Natasha Edwards (user name: scmne) ‣ Choose a role permission: master > Add to project ... 3. Submission to OpenShift (https://openshift.cs.cf.ac.uk/) Deploy your website on OpenShift by the deadline specified on the front page. Late or Non-Submission The penalty for late or non-submission is an award of zero marks. If you have extenuating circumstances that prevent you from submitting on time, you should follow the School’s Extenuating Circumstances procedure (see the Student Handbook for more detail - available on Leaning Central). You are reminded of the need to comply with Cardiff University’s Student Guide to Academic Integrity. You should also read the School’s electronic coursework submission policy, available on Leaning Central. –2– CM1102 - Coursework 3 Assignment INSTRUCTIONS The aim of this assignment is to construct a website for an online shop. The website should allow the customers to browse through the available goods (or services), view their price and all other relevant information, allow the customers to add the goods to the shopping basket, and finally view the basket (display all selected items and their total price) and allow the customer to enter payment details. It is not required to implement the actual payment mechanism. Structure of the Website The website should be organised into at least the following pages: • The front page should be used to present customers with a brief gallery of goods and their primary characteristics. The front page should: – Allow the customer to add an item or items to the shopping basket. – Allow the customer to view detailed information about an item when they choose to do so (e.g. by clicking on an item title). – Allow the customers to sort the items according to selected criteria (e.g. price, mass, size: depending on what properties you choose your items to have). – Be aesthetically pleasing, e.g. display an attractive banner with the shop title, contact phone number, lay out the items in a nice tabular form, offer intuitive navigation. • Another page should be used to display detailed information about a particular item (a ’single product’ web page). Just like on the front page, the user should be able to add the currently selected item to the shopping basket. • Yet another page should display the contents of the shopping basket. The shopping basket page should: – Be accessible only to the customer who has placed the goods there. – Show all the chosen items and their total price. – Allow the customer to delete an item (or all items) from the shopping basket. – Be persistent within the session. • Another page (checkout) should allow the user to enter their credit card payment details, and confirm the final price to be paid. As the user steps through the fields of the form, help messages should be displayed explaining what information needs to be entered in each field. There is no need to implement an actual checkout or secure payment mechanism. It is sufficient to implement only a basic validation for the payment form: when the user fills in the form incorrectly and attempts to submit it, a helpful error message should be displayed. It is not necessary to process this form in any other way. • Your website should provide the user with a user account functionality, which would allow the user to register, log in and log out. If the user is not able to register, log in or log out, the system should display helpful error messages to the user. Advanced Features The above features allow for a mark of up to 70%. A further 30% is obtainable by providing additional functionality or qualities for the website, examples of which are (but are not restricted to): • Functionality to allow customers to leave reviews relating to particular items. • A search facility allowing the customers to find items according to various search criteria. –3– CM1102 - Coursework 3 • • • • • A facility to add a product to the customer’s ’wishlist’. A facility to prepare shipping labels. A facility to prepare electronic invoices (e.g. as a .pdf file). Exceptional attention to security and safety. Exceptional attention to aesthetics and information content. There are endless possibilities here and you are encouraged to think of your own extensions. Note: 30% is the maximum mark obtainable for any combination of the features in this category. Goods for Sale The nature of goods to be “sold” by your online shop is your choice. The site, however, must not include any content that is likely to be offensive to others. As the minimum, the items in your shop should have the following properties: • • • • Name Textual description Picture Price and any other relevant characteristics. The items in your shop may be imaginary, but should be plausible in order to illustrate the functionality of your website. Please populate your databases with at least five nice examples (items) prior to submission so that the examiners can adequately test the functionality of your shop. Technologies to be Used In order to demonstrate your ability to use Flask micro web framework and other various web technologies introduced in the module, your online shop should use the following: • Navigational menus with links to the different parts of the website (e.g. “view basket”, “go to front page” etc.) Lists, which could be used, for example, for menus or to itemise properties of the shop items. Tables, which could for instance be used to format the list of available items. CSS style sheets, including an external CSS file to define the appearance of your online shop. Links to external web resources (i.e. via the anchor element), for example to a manufacturer’s website. • A MySQL database that maintains the content of the shop. • You may also use JavaScript if/ when/ where appropriate, for example to provide feedback to the customers when they update their shopping basket. (Note: you do not have to use JavaScript, only if you want to. The same functionality can be implemented in Python/ Flask.) • • • • Important Conditions • The software tools and technologies that are to be employed on the website are HTML (HTML5 and XHTML are allowed), CSS, MySQL, JavaScript and Python/ Flask. The use of XML is also allowed. • Use of libraries, APIs, etc. is allowed, however, the final code must be authored by you. If you use external libraries, APIs, etc. you must provide an explanation of how and where these were used AND complete references in your code and in a separate file (e.g. README.md). Note that there should be no need to produce a user guide as it is assumed that the website interface will be self-explanatory. –4– CM1102 - Coursework 3 Criteria for Assessment Credit will be awarded against the criteria listed in the tables below, with weights attached to each area of assessment as indicated. Feedback Feedback on your coursework will address the assessment criteria. Feedback for this assessment can be used to improve your skills in professional web development, and might be useful for other modules, e.g. your Final Year Project - if you decide to do a web-based project. Good luck! –5– CM1102 - Coursework 3 Appendix A: Checksum of your last commit (on GitLab) To access the checksum of your last commit, go to the Project’s main page, and click on the button next to the 8-character text - see Fig. 1. This will copy the full checksum (i.e. 40 characters). Paste the copied text into your README file. Figure 1: Accessing checksum of your last commit on GitLab –6– O NLINE S HOP COURSEWORK ASSESSMENT CRITERIA AND MARKS ALLOCATION Essential functionality Functionality Public gallery of shop items: The list of items is displayed to customers: Item names, prices, and descriptions are shown Item pictures are shown The list of items is generated programmatically (i.e. pulled from the database, not created manually). Mark is binary here: no=0, yes=9. Customers can sort items according to selected criteria Detailed (Single Product) view: Customers can choose to view detailed information about an item Customers can add selected items to the basket . . . and appropriate feedback is given to the user upon addition Mark is binary here: no=0, yes=2. Max Marks 3 3 9 (binary) 3 3 3 2 (binary) Shopping basket: Shopping basket correctly displays the chosen items The total price is displayed correctly Customers can delete items from the basket . . . and the shopping basket view is then updated to reflect this Basket contents remain persistent within the session Basket contents are only visible to the customer who put them there 3 3 3 3 3 3 Checkout (payment form): Payment form is shown when the user proceeds to checkout Help messages appear as the user steps through the input fields Error messages are shown when the user incorrectly fills in the form 3 3 3 Customer Accounts: Customers can create an account Mark is binary here: no=0, yes=2 Customers can log in into their account Mark is binary here: no=0, yes=2 Error messages are shown when the user in not able to log in TOTAL FOR ESSENTIAL FUNCTIONALITY 2 (binary) 2 (binary) 3 60 Usability and presentation Ease of navigation (how easy it is to access every page from every other page) Consistency of the design and professionalism in visual presentation 5 5 TOTAL FOR USABILITY AND PRESENTATION 10 Advanced functionality or exceptional effort (examples) Functionality to allow visitors to leave reviews relating to particular items A search facility allowing to find items according to specified search criteria A facility for customers to create a ’wishlist’ A facility to prepare shipping labels A facility to prepare electronic invoices Exceptional attention to security and safety Exceptional attention to design and information content (15) (15) (15) (5) (5) (up to 10) (up to 15) TOTAL FOR ADVANCED FUNCTIONALITY OR EXCEPTIONAL EFFORT 30 MARKING GUIDE Essential shop functionality Excellent (3 marks) Functionality described in the instructions fully works. There are no detectable bugs. The system is robust under all circumstances. Good (2 marks) Functionality described in the instructions mostly works. The examiner spots some inconsequential bugs that do not substantially affect the operation of the website. The system remains stable during normal usage, but fails when the examiner deliberately tries to break it. Poor (1 mark) Only partially functioning features. There are obvious bugs that substantially affect the operation of the website. The system behaves unpredictably during normal usage. Serious flaws in several functions. Persistent bugs affecting the functionality of the website. None (0 marks) Not implemented or does not work at all. Usability and presentation Excellent (4-5 marks) • Navigation is intuitive, consistent and self-explanatory, with clear navigational menus on all pages providing access to all other parts of the site without breaking the logic of operation. Navigation is personalised to a particular user (e.g. the website greats the user by her/ his name). • All shopping and basket pages are informative, with professionally presented, logically and consistently laid out content; effective use of HTML and other ’display’ elements, with CSS control of styling. Good (2-3 marks) • Navigation is mostly intuitive, with a few limitations in ease of navigation or with use of menus and links, e.g. the user may need to re-enter some information once they left a page and came back. • Reasonable presentation of content, although not yet of professional quality. Generally well laid out using CSS where appropriate but some limitations in overall coherence of design and use of space on page. Poor (1 mark) • Means of navigation are confusing. Using the shop is a chore. • Inconsistent design across website with poor presentation: failure to employ CSS appropriately to control presentation. Text is often difficult to read (e.g. poor colour contrast, obtrusive background patterns, text too small or unnecessarily too big). None (0 marks) • None, absent, not implemented, not applicable.
Source Exif Data:
File Type : PDF File Type Extension : pdf MIME Type : application/pdf PDF Version : 1.5 Linearized : No Page Count : 9 Page Mode : UseOutlines Author : Title : Subject : Creator : LaTeX with hyperref package Producer : pdfTeX-1.40.14 Create Date : 2019:02:14 14:54:16Z Modify Date : 2019:02:14 14:54:16Z Trapped : False PTEX Fullbanner : This is pdfTeX, Version 3.1415926-2.5-1.40.14 (TeX Live 2013) kpathsea version 6.1.1EXIF Metadata provided by EXIF.tools