INDUSTRIAL TRAINING REPORT

ON
PROJECT “ WEB DEVELOPMENT ”

AT
Techgyan Technologies
Submitted in partial fulfillment of the requirements
For the award of degree of
Bachelor of technology
In
Computer Science and Engineering

Submitted To: - Submitted By: -Subodh kumar thakur

Mrs. Poonam Phogat 181078

Global Institute of Technology & Management,,

Gurugram
Affiliated To
Maharshi Dayanand University Rohtak Haryana 124001,

1
 DECLARATION

I, SUBODH KUMAR THAUR , Student of Btech (CSE) declare that the project titled
“WEB DEVLOPMENT ” which is submitted by me to Department of computer
science and engineering Global Institute of Technology & Management,, Gurugram
Affiliated To
Maharshi Dayanand University Rohtak,
Haryana 124001
Date
SUBODH KUMAR THAKUR

2
 ACKNOWLEDGEMENT

The successful completion of this project mark the beginning of an ever - going
learning experience of converting ideas and concepts into real life, practical
system. This project was a quite a learning experience for me at each and every
step. At the same time it has given me confidence to work in professional setup.
I feel the experience gained during the project will lead me to gain the bright
prospect in the future. First of all I would like to give thanks to Head,
Education and Training, Mr. VEDANSH BAJAJ , for giving me the
opportunity to work in this esteemed organization, which not only has increased
our awareness about latest fields but also taught me the importance of team
building. With the deep sense of gratitude, I express my sincere thanks to Ms. Swati
Sethi, for her active support and continuous guidance without which it would have
been difficult for me to complete this project. I will also like to the other
working staff teachers at TECHGYAN TECHNOLOGIES for taking keen
interest in my project and giving valuable suggestions and helping me directly or
indirectly to complete this project.

SUBDOH KUMAR THAKUR

181078
Btech (CSE)

3
CERTIFICATE

4
 ABSTRACT

This project “ WEB DEVELOPMENT ” aims to provide interactive platform to the

students to learn and grow. This software will help students in accessing their learning
and implementing capabilities. The product will help the user to work in a highly
effective and efficient environment. Students only need the will to learn and java
enabled system to take the advantage of this software. This software also stores the
details of the user in the database which can be accessed further in future. This system
enables user to take the product or whichever shows on site on the choice of his or
her subject of interest and later evaluate his or her learning based on the result. This
provide the students with the scope of improvement. The project “ web development ”
is developed with the objective of making the system reliable, easier, fast,secure with
high encryption and more informative.

5
6
 CONTENTS

DECLARATION 2
ACKNOWLEDGEMENT 3
CERTIFICATE 4
ABSTRACT 5
CONTENTS 6

1. INTRODUCTION

a. Organization Profile........................................................................................8
b. Introduction of Project....................................................................................11
c. Problem Specification.......................................................................................12
d. Problem Definition...........................................................................................12
e. Limitation of Existing System.........................................................................12
f. Objective of Project…......................................................................................13

2. SYSTEM ANALYSIS

a. Feasible study…................................................................................................14
b. Introduction…....................................................................................................14
c. Summary and Constraint…..............................................................................14
d. Types of Feasible Study.....................................................................................15
e. Hardware and Software Requirements…......................................................17

3. DEVELPOMENT ENVIRONMENT

a. Introduction to HTML…..................................................................................18
b. Introduction to Java…......................................................................................23
c. Introduction to REACTJS...............................................................................24
d. Screenshots and source code…………………………………………………..25
4. IMPLEMENTATION AND TESTING

a. Testing…............................................................................................................43

5. CONCLUSION….....................................................................................................47

6. BIBLIOGRAPHY….................................................................................................48

7
 INTRODUCTION

ORGANISATION PROFILE:

TECHGYAN TECHNOLOGIES. Ltd. is recognized as a leading IT solution providing

organization with a dynamic and fast growing team of diversely talented individuals.
Incorporated in 2001, in our aim to provide the best talent, we initially started with
Recruitment & Staffing services. We paralleled this by providing knowledge and skill
development certification training programs. TECHGYAN Certified Tester (TCT)
Program that aims to provide IT companies trained software Testers has reached soaring
heights of recognition over the years. Few years later after its inception, TCT Labs
added Software development & testing services to the portfolio.

Having partnered and worked with some of the leading names across Education, IT,
ITES, Banking, Insurance, Aviation, Retail, Healthcare, Hospitality, Media,
Manufacturing and FMCG sectors, TCT Labs has explored business opportunities in
software solutions with the Government, Corporate and Institutes.

