WEB DEVELOPMENT FEEDBACK SYSTEM
AN INTERNSHIP
PROJECT REPORT
Submitted by
MANIKANDAN
A report submitted in partial fulfillment of the requirements for the award of
Degree of
DIPLOMO
IN
COMPUTER SCIENCE ENGINEERING
USP POLYTECHNIC COLLEGE
U.S.P NAGAR, KODIKURICHI
TENKASI-627 804
ANNA UNIVERSITY: CHENNAI -600 025
AUGUST 2024
AKCNOWLEDGEMENT
Firstly, I express my heartiest thanks and gratefulness to almighty God for His divine
blessing makes us possible to complete the project work successfully.
I really grateful and wish my profound my indebtedness to Supervisor
Miss.Janani, Software Developer, PCS Software Solutions, Surandai-627859. Deep
Knowledge & keen interest of my supervisor in the field of web development has helped
me enormously to carry out this project. Her endless patience, scholarly guidance,
continual encouragement, constant and energetic supervision, constructive criticism,
valuable advice, reading many inferior drafts and correcting them at all stage have made it
possible to complete this project.
I would like to express my heartiest gratitude to Mr.xxxxxx, Department of CSE, for his
kind help to finish my project.
I would also generously welcome each one of those individuals who have helped me
straight forwardly or in a roundabout way in making this project a win. In this unique
situation, I might want to thank the various staff individuals, both educating and non-
instructing, which have developed their convenient help and facilitated my undertaking.
Finally, I must acknowledge with due respect the constant support and patients of my
parents.
MANIKANDAN
TABLE OF CONTENTS
Content Page No.
CERTIFICATE
AKCNOWLEDGEMENT
TABLE OF CONTENTS
ABSTRACT 5
CHAPTER 1 COMPANY PROFILE 6
CHAPTER 2 WEEKLY OVERVIEW OF INTERNSHIP ACTIVITIES 8
CHAPTER 3 INTRODUCTION 10
CHAPTER 4 SYSTEM SPECIFICATION 13
CHAPTER 5 TECHNOLOGY LEARNT 14
CHAPTER 6 PROJECT DESCRIPTION 15
CHAPTER 7 CODING 17
CHAPTER 8 RESULTS 28
CHAPTER 9 CONCLUSION 29
CHAPTER 10 REFERENCES 30
CUSTOMER FEEDBACK SYSTEM USING JAVASCRIPT
ABSTRACT
The aim is to automate its existing manual system by the help of computerized
equipment and full –fledged computer software, fulfilling their requirements, So
that their valuable data can be stored for longer period with easy accessing and
manipulation of the same. Basically the project describes how to manage for
good performance and better services for clients.
Customer satisfaction is an assessment of how well the company's Services
meet customer expectations. It is well established that satisfied customers are
key to long- term business success. The idea of the service-profit chain directly
relates customer satisfaction to business success and profitability. Customer
satisfaction predicts customer retention and loyalty. When a customer is
satisfied, they spread this information acting as market.
4
COMPANY PROFILE
PCS Software Solutions is an independent software development and training company,
driven by industry experts and thought leaders in Web/Mobile development and training
domain. We work with some of the smartest software-driven businesses around the world
including software product start-ups as well as MNC over 50 companies. We offer Website
Development and Hosting Services at affordable price. We develop the Website and as well
as take over the responsibility of maintaining your Website PCS offers the most effective
and result oriented Digital / Online Marketing Strategies for clients to establish a good
image of their brand in the Digital and Social Media. With keen industry expertise and
market knowledge, we will analyze the targeted audience to determine the best way of
business promotion through Digital Marketing using various Online Promotions in Google,
Facebook, Instagram & Youtube Promotions.
VISION:
Be a global force in innovative solutions, quality excellence and redefine creative thoughts.
Striving to be a global force in innovative solutions, quality excellence, and the redefinition
of creative thoughts, we embark on a journey that transcends boundaries. Our commitment
extends beyond mere problem-solving; it encompasses a vision to reshape industries and
leave an indelible mark on the global landscape. At the core of our mission is a relentless
pursuit of innovation, where we challenge the status quo and push the limits of what is
conceivable
5
MISSION:
We endeavour to bring innovative solutions to the forefront, employing a simple
yet effective approach that underscores our commitment to providing deserving quality.
Our mission is rooted in a dedication to pushing the boundaries of what's possible,
embracing creativity, and maintaining a relentless pursuit of excellence. By adhering to
these principles, we aim to not only meet but exceed the expectations of our users, clients,
and partners. Through a combination of forward-thinking strategies and a focus on quality,
we strive to make a meaningful impact in every endeavour we undertake.
OUR SERVICES
WEBSITE DEVELOPMENT
MOBILE APPLICATION DEVELOPMENT
E-COMMERCE
WORDPRESS DEVELOPMENT
OUTSOURCING
CLOUD SERVICES
DIGITAL MARKETING
SEO
COLLEGE PROJECT
INTERNSHIP
6
SOFTWARE TRAINING
INTRODUCTION
We have developed Customer Feedback System to provide feedback in an easy and quick
manner to the Company. So we call it as Customer Feedback System which delivers via
customer interface as online system which acting as Service Provider. By using this
technology we can provide fast feedback about the company's product/ service by customer
on time to the Company as they referred in online system. This project has two kinds of
module Customers and admin. This feedback report is checked by their Head of Company.
He can view performance obtained by the Company's service and give this report to the
Company for further quality and customer satisfaction improvement.
1.1Internship Objectives
Internships are generally thought of to be reserved for college students looking to gain
experience in a particular field. However, a wide array of people can benefit from Training
Internships in order to receive real world experience and develop their skills.
An objective for this position should emphasize the skills you already possess in the area
and your interest in learning more
Internships are utilized in a number of different career fields, including architecture,
engineering, healthcare, economics, advertising and many more.
Some internship is used to allow individuals to perform scientific research while others are
7
specifically designed to allow people to gain first-hand experience working.
Utilizing internships is a great way to build your resume and develop skills that can be
emphasized in your resume for future jobs. When you are applying for a Training
Internship, make sure to highlight any special skills or talents that can make you stand apart
from the rest of the applicants so that you have an improved chance of landing the position.
1.1 MOTIVATION FOR INTERNSHIP
My motivation for this internship was rooted in a desire to learn about web
development, gain practical experience, and contribute to meaningful projects.
This experience not only aimed to solidify my technical expertise but also to
prepare me for a successful career in an ever-evolving technological landscape.
The motivation behind pursuing this internship was driven by my passion for
combining web development to create efficient, secure, and user-friendly Web
Applications. In an increasingly interconnected digital world, the synergy between
front-end development and back-end development is crucial for delivering
seamless online experiences. I recognized that gaining practical experience in both
domains would be instrumental in advancing my career and contributing
meaningfully to the tech industry.
From a web development perspective, my interest in HTML, CSS, and Bootstrap
stemmed from the desire to build interactive and aesthetically pleasing web
interfaces. However, I also understood that even the most beautifully designed
Web applications require a Programming language like JavaScript to create
dynamic websites. This realization led me to delve into JavaScript Framework
(React & Node).
The decision to undertake this internship was further motivated by the opportunity
8
to work in a professional setting, where I could apply my theoretical knowledge to
real-world scenarios. I was eager to face the challenges and complexities of
integrating web development with network management, learning from industry
experts, and gaining hands-on experience with cutting-edge technologies.
Additionally, I was motivated by the prospect of contributing to projects that have
a tangible impact on users and organizations. The chance to enhance network
performance, implement security protocols, and ensure high availability of applications
aligned with my long-term career goals of becoming a proficient full-stack developer
with a strong foundation in Web Development.
This internship also offered a platform to develop essential soft skills such as
teamwork, problem- solving, and project management. Collaborating with
professionals from diverse backgrounds and working on interdisciplinary projects
provided a holistic learning experience that extended beyond technical knowledge.
In summary, my motivation for this internship was rooted in a desire to bridge the
gap between web developments, gain practical experience, and contribute to
meaningful projects. This experience not only aimed to solidify my technical
expertise but also to prepare me for a successful career in an ever-evolving
technological landscape
SYSTEM REQUIREMENTS
The software requirement specification can produce at the culmination of the
9
analysis task. The function and performance allocated to software as part of system
engineering are refined by established a complete information description, a detailed
functional description, a representation of system behavior, and indication of performance
and design constrain, appropriate validate criteria, and other information pertinent to
requirements.
Operating System: Windows
Software Requirements:
Text Editor : Notepad++.
Database : My SQL.
Package : XAMPP.
Hardware Requirements:
Processor : Intel core i3
Memory : 8GB RAM
Hard Disk : 1TB
TECHNOLOGY LEARNT
10
4.1HTML5
HTML is the standard mark-up language for creating Web pages.
HTML describes the structure of Web pages using mark-up HTML elements are the
building blocks of HTML pages HTML elements are represented by tags.
HTML tags label pieces of content such as "heading", "paragraph", "table", and so on.
4.2CSS3
CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen, paper, or in other
media
CSS saves a lot of work. It can control the layout of multiple web pages all at once
External stylesheets are stored in CSS files
4.3JavaScript
JavaScript is the world's most popular programming language.
JavaScript is the programming language of the Web.
JavaScript files have the file extension .js.
To use an external script, put the name of the script file in the src (source)
attribute of a <script> tag.
JavaScript makes HTML and JavaScript easier to read and maintain.
4.4MYSQL
SQL is a standard language for storing, manipulating and retrieving data in
databases.
SQL stands for Structured Query Language
SQL lets you access and manipulate databases
SQL became a standard of the American National Standards Institute (ANSI) in
1986, and of the International Organization for Standardization (ISO) in 1987
11
PROJECT DESCRIPTION
The main purpose of this project is to expand current customer feedback system of
the company. Ongoing system has several channels for collecting feedback. Customers are
12
able to leave feedback through the company’s website. Additionally, they could express
their opinion directly to the personnel, or reveal their thoughts within the feedback form
intended for the company guests.
Module Description
This Project has two modules
1. Admin Module
2. Customer Module
Admin:
Admin can view, delete, forward, the feedback by customers.
Admin can reply to the feedback received from customers.
Customer:
Customer can give the feedback about the product/service from the company.
Customer can message/ comments any feedback.
Existing System:
13
Coming to the existing system the feedback is done by manual process. In the existing system
customers can give feedback about the company by using paper and pen. After giving feedback
by every customer's Papers are collected by the Company and calculate the overall performance
about customer satisfaction. So, the existing system is carries more time to do a piece of work
for this reason. The online system feedback is implemented.
Proposed System:
Here we aimed to design online web application for issuing the feedback about the company by
customers, this is named as Customer feedback system. Customer feedback System to provide
feedback in a easy way and quick manner to the Company. We can make fast feedback about
the company by customers on time as they referred in online system. This project has two kinds
of users Customer and Admin(Company). Admin can view overall performance and view the
customer satisfaction. Admin can improve the quality and customer satisfaction compared to
the manual system, online system is very simple to use and also understand.
LIMITATIONS OF PROJECT
• Excel export has not been developed for customers.
• Other Customers can see feedback.
• Customers can not register themselves for login.
RESULTS AND DISCUSSION
14
Coding:
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
integrity="sha512-
1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlk
MXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css" />
<title>Let Us Know Your Feedback</title>
</head>
<body>
<div id="panel" class="panel-container">
<strong>How satisfied are you with our <br /> customer support
performance?</strong>
<div class="ratings-container">
<div class="rating">
<img src="https://img.icons8.com/external-neu-royyan-wijaya/64/000000/external-
emoji-neumojis-smiley-neu-royyan-wijaya-17.png" alt="">
<small>Unhappy</small>
</div>
<div class="rating">
15
<img src="https://img.icons8.com/external-neu-royyan-wijaya/64/000000/external-
emoji-neumojis-smiley-neu-royyan-wijaya-3.png" alt=""/>
<small>Neutral</small>
</div>
<div class="rating active">
<img src="https://img.icons8.com/external-neu-royyan-wijaya/64/000000/external-
emoji-neumojis-smiley-neu-royyan-wijaya-30.png" alt=""/>
<small>Satisfied</small>
</div>
</div>
<button class="btn" id="send">Send Review</button>
</div>
<script src="script.js"></script>
</body>
</html>
Script.js
const ratings = document.querySelectorAll('.rating')
const ratingsContainer = document.querySelector('.ratings-container')
const sendBtn = document.querySelector('#send')
const panel = document.querySelector('#panel')
let selectedRating = 'Satisfied'
ratingsContainer.addEventListener('click', (e) => {
if(e.target.parentNode.classList.contains('rating') && e.target.nextElementSibling) {
removeActive()
e.target.parentNode.classList.add('active')
16
selectedRating = e.target.nextElementSibling.innerHTML
} else if(
e.target.parentNode.classList.contains('rating') &&
e.target.previousSibling &&
e.target.previousElementSibling.nodeName === 'IMG'
){
removeActive()
e.target.parentNode.classList.add('active')
selectedRating = e.target.innerHTML
}
})
sendBtn.addEventListener('click', (e) => {
panel.innerHTML = `
<i class="fas fa-heart"></i>
<strong>Thank You!</strong>
<br>
<strong>Feedback: ${selectedRating}</strong>
<p>We'll use your feedback to improve our customer support</p>
`
})
function removeActive() {
for(let i = 0; i < ratings.length; i++) {
ratings[i].classList.remove('active')
}
17
}
Style.css
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
*{
box-sizing: border-box;
}
body {
background-color: #fef9f2;
font-family: 'Montserrat', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
.panel-container {
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
border-radius: 4px;
font-size: 90%;
display: flex;
flex-direction: column;
justify-content: center;
18
align-items: center;
text-align: center;
padding: 30px;
max-width: 400px;
}
.panel-container strong {
line-height: 20px;
}
.ratings-container {
display: flex;
margin: 20px 0;
}
.rating {
flex: 1;
cursor: pointer;
padding: 20px;
margin: 10px 5px;
}
.rating:hover,
.rating.active {
border-radius: 4px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
19
.rating img {
width: 40px;
}
.rating small {
color: #555;
display: inline-block;
margin: 10px 0 0;
}
.rating:hover small,
.rating.active small {
color: #111;
}
.btn {
background-color: #302d2b;
color: #fff;
border: 0;
border-radius: 4px;
padding: 12px 30px;
cursor: pointer;
}
.btn:focus {
outline: 0;
20
}
.btn:active {
transform: scale(0.98);
}
.fa-heart {
color: red;
font-size: 30px;
margin-bottom: 10px;
}
21
RESULTS
CONCLUSION
The Project “Customer
Feedback system” is
designed in order
reduce the burden of
maintaining bulk of
records of all the
customers feedback
details. Inserting,
retrieving and
updating the feedback
details of a customers
are easy when it is
22
compared to the manual feedback and storing. Maintaining the project is also easy which
can is easily understandable. Maintaining the details in the database is manageable.
FUTURE ENHANCEMENTS:
Further enhancements can be made in designing the screens. Some more forms can also be
added so as to better retrieve the feedback details. Various other options can also be added
for the better usability of project
REFERENCES
https://www.w3schools.com/html/
https://www.w3schools.com/css/default.asp
https://www.w3schools.com/js/default.asp
23
https://en.wikipedia.org/wiki/Customer_service Accessed on 25th of May 2017
https://www.irjet.net/archives/V7/i2/IRJET-V7I2575.pdf Customer Feedback
System
24
