Program: Bachelor of computer application

Class: 2nd year bca ‘A’ section

A PROJECT REPORT ON
“Event Management System”

SUBMITTED BY:
Shreesha Ds
NU23UCA098

Aditya Shetty
NU23UCA007

SUBMITTED TO
Prof. Riyaz
Department of Computer Science

Submitted on:

[1]
 Nitte Institute of Professional Education
Kodakkal,Kannur Post, Mangaluru – 575 007

Bachelor of Computer Application

Mini Project Report

Certificate

This is to certify that Shreesha Ds and Aditya of 2nd year BCA has
satisfactorily completed the mini-project “Event Management
System” in the Department of Computer Science, prescribed by
the
college during the academic year 2024-25.

Prof. Ramamoorty M Prof. Riyaz

Head of the Department Project Guide

Examiners:

1.

2.

[2]
 DECLARATION

We hereby declare that this Mini-Project work entitled “Event

Management System”has been prepared by us during the academic
year 2024 - 2025 under the guidance of Prof. Riyaz Department of
Computer Science,Nitte Institute of Professional Education ,
Mangaluru as the partial fulfillment of BCA degree prescribed by the
college.

We also declare that this mini-project is the outcome of our efforts and
has not been submitted to any other establishments.

Signature
Shreesha Ds
NU23UCA0

Signature
Aditya Shetty
NU23UCA007

[3]
 Table Of Content

Overview

File Structure

Technologies Used

Functionality Breakdown

Add Event (add_event.html)

Display Events (disp_event.html)

Event Details (event_details.html)

Data Flow: LocalStorage Structure

Event Edit Flow Summary

Backend

Styling (style.css)

Conclusion
[4]
 Overview

The Celebration Crew is a web-based event management application

designed to help users efficiently add, view, edit, and delete events. The

application provides a smooth user experience by storing event data

locally using the browser's LocalStorage, eliminating the need for a

backend or server.

The main goal of this project is to provide a simple yet interactive

interface for users to manage their upcoming celebrations, meetings, or

personal events. It allows users to:

Enter event details such as name, date, time, and description.

View all upcoming events in a dynamic table format.

Get real-time countdowns for each event.

Edit or delete previously created events.

View detailed information about a selected event.

The project is built using HTML, CSS, and JavaScript, making it

lightweight and easy to deploy. It serves as a great introduction to front-

end development, DOM manipulation, and client-side data

management.

[5]
 File Structure

The project consists of several HTML, CSS, and JavaScript components

structured to ensure a modular and organized development process. Below
is a breakdown of the key files and their responsibilities:

index.html: Acts as the main homepage for the site. It may contain

navigation to other pages like About, Events, and Add Event.

index2.html: A secondary index that focuses on showcasing or accessing

different types of events.

add_event.html: Contains the form for creating or editing an event. If an

event is being edited, the form pre-fills with existing data.

disp_event.html: Dynamically lists all upcoming events in a table format

with countdowns and options to edit/delete.

event_details.html: Displays detailed information about a single event,

pulled from LocalStorage.

style.css: Handles all UI styling such as colors, fonts, layout, button design,

and responsive formatting.

logo.png: Icon used for branding and shown as the favicon of the web pages.

[6]
 Functionality Breakdown

1. Add Event (add_event.html)

Purpose: Allows users to add or edit event details.
Features:
Input fields for event name, date, time, and description.
A Submit button saves the event in localStorage and redirects to the Display
Events page.
A Clear button resets the form.
Behavior: If editing an event, the form is pre-populated. Submitting saves
the event and redirects the user.

2. Display Events (disp_event.html)

Purpose: Lists all saved events with their details.
Features:
A table showing event date, time, name, and a countdown timer.
Edit and Delete buttons for each event.
Events are sorted by date/time.
Behavior: Events are loaded from localStorage, displayed with real-time
countdowns. Users can edit or delete events.

3. Event Details (event_details.html)

Purpose: Displays detailed information about a specific event.
Features:
Shows the event’s name, date, time, and description.
Edit button for modifying the event.
Back button to return to the events list.
Behavior: Loads event details from localStorage and allows editing or
returning to the events list.
[7]
 Data Flow: LocalStorage Structure

In this application, localStorage is used to store event data persistently

across sessions. The structure of data in localStorage plays a crucial role in
managing events. Here's a breakdown of how data flows and is structured:

1. Storing Events in LocalStorage

Key: events
Value: An array of event objects. Each event contains the following properties:
event_name: Name of the event (String)
event_date: Date of the event (String, in YYYY-MM-DD format)
event_time: Time of the event (String, in HH:mm format)
event_description: A description of the event (String)