With over a decade of experience we create and deliver high-impact solutions, enabling
our clients to achieve their business goals and enhance their competitiveness. In our
pursuit of excellence, TECHGYAN Research & Development team consistently
innovates to provide up-to-date solutions keeping in pace with changing times. Our
mission is for businesses to leverage the internet and mobility to work smarter and
grow faster. We work as your outsourcing and consulting partner. Our business
verticals are:

 Recruitment & Staffing

 Software Development and Testing Services
 Digital Marketing
 Enterprise Mobility
 Certifications & Trainings for Career Management
 Software solutions

TECHGYAN TEAM has expertise ranging from design to development, training to

placements and solutions to implementaion. We combine this knowledge with proactive
thinking and strategic planning to approach new challenges with your overall business
objectives in mind. WebTek Lab's management team brings together a wealth of
experience in both technological and organizational development that is critical in
helping our customers achieve their goals.
8
9
ACTIVITIES

TECHGYAN LABS offers out of the box solutions customized for various
segments. Our expertise lies in designing, realizing and deploying customized
solutions that integrate multi-vendor Commercial Off The Shelf Solutions, custom
device design including software and hardware design.

The system engineering process involves:

 Identifying products and accessories

 Design procure and realize software sub-systems
 Developing system software
 Module integration

 TECHGYAN LABS helps customers and developers save valuable time as it

could be a single source of hardware and software solutions. We provide
expert design support and development services.

 Design Realization

TECHGYAN LABS offers product realization services from idea-to-solution,

concept- to deployment covering various aspects of conceptualization, architecture,
device design, planning implementation, development, application development,
porting and enhancement.

10
 INTRODUCTION OF PROJECT

INTRODUCTION

As technology advances internet is becoming ever popular. Website has become anessential
part. Often website of an institution is used as major requirements to rate it.Thus having a
website is essential for any major organization. As one of the “E COMMERCE” website
plays important role for shooping and essential goods . Notice, research works,club
activities, digital local library etc. can be the major advantages of a website.On this project
we will develop a website for the “E COMMERCE” . On this report almostevery details that
is necessary has been discussed. Although maximum effort has beengiven to estimate events
and expenses. There are some optional features that can beincluded or excluded.
specialist so a third party has been selected to host the website.. But the plus point is we will
get 24/7 support. Cost can be minimized in thissection, but maintenance has been given
priority over cost. Detailed task list and Gantt charts has been included in the appendix to get
clear picture of the project. Every possible disclosures has been made to cover maximum
areas of the project. This report can be amended and changes can be made upon request from
the stake holders. The work will be done by a team with a supervisor from faculty member.
So no profit as been added. Only extra charges for different roles has been added. The senior
web developer is an experienced person with excellent database handling record. A formal
training phase is included in the project to train faculty members and office staffs on how
to handle the website. Overall a useful website can be really helpful for the department

11
 PROBLEM SPECIFICATION:

This problem is assigned to me during my core java training to design an

application on “ E-COMMERCE ” using HTML/CSS ,php,React JS and JavaScript.

PROBLEM DEFINITION:

A Live Server is maintained of information regarding User’s details like Name ,

Phone no.. , Area pincode who have logged in the system with the intention of
Shooping&Surfing

This project works by storing the details of User’s in the database and then enabling the
User’s to choose the items of his/her choice on which he/she wants to take shooping
and Purchase the goods. After purchase the last option is for payment which include
latest Software Unified Payments Interface ,wallet and card .

12
13
 FEASIBILITY STUDY

An initial investigation in a proposal that determines whether an alternative

system is feasible. A proposal summarizing the thinking of the analyst is
presented to the user for review. When approved, the proposal initiates feasibility
study that describes and evaluates candidate systems and provides for the
selection of best system that meets system performance requirements.
To do a feasibility study, we need to consider the economic, technical factors in
system development. First a project team is formed. The team develops system
flowcharts that identify the characteristics of candidate systems, evaluate the
performance of each system, weigh system performance and cost data and select
the best candidate system for the job. The study culminates in a final report to
the management.

INTRODUCTION:

1. Describe and identify characteristics of candidate systems.

2. Determine and evaluate performance and cost effectiveness of each
candidate system.
3. Weigh system performance and cost data.
4. Select the best candidate system.

SUMMARY:

