Contact Info Maintenance for CESC Customers

1
Contact Information Maintenance App
Project submitted for Summer Internship of
Bachelor of Technology
In
Computer Science & Engineering
Submitted by:
Subhayu Chakravorty
3rd Year (2012 - 2016)
Institute of Engineering & Management, Kolkata

2
TOPIC:
CONTACT INFORMATION MAINTENANCE APP
STUDENT NAME:
SUBHAYU CHAKRAVORTY
INSTITUTE NAME:
INSTITUTE OF ENGINEERING & MANAGEMENT, KOLKATA
STREAM:
COMPUTER SCIENCE AND ENGINEERING
YEAR:
3RD
YEAR (2012 - 2016)
TRAINING PERIOD:
Start Date: 12-JUNE-2015
End Date: 10-JULY-2015
PLACEMENT OF INTERNSHIP:
Computer House, 25C, Shakespeare Sarani, Kolkata - 700017.

3
CERTIFICATE OF ORIGINALITY
This is to certify that the project entitled “CONTACT INFORMATION
MAINTENANCE SYSTEM” is a bonafide record of the work done in partial
fulfillment of the requirements for the award of Bachelor of Technology
(Computer Science) to -
Name: SUBHAYU CHAKRAVORTY
Roll: 10400112153
Registration: 12012002002119
Session: 2012-2016
This is an authentic work carried out under my supervision. To the best of
my knowledge, the content of this project does not form a basis for the award of
any previous degree to anyone else.
_________________________
Mr. Amit Roy
(General Manager)
I.T. Department
C.E.S.C. Ltd., Kolkata
________________________ _________________________
Mr. Partha Mukherjee Mr. Nabarun Chakraborty
(Deputy General Manager) (Senior Deputy Manager)
I.T. Department I.T. Department
C.E.S.C. Ltd., Kolkata C.E.S.C. Ltd., Kolkata

4
ACKNOWLEDGEMENT
I take this opportunity to express my profound gratitude and deepest
regards to all those who sincerely helped me with their advice and guidance for
the completion of this project.
I am extremely grateful to my mentor Mr. Nabarun Chakraborty (Senior
Deputy Manager), I.T. Department, CESC Ltd., Kolkata, for the confidence
bestowed in me and entrusting my project entitled “Contact Information
Maintenance App” for CESC Ltd.
I also take this opportunity to honour and express my sincere thanks to Mr.
Debashis Rai (Vice President), I.T. Department, CESC Ltd, Kolkata and Mr.
Partha Mukherjee (Deputy General Manager), I.T. Department, CESC Ltd,
Kolkata, for giving me this opportunity to work as an intern at the I.T.
Department of CESC and providing valuable insights leading to the successful
completion of my project.
I am obliged to all the other staff members of CESC Ltd., I.T. Department,
Kolkata, for the valuable information provided by them in their respective fields.
I am grateful for their co-operation during the period of my assignment.
Lastly, I thank the Almighty, my parents, family and friends for their
support and encouragement without which this assignment would not have been
possible.
_____________________________
SUBHAYU CHAKRAVORTY

5
CONTENTS
A. INTRODUCTION
1. HISTORY
2. ABOUT COMPANY
B. SOFTWARE & HARDWARE
1. SOFTWARE USED
2. HARDWARE USED
C. PROJECT
1. INTRODUCTION
1.1 REQUIREMENT LIST
1.2 FEATURE LIST
2. PROJECT MANAGEMENT
2.1 APP STRUCTURE
2.2 IMPLEMENTATION LANGUAGE AND
TECHNOLOGY
2.3 DESIGN PROCESSES
2.4 TESTING
3. PROGRAM DESCRIPTION AND IMPLEMENTATION
3.1 DESIGN DESCRIPTION AND WORKING
3.2 INTERFACE AND SCREENSHOTS
3.3 DATABASE AND SERVER
4. PROJECT SOURCE CODES
5. CONCLUSION
5.1 WHAT HAS BEEN DONE
5.2 WHAT I HAVE LEARNT
5.3 WHAT I WOULD DIFFERENTLY IN FUTURE
D. BIBLIOGRAPHY

6
INTRODUCTION
1. HISTORY:
The first demonstration of electric light in Calcutta was conducted on July 24,
1879 by P. W. Fleury & Co. in 1881, 36 electric lights light up in Cotton Mill of
Mackinnon & Mckenzie. The first license covered an area of 5.64 square miles. On 7th
January 1897 Kilburn & Co. secured the Calcutta electric lighting license as agents of
The Electric Supply Corporation Limited. The company was soon changed the name to
the Calcutta Electric Supply Corporation Limited was registered in London.
On 17th April, 1899, the first thermal power plant of the Calcutta Electric Supply
Corporation Limited was commissioned at Emambagh Lane near Princep Ghat,
heralding the beginning of the thermal power generation in India. The Calcutta
Tramways Company switched to electricity from horse-drawn carriages in 1902. Three
new power generating station were started in 1906. The company was shifted to the
Victoria House, in Dharmatala, where it operated till date.
In 1970, the control of the Company was transferred from London to Calcutta. In
1978 it was christened Calcutta Electric Supply Corporation (India) Limited. The RPG
Group was associated with the Calcutta Electric Supply Corporation (India) Limited
from 1989, and the name was changed to CESC Limited. In 2011, CESC became part of
RP-Sanjiv Goenka Group, which was formed on 13th July 2011 by Sanjiv Goenka, the
youngest son of Dr. Rama Prasad Goenka, the late founder of RPG Enterprises.

