Web Application程序辅导、web，HTML，CSS编程语言讲解
- 首页 >> Java编程 Rapid Web Application Development
Assignment 2: Event Management Web application
Due Date: 2-May-2021, 11:59 PM
In this assignment, you will develop the front-end prototype of your Event Management
Website.
Event Management application: An application that will allow users to post events of a given
type, book tickets for events, comment on those events – take a look at Eventbrite Australia..
Overview
This is an individual assignment. In this assignment you will:
i. Develop the front-end pages that address a few requirements of the Event
Management Web application. Note this is front-end only, no functionality will need
to be coded.
ii. Use HTML, Bootstrap and CSS components to give structure and style to the Event
Management Web application. You must use Boostrap framework.
Part 1: Front-end Prototype
The following subset of requirements (refer to Appendix A) of the application need to be
supported by the prototype. To demonstrate the application requirements, the front-end
prototype needs to support the following:
1. Landing Page/Home Page
a. The landing/home page is the main page of the web application. On this page, the
user is guided to perform different functions supported by the Event management
web application (e.g. using a navigation bar).
b. The landing page should allow user to browse different categories of events and
select an event.
c. The page should indicate the status of the event: Upcoming, Inactive, Booked, or
Cancelled.
2. Event Details Page that allows user to Book an event.
A page that presents the event details, i.e. what a user would see when she selects an event
to view the details. This page should allow the user to book an event. Assuming you have
multiple event listed on your site, you only need to prototype one item page and every item
link will point to that prototype.
a. The page should have an image of the event, description of the item, date of the
event, and other event specific information you have designed.
b. The page should allow user to place Book an event. A modal allowing a user to
enter the quantity may be supported (the design is flexible).
c. The page should allow the user to see existing comments posted by other users on
the event. It should also support a user to post comments on the event.
Note: When person who created the event views the details, they should be able to ‘Update
the event details’. However, you do not need to build this page for the prototype.
3. Event Creation/Update Page
A form that allows user to enter details of the event and create the event.
a. The event creation page should allow the user to enter all the details for the event:
image of the event, description, date of the event, and other event specific details.
b. The form should use relevant element input types – dropdown, text area, text box,
option buttons etc.
4. User Booking History
The user should be able to check all event that he/she booked.
a. Event name and image.
b. Booking Order ID
c. Date when the event was booked.
HTML pages NOT in the scope of this Assignment
The prototype does NOT need to support the following (although it has been listed in the
requirement):
1. User login or authentication
2. User registration
3. Any other page not listed as a part of the front-end prototype.
Things to Note:
1. Navigation between HTML pages:
The navigation between these pages needs to be intuitive and is left to the student to
decide how an end user browses through these pages.
2. Wireframes and HTML pages
The HTML pages do not need to match the wireframes 100%. As any application
development goes through several iterations of constant improvement, there can be
variations. However, you cannot change the chosen topic/item type of your event
management website.
3. Web site creators are not allowed
Use of Websites such as wix.com are not allowed
4. Pre-made Bootstrap template websites are not allowed
You must use Bootstrap’s starter template
5. Bootstrap:
You must make use of Bootstrap’s responsive grid, and classes/components where
relevant. Examples could be - NavBar, Cards, Flex Boxes, and in this case a Modal
Dialog
Part 2: Submission
This is an individual assignment in which you will submit the following:
• a zip file (filename: studentid_prototype_rwad.zip) containing the following folder
structure (as discussed in lectures)
o All HTML files in one directory.
o A separate folder for css (if you are using), and another folder img for the
images your prototype uses.
Markers will evaluate your submission by opening the HTML files in Google Chrome and test
on multiple viewports (browser widths). Please make sure you have taken care of all the
necessary dependencies.
Part 3: Marks Breakdown (25 marks)
No Page Marking
1. Home Page
1. Effective use of Bootstrap’s responsive grid
2. Relevant Bootstrap classes/components
3. Relevant content
4. Relevant HTML elements – header, footer
Total: 8
2. Other Pages (Event Details, Event Creation, User Booking
History)
1. Effective use of Bootstrap’s responsive grid
2. Relevant Bootstrap classes/components
3. Relevant content and HTML elements
Total: 4 X 3 = 12
3. Overall Structure and Style:
1. Clear navigation without broken links
2. Effective use of CSS to keep pages visually
consistent and appearance as non-vanilla
Bootstrap
2
3
Total: 5
Assignment 2: Event Management Web application
Due Date: 2-May-2021, 11:59 PM
In this assignment, you will develop the front-end prototype of your Event Management
Website.
Event Management application: An application that will allow users to post events of a given
type, book tickets for events, comment on those events – take a look at Eventbrite Australia..
Overview
This is an individual assignment. In this assignment you will:
i. Develop the front-end pages that address a few requirements of the Event
Management Web application. Note this is front-end only, no functionality will need
to be coded.
ii. Use HTML, Bootstrap and CSS components to give structure and style to the Event
Management Web application. You must use Boostrap framework.
Part 1: Front-end Prototype
The following subset of requirements (refer to Appendix A) of the application need to be
supported by the prototype. To demonstrate the application requirements, the front-end
prototype needs to support the following:
1. Landing Page/Home Page
a. The landing/home page is the main page of the web application. On this page, the
user is guided to perform different functions supported by the Event management
web application (e.g. using a navigation bar).
b. The landing page should allow user to browse different categories of events and
select an event.
c. The page should indicate the status of the event: Upcoming, Inactive, Booked, or
Cancelled.
2. Event Details Page that allows user to Book an event.
A page that presents the event details, i.e. what a user would see when she selects an event
to view the details. This page should allow the user to book an event. Assuming you have
multiple event listed on your site, you only need to prototype one item page and every item
link will point to that prototype.
a. The page should have an image of the event, description of the item, date of the
event, and other event specific information you have designed.
b. The page should allow user to place Book an event. A modal allowing a user to
enter the quantity may be supported (the design is flexible).
c. The page should allow the user to see existing comments posted by other users on
the event. It should also support a user to post comments on the event.
Note: When person who created the event views the details, they should be able to ‘Update
the event details’. However, you do not need to build this page for the prototype.
3. Event Creation/Update Page
A form that allows user to enter details of the event and create the event.
a. The event creation page should allow the user to enter all the details for the event:
image of the event, description, date of the event, and other event specific details.
b. The form should use relevant element input types – dropdown, text area, text box,
option buttons etc.
4. User Booking History
The user should be able to check all event that he/she booked.
a. Event name and image.
b. Booking Order ID
c. Date when the event was booked.
HTML pages NOT in the scope of this Assignment
The prototype does NOT need to support the following (although it has been listed in the
requirement):
1. User login or authentication
2. User registration
3. Any other page not listed as a part of the front-end prototype.
Things to Note:
1. Navigation between HTML pages:
The navigation between these pages needs to be intuitive and is left to the student to
decide how an end user browses through these pages.
2. Wireframes and HTML pages
The HTML pages do not need to match the wireframes 100%. As any application
development goes through several iterations of constant improvement, there can be
variations. However, you cannot change the chosen topic/item type of your event
management website.
3. Web site creators are not allowed
Use of Websites such as wix.com are not allowed
4. Pre-made Bootstrap template websites are not allowed
You must use Bootstrap’s starter template
5. Bootstrap:
You must make use of Bootstrap’s responsive grid, and classes/components where
relevant. Examples could be - NavBar, Cards, Flex Boxes, and in this case a Modal
Dialog
Part 2: Submission
This is an individual assignment in which you will submit the following:
• a zip file (filename: studentid_prototype_rwad.zip) containing the following folder
structure (as discussed in lectures)
o All HTML files in one directory.
o A separate folder for css (if you are using), and another folder img for the
images your prototype uses.
Markers will evaluate your submission by opening the HTML files in Google Chrome and test
on multiple viewports (browser widths). Please make sure you have taken care of all the
necessary dependencies.
Part 3: Marks Breakdown (25 marks)
No Page Marking
1. Home Page
1. Effective use of Bootstrap’s responsive grid
2. Relevant Bootstrap classes/components
3. Relevant content
4. Relevant HTML elements – header, footer
Total: 8
2. Other Pages (Event Details, Event Creation, User Booking
History)
1. Effective use of Bootstrap’s responsive grid
2. Relevant Bootstrap classes/components
3. Relevant content and HTML elements
Total: 4 X 3 = 12
3. Overall Structure and Style:
1. Clear navigation without broken links
2. Effective use of CSS to keep pages visually
consistent and appearance as non-vanilla
Bootstrap
2
3
Total: 5