A Project Report

Submitted to the Apex University , Jaipur

In Partial fulfillment of the requirement for the degree of

Bachlor Of Technology
Submitted by
(Daksh Pratap) (Sagar Jadiya)

(APX-JPR-2020/01611) (APX-JPR-2020/00539)

Submitted To:
Anshu Agarwal
Department of Computer Science

Apex University
Sec-5, V.T. Road, Mansarovar, Jaipur
B.Tech Admission Year
(JUNE,2020)
 Candidate’s Declaration

We, Daksh Pratap,Sagar jadiya hereby declare that the work presented in this
project entitled “Electricity Billing System ” in fulfillment of the requirements for
the award of Bachelor of Technology, submitted in the Department of Computer
Science at Apex University, Jaipur, is an authentic record of my own research work
under the supervision of Anshu Agarwal.

We 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 us for any other
Degree/Diploma.

(Name & Signature of Candidate)

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

(Name & Signature of Candidate)

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

Date:………………………………
 ACKNOWLEDGEMENT

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

Daksh Pratap(B.Tech)
Sagar Jadiya(B.tech)

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

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 .........................................................
11
2.1 Analysis of Current Electricity Billing System ............................................
11
2.2 Requirements ................................................................................................
11
2.3 Constraints and assumptions ........................................................................
12
2.4 System Architecture ....................................................................................
12
Chapter 3 System Design ..........................................................................................
16
3.1 System Architecture ......................................................................................
16
3.2 Database Design ...........................................................................................
18
3.3 Sequence Diagrams ......................................................................................
18
3.4 User interface Design ..................................................................................
18
3.5 Security Measures ........................................................................................ 18
3.6 Error Handling and Exception Management ............................................... 19
6
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
5

7
8
Abstract

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

10
List Of Figures

11
Figure 1 : Html ..................................................................................................11
Figure 2 : CSS ...................................................................................................12
Figure 3 : JavaScript ......................................................................................... 12
Figure 4 : JSP(Java Server Page) ...................................................................... 13
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

12
Introduction

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

14
1.5 Methodology:

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

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

16
17
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:

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

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

• 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

20
CSS: Cascading Style Sheets fondly referred to as CSS is a simply designed language intended to simplify

21
the process of making web pages presentable. It is used to style our website.

Figure 2: CSS

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

Figure 3 : JavaScript

22
• JSP: JSP (JavaServer Pages) is a technology used for creating dynamic web pages in Java. It allows

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

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

25
(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.

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

Figure 6 : Client-server architecture

28
29
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

3.1.4 Java Server Pages (JSP) and Servlets:

30
The system utilizes Java Server Pages (JSP) and Servlets for server-side programming. JSP provides dynamic

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

3.5 Security Measures:

• The system incorporates security measures to protect user data and prevent unauthorized access.

32
• User authentication and authorization mechanisms are implemented to ensure that only authorized individuals

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

34
Implementation

35
4.1 Admin Registration:

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:

36
Administrators are required to enter their registered username and password to authenticate their identity and gain

37
access to the system. The system verifies the provided credentials against the stored data to ensure the authenticity of
the administrator.

- Secure Login Mechanism:

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.

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

40
22

41
validated and sanitized before being processed, preventing malicious code or unauthorized queries from being

42
executed.

4.6.3 Regular Security Audits:

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:

43
To ensure the security and privacy of billing information, the system requires customers to authenticate themselves

44
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:

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.

45
46
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

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.

47
5.3 Test Case Development:

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

Figure 11: Unit testing

5.4.2 Integration Testing:

49
Integration testing verifies the proper integration and interaction between different modules or components of the

50
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

51
Source code

52
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:

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.

53
External CSS and Font Files: The <link> elements reference external CSS files and font files to style the

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

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

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.

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

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.

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

60
61
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 { textalign: center;

}

.text-left { textalign: left;

}

.text-right { textalign: right;

}

62
button, input, select { -

63
webkitappearance: 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; fontsize:

18px; lineheight: 25px;
}

.p-relative { position: relative;

}

.p-absolute { position: absolute;

}

64
.p-fixed { position: fixed;

65
}

.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%; paddingright:
15px; padding-left: 15px;
margin-right: auto; margin-
left: auto;
}

@media (min-width: 576px) {

.wrapper { maxwidth: 540px;
}
}

@media (min-width: 768px) {

.wrapper { maxwidth: 720px;
}
}

66
@media (min-width: 992px) { .wrapper { maxwidth: 960px;

67
 }
}

@media (min-width: 1200px) {

.wrapper { maxwidth: 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 { textalign: 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;

}

68
.w3l-workinghny-form h1 { font-

69
size: 50px; lineheight: 1.1em;
fontweight: 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 { margintop: 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;

70
}

71
.w3l-workinghny-form .one-frm label { font-
style: normal; font-size: 16px; color:
#343a40; display: block; marginbottom:
10px; fontweight: 400;
}

.w3l-workinghny-form input { background:

transparent; border: none; border-bottom: 2px
solid
#212529;
color: #777;
background:transparent; font-size:
13px; lineheight: 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);
}

72
.w3l-workinghny-form .btn-style:hover { background: #f72585;

73
transform: 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-
userselect: none;
-moz-user-select: none; -msuser-select: none;
user-select:
none; }

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

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

74
}

75
.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;

76
}

77
:-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-workinghnyform

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

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

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

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

79
 }
}

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

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

Chapter 7

Output

80
81
Figure 13: Website Homepage

82
83
Figure 14: Download Bill

84
Figure 15: Your bill page

85
86
Figure 16: Admin Dashboard

87
Figure 17: New connection Form

88
89
 Figure 18 : Check Customer reading

Figure 19: View Electricity Connection

90
91
Figure 20 : Connection Reports

92
Figure 21 : Contacts

93
94
Figure 22 : Feedback

95
96
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.

97
Reference

98
- 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)

99