2. Storing Selected Event for Viewing (Event Details Page)

Key: selectedEvent
Value: A single event object containing the details of the selected event that
the user wants to view.

3. Storing Event Data for Editing (Edit Event)

Key: editEvent
Value: The event object that is currently being edited.
This object is retrieved when a user selects the Edit button on the Display
Events page.

[8]
 Data Flow: LocalStorage Structure

4. Data Flow:
Add Event Page (add_event.html):
When an event is added or edited, the event data is stored in the events
array in localStorage.
On submission, the event is either appended to or replaces an existing
event in events.
Display Events Page (disp_event.html):
The list of events is fetched from localStorage and displayed.
The user can click on an event to view its details or delete it. Deleting an
event removes it from the events array.
Event Details Page (event_details.html):
The selected event is fetched from localStorage via selectedEvent and its
details are displayed.

5. LocalStorage Cleanup
When an event is edited, it is first removed from the list before being
updated, ensuring that the data remains accurate.
The editEvent key is cleared after submission to avoid unwanted pre-
population of the form.

[9]
 Event Edit Flow Summary

The Event Edit Flow in this application allows users to modify the
details of an existing event. This is facilitated through several key
interactions and localStorage operations to ensure data consistency.
Below is a summarized flow of how the Event Edit process works:

1. Selecting an Event for Editing

The user clicks the Edit button next to an event on the Display Events
page.
The event's data is stored in localStorage under editEvent and removed
from the event list to avoid duplication.

2. Editing Event Details

The user is redirected to the Add Event page, where the form is pre-
populated with the event details.
The user edits the event and submits the form.

3. Saving Changes
The modified event replaces the old version in localStorage.
editEvent is cleared, and the user is redirected back to the Display Events
page, where the updated event appears.

Key Operations:
Fetching the event from localStorage for editing.
Updating the event and saving it back to localStorage.
Clearing editEvent after the update.

[10]
 Styling (style.css)

The CSS file (style.css) provides the visual structure and styling for the
website. Here's a breakdown of key design elements:

Layout and Structure:

The main layout uses a clean and simple structure, with a focus on
readability and organization.
Consistent use of margins, padding, and font styles creates a balanced
and clean design.
Typography:
Headings and text are styled to be bold and legible, ensuring clear
communication of information.
Font colors like white, purple, and black are used for contrast and
visibility.
Buttons:
Buttons are styled with distinct colors to enhance usability. The submit
button has a background color to stand out, while the reset button is
neutral.
Event Cards:
Event boxes use background images with descriptions overlaid. The
use of images enhances the visual appeal and context of each event.
Responsive Design:
The layout is responsive, meaning it adjusts for different screen sizes
(e.g., mobile, tablet).
The overall goal of the styling is to maintain a user-friendly, engaging,
and visually appealing website.

[11]
 Backend
To further enhance the functionality of the event management system, we
include registration and logout pages for both regular users and admins,
along with their respective PHP logic for handling user creation and
session management.

User Registration Flow

Registration Page (user_register.php):
This page provides a form for users to register by providing their
username, email, and password.
The form sends a POST request to the authenticate_user.php script
for validation and storage in the database.
Registering the User (user_register.php - PHP):
The script verifies if the username or email already exists.
If not, it hashes the password using PHP’s password_hash function
and inserts the user's details into the database.
Redirect After Registration:
Upon successful registration, users are redirected to the login page
(user_login.php), where they can log in with their newly created
credentials.

Admin Registration Flow

Admin Registration Page (admin_register.php):
This page provides a form for admins to create a new admin account,
including fields for username, email, and password.
Registering the Admin (admin_register.php - PHP):
Similar to the user registration process, the admin’s credentials are
validated, hashed, and stored securely.
Redirect After Registration:
Admins can log in through the admin_login.php page after their
registration is completed successfully.
[12]
[13]
[14]
 Conclusion

The Event Management System integrates a frontend built with HTML,

CSS, and JavaScript with a PHP backend and MySQL for data storage.
The system allows users to manage and view events while ensuring secure
user authentication and event management.

Frontend Overview:
The frontend includes pages like Home, Events, Add Event, and Display
Events. Users can view, add, edit, and delete events. It also includes a
countdown feature for upcoming events.
Backend Overview:
The PHP backend handles user authentication and event management:
User Authentication: Registration, login, and logout for both users and
admins.
Event Management: Admins can manage events, while users can view
details.

[15]