7
2. ABOUT COMPANY:
CESC owns and operated 4 thermal power plants generating a total of 1225 MW
of power. It also operates two 20 MW gas turbines, as a Peak Load Power Plant to
compensate the need for additional power demand. The company has also established
its footprint in unconventional energy with a 9 MW solar project in Gujarat and a 50
MW wind project in Rajasthan. It is also developing three hydroelectric power projects,
with a combined capacity of 236 MW in Arunachal Pradesh.
In addition, the RP-Sanjiv Goenka Group has four captive power plants, with the
combined capacity of 76 MW, which are fuelled by the process waste gas produced at its
four carbon black manufacturing units in India. There is a 40 MW power plant running
on coal washery rejects and carbonaceous shale at the coal mining operations in
Asansol. More than 80% CESC customers’ electricity requirements are met from its own
generating plants, it’s captive coal mines provide about 50% of the coal requirement.
CESC also has its own Transmission & Distribution System through which it
supplies electricity to its consumers. This system comprises a 474 km circuit of
transmission lines linking the company’s generating and receiving stations with 85
distribution stations; a 3837 km circuit of HT lines further linking distribution station
with LT substations, large industrial consumers and a 9867 km of LT lines connecting
its LT substations to LT consumer.
Existing Power Plants
POWER STATION LOCATION CAPACITY (MW) TYPE
Budge Budge Thermal
Power Station
Budge Budge 750 Coal - Fired
Southern Thermal Power
Station
Kolkata 135 Coal - Fired
Titagarh Thermal Power
Station
Titagarh 240 Coal - Fired
Dhariwal Power Station Chandrapur 600 Coal - Fired
Kasba Thermal Power
Station
Kasba 40 Gas Turbine
Peak Load

8
SOFTWARE AND HARDWARE
1. SOFTWARE USED:
● Eclipse Juno [Development]
● Brackets [Development]
● Adobe PhoneGap Build [Compilation]
● Google Chrome [Testing]
● Oracle 10g Express Edition [Database only for Testing]
● Google Docs [ Documentation]
2. HARDWARE USED:
● CPU: Intel Pentium 4
● HARD DISK: 160 GB
● RAM: 2 GB
● OS: Windows 7
● RESOLUTION: 1366 X 768

9
PROJECT
ABSTRACT
CESC mobile apps needed a module to show a consumer, his personal details as
provided to the company by him. The consumer can edit his details if the need arises
and the latest updated information will easily be stored in the CESC database via their
app. I, as an intern, was assigned to create this module and make it ready to be
integrated into the original CESC mobile app.
1. INTRODUCTION
The aim of the project is to create a module for an existing Android / iOS
application (app). The module will enable customers to login using either their
Customer ID or their Consumer Number and update their existing details, as
maintained by the CESC database.
The CESC database consists of the personal details - name, address, contact
number, email address and personal identification number (Passport / Voter Card
Number, etc.). The customers of CESC, can login using either their registered Customer
ID or their Consumer Number. They will be able to see their details as has been
registered with CESC. They will also be able to update their contact number, email
address and personal identification number.
1.1 Requirement List
For the correct working of the module, the following are required.
1. Customers must be registered with CESC, and have their correct Customer ID or
Consumer Number with them.
2. The module (after it has been integrated with the original app, and uploaded) has
to be downloaded (or updated) via the Google Play Store or iOS App Store.
3. Internet connection for the app to properly work.
4. Customers must provide correct details of their information to be stored with
CESC.

10
1.2 Feature List
The features of the module as completed by the report deadline:
1. Customers can login using either their Consumer Number or Customer ID.
2. Customers can view their presently registered details - Name, Address, Contact
Number (if any), Email Address (if any), and Identification Number (if any).
3. Customers can edit (only update) their existing Contact Number, Email Address
and / or Identification Number.
4. Proper phone numbers, email addresses and identification numbers are required,
failing which, present details will not be changed.
5. Identification Type can be one of the following - Passport, Voter ID Card, Driving
License, Aadhar Card. Proper length numbers have to be given as input for each
type, otherwise submission will not be allowed.
6. Acceptance of the disclaimer is required to proceed to submission.
2. PROJECT MANAGEMENT
2.1 App Structure
The contact information module has two parts - the UI or the front end and the
database or the back end. My work was mainly to build a user interface (UI) which can
easily be navigated by and understood by anyone. The front end has all the validation
checks and a smooth interface for easy retrieval and updating of contact information to
and from the database.
The database, lying on the back end, is the actual CESC customer’s database.
Contact information is retrieved using specific key values and updated on submission.
My work was only to connect to the database and retrieve the values and update them
as and when required.
2.2 Implementation Language and Technology
The original app, is a hybrid app, built using HTML5, CSS3, and Jquery Mobile
with the database on Oracle. The connection between the front end and back end is
facilitated by JSON.
Since my module mostly involved the front end, I used HTML5, CSS3 and Jquery
Mobile. Then I used JSON for retrieving and updating the information to and from the
database (a test database had been set up for the purpose). Since I had very little