1. A feasibility study is conducted to select the best system that meets

performance requirements. This entails an identification description, an
evaluation of candidate systems, and the selection of the best system for
the job.
2. A statement of constraints, the identification of specific system objectives
and a description of outputs define a system’s required performance. The
analyst is then ready to evaluate the feasibility of candidate systems to
produce these outputs.
3. Three key considerations are involved in feasibility analysis: economic,
technical and behavioural.
4. There are few steps in feasibility study :

14
a. STATEMENT OF CONSTRAINTS: - Constraints are factors that
limit the solution of a problem. Some constraints are identified during the
initial investigation

b. IDENTIFICATION OF SPECIFIC SYSTEM OBJECTIVES:

- Once the constraints are spelled out, the analyst proceeds to identify the
system’s specific performance objectives. They are derived from the
general objectives specified in the project directive at the end of the
initial investigation. The steps are to state the system’s benefits and then
translate them into measurable objectives.

c. DESCRIPTION OF OUTPUTS: - A final step in system

performance definition is describing the output required by the user. An
actual sketch of the format and contents of the reports as well as a
specification of the media used, their frequency, size and numbers of
copies required are prepared at this point

TYPES OF FEASIBLE STUDY :-

i. Legal Feasibility: - Determines whether the proposed system

conflicts with legal requirements, e.g. a data processing system
must comply with the local Data Protection Acts.
ii. Operational Feasibility: -Operational feasibility is a measure
of how well a proposed system solves the problems, and takes
advantage of the opportunities identified during scope definition
and how it satisfies the requirements identified in the
requirements analysis phase of system development.
The operational feasibility assessment focuses on the degree to
which the proposed development projects fits in with the existing
business environment and objectives with regard to development
schedule, delivery date, corporate culture, and existing business
processes.
To ensure success, desired operational outcomes must be imparted
during design and development. These include such design-
dependent parameters such as reliability, maintainability,
supportability, usability, predictability, disposability, sustainability,
affordability and others. These parameters are required to be
considered at the early stages of design if desired operational

15
 behaviors are to be realized. A system design and development
requires appropriate and timely application of engineering and
management efforts to meet the previously mentioned parameters.
A system may serve its intended purpose most effectively when
its technical and operating characteristics are engineered into the
design. Therefore operational feasibility is a critical aspect of
systems engineering that needs to be an integral part of the early
design phases
iii. Economic Feasibility: -The purpose of the economic
feasibility assessment is to determine the positive economic
benefits to the organization that the proposed system will
provide. It includes quantification and identification of all the
benefits expected. This assessment typically involves a cost/
benefits analysis.

iv. Technical Feasibility: -The technical feasibility assessment is

focused on gaining an understanding of the present technical
resources of the organization and their applicability to the
expected needs of the proposed system. It is an evaluation of the
hardware and software and how it meets the need of the
proposed system.

16
 HARDWARE AND SOFTWARE REQUIREMENTS

1. HARDWARE REQUIREMENT:-

 PROCESSOR : Pentium IV processor or Greater

 RAM : 1Giga Byte (GB) or Greater
 HARDDISK : 1.2 Giga Byte (GB) or Greater
 Keyboard & Mouse
 MONITOR : LCD (For Best Result)
 Printer

2. SOFTWARE REQUIREMENTS:-

 Operating System : Windows 2000/ XP /7/8/10/11

 Front-End : HTML/CSS,React JS ,Netbeans ide 8.1&higher
 Back-end : PhP
 Internet connection

17
 DEVELOPMENT ENVIRONMENT

HTML INTRODUCTION

1.The HyperText Markup Language, or HTML is the standard markup language for
documents designed to be displayed in a web browser. It can be assisted by technologies
such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

Web browsers receive HTML documents from a web server or from local storage and render
the documents into multimedia web pages. HTML describes the structure of a web page
semantically and originally included cues for the appearance of the document.

HTML elements are the building blocks of HTML pages. With HTML constructs, images
and other objects such as interactive forms may be embedded into the rendered page. HTML
provides a means to create structured documents by denoting structural semantics for text
such as headings, paragraphs, lists, links, quotes and other items. HTML elements are
delineated by tags, written using angle brackets. Tags such as <img /> and <input /> directly
introduce content into the page. Other tags such as <p> surround and provide information
about document text and may include other tags as sub-elements. Browsers do not display
the HTML tags, but use them to interpret the content of the page.

