A Project Report

Submitted to the Apex University , Jaipur

In Partial fulfillment of the requirement for the degree of

Submitted by
(KHUSHAL SAINI)
(APX-JPR-2020/00139)

Submitted To:
Dr. K. D. Gupta
HOD
Department of Computer Science

Apex University
Sec-5, V.T. Road, Mansarovar, Jaipur
BCA Admission Year
(JUNE,2023)

1
 Candidate’s Declaration

I, KHUSHAL SAINI hereby declare that the work presented in this project entitled
“Electricity Billing System ” in fulfillment of the requirements for the award of
Bachelor of Computer Applications, submitted in the Department of Computer
Science at Apex University, Jaipur, is an authentic record of my own research work
under the supervision of DR. KD Gupta.

I also declare that the work embodied in the present thesis is my original
work/extension of the existing work and has not been copied from any
Journal/thesis/book, and has not been submitted by me for any other
Degree/Diploma.

(Name & Signature of Candidate)

Enrolment No.:…………………...
Date:………………………………

ACKNOWLEDGEMENT

2
I am thankful APEX UNIVERSITY for providing me a platform for the project. This
project was a quite a learning experience for me at each & every step. At the same
time, it has given me confidence to work in professional setup. I express my
sincere thanks to Dr. K.D Gupta, for her active support & continuous guidance
without which
it would have been difficult for me to complete this project. I will also like to the
other working staff & interns at for taking keen interest in my project & giving
valuable suggestions & helping me directly or indirectly to complete this project.

KHUSHAL SAINI (DATA SCIENCE)

TABLE OF CONTENTS

Candidate’s Declaration………………………………………………………..II
Acknowledgement……………………………………………………………..III
Table of Contents………………………………………………………………IV
List of Figures…………………………………………………………………..VI
Abstract………………………………………………………………………..VII

3
Chapter 1 Introducation................................................................ 8.
1.1 project overview................................................................. 8.
1.2 Background........................................................................ 8. 1.3
Project objectives............................................................... 8.
1.4 Project scope..................................................................... 8.
1.5 Methodology...................................................................... 9.
1.6 Report Structure................................................................ 9.
Chapter 2 Analysis and System Requirements .........................................................10
2.1 Analysis of Current Electricity Billing System ............................................10
2.2 Requirements ................................................................................................10
2.3 Constraints and assumptions ........................................................................ 11
2.4 System Architecture .................................................................................... 11
Chapter 3 System Design..........................................................................................15
3.1 System Architecture ......................................................................................15
3.2 Database Design ...........................................................................................17
3.3 Sequence Diagrams ......................................................................................17
3.4 User interface Design ..................................................................................17
3.5 Security Measures........................................................................................18
3.6 Error Handling and Exception Management ...............................................18

4
Chapter 4 Implementation ...............................................................19
4.1 Admin Registration.............................................................19
4.1.1 Registration Form.......................................................19
4.1.2 Authentication and Authorization.............................. 19

4.2 Admin Login........................................................................20

4.3 Billing Management............................................................. 20
4.4 Report Generation ................................................................ 21
4.4 Database Design and Management....................................... 21
4.6 Security Measures................................................................ 22
Chapter 5 Testing .............................. ……………........................... 24
5.1 Test Strategy ................................................................................ 24

5.2 Test Planning............................................................................24

5.3 Test Case Development............................................................25

5.4 Type of Testing.........................................................................25

Chapter 6 Source code .............................. …………….....................27

6.1 Index.jsp ...................................................................................27

6.2 Css ............................................................................................32

Chapter 7 Output ................................................................................ 42

Chapter 8 Conclusion .......................................................................... 48

Chapter 9 Reference ............................................................................. 49

6
 Abstract

The Electricity Billing Management System (EBMS) is a comprehensive software

solution designed to streamline and automate the complex processes involved in
managing electricity billing for residential, commercial, and industrial customers.
With the ever-increasing demand for efficient energy management, this project aims
to address the challenges faced by utility companies in accurately measuring,
calculating, and billing electricity consumption.

List Of Figures
Figure 1 : Html ..................................................................................................11
Figure 2 : CSS ...................................................................................................12
Figure 3 : JavaScript ......................................................................................... 12
Figure 4 : JSP(Java Server Page) ...................................................................... 13

