Sugg Life Online Shopping Portal: Contents of Report

SUGG LIFE ONLINE SHOPPING PORTAL
Contents of Report-
 Abstract
 Index
 Chapter I - Introduction
 Chapter II- System Analysis
 Chapter III- Feasibility Report
 Chapter IV-Requirement Specification
 Chapter V- System Design
 Chapter VI- System Testing
 Chapter VII- Conclusion
 Chapter VIII- Appendix
 Chapter IX- Bibliography
1|Page
Abstract-
This is a small scale project for basic shopping portal. The basic idea is that customers can
buy products using online. The administrator can enter the name and password and can create an
account and then generate the receipt of the products purchased.
The shopping portal enables vendors to set up online shops, customers to browse through
the shops, and a system administrator to approve and reject requests for new shops and maintain
lists of shop categories. Also on the agenda is designing an online shopping site to manage the
items in the shop and also help customers purchase them online without having to visit the shop
physically. Our online shopping mall will use the internet as the sole method for selling goods to
its consumers. Shopping will be highly personalized and the mall will provide lower prices than
most competitors.
It’s an online store that enables website owners to sell their product online. It is a web
shopping cart that web enables the day to day sales functions. It includes product and customer
management modules. This website will be useful to anyone who wants to purchase items using
internet.
Shopping cart is a very important feature used in e-commerce to assist people

making purchases online, similar to the US English term ‘shopping cart’. The
business-to-consumer aspect of electronic commerce (e-commerce) is the most visible
business use of the World Wide Web. The primary goal of an e-commerce site is to
sell goods and services online. E-commerce is fast gaining ground as an accepted and
used business paradigm. More and more business houses are implementing web site
providing functionality for performing commercial transactions over the web. It is
reasonable to say that the process of shopping on the web is becoming common place.
2|Page
INDEX –
CHAPTER TOPIC PAGE NO.
NO.
1.0 INTRODUCTION
1.1 ORGANIZATION PROFILE
1.2 PURPOSE OF THE PROJECT
1.3 PROBLEMS IN EXISTING SYSTEM
1.4 SOLUTION OF THESE PROBLEMS
2.0 SYSTEM ANALYSIS
2.1 INTRODUCTION
2.2 ANALYSIS MODEL
2.3 STUDY OF THE SYSTEM
2.4 STUDY OF THE PROBLEM
2.5 PROJECT SCOPE
2.6 OBJECTIVES
2.7 PROPOSED SYSTEM
3.0 FEASIBILITY REPORT
3.1 TECHNICAL FEASIBILITY
3.2 OPERATIONAL FEASIBILITY
3.3 ECONOMIC FEASIBILITY
3|Page
4.0 REQUIREMENT SPECIFICATIONS
4.1 HARDWARE REQUIREMENT
4.2 SOFTWARE REQUIREMENT
4.3 SOFTWARE FEATURES
5.0 SYSTEM DESIGN
5.1 INTRODUCTION
5.2 INPUT AND OUTPUT DESIGN
5.3 SYSTEM WORKFLOW
5.4 CAD
5.5 DATA FLOW DIAGRAM
6.0 SYSTEM TESTING
7.0 CONCLUSION
7.1 FUTURE ENHANCEMENT
8.0 APPENDIX
8.1 SAMPLE CODE
8.2 SCREEN SHOT
9.0 BIBLIOGRAPHY
4|Page
CHAPTER – I
1. INTRODUCTION -
The aim of this project is on the online shopping application it is developed using HTML5
and CSS. The application is very useful where the buyer can directly buy the products from home via
internet on mobile or system. The application reduces lot of work load for customer as well as
owner. The transaction of money is completed in real time system. Some of the online shops are
E-bay, Amazon. By this online shopping the product is directly delivered to customer home.
Online shopping is the process consumers go through to purchase products or services over
the internet. An online shop, e-shopping, e-store, internet shop, web shop, web store, online store,
or virtual store evokes the physical analogy of buying products or services at a bricks-and-
mortar retailer or in a mall. The metaphor of an online catalog is also used, by analogy with mail
order catalogs. All types of stores have retail web sites, including those that do and do not also
have physical storefronts and paper catalogs. Online shopping is a type of electronic commerce
used for business-to-business(B2B) and business-to-consumer (B2C) transactions. The term Web
shop also refers to a place of business where web development, web hosting and other types of
web related activities takes place (Web refers to the WWW and “shop” has a colloquial meaning
used to describe the place where one’s occupation is carried out).
1.1 ORGANIZATION PROFILE-

Sugg Life online shopping portal is an IT solution provider for a dynamic environment
where business and technology strategies converge. Their approach focuses on new ways of
business combining IT innovation and adoption while also leveraging an organization’s current IT
assets. Their work with large global corporations and new products or services and to implement
prudent business and technology strategies in today’s environment.
5|Page
SUGG LIFE’S RANGE OF EXPERTISE INCLUDES-
 Software Development Services

 Engineering Services
 Systems Integration
 Customer Relationship Management
 Product Development
 Electronic Commerce
 Consulting
 IT Outsourcing.
We apply technology with innovation and responsibility to achieve two broad objectives:
 Effectively address the business issues our customers face today.
 Generate new opportunities that will help them stay ahead in the future.
1.2 PURPOSE OF THE PROJECT-

The Shopping Cart needs to sell different types of products to customer living in any part
of the world. The website will show all products in categorized manner. Customer can browse any
product for its price and other details and can order the product. Orders needs to accompany with
shipping & billing details. Customer has to pay order amount online through credit cards.
Products can be managed by operators from admin panel. Operator can be created by
admin. Admin can keep track of orders through admin panel. The main purpose of the
system is to enable customers to browse and order from any part of the world and
hence increasing business scope.
6|Page
1.3 PROBLEM IN EXISTING SYSTEM-
The existing system is manual system. Needs to be converted into automated system.
 Risk of mismanagement of data.
 Less Security.
 No proper coordination between different Applications and Users.
 Fewer Users - Friendly.
 Accuracy not guaranteed.
 Not in reach of distant users.
1.4 SOLUTION OF THESE PROBLEMS-

The development of the new system contains the following activities, which try to automate the
entire process keeping in view of the database integration approach.
1. User friendliness is provided in the application with various controls.
2. The system makes the overall project management much easier and flexible.
3. There is no risk of data mismanagement at any level while the project development is
under process.
4. It provides high level of security with different level of authentication.
5. Users from any part of the world can make use of the system.
6. New system will process accurate results.
7. New system will be much better in performance as compared to existing one.
7|Page
CHAPTER - II
SYSTEM ANALYSIS –
2.1 INTRODUCTION
After analyzing the requirements of the task to be performed, the next step is to analyze the
problem and understand its context. The first activity in the phase is studying the
e x i s t i n g s ys t e m a n d o t h e r i s t o u n d e r s t a n d t h e r e q u i r e m e n t s a n d d o m a i n o f
t h e n e w system. Both the activities are equally important, but the first activity serves
as a basis of giving the functional specifications and then successful design of the proposed
system. Understanding the properties and requirements of a new system is more
difficult and requires creative thinking and understanding of existing running
system is also difficult, improper understanding of present system can lead diversion from
solution.
2.2 ANALYSIS MODE

The model that is basically being followed is the WATER FALL MODEL, which states that the
phases are organized in a linear order. First of all, the feasibility study is done. Once
that part is over the requirement analysis and project planning begins. If system exists
one and modification and addition of new module is needed, analysis of present system
can be used as basic model. The design starts after the requirement analysis is complete and the
coding begins after the design is complete. Once the programming is completed, the testing is
done. In this model the sequence of activities performed in a software development project are: -
 Requirement Analysis
 Project Planning
 System design
 Detail design
 Coding
 Unit testing