HTML can embed programs written in a scripting language such as JavaScript, which affects
the behavior and content of web pages. Inclusion of CSS defines the look and layout of
content. The World Wide Web Consortium (W3C), former maintainer of the HTML and
current maintainer of the CSS standards, has encouraged the use of CSS over explicit
presentational HTML since 1997.[2] A form of HTML, known as HTML5, is used to display
video and audio, primarily using the <canvas> element, in collaboration with javascript.

18
 INTRODUCTION TO JAVA

 Java is an object oriented programming language originally developed by

Sun Microsystems and released in 1995.

 Java was originally developed by James Gosling at Sun Microsystems

(which has since merge into Oracle Corporation).

 Java programs are platform independent which means they can be run on
any operating system with any type of processor as long as the Java
interpreter is available on that system.

 Java code that runs on one platform does not need to be recompiled to
run on another platform, it’s called “write once, run anywhere” (WORA).

 Java virtual machine (JVM) executes Java code, but is written in platform
specific languages such as C/C++/ASM etc. JVM is not written in Java
and hence cannot be platform independent and Java interpreter is actually
a part of JVM.

USES OF JAVA

Earlier, java was only used to design and program small computing devices but
later adopted as one of the platform independent programming language and
now according to Sun, 3 billion devices run java. Java is one of the most
important programming language in today’s IT industries.

19
 JSP – Java is used to create web applications like PHP and ASP,
JSP(Java Server Pages) used with normal HTML tags, which helps to
create dynamic web pages.

 Applets – This is another type of Java program that used within a

web page to add many new features to a web browser.

 J2EE – The software Java 2 Enterprise Edition are used by various

companies to transfer data based on XML structured documents
between one another.

20
  JavaBeans – This is something like Visual Basic, a reusable software
component that can be easily assemble to create some new and
advanced application.

 Mobile – Besides the above technology, Java is also used in mobile

devices, many kind of games and services built in Java. Today, all
leading mobile service provider like Nokia, Siemens, Vodafone are
using Java technology.

Types of Java Applications

 Web Application Java is used to create server side web

applications. Currently, servlet, jsp, struts, jsfetc technologies are
used.

 Standalone Application It is also known as desktop application or

window-based application. An application that we need to install on
every machine or server such as media player, antivirus etc. AWT
and Swing are used in java for creating standalone applications.

 Enterprise Application An application that is distributed in nature,

such as banking applications etc. It has the advantage of high level
security, load balancing and clustering. In java, EJB is used for
creating enterprise applications.

 Mobile Application Java is used to create application software for mobile

devices. Currently Java ME is used for creating applications for small
devices, and also Java is programming language for Google Android
application development.

Facts about Java

 Object Oriented – In java everything is an Object. Java can be easily

expanded since it is based on the Object model.

 Platform independent – C and C++ are platform dependency languages

hence the application programs written in one Operating system cannot
run in any other Operating system, but in platform independence language
like Java application programs written in one Operating system can able
to run on any Operating system.

 Simple – Java is designed to be easy to learn. If you understand the

basic concept of OOP java would be easy to master.

21
  Secure – With Java’s secure feature it enables to develop virus-free,
tamper-free systems. Authentication techniques are based on publickey
encryption.

 Architectural neutral – Java compiler generates an architectureneutral

object file format which makes the compiled code to be executable on
many processors, with the presence Java runtime system. Portable – being
architectural neutral and having no implementation dependent aspects of
the specification makes Java portable. Compiler and Java is written in
ANSI C with a clean portability boundary which is a POSIX subset.

 Robust – Java makes an effort to eliminate error prone situations by

emphasizing mainly on compile time error checking and runtime checking.

 Multithreaded – With Java’s multithreaded feature it is possible to write

programs that can do many tasks simultaneously. This design feature
allows developers to construct smoothly running interactive applications.

 Interpreted – Java byte code is translated on the fly to native machine

instructions and is not stored anywhere. The development process is more
rapid and analytical since the linking is an incremental and light weight
process.

 High Performance – With the use of Just-In-Time compilers Java enables

high performance.

 Distributed – Java is designed for the distributed environment of the

internet.

 Dynamic – Java is considered to be more dynamic than C or C++ since

it is designed to adapt to an evolving environment. Java programs can
carry an extensive amount of runtime information that can be used to
verify and resolve accesses to objects on runtime.

Different Editions of Java Technology

 Java SE – Java SE or Java Standard Edition provides tools and API’s

