联系方式

  • QQ:99515681
  • 邮箱:99515681@qq.com
  • 工作时间:8:00-23:00
  • 微信:codinghelp2

您当前位置:首页 >> Java编程Java编程

日期:2020-10-10 11:04

WEB 322

Assignment 1

Weighting: 10% of final mark

Due: October 9, 2020 (11:59pm)


Notes for the Student: This Assignment is one of six that is designed to give you practical experience in building Server-Side Web applications using Node.js and Express.  


Background: You will need to have access to an IDE or good text editor.  You will also need a thorough understanding of HTML 5, CSS3, Vanilla JavaScript,  Node JS, Express and the Handlebars templating engine.


Assignment Submission Requirements

●An electronic copy of your work (both the web application and a written report) should be uploaded to the Blackboard by midnight on the deadline date.

●This Assignment WILL NOT BE ACCEPTED VIA EMAIL.

●The written report must be in pdf format and must contain the following :-

○A cover page.

○A table of contents.  

○Screenshots of your website, with relevant descriptions, detailing whether the functionality was met or not met, as specified below.

Assignment Regulations

●This assignment must be done individually.

●Please review Seneca’s policies on Academic Integrity, specifically:

“Each student should be aware of the College's policy regarding Cheating and Plagiarism. Seneca's Academic Policy will be strictly enforced.To support academic honesty at Seneca College, all work submitted by students may be reviewed for authenticity and originality, utilizing software tools and third party services. Please visit the Academic Honesty site on http://library.senecacollege.ca for further information regarding cheating and plagiarism policies and procedures.

.” Thus, ensure that your code or any part of it is not duplicated by another student(s). This will result in a percentage of zero (0%) assigned to all parties involved.

Technical Requirements

●All back-end functionality MUST be done using Node JS and Express.

●Your views MUST be created with Express-Handlebars

Detailed App Specification


AirB&B is a travel website that allows people to book rooms around the world. You have been contracted as a Full Stack developer to emulate the AirB&B website.


The implementation of  the entire functionality for the website will be spanned over 6 Assignments.


In this assignment, you will ONLY focus on building the views for your website/web application. No database connectivity is required for Assignment 1.


REMINDER:

All back-end functionality MUST be done using Node JS and Express.

Your views MUST be created with Express-Handlebars




Specifically, you are ONLY required to implement the following :


Features


Express Web Server Set up

Set up of Routes and implementation of route handlers

Creation of the following views :

●Home Page

●Room Listing Page

●Registration Page



Express web server set up


Create an Express web server that listens to incoming HTTP requests.


Route Handlers Implementation


Ensure that you create route handlers that will direct users to specific views when they navigate to the following routes:

●Home

●Room Listing

●User Registration



Home Page


You are required to build a well designed home page that consists of the following sections:

●Header - The header MUST contain the logo of your AirB&B website and could contain the navigation bar and any other other content you deem necessary.

●A Navigation bar - The navigation bar can be within the header or defined as an entirely new area. It  MUST have links that navigate visitors to  a sign up page.  Please note, instead of creating a separate page for the sign up page, you can render it as modal pop-up boxes. Check :  https://www.airbnb.ca/ for example and inspiration.

●A booking search form- The form can be placed anywhere you deem aesthetically pleasing,the top area of the web page may be the most favourable. The form should be designed similarly to the Figure 1.1  and should capture the following data from the user :

○City in Canada where the user wants to book a room. This should be a drop down list of at least four (4) cities/provinces in Canada

○Check-in Date

○Check-out Date

○No of guests


Figure 1.1



●Promotional Section - This section should present a banner depicting a promotion for your  website .


●Informational Section- For this section you must provide content, images and a video explaining why “AirB&B” is to the visitors/customers.


●Footer  - This section must include footer menu items, social media links, and any other information you deem necessary.



Room Listing page


You are required to build a well designed room listing page that lists 6 sample rooms in a 3 X 2 grid, as shown in the below Figure 1.2 :


Figure 1.2


Note, every room must have an image, title, and price rate per night. This view must also have a header, navigation and footer like the home page.

Registration Page


You are required to build a well designed user registration form as shown in Figure1.3 . This can be implemented as an entirely new page or as a pop-up modal. In the event you implement this as a new page then you must ensure that the page maintains consistency regarding its  structure, header, nav, footer,etc as the home page.

You must add a login form to your website. The login form must contain fields that will allow a user to enter their username and password. You can choose how you want this to be rendered and implemented on your website. You can implement it  as a modal or within an area on your home page or on an entirely separate page.


REMINDER:

All back-end functionality MUST be done using Node JS and Express.

Your views MUST be created with Express-Handlebars


Rubric


Criteria Not Implemented

0Partially

Implemented

1Fully

Implemented

2


Home View

●Header


●Navigation


●Booking search form


●Promotional Section


●Informational Section


●Footer

Room Listing View

●Header


●Navigation


●Room Listing Area


●Footer

Registration View or Popup

●Registration form

●Login form


Overall look and feel


●Overall site is polished


●Used pleasing  typography, color palettes, and imagery


●Color and layout are cohesive throughout the site


●Appropriate use of grids


Poor Average Exceeds


Total : 32 MARKS


THE END


版权所有:编程辅导网 2018 All Rights Reserved 联系方式:QQ:99515681 电子信箱:99515681@qq.com
免责声明:本站部分内容从网络整理而来,只供参考!如有版权问题可联系本站删除。