Work for this assignment must be submitted by students undergoing reassessment for   CSC-30025. You are strongly advised to revise the CSC-30025 module content before attempting this assignment. This will save you considerable time in the long run. The module tutors will be happy to answer questions related to your revision. If you have any questions or if you get stuck while working on this assignment, please make an appointment to see any of your module tutors. Do not leave this to the last few days before the submission deadline. An indicative marking scheme for this assignment is provided by the university at:

https://www.keele.ac.uk/sas/academicservices/assessment/markingscheme/

I. Introduction:

Many electronic companies all over the country are upgrading their websites to include the latest features from the web technologies that would help their customers to use the electronic products information (like tv, phone, etc) efficiently and help them to make the right choice. The customers can browse through the items and make selection efficiently without visiting the shop.

In this coursework assessment, you would need to develop a electronic products selling website to be used by various customers to be used by various customers and maintained by the administrators. 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. 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, 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  customer  should be  able  open the company webpage and browse various products. For example:

(1) TV, when selected it should also show all the kind ofbreakfast menus available, such as:

(1)(a) Samsung,

(1)(b) LG and

(1)(c) Toshiba.

Similarly, for

(2) Phone, showing:

2(a) iPhone,

2(b) Samsung and

2(c) Huawei.

The item prices are all different.

You should use efficient asynchronous JavaScript and XML (AJAX) for building the electronic company webpage. Their information product brands, models 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). (20%)

2. While designing the electronic 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 of format XXXXXXXXXX (total 10 numeric digits between 0 to 9), Email ID (unique) and a Password. Validation of the email ID and phone number 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 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 electronic company website (as described in II. 1).

Where the user should be able to select at least 1 item and receive its pricing on the screen. Note that on the electronic company webpage II. 1, the user would be able to view the product 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%)

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 (like 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 sections 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.

You should focus your writing on the industry adaptation of web technologies and must not exceed 2000 words, including the title, references and figure and table captions. 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%.

V. Things to submit (make sure that you)

1. Make a .txt text file named with your 8-digit student ID, for example “02215743.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/02215743/)

and save this link in the 02215743.txt text file. During your online 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. 02215743.pdf). Name the zip file according to your 8-digit student ID (e.g. 02215743.zip). 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. 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.