that you can use to create server applications, desktop applications, and
even applets. These programs developed using Java SE can be run on
almost every popular operating system, including Linux, Macintosh,
Solaris, and Windows.

 JEE – Based on the foundation framework of the standard edition,

Java Enterprise Edition helps in web application service, component
model and enterprise class service oriented architecture (SOA).

22
  JME – Java Micro Edition or JME for short is an accumulation of
Java APIs that are used for the development of software for devices
like mobile phones, PDAs, TV settop boxes, game programming. The
platform of micro edition generally consists of an easy user interface,
a robust security model and a wide variety of builtin networks for
running Java based application.

Popular Java Editors

To write your java programs you will need a text editor. There are even more
sophisticated IDE available in the market. But for now, you can consider one of
the following:
 Notepad – On Windows machine you can use any simple text editor
like Notepad (Recommended for this tutorial), TextPad.
 Netbeans – is a Java IDE that is open source and free which can be
downloaded from www.netbeans.org/index.html
 Eclipse – is also a java IDE developed by the eclipse open source
community and can be downloaded from http://www.eclipse.org/

23
 INTRODUCTION TO ReactJS

React (also known as React.js or ReactJS) is a free and open-source front-end JavaScript
library[3] for building user interfaces based on UI components. It is maintained by Meta
(formerly Facebook) and a community of individual developers and companies.[4][5][6]
React can be used as a base in the development of single-page or mobile applications.
However, React is only concerned with state management and rendering that state to the
DOM, so creating React applications usually requires the use of additional libraries for
routing, as well as certain client-side functionality.[7]

React Native

React has native libraries that were announced by Facebook in 2015, which provides the
react architecture to native applications like IOS, Android and UPD.

React-native is a mobile apps building framework using only Javascript. It uses the same
design as React, letting you utilize/include a rich mobile UI library/ declarative components.
It uses the same fundamental UI building blocks as regular iOS and Android apps. The best
part of using react-native is to allow/adopt components written in Objective-C, Java, or
Swift.

React JS

Single-Way data flow

In React, a set of immutable values are passed to the components renderer as properties in its
HTML tags. The component cannot directly modify any properties but can pass a call back
function with the help of which we can do modifications. This complete process is known as
“properties flow down; actions flow up”.

24
React JS

Virtual Document Object Model

React creates an in-memory data structure cache which computes the changes made and then
updates the browser. This allows a special feature that enables the programmer to code as if
the whole page is rendered on each change whereas react library only renders components
that actually change.

React JS
(Source-https://goo.gl/L7NiIT)

Why React?

Now, the main question arises in front of us is why one should use React. There are so many
open-source platforms for making the front-end web application development easier, like
Angular. Let us take a quick look on the benefits of React over other competitive
technologies or frameworks. With the front-end world-changing on a daily basis, it’s hard to
devote time to learning a new framework – especially when that framework could ultimately
become a dead end. So, if you're looking for the next best thing but you're feeling a little bit
lost in the framework jungle, I suggest checking out React.

1. Simplicity

ReactJS is just simpler to grasp right away. The component-based approach, well-defined
lifecycle, and use of just plain JavaScript make React very simple to learn, build a
professional web (and mobile applications), and support it. React uses a special syntax called
JSX which allows you to mix HTML with JavaScript. This is not a requirement; Developer
can still write in plain JavaScript but JSX is much easier to use.

2. Easy to learn

Anyone with a basic previous knowledge in programming can easily understand React while
Angular and Ember are referred to as ‘Domain-specific Language’, implying that it is
difficult to learn them. To react, you just need basic knowledge of CSS and HTML.

3. Native Approach

React can be used to create mobile applications (React Native). And React is a diehard fan of
reusability, meaning extensive code reusability is supported. So at the same time, we can
make IOS, Android and Web applications.

4. Data Binding

React uses one-way data binding and an application architecture called Flux controls the
flow of data to components through one control point – the dispatcher. It's easier to debug
self-contained components of large ReactJS apps.

25
5. Performance

React does not offer any concept of a built-in container for dependency. You can use
Browserify, Require JS, EcmaScript 6 modules which we can use via Babel, ReactJS-di to
inject dependencies automatically.

6. Testability

ReactJS applications are super easy to test. React views can be treated as functions of the
state, so we can manipulate with the state we pass to the ReactJS view and take a look at the
output and triggered actions, events, functions, etc.

26
 SCREENSHOTS

1.WEBSITE DESIGN

27
2.LATEST PRODUCTS

28
3.ABOUT THE ORGANISATION

29
 4.BEST DEALS

5.REASNOBLE PRICE

30
SOURCE CODE
31
 USING VS CODE APPLICATION

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'Poppins', sans-serif;
background-color: #000;
}
html{
scroll-behavior: smooth;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}

