PROFESSIONAL TRAINING REPORT

at
Sathyabama Institute of Science and Technology

Submitted in partial fulfillment of the requirements for the award of

Bachelor of Engineering Degree in

Computer Science and Engineering

By

B.UMA SATYA YUVAN (Reg. No. 36110123)

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

SCHOOL OF COMPUTING
SATHYABAMA INSTITUTE OF SCIENCE AND TECHNOLOGY
JEPPIAAR NAGAR, RAJIV GANDHI SALAI,
CHENNAI – 600119 TAMILNADU.

JULY 2018
 SATHYABAMA INSTITUTE OF SCIENCE AND TECHNOLOGY

(Established under Section 3 of UGC Act, 1956)

Jeppiaar Nagar, Rajiv Gandhi Salai, Chennai - 600119
www.sathyabama.ac.in

___________________________________________________________________

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

BONAFIDE CERTIFICATE

This is to certify that this Professional Training Report is the bonafide work of B.UMA
SATYA YUVAN (Reg. No. 36110123) who underwent the professional training in “WEB
DEVELOPMENT” under our supervision from May 2018 to June 2018.

Internal Guide
Dr. A. PRAVIN, M.E.,(Ph.D.),

Head of the Department

Dr. S. VIGNESHWARI, M.E.,(Ph.D.),

Submitted for Viva voce Examination

held on_____________________

Internal Examiner External Examiner

 DECLARATION

I, B.UMA SATYA YUVAN (Reg. No. 36110123) hereby declare that the Professional
Training Report on “WEB DEVELOPMENT” done by me under the guidance of Dr.
A. PRAVIN, M.E., (Ph.D.), at Sathyabama has submitted in partial fulfillment of the
requirements for the award of Bachelor of Engineering degree in Computer Science
and Engineering.

DATE:
PLACE: SIGNATURE OF THE CANDIDATE
 ACKNOWLEDGEMENT

I am pleased to acknowledge my sincere thanks to Board of Management of

SATHYBAMA for their kind encouragement in doing this project and for completing
it successfully.I am grateful to them.

I convey my thanks to Dr.M.Lakshmi,(M.E.,Ph.D) Dean,school of computing and

Dr.S.Vigneswari,(M.E.,PHD)Head of the Department, Dept. of Computer
Science for providing me necessary support and details at the time during the
progressive reviews.

I would like to express my sincere and deep sense of gratitude to my Project Guide
Dr.A.Pravin (M.E.,Ph.D) for his valuable guidance, suggestions and constant
encouragement paved way to the successful completion of my project work.

I wish to express my thanks to all Teaching and Non-Teaching staff members of the
Department of Computer Science who were helpful in many ways for the completion
of the project.
TRAINING CERTIFICATE
TRAINING CERTIFICATE
 ABSTRACT

Web development is the coding or programming that enables website functionality,

per the owner's requirements. It mainly deals with the non-design aspect of building
websites, which includes coding and writing markup.

Web Application Frameworks are sets of program libraries, components and tools
organized in an architecture system allowing developers to build and maintain
complex web application projects using a fast and efficient approach.

Web Application Frameworks are designed to streamline programming and

promote code reuse by setting forth folder organization and structure,
documentation, guidelines and libraries (reusable codes for common functions and
classes).

As the world is progressing faster things have to be automated and satisfy

user requirements bank loan calculator is one such application which the
automates the work and helps to calculate of the loan amount in a
automated manner

The prime objective of “Bank Loan Calculator” is to create a full-fledged basic

application which could calculate loan amount .The user can calculate the loan amount
and store the amount in the database.
 TABLE OF CONTENTS

CHAPTER NO. TITLE PAGE No

ABSTRACT
LIST OF FIGURES
LIST OF TABLES
LIST OF ABBREVATIONS

1. INTRODUCTION 1

1.1 Outline of the project 1

1.2 Literature review 2

2. AIM AND SCOPE OF THE PRESENT 3

INVESTIGATION

2.1 Problem Statement 3

2.2 Aim 3

2.3 Scope 4

3. EXPERIMENTAL OR MATERIALS AND METHODS;

ALGORITHMS USED 7

3.1 Algorithm 7

3.2 Flowchart 8

3.3 System implementation 8

3.4 Overview of the platform 8

4. RESULTS AND DISCUSSSION,PERFORMANCE

ANALYSIS 9

4.1 Results and Discussions 9

4.2 Performance Analysis 9

5. SUMMARY AND CONCLUSIONS 10

REFERENCES 12
CHAPTER NO. TITLE PAGE No

5. APPENDIX 14

A.SCREENSHOTS 14

B.SOURCE CODE 18
 LIST OF FIGURES
FIGURENO. FIGURENAME PAGE NO.

5.1 XAMPP SERVER

5.2 LOGIN AUTHENTICATION
5.3 DATABASE QUERIES
5.4 PHP MY ADMIN
5.5 CREATION OF DATABASE
5.6 CREATION OF TABLE
5.7 USER INTERFACE
5.8 DATABASE STORAGE
5.9 PRINTING DATA FROM DATABASE
 LIST OF ABBREVATIONS

ABBREVATION EXPANSION

Css Cascading Style Sheets

HTML Hypertext Markup Language

Js JavaScript

Php Hypertext Preprocessor

 CHAPTER 1
INTRODUCTION

The idea of the internet had existed in some form for at least a half a century
before it finally became a common household utility in the 1990s. Conceived
in the 1980s, the World Wide Web gained significant traction with the
introduction of the Mosaic browser in 1993. Shortly thereafter, businesses began
recognizing the web‟s commercial potential, as network infrastructure grew to
accommodate what would prove to be a massive influx of online activity. Then
the tech bubble grew and burst, the survivors of which (Google, Amazon and
the like) went from being key tech influencers to veritable corporate giants
within about a decade.

Then the tech bubble grew and burst, the survivors of which (Google, Amazon
and the like) went from being key tech influencers to veritable corporate
giants within about a decade.

1.1 OUTLINE OF THE PROJECT

The main goal of this project is to develop an and Bank loan calculation
system. The system will consist of several basic elements:
• User interface for Users
• Main database for Storing data

There are many applications are made on Web development, that might be
any type of application based on the user attractions. In this project, the application
which provides us the options to calculate the loan amount. There are enormous
Web applications made by the developer in each single day, which should give the
user satisfaction to users and clients.

1
1.2 LITERATUE REVIEW

The objective behind making this application was to bring the functionalities of a
Banking Application onto Web. So, while surveying as to on which platform or rather
operating system the project has to be implemented, I selected web for the
following reasons:
• Web is able to reach out all devices.
• Maintenance is easier.
• Development is easier.
• Takes less time to develop applications.

The average user hardly thinks of the technologies used in developing websites
and several online services that they access and use. These are basically
applications residing on remote servers that are accessed by users from their PCs
through the web. They are much more than regular web pages! These programs can
be run inside various web browsers without any hassle.

The BANK loan Calculator System is a Web Application used for calculating the
amount of loan using cross any Platform.

It‟s hard to imagine there was once a time when all banking was conducted at
actual brick-and-mortar financial institutions. Even the simple task of calculating a
the loan amount it requires a critical calculation. Today, you can calculate your
loan amount right from your Browser.

An increasing number of consumers are now taking personal loans for their
purchases, especially the big-ticket ones. They are also converting their purchases
into EMIS.

It can be used for any personal financial need and the bank will not monitor its
use. It can be utilized for renovating your home, marriage-related expenses, a family
vacation, your child's education, purchasing latest electronic gadgets or home
appliances, meeting unexpected medical expenses or any other emergencies.

2
 CHAPTER 2
AIM AND SCOPE OF THE PRESENT INVESTIGATION
2.1 PROBLEM STATEMENT

To develop such type of application which is able to reduce the mental power
and save time while calculating loan amount, to overcome with that we are using
application that can increase the efficiency and decreasing the loads.

The project provides us the information about the details of the person and
Loan amount, which must provide the flexibility of generating output on the
web browser as well as on applications.

2.2 AIM
The aim of the project is to make a bank loan calculation system which is
used to calculate the loan amount of the customer in the bank with fully
authentication system and it helps to automate the work of the banking system and
makes people free from mental calculation.

Due to this idea of loan calculation it becomes much easier to and

simple to calculate the loan .It can be used even by the illiterates also for
calculating the bank loan amount from the website itself and no need to run
behind the other
People.

My only aim is to solve the problems of local people by using the

software oriented approach.

2.3 SCOPE
To develop such a computerization system is to reduce the calculation based
work and saving of time while calculating the loan amount of customers in the

3
bank, to overcome with that we are using application that can increase the
efficiency and decreasing the loads.

To exploit the functionalities of a web application by making all features

available in 1 „website‟ thus taking Web development a step higher. Requirement
and sample opportunity, behind this project renders it necessary for a system of this
kind to be developed.This hopes to breathe new life into the way of „Web
Development‟ relate to customers.

Technology is ever evolving.As a result,Web designs based on these

technologies would also need to be redefined with every evolutionary phase.
Web designers always be in demand in this world.

Nowadays Flipkart and Twitter had recently shifted their android app version to web
apps which shows the demand for web development and the customers also felt
comfortable while using the web apps of flipkart and twitter.
The shares of flipkart and twitter had increased upto 80% in the past year due to the
web apps.

It is estimated that by the year 2026 the demand for Web developers across to
increase by 15% this is a very good news to all the web developers across the world.

Due to heavily increased complexity in life there is no time for anyone to take
interest in sanctioning the loan or at least calculate the amount of loan for
common people and the illiterate and uneducated people in our country.So my
application lets people calculate the amount of loan with the help of simple
formula.It saves time and avoids complexity in the common people who are illiterates
and poor.By implementing this project in web I gained good experience in web
development .

4
 CHAPTER 3

EXPERIMENTAL OR MATERIALS AND METHODS;

ALGORITHMS USED

3.1 ALGORITHM

Step 1: Open XAMPP control Panel.

Step 2: Click on the start buttons of APACHE AND MYSQL.
Step 3: Open the Browser and type localhost/filename.php.
Step 4: After that the front end of the application opens.
Step 5: Type all the Parameters necessary and click on the submit button.
Step 6: After clicking the submit button then the loan amount is calculated and
Stored in the database.
Step 7: If you want to modify the database then type localhost/ phpmyadmin
In the url of the browser.
Step 8: Stop the program if you want to continue start again.

The history of web application development is quite complicated. There are many
technologies (Flash, Java, Silverlight, etc.) that make the work in the Internet as easy
as possible. One can listen to audio, watch videos and draw on the screen with the
help of the simple click of a mouse. The interactivity of the Web has become
enormous and it will be even more effective and varied in future

This pattern is used to structure distributed systems with decoupled components.

These components can interact with each other by remote service invocations. A
broker component is responsible for the coordination of communication among
components.

Servers publish their capabilities (services and characteristics) to a broker.

Clients request a service from the broker, and the broker then redirects the client to
a suitable service from its registry.

5
3.2 FLOW CHART

Flow chart is a diagrammatic representation of an algorithm and essential part of

planning the system. Flow charts are widely used in technical analysis and
programming for easy writing programs and explaining them to others. So, one of
the most popular type of flow charts is Technical Flow Chart. Technical Flow Chart
can be drawn by pencil on the paper, but it will be easier to use for designing a
special software

6
 A Flowchart is a graphical representation of process, algorithm, workflow or
step-by-step solution of the problem. It shows the steps as boxes of various kinds
and connects them by arrows in a defined order depicting a flow. There are twelve
main Flowchart types: Basic Flowchart, Business Process Modeling Diagram
(BPMN), Cross Functional Flowchart, Data Flow Diagram (DFD), IDEF (Integrated
Definition) Flowchart, Event-driven Process Chain (EPC) Diagram, Influence
Diagram (ID), Swim lane Flowchart, Process Flow Diagram (PFD), Specification and
Description Language (SDL) Diagram, Value Stream Mapping, Workflow Diagram.
Using the Flowcharts solution from the What is a Diagram area of Concept Draw
Solution Park you can easy and quickly design a Flowchart of any of these types.
This solution offers
a lot of special predesigned vector symbols for each of these widely used notations.
They will make the drawing process of Flowcharts much easier than ever.
The main reason of using Process Flowchart or PFD is to show relations
between major parts of the system. Process Flowcharts for single unit or multiple
units differ in their structure and implementations.

This flowchart Mechanism gives us the clear understanding the application and
helps the users to understand the application in a better way. So by using this
flowchart users can have a clear picture of the application and how the application is
working and it„s functionalities to be used and utilized in a better way. It also depicts
the relations between one state to another state.

3.3 SYSTEM IMPLEMENTATION

In computing, cross-platform software (also multi-platform software or platform-

independent software) is computer software that is implemented on multiple
computing platforms. Cross-platform software may be divided into two types.One
requires individual building or compilation for each platform that it supports, and the
other one can be directly run on any platform without special preparation, e.g.,
software written in an interpreted language or pre-compiled portable byte code for

which the interpreters or run-time packages are common or standard components of

all platforms.

7
A website is the storefront of your business, which people can see while roaming
on the internet. In the digital era, having a website is one of the most important steps
one can take in establishing and promoting their online presence. Often a website is
the first point of contact of your business for many potential customers. Thus, it is
quite vital for a business to have a website with an impressive web-design, user-
friendly interface and informative layout which apprises customers about what you
do in a concise way.

3.3 OVERVIEW OF THE PLATFORM

XAMPP is a free and open source cross-platform Web Server Package developed
by Apache Consisting of HTTP Server, Maria DB database, and Interpreters for
running Scripts like PHP and Perl Programming Languages.
XAMPP is a cross-platform, which means it works equally well on Linux, Mac and
Windows. Since most of the actual web server deployments use the same
components of XAMPP, it makes transitioning from a local test server extremely
easy as well.

In order to avoid adding entries to registry XAMPP doesn‟t need to run on user
computer. It offers batch files to start and stop the server and database engine.
This means you can even take XAMPP on your USB drive and run the server. There
is no need for admin rights & also have advantage of portability.

There is another platform which I had used for coding purpose which is an open
source software it is known as Sublime text editor

I used Sublime text Editor for the following Purposes:

1. Auto-Completion in Sublime Text

2. Jump the cursor wherever you want

3. Select Multiple Lines, Words and Columns

8
3.4 MODUALR DESIGN

To design a Web application, it goes through the several phases.

3.4.1 Graphical user interfaces (GUIs)

The user Interface that the software provides to the user is interactive. It provides
two different forms,One for list of systems and other for actual text typing.

Step 1: Select File -> New -> Project -> Web.php. Fill the form and click "Submit"
button.
•
Step 2: Open New -> Project -> style.css.
Step 3: Style the css file.
Step 4: Adjust the background settings.
Step 5: Code the
Step 6: Open New -> Project ->j.js

3.4.2 Programming Interfaces

The programming Interface which provides the access of the code.

Step 1: Open File-> Project-> cal.php and add following code.

Step 2: Create variables and Connect to the database.
Step 3: Create to the database With Sql using Php my admin.
Step 4: Add tables and columns to the database.
Step 5: Choose the type of data for the columns.
Step 6: Connect the table with Php code.
Step 7: Post the data from Html to Php.
Step 8: Use the formula to calculate the loan amount.
Step 9: Insert the data into the database.
Step 10: Enter the valid amount in the parameters for Authenticated login.
Step 11: Click on the submit button.

9
 CHAPTER 4
RESULTS AND DISCUSSION, PERFORMANCE ANALYSIS

4.1 RESULTS AND DISCUSSION

This project highlights the results of the Application and the snapshots for
each of the activities are shown along with the discussion of each activity describing
it‟s working. Each snapshot describes every single step of Bank Loan Calculator
application. Three main activities as well the options provided to the users in each
activity such as Front end, Back end and Styling, these activities which are created
on the click of these options are shown and described.
This Application has successfully completed various types of test cases which were
applied to this.
This project has impressed with it‟s amazing User interference and the design
It could easily be able to calculate the loan amount within short span of time.
Code was neither too complex nor to simple and it was neat and clean with well
indentation and with proper styling.

4.2 PERFORMANCE ANALYSIS

This application could even perform better if given more time duration to do and it
can also be further improved for the sake of online banking system which adds new
features and functionalities to this banking application.

I want to improve my project for future with the added features like uploading the
documents required for the bank loan application, choosing the type of bank loan
The customers require and Eligibility criteria for the bank loan by checking their cibil
score.
With the added features and security my application could perform better in any
condition. I would likely to add all the above features and also 3 step verification
process and Authentication system with finger print and Biometric scan.

10
 CHAPTER 5
SUMMARY AND CONCLUSIONS

5.1 SUMMARY

Due to this application of bank loan system people could calculate the amount of
loan they have taken using simple terminologies and which is in reach of their
mobiles.

As this is a web application people can use it across any platform like
linux, unix, ios, android and any other hybrid devices.

Other features like Authentication system and transparent background color had
added beauty to this application.

Education without implementation is waste so whatever you learn make an

application oriented design to make your knowledge valuable.

My application exactly did the same thing it could satisfy the user requirements of
illiterates and made them know exactly what is the actual amount they have to
pay for the private or government loan organizations.

My application is simple to use and reduces the mental stress involved in calculation
of the bank loan amount .

Xampp has been really helpful and efficient to use while I was doing my project
because it has added features of php, filezilla and apache all together at one
place.

11
5.2 CONCLUSIONS

So the spark and idea behind this project has been started in my mind all the way in
homewhen my parents are calculating the loan amount.

I am really thankful for the almighty giving me understanding parents who had
helped me in the mathematics calculation part of my application.

In my opinion my project is the best because it is simple and easy to use across any
device. Good to see my application in my mind had come into reality with the help of
coding in a lot more creative way.

I would like to judge my project on the basis of its User experience and the
responsive design. I agree that there some the faults in my application because of
the security issues regarding sql injection and cross-site scripting. But I am sure in
future I would develop my application and make it free from all kinds of security
issues.

Due to this security issues my application can become vulnerable to all kinds of
malicious applications and the hackers across the internet which can cause serious
issues in the security [2].
I would like to propose a solution regarding these vulnerabilities in security of the
application by using following methods to prevent sql injection they are:
• Use of prepaid statements in queries.
• replacing special characters such as ( “”, “%”, “\”, “_” ”#”).
• Stored procedures being used up in database.

I had successfully implemented this project using web development and finally
made a successful ending for my application because the functionalities and
application development standards in the web made this efficient and faster to
Validate the different kinds of input.

12
 REFERENCES

[1] https://developer.mozilla.org/en-US/

[2] https://css-tricks.com/

[3] https://www.mysql.com/

[4] http://www.php.net/

[5] https://medium.com/

[6] https://www.html5rocks.com/en/

[7] https://www.edx.org/course/html5-and-css-fundamentals

[8] https://www.codingdojo.com/blog/best-free-web-

[9] http://alistapart.com/

[10] http://htmldog.com/references/html/tags/

13
APPENDIX

A.SCREENSHOTS

Fig.5.1. XAMPP SERVER

Xampp control panel is a tool which contains Apache, MySQL, Mercury and Tomcat
With the help of this tool we run our application on the web.

14
 Fig.5.2. LOGIN AUTHENTICATION

The user should enter the valid details in the application or else the user is not
permitted to calculate the loan amount.

15
 Fig.5.3. Database Queries

Queries are the commands applied on the database for the Create, Read,
Update and Delete the data from the database

16
 Fig.5.4 PhpMyAdmin

PHPMyAdmin is the platform where we create the database and the corresponding
tables.

17
 Fig. 5.5 Creation of DATABASE

We create the database by using phpmyadmin and name the database using
Create button

18
 Fig. 5.6 Creation of table

We create a table within the Database and choose the number of columns for the
table.

19
 Fig. 5.7 User Interface

It is the front end interface of the application which is visible to the clients.

20
 Fig. 5.8 Database Storage

The Details which are entered in the frontend are stored at the backend of the
application using Database.

21
 Fig. 5.9 Printing Data from Database

Retrieving the Data from the Database and printing on the screen.

22
B. SOURCE CODE

FRONT END

<!DOCTYPE html>
<html>
<head>
<title>bank</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="j.js"></script>
</head>
<body>
<div id="container">
<h1>BANK LOAN CALCULATOR</h1>
<div id="o">
<form action="cal.php"method="POST">
Name:<br><input type="text" name="name" required placeholder="name"
class="ri"><br>
Interest:<br><input type="float,number" name="interest"
required placeholder="interest" class="ri"><br>
Amount:<br><input type="number" name="amount" required
placeholder="amount" class="ri"><br>
Months:<br><input type="number" name="months" required
placeholder="months" class="ri"><br>
<br>
<input type="submit" value="submit" class="vel" name="submit">
</form>
</div>
</div>
</body>
</html>
23
STYLING
body{
background-image:url('lock.jpg');
background-size: cover;
}

.button-success{
color: white;
border-radius: 4px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
#i{
border-radius: 5px;
}
#on{
border-radius: 5px;
}
#t{
border-radius: 5px;
}
#h{
border-radius: 5px;
}
#container{
text-align:center;
margin-bottom:200px;
height:400px;
margin-top:200px;
margin-right: 200px;
margin-left:200px;
}
24
vel:hover{
color:green;
}
.vel:active{
color:yellow;
}
#o{
background: rgba(0, 0, 0,0.5);
top:50%;
left:50%;
box-sizing:border-box;
padding:70px 30px;
width:420px;
height:420px;
text-align: center;
color:#fff;
margin:0 auto;

}
.ri{
color:#fff;
background:transparent;
border-bottom:1px solid #fff;
font-size:15px;
}
h1{
color:#37EF50;
text-shadow: 2px 2px #ff0000;
}
*{
box-sizing: border-box;

25
BACKEND
<?php
$servername="localhost";
$username="root";
$password="";
$dbname="ram";
$conn=new mysqli($servername,$username,$password,$dbname);
if($conn->connect_error)
{
die("Connection failed".$conn->connect_error);}
else{
echo "connected successfully";
}
$sql="desc bank";
if($conn->query($sql)==TRUE)
{
echo "<br>";
echo "connected to table";
echo "<br>";
}
else{
echo "error";
}
$name=$_POST['name'];
$interest=$_POST['interest'];
$amount=$_POST['amount'];
$months=$_POST['months'];
$a=($amount*$interest)/100;
$loan=($a*$months)+$amount;
$sql11="insert into bank values('$name',$loan)";
if($conn->query($sql11)==TRUE){
echo "inserted";
}
26
else{
echo "error";
}
echo "<br>";
$sql11="select *from bank";
$result=$conn->query($sql11);
if($result->num_rows>0){
echo "<b> Name Loan</b><br>";
while($row= $result->fetch_assoc())
{
echo $row["name"]." ".$row["loan"]."<br>";
}}
else{
echo "empty table";
}
$conn->close()

JAVASCRIPT

alert("WELCOME TO THE BANK");

27