8|Page
System integration & testing H e r e t h e l i n e a r o r d e r i n g o f t h e s e a c t i v i t i e s i s c r i t i c a l .
End of the phase and the o u t p u t o f o n e p h a s e i s t h e i n p u t o f o t h e r
p h a s e . T h e o u t p u t o f e a c h p h a s e i s t o b e consistent with the overall
requirement of the system. Some of the qualities of spiral
model are also incorporated like after the people concerned with the
project review completion of each of the phase the work done.
WATER FALLMODEL was being chosen because all requirements were kn
ownbeforehand and the objective of our software development is thecomp
u t e r i z a t i o n / a u t o m a t i o n o f a n a l r e a d y e x i s t i n g m a n u a l w o r k i n g s ys t e m .
2.3 STUDY OF SYSTEM

In the flexibilit y of the uses the interface has been developed a graphics
c o n c e p t i n m i n d , associated through a browser interface. The GUI’S at the top level have
been categorized as
1.Administrative user interface

2.The operational or generic user interface.
9|Page
The administrative user interface concentrates on the consistent information that is
practically, part of the organizational activities and which needs proper authentication for the
data collection. The interfaces help the administrations with all the transactional states like Data
insertion, Data deletion and Date updating along with the extensive data search capabilities.
T h e o p e r a t i o n a l o r g e n e r i c u s e r i n t e r f a c e h e l p s t h e u s e r s u p o n t h e s ys t e m
t r a n s a c t i o n s through the existing data and required services. The operational user
interface also helps the ordinary users in managing their own information helps the ordinary
users in managing their own information in a customized manner as per the assisted flexibilities.
NUMBER OF MODULES
The system after careful analysis has been identified to be presented with the following modules:
This project is divided into 9 modules:1. Registration Module2. Products Browse Module3.
Products Search Module4. Shopping cart Module5. Shipping & Billing Module6. Payment
Module7. Admin User Management Module8. Admin Catalog Management Module9. Admin
Order Management Module
Entities Involved in the Project:

1)Customer
2)Product
3)Website Administrator
4)Operator
5)Order
2.4. STUDY OF THE PROBLEM

The current shopping system is critical to set up online shops, customers to browse through
the shops, and a system administrator to approve and reject requests for new shops and maintain
lists of shop categories. This is a small scale project for online shopping system. The basic idea is
that the candidates can buy product from anywhere during any time by using their card number
and password provided to them. The database will maintain the product details information.
Customer can view their product details using the card details. This online shopping system
involves with two types of users.
10 | P a g e
 CUSTOMERS
 ADMINISTRATOR
CUSTOMERS ROLE –
The customers can login to the system. He / She can view his / her product details and buy
their products. The customer can just view the information whereas he / she could not make
changes in the database.
ADMINISTRATOR ROLE –
The administrator plays a vital role in the online shopping system. The administrator
controls the entire database. The report of the product is generated by the administrator itself. The
main role of the administrator is to safe guard the database and can add / delete the products from
the database.
2.5. PROJECT SCOPE

The supplementary specification applies to online shopping system. This specification
defines the non-functional requirement of the system such as:
Functionality:
Since it stands alone application, one or more user may use it at a time.
Usability:
Software Required-
 Desktop interface
 Windows 98/2000/XP/7/8/10
 Sublime Text 3.ink
11 | P a g e
Technology:
 Front End: HTML, CSS
 Back End:
Hardware Required-
 PIV 2.8 GHz Processor and Above

 RAM 512MB and Above
 HDD 20 GB Hard Disk Space and Above
2.6 Objectives-
The purpose of this document is to define the requirements of online shopping system. This
supplementary specification lists the requirements that are not readily captured in the use case
model. Supplementary specification and the use case model captured a complete set of requirement
of the system.
2.7 Proposed System-

To debug the existing system, remove procedures those cause data redundancy,
make navigational sequence proper. To provide information about audits on different level and
also to reflect the current work status depending on organization/auditor or date. Required to build
strong password mechanism.
12 | P a g e
CHAPTER - III
3.0 FEASIBILITY STUDY-
Preliminary investigation examines project feasibility; the likelihood the system will be useful
to the organization. The main objective of the feasibility study is to test the technical,
Operational and Economical feasibility for adding new modules and debugging old r u n n i n g
s ys t e m . A l l s ys t e m i s f e a s i b l e i f t h e y a r e u n l i m i t e d r e s o u r c e s a n d i n f i n i t e
time. There are aspects in the feasibility study portion of the preliminary investigation:
 Technical Feasibility
 Operation Feasibility
 Economic Feasibility
3.1 TECHNICAL FEASIBILITY-
 Does the necessary technology exist to do what is suggested?

 Do the proposed equipment’s have the technical capacity to hold the data required to use
the new system?
 Will the proposed system provide adequate response to inquiries, regardless of the
number or location of users?
 Can the system be upgraded if developed?
 Are there technical guarantees of accuracy, reliability, ease of access and data security?
13 | P a g e
3.2 OPERATIONAL FEASIBILITY-
 Is there sufficient support for the management from the users?

 Will the system be used and work properly if it is being developed and implemented?
 Will there be any resistance from the user that will undermine the possible application
benefits?
3.3 ECONOMIC FEASIBILITY-
A system can be developed technically and that will be used if installed must still be
a good investment for the organization. In the economic feasibility, the development cost in
creating the system is evaluated against the ultimate benefit derived from the new
systems. Financial benefits must equal or exceed the costs.
14 | P a g e
CHAPTER – IV
4.0 REQUIREMENT SPECIFICATION

Purpose:
The main purpose for preparing this document is to give a general insight into the
analysis and requirements of the existing system or situation and for determining
the operating characteristics of the system.
Scope:
This Document plays a vital role in the development life cycle (SDLC) and it describes the
complete requirement of the system. It is meant for use by the developers and will be the basic
during testing phase. Any changes made to the requirements in the future
w i l l h a v e t o g o through formal change approval process.
4.3 SOFTWARE FEATURES-
Hypertext Markup Language (HTML) is the standard markup language for creating web
pages and web applications. It is the set of markup symbols or codes inserted in a file intended for
display on a World Wide Web browser page. The markup tells the Web browser how to display a
Web page's words and images for the user. Each individual markup code is referred to as an
element (but many people also refer to it as a tag). Some elements come in pairs that indicate when
some display effect is to begin and when it is to end.
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.
15 | P a g e
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), maintainer of both the HTML and the CSS
standards, has encouraged the use of CSS over explicit presentational HTML since 1997.
HTML documents imply a structure of nested HTML elements. These are indicated in the
document by HTML tags, enclosed in angle brackets.
HTML defines several data types for element content, such as script data and stylesheet
data, and a plethora of types for attribute values, including IDs, names, URIs, numbers, units of
length, languages, media descriptors, colors, character encodings, dates and times, and so on. All
of these data types are specializations of character data.
Cascading Style Sheet (CSS) is a Web page derived from multiple sources with a defined
order of precedence where the definitions of any style element conflict. The Cascading Style Sheet,
level 1 (CSS1) recommendation from the World Wide Web Consortium (W3C), which is
implemented in the latest versions of the Netscape and Microsoft Web browsers, specifies the
possible style sheets or statements that may determine how a given element is presented in a Web
page.CSS gives more control over the appearance of a Web page to the page creator than to the
browser designer or the viewer. With CSS, the sources of style definition for a given document
element are in this order of precedence:
1. The STYLE attribute on an individual element tag
2. The STYLE element that defines a specific style sheet containing style declarations or a LINK
element that links to a separate document containing the STYLE element. In a Web page, the
STYLE element is placed between the TITLE statement and the BODY statement.
3. An imported style sheet, using the CSS @import notation to automatically import and merge
an external style sheet with the current style sheet
4. Style attributes specified by the viewer to the browser
5. The default style sheet assumed by the browser
16 | P a g e
Sublime Text is a proprietary cross-platform source code editor with a Python application
programming interface (API). It natively supports many programming languages and markup
languages, and functions can be added by users with plugins, typically community-built and
maintained under free-software licenses.
The following are key points of Sublime Text:
 "Go to Anything," quick navigation to files, symbols, or lines

 "Command palette" uses adaptive matching for quick keyboard invocation of arbitrary