11
knowledge of any of the aforementioned languages previously, I had to learn each of
them before applying them.
The final apk of the module has been made using PhoneGap technology for easy
conversion and application of the web based app on to any Android / iOS device.
2.2.1 HTML5, CSS3 and Jquery Mobile
HTML5, CSS3 and Jquery Mobile are the designing languages of the web. Using
these three languages I have designed the front end of the app module. Jquery Mobile
has been specifically used over the normal Jquery methods, so that the look and feel, the
transitions and animations of the UI looks more mobile friendly than a normal webpage
on mobile would feel like. The three languages have helped developed a mobile friendly
module.
Normal JavaScript methods have been created by me for the purpose of
validation.
2.2.2 JSON
JSON has been used to fetch data from and send data to the database via an
intermediate Web Service. While retrieving the data from the database, the Web Service
returns JSON objects which are used by the module after appropriate conversions.
While sending the data, it is first parsed by JSON and then sent to the database
via the Web Service.
2.2.3 PhoneGap
PhoneGap is a software which easily converts and builds applications for mobile devices
using JavaScript, HTML5, and CSS3, instead of relying on platform-specific APIs like
those in iOS, Windows Phone, or Android. It enables wrapping up of HTML, CSS and
JavaScript code depending upon the platform of the device. It extends the features of
HTML and JavaScript to work with the device. This helped to convert my module into
device ready code or apk.

12
2.3 Design Processes
For the designing of the module I took the help of the existing Android App of
CESC. This helped me in designing the UI of the module. When the UI was done using
HTML5, CSS3 and Jquery Mobile, I started with the actual validation process. The code
for checking if the proper details have been entered was also done during this time.
Then the code to send data to the database was encoded as soon as the test database was
set up.
2.4 Testing
The module was tested using various sets of consumer number provided from the
main database maintained by CESC. It was first tested on the PC itself. It was then
converted into a standalone app (an apk was created). The app was tested using the test
database and live CESC database.
3. PROGRAM DESCRIPTION AND IMPLEMENTATION
The title of the module is Contact Details, as it clearly means details of each contact in a
database.
3.1 Design Description & Working
The UI was implemented by the help of Jquery Mobile so that it delivers a
mobile-like theme to the HTML document. Jquery Mobile has smooth, mobile friendly
transitions and animations. Using CSS the module has been made resizable and
responsive to different screen sizes, so that it retains its UI to a wide range of devices.
The module loads up from a login screen of the actual app. By providing either
the Consumer Number or the Customer ID of the user, the user can access the Contact
Details page. Here the name, address, contact number, email address, authentication
type and authentication values are retrieved from the database. The screen fills up
according to the data present in the database.
The user now has the option of updating his contact number and/or his email
address and/or his authentication type (choose among Passport, Voter ID, Driving
License, Aadhar Card) and value. He/She may not change any value as per his/her wish.
There is a disclaimer at the bottom of the page which must be accepted in order to view
the “Go” or submission button. On clicking this button the user updates his/her
information on to the database.

13
There are some checks before the user can submit his/her updates.
● Contact Number must be 10 digits, can only have numbers - no alphabets or
special characters - and the number must be proper - starting with ‘7’ or ‘8’ or ‘9’.
● Email address must be proper and should have the format
‘username@domain.extension’. Incase this format is not satisfied, the user is told
to verify his/her email address.
● Authentication Type must be a valid selection from - Passport, Voter ID, Driving
License and Aadhar Card. According to each type of card, a valid card number
must be entered.
● If both phone number and email fields are currently blank, then either the phone
number or the email address must be entered to be able to submit, both cannot
be kept blank at the same time.
● If either one (or both) of phone or email is filled, then it cannot be kept blank.
Either it has to be changed another proper phone number / email address or the
previous has to be kept.
● The authentication type and number has to be filled with proper values in all
cases to have access to the submission button.
The UI also has a few buttons:
● The information button, which opens the information tab.
● The back button which takes us back to the login screen.
● The home button which also takes us to the home / login screen (its for use in the
original app).
The app has a number of popups which inform the user of success or failure of
submissions and other important actions.
3.2 Interface & Screenshots
The following section will include some screenshots to give an example of the UI.
The app will work on Android, iOS and Windows based phones, provided they are first
compiled with PhoneGap and necessary certificates.

14
Figure 1: Splash Figure 2: Login Page
When a user open the app, the first thing they see is the splash screen with the CESC
logo on it. They are then greeted with the very simplistic login page that asks for their
Consumer Number. On submitting the required information, they are taken to the main
page. The login page is purposefully kept as such since the main module will be
incorporated into the actual app. This has been done just for testing.
Figure 3: Contact Information Page Figure 4: On Submission of Form

