BCSP 064 1

Enrollment Number: 2003722459 Name: DEBALOY CHATTERJEE

Project Report for BCSP–064 Online Café Hub

INDIRA GANDHI NATIONAL OPEN UNIVERSITY

BACHELOR OF COMPUTER APPLICATIONS (BCA)

BCSP–064 PROJECT REPORT
Online Café Hub

A virtual space to eat and enjoy.
Submitted By:
Enrollment No. : 2003722459
Name : DEBALOY CHATTERJEE
Under Guidance Of : DR. RATTAN K DATTA
INDIRA GANDHI NATIONAL OPEN UNIVERSITY (SCHOOL OF COMPUTER AND

INFORMATION SCIENCE (SOCIS)), (1ST FLOOR, DEC BUILDING, IGNOU, MAIDAN GARHI,
NEW DELHI – 110068)
1
Enrolment Number: 2003722459 Name: DEBALOY CHATTERJEE
Project Synopsis for BCSP-064 Online Café Hub
Table of Content
Introduction 3
Objective 4
Project Category 5
Tools/platform of Project – Hardware and Software 7
Design of Project 8
Data Flow Diagrams 8
Level 0 (Context Level Diagram) 8
Level 1 ( User ) 9
Level 2 ( User ) 10
Entity Relation Diagram 11
Data Structure 12
Number of Modules and Their Description 14
Process Logic of Modules 15
Testing Process 17
GANTT Chart 18
Validation Check 19
Limitations of Project 20
Future Scope of Project 21
Bibliography 22
2
Introduction
Online Café Hub is a website where users can come to spend
time listening to some random music or a video. They can chat
with strangers. They can also order something from the menu
integrated in the website.
To protect the users and provide a safe place, a login system is

at place and, a report module that will log users who have
been reported frequently and ban them based on its
calculations or admin/staff discretion.
The aim of Online Café Hub is to bring people close virtually

and provide a safe place on the internet.
The users can order food through online food delivery services
like Zepto / Zomato / Swiggy. An additional menu will be
provided for users who want to order food from “CAFEDO”, a
local café in my neighbourhood that I want to bring attention
to through this project.
The website contains multiple tables, and chairs around those

tables. A user can click on a chair to join the table that chair
belongs to and participate in the conversation of that table.
3
Objective
This project tries to attain the following objectives:
❖ Provide an aesthetic place to meet new people virtually.
❖ Bring people closer.
❖ Provide a safe virtual space.
❖ Provide a relaxing environment.
❖ Protect people from rude users by banning them by
implementing a report system.
This project allows users to do the following activities:

❖ Login or Register to access the website elements.
❖ Use tokens (everyday 10 is awarded to users who visit the site)
to skip videos/music, and get discount on CAFEDO menu.
❖ Report users with valid reasons.
❖ Chat with people in the table they are joined in.
❖ Buy food by clicking on the MENU.
This project allows the admin to do the following activities:

❖ Add or remove tables or chairs from a table.
❖ Review complaints and reports.
❖ Control number of daily tokens to be given.
❖ Add or remove tokens to/from users with valid reason.
❖ Ban users with valid reason.
4
Project Category
• This project is based on the three-tier architecture, where
the application is divided into three layers:
❖ User Layer:
Provides the user with website interface and access to website
resources. (JSP)
❖ Business Layer:
Implements the business logic on how the user will access the
website resource and chat with other users. (JS and Servlet)
❖ Physical Layer:
Provides handling and validation of data in the database and
accepting client connection, in the backend. (Java)
• Reasons for not using the two-tier architecture:

❖ Applications are bound to the data source. Not secure.
❖ Increases network traffic due to absence of business layer.
❖ Extra load on the server as all the calculations are done on the
server instead of in the business layer.
❖ Difficult to implement incremental improvements.
• Reasons for using JAVA:

❖ Java is perfect for developing large web applications because
of its ability to communicate with large number of systems.
❖ Rich APIs available for free. APIs for networking, I/O, XML
parsing, database connection, utilities and more are available
to Java developers.
❖ Java is highly secure as it has inbuilt security features like
advanced authentication, cryptography and access control.
5
❖ Java supports multi-threading; hence it can manage multiple

users or threads at the same time. This provides a faster
response time to users, less issues, multiple operations, better
performance and faster concurrent access.
❖ Java is easily scalable. Java can adapt to the needs of the web
application. To improve the response time and the
performance of the web app, minimal and simple code can be
added.
• Reasons for using an RDBMS:

❖ Data categorization. DBA can easily categorize and store data
in an RDB that can then be queried and filtered to extract
information for reports.
❖ Accuracy. Data is stored just once, eliminating data
deduplication in storage procedures.
❖ Ease of Use. Complex queries are easy to carry out with SQL.
❖ Collaboration. Multiple users can access the same database.
❖ Security. Direct access to data in tables within an RDBMS can
be limited to specific users.
❖ Data stored can be sorted or indexed at user’s discretion or
direction.
6
Tools/platform of Project – Hardware and Software

This project is developed using HTML, JSP and CSS for page decoration
and structure, JavaScript for client-side validations, and MySQL for
storing data.
Hardware Requirement Specification:

• i3 3.12 or above processor
• 4GB Memory or more
• 500GB Hard Disk or more
• Coloured Monitor
• Keyboard
• Mouse
Software Requirement Specification:

The software which were required for developing the web
application are as follows:
➢ Platform : Microsoft Windows 7 or Higher
➢ Front End : HTML, CSS, JS and JSP
➢ Back End : Java, Servlet and MySQL
➢ Documentation : Microsoft Office 2019
7
Design of Project
Data Flow Diagrams
Level 0 (Context Level Diagram)
8
Level 1 ( User )
9
Level 2 ( User )
10
Entity Relation Diagram
11
Data Structure
Table Name: Users

Column Name Data Type Constraints Description
u_id int(0 to 232) Auto, primary Unique ID of User
key, Unsigned
u_name varchar(20) Not null Name of User
u_email varchar(40) Not null Email of User
u_pass varchar(30) Not null User Password
u_phn varchar(10) Not null Phone Number
u_tokens int(231 to 231+1) Default = 10 Tokens of user
Table Name: Admins

32
a_id int(0 to 2 ) Auto, primary Unique ID of Admin
key, Unsigned
a_name varchar(20) Not null Name of Admin
a_email varchar(40) Not null Email of Admin
a_pass varchar(30) Not null Admin Password
a_phn varchar(10) Not null Phone Number
31 31
a_privilege int(2 to 2 +1) Default = 0 Admin Privilege
* a_privilege = 0 means staff, and 1 means admin
Table Name: Reports

r_id int(0 to 232) Auto, primary Unique ID of Report
key, Unsigned
r_date datetime* Auto Report date
offender varchar(20) Not null Offender’s name
reporter varchar(20) Not null Reporter’s name
reason varchar(100) Not null Reason for reporting
action varchar(20) Default = “----” Action taken by staff
*datetime range: '1970-01-01 00:00:01.000000' to '2038-01-19 03:14:07.999999'
12
Table Name: Feedback

32
f_id int(0 to 2 ) Auto, primary Unique ID of Feedback
key, Unsigned
f_date datetime* Auto Feedback date
u_id varchar(20) Not null User’s name
message varchar(100) Not null Reason for reporting
*datetime range: '1970-01-01 00:00:01.000000' to '2038-01-19 03:14:07.999999'
Table Name: Tables

t_id int(0 to 232) Primary key, Unique ID of a table
Unsigned
chairs int(0 to 232) Not null, Number of chairs
Unsigned
available int(0 to 232) Unsigned Available chairs
13
Number of Modules and Their Description
1. User Login
2. User Registration
3. Field Validation
4. User Management
5. Token Management
6. Table Management
7. Feedback Management
8. Report Management
14
Process Logic of Modules
This project is based on the multi-user approach where multiple

people can access and use the application simultaneously. For such,
each user is given limited privilege depending upon whether they are
customer, staff or admin. The roles are:
User – Can access the website and sit at a table to chat with others,
order food from the menu, report other users or give feedback.
Staff – Can review the reports and feedback and take appropriate
actions.
Admin – Can change café configuration and take actions against

reported users.
1. User Login Module

This module is the very first module which checks the user credentials
with the database and gives back appropriate response. The café is not
accessible if the user is not a registered member. This maintains and
ensures the security aspect of the project.
2. User Registration Module

This module provides users to register themselves to the café database.
All users are by default granted the User privilege. Only the admin can
make a user a Staff.
3. Field Validation Module

This module checks the form fields of Login Page, Registration Page,
Feedback Page and Report Page on the client side before any data is sent
to the server to commit to the database. This is a form of business logic
that exists to make the server run smoothly without any issue and also
provides security checks.
15
4. User Management Module

This module is accessible by the Admin only. This allows the Admin to
modify user details such as deleting a user or ban someone in the case
of many reports regarding that user.
5. Token Management Module

This module is accessible by the Admin only. This allows the Admin to
change the daily token limit or modify the tokens on the menu.
6. Table Management Module

This module is accessible by the Admin only and allows the Admin to
change table and chair configuration of the café by modifying the Tables
database table.
7. Feedback Management Module

This module is accessible by the Staff and Admin only and allows them
to review the feedbacks from the database.
8. Report Management Module

This module is accessible by the Staff and Admin only and allows them
to review the reports submitted by users. Appropriate actions can be
taken towards the user who reported it if it is a false one or the user who
was being reported.
16
Testing Process
Whitebox testing method would be followed as the developer

will be testing each unit and module. He will be performing the
integration test as well.
Since the project is done by a single person, that is, the

developer of the project, they have complete coding
knowledge about the project and hence the majority of the
tests will be conducted by them.
The project guide will be performing the Blackbox testing

method to test the system during the iterations of
development.
Alpha testing will be done at the developer’s site and beta test
will begin once the project has been deployed for testing on
the server.
17
GANTT Chart
Week 1 to Week 4:
Week 5 to Week 8:
Week 9 to Week 10:
18
Validation Check
❖Checking of duplicate user by checking their email and

phone number in the database.
❖User Id, Admin Id, Staff Id, Report Id, Feedback Id, Dates
are automatically generated.
❖Encryption of user, admin and staff passwords to ensure

security aspect of the system.
❖Unauthorized users or banned users cannot access the

system as the details will be checked in the backend
before anyone can access the website resources.
❖SQL Injections will be checked thoroughly and will be

taken care off in the backend as well as in the frontend in
case of invalid form submission.
❖Overflow of data is also checked by the field validation

module. Hence, the system is secure.
❖Users will be redirected to the food delivery service they

choose at the menu. Payment will be handled by those
services on their site.
19
Limitations of Project
❖Can handle only limited number of users which is equal

to the number of chairs available.
❖No payment facility through tokens is at place. Users will

be redirected to the food delivery service they choose.
20
Future Scope of Project
This project is designed and developed such that modifications

can be done easily and additional modules can be added without
much difficulty.
The query support is made so that it can handle advanced and

complex queries.
The project will be further developed to provide more features

like mobile support, better token usage, GUI modifications, etc.
Security module will be modified to ensure user data security to

the maximum quality.
Better menu system will be added with better token usage.

Additional changes like random video/music support will be
made using YouTube API.
21
Bibliography
Websites:
• www.javatpoint.com
• www.tutorialspoint.com
Reference Books (Java, Servlet, JDBC and JSP):

• Joel Murach & Andrea Steelman: Murach's Java Servlets and JSP
(3rd Edition), 9th June 2014
• Kathy Sierra, Bryan Basham & Bert Bates: Head First Servlets and
JSP (2nd Edition), 4th April 2008
• Kathy Sierra, Trisha Gee & Bert Bates: Head First Java (3rd Edition),
20th May 2022
• IGNOU Blocks
Reference Books (MySQL):

• Joel Murach: Murach's MySQL (3rd Edition), 22nd March 2019
• MySQL 8.0 Reference Manual
22
Project Title
2
Table of Contents
Table of Figures ...................................................................................................... 6

1. Introduction ..................................................................................................... 8
1.1 Background Information................................................................................ 8
1.2 Brief Description ..........................................................................................10
1.3 Project Category ..........................................................................................12
1.4 Scope of Project............................................................................................15
1.5 Report Structure ..........................................................................................17
2. Objectives ........................................................................................................20
3. Tools / Environment Used ...........................................................................22
3.1 Development Tools / IDEs ...........................................................................22
3.2 Programming Languages ..............................................................................22
3.3 Frontend Technologies .................................................................................22
3.4 Relational Database Management System ....................................................23
3.5 Operating System .........................................................................................24
3.6 Browsers Used for Testing ............................................................................24
4. Analysis Document ........................................................................................25
4.1 Requirement Analysis ...................................................................................25
4.1.1 Functional Requirements .......................................................................25
4.1.2 Non-Functional Requirements ...............................................................26
4.2 Requirement Gathering Techniques Used ....................................................27
4.3 Data Flow Diagrams ....................................................................................28
4.3.1 Context Level Diagram (Level – 0)........................................................28
4.3.2 Data Flow Diagram (Level – 1) .............................................................29
4.3.3 Data Flow Diagram (Level – 2) .............................................................30
4.4 Entity Relationship Diagram........................................................................31
4.5 Use Case Diagram ........................................................................................32
4.6 Gantt Chart Visualization ............................................................................ 33
3
4.7 Data Dictionary............................................................................................34

4.7.1 Data Dictionary for Users Table ............................................................34
4.7.2 Data Dictionary for Admins Table ........................................................34
4.7.3 Data Dictionary for Tables Table ..........................................................35
4.7.4 Data Dictionary for Reports Table ........................................................35
4.7.5 Data Dictionary for Feedback Table......................................................36
4.7.6 Data Dictionary for User Ban Log Table ...............................................36
4.7.7 Data Dictionary for Token Log Table ...................................................37
4.7.8 Data Dictionary for Table Log Table ....................................................37
4.7.9 Data Dictionary for Unauthorized Table ...............................................38
5. Design Document ...........................................................................................39
5.1 Introduction to The Design Phase ................................................................39
5.2 System Architecture .....................................................................................41
5.2.1 Components of the System ....................................................................41
5.2.2 Interaction Between Components ..........................................................43
5.3 Modularization Details .................................................................................44
5.4 Data Integrity & Constraints .......................................................................45
5.5 Database Design ...........................................................................................48
5.5.1 Database Design Methodology ...............................................................48
5.5.2 Database Schema ...................................................................................49
5.5.3 Database Normalization .........................................................................49
5.5.4 Database Indexing .................................................................................50
5.5.5 Database Security ..................................................................................50
5.6 Logic Design of Procedures ..........................................................................51
5.6.1 Authentication / Login Procedure .........................................................51
5.6.2 Token Management Procedure ..............................................................52
5.6.3 Table Management Procedure ...............................................................53
5.6.4 User Management Procedure .................................................................53
5.6.5 Report View Procedure ..........................................................................54
4
5.6.6 Feedback View Procedure ......................................................................55

5.6.7 Chat WebSocket Procedure ...................................................................55
5.6.8 Reporting Procedure ..............................................................................56
5.6.9 Feedback Procedure ...............................................................................56
5.6.10 User Details Update Procedure ..............................................................57
5.6.11 Contact Procedure .................................................................................58
5.6.12 Logout Procedure...................................................................................58
6. Program Code .................................................................................................59
6.1 Introduction to The Implementation Phase .................................................59
6.2 File Structure ...............................................................................................61
6.3 Well Indented Code with Comments & Description .....................................64
6.4 Error Handling & Parameter Passing Techniques ...................................... 197
6.4.1 Error Handling..................................................................................... 197
6.4.2 Parameter Passing Techniques ............................................................ 197
7. Testing............................................................................................................ 198
7.1 Introduction to The Testing Phase ............................................................ 198
7.2 Testing Approach ....................................................................................... 199
7.3 Test Case Design & Execution ................................................................... 201
8. Input & Output Screens ............................................................................. 210
9. Implementation of Security........................................................................ 225
9.1 User Authentication and Authorization ..................................................... 225
9.2 Encryption and Decryption Techniques Used............................................. 228
9.3 Secure Transmission of Data to The Sever................................................. 229
10. Limitations of The Project ...................................................................... 230
11. Future Scope .............................................................................................. 231
12. Bibliography ............................................................................................... 232
12.1 Websites .................................................................................................. 232
12.2 Books ...................................................................................................... 232
5
Table of Figures
Figure 1 – Context Level (Level 0) Data Flow Diagram of Online Café Hub............28
Figure 2 – Data Flow Diagram (Level 1) of Online Café Hub ...................................29
Figure 3 – Data Flow Diagram (Level 2) of Online Café Hub ...................................30
Figure 4 – Entity Relationship Diagram for Online Café Hub ..................................31
Figure 5 – Use Case Diagram of Online Café Hub ....................................................32
Figure 6 – GANTT Chart (Week 1 – Week 4) .......................................................... 33
Figure 9 – Interaction Between Different Components of Online Café Hub ..............43
Figure 10 – Home Page (View 1) ............................................................................ 210
Figure 11 – Home Page (View 2) ............................................................................ 210
Figure 12 – Home Page (View 3)............................................................................. 211
Figure 13 – About Page (View 1) ............................................................................ 211
Figure 14 –About Page (View 2) ............................................................................. 212
Figure 17 – Menu Page (View 1) ............................................................................. 213
Figure 21 – Login Page............................................................................................ 215
Figure 22 – Login Page (Field Validation) .............................................................. 216
Figure 23 – Login Page (Valid Registration) ........................................................... 216
Figure 24 – Login Page (Invalid Registration) ........................................................ 217
Figure 25 – Login Page (Invalid Login) ................................................................... 217
Figure 26 – Cafe Page ............................................................................................. 218
Figure 27 – Chatroom Page ..................................................................................... 218
Figure 28 – Report Page.......................................................................................... 219
Figure 29 – Report Page (Invalid Values) ............................................................... 219
Figure 30 – Report Page (Viewing a long report reason) ........................................ 220
Figure 31 – Feedback Form ..................................................................................... 220
Figure 32 – My Account Page (View 1) .................................................................. 221
Figure 33 – My Account Page (View 2) .................................................................. 221
Figure 34 – Token Management Page ..................................................................... 222
Figure 35 – Table Management Page ...................................................................... 222
6
Figure 36 – User Management Page ........................................................................ 223