commands
 Simultaneous editing: simultaneously make the same interactive changes to multiple
selected areas
 Python-based plugin API
 Project-specific preferences
 Extensive customizability via JSON settings files, including project-specific and platform-
specific settings
 Cross-platform (Windows, mac OS, and Linux) and Supportive Plugins for cross-platform.
 Compatible with many language grammars from Text Mate.
The following are important features of Sublime Text:
 Column selection and multi-select editing

 Auto completion
 Syntax highlight and high contrast display
 In-editor code building
 In-editor code building
 Go to anything
17 | P a g e
CHAPTER – V
5.0 SYSTEM DESIGN

5.1 INTRODUCTION
Software design sits at the technical kernel of the software engineering process
and is applied regardless of the development paradigm and area of application. Design
is the first step in the development phase for any engineered product or system. The
designer’s goal is to produce a model or representation of an entity that will later be
built. Beginning, once system requirement has been specified and analyzed, system
design is the first of the three technical activities -design, code and test that is
required to build and verify software.
The importance can be stated with a single word “Quality”. Design is the place
where quality is fostered in software development. Design provides us with
representations of software that can assess for quality. Design is the only way that
we can accurately translate a customer’s view into a finished software product or
system. Software design serves as a foundation for all the software engineering steps
that follow. Without a strong design we risk building an unstable system – one that
will be difficult to test, one whose quality cannot be assessed until the last stage.
5.2 INPUT AND OUTPUT DESIGN
INPUT DESIGN
Input design is a part of overall system design. The main objective during the input design is as
given below:
•To produce a cost-effective method of input.
•To achieve the highest possible level of accuracy.
•To ensure that the input is acceptable and understood by the user.
18 | P a g e
INPUT STAGES:
The main input stages can be listed as below:
•Data recording
•Data transcription
•Data conversion
•Data verification
•Data control
•Data transmission
•Data validation
•Data correction
OUTPUT DESIGN
O u t p u t s f r o m c o m p u t e r s ys t e m s a r e r e q u i r e d p r i m a r i l y t o c o m m u n i c a t e t h e
r e s u l t s o f processing to users. They are also used to provides a permanent copy of
the results for later consultation.
The various types of outputs in general are:
•External Outputs, whose destination is outside the organization.
•Internal Outputs whose destination is within organization and they are the
•User’s main interface with the computer.
•Operational outputs whose use is purely with in the computer department.
•Interface outputs, which involve the user in communicating directly with
OUTPUT DEFINITION
The outputs should be defined in terms of the following points:
•Type of the output
•Content of the output
•Format of the output
•Location of the output
•Frequency of the output
•Volume of the output
•Sequence of the output. It is not always desirable to print or display data as it is held
on a computer. It should be decided as which form of the output is the most suitable.
19 | P a g e
5.3 SYSTEM WORKFLOW
Sugg Life Workflow Diagram
(Logging Via CustID)

|
Product Search/ Listing
|
Selecting a Particular Product
|
Selection through Checkbox---------> Temp order record record
|
Billing/ Shipping Info ----------> Recording Customer's Data
|
Shipping + Product Price Calculated ----> If shipped via 3rd party
then charge is calculated
| from their linked server
Order Confirmation & Accept Order ----> Entry into main

database including
| temp records.
* Delete temp record
CCard/ PayPal/ Offline Pay Process
| | |
----------- ----------- ----------
ViaEmail ViaEmail ViaEmail
----------- ----------- ----------
| | |
Invoice to Seller Charge
Customer Invoice Amount
20 | P a g e
5.4 CAD
The Context Diagram shows the system under consideration as a single high-level process and
then shows the relationship that the system has with other external entities (systems,
organizational groups, external data stores, etc.).
Register
Login
View Gallery
Users
Share feedback Admin
& Experience
Ticket booking
View all user
Add Bus Gallery
Add bus Detaills
User Experience
& Feedback
21 | P a g e
ADMIN Management Log in USER
Reports
Information User
Update Information
ONLINE Update
SHOPPING
PORTAL
Error Error
Feedback Correction
MAINTENANCE &
TECHNICAL
SUPPORT
5.5 DATA FLOW DIAGRAM
A data flow diagram is graphical tool used to describe and analyze movement of data
through a system. These are the central tool and the basis from which the other
components are developed. The transformation of data from input to output through
processed, may be described logically and independently of physical components
associated with the system. These are known as the logical data flow diagrams.
22 | P a g e
23 | P a g e
24 | P a g e
CHAPTER – VI
6.0 SYSTEM TESTING

Software testing is a critical element of software quality assurance and represents the ultimate
review of specifications, design and coding. In fact, testing is the one step in the software
engineering process that could be viewed as destructive rather than constructive.
A strategy for software testing integrates software test case design methods into a well-planned
series of steps that result in the successful constructive of software. Testing is the set of activities
that can be planned in advance and conducted systematically. The underlying motivation of
program testing is to affirm software quality with methods that can economically and effectively
apply both strategic to both large and small-scale systems.
Unit Testing
Unit testing focuses verification effort on the smallest unit of software de
s i g n , t h e module. The unit testing, we have is white box oriented and some modules the steps
are conducted in parallel.
1. WHITE BOX TESTING

This type of testing ensures that-
 All independent paths have been exercised at least once
 All logical decisions have been exercised on their true and false sides
 All loops are executed at their boundaries and within their operational bounds
 All internal data structures have been exercised to assure their validity.
To follow the concept of white box testing we have tested each form. We have
created independently to verify that Data flow is correct. All conditions are
exercised to check their validity. All loops are executed on their boundaries.
25 | P a g e
2. BASIC PATH TESTING
Established technique of flow graph with Cyclamate complexity was used to derive test cases for
all the functions. The main steps in deriving test cases were:
Use the design of the code and draw correspondent flow graph.
Determine the cyclamate complexity of resultant flow graph, using formula:

V(G)=E-N+2 or
V(G)=P+1 or
V(G)=Number of Regions
Where V(G) is Cyclamate complexity,
E is the number of edges,
N is the number of flow graph nodes
P is the number of predicate nodes.
Determine the basis of set of linearly independent paths.
3. CONDITIONAL TESTING
In this part of the testing each of the conditions were tested to both true
a n d f a l s e aspects. And all the resulting paths were tested. So that each path that may be generate
on particular condition is traced to uncover any possible errors.
4. DATA FLOW TESTING

This type of testing selects the path of the program according to the location of definition and
use of variables. This kind of testing was used only when some local variable was
declared. The definition-use chain method was used in this type of testing. These were
particularly useful in nested statements.
26 | P a g e
5. LOOP TESTING
In this type of testing all the loops are tested to all the limits possible. The following exercise
was adopted for all loops:
 All the loops were tested at their limits, just above them and just below them.
 All the loops were skipped at least once.
 For nested loops test the inner most loop first and then work outwards.
 For concatenated loops the values of dependent loops were set with
t h e h e l p o f connected loop.
 Unstructured loops were resolved into nested loops or concatenated loops and tested as
above.
Each unit has been separately tested by the development team itself and all the input have been
validated.
27 | P a g e
CHAPTER – VII
7.0 CONCLUSION
The Internet has become a major resource in modern business, thus electronic shopping has
gained significance not only from the entrepreneur’s but also from the
customer’sp o i n t o f v i e w . F o r t h e e n t r e p r e n e u r , e l e c t r o n i c s h o p p i n g g
e n e r a t e s n e w b u s i n e s s opportunities and for the customer, it makes comparative
shopping possible. As per a survey, most consumers of online stores are impulsive
and usually make a decision to stay on a site within the first few seconds. “Website
design is like a shop interior. If the shop looks poor or like hundreds of other shops the
customer is most likely to skip to the other site. Hence we have designed the project to provide the
user with easy navigation, retrieval of data and necessary feedback as much as possible.
A good shopping cart design must be accompanied with user-

