Genuie Bca programme source with complete list of guidance

Enrollment Number: 2003722459 Name: DEBALOY CHATTERJEE
Project Report for BCSP–064 Online Café Hub
1
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)

Enrolment Number: 2003722459 Name: DEBALOY CHATTERJEE
Project Synopsis for BCSP-064 Online Café Hub
2
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

3
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.

4
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.

5
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.

6
❖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.

7
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

8
Design of Project
Data Flow Diagrams
Level 0 (Context Level Diagram)

9
Level 1 ( User )

10
Level 2 ( User )

11
Entity Relation Diagram

12
Data Structure
Table Name: Users
Column Name Data Type Constraints Description
u_id int(0 to 232
) Auto, primary
key, Unsigned
Unique ID of User
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
a_id int(0 to 232
) Auto, primary
key, Unsigned
Unique ID of Admin
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
a_privilege int(231
to 231
+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
key, Unsigned
Unique ID of Report
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'

13
Table Name: Feedback
f_id int(0 to 232
) Auto, primary
key, Unsigned
Unique ID of Feedback
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,
Unsigned
Unique ID of a table
chairs int(0 to 232
) Not null,
Unsigned
Number of chairs
available int(0 to 232
) Unsigned Available chairs

14
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

15
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.

16
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.

17
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.

18
GANTT Chart
Week 1 to Week 4:
Week 5 to Week 8:
Week 9 to Week 10:

19
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.

20
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.

21
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.

22
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

2
Project Title

3
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

4
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

5
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

6
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

7
Figure 36 – User Management Page........................................................................223
Figure 37 – Report Page (Admin View)..................................................................223
Figure 38 – Feedback Page (Admin View)..............................................................224

8
1. Introduction
1.1 Background Information
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.
I

9
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.

10
1.2 Brief Description
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
T

11
account information. It aims to create a safe and enjoyable online space that promotes
social interaction and supports local businesses.

12
1.3 Project Category
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.
T

13
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.

14
• 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.

15
1.4 Scope of Project
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
T

16
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.

17
1.5 Report Structure
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
T

18
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.

19
• 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.

20
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.

21
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.

22
3. Tools / Environment Used
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.
T

23
• 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.

24
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.

25
4. Analysis Document
4.1 Requirement Analysis
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.
O

26
• 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.

27
4.2 Requirement Gathering Techniques Used
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.
R

28
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

29
4.3.2 Data Flow Diagram (Level – 1)
Figure 2 – Data Flow Diagram (Level 1) of Online Café Hub

30
4.3.3 Data Flow Diagram (Level – 2)
Figure 3 – Data Flow Diagram (Level 2) of Online Café Hub

31
4.4 Entity Relationship Diagram
Figure 4 – Entity Relationship Diagram for Online Café Hub

32
4.5 Use Case Diagram
Figure 5 – Use Case Diagram of Online Café Hub

33
4.6 Gantt Chart Visualization
Figure 6 – GANTT Chart (Week 1 – Week 4)

34
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
key
Unique ID of user
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
false
Whether user is
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
key
Unique ID of
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

35
4.7.3 Data Dictionary for Tables Table
1 t_id int integer primary
key
Unique ID of a
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
key
Unique ID of a
report
2 r_date datetime yyyy-mm-dd
hh:mm:ss
default
current
timestamp
Date & time the
report was made
3 offender_id int integer foreign key Unique ID of
offender from users
table
4 reporter_id int integer primary
key
Unique ID of
reporter from users
table
5 reason varchar string not null Reason for making
the report
6 action varchar string default
“pending”
Action taken by
admin

36
4.7.5 Data Dictionary for Feedback Table
1 f_id int integer primary
key
Unique ID of
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
hh:mm:ss
default
current
timestamp
Date & time of
giving the feedback
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
key
Unique ID of log
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
hh:mm:ss
default
current
timestamp
Date & time when
the action was
taken

37
4.7.7 Data Dictionary for Token Log Table
key
Unique ID of log
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
hh:mm:ss
default
current
timestamp
Date & time when
the action was
taken
7 action varchar string not null Whether tokens
were added or
removed
4.7.8 Data Dictionary for Table Log Table
key
Unique ID of log
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
hh:mm:ss
default
current
timestamp
Date & time when
the action was
taken

38
4.7.9 Data Dictionary for Unauthorized Table
key
Unique ID of log
admin doing
unauthorized work
3 page varchar string not null Where the admin
did unauthorized
work
hh:mm:ss
default
current
timestamp
Date & time when
the unauthorized
work was done

39
5. Design Document
5.1 Introduction to The Design Phase
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.
D

40
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.

41
5.2 System Architecture
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.
S

42
• 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.

43
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.

44
5.3 Modularization Details
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.
M

45
• 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
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
E

46
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

47
“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.

48
5.5 Database Design
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.
D

49
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.

50
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.

51
5.6 Logic Design of Procedures
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.
L

52
• 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.

53
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.

54
• 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.

55
• 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.

56
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.

57
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.

58
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.

59
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

60
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.

61
6.2 File Structure
The “main” folder:
Inside “java” folder:

62
Inside “webapp” folder:

63

64
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

65
"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" &&

66
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;
}

67
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.

68
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);
}

69
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);
}
}

70
/*---------------#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;

71
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));

72
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;
}

73
.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"

74
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;
}

75
.nav-header .logo img {
width: 23%;
}
.nav-header .links {
width: 70%;
min-height: 100%;
}
.nav-header .links ul {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
list-style: none;
}
.nav-header .links ul li {
padding: .6rem 1rem;
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.

76
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:onlinecafehub@gmail.com">onlinecafehub@gmail.com</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

77
</p>
</div>
</div>
footer.css:
.footer {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
bottom: 0;
}
.footer a {
text-decoration: none;
color: #ffffff;
}
.footer .row-1 {
width: 100%;
display: flex;
justify-content: space-around;
align-items: flex-start;
color: #ffffff;
background-color: rgba(0,0,0,0.8);
padding: 4rem;
}
.footer .row-1 .logo {
width: 12%;
}
.footer .row-1 .logo img {
width: 100%;
}
.footer .row-1 .info {
display: flex;
gap: 1rem;
}

78
.footer .row-1 .info label {
text-transform: uppercase;
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;
}

79
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;

80
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%;
}

81
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>

82
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;
}

83
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>

Genuie Bca programme source with complete list of guidance

Genuie Bca programme source with complete list of guidance

Recommended

Recommended

More Related Content

Similar to Genuie Bca programme source with complete list of guidance

Similar to Genuie Bca programme source with complete list of guidance (20)

Recently uploaded

Recently uploaded (20)

Genuie Bca programme source with complete list of guidance