Figure 37 – Report Page (Admin View) .................................................................. 223
Figure 38 – Feedback Page (Admin View) .............................................................. 224
7
1. Introduction
1.1 Background Information
I N today's fast-paced and interconnected world, the importance of community and
meaningful connections cannot be understated. However, finding a safe and
comfortable space to engage with others, especially strangers, can often be a challenge.
In an effort to bridge this gap, the concept of the "Online Cafe Hub" was born.
The Online Cafe Hub aims to provide a unique online platform that serves as a virtual
space for individuals to engage in friendly conversations with strangers while also
facilitating the ordering of food from a local cafe. This project not only promotes the
local cafe but also creates a welcoming environment where people can come together
to share their thoughts, experiences, and ideas.
At its core, the Online Cafe Hub seeks to recreate the warm and inviting atmosphere
of a physical cafe in a virtual setting. By combining the social aspects of a chat
application with the convenience of online food ordering, the project strives to offer a
comprehensive experience that caters to the needs of both cafe enthusiasts and those
seeking to connect with others.
8
By leveraging the power of technology and the growing demand for virtual
socialization, the Online Cafe Hub aims to revolutionize the way people connect and
experience cafes. Whether it's a desire for stimulating conversations, a craving for
delicious food, or simply a need for social interaction, this project strives to fulfil these
needs while promoting a sense of belonging and supporting local businesses.
Through the creation of the Online Cafe Hub, the vision is to build a vibrant online
community that thrives on meaningful connections, promotes local businesses, and
fosters a sense of togetherness, all within the virtual walls of a cafe-like environment.
9
1.2 Brief Description
T
HE "Online Cafe Hub" is a website that allows you to have conversations with
new people while also ordering food from a local cafe called "CAFEDO". When
you visit the website, you can create an account or log in with your existing details.
Once logged in, you can explore the menu of CAFEDO and choose the items you want
to order.
To make things more interesting, you can join virtual tables where you can chat with
other users just like you would in a real cafe. If you come across someone who is
behaving offensively, you can report them, and the website will take appropriate action
to maintain a friendly environment.
If you have any feedback about your experience, the food, or anything else, you can
submit it to help improve the website and the cafe's services. Additionally, you have
the option to update your account details like your username or password as needed.
In summary, the Online Cafe Hub is a place where you can talk to new people, order
food from CAFEDO, report offensive behaviour, give feedback, and manage your
10
account information. It aims to create a safe and enjoyable online space that promotes
social interaction and supports local businesses.
11
1.3 Project Category
T HIS project is based on the three-tier architecture, where the application is
divided into three layers:
• User Layer: Provides the user with website interface and access to website
resources. (JSP)
• Business Layer: Implements the business logic on how the user will access the
website resource and chat with other users. (JS and Servlet)
• Physical Layer: Provides handling and validation of data in the database and
accepting client connection, in the backend. (Java)
Reasons for not using the two-tier architecture:
• Applications are bound to the data source. Not secure.
• Increases network traffic due to absence of business layer.
• Extra load on the server as all the calculations are done on the server instead
of in the business layer.
• Difficult to implement incremental improvements.
12
Reasons for using Java:
• Java is perfect for developing large web applications because of its ability to
communicate with large number of systems.
• Rich APIs available for free. APIs for networking, I/O, XML parsing,
database connection, utilities and more are available to Java developers.
• Java is highly secure as it has inbuilt security features like advanced
authentication, cryptography and access control.
• Java supports multi-threading; hence it can manage multiple users or threads
at the same time. This provides a faster response time to users, less issues,
multiple operations, better performance and faster concurrent access.
• Java is easily scalable. Java can adapt to the needs of the web application. To
improve the response time and the performance of the web app, minimal and
simple code can be added.
Reasons for using an RDBMS:
• Data categorization. DBA can easily categorize and store data in an RDB
that can then be queried and filtered to extract information for reports.
13
• Accuracy. Data is stored just once, eliminating data deduplication in storage
procedures.
• Ease of Use. Complex queries are easy to carry out with SQL.
• Collaboration. Multiple users can access the same database.
• Security. Direct access to data in tables within an RDBMS can be limited to
specific users.
• Data stored can be sorted or indexed at user’s discretion or direction.
14
1.4 Scope of Project
T
HE "Online Cafe Hub" project aims to create a comprehensive website that
provides users with a platform to engage in enjoyable conversations with
strangers while also allowing them to order food from a local cafe. The key elements
of the project scope include integrating a chat module and food ordering system into
a seamless website experience.
Users will have the opportunity to initiate and participate in conversations with
strangers through the chat module. Simultaneously, they can explore the menu of the
local cafe and place their desired food orders. This integration of chatting and food
ordering functionalities will create a unique and immersive experience for users,
combining the social aspect of conversations with the convenience of online food
ordering.
The website will also incorporate features such as reporting, feedback, and user
credential management. Users will have the ability to report offensive behaviour or
inappropriate content encountered during their conversations, ensuring a safe and
respectful environment. Additionally, a feedback submission mechanism will allow
users to share their experiences, provide suggestions, and offer feedback on the cafe's
15
offerings and the overall functionality of the website. Furthermore, users will have the
flexibility to update their account credentials, including their username, password, and
contact information, providing them with autonomy and personalization options.
A user-friendly interface will be designed to enhance the overall user experience. Clear
instructions and user guidance will be implemented to facilitate easy navigation and
interaction with the website. The layout and organization of the website will be logical
and intuitive, ensuring that features and functionalities are easily accessible and user-
friendly.
Considering future growth and increasing user demands, the project will be developed
with scalability in mind. A flexible architecture will be designed to accommodate
potential additional features and effectively handle a growing user base.
To ensure the security and privacy of user information, robust security measures will
be implemented. Techniques such as password encryption in the database will be
utilized to safeguard sensitive user credentials. Best practices for data security will be
followed to mitigate potential cyber threats and vulnerabilities, ensuring a secure
environment for users.
16
1.5 Report Structure
T HE purpose of this project report is to document the development of "Online
Café Hub", The report is structured as follows:
• Chapter 1: Introduction - This chapter provides an overview of the project,
its purpose, and its scope.
• Chapter 2: Objectives - This chapter outlines the objectives of the project.
• Chapter 3: Tools/Environment Used - This chapter lists the hardware and
software tools and environment used during the development of the project.
• Chapter 4: Analysis Document - This chapter describes the software
engineering concepts used during the analysis phase of the project. It includes
the Software Requirements Specification (SRS), Entity-Relationship Diagrams,
Data Flow Diagrams, and the Data Dictionary.
• Chapter 5: Design Document - This chapter describes the software
engineering concepts used during the design phase of the project. It includes
17
details on Modularization, Data Integrity and Constraints and Procedural
Design.
• Chapter 6: Program Code - This chapter presents the program code for the
project. It includes a detailed specification of the code, comments and
descriptions, and complete error handling.
• Chapter 7: Testing - This chapter describes the test case designs used for
Unit Testing, Integration Testing, and System Testing.
• Chapter 8: Input and Output Screens - This chapter presents screenshots
of the Input and Output screens of the software.
• Chapter 9: Implementation of Security - This chapter describes the
security measures implemented for the software developed.
• Chapter 10: Limitations of the Project - This chapter discusses the
limitations of the project, including any issues encountered during the
development phase.
18
• Chapter 11: Future Application of the Project - This chapter discusses
the future application of the project, including any potential enhancements or
upgrades that could be made.
• Chapter 12: Bibliography - This chapter provides a list of all the sources
used during the development of the project.
19
2. Objectives
This project tries to attain the following objectives:
• Provide an aesthetic place to meet new people virtually.
• Bring people closer.
• Provide a safe virtual space.
• Provide a relaxing environment.
• Protect people from rude users by banning them by implementing a report
system.
This project allows users to do the following activities:
• Login or Register to access the website elements. Use tokens (everyday 10 is
awarded to users who visit the site) to skip videos/music, and get discount on
CAFEDO menu.
• Report users with valid reasons.
• Chat with people in the table they are joined in.
• Buy food by clicking on the MENU.
20
This project allows the admin to do the following activities:
• Add or remove tables or chairs from a table.
• Review complaints and reports.
• Control number of daily tokens to be given.
• Add or remove tokens to/from users with valid reason.
• Ban users with valid reason.
• Review feedbacks given by users.
21
3. Tools / Environment Used
T HE following tools and technologies were used in the development of the Online
Café Hub website:
3.1 Development Tools / IDEs
• Eclipse IDE for Enterprise Java and Web Developers: This is a powerful
software tool designed for developers working on Java and web-based projects.
It provides a user-friendly integrated development environment with features
such as code editing, debugging, syntax highlighting, and project management.
3.2 Programming Languages
• JSP: It is a server-side scripting language that combines Java code with HTML
or XML mark-up to generate dynamic content. JSP pages are compiled into
Java servlets, which are then executed on the server.
3.3 Frontend Technologies
• HTML: This is the standard mark-up language used to create web pages. It is
used to structure content and define the layout of a web page.
22
• CSS: This is a stylesheet language that is used to describe the presentation and
visual appearance of a document written in HTML or XML. It provides a set
of rules that define how elements should be displayed, including properties like
layout, colours, fonts, and animations, allowing for enhanced design and layout
control of web pages.
• JavaScript: JavaScript is a dynamic programming language that is widely
used to enhance the user interface of web applications. In this project,
JavaScript is used extensively for form validation, WebSocket connectivity and
custom alert dialog box.
3.4 Relational Database Management System
• MySQL: This is an open-source relational database management system
(RDBMS) widely used for storing and managing structured data. It provides a
robust and scalable platform for creating, organizing, and accessing databases.
MySQL supports SQL (Structured Query Language) and offers features such as
data integrity, transaction support, and high performance, making it popular
among developers and organizations.
23
3.5 Operating System
• Windows 10: This is the most used version of the Windows operating system,
and is widely used in both Personal and Professional environments. It provides
a stable and reliable platform for developing and testing software.
3.6 Browsers Used for Testing
• Google Chrome: Google Chrome's DevTools are known for their extensive
feature set. It includes powerful debugging capabilities, performance profiling,
and network analysis tools. Chrome's unique features like Device Mode for
responsive design testing and Lighthouse for auditing web application
performance make it a go-to choose for developers, debuggers, and testers.
• Microsoft Edge: Microsoft Edge offers a seamless integration with Windows
10 and provides a rich set of developer tools. Its unique features include the
Emulation Mode, which enables testing across different devices and browsers,
and the built-in WebDriver support for automated testing. Edge is great for
developing, debugging, and testing web applications within the Windows
ecosystem.
24
4. Analysis Document
4.1 Requirement Analysis
O
UR primary objective is to provide a web-based platform where users can login
or register and have access to the chatting and other feature of the website. To
achieve this objective, we have identified the following requirements:
4.1.1 Functional Requirements
• The system should allow users to register with their personal details, including
their name, email address, phone number, and password.
• The system should transfer sensitive user data over a secure connection to
protect user data.
• The system should store sensitive user data like password in encrypted form.
• The system should provide users the option to report other users who behave
inappropriately.
• The system should provide a feedback form where users can give suggestions
for the admin and staff to look over.
• The system should provide a chatroom when a table with empty seats is clicked
by a user.
25
• The system should provide various management services to admin / staff like
Token Management, Table Management, User Management, Report View, and
Feedback View.
4.1.2 Non-Functional Requirements
• The system should be user-friendly and easy to navigate.
• The system should be able to handle multiple users concurrently.
• The system should be accessible from a variety of devices and web browsers.
• The system should be secure.
• The system should display appropriate and absolute Error or Success messages
so that the user is not confused.
26
4.2 Requirement Gathering Techniques Used
R EQUIREMENT gathering is an important step in the software development life
cycle, as it lays the foundation for the entire project. The following techniques
were used to gather requirements for the Online Café Hub project:
• Interviews: Interviews with different age group people, owners and workers of
cafes, professors and project guide to understand their expectations and needs.
• Focus Groups: Focus groups were conducted with selected group of people of
different age group and working class to understand everyone’s needs.
• Online Surveys: Forums were created on Quora and Reddit to gather needs
of people from around the world.
• Brainstorming Sessions: Multiple brainstorming sessions with project guide
and fellow students to generate ideas for potential features, functionalities and
design of the platform based on the insights gathered from Interviews, Focus
Groups and Online Surveys.
27
4.3 Data Flow Diagrams
4.3.1 Context Level Diagram (Level – 0)
Figure 1 – Context Level (Level 0) Data Flow Diagram of Online Café Hub
28
4.3.2 Data Flow Diagram (Level – 1)
Figure 2 – Data Flow Diagram (Level 1) of Online Café Hub
29
4.3.3 Data Flow Diagram (Level – 2)
Figure 3 – Data Flow Diagram (Level 2) of Online Café Hub
30
4.4 Entity Relationship Diagram
Figure 4 – Entity Relationship Diagram for Online Café Hub
31
4.5 Use Case Diagram
Figure 5 – Use Case Diagram of Online Café Hub
32
4.6 Gantt Chart Visualization
Figure 6 – GANTT Chart (Week 1 – Week 4)
33
4.7 Data Dictionary
4.7.1 Data Dictionary for Users Table
Sr. No. Attribute Name Data Type Data Format Constraint Description
1 u_id int integer primary Unique ID of user
key
2 u_name varchar string not null Name of user
3 u_email varchar string not null Email of user
4 u_pass varchar string not null Password of user
5 u_phn varchar string not null Phone Number of
user
6 u_tokens int integer default 10 User tokens
7 banned varchar string default Whether user is
false banned or not
8 violations int integer default 0 User violations
4.7.2 Data Dictionary for Admins Table
1 a_id int integer primary Unique ID of
key admin
2 a_name varchar string not null Name of admin
3 a_email varchar string not null Email of admin
4 a_pass varchar string not null Password of admin
5 a_phn varchar string not null Phone Number of
admin
6 a_privilege int integer default 0 Admin clearance
8 violations int integer default 0 Staff violations
34
4.7.3 Data Dictionary for Tables Table
1 t_id int integer primary Unique ID of a
key table
2 chairs int integer not null Total no. of chairs
in a table
3 available int integer default 0 Available chairs
4 inuse int integer default 0 Chairs in use
4.7.4 Data Dictionary for Reports Table
1 r_id int integer primary Unique ID of a
key report
2 r_date datetime yyyy-mm-dd default Date & time the
hh:mm:ss current report was made
timestamp
3 offender_id int integer foreign key Unique ID of
offender from users
table
4 reporter_id int integer primary Unique ID of
key reporter from users
table
5 reason varchar string not null Reason for making
the report
6 action varchar string default Action taken by
“pending” admin
35
4.7.5 Data Dictionary for Feedback Table
1 f_id int integer primary Unique ID of
key feedback
2 u_id int integer foreign key Unique ID of user
3 message varchar string not null Feedback message
4 f_date datetime yyyy-mm-dd default Date & time of
hh:mm:ss current giving the feedback
timestamp
The rest of the Data Dictionaries are for tables that log certain actions:
4.7.6 Data Dictionary for User Ban Log Table
1 id int integer primary Unique ID of log
key
2 a_id int integer foreign key Unique ID of
admin making the
action
being acted against
4 action varchar string not null Whether user was
banned or
unbanned
5 reason varchar string not null Reason for the
action taken
6 date datetime yyyy-mm-dd default Date & time when
hh:mm:ss current the action was
timestamp taken
36
4.7.7 Data Dictionary for Token Log Table
key
admin making the
action
being acted against
4 tokens int integer not null No. of tokens taken
or given
5 reason varchar string not null Reason for the
action
timestamp taken
7 action varchar string not null Whether tokens
were added or
removed
4.7.8 Data Dictionary for Table Log Table
key
admin making the
action
3 t_id int integer foreign key Unique ID of table
being acted upon
4 action varchar string not null Whether chairs are
being added or
removed
5 chairs int integer not null No. of chairs
timestamp taken
37
4.7.9 Data Dictionary for Unauthorized Table
key
admin doing
unauthorized work
3 page varchar string not null Where the admin
did unauthorized
work
hh:mm:ss current the unauthorized
timestamp work was done
38
5. Design Document
5.1 Introduction to The Design Phase
D ESIGN phase of the Online Café Hub project involves creating a blueprint for
the website's layout, navigation, and functionality. This phase builds on the
analysis phase and incorporates all the requirements and specifications gathered
during that phase.
In this phase, we will create detailed design specifications for the various modules of
the website. This will include creating wireframes, user interfaces, and prototypes that
will guide the development of the website.
The design phase is critical because it sets the foundation for the entire project. A
well-designed website will not only meet the functional requirements but also provide
an excellent user experience to the website's users. Therefore, it is essential to get the
design phase right to ensure the project's success.
39
In the following sections of this document, we will detail the design specifications for
each module of the Online Café Hub website. We will also describe how these modules
will integrate and function together to create a seamless user experience.
40
5.2 System Architecture
S
YSTEM architecture of Online Café Hub describes the overall design of the
system, including its components and their interactions. The system is designed
as a web application, which provides an online platform for users to come together and
enjoy the comfort of togetherness while being miles apart, getting to socialize and enjoy
a nice meal with strangers.
5.2.1 Components of the System
• User Interface: The user interface is the front-end of the system, which is
accessible through a web browser. It provides a graphical interface for users to
interact with the system and perform various tasks, such as joining tables to
chat, ordering food, browsing menu, reporting a user and giving feedback.
• Server: The server is the back-end of the system, which handles the processing
and storage of data. It receives requests from the user interface, performs the
necessary computations, and returns the results to the user interface. It is also
responsible for routing the requests to appropriate web pages. It also stores and
retrieves data from the database.
41
• Database: The database is the central repository of the system, which stores
all the data related to the users, tables, reports, feedbacks, logs. It is used by
the server to store and retrieve data as per the requirements of the user
interface.
42
5.2.2 Interaction Between Components
Figure 9 – Interaction Between Different Components of Online Café Hub
The user interface sends requests to the server, which processes the requests and sends
back the results to the user interface. The server communicates with the database to
store and retrieve data as per the requests received from the user interface.
43
5.3 Modularization Details
M ODULARIZATION is employed in Online Café Hub to organize the
functionality into separate modules or components, each responsible for a
specific set of tasks. This modular approach enhances maintainability, scalability, and
code reusability. The system is divided into the following modules:
• Authentication: This module will allow users to register and login to Online
Café Hub website. This module will be responsible for user data security as well.
This module will incorporate user detail updating like changing email, phone
number and password. Only after the user is logged in will they be able to
access the café area where they can chat and use the other features of the café.
• Reporting: This module will allow users to report other users acting offensive,
the users will be able to see the reports they have made and the action taken
on those reports. This module will allow admin and staff to review the reports
made by users as well.
• Feedback: This module will allow users to give their feedback about the
website and what improvements, if any, can be made. Admin and Staff will be
able to view these feedbacks.
44
• Chatting: This module will be responsible for handling user chat sessions. The
WebSocket implemented will handle the multicasting of messages.
• Contact: This module will enable all the users to contact the site admin via
emailing service. This module will incorporate the mail server aspect of the
Online Café Hub.
• Management: This module will allow admin and staff to manage the system
by providing a simple GUI. Services like adding / removing / updating tables,
adding / removing user tokens with reason, and banning / unbanning users
with reason will be provided by this module. It will also be responsible for
making logs about the actions taken by admin and staff and recording them
onto proper tables like unauthorized, table log, user ban log, and token log.
5.4 Data Integrity & Constraints
E NSURING data integrity is crucial for the proper functioning and reliability of
the Online Café Hub system. The system employs various data integrity
measures and constraints to maintain the accuracy, consistency, and validity of the
45
data stored in the database. The following data integrity and constraints are
implemented:
• Entity Integrity: Each primary key in the database is unique and not null,
ensuring that each record in a table can be uniquely identified.
• Referential Integrity: Foreign key constraints are applied to maintain
referential integrity among related tables. For example, the “u_id” attribute in
userbanlog, tokenlog, feedback, and reports tables references the “u_id”
attribute in users table, ensuring the only registered users are associated with
those actions / tables.
• Domain Integrity: Data entered into the system is validated against
predefined data types and constraints. For example, the “u_email” attribute in
the “users” table is validated to ensure it follows a valid email format, and the
“chairs” attribute in the “tables” table has a constraint that it cannot be negative
or null, it will be by default 0.
• Unique Constraints: Certain attributes have unique constraints to enforce
uniqueness within the table. For instance, the “u_email”, “u_phn”, and
46
“a_email”, “a_phn” attributes in the “users” and “admins” tables respectively
must be unique, preventing duplicate entries.
• Check Constraints: Check constraints are used to validate the values entered
into specific attributes based on predefined conditions. For example, the
“banned” attribute in the “users” table has a check constraint to ensure it can
only have a value of “false” or “true”, indicating whether the user is banned or
not.
• Default Values: Default values are assigned to certain attributes to provide a
default value when no explicit value is specified during record insertion. For
example, the “date” attribute in “unauthorized” table has a default value of
CURRENT_TIMESTAMP, indicating the time when the log was made.
These data integrity measures and constraints help to maintain the consistency and
validity of the data stored in the database. They prevent data inconsistencies, ensure
accurate relationships between tables, and enforce data validation rules. By adhering
to these constraints, the Online Café Hub system can operate reliably and provide
users with consistent and reliable information.
47
5.5 Database Design
D ATABASE design is an essential part of any software system, and it is crucial
to ensure that the database is designed correctly and efficiently. The database
design will help in organizing the data in a structured and systematic manner. The
following things were taken into consideration during the implementation of database
design system of Online Café Hub:
5.5.1 Database Design Methodology
We have used the Entity Relationship (ER) modelling technique to design the database
for Online Café Hub. ER modelling is used to design the structure and relationships
of a database. It represents entities (such as users, admins, tables) as objects and
defines their attributes and associations. ER modelling helps in visualizing the
database schema, identifying key entities, their relationships, and cardinalities. It
serves as a blueprint for creating a well-organized and efficient database system,
ensuring proper data representation and integrity.
48
5.5.2 Database Schema
Each entity in the database has a unique set of columns that are defined based on the
requirements of the website. The relationships between the tables are also defined,
which helps in managing the data efficiently.
5.5.3 Database Normalization
The database has been normalized to ensure that the data is organized efficiently
and without redundancy. We have used the third normal form (3NF) to ensure that
the data is in a normalized state.
49
5.5.4 Database Indexing
The database has been normalized to ensure that the data is organized efficiently
and without redundancy. We have used the third normal form (3NF) to ensure that
the data is in a normalized state.
5.5.5 Database Security
To ensure the security of the database, we have implemented various security
measures. We have set up user accounts and implemented password policies to
ensure that only authorized users can access the database.
Overall, the database design for the Online Café Hub website has been created keeping
in mind the requirements of the website and the best practices for database design.
The design ensures that the data is organized efficiently, and the performance of the
system is optimized.
50
5.6 Logic Design of Procedures
L
OGIC design of procedures explains how the different modules of the Online
Café Hub interact with each other to give the optimal satisfaction to the user
as well as providing security. The following modules / procedures were made in the
Online Café Hub system:
5.6.1 Authentication / Login Procedure
• When the user clicks on the “Login” or “Register” button on the Home Page,
they are presented with the Login Page where they have two forms, registration
and login.
• If the user is registering then they have to provide their credentials (name,
email, phone number, and password) and submit the form by clicking on the
“Register” button.
• The website will then validate the user’s input on the client-side and if it is
valid, a new user would be created and redirect them to the Login Page.
• If the user is logging in, they have to provide their email and password and
submit the form by clicking on the “Login” button.
51
• The website will then validate the user’s input on the client-side and if it is
valid, a session will be created for the user and they will be redirected to the
Café Page.
5.6.2 Token Management Procedure
• When an admin or staff logs in, they will be presented with the Token
Management Page.
• They will be presented with a form where the user id, tokens, and reason input
fields will be provided.
• When submitted, the form is validated on the client-side browser. If the form
is valid, it will be forwarded to the server-side. An appropriate message will be
displayed on the client-side once the server is done processing the data.
• This module can be submitted only by Admins (privilege 1). If a Staff (privilege
0) tries to submit it, an unauthorized entry will be made in the “unauthorized”
table.
52
5.6.3 Table Management Procedure
• The admin can navigate to the Table Management page by clicking on the
appropriate anchor tag / link.
• They will be presented with a form where the chair id, and chairs input fields
and three buttons, namely, “Add Table”, “Update Table” and “Remove Table”
will be provided. A table with all the attributes and tuples of the table “tables”
will also be provided.
• A log is created in the tablelog table if the database action was a success.
5.6.4 User Management Procedure
• The admin can navigate to the User Management page by clicking on the
appropriate anchor tag / link.
53
• They will be presented with a form where the user id, and reason input fields
and two buttons, namely, “Ban User”, and “Unban User” will be provided. A
table with all the attributes except “u_pass” and tuples of the table “users” will
also be provided.
• This module can be submitted only by Admins (privilege 1). If a Staff (privilege
0) tries to submit it, an unauthorized entry will be made in the “unauthorized”
table. If Admin is making the action, a log in the “userbanlog” table is created.
5.6.5 Report View Procedure
• The admin can navigate to the Reports page by clicking on the appropriate
anchor tag / link.
• They will be presented with all the attributes and tuples from the “reports”
table.
54
• To take any action, they can navigate to the User Management Page.
5.6.6 Feedback View Procedure
• The admin can navigate to the Feedbacks page by clicking on the appropriate
anchor tag / link.
• They will be presented with all the attributes and tuples from the “feedback”
table.
5.6.7 Chat WebSocket Procedure
• Users can navigate to the Café Page and join a table to create a session with
the Chat WebSocket.
• Once inside the Chat window, users can leave the chatroom by simply clicking
on the “Leave” button.
• Users can also order food by clicking on the two services available beside the
“Leave” button.
55
5.6.8 Reporting Procedure
• Users can navigate to the Report page by clicking on the appropriate tag / link
on the navbar.
• The user is presented with a form containing the input fields user id and reason.
• A user cannot report themselves.
5.6.9 Feedback Procedure
• Users can navigate to the Feedback page by clicking on the appropriate tag /
link on the navbar.
• The user is presented with a form containing the input field message.
56
5.6.10 User Details Update Procedure
• The user can navigate to the My Account page from the navbar.
• They will be presented with their details like id, name, email, phone, tokens,
and violations. They will also be presented with three short forms.
• The first form contains the input fields new email and password.
• The second form contains the input fields new phone number and password.
• The third form contains the input fields new password and old password.
• When a user clicks on a particular button associated with a certain form, the
fields are validated on the client-side and then sent to the server-side. After the
server-side is done processing, an appropriate message will be sent back to the
client / user.
57
5.6.11 Contact Procedure
• This form will be available at the bottom of the Home page.
• Any user, whether registered or not can use this form to send emails to the site
admin.
• They will be presented with a form containing input fields email, subject and
message.
• When submitted, the form is validated on the client-side and then sent to the
server-side where a smpt mail server will deliver the message to the site admin.
5.6.12 Logout Procedure
• The user / admin / staff can click on the logout button on the navbar or close
the browser to terminate their session and logout.
58
6. Program Code
6.1 Introduction to The Implementation Phase
The implementation phase of Online Café Hub marks the transition from the design
and planning stages to the actual development of the website. This phase involves
translating the design specifications and requirements into functional code using the
selected programming language, JSP, and Java, along with HTML, CSS, and
JavaScript.
During the implementation phase, the development team follows industry-standard
coding practices and adheres to coding guidelines to ensure code readability,
maintainability, and scalability. The code is structured using modularization
techniques, allowing for better organization and reusability of code components.
The implementation phase also involves error handling and exception management to
ensure robustness and reliability of the website. Proper error messages, logging
mechanisms, and input validation techniques are employed to enhance the user
experience and prevent security vulnerabilities. Additionally, the implementation
phase includes integration with the MySQL database management system. The code
59
interacts with the database to retrieve and store data, utilizing appropriate SQL
queries and ensuring data integrity and security.
Throughout the implementation phase, the development team conducts regular testing
and debugging to identify and rectify any issues or inconsistencies in the code. This
iterative process helps in ensuring the quality and stability of the implemented features
and functionalities.
60
6.2 File Structure
The “main” folder:
Inside “java” folder:
61
Inside “webapp” folder:
62
63
6.3 Well Indented Code with Comments & Description
SCRIPTS
The “scripts” folder contains two JavaScript scripts, “formValidation.js” and
“my_alert.js”. These utility functions are used heavily to ensure form input validations
and error / success messages are displayed in a user-friendly manner.
formValidation.js:
This JavaScript code defines a function called validateFields that takes two
parameters: ele (an array of element IDs) and formId (the ID of a form).
The purpose of this function is to validate the fields in a form before submitting it. It
performs various checks on different types of input fields, such as text, password, email,
number, and textarea.
The ele array is passed to the getElements function, which retrieves the corresponding
DOM elements based on their IDs and returns them as an array.
The code then iterates through each element and performs specific validation checks
based on its type. For text and password fields, it checks if they have a non-zero length
and if they meet certain length requirements. For email fields, it checks if they have a
valid email format and do not exceed a certain length. For number fields with the ID
64
"phn", it checks if they are a valid phone number. For textarea fields, it checks if they
have a non-zero length and do not exceed a certain length.
If any validation error is found, it either shows an error message using the myAlert
function or adds a red border to the respective field using the showError function. The
red border is removed after 2 seconds using a setTimeout function.
If all fields pass the validation checks, the form with the specified formId is submitted
by calling document.getElementById(formId).submit().
function validateFields(ele = [], formId) {

if (!ele.length) return;
ele = getElements(ele);
for (let i = 0; i < ele.length; i++) {
if (["text", "password"].includes(ele[i].type) && !ele[i].value.length)
return showError(ele[i]);
if (ele[i].type === "text" && !(ele[i].value.length < 20))
return myAlert(
"Error:" + ele[i].name + " should not exceed 20 characters"
);
if (
ele[i].type === "password" &&
(ele[i].value.length < 8 || ele[i].value.length > 30)
)
return myAlert(
"Error: Password should contain more than 8 characters and less than 30
characters."
);
if (
ele[i].type === "email" &&
(!ele[i].value.length || !validEmail(ele[i].value))
)
if (ele[i].type === "email" && ele[i].value.length > 40)
return myAlert("Error: Email should not exceed 40 characters.");
if (
ele[i].type === "number" &&
65
ele[i].id === "phn" &&

!validPhone(ele[i].value)
)
if (
ele[i].type === "textarea" &&
!(ele[i].value.length > 0 && ele[i].value.length < 255)
)
}
document.getElementById(formId).submit();
}
function getElements(ele) {
let properElements = [];
for (let i = 0; i < ele.length; i++) {
properElements[i] = document.getElementById(ele[i]);
}
return properElements;
}
function showError(ele) {
ele.style.border = "2px solid red";
setTimeout(() => (ele.style.border = ""), 2000);
}
function validEmail(email) {
let expression = email.match(
/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-
9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
);
return expression === null || expression === false ? false : true;
}
function validPhone(phn) {
if (phn[0] == 0) return false;
return phn.length == 10;
}
66
my_alert.js:
This JavaScript code defines a custom alert function called CustomAlert that creates
a custom dialog box for displaying messages.
The CustomAlert function has two methods: alert and ok.
The alert method takes two parameters: message (the message to be displayed) and
title (optional, the title of the dialog box). Inside the method, a new dialog box is
created by appending HTML elements to the document.body using innerHTML. The
dialogoverlay and dialogbox elements are retrieved and their styles are modified to
display the dialog box overlay and box itself. The dialogboxhead, dialogboxbody, and
dialogboxfoot elements are displayed or hidden based on the presence of a title. The
message and an "OK" button are added to the dialog box.
The ok method is called when the "OK" button is clicked. It hides the dialog box and
overlay by setting their display properties to "none".
An instance of CustomAlert is created and assigned to the customAlert variable.
The myAlert function is defined to handle the display of alerts. It takes a msg
parameter, which is in the format "status: message". The status and message are
extracted from the msg parameter using split. The console.log statements are there for
debugging purposes. Finally, the customAlert.alert method is called with the extracted
message and status, displaying the custom alert dialog box.
67
function CustomAlert() {
this.alert = function (message, title) {
document.body.innerHTML +=
'<div id="dialogoverlay"></div><div id="dialogbox" class="slit-in-
vertical"><div><div id="dialogboxhead"></div><div id="dialogboxbody"></div><div
id="dialogboxfoot"></div></div></div>';
let dialogoverlay = document.getElementById("dialogoverlay");

let dialogbox = document.getElementById("dialogbox");
let winH = window.innerHeight;

dialogoverlay.style.height = winH + "px";
dialogbox.style.top = "100px";
dialogoverlay.style.display = "block";
dialogbox.style.display = "block";
document.getElementById("dialogboxhead").style.display = "block";
if (typeof title === "undefined") {

document.getElementById("dialogboxhead").style.display = "none";
} else {
document.getElementById("dialogboxhead").innerHTML =
'<i class="fa fa-exclamation-circle" aria-hidden="true"></i> ' + title;
}
document.getElementById("dialogboxbody").innerHTML = message;
document.getElementById("dialogboxfoot").innerHTML =
'<button class="pure-material-button-contained active"
onclick="customAlert.ok()">OK</button>';
};
this.ok = function () {
document.getElementById("dialogbox").style.display = "none";
document.getElementById("dialogoverlay").style.display = "none";
};
}
let customAlert = new CustomAlert();
function myAlert(msg) {
let status = msg.split(": ")[0];
let message = msg.split(": ")[1];
console.log(status);
console.log(message);
customAlert.alert(message, status);
}
68
CSS File That Contains the Style for “my_alert.js”: (customAlert.css)
@charset "ISO-8859-1";
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css");
/* ---------------Animation---------------- */
.slit-in-vertical {
-webkit-animation: slit-in-vertical 0.45s ease-out both;
animation: slit-in-vertical 0.45s ease-out both;
}
@-webkit-keyframes slit-in-vertical {
0% {
-webkit-transform: translateZ(-800px) rotateY(90deg);
transform: translateZ(-800px) rotateY(90deg);
opacity: 0;
}
54% {
opacity: 1;
}
100% {
-webkit-transform: translateZ(0) rotateY(0);
transform: translateZ(0) rotateY(0);
}
}
@keyframes slit-in-vertical {
0% {
opacity: 0;
}
54% {
opacity: 1;
}
100% {
-webkit-transform: translateZ(0) rotateY(0);
transform: translateZ(0) rotateY(0);
}
}
69
/*---------------#region Alert--------------- */
#dialogoverlay{
display: none;
opacity: .8;
position: fixed;
top: 0px;
left: 0px;
background: #707070;
width: 100%;
z-index: 10;
}
#dialogbox{
display: none;
position: absolute;
background: rgb(0, 47, 43);
border-radius:7px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.575);
transition: 0.3s;
width: 40%;
z-index: 10;
top:0;
left: 0;
right: 0;
margin: auto;
}
#dialogbox:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.911);
}
.container {
padding: 2px 16px;
}
.pure-material-button-contained {
position: relative;
display: inline-block;
box-sizing: border-box;
border: none;
border-radius: 4px;
padding: 0 16px;
min-width: 64px;
height: 36px;
vertical-align: middle;
text-align: center;
70
text-overflow: ellipsis;
text-transform: uppercase;
color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255));
background-color: rgb(var(--pure-material-primary-rgb, 0, 77, 70));
/* background-color: rgb(1, 47, 61) */
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0,
0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
font-family: var(--pure-material-font, "Roboto", "Segoe UI",
BlinkMacSystemFont, system-ui, -apple-system);
font-size: 14px;
font-weight: 500;
line-height: 36px;
overflow: hidden;
outline: none;
cursor: pointer;
transition: box-shadow 0.2s;
}
.pure-material-button-contained::-moz-focus-inner {
border: none;
}
/* ---------------Overlay--------------- */
.pure-material-button-contained::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255));
opacity: 0;
transition: opacity 0.2s;
}
/* Ripple */
.pure-material-button-contained::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
border-radius: 50%;
padding: 50%;
width: 32px; /* Safari */
height: 32px; /* Safari */
background-color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255));
71
opacity: 0;
transform: translate(-50%, -50%) scale(1);
transition: opacity 1s, transform 0.5s;
}
/* Hover, Focus */
.pure-material-button-contained:hover,
.pure-material-button-contained:focus {
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0,
0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
}
.pure-material-button-contained:hover::before {
opacity: 0.08;
}
.pure-material-button-contained:focus::before {
opacity: 0.24;
}
.pure-material-button-contained:hover:focus::before {
opacity: 0.3;
}
/* Active */
.pure-material-button-contained:active {
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0,
0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.pure-material-button-contained:active::after {
opacity: 0.32;
transform: translate(-50%, -50%) scale(0);
transition: transform 0s;
}
/* Disabled */
.pure-material-button-contained:disabled {
color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.12);
box-shadow: none;
cursor: initial;
}
.pure-material-button-contained:disabled::before {
opacity: 0;
}
72
.pure-material-button-contained:disabled::after {
opacity: 0;
}
#dialogbox > div{