7
Figure 5 : Servlet ............................................................................................... 13
Figure 6 : Client-server architecture ..................................................................15
Figure 7 : Three-Tier architecture ..................................................................... 16
Figure 8 : Web- based architecture ................................................................... 16 Figure
9 : Registration Form (admin) ............................................................... 19
Figure 10 : Testing Phase .................................................................................. 24
Figure 11: Unit testing ....................................................................................... 25
Figure 12: Integration Testing ........................................................................... 26
Figure 13: Website Homepage .......................................................................... 42
Figure 14: Download Bill ................................................................................. 43
Figure 15: Your bill page ...................................................................................43
Figure 16: Admin Dashboard .............................................................................44
Figure 17: New connection Form .......................................................................44
Figure 18 : Check Customer reading ..................................................................45
Figure 19: View Electricity Connection .............................................................45
Figure 20 : Connection Reports ..........................................................................46
Figure 21 : Contacts ............................................................................................46
Figure 22 : Feedback ...........................................................................................47

Chapter 1

Introduction

1.1 Project Overview:

The electricity billing management project aims to develop a comprehensive system that automates the
billing process for electricity consumption. The system utilizes JSP (JavaServer Pages), Servlet, and
8
MySQL technologies to provide an efficient and user-friendly platform for managing electricity billing
operations.

1.2 Background:
With the increasing demand for electricity and the complexity of billing procedures, there is a growing
need for streamlined and accurate billing management systems. Traditional manual methods often result
in errors, delays, and inefficiencies. Therefore, the development of an automated solution becomes
imperative to enhance the efficiency and effectiveness of the billing process.

1.3 Project Objectives:

• To design and implement a web-based electricity billing management system.

• To automate the meter reading, tariff calculation, and invoice generation processes.
• To provide real-time access to billing information for both consumers and administrators.
• To ensure data accuracy, security, and reliability in storing and retrieving billing records.
• To improve the overall efficiency of electricity billing operations and enhance customer satisfaction.

1.4 Project Scope:

The scope of the electricity billing management project encompasses the following key aspects:

• User registration and login functionalities for consumers and administrators.

• Meter reading data entry and processing.
• Tariff calculation based on consumption and tariff rates.
• Generation and distribution of accurate invoices and bills. • Payment processing and tracking of
outstanding balances.

• Reporting and analytics features for monitoring billing trends and performance

1.5 Methodology:
The project follows a structured approach, including phases such as requirements gathering, system
design, implementation, testing, and deployment. Agile development principles have been adopted to
ensure flexibility and accommodate any changes or refinements during the development process.

Technology Stack:

9
• Frontend: HTML, CSS, JavaScript, JSP, Bootstrap.
• Backend: Java Servlets, MySQL database.(workbench)
• Development Tools: Apache Netbeans IDE, Apache Tomcat server.

1.6 Report Structure:

This report presents a detailed analysis of the electricity billing management system. It comprises various
sections, including project objectives, system architecture, implementation details, testing and evaluation,
and a conclusion summarizing the key findings and contributions.

Chapter 2 Analysis and System Requirements

2.1 Analysis of Current Electricity Billing System:

The existing electricity billing system often relies on manual processes, leading to challenges such as
errors in meter reading, delayed invoice generation, and difficulty in tracking payments. These
inefficiencies can result in customer dissatisfaction and financial losses for utility providers. Therefore, a
detailed analysis of the current system's limitations and shortcomings was conducted to identify areas for
improvement.

2.2 Requirements:

10
• Admin Registration and Login: The system should allow administrator to register and log in securely
to access their billing information.
• Meter Reading and Data Processing: The system should facilitate the recording and processing of
meter reading data accurately.
• Tariff Calculation: The system should calculate electricity consumption charges based on tariff rates
and meter readings.
• Invoice Generation: The system should generate detailed and accurate invoices for consumers,
including billing period and payment due dates.
• Payment Processing: The system should provide secure payment processing options and track
outstanding balances.

Reporting and Analytics: The system should offer reporting functionalities to monitor billing trends,
analyze consumption patterns, and generate insights for decision-making.

2.3 Constraints and Assumptions:

Technical Constraints: The system development should adhere to the technical capabilities and
limitations of the selected technologies (JSP, Servlet, MySQL).

Budgetary Constraints: The project implementation should consider the allocated budget and available
resources. But in this project fortunately I do not have to spend money.

Assumptions: The system assumes that consumers will provide accurate meter readings and that utility
providers will maintain the necessary infrastructure for data collection and processing.

2.4 System Architecture:

The system architecture encompasses the frontend and backend components. The frontend utilizes HTML,
CSS, JavaScript, and JSP to create an interactive user interface, while the backend employs Java Servlets
to handle user requests, process data, and interact with the MySQL database.

11
• HTML: HTML stands for Hypertext Markup Language. It is used to design the front-end
portion of web pages using markup language. It acts as a skeleton for a website since it is
used to make the structure of a website.

Figure 1 : Html

CSS: Cascading Style Sheets fondly referred to as CSS is a simply designed language intended
to simplify the process of making web pages presentable. It is used to style our website.

Figure 2: CSS

12
• JavaScript: JavaScript is a scripting language used to provide a dynamic behaviour to our
website.

Figure 3 : JavaScript

• JSP: JSP (JavaServer Pages) is a technology used for creating dynamic web pages in Java. It
allows for the mixture of static HTML content with Java code, enabling the development of
dynamic and interactive web applications. JSP files are processed on the server side and the
resulting HTML is sent to the client's web browser.

Figure 4: Jsp

• Servlet: Servlets are Java classes that handle requests and responses in a web application.
They are used to extend the functionality of web servers and generate dynamic content.

13
 Servlets are responsible for processing client requests, executing business logic, and
generating the appropriate response to be sent back to the client.

Figure 5 : servlet

• MySql: MySQL is an open-source relational database management system (RDBMS) that

uses SQL (Structured Query Language) for managing and manipulating data. It provides a
robust and scalable solution for storing and retrieving structured data, making it widely used
in web applications, data-driven software, and other database-intensive systems.

14
Chapter 3 System Design
3.1 System Architecture:
The system architecture of the electricity billing management system defines the overall structure,
components, and interactions of the system. It provides a high-level view of how different modules and
components of the system are organized and connected. The system architecture ensures that the system is
designed to meet functional and non-functional requirements while promoting scalability, reliability, and
maintainability. The key aspects of the system architecture in our project include:

3.1.1 Client-Server Architecture:

The system follows a client-server architecture, where the client (web browser or application)
interacts with the server (hosting the application and database). This architecture enables users to
access and interact with the system through a user-friendly interface while ensuring centralized
data management and processing on the server-side.

15
 Figure 6 : Client-server architecture

3.1.2 Three-Tier Architecture:

The system is designed using a three-tier architecture, consisting of presentation, application, and
data layers. The presentation layer handles the user interface and user interactions, the application
layer contains the business logic and processing, and the data layer manages the storage and
retrieval of data from the database.

Figure 7 : Three-Tier architecture

3.1.3 Web-Based Architecture:

The system is designed as a web-based application, accessible through a web browser. This
architecture allows users to access the system from any device with an internet connection,
without the need for installing dedicated client applications. It promotes accessibility and ease of
use for users.

Figure 8 : Web- based architecture

16
 3.1.4 Java Server Pages (JSP) and Servlets:

The system utilizes Java Server Pages (JSP) and Servlets for server-side programming. JSP
provides dynamic content generation and presentation, while Servlets handle the processing of
user requests and manage the interaction with the database. This architecture ensures efficient
handling of user requests and seamless integration with the backend.

3.2 Database Design:

• The system utilizes a MySQL database to store and manage billing-related data.
• The database schema includes tables such as Consumer, MeterReading, Tariff, Invoice, and Payment
to capture and organize relevant information.
• Proper relationships, such as primary keys and foreign keys, are established to ensure data integrity
and consistency.

3.3 Sequence Diagrams:

• Sequence diagrams illustrate the interactions and flow of messages between different objects or
components in the system.
• The sequence diagrams for the electricity billing management system show the step-by-step process
of activities such as user registration, meter reading submission, invoice generation, and payment
processing.
• These diagrams provide a visual representation of the sequence of events and help understand the
system's behavior and communication between various components.

3.4 User Interface Design:

• The user interface is designed to be intuitive, user-friendly, and visually appealing.

• The frontend development technologies, including HTML, CSS, JavaScript, and Bootstrap, are used
to create responsive and interactive web pages.
• Attention is given to usability, ensuring that consumers and administrators can easily navigate through
the system, perform actions, and access relevant information.

17
3.5 Security Measures:

• The system incorporates security measures to protect user data and prevent unauthorized access.
• User authentication and authorization mechanisms are implemented to ensure that only authorized
individuals can access and modify data.
• Input validation and sanitization techniques are employed to prevent security vulnerabilities such as
SQL injection and cross-site scripting (XSS).

3.6 Error Handling and Exception Management:

• Robust error handling and exception management mechanisms are implemented to handle and report
errors gracefully.
• Proper error messages and notifications are provided to users when they encounter issues or perform
invalid actions.
• The system logs and tracks errors for troubleshooting and improvement purposes.

Chapter 4

Implementation
4.1 Admin Registration:

18
 4.1.1 Registration Form:

The system presents a registration form specifically designed for administrators to enter their
required details. This form typically includes fields such as username, email address, password,
and additional information for verification and security purposes.

Figure 9 : Registration Form (admin)

4.1.2 Authentication and Authorization:

During the registration process, the system verifies the provided credentials and validates the
authenticity of the administrator. It may involve email verification, password complexity checks,
or other security measures to ensure that only authorized individuals can register as
administrators.

4.2 Admin Login:

Administrators are required to enter their registered username and password to authenticate their identity
and gain access to the system. The system verifies the provided credentials against the stored data to
ensure the authenticity of the administrator.

- Secure Login Mechanism:

19
 The admin login feature incorporates security measures such as encrypted communication
(HTTPS), password hashing, and session management to protect the login process from
unauthorized access or data breaches. These measures help in safeguarding sensitive
administrator credentials.

The admin login feature ensures secure and controlled access to the administrative functionalities of the
electricity billing management system. By authenticating administrators' identities and implementing
security measures, the feature protects sensitive data and maintains the integrity of the system. It provides
a reliable and convenient way for administrators to access the system and perform their designated tasks
effectively.

4.3 Billing Management:

The system provides an interface for the admin to manage billing-related operations. This includes
functionalities such as viewing and updating tariff rates, generating monthly invoices, and tracking
payment statuses. The implementation involves developing appropriate forms, tables, and views in the
frontend, and handling the corresponding backend logic using Java Servlets. The admin can perform
operations like updating tariff rates in the database, generating invoices based on consumption data, and
viewing payment records.

4.4 Report Generation:

The system allows the admin to generate reports related to billing and energy consumption. This includes
functionalities such as generating monthly reports, annual reports, or customized reports based on specific
criteria. The implementation involves creating report generation modules in the backend using Java
Servlets. The modules retrieve relevant data from the database, apply necessary calculations, and generate
reports in formats like PDF or CSV.

4.4 Database Design and Management:

• The database design and management play a crucial role in the effective functioning of the electricity
billing management system. In our project, we have utilized MySQL as the database management
system due to its robustness, scalability, and compatibility with our chosen technologies.

20
• Our database schema is designed to capture the relevant entities and their relationships in the
electricity billing domain. The schema consists of several tables, including Admin, Customer, Billing,
Meter, and Feedback, each representing a distinct entity within the system. These tables are connected
through appropriate relationships, such as one-to-one or one-to-many, to maintain data consistency
and integrity.
• To eliminate data redundancy and improve data integrity, we have applied data normalization
techniques. Our database schema adheres to the third normal form (3NF), ensuring that each attribute
is dependent only on the primary key and eliminating any transitive dependencies.
• The entity-relationship (ER) diagram provides a visual representation of the entities and their
relationships within the database schema. The diagram depicts the cardinality and participation
constraints, guiding the interactions between entities and enabling efficient data retrieval and
manipulation.

• In terms of data validation and constraints, we have implemented primary keys, foreign keys, unique
constraints, and check constraints. These mechanisms ensure that the data entered into the database is
valid, consistent, and meets the defined business rules. They also help in maintaining data integrity
and preventing any inconsistencies.

4.6 Security Measures:

4.6.1 User Authentication:

To verify the identity of users accessing the system, i have implemented a robust user
authentication mechanism. Users are required to provide valid credentials, such as a username
and password, to gain access to the system. This prevents unauthorized individuals from
accessing sensitive information.

4.6.2 Input Validation:

To mitigate the risk of security vulnerabilities like SQL injection or cross-site scripting (XSS), i
have implemented input validation and sanitization techniques. User inputs are thoroughly
validated and sanitized before being processed, preventing malicious code or unauthorized
queries from being executed.

4.6.3 Regular Security Audits:

21
 We conduct regular security audits to identify potential vulnerabilities or weaknesses in the
system. These audits involve reviewing system configurations, code reviews, and vulnerability
scanning. Any identified vulnerabilities are promptly addressed and patched to maintain a secure
environment.

4.6.4 Logging and Monitoring:

I have implemented logging and monitoring mechanisms to track system activities and detect any
suspicious or unauthorized behavior. System logs capture relevant events, such as login attempts,
access to sensitive data, or critical system operations. Monitoring tools are utilized to analyze the
logs and identify any anomalies or security breaches.

4.7 Error Handling and Logging:

4.7.1 Exception Handling:

• Exception handling is implemented to catch and handle unexpected or exceptional situations that may
disrupt the normal flow of the system. It involves identifying potential points of
failure, such as database operations or external API interactions, and implementing
appropriate error handling routines.
• By implementing exception handling, we can gracefully handle exceptions, provide meaningful error
messages, and perform necessary recovery actions or fallback mechanisms. This ensures that the
system maintains stability and continues to function even in the face of unforeseen errors.

4.8 Bill Download:

4.8.1 Customer Authentication:

To ensure the security and privacy of billing information, the system requires customers to
authenticate themselves before accessing and downloading their bills. This authentication process
typically involves providing login credentials, such as a username and password, or other
verification methods to confirm the customer's identity.

4.8.2 Bill Selection:

22
 Once authenticated, customers can select the specific billing period or bill they wish to download.
The system may present a list of available bills based on the customer's billing history and
provide options to filter or search for bills based on specific criteria, such as date range or bill
number.

Chapter 5

Testing
Testing is a crucial phase in the development of the electricity billing management system. It involves
evaluating the system's functionality, performance, and reliability to ensure that it meets the desired
requirements and quality standards. Testing helps to identify defects, validate the system's behavior, and
ensure a smooth user experience. The key aspects of testing in our project include:

Figure 10 : Testing Phase

23
 5.1 Test Strategy:
The test strategy is a high-level document that outlines the overall approach and techniques to be used for
testing the electricity billing management system. It defines the testing objectives, test levels, and the
allocation of testing resources. The strategy ensures that testing efforts are focused and aligned with the
project's goals and objectives.

5.2 Test Planning:

Test planning involves creating a detailed plan that outlines the activities, schedules, and resources
required for testing. It includes defining the scope of testing, test deliverables, test environments, and the
identification of test scenarios and test cases. The test plan provides a roadmap for executing the testing
activities efficiently and effectively.

5.3 Test Case Development:

Test cases are designed to validate the system's functionalities and ensure that they are working as
expected. Test cases are created based on various scenarios, covering both normal and exceptional
situations. Each test case specifies the input data, expected outputs, and any preconditions or
postconditions. Well-designed test cases help in thorough testing and ensure comprehensive coverage of
the system.

5.4 Type of Testing:

5.4.1 Unit Testing

Unit testing focuses on testing individual components or units of the system in isolation. It
verifies that each unit functions correctly and meets the specified requirements. Unit testing
involves writing test cases for each unit and executing them to identify any defects or issues. This
level of testing helps in detecting and fixing errors early in the development process.

24
 Figure 11: Unit testing

5.4.2 Integration Testing:

Integration testing verifies the proper integration and interaction between different modules or
components of the system. It ensures that the system works seamlessly as a whole and that the
components function together as expected. Integration testing involves testing the interfaces
between modules and validating the data flow and communication between them. It helps in
identifying any interface or communication issues early on.

Figure 12: Integration Testing

25
Chapter 6

Source code

6.1 Index.jsp
Page Directive:

The @page directive at the beginning of the code specifies the language and character encoding for the
JSP file. In this case, the language is set to Java, and the character encoding is set to ISO-8859-1. This
directive ensures proper interpretation and rendering of the JSP file.

HTML Structure:

The code follows the standard HTML structure, starting with the <!doctype html> declaration and
enclosing the content within the <html> tags. This structure provides a foundation for creating web
pages.

Head Section:

The <head> section contains various elements that define the behavior and appearance of the web page.
These elements include:

26
Title: The <title> element specifies the title of the web page, which appears in the browser's title bar or
tab.

Meta Tags: The <meta> tags provide information about the character encoding and viewport settings for
the web page.

External CSS and Font Files: The <link> elements reference external CSS files and font files to style the
web page. In this code, a Bootstrap CSS file and a Google Fonts CSS file are linked.

External JavaScript Library: The <script> tag includes a link to the jQuery library hosted on a content
delivery network (CDN). jQuery is a JavaScript library that simplifies HTML document traversal, event
handling, and animation.

Body Section:

The <body> section represents the visible content of the web page and includes various elements:

Header: The <header> element represents the header section of the web page. It contains a container
with a navigation bar (<nav>) that includes a logo and links (<a>) to different sections of the website.
The navigation bar is collapsible on smaller screens using Bootstrap's navbar-toggler component.

27
Hero Section: The <div> with the class hero-section displays a prominent headline and a brief
description of the electricity billing system. It provides an introduction to the purpose of the system.

Simple Section: The <section> with the class simple-section presents a brief explanation of the
electricity billing system. It highlights the concept of electronic billing and its advantages.

28
Services Section: The <section> with the class services-section showcases three cards (<div> with the
class card) that represent different advantages of electronic billing systems. Each card includes an icon, a
title, and a description.

Contact Section: The <section> with the class contact-section contains a contact form (<form>) where
users can submit their name, email, mobile number, and message. The form action is set to a JSP file
called "Contact Us" for processing the form submission. If a message is present in the session attribute, it
is displayed as an alert (<div> with the class alert alert-info) using an if condition.

29
Footer: The <footer> element represents the footer section of the web page. It includes project details
and credits. In this code, it displays the name of the project and the author.

JavaScript and jQuery:

The code includes JavaScript and jQuery code snippets to enhance the functionality and interactivity of
the web page. These snippets are enclosed within <script> tags.

Show/Hide Alert: The jQuery code $('#info').delay(3000).show().fadeOut('slow'); is used to show an

alert message (<div> with the id info) for a duration of 3 seconds and then fade it out slowly. This code is
typically used to display success or informational messages to the user.

Scroll-to-Top Button: The JavaScript code scroll Button defines a function that shows or hides a scrollto-
top button based on the user's scrolling behavior. The button is displayed when the user has scrolled 20
pixels down from the top of the page. Clicking the button triggers a smooth scroll animation to the top of
the page.

30
 6.2 CSS

html { scroll-behavior:
smooth;
}

body, html { margin: 0;

padding: 0; font-family:
'Karla', sans-serif;
}

*{
box-sizing: border-box;
}

.d-grid {
display: grid;
}

.d-flex { display:
flex; display: -
webkit-flex;
}

.text-center { text-
align: center;
}

.text-left { text-
align: left;
}

.text-right { text-
align: right;
}

31
button, input, select { -webkit-
appearance: none; outline:
none; font-family: 'Karla',
sans-serif;
}

button, .btn,
select { cursor:
pointer;
}

a { text-decoration:
none;
}

img { max-width:
100%;
}

ul {
margin: 0;
padding: 0
}

h1, h2, h3,

h4, h5, h6, p
{ margin:
0;
padding: 0
}

p{
color: #666; font-
size: 18px; line-
height: 25px;
}

.p-relative {
position: relative;
}

.p-absolute {
position: absolute;
}

32
.p-fixed {
position: fixed;
}

.p-sticky {
position: sticky;
}

.btn, button, .actionbg, input {

border-radius: 4px; -
webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
-ms-border-radius: 4px;
}

.btn:hover, button:hover {
transition: 0.5s ease; -
webkit-transition: 0.5s ease;
-o-transition: 0.5s ease;
-ms-transition: 0.5s ease;
-moz-transition: 0.5s ease;
}

