Summer Training Report by Swarnima (04720602020)

Download as pdf or txt
Download as pdf or txt
You are on page 1of 50

A SUMMER PROJECT REPORT ON

Internship Feedback Form


Submitted in partial fulfillment of the
requirements for the award of the degree of

BACHELOR OF COMPUTER APPLICATIONS


To

Guru Gobind Singh Indraprastha University, Delhi

Under the guidance of Submitted By

Ms Sweety Mokhria Swarnima Sabharwal (04720602020)

Assistant Professor BCA 3rd year 5th sem

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
CERTIFICATE

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

To Whom It May Concern

I , Enrolment No. from BCA-V Sem of the


Trinity Institute of Professional Studies, Delhi here by declare that the
Summer Project/Training
Reportentitled________________________________________________

______________________________at______________________is an
original work and the same has not been submitted to any other Institute for the
award of any other degree.

Date: Signature of the Student

Certified that the Summer Project Report submitted in partial fulfillment of


Bachelor of Computer Applications (BCA) to be awarded by G.G.S.I.P.
University, Delhi
by______________________________________________
Enrolment No. has been completed under my guidance and is
satisfactory.

Signature of the guide


Ms Sweety Mokhria
Assistant Professor

2
List of Abbreviations

S.no Abbreviations Meaning


1 HTML Hypertext Markup Language
2 CSS Cascading Style Sheets
3 PHP HyperText Pre-Processor
4 SQL Structured Query Language

3
TABLE OF CONTENT

S.no Topic Page No.


1. Certificate
2. Acknowledgement
3. Abbreviation List
4. Table of Content
5. Introduction
6. Software Hardware Req.
7. System Feasibility Study
8. System Development
9. Implementation
10. References

4
INTRODUCTION

I have designed a survey form using HTML, CSS, PHP and MySQL for the company

Quality Solutions for Automation and Technology. The survey consists of 10

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

project on my own. The technologies used are described in detail below:

HTML: HTML stands for Hyper Text Markup Language.

● HTML is the standard markup language for creating Web pages

● HTML describes the structure of a Web page

● HTML consists of a series of elements

● HTML elements tell the browser how to display the content

● HTML elements label pieces of content such as "this is a heading", "this is a

paragraph", "this is a link", etc.

CSS: Cascading Style Sheets (CSS) is a style sheet language used for describing

the presentation of a document written in a markup language such as HTML or XML

(including XML dialects such as SVG, MathML or XHTML).[1] CSS is a cornerstone

technology of the World Wide Web, alongside HTML and JavaScript.

CSS is designed to enable the separation of content and presentation, including

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

that share the file and its formatting.

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

print, by voice (via speech-based browser or screen reader), and on Braille-based

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

to create dynamic websites and applications. It was developed in 1994 by Rasmus

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

WordPress, Drupal, Shopify, WooCommerce etc. PHP can actually do anything

related to server-side scripting or more popularly known as the backend of a website.

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

of the abilities of PHP that makes it suitable to be used as server-side scripting

language.

6
MYSQL: MySQL is a relational database management system. Databases are the

essential data repository for all software applications. For example, whenever

someone conducts a web search, logs in to an account, or completes a transaction, a

database system is storing the information so it can be accessed in the future. A

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

that’s inconsistent, duplicated, orphaned, out of date, or missing.

7
SOFTWARE AND HARDWARE REQUIREMENTS

Hardware used

Processor: AMD Ryzen 5 4600H with Radeon Graphics 3.00 GHz

Installed RAM: 16.0 GB

System type : 64-bit operating system, x64-based processor

Edition: Windows 10 Home Single Language

Software used

Visual Studio Code

XAMPPS

8
SYSTEM FEASIBILITY STUDY

SDLC Waterfall Model

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

for software development.

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

complete. In this waterfall model, the phases do not overlap.

Waterfall Model - Design

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 −

Requirement Gathering and analysis − All possible

requirements of the system to be developed are captured in this

phase and documented in a requirement specification document.

System Design − The requirement specifications from first phase

are studied in this phase and the system design is prepared. This

system design helps in specifying hardware and system

requirements and helps in defining the overall system architecture.

Implementation − With inputs from the system design, the

system is first developed in small programs called units, which are

integrated in the next phase. Each unit is developed and tested for

its functionality, which is referred to as Unit Testing.

Integration and Testing − All the units developed in the

implementation phase are integrated into a system after testing of

each unit. Post integration the entire system is tested for any faults

and failures.

Deployment of system − Once the functional and

non-functional testing is done; the product is deployed in the