background:#FFF;
margin:8px;
}
#dialogbox > div > #dialogboxhead{

font-size:19px;
padding:10px;
color:rgb(255, 255, 255);
font-family: Verdana, Geneva, Tahoma, sans-serif ;
}
#dialogbox > div > #dialogboxbody{

background:rgb(0, 47, 43);
padding:20px;
color:#FFF;
font-family: Verdana, Geneva, Tahoma, sans-serif ;
}
#dialogbox > div > #dialogboxfoot{

padding:10px;
text-align:right;
}
FILE NAME: HEADER.JSP
The “header.jsp” file contains the code for the header or navbar section of the website.
It includes the logo of Online Café Hub and contains various links.
The code also includes JSP scriptlet tags to dynamically generate additional links
based on the user's session information. If the user is logged in, it checks their privilege
level. If the user has admin privileges, an "Admin" link is added, otherwise, a "Cafe"
73
link is added. Additionally, a "Logout" link is included. If the user is not logged in, a
"Login" link is displayed.
<div class="nav-header">
<div class="logo">
<a href="./home.jsp"><img src="./imgs/logo-light.png" alt="logo"></a>
<script src=""></script>
</div>
<div class="links">
<ul>
<li><a href="./home.jsp">Home</a></li>
<li><a href="./about.jsp">About</a></li>
<li><a href="./menu.jsp">Menu</a></li>
<li><a href="./#contact">Contact</a></li>
<% if (session.getAttribute("id") != null) { %>
<% if (session.getAttribute("privilege") != null) { %>
<li><a
href="./adminElements/token_mgmt.jsp">Admin</a></li>
<% } else { %>
<li><a href="./userElements/cafe.jsp">Cafe</a></li>
<% } %>
<li><a href="./logout">Logout</a></li>
<% } else { %>
<li><a href="./login.jsp">Login</a></li>
<% } %>
</ul>
</div>
</div>
header.css:
.nav-header {
width: 100%;
padding: .3rem 6rem;
display: flex;
justify-content: space-between;
box-shadow: 1px 0 10px #000000;
background-color: rgba(0,0,0,0.7);
position: sticky;
top: 0;
}
74
.nav-header .logo img {

width: 23%;
}
.nav-header .links {
width: 70%;
min-height: 100%;
}
.nav-header .links ul {
width: 100%;
height: 100%;
display: flex;
align-items: center;
list-style: none;
}
.nav-header .links ul li {
transition: .3s ease-in;
cursor: pointer;
}
.nav-header .links ul li:hover {

background-color: #ffffff;
}
.nav-header .links ul li a {
text-decoration: none;
font-size: 1.2rem;
color: #ffffff;
}
.nav-header .links ul li:hover a {

color: #000000;
}
FILE NAME: FOOTER.JSP
The “footer.jsp” contains the structure for the common footer of the Online Café Hub.
75
In the first row (div with class "row-1"), there are three divisions. The first division
contains a logo image linking to the "home.jsp" page. The second division contains
contact information, including an email address, phone number, and physical address.
The third division displays the opening hours of the cafe.
In the second row (div with class "row-2"), there is a paragraph element with copyright
information, including the current year, the name of the website "Online Cafe Hub,"
the creator's name, and the project code (BCSP–064).
<div class="footer">
<div class="row-1">
<div class="logo">
<a href="http://localhost:8080/OnlineCafeHub/home.jsp"><img
src="http://localhost:8080/OnlineCafeHub/imgs/logo-light.png" alt="logo"></a>
</div>
<div class="info">
<label class="heading">Contact Us</label>
<ul>
<li><i class="fa-solid fa-envelope"></i><a
href="mailto:[email protected]">[email protected]</a></li>
<li><i class="fa-solid fa-phone"></i><label>+91
7042756653</label></li>
<li><i class="fa-solid fa-location-dot"></i><label>C.R. Park,
Market 2, New Delhi - 19</label></li>
</ul>
</div>
<div class="info">
<label class="heading">Open Hours</label>
<ul>
<li>Monday to Saturday : 10am - 10pm</li>
<li>Sunday : 9am - 11pm</li>
</ul>
</div>
</div>
<div class="row-2">
<p>
<i class="fa-sharp fa-regular fa-copyright"></i>
2023 | Online Cafe Hub | Made By Debaloy Chatterjee | BCSP-064
76
</p>
</div>
</div>
footer.css:
.footer {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
bottom: 0;
}
.footer a {
color: #ffffff;
}
.footer .row-1 {
width: 100%;
display: flex;
justify-content: space-around;
align-items: flex-start;
color: #ffffff;
padding: 4rem;
}
.footer .row-1 .logo {

width: 12%;
}
.footer .row-1 .logo img {

width: 100%;
}
.footer .row-1 .info {

display: flex;
gap: 1rem;
}
77
.footer .row-1 .info label {

letter-spacing: .3rem;
font-size: 1.4rem;
font-weight: bold;
}
.footer .row-1 .info ul {

list-style: none;
display: flex;
gap: .8rem;
}
.footer .row-1 .info ul li {

display: flex;
gap: 1rem;
cursor: pointer;
}
.footer .row-1 .info ul li label {

text-transform: none;
font-size: 1rem;
font-weight: normal;
}
.footer .row-2 {
padding: 1.4rem 0;
}
.footer .row-2 p {
font-size: 1rem;
font-weight: bold;
}
78
FILE NAME: E_NOTFOUND.JSP
The “e_notfound.jsp” is the default page for 404 Errors (page not found). This contains
the simple Error message and a link to go back to the home page. Embedded styling
is provided to this file.
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"

pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Online Cafe Hub | 404</title>
<style>
* {
transition: all 0.6s;
}
html {
height: 100%;
}
body{
font-family: 'Lato', sans-serif;
color: #888;
margin: 0;
}
#main{
display: table;
width: 100%;
height: 100vh;
text-align: center;
}
.fof{
display: table-cell;
}
.fof h1{
font-size: 50px;
padding-right: 12px;
79
animation: type .5s alternate infinite;

}
@keyframes type{
from{box-shadow: inset -3px 0px 0px #888;}
to{box-shadow: inset -3px 0px 0px transparent;}
}
</style>
</head>
<body>
<div id="main">
<div class="fof">
<h1>Error 404</h1>
<h2>Page Not Found</h2>
<h3><a href="http://localhost:8080/OnlineCafeHub/"
style="text-decoration: none;">Home</a></h3>
</div>
</div>
</body>
</html>
FILE NAME: E_UNAUTHORIZED.JSP
The “e_unauthorized.jsp” is the page for Error 401 (unauthorized). If a servlet is
accessed without authentication, the user will be directed to this page where they will
be able to see the message and have the option to login.

<!DOCTYPE html>
<html>
<head>
<title>Online Cafe Hub | 401</title>
<style>
* {
transition: all 0.6s;
}
html {
height: 100%;
}
80
body{
font-family: 'Lato', sans-serif;
color: #888;
margin: 0;
}
#main{
display: table;
width: 100%;
height: 100vh;
text-align: center;
}
.fof{
display: table-cell;
}
.fof h1{
font-size: 50px;
padding-right: 12px;
animation: type .5s alternate infinite;
}
@keyframes type{
from{box-shadow: inset -3px 0px 0px #888;}
to{box-shadow: inset -3px 0px 0px transparent;}
}
</style>
</head>
<body>
<div id="main">
<div class="fof">
<h1>Unauthorized</h1>
<h2>Please login to browse the features.</h2>
<h3><a href="http://localhost:8080/OnlineCafeHub/login.jsp"
style="text-decoration: none;">Login</a></h3>
</div>
</div>
</body>
</html>
81
COMMON STYLESHEET FILE: COMMON.CSS
The “common.css” has the default style configurations for the other web pages of the
Online Café Hub.
@import
url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200
;0,300;0,400;0,500;0,600;1,100;1,200;1,300;1,400;1,500;1,600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Fira Sans', sans-serif;
}
html {
scroll-behavior: smooth;
}
.alt-color-1 {
background-color: rgb(255, 232, 170);
}
.alt-color-2 {
background-color: #ffd66f;
}
.note {
width: 80%;
}
.note .heading {
font-size: 1.6rem;
color: red;
}
.note .content {
font-size: 1.4rem;
}
82
FILE NAME: HOME.JSP
The “home.jsp” page is the landing page of Online Café Hub. It begins with page
directives and HTML structure. In the head section, it includes various CSS stylesheets
and JavaScript files for styling and functionality. It also includes the Font Awesome
library for icons.
The body section starts with including the header.jsp file, which generates the header
section of the page. The main content of the home page is divided into different
sections: welcome message, about section, and contact section. Each section contains
relevant content and may include images. The contact section includes a form for users
to submit their contact information and a JavaScript function to validate the form
fields.
The code also includes the footer.jsp file, which generates the footer section of the
page. Lastly, there are JavaScript functions to handle alerts, validate form fields, and
clear the session attribute.

