关于前端:浅谈Rapid-Web-Application

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):
5. User login or authentication
6. User registration
7. Any other page not listed as a part of the front-end prototype.
   Things to Note:
8. 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.
9. 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.
10. Web site creators are not allowed
    Use of Websites such as wix.com are not allowed
11. Pre-made Bootstrap template websites are not allowed
    You must use Bootstrap’s starter template
12. 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
13. Home Page
14. Effective use of Bootstrap’s responsive grid
15. Relevant Bootstrap classes/components
16. Relevant content
17. Relevant HTML elements – header, footer
    Total: 8
18. Other Pages (Event Details, Event Creation, User Booking
    History)
19. Effective use of Bootstrap’s responsive grid
20. Relevant Bootstrap classes/components
21. Relevant content and HTML elements
    Total: 4 X 3 = 12
22. Overall Structure and Style:
23. Clear navigation without broken links
24. Effective use of CSS to keep pages visually
    consistent and appearance as non-vanilla
    Bootstrap
    2
    3
    WX：codehelp