15
Figure 5: Successful Submission
The user finds all his currently registered details with CESC on the loaded onto the main
page. He can edit any information, or add blank fields. On accepting the Disclaimer, he
is allowed to “Go” for submission of his details. On submitting the form, the validation
checks are done, which on being deemed correct is sent to the database. Thereafter the
user gets to see the “Details Successfully Updated” message on the screen.
4. PROJECT SOURCE CODES
Main Page (including all the Javascript and CSS codes):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CESC APPS</title>
<link rel="stylesheet" href="JqueryMobile/css/jquery-ui.css">
<link rel="stylesheet" href="JqueryMobile/css/ui-lightness/jquery-ui-1.10.3.custom.css">
<link rel="stylesheet" href="cs/jquery.mobile-1.4.5.css">
<script src="JqueryMobile/js/jquery.js"></script>
<script src="js/jquery.mobile-1.4.5.js"></script>
<script src="JqueryMobile/js/jquery-ui-1.10.3.custom.js"></script>
<style type="text/css">
.align

16
{
margin: 0 auto;
width: 250px;
}
.newStyle1 {
background-image: url('1.JPG');
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-style: italic;
text-decoration: line-through;
font-size: 42px;
text-align: center;
}
.center_BTN {
margin: 1px;
text-align: center;
padding: 5px;
color: #FFFFFF;
border: solid 2px;
border-color: #FFFFFF;
border-radius: 8px !important;
text-shadow: none !important;
height: 45px;
vertical-align: middle;
line-height: normal;
}
.ui-select .ui-btn>span:not(.ui-li-count) {
white-space: normal !important;
}
.nav-glyphish-example .ui-btn { padding-top: 40px !important; }
.nav-glyphish-example .ui-btn:after { width: 30px!important; height: 30px!important; margin-left: -
15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow:
none!important; -webkit-border-radius: 0 !important; border-radius: 0 !important; }
#home:after { background: 50% 50% no-repeat; background-size: 24px 22px; }
#login:after { background: 50% 50% no-repeat; background-size: 24px 16px; }
#menu:after { background: 50% 50% no-repeat; background-size: 12px 26px; }
th {
border-bottom: 1px solid #036FDA;
}
tr {
border-bottom: 1px solid lightgray;
}
</style>