<!DOCTYPE html>
<html>
<head>
<title>Online Cafe Hub | Home</title>
<link rel="icon" type="image/x-icon" href="./imgs/logo-dark.ico">
<link rel="stylesheet" href="./stylesheets/common.css">
<link rel="stylesheet" href="./stylesheets/header.css">
<link rel="stylesheet" href="./stylesheets/footer.css">
<link rel="stylesheet" href="./stylesheets/home.css">
<script src="./scripts/my_alert.js"></script>
83
<link rel="stylesheet" href="./stylesheets/customAlert.css">
<script src="https://kit.fontawesome.com/ba1aeb3e9d.js"
crossorigin="anonymous"></script>
</head>
<body style="position: relative;">
<%@include file="./header.jsp" %>
<div class="main-body">
<section id="welcome-msg">
<img src="./imgs/home/home-3.jpg" alt="bg" />
<div class="container">
<div class="heading-2">Welcome To</div>
<div class="heading-1">Online Cafe Hub</div>
<div class="content">
This site aims to provide a friendly and aesthetic
feel and experience to you. We hope you enjoy your time with us!
</div>
<a href="./login.jsp">Register</a>
</div>
</section>
<section id="about">
<div class="text-content">
<div class="heading">About Online Cafe Hub</div>
<p>
Online Cafe Hub aims to provide a safe cyber
space where users can come to spend their time ordering food as well as chat
with strangers. We want to provide an aesthetic and fun place where people
can come to to relax.
</p>
</div>
<a href="./about.jsp">Read More</a>
</div>
<div class="img-content">
<img src="./imgs/home/card-1.jpg" alt="img" />
</div>
</section>
<section id="contact">
<input type="hidden" id="status" value="<%=
session.getAttribute("id") != null ? session.getAttribute("id").toString() :
"null" %>" />
<div class="heading">Contact Us</div>
<form id="contact-form" action="contact" method="POST">
84
<input type="email" name="from" id="email"

placeholder="Enter your email..." />
<input type="text" name="subject" id="subject"
placeholder="Enter subject..." />
<textarea name="message" id="message" placeholder="Enter
your message..." rows="10" cols="30"></textarea>
<input type="button" value="Submit" id="btn"
onclick="contact()" />
</form>
</section>
</div>
<%@include file="./footer.jsp" %>
<script src="./scripts/fieldValidation.js"></script>
<script>
let status = document.getElementById("status");
if (showAlert()) {
myAlert(status.value);
status.value = "null";
}
function showAlert() {
return status.value.includes('Success') ||
status.value.includes('Error');
}
function contact() {
validateFields(['email', 'subject', 'message'], 'contact-
form');
}
<% session.setAttribute("status", null); %>

</script>
</body>
</html>
home.css:
.main-body {
width: 100%;
display: flex;
85
margin-top: 8rem;
}
/* ========== WELCOME MESSAGE ========== */
#welcome-msg {
width: 100%;
height: 37rem;
display: flex;
}
#welcome-msg img {
position: absolute;
top: 0;
z-index: -10;
width: 100%;
filter: blur(.5rem);
}
#welcome-msg .container {
width: 50%;
color: #ffffff;
display: flex;
margin-top: -10rem;
gap: 2rem;
}
#welcome-msg .container .heading-1 {

font-size: 4rem;
font-weight: bold;
text-align: center;
text-shadow: 2px 2px 6px #000000;
}
#welcome-msg .container .heading-2 {

font-size: 3rem;
font-weight: bold;
text-align: center;
}
86
#welcome-msg .container .content {

font-size: 1.4rem;
text-align: center;
}
#welcome-msg .container a {
width: 40%;
font-size: 1.2rem;
font-weight: bold;
text-align: center;
color: #000000;
padding: .8rem 1.4rem;

}
#welcome-msg .container a:hover {

background-color: #000000;
color: #ffffff;
}
/* ========== ABOUT SECTION ========== */
#about {
width: 100%;
padding: 6rem 8rem;
display: flex;
gap: 3rem;
}
#about .text-content {
width: 50%;
display: flex;
justify-content: flex-start;
gap: 2rem;
}
87
#about .text-content .heading {

font-size: 2rem;
font-weight: bold;
}
#about .text-content .content {

font-size: 1.4rem;
text-align: justify;
}
#about .text-content a {
color: #ffffff;
width: 30%;
font-size: .9rem;
padding: 1rem 2rem;
font-weight: bold;
text-align: center;
border: 1px solid #ffffff;
}
#about .text-content a:hover {

color: #000000;
border: 1px solid #000000;
}
#about .img-content {
width: 50%;
display: flex;
}
#about .img-content img {

width: 100%;
}
/* ========== CONTACT FORM ========== */
#contact {
width: 100%;
padding: 6rem 8rem;
88
display: flex;
gap: 4rem;
}
#contact .heading {
font-size: 2rem;
font-weight: bold;
}
#contact form {
width: 60%;
display: flex;
gap: 2rem;
}
#contact form input, #contact form textarea {

font-size: 1.4rem;
padding: .6rem .8rem;
outline: none;

}
#contact form input:hover, #contact form textarea:hover {

border: 2px solid #ffd66f;
}
#contact form input:focus, #contact form textarea:focus {

}
#contact form input[type=button] {

color: #000000;
font-weight: bold;
cursor: pointer;
}
89
#contact form input[type=button]:hover {

color: #000000;
}
FILE NAME: LOGIN.JSP
The “login.jsp” file begins with page directives and checks for session attributes to
determine the user's privilege and redirect them accordingly. If the "privilege"
attribute is present, the user is redirected to the admin token management page. If the
"id" attribute is present, the user is redirected to the cafe page.
The code then constructs the HTML structure of the login page. It includes various
CSS stylesheets for styling and JavaScript files for form field validation and displaying
alerts. The page consists of a registration section and a login section. Each section
contains a form with input fields for name, email, phone number, and password. The
registration form submits data to the "register" endpoint, and the login form submits
data to the "login" endpoint. The JavaScript function validateFields is called to
validate the form fields.
The code also includes the header.jsp and footer.jsp files, which generate the header
and footer sections of the page, respectively. Additionally, there is JavaScript code to
handle displaying alerts based on the "status" attribute.
90

<%
if (session.getAttribute("privilege") != null) {
response.sendRedirect("./adminElements/token_mgmt.jsp");
}
else if (session.getAttribute("id") != null) {
response.sendRedirect("./userElements/cafe.jsp");
}
%>
<!DOCTYPE html>
<html>
<head>
<title>Online Cafe Hub | Login</title>
<link rel="stylesheet" href="./stylesheets/login_style.css">
<script defer src="./scripts/fieldValidation.js"></script>
<script src="./scripts/my_alert.js"></script>
<link rel="stylesheet" href="./stylesheets/customAlert.css">
</head>
<body>

request.getAttribute("status") %>" />
<div class="home-container">
<img src="./imgs/home/home-2.jpg" alt="bg" />
<div class="registration">
<form method="POST" action="register" id="registration">
<h2>Registration</h2>
<input type="text" name="name" id="name" placeholder="Full
Name..." class="inputs-default">
<input type="email" name="email" id="email"
placeholder="Email..." class="inputs-default">
<input type="number" name="phn" id="phn" placeholder="Phone
Number..." class="inputs-default">
<input type="password" name="pass" id="pass"
placeholder="Password..." class="inputs-default">
<input type="button" value="Register"
onclick="validateFields(['name', 'email', 'phn', 'pass'], 'registration')"
class="buttons-default">
91
</form>
</div>
<div style="border-left: 2px solid #ffffff; height: 70%; box-shadow:

0 0 8px #ffffff;"></div>
<div class="login">
<form method="POST" action="login" id="login">
<h2>Login</h2>
<input type="email" name="email" id="lEmail"
placeholder="Email..." class="inputs-default">
<input type="password" name="pass" id="lPass"
placeholder="Password..." class="inputs-default">
<input type="button" value="Login"
onclick="validateFields(['lEmail', 'lPass'], 'login')" class="buttons-
default">
</form>
</div>
</div>
<script type="text/javascript">
if (showAlert()) {
}
}
</script>
</body>
</html>
login_style.css:
.home-container {
padding: 10px;
width: 100%;
height: 100vh;
92
display: flex;
}
.home-container img {
width: 100%;
position: absolute;
top: 0;
z-index: -10;
filter: blur(.3rem);
}
.registration, .login {
height: 50%;
flex-grow: 1;
}
.registration form, .login form {

display: flex;
}
.home-container h2 {
width: 50%;
font-size: 2em;
text-align: left;
color: #ffffff;
}
.inputs-default {
display: block;
width: 50%;
padding: 10px;
font-size: 1.2em;
}
.inputs-default:hover, .inputs-default:focus {
}
.buttons-default {
93
width: 30%;
padding: 12px;
font-size: 1.4em;
cursor: pointer;
color: black;
}
.buttons-default:hover, .buttons-default:focus {
background-color: white;
color: black;
}
.home-container input {
margin: 10px 0;
outline: none;
}
FILE NAME: ABOUT.JSP
The “about.jsp” file begins with page directives and constructs the HTML structure of
the page. The page includes CSS stylesheets for styling and the Font Awesome library
for icons.
The main content of the page is contained within the "about" section. It provides
information about the website, Online Cafe Hub. The section includes a heading, an
image, and several paragraphs that describe the purpose and features of the platform.
It highlights the concept of creating a virtual space where users can enjoy delicious
food, connect with strangers, and experience the ambiance of a cozy café environment.
94
The paragraphs emphasize the importance of shared experiences, diverse food options,
engaging chat features, and the commitment to safety and security. It mentions the
login system, reporting module, and proactive measures taken to ensure a positive and
inclusive atmosphere.
The page also includes a subsection titled "About Developer," which provides
information about the developer of the website. It displays an image, the developer's
name, location, skills, and links to their social media profiles. Additionally, a quote
from the developer expresses gratitude for user feedback and the commitment to
improving the website.
The code includes the header.jsp and footer.jsp files to generate the header and footer
sections of the page, respectively.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./stylesheets/about.css">
</head>
95
<section id="about">
<div class="text-content">
<div class="heading">About Us</div>
<div class="img-content">
<img src="./imgs/logo-light.png" alt="img" />
</div>
<p>Welcome to <span class="brand">Online Cafe
Hub</span>, a virtual oasis where you can indulge in delicious food and
connect with strangers in a unique and aesthetic online setting. Our mission
is to provide a safe and enjoyable space for users to experience the warmth
and camaraderie of a cozy café environment from the comfort of their own
homes.</p>
<p>At Online Cafe Hub, we understand the power of

shared experiences and the joy of meeting new people. Our platform offers a
delightful combination of delectable food options and engaging chat features,
designed to bring people together and foster meaningful connections.</p>
<p>Food is an integral part of the Online Cafe Hub

experience. Through our integrated menu, you can explore a diverse range of
culinary delights that cater to various tastes and preferences. Whether you
crave a piping hot cup of coffee, a mouthwatering pastry, or a savory snack,
our menu offers something to satisfy every palate. In collaboration with
local cafes like <span class="brand">"CAFEDO,"</span> we also aim to support
and promote neighborhood businesses, allowing you to discover hidden gems and
support local communities through your orders.</p>
<p>Engaging with fellow visitors is effortless at

Online Cafe Hub. Pull up a virtual chair at one of our inviting tables, and
simply click on an available seat to join the conversation happening there.
Engage in lively discussions, share stories, or simply enjoy the company of
others who are also seeking connection. Our chat feature encourages
respectful and friendly interactions, ensuring a positive and inclusive
atmosphere for all users.</p>
<p>Safety and security are paramount to us. We have

implemented a robust login system to protect your personal information and
provide a secure environment for your online cafe experience. Furthermore,
our reporting module allows users to flag any inappropriate behavior,
ensuring that Online Cafe Hub remains a safe and welcoming space for
everyone. We take proactive measures to address reports, with user bans based
on calculated metrics or discretionary actions by our dedicated admin and
staff team.</p>
96
<p>We invite you to join us at Online Cafe Hub, where

virtual meets the tangible in a cozy, aesthetically pleasing setting. Step
into our digital café, order your favorite treats, engage in delightful
conversations, and forge new connections with individuals from around the
world. Experience the magic of a café atmosphere, reimagined for the online
realm.</p>
<p>Cheers to good food, delightful conversations, and

unforgettable moments at Online Cafe Hub. Start your journey with us today
and savor the unique experience we have to offer.</p>
</div>
<div class="dev">
<div style="font-size: 2rem; font-weight:
bold;">About Developer</div>
<div class="card">
<div class="img"><a target="_blank"
href="https://debaloy.netlify.app/"><img src="./imgs/dev-1.jpg"
alt="developer img" /></a></div>
<div class="info">
<div class="i">Debaloy Chatterjee</div>
<div class="i">New Delhi</div>
</div>
<div class="skills">
<div class="s">MERN, Django</div>
<div class="s">C/CPP, Java, Rust,
Python</div>
<div class="s">Bots and API</div>
</div>
<div class="social">
<div class="icon"><a target="_blank"
href="https://www.linkedin.com/in/debaloy-chatterjee-5b6170136/"><i
class="fa-brands fa-linkedin"></i></a></div>
href="https://github.com/debaloy"><i style="border-radius: 50%;" class="fa-
brands fa-github"></i></a></div>
href="https://twitter.com/debaloy_"><i class="fa-brands fa-
twitter"></i></a></div>
href="https://www.instagram.com/debaloy_"><i class="fa-brands fa-
instagram"></i></a></div>
</div>
<div class="quote">
I hope you all find this website soothing. I
had a great time learning about the components that were need to complete
this project. I will continue to make this place better with your feedback.
Thanks!
97
</div>
</div>
</div>
</div>
</section>
</div>
</body>
</html>
about.css:
.main-body {
width: 100%;
}
#about {
width: 100%;
padding: 5rem 10rem;
}
#about .text-content {
display: flex;
gap: 2rem;
}
#about .text-content .heading {

font-size: 2rem;
font-weight: bold;
}
#about .text-content .img-content {

width: 30%;
}
#about .text-content .img-content img {

width: 100%;
}
98
#about .text-content .content {

display: flex;
gap: 2rem;
font-size: 1.4rem;
}
#about .text-content .content p {

line-height: 2rem;
}
#about .text-content .content p .brand {

font-style: italic;
font-weight: bold;
}
/* ========== DEVELOPER INFO ========== */
.dev {
width: 100%;
display: flex;
gap: 1.4rem;
margin-top: 4rem;
}
.dev .card {
width: 30%;
padding: 3rem 2rem;
color: #ffffff;
display: flex;
gap: 1.4rem;
box-shadow: 0 0 4px #262626;

border-radius: 2rem;
}
99
.dev .card:hover {
box-shadow: 0 0 8px #262626;
}
.dev .card .img {

width: 35%;
border-radius: 50%;
border: 2px solid #0F7CFF;
padding: 3px;
}
.dev .card .img a {

display: flex;
}
.dev .card .img:hover {

border: 2px solid #FFFFFF;
}
.dev .card .img img {

width: 100%;
border-radius: 50%;
}
.dev .card .info, .dev .card .skills {

font-size: 1.4rem;
font-weight: bold;
text-align: center;
}
.dev .card .skills {

font-size: 1rem;
color: #aeaeae;
font-weight: light;
}
.dev .card .social {

display: flex;
gap: 1.4rem;
}
.dev .card .social a {
100
color: #ffffff;
}
.fa-brands {
cursor: pointer;
font-size: 1.4rem;
}
.fa-linkedin:hover {
color: #0077B5;
}
.fa-github:hover {
color: #000000;
border-radius: 50%;
}
.fa-twitter:hover {
color: #1C93E4;
}
.fa-instagram:hover {
color: #C42359;
}
.dev .card .quote {

text-align: center;
font-size: 1rem;
}
FILE NAME: MENU.JSP
The “menu.jsp” file generates the menu page of the Online Café Hub website. It
includes HTML and JSP code to display various sections of the menu, such as quick
bites, fries, sandwiches, burgers, wraps, pasta, Maggie variants, pizzas, bread pizzas,
and combo meals. Each section contains a list of items with their corresponding names
101
and prices. The code uses JSP scriptlets (<% %>) to dynamically generate the menu
items based on arrays that store the names and prices of the items. The page also
includes CSS stylesheets and references to external resources like fonts and icons.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./stylesheets/menu.css">
</head>
<section class="about-cafe">
<div class="cafedo-logo">
<img src="./imgs/cafedo.jpg" alt="cafedo" />
</div>
<p>
CAFEDO, born during the pandemic, offers an immersive
experience. Its captivating design and cozy ambiance provide solace. Indulge
in expertly brewed coffee, heavenly pastries, and gastronomic wonders. CAFEDO
is more than a cafe; it's a place where connections are forged and memories
are made. Join us in celebrating resilience and the beauty found amidst
adversity. Welcome to CAFEDO, where aesthetics meet community.
</p>
</div>
</section>
<div class="menu">
<section class="menu-card">
<div class="title">Quick Bites</div>
<div class="items">
102
<%! String[] quickBitesNames = {"Pizza Pocket (with

fries)", "Spicy Chicken Fingers", "Veggie Fingers", "Veg Pops", "Chicken
Pops", "Chicken Strips", "Nachos & Salsa", "Fried Chicken Momos", "Crunchy
Chicken Momos", "Steamed Chicken Momos"}; %>
<%! String[] quickBitesPrices = {"99", "79", "79",
"69/119", "79/129", "99", "89", "99", "109", "89"}; %>
<% for (int i = 0; i < quickBitesNames.length; i++) {

%>
<div class="item">
<div class="name"><%= quickBitesNames[i]
%></div>
<div class="price"><%= quickBitesPrices[i]
%></div>
</div>
<% } %>
</div>
</section>
<div class="title">Fries</div>
<div class="items">
<%! String[] friesNames = {"Salted Fries", "Masala
Fries", "Peri Peri Fries", "Cheesy Fries", "Mayo Spicy Fries"}; %>
<%! String[] friesPrices = {"120", "140", "150",
"160", "150"}; %>
<% for (int i = 0; i < friesNames.length; i++) { %>

<div class="item">
<div class="name"><%= friesNames[i] %></div>
<div class="price"><%= friesPrices[i]
%></div>
</div>
<% } %>
</div>
</section>
<div class="title">Sandwich</div>
<div class="items">
<%! String[] sandwichNames = {"Mix Veggie", "Cheese
Blast", "Tandoori Potato", "Cottage Cheese", "Ham And Cheese", "Salami And
Cheese", "Chicken Chunky", "Chicken Egg Club", "Chicken Veggie Club"}; %>
<%! String[] sandwichPrices = {"99", "90", "120",
"150", "150", "120", "130", "160", "150"}; %>
<% for (int i = 0; i < friesNames.length; i++) { %>
103
<div class="item">
<div class="name"><%= friesNames[i] %></div>
<div class="price"><%= friesPrices[i]
%></div>
</div>
<% } %>
</div>
</section>
<div class="title">Burger</div>
<div class="items">
<%! String[] burgerNames = {"Classic Veg", "Herb &
Chilly", "BBQ Veg", "Cottage Cheese & Ranch", "Cottage Cheese & Caesar",
"Classic Chicken", "Fried Chicken", "Fatty Chicken", "BBQ Cheese & Chicken",
"Jalapeno Cheese & Chicken"}; %>
<%! String[] burgerPrices = {"90", "100", "110",
"140", "140", "140", "160", "200", "150", "150"}; %>
<% for (int i = 0; i < burgerNames.length; i++) { %>

<div class="item">
<div class="name"><%= burgerNames[i] %></div>
<div class="price"><%= burgerPrices[i]
%></div>
</div>
<% } %>
</div>
</section>
<div class="title">Wrap</div>
<div class="items">
<%! String[] wrapNames = {"All Veggie", "Shroom &
Cheese", "Cottage Cheese", "Chicken Chunky", "Fried Chicken", "BBQ Chicken
Dominator"}; %>
<%! String[] wrapPrices = {"109", "109", "129",
"129", "149", "179"}; %>
<% for (int i = 0; i < wrapNames.length; i++) { %>

<div class="item">
<div class="name"><%= wrapNames[i] %></div>
<div class="price"><%= wrapPrices[i] %></div>
</div>
<% } %>
</div>
</section>
104
<div class="title">Pasta</div>
<div class="items">
<%! String[] pastaNames = {"White Sauce Veg", "Red
Sauce Veg", "White Sauce Chicken", "Red Sauce Chicken", "Home Style"}; %>
<%! String[] pastaPrices = {"150", "140", "180",
"170", "160"}; %>
<% for (int i = 0; i < pastaNames.length; i++) { %>

<div class="item">
<div class="name"><%= pastaNames[i] %></div>
<div class="price"><%= pastaPrices[i]
%></div>
</div>
<% } %>
</div>
</section>
<div class="title">Maggie Varient</div>
<div class="items">
<%! String[] maggieNames = {"Plain", "Double Spice",
"Veggie", "Shrooms", "Peri Peri", "Double Cheese", "Chicken Chunky", "Peri
Peri & Cheese", "Chilly Garlic Chicken"}; %>
<%! String[] maggiePrices = {"50", "60", "70", "70",
"60", "80", "90", "90", "90"}; %>
<% for (int i = 0; i < maggieNames.length; i++) { %>

<div class="item">
<div class="name"><%= maggieNames[i] %></div>
<div class="price"><%= maggiePrices[i]
%></div>
</div>
<% } %>
</div>
</section>
<div class="title">Pizza</div>
<div class="items">
<%! String[] pizzaNames = {"Margherita", "Corn",
"Onion Capsicum", "Shrooms", "Farmhouse", "Cottage Cheese", "Salami & Onion",
"Sausage & Onion", "Chunky Chicken", "Fried Chicken", "Chicken Dominator"};
%>
<%! String[] pizzaPrices = {"160", "160", "160",
"170", "180", "200", "190", "190", "190", "200", "220"}; %>
105
<% for (int i = 0; i < pizzaNames.length; i++) { %>

<div class="item">
<div class="name"><%= pizzaNames[i] %></div>
<div class="price"><%= pizzaPrices[i]
%></div>
</div>
<% } %>
</div>
</section>
<div class="title">Bread Pizza</div>
<div class="items">
<%! String[] breadPizzaNames = {"Margherita", "Corn",
"Onion Capsicum", "Shrooms", "Farmhouse", "Cottage Cheese", "Sausage &
Onion", "Chunky Chicken", "Fried Chicken", "Chicken Dominator"}; %>
<%! String[] breadPizzaPrices = {"70", "70", "70",
"80", "90", "100", "100", "100", "110", "120"}; %>
<% for (int i = 0; i < breadPizzaNames.length; i++) {

%>
<div class="item">
<div class="name"><%= breadPizzaNames[i]
%></div>
<div class="price"><%= breadPizzaPrices[i]
%></div>
</div>
<% } %>
</div>
</section>
<div class="title">Combo</div>
<div class="items">
<%! String[] comboNames = {"Classic Veg Burger +
Sprite / Coke", "Classic Chicken Burger + Sprite / Coke", "All Veggie Wrap +
Sprite / Coke", "Chicken Wrap + Sprite / Coke", "Veg Sub + Sprite / Coke",
"Chicken Sub + Sprite / Coke"}; %>
<%! String[] comboPrices = {"99", "140", "110",
"140", "140", "160"}; %>
<% for (int i = 0; i < comboNames.length; i++) { %>

<div class="item">
<div class="name"><%= comboNames[i] %></div>
<div class="price"><%= comboPrices[i]
%></div>
</div>
106
<% } %>
</div>
</section>
</div>
</div>
</body>
</html>
menu.css:
.main-body {
width: 100%;
display: flex;
align-items: space-around;
gap: 4rem;
padding: 5rem 4rem;
}
.about-cafe {
display: flex;
gap: 4rem;
}
.about-cafe .cafedo-logo {
width: 20%;
}
.about-cafe .cafedo-logo img {

width: 100%;
}
.about-cafe .content {
width: 40%;
font-size: 1.4rem;
line-height: 2.4rem;
}
107
.menu {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
padding: 2rem;
}
.menu-card {
display: flex;
gap: 1.4rem;
padding: 2rem;
box-shadow: 0 0 4px #1C295E;
background-color: #1C295E;
color: #ffd66f;
}
.menu-card:hover {
box-shadow: 0 0 8px #1C295E;
text-shadow: 0 0 4px #ffd66f;
}
.menu-card .title {
font-size: 1.6rem;
font-weight: bold;
text-align: center;
letter-spacing: -.08rem;
}
.menu-card .items {
display: flex;
gap: 1.2rem;
}
.menu-card .items .item {

display: flex;
font-size: 1.2rem;
}
108
FILE NAME: USERHEADER.JSP
The “userHeader.jsp” is the same as “header.jsp” but it contains certain links that only
come visible when the user is browsing the café, reports, feedback, and my account
pages.

<%
if (session.getAttribute("id") == null) {
response.sendRedirect("../login.jsp");
}
%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Cafe Hub | Cafe</title>
<link rel="icon" type="image/x-icon" href="../imgs/logo-dark.ico">
<script src="../scripts/my_alert.js"></script>
<link rel="stylesheet" href="../stylesheets/customAlert.css">
<link rel="stylesheet" href="../stylesheets/common.css">

<link rel="stylesheet" href="../stylesheets/header.css">
<link rel="stylesheet" href="../stylesheets/footer.css">
<link rel="stylesheet"
href="../stylesheets/adminElements/adminCommon.css" />
<link rel="stylesheet" href="../stylesheets/userElements/report.css" />
<link rel="stylesheet" href="../stylesheets/userElements/feedback.css" />
<link rel="stylesheet" href="../stylesheets/userElements/my_account.css"
/>
<link rel="stylesheet" href="../stylesheets/userElements/cafe.css" />
</head>
<body>
<div class="logo">
<a href="../home.jsp"><img src="../imgs/logo-light.png"
alt="logo"></a>
</div>
<div class="links">
<ul>
109
<li><a href="../home.jsp">Home</a></li>
<li><a href="../menu.jsp" target="_blank">Menu</a></li>
<li><a href="./cafe.jsp">Cafe</a></li>
<li><a href="./report.jsp">Report</a></li>
<li><a href="./feedback.jsp">Feedback</a></li>
<li><a href="./my_account.jsp">My Account</a></li>
<li><a href="../logout">Logout</a></li>
</ul>
</div>
</div>
FILE NAME: CAFE.JSP
The “cafe.jsp” file establishes a database connection to MySQL, retrieves table
information from the "tables" table in the "onlinecafehub" database, and dynamically
generates HTML forms for each table. The code uses a custom Table class to handle
the database operations. Inside the loop, it retrieves the total number of chairs and
the number of chairs in use for each table. Based on the availability of chairs, it assigns
CSS classes to the form elements and disables the "Join" button if the table is full.
The generated forms include hidden input fields for table ID and action, and a label
displaying the number of chairs in use and the total number of chairs. Finally, it
includes header and footer JSP files to complete the HTML structure of the page.

<%@page import="java.sql.*" %>
<%@page import="com.onlinecafehub.config.Config" %>
<% Class.forName(Config.getMySqlDriver()); %>
<%@include file="./userHeader.jsp" %>
<section>
<div id="cafe-area">
<%!
110
public class Table {

String url = Config.getDbUrl();
String user = Config.getDbUser();
String pass = Config.getDbPass();
Connection connection = null;

PreparedStatement selectTables = null;
ResultSet resultSet = null;
public Table() {
try {
connection = DriverManager.getConnection(url, user,
pass);
selectTables = connection.prepareStatement("SELECT *
FROM tables");
} catch(SQLException e) {
e.printStackTrace();
}
}
public ResultSet getTables() {

try {
resultSet = selectTables.executeQuery();
}
return resultSet;
}
}
%>
<%
Table table = new Table();
ResultSet tables = table.getTables();
int totalChairs, inuse;

Boolean full;
%>
<% while (tables.next()) { %>

<%
totalChairs = tables.getInt("chairs");
inuse = tables.getInt("inuse");
full = inuse == totalChairs ? true : false;
%>
111
<form action="../chat" method="POST" class="<%= full ? "full" :

"available" %>">
<input type="hidden" name="tableid" value="<%=
tables.getInt("id") %>">
<input type="hidden" name="action" value="join">
<input type="submit" value="Join" <%= full ? "disabled" : ""
%>>
<label><%= inuse %> / <%= totalChairs %></label>
</form>
<% } %>
</div>
</section>
<%@include file="../footer.jsp" %>
</body>
</html>
cafe.css:
#cafe-area {
width: 100%;
padding: 4rem 6rem;
display: grid;
gap: 2rem;
}
#cafe-area form {
border: 2px solid red;
padding: 5rem 0;
display: flex;
gap: .6rem;
}
#cafe-area form input[type=submit] {

font-size: 1.4rem;
cursor: pointer;
112
border-radius: 1.2rem;
color: #ffffff;
font-weight: bold;
}
#cafe-area form input[type=submit]:hover {

color: #000000;
}
#cafe-area .full {
border: 2px solid red;
}
#cafe-area .full input[type=submit], #cafe-area .full

input[type=submit]:hover {
background-color: gray;
color: #ffffff;
}
#cafe-area .full:hover {
box-shadow: 0 0 4px red;
}
#cafe-area .available {
}
#cafe-area .available:hover {
box-shadow: 0 0 4px #262626;
}
FILE NAME: CHATROOM.JSP
The “chatroom.jsp” page displays a chat container with a chat window and a form for
sending messages. It also includes a form for leaving the chat room and external links
for ordering food. The JavaScript code establishes a WebSocket connection to a chat
113
server using the user's session attributes. It handles incoming messages, dynamically
creates message components, and appends them to the chat window. It also sends user
messages to the server via the WebSocket connection.