p{
color: #555;
}

nav{
display: flex;
justify-content: space-between;
align-items: center;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 1.5px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS',
sans-serif;
position: fixed;
top: 0;
left: 0;
box-sizing: border-box;
width: 100%;
padding: 20px 50px;
background-color:#b228e9;
box-shadow: 2px 2px 12px rgba(0,0,0,0.05);
z-index: 1;
}

32
.menu{
display: flex;
}
.menu li a{
padding: 10px 15px;
color: #f4f6ff;
font-size: 15px;
}
.logo{
font-size: 25px;
font-weight: bold;
color: #f8f0ff;
font-family: 'Fredoka One', cursive;
}
.menu li a:hover,.menu li a.active{
background-color: #292929;
color: #FFFFFF !important;
font-weight: 800;
outline: none;
border-radius: 20px;
transition: all ease 0.5s;

/*--------------------- body elements css-------------------------- */

.container{
max-width: 1300px;
margin: auto;
padding-left: 25px;
padding-right: 25px;
}
.row{
display:flex ;
align-items: center;
flex-wrap: wrap;
justify-content: space-around;
}

33
.col-2{
flex-basis: 50%;
min-width: 300px;
padding-left: 4rem;

}
.col-2 img{
max-width: 100%;
padding: 50px 0;
}
.col-2 h1{
font-size: 50px;
line-height: 60px;
margin: 25px 0;
}
.btn{
display: inline-block;
background: #8a2dc9;
color: white;
padding: 8px 30px;
margin: 30px 0;
border-radius:40px ;
transition: background 0.5s;
text-decoration: none;
border: none;

.header{
background: radial-gradient(#fff,#b070db);
}
.header .row{
margin-top: 70px;
}
.btn:hover{
background: #0c98e9;
}
.categories{
margin: 70px 0;

}
.col-3{
flex-basis: 30%;
min-width: 250px;
34
 margin-bottom: 30px;

}
.col-3 img{
width: 100%;
box-shadow: 0 1.2rem 3rem 0.5rem rgb(175, 6, 253);
}
.media{
display: none;
}
.small-container{

max-width: 1080px;
margin: auto;
padding-left: 25px;
padding-right: 25px;
}
.col-4{
flex-basis: 25%;
padding: 10px;
min-width: 200px;
margin-bottom: 50px;
transition: transform 0.5s;

}
.col-4 img{
width: 100%;
box-shadow: 10px 10px 8px rgb(175, 6, 253);
}
.title{
text-align: center;
margin: 0 auto 80px;
position: relative;
line-height: 60px;
color: #555;
}
.title::after{
content: '';
background: #8a2dc9;;
width: 80px;
height: 5px;
border-radius: 5px;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
35
}
h4{
color: #555;
font-weight: normal;

}
.col-4 p{
font-size: 14px;
}
.rating .fa{
color: #8a2dc9;;
}

.col-4:hover > button

{
transform:translateY(-8px) ;

}
.col-4:hover > button{
display:block;
width: 50%;
background-color: #8a2dc9;;
cursor: pointer;
text-align: center;
border-radius: 40px;
text-decoration: none;
outline: none;
font-weight: bold;
transform: translatex(40%);
padding: 10px;

.col-4 button{

display: none;

}
.col-4 button:hover{

36
 background-color: #000;
color:white;

/* --------offer css------------------- */

.offer{
background: radial-gradient(#fff,#723bf1);
margin-top: 80px;
padding: 30px 0;
}
.col-2 .offer-img{
padding: 50px;

}
small{
color: #555;
}

/* -------------------testimonial css----------------------- */

.testimonial{
padding: 100px;
}
.testimonial .col-3{
text-align: center;
padding: 40px 20px;
box-shadow: 0 0 20px 0px rgba(0,0,0,0.1);
cursor: pointer;
transition: transform 0.5s;
}
.testimonial .col-3 img{
width: 50px;
margin-top: 20px;
border-radius: 50%;

}
.testimonial .col-3:hover{
transform: translateY(-10px);
}
.fa.fa-quote-left{
font-size: 34px;
color: #8a2dc9;;
37
}
.col-3{
font-size: 12px;
margin: 12px 0;
color: #777;

}
.testimonial .col-3 h3{
font-weight: 600;
color: #555;
font-size: 16px;
}

.brands{
margin: 100px auto;
}
.col-5 {
width: 160px;
}
.col-5 img{
width: 100%;
cursor: pointer;
filter: grayscale(100%);

}
.col-5 img:hover{
filter: grayscale(0);
}

/* --------footer css------------------- */

.footer{
background: rgb(0, 0, 0);
color: #8a8a8a;
font-size: 14px;
padding: 60px 0 20px;
}

.footer p{
color: #8a8a8a;

}
.footer h3{
color: #fff;
margin-bottom: 20px;
38
}
.footer-col-1,.footer-col-2,.footer-col-3,.footer-col-4,.footer-col-5{
min-width: 250px;
margin-bottom: 20px;
}
.footer-col-1{
flex-basis: 30%;
}
.footer-col-2{
flex:1;
text-align: center;
}
.footer-col-2 img{
width: 180px;
margin-bottom: 20px;

}
.footer-col-3,.footer-col-4,.footer-col-5{
flex-basis: 12%;
text-align: center;

}
.email-box{
height:40px;
display: flex;
justify-content: center;
}
.email-box img{

width:"20px";
height:"20px";
}
.box,.button{
border: none;
outline: none;

}
.box{

width:0px;
transition: 0.6s;

}
.email-box:hover>.box,.box:focus{
width: 260px;
39
 padding: 0 10px;
border-radius: 20px;
}
.button{
background-color: #555;
color: white;
padding: 0 10px;
text-transform: uppercase;
cursor: pointer;
border-radius:20px
}
.button:hover{
background: #0c98e9;
}

ul{
list-style: none;
}
.app-logo{
margin-top: 20px;

}
.app-logo img{
width: 140px;
}
.footer hr{
border:none;
background: #b5b5b5;
height: 1px;
margin: 20px 0;

.copyright{
text-align: center;
}
.menu-icon{
width: 28px;
margin-left: 20px;
display: none;

/* ----------media queries------------ */
40
@media only screen and (max-width:800px){
nav ul{
position: absolute;
top: 70px;
left: 0;
background: rgb(150, 44, 250);
width:100% ;
overflow: hidden;
transition:max-height 0.5s ;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

}
nav ul li{
display: block;
margin-right: 50px;
margin-top:10px ;
margin-bottom: 10px;
}
nav ul li a{
color: #fff;
}
.menu-icon{
display: block;
cursor: pointer;
}
nav .cart{
display: none;
}
.media{
display: block;
}

41
}

@media only screen and (max-width:600px){

nav .cart{
display: none;
}
.row{
text-align: center;
}
.col-2,.col-3,.col-4{
flex-basis: 100%;
}

TESTING AND IMPLEMENTATION

42
TESTING:-

Testing is the process of exercising software with the intent of finding errors and
ultimately correcting them. The following testing techniques have been used to
make this project free of errors.

Content Review

The whole content of the project has been reviewed thoroughly to uncover
typographical errors, grammatical error and ambiguous sentences.

Navigation Errors

Different users were allowed to navigate through the project to uncover the
navigation errors. The views of the user regarding the navigation flexibility and
user friendliness were taken into account and implemented in the project.

Unit Testing

Focuses on individual software units, groups of related units.

 Unit – smallest testable piece of software.
 A unit can be compiled /assembled / linked/loaded; and put under a test
harness.
 Unit testing done to show that the unit does not satisfy the application and
/or its implemented software does not match the intended designed structure.

Integration Testing

Focuses on combining units to evaluate the interaction among them

 Integration is the process of aggregating components to create larger
components.
 Integration testing done to show that even though components were
individually satisfactory, the combination is incorrect and inconsistent.

System testing

Focuses on a complete integrated system to evaluate compliance with specified

requirements (test characteristics that are only present when entire system is run)
 A system is a big component.
 System testing is aimed at revealing bugs that cannot be attributed to a
component as such, to inconsistencies between components or planned
interactions between components.

43
 Concern: issues, behaviors that can only be exposed by testing the entire
integrated system (e.g., performance, security, recovery)each form encapsulates
(labels, texts, grid etc.). Hence in case of project in V.B. form are the basic
units. Each form is tested thoroughly in term of calculation, display etc.

Regression Testing

Each time a new form is added to the project the whole project is tested
thoroughly to rectify any side effects. That might have occurred due to the
addition of the new form. Thus regression testing has been performed.

White-Box testing

White-box testing (also known as clear box testing, glass box testing, transparent
box testing and structural testing) tests internal structures or workings of a
program, as opposed to the functionality exposed to the end-user. In white-box
testing an internal perspective of the system, as well as programming skills, are
used to design test cases. The tester chooses inputs to exercise paths through the
code and determine the appropriate outputs.

This is analogous to testing nodes in a circuit, e.g. in-circuit testing (ICT).

While white-box testing can be applied at the unit, integration and system levels
of the software testing process, it is usually done at the unit level. It can test
paths within a unit, paths between units during integration, and between
subsystems during a system–level test. Though this method of test design can
uncover many errors or problems, it might not detect unimplemented parts of the
specification or missing requirements.

Techniques used in white-box testing include:

API testing (application programming interface) – testing of the application

using public and private APIs

Code coverage – creating tests to satisfy some criteria of code coverage (e.g.,
the test designer can create tests to cause all statements in the program to be
executed at least once)

Fault injection methods – intentionally introducing faults to gauge the efficacy

of testing strategies

44
Code coverage tools can evaluate the completeness of a test suite that was
created with any method, including black-box testing. This allows the software
team to examine parts of a system that are rarely tested and ensures that the
most important function points have been tested. Code coverage as a software
metric can be reported as a percentage for:
Function coverage, which reports on functions executed
Statement coverage, which reports on the number of lines executed to complete
the test
100% statement coverage ensures that all code paths, or branches (in terms of
control flow) are executed at least once. This is helpful in ensuring correct
functionality, but not sufficient since the same code may process different inputs
correctly or incorrectly.

Black-box testing

Black-box testing treats the software as a "black box", examining functionality

without any knowledge of internal implementation. The tester is only aware of
what the software is supposed to do, not how it does it. Black-box testing
methods include: equivalence partitioning, boundary value analysis, all-pairs
testing, state transition tables, decision table testing, fuzz testing, model-based
testing, use case testing, exploratory testing and specification-based testing.
Specification-based testing aims to test the functionality of software according to
the applicable requirements. This level of testing usually requires thorough test
cases to be provided to the tester, who then can simply verify that for a given
input, the output value (or behaviour), either "is" or "is not" the same as the
expected value specified in the test case. Test cases are built around
specifications and requirements, i.e., what the application is supposed to do. It
uses external descriptions of the software, including specifications, requirements,
and designs to derive test cases. These tests can be functional or non-functional,
though usually functional.

Specification-based testing may be necessary to assure correct functionality, but it

is insufficient to guard against complex or high-risk situations.
One advantage of the black box technique is that no programming knowledge is
required. Whatever biases the programmers may have had, the tester likely has a
different set and may emphasize different areas of functionality. On the other
hand, black-box testing has been said to be "like a walk in a dark labyrinth
without a flashlight." Because they do not examine the source code, there are
situations when a tester writes many test cases to check something that could
have been tested by only one test case, or leaves some parts of the program
untested.
This method of test can be applied to all levels of software testing: unit,
integration, system and acceptance. It typically comprises most if not all testing
at higher levels, but can also dominate unit testing as well.

45
Alpha Testing

Alpha testing is simulated or actual operational testing by potential

users/customers or an independent test team at the developers' site. Alpha testing
is often employed for off-the-shelf software as a form of internal acceptance
testing, before the software goes to beta testing.
Beta Testing

Beta testing comes after alpha testing and can be considered a form of external
user acceptance testing. Versions of the software, known as beta versions, are
released to a limited audience outside of the programming team. The software is
released to groups of people so that further testing can ensure the product has
few faults or bugs. Sometimes, beta versions are made available to the open
public to increase the feedback field to a maximal number of future users.

46
 CONCLUSION

The project “WEB DEVELEOPMENT” aims to simplify the process of testing or

evaluating the website’s performance by computerizing it and making it user friendly.
This project makes the whole process automated as user just need to enter few details in
this to get started and then he can choose the any goods of his choice on which he want to
place order so as and enhance his performance.
This project cover very much every function needed by user in supermarket management
system.

47
 BIBLIOGRAPHY

1. The complete reference, Java 2, 5th edition by Herbert Schildt.

2. www.javatpoint.com/java

3. www.google.co.in

4. HTML/CSS REACTJS.

48