/*-- wrapper start --*/

.wrapper { width:
100%; padding-
right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}

@media (min-width: 576px) {

.wrapper { max-
width: 540px;
}
}

@media (min-width: 768px) {

.wrapper { max-
width: 720px;
}
}

@media (min-width: 992px) {

33
 .wrapper { max-
width: 960px;
}
}

@media (min-width: 1200px) {

.wrapper { max-
width: 1140px;
}
}

.wrapper-full {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}

/*-- //wrapper start --*/

/*-- form styling --*/

.w3l-workinghny-form .logo { text-
align: center;
}

.w3l-workinghny-form .logo a.brand-logo {

display: inline-block;
text-align: center; font-size:
50px; line-height: 1.1em;
font-weight: 700; color:
#212529; margin-bottom:
30px; text-transform:
capitalize; letter-spacing: -
1px;
}

.w3l-workinghny-form .align-end {
align-self: flex-end; padding:
2em;
}

.w3l-workinghny-form .logo a.brand-logo span {

font-weight: 300;
}

34
.w3l-workinghny-form h1 {
font-size: 50px; line-
height: 1.1em; font-
weight: 700; color:
#3f3a64;
}

.w3l-workinghny-form {
position: relative;
z-index: 0; padding:
2em 0px; display:
grid; align-items:
center; height:
100vh;
}

.w3l-workinghny-form .pos-relative {
position: relative;
}

.w3l-workinghny-form .copyright { margin-

top: 20px;
}

.w3l-workinghny-form p.copy-footer-29 a {
color: #495057;
}

.w3l-workinghny-form p.copy-footer-29 a:hover {

color: #4361ee;
}

.w3l-workinghny-form h2 {
font-size: 30px; color:
#fff; margin-bottom:
15px;
}

.w3l-workinghny-form .workinghny-block-grid {
display: grid; grid-template-columns: 1.2fr
1fr; grid-gap: 70px; width: 90%; margin:
0 auto; align-items: center;
}

.w3l-workinghny-form .login-form-content {
padding: 2em 0em;
35
}

.w3l-workinghny-form .one-frm label {

font-style: normal;
font-size: 16px; color:
#343a40; display:
block; margin-
bottom: 10px; font-
weight: 400;
}

.w3l-workinghny-form input {
background: transparent; border:
none; border-bottom: 2px solid
#212529;
color: #777;
background:transparent;
font-size: 13px; line-
height: 20px; padding:
12px 15px; width:
100%; margin-bottom:
30px; border-radius: 0;
outline: none;
}

.w3l-workinghny-form input:focus {
background: transparent; border-bottom:
2px solid #4361ee; box-shadow: none;
}

.w3l-workinghny-form .btn-style {
font-size: 18px; color: #fff;
width: 100%; background:
#4361ee; border: none;
height: 55px; font-weight: 700;
border-radius: 6px; transition:
.3s ease; -webkit-transition: .3s
ease;
-moz-transition: .3s ease;
-ms-transition: .3s ease; -o-transition:
.3s ease; box-shadow: 0 3px 6px 0
rgba(0,0,0,0.2);
}

.w3l-workinghny-form .btn-style:hover {
background: #f72585; transform:
36
translateY(-3px); box-shadow: 0 6px 6px
0 rgba(0,0,0,0.2);
}

.w3l-workinghny-form p.already,
.w3l-workinghny-form p.already a {
font-size: 18px; line-height:
25px; color: #495057; margin:
25px 0 0; text-align: center;
}

.w3l-workinghny-form p.remember {
color: #495057; line-height: 20px
}

.w3l-workinghny-form p.already a {
color: #495057; font-weight:
700;
}

.w3l-workinghny-form p.already a:hover {

color: #4361ee;
}

.w3l-workinghny-form .check-remaind input {

position: absolute;
opacity: 0; cursor:
pointer; height: 0;
width: 0;
}

.w3l-workinghny-form .check-remaind {
display: block; position: relative;
padding-left: 35px; cursor: pointer;
margin: 5px 0px 30px; -webkit-user-
select: none;
-moz-user-select: none; -ms-
user-select: none; user-select:
none;
}