<!DOCTYPE html>
<html>
<head>
<title>Chat Room</title>
<link rel="stylesheet" href="../stylesheets/userElements/chatroom.css">
</head>
<body onbeforeunload="handleExit()">
<div class="chat-container">
<form action="../chat" method="POST" id="leave-links">
<input type="hidden" name="action" value="leave" />
<ul>
<li><input type="submit" value="Leave" /></li>
<li><a href="https://www.swiggy.com/" target="_blank">Order
on Swiggy!</a></li>
<li><a href="https://www.zomato.com/ncr/cafedo-chittaranjan-
park-new-delhi" target="_blank">Order on Zomato!</a></li>
</ul>
</form>
<form id="chatform">
<div id="chat-window"></div>
<div class="chat-options">
<input type="hidden" name="username" value="<%=
session.getAttribute("name").toString() + " : [ " +
session.getAttribute("id") + " ]" %>" />
<input type="text" name="message" id="message" />
<input type="button" value="Send" onclick="return
sendMessage();" />
</div>
</form>
</div>
<script>
window.addEventListener('onbeforeunload', e => {
document.getElementById("leave-links").submit();
114
return true;
});
let wsUrl = (window.location.protocol == 'http:') ? "ws://" :

"wss://";
let tableId = "<%= session.getAttribute("tableid").toString() %>";

let name = "<%= session.getAttribute("name").toString() %>";
let userId = "<%= session.getAttribute("id").toString() %>";
let wsCon = new WebSocket(wsUrl + window.location.host +
"/OnlineCafeHub/chatws/" + tableId + "/" + name + "/" + userId);
let alter = true;
wsCon.onmessage = e => {
let chatWindow = document.getElementById("chat-window");
// Creating the message component
let msgDiv = document.createElement('div');
msgDiv.classList.add('msgDiv', alter ? 'msg-div-1' : 'msg-div-
2');
alter = !alter;
let userDiv = document.createElement('div');

userDiv.className = 'username';
userDiv.innerText = e.data.split("|")[0] + " [ ID: " +
e.data.split("|")[1] + " ]";
let chatDiv = document.createElement('div');

chatDiv.className = 'chat-msg';
chatDiv.innerText = e.data.split("|")[2];
msgDiv.append(userDiv, chatDiv);
chatWindow.append(msgDiv);
msgDiv.scrollIntoView({behavior: "smooth"});
}
wsCon.onerror = e => {
console.log("Error" + e);
}
function sendMessage() {
let msgElement = document.getElementById('message');
let msg = msgElement.value;
115
if (msg) {
// Append the tableid along with the message
msg = "<%= session.getAttribute("tableid").toString() %>|" +
msg;
wsCon.send(msg);
}
msgElement.value = "";
}
</script>
</body>
</html>
chatroom.css:
.chat-container {
width: 100%;
height: 100vh;
padding: 2rem 4rem;
display: flex;
gap: 2rem;
}
#leave-links ul {
list-style: none;
display: flex;
}
#leave-links li a, #leave-links input {

font-size: 1.2rem;
color: #000000;
font-weight: bold;
cursor: pointer;
}
116
#leave-links li a:hover, #leave-links input:hover {

}
/* ========== CHAT WINDOW ========== */
#chatform {
width: 100%;
height: 100%;
display: flex;
gap: .6rem;
}
#chat-window {
width: 100%;
display: flex;
gap: .8rem;
font-size: 1.4rem;
height: 75vh;
outline: none;
box-shadow: 0 0 4px #262626;
overflow-y: scroll;
}
#chatform .chat-options {
box-shadow: 0 0 2px #262626;
width: 100%;
display: flex;
gap: 1rem;
}
#chatform .chat-options input {

font-size: 1.4rem;
outline: none;
}
117
#chatform .chat-options input[type=text] {

width: 90%;
}
#chatform .chat-options input[type=button] {

border-radius: 1.4rem;
cursor: pointer;
width: 10%;
font-weight: bold;
color: #000000;
}
#chatform .chat-options input[type=button]:hover, #chatform .chat-options

input[type=button]:focus {
}
#chatform .chat-options input[type=text]:hover, #chatform .chat-options

input[type=text]:focus {
}
/* ========== CHAT WINDOW MESSAGE STYLES ========== */
.msgDiv {
word-break: break-all;
padding: .8rem;
border-radius: 0 1.4rem 1.4rem 1.4rem;
display: flex;
gap: .6rem;
}
.msg-div-1 {
}
.msg-div-2 {
background-color: #ffe6a8;
}
.username {
118
text-decoration: underline;
font-weight: bold;
font-size: 1.2rem;
}
FILE NAME: REPORT.JSP
The “report.jsp” page displays a form for reporting an offender, a table showing the
user's previous reports, and a note section. The Java code within the JSP handles
database operations related to reports. The JavaScript code includes functions for
validating the report form, displaying alerts based on the report status, and submitting
the form. It also resets the status attribute of the user's session.

<section>
<div class="_container">
session.getAttribute("status") == null ? "null" :
session.getAttribute("status").toString() %>" />
<input type="hidden" name="pageinfo" value="report" />
<input type="hidden" id="action" name="action" />
<form id="report_form" method="POST" action="../report">

<input type="number" id="userid" name="offenderid"
placeholder="Enter User Id..." />
<input type="text" id="reason" name="reason" placeholder="Enter
Reason..." />
<input type="button" value="Report" onclick="report()" />

</form>
<div class="report_table">
<div style="
padding: .6rem;
119
font-size: 1.4rem;
font-weight: bold;
text-align: center;
">Your Reports</div>
<%!
public class Report {

PreparedStatement selectReports = null;
public Report() {
try {
connection = DriverManager.getConnection(url,
user, pass);
selectReports =
connection.prepareStatement("SELECT * FROM reports");
}
}
public ResultSet getReports() {

try {
resultSet = selectReports.executeQuery();
}
return resultSet;
}
}
%>
<%
Report feedback = new Report();
ResultSet reports = feedback.getReports();
Boolean alternate = true;
%>
<div class="report__table">
<div class="report__table-head">
<div>ID</div>
120
<div>Offender ID</div>
<div>Reporter ID</div>
<div>Reason</div>
<div>Date</div>
<div>Time</div>
<div>Action</div>
</div>
<div class="report__table-body" style="max-height: 28rem">

<% while(reports.next()) { %>
<% if ( reports.getInt("reporter_id") ==
Integer.parseInt(session.getAttribute("id").toString()) ) { %>
<div class="<%= alternate ? "alt-color-1" : "alt-
color-2" %> report__table-body-row">
<div><%= reports.getInt("r_id") %></div>
<div><%= reports.getInt("offender_id") %></div>
<div><%= reports.getInt("reporter_id") %></div>
<div onclick="myAlert('<%=
reports.getString("reason") %>')" style="cursor:pointer; text-decoration:
underline;"><%= reports.getString("reason").length() < 40 ?
reports.getString("reason") : reports.getString("reason").substring(0, 80) +
"..." %></div>
<div><%= reports.getString("r_date").split("
")[0] %></div>
<div><%= reports.getString("r_date").split("
")[1] %></div>
<div><%= reports.getString("action") %></div>
</div>
<% alternate = !alternate; %>
<% } %>
<% } %>
</div>
</div>
</div>
<div class="note">
<div class="heading">Note:</div>
Log of each report is made on the admin site. Make sure your
report is genuine else, action will be taken against you.
</div>
</div>
</div>
<script>
if (showAlert()) {
121
}
}
function report() {
document.getElementById("action").value = "report";
validate();
}
function validate() {
if (!document.getElementById('userid').value.length ||
document.getElementById('userid').value < 0)
return myAlert("Error: Please enter User ID. User ID can only
be a positive integer.");
if (!document.getElementById('reason').value.length ||
document.getElementById('reason').value.length > 255)
return myAlert("Error: Please enter a reason. Reason should
not exceed 255 characters.");
document.getElementById('report_form').submit();
}

</script>
</section>
</body>
</html>
report.css:
._container {
width: 100%;
padding: 6rem 8rem;
display: flex;
122
gap: 4rem;
}
#report_form {
width: 30%;
display: flex;
gap: 1.2rem;
}
#report_form input {
font-size: 1.4rem;
outline: none;
}
#report_form input:hover, #report_form input:focus {

}
#report_form input[type=button] {
font-weight: bold;
color: #000000;
cursor: pointer;
}
#report_form input[type=button]:hover, #report_form input[type=button]:focus

{
}
/* ========== REPORT TABLE ==========*/
.report_table {
border: 2px solid black;
width: 100%;
}
.report__table {
display: flex;
123
position: relative;
font-size: 1.4rem;
max-height: 90%;
}
.report__table-head {
display: grid;
font-weight: bold;
color: #ffffff;
padding: .4rem;
}
.report__table-body {
display: flex;
}
.report__table-body-row {
display: grid;
padding: .4rem;
}
FILE NAME: FEEDBACK.JSP
The “feedback.jsp” page displays a form for submitting feedback, which consists of a
textarea for entering a message and a submit button. The JavaScript code handles the
validation of the form, displays alerts based on the feedback status, and submits the
form. The status attribute of the user's session is reset. The code also includes header
and footer files.

<section>
124

<input type="hidden" name="pageinfo" value="report" />
<input type="hidden" id="action" name="action" />
<form id="feedback_form" method="POST" action="../feedback">

<textarea id="message" name="message" placeholder="Enter your
message..." rows="10" cols="30"></textarea>
<input type="button" value="Submit" onclick="feedback()" />
</form>
</div>
<script>
if (showAlert()) {
}
}
function feedback() {
document.getElementById("action").value = "feedback";
validate();
}
if (!document.getElementById('message').value.length ||
document.getElementById('message').value.length > 255)
return myAlert("Error: Please enter a reason. Reason should
not exceed 255 characters.");
document.getElementById('feedback_form').submit();
}

</script>
</section>
</body>
</html>
125
FILE NAME: MY_ACCOUNT.JSP
The “my_account.jsp” page displays the user's details such as user ID, name, email,
phone number, tokens, and violations. The information is retrieved from a MySQL
database using JDBC. The page also provides forms for updating the user's email,
phone number, and password. The JavaScript code handles form validation, displays
alerts based on the status, and resets the status attribute of the user's session. The
code includes header and footer files as well as a JavaScript file for field validation.

<section>
<div class="acc__information">
<% int user_id =
Integer.parseInt(session.getAttribute("id").toString()); %>
<%
Connection con = DriverManager.getConnection(url, user,

pass);
PreparedStatement pst = null;
ResultSet rs = null;
try {
String query = "SELECT u_email,u_phn,u_tokens,violations
FROM users WHERE u_id=?";
pst = con.prepareStatement(query);
pst.setInt(1, user_id);
126
rs = pst.executeQuery();
rs.next();
} catch (SQLException e) {
}
%>
<div class="details">
<label>User ID:</label>
<label><%= session.getAttribute("id").toString() %></label>
</div>
<label>Name:</label>
<label><%= session.getAttribute("name").toString() %></label>
</div>
<label>Email:</label>
<label><%= rs.getString("u_email") %></label>
</div>
<label>Phone Number:</label>
<label><%= rs.getString("u_phn") %></label>
</div>
<label>Tokens:</label>
<label><%= rs.getString("u_tokens") %></label>
</div>
<label>Violations:</label>
<label><%= rs.getString("violations") %></label>
</div>
</div>
<div class="update-info">
<form id="update-email" class="update-form" method="POST"
action="../update">
<input type="hidden" name="action" value="email" />
<input type="email" name="email" id="email_ue"
placeholder="Enter New Email...">
<input type="password" name="password" id="password_ue"
placeholder="Enter Password..." />
<input type="button" value="Update Email"
onclick="validateFields(['email_ue', 'password_ue'], 'update-email')" />
</form>
<form id="update-phn" class="update-form" method="POST"
action="../update">
<input type="hidden" name="action" value="phn" />
127
<input type="number" name="phn" id="phn" placeholder="Enter

New Phone Number...">
<input type="password" name="password" id="password_uphn"
placeholder="Enter Password..." />
<input type="button" value="Update Phone"
onclick="validateFields(['phn', 'password_uphn'], 'update-phn')" />
</form>
<form id="update-password" class="update-form" method="POST"
action="../update">
<input type="hidden" name="action" value="password" />
<input type="password" name="newpassword"
id="newpassword_upass" placeholder="Enter New Password...">
<input type="password" name="password" id="password_upass"
placeholder="Enter Old Password..." />
<input type="button" value="Update Password"
onclick="validateFields(['newpassword_upass', 'password_upass'], 'update-
password')" />
</form>
</div>
</div>
<script src="../scripts/fieldValidation.js"></script>
<script>
if (showAlert()) {
}
}

