Page 1 of 8 ICOM6034 Website Engineering Group Project Specifications Objective The objective of the group project is to implement a fully-functional Travel Ideas website by using the technologies and the development methodologies introduced in this course. The project will constitute 40% of the course assessment. Technologies and standards involved Classmates might use any one of the following to implement the website. Laravel + jQuery + MySQL; or Ruby on Rails + jQuery + SQLite; or Any other popular client-side and server-side (MVC) frameworks, and DBMS The first two options are recommended. Other standards involved include HTML5, CSS, JavaScript, etc. Background This website is designed for a group of friends to share travel ideas, their past travel experiences and comments/thoughts within their circle. A user can post a new travel idea with the planned destination and schedule. S/he can attach tags to his/her idea and others can search the ideas by using those tags as keywords. The tags are also the keywords that can be used for interacting with other web APIs through service mash-ups in the website. The mash- ups can help provide further information about the user’s planned trips; examples of such information include but are not limited to hotel/flight information, weather, local special events or festivals, catering services, etc. For simplicity, we assume that all registered users belong to the same group of friends, and this website supports a single group of friends only. Specifications A user has to log on (with his/her email address and password) in order to use the website’s functions. A user who has not logged on should be prompted to sign in. An option should also be available for new users to create an account. Upon successful login, the user should see a welcome message with his or her name. The website should include the following functions. Page 2 of 8 1. USER ACCOUNT CREATION Email address, password, and name are required. 2. MANAGE (ADD/DELETE/MODIFY) TRAVEL IDEAS The user can add a new travel idea with title, destination, start date, end date, and tags. A user can edit all information about all travel ideas he/she has created. 3. SEARCHING OF TRAVEL IDEAS Searching by destinations or tags. For destination, users have an option to do a partial search. For example, if “Hong” is used as the search keyword, “Hong Kong” should be part of the matched results (if such entry is present in the database). Search results should have the following information for each entry returned: title of the planned trip, destination, date (MM/YYYY), and number of comments. For all queries, display a total count of matched records. 4. COMMENT ON TRAVEL IDEA Users can comment on their own (or others’) travel ideas. The comment list will be like a Facebook comment section, which implies that AJAX will be used. – http://www.dynamicajax.com/chat.php – http://code.tutsplus.com/tutorials/how-to-create-a-simple-web-based-chat- application–net-5931 All comments should be escaped and with a maximum length of 255 characters. A user viewing the same travel idea will receive new comment updates when someone posts any new comments. The comments should be shown in reverse-chronological order (i.e., latest comments first), while pagination is not necessary. Page 3 of 8 5. DATA VALIDATIONS Data validations are required for user account management and travel idea creation. 6. WEB API MASHUPS TWO modules that perform mash-up with any TWO web APIs relating to traveling or trip (see http://www.programmableweb.com/).** Hint: many web APIs relating to traveling are keyword-based. In our website, the tags, start date, end date and/or destination specified in each travel idea can possibly form those keywords. Content in the comments might be useful for the mash-ups as well. For example (just an example – you don’t have to adopt it; please feel free to propose to use another API if you wish), you may implement a mash-up with the Hotwire Hotel Deal API (a hotel recommendation service): http://www.programmableweb.com/api/hotwire http://developer.hotwire.com A sample usage scenario A user Ben registers a new account. Ben logs in with his email and password. He posts a new Travel Idea “I plan to visit Tokyo Disneyland with my family” with the destination “Tokyo”, start date “April 1, 2020”, end date “April 6, 2020”. He applies two tags to his idea: “Tokyo”, and “Disneyland”. After the travel idea creation, a mash-up widget on the right is automatically created and linked to Hotwire Hotel Deal, querying the hotel information based on the “Tokyo” tag as city name (again, you may propose to use a web API other than Hotwire Hotel Deal if you wish; but if you use the Hotwire API, please register a new developer account and avoid to use the following API key of 6e8zytkk8d3mdrksyqhqf3x3): http://api.hotwire.com/v1/deal/hotel?apikey=6e8zytkk8d3mdrksyqhqf3x3&limit= 10&dest=Tokyo Ben can read the summary in the widget and click on the provided links to get further information. Another mash-up widget is updated at the same time to provide some other additional information about Ben’s planned trip. (… to be continued in the next page …) Page 4 of 8 He posts a new comment “Can anyone suggest where to find weather forecast?” on his travel idea to ask for help from his friends. His friend Karen who has already registered logs in. Karen searches the site by the tag “Disneyland” and finds that Ben already posted a travel idea with this tag. Karen clicks on Ben’s travel idea and views the comments. She posts a comment with a link “you can go to https://www.weather- forecast.com/locations/Tokyo-1/forecasts/latest to check the weather!”. Concurrently, Ben and Karen get the comments as they are viewing the same travel idea. They may continue “chatting” on the same travel idea page. Figure 1: Create a travel idea “I plan to visit Tokyo Disneyland with my Family” Page 5 of 8 IMPORTANT NOTES A project group with 3+ members: The above specifications are designed for groups of two members. For those groups which have more than two members, you will need to propose some additional functions (e.g., more advanced features and/or additional mash-up(s) with external web APIs). A project group with one member only (i.e., the “one-person mode”): You may skip Item (4) (“Comment on travel ideas”) and implement only a single mash-up module (with a single web API) in Item (6) (“Web API mashups”). Other topics and technologies: Other than “travel ideas”, you might propose your own topic that is more familiar to your group members; please discuss with us beforehand and prepare the website background and specifications by yourselves. If you decide to use a technology (e.g., MVC framework, client-side library/framework, DBMS, etc.) other than those recommended ones, please also discuss with us beforehand. Figure 2: Sample layout of the Travel Ideas website. The second mash-up widget (not shown here) might be positioned somewhere under the first widget. Page 6 of 8 Roles of group members All the group members should take part in the system design of the website. One of the members will be the project coordinator, who will send an email to the course TA with the group members’ names and their University ID numbers. The followings are the main “deliverables” for the project. A Group Report (done by the whole group) Implementations and coding (done by individuals) A short individual report (done by individuals) Grading criteria The total mark (40 points) is consisted of the overall project mark (12 points) and the individual mark (28 marks). The overall project mark (12 points) will be given based on the f
ollowing criteria: The Group Report [8 points] Website topic and overview Details of the two web APIs used Technologies used Functional specifications System design descriptions (diagrams and figures where helpful) Database design descriptions (diagrams and figures where helpful) A list and brief descriptions of the modules implemented, and the responsible person for each module (i.e., the work distribution). Usability of the final website [4 points] Features, interface design/layout, bugs (if any). The individual mark (28 points) will be given based on the following criteria: The Individual Report [5 points] List of work done by the individual High-level system design of each module implemented Module description with relevant screenshots Program files developed, and a brief descriptions of their purposes Any other useful information Clarity, completeness; pictures, diagrams, screenshots will be helpful. Page 7 of 8 Implementation of modules [12 points] Correct use and functioning of HTML, CSS, Javascript, jQuery, etc. Laravel MVC / Ruby on Rails MVC Data validations Feature count, ease of use, clarity of user interface. Quality of implementations [8 points] Quality of “separations” in all dimensions that have been discussed in the course. Standard compliance (HTML5) Quality of module designs Clarity, simplicity, maintainability, extensibility. Coding style: readability/naming/program structure/comments Peer evaluation (details to be announced) [3 points] The total mark for each student will be the sum of the group mark and his/her individual mark. Project schedule and late penalty 1. Names of group members sent to TA: Before March 18, 2020 (Note: if you plan to work on your own, please also inform the TA. If we do not hear from you by March 18, we will “pair-up” the remaining students and form the groups for you.) 2. A draft of the group report for TA’s approval (please see the grading criteria for the document structure, you may skip Functional Specification, System Design and Database Design in this draft): Before March 25, 2020 3. Due date of all project deliverables: April 19, 2020 Late penalty: 1 point (out of 40), per day. No submission would be accepted after May 3, 2020. Page 8 of 8 Project deliverables 1. A Group Report 2. The Individual Reports 3. A ZIP file containing all code and media files you have developed/used and the SQL dump of the database with some test data. For instructions on how to create a SQL dump of a database, please refer to the following page. https://www.inmotionhosting.com/support/website/phpmyadmin/export-database- using-phpmyadmin 4. JPG files of screenshots (just in case there are misalignments of the web page caused by different screen resolutions). Remarks Deliverables should be submitted through Moodle on or before the due date. All files must be zipped into a single package and MUST be named using your student ID (e.g., [UID].zip). Please read and observe the University Plagiarism Handbook. Hints The project, if the default topic and technologies are adopted, should not be difficult if you are able to do the assignment. o They share a number of similar features: basic website designs, form validations, database access and searching, user authentication, etc. And, the assignment should be easy if you can do the labs. So, please consider starting with the labs, and make sure that you understand how the model answers work.