customer environment or released into the market.

Maintenance − There are some issues which come up in the

client environment. To fix those issues, patches are released. Also

to enhance the product some better versions are released.

Maintenance is done to deliver these changes in the customer

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,

so the name "Waterfall Model". In this model, phases do not overlap.

Waterfall Model - Application

Every software developed is different and requires a suitable SDLC approach to be

followed based on the internal and external factors. Some situations where the use of

Waterfall model is most appropriate are −

● Requirements are very well documented, clear and fixed.

● Product definition is stable.

● Technology is understood and is not dynamic.

● There are no ambiguous requirements.

● Ample resources with required expertise are available to support

the product.

● The project is short.

Waterfall Model - Advantages

The advantages of waterfall development are that it allows for departmentalization

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.

Development moves from concept, through design, implementation, testing,

installation, troubleshooting, and ends up at operation and maintenance. Each phase

of development proceeds in strict order.

11
Some of the major advantages of the Waterfall Model are as follows −

● Simple and Easy to use and understand.

● Easy to manage due to the rigidity of the model. Each phase has specific

deliverables and a review process.

● Phases are processed and completed one at a time.

● Works well for smaller projects where requirements are very well understood.

● Clearly defined stages.

● Well understood milestones.

● Easy to arrange tasks.

● Process and results are well documented.

Waterfall Model - Disadvantages

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.

The major disadvantages of the Waterfall Model are as follows −

● No working software is produced until late during the life cycle.

● High amounts of risk and uncertainty.

● Not a good model for complex and object-oriented projects.

● Poor model for long and ongoing projects.

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

● It is difficult to measure progress within stages.

12
● Cannot accommodate changing requirements.

● Adjusting scope during the life cycle can end a project.

● Integration is done as a “big-bang at the very end, which doesn’t allow

identifying any technological or business bottleneck or challenges early.

13
SYSTEM DEVELOPMENT (CODING)

AND

IMPLEMENTATION (PROJECT OUTPUT)

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.

CODE for registration.php

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

OUTPUT for registration.php

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.

CODE for posreg.php

<!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</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

$con = mysqli_connect($servername, $username, $dbpassword,


$database);

# die if connection was unsuccessful

