Page 1 of 7 Web Programming COSC2413 / Semester 2, 2020 Assignment 2 (Server-side programming) Assessment Type To be attempted individually. Submit online via Canvas→Assignments→Assignment 2. Marks awarded for meeting requirements as closely as possible. Clarifications/updates may be made via announcements/relevant discussion forums. Due Date Week 11, Friday 09th October 2020, 5:00 pm (note the day & time) Marks 40 1. Overview (you must read this first) You are to attempt this assignment individually, no group work is allowed. You will use PHP and AJAX to create the server- side part of a website; jQuery, Bootstrap and REST will be used to author various components of the website. The tasks are divided into four parts: PA (Pass), CR (Credit), DI (Distinction) & HD (High Distinction). The DI & HD section tasks will require independent research, you will not get straight answers in the course material. While we are happy to assist you on those tasks, most of the work and research must be done by you. This is done on purpose to prepare for you future work and rigours of the IT industry. If you find a specification open to interpretation, post a query identifying the specification in the corresponding discussion board for assignment 2. Software development in real life does not come with a definitive roadmap and flowcharts complete with instructions. More often than not, it is the job of the developer to clarify requirements from the client. For the purpose of this assignment and course, the lecturer is considered as the client. All of us have been affected by the unfortunate COVID-19 scenario and its aftermath. It is often hard to concentrate and study online; but as a student enrolled in this course, it is your responsibility to regularly attend online session(s). 1.1 Watch the online recordings, practise examples from lectures, tute/lab(s) on a regular basis if you cannot attend the live sessions. 1.2 Bring your questions to online discussion board, consultation sessions 1.3 Do NOT start the work on assignment at the last minute. 1.4 Do NOT ask for last minute extensions, these are often rejected. Extensions can only be granted for personal and medical reasons, provided you can supply some evidence. 2. Learning Outcomes This assessment relates to all of the learning outcomes of the course which are: • CLO 1: understand modern languages, constructs used on the Web (such as HTML5, Advanced CSS, JavaScript) • CLO 2: explain the functions of clients and servers on the Web, and describe the strengths and weaknesses of the client-server internet approaches to web design and implementation • CLO 3: program, access, and manipulate data through the adoption of accepted standards, mark-up languages, client-side programming, and server-side programming • CLO 4: design and implement an interactive web site(s) with regard to issues of usability, accessibility and internationalisation • CLO 5: design and implement a client-server internet application that accommodates specific requirements and constraints, based on analysis, modelling or requirements specification Page 2 of 7 3. Assessment details Melbourne-based Adrenaline Buzz Club (ABC) has accepted your first draft of the client-side website. Now they are clearer about the remaining features of the website. They do want you to make some changes in the client-side version so that the final website can cater to the needs to the target audience. These changes are enlisted in the tasks section of the assignment. Upon detailed discussion with stakeholders, business analyst comes up with the following important points of consideration- PLEASE READ THESE CAREFULLY BEFORE YOU BEGIN 3.1 Create a directory a2/ inside ~/public_html/wp and copy all assignment 1 files inside a2/ directory and do not touch a1/ directory as it is being marked. 3.2 All the data must be stored inside JSON files. You will get a ZERO for using other formats such as .txt, .csv, etc . The JSON must be stored one level above ~/public_html/wp/a2/data/ directory for security-purposes. 3.3 Use of databases to save backend data will fetch you a ZERO. You must use JSON files to save backend data. 3.4 All user inputs in form(s) must be sanitized and checked for malicious input to avoid XSS (Cross-site scripting attack) 3.5 You must host your website using the following URL scheme: https://titan.csit.rmit.edu.au/~s1234567/wp/a2/index.php (where s1234567 is your student id and titan can also be jupiter or saturn. Password protect a2/ directory using .htaccess 3.6 Header, footer and navigation bar (any such repetitive code) should be stored inside separate fragment include files- these should be included on all pages using PHP’s require_once() function. Fragment files should be stored inside a2/includes directory 3.7 Bootstrap CDN (Content delivery network) should be used to enable the use of bootstrap library 3.8 If you make use of any 3rd party Bootstrap or jQuery plugin, store them inside a2/plugin directory 3.9 All assets (images | audio | video) files must be stored inside a2/assets directory. All assets must be sourced from royalty free websites such as https://unsplash.com/, https://www.bensound.com/ and https://www.pexels.com/- every obtained must be referenced in your code file. 3.10 It is your job as a programmer that you comment all your code. Marks will be deducted in absence of code commenting. Page 3 of 7 4. Tasks Note: in order to proceed to higher parts, you must attempt or make a reasonable attempt on all of the specifications in the lower part, you must not cherry pick specifications from various parts. As an example, make a reasonable attempt on all of specifications in PA part before proceeding to CR part and so on. PA part [20 marks] a. (3 marks) Add a sitemap to the website. You must use a jQuery plugin to add this sitemap. b. (2 marks) Remove the HTML5 validation from Contact us form and use jQuery validation plugin to perform the validation: all fields must be necessary, email must in proper format. c. (10 marks) Registration form from assignment 1 now requires major changes. Please read the following carefully and implement the following workflow: • Remove all the client-side validation code from assignment 1 and perform all the validations (this means all the validations mentioned in assignment 1 for this form) on server-side via PHP. • Add an additional field Password in the registration form and create a regular expression to validate password field. The password must o start with a capital alphabet, o must have at least 6 characters , o one of these characters must be either !, ^, & and o must end with a number. • Upon successful server-side validation, all the form data must be stored inside a JSON file (users.json). The file must be stored one level inside a2/data directory. • A welcome message must be shown showing the success of registration page and asking the user to log in. d. (4 marks) Add a separate login page OR login form in the header that allows all registered users to log in. The form will check for the validity of user credentials against the data stored in users.json file. User credentials are as follows: Username == email in registration form, Password = password field in registration form Upon successful validation and login, the following workflow must be implemented: • user will land on a brand-new page i.e. myFitness page. This page is only accessible to logged in users. The page must greet user with Welcome message. • myFitness page link will appear in sitemap as well- but if a non-logged in user clicks on this link, they must be asked to log in. Optional implementation: upon successful registration, user may be auto logged in and redirected to myFitness page. e. (1 mark) Implement a logout link on myFitness page. Page 4 of 7 CR part [8 marks] f. (8 marks) You are to create a myFitness page for the logged in user. This will be a fully responsive PHP page. The responsive design must be implemented using Bootstrap. This page is like a logbook of exercises for a user. Step 1: User will be able to choose from any of the following categories of exercises: Note: the above icons are just a suggestion, you may choose an image of your own liking. You must offer a minimum of three categories to the user. This means you only need three categories, as stated, above icons are a suggestion only. Clicking on any of the above icon will offer the user a place to input the amount of exercise done, as an example: if user chooses ‘walking the dog’, they should be able to put the amount walked and for how long, so on and so forth. Step 2: User will then be asked to put in their vital statistics i.e., weight, age and BMI. Step 3: Weekly goal (i.e. how much would the user like to walk or exercise) Step 4: All of the above information must be stored inside a separate file (user_stats.json). This file must be inside a2/data directory. You must store user stats along with their username. Step 5: Finally, the user information may be displayed as follows: Note: the above screenshots are just a suggestion, you may choose to depict information differently Page 5 of 7 DI part [4 marks] g. (4 marks) Add an AJAX enabled search feature on the myFitness page, a screenshot has been suggested below: The search would work on both partial and full texts. It should be case insensitive. As an example, if user adds M and presses Enter key, it should display Motorcycle riding and Mowing the lawn. If user types in Walking, search should return Walking and Walking the dog. Note: for the following (HD section), you will need to perform independent research to think critically. If you have any questions re the specifications, please ask questions via Assignment 2 discussion board. Page 6 of 7 HD part [8 marks] h. (3 marks) You will need to devise an algorithm/code to customise exercise recommendation for the user. Based upon the exercise undertaken by user and weekly activity level, a weekly exercise routine will be generated for them. As an example, if the user has already done a lot of walking, the recommendation could be to do less cardio but more of weight training, so on and so forth This routine will comprise of cardio and weight exercises along with associated video(s). The routine must be displayed in a visually appealing UI (user interface) along with associated media elements. You are encouraged to complete this part with PHP for the programming part and Bootstrap for the visual part. i. (2 marks) Display the Melbourne weather information in the header section of the home page. This information should be fetched via REST call made to a weather API. Based upon the weather, a motivational health related quote must be displayed. This is to motivate the user. j. (3 marks) Add a brand-new page/feature to the website i.e. Results. This responsive page will display the total calories burnt by you while exercising on a current weekly basis. The information must be shown in a visual manner on a calendar like interface. You must use PHP and Bootstrap to create this feature. A screenshot has been suggested below: Page 7 of 7 5. Submission Zip all website files MINUS VIDEO and AUDIO FILES and README.txt file (MUST MENTION your website URL) and submit single zipped archive with .zip extension via Canvas submission link for this assignment. README file must contain the hosted URL of your website. If the website is not functioning on hosted URL or it has not been hosted, you will be marked on your code and in that case, you will only receive 50% of the allocated marks to the task. Make sure that your assignment can run only with the code included in your zip file! In absence of .htaccess file, 10 marks will be deducted from the final score. In absence of include fragment files for header, footer and navigation bar, 5 marks will be deducted from the final score. After the due date, you will have 5 business days to submit your assignment as a late submission. Late submissions will incur a penalty of 10% per day. After these five days, Canvas will be closed, and you will lose ALL the assignment marks. Assessment declaration: When you submit work electronically, you agree to the assessment declaration: https://www.rmit.edu.au/students/student-essentials/assessment-and-exams/assessment/assessment-declaration 6. Academic integrity and plagiarism (standard warning) Academic integrity is about honest presentation of your academic work. It means acknowledging the work of others while developing your own insights, knowledge and ideas. You should take extreme care that you have: • Acknowledged words, data, diagrams, models, frameworks and/or ideas of others you have quoted (i.e. directly copied), summarised, paraphrased, discussed or mentioned in your assessment through the appropriate referencing methods, • Provided a reference list of the publication details so your reader can locate the source if necessary. This includes material taken from Internet sites. If you do not acknowledge the sources of your material, you may be accused of plagiarism because you have passed off the work and ideas of another person without appropriate referencing, as if they were your own. RMIT University treats plagiarism as a very serious offence constituting misconduct. Plagiarism covers a variety of inappropriate behaviours, including: • Contract cheating- paying/asking someone to do your work • Failure to properly document a source • Copyright material from the internet or databases • Collusion between students For further information on our policies and procedures, please refer to: https://www.rmit.edu.au/students/student-essentials/rights-and-responsibilities/academic-integrity 7. Marking Guidelines The marks allocated have been added to each of the tasks. Please read rubrics for details. 8. Consultation sessions (week 8 onwards) Attend these to get feedback, ask questions, raise doubts for assignment 2. The schedule will be announced.
欢迎咨询51作业君
