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
0 Partially
Implemented
1 Fully
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