.w3l-workinghny-form .check-remaind input {

position: absolute;
opacity: 0; cursor:
pointer; height: 0;
width: 0;
37
}

.w3l-workinghny-form .checkmark {
position: absolute; top: 0px;
left: 0; height: 21px; width:
21px; background-color:
#F5F4F2; border-radius: 4px;
}

.w3l-workinghny-form .check-remaind:hover input~.checkmark {

background-color: #4361ee;
}

.w3l-workinghny-form .check-remaind input:checked~.checkmark {

background-color: #4361ee;
}

.w3l-workinghny-form .checkmark:after {
content: ""; position: absolute;
display: none;
}

.w3l-workinghny-form .check-remaind input:checked~.checkmark:after {

display: block;
}

.w3l-workinghny-form .check-remaind .checkmark:after {

left: 7px; top: 3px; width: 5px; height: 10px;
border: solid #fff; border-width: 0 2px 2px 0;
transform: rotate(45deg);
}

/* -- placeholder --*/
::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: #777;
}

::-moz-placeholder {
/* Firefox 19+ */
color: #777;
}

:-ms-input-placeholder {
/* IE 10+ */ color:
#777;
38
}

:-moz-placeholder {
/* Firefox 18- */
color: #777;
}

/* -- placeholder --*/

/*-- responsive design --*/

@media (max-width: 992px) {
.w3l-workinghny-form .workinghny-block-grid {
grid-template-columns: 1fr;
grid-gap: 10px;
width: 100%;
}
.w3l-workinghny-form .login-form-content {
padding: 0em 0em 2em 0;
}
.workinghny-left-img {
order: 2;
}

.w3l-workinghny-form .logo a.brand-logo {

font-size: 40px;
margin-bottom: 10px;
}

.w3l-workinghny-form {
height: auto;
}
}

@media (max-width: 667px) { .w3l-workinghny-

form .align-end {
padding: 0em;
}
}

@media (max-width: 480px) { .w3l-workinghny-

form .logo a.brand-logo {
font-size: 35px;
}

39
 .w3l-workinghny-form h2 {
font-size: 22px;
}
}

@media (max-width: 415px) { .w3l-

workinghny-form .copyright { margin-top:
30px;
}
}

Chapter 7

Output

40
Figure 13: Website Homepage

41
Figure 14: Download Bill

Figure 15: Your bill page

42
 Figure 16: Admin Dashboard

Figure 17: New connection Form

43
 Figure 18 : Check Customer reading

Figure 19: View Electricity Connection

44
Figure 20 : Connection Reports

Figure 21 : Contacts

45
 Figure 22 : Feedback

Chapter 8

46
Conclusion

The developed web application, "Electricity Billing System," aims to address the challenges faced
in traditional electricity billing processes by providing an efficient and user-friendly electronic
billing solution. The system offers features such as admin registration, bill generation, payment
processing, and customer support.

Through the project, we successfully achieved our goals of streamlining the billing process,
improving accuracy, and enhancing customer convenience. The web application allows customers
to easily download their bills, make payments online, and provide feedback or comments.

The implementation of electronic billing brings several benefits to utility companies and
customers. It reduces the need for manual paperwork, lowers administrative costs, and improves
billing accuracy. Customers can conveniently access their bills online, make timely payments,
and receive prompt notifications.

During the development process, we encountered challenges related to system integration,

security measures, and testing. However, through effective planning and problem-solving, we
were able to overcome these challenges and deliver a robust and reliable system.

Chapter 9

Reference

47
- JSP code structure for header and footer by Petr Dvořák (stack overflow)

- JSP Program login page Examples: Registration & Login Form by James hartman

(GURU99)

- Implementing CSS and JavaScript in JSP File (RoseIndia.net)

- Add captcha in Java Jsp Pages using mysql database by jinu (chillyfacts.com)

- Spring MVC – How to include JS or CSS files in a JSP page by mkyong

(mkyong.com)

- SQL Commands: DDL, DML, DCL, TCL, DQL by scaler topics - How to create,

delete, select in sql by Sahiti kappagantula.

- JAR file Database connection by ssik2000(stack overflow)

- Java Servlet and JDBC Example | Insert data in MySQL by BilalHungund (GeekForGeeks)

- Understanding configuration in web.xml file (Manh phan)

48