Summer Training Report by Swarnima (04720602020)
Summer Training Report by Swarnima (04720602020)
Summer Training Report by Swarnima (04720602020)
1
Acknowledgment
TRINITY INSTITUTE OF PROFESSIONAL STUDIES
(Affiliated to Guru Gobind Singh Indraprastha University, Delhi)
Ranked “A+” Institution by SFRC, Govt. of NCT of India
Recognized under section 2(f) of the UGC Act, 1956
NAAC Accredited “B++” Grade Institution
______________________________at______________________is an
original work and the same has not been submitted to any other Institute for the
award of any other degree.
2
List of Abbreviations
3
TABLE OF CONTENT
4
INTRODUCTION
I have designed a survey form using HTML, CSS, PHP and MySQL for the company
questions which are internship related. Each trainee in the company was sent this
form after their internship was completed to describe their experience in the field.
I had learned a lot during my internship period and therefore was able to develop this
CSS: Cascading Style Sheets (CSS) is a style sheet language used for describing
layout, colors, and fonts. This separation can improve content accessibility; provide
5
more flexibility and control in the specification of presentation characteristics; enable
multiple web pages to share formatting by specifying the relevant CSS in a separate
.css file, which reduces complexity and repetition in the structural content; and
enable the .css file to be cached to improve the page load speed between the pages
Separation of formatting and content also makes it feasible to present the same
markup page in different styles for different rendering methods, such as on-screen, in
tactile devices. CSS also has rules for alternate formatting if the content is accessed
on a mobile device.
PHP: PHP(short for Hypertext PreProcessor) is the most widely used open source
and general purpose server side scripting language used mainly in web development
Lerdorf. A survey by W3Tech shows that almost 79% of the websites in their data are
developed using PHP. It is not only used to build the web apps of many tech giants
like Facebook but is also used to build many CMS (Content Management System) like
For example, PHP can receive data from forms, generate dynamic page content, can
work with databases, create sessions, send and receive cookies, send emails etc. There
are also many hash functions available in PHP to encrypt user’s data that makes PHP
secure and reliable to be used as a server-side scripting language. So these are some
language.
6
MYSQL: MySQL is a relational database management system. Databases are the
essential data repository for all software applications. For example, whenever
relational database stores data in separate tables rather than putting all the data in
one big storeroom. The database structure is organized into physical files optimized
for speed. The logical data model, with objects such as data tables, views, rows, and
columns, offers a flexible programming environment. You set up rules governing the
relationships between different data fields, such as one to one, one to many, unique,
required, or optional, and “pointers” between different tables. The database enforces
these rules so that with a well-designed database your application never sees data
7
SOFTWARE AND HARDWARE REQUIREMENTS
Hardware used
Software used
XAMPPS
8
SYSTEM FEASIBILITY STUDY
The Waterfall Model was the first Process Model to be introduced. It is also referred to as a
linear-sequential life cycle model. It is very simple to understand and use. In a waterfall
model, each phase must be completed before the next phase can begin and there is no
overlapping in the phases. The Waterfall model is the earliest SDLC approach that was used
The waterfall Model illustrates the software development process in a linear sequential flow.
This means that any phase in the development process begins only if the previous phase is
Waterfall approach was first SDLC Model to be used widely in Software Engineering to
ensure success of the project. In "The Waterfall" approach, the whole process of software
development is divided into separate phases. In this Waterfall model, typically, the outcome
of one phase acts as the input for the next phase sequentially.
9
The sequential phases in Waterfall model are −
are studied in this phase and the system design is prepared. This
integrated in the next phase. Each unit is developed and tested for
each unit. Post integration the entire system is tested for any faults
and failures.
environment.
10
All these phases are cascaded to each other in which progress is seen as flowing
steadily downwards (like a waterfall) through the phases. The next phase is started
only after the defined set of goals are achieved for previous phase and it is signed off,
followed based on the internal and external factors. Some situations where the use of
the product.
and control. A schedule can be set with deadlines for each stage of development and a
product can proceed through the development process model phases one by one.
11
Some of the major advantages of the Waterfall Model are as follows −
● Easy to manage due to the rigidity of the model. Each phase has specific
● Works well for smaller projects where requirements are very well understood.
The disadvantage of waterfall development is that it does not allow much reflection or
revision. Once an application is in the testing stage, it is very difficult to go back and
change something that was not well-documented or thought upon in the concept
stage.
● Not suitable for the projects where requirements are at a moderate to high risk
of changing. So, risk and uncertainty is high with this process model.
12
● Cannot accommodate changing requirements.
13
SYSTEM DEVELOPMENT (CODING)
AND
STEP 1. At first we created a registration page which allows the user to register
himself/herself first in order to fill the survey. PHP was used to code the registration
page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Registration Form</title>
<style>
input {
padding: 7px;
margin-top: 15px;
background-color: #DBE9EE;
border: 1px solid #466995;
width: 50%;
float: inline-start;
}
label {
font-family: system-ui, -apple-system,
BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
'Open Sans', 'Helvetica Neue', sans-serif;
font-weight: bold;
display: flex;
14
color: #466995;
text-shadow: 2px 2px #DBE9EE;
font-size: 18px;
}
h3 {
font-family: system-ui, -apple-system,
BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
'Open Sans', 'Helvetica Neue', sans-serif;
font-size: x-large;
text-align: center;
text-shadow: 2px 2px #DBE9EE;
color: #466995;
div {
width: 60%;
display: flex;
justify-content: center;
height: 450px;
box-shadow: 2px 2px 2px 2px #DBE9EE;
background-color: whitesmoke;
text-align: left;
}
body {
background-color: #466995;
}
.abc {
padding-left: 20px;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 20px;
background-color: #466995;
color: #DBE9EE;
border: 1px solid #466995;
font-weight: bold;
15
font-family: -apple-system, BlinkMacSystemFont, 'Segoe
UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica
Neue', sans-serif;
border-radius: 15px;
font-size: 16px;
}
img {
height: 430px;
width: 180px;
margin-top: 10px;
margin-right: 50px;
}
</style>
</head>
<body>
<header>
</header><br><br><br><br><br>
<center>
<div><img src="freepik--Character--inject-62.png"
alt="Image">
<form action="posreg.php" method="post">
<h3>KINDLY REGISTER TO FILL THE SURVEY</h3>
<br>
<label for="">Name : </label>
<input type="text" name="Uname" id="">
<br><br>
<label for="">Phone : </label>
<input type="text" name="phone" id="">
<br><br>
<label for="">Email ID : </label>
<input type="text" name="email" id="">
<br><br><br>
<input class="abc" type="submit" />
</form><br>
</div>
</center>
<footer>
<h3></h3>
</footer>
16
</body>
</html>
17
STEP 2. After registering the user’s information gets stored in the portal table which
is in our registration database. We had created our database from XAMPPS using
MYSQL. The table shows the records of all the users which have registered to fill the
survey. The code was again written in php to connect the registration page to the
database.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Registration</title>
</head>
<body>
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$Name = $_POST['Uname'];
$Phone = $_POST['phone'];
$email = $_POST['email'];
18
$servername = "localhost";
$username = "root";
$dbpassword = "";
$database = "registration";
# create a connection
if (!$con) {
} else {
if ($result) {
header("Location:index.html");
19
} else {
?>
</body>
</html>
The database screenshot where all the information of the user gets stored.
20
STEP 3. After the user has filled the form and clicks the submit button, he/she is
redirected to the survey form page which is coded using HTML and CSS.
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Oswald:300,700|Varela
+Round" rel="stylesheet">
</head>
<body>
<header>
<ul>
<li>Question 1</li>
<li>Question 2</li>
<li>Question 3</li>
<li>Question 4</li>
<li>Question 5</li>
</ul>
21
</header>
<div class="welcome">
</div>
<div class="question">
<h4>Question 1</h4>
<div class="answer">
<h3>Wonderful</h3>
</div>
<div class="answer">
<h3>Good</h3>
</div>
<div class="answer">
<h3>Poor</h3>
</div>
</div>
22
<div class="question">
<h4>Question 2</h4>
<div class="answer">
<h3>Yes</h3>
</div>
<div class="answer">
<h3>No</h3>
</div>
</div>
<div class="question">
<h4>Question 3</h4>
<div class="answer">
<h3>Yes</h3>
</div>
23
<div class="answer">
<h3>No</h3>
</div>
</div>
<div class="question">
<h4>Question 4</h4>
<div class="answer">
<h3>Yes</h3>
</div>
<div class="answer">
<h3>No</h3>
</div>
</div>
<div class="question">
<h4>Question 5</h4>
<div class="answer">
<h3>Yes</h3>
24
</div>
<div class="answer">
<h3>No</h3>
</div>
<div class="answer">
<h3>Maybe</h3>
</div>
</div><br><br><br>
<footer>
</footer>
</body>
</html>
25
CSS CODE for style.css
body {
background-color: #FFF;
margin: 0 auto;
header {
background-color: #466995;
position: fixed;
width: 100%;
z-index: 10;
ul {
padding: 0 20px;
text-align: center;
li {
color: #FFF;
font-size: 16px;
26
font-weight: 300;
text-transform: uppercase;
display: inline-block;
width: 80px;
li:hover {
color: #DBE9EE;
h1 {
color: #466995;
font-size: 32px;
font-weight: 300;
text-transform: uppercase;
h2 {
color: #333;
font-size: 22px;
font-weight: 100;
27
}
h3 {
color: #466995;
font-size: 18px;
text-align: center;
font-weight: 700;
text-transform: uppercase;
padding: 15px;
h4 {
color: #466995;
font-size: 18px;
font-weight: 300;
letter-spacing: 2px;
text-align: center;
text-transform: uppercase
p {
color: #333;
28
font-family: 'Varela Round', sans-serif;
font-size: 18px;
footer {
background-color: #DBE9EE;
text-align: center;
height: 100px;
.welcome {
background-color: #DBE9EE;
box-sizing: border-box;
padding: 40px;
text-align: center;
width: 100%;
position: relative;
top: 50px;
.question {
text-align: center;
position: relative;
top: 40px;
29
}
.answer {
margin: 20px;
display: inline-block;
height: 100px;
width: 150px;
.answer:hover {
background: #C0D6DF;
color: #FFF;
.abc {
color: #466995;
font-size: 20px;
text-align: center;
font-weight: 700;
padding: 30px;
30
a {
text-decoration: none;
display: inline-block;
a:hover {
background-color: #ddd;
color: black;
.next {
background-color: #f1f1f1;
color: black;
float: right;
.previous {
background-color: #466995;
color: white;
float: right;
.round {
31
border-radius: 50%;
32
HTML CODE for index1.html
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Oswald:300,700|Varela
+Round" rel="stylesheet">
</head>
<body>
<header>
33
<ul>
<li>Question 6</li>
<li>Question 7</li>
<li>Question 8</li>
<li>Question 9</li>
<li>Question 10</li>
</ul>
</header>
<div class="question">
<h4>Question 6</h4>
<div class="answer">
<h3>Yes</h3>
</div>
<div class="answer">
<h3>No</h3>
</div>
</div>
<div class="question">
<h4>Question 7</h4>
34
<h2>Was your manager rude to you during your tenure?</h2>
<div class="answer">
<h3>Yes</h3>
</div>
<div class="answer">
<h3>No</h3>
</div>
</div>
<div class="question">
<h4>Question 8</h4>
<div class="answer">
<h3>Yes</h3>
</div>
<div class="answer">
<h3>No</h3>
</div>
<div class="answer">
35
<h3>Maybe</h3>
</div>
</div>
<div class="question">
<h4>Question 9</h4>
<div class="answer">
<h3>Yes</h3>
</div>
<div class="answer">
<h3>No</h3>
</div>
</div>
<div class="question">
<h4>Question 10</h4>
<div class="answer">
<h3>Yes</h3>
36
</div>
<div class="answer">
<h3>No</h3>
</div>
<div class="answer">
<h3>Maybe</h3>
</div>
</div><br><br><br>
<div>
<button><a href="thankyou.html">SUBMIT</a></button>
</div>
<footer>
</footer>
</body>
37
</html>
body {
background-color: #FFF;
margin: 0 auto;
header {
background-color: #466995;
position: fixed;
width: 100%;
z-index: 10;
top: 0;
ul {
padding: 0 20px;
text-align: center;
38
li {
color: #FFF;
font-size: 16px;
font-weight: 300;
text-transform: uppercase;
display: inline-block;
width: 80px;
li:hover {
color: #DBE9EE;
h1 {
color: #466995;
font-size: 32px;
font-weight: 300;
text-transform: uppercase;
h2 {
color: #333;
39
font-family: 'Varela Round', sans-serif;
font-size: 22px;
font-weight: 100;
h3 {
color: #466995;
font-size: 18px;
text-align: center;
font-weight: 700;
text-transform: uppercase;
padding: -2px;
h4 {
color: #466995;
font-size: 18px;
font-weight: 300;
letter-spacing: 2px;
text-align: center;
text-transform: uppercase
40
}
p {
color: #333;
font-size: 18px;
footer {
background-color: #DBE9EE;
text-align: center;
height: 100px;
.question {
text-align: center;
position: relative;
top: 60px;
.answer {
margin: 15px;
display: inline-block;
41
height: 60px;
width: 100px;
.answer:hover {
background: #C0D6DF;
color: #FFF;
.abc {
color: #466995;
font-size: 20px;
text-align: center;
font-weight: 700;
padding: 30px;
a {
text-decoration: none;
display: inline-block;
42
a:hover {
background-color: #ddd;
color: black;
.previous {
background-color: #f1f1f1;
color: black;
float: right;
.next {
background-color: #466995;
color: white;
float: right;
.round {
border-radius: 50%;
div {
padding: 20px;
text-align: center;
43
}
button {
padding: 20px;
background-color: #466995;
border: #466995;
color: #FFF;
border-radius: 40px;
padding-left: 3%;
padding-right: 3%;
font-weight: bold;
font-size: medium;
44
45
STEP 4. After the user finishes filling the form he is redirected to thankyou page at
the end.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
background-image:
url("pexels-miguel-á-padriñán-1111317.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 60vh;
margin: 0%;
h1 {
margin-top: 300px;
46
color:darkslateblue;
font-style: italic;
text-decoration: underline;
font-size: 40px;
margin-left: 600px;
</style>
<title>THANKS</title>
</head>
<body>
</body>
</html>
47
REFERENCES
(internshala.com)
48
THANK YOU
49