</script>
</section>
</body>
</html>
128
my_account.css:
.acc__information {
width: 50%;
padding: 2rem;
display: flex;
gap: 1rem;
box-shadow: 0 0 4px #262626;
}
.acc__information:hover {
box-shadow: 0 0 4px #ffd66f;
}
.acc__information .details {
display: grid;
grid-template-columns: 1fr 1fr;
font-size: 1.4rem;
}
.acc__information .details label:nth-child(1) {

font-weight: bold;
}
.update-info {
width: 80%;
display: flex;
gap: 4rem;
padding: 2rem;
}
.update-form {
box-shadow: 0 0 4px #262626;
display: flex;
gap: 1.2rem;
padding: 1.4rem;
129
.update-form:hover {
box-shadow: 0 0 8px #262626;
}
.update-form input {
width: 35%;
font-size: 1.2rem;
outline: none;
}
.update-form input:hover, .update-form input:focus {

}
.update-form input[type=button] {
width: 30%;
font-weight: bold;
color: #000000;
cursor: pointer;
}
.update-form input[type=button]:hover {
}
FILE NAME: ADMINHEADER.JSP:
The “adminHeader.jsp” is the same as “header.jsp” but this incorporates a few extra
links that only an admin / staff can access.

<%
130
if (session.getAttribute("id") == null &&

session.getAttribute("privilege") == null) {
response.sendRedirect("../login.jsp");
}
%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Cafe Hub | Admin</title>
<link rel="icon" type="image/x-icon" href="../imgs/logo-dark.ico">

<link rel="stylesheet" href="../stylesheets/admin_style.css">
<link rel="stylesheet" href="../stylesheets/header.css">
<link rel="stylesheet" href="../stylesheets/footer.css">
<link rel="stylesheet"
href="../stylesheets/adminElements/adminCommon.css" />
<link rel="stylesheet" href="../stylesheets/adminElements/token_mgmt.css"
/>
<link rel="stylesheet" href="../stylesheets/adminElements/table_mgmt.css"
/>
<link rel="stylesheet" href="../stylesheets/adminElements/user_mgmt.css"
/>
<link rel="stylesheet" href="../stylesheets/adminElements/feedbacks.css"
/>
<link rel="stylesheet" href="../stylesheets/adminElements/reports.css" />
<link rel="stylesheet" href="../stylesheets/userElements/report.css" />
<script src="../scripts/my_alert.js"></script>
<link rel="stylesheet" href="../stylesheets/customAlert.css">
</head>
<body>
<div class="logo">
<a href="../home.jsp"><img src="../imgs/logo-light.png"
alt="logo"></a>
</div>
<div class="links">
<ul>
<li><a href="../home.jsp">Home</a></li>
<li><a href="./token_mgmt.jsp">Token Management</a></li>
<li><a href="./table_mgmt.jsp">Table Management</a></li>
<li><a href="./user_mgmt.jsp">User Management</a></li>
131
<li><a href="./reports.jsp">Reports</a></li>
<li><a href="./feedbacks.jsp">Feedbacks</a></li>
<li><a href="../logout">Logout</a></li>
</ul>
</div>
</div>
adminCommon.css:
.admin__container {
height: 80vh;
display: flex;
}
#admin__form {
height: 60%;
width: 40%;
padding: 4%;
display: flex;
border-radius: 24px;
box-shadow: 0 0 6px black;
}
.admin__inputs {
width: 100%;
display: flex;
gap: 10px;
}
.admin__inputs input {
font-size: 1.4rem;
outline: none;
}
132
.admin__inputs input:hover, .admin__inputs input:focus {

border: 2px solid #ffffff;
}
.admin__buttons input {
margin-top: 1.4rem;
font-size: 1.2rem;
color: black;
cursor: pointer;
}
.admin__buttons input:nth-child(1) {
margin-right: 1.6rem;
}
.admin__buttons input:hover, .admin__buttons input:hover {

}
.admin__note-heading {
color: #ff0000;
}
FILE NAME: TOKEN_MGMT.JSP
The “token_mgmt.jsp” (token management) page includes a form where admins can
add or remove tokens for a specific user with reason. The form has inputs for user ID,
tokens, and reason. There are buttons for adding or removing tokens, which trigger
JavaScript functions for form validation and submission. The code also displays alerts
based on the status, resets the status attribute of the user's session, and includes a
note about access restrictions. The header and footer files are included as well.
133

<%@include file="./adminHeader.jsp" %>
<section>
<div class="token__container">
<form id="admin__form" method="POST" action="../tokenmgmt">

<input type="hidden" name="pageinfo" value="token mgmt" />