f r i e n d l y s h o p p i n g c a r t application logic. It should be convenient for the customer
to view the contents of their cart and to be able to remove or add items to their cart.
The shopping cart application described in this project provides a number of
features that are designed to make the customer more comfortable.
It also provides knowledge about the latest technology used in developing web
enabled application and client server technology that will be great demand in future.
This will provide better opportunities and guidance in future in developing projects
independently.
28 | P a g e
7.1 FUTURE ENHANCEMENT
 As for other future developments, the following can be done:
 The Administrator of the web site can be given morefunctionality, like looking at a
specific customer’s profile, the books that have to be reordered, etc.
 Multiple Shopping carts can be allowed.
 This System being web-based and an undertaking of Cyber Security Division, needs to be
thoroughly tested to find out any security gaps.
 A console for the data center may be made available to allow the personnel to monitor on
the sites which were cleared for hosting during a particular period.
 Moreover, it is just a beginning; further the system may be utilized in various other types
of auditing operation viz. Network auditing or similar process/workflow based
applications.
29 | P a g e
CHAPTER – VIII
8.0 APPENDIX
8.1SAMPLE CODE
SIGNUP PAGE-
<!DOCTYPE html>
<html>
<style>
body
{
font-family: Arial;
box-sizing: border-box;
background-image: url("backgrnd.jpeg");
}
input[type=text], input[type=password]
{
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus
{
background-color: #ddd;
outline: none;
}
button
{
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
button:hover
{
30 | P a g e
opacity:1;
}
.cancelbtn
{
padding: 14px 20px;
background-color: #f44336;
}
.cancelbtn, .signupbtn
{
float: left;
width: 50%;
}
.container
{
padding: 16px;
}
.modal
{
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
padding-top: 50px;
}
.modal-content
{
background-color: #fefefe;
margin: 0% auto 10% auto;
border: 1px solid #888;
width: 50%;
}
hr
{
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
.close
{
position: fixed;
31 | P a g e
right: 35px;
top: 15px;
font-size: 40px;
font-weight: bold;
color: #f1f1f1;
}
.close:hover,
.close:focus
{
color: #f44336;
cursor: pointer;
}
.clearfix::after
{
content: "";
clear: both;
display: table;
}
@media screen and (max-width: 300px)

{
{
width: 100%;
}
}
</style>
<body>
<a href="login.html"><img src="newacct.png" align="right" style="width: 60px;height:

60px"></a><br><br>
<center><image src="sugg.png" style="width: 500px;height: 500px"></center>
<center><button onclick="document.getElementById('id01').style.display='block'"
style="width:auto;">Sign Up</button></center>
<div id="id01" class="modal">

<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close
Modal">×</span>
<form class="modal-content" action="/action_page.php">
<div class="container">
<h1>Sign Up</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label><b>Email</b></label>
<input type="text" placeholder="Enter Email..." name="email" required>
<label><b>Password</b></label>
32 | P a g e
<input type="password" placeholder="Enter Password..." name="psw" required>
<label><b>Repeat Password</b></label>
<input type="password" placeholder="Repeat Password..." name="psw-repeat" required>
<label>
<input type="checkbox" checked="checked" style="margin-bottom:15px"> Remember me
</label>
<p>By creating an account you agree to our <a href="#" style="color:dodgerblue">Terms &
Privacy</a>.</p>
<div class="clearfix">
<button type="button" onclick="document.getElementById('id01').style.display='none'"
class="cancelbtn">Cancel</button>
<button type="button" class="signupbtn"
onclick="window.location.href='file:///C:/Users/mylap/Desktop/home.html'">Sign Up</button>
</div>
</div>
</form>
</div>
<script>
var modal = document.getElementById('id01');
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<style>
body
{
font-family: Arial;
}
input[type=text], input[type=password]
{
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
33 | P a g e
border: none;
background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus
{
outline: none;
}
button
{
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
button:hover
{
opacity:1;
}
.cancelbtn
{
padding: 14px 20px;
background-color: #f44336;
}
{
float: left;
width: 50%;
}
.container
{
padding: 16px;
}
.modal
{
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
34 | P a g e
width: 100%;
height: 100%;
overflow: auto;
padding-top: 50px;
}
.modal-content
{
background-color: #fefefe;
margin: 0% auto 10% auto;
border: 1px solid #888;
width: 50%;
}
hr
{
border: 1px solid #f1f1f1;
}
.close
{
position: fixed;
right: 35px;
top: 15px;
font-size: 40px;
font-weight: bold;
color: #f1f1f1;
}
.close:hover,
.close:focus
{
color: #f44336;
cursor: pointer;
}
.clearfix::after
{
content: "";
clear: both;
display: table;
}
@media screen and (max-width: 300px)

{
{
width: 100%;
}
35 | P a g e
}
</style>
<body>

60px"></a><br><br>
<center><image src="sugg.png" style="width: 500px;height: 500px"></center>
<center><button onclick="document.getElementById('id01').style.display='block'"
style="width:auto;">Sign Up</button></center>
<div id="id01" class="modal">

<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close
Modal">×</span>
<form class="modal-content" action="/action_page.php">
<div class="container">
<h1>Sign Up</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label><b>Email</b></label>
<input type="text" placeholder="Enter Email..." name="email" required>
<label><b>Password</b></label>
<input type="password" placeholder="Enter Password..." name="psw" required>
<label><b>Repeat Password</b></label>
<input type="password" placeholder="Repeat Password..." name="psw-repeat" required>
<label>
<input type="checkbox" checked="checked" style="margin-bottom:15px"> Remember me
</label>
<p>By creating an account you agree to our <a href="#" style="color:dodgerblue">Terms &
Privacy</a>.</p>
<div class="clearfix">
<button type="button" onclick="document.getElementById('id01').style.display='none'"
class="cancelbtn">Cancel</button>
<button type="button" class="signupbtn"
onclick="window.location.href='file:///C:/Users/mylap/Desktop/home.html'">Sign Up</button>
</div>
</div>
</form>
</div>
<script>
var modal = document.getElementById('id01');
36 | P a g e
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
LOGIN PAGE-
<!DOCTYPE html>
<head>
<title>Login Page</title>
<style>
body
{
width: 100%;
height: 100%;
font-family: Arial;
color: #444;
-webkit-font-smoothing: antialiased;
}
h3
{
font-family: harrington;
font-size: 4em;
color: #FF5733;
text-shadow: -1px -1px 0 #000,1px -1px 0 #000;
}
#container
{
position: fixed;
width: 340px;
height: 280px;
top: 50%;
left: 50%;
margin-top: -140px;
margin-left: -170px;
background: #EA5753;
border-radius: 20px;
border: 1px solid #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}
form
37 | P a g e
{
margin: 0 auto;
margin-top: 20px;
}
label
{
color: #070707;
margin-left: 18px;
padding-top: 10px;
font-size: 14px;
text-shadow: 0 1px 0 #000;
}
pa
{
font-size: 11px;
color: #aaa;
float: right;
margin-top: -13px;
margin-right: 20px;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
transition: all .4s ease;
}
p a:hover
{
color: #555;
}
input
{
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 12px;
outline: none;
}
input[type=text],
input[type=password]
{
color: #777;
padding-left: 10px;
margin: 10px;
margin-top: 12px;
margin-left: 18px;
width: 290px;
height: 35px;
border: 1px solid #c7d0d2;
box-shadow: inset 0 1px 1px rgba(190, 190, 190, .4), 0 0 0 1px #f5f7f8;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
transition: all .4s ease;
38 | P a g e
}
input[type=text]:hover,
input[type=password]:hover
{
border: 3px solid #EA5753;
box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .7), 0 0 0 5px #f5f7f8;
}
input[type=text]:focus,
input[type=password]:focus
{
border: 1px solid #a8c9e4;
box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #e6f2f9;
}
#lower
{
background: # #EA5753;
width: 100%;
height: 69px;
margin-top: 20px;
box-shadow: inset 0 0px 0px #f5f7f8;
border-top: 1px solid #ccc;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
input[type=checkbox]
{
margin-left: 20px;
margin-top: 30px;
}
.check
{
margin-left: 3px;
font-size: 11px;
color: #070707;
text-shadow: 0 1px 0 #000;
}
input[type=button]
{
float: right;
margin-right: 20px;
margin-top: 20px;
width: 80px;
height: 30px;
font-size: 14px;
font-weight: bold;
color: #fff;
background-color: #DF0B04;
background-image:
-webkit-gradient(linear, left top, left bottom, from(#DF0B04), to(#FA7570));
background-image: -moz-linear-gradient(top left 90deg, #DF0B04 0%, #FA7570 100%);
background-image: linear-gradient(top left 90deg, #DF0B04 0%, #FA7570 100%);
39 | P a g e
border: 0.5px solid #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .5);
cursor: pointer;
}
input[type=button]:hover
{
background-image: -webkit-gradient(linear, left top, left bottom, from(#DF0B04),
to(#FA7570));
}
input[type=button]:active
{
background-image: -webkit-gradient(linear, left top, left bottom, from(#DF0B04),
to(#FA7570));
}
</style>
</head>
<body>
<image src="sugg.png" style="width: 300px;height: 300px">
<div id="container">
<form>
<label for="emailid">email ID:</label>

<input type="text" placeholder="email ID..." name="emailid">
<label for="password">Password:</label>
<input type="password" placeholder="Password..." name="password">
<div id="lower">
<input type="checkbox">
<label class="check" for="checkbox">Keep me logged in</label>
<input type="button" value="Signup"
onclick="window.location.href='file:///C:/Users/mylap/Desktop/signup.html'">
<input type="button" value="Login"
onclick="window.location.href='file:///C:/Users/mylap/Desktop/home.html'">
</div>
</form>
</div>
</body>
</html>
40 | P a g e
HOME PAGE-
<!DOCTYPE html>
<html>
<style>
body{
margin:5;
font-family: Arial;
font-size: 13px;
}
h2 {
font-size: 3em;
color: #FF5733;
}
{box-sizing: border-box;}
.topnav{
overflow: hidden;
background-color: #e9e9e9;
}
.topnav a{
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
color: white;
}
.topnav a.active {
background-color: #2196F3;
color: white;
}
.topnav .search-container {
float: right;
}
.topnav input[type=text]{
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
.topnav .search-container button {
float: right;
padding: 6px 10px;
41 | P a g e
margin-top: 8px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
.topnav .search-container button: hover{
background: #ccc;
}
@media screen and (max-width: 600px){
.topnav .search-container{
float: none;
}
.topnav a, .topnav input[type=text], .topnav .search-container button {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
border: 1px solid #ccc;
}
.navbar
{
overflow: hidden;
background-color: #333;
font-family: Arial;
}
</style>
<body>

60px"></a>
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="file:///C:/Users/mylap/Desktop/about.html">About</a>
<a href="file:///C:/Users/mylap/Desktop/contact.html">Contact</a>
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="Search..." name="search">
<button type="submit">GO</button>
</form>
</div>
</div>
42 | P a g e
<br>
<center><img src="Shopping-Begins.png" style="width: 900px; height: 400px"></center>

<center><a href="file:///C:/Users/mylap/Desktop/cart.html"><img src="ccaarrtt.png" align="center"
style="width: 100px;height: 100px"></a></center>
<br><br>
<center><a href="login.html"><img src="signout.jpg" align="center" style="width: 50px;height:
50px"></a></center>
</body>
</html>
SHOPPING PAGE-
<!DOCTYPE html>
<html>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Extra+Condensed:400,700');
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
.cart {
font-family: 'Fira Sans Extra Condensed', Arial, sans-serif;
position: relative;
overflow: hidden;
margin: 8px;
min-width: 230px;
max-width: 315px;
width: 100%;
font-size: 16px;
background-color: #fff;
color: #111;
line-height: 1.2em;
text-align: left;
}
.cart *,
.cart *:before,
.cart *:after {
-webkit-box-sizing: border-box;
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
}
.cart img {
max-width: 100%;
vertical-align: top;
}
.cart figcaption {
padding: 10px;
43 | P a g e
}
.cart h3 {
font-size: 1.4rem;
font-weight: 400;
margin: 0 0 4px;
}
.cart .price {
margin: 8px 0;
font-weight: 700;
color: #4da3e2;
font-size: 1.5rem;
}
.cart .icons {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.cart .icons a {
margin: 2px;
opacity: 0;
-webkit-transform: translateY(50%);
transform: translateY(50%);
}
.cart .icons a i {
display: block;
font-size: 23.52941176px;
line-height: 40px;
width: 40px;
background-color: #ffffff;
text-align: center;
color: #000000;
}
.cart .icons a i:hover {

background-color: #4da3e2;
color: #ffffff;
cursor: pointer;
}
.cart:hover a,
44 | P a g e
.cart.hover a {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.cart:hover a:nth-child(2),
.cart.hover a:nth-child(2) {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.cart:hover a:nth-child(3),
.cart.hover a:nth-child(3) {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
body {
</style>
<body>

60px"></a><br><hr><hr>
<figure class="cart"><img
src="https://i.pinimg.com/236x/53/73/bf/5373bf16aba69b2d52ca603fedd0d727--tuxedo-suit-white-
fashion.jpg" height="230" />
<div class="icons"><a><i class="ion-android-cart"
onclick="window.location.href='file:///C:/Users/mylap/Desktop/add2cart.html'"></i></a><a><i
class="ion-android-star"></i></a><a><i class="ion-android-share-alt"></i></a></div>
<figcaption>
<h3>Mens Formals</h3>
<div class="price">₹.5000</div>
</figcaption>
</figure>
<figure class="cart">
<img src="https://ae01.alicdn.com/kf/HTB1nq64IpXXXXXBXpXXq6xXFXXXh/Plaid-Layered-look-
Long-Sleeve-Work-Office-Lady-Dress-with-Belt-Knee-Length-Elegant-Formal-Women.jpg"
height="230" />
45 | P a g e
<figcaption>
<h3>Womens Formals</h3>
</figcaption>
</figure>
src="https://i.pinimg.com/originals/1f/47/e3/1f47e311d044ea6858ae5204bff9cfe3.jpg" height="230" />
<figcaption>
<h3>Kids Formals</h3>
</figcaption>
</figure>
<figure class="cart"><img src="https://www.grouphunt.sg/images/58d4b3c6ecb71.jpg" height="230" />
<figcaption>
<h3>Formal Shoe</h3>
</figcaption>
</figure>
<figure class="cart">
<img src="https://rukminim1.flixcart.com/image/832/832/j3xbzww0/watch/c/f/c/combo-of-three-
formal-casual-party-wear-watches-abrexo-original-imaeuy584e7tmdhg.jpeg?q=70" height="230" />
<figcaption>
<h3>Formal Watch</h3>
</figcaption>
</figure>
<figure class="cart"><img src="https://i1.adis.ws/i/tom_ford/TF_PRIVATE_TOM_LOGO_2"
height="230" />
<figcaption>
<h3>Tom Ford Spectacles</h3>
</figcaption>
</figure>
<figure class="cart"><img src="http://ecx.images-amazon.com/images/I/51xFVsDixFL.jpg"
height="230" />
46 | P a g e
<figcaption>
<h3>Bridal Jewellery Set</h3>
</figcaption>
</figure>
src="http://i01.appmifile.com/v1/MI_18455B3E4DA706226CF7535A58E875F0267/pms_1503455217.4
5294512.jpg?width=420&height=420" height="230" />
<figcaption>
<h3>Highfy Backpack</h3>
</figcaption>
</figure>
<figure class="cart"><img src="http://i.ebayimg.com/images/i/132277241187-0-1/s-l1000.jpg"
height="230" />
<figcaption>
<h3>Gaming Headset</h3>
</figcaption>
</figure>

50px"></a></center>
</body>
</html>
CART PAGE-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html">
<title>Custom Shopping Cart Layout - SpyreStudios Demo</title>
<meta name="author" content="Jake Rocheleau">
<link rel="shortcut icon" href="http://spyrestudios.com/favicon.ico">
<link rel="icon" href="http://spyrestudios.com/favicon.ico">
<link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
</head>
47 | P a g e
@import url(http://fonts.googleapis.com/css?family=Fredoka+One);
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u,
i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-box-sizing: border-box;
}
html { overflow-y: scroll; }
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 62.5%;
line-height: 1;
color: #414141;
background: #caccf7 url("backgrnd.jpeg");
padding: 25px 0;
}
::selection { background: #bdc0e8; }

::-moz-selection { background: #bdc0e8; }
::-webkit-selection { background: #bdc0e8; }
br { display: block; line-height: 1.6em; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
input, textarea {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-box-sizing: border-box;
outline: none;
}
blockquote, q { quotes: none; }
48 | P a g e
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong, b { font-weight: bold; }
em, i { font-style: italic; }
table { border-collapse: collapse; border-spacing: 0; }

img { border: 0; max-width: 100%; }
h1 {
font-family: 'Fredoka One', Helvetica, Tahoma, sans-serif;
color: #fff;
text-shadow: 1px 2px 0 #2F2728;
font-size: 3.5em;
line-height: 1.1em;
padding: 6px 0;
font-weight: normal;
text-align: center;
}
/* page structure */
#w {
display: block;
width: 600px;
margin: 0 auto;
}
#title {
display: block;
width: 100%;
background: #F13848;
padding: 10px 0;
-webkit-border-top-right-radius: 6px;
-webkit-border-top-left-radius: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-topleft: 6px;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
}
#page {
display: block;
background: #fff;
padding: 15px 0;
-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.4);
-moz-box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
/** cart table **/

#cart {
display: block;
border-collapse: collapse;
49 | P a g e
margin: 0;
width: 100%;
font-size: 1.2em;
color: #444;
}
#cart thead th {
padding: 8px 0;
font-weight: bold;
}
#cart thead th.first {

width: 175px;
}
#cart thead th.second {
width: 45px;
}
#cart thead th.third {
width: 230px;
}
#cart thead th.fourth {
width: 130px;
}
#cart thead th.fifth {
width: 20px;
}
#cart tbody td {
text-align: center;
margin-top: 4px;
}
tr.productitm {
height: 65px;
line-height: 65px;
border-bottom: 1px solid #d7dbe0;
}
#cart tbody td img.thumb {

vertical-align: bottom;
border: 1px solid #ddd;
margin-bottom: 4px;
}
.qtyinput {
width: 33px;
height: 22px;
border: 1px solid #a3b8d3;
background: #F79FA7;
color: #616161;
text-align: center;
50 | P a g e
}
tr.totalprice, tr.extracosts {
height: 35px;
line-height: 35px;
}
tr.extracosts {
background: #F46A76;
}
.remove {
cursor: pointer;
position: relative;
right: 12px;
top: 5px;
}
.light {
color: #888b8d;
text-shadow: 1px 1px 0 rgba(255,255,255,0.45);
font-size: 1.1em;
font-weight: normal;
}
.thick {
color: #272727;
font-size: 1.7em;
font-weight: bold;
}
/** submit btn **/

tr.checkoutrow {
background: #F3515F;
border-top: 1px solid #abc0db;
border-bottom: 1px solid #abc0db;
}
td.checkout {
padding: 12px 0;
padding-top: 20px;
width: 100%;
text-align: right;
}
#submitbtn {
width: 150px;
height: 35px;
outline: none;
border: none;
border-radius: 5px;
margin: 0 0 10px 0;
51 | P a g e
font-size: 1.3em;
letter-spacing: 0.05em;
font-family: Arial, Tahoma, sans-serif;
color: #fff;
text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
cursor: pointer;
overflow: hidden;
border-bottom: 1px solid #fff;
border-top: 1px solid #fff;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #DF0B04), color-
stop(100%, #FA7570));
background-image: -webkit-linear-gradient(#DF0B04, #FA7570);
background-image: -moz-linear-gradient(#DF0B04, #FA7570);
background-image: -o-linear-gradient(#DF0B04, #FA7570);
background-image: linear-gradient(#DF0B04, #FA7570);
}
#submitbtn:hover {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #AC0816), color-
stop(100%, #E50B1E));
background-image: -webkit-linear-gradient(#AC0816, #E50B1E);
background-image: -moz-linear-gradient(#AC0816, #E50B1E);
background-image: -o-linear-gradient(#AC0816, #E50B1E);
background-image: linear-gradient(#AC0816, #E50B1E);
}
#submitbtn:active {
border-bottom: 0;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #DF0B04), color-
stop(100%, #FA7570));
background-image: -webkit-linear-gradient(#DF0B04, #FA7570);
background-image: -moz-linear-gradient(#DF0B04, #FA7570);
background-image: -o-linear-gradient(#DF0B04, #FA7570);
background-image: linear-gradient(#DF0B04, #FA7570);
-webkit-box-shadow: inset 0 1px 3px 1px rgba(0,0,0,0.25);
-moz-box-shadow: inset 0 1px 3px 1px rgba(0,0,0,0.25);
box-shadow: inset 0 1px 3px 1px rgba(0,0,0,0.25);
}
</style>
<body>
<div id="w">
<header id="title">
<h1>SUGG LIFE CART</h1>
</header>
<div id="page">
<table id="cart">
<thead>
<tr>
<th class="first">Photo</th>
52 | P a g e
<th class="second">Qty</th>
<th class="third">Product</th>
<th class="fourth">Line Total</th>
<th class="fifth"> </th>
</tr>
</thead>
<tbody>

<tr class="productitm">
<td><img src="https://i.pinimg.com/236x/53/73/bf/5373bf16aba69b2d52ca603fedd0d727--
tuxedo-suit-white-fashion.jpg" width="60" height="60" class="thumb"></td>
<td><input type="number" value="1" min="0" max="99" class="qtyinput"></td>
<td>Mens Formals</td>
<td>₹.5000</td>
<td><span class="remove"><img
src="http://idahoptv.org/sciencetrek/topics/garbage/images/trashcan.gif" width="20" height="30"
alt="X"></span></td>
</tr>
<td><img src="https://rukminim1.flixcart.com/image/832/832/j3xbzww0/watch/c/f/c/combo-of-
three-formal-casual-party-wear-watches-abrexo-original-imaeuy584e7tmdhg.jpeg?q=70" width="60"
height="60" class="thumb"></td>
<td>Formal Watches</td>
<td>₹.3000</td>
src="http://idahoptv.org/sciencetrek/topics/garbage/images/trashcan.gif" width="20" height="30""
</tr>
<td><img
src="http://i01.appmifile.com/v1/MI_18455B3E4DA706226CF7535A58E875F0267/pms_1503455217.4
5294512.jpg?width=420&height=420" width="60" height="60" class="thumb"></td>
<td>Highfy Bagpack</td>
<td>₹.1500</td>
</tr>
<td><img src="http://i.ebayimg.com/images/i/132277241187-0-1/s-l1000.jpg" width="60"
height="60" class="thumb"></td>
<td>Gaming Headset</td>
<td>₹.2000</td>
</tr>
53 | P a g e
<tr class="extracosts">
<td class="light">Shipping & Tax</td>
<td colspan="2" class="light"></td>
<td>₹.50</td>
<td> </td>
</tr>
<tr class="totalprice">
<td class="light">Total:</td>
<td colspan="2"> </td>
<td colspan="2"><span class="thick">₹.11700</span></td>
</tr>
<tr class="checkoutrow">
<td colspan="5" class="checkout"><button id="submitbtn"
onclick="window.location.href='file:///C:/Users/mylap/Desktop/pay.html'">Checkout
Now!</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<br>
<a href="https://www.paypal.com/in/home"><img src="http://www.multinational.com.au/wp-
content/uploads/2017/12/pay_pal_ams.png" style="width: 250px;height: 100px"></a>
<br>
50px"></a></center>
</body>
</html>
PAYMENT PAGE-
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Document</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<meta name="robots" content="noindex,follow" />
*{
}
body {
font-family: 'Montserrat', sans-serif;
display: flex;
width: 100%;
height: 100%;
54 | P a g e
justify-content: center;
align-items: center;
}
.checkout-panel {
display: flex;
width: 940px;
height: 766px;
background-color: rgb(255, 255, 255);
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .2);
}
.panel-body {
padding: 45px 80px 0;
flex: 1;
}
.title {
font-weight: 700;
margin-top: 0;
color: #2e2e2e;
}
.progress-bar {
display: flex;
justify-content: space-between;
}
.step {
position: relative;
z-index: 1;
display: block;
width: 25px;
height: 25px;
border: 4px solid #fff;
border-radius: 50%;
background-color: #efefef;
}
.step:after {
position: absolute;
z-index: -1;
top: 5px;
left: 22px;
55 | P a g e
width: 225px;
height: 6px;
content: '';
background-color: #efefef;
}
.step:before {
color: #2e2e2e;
position: absolute;
top: 40px;
}
.step:last-child:after {
content: none;
}
.step.active {
background-color: #f62f5e;
}
.step.active:after {
}
.step.active:before {
color: #f62f5e;
}
.step.active + .step {
}
.step.active + .step:before {
color: #f62f5e;
}
.step:nth-child(1):before {
content: 'Delivery';
}
right: -40px;
content: 'Confirmation';
}
right: -30px;
content: 'Payment';
}
right: 0;
content: 'Finish';
}
.payment-method {
display: flex;
56 | P a g e
}
.method {
display: flex;
width: 382px;
height: 122px;
padding-top: 20px;
cursor: pointer;
border: 1px solid transparent;
border-radius: 2px;
justify-content: center;
}
.blue-border {
border: 1px solid rgb(110, 178, 251);
}
.card-logos {
display: flex;
width: 150px;
}
.radio-input {
margin-top: 20px;
}
input[type='radio'] {
}
.input-fields {
display: flex;
}
.input-fields label {
display: block;
color: #b4b4b4;
}
.warning {
border-color: #f62f5e !important;
}
57 | P a g e
.info {
font-size: 12px;
font-weight: 300;
display: block;
margin-top: 50px;
opacity: .5;
color: #2e2e2e;
}
div[class*='column'] {
width: 382px;
}
input[type='text'],
input[type='password'] {
font-size: 16px;
width: 100%;
height: 50px;
padding-right: 40px;
padding-left: 16px;
color: rgba(46, 46, 46, .8);
border: 1px solid rgb(225, 225, 225);
border-radius: 4px;
outline: none;
}
input[type='text']:focus,
input[type='password']:focus {
border-color: rgb(119, 219, 119);
}
.small-inputs {
display: flex;
margin-top: 20px;
}
.small-inputs div {
width: 182px;
}
.panel-footer {
display: flex;
width: 100%;
height: 96px;
padding: 0 80px;
58 | P a g e
}
.btn {
font-size: 16px;
width: 163px;
height: 48px;
cursor: pointer;
transition: all .2s ease-in-out;
letter-spacing: 1px;
border: none;
}
.back-btn {
color: #f62f5e;
background: #fff;
}
.next-btn {
color: #fff;
background: #f62f5e;
}
.btn:focus {
outline: none;
}
.btn:hover {
transform: scale(1.1);
}
</style>
<body>
<div class="checkout-panel">
<div class="panel-body">
<h1 class="title">Checkout</h1>
<div class="progress-bar">
<div class="step active"></div>
<div class="step active"></div>
<div class="step"></div>
<div class="step"></div>
</div>
<div class="payment-method">
<label for="card" class="method card">
<div class="card-logos">
<img src="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcRUtcQQDSc1cstnT5fz84WMoBi5PH_UQ8LvmY7FIzcf6iEnM
Mroyg"/ height="90px" width="250px">
59 | P a g e
</div>
<div class="radio-input">
<input id="card" type="radio" name="payment">
Pay ₹50.00 with credit card
</div>
</label>
<label for="paypal" class="method paypal">

<div class="card-logos">
<img src="https://cdn.pixabay.com/photo/2015/05/26/09/37/paypal-784404_960_720.png"
height="130px" width="250px" />
</div>
<div class="radio-input">
<input id="paypal" type="radio" name="payment">
Pay ₹40.00 with PayPal
</div>
</label>
</div>
<div class="input-fields">
<div class="column-1">
<label for="cardholder">Cardholder's Name</label>
<input type="text" id="cardholder" />
<div class="small-inputs">
<div>
<label for="date">Valid thru</label>
<input type="text" id="date" placeholder="MM / YY" />
</div>
<div>
<label for="verification">CVV / CVC *</label>
<input type="password" id="verification"/>
</div>
</div>
</div>
<div class="column-2">
<label for="cardnumber">Card Number</label>
<input type="password" id="cardnumber"/>
<span class="info">* CVV or CVC is the card security code, unique three digits number on the
back of your card separate from its number.</span>
</div>
</div>
</div>
<div class="panel-footer">
<button class="btn back-btn"
onclick="window.location.href='file:///C:/Users/mylap/Desktop/add2cart.html'">Back</button>
60 | P a g e
<button class="btn next-btn"
onclick="window.location.href='file:///C:/Users/mylap/Desktop/conform.html'">Next Step</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
PAYMENT CONFIRMATION PAGE-

<!DOCTYPE html>
<html>
body{
margin:5;
font-family: Arial;
font-size: 17px;
background-image:
url("http://www.cwlakecharles.com/uploads/4/1/4/1/41414441/5072109.jpg?123");
}
h2 {
font-family: Brush Script MT;
font-size: 50px;
color: #FF5733;
}
pre {
background-image: url("http://www.designbolts.com/wp-content/uploads/2013/02/Floral-
Grey-Seamless-Pattern-For-Website-Background.jpg");
width: 1150px;
padding: 25px;
border: 8px solid crimson;
font-family: Brush Script MT;
font-size: 21px;
}
pre.outset {border-style: outset;}
</style>
<body>

<pre class="outset">
<h2> Payment Conformation</h2><hr>
Thank You For Your Purchase !
A receipt will be mailed to you. Please contact rajeevanakshay@gmail.com with
any questions.
</pre>
</body>
61 | P a g e
ABOUT PAGE-
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css">
<style>
body{
margin:5;
font-family: Arial;
font-size: 17px;
}
pre {
background-image: url("https://data.whicdn.com/images/150365670/original.png");
width: 1210px;
padding: 25px;
border: 8px solid crimson;
font-family: Arial;
font-size: 17px;
}
pre.outset {border-style: outset;}
h2 {
font-size: 3em;
color: #FF5733;
}
*{box-sizing: border-box;}
.topnav{
overflow: hidden;
}
.topnav a{
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
font-size: 17px;
}
.topnav a:hover {
color: white;
}
.topnav a.active {
62 | P a g e
color: white;
}
float: right;
}
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
background: #ccc;
}
float: none;
}
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
}
.navbar
{
overflow: hidden;
font-family: Arial;
}
</style>
<body>
63 | P a g e

60px"></a>
<a href="file:///C:/Users/mylap/Desktop/home.html">Home</a>
<a class="active" href="#about">About</a>
<a href="file:///C:/Users/mylap/Desktop/contact.html">Contact</a>
</form>
</div>
</div>
<br>
<pre class="outset"> Sugg Life, a place to share your online shopping and provide
feedback and reviews of the products delivered to you.
We give you various reasons for this:
1) Earn Exciting Rewards- Share your purchase with others and get exciting
rewards in the form of cashbacks, discount & coupons.
2) Be a Celebrity- “Swag” is the new cool, set trends and make followers by
showing off what you own.
3) Socialize- Expand your social network, by meeting new people, who have
similar choices as yours.
4) Help others make the right choice- Share your knowledge & experience of
using a product to help someone make their choices.
Its the best platform to discover what's trending in the categories of your choices.
Developer-
Visit website
Email: sugglifeshopping@gmail.com
Privacy Policy
Shopping Post-
2nd floor,No 5, GST Road
Guduvancheri, Chennai-603202
India</pre>
<center><a href="review.html"><img src="review.png" align="center" style="width: 180px;height:

130px"></a></center>
50px"></a></center>
</body>
</html>
64 | P a g e
CONTACT PAGE-
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css">
<style>
body{
margin:5;
font-family: Arial;
font-size: 17px;
}
h2 {
font-size: 3em;
color: #FF5733;
}
*{box-sizing: border-box;}
.topnav{
overflow: hidden;
}
.topnav a{
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
font-size: 17px;
}
.topnav a:hover {
color: white;
}
.topnav a.active {
color: white;
}
float: right;
}
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
65 | P a g e
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
background: #ccc;
}
float: none;
}
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
}
.navbar
{
overflow: hidden;
font-family: Arial;
}
}
</style>
<body>

60px"></a>
<a href="file:///C:/Users/mylap/Desktop/home.html">Home</a>
<a href="file:///C:/Users/mylap/Desktop/about.html">About</a>
<a class="active" href="#contact">Contact</a>
66 | P a g e
</form>
</div>
</div>
<br>
<center><a href="cont.html"><img src="contact.png" align="center" style="width: 300px;height:
300px"></a></center>
<center><a href="https://www.facebook.com/"><img
src="https://deematthewsbluecollahero.files.wordpress.com/2017/02/facebook.png" align="center"
style="width: 50px;height: 50px"></a>
<a href="https://twitter.com/"><img
src="https://jovesaltmaresme.files.wordpress.com/2014/12/twitterr.png" align="center" style="width:
50px;height: 50px"></a>
<a href="https://www.youtube.com/"><img src="http://www.ragagarage.com/images/inside-
youtube.png" align="center" style="width: 50px;height: 50px"></a>
<a href="https://in.linkedin.com/"><img src="http://lmssuccess.com/wp-
content/uploads/LinkedIN.png" align="center" style="width: 50px;height: 50px"></a></center>

50px"></a></center>
</body>
</html>
67 | P a g e
8.2 SCREEN SHOT
Login Page-
Signup Page-
68 | P a g e
Home Page-
Shopping Page-
69 | P a g e
Cart Page-
Payment Page-
70 | P a g e
Payment Conformation Page-
About Page-
71 | P a g e
Contact Page-
72 | P a g e
CHAPTER – IX
9.0 BIBLIOGRAPHY
Articles-
1. Chen, L. (2000). Enticing Online Consumers: A Technology Acceptance Perspective
Research- in-Progress, ACM Proceedings, SIGCPR
2. Diwakar, H., Marathe, M. (2000). The architecture of a one-stop web-window shop.
December, ACM SIGecom Exchanges, Volume 2 Issue 1.
3. Morrison, M., Morrison, J., and Keys, A. (2002). Integrating Web Sites and Databases.
Communications of the ACM, September, Volume 45, Issue 9.
4. Kubilus, N. J. (2000). Designing an e-commerce site for users. September2000, Crossroads,
Volume 7 Issue 1.
Books-
5. Anderson, R., Francis, B., Homer, A., Howard, R., Sussman, D. and Watson(2001)
Professional ASP.NET. Wrox Press Ltd.
6. Wagner, R., Daniels, K., Griffin, G., Haddad, C. and Nasr, J. (1997) JavaScript Unleashed.
SAMS Net.
7. Wiley, Y. M. J. & Sons. (1997) Creating the Virtual Store: Taking Your Website from
Browsing to Buying.
Websites-
8.http://encyclopedia.laborlawtalk.com/IISfor information on IIS
9.http://aspnet.4guysfromrolla.com/articles/020404-1.aspxfor relationship between IIS and
ASP.NET.
10.http://216.15.201.66/dpec/course.htm?fullpg=http
73 | P a g e

Sugg Life Online Shopping Portal: Contents of Report

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Sugg Life Online Shopping Portal: Contents of Report

Uploaded by

Copyright:

Available Formats

SUGG LIFE ONLINE SHOPPING PORTAL

Shopping cart is a very important feature used in e-commerce to assist people

1.1 ORGANIZATION PROFILE

1.2 PURPOSE OF THE PROJECT

1.3 PROBLEMS IN EXISTING SYSTEM

1.4 SOLUTION OF THESE PROBLEMS

2.0 SYSTEM ANALYSIS

2.2 ANALYSIS MODEL

2.3 STUDY OF THE SYSTEM

2.4 STUDY OF THE PROBLEM

2.5 PROJECT SCOPE

2.7 PROPOSED SYSTEM

3.0 FEASIBILITY REPORT

3.1 TECHNICAL FEASIBILITY

3.2 OPERATIONAL FEASIBILITY

3.3 ECONOMIC FEASIBILITY

4.1 HARDWARE REQUIREMENT

4.2 SOFTWARE REQUIREMENT

4.3 SOFTWARE FEATURES

5.0 SYSTEM DESIGN

5.2 INPUT AND OUTPUT DESIGN

5.3 SYSTEM WORKFLOW

5.5 DATA FLOW DIAGRAM

6.0 SYSTEM TESTING

7.1 FUTURE ENHANCEMENT

8.1 SAMPLE CODE

8.2 SCREEN SHOT

1.1 ORGANIZATION PROFILE-

 Software Development Services

1.2 PURPOSE OF THE PROJECT-

1.4 SOLUTION OF THESE PROBLEMS-

2.2 ANALYSIS MODE

2.3 STUDY OF SYSTEM

1.Administrative user interface

Entities Involved in the Project:

2.4. STUDY OF THE PROBLEM

2.5. PROJECT SCOPE

 PIV 2.8 GHz Processor and Above

2.7 Proposed System-

3.0 FEASIBILITY STUDY-

3.1 TECHNICAL FEASIBILITY-

 Does the necessary technology exist to do what is suggested?

 Is there sufficient support for the management from the users?

3.3 ECONOMIC FEASIBILITY-

4.0 REQUIREMENT SPECIFICATION

4.3 SOFTWARE FEATURES-

1. The STYLE attribute on an individual element tag

4. Style attributes specified by the viewer to the browser

5. The default style sheet assumed by the browser

The following are key points of Sublime Text:

 "Go to Anything," quick navigation to files, symbols, or lines

The following are important features of Sublime Text:

 Column selection and multi-select editing

5.0 SYSTEM DESIGN

5.2 INPUT AND OUTPUT DESIGN

(Logging Via CustID)

Order Confirmation & Accept Order ----> Entry into main

View all user

Add Bus Gallery

Add bus Detaills

5.5 DATA FLOW DIAGRAM

6.0 SYSTEM TESTING

1. WHITE BOX TESTING

/ cart table /

/ submit btn /