17
<script>
var gbl_page,ecnpg;
var i=0;
$(document).ready(function(){
var a = prompt("Enter Consumer Number:", "11189173017");
var url_cons_no = parseInt(a);
var url_cons_id = '00000000000';
/***************** THIS IS THE METHOD WHICH GETS DATA FROM WEBSERVICE
*********/
$.getJSON('http://www.cesc.co.in/cescapps/get_Cons_all_apps.jsp?cons='+url_cons_no+'&consid='+u
rl_cons_id+'&callback=?', function (data) {
showMsgFnl(JSON.stringify(data));
});
});
function go_to_index() {
document.getElementById('indx').submit();
}
function loginfunc() {
document.getElementById('login').submit();
}
var mmjson;
var startNo;
var startEmail;
var flagCheckBox = 0;
function showMsgFnl(data) {
var myjson=$.parseJSON(data);
mmjson = myjson;
/*** MADE GLOBAL TO ACCESS FROM ANYWHERE OF THE PAGE *********/
pageInitMinCharge();
}
/* MIN CHRG */
function pageInitMinCharge() {
document.getElementById('idnt_no').value="";
document.getElementById('emailid').value="";

18
document.getElementById('mob_no').value="";
document.getElementById('idnt_tp').selectedIndex = 3;
document.getElementById('idnt_tp').options[3].selected=true;
var el = $('#idnt_tp');
el.val('SEL').attr('selected', true).siblings('option').removeAttr('selected');
el.selectmenu("refresh", true);
makegoSpanInVisible();
document.getElementById('agreemin').checked=false;
$("#agreemin").unbind("click");
$("#agreemin").bind("click",function(event)
{ event.preventDefault();
document.getElementById("agreemin").checked=false;
});
getLtMinChrgNa_Mtr_div();
}
function makegoSpanVisible(){
document.getElementById('go_span').style.visibility='visible';
}
function makegoSpanInVisible() {
document.getElementById('go_span').style.visibility='hidden';
}
function makeDisclmrAgreementVisible(){
var obj1=document.getElementById("disclmr");
obj1.style.visibility='visible';
obj1=document.getElementById("agreement");
obj1=document.getElementById("agreemin");
document.getElementById('go_span').style.visibility='visible';
}
function makeDisclmrAgreementInvisible(){
var obj1=document.getElementById("disclmr");
obj1.style.visibility='hidden';
obj1=document.getElementById("agreement");
obj1=document.getElementById("agreemin");
}
function chkIdnt(obj) {

19
if(document.getElementById('h_source').value=='1'||document.getElementById('h_source').value=='2'){
if(obj==''){
msg = "Please Enter Proper Identification No.";
poplMsgDiv(msg);
return false;
}
else if(document.getElementById('idnt_tp').value=='AC') {
if(document.getElementById('idnt_no').value.length != 12) {
msg = "Please Enter 12-Digit Aadhaar No. Without Space. ";
poplMsgDiv(msg);
return false;
}
}
else if(document.getElementById('idnt_tp').value=='SEL'){
msg = "Invalid Identification type";
poplMsgDiv(msg);
return false;
}
else if(document.getElementById('idnt_tp').value=='DL'){
if(document.getElementById('idnt_no').value.length < 6) {
msg = "Please Enter Proper Driving Licence Number.";
poplMsgDiv(msg);
return false;
}
}
else if(document.getElementById('idnt_tp').value=='P') {
if(document.getElementById('idnt_no').value.length != 8) {
msg = "Please Enter 8 Character Passport Number. ";
poplMsgDiv(msg);
return false;
}
}
else if(document.getElementById('idnt_tp').value=='VID'){
if(document.getElementById('idnt_no').value.length < 6) {
msg = "Please Enter Proper Voter ID Number.";
poplMsgDiv(msg);
return false;
}
}
return true;
}
else
return true;
}
function padLString(paddingChar,stringToBepadded,widthOfPaddedString) {
if(parseInt(stringToBepadded.length,10)>=parseInt(widthOfPaddedString,10))
return stringToBepadded;

20
else {
var paddedString = "";
for(i=(parseInt(widthOfPaddedString,10)-parseInt(stringToBepadded.length,10)) ; i>=1 ; i--) {
paddedString = paddedString+paddingChar;
}
return (paddedString+stringToBepadded);
}
}
function validateEmail(email) {
var emailRegex = /^([w-]+(?:.[w-]+)*)@((?:[w-]+.)*w[w-]{0,66}).([a-z]{2,6}(?:.[a-
z]{2})?)$/i;
return emailRegex.test(email);
}
function checkNumber(number) {
for(var i=0;i<number.length;i++){
if(!(number.charAt(i)=='1' || number.charAt(i)=='2' || number.charAt(i)=='3' ||
number.charAt(i)=='4' || number.charAt(i)=='5' ||number.charAt(i)=='6' ||
number.charAt(i)=='7'||number.charAt(i)=='8'||number.charAt(i)=='9'||number.charAt(i)=='0')) {
msg = "Please Enter Numeric Value in Mobile No.";
poplMsgDiv(msg);
return false;
}
}
return true;
}
function checkMobileBeg(number) {
if(!(number.charAt(0)=='7'||number.charAt(0)=='8'||number.charAt(0)=='9')) {
msg = "Invalid Mobile No.";
poplMsgDiv(msg);
return false;
}
if((number.length < 10)) {
msg = "Please enter 10 digit Mobile No.";
poplMsgDiv(msg);
return false;
}
return true;
}
function chkBefSubmit() {
var msg = "";
var flag = 0;
var input = $(this).attr('id');
var contactNo = $('#mob_no').val();
var email = $('#emailid').val();

21
if(contactNo.length > 0 || email.length > 0) {
if((startNo.length > 0 && contactNo.length == 0)) {
msg= "Present Contact Number <b>CANNOT</b> be left blank!";
poplMsgDiv(msg);
$('#mob_no').val(startNo);
flag = 1;
}
if((startEmail.length > 0 && email.length == 0)) {
msg= "Present Email <b>CANNOT</b> be left blank!";
poplMsgDiv(msg);
$('#emailid').val(startEmail);
flag = 1;
}
if(contactNo.length > 0){
if(!checkNumber(contactNo)) {
msg= "Please Enter a Proper Mobile No";
poplMsgDiv(msg);
$('#mob_no').focus();
flag = 1;
}
if(!checkNumber(contactNo))
flag = 1;
else {
if(!checkMobileBeg(contactNo))
flag = 1;
}
}
if(email.length > 0 && !validateEmail(email)) {
msg= "Please Enter a Valid Email-Id";
poplMsgDiv(msg);
$('#emailid').focus();
flag = 1;
}
/** INCASE BOTH FIELDS ARE REQUIRED **/
/*if(contactNo.length == 0) {
msg= "Please enter Contact Number to proceed!";
flag = 1;
poplMsgDiv(msg);
}
if(email.length == 0) {
msg= "Please enter Email Address to proceed!";
flag = 1;
poplMsgDiv(msg);
}*/
}
else {
/** INCASE ONLY ONE FIELD IS REQUIRED **/
msg= "Please enter <b>EITHER</b> Contact Number or Email Address to proceed!";

22
/** INCASE BOTH FIELDS ARE REQUIRED **/
//msg= "Please enter <b>BOTH</b> Contact Number or Email Address to proceed!";
$('#mob_no').val(startNo);
$('#emailid').val(startEmail);
poplMsgDiv(msg);
flag = 1;
}
if(!chkIdnt($('#idnt_no').val())) {
flag = 1;
$('#idnt_no').focus();
}
if(flag == 0) { //Success
//console.log("Entered Confirm");
$('#Go').prop("disabled", true);
$('#agreemin').prop("disabled", true);
insertValues();
}
}
function openDialogBox3() {
var div_msg="<center>DISCLAIMER</center><br/>"+
"<p>"+
"It is clarified for information of all concerned that CESC Limited "+
"does not own up the authenticity of the declarations, "+
"statements, data furnished by the applicant herein "+
"and such onus lies entirely with the applicant. "+
"In the event it is found that such declaration/statement "+
"furnished by the applicant is incorrect / "+
"misrepresented the applicant shall be solely held responsible for all consequential "+
"action and CESC shall be entitled to take appropriate action "+
"in accordance with law without further reference. "+
"<p>"+
"I/We understand that for online application in place of my / our signature(s), "+
"as appearing in this form , my / our Unique Identification Numbers in "+
"Voter Identity/ Aadhaar Card/Driving License/Passport may be used. "+
"I/ We undertake that each of such Unique Identification Number "+
"is genuine and I/We indemnify and keep the Licensee "+
"indemnified against any claim etc. arising out of using such Unique "+
"Identification Numbers in place of respective signatures and or the "+
"statements made in the said form. "
var btn_div ="<a href="#date_div" id=ok_disc class='ui-btn ui-corner-all ui-shadow' data-
transition='slideup' style='color:#000000' onclick='attachEventToChkBox();'>OK</a>";
$( "#disc_popup" ).html('<p>'+div_msg+'</p><p>'+btn_div+'</p>');
$( "#disc_popup").popup("open");

23
flagCheckBox = 1;
}
function attachEventToChkBox(){
//alert("attachEventToChkBox");
$("#agreemin").unbind('click').click();
if(document.getElementById("agreemin").checked){
makegoSpanVisible();
}
else{
}
$("#agreemin").bind("click",function(event){
if(document.getElementById("agreemin").checked){
makegoSpanVisible();
}
else{
}
});
}
var mtrid = new Array();
var startdatearray = new Array();
var todatearray = new Array();
var k=0;
function getLtMinChrgNa_Mtr_div(){
setLtMinChrgNa_div();
$.getJSON('https://www.cesc.co.in/cescapps/get_data_by_param_1.jsp?param=minChrginput/'+mmjs
on.consnum+'/'+(mmjson.custid).substring(0,10) + '/QDD&callback=?', function(data) {
var cur_date =data.date;
($("#today_dt").val(cur_date))
$.mobile.loading( 'hide' );
});
}
function setLtMinChrgNa_div() {
var str1= '<table width="100%"><tr><td style="font-family: Verdana; font-size: 15px;">'+
'<strong><i>CONSUMER NUMBER:</i></strong>
'+mmjson.consnum+''+mmjson.chk_dgt+'<br/>'+'<strong><i>CUSTOMER ID: </i></strong>' +
mmjson.custid +'<br/><br/>' + '<strong><i>EXISTING NAME & ADDRESS:</i></strong><br>'+
$.trim(mmjson.consname)+'<br/><address>'+ $.trim(mmjson.addr1)+ '<br/>'+
$.trim(mmjson.addr2)+ '<br/>'+ $.trim(mmjson.addr3)+ '</address></strong>'+'</tr></td></table>';
$("#ltminchrg_na_dv" ).html(str1);
$("#emailid").val(mmjson.mail_id);

24
if(mmjson.mob_no == '#') {
$('#mob_no').val('');
startNo = '';
}
else {
$('#mob_no').val(mmjson.mob_no);
startNo = mmjson.mob_no;
}
if(mmjson.mail_id == '#') {
$('#emailid').val('');
startEmail = "";
}
else {
$('#emailid').val(mmjson.mail_id);
startEmail = mmjson.mail_id;
}
}
function insertValues() {
var param="";
var cust_id=padLString('0',mmjson.custid,'11');
var emailid = document.getElementById("emailid").value;
var mobile = document.getElementById("mob_no").value;
var auth_type= document.getElementById("idnt_tp").value;
var auth_val = document.getElementById("idnt_no").value;
//poplMsgDiv("Please refresh the page if this message is being displayed for a long time.");
$.mobile.loading( 'show', {
text: 'Please refresh the page if this message is being displayed for a long time.',
textVisible: true,
theme: 'b'
});
param = cust_id+"/"+emailid+"/"+mobile+"/"+auth_type+"/"+auth_val;
var url =
'http://10.50.82.60:8080/WebCESCservice/get_page_prm.jsp?cons=testEMinsert/'+param+'&callback
=?';
var finalJson = $.getJSON(url, function (data) {
if(data['success'] == 1) {
$.mobile.loading( 'hide');
poplMsgDiv("Details Successfully Updated!");
}
else
poplMsgDiv("Update Failed! Please try again later!");
$('#Go').prop("disabled", false);

25
$('#agreemin').prop("disabled", false);
})
.error(function() {
})
.fail(function() {
});
}
function poplMsgDiv(message){
var div_msg=message;
transition='slideup' style='background-color:#000000; color:#ffffff; font-family: Arial Bold;'
onclick='document.getElementById("agreetxt").style.visibility="visible";document.getElementById(
"agreemin").style.visibility="visible";'>OK</a>";
$( "#msg_div" ).html('<p style="font-family:Arial
Bold;">'+div_msg+'</p><br><p>'+btn_div+'</p>');
$( "#msg_div").popup("open");
}
function openDialogBox2() {
var div_msg = "Are you sure you want to proceed ? n - please press Cancel to close this dialog box
n - please click on Ok to proceed.";
transition='slideup' style='color:#000000' onclick='insertValues();'>OK</a><a href="#date_div"
id=cancel_disc class='ui-btn ui-corner-all ui-shadow' data-transition='slideup' style='color:#000000'
onclick=''>CANCEL</a>";
$( "#disc_popup" ).html('<p>'+div_msg+'</p><p>'+btn_div+'</p>');
$( "#disc_popup" ).popup( "open" );
}
function openDialogBox1(mrk) {
if(mrk=='1'){
$( "#dialog" ).html('Thank you, information successfully accepted.');
}else{
$( "#dialog" ).html('Information not Accepted. Please try again later');
}
$( "#dialog" ).dialog( "open" );

26
}
function isNumber(str){
var flag = 0;
if(isNull(str)==true) {
var pat="0123456789";
var i=0;
do{
flag = 0;
for(var j=0;j<pat.length;j++){
if(str.charAt(i)==pat.charAt(j)){
flag = 1;
break;
}
flag = 0;
}
i++;
}while(flag==1 && i<str.length)
if (flag == 1)
return true;
else
return false;
}
return false;
}
function tryAgreemin() {
if(flagCheckBox == 0)
poplMsgDiv("Please read the Disclaimer before accepting it.");
}
</script>
</head>
<body>
<form id="frst" method="post" action="login.html" target="_self" ></form>

