Homework answers / question archive / Submission Instructions The aim of this assignment is to construct a website for an online shop

Submission Instructions The aim of this assignment is to construct a website for an online shop

Computer Science

Share With

Submission 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. 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 *_website.zip 3 README file Compulsory One PLAIN TEXT (.txt) file *.txt 4 Report Compulsory One PDF (.pdf) file *_report.txt *replace with your student number WITHOUT the leading 'c' More specifically: 1. Your submission must include the official Coursework Submission Cover sheet, which can be found here: https://docs.cs.cf.ac.uk/downloads/coursework/Coversheet.pdf 2. "Website files in a single zip file": must be a single .zip archive that includes the complete source code of your website, including all required assets such as images, with the same structure as needed for local deployment and automated testing (i.e. the same structure as the initial template you are given below). 3. The README file must contain *only* the URL to your deployed website on Openshift, or be an empty file if you have no Openshift deployment 4. “Report” must be a PDF file of maximum three A4 pages in length, containing a. First page: screen grabs of the gallery and shopping cart pages of your site, demonstrating your design and layout b. Remaining pages (optional, for 20% extra credit): a brief description of ‘Advanced’ features as specified below. Describe any advanced features with brief text and screen grabs. The text for this section can be as short as you like, so long as it adequately describes the features you have implemented. The text must not exceed 400 words. Font size must be 12pt. Non-compliance with the submission instructions can lead to all or part of the marks being subtracted. Failure to ensure 2 and 4 are the same version of the site may also result in penalty. We reserve the right to use automated tools to check for possible plagiarism in your code, however we recognise that due to the nature of programming, some aspects of assignments are likely to be completed by many students using the same code (e.g. this coursework specification itself contains some recommended code snippets, and the mock test script we provide will also form part of your submission). Only if automated tools indicate a greater quantity of similar code than is normal, will this be referred to a human for detailed assessment of whether plagiarism is likely to have taken place. Assignment 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. The following Learning Outcomes are being assessed through this coursework: • Front-end website construction using HTML and CSS • Server side development (e.g. Linux or Windows) using scripting languages (e.g. Python) and frameworks (e.g. Flask) • Awareness of the main network protocols and Internet standards. • Being able to debug website performance by using online verification tools and browser analytical tools • Making use of online resources and/or documentation • Understanding modern web development, including appreciation of usability aspects and automated testing • Appreciation of legal and ethical issues, e.g. security, data protection • Appreciation of commercial and economic context of online business 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 • Measure of carbon or ecological footprint The items in your shop may be imaginary, but should be plausible in order to illustrate the functionality of your website. Ecological impact may be quantified any way you like, e.g. carbon footprint, ecological footprint, or otherwise (we will not assess whether the numbers you use are accurate). Please populate your databases with at least four nice examples (items) prior to submission so that the examiners can adequately test the functionality of your shop. Essential Features / Structure of the Site [worth 80% of the available marks] As is standard industry practice, we use automated testing to assess essential features of the site. Therefore your shop must be coded to the following specification to pass. So you are able to verify this during development (or even use a Test Driven Development process if you so wish), you are given a mock test script in the initial project template here: https://git.cardiff.ac.uk/stochc/cm1102_coursework_template YOU SHOULD CLONE THIS REPOSITORY AS THE BASIS OF YOUR COURSEWORK, THEN LOOK AT README.md FOR INSTRUCTIONS ON HOW TO RUN THE TEST SCRIPT. During assessment your work will be marked using a similar test script with minor detailed changed, e.g. the order of tests, or which items are added to the shopping basket. If your site has been coded to behave as reasonably expected, and passes the mock test script, it should have no issues passing the actual test script. When assessing we will test your work both locally and (if you provide an Openshift URL) on Openshift, and award the higher mark from the two tests: 1. We will unzip your code to one of the school Linux lab computers, create and activate a virtual environment, install packages with pip install -r requirements.txt, and launch your server with the command you provide in start.sh (see below). Then in a separate process we will run the test script. Note that if you wish your work to be marked in this way, you will need to ensure that any additional dependencies you use are correctly specified in requirements.txt. 2. We will run the test script on the URL of your deployed work on Openshift if you provide it in your README file submitted to Learning Central. Launch script You must provide a script to launch your server, as a text file called start.sh, in the root directory of the project you submit. The template project we provide contains this script already, consisting of a single line which runs flask. Your server must be launchable by calling this script, so if you have other requirements, be sure to edit this script as appropriate. Page specifications All pages must have a header/navigation bar including clickable elements with the following HTML IDs: • ‘login’: must lead straight to login page • ‘logout’: must immediately log out without confirmation and return to home page • ‘register’: must lead straight to register page • ‘show_cart’: must lead straight to cart page Homepage • The homepage must show at least 4 item names, prices and descriptions • Each name/price/description must be grouped in an element of HTML class gallery_item which itself contains further elements for the following o Names must have HTML class item_name o Prices must have HTML class item_price, and this element must have only numeric content (i.e. put symbols such as £ outside the element) o Descriptions must have HTML class item_description o Submit button to add item to cart with HTML class ‘add_to_cart’ o Submit button for more product details with HTML class ‘details’ ? you can set class of form buttons in the Jinja template by using e.g. {{ form.my_cart_form(class_="Cart") }} • The gallery must be sortable using a SelectField which includes the following values: o "price_low" for low-to-high price sorting o “price_high” for high-to-low price sorting o “eco_low” for low-to-high sorting on ecological impacts Selecting each option must immediately trigger the gallery to change order. Instant submission of a form when a menu item is selected is achievable with an entry such as the following in forms.py (note the example here will not sort the items for you, but just submit the form): sort_type=wtforms.SelectField("Sort by", choices=[("price_high", "High price"), ("price_low", "Low price")], default="price_high", render_kw={"onchange": "this.form.submit()"}) Login page • Input field for username must have HTML ID ‘username’ • Input field for password must have HTML ID ‘password’ • Any combination of letters and numbers from 5 to 20 characters must be acceptable for usernames and passwords • There must be one and only one submit button • Successful login must redirect to the home page • Unsuccessful login must load an error page where the error message has HTML class ‘login_error’ Register page • Input field for username must have HTML ID ‘username_new’ • Input field for password must have HTML ID ‘password_new’ • Password confirm field must have HTML ID ‘password_confirm’ • Any combination of letters and numbers from 5 to 20 characters must be acceptable for usernames and passwords • There must be one and only one submit button Cart page • Must show all items in cart • Prices must have HTML class ‘item_price’, and this element must have only numeric content (i.e. put symbols such as £ outside the element) • The total price must be shown with HTML ID ‘total_price’, and this element must have only numeric content (i.e. put symbols such as £ outside the element) • Each cart item must have a ‘remove’ button (appearing in the same order on page as the items themselves) of HTML class ‘remove’ • The page must have a clickable element with HTML ID ‘checkout’ which leads immediately to the checkout page • The shopping cart must be persistent with the session, i.e. so long as the user does not leave your site, their cart should maintain its state • The shopping cart should be accessible only to the user who has placed the goods there Checkout page • Must contain a form of HTML class ‘checkout_form’ with field IDs as follows o ‘name’ o ‘card_no’ o ( IDs can be set in forms.py by naming the variable with the desired ID e.g. card_no = wtforms.StringField(…) ) • When clicked, each field should show a hint e.g. ’16 digit card number’, and the HTML class for the hint should be ‘tip’ • The form should be submittable if the name field is filled with some text, and the card_no field contains a 16 digit number • If fields are filled correctly and form is submitted, a page must load with a success message with HTML ID ‘checkout_success’. Do not implement an actual payment mechanism! • If form is submitted with invalid field contents, the form should remain as the user left it with a suitable error message showing for incorrect fields Where HTML IDs and classes have been specified above, these IDs and classes must not be used for any elements other than those described. Overall considerations The website should 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. We will assess this using automated screen grabs of your site taken by the test script as it runs. Advanced Features (worth 20% of the available marks) The above features allow for a mark of up to 80%. A further 20% 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. • 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. To claim marks for these features they must be documented by • a brief description, and • screenshots in the report PDF you submit with your coursework. There are endless possibilities here and you are encouraged to think of your own extensions. Note: 20% is the maximum mark obtainable for any combination of the features in this category. 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: • 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 SQLite or SQL 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.) • 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. for a limited range of components is allowed, however, the final code must be authored by you – i.e. you cannot just use an existing “online shop” module! 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 your report PDF. Note that there should be no need to produce a user guide as it is assumed that the website interface will be self-explanatory. 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. Note that for essential site functionality you are being assessed on the ability of your site to pass automated testing. Sites which appear to work to the user, but do not pass the test script (e.g. because they do not meet the exact page specification above), will not pass this section of the assignment. You are provided with the mock test script so you can ensure for yourself that your site will pass. The visual presentation of your site will be assessed based on the report PDF you provide. However, the automated test script will also take screen grabs of your site as it runs and we may check that these appear similar to those in the PDF. 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 Second Year Group Project and Final Year Project - if you decide to do a web-based project. Good luck! Marks Allocation How assessed Item Marks Automated test; binary marking (each item is all or nothing) At least 4 gallery items 3 All gallery items have name, price, description 8 Items sort correctly 8 User can register 2 User can login 2 Login error correctly shown for failed login 3 After adding items to cart, correct items are present basket 8 Total price is correct 3 Removing item from cart works as expected 6 Basket works correctly for a second concurrent user 6 Checkout form appears when ‘checkout’ element in cart clicked 3 Hints/tips on checkout form appear correctly 4 Checkout form rejects incorrect input and accepts correct input 4 Manual (see criteria below) Consistency of the design and professionalism in visual presentation 20 Extra credit 20 Criteria For Design/Visual Presentation Mark Outstanding (20 marks) Design is above and beyond quality of the average professional shopping site. Excellent (16 marks) Design as would be expected of a professional site. Navigation is intuitive, consistent and self-explanatory, with clear navigational bar providing access to other parts of the site. 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 (12 marks) 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 (5 marks) Means of navigation are confusing; using the site is a chore. Inconsistent design, poor presentation, failure to employ CSS appropriately to control presentation. Text difficult to read e.g. poor contrast, obtrusive background patterns, text too small/large. Examples of Extra Credit Marks Functionality to allow visitors to leave reviews relating to particular items (5) A search facility allowing to find items according to specified search criteria (5) A facility to prepare shipping labels (5) A facility to prepare electronic invoices (5) Exceptional attention to security and safety (up to 5) Exceptional attention to design and information content (up to 5) TOTAL FOR ADVANCED FUNCTIONALITY OR EXCEPTIONAL EFFORT 20