<input type="hidden" name="action" id="action" />
<div class="admin__inputs">
<input type="number" name="userid" id="userid"
placeholder="Enter User ID..." />
<input type="number" name="tokens" id="tokens"
placeholder="Enter Tokens..." />
<input type="text" name="reason" id="reason"
placeholder="Enter Reason..." />
</div>
<div class="admin__buttons">
<input type="button" value="Add Tokens" onclick="addTokens()"
/>
<input type="button" value="Remove Tokens"
onclick="removeTokens()" />
</div>
</form>
<div class="admin__note">
<p class="admin__note-heading">Note:</p>
<p class="admin__note-desc">
Only staff with admin level clearance (privilege 1) are
allowed to use this feature. Unauthorized access will be recorded.
</p>
</div>
<script>
if (showAlert()) {
}
134
}
function addTokens() {
document.getElementById("action").value = "add";
validate();
}
function removeTokens() {
document.getElementById("action").value = "remove";
validate();
}
return myAlert("Error: Please enter User ID. User ID can
only be a positive integer.")
if (!document.getElementById('tokens').value.length ||
document.getElementById('tokens').value < 0)
return myAlert("Error: Please enter correct tokens.
Tokens can only be positive integers")
return myAlert("Error: Please enter a reason. Reason
should not exceed 255 characters.");
document.getElementById('admin__form').submit();
}
</script>

</div>
</section>
</body>
</html>
token_mgmt.css:
.token__container {
135
height: 80vh;
display: flex;
}
FILE NAME: TABLE_MGMT.JSP
The “table_mgmt.jsp” page includes a form that allows administrators to add, update,
or remove tables. The form has input fields for table ID and chairs. The code also
connects to a MySQL database using JDBC and retrieves table data from the "tables"
table. The table data is displayed in a formatted manner on the page, including
columns for ID, chairs, in use, and available. JavaScript functions are used to handle
form validation and submit the form based on the selected action.
<%@page import="java.sql.DriverManager"%>

<section>
<div class="admin__container">
<form id="admin__form" method="POST" action="../tablemgmt">

<input type="hidden" name="pageinfo" value="table mgmt" />


136
<input type="number" name="tableid" id="tableid"

placeholder="Enter Table ID..." />
<label style="color: red; font-size: .6rem; margin-top: -
.6rem;">*Not needed for Adding a Table</label>
<input type="number" name="chairs" id="chairs"
placeholder="Enter Chairs..." />
</div>
<input type="button" value="Add Table" onclick="addTable()"
/>
<input type="button" value="Update Table"
onclick="updateTable()" />
<input type="button" value="Remove Table"
onclick="removeTable()" />
</div>
</form>
<div style="margin-top: 2rem; height: 26rem; width: 40rem; position:

relative;">
<%!
public class Table {

PreparedStatement selectTables = null;
public Table () {
try {
user, pass);
selectTables =
connection.prepareStatement("SELECT * FROM tables");
}
}
public ResultSet getActors() {

try {
resultSet = selectTables.executeQuery();
137
return resultSet;
}
}
%>
<%
Table table = new Table();
ResultSet tables = table.getActors();
%>
<div class="table__table">
<div class="table__table-head">
<div>ID</div>
<div>Chairs</div>
<div>In Use</div>
<div>Available</div>
</div>
<div class="table__table-body">
<% while(tables.next()) { %>
<div class="<%= alternate ? "alt-color" : "" %>
table__table-body-row">
<div><%= tables.getInt("id") %></div>
<div><%= tables.getInt("chairs") %></div>
<div><%= tables.getInt("inuse") %></div>
<div><%= tables.getInt("available") %></div>
</div>
<% } %>
</div>
</div>
</div>
<script>
if (showAlert()) {
}
}
138
function addTable() {
document.getElementById("action").value = "add";
validate();
}
function updateTable() {
document.getElementById("action").value = "update";
validate();
}
function removeTable() {
document.getElementById("action").value = "remove";
validate();
}
if
(["update","remove"].includes(document.getElementById("action").value) &&
!document.getElementById('tableid').value.length ||
document.getElementById('tableid').value < 0)
return myAlert("Error: Please enter Table ID. Table ID
can only be a positive integer.");
if
(["add","update"].includes(document.getElementById("action").value) &&
!document.getElementById('chairs').value.length ||
document.getElementById('chairs').value < 0)
return myAlert("Error: Please enter chairs. Chairs can
only be positive integers");
}

</script>
</div>
</section>
</body>
</html>
139
table_mgmt.css:
.table__table {
display: flex;
max-height: 90%;
position: relative;
}
.table__table-head {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
width: 40rem;
}
.table__table-head div {
width: 100%;
font-weight: bold;
}
.table__table-body {
display: flex;
width: 40rem;
overflow-y: scroll;
}
.table__table-body-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
width: 100%;
}
.table__table .alt-color {
background-color: #fcbc83;
}
140
FILE NAME: USER_MGMT.JSP
The “user_mgmt.jsp” page includes a form that allows administrators to ban or unban
users. The form has input fields for user ID and reason. The code also connects to a
MySQL database using JDBC and retrieves user data from the "users" table. The user
data is displayed in a formatted table, including columns for ID, name, email, phone,
tokens, banned status, and violations. JavaScript functions handle form validation and
submit the form based on the selected action.

<section style="height: 100vh;">

<div class="_container" style="margin-top: 3.6rem;">
<form id="admin__form" method="POST" action="../usermgmt">

<input type="hidden" name="pageinfo" value="user mgmt" />


<input type="number" name="userid" id="userid"
placeholder="Enter User ID..." />
<input type="text" name="reason" id="reason"
placeholder="Enter Reason..." />
</div>
<input type="button" value="Ban User" onclick="banUser()" />
<input type="button" value="Unban User" onclick="unbanUser()"
/>
</div>
141
</form>
<div style="margin-top: 2rem; height: 26rem; width: 80%; position:

relative;">
<%!
public class User {

PreparedStatement selectUsers = null;
public User () {
try {
user, pass);
selectUsers = connection.prepareStatement("SELECT
* FROM users");
}
}
public ResultSet getActors() {

try {
resultSet = selectUsers.executeQuery();
}
return resultSet;
}
}
%>
<%
User user = new User();
ResultSet users = user.getActors();
%>
<div class="user__table">
<div class="user__table-head">
<div>ID</div>
142
<div>Name</div>
<div>Email</div>
<div>Phone</div>
<div>Tokens</div>
<div>Banned</div>
<div>Violations</div>
</div>
<div class="user__table-body">
<% while(users.next()) { %>
user__table-body-row">
<div><%= users.getInt("u_id") %></div>
<div><%= users.getString("u_name") %></div>
<div onclick="alert('<%=
users.getString("u_email") %>')" style="cursor:pointer; text-decoration:
underline;"><%= users.getString("u_email").length() < 18 ?
users.getString("u_email") : users.getString("u_email").substring(0, 18) +
"..." %></div>
<div><%= users.getString("u_phn") %></div>
<div><%= users.getInt("u_tokens") %></div>
<div><%= users.getString("banned") %></div>
<div><%= users.getInt("violations") %></div>
</div>
<% } %>
</div>
</div>
</div>
Only staff with admin level clearance (privilege 1) are
allowed to use this feature. Unauthorized access will be recorded.
</p>
</div>
<script>
if (showAlert()) {
}
143
}
function banUser() {
document.getElementById("action").value = "ban";
validate();
}
function unbanUser() {
document.getElementById("action").value = "unban";
validate();
}
return myAlert("Error: Please enter User ID. User ID can
only be a positive integer.");
return myAlert("Error: Please enter a reason. Reason
should not exceed 255 characters.");
}

</script>
</div>
</section>
</body>
</html>
user_mgmt.css:
.user__container {
height: 80vh;
display: flex;
144
.user__table {
display: flex;
max-height: 90%;
position: relative;
}
.user__table-head {
display: grid;
grid-template-columns: 5% 20% 25% 13% 10% 10% 10%;
width: 100%;
grid-gap: .5rem;
}
.user__table-head div {
font-weight: bold;
}
.user__table-body {
display: flex;
width: 100%;
max-height: 20rem;
overflow-y: scroll;
}
.user__table-body-row {
display: grid;
width: 100%;
grid-gap: .5rem;
}
.user__table-body-row div {
word-wrap: break-word;
}
.user__table .alt-color {
background-color: #fcbc83;
145
FILE NAME: REPORTS.JSP
The “reports.jsp” page retrieves data from a MySQL database using JDBC to fetch
information from the "reports" table. The retrieved data includes the ID of the report,
offender ID, reporter ID, reason, date, time, and action. This data is displayed in a
formatted table with columns representing the aforementioned attributes. The code
also includes a note section that provides instructions to administrators on how to take
action against a user by navigating to the "user management" page.

<section style="display: flex; flex-direction: column; justify-content:
center; align-items: center;">
relative;">
<%!
public class Report {

PreparedStatement selectReports = null;
public Report() {
try {
pass);
146
selectReports = connection.prepareStatement("SELECT *
FROM reports");
}
}
public ResultSet getReports() {

try {
resultSet = selectReports.executeQuery();
}
return resultSet;
}
}
%>
<%
Report feedback = new Report();
ResultSet reports = feedback.getReports();
%>
<div class="report__table-head">
<div>ID</div>
<div>Offender ID</div>
<div>Reporter ID</div>
<div>Reason</div>
<div>Date</div>
<div>Time</div>
<div>Action</div>
</div>
<div class="user__table-body" style="max-height: 28rem">

<% while(reports.next()) { %>
report__table-body-row">
<div><%= reports.getInt("r_id") %></div>
<div><%= reports.getInt("offender_id") %></div>
<div><%= reports.getInt("reporter_id") %></div>
<div onclick="alert('<%= reports.getString("reason")
%>')" style="cursor:pointer; text-decoration: underline;"><%=
reports.getString("reason").length() < 40 ? reports.getString("reason") :
reports.getString("reason").substring(0, 80) + "..." %></div>
147
<div><%= reports.getString("r_date").split(" ")[0]

%></div>
<div><%= reports.getString("r_date").split(" ")[1]
%></div>
<div><%= reports.getString("action") %></div>
</div>
<% } %>
</div>
</div>
</div>
To take action against an user please go to <a
href="./user_mgmt.jsp">user management</a>.
</p>
</div>
</section>
</body>
</html>
reports.css:
.report__table-head {
display: grid;
width: 100%;
grid-gap: .5rem;
}
.report__table-head div {
font-weight: bold;
}
.report__table-body-row {
display: grid;
148
width: 100%;
grid-gap: .5rem;
}
.report__table-body-row div {
}
FILE NAME: FEEDBACKS.JSP
The “feedbacks.jsp” page retrieves data from a MySQL database using JDBC to fetch
information from the "feedback" table. The retrieved data includes the ID of the
feedback, user ID, feedback message, date, and time. This data is displayed in a
formatted table with columns representing the aforementioned attributes. The code
includes a CSS class called "alt-color" to alternate the background color of table rows
for better readability.

<section style="display: flex; justify-content: center; align-items:
center;">
relative;">
<%!
public class Feedback {

PreparedStatement selectFeedbacks = null;
149
public Feedback() {
try {
pass);
selectFeedbacks = connection.prepareStatement("SELECT
* FROM feedback");
}
}
public ResultSet getFeedbacks() {

try {
resultSet = selectFeedbacks.executeQuery();
}
return resultSet;
}
}
%>
<%
Feedback feedback = new Feedback();
ResultSet feedbacks = feedback.getFeedbacks();
%>
<div class="feedback__table-head">
<div>ID</div>
<div>User ID</div>
<div>Feedback</div>
<div>Date</div>
<div>Time</div>
</div>
<div class="user__table-body" style="max-height: 28rem">

<% while(feedbacks.next()) { %>
feedback__table-body-row">
<div><%= feedbacks.getInt("f_id") %></div>
<div><%= feedbacks.getInt("u_id") %></div>
150
<div onclick="alert('<%=
feedbacks.getString("message") %>')" style="cursor:pointer; text-decoration:
underline;"><%= feedbacks.getString("message").length() < 40 ?
feedbacks.getString("message") : feedbacks.getString("message").substring(0,
40) + "..." %></div>
<div><%= feedbacks.getString("f_date").split(" ")[0]
%></div>
<div><%= feedbacks.getString("f_date").split(" ")[1]
%></div>
</div>
<% } %>
</div>
</div>
</div>
</section>
</body>
</html>
feedbacks.jsp:
.feedback__table-head {
display: grid;
grid-template-columns: 5% 10% 40% 20% 20%;
width: 100%;
grid-gap: .5rem;
}
.feedback__table-head div {
font-weight: bold;
}
.feedback__table-body-row {
display: grid;
grid-template-columns: 5% 10% 40% 20% 20%;
width: 100%;
grid-gap: .5rem;
}
151
.feedback__table-body-row div {
}
CONFIG PACKAGE
Config.java:
This module provides static getters for Database and Mail Server configuration details
like URL, Password, Username, etc.
package com.onlinecafehub.config;
public class Config {

private static String db_url =
"jdbc:mysql://localhost:3306/onlinecafehub";
private static String db_user = "root";
private static String db_password = "root";
private static String mysql_driver = "com.mysql.cj.jdbc.Driver";
private static String mail_server_host = "smtp.gmail.com";
private static String mail_server_port = "587";
private static String mail_server_user = "onlinecafehub";
private static String mail_server_pass = "root";
// ===== DB CONFIG =====
public static String getDbUrl() {

return db_url;
}
public static String getDbUser() {

return db_user;
}
public static String getDbPass() {

return db_password;
}
public static String getMySqlDriver() {

return mysql_driver;
}
152
// ===== MAIL SERVER CONFIG =====
public static String getMailServerHost() {

return mail_server_host;
}
public static String getMailServerPort() {

return mail_server_port;
}
public static String getMailServerUser() {

return mail_server_user;
}
public static String getMailServerPass() {

return mail_server_pass;
}
}
AUTHENTICATION PACKAGE
RegistrationServlet.java:
This servlet is accessible through the “/register” route and accepts on the POST
method. The registration form in “login.jsp” submits the data to this servlet.
If a user tries to register with the “onlinecafehub” domain, it will send an error message.
If the fields are valid, a connection to the database is made and a query is run to check
if the user already exists or not. If user is already registered, an error message is sent
else the password is hashed and stored in the database. Upon success or failure, a
message is sent regardless.
package com.onlinecafehub.authentication;
import com.onlinecafehub.config.Config;
153
package com.onlinecafehub.authentication.PasswordHashing;
import java.io.IOException;
import jakarta.servlet.RequestDispatcher;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
@WebServlet("/register")
public class RegistrationServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse

response)
throws ServletException, IOException {
String u_name = request.getParameter("name");
String u_email = request.getParameter("email");
String u_phn = request.getParameter("phn");
String u_pass = request.getParameter("pass");
RequestDispatcher dispatcher =
request.getRequestDispatcher("login.jsp");
Connection con = null;
String query;
if (u_email.contains("onlinecafehub")) {
request.setAttribute("status", "Error: You are not allowed to use
the onlinecafehub domain to register on this site.");
dispatcher.forward(request, response);
return;
}
try {
Class.forName(Config.getMySqlDriver());
154
con = DriverManager.getConnection(url, user, pass);
// CHECK IF RECORD ALREADY EXISTS

query = "SELECT * FROM users WHERE u_email=? OR u_phn=?";
PreparedStatement pst = con.prepareStatement(query);
pst.setString(1, u_email);
pst.setString(2, u_phn);
ResultSet rs = pst.executeQuery();
if (rs.isBeforeFirst()) {
request.setAttribute("status", "Error: Email and/or Phone
Number already in use OR user banned.");
return;
}
// HASH THE PASSWORD

byte[] salt;
String hashedPassword;
PasswordHashing ph = new PasswordHashing();

try {
salt = ph.generateSalt();
hashedPassword = ph.hashPassword(u_pass, salt);
// INSERT RECORD
query = "INSERT INTO users(u_name, u_email, u_phn, u_pass,
u_tokens) VALUES(?, ?, ?, ?, DEFAULT)";
pst.setString(1, u_name);
pst.setString(3, u_phn);
pst.setString(4, hashedPassword);
int rowCount = pst.executeUpdate();
if (rowCount > 0) {
request.setAttribute("status", "Success: Account created
successfully!");
} else {
request.setAttribute("status", "Error: Failed to create
account.");
}
} catch (Exception e) {
155
}
} finally {
try {
con.close();
}
}
}
}
LoginServlet.java:
This servlet is accessible through the “/login” route and accepts on the POST method.
The login form in “login.jsp” submits the data to this servlet.
Whether an admin / staff or user is logging in is checked by finding if the email
contains the domain, “onlinecafehub” or not. A Boolean flag is set accordingly.
A connection to the database is made and a query is run to check if the user / admin
/ staff exists or not. Upon success or failure, a message is sent regardless.
package com.onlinecafehub.authentication.PasswordHashing;
156
import jakarta.servlet.http.HttpSession;
@WebServlet("/login")
public class LoginServlet extends HttpServlet {

response)
String u_email = request.getParameter("email");
String u_pass = request.getParameter("pass");
// CHECK IF USER LOGIN OR ADMIN LOGIN

Boolean isAdmin = u_email.contains("onlinecafehub");
request.getRequestDispatcher("index.jsp");
String query;
HttpSession session = request.getSession();
try {
// CHECK IF USER EXISTS AND WHETHER THEY ARE BANNED OR NOT

if (!isAdmin) {
query = "SELECT * FROM users WHERE u_email=?";
dispatcher = request.getRequestDispatcher("login.jsp");
157
if (rs.next()) {
String hashedPassword = rs.getString("u_pass");
if (rs.getString("banned").equals("false") &&
ph.verifyPassword(u_pass, hashedPassword)) {
session.setAttribute("id", rs.getInt(1));
session.setAttribute("name", rs.getString("u_name"));
} else {
request.setAttribute("status", "Error: User is banned
or invalid credentials.");
}
} else {
request.setAttribute("status", "Error: Record not
found.");
}
} else {
// CHECK IF ADMIN EXISTS
query = "SELECT * FROM admins WHERE a_email=? AND a_pass=?";
pst.setString(2, u_pass);
if (rs.next()) {
session.setAttribute("id", rs.getInt(1));
session.setAttribute("privilege", rs.getInt(6));
} else {
request.setAttribute("status", "Error: Record not
found.");
dispatcher = request.getRequestDispatcher("login.jsp");
}
}
} finally {
try {
con.close();
}
}
}
}
158
LogoutServlet.java
This servlet is responsible for deleting user session and redirecting them to the
“login.jsp” page.
/**
* Servlet implementation class LogoutServlet
*/
@WebServlet("/logout")
public class LogoutServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse

response) throws ServletException, IOException {
session.invalidate();
response.sendRedirect("login.jsp");
}
}
WEBSOCKET PACKAGE
ChatWS.java:
The "WebWS.java" file defines a WebSocket server endpoint for the chatting feature.
The ChatWS class is annotated with @ServerEndpoint to designate it as a WebSocket
server endpoint. The specified URL pattern (/chatws/{tableId}/{name}/{userId})
159
determines the endpoint's address that clients can connect to. The {tableId}, {name},
and {userId} are path parameters that clients need to provide when connecting to the
WebSocket.
The class defines various methods annotated with @OnOpen, @OnClose, @OnError,
and @OnMessage. These annotations indicate the behaviour associated with specific
events in the WebSocket lifecycle.
When a new WebSocket connection is established, the @OnOpen method is invoked.
It receives the current session and extracts the path parameters (tableId, name, and
userId) from the connection URL. These parameters are then stored as user properties
in the session, allowing the server to identify and associate the connection with specific
chat participants. The session is also added to the userSessions set, which keeps track
of all active WebSocket sessions.
The @OnClose method is called when a WebSocket connection is closed. It removes
the session associated with the closing connection from the userSessions set.
If an error occurs during the WebSocket communication, the @OnError method is
triggered, printing the error message to the console for debugging purposes.
The @OnMessage method handles incoming messages from clients. It expects messages
to be in a specific format: tableId|actualMessage. The method parses the message to
extract the table ID, and it retrieves the sender's name and user ID from the session's
160
user properties. The method then iterates over the userSessions set and broadcasts the
formatted message to all sessions associated with the specified table.
The extractTableIdFromSession method is a helper method used within the
@OnMessage method. It retrieves the table ID associated with a session from its user
properties.
package com.onlinecafehub.websocket;
import jakarta.websocket.Session;
import java.util.Collections;
import java.util.Map;
import java.util.Set;
import java.util.concurrent.ConcurrentHashMap;
import jakarta.websocket.OnClose;
import jakarta.websocket.OnError;
import jakarta.websocket.OnMessage;
import jakarta.websocket.OnOpen;
import jakarta.websocket.server.PathParam;
import jakarta.websocket.server.ServerEndpoint;
@ServerEndpoint("/chatws/{tableId}/{name}/{userId}")
public class ChatWS {
private static Set<Session> userSessions = Collections.newSetFromMap(new
ConcurrentHashMap<Session, Boolean>());
@OnOpen
public void onOpen(Session curSession, @PathParam("tableId") String
tableId, @PathParam("name") String name, @PathParam("userId") String userId)
{
curSession.getUserProperties().put("tableId", tableId);
curSession.getUserProperties().put("name", name);
curSession.getUserProperties().put("userId", userId);
userSessions.add(curSession);
}
@OnClose
public void onClose(Session curSession) {
userSessions.remove(curSession);
}
161
@OnError
public void onError(Throwable error) {
System.out.println(error);
}
@OnMessage
public void handleMessage(String message, Session userSession) {
// Extract the table ID from the message
String tableId = message.split("\\|")[0];
String actualMessage = message.split("\\|")[1];
// Get the user properties of the current user session

String senderName = (String)
userSession.getUserProperties().get("name");
String senderUserId = (String)
userSession.getUserProperties().get("userId");
// Iterate over the sessions and send the message to sessions

associated with the specific table
for (Session session : userSessions) {
// Extract the table ID associated with the session
String sessionTableId = extractTableIdFromSession(session);
// Check if the session's table ID matches the received table ID

if (sessionTableId.equals(tableId)) {
// Format: senderName|senderUserId|actualMessage
String formattedMessage = senderName + "|" + senderUserId +
"|" + actualMessage;
session.getAsyncRemote().sendText(formattedMessage);
}
}
}
private String extractTableIdFromSession(Session session) {

// Extract the table ID associated with the session
String tableId = null;
// Get the user properties map from the session

Map<String, Object> userProperties = session.getUserProperties();
// Check if the table ID is stored in the user properties map

if (userProperties.containsKey("tableId")) {
tableId = (String) userProperties.get("tableId");
}
return tableId;
162
}
}
USER PACKAGE
ChatServlet.java:
This servlet is accessible through the “/chat” route, and depending upon the action
like “join” chatroom or “leave” chatroom, executes certain queries on the “tables” table.
It updates the “inuse” attribute.
package com.onlinecafehub.user;
/**
* Servlet implementation class ChatServlet
*/
@WebServlet("/chat")
public class ChatServlet extends HttpServlet {
protected void doPost(HttpServletRequest request,

HttpServletResponse response) throws ServletException, IOException {
163
if (session.getAttribute("id") == null ) {
return;
}
int tableid;
String action = request.getParameter("action");
String name = session.getAttribute("name").toString();
int id =
Integer.parseInt(session.getAttribute("id").toString());
String username = name + " : [ " + id + " ]";

String query;

try {
con = DriverManager.getConnection(url, user,
pass);
System.out.println("SQLException: " + e.getMessage());
} catch (ClassNotFoundException e) {
System.out.println("ClassNotFoundException: " +
e.getMessage());
}
try {
if (action.equals("join")) {
// Increase inuse of the tableid

tableid =
Integer.parseInt(request.getParameter("tableid"));
query = "UPDATE tables SET inuse=inuse+1 WHERE id=?";
164
pst.setInt(1, tableid);
if (rowCount > 0) {
session.setAttribute("username", username);
session.setAttribute("tableid", tableid);
response.sendRedirect("./userElements/chatroom.jsp
");
} else {
session.setAttribute("status", "Error: Could not
connect to database.");
}
} else if (action.equals("leave")) {
// Decrease inuse of the tableid
tableid =
Integer.parseInt(session.getAttribute("tableid").toString());
query = "UPDATE tables SET inuse=inuse-1 WHERE id=?";
if (rowCount > 0) {
} else {
connect to database.");
response.sendRedirect("./userElements/chatroom.jsp
");
}
}
} finally {
try {
con.close();
}
}
}
165
ContactServlet.java:
This servlet is accessible through the “/contact” route and accepts the POST method.
It creates a session with the smtp mail server of google (gmail) and sends the email to
the destination.
import jakarta.mail.Authenticator;
import jakarta.mail.Message;
import jakarta.mail.MessagingException;
import jakarta.mail.PasswordAuthentication;
import jakarta.mail.Session;
import jakarta.mail.Transport;
import jakarta.mail.internet.InternetAddress;
import jakarta.mail.internet.MimeMessage;
import java.util.Properties;
/**
* Servlet implementation class ContactServlet
*/
@WebServlet("/contact")
public class ContactServlet extends HttpServlet {
166

response)
HttpSession httpSession = request.getSession();
// Get form data

String email = request.getParameter("from");
String subject = request.getParameter("subject");
String message = request.getParameter("message");
// Email configuration
String host = Config.getMailServerHost();
String port = Config.getMailServerPort();
String username = Config.getMailServerUser();
String password = Config.getMailServerPass();
String to = "[email protected]";
// Create properties
Properties props = new Properties();
props.put("mail.smtp.host", host);
props.put("mail.smtp.port", port);
props.put("mail.smtp.auth", "true");
props.put("mail.smtp.starttls.enable", "true");
// Create session with authentication

Session session = Session.getInstance(props, new Authenticator() {
protected PasswordAuthentication getPasswordAuthentication() {
return new PasswordAuthentication(username, password);
}
});
try {
// Create message
Message emailMessage = new MimeMessage(session);
emailMessage.setFrom(new InternetAddress(email));
emailMessage.setRecipients(Message.RecipientType.TO,
InternetAddress.parse(to));
emailMessage.setSubject(subject);
emailMessage.setText(message);
// Send email
Transport.send(emailMessage);
167
httpSession.setAttribute("status", "Success: Message sent!");

} catch (MessagingException e) {
// Handle exception
httpSession.setAttribute("status", "Error: Could not send

message.");
}
}
}
ReportServlet.java:
This servlet is accessible through the “/report” route and accepts POST method. When
the user submits their report on the “report.jsp” page, the data is sent to this servlet.
The servlet checks if the user is trying to report themselves or not and sends
appropriate message if yes, else it creates a connection to the database and inserts a
new record with necessary details. An appropriate is sent when the database process
is done.
168
/**
* Servlet implementation class ReportServlet
*/
@WebServlet("/report")
public class ReportServlet extends HttpServlet {

return;
}
int reporter_id =
int offender_id =
Integer.parseInt(request.getParameter("offenderid"));
if (reporter_id == offender_id) {
session.setAttribute("status", "Error: You cannot report
yourself!");
response.sendRedirect("./userElements/report.jsp");.
return;
}
String reason = request.getParameter("reason");

String query;
try {
session.setAttribute("status", null);
169

// CHECK IF OFFENDER RECORD EXISTS

query = "SELECT * FROM users WHERE u_id=?";
pst.setInt(1, offender_id);
if (!rs.next()) {
session.setAttribute("status", "Error: User ID not
found.");
} else {
// ADD RECORD TO REPORTS
query = "INSERT INTO
reports(r_date,offender_id,reporter_id,reason,action)
VALUES(DEFAULT,?,?,?,DEFAULT)";
pst.setInt(1, offender_id);
pst.setInt(2, reporter_id);
pst.setString(3, reason);
if (rowCount > 0) {
session.setAttribute("status", "Success: Reported!");
} else {
session.setAttribute("status", "Error: Failed to
report user.");
}
}
response.sendRedirect("./userElements/report.jsp");
} finally {
try {
con.close();
170
}
}
}
FeedbackServlet.java:
This servlet is responsible for taking user feedback and storing it on the database. An
appropriate message is sent once the database process is done.
/**
* Servlet implementation class FeedbackServlet
*/
@WebServlet("/feedback")
public class FeedbackServlet extends HttpServlet {
171

return;
}
int user_id =
String message = request.getParameter("message");

String query;
try {

query = "INSERT INTO feedback(u_id,message,f_date)

VALUES(?,?,DEFAULT)";
pst.setString(2, message);
if (rowCount > 0) {
session.setAttribute("status", "Success: Thank you for your
feedback!");
} else {
172
session.setAttribute("status", "Error: Failed to send

feedback.");
}
response.sendRedirect("./userElements/feedback.jsp");
} finally {
try {
con.close();
}
}
}
UpdateSevlet.java:
This servlet is responsible for updating user details, it checks the password first then
only performs the action. When updating password, the password is hashed and then
stored. An appropriate message is sent once the database is done processing.
import com.onlinecafehub.authentication.PasswordHashing;
173
import java.security.NoSuchAlgorithmException;
import java.security.spec.InvalidKeySpecException;
/**
* Servlet implementation class UpdateServlet
*/
@WebServlet("/update")
public class UpdateServlet extends HttpServlet {
@SuppressWarnings("resource")
return;
}

String query;

String password = request.getParameter("password");
int user_id =

try {
174
System.out.println("SQLException: " + e.getMessage());
} catch (ClassNotFoundException e) {
System.out.println("ClassNotFoundException: " + e.getMessage());
}
// CHECK IF OLD/CURRENT PASSWORD IS CORRECT OR NOT

try {
query = "SELECT u_pass FROM users WHERE u_id=?";
rs.next();

String oldHashedPassword = rs.getString("u_pass");
if (!ph.verifyPassword(password, oldHashedPassword)) {
session.setAttribute("status", "Error: Invalid password!");
response.sendRedirect("./userElements/my_account.jsp");
return;
}
} catch (SQLException | NoSuchAlgorithmException |
InvalidKeySpecException e) {
}
try {
switch(action) {
case "email": {
String email = request.getParameter("email");
// CHECK IF THAT EMAIL ALREADY EXISTS
query = "SELECT u_email FROM users WHERE u_email=?";
pst.setString(1, email);
session.setAttribute("status", "Error: Email already
in use.");
response.sendRedirect("./userElements/my_account.jsp"
);
175
return;
}
// UPDATE EMAIL
query = "UPDATE users SET u_email=? WHERE u_id=?";
pst.setString(1, email);
if (rowCount > 0) {
session.setAttribute("status", "Success: Email
Updated Successfully!");
} else {
update email.");
}
} break;
case "phn": {
String phn = request.getParameter("phn");
// CHECK IF THAT PHONE NUMBER ALREADY EXISTS
query = "SELECT u_email FROM users WHERE u_phn=?";
pst.setString(1, phn);
session.setAttribute("status", "Error: Phone Number
already in use.");
response.sendRedirect("./userElements/my_account.jsp"
);
return;
}
// UPDATE PHONE NUMBER

query = "UPDATE users SET u_phn=? WHERE u_id=?";
pst.setString(1, phn);
if (rowCount > 0) {
176
session.setAttribute("status", "Success: Phone Number

} else {
update email.");
}
} break;
case "password": {
// UPDATE PASSWORD
// HASH THE NEW PASSWORD

byte[] salt;
String newHashedPassword;
try {
salt = ph.generateSalt();
newHashedPassword = ph.hashPassword(password, salt);
query = "UPDATE users SET u_pass=? WHERE u_id=?";

pst.setString(1, newHashedPassword);
if (rowCount > 0) {
session.setAttribute("status", "Success: Password
} else {
update email.");
}
}
} break;
default: {
session.setAttribute("status", "Error: Invalid action.");
System.out.println("Wrong action provided.");
}
}
response.sendRedirect("./userElements/my_account.jsp");
177
} finally {
try {
con.close();
}
}
}
178
ADMIN PACKAGE
TokenMgmtServlet.java:
This servlet gets called when submitting the Token Form in the “token_mgmt.jsp”
page. If a staff tries to call this, an unauthorized access is recorded in the
“unauthorized” table. If an admin is doing the change, the database processes the query
and sends back appropriate message to the user-interface.
package com.onlinecafehub.admin;
/**
* Servlet implementation class TokenMgmtServlet
*/
@WebServlet("/tokenmgmt")
public class TokenMgmtServlet extends HttpServlet {

request.getRequestDispatcher("e_unauthorized.jsp");
if (session.getAttribute("privilege") == null ||
session.getAttribute("id") == null ) {
179
return;
}
int privilege =
Integer.parseInt(session.getAttribute("privilege").toString());
int admin_id =
Boolean isAuthorized = privilege == 1 ? true : false;
String pageinfo = request.getParameter("pageinfo");

int userid = Integer.parseInt(request.getParameter("userid"));

int tokens = Integer.parseInt(request.getParameter("tokens"));

String query;
try {

// HANDLE UNAUTHORIZED ACCESS

if (!isAuthorized) {
query = "INSERT INTO unauthorized(a_id, page, date) VALUES(?,
?, DEFAULT)";
pst.setInt(1, admin_id);
pst.setString(2, pageinfo);
if (rowCount > 0) {
session.setAttribute("status", "Success: Unauthorized
access recorded.");
} else {
session.setAttribute("status", "Error: Failed to connect
to MySQL.");
180
// UPDATE VIOLATIONS OF ADMIN

query = "UPDATE admins SET violations=violations+1 WHERE
a_id=?";
if (pst.executeUpdate() > 0) {
System.out.println("Admin Violations for Admin_Id: " +
admin_id + " updated.");
} else {
admin_id + " failed.");
}
} else {
// CHECK IF RECORD EXISTS
pst.setInt(1, userid);
if (!rs.next()) {
found.");
} else {
// UPDATE USER RECORD
query = "UPDATE users SET u_tokens = u_tokens" +
(action.equals("add") ? " + " : " - ") + "? WHERE u_id = ?";
pst.setInt(1, tokens);
if (rowCount > 0) {
session.setAttribute("status", "Success: Record
updated!");
} else {
update record.");
}
// LOG INTO TOKENLOG TABLE

if
(!session.getAttribute("status").toString().equals("Error")) {
181

tokenlog(a_id,u_id,tokens,reason,date,action) VALUES(?,?,?,?,DEFAULT,?)";
pst.setInt(3, tokens);
pst.setString(5, action);
pst.executeUpdate();
}
}
}
} finally {
try {
con.close();
}
}
}
TableMgmtServlet.java:
This servlet gets called when submitting the Table Form in the “table_mgmt.jsp”
page. The staff / admin can perform updatation, deletion and addition of tables. Once
the query is done processing by the database, an appropriate message is sent to the
user-interface.
182
/**
* Servlet implementation class TableMgmtServlet
*/
@WebServlet("/tablemgmt")
public class TableMgmtServlet extends HttpServlet {

return;
}
int admin_id =
String s_tableid = request.getParameter("tableid").toString();
183
int tableid = Integer.parseInt(s_tableid.equals("") ? "0" :

s_tableid);
int chairs = request.getParameter("chairs").toString().equals("") ? 0
: Integer.parseInt(request.getParameter("chairs").toString());

String query;
try {

// HANDLE ADD TABLE

if (action.equals("add")) {
query = "INSERT INTO tables(chairs,available) VALUES(?,?)";
pst.setInt(1, chairs);
if (rowCount > 0) {
session.setAttribute("status", "Success: Table added
successfully!");
} else {
to MySQL.");
}
if
(!session.getAttribute("status").toString().contains("Error")) {
query = "SELECT * FROM tables";
184
// Go to the last record (latest record) to get the

table_id
while(rs.next()) {
if (rs.isLast()) {
tableid = rs.getInt("id");
}
}

tablelog(a_id,t_id,chairs,date,action) VALUES(?,?,?,DEFAULT,?)";
}
}
// HANDLE UPDATE TABLE

if (action.equals("update")) {
query = "SELECT * FROM tables WHERE id=?";
if (!rs.next()) {
session.setAttribute("status", "Error: Table ID not
found.");
} else {
// UPDATE TABLE RECORD
query = "UPDATE tables SET chairs=?,available=?-inuse
WHERE id=?";
185
if (rowCount > 0) {
updated!");
} else {
update record.");
}
}
// LOG INTO TABLELOG TABLE

if
}
}
// HANDLE DELETE TABLE

if (action.equals("remove")) {
query = "SELECT * FROM tables WHERE id=?";
if (!rs.next()) {
session.setAttribute("status", "Error: Table ID not
found.");
} else {
// DELETE TABLE RECORD
query = "DELETE FROM tables WHERE id=?";
186
if (rowCount > 0) {
deleted!");
} else {
delete record.");
}
}
// LOG INTO TABLELOG TABLE

if
pst.setInt(3, chairs); // chairs are empty as the
table has been deleted
}
}
response.sendRedirect("./adminElements/table_mgmt.jsp");
} finally {
try {
con.close();
}
}
}
187
UserMgmtServlet.java:
This servlet gets called when submitting the User Form in the “user_mgmt.jsp” page.
If a staff tries to call this, an unauthorized access is recorded in the “unauthorized”
table. If an admin is doing the change, banning or unbanning users with reason, the
database processes the query and sends back appropriate message to the user-interface.
/**
* Servlet implementation class UserMgmtServlet
*/
@WebServlet("/usermgmt")
public class UserMgmtServlet extends HttpServlet {

188
return;
}
int privilege =
Integer.parseInt(session.getAttribute("privilege").toString());
int admin_id =
Boolean isAuthorized = privilege == 1 ? true : false;
String pageinfo = request.getParameter("pageinfo");

int userid = Integer.parseInt(request.getParameter("userid"));


String query;
try {

// HANDLE UNAUTHORIZED ACCESS

if (!isAuthorized) {
query = "INSERT INTO unauthorized(a_id, page, date) VALUES(?,
?, DEFAULT)";
pst.setString(2, pageinfo);
189
if (rowCount > 0) {
session.setAttribute("status", "Success: Unauthorized
access recorded.");
} else {
to MySQL.");
}
// UPDATE VIOLATIONS OF ADMIN

query = "UPDATE admins SET violations=violations+1 WHERE
a_id=?";
if (pst.executeUpdate() > 0) {
admin_id + " updated.");
} else {
admin_id + " failed.");
}
} else {
if (!rs.next()) {
found.");
} else {
// UPDATE USER RECORD
query = "UPDATE users SET banned=" +
(action.equals("ban") ? "'true'" : "'false'") + " WHERE u_id = ?";
190
if (rowCount > 0) {
updated!");
} else {
update record.");
}
// LOG INTO TOKENLOG TABLE

if
(!session.getAttribute("status").toString().equals("Error")) {
userbanlog(a_id,u_id,action,reason,date) VALUES(?,?,?,?,DEFAULT)";
}
}
}
response.sendRedirect("./adminElements/user_mgmt.jsp");
} finally {
try {
con.close();
}
}
}
191
WEB.XML FILE
The web.xml file serves as a central configuration file for the web application and
defines the structure and behavior of the application within the web server
environment. It specifies the mappings between URLs and servlets, configuration
parameters for servlets and filters, initialization parameters for listeners, security
constraints, error handling, session management, and more.
By editing the web.xml file, we can customize the behavior of the web application and
configure various components of the application to meet specific requirements. It plays
a crucial role in defining how the web application is deployed and executed within a
Java web server.
<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="https://jakarta.ee/xml/ns/jakartaee"
xmlns:web="http://xmlns.jcp.org/xml/ns/javaee"
xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee
https://jakarta.ee/xml/ns/jakartaee/web-app_5_0.xsd
http://xmlns.jcp.org/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-
app_2_5.xsd" id="WebApp_ID" version="5.0">
<display-name>OnlineCafeHub</display-name>
<welcome-file-list>
<welcome-file>home.jsp</welcome-file>
</welcome-file-list>
<error-page>
<error-code>404</error-code>
<location>/e_notfound.jsp</location>
</error-page>
<servlet>
<description></description>
192
<display-name>RegistrationServlet</display-name>
<servlet-name>RegistrationServlet</servlet-name>
<servlet-
class>com.onlinecafehub.registration.RegistrationServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>RegistrationServlet</servlet-name>
<url-pattern>/RegistrationServlet</url-pattern>
</servlet-mapping>
<servlet>
<display-name>LoginServlet</display-name>
<servlet-name>LoginServlet</servlet-name>
<servlet-class>com.onlinecafehub.registration.LoginServlet</servlet-
class>
</servlet>
<servlet-mapping>
<servlet-name>LoginServlet</servlet-name>
<url-pattern>/LoginServlet</url-pattern>
</servlet-mapping>
<servlet>
<display-name>LogoutServlet</display-name>
<servlet-name>LogoutServlet</servlet-name>
<servlet-class>com.onlinecafehub.registration.LogoutServlet</servlet-
class>
</servlet>
<servlet-mapping>
<servlet-name>LogoutServlet</servlet-name>
<url-pattern>/LogoutServlet</url-pattern>
</servlet-mapping>
<servlet>
<display-name>TokenMgmtServlet</display-name>
<servlet-name>TokenMgmtServlet</servlet-name>
<servlet-class>com.onlinecafehub.admin.TokenMgmtServlet</servlet-class>
193
</servlet>
<servlet-mapping>
<servlet-name>TokenMgmtServlet</servlet-name>
<url-pattern>/TokenMgmtServlet</url-pattern>
</servlet-mapping>
<servlet>
<display-name>TableMgmtServlet</display-name>
<servlet-name>TableMgmtServlet</servlet-name>
<servlet-class>com.onlinecafehub.admin.TableMgmtServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>TableMgmtServlet</servlet-name>
<url-pattern>/TableMgmtServlet</url-pattern>
</servlet-mapping>
<servlet>
<display-name>AdminRouteServlet</display-name>
<servlet-name>AdminRouteServlet</servlet-name>
<servlet-class>com.onlinecafehub.admin.AdminRouteServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AdminRouteServlet</servlet-name>
<url-pattern>/AdminRouteServlet</url-pattern>
</servlet-mapping>
<servlet>
<display-name>UserMgmtServlet</display-name>
<servlet-name>UserMgmtServlet</servlet-name>
<servlet-class>com.onlinecafehub.admin.UserMgmtServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>UserMgmtServlet</servlet-name>
<url-pattern>/UserMgmtServlet</url-pattern>
</servlet-mapping>
<servlet>
194
<display-name>ReportServlet</display-name>
<servlet-name>ReportServlet</servlet-name>
<servlet-class>com.onlinecafehub.user.ReportServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ReportServlet</servlet-name>
<url-pattern>/ReportServlet</url-pattern>
</servlet-mapping>
<servlet>
<display-name>FeedbackServlet</display-name>
<servlet-name>FeedbackServlet</servlet-name>
<servlet-class>com.onlinecafehub.user.FeedbackServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>FeedbackServlet</servlet-name>
<url-pattern>/FeedbackServlet</url-pattern>
</servlet-mapping>
<servlet>
<display-name>UpdateServlet</display-name>
<servlet-name>UpdateServlet</servlet-name>
<servlet-class>com.onlinecafehub.user.UpdateServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>UpdateServlet</servlet-name>
<url-pattern>/UpdateServlet</url-pattern>
</servlet-mapping>
<servlet>
<display-name>ContactServlet</display-name>
<servlet-name>ContactServlet</servlet-name>
<servlet-class>com.onlinecafehub.user.ContactServlet</servlet-class>
</servlet>
<servlet-mapping>
195
<servlet-name>ContactServlet</servlet-name>
<url-pattern>/ContactServlet</url-pattern>
</servlet-mapping>
<servlet>
<display-name>ChatServlet</display-name>
<servlet-name>ChatServlet</servlet-name>
<servlet-class>com.onlinecafehub.user.ChatServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ChatServlet</servlet-name>
<url-pattern>/ChatServlet</url-pattern>
</servlet-mapping>
</web-app>
196
6.4 Error Handling & Parameter Passing Techniques
S EVERAL error handling and parameter passing techniques are used to ensure the
proper functioning and security of the web application.
6.4.1 Error Handling
• The code uses try-catch and conditional statements to handle both server-side
errors (error in connecting to database, error in creating websocket, etc) and
client-side errors (invalid input field values, accessing pages that are privileged,
etc). And the web app displays appropriate error and success messages to inform
the user.
6.4.2 Parameter Passing Techniques
• The servlets defined uses the POST method to retrive data from the form
pages on user-interface.
• To prevent SQL injections into the database while updating or inserting into
tables, prepared statements are used instead of raw text (statements).
• The code also utilises JavaScript to ensure empty or too much data than what
the database attributes can handle is not sent.
197
7. Testing
7.1 Introduction to The Testing Phase
T ESTING phase of the Online Café Hub project played a crucial role in ensuring
the quality, reliability, and robustness of the application. This section provides
an overview of the testing approach, methodologies employed, and the objectives of
the testing phase. The primary objectives of the testing phase were as follows:
• Functionality Testing: To verify that all features and functionalities of the
Online Café Hub web application are working as intended and meet the specified
requirements. This involved testing individual components, user interactions,
data validations, and integration between different modules.
• Usability Testing: To evaluate the user-friendliness and intuitiveness of the
application interface. It aimed to identify any usability issues, navigation
difficulties, or areas requiring improvements to enhance the overall UX.
• Performance Testing: To assess the performance, scalability, and
responsiveness of the application under varying load conditions. Performance
testing involved measuring response times, throughput, resource utilization etc.
198
• Security Testing: To identify and address potential security vulnerabilities,
ensuring the application's resistance against common security threats, such as
unauthorized access, data breaches, and injection attacks.
7.2 Testing Approach
• Unit Testing: During the development process, each individual component,
function, and module underwent unit testing. This involved creating test cases
specifically designed to verify the expected behaviour of each unit in isolation,
ensuring their accuracy and functionality. The purpose of unit testing was to
validate the correctness and reliability of these units, providing confidence in
their ability to perform as intended. By conducting thorough unit testing,
potential issues and bugs were identified early, allowing for prompt debugging
and ensuring the overall quality and stability of the web application.
• Integration Testing: Following the completion of unit testing, the next phase
involved conducting integration testing. This testing process focused on
validating the smooth interaction and communication between various modules
within the system. The primary goal of integration testing was to detect and
address any potential issues that may arise during the integration process. By
199
ensuring the seamless functioning of the integrated system, integration testing
played a crucial role in verifying the overall performance and compatibility of
the modules working together.
• System Testing: System testing was performed on the complete Online Café
Hub web application to assess its adherence to the specified requirements. This
comprehensive testing approach included evaluating end-to-end scenarios, user
workflows, and real-world usage scenarios. The primary objective of system
testing was to verify the overall functionality, usability, and performance of the
application as a whole. By subjecting the application to various usage scenarios,
system testing ensured that it met the intended objectives and provided a
satisfactory user experience.
• User Acceptance Testing (UAT): During UAT, the application underwent
evaluation by end-users, including teenagers and working people, within a
simulated production environment. This process enabled stakeholders to
actively participate and provide valuable feedback. By engaging the intended
users, UAT aimed to identify any potential usability or functionality gaps and
ensure that the application aligns with their expectations. The feedback
200
obtained from UAT played a crucial role in refining the application and making
necessary improvements to ensure user satisfaction.
7.3 Test Case Design & Execution
1. Test Case: Verify user registration functionality with no duplicate email
and/or phone number.
• Test Steps:
➢ Navigate to the Login page and fill the Registration form.
➢ Enter valid non-redundant (unique) credentials.
➢ Click on “Register” button.
• Expected Result:
➢ User is registered, a message is displayed and they are redirected
to the Login page to sign in.
2. Test Case: Verify user registration functionality with duplicate email and/or
phone number.
• Test Steps:
➢ Navigate to the Login page and fill the Registration form.
➢ Enter redundant (not unique) or invalid credentials.
➢ Click on “Register” button.
201
➢ User is shown an error message and they are redirected to the
Login page.
3. Test Case: Verify user login functionality with valid credentials.
• Test Steps:
➢ Navigate to the Login page and fill the Login form.
➢ Enter valid and registered credentials.
➢ Click on “Login” button.
➢ User is signed in and they are redirected to the Café page or the
Token management page depending on the privilege level.
4. Test Case: Verify user login functionality with invalid credentials.
• Test Steps:
➢ Navigate to the Login page and fill the Login form.
➢ Enter invalid and/or non-registered credentials.
➢ Click on “Login” button.
➢ User is shown an error message and redirected to Login page.
202
5. Test Case: Verify joining and leaving a table in café page.
• Test Steps:
➢ Navigate to the Café page.
➢ Click on the “Join” button to join the chatroom, once inside,
click on the “Leave” button to exit the chatroom.
➢ When Joining, user is redirected to the Chatroom page.
➢ When Leaving, user is redirected to the Café page.
6. Test Case: Verify report form with valid credentials.
• Test Steps:
➢ Navigate to the Report page.
➢ Enter valid credentials in the form.
➢ Click on the “Report” button.
➢ Success message is displayed.
7. Test Case: Verify report form with invalid credentials.
• Test Steps:
➢ Navigate to the Report page.
203
➢ Enter invalid credentials in the form.
➢ Click on the “Report” button.
➢ Error message is displayed.
8. Test Case: Verify feedback form.
• Test Steps:
➢ Navigate to the Feedback page.
➢ Enter valid length of message in the form.
➢ Click on the “Submit” button.
9. Test Case: Verify updating email with valid credentials.
• Test Steps:
➢ Navigate to the My Account page.
➢ Enter valid credentials in the first form.
➢ Click on the “Update Email” button.
204
10. Test Case: Verify updating email with invalid credentials.
• Test Steps:
➢ Enter invalid credentials in the first form.
➢ Click on the “Update Email” button.
11. Test Case: Verify updating phone number with valid credentials.
• Test Steps:
➢ Enter valid credentials in the second form.
➢ Click on the “Update Phone” button.
12. Test Case: Verify updating phone number with invalid credentials.
• Test Steps:
205
➢ Enter valid credentials in the second form.
➢ Click on the “Update Phone” button.
13. Test Case: Verify updating password with valid credentials.
• Test Steps:
➢ Enter valid credentials in the third form.
➢ Click on the “Update Password” button.
14. Test Case: Verify updating password with invalid credentials.
• Test Steps:
➢ Enter invalid credentials in the third form.
➢ Click on the “Update Password” button.
206
15. Test Case: Verify token management with valid credentials.
• Test Steps:
➢ Navigate to the Token Management page.
➢ Click either on “Add Tokens” or “Remove Tokens” button.
16. Test Case: Verify token management with invalid credentials.
• Test Steps:
➢ Navigate to the Token Management page.
➢ Click either on “Add Tokens” or “Remove Tokens” button.
17. Test Case: Verify table management with valid credentials.
• Test Steps:
➢ Navigate to the Table Management page.
207
➢ Click either on “Add Table”, “Update Table” or “Remove Table”
button.
18. Test Case: Verify table management with invalid credentials.
• Test Steps:
➢ Navigate to the Table Management page.
➢ Click either on “Add Table”, “Update Table” or “Remove Table”
button.
19. Test Case: Verify user management with valid credentials.
• Test Steps:
➢ Navigate to the User Management page.
➢ Click either on “Ban User” or “Unban User” button.
208
20. Test Case: Verify user management with invalid credentials.
• Test Steps:
➢ Navigate to the User Management page.
➢ Click either on “Ban User” or “Unban User” button.
209
8. Input & Output Screens
Figure 10 – Home Page (View 1)
210
Figure 13 – About Page (View 1)
211
Figure 14 –About Page (View 2)
212
Figure 17 – Menu Page (View 1)
213
214
Figure 21 – Login Page
215
Figure 22 – Login Page (Field Validation)
Figure 23 – Login Page (Valid Registration)
216
Figure 24 – Login Page (Invalid Registration)
Figure 25 – Login Page (Invalid Login)
217
Figure 26 – Cafe Page
Figure 27 – Chatroom Page
218
Figure 28 – Report Page
Figure 29 – Report Page (Invalid Values)
219
Figure 30 – Report Page (Viewing a long report reason)
Figure 31 – Feedback Form
220
Figure 32 – My Account Page (View 1)
Figure 33 – My Account Page (View 2)
221
Figure 34 – Token Management Page
Figure 35 – Table Management Page
222
Figure 36 – User Management Page
Figure 37 – Report Page (Admin View)
223
Figure 38 – Feedback Page (Admin View)
224
9. Implementation of Security
I N this section, we will discuss the various security measures implemented in the
software developed for Online Café Hub. The following subsections outline the key
aspects of security implemented to ensure the integrity, confidentiality, and
availability of user data and system resources.
9.1 User Authentication and Authorization
Email, Phone Number and Password: Users are required to register with a unique
email address, phone number and password. The system stores the password securely
using the PBKDF2 algorithm with HMAC–SHA256 hashing technique.
Java Class for hashing the password and verification:
PasswordHashing.java:
import java.security.NoSuchAlgorithmException;
import java.security.SecureRandom;
import java.security.spec.InvalidKeySpecException;
import javax.crypto.SecretKeyFactory;
import javax.crypto.spec.PBEKeySpec;
public class PasswordHashing {

public String hashPassword(String password, byte[] salt)
throws NoSuchAlgorithmException, InvalidKeySpecException {
int iterations = 10000;
225
int keyLength = 256;

PBEKeySpec spec = new PBEKeySpec(password.toCharArray(), salt,
iterations, keyLength);
SecretKeyFactory skf =
SecretKeyFactory.getInstance("PBKDF2WithHmacSHA256");
byte[] hash = skf.generateSecret(spec).getEncoded();
return bytesToHex(salt) + bytesToHex(hash).substring(0, Math.min(60,
hash.length * 2));
}
public byte[] generateSalt() throws NoSuchAlgorithmException {

SecureRandom random = new SecureRandom();
byte[] salt = new byte[16];
random.nextBytes(salt);
return salt;
}
public boolean verifyPassword(String enteredPassword, String

storedPassword)
throws NoSuchAlgorithmException, InvalidKeySpecException {
byte[] salt = hexToBytes(storedPassword.substring(0, 32));
String hashedEnteredPassword = hashPassword(enteredPassword, salt);
return hashedEnteredPassword.equals(storedPassword);
}
private byte[] hexToBytes(String hex) {

byte[] bytes = new byte[hex.length() / 2];
for (int i = 0; i < bytes.length; i++) {
bytes[i] = (byte) Integer.parseInt(hex.substring(2 * i, 2 * i +
2), 16);
}
return bytes;
}
private String bytesToHex(byte[] bytes) {

StringBuilder sb = new StringBuilder();
for (byte b : bytes) {
sb.append(String.format("%02x", b));
}
return sb.toString();
}
}
226
The PasswordHashing class is responsible for providing methods to hash and verify
passwords using the PBKDF2 algorithm with HMAC-SHA256. This class implements
password hashing techniques to enhance the security of storing and verifying passwords
in a system.
The hashPassword method takes a password and a salt as input and generates a hashed
password. It uses the PBKDF2 algorithm with HMAC-SHA256 to perform the hashing.
The iterations variable determines the number of iterations performed in the hashing
process, while the keyLength defines the length of the generated key. The method
returns the hashed password as a combination of the salt and the hash itself.
The generateSalt method generates a random salt using a secure random number
generator. The salt is a randomly generated value used to add uniqueness and
complexity to the hashing process. It is crucial for generating different hashes for the
same password, preventing pre-computed dictionary attacks.
The verifyPassword method is used to verify an entered password against a stored
password. It takes the entered password and the stored password as input and performs
the verification. It extracts the salt from the stored password and uses it to hash the
entered password. The method then compares the hashed entered password with the
stored password to determine if they match.
The hexToBytes and bytesToHex methods are utility methods used to convert byte
arrays to hexadecimal strings and vice versa.
227
Session Management: The software utilizes session management techniques to
maintain user authentication throughout the user's session. Secure session identifiers
are generated and validated for each user, preventing unauthorized access to sensitive
information.
9.2 Encryption and Decryption Techniques Used
F OR safeguarding sensitive data from unauthorized access, encryption and
decryption techniques are employed within the software. The following
encryption techniques have been implemented:
Transport Layer Security (TLS): All communication between the client and server
occurs over secure HTTPS connections using TLS encryption. This ensures that data
transmitted over the network is protected from eavesdropping and tampering.
Password Encryption: As mentioned earlier, user passwords are not stored in plain
text. Instead, they are securely hashed using the PBKDF2 algorithm with HMAC-
SHA256 hashing technique. This ensures that even if the password hashes are obtained
by an attacker, it is computationally infeasible to reverse-engineer the original
passwords.
228
9.3 Secure Transmission of Data to The Sever
A
PPROPRIATE measures are taken to ensure the secure transmission of data
from the client to the server. The following techniques have been implemented:
HTTPS Protocol: The software employs the HTTPS protocol to encrypt data
transmission between the client's browser and the server. This provides an additional
layer of security by encrypting all data exchanged between the client and server,
including user credentials and sensitive information.
Input Validation: Client-side and server-side input validation techniques have been
implemented to prevent common security vulnerabilities such as SQL injection and
cross-site scripting (XSS) attacks. Input from users is carefully validated and sanitized
before processing to ensure data integrity and prevent malicious code injection.
229
10. Limitations of The Project
• Scalability: As the user base increases, the scalability might become a
challenge. The system should be able to handle large number of requests. A
load balancer should be implemented for this.
• Responsiveness: The website looks the best in larger screen sizes, like desktop,
laptop and pads. For smaller screen sizes the UI gets mushed.
• Platform Compatibility: The Online Café Hub project is designed to be
compatible with modern web browsers and devices. However, as the technology
evolves, it might face compatibility issues with older browsers and outdated
hardware.
• Payment Facility: The project as of now does not include any payment
facility inbuilt, it relies on third-party sites like Zomato and Swiggy to take care
of the food ordering and payment.
• Token Utilization: The tokens that are given to users, does not have any
benefits as of now.
230
11. Future Scope
This project is designed and developed such that modifications can be done easily
and additional modules can be added without much difficulty.
The project will be further developed to provide more features like mobile support,
better token usage, GUI modifications, etc.
Load balancers will be implemented to ensure large number of requests are handled
without much delay or crashing the server.
Security module will be modified to ensure user data security to the maximum
quality.
Better menu system will be added with better token usage. Additional changes like
random video/music support will be made using YouTube API.
231
12. Bibliography
12.1 Websites
• www.javatpoint.com
• www.tutorialspoint.com
12.2 Books
• Joel Murach & Andrea Steelman: Murach's Java Servlets and JSP (3rd
Edition), 9th June 2014
• Kathy Sierra, Bryan Basham & Bert Bates: Head First Servlets and JSP (2nd
Edition), 4th April 2008
• Kathy Sierra, Trisha Gee & Bert Bates: Head First Java (3rd Edition), 20th
May 2022
• Joel Murach: Murach's MySQL (3rd Edition), 22nd March 2019
• MySQL 8.0 Reference Manual
• IGNOU blocks
232

BCSP 064 1

Uploaded by

Copyright:

Available Formats

BCSP 064 1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

BCSP 064 1

Uploaded by

Copyright:

Available Formats

Enrollment Number: 2003722459 Name: DEBALOY CHATTERJEE

Project Report for BCSP–064 Online Café Hub

INDIRA GANDHI NATIONAL OPEN UNIVERSITY

BACHELOR OF COMPUTER APPLICATIONS (BCA)

Online Café Hub

Enrollment No. : 2003722459

Name : DEBALOY CHATTERJEE

Under Guidance Of : DR. RATTAN K DATTA

INDIRA GANDHI NATIONAL OPEN UNIVERSITY (SCHOOL OF COMPUTER AND

Tools/platform of Project – Hardware and Software 7

Level 0 (Context Level Diagram) 8

Entity Relation Diagram 11

Number of Modules and Their Description 14

Process Logic of Modules 15

Future Scope of Project 21

To protect the users and provide a safe place, a login system is

The aim of Online Café Hub is to bring people close virtually

The website contains multiple tables, and chairs around those

This project allows users to do the following activities:

This project allows the admin to do the following activities:

• Reasons for not using the two-tier architecture:

• Reasons for using JAVA:

❖ Java supports multi-threading; hence it can manage multiple

• Reasons for using an RDBMS:

Tools/platform of Project – Hardware and Software

Hardware Requirement Specification:

Software Requirement Specification:

Level 0 (Context Level Diagram)

Entity Relation Diagram

Table Name: Users

Table Name: Admins

Table Name: Reports

Table Name: Feedback

Table Name: Tables

Number of Modules and Their Description

Process Logic of Modules

This project is based on the multi-user approach where multiple

Admin – Can change café configuration and take actions against

1. User Login Module

2. User Registration Module

3. Field Validation Module

4. User Management Module

5. Token Management Module

6. Table Management Module

7. Feedback Management Module

8. Report Management Module

Whitebox testing method would be followed as the developer

Since the project is done by a single person, that is, the

The project guide will be performing the Blackbox testing

Week 9 to Week 10:

❖Checking of duplicate user by checking their email and

❖Encryption of user, admin and staff passwords to ensure

❖Unauthorized users or banned users cannot access the

❖SQL Injections will be checked thoroughly and will be

❖Overflow of data is also checked by the field validation

❖Users will be redirected to the food delivery service they

❖Can handle only limited number of users which is equal

❖No payment facility through tokens is at place. Users will

Future Scope of Project