<div>
<div>
<br>
<center>
<div style="width:80%;">
<center>
<table style="width: 100%">
<tr>

27
<td align="center" >
<div id="x1"></div>
</td>
</tr>
</table>
</center>
</div>
</center>
<div id="sho"></div>
</div> 
<div data-role="footer" data-position="fixed" data-fullscreen="true" data-id="ftr" style="text-
align:center;background-color:#2D2D2D; ">
<div data-role="controlgroup" data-type="horizontal" data-mini="true">
<a href="javascript:go_to_index();" data-role="button" class="ui-shadow " data-icon="home" data-
iconpos="notext" >HOME</a>
<a href="javascript:loginfunc();" data-role="button" data-icon="user" data-iconpos="notext" data-
theme="d" data-mini="true" >LOGIN</a>
</div>
</div>
</div> 


<div data-role="page" id="ltminchrg_div" class="allback" style="background-color: #1F5B91;">
<div data-role="panel" id="overlayPanelminput" data-display="overlay" style="background-image:
url('images/backimage3.jpg');color:#FFFFFF;text-shadow:0 0 0;">
<br><br>
<p>You can view the currently stored information as provided, which includes Customer Name,
Address, Contact Number, Email Address and Identification Type and Number. You can edit the Contact
Number, Email Address and Identification Type and Number. However, the current one cannot be kept
blank. You can only change it. If neither contact no. or email address is provided, please make sure atleast
one of them is entered for the information to be submitted.<br><br>When all the details have been filled
in proper manner, please read the disclaimer and accept it to access the submit button.</p>
</div>
<div data-role="header" data-position="fixed">
<table width="100%" border="0">
<tr>
<td align="left"><img src="rp-sglogo.png" style="width: 50%;"/></td>
<td align="center" style="font-size: 3vw; font-family: Verdana; ">CONTACT DETAILS</td>
<td align="right"><img src="logo-cesc.png" style="width: 50%;"/>
</tr>
</table>
</div>
<br>
<center>

28
<table cellspacing="1" style="width: 95%; background-color: #0889CD; padding:2%; border-radius:
5px; text-align: left; font-family: Arial; box-shadow: 0px 0px 25px black; ">
<tr>
<td align="center">
<div >
<div style="width: 95%; height: 100%; background-color: #ffffff; padding:3%; border-radius:
5px; text-align: left; font-family: Arial; box-shadow: 0px 0px 25px black;">
<input type="hidden" name="h_mtr_div" id="h_mtr_div" value="0" />
<input type="hidden" name="h_mtr_csq" id="h_mtr_csq" value="" />
<input type="hidden" name="h_source" id="h_source" value="2" />
<input type="hidden" name="h_rgn_cd" id="h_rgn_cd" value="" />
<input type="hidden" name="h_ins_tab_mkr" id="h_ins_tab_mkr" value="0" />
<input type="hidden" id = "today_dt" name="today_dt" value="" />
<div data-role="popup" id="disc_popup" data-transition="flip" style="background-color:
#000000; color: #FFFFFF">
<p></p>
</div>
<div data-role="popup" id="disc_popup1" data-transition="flip" style="background-color:
#000000; color: #FFFFFF">
<p></p>
</div>
<div id="ltminchrg_na_dv"></div>
<div id="ltminchrg_dv"></div>
<div id="na_div"></div>
<div >  </div>
<div style="visibility:hidden;font-color:red" id="msg_div1"> </div>
<div id="meter_div" ></div>
<div data-role="popup" data-transition="slideup" style="font-color:red; border-style: solid;
border-color: #000000; border-width: 5px" id="msg_div"><p></p></div>
<div style="visibility:visible;display: inline-block; width: 100%" id="date_div">
<table style="width: 100%;">
<tbody>
<tr>
<td style="width=95%;" colspan="3">
<p style="text-align: left; font-family: Verdana; font-size:15px">
<strong><i>CONTACT NUMBER <span class="starfld">*</span>
:</i></strong>
</p>
<div>
<input id="mob_no" type="tel" maxlength="10" placeholder="Please Enter Your
Contact No.">
</div>
</td>
</tr>
</tbody>
</table>

29
<table style="width: 100%">
<tbody>
<tr>
<td style="width=95%;" colspan="3">
<p style="text-align: left; font-family: Verdana; font-size:15px">
<strong><i>EMAIL ADDRESS <span class="starfld">*</span> :</i></strong>
</p>
<div id="email">
<input id="emailid" type="email" placeholder="Please Enter Your Email
Address">
</div>
</td>
</tr>
</tbody>
</table>
<br>
<span id="idnttp" style="font-family: Verdana; font-size: 15px;">
<strong><i>IDENTIFICATION TYPE <span class="starfld">* :</span></i></strong>
 </span>
<select id="idnt_tp" data-native-menu="false" data-theme="b" style="" mandatory="true"
tabindex="6"
onchange="if(this.value=='SEL'){
// alert('Invalid Identification type');
poplMsgDiv('Invalid Identification type');
// document.getElementById('idnt_tp').focus();
}
">
<option value="SEL">Select</option>
<option value="P">Passport</option>
<option value="VID">Voter Identity Card</option>
<option value="DL">Driving License</option>
<option value="AC">Aadhaar Card</option>
</select>
<span id="idntno">
<p style="font-family: Verdana; font-size: 15px;">
<strong><i>IDENTIFICATION NUMBER <span class="starfld">*
:</span></i></strong>
</p>
<input type="text" id="idnt_no" value="" size="30" maxlength="30" style="font-
size:12px; font-family:Arial, Helvetica, sans-serif;" />
</span>
<div id="dialog_disclmr" class="span12" title="Disclaimer"></div>
<font face="Tahoma" color="red" size="2">
<a href="#" id="disclmr" style="color:red; visibility:visible;" onClick="openDialogBox3();">
<strong>By clicking here</strong> view the disclaimer and tick on the 'I Accept' for
confirmation
</a>

30
</font>
<table width="100%">
<tr>
<td width="30%" align="left"><span id="agreetxt">
<p style="font-family: Verdana; font-size: 15px; margin: 0 auto;"><b>I
ACCEPT</b></p></span>
</center></td>
<td width="30%">
<center><span id="agreement">
<input type="checkbox" id="agreemin" onclick="tryAgreemin()"/>
</span></center>
</td>
<td width="40%" align="left">
<span id="go_span" style="visibility:hidden;">
<button class="style3" id="Go" onClick="chkBefSubmit();">
Go
</button>
</span>
</td>
</tr>
</table>
</div>
</div>
</div>
</td>
</tr>
</table>
</center>
<br>
<br>
<br>
<br>
<br>
<br><br><br><br>
<div data-role="footer" data-position="fixed" data-fullscreen="true" data-id="ftr" style="text-
align:center;background-color:#2D2D2D; ">
<div data-role="controlgroup" data-type="horizontal" data-mini="true">
<a href="#overlayPanelminput" data-role="button" data-icon="info" data-
iconpos="notext">Trivia</a>
<a href="javascript:go_to_index();" data-role="button" class="ui-shadow " data-icon="home"
data-iconpos="notext" >HOME</a>
<a href="javascript:location.reload();" data-role="button" data-icon="refresh" data-
iconpos="notext" data-theme="d" data-mini="true" >LOGIN</a>
<a href="#menupageone" data-direction="reverse" data-transition="slide" data-role="button" data-
icon="back" data-iconpos="notext" data-theme="d" data-mini="true" >OPTIONS</a>
</div>
</div>
</div>

31

<form data-ajax="false" action="index.html" method="post" id="indx" name="indx" >
</form>
<form data-ajax="false" action="login.html" method="post" id="login" name="login" >
</form>
</body>
</html>
5. CONCLUSION
5.1 What Has Been Done
I successfully implemented the app according to the above mentioned
specifications. The user can successfully login to view and edit his details. Also details
provided by the user are validated so that wrong information is not stored by mistake.
The final submission is successfully storing the data in the database. All these features
have been implemented within the duration of my internship.
5.2 What I Have Learnt
When I started the internship, I did not have much knowledge in HTML5, CSS3,
Jquery Mobile and JSON. As such I did not know about hybrid apps for Android.
Throughout the duration of my internship, I got to learn and apply all of these
techniques to successfully build the hybrid app. I also got to know how PhoneGap is
used to easily and efficiently compile and build an app for different platforms.
5.4 What I Would Do Differently In Future
In future I would like to explore more about hybrid apps and how they can be
linked with native Android, iOS, Windows apps so as to form an even smoother and
better app having good UI and backend features and able to cater to a large audience.

32
BIBLIOGRAPHY
BOOKS:
1. Head First HTML and CSS, By Elisabeth Robson & Eric Freeman, O'REILLY
Publications.
2. Head First HTML and CSS, By Michael Morrison, O'REILLY Publications.
3. Dynamic Apache with Ajax and JSON, by Tracey Steve Brown, O'REILLY
Publications.
WEBSITES:
1. www.stackoverflow.com
2. www.w3schools.com
3. www.codeacadem.com
4. demos.jquerymobile.com
5. www.tutorialspoint.com
6. api.jquery.com

Contact Info Maintenance for CESC Customers

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to Contact Info Maintenance for CESC Customers

Similar to Contact Info Maintenance for CESC Customers (20)

Contact Info Maintenance for CESC Customers