Objective:

At the end of this assignment, the student should be able to:

(i.)          Produce data-driven web application using client-side and server-side scripting. (P4, PLO3)

(ii.)         Demonstrate dynamic and interactive webpages by adopting current emerging web technologies. (P4, PLO3)

o This website lists societies/clubs that provide official links. You can click on these official links to get some inspiration from their website user interface design and content.

Society/Event management system

Web Prototype

Web System

For  detailed  assessment  criteria,  and  learn  how  marks  are  to  be  awarded,  refer  to  the Marking Rubric as attached with this assignment specification.

Students are required to use MySQL database tool to create an online application database. In  the   database,   example   of   tables   that   can   be   included   are   Participants,   Events, Event_Details, Tickets, and Bookings to store relevant records.

A.  Record Adding

The web pages allow user to add record by entering necessary details. The requirements are as follows:

•    Use   appropriate   GUI   components   to  design  the  web   pages.  Try  to   use  GUI components that can minimize user input and input error whenever possible. Using text fields for all input fields is a very BAD idea.

•    Include input features: -

o Admin to add a new event.

o Participant to register and login.

o Participant to book to join an event / buy ticket.

o Participant complete booking / print ticket.

•    Perform   input  validations  and  confirmation   message  before  data   is  submitted (simple or complex). Display appropriate error message if an input error is detected.

B.  Record Listing

•    Features Includes:

o Event  catalog.  Participant  able  to  browse  the  event  categories  view  the events based on the specific category.

o Participant records and booking list. Admin able to browse and view the full participant record and booking list.

o Ticketing/Booking module. Display the contents of the ticketing system in detail and give the participant the option of updating the ticket/booking by changing the quantity or remove the items.

•    Display a count that indicates the number of records in the list.

•    The output should be NEATLY formatted.

•    Include buttons or hyperlink that allow user to:-

o View Remove all records from the list.

o Navigate to other webpages.

C.   Participant to search event, Admin to search ticketing or booking record

The web page allows participant to enter a target event searches through the event list for matching  event  record.  If  there  is  a  match,  the  details  of  the  matched  record  will  be displayed on the web page. Otherwise, display a message to indicate the event is not found. Admin panel should allow admin to search booking/ticketing details and participant record by specific ticketID or other specific like date or participant name.

The requirements areas follows: -

•    Use   appropriate  GUI  components  to   capture  the   event/ticket   and  display  the matched event/ticket records.

•    Include buttons that allow user to:

o Search the event or ticket record based on the given search specific.

o Navigate to other webpages.

D.  Updating event, participant, and ticket/booking details

UPDATE an existing event, participant, and ticket/booking record. This operation is based on the primary key (EventID, ParticipantID, TicketID) provided.

Create web pages that are able to retrieve and display event information, participant details and ticket/registration details by a search on valid primary key.

Basic requirements include:

•    Update   an   existing   record   based   on  the  primary  key  (EventID,  ParticipantID, TicketID) provided.

•    If  primary  key  is  valid,  display  forms  with  relevant  HTML  input  controls  and  pre- populate  these  controls  with  the  original  record’s  field  values.   Use  appropriate HTML  input  controls  for  each  field  (except  EventID,  ParticipantID,  and  TicketID which should not be changed).

E.   Record deleting

DELETE an existing event, participant, and ticket/booking record.

Basic requirements include:

•    Delete  an  existing  record  based  on  the  primary  key  (EventID,  ParticipantID,  or TicketID/BookingID) provided.

•    Ask for user confirmation before the operation takes place.  Use JavaScript code to achieve this.

Notes :

•    In a  real event system,  is not a wise decision to delete completely the record from database/ system. An alternate way is to hide from front end but still keep the data in database, or provide alternate log data to keep record on deleted data.

F.   Additional Features

•    Covers  additional  features for advanced  users. Additional features should  be very useful and implemented perfectly and completely.

G.  Web design, System Prototype and HTML Form Controls

•    Create a clean, simple, consistent, and informative web site for the society. A good and attractive website gets more traffic and retention to attract event participants, students and public. Use right color, font size and other relevant elements to ensure that visitors easy to view the society information and event details they are looking for.

•    Use the right  HTML controls for validation purpose. The right  HTML controls should be able to minimize the input errors and provide the necessary feedbacks to user if the  inputs  inserted  by  users  are  invalid.  All  the   HTML  controls  should   be  well structured.

•    Demo  a  Complete  System  prototype  which  shows the  complete  usability  and the functioning of the system with all the detailed web pages and user interfaces.

H.  Usability

•   Improve   user   experience   in   event   management   from   browsing  to   confirm   a booking/transaction or/and payment.

o E.g. Create neat and smooth navigation to ensure that participant are able to  locate  information,  register,  book  the  event,  buy  ticket,  and  make payment with minimal click.

o E.g. Add functions which will ease  participant  action  like seating capacity, fast booking, wish list, compare events, event notification, etc.

•   Fulfilled the society and event system need.

•    Able to deploy and used by the society.

I.    Programming Logic and Style

•    The student should develop the online application in logical manner.

•    Codes are well-structured, effective, and well-tested.

•    Codes are indented properly and highly readable.

•    The variable names used should be meaningful.

•    Standard and convention are followed strictly.

•    Comments are used appropriately.

J.   Other General Requirements

•    Try your best to make the online event application easy to use and easy to navigate.

•    Make your  source  codes  easy to  read and  understand.  Use comments to  provide brief  description to  a  complex  logic.  Format  your  source  codes  with  appropriate spaces and line breaks.

•    The  student  is  encouraged  to  implement  the  web  application  using  various  web technologies.  Students  can  use  a  variety  of  third-party  libraries  (e.g.   Bootstrap, jQuery, Font Awesome, etc.) to design the front-end of a web application. Below are some resources from which students can find some third-party libraries useful for front-end design:

o CSS

. Animate.css (https://animate.style/)

. Bootstrap (https://getbootstrap.com/)

. Font    Awesome     (https://fontawesome.com/docs/web/setup/get- started)

. CSS WAND (https://www.csswand.dev/)

o JavaScript

. Chart.js (https://www.chartjs.org/)

. Sweetallert2 (https://sweetalert2.github.io/)

. Dropzone (Dropzone.js)

•    The web application must be supported by all devices and browsers. Each web page should be displayed properly in different screen sizes.