if (!$con) {

die("Sorry we failed to connect" .


mysqli_connect_error($con));

} else {

echo "Connection Established<br><br>";

# create a table in the DB

$sql = "INSERT INTO portal


values('$Name','$Phone','$email')";

$result = mysqli_query($con, $sql);

if ($result) {

echo "Row inserted in table successfully.";

header("Location:index.html");

19
} else {

echo "Row not inserted in table succesfully because of


this error ---> " . mysqli_error($con);

?>

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

HTML CODE for index.html

<!DOCTYPE html>

<html>

<head>

<title>Please Participate in Our Survey!</title>

<link
href="https://fonts.googleapis.com/css?family=Oswald:300,700|Varela
+Round" rel="stylesheet">

<link rel="stylesheet" type="text/css" href="style.css">

</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">

<h1><strong>Welcome</strong> to our survey!</h1>

<p>We're looking forward to getting your answers so we can make


sure our Interns and Trainee feel more comfortable

and they get to learn the best from us!</p>

</div>

<div class="question">

<h4>Question 1</h4>

<h2>How would you define our company culture and ethics?</h2>

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

<h2>Do you feel that management provided support throughout the


internship?</h2>

<div class="answer">

<h3>Yes</h3>

</div>

<div class="answer">

<h3>No</h3>

</div>

</div>

<div class="question">

<h4>Question 3</h4>

<h2>Do you feel that you received the proper training to


complete your duties?</h2>

<div class="answer">

<h3>Yes</h3>

</div>

23
<div class="answer">

<h3>No</h3>

</div>

</div>

<div class="question">

<h4>Question 4</h4>

<h2>Were you able to adapt work from office Environment?</h2>

<div class="answer">

<h3>Yes</h3>

</div>

<div class="answer">

<h3>No</h3>

</div>

</div>

<div class="question">

<h4>Question 5</h4>

<h2>Do you see a future at this company?</h2>

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

<a href="index1.html" class="previous round">&#8250;</a>

<a href="index1.html" class="next round">&#8249;</a><br>

<footer>

<h3 class="abc">"Internship Survey"</h3>

</footer>

</body>

</html>

25
CSS CODE for style.css

body {

background-color: #FFF;

margin: 0 auto;

header {

background-color: #466995;

border-bottom: 1px solid #466995;

position: fixed;

width: 100%;

z-index: 10;

ul {

margin: 30px auto;

padding: 0 20px;

text-align: center;

li {

color: #FFF;

font-family: 'Oswald', sans-serif;

font-size: 16px;

26
font-weight: 300;

text-transform: uppercase;

display: inline-block;

width: 80px;

li:hover {

color: #DBE9EE;

h1 {

color: #466995;

font-family: 'Oswald', sans-serif;

font-size: 32px;

font-weight: 300;

text-transform: uppercase;

h2 {

color: #333;

font-family: 'Varela Round', sans-serif;

font-size: 22px;

font-weight: 100;

margin: 0 auto 20px auto;

27
}

h3 {

color: #466995;

font-family: 'Oswald', sans-serif;

font-size: 18px;

text-align: center;

font-weight: 700;

text-transform: uppercase;

padding: 15px;

h4 {

color: #466995;

font-family: 'Oswald', sans-serif;

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 {

border: 1px solid #466995;

margin: 20px;

display: inline-block;

height: 100px;

width: 150px;

.answer:hover {

background: #C0D6DF;

color: #FFF;

.abc {

color: #466995;

font-family: 'Oswald', sans-serif;

font-size: 20px;

text-align: center;

font-weight: 700;

padding: 30px;

30
a {

text-decoration: none;

display: inline-block;

padding: 8px 16px;

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%;

OUTPUT for survey page 1

32
HTML CODE for index1.html

<!DOCTYPE html>

<html>

<head>

<title>Please Participate in Our Survey!</title>

<link
href="https://fonts.googleapis.com/css?family=Oswald:300,700|Varela
+Round" rel="stylesheet">

<link rel="stylesheet" type="text/css" href="style1.css">

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

<h2>Did you received your stipend on time?</h2>

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

<h2>Do you think while working with us you've gained experience


as a professional?</h2>

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

<h2>Did this internship match your expectations?</h2>

<div class="answer">

<h3>Yes</h3>

</div>

<div class="answer">

<h3>No</h3>

</div>

</div>

<div class="question">

<h4>Question 10</h4>

<h2>Would you recommend this internship to others?</h2>

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

<a href="index.html" class="previous round">&#8250;</a>

<a href="index.html" class="next round">&#8249;</a><br>

<div>

<button><a href="thankyou.html">SUBMIT</a></button>

</div>

<footer>

<h3 class="abc">"Internship Survey"</h3>

</footer>

</body>

37
</html>

CSS CODE for style1.css

body {

background-color: #FFF;

margin: 0 auto;

header {

background-color: #466995;

border-bottom: 1px solid #466995;

position: fixed;

width: 100%;

z-index: 10;

top: 0;

ul {

margin: 30px auto;

padding: 0 20px;

text-align: center;

38
li {

color: #FFF;

font-family: 'Oswald', sans-serif;

font-size: 16px;

font-weight: 300;

text-transform: uppercase;

display: inline-block;

width: 80px;

li:hover {

color: #DBE9EE;

h1 {

color: #466995;

font-family: 'Oswald', sans-serif;

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;

margin: 0 auto 20px auto;

h3 {

color: #466995;

font-family: 'Oswald', sans-serif;

font-size: 18px;

text-align: center;

font-weight: 700;

text-transform: uppercase;

padding: -2px;

h4 {

color: #466995;

font-family: 'Oswald', sans-serif;

font-size: 18px;

font-weight: 300;

letter-spacing: 2px;

text-align: center;

text-transform: uppercase

40
}

p {

color: #333;

font-family: 'Varela Round', sans-serif;

font-size: 18px;

footer {

background-color: #DBE9EE;

text-align: center;

height: 100px;

.question {

text-align: center;

position: relative;

top: 60px;

.answer {

border: 1px solid #466995;

margin: 15px;

display: inline-block;

41
height: 60px;

width: 100px;

.answer:hover {

background: #C0D6DF;

color: #FFF;

.abc {

color: #466995;

font-family: 'Oswald', sans-serif;

font-size: 20px;

text-align: center;

font-weight: 700;

padding: 30px;

a {

text-decoration: none;

display: inline-block;

padding: 8px 16px;

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;

OUTPUT for survey page 2

44
45
STEP 4. After the user finishes filling the form he is redirected to thankyou page at

the end.

CODE for thankyou.html

<!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">

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

<h1>Thanks for participating in the Survey.</h1>

</body>

</html>

47
REFERENCES

● Web Development - GeeksforGeeks

● Web Development (w3schools.com)

● Web Development Course: Learn Full Stack Web Development

(internshala.com)

48
